/* ═══════════════════════════════════════════════════════════════════════
   AI SMART CLASSES — la couche de démonstration de /formations/

   Ce fichier ne sert qu'au chapitre 01 de la page publique des
   formations : celui qui explique le dispositif et le fait essayer. Il
   se pose APRÈS course.css et n'en redéfinit aucun token — tout ce qui
   est couleur, fonte, rayon ou durée vient de là, pour que la bascule
   jour / nuit et l'impression continuent de marcher sans que rien ici ne
   le sache.

   Trois familles de blocs :
     · le fil de démonstration (.sc-fil) — un fil de promo rejoué, puis
       ouvert au visiteur ;
     · les instruments (.sc-yama, .sc-orbite, .sc-jauge) — les outils des
       cours, sortis de leur contexte, juste pour le goût qu'ils ont ;
     · les vitrines (.sc-flux, .sc-livrables, .sc-preuve) — le dispositif
       et ce qu'il produit.

   Chaque bloc suit la même règle que le reste du projet : SANS
   JAVASCRIPT, le contenu reste lisible. Les figures se montent sur une
   liste ou un tableau déjà à l'écran ; le JS les remplace, il ne les
   invente pas. Sous mouvement réduit, tout se fige sans rien perdre. À
   l'impression, les instruments cèdent la place à leur source.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ L'ÉTIQUETTE « DÉMONSTRATION » ═══════════
   Tout ce qui est jouable sur cette page en porte une. Un visiteur doit
   savoir en une seconde qu'il manipule une maquette et non le support
   d'une promo — c'est la condition pour lui donner de vrais boutons. */
.sc-tag{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-400);
  border:1px solid var(--gold-hair);background:var(--gold-soft);
  border-radius:999px;padding:5px 12px;margin:0 0 12px}
.sc-tag i{width:6px;height:6px;border-radius:50%;background:var(--gold-500);
  flex:0 0 auto;display:block}
html.motion .sc-tag i{animation:sc-pouls 2.4s var(--ease) infinite}
@keyframes sc-pouls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){html.motion .sc-tag i{animation:none}}

/* ═══════════ LE FIL DE DÉMONSTRATION ═══════════════════════════════════
   La colonne de droite d'un support de cours, posée dans le corps de la
   page. Elle emprunte la grammaire de #lschat (bulles, auteur en
   capitales monospace, modérateur sans bulle) sans en emprunter le
   code : celui-là dépend d'une promo, d'une porte et d'une base.

   Deux temps : le rejeu d'un fil réel reconstitué, puis le champ ouvert
   au visiteur, qui parle au même agent.                                */
/* SANS JAVASCRIPT, LA COLONNE NE S'AFFICHE PAS. Elle serait une coquille :
   un fil vide et un champ mort, sous une étiquette qui promet un agent.
   Le moteur pose `sc-monte` sur les trois éléments quand il les a montés ;
   d'ici là, il reste la diapo à gauche et le dialogue en toutes lettres
   plus bas — c'est-à-dire le propos, entier.                          */
.sc-demo{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;margin:0 0 10px}
.sc-demo.sc-monte{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.sc-demo.sc-monte{grid-template-columns:1fr}}
.sc-fil{display:none}
.sc-fil.sc-monte{display:flex}
.sc-fil-ctl{display:none}
.sc-fil-ctl.sc-monte{display:flex}

/* — la moitié gauche : la diapo que la salle a sous les yeux — */
.sc-diapo{background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:20px 22px;position:relative;overflow:hidden}
.sc-diapo:before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;
  background:var(--metal-gold)}
.sc-diapo .sd-num{font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-500);
  margin-bottom:10px}
.sc-diapo h4{font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.45rem);
  font-weight:600;line-height:1.22;color:var(--text);margin:0 0 10px}
.sc-diapo h4 em{font-style:italic;color:var(--gold-400)}
.sc-diapo p{margin:0 0 10px;font-size:14px;line-height:1.58;color:var(--text-2)}
.sc-diapo p:last-child{margin-bottom:0}
.sc-diapo .sd-obj{margin:0;padding-left:18px}
.sc-diapo .sd-obj li{font-size:13.6px;line-height:1.5;color:var(--text-2);margin-bottom:6px}
.sc-diapo .sd-obj li::marker{color:var(--gold-500)}
.sc-diapo .sd-pied{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--mute)}

/* — la moitié droite : la colonne — */
.sc-fil{flex-direction:column;background:var(--surface-card);
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  min-height:430px}
.sc-fil .sf-head{padding:11px 14px 9px;border-bottom:1px solid var(--line);
  background:var(--surface-card-hi)}
