/* ═══════════════════════════════════════════════════════════════
   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.                                        */
.cs-slide{
  position:relative;min-height:calc(100vh - var(--bar) - var(--chapnav) - 60px);
  min-height:calc(100svh - var(--bar) - var(--chapnav) - 60px);
  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--cover{
  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}
.cs-placeholder img.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.cs-placeholder.has{border-style:solid}
.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}

/* ═══════════ 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}}

/* ═══════════ 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}
.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;
  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{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{display:none}
  body.print-notes .cs-note{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}
  /* 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-prompt-add,body.projection .seen-stamp{display:none !important}
/* LA PROJECTION NE REDIMENSIONNE PLUS RIEN.
   Elle imposait un écran entier à chaque diapo — et comme
   « body.projection .cs-slide » pèse plus lourd que
   « .cs-slide--compact », que « --tall » et que « .annexe-plie », elle
   les écrasait toutes : une diapo de chapitre s'étirait à l'écran plein
   en laissant un grand vide, et une annexe repliée occupait un écran
   pour une barre de titre. Chaque diapo garde donc la hauteur qu'elle a
   en lecture. Contrepartie assumée : une diapo ne remplit plus
   exactement l'écran, le haut de la suivante peut apparaître en bas —
   ce qui est déjà le cas hors projection, et ce qui dit qu'il y a une
   suite. Le chrome effacé, lui, ne revient pas.                       */
body.projection .cs-slide{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}
  #wm-print{display:block;position:fixed;bottom:0;left:0;
    font-family:var(--font-mono);font-size:8pt;letter-spacing:.1em;color:#8b5f0d}
  #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}
/* Vider l'historique de la promo : réservé à l'animateur, et il ne doit
   pas se confondre avec son voisin local. La braise permanente le dit —
   c'est le seul bouton du pied qui touche les autres appareils. */
#lschat .lc-purger{display:none}
body.est-maitre #lschat .lc-purger{display:inline;color:var(--ember-300)}
body.est-maitre #lschat .lc-purger:hover{color:var(--ember-500)}
#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; }

/* — la ligne qui explique un fil vidé — */
/* Ni un message ni un carton : un constat. Même retrait que le
   modérateur, sans liseré or, pour qu'on ne cherche pas à y répondre. */
#lschat .lc-item--purge{ align-items:stretch; }
#lschat .lc-item--purge .lc-bulle{
  max-width:100%; padding-left:10px;
  background:transparent; border:1px dashed var(--line-strong);
}
#lschat .lc-item--purge .lc-auteur{ color:var(--mute); }
#lschat .lc-item--purge .lc-txt{ color:var(--text-2); font-size:12.5px; }
#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); }
/* Ce que la purge emporte, et ce que la base a rendu : une liste se
   parcourt du regard, une phrase se relit deux fois. */
.lc-modale-liste{
  margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px;
  font-size:12.5px; line-height:1.5; color:var(--text);
}
/* Le refus de la base, à l'endroit où on vient de taper. La phrase est
   celle que la base renvoie, mot pour mot ; seule la capitale d'entrée
   est posée à l'affichage, pour ne pas la réécrire. */
.lc-modale-err::first-letter{ text-transform:uppercase; }
.lc-modale-err{
  margin:0; padding:8px 10px; font-size:12px; line-height:1.5;
  color:var(--ember-300); background:rgba(190,87,55,.10);
  border:1px solid var(--ember-500); border-radius:var(--radius-sm);
}
.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); }
/* Un bouton qui efface pour toute la promo ne porte pas la couleur des
   boutons qu'on presse sans y penser. Et il reste éteint tant que les
   deux saisies ne sont pas faites : le geste demandé est là, visible,
   pas caché derrière un message d'erreur.
   Le sélecteur reprend le conteneur parce que .lc-modale-actions button
   ci-dessus est plus spécifique qu'une simple classe — c'est d'ailleurs
   pour cette raison que .lc-modale-ok ne teinte rien aujourd'hui. On ne
   touche pas au panneau du carton dans la même passe : sa teinte est un
   autre sujet que celui-ci. */
.lc-modale-actions .lc-modale-danger{
  color:#fff; background:var(--ember-500); border-color:var(--ember-500);
}
.lc-modale-actions .lc-modale-danger:hover{
  background:var(--ember-300); border-color:var(--ember-300);
}
.lc-modale-actions button[disabled]{
  cursor:not-allowed; opacity:.45;
  color:var(--text); background:transparent; border-color:var(--line-strong);
}

