/* La colonne de gauche : bandeau, recherche, sommaire, pastilles, tiroir et son voile. */

/* ============================ SIDEBAR ============================ */
/* ═══════ RESSERRÉ ═══════
   Le bandeau et le sommaire prenaient 22 px de marge, 14 px entre chaque
   bloc et 8 px par ligne de chapitre : sur un portable de 768 px de haut, six
   chapitres tenaient à l'écran. La colonne sert à ATTEINDRE un chapitre, pas
   à respirer — le texte, lui, garde tout son air. */
.side-head{padding:12px 15px 10px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg2);z-index:5}
/* 🏠 COLLÉ AU NOM, « + Wiki » et ✕ poussés à droite ; la taille du ✕ voisin, 48 px au doigt. */
#brand .brand-row h1{flex:0 1 auto}
#sideHome{flex:none;margin-right:auto;min-width:34px;height:34px;padding:0;display:flex;align-items:center;
  justify-content:center;font-size:1.15rem;line-height:1;text-decoration:none}
@media(max-width:1000px),(pointer:coarse){#sideHome{min-width:48px;height:48px;font-size:1.4rem}}
#globalbar{height:7px;background:var(--bg3);border-radius:99px;overflow:hidden;margin-top:6px}
#globalbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .4s}
#globaltxt{font-size:.75em;color:var(--fg2);margin-top:4px;display:flex;justify-content:space-between}
#search{width:100%;background:var(--bg3);border:1px solid var(--line);color:var(--fg);
  padding:7px 11px;border-radius:9px;font-size:var(--fs-nav);font-family:inherit}
#search:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
/* LA CROIX RESTE TANT QUE LE CHAMP EST REMPLI : un rond discret de 22 px dans une cible de 32, centré dans le champ, le texte réservé à droite (« ta croix est bizarre », 7 octobre 2026). */
.search-box{position:relative;margin-top:8px}
#search{padding-right:40px}
#search::-webkit-search-cancel-button{display:none}
#searchClear{--dot:color-mix(in srgb,var(--fg3) 16%,transparent);position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--fg3);
  background:radial-gradient(circle,var(--dot) 10.5px,transparent 11px)}
#searchClear:hover{--dot:color-mix(in srgb,var(--blue) 22%,transparent);color:var(--fg)}
#searchClear:focus-visible{outline:2px solid var(--blue);outline-offset:-3px;color:var(--fg)}
#searchClear svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.search-box:has(#search:placeholder-shown) #searchClear{display:none}
/* LE RETOUR AUX RÉSULTATS, sous le champ, après un clic sur l'un d'eux : le libellé à gauche, sa croix à droite. */
#searchBack{display:flex;gap:7px;margin-top:6px}
#searchBack[hidden]{display:none}
#searchBackGo{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-nav);
  border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,var(--bg2));color:var(--fg)}
#searchBackClose{flex:0 0 36px;padding:0;display:grid;place-items:center}
#searchBackClose svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
/* PAS DE CHAMP QUAND IL N'Y A RIEN À CHERCHER. Sur l'écran de connexion, la
   colonne est vide et « Rechercher… » n'était plus que du mobilier : un
   contrôle qui ne peut rien rendre, dans la tabulation et lu par les lecteurs
   d'écran. `renderWikis` pose TOUJOURS au moins le repli des wikis dès qu'un monde est
   chargé — `#categories` vide veut donc dire « aucun monde », et la règle se
   décide ici seule au lieu d'être recopiée dans chaque chemin qui l'ouvre. */
