/* Ce qu'un chapitre contient : sections, code, encadrés, tâches, tableaux.
   Découpé de l'ancien engine.css, qui faisait 774 lignes pour six sujets. La
   coquille charge les quatre feuilles directement, pas par @import : un
   @import se télécharge APRÈS celle qui le contient, donc en série — c'est
   exactement la cascade qu'on a passé du temps à supprimer ailleurs. */

/* ============================ SECTION ============================ */
/* UN CHAPITRE SE LIT EN TAILLE DE DOCUMENT (.9375rem, échelle validée) : « on est pas bigleux » (10 octobre 2026) — tout le reste est en em et suit. */
section.module{scroll-margin-top:20px;padding-bottom:16px;font-size:.9375rem}
/* Au pied du chapitre (`show.js`) : niveau, durée, tâches se lisent au besoin, pas avant le texte. */
.mod-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:24px 0 4px}
.mod-meta .pill{padding:1px 9px;font-weight:500}
.mod-meta .mod-bar{height:4px;max-width:140px}
.pill{font-size:max(.78em,var(--fs-floor));padding:4px 13px;border-radius:99px;border:1px solid var(--line);
  color:var(--fg2);background:var(--bg2);font-weight:600}
.pill.lvl1{border-color:var(--green);color:var(--green)}
.pill.lvl2{border-color:var(--amber);color:var(--amber)}
.pill.lvl3{border-color:var(--red);color:var(--red)}
.pill.time{border-color:var(--purple);color:var(--purple)}
.mod-bar{height:7px;background:var(--bg3);border-radius:99px;overflow:hidden;flex:1;min-width:90px;max-width:220px}
.mod-bar>i{display:block;height:100%;width:0;background:var(--green);transition:width .35s}

/* ============================ CODE ============================ */
.code{position:relative;margin:20px 0;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
/* flex-wrap : l'en-tête porte désormais jusqu'à cinq éléments (numéro,
   étiquette de lieu, note, « lancée », copier). Sans passage à la ligne, le
   dernier sortait du bloc — et « .code{overflow:hidden} » le coupait purement
   et simplement au lieu de le laisser déborder. */
.code-h{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;padding:6px 12px;
  flex-wrap:wrap;background:var(--bg3);border-bottom:1px solid var(--line);font-size:max(.78em,var(--fs-floor));
  color:var(--fg3);font-family:var(--mono)}
.code-h .where{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.code-h .actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.tag{font-size:max(.86em,var(--fs-floor));font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.5px;
  text-transform:uppercase;white-space:nowrap}
/* Sur petit écran, une étiquette longue (« POSTE HÔTE ou vm-01 — installe là
   où vous tapez ») doit pouvoir se replier plutôt que forcer la largeur. */
@media(max-width:640px){.tag{white-space:normal}}
.tag.m{background:rgba(76,141,255,.2);color:var(--blue2);border:1px solid rgba(76,141,255,.45)}
.tag.w{background:rgba(255,176,46,.16);color:var(--amber);border:1px solid rgba(255,176,46,.45)}
.tag.b{background:rgba(183,154,255,.16);color:var(--purple);border:1px solid rgba(183,154,255,.45)}
.tag.h{background:rgba(61,220,132,.16);color:var(--green);border:1px solid rgba(61,220,132,.45)}
.copy{background:transparent;border:1px solid var(--line);color:var(--fg2);font-size:max(.95em,var(--fs-floor));
  padding:4px 12px;border-radius:6px;cursor:pointer;font-family:var(--mono);white-space:nowrap}
.copy:hover{background:var(--bg);color:var(--fg);border-color:var(--blue)}
.copy.ok{color:var(--green);border-color:var(--green)}
pre{padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:.88em;
  line-height:1.72;color:var(--fg);tab-size:2}
/* ═════════════ LA COLORATION SYNTAXIQUE ═════════════
   Ces quatre classes existaient depuis le découpage de la feuille sans que
   rien ne les pose : tout sortait gris. C'est `js/read/render/code/` qui les
   écrit maintenant, une grammaire par langage.

   Six couleurs, toutes en JETONS : un thème neuf colorie le code sans rien
   déclarer, et `contrast.js` mesure chacune sur le fond d'un bloc. */
pre .c{color:var(--fg3);font-style:italic}   /* commentaire */
pre .k{color:var(--purple)}                  /* mot-clé, balise, directive */
pre .s{color:var(--green)}                   /* chaîne */
pre .o{color:var(--amber)}                   /* option, ponctuation */
pre .n{color:var(--cyan)}                    /* nombre */
pre .v{color:var(--blue2)}                   /* variable, clé, attribut */

/* ============================ INFOBULLE ============================
   `?[terme](l'explication)` — la même forme qu'une image, une lettre de
   différence.

   LA BULLE EST DANS LE DOCUMENT, pas dans un attribut « title » : une
   infobulle native attend une seconde, ne paraît pas au doigt, et ne prend
   pas la couleur du thème. Elle est donc masquée VISUELLEMENT — découpée à un
   pixel — et non retirée : un lecteur d'écran la lit à la suite du terme,
   comme une parenthèse, et l'impression garde l'explication en clair.

   `:focus` autant que `:hover` : c'est ce qui la rend atteignable au clavier,
   et au doigt du même geste — un appui donne le focus. */
.tip{position:relative;border-bottom:1px dotted var(--fg3);cursor:help}
.tip:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.tip-b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.tip:hover>.tip-b,.tip:focus>.tip-b{
  width:max-content;max-width:min(280px,70vw);height:auto;overflow:visible;clip-path:none;
  white-space:normal;
  /* Au-dessus du terme et centrée dessus. « bottom » plutôt que « top » : la
     bulle grandit vers le haut quand son texte tient sur trois lignes, et ne
     pousse jamais la ligne de prose qu'elle explique. */
  left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);z-index:40;
  background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;font-size:.86em;line-height:1.5;font-weight:400;text-align:left;
  box-shadow:0 8px 26px rgba(0,0,0,.22)}
/* La pointe : un CARRÉ TOURNÉ, pas un triangle de bordures. Le triangle
   classique n'a qu'une couleur — il fallait choisir entre le fond de la bulle
   et son filet, et le filet gris clair sur fond clair ne se voyait pas du
   tout. Tourné de 45°, le carré porte les deux : le fond de la bulle, et le
   filet sur ses deux côtés exposés. Il prend les jetons du thème, donc il
   suit les dix palettes sans rien redéclarer. */
.tip:hover>.tip-b::after,.tip:focus>.tip-b::after{
  content:"";position:absolute;top:100%;left:50%;width:10px;height:10px;
  margin-top:-5px;transform:translateX(-50%) rotate(45deg);
  background:var(--bg2);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
@media print{
  /* Une infobulle survolée ne s'imprime pas : sur le papier, l'explication
     revient EN CLAIR, entre parenthèses, à la suite du terme. */
  .tip{border-bottom:none}
  .tip-b{position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    white-space:normal;color:var(--fg2)}
  .tip-b::before{content:" ("}
  .tip-b::after{content:")"}
}

/* ============================ ERREURS DU MOTEUR ============================ */
/* Une page introuvable ou une syntaxe refusée : le message du moteur, pas un encadré d'auteur. */
.fault{border-radius:var(--radius);padding:16px 20px;margin:22px 0;border:1px solid var(--line);
  background:var(--bg2);border-left:5px solid var(--red)}
.fault-t{font-weight:750;font-size:.87em;text-transform:uppercase;letter-spacing:.7px;
  margin-bottom:7px;color:var(--red)}
.fault p{margin:0}

/* L'explication passe AU-DESSUS de la commande, et hors du <code> : collée en
   fin de ligne, elle partait au presse-papier avec la commande. Elle n'est pas
   cliquable, donc jamais copiée par mégarde. */

/* ---- clic-pour-copier : tout bloc de code et toute ligne de commande ---- */
.copyable{cursor:pointer;position:relative;transition:background .12s,box-shadow .12s}
/* Les blocs ne sont plus cliquables d'un seul tenant : chaque ligne l'est
   individuellement (voir .code pre .l). Seules les commandes des encadrés
   gardent la copie d'un coup. */
/* Le survol vaut pour TOUT `code` cliquable, plus pour trois encarts nommés :
   la règle suivait le sélecteur de blocks.js, qui les vise tous maintenant. */
code.copyable:hover{background:rgba(76,141,255,.18);
  box-shadow:inset 0 0 0 1px rgba(76,141,255,.5)}
.copyable.copied{box-shadow:inset 0 0 0 1px var(--green)!important;
  background:rgba(61,220,132,.14)!important}
/* Bulle de confirmation : en position:fixed, sinon un parent en overflow:auto
   (les blocs .code et .tw le sont) la rogne au lieu de l'afficher. */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--bg3);color:var(--fg);border:1px solid var(--green);border-radius:8px;
  padding:9px 16px;font-size:.92em;font-family:var(--mono);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:calc(100vw - 110px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- reprise : barre de rappel + surlignage de la tâche visée ---- */
.code.target{border-left-color:var(--blue);box-shadow:0 0 0 2px rgba(76,141,255,.45)}

/* ---- commandes validables : une case à cocher par bloc exécutable ---- */
.btn.active{border-color:var(--green);color:var(--green)}
/* Trois familles dans la barre : affichage, progression, sauvegarde. Le trait
   les sépare — neuf boutons alignés sans respiration se lisaient comme une
   liste indifférenciée, où « Réinitialiser » voisinait « Avancement ». */
.toolbar .sep{width:1px;align-self:stretch;background:var(--line);margin:0 3px}
@media(max-width:640px){.toolbar .sep{display:none}}
/* Seul bouton destructeur de la page : il doit se voir comme tel. */
.btn.danger{color:var(--red);border-color:rgba(192,38,38,.4)}
.btn.danger:hover{border-color:var(--red);background:rgba(192,38,38,.1)}
.code-h .done{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  font-size:.86em;color:var(--fg3);white-space:nowrap}
.code-h .done:hover{color:var(--fg2)}
.code-h .done input{appearance:none;width:20px;height:20px;flex:0 0 20px;margin:0;position:relative;
  border:2px solid var(--blue);border-radius:5px;background:rgba(76,141,255,.16);cursor:pointer}
.code-h .done input:hover{border-color:var(--blue2);background:rgba(76,141,255,.32)}
.code-h .done input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.code-h .done input:checked{background:var(--green);border-color:var(--green)}
.code-h .done input:checked::after{content:'';position:absolute;left:6px;top:1.5px;
  width:4px;height:10px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.code.ran{border-left:3px solid var(--green)}
.code.ran pre{opacity:.62}
.code.ran:hover pre{opacity:1}
.code.ran .done{color:var(--green)}

/* ---- bouton de repli du menu ---- */
/* DANS LA RANGÉE DU NOM, à côté de « + Wiki » : posé en absolu au coin, il
   flottait 3 px plus haut et 6 px plus petit que lui. Même hauteur, même
   centre, et une CROIX bien lisible plutôt qu'une flèche de 15 px dans un
   bouton de 28 — « croix plutôt, c'est pas mal » (20 septembre 2026). */
#collapse{flex:0 0 auto;background:var(--bg3);border:1px solid var(--line);
  color:var(--red);border-radius:8px;min-width:34px;height:34px;cursor:pointer;
  font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center}
/* ROUGE, comme tout ce qui ferme (20 septembre 2026) : en gris elle se lisait
   comme un troisième bouton de la rangée. */
#collapse:hover{border-color:var(--red);color:var(--red);
  background:color-mix(in srgb,var(--red) 12%,var(--bg3))}
.side-head{position:relative}
@media(max-width:1000px){#collapse{display:none}}

/* ---- numéro de commande, dans le même esprit que « TÂCHE 0b.3 » ---- */
/* LE NUMÉRO EST LE TITRE DU BLOC, la machine son précisé : « le cmd devrait être plus gros » (10 octobre 2026). */
/* Au plancher, la machine un cran dessous (UI.md règle 3, l'élément secondaire) : « on est pas bigleux » (10 octobre 2026). */
.code-h .num{font-family:var(--mono);font-size:var(--fs-floor);font-weight:700;color:var(--purple);
  background:rgba(183,154,255,.16);border:1px solid rgba(183,154,255,.4);
  padding:1px 7px;border-radius:6px;white-space:nowrap}
/* Sous le numéro, la machine se dit telle qu'écrite : en capitales espacées et en gras, elle criait plus fort que lui. */
.code-h .num + .tag{font-size:.75rem;font-weight:600;padding:1px 7px;letter-spacing:0;text-transform:none}

/* ---- copie ligne par ligne ---- */

/* LE CADRE D'UNE LIGNE CLIQUABLE RESPIRE — SANS DÉPLACER LA LIGNE.
   Le retrait vertical valait zéro : au survol comme après une copie, le liseré
   tombait à quatre pixels des glyphes, assez pour se lire comme collé au
   texte. Il est rendu par un ANNEAU peint (`box-shadow` à quatre pixels
   d'étalement, de la couleur du fond), et non par du `padding` : le padding
   grandit la boîte, et la marge négative censée le compenser FUSIONNE avec
   celle de la ligne voisine — deux fois −4 px n'en font que −4, et le pas des
   lignes passait de 24,5 à 28,5 px. Une ombre ne prend pas de place. */
.code pre .l{display:block;border-radius:5px;padding:0 9px;margin:0 -9px;
  cursor:pointer;transition:background .1s}
.code pre .l:hover{background:rgba(76,141,255,.16);
  box-shadow:inset 2px 0 0 var(--blue),0 0 0 4px rgba(76,141,255,.16)}
/* Une ligne vide n'a plus de « \n » littéral pour lui donner de la hauteur :
   sans cette espace de largeur nulle, les respirations d'un bloc
   disparaîtraient et tout se retrouverait collé. */
.code pre .l:empty::before{content:"\200B"}
.code pre .l.empty{cursor:default}
.code pre .l.empty:hover{background:transparent;box-shadow:none}
.code pre .l.copied{background:rgba(61,220,132,.2);
  box-shadow:inset 2px 0 0 var(--green),0 0 0 4px rgba(61,220,132,.2)}
/* Bloc « fichier » : le survol éclaire TOUT, pour annoncer que le clic prendra
   tout. Un surlignage ligne à ligne promettrait ici l'inverse de ce qui se
   passe — un manifeste tronqué ne sert à rien. */
pre.whole .l{cursor:pointer}
pre.whole:hover .l{background:rgba(76,141,255,.13)}
pre.whole:hover{box-shadow:inset 2px 0 0 var(--blue)}

/* ---- notes personnelles ---- */
.notebtn{background:transparent;border:1px solid var(--line);color:var(--fg3);border-radius:6px;
  padding:2px 9px;font-size:max(.86em,var(--fs-floor));cursor:pointer;font-family:inherit;white-space:nowrap}
.notebtn:hover{border-color:var(--amber);color:var(--fg2)}
.notebtn.full{border-color:var(--amber);color:var(--amber)}
.note-zone{display:none;margin-top:10px}
.note-zone.opened{display:block}
.note-zone textarea{width:100%;min-height:74px;resize:vertical;background:var(--bg3);color:var(--fg);
  border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px;padding:9px 12px;
  font-family:var(--mono);font-size:.92em;line-height:1.55}
.note-zone textarea:focus{outline:none;border-color:var(--amber)}

.code .note-zone{margin:0 14px 12px}

#content td code,#content th code{white-space:pre-wrap;overflow-wrap:anywhere}

/* ============================ TABLE ============================ */
/* UNE SEULE FORME DE TABLEAU, quel que soit le bloc qui l'a produit — markdown, `what`, `keys`, volet de valeurs :
   « fais que les tableaux soient toujours uniformes et de la même manière partout » (25 septembre 2026). */
.tw{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:var(--radius)}
/* HORS DE L'ÉCRAN, NI MISE EN PAGE NI PEINTURE : tableau et code coupent déjà ce qui déborde, rien ne change à l'œil. */
.module .tw,.module pre{content-visibility:auto;contain-intrinsic-size:auto 240px}
table{border-collapse:collapse;width:100%;font-size:.94em}
th{background:var(--bg3);text-align:left;padding:12px 16px;font-size:max(.82em,var(--fs-floor));text-transform:uppercase;
  letter-spacing:.7px;color:var(--fg2);border-bottom:2px solid var(--line);font-weight:700}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg3)}
td code{white-space:nowrap}
/* La première colonne est l'intitulé de la ligne : gris semi-gras, et 38 % quand il n'y a qu'une valeur en face. */
#content td:first-child{color:var(--fg2);font-weight:600}
#content table:not(:has(td:nth-child(3))) td:first-child{width:38%}
/* AU TÉLÉPHONE, UN TABLEAU S'EMPILE : une ligne = un bloc, l'intitulé en tête, chaque valeur précédée du nom
   de sa colonne (`data-label`) — rien ne glisse de côté (UI.md règle 46). Mesuré sur la largeur du tableau,
   pas de l'écran : un volet d'onglets est plus étroit que la page. À deux colonnes, l'intitulé suffit. Les cartes du catalogue ont leur grille. */
#content .tw:not(.catalog .tw:has(thead)){container-type:inline-size}
@container (max-width:560px){
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tr{display:block;padding:8px 12px}
  tr+tr{border-top:1px solid var(--line)}
  #content td{display:block;width:auto;padding:0;border:none}
  #content td:first-child{font-size:.9em}
  td:empty{display:none}
  table:has(td:nth-child(3)) td:not(:first-child)[data-label]:not([data-label=""])::before{content:attr(data-label) ' ';
    margin-right:6px;font-size:max(.76em,var(--fs-floor));font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--fg3)}
}

/* ═══════════ AU DOIGT : 48 PX, DANS LES DEUX DIMENSIONS ═══════════
   Mesuré à 390 px le 9 septembre 2026, avant correction : « copier » 69 × 24,
   « 📓 Noter » 72 × 19, la case d'une commande 20 × 20, le « ⇤ » du menu
   28 × 28 alors qu'il reste affiché dans le tiroir ouvert. Un chapitre de
   commandes ne se lit pas : il se coche, et c'est justement là que la cible
   était la plus petite. UI.md, règle 4 : la hauteur seule ne suffit pas, un
   doigt vise une SURFACE. */
@media(max-width:1000px),(pointer:coarse){
  .copy,.notebtn{min-height:48px;min-width:48px}
  .code-h .done{min-height:48px}
  .code-h .done input{width:26px;height:26px;flex:0 0 26px}
  .code-h .done input:checked::after{left:8px;top:3px;width:6px;height:13px}
  #collapse{min-width:48px;height:48px;font-size:1.65rem}
}

/* ═══════════ AU TÉLÉPHONE : LES RESPIRATIONS, PAS LE TEXTE ═══════════
   Un chapitre de `example` mesurait 15 238 px à 390 px de large. On resserre
   les marges des encadrés, des blocs de commandes et des tableaux ; les
   tailles de texte et les cibles à 48 px du bloc ci-dessus ne bougent pas. */
@media(max-width:1000px),(pointer:coarse){
  section.module{padding-bottom:20px}
  .code{margin:11px 0}
  /* Le rembourrage de l'en-tête, pas sa hauteur : « Copier » y garde ses
     48 px, et c'est lui qui fixe le plancher du bandeau. */
  .code-h{padding:5px 12px}
  pre{padding:9px 12px}
  .fault{padding:12px 14px;margin:13px 0}
  .tw{margin:13px 0}
  th,td{padding:7px 11px}
}