/* ═══════════════════════════════════════════════════════════════
   LEAN SKIPPER · SUPPORTS DE COURS — trame de base
   Design system "Gold" — registre noir & or. Cap. Système. Maîtrise.
   Tokens hex repris du moteur de documents NX (Propostas/NX-Boats),
   eux-mêmes convertis d'oklch (smart-lp/assets/css/leanskipper.css)
   pour la fidélité d'impression et l'export PDF.
   Les polices arrivent par inline-fonts.css (data-URI, zéro requête
   externe) : ce fichier ne déclare aucune @font-face.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Encre */
  --ink-950:#05070c; --ink-900:#0c0f15; --ink-800:#171b21;
  --ink-700:#25292f; --ink-600:#393d43;
  /* Or — unique signal de hiérarchie et d'action */
  --gold-300:#eed59f; --gold-400:#dbb970; --gold-500:#cea03e;
  --gold-600:#b07f15; --gold-700:#8b5f0d;
  /* Ember — signal d'alerte, usage parcimonieux (goulot, criticité) */
  --ember-300:#e8a288; --ember-400:#d67d5e; --ember-500:#be5737;
  /* Brume */
  --fog-300:#aeb1b6; --fog-400:#898c92; --fog-500:#65696f;
  /* Ivoire */
  --ivory-50:#f7f5ef; --ivory-100:#ebe8e0; --ivory-200:#dbd7ce;

  /* ── RÔLES SÉMANTIQUES — registre CLAIR, le défaut depuis la V2 ──
     Palette « claro » éprouvée du moteur NX : surfaces ivoire et blanc,
     encre foncée, or assombri pour tenir le contraste sur fond clair.
     Le registre sombre (noir & or de la V1) vit sous [data-tema="sombre"]
     et se réveille par la bascule jour/nuit. Aucun composant ne sait quel
     registre est actif : tout passe par ces tokens.                     */
  --surface-page:#eceae4;
  --surface-doc:#ffffff;
  --surface-card:#fbfaf7;
  --surface-card-hi:#f4f2ec;
  --text:#12161d;
  --text-2:#3a4049;
  --mute:#666d78;
  --gold:var(--gold-500);
  --gold-soft:rgba(176,127,21,.10);
  --gold-hair:rgba(176,127,21,.38);
  --line:#e2ded4;
  --line-strong:#c9c4b8;
  --on-gold:#ffffff;
  /* l'échelle d'ivoire s'inverse : les rôles « titre » restent lisibles */
  --ivory-50:#12161d; --ivory-100:#242a33;
  /* l'or fonce pour le contraste sur papier et écran clair */
  --gold-300:#8b5f0d; --gold-400:#a3720f; --gold-500:#b07f15;
  /* l'ember fonce pour la même raison (goulot, criticité) */
  --ember-300:#a34a28;

  --metal-gold:linear-gradient(105deg,#8b5f0d 0%,#b07f15 40%,#8b5f0d 100%);
  --light-overhead:radial-gradient(ellipse 120% 70% at 50% -18%, rgba(176,127,21,.07), transparent 70%);
  --texture-carbone:
    radial-gradient(ellipse 55% 38% at 20% 4%, rgba(255,255,255,.92), transparent 62%),
    linear-gradient(112deg,#fcfcfb 0%,#f6f5f2 34%,#fefefd 50%,#f2f1ee 72%,#f9f8f5 100%);

  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -30px rgba(20,24,30,.45);
  --glow-gold:0 0 0 1px rgba(176,127,21,.45), 0 0 26px rgba(176,127,21,.16);
  --halo-gold:rgba(176,127,21,.16);

  --bar-bg:rgba(255,255,255,.94);
  --veil:rgba(236,234,228,.975);
  --panel-bg:rgba(255,255,255,.97);
  --meta-cell:#ffffff;
  --tint-warm:linear-gradient(160deg,#fdf8ec,var(--surface-card));
  --tint-warm-strong:linear-gradient(155deg,#fbf1da,var(--surface-card));
  --hair-light:rgba(20,24,30,.10);

  /* Tokens lus par la grille cinétique (kinetic-grid.js) */
  --ink-950-grid:#05070c;
  --duration-ritual:1200ms;

  /* Typographie */
  --font-display:'Spectral','Iowan Old Style',Georgia,serif;
  --font-body:'Public Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Space Mono','SFMono-Regular',ui-monospace,monospace;
  --tracking-label:.14em;

  --bar:54px;
  --chapnav:46px;
  --pad-x:clamp(22px,6vw,62px);
  --pad-y:clamp(40px,8vw,62px);
  --radius-sm:6px; --radius-md:10px; --radius-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── REGISTRE SOMBRE — le noir & or de la V1, réveillé par la bascule ── */
:root[data-tema="sombre"]{
  --surface-page:var(--ink-950);
  --surface-doc:var(--ink-900);
  --surface-card:var(--ink-800);
  --surface-card-hi:#1d222a;
  --text:#f7f5ef;
  --text-2:var(--fog-300);
  --mute:var(--fog-400);
  --gold-soft:rgba(206,160,62,.13);
  --gold-hair:rgba(206,160,62,.34);
  --line:var(--ink-700);
  --line-strong:var(--ink-600);
  --on-gold:var(--ink-950);
  --ivory-50:#f7f5ef; --ivory-100:#ebe8e0;
  --gold-300:#eed59f; --gold-400:#dbb970; --gold-500:#cea03e;
  --ember-300:#e8a288;
  --metal-gold:linear-gradient(105deg,#987337 0%,#dbb970 22%,#f7e7bb 38%,#cea03e 55%,#936d32 78%,#e5c786 100%);
  --light-overhead:radial-gradient(ellipse 120% 70% at 50% -18%, rgba(206,160,62,.11), transparent 70%);
  --texture-carbone:
    radial-gradient(ellipse 70% 45% at 50% -6%, rgba(255,255,255,.07), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 5px, transparent 5px 10px),
    linear-gradient(155deg,#1c1d1f 0%,#0a0b0d 56%,#131416 100%);
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 48px -28px rgba(0,0,0,.75);
  --glow-gold:0 0 0 1px rgba(206,160,62,.5), 0 0 28px rgba(206,160,62,.20);
  --halo-gold:rgba(206,160,62,.20);
  --bar-bg:rgba(5,7,12,.93);
  --veil:rgba(5,7,12,.975);
  --panel-bg:rgba(12,15,21,.97);
  --meta-cell:rgba(5,7,12,.55);
  --tint-warm:linear-gradient(160deg,#241d0e,var(--surface-card));
  --tint-warm-strong:linear-gradient(155deg,#2a2110,var(--surface-card));
  --hair-light:rgba(255,255,255,.07);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Le moteur ferme le tableau de bord et les cases « publier le module »
   à l'étudiant en posant l'attribut hidden. Or la feuille donne à ces
   blocs un display explicite, qui l'emportait sur celui du navigateur :
   la diapo d'animateur et les six cases restaient à l'écran. hidden veut
   dire caché, pour tout le monde et sans exception.                    */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;padding-top:calc(var(--bar) + var(--chapnav));
  background-color:var(--surface-page);
  background-image:var(--light-overhead);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(15px,1.6vw,16.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
/* ═══════════ V9 — DEUX ESPACES, DEUX GOUTTIÈRES ═══════════
   À gauche l'espace privé (#partiroir, « Ma version »), à droite
   l'espace collectif (#lschat, le fil de la promo). Au-dessus du seuil
   de gouttière, le panneau ouvert POUSSE la lecture au lieu de la
   recouvrir : deux variables, --gt-g et --gt-d, posées par des classes
   de body (par-open / chat-open). Piloter par classes et non par style
   inline est délibéré : cleanClone() remet body.className à '', donc
   l'export .html ne garde aucune gouttière fantôme.
   Sous le seuil : régime superposition — les panneaux se recouvrent, le
   JS n'en laisse qu'un ouvert et un voile ferme au clic.

   V8.1 — LA BANDE DE LECTURE EST PRIORITAIRE. Les gouttières poussaient
   sans limite : à 1180 px les deux panneaux ouverts laissaient 400 px au
   bandeau, dont le contenu incompressible mesure 716 px (étudiant) et
   802 px (animateur, bouton « Éditer » compris) ; à 1400 px, sur le
   rendu observé, les boutons PDF, QR et ☰ passaient déjà sous la
   colonne du fil et devenaient incliquables. Désormais la
   largeur d'un panneau CÈDE avant la bande : --bande-min est réservée au
   bandeau et à la lecture, le reste seulement est distribué. La largeur
   du panneau et sa gouttière restent une seule et même valeur — un
   panneau plus large que sa gouttière recouvrirait la lecture.
   Le JS complète : sous 1520 px il n'ouvre qu'un espace à la fois, pour
   qu'aucun tiroir ne soit rogné à une largeur illisible.              */
:root{
  --gt-g:0px; --gt-d:0px;
  --par-max:420px; --chat-max:360px;
  /* 830 px : le bandeau du rôle maître mesure environ 800 px de contenu
     incompressible (logo, ✎, chrono, ⛶, ☾, Éditer, PDF, QR, ☰, gouttes
     et marges comprises). En dessous, un bouton passerait sous un
     panneau. Le titre de séance, lui, a le droit de s'effacer.
     V9 — l'échange 💬 ⇄ ☾ ne change pas le total : le fil est parti
     dans le coin bas-droite, la bascule a pris sa case. */
  --bande-min:830px;
  --par-w:min(var(--par-max),92vw); --chat-w:min(var(--chat-max),92vw);
}
@media(min-width:1180px){
  body.chat-open{--chat-w:clamp(0px,100vw - var(--bande-min),var(--chat-max)); --gt-d:var(--chat-w)}
  body.par-open{--par-w:clamp(0px,100vw - var(--bande-min),var(--par-max)); --gt-g:var(--par-w)}
  /* les deux à la fois : la gouttière de droite est servie d'abord (le
     fil est le seul des deux à pouvoir être épinglé), la gauche prend
     ce qui reste au-dessus de la bande minimale */
  body.par-open.chat-open{--par-w:clamp(0px,100vw - var(--bande-min) - var(--gt-d),var(--par-max))}
}
/* Le papier n'a pas de panneau : pas de gouttière. La projection non
   plus, tant qu'aucun espace n'est ouvert — mais depuis la V9 les deux
   restent joignables en plein écran (poignée « Ma version » à gauche,
   bouton du fil en bas à droite). Un espace ouvert pousse donc la
   diapo projetée au lieu de la recouvrir : on continue de LIRE la
   diapo pendant qu'on écrit à côté.                                  */
body.projection{--gt-g:0px !important; --gt-d:0px !important}
@media(min-width:1180px){
  body.projection.chat-open{--gt-d:var(--chat-w) !important}
  body.projection.par-open{--gt-g:var(--par-w) !important}
}
@media print{ body{--gt-g:0px !important; --gt-d:0px !important} }

/* Le conteneur ne porte plus de fond : depuis la V2 chaque slide est une
   carte détachée et le fond de page respire entre elles.
   V9 : les marges latérales absorbent les gouttières, et .wrap devient
   le conteneur de référence (container-type) — les composants larges
   mesurent enfin la colonne de lecture, plus la fenêtre.             */
.wrap{max-width:940px;padding:clamp(20px,4vh,40px) 0;
  --wrap-cote:max(0px,(100% - var(--gt-g) - var(--gt-d) - 940px)/2);
  margin:0 calc(var(--gt-d) + var(--wrap-cote)) 0 calc(var(--gt-g) + var(--wrap-cote));
  container-type:inline-size;
  transition:margin .3s var(--ease)}
/* (le reste des transitions de gouttière est neutralisé en fin de
   feuille, après les règles qui les déclarent) */

/* ═══════════ BARRE SUPÉRIEURE ═══════════ */
/* V9 : la barre de progression mesure la lecture de la colonne — elle
   commence et finit donc au bord de la colonne, pas de l'écran.
   V8.1 : left et width sont posés EN PIXELS par course.js, à partir du
   rectangle réel de .wrap. Un pourcentage sur un élément position:fixed
   se résout sur la fenêtre entière, pas sur la bande entre gouttières :
   la barre saturait à 100 % au milieu du document. Les valeurs ci-dessous
   ne sont donc que l'état de repos (page sans JavaScript).            */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--metal-gold);z-index:62;
  transition:width .1s linear,left .3s var(--ease)}
#top{
  position:fixed;top:0;left:var(--gt-g);right:var(--gt-d);height:var(--bar);z-index:60;
  transition:left .3s var(--ease),right .3s var(--ease);
  /* filet de sécurité : si un contenu de bandeau dépassait malgré la
     bande réservée, il est coupé net au lieu de glisser sous un panneau */
  overflow:hidden;
  display:flex;align-items:center;gap:clamp(8px,2vw,14px);padding:0 var(--pad-x);
  background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gold-hair);
}
#top .lgw{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;
  text-decoration:none;border-bottom:none;transition:opacity .18s var(--ease)}
#top .lgw:hover{opacity:.78}
#top .lgw:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;border-radius:4px}
/* V6 — le logo du header est la boussole LS Compass (ls-compass--barre,
   injectée par course.js) : l'aiguille suit le défilement. Le médaillon
   <img> d'origine reste dans le fichier (sans JS et dans l'export) ; la
   classe lgw-compass, posée par le script, le masque quand la boussole
   est en place — cleanClone() la retire du clone d'export. */
#top .lgw img{height:30px;width:auto}
/* enfant direct seulement : les calques de la boussole sont aussi des <img> */
#top .lgw.lgw-compass > img{display:none}
#top .lgw b{font-family:var(--font-mono);font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-300);font-weight:700;white-space:nowrap}
#top .ts{flex:1;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fog-400);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;min-width:0}
#top button{
  background:transparent;border:1px solid rgba(206,160,62,.42);color:var(--gold-300);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 12px;height:32px;border-radius:var(--radius-sm);cursor:pointer;
  transition:.18s var(--ease);flex:0 0 auto;white-space:nowrap;
}
#top button:hover,#top button.act{background:var(--gold-500);color:var(--on-gold);border-color:var(--gold-500)}
#top button:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
#top .ix{width:36px;padding:0;display:grid;place-items:center}
#top .ix i{display:block;width:15px;height:1.5px;background:currentColor;position:relative}
#top .ix i:before,#top .ix i:after{content:"";position:absolute;left:0;width:15px;height:1.5px;background:currentColor}
#top .ix i:before{top:-5px}#top .ix i:after{top:5px}
@media(max-width:700px){#top .ts{display:none}}
/* V8.1 — bande étroite (téléphone, tablette portrait) : au-dessus de
   840 px la bande réservée garantit que tout tient ; en dessous, la
   rangée défile au doigt plutôt que de disparaître sous le bord de
   l'écran — même geste que les pastilles de chapitres.                */
@media(max-width:840px){
  #top{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-x:contain}
  #top::-webkit-scrollbar{display:none}
}

/* ═══════════ BANDEAU DE CHAPITRES ═══════════
   Calque structurel du menu sticky du deck Hybdor, en peau Gold :
   flèches précédent / suivant, pastilles-ancres (elles restent des <a>
   et fonctionnent donc sans JavaScript), compteur de chapitre.        */
#chapnav{
  position:fixed;top:var(--bar);left:var(--gt-g);right:var(--gt-d);height:var(--chapnav);z-index:59;
  display:flex;align-items:center;gap:10px;padding:0 clamp(12px,3vw,24px);
  background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
#chapnav .arr{
  flex:0 0 auto;width:32px;height:30px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-sm);transition:.18s var(--ease);
}
#chapnav .arr:hover{border-color:var(--gold-500);color:var(--gold-300)}
#chapnav .arr:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
#chapnav .arr[disabled]{opacity:.35;cursor:default}
#chapnav .arr[disabled]:hover{border-color:var(--line-strong);color:var(--text-2)}
#chapnav .arr i{display:block;width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
#chapnav .arr.prev i{transform:rotate(135deg);margin-left:3px}
#chapnav .arr.next i{transform:rotate(-45deg);margin-right:3px}
.cs-pills{flex:1;display:flex;gap:8px;overflow-x:auto;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.cs-pills::-webkit-scrollbar{display:none}
.cs-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;height:30px;padding:0 13px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line-strong);border-radius:999px;transition:.18s var(--ease);
}
.cs-pill:hover{border-color:var(--gold-hair);color:var(--gold-300)}
.cs-pill:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.cs-pill.act{background:var(--gold-soft);border-color:var(--gold-hair);color:var(--gold-300)}
#chap-count{flex:0 0 auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--mute);font-variant-numeric:tabular-nums}
@media(max-width:560px){#chap-count{display:none}}

/* ═══════════ INDEX PLEIN ÉCRAN ═══════════ */
#idx{
  position:fixed;inset:0;z-index:75;background:var(--veil);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad-x);
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease);overflow-y:auto;
}
#idx.on{opacity:1;pointer-events:auto}
#idx a{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);
  color:var(--ivory-100);text-decoration:none;font-family:var(--font-display);
  font-size:clamp(15px,3.6vw,19px);letter-spacing:-.01em;transition:.18s var(--ease)}
#idx a:hover{color:var(--gold-300);padding-left:8px}
#idx a span{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--gold-500);flex:0 0 26px}
#idx .cl{margin-top:24px;align-self:flex-start;background:none;border:1px solid rgba(206,160,62,.45);
  color:var(--gold-300);padding:11px 24px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#idx .cl:hover{background:var(--gold-500);color:var(--on-gold)}

/* ═══════════ VOILE QR ═══════════
   Le grand QR du module, à projeter en début de séance : la promo scanne,
   chacun arrive sur la page. Le fond blanc autour du code est obligatoire,
   c'est sa zone de silence de lecture.                                   */
#qrov{
  position:fixed;inset:0;z-index:76;background:var(--veil);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:grid;place-items:center;padding:var(--pad-x);
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease);
}
#qrov.on{opacity:1;pointer-events:auto}
#qrov .qrcard{text-align:center}
#qrov .qrbox{background:#fff;border-radius:var(--radius-md);padding:clamp(14px,3vw,22px);
  display:inline-block;box-shadow:var(--glow-gold)}
#qrov .qrbox img,#qrov .qrbox .qr-vif{display:block;width:min(58vmin,380px);height:auto;
  image-rendering:pixelated}
#qrov .qrt{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-300);margin:22px 0 8px;font-weight:700}
#qrov .qru{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);letter-spacing:.03em;word-break:break-all}
#qrov .cl{margin-top:22px;background:none;border:1px solid rgba(206,160,62,.45);
  color:var(--gold-300);padding:11px 24px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#qrov .cl:hover{background:var(--gold-500);color:var(--on-gold)}

/* ═══════════ PANNEAU D'ÉDITION ═══════════ */
/* La translation seule ne suffit pas : un panneau simplement poussé hors
   de l'écran garde ses boutons dans la tabulation, et « Sauvegarder
   .html » comme « RàZ chrono » se sont laissés atteindre ainsi. La
   visibilité, elle, ferme le clavier ; son basculement est différé du
   temps de la glissade pour que la sortie reste vue.                  */
#panel{
  position:fixed;left:var(--gt-g);right:var(--gt-d);bottom:0;z-index:58;transform:translateY(102%);
  visibility:hidden;
  transition:transform .3s var(--ease),left .3s var(--ease),right .3s var(--ease),
    visibility 0s linear .3s;
  background:var(--panel-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--gold-hair);padding:14px var(--pad-x) 18px;
}
body.edit #panel{transform:translateY(0);visibility:visible;transition-delay:0s}
#panel .pt{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin-bottom:10px}
#panel .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#panel button,#panel label.btn{
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 13px;border-radius:var(--radius-sm);cursor:pointer;transition:.18s var(--ease)}
#panel button:hover,#panel label.btn:hover{border-color:var(--gold-500);color:var(--gold-300)}
#panel input[type=file]{display:none}
#panel .chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
#panel .chk input{accent-color:var(--gold-500);width:15px;height:15px;margin:0;cursor:pointer}
#panel .hintx{margin-top:9px;font-size:12px;color:var(--mute)}

/* ═══════════ CHAPITRES & SLIDES ═══════════
   Un chapitre = une <section>, un slide = un <article>. Le slide occupe
   au moins un écran (min-height, jamais height : le contenu long déborde
   vers le bas et se lit en continuant de défiler, façon article).       */
.cs-chapter{scroll-margin-top:calc(var(--bar) + var(--chapnav) + 6px)}
/* Une diapo = une carte. min-height et jamais height : le contenu long
   déborde vers le bas. L'espace entre cartes est le silence entre deux
   idées — généreux, c'est voulu.                                        */
/* V15 — PETITE PAR DÉFAUT : la carte prend la hauteur de son contenu.
   La respiration vient du padding, plus d'une hauteur d'écran imposée.
   « Grande » (cs-slide--tall) rend l'ancienne pleine hauteur ; la
   couverture la garde d'office ; la projection impose toujours 100vh. */
.cs-slide{
  position:relative;min-height:auto;
  display:flex;flex-direction:column;justify-content:center;
  /* V8.1 : la respiration d'une diapo mesure la COLONNE, pas la fenêtre.
     À 6vw d'une fenêtre de 1180 px, une colonne étroite gardait 62 px de
     marge de chaque côté — il ne restait plus de quoi poser un titre.
     (--pad-x reste en vw sur :root, pour le bandeau et le pied.)      */
  --pad-x:clamp(20px,6.6cqw,62px); --pad-y:clamp(40px,6.6cqw,62px);
  padding:var(--pad-y) var(--pad-x);
  background:var(--surface-doc);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  margin:0 clamp(0px,1.5vw,14px) clamp(36px,7vh,72px);
  scroll-margin-top:calc(var(--bar) + var(--chapnav) + 14px);
}
.cs-slide-num{position:absolute;right:var(--pad-x);bottom:16px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--mute);
  font-variant-numeric:tabular-nums}

/* — Couverture de module — */
.cs-slide--tall{min-height:calc(100vh - var(--bar) - var(--chapnav) - 60px);
  min-height:calc(100svh - var(--bar) - var(--chapnav) - 60px)}
.cs-slide--cover{
  min-height:calc(100vh - var(--bar) - var(--chapnav) - 60px);
  min-height:calc(100svh - var(--bar) - var(--chapnav) - 60px);
  background-image:var(--texture-carbone);overflow:hidden;
  border-bottom:1px solid var(--gold-hair);
  padding-top:clamp(52px,9.4cqw,88px);
}
.cs-slide--cover:after{content:"";position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:0;height:1px;
  background:var(--metal-gold);opacity:.85}
.cover-mark{display:flex;align-items:center;gap:16px;margin-bottom:clamp(30px,4.9cqw,46px);position:relative}
.cover-mark img{width:clamp(74px,11cqw,104px);height:auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
.cover-mark .brandname{font-family:var(--font-mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-300);font-weight:700}
.cover-mark .tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fog-400);display:block;margin-top:5px;font-weight:400}
.kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin-bottom:16px}
.cs-slide--cover h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.5rem,7.3cqw,4.3rem);line-height:1.02;letter-spacing:-.02em;
  margin:0 0 18px;color:var(--ivory-50)}
.cs-slide--cover h1 em{font-style:normal;background:var(--metal-gold);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-400)}
.cs-slide--cover .sub{font-family:var(--font-display);font-size:clamp(1.02rem,2.25cqw,1.32rem);line-height:1.5;
  color:var(--text-2);max-width:46ch;margin:0 0 clamp(30px,4.7cqw,44px);font-style:italic}
.covermeta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line)}
@media(min-width:840px){.covermeta{grid-template-columns:repeat(6,1fr)}}
@media(max-width:470px){.covermeta{grid-template-columns:repeat(2,1fr)}}
.covermeta > div{background:var(--meta-cell);padding:15px 14px}
.covermeta dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin-bottom:6px}
.covermeta dd{margin:0;font-size:14.5px;font-weight:500;color:var(--ivory-100);line-height:1.35}
.cover-qr{display:flex;align-items:center;gap:12px;margin-top:26px}
.cover-qr img{width:64px;height:64px;border-radius:4px;background:#fff;padding:4px}
.cover-qr span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);line-height:1.6}

/* — Intercalaire de chapitre — */
.cs-slide--chapter{background:var(--tint-warm);justify-content:center}
.cs-slide--chapter h2{font-size:clamp(2.1rem,5.8cqw,3.4rem)}
.cs-slide--chapter .chap-sum{margin:18px 0 0;max-width:52ch}
.cs-slide--chapter .chap-sum li{font-family:var(--font-display);font-size:clamp(1rem,2.01cqw,1.18rem);
  color:var(--text-2);margin-bottom:10px}

/* — Récap 2 minutes — */
.cs-slide--recap .recap-badge{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--on-gold);background:var(--metal-gold);padding:6px 13px;border-radius:999px;
  font-weight:700;margin-bottom:20px;align-self:flex-start}