/* — 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 } }

/* ═══════════ L'AGENT DU COURS — LA VOIX QUI VIENT DE DEHORS (V15) ═══════════
   La colonne porte désormais trois registres qu'il ne faut pas
   confondre du coin de l'œil : les humains (bulles alignées, or pour
   soi, neutre pour les autres), le modérateur automatique (liseré or,
   pleine largeur, pas de bulle), et l'agent du cours, qui répond à une
   question et dont la réponse vient d'un modèle de langage appelé
   dehors. Il prend la pleine largeur comme le modérateur — ce n'est pas
   quelqu'un de la salle — mais un cadre pointillé et un liseré gris le
   séparent de lui : ce ne sont ni la même voix ni la même certitude. */
#lschat .lc-item--ia{ align-items:stretch }
#lschat .lc-item--ia .lc-bulle{
  max-width:100%; background:var(--surface-card-hi);
  border:1px dashed var(--line-strong); border-left:3px solid var(--fog-500);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding-left:10px;
}
#lschat .lc-item--ia .lc-auteur{ color:var(--fog-400) }
/* La citation de la question garde son repère or : c'est un message de
   la salle qu'elle rappelle, pas la parole de l'agent. */
#lschat .lc-item--ia .lc-cite{ background:transparent }

/* — l'attente : ça travaille, et rien n'est bloqué — */
#lschat .lc-ia-attente{
  display:flex; align-items:center; gap:8px; align-self:stretch;
  padding:6px 10px; border-left:3px solid var(--fog-500);
  background:var(--surface-card-hi); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mute);
}
#lschat .lc-ia-pts{ display:inline-flex; gap:3px; flex:0 0 auto }
#lschat .lc-ia-pts i{
  width:4px; height:4px; border-radius:999px; background:var(--fog-400);
  animation:lc-ia-souffle 1.1s var(--ease) infinite;
}
#lschat .lc-ia-pts i:nth-child(2){ animation-delay:.16s }
#lschat .lc-ia-pts i:nth-child(3){ animation-delay:.32s }
@keyframes lc-ia-souffle{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
@media(prefers-reduced-motion:reduce){ #lschat .lc-ia-pts i{ animation:none; opacity:.6 } }

/* — ce qui n'a pas marché : sur ce poste, pas dans le fil de la promo —
   Le registre braise est celui des gestes qui ne concernent que
   l'animateur (voir .lc-purger) : la note en reprend le liseré. */
#lschat .lc-ianote{
  margin:10px 14px 0; padding:9px 11px;
  background:var(--surface-card); border:1px solid var(--line-strong);
  border-left:3px solid var(--ember-300); border-radius:var(--radius-sm);
}
#lschat .lc-ianote-t{
  margin:0 0 4px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ember-300);
}
/* Le texte vient de la fonction Edge : un mot long — une adresse, un
   nom de variable, une suite d'octets — sortait de la colonne au lieu
   de se couper, faute d'overflow-wrap. Les bulles du fil (.lc-txt) le
   portent depuis toujours ; cette note-là ne l'avait pas.            */
#lschat .lc-ianote-x{
  margin:0; font-size:12px; line-height:1.5; color:var(--text-2);
  overflow-wrap:break-word; word-break:break-word;
}
#lschat .lc-ianote-f{ margin:6px 0 0; font-size:10.5px; line-height:1.45; color:var(--mute) }
#lschat .lc-ianote-b{
  margin-top:7px; background:none; border:none; padding:0; cursor:pointer;
  color:var(--mute); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:underline; text-underline-offset:3px;
}
#lschat .lc-ianote-b:hover{ color:var(--gold-300) }

/* — le bouton de la bulle (animateur) et l'interrupteur du pied — */
#lschat .lc-iab{ opacity:.55; font-size:13px }
#lschat .lc-outils:hover .lc-iab,#lschat .lc-iab:focus-visible{ opacity:1 }
#lschat .lc-ia.act{ color:var(--gold-400) }
/* La ligne qui explique l'agent à la promo : même registre discret que
   la mention de partage, dont elle est la voisine. */
#lschat .lc-ia-dit{
  margin:7px 14px 0; font-size:10.5px; line-height:1.5; color:var(--mute);
}
@media print{ #lschat .lc-ianote,#lschat .lc-ia-attente{ display:none !important } }