/* ==========================================================================
   generate.io, plateforme de formation
   Direction artistique d'origine : moodboard Generate.io. Habillage Incisiv en fin de fichier (15/09/2026). Moodboard : papier chaud, titres Inter Tight
   très serrés, libellés en mono espacés, un seul accent ambre par écran,
   angles arrondis (12 / 18 / 24 px), élévation par filet avant tout.
   ========================================================================== */

@font-face{font-family:"Mona Sans";src:url(MonaSans-latin.woff2) format("woff2");font-weight:200 900;font-display:swap}

/* Jetons d'Incisiv (Dashboard-Setters, app/globals.css), posés sur les NOMS de la plateforme : la composition
   ne bouge pas, seules les valeurs changent. L'ambre devient le bleu des courbes, la nuit devient le bouton
   (noir en clair, blanc dans le noir d'Instagram). Maquette du 15/09/2026. */
:root{
  --paper:#f4f3f0;--surface:#fbfaf8;--surface-2:rgb(20 19 16 / .035);
  --ink:#131210;--ink-2:#5c5a54;--ink-3:#8d8a82;--ink-4:#aaa79f;
  --line:rgb(20 19 16 / .09);--line-2:rgb(20 19 16 / .06);--line-fort:rgb(20 19 16 / .16);
  --night:#131210;--night-2:#2b2a27;--on-night:#fbfaf8;--on-night-2:rgb(251 250 248 / .62);
  --gold:#2b8fff;--gold-600:#1f7ae6;--gold-700:#1b6fd4;--gold-100:rgb(43 143 255 / .24);--gold-050:rgb(43 143 255 / .08);--on-gold:#fff;
  --data:#2b8fff;--notif:#ff3040;
  --sh-1:0 1px 2px rgb(20 19 16 / .04),0 8px 24px -12px rgb(20 19 16 / .1);
  --sh-2:0 1px 2px rgb(20 19 16 / .05),0 18px 40px -20px rgb(20 19 16 / .28);
  --points-clairs:radial-gradient(circle at 1px 1px, rgb(20 19 16 / .12) 1px, transparent 0);
  --hachure:rgb(20 19 16 / .022);
  color-scheme:light; /* Blanc seulement (Aidan, 16/09/2026) : plus de thème sombre, ni par le système ni par réglage. */
  --r-badge:999px;--r-ctl:12px;--r-card:14px;--r-lg:14px;
  --ease:cubic-bezier(.22,.61,.36,1);--doux:cubic-bezier(.4,0,.15,1);
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ---------- Primitives typographiques ------------------------------- */

.mono{
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:500;
}

/* Le libellé de section : point ambre + texte mono espacé. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--gold);flex:none;
}
.eyebrow.plain::before{display:none}
.eyebrow.gold{color:var(--gold-700)}

h1,h2,h3{
  margin:0;font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:700;letter-spacing:-.038em;line-height:1.06;text-wrap:balance;
}
h1{font-size:clamp(34px,5.2vw,56px);font-weight:500;letter-spacing:-.032em}
/* Le passage surligné garde le gras : c'est lui qui porte l'argument. */
h1 .hl{font-weight:800;letter-spacing:-.042em}
h2{font-size:clamp(24px,3.2vw,34px)}
h3{font-size:19px;font-weight:700;letter-spacing:-.03em}

.lede{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:14px 0 0}
.note{font-size:13.5px;line-height:1.5;color:var(--ink-3)}

/* La ligne de renfort sous le sous-titre : filet ambre, pas de fond. */
.accroche{
  margin:22px 0 0;padding-left:16px;border-left:3px solid var(--gold);
  font-size:16px;line-height:1.5;color:var(--ink-2);max-width:58ch;
}
.accroche b{color:var(--ink);font-weight:600}

/* La pastille surlignée du moodboard : fond blanc posé sur le titre. */
.hl{
  display:inline-block;background:var(--surface);
  border-radius:var(--r-ctl);padding:.02em .22em .07em;margin:0 -.06em;
  box-shadow:var(--sh-1);
}

/* ---------- Structure ------------------------------------------------ */

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media (max-width:767px){ .wrap{padding:0 20px} }

.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line-2);
}
.topbar-in{
  max-width:var(--max);margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;gap:20px;
}
@media (max-width:767px){ .topbar-in{padding:12px 20px} }

.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:700;letter-spacing:-.032em;font-size:17px;color:var(--ink);
}
.mark{width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--ink)}
.mark svg{width:26px;height:26px;display:block}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}

.back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;color:var(--ink-2);padding:6px 10px;
  border-radius:var(--r-ctl);
}
.back:hover{background:var(--line-2);color:var(--ink)}
.back svg{width:15px;height:15px}

/* Compteur de progression de la barre du haut */
.tick{
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* Sections : denses (96px) ou aérées (128px). Jamais deux aérées d'affilée. */
.sec{padding:96px 0}
.sec.airy{padding:128px 0 96px}
@media (max-width:767px){ .sec{padding:64px 0} .sec.airy{padding:72px 0 56px} }

/* ---------- Boutons -------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 24px;border-radius:var(--r-ctl);
  font-size:15px;font-weight:600;letter-spacing:-.018em;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .14s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn.sm{height:44px;padding:0 18px;font-size:14px}

.btn-primary{background:var(--night);color:var(--on-night)}
.btn-primary:hover{background:var(--night-2)}
.btn-primary:active{background:var(--night-2)}

.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-600)}
.btn-gold:active{background:var(--gold-600)}

.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);}

.btn[disabled],.btn.off{
  background:var(--line-2);color:var(--ink-3);cursor:not-allowed;pointer-events:none;border-color:transparent;
}

/* ---------- Cartes --------------------------------------------------- */

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px;
}
.panel{
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:24px;
}
.slab{
  background:var(--night);color:var(--on-night);
  border-radius:var(--r-lg);padding:28px 32px;
}
.slab .eyebrow{color:var(--on-night-2)}
.slab b{color:var(--on-night);font-weight:600}