.cs-slide--recap .recap-badge:before{content:"";width:7px;height:7px;border-radius:999px;
  background:var(--on-gold);opacity:.65}

/* — Mémo de Tiago — */
.cs-slide--memo{background:var(--tint-warm)}
.memo-t{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-400);font-weight:700;margin-bottom:18px;
  display:flex;align-items:center;gap:12px}
.memo-t:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-hair),transparent)}
.cs-slide--memo blockquote{margin:0;padding:0 0 0 22px;border-left:2px solid var(--gold-500)}
.cs-slide--memo blockquote p{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.25rem,2.9cqw,1.7rem);line-height:1.45;color:var(--ivory-100);margin:0 0 16px}
.cs-slide--memo .who{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-500)}
.cs-slide--memo .memo-hist{margin-top:22px;max-width:58ch}

/* ═══════════ TYPOGRAPHIE DE SECTION ═══════════ */
.num{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin-bottom:14px;
  display:flex;align-items:center;gap:12px}
.num:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-hair),transparent)}
h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.72rem,4.25cqw,2.5rem);
  line-height:1.1;letter-spacing:-.018em;margin:0 0 22px;color:var(--ivory-50)}
h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.18rem,2.45cqw,1.44rem);
  line-height:1.25;margin:38px 0 14px;color:var(--ivory-50)}
h4{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-400);margin:30px 0 10px;font-weight:700}
p{margin:0 0 15px;color:var(--text-2)}
p.lead{font-family:var(--font-display);font-size:clamp(1.04rem,2.08cqw,1.22rem);line-height:1.55;
  color:var(--ivory-100);max-width:56ch}
strong,b{color:var(--ivory-50);font-weight:600}
em{color:var(--gold-300)}
a{color:var(--gold-400);text-decoration:none;border-bottom:1px solid var(--gold-hair)}
a:hover{color:var(--gold-300)}
ul{margin:0 0 15px;padding-left:0;list-style:none}
ul li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--text-2)}
ul li:before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:1px;background:var(--gold-500)}
ol{margin:0 0 15px;padding-left:22px;color:var(--text-2)}
ol li{margin-bottom:8px}
.fnote{font-size:12.6px;color:var(--mute);margin-top:12px}

/* ═══════════ CARTES & BANDES ═══════════ */
.execband{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--gold-hair);border:1px solid var(--gold-hair);margin:0 0 30px}
.execband > div{background:var(--surface-card);padding:20px 20px 18px;text-align:center}
.execband .bl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin-bottom:9px}
.execband .bv{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:600;
  line-height:1;color:var(--ivory-50);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.execband .bv small{font-size:.5em;font-weight:400;color:var(--mute);letter-spacing:0;display:block;margin-top:7px}
.execband > div.hi{background:var(--tint-warm)}
.execband > div.hi .bv{background:var(--metal-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.execband > div.hi .bv small{background:none;-webkit-text-fill-color:var(--mute);color:var(--mute)}

.exec{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin:0 0 8px}
.exec .ec{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px 20px 18px;position:relative;overflow:hidden}
.exec .ec:before{content:"";position:absolute;top:0;left:0;width:36px;height:2px;background:var(--metal-gold)}
.exec .ec h5{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin:6px 0 11px;font-weight:700}
.exec .ec p{margin:0;font-size:14.5px;line-height:1.58}
.exec .ec p + p{margin-top:9px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:0 0 26px}
.stat{background:var(--surface-card);padding:20px 19px 18px}
.stat .v{font-family:var(--font-display);font-size:clamp(1.6rem,3.6vw,2.15rem);font-weight:600;
  line-height:1;letter-spacing:-.022em;color:var(--gold-300);margin-bottom:10px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.42em;font-weight:400;color:var(--mute);letter-spacing:.02em;margin-left:4px}
.stat .k{font-size:13.2px;line-height:1.5;color:var(--text-2)}
.stat .k div{color:var(--mute);font-size:12.4px;margin-top:5px}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:0 0 8px}
.qt{background:var(--tint-warm);border:1px solid var(--line);
  border-left:2px solid var(--gold-500);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:18px 20px}
.qt p{font-family:var(--font-display);font-style:italic;font-size:15.2px;line-height:1.5;
  color:var(--ivory-100);margin:0 0 10px}
.qt .who{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-500)}

.notis{background:var(--surface-card);border:1px solid var(--line);border-left:2px solid var(--gold-500);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:18px 22px;margin:0 0 8px}
.notis ul{margin:0}
.notis ul li:last-child{margin-bottom:0}
.callout{background:var(--tint-warm);border:1px solid var(--gold-hair);
  border-radius:var(--radius-md);padding:20px 22px;margin:22px 0}
.callout .cl-t{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-400);margin-bottom:9px;font-weight:700}
.callout p{margin:0;font-size:14.6px;line-height:1.6;color:var(--text-2)}
.callout p + p{margin-top:10px}
.callout strong{color:var(--gold-300)}

/* ═══════════ TABLEAUX ═══════════ */
.tbox{margin:0 0 8px}
table.rt{width:100%;border-collapse:collapse;font-size:14.2px;background:var(--surface-card);
  border:1px solid var(--line)}
table.rt th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-500);text-align:left;padding:12px 14px;border-bottom:1px solid var(--gold-hair);
  font-weight:700;vertical-align:bottom}
table.rt td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:top}
table.rt .n{text-align:right;font-family:var(--font-mono);font-size:13px;white-space:nowrap;color:var(--ivory-100)}
table.rt th.n{text-align:right}
table.rt tr:last-child td{border-bottom:none}
table.rt tr.sub td{background:rgba(206,160,62,.05);color:var(--ivory-100)}
table.rt tr.total td{background:rgba(206,160,62,.13);
  border-top:1px solid var(--gold-hair);font-weight:600;color:var(--ivory-50)}
@media(max-width:720px){
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt tr{border-bottom:1px solid var(--line);padding:6px 0}
  table.rt td{border:none;padding:5px 14px;display:flex;justify-content:space-between;gap:14px}
  table.rt td:before{content:attr(data-l);font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--gold-500);flex:0 0 34%}
  table.rt td.n{text-align:right}
  /* V8.1 — une cellule qui contient du balisage inline (un em, un lien,
     une bulle) éclate en autant d'éléments flex : chaque fragment devient
     sa propre colonne, la ligne ne se coupe plus et la table sort de
     l'écran (module 5, « VA · NVA · VA · NVA », 27 px de trop à 390 px).
     Ces cellules-là passent en étiquette au-dessus, valeur en dessous. */
  table.rt td:has(*){display:block}
  table.rt td:has(*):before{display:block;margin-bottom:3px}
}

/* ═══════════ ÉTAPES & AGENDA ═══════════ */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 8px}
.step{background:var(--surface-card);display:grid;grid-template-columns:64px 1fr;align-items:center}
.step .sn2{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--gold-500);
  text-align:center;padding:18px 0;border-right:1px solid var(--line);align-self:stretch;
  display:grid;place-items:center;background:rgba(206,160,62,.05)}
.step .sc{padding:16px 20px}
.step .sc b{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;
  color:var(--ivory-50);margin-bottom:5px}
.step .sc p{margin:0;font-size:13.8px;line-height:1.5}

.days{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 8px}
.day{background:var(--surface-card);display:grid;grid-template-columns:150px 1fr;gap:0}
.day .dlabel{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-300);padding:18px 16px;background:rgba(206,160,62,.05);
  border-right:1px solid var(--line);font-weight:700}
.day .dlabel span{display:block;color:var(--mute);font-size:9.5px;letter-spacing:.14em;margin-top:6px;font-weight:400}
.day .c{padding:18px 20px}
.day .c b{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:600;
  color:var(--ivory-50);margin-bottom:7px;letter-spacing:-.01em}
.day .c p{margin:0;font-size:14px;line-height:1.55}
@media(max-width:640px){
  .day{grid-template-columns:1fr}
  .day .dlabel{border-right:none;border-bottom:1px solid var(--line);padding:13px 16px}
  .day .dlabel span{display:inline;margin-left:10px}
}

/* ═══════════ QUIZ / RÉFLEXION ═══════════
   <details>/<summary> natif : la réponse se révèle au clic, rien à
   scripter, et le navigateur la déplie tout seul à l'impression.     */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
  font-family:var(--font-display);font-size:16.2px;font-weight:500;color:var(--ivory-50);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:6px;top:24px;width:8px;height:8px;
  border-right:1.5px solid var(--gold-500);border-bottom:1.5px solid var(--gold-500);
  transform:rotate(45deg);transition:.22s var(--ease)}
.faq details[open] summary:after{transform:rotate(-135deg);top:27px}
.faq summary:hover{color:var(--gold-300)}
.faq .fa{padding:0 30px 18px 0;font-size:14.4px;line-height:1.6;color:var(--text-2)}
.faq .fa p{margin:0 0 10px}
.faq .fa p:last-child{margin-bottom:0}

/* ═══════════ IMAGE À INSÉRER ═══════════
   Emplacement hachuré or : un clic ouvre le sélecteur de fichier et
   l'image arrive en data-URI — elle est DANS le document et survit donc
   à « Sauvegarder .html ». Transposition Gold du placeholder Hybdor.  */
.cs-placeholder{
  position:relative;min-height:clamp(200px,36vh,320px);border:1px dashed var(--gold-hair);
  border-radius:var(--radius-md);cursor:default;overflow:hidden;
  display:grid;place-content:center;text-align:center;padding:22px;gap:6px;
  background:repeating-linear-gradient(45deg, rgba(206,160,62,.045) 0 10px, transparent 10px 20px);
  transition:border-color .18s var(--ease);
}
/* Un emplacement VIDE porte une consigne d'auteur (« insérer une image »)
   et n'apporte rien à qui lit le cours : hors édition il n'existe pour
   personne, exactement comme au PDF. Rempli, il est devenu une image du
   support et reste visible pour tout le monde. Le curseur main et le
   survol ne s'allument donc que là où le clic fait quelque chose.     */
.cs-placeholder:not(.has){display:none}
body.edit .cs-placeholder:not(.has){display:grid}
.mark-sep:has(+ .cs-placeholder--logo:not(.has)){display:none}
body.edit .mark-sep:has(+ .cs-placeholder--logo:not(.has)){display:block}
body.edit .cs-placeholder{cursor:pointer}
body.edit .cs-placeholder:hover{border-color:var(--gold-500)}
.cs-placeholder:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
.cs-placeholder .ph-t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-400);font-weight:700}
.cs-placeholder .ph-d{font-size:12.8px;color:var(--mute);max-width:34ch;margin:0}
/* ═══ CADRAGE DES IMAGES (V14) — entière par défaut ═══
   Règle de la maison : une image se voit EN ENTIER. L'emplacement rempli
   se replie donc sur la hauteur de l'image, qui n'est ni rognée ni
   déformée. Le rognage existe, mais il se demande : data-cadre="rempli"
   sur l'emplacement (bouton « Cadrage » en édition), avec un point de
   visée réglable par data-foyer (haut / centre / bas).                */
.cs-placeholder img.ph-img{display:block;width:100%;height:auto;z-index:2}
.cs-placeholder.has{border-style:solid;min-height:0;padding:0;display:block;
  background:var(--surface-page)}
.cs-placeholder.has[data-cadre="rempli"]{aspect-ratio:var(--ph-ratio,16/9);padding:0}
.cs-placeholder.has[data-cadre="rempli"] img.ph-img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center}
.cs-placeholder.has[data-cadre="rempli"][data-foyer="haut"] img.ph-img{object-position:center top}
.cs-placeholder.has[data-cadre="rempli"][data-foyer="bas"] img.ph-img{object-position:center bottom}
.cs-placeholder .ph-cadre{position:absolute;top:10px;right:86px;z-index:3;background:var(--bar-bg);
  border:1px solid var(--line-strong);color:var(--text-2);font-family:var(--font-mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius-sm);
  cursor:pointer;display:none}
body.edit .cs-placeholder.has .ph-cadre{display:block}
.cs-placeholder .ph-cadre:hover{border-color:var(--gold-hair);color:var(--gold-400)}
.cs-placeholder.has .ph-t,.cs-placeholder.has .ph-d{visibility:hidden}
.cs-placeholder .ph-x{position:absolute;top:10px;right:10px;z-index:3;background:var(--bar-bg);
  border:1px solid var(--line-strong);color:var(--text-2);font-family:var(--font-mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius-sm);
  cursor:pointer;display:none}
body.edit .cs-placeholder.has .ph-x{display:block}
.cs-placeholder .ph-x:hover{border-color:var(--ember-500);color:var(--ember-400)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 8px}

/* ═══════════ NOTES & Q&R ═══════════
   Encart nourri en séance (questions, réponses, points chauds). À l'écran
   il reste discret ; au PDF il ne sort que si la case du panneau l'inclut
   (body.print-notes). C'est le crochet des futures Q&R du chat.          */
.cs-note{background:var(--gold-soft);border:1px solid var(--gold-hair);
  border-radius:var(--radius-md);padding:16px 20px;margin:26px 0 0}
.cs-note .cn-t{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-400);font-weight:700;margin-bottom:8px}
.cs-note p{margin:0 0 8px;font-size:13.8px}
.cs-note p:last-child{margin-bottom:0}

/* ═══════════ CONDUITE DE SÉANCE (V12) ═══════════
   L'équivalent des « Notes: » du PowerPoint d'origine : la consigne
   d'animation, adressée à celui qui anime. L'encart porte data-admin —
   course.js ne le montre qu'au rôle maître, et il ne part pas dans
   l'export markdown de l'étudiant. Jamais en projection ; au PDF
   seulement pour l'animateur, et seulement si la case « Notes & Q&R »
   est cochée. Ce n'est pas un secret — juste un texte qui n'a rien à
   faire sur l'écran de la salle.                                      */
/* V16 — LA GARDE GÉNÉRIQUE. data-admin était tenu par le seul JavaScript
   (el.hidden = true) : script coupé, TOUT ce qui est marqué animateur
   s'affichait — l'encart de conduite, la case du kahoot, une diapo
   entière. La V15 avait bouché le cas de .cs-anim, un composant à la
   fois ; la règle ci-dessous ferme la famille d'un coup, et couvre
   d'avance ce qu'on marquera data-admin demain.
   Elle se lit : tant que le corps n'est pas reconnu animateur, rien de
   marqué ne s'affiche. Quand il l'est, la règle ne s'applique plus et
   chaque élément retrouve SON display (inline-flex pour la case, block
   pour l'encart) — pas besoin de le redire ici.
   Spécificité 0-2-0 : elle passe devant les display des composants sans
   !important. Ce n'est pas un secret cryptographique — le balisage reste
   dans la page, comme sur tout site statique — mais rien ne s'affiche,
   ni à l'écran, ni au PDF, ni sans script.                            */
body:not(.est-maitre) [data-admin]{display:none}

/* V15 — invisible par DÉFAUT, y compris sans JavaScript : seul le corps
   marqué est-maitre (rôle animateur reconnu) l'affiche. Avant, un
   navigateur sans script montrait l'encart à tout le monde.           */
.cs-anim{display:none;background:var(--surface-card);border:1px dashed var(--gold-hair);
  border-radius:var(--radius-md);padding:14px 18px;margin:22px 0 0}
body.est-maitre .cs-anim{display:block}
.cs-anim .ca-t{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:7px;
  display:flex;align-items:center;gap:9px}
.cs-anim .ca-t:before{content:"";width:6px;height:6px;border-radius:999px;background:var(--gold-500)}
.cs-anim p{margin:0 0 7px;font-size:13.4px;color:var(--mute)}
.cs-anim p:last-child{margin-bottom:0}

/* ═══════════ FEEDBACK — NPS DE FIN DE MODULE (V4) ═══════════
   Dix étoiles (1-10, boutons — donc accessibles au clavier) + remarque
   facultative + envoyer. La note part sur le bus (ls:nps) et se garde
   par promo+module (promo:nps:module) ; les points de participation
   réels sont attribués par la passerelle.                              */
.cs-feedback{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.cs-feedback .fb-t{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
.cs-feedback .fb-stars{display:flex;gap:2px;flex-wrap:wrap}
.cs-feedback .fb-stars button{background:none;border:none;padding:2px 1px;cursor:pointer;
  font-size:21px;line-height:1;color:var(--line-strong);
  transition:color .12s var(--ease),transform .12s var(--ease)}
.cs-feedback .fb-stars button:hover{color:var(--gold-400);transform:translateY(-1px)}
.cs-feedback .fb-stars button.on{color:var(--gold-500)}
.cs-feedback .fb-stars button:focus-visible{outline:2px solid var(--gold-500);
  outline-offset:1px;border-radius:4px}
.cs-feedback .fb-note{flex:1 1 200px;min-width:0;height:36px;padding:0 12px;
  background:var(--surface-page);color:var(--text);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13.5px;
  transition:border-color .18s var(--ease)}
.cs-feedback .fb-note::placeholder{color:var(--mute)}
.cs-feedback .fb-note:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--gold-soft)}
.cs-feedback .fb-send{background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:.18s var(--ease)}
.cs-feedback .fb-send:hover{border-color:var(--gold-500);color:var(--gold-300)}
.cs-feedback .fb-ok{font-family:var(--font-mono);font-size:10px;color:var(--gold-400);letter-spacing:.05em}
/* V5 — graduation 1…10 chiffrée sous les étoiles (injectée, data-ls-inject) */
.cs-feedback .fb-stars button{display:grid;justify-items:center;row-gap:1px;line-height:1}
.cs-feedback .fb-num{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0;
  color:var(--mute);font-variant-numeric:tabular-nums}
.cs-feedback .fb-stars button.on .fb-num,
.cs-feedback .fb-stars button:hover .fb-num{color:var(--gold-400)}
/* V5 — placeholder du champ remarque en rotation douce (fondu piloté JS) */
.cs-feedback .fb-note::placeholder{opacity:1;transition:opacity .45s var(--ease)}
.cs-feedback .fb-note.ph-out::placeholder{opacity:0}
@media(prefers-reduced-motion:reduce){.cs-feedback .fb-note::placeholder{transition:none}}
/* V5 — le rappel des points du challenge, sous le champ */
.cs-feedback .fb-hint{flex-basis:100%;margin:0;font-size:11.5px;font-style:italic;color:var(--mute)}

/* ═══════════ CALCULETTE DE FLUX (entonnoir goulot) ═══════════
   Portée de smart-lp : la géométrie SVG vient du script, le CSS compose.
   L'ember ne sert qu'au goulot — c'est le seul signal d'alerte du slide. */
.ls-funnel{position:relative}
.ls-funnel-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ls-funnel-path{transition:opacity .3s var(--ease)}
.ls-funnel-cols{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ls-funnel-cols li:before{display:none}
.ls-funnel-cols li{padding-left:0}
.ls-funnel-col{display:grid;gap:8px}
.ls-funnel-name{font-family:var(--font-display);font-weight:600;color:var(--ivory-50)}
.ls-funnel-desc{color:var(--text-2);font-size:12.8px}
.ls-funnel-people{display:grid;gap:8px;justify-items:center}
.ls-funnel-people .ls-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.ls-funnel-people input{width:5ch;padding:8px;text-align:center;background:var(--surface-page);
  border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ivory-50);
  font-family:var(--font-display);font-size:1.15rem;font-variant-numeric:tabular-nums;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ls-funnel-people input:hover{border-color:var(--gold-hair)}
.ls-funnel-people input:focus-visible{outline:none;border-color:var(--gold-500);box-shadow:var(--glow-gold)}
.ls-funnel-util{display:grid;gap:4px;justify-items:center}
.ls-funnel-util b{font-family:var(--font-mono);font-size:1.125rem;color:var(--gold-400);
  font-variant-numeric:tabular-nums}
.ls-funnel-util .ls-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.ls-funnel-col[data-bottleneck] .ls-funnel-util b{color:var(--ember-300)}
.ls-funnel-col[data-bottleneck] .ls-funnel-name{color:var(--ember-300)}
.ls-calc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding-top:24px;border-top:1px solid var(--line);margin-top:18px}
.ls-calc-foot .ls-prose{flex:1 1 32ch;font-size:13.6px;color:var(--text-2)}
.ls-calc-reset{background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:.18s var(--ease)}
.ls-calc-reset:hover{border-color:var(--gold-500);color:var(--gold-300)}
@media(min-width:860px){
  .ls-funnel{min-height:360px}
  .ls-funnel-cols{grid-template-columns:repeat(5,1fr);gap:6px;min-height:360px}
  .ls-funnel-col{align-content:stretch;justify-items:center;text-align:center;gap:0;padding-block:16px}
  .ls-funnel-people{order:1}
  .ls-funnel-util{order:2;flex:1;align-content:center;min-height:0}
  .ls-funnel-name{order:3;font-size:.9375rem}
  .ls-funnel-desc{order:4}
}
@media(max-width:859px){
  .ls-funnel{min-height:44rem}
  .ls-funnel-cols{grid-template-rows:repeat(5,minmax(0,1fr));gap:6px;min-height:44rem}
  .ls-funnel-col{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name people' 'desc util';
    align-items:center;align-content:center;column-gap:16px;row-gap:4px;padding:12px 20px}
  .ls-funnel-name{grid-area:name;font-size:.9375rem}
  .ls-funnel-desc{grid-area:desc;font-size:.8125rem}
  .ls-funnel-svg{inset-inline:0;margin-inline:auto;width:min(100%,24rem)}
  .ls-funnel-people{grid-area:people}
  .ls-funnel-util{grid-area:util}
  .ls-funnel-people .ls-label{display:none}
}

/* ═══════════ MINI-CALCULETTES (stock, AMDEC) ═══════════ */
.cs-calc{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px;margin:0 0 8px}
.cs-calc .cc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;align-items:end}
.cs-calc .fld label{display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-500);margin-bottom:6px}
.cs-calc .fld input,.cs-calc .fld select{width:100%;height:44px;padding:0 13px;background:var(--surface-page);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:14.5px;transition:.18s var(--ease)}
.cs-calc .fld input:focus,.cs-calc .fld select:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--gold-soft)}
.cs-calc .cc-out{text-align:center;padding:10px 0 0}
.cs-calc .cc-out .ov{font-family:var(--font-display);font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:600;
  line-height:1;color:var(--gold-300);font-variant-numeric:tabular-nums;transition:color .2s var(--ease)}
.cs-calc .cc-out .ol{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--mute);margin-top:8px}
.cs-calc .cc-out .os{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;margin-top:12px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--gold-hair);color:var(--gold-400)}
.cs-calc .cc-out.warn .ov{color:var(--gold-400)}
.cs-calc .cc-out.warn .os{border-color:var(--gold-500);color:var(--gold-300)}
.cs-calc .cc-out.crit .ov{color:var(--ember-300)}
.cs-calc .cc-out.crit .os{border-color:var(--ember-500);color:var(--ember-300)}
.cs-calc .cc-note{font-size:12.8px;color:var(--mute);margin:18px 0 0;text-align:center}

/* ═══════════ CARROUSEL EN ARC ═══════════
   Porté du carrousel du mythe (smart-lp). Sans JS : liste complète et
   lisible. Avec JS (.is-live) : ellipse pilotée par --x/--y/--s/--o/--z. */
.cs-car{display:grid;gap:34px}
.cs-car-arc{display:grid;gap:24px}
.cs-car-track{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.cs-car-track li:before{display:none}
.cs-car-track li{padding-left:0;margin:0}
.cs-car-step{display:grid;gap:10px;padding:22px;border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface-card)}
.cs-car-step h3{margin:0;font-size:1.1rem}
.cs-car-step p{margin:0;font-size:13.8px}
.cs-car-detail,.cs-car-controls{display:none}
.cs-car.is-live .cs-car-detail{display:grid;gap:10px}
.cs-car.is-live .cs-car-controls{display:flex}
.cs-car.is-live .cs-car-track{position:relative;display:block;height:var(--arc-height,290px)}
.cs-car.is-live .cs-car-step{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  width:var(--card-w,15rem);margin:0;padding:18px;cursor:pointer;
  transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px)) scale(var(--s,1));
  opacity:var(--o,1);z-index:var(--z,1);
  background:linear-gradient(to bottom,var(--surface-card),var(--surface-doc));
  box-shadow:var(--shadow-card);
  transition:transform .64s var(--ease),opacity .64s var(--ease),border-color .2s var(--ease)}
.cs-car.is-live .cs-car-step p{display:none}
.cs-car.is-live .cs-car-step h3{font-size:.95rem;margin:0}
.cs-car.is-live .cs-car-step[aria-current='true']{border-color:var(--gold-hair);
  box-shadow:var(--shadow-card),var(--glow-gold)}
.cs-car.is-live .cs-car-step:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
.cs-car-detail{text-align:center;max-width:62ch;margin-inline:auto}
.cs-car-detail h3{margin:0;font-size:1.25rem}
.cs-car-detail p{margin:0;font-size:14.4px}
.cs-car-count{margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tracking-label);
  color:var(--mute)}
