/* ============================================================
   CINEMATIC SITE STARTER — structural + motion CSS
   ------------------------------------------------------------
   The :root block below is your BRAND CHARTER. These are the only
   values you (or Claude) should change to reskin the whole site —
   colours, fonts, spacing, accent. They start NEUTRAL on purpose.
   Everything under "STRUCTURAL CSS" drives the scrub engine,
   sections, and motion. You normally never touch it.
   ============================================================ */

:root {
  /* ---- Backgrounds — charte Trade Therapy (trade-therapy-brand, hex exacts) ---- */
  --bg:          #0C201C;   /* vert nuit — base de page */
  --bg-2:        #11332B;   /* forêt — bandes alternées */
  --bg-3:        #164136;   /* dérivé : +1 pas */
  --ink:         #081714;   /* dérivé : le plus sombre (stats / footer) */

  /* ---- Text ---- */
  --fg:          #F1EAD9;   /* ivoire — jamais blanc pur */
  --fg-soft:     #CFC6AE;   /* dérivé : texte secondaire */
  --muted:       #8FA097;   /* dérivé : labels, légal, légendes */

  /* ---- Accent + lines ---- */
  --accent:      #C9A24A;   /* or plat — accent unique */
  --emerald:     #1E8E76;   /* émeraude — accent secondaire, usage rare */
  --line:        rgba(241, 234, 217, 0.14); /* ivoire @ 14% — filets */

  /* ---- Layout ---- */
  --maxw:        1240px;
  --pad:         clamp(22px, 5vw, 80px);

  /* ---- Motion + type ---- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --serif:       "Cormorant Garamond", Georgia, "Times New Roman", serif;  /* titres */
  --sans:        "Space Grotesk", system-ui, -apple-system, sans-serif;    /* chiffres, labels, corps */
}

/* ============================================================
   STRUCTURAL CSS — drives the engine. Rarely needs editing.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
em { font-style: italic; }

/* ---- Shared bits ---------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
.eyebrow--light { color: var(--fg-soft); }
.eyebrow--center { text-align: center; }

.lede   { font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-soft); max-width: 46ch; margin: 26px 0 0; line-height: 1.75; }
.meta   { font-size: 14px; color: var(--muted); letter-spacing: 0.02em; margin: 20px 0 0; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--light { color: var(--fg); border: 1px solid rgba(245,244,242,0.45); }
.btn--light:hover { background: var(--fg); color: var(--ink); transform: translateY(-2px); }
.btn--solid { color: var(--ink); background: var(--fg); margin-top: 8px; }
.btn--solid:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); }

/* ---- Scroll progress ------------------------------------------------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 200; transition: width .1s linear;
}

/* ---- Nav ------------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-scrolled {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  padding-top: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  font-family: var(--sans); font-weight: 500;
  font-size: 16px; letter-spacing: 0.42em; padding-left: 0.42em;
  color: var(--fg);
}
.nav__links { display: flex; gap: 38px; }
.nav__links a {
  font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-soft); position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width .4s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { width: 100%; }
.nav__cta {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg); border: 1px solid rgba(245,244,242,0.4);
  padding: 11px 22px; border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.nav__cta:hover { background: var(--fg); color: var(--ink); transform: translateY(-1px); }

/* ============================================================
   SCRUB HERO
   The .scrub height controls fly-through speed. Rule of thumb:
   height_vh  ≈  frames × 4.6   (a STARTING point, then judge by eye —
   too fast → raise toward ×6, too slow → lower toward ×3).

   DEFAULT = 160vh, on purpose: out of the box the starter ships with a
   SINGLE demo frame (assets/frames/frame-001.jpg, data-frames="1"), so a
   tall hero would be 5+ screens of one static gradient = confusing. Once
   you drop your real frames and bump data-frames to N, raise this to
   ~N × 4.6vh (e.g. 121 frames → 560vh) and tune by eye.
   ============================================================ */
/* 121 frames × 4.6 ≈ 556vh. Trop rapide → monte vers ×6 ; trop lent → descends vers ×3. */
.scrub { position: relative; height: 1150vh; background: var(--bg); }
.scrub__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scrub__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Fondu de raccord : couleur EXACTE du hero (var(--bg)), opaque au sommet
   du scroll, dissipee par JS des les premiers % de progression (renderSeam).
   opacity:1 par defaut : si le JS est lent a s'initialiser, l'etat par
   defaut reste la couleur qui masque, jamais la frame brute. */
.scrub__seam {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  opacity: 1;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 16vh);
}

.scrub__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,8,10,0.78) 0%, rgba(8,8,10,0.12) 42%, rgba(8,8,10,0) 65%),
    linear-gradient(to bottom, rgba(8,8,10,0.5) 0%, rgba(8,8,10,0) 28%);
}

/* Loader */
.loader {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--bg); transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__brand { font-family: var(--sans); font-size: 14px; letter-spacing: 0.5em; padding-left: 0.5em; color: var(--fg); }
.loader__track { width: 180px; height: 1px; background: var(--line); overflow: hidden; }
.loader__bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s var(--ease); }
.loader__pct { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }

/* Caption beats — fade in/out over the moving footage (bottom-left) */
.scrub__beat {
  position: absolute; left: var(--pad); bottom: clamp(64px, 13vh, 140px); z-index: 10;
  max-width: 720px; opacity: 0; will-change: opacity, transform;
}
.scrub__eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.scrub__title {
  font-size: clamp(58px, 10vw, 132px); line-height: 0.92; color: var(--fg);
  text-shadow: 0 2px 50px rgba(0,0,0,0.45);
}
.scrub__title em, .scrub__beat-title em { color: var(--fg); }
.scrub__tagline {
  font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.2vw, 28px);
  color: var(--fg-soft); margin: 22px 0 0; max-width: 30ch;
}
.scrub__beat-title {
  font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em;
  font-size: clamp(40px, 6.4vw, 92px); color: var(--fg); text-shadow: 0 2px 50px rgba(0,0,0,0.45);
}
.scrub__beat-copy {
  font-size: clamp(16px, 1.45vw, 20px); color: var(--fg-soft);
  margin: 22px 0 0; max-width: 42ch; line-height: 1.7; text-shadow: 0 1px 20px rgba(0,0,0,0.4);
}
.scrub__beat .btn { margin-top: 30px; }

.scrub__cue {
  position: absolute; right: var(--pad); bottom: clamp(48px, 10vh, 96px); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-soft);
}
.scrub__cue-line { width: 1px; height: 54px; background: linear-gradient(var(--fg-soft), transparent); animation: cuePulse 2.4s var(--ease) infinite; }
@keyframes cuePulse { 0%,100% { opacity: .35; transform: scaleY(.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ============================================================
   EDITORIAL (image + text)
   ============================================================ */
.editorial { padding: clamp(90px, 13vh, 180px) var(--pad); background: var(--bg); }
.editorial--reverse { background: var(--bg-2); }
.editorial__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 90px);
  /* start, PAS center : l'image faisait 275 px de haut face a une colonne de
     texte de ~900 px, et flottait au milieu d'un grand vide. Alignee en haut,
     elle demarre avec le titre. */
  align-items: start;
}
.editorial--reverse .editorial__media { order: 2; }
.editorial--reverse .editorial__text { order: 1; }

/* L'image accompagne la lecture au lieu de defiler hors champ des le premier
   paragraphe : le vide vertical devient intentionnel. */
.editorial__media { position: sticky; top: clamp(96px, 13vh, 140px); }

/* La cap a 480 px s'appliquait a TOUT le bloc, titre compris : « Ce n'est pas
   ta discipline. » reclame 719 px a 76 px, il partait donc en 4 lignes au lieu
   de 2. On libere le titre sur toute la colonne (661 px) et on garde la mesure
   de lecture sur le corps, la ou elle sert vraiment. */
.editorial__text { max-width: none; }
.editorial__text .lede,
.editorial__text .meta { max-width: 480px; }

/* 66 px : « Ce n'est pas ta discipline. » demande alors 624 px pour 661
   disponibles. Tient en deux lignes, avec de la marge. */
.editorial__title { font-size: clamp(34px, 4.4vw, 66px); }
.editorial__title em { color: var(--accent); }

/* .frame ships with a visual fallback so an un-replaced placeholder never reads as a
   bare black rectangle. Replace the editorial images at GUIDE step 4 bis. */
.frame {
  margin: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7);
  position: relative; aspect-ratio: 4 / 3; background: var(--bg-3);
  background-image: repeating-linear-gradient(45deg, rgba(245,244,242,0.018) 0 14px, transparent 14px 28px);
}
.frame::after {
  content: "Image à venir"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); opacity: 0.5; pointer-events: none;
}
.frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.editorial__media:hover .frame img { transform: scale(1.04); }

