/* ===========================================================================
   Awoui — session d'essai. Guide à gauche, machine à droite, rien d'autre.

   Cette page ne charge PAS awoui.css : elle n'a ni header, ni footer, ni
   défilement de document. Elle vit dans le viewport, comme une application.
   Seuls les jetons (assets/tokens.css) sont partagés — aucune couleur n'est
   déclarée ici, et la scène est sombre par nature (cf. js/nuit.js).
   =========================================================================== */

:root{ --r-sm:10px; --r:16px; --r-scene:32px; --gouttiere:10px; --marge-cote:10px; --guide-w:min(400px,34vw); --bar-h:52px; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{background:var(--bg-0)}
body.essai{
  background:var(--bg-0);color:var(--text);font-family:var(--fb);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:4px}
::selection{background:var(--sel)}

/* ── la porte ────────────────────────────────────────────────────────────── */
.porte{
  position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(680px 320px at 20% 0%,var(--halo-1),transparent 62%),
    radial-gradient(620px 300px at 80% 8%,var(--halo-2),transparent 64%),
    var(--bg-0);
}
.porte[hidden]{display:none}
.porte-carte{
  width:min(360px,100%);display:grid;gap:14px;justify-items:stretch;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px 26px;box-shadow:0 24px 60px -30px var(--shadow-med);
}
.porte-mark{justify-self:center;width:132px;height:auto;margin-bottom:6px;mix-blend-mode:var(--logo-blend)}
.porte-lab{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.porte-champ{
  width:100%;font-family:var(--fm);font-size:20px;letter-spacing:.18em;text-align:center;text-transform:uppercase;
  color:var(--text);background:var(--bg-1);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:13px 12px;transition:border-color .15s ease;
}
.porte-champ:focus{outline:none;border-color:var(--emerald)}
.porte-err{
  font-size:14px;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:var(--r-sm);padding:9px 12px;text-align:center;
}
.porte-err[hidden]{display:none}

/* boutons — repris de awoui.css, réduits à ce que cette page emploie */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fb);font-weight:500;font-size:15px;line-height:1;
  padding:13px 20px;border:1px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--grad-fill,var(--emerald));color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-1px)}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
@media (prefers-reduced-motion:reduce){ .btn,.btn-primary:hover{transition:none;transform:none} }

/* ── le poste ────────────────────────────────────────────────────────────── */
.poste{height:100dvh;display:grid;grid-template-rows:var(--bar-h) 1fr}
.poste[hidden]{display:none}