.cs-car-count b{font-size:2rem;font-weight:600;line-height:1;color:var(--gold-400);
  margin-right:8px;font-variant-numeric:tabular-nums}
.cs-car-controls{align-items:center;justify-content:center;gap:16px}
.cs-car-arrow{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text-2);
  cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease)}
.cs-car-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75}
.cs-car-arrow:hover{color:var(--gold-400);border-color:var(--gold-hair)}
.cs-car-arrow:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.cs-car-dots{display:flex;align-items:center;gap:8px}
.cs-car-dots button{width:6px;height:6px;padding:0;border:0;border-radius:999px;
  background:var(--line-strong);cursor:pointer;
  transition:width .2s var(--ease),background-color .2s var(--ease)}
.cs-car-dots button[aria-current='true']{width:24px;background:var(--gold-400)}
@media(max-width:720px){.cs-car.is-live .cs-car-arc{display:none}}

/* ═══════════ CARROUSEL D'IMAGES (V13) ═══════════
   Même moteur que le carrousel en arc : chaque étape porte une image en
   plus de son titre et de son texte. Sans JS, la liste complète reste
   lisible, image comprise.                                             */
.cs-car--img{--card-w:17rem;--arc-height:360px}
.cs-car--img .cs-car-step img{display:block;width:100%;height:auto;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-page)}
.cs-car--img.is-live .cs-car-step{padding:12px}
/* L'image se voit en entier : la carte réserve une case et l'image s'y
   pose sans être rognée (contain). Rognage sur demande, comme ailleurs :
   data-cadre="rempli" sur l'étape.                                    */
.cs-car--img.is-live .cs-car-step img{aspect-ratio:4/3;object-fit:contain;
  background:var(--surface-page)}
.cs-car--img.is-live .cs-car-step[data-cadre="rempli"] img{object-fit:cover}
.cs-car--img.is-live .cs-car-step h3{margin-top:10px;text-align:center;font-size:.9rem}

/* ═══════════ DÉFILÉ (V13) — GÉNÉRIQUE DE FIN & LÉGENDE NARRATIVE ═══════
   Deux façons de faire parler une liste. « credits » la fait monter dans
   une fenêtre, comme un générique de fin ; « legende » l'écrit ligne à
   ligne, comme un sous-titre qui suit la voix. Sans JavaScript et sous
   mouvement réduit, la liste s'affiche en entier : c'est le dessin
   final, jamais un contenu masqué. Au PDF, pareil.                     */
.cs-defile{display:grid;gap:16px;margin:0 0 8px}
.cs-defile .df-lignes{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cs-defile .df-lignes li{margin:0;padding:0}
.cs-defile .df-lignes li:before{display:none}
.cs-defile .df-ctl{display:none}
.cs-defile.is-live .df-ctl{display:flex;justify-content:center}
.df-rejouer{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--mute);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer;
  transition:color .15s var(--ease),border-color .15s var(--ease)}
.df-rejouer:hover{color:var(--gold-400);border-color:var(--gold-hair)}
.df-rejouer:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* — générique de fin : la liste monte dans une fenêtre estompée aux
     deux bords. Les deux bornes du trajet sont mesurées par le script
     (--df-a, --df-b) : pas d'unité de conteneur, pas de surprise.     */
.cs-defile--credits.is-live .df-ecran{position:relative;overflow:hidden;
  height:clamp(230px,38vh,340px);border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
.cs-defile--credits.is-live .df-lignes{position:absolute;inset-inline:0;top:0;
  padding:0 clamp(4px,2vw,22px);transform:translateY(var(--df-a,100%))}
.cs-defile--credits.is-live.joue .df-lignes{
  animation:df-monte var(--df-duree,26s) linear forwards}
@keyframes df-monte{from{transform:translateY(var(--df-a,100%))}
  to{transform:translateY(var(--df-b,-100%))}}
.cs-defile--credits .df-lignes li{display:grid;grid-template-columns:minmax(8ch,13ch) 1fr;
  gap:14px;align-items:baseline;padding:5px 0;border-bottom:1px dotted var(--line)}
.df-pays{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500)}
.df-geste{font-size:14.4px}
.cs-defile .df-lignes li.df-fin{grid-template-columns:1fr;border-bottom:0;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--gold-hair)}
.cs-defile .df-lignes li.df-fin .df-geste,.cs-defile .df-lignes li.df-fin{
  font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--ivory-100)}

@media(max-width:600px){
  .cs-defile--credits .df-lignes li{grid-template-columns:1fr;gap:2px}
}

/* ═══════════ TEXTE QUI SE DÉCHIFFRE (V13) ═══════════
   Le texte arrive décodé plutôt que tapé : tous les glyphes bouillonnent
   dès le départ, chaque caractère se cale à son tour dans un balayage
   irrégulier de gauche à droite, avec un éclat or au moment où il se
   fige. Effet porté en vanilla depuis le composant « decrypt text »
   (Motiq, MIT) — mêmes mécaniques, registre Gold, sans React.
   Progressive enhancement strict : le texte vrai est dans la page, les
   <span> par caractère sont posés par le script et retirés du fichier
   par cleanClone(). Sous mouvement réduit, rien ne bouge.             */
.cs-decrypt{display:grid;gap:7px;margin:0 0 8px}
.cs-decrypt p{margin:0;font-size:clamp(15.5px,1.75vw,18.5px);line-height:1.55}
.cs-decrypt .dc-w{display:inline-block;white-space:pre}
.cs-decrypt .dc-t{font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-500);
  margin-bottom:5px}
.cs-decrypt .dc-fin{font-family:var(--font-display);font-style:italic;
  font-size:1.45rem;color:var(--ivory-100);margin-top:14px}
.cs-decrypt [data-dc-c]{font-variant-ligatures:none}
.cs-decrypt [data-dc-c][data-etat="brouille"]{color:var(--mute)}
.cs-decrypt [data-dc-c][data-etat="cale"]{animation:dc-eclat 420ms cubic-bezier(.2,0,0,1)}
@keyframes dc-eclat{
  0%{color:var(--gold-300);text-shadow:0 0 22px var(--gold-500)}
  100%{text-shadow:0 0 0 transparent}}
.dc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs-decrypt-ctl{display:none;justify-content:center;margin-top:4px}
.cs-decrypt-ctl.on{display:flex}
@media(prefers-reduced-motion:reduce){
  .cs-decrypt [data-dc-c][data-etat="cale"]{animation:none}
}

/* ═══════════ BANDES QUI S'OUVRENT (V14) ═══════════
   Une planche d'images empilées, découpée en lignes : repliée, une bande
   ne montre que sa vignette de gauche (ici le drapeau) ; ouverte, elle
   montre la ligne entière. Le découpage se fait en CSS — une seule image
   pour toutes les bandes, chacune décalée par --bd-y. Rien à trancher,
   rien à téléverser vingt fois.
   Sans JS : les bandes sont ouvertes les unes sous les autres, la planche
   se lit comme l'original.                                             */
.cs-bandes{display:grid;gap:8px;margin:0 0 8px}
.cs-bandes .bd-piste{display:grid;gap:6px}
.cs-bandes .bd-item{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface-page)}
.cs-bandes .bd-item:before{display:none}
/* L'image et son décalage sont posés en style EN LIGNE sur chaque bande :
   un url() rangé dans une variable CSS se résout contre la FEUILLE, pas
   contre la page — le chemin relatif partait alors dans le décor.     */
.cs-bandes .bd-vue{height:var(--bd-h,52px);background-repeat:no-repeat;
  background-size:var(--bd-w,100%) auto}
.cs-bandes .bd-nom{display:none}
/* Avec JS : la piste devient une rangée de bandes verticales qui s'ouvrent
   au survol ou au clic — repliée, la largeur ne laisse voir que le
   drapeau.                                                             */
.cs-bandes.is-live .bd-piste{display:flex;gap:5px;align-items:stretch;
  overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
.cs-bandes.is-live .bd-item{flex:0 0 auto;width:var(--bd-plie,62px);cursor:pointer;
  transition:width .34s var(--ease),border-color .2s var(--ease);position:relative}
.cs-bandes.is-live .bd-item[aria-current="true"]{width:var(--bd-ouvert,min(460px,72vw));
  border-color:var(--gold-hair);box-shadow:var(--glow-gold)}
.cs-bandes.is-live .bd-item:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.cs-bandes.is-live .bd-nom{display:block;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  padding:5px 6px;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:center}
.cs-bandes.is-live .bd-item[aria-current="true"] .bd-nom{color:var(--gold-400)}
@media(prefers-reduced-motion:reduce){.cs-bandes.is-live .bd-item{transition:none}}

/* ═══════════ ESCALIER (V14) ═══════════
   Cinq marches qui montent, chacune avec son picto ; la légende à droite
   s'allume avec la marche. Le pas à pas se déclenche à l'arrivée sur la
   diapo, et se rejoue. Sans JS ni mouvement : tout est allumé.        */
.cs-escalier{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(18px,3vw,38px);align-items:center;margin:0 0 8px}
.esc-scene{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,14px);
  min-height:clamp(180px,26vh,260px)}
.esc-marche{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;width:clamp(38px,7vw,62px);border:0;padding:0;background:none;cursor:pointer}
.esc-pilier{width:100%;border-radius:999px;background:var(--gold-soft);
  border:1px solid var(--gold-hair);display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:9px;height:var(--esc-h,60px)}
.esc-pilier svg{width:clamp(20px,3.4vw,28px);height:clamp(20px,3.4vw,28px);
  fill:none;stroke:var(--gold-500);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.esc-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--mute)}
.esc-liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1.6vh,16px)}
.esc-liste li{margin:0;padding:0}
.esc-liste li:before{display:none}
.esc-liste b{display:block;font-family:var(--font-display);font-size:1.02rem;
  color:var(--ivory-50);font-weight:600}
.esc-liste span{font-size:13.2px;color:var(--mute)}
.cs-escalier.is-live .esc-pilier{background:var(--surface-card);border-color:var(--line);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.cs-escalier.is-live .esc-pilier svg{stroke:var(--line-strong);transition:stroke .4s var(--ease)}
.cs-escalier.is-live .esc-liste li{opacity:.28;transition:opacity .4s var(--ease)}
.cs-escalier.is-live .esc-marche.on .esc-pilier{background:var(--gold-soft);
  border-color:var(--gold-hair)}
.cs-escalier.is-live .esc-marche.on .esc-pilier svg{stroke:var(--gold-500)}
.cs-escalier.is-live .esc-marche.vise .esc-pilier{transform:translateY(-6px);
  box-shadow:var(--glow-gold)}
.cs-escalier.is-live .esc-liste li.on{opacity:1}
.esc-ctl{display:none;justify-content:center;gap:10px;margin-top:2px}
.cs-escalier.is-live + .esc-ctl{display:flex}
@media(max-width:720px){.cs-escalier{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .cs-escalier.is-live .esc-pilier,.cs-escalier.is-live .esc-liste li{transition:none}}

/* ═══════════ CARTES À CLÉ (V14) ═══════════
   Un tableau devenu visuel : une carte par ligne, avec sa clé en gros —
   une lettre d'acronyme, un chiffre, un signe. Sert aux 8 gaspillages
   (DOWNTIME) comme au tri VA / NVA nécessaire / NVA.                  */
.cs-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:12px;margin:0 0 8px}
.ct-item{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface-card)}
.ct-cle{font-family:var(--font-display);font-size:1.9rem;font-weight:600;line-height:1;
  color:var(--gold-400);min-width:9ch;text-align:center}
.ct-cle small{display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin-top:5px;font-weight:400;
  writing-mode:horizontal-tb;max-width:9ch;line-height:1.25}
.ct-corps b{display:block;font-size:14.6px;color:var(--ivory-50);margin-bottom:4px}
.ct-corps span{display:block;font-size:13px;color:var(--mute)}
.ct-item--fort{border-color:var(--gold-hair);background:var(--gold-soft)}
.ct-item--pale .ct-cle{color:var(--mute)}
.cs-cartes--tri{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cs-cartes--tri .ct-item{grid-template-columns:1fr;gap:8px}
.cs-cartes--tri .ct-cle{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;text-align:left;min-width:0;color:var(--gold-500)}
.cs-cartes--tri .ct-geste{font-family:var(--font-display);font-size:1.25rem;color:var(--ivory-50);
  margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}

/* ═══════════ ASTUCE DE TIAGO (V14) ═══════════ */
.callout--astuce{border-color:var(--gold-hair);background:var(--gold-soft)}
.callout--astuce .cl-t{color:var(--gold-400)}

/* ═══════════ VOLET REPLIABLE (V14) ═══════════
   Un bloc qu'on ouvre s'il intéresse : photos de terrain, aparté, détail
   technique. Ouvert à l'impression.                                    */
.cs-volet{border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface-card);margin:0 0 8px;overflow:hidden}
.cs-volet > summary{cursor:pointer;list-style:none;padding:14px 18px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);display:flex;align-items:center;gap:10px}
.cs-volet > summary::-webkit-details-marker{display:none}
.cs-volet > summary:after{content:"";margin-left:auto;width:8px;height:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.cs-volet[open] > summary:after{transform:rotate(-135deg)}
.cs-volet > summary:focus-visible{outline:2px solid var(--gold-500);outline-offset:-2px}
.cs-volet .vt-corps{padding:0 18px 18px;display:grid;gap:12px}
.cs-volet .vt-corps img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);
  border:1px solid var(--line)}
.cs-volet .vt-corps p{margin:0;font-size:13.2px;color:var(--mute)}

/* ═══════════ BERCEAU DE NEWTON (V14) ═══════════
   Idée → Vision → Action : la bille de gauche part, l'impulsion traverse,
   la dernière s'envole. Tout est en SVG + CSS ; sous mouvement réduit,
   le schéma reste, immobile.                                           */
.cs-berceau{display:grid;justify-items:center;gap:14px;margin:0 0 8px}
.cs-berceau svg{width:min(100%,540px);height:auto;overflow:visible}
.cs-berceau .bc-bati{fill:none;stroke:var(--gold-hair);stroke-width:5;stroke-linecap:round}
.cs-berceau .bc-fil{stroke:var(--line-strong);stroke-width:1.4}
.cs-berceau .bc-bille{fill:var(--surface-card);stroke:var(--gold-500);stroke-width:1.5}
.cs-berceau .bc-ico{fill:none;stroke:var(--gold-500);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cs-berceau .bc-nom{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--mute)}
.cs-berceau .bc-pend{transform-box:view-box}
/* V19 — la vraie physique du berceau. L'ancienne version faisait partir
   chaque bille chacune son tour, sans jamais qu'aucune en frappe une
   autre : le geste ne racontait rien. Un berceau de Newton fait ceci —
   la bille de gauche, tiree en arriere, RETOMBE et frappe ; a l'impact
   toute la quantite de mouvement traverse la bille du milieu, qui ne
   bouge pas, et ressort par celle de droite qui s'envole ; celle-ci
   retombe, frappe a son tour, et celle de gauche repart. D'ou les deux
   temps de repos a zero, l'un pour chaque bille : c'est pendant ce
   repos que l'autre fait son voyage.
   L'acceleration suit la gravite : extremite vers le centre en ease-in
   (elle tombe et prend de la vitesse), centre vers l'extremite en
   ease-out (elle monte et s'epuise). La bille du milieu n'a aucune
   animation — c'est le propos de la diapo.                            */
html.motion .cs-berceau .bc-gauche{animation:bc-gauche 3.6s infinite}
html.motion .cs-berceau .bc-droite{animation:bc-droite 3.6s infinite}
@keyframes bc-gauche{
  0%  {transform:rotate(-32deg);animation-timing-function:ease-in}
  25% {transform:rotate(0deg)}
  75% {transform:rotate(0deg);animation-timing-function:ease-out}
  100%{transform:rotate(-32deg)}}
@keyframes bc-droite{
  0%  {transform:rotate(0deg)}
  25% {transform:rotate(0deg);animation-timing-function:ease-out}
  50% {transform:rotate(32deg);animation-timing-function:ease-in}
  75% {transform:rotate(0deg)}
  100%{transform:rotate(0deg)}}
@media(prefers-reduced-motion:reduce){
  html.motion .cs-berceau .bc-gauche,html.motion .cs-berceau .bc-droite{animation:none}}

/* ═══════════ YAMAZUMI (V20) — la charge des postes face au takt ═══════
   Le graphique empilé du support d'origine, rendu manipulable : une
   colonne par poste, sa hauteur = le temps de cycle, le takt en ligne
   tiretée par-dessus. L'effectif de chaque poste se règle, le temps de
   cycle suit (charge ÷ effectif), et huit stratégies rejouent les
   scénarios d'amélioration de la séance.
   V20 — trois choses de plus :
   · le morceau de barre REPRIS à un autre poste (« Réduire le lead
     time ») s'empile en haut, en or hachuré : on voit d'où il vient ;
   · le vol animé (.ya-vol) qui porte la barre d'une colonne à l'autre ;
   · la colonne VIDE (data-vide) — un emplacement qui dort, dessiné en
     tirets, hors de tout calcul tant qu'on ne lui donne pas de cycle.
   Sans JS : le tableau des charges reste lisible sous le graphique.    */
.cs-yama{display:grid;gap:16px;margin:0 0 8px}
.ya-reglages{display:flex;flex-wrap:wrap;align-items:end;gap:14px}
.ya-champ{display:grid;gap:6px}
.ya-champ label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500)}
.ya-champ input{width:110px;height:38px;padding:0 11px;background:var(--surface-page);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:14px}
.ya-champ input:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px var(--gold-soft)}
/* V20 — le plancher de largeur. Dix postes sur un téléphone donnaient des
   colonnes de 19 px : les noms étaient illisibles quoi qu'on fasse. Le
   script pose --ya-min (nombre de postes × 66 px) ; en dessous, le
   graphique DÉFILE horizontalement au lieu de s'écraser. Sur un écran
   large, la valeur passe inaperçue — rien ne dépasse, rien ne défile. */
.ya-plan{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;gap:6px 10px;
  background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:16px 18px 14px;overflow-x:auto;overscroll-behavior-x:contain}
.ya-scene,.ya-pieds{min-width:var(--ya-min,0px)}
.ya-plan > .ya-axe{grid-column:1;grid-row:1}
.ya-plan > .ya-scene{grid-column:2;grid-row:1}
.ya-plan > .ya-pieds{grid-column:2;grid-row:2}
.ya-axe{display:flex;flex-direction:column-reverse;justify-content:space-between;
  font-family:var(--font-mono);font-size:9.5px;color:var(--mute);
  height:var(--ya-h,240px);padding-bottom:1px}
.ya-scene{position:relative;height:var(--ya-h,240px)}
.ya-grille{position:absolute;inset:0;display:flex;flex-direction:column-reverse;
  justify-content:space-between;pointer-events:none}
.ya-grille i{display:block;height:1px;background:var(--line);opacity:.75}
/* Les colonnes s'étirent sur toute la hauteur de la scène : c'est ce qui
   permet à la pile de se dimensionner en pourcentage. Étirées, mais le
   contenu reste collé en bas.
   V20 — la gouttière se resserre : elle mangeait la largeur du nom de
   poste, et la page dédiée en aligne dix. Elle vaut exactement la même
   valeur au pied, sans quoi les colonnes ne seraient plus en face.    */
.ya-postes{position:absolute;inset:0;display:flex;align-items:stretch;
  gap:var(--ya-gout,clamp(4px,1vw,12px));padding:0 4px}
.ya-poste{position:relative;flex:1 1 0;display:flex;flex-direction:column;
  justify-content:flex-end;min-width:0;height:100%}
/* V15 — une barre = UNE couleur, grise : on lit une hauteur, pas une
   composition (le détail VA/NVA vit dans le modèle et les stratégies).
   Le goulot se contourne de rouge, le takt se tire en pointillés VERTS.
   V20 — seule exception à la règle « une couleur » : la part de cycle
   REPRISE à un autre poste, qui doit se distinguer pour raconter d'où
   elle vient. Tout le reste de la barre reste gris.                    */
.ya-pile{position:relative;display:flex;flex-direction:column-reverse;
  border-radius:3px 3px 0 0;overflow:hidden;
  background:color-mix(in srgb, var(--mute) 30%, transparent);
  border:1px solid color-mix(in srgb, var(--mute) 45%, transparent);
  transition:height .45s var(--ease),background-color .35s linear,
    border-color .35s linear,box-shadow .35s var(--ease)}
.ya-seg{display:block;width:100%;flex:0 0 auto;min-height:0}
.ya-seg--socle{background:transparent}
/* Le morceau greffé : or, hachuré, souligné d'un filet — trois signaux
   pour dire « ce temps-là vient d'ailleurs ». Le titre au survol nomme
   le poste d'origine et la valeur reprise.                            */
.ya-seg--gref{background-color:color-mix(in srgb, var(--gold-500) 34%, transparent);
  background-image:repeating-linear-gradient(135deg,
    transparent 0 5px,
    color-mix(in srgb, var(--gold-500) 30%, transparent) 5px 10px);
  border-top:2px solid var(--gold-500);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-500) 26%, transparent)}
.ya-poste[data-goulot] .ya-pile{border:2px solid var(--ember-500);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ember-500) 18%, transparent)}
/* La barre qui vole d'une colonne à l'autre : une copie de la barre du
   poste absorbé, qui rejoint sa place au sommet de la barre d'accueil.
   Elle n'existe que le temps du vol, et jamais si le visiteur a demandé
   moins de mouvement.                                                  */
.ya-vol{position:absolute;z-index:5;pointer-events:none;border-radius:3px;
  background-color:color-mix(in srgb, var(--gold-500) 38%, transparent);
  background-image:repeating-linear-gradient(135deg,
    transparent 0 5px,
    color-mix(in srgb, var(--gold-500) 32%, transparent) 5px 10px);
  border:1px solid var(--gold-500);
  box-shadow:0 12px 30px -14px var(--halo-gold)}
.ya-vol.go{transition:left .58s var(--ease),top .58s var(--ease),
  width .58s var(--ease),height .58s var(--ease)}
@keyframes ya-atterri{
  0%{box-shadow:0 0 0 0 var(--halo-gold)}
  100%{box-shadow:0 0 0 16px transparent}}
.ya-pile.ya-atterri{animation:ya-atterri .76s var(--ease)}
/* La colonne qui dort : hors de tout calcul, dessinée en tirets — un
   emplacement libre, pas un poste à zéro. Sa barre s'efface, son socle
   en tirets reste pour dire qu'on peut l'occuper.                      */
.ya-poste[data-vide] .ya-pile{background-color:transparent;border-color:transparent;
  box-shadow:none}
.ya-creux{display:none}
.ya-poste[data-vide] .ya-creux{display:block;position:absolute;left:0;right:0;bottom:0;
  height:26px;border:1px dashed var(--line-strong);border-radius:3px;opacity:.5;
  pointer-events:none}
/* Un emplacement qui dort n'a pas besoin d'une colonne pleine largeur : il
   se serre, et rend la place aux postes qui existent — ce sont eux qui ont
   des noms à porter. La barre et le pied portent la MÊME règle, sans quoi
   les colonnes ne seraient plus en face l'une de l'autre. */
.ya-poste[data-vide],.ya-pied > div.est-vide{flex:0 1 48px}
.ya-cycin{position:absolute;top:4px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:10px;font-variant-numeric:tabular-nums;
  color:var(--text-2);pointer-events:none;z-index:2}
.ya-poste[data-goulot] .ya-cycin{color:var(--ember-300);font-weight:700}
.ya-takt{position:absolute;left:0;right:0;border-top:2px dashed #34a06d;
  transition:bottom .35s var(--ease);pointer-events:none;z-index:3}
.ya-takt b{position:absolute;right:0;top:-9px;background:var(--surface-card);padding:0 7px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:#34a06d}
/* V21 — le pendant de la ligne du takt. Le vert dit ce que le CLIENT
   demande ; la braise dit ce que la LIGNE sait faire, c'est-à-dire le
   temps de cycle du poste le plus lent. L'étiquette part à GAUCHE pour
   ne pas se cogner à celle du takt quand les deux se rejoignent — et
   quand elles se rejoignent, la ligne est exactement au takt.        */
.ya-cadence{position:absolute;left:0;right:0;border-top:2px dashed var(--ember-500);
  transition:bottom .35s var(--ease);pointer-events:none;z-index:3;opacity:.85}
.ya-cadence b{position:absolute;left:0;top:-9px;background:var(--surface-card);padding:0 7px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--ember-300)}
.ya-pieds{display:grid;gap:8px;margin-top:10px}
.ya-pied{display:flex;gap:var(--ya-gout,clamp(4px,1vw,12px));padding:0 4px}
.ya-pied > div{flex:1 1 0;min-width:0;text-align:center}
/* La colonne de la grille est FIXÉE à la largeur de la cellule
   (minmax(0,1fr)) et non « auto » : sinon le champ de nom, élargi au
   focus, gonflait la piste et poussait les deux petits champs du dessous
   dans la colonne voisine. Élargi, il déborde — sans rien entraîner. */
