/* ==========================================================================
   BARÈME — Système de design « Salle de contrôle »
   Palette calquée sur le barème du test : cyan = +4, corail = −1, gris = 0
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* `hidden` vient de la feuille du navigateur : la moindre règle d'auteur qui
   pose un `display` la bat. Sans ce !important, `.form{display:grid}` rendait
   visibles les trois formulaires de connexion en même temps. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none;padding:0}

/* ---------- Jetons ---------- */
:root{
  --bg:#F5F7FF;
  --bg-2:#FFFFFF;
  --bg-3:#EEF2FF;

  --ink:#0B1330;
  --ink-2:#3E4A6B;
  --ink-3:#5D6985;   /* 5,0:1 sur le fond clair (était #6B7793, 4,2:1 : sous le seuil AA) */

  --bleu:#2563FF;
  --cyan:#097896;    /* 4,8:1 sur le fond clair (était #0B86A6, 4,4:1 sur les surtitres en petit corps) */
  --cyan-vif:#0EA5C9;
  --cyan-d:#08657E;
  --violet:#6A4CFF;
  --violet-d:#5238D8;
  --coral:#D42B52;   /* 4,9:1 sur blanc (était #E0345C, 4,4:1) */
  --amber:#9E6300;   /* 4,9:1 sur blanc, blanc lisible dessus (était #C77D00, 3,5:1) */
  --mint:#0B7A55;    /* 5,3:1 sur blanc, blanc lisible dessus (était #0E9F6E, 3,4:1) */

  --line:rgba(11,19,48,.1);
  --line-2:rgba(11,19,48,.18);
  --glass:rgba(255,255,255,.72);
  --ombre:0 14px 40px -24px rgba(11,19,48,.35);

  --r-s:10px;
  --r:16px;
  --r-l:24px;
  --r-xl:32px;

  --shell:1180px;
  --pad:clamp(20px,5vw,40px);

  --f-disp:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --piste:var(--piste);
}

/* ---------- Prépa 210 : le même site, l'accent émeraude ----------
   Une seule feuille, les mêmes composants : la page se déclare
   (html[data-site]) et les jetons d'accent changent, rien d'autre. La
   console, écran sombre, reçoit ses tons clairs à part. Contrastes sur
   blanc : #0B7A55 5,3:1 et #075C40 7,6:1 (le cyan de Prépa 600 fait 4,6:1). */
html[data-site="prepa210"]{
  --bg:#F4FAF7;
  --bg-3:#E9F5EF;
  --bleu:#0B7A55;
  --cyan:#0B7A55;
  --cyan-vif:#12A874;
  --cyan-d:#075C40;
  --violet:#0F766E;
  --violet-d:#0B5C56;
  --piste:rgba(14,159,110,.16);
}
html[data-site="prepa210"] .console{
  --cyan:#5CFFC0;--cyan-vif:#5CFFC0;--bleu:#7FE0B8;--violet:#4FD1C5;--mint:#9BFFD9;
  background:linear-gradient(180deg,#0E2A22,#08201A);border-color:rgba(148,255,205,.2)}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--bg);
  /* Pas d'overflow ici. Depuis que html a overflow-x:clip (fin de fichier), un
     overflow sur body ne remonte plus au viewport : body devient le conteneur
     de défilement et tout position:sticky meurt (nav, récit, en-têtes collés).
     Vu en ligne le 07/09/2026. Le clip de html suffit. */
  min-height:100vh;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- Décor de fond ---------- */
.bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0}

.bg-aurora{
  position:fixed;inset:-25%;z-index:0;pointer-events:none;
  filter:blur(90px);opacity:.55;
  background:
    radial-gradient(38% 36% at 18% 14%,rgba(14,165,201,.34),transparent 62%),
    radial-gradient(34% 42% at 82% 8%,rgba(124,92,255,.42),transparent 62%),
    radial-gradient(42% 38% at 62% 78%,rgba(224,52,92,.16),transparent 62%),
    radial-gradient(30% 30% at 8% 72%,rgba(14,159,110,.13),transparent 62%);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-2.5%,0) scale(1.06)}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.02)}
}

.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,255,.06) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 95% 65% at 50% 0%,#000 22%,transparent 78%);
  mask-image:radial-gradient(ellipse 95% 65% at 50% 0%,#000 22%,transparent 78%);
}

.bg-noise{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- Structure ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
main{position:relative;z-index:1}
section{position:relative;z-index:1}
.band{padding-block:clamp(60px,7.2vw,104px)}
.band--tight{padding-block:clamp(46px,5.4vw,76px)}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{font-family:var(--f-disp);color:var(--ink);line-height:1.08;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
/* Plus petit qu'avant : à 4,6 rem, le titre du héros cachait les boutons
   sous la ligne de flottaison, sur téléphone comme sur portable. */
h1{font-size:clamp(2.2rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.95rem,4.3vw,3.05rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.2}
h4{font-size:1.02rem;line-height:1.35;letter-spacing:-.01em}
p{text-wrap:pretty}

/* En ligne, pas en flex : en flex, un <sup>®</sup> devenait une boîte à part
   et se retrouvait seul au milieu quand le texte passait à la ligne. */
.eyebrow{
  font-family:var(--f-disp);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--cyan);
  display:inline-block;line-height:1.5;margin-bottom:18px;
}
.eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:22px;height:1px;margin-right:9px;
  background:linear-gradient(90deg,transparent,var(--cyan))}
.eyebrow sup{font-size:.7em;vertical-align:top;line-height:1}

.lead{font-size:clamp(1.03rem,1.6vw,1.2rem);color:var(--ink-2);max-width:62ch;line-height:1.7}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tint{color:var(--cyan)}
.tint-v{color:var(--violet)}
.tint-c{color:var(--coral)}
.tint-m{color:var(--mint)}
.ink{color:var(--ink)}
.dim{color:var(--ink-3)}
/* Une coupure de ligne qui n'existe que sur téléphone : là où une ligne de titre
   tient de justesse dans une police et pas dans l'autre, on coupe avant. */
@media (min-width:880px){.br-mob{display:none}}

/* Le dégradé glisse lentement dans le texte : la position du fond bouge, le
   texte est toujours couvert — figé, il reste lisible. */
.grad-text{
  background:linear-gradient(104deg,var(--bleu) 0%,var(--cyan-vif) 45%,var(--violet) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:grad-glisse 7s ease-in-out infinite alternate;
}
@keyframes grad-glisse{from{background-position:0% 0}to{background-position:100% 0}}

.head{max-width:66ch;margin-bottom:clamp(38px,5vw,60px)}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow::before{display:none}
.head--center .lead{margin-inline:auto}
.head h2+.lead{margin-top:20px}
/* Un h1 suivi d'un chapo collait au titre : l'interligne du titre etait
   plus grand que l'ecart avec le texte, ce qui se voit tout de suite. */
.head h1+.lead{margin-top:22px}
/* Titre qui accompagne le defilement — uniquement quand il y a deux colonnes.
   Sous 900 px la mise en page passe sur une seule colonne : un titre colle
   qui reste au-dessus du contenu qu'il annonce devient genant. */
.head--stick{margin-bottom:0}
@media (min-width:901px){.head--stick{position:sticky;top:110px}}

/* ---------- Surfaces ---------- */
.panel{
  position:relative;border-radius:var(--r-l);
  background:#FFFFFF;
  border:1px solid var(--line);
  box-shadow:var(--ombre);
  overflow:hidden;
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(142deg,rgba(14,165,201,.55),rgba(124,92,255,.3) 42%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  pointer-events:none;opacity:.6;
}
.panel--flat::before{opacity:.28}
.panel--solid{background:linear-gradient(180deg,var(--bg-3),var(--bg-2))}

.pad{padding:clamp(22px,3.2vw,36px)}
.pad-l{padding:clamp(28px,4.4vw,54px)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:100px;border:1px solid transparent;
  font-family:var(--f-disp);font-weight:600;font-size:.94rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Le dégradé s'arrête à un violet clair (#6A4CFF) : sur le violet profond
   d'avant, le texte presque noir du bouton passait sous le seuil de lisibilité.
   Pas de bordure transparente ni de contour en box-shadow — les deux
   dessinaient un liseré qui se voyait au zoom et donnait un bouton mal rempli.
   Il ne reste qu'une ombre portée, sous le bouton, qui ne borde rien. */
.btn-1{
  background:linear-gradient(118deg,var(--bleu) 0%,#3B82F6 45%,var(--violet) 100%);
  color:#FFFFFF;border:0;
  box-shadow:0 12px 34px -14px rgba(37,99,255,.5);
}
.btn-1:hover{box-shadow:0 18px 44px -14px rgba(37,99,255,.65)}

.btn-2{background:var(--glass);border-color:var(--line-2);color:var(--ink);backdrop-filter:blur(12px)}
.btn-2:hover{border-color:var(--bleu);background:rgba(37,99,255,.06);color:var(--ink)}

.btn-3{padding:0;color:var(--cyan);background:none;font-family:var(--f-disp);font-weight:600;font-size:.94rem;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-3 .arw{transition:transform .3s var(--ease)}
.btn-3:hover .arw{transform:translateX(5px)}

.btn-sm{padding:10px 20px;font-size:.86rem}
.btn-lg{padding:17px 34px;font-size:1rem}
.btn-full{width:100%}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Puces & chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:100px;border:1px solid var(--line-2);
  background:var(--glass);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-2);
}
.chip--cyan{border-color:rgba(14,165,201,.4);background:rgba(14,165,201,.09);color:var(--cyan)}
.chip--coral{border-color:rgba(224,52,92,.4);background:rgba(224,52,92,.09);color:var(--coral)}
.chip--mint{border-color:rgba(14,159,110,.36);background:rgba(14,159,110,.08);color:var(--mint)}
.chip--violet{border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.12);color:#5238D8}

.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dot--pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- Barre de navigation ---------- */
.nav{position:sticky;top:0;z-index:60;transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease)}
.nav.is-stuck{background:rgba(255,255,255,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:76px}

.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;margin-right:auto}
.logo-mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--bleu),var(--violet));
  display:grid;place-items:center;
  font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:#FFFFFF;
  box-shadow:0 8px 26px -8px rgba(14,165,201,.7);
}
.logo-text{font-family:var(--f-disp);font-weight:700;font-size:1.14rem;letter-spacing:-.02em;color:var(--ink)}
.logo-text i{font-style:normal;color:var(--cyan)}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  padding:9px 15px;border-radius:100px;text-decoration:none;
  font-size:.9rem;font-weight:500;color:var(--ink-2);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--glass)}
.nav-links a.is-here{color:var(--cyan);background:rgba(14,165,201,.08)}

.nav-cta{display:flex;align-items:center;gap:10px;flex:none}

.burger{
  display:none;width:42px;height:42px;border-radius:12px;flex:none;
  border:1px solid var(--line-2);background:var(--glass);cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px;position:relative;transition:transform .3s var(--ease),opacity .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{transform:translateY(6px) rotate(45deg)}
.burger.is-open span::after{transform:translateY(-6px) rotate(-45deg)}

.nav-drawer{display:none;border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(22px)}
.nav-drawer.is-open{display:block}
.nav-drawer ul{display:flex;flex-direction:column;padding:14px 0 22px}
.nav-drawer a{display:block;padding:13px 0;font-family:var(--f-disp);font-size:1.05rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.nav-drawer .btn{margin-top:20px;width:100%}

/* Le bouton « Connexion » reste dans la barre JUSQU'AU PLUS PETIT ÉCRAN.
   Jusqu'au 08/09/2026 il disparaissait sous 940 px et n'était nulle part
   ailleurs — ni dans le tiroir : sur téléphone, un membre déjà inscrit ne
   trouvait aucune porte d'entrée. Il rétrécit donc au lieu de s'effacer, et
   garde la hauteur du bouton du menu pour rester une cible tactile. */
@media (max-width:940px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta .btn-2{height:42px;padding:0 18px;font-size:.86rem}
}
@media (max-width:520px){
  .nav-cta .btn-1{display:none}
  .nav-in{gap:12px;height:70px}
  .nav-cta{gap:8px}
  .nav-cta .btn-2{height:40px;padding:0 14px;font-size:.82rem}
}
@media (max-width:380px){
  .nav-in{gap:8px}
  .nav-cta{gap:6px}
  .logo{gap:8px}
  .logo-mark{width:32px;height:32px;border-radius:9px;font-size:.96rem}  /* pas moins : sous 32 px, le banc compte le logo comme une cible tactile trop petite */
  .logo-text{font-size:1rem}
  .nav-cta .btn-2{height:38px;padding:0 12px;font-size:.8rem}
  .burger{width:38px;height:38px}
}

/* ---------- Héros ---------- */
.hero{position:relative;padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,120px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(36px,5vw,64px);align-items:center}
@media (max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}}

.hero h1{margin-bottom:24px}
.hero .lead{margin-bottom:32px}
.hero-note{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);letter-spacing:.02em}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--mint)}

/* Console produit */
/* La console reste un ÉCRAN sombre posé sur la page claire : ses jetons sont
   redéfinis localement, tout ce qu'elle contient s'y adapte de lui-même. */
.console{position:relative;padding:0;overflow:hidden;
  --ink:#EEF3FF;--ink-2:#A9B6D6;--ink-3:#8C9AB8;
  --line:rgba(148,178,255,.14);--line-2:rgba(148,178,255,.26);--glass:rgba(255,255,255,.035);
  --cyan:#2FE6FF;--cyan-vif:#2FE6FF;--bleu:#5EA0FF;--violet:#7C5CFF;--mint:#5CFFC0;--coral:#FF5C7A;
  color:var(--ink-2);background:linear-gradient(180deg,#0F1736,#0A1029);border-color:rgba(148,178,255,.2);
  box-shadow:0 30px 70px -30px rgba(11,19,48,.55)}
.console-bar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
@keyframes flotte{50%{transform:translateY(-8px)}}
.console-bar .lights{display:flex;gap:6px}
.console-bar .lights i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.console-bar .lights i:first-child{background:rgba(224,52,92,.6)}
.console-bar .lights i:nth-child(2){background:rgba(199,125,0,.6)}
.console-bar .lights i:last-child{background:rgba(14,159,110,.6)}
.console-bar .ttl{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.06em}
.console-body{padding:clamp(20px,3vw,30px);display:grid;gap:22px}

.score-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.score-label{font-family:var(--f-disp);font-size:.76rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);margin-bottom:6px}
.score-val{font-family:var(--f-disp);font-weight:700;font-size:clamp(3rem,7vw,4.2rem);line-height:.92;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.score-max{font-family:var(--f-mono);font-size:.82rem;color:var(--ink-2);letter-spacing:.02em}
.delta-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:100px;
  background:rgba(14,159,110,.1);border:1px solid rgba(14,159,110,.34);
  font-family:var(--f-mono);font-size:.82rem;font-weight:500;color:var(--mint);
}

.meter{height:7px;border-radius:100px;background:rgba(37,99,255,.1);overflow:hidden;position:relative}
.meter i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--cyan),var(--violet));width:0;transition:width 1.6s var(--ease)}

