@font-face{font-family:Poppins;src:url("/sas/fonts/Poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url("/sas/fonts/Poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url("/sas/fonts/Poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url("/sas/fonts/RobotoSlab.woff2") format("woff2");font-display:swap}

/* ⚠️ LA PALETTE VIENT DE LA CHARTE — /site/tokens.css, chargée par la vue
   AVANT cette feuille. Le 25 août au matin, les valeurs du site étaient
   RECOPIÉES ici et un banc surveillait la dérive ; le soir même, la recopie a
   été remplacée par la source unique. Une garde constate l'écart après coup,
   une source unique l'empêche.

   CE QUE CE :root DÉCLARE ENCORE, ET POURQUOI :
   . `--ink-soft` et `--paper-strong` : le VOCABULAIRE historique de ces pages,
     en alias des jetons de charte (`var(--ink-2)`, `var(--paper-2)`). Renommer
     les ~40 usages n'aurait rien changé au rendu ; l'alias garde la valeur
     unique sans réécrire les règles.
   . `--line-soft`, `--violet-soft` : sans équivalent dans la charte.
   . `--lumiere` / `--ombre` : les deux polarités des guides — une sémantique
     de parcours, pas de charte. `--lumiere` (#c9971f) est la version LISIBLE
     du `--solar` du site (#efb83f), qui ne passerait pas en texte sur clair.
   . les couleurs propres à ce parcours (familles, cycles, leviers…).

   La bascule chaude du 25 août (demande de Boris) est décrite dans la PR #89 :
   la typographie et la géométrie des boutons coïncidaient déjà avec le site,
   seule la température divergeait. */

:root{
  
  --ink-soft:var(--ink-2);
  
  --paper-strong:var(--paper-2);
  
  
  --line-soft:rgba(23,19,27,.10);
  
  
  --violet-soft:#f0e3ec;
  
  
  

  --fam-effondrement:#7a3b2e;
  --fam-dystopie:#4a4f63;
  --fam-neohumanisme:#1c6e8c;
  --fam-utopie:#2e7d4f;
  --fam-transcendance:#5b4b8a;

  --lumiere:#c9971f;
  --lumiere-soft:#faf1dd;
  --ombre:#1c1420;
  --ombre-soft:#e9e4ea;
}

*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{
  margin:0;font-family:Poppins,system-ui,sans-serif;line-height:1.55;background:
    linear-gradient(var(--paper-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--paper-strong) 1px,transparent 1px),
    var(--paper);
  background-size:34px 34px,34px 34px,auto;
  background-position:-1px -1px;
}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.4}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.demo-bar{position:sticky;top:0;z-index:120;min-height:34px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 10px;flex-wrap:wrap}
.demo-bar .demo-label{font-size:11px;opacity:.6;margin-right:8px}
.demo-bar button{border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;border-radius:16px;padding:3px 9px;font-size:11px}
.demo-bar button.is-active{background:#fff;color:var(--ink)}

.app-shell{min-height:calc(100vh - 34px)}
.app-header{height:64px;display:grid;grid-template-columns:1fr minmax(200px,360px) 1fr;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(245,241,233,.96);position:sticky;top:34px;z-index:80}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.14em}
.brand img{width:28px;height:28px;object-fit:contain}
.journey-progress{font-size:11px;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.09em}
.progress-track{height:3px;background:var(--paper-strong);margin-top:6px;overflow:hidden;border-radius:2px}
.progress-track span{display:block;width:0;height:100%;background:var(--violet);transition:width .35s ease}
.icon-button{justify-self:end;width:44px;height:44px;border:1px solid var(--line);background:var(--white);border-radius:50%;font-size:20px;line-height:1;color:var(--ink)}

main{min-height:calc(100vh - 98px)}
.screen{max-width:1080px;margin:0 auto;padding:40px 28px 72px}
.screen[hidden]{display:none}
.eyebrow{margin:0 0 8px;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.13em;color:var(--violet)}
h1,h2,h3{font-family:"Roboto Slab",Georgia,serif;line-height:1.18;letter-spacing:0;margin:0}
h1{font-size:38px}
h2{font-size:23px}
h3{font-size:16px}
p{margin:0}
.lead{font-size:17px;color:var(--ink-soft)}

.primary-button,.secondary-button{min-height:46px;border-radius:23px;padding:11px 20px;font-weight:750;border:1px solid var(--ink)}
/* Le survol du site : la pilule se soulève et passe au violet. Sans lui, un
   bouton identique au site restait inerte là où le site répond. */
/* ⚠️ `:not(:disabled)` — la règle du dessous le portait déjà, et pour une
   raison : un bouton désactivé qui se soulève et change de couleur se
   présente comme cliquable. `opacity:.4` ne dément pas un mouvement.
   Neuf `disabled` dans chaque app.js : l'état est atteignable. */
.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled){transform:translateY(-2px);background:var(--violet);border-color:var(--violet);color:#fff}
.primary-button,.secondary-button{transition:transform .2s,background .2s,border-color .2s,color .2s}
.primary-button{background:var(--ink);color:#fff}
.primary-button:hover:not(:disabled){background:var(--violet);border-color:var(--violet)}
.secondary-button{background:transparent;color:var(--ink)}
.secondary-button:hover:not(:disabled){border-color:var(--violet);color:var(--violet)}
.text-button{border:0;background:transparent;color:var(--muted);padding:11px 0;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.action-row{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.action-row-solo{justify-content:flex-end}

.guide-cartouche{display:flex;gap:12px;align-items:flex-start;max-width:1080px;margin:0 auto;padding:14px 28px 0}
.guide-cartouche[hidden]{display:none}
.guide-cartouche.is-professeur .guide-say{border-left:4px solid var(--lumiere)}
.guide-cartouche.is-docteur .guide-say{border-left:4px solid var(--ombre)}
.guide-medallion{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:"Roboto Slab",serif;font-weight:700;font-size:15px;color:#fff;background:var(--lumiere)}
.guide-medallion.is-docteur{background:var(--ombre)}
/* Le portrait pixel art remplit le médaillon — même rendu que le Jeu
   (guides.css) : pixelated, sinon le navigateur lisse le pixel art en bouillie.
   Le fond coloré (Lumière/Ombre) reste visible sous la transparence du png. */
.guide-medallion img{width:100%;height:100%;border-radius:50%;object-fit:cover;image-rendering:pixelated}
.guide-say{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px 10px 12px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);max-width:560px}
.guide-say strong{color:var(--ink);font-family:"Roboto Slab",serif;font-weight:700;display:block;font-size:12.5px;margin-bottom:3px;letter-spacing:.04em}
p.guide-say[data-guide-text="professeur"]{border-left:4px solid var(--lumiere);max-width:none}
p.guide-say[data-guide-text="docteur"]{border-left:4px solid var(--ombre);background:var(--ombre-soft);max-width:none}
.video-guide-line{border-left-width:4px;font-style:italic;padding-left:10px;margin-top:6px}
.video-guide-line[data-guide-text="professeur"]{border-left-color:var(--lumiere)}
.video-guide-line[data-guide-text="docteur"]{border-left-color:var(--ombre);background:var(--ombre-soft);padding:8px 10px;border-radius:0 6px 6px 0}
.video-guide-line strong{font-style:normal;color:var(--ink);font-family:"Roboto Slab",serif}

.polarity-tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.04em;border-radius:14px;padding:4px 11px;width:fit-content}
.polarity-lumiere{background:var(--lumiere-soft);color:#7a5c10}
.polarity-ombre{background:var(--ombre-soft);color:var(--ombre)}
.not-tried-hint{display:inline-block;font-size:11px;font-weight:600;color:var(--violet);border:1px dashed var(--violet);border-radius:12px;padding:2px 10px;width:fit-content}
.not-tried-hint[hidden]{display:none}

.home-grid{display:grid;gap:16px;margin-top:26px}
@media (min-width:640px){.home-grid{grid-template-columns:repeat(2,1fr)}}
.home-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--white);display:flex;flex-direction:column;gap:10px}
.home-card.is-active{border-color:var(--violet);box-shadow:var(--shadow)}
.home-card.is-soon{opacity:.55}
.home-status{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--violet)}
.home-card.is-soon .home-status{color:var(--muted)}
.home-resume-banner{margin-top:22px;border:1px dashed var(--violet);border-radius:var(--radius);padding:14px 18px;font-size:14px;color:var(--ink-soft);background:var(--violet-soft)}
.local-tools{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap}

.threshold-hero{display:grid;gap:22px;padding:38px 0 20px}
.hero-meta{display:flex;gap:16px;font-size:12px;color:var(--muted);margin:14px 0 20px}

.choice-list{display:grid;gap:10px;margin-top:18px}
.choice-list button{text-align:left;border:1px solid var(--line);background:var(--white);border-radius:var(--radius);padding:13px 16px;display:flex;flex-direction:column;gap:3px;min-height:44px}
.choice-list button strong{font-family:"Roboto Slab",serif;font-size:15px}
.choice-list button span{font-size:13px;color:var(--muted)}
.choice-list button.is-selected{border-color:var(--violet);background:var(--violet-soft)}
.choice-list button[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-soft)}

.guide-cards{display:grid;gap:16px;margin-top:22px}
@media (min-width:640px){.guide-cards{grid-template-columns:1fr 1fr}}
.guide-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--white);display:flex;flex-direction:column;gap:12px}
.guide-card.is-selected{border-color:var(--violet);box-shadow:var(--shadow)}
.guide-card-head{display:flex;align-items:center;gap:12px}
.guide-card-head .guide-medallion{width:40px;height:40px;font-size:13px}
.guide-card-head h2{font-size:17px}
.guide-function{font-size:12px;color:var(--violet);font-weight:600;margin-top:2px}
.guide-card p{font-size:14px;color:var(--ink-soft)}
.guide-promise{font-family:"Roboto Slab",serif;font-size:14.5px;color:var(--ink);font-weight:700}
.guide-card button{margin-top:auto}