.ya-cell{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;justify-items:stretch}
.ya-cell.est-vide{opacity:.55}
/* V20 — le nom du poste tient EN ENTIER. Le champ prend toute la largeur
   de la colonne, et le script rabat sa taille de caractère jusqu'à ce
   que le nom cesse de déborder (jusqu'à 6,5 px, puis les points de
   suspension). Au focus il s'élargit par-dessus ses voisins : on écrit
   « Assemblage carène tribord » sans se battre avec la colonne.
   Plus de capitales depuis la V19 : elles mangeaient la largeur et
   « Découpe » sortait en « DÉCO… ».                                   */
.ya-nom{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.01em;line-height:1.25;
  color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* c'est un <input> : on lui retire son costume de champ de saisie et
     on lui garde la typographie de l'étiquette qu'il était.            */
  background:transparent;border:0;border-bottom:1px dashed transparent;border-radius:3px;
  width:100%;max-width:none;padding:2px 2px;text-align:center;
  transition:width .18s var(--ease),background-color .18s linear}
.ya-nom::placeholder{color:var(--mute);opacity:.5;font-style:italic}
.ya-nom:hover{border-bottom-color:var(--gold-hair)}
.ya-nom:focus{outline:none;position:relative;z-index:7;
  width:max(100%,168px);left:50%;transform:translateX(-50%);
  font-size:12px !important;text-overflow:clip;
  background:var(--surface-doc);border:1px solid var(--gold-500);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.35);padding:2px 6px}
.ya-cyc{font-family:var(--font-mono);font-size:11px;color:var(--text-2);
  font-variant-numeric:tabular-nums}
/* Les deux petits champs sous le nom : le temps de cycle en secondes
   (page dédiée seulement) et l'effectif. Le cycle porte l'or, parce que
   c'est LUI qu'on vient régler ; l'effectif reste neutre.              */
.ya-duo{display:flex;gap:4px;justify-content:center;width:100%}
/* ATTENTION — cette règle vise .ya-in, JAMAIS « .ya-pied input ». Le nom du
   poste est un <input> lui aussi : jusqu'à la V19 il tombait sous ce
   sélecteur, qui l'emportait sur .ya-nom et le bridait à 56 px de large.
   C'est de là que venaient les « DÉCO… » et les noms coupés.          */
.ya-in{width:100%;min-width:0;max-width:52px;height:28px;text-align:center;padding:0 3px;
  background:var(--surface-page);color:var(--text);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;
  font-variant-numeric:tabular-nums;
  /* Les flèches du champ numérique réservaient une quinzaine de pixels :
     dans une colonne resserrée, « 50 » sortait en « 5 ». On les retire —
     on tape la valeur, on ne l'incrémente pas au clic. */
  -moz-appearance:textfield;appearance:textfield}
.ya-in::-webkit-outer-spin-button,
.ya-in::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.ya-in--cyc{color:var(--gold-400);font-weight:700;border-color:var(--gold-hair)}
.ya-in:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px var(--gold-soft)}
.ya-legende{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* V21 — « > span », et surtout pas « span ». Le sélecteur descendant
   attrapait aussi la bulle de décryptage accrochée dans la légende : elle
   devenait un conteneur flex, et chaque mot s'y empilait en colonne de
   dix caractères. Une entrée de légende est un enfant DIRECT.        */
.ya-legende > span{display:flex;align-items:center;gap:7px}
.ya-legende > span > i{width:11px;height:11px;border-radius:2px;display:block}
.ya-legende .i-gref{background-color:color-mix(in srgb, var(--gold-500) 34%, transparent);
  background-image:repeating-linear-gradient(135deg,
    transparent 0 3px,
    color-mix(in srgb, var(--gold-500) 30%, transparent) 3px 6px);
  border-top:2px solid var(--gold-500)}
.ya-strats{display:flex;flex-wrap:wrap;gap:8px}
.ya-strat{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:8px 13px;cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease)}
.ya-strat:hover{color:var(--gold-400);border-color:var(--gold-hair)}
.ya-strat:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.ya-strat[aria-pressed="true"]{color:var(--gold-300);border-color:var(--gold-500);
  background:var(--gold-soft)}
.ya-strat .ya-n{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:var(--gold-soft);color:var(--gold-400);font-variant-numeric:tabular-nums}
.ya-strat[data-n="0"] .ya-n,.ya-strat:not([data-n]) .ya-n{display:none}
.ya-reglages .ya-strat--raz{margin-left:0;align-self:end}
/* Le bouton du lead time ne joue pas dans la même catégorie que les huit
   stratégies : il ne vise pas le goulot mais les deux postes les plus
   courts. Il porte donc l'or plein, et se pose en tête de rangée.     */
.ya-strat--lead{color:var(--gold-300);border-color:var(--gold-500);background:var(--gold-soft);
  font-weight:700}
.ya-strat--lead:hover{color:var(--gold-300);border-color:var(--gold-400);
  box-shadow:0 0 0 3px var(--gold-soft)}
.ya-strat--lead[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.ya-effet{font-size:13.2px;color:var(--mute);margin:0}
.ya-effet b{color:var(--gold-400);font-weight:600}
/* V20 — les cinq indicateurs tiennent sur UNE ligne. grid-auto-flow en
   colonne les aligne quel que soit leur nombre ; les cadres se resserrent
   (moins de rembourrage, chiffre plus mesuré) pour que la ligne passe
   même sur un portable en projection. Ils repassent sur deux rangs en
   dessous de 860 px, sur un seul rang sous 430 px.                     */
.ya-bilan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.ya-bilan > div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 9px;
  background:var(--surface-card);min-width:0}
.ya-bilan .bl{font-family:var(--font-mono);font-size:8.2px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ya-bilan .bv{font-family:var(--font-display);font-size:clamp(.98rem,2.1vw,1.2rem);
  color:var(--gold-300);margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.2}
.ya-bilan > div.alerte .bv{color:var(--ember-300)}
@keyframes ya-baisse{
  0%{background:var(--gold-soft);box-shadow:0 0 0 0 var(--halo-gold)}
  100%{background:var(--surface-card);box-shadow:0 0 0 12px transparent}}
.ya-bilan > div.baisse{animation:ya-baisse 1.1s var(--ease)}
@media(max-width:860px){
  .ya-bilan{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .ya-bilan .bl{white-space:normal}
}
@media(max-width:430px){
  .ya-bilan{grid-template-columns:1fr}
}
/* V19 — le repli du Yamazumi. Avec script, le tableau des charges double
   le graphique : on le cache. SANS script, c'est l'inverse — les barres ne
   sont jamais dessinées, donc on cache la mécanique morte (cadre, boutons,
   champs, bilan) et on montre le tableau, qui porte les mêmes chiffres et
   se lit sans rien manipuler.                                          */
.cs-yama.is-live .ya-table{display:none}
.cs-yama:not(.is-live) .ya-plan,
.cs-yama:not(.is-live) .ya-strats,
.cs-yama:not(.is-live) .ya-champ,
.cs-yama:not(.is-live) .ya-bilan{display:none}
@media(max-width:640px){
  /* .ya-in seulement — surtout PAS « .ya-pied input », qui rattraperait le
     nom du poste et le brimerait à 42 px. La taille du nom, elle, est
     posée par le script, au caractère près. */
  .ya-in{max-width:42px;height:26px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .ya-pile,.ya-pile > i,.ya-takt,.ya-cadence,.ya-vol,.ya-nom{transition:none}
  .ya-pile.ya-atterri,.ya-bilan > div.baisse{animation:none}
}

/* ═══════════ ÉVENTAIL DE CARTES (V15) ═══════════
   Le jeu de cartes tenu en main : les cartes s'étalent en éventail
   depuis un pivot bas ; survoler ou cliquer une carte la redresse et la
   fait passer devant, sa légende s'affiche dessous. Porté en vanilla du
   « card fan carousel » (21st.dev, aayush-duhan) — même geste, registre
   Gold, sans React. Sans JS : les cartes en grille, toutes visibles.  */
.cs-eventail{display:grid;gap:16px;justify-items:center;margin:0 0 8px}
.cs-eventail .ev-scene{position:relative;width:100%}
.cs-eventail:not(.is-live) .ev-scene{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.cs-eventail:not(.is-live) .ev-carte{margin:0}
.ev-carte{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  background:var(--surface-card);box-shadow:var(--shadow-card);padding:8px 8px 10px;cursor:pointer}
.ev-carte img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.ev-carte figcaption{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);text-align:center;padding-top:8px}
.cs-eventail.is-live .ev-scene{height:clamp(280px,46vh,400px)}
.cs-eventail.is-live .ev-carte{position:absolute;left:50%;bottom:44px;
  width:clamp(180px,27vw,250px);margin-left:calc(clamp(180px,27vw,250px) / -2);
  transform-origin:50% 140%;
  transform:rotate(var(--ev-r,0deg)) translateY(var(--ev-y,0px)) scale(var(--ev-s,1));
  z-index:var(--ev-z,1);
  transition:transform .5s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.cs-eventail.is-live .ev-carte[aria-current="true"]{border-color:var(--gold-hair);
  box-shadow:var(--shadow-card),var(--glow-gold)}
.cs-eventail.is-live .ev-carte:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
.cs-eventail .ev-detail{text-align:center;max-width:62ch}
.cs-eventail .ev-detail h3{margin:0;font-size:1.2rem}
.cs-eventail .ev-detail p{margin:6px 0 0;font-size:14.2px;color:var(--mute)}
@media(prefers-reduced-motion:reduce){.cs-eventail.is-live .ev-carte{transition:none}}

/* ═══════════ TUILES À PICTO (V15) — lettre, icône, description ═══════
   Le visuel classique des 8 gaspillages : une tuile par famille, picto
   au trait, lettre de l'acronyme en évidence, description en une ligne. */
.cs-tuiles{display:grid;gap:10px;margin:0 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,152px),1fr))}
.tu-item{display:grid;justify-items:center;gap:7px;text-align:center;
  padding:15px 12px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface-card)}
.tu-item svg{width:34px;height:34px;color:var(--gold-500)}
.tu-cle{font-family:var(--font-display);font-size:1.55rem;font-weight:600;line-height:1;
  color:var(--gold-400)}
.tu-cle small{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);font-weight:400;margin-left:5px}
.tu-item b{font-size:13.6px;color:var(--ivory-50)}
.tu-item span{font-size:11.8px;color:var(--mute)}
.tu-item--fort{border-color:var(--gold-hair);background:var(--gold-soft)}

/* ═══════════ TRI VA / NVA — code couleur (V15) ═══════════ */
.ct-item--va{background:color-mix(in srgb, #34a06d 12%, transparent);
  border-color:color-mix(in srgb, #34a06d 55%, transparent)}
.ct-item--va .ct-cle{color:#2f8f5f}
.ct-item--nvan{background:color-mix(in srgb, #d4a017 12%, transparent);
  border-color:color-mix(in srgb, #d4a017 60%, transparent)}
.ct-item--nvan .ct-cle{color:#b8860b}
.ct-item--nva{background:color-mix(in srgb, #c7543c 12%, transparent);
  border-color:var(--ember-500)}
.ct-item--nva .ct-cle{color:var(--ember-300)}

/* ═══════════ CHASSE AU VIDE (V15) — la barre qui se comprime ═══════
   Deux lignes : le même flux avant et après. La ligne « après » se joue
   au premier passage : les segments rouges s'effondrent, le jaune se
   réduit, la barre entière raccourcit — le lead time avec elle.       */
.cs-chasse{display:grid;gap:12px;margin:0 0 8px}
.cs-chasse .ch-ligne{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.cs-chasse .ch-nom{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);text-align:right}
/* V19 — LARGEURS FIXES, PAS DES PARTS.
   La version precedente distribuait la barre en flex-grow : quand les
   segments NVA rétrécissaient, la VA récupérait leur place et GRANDISSAIT
   — exactement ce qu'il ne faut pas montrer sur la planche qui dit « on
   n'y touche pas ». Chaque segment porte maintenant une largeur fixe en
   pourcentage de la barre AVANT (--w). La VA garde la sienne, au pixel
   près ; seuls le jaune et le rouge se retractent, et la place liberee
   reste visible a droite : c'est la reduction de delai, dessinee.      */
.cs-chasse .ch-barre{display:flex;height:34px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);width:100%;background:var(--surface-page)}
.cs-chasse .ch-seg{display:flex;align-items:center;justify-content:center;min-width:0;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:#fff;
  overflow:hidden;white-space:nowrap;flex:0 0 var(--wj,var(--w,20%));
  transition:flex-basis 1.1s var(--ease)}
.cs-chasse .ch-seg--va{background:#34a06d}
.cs-chasse .ch-seg--nvan{background:#c99a12}
.cs-chasse .ch-seg--nva{background:var(--ember-500)}
/* --wj, et pas --w : la largeur de depart est posee en style EN LIGNE sur
   chaque segment, et un style en ligne bat toujours une feuille, quelle
   que soit la specificite. On surcharge donc une AUTRE variable, que la
   declaration de flex consulte en premier — sans !important.          */
.cs-chasse.joue .ch-apres .ch-seg--nva{--wj:0%;font-size:0}
.cs-chasse.joue .ch-apres .ch-seg--nvan{--wj:7.4%}
.cs-chasse .ch-ctl{display:none;justify-content:center}
.cs-chasse.is-live .ch-ctl{display:flex}
.cs-chasse .ch-legende{font-size:12.6px;color:var(--mute);text-align:center;margin:0}
@media(prefers-reduced-motion:reduce){
  .cs-chasse .ch-barre,.cs-chasse .ch-seg{transition:none}}

/* ═══════════ ESCALIER-JALON (V15) — l'intercalaire de principe ═══════
   La rampe des cinq principes en petit, la marche du moment allumée :
   c'est la roue du PowerPoint d'origine, qui revenait entre chaque bloc. */
.cs-escalier--jalon{grid-template-columns:1fr;justify-items:center;gap:10px;margin:0}
.cs-escalier--jalon .esc-scene{min-height:0;gap:clamp(5px,1.1vw,10px)}
.cs-escalier--jalon .esc-marche{width:clamp(30px,4.4vw,42px);cursor:default}
.cs-escalier--jalon .esc-pilier{background:var(--surface-card);border-color:var(--line);
  padding-bottom:7px}
.cs-escalier--jalon .esc-pilier svg{width:18px;height:18px;stroke:var(--line-strong)}
.cs-escalier--jalon .esc-n{font-size:9px}
.cs-escalier--jalon .esc-marche.on .esc-pilier{background:var(--gold-soft);
  border-color:var(--gold-hair);box-shadow:var(--glow-gold)}
.cs-escalier--jalon .esc-marche.on .esc-pilier svg{stroke:var(--gold-500)}
.cs-escalier--jalon .esc-marche.on .esc-n{color:var(--gold-400);font-weight:700}
.cs-slide--jalon{padding-top:clamp(24px,3.4cqw,36px);padding-bottom:clamp(24px,3.4cqw,36px)}
.cs-slide--jalon h2{font-size:clamp(1.3rem,2.6cqw,1.7rem);margin-bottom:14px;text-align:center}

/* ═══════════ MINUTEUR DE SÉANCE (V15) ═══════════
   Le rituel des deux minutes, chronométré : cadran en anneau, durée
   réglable, départ MANUEL. À zéro, le temps clignote braise.          */
.cs-minuteur{display:grid;justify-items:center;gap:14px;margin:0 0 8px}
.cs-minuteur .mn-cadran{position:relative;width:clamp(150px,20vw,200px)}
.cs-minuteur .mn-cadran svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.cs-minuteur .mn-fond{fill:none;stroke:var(--line);stroke-width:6}
.cs-minuteur .mn-arc{fill:none;stroke:var(--gold-500);stroke-width:6;stroke-linecap:round;
  transition:stroke-dashoffset .96s linear,stroke .3s var(--ease)}
.cs-minuteur.fini .mn-arc{stroke:var(--ember-500)}
.cs-minuteur .mn-tps{position:absolute;inset:0;display:grid;place-content:center;
  font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ivory-50)}
.cs-minuteur.fini .mn-tps{color:var(--ember-300);animation:mn-fini 1s steps(2,end) 8}
@keyframes mn-fini{50%{opacity:.2}}
.cs-minuteur .mn-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:end;justify-content:center}
.cs-minuteur .mn-champ{display:grid;gap:5px}
.cs-minuteur .mn-champ label{font-family:var(--font-mono);font-size:9px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-500)}
.cs-minuteur .mn-champ input{width:76px;height:34px;padding:0 10px;text-align:center;
  background:var(--surface-page);color:var(--text);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13px}
.cs-minuteur .mn-champ input:focus{outline:none;border-color:var(--gold-500)}
@media(prefers-reduced-motion:reduce){.cs-minuteur .mn-arc{transition:none}
  .cs-minuteur.fini .mn-tps{animation:none}}

/* ═══════════ SCHÉMAS AU TRAIT (V15) — VoC, 3M, PDCA, excellence ══════ */
.cs-schema{display:grid;justify-items:center;gap:10px;margin:0 0 8px}
.cs-schema svg{width:min(100%,var(--sch-w,580px));height:auto;overflow:visible}
.cs-schema .sc-trait{fill:none;stroke:var(--gold-500);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cs-schema .sc-mute{fill:none;stroke:var(--line-strong);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.cs-schema .sc-fond{fill:var(--gold-soft);stroke:var(--gold-hair);stroke-width:1}
.cs-schema .sc-plein{fill:var(--gold-500);stroke:none}
.cs-schema .sc-ok{stroke:#34a06d}
.cs-schema .sc-bad{stroke:var(--ember-500)}
.cs-schema .sc-t{font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--mute)}
.cs-schema .sc-t--fort{fill:var(--gold-400);font-weight:700}
.cs-schema .sc-t--gros{font-family:var(--font-display);font-size:15px;
  letter-spacing:0;text-transform:none;fill:var(--ivory-50)}
.cs-schema figcaption{font-size:12.8px;color:var(--mute);text-align:center;max-width:60ch}

/* Excellence : la courbe des jours se trace, la moyenne puis l'écart
   apparaissent. Sans html.motion (pas de JS, mouvement réduit), tout
   est visible d'emblée — jamais un contenu masqué.                    */
html.motion [data-cs-excel]:not(.joue) .ex-jour{stroke-dasharray:1200;stroke-dashoffset:1200}
html.motion [data-cs-excel]:not(.joue) .ex-moy,
html.motion [data-cs-excel]:not(.joue) .ex-ecart{opacity:0}
[data-cs-excel].joue .ex-jour{stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:ex-trace 2.4s var(--ease) forwards}
[data-cs-excel].joue .ex-moy{opacity:0;animation:ex-pose .6s var(--ease) 2.2s forwards}
[data-cs-excel].joue .ex-ecart{opacity:0;animation:ex-pose .6s var(--ease) 2.8s forwards}
[data-cs-excel] .ex-ctl{display:none;justify-content:center}
[data-cs-excel].is-live .ex-ctl{display:flex}
@keyframes ex-trace{to{stroke-dashoffset:0}}
@keyframes ex-pose{to{opacity:1}}

/* ═══════════ CASE ANIMATEUR (V15) — kahoot prévu ou non ═══════════ */
.cs-case{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--mute);cursor:pointer}
.cs-case input{accent-color:var(--gold-500);width:15px;height:15px}

/* ═══════════ LES TROIS M, EN CAMIONS (V19) ═══════════
   Six tonnes a livrer, des camions de trois tonnes. Quatre voies, un
   meme cycle de 9 s, et on regarde ce qui arrive a destination :

     reference  deux voyages de 3 t : tout passe, rien ne casse
     muri       un seul voyage a 6 t : le camion casse a mi-chemin
     mura       charges en dents de scie : ca tient deux voyages,
                le troisieme casse
     muda       le camion roule a vide : il arrive, mais n'a rien porte

   Les quatre voies partagent la meme duree pour que la comparaison se
   fasse a l'oeil, sans lire un chiffre. Le texte detaille vit en
   infobulle : la planche montre, elle n'explique pas.
   Sans JavaScript rien ne bouge — les camions restent poses sur leur
   voie, a l'endroit ou l'histoire les laisse. C'est encore lisible.  */
.cs-camions{display:grid;gap:10px;margin:0 0 8px}
.cm-ligne{display:grid;grid-template-columns:clamp(66px,9cqw,104px) 1fr clamp(52px,7cqw,78px);
  gap:clamp(8px,1.6cqw,16px);align-items:center}
.cm-nom{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);text-align:right}
.cm-nom em{font-style:normal;color:var(--gold-400)}
/* la route est plus haute que le camion, sinon overflow:hidden rogne la
   cabine et l'etiquette de charge posee au-dessus.                    */
.cm-route{position:relative;height:60px;border-bottom:2px dashed var(--line);
  overflow:hidden}
/* la position se joue sur left, PAS sur translateX : un translateX en
   pourcentage se mesure sur la largeur du CAMION (52 px), pas sur celle
   de la route — les camions faisaient du surplace. left, lui, se mesure
   sur le bloc conteneur, donc sur la route. transform reste libre pour
   l'inclinaison de la panne.                                          */
.cm-cam{position:absolute;bottom:2px;left:-70px;width:44px;color:var(--gold-500)}
.cm-cam svg{display:block;width:44px;height:44px}
/* la charge se lit AU-DESSUS du camion, jamais par-dessus : posee sur la
   caisse elle devenait illisible des que le trait passait dessous.    */
.cm-charge{position:absolute;top:0;left:0;width:44px;text-align:center;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em;color:var(--gold-400)}
.cm-ligne--casse .cm-cam{color:var(--ember-500)}
.cm-ligne--vide .cm-cam{color:var(--mute)}
/* la croix de panne, posee la ou le camion s'arrete */
/* le verdict sort de la route : pose dedans, les camions qui s'arretent
   au bout venaient s'ecrire par-dessus.                               */
.cm-bout{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);line-height:1.25}
.cm-ligne--casse .cm-bout{color:var(--ember-300)}
/* « panne » se pose A COTE du camion arrete, pas dessus : les positions
   left des deux etiquettes sont celles ou le camion s'immobilise, plus
   sa largeur.                                                         */
.cm-panne{position:absolute;bottom:20px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ember-500);opacity:0;
  white-space:nowrap}

html.motion .cs-camions.is-live .cm-ref-1{animation:cm-passe 9s linear infinite}
html.motion .cs-camions.is-live .cm-ref-2{animation:cm-passe 9s linear infinite;animation-delay:4.5s}
html.motion .cs-camions.is-live .cm-muri{animation:cm-cale 9s linear infinite}
html.motion .cs-camions.is-live .cm-muri-panne{animation:cm-eclair 9s linear infinite}
html.motion .cs-camions.is-live .cm-mura{animation:cm-trois 9s linear infinite}
html.motion .cs-camions.is-live .cm-mura-panne{animation:cm-eclair-tard 9s linear infinite}
html.motion .cs-camions.is-live .cm-muda{animation:cm-passe 3s linear infinite}

/* un voyage plein : il entre, il traverse, il sort — puis il attend son
   tour hors champ pendant que l'autre moitie du cycle se joue */
@keyframes cm-passe{
  0%{left:-70px} 48%{left:calc(100% + 24px)} 100%{left:calc(100% + 24px)}}
/* muri : il part, il ralentit, il casse a mi-chemin et n'en repart pas */
@keyframes cm-cale{
  0%{left:-70px;transform:rotate(0deg);animation-timing-function:ease-out}
  20%{left:38%;transform:rotate(0deg);animation-timing-function:ease-in}
  27%{left:46%;transform:rotate(-5deg)}
  29%{left:46%;transform:rotate(2deg)}
  31%,100%{left:46%;transform:rotate(-3deg)}}
/* mura : deux voyages passent, le troisieme casse pres du bout */
@keyframes cm-trois{
  0%{left:-70px;transform:rotate(0deg)}
  24%{left:calc(100% + 24px);transform:rotate(0deg)}
  24.01%{left:-70px}
  50%{left:calc(100% + 24px)}
  50.01%{left:-70px}
  72%{left:66%;transform:rotate(0deg)}
  77%{left:74%;transform:rotate(-6deg)}
  80%,100%{left:74%;transform:rotate(-4deg)}}
@keyframes cm-eclair{0%,26%{opacity:0} 32%,100%{opacity:1}}
@keyframes cm-eclair-tard{0%,74%{opacity:0} 80%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  html.motion .cs-camions .cm-cam,html.motion .cs-camions .cm-panne{animation:none !important}
  .cs-camions .cm-cam{left:38%}
  .cs-camions .cm-panne{opacity:1}}
@media print{
  .cs-camions .cm-cam{animation:none !important;left:38% !important}
  .cs-camions .cm-panne{opacity:1 !important}}

/* ═══════════ EXERCICE EN SALLE (V19) ═══════════
   Le bloc d'un exercice : l'accroche a gauche, le passage a l'acte a
   droite — le lien pour ceux qui suivent sur l'ecran, le QR pour ceux
   qui sont au fond et ne reliront pas une URL dictee.
   Le QR garde son fond blanc : c'est sa zone de silence, elle ne se
   teinte pas, sinon le code cesse d'etre lisible.                     */
.cs-exo{display:grid;gap:clamp(14px,2.4cqw,22px);margin:0 0 8px;
  grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.cs-exo{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.cs-exo .exo-visuel{margin:0}
.cs-exo .exo-visuel img{display:block;width:100%;height:auto;border-radius:var(--radius-md)}
.cs-exo .exo-agir{display:grid;justify-items:center;gap:12px;text-align:center}
.cs-exo .exo-qr{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:10px;line-height:0}
.cs-exo .exo-qr img{display:block;width:clamp(104px,15vw,146px);height:auto}
.cs-exo .exo-url{margin:0;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute)}
@media print{
  .cs-exo{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .cs-exo .exo-url:after{content:" — leanskipper.com/chrono-salade/"}
}

/* ═══════════ VIDÉO EMBARQUÉE (V18) ═══════════
   Un lecteur YouTube dans le fil, en 16/9, sans rien à installer.

   Trois précautions tenues ici :
   - youtube-nocookie.com plutôt que youtube.com : pas de cookie posé
     tant que l'étudiant ne lance pas la lecture. C'est un cours, pas
     une régie publicitaire.
   - loading="lazy" et un placement DANS un volet replié : l'iframe n'a
     pas de boîte tant que le volet est fermé, donc le navigateur ne va
     rien chercher. La page reste légère pour qui ne regarde pas.
   - un lien visible sous le lecteur, toujours. Il rattrape les trois
     cas où l'iframe ne s'affiche pas : hors ligne, page publiée en
     artifact (dont la politique de sécurité bloque les hôtes tiers),
     et impression.                                                    */
.cs-video{display:grid;gap:8px;margin:0 0 10px}
.cs-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;
  border-radius:var(--radius-md);background:var(--surface-card);
  box-shadow:0 0 0 1px var(--line)}
.cs-video .vd-lien{margin:0;font-family:var(--font-mono);font-size:10px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute)}
.cs-video .vd-lien a{color:var(--gold-400)}

/* Au papier, un iframe est un rectangle vide : on l'efface et on écrit
   l'adresse en toutes lettres — un PDF se lit aussi imprimé.          */
@media print{
  .cs-video iframe{display:none}
  .cs-video .vd-lien a:after{content:" — " attr(href);word-break:break-all}
}

/* ═══════════ ÉTIQUETTE DE RÉVISION (V17) ═══════════
   Le numéro de révision, posé à côté du titre du panneau d'édition.
   Discret : c'est un repère d'auteur, pas une information de cours.   */
.pt-rev{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;
  border:1px solid var(--gold-hair);background:var(--gold-soft);color:var(--gold-400);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:none;
  vertical-align:middle}

/* ═══════════ CTA & CLÔTURE ═══════════ */
.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--gold-500);background:var(--metal-gold);color:var(--on-gold);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:0 24px;height:50px;border-radius:var(--radius-sm);cursor:pointer;
  text-decoration:none;border-bottom-width:1px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.cta:hover{transform:translateY(-2px);box-shadow:var(--glow-gold);color:var(--on-gold)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}
.cta:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease)}
.cta:hover:after{left:130%}
.cta .arw{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s var(--ease)}
.cta:hover .arw{transform:rotate(-45deg) translate(2px,2px)}
@media(prefers-reduced-motion:reduce){.cta,.cta:after{transition:none}.cta:hover{transform:none}}

/* ═══════════ MENU DES MODULES (landing) ═══════════ */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0 0 8px}
.menu-card{position:relative;display:block;background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:22px;text-decoration:none;border-bottom-width:1px;
  transition:.22s var(--ease);overflow:hidden}
.menu-card:before{content:"";position:absolute;top:0;left:0;width:36px;height:2px;background:var(--metal-gold)}
.menu-card:hover{border-color:var(--gold-hair);background:var(--surface-card-hi);transform:translateY(-2px)}
.menu-card:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
.menu-card .mnum{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin:4px 0 10px;font-weight:700}
/* le titre s'arrête avant le QR épinglé dans le coin */
.menu-card h3{margin:0 0 12px;font-size:1.22rem;color:var(--ivory-50);padding-right:68px}
.menu-card ul{margin:0 0 14px}
.menu-card ul li{font-size:13.2px;margin-bottom:6px}
.menu-card .mgo{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-400);display:inline-flex;align-items:center;gap:8px}
.menu-card .mgo:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.menu-card .mqr{position:absolute;top:18px;right:18px;width:52px;height:52px;
  background:#fff;border-radius:4px;padding:3px;opacity:.85}
.menu-card .mqr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.qr-sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 8px}
.qr-sheet figure{margin:0;text-align:center;background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:16px}
.qr-sheet img{width:100%;max-width:150px;height:auto;background:#fff;border-radius:4px;padding:6px;
  image-rendering:pixelated}