.sc-fil .sf-t{font-family:var(--font-mono);font-size:10px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-400);
  display:flex;align-items:center;gap:8px}
.sc-fil .sf-t b{font-weight:700}
.sc-fil .sf-etat{margin-left:auto;color:var(--mute);letter-spacing:.05em;
  text-transform:none;font-size:9.5px}
.sc-fil .sf-sous{font-size:11px;color:var(--mute);margin-top:4px;line-height:1.45}

/* le fil lui-même : la seule zone qui défile */
.sc-fil .sf-feed{flex:1;min-height:0;max-height:min(52vh,430px);overflow-y:auto;
  overscroll-behavior:contain;padding:13px 14px;display:flex;flex-direction:column;gap:11px;
  scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.sc-fil .sf-feed{scroll-behavior:auto}}

.sc-fil .sf-item{display:flex;flex-direction:column;max-width:100%}
html.motion .sc-fil .sf-item{animation:sc-pop .34s var(--ease)}
@keyframes sc-pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.motion .sc-fil .sf-item{animation:none}}

.sc-fil .sf-qui{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}
.sc-fil .sf-h{color:var(--mute);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.sc-fil .sf-bulle{max-width:90%;padding:9px 12px;border-radius:var(--radius-md);
  background:var(--surface-doc);border:1px solid var(--line)}
.sc-fil .sf-x{margin:0;font-size:13px;line-height:1.55;color:var(--text);
  overflow-wrap:break-word;white-space:pre-line}
.sc-fil .sf-emo{font-size:15px;margin-right:5px}

/* le visiteur, et l'étudiant qu'il remplace : à droite, teinte or */
.sc-fil .sf-item--moi{align-items:flex-end}
.sc-fil .sf-item--moi .sf-qui{justify-content:flex-end}
.sc-fil .sf-item--moi .sf-bulle{background:var(--gold-soft);border-color:var(--gold-hair)}

/* le modérateur automatique : pas de bulle — sa parole n'est celle de
   personne dans la salle */
.sc-fil .sf-item--mod{align-items:stretch}
.sc-fil .sf-item--mod .sf-qui{color:var(--mute)}
.sc-fil .sf-item--mod .sf-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:11px}

/* l'agent : pleine largeur, liseré plein — c'est lui qu'on vient voir */
.sc-fil .sf-item--ia{align-items:stretch}
.sc-fil .sf-item--ia .sf-qui{color:var(--gold-400)}
.sc-fil .sf-item--ia .sf-bulle{max-width:100%;background:var(--tint-warm);
  border:1px solid var(--gold-hair);border-left:2px solid var(--gold-500)}

/* la provenance d'une réponse, sous sa bulle. Discrète mais toujours là :
   une fiche écrite et un modèle de langage ne valent pas la même chose. */
.sc-fil .sf-src{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin-top:5px;padding-left:2px}

/* l'animateur : le dernier mot est humain, et il se voit */
.sc-fil .sf-item--anim{align-items:stretch}
.sc-fil .sf-item--anim .sf-bulle{max-width:100%;background:var(--surface-doc);
  border:1px dashed var(--line-strong)}

/* le carton du modérateur, tel qu'il tombe en séance */
.sc-fil .sf-carton{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;
  border-radius:var(--radius-sm);background:var(--surface-card-hi);
  border:1px solid var(--line);border-left:3px solid var(--gold-500)}
.sc-fil .sf-carton--jaune{border-left-color:var(--gold-500)}
.sc-fil .sf-carton--vert{border-left-color:var(--inema-anis,var(--gold-500))}
.sc-fil .sf-carton i{flex:0 0 auto;width:15px;height:20px;border-radius:2px;
  background:var(--gold-500);margin-top:1px}
.sc-fil .sf-carton--vert i{background:#4e8b52}
.sc-fil .sf-carton div{min-width:0}
.sc-fil .sf-carton b{display:block;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.sc-fil .sf-carton p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2)}

/* le séparateur de séance */
.sc-fil .sf-sep{display:flex;align-items:center;gap:8px;margin:2px 0;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute)}
.sc-fil .sf-sep:before,.sc-fil .sf-sep:after{content:"";flex:1;height:1px;background:var(--line)}