/* ---------- Progression : l'anneau et la suite du parcours ---------- */

.hud{
  display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 32px;
}
@media (max-width:767px){ .hud{grid-template-columns:1fr;gap:24px;padding:24px} }

.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{width:104px;height:104px;transform:rotate(-90deg);display:block}
.ring .trk{fill:none;stroke:var(--line-2);stroke-width:8}
.ring .bar{fill:none;stroke:var(--gold);stroke-width:8;stroke-linecap:round;
           transition:stroke-dasharray .7s var(--ease)}

/* Le même reflet que sur l'étape en cours dans la barre d'étapes : une
   lumière diffuse qui passe, pas un trait. Le flou du filtre adoucit les
   deux extrémités, le masque la confine à la portion ambre. */
.ring .lueur{
  stroke:#fff;stroke-width:7;stroke-linecap:round;opacity:.42;
  animation:balayeArc 4.5s ease-in-out infinite;
}
@keyframes balayeArc{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:calc(var(--c) * -1px)}
}
.ring-v{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;font-weight:500;
  font-size:24px;letter-spacing:-.04em;
}
.ring-v small{display:block;font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin-top:2px}

.steps{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.step{
  width:34px;height:5px;border-radius:99px;background:var(--line-2);flex:none;
  transition:background .3s ease;
}
.step.done{background:var(--gold)}
.step.now{background:var(--ink)}

/* Le dernier module vu et le prochain à consommer, sur un fil conducteur. */
.suite{
  position:relative;display:flex;flex-direction:column;gap:14px;
  margin-top:20px;padding-left:1px;
}
/* Le fil qui relie les points, tracé de haut en bas à l'affichage. */
.suite::before{
  content:'';position:absolute;left:8px;top:11px;bottom:11px;width:1px;
  background:var(--line);transform-origin:top;
  animation:traceFil .6s var(--ease) .35s both;
}
@keyframes traceFil{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.suite-i{
  position:relative;z-index:1;display:flex;align-items:flex-start;gap:13px;
  color:var(--ink);border-radius:var(--r-ctl);
  padding:3px 8px 3px 0;margin-left:-1px;
}
.suite-i:hover .suite-txt b{color:var(--gold-700)}

.suite-pt{
  width:17px;height:17px;border-radius:50%;flex:none;margin-top:3px;
  background:var(--surface);border:1.5px solid var(--line);
  transition:transform .25s var(--ease),box-shadow .3s ease;
  animation:pose .45s var(--ease) both;
}
.suite-i:nth-child(1) .suite-pt{animation-delay:.42s}
.suite-i:nth-child(2) .suite-pt{animation-delay:.54s}
@keyframes pose{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* Le module déjà vu : point plein, avec le halo des étapes acquises. */
.suite-i.faite .suite-pt{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgb(43 143 255 / .18);
}
/* Celui à suivre : point creux cerclé d'encre, qui respire doucement. */
.suite-i.active .suite-pt{
  border-color:var(--ink);border-width:2px;
  animation:pose .45s var(--ease) .54s both, pulseSuite 3.4s var(--ease) 1.2s infinite;
}
@keyframes pulseSuite{
  0%,72%{box-shadow:0 0 0 0 rgba(16,20,24,.16)}
  88%{box-shadow:0 0 0 7px rgba(16,20,24,0)}
  100%{box-shadow:0 0 0 0 rgba(16,20,24,0)}
}
.suite-i:hover .suite-pt{transform:scale(1.14)}

.suite-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.suite-txt b{
  font-size:14.5px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .18s ease;
}
.suite-txt em{
  font-style:normal;
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:10.5px;font-weight:500;letter-spacing:.07em;color:var(--ink-3);
}
.suite-i.faite .suite-txt em{color:var(--gold-700)}

.suite-i svg{
  width:15px;height:15px;flex:none;margin-top:5px;color:var(--ink-4);
  transition:transform .25s var(--ease),color .18s ease;
}
.suite-i:hover svg{transform:translateX(3px);color:var(--ink)}

/* ---------- Liste des modules ---------------------------------------- */

.mods{display:flex;flex-direction:column;gap:12px;margin-top:28px}

.mod{
  display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:24px 28px;
  transition:border-color .2s ease,transform .2s var(--ease),box-shadow .2s ease;
}
@media (max-width:767px){
  .mod{grid-template-columns:44px 1fr;gap:16px;padding:20px}
  .mod-go{grid-column:1/-1;justify-self:stretch}
}
.mod:hover{border-color:var(--line-fort);transform:translateY(-1px);box-shadow:var(--sh-1)}
.mod.locked{background:var(--surface-2);border-color:var(--line-2)}
.mod.locked:hover{transform:none;box-shadow:none;border-color:var(--line-2)}
.mod.done{border-left:3px solid var(--gold)}

.mod-n{
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:22px;font-weight:500;letter-spacing:-.04em;
  color:var(--ink-4);font-variant-numeric:tabular-nums;
}
.mod.done .mod-n{color:var(--gold-700)}
.mod.locked .mod-n{color:var(--ink-4)}

.mod-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mod-t{font-size:18px;font-weight:600;letter-spacing:-.028em}
.mod.locked .mod-t{color:var(--ink-3)}
.mod-r{font-size:14px;color:var(--ink-3);margin-top:5px;max-width:62ch}

.tag{
  display:inline-flex;align-items:center;
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-badge);border:1px solid var(--line);
  color:var(--ink-3);
}
.tag.ok{background:var(--gold-050);border-color:var(--gold-100);color:var(--gold-700)}
.tag.now{background:var(--night);border-color:var(--night);color:var(--on-night)}
.tag.sim{background:var(--surface-2)}

.lock{width:16px;height:16px;color:var(--ink-4);flex:none}

/* ---------- Page module ---------------------------------------------- */

.mhead{display:flex;align-items:flex-start;gap:24px}
.mhead-n{
  margin-left:auto;font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:12px;font-weight:500;color:var(--ink-4);letter-spacing:.06em;flex:none;
}

.player{
  position:relative;width:100%;aspect-ratio:16/9;margin-top:32px;
  background:#000;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

.player-todo{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:14px;text-align:center;padding:32px;color:rgb(255 255 255 / .62);
}
.player-todo .eyebrow{color:rgb(255 255 255 / .62)}
.player-todo code{
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:12.5px;
  background:rgba(255,255,255,.08);color:#fff;padding:4px 8px;border-radius:var(--r-badge);
}

.mfoot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:32px;padding-top:28px;border-top:1px solid var(--line);
}
.mfoot .spacer{flex:1}
.mfoot .pied-question{margin:0;font-weight:600;color:var(--ink)}

/* ---------- Bandeau du simulateur ------------------------------------ */

.simcard{
  margin-top:32px;border:1px solid var(--gold-100);background:var(--gold-050);
  border-radius:var(--r-lg);padding:28px 32px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.simcard .grow{flex:1;min-width:260px}
.simcard h3{margin-bottom:6px}

/* ---------- Barre de progression du bas (comme les slides) ----------- */

.rail{
  position:fixed;left:0;right:0;bottom:0;height:3px;
  background:var(--line-2);z-index:60;
}
.rail i{
  display:block;height:100%;width:0;background:var(--gold);
  transition:width .6s var(--ease);
}

/* ---------- Bandeau de fin ------------------------------------------- */

.done-banner{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:28px;padding:28px 32px;border-radius:var(--r-lg);
  background:var(--night);color:var(--on-night);
}
.done-banner .grow{flex:1;min-width:260px}
.done-banner h3{color:var(--on-night)}
.done-banner p{margin:6px 0 0;color:var(--on-night-2);font-size:14.5px}

footer.site{
  border-top:1px solid var(--line-2);margin-top:24px;
  padding:32px 0 56px;color:var(--ink-3);font-size:13px;
}
footer.site .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
footer.site .reset{margin-left:auto;color:var(--ink-3);text-decoration:underline;
                   text-underline-offset:3px;font-size:12.5px}
footer.site .reset:hover{color:var(--ink)}
/* Une fois armé, le lien annonce clairement ce que le second clic va faire. */
footer.site .reset.arme{color:var(--gold-700);font-weight:600;text-decoration-thickness:2px}

.legal{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);
}

/* ---------- Apparition ----------------------------------------------- */

/* Entrée par animation CSS et non par observateur : un observateur qui ne
   se déclenche pas (mise en page pas encore stabilisée, page jamais
   défilée) laissait le bloc invisible. Une animation, elle, se termine. */
@keyframes entreBloc{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.rise{animation:entreBloc .6s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rise{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   PASSE MOBILE
   Le point de rupture principal est à 767 px (tablette → mobile), avec un
   second passage à 480 px pour les petits téléphones.
   ========================================================================== */

@media (max-width:767px){

  /* ---- Titres : le clamp de base restait trop haut sur un écran étroit ---- */
  h1{font-size:clamp(26px,6.6vw,56px);letter-spacing:-.03em;line-height:1.1}
  h2{font-size:clamp(21px,4.6vw,34px)}
  .lede{font-size:16px}
  .accroche{font-size:15px;padding-left:13px;margin-top:18px}

  /* ---- Barre du haut ---- */
  /* Cible tactile : 44 px minimum, la marque n'en faisait que 22. */
  .brand{font-size:15px;gap:8px;min-height:44px}
  .mark,.mark svg{width:23px;height:23px}
  .topbar-right{gap:10px}
  /* La barre doit tenir sur une ligne : sous 400 px, les trois blocs
     passaient à la ligne les uns après les autres. */
  .topbar-in{gap:12px;flex-wrap:nowrap}
  .brand{white-space:nowrap;flex:none}
  .tick{font-size:10.5px;letter-spacing:.04em;white-space:nowrap;flex:none}
  .back{font-size:13px;padding:6px 8px;white-space:nowrap;flex:none}

  /* ---- Progression ---- */
  .hud{padding:22px 18px;gap:20px}
  .ring,.ring svg{width:88px;height:88px}
  .ring-v{font-size:21px}
  .steps{gap:6px;margin-top:14px}
  .step{width:100%;flex:1 1 0;min-width:0}
  .suite{gap:12px;margin-top:16px}
  .suite-txt b{font-size:14px}
  .legal{font-size:9.5px;letter-spacing:.07em}

  /* ---- Cartes de module ---- */
  .mod{padding:18px 16px;gap:14px;border-radius:16px}
  .mod-n{font-size:19px}
  .mod-t{font-size:16.5px}
  .mod-r{font-size:13.5px;margin-top:4px}
  .mod-h{gap:8px}
  .tag{font-size:9.5px;padding:3px 8px}
  .mod-go{margin-top:4px}
  .mods{gap:10px}

  /* ---- Page module ---- */
  .mhead{gap:12px}
  .mhead-n{font-size:11px}
  .player{margin-top:24px;border-radius:16px}
  .player-todo{padding:22px;gap:10px}
  .player-todo p{font-size:14px}

  /* Les boutons de pied de page prennent toute la largeur : ils sont
     l'action principale de l'écran et la cible tactile doit être franche. */
  .mfoot{margin-top:26px;padding-top:22px;gap:10px}
  .mfoot .btn{width:100%}
  .mfoot .spacer{display:none}

  .simcard{padding:22px 18px;gap:18px;border-radius:20px;margin-top:26px}
  .simcard .btn{width:100%}
  .simcard h3{font-size:17.5px}

  .done-banner{padding:22px 18px;border-radius:20px}
  .done-banner .btn{width:100%}

  /* ---- Boutons ---- */
  .btn{height:50px;font-size:15px}
  .btn.sm{height:44px}

  footer.site{padding:26px 0 44px;font-size:12.5px}
  footer.site .wrap{gap:10px}
  footer.site .reset{margin-left:0}
}

@media (max-width:480px){
  h1{font-size:clamp(24px,7.2vw,32px)}
  .sec.airy{padding:56px 0 44px}
  .sec{padding:52px 0}
  .hud{padding:20px 16px}
  .eyebrow{font-size:10px;letter-spacing:.08em;gap:8px}
  .mod{grid-template-columns:38px 1fr}
  .mod-n{font-size:17px}
  .topbar-in{gap:8px;padding:11px 16px}
  .brand{font-size:14px;gap:7px}
  .mark,.mark svg{width:21px;height:21px}
  .tick{font-size:9.5px}
  .back{font-size:12.5px;padding:5px 6px}
}


/* ---------- Inscription ---------------------------------------------- */

.inscription{
  display:flex;flex-direction:column;gap:22px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 32px;
}
.inscription h3{margin:8px 0 0;font-size:24px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.large{grid-column:1/-1}
.champ span{
  font-family:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.champ input{
  height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);font:inherit;font-size:16px;color:var(--ink);outline:none;
  transition:border-color .16s ease;width:100%;
}
.champ input:focus{border-color:var(--ink)}
.champ input.ko{border-color:var(--notif)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.5;cursor:pointer}
.consent input{margin:3px 0 0;accent-color:var(--gold);width:16px;height:16px;flex:none}
.inscription .actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.erreur{font-size:13.5px;color:var(--notif)}
#pied-info b{font-weight:600;color:var(--ink)}
@media (max-width:767px){ .inscription{padding:24px} .champs{grid-template-columns:1fr} }

/* ---------- Page Confidentialité ------------------------------------- */

.rgpd{max-width:68ch;margin-top:40px;display:flex;flex-direction:column;gap:28px}
.rgpd-s{padding-top:24px;border-top:1px solid var(--line-2)}
.rgpd-s h3{margin-bottom:10px}
.rgpd-s p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.rgpd-s p+p{margin-top:10px}
.rgpd-s ul{margin:6px 0 0;padding-left:20px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.rgpd-s li+li{margin-top:6px}
.rgpd-s b{font-weight:600;color:var(--ink)}
.rgpd-s a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.rgpd-s a:hover{text-decoration-color:var(--ink)}
.consent a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* ---------- Accès réservé : la consigne ------------------------------ */
.acces{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.acces b{color:var(--ink);font-weight:600}
.acces a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}


/* ==========================================================================
   FINITIONS INCISIV (maquette du 15/09/2026)
   Après les règles d'origine, pour qu'elles l'emportent : capsules, pastilles,
   graisses, mouvements courts. Aucune classe nouvelle, aucune composition
   nouvelle : le moteur (app.js) rend exactement le même HTML.
   ========================================================================== */

body{letter-spacing:0;font-size:15.5px}
h1,h2,h3{font-weight:600;letter-spacing:-.03em}
h1{font-weight:600;letter-spacing:-.035em;line-height:1.08}
h1 .hl{font-weight:700;letter-spacing:-.04em}
/* La pastille du titre : une plaque blanche à filet fin, comme les puces d'Incisiv. */
.hl{background:var(--surface);border:1px solid var(--line-fort);border-radius:12px;box-shadow:var(--sh-1);padding:.02em .24em .08em}
.lede{color:var(--ink-2)}

/* Les libellés : capitales espacées en Mona Sans, sans monospace. */
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--ink-3)}
.eyebrow::before{background:var(--gold)}
.mono,.tick,.mod-n,.ring-v,.mhead-n{font-weight:600;font-variant-numeric:tabular-nums}
.tick{letter-spacing:.08em;font-size:11.5px}

/* La barre du haut : le verre d'Incisiv. */
.topbar{background:color-mix(in srgb,var(--paper) 82%,transparent);border-bottom:1px solid var(--line)}
.brand{font-weight:600;letter-spacing:-.03em}

/* Boutons : capsules. Noir pour l'action principale, bleu pour avancer, contour pour revoir. */
.btn{border-radius:999px;height:50px;padding:0 22px;font-weight:600;letter-spacing:-.01em;
  transition:background-color .2s,border-color .2s,color .2s,scale .22s var(--doux),box-shadow .3s}
.btn:hover{scale:1.03;transform:none}
.btn:active{scale:.97}
.btn svg{transition:transform .52s var(--doux)}
.btn:hover svg{transform:translateX(3px)}
.btn.sm{height:40px;padding:0 16px;font-size:13.5px}
.btn-primary{box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--night)}
.btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:0 12px 28px -14px rgb(43 143 255 / .7)}
.btn-ghost{border:1px solid var(--line-fort);background:var(--surface);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn[disabled],.btn.off{scale:1;box-shadow:none}

/* Étiquettes : les puces d'Incisiv (point, capsule, sans capitales). */
.tag{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;padding:3px 10px;gap:6px;border-color:var(--line-fort);color:var(--ink-2)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
.tag.ok{background:var(--gold-050);border-color:var(--gold-100);color:var(--gold-700)}
.tag.now{background:var(--night);border-color:var(--night);color:var(--on-night)}
.tag.sim{background:var(--surface-2);border-color:var(--line)}

/* Cartes et plaques : 14 px, filet fin. */
.hud,.card,.mod,.simcard,.done-banner,.inscription,.panel{border-radius:14px}
.hud,.mod,.inscription,.card{border-color:var(--line)}
.mod-t{font-weight:600;letter-spacing:-.025em}
.mod-n{font-size:20px;letter-spacing:-.03em}

/* Anneau et étapes : le bleu des courbes. */
.ring .bar{stroke:var(--gold)}
.ring-v{font-size:23px;letter-spacing:-.04em}
.ring-v small{letter-spacing:.08em;font-weight:600}

/* Lecteur : plein cadre noir, filet fin, arrondi d'Incisiv. */
.player{border-radius:14px;border-color:var(--line)}
/* Le fond noir du cadre paraissait en liseré à l'arrondi, autour de l'image (vérifié le 15/09/2026) : fonds
   transparents, sauf l'écran « vidéo à venir », dont le texte blanc a besoin du noir. */
.player,.player video{background:transparent}
.player:has(.player-todo){background:#000}

/* Bandeau du simulateur : une plaque teintée de bleu. */
.simcard{background:color-mix(in srgb,var(--gold) 7%,var(--surface));border-color:var(--gold-100)}

/* Bandeau de fin : la capsule noire devenue plaque. */
.done-banner{background:var(--night);color:var(--on-night)}
.done-banner p{color:var(--on-night-2)}

/* Formulaires : champ à 12 px, focus bleu. */
.champ span{font-size:10.5px;font-weight:600;letter-spacing:.12em}
.champ input{border-color:var(--line-fort);background:var(--surface)}
.champ input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgb(43 143 255 / .16)}

footer.site{border-top-color:var(--line)}
.legal{font-weight:600;letter-spacing:.1em}

/* Entrées : la montée courte d'Incisiv. */
@keyframes entreBloc{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rise{animation:entreBloc .32s var(--ease) both}

/* ---------- Réglage de maquette : le thème (à retirer pour la mise en ligne) ---------- */
.th-ctrl{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.th{position:fixed;right:14px;bottom:18px;z-index:90;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line-fort);box-shadow:var(--sh-2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:12px;font-weight:500}
.th span{padding:0 6px 0 8px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.th label{padding:5px 10px;border-radius:999px;color:var(--ink-2);cursor:pointer;user-select:none}
:root:has(#th-systeme:checked) label[for=th-systeme],:root:has(#th-clair:checked) label[for=th-clair],:root:has(#th-sombre:checked) label[for=th-sombre]{background:var(--night);color:var(--on-night)}


/* ==========================================================================
   RESTRUCTURATION (Aidan, 15/09/2026 au soir) : « les carrés, les cercles,
   ça ne fait pas vraiment style plateforme », et le titre en headline comme
   sur la landing. Le HTML du moteur ne change pas : tout se joue ici, plus
   le trait de crayon posé par decor.js.
   ========================================================================== */

/* Libellés sans point, comme l'Eyebrow d'Incisiv. */
.eyebrow::before{display:none}

/* ---- Accueil : la headline centrée de la landing ---- */
body[data-page="accueil"] .sec.airy .wrap{text-align:center}
body[data-page="accueil"] #kicker{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;border:1px solid var(--line-fort);
  background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none}
body[data-page="accueil"] h1#titre{font-size:clamp(34px,6.4vw,66px);line-height:1.1;letter-spacing:-.035em;font-weight:600;max-width:14.5em;margin:24px auto 0}
body[data-page="accueil"] .sec.airy .lede{margin:18px auto 0;font-size:18px;max-width:42ch}
body[data-page="accueil"] #hud{text-align:left}

/* Le passage mis en avant, entouré au crayon comme « ces 3 étapes » sur la landing. */
h1 .hl{position:relative;display:inline-block;background:none;border:0;box-shadow:none;border-radius:0;
  padding:0 .06em;margin:.26em .14em 0;font-weight:600;letter-spacing:-.035em;animation:none}
h1 .hl .crayon{position:absolute;left:-.55em;top:-.2em;width:calc(100% + 1.1em);height:calc(100% + .42em);overflow:visible;pointer-events:none;color:var(--ink)}
h1 .hl .crayon path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;
  animation:crayon .8s cubic-bezier(.55,.08,.3,1) .7s both}
h1 .hl .crayon .p1{stroke-width:3.2;opacity:.9}
h1 .hl .crayon .p2{stroke-width:1.6;opacity:.45;animation-delay:.9s}
@keyframes crayon{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---- Progression : un chiffre, une barre, la suite en lignes. Plus d'anneau. ---- */
.hud{grid-template-columns:minmax(160px,auto) minmax(0,1fr);gap:36px;align-items:start;padding:26px 28px}
.ring{width:auto;height:auto;display:flex;flex-direction:column;gap:10px}
.ring svg,.ring::after{display:none}
.ring::before{content:"Ta progression";font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ring-v{position:static;display:flex;align-items:baseline;justify-content:flex-start;gap:3px;text-align:left;font-size:60px;line-height:1;letter-spacing:-.045em;font-weight:600;color:var(--ink)}
.ring-v small{display:inline;margin:0;font-size:26px;letter-spacing:-.02em;color:var(--ink-3)}
.hud > div > .eyebrow{display:none}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:26px}
.step{width:auto;height:6px;border-radius:999px}
.suite{gap:0;margin-top:20px;padding-left:0}
.suite::before,.suite-pt{display:none}
.suite-i{align-items:center;gap:14px;padding:13px 2px;margin:0;border-top:1px solid var(--line);border-radius:0}
.suite-txt{flex-direction:row;align-items:center;gap:12px;min-width:0}
.suite-txt b{order:2;flex:1;min-width:0;font-size:16px;letter-spacing:-.02em}
.suite-txt em{order:1;flex:none;display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid var(--line-fort);
  font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.suite-i.active .suite-txt em{background:var(--night);border-color:var(--night);color:var(--on-night)}
.suite-i.faite .suite-txt em{background:var(--gold-050);border-color:var(--gold-100);color:var(--gold-700)}
.suite-i svg{margin:0}

/* ---- Modules : plus de gros numéro, une capsule « Module 01 », comme « Étape 1 » sur la landing ---- */
body[data-page="accueil"] .sec:not(.airy) .eyebrow.plain{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;
  background:var(--night);color:var(--on-night);font-size:13px;font-weight:600;letter-spacing:.01em;text-transform:none}
.mods{gap:10px}
.mod{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n action" "corps action";column-gap:28px;row-gap:12px;padding:22px 26px}
.mod-n{grid-area:n;justify-self:start;display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;border:1px solid var(--line-fort);
  font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--ink-2)}
.mod-n::before{content:"Module\00a0"}
.mod:hover .mod-n{transform:none}
.mod:has(.tag.now) .mod-n{background:var(--night);border-color:var(--night);color:var(--on-night)}
.mod .tag.now{display:none}
.mod.done .mod-n{color:var(--gold-700)}
.mod > div{grid-area:corps;min-width:0}
.mod > .mod-go,.mod > .lock{grid-area:action;align-self:center}
.mod-t{font-size:20px}
.mod-r{margin-top:6px}
.mod.done{border-left:1px solid var(--line)}
.mod.locked{background:var(--surface-2);border-color:var(--line)}
.mod.locked .mod-n{color:var(--ink-3)}
.mod.locked .mod-r{color:var(--ink-4)}
.mod:hover{transform:none}

/* ---- Page module : l'en-tête prend la capsule noire des étapes de la landing ---- */
body[data-page="module"] .mhead{align-items:center}
body[data-page="module"] .mhead .eyebrow{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;background:var(--night);
  color:var(--on-night);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none}
body[data-page="module"] .mhead-n{padding-left:0}
body[data-page="module"] .mhead-n::before{display:none}

@media (max-width:767px){
  body[data-page="accueil"] h1#titre{font-size:clamp(30px,8.6vw,42px)}
  body[data-page="accueil"] .sec.airy .lede{font-size:16px}
  .hud{grid-template-columns:1fr;gap:6px;padding:22px 18px}
  .ring-v{font-size:48px}
  .steps{margin-top:14px}
  .suite-txt{flex-wrap:wrap;gap:6px 10px}
  .suite-txt b{flex-basis:100%;white-space:normal}
  .mod{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "corps" "action";padding:18px 16px;row-gap:10px}
  .mod > .mod-go{justify-self:stretch;margin-top:4px}
  .mod > .lock{justify-self:start}
}


/* ==========================================================================
   PRÉSENTATION (Aidan, 15/09/2026 au soir) : la headline reste, une courbe
   bleue floue se dessine en fond, les modules deviennent cinq cartes vidéo à
   l'image floutée, et la progression sort de la maquette (elle reviendra).
   ========================================================================== */

/* La progression, masquée et non supprimée : il suffit de retirer ces lignes. */
body[data-page="accueil"] #hud,.tick,.rail,.mod .tag.ok,.mod .tag.now{display:none !important}
/* Le pied de la page module reste visible (23/09/2026) : son bouton « J’ai terminé ce module »
   est le seul qui valide un module et ouvre le suivant. Masqué, le module 2 restait verrouillé. */

/* ---- La courbe de fond : une vraie courbe de données, au dessin des courbes d'Incisiv ---- */
.fond-courbe{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fond-courbe svg{display:block;width:100%;height:100%;filter:blur(1.6px)}
.courbe-fond.anime{animation:essuieFond 1.6s var(--doux) .1s both}
@keyframes essuieFond{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.courbe-fond .grille line{stroke:var(--line);stroke-width:1}
.courbe-fond .reperes line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.courbe-fond .axes line{stroke:var(--line-fort);stroke-width:1}
.courbe-fond .graduations text{font-family:"Mona Sans",-apple-system,sans-serif;font-size:12.5px;font-weight:500;fill:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:640px){.courbe-fond .graduations text{font-size:10.5px}}
.courbe-fond .ligne{fill:none;stroke:#2b8fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.courbe-fond .repere{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.35}
.courbe-fond .point{fill:var(--surface);stroke:#2b8fff;stroke-width:3}
.courbe-fond.anime .repere{animation:repereFond .5s ease-out 1.55s both}
.courbe-fond.anime .point{animation:pointFond .5s ease-out 1.55s both}
@keyframes repereFond{from{opacity:0}to{opacity:.35}}
@keyframes pointFond{from{opacity:0}to{opacity:1}}

/* ---- Les cinq cartes vidéo, présentées comme la formation sur la landing ---- */
body[data-page="accueil"] .mods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:22px}
body[data-page="accueil"] .mods .mod{grid-column:span 2;display:flex;flex-direction:column;align-items:stretch;position:relative;padding:0;gap:0;
  border-radius:14px;overflow:hidden;cursor:pointer;container-type:inline-size;background:var(--surface);border:1px solid var(--line);
  transition:border-color .2s,box-shadow .3s,background-color .3s}
body[data-page="accueil"] .mods .mod:nth-child(n+4){grid-column:span 3}
body[data-page="accueil"] .mods .mod:hover{border-color:var(--line-fort);box-shadow:var(--sh-2)}
/* La vignette : une capture de la vidéo, pixelisée et un peu floutée, sous un léger voile. */
body[data-page="accueil"] .mods .mod::before{content:"";display:block;position:static;width:auto;height:auto;aspect-ratio:16/9;opacity:1;transform:none;
  background:linear-gradient(rgb(0 0 0 / .08),rgb(0 0 0 / .34)),#16181c var(--vignette,none) center / cover no-repeat;
  border-bottom:1px solid var(--line);transition:filter .4s,opacity .4s}
body[data-page="accueil"] .mods .mod:hover::before{opacity:1;transform:none}
/* Le bouton de lecture : le rond blanc et ses ondes, comme le cadenas de la landing. */
body[data-page="accueil"] .mods .mod::after{content:"";display:block;position:absolute;left:50%;top:calc(100cqw * 9 / 32);z-index:2;width:58px;height:58px;
  margin:-29px 0 0 -29px;border-radius:50%;opacity:1;transform:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.5v13l10.5-6.5z' fill='%23131210'/%3E%3C/svg%3E") 56% 50% / 24px 24px no-repeat;
  animation:ondeLecture 2.2s cubic-bezier(.2,.8,.2,1) infinite;transition:scale .22s var(--doux)}
@keyframes ondeLecture{
  0%{box-shadow:0 10px 30px -8px rgb(0 0 0 / .35),0 0 0 0 rgb(255 255 255 / .6)}
  70%,100%{box-shadow:0 10px 30px -8px rgb(0 0 0 / .35),0 0 0 16px rgb(255 255 255 / 0)}}
body[data-page="accueil"] .mods .mod:hover::after{scale:1.06}
body[data-page="accueil"] .mods .mod .mod-n{position:absolute;top:12px;left:12px;z-index:2;
  background:var(--surface) !important;border-color:transparent !important;color:var(--ink) !important;box-shadow:var(--sh-1)}
body[data-page="accueil"] .mods .mod > div{padding:16px 18px 4px}
body[data-page="accueil"] .mods .mod-h{gap:8px}
body[data-page="accueil"] .mods .mod-t{display:block;width:100%;font-size:18px}
body[data-page="accueil"] .mods .mod-r{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* « Regarder maintenant » : la capsule noire de la carte de la landing. */
body[data-page="accueil"] .mods .mod > .mod-go{position:static;translate:none;align-self:flex-start;margin:12px 18px 18px;height:40px;padding:0 16px;
  background:var(--night);color:var(--on-night);border-color:var(--night);box-shadow:none;font-size:0;gap:8px}
body[data-page="accueil"] .mods .mod > .mod-go::before{content:"Regarder maintenant";font-size:14px;letter-spacing:-.01em}
body[data-page="accueil"] .mods .mod.done > .mod-go::before{content:"Revoir la vidéo"}
body[data-page="accueil"] .mods .mod > .mod-go svg{width:16px;height:16px}
body[data-page="accueil"] .mods .mod:hover > .mod-go svg{transform:translateX(3px)}

/* ---- Ce qui n'a pas encore été vu est grisé, la carte comme la capture ----
   « Vu » est la validation du module (90 % de la vidéo, comme sur la plateforme).
   Le module à suivre garde ses couleurs : c'est lui qu'on invite à ouvrir. */
/* Opaques, fond et capture : une carte translucide laissait voir la courbe de fond à travers (vu le 15/09/2026). */
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now)){background:color-mix(in srgb,var(--surface),var(--ink) 5%)}
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now))::before{filter:grayscale(1);opacity:1;
  background:linear-gradient(color-mix(in srgb,var(--surface) 58%,transparent),color-mix(in srgb,var(--surface) 58%,transparent)),#16181c var(--vignette,none) center / cover no-repeat}
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now))::after{animation:none;opacity:.8;box-shadow:0 8px 22px -10px rgb(0 0 0 / .3)}
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now)) .mod-n{color:var(--ink-3) !important}
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now)) .mod-t{color:var(--ink-3)}
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now)) .mod-r{color:var(--ink-4)}
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now)) .tag{opacity:.7}
body[data-page="accueil"] .mods .mod:not(.done):not(:has(.tag.now)) > .mod-go{background:transparent;color:var(--ink-2);border-color:var(--line-fort)}

