/* ============================================================
   The Maths Tailor — landing (Phase K) storytelling styles
   Prolonge assets/site.css. Rien ici ne cache de contenu par
   défaut : les états initiaux d'animation sont posés en JS
   (gsap.set) pour que la page reste lisible sans JS.
============================================================ */

/* Le header est fixe : les ancres (#gather, #close...) doivent s'arrêter
   sous lui plutôt que dessous. */
section[id] { scroll-margin-top: 92px; }

/* ---- rail de progression des 3 actes (desktop only) ---- */
.act-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 18px;
  pointer-events: none;
}
@media (min-width: 1280px) {
  .act-rail { display: flex; }
}
.act-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  opacity: 0.4;
  transition: opacity .35s ease;
}
/* Couleur unique lisible sur les deux familles de fond (paper et navy) :
   un mix-blend-mode ne marcherait pas ici, .act-rail etant fixed + z-index,
   il forme son propre contexte d'empilement et ne blende avec rien. */
.act-rail-item .act-rail-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  transition: color .35s ease;
}
.act-rail-item.is-active .act-rail-label { color: var(--gold); }
.act-rail-item .act-rail-dot {
  height: 7px;
  width: 7px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  transition: background .35s ease, transform .35s ease;
  flex: none;
}
.act-rail-item.is-active { opacity: 1; }
.act-rail-item.is-active .act-rail-dot { background: var(--gold); transform: scale(1.35); }

/* ---- indice de scroll du hero ---- */
.scroll-hint { transition: opacity .45s ease; }
.scroll-hint.is-gone { opacity: 0 !important; pointer-events: none; }
.scroll-hint svg { animation: hint-bob 2.1s ease-in-out infinite; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---- verbes du hero (I gather. I analyse. I build.) ---- */
.verb-line { display: inline-flex; flex-wrap: wrap; gap: 0.55em; }

/* ---- ordre d'empilement hero vs scene GATHER epinglee (fix glitch scroll-fou) ----
   La scene GATHER est epinglee par ScrollTrigger en `position:fixed` (pinType fixed,
   desktop). Un element fixed cree son propre contexte d'empilement mais, a z-index
   auto, il peint dans l'ordre de l'ARBRE : #gather etant APRES #hero dans le DOM,
   l'hexagone fixed peignait un frame AU-DESSUS du hero pendant le (de)pin quand on
   alternait des scrolls violents (retard de de-pin). On fixe un ordre EXPLICITE : le
   hero peint toujours au-dessus de l'etage. z-index 5 = au-dessus de la scene (auto=0)
   mais SOUS le header/rail (40), les infobulles (45) et la pill CTA (60). #gather reste
   a z-index auto pour ne PAS passer au-dessus de #analyse (qui le suit dans le DOM) et
   ne pas creer un glitch symetrique cote ANALYSE. Sans JS : pas de pin, donc sans effet. */
#hero { position: relative; z-index: 5; }

/* ============================================================
   Scène GATHER
   Hauteurs réservées en CSS : la scène occupe la même place
   avec ou sans JS (aucun layout shift au chargement de GSAP).
============================================================ */
/* Pas de `contain` ici : la scène est l'élément épinglé par ScrollTrigger
   (position:fixed sur desktop), et la containment paint casserait le pin. */
.gather-scene {
  position: relative;
  height: 400px;
  overflow: hidden;           /* garde-fou anti overflow horizontal à 375px */
  overflow: clip;
}
@media (min-width: 640px) { .gather-scene { height: 460px; } }
/* Bornee au viewport : la scene est epinglee sur desktop, elle ne doit
   jamais depasser la hauteur visible (portables ~700px inclus). */
@media (min-width: 1024px) { .gather-scene { height: min(640px, 72vh); } }

/* Pile centrale : le "moteur".
   Centrage par marges negatives et non par translate(-50%,-50%) : le
   transform reste entierement disponible pour GSAP (qui le reecrit). */
.gather-engine {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -95px;
  margin-top: -95px;
  width: 190px;
  height: 190px;
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .gather-engine { width: 240px; height: 240px; margin-left: -120px; margin-top: -120px; }
}
.gather-engine svg { display: block; height: 100%; width: 100%; overflow: visible; }

/* halo derrière le moteur */
.gather-engine::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(194,161,77,0.16) 0%, transparent 62%);
  pointer-events: none;
}

/* ---- feuilles de past papers ---- */
.paper-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -34px;      /* centrage sans transform : le transform est réservé à GSAP */
  margin-top: -46px;
  width: 68px;
  height: 92px;
  z-index: 1;
  will-change: transform, opacity;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .paper-sheet { width: 82px; height: 110px; margin-left: -41px; margin-top: -55px; }
}
.paper-sheet svg { display: block; height: 100%; width: 100%; }

/* Sans JS (ou GSAP en échec) : les feuilles restent une composition
   statique lisible autour du moteur, jamais un tas illisible au centre. */
.paper-sheet { transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--sr, 0deg)); }

.gather-scene[data-animated="true"] .paper-sheet { transform: none; }

/* ============================================================
   Etage GATHER + compteurs : palier de conclusion (K1.1)

   L'etage enveloppe la scene ET les compteurs.
   - Desktop : etage = bloc positionne. Le pin tient l'etage ; les compteurs
     sont en OVERLAY (absolute) dans le bas de la scene et emergent a ~63% du
     scrub, puis restent fixes (palier) jusqu'au de-pin. L'overlay n'est arme
     que quand le JS pose data-dwell="desktop" : sans JS / mouvement reduit,
     les compteurs restent en flux normal sous la scene (lisibles, valeurs dures).
   - Mobile : etage = `display:contents` (transparent) => les compteurs
     redeviennent enfants du conteneur .mx-auto et COLLENT (position:sticky)
     le temps d'une plage de scroll. La marge basse des compteurs ouvre cette
     plage (le sticky tient tant que le conteneur descend sous les compteurs).
============================================================ */
.count-plaque .count-value { font-variant-numeric: tabular-nums; }

/* .gather-sticky : wrapper qui, sur mobile+JS, porte la DISTANCE de scroll pendant
   que l'etage COLLE (position:sticky) et tient l'hexagone proche du centre. Hauteur
   nulle ailleurs (no-JS / mouvement reduit / desktop) => aucun trou.
   .gather-stage : desktop = epingle par GSAP (pin) ; mobile = colle dans le wrapper.
   Dans les DEUX cas les compteurs sont en overlay sous le moteur (fade-only). */
.gather-sticky { position: relative; }
.gather-stage { position: relative; }