.poste-bar{
  display:flex;align-items:center;gap:14px;padding:0 12px 0 14px;
  background:var(--bg-1);border-bottom:1px solid var(--line);
}
.poste-marque img{width:104px;height:auto;mix-blend-mode:var(--logo-blend)}
.poste-titre{
  font-family:var(--fd);font-size:15px;font-weight:500;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.poste-temps{
  margin-left:auto;font-family:var(--fm);font-size:12.5px;color:var(--muted);
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;
}
.poste-temps.court{color:var(--warn);border-color:var(--warn-line)}
/* `hidden` NE SUFFIT PAS ICI. La règle du navigateur (`[hidden]{display:none}`)
   vient de sa feuille par défaut : la moindre règle d'auteur qui pose un
   `display` la bat, et `.poste-ico{display:grid}` en est une. Un bouton posé
   `hidden` dans le HTML restait donc VISIBLE — mesuré le 11/09/2026 sur le
   bouton d'emport, qui s'affichait sur toutes les sessions alors qu'il ne
   devait apparaître que là où le guichet est ouvert. Un bouton qui ne mène à
   rien est pire qu'un bouton absent : il apprend que l'interface ment. */
.poste-ico[hidden]{display:none !important}

.poste-ico{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
}
.poste-ico svg{width:17px;height:17px}
.poste-ico:hover{color:var(--text);background:var(--bg-3);border-color:var(--line)}
.poste-ico[aria-pressed="true"]{color:var(--emerald);border-color:var(--emerald-line);background:var(--emerald-soft)}
.poste-ico-fin:hover{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}

/* bascule guide/machine — n'existe qu'en étroit */
.poste-vues{display:none;gap:2px;padding:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px}
.poste-vue{
  font-family:var(--fb);font-size:13px;color:var(--muted);background:transparent;border:0;
  padding:6px 14px;border-radius:999px;cursor:pointer;
}
.poste-vue.on{color:var(--text);background:var(--bg-3)}

/* Le sélecteur de machine du siège : contrairement à « Guide / Machine », il
   reste visible à toutes les largeurs — sur grand écran on voit le guide ET la
   machine, et il faut quand même pouvoir choisir LAQUELLE. Il ne s'affiche que
   s'il porte quelque chose. */
.poste-machines{display:none;gap:2px;padding:3px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:999px}
.poste-machines.garni{display:flex}
.poste-machine{
  font-family:var(--fb);font-size:13px;color:var(--muted);background:transparent;border:0;
  padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.poste-machine.on{color:var(--text);background:var(--bg-3)}
.poste-machine:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.poste-corps{display:grid;grid-template-columns:var(--guide-w) 7px 1fr;min-height:0}
/* Guide replié : le guide sort de la grille, la scène prend TOUTE la largeur.
   Une colonne à 0 ne suffirait pas — la scène, seule rescapée, se placerait
   dans cette première colonne et disparaîtrait. */
body.repli .guide,body.repli .poignee{display:none}
body.repli .poste-corps{grid-template-columns:1fr}

/* ── le guide ────────────────────────────────────────────────────────────── */
.guide{
  min-height:0;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-1);
}

/* ── poignée de partage ──────────────────────────────────────────────────────
   Le partage calculé convient à la plupart des écrans, mais c'est au lecteur
   de trancher : plus de guide pour lire, plus de machine pour manipuler.
   noVNC suit tout seul — il remet son écran à l'échelle quand son cadre
   change de taille. */
.poignee{
  position:relative;cursor:col-resize;background:var(--bg-1);
  display:grid;place-items:center;touch-action:none;
}
.poignee::before{
  content:"";width:3px;height:28px;border-radius:2px;background:var(--line-strong);
  transition:background .15s ease,height .15s ease;
}
.poignee:hover::before{background:var(--text);height:44px}
.poignee:focus-visible{outline:2px solid var(--emerald);outline-offset:-2px}
.poignee:focus-visible::before{background:var(--emerald)}
/* Pendant le geste, les iframes avalent le pointeur : on les neutralise. */
body.glisse{cursor:col-resize;user-select:none}
body.glisse iframe{pointer-events:none}
@media (prefers-reduced-motion:reduce){ .poignee::before{transition:none} }
.guide-tete{display:flex;align-items:center;gap:12px;padding:14px 18px 10px;position:sticky;top:0;background:var(--bg-1);z-index:1}
.guide-jauge{flex:1;height:3px;background:var(--bg-3);border-radius:999px;overflow:hidden}
.guide-jauge-fil{display:block;height:100%;width:0;background:var(--emerald);transition:width .25s ease}
@media (prefers-reduced-motion:reduce){ .guide-jauge-fil{transition:none} }
.guide-compte{font-family:var(--fm);font-size:11.5px;color:var(--faint);white-space:nowrap}

/* Le VOLET prend tout le surplus — sinon une bande vide se rouvre entre les
   deux panneaux. La COLONNE DE LECTURE, elle, s'arrête : au-delà, la ligne
   devient trop longue pour être suivie. Ce qui reste appartient au volet et
   en porte le fond ; ce n'est plus un trou entre deux cartes. */
.guide-liste{list-style:none;padding:0 12px 40px;max-width:820px}

/* UNE ÉTAPE FERMÉE EST UNE LIGNE, UNE ÉTAPE OUVERTE EST UNE PAGE. Le filet
   entre deux étapes disait « liste » là où le contenu, lui, est un cours :
   on ne sépare plus par un trait continu, on aère, et seule l'étape ouverte
   se détache du fond. Le lecteur voit alors d'où il part et où il en est,
   sans avoir à relire les titres au-dessus.
   scroll-margin : l'en-tête de jauge est collant — sans cette marge,
   scrollIntoView cale le titre de l'étape DERRIÈRE lui. */
.pas{scroll-margin-top:46px;border-radius:14px;margin-bottom:2px}
.pas+.pas{border-top:1px solid var(--line)}
.pas.on{border-top-color:transparent;background:var(--bg-2);margin:8px 0 10px;padding-bottom:2px}
.pas.on+.pas{border-top-color:transparent}
.pas-tete{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  font-family:var(--fb);font-size:15px;color:var(--muted);
  background:transparent;border:0;padding:14px 12px;cursor:pointer;border-radius:14px;
}
.pas-tete:hover{color:var(--text)}
.pas.on>.pas-tete{color:var(--text)}
.pas-num{
  display:grid;place-items:center;width:25px;height:25px;flex:none;margin-top:1px;
  font-family:var(--fm);font-size:11.5px;
  color:var(--faint);border:1px solid var(--line-strong);border-radius:50%;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.pas.on>.pas-tete .pas-num{color:var(--on-accent);background:var(--emerald);border-color:var(--emerald)}
.pas.fait>.pas-tete .pas-num{color:var(--emerald);border-color:var(--emerald-line);background:var(--emerald-soft)}
/* Une étape faite porte sa marque, pas son numéro : on cherche « où j'en
   suis », pas « combien j'en ai fait ». Le numéro reste lisible par les
   lecteurs d'écran — c'est un pseudo-élément qui le recouvre, pas un texte
   remplacé. */
.pas.fait:not(.on)>.pas-tete .pas-num{font-size:0}
.pas.fait:not(.on)>.pas-tete .pas-num::after{content:"✓";font-size:12px;font-family:var(--fb)}
@media (prefers-reduced-motion:reduce){ .pas-num{transition:none} }

.pas-tete-txt{flex:1;display:grid;gap:3px;min-width:0}
.pas-titre{font-size:15px;line-height:1.35}
.pas.on>.pas-tete .pas-titre{font-family:var(--fd);font-size:16px;font-weight:600;letter-spacing:-.01em}

/* Ce qu'on veut savoir avant d'ouvrir : lire ou faire, combien de temps, et
   sur quelle machine. Trois mots, une seule ligne, jamais de ponctuation. */
.pas-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--fm);font-size:10.5px;letter-spacing:.04em}
.pas-meta i{font-style:normal;color:var(--faint)}
.pas-meta i+i::before{content:"·";margin-right:6px;color:var(--line-strong)}
.pas-genre{
  font-weight:500;text-transform:uppercase;letter-spacing:.07em;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--faint);
}
.pas-genre-lab{color:var(--emerald);border-color:var(--emerald-line);background:var(--emerald-soft)}
.pas-genre-cours{color:var(--cyan);border-color:var(--cyan-line);background:var(--cyan-soft)}
.pas-genre-tp{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.pas-machine{color:var(--muted)}

/* L'indentation aveugle de 42 px devient un RAIL : un filet d'un pixel, posé
   sous le centre de la pastille du numéro, qui dit « tout ceci appartient à
   l'étape » sans que le lecteur ait à le déduire d'un décalage. Il rend au
   passage sept pixels à la colonne de lecture — peu, mais dans un volet de
   449 px on ne les gaspille pas. */
.pas-corps{
  padding:4px 6px 20px 13px;margin-left:24px;display:grid;gap:13px;
  border-left:1px solid var(--line);
}
.pas-corps[hidden]{display:none}
.pas-corps p{font-size:15px;line-height:1.62;color:var(--muted)}
.pas-corps b{color:var(--text);font-weight:600}
.pas-corps code{font-family:var(--fm);font-size:13px;color:var(--text);background:var(--inset-2);padding:1px 5px;border-radius:5px}

.pas-bloc{position:relative;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 40px 11px 13px}
.pas-bloc pre{font-family:var(--fm);font-size:13px;line-height:1.75;color:var(--text);white-space:pre-wrap;word-break:break-word}
.pas-copie{
  position:absolute;top:7px;right:7px;display:grid;place-items:center;width:26px;height:26px;
  color:var(--faint);background:transparent;border:1px solid var(--line);border-radius:7px;cursor:pointer;
}
.pas-copie svg{width:13px;height:13px}
.pas-copie:hover{color:var(--text);border-color:var(--line-strong)}
.pas-copie.ok{color:var(--emerald);border-color:var(--emerald-line)}

.pas-suite{
  justify-self:start;font-family:var(--fb);font-size:13.5px;color:var(--text);
  background:var(--ghost-bg);border:1px solid var(--line-strong);border-radius:999px;
  padding:8px 17px;cursor:pointer;
}
.pas-suite:hover{background:var(--ghost-bg-hover);border-color:var(--text)}

.guide-fin{
  margin:18px 8px 0;padding:15px 16px;text-align:center;
  background:var(--emerald-soft);border:1px solid var(--emerald-line);border-radius:var(--r);
}
.guide-fin p{font-size:14.5px;color:var(--text);margin-bottom:12px}
.guide-fin[hidden]{display:none}

/* ── la machine ──────────────────────────────────────────────────────────── */
/* La console FLOTTE dans un logement clair — l'identité Awoui d'avant la
   refonte. Ce n'est pas qu'une question d'allure : collée bord à bord, la
   page Proxmox (fond sombre) laissait voir une ligne noire au raccord, là où
   son écran mis à l'échelle ne remplit pas tout le cadre. Avec une gouttière,
   ce liseré devient le bord franc d'un panneau posé, et non un défaut de
   collage. La gouttière est reprise dans le calcul de largeur (js/essai.js)
   pour que les proportions de l'écran distant restent exactes. */
.poste-corps{background:var(--bg-1)}
.scene{
  position:relative;min-width:0;background:var(--bg-0);
  margin:var(--gouttiere) var(--marge-cote);
  border-radius:var(--r-scene);overflow:hidden;
  box-shadow:0 2px 4px rgba(15,21,36,.05),0 18px 40px -24px var(--shadow-med);
}
.scene iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* MASQUER UNE CONSOLE DEMANDE CETTE LIGNE. `display:block` ci-dessus est une
   règle d'auteur : elle bat le `display:none` que le navigateur applique à
   l'attribut `hidden`. Sans elle, `iframe.hidden = true` ne fait RIEN — les
   deux consoles d'un siège restent empilées, la seconde par-dessus, et les
   onglets semblent ne rien changer. C'est le même piège que `.scene-etat`,
   qui porte déjà sa règle deux lignes plus bas. (Constaté le 10/09/2026.) */
.scene iframe[hidden]{display:none}
.scene-etat{
  position:absolute;inset:0;display:grid;place-items:center;gap:14px;align-content:center;
  background:var(--bg-0);color:var(--muted);font-size:14.5px;text-align:center;padding:24px;z-index:1;
}
.scene-etat[hidden]{display:none}
.rouet{
  width:26px;height:26px;border:2px solid var(--line-strong);border-top-color:var(--emerald);
  border-radius:50%;animation:rouet 1s linear infinite;
}
@keyframes rouet{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .rouet{animation-duration:3s} }

/* ── étroit : une vue à la fois ──────────────────────────────────────────── */
@media (max-width:900px){
  :root{ --guide-w:100%; }
  .poste-titre,.poste-marque{display:none}
  .poste-vues{display:flex}
  .poste-corps{grid-template-columns:1fr;grid-template-rows:1fr}
  .poignee{display:none}
  .guide,.scene{grid-area:1/1}
  body.vue-machine .guide{display:none}
  body:not(.vue-machine) .scene{visibility:hidden}
  body.repli .poste-corps{grid-template-columns:1fr}
  #posteRepli{display:none}
}

/* ── blocs riches du guide ───────────────────────────────────────────────────
   Un guide peut porter des schémas, des captures et des encadrés. Tout est
   construit en nœuds DOM par js/essai.js — rien n'arrive ici en balisage. */

.pas-liste{list-style:none;display:grid;gap:7px;margin:2px 0}
.pas-liste li{position:relative;padding-left:15px;font-size:14px;color:var(--muted);line-height:1.5}
.pas-liste li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
.pas-liste code{font-family:var(--fm);font-size:12.5px;color:var(--text);background:var(--inset-2);padding:1px 5px;border-radius:5px}

/* figures : la vignette est un bouton — le clic ouvre la loupe */
.pas-fig{display:grid;gap:7px}
.pas-fig-voir{
  display:block;width:100%;padding:0;cursor:zoom-in;
  background:var(--bg-0);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.pas-fig-voir:hover{border-color:var(--line-strong)}
.pas-fig-voir img{width:100%;height:auto;display:block}
.pas-fig figcaption{font-size:12.5px;line-height:1.5;color:var(--faint)}
.pas-fig figcaption code{font-family:var(--fm);font-size:11.5px}

/* encadrés : un filet de couleur à gauche, pas de fond criard */
.enc{
  display:grid;gap:5px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--inset);border:1px solid var(--line);border-left:3px solid var(--line-strong);
}
.enc-titre{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.enc p,.enc li{font-size:13.5px;line-height:1.55;color:var(--muted)}
.enc ul{list-style:none;display:grid;gap:4px}
.enc code{font-family:var(--fm);font-size:12.5px;color:var(--text);background:var(--inset-2);padding:1px 5px;border-radius:5px}

/* Palette tenue : le neutre par défaut, UN accent pour ce qu'il faut retenir,
   le rouge réservé à ce qui peut vraiment mal tourner. Un support de cours
   n'est pas un tableau de bord — quatre couleurs d'encadré fatiguaient l'œil
   et diluaient l'avertissement, qui doit rester le seul signal fort.

   Amendement du 05/09/2026 : la règle tient, mais elle avait été appliquée
   jusqu'au gris intégral. La couleur revient là où elle porte une INFORMATION
   — l'en-tête d'un tableau, le titre d'une astuce, le numéro d'une étape de
   flux — et nulle part en décoration. L'alerte reste seule en rouge. */
.enc-note{border-left-color:var(--cyan)}
.enc-note .enc-titre{color:var(--cyan)}
.enc-clavier{border-left-color:var(--gold)}
.enc-clavier .enc-titre{color:var(--gold)}
.enc-clavier li{font-family:var(--fm);font-size:12.5px;color:var(--text)}
/* « Ce que vous devez voir » : le pendant de l'alerte. Fond plein et coche en
   tête — c'est le repère qu'on cherche des yeux après avoir collé une
   commande, et il doit se trouver sans lire. */
.enc-attendu{
  background:var(--emerald-soft);border-color:var(--emerald-line);border-left-color:var(--emerald);
}
.enc-attendu .enc-titre{color:var(--emerald)}
.enc-attendu .enc-titre::before{content:"✓ "}
.enc-attendu p,.enc-attendu li{color:var(--text)}

/* « À retenir » ferme l'étape. Ce n'est pas une boîte de plus : c'est la
   phrase qu'on emporte. Sans fond, en plus grand, tenue par un filet épais —
   elle se lit comme une citation, pas comme un encadré. */
.enc-cle{
  background:transparent;border-color:transparent;border-left:3px solid var(--emerald);
  border-radius:0;padding:4px 0 4px 14px;
}
.enc-cle .enc-titre{color:var(--emerald)}
.enc-cle p,.enc-cle li{color:var(--text);font-size:15px;line-height:1.6}
.enc-alerte{border-left-color:var(--warn)}
.enc-alerte .enc-titre{color:var(--warn)}
.enc-alerte p,.enc-alerte li{color:var(--text)}

/* ── loupe ───────────────────────────────────────────────────────────────────
   Les schémas font 3360 px de large : dans un volet de 400, ils ne sont qu'une
   vignette. Le clic les ouvre par-dessus toute la page. */
.loupe{
  position:fixed;inset:0;z-index:50;display:none;place-content:center;justify-items:center;gap:14px;
  padding:28px;background:var(--overlay);cursor:zoom-out;
}
.loupe.on{display:grid}
.loupe p{max-width:76ch;text-align:center;font-size:14px;color:var(--muted)}

/* ── repères sur capture ─────────────────────────────────────────────────────
   Un cadre et une étiquette posés en pourcentage PAR-DESSUS l'image, jamais
   gravés dans le PNG : nets à toutes les tailles, fidèles au thème, et
   valables aussi bien sur la vignette que dans la loupe. */
.pas-fig-voir,.loupe-cadre{position:relative;display:block}
.repere{
  position:absolute;box-sizing:border-box;pointer-events:none;
  border:2px solid var(--warn);border-radius:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 16px -2px var(--warn);
}
.repere-rond{border-radius:999px}
.repere-lab{
  position:absolute;left:0;bottom:calc(100% + 6px);
  font-family:var(--fb);font-style:normal;font-size:11px;line-height:1;white-space:nowrap;
  color:var(--on-accent);background:var(--warn);
  padding:4px 7px;border-radius:5px;box-shadow:0 2px 8px -2px rgba(0,0,0,.6);
}
.repere-lab.bas{bottom:auto;top:calc(100% + 6px)}
.repere-lab.num{left:26px}
/* En vignette, l'étiquette écraserait l'image : elle n'apparaît qu'en grand.
   Le numéro, lui, reste — c'est lui qui donne l'ordre de lecture. */
.pas-fig-voir .repere-lab{display:none}
/* Le numéro se pose au COIN du cadre, décalé vers l'EXTÉRIEUR : jamais sur le
   texte qu'il désigne, et jamais à cheval sur le trait rouge — posé dessus,
   on ne lisait plus ni le chiffre ni le cadre. Il ne sort pas de l'image pour
   autant : un cadre collé au bord gauche verrait sa pastille rognée.
   Un seul numéro par capture : deux chiffres voisins se chevauchent et ne
   disent plus dans quel ordre lire. */
.repere-n{
  position:absolute;left:-15px;top:-15px;
  display:grid;place-items:center;width:21px;height:21px;
  font-family:var(--fm);font-style:normal;text-decoration:none;font-size:11.5px;line-height:1;
  color:var(--on-accent);background:var(--warn);border-radius:50%;
  box-shadow:0 0 0 2px var(--bg-0);
}
.repere-n.droite{left:auto;right:-15px}
/* La loupe AGRANDIT : une capture recadrée fait 400 px de large, la laisser
   à sa taille naturelle sur un grand écran n'aide personne. */
.loupe-cadre{width:min(92vw,1400px)}
.loupe-cadre img{width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:var(--r-sm);box-shadow:0 30px 80px -30px #000;display:block}
/* Un schéma agrandi doit être PLUS GRAND qu'en place, sinon le clic ne sert à
   rien. Sur une fenêtre étroite, 92vw valait la largeur du volet : on rendait
   le même dessin à la même taille. On lui donne donc au moins sa taille
   naturelle (720 px), quitte à défiler dans le cadre — dans une vue
   d'agrandissement explicite le défilement se voit et se comprend, ce qui
   n'était pas le cas d'un tableau tronqué au fil du texte. */
.loupe-cadre:has(svg){overflow:auto;max-width:96vw}
.loupe-cadre svg{
  width:100%;min-width:720px;height:auto;max-height:86vh;display:block;
  background:var(--bg-1);border-radius:var(--r-sm);padding:16px;box-sizing:border-box;
}
/* « pixelated » n'a de sens qu'à l'AGRANDISSEMENT : il garde des bords francs
   sur du texte. En vignette l'image est RÉDUITE, et il supprime alors le
   lissage — les pixels sont jetés au lieu d'être moyennés, et la capture
   devient une bouillie. Réservé à la loupe. */
.loupe-cadre img.net{image-rendering:pixelated}


/* ── replis, chaînes, tableaux ────────────────────────────────────────────────
   La théorie ne barre pas la route à celui qui veut agir : elle se replie.
   Les chaînes et tableaux remplacent des schémas en image — du texte, net à
   toute taille, lisible dans un volet étroit, et qui suit le thème. */

/* UN REPLI FERMÉ N'EST PAS UNE BOÎTE, C'EST UNE PROPOSITION. Encadré et
   grisé, il ressemblait à un bloc de plus dans une page qui en compte déjà
   beaucoup — donc on le sautait, et le fond qu'il contient était perdu pour
   tout le monde. Fermé, il ne pèse plus qu'une ligne colorée qu'on peut
   prendre ou laisser ; ouvert, il devient le panneau qu'il était.
   Trois tons, parce qu'un repli ne dit pas toujours la même chose : le fond
   (pourquoi ça marche), l'aide (si ça coince), l'ouverture (pour aller plus
   loin). La couleur n'est pas décorative — elle dit lequel des trois on
   ouvre. */
.plus{border-radius:var(--r-sm);border:1px solid transparent}
.plus>summary{
  display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;
  padding:7px 10px;font-size:13.5px;color:var(--cyan);border-radius:var(--r-sm);
}
.plus>summary::-webkit-details-marker{display:none}
.plus>summary::before{
  content:"";width:0;height:0;flex:none;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s ease;
}
.plus[open]>summary::before{transform:rotate(90deg)}
.plus-mot{min-width:0;line-height:1.45}
.plus>summary code{font-family:var(--fm);font-size:.86em;background:var(--inset-2);
  padding:1px 4px;border-radius:4px;color:inherit}
.plus>summary:hover{background:var(--bg-3)}
.plus[open]{background:var(--inset);border-color:var(--line)}
.plus[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--r-sm) var(--r-sm) 0 0}
.plus-corps{display:grid;gap:11px;padding:12px}
.plus-corps p{font-size:14px;line-height:1.6}
.plus-aide>summary{color:var(--gold)}
.plus-loin>summary{color:var(--iris)}
@media (prefers-reduced-motion:reduce){ .plus>summary::before{transition:none} }

.flux{list-style:none;display:grid;gap:0;margin:2px 0}
.flux li{
  display:grid;grid-template-columns:22px 1fr;gap:4px 10px;align-items:baseline;
  padding:8px 0 8px 0;position:relative;
}
.flux li+li{border-top:1px solid var(--line)}
.flux-n{
  grid-row:1/3;align-self:start;display:grid;place-items:center;
  width:22px;height:22px;font-family:var(--fm);font-size:11px;
  color:var(--faint);border:1px solid var(--line-strong);border-radius:50%;
}
.flux b{font-size:14px;font-weight:600;color:var(--text)}
.flux-d{font-size:13px;line-height:1.5;color:var(--muted)}
.flux-d code{font-family:var(--fm);font-size:12px;background:var(--inset-2);padding:1px 5px;border-radius:5px;color:var(--text)}
/* l'étape où l'on intervient : un filet, pas un aplat */
.flux-marque .flux-n{color:var(--on-accent);background:var(--emerald);border-color:var(--emerald)}
.flux-marque b{color:var(--emerald)}

.tab-cadre{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}

/* Le volet du guide se redimensionne : sa largeur ne se déduit pas de celle de
   la fenêtre. On en fait donc un CONTENEUR de requête, et les tableaux se
   replient selon la place réellement disponible. */
#guideListe{container-type:inline-size}

/* Sous 560 px, un tableau ne se lit plus en colonnes : il se coupe au bord.
   Chaque ligne devient un bloc, chaque valeur porte son étiquette de colonne.
   Rien n'est tronqué, et il n'y a plus de défilement horizontal — celui qu'on
   ne remarque pas et qui cache une colonne entière. */
@container (max-width: 560px){
  .tab-cadre{overflow-x:visible}
  .tab, .tab tbody, .tab tr, .tab td{display:block;width:100%}
  .tab thead{display:none}
  .tab tbody tr{padding:10px 12px}
  .tab tbody tr+tr{border-top:1px solid var(--line)}
  .tab tbody tr+tr td{border-top:0}
  .tab td{padding:2px 0;white-space:normal}
  .tab td:first-child{
    font-weight:600;color:var(--text);font-size:13.5px;margin-bottom:4px;white-space:normal;
  }
  .tab td[data-l]:not(:first-child)::before{
    content:attr(data-l) " · ";
    font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan);
  }
}
.tab{width:100%;border-collapse:collapse;font-size:13px}
.tab th{
  text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cyan);padding:8px 11px;border-bottom:1px solid var(--line);background:var(--inset);
}
.tab td{padding:9px 11px;color:var(--muted);line-height:1.5;vertical-align:top}
.tab tbody tr+tr td{border-top:1px solid var(--line)}
/* PAS DE `nowrap` ICI. Un intitulé de première colonne n'est pas toujours une
   étiquette : « Nom d'ouverture de session antérieur à Windows 2000 » tenu sur
   une seule ligne impose au tableau une largeur minimale de 593 px. Entre le
   repli (560 px) et cette largeur, le tableau débordait de son cadre et la
   TROISIÈME COLONNE se retrouvait hors de vue, derrière un défilement
   horizontal qu'on ne remarque pas — la panne que le repli était censé
   supprimer, revenue par la bande d'à côté.
   Le repli posait bien `white-space:normal`, mais cette ligne-ci vient APRÈS
   dans la feuille, à specificité égale : elle le reprenait. Le nowrap
   s'appliquait donc AUSSI en mode replié. Mesuré le 10/09/2026 sur les 209
   tableaux des guides : 10 coupés à 600 px, 7 à 380 px ; zéro sans le nowrap. */