.qr-sheet figcaption{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);margin-top:10px}

/* ═══════════ BASCULE JOUR / NUIT ═══════════
   Bouton injecté par course.js — aucun markup à toucher dans les pages.
   V9 — LA BASCULE ENTRE DANS LE BANDEAU, à la place qu'occupait le
   bouton du fil de la promo ; c'est 💬 qui hérite du coin bas-droite.
   Tout l'appareillage du meuble flottant disparaît avec ce déplacement
   (ancrage sur --gt-d, z-index 69, effacement quand le fil recouvre
   l'écran) : #top est déjà borné par left:var(--gt-g) et
   right:var(--gt-d), il ne passe jamais sous un panneau.
   Sur une page sans bandeau, elle retombe en meuble fixe.            */
#tema{display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid rgba(206,160,62,.42);color:var(--gold-300);
  border-radius:var(--radius-sm);transition:.18s var(--ease);flex:0 0 auto}
/* Dans la rangée, #top button (plus spécifique) donne déjà la peau, la
   hauteur et l'état actif : il ne reste que la largeur d'un bouton
   icône, comme celle du ☰ d'index.                                   */
#top #tema{width:36px;height:32px;padding:0}
#tema:hover{background:var(--gold-500);color:var(--on-gold);border-color:var(--gold-500)}
#tema:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
#tema svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
#tema .ico-jour{display:none}
:root[data-tema="sombre"] #tema .ico-jour{display:block}
:root[data-tema="sombre"] #tema .ico-nuit{display:none}

/* ═══════════ MESSAGE CLÉ ═══════════
   La voix principale de chaque diapo : dix mots maximum, en grand.     */
.cs-key{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,4.94cqw,2.9rem);line-height:1.16;letter-spacing:-.02em;
  color:var(--ivory-50);margin:0 0 20px;text-wrap:balance;max-width:24ch}
.cs-key em{font-style:normal;background:var(--metal-gold);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-400)}
.cs-sub{font-size:clamp(.98rem,1.87cqw,1.1rem);color:var(--text-2);max-width:52ch;margin:0 0 8px}

/* ═══════════ BULLES ═══════════
   Tout ce qui dépasse trois phrases vit ici : explication, anecdote,
   mémo. Survol au pointeur fin, clic partout ; au PDF la bulle sort en
   commentaire numéroté sous son paragraphe.                            */
.cs-pop{position:relative;display:inline}
/* Ceinture et bretelles : la bulle et son ancre imposent leur display,
   pour qu'aucune feuille d'hôte ne puisse les transformer en boîtes
   flex ou grille (voir .ya-legende, V21).                            */
.cs-pop .pop-c{display:block}
.cs-pop .pop-t{background:none;border:none;padding:0;margin:0;cursor:help;
  font:inherit;color:var(--gold-400);border-bottom:1.5px dotted var(--gold-500)}
.cs-pop .pop-t.chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-400);border:1px solid var(--gold-hair);border-bottom-style:solid;
  border-radius:999px;padding:4px 11px;background:var(--gold-soft)}
.cs-pop .pop-t:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;border-radius:3px}
.cs-pop .pop-c{position:absolute;left:50%;bottom:calc(100% + 12px);
  transform:translateX(calc(-50% + var(--pop-dx,0px))) translateY(4px);
  /* V8.1 : la bulle mesure la COLONNE (.wrap est le conteneur), plus la
     fenêtre gouttières déduites. Et --pop-dx, posé par course.js, la
     recadre quand son ancre est près d'un bord : une bulle ancrée sur le
     dernier mot d'une ligne sortait de l'écran et, sur téléphone,
     élargissait le document de 100 px — ce qui poussait les poignées
     des deux espaces hors de l'écran visible.                        */
  width:max-content;max-width:min(46ch,calc(100cqw - 48px),calc(100vw - var(--gt-g) - var(--gt-d) - 48px));z-index:45;
  background:var(--surface-card);border:1px solid var(--gold-hair);border-radius:var(--radius-md);
  padding:14px 17px;box-shadow:var(--shadow-card);
  font-size:13.6px;line-height:1.55;color:var(--text-2);text-align:left;font-style:normal;
  /* V21 — la bulle pose SA typographie au lieu d'hériter celle de son
     hôte. Une bulle ancrée dans la légende du yamazumi héritait du mono
     en capitales espacées de .ya-legende : dix caractères par ligne, en
     majuscules, coupés en bas. Une note se lit dans la police du texte,
     où qu'elle soit accrochée.                                        */
  font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:normal;
  opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease)}
/* la flèche reste sur l'ancre même quand la bulle a été recadrée */
.cs-pop .pop-c:after{content:"";position:absolute;top:100%;left:calc(50% - var(--pop-dx,0px));
  transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--gold-hair)}
.cs-pop.on .pop-c{opacity:1;visibility:visible;
  transform:translateX(calc(-50% + var(--pop-dx,0px))) translateY(0)}
@media(hover:hover){.cs-pop:hover .pop-c{opacity:1;visibility:visible;
  transform:translateX(calc(-50% + var(--pop-dx,0px))) translateY(0)}}
/* le temps d'une mesure de recadrage, la transition est coupée : sinon
   la bulle est mesurée au milieu de son animation (voir lsPopRecadrer) */
.ls-pop-mesure .cs-pop .pop-c{transition:none}
.cs-pop .pop-c b{color:var(--ivory-50)}
/* V5 — bulle longue (> ~450 caractères) : hauteur bornée + défilement
   interne, et le bouton « Ouvrir dans un onglet » injecté par le
   moteur (page minimaliste aux tokens clairs, imprimable à part). */
.cs-pop .pop-c--long{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.cs-pop .pop-open{display:block;margin-top:12px;background:transparent;
  border:1px solid var(--gold-hair);color:var(--gold-400);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:.18s var(--ease)}
.cs-pop .pop-open:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--on-gold)}
/* numérotation, exploitée au print */
.cs-slide{counter-reset:pop}
.cs-pop .pop-t{counter-increment:pop}

/* ═══════════ PICTOS ═══════════
   Langage visuel au trait (inspiration Napkin) : symboles SVG définis en
   planche <symbol> dans la page, consommés par <use>.                  */
.cs-picto{width:clamp(56px,9vw,96px);height:clamp(56px,9vw,96px);
  color:var(--gold-500);flex:0 0 auto}
.cs-picto.s{width:34px;height:34px}
.cs-picto-row{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,48px);justify-content:center;
  margin:26px 0 8px}
.cs-picto-row figure{margin:0;display:grid;justify-items:center;gap:12px;text-align:center}
.cs-picto-row figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);max-width:16ch}
.cs-hero-picto{display:grid;place-items:center;margin:10px 0 26px}
.cs-hero-picto .cs-picto{width:clamp(96px,16vw,150px);height:clamp(96px,16vw,150px)}

/* ═══════════ BOUCLE IA — prompts à copier, zéro clé API ═══════════ */
.cs-ai-loop{background:var(--gold-soft);border:1px solid var(--gold-hair);
  border-radius:var(--radius-md);padding:20px 22px;margin:22px 0 8px}
.cs-ai-loop .al-t{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-400);font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-ai-loop pre{background:var(--surface-doc);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 15px;margin:0 0 12px;overflow-x:auto;
  font-family:var(--font-mono);font-size:12.2px;line-height:1.6;color:var(--text-2);
  white-space:pre-wrap;word-break:break-word}
.cs-ai-loop .al-copy{background:transparent;border:1px solid var(--gold-hair);color:var(--gold-400);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;cursor:pointer;transition:.18s var(--ease)}
.cs-ai-loop .al-copy:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--on-gold)}
.cs-ai-loop .al-copy.ok{background:var(--gold-500);border-color:var(--gold-500);color:var(--on-gold)}
.cs-ai-loop .al-how{font-size:12.6px;color:var(--mute);margin:0}
.cs-ai-loop .al-how b{color:var(--text-2)}

/* ═══════════ CONSIGNE POUR L'IA — visible en édition seulement ═══════════ */
.cs-prompt{display:none;border:1.5px dashed var(--ember-500);border-radius:var(--radius-md);
  padding:16px 18px;margin:22px 0 0;background:transparent}
body.edit .cs-prompt{display:block}
.cs-prompt .cp-t{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--ember-400);font-weight:700;margin-bottom:8px}
.cs-prompt .cp-body{min-height:44px;font-size:14px;line-height:1.55;color:var(--text-2)}
.cs-prompt .cp-body:empty:before{content:attr(data-ph);color:var(--mute);font-style:italic}
.cs-prompt img{max-width:140px;max-height:100px;border-radius:var(--radius-sm);
  border:1px solid var(--line);display:block;margin:8px 0}
.cs-prompt a{word-break:break-all}
.cs-prompt .cp-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cs-prompt .cp-row button{background:transparent;border:1px dashed var(--line-strong);color:var(--mute);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius-sm);cursor:pointer}
.cs-prompt .cp-row button:hover{border-color:var(--ember-500);color:var(--ember-400);border-style:solid}
.cs-prompt-add{position:absolute;top:14px;left:var(--pad-x);display:none;background:transparent;
  border:1px dashed var(--ember-500);color:var(--ember-400);font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;
  border-radius:var(--radius-sm);cursor:pointer;z-index:5}
body.edit .cs-prompt-add{display:block}

/* ═══════════ DÉJÀ PRÉSENTÉ ═══════════
   Quand le chrono de séance court, chaque diapo traversée est estampillée.
   Le marquage se voit (opacité + sceau daté) tant que l'interrupteur du
   panneau le laisse affiché. V4 : le sceau est un bouton — chaque clic
   compte une révision (« Présenté 12/03 · relu ×2 »).                   */
body.show-seen .cs-slide.cs-seen{opacity:.62}
body.show-seen .cs-slide.cs-seen:hover{opacity:1}
.seen-stamp{display:none;position:absolute;top:14px;right:var(--pad-x);z-index:5;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-400);border:1px solid var(--gold-hair);border-radius:999px;
  padding:4px 10px;background:var(--surface-doc);transform:rotate(-2deg);
  cursor:pointer;transition:.18s var(--ease)}
.seen-stamp:hover{border-color:var(--gold-500);color:var(--gold-300);transform:rotate(0deg)}
.seen-stamp:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
body.show-seen .cs-slide.cs-seen .seen-stamp{display:block}

/* ═══════════ CHRONO DE SÉANCE ═══════════ */
#chrono{font-variant-numeric:tabular-nums}
#chrono.run{background:var(--gold-500);color:var(--on-gold);border-color:var(--gold-500)}
/* V9 — chez l'étudiant, le chrono n'est plus un bouton : c'est
   l'afficheur du temps de la séance, que l'animateur seul pilote. Il
   reste lisible (il doit l'être), mais il ne réagit à rien : ni clic,
   ni survol, ni curseur main. Le trait pointillé dit « information »,
   là où le trait plein dit « commande ».                             */
#top #chrono.ro{pointer-events:none;cursor:default;
  border-style:dashed;border-color:var(--gold-hair)}
#top #chrono.ro.run{border-style:solid}

/* ═══════════ CONTRÔLES D'ÉDITION ═══════════ */
.ctl{display:none;gap:8px;margin:12px 0 0;flex-wrap:wrap}
body.edit .ctl{display:flex}
.ctl button{background:transparent;border:1px dashed var(--line-strong);color:var(--mute);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--radius-sm);cursor:pointer;transition:.18s var(--ease)}
.ctl button:hover{border-color:var(--gold-500);color:var(--gold-300);border-style:solid}
body.edit [contenteditable]:hover{background:rgba(206,160,62,.07);border-radius:3px}
body.edit [contenteditable]:focus{outline:none;background:rgba(206,160,62,.11);
  box-shadow:0 0 0 1px var(--gold-hair);border-radius:3px}

/* ═══════════ PIED DE PAGE ═══════════ */
footer{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  padding:26px var(--pad-x);border-top:1px solid var(--gold-hair);background:var(--surface-page)}
.foot-l{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-500);font-weight:700;text-decoration:none;border-bottom:none}
.foot-l:hover{opacity:.78}
.foot-r{font-family:var(--font-mono);font-size:10px;color:var(--fog-500);letter-spacing:.04em}

/* ═══════════ GRILLE CINÉTIQUE ═══════════
   Le numéro de slide est exclu de la remontée : il est positionné en
   absolu dans le slide et la règle générique l'arracherait de son coin. */
[data-kinetic-grid]{position:relative}
[data-kinetic-grid] > canvas.ls-kinetic-grid{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none}
[data-kinetic-grid] > *:not(canvas.ls-kinetic-grid):not(.cs-slide-num){position:relative;z-index:1}
[data-kinetic-grid] > .cs-slide-num{z-index:1}

/* ═══════════ MOUVEMENT ═══════════
   Les états initiaux n'existent que sous html.motion, posé par course.js.
   Sans JS, sous mouvement réduit ou à l'impression, rien ne disparaît.  */
html.motion .cs-slide--cover .cover-mark{opacity:0;transform:translateY(16px)}
html.motion .cs-slide--cover .kicker,
html.motion .cs-slide--cover h1,
html.motion .cs-slide--cover .sub,
html.motion .cs-slide--cover .covermeta,
html.motion .cs-slide--cover .cover-qr{opacity:0;transform:translateY(14px)}
html.motion .cs-slide--cover.enter .cover-mark{opacity:1;transform:none;
  transition:opacity 760ms var(--ease),transform var(--duration-ritual) var(--ease)}