/* ============================================================
   FULL-BLEED IMAGE SECTIONS
   ============================================================ */
.bleed { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.bleed--tall { min-height: 100vh; }
.bleed__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0.32) 38%, rgba(8,8,10,0) 60%),
    linear-gradient(to right, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.12) 50%, rgba(8,8,10,0) 80%);
}
.bleed__content { position: relative; z-index: 2; max-width: 640px; padding: 0 var(--pad); }
.bleed__content--low { align-self: flex-end; padding-bottom: clamp(60px, 12vh, 120px); }
.bleed__title { font-size: clamp(40px, 6vw, 92px); color: var(--fg); text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
.bleed__title em { color: var(--fg); }
.bleed__copy { font-size: clamp(16px, 1.4vw, 19px); color: var(--fg); max-width: 46ch; margin: 24px 0 36px; line-height: 1.75; text-shadow: 0 1px 24px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.6); }
.bleed__specs { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; }
.bleed__specs li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(245,244,242,0.22); min-width: 150px; }
.bleed__spec-k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.bleed__spec-v { font-family: var(--serif); font-size: clamp(18px, 1.7vw, 22px); color: var(--fg); }

/* ============================================================
   AMENITIES / FEATURE LIST
   ============================================================ */
.amenities { background: var(--bg-2); padding: clamp(90px, 14vh, 180px) var(--pad); }
.amenities__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start;
}
.amenities__head { position: sticky; top: 120px; }
.amenities__title { font-size: clamp(34px, 4.4vw, 64px); color: var(--fg); }
.amenities__title em { color: var(--accent); }
.amenities__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 56px);
}
.amenity {
  display: flex; gap: 20px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.amenity__index { font-family: var(--serif); font-size: 15px; color: var(--accent); letter-spacing: 0.04em; flex: 0 0 auto; min-width: 26px; }
.amenity__text { font-size: clamp(15px, 1.15vw, 17px); color: var(--fg-soft); line-height: 1.5; }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--ink); padding: clamp(70px, 11vh, 130px) var(--pad); }
.stats__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 60px);
}
.stat { text-align: left; border-left: 1px solid var(--line); padding-left: 26px; }
.stat__num { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 5.5vw, 76px); line-height: 1; color: var(--fg); }
.stat__unit { font-size: 0.42em; color: var(--accent); letter-spacing: 0.02em; }
.stat__label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
/* La source du seul chiffre qui ne vient pas de Farid. Un site qui affirme
   « on ne te demande pas de me croire » ne peut pas poser sa statistique
   d'ouverture sans dire d'ou elle sort. Discrete : c'est une note de bas de
   page de dossier clinique, pas un argument. */
.stat__source {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.72;
  margin-top: 8px;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { background: var(--bg); padding: clamp(110px, 18vh, 220px) var(--pad); }
.manifesto__inner { max-width: 940px; margin: 0 auto; text-align: center; }
.manifesto__title { font-size: clamp(40px, 6.5vw, 104px); color: var(--fg); }
.manifesto__title em { color: var(--accent); }
.manifesto__copy { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.2vw, 30px); color: var(--fg-soft); margin: 34px auto 0; max-width: 56ch; line-height: 1.5; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--bg-2); padding: clamp(90px, 14vh, 180px) var(--pad); }
.contact__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center;
}
.contact__title { font-size: clamp(34px, 4.6vw, 64px); color: var(--fg); margin-top: 8px; }
.contact__copy { color: var(--fg-soft); max-width: 42ch; margin: 26px 0 0; }
.contact__details { display: flex; flex-direction: column; gap: 4px; }
.contact__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}
.contact__row:not(.contact__row--static):hover { padding-left: 10px; }
.contact__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.contact__value { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); color: var(--fg); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); padding: clamp(60px, 9vh, 110px) var(--pad) 40px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.footer__brand { font-family: var(--serif); font-size: clamp(32px, 4vw, 52px); color: var(--fg); }
.footer__tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); margin: 14px 0 0; }
.footer__base { max-width: var(--maxw); margin: 32px auto 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__legal { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   MOTION LAYER (subtle, premium micro-interactions)
   All disabled under prefers-reduced-motion (media query at end).
   ============================================================ */

/* Masked line-by-line reveal for section titles (built in JS) */
.ml-reveal .ml-line {
  overflow: hidden;
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
.ml-reveal .ml-line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
  transition-delay: var(--ml-delay, 0s);
  will-change: transform;
}
.ml-reveal.is-shown .ml-line__inner { transform: translateY(0); }

/* Eyebrows above masked titles: gentle clip-up + fade */
.ml-eyebrow {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 0.7s var(--ease), opacity 0.7s var(--ease);
}
.ml-eyebrow.is-shown { clip-path: inset(0 0 0 0); opacity: 1; }

/* Animated counters (stats) */
.stat__num.is-counting { font-variant-numeric: tabular-nums; }

/* Parallax media (full-bleed images). JS sets --py (px). */
.bleed__img {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
}

/* CTA / button press feedback */
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }
.nav__cta:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }
.btn--light:active { transform: scale(0.98); }