.tab td:first-child{color:var(--text)}
.tab code{font-family:var(--fm);font-size:12px;background:var(--inset-2);padding:1px 5px;border-radius:5px;color:var(--text)}

/* Un geste posé dans le contenu — plus lisible qu'une icône de barre, parce
   qu'il porte son libellé à l'endroit où le guide vient de l'expliquer. */
.pas-action{
  justify-self:start;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fb);font-size:13.5px;color:var(--text);
  background:var(--ghost-bg);border:1px solid var(--line-strong);border-radius:999px;
  padding:9px 16px;cursor:pointer;
}
.pas-action svg{width:15px;height:15px;flex:none}
.pas-action:hover{background:var(--ghost-bg-hover);border-color:var(--text)}
.pas-action[disabled]{opacity:.6;cursor:progress}

/* ── schémas vectoriels ──────────────────────────────────────────────────────
   Même parti que l'Académie : du SVG en ligne plutôt qu'une image. Il reste
   net à toute taille, suit le thème, et se lit dans un volet étroit — ce qu'un
   PNG de 3360 px ne fait pas. */
/* Un schéma n'est pas un paragraphe : il ne se lit pas dans la colonne de
   texte, il se regarde. On lui retire donc son cadre — un contour autour d'un
   dessin qui porte déjà les siens fait deux boîtes pour rien — et on le laisse
   SORTIR de la colonne pour prendre toute la largeur du volet, avec une marge
   de 6 px sur les bords. Le corps d'une mission est décalé de 42 px à gauche
   (la place du numéro d'étape) et de 8 px à droite : c'est ce décalage qu'on
   annule ici, pas une valeur choisie au hasard. */
