/* NEOPAL — feuille de style unique.
   Une seule famille (Cormorant Garamond), cinq tailles, espacements multiples
   de 4 px, couleurs définies une fois ci-dessous. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }

:root {
  --noir: #0b0b0d;
  --noir-2: #131317;
  --noir-3: #1b1b21;
  --ivoire: #ece6da;
  --ivoire-doux: #bdb5a7;
  --filet: rgba(236, 230, 218, 0.16);
  --filet-fort: rgba(236, 230, 218, 0.42);
  --erreur: #ff9a8f;
  --succes: #9fdcb4;
  --texte-exemple: #8f887c;
  --voile-entete: rgba(11, 11, 13, 0.85);
  --voile-transparent: rgba(11, 11, 13, 0);
  --repli-reflet: rgba(255, 255, 255, 0.3);
  --repli-1: rgba(127, 214, 208, 0.55);
  --repli-2: rgba(214, 160, 216, 0.5);
  --repli-3: rgba(240, 185, 143, 0.45);
  --repli-coeur: #1a1d28;
  --repli-bord: #07080b;
  --ombre: rgba(0, 0, 0, 0.6);
  --iris: linear-gradient(100deg, #7fd6d0 0%, #8fa8f0 25%, #d6a0d8 50%, #f0b98f 75%, #7fd6d0 100%);
  --iris-conique: conic-gradient(from 0deg, #7fd6d0, #8fa8f0, #d6a0d8, #f0b98f, #7fd6d0);

  --police: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --t-1: 0.875rem;
  --t-2: 1.1875rem;
  --t-3: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  --t-4: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  --t-5: clamp(3.5rem, 1.2rem + 9vw, 10rem);

  --goutiere: 24px;
  --section: 96px;
  --largeur: 1440px;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --courbe-rideau: cubic-bezier(0.76, 0, 0.24, 1);
  --entete: 72px;
}
@media (min-width: 768px) { :root { --goutiere: 48px; --section: 128px; } }
@media (min-width: 1200px) { :root { --goutiere: 64px; --section: 160px; --entete: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noir); color: var(--ivoire); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--police); font-size: var(--t-2); font-weight: 500; line-height: 1.6;
  background: var(--noir); color: var(--ivoire); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure, blockquote, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
::selection { background: var(--ivoire); color: var(--noir); }
:focus-visible { outline: 3px solid var(--ivoire); outline-offset: 4px; border-radius: 2px; }
main:focus { outline: none; }

[hidden] { display: none !important; }
.vh { -webkit-user-select: none; user-select: none; position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 20px; background: var(--ivoire); color: var(--noir); font-size: var(--t-1); transform: translateY(-200%); }
.evitement:focus { transform: none; }

/* Lenis (défilement fluide) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ——— Typographie ——— */
.surtitre {
  font-size: var(--t-1); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivoire-doux);
  display: inline-flex; align-items: center; gap: 16px; margin-bottom: 24px;
}
.surtitre::before { content: ""; width: 32px; height: 1px; background: var(--iris); opacity: 0.9; }
h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-3); line-height: 1.15; }
p { max-width: 62ch; }

.lien {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 32px;
  font-size: var(--t-1); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
}
.lien span { background: linear-gradient(var(--ivoire), var(--ivoire)) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size 0.3s var(--courbe); }
.lien::after { content: "→"; font-size: var(--t-2); letter-spacing: 0; transition: transform 0.3s var(--courbe); }
.lien:hover span { background-image: var(--iris); }
.lien:hover::after { transform: translateX(4px); }

.filet-irise { display: block; width: 96px; height: 1px; background: var(--iris); margin-top: 48px; opacity: 0.85; }