/* Intro load reveal (nav) */
body.intro-ready .nav { opacity: 0; transform: translateY(-12px); }
body.intro-ready.is-loaded .nav {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .editorial__inner, .contact__inner { grid-template-columns: 1fr; gap: 40px; }
  .editorial--reverse .editorial__media { order: 1; }
  .editorial--reverse .editorial__text { order: 2; }
  /* En une seule colonne, l'image passe AU-DESSUS du texte : la garder collee
     l'epinglerait en haut pendant que le texte defile dessous, et elle
     mangerait l'ecran. Le sticky n'a de sens qu'en deux colonnes. */
  .editorial__media { position: static; }
  /* Le titre peut reprendre toute la largeur : plus de colonne voisine. */
  .editorial__text .lede,
  .editorial__text .meta { max-width: none; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .amenities__inner { grid-template-columns: 1fr; gap: 44px; }
  .amenities__head { position: static; }
  .amenities__list { grid-template-columns: 1fr; }
  .nav__links { display: none; }
}
/* 🔴 820px = le breakpoint JS isSmall : sous cette largeur le scrub passe en
   STATIQUE (1 frame fixe, voir script.js). On DOIT y ramener le hero à 100vh,
   sinon la section garde sa hauteur N×4.6vh et le viewer scrolle plusieurs
   écrans de vide sur une image figée. La coupure CSS suit le breakpoint JS. */
@media (max-width: 820px) {
  .scrub { height: 100vh; }
}
@media (max-width: 560px) {
  .stats__inner { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; text-align: center; align-items: center; }
  .nav__cta { display: none; }
  .scrub { height: 100vh; }
  .bleed__specs { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ml-reveal .ml-line { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .ml-reveal .ml-line__inner { transform: none !important; transition: none !important; }
  .ml-eyebrow { clip-path: none !important; opacity: 1 !important; transition: none !important; }
  .bleed__img { transform: none !important; will-change: auto; }
  .btn:active, .nav__cta:active, .btn--light:active { transform: none !important; }
  body.intro-ready .nav { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   TRADE THERAPY — surcouche « dossier clinique »
   Ajouts propres au site : logo de nav, parcours de soin,
   pied de page avec avertissement réglementaire.
   ============================================================ */

/* ---- Nav : lockup de marque au lieu du mot-symbole ---- */
.nav__brand { display: flex; align-items: center; padding-left: 0; }
.nav__brand img { height: 34px; width: auto; }

/* ---- Parcours de soin : une seule colonne, gradation verticale ----
   Volontairement PAS trois colonnes comparables : deux offres côte à côte
   se comparent au prix, et la moins engageante gagne. */
.amenities__head .lede { margin-top: 22px; }
.amenities__list { grid-template-columns: 1fr; gap: 0; }
.amenity { align-items: flex-start; padding: 34px 0; gap: 24px; }
.amenity:first-child { padding-top: 0; }
.amenity:last-of-type { border-bottom: none; }
.amenity__index {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--accent);
  min-width: 34px; padding-top: 6px;
}
.amenity__body { flex: 1 1 auto; }
.amenity__name {
  font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500;
  color: var(--fg); margin: 0; line-height: 1.1;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.amenity__status {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px;
}
.amenity__indication {
  font-family: var(--sans); font-size: 14px; color: var(--emerald);
  letter-spacing: 0.02em; margin: 14px 0 0; line-height: 1.6;
}
.amenity__text { margin: 12px 0 0; max-width: 62ch; }
.amenity__price {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 18px 0 0;
}
.amenities__cta { grid-column: 1 / -1; margin-top: 48px; }

/* ---- Footer : marque, avertissement réglementaire ---- */
.footer__mark { width: 52px; height: auto; margin: 0 auto 22px; opacity: 0.9; }
.footer__brand em { color: var(--accent); }
.footer__disclaimer {
  max-width: 78ch; margin: 34px auto 0;
  font-size: 12px; line-height: 1.7; color: var(--muted);
  text-align: center; letter-spacing: 0.02em;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .amenities__inner { grid-template-columns: 1fr; }
  .amenities__head { position: static; }
  .amenity { flex-direction: column; gap: 10px; }
  .amenity__index { padding-top: 0; }
}

/* ---- Section preuve : la photo est volontairement sombre (lampe unique dans
   une pièce noire). Le voile par défaut l'effaçait complètement. On allège le
   voile, on le teinte au vert d'encre de la charte, et on décale le cadrage
   pour que le bureau tombe à droite du texte au lieu d'être dessous. ---- */
#preuve .bleed__img {
  object-position: 22% 58%;
  filter: brightness(1.3) saturate(1.05);
}
#preuve .bleed__scrim {
  background:
    linear-gradient(to top, rgba(8,23,20,0.7) 0%, rgba(8,23,20,0.18) 46%, rgba(8,23,20,0) 74%),
    linear-gradient(to right, rgba(8,23,20,0.82) 0%, rgba(8,23,20,0.35) 44%, rgba(8,23,20,0) 76%);
}

/* ---- Parcours : la CTA suit la liste au lieu de flotter sous la colonne de
   gauche, qui est plus courte. ---- */
.amenities__cta { grid-column: 2; margin-top: 40px; }
@media (max-width: 900px) {
  .amenities__cta { grid-column: 1; margin-top: 28px; }
}

/* ---- Nav : le lockup SVG embarque sa propre plaque de fond, qui fait un
   rectangle rapporté sur la barre. On compose la signature à la main :
   mark transparent + nom en Space Grotesk. ---- */
.nav__brand { gap: 12px; }
.nav__brand img { height: 30px; width: auto; }
.nav__brand-name {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .nav__brand-name { display: none; }
}

/* ---- Hero : les beats sont calés à gauche, or la colonne et ses barres d'or
   passent derrière eux. Le voile d'origine ne traite que le haut et le bas.
   On ajoute un dégradé latéral pour que le sur-titre or reste lisible même
   quand une barre d'or de l'image passe exactement dessous. ---- */
#hero .scrub__scrim {
  background:
    linear-gradient(to top, rgba(8,23,20,0.8) 0%, rgba(8,23,20,0.15) 42%, rgba(8,23,20,0) 65%),
    linear-gradient(to bottom, rgba(8,23,20,0.55) 0%, rgba(8,23,20,0) 28%),
    linear-gradient(to right, rgba(8,23,20,0.86) 0%, rgba(8,23,20,0.45) 32%, rgba(8,23,20,0) 62%);
}

/* ---- Mobile : le starter masque la CTA de la nav sous 560px. Sur un site
   dont l'objectif unique est la prise de bilan, la porte d'entrée doit rester
   visible partout. On la garde, on la compacte. ---- */
@media (max-width: 560px) {
  .nav__cta {
    display: inline-flex;
    font-size: 10px; letter-spacing: 0.08em;
    padding: 9px 14px;
  }
  .nav { padding-left: 16px; padding-right: 16px; gap: 12px; }
}

/* ---- Mobile : sur un écran étroit, le sujet lumineux occupe toute la largeur
   et passe sous le texte des beats. Le voile latéral ne suffit plus, on
   assombrit par le bas où les beats sont calés. ---- */
@media (max-width: 820px) {
  #hero .scrub__scrim {
    background:
      linear-gradient(to top, rgba(8,23,20,0.92) 0%, rgba(8,23,20,0.6) 38%, rgba(8,23,20,0.1) 70%),
      linear-gradient(to bottom, rgba(8,23,20,0.55) 0%, rgba(8,23,20,0) 22%);
  }
}

/* ---- L'arrivée : après la traversée de la lumière, le sceau et l'accueil.
   Seul beat centré du hero — les trois précédents sont calés à gauche, et ce
   changement d'axe signale qu'on n'est plus dans le voyage mais à destination.
   Le texte est sombre : à ce moment du vol le fond est une nappe d'or. ---- */
.scrub__beat--arrival {
  left: 0; right: 0;
  bottom: 50%;
  transform: translateY(50%);
  max-width: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 var(--pad);
}
.scrub__seal {
  width: clamp(96px, 11vw, 150px); height: auto;
  margin-bottom: clamp(24px, 3vh, 40px);
  filter: drop-shadow(0 4px 30px rgba(8, 23, 20, 0.45));
}
.scrub__beat--arrival .scrub__beat-title {
  color: var(--ink);
  text-shadow: 0 1px 30px rgba(241, 234, 217, 0.55);
}
.scrub__beat--arrival .scrub__tagline {
  color: var(--ink); opacity: 0.82;
  margin: 18px 0 34px;
}
.scrub__beat--arrival .btn--light {
  color: var(--ink); border-color: rgba(8, 23, 20, 0.45);
}
.scrub__beat--arrival .btn--light:hover {
  background: var(--ink); color: var(--fg);
}

/* Arrivée — corrections de composition : le bloc entier (sceau + titre +
   accroche + bouton) est plus haut qu'un beat classique, il débordait sous la
   nav. On le recentre en tenant compte de la barre, et on ramène le titre à une
   échelle de signature plutôt que de manchette. */
.scrub__beat--arrival {
  bottom: auto; top: 50%;
  transform: translateY(-50%);
  padding-top: clamp(56px, 8vh, 96px);
}
.scrub__beat--arrival .scrub__beat-title {
  font-size: clamp(30px, 3.6vw, 56px);
  max-width: 18ch;
}
.scrub__seal { margin-bottom: clamp(16px, 2.2vh, 28px); }

/* Arrivée — le bloc complet doit tenir dans un écran sans passer sous la nav
   ni déborder en bas. On resserre l'échelle et les marges. */
.scrub__beat--arrival { padding-top: clamp(40px, 6vh, 72px); }
.scrub__seal { width: clamp(72px, 7vw, 104px); }
.scrub__beat--arrival .scrub__beat-title {
  font-size: clamp(26px, 3vw, 46px);
  max-width: 22ch;
}
.scrub__beat--arrival .scrub__tagline { margin: 14px 0 26px; }

/* Arrivée — le sceau est dessiné en or, posé sur une nappe d'or il disparaît.
   On le bascule en encre pour qu'il fasse corps avec le texte, avec un halo
   ivoire qui le détache du fond lumineux. */
.scrub__seal {
  filter: brightness(0) opacity(0.86)
          drop-shadow(0 0 22px rgba(241, 234, 217, 0.75));
}
.scrub__beat--arrival .scrub__tagline { opacity: 1; }

/* Arrivée — la CTA en contour se noie dans la nappe d'or. C'est le bouton le
   plus important de la page : on le passe en plein encre. */
.scrub__beat--arrival .btn--light {
  background: var(--ink); color: var(--fg);
  border-color: transparent;
}
.scrub__beat--arrival .btn--light:hover {
  background: var(--accent); color: var(--ink);
}

/* ---- La nappe d'or ----
   Le clip se termine encore avec des bords de vertèbre flous dans les angles :
   on n'est pas tout à fait DANS la lumière. Ce voile prolonge la lueur du clip
   jusqu'à couvrir l'écran, puis le sceau apparaît dedans. Les teintes sont
   relevées sur la dernière frame pour que le raccord soit invisible. */
.scrub__flood {
  left: 0; right: 0; top: 0; bottom: 0;
  max-width: none; padding: 0;
  z-index: 5; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 46%,
      #FFF7E4 0%,
      #FBEFCF 22%,
      #F2DCA4 46%,
      #DDBC72 68%,
      #C9A24A 100%);
}
/* Le sceau et le message passent au-dessus de la nappe. */
.scrub__beat--arrival { z-index: 12; }

/* La nappe s'ouvre depuis le point lumineux. Version SANS masque : un
   mask-image plein écran est ruineux en densité 2x (il force une couche de
   composition de la taille de l'écran) et fait décrocher l'animation au moment
   le plus important. Ici c'est le dégradé lui-même qui s'écarte : ses arrêts
   sont pilotés par --flood-r, donc tout est peint en une passe. */
.scrub__flood {
  /* position explicite : l'élément n'est plus un .scrub__beat, il ne peut donc
     plus hériter de son position:absolute — sans ça il reste dans le flux,
     sans surface, et la nappe ne s'affiche jamais. */
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  --flood-r: 0;
  background: radial-gradient(circle at 50% 46%,
    #FFF7E4 0%,
    #FBEFCF calc(var(--flood-r) * 0.34%),
    #F2DCA4 calc(var(--flood-r) * 0.68%),
    #DDBC72 calc(var(--flood-r) * 0.92%),
    rgba(201, 162, 74, 0) calc(var(--flood-r) * 1% + 16%));
}

/* Hero — le voile du haut mangeait le cerveau. La frame n'est pas recadrée
   verticalement (son rapport est celui de l'écran), mais le dégradé sombre
   posait 55 % de noir exactement sur la bande où se trouve le crâne. On
   l'allège fortement et on le raccourcit : il ne sert plus qu'à décoller la
   nav du sujet. Le voile latéral gauche, lui, reste — c'est lui qui porte la
   lisibilité des beats. */
#hero .scrub__scrim {
  background:
    linear-gradient(to top, rgba(8,23,20,0.8) 0%, rgba(8,23,20,0.15) 42%, rgba(8,23,20,0) 65%),
    linear-gradient(to bottom, rgba(8,23,20,0.34) 0%, rgba(8,23,20,0) 13%),
    linear-gradient(to right, rgba(8,23,20,0.86) 0%, rgba(8,23,20,0.45) 32%, rgba(8,23,20,0) 62%);
}