/* Desktop (>=1024) : INCHANGE (K1.2/K1.3). Compteurs overlay sous le moteur. */
@media (min-width: 1024px) {
  .gather-stage[data-dwell="desktop"] .gather-counts {
    position: absolute;
    left: 0;
    right: 0;
    /* Ancre sous le moteur (centre + demi-hauteur moteur 120px + marge). */
    top: calc(50% + 132px);
    margin: 0;
  }
}

/* Mobile (<1024) + JS actif (data-dwell="mobile" pose par le JS sur le wrapper) :
   l'etage colle, le wrapper donne la distance de scroll, l'hexagone tient au centre.
   Compteurs en overlay compact sous le moteur (fade-only, comme desktop). Sans
   data-dwell (no-JS / mouvement reduit) : wrapper nul, compteurs en flux normal. */
@media (max-width: 1023px) {
  /* hauteur = distance de scroll voulue (2000px) + hauteur de scene (400) : le sticky
     tient exactement sur (hauteur - scene) = 2000px, borne du scrub JS. */
  .gather-sticky[data-dwell="mobile"] { height: calc(2000px + 400px); }
  .gather-sticky[data-dwell="mobile"] .gather-stage {
    position: sticky;
    top: 130px;                        /* px fixe (stable, pas de vh => pas de saut barre iOS) */
  }
  .gather-sticky[data-dwell="mobile"] .gather-counts {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 112px);            /* sous le moteur (190px sur mobile) */
    margin: 0;
    grid-template-columns: repeat(3, 1fr);   /* rangee compacte pour tenir sous l'hexagone */
    gap: 0.5rem;
  }
  .gather-sticky[data-dwell="mobile"] .count-plaque { padding: 0.7rem 0.55rem; border-radius: 14px; }
  .gather-sticky[data-dwell="mobile"] .count-plaque > p:first-child { font-size: 1.7rem; }
  .gather-sticky[data-dwell="mobile"] .count-plaque > p:last-child { margin-top: 0.2rem; font-size: 0.66rem; line-height: 1.2; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .gather-sticky[data-dwell="mobile"] { height: calc(2000px + 460px); }  /* scene = 460 en 640-1023 */
}

/* ============================================================
   Bloc ANALYSE — heatmap méthodes x sessions

   Tout le style structurant de la heatmap vit ICI et non dans des classes
   Tailwind : Tailwind est charge par le Play CDN, qui est un SCRIPT. JS coupe,
   aucune classe utilitaire ne s'applique. Une heatmap habillee en Tailwind
   serait donc une colonne de div nus sans JS, alors que la consigne est
   qu'elle reste entierement lisible.
============================================================ */

/* Meme raison : sans JS, `bg-navy` (Tailwind) ne s'applique pas et le bloc
   deviendrait cream-sur-cream, donc illisible. Le fond est pose en CSS reel.
   La classe `bg-navy` reste sur la section pour ne pas casser l'alternance
   de fonds posee par K0 quand Tailwind est la.

   Corollaire : poser le fond en CSS reel sans reposer AUSSI les couleurs de
   texte donnerait l'inverse (encre-sur-navy, l'intro invisible), puisque
   `text-cream` / `text-gold` sont eux aussi des classes Tailwind. Les valeurs
   ci-dessous sont exactement celles des classes correspondantes : quand
   Tailwind est la, le rendu est inchange (les selecteurs #id l'emportent mais
   posent la meme couleur). */
#analyse { background: var(--navy); }
#analyse .eyebrow { color: var(--gold); }
#analyse h2 { color: var(--cream); }
#analyse h2 .serif-italic { color: var(--gold-soft); }
#analyse .hm-intro { color: rgba(246,241,231,0.7); }

/* Texte reserve aux lecteurs d'ecran. Defini ici et pas via la classe
   Tailwind `sr-only`, pour la meme raison : sans JS, `sr-only` ne s'applique
   pas et le texte deviendrait visible au milieu du libelle. */
.hm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- bascule STEP / TMUA ---- */
.hm-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(246,241,231,0.16);
  background: rgba(9,19,33,0.55);
}
.hm-toggle button {
  border-radius: 999px; padding: 8px 22px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(246,241,231,0.6); background: transparent; border: 0;
  transition: color .25s ease, background .25s ease;
}
.hm-toggle button:hover { color: var(--cream); }
.hm-toggle button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #1a1305;
}

/* ---- pile des deux panneaux ----
   Les deux panneaux occupent la MEME cellule de grille : la hauteur reservee
   est celle du plus grand, donc la bascule ne provoque aucun reflow. Le
   panneau inactif garde sa place (visibility) au lieu d'etre retire du flux
   (display), et visibility:hidden le sort aussi de l'ordre de tabulation. */
.hm-stack { display: grid; }
.hm-panel { grid-area: 1 / 1; min-width: 0; }
.hm-panel.is-off { visibility: hidden; pointer-events: none; }

