:root {
  --bg: #040404;
  --ink: #f4f1ea;
  --copy: rgba(244, 241, 234, 0.82);
  --muted: rgba(244, 241, 234, 0.58);
  --faint: rgba(244, 241, 234, 0.32);
  --line: rgba(244, 241, 234, 0.14);
  --soft: rgba(244, 241, 234, 0.08);
  --gold: #b9a077;
  --gold-soft: rgba(185, 160, 119, 0.45);
  --max: 1120px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --forum: Forum, "Times New Roman", serif;
  --sans: Inter, system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* Facteur de luminosite des fonds photo, pilote depuis le dashboard
     (Apparence). 1 = les valeurs ecrites ci-dessous ; head.php ne surcharge
     cette ligne que si le reglage a ete bouge. */
  --lum: 1;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 300; line-height: 1.55; font-size: 16px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ——— Nav : 3 colonnes, liens centrés ——— */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--pad);
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(4, 4, 4, 0.72); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav-logo { font-family: var(--forum); letter-spacing: 0.18em; font-size: 0.82rem; opacity: 0; transition: opacity 0.35s ease; justify-self: start; }
.nav-logo .loc { font-family: var(--sans); font-weight: 300; font-size: 0.66rem; letter-spacing: 0.26em; color: var(--gold); text-transform: uppercase; margin-left: 0.6em; }
.nav.scrolled .nav-logo { opacity: 1; }
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); justify-self: center; }
.nav-links a:hover, .nav-links a.on { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 1rem; justify-self: end; }
/* Un enfant flex a `flex-shrink: 1` par defaut : `width: 34px` n'etait qu'une
   base de calcul, pas une largeur. Des que le bandeau manquait de place, les
   pastilles WhatsApp / Instagram s'ecrasaient en rectangles (34x34 -> 20x34
   a 960 px). Elles gardent desormais leur carre, et c'est le palier de nav
   plus bas qui absorbe le manque de place. */