/* ——— Boutons ——— */
.bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 16px 32px;
  font: 600 var(--t-1)/1.2 var(--police); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ivoire); border-radius: 999px; cursor: pointer; isolation: isolate; overflow: hidden;
  transition: color 0.3s var(--courbe), border-color 0.3s var(--courbe);
}
.bouton span { position: relative; z-index: 1; }
.bouton--principal { background: var(--ivoire); color: var(--noir); }
.bouton--principal::before {
  content: ""; position: absolute; inset: -2px; z-index: 0; background: var(--iris); background-size: 200% 100%;
  opacity: 0; transition: opacity 0.3s var(--courbe);
}
.bouton--principal:hover::before { opacity: 0.55; animation: lueur 6s linear infinite; }
.bouton:active { transform: scale(0.98); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.55; cursor: progress; }
@keyframes lueur { to { background-position: 200% 0; } }

/* ——— En-tête ——— */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--entete);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--goutiere);
  background: linear-gradient(to bottom, var(--voile-entete), var(--voile-transparent));
  transition: transform 0.45s var(--courbe), background-color 0.3s;
  view-transition-name: entete;
}
.entete.cachee { transform: translateY(-100%); }
/* Une fois la page défilée, l'en-tête a un fond : le logo ne se mêle plus au texte. */
.entete.defile { background: var(--voile-entete); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.marque { position: relative; z-index: 2; font-size: var(--t-2); font-weight: 600; letter-spacing: 0.42em; text-decoration: none; margin-right: auto; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
.nav ul { display: flex; gap: 32px; align-items: center; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-1); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ivoire-doux);
  transition: color 0.3s;
}
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--iris); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--courbe); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ivoire); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a.nav__rdv { border: 1px solid var(--filet-fort); border-radius: 999px; padding: 0 20px; color: var(--ivoire); }
.nav a.nav__rdv::after { left: 20px; right: 20px; }
.langue {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  font-size: var(--t-1); font-weight: 600; letter-spacing: 0.18em; text-decoration: none; color: var(--ivoire-doux);
}
.langue:hover { color: var(--ivoire); }
.menu-bouton { display: none; }
@media (max-width: 359px) { .menu-bouton__texte { display: none !important; } .menu-bouton { min-width: 44px; justify-content: center; } .entete { gap: 16px; } }

@media (max-width: 1099px) {
  .menu-bouton {
    display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; z-index: 2;
    background: none; border: 0; color: var(--ivoire); font: 600 var(--t-1)/1 var(--police); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  }
  .menu-bouton__traits { position: relative; width: 24px; height: 8px; }
  .menu-bouton__traits::before, .menu-bouton__traits::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 0.3s var(--courbe); }
  .menu-bouton__traits::before { top: 0; }
  .menu-bouton__traits::after { bottom: 0; }
  .menu-ouvert .menu-bouton__traits::before { transform: translateY(3.5px) rotate(45deg); }
  .menu-ouvert .menu-bouton__traits::after { transform: translateY(-3.5px) rotate(-45deg); }
  .langue { z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; padding: calc(var(--entete) + 24px) var(--goutiere) 48px;
    background: var(--noir); visibility: hidden; opacity: 0; transition: opacity 0.3s var(--courbe), visibility 0s 0.3s;
  }
  .menu-ouvert .nav { visibility: visible; opacity: 1; transition: opacity 0.3s var(--courbe); }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nav a { font-size: var(--t-4); font-weight: 400; letter-spacing: 0; text-transform: none; }
  .nav a::after { bottom: 4px; }
  .nav a.nav__rdv { border: 0; padding: 0; margin-top: 16px; }
  .nav a.nav__rdv::after { left: 0; right: 0; }
  .menu-ouvert .entete { background: transparent; transform: none; }
}