@media (max-width:980px){
  body[data-page="accueil"] .mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="accueil"] .mods .mod,body[data-page="accueil"] .mods .mod:nth-child(n+4){grid-column:span 1}
  body[data-page="accueil"] .mods .mod:nth-child(5){grid-column:span 2}
}
@media (max-width:600px){
  body[data-page="accueil"] .mods{grid-template-columns:minmax(0,1fr)}
  body[data-page="accueil"] .mods .mod:nth-child(5){grid-column:span 1}
}

/* ---- Aidan, 16/09/2026 : sous le titre, juste « Regarder maintenant » ----
   Les pastilles (durée, simulateur) et le résumé sortent des cartes ; ils
   restent dans le balisage et sur la page d'un module. Un module encore
   verrouillé porte un cadenas à la place du lecteur. */
body[data-page="accueil"] .mods .mod .tag,
body[data-page="accueil"] .mods .mod .mod-r,
body[data-page="accueil"] .mods .mod .lock{display:none !important}
body[data-page="accueil"] .mods .mod > div{padding:16px 18px 0}
body[data-page="accueil"] .mods .mod.locked > div{padding-bottom:18px}
body[data-page="accueil"] .mods .mod.locked{cursor:default}
body[data-page="accueil"] .mods .mod.locked:hover{border-color:var(--line);box-shadow:none}
body[data-page="accueil"] .mods .mod.locked::after{
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131210' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 018 0v2.7'/%3E%3C/svg%3E") 50% 50% / 26px 26px no-repeat;
  animation:none;opacity:1;box-shadow:0 8px 22px -10px rgb(0 0 0 / .3)}