.nav-right > * { flex: 0 0 auto; }
.nav-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box; border: 1px solid rgba(185,160,119,0.7); background: rgba(4,4,4,0.25); backdrop-filter: blur(6px); color: #fff; transition: background .35s ease, border-color .35s ease, color .35s ease; }
.nav-ico svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.nav-ico:hover { background: var(--gold); border-color: var(--gold); color: #040404; }
.nav-burger { display: none; width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; cursor: pointer; padding: 0; position: relative; }
.nav-burger span { position: absolute; left: 9px; right: 9px; height: 1px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.nav-burger span:first-child { top: 12px; } .nav-burger span:last-child { top: 20px; }
body.menu-open .nav-burger span:first-child { top: 16px; transform: rotate(45deg); }
body.menu-open .nav-burger span:last-child { top: 16px; transform: rotate(-45deg); }
/* ——— Palier intermediaire (920 -> 1180 px) ———
   Entre le bandeau complet et le burger il y avait 330 px de zone morte
   (820 -> 1150) ou tout se comprimait en silence. Le bandeau s'y resserre
   maintenant par etapes franches, sans jamais deformer un bouton. */
@media (max-width: 1180px) {
  /* 1fr auto 1fr centre les liens sur la FENETRE : le logo etant deux fois plus
     etroit que le bloc de droite, les liens venaient buter contre lui pendant
     qu'il restait 160 px de vide a gauche. auto 1fr auto les centre sur l'espace
     REELLEMENT libre, et les deux gouttieres redeviennent egales. */
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-logo .loc { display: none; }
  .nav-links { gap: 1.1rem; }
  .nav-right { gap: .7rem; }
  .nav-cta { padding: 0.62rem 1rem; letter-spacing: 0.12em; }
}
@media (max-width: 920px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links, .nav-right .lang, .nav-ico, .nav-right .nav-cta { display: none; }
  .nav-logo { opacity: 1; }
  .nav-burger { display: block; }
}
/* ——— Selecteur de langue ———
   Une seule langue visible ; le panneau s'ouvre au clic (demande Alex).
   Meme filet or que les pastilles voisines : le bandeau reste une seule
   famille de boutons. Les langues non traduites sont annoncees, pas
   cliquables — ni lien, ni cible de tabulation, cf. inc/lang.php. */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .38rem; box-sizing: border-box;
  height: 34px; padding: 0 .6rem; border: 1px solid rgba(185,160,119,0.7); border-radius: 0;
  background: rgba(4,4,4,0.25); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--sans); font-weight: 300;
  font-size: 0.66rem; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase;
  position: relative; cursor: pointer; transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] { background: var(--gold); border-color: var(--gold); color: #040404; }
.lang-chev { width: 9px; height: 6px; display: block; opacity: .75; transition: transform .35s var(--ease); }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
/* Zone tactile de 44 px, comme .nav-ico, sans grossir le dessin. */
.lang-btn::after { content: ""; position: absolute; inset: -5px; }

.lang-pop {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 5; min-width: 15rem;
  background: rgba(4,4,4,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-top: 1px solid var(--gold-soft);
  padding: .5rem 0 0;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
/* Dans le menu plein ecran, un panneau flottant recouvrait les liens et se
   voyait au travers. Il s'ouvre donc dans le flux, en accordeon sur deux
   colonnes : rien n'est masque, et la hauteur reste courte. */
.lang.up { width: 100%; }
.lang.up .lang-pop { position: static; min-width: 0; margin-top: .7rem; transform: translateY(-4px);
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-top: 1px solid var(--gold-soft); padding: .7rem 0 0; }
.lang.up .lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.2rem; }
.lang.up .lang-item { padding: .42rem 0 .42rem .7rem; }
.lang.up .lang-note { margin-top: .7rem; padding: .5rem 0 0; }
.lang-pop[hidden] { display: none; }
.lang.open .lang-pop { opacity: 1; transform: none; pointer-events: auto; }

.lang-list { list-style: none; margin: 0; padding: 0; }
.lang-item {
  display: flex; align-items: baseline; gap: .8rem; padding: .52rem 1rem;
  font-size: .7rem; letter-spacing: .1em; color: var(--faint);
  border-left: 1px solid transparent; transition: color .3s ease, border-color .3s ease;
}
.lang-item i { font-style: normal; font-size: .62rem; letter-spacing: .2em; color: inherit; min-width: 1.7rem; }
.lang-item em { font-style: normal; letter-spacing: .04em; }
a.lang-item:hover { color: var(--ink); border-left-color: var(--gold); }
.lang-item.on { color: var(--ink); border-left-color: var(--gold); }
.lang-item.on i { color: var(--gold); }
/* `soon` : la langue existe dans le plan, pas encore dans le site. */
.lang-item.soon { cursor: default; }
.lang-note {
  margin: .5rem 0 0; padding: .55rem 1rem .6rem; border-top: 1px solid var(--line);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
@media (prefers-reduced-motion: reduce) { .lang-pop, .lang-chev { transition: none; } }

/* ——— Utilitaires du bandeau sans cadre (NAV_UTILS) ———
   Le bandeau portait quatre objets encadres du meme filet or : langue,
   Instagram, WhatsApp et « Reserver ». Quatre boutons de meme poids dont un
   seul mene quelque part. Les trois utilitaires rejoignent donc la famille
   des LIENS de nav — gris, sans cadre — et « Reserver » redevient le seul
   objet encadre du bandeau.

   Tout ce qui suit est conditionne par une classe posee sur <header class="nav">
   depuis inc/nav.php, elle-meme pilotee par la constante NAV_UTILS de
   inc/config.php. Retour arriere : NAV_UTILS = 'encadre' (rien ici ne
   s'applique plus). Suppression definitive : ce bloc + la constante + les
   trois lignes de nav.php.
   Hors scope volontairement : le menu plein ecran, le pied de page et la
   bulle WhatsApp flottante, qui ne partagent pas ce filet. */

/* Socle « nu » : plus de cadre, plus de fond, plus de flou.
   La zone tactile de 34 px de haut est conservee — elle devient invisible. */
.nav.utils-nu .nav-ico {
  width: 30px; height: 34px; border: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--muted);
  transition: color .35s ease;
}
.nav.utils-nu .nav-ico svg { width: 17px; height: 17px; }
/* Le survol passe a l'OR, pas au blanc : les liens de nav s'eclaircissent
   (gris -> blanc), les utilitaires se rechauffent. Meme sobriete au repos,
   deux familles distinctes des qu'on les touche, et la charte reste le seul
   signal d'interactivite du bandeau. */
.nav.utils-nu .nav-ico:hover { background: none; border-color: transparent; color: var(--gold); }

/* Le « FR » prend exactement la typo des liens de nav (0.72rem / .18em) :
   il cesse d'etre un bouton et devient un mot du bandeau. */
.nav.utils-nu .lang-btn {
  height: 34px; padding: 0; gap: .34rem;
  border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--muted); font-size: .72rem; letter-spacing: .18em;
  transition: color .35s ease;
}
.nav.utils-nu .lang-btn:hover,
.nav.utils-nu .lang-btn[aria-expanded="true"] { background: none; border-color: transparent; color: var(--gold); }
.nav.utils-nu .lang-chev { opacity: .55; }
.nav.utils-nu .lang-btn:hover .lang-chev,
.nav.utils-nu .lang-btn[aria-expanded="true"] .lang-chev { opacity: 1; }

/* Sans cadre, 1 rem d'ecart colle les objets entre eux : les bords visibles
   ont disparu, pas la matiere. La CTA — seul objet encadre qui reste —
   recoit en plus sa propre marge. */
.nav.utils-nu .nav-right { gap: 1.15rem; }
.nav.utils-nu .nav-cta { margin-left: .45rem; }

/* Le panneau de langue : plus de bouton dore auquel repondre, donc plus de
   surlignage or en tete — filet gris uniforme, un peu plus etroit. L'ombre
   portee fait le seul travail que le cadre faisait vraiment : le decoller
   de la photo. */
.nav.utils-nu .lang-pop {
  min-width: 13.5rem; border-color: var(--line); border-top-color: var(--line);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
}

/* Nuance « or » : les icones portent deja la charte AU REPOS (le survol,
   lui, est commun a tout le socle 'nu'). */
.nav.utils-or .nav-ico { color: rgba(185,160,119,.72); }

/* Nuance « sep » : un filet vertical marque la frontiere avec l'action. */
.nav-sep { display: none; }
.nav.utils-sep .nav-right { gap: 1.05rem; }
.nav.utils-sep .nav-sep { display: block; width: 1px; height: 18px; background: var(--line); margin: 0 .15rem; }
.nav.utils-sep .nav-cta { margin-left: .1rem; }

/* Sous 920 px tout le bloc de droite passe dans le burger : le filet aussi,
   sinon il reste seul a cote du logo. */
@media (max-width: 920px) { .nav .nav-sep { display: none; } }

/* ——— Panneau de langue sans plaque (LANG_POP) ———
   Mesure du defaut : le panneau faisait 216 px de large pour un declencheur
   de 33 px — huit fois plus large que ce qui l'ouvre. Tant que « FR » etait
   un bouton encadre, la boite avait un objet auquel s'accrocher ; depuis
   qu'il est un mot du bandeau (cf. NAV_UTILS), elle sort de nulle part.

   Reponse : plus de boite. Les six noms s'alignent a DROITE, dans l'axe du
   declencheur, et se deplient en cascade. Le code de langue disparait — sans
   plaque, « FR » et « Français » sur la meme ligne font doublon.

   Pilote par la constante LANG_POP de inc/config.php (classe sur
   <header class="nav">). Retour arriere : LANG_POP = 'plaque'.
   Ne touche PAS le menu plein ecran : `.lang.up` vit dans `.menu`, hors du
   bandeau, et aucun selecteur d'ici ne l'atteint. */
.nav.lang-nu .lang-pop {
  /* ⚠️ Le `100%` ne designe PAS le bas du bandeau : le bloc conteneur est
     `.lang` (position: relative), c'est-a-dire le declencheur de 34 px.
     Le panneau demarrait donc ~18 px AU-DESSUS du bord bas de la barre et
     passait sous elle des qu'elle devenait opaque — c'est ce qu'Alex voyait.
     On rattrape d'abord la gouttiere basse du bandeau (1.1rem, cf. `.nav`),
     puis on ajoute l'ecart voulu. Regler l'ecart = --lang-descend. */
  --lang-descend: .6rem;
  /* min-width: 0 — le cadre epouse les noms. Une largeur imposee laissait un
     vide a gauche du texte cale a droite : sans cadre ca ne se voyait pas,
     avec un filet dore ca devient une erreur d'alignement. */
  top: calc(100% + 1.1rem + var(--lang-descend)); right: 0; min-width: 0;
  box-shadow: none;
  /* La recette exacte des boutons du site (.btn / .nav-cta / .nav-ico) :
     fond noir tres bas, flou, filet or. Le panneau cesse d'etre un objet a
     part — c'est la meme matiere que le reste, en plus grand.
     Un fondu de fond a ete essaye (masque en degrade sur un ::before
     debordant) puis abandonne : Alex veut le cadre de la maison, pas une
     dissolution. Regler la transparence = --lang-plaque, rien d'autre. */
  --lang-plaque: .22;
  background: rgba(4, 4, 4, var(--lang-plaque));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(185, 160, 119, 0.7);
  padding: .45rem 0 .5rem;
}
.nav.lang-nu .lang-list { display: grid; }
.nav.lang-nu .lang-item {
  justify-content: flex-end; gap: 0;
  padding: .32rem 1.1rem .32rem 1.5rem;
  /* Le filet or par ligne a saute avec l'arrivee du cadre : deux traits dores
     verticaux a 13 px l'un de l'autre se cognaient. La hierarchie tient
     desormais en trois encres — courante `--ink`, les autres `--copy`,
     survol `--gold` — sans aucun ornement. */
  border-left: 0; border-right: 0;
  /* Pas d'ombre (essayee, puis retiree a la demande d'Alex : elle empatait
     la lettre au lieu de la detourer). Ce qui rend les liens de nav lisibles
     sur la meme photo, c'est leur DESSIN — assez de matiere et assez d'air
     autour. Les noms de langue sont en bas de casse, donc a corps egal ils
     ont une hauteur d'x plus faible : ils montent a .84rem pour retrouver la
     meme presence optique, et la chasse se resserre puisque le corps grandit. */
  /* Et puisque plus aucun effet ne porte le contraste, c'est l'encre qui le
     porte : --copy (82 %) au lieu de --muted (58 %). Les liens de nav peuvent
     rester a 58 % parce qu'ils sont hauts dans l'image, la ou le voile du
     fond est le plus dense ; le panneau descend de 200 px, en pleine photo. */
  font-size: .84rem; letter-spacing: .04em; color: var(--copy);
  opacity: 0; transform: translateY(-5px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              color .3s ease, border-color .3s ease;
}
/* Le code fait doublon avec le nom des qu'il n'y a plus de colonne a tenir. */
.nav.lang-nu .lang-item i { display: none; }
/* Les lignes se deplient l'une apres l'autre — c'est le seul ornement du
   composant, et il ne coute rien : ni image, ni script. */
.nav.lang-nu .lang.open .lang-item { opacity: 1; transform: none; }
.nav.lang-nu .lang-list li:nth-child(2) .lang-item { transition-delay: .04s; }
.nav.lang-nu .lang-list li:nth-child(3) .lang-item { transition-delay: .08s; }
.nav.lang-nu .lang-list li:nth-child(4) .lang-item { transition-delay: .12s; }
.nav.lang-nu .lang-list li:nth-child(5) .lang-item { transition-delay: .16s; }
.nav.lang-nu .lang-list li:nth-child(6) .lang-item { transition-delay: .2s; }
/* Dans le PANNEAU, l'or ne veut pas dire « survole » mais « vous etes ici » —
   l'inverse du bandeau, et c'est voulu : une liste de langues affiche un ETAT,
   une rangee d'icones propose des ACTIONS. La langue courante est d'ailleurs
   un <span>, pas un lien : elle ne peut pas etre survolee, aucune collision
   possible. Le declencheur « FR » passant lui aussi a l'or quand le panneau
   est ouvert, l'or dit la meme chose partout : la langue en cours.
   Le survol prend donc le blanc — c'est ce qu'on pointe, pas ce qu'on est. */
.nav.lang-nu a.lang-item:hover,
.nav.lang-nu a.lang-item:focus-visible { color: var(--ink); }
.nav.lang-nu .lang-item.on { color: var(--gold); }
.nav.lang-nu .lang-note { border-top-color: var(--line); text-align: right; padding-right: .85rem; }
@media (prefers-reduced-motion: reduce) {
  .nav.lang-nu .lang-item { transition: color .3s ease, border-color .3s ease; opacity: 1; transform: none; }
}

/* Menu plein écran (mobile) */
.menu { position: fixed; inset: 0; z-index: 35; background: rgba(4,4,4,.62); backdrop-filter: blur(22px) saturate(1.05); -webkit-backdrop-filter: blur(22px) saturate(1.05); display: flex; flex-direction: column; justify-content: center; gap: 3rem; padding: 6rem var(--pad) 4rem; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
body.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
body.menu-open { overflow: hidden; }
/* Ecran court (paysage, petit telephone) : l'accordeon des langues peut
   depasser. `safe center` evite le piege classique du centrage flex —
   sans lui, c'est le HAUT du menu qui se retrouve hors d'atteinte. */
.menu { overflow-y: auto; overscroll-behavior: contain; justify-content: safe center; }
.menu > * { flex-shrink: 0; }
.menu-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.menu-links a { font-family: var(--sans); font-weight: 300; font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: -0.01em; color: var(--muted); transition: color .3s, transform .5s var(--ease); display: inline-block; transform: translateY(12px); opacity: 0; }
body.menu-open .menu-links a { transform: none; opacity: 1; }
.menu-links li:nth-child(2) a { transition-delay: .05s; } .menu-links li:nth-child(3) a { transition-delay: .1s; } .menu-links li:nth-child(4) a { transition-delay: .15s; }
.menu-links a.on, .menu-links a:hover { color: var(--ink); }
.menu-links .mono { letter-spacing: 0.04em; }
.menu-links .mono .bar { display: inline-block; width: 2px; height: 0.66em; background: currentColor; opacity: .5; margin: 0 0.3em; vertical-align: -0.02em; }
.menu-foot { display: grid; gap: 1.6rem; justify-items: start; }
.menu-ico { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.menu-ico a { display: inline-flex; align-items: center; gap: .5rem; }
.menu-ico svg { width: 16px; height: 16px; fill: var(--gold); display: block; }
@media (min-width: 921px) { .menu { display: none; } }

/* ——— Bouton encadré (style unique) ——— */
.btn, .nav-cta, .hero-cta a {
  display: inline-block; box-sizing: border-box;
  padding: 0.95rem 2.4rem;
  border: 1px solid rgba(185,160,119,0.7); border-radius: 0;
  background: rgba(4,4,4,0.25); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--sans); font-weight: 300;
  font-size: 0.78rem; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center; cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.btn:hover, .nav-cta:hover, .hero-cta a:hover { background: var(--gold); border-color: var(--gold); color: #040404; }
.nav-cta { padding: 0.62rem 1.35rem; font-size: 0.68rem; letter-spacing: 0.16em; }
@media (max-width: 920px) { .nav-logo { font-size: 0.74rem; letter-spacing: 0.14em; } }

/* ——— HERO ——— */
/* padding: 0 — le hero est une section, il héritait donc de la gouttière verticale
   des sections (jusqu'à 8 rem en haut ET en bas). Elle rognait le cadre de la
   composition : c'est .hero-inner qui porte ses propres marges, et lui seul. */
.hero { min-height: 100vh; min-height: 100dvh; padding: 0; position: relative; display: grid; place-items: stretch; text-align: center; overflow: hidden; isolation: isolate; }
/* Le hero se lit en deux temps : le monogramme et sa signature d'un côté, l'appel
   à l'action de l'autre, posé au pied de l'écran. Les deux `margin-top: auto`
   partagent l'espace libre — le bloc de marque se retrouve un peu au-dessus du
   centre optique, .hero-foot est plaqué en bas. Pause et flèche sont dans le
   pied : la marge basse n'a plus qu'à laisser respirer la flèche (et son
   déplacement), plus la zone sûre du téléphone. */
.hero-inner { display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--pad) calc(clamp(1.2rem, 2.8vh, 1.7rem) + env(safe-area-inset-bottom, 0px)); }
.hero-brand, .hero-foot { margin-top: auto; }
.hero-brand {
  display: flex; flex-direction: column; align-items: center;
  user-select: none; -webkit-user-select: none; -moz-user-select: none;
  -webkit-touch-callout: none; cursor: default;
}
.hero-foot { display: flex; flex-direction: column; align-items: center; }
.hero-foot .hero-cta { margin-top: 0; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); animation: settle 5s var(--ease) forwards;
}
@keyframes settle { to { transform: none; } }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(4,4,4,.5), rgba(4,4,4,.15) 55%, rgba(4,4,4,0) 82%),
    linear-gradient(to bottom, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 78%, var(--bg) 100%);
}
.hero-mark { font-family: var(--forum); color: #fff; position: relative; z-index: 3; }
/* font-weight 400 + font-synthesis none (2026-09-17) : depuis que THE | ONE est
   le <h1> de la page, il héritait du gras par défaut des titres. Forum n'a
   QU'UNE graisse : chaque navigateur fabriquait un faux gras, et Chrome
   l'épaississait bien plus que Firefox. Ne jamais retirer ces deux lignes. */
.hero-mark .line1 {
  margin: 0; font-size: clamp(2.4rem, 7vw, 4.4rem); letter-spacing: 0.12em; line-height: 1;
  font-weight: 400; font-synthesis: none;
  text-shadow: 0 2px 30px rgba(0,0,0,.35); white-space: nowrap;
}
/* Arrivée sur le wrapping span, flicker sur chaque glyphe : le hover peut
   relancer le clignotement sans rejouer le fondu d'entrée. */
.hero-mark .line1 > span[aria-hidden] {
  display: inline-block; opacity: 0;
  animation: tag-word .85s var(--ease) .3s forwards;
}
/* Le flicker part vers 9,6 s, puis se répète toutes les 20 s
   (courbe tassée dans les ~1,4 s du cycle, le reste au repos). */
.hero-mark .ch, .hero-mark .bar { display: inline-block; }
.hero-mark .bar { width: 2px; height: 0.82em; background-color: #fff; margin: 0 0.38em; vertical-align: -0.04em;
  animation: mark-flicker-bar 20s ease-in-out 9.62s infinite; }
.hero-mark .ch:nth-child(1) { animation: mark-flicker-a 20s ease-in-out 9.6s infinite; }
.hero-mark .ch:nth-child(2) { animation: mark-flicker-b 20s ease-in-out 9.68s infinite; }
.hero-mark .ch:nth-child(3) { animation: mark-flicker-c 20s ease-in-out 9.56s infinite; }
.hero-mark .ch:nth-child(5) { animation: mark-flicker-a 20s ease-in-out 9.72s infinite; }
.hero-mark .ch:nth-child(6) { animation: mark-flicker-c 20s ease-in-out 9.58s infinite; }
.hero-mark .ch:nth-child(7) { animation: mark-flicker-b 20s ease-in-out 9.75s infinite; }
.hero-mark .sub {
  margin-top: 1rem; font-family: var(--sans); font-weight: 300; font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  letter-spacing: 0.42em; text-indent: 0.42em; color: var(--gold); text-shadow: 0 1px 20px rgba(0,0,0,.55);
  opacity: 0; animation: tag-word .85s var(--ease) 1.22s forwards;
}

/* ——— Signature du hero : « LUXURY SKI SCHOOL » ———
   Un cran typographique AU-DESSUS de « COURCHEVEL » et non en dessous : le
   lieu reste une legende (or, petit), la nature de la maison devient la phrase
   (blanc casse, plus large, tracking plus ouvert). Sans serif : Forum ne sert
   qu'au monogramme.
   Les deux filets sont les pseudo-elements du bloc, donc des elements flex :
   ils s'ouvrent en scaleX depuis le centre du mot, ce qui ne coute pas une
   seule mise en page. Meme raison pour l'entree des mots (opacite + translate) :
   au-dessus d'une video plein cadre, on n'anime rien d'autre. */
.hero-tag {
  margin: clamp(1.7rem, 4vh, 2.8rem) 0 0; position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.85rem, 2.2vw, 1.5rem);
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(.72rem, 1.3vw, .95rem);
  letter-spacing: .46em; text-transform: uppercase;
  color: rgba(255,255,255,.82); text-shadow: 0 1px 18px rgba(0,0,0,.6);
}
/* le tracking laisse un blanc apres la derniere lettre : on le reprend, sinon
   le filet de droite semble plus loin que celui de gauche */
.hero-tag .w:last-child { margin-right: -.46em; }
/* les filets cedent avant les mots : sur un tres petit ecran c'est eux qui
   se raccourcissent, la signature ne se comprime jamais */
.hero-tag::before, .hero-tag::after {
  content: ""; flex: 0 1 clamp(1.5rem, 6.5vw, 4.5rem); min-width: .9rem; height: 1px;
  background: linear-gradient(to right, rgba(185,160,119,0), var(--gold));
  transform: scaleX(0); transform-origin: right center;
  animation: tag-rule 1.1s var(--ease) 2.15s forwards;
}
.hero-tag::after { background: linear-gradient(to left, rgba(185,160,119,0), var(--gold)); transform-origin: left center; }
.hero-tag .w { display: inline-block; opacity: 0; animation: tag-word .9s var(--ease) forwards; }
.hero-tag .w:nth-child(1) { animation-delay: 2.51s; }
.hero-tag .w:nth-child(2) { animation-delay: 2.63s; }
.hero-tag .w:nth-child(3) { animation-delay: 2.75s; }
/* Hover THE | ONE : or sur les glyphes seulement, et relance du flicker
   (mêmes keyframes, décalage relatif conservé). Souris/trackpad.
   .is-flicker (posé en JS) garde le cycle après le mouseleave. */
@media (hover: hover) and (pointer: fine) {
  .hero-mark .line1 .ch,
  .hero-mark .line1 .bar {
    transition: color .45s var(--ease), background-color .45s var(--ease),
                text-shadow .45s var(--ease), box-shadow .45s var(--ease);
  }
  .hero-mark .line1:hover .ch {
    color: var(--gold);
    text-shadow: 0 2px 28px rgba(185,160,119,.5);
  }
  .hero-mark .line1:hover .bar {
    background-color: var(--gold);
    box-shadow: 0 0 10px rgba(185,160,119,.55);
  }
  .hero-mark .line1.is-flicker .ch:nth-child(1),
  .hero-mark .line1:hover .ch:nth-child(1) { animation: mark-flicker-a 20s ease-in-out .04s infinite; }
  .hero-mark .line1.is-flicker .ch:nth-child(2),
  .hero-mark .line1:hover .ch:nth-child(2) { animation: mark-flicker-b 20s ease-in-out .12s infinite; }
  .hero-mark .line1.is-flicker .ch:nth-child(3),
  .hero-mark .line1:hover .ch:nth-child(3) { animation: mark-flicker-c 20s ease-in-out 0s infinite; }
  .hero-mark .line1.is-flicker .bar,
  .hero-mark .line1:hover .bar { animation: mark-flicker-bar 20s ease-in-out .06s infinite; }
  .hero-mark .line1.is-flicker .ch:nth-child(5),
  .hero-mark .line1:hover .ch:nth-child(5) { animation: mark-flicker-a 20s ease-in-out .16s infinite; }
  .hero-mark .line1.is-flicker .ch:nth-child(6),
  .hero-mark .line1:hover .ch:nth-child(6) { animation: mark-flicker-c 20s ease-in-out .02s infinite; }
  .hero-mark .line1.is-flicker .ch:nth-child(7),
  .hero-mark .line1:hover .ch:nth-child(7) { animation: mark-flicker-b 20s ease-in-out .19s infinite; }
  /* Coupe nette avant relance (site.js). Sans ça, changer seulement le
     délai laisse l'animation idle en cours — le flicker au survol ne part pas. */
  .hero-mark .line1.flicker-reset .ch,
  .hero-mark .line1.flicker-reset .bar { animation: none; }
}
@keyframes tag-rule { to { transform: scaleX(1); } }
@keyframes tag-word { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes tag-fade { from { opacity: 0; } to { opacity: 1; } }
/* Cycle de 20 s : le clignotement tient dans les ~5 % du début (~1 s),
   puis le glyphe reste allumé jusqu'à la passe suivante. */
@keyframes mark-flicker-a {
  0%, 6%, 100% { opacity: 1; filter: brightness(1); }
  0.7% { opacity: 1; filter: brightness(1); }
  1.1% { opacity: .38; filter: brightness(.72); }
  1.6% { opacity: 1; filter: brightness(1.1); }
  2.2% { opacity: 1; filter: brightness(1); }
  3.2% { opacity: 1; filter: brightness(1); }
  3.6% { opacity: .52; filter: brightness(.82); }
  4.3% { opacity: 1; filter: brightness(1.06); }
  5% { opacity: 1; filter: brightness(1); }
}
@keyframes mark-flicker-b {
  0%, 6%, 100% { opacity: 1; filter: brightness(1); }
  0.4% { opacity: 1; filter: brightness(1); }
  0.8% { opacity: .42; filter: brightness(.75); }
  1.3% { opacity: 1; filter: brightness(1.08); }
  1.8% { opacity: 1; filter: brightness(1); }
  3.2% { opacity: 1; filter: brightness(1); }
  3.6% { opacity: .58; filter: brightness(.85); }
  4.2% { opacity: 1; filter: brightness(1); }
}
@keyframes mark-flicker-c {
  0%, 6%, 100% { opacity: 1; filter: brightness(1); }
  0.9% { opacity: 1; filter: brightness(1); }
  1.4% { opacity: .34; filter: brightness(.7); }
  1.8% { opacity: .62; filter: brightness(.9); }
  2.2% { opacity: 1; filter: brightness(1.1); }
  2.7% { opacity: 1; filter: brightness(1); }
  4.2% { opacity: 1; filter: brightness(1); }
  4.6% { opacity: .5; filter: brightness(.8); }
  5.3% { opacity: 1; filter: brightness(1); }
}
@keyframes mark-flicker-bar {
  0%, 6%, 100% { opacity: 1; filter: brightness(1); }
  0.5% { opacity: 1; filter: brightness(1); }
  0.9% { opacity: .28; filter: brightness(.65); }
  1.5% { opacity: 1; filter: brightness(1.12); }
  2% { opacity: 1; filter: brightness(1); }
  3.1% { opacity: 1; filter: brightness(1); }
  3.5% { opacity: .36; filter: brightness(.7); }
  4.1% { opacity: 1; filter: brightness(1.08); }
  4.6% { opacity: 1; filter: brightness(1); }
}

.hero-cta { margin-top: clamp(2.1rem, 5vh, 3.1rem); position: relative; z-index: 3;
  opacity: 0; animation: tag-word .75s var(--ease) 3.72s forwards; }
/* la video passe des sujets clairs comme sombres derriere le bouton : son
   voile est plus dense ici que celui des boutons poses sur un fond stable */
.hero-cta a { background: rgba(4,4,4,0.44); }

/* Lecture/pause : dans la colonne, sous le CTA. Même trait carré
   que les flèches de fiche (.s-arrow). */
.hero-pause {
  position: relative; z-index: 3; margin-top: 1.15rem;
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; background: transparent; color: rgba(255,255,255,0.4);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  transition: color .35s ease;
  opacity: 0; animation: tag-fade .9s var(--ease) 4.9s forwards;
}
.hero-pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.hero-pause .i-play { fill: currentColor; stroke: none; }
.hero-pause .i-play, .hero-pause.paused .i-pause { display: none; }
.hero-pause.paused .i-play { display: block; }
.hero-pause.paused { color: rgba(255,255,255,0.55); }
.hero-pause:hover, .hero-pause:focus-visible { color: rgba(255,255,255,0.9); background: transparent; }
.hero-pause:focus-visible { outline: 1px solid rgba(255,255,255,0.55); outline-offset: 3px; }

/* Invitation à scroller : le chevron des fiches, or, plus lisible, un cran
   sous le pause. Le mouvement vit sur l'icone, pas sur le lien. */
.hero-more {
  position: relative; z-index: 3; margin-top: .45rem;
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--gold);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  opacity: 0; animation: tag-fade .9s var(--ease) 5.35s forwards;
  transition: color .35s ease;
}
.hero-more svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; display: block; }
.hero-more-i { display: grid; place-items: center; }
.hero-more:hover, .hero-more:focus-visible { color: #fff; }
.hero-more:focus-visible { outline: 1px solid rgba(255,255,255,0.55); outline-offset: 3px; }
@keyframes hero-nudge {
  0%, 10% { transform: translateY(0); opacity: 1; }
  68% { transform: translateY(10px); opacity: 0; }
  69%, 100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-more-i { animation: hero-nudge 2.6s var(--ease) 6.3s infinite; }
}
@media (max-width: 720px) { .hero-tag { letter-spacing: .38em; } .hero-tag .w:last-child { margin-right: -.38em; } }
@media (max-width: 400px) { .hero-tag { letter-spacing: .3em; gap: .7rem; } .hero-tag .w:last-child { margin-right: -.3em; } }

/* ——— Sections partagées ——— */
section { padding: clamp(4.5rem, 12vh, 8rem) var(--pad); }
.wrap { max-width: var(--max); margin: 0 auto; }
.kicker { font-size: 1.02rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.25rem; }
.kicker .n { color: var(--gold); }
.title { font-family: var(--sans); font-weight: 300; font-size: clamp(1.85rem, 4vw, 2.75rem); letter-spacing: -0.015em; line-height: 1.18; margin: 0 0 1.5rem; }
.lead { max-width: 38rem; color: var(--copy); font-size: 1.02rem; margin: 0; }
.lead strong { color: var(--ink); font-weight: 400; }
.rule { width: 3rem; height: 1px; background: var(--gold-soft); border: 0; margin: 2rem 0; }
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; }
.ph { overflow: hidden; background: #0b0b0b; }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.03) saturate(1.02); }

/* ==================================================
   LE GESTE AU SURVOL D'UNE PHOTO — un seul, partout
   ==================================================
   🚫 RÈGLE DURE : on n'agrandit JAMAIS une texture déjà rastérisée. Firefox
   rastérise le calque une fois, puis étire l'image : d'où l'escalier de gros
   pixels façon Mode 7 signalé sur le carrousel. La photo est donc POSÉE 4 %
   plus grande que son cadre — c'est à cette taille qu'elle est rendue — puis
   RÉDUITE au repos (scale .961538 = 100/104). Le survol ne fait que la
   ramener à 1:1 et la soulever de 1,3 % ; le compositeur ne fait jamais que
   réduire. Cette règle valait déjà pour le carrousel ; elle vaut désormais
   pour les cartes de /moniteurs et la frise de la home, qui utilisaient encore
   un scale(1.03) — le même piège, en sursis.

   Une seule propriété animée sur l'image : `transform`. Animer un `filter` en
   même temps sortirait le calque du compositeur à chaque image ; c'est le voile
   ::before qui éclaircit, et le filet ::after qui se referme sur la photo.
   Le survol est réservé aux vrais pointeurs (en tactile, :hover reste collé
   à la dernière carte touchée) ; le clavier passe par :focus-within. */
.card .ph, .person .ph, .a-time .ph { position: relative; }
.card .ph img, .person .ph img, .a-time .ph img {
  position: absolute; inset: -2%; width: 104%; height: 104%; aspect-ratio: auto;
  /* Le `img { max-width: 100% }` global sinon ramène le 104 % à 100 % :
     la photo se pose à left:-2% et s'arrête à 98 %, puis le scale(.9615)
     la cale à gauche du cadre et laisse ~4 % de vide à droite. Les filets
     de la frise, centrés dans le padding, paraissent alors collés à la
     photo de droite. */
  max-width: none; max-height: none;
  object-fit: cover; filter: none;
  transform: scale(.961538); transform-origin: 50% 50%;
  transition: transform 1.15s var(--ease);
  -webkit-user-drag: none; user-select: none;
}
.card .ph::before, .person .ph::before, .a-time .ph::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #040404; opacity: .09; transition: opacity .55s ease;
}
/* le filet entoure la photo (juste à l'extérieur), il n'est plus un
   passe-partout intérieur. Outline : overflow:hidden de .ph clippe un
   ::after hors cadre, pas le contour de .ph lui-même. */