.video-block{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden;margin-top:20px}
.video-frame{aspect-ratio:16/9;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-soft) 100%);display:flex;align-items:center;justify-content:center;position:relative}
.video-frame button{width:58px;height:58px;border-radius:50%;background:#fff;border:0;font-size:20px;color:var(--ink)}
.video-duration{position:absolute;right:12px;bottom:10px;color:#fff;font-size:11px;letter-spacing:.06em}
.video-body{padding:16px 18px}
.video-transcript{margin-top:12px;font-size:13.5px;color:var(--ink-soft);border-top:1px solid var(--line-soft);padding-top:12px;display:grid;gap:8px}
.video-transcript[hidden]{display:none}

.fam-effondrement{border-left-color:var(--fam-effondrement)}
.fam-dystopie{border-left-color:var(--fam-dystopie)}
.fam-neohumanisme{border-left-color:var(--fam-neohumanisme)}
.fam-utopie{border-left-color:var(--fam-utopie)}
.fam-transcendance{border-left-color:var(--fam-transcendance)}

/* ============================================================
   F04 — LA BANDE DES CINQ PHASES

   ⚠️ LA CINQUIÈME CARTE ÉTAIT COUPÉE, ET LA MESURE PRÉCÈDE LA RÈGLE. Audit du
   30 août, §5. Relevé au navigateur sur un viewport de 1 280 px, avant
   correction : `.phase-strip` offrait 1 024 px de cadre pour 1 132 de contenu,
   et la cinquième carte allait de 1 040 à 1 260 — 108 px dehors, sans barre de
   défilement visible, sans flèche, sans rien qui le signale.

   ⚠️ LES DEUX BRANCHES DE L'AUDIT SONT PRISES, CHACUNE OÙ ELLE VAUT. Au large,
   une GRILLE de cinq colonnes : ces cinq phases forment un cycle, les voir
   ensemble EST le propos de l'écran. En dessous, la bande reste une bande — une
   grille y empilerait cinq cartes de 408 px, plus de 2 000 px pour un écran de
   repère, exactement ce que le §7 de l'audit interdit.

   ⚠️ LE SEUIL EST 980 px ET IL EST CALCULÉ : le cadre vaut alors 1 024 px moins
   les gouttières, soit 5 × 198 px par carte — au-dessus de la limite où le titre
   d'une phase se brise en trois lignes. Le descendre ferait rentrer les cinq
   cartes de force, pas les rendre lisibles.
   ============================================================ */
/* ⚠️ PAS DE `scroll-behavior:smooth` ICI, ET C'EST UN RÉSULTAT DE MESURE, PAS UN
   OUBLI. Avec cette déclaration, TOUT défilement programmé de la bande est resté
   sans effet dans le navigateur intégré : clic sur les flèches, `scrollBy` à la
   main, affectation directe de `scrollLeft` — `scrollLeft` valait 0 dans les
   trois cas. Sans elle, la même séquence donne 0 → 228 → 456 → 813 et la position
   suit (« 1 sur 5 » … « 5 sur 5 »). Éprouvé deux fois, images entièrement
   chargées, en réinjectant la règle pour trancher la cause.
   ⚠️ ET JE N'EXPLIQUE PAS TOUT : `.lane-track`, juste en dessous, porte la même
   déclaration ET défile correctement. L'asymétrie reste ouverte. Ce qui est
   établi, c'est le réglage qui marche — l'animation vient du script, qui passe
   `behavior:"smooth"` et respecte `prefers-reduced-motion`. */
.phase-strip{display:flex;gap:8px;overflow-x:auto;margin-top:20px;padding-bottom:6px;scroll-snap-type:x mandatory}
.phase-step{flex:none;width:220px;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden}
.phase-step img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.phase-step-body{padding:12px 14px}
.phase-step h3{font-size:14px}
.phase-step .phase-sub{font-size:12px;color:var(--violet);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.phase-step p{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.phase-carousel-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.phase-position{font-size:12.5px;color:var(--muted);min-width:78px;text-align:center}
@media (min-width:980px){
  /* `overflow:visible` est indispensable : une grille qui garde `overflow-x:auto`
     reste un conteneur de défilement, et le défaut ne ferait que se taire. */
  .phase-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;padding-bottom:0}
  .phase-step{width:auto}
  /* Les commandes disparaissent avec ce qu'elles commandaient : cinq cartes
     visibles n'ont ni précédent, ni suivant, ni position. */
  .phase-carousel-bar{display:none}
}

/* ============================================================
   F05 — UNE FAMILLE À LA FOIS, ET UN PLATEAU QUI RESTE

   ⚠️ MESURÉ AVANT D'ÉCRIRE, SUR LA PRÉPROD :
     375 × 812   → l'écran f05 faisait 2 945 px, cinq couloirs de 413 empilés ;
     1 280 × 900 → il faisait ENCORE 2 715 px.
   Le défaut n'est donc pas mobile : il est le même au large. C'est ce qui décide
   les onglets à TOUTES les largeurs, et non sous un seuil.

   ⚠️ ET LE PLATEAU ÉTAIT INATTEIGNABLE : `#roleSummary` se posait à 2 642 px du
   haut sur mobile, 2 478 au large — trois hauteurs d'écran sous les cartes que
   l'on est en train de classer. On attribuait Peur, Désir et Probable sans jamais
   voir ce qu'on avait déjà attribué. Il devient collant.
   ============================================================ */
.family-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:6px;margin-top:20px}
/* ⚠️ ILS S'ENROULENT PLUTÔT QUE DE DÉFILER, et c'est le point. Une barre
   d'onglets en défilement horizontal cacherait « Transcendance » sur un
   téléphone — on remplacerait un contenu masqué par un autre. Enroulés, les cinq
   sont toujours là, sur deux ou trois rangs. */
.family-tab{min-height:44px;padding:8px 10px;border:1px solid var(--line);border-bottom:3px solid transparent;border-radius:var(--radius);background:var(--white);color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.15;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.family-tab.is-active{color:var(--ink);box-shadow:var(--shadow)}
.family-tab.is-active.fam-effondrement{border-bottom-color:var(--fam-effondrement)}
.family-tab.is-active.fam-dystopie{border-bottom-color:var(--fam-dystopie)}
.family-tab.is-active.fam-neohumanisme{border-bottom-color:var(--fam-neohumanisme)}
.family-tab.is-active.fam-utopie{border-bottom-color:var(--fam-utopie)}
.family-tab.is-active.fam-transcendance{border-bottom-color:var(--fam-transcendance)}
.family-tab-marques{font-size:14px;line-height:1}

.family-lane{margin-top:16px}
/* La ligne de service remplace l'ancien `.family-lane-head` : le nom de la
   famille est désormais sur l'onglet, le répéter ici le ferait lire deux fois.
   Le filet coloré, lui, reste — c'est le rappel de la famille ouverte. */
.family-lane-note{border-left:5px solid var(--line);padding-left:10px;font-size:12px;color:var(--muted)}
.family-lane.fam-effondrement .family-lane-note{border-left-color:var(--fam-effondrement)}
.family-lane.fam-dystopie .family-lane-note{border-left-color:var(--fam-dystopie)}
.family-lane.fam-neohumanisme .family-lane-note{border-left-color:var(--fam-neohumanisme)}
.family-lane.fam-utopie .family-lane-note{border-left-color:var(--fam-utopie)}
.family-lane.fam-transcendance .family-lane-note{border-left-color:var(--fam-transcendance)}
/* ⚠️ LES DEUX FLÈCHES SE POSENT AU NIVEAU DES IMAGES, PAS AU MILIEU DE LA CARTE.
   93 px = la moitié de l'image (220 / 2) moins la moitié du bouton (34 / 2).
   Centrées sur la carte entière elles tombaient à 734, soit 47 px plus bas, dans
   la bande que le plateau collant occupe le plus souvent.

   ⚠️ ET CE N'EST PAS UNE GARANTIE, IL FAUT LE DIRE. Un plateau collé en bas
   couvre TOUJOURS les 165 derniers pixels de la fenêtre : selon la hauteur de
   l'écran et la position de défilement, il peut passer devant les flèches comme
   il passe devant les cartes. J'ai cherché une marge qui dégage à toutes les
   hauteurs — il n'y en a pas, la bande couverte suit la fenêtre et non la page.
   Ce qui est garanti, en revanche : le couloir se fait glisser au doigt (la ligne
   de service le dit), le plateau ne se colle qu'après le premier choix, et une
   flèche atteinte au clavier est ramenée dans la vue par le navigateur. */
.family-lane-row{display:flex;align-items:flex-start;gap:6px;margin-top:10px}
.family-lane-row .lane-nav{margin-top:93px}
.lane-nav{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--white);font-size:15px;line-height:1}
.lane-track{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:4px;scroll-snap-type:x mandatory}
.scenario-card{flex:none;width:220px;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden;display:flex;flex-direction:column}
.scenario-card.has-role{border-color:var(--violet);box-shadow:var(--shadow)}
.scenario-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;flex:none}
.scenario-card-body{padding:10px 12px;display:flex;flex-direction:column;flex:1 1 auto}
.scenario-card h3{font-size:13.5px}
.scenario-card .scenario-tagline{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:4px}
.scenario-video-btn{margin-top:8px;width:100%;border:1px solid var(--line);background:var(--paper-strong);border-radius:8px;padding:5px 8px;font-size:11.5px;display:flex;align-items:center;gap:6px;justify-content:center}
.scenario-roles{margin-top:auto;padding-top:8px;display:flex;gap:5px;flex-wrap:wrap}
.scenario-roles button{flex:1;border:1px solid var(--line);background:var(--white);border-radius:8px;padding:5px 4px;font-size:16px;min-height:32px}
.scenario-roles button[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-soft)}