.schema{
  display:grid;gap:8px;
  margin-left:-10px;margin-right:-6px;
  cursor:zoom-in;
}
.schema svg{display:block;width:100%;height:auto}
.schema figcaption{padding:0 6px}

/* L'agrandissement doit se VOIR : un dessin de 720 px de large rendu dans un
   volet de 450 px a des libellés de 8 px. Le clic l'ouvre en grand — encore
   faut-il savoir qu'il est cliquable. Une mention discrète sous le dessin, et
   un léger relief au survol. */
.schema::after{
  content:"Cliquer pour agrandir";
  justify-self:end;padding:0 6px;
  font-size:11.5px;letter-spacing:.03em;color:var(--cyan);opacity:.75;
}
.schema:hover svg,.schema:focus-visible svg{outline:1px solid var(--cyan);outline-offset:6px;border-radius:var(--r-sm)}
.schema:focus-visible{outline:none}
.schema figcaption{font-size:12.5px;line-height:1.5;color:var(--faint)}
.schema figcaption code{font-family:var(--fm);font-size:11.5px}


/* ── les documents ───────────────────────────────────────────────────────────
   Un panneau discret sous le bouton de la barre. Le participant repart avec
   le guide qu'il vient de suivre — engendré depuis le même JSON que l'écran. */