/* ============================================================
   ETAT DE REPOS DU HERO — avant le premier scroll
   Le cerveau respire au lieu d'etre fige : un halo qui pulse doucement,
   quelques etincelles qui scintillent autour, positionnees pour
   chevaucher la zone ou le cerveau se trouve (haut-centre du cadre,
   sous la reserve de nav — voir topInset() dans script.js).
   Zero frame supplementaire : c'est une surcouche CSS sur la frame 1.
   ============================================================ */
.scrub__idle {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity .7s var(--ease);
}
.scrub__idle.is-hidden { opacity: 0; }

.scrub__pulse {
  position: absolute;
  top: 15%; left: 50%;
  width: min(42vw, 460px); height: min(42vw, 460px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 236, 178, 0.30) 0%,
    rgba(201, 162, 74, 0.16) 38%,
    rgba(201, 162, 74, 0) 72%);
  animation: scrub-breathe 4.2s ease-in-out infinite;
}
@keyframes scrub-breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

.scrub__spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #FBEFCF;
  box-shadow: 0 0 6px 1px rgba(251, 239, 207, 0.9);
  opacity: 0;
  animation: scrub-twinkle 3.6s ease-in-out infinite;
}
.spark-1 { top: 9%;  left: 41%; animation-delay: 0s; }
.spark-2 { top: 12%; left: 61%; animation-delay: .5s; }
.spark-3 { top: 20%; left: 33%; animation-delay: 1.1s; }
.spark-4 { top: 22%; left: 68%; animation-delay: 1.7s; }
.spark-5 { top: 16%; left: 50%; animation-delay: 2.2s; }
.spark-6 { top: 27%; left: 45%; animation-delay: 2.8s; }
@keyframes scrub-twinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
  40%      { opacity: 1; transform: translateY(-6px) scale(1.1); }
  70%      { opacity: 0; transform: translateY(-14px) scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .scrub__pulse, .scrub__spark { animation: none; opacity: 0.5; }
}

/* ---- Etat de repos : renforcement ----
   La premiere version se noyait dans les etincelles deja presentes sur la
   frame video. On augmente l'amplitude du halo (opacite + echelle), on
   grossit les etincelles, et on les repousse vers l'exterieur du cerveau
   pour qu'elles se lisent comme une activite propre et non comme du bruit
   de l'image. */
.scrub__pulse {
  width: min(52vw, 560px); height: min(52vw, 560px);
  background: radial-gradient(circle,
    rgba(255, 240, 195, 0.52) 0%,
    rgba(255, 214, 130, 0.28) 32%,
    rgba(201, 162, 74, 0.10) 58%,
    rgba(201, 162, 74, 0) 76%);
  animation-duration: 3.4s;
}
@keyframes scrub-breathe {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.88); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}

.scrub__spark {
  width: 5px; height: 5px;
  box-shadow: 0 0 12px 3px rgba(255, 226, 150, 0.95);
  animation-duration: 3s;
}
.spark-1 { top: 7%;  left: 36%; }
.spark-2 { top: 10%; left: 66%; }
.spark-3 { top: 19%; left: 28%; }
.spark-4 { top: 23%; left: 73%; }
.spark-5 { top: 6%;  left: 54%; }
.spark-6 { top: 28%; left: 40%; }
@keyframes scrub-twinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
  35%      { opacity: 1; transform: translateY(-10px) scale(1.4); }
  70%      { opacity: 0; transform: translateY(-22px) scale(0.7); }
}

/* ============================================================
   PIECE 02 — LE PROTOCOLE : la colonne des cinq vertebres
   Repris du site vitrine, retraduit dans la direction dossier
   clinique : filets fins, labels en Space Grotesk facon champ de
   compte rendu, titres en Cormorant. Les cartes alternent de part
   et d'autre d'une moelle verticale, chaque etage marque par un
   noeud d'or — le mark devient la structure de la page.
   ============================================================ */
.protocole {
  background: var(--bg);
  padding: clamp(90px, 14vh, 180px) var(--pad);
}
.protocole__head {
  max-width: var(--maxw);
  margin: 0 auto clamp(56px, 8vh, 96px);
  text-align: center;
}
.protocole__title {
  font-size: clamp(34px, 4.4vw, 64px);
  color: var(--fg);
}
.protocole__title em { color: var(--accent); }
.protocole__head .lede {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.spine {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
}
/* La moelle : un filet vertical qui s'efface aux deux extremites, pour
   qu'elle semble traverser la section plutot que d'y etre posee. */
.spine::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    rgba(201, 162, 74, 0) 0%,
    rgba(201, 162, 74, 0.55) 12%,
    rgba(201, 162, 74, 0.55) 88%,
    rgba(201, 162, 74, 0) 100%);
}