/* ---- plaques de synthese ---- */
.hm-plaques { display: grid; gap: 1rem; }
@media (min-width: 640px) { .hm-plaques { grid-template-columns: 1fr 1fr; } }
.hm-plaque {
  border: 1px solid rgba(194,161,77,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  border-radius: 16px; padding: 1.15rem 1.35rem;
}
.hm-stat { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.hm-stat-n {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 2.9rem; line-height: 1; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.hm-stat-u { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--gold-soft); }
.hm-stat-c { margin-top: 0.6rem; font-size: 0.88rem; line-height: 1.5; color: rgba(246,241,231,0.7); }

/* ---- la grille ---- */
.hm-wrap {
  --label-w: 118px;
  --cell-h: 30px;
  --cell-max: 58px;
  --hm-gap: 3px;
  margin-top: 2.25rem;
  overflow: clip;            /* garde-fou anti overflow horizontal a 375px */
}
.hm-cap {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: rgba(246,241,231,0.45); margin-bottom: 0.9rem;
}
/* Mobile : --cols-sm colonnes (les plus recentes). Les colonnes masquees le
   sont en display:none, donc le nombre de pistes doit suivre, sinon les
   cellules restantes se tassent sur les premieres pistes d'une grille de 19. */
.hm-grid {
  display: grid;
  grid-template-columns: var(--label-w) repeat(var(--cols-sm), minmax(0, 1fr));
  gap: var(--hm-gap);
  align-items: stretch;
}
@media (max-width: 1023px) { .hm-sm-off { display: none; } }
@media (min-width: 1024px) {
  .hm-wrap {
    --label-w: 200px;
    --cell-h: 34px;
    /* Borne la largeur : sans cela les 9 colonnes du TMUA s'etirent a 120px
       de large sur 34px de haut. */
    --hm-natural: calc(var(--label-w) + var(--cols) * (var(--cell-max) + var(--hm-gap)));
    max-width: var(--hm-natural);
  }
  .hm-grid { grid-template-columns: var(--label-w) repeat(var(--cols), minmax(0, 1fr)); }
}
/* Le rail des 3 actes est `fixed` a droite et n'apparait qu'a partir de
   1280px. La heatmap est le premier contenu de la page a aller jusqu'au bord
   droit du conteneur : sans cette reserve, le libelle « ANALYSE » se pose sur
   les dernieres colonnes (64px de recouvrement mesures a 1280px).
   Le conteneur (max-w-7xl, centre) se degage du rail de lui-meme a partir de
   1440px (16px de marge, qui croit ensuite avec la largeur) : au dela, aucune
   reserve n'est necessaire. La borne est a 1439 et non a 1408 (point de
   croisement theorique) car a 1408 la marge mesuree tombe a 0px pile.
   min() et pas une simple surcharge : les deux bornes doivent s'appliquer,
   sinon la reserve du rail EFFACE la borne naturelle et les 9 colonnes du
   TMUA se remettent a s'etirer. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hm-wrap { max-width: min(var(--hm-natural), calc(100% - 80px)); }
}

.hm-corner { min-height: 1px; }
.hm-year {
  font-size: 10px; text-align: center; align-self: end; padding-bottom: 2px;
  color: rgba(246,241,231,0.42); font-variant-numeric: tabular-nums;
}
.hm-y-lg { display: none; }
@media (min-width: 1024px) {
  .hm-year { font-size: 10.5px; }
  .hm-y-lg { display: inline; }
  .hm-y-sm { display: none; }
}
.hm-label {
  font-size: 10.5px; line-height: 1.3; text-align: right; padding-right: 0.55rem;
  color: rgba(246,241,231,0.8); align-self: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 1024px) { .hm-label { font-size: 12.5px; -webkit-line-clamp: 2; } }

/* Echelle d'intensite : 4 paliers, du quasi-transparent au gold plein.
   Les valeurs reelles vont de 0 a 3 questions par session (verifie sur les
   deux corpus), donc chaque palier correspond a une valeur exacte. */
.hm-c {
  height: var(--cell-h);
  border-radius: 5px;
  background: rgba(246,241,231,0.05);
  border: 1px solid rgba(246,241,231,0.08);
  padding: 0; margin: 0;
}
button.hm-c { cursor: pointer; }
.hm-c[data-v="1"] { background: rgba(194,161,77,0.30); border-color: rgba(194,161,77,0.38); }
.hm-c[data-v="2"] { background: rgba(194,161,77,0.62); border-color: rgba(194,161,77,0.72); }
.hm-c[data-v="3"] { background: var(--gold); border-color: var(--gold-soft); }
button.hm-c:hover { border-color: var(--cream); }
button.hm-c:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* ---- legende + CTA ---- */
/* K-polish (owner 2026-07-26) : le CTA vit SOUS la legende, aligne a gauche avec la
   grille. L'ancien space-between >= 640px expediait le bouton a l'extreme droite du
   conteneur (plus large que la heatmap sur grand ecran) : moche. Toujours colonne. */
.hm-foot { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.hm-legend { display: flex; align-items: center; gap: 8px; }
.hm-legend-t { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,241,231,0.4); }
.hm-legend-s { display: inline-flex; gap: 3px; }
.hm-legend-s i {
  height: 13px; width: 13px; border-radius: 3px;
  background: rgba(246,241,231,0.05); border: 1px solid rgba(246,241,231,0.08);
}
.hm-legend-s i[data-v="1"] { background: rgba(194,161,77,0.30); border-color: rgba(194,161,77,0.38); }
.hm-legend-s i[data-v="2"] { background: rgba(194,161,77,0.62); border-color: rgba(194,161,77,0.72); }
.hm-legend-s i[data-v="3"] { background: var(--gold); border-color: var(--gold-soft); }
.hm-cta { display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 640px) { .hm-cta { flex-direction: row; align-items: center; gap: 1.25rem; } }
/* Le bouton est habille ici et pas en Tailwind : sans JS il doit rester un
   vrai bouton clicable et pas un lien nu. */
.hm-cta-main {
  border-radius: 999px; padding: 0.8rem 1.5rem; font-size: 14.5px;
  text-align: center; text-decoration: none; display: inline-block;
}
.hm-alt {
  font-size: 13.5px; color: rgba(246,241,231,0.6); text-decoration: none;
  border-bottom: 1px solid rgba(246,241,231,0.25); padding-bottom: 2px;
  align-self: flex-start; transition: color .2s ease, border-color .2s ease;
}
.hm-alt:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

/* ---- infobulle (une seule a la fois) ---- */
.hm-tip {
  position: fixed; z-index: 45; pointer-events: none;
  max-width: min(260px, calc(100vw - 16px));
  border-radius: 10px; padding: 8px 11px;
  background: #091321; border: 1px solid rgba(194,161,77,0.5);
  color: var(--cream); font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.8);
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.hm-tip.is-on { opacity: 1; transform: none; }

/* ============================================================
   Bloc BUILD - teaser jouable du schedule

   Meme principe que ANALYSE : Tailwind est charge par le Play CDN (un SCRIPT).
   JS coupe, aucune classe utilitaire ne s'applique. Tout le style dont depend
   la lisibilite du bloc vit donc ICI, fond ET couleurs de texte comprises. Les
   valeurs reposees sont exactement celles des classes Tailwind correspondantes
   (bg-cream, text-ink, text-oxblood, text-muted) : quand Tailwind est la, les
   selecteurs #id l'emportent mais posent la meme couleur, rendu inchange.
   Aucun etat initial cache ici : l'assemblage a l'entree et le reflow au
   changement sont poses en JS (gsap), donc la page reste complete sans JS.
============================================================ */
/* K3.1 : l'etage #method est epingle en position:fixed (pinType fixed). Un fixed a
   z-index auto peint dans l'ordre de l'ARBRE : sur un scroll violent avant le de-pin,
   la composition peignait au-dessus de #build (AVANT #method dans le DOM). Fix = ordre
   de stacking explicite (meme recette que #hero pour la scene GATHER) : #build passe
   au-dessus de l'etage fixed (auto=0), sous header/rail/pill. #power (APRES #method)
   couvre deja l'etage par l'ordre du DOM (glitch symetrique absent, mesure). */
#build { position: relative; z-index: 5; background: var(--cream); }
#build .eyebrow { color: #6E2433; }              /* text-oxblood */
#build h2 { color: var(--ink); }                 /* text-ink */
#build h2 .serif-italic { color: #6E2433; }      /* text-oxblood */
#build .bp-intro { color: #5B6B7B; }             /* text-muted */

.bp { margin-top: 2.75rem; }

/* ---- controles segmentes ---- */
.bp-controls { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
.bp-field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.bp-field-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: #5B6B7B;
}
/* Affordance (K2.2 #5) : piste creusee (inset) + pastille active surelevee (ombre)
   => on lit « ce sont des boutons a bascule » sans texte directif. */
.bp-seg {
  display: inline-flex; gap: 4px; padding: 4px; align-self: flex-start;
  border-radius: 999px; border: 1px solid rgba(21,33,47,0.14);
  background: rgba(21,33,47,0.05);
  box-shadow: inset 0 1px 3px rgba(21,33,47,0.13);
}
.bp-seg button {
  border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  color: #5B6B7B;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.bp-seg button:hover { color: var(--ink); }
.bp-seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #1a1305;
  box-shadow: 0 2px 6px -1px rgba(21,33,47,0.30);
}
.bp-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Nudge one-shot : halo gold qui pulse 2x sur le toggle exam a l'entree du bloc.
   Pose par JS (classe .bp-nudge), retiree a animationend ; off en reduced-motion. */
@keyframes bp-nudge-pulse {
  0%, 100% { box-shadow: inset 0 1px 3px rgba(21,33,47,0.13), 0 0 0 0 rgba(194,161,77,0); }
  45%      { box-shadow: inset 0 1px 3px rgba(21,33,47,0.13), 0 0 0 6px rgba(194,161,77,0.22); }
}
.bp-nudge { animation: bp-nudge-pulse 0.7s ease-in-out 2; }

/* ---- groupe maitrise (K2.1) : 2 chapitres, chacun un toggle 3 etats ----
   Meme principe de lisibilite Play-CDN-off : couleurs reposees ici. Le toggle
   reprend .bp-seg (etat presse = gold, comme les autres controles) ; l'effet de
   maitrise est PORTE par la bande (voir .bp-session[data-state]). */
/* K2.3 : le cluster contraint la largeur des lignes de maitrise a celle de la rangee
   de controles (fit-content). Le bord droit des toggles = bord droit du groupe
   « Sessions a week » (demande owner), plus jamais le bord lointain du conteneur.
   max-width 100% : jamais de debordement quand le viewport est plus etroit. */
.bp-cluster { width: fit-content; max-width: 100%; }
.bp-mastery { margin-top: 1.9rem; }
.bp-mastery .bp-field-label { display: block; margin-bottom: 0.95rem; }
.bp-mrows { display: flex; flex-direction: column; gap: 0.85rem; }
/* Grille [libelle 1fr | toggle auto] DANS le cluster : les 3 labels identiques sur
   les 2 lignes => toggles de meme largeur, colonnes parfaitement alignees. */
.bp-mrow {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.45rem 1.25rem;
}
.bp-mrow-name { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.bp-seg-3 { justify-self: end; }
.bp-seg-3 button { padding: 7px 13px; font-size: 12px; letter-spacing: 0.01em; }
.bp-mastery-note {
  margin-top: 1.05rem; max-width: 560px;
  font-size: 12.5px; line-height: 1.5; color: #5B6B7B;
}
/* K2.3 : plus de reserve rail sur .bp-mastery — le cluster (fit-content, ~largeur de
   la rangee de controles) reste tres loin du rail fixe ; et une max-width ici
   retrancherait 96px DANS le cluster, cassant l'alignement toggles<->Sessions. */
/* mobile : chaque ligne s'empile, le toggle occupe la largeur (aucun debordement) */
@media (max-width: 560px) {
  .bp-mrow { grid-template-columns: 1fr; }
  .bp-seg-3 { justify-self: stretch; display: flex; width: 100%; }
  .bp-seg-3 button { flex: 1 1 0; padding: 8px 6px; font-size: 11.5px; text-align: center; }
}

/* ---- resume vivant ---- */
.bp-cap {
  margin-top: 1.9rem; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: #5B6B7B;
}

/* ---- la bande de semaines ----
   Une seule grille : la semaine 1 (bp-open) occupe toute la premiere rangee
   (grid-column 1 / -1), les semaines compactes s'ecoulent ensuite et
   s'enroulent seules selon la largeur. auto-fill borne la taille des cartes,
   donc 6, 9 ou 12 semaines tiennent sans debordement, jusqu'a 375px. */
.bp-band {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.7rem;
}
/* Le rail des 3 actes est `fixed` a droite des 1280px. La bande est du contenu
   pleine largeur : sans reserve, son bord droit passe sous le libelle du rail
   (recouvrement mesure a 1280px). Le conteneur (max-w-7xl centre) se degage du
   rail de lui-meme a partir de 1440px, donc la reserve ne vaut que sur la
   plage 1280-1439, exactement comme la heatmap K1. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .bp-band { max-width: calc(100% - 96px); }
}

.bp-week { border-radius: 13px; }

/* semaine 1 depliee */
.bp-open {
  grid-column: 1 / -1;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(194,161,77,0.42);
  box-shadow: 0 22px 46px -32px rgba(14,27,44,0.45);
  padding: 1.35rem 1.45rem;
  margin-bottom: 0.3rem;
}
.bp-w-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bp-open .bp-w-num {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 1.4rem; color: var(--ink); line-height: 1;
}
.bp-w-tag {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: #7c611b; background: rgba(194,161,77,0.16);
  border: 1px solid rgba(194,161,77,0.45); border-radius: 999px; padding: 4px 11px;
  white-space: nowrap;
}
.bp-w-sub { margin-top: 0.35rem; font-size: 12.5px; color: #5B6B7B; }
.bp-sessions {
  margin-top: 1rem; list-style: none; padding: 0;
  display: grid; gap: 0.55rem;
}
/* 1 colonne < 1024 (l'accordeon se deplie proprement, sous la carte) ; 2 colonnes
   >= 1024 (le popover flotte sans casser la grille). Breakpoint = 1024, cf. K2.2 #4. */
@media (min-width: 1024px) { .bp-sessions { grid-template-columns: 1fr 1fr; } }

/* La session est un WRAPPER relatif (ancre du popover) ; le bouton EST la carte. */
.bp-session { position: relative; }
.bp-session-btn {
  display: flex; gap: 0.75rem; align-items: flex-start; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 0.7rem 0.8rem; border-radius: 11px;
  background: var(--cream); border: 1px solid rgba(21,33,47,0.07);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.bp-session-btn:hover { border-color: rgba(194,161,77,0.55); background: #fff; }
.bp-session-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bp-s-n {
  flex: none; height: 24px; width: 24px; border-radius: 999px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #1a1305; background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  font-variant-numeric: tabular-nums;
}
.bp-s-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-s-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.bp-s-meta { font-size: 11.5px; color: #5B6B7B; line-height: 1.3; }
/* chevron = seule affordance visuelle « cliquable » (masque en no-JS). */
.bp-s-chevron {
  flex: none; align-self: center; margin-left: auto;
  height: 7px; width: 7px; transform: rotate(-45deg);
  border-right: 2px solid rgba(21,33,47,0.35); border-bottom: 2px solid rgba(21,33,47,0.35);
  transition: transform .2s ease, border-color .2s ease;
}
.bp-session-btn[aria-expanded="true"] .bp-s-chevron { transform: rotate(45deg); border-color: var(--gold); }

/* Panneau detail = extrait marketing. Mobile (< 1024) : accordeon en flux (margin-top).
   Desktop (>= 1024) : popover ancre a la carte, au-dessus du reste (z-index). Masque
   par [hidden] ; ne JAMAIS poser `display` sur .bp-detail sinon [hidden] serait neutralise. */
.bp-detail {
  margin-top: 6px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(194,161,77,0.42);
  box-shadow: 0 18px 40px -24px rgba(14,27,44,0.5);
  padding: 0.7rem 0.85rem;
}
.bp-extract { margin: 0; font-size: 12.5px; line-height: 1.5; color: #33404e; }
.bp-extract em { font-style: normal; font-weight: 700; color: var(--ink); }
.bp-extract i { font-style: italic; }
@media (min-width: 1024px) {
  .bp-detail {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; margin-top: 0;
  }
  /* K2.4 : flip vers le HAUT quand l'ouverture vers le bas deborderait de la carte
     Week 1 (session de la rangee du bas) ou du viewport. Le panneau recouvre alors la
     session du dessus, DANS la carte => stacking sain, plus de rognage par la timeline
     (bloc suivant dans le DOM). Decide a l'OUVERTURE par mesure JS (jamais code en dur),
     via top/bottom, JAMAIS via display (piege [hidden]+display). Mobile inchange : aucune
     regle .bp-detail-up hors de ce media, et le JS ne pose la classe qu'en mode popover. */
  .bp-detail.bp-detail-up { top: auto; bottom: calc(100% + 4px); }
}

/* ---- effet de maitrise projete sur les sessions (K2.1) : ordre = signal principal,
   teinte du badge + libelle le renforcent. gold (normal) / navy (a apprendre) /
   gris estompe (deja maitrise, recule). ---- */
.bp-session[data-state="notseen"] .bp-s-n { background: var(--navy); color: var(--cream); }
.bp-session[data-state="notseen"] .bp-s-meta { color: #345273; }
.bp-session[data-state="mastered"] .bp-session-btn {
  background: rgba(246,241,231,0.45); border-color: rgba(21,33,47,0.05);
}
.bp-session[data-state="mastered"] .bp-s-n { background: rgba(21,33,47,0.08); color: #8A96A3; }
.bp-session[data-state="mastered"] .bp-s-meta { color: #93A0AD; }

/* ---- bande compacte des semaines 2..N (remplace les cartes repetitives) ----
   Une seule carte pleine largeur : la fourchette « Weeks 2 to N », un rail de
   N-1 tics (un par semaine, flex:1 => aucun debordement), et la ligne d'honnetete.
   La semaine 1 depliee reste la vedette. */
.bp-rest {
  grid-column: 1 / -1;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(21,33,47,0.09);
  padding: 0.95rem 1.15rem 1.05rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
/* Timeline (K2.2 #6) : ligne horizontale a jalons + fleche vers « Exam ». Les
   segments (flex:1) s'etirent/retrecissent => zero debordement jusqu'a 375 ; les
   jalons ont une largeur fixe. Remplace l'ancien rail de tirets « vide ». */
.bp-timeline { display: flex; align-items: center; padding: 0.1rem 0; }
.bp-tl-node { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; white-space: nowrap; }
.bp-tl-dot {
  height: 9px; width: 9px; border-radius: 999px; flex: none;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(194,161,77,0.16);
}
.bp-tl-label { font-size: 11.5px; font-weight: 700; color: #5B6B7B; letter-spacing: 0.01em; }
.bp-tl-seg { flex: 1 1 0; min-width: 12px; height: 2px; background: rgba(194,161,77,0.5); }
.bp-tl-arrow { position: relative; }
.bp-tl-arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 7px solid rgba(194,161,77,0.75);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.bp-tl-goal {
  flex: none; margin-left: 7px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: #7c611b; background: rgba(194,161,77,0.16);
  border: 1px solid rgba(194,161,77,0.45); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
.bp-rest-note { margin: 0; font-size: 12px; line-height: 1.45; color: #5B6B7B; }
/* mobile : labels un cran plus petits pour tenir la timeline a 375 sans debordement. */
@media (max-width: 560px) {
  .bp-tl-label { font-size: 10.5px; }
  .bp-tl-goal { padding: 3px 8px; }
  .bp-tl-node { gap: 0.3rem; }
}

/* ---- note d'honnetete ---- */
.bp-note {
  margin-top: 1.5rem; max-width: 640px;
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: #5B6B7B;
}
.bp-note::before {
  content: ""; flex: none; margin-top: 7px; height: 6px; width: 6px;
  border-radius: 999px; background: var(--gold);
}

/* ---- CTA ---- */
.bp-cta { margin-top: 1.9rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.bp-cta-btn {
  border-radius: 999px; padding: 0.85rem 1.6rem; font-size: 15px;
  text-decoration: none; display: inline-block;
}
.bp-cta-sub { font-size: 12.5px; color: #5B6B7B; }

/* ============================================================
   Bloc POWER - la constellation (K4)

   Meme principe que ANALYSE : Tailwind est un SCRIPT (Play CDN). JS coupe,
   aucune classe utilitaire ne s'applique. Le fond ET les couleurs de texte
   du bloc sont donc reposes ici (memes valeurs que bg-navy / text-gold /
   text-cream / text-cream-70). Le SVG est lisible sans JS : ses etats FINAUX
   sont les valeurs par defaut (rayons traces via stroke-dashoffset 0, noeuds
   opacite 1). Le JS ne pose l'etat initial (gsap.set) que si l'anim va jouer.
============================================================ */
#power { background: var(--navy); }
#power .eyebrow { color: var(--gold); }                      /* text-gold */
#power h2 { color: var(--cream); }                           /* text-cream */
#power h2 .serif-italic { color: var(--gold-soft); }         /* text-gold-soft */
#power .pw-lede { color: rgba(246,241,231,0.7); }            /* text-cream/70 */

.pw-figure { margin: 3.25rem auto 0; max-width: 600px; text-align: center; }
.pw-fig-kicker {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-soft); margin-bottom: 0.6rem;
}
.pw-svg { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; }

/* rayons : traces par defaut (offset 0). stroke-dasharray:1 + pathLength=1
   normalisent le trace : le JS anime strokeDashoffset 1 -> 0 (du centre vers
   le noeud). Sans JS / reduced-motion : offset 0 = rayon entier. */
.pw-ray {
  stroke: rgba(194,161,77,0.32); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 1;
}
.pw-hub-title {
  fill: var(--cream); font-family: 'Fraunces', Georgia, serif;
  font-weight: 500; font-size: 22px;
}
.pw-chip { fill: #091321; stroke: rgba(194,161,77,0.6); stroke-width: 1.5; }
.pw-dot { fill: var(--gold); transition: fill .18s ease; }
.pw-hit { fill: transparent; }
.pw-node-g { cursor: default; }
.pw-node-g:hover .pw-dot,
.pw-node-g:focus-visible .pw-dot { fill: var(--cream); }
.pw-node-g:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 999px; }

.pw-years {
  margin-top: 1.7rem; font-size: 12.5px; letter-spacing: 0.03em; line-height: 1.75;
  color: rgba(246,241,231,0.5); font-variant-numeric: tabular-nums;
}
.pw-close {
  margin-top: 0.85rem; font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem; line-height: 1.4; color: rgba(246,241,231,0.82);
}
.pw-close-em { color: var(--gold-soft); font-style: italic; }

/* infobulle « STEP · AAAA » (reutilise la logique du hm-tip K1). */
.pw-tip {
  position: fixed; z-index: 45; pointer-events: none; white-space: nowrap;
  border-radius: 999px; padding: 6px 13px;
  background: #091321; border: 1px solid rgba(194,161,77,0.55);
  color: var(--cream); font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.8);
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.pw-tip.is-on { opacity: 1; transform: none; }

/* ============================================================
   Bloc ENGINE - le plan frequence x maitrise (K4)

   Comme BUILD : fond ET couleurs de texte reposes ici (bg-cream / text-oxblood
   / text-ink / text-muted). Le SVG est lisible sans JS (etats finaux par
   defaut : points opaques, quadrant visible). Le JS ne fait qu'orchestrer
   l'entree (points qui se posent, quadrant qui s'allume en dernier).
============================================================ */
#engine { background: var(--cream); }
#engine .eyebrow { color: #6E2433; }                         /* text-oxblood */
#engine h2 { color: var(--ink); }                            /* text-ink */
#engine h2 .serif-italic { color: #6E2433; }                 /* text-oxblood */
#engine .en-lede { color: #5B6B7B; }                         /* text-muted */

.en-figure { margin: 3.25rem auto 0; max-width: 640px; }
.en-svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }

.en-axis { stroke: rgba(21,33,47,0.26); stroke-width: 1.5; }
.en-arrow { fill: rgba(21,33,47,0.32); }
.en-axis-t {
  fill: #5B6B7B; font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 700;
}
/* quadrant « souvent x pas encore solide » = la semaine 1. */
.en-zone { fill: rgba(194,161,77,0.13); stroke: rgba(194,161,77,0.55); stroke-width: 1.4; stroke-dasharray: 5 4; }
.en-zone-label { fill: #7c611b; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }

/* points : couleur = maitrise ILLUSTRATIVE (memes signaux que BUILD). */
.en-pt { transition: stroke .16s ease; }
.en-shaky   .en-pt { fill: var(--gold); }
.en-shaky   .en-num { fill: #1a1305; }
.en-notseen .en-pt { fill: var(--navy); }
.en-notseen .en-num { fill: var(--cream); }
.en-mastered .en-pt { fill: #ccd3d9; }        /* estompe (deja maitrise, recule) */
.en-mastered .en-num { fill: #5B6B7B; }
.en-num { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.en-hit { fill: transparent; }
.en-pt-g { cursor: default; }
.en-pt-g:hover .en-pt,
.en-pt-g:focus-visible .en-pt { stroke: rgba(21,33,47,0.55); stroke-width: 2.5; }
.en-pt-g:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 999px; }

/* legende : numero -> methode reelle + frequence reelle (agregat autorise). */
.en-legend {
  list-style: none; margin: 1.7rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.6rem;
}
@media (min-width: 560px) { .en-legend { grid-template-columns: 1fr 1fr; } }
.en-legend li { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.en-chip {
  flex: none; height: 22px; width: 22px; border-radius: 999px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.en-chip.en-shaky { background: var(--gold); color: #1a1305; }
.en-chip.en-notseen { background: var(--navy); color: var(--cream); }
.en-chip.en-mastered { background: #ccd3d9; color: #5B6B7B; }
.en-leg-t { font-size: 13px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-leg-f { margin-left: auto; flex: none; font-size: 11.5px; color: #5B6B7B; font-variant-numeric: tabular-nums; }

.en-note { margin-top: 1.5rem; max-width: 540px; font-size: 12.5px; line-height: 1.55; color: #5B6B7B; }
.en-link { color: #6E2433; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(110,36,51,0.35); }
.en-link:hover { border-color: #6E2433; }

.en-tip {
  position: fixed; z-index: 45; pointer-events: none; white-space: nowrap;
  border-radius: 999px; padding: 6px 13px;
  background: #0E1B2C; border: 1px solid rgba(194,161,77,0.5);
  color: var(--cream); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  box-shadow: 0 14px 34px -14px rgba(14,27,44,0.6);
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.en-tip.is-on { opacity: 1; transform: none; }

/* ============================================================
   Bloc METHOD - le « tilt » (K3)

   Fond clair (bg-paper). Tailwind etant un SCRIPT (JS coupe = aucune classe
   utilitaire), les couleurs de texte du bloc sont reposees ici (oxblood / ink),
   comme #engine. La scene est centree et bornee (max-width) : jamais au bord
   droit, donc aucune reserve rail. Etats FINAUX = defauts CSS/HTML (question
   surlignee, connexion tracee, noeud + carte visibles) ; le JS ne pose l'etat 0
   que si l'anim va jouer.
============================================================ */
#method { background: var(--paper); }
#method .eyebrow { color: #6E2433; }         /* text-oxblood */
#method h2 { color: var(--ink); }            /* text-ink */
#method h2 .serif-italic { color: #6E2433; } /* text-oxblood */
#method p.text-muted { color: #5B6B7B; }     /* text-muted (repost, cf. piege CDN) */

/* ---- maintien de la scene (K3.1) : pin desktop / sticky mobile, pattern GATHER ----
   .mt-sticky : wrapper qui, sur mobile+JS, porte la DISTANCE de scroll pendant que
   l'etage COLLE (position:sticky). Hauteur nulle ailleurs (no-JS / mouvement reduit /
   desktop) => aucun trou. .mt-stage : desktop = epingle par GSAP (pin) ; mobile = colle.
   AUCUNE marge sur ces elements ni sur .mt-scene : l'ecart intro<->scene est porte par
   l'intro (`mb-14 lg:mb-16`), sinon margin-collapse a l'engagement du pin (K1.3). */
.mt-sticky { position: relative; }
.mt-stage { position: relative; }
.mt-scene { margin: 0 auto; max-width: 600px; text-align: center; }

/* Mobile (<1024) + JS actif (data-dwell="mobile" pose par le JS sur le wrapper) :
   l'etage colle (top px fixe, stable barre iOS), le wrapper donne la distance de scroll,
   le scrub court sur la plage collee (hauteur wrapper - hauteur etage). Sans data-dwell
   (no-JS / mouvement reduit) : wrapper nul, composition en flux normal. */
@media (max-width: 1023px) {
  /* hauteur = distance de scroll voulue (1300px) + reserve de scene (560px) : le sticky
     tient sur (hauteur - etage), borne du scrub JS (qui mesure l'etage reel). */
  .mt-sticky[data-dwell="mobile"] { height: calc(1300px + 560px); }
  .mt-sticky[data-dwell="mobile"] .mt-stage { position: sticky; top: 100px; }
}

.mt-cap {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: #7c611b; margin-bottom: 1.05rem;
}

.mt-q-lead { font-size: 0.98rem; color: #5B6B7B; letter-spacing: 0.01em; }
.mt-expr {
  margin-top: 0.5rem;
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: clamp(1.85rem, 6.2vw, 2.55rem);
  color: var(--ink); line-height: 1.16; letter-spacing: 0.01em;
}
.mt-expr sup { font-size: 0.6em; }
.mt-op { color: #6b7885; padding: 0 0.1em; }

/* fragment surligne : le marqueur « surligneur » de la DA produit. Le voile gold
   est un ELEMENT reel (.mt-frag-hl), pas un pseudo : le JS l'anime scaleX 0 -> 1
   (balayage gauche->droite, GSAP fiable sur un transform). Etat FINAL = scaleX(1)
   = surligne plein (defaut, no-JS / reduced-motion). */
.mt-frag { position: relative; display: inline-block; padding: 0 0.06em; color: var(--ink); }
.mt-frag-ink { position: relative; z-index: 1; }
.mt-frag-hl {
  position: absolute; left: 0; right: 0; bottom: 8%; height: 56%; z-index: 0;
  background: rgba(194,161,77,0.42); border-radius: 3px;
  transform: scaleX(1); transform-origin: left center;
}

.mt-synapse { display: block; width: 100%; max-width: 430px; height: auto; margin: 0.35rem auto 0; overflow: visible; }

/* traces + connecteur : dasharray:1 + pathLength=1 => le JS anime offset 1->0.
   Sans JS / reduced-motion : offset 0 = trace entier. */
.mt-trace {
  fill: none; stroke: rgba(194,161,77,0.6); stroke-width: 1.6;
  stroke-linecap: round; stroke-dasharray: 1;
}
.mt-stem { stroke: rgba(194,161,77,0.42); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; }
.mt-syn-dots circle { fill: rgba(194,161,77,0.85); }
.mt-hex-o { fill: #FFFFFF; stroke: #C2A14D; stroke-width: 1.7; stroke-linejoin: round; }
.mt-hex-i { fill: none; stroke: rgba(194,161,77,0.5); stroke-width: 1; stroke-linejoin: round; }
.mt-hex-core { fill: #C2A14D; }
.mt-spark { fill: none; stroke: #D9BE70; stroke-width: 2; opacity: 0; }  /* transitoire : defaut invisible */

/* la carte-methode : le payoff (echo des plaques blanches du site). */
.mt-card {
  margin: 0.5rem auto 0; max-width: 380px;
  background: #FFFFFF; border-radius: 14px;
  padding: 1.1rem 1.4rem 1.25rem;
  border-top: 2px solid rgba(194,161,77,0.6);
  box-shadow: 0 1px 0 rgba(21,33,47,0.04), 0 24px 44px -30px rgba(21,33,47,0.45);
}
.mt-card-k {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: #7c611b;
}
.mt-card-t {
  margin-top: 0.3rem; font-family: 'Fraunces', Georgia, serif;
  font-weight: 500; font-size: 1.4rem; color: var(--ink); line-height: 1.15;
}
.mt-card-g { margin-top: 0.5rem; font-size: 1.02rem; line-height: 1.5; color: #3f4d5a; }
.mt-u { font-weight: 600; color: var(--ink); white-space: nowrap; }
.mt-u sup { font-size: 0.66em; }

.mt-close {
  margin-top: 1.9rem; font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem; line-height: 1.4; color: var(--ink);
}
.mt-close-em { color: #6E2433; font-style: italic; }

/* ============================================================
   Bloc PRICING - les 3 packs par-exam (K6)

   Meme principe que BUILD/ENGINE : Tailwind est un SCRIPT (Play CDN). JS coupe,
   aucune classe utilitaire ne s'applique. Fond ET couleurs de texte reposes ici
   (bg-paper / text-oxblood / text-ink / text-muted, memes valeurs). Le selecteur
   d'exam reutilise .bp-seg (deja en CSS reel) ; sans JS il est masque (noscript)
   et les cartes TMUA pre-rendues restent lisibles, CTA = liens vers preparation-costs.
============================================================ */
#pricing { background: var(--paper); }
#pricing .eyebrow { color: #6E2433; }            /* text-oxblood */
#pricing h2 { color: var(--ink); }               /* text-ink */
#pricing h2 .serif-italic { color: #6E2433; }    /* text-oxblood */
#pricing .pr-intro { color: #5B6B7B; }           /* text-muted */

/* selecteur d'exam (label + toggle .bp-seg reutilise) */
.pr-exam { margin-top: 2.5rem; display: flex; align-items: center; gap: 0.9rem 1rem; flex-wrap: wrap; }
.pr-exam-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: #5B6B7B;
}

/* grille des 3 cartes : 1 colonne, 3 colonnes des 1024 (breakpoint lg du site).
   auto-hauteur egale (align-items: stretch + flex interne des cartes). */
.pr-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem;
  align-items: stretch;
}
@media (min-width: 1024px) { .pr-grid { grid-template-columns: repeat(3, 1fr); } }
/* Le rail des 3 actes est `fixed` a droite des 1280px ; la grille est du contenu
   pleine largeur. Sans reserve, son bord droit passe sous le libelle du rail
   (comme la bande BUILD). Le conteneur max-w-7xl se degage seul des 1440px :
   reserve sur la plage 1280-1439 uniquement, identique a .bp-band. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .pr-grid { max-width: calc(100% - 96px); }
}

.pr-card {
  position: relative; display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid rgba(21,33,47,0.10);
  border-radius: 18px; padding: 1.6rem 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pr-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(14,27,44,0.45); }
/* carte du milieu mise en avant (badge « Most chosen »). */
.pr-card-feat {
  border: 2px solid var(--gold);
  box-shadow: 0 22px 46px -30px rgba(14,27,44,0.5);
}
.pr-badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #1a1305;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0.95rem; border-radius: 999px; white-space: nowrap;
}
.pr-name {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: #6E2433;
}
.pr-for { color: #5B6B7B; }
/* toggle de facturation Platform (one-off / mensuel) : version compacte du .bp-seg,
   meme affordance (piste creusee + pastille active gold). Masque sans JS (noscript). */
.pr-bill {
  display: inline-flex; gap: 3px; padding: 3px; margin-top: 0.85rem; align-self: flex-start;
  border-radius: 999px; border: 1px solid rgba(21,33,47,0.14);
  background: rgba(21,33,47,0.05); box-shadow: inset 0 1px 3px rgba(21,33,47,0.13);
}
.pr-bill button {
  border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 5px 13px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #5B6B7B;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pr-bill button:hover { color: var(--ink); }
.pr-bill button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #1a1305;
  box-shadow: 0 2px 6px -1px rgba(21,33,47,0.30);
}
.pr-bill button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pr-price-row { margin-top: 0.95rem; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.pr-price {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 2.4rem; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pr-suffix { font-size: 13px; color: #5B6B7B; }
.pr-sub { margin-top: 0.5rem; font-size: 12.5px; line-height: 1.4; color: #5B6B7B; }
.pr-desc { margin-top: 0.95rem; font-size: 14.5px; line-height: 1.55; color: #47535f; flex: 1 1 auto; }
/* CTA = checkout Stripe direct (ou lien preparation-costs sans JS). Habille en CSS
   reel (jamais en Tailwind) : sans JS il doit rester un vrai lien lisible. */
.pr-cta {
  margin-top: 1.5rem; border-radius: 999px; padding: 0.82rem 1.4rem;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em;
  text-align: center; text-decoration: none; display: block; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.pr-cta-gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #1a1305;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 26px -12px rgba(194,161,77,0.6);
}
.pr-cta-gold:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 16px 32px -14px rgba(194,161,77,0.7); }
.pr-cta-ghost { border: 1px solid rgba(21,33,47,0.2); color: var(--ink); background: transparent; }
.pr-cta-ghost:hover { border-color: var(--gold); background: rgba(194,161,77,0.06); }
.pr-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* lien secondaire (comparaison detaillee) + ligne bundle : centres sous la grille. */
.pr-foot { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; }
.pr-compare {
  align-self: center; font-size: 14px; font-weight: 600; color: #6E2433;
  text-decoration: none; border-bottom: 1px solid rgba(110,36,51,0.35);
  padding-bottom: 2px; transition: border-color .2s ease, color .2s ease;
}
.pr-compare:hover { color: #6E2433; border-color: #6E2433; }
.pr-bundle { font-size: 14px; line-height: 1.55; color: #5B6B7B; }
.pr-bundle a {
  color: #6E2433; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(194,161,77,0.6);
}
.pr-bundle a:hover { border-color: #6E2433; }

/* ============================================================
   Bloc CLOSE - embed Cal.com inline (K6)

   Fond sombre pose par .hero-glow (CSS reel de site.css, donc valide Tailwind
   coupe) ; les couleurs de texte (text-gold / text-cream) sont des classes
   Tailwind, reposees ici pour rester lisibles sans JS. Le widget Cal.com est
   pilote par site.js (#cal-inline) ; le <noscript> tient un lien direct.
============================================================ */
#close .eyebrow { color: var(--gold); }             /* text-gold */
#close h2 { color: var(--cream); }                  /* text-cream */
#close h2 .serif-italic { color: var(--gold-soft); } /* text-gold-soft */
.cl-cred { font-size: 1rem; line-height: 1.6; letter-spacing: 0.01em; color: rgba(246,241,231,0.8); }
/* cadre de l'embed (echo du bloc #book d'index.html). */
.cl-frame {
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03); padding: 0.375rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); overflow: hidden;
}
/* fallback no-JS : le lien tient dans la boite vide de l'embed (min-height 380). */
.cl-fallback {
  display: block; padding: 2.4rem 1.25rem; text-align: center;
  color: var(--gold-soft); font-weight: 700; text-decoration: none;
}
.cl-fallback:hover { color: var(--cream); }

/* ============================================================
   Accessibilité : mouvement réduit
   Toute l'animation JS est désactivée côté script ; ici on neutralise
   les animations purement CSS.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }
  .act-rail-item { transition: none; }
  .hm-tip { transition: none; }
  .bp-seg button { transition: none; }
  .bp-nudge { animation: none; }                      /* K2.2 #5 : pas de nudge */
  .bp-session-btn, .bp-s-chevron { transition: none; } /* K2.2 #4 : ouverture instantanee */
  .pw-dot, .pw-tip, .en-pt, .en-tip { transition: none; } /* K4 : hover/tooltip instantanes */
  .pr-card, .pr-cta, .pr-compare, .pr-bill button { transition: none; } /* K6 : hover cartes/CTA/toggle instantanes */
  html { scroll-behavior: auto; }
}