/* Le socle : remise à zéro, palettes des thèmes, typographie.
   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. */

/* ============================ RESET / BASE ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* `hidden` doit gagner : une règle de mise en page qui pose `display:flex` sur
   la même balise le battrait autrement, et l'élément resterait à l'écran sans
   qu'aucune ligne ne le dise. */
[hidden]{display:none!important}
:root{
  /* LA TAILLE DE BASE, EN REM — et surtout pas en pixels.
     Elle valait `17px`, une valeur ABSOLUE posée sur <body>. Le réglage
     « taille du texte » agit, lui, sur <html> (`font-size: 95%`) : le body
     l'écrasait donc aussitôt, et le curseur ne déplaçait plus rien du tout.
     Mesuré : un paragraphe faisait 17 px à 80 % comme à 140 %. Le menu, la
     page, les boutons — tout est dans <body>, donc tout était figé.
     C'est la VALEUR qui a bougé le 9 septembre 2026, pas l'unité : `1.0625rem`
     rendait 16,15 px de prose et 17,77 px de chapô — « le texte est vraiment
     trop gros, ça prend toute la page ». `1rem` rend 15,2 px au défaut de
     95 %, la taille validée pour la prose d'un document (UI.md, règle 3). */
  --fs:1rem;
  /* LE PLANCHER DU TEXTE À LIRE (UI.md, règle 3). Presque toute la feuille est
     en `em` : baisser --fs fait passer sous 13 px tout ce qui était à .82em
     sans qu'une ligne ait changé. `max(…em, var(--fs-floor))` le retient. */
  --fs-floor:.8125rem;
  /* CE QU'ON ACTIONNE : bouton, onglet, champ, aide, pastille de choix. La
     marche entre le corps et le plancher. Elle n'existait pas, et trente-neuf
     règles de write.css la fabriquaient chacune en PIXELS — 13, 13,5, 14 —
     donc figées : mesuré le 9 septembre 2026, `.dlg-tab` rendait 13,5 px au
     curseur à 80 % comme à 140 %. */
  --fs-ui:.875rem;
  /* LA COLONNE DU MENU N'A QU'UNE ÉCHELLE, ET ELLE EST EN REM. Mesuré le
     9 septembre 2026 : `.nav-t` rendait 12,5 px dans #categories et 13,73 px
     dans #nav, `.nav-em` trois tailles (14,83 · 18,13 · 18,53) et `.cat`
     déclarait 11 px que « #categories button » écrasait à 12,5. Une même classe,
     une même colonne, quatre tailles — et les 12,5 px, écrits en pixels,
     ignoraient le curseur « taille du texte ». Deux jetons, et le menu suit le
     curseur d'un bout à l'autre.
     DEUX RANGS, ET LE SECOND NE PASSE PLUS SOUS L'EXCEPTION QUI L'AUTORISE.
     Le rang d'accompagnement descendait n'importe où : intertitre à .6875rem
     (10,45 px), compte « 3/7 » à .72em de l'entrée (8,89 px), numéro à .85em,
     extrait de recherche à 11,5 PIXELS. UI.md règle 3 ne descend sous le
     plancher qu'à .75rem, et seulement pour l'élément secondaire d'une liste
     dense — ce qu'ils sont tous les quatre. Ils s'y posent donc, et pas plus
     bas. L'entrée, elle, NE MONTE PAS : mesuré à .875rem, le sommaire de
     `steam` perdait deux chapitres par écran à 300 px de menu, et la capture
     ne montrait aucun gain sur le compte — c'est sa couleur et sa chasse fixe
     qui le rendent second, pas ses 92 %. */
  --fs-nav:.8125rem; --fs-nav-sub:.75rem;
  --bg:#0e1420; --bg2:#161e2b; --bg3:#1e2836; --line:#31404f;
  --fg:#eef4fa; --fg2:#b8c8d8; --fg3:#8ea0b2;
  --blue:#4c8dff; --blue2:#7aaeff; --cyan:#35dcf0;
  --green:#3ddc84; --amber:#ffb02e; --red:#ff6b6b; --purple:#b79aff;
  --radius:12px;
  /* CINQ RANGS, CINQ COULEURS, LA MÊME PARTOUT. Le sommaire et le tableau à
     onglets imbriquent jusqu'à cinq niveaux, et rien ne disait plus, passé le
     troisième, à quel parent une ligne appartient — l'indentation seule y
     perd deux pixels par rang. Cinq niveaux, cinq ALIAS — pas un jeton de plus par thème : les
     douze thèmes déclarent déjà six accents contrastés sur leur fond, un
     jeton de plus par thème serait un jeton de plus à tenir juste. `--red`
     reste hors rotation — il dit « mort » ou « danger » ailleurs dans la
     feuille, un rang de sommaire ne doit pas l'évoquer. */
  --depth-1:var(--blue); --depth-2:var(--amber); --depth-3:var(--green); --depth-4:var(--purple);
  --depth-5:var(--cyan);
  --mono:'JetBrains Mono','Fira Code','SF Mono',Consolas,'Liberation Mono',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* ═══════════════════════ THÈMES ═══════════════════════
   Un thème ne définit QUE des couleurs. Aucune règle de mise en page plus bas
   ne nomme une couleur en dur : elles ne parlent qu'en jetons. C'est ce qui
   permet d'ajouter un thème en douze lignes, sans toucher au reste — et c'est
   la seule raison pour laquelle un config.md peut en choisir un.

   Tout thème DOIT définir les 14 jetons ci-dessus : un jeton oublié hérite du
   thème sombre et donne un texte illisible sur fond clair. verif-themes, dans
   .test/repo/style.test.sh, le vérifie. */

html[data-theme="light"]{
  --bg:#f7f9fc; --bg2:#ffffff; --bg3:#eaf0f7; --line:#c9d4e0;
  --fg:#14202e; --fg2:#3c4d5f; --fg3:#5f7386;
  --blue:#1160e0; --blue2:#0d52c4; --cyan:#0b7f92;
  --green:#127a3e; --amber:#96610a; --red:#c02626; --purple:#6d45c9;
  /* LE MENU A SA PROPRE PALETTE, sourde : les accents saturés, mêlés au fond, donnaient un bleu criard (25 septembre 2026). */
  --nav-1:#467a7c; --nav-2:#a8793a; --nav-3:#85607f; --nav-4:#6a8a55; --nav-5:#a26a5f;
  --nav-accent:var(--nav-1); --nav-accent-fg:#2d5c5e; --nav-muted:var(--fg2); --nav-hover-edge:100%;
}
/* Forêt : fond chaud très peu saturé, accents verts. Pour les sujets qui se
   lisent longtemps — le bleu pur fatigue plus vite sur fond clair. */
html[data-theme="forest"]{
  --bg:#f4f1e8; --bg2:#fbf9f3; --bg3:#ebe6d8; --line:#cfc7b0;
  --fg:#20261c; --fg2:#4a5340; --fg3:#6f7a63;
  --blue:#2e6a41; --blue2:#1f4d2e; --cyan:#0e6f6a;
  --green:#377519; --amber:#8a6212; --red:#a63a24; --purple:#6a4a86;
}
/* Papier : sépia, contraste doux, pensé pour l'impression et la lecture au
   calme. C'est le thème le plus proche de ce que sort une imprimante. */
html[data-theme="paper"]{
  --bg:#efe9dd; --bg2:#f9f5ec; --bg3:#e5ddcc; --line:#c8bda6;
  --fg:#26211a; --fg2:#4f463a; --fg3:#736753;
  --blue:#8a5a1f; --blue2:#6d4614; --cyan:#2d6a6a;
  --green:#4a6b25; --amber:#8a6212; --red:#a3382c; --purple:#6b4a7a;
}
/* Nuit : plus sombre et plus froid que le thème par défaut, accents violets.
   Pour lire dans le noir sans halo bleu. */
html[data-theme="night"]{
  --bg:#080a12; --bg2:#0f121d; --bg3:#171b29; --line:#272d40;
  --fg:#e6e8f2; --fg2:#a8adc4; --fg3:#7d8399;
  --blue:#8b7dff; --blue2:#a99cff; --cyan:#48d5c8;
  --green:#4ade80; --amber:#fbbf24; --red:#fb7185; --purple:#c4b5fd;
}
/* Contraste : noir et blanc francs, accents saturés. Pour les écrans en plein
   soleil et les vues qui accrochent mal les nuances. */
html[data-theme="contrast"]{
  --bg:#000000; --bg2:#0d0d0d; --bg3:#1a1a1a; --line:#5a5a5a;
  --fg:#ffffff; --fg2:#e0e0e0; --fg3:#b8b8b8;
  --blue:#5fa8ff; --blue2:#8cc2ff; --cyan:#2fe3f5;
  --green:#4bff9a; --amber:#ffc44d; --red:#ff8080; --purple:#cbb2ff;
}
/* Océan : bleu profond, accents cyan. Le sombre le plus reposant des trois —
   moins contrasté que « contraste », moins violet que « nuit ». */
html[data-theme="ocean"]{
  --bg:#071a24; --bg2:#0d2632; --bg3:#143544; --line:#245061;
  --fg:#e8f5f8; --fg2:#a8c9d4; --fg3:#7ba3b1;
  --blue:#2fb5d9; --blue2:#6fd6f0; --cyan:#4ae0c8;
  --green:#39d98a; --amber:#f5b942; --red:#ff7a7a; --purple:#a99cff;
}
/* Sable : clair et chaud, accents terre cuite. Le pendant lumineux de
   « papier », en plus vif — pour lire de jour sans le blanc franc. */
html[data-theme="sand"]{
  --bg:#faf4ea; --bg2:#fffbf4; --bg3:#f0e6d6; --line:#d8c8ae;
  --fg:#2b2318; --fg2:#584a38; --fg3:#7d6c55;
  --blue:#a2591b; --blue2:#83450f; --cyan:#1f6f6a;
  --green:#4b7a1e; --amber:#8a6212; --red:#b23a26; --purple:#7a4a86;
}
/* Mousse : sombre et vert. « Forêt » est un thème clair ; celui-ci en est la
   version de nuit, pour les mêmes lectures longues. */
html[data-theme="moss"]{
  --bg:#0d1410; --bg2:#141d17; --bg3:#1d2a21; --line:#2f4436;
  --fg:#e9f2ea; --fg2:#b3c8b8; --fg3:#87a08d;
  --blue:#5fbf7a; --blue2:#8ede9c; --cyan:#48d5b8;
  --green:#7ee08b; --amber:#e6b455; --red:#f08585; --purple:#b9a3f0;
}
/* Sakura : clair et rosé, accents framboise. Le seul clair qui ne soit ni
   bleu, ni vert, ni terre — pour qui trouve les autres trop sages. */
html[data-theme="sakura"]{
  --bg:#fbf4f6; --bg2:#fffafb; --bg3:#f4e4ea; --line:#e0c5cf;
  --fg:#2a1a21; --fg2:#57404a; --fg3:#735663;
  --blue:#b3245f; --blue2:#8f1a4b; --cyan:#1d6b76;
  --green:#2f7a3a; --amber:#855710; --red:#b3262f; --purple:#7a3fa0;
}
/* Prune : sombre et violet, accents lilas. Plus coloré que « nuit », pour le
   goût des éditeurs de code aux fonds prune. */
html[data-theme="plum"]{
  --bg:#17121f; --bg2:#1f1829; --bg3:#2a2136; --line:#3e3150;
  --fg:#f1eaf8; --fg2:#c7b8d8; --fg3:#9c8cb0;
  --blue:#c38bff; --blue2:#dab6ff; --cyan:#7ee0e0;
  --green:#6ee7a0; --amber:#f5c16c; --red:#ff7a9a; --purple:#e2a8ff;
}
/* Braise : sombre et chaud, accents cuivre. Sans aucun bleu : le soir, pour
   lire sans la lumière froide des autres sombres. */
html[data-theme="ember"]{
  --bg:#18110d; --bg2:#211813; --bg3:#2d2019; --line:#4a3528;
  --fg:#f7ece4; --fg2:#d6bfae; --fg3:#a88f7d;
  --blue:#ff9a4d; --blue2:#ffb97f; --cyan:#5fd0c0;
  --green:#8fd46a; --amber:#ffc857; --red:#ff6b5a; --purple:#d9a0ff;
}
/* LA RÉSERVE SOUS LE HAUT DE L'ÉCRAN, quand un lien du plan amène à un titre.
   La barre d'outils du chapitre est collante : sans elle, le titre visé arrive
   DERRIÈRE. Elle valait 84 px pour une barre de 63 px — assez pour dégager le
   titre, pas pour dégager sa ligne de séparation ni le blanc au-dessus, et on
   se retrouvait « un peu dessous ». Sous 1000 px la barre ne colle plus (voir
   blocks.css) : la réserve n'a plus qu'à passer le ☰ posé en fixe. */
html{scroll-behavior:smooth;scroll-padding-top:118px}
@media(max-width:1000px){html{scroll-padding-top:24px}}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);
  line-height:1.65;font-size:var(--fs);-webkit-font-smoothing:antialiased}