/* l'attente — trois points, comme dans la colonne réelle */
.sc-fil .sf-attente{display:flex;align-items:center;gap:9px;padding:2px 2px 2px 0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--mute)}
.sc-fil .sf-pts{display:inline-flex;gap:4px}
.sc-fil .sf-pts i{width:5px;height:5px;border-radius:50%;background:var(--gold-500);opacity:.35}
html.motion .sc-fil .sf-pts i{animation:sc-pts 1.15s var(--ease) infinite}
html.motion .sc-fil .sf-pts i:nth-child(2){animation-delay:.16s}
html.motion .sc-fil .sf-pts i:nth-child(3){animation-delay:.32s}
@keyframes sc-pts{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){html.motion .sc-fil .sf-pts i{animation:none;opacity:.7}}

/* — le composeur : c'est ici que le visiteur prend la main — */
.sc-fil .sf-compose{border-top:1px solid var(--line);padding:10px 14px 12px;
  background:var(--surface-card-hi)}
.sc-fil .sf-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.sc-fil .sf-sugg button{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:999px;padding:5px 11px;cursor:pointer;transition:.18s var(--ease);
  text-align:left;max-width:100%}
.sc-fil .sf-sugg button:hover{border-color:var(--gold-500);color:var(--gold-400);
  background:var(--gold-soft)}
.sc-fil .sf-saisie{display:flex;gap:6px;align-items:center}
.sc-fil .sf-saisie input{flex:1;min-width:0;height:37px;padding:0 11px;
  background:var(--surface-doc);color:var(--text);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13.5px}
.sc-fil .sf-saisie input:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--gold-soft)}
.sc-fil .sf-send{flex:0 0 auto;width:37px;height:37px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--gold-hair);color:var(--gold-400);
  border-radius:var(--radius-sm);cursor:pointer;font-size:15px;transition:.18s var(--ease)}
.sc-fil .sf-send:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--on-gold)}
.sc-fil .sf-send[disabled]{opacity:.45;cursor:not-allowed}
.sc-fil .sf-note{font-size:10.5px;line-height:1.5;color:var(--mute);margin:8px 0 0}
.sc-fil .sf-note b{color:var(--text-2)}

/* les commandes du rejeu, sous la colonne */
.sc-fil-ctl{flex-wrap:wrap;gap:9px;align-items:center;margin:10px 0 0}
.sc-fil-ctl button{font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:999px;padding:6px 13px;cursor:pointer;transition:.18s var(--ease)}
.sc-fil-ctl button:hover{border-color:var(--gold-500);color:var(--gold-400)}
.sc-fil-ctl .sf-avance{font-family:var(--font-mono);font-size:9.5px;color:var(--mute);
  letter-spacing:.05em;font-variant-numeric:tabular-nums}

/* la trame sans JS : le fil se lit comme un dialogue écrit */
.sc-fil-source{margin:0;padding-left:20px}
.sc-fil-source li{font-size:13.4px;line-height:1.55;color:var(--text-2);margin-bottom:8px}
.sc-fil-source li b{color:var(--text)}
.sc-fil-source li::marker{color:var(--gold-500)}
.sc-monte .sc-fil-source{display:none}

/* ═══════════ LE DISPOSITIF, EN CINQ TEMPS ═══════════════════════════════
   Une frise, pas un schéma : ce qui se passe avant, pendant et après la
   séance, dans l'ordre. Chaque temps s'allume au survol et au clavier,
   et la lumière court d'un temps au suivant tant qu'on n'y touche pas. */
.sc-flux{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:0 0 10px}
.sc-flux .sx{background:var(--surface-card);padding:17px 16px 15px;position:relative;
  display:block;text-align:left;border:0;width:100%;cursor:pointer;color:inherit;
  transition:background .3s var(--ease)}
.sc-flux .sx:before{content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--metal-gold);transition:width .5s var(--ease)}
.sc-flux .sx.est-actif,.sc-flux .sx:hover,.sc-flux .sx:focus-visible{background:var(--tint-warm)}
.sc-flux .sx.est-actif:before,.sc-flux .sx:hover:before{width:100%}
.sc-flux .sx:focus-visible{outline:2px solid var(--gold-500);outline-offset:-2px}
.sc-flux .sx-n{font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-500);
  margin-bottom:8px;display:block}
.sc-flux .sx-t{display:block;font-family:var(--font-display);font-size:15.5px;font-weight:600;
  color:var(--text);margin-bottom:6px;line-height:1.25}
.sc-flux .sx-p{display:block;font-size:12.8px;line-height:1.5;color:var(--text-2)}
.sc-flux-detail{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:16px 20px;margin:10px 0 0;min-height:82px}
.sc-flux-detail h5{font-family:var(--font-display);font-size:1.02rem;font-weight:600;
  margin:0 0 6px;color:var(--text)}
.sc-flux-detail p{margin:0;font-size:14px;line-height:1.6;color:var(--text-2)}
.sc-flux-detail p + p{margin-top:8px}