.sub-list{display:grid;gap:16px}
.sub-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:14px;align-items:center}
.sub-row .nm{font-size:.86rem;color:var(--ink-2)}
.sub-row .vl{font-family:var(--f-mono);font-size:.78rem;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.sub-bar{height:5px;border-radius:100px;background:rgba(37,99,255,.1);overflow:hidden;grid-column:1/-1;margin-top:3px}
.sub-bar i{display:block;height:100%;border-radius:100px;width:0;transition:width 1.4s var(--ease)}

.timeline{border-top:1px solid var(--line);padding-top:20px}
.timeline-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.05em}
.tl-strip{position:relative;display:flex;gap:3px;align-items:flex-end;height:52px}
/* Le rapport : au-delà de 2 minutes sur une question, c'est un puits de temps.
   La ligne marque le seuil, la barre en cause garde sa couleur (= le résultat). */
.tl-seuil{position:absolute;left:0;right:0;border-top:1px dashed rgba(11,19,48,.35);pointer-events:none}
.tl-seuil::after{content:"2 min";position:absolute;right:0;top:-15px;font-family:var(--f-mono);font-size:.62rem;color:var(--ink-3)}
.tl-strip i.puits{outline:2px solid rgba(11,19,48,.45);outline-offset:1px}
.tl-strip i{flex:1;border-radius:3px;background:linear-gradient(180deg,rgba(14,165,201,.75),rgba(14,165,201,.2));min-height:6px;transition:height 1s var(--ease)}
.tl-strip i.bad{background:linear-gradient(180deg,var(--coral),rgba(224,52,92,.25));box-shadow:0 0 18px rgba(224,52,92,.5)}
.tl-foot{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3)}

/* ---------- Bandeau de preuves ---------- */
.strip{border-block:1px solid var(--line);background:rgba(255,255,255,.85)}
.strip-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.strip-cell{background:var(--bg);padding:26px clamp(14px,2vw,26px);text-align:center}
.strip-cell .n{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.strip-cell .l{font-size:.78rem;color:var(--ink-3);line-height:1.45}
@media (max-width:760px){.strip-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* bande a effectif variable (progression) : chaque rangee se remplit, jamais de case vide */
.strip-in--libre{display:flex;flex-wrap:wrap}
.strip-in--libre .strip-cell{flex:1 1 160px}

/* ---------- Grilles ---------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,24px)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,24px)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:36px}}

/* ---------- Cartes ---------- */
.card{position:relative;border-radius:var(--r-l);padding:clamp(24px,3vw,32px);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.85));border:1px solid var(--line);transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.85))}
.card h3{margin-bottom:12px}
.card p{font-size:.94rem;line-height:1.65}

.card-num{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--cyan);
  display:block;margin-bottom:16px;
}
.card-ico{
  width:46px;height:46px;border-radius:14px;margin-bottom:20px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(14,165,201,.18),rgba(124,92,255,.12));
  border:1px solid rgba(14,165,201,.28);
}
.card-ico svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Tableau ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.85))}
table{width:100%;border-collapse:collapse;min-width:620px}
thead th{
  font-family:var(--f-disp);font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-3);text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap;
}
tbody td{padding:16px 20px;border-bottom:1px solid rgba(37,99,255,.07);font-size:.92rem;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(37,99,255,.04)}
td strong,th strong{color:var(--ink);font-weight:600}
.td-num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.row-us{background:rgba(14,165,201,.055)}
.row-us:hover{background:rgba(14,165,201,.08)}
.row-us td{border-color:rgba(14,165,201,.16)}

/* ---------- Widget espérance ---------- */
.ev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,44px);align-items:stretch}
@media (max-width:880px){.ev{grid-template-columns:minmax(0,1fr)}}

.opts{display:grid;gap:10px;margin-block:24px}
.opt{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.85);
  transition:opacity .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.opt .k{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3);
  border:1px solid var(--line-2);background:rgba(255,255,255,.85);
}
.opt .t{font-size:.9rem;color:var(--ink-2)}
.opt.is-out{opacity:.24;border-color:rgba(224,52,92,.3);background:rgba(224,52,92,.05)}
.opt.is-out .t{text-decoration:line-through;text-decoration-color:rgba(224,52,92,.7)}
.opt.is-right{border-color:rgba(14,159,110,.45);background:rgba(14,159,110,.07)}
.opt.is-right .k{border-color:rgba(14,159,110,.5);color:var(--mint)}

.slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:100px;background:var(--piste);outline:none;margin:8px 0 4px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));cursor:pointer;box-shadow:0 0 0 4px rgba(14,165,201,.16),0 6px 20px -4px rgba(14,165,201,.7);border:0}
.slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));cursor:pointer;box-shadow:0 0 0 4px rgba(14,165,201,.16);border:0}
.slider-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3);margin-top:2px}

.ev-out{text-align:center;padding:clamp(24px,3.4vw,38px) 20px;display:flex;flex-direction:column;justify-content:center}
.ev-out .lbl{font-family:var(--f-disp);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);margin-bottom:14px}
.ev-out .big{font-family:var(--f-disp);font-weight:700;font-size:clamp(3.2rem,9vw,5rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.ev-out .big.pos{color:var(--mint)}
.ev-out .big.neutral{color:var(--ink-3)}
.ev-out .msg{margin-top:18px;font-size:.92rem;line-height:1.6;min-height:3.2em;color:var(--ink-2)}
.ev-formula{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);word-break:break-word}

/* ---------- Étapes ---------- */
.steps{display:grid;gap:0;counter-reset:s}
.step{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(18px,3vw,32px);
  padding-block:clamp(26px,3.4vw,38px);border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step-n{
  font-family:var(--f-disp);font-weight:700;font-size:1.05rem;color:var(--cyan);
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  border:1px solid rgba(14,165,201,.3);background:rgba(14,165,201,.07);flex:none;
}
.step h3{margin-bottom:10px}
.step p{font-size:.95rem}
@media (max-width:600px){.step{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ---------- Tarifs ---------- */
/* Trois offres : Diagnostic, Entraînement, Objectif. Le pack Sprint a été
   retiré — il vendait des visios individuelles qu'une personne seule ne peut
   pas assurer. */
/* Deux offres, deux colonnes larges. Une grille de trois colonnes pour deux
   cartes laissait un vide a droite et poussait l'offre payante au milieu :
   la page paraissait inachevee. */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);align-items:stretch;max-width:860px;margin-inline:auto}
.plans .plan{padding:clamp(30px,3.4vw,40px) clamp(26px,3vw,34px)}
.plans .plan-nm{font-size:1.32rem}
.plans .plan-price .p{font-size:3.2rem}
.plans .plan-feats li{font-size:.92rem}
@media (max-width:720px){.plans{grid-template-columns:minmax(0,1fr);max-width:440px}}
/* Trois offres. Celle de droite est une ancre : elle existe vraiment, mais
   rien ne doit la pousser — fond plat, pas de pastille, pas de bouton plein.
   La hiérarchie visuelle reste : bouton plein sur la Prépa complète, bouton
   secondaire sur le Diagnostic, simple lien sur l'accompagnement. */
.plans--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}
.plans--3 .plan-nm{font-size:1.18rem}
.plans--3 .plan-price .p{font-size:2.7rem}
.plans--3 .plan-feats li{font-size:.86rem}
.plan--sobre{background:rgba(255,255,255,.85)}
.plan--sobre:hover{transform:none}
.plan--sobre .plan-price .p{color:var(--ink-2)}
.plan-demande{align-self:flex-start;margin-bottom:22px;padding:6px 0 3px;min-height:32px;display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:.78rem;color:var(--cyan);text-decoration:none;
  border-bottom:1px solid rgba(14,165,201,.34);transition:color .3s var(--ease)}
.plan-demande:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:980px){.plans--3{grid-template-columns:minmax(0,1fr);max-width:440px}}

/* ---------- L'avis de fin d'épreuve ---------- */
/* Cinq cases par critère. Le clic doit être gros au pouce : c'est le dernier
   geste d'une épreuve de deux heures, personne ne visera une pastille. */
/* ---------- Le code de réduction ---------- */
/* Il se recopie à la main sur une autre page : gros, espacé, sélectionnable
   d'un geste. Rien d'autre autour — c'est la récompense, pas une décoration. */
.promo{border:1px dashed rgba(14,165,201,.5);border-radius:var(--r-m);
  padding:16px 18px;background:rgba(14,165,201,.05);text-align:center}
.promo-titre{font-family:var(--f-disp);font-weight:600;font-size:.9rem;color:var(--ink);margin:0 0 8px}
/* Le tarif boursier, au moment de payer : une case, puis le justificatif (membre.js, blocBoursier). */
.bourse{border:1px dashed rgba(14,159,110,.5);border-radius:var(--r-m);padding:14px 16px;
  background:linear-gradient(120deg,rgba(14,159,110,.07),transparent 70%);text-align:left}
.bourse-case{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5;cursor:pointer;margin:0}
.bourse-case input{margin-top:4px;flex:none;width:16px;height:16px;accent-color:var(--mint)}
.bourse-fichier{margin-top:12px}
.bourse-fichier input[type=file]{padding:10px 12px;font-size:.88rem;cursor:pointer}
.renonce{border:1px dashed var(--line-2);border-radius:var(--r-m);padding:14px 16px;margin-top:12px}
.renonce-case{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5;cursor:pointer;margin:0}
.renonce-case input{margin-top:4px;flex:none;width:16px;height:16px;accent-color:var(--cyan)}
.renonce-case a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.renonce-plus,.renonce-garder{background:none;border:0;padding:0;font:inherit;color:var(--cyan);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.renonce-plus{display:block;margin:6px 0 0 26px;font-size:.82rem}
.renonce-detail{margin-left:26px}
.renonce-detail p{margin:8px 0 0}
.renonce-manque{border-color:var(--coral);border-style:solid}
.promo-code{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.3rem,4vw,1.7rem);
  letter-spacing:.14em;color:var(--cyan);margin:0 0 10px;user-select:all;word-break:break-all}

.avis-bloc{margin-bottom:18px}
.avis-bloc:first-child{margin-top:22px}
.avis-titre{font-family:var(--f-disp);font-weight:600;font-size:.92rem;color:var(--ink);margin:0 0 8px}
.avis-notes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.avis-notes label{position:relative;display:block}
.avis-notes input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.avis-notes span{display:block;padding:12px 0;text-align:center;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.85);
  font-family:var(--f-mono);font-size:.95rem;color:var(--ink-2);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.avis-notes label:hover span{border-color:var(--line-2);color:var(--ink)}
.avis-notes input:checked+span{border-color:var(--cyan);background:rgba(14,165,201,.15);color:var(--ink)}
.avis-notes input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.avis-echelle{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:7px 0 0;
  font-size:.7rem;line-height:1.35;color:var(--ink-3)}
.avis-echelle span:nth-child(2){text-align:center}
.avis-echelle span:last-child{text-align:right}

.plan{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-l);padding:28px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.85));
  border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.plan:hover{transform:translateY(-5px);border-color:var(--line-2)}
.plan--star{
  border-color:rgba(14,165,201,.45);
  background:linear-gradient(180deg,rgba(14,165,201,.1),rgba(124,92,255,.05));
  box-shadow:0 24px 70px -30px rgba(14,165,201,.6);
}
.plan-tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:5px 15px;border-radius:100px;white-space:nowrap;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:#FFFFFF;
  font-family:var(--f-disp);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
}
.plan-nm{font-family:var(--f-disp);font-weight:700;font-size:1.15rem;color:var(--ink);margin-bottom:6px}
.plan-for{font-size:.8rem;color:var(--ink-3);line-height:1.5;min-height:3em;margin-bottom:20px}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.plan-price .p{font-family:var(--f-disp);font-weight:700;font-size:2.6rem;letter-spacing:-.04em;color:var(--ink);line-height:1}
.plan-price .u{font-family:var(--f-mono);font-size:.82rem;color:var(--ink-3)}
.plan-sub{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);margin-bottom:22px}
.plan-sub strong{color:var(--bleu);font-weight:700;font-size:.9rem}
.plan .btn{margin-bottom:22px}
.plan-feats{display:grid;gap:11px}
.plan-feats li{position:relative;padding-left:26px;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.plan-feats svg{position:absolute;left:0;top:4px;width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan-feats li.off{color:var(--ink-3);opacity:.55}
.plan-feats li.off svg{stroke:var(--ink-3)}

/* ---------- Garantie ---------- */
.warranty{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,34px);align-items:center;
  border-radius:var(--r-l);padding:clamp(26px,3.4vw,40px);
  background:linear-gradient(120deg,rgba(14,159,110,.1),rgba(14,165,201,.05) 60%,transparent);
  border:1px solid rgba(14,159,110,.3);
}
.warranty-seal{
  width:76px;height:76px;border-radius:22px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(14,159,110,.22),rgba(14,165,201,.12));
  border:1px solid rgba(14,159,110,.4);
}
.warranty-seal svg{width:34px;height:34px;stroke:var(--mint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.warranty{grid-template-columns:minmax(0,1fr);text-align:left}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--f-disp);font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.4;
  transition:color .25s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--cyan)}
.qa summary .pm{
  width:26px;height:26px;border-radius:8px;flex:none;position:relative;margin-top:2px;
  border:1px solid var(--line-2);background:var(--glass);transition:background .25s,border-color .25s,transform .3s var(--ease);
}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;top:50%;left:50%;background:var(--cyan);border-radius:2px;transform:translate(-50%,-50%)}
.qa summary .pm::before{width:11px;height:1.5px}
.qa summary .pm::after{width:1.5px;height:11px;transition:opacity .25s,transform .3s var(--ease)}
.qa[open] summary .pm{background:rgba(14,165,201,.14);border-color:rgba(14,165,201,.45);transform:rotate(180deg)}
.qa[open] summary .pm::after{opacity:0}
.qa-body{padding:0 46px 26px 0;font-size:.95rem;line-height:1.72;color:var(--ink-2)}
.qa-body p+p{margin-top:12px}

/* ---------- Bandeau final ---------- */
.final{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(40px,6vw,76px) clamp(24px,4vw,56px);text-align:center;
  background:linear-gradient(160deg,rgba(14,165,201,.14),rgba(124,92,255,.1) 55%,rgba(224,52,92,.05));
  border:1px solid var(--line-2)}
.final::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,rgba(14,165,201,.2),transparent 70%);
}
.final>*{position:relative;z-index:1}
.final .cta-row{justify-content:center}

/* ---------- Pied de page ---------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(60px,8vw,100px);background:rgba(255,255,255,.6)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px);padding-block:clamp(44px,6vw,68px)}
@media (max-width:860px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-top{grid-template-columns:minmax(0,1fr)}}
.foot h4,.foot .foot-h{font-family:var(--f-disp);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);margin-bottom:18px}
.foot ul{display:grid;gap:11px}
.foot a{font-size:.9rem;color:var(--ink-2);text-decoration:none;transition:color .25s}
.foot a:hover{color:var(--cyan)}
.foot-brand p{font-size:.88rem;margin-top:16px;max-width:34ch}
.foot-legal{border-top:1px solid var(--line);padding-block:24px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center}
.foot-legal p{font-size:.78rem;color:var(--ink-3);line-height:1.6}
.foot-disclaimer{
  border-top:1px solid var(--line);padding-block:20px;
  font-family:var(--f-mono);font-size:.7rem;line-height:1.7;color:var(--ink-3);
}

/* ---------- Fil d'Ariane / en-tête de page ---------- */
.phead{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,48px);position:relative}
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);margin-bottom:22px}
.crumb a{text-decoration:none;color:var(--ink-3);transition:color .25s}
.crumb a:hover{color:var(--cyan)}