html.motion .cs-slide--cover.enter .kicker,
html.motion .cs-slide--cover.enter h1,
html.motion .cs-slide--cover.enter .sub,
html.motion .cs-slide--cover.enter .covermeta,
html.motion .cs-slide--cover.enter .cover-qr{opacity:1;transform:none;
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
html.motion .cs-slide--cover.enter .kicker{transition-delay:340ms}
html.motion .cs-slide--cover.enter h1{transition-delay:440ms}
html.motion .cs-slide--cover.enter .sub{transition-delay:560ms}
html.motion .cs-slide--cover.enter .covermeta{transition-delay:680ms}
html.motion .cs-slide--cover.enter .cover-qr{transition-delay:780ms}

html.motion .rv{opacity:0;transform:translateY(12px)}
html.motion .rv-group > *:not(canvas.ls-kinetic-grid){opacity:0;transform:translateY(12px)}
html.motion .rv.rv-in,
html.motion .rv-group.rv-in > *:not(canvas.ls-kinetic-grid){opacity:1;transform:none;
  transition:opacity 340ms var(--ease),transform 340ms var(--ease)}

@media(prefers-reduced-motion:reduce){
  html.motion .cs-slide--cover .cover-mark,
  html.motion .cs-slide--cover .kicker,
  html.motion .cs-slide--cover h1,
  html.motion .cs-slide--cover .sub,
  html.motion .cs-slide--cover .covermeta,
  html.motion .cs-slide--cover .cover-qr,
  html.motion .rv,
  html.motion .rv-group > *{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ═══════════ IMPRESSION / PDF — registre papier ═══════════ */
@media print{
  /* Le registre sombre vit sous :root[data-tema="sombre"] (0,2,0) et
     une media query n'ajoute aucune spécificité : redéclarer les jetons
     sur :root seul (0,1,0) laissait le registre sombre gagner, et une
     impression lancée de nuit sortait en blanc sur blanc avec des
     bandes noires. Les deux sélecteurs, donc.                        */
  :root,
  :root[data-tema="sombre"]{
    --surface-page:#ffffff; --surface-doc:#ffffff; --surface-card:#fbfaf7; --surface-card-hi:#fbfaf7;
    --text:#12161d; --text-2:#3a4049; --mute:#666d78;
    --line:#e0dcd2; --line-strong:#c9c4b8;
    --ivory-50:#12161d; --ivory-100:#242a33;
    --gold-300:#8b5f0d; --gold-400:#a3720f; --gold-500:#b07f15;
    --ember-300:#a34a28;
    --metal-gold:linear-gradient(105deg,#8b5f0d,#b07f15);
    --gold-soft:rgba(176,127,21,.08);
    --gold-hair:rgba(176,127,21,.38);
    --tint-warm:#fdfaf2;
  }
  @page{margin:13mm 12mm}
  body{padding-top:0;background:#fff !important;background-image:none !important;font-size:10.4pt;line-height:1.5}
  .wrap{max-width:100%;box-shadow:none;background:#fff;padding:0}
  #top,#chapnav,#idx,#panel,#prog,#qrov,.ctl,.ph-x,.cs-feedback,.cta,
  #tema,#chrono,.cs-prompt,.cs-prompt-add,.seen-stamp{display:none !important}
  .cs-slide{min-height:auto;padding:12mm 0 8mm;border:none;border-radius:0;box-shadow:none;
    margin:0;border-top:1px solid #e0dcd2;break-inside:avoid-page;display:block;opacity:1 !important}
  /* Les bulles deviennent des commentaires numérotés sous leur paragraphe :
     le déclencheur garde son numéro en exposant, la carte sort en bloc.   */
  .cs-pop .pop-t{color:#8b5f0d;border-bottom:none;cursor:default}
  .cs-pop .pop-t:after{content:" (" counter(pop) ")";font-size:.72em;vertical-align:super;color:#8b5f0d}
  .cs-pop .pop-c{position:static;display:block;opacity:1;visibility:visible;transform:none;
    width:auto;max-width:none;margin:8px 0 10px;padding:8px 12px;
    background:#fdfaf2 !important;border:1px solid rgba(176,127,21,.38);box-shadow:none}
  .cs-pop .pop-c:before{content:"Note " counter(pop) " — ";font-family:var(--font-mono);
    font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8b5f0d}
  .cs-pop .pop-c:after{display:none}
  /* V5 : la bulle longue sort entière sur papier, sans son bouton */
  .cs-pop .pop-c--long{max-height:none;overflow:visible}
  .cs-pop .pop-open{display:none !important}
  .cs-ai-loop{background:#fdfaf2 !important;break-inside:avoid}
  .cs-ai-loop .al-copy{display:none}
  .cs-slide--chapter{break-before:page;background:#fdfaf2 !important;padding:14mm 6mm}
  .cs-slide--memo{background:#fdfaf2 !important}
  .cs-slide--cover{background:#fff !important;background-image:none !important;padding:0 0 12mm;
    border-bottom:1.5px solid #b07f15;break-after:page}
  .cs-slide--cover:after{display:none}
  .cs-slide--cover h1 em,.execband > div.hi .bv{-webkit-text-fill-color:#8b5f0d;color:#8b5f0d;background:none}
  .cs-slide-num{position:static;display:block;text-align:right;margin-top:6mm}
  .covermeta{grid-template-columns:repeat(3,1fr);background:#e0dcd2;border-color:#e0dcd2}
  .covermeta > div{background:#fff}
  .cover-qr img,.menu-card .mqr,.qr-sheet img{background:#fff}
  .execband > div.hi,.callout,.qt,.notis,.cs-note,.cs-anim{background:#fdfaf2 !important}
  h2,h3,h4,.num{break-after:avoid}
  .stat,.day,.step,.qt,.exec .ec,.menu-card,.qr-sheet figure{break-inside:avoid}
  .exec,.quotes,.menu-grid{grid-template-columns:repeat(2,1fr)}
  table.rt{break-inside:auto} table.rt tr{break-inside:avoid}
  .execband,.stats,.covermeta,.days,.steps{break-inside:avoid}
  .faq details{break-inside:avoid}
  .faq details::details-content{content-visibility:visible !important;
    block-size:auto !important;opacity:1 !important}
  .faq details:not([open]) > *:not(summary){display:block !important}
  .faq summary:after{display:none}
  canvas.ls-kinetic-grid{display:none !important}
  /* Un emplacement resté vide n'apporte rien sur papier */
  .cs-placeholder:not(.has){display:none !important}
  /* Les notes/Q&R ne sortent que si la case du panneau les inclut */
  .cs-note,.cs-anim{display:none}
  body.print-notes .cs-note{display:block}
  body.print-notes.est-maitre .cs-anim{display:block}
  /* La calculette imprime son état courant, sans les commandes */
  .ls-funnel-people input{border:none;background:none;font-weight:700;padding:0}
  .ls-calc-reset{display:none}
  .cs-calc .fld input,.cs-calc .fld select{border:none;background:none;padding:0;height:auto;font-weight:700}
  /* Défilé : la liste entière, à plat, sans fenêtre ni animation */
  .cs-defile.is-live .df-ecran{height:auto !important;overflow:visible !important;
    -webkit-mask-image:none !important;mask-image:none !important;border:0 !important}
  .cs-defile.is-live .df-lignes{position:static !important;transform:none !important;
    animation:none !important}
  .cs-defile.is-live .df-lignes li{opacity:1 !important}
  .cs-defile .df-ctl{display:none !important}
  /* Bandes, escalier, volets : tout ouvert, tout allumé, rien de masqué */
  .cs-bandes.is-live .bd-piste{display:grid !important}
  .cs-bandes.is-live .bd-item{width:auto !important}
  .cs-escalier.is-live .esc-liste li{opacity:1 !important}
  .cs-escalier.is-live .esc-pilier{background:var(--gold-soft) !important}
  .esc-ctl{display:none !important}
  .cs-volet{break-inside:avoid}
  .cs-volet .vt-corps{display:grid !important}
  /* V19 — un <details> ferme masque son contenu via ::details-content ;
     un display pose sur l'enfant ne le rouvre pas. Meme traitement que
     les quiz (.faq) et le sommaire du menu, sinon l'astuce de Tiago et
     le corps des volets ne sortent jamais au PDF.                     */
  .cs-volet::details-content{content-visibility:visible !important;
    block-size:auto !important;opacity:1 !important}
  .cs-volet:not([open]) > *:not(summary){display:block !important}
  /* Éventail : les cartes en grille, toutes visibles */
  .cs-eventail.is-live .ev-scene{display:grid !important;height:auto !important;
    grid-template-columns:repeat(3,1fr);gap:10px}
  .cs-eventail.is-live .ev-carte{position:static !important;transform:none !important;
    margin:0 !important;width:auto !important}
  .cs-eventail .ev-detail{display:none}
  /* Minuteur : le cadran seul */
  .cs-minuteur .mn-ctl{display:none !important}
  /* Chasse au vide : l'état final, sans bouton */
  .cs-chasse .ch-ctl{display:none !important}
  .cs-chasse .ch-apres .ch-seg--nva{flex-basis:0 !important;font-size:0 !important}
  .cs-chasse .ch-apres .ch-seg--nvan{flex-basis:7.4% !important}
  /* Excellence : tout tracé */
  [data-cs-excel] .ex-jour{stroke-dasharray:none !important;stroke-dashoffset:0 !important;
    animation:none !important}
  [data-cs-excel] .ex-moy,[data-cs-excel] .ex-ecart{opacity:1 !important;animation:none !important}
  /* Yamazumi : l'état courant du graphique, sans les commandes. Le nom
     du poste est un champ de saisie depuis la V19 — on le GARDE (sinon
     les colonnes partiraient sans étiquette au PDF), on lui retire juste
     son cadre et son élargissement au focus. */
  .ya-strats,.ya-champ input,.ya-in,.ya-vol{display:none !important}
  .ya-plan{overflow:visible !important}
  .ya-nom{border:0 !important;background:transparent !important;box-shadow:none !important;
    width:100% !important;left:auto !important;transform:none !important;
    text-overflow:ellipsis !important}
  .ya-seg--gref,.ya-pile{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cs-yama .ya-table{display:block !important}
  /* Texte déchiffré : figé, lisible, sans commande */
  .cs-decrypt [data-dc-c]{color:inherit !important;animation:none !important}
  .cs-decrypt-ctl{display:none !important}
  .dc-sr{display:none !important}
  /* Carrousel : la liste complète, jamais l'ellipse */
  .cs-car .cs-car-detail,.cs-car .cs-car-controls{display:none !important}
  .cs-car .cs-car-track{position:static !important;display:grid !important;height:auto !important}
  .cs-car .cs-car-step{position:static !important;transform:none !important;opacity:1 !important;
    width:auto !important;cursor:default}
  .cs-car .cs-car-step p{display:block !important}
  html.motion .cs-slide--cover .cover-mark,
  html.motion .cs-slide--cover .kicker,
  html.motion .cs-slide--cover h1,
  html.motion .cs-slide--cover .sub,
  html.motion .cs-slide--cover .covermeta,
  html.motion .cs-slide--cover .cover-qr,
  html.motion .rv,
  html.motion .rv-group > *{opacity:1 !important;transform:none !important;
    transition:none !important;animation:none !important}
  a{color:#8b5f0d}
  footer{background:#fff;border-top:1px solid #b07f15}
}

/* ═══════════════════════════════════════════════════════════════
   V3 — PROJECTION, EN-TÊTE ESCAMOTABLE, FILIGRANES, ANDON,
   ÉDITEUR ENRICHI, TIROIR « MA VERSION », TÉLÉCOMMANDE
   Tous les éléments de cette section sont injectés par course.js
   (progressive enhancement : aucun markup à toucher dans les pages,
   et sans JavaScript la page reste exactement la V2).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ MODE PROJECTION ═══════════
   Touche F ou bouton ⛶ : plein écran, chrome effacé, il ne reste que
   les diapos et le fil de progression. Les flèches passent en
   navigation diapo à diapo (course.js).                              */
body.projection{padding-top:0}
/* V6 : le filigrane LS Compass reste en projection (discret, z-index:0,
   sous les diapos — .wrap est à z-index:1) */
body.projection #top,body.projection #chapnav,body.projection #tema,
body.projection #chrono,body.projection footer,body.projection #wm,
body.projection #wm-fixe,body.projection #panel,
body.projection .cs-partab,body.projection .cs-anim,
body.projection .cs-prompt-add,body.projection .seen-stamp{display:none !important}
body.projection .cs-slide{min-height:100vh;min-height:100svh;
  margin:0 0 clamp(20px,4vh,40px);scroll-margin-top:12px}
body.projection .wrap{padding-top:12px}
#b-proj{font-size:15px}

/* ═══════════ EN-TÊTE ESCAMOTABLE ═══════════
   Défilement descendant (> 80 px) : #top et #chapnav glissent hors
   écran ; première remontée : ils reviennent. Le bouton épingle 📌
   verrouille. Le padding-top du body ne bouge pas : la page ne saute
   jamais.                                                            */
#top,#chapnav{transition:transform .25s var(--ease),left .3s var(--ease),right .3s var(--ease)}
body.hdr-away #top{transform:translateY(-100%)}
body.hdr-away #chapnav{transform:translateY(calc(-100% - var(--bar)))}
#pin{flex:0 0 auto;width:32px;height:30px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  cursor:pointer;font-size:13px;line-height:1;transition:.18s var(--ease);filter:grayscale(1);opacity:.6}
#pin:hover{border-color:var(--gold-500);opacity:1}
#pin:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
#pin.act{border-color:var(--gold-hair);background:var(--gold-soft);filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){#top,#chapnav{transition:none}}

/* ═══════════ « TOUT REPLIER » (V4) ═══════════
   Bouton du bandeau : referme d'un geste quiz (<details>), bulles et
   tiroir « Ma version ». Injecté par course.js.                      */
#b-replier{flex:0 0 auto;height:30px;padding:0 11px;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;transition:.18s var(--ease)}
#b-replier:hover{border-color:var(--gold-500);color:var(--gold-300)}
#b-replier:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* ═══════════ FOND STANDARD « LS COMPASS » (V6) ═══════════
   (a) Feuille de la skill officielle LS Compass, ADAPTÉE à notre
   registre : la démo est nuit-par-défaut avec data-theme="clair" ;
   chez nous c'est l'inverse — clair par défaut sur :root, nuit sous
   [data-tema="sombre"]. Les filtres « jour » s'appliquent donc par
   défaut et se retirent en sombre.
   Deux calques PNG (cadran + aiguille) en position:absolute;inset:0 :
   c'est ce qui met l'axe de rotation au centre — ne jamais recadrer.
   L'aiguille tourne au rythme du défilement (ls-compass.js,
   data-scroll-factor en degrés/pixel) ; le filigrane tourne à
   contresens (-0.04), ce qui donne la profondeur.
   (b) Le filigrane fixe « leanskipper.com » bas-gauche.
   (c) Le registre papier porte ses propres filigranes texte plus bas
   (@media print) : les boussoles décoratives n'y sortent pas.       */
.wrap{position:relative;z-index:1}
.ls-compass{
  --ls-compass-size:80px;
  position:relative;display:inline-block;
  width:var(--ls-compass-size);height:var(--ls-compass-size);
  flex:0 0 var(--ls-compass-size);line-height:0;isolation:isolate;
  /* jour (notre défaut) : l'or est légèrement assombri et resaturé
     pour tenir par le contraste et non par la force */
  filter:brightness(.85) saturate(1.15);
}
:root[data-tema="sombre"] .ls-compass{filter:none}
.ls-compass__base,.ls-compass__pointer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* transform-origin au centre : l'image de l'aiguille est un carré avec
   du vide autour, et ce vide est l'axe. Ne jamais la recadrer. */
.ls-compass__pointer{transform:rotate(0deg);transform-origin:50% 50%;will-change:transform}
/* Tailles d'usage. Le clamp() évite une boussole de timbre-poste sur
   mobile et une roue de charrette sur grand écran. */
.ls-compass--barre    {--ls-compass-size:clamp(38px,4vw,46px)}
.ls-compass--titre    {--ls-compass-size:clamp(64px,12vw,104px)}
/* filigrane : 108vmin — leçon V5 : il doit dépasser la colonne de
   cartes (940px) pour se voir dans les marges et entre les diapos */
.ls-compass--filigrane{--ls-compass-size:108vmin}
/* Filigrane : fixe, centré, SOUS les cartes (.wrap est à z-index:1).
   En clair il faut plus d'opacité ET assombrir, sinon l'or se dissout
   dans l'ivoire ; en sombre, presque rien suffit (valeurs livrées de
   la skill : .14 jour / .055 nuit). */
.ls-compass--filigrane{position:fixed;left:50%;top:50%;z-index:0;
  transform:translate(-50%,-50%);pointer-events:none;
  opacity:.14;filter:brightness(.62) saturate(1.25)}
:root[data-tema="sombre"] .ls-compass--filigrane{opacity:.055;filter:none}
/* mouvement réduit : l'aiguille se fige au nord, le cadran reste */
@media(prefers-reduced-motion:reduce){
  .ls-compass__pointer{transform:rotate(0deg) !important;will-change:auto}
}
#wm{position:fixed;left:14px;bottom:12px;z-index:56;pointer-events:none;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  color:var(--mute);opacity:.45}
#wm-print,#wm-print-mark{display:none}

/* ═══════════ ANDON ═══════════
   Touche A ou LS_andon() : un voilier au trait traverse l'écran, le
   filigrane clignote doucement ; le premier clic sur le bateau mesure
   le temps de réaction. Sous mouvement réduit : bannière fixe
   cliquable, aucun mouvement.                                        */
/* V4 — trajectoire variable : hauteur de départ, amplitude de tangage,
   durées et sens (gauche→droite ou droite→gauche) sont des variables
   CSS posées par course.js à chaque déclenchement.                   */
.andon-boat{position:fixed;top:var(--andon-top,30vh);left:-20vw;z-index:70;
  width:clamp(90px,14vw,150px);color:var(--gold-500);cursor:pointer;
  background:none;border:none;padding:0;
  animation:andon-cross var(--andon-dur,8s) linear forwards}
/* V11 — le voilier qui dérive : sa position vient du script, pas d'une
   animation. On neutralise donc la traversée, et on lui laisse la place
   de rebondir depuis le coin haut-gauche. */
.andon-boat.andon-libre{top:0;left:0;animation:none;will-change:transform}
.andon-boat.rev{left:auto;right:-20vw;transform:scaleX(-1);
  animation-name:andon-cross-rev}
.andon-boat svg{display:block;width:100%;height:auto;
  animation:andon-tangage var(--andon-tang,2.6s) ease-in-out infinite}
.andon-boat:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px}
@keyframes andon-cross{from{left:-20vw}to{left:120vw}}
@keyframes andon-cross-rev{from{right:-20vw}to{right:120vw}}
@keyframes andon-tangage{
  0%,100%{transform:rotate(calc(-1 * var(--andon-amp,3deg))) translateY(0)}
  50%{transform:rotate(var(--andon-amp,3.5deg)) translateY(6px)}
}
body.andon-run #wm{animation:wm-blink 1.4s ease-in-out infinite;opacity:1}
@keyframes wm-blink{0%,100%{opacity:.2}50%{opacity:.95}}
.andon-banner{position:fixed;top:0;left:0;right:0;z-index:71;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px var(--pad-x);background:var(--gold-500);color:var(--on-gold);
  border:none;cursor:pointer;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
@media(prefers-reduced-motion:reduce){
  .andon-boat{display:none}
  body.andon-run #wm{animation:none}
}
.ls-toast{position:fixed;left:50%;bottom:clamp(70px,10vh,110px);transform:translateX(-50%);
  z-index:80;background:var(--gold-500);color:var(--on-gold);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;box-shadow:var(--glow-gold);white-space:nowrap;
  animation:toast-in .25s var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media(prefers-reduced-motion:reduce){.ls-toast{animation:none}}

/* ═══════════ ÉDITEUR ENRICHI ═══════════
   Barre par diapo (déplacer, dupliquer, insérer, espaceur, taille,
   supprimer), flèches de réordonnancement sur les blocs, espaceurs.
   Tout n'existe qu'en body.edit et disparaît de l'export.            */
.cs-slidectl{display:none;position:absolute;top:10px;right:var(--pad-x);z-index:7;gap:5px}
body.edit .cs-slidectl{display:flex}
/* en édition, la barre remplace le sceau « présenté » dans le coin */
body.edit .seen-stamp{display:none}
.cs-slidectl button{width:27px;height:24px;padding:0;display:grid;place-items:center;
  background:var(--bar-bg);border:1px dashed var(--line-strong);color:var(--mute);
  font-family:var(--font-mono);font-size:11px;line-height:1;border-radius:var(--radius-sm);
  cursor:pointer;transition:.15s var(--ease)}
.cs-slidectl button:hover{border-color:var(--gold-500);color:var(--gold-300);border-style:solid}
.cs-slidectl button[data-sc="del"]:hover{border-color:var(--ember-500);color:var(--ember-400)}
.cs-insmenu{position:absolute;top:40px;right:var(--pad-x);z-index:8;display:grid;
  background:var(--panel-bg);border:1px solid var(--gold-hair);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);overflow:hidden}
.cs-insmenu button{background:transparent;border:none;border-bottom:1px solid var(--line);
  color:var(--text-2);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 16px;cursor:pointer;text-align:left}
.cs-insmenu button:last-child{border-bottom:none}
.cs-insmenu button:hover{background:var(--gold-soft);color:var(--gold-300)}
/* V5 — palette de pictos (bouton ◈ de la barre de diapo) : aperçu SVG
   cliquable des symboles de la planche, remplace le picto du héros. */
.cs-pictomenu{position:absolute;top:40px;right:var(--pad-x);z-index:8;display:grid;
  grid-template-columns:repeat(5,44px);gap:4px;padding:8px;background:var(--panel-bg);
  border:1px solid var(--gold-hair);border-radius:var(--radius-sm);box-shadow:var(--shadow-card)}
.cs-pictomenu button{width:44px;height:44px;padding:0;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--gold-500);cursor:pointer;transition:.15s var(--ease)}
.cs-pictomenu button:hover{border-color:var(--gold-hair);background:var(--gold-soft)}
.cs-pictomenu button .cs-picto.s{width:28px;height:28px}
.cs-hasctl{position:relative}
.cs-blockctl{display:none;position:absolute;top:0;left:-17px;z-index:6;flex-direction:column;gap:2px}
body.edit .cs-blockctl{display:flex}
.cs-blockctl button{width:16px;height:15px;padding:0;display:grid;place-items:center;
  background:var(--bar-bg);border:1px dashed var(--line-strong);color:var(--mute);
  font-size:9px;line-height:1;border-radius:3px;cursor:pointer}
.cs-blockctl button:hover{border-color:var(--gold-500);color:var(--gold-300);border-style:solid}
.cs-space{height:48px}
body.edit .cs-space{display:grid;place-items:center;cursor:pointer;
  border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  margin:0 clamp(0px,1.5vw,14px) clamp(36px,7vh,72px)}
body.edit .cs-space:hover{border-color:var(--ember-500)}
body.edit .cs-space:after{content:"␣ espaceur — clic pour retirer";
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
/* Taille par diapo : Compacte / Standard (défaut) / Grande */
.cs-slide.cs-slide--compact{min-height:auto}
.cs-slide.cs-slide--tall{min-height:200vh;min-height:200svh}
/* Suggestions contextuelles sous la consigne IA */
.cp-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cp-sugg button{background:transparent;border:1px dashed var(--gold-hair);color:var(--gold-400);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;
  padding:5px 10px;border-radius:999px;cursor:pointer;text-align:left;transition:.15s var(--ease)}
.cp-sugg button:hover{border-style:solid;border-color:var(--gold-500);color:var(--gold-300)}

/* ═══════════ ESPACE PRIVÉ — TIROIR « MA VERSION » (V9, à gauche) ═══
   V9 : la languette et le tiroir passent au bord GAUCHE des diapos.
   La droite est désormais l'espace collectif (le fil de la promo), la
   gauche l'espace individuel : le bord dit à quoi on a affaire.
   Le contenu ne change pas — le markdown contextualisé de la diapo,
   prêt à coller, la zone de collage persistée (promo:par:diapo), le
   point or quand la diapo porte une contribution.                    */
.cs-partab{position:absolute;left:-1px;top:50%;transform:translateY(-50%) rotate(180deg);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  writing-mode:vertical-rl;padding:12px 5px;cursor:pointer;
  background:var(--surface-card);border:1px solid var(--line);border-left:none;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);transition:.18s var(--ease)}
.cs-partab:hover{color:var(--gold-300);border-color:var(--gold-hair);background:var(--surface-card-hi)}
.cs-partab:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.cs-partab.has:after{content:"";width:6px;height:6px;border-radius:999px;background:var(--gold-500)}
/* En édition la marge gauche revient aux flèches ↑/↓ de bloc
   (.cs-blockctl, left:-17px, même z-index) : le maître ne consomme pas
   le prompt, la languette s'efface plutôt que de capter le clic.     */
body.edit .cs-partab{display:none}
/* Écran étroit : la carte n'a plus de marge latérale, la languette
   rentrerait hors champ. */
@media(max-width:700px){.cs-partab{left:0}}
#partiroir{position:fixed;top:0;left:0;bottom:0;width:var(--par-w);z-index:68;
  display:flex;flex-direction:column;gap:14px;
  padding:22px clamp(18px,4vw,30px) 18px calc(clamp(18px,4vw,30px) + env(safe-area-inset-left,0px));
  background:var(--surface-doc);border-right:1px solid var(--gold-hair);
  box-shadow:24px 0 48px -30px rgba(0,0,0,.45);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-102%);transition:transform .3s var(--ease)}
#partiroir.on{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){#partiroir{transition:none}}
#partiroir .par-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#partiroir .par-t{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);font-weight:700}
/* La mention d'espace : elle dit d'un coup d'œil de quel côté on est */
#partiroir .par-esp{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--line-strong);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
#partiroir .par-prive{font-size:11.5px;line-height:1.55;color:var(--mute);margin:-4px 0 0}
#partiroir .par-close{width:32px;height:30px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-sm);cursor:pointer;font-size:12px}
#partiroir .par-close:hover{border-color:var(--gold-500);color:var(--gold-300)}
#partiroir .par-titre{margin:0;font-size:1.2rem}
#partiroir .cs-ai-loop{margin:0}
/* V5 — le prompt défile dans sa zone : le tiroir tient dans l'écran */
#partiroir .par-pre{max-height:min(38vh,340px);overflow-y:auto;overscroll-behavior:contain}
#partiroir .par-zone{flex:1;min-height:180px;border:1px dashed var(--gold-hair);
  border-radius:var(--radius-md);padding:14px 16px;font-size:14px;line-height:1.6;color:var(--text-2)}
#partiroir .par-zone:empty:before{content:attr(data-ph);color:var(--mute);font-style:italic}
#partiroir .par-zone:focus{outline:none;border-style:solid;border-color:var(--gold-500)}
/* V5 : « Enregistrer mon livrable » + « Fermer » côte à côte, la note
   de confidentialité passe dessous (flex-wrap).                      */
#partiroir .par-foot{display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap}
#partiroir .par-foot button{background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 13px;border-radius:var(--radius-sm);cursor:pointer;transition:.18s var(--ease)}
#partiroir .par-foot button:hover{border-color:var(--gold-500);color:var(--gold-300)}
#partiroir .par-livrable{border-color:var(--gold-hair);color:var(--gold-400)}
#partiroir .par-note{font-size:11.5px;color:var(--mute);margin:0;flex-basis:100%}

/* ═══════════ SKILL & CO-MARQUE ═══════════
   Lien de téléchargement du skill.md (même peau que le bouton copier)
   et emplacement logo institution sur la couverture (filet vertical
   + petit placeholder, façon lockup NX).                              */
.cs-ai-loop .al-dl{display:inline-block;background:transparent;border:1px solid var(--gold-hair);
  color:var(--gold-400);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;text-decoration:none;
  border-bottom-style:solid;transition:.18s var(--ease)}
.cs-ai-loop .al-dl:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--on-gold)}
.mark-sep{width:1px;height:52px;background:var(--line-strong);flex:0 0 auto}
.cs-placeholder--logo{min-height:72px;width:clamp(96px,14.9cqw,140px);padding:10px;gap:2px;flex:0 0 auto}
.cs-placeholder--logo .ph-t{font-size:9px;letter-spacing:.1em}
.cs-placeholder--logo .ph-d{display:none}

/* ═══════════ V6 — « MON CERTIFICAT » (certificat de parcours) ════════
   Overlay au pattern #qrov (ex-badge V5) : champs nom + animateur,
   cases à cocher, « Générer » → canvas 1600×1131 (ratio A4 paysage)
   aux tokens clairs, avec le menu synthèse du parcours (LS_PARCOURS)
   et le n° de signature électronique (PNG à partager / impression).
   Le lien .bg-link vit sur la diapo de clôture (trame + M1) ; le
   bouton du panneau est injecté par course.js.                       */
.bg-link{display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:1px solid var(--gold-hair);color:var(--gold-400);font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;
  border-radius:999px;cursor:pointer;transition:.18s var(--ease)}
.bg-link:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--on-gold)}
.bg-link:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
#badgeov{position:fixed;inset:0;z-index:77;background:var(--veil);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:grid;place-items:center;padding:clamp(14px,3vw,28px);overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease)}
#badgeov.on{opacity:1;pointer-events:auto}
#badgeov .bg-card{width:min(920px,96vw);max-height:calc(100vh - 32px);overflow-y:auto;
  background:var(--surface-doc);border:1px solid var(--gold-hair);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:clamp(18px,3vw,26px);display:grid;gap:14px}
#badgeov .bg-t{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);font-weight:700}
#badgeov .bg-form{display:grid;gap:10px}
#badgeov .bg-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
#badgeov .bg-fld{display:grid;gap:6px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-500)}
#badgeov input[type=text]{height:40px;padding:0 12px;background:var(--surface-page);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:14px;transition:border-color .18s var(--ease)}
#badgeov input[type=text]:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--gold-soft)}
#badgeov .bg-checks{display:flex;flex-wrap:wrap;gap:8px 18px}
#badgeov .chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-2)}
#badgeov .chk input{accent-color:var(--gold-500);width:15px;height:15px;margin:0;cursor:pointer}
#badgeov button{background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 15px;border-radius:var(--radius-sm);cursor:pointer;
  transition:.18s var(--ease);justify-self:start}
#badgeov button:hover{border-color:var(--gold-500);color:var(--gold-300)}
#badgeov #bg-gen{border-color:var(--gold-hair);color:var(--gold-400)}
#badgeov canvas{display:none;width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff}
#badgeov canvas.has{display:block}
#badgeov .bg-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#badgeov .bg-actions .cl{margin-left:auto}
#badgeov .bg-status{font-family:var(--font-mono);font-size:10px;color:var(--gold-400);
  letter-spacing:.05em}

/* ═══════════ V3 — REGISTRE PAPIER ═══════════
   Le chrome V3 disparaît ; chaque page imprimée porte le pied
   « Lean Skipper · leanskipper.com » (8 pt) et le médaillon (10 mm,
   estompé) — position:fixed se répète sur chaque page au print.      */
@media print{
  /* V6 : boussoles LS Compass décoratives masquées — le papier porte
     ses propres filigranes texte (#wm-print, #wm-print-mark) */
  #wm,.ls-compass,#partiroir,.cs-partab,.cs-slidectl,.cs-blockctl,.cs-insmenu,.cs-pictomenu,
  .cp-sugg,.andon-boat,.andon-banner,.ls-toast,.cs-space,#b-proj,#pin,
  #badgeov,.bg-link{display:none !important}
  /* V19 — .wrap est en z-index:1 avec un fond blanc au papier : il
     recouvrait les filigranes partout sauf sous la fin du document, donc
     une seule page sur soixante-sept les portait. Rang 2, et la diapo
     garde une bande en bas pour ne pas ecrire par-dessus.             */
  #wm-print,#wm-print-mark{z-index:2}
  .cs-slide{padding-bottom:14mm}
  #wm-print{display:block;position:fixed;bottom:0;left:0;
    font-family:var(--font-mono);font-size:8pt;letter-spacing:.1em;color:#8b5f0d;
    /* fond blanc : sur deux pages sur soixante-dix, la derniere ligne de
       texte tombait dans la bande. Le filigrane masque au lieu de se
       laisser surimprimer — il reste lisible, le texte aussi.         */
    background:#fff;padding:1.5mm 3mm 0 0}
  #wm-print-mark{display:block;position:fixed;bottom:0;right:0;width:10mm;height:10mm;opacity:.25;
    background:url("../img/mark-gold-400.png") center/contain no-repeat}
  .mark-sep:has(+ .cs-placeholder--logo:not(.has)){display:none}
  .cs-ai-loop .al-dl{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   V6 — DIAPOS ANNEXES REPLIABLES & MENU : SUJETS DES MODULES
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ DIAPOS ANNEXES ═══════════
   Une diapo hors contenu (mode opératoire « Ma version », skill du
   module, « Après la séance »…) porte data-annexe : repliée par défaut
   (classe annexe-plie posée par course.js à chaque visite — état non
   persisté), seule la barre de titre reste. Clic = déplier/replier
   (animation de hauteur mesurée par le script ; aucune sous mouvement
   réduit). Au PDF tout est déplié (JS beforeprint) et la barre
   n'imprime pas. La barre est injectée (data-ls-inject) : l'export
   .html reste propre, seul l'attribut data-annexe voyage.            */
.annexe-bar{display:flex;align-items:center;gap:12px;width:100%;
  background:transparent;border:none;border-left:2px solid var(--gold-hair);
  padding:10px 14px;margin:0;cursor:pointer;text-align:left;
  color:var(--text-2);transition:.18s var(--ease)}
.annexe-bar:hover{border-left-color:var(--gold-500);color:var(--gold-300)}
.annexe-bar:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;border-radius:3px}
.annexe-bar .ab-chev{flex:0 0 auto;width:8px;height:8px;
  border-right:1.5px solid var(--gold-500);border-bottom:1.5px solid var(--gold-500);
  transform:rotate(-45deg);transition:transform .22s var(--ease)}
.annexe-bar[aria-expanded="true"] .ab-chev{transform:rotate(45deg)}
.annexe-bar .ab-titre{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,2vw,1.2rem);color:inherit;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.annexe-bar .ab-tag{flex:0 0 auto;margin-left:auto;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px}
/* diapo repliée : plus de hauteur d'écran, la barre seule reste posée
   en haut ; les autres enfants sortent du flux (display:none) — mais
   pas pendant l'animation (.annexe-anim), où l'overflow les clippe   */
.cs-slide.annexe-plie{min-height:0;justify-content:flex-start;
  padding-top:12px;padding-bottom:12px}
.cs-slide.annexe-plie:not(.annexe-anim) > *:not(.annexe-bar){display:none}
.cs-slide.annexe-anim{overflow:hidden;
  transition:height .42s var(--ease),padding .42s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .cs-slide.annexe-anim{transition:none}
  .annexe-bar .ab-chev{transition:none}
}
/* en édition : tout est déplié (course.js), la barre s'efface, le
   bouton ⊟ de la barre de diapo marque/démarque data-annexe          */
body.edit .annexe-bar{display:none}
.cs-slidectl button.on{border-style:solid;border-color:var(--gold-500);color:var(--gold-300)}

/* ═══════════ MENU — LES SUJETS DE CHAQUE MODULE ═══════════
   Chaque carte de module révèle la liste de ses diapos (générée
   statiquement depuis module-N/index.html) dans un <details> : clic
   sur le libellé = accordéon. La carte entière reste cliquable via le
   lien étiré .mlink (z-index:1) ; le <details> passe au-dessus
   (z-index:2) pour que le clic déplie sans naviguer. Au survol de la
   carte, le libellé s'allume — l'aperçu reste sobre.                 */
.menu-card .mlink{position:absolute;inset:0;z-index:1;border-bottom:none}
.menu-card .mlink:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
.menu-sujets{position:relative;z-index:2;margin:0 0 14px;border-top:1px solid var(--line)}
.menu-sujets summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:9px 0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);transition:color .18s var(--ease)}
.menu-sujets summary::-webkit-details-marker{display:none}
.menu-sujets summary:after{content:"";flex:0 0 auto;margin-left:auto;width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .22s var(--ease)}
.menu-sujets[open] summary:after{transform:rotate(-135deg)}
.menu-sujets summary:hover,.menu-card:hover .menu-sujets summary{color:var(--gold-300)}
.menu-sujets summary:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.menu-sujets ul{margin:2px 0 10px}
.menu-sujets ul li{font-size:12.6px;line-height:1.45;margin-bottom:5px;color:var(--text-2)}
.menu-sujets ul li:before{background:var(--gold-hair)}
/* intercalaires de chapitres : petits intertitres dans le fil */
.menu-sujets ul li.ms-chap{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-500);padding-left:0;margin:10px 0 6px}
.menu-sujets ul li.ms-chap:before{display:none}
@media(prefers-reduced-motion:reduce){.menu-sujets summary:after{transition:none}}

/* ═══════════ V6 — REGISTRE PAPIER ═══════════ */
@media print{
  /* diapos annexes : dépliées par le JS (beforeprint) ; la barre de
     repli, elle, n'imprime jamais */
  .annexe-bar{display:none !important}
  /* menu : les sujets sortent dépliés sur papier */
  .menu-sujets{border-top-color:#e0dcd2}
  .menu-sujets summary:after{display:none}
  .menu-sujets::details-content{content-visibility:visible !important;
    block-size:auto !important;opacity:1 !important}
  .menu-sujets:not([open]) > *:not(summary){display:block !important}
}

/* ═══════════════════════════════════════════════════════════════
   V8 — LA PORTE, LE FIL DE SÉANCE, LE CONSENTEMENT AU TÉLÉCHARGEMENT
   Trois briques injectées par course.js (data-ls-inject) — aucune page
   sans window.LS_PORTE ne change (la porte) ; le fil de séance et le
   consentement s'appuient uniquement sur les classes/éléments posés
   par le script, jamais sur le balisage des pages.                    */

/* ═══════════ LA PORTE ═══════════
   Voile plein écran Gold — ivoire/or, médaillon, titre du cours. Reste
   dans le DOM tant que le mot de passe n'est pas reconnu ; retiré au
   succès. body.porte-close masque tout le reste (.wrap et le chrome
   sont, par construction, des enfants directs de body) — un garde-fou
   simple qui n'a rien à savoir du contenu de la page.                 */
body.porte-close > *:not(#porte):not(script):not(svg){display:none !important}
body.porte-etu #b-edit{display:none !important}
#porte{position:fixed;inset:0;z-index:90;background:var(--texture-carbone);
  display:grid;place-items:center;padding:clamp(20px,5vw,40px);
  animation:porte-in .5s var(--ease)}
#porte .porte-card{width:min(420px,100%);text-align:center;
  background:var(--surface-doc);border:1px solid var(--gold-hair);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:clamp(30px,6vw,46px) clamp(24px,5vw,34px)}
#porte .porte-mark{width:60px;height:auto;margin:0 auto 14px;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
#porte .porte-brand{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-500);font-weight:700;margin-bottom:14px}
#porte .porte-titre{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,3.2vw,1.6rem);line-height:1.22;margin:0 0 10px;color:var(--text)}
#porte .porte-sub{color:var(--mute);font-size:13.5px;margin:0 0 22px;line-height:1.55}
/* V9 — deux champs empilés : le nom d'abord (il sert partout ensuite),
   le mot de passe et le bouton sur une même ligne.                   */
#porte .porte-form{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
#porte .porte-ligne{display:flex;gap:8px}
#porte .porte-champ{flex:1;min-width:0;height:44px;padding:0 14px;background:var(--surface-page);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:15px;transition:border-color .18s var(--ease)}
#porte .porte-champ:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px var(--gold-soft)}
#porte .porte-champ.shake{animation:porte-shake .38s}
#porte .porte-form button{flex:0 0 auto;background:var(--gold-500);color:var(--on-gold);
  border:1px solid var(--gold-500);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:0 20px;border-radius:var(--radius-sm);
  cursor:pointer;transition:.18s var(--ease)}
#porte .porte-form button:hover{background:var(--gold-600);border-color:var(--gold-600)}
#porte .porte-err{min-height:16px;color:var(--ember-500);font-size:12px;margin:0 0 10px}
/* Ce que devient le nom : dit là où on le demande, pas ailleurs. */
#porte .porte-note{font-size:11.5px;line-height:1.55;color:var(--mute);margin:0 0 18px}
#porte .porte-anim{display:block;margin:0 auto;background:none;border:none;
  color:var(--mute);font-size:11.5px;text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:4px}
#porte .porte-anim:hover{color:var(--gold-400)}
#porte .porte-foot{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,26px);
  text-align:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--mute);padding:0 20px}
@keyframes porte-in{from{opacity:0}to{opacity:1}}
@keyframes porte-shake{
  10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){
  #porte{animation:none}
  #porte .porte-champ.shake{animation:none}
}
@media(max-width:480px){#porte .porte-ligne{flex-direction:column}}

/* ═══════════ CONSENTEMENT — V9 ═══════════
   Le dialogue bloquant de la V8 (#consentov) n'existe plus : le
   consentement est acquis par défaut et se retire depuis la ligne du
   pied du fil de la promo (.lc-consent, plus bas). Il n'y a donc plus
   rien à habiller ici.                                               */

/* ═══════════ ESPACE COLLECTIF — LE FIL DE LA PROMO (V9) ═══════════
   Colonne de droite, en face de l'espace privé de gauche. Allure de
   chat : bulles horodatées, auteur affiché, réactions rapides toujours
   sous la main, composeur en bas. Le modérateur y écrit sans bulle,
   sur un fond discret : on doit voir d'un coup d'œil que ce n'est pas
   la parole d'un étudiant.
   Vérité du site statique : ce fil vit sur l'appareil. La ligne
   .lc-honnete le dit en pied de colonne, et rien dans cette feuille ne
   simule la présence d'un autre étudiant.                            */
#lschat{position:fixed;top:0;right:0;width:var(--chat-w);height:100dvh;z-index:67;
  display:flex;flex-direction:column;
  background:var(--surface-doc);border-left:1px solid var(--gold-hair);
  box-shadow:-24px 0 48px -30px rgba(0,0,0,.45);
  padding-right:env(safe-area-inset-right,0px);
  transform:translateX(102%);transition:transform .3s var(--ease)}
#lschat.on{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){#lschat{transition:none}}

/* — en-tête : nom de l'espace, chrono de séance, épingle, fermeture — */
#lschat .lc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px 16px 10px;border-bottom:1px solid var(--line)}
#lschat .lc-t{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);font-weight:700;flex:1 1 auto;white-space:nowrap}
#lschat .lc-esp{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--line-strong);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
#lschat .lc-head2{flex-basis:100%;display:flex;align-items:center;gap:8px}
/* V9 — mention discrète : le fil rattache ses entrées à la diapo que
   l'animateur présente. Elle n'apparaît que quand cette diapo est
   réellement connue (relais frais de moins de deux minutes) ; le reste
   du temps, elle n'existe pas — rien ne promet ce qui n'a pas lieu. */
#lschat .lc-suit{display:none;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-400);white-space:nowrap}
#lschat .lc-suit.on{display:inline}
#lschat .lc-suit.on:before{content:"⌖ ";}
#lschat .lc-chrono{font-family:var(--font-mono);font-size:10px;color:var(--mute);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
#lschat .lc-chrono.run{color:var(--gold-400)}
#lschat .lc-pin,#lschat .lc-close{flex:0 0 auto;width:27px;height:27px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-sm);cursor:pointer;font-size:12px;transition:.18s var(--ease)}
#lschat .lc-pin:hover,#lschat .lc-close:hover{border-color:var(--gold-500);color:var(--gold-300)}
#lschat .lc-pin.act{border-color:var(--gold-hair);background:var(--gold-soft);color:var(--gold-300)}

/* — le fil — */
#lschat .lc-zone{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
#lschat .lc-feed{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 14px;display:flex;flex-direction:column;gap:10px}
#lschat .lc-vide{margin:auto 0;text-align:center;color:var(--mute);font-size:12px;line-height:1.6}
/* séparateur de séance : une date, un filet de part et d'autre */
#lschat .lc-sep{display:flex;align-items:center;gap:8px;margin:6px 0 2px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
#lschat .lc-sep:before,#lschat .lc-sep:after{content:"";flex:1;height:1px;background:var(--line)}
#lschat .lc-item{display:flex;flex-direction:column;max-width:100%}
#lschat .lc-item.neuf{animation:lc-pop .32s var(--ease)}
@keyframes lc-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#lschat .lc-item.neuf{animation:none}}
#lschat .lc-bulle{max-width:88%;padding:8px 11px;border-radius:var(--radius-md);
  background:var(--surface-card);border:1px solid var(--line)}
/* mes messages : à droite, teinte or discrète */
#lschat .lc-item--moi{align-items:flex-end}
#lschat .lc-item--moi .lc-bulle{background:var(--gold-soft);border-color:var(--gold-hair)}
/* le modérateur : pas de bulle, un fond discret et un liseré — sa
   parole n'est celle de personne dans la salle, elle est automatique */
#lschat .lc-item--mod{align-items:stretch}
#lschat .lc-item--mod .lc-bulle{max-width:100%;background:var(--surface-card-hi);
  border:none;border-left:2px solid var(--gold-hair);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding-left:10px}
#lschat .lc-auteur{display:flex;align-items:baseline;gap:6px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-500);margin-bottom:3px}
#lschat .lc-item--moi .lc-auteur{justify-content:flex-end}
#lschat .lc-item--mod .lc-auteur{color:var(--mute)}
#lschat .lc-h{color:var(--mute);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* pre-line : le résumé du modérateur sort en quelques lignes courtes */
#lschat .lc-txt{margin:0;font-size:13px;line-height:1.5;color:var(--text);
  overflow-wrap:break-word;white-space:pre-line}