/* ═══════════ L'ORBITE — LA RECETTE DU MANAGER ═══════════════════════════
   Portée du module 5 (iae-m2g-2026), réduite à ce qu'une vitrine peut
   porter : neuf ingrédients en orbite lente autour de la vision, le
   détail dessous, la liste ordonnée en dessous encore quand il n'y a pas
   de JavaScript. Ici l'orbite ne renvoie à aucune diapo — on ne montre
   que le geste.                                                        */
.sc-orbite{margin:0 0 10px;container-type:inline-size}
.sc-orbite .so-scene{position:relative;width:100%;max-width:560px;margin:0 auto;
  aspect-ratio:16/9.6;min-height:300px;display:grid;place-items:center;isolation:isolate}
.sc-orbite .so-anneau{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76%;aspect-ratio:1.72/1;border-radius:50%;
  border:1px dashed var(--gold-hair);opacity:.75;pointer-events:none}
.sc-orbite .so-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:5;display:grid;place-items:center;text-align:center;
  width:clamp(96px,17cqw,132px);aspect-ratio:1.62/1;border-radius:50%;
  background:var(--gold-soft);border:1.5px solid var(--gold-500);
  font-family:var(--font-display);font-size:clamp(.95rem,2.4cqw,1.15rem);
  color:var(--text);padding:6px;line-height:1.15}
.sc-orbite .so-centre small{display:block;font-family:var(--font-mono);font-size:9px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-500);
  margin-top:2px}
.sc-orbite .so-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(96px,17cqw,132px);aspect-ratio:1.62/1;border-radius:50%;
  border:1px solid var(--gold-hair);pointer-events:none;z-index:4}
html.motion .sc-orbite .so-halo{animation:sc-souffle 4.6s var(--ease) infinite}
@keyframes sc-souffle{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.55}
  50%{transform:translate(-50%,-50%) scale(1.28);opacity:0}}
.sc-orbite .so-noeud{position:absolute;left:50%;top:50%;z-index:10;
  display:grid;justify-items:center;gap:5px;width:116px;margin:-16px 0 0 -58px;
  background:none;border:0;padding:0;cursor:pointer;color:inherit}
.sc-orbite .so-pastille{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-card);border:1.5px solid var(--line-strong);color:var(--mute);
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  transition:transform .28s var(--ease),background .28s,border-color .28s,color .28s}
.sc-orbite .so-nom{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);text-align:center;line-height:1.25;
  transition:color .28s,font-weight .28s}
.sc-orbite .so-noeud:hover .so-pastille,
.sc-orbite .so-noeud:focus-visible .so-pastille{border-color:var(--gold-500);color:var(--gold-400)}
.sc-orbite .so-noeud:focus-visible{outline:none}
.sc-orbite .so-noeud.est-actif{z-index:30}
.sc-orbite .so-noeud.est-actif .so-pastille{background:var(--gold-500);border-color:var(--gold-500);
  color:var(--on-gold);transform:scale(1.3);box-shadow:var(--glow-gold)}
.sc-orbite .so-noeud.est-actif .so-nom{color:var(--gold-400);font-weight:700}
.sc-orbite .so-detail{max-width:560px;margin:2px auto 0;background:var(--surface-card);
  border:1px solid var(--line);border-left:2px solid var(--gold-500);
  border-radius:var(--radius-md);padding:14px 17px;min-height:96px}
.sc-orbite .so-detail h5{font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  margin:0 0 5px;color:var(--text)}
.sc-orbite .so-detail p{font-size:.93rem;line-height:1.6;color:var(--text-2);margin:0}
.sc-orbite .so-ctl{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:10px}
.sc-orbite .so-fl{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-card);border:1px solid var(--line-strong);color:var(--text-2);
  cursor:pointer;font-family:var(--font-mono);font-size:13px;line-height:1}