.vertebra {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  min-height: clamp(150px, 20vh, 210px);
}
.vertebra__node {
  grid-column: 2;
  justify-self: center;
  width: 13px; height: 13px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow:
    0 0 0 5px rgba(12, 32, 28, 1),
    0 0 18px 3px rgba(201, 162, 74, 0.5);
}
.vertebra__card { max-width: 42ch; }
.vertebra:nth-child(odd) .vertebra__card {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}
.vertebra:nth-child(even) .vertebra__card {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}
.vertebra__label {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.vertebra__name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  color: var(--fg);
  margin: 0;
  line-height: 1.15;
}
.vertebra__text {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--fg-soft);
  line-height: 1.7;
  margin: 14px 0 0;
}

/* Sous 820px la colonne passe a gauche : garder l'alternance rendrait les
   cartes illisibles sur un ecran etroit. */
@media (max-width: 820px) {
  .spine::before { left: 6px; }
  .vertebra {
    grid-template-columns: 32px 1fr;
    min-height: 0;
    padding: 26px 0;
    align-items: start;
  }
  .vertebra__node { grid-column: 1; justify-self: start; margin-top: 8px; }
  .vertebra:nth-child(odd) .vertebra__card,
  .vertebra:nth-child(even) .vertebra__card {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    max-width: none;
  }
}

/* Accessibilite : l'emeraude de charte (#1E8E76) sur le fond foret (#11332B)
   plafonne a ~3.4:1, sous le seuil AA de 4.5:1 pour du texte courant. La ligne
   « Indication » porte le sens clinique de chaque parcours, elle doit se lire.
   On utilise une teinte plus claire du meme emeraude, mesuree a ~6:1. */
.amenity__indication { color: #3DBFA0; }


/* ============================================================
   HERO — bloc d'accueil animé (au-dessus du scrub)
   ------------------------------------------------------------
   Autonome : aucune dépendance au moteur de scrub, aucune image.
   Deux couches de mouvement.
     1. ENTRÉE, jouée une fois au chargement. Elle est branchée sur
        body.intro-ready / body.is-loaded, que script.js ne pose QUE hors
        prefers-reduced-motion : sans ces classes, l'état par défaut du
        bloc est déjà l'état final, donc rien à désactiver.
     2. AMBIANCE, en boucle : halo qui respire, filaments d'or qui dérivent,
        poussières qui montent. Enfermée dans un @media no-preference.
   Palette et typo : charte Trade Therapy, aucune couleur hors tokens.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  padding: clamp(104px, 12vh, 150px) var(--pad) clamp(56px, 7.5vh, 96px);
  text-align: center;
  isolation: isolate;
}

/* Le raccord avec le scrub : même --bg des deux côtés, on ne voit aucune
   couture ; ce voile éteint juste l'ambiance sur les 22 derniers %. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}

/* ---- Couche d'ambiance ---------------------------------------------- */
.hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero__aura {
  position: absolute;
  left: 50%; top: 46%;
  width: min(150vh, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(201, 162, 74, 0.20) 0%,
      rgba(201, 162, 74, 0.09) 26%,
      rgba(30, 142, 118, 0.05) 48%,
      transparent 68%);
  filter: blur(14px);
}

/* Le faisceau nerveux interactif — quatre filaments d'or qui poursuivent le
   curseur, dessines au canvas (voir initHeroNerf dans script.js).
   Remplace les anciens filaments et poussieres en CSS : garder les deux,
   c'etait deux ambiances qui se marchaient dessus.
   Le canvas est insere par le script UNIQUEMENT au-dessus de 820 px, donc
   cette regle ne s'applique jamais sur mobile — rien a desactiver plus bas. */
.hero__nerf {
  /* FIXE ET PLEIN VIEWPORT, enfant direct de <body> — pas enferme dans .hero.
     Raison : .hero et .scrub ne se superposent JAMAIS (le stage du scrub est
     en sticky SOUS le hero). Un canvas borne au hero ne peut donc pas
     atteindre le cerveau : au moment ou celui-ci devient visible, il tombe
     hors du cadre du canvas et le faisceau y est decoupe — le moment de
     bascule serait invisible.
     En fixe, tout est en espace viewport : le faisceau atteint le cerveau,
     et la conversion de coordonnees disparait.
     z-index 6 : au-dessus des frames du vol (stage sticky, contexte a 0),
     sous la nav (150) et l'ecran de demarrage (200). */
  position: fixed;
  inset: 0;
  /* width/height EXPLICITES et non negociables : <canvas> est un element
     REMPLACE. Contrairement a un div, il ne s'etire pas avec inset:0 — il
     garde sa taille intrinseque de 300x150 et la contrainte de droite est
     ignoree. Sans ces deux lignes le faisceau se dessine dans un timbre-poste
     de 300x150 en haut a gauche, cache sous la nav. */
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 6;
  /* Pilote par le script pendant la convergence vers le cerveau. */
  opacity: 1;
}

/* ---- Contenu --------------------------------------------------------- */
.hero__inner { position: relative; z-index: 2; max-width: 900px; }

.hero__mark {
  width: clamp(38px, 3.9vw, 52px);
  height: auto;
  margin: 0 auto clamp(18px, 2.4vh, 30px);
  opacity: 0.9;
}

.hero__eyebrow { margin-bottom: clamp(14px, 1.8vh, 22px); }

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  /* Le second terme borne le titre par la HAUTEUR de fenetre : sans lui,
     sur un ecran large mais court le bloc depassait d'un ecran et l'invite
     de scroll tombait sous la ligne de flottaison (mesure : 1107px pour un
     viewport de 900). */
  font-size: min(clamp(40px, 6.8vw, 96px), 10.2vh);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
}
.hero__title em { color: var(--accent); font-style: italic; }

/* Le masque : le parent découpe, l'enfant monte depuis sous la ligne. */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__line-in { display: block; will-change: transform; }

.hero__lede {
  font-family: var(--sans);
  font-size: clamp(15px, 1.35vw, 18.5px);
  line-height: 1.78;
  color: var(--fg-soft);
  max-width: 56ch;
  margin: clamp(20px, 2.6vh, 32px) auto 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(24px, 3.2vh, 42px);
}

.hero__ghost {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.hero__ghost:hover { color: var(--fg); border-bottom-color: var(--accent); }

.hero__scroll {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 4.4vh, 62px);
}
.hero__scroll-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll-line {
  width: 1px;
  height: clamp(38px, 5.2vh, 54px);
  background: linear-gradient(var(--accent), transparent);
  transform-origin: top;
}

/* ---- 1. ENTRÉE (jouée une fois) ------------------------------------- */
/* Etat de départ : posé uniquement si script.js a marqué body.intro-ready,
   ce qu'il ne fait pas sous prefers-reduced-motion. Le bloc est donc lisible
   par défaut, même si le JS ne s'exécute jamais. */
body.intro-ready .hero__mark,
body.intro-ready .hero__eyebrow,
body.intro-ready .hero__lede,
body.intro-ready .hero__actions,
body.intro-ready .hero__scroll { opacity: 0; transform: translateY(16px); }
body.intro-ready .hero__line-in { transform: translateY(112%); }
body.intro-ready .hero__scroll-line { transform: scaleY(0); }

body.is-loaded .hero__mark,
body.is-loaded .hero__eyebrow,
body.is-loaded .hero__lede,
body.is-loaded .hero__actions,
body.is-loaded .hero__scroll {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
body.is-loaded .hero__line-in {
  transform: none;
  transition: transform 1.05s var(--ease);
}
body.is-loaded .hero__scroll-line {
  transform: none;
  transition: transform 1s var(--ease);
}

/* Cadence de l'entrée : le sceau, puis l'eyebrow, puis les trois lignes
   du titre qui se lèvent l'une après l'autre, puis le reste. */
body.is-loaded .hero__mark      { transition-delay: .10s; }
body.is-loaded .hero__eyebrow   { transition-delay: .22s; }
body.is-loaded .hero__line:nth-child(1) .hero__line-in { transition-delay: .34s; }
body.is-loaded .hero__line:nth-child(2) .hero__line-in { transition-delay: .44s; }
body.is-loaded .hero__line:nth-child(3) .hero__line-in { transition-delay: .54s; }
body.is-loaded .hero__lede      { transition-delay: .74s; }
body.is-loaded .hero__actions   { transition-delay: .86s; }
body.is-loaded .hero__scroll    { transition-delay: 1.00s; }
body.is-loaded .hero__scroll-line { transition-delay: 1.10s; }

/* ---- 2. AMBIANCE (en boucle) ----------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* L'aura reste : elle est le lit de lumiere sous le faisceau au canvas.
     Les animations des anciens filaments et poussieres sont parties avec eux. */
  .hero__aura     { animation: heroBreathe 9s ease-in-out infinite; }

  .hero__scroll-line { animation: heroCue 2.6s var(--ease) 1.6s infinite; }
}