#lschat .lc-emo{font-size:15px;margin-right:5px}
#lschat .lc-meta{font-family:var(--font-mono);font-size:9px;letter-spacing:.03em;
  color:var(--mute);margin-top:3px}
/* le fil a défilé : on ne l'arrache pas, on propose de redescendre */
#lschat .lc-neuf{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;
  background:var(--gold-500);color:var(--on-gold);border:none;border-radius:999px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;cursor:pointer;box-shadow:var(--glow-gold);display:none}
#lschat .lc-neuf.on{display:block}

/* — composeur : réactions rapides + champ + envoi — */
#lschat .lc-compose{border-top:1px solid var(--line);padding:9px 14px 10px;position:relative}
#lschat .lc-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
#lschat .lc-reacts button{width:31px;height:31px;display:grid;place-items:center;font-size:15px;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  cursor:pointer;transition:.18s var(--ease)}
#lschat .lc-reacts button:hover{border-color:var(--gold-500);background:var(--gold-soft)}
#lschat .lc-saisie{display:flex;gap:6px;align-items:center}
#lschat .lc-saisie input{flex:1;min-width:0;height:36px;padding:0 11px;background:var(--surface-card);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13.5px}
#lschat .lc-saisie input:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px var(--gold-soft)}
#lschat .lc-emopick,#lschat .lc-send{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-sm);cursor:pointer;font-size:15px;transition:.18s var(--ease)}
#lschat .lc-emopick:hover,#lschat .lc-send:hover{border-color:var(--gold-500);color:var(--gold-300)}
#lschat .lc-send{border-color:var(--gold-hair);color:var(--gold-400)}
#lschat .lc-emopop{position:absolute;left:14px;bottom:52px;display:none;gap:4px;flex-wrap:wrap;
  width:calc(100% - 28px);padding:7px;background:var(--surface-card);
  border:1px solid var(--gold-hair);border-radius:var(--radius-sm);box-shadow:0 12px 28px -20px rgba(0,0,0,.5)}
#lschat .lc-emopop.on{display:flex}
#lschat .lc-emopop button{width:30px;height:30px;display:grid;place-items:center;font-size:15px;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer}
#lschat .lc-emopop button:hover{border-color:var(--gold-500);background:var(--gold-soft)}

/* — pied : actions, consentement, et la ligne honnête sur le partage — */
#lschat .lc-foot{padding:9px 14px 12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px}
#lschat .lc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#lschat .lc-actions button{background:none;border:none;color:var(--mute);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px}
#lschat .lc-actions button:hover{color:var(--gold-300)}
#lschat .lc-vider:hover,#lschat .lc-sortir:hover{color:var(--ember-500) !important}
#lschat .lc-modo.act{color:var(--gold-400)}
#lschat .lc-consent{font-size:10.5px;color:var(--mute);line-height:1.55}
#lschat .lc-consent button{background:none;border:none;color:var(--gold-400);cursor:pointer;
  font-family:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px;padding:0}
#lschat .lc-honnete{font-size:10.5px;color:var(--mute);line-height:1.5;margin:0;
  border-top:1px dashed var(--line);padding-top:7px}
#b-par{font-size:14px}

/* ═══════════ LE BOUTON DU FIL — MEUBLE FLOTTANT (V9) ═══════════
   Échange demandé : 💬 quitte la rangée du bandeau et prend le coin
   bas-droite, celui de la bascule jour/nuit, qui va dans la rangée. Il
   reprend mot pour mot les précautions écrites en V8.1 pour ce coin :
   ancrage sur la gouttière du fil (--gt-d) pour que la colonne ouverte
   ne l'enterre pas, z-index 69 (au-dessus du voile 66 et des deux
   panneaux 67/68), et effacement franc quand le fil recouvre l'écran —
   un bouton posé sur le texte d'un autre espace n'a pas de sens, et la
   colonne a son propre ✕. Une seule poignée à toutes les largeurs :
   #lschat-tab faisait double emploi avec ce meuble.                  */
#b-chat{position:fixed;bottom:clamp(14px,3vw,22px);
  right:calc(clamp(12px,3vw,20px) + var(--gt-d));z-index:69;
  width:44px;height:44px;padding:0;border-radius:999px;display:grid;place-items:center;
  cursor:pointer;font-size:19px;line-height:1;
  background:var(--surface-card);border:1px solid var(--gold-hair);color:var(--gold-400);
  box-shadow:var(--shadow-card);transition:.2s var(--ease),right .3s var(--ease)}
#b-chat:hover{border-color:var(--gold-500);transform:translateY(-1px)}
#b-chat:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
#b-chat.act{border-color:var(--gold-500);box-shadow:var(--glow-gold)}
@media(max-width:1179.98px){body.chat-open #b-chat{display:none}}

/* Mobile : poignée flottante à gauche plutôt qu'un bouton de bandeau,
   miroir du meuble 💬 de droite. z-index 69, au-dessus du voile (66) et
   des deux panneaux (67/68) : à 390 px le tiroir fait 92vw et la
   poignée d'en face doit rester cliquable — passer d'un espace à
   l'autre est un geste, pas deux.                                    */
#lspar-tab{position:fixed;bottom:16px;z-index:69;
  width:46px;height:46px;border-radius:999px;display:none;place-items:center;
  background:var(--gold-500);color:var(--on-gold);border:none;font-size:19px;
  box-shadow:var(--glow-gold);cursor:pointer;
  left:calc(16px + env(safe-area-inset-left,0px))}