.sc-orbite .so-fl:hover{border-color:var(--gold-500);color:var(--gold-400)}
.sc-orbite .so-pause{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;background:none;border:0;color:var(--mute);cursor:pointer;padding:4px 8px}
.sc-orbite .so-pause:hover{color:var(--gold-400)}
.sc-orbite .so-liste{margin:0;padding-left:20px}
.sc-orbite .so-liste li{margin-bottom:7px;color:var(--text-2);font-size:.93rem}
.sc-orbite .so-liste li::marker{color:var(--gold-500)}
.sc-orbite .so-liste b{color:var(--text)}
.sc-orbite.sc-monte .so-liste{display:none}
@media(max-width:640px){
  .sc-orbite .so-scene{aspect-ratio:1/1;min-height:320px}
  .sc-orbite .so-noeud{width:96px;margin-left:-48px}
  .sc-orbite .so-nom{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){
  .sc-orbite .so-halo{animation:none}
  .sc-orbite .so-pastille{transition:none}}

/* ═══════════ LE YAMAZUMI — DIAGRAMME DES TEMPS DE CYCLE ═════════════════
   La version de vitrine de l'outil de /diag-tps-cycle/ : six postes, un
   takt réglable, le goulot qui se désigne tout seul. On ne garde que ce
   qui se comprend sans un mot d'explication — la barre qui dépasse la
   ligne rouge est le poste qui casse le flux.
   Le tableau des postes est la source : sans JS il reste à l'écran, et
   c'est lui qu'on imprime.                                             */
.sc-yama{margin:0 0 10px}
.sc-yama .sy-reglages{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  margin-bottom:16px}
.sc-yama .sy-champ{display:flex;flex-direction:column;gap:5px}
.sc-yama .sy-champ label{font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute)}
.sc-yama .sy-champ input{width:104px;height:34px;padding:0 10px;background:var(--surface-doc);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:13.5px}
.sc-yama .sy-champ input:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--gold-soft)}
.sc-yama .sy-raz{font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;background:transparent;
  border:1px solid var(--line-strong);color:var(--text-2);border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:.18s var(--ease)}
.sc-yama .sy-raz:hover{border-color:var(--gold-500);color:var(--gold-400)}
.sc-yama .sy-legende{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;color:var(--mute)}
.sc-yama .sy-legende span{display:inline-flex;align-items:center;gap:6px}
.sc-yama .sy-legende i{width:11px;height:11px;border-radius:2px;display:block}
.sc-yama .sy-legende .i-va{background:var(--gold-500)}
.sc-yama .sy-legende .i-nva{background:var(--line-strong)}
.sc-yama .sy-legende .i-gou{background:var(--ember-500)}

/* la scène : des colonnes de hauteur proportionnelle, et la ligne de takt */
.sc-yama .sy-plan{position:relative;display:flex;align-items:flex-end;gap:8px;
  height:clamp(210px,34vh,300px);padding:14px 10px 0;
  background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-md) var(--radius-md) 0 0;overflow:hidden}
.sc-yama .sy-takt{position:absolute;left:0;right:0;height:0;
  border-top:1.5px dashed var(--ember-500);pointer-events:none;z-index:3;
  transition:bottom .45s var(--ease)}
.sc-yama .sy-takt span{position:absolute;right:8px;top:-17px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ember-300);background:var(--surface-card);padding:0 5px}
.sc-yama .sy-poste{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%;position:relative}
.sc-yama .sy-barre{width:100%;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:3px 3px 0 0;overflow:hidden;transition:height .45s var(--ease)}
.sc-yama .sy-nva{background:var(--line-strong);transition:height .45s var(--ease)}
.sc-yama .sy-va{background:var(--gold-500);transition:height .45s var(--ease)}
.sc-yama .sy-poste.est-goulot .sy-va{background:var(--ember-500)}
.sc-yama .sy-poste.est-goulot .sy-nva{background:var(--ember-300);opacity:.55}
.sc-yama .sy-val{flex:0 0 auto;margin-bottom:4px;text-align:center;
  font-family:var(--font-mono);font-size:10px;color:var(--text-2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sc-yama .sy-poste.est-goulot .sy-val{color:var(--ember-300);font-weight:700}
.sc-yama .sy-noms{display:flex;gap:8px;padding:8px 10px 10px;
  background:var(--surface-card-hi);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--radius-md) var(--radius-md)}
/* Les noms de poste : la césure automatique plutôt que la coupe brute.
   `anywhere` donnait « DÉCOUP / E » sur un téléphone ; en français,
   hyphens:auto coupe aux syllabes et garde le mot lisible. */
.sc-yama .sy-nom{flex:1;min-width:0;text-align:center;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);
  line-height:1.3;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.sc-yama .sy-nom.est-goulot{color:var(--ember-300);font-weight:700}

/* les cinq cartes de lecture */
.sc-yama .sy-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-top:none;margin-bottom:0}
.sc-yama .sy-c{background:var(--surface-card);padding:13px 14px 12px;text-align:center}
.sc-yama .sy-c .cv{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.62rem);
  font-weight:600;color:var(--gold-300);line-height:1;margin-bottom:7px;
  font-variant-numeric:tabular-nums}