.card .ph, .person .ph {
  outline: 1px solid transparent;
  outline-offset: 6px;
  transition: outline-color .45s var(--ease), outline-offset .55s var(--ease);
}
@media (hover: hover) {
  /* `will-change` posé au survol seulement : Firefox promeut alors la photo en
     calque et la rastérise à sa taille de MISE EN PAGE (104 %), donc l'échelle
     d'arrivée — plus rien à agrandir pendant la transition. Le poser à froid
     sur les cinquante vignettes de la piste coûterait cinquante calques. */
  .card:hover .ph img, .person:hover .ph img { will-change: transform; }
  .card:hover .ph img, .person:hover .ph img { transform: scale(1) translateY(-1.3%); }
  .card:hover .ph::before, .person:hover .ph::before, .a-time > div:hover .ph::before { opacity: 0; }
  .card:hover .ph, .person:hover .ph {
    outline-color: rgba(185,160,119,.62);
    outline-offset: 0;
  }
}
.card:focus-within .ph img, .person:focus-visible .ph img { transform: scale(1) translateY(-1.3%); }
.card:focus-within .ph::before, .person:focus-visible .ph::before { opacity: 0; }
.card:focus-within .ph, .person:focus-visible .ph {
  outline-color: rgba(185,160,119,.62);
  outline-offset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .card .ph img, .person .ph img, .a-time .ph img { transition: none; }
  .a-time > div, .a-time .beat { transition: none !important; opacity: 1 !important; transform: none !important; }
  .a-time .beat { width: auto !important; margin-left: 0 !important; font-size: 1rem !important; }
  .card .ph, .person .ph { transition: none; }
  .card:hover .ph img, .person:hover .ph img,
  .card:focus-within .ph img, .person:focus-visible .ph img { transform: scale(.961538); }
}
.meta-line { margin-top: 1.5rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }


/* ====================================================
   02 — Une journée (éditorial) : 5 temps, chacun avec sa photo
   ==================================================== */


.a-journee { padding-left: 0; padding-right: 0; }