.docs{
  position:fixed;z-index:40;display:none;width:min(340px,calc(100vw - 24px));
  padding:6px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--chrome-scrolled);backdrop-filter:var(--chrome-blur);
  -webkit-backdrop-filter:var(--chrome-blur);
  box-shadow:var(--glass-shadow-float);
}
.docs.on{display:block}
.docs-item{
  display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;
  gap:1px 11px;padding:10px 11px;border-radius:9px;color:var(--text);text-decoration:none;
}
.docs-ico{grid-row:1/4;align-self:center;width:26px;height:26px;color:var(--muted)}
.docs-item:hover .docs-ico{color:var(--emerald)}
.docs-item:hover{background:var(--bg-3)}
.docs-item b{font-size:13.5px;font-weight:600}
.docs-d{font-size:12px;line-height:1.45;color:var(--muted)}
.docs-m{font-family:var(--fm);font-style:normal;font-size:10.5px;color:var(--faint);letter-spacing:.03em}
/* Le volet dont on liste les documents — un repère, pas un titre : discret,
   il confirme que le panneau ne montre que le volet qu'on a sous les yeux. */
.docs-tete{padding:7px 11px 5px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--faint)}
.docs-vide{margin:0;padding:11px 12px 13px;font-size:12.5px;color:var(--muted)}