@media (max-width: 1099px) {
  html:not(.js) .entete { position: static; height: auto; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
  html:not(.js) .menu-bouton { display: none; }
  html:not(.js) .nav { position: static; visibility: visible; opacity: 1; padding: 0; background: none; order: 3; width: 100%; }
  html:not(.js) .nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
  html:not(.js) .nav a { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
  html:not(.js) .nav a.nav__rdv { margin-top: 0; }
}

/* ——— Couleurs forcées : pointeur du système, contours visibles ——— */
@media (forced-colors: active) {
  .curseur, .halo { display: none; }
  .curseur-actif, .curseur-actif * { cursor: auto !important; }
  .bouton { border: 1px solid ButtonText; }
}

/* ——— Structure des sections ——— */
main > section { position: relative; padding: var(--section) var(--goutiere); max-width: var(--largeur); margin: 0 auto; }

/* ——— Accueil : héros ——— */
.hero {
  min-height: 100vh; min-height: 100svh; display: grid; align-items: end;
  padding-top: calc(var(--entete) + 24px) !important; padding-bottom: 96px !important; max-width: none !important; overflow: hidden;
}
.hero__opale { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hero__opale::before {
  content: ""; position: absolute; width: min(90vmin, 900px); aspect-ratio: 1; border-radius: 50%;
  background: var(--iris-conique); filter: blur(120px); opacity: 0.12;
}
.opale { position: relative; width: min(84vmin, 860px); aspect-ratio: 1; touch-action: pan-y; }
.hero .opale { pointer-events: auto; }
.opale-repli {
  display: none; position: absolute; width: min(46vmin, 480px); aspect-ratio: 3 / 4; border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 28%, var(--repli-reflet), transparent 22%),
    radial-gradient(ellipse at 30% 60%, var(--repli-1), transparent 40%),
    radial-gradient(ellipse at 68% 40%, var(--repli-2), transparent 42%),
    radial-gradient(ellipse at 60% 75%, var(--repli-3), transparent 40%),
    radial-gradient(ellipse at 50% 50%, var(--repli-coeur), var(--repli-bord) 75%);
  box-shadow: inset 0 -24px 48px var(--ombre), 0 40px 80px var(--ombre);
}
.opale[data-etat="repli"] { display: none; }
.opale[data-etat="repli"] + .opale-repli { display: block; }

.hero__texte { position: relative; z-index: 1; max-width: 1440px; width: 100%; margin: 0 auto; pointer-events: none; }
.hero__texte a, .hero__texte button { pointer-events: auto; }
.hero__titre { font-size: var(--t-5); font-weight: 400; letter-spacing: 0.18em; line-height: 0.95; margin-left: -0.06em; }
.hero__sous { font-size: var(--t-3); font-style: italic; font-weight: 400; color: var(--ivoire); margin-top: 24px; max-width: 28ch; line-height: 1.3; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 40px; }
.hero__actions .lien { margin-top: 0; }
.hero__defiler {
  position: absolute; right: var(--goutiere); bottom: 96px; writing-mode: vertical-rl; font-size: var(--t-1); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ivoire-doux); display: flex; align-items: center; gap: 16px;
}
.hero__defiler::after { content: ""; width: 1px; height: 64px; background: linear-gradient(var(--ivoire-doux), transparent); animation: descente 2.4s var(--courbe) infinite; transform-origin: top; }
@keyframes descente { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.mouvement {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; min-height: 44px; padding: 8px 0; border: 0; background: none;
  color: var(--ivoire-doux); font: italic 500 var(--t-2)/1.3 var(--police); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--filet-fort); cursor: pointer;
}
.mouvement:hover { color: var(--ivoire); }
@media (min-width: 900px) {
  .hero__opale { place-items: center end; padding-right: 64px; }

}
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--entete) !important; padding-bottom: 64px !important; }
  .hero__opale { position: relative; inset: auto; height: 52vh; height: 52svh; margin: 0 calc(-1 * var(--goutiere)); }
  .opale { width: min(100vw, 52svh, 560px); }
  .hero__defiler { display: none; }
  .bouton { letter-spacing: 0.12em; padding: 16px 24px; }
}

/* ——— Manifeste ——— */
.manifeste { text-align: left; }
.manifeste__texte { font-size: var(--t-4); line-height: 1.12; max-width: 20ch; font-weight: 400; }
@media (min-width: 1200px) { .manifeste { padding-left: calc(var(--goutiere) + 128px); } }