/* ⚠️ LA GOUTTIÈRE, une bonne fois pour toutes.
   Ailleurs, `section` porte la gouttière (padding: … var(--pad)) et `.wrap`
   pose ses 1120 px dedans : le texte démarre donc à (100vw - 1120)/2.
   Ici — et dans .team — la section n'en porte pas (la frise et le carrousel
   doivent pouvoir la déborder), ce sont les blocs qui la portent. Leur
   max-width doit alors INCLURE la gouttière, comme le fait .a-strip, sinon la
   colonne de texte se retrouve un --pad (48 px) plus à droite que les panneaux
   01/03 et que les photos posées juste au-dessus. C'est ce décalage, et lui
   seul, qui donnait au site son air de « bug » d'alignement.
   Toute nouvelle section à débordement se règle sur cette ligne. */
.a-journee .wrap, .a-time, .team .wrap {
  max-width: calc(var(--max) + 2 * var(--pad));
  padding-left: var(--pad); padding-right: var(--pad);
}
.a-time {
  --frise-gap: 1rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--frise-gap);
  row-gap: 1.5rem;
  margin: 3rem auto 0;
}
@media (max-width: 1100px) { .a-time { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Cinq colonnes 1fr + gouttière : photos de même largeur, alignées sur
   le texte. Le filet est au milieu de la gouttière (les photos remplissent
   le cadre, max-width:none plus haut). */
.a-time > div { padding: 0; position: relative; }
.a-time > div + div::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--frise-gap) / -2);
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 1100px) { .a-time > div:nth-child(4)::before { content: none; } }
.a-time .ph { aspect-ratio: 2 / 3.3; margin: 0 0 1.1em; background: var(--bg); } /* +10 % de hauteur sur le 2/3 */
/* Pas de zoom au survol : la recette 104 % + scale des cartes ne s'applique pas. */
.a-time .ph img {
  /* La photo s'arrête 2 px avant les bords (3 px en bas) : pendant le survol,
     un bord de l'image qui coïncide avec le bord du voile ou du fondu tombe
     entre deux pixels, et le pixel de bord sortait plus clair que la photo
     voilée — une ligne qui scintillait en bas, puis sur les côtés (mesuré
     2026-09-17, profil de luminance image par image). Retirée du bord, l'arête
     de la photo est toujours entièrement sous les calques : plus d'éclat.
     Règle : jamais deux arêtes empilées au même endroit dans un cadre animé. */
  inset: 2px 2px 3px 2px;
  width: calc(100% - 4px);
  height: calc(100% - 5px);
  filter: contrast(1.04) saturate(1.03);
  transform: none;
  transition: none;
}
/* Fondu bas, très léger — même geste que les panneaux, sans manger la photo. */
.a-time .ph::after {
  content: "";
  position: absolute;
  inset: auto -1px -1px;
  height: calc(22% + 1px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0, var(--bg) 6px, transparent);
}
/* Tailles en em, rapportées à .beat (1rem au repos) : l'effet de survol plus bas
   agrandit le corps de .beat, et tout le temps — photo, titre, texte — suit. */
.a-time .beat { font-size: 1rem; }
.a-time .h {
  font-family: var(--sans); font-weight: 400; font-size: .95em;
  color: var(--ink); margin: 0 0 .474em;
  padding-left: .79em;
  padding-right: .79em;
}
.a-time .h span {
  color: var(--gold); font-size: .737em; letter-spacing: .12em; margin-right: .63em;
}
.a-time p { margin: 0; color: var(--copy); font-size: .88em; padding-left: .852em; padding-right: .852em; }

/* ——— Frise vivante (PC) — choix d'Alex 2026-09-17 : apparition A, survol 2 « Projecteur », 7 % ———
   Maquette de référence : maquettes/preview-sites/frise-dynamique/index.html

   APPARITION : les cinq temps montent l'un après l'autre (fondu + 34 px, 150 ms
   d'écart, --i posé dans home.php). Pas de script dédié : c'est la classe .in que
   l'observateur .reveal de site.js pose déjà sur .a-time qui déclenche la cascade.
   Au-dessus de 720 px le bloc lui-même ne fond plus, ce sont ses colonnes.

   SURVOL : le temps survolé grandit de 7 % avec son texte et se soulève ; les
   quatre autres s'estompent. 🚫 RÈGLE ANTI-FIREFOX : .beat est POSÉ --g fois plus
   grand (largeur ET corps de texte, donc mêmes retours à la ligne) puis RÉDUIT au
   repos par scale(1/--g). Au repos la frise est donc identique à avant ; le
   survol ne fait que ramener .beat à 1:1 — le compositeur ne fait que réduire,
   jamais étirer. Ne jamais remplacer ça par un scale(1.07) au survol. */
@media (min-width: 721px) {
  .a-time { --g: 1.07; }
  .js .a-time.reveal { opacity: 1; transform: none; }
  .a-time > div {
    transition: opacity .9s var(--ease) calc(var(--i, 0) * 150ms),
                transform 1.15s var(--ease) calc(var(--i, 0) * 150ms);
  }
  .js .a-time.reveal:not(.in) > div { opacity: 0; transform: translateY(34px); }
}
@media (hover: hover) and (min-width: 721px) {
  .a-time .beat {
    width: calc(100% * var(--g));
    margin-left: calc((1 - var(--g)) * 50%);
    font-size: calc(1rem * var(--g));
    transform: scale(calc(1 / var(--g)));
    transform-origin: 50% 30%;
    transition: transform .8s var(--ease), opacity .6s ease;
  }
  .a-time > div:hover { z-index: 3; }
  /* will-change au survol seulement (cf. carrousel) : 5 calques à froid figeraient
     leur rastérisation à l'échelle de repos. */
  .a-time > div:hover .beat { transform: translateY(-10px) scale(1); will-change: transform; }
  .a-time:has(> div:hover) > div:not(:hover) .beat { opacity: .4; }
}

/* Mobile : la journée est une pellicule, pas une pile. Un temps à l'écran,
   le suivant qui dépasse ; un fil d'or pour se situer. Scroll-snap natif
   (le claquement). À la souris, site.js glisse puis reclaque sur le cran. */
.a-time-idx { display: none; }
@media (max-width: 720px) {
  .a-time-idx {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.15rem;
    position: relative;
    width: max-content;
    margin: 2rem auto 0;
    padding: 0;
  }
  .a-time-idx::before {
    content: "";
    position: absolute;
    left: 22px; right: 22px;
    top: 50%;
    height: 1px;
    background: var(--gold-soft);
  }
  .a-time-idx button {
    position: relative; z-index: 1;
    width: 44px; height: 44px; margin: 0; padding: 0;
    display: grid; place-items: center;
    border: 0; background: transparent; cursor: pointer;
    color: transparent; font-size: 0;
  }
  .a-time-idx button::after {
    content: "";
    width: 6px; height: 6px;
    border: 1px solid var(--gold);
    background: var(--bg);
  }
  .a-time-idx button[aria-current="true"]::after { background: var(--gold); }
  .a-time-idx button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

  .a-time {
    display: flex;
    column-gap: .7rem;
    row-gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-top: .6rem;
    padding-bottom: .35rem;
    cursor: grab;
  }
  .a-time.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .a-time::-webkit-scrollbar { display: none; }
  .a-time > div {
    flex: 0 0 min(70vw, 18.5rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 0;
  }
  .a-time > div + div::before { content: none; }
  .a-time .ph { aspect-ratio: 3 / 4; margin: 0 0 1.1em; }
  .a-time p { font-size: .9em; }
}


/* ====================================================
   01 / 03 — panneaux immersifs plein cadre, texte posé dessus
   ==================================================== */
.c-panel { position: relative; min-height: 88vh; display: flex; align-items: flex-end; padding: clamp(3rem, 8vh, 6rem) var(--pad); overflow: hidden; isolation: isolate; }
.c-panel .bg { position: absolute; inset: 0; z-index: -1; }
.c-panel .bg img { width: 100%; height: 115%; object-fit: cover; filter: contrast(1.04) saturate(1.0) brightness(calc(.62 * var(--lum, 1))); transform: translateY(-6.5%); will-change: transform; }
.c-panel .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(4,4,4,.78), rgba(4,4,4,.35) 45%, rgba(4,4,4,0) 75%), linear-gradient(to top, var(--bg) 0%, rgba(4,4,4,.86) 30%, rgba(4,4,4,.35) 58%, rgba(4,4,4,.25) 100%); }
#story .c-panel .bg::after, .c-panel.top-fade .bg::after { background: linear-gradient(to right, rgba(4,4,4,.78), rgba(4,4,4,.35) 45%, rgba(4,4,4,0) 75%), linear-gradient(to top, var(--bg) 0%, rgba(4,4,4,.86) 30%, rgba(4,4,4,.35) 58%, var(--bg) 100%); }
.c-box { max-width: var(--max); width: 100%; margin: 0 auto; }
/* Meme echelle que .title partout ailleurs. max-width : le titre reste
   sur la photo, il ne traverse pas le cadre. */
.c-box > .title { max-width: 16ch; }
.c-box .kicker { color: rgba(244,241,234,.7); }
.c-box p:not(.kicker) { color: var(--copy); margin: 0; font-size: 1.02rem; max-width: 34rem; }
.c-box p strong { color: var(--ink); font-weight: 400; }
.c-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(244,241,234,.22); }
@media (max-width: 900px) { .c-steps { grid-template-columns: repeat(2, 1fr); } }
.c-steps .h { font-size: .7rem; letter-spacing: .18em; color: var(--gold); margin: 0 0 .45rem; }
.c-steps h4 { font-family: var(--sans); font-weight: 400; font-size: .95rem; margin: 0 0 .25rem; }
.c-steps p { font-size: .85rem; color: rgba(244,241,234,.66); }
.c-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 2rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(244,241,234,.22); }
@media (max-width: 900px) { .c-who { grid-template-columns: repeat(2, 1fr); } }
.c-who h3 { font-family: var(--sans); font-weight: 400; font-size: .95rem; margin: 0 0 .45rem; }
.c-who h3 span { color: var(--gold); font-size: .7rem; letter-spacing: .12em; margin-right: .6rem; }
.c-box .c-who p { font-size: .85rem; color: rgba(244,241,234,.66); max-width: none; line-height: 1.5; }

/* ——— Tarifs ——— */
.tarifs { border-top: 1px solid var(--line); }
.tarifs .wrap { max-width: 720px; text-align: center; }
.tarifs .kicker { margin-bottom: 1.6rem; }
.tarifs .price { margin: 0; font-family: var(--sans); font-weight: 300; font-size: clamp(1.85rem, 4vw, 2.75rem); letter-spacing: -0.015em; line-height: 1.18; }
.tarifs .price .amount { white-space: nowrap; }
.tarifs .price sup { font-size: .45em; color: var(--gold); vertical-align: top; position: relative; top: .5em; margin-left: .06em; }
.tarifs .rule { margin: 2.2rem auto; }
.tarifs .cond { margin: 0; color: var(--muted); font-size: .95rem; }

/* ——— Aperçu moniteurs : carrousel contrôlable ——— */
.team { border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; }
.team-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; }
.team-head .lead { max-width: 38rem; }

/* flèches (fiche moniteur en grand) : même filet or que les boutons */
.s-arrow { width: 40px; height: 40px; flex: none; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: rgba(244,241,234,.03); backdrop-filter: blur(6px); color: var(--ink);
  transition: background .3s, border-color .3s, color .3s, opacity .3s; }
.s-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; }
.s-arrow:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: #040404; }
.s-arrow:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.s-arrow:disabled { opacity: .28; cursor: default; }

/* piste : les cartes entrent et sortent du cadre sans coupure nette.
   ⚠️ Le fondu des deux bords était un `mask-image`. Un masque oblige Firefox à
   composer la piste dans une SURFACE HORS ÉCRAN, rastérisée une fois puis
   réutilisée : c'est ce qui donnait aux photos, au survol, ce zoom en gros
   pixels façon Mode 7. Le fond du site étant uni (--bg), deux dégradés posés
   par-dessus donnent exactement le même dessin sans surface hors écran.
   Ne pas revenir à un masque ici. */
.slider { position: relative; overflow: hidden; }
.slider::before, .slider::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5%;
  z-index: 3; pointer-events: none; }
.slider::before { left: 0; background: linear-gradient(to right, var(--bg), rgba(4,4,4,0)); }
.slider::after { right: 0; background: linear-gradient(to left, var(--bg), rgba(4,4,4,0)); }
/* La piste est translatée en JS (cf. site.js), elle ne défile pas : une
   translation accepte les fractions de pixel et reste sur le compositeur,
   là où scrollLeft, arrondi au pixel, saccadait à cette vitesse.
   touch-action: pan-y — le geste horizontal est à nous, le vertical à la page. */
.slider-track { display: flex; gap: 1.1rem; width: max-content; padding: .5rem 0;
  cursor: grab; outline: none; touch-action: pan-y; }
.slider-set { display: flex; gap: 1.1rem; flex: none; }
.slider-track:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.slider-track.dragging { cursor: grabbing; user-select: none; }
.slider-track.dragging img { pointer-events: none; }