/* ⚠️ `bottom: 8px` ET NON `bottom: 0` : collé au ras du bord, le plateau paraît
   sorti de la page. Le fond est PLEIN, pas translucide — les cartes qui passent
   dessous se liraient au travers, et c'est un tableau de bord, pas un voile. */
.role-summary{margin-top:18px;display:grid;gap:6px;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow)}
/* ⚠️ IL NE SE COLLE QU'À PARTIR DU PREMIER CHOIX, ET C'EST UNE MESURE QUI LE
   DÉCIDE. Collé dès l'arrivée, il se posait sur le couloir : à 375 × 812 il se
   figeait à 647 alors que les cartes commencent à 532 — on voyait 115 px de
   couloir au lieu de 411. Or tant que rien n'est attribué, il n'a rien à
   suivre : trois lignes « à choisir » ne valent pas de couvrir ce qu'on est venu
   regarder. Dès le premier regard posé, il devient ce que l'audit demande — un
   plateau qui ne quitte plus l'écran. */
.role-summary.is-suivi{position:sticky;bottom:8px;z-index:5}
.role-summary-compte{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--violet)}
.role-summary-row{display:flex;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:var(--radius);padding:7px 10px;font-size:12.5px}
.role-summary-row .role-icon{font-size:16px}
.role-summary-row.is-filled{border-style:solid;border-color:var(--violet)}