.sc-yama .sy-c .ck{font-family:var(--font-mono);font-size:9px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute);line-height:1.4}
.sc-yama .sy-c.est-crit .cv{color:var(--ember-300)}
.sc-yama .sy-note{font-size:12.6px;color:var(--mute);margin:14px 0 0;line-height:1.55}
/* Cinq cartes sur deux colonnes laissent une case vide, qui se lit comme
   un défaut d'affichage : la dernière prend toute la ligne. */
@media(max-width:640px){
  .sc-yama .sy-cartes{grid-template-columns:repeat(2,1fr)}
  .sc-yama .sy-c:last-child{grid-column:1 / -1}
  .sc-yama .sy-nom{font-size:8px;letter-spacing:0}
  .sc-yama .sy-legende{margin-left:0}
}
.sc-yama-source{margin:14px 0 0}
.sc-yama-source > summary{cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--mute);padding:8px 0;
  border-top:1px solid var(--line)}
.sc-yama-source > summary::-webkit-details-marker{display:none}
.sc-yama-source > summary:before{content:"+ ";color:var(--gold-500)}
.sc-yama-source[open] > summary:before{content:"– "}
.sc-yama-source > summary:hover{color:var(--gold-400)}
.sc-yama-source .tbox{margin-top:10px}

/* ═══════════ LA JAUGE — STOCK DE SÉCURITÉ ══════════════════════════════
   Trois curseurs, une formule, un verdict. La même grammaire que les
   mini-calculettes des supports (.cs-calc), avec un cadran en plus :
   c'est le cadran qui fait comprendre qu'un stock de sécurité n'est pas
   un stock « en plus », c'est le prix d'un taux de service.            */
.sc-jauge{margin:0 0 10px}
.sc-jauge .sj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;align-items:end;margin-bottom:18px}
.sc-jauge .sj-fld{display:flex;flex-direction:column;gap:6px}
.sc-jauge .sj-fld label{font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute)}
.sc-jauge .sj-fld input[type=number]{height:36px;padding:0 10px;background:var(--surface-doc);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:14px}
.sc-jauge .sj-fld input:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--gold-soft)}
.sc-jauge .sj-fld select{height:36px;padding:0 8px;background:var(--surface-doc);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:13px}
.sc-jauge .sj-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.sc-jauge .sj-o{background:var(--surface-card);padding:16px 16px 14px;text-align:center}
.sc-jauge .sj-o .ov{font-family:var(--font-display);font-size:clamp(1.5rem,3.6vw,2.1rem);
  font-weight:600;color:var(--gold-300);line-height:1;margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.sc-jauge .sj-o .ol{font-family:var(--font-mono);font-size:9px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute)}
.sc-jauge .sj-o.est-crit .ov{color:var(--ember-300)}
.sc-jauge .sj-verdict{display:inline-block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-strong);
  color:var(--text-2);border-radius:999px;padding:6px 14px;margin:16px 0 0}
.sc-jauge .sj-verdict.est-warn{border-color:var(--gold-500);color:var(--gold-400);
  background:var(--gold-soft)}
.sc-jauge .sj-verdict.est-crit{border-color:var(--ember-500);color:var(--ember-300)}
.sc-jauge .sj-formule{font-family:var(--font-mono);font-size:12px;color:var(--mute);
  margin:14px 0 0;line-height:1.6;overflow-wrap:anywhere}
.sc-jauge .sj-formule b{color:var(--text-2)}

/* ═══════════ LE BOUTON D'ACTION ═══════════
   Le même dessin que le « copier le prompt » des boucles IA, sans sa
   classe : .al-copy porte un délégué de clic dans course.js, qui
   suppose un parent .cs-ai-loop. Un bouton qui n'en a pas le fait
   lever. On ne réutilise pas une classe à laquelle un comportement
   est attaché — on réutilise le style.                              */
.sc-bouton{background:transparent;border:1px solid var(--gold-hair);color:var(--gold-400);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 20px;border-radius:999px;cursor:pointer;transition:.18s var(--ease)}
.sc-bouton:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--on-gold)}
.sc-bouton:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
@media print{.sc-bouton{display:none}}

/* ═══════════ LES LIVRABLES ═══════════════════════════════════════════════
   Des tuiles, pas une liste : chacune montre ce qui sort de la séance et
   ce qu'on en fait le lundi. La miniature est dessinée en CSS — aucune
   capture d'écran à tenir à jour.                                      */
.sc-livrables{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;
  margin:0 0 8px}