/* LE GUICHET REPREND CE PANNEAU TEL QUEL, et il n'y ajoute que ces règles.
   Aucune de ses lignes n'est un lien : le fichier ne passe par aucune adresse
   (cf. js/essai.js, `telecharger`), la ligne est donc une COMMANDE — un
   <button>, qui n'hérite ni sa police, ni son alignement, ni son fond. Sans la
   première règle, la même grille rendrait un libellé centré en 13,33 px
   système sur fond gris, au milieu de lignes de documents — la ressemblance
   est tout l'intérêt du réemploi.
   `[disabled]` tient les quelques secondes de la lecture : le curseur le dit
   sans une phrase à l'écran, et la ligne ne s'allume plus sous la souris —
   un contrôle désarmé qui réagit au survol se lit comme cliquable, et on
   reclique. */
button.docs-item{font:inherit;width:100%;border:0;background:none;text-align:left;cursor:pointer}
button.docs-item[disabled]{opacity:.6;cursor:progress}
button.docs-item[disabled]:hover{background:none}
button.docs-item[disabled]:hover .docs-ico{color:var(--muted)}

/* ── constat du travail ─────────────────────────────────────────────────────
   Trois états, et AUCUN rouge. Pendant la moitié du TP la machine ne peut
   rien nous dire : afficher un échec serait mentir sur ce qu'on sait. Le
   défaut est neutre, le constat est vert, l'impossible est gris. */
.pas-verif{
  display:grid;gap:6px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--line);
}
.pas-verif .verif-btn{
  justify-self:start;font:inherit;font-size:12.5px;padding:5px 11px;
  color:var(--text);background:var(--bg-0);border:1px solid var(--line-strong);
  border-radius:999px;cursor:pointer;
}
.pas-verif .verif-btn:hover{border-color:var(--emerald)}
.pas-verif .verif-btn[disabled]{opacity:.55;cursor:default}
.verif-etat{margin:0;font-size:12.5px;line-height:1.5;color:var(--faint)}

.pas-verif.ok{background:var(--emerald-soft);border-color:var(--emerald-line)}
.pas-verif.ok .verif-etat{color:var(--emerald);font-weight:600}
.pas-verif.ok .verif-etat::before{content:'✓ ';font-weight:700}
.pas-verif.gris{opacity:.72}

/* Un écart d'exécution : signalé, jamais sanctionné. Bord marqué, fond
   inchangé — l'œil s'y arrête sans que la page crie. */
.pas-verif.ecart{border-color:var(--warn);border-left-width:3px}
.pas-verif.ecart .verif-etat{color:var(--text)}
.pas-verif.ok.ecart .verif-etat::before{content:'✓ '}