/* ——— Piliers ——— */
.piliers__liste { display: grid; gap: 64px; }
@media (min-width: 900px) { .piliers__liste { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.pilier { border-top: 1px solid var(--filet); padding-top: 32px; }
.pilier__num { display: block; font-size: var(--t-1); letter-spacing: 0.24em; color: var(--ivoire-doux); margin-bottom: 32px; }
.pilier__titre { font-size: var(--t-3); margin-bottom: 16px; font-style: italic; }
.pilier p { color: var(--ivoire-doux); }

/* ——— Intro des pages ——— */
.intro { padding-top: calc(var(--entete) + 128px) !important; }
.intro--compacte { padding-bottom: 48px !important; }
.intro__titre { font-size: var(--t-5); max-width: 14ch; line-height: 0.98; }
.intro--compacte .intro__titre { font-size: var(--t-4); }
.intro__texte { font-size: var(--t-3); line-height: 1.35; margin-top: 40px; max-width: 34ch; color: var(--ivoire-doux); font-weight: 400; }

/* ——— Texte + visuel ——— */
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 4fr; gap: 96px; }
  .split--inverse { grid-template-columns: 4fr 5fr; }
  .split--inverse .split__visuel { order: 2; }
}
.split__visuel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noir-2); }
.split__visuel .parallaxe { position: absolute; inset: -12% 0; }
.split__visuel img, .split__visuel picture { width: 100%; height: 100%; object-fit: cover; }
/* Photo d'ambiance basse définition (432 × 768) : jamais agrandie. */
.split__visuel--photo { aspect-ratio: 432 / 768; width: 100%; max-width: 432px; justify-self: center; }
.split__titre { margin-bottom: 32px; max-width: 14ch; }
.split__texte p + p { margin-top: 16px; }
.split__texte p { color: var(--ivoire-doux); }