body[data-page="accueil"] .mods .mod.locked:hover::after{scale:1}


/* ---- PROGRESSION · la capsule (validée par Aidan le 16/09/2026) ----
   Sous le titre, à côté de « Parcours · 5 modules » : « n / N modules vus » et
   cinq segments. Le tableau « Ta progression » d'origine, le compteur de la
   barre du haut et le filet du bas restent masqués. Le contenu vient de
   poserProgression() dans decor.js. */
body[data-page="accueil"] .pg-caps{
  display:inline-flex;align-items:center;gap:10px;margin-left:10px;padding:5px 13px;border-radius:999px;
  border:1px solid var(--line-fort);background:var(--surface);box-shadow:var(--sh-1);
  font-size:11.5px;font-weight:500;color:var(--ink-2);vertical-align:middle}
.pg-caps b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pg-jauge{display:inline-flex;gap:3px}
.pg-jauge i{width:14px;height:4px;border-radius:999px;background:var(--line-fort)}
.pg-jauge i.vu{background:var(--gold)}
.pg-jauge i.encours{background:color-mix(in srgb,var(--gold) 45%,transparent)}
@media (max-width:600px){body[data-page="accueil"] .pg-caps{margin:10px 0 0}}

@media (prefers-reduced-motion:reduce){
  .courbe-fond.anime,.courbe-fond.anime .repere,.courbe-fond.anime .point,body[data-page="accueil"] .mods .mod::after{animation:none}
}