.person { display: block; cursor: pointer; -webkit-user-drag: none; margin: 0; text-align: center; width: clamp(150px, 13vw, 190px); flex: none; color: inherit; }
.person:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
/* Zoom au survol : on n’agrandit JAMAIS une image déjà rastérisée.
   La photo est posée 4 % plus grande que son cadre (donc rendue à cette
   taille), puis RÉDUITE au repos (scale .9615) ; le survol la ramène à 1:1.
   Le compositeur n’a plus qu’à réduire une texture, jamais à l’agrandir —
   c’est l’agrandissement de texture qui donnait, dans la piste du carrousel
   (calque composite + masque de fondu), ce zoom en gros pixels façon Mode 7.
   Le voile ::before remplace la variation de `filter` au survol : animer un
   filtre en même temps qu’un transform sort le calque du compositeur à chaque
   image. Le transform reste ainsi la seule propriété animée. */
.person .ph { aspect-ratio: 3/4; }
.person .cap { display: block; padding: 0.75rem 0 0; }
.person .name { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.85rem; letter-spacing: 0.005em; margin: 0 0 0.25rem; }
.person .role { display: block; margin: 0; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.person .role .f { color: var(--gold); display: block; margin-bottom: .15rem; }

/* Pastille « + » du carrousel : hover PC seulement. Jamais pré-affichée
   sur tactile — c'est ce pré-affichage qui avait fait retirer les plus
   le 11 sept. display:none hors pointeur fin : un :hover collé après
   un tap ne peut pas la faire apparaître. */
.person .zoom {
  position: absolute; right: .65rem; bottom: .65rem; z-index: 3;
  width: 22px; height: 22px; display: none; place-items: center;
  border: 1px solid var(--gold-soft); background: rgba(4,4,4,.55); color: var(--gold);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s, color .3s, border-color .3s;
  pointer-events: none;
}
.person .zoom svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .person .zoom { display: grid; }
  .person:hover .zoom, .person:focus-visible .zoom { opacity: 1; transform: none; }
  .person:hover .zoom { background: var(--gold); color: #040404; border-color: var(--gold); }
  .slider-track.dragging .person .zoom { opacity: 0; transform: translateY(4px); }
}

.team-vide { max-width: 34rem; color: var(--muted); font-size: 1.02rem; margin: 0; }
.team-head .title { margin-bottom: .8rem; }

/* ——— Appel à la réservation + partenaires ———
   Un seul bloc : le bandeau logos est *dans* .enquire, pas une section
   qui remonte en marge négative (ça écrasait le texte sur téléphone).
   La gouttière entre la promesse et PARTENAIRES est un margin, identique
   à tous les formats. min-height 62vh centre le groupe s'il reste de l'air. */
.enquire { border-top: 1px solid var(--line); min-height: 62vh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; background: radial-gradient(ellipse at 50% 0%, rgba(185,160,119,0.09), transparent 55%), var(--bg); }
.enquire > .wrap { width: 100%; max-width: 640px; margin-inline: auto; text-align: center; }
.enquire .lead { margin: 0 auto; }
.enquire .btn { margin-top: 2.4rem; }
.enquire .note { margin-top: 2.2rem; font-size: 0.85rem; color: var(--muted); }
.enquire .note a { border-bottom: 1px solid var(--line); transition: border-color .3s, color .3s; }
.enquire .note a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.enquire .promise { margin-top: .6rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* ——— Partenaires : signature de six logos sous l'appel à réserver.
   Sur grand écran, l'espace est distribué entre les bords réels des marques
   (et non entre six cellules identiques) : leurs proportions vont de 1:1 à
   presque 4:1. Les grilles reprennent la main dès que la rangée se resserre. */
.partners { width: 100%; margin-top: clamp(3.6rem, 6vh, 4.75rem); padding: 0; text-align: center; }
.partners .kicker { margin: 0 0 1.9rem; }
.partners-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0;
}
.partner-item { flex: 0 0 auto; min-width: 0; }
.partner-link {
  display: grid; place-items: center; width: auto; min-height: 6.35rem;
  padding: .45rem; box-sizing: border-box; position: relative;
  outline: 1px solid transparent; outline-offset: .45rem;
  transition: outline-color .3s ease;
}
.partner-link:focus-visible { outline-color: var(--gold); }
.partner-mark {
  --partner-w: 9rem; --partner-h: 4rem;
  display: block; position: relative;
  width: var(--partner-w); height: var(--partner-h); max-width: 100%;
  opacity: .5; transform: scale(.95); transform-origin: 50% 50%;
  transition: opacity .3s ease, transform .3s var(--ease);
  will-change: transform;
}
.partner-logo {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center; pointer-events: none;
  transition: opacity .24s ease;
}
.partner-logo--light { opacity: 1; filter: brightness(0) invert(1); }
.partner-logo--gold {
  opacity: 0;
  filter: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(754%) hue-rotate(357deg) brightness(94%) contrast(86%);
}
.partner-mark--pyrenex { --partner-w: 6.7rem; --partner-h: 5.5rem; }
.partner-mark--amano { --partner-w: 10.8rem; --partner-h: 3rem; }
.partner-mark--bo-house { --partner-w: 5.8rem; --partner-h: 5.8rem; }
.partner-mark--skiset { --partner-w: 10.6rem; --partner-h: 3rem; }
.partner-mark--courchevel { --partner-w: 7.7rem; --partner-h: 5.45rem; }
.partner-mark--handout { --partner-w: 8.7rem; --partner-h: 5rem; }

/* Deux SVG déjà colorés se croisent en opacité : Firefox n'a aucun filtre à
   recalculer pendant la transformation et le conteneur ne dépasse jamais 1:1. */
.partner-link:focus-visible .partner-mark,
.partner-link:active .partner-mark {
  opacity: 1;
  transform: scale(1) translateY(-2px);
}
.partner-link:focus-visible .partner-logo--light,
.partner-link:active .partner-logo--light { opacity: 0; }
.partner-link:focus-visible .partner-logo--gold,
.partner-link:active .partner-logo--gold { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .partner-link:hover .partner-mark {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  .partner-link:hover .partner-logo--light { opacity: 0; }
  .partner-link:hover .partner-logo--gold { opacity: 1; }
}

/* Un seul petit moment d'entrée : la signature se compose marque par marque. */
.js .partners .partner-link { opacity: 0; transform: translateY(8px); transition: opacity .58s var(--ease), transform .58s var(--ease), outline-color .3s ease; }
.js .partners .reveal.in .partner-link { opacity: 1; transform: none; }
.js .partners .partner-item:nth-child(2) .partner-link { transition-delay: .04s; }
.js .partners .partner-item:nth-child(3) .partner-link { transition-delay: .08s; }
.js .partners .partner-item:nth-child(4) .partner-link { transition-delay: .12s; }
.js .partners .partner-item:nth-child(5) .partner-link { transition-delay: .16s; }
.js .partners .partner-item:nth-child(6) .partner-link { transition-delay: .2s; }

@media (max-width: 980px) {
  .partners-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.4rem; }
  .partner-item { width: 100%; }
  .partner-link { width: 100%; }
}
@media (max-width: 620px) {
  .partners .kicker { margin-bottom: 1.5rem; }
  .partners-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; }
  .partner-link { min-height: 5.8rem; padding: .4rem; }
  .partner-mark--amano, .partner-mark--skiset { --partner-w: 9.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-link, .partner-mark, .partner-logo { transform: none !important; transition: none !important; }
}

/* ——— Footer ——— */
footer { border-top: 1px solid var(--line); padding: 2.5rem var(--pad) 2rem; font-size: 0.85rem; color: var(--muted); }
.footer-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto auto;
  gap: 2rem clamp(3rem, 10vw, 9rem); }   /* 1fr auto auto : les deux blocs de liens
  se dimensionnent sur leur texte et le dernier finit PILE au bord droit de la grille,
  dans l'axe des liens légaux du dessous. Avec trois colonnes en fr, le texte le plus
  long (l'email) s'arrêtait 100 px avant — c'est ce qui donnait au pied de page l'air
  d'être décalé vers la gauche, alors que le conteneur, lui, était bien sur la grille. */
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
footer .brand { font-family: var(--forum); color: var(--ink); letter-spacing: 0.14em; font-size: 0.95rem; margin-bottom: 0.6rem; }
footer a:hover { color: var(--ink); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 0.4rem; }
footer h2 { margin: 0 0 0.75rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: var(--ink); }
.footer-bottom { max-width: var(--max); margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.72rem; letter-spacing: 0.06em; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom .legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* Pied de page à quatre colonnes (24/09) : le bloc « Professionnels » s'ajoute à
   droite. Gouttière réduite par rapport aux trois colonnes (clamp 3–9 rem) : à
   9 rem × 3, la marque se repliait sur trois lignes. Les colonnes de liens
   restent à leur largeur de texte, la dernière finit au bord droit de la grille. */
.footer-grid.pro { grid-template-columns: 1fr max-content max-content minmax(12rem, 15rem); column-gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 980px) { .footer-grid.pro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .footer-grid.pro { grid-template-columns: 1fr; } }
footer .f-pro p { margin: 0 0 1rem; line-height: 1.6; }
/* Lien volontairement discret : même corps que les liens légaux du dessous. */
footer a.f-pro-lien { font-size: .72rem; letter-spacing: .06em; }

/* Zone tactile de 44 px sans toucher au dessin : le carre visible reste
   a sa taille, un pseudo-element transparent porte la cible.
   .hero-pause porte deja ses 44 px : ne pas l'etendre ici. */
.nav-ico, .nav-burger, .s-arrow { position: relative; }
.nav-ico::after, .nav-burger::after { content: ""; position: absolute; inset: -5px; }
.s-arrow::after { content: ""; position: absolute; inset: -2px; }

/* WhatsApp */
.wa { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 50; display: flex; align-items: center; justify-content: center; min-height: 44px; gap: .6rem; padding: .65rem .95rem .65rem .8rem; background: rgba(4,4,4,.82); backdrop-filter: blur(10px); border: 1px solid var(--line); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; transition: border-color .3s; }
.wa:hover { border-color: var(--gold); }
/* la pastille recouvrait la derniere photo de la frise et la ligne legale du
   pied de page ; le pied porte deja WhatsApp, on l'efface a son approche */
.wa { transition: border-color .3s, opacity .4s ease, transform .4s var(--ease); }
.wa.away, .js .wa.veille { opacity: 0; transform: translateY(8px); pointer-events: none; }
/* .veille : etat de depart sur la home, tant que le hero occupe l'ecran. Il n'est
   applique que sous `.js` — si le script ne demarre pas, le bouton reste visible
   plutot que de disparaitre pour de bon (meme filet que les blocs .reveal). */
.wa svg { width: 16px; height: 16px; fill: var(--gold); display: block; flex: none; }
/* meme regle que le bandeau : le libelle ne se replie pas sur deux lignes
   et la pastille ne se deforme pas quand la fenetre se resserre. */
.wa span { white-space: nowrap; }

/* ——— Pastille « appareil de l'équipe » ———
   Miroir de WhatsApp, de l'autre côté de l'écran, et volontairement plus
   petite et plus sourde : c'est un témoin, pas une action. Servie uniquement
   aux navigateurs qui portent le cookie to_equipe (cf. inc/footer.php).
   L'état « compté » est le seul qui doive attraper l'oeil : c'est celui où un
   appareil de l'équipe entre dans les chiffres sans le dire. */
.eq { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 50; display: flex; align-items: center; gap: .5rem; min-height: 34px; padding: .5rem .8rem; background: rgba(4,4,4,.82); backdrop-filter: blur(10px); border: 1px solid var(--line); color: var(--muted); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; opacity: .5; transition: opacity .3s, border-color .3s, color .3s; }
.eq:hover, .eq:focus-visible { opacity: 1; color: var(--ink); border-color: var(--gold); }
.eq span { white-space: nowrap; }
.eq-d { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.eq.eq-on { opacity: .9; color: var(--ink); border-color: var(--gold-soft); }
.eq.eq-on .eq-d { background: var(--gold); box-shadow: 0 0 0 3px rgba(185, 160, 119, .18); }
/* Même effacement que WhatsApp : ni le menu plein écran ni la fiche moniteur
   ne doivent être troués par un témoin de service. */
body.menu-open .eq, body.fiche-open .eq { opacity: 0; pointer-events: none; }
@media (max-width: 820px) { .eq { backdrop-filter: none; background: rgba(4,4,4,.94); } }
/* Sous 420 px, WhatsApp et le témoin se disputent la même ligne : le témoin
   se réduit à sa pastille, le libellé tombe. */
@media (max-width: 420px) { .eq span:not(.eq-d) { display: none; } .eq { padding: .5rem; min-width: 34px; justify-content: center; } }
.menu-ico a { flex: 0 0 auto; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-media video, .hero-media img, .hero-tag .w, .hero-mark .line1, .hero-mark .sub,
  .hero-mark .line1 > span[aria-hidden], .hero-mark .ch, .hero-mark .bar, .hero-cta, .hero-pause, .hero-more, .hero-more-i, .hero-tag { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; filter: none !important; }
  .hero-tag::before, .hero-tag::after { transform: none !important; animation: none !important; transition: none !important; filter: none !important; }
}

/* ==================================================
   Allègements mobile — le compositeur des navigateurs mobiles
   (Firefox Android en tête) repasse en logiciel dès qu'un calque
   plein écran se mélange ou se floute au-dessus d'une vidéo.
   ================================================== */
@media (max-width: 820px) {
  /* pas de zoom animé sur une vidéo plein écran */
  .hero-media video, .hero-media img { transform: none; animation: none; }
  /* pas de parallax : l'image reste à sa position de repos */
  .c-panel .bg img { will-change: auto; transform: translateY(-6.5%) !important; }
  /* backdrop-filter : coûteux et invisible sur fond quasi noir */
  .nav.scrolled { backdrop-filter: none; background: rgba(4,4,4,.94); }
  .wa { backdrop-filter: none; background: rgba(4,4,4,.94); }
  /* Le menu plein écran garde lui aussi son verre (demande d'Alex) : la vidéo
     du hero est mise en pause pendant qu'il est ouvert, cf. site.js. */
  /* Les boutons et les icônes de nav GARDENT leur verre dépoli
     (`backdrop-filter: blur(6px)` sur fond translucide) : c'est le relief
     auquel Alex tient, et la surface floutée y est minuscule — sans commune
     mesure avec une barre de nav ou un menu plein écran. Ne pas « optimiser ». */
}

/* ==================================================
   Pages intérieures (Moniteurs · Réservation · Contact)
   ================================================== */
.nav.inner.scrolled { background: rgba(4, 4, 4, 0.72); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav.inner .nav-logo { opacity: 1; }
.page-head { padding-top: clamp(8rem, 18vh, 12rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.page-head .lead { max-width: 40rem; }
/* Page 404 (pages/404.php) : un bouton, puis les trois pages en liens discrets. */
.err-actions { margin-top: 2.2rem; }
.err-links { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.err-links a { color: rgba(244,241,234,.78); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.err-links a:hover, .err-links a:focus-visible { color: var(--gold); }
.page-head .title { margin-bottom: 1rem; }
.page-head.center { text-align: center; }
.page-head.center .lead { margin: 0 auto; }
.page-head.center .title { text-wrap: balance; }

/* ==================================================
   Fond photo — tête de page ou section
   Même traitement que le panneau 01 de la home : image assombrie, dégradés
   sombres pour la lisibilité, fondu vers --bg pour rejoindre le fond du site.
   Balisage : <section class="… with-bg"><div class="bg"><img …></div> …
   Activation côté PHP : 'headBg' (+ 'headBgPos') passé au render() de la page.
   ================================================== */
.with-bg { position: relative; isolation: isolate; overflow: hidden; }
.with-bg > .bg { position: absolute; inset: 0; z-index: -1; }
.with-bg > .bg img { width: 100%; height: 100%; object-fit: cover;
  object-position: var(--head-bg-pos, 50% 32%); filter: contrast(1.05) brightness(calc(var(--dim, .52) * var(--lum, 1))); }

/* texte aligné à gauche : voile latéral + fondu vers le bas */
.with-bg > .bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(4,4,4,.86), rgba(4,4,4,.44) 48%, rgba(4,4,4,0) 80%),
    linear-gradient(to bottom, rgba(4,4,4,.92) 0%, rgba(4,4,4,.34) 30%, rgba(4,4,4,.62) 72%, var(--bg) 100%); }

/* texte centré : voile homogène, fondu en haut ET en bas */
.with-bg.center > .bg::after, .tarifs.with-bg > .bg::after {
  background:
    radial-gradient(115% 85% at 50% 50%, rgba(4,4,4,.34) 0%, rgba(4,4,4,.66) 58%, rgba(4,4,4,.86) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(4,4,4,.34) 24%, rgba(4,4,4,.34) 74%, var(--bg) 100%); }

/* tête de page : hauteur et respiration */
.page-head.with-bg { padding-top: clamp(9rem, 24vh, 14rem); padding-bottom: clamp(4rem, 11vh, 7rem);
  margin-bottom: clamp(1.5rem, 4vh, 3rem); }

/* section Tarifs : le filet du haut disparaît (le fondu fait déjà la séparation).
   La photo retenue est une vue de nuit, déjà sombre : on ne l'assombrit presque
   pas, sinon il ne reste rien des lumières du village. */
.tarifs.with-bg { border-top: 0; }
/* Le prix doit passer devant. C'est le voile central — plus dense qu'ailleurs —
   qui s'en charge : la photo, elle, suit la même luminosité que les autres fonds
   (plus de --dim particulier ici). Vérifier le contraste du « 800 € » avant de
   toucher au dégradé ci-dessous. */
.tarifs.with-bg > .bg::after {
  background:
    radial-gradient(115% 85% at 50% 50%, rgba(4,4,4,.55) 0%, rgba(4,4,4,.76) 58%, rgba(4,4,4,.9) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(4,4,4,.42) 24%, rgba(4,4,4,.42) 74%, var(--bg) 100%); }

@media (max-width: 820px) {
  .page-head.with-bg { padding-top: clamp(8rem, 20vh, 11rem); }
  .with-bg > .bg img { object-position: var(--head-bg-pos-mob, 58% 32%); }
  .page-head.with-bg:not(.center) > .bg::after {
    background: linear-gradient(to bottom, rgba(4,4,4,.9) 0%, rgba(4,4,4,.46) 32%, rgba(4,4,4,.7) 70%, var(--bg) 100%); }
  .with-bg.center > .bg::after, .tarifs.with-bg > .bg::after {
    background:
      radial-gradient(140% 80% at 50% 50%, rgba(4,4,4,.44) 0%, rgba(4,4,4,.78) 60%, rgba(4,4,4,.92) 100%),
      linear-gradient(to bottom, var(--bg) 0%, rgba(4,4,4,.5) 24%, rgba(4,4,4,.5) 74%, var(--bg) 100%); }
}

/* Moniteurs : cartes 3 colonnes */
.roster { padding-top: 0; }
.roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 900px) { .roster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .roster-grid { gap: 1.8rem .9rem; } .card figcaption { padding-top: .8rem; } .card .name { font-size: .95rem; display: block; } .card .name .f { display: block; margin-top: .25rem; } }
.card { margin: 0; }
.card .ph { aspect-ratio: 3/4; }
.card figcaption { padding: 1.1rem 0 0; }
.card .name { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--sans); font-weight: 400; font-size: 1.05rem; margin: 0 0 .35rem; }
.card .name .f { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 300; }
.card .langs { margin: 0; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* toute la carte est cliquable : le bouton couvre la vignette et sa légende */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card { position: relative; }
.card-open { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; }
.card-open:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
.card .zoom { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--gold-soft); background: rgba(4,4,4,.55); color: var(--gold);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s, color .3s; }
.card .zoom svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.card:hover .zoom, .card:focus-within .zoom { opacity: 1; transform: none; }
.card:hover .zoom { background: var(--gold); color: #040404; border-color: var(--gold); }
@media (hover: none) { .card .zoom { opacity: 1; transform: none; } }

/* ——— Fiche moniteur en grand ——— */
.fiche { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vh, 3rem) var(--pad); }
.fiche[hidden] { display: none; }
.fiche-back { position: absolute; inset: 0; background: rgba(3,3,3,.86); backdrop-filter: blur(8px); animation: f-in .35s var(--ease) both; }
/* Cadre fixe, assez haut pour les bios actuelles (≈420 px de texte).
   Photo 3:4 : largeur = hauteur × 3/4, pas 40 % d’un bandeau 523 px. */
.fiche-panel { --fiche-h: min(80vh, 720px); position: relative;
  width: min(1100px, 100%); height: var(--fiche-h); max-height: min(88vh, 880px); background: #0a0a0a;
  border: 1px solid var(--line); display: grid;
  grid-template-columns: minmax(0, calc(var(--fiche-h) * 3 / 4)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); animation: f-up .45s var(--ease) both; }
.fiche-panel::before { content: ""; position: absolute; left: 2rem; right: 2rem; top: -1px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
@keyframes f-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes f-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .fiche-back, .fiche-panel { animation: none; } }

.fiche-media { position: relative; overflow: hidden; background: #050505; min-width: 0; min-height: 0; }
.fiche-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.03) saturate(1.02) brightness(.96); }
.fiche-body { padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.8rem, 3.5vw, 3rem) 4.2rem; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fiche-main { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.fiche-f { margin: 0 0 .7rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.fiche-f[hidden] { display: none; }
.fiche-body .title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 .9rem; overflow-wrap: break-word; }
.fiche-lang { margin: 0 0 1.4rem; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); overflow-wrap: break-word; }
.fiche-spec { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fiche-spec li { border: 1px solid var(--line); padding: .4rem .8rem; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); max-width: 100%; overflow-wrap: break-word; }
.fiche-bio { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.8; font-weight: 300; }
.fiche-bio:empty { display: none; }
.fiche-bio.attente { color: var(--faint); }
.fiche-foot { flex: none; margin-top: 0; padding-top: 1.5rem; padding-right: 7.2rem; }
.fiche-foot .note { margin: .9rem 0 0; font-size: .78rem; color: var(--faint); }
.fiche-actions { display: flex; align-items: center; gap: .8rem; position: relative; }
.fiche-share-msg { position: absolute; bottom: 100%; right: 0; margin-bottom: .6rem; white-space: nowrap;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  background: #0a0a0a; border: 1px solid var(--line); padding: .4rem .7rem;
  opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none; }
.fiche-share-msg.on { opacity: 1; transform: none; }
/* Même famille que le bouton "Faire une demande" juste à côté : cadre doré
   (au lieu du filet neutre --line de .s-arrow, réservé aux flèches
   précédent/suivant) et même hauteur que .btn (padding 0.95rem + texte
   0.78rem/1 + bordure 1px ≈ 45px), plutôt que le carré 40px hérité de
   .s-arrow qui paraissait chétif à côté du gros bouton texte. */
.fiche-share { border-color: rgba(185, 160, 119, 0.7); width: 45px; height: 45px; }

/* .fiche-expand (nouvel onglet vers /moniteurs/<slug>) partage le même
   gabarit que .fiche-x (croix de fermeture), juste à sa gauche. */
.fiche-x, .fiche-expand { position: absolute; top: 0; width: 46px; height: 46px; display: grid; place-items: center; z-index: 3;
  border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(10,10,10,.7); color: var(--ink); cursor: pointer; text-decoration: none; transition: background .3s, color .3s; }
.fiche-x { right: 0; }
.fiche-expand { right: 46px; }
.fiche-x svg, .fiche-expand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.fiche-x:hover, .fiche-expand:hover { background: var(--gold); color: #040404; }
.fiche-x:focus-visible, .fiche-expand:focus-visible { outline: 1px solid var(--gold); outline-offset: -4px; }

.fiche-nav { position: absolute; right: clamp(1.8rem, 3.5vw, 3rem); bottom: 1.4rem; display: flex; align-items: center; gap: .8rem; }
.fiche-count { margin: 0; font-size: .64rem; letter-spacing: .18em; color: var(--faint); font-variant-numeric: tabular-nums; }
.fiche-nav .s-arrow { width: 34px; height: 34px; }

@media (max-width: 820px) {
  .fiche { padding: 0; place-items: stretch; overflow: hidden; touch-action: pan-y; }
  .fiche-back { backdrop-filter: none; background: rgba(3,3,3,.94); }
  /* animation en opacité seule : une transform sur le panneau en ferait le
     référent des positions fixes, et la croix de fermeture partirait au défilement */
  /* un seul défilement (photo + texte). overflow-x: hidden pour ne pas
     réveiller le scroll horizontal d’août. flèches collées en bas. */
  .fiche-panel { width: 100%; max-width: 100%; max-height: none; height: 100%; min-width: 0; aspect-ratio: auto;
    display: flex; flex-direction: column; border: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    animation-name: f-in; }
  .fiche-panel::before { display: none; }
  /* portraits 3:4 dans une case plus large : recadrer vers le haut
     pour garder la tête et un peu de ciel, pas le centre du buste */
  .fiche-media { height: min(38vh, 300px); flex-shrink: 0; min-width: 0; }
  .fiche-media img { object-position: 50% 14%; }
  .fiche-body { min-width: 0; overflow: visible; flex: none;
    padding: 1.25rem 1.4rem calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
  .fiche-main { overflow: visible; flex: none; }
  .fiche-lang { margin-bottom: 1rem; }
  .fiche-spec { margin-bottom: 1.1rem; }
  .fiche-foot { margin-top: 0; padding-top: 1.4rem; padding-right: 0; }
  .fiche-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2;
    margin: 0; width: 100%; max-width: 100%;
    padding: .9rem 1.4rem calc(.9rem + env(safe-area-inset-bottom, 0px)); justify-content: center;
    background: #0a0a0a; border-top: 1px solid var(--line); }
  .fiche-x { position: fixed; }
  /* Sur mobile, Alex trouve contre-intuitif qu'on puisse "tomber" sur la
     page dédiée du moniteur en naviguant depuis le site lui-même : il ne
     veut y donner accès, sur téléphone, que via un lien partagé (WhatsApp,
     etc.), jamais par navigation interne. Le bouton d'agrandissement — la
     seule porte interne vers cette page depuis la fiche en grand — est donc
     masqué sous ce seuil ; le bouton de partage reste actif, et la page
     elle-même reste pleinement accessible (et indexable) via son URL. */
  .fiche-expand { display: none; }
}
body.fiche-open { overflow: hidden; overscroll-behavior: none; }
body.fiche-open .wa { opacity: 0; pointer-events: none; }

/* Fiche moniteur — page individuelle indexable (/moniteurs/<slug>).
   Reprend les styles internes de la fiche en grand (.fiche-media/.fiche-body/…),
   dans une mise en page statique (pas de superposition plein écran).
   align-items reste au défaut (stretch) et seule la photo garde align-self:
   start (sa propre hauteur, fixée par l'aspect-ratio) — ainsi la colonne de
   texte est toujours au moins aussi haute que la photo, et .fiche-main (flex:1)
   pousse .fiche-foot en bas de cette hauteur commune : le bouton « Faire une
   demande » ne remonte plus quand une bio est courte. Si la bio est plus
   longue que la photo, la ligne grandit normalement, photo toujours en haut. */
.moniteur-fiche { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); margin-bottom: clamp(3rem, 6vw, 5rem); }
.moniteur-fiche .fiche-media { aspect-ratio: 3/4; border: 1px solid var(--line); align-self: start; }
.moniteur-fiche .fiche-body { padding: 0; overflow: visible; }
.moniteur-fiche .fiche-main { overflow: visible; }
.moniteur-fiche .fiche-foot { padding-right: 0; }
@media (max-width: 820px) {
  .moniteur-fiche { grid-template-columns: 1fr; }
  /* .fiche-media hors modale hérite quand même de la règle mobile non
     scopée .fiche-media{height:min(38vh,300px); object-position:50% 14%}
     plus bas (pensée pour la fiche en grand). Plutôt que de la combattre
     avec un aspect-ratio concurrent (ce qui forçait une largeur > 100%
     et créait un débordement horizontal — cf. retour d'Alex), autant
     reprendre exactement le même calcul de hauteur que la fiche en
     grand : même recadrage (même object-position, déjà hérité), déjà
     éprouvé sur les portraits 3:4 des moniteurs, au lieu d'un
     aspect-ratio 4/3 non testé qui rognait mal les visages. */
  .moniteur-fiche .fiche-media { align-self: auto; aspect-ratio: auto; height: min(38vh, 300px); }
  /* Bouton + partage : passent sur deux lignes propres si l'espace manque
     (petits écrans, langues aux libellés plus longs) plutôt que de s'écraser
     ou de déborder — cf. demande d'Alex d'un rendu stable sur mobile. */
  .moniteur-fiche .fiche-actions { flex-wrap: wrap; row-gap: .7rem; }
}

/* Formulaires (réservation, contact) */
.form-wrap { max-width: 640px; margin: 0 auto; }
.form { display: grid; gap: 1.1rem; }
.form label { display: grid; gap: 0.4rem; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea, .form select {
  color-scheme: dark;
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: inherit; font-weight: 300; font-size: 1rem; padding: 0.65rem 0; border-radius: 0; outline: none;
  transition: border-color .3s;
}
.form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23b9a077' stroke-width='1'/></svg>"); background-repeat: no-repeat; background-position: right .2rem center; padding-right: 1.6rem; cursor: pointer; }
.form select option { background: #111; color: var(--ink); }
.form input:focus, .form textarea:focus, .form select:focus { border-bottom-color: var(--gold); }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible, .btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.form textarea { min-height: 7rem; resize: vertical; }

/* Champs obligatoires. L'astérisque ne dit rien à un lecteur d'écran : le
   libellé porte en plus le mot « obligatoire », masqué à l'œil (.sr). */
.form .req { color: var(--gold); font-weight: 400; }
.form-legend { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .02em; color: var(--faint); }
.form-legend .req { color: var(--gold); }

/* Groupe « Vos dates de ski » : un vrai fieldset, dépouillé de son cadre.
   La légende est plus claire que les libellés « Du » et « au » qu'elle
   chapeaute — c'est elle qui porte le sens, eux ne sont que des mots-outils. */
.form .f-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.form .f-group legend { padding: 0; margin-bottom: .55rem; color: var(--ink);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.form .f-group legend .req { margin-left: .3em; }
.form input::placeholder, .form textarea::placeholder { color: var(--faint); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.4rem; }
@media (max-width: 560px) { .form .row, .form .row-3 { grid-template-columns: 1fr; } }
/* Compteurs − / + du formulaire de réservation (skieurs, moniteurs — 23/09/2026).
   Même filet que les autres champs ; les deux boutons portent le filet or des
   boutons du site, en carré de 44 px (cible tactile). Le champ reste saisissable
   au clavier : taper « 12 » va plus vite que douze clics. */
.form .stepper-f { display: grid; gap: .4rem; min-width: 0; }
.form .stepper { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--line); padding: .3rem 0; transition: border-color .3s; }
.form .stepper:focus-within { border-bottom-color: var(--gold); }
.form .stepper input { flex: 1 1 auto; min-width: 2.5rem; border: 0; padding: .35rem 0; text-align: center;
  font-size: 1.15rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.form .stepper input::-webkit-outer-spin-button, .form .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form .stepper input:focus-visible { outline: none; }
.form .st-btn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: transparent; border: 1px solid var(--gold-soft); color: var(--gold); font: inherit; font-size: 1.2rem; font-weight: 300; line-height: 1;
  cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, opacity .25s; touch-action: manipulation; }
.form .st-btn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: #040404; }
.form .st-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.form .st-btn:disabled { opacity: .3; cursor: default; }
.form .st-hint { grid-column: 1 / -1; margin: -.3rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--gold); }
.form .st-hint[hidden] { display: none; }
.form .st-hint b { font-weight: 400; }
/* Sur téléphone, les deux compteurs restent côte à côte : ils se lisent ensemble. */
@media (max-width: 560px) { .form .row.steppers { grid-template-columns: 1fr 1fr; gap: 1rem; } }
/* « Précisez » ne s'affiche que pour « Autre » — seulement si le JS tourne (.js). */
.js .form .decouv-autre:not(.on) { display: none; }
/* Formulaires : tout est aligné sur le bord gauche du premier champ — bouton,
   mention de consentement, promesse. Un bouton centré sous une colonne de
   champs alignés à gauche est exactement le genre de rupture qui se lit comme
   un défaut. Seule la home garde ses blocs centrés (voir .enquire). */
.form .submit { margin-top: 1.2rem; justify-self: start; }
.form .consent { font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--faint); margin: .4rem 0 0; max-width: 34rem; line-height: 1.6; }
.form .consent-check { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.form .consent-check input { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .22rem; accent-color: var(--gold); }
.form .consent-check a { color: var(--muted); border-bottom: 1px solid var(--line); }
.form-note { margin-top: 2rem; font-size: 0.85rem; color: var(--muted); }
.form-note a { border-bottom: 1px solid var(--line); }
.promise { margin-top: .6rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.enquire .promise, .gate .promise { text-align: center; }
.alert { border: 1px solid var(--gold-soft); padding: 1.1rem 1.3rem; margin: 0 0 2rem; color: var(--ink); font-size: .95rem; background: linear-gradient(180deg, var(--soft), transparent); }
.alert.err { border-color: rgba(220,120,100,.55); }

/* ——— Page Réservation : le formulaire et le rappel des tarifs côte à côte ———
   Auparavant la tête de page était centrée (seule page du site dans ce cas) et
   la grille tarifaire vivait dans une section à part, tout en bas. Les deux
   colonnes règlent les deux problèmes d'un coup : la page s'ouvre comme
   Moniteurs et Contact, et le prix est sous les yeux pendant qu'on remplit. */
.resa-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
@media (max-width: 900px) { .resa-grid { grid-template-columns: 1fr; gap: 3.5rem; } }
.resa-side { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.resa-side .kicker { margin-bottom: .9rem; }
.resa-side .price { margin: 0 0 1.2rem; font-family: var(--sans); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.015em; line-height: 1.18; }
.resa-side .price .amount { white-space: nowrap; }
.resa-side .price sup { font-size: .45em; color: var(--gold); vertical-align: top; position: relative; top: .5em; margin-left: .06em; }
.resa-side .lead { font-size: .92rem; }
.resa-side .cond-list { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.8rem; }

.tarif-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .95rem; }
.tarif-table th, .tarif-table td { text-align: left; padding: .95rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tarif-table th { font-weight: 400; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tarif-table td:not(:first-child), .tarif-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarif-table td .u { color: var(--gold); font-size: .75em; margin-left: .1em; }
.tarif-table td small { display: block; color: var(--faint); font-size: .78rem; letter-spacing: .04em; margin-top: .15rem; }
.cond-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.5rem; }
@media (max-width: 640px) { .cond-list { grid-template-columns: 1fr; } }
.cond-list li { border-top: 1px solid var(--line); padding-top: .8rem; font-size: .9rem; color: var(--muted); }
.cond-list li b { display: block; color: var(--ink); font-weight: 400; margin-bottom: .2rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contact-lines li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.contact-lines .k { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.contact-lines a { font-size: 1.05rem; border-bottom: 1px solid transparent; transition: border-color .3s; overflow-wrap: anywhere; }
.contact-lines a:hover { border-bottom-color: var(--gold); }
.contact-lines .sub { display: block; font-size: .8rem; color: var(--faint); margin-top: .15rem; }
.contact-lines .tels { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
@media (max-width: 520px) { .contact-lines li { grid-template-columns: 1fr; gap: .3rem; } }

body.menu-open .wa { opacity: 0; pointer-events: none; }
.wa { transition: opacity .3s, border-color .3s; }

/* ==================================================
   Pages légales (mentions, confidentialité, CGV)
   Une colonne de lecture, pas une page de marque : mesure courte, interligne
   large, titres discrets. Le contenu est long et rébarbatif par nature — le
   seul luxe qu'on puisse lui offrir, c'est d'être facile à lire.
   ================================================== */
/* Les pages légales sont la seule exception à l'alignement à gauche du site :
   le document entier — tête de page COMPRISE — est une colonne de 46 rem centrée
   dans la fenêtre (Alex, 15/09). Le texte, lui, reste aligné à gauche : c'est la
   colonne qu'on centre, pas les lignes. La tête de page doit porter .legal-head,
   sans quoi son titre resterait sur la grille des 1120 et la colonne démarrerait
   192 px plus à droite que lui — le décalage qu'on vient justement de corriger. */
.legal-wrap { max-width: 46rem; margin-inline: auto; }
.legal-head .wrap { max-width: 46rem; }
.legal-wrap h2 { font-family: var(--sans); font-weight: 400; font-size: 1.02rem;
  letter-spacing: .01em; margin: 3.2rem 0 .9rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.legal-wrap h2:first-of-type { margin-top: 0; }
.legal-wrap p { margin: 0 0 1rem; color: var(--muted); font-size: .98rem; line-height: 1.8; }
.legal-wrap p b, .legal-wrap li b { color: var(--ink); font-weight: 400; }
.legal-wrap a { border-bottom: 1px solid var(--line); }
.legal-wrap a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.legal-note { font-size: .86rem !important; color: var(--faint) !important; }
.legal-maj { margin-top: 3rem !important; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .74rem !important; letter-spacing: .06em; color: var(--faint) !important; }
.legal-ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.legal-ul li { position: relative; padding-left: 1.4rem; margin-bottom: .7rem; color: var(--muted); font-size: .98rem; line-height: 1.75; }
.legal-ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: .5rem; height: 1px; background: var(--gold-soft); }

.legal-dl { display: grid; grid-template-columns: 13rem 1fr; gap: 0; margin: 0 0 1.4rem;
  border-top: 1px solid var(--line); }
@media (max-width: 560px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dt { padding-bottom: 0 !important; } }
.legal-dl dt { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line);
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.legal-dl dd { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: .95rem; overflow-wrap: anywhere; }

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .92rem; }
.legal-table th, .legal-table td { text-align: left; padding: .9rem .8rem .9rem 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.legal-table th { font-weight: 400; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.legal-table td b { display: block; color: var(--ink); font-weight: 400; margin-bottom: .2rem; }
.legal-table small { display: block; color: var(--faint); font-size: .8rem; margin-top: .25rem; line-height: 1.6; }
.legal-table.num td:not(:first-child), .legal-table.num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .legal-table, .legal-table thead, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; }
  .legal-table thead { display: none; } .legal-table tr { border-bottom: 1px solid var(--line); padding: .9rem 0; }
  .legal-table td { border: 0; padding: .2rem 0; } }

/* Une information d'identité qui manque encore doit SE VOIR (surlignage posé par
   legal() ; le bandeau de chantier qui les recensait a été retiré le 14/09/2026). */
.todo { background: rgba(220,160,60,.16); color: #e8c07a; border-bottom: 1px dashed rgba(232,192,122,.6);
  padding: .05em .35em; font-size: .92em; letter-spacing: .04em; }

/* ——— Page d'accès (version de travail) ——— */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 2rem var(--pad); }
.gate-card { width: 100%; max-width: 22rem; text-align: center; }
.gate-mark { font-family: var(--forum); font-size: clamp(1.7rem, 8vw, 2.2rem); letter-spacing: .12em; line-height: 1; display: block; }
.gate-mark .bar { display: inline-block; width: 1px; height: .82em; background: currentColor; margin: 0 .38em; vertical-align: -0.04em; }
.gate-sub { margin: .8rem 0 0; font-size: .68rem; letter-spacing: .42em; text-indent: .42em; color: var(--gold); }
.gate-intro { margin: 2.6rem 0 1.6rem; font-size: .85rem; color: var(--muted); }
.gate-form { text-align: left; gap: 1.4rem; }
.gate-form .submit { width: 100%; }
.gate-remember { display: flex; align-items: center; gap: .6rem; font-size: .7rem; letter-spacing: .08em; text-transform: none; color: var(--muted); cursor: pointer; }
.gate-remember input { width: 15px; height: 15px; flex: none; accent-color: var(--gold); }
.gate .alert { font-size: .85rem; padding: .8rem 1rem; margin-bottom: 1.4rem; }

.footer-bottom .legal .quit { color: var(--faint); }
.footer-bottom .legal .quit:hover { color: var(--gold); }

/* Piège à robots des formulaires — invisible, jamais rempli par un humain */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ====================================================
   Apparitions « Cascade » — choix d'Alex 2026-09-17
   Apparition A · tempo normal · filets qui se tracent.
   Maquette : maquettes/preview-sites/apparitions/index.html
   ====================================================
   site.js pose .casc sur un bloc .reveal et .casc-p / .casc-l / .casc-f sur ses
   pièces, avec un délai --cd (120 ms d'écart). Le bloc ne bouge plus lui-même :
   ce sont ses pièces qui montent.
   Pourquoi des ANIMATIONS et pas des transitions : une transition posée sur
   .btn (ou tout autre élément) écraserait ses propres transitions de survol.
   L'animation, en remplissage « backwards », ne tient que pendant son délai et
   sa course, puis rend la main au style normal — rien ne reste figé.
   Uniquement opacité et transform, sur de petites surfaces (cf. perf mobile). */
@keyframes casc-monte { from { opacity: 0; transform: translateY(18px); } }
@keyframes casc-trace { from { transform: scaleX(0); } }

.js .reveal.casc { opacity: 1; transform: none; transition: none; }
.js .reveal.casc:not(.in) .casc-p { opacity: 0; }
.js .reveal.casc.in .casc-p { animation: casc-monte 1.1s var(--ease) var(--cd, 0ms) backwards; }

/* Filet d'or sous le prix : il s'ouvre depuis le centre */
.js .reveal.casc:not(.in) .casc-l { transform: scaleX(0); }
.js .reveal.casc.in .casc-l { animation: casc-trace 1.3s cubic-bezier(.16,1,.3,1) var(--cd, 0ms) backwards; }

/* Filet du haut d'un conteneur (profils de la home, lignes de contact) : la
   bordure devient transparente — même boîte, même mise en page — et un trait
   posé exactement dessus se trace de gauche à droite. */
.js .casc-f { position: relative; border-top-color: transparent; }
.js .casc-f::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--line); transform-origin: 0 50%; pointer-events: none; }
.js .c-who.casc-f::before { background: rgba(244,241,234,.22); }
.js .reveal.casc:not(.in) .casc-f::before { transform: scaleX(0); }
.js .reveal.casc.in .casc-f::before { animation: casc-trace 1.3s cubic-bezier(.16,1,.3,1) var(--cd, 0ms) backwards; }

/* Cartes de /moniteurs : chacune entre d'un geste, décalée de ses voisines (--cd) */
.js .reveal.casc-seul { transition-delay: var(--cd, 0ms); }

/* Filets de séparation des sections (Moniteurs, Appel à réserver) et de la colonne
   Tarifs de /reservation : pleine largeur, tracés depuis le centre. */
.js .filet-sec { position: relative; border-top-color: transparent; }
.js .filet-sec::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--line); transform: scaleX(0); transform-origin: 50% 50%; pointer-events: none; z-index: 1; }
.js .resa-side.filet-sec::before { transform-origin: 0 50%; }
.js .filet-sec.filet-in::before { transform: none; transition: transform 1.3s cubic-bezier(.16,1,.3,1); }

/* ====================================================
   Transitions — choix d'Alex 2026-09-17 (étape 2)
   Maquette : maquettes/preview-sites/transitions/index.html
   ==================================================== */

/* Changement de page : fondu enchaîné (B), durée normale. Fonction native du
   navigateur (View Transitions entre documents) : Chrome, Edge, Safari 18.2+.
   Firefox ne la gère pas encore entre deux pages → coupure franche, comme avant.
   🚫 Ne PAS donner de view-transition-name à .nav pour la « figer » : un nom de
   transition fait de la barre une racine de flou d'arrière-plan, et le verre
   dépoli des .nav-ico / boutons (backdrop-filter) ne verrait plus la page
   derrière. Inutile de toute façon : la barre est identique d'une page à
   l'autre, le fondu enchaîné la laisse visuellement immobile. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .52s; animation-timing-function: ease; }

/* Fiche moniteur en grand : texte en cascade (B, sans la photo qui s'envole).
   Le fond (.fiche-back) et le panneau (.fiche-panel) gardent f-in / f-up ; les
   pièces .fp (posées par site.js) montent après 380 ms, 90 ms d'écart. Jamais
   de transform sur .fiche-panel en mobile (cf. plus haut : .fiche-x et
   .fiche-nav y sont en position fixe) — seules ses pièces de texte bougent. */
.fiche.casc .fp { animation: casc-monte .9s var(--ease) calc(380ms + var(--cd, 0ms)) backwards; }
@media (prefers-reduced-motion: reduce) { .fiche.casc .fp { animation: none; } }

/* ====================================================
   Panneaux photo 01/03 — choix d'Alex 2026-09-17 (étape 3)
   Entrée B « Lumière » + au défilement « la photo recule doucement ».
   Maquette : maquettes/preview-sites/panneaux/index.html
   ==================================================== */

/* Lumière : voile noir sur la photo, levé en 2,2 s quand site.js pose .lum-in.
   Sous .js seulement (sans script, la photo est là). Une opacité sur un calque
   uni, une seule fois : pas de mélange ni de flou (cf. perf mobile). */
.c-panel .bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #040404; opacity: 0; pointer-events: none; }
.js .c-panel:not(.lum-in) .bg::before { opacity: .9; }
.js .c-panel.lum-in .bg::before { opacity: 0; transition: opacity 2.2s cubic-bezier(.33,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .js .c-panel .bg::before { opacity: 0 !important; transition: none !important; } }

/* Recul : la photo est POSÉE --g fois plus grande, centrée sur sa position
   d'origine (haut à 57,5 % × (1 − g) : le centre de l'image de 115 % de haut),
   puis site.js la réduit de 1 à 1/--g. Jamais de scale > 1 (règle anti-Firefox).
   .recul n'est posé qu'au-dessus de 820 px et sans mouvement réduit.
   Pour passer à 12 % : --g: 1.12. */
.c-panel { --g: 1.06; }
.c-panel.recul .bg img { position: absolute; left: calc((1 - var(--g)) * 50%); top: calc((1 - var(--g)) * 57.5%);
  width: calc(100% * var(--g)); height: calc(115% * var(--g)); max-width: none; transform-origin: 50% 50%; }

/* ====================================================
   Profils « Votre profil » vivants (PC) — demande d'Alex 2026-09-17 :
   exactement le survol « Projecteur » de la frise « Une journée », 7 %.
   ====================================================
   Le profil survolé grandit de 7 % avec son texte et se soulève, les trois
   autres s'estompent. 🚫 Même règle anti-Firefox que la frise : .profil est
   POSÉ --g fois plus grand (largeur ET corps de texte, donc mêmes retours à la
   ligne) puis RÉDUIT au repos par scale(1/--g) ; le survol ne fait que revenir
   à 1:1. L'enveloppe .profil existe pour ça : la cascade (étape 1) anime déjà
   la case extérieure, les deux transform ne doivent pas se marcher dessus.
   Tailles passées de rem en em, rapportées à .profil (mêmes valeurs au repos). */
.c-who { --g: 1.07; }
.c-who .profil { font-size: 1rem; }
.c-who .profil h3 { font-size: .95em; margin: 0 0 .45em; }
.c-who .profil h3 span { font-size: .7368em; margin-right: .6316em; }
.c-box .c-who .profil p { font-size: .85em; }
@media (hover: hover) and (min-width: 721px) {
  .c-who .profil {
    width: calc(100% * var(--g));
    margin-left: calc((1 - var(--g)) * 50%);
    font-size: calc(1rem * var(--g));
    transform: scale(calc(1 / var(--g)));
    transform-origin: 50% 30%;
    transition: transform .8s var(--ease), opacity .6s ease;
  }
  .c-who > div { position: relative; }
  .c-who > div:hover { z-index: 3; }
  .c-who > div:hover .profil { transform: translateY(-10px) scale(1); will-change: transform; }
  .c-who:has(> div:hover) > div:not(:hover) .profil { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .c-who .profil { transition: none !important; transform: none !important; opacity: 1 !important;
    width: auto !important; margin-left: 0 !important; font-size: 1rem !important; }
}



/* ——— Concierges & Partenaires (partenaires.php, 24/09) ———
   Même grille que Contact ; ce qui suit ne sert qu'au formulaire d'inscription
   des professionnels et à ses états (envoyé, confirmer, confirmé). */
.pro-lines li > span:not(.k) { color: var(--copy); font-size: .98rem; line-height: 1.55; }
.form .consent-check.lang-opt { font-size: .95rem; color: var(--copy); align-items: center; text-transform: none; letter-spacing: 0; }
.form .consent-check.lang-opt input { margin-top: 0; }
.form .f-langs { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.form .f-hint { margin: -.5rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--gold); }
.form .f-hint[hidden] { display: none; }
.form .bad input, .form .bad select { border-bottom-color: rgba(220,120,100,.8); }
.form .consent-check.bad span { color: rgba(236,160,140,.95); }
.ok-box { border-top: 1px solid var(--gold-soft); padding-top: 1.8rem; }
.ok-box .title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
.ok-box .lead { margin-bottom: 1.4rem; }
.ok-box .lead strong, .page-head .lead strong { overflow-wrap: anywhere; }
.ok-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.page-head.center .ok-actions { justify-content: center; }
.page-head.center .alert { max-width: 34rem; margin: 1.6rem auto 0; }
/* Lien du mail : la tête de page seule, centrée, à hauteur d'écran. */
.page-head.page-head-seul { min-height: 78vh; display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
.page-head.page-head-seul > .wrap { width: 100%; }


/* ——— Megève (destination en test, 25/09/2026) ———
   Encart de la home : une ligne entre les moniteurs et le tarif, filets fins,
   aucune photo. Il doit se lire comme une annonce, pas comme une section. */
.mg-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(1.6rem, 4vh, 2.4rem) var(--pad); }
.mg-band .wrap { display: flex; align-items: baseline; gap: 1.4rem 2rem; flex-wrap: wrap; }
.mg-band .kicker { margin: 0; font-size: .66rem; }
.mg-band-t { margin: 0; flex: 1 1 22rem; font-size: 1.02rem; color: var(--copy); }
.mg-band-l { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  padding-bottom: .3rem; border-bottom: 1px solid var(--gold-soft); transition: color .3s, border-color .3s; }
.mg-band-l:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Page Megève : trois points « ce qui ne change pas », puis la demande. */
.mg-same { padding-top: 0; }
.mg-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2.4rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .mg-points { grid-template-columns: 1fr; } }
.mg-points h3 { font-family: var(--sans); font-weight: 400; font-size: .95rem; margin: 0 0 .5rem; }
.mg-points h3 span { color: var(--gold); font-size: .7rem; letter-spacing: .12em; margin-right: .6rem; }
.mg-points p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.6; max-width: 34ch; }
.mg-cta { border-top: 1px solid var(--line); }
.mg-cta .btn { margin-top: 2.2rem; }
.mg-cta .note { margin-top: 2rem; font-size: .85rem; color: var(--muted); }
.mg-cta .note a { border-bottom: 1px solid var(--line); transition: border-color .3s, color .3s; }
.mg-cta .note a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.mg-cta .promise { margin-top: .6rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* Lien Megève du bandeau et du menu plein écran : l'or au repos, le blanc au
   survol (l'inverse des autres liens). Pas de cadre : un seul bouton encadré
   dans le bandeau, « Réserver ». */
.nav-links a.nav-mg { color: var(--gold); }
.nav-links a.nav-mg:hover, .nav-links a.nav-mg.on { color: var(--ink); }
.menu-links a.nav-mg { color: var(--gold); }
.menu-links a.nav-mg:hover, .menu-links a.nav-mg.on { color: var(--ink); }
.menu-links li:nth-child(5) a { transition-delay: .2s; }