/* ============================ TYPO ============================ */
h2.mod{font-size:clamp(1.4em,2.4vw,1.65em);letter-spacing:-.6px;margin:0 0 10px;
  padding-top:14px;line-height:1.2;text-align:center}
h3{font-size:1.22em;margin:20px 0 8px;letter-spacing:-.3px;padding-bottom:5px;
  border-bottom:2px solid var(--line);line-height:1.3}
h4{font-size:1.1em;margin:16px 0 6px;color:var(--blue2);line-height:1.35}
p{margin:11px 0}
ul,ol{margin:11px 0 11px 26px}
/* La mesure de lecture vaut pour le texte courant ; dans un cadre, le cadre fait foi. */
:where(.module) > :is(p,ul,ol){max-width:100ch}
li{margin:3px 0}
a{color:var(--blue2);text-underline-offset:3px}
strong{color:var(--fg);font-weight:680}
/* LE RETRAIT VERTICAL D'UN `code` EST GRATUIT DANS LA PROSE. Un `code` est
   INLINE : son padding haut et bas déborde du texte, il ne pousse pas la
   ligne. Il valait 2 px, et le filet d'un pixel tombait donc collé aux
   glyphes — surtout sur les commandes cliquables d'un encadré « Où & comment »,
   où le `code` est en `inline-block` et où le cadre se voit vraiment. */
/* `box-decoration-break: clone` — LA LIGNE SUIVANTE GARDE SON CADRE. Un `code`
   qui se replie est UNE boîte coupée en deux : sans cette propriété, le padding
   et le filet ne se posent qu'au tout début et à la toute fin, et le morceau du
   bas se retrouve collé à ses glyphes. C'est ce qu'on voyait sur
   « kubectl top nodes » ou « echo … | sudo tee … » dans une colonne étroite,
   pendant que « kubectl describe », qui tenait sur une ligne, allait bien. */
/* `vertical-align` — un `code` en ligne porte un rembourrage et une bordure
   que le texte autour n'a pas ; en alignement par défaut (la ligne de base),
   sa boîte déborde sous cette ligne et le mot qui le suit décroche vers le
   bas (« badge bleu mal aligné avec le texte à côté »). Au milieu du texte,
   les deux se lisent sur la même ligne. */
code{font-family:var(--mono);font-size:.9em;background:var(--bg3);padding:4px 8px;border-radius:6px;
  color:var(--cyan);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;
  vertical-align:middle;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
kbd{font-family:var(--mono);font-size:.85em;background:var(--bg3);border:1px solid var(--line);
  border-bottom-width:3px;padding:3px 8px;border-radius:6px;color:var(--fg);white-space:nowrap;font-weight:600}

/* UN LIBELLÉ QUI S'EXPLIQUE SE SIGNALE (UI.md, règle 42) : pointillé et curseur d'aide ; au doigt, la bulle .tipbox. */
/* MAIS PAS CE QUI SE CLIQUE DÉJÀ. Un bouton dit ce qu'il est par son cadre :
   le pointillé y ajoutait un trait sous l'emoji — le « . » sous la corbeille
   de la liste des comptes — et le curseur « ? » à la place de la main
   (21 septembre 2026). La règle 42 vise un MOT dans une phrase. */
[data-tip]:not(button):not(a):not(.btn) { cursor: help; }
[data-tip]:not(:empty):not(button):not(a):not(.btn) {
  text-decoration: underline dotted; text-underline-offset: .2em; }
.tipbox { position: fixed; z-index: 400; max-width: min(18rem, calc(100vw - 16px)); padding: 6px 10px;
  border-radius: 8px; background: var(--fg); color: var(--bg); font-size: .85rem; line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); pointer-events: none; }

/* ═══════════ AU TÉLÉPHONE : LE MÊME RYTHME, RESSERRÉ ═══════════
   « Rend légèrement le tout plus compact sur mobile » (20 septembre 2026).
   Ce qui se resserre, ce sont les RESPIRATIONS, jamais le texte : le corps
   reste à --fs, la note à --fs-ui, et aucune cible tactile n'est touchée. Les
   écarts de titres sont calibrés pour un écran de 390 px, où chaque pixel
   entre deux sections se prend sur la hauteur utile. */
@media(max-width:1000px),(pointer:coarse){
  h2.mod{padding-top:8px;margin-bottom:7px}
  h3{margin:18px 0 7px;padding-bottom:5px}
  h4{margin:14px 0 6px}
  p{margin:8px 0}
  ul,ol{margin:8px 0 8px 22px}
  li{margin:2px 0}
}