/* Le halo respire : il enfle et s'éclaircit, puis retombe. C'est le seul
   élément qui bouge lentement — il donne le tempo du bloc. */
@keyframes heroBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.78; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes heroCue {
  0%, 100% { transform: scaleY(1);    opacity: 1; }
  50%      { transform: scaleY(0.55); opacity: 0.45; }
}

/* ---- Petits écrans --------------------------------------------------- */
@media (max-width: 820px) {
  .hero { padding-top: clamp(96px, 14vh, 130px); }
  .hero__title { font-size: clamp(34px, 10.4vw, 56px); }
  .hero__actions { flex-direction: column; gap: 20px; }
  .hero__scroll { margin-top: clamp(38px, 6vh, 60px); }
}


/* ============================================================
   PAGES LÉGALES — mentions légales / confidentialité / CGV
   Gabarit éditorial sobre : une colonne de lecture, même charte.
   `.page__fill` marque les champs d'identité que Farid doit fournir :
   ils sont volontairement visibles, pour qu'un oubli se voie.
   ============================================================ */

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(130px, 18vh, 190px) var(--pad) clamp(70px, 10vh, 110px);
}
.page__title {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  margin: 0 0 clamp(30px, 4vh, 48px);
}
.page h2 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 28px);
  color: var(--fg);
  margin: clamp(38px, 5vh, 56px) 0 14px;
  padding-top: clamp(24px, 3vh, 34px);
  border-top: 1px solid var(--line);
}
.page p, .page__list {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--fg-soft);
  margin: 0 0 16px;
}
.page__list { padding-left: 20px; }
.page__list li { margin-bottom: 12px; }
.page strong { color: var(--fg); font-weight: 500; }
.page a { color: var(--accent); border-bottom: 1px solid rgba(201, 162, 74, 0.35); }
.page a:hover { border-bottom-color: var(--accent); }

/* Champ d'identite non renseigne. En or barre, impossible a rater. */
.page__fill {
  color: var(--accent);
  background: rgba(201, 162, 74, 0.10);
  border: 1px dashed rgba(201, 162, 74, 0.45);
  border-radius: 4px;
  padding: 1px 7px;
  font-family: var(--sans);
  font-size: 0.92em;
}

.page__todo {
  border-left: 2px solid var(--accent);
  background: rgba(201, 162, 74, 0.07);
  padding: 18px 22px;
  margin: 0 0 clamp(30px, 4vh, 44px);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-soft);
}
.page__todo strong { color: var(--accent); }

.page__updated {
  margin-top: clamp(44px, 6vh, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* Liens legaux du pied de page (index + pages legales) */
.footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__links a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__links a:hover { color: var(--fg); border-bottom-color: var(--accent); }

.footer__base--legal {
  padding-top: clamp(30px, 4vh, 44px);
  border-top: 1px solid var(--line);
}


/* ============================================================
   AUTO-DIAGNOSTIC + FAQ
   ============================================================ */

.diag { background: var(--bg-2); padding: clamp(70px, 11vh, 130px) var(--pad); }
.diag__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.diag__lede { margin-left: auto; margin-right: auto; }

.diag__form { margin-top: clamp(34px, 4.6vh, 52px); }
.diag__fields { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.diag__field { display: block; }
.diag__label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.diag__field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  padding: 10px 2px;
  transition: border-color .3s var(--ease);
}
.diag__field input::placeholder { color: var(--muted); }
.diag__field input:focus { outline: none; border-bottom-color: var(--accent); }
.diag__field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.btn--gold {
  align-self: center;
  margin-top: 10px;
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--accent);
  cursor: pointer;
}
.btn--gold:hover { background: transparent; color: var(--accent); transform: translateY(-2px); }
.btn--gold:disabled { opacity: 0.55; cursor: default; transform: none; }

.diag__note { font-size: 13px; color: var(--muted); margin: 20px 0 0; line-height: 1.7; }
.diag__note a { color: var(--fg-soft); border-bottom: 1px solid var(--line); }
.diag__msg { font-size: 14.5px; line-height: 1.7; margin: 18px 0 0; }
.diag__msg--ok { color: var(--accent); }
.diag__msg--err { color: #E0A090; }

.faq { background: var(--bg); padding: clamp(70px, 11vh, 130px) var(--pad); }
.faq__inner { max-width: 780px; margin: 0 auto; }
/* La FAQ n'avait AUCUN titre, seulement un eyebrow : trou dans la hierarchie
   des titres, et section invisible pour qui navigue au lecteur d'ecran.
   Taille calee sur les autres titres de section, centre comme le manifeste. */
.faq__title {
  font-size: clamp(30px, 3.6vw, 46px);
  color: var(--fg);
  text-align: center;
  margin-top: clamp(12px, 1.6vh, 20px);
}

.faq__list { margin-top: clamp(26px, 3.6vh, 42px); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 25px);
  color: var(--fg);
  padding: 26px 44px 26px 0;
  position: relative;
  transition: color .3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* La croix qui bascule en trait : un seul pseudo-element tourne, donc rien
   ne se repeint hors de sa propre boite. */
.faq__q::after,
.faq__q::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 15px;
  height: 1px;
  background: var(--accent);
}
.faq__q::before { transform: translateY(-50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq__q::after { transform: translateY(-50%); }
.faq__item[open] .faq__q::before { transform: translateY(-50%) rotate(0deg); }
.faq__a {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--fg-soft);
  margin: 0;
  padding: 0 44px 28px 0;
  max-width: 62ch;
}

@media (max-width: 820px) {
  .diag__fields { gap: 20px; }
  .btn--gold { align-self: stretch; justify-content: center; }
}

/* ============================================================
   ECRAN DE CHARGEMENT
   ------------------------------------------------------------
   Le vol pese ~110 Mo de frames. On les charge toutes derriere cet
   ecran, puis on ouvre le site : le scrub ne se remplit plus en cours
   de route, il est net et complet des la premiere image.
   Parti pris : pas de barre horizontale mais un fil vertical d'or qui
   s'allume de haut en bas — c'est la moelle du site qui se remplit de
   lumiere. Tout le reste reste silencieux : une seule idee forte.
   ============================================================ */
.boot {
  /* Au-dessus de la nav (z-index 150) : pendant le chargement il n'y a rien
     a naviguer, et une barre de menu flottant sur l'ecran d'attente casse
     l'entree. */
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity .9s var(--ease), visibility .9s;
}
/* Halo d'or tres sourd derriere le bloc : la meme respiration que
   l'etat de repos du hero, pour que l'ouverture soit un enchainement
   et pas un changement de decor. */
.boot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(70vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,162,74,0.13) 0%, rgba(201,162,74,0) 68%);
  animation: bootHalo 4.6s var(--ease) infinite;
}
@keyframes bootHalo {
  0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.09); }
}
.boot.is-done { opacity: 0; visibility: hidden; }

.boot__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.boot__mark { width: 44px; height: 44px; opacity: .92; }
.boot__brand {
  margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.52em; padding-left: 0.52em; text-transform: uppercase;
  color: var(--fg-soft);
}
/* Le fil : 1 px de large, il ne pese rien et se remplit du haut vers le bas. */
.boot__cord {
  position: relative; width: 1px; height: clamp(120px, 22vh, 190px);
  background: var(--line); overflow: hidden; margin: 6px 0;
}
.boot__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, rgba(241,234,217,.95) 0%, var(--accent) 42%, var(--accent) 100%);
  box-shadow: 0 0 10px rgba(201,162,74,.75);
  transition: height .3s var(--ease);
}
.boot__pct {
  margin: 0; font-family: var(--sans); font-size: 28px; font-weight: 300;
  letter-spacing: 0.04em; color: var(--fg); font-variant-numeric: tabular-nums;
}
.boot__unit { font-size: 14px; color: var(--muted); letter-spacing: 0.12em; }
.boot__note {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--muted);
}