.side-head:has(#categories:empty) .search-box{display:none}
/* LE SOMMAIRE EST L'ENCART DU WIKI OUVERT (UI.md, règle 45) : un bandeau qui
   le nomme, et ses chapitres dans le même cadre. Sans lui, un wiki sans
   parties posait ses chapitres à plat sous la liste des wikis, et rien ne
   disait à qui ils appartenaient (20 septembre 2026). */
#nav{padding:0 4px 4px;margin:8px 15px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg2)}
#nav:empty{display:none;border:none;margin:0}
.nav-wiki{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:7px;text-decoration:none;
  padding:6px 9px;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;
  background:var(--bg3);color:var(--fg2);font-size:var(--fs-nav-sub);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  /* Le bandeau prend toute la largeur du cadre : c'est le rembourrage du
     sommaire qu'il annule, pas une marge à lui. */
  margin:0 -4px 6px}
/* Le bandeau MÈNE à la présentation du wiki quand elle existe : c'est un lien,
   donc il se voit et il se vise (48 px au doigt, UI.md règles 1 et 4). */
a.nav-wiki:hover{border-color:var(--nav-accent,var(--blue));color:var(--fg)}
a.nav-wiki.active{color:var(--nav-accent-fg,var(--blue));background:color-mix(in srgb,var(--nav-accent,var(--blue)) 12%,var(--bg3))}
.nav-wiki-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-wiki .nav-em{font-size:1.2em;line-height:1;flex:0 0 auto;text-transform:none}
@media(max-width:1000px),(pointer:coarse){a.nav-wiki{min-height:48px}}
/* Préfixé par #nav : l'en-tête d'une partie est maintenant un bouton, et la
   règle commune .nav-fold — chargée après cette feuille — reprendrait sinon la
   main sur sa taille et sa graisse. */
/* L'AIR AU-DESSUS EST UNE MARGE, PAS UN REMPLISSAGE. À « 13px 9px 5px », le
   libellé se posait 4 px au-dessus du centre de sa boîte — que « .nav-row »
   centre pourtant — et le « ⋯ » de la même ligne, lui, était bien centré :
   4,01 px d'écart entre deux choses d'une même ligne, mesurés le 9 septembre
   2026 à 1280 px. UI.md, règle 8 : le remède est structurel, pas cosmétique. */
#nav .nav-part{font-size:var(--fs-nav-sub);text-transform:uppercase;letter-spacing:1.3px;color:var(--fg3);
  padding:6px 9px;font-weight:700}
/* … ET L'AIR EST SUR LA LIGNE, PAS SUR LE BOUTON. Une marge posée sur un
   élément flex ne remonte pas à sa ligne : elle décale l'élément DANS la ligne
   pendant que « align-items:center » centre son voisin sur toute la hauteur.
   Le « ⋯ » se retrouvait 4 px plus haut que le libellé qu'il accompagne —
   c'est la moitié exacte de la marge, et ça ne se lit pas dans la feuille. */
#nav .nav-row:has(> .nav-part){margin-top:8px}
/* CE QU'UN REPLI CACHE, ANNONCÉ SUR SON TITRE (UI.md, règle 15). Le chiffre se
   range à droite du libellé, comme le compte « 3/7 » d'un chapitre : même
   chasse fixe, même rang d'accompagnement. */
.nav-fold-n{margin-left:auto;flex:0 0 auto;font-family:var(--mono);
  font-size:var(--fs-nav-sub);color:var(--nav-muted,var(--fg3));font-variant-numeric:tabular-nums}
.nav-fold:hover .nav-fold-n{color:var(--fg2)}

/* ═══════ LES SOUS-CATÉGORIES, AUSSI PROFOND QU'ON VEUT ═══════
   Un dossier est une catégorie, un dossier dedans une sous-catégorie, et le
   moteur descend sans limite. Le menu ne le montrait qu'à moitié : les
   en-têtes se décalaient, les chapitres non — un chapitre au troisième niveau
   se lisait comme un chapitre de premier rang.

   Passé le premier niveau, l'en-tête cesse de crier en capitales : trois rangs
   de majuscules se disputeraient le même regard. Et un filet vertical suit le
   groupe, qui dit d'un trait où commence et où finit ce qu'il contient. */
#nav .nav-part.nav-sous{font-size:calc(var(--fs-nav-sub) * 1.15);text-transform:none;letter-spacing:.2px;
  padding-top:7px;padding-bottom:3px;font-weight:600}
#nav .nav-group[data-deep]{border-left:1px solid var(--line);margin-left:11px}
#nav .nav-group[data-deep] > .nav-group{border-left:none;margin-left:0}
/* UNE COULEUR PAR NIVEAU (cinq, `--depth-1..5`) : un dossier = un niveau, un dossier dedans = le suivant,
   et le niveau 2 d'un wiki a la couleur du niveau 2 d'un autre. Le moteur pose `--part` sur chaque
   en-tête et son groupe. Une couleur PAR PARTIE (23) puis PAR SŒUR (24 septembre 2026) ont été refusées. */