/* Le plateau prend 179 px sur un téléphone, soit 22 % de la fenêtre : il se
   resserre sans rien perdre — c'est un tableau de bord, il doit tenir sous les
   cartes qu'il commente, pas leur disputer la place. */
@media (max-width:560px){
  /* ⚠️ LE TITRE PRENAIT LA MOITIÉ DE L'ÉCRAN. Mesuré à 375 × 812 : `h1` à 38 px
     rendait CINQ lignes, et le bloc d'introduction de f05 occupait 486 px avant
     le premier onglet — de sorte que le plateau collant se posait sur les cartes
     au lieu de les accompagner. Ce n'est pas le plateau qu'il fallait déplacer,
     c'est le titre qu'il fallait ramener à la taille d'un téléphone.
     ⚠️ AUCUN MOT N'EST TOUCHÉ : c'est une graduation typographique, pas une
     réécriture. L'éditorial appartient à Codex et à Boris.
     ⚠️ ET CETTE FEUILLE NE SERT QUE LES SCÉNARIOS. Les quatre autres parcours ont
     la leur, avec le même `h1{font-size:38px}` sans palier mobile — c'est une
     part de ce que l'audit appelle « recomposer les écrans longs », et c'est
     signalé plutôt que fait au passage sur 58 écrans non regardés. */
  h1{font-size:29px}
  .lead{font-size:15.5px}
  .role-summary{gap:4px;padding:8px 10px}
  .role-summary-row{padding:5px 8px;font-size:12px}
  .family-tab{font-size:12px;padding:6px 8px}
}

.video-fullscreen{position:fixed;inset:0;background:rgba(14,11,16,.94);z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.video-fullscreen[hidden]{display:none}
.video-fullscreen img{max-width:min(90vw,520px);max-height:60vh;border-radius:var(--radius);object-fit:contain}
.video-fullscreen .video-frame{width:min(90vw,520px);margin-top:14px}
.video-fullscreen-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:18px}
.video-fullscreen-title{color:#fff;font-family:"Roboto Slab",serif;margin-top:16px;font-size:15px;text-align:center}

.signe-block{margin-top:20px;border:1px solid var(--line);border-left-width:5px;border-radius:var(--radius);background:var(--white);padding:16px}
.signe-block .signe-role{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.signe-block h3{font-size:16px;margin-top:2px}
.signe-block .signe-periode{font-size:12px;color:var(--violet);font-weight:600;margin-top:6px}
.signe-block .signe-texte{font-size:13.5px;color:var(--ink-soft);margin-top:6px;font-style:italic}
.signe-block textarea{width:100%;min-height:60px;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-top:10px;resize:vertical;background:var(--white);font-size:13.5px}

.compose-block{margin-top:20px;display:grid;gap:14px}
.compose-step{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:14px 16px}
.compose-step .compose-role{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--violet)}
.compose-step h3{font-size:14.5px;margin-top:2px}
.compose-step textarea{width:100%;min-height:56px;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-top:8px;resize:vertical;background:var(--white);font-size:13.5px}

.factor-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.factor-choices button{border:1px solid var(--line);background:var(--white);border-radius:16px;padding:6px 13px;font-size:12.5px}
.factor-choices button.is-selected{border-color:var(--violet);background:var(--violet-soft)}
.factor-counter{font-size:12px;color:var(--muted);margin-top:8px}

.fields-block{display:grid;gap:18px;margin-top:20px}
.field-group label{display:block;font-family:"Roboto Slab",serif;font-size:15px;margin-bottom:8px}
.field-group textarea{width:100%;min-height:84px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;resize:vertical;background:var(--white)}
.field-note{font-size:12px;color:var(--muted);margin-top:6px}

.synthesis-card{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:22px;display:grid;gap:16px}
.synthesis-block h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:6px}
.synthesis-block p,.synthesis-block ul{font-size:14px;color:var(--ink-soft)}
.synthesis-block ul{margin:0;padding-left:18px}
.local-mark{font-size:12px;color:var(--violet);font-weight:600;margin-top:2px}

.approfondir-block{margin-top:30px;border-top:1px solid var(--line-soft);padding-top:22px}
.approfondir-block h2{font-size:19px}
.approfondir-intro{margin-top:10px}
.approfondir-cards{display:grid;gap:12px;margin-top:16px}
.approfondir-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:14px 16px}
.approfondir-card.is-essentiel{border-color:var(--violet);box-shadow:var(--shadow)}
.approfondir-secondary{display:grid;gap:12px}
@media (min-width:640px){.approfondir-secondary{grid-template-columns:1fr 1fr}}
.approfondir-tag{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--violet);font-weight:600}
.approfondir-card h3{font-size:15px;margin-top:4px}
.approfondir-card p{font-size:13px;color:var(--ink-soft);margin-top:6px}
.approfondir-card .approfondir-path{font-size:11.5px;color:var(--muted);font-family:monospace;margin-top:6px;display:block}
.approfondir-note{font-size:12px;color:var(--muted);margin-top:16px}

.badge-reveal{margin-top:26px;text-align:center;display:grid;justify-items:center;gap:14px}
.badge-medallion{width:112px;height:112px;border-radius:50%;background:conic-gradient(from 0deg,var(--fam-effondrement),var(--fam-dystopie),var(--fam-neohumanisme),var(--fam-utopie),var(--fam-transcendance),var(--fam-effondrement));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.badge-medallion span{width:88px;height:88px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;font-family:"Roboto Slab",serif;font-size:12px;text-align:center;padding:8px}
.badge-reveal.reduced .badge-medallion{background:var(--violet)}
/* Le passage accompli, juste avant ses portes. Centre comme .badge-actions,
   qui le suit : deux blocs alignes autrement se liraient comme deux sujets. */
.badge-passage{max-width:620px;margin:22px auto 4px;text-align:center;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.badge-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.teaser-box{margin-top:26px;border-top:1px solid var(--line-soft);padding-top:18px;font-size:14px;color:var(--ink-soft)}

.modal-overlay{position:fixed;inset:0;background:rgba(23,19,27,.5);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-overlay[hidden]{display:none}
.modal-box{background:#fff;border-radius:var(--radius);padding:24px;max-width:400px;width:100%;box-shadow:var(--shadow)}
.modal-box h2{font-size:19px;margin-bottom:8px}
.modal-box p{font-size:14px;color:var(--ink-soft);margin-bottom:18px}
.modal-actions{display:grid;gap:8px}

.live-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .progress-track span{transition:none}
}

/* ============================================================
   LES ILLUSTRATIONS DE CODEX (25 août, `c41312e`) — trois ancrages :
   la carte (cover-square), le seuil (cover-landscape), le badge.

   Les dix scènes « respirations éditoriales » ne sont PAS branchées : leur
   placement dans les écrans est une intention d'auteur, demandée à Codex.

   ⚠️ CHAQUE IMAGE EST RECADRÉE PAR LE CADRE, JAMAIS DÉFORMÉE — `object-fit:
   cover` partout. Le carré de Codex s'affiche en 3:2 dans la carte : cinq
   carrés pleins feraient de l'accueil une tour, et c'est le recadrage que
   `cover` fait proprement, en gardant le centre. */

.home-card-cover {
  width: calc(100% + 40px);
  /* L'image ÉPOUSE la carte : elle annule le padding (20px) et arrondit
     comme lui. Le -1px de margin-top recouvre le filet du bord. */
  margin: -21px -20px 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.threshold-cover {
  width: 100%;
  max-height: 340px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Le badge est un SIGNE, pas une bannière : petit, centré, cerclé. */
.badge-illustration {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto 14px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--lumiere);
  box-shadow: 0 10px 30px rgba(23, 19, 27, .18);
}

@media (max-width: 560px) {
  .threshold-cover { max-height: 220px; }
  .badge-illustration { width: 104px; height: 104px; }
}