/* ——— Galerie horizontale ——— */
.galerie { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
.galerie__collant { display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.galerie__entete { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 48px; padding: 0 var(--goutiere); max-width: var(--largeur); width: 100%; margin: 0 auto; }
.galerie__entete .surtitre { grid-column: 1 / -1; justify-self: start; }
.galerie__titre { max-width: 16ch; }
.galerie__compteur { display: flex; align-items: center; gap: 16px; font-size: var(--t-1); letter-spacing: 0.2em; color: var(--ivoire-doux); font-variant-numeric: tabular-nums; }
.galerie__barre { position: relative; width: 120px; height: 1px; background: var(--filet); overflow: hidden; }
.galerie__barre span { position: absolute; inset: 0; background: var(--iris); transform-origin: left; transform: scaleX(var(--progres, 0)); }
.galerie__piste {
  --debut: max(var(--goutiere), calc((100% - var(--largeur)) / 2 + var(--goutiere)));
  display: flex; gap: 32px; padding: 0 var(--debut) 24px; scroll-padding-inline: var(--debut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--filet-fort) transparent;
}
.carte { flex: 0 0 clamp(260px, 78vw, 440px); scroll-snap-align: start; }
@media (min-width: 900px) { .carte { flex-basis: clamp(300px, 28vw, 440px); } }
.carte__visuel { aspect-ratio: 4 / 5; overflow: hidden; background: var(--noir-2); position: relative; }
.carte__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.carte__visuel::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; background: var(--iris) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.6s var(--courbe); }
.carte:hover .carte__visuel img { transform: scale(1.04); }
.carte:hover .carte__visuel::after { opacity: 0.7; }
.carte__num { margin-top: 24px; font-size: var(--t-1); letter-spacing: 0.24em; color: var(--ivoire-doux); }
.carte__titre { margin-top: 8px; font-style: italic; }
.carte__texte { margin-top: 12px; color: var(--ivoire-doux); }
/* Épinglée, la galerie garde son lien sous elle : posé au bas de la section, il
   n'apparaît qu'une fois l'épinglage fini, jamais sous les cartes. */
.galerie--active .galerie__pied { position: absolute; left: 0; right: 0; bottom: 0; }
.galerie__pied { padding: 64px var(--goutiere) 0; max-width: var(--largeur); width: 100%; margin: 0 auto; }
.galerie__pied .lien { margin-top: 0; }

/* Mode lié au défilement (activé par le script, jamais en animations réduites) */
.galerie--active { padding-top: 0 !important; padding-bottom: 0 !important; }
.galerie--active .galerie__collant { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: var(--entete) 0 32px; }
.galerie--active .galerie__piste { overflow: visible; width: max-content; scroll-snap-type: none; padding-bottom: 0; will-change: transform; }
.galerie--active .galerie__collant { gap: 32px; }
.galerie--active .galerie__titre { max-width: none; }
/* La largeur des cartes découle de la hauteur disponible : visuel + textes tiennent dans l'écran. */
.galerie--active .carte { flex-basis: clamp(200px, min(28vw, calc((100vh - 470px) * 0.8)), 440px); flex-basis: clamp(200px, min(28vw, calc((100svh - 470px) * 0.8)), 440px); }
@media (max-width: 899px) {
  .galerie--active .carte { flex-basis: clamp(200px, min(78vw, calc((100svh - 500px) * 0.8)), 440px); }
}
@media (max-width: 599px) {
  .galerie__entete { grid-template-columns: 1fr; }
  .galerie__compteur { display: none; }
}

/* ——— Citation ——— */
.citation { text-align: center; display: flex; flex-direction: column; align-items: center; }
.citation .filet-irise { margin: 0 0 48px; }
.citation__texte { font-size: var(--t-4); font-style: italic; line-height: 1.15; max-width: 22ch; margin: 0 auto; font-weight: 400; }

/* ——— Étapes ——— */
.etapes__entete { margin-bottom: 64px; }
.etapes__titre { max-width: 16ch; }
.etapes__liste { display: grid; gap: 48px; }
@media (min-width: 900px) { .etapes__liste { grid-template-columns: repeat(3, 1fr); } .etapes__liste--longue { grid-template-columns: repeat(5, 1fr); gap: 32px; } }
.etape { border-top: 1px solid var(--filet); padding-top: 24px; }
.etape__num { display: block; font-size: var(--t-3); font-style: italic; background: var(--iris); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 24px; width: max-content; }
.etape__titre { margin-bottom: 12px; }
.etape p { color: var(--ivoire-doux); }

/* ——— Visionneuse (page L'Opale) ——— */
.visionneuse { display: flex; flex-direction: column; align-items: center; text-align: center; }
.visionneuse__titre { margin-bottom: 24px; }
.visionneuse__scene { position: relative; display: grid; place-items: center; width: 100%; }
.visionneuse__scene::before { content: ""; position: absolute; width: min(70vmin, 640px); aspect-ratio: 1; border-radius: 50%; background: var(--iris-conique); filter: blur(100px); opacity: 0.1; }
.opale--visionneuse { width: min(80vmin, 720px); }
.choix { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 8px; padding: 4px; border: 1px solid var(--filet-fort); border-radius: 999px; margin-top: 16px; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; border-radius: 999px; font-size: var(--t-1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; color: var(--ivoire-doux); transition: background-color 0.3s, color 0.3s; }
@media (max-width: 399px) { .choix label { padding: 0 16px; letter-spacing: 0.1em; } }
.choix input:checked + label { background: var(--ivoire); color: var(--noir); }
.choix input:focus-visible + label { outline: 3px solid var(--ivoire); outline-offset: 3px; }
.aide { margin-top: 24px; color: var(--ivoire-doux); font-style: italic; }
.aide__tactile { display: none; }
@media (hover: none) { .aide__souris { display: none; } .aide__tactile { display: inline; } }

/* ——— Appel final ——— */
.appel { text-align: center; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.appel__halo { position: absolute; left: 50%; top: 50%; width: min(80vw, 720px); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: var(--iris-conique); filter: blur(120px); opacity: 0.1; border-radius: 50%; pointer-events: none; }
.appel__titre { position: relative; max-width: 16ch; }
.appel__texte { position: relative; margin: 32px auto 48px; color: var(--ivoire-doux); max-width: 44ch; }

/* ——— Formulaire ——— */
.formulaire { padding-top: 0 !important; }
.form { max-width: 720px; display: grid; gap: 32px; }
.champ { display: grid; gap: 8px; }
.champ label, .champ legend { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivoire); }
.champ legend { margin-bottom: 16px; }
.facultatif { text-transform: none; letter-spacing: 0.02em; font-weight: 500; color: var(--ivoire-doux); font-style: italic; }
.champ input, .champ textarea {
  width: 100%; font: 500 var(--t-2)/1.5 var(--police); color: var(--ivoire); background: var(--noir-2);
  border: 1px solid var(--filet-fort); border-radius: 4px; padding: 12px 16px; min-height: 52px; transition: border-color 0.2s;
}
.champ textarea { resize: vertical; min-height: 160px; }
.champ input::placeholder { color: var(--texte-exemple); font-style: italic; }
.champ input:hover, .champ textarea:hover { border-color: var(--ivoire-doux); }
.champ input:focus, .champ textarea:focus { border-color: var(--ivoire); }
.champ--telephone input { max-width: 320px; }
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ__erreur { color: var(--erreur); font-size: var(--t-1); font-weight: 600; letter-spacing: 0.02em; min-height: 0; }
.champ__erreur:empty { display: none; }
.radios { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.radio { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.radio input { width: 20px; height: 20px; accent-color: var(--ivoire); margin: 0; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.form__note { font-size: var(--t-1); color: var(--ivoire-doux); }
/* Liens au fil du texte du formulaire : zone de 44 px de haut (ACT-04). */
.form__note a, .form__direct a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; vertical-align: middle; }
.form__direct { color: var(--ivoire-doux); }
.bouton-texte {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--ivoire); font: 500 var(--t-2)/1.3 var(--police); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--filet-fort);
}
.bouton-texte:hover { text-decoration-color: var(--ivoire); }
.bouton-texte--danger { color: var(--erreur); text-decoration-color: currentColor; }
.bouton-texte[disabled] { color: var(--ivoire-doux); text-decoration: none; opacity: 0.7; cursor: not-allowed; }
.form__efface:empty, .form__reseau:empty { display: none; }
.form__efface { width: 100%; color: var(--ivoire-doux); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form__reseau { padding: 16px 20px; border: 1px solid var(--filet-fort); border-radius: 4px; }
.statut:empty { display: none; }
.statut:focus { outline: none; }
.statut:focus-visible { outline: 3px solid var(--ivoire); outline-offset: 4px; }
.statut { display: flex; gap: 16px; align-items: flex-start; justify-content: flex-start; padding: 20px 24px; border: 1px solid var(--filet-fort); border-radius: 4px; }
.statut[data-etat="envoye"] { border-color: var(--succes); }
.statut::before { flex: none; width: 24px; text-align: center; }
.statut[data-etat="envoye"]::before { content: "✓"; color: var(--succes); font-size: var(--t-3); line-height: 1; }
.statut[data-etat="erreur"] { border-color: var(--erreur); }
.statut[data-etat="erreur"]::before { content: "!"; color: var(--erreur); font-size: var(--t-3); line-height: 1; font-weight: 600; }
.statut p { flex: 1; }
.statut__fermer { flex: none; margin-left: auto; min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--filet-fort); border-radius: 999px; color: var(--ivoire); font: 500 var(--t-2)/1 var(--police); cursor: pointer; }

/* ——— Pages légales ——— */
.legal { display: grid; gap: 48px; padding-top: 0 !important; }
.legal__bloc h2 { font-size: var(--t-3); margin-bottom: 12px; }
.legal__bloc p { color: var(--ivoire-doux); }
.legal__bloc p + p { margin-top: 8px; }
.a-completer { color: var(--ivoire) !important; border-left: 2px solid var(--erreur); padding-left: 16px; }

/* ——— Pied de page ——— */
.pied { border-top: 1px solid var(--filet); padding: 64px var(--goutiere) 48px; display: grid; gap: 40px; max-width: var(--largeur); margin: 0 auto; }
.pied__marque { font-size: var(--t-2); font-weight: 600; letter-spacing: 0.42em; }
.pied__devise { color: var(--ivoire-doux); margin-top: 8px; font-style: italic; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-1); letter-spacing: 0.12em; text-decoration: none; color: var(--ivoire-doux); }
.pied__liens a:hover, .pied__liens a[aria-current="page"] { color: var(--ivoire); text-decoration: underline; text-underline-offset: 6px; }
.pied__droits { font-size: var(--t-1); color: var(--ivoire-doux); }
@media (min-width: 900px) { .pied { grid-template-columns: 1fr auto; align-items: end; } .pied__droits { grid-column: 1 / -1; } }

.introuvable { min-height: 70vh; }
.introuvable__liens { display: flex; flex-wrap: wrap; gap: 0 32px; }
.introuvable__liens .lien { margin-top: 16px; }

/* ——— Animations liées au défilement ———
   Masquées seulement si le script tourne (.js) et sans animations réduites. */
.mot { display: inline-block; }
.js:not(.calme) [data-mots] .mot { opacity: 0; transform: translateY(0.45em); transition: opacity 0.9s var(--courbe), transform 0.9s var(--courbe); transition-delay: calc(var(--m, 0) * 40ms); }
.js:not(.calme) [data-mots].vu .mot { opacity: 1; transform: none; }
.js:not(.calme) [data-apparition] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--courbe), transform 1s var(--courbe); transition-delay: calc(var(--i, 0) * 120ms + 120ms); }
.js:not(.calme) [data-apparition].vu { opacity: 1; transform: none; }
.js:not(.calme) .rideau { clip-path: inset(0 50% 0 50%); transition: clip-path 1.5s var(--courbe-rideau); }
.js:not(.calme) .rideau img { transform: scale(1.25); transition: transform 2s var(--courbe); }
.js:not(.calme) .rideau.vu { clip-path: inset(0 0 0 0); }
.js:not(.calme) .rideau.vu img { transform: scale(1); }
[data-parallaxe] { will-change: transform; }