.sc-liv{background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:0;overflow:hidden;display:flex;flex-direction:column}
.sc-liv .sl-vue{height:104px;background:var(--surface-card-hi);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.sc-liv .sl-corps{padding:15px 17px 17px}
.sc-liv h5{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold-500);margin:0 0 8px}
.sc-liv p{margin:0;font-size:13.6px;line-height:1.55;color:var(--text-2)}
.sc-liv .sl-go{display:inline-block;margin-top:11px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);text-decoration:none;
  border-bottom:1px solid var(--gold-hair);padding-bottom:2px}
.sc-liv .sl-go:hover{border-color:var(--gold-500)}

/* miniature 1 — le tableau de bord : quatre tuiles et une courbe */
.sc-liv .sl-vue--dash{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:1px;
  background:var(--line)}
.sc-liv .sl-vue--dash i{background:var(--surface-card);display:block;position:relative}
.sc-liv .sl-vue--dash i:after{content:"";position:absolute;left:22%;right:22%;bottom:26%;
  height:var(--h,30%);background:var(--gold-500);opacity:.7;border-radius:1px}
.sc-liv .sl-vue--dash i:nth-child(1):after{--h:52%}
.sc-liv .sl-vue--dash i:nth-child(2):after{--h:74%;background:var(--ember-500)}
.sc-liv .sl-vue--dash i:nth-child(3):after{--h:38%}
.sc-liv .sl-vue--dash i:nth-child(4):after{--h:63%}
html.motion .sc-liv .sl-vue--dash i:after{animation:sl-monte 2.6s var(--ease) infinite alternate}
html.motion .sc-liv .sl-vue--dash i:nth-child(2):after{animation-delay:.3s}
html.motion .sc-liv .sl-vue--dash i:nth-child(3):after{animation-delay:.6s}
html.motion .sc-liv .sl-vue--dash i:nth-child(4):after{animation-delay:.9s}
@keyframes sl-monte{from{height:calc(var(--h) * .45)}to{height:var(--h)}}

/* miniature 2 — le yamazumi : six barres, une plus haute */
.sc-liv .sl-vue--yama{display:flex;align-items:flex-end;gap:6px;padding:14px 16px}
.sc-liv .sl-vue--yama i{flex:1;background:var(--gold-500);opacity:.65;border-radius:2px 2px 0 0;
  height:var(--h,40%)}
.sc-liv .sl-vue--yama i:nth-child(1){--h:44%}
.sc-liv .sl-vue--yama i:nth-child(2){--h:62%}
.sc-liv .sl-vue--yama i:nth-child(3){--h:33%}
.sc-liv .sl-vue--yama i:nth-child(4){--h:48%}
.sc-liv .sl-vue--yama i:nth-child(5){--h:88%;background:var(--ember-500);opacity:.85}
.sc-liv .sl-vue--yama i:nth-child(6){--h:41%}

/* miniature 3 — le lab : une grille en perspective */
/* Le halo est DANS le fond, sous la grille : posé en ::after il passait
   par-dessus et effaçait les filets. Ordre des couches, de haut en bas :
   grille verticale, grille horizontale, halo, surface. */
.sc-liv .sl-vue--lab{background:
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(0deg,var(--line-strong) 0 1px,transparent 1px 20px),
  radial-gradient(ellipse 62% 72% at 50% 55%,var(--halo-gold),transparent 74%),
  var(--surface-card-hi)}
/* les trois postes de la ligne simulée, par-dessus la grille */
.sc-liv .sl-vue--lab:after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--gold-500),var(--gold-500)) 22% 62%/26px 20px no-repeat,
    linear-gradient(var(--gold-500),var(--gold-500)) 50% 40%/26px 20px no-repeat,
    linear-gradient(var(--ember-500),var(--ember-500)) 78% 66%/26px 20px no-repeat}

/* miniature 4 — l'attestation : un cadre et trois filets */
.sc-liv .sl-vue--attest{display:grid;place-items:center}
.sc-liv .sl-vue--attest:before{content:"";width:74%;height:70%;border:1.5px solid var(--gold-500);
  border-radius:2px;background:
    linear-gradient(var(--gold-500),var(--gold-500)) 50% 24%/34% 3px no-repeat,
    linear-gradient(var(--line-strong),var(--line-strong)) 50% 48%/58% 2px no-repeat,
    linear-gradient(var(--line-strong),var(--line-strong)) 50% 64%/48% 2px no-repeat,
    linear-gradient(var(--gold-500),var(--gold-500)) 50% 82%/22% 2px no-repeat,
    var(--surface-doc)}

/* ═══════════ LA BANDE DE PREUVE ═══════════════════════════════════════
   Les interventions en entreprise : une bande de vignettes sobres. Pas
   de logo tiers — une pastille de lettres dans le registre de la maison,
   qui n'emprunte l'identité de personne.                              */