/* Pas de scroll tant que le vol n'est pas pret : sinon le visiteur
   traverse un hero vide pendant le chargement. */
body.is-booting { overflow: hidden; height: 100vh; }

@media (prefers-reduced-motion: reduce) {
  .boot::before { animation: none; }
  .boot, .boot__fill { transition: none; }
}

/* ============================================================
   ÉTATS INTERACTIFS — système unique
   ------------------------------------------------------------
   Constat avant cette section : la feuille comptait TROIS règles de focus
   (le champ du formulaire, la FAQ). Ni les CTA, ni la navigation, ni les
   liens de pied de page n'en avaient. Un visiteur au clavier ne voyait pas
   où il se trouvait — alors que le CLAUDE.md du projet exige un état hover,
   focus-visible ET active sur tout élément cliquable, sans exception.

   Parti pris, conforme à la charte « clinique, nocturne, précieuse » :
   un anneau d'or fin, jamais de rebond ni d'effet appuyé. Le geste doit se
   sentir, pas se voir.
   ============================================================ */

/* ---- 1. L'anneau de focus ----
   :focus-visible et non :focus — le contour n'apparaît qu'à la navigation
   au clavier, jamais après un clic à la souris. */
.btn:focus-visible,
.nav__cta:focus-visible,
.nav__brand:focus-visible,
.nav__links a:focus-visible,
.hero__ghost:focus-visible,
.footer__links a:focus-visible,
.contact__row:focus-visible,
.page__list a:focus-visible,
.footer__disclaimer a:focus-visible,
.diag__note a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Les boutons sont des gélules : l'anneau doit épouser leur forme. */
.btn:focus-visible,
.nav__cta:focus-visible {
  border-radius: 999px;
  outline-offset: 4px;
}

/* ---- 2. L'enfoncement ----
   Le survol soulève de 2 px ; le clic repose l'élément. C'est tout : le
   mouvement raconte l'appui sans mimer un bouton physique.
   Seul `transform` est animé — jamais de `transition-all`. */
.btn:active,
.nav__cta:active {
  transform: translateY(0);
}

/* ---- 3. Les liens de texte ----
   Ils n'avaient aucun état. Le soulignement s'épaissit à l'approche plutôt
   que de changer de couleur : plus discret, et lisible pour qui distingue
   mal les nuances d'or. */
.footer__links a,
.diag__note a,
.footer__disclaimer a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .3s var(--ease);
}
.footer__links a:hover,
.diag__note a:hover,
.footer__disclaimer a:hover {
  color: var(--accent);
}

/* ---- 4. Les cibles tactiles ----
   Mesuré à 390 px de large : neuf éléments sous 44 px — la CTA de nav à
   37 px, « Voir le diagnostic » à 25 px, les liens légaux à 18 px. Le seuil
   recommandé est 44 px, en dessous duquel le doigt manque sa cible.
   `pointer: coarse` ne vise que les écrans tactiles : la souris, qui est
   précise, garde la mise en page dense. */
/* WCAG 2.2 AA impose 24 px minimum PARTOUT, souris comprise. Les liens de
   pied de page tombaient a 18 px : sous le seuil meme au clavier-souris. */
.footer__links a,
.diag__note a,
.footer__disclaimer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Le seuil confortable de 44 px vise le tactile ET les petits ecrans. Deux
   conditions plutot qu'une : `pointer: coarse` attrape les telephones et
   tablettes quelle que soit leur largeur, `max-width` attrape les fenetres
   etroites sur machine a souris. La souris sur grand ecran, elle, garde la
   mise en page dense — elle est precise, elle n'a pas besoin d'aide. */