/* ---------- L'accès par l'e-mail seul (validé par Aidan le 16/09/2026, maquette maquettes/acces-email.html) ----------
   Sans profil : une seule case, l'e-mail. À la première arrivée par le lien du questionnaire :
   un bandeau dit l'adresse retenue, avec « Ce n'est pas moi », et rien d'autre. */
.acces-mail .champs{grid-template-columns:1fr}
.acces-mail .note{font-size:14px;color:var(--ink-2);margin:0}
.acces-mail .actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bandeau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;padding:10px 14px 10px 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13.5px;color:var(--ink-2)}
.bandeau .pt{width:8px;height:8px;border-radius:999px;background:var(--gold);flex:none}
.bandeau b{color:var(--ink);font-weight:600}
.bandeau a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-left:auto}
@media (max-width:767px){ .bandeau a{margin-left:0} }

/* ---------- L'accès réservé (21/09/2026) : la formation s'ouvre après le questionnaire ----------
   Le bloc vit sous le sous-titre, comme la case e-mail du 16/09 : depuis la
   présentation du 15/09, `body[data-page="accueil"] #hud` est en display:none,
   et le message d'accès réservé n'apparaissait plus du tout. La plaque suit le
   centrage de la page, la liste des recours reste alignée à gauche : une liste
   numérotée centrée se lit mal. */
#acces-reserve .actions{justify-content:center}
#acces-reserve .acces{text-align:left;align-self:center}