/* ── le fil des volets ──────────────────────────────────────────────────────
   Le programme du module, navigable. Il n'existe que s'il y a plusieurs
   volets : un guide plat n'en a qu'un, et sa page reste exactement celle
   d'avant — c'est la condition de rétrocompatibilité, pas une intention. */
.volets{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;margin:0}
.volets .volet{
  flex:none;text-align:left;font:inherit;cursor:pointer;max-width:180px;
  padding:7px 11px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--line);color:var(--faint);
}
/* LE TITRE D'UN VOLET EST UNE PHRASE, PAS UNE ÉTIQUETTE. « Volet 1 — Durcir le
   système avant de le mettre en service » tirait la pastille sur toute la
   largeur du guide et poussait les volets suivants hors de vue : le fil ne
   servait plus à se repérer, il fallait le faire défiler pour savoir ce qu'il
   contenait. On borne donc la pastille et on coupe à l'ellipse ; le titre
   entier reste disponible en infobulle. */
.volets .volet b{display:block;font-size:12.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.volets .volet:hover{border-color:var(--line-strong)}
.volets .volet.on{background:var(--emerald-soft);border-color:var(--emerald-line)}
.volets .volet.on b{color:var(--emerald)}

/* ── les questions de fin de mission ────────────────────────────────────────
   Sobre et institutionnel : pas de vert de récompense ni de rouge de sanction
   pleine page. Le participant n'est pas noté, il est renseigné. La bonne
   réponse est marquée MÊME quand elle n'a pas été choisie — sans quoi celui
   qui s'est trompé repart sans savoir laquelle était la bonne. */
.qcm { margin: 18px 0 4px; }

.qcm-q {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px 10px;
  margin: 0 0 12px;
}
.qcm-q legend {
  padding: 0 6px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.qcm-choix {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  line-height: 1.45;
}
.qcm-choix:hover { background: var(--bg-2); }
.qcm-choix input { margin: 0; flex: none; accent-color: var(--emerald); }
.qcm-choix input:disabled { cursor: default; }
.qcm-choix:has(input:disabled) { cursor: default; }
.qcm-choix:has(input:disabled):hover { background: none; }

/* Marquage par un filet à gauche plutôt que par un aplat : lisible dans les
   deux thèmes, et discret sur un support qu'on projette. */
.qcm-bonne { box-shadow: inset 3px 0 0 var(--emerald); background: var(--emerald-soft); }
.qcm-juste { font-weight: 600; }

/* Une réponse écartée doit se voir écartée, sans crier : le filet passe en
   couleur d'alerte, le libellé s'efface, et la ligne cesse de réagir au
   survol — trois signaux qui disent « pas celle-ci, cherchez ailleurs »
   pendant que les autres choix restent vivants. */
.qcm-faux {
  box-shadow: inset 3px 0 0 var(--warn);
  background: var(--warn-soft, transparent);
  color: var(--muted);
  opacity: .72;
}
.qcm-faux:hover { background: var(--warn-soft, transparent); }

.qcm-relance {
  margin: 9px 0 0;
  padding: 8px 11px;
  border-left: 2px solid var(--warn);
  background: var(--bg-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .93em;
  line-height: 1.5;
  color: var(--warn);
}

.qcm-pourquoi {
  margin: 9px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--line-strong);
  background: var(--bg-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .93em;
  line-height: 1.55;
  color: var(--muted);
}

/* Intertitre dans une mission longue. Discret : il structure, il n'annonce
   pas. Le poids vient de la graisse et de l'espace au-dessus, pas d'un trait
   ni d'une couleur — on est sur un support institutionnel. */
.pas-titre-3 {
  margin: 22px 0 8px;
  padding-left: 10px;
  font-size: 1.02em;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text);
  border-left: 3px solid var(--emerald);
}
.pas-corps > .pas-titre-3:first-child { margin-top: 4px; }

/* Les schémas venus d'Universe portent désormais les jetons de la maison :
   leurs noms sont RENOMMÉS dans le SVG à l'extraction (`schemas-universe.py`),
   pas traduits par un pont CSS ici. Un seul mécanisme, donc rien à faire
   diverger. Ne reste que la mise en page. */
.schema svg { width: 100%; height: auto; display: block; }

/* ── la carte d'ouverture et les gestes ──────────────────────────────────────
   Deux pièces ajoutées le 10/09/2026, pour une raison mesurée sur la page
   rendue : une étape d'atelier était un mur de paragraphes dans lequel les
   commandes flottaient. On ne savait ni où l'étape allait, ni combien de
   gestes elle demandait, ni si l'écran répondait bien. Ces deux pièces
   répondent aux deux premières questions ; l'encadré « Ce que vous devez
   voir » répond à la troisième. */

/* La carte d'ouverture : deux à quatre lignes, la première chose qu'on lit. */
.bref{
  display:grid;gap:8px;padding:13px 15px;border-radius:var(--r);
  background:var(--bg-1);border:1px solid var(--line);
}
.pas.on .bref{background:var(--bg-0)}
.bref-duree{
  justify-self:start;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;
  color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:2px 9px;
}
.bref ul{list-style:none;display:grid;gap:7px}
.bref li{
  position:relative;padding-left:17px;font-size:14.5px;line-height:1.5;color:var(--text);
}
.bref li::before{
  content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--emerald);
}
.bref code{font-family:var(--fm);font-size:12.5px;background:var(--inset-2);padding:1px 5px;border-radius:5px}

/* UN GESTE. Le numéro tient le rail, le rail tient tout ce qui appartient au
   geste : la commande, la capture, ce qu'on doit voir. Les guides écrivaient
   ces numéros à la main dans des intertitres — rien ne rattachait alors la
   commande au geste, et insérer une étape obligeait à renuméroter la suite. */
.geste{display:grid;gap:0;position:relative}
.geste-tete{
  display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:baseline;
  font-family:var(--fd);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--text);
  margin:2px 0 0;
}
.geste-n{
  display:grid;place-items:center;width:24px;height:24px;align-self:start;
  font-family:var(--fm);font-size:11.5px;font-weight:500;line-height:1;
  color:var(--emerald);background:var(--emerald-soft);
  border:1px solid var(--emerald-line);border-radius:50%;
}
.geste-corps{display:grid;gap:10px;padding:9px 0 4px 35px;position:relative}
/* Le rail descend du numéro jusqu'au bas du geste : c'est lui qui dit que ces
   trois blocs-là ne font qu'une seule action. */