#nav .nav-group[data-deep]{border-left-color:var(--part,var(--line))}
/* Un thème peut donner au menu ses propres couleurs de niveau (`--nav-1..5`) sans changer celles du contenu. */
#nav,#categories,.wikis-family,.wikis,.wikis-group{--depth-1:var(--nav-1,var(--blue)); --depth-2:var(--nav-2,var(--amber)); --depth-3:var(--nav-3,var(--green));
  --depth-4:var(--nav-4,var(--purple)); --depth-5:var(--nav-5,var(--cyan))}
#nav .nav-part{color:var(--fg)}
/* CHAQUE CHAPITRE EST UN BOUTON, ET ÇA SE VOIT (UI.md, règle 1 — le reproche
   n° 1) : bordure et fond comme les wikis, l'accent de gauche gardé pour celui
   qu'on lit (20 septembre 2026). */
#nav a{display:flex;align-items:center;gap:8px;padding:5px 9px 5px 12px;border-radius:8px;color:var(--fg2);
  background:var(--bg3);border:1px solid var(--line);
  text-decoration:none;font-size:var(--fs-nav);line-height:1.4;transition:.15s}
/* Au survol, le trait prend la couleur du niveau quand le thème le demande (`--nav-hover-edge`), le bleu sinon. */
#nav a:hover{border-color:color-mix(in srgb,var(--part,var(--nav-accent,var(--blue))) var(--nav-hover-edge,0%),var(--blue));color:var(--fg)}
/* L'écart va aux CHAPITRES, pas à l'en-tête d'une partie : son encart lui est
   collé, et 3 px l'en décollaient (UI.md, règle 45). */
#nav .nav-row:not(:has(> .nav-fold)){margin-bottom:3px}
/* REPLIÉE, UNE PARTIE GARDE L'AIR DE SON ENCART : sans lui, le chapitre suivant se collait sous son bandeau (28 septembre 2026). */
#nav .nav-row:has(> .nav-fold[aria-expanded="false"]),#nav :not(.nav-row) > .nav-fold[aria-expanded="false"]{margin-bottom:6px}
/* ═══════ UNE ENTRÉE ET SON BOUTON D'ACTIONS ═══════
   Le lien prend la place, le « ⋯ » ce qu'il reste — toujours affiché, en retrait hors survol :
   caché, il faisait bouger la ligne et ne se trouvait pas (« affiche tout le temps », 19 septembre 2026). */
/* IL REMPLIT SA PLACE, il n'y flotte pas (21 septembre 2026) : centré sur
   28 px de haut à côté d'un chapitre qui en fait 40, il se lisait comme un
   glyphe posé là. Étiré, c'est un bouton de la même hauteur que la ligne. */
.nav-row{display:flex;align-items:stretch;gap:2px}
.nav-row.hidden{display:none}
.nav-row>a,.nav-row>.nav-fold{flex:1 1 auto;min-width:0}
/* UN BOUTON, PAS UN GLYPHE NU : sans fond ni filet, il ne se lisait pas comme cliquable (9 septembre 2026). */
.nav-act{flex:0 0 auto;background:var(--bg3);border:1px solid var(--line);color:var(--fg2);cursor:pointer;
  font:inherit;font-size:calc(var(--fs-nav) * 1.15);line-height:1;padding:0 8px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:.15s}
.nav-row:hover .nav-act{opacity:1}
.nav-act:hover{background:var(--bg3);color:var(--fg)}
/* ═══════ LE « ⋯ » DU WIKI, DANS SON BANDEAU ═══════
   Le bandeau est COLLANT et déborde du cadre de 4 px de chaque côté : une
   rangée posée à côté de lui aurait cassé les deux. La rangée reprend donc le
   collant et le débordement, le bandeau les rend, et le bouton se pose dessus
   — même forme que celui d'une partie, juste en dessous. */
#nav .nav-wiki-row{position:sticky;top:0;z-index:2;margin:0 -4px 6px}
/* `z-index:auto` EST LE POINT : le bandeau garde son `z-index:2` de quand il
   était lui-même collant, et Z-INDEX S'APPLIQUE À UN ÉLÉMENT FLEX même en
   `position:static`. Le bouton, absolu et en `z-index:auto`, passait donc
   DESSOUS : il était dans le DOM, mesurable, « visible », et ne se peignait
   nulle part (22 septembre 2026). C'est la rangée qui colle désormais. */
#nav .nav-wiki-row > .nav-wiki{position:static;z-index:auto;margin:0;flex:1 1 auto;min-width:0}
#nav .nav-wiki-row > .nav-act{position:absolute;right:5px;top:5px;bottom:5px}
#nav .nav-wiki-row > .nav-wiki:has(~ .nav-act){padding-right:38px}
/* Le « ⋯ » d'une partie se pose DANS son bandeau : à côté, il rognait l'en-tête de 30 px sur son encart (UI.md, règle 45). */
#nav .nav-row:has(> .nav-part){position:relative}
#nav .nav-row:has(> .nav-part) > .nav-act{position:absolute;right:5px;top:5px;bottom:5px}
#nav .nav-row > .nav-part:has(~ .nav-act){padding-right:38px}
.nav-act:focus-visible{opacity:1;outline:2px solid var(--blue);outline-offset:1px}
#nav a:hover{background:var(--bg3);color:var(--fg)}
/* L'ACCENT EST DESSINÉ DEDANS, plus en bordure gauche : réservée à 3 px
   transparents, elle laissait le bord gauche INVISIBLE sur toutes les entrées
   — le quatrième cas de la règle 1 d'UI.md, « on voit pas le bord gauche »
   (20 septembre 2026). Les quatre côtés font maintenant le même trait. */
#nav a.active{--acc:var(--nav-accent,var(--blue));background:color-mix(in srgb,var(--acc) 10%,var(--bg3));color:var(--nav-accent-fg,var(--blue2));
  border-color:color-mix(in srgb,var(--acc) 30%,var(--line));border-left-color:var(--acc);
  box-shadow:inset 3px 0 0 var(--acc);font-weight:600}
#nav a.hidden{display:none}
.nav-num{font-family:var(--mono);font-size:var(--fs-nav-sub);color:var(--nav-muted,var(--fg3));min-width:24px;text-align:right}
#nav a.active .nav-num{color:var(--nav-accent-fg,var(--blue2))}
.nav-t{flex:1}
/* ═══════════ LA PASTILLE D'UN CHAPITRE : TROIS ÉTATS ═══════════
   Vide — jamais ouvert. Un anneau qui se remplit à la proportion des tâches
   faites, avec son compte « 3/7 » à côté — ouvert, en cours. Plein — fini.

   Le second état manquait : le seul fait de cliquer posait le point vert, et
   un sommaire entier virait au vert en le survolant. Le dégradé conique dit la
   fraction sans une balise de plus, et se lit dans les six thèmes puisqu'il ne
   nomme que des jetons. */
.nav-dot{width:11px;height:11px;border-radius:50%;background:transparent;
  border:2px solid var(--line);flex:0 0 auto;transition:.2s}
#nav a:hover .nav-dot{border-color:var(--fg3)}
/* LU, et il n'y a rien à y faire : un chapitre de consultation, pas une étape
   d'un parcours. Un point neutre, plus petit — il dit « vu », il ne promet
   aucune progression et n'emprunte pas le vert de « fini ». */
.nav-dot.seen{border-color:var(--fg3);background:var(--fg3);transform:scale(.6)}
.nav-dot.part{--fill:0%;border-color:var(--amber);
  background:conic-gradient(var(--amber) var(--fill),transparent 0)}
.nav-dot.done{background:var(--green);border-color:var(--green)}
/* Le compte, discret : il n'apparaît QUE tant qu'il reste à faire. Fini, la
   pastille verte suffit — et un « 7/7 » sur chaque ligne ferait du bruit.
   IL N'EST PAS UNE DEUXIÈME LIGNE, ET SON CONTRASTE NE LE PORTAIT PAS. À
   `.72em` du rang d'entrée il rendait 8,89 px — sous les .75rem qu'UI.md
   règle 3 autorise, et sur la même ligne que le titre (mesuré : une boîte de
   13 × 10,47 dans un lien de 235 × 24,56), donc hors de l'exception « deuxième
   ligne dans une cible tactile ». Le contraste ne rattrapait rien : 4,90:1 en
   thème CLAIR, qui est le défaut, contre les 6,18:1 que cette exception porte.
   Il passe donc au rang d'accompagnement du menu, en `--fg2` — 8,68:1. À 92 %
   de son libellé il n'est plus la taille qui le rend second, mais sa chasse
   fixe, sa couleur et ses trois caractères : UI.md règle 1 dit déjà qu'une
   distinction ne repose pas sur une seule dimension. */
.nav-cnt{font-family:var(--mono);font-size:var(--fs-nav-sub);color:var(--fg2);
  flex:0 0 auto;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* L'ambre allait avec l'anneau qui se remplit, mais tombait à 4,56:1 sur le
   fond de la ligne ouverte. L'anneau le garde ; le chiffre prend la couleur du
   lien courant, qu'il accompagne. */
#nav a.active .nav-cnt{color:var(--nav-accent-fg,var(--blue2))}
#burger{display:none;position:fixed;top:14px;left:14px;z-index:300;background:var(--bg2);
  border:1px solid var(--line);color:var(--fg);width:48px;height:48px;border-radius:10px;
  align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem}
#backdrop{display:none;position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.5);
  border:none;padding:0;cursor:pointer}

/* L'icône d'un chapitre PREND LA PLACE de son numéro : les deux côte à côte
   font une colonne de bruit. Elle doit donc se lire au moins aussi vite qu'un
   « 03 » — à 1,05 em dans une ligne de 0,85 em, elle était plus petite que le
   chiffre qu'elle remplace. */
/* ET ELLE OCCUPE UNE LARGEUR RÉSERVÉE, comme dans #categories. Sans elle, la
   colonne suivait le glyphe — « — », « 📸 », « ⏱ » n'ont pas la même chasse — et
   les icônes du sommaire dérivaient de 19,3 px d'un bout à l'autre de la liste,
   mesurés le 9 septembre 2026. UI.md, règle 8 : une largeur réservée, jamais
   une marge de plus. */
.nav-em{font-size:1.35em;line-height:1;text-align:center;flex:0 0 22px}

/* ═══════════ AU DOIGT : 48 PX, DANS LES DEUX DIMENSIONS ═══════════
   Mesuré à 390 px le 9 septembre 2026, avant correction : le champ de
   recherche 31 px de haut, une entrée du sommaire 29, l'en-tête d'une partie
   33, le « ⋯ » d'une ligne 21. Le sommaire est ce qu'on touche le plus sur un
   téléphone — c'est par lui qu'on change de chapitre. */
@media(max-width:1000px),(pointer:coarse){
  #search{min-height:48px}
  #searchClear{width:44px;height:44px;right:2px}
  #searchBackGo,#searchBackClose{min-height:48px}
  #searchBackClose{flex-basis:48px}
  #nav a{min-height:48px}
  #nav .nav-part{min-height:48px;padding-top:9px;padding-bottom:9px}
  /* L'en-tête « Résultats » ne se touche pas : la hauteur tactile des parties y laissait un trou. */
  #nav .nav-found > .nav-part{min-height:0;padding-top:4px;padding-bottom:4px}
  .nav-act{min-width:48px;min-height:48px;justify-content:center}
  /* Le « ⋯ » passe à 48 px : la réserve de l'en-tête suit, sinon il couvrait le compteur de pages. */
  #nav .nav-row > .nav-part:has(~ .nav-act),#nav .nav-wiki-row > .nav-wiki:has(~ .nav-act){padding-right:60px}
}

/* ═══════════ AU TÉLÉPHONE : LE TIROIR RESSERRE SES ENTRE-DEUX ═══════════
   Les entrées gardent leurs 48 px (bloc ci-dessus) — on ne touche qu'aux
   écarts entre rubriques et au bandeau de tête, seuls vides de la colonne. */
@media(max-width:1000px),(pointer:coarse){
  .side-head{padding:10px 12px 8px}
  #nav{margin:6px 12px 10px;padding:0 4px 5px}
  #nav .nav-row:has(> .nav-part){margin-top:5px}
  .cat{margin:12px 0 5px}
}
/* Une partie hors de l'écran du menu n'est ni stylée ni mise en page : ouvrir Magie (235 chapitres) en payait tout le sommaire. */
#nav > .nav-group{content-visibility:auto;contain-intrinsic-size:auto 600px}