@media (pointer: coarse), (max-width: 820px) {
  .nav__cta,
  .nav__brand,
  .nav__links a,
  .hero__ghost,
  .footer__links a,
  .contact__row {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .diag__field input { min-height: 44px; }
  .btn { padding-top: 18px; padding-bottom: 18px; }
  /* Le pied de page passe en colonne pour que les zones ne se touchent pas. */
  .footer__links { gap: 4px 24px; flex-wrap: wrap; }
}

/* ============================================================
   PIÈCE 05 — LES PIÈCES VERSÉES (témoignages + certificats)
   ------------------------------------------------------------
   La section précédente affirme que les preuves existent ; celle-ci les
   produit. Registre : pièces jointes à un dossier, pas vitrine de résultats.
   Le vert nuit reprend la main après la photo pleine largeur.
   ============================================================ */
.preuves { background: var(--bg); padding: clamp(80px, 12vh, 160px) var(--pad); }
.preuves__inner { max-width: var(--maxw); margin: 0 auto; }
.preuves__head { max-width: 640px; }
.preuves__title { font-size: clamp(32px, 4.2vw, 62px); color: var(--fg); margin-top: 14px; }
.preuves__title em { color: var(--accent); }
.preuves__lede { margin-top: 22px; }

/* ---- Témoignages ----
   Format vertical : les élèves filment au téléphone. Imposer du 16/9 les
   obligerait à recadrer, donc à ne rien envoyer. */
.temoignages {
  list-style: none; padding: 0;
  margin: clamp(40px, 6vh, 72px) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
/* 4/5 et non 9/16 : trois colonnes en 9/16 donnent des blocs de ~700 px de
   haut, plus hauts que beaucoup d'ecrans — un mur avant d'avoir lu un mot.
   Le 4/5 reste un format portrait, il dit « filme au telephone », sans
   ecraser la page. */
.temoignage__ecran {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 4px; background: var(--ink);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
/* `contain` et non `cover` : on ne sait pas dans quel format les eleves
   filmeront. `cover` recadrerait — et sur un temoignage, recadrer, c'est
   risquer de couper le visage de celui qui parle. `contain` laisse des
   bandes plutot que de mutiler l'image. */
.temoignage__ecran video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.temoignage__mot {
  margin: 20px 0 0; padding: 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: var(--fg-soft);
}
.temoignage__qui {
  margin: 12px 0 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- Certificats ---- */
.certificats { margin-top: clamp(56px, 8vh, 100px); border-top: 1px solid var(--line); padding-top: clamp(32px, 4.5vh, 56px); }
.certificats__titre { margin-bottom: 26px; }
.certificats__liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 30px);
}
.certificat {
  aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.certificat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.certificats__note {
  margin: 26px 0 0; max-width: 60ch;
  font-size: 13px; line-height: 1.7; color: var(--muted);
}

/* ---- Marqueur de contenu manquant ----
   Même convention que `.page__fill` des pages légales : ce qui attend un
   fichier de Farid se voit, et se voit comme provisoire. Il ne doit rien
   rester de doré à l'écran le jour de la mise en ligne. */
.preuve__attente {
  display: inline-block; padding: 8px 12px;
  font-family: var(--sans); font-size: 11px; line-height: 1.5;
  letter-spacing: 0.08em; text-align: center;
  color: var(--accent); background: rgba(201, 162, 74, 0.07);
  border: 1px dashed rgba(201, 162, 74, 0.4); border-radius: 3px;
}

@media (max-width: 980px) {
  .temoignages { grid-template-columns: repeat(2, 1fr); }
  .certificats__liste { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .temoignages { grid-template-columns: 1fr; }
}

/* Piège à robots du formulaire.
   `display: none` serait plus simple mais certains automates l'ignorent
   justement parce qu'ils savent que c'est le motif habituel. On le sort du
   flux visuel sans l'annoncer : il occupe zéro place, ne se voit pas, et
   `tabindex="-1"` le retire du parcours clavier. Un humain ne peut donc pas
   le remplir par accident. */
.diag__piege {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   LECTEUR DES TÉMOIGNAGES
   Motif repris de 21st.dev, réécrit en vanilla. Registre volontairement
   sobre : un voile, un cadre, rien qui scintille.
   ============================================================ */
.lecteur { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.lecteur[hidden] { display: none; }
.lecteur__voile {
  position: absolute; inset: 0;
  background: rgba(8, 23, 20, 0.92);
  backdrop-filter: blur(6px);
}
.lecteur__boite {
  position: relative;
  width: min(92vw, 520px);
  max-height: 88vh;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--filet, rgba(241,234,217,0.16));
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.85);
}
.lecteur__video { display: block; width: 100%; max-height: 88vh; background: var(--ink); }
.lecteur__fermer {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px;              /* seuil tactile respecté */
  display: grid; place-items: center;
  font-family: var(--sans); font-size: 26px; line-height: 1;
  color: var(--fg); background: rgba(8, 23, 20, 0.6);
  border: 1px solid rgba(241, 234, 217, 0.22); border-radius: 999px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.lecteur__fermer:hover { background: rgba(8, 23, 20, 0.9); transform: scale(1.06); }
.lecteur__fermer:active { transform: scale(1); }
.lecteur__fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Le bouton de lecture sur la vignette ----
   Un simple triangle d'or. Il n'apparaît que si une vidéo est réellement
   rattachée : une carte vide ne doit pas se présenter comme cliquable. */
.temoignage__ecran { padding: 0; border: 1px solid var(--line); cursor: pointer; }
.temoignage__ecran.is-vide { cursor: default; }
.temoignage__ecran.is-vide .temoignage__play { display: none; }
.temoignage__play {
  position: absolute; left: 50%; top: 50%;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 74, 0.55);
  background: rgba(12, 32, 28, 0.55);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.temoignage__play::after {
  content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--accent);
}
.temoignage__ecran:hover .temoignage__play { transform: scale(1.08); background: rgba(12, 32, 28, 0.8); }
.temoignage__ecran:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .lecteur__fermer, .temoignage__play { transition: none; }
}

/* ---- Le fantôme du cerveau ----
   Le hero paraissait nu, mais y poser une belle image plein écran aurait
   dépensé la révélation du vol : le visiteur aurait vu sa grande image AVANT
   celle qui compte. On pose donc la frame 1 elle-même, à très faible
   opacité — le hero annonce le vol au lieu de le concurrencer.
   Coût : zéro octet. Le fichier est déjà chargé pour le vol. */
.hero__fantome {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;   /* on garde le cerveau, pas la cauda equina */
  opacity: 0.10;
  /* Le flou empêche l'image de se lire comme une image : elle devient une
     présence. Sans lui, on reconnaît la frame et l'effet de surprise du vol
     tombe. */
  filter: blur(6px) saturate(0.8);
  pointer-events: none;
}
/* Un voile qui reprend le fond : les bords de la frame ne doivent jamais
   se deviner, sinon on voit un rectangle au lieu d'une atmosphère. */
.hero__field::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 28%, transparent 0%, var(--bg) 72%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 70%, var(--bg) 100%);
  pointer-events: none;
}
@media (max-width: 820px) {
  /* Sous 820 px la frame n'est pas chargée pour le vol (hero statique) :
     l'afficher ici la ferait télécharger pour rien. */
  .hero__fantome { display: none; }
}

/* ---- CTA magnétique ----
   Le survol des boutons applique un translateY(-2px). Sur une CTA
   magnétique, le script écrit un `transform` en ligne qui l'écraserait :
   les deux se disputeraient la même propriété. On tranche — l'attraction
   REMPLACE le soulèvement, elle dit déjà « viens ».
   La transition ne sert qu'au relâchement : le suivi, lui, est piloté image
   par image et n'a pas besoin d'être adouci. */
[data-aimant] {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1),
              background .35s var(--ease),
              color .35s var(--ease),
              border-color .35s var(--ease);
  will-change: transform;
}
[data-aimant]:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-aimant] { transition: background .35s var(--ease), color .35s var(--ease); }
}

/* ============================================================
   FACE À FACE — l'approche contre les usages du marché
   ------------------------------------------------------------
   Registre volontairement SANS coches vertes ni croix rouges : le contraste
   se fait par la typographie et la lumière, pas par des pictogrammes de
   comparateur. La colonne de gauche est en retrait — teinte sourde, italique,
   filet neutre ; celle de droite porte l'ivoire et l'or.
   C'est la hiérarchie visuelle qui dit qui a raison, pas un symbole.
   ============================================================ */
.face { background: var(--bg-2); padding: clamp(80px, 12vh, 160px) var(--pad); }
.face__inner { max-width: 1040px; margin: 0 auto; }
.face__head { text-align: center; }
.face__title {
  font-size: clamp(30px, 4vw, 58px); color: var(--fg); margin-top: 14px;
}
.face__title em { color: var(--accent); }

.face__grille {
  margin-top: clamp(38px, 5.5vh, 66px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 0;
}

/* Les en-têtes de colonne */
.face__col {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding-bottom: 16px; margin: 0;
  border-bottom: 1px solid var(--line);
}
.face__col--ailleurs { color: var(--muted); }
.face__col--ici { color: var(--accent); }

/* Les lignes. Chaque paire se fait face : la lecture est horizontale, pas
   colonne par colonne — c'est ce qui fait exister la comparaison. */
.face__ailleurs,
.face__ici {
  margin: 0;
  padding: clamp(18px, 2.6vh, 26px) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
}
.face__ailleurs {
  font-family: var(--serif); font-style: italic;
  color: var(--muted);
}
.face__ici {
  font-family: var(--sans);
  color: var(--fg);
}
/* Un filet d'or sur toute la hauteur de la colonne de droite : elle est
   tenue, l'autre est laissée à sa dérive. */
.face__ici { box-shadow: inset 2px 0 0 rgba(201, 162, 74, 0.28); padding-left: clamp(18px, 2.4vw, 30px); }
.face__col--ici { box-shadow: inset 2px 0 0 rgba(201, 162, 74, 0.28); padding-left: clamp(18px, 2.4vw, 30px); }

@media (max-width: 720px) {
  /* En une colonne, on empile chaque paire : la pratique, puis la réponse.
     Le filet d'or reste le seul repère — il dit lequel des deux est la
     position du cabinet. */
  .face__grille { grid-template-columns: 1fr; row-gap: 0; }
  .face__col--ailleurs { display: none; }
  .face__col--ici { margin-bottom: 4px; }
  .face__ailleurs { border-bottom: 0; padding-bottom: 6px; }
  .face__ici { margin-bottom: 6px; }
}

/* ---- Bouton de lecture du hero ----
   Il donne accès à la présentation dès la première seconde, sans déplacer le
   vol ni concurrencer la CTA. D'où sa discrétion : pas de fond plein, pas
   d'or plein — un anneau fin et un libellé en teinte sourde. La hiérarchie
   reste « demander mon bilan » d'abord, « qui je suis » ensuite.
   La durée est affichée à dessein : on clique plus volontiers sur un
   engagement connu que sur une durée inconnue. */
.hero__video {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(22px, 3vh, 34px);
  padding: 8px 8px 8px 0;
  background: none; border: 0;
  color: var(--fg-soft); text-align: left;
  cursor: pointer;
  transition: color .35s var(--ease);
}
.hero__video[hidden] { display: none; }
.hero__video-rond {
  position: relative; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(201, 162, 74, 0.5);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.hero__video-rond::after {
  content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--accent);
}
.hero__video-texte {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.hero__video-duree {
  font-size: 10px; font-weight: 400; letter-spacing: 0.14em;
  color: var(--muted); text-transform: none;
}
.hero__video:hover { color: var(--fg); }
.hero__video:hover .hero__video-rond {
  transform: scale(1.07);
  border-color: var(--accent);
  background: rgba(201, 162, 74, 0.09);
}
.hero__video:active .hero__video-rond { transform: scale(1); }
.hero__video:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .hero__video, .hero__video-rond { transition: none; }
}