.geste-corps::before{
  content:"";position:absolute;left:11px;top:0;bottom:6px;width:1px;background:var(--line);
}
.geste-corps>.pas-titre-3{margin-top:10px}
/* Un schéma dans un geste est déjà décalé de 35 px : on ne lui applique pas
   deux fois la sortie de colonne. */
.geste-corps .schema{margin-left:-31px}

/* Sur un volet étroit, 35 px d'indentation par geste rognent la colonne de
   code. Le rail reste, l'indentation tombe. */
@container (max-width: 480px){
  .geste-corps{padding-left:22px}
  .geste-corps::before{left:11px}
  .geste-corps .schema{margin-left:-18px}
}

/* Une ligne de commande qui déborde se décale, elle ne se colle pas sous la
   première colonne : sans ce retrait, un tableau de hachage PowerShell aligné
   sur trente-cinq colonnes se lit comme deux commandes distinctes. Chaque
   ligne est un bloc (cf. js/essai.js, bloc « cmd ») — d'où la hauteur
   minimale, qui rend aux lignes vides leur respiration. */
.pas-bloc pre .cmd-l{display:block;min-height:1.75em;padding-left:1.9em;text-indent:-1.9em}

/* Le bouton de fin d'étape porte le titre de ce qui vient : sur une seule
   ligne il deviendrait trop large pour un volet étroit, on l'empile donc et on
   coupe à l'ellipse. Le mot d'action reste seul en tête — c'est lui qu'on lit. */
.pas-suite{display:grid;gap:1px;text-align:left;max-width:100%}
.pas-suite b{font-weight:600}
.pas-suite i{
  font-style:normal;font-size:11.5px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pas-suite:hover i{color:var(--muted)}

/* ── ce qui empêche le guide de défiler de côté ──────────────────────────────
   Un élément de GRILLE refuse par défaut de descendre sous la largeur de son
   propre contenu (`min-width:auto`). Il suffit donc d'un mot insécable —
   `_ldap._tcp.dc._msdcs.emotions.lan`, `-DelegatedAdministratorAccountName` —
   pour que la COLONNE ENTIÈRE s'élargisse : le tableau, la question et tout le
   reste du corps de l'étape se décalent avec elle, et une barre de défilement
   horizontale apparaît sous un volet qui n'en a pas besoin. Mesuré le
   10/09/2026 : colonne à 396 px, contenu minimal réclamé 437.
   Deux lignes suffisent : les colonnes ont le droit de se serrer, et les mots
   trop longs celui de se couper — seulement quand ils ne tiennent pas. */
.pas-corps,.geste-corps,.plus-corps,.bref,.bref ul,.pas-liste,.enc,.enc ul,.flux,.pas-fig,.schema,.qcm{
  grid-template-columns:minmax(0,1fr);
}
.pas-corps code,.tab td,.tab th,.qcm-q legend,.qcm-choix span,.bref li,.flux-d{
  overflow-wrap:anywhere;
}

/* ── L'ASSEMBLAGE : un seul élément au centre, puis les autres ───────────────
   La loi est dans js/essai.js ; ici, seulement de quoi la voir. Un guide qui
   ne déclare pas « accueil » ne rencontre jamais ces règles : rien ne porte
   « pose-attente », et la page reste exactement celle des séances en cours. */
.accueil{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(680px 320px at 20% 0%,var(--halo-1),transparent 62%),
    radial-gradient(620px 300px at 80% 8%,var(--halo-2),transparent 64%),
    var(--bg-0);
}
.accueil-carte{
  width:min(470px,100%);display:grid;gap:15px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 32px 24px;box-shadow:0 24px 60px -30px var(--shadow-med);
}
.accueil-titre{font-family:var(--fd);font-size:24px;line-height:1.22;font-weight:600;text-wrap:balance}
.accueil-carte p{color:var(--muted);font-size:15px;line-height:1.6}
.accueil-carte p b{color:var(--text);font-weight:600}
.accueil-id{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--fm);font-size:15px;color:var(--text);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 13px;
}
.accueil-id b{
  font-family:var(--fb);font-size:11px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto;min-width:6.5em;
}
.accueil-go{margin-top:5px}
/* Présent dès la première seconde, et discret : ce n'est pas une porte de
   secours, c'est un droit. Il ne demande rien et ne prévient de rien. */
.accueil-tout{
  justify-self:center;background:none;border:0;cursor:pointer;padding:8px 6px 2px;
  font-family:var(--fb);font-size:13px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.accueil-tout:hover{color:var(--text)}

/* Pas encore posé. « display:none » et non « visibility » : un élément gardé
   ne doit pas garder sa place — sinon la mise en page raconte ce qui manque. */
.pose-attente{display:none !important}

.arrive{animation:arrive .6s ease-out both}
@keyframes arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Le guide arrive dans la largeur : il pousse la scène, il ne la recouvre pas. */
.guide.arrive{animation:arrive-guide .5s ease-out both}
@keyframes arrive-guide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .arrive,.guide.arrive{animation:none}
}

/* Annoncé à qui n'a pas l'écran sous les yeux, invisible pour les autres. */
.sr-seul{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* Bascule de thème (sombre/clair) dans la barre de séance. Le bouton est un
   `poste-ico` ordinaire ; theme.js le câble par son id. Les deux icônes se
   relaient selon --icon-sun / --icon-moon (posés par thème dans tokens.css). */
#themeToggle .ic-sun{display:var(--icon-sun)}
#themeToggle .ic-moon{display:var(--icon-moon)}

/* Le guide n'a pas pu être chargé. On le DIT, à la place du guide, plutôt que
   de laisser un panneau vide : un écran blanc n'apprend rien et fait croire à
   une panne de la machine, qui elle fonctionne. */
.guide-panne{
  display:block;padding:22px 20px;margin:0;
  font-size:15px;line-height:1.6;color:var(--warn);
  background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r-sm);
}
.guide-panne b{color:var(--text)}