.sc-preuve{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:0 0 8px}
.sc-preuve .sp{background:var(--surface-card);padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:9px}
/* ── LA MARQUE D'UN TERRAIN ──
   Deux états dans le même emplacement : le logo si le fichier est là,
   la pastille de lettres sinon. Le basculement est fait par le balisage
   lui-même (onerror sur l'image, qui révèle la pastille) — pas par du
   JavaScript qu'il faudrait maintenir. Déposer le PNG dans
   assets/img/clients/ suffit : aucune ligne de code à changer.
   Les logos appartiennent à leurs propriétaires ; ils ne sont affichés
   qu'à titre de référence d'intervention. */
.sc-preuve .sp-mark{width:auto;min-width:46px;height:46px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold-soft);border:1px solid var(--gold-hair);padding:0 8px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-400);align-self:flex-start}
/* Un logo apporte sa propre couleur : la pastille dorée lui ferait un
   cadre qui n'est pas le sien. Quand l'image est là, l'emplacement
   s'efface. */
.sc-preuve .sp-mark.a-logo{background:transparent;border-color:transparent;padding:0}
.sc-preuve .sp-logo{display:block;max-width:104px;max-height:46px;width:auto;height:auto;
  object-fit:contain}
/* Sur fond nuit, les logos sombres disparaissent : une plaque claire les
   porte, comme la pastille des co-marques d'école. */
:root[data-tema="sombre"] .sc-preuve .sp-mark.a-logo{background:#fff;padding:5px 7px;
  border-radius:var(--radius-sm)}
@media print{.sc-preuve .sp-mark.a-logo{background:#fff}}
.sc-preuve .sp-n{font-family:var(--font-display);font-size:15.5px;font-weight:600;
  color:var(--text);line-height:1.25}
.sc-preuve .sp-k{font-family:var(--font-mono);font-size:9px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute);line-height:1.5}
.sc-preuve .sp-p{font-size:13px;line-height:1.5;color:var(--text-2);margin:0}
.sc-preuve .sp--vide{background:var(--surface-card-hi)}
.sc-preuve .sp--vide .sp-mark{background:transparent;border-style:dashed;color:var(--mute)}
.sc-preuve .sp-mark .sp-lettres{display:none}
.sc-preuve .sp-mark.sans-logo .sp-lettres{display:block}

/* ═══════════ LA TUILE D'ENTREPRISE ═══════════════════════════════════════
   Même objet que .menu-card, sans co-marque : l'entreprise n'a pas
   déposé son logo ici, et on ne le lui emprunte pas. La pastille de
   lettres tient sa place, dans le registre de la maison.              */
.menu-card .sc-mark-lettres{width:auto;min-width:52px;height:52px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;padding:0 10px;
  background:var(--gold-soft);border:1px solid var(--gold-hair);
  font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-400);margin:0 0 12px}
.menu-card .sc-mark-lettres.a-logo{background:transparent;border-color:transparent;padding:0}
.menu-card .sc-mark-lettres .sp-logo{max-width:132px;max-height:52px}
.menu-card .sc-mark-lettres .sp-lettres{display:none}
.menu-card .sc-mark-lettres.sans-logo .sp-lettres{display:block}
:root[data-tema="sombre"] .menu-card .sc-mark-lettres.a-logo{background:#fff;padding:6px 8px}

/* ═══════════ CE QUE L'IMPRESSION GARDE ═══════════════════════════════════
   Un PDF de cette page doit rester lisible : les instruments cèdent la
   place à leurs sources, et les commandes disparaissent — on n'imprime
   pas un bouton.                                                       */
@media print{
  .sc-tag i{animation:none}
  /* .sc-monte relève la spécificité des commandes : la règle d'impression
     doit la rejoindre, sinon elle perd l'arbitrage et on imprime des
     boutons. */
  .sc-fil-ctl,.sc-fil-ctl.sc-monte,
  .sc-fil .sf-compose,.sc-orbite .so-ctl,.sc-yama .sy-reglages{display:none}
  .sc-fil{min-height:0;border-color:#c9c4b8}
  .sc-fil .sf-feed{max-height:none;overflow:visible}
  .sc-orbite .so-scene,.sc-orbite .so-detail{display:none}
  .sc-orbite.sc-monte .so-liste{display:block}
  .sc-yama .sy-plan,.sc-yama .sy-noms{display:none}
  .sc-yama-source > summary{display:none}
  .sc-yama-source > .tbox{display:block}
  .sc-flux .sx{break-inside:avoid}
  .sc-liv .sl-vue{display:none}
  .sc-demo{grid-template-columns:1fr}
}