@media(max-width:760px){#lspar-tab{display:grid}}
body.par-open #lspar-tab{display:none}
/* Le filigrane suit la gouttière (il porte le clignotement andon : le
   masquer sous un panneau casserait un signal pédagogique, pas un
   décor) et laisse la place à la poignée de gauche en mobile.        */
#wm{left:calc(14px + var(--gt-g));transition:left .3s var(--ease)}
@media(max-width:760px){#wm{left:74px}}
@media(prefers-reduced-motion:reduce){#wm{transition:none}}
.ls-toast{left:calc(50% + (var(--gt-g) - var(--gt-d)) / 2)}

/* Régime superposition (sous le seuil de gouttière) : un voile ferme au
   clic. Sans lui, la bande laissée libre par un panneau renvoie les
   clics dans la diapo — et le fil semble impossible à refermer.
   V8.1 : le voile commence SOUS le bandeau. Il le couvrait, et le
   bouton 💬 visible à côté du tiroir ouvert refermait le tiroir au lieu
   d'ouvrir le fil : l'exclusion mutuelle des deux espaces n'était
   atteignable par aucun geste.                                        */
.lc-voile{position:fixed;inset:var(--bar) 0 0 0;z-index:66;background:rgba(4,7,12,.42);
  border:none;padding:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
body.par-open .lc-voile,body.chat-open .lc-voile{opacity:1;pointer-events:auto}
@media(min-width:1180px){.lc-voile{display:none}}
@media(prefers-reduced-motion:reduce){.lc-voile{transition:none}}

/* ═══════════ V9 — LES COMPOSANTS LARGES MESURENT LA COLONNE ═══════
   Les bascules de mise en page étaient toutes écrites en largeur de
   FENÊTRE : deux panneaux ouverts pouvaient réduire la lecture à 460 px
   sans qu'une seule requête ne se déclenche, et body{overflow-x:hidden}
   rognait le débordement en silence. Ces requêtes de conteneur doublent
   les media queries d'origine sur la largeur réelle de .wrap.        */
@container (max-width:720px){
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt tr{border-bottom:1px solid var(--line);padding:6px 0}
  table.rt td{border:none;padding:5px 14px;display:flex;justify-content:space-between;gap:14px}
  table.rt td:before{content:attr(data-l);font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--gold-500);flex:0 0 34%}
  table.rt td.n{text-align:right}
  /* V8.1 — une cellule qui contient du balisage inline (un em, un lien,
     une bulle) éclate en autant d'éléments flex : chaque fragment devient
     sa propre colonne, la ligne ne se coupe plus et la table sort de
     l'écran (module 5, « VA · NVA · VA · NVA », 27 px de trop à 390 px).
     Ces cellules-là passent en étiquette au-dessus, valeur en dessous. */
  table.rt td:has(*){display:block}
  table.rt td:has(*):before{display:block;margin-bottom:3px}
  .cs-car.is-live .cs-car-arc{display:none}
}
@container (max-width:640px){
  .day{grid-template-columns:1fr}
  .day .dlabel{border-right:none;border-bottom:1px solid var(--line);padding:13px 16px}
  .day .dlabel span{display:inline;margin-left:10px}
}
/* La grille de couverture était pilotée par @media(min-width:840px) :
   une fenêtre large et une colonne étroite lui laissaient six colonnes
   de 49 px. Elle mesure la colonne désormais.                        */
@container (max-width:860px){.covermeta{grid-template-columns:repeat(3,1fr)}}
@container (max-width:560px){
  .covermeta{grid-template-columns:repeat(2,1fr)}
  .cover-mark{flex-wrap:wrap;gap:12px}
  .cs-placeholder--logo{width:clamp(84px,26cqw,140px)}
  .cs-placeholder .ph-d{max-width:100%}
}
@container (max-width:859px){
  .ls-funnel{min-height:44rem}
  .ls-funnel-cols{grid-template-rows:repeat(5,minmax(0,1fr));grid-template-columns:1fr;gap:6px;min-height:44rem}
  .ls-funnel-col{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name people' 'desc util';
    align-items:center;align-content:center;column-gap:16px;row-gap:4px;padding:12px 20px}
  .ls-funnel-name{grid-area:name;font-size:.9375rem}
  .ls-funnel-desc{grid-area:desc;font-size:.8125rem}
}

/* Mouvement réduit : les gouttières s'ouvrent d'un coup, sans glisser.
   Placé ici, après toutes les règles qui déclarent ces transitions.   */
@media(prefers-reduced-motion:reduce){
  .wrap,#prog,#panel,#top,#chapnav,#wm,#tema,#b-chat{transition:none}
}

/* ═══════════ V9 — PROJECTION & IMPRESSION ═══════════
   La V8 effaçait les deux espaces en projection. Demande de Tiago :
   « Ma version » doit rester sous la main en plein écran, comme le fil.
   Les deux le sont donc, par leur meuble flottant — 💬 en bas à droite
   (il n'a jamais été enfant de #top depuis la V9), et la poignée ✎ à
   gauche, qu'on sort ici de son régime mobile. Le bouton ✎ du bandeau,
   lui, disparaît avec #top : c'est la poignée qui prend le relais.
   Le papier, en revanche, ne garde rien de tout cela.                */
body.projection:not(.par-open) #lspar-tab{display:grid}
@media print{
  #porte,#lschat,#b-chat,#lspar-tab,#b-par,#partiroir,.lc-voile{display:none !important}
  /* transition coupée : le papier ne doit pas être capturé au milieu
     d'un glissement de gouttière */
  .wrap{margin-left:0;margin-right:0;transition:none}
}

/* ═══════════ V9.1 — MOT DE PASSE PRÈS DU QR (animateur) ═══════════ */
.qr-mdp{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:8px; text-align:left;
}
.qm-t{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.qr-mdp .qm-l,.qr-mdp .qm-auth,.qr-mdp .qm-chg{ display:flex; gap:8px; align-items:center; }
.qr-mdp input{
  flex:1 1 auto; min-width:0; padding:8px 10px; font:inherit; font-size:14px;
  color:var(--ink-1); background:var(--surface-card); border:1px solid var(--rule);
  border-radius:6px;
}
.qr-mdp .qm-vue{ font-family:var(--font-mono); letter-spacing:.08em; }
.qr-mdp button{
  flex:0 0 auto; padding:8px 12px; font:inherit; font-size:13px; cursor:pointer;
  color:var(--ink-1); background:var(--surface-card-hi);
  border:1px solid var(--rule); border-radius:6px;
}
.qr-mdp button:hover{ border-color:var(--metal-gold); }
.qm-msg{ font-size:12.5px; line-height:1.5; color:var(--ink-3); }
.qm-msg.ko{ color:var(--ember-500); }
.qm-pre{
  margin:2px 0 0; padding:10px; overflow-x:auto; border-radius:6px;
  font-family:var(--font-mono); font-size:11px; line-height:1.6;
  color:var(--ink-2); background:var(--surface-card); border:1px solid var(--rule);
}

/* ═══════════ V9.1 — QUITTER LA SÉANCE (index) ═══════════ */
#idx .idx-sortir{
  margin-top:14px; padding:10px 14px; width:100%; font:inherit; font-size:13px;
  cursor:pointer; text-align:left; color:var(--ink-2);
  background:transparent; border:1px solid var(--rule); border-radius:8px;
}
#idx .idx-sortir:hover{ color:var(--ink-1); border-color:var(--metal-gold); }

@media print{ .qr-mdp,#idx .idx-sortir{ display:none !important; } }

/* ═══════════ V10 — RÉACTIONS : NEUF SOUS LA MAIN, LE RESTE AU SURVOL ═══════════ */
.lc-reacts{ position:relative; flex-wrap:wrap; }
.lc-reacts .lc-plus{ font-weight:600; opacity:.72; }
.lc-reacts .lc-plus:hover{ opacity:1; }
.lc-rideau{
  position:absolute; bottom:calc(100% + 8px); left:0; right:0;
  display:none; grid-template-columns:repeat(6,1fr); gap:4px;
  padding:8px; border-radius:10px; z-index:4;
  background:var(--surface-card-hi); border:1px solid var(--rule);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.lc-reacts.plus-on .lc-rideau{ display:grid; }
.lc-rideau button{ font-size:17px; line-height:1; padding:6px 0; }

/* Une entrée venue d'un autre participant : ni sa bulle, ni celle du
   modérateur — alignée à gauche, sur la surface neutre. */
.lc-item--autre{ justify-content:flex-start; }
.lc-item--autre .lc-bulle{
  background:var(--surface-card); border:1px solid var(--rule);
}
.lc-item--autre .lc-auteur{ color:var(--metal-gold); }

@media (prefers-reduced-motion: reduce){ .lc-rideau{ box-shadow:none; } }
@media print{ .lc-rideau{ display:none !important; } }

/* ═══════════ V11 — TABLEAU DE BORD DE LA PROMO (animateur) ═══════════ */
#lsdash{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.dash-barre{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-etat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }
.dash-maj{ padding:7px 12px; font:inherit; font-size:13px; cursor:pointer;
  color:var(--ink-1); background:var(--surface-card-hi);
  border:1px solid var(--rule); border-radius:6px; }
.dash-maj:hover{ border-color:var(--metal-gold); }
.dash-liste{ display:flex; flex-direction:column; }
.dash-l{ display:grid; grid-template-columns:10px 1fr auto auto auto 28px;
  gap:10px; align-items:center; padding:9px 2px;
  border-bottom:1px solid var(--rule); font-size:14px; }
.dash-l:last-child{ border-bottom:none; }
.dl-pt{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); }
.dash-l--ok   .dl-pt{ background:#4a8f5b; }
.dash-l--loin .dl-pt{ background:var(--metal-gold); }
.dash-l--parti .dl-pt{ background:var(--ink-3); opacity:.5; }
.dash-l--parti{ opacity:.6; }
.dl-nom{ font-weight:600; color:var(--ink-1); }
.dl-role,.dl-ou,.dl-vu{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.dl-role:not(:empty){ color:var(--metal-gold); }
.dl-x{ padding:2px 6px; font:inherit; font-size:12px; cursor:pointer; color:var(--ink-3);
  background:none; border:1px solid transparent; border-radius:4px; }
.dl-x:hover{ color:var(--ember-500); border-color:var(--rule); }
.dash-note{ margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-3); }

/* Un module masqué pour la promo — l'animateur le voit estompé. */
.mod-masque{ opacity:.45; }
.mod-publier{ display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); cursor:pointer; }
.mod-publier input{ accent-color:var(--metal-gold); }

@media (max-width:640px){
  .dash-l{ grid-template-columns:10px 1fr auto 28px; }
  .dl-role,.dl-ou{ display:none; }
}
@media print{ #lsdash,.mod-publier{ display:none !important; } }

/* ═══════════ V11 — MENU : MODULES, BIBLIOGRAPHIE, MODE D'EMPLOI PLIÉ ═══════════ */
.mod-skill{ font-size:14px; color:var(--ink-2); }
.mod-go a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--metal-gold); text-decoration:none; }
.mod-go a:hover{ text-decoration:underline; }

.nav-modules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px; margin:16px 0; }
.nav-modules a{ display:flex; align-items:center; gap:12px; padding:12px 14px;
  color:var(--ink-1); text-decoration:none; background:var(--surface-card);
  border:1px solid var(--rule); border-radius:8px; font-size:14.5px; }
.nav-modules a:hover{ border-color:var(--metal-gold); }
.nav-modules a span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--metal-gold); }

.biblio li{ margin-bottom:14px; line-height:1.6; }
.biblio li em{ color:var(--ink-1); font-style:normal; font-weight:600; }
.biblio li a{ margin-left:6px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--metal-gold); }
.biblio-suite{ font-size:14px; color:var(--ink-2); }

.mo-accordeon{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.mo-volet{ border:1px solid var(--rule); border-radius:9px; background:var(--surface-card);
  overflow:hidden; }
.mo-volet > summary{ cursor:pointer; list-style:none; padding:13px 16px;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:16px; font-weight:600; color:var(--ink-1); }
.mo-volet > summary::-webkit-details-marker{ display:none }
.mo-volet > summary::after{ content:'+'; margin-left:auto; font-family:var(--font-mono);
  color:var(--metal-gold); }
.mo-volet[open] > summary::after{ content:'–' }
.mo-volet > summary:hover{ background:var(--surface-card-hi) }
.mo-num{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.mo-corps{ padding:0 16px 16px; border-top:1px solid var(--rule); }
.mo-corps > :first-child{ margin-top:14px }

.dash-suite{ margin-top:14px; font-size:12.5px; color:var(--ink-3); }

@media print{ .mo-volet{ break-inside:avoid } .mo-corps{ display:block !important } }

/* ═══════════ V12 — RÉPONDRE ET AIMER DANS LE FIL ═══════════
   Deux gestes de messagerie posés sur des bulles qui existaient déjà :
   le rappel du message d'origine au-dessus d'une réponse, et une rangée
   de réactions sous chaque bulle. Tout est dans #lschat, injecté par le
   moteur : le papier n'en garde rien (la colonne y est déjà coupée) et
   l'export .html non plus. Les couleurs passent par les tokens, donc
   les deux registres suivent sans une seule règle de plus.          */

/* — le rappel du message d'origine, dans la bulle de la réponse — */
#lschat .lc-cite{
  display:flex; align-items:baseline; gap:6px; width:100%;
  margin:0 0 6px; padding:5px 8px; text-align:left; overflow:hidden;
  font:inherit; color:var(--text-2); cursor:default;
  background:var(--surface-card-hi); border:1px solid var(--line);
  border-left:2px solid var(--gold-500); border-radius:var(--radius-sm);
}
#lschat button.lc-cite{ cursor:pointer; transition:.18s var(--ease); }
#lschat button.lc-cite:hover{ border-color:var(--gold-hair); border-left-color:var(--gold-400); }
#lschat button.lc-cite:focus-visible{ outline:2px solid var(--gold-500); outline-offset:1px; }
#lschat .lc-cite-qui{
  flex:0 0 auto; max-width:44%; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold-500);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#lschat .lc-cite-txt{
  flex:1 1 auto; min-width:0; font-size:11.5px; line-height:1.4; color:var(--mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* On vient d'arriver sur le message d'origine : il s'annonce, puis se
   tait. Sans ce signal, dans un fil dense, on ne sait pas lequel. */
#lschat .lc-item.vise .lc-bulle{ animation:lc-vise 1.7s var(--ease); }
@keyframes lc-vise{
  0%,55%{ box-shadow:0 0 0 2px var(--gold-500); }
  100%{ box-shadow:0 0 0 2px transparent; }
}
@media(prefers-reduced-motion:reduce){
  #lschat .lc-item.vise .lc-bulle{ animation:none; box-shadow:0 0 0 2px var(--gold-hair); }
}

/* — la barre sous une bulle : répondre, et les réactions — */
#lschat .lc-outils{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:6px; }
#lschat .lc-item--moi .lc-outils{ justify-content:flex-end; }
#lschat .lc-outils button{
  display:inline-flex; align-items:center; gap:4px;
  min-height:24px; padding:2px 7px; font:inherit; font-size:12px; line-height:1;
  color:var(--text-2); background:transparent;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  transition:.18s var(--ease);
}
#lschat .lc-outils button:hover:not(:disabled){
  color:var(--text); background:var(--gold-soft); border-color:var(--gold-hair);
}
#lschat .lc-outils button:focus-visible{ outline:2px solid var(--gold-500); outline-offset:1px; }
#lschat .lc-rep{ opacity:.6; }
#lschat .lc-outils:hover .lc-rep,#lschat .lc-rep:focus-visible{ opacity:1; }
#lschat .lc-jaime.plein{ background:var(--surface-card-hi); border-color:var(--line-strong); }
#lschat .lc-jaime.mien{ color:var(--text); background:var(--gold-soft); border-color:var(--gold-500); }
#lschat .lc-jaime:disabled{ cursor:default; opacity:.5; }
#lschat .lc-jn{ font-family:var(--font-mono); font-size:10px; font-variant-numeric:tabular-nums; }
/* ❤️ et 😂 restent au survol tant que personne ne les a posés, et
   passent en clair dès qu'un compteur existe : une bulle neuve n'a pas
   besoin de trois boutons pour dire qu'on peut l'aimer. */
#lschat .lc-outils .lc-jaime--sec{ display:none; }
#lschat .lc-outils .lc-jaime--sec.plein,
#lschat .lc-outils:hover .lc-jaime--sec,
#lschat .lc-outils:focus-within .lc-jaime--sec{ display:inline-flex; }
/* Sur un téléphone il n'y a pas de survol, et toucher la barre veut
   dire toucher un de ses boutons : les deux réactions secondaires
   étaient inatteignables au doigt. Le fil est pourtant fait pour le
   téléphone de l'étudiant qui entre par le QR. */
@media (hover:none){
  #lschat .lc-outils .lc-jaime--sec{ display:inline-flex; }
}

/* — le rappel au-dessus du champ : à qui l'on répond, et le moyen de
     s'en défaire (la croix, ou la touche Échap) — */
#lschat .lc-repondre{
  display:flex; align-items:center; gap:7px; margin-bottom:7px; padding:6px 8px;
  background:var(--surface-card-hi); border:1px solid var(--line);
  border-left:2px solid var(--gold-500); border-radius:var(--radius-sm);
}
#lschat .lc-repondre[hidden]{ display:none; }
#lschat .lc-rep-fleche{ flex:0 0 auto; font-size:13px; color:var(--gold-500); }
#lschat .lc-rep-corps{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
#lschat .lc-rep-qui{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-500);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#lschat .lc-rep-txt{
  font-size:11.5px; color:var(--mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#lschat .lc-rep-x{
  flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center;
  font:inherit; font-size:12px; cursor:pointer; color:var(--mute);
  background:transparent; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); transition:.18s var(--ease);
}
#lschat .lc-rep-x:hover{ color:var(--text); border-color:var(--gold-500); }

/* Colonne étroite (téléphone) : la barre reste sur une ligne parce que
   les libellés sont des émojis, mais le rappel doit céder en premier. */
@media (max-width:430px){
  #lschat .lc-cite-qui{ max-width:38%; }
  #lschat .lc-outils button{ padding:2px 6px; }
}

/* ═══════════ V13 — LES CARTONS ═══════════
   Deux couleurs qui existent déjà dans la palette : l'or pour le jaune,
   la braise pour le rouge. Rien de neuf à inventer, et les deux
   registres suivent sans une règle de plus. La sobriété est une
   décision : le fil est celui de la promo, pas un tableau
   d'affichage — la personne visée voit son carton nettement, les
   autres lisent une ligne de plus.                                   */

/* Le carton lui-même : un rectangle, la forme que tout le monde
   reconnaît sur un terrain. Il sert dans le fil, dans le panneau et
   dans le tableau de bord, d'où l'absence de préfixe.                */
.lc-carte{
  display:inline-block; flex:0 0 auto; width:11px; height:15px;
  margin-right:6px; vertical-align:-2px; border-radius:2px;
  background:var(--gold-500); box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.lc-carte--rouge{ background:var(--ember-500); }
/* Un carton levé n'a plus de couleur : c'est le contour qui reste. */
.lc-carte--retrait{
  background:transparent; border:1px dashed var(--line-strong); box-shadow:none;
}

/* — la bulle du carton, dans le fil — */
#lschat .lc-item--carton{ align-items:stretch; }
#lschat .lc-item--carton .lc-bulle{
  max-width:100%; padding-left:10px;
  background:var(--surface-card-hi); border:1px solid var(--line);
  border-left:3px solid var(--gold-500);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
#lschat .lc-carton--rouge .lc-bulle{ border-left-color:var(--ember-500); }
#lschat .lc-carton--retrait .lc-bulle{ border-left-color:var(--line-strong); }
#lschat .lc-item--carton .lc-auteur{ color:var(--mute); }
#lschat .lc-item--carton .lc-txt{ display:flex; align-items:flex-start; }
/* La personne visée : une teinte, pas un cri. */
#lschat .lc-carton-moi .lc-bulle{ background:var(--gold-soft); border-color:var(--gold-hair); }
#lschat .lc-carton--rouge.lc-carton-moi .lc-bulle{ background:rgba(190,87,55,.10); }
#lschat .lc-item--carton .lc-outils{ justify-content:flex-start; }
#lschat .lc-lever{ font-size:11.5px; }
/* La commande de l'animateur sous une bulle : discrète comme la
   flèche « répondre », franche au survol de la barre. */
#lschat .lc-kb{ opacity:.55; color:var(--gold-400); }
#lschat .lc-outils:hover .lc-kb,#lschat .lc-kb:focus-visible{ opacity:1; }

/* — ce que voit la personne visée, en tête de sa colonne — */
#lschat .lc-mescartons{
  display:flex; flex-direction:column; gap:6px;
  padding:9px 14px; background:var(--surface-card-hi);
  border-bottom:1px solid var(--line);
  /* Une séance chargée ne doit pas repousser le fil hors de l'écran :
     au-delà, la bannière défile chez elle.                          */
  max-height:32vh; overflow:auto;
}
#lschat .lc-mescartons[hidden]{ display:none; }
#lschat .lc-mescartons-t{
  margin:0; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute);
}
#lschat .lc-mescarton{
  display:flex; align-items:flex-start; font-size:12px; line-height:1.45; color:var(--text);
}

/* — le panneau qui demande la couleur et le motif — */
.lc-modale{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:18px; background:rgba(4,7,12,.5);
}
.lc-modale-boite{
  width:min(420px,100%); max-height:90vh; overflow:auto;
  display:flex; flex-direction:column; gap:12px; padding:18px;
  color:var(--text); background:var(--surface-card);
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7);
}
.lc-modale-t{
  margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-500);
}
.lc-modale-choix{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lc-choix{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 8px; font:inherit; font-size:13.5px; cursor:pointer;
  color:var(--text-2); background:transparent;
  border:2px solid var(--line); border-radius:var(--radius-sm);
  transition:.18s var(--ease);
}
.lc-choix:hover{ color:var(--text); border-color:var(--line-strong); }
/* La couleur choisie doit se voir d'un coup d'oeil : on pose un carton
   devant la promo, pas dans un formulaire. Le contour porte la couleur,
   le texte s'épaissit — deux signaux plutôt qu'une teinte de fond que
   le vidéoprojecteur avale.                                          */
.lc-choix[aria-pressed="true"]{
  font-weight:600; color:var(--text);
  border-color:var(--gold-500); background:var(--gold-soft);
}
.lc-choix--rouge[aria-pressed="true"]{
  border-color:var(--ember-500); background:rgba(190,87,55,.12);
}
.lc-modale-l{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--mute); }
.lc-modale-l input{
  height:36px; padding:0 11px; font-family:var(--font-body); font-size:13.5px;
  color:var(--text); background:var(--surface-card-hi);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
}
.lc-modale-l input:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px var(--gold-soft);
}
.lc-modale-sug{ display:flex; flex-wrap:wrap; gap:6px; }
.lc-modale-sug button{
  padding:4px 9px; font:inherit; font-size:11.5px; cursor:pointer;
  color:var(--text-2); background:transparent;
  border:1px dashed var(--line-strong); border-radius:999px;
}
.lc-modale-sug button:hover{ color:var(--text); border-color:var(--gold-500); border-style:solid; }
.lc-modale-note{ margin:0; font-size:11.5px; line-height:1.5; color:var(--mute); }
.lc-modale-actions{ display:flex; justify-content:flex-end; gap:8px; }
.lc-modale-actions button{
  padding:9px 14px; font:inherit; font-size:13px; cursor:pointer;
  color:var(--text); background:transparent;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
}
.lc-modale-non:hover{ color:var(--ember-300); border-color:var(--ember-500); }
.lc-modale-ok{
  color:var(--on-gold); background:var(--gold-500); border-color:var(--gold-500);
}
.lc-modale-ok:hover{ background:var(--gold-400); border-color:var(--gold-400); }

/* — le tableau de bord : l'état, puis les deux gestes — */
.dash-l{ grid-template-columns:10px 1fr auto auto auto auto 28px; }
.dl-k{ display:inline-flex; align-items:center; gap:6px; }
.dl-k .lc-carte{ margin-right:0; }
.dl-carton{
  padding:3px 9px; font:inherit; font-size:11.5px; cursor:pointer;
  color:var(--ink-2); background:var(--surface-card-hi);
  border:1px solid var(--rule); border-radius:999px;
}
.dl-carton:hover{ color:var(--ink-1); border-color:var(--gold-500); }
.dl-lever:hover{ color:var(--ember-500); border-color:var(--ember-500); }

@media (max-width:640px){
  /* La rangée porte sept enfants : on replie ce qui peut l'être plutôt
     que de retirer des colonnes, sinon les deux dernières cellules
     partent sur une rangée implicite, sans alignement. */
  .dash-l{ grid-template-columns:10px 1fr auto auto 28px; }
  .dash-l .dl-role,.dash-l .dl-ou{ display:none; }
}
@media (max-width:430px){
  .lc-modale-choix{ grid-template-columns:1fr; }
}
@media print{ .lc-modale{ display:none !important; } }

/* ═══════════ LES SIX BLOCS DE MODULE (page d'accueil de promo) ═══════════
   Un bloc par séance, empilés : le QR à gauche, grand, qui sert aussi de
   bouton d'accès ; à droite le titre, les thèmes, ce qu'on saura faire en
   sortant, et le détail des diapos replié. Neuf diapos de sommaire ont
   fondu là-dedans — c'est la même matière, sans le défilement.        */
.menu-grid{ grid-template-columns:1fr; gap:12px }
.menu-card{ display:grid; grid-template-columns:132px 1fr; gap:20px;
  align-items:start; padding:20px 22px; transform:none }
.menu-card:hover{ transform:none }
.menu-card h3{ padding-right:0; margin:0 0 8px; font-size:1.16rem; line-height:1.3 }
.menu-card h3 a{ color:inherit; border-bottom:none }
.menu-card h3 a:hover{ color:var(--gold-300) }
.menu-card ul{ margin:0 0 12px }

/* Le QR : cible de clic à part entière, pas une vignette décorative. */
.mc-qr{ display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px; border:1px solid var(--line); border-radius:10px;
  background:#fff; border-bottom:1px solid var(--line);
  text-decoration:none; transition:border-color .18s var(--ease), box-shadow .18s var(--ease) }
.mc-qr img{ width:100%; height:auto; display:block; image-rendering:pixelated }
.mc-qr .mc-scan{ display:block; text-align:center; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300) }
.mc-qr .mc-scan small{ display:block; margin-top:2px; font-size:8.5px; letter-spacing:.08em;
  text-transform:none; color:var(--mute) }
.mc-qr:hover{ border-color:var(--gold-500); box-shadow:0 0 0 3px var(--gold-soft) }
.mc-qr:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px }

.mc-themes{ margin:0 0 12px; font-size:13.4px; color:var(--text-2) }
.mc-objt{ margin:0 0 6px; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300) }
.mc-obj li{ font-size:13px; margin-bottom:5px }
.mc-apres{ margin-top:18px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:13.4px; color:var(--text-2) }

/* Sous 720 px le QR passe au-dessus, réduit : il reste scannable par un
   voisin, mais il ne mange plus la moitié de l'écran du propriétaire. */
@media (max-width:720px){
  .menu-card{ grid-template-columns:1fr; gap:14px }
  .mc-qr{ flex-direction:row; align-items:center; gap:12px; justify-content:flex-start }
  .mc-qr img{ width:88px; flex:0 0 auto }
  .mc-qr .mc-scan{ text-align:left }
}
@media print{
  .menu-grid{ grid-template-columns:1fr }
  .menu-card{ grid-template-columns:96px 1fr }
  .mc-qr img{ background:#fff }
  .mc-qr .mc-scan{ display:none }
}

/* ═══════════ LE PIED DU FIL, REPLIÉ ═══════════
   Les réglages, la sortie et les deux mentions d'honnêteté tenaient un
   quart de la colonne en permanence pour des lignes qu'on lit une fois.
   Elles se replient — à un clic, pas effacées.                        */
#lschat .lc-foot{ padding:0; display:block }
#lschat .lc-foot-t{ cursor:pointer; list-style:none; display:flex; align-items:center;
  gap:8px; padding:8px 14px; white-space:nowrap; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute) }
#lschat .lc-foot-t::-webkit-details-marker{ display:none }
#lschat .lc-foot-t:hover{ color:var(--gold-300) }
#lschat .lc-foot-t:focus-visible{ outline:2px solid var(--gold-500); outline-offset:-2px }
#lschat .lc-foot-t::after{ content:''; flex:0 0 auto; margin-left:auto; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .2s var(--ease) }
#lschat .lc-foot[open] .lc-foot-t::after{ transform:rotate(45deg) }
#lschat .lc-actions{ padding:2px 14px 0 }
#lschat .lc-consent{ display:block; padding:7px 14px 0 }
#lschat .lc-honnete{ margin:7px 14px 12px }
@media(prefers-reduced-motion:reduce){ #lschat .lc-foot-t::after{ transition:none } }

/* ═══════════ LES ANNEXES, ESTOMPÉES ═══════════
   Même signal que les diapos déjà vues : ce qui est replié pèse moins
   dans le fil. Au survol et une fois dépliée, la diapo revient pleine —
   on ne lit pas un texte à travers un voile.                          */
.cs-slide.annexe-plie{ opacity:.62; transition:opacity .2s var(--ease) }
.cs-slide.annexe-plie:hover,
.cs-slide.annexe-plie:focus-within{ opacity:1 }
@media(prefers-reduced-motion:reduce){ .cs-slide.annexe-plie{ transition:none } }
@media print{ .cs-slide.annexe-plie{ opacity:1 } }