/* ——— Curseur (ordinateur seulement) ——— */
.curseur, .halo { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity 0.3s; }
.curseur { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ivoire); }
.halo { width: 44px; height: 44px; margin: -22px 0 0 -22px; transition: opacity 0.3s, width 0.3s var(--courbe), height 0.3s var(--courbe), margin 0.3s var(--courbe); }
.halo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px; background: var(--iris-conique); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.8; }
.halo::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: var(--iris-conique); filter: blur(14px); opacity: 0.14; }
.curseur-actif .curseur, .curseur-actif .halo { opacity: 1; }
.curseur-actif.curseur-sortie .curseur, .curseur-actif.curseur-sortie .halo { opacity: 0; }
.halo.survol { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.halo.survol::after { opacity: 0.22; }
.curseur-actif, .curseur-actif a, .curseur-actif button, .curseur-actif label { cursor: none; }
.curseur-actif input, .curseur-actif textarea { cursor: text; }
.curseur-actif.curseur-texte .curseur, .curseur-actif.curseur-texte .halo { opacity: 0; }

/* ——— Transitions entre pages (navigateurs compatibles) ———
   L'inscription (@view-transition) est dans le style en ligne de chaque page
   (build.mjs) : dans cette feuille, elle arrivait parfois trop tard et la
   page d'arrivée refusait la transition. */
::view-transition-old(root) { animation: page-sortie 0.5s var(--courbe-rideau) both; }
::view-transition-new(root) { animation: page-entree 0.7s var(--courbe) both; }
@keyframes page-sortie { to { opacity: 0; transform: translateY(-24px); } }
@keyframes page-entree { from { opacity: 0; transform: translateY(32px); } }

/* ——— Animations réduites ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero__defiler::after { animation: none; }
}