/* ---------- Formulaire ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font-family:var(--f-disp);font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--ink);
  font-size:.95rem;transition:border-color .25s,background .25s,box-shadow .25s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(14,165,201,.05);
  box-shadow:0 0 0 3px rgba(14,165,201,.12);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236C7A9C' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.field-check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.field-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--cyan)}
.field-check span{font-size:.82rem;line-height:1.6;color:var(--ink-3)}
.form-note{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);line-height:1.6}

/* ---------- Contenu long ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:48px;margin-bottom:16px}
.prose h3{margin-top:32px;margin-bottom:12px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:16px;font-size:.97rem;line-height:1.75}
.prose ul{display:grid;gap:10px;margin-bottom:20px}
.prose ul li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.prose ol{display:grid;gap:10px;margin-bottom:20px;counter-reset:o;padding-left:0}
.prose ol li{counter-increment:o;position:relative;padding-left:30px;font-size:.95rem;line-height:1.65}
.prose ol li::before{content:counter(o);position:absolute;left:0;top:1px;font-family:var(--f-mono);font-size:.8rem;color:var(--cyan)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(14,165,201,.35)}
.prose a:hover{border-color:var(--cyan)}

/* ---------- Utilitaires ---------- */
.center{text-align:center}
.mt-s{margin-top:14px}.mt{margin-top:26px}.mt-l{margin-top:44px}
.mb-0{margin-bottom:0}
.hr{height:1px;background:var(--line);border:0;margin-block:clamp(40px,6vw,72px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Plateforme — salle d'épreuve, rapport, espace, pilotage ----------
   Même grammaire que le reste du site : cyan = acquis, corail = perdu,
   menthe = gagné. Le moteur d'épreuve n'a pas de navigation : une barre,
   un chronomètre, une question. Rien d'autre ne doit attirer l'œil. */
.exam-bar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.exam-bar-in{display:flex;align-items:center;gap:14px;height:64px}
.exam-bar .st-nom{font-family:var(--f-disp);font-weight:600;font-size:.95rem;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exam-bar .st-rang{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3);letter-spacing:.06em;flex:none}
.chrono{margin-left:auto;flex:none;font-family:var(--f-mono);font-size:1.02rem;font-variant-numeric:tabular-nums;letter-spacing:.05em;color:var(--ink);padding:8px 16px;border-radius:100px;border:1px solid var(--line-2);background:var(--glass)}
.chrono.is-low{color:var(--coral);border-color:rgba(224,52,92,.5);animation:pulse 1.2s ease-in-out infinite}
/* Le temps écoulé du sous-test, en trait sous la barre (transform seulement). */
.exam-progres{position:absolute;left:0;bottom:-1px;width:100%;height:2px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cyan),var(--violet));transition:transform 1s linear}
.exam-progres.is-low{background:var(--coral)}
#q-cadre{scroll-margin-top:80px}

/* SALLE D'ÉPREUVE — couleurs et fonds explicites, jamais hérités.
   Un énoncé qu'on ne peut pas lire, c'est une épreuve perdue : rien ici ne
   doit dépendre d'un fond transparent, d'un backdrop-filter que la machine
   ne sait pas rendre, ni d'une couleur par défaut de <button>. Chaque
   surface porte sa propre couleur opaque. */
.q-passage{max-height:min(38vh,340px);overflow-y:auto;white-space:pre-line;font-size:.93rem;line-height:1.7;color:#2C3652;background:transparent}
.q-enonce{font-family:var(--f-disp);font-weight:600;font-size:1.08rem;line-height:1.5;color:#0B1330;white-space:pre-line}
#q-cadre{background:#FFFFFF;border:1px solid var(--line-2);backdrop-filter:none;-webkit-backdrop-filter:none}
#q-numero{color:#5D6A8C}

/* Figures des questions spatiales (sous-test 6).

   Les dessins n'embarquent aucune couleur : ils tracent en `currentColor` et
   remplissent en `none`, si bien qu'ils suivent le thème de la page au lieu
   de disparaître sur fond sombre. Le SVG se met à l'échelle du conteneur ;
   sur mobile, il se réduit sans jamais déborder de la carte. */
.q-figure{margin:16px 0 4px;color:#2C3652;display:flex;justify-content:center}
.q-figure[hidden]{display:none}
.q-figure svg{max-width:100%;height:auto;max-height:min(34vh,300px)}
.q-figure svg text{fill:currentColor;font-family:var(--f-mono,ui-monospace,monospace)}
@media (forced-colors:active){.q-figure{color:CanvasText}}

/* Une proposition dessinée occupe une vignette fixe : sans largeur imposée,
   le SVG en `width:100%` mangerait toute la ligne du bouton. */
.t-dessin{display:block;width:96px;flex:0 0 auto}
.t-dessin svg{width:96px;height:96px;display:block}
.opt-btn .t-dessin{color:inherit}

/* Cinq dessins empilés en pleine largeur, c'est quatre-vingts pour cent de
   blanc à droite et un défilement pour comparer A et E. Sur la grille
   officielle ils sont côte à côte : on les range de même, la lettre au-dessus
   de sa vignette. `minmax(0,1fr)` et non `1fr` — sans lui, une colonne de
   grille prend la largeur intrinsèque du SVG et déborde sur mobile. */
.opts--dessins{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.opts--dessins .opt{flex-direction:column;align-items:center;gap:8px;padding:12px 6px}
.opts--dessins .t-dessin{width:100%;max-width:96px}
.opts--dessins .t-dessin svg{width:100%;height:auto}
/* Dans le rapport, la vignette se pose au fil d'une ligne de correction,
   entre la lettre et la mention « bonne réponse » : plus petite, sans marge. */
.t-dessin--vignette{width:64px;margin:2px 0}
.t-dessin--vignette svg{width:64px;height:64px}

@media (max-width:430px){
  .opts--dessins{gap:5px}
  .opts--dessins .opt{padding:9px 3px;gap:6px}
  .opts--dessins .opt .k{width:22px;height:22px;border-radius:7px}
}

/* Les options vont de « 40 » à 134 caractères : la pastille se cale en haut
   et le texte s'aligne à gauche, sinon une option longue décentre sa lettre
   et la colonne des A/B/C/D/E se met à danser d'une question à l'autre. */
.opt-btn{cursor:pointer;width:100%;text-align:left;align-items:flex-start;
  background:#F7F9FF;border:1px solid #D5DCEF;color:#0B1330;-webkit-appearance:none;appearance:none}
.opt-btn .k{margin-top:1px;color:#3E4A6B;background:#E9EEFF;border-color:#C3CCE6}
.opt-btn .t{line-height:1.5;padding-top:2px;color:#0B1330}
.opt-btn:hover{border-color:#9FB0DA;background:#EEF3FF}
.opt-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.opt-btn.is-sel{border-color:var(--cyan-vif);background:#E6F7FC}
.opt-btn.is-sel .k{border-color:var(--cyan-vif);color:var(--cyan-d);background:#D3F1F8}
.opt-btn.is-sel .t{color:var(--ink)}
.opt.is-sel{border-color:rgba(14,165,201,.55);background:rgba(14,165,201,.09)}
.opt.is-sel .k{border-color:rgba(14,165,201,.6);color:var(--cyan);background:rgba(14,165,201,.1)}

/* Contraste élevé de Windows : le système impose ses couleurs et efface les
   nôtres. On lui demande alors de tout redessiner lui-même, plutôt que de
   laisser un texte système sur un fond à nous — c'est là que naissent les
   « blanc sur blanc ». */
@media (forced-colors:active){
  .opt-btn,#q-cadre,.panel{forced-color-adjust:none;background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .opt-btn .t,.opt-btn .k,.q-enonce,.q-passage,#q-numero{color:CanvasText;background:Canvas}
  .opt-btn.is-sel{background:Highlight;color:HighlightText}
  .opt-btn.is-sel .t,.opt-btn.is-sel .k{color:HighlightText;background:Highlight}
  .chrono{color:CanvasText;background:Canvas;border:1px solid CanvasText}
}

.qnav{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:6px}
@media (max-width:720px){.qnav{grid-template-columns:repeat(8,minmax(0,1fr))}}
.qnav button{height:38px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.85);cursor:pointer;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);transition:border-color .2s,background .2s,color .2s}
.qnav button:hover{border-color:var(--line-2);color:var(--ink)}
.qnav button.is-rep{border-color:rgba(14,165,201,.4);background:rgba(14,165,201,.08);color:var(--cyan)}
.qnav button.is-cur{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(14,165,201,.25);color:var(--ink)}

/* Bascule connexion / inscription */
.onglets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.85)}
.onglet{padding:11px 14px;min-height:40px;border-radius:100px;border:0;background:none;cursor:pointer;font-family:var(--f-disp);font-weight:600;font-size:.9rem;color:var(--ink-3);transition:color .25s var(--ease),background .25s var(--ease)}
.onglet:hover{color:var(--ink)}
.onglet.is-on{background:linear-gradient(135deg,rgba(14,165,201,.16),rgba(124,92,255,.14));color:var(--ink);box-shadow:inset 0 0 0 1px rgba(14,165,201,.3)}
.lien-nu{border:0;background:none;padding:0;cursor:pointer;color:var(--cyan);font:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.lien-nu:hover{color:var(--ink)}

/* Rapport : verdict par question */
.rq{border-bottom:1px solid var(--line)}
.rq:last-child{border-bottom:0}
.rq summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 0;cursor:pointer;list-style:none;font-size:.9rem}
.rq summary::-webkit-details-marker{display:none}
.rq .v{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-size:.75rem;flex:none;border:1px solid var(--line-2);color:var(--ink-3)}
.rq.ok .v{border-color:rgba(14,159,110,.5);color:var(--mint);background:rgba(14,159,110,.08)}
.rq.ko .v{border-color:rgba(224,52,92,.5);color:var(--coral);background:rgba(224,52,92,.08)}
.rq .apercu{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rq .tps{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.rq-corps{padding:4px 0 20px 46px;font-size:.92rem;line-height:1.7}
@media (max-width:600px){.rq-corps{padding-left:0}}
.tl-strip i.vide{background:rgba(37,99,255,.18);box-shadow:none}

/* ---------- L'offre (rapport, espace) et ses repères chiffrés ---------- */
.offre{border-color:rgba(14,165,201,.4);background:linear-gradient(180deg,rgba(14,165,201,.09),rgba(124,92,255,.05))}
.offre-ecart{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0 8px}
.offre-ecart .c{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.4)}
.offre-ecart .n{font-family:var(--f-disp);font-weight:700;font-size:1.7rem;line-height:1;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.offre-ecart .n .score-max{font-size:.5em;color:var(--ink-3)}
.offre-ecart .l{font-size:.78rem;color:var(--ink-3);margin-top:7px;line-height:1.4}

/* ---------- Partage du score ---------- */
.partage{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.partage .form-note{flex:1 1 200px}

/* ---------- Mot de passe : voir / masquer ---------- */
.mdp-wrap{position:relative}
.mdp-wrap input{padding-right:92px}
.mdp-voir{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid var(--line-2);background:var(--glass);color:var(--ink-2);border-radius:100px;padding:6px 12px;font-family:var(--f-disp);font-size:.76rem;font-weight:600;cursor:pointer}
.mdp-voir:hover{color:var(--ink);border-color:var(--cyan)}

/* ---------- Appel collant, téléphone seulement ----------
   Pas de transition : la barre est visible ou cachée, jamais « en train de ». */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.sticky-cta .l{font-size:.76rem;color:var(--ink-3);line-height:1.35;min-width:0}
.sticky-cta .l strong{display:block;color:var(--ink);font-size:.88rem;font-family:var(--f-disp)}
.sticky-cta .btn{flex:none}
@media (max-width:720px){
  .sticky-cta{display:flex}
  .sticky-cta[hidden]{display:none}
  body.has-sticky .foot{padding-bottom:84px}
}

/* ---------- Révélation au défilement (4 filets anti-page-blanche) ----------
   Filet 1 : l'état masqué n'existe QUE si <html class="js">, donc sans JS tout est visible.
   Filet 2 : IntersectionObserver.
   Filet 3 : minuteur de secours qui révèle tout au bout de 1,4 s.
   Filet 4 : la classe .reveal est retirée du DOM après révélation.
-------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}
.js .reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   CE QUI CHARGE — bouton occupé, voile, barre entre deux pages, squelettes
   Règle : rien ici ne conditionne la visibilité d'un contenu déjà là. Un
   état « en cours » s'ajoute par-dessus et se retire ; s'il restait collé
   (webview gelée, retour arrière), la page en dessous serait complète.
   ========================================================================== */
.btn:disabled{cursor:not-allowed;opacity:.62;transform:none;box-shadow:none}
.btn.is-loading,.btn.is-loading:disabled{opacity:.94;cursor:progress;pointer-events:none;transform:none}
.btn.is-loading::before{content:"";width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.roue{display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;
  border:2px solid var(--cyan);border-right-color:transparent;animation:tourne .8s linear infinite}

/* Le voile : plein écran, au-dessus de tout, un titre au centre. Seule la
   carte bouge (transform) : un voile figé resterait entier et lisible. */
.voile{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.voile-in{text-align:center;max-width:420px;animation:monte .35s var(--ease)}
@keyframes monte{from{transform:translateY(14px)}}
.voile-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 22px;border-radius:17px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:#FFFFFF;
  font-family:var(--f-disp);font-weight:700;font-size:1.5rem;
  box-shadow:0 14px 40px -12px rgba(14,165,201,.8);animation:respire 1.6s ease-in-out infinite}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.voile-titre{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.25rem,3.4vw,1.6rem);color:var(--ink);letter-spacing:-.02em;margin-bottom:8px}
.voile-sous{font-size:.92rem;color:var(--ink-2);min-height:1.5em}
.voile-barre{display:block;width:180px;height:4px;margin:22px auto 0;border-radius:100px;background:rgba(37,99,255,.14);overflow:hidden}
.voile-barre i{display:block;width:40%;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--cyan),var(--violet));animation:glisse 1.1s ease-in-out infinite}
@keyframes glisse{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* Le trait qui part au clic d'un lien et disparaît quand l'autre page prend la main. */
.barre-nav{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 14px rgba(14,165,201,.7)}
.barre-nav.is-on{animation:barre-nav 7s cubic-bezier(.1,.8,.2,1) forwards}
@keyframes barre-nav{0%{transform:scaleX(0)}12%{transform:scaleX(.3)}100%{transform:scaleX(.93)}}

/* Chargeur en place (épreuve, espace, rapport). Le texte de secours vient
   tout seul au bout de douze secondes, sans JS : si rien ne l'a remplacé
   d'ici là, c'est qu'il y a un problème, et on le dit. */
.chargeur{display:none;align-items:center;gap:14px;padding:6px 0;color:var(--ink-2);font-size:.95rem}
.js .chargeur{display:flex}
.tardif{opacity:0;animation:apparait 0s 12s forwards;font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);line-height:1.6;margin-top:10px}
@keyframes apparait{to{opacity:1}}
.sq{display:grid;gap:12px}
.sq i{display:block;height:14px;border-radius:7px;
  background:linear-gradient(90deg,rgba(37,99,255,.08) 0%,rgba(37,99,255,.2) 40%,rgba(37,99,255,.08) 80%);
  background-size:220% 100%;animation:miroite 1.4s linear infinite}
.sq i.l{width:55%}.sq i.m{width:80%}.sq i.h{height:38px;width:42%;border-radius:10px}
@keyframes miroite{to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.sq i{animation:none}.voile-barre i{animation:none;width:100%}}

/* ==========================================================================
   MOUVEMENT — ce qui répond au doigt, sans jamais cacher quoi que ce soit
   (transform seulement : un mouvement gelé laisse tout en place et lisible)
   ========================================================================== */
.btn:active{transform:translateY(0) scale(.98)}
.btn-1{background-size:170% 100%;background-position:0 0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-position .6s var(--ease),opacity .3s}
.btn-1:hover{background-position:100% 0}
.opt-btn{transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)}
.opt-btn:active{transform:scale(.99)}
.qnav button{transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.qnav button.is-cur{transform:scale(1.08)}
.nav-drawer.is-open{animation:tiroir .28s var(--ease)}
@keyframes tiroir{from{transform:translateY(-8px)}}
.qa[open] .qa-body{animation:deplie .3s var(--ease)}
@keyframes deplie{from{transform:translateY(-6px)}}
.anime{animation:monte .28s var(--ease)}
#ecran-message .panel,#ecran-avant .panel{animation:monte .35s var(--ease)}
/* Entrée du héros : un glissement de 14 px, jamais un fondu — figé, il
   laisserait le titre à sa place et lisible. */
.js .hero h1{animation:monte .7s var(--ease) both}
.js .hero .lead{animation:monte .7s .08s var(--ease) both}
.js .hero .cta-row{animation:monte .7s .16s var(--ease) both}
.js .hero .hero-note{animation:monte .7s .24s var(--ease) both}
/* Le doigt : pas de flash gris au toucher, notre propre retour suffit. */
a,button,.opt-btn,.qnav button,.onglet,summary{-webkit-tap-highlight-color:transparent}
.qnav button{min-height:42px}
/* Sous 16 px, iPhone zoome dans le champ au focus et décale toute la page. */
@media (max-width:720px){.field input,.field select,.field textarea{font-size:16px}}
.field input:not(:placeholder-shown):user-invalid{border-color:rgba(224,52,92,.6)}
/* Sur un écran tactile, l'état survolé reste collé après le doigt : on le neutralise. */
@media (hover:none){
  .btn:hover{transform:none}
  .btn-1:hover{background-position:0 0;box-shadow:0 12px 34px -14px rgba(37,99,255,.5)}
  .card:hover,.plan:hover{transform:none}
}
/* Fondu entre deux pages (Chrome et Safari récents ; les autres naviguent comme avant). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-sort .16s ease-in}
::view-transition-new(root){animation:page-entre .24s ease-out}
@keyframes page-sort{to{opacity:0}}
@keyframes page-entre{from{opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ==========================================================================
   VISUELS ANIMÉS — vignettes dans les cartes, chips flottantes, stepper.
   Même règle que les compteurs : l'état FINAL est celui du CSS par défaut.
   Le JS pose .viz-init pour replier (transform seulement), puis .is-on quand
   la vignette entre à l'écran, avec minuteur de secours. Sans JS ou en
   mouvement réduit, tout est déjà à sa place.
   ========================================================================== */
.viz{position:relative;margin:18px 0 4px;border-radius:14px;padding:14px 16px 12px;
  background:linear-gradient(180deg,#F7F9FF,#EEF2FF);border:1px solid var(--line);overflow:hidden}
.viz-legende{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-family:var(--f-mono);font-size:.62rem;color:var(--ink-3)}
/* barres de temps */
.viz-barres{display:flex;gap:4px;align-items:flex-end;height:72px}
.viz-barres i{flex:1;border-radius:3px 3px 0 0;min-height:4px;
  background:linear-gradient(180deg,var(--bleu),rgba(37,99,255,.3));
  transform-origin:bottom;transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 45ms)}
.viz-barres i.bad{background:linear-gradient(180deg,var(--coral),rgba(224,52,92,.3))}
.viz-barres i.vide{background:rgba(37,99,255,.18)}
.viz-init .viz-barres i{transform:scaleY(.05)}
/* la grille de cases */
.viz-grille{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.viz-grille i{aspect-ratio:1;border-radius:4px;background:var(--bleu);opacity:.85;
  transform-origin:center;transition:transform .45s var(--ease);transition-delay:calc(var(--i,0) * 22ms)}
.viz-grille i.vide{background:transparent;border:1.5px dashed var(--coral);opacity:1}
.viz-init .viz-grille i{transform:scale(0)}
/* l'effort comparé */
.viz-effort{display:grid;gap:8px}
.viz-effort .l{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:.64rem;color:var(--ink-3)}
.viz-effort .l b{color:var(--ink);font-weight:500}
.viz-effort .b{height:10px;border-radius:5px;background:rgba(37,99,255,.12);overflow:hidden}
.viz-effort .b i{display:block;height:100%;width:var(--w,100%);border-radius:5px;background:var(--ink-3);
  transform-origin:left;transition:transform 1s var(--ease)}
.viz-effort .b i.gain{background:linear-gradient(90deg,var(--cyan-vif),var(--violet));transition-delay:.25s}
.viz-init .viz-effort .b i{transform:scaleX(0)}
/* six blancs qui se remplissent */
.viz-blancs{display:grid;gap:6px}
.viz-blancs i{display:block;height:9px;border-radius:5px;transform-origin:left;transition:transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
  background:repeating-linear-gradient(90deg,var(--bleu) 0 5.8%,transparent 5.8% 6.67%)}
.viz-init .viz-blancs i{transform:scaleX(0)}

/* les 90 questions d'un blanc, un carré chacune : 9 rangées de 10.
   La largeur de la grille est le seul réglage de hauteur de cette carte : les
   carrés sont carrés, donc dix par rangée et neuf rangées, la hauteur suit la
   largeur. Elle est bornée pour que la carte de droite finisse exactement où
   finit le téléphone de gauche — voir la note sur #modules plus bas. */
.viz-questions{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;align-content:start;
  max-width:278px;margin-inline:auto;width:100%}
.viz-questions i{display:block;aspect-ratio:1;border-radius:4px;background:var(--c,var(--bleu));opacity:.9;
  transform-origin:center;transition:transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.viz-init .viz-questions i{transform:scale(0)}

/* Une couleur par sous-test, dans l'ordre de l'épreuve : quinze carrés
   chacun, à la suite. Les bandes se coupent en milieu de rangée — c'est
   voulu, les questions se suivent sans s'interrompre le jour J. */
.q-st1{--c:#2563FF}.q-st2{--c:#0EA5C9}.q-st3{--c:#0E9F6E}
.q-st4{--c:#C77D00}.q-st5{--c:#E0345C}.q-st6{--c:#6A4CFF}

/* Trois colonnes plutôt que deux : une rangée de moins, vingt pixels rendus à
   la grille des carrés, qui peut rester plus grosse d'autant. */
.viz-sts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 12px;margin-top:12px;
  font-family:var(--f-mono);font-size:.58rem;color:var(--ink-3)}
.viz-sts span{display:flex;align-items:center;gap:6px;min-width:0}
.viz-sts span::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--c)}
/* Sous cette largeur, trois colonnes coupent « Conditions min. » : on repasse
   à deux. La carte est seule sur sa ligne à ce moment-là, la rangée de plus
   ne déséquilibre plus rien. */
@media (max-width:900px){.viz-sts{grid-template-columns:1fr 1fr}}

/* Les deux cartes de « Ce que tu obtiens » se règlent l'une sur l'autre, mais
   dans un seul sens : la GAUCHE commande. Le téléphone garde sa mise en page
   d'origine — seize pixels au-dessus de lui, rien de plus, et il se fait
   couper en bas par le cadre. C'est ce qui donne l'impression d'un écran qui
   continue hors de la carte.
   La droite s'aligne dessus : la taille des carrés est calculée pour que la
   grille et ses légendes fassent la même hauteur, à quelques pixels près.
   Aucune règle de mise en page n'est imposée aux deux — une tentative en ce
   sens, le 11/09, avait poussé le téléphone en haut à gauche avec 248 px de
   vide sous lui. */

/* le téléphone : la salle d'épreuve, vraie mise en page en petit */
.viz-phone{display:flex;justify-content:center;padding:16px 16px 0}
.phone{width:min(100%,250px);border-radius:22px 22px 0 0;border:1px solid var(--line-2);border-bottom:0;
  background:#fff;padding:12px 12px 4px;box-shadow:0 22px 40px -24px rgba(11,19,48,.35);
  transform-origin:bottom;transition:transform .8s var(--ease)}
.viz-init .phone{transform:translateY(26px)}
.phone-bar{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.58rem;color:var(--ink-3);margin-bottom:8px}
.phone-bar b{color:var(--ink);font-weight:600}
.phone-q{font-family:var(--f-disp);font-weight:600;font-size:.72rem;line-height:1.35;color:var(--ink);margin-bottom:8px}
.phone-opts{display:grid;gap:5px}
.phone-opts i{display:flex;align-items:center;gap:8px;height:22px;padding:0 8px;border-radius:7px;border:1px solid var(--line);
  background:#F7F9FF;font-style:normal;font-family:var(--f-mono);font-size:.56rem;color:var(--ink-2);
  transition:transform .5s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.phone-opts i b{width:12px;height:12px;border-radius:4px;border:1px solid var(--line-2);display:grid;place-items:center;
  font-size:.48rem;color:var(--ink-3);font-weight:600}
.phone-opts i.sel{border-color:var(--cyan-vif);background:#E6F7FC;color:var(--ink)}
.phone-opts i.sel b{border-color:var(--cyan-vif);color:var(--cyan-d);background:#D3F1F8}
.viz-init .phone-opts i{transform:translateX(-12px)}
.phone-nav{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;margin-top:8px}
.phone-nav b{height:5px;border-radius:2px;background:rgba(37,99,255,.15)}
.phone-nav b.on{background:var(--bleu)}
/* l'échelle des écoles */
.viz-echelle{position:relative;height:76px}
.viz-echelle .r{position:absolute;left:4px;right:4px;top:38px;height:4px;border-radius:2px;background:rgba(37,99,255,.15)}
.viz-echelle .p{position:absolute;top:2px;transform:translateX(-50%);font-family:var(--f-mono);font-size:.6rem;color:var(--ink-3);white-space:nowrap}
.viz-echelle .p::after{content:"";position:absolute;left:50%;top:22px;width:2px;height:12px;background:var(--line-2)}
.viz-echelle .m{position:absolute;top:29px;left:var(--pos,50%);width:22px;height:22px;border-radius:50%;margin-left:-11px;
  background:linear-gradient(135deg,var(--bleu),var(--violet));box-shadow:0 0 0 5px var(--piste);transition:left 1.3s var(--ease)}
.viz-echelle .m::after{content:attr(data-val);position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.62rem;color:var(--ink);white-space:nowrap}
.viz-init .viz-echelle .m{left:4px}
@media (max-width:420px){
  .viz-echelle{height:96px}
  .viz-echelle .p{top:0;font-size:.7rem;letter-spacing:0;white-space:normal;width:5.4em;text-align:center;line-height:1.2}
  .viz-echelle .p::after{top:32px;height:10px}
  .viz-echelle .r{top:46px}
  .viz-echelle .m{top:37px}
}
/* le stepper du parcours */
.stepper{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.stepper::before{content:"";position:absolute;left:26px;right:26px;top:26px;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--bleu),var(--violet));transform-origin:left;transition:transform 1.4s var(--ease)}
.viz-init.stepper::before{transform:scaleX(0)}
.stepper .st{position:relative;z-index:1}
.stepper .n{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:14px;
  background:#fff;border:1px solid rgba(37,99,255,.35);color:var(--bleu);font-family:var(--f-disp);font-weight:700;
  box-shadow:var(--ombre);transition:transform .5s var(--ease);transition-delay:calc(var(--i,0) * 250ms)}
.viz-init .stepper .n{transform:scale(.5)}
.stepper h3{font-size:1.02rem;margin-bottom:6px}
.stepper p{font-size:.9rem;color:var(--ink-2)}
@media (max-width:760px){
  .stepper{grid-template-columns:minmax(0,1fr);gap:22px}
  .stepper::before{left:26px;right:auto;top:26px;bottom:26px;width:2px;height:auto;transform-origin:top;
    background:linear-gradient(180deg,var(--bleu),var(--violet))}
  .viz-init.stepper::before{transform:scaleY(0)}
  .stepper .st{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start}
  .stepper .n{margin-bottom:0}
}
/* La console du héros ne bouge que sous la main : la souris l'incline sur
   ordinateur, le doigt l'enfonce et l'incline sur téléphone (main.js, initTilt).
   Rien ne l'anime toute seule — Anthony : « qui bouge en mode vivant, non ». */
.hero-visuel{position:relative}
.hero .hero-visuel .console{animation:none;touch-action:pan-y}
/* Le suivi de la souris est interpole en JS (bloc 18) : pas de transition
   ici, sinon le mouvement est amorti deux fois et traine derriere le
   pointeur. Le doigt, lui, garde la sienne. */
.hero .hero-visuel .console.is-pressee{transition:transform .12s var(--ease)}
/* le liseré tournant de l'offre principale */
@property --tour{syntax:"<angle>";inherits:false;initial-value:0deg}
.plan--star::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--tour),var(--bleu),var(--cyan-vif),var(--violet),var(--bleu));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:tourne-bord 6s linear infinite}
@keyframes tourne-bord{to{--tour:360deg}}
/* qui est derrière */
.qui{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.qui-sceau{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--bleu),var(--violet));color:#fff;font-family:var(--f-disp);font-weight:700;font-size:1.6rem;box-shadow:var(--ombre)}
@media (max-width:600px){.qui{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.flottant,.hero-visuel,.plan--star::before{animation:none}}

/* ---------- Promo : badges, bandeau défilant, tuiles teintées, gros chiffres ----------
   Anthony (05/09) : « plus de pub sur toutes les fonctionnalités, de la
   couleur, des gros trucs ». Tout reste vrai et daté ; seule la mise en
   scène change. Le bandeau défile en transform : figé, il reste lisible. */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:100px;
  font-family:var(--f-disp);font-weight:700;font-size:.74rem;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;background:var(--bleu);box-shadow:0 8px 20px -10px rgba(37,99,255,.6)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.badge--mint{background:var(--mint);box-shadow:0 8px 20px -10px rgba(14,159,110,.6)}
.badge--violet{background:var(--violet);box-shadow:0 8px 20px -10px rgba(106,76,255,.6)}
/* La note de réalisme sur téléphone : là-bas, .scene-chip est masquée et
   l'étiquette de la scène ne peut pas se voir. Le badge la remplace, et
   disparaît dès que la scène redevient visible — jamais les deux. */
.badge--note{background:linear-gradient(135deg,#FFC93C,#FFA51F);color:#2A1600;
  box-shadow:0 10px 24px -8px rgba(255,145,0,.8)}
.badge--note::before{background:rgba(42,22,0,.55)}
@media (min-width:601px){.badge--note{display:none}}
.badge--coral{background:var(--coral);box-shadow:0 8px 20px -10px rgba(224,52,92,.6)}
.badge--amber{background:var(--amber);box-shadow:0 8px 20px -10px rgba(199,125,0,.6)}
.badge--ink{background:var(--ink)}
.marquee{overflow:hidden;background:linear-gradient(90deg,var(--bleu),var(--violet));color:#fff;
  font-family:var(--f-disp);font-weight:700;font-size:.88rem;letter-spacing:.02em;text-transform:uppercase;
  padding:12px 0;border-block:1px solid rgba(255,255,255,.25)}
.marquee-in{display:flex;width:max-content;animation:defile 38s linear infinite}
.marquee-in span{display:inline-flex;align-items:center;gap:18px;padding:0 18px;white-space:nowrap}
.marquee-in span::after{content:"◆";font-size:.6rem;opacity:.7}
@keyframes defile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-in{animation:none;flex-wrap:wrap;width:auto}}
.card--teinte-bleu{background:linear-gradient(160deg,rgba(37,99,255,.12),rgba(37,99,255,.03));border-color:rgba(37,99,255,.35)}
.card--teinte-violet{background:linear-gradient(160deg,rgba(106,76,255,.12),rgba(106,76,255,.03));border-color:rgba(106,76,255,.35)}
.card--teinte-mint{background:linear-gradient(160deg,rgba(14,159,110,.12),rgba(14,159,110,.03));border-color:rgba(14,159,110,.35)}
.card--teinte-amber{background:linear-gradient(160deg,rgba(199,125,0,.12),rgba(199,125,0,.03));border-color:rgba(199,125,0,.35)}
.card--teinte-bleu .card-num{color:var(--bleu)}.card--teinte-violet .card-num{color:var(--violet)}
.card--teinte-mint .card-num{color:var(--mint)}.card--teinte-amber .card-num{color:var(--amber)}

.liste-types{display:grid;gap:10px}
.liste-types li{position:relative;padding-left:26px;font-size:.98rem;line-height:1.6}
.liste-types li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--bleu),var(--violet))}
.stepper--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.stepper--3{grid-template-columns:minmax(0,1fr)}}
.pieges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.piege{padding:18px 20px;border-radius:var(--r);border:1px solid rgba(224,52,92,.28);
  background:linear-gradient(120deg,rgba(224,52,92,.07),transparent 70%)}
.piege h3{font-size:1rem;margin-bottom:6px;color:var(--ink)}
.piege p{font-size:.92rem;color:var(--ink-2)}
@media (max-width:660px){.pieges{grid-template-columns:minmax(0,1fr)}}
.q-texte{padding:14px 16px;border-left:3px solid var(--bleu);background:#F7F9FF;border-radius:0 12px 12px 0;
  font-size:.95rem;line-height:1.7;margin-bottom:14px;color:var(--ink-2)}
.exemple-opts{margin:14px 0 4px}
/* La bonne réponse ne se colore qu'une fois la correction ouverte : on répond
   d'abord. La règle générale .opt.is-right (widget de l'accueil) est neutralisée ici. */
.exemple-opts .opt.is-right{border-color:var(--line);background:rgba(255,255,255,.85)}
.exemple-opts .opt.is-right .k{border-color:var(--line-2);color:var(--ink-3)}
.panel:has(details[open]) .exemple-opts .opt.is-right{border-color:rgba(14,159,110,.5);background:rgba(14,159,110,.08)}
.panel:has(details[open]) .exemple-opts .opt.is-right .k{border-color:rgba(14,159,110,.55);color:var(--mint)}

/* ==========================================================================
   TÉLÉPHONE — la majorité des vues arrive par TikTok, sur un écran étroit
   ========================================================================== */
/* Un tableau qui déborde se coupe au bord droit, sans rien qui dise de faire
   glisser. Sous 720 px chaque ligne devient une carte : première cellule en
   titre, puis « intitulé : valeur » pour les autres. Les intitulés sont posés
   sur les cellules par marketing/etiqueter_tableaux.py, depuis le <thead>. */
@media (max-width:720px){
  .tbl-wrap{overflow-x:visible;border:0;background:none;border-radius:0}
  .tbl-wrap table{min-width:0!important;display:block}
  .tbl-wrap thead{display:none}
  .tbl-wrap tbody{display:grid;gap:10px}
  .tbl-wrap tr{display:block;padding:8px 16px 6px;border:1px solid var(--line);border-radius:var(--r);
    background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.85))}
  .tbl-wrap tbody tr:hover{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.85))}
  .tbl-wrap .row-us{border-color:rgba(14,165,201,.45);background:rgba(14,165,201,.07)}
  .tbl-wrap td{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:12px;padding:9px 0;
    border-bottom:1px solid rgba(37,99,255,.08);font-size:.88rem;white-space:normal}
  .tbl-wrap td:last-child{border-bottom:0}
  .tbl-wrap td::before{content:attr(data-label);font-family:var(--f-disp);font-size:.62rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);padding-top:4px;line-height:1.4}
  .tbl-wrap td:first-child{display:block;padding:10px 0 8px;font-family:var(--f-disp);font-weight:600;
    font-size:.98rem;color:var(--ink);border-bottom:1px solid var(--line)}
  .tbl-wrap td:first-child::before{display:none}
  .tbl-wrap td:not([data-label])::before,.tbl-wrap td[data-label=""]::before{display:none}
  .tbl-wrap td:not([data-label]){display:block}
  /* Les petits tableaux de chiffres (trois colonnes courtes) restent des
     tableaux : empilés, « 90 / 45 » sous « Résolution de problèmes » ne se
     lisait plus comme une conversion. */
  .tbl-wrap--compact{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
  /* !important : certains tableaux portent un min-width en style inline. */
  .tbl-wrap--compact table{display:table;min-width:0!important;width:100%;table-layout:fixed}
  .tbl-wrap--compact th:first-child,.tbl-wrap--compact td:first-child{width:44%}
  .tbl-wrap--compact .td-num{white-space:normal}
  .tbl-wrap--compact thead{display:table-header-group}
  .tbl-wrap--compact tbody{display:table-row-group}
  .tbl-wrap--compact tr{display:table-row;border:0;padding:0;background:none}
  .tbl-wrap--compact td,.tbl-wrap--compact td:first-child{display:table-cell;padding:10px 10px;font-size:.84rem;
    font-family:var(--f-body);font-weight:400;color:var(--ink-2);border-bottom:1px solid var(--line);vertical-align:top}
  .tbl-wrap--compact td:first-child{color:var(--ink);font-weight:600}
  .tbl-wrap--compact tr:last-child td{border-bottom:0}
  .tbl-wrap--compact td::before{display:none}
  .tbl-wrap--compact thead th{padding:10px 10px;font-size:.75rem;white-space:normal}
}
@media (max-width:520px){
  .btn{white-space:normal;text-align:center;line-height:1.3}
  .btn-lg{padding:15px 24px}
  .cta-row .btn{flex:1 1 auto}
  .band{padding-block:clamp(44px,10vw,60px)}
  .phead{padding-block:40px 24px}
  h1{font-size:clamp(1.9rem,8.4vw,2.3rem)}
  .hero{padding-block:32px 48px}
  .hero h1{margin-bottom:16px}
  .hero .lead{margin-bottom:22px;font-size:.98rem}
  .lead{font-size:1rem}
  .pad-l{padding:24px 20px}
  .hero-note{gap:6px 14px}
  .exam-bar .st-nom{font-size:.86rem}
  .chrono{font-size:.95rem;padding:7px 12px}
  .voile-in{max-width:320px}
  .onglet{padding:9px 4px;font-size:.8rem;line-height:1.15}
}



/* ==========================================================================
   UPGRADE DU 06/09/2026 — « gros, gras, en mouvement »
   Anthony : des visuels qui arrivent au défilement, du gras et du gros,
   rien d'illisible, du dynamisme partout, des choses à manipuler.
   Règles inchangées : l'état statique du HTML est l'état FINAL ; tout ce qui
   bouge le fait en transform ; le chemin riche (grand écran + souris +
   mouvement autorisé) est le seul à porter lévitation, aimantation,
   inclinaison et parallaxe. Sans JS, sans souris, ou gelé : tout est là.
   ========================================================================== */

/* ---------- Typographie : plus grand, plus gras, plus rien sous 0,76 rem ---------- */
body{font-size:17.5px}
/* Gros, mais pas démesuré : au-delà de 1 000 px, un titre à 4,3 rem tombait sur
   cinq ou six lignes dans une colonne de 530 px. Le plafond baisse, le bas de
   la fourchette ne bouge pas — le téléphone reste tel quel.
   Et `pretty` remplace `balance` : `balance` raccourcit TOUTES les lignes pour
   les égaliser, ce qui laissait 100 px de vide à droite des titres longs. */
/* LA TAILLE D'UN TITRE DE SECTION, EN UN SEUL ENDROIT.
   « Une question du blanc n° 1 », « 4 gestes, dans cet ordre », « Ton score
   ne dépend pas de ce que tu sais » : ce sont trois titres de même rang, ils
   doivent faire la même taille. Elle vivait en double — une fois sur h2, une
   fois sur .statement — et les deux ont divergé le 07/09/2026. Un seul jeton
   les tient désormais tous les deux. */
:root{--t-section:clamp(2.1rem,4.9vw,2.85rem)}
h1{font-size:clamp(2.5rem,5.4vw,3.35rem);letter-spacing:-.035em;line-height:1.02;text-wrap:pretty}
h2{font-size:var(--t-section);letter-spacing:-.03em;line-height:1.04;text-wrap:pretty}
h3{font-size:clamp(1.3rem,2.2vw,1.72rem);line-height:1.18}
.lead{font-size:clamp(1.12rem,1.75vw,1.32rem);line-height:1.6;max-width:60ch}
.eyebrow{font-size:.8rem}
.card p{font-size:1.02rem;line-height:1.62}
.card-num{font-size:.8rem;letter-spacing:.12em}
.strip-cell{padding:32px clamp(14px,2vw,26px)}
.strip-cell .n{font-size:clamp(2.4rem,4.6vw,3.6rem);margin-bottom:10px}
.strip-cell .l{font-size:.98rem;color:var(--ink-2);line-height:1.45}
.hero-note{font-size:.88rem}
.viz-legende{font-size:.78rem}
.viz-effort .l{font-size:.76rem}
@media (min-width:421px){.viz-echelle .p{font-size:.7rem}}
.phone-bar{font-size:.66rem}.phone-q{font-size:.8rem}
.phone-opts i{height:26px;font-size:.64rem}
.plan-for{font-size:.95rem;min-height:0}
.plan-sub{font-size:.85rem}
.plan-sub strong{font-size:1rem}
.plan-feats li{font-size:.98rem}
.plans--3 .plan-feats li{font-size:.95rem}
.plan-price .p,.plans--3 .plan-price .p,.plans .plan-price .p{font-size:clamp(3rem,4.6vw,4rem)}
.plan-price .u{font-size:.92rem}
.plan-nm,.plans--3 .plan-nm,.plans .plan-nm{font-size:1.32rem}
.form-note{font-size:.82rem}
.foot a{font-size:.98rem}.foot-brand p{font-size:.95rem}.foot-legal p{font-size:.85rem}.foot-disclaimer{font-size:.78rem}
.foot h4,.foot .foot-h{font-size:.78rem}
.qa summary{font-size:1.15rem}
.qa-body{font-size:1.03rem}
.badge{font-size:.8rem;padding:9px 16px}
.chip{font-size:.8rem}
.marquee{font-size:1.05rem;padding:15px 0}
.score-label{font-size:.76rem}.score-max{font-size:.9rem}
.sub-row .nm{font-size:.9rem}.sub-row .vl{font-size:.86rem}
.timeline-hd{font-size:.76rem}.tl-foot{font-size:.75rem}.console-bar .ttl{font-size:.76rem}
.delta-chip{font-size:.86rem}
.crumb{font-size:.8rem}
.stepper h3{font-size:1.15rem}.stepper p{font-size:.98rem}
.nav-links a{font-size:.98rem}
.btn{font-size:1rem}.btn-sm{font-size:.9rem}.btn-lg{font-size:1.08rem;padding:18px 36px}
.sticky-cta .l{font-size:.86rem}.sticky-cta .l strong{font-size:.98rem}
.warranty h3{font-size:1.35rem}.warranty p{font-size:1.02rem}
.head h2+.lead{margin-top:22px}
.tbl-wrap tbody td{font-size:.98rem}
.prose p{font-size:1.04rem}.prose ul li,.prose ol li{font-size:1.02rem}
@media (max-width:520px){
  h1{font-size:clamp(2.15rem,9vw,2.6rem)}
  h2{font-size:clamp(1.85rem,8vw,2.3rem)}
  .lead,.hero .lead{font-size:1.06rem}
  .strip-cell .n{font-size:2.3rem}
  .btn-lg{padding:15px 24px}
}

/* ---------- Révélations : quatre directions, toujours les quatre filets ---------- */
.js .reveal.from-left{transform:translateX(-40px)}
.js .reveal.from-right{transform:translateX(40px)}
.js .reveal.zoom{transform:scale(.92)}
.js .reveal.up-big{transform:translateY(54px)}
.js .reveal.is-in{transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* UN DÉCALAGE HORIZONTAL DÉBORDE D'UN TÉLÉPHONE.
   Un bloc large de 335 px poussé de 40 px vers la droite finit à 395 sur un
   écran de 375 : la page gagne une barre de défilement horizontale AVANT même
   d'être révélée. Mesuré le 07/09/2026 sur six pages — accueil, diagnostic et
   tarifs compris. On garde l'animation, mais en vertical, où rien ne dépasse. */
@media (max-width:720px){
  .js .reveal.from-left,.js .reveal.from-right{transform:translateY(24px)}
}

/* Et le filet de sécurité : `clip` empêche toute transformation future de
   créer une barre horizontale. Contrairement à `hidden`, il ne fabrique pas
   de conteneur de défilement — les en-têtes en `position:sticky` continuent
   de coller. */
html{overflow-x:clip}

/* ---------- Le trait de progression, tout en haut (décoratif) ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--bleu),var(--cyan-vif),var(--violet));pointer-events:none}

/* ---------- Le héros : la scène, deux appareils et deux étiquettes ---------- */
.hero{overflow:hidden}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:14px}
.hero .lead+.lead{margin-bottom:30px;font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--ink-2)}
@media (min-width:1001px){.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.hero-scene{position:relative;padding:26px 0 70px;align-self:center}
.scene-ordi{position:relative;z-index:1}
.scene-tel{position:absolute;right:-4%;bottom:-4px;width:min(46%,238px);z-index:3}
.scene-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;
  background:#fff;border:1px solid var(--line-2);box-shadow:0 18px 44px -18px rgba(11,19,48,.45);
  font-family:var(--f-disp);font-weight:600;font-size:.98rem;color:var(--ink);white-space:nowrap}
.scene-chip b{font-size:1.3rem;letter-spacing:-.02em}
.scene-chip--a{top:-16px;left:-5%}
.scene-chip--promo.scene-chip--a{top:-26px;left:-9%}.scene-chip--a b{color:var(--coral)}
/* L'étiquette de la note : la seule preuve sociale de la page, donc la seule
   qui a le droit de crier. Elle est jaune quand tout le site est bleu, penchée
   comme une étiquette de prix, et elle arrive avec un rebond — c'est ce qui
   fait qu'on la voit. Aucune information ne dépend de l'animation : sans elle,
   l'étiquette est simplement posée, inclinée, lisible. */
.scene-chip--promo{
  background:linear-gradient(115deg,#FFD65A 0%,#FFA51F 38%,#FF8A00 62%,#FFD65A 100%);
  background-size:230% 100%;
  border:0;color:#2A1600;padding:12px 14px 12px 17px;border-radius:15px;gap:7px;
  box-shadow:0 20px 44px -14px rgba(255,145,0,.85),0 0 0 1px rgba(255,255,255,.55) inset;
  transform:rotate(-6deg);
  animation:promo-pose .55s cubic-bezier(.2,1.5,.35,1) both,
            promo-flotte 5.5s .62s ease-in-out infinite,
            grad-glisse 6s ease-in-out infinite alternate;
}
.scene-chip--promo b,.scene-chip--a.scene-chip--promo b{color:#2A1600;font-size:1.52rem;margin:0 2px}
.scene-chip--promo .ast{color:#2A1600;text-decoration:none;font-size:1.35em;font-weight:800;
  line-height:0;vertical-align:-.06em;margin-left:1px;opacity:.7}
.scene-chip--promo .ast:hover,.scene-chip--promo .ast:focus-visible{opacity:1}
.badge--note .ast{color:#2A1600;text-decoration:none;font-weight:800;margin-left:5px;padding:6px;opacity:.85}
@keyframes promo-pose{
  0%{opacity:0;transform:rotate(9deg) scale(.55)}
  100%{opacity:1;transform:rotate(-6deg) scale(1)}
}
@keyframes promo-flotte{50%{transform:rotate(-6deg) translateY(-7px)}}
@media (prefers-reduced-motion:reduce){
  .scene-chip--promo{animation:none}
}
#note-avis{flex-basis:100%}
#note-avis:target{background:rgba(37,99,255,.14);color:var(--ink);
  border-radius:7px;padding:3px 8px;margin:-3px -8px}
.scene-chip--b{left:-4%;bottom:-16px}.scene-chip--b b{color:var(--mint)}
.flotte-in{will-change:transform}
@media (max-width:1000px){.hero-scene{max-width:560px;margin-inline:auto;padding-bottom:64px}}
@media (max-width:600px){.scene-chip{display:none}.scene-tel{right:0;width:42%}.hero-scene{padding:12px 0 48px}}

/* Un vrai téléphone, corps sombre : la silhouette se reconnaît sans lire. */
.phone--dark{width:100%;border-radius:30px;border:1px solid #1B2447;background:#0B1330;padding:9px;box-shadow:0 30px 60px -28px rgba(11,19,48,.7)}
.phone--dark .phone-ecran{position:relative;border-radius:22px;background:#fff;overflow:hidden;padding:18px 12px 12px}
.phone-encoche{position:absolute;left:50%;top:7px;width:34%;height:6px;transform:translateX(-50%);background:#0B1330;border-radius:99px;z-index:3;opacity:.9}
.ps-bar{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:.66rem;color:var(--ink-3);margin:6px 0 10px}
.ps-bar b{color:var(--ink);font-weight:600}
.ps-q{font-family:var(--f-disp);font-weight:600;font-size:.86rem;line-height:1.35;color:var(--ink);margin-bottom:10px}
.ps-opts{display:grid;gap:6px}
.ps-opts i{display:flex;align-items:center;gap:8px;min-height:27px;padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:#F7F9FF;
  font-style:normal;font-family:var(--f-mono);font-size:.66rem;color:var(--ink-2)}
.ps-opts i b{width:14px;height:14px;border-radius:4px;border:1px solid var(--line-2);display:grid;place-items:center;font-size:.54rem;color:var(--ink-3);font-weight:600;flex:none}
.ps-opts i.sel{border-color:var(--cyan-vif);background:#E6F7FC;color:var(--ink)}
.ps-opts i.sel b{border-color:var(--cyan-vif);color:var(--cyan-d);background:#D3F1F8}
.ps-nav{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;margin-top:10px}
.ps-nav b{height:5px;border-radius:2px;background:rgba(37,99,255,.15)}.ps-nav b.on{background:var(--bleu)}
.ps-score{font-family:var(--f-disp);font-weight:700;font-size:2.4rem;letter-spacing:-.04em;color:var(--ink);line-height:1}
.ps-score small{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);letter-spacing:0;font-weight:400}
.ps-chip{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:99px;font-family:var(--f-mono);font-size:.62rem;
  background:rgba(224,52,92,.08);border:1px solid rgba(224,52,92,.3);color:#B8203F}   /* 5,6:1 sur le fond rosé : le corail y restait sous 4,5 */
.ps-rows{display:grid;gap:7px;margin-top:12px}
.ps-row{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:8px;align-items:center;font-size:.7rem;color:var(--ink-2)}
.ps-row .v{font-family:var(--f-mono);text-align:right;color:var(--ink)}
.ps-row .b{grid-column:1/-1;height:5px;border-radius:99px;background:rgba(37,99,255,.12);margin-top:-2px;overflow:hidden}
.ps-row .b i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan-vif),var(--violet))}
.ps-row .b i.bad{background:linear-gradient(90deg,var(--coral),rgba(224,52,92,.5))}
.ps-piege{margin-top:10px;padding:9px 10px;border-radius:9px;border:1px solid rgba(224,52,92,.3);background:rgba(224,52,92,.06);font-size:.68rem;line-height:1.45;color:var(--ink-2)}
.ps-piege b{color:var(--coral)}
.ps-ok{margin-top:8px;padding:8px 10px;border-radius:9px;border:1px solid rgba(14,159,110,.35);background:rgba(14,159,110,.07);font-size:.68rem;line-height:1.45;color:var(--ink-2)}
.ps-ok b{color:var(--mint)}
.ps-courbe{display:flex;align-items:flex-end;gap:6px;height:96px;margin-top:22px}
.ps-courbe i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--bleu),rgba(37,99,255,.35));position:relative}
.ps-courbe i::after{content:attr(data-v);position:absolute;top:-16px;left:0;right:0;text-align:center;font-family:var(--f-mono);font-size:.58rem;color:var(--ink-2)}
.ps-courbe i.last{background:linear-gradient(180deg,var(--mint),rgba(14,159,110,.35))}
.ps-legende{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--f-mono);font-size:.58rem;color:var(--ink-3)}

/* ---------- Le bandeau de quatre chiffres, plus une ligne d'information ---------- */
.strip--big .strip-cell{padding:36px clamp(14px,2vw,26px) 32px}
.strip--big .strip-cell .n{font-size:clamp(2.6rem,5vw,4.2rem)}
.strip-note{text-align:center;font-size:.98rem;color:var(--ink-2);padding:16px var(--pad);border-top:1px solid var(--line);background:rgba(255,255,255,.85)}
.strip-note a{color:var(--bleu);text-decoration:none;border-bottom:1px solid rgba(37,99,255,.35);font-weight:600}
.strip-note a:hover{border-color:var(--bleu)}

/* ---------- La phrase géante ---------- */
/* La phrase du diagnostic : grande, pas démesurée. À 5 rem dans une mesure de
   24 caractères, elle tombait sur cinq lignes sur un écran d'ordinateur. Le
   plancher ne bouge pas : le téléphone garde exactement la même taille. */
/* La phrase du diagnostic est un TITRE DE SECTION, pas une bannière : même
   jeton que les h2, mêmes réglages fins. Elle avait d'abord sa propre taille,
   plus grosse que tout le reste, puis une taille à elle plus petite — les
   deux fois, elle jurait avec les titres voisins. */
.statement{font-family:var(--f-disp);font-weight:700;font-size:var(--t-section);line-height:1.04;letter-spacing:-.03em;color:var(--ink);max-width:32ch;text-wrap:pretty}
.statement>span{display:inline-block}
.statement-lead{margin-top:28px}
.statement-band .g3{margin-top:clamp(40px,5vw,64px)}

/* ---------- Vignette : l'ordre de passage ---------- */
.viz-ordre{display:grid;gap:9px}
.viz-ordre .row{display:flex;gap:4px;align-items:center}
.viz-ordre .row .lb{width:74px;flex:none;font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3)}
.viz-ordre .row i{flex:1;aspect-ratio:1;border-radius:4px;background:var(--bleu);opacity:.85;transform-origin:center;
  transition:transform .45s var(--ease);transition-delay:calc(var(--i,0) * 30ms)}
.viz-ordre .row i.vide{background:transparent;border:1.5px dashed var(--coral);opacity:1}
.viz-ordre .row i.ok{background:var(--mint)}
.viz-init .viz-ordre .row i{transform:scale(0)}

/* ---------- « Essaie, en vrai » : une question qui répond ---------- */
.demo-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.demo-chrono{font-family:var(--f-mono);font-size:1.45rem;font-weight:700;color:var(--ink);padding:6px 16px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--glass);font-variant-numeric:tabular-nums}
.demo-chrono.is-late{color:var(--coral);border-color:rgba(224,52,92,.5)}
.demo-q{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.4;color:var(--ink);max-width:44ch;margin-bottom:10px}
.demo-q b{color:var(--bleu)}
.demo-opts{max-width:600px;margin-block:18px 0}
.demo-opts .opt{width:100%;text-align:left;cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none;background:#fff}
.demo-opts .opt .t{font-size:1.04rem;color:var(--ink)}
.demo-opts .opt .k{font-size:.8rem;width:30px;height:30px}
.demo-opts .opt:hover{border-color:var(--bleu);transform:translateX(4px)}
.demo-opts .opt.is-ko{border-color:rgba(224,52,92,.55);background:rgba(224,52,92,.07)}
.demo-opts .opt.is-ko .k{border-color:rgba(224,52,92,.5);color:var(--coral)}
.demo-opts .opt.is-ko .t{text-decoration:line-through;text-decoration-color:rgba(224,52,92,.6)}
.demo-opts.is-done .opt{cursor:default}
.demo-opts.is-done .opt:hover{transform:none}
.demo-verdict{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);animation:monte .4s var(--ease)}
.demo-verdict-hd{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.demo-res{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.25rem,2vw,1.5rem);color:var(--ink)}
.demo-res.ok{color:var(--mint)}.demo-res.ko{color:var(--coral)}
.demo-temps{font-family:var(--f-mono);font-size:.9rem;color:var(--ink-3)}
.demo-verdict p{font-size:1.03rem;line-height:1.65;margin-top:14px;max-width:64ch}
.demo-verdict .piege{margin-top:16px;max-width:64ch}
.demo-verdict .cta-row{margin-top:22px}
.demo-legende{margin-top:16px;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3)}

/* ---------- Le récit : un téléphone collé, quatre étapes qui l'allument ---------- */
.recit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.recit-tel{position:sticky;top:104px;display:flex;justify-content:center}
.recit-tel .phone--dark{width:min(100%,300px)}
.recit-ecran{display:none}
.recit-ecran.actif{display:block;animation:monte .45s var(--ease)}
.recit-etapes{display:grid}
.recit-etape{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:30px 0;border-top:1px solid var(--line);
  opacity:.55;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.recit-etape.actif{opacity:1;transform:translateX(6px)}
.recit-etape:last-child{border-bottom:1px solid var(--line)}
.recit-etape .n{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#fff;border:1px solid rgba(37,99,255,.35);
  color:var(--bleu);font-family:var(--f-disp);font-weight:700;font-size:1.05rem;box-shadow:var(--ombre)}
.recit-etape.actif .n{background:linear-gradient(135deg,var(--bleu),var(--violet));color:#fff;border-color:transparent}
.recit-etape h3{margin-bottom:8px}
.recit-etape p{font-size:1.04rem;color:var(--ink-2);line-height:1.6}
.recit-etape .ecran-inline{display:none}
@media (max-width:900px){
  .recit{grid-template-columns:minmax(0,1fr)}
  .recit-tel{position:static;margin-bottom:8px}
  .recit-etape,.recit-etape.actif{opacity:1;transform:none;grid-template-columns:52px minmax(0,1fr);gap:14px}
  .recit-etape .n{width:46px;height:46px}
  .recit--eclate .recit-tel{display:none}
  .recit--eclate .recit-etape .ecran-inline{display:block;grid-column:1/-1;margin-top:16px}
  .recit--eclate .recit-etape .ecran-inline .phone--dark{width:min(100%,280px);margin-inline:auto}
  .recit--eclate .recit-etape .ecran-inline .recit-ecran{display:block;animation:none}
}

/* ---------- Six sous-tests : des onglets et un écran d'ordinateur ---------- */
.sst{display:grid;gap:18px}
.sst-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.sst-tab{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:14px 14px 16px;border-radius:14px;
  border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;font-family:var(--f-disp);font-weight:600;font-size:.98rem;
  color:var(--ink-2);transition:transform .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);overflow:hidden;line-height:1.25}
.sst-tab b{font-family:var(--f-mono);font-size:.8rem;color:var(--bleu);font-weight:700}
.sst-tab:hover{transform:translateY(-3px);border-color:var(--bleu)}
.sst-tab.is-on{color:var(--ink);border-color:var(--bleu);background:linear-gradient(160deg,rgba(37,99,255,.12),rgba(106,76,255,.06))}
.sst-tab .prog{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--bleu),var(--violet))}
.sst-tab.is-on .prog.is-run{animation:sst-prog var(--sst-d,5s) linear forwards}
@keyframes sst-prog{to{transform:scaleX(1)}}
.sst-ecran{border:1px solid var(--line-2);border-radius:20px;background:#fff;box-shadow:var(--ombre);overflow:hidden}
.ordi-barre{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line);background:#EEF2FF}
.ordi-barre i{width:10px;height:10px;border-radius:50%}
.ordi-barre i:nth-child(1){background:#EE6A5F}.ordi-barre i:nth-child(2){background:#F5BD4F}.ordi-barre i:nth-child(3){background:#61C454}
.ordi-barre .url{margin-left:10px;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sst-p{display:none;padding:clamp(20px,3vw,34px)}
.sst-p.is-on{display:block;animation:monte .4s var(--ease)}
.sst-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.82rem;color:var(--ink-3);margin-bottom:14px}
.sst-meta span:first-child{color:var(--bleu);font-weight:700}
.sst-passage{font-size:.98rem;line-height:1.6;color:var(--ink-2);padding:12px 16px;border-left:3px solid var(--bleu);background:#F7F9FF;border-radius:0 12px 12px 0;margin-bottom:14px;max-width:70ch}
.sst-q{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.4;color:var(--ink);margin-bottom:14px;white-space:pre-line;max-width:60ch}
.sst-opts{display:grid;gap:8px;max-width:640px}
.sst-opts i{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#F7F9FF;font-style:normal;font-size:.95rem;color:var(--ink-2);line-height:1.4}
.sst-opts i b{width:24px;height:24px;border-radius:7px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);flex:none;background:#fff}
.sst-fig{max-width:460px;margin:0 0 14px;color:#2C3652}
.sst-fig svg{width:100%;height:auto}
.sst-p .btn-3{margin-top:18px}
@media (max-width:760px){.sst-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.sst-tab{font-size:.88rem;padding:12px}}
@media (max-width:420px){.sst-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Chemin riche : lévitation, inclinaison, aimantation ---------- */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .flotte-in{animation:levite var(--d,7s) ease-in-out var(--r,0s) infinite alternate}
  @keyframes levite{from{transform:translateY(0)}to{transform:translateY(-14px)}}
  [data-tilt]{transition:transform .35s var(--ease),border-color .4s var(--ease),box-shadow .35s var(--ease)}
  .btn.is-aimant{transition:transform .25s var(--ease),box-shadow .3s var(--ease),background-position .6s var(--ease)}
}


/* ==========================================================================
   UPGRADE, SUITE (06/09/2026) — la tablette, le récit à taille fixe, et les
   composants des autres pages (protocole, prix par blanc, trimestres).
   ========================================================================== */

/* ---------- La tablette : un appareil qui se reconnaît, à taille FIXE ----------
   Largeur pilotée par --tw ; la hauteur en découle (3 / 4,1). L'écran est posé en
   absolu dans le boîtier : ce qu'on y affiche ne change jamais la taille. */
.tablet{position:relative;width:var(--tw,320px);max-width:100%;aspect-ratio:3/4.3;border-radius:24px;background:#0B1330;
  border:1px solid #2A3560;box-shadow:0 34px 70px -30px rgba(11,19,48,.7),inset 0 0 0 1px rgba(255,255,255,.05);padding:18px 13px}
.tablet::before{content:"";position:absolute;top:7px;left:50%;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);
  background:#1A2450;box-shadow:inset 0 0 2px #000,0 0 0 1px #2A3560}
.tablet-ecran{position:absolute;inset:18px 13px;border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
/* La barre de l'écran dit où l'on est, rien d'autre : ni heure inventée, ni
   batterie — c'est l'application qu'on montre, pas un appareil de vitrine. */
.tablet-statut{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px 2px;font-family:var(--f-mono);font-size:.6rem;color:var(--ink-3);flex:none;white-space:nowrap;overflow:hidden;border-bottom:1px solid var(--line);margin-bottom:2px}
.tablet-statut b{color:var(--bleu);font-weight:600}
.tablet-corps{position:relative;flex:1;padding:10px 12px 12px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.tablet-corps>.recit-ecran{position:absolute;inset:10px 12px 12px}
.tablet .ps-rows{gap:6px}
.tablet .ps-score{font-size:2.2rem}
.tablet .ps-bar{white-space:nowrap;overflow:hidden}
.tablet .ps-bar span{overflow:hidden;text-overflow:ellipsis}

/* Le héros : la tablette remplace le téléphone, mêmes coins, même chevauchement. */
.scene-tel{width:min(48%,256px);bottom:-10px;right:-3%}
.scene-tel .tablet{--tw:100%}
.scene-tel .ps-q{font-size:.8rem;margin-bottom:8px}
/* La dalle du héros est la plus petite : les cinq propositions y tiennent au
   pixel près. Sans ces trois réglages, la grille se fait comprimer sous sa
   hauteur naturelle et la proposition E passe SOUS la barre des 15 questions. */
.scene-tel .ps-opts{gap:4px}
.scene-tel .ps-opts i{min-height:20px;padding:2px 8px;font-size:.62rem}
.scene-tel .ps-fil{margin-bottom:6px}
.scene-tel .ps-nav{margin-top:6px}
.scene-tel .ps-actions{margin-top:6px}
.scene-tel .ps-actions b{padding:4px 3px}
/* Une dalle de tablette est plus courte qu'un écran : les rangs des
   propositions y sont plus serrés, sinon les cinq ne tiennent pas sous une
   question de cinq lignes et la dernière passe sous la barre des questions. */
.tablet .ps-opts i{min-height:24px}
/* Filet : si le contenu dépasse malgré tout, il est coupé, jamais superposé. */
.tablet .ps-opts.grow{overflow:hidden}
@media (max-width:600px){.scene-tel{width:48%;right:0}}

/* ---------- Le récit, v2 : tablette collée et immobile, seul le texte défile ---------- */
.recit-tel .tablet{--tw:320px}
.recit-ecran{display:none}
.recit-ecran.actif{display:block;animation:monte .45s var(--ease)}
@media (min-width:901px){
  .recit{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .recit-tel{position:sticky;top:96px;align-self:stretch;display:block}
  .recit-tel .tablet{position:sticky;top:96px;top:max(96px,calc(50vh - 230px));margin-inline:auto}
  .recit-etape{min-height:36vh;align-content:center}
}
@media (max-width:900px){
  .recit--eclate .recit-etape .ecran-inline .tablet{--tw:min(100%,340px);margin-inline:auto}
  /* En colonne comme sur grand écran : l'écran doit remplir la dalle ici aussi. */
  .recit--eclate .recit-etape .ecran-inline .recit-ecran{display:flex;flex-direction:column;animation:none}
}
.recit-etape .ecran-inline{display:none}
@media (max-width:900px){.recit--eclate .recit-etape .ecran-inline{display:block;grid-column:1/-1;margin-top:16px}}
/* Le mot en jeu du sous-test 5 : souligné, comme au vrai test — dans les
   onglets du site comme dans l'épreuve et le rapport (`<u>` de la banque). */
u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--bleu)}
.jauge-p u{text-decoration:none}   /* celui-là est un repère dessiné, pas du texte */
.sst-piege{margin-top:16px;padding:12px 16px;border-radius:12px;border:1px solid rgba(224,52,92,.28);background:rgba(224,52,92,.06);font-size:.98rem;line-height:1.55;color:var(--ink-2);max-width:640px}
.sst-piege b{color:var(--coral)}

/* ---------- Le protocole (méthode) : six gestes sur une barre de vingt minutes ---------- */
.proto-bar{position:relative;height:14px;border-radius:99px;background:rgba(37,99,255,.12);margin:26px 0 10px}
.proto-zone{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--bleu),var(--violet));opacity:.85;left:var(--a,0%);width:var(--w,2%);min-width:10px}
/* Le trait rouge est parti : il marquait un instant que rien ne nommait.
   La zone colorée suffit — elle dit QUAND le geste se joue dans les 20 minutes. */
.proto-legende{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3)}
.proto-moment{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:99px;font-family:var(--f-mono);font-size:.78rem;background:rgba(224,52,92,.08);border:1px solid rgba(224,52,92,.3);color:var(--coral)}

/* ---------- Tarifs : le prix du blanc selon ce que tu composes ---------- */
.prix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.prix input[type=range]{width:100%;accent-color:var(--bleu);height:36px;cursor:pointer}
.prix-lbl{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);margin-top:4px}
.prix-out{font-family:var(--f-disp);font-weight:700;font-size:clamp(3rem,6vw,5rem);letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.prix-out small{font-size:.3em;font-weight:600;color:var(--ink-3);letter-spacing:0}
.prix-blancs{display:grid;grid-template-columns:repeat(15,1fr);gap:5px;margin-top:20px}
.prix-blancs i{aspect-ratio:1;border-radius:4px;background:rgba(37,99,255,.15);transition:background .25s var(--ease)}
.prix-blancs i.on{background:var(--bleu)}
.prix-blancs i.free{background:var(--mint)}
.prix-note{font-size:1rem;color:var(--ink-2);margin-top:14px;line-height:1.55}
.prix-q{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--ink);margin-bottom:14px}
@media (max-width:760px){.prix{grid-template-columns:minmax(0,1fr)}}

/* ---------- Les quatre trimestres, celui en cours allumé ---------- */
.trim-ligne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.trim{padding:16px 14px;border-radius:14px;border:1px solid var(--line);background:#fff}
.trim b{display:block;font-family:var(--f-disp);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:4px}
.trim span{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3)}
.trim.is-now{border-color:var(--bleu);background:linear-gradient(160deg,rgba(37,99,255,.12),rgba(106,76,255,.06))}
.trim.is-now::after{content:"trimestre en cours";display:inline-block;margin-top:10px;padding:3px 9px;border-radius:99px;background:var(--bleu);color:#fff;font-family:var(--f-mono);font-size:.66rem}
@media (max-width:600px){.trim-ligne{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Les pages secondaires : les mêmes gros titres, les mêmes cartes ---------- */
.phead h1{font-size:clamp(2.5rem,5.4vw,3.35rem)}
@media (max-width:360px){.phead h1{font-size:2.05rem;overflow-wrap:anywhere}}
.phead .lead{font-size:clamp(1.12rem,1.75vw,1.32rem)}
.steps .step h3{font-size:clamp(1.15rem,1.8vw,1.4rem)}
.steps .step p{font-size:1rem}
.card-num.tint-m,.card-num.tint-c,.card-num.dim{font-size:.8rem}
.h3-chiffre{font-size:clamp(2.6rem,4.5vw,3.4rem)!important;letter-spacing:-.04em}
.tablet-rapport{display:flex;justify-content:center}
.tablet-rapport .tablet{--tw:min(100%,340px)}

/* ---------- Ce qu'on voit sur la dalle : un écran plein, pas un bloc posé en haut ----------
   Un écran de tablette est une COLONNE : une barre, un bloc qui prend toute la
   hauteur restante, un pied. Sans cette règle, l'écran du récit s'arrêtait au
   tiers de la dalle — l'étape 4 surtout — et l'appareil paraissait vide. */
.tablet .recit-ecran.actif{display:flex;flex-direction:column}
.tablet .grow{flex:1 1 auto;min-height:0}
.tablet .ps-opts.grow{align-content:stretch}
.tablet .ps-rows.grow{align-content:space-between}
.tablet .ps-ok.grow{overflow:hidden}
.tablet .ps-courbe.grow{height:auto;min-height:96px;margin-top:14px}

/* Le fil du temps qui reste, sous la barre : le chronomètre du sous-test. */
.ps-fil{flex:none;height:4px;border-radius:99px;background:rgba(37,99,255,.14);overflow:hidden;margin:0 0 9px}
.ps-fil i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan-vif),var(--bleu))}

/* Le pied de l'épreuve : ce que l'élève peut faire de la question ouverte.
   L'action principale prend une fois et demie la place des autres — sinon
   « Question suivante » perd sa dernière lettre sur la petite tablette. */
.ps-actions{flex:none;display:flex;gap:6px;margin-top:9px}
.ps-actions b{flex:1;text-align:center;padding:6px 4px;border-radius:8px;border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.56rem;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.ps-actions b.pri{flex:1.5;background:var(--bleu);border-color:var(--bleu);color:#fff}

/* Le corrigé : la bonne réponse et celle qui a été cochée, marquées. */
.ps-opts i.bon{border-color:rgba(14,159,110,.45);background:rgba(14,159,110,.08);color:var(--ink)}
.ps-opts i.bon b{border-color:var(--mint);color:var(--mint);background:rgba(14,159,110,.12)}
.ps-opts i.faux{border-color:rgba(224,52,92,.4);background:rgba(224,52,92,.06);color:var(--ink-3)}
.ps-opts i.faux b{border-color:var(--coral);color:var(--coral);background:rgba(224,52,92,.1)}
.ps-opts i.bon::after{content:"✓";margin-left:auto;color:var(--mint);font-weight:700;font-size:.7rem}
.ps-opts i.faux::after{content:"✗";margin-left:auto;color:var(--coral);font-weight:700;font-size:.7rem}

/* La comparaison des blancs : l'échelle est réelle — hauteur = (score − 300) / 220. */
.ps-courbe{position:relative}
.ps-cible{position:absolute;left:0;right:0;bottom:var(--y,91%);border-top:1px dashed rgba(11,19,48,.3);pointer-events:none}
.ps-cible span{position:absolute;left:0;top:-13px;font-family:var(--f-mono);font-size:.52rem;color:var(--ink-3);
  background:#fff;padding:0 3px;border-radius:3px}
.ps-pied{flex:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:.64rem;line-height:1.4;color:var(--ink-2)}
.ps-pied b{color:var(--ink)}

/* Les marges mobiles du heros, posees APRES les regles du heros : une regle mobile
   ecrite plus haut perdrait contre elles (voir marketing/verifier_css_media.py). */
@media (max-width:520px){
  .hero h1{margin-bottom:16px}
  .hero .lead{margin-bottom:14px}
}

/* ==========================================================================
   DYNAMISME (07/09/2026, soir) — ce qui bouge en plus, sur le chemin riche
   (html.riche : ≥ 1024 px, souris, mouvement autorisé — posé par main.js).
   Chaque règle a son état de repos sans animation : rien ici ne conditionne
   la visibilité d'un contenu, et rien n'existe sur téléphone.
   ========================================================================== */

/* 1. La tablette du héros : une seule question, FIXE (la version qui tournait
   donnait la réponse de la démo). En relief pour qu'on la reconnaisse sur la
   console sombre : bord clair, barre d'accueil, et une inclinaison à partir
   de 601 px. Aucune animation : rien ne dépend de rien. */
.tablet::after{content:"";position:absolute;left:50%;bottom:7px;width:38px;height:4px;border-radius:2px;background:#2A3560;transform:translateX(-50%)}
.scene-tel .tablet{border-color:#3D4A85;background:linear-gradient(160deg,#1B2650,#0B1330);
  box-shadow:-22px 34px 64px -22px rgba(11,19,48,.8),0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07)}
.scene-tel .flotte-in{animation:none} /* droite et immobile : demandé le 07/09 au soir, deux fois */

/* 2. La console du héros : un halo suit la souris (main.js, 18). */
.hero .console::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(127,216,255,.16),transparent 62%)}
.hero .console.is-lit::after{opacity:1}

/* 3. Les deux puits de temps respirent. */
html.riche .tl-strip i.bad{animation:puits 2.4s ease-in-out infinite}
@keyframes puits{50%{box-shadow:0 0 28px rgba(224,52,92,.85);filter:brightness(1.15)}}

/* 4. Le numéro de l'étape active du récit se pose d'un petit rebond. */
html.riche .recit-etape.actif .n{animation:pose .45s var(--ease)}
@keyframes pose{40%{transform:scale(1.14)}}

/* 5. La démo : la bonne réponse coche, la mauvaise tremble. */
.demo-opts .opt.is-right::after{content:"✓";margin-left:auto;font-weight:700;color:var(--mint)}
html.riche .demo-opts .opt.is-right::after{display:inline-block;animation:pose .45s var(--ease)}
html.riche .demo-opts .opt.is-ko{animation:tremble .4s var(--ease)}
@keyframes tremble{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* 6. Les boutons pleins : un reflet passe au survol. */
.btn-1{position:relative;overflow:hidden}
.btn-1::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .8s var(--ease);
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%)}
.btn-1:hover::after{transform:translateX(130%)}

/* 7. Le fil des sections (main.js, 31) : un point par section titrée, le
   courant allumé, le libellé au survol. */
.dotnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;display:none;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:1200px){html.riche .dotnav{display:flex}}
.dotnav a{position:relative;display:block;width:10px;height:10px;border-radius:50%;background:rgba(11,19,48,.18);transition:background .3s var(--ease),transform .3s var(--ease)}
.dotnav a:hover{background:var(--bleu)}
.dotnav a.is-on{background:linear-gradient(135deg,var(--bleu),var(--violet));transform:scale(1.35)}
.dotnav a span{position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;font:600 .74rem var(--f-disp);color:var(--ink);
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:99px;padding:4px 10px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.dotnav a:hover span,.dotnav a:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}


/* ==========================================================================
   FINITION DU 08/09/2026 — « finalise le site une fois pour toutes »
   Anthony : du dynamisme, moins de grands espaces blancs, pro mais pas
   ennuyeux, téléphone impeccable, et que tout pousse à s'inscrire.
   Mesuré avant : accueil 12 572 px à 1 280 de large, 19 262 px à 390.
   Règles inchangées : l'état statique est l'état final, tout ce qui bouge le
   fait en transform, et rien ici ne conditionne la visibilité d'un bloc.
   Ce bloc est en FIN de feuille : chaque règle de base est donc suivie de
   sa redite pour téléphone, sinon elle écraserait celles d'au-dessus.
   ========================================================================== */

/* ---------- 1. Moins de vide entre les sections ---------- */
.band{padding-block:clamp(48px,5.6vw,80px)}
.band--tight{padding-block:clamp(36px,4.4vw,60px)}
.hero{padding-block:clamp(40px,5vw,64px) clamp(36px,5vw,60px)}
.hero-scene{padding:26px 0 52px}
.foot{margin-top:clamp(36px,5vw,64px)}
.statement-band .g3{margin-top:clamp(32px,4vw,48px)}
/* Le récit : 36 vh par étape laissait 250 px de vide sous deux lignes de
   texte. La tablette reste collée, les étapes se rapprochent. */
@media (min-width:901px){.recit-etape{min-height:24vh;padding:24px 0}}
@media (max-width:720px){
  .band{padding-block:clamp(36px,8vw,48px)}
  .band--tight{padding-block:clamp(30px,7vw,40px)}
  .hero{padding-block:28px 40px}
  .foot{margin-top:32px}
}
@media (max-width:600px){
  .hero-scene{padding:12px 0 40px}
  /* Le rapport du héros faisait 900 px de haut sur téléphone. */
  .hero .console-body{gap:16px}
  .hero .sub-list{gap:11px}
}
@media (max-width:520px){
  /* Quatre pastilles sur quatre lignes : plus petites, elles vont par deux. */
  .badge{font-size:.72rem;padding:7px 12px}
  .badges{gap:6px}
}

/* ---------- 2. Une section sombre au milieu de la page ---------- */
/* Douze sections sur le même fond clair : l'œil ne marque plus aucun temps.
   « On ne te vend pas du rêve » passe en sombre, c'est le seul moment de la
   page qui hausse le ton — il en prend la couleur. */
.band--sombre{
  color:rgba(255,255,255,.72);
  background:
    radial-gradient(55% 70% at 85% 0%,rgba(124,92,255,.38),transparent 60%),
    radial-gradient(45% 60% at 10% 100%,rgba(14,165,201,.28),transparent 60%),
    #0A0F1F}
.band--sombre .eyebrow{color:#5EE7FF}
.band--sombre .eyebrow::before{background:linear-gradient(90deg,transparent,#5EE7FF)}
.band--sombre h2{color:#fff}
.band--sombre .lead{color:rgba(255,255,255,.74)}
.band--sombre .strip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.band--sombre .strip-in{background:rgba(255,255,255,.12)}
.band--sombre .strip-cell{background:#0D1327}
.band--sombre .strip-cell .n{color:#fff}
.band--sombre .strip-cell .l{color:rgba(255,255,255,.66)}
.band--sombre .strip-cell .n.tint-c{color:#FF6B8B}

/* ---------- 3. L'appel qui accompagne la démo (grand écran) ---------- */
/* La colonne de gauche de « Essaie, en vrai » est collée et finissait sur
   500 px de vide sous quatre lignes. Elle porte maintenant le bouton, visible
   pendant qu'on répond. Sur téléphone, la démo vient d'abord : le bouton du
   verdict suffit. */
.essaie-cta{margin-top:28px}
.essaie-cta .form-note{margin-top:12px;max-width:34ch}
@media (max-width:900px){.essaie-cta{display:none}}

/* ---------- 4. Un reflet qui passe sur le bouton principal ---------- */
/* Toutes les 7 secondes, une lumière traverse le grand bouton du héros et
   celui de l'appel final. Purement décoratif : le bouton est entier sans lui. */
.btn-1.btn-lg{position:relative;overflow:hidden}
.btn-1.btn-lg::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);
  animation:reflet 7s 1.6s ease-in-out infinite}
@keyframes reflet{0%,18%{transform:translateX(-160%) skewX(-18deg)}30%,100%{transform:translateX(320%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.btn-1.btn-lg::after{animation:none}}

/* ---------- 5. Ce que le banc a relevé sur ce lot ---------- */
/* Les pastilles réduites tombaient à 11,5 px : la règle du 06/09 dit « plus
   rien sous 0,76 rem ». Et les liens nus (« Créer mon compte gratuit »,
   « Passer le blanc n° 1 → ») faisaient 21 à 23 px de haut : sous 32 px le
   banc les compte comme des cibles tactiles trop petites. */
@media (max-width:520px){.badge{font-size:.76rem;padding:7px 10px}}
.btn-3{min-height:32px}
.lien-nu{display:inline-block;padding:6px 0}

/* ---------- Les pages d'entraînement : questions publiques, corrigé déplié ---------- */
/* Une question par bloc, le corrigé dans un <details> : il est dans le DOM,
   donc indexé et lisible sans JavaScript, mais la page ne s'ouvre pas sur
   quinze réponses. */
.exos{display:grid;gap:14px;margin-top:clamp(28px,4vw,40px)}
.exo{border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,2.6vw,28px);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72))}
.exo .sst-q{margin-bottom:16px}
.exo-corrige{border-bottom:0;border-top:1px solid var(--line);margin-top:18px}
.exo-corrige summary{font-size:1rem;padding:16px 0 0}
.exo-corrige .qa-body{padding:14px 0 4px}
.exo-reponse{font-family:var(--f-disp);font-weight:600;color:var(--ink)}
.exo-reponse b{color:var(--bleu)}
/* La bonne proposition, dans le rappel du corrigé. */
.sst-opts i.bon{border-color:rgba(14,159,110,.45);background:rgba(14,159,110,.08);color:var(--ink)}
.sst-opts i.bon b{border-color:rgba(14,159,110,.45);color:var(--mint)}
.exo-corrige .piege{margin-top:16px}
@media (max-width:520px){
  .exo{padding:18px 16px}
  .exo .sst-q{font-size:1.02rem}
}
/* Ce qui vaut pour les quinze questions : la grille figée des conditions
   minimales, la méthode, le piège du sous-test. Une seule fois, en tête. */
.exo-regle{background:linear-gradient(160deg,rgba(37,99,255,.06),rgba(124,92,255,.04));
  border-color:rgba(37,99,255,.22)}
.exo-regle .sst-opts i{background:#fff}
.exo-regle .exo-reponse{margin-bottom:8px}
/* Compréhension : le texte support, une fois, avant ses questions. */
.exo-texte{background:#F7F9FF;border-color:rgba(37,99,255,.2)}
.exo-texte .sst-passage{max-width:74ch;font-size:1rem;line-height:1.72;border-left-width:4px;
  background:#fff;padding:18px 22px}
@media (max-width:520px){.exo-texte .sst-passage{padding:14px 16px;font-size:.98rem}}
/* Logique : la figure de l'énoncé, et les propositions dessinées. */
.exo-figure{margin:18px 0 4px;overflow-x:auto;color:var(--ink-2);max-width:100%}
.exo-figure svg{min-width:340px}
.sst-opts--figures{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;max-width:720px}
.sst-opts--figures i{flex-direction:column;align-items:center;gap:8px;padding:12px 8px}
.sst-opts--figures i svg{width:88px;height:88px;color:var(--ink-2)}
@media (max-width:520px){
  .sst-opts--figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exo-figure svg{min-width:300px}
}
/* Le fil d'Ariane : ses liens faisaient 21 px de haut, sous le seuil de la
   cible tactile. Le texte ne bouge pas, la zone touchable oui. */
.crumb a{display:inline-block;padding:6px 0}
/* UNE CARTE DE QUESTION DOIT POUVOIR RÉTRÉCIR SOUS SON CONTENU.
   `.exos` est une grille, et un élément de grille a `min-width:auto` : sa
   largeur minimale est celle de son contenu. La figure de Logique impose
   300 px, la carte réclamait donc 334 px, et la page débordait de 34 px sur
   un écran de 320. La figure garde sa largeur et défile DANS son cadre. */
.exos{grid-template-columns:minmax(0,1fr)}
.exo{min-width:0}
@media (max-width:360px){.exo-figure svg{min-width:260px}}

/* LE PIED DE PAGE À TROIS COLONNES.
   « Ressources » compte treize liens depuis les six pages d'entraînement, et
   plusieurs passaient sur deux lignes dans une colonne étroite. « Maison »
   descend donc sous « Produit », et la colonne libérée double la largeur des
   ressources : chaque lien tient sur une ligne. */
.foot-top{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.8fr)}
.foot-col{display:grid;gap:clamp(26px,3vw,36px);align-content:start}
.foot-ressources ul{gap:10px}
@media (max-width:860px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:520px){.foot-top{grid-template-columns:minmax(0,1fr)}}
/* « Ressources » sur deux sous-colonnes : les six entraînements à gauche, le
   reste à droite. Treize liens en une seule pile faisaient un pied de page de
   845 px de haut. `grid-auto-flow:column` avec sept rangées remplit la
   première sous-colonne avant la seconde, donc l'ordre du HTML décide de ce
   qui va où. Seulement au-dessus de 1 000 px : plus bas, la sous-colonne
   deviendrait trop étroite et « Entraînement Compréhension » repasserait sur
   deux lignes, ce qu'on vient précisément de corriger. */
@media (min-width:1001px){
  .foot-ressources ul{grid-auto-flow:column;grid-template-rows:repeat(7,auto);
    gap:10px clamp(18px,2.4vw,34px)}
}


/* =====================================================================
   MON ESPACE — LE CARNET (10/09/2026)
   La liste des blancs n'est plus une grille de trente cartes : une courbe
   des scores en tête, puis deux carnets côte à côte (à composer / composés)
   qui s'empilent sous 760 px. Les lignes sont bordées, pas encartées : trente
   blancs doivent tenir sans que la page s'allonge à l'infini.
   ===================================================================== */
.esp-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,24px);align-items:start}
@media (max-width:760px){.esp-deux{grid-template-columns:minmax(0,1fr)}}
.esp-bloc{padding:clamp(22px,3vw,30px)}
.esp-bloc .score-label{margin-bottom:0}

.esp-vedette{background:var(--bg-3);border-radius:var(--r);padding:clamp(16px,2.4vw,22px);margin:14px 0 6px}
.esp-vedette h3{font-size:clamp(1.15rem,2vw,1.35rem);margin:0 0 6px}
.esp-vedette .chip+h3{margin-top:12px}
.esp-vedette p{font-size:.94rem;color:var(--ink-2);line-height:1.55;margin:0 0 14px}

.esp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line);font-size:.98rem}
.esp-vedette+.esp-row,.esp-som+.esp-row,.score-label+.esp-row{border-top:0}
.esp-row .nm{min-width:0;line-height:1.35}
.esp-row .nm small{display:block;font-size:.82rem;color:var(--ink-3);margin-top:3px;line-height:1.45}
.esp-row .act{flex:none}
.esp-row .sc{font-family:var(--f-disp);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.esp-row--dim .nm{color:var(--ink-2)}
@media (max-width:560px){.esp-row--dim{flex-direction:column;align-items:flex-start;gap:10px}}
@media (max-width:340px){
  .esp-row{flex-wrap:wrap}
  .esp-row .act{flex:1 1 100%}
  .esp-row .act .btn{width:100%;justify-content:center}
}

.esp-som{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 10px;font-size:.98rem}
.esp-som .mono{font-size:.8rem;color:var(--ink-3)}
.esp-vide{font-size:.98rem;color:var(--ink-2);line-height:1.6;margin:14px 0 0}

.esp-plus summary{cursor:pointer;list-style:none;padding:12px 0 4px;font-family:var(--f-disp);font-weight:600;font-size:.9rem;color:var(--cyan);display:flex;align-items:center;gap:8px}
.esp-plus summary::-webkit-details-marker{display:none}
.esp-plus summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.esp-plus[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.esp-plus[open] summary{padding-bottom:0}
.esp-plus>.esp-row:first-of-type{border-top:1px solid var(--line)}

.esp-courbe-tete{margin-bottom:18px}
.esp-courbe-zone{min-height:200px}
.esp-courbe-zone svg{display:block;width:100%;height:auto;overflow:visible}
.esp-grille{stroke:var(--line);stroke-width:1}
.esp-axe,.esp-sous,.esp-val,.esp-barre-l{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.esp-axe{font-size:12px;fill:var(--ink-3)}
.esp-sous{font-size:11px;fill:var(--ink-3)}
.esp-sous--prochain{fill:var(--bleu)}
.esp-val{font-size:13px;font-weight:700;fill:var(--ink)}
.esp-barre{stroke:var(--violet);stroke-width:1.2;stroke-dasharray:5 4}
.esp-barre-l{font-size:12px;fill:var(--violet-d)}
.esp-trait{fill:none;stroke:var(--mint);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.esp-trait--suite{stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:3 5;opacity:.7}
.esp-point{fill:var(--mint);stroke:#FFFFFF;stroke-width:2.5}
.esp-point--prochain{fill:#FFFFFF;stroke:var(--bleu);stroke-width:2.5}

/* Couleur (10/09/2026, soir). Chaque panneau de l'espace porte sa teinte,
   posée en dégradé discret dans le coin haut-gauche, et son eyebrow assorti :
   violet pour le plan, menthe pour la progression, bleu pour ce qui reste à
   composer, cyan pour ce qui l'est. La vedette est le seul aplat franc. */
.tint-cyan{color:var(--cyan)}
#e-plan{background:linear-gradient(160deg,rgba(106,76,255,.13),#FFFFFF 58%);border-color:rgba(106,76,255,.3)}
#e-plan .score-label{color:var(--violet)}
#e-progression{background:linear-gradient(160deg,rgba(14,159,110,.12),#FFFFFF 46%);border-color:rgba(14,159,110,.3)}
#e-progression .score-label{color:var(--mint)}
#e-afaire{background:linear-gradient(160deg,rgba(37,99,255,.11),#FFFFFF 56%);border-color:rgba(37,99,255,.3)}
#e-afaire .score-label{color:var(--bleu)}
#e-faits{background:linear-gradient(160deg,rgba(14,165,201,.13),#FFFFFF 56%);border-color:rgba(14,165,201,.32)}
#e-faits .score-label{color:var(--cyan)}
.esp-vedette{background:linear-gradient(135deg,rgba(37,99,255,.17),rgba(106,76,255,.10));border:1px solid rgba(37,99,255,.28)}
.esp-row .sc{color:var(--cyan-d)}
.esp-delta{display:inline-block;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.02em;padding:2px 9px;border-radius:100px;margin-left:8px;vertical-align:2px}
.esp-delta--m{background:rgba(14,159,110,.13);color:var(--mint)}
.esp-delta--c{background:rgba(224,52,92,.11);color:var(--coral)}
.esp-meilleur{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.02em;padding:4px 11px;border-radius:100px;background:rgba(14,159,110,.13);color:var(--mint)}
.esp-aire{fill:url(#esp-aire-g)}
.esp-plus summary{color:var(--bleu)}
#e-faits .esp-plus summary{color:var(--cyan)}