/* La liste des wikis dans la colonne, ses intertitres et ses blocs repliables. */

/* ---- sélecteur de parcours et de catégorie ---- */
/* Une seule colonne, pas une grille 2×2 : DevOps et Emploi se redécoupent
   maintenant en plusieurs grandes parties, aux libellés trop longs pour
   tenir à deux par ligne dans 260 px. */
/* PLUS DE FILET ICI : chaque bloc porte déjà son cadre, et le trait coûtait
   16 px de vide au-dessus des wikis pour ne rien séparer que l'œil ne voie.
   Le rythme est celui de « Où j'en suis », le plus lisible des écrans :
   des marges de 4 à 6 px, jamais de grands vides (20 septembre 2026). */
#categories{display:flex;flex-direction:column;gap:4px;margin-top:6px}
/* Vide — écran de connexion — il ne reste que son trait sous le nom du site. */
#categories:empty{display:none}
#categories button:not(.nav-act){background:var(--bg3);border:1px solid var(--line);color:var(--fg2);
  border-radius:7px;padding:6px 9px;font:inherit;font-size:var(--fs-nav);cursor:pointer;
  text-align:left;text-decoration:none;display:flex;align-items:center;gap:8px;width:100%;
  transition:background .12s,border-color .12s,color .12s}
/* L'icône d'un wiki vit dans sa propre balise, et elle est plus grande que le
   libellé : à 12,5 px, un emoji cesse d'être une image et devient une tache.
   Une largeur fixe aligne les titres entre eux, avec ou sans icône. */
#categories button:not(.nav-act) > .nav-em{font-size:1.35em;line-height:1;flex:0 0 22px;text-align:center}
#categories button:not(.nav-act) > .nav-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#categories button:not(.nav-act):hover{border-color:var(--blue);color:var(--fg)}
#categories button:not(.nav-act).on{background:var(--blue);border-color:var(--blue);color:var(--bg);font-weight:600}

/* ---- LES BLOCS QUI SE REPLIENT ----
   Deux endroits, un seul geste : l'en-tête « CATÉGORIES » au-dessus des wikis,
   et chaque grande partie du sommaire. Le chevron dit de quel côté ça s'ouvre —
   la même convention que le plan d'une page (.outline-t). */
/* `font-family` seule, jamais le raccourci `font` : « font:inherit » emporte
   aussi la taille et la graisse, et cette feuille est chargée après layout.css —
   les libellés de partie repartaient donc à 100 % en graisse normale. */
/* CE QUI REPLIE UNE LISTE EST CLIQUABLE, DONC ÇA SE VOIT. « ▾ WIKIS » et
   « 📁 I · La machine » n'avaient ni fond ni filet : mesurés le 9 septembre
   2026 à « rgba(0,0,0,0) » et quatre bordures à 0, ils passaient pour des
   intertitres morts et personne ne repliait rien. */
.nav-fold{background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  font-family:inherit;cursor:pointer;color:inherit;
  display:flex;align-items:center;gap:6px;width:100%;text-align:left}
.nav-fold:hover{border-color:var(--blue);color:var(--fg)}
/* LA FLÈCHE DE TOUT REPLI EST UN TRIANGLE DESSINÉ, pas « ▸ » : le caractère flotte au-dessus du milieu de sa boîte,
   la flèche paraissait plus haute que le nom (10 octobre 2026). Centré par construction, elle tourne sur son centre. */
.nav-fold::before,.group-fold::before,.outline-t::before,.matrix-fold::before{content:'';display:inline-block;flex:0 0 auto;
  width:0;height:0;border-style:solid;border-width:.3em 0 .3em .42em;border-color:transparent transparent transparent currentColor;
  transition:transform .15s}
.nav-fold::before,.matrix-fold::before{color:var(--fg3)}
.nav-fold[aria-expanded="true"]::before,.group-fold[aria-expanded="true"]::before,
.outline[open] .outline-t::before,.matrix-fold[aria-expanded="true"]::before{transform:rotate(90deg)}
.nav-group.folded{display:none}
/* La recherche rouvre la liste des wikis sur ceux qu'elle trouve ; le choix du lecteur revient avec le champ vidé. */
#categories.searching .hidden{display:none}
#categories.searching .nav-group.folded{display:flex}

/* ═══════ « WIKIS », ET L'AIR AU-DESSUS ═══════
   Il en manquait : « .cat:first-child{margin-top:2px} » écrasait la marge de
   « .cat » — et dans #categories, l'en-tête EST toujours le premier enfant.
   La règle ne s'appliquait donc jamais autrement qu'en annulant l'autre, et le
   titre venait se coller sous le bouton de compte. */
/* Le PREMIER intertitre de la colonne n'a rien à écarter au-dessus de lui :
   ses 18 px s'ajoutaient aux 6 du bloc et faisaient 24 px entre la recherche
   et « WIKIS », là où tout le reste du rail respire à 8 (20 septembre 2026). */
#categories > .cat:first-child{margin-top:2px}
.cat{margin:18px 0 7px;padding:0 2px;font-size:var(--fs-nav-sub);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg3);font-weight:700}
/* « #categories button » (0,1,1) bat « .cat » (0,1,0) : l'intertitre rendait
   12,5 px là où la feuille en déclare 11, et une taille écrite qui n'est jamais
   la taille calculée ne se voit qu'à la mesure. Elle se repose donc ici, à la
   même spécificité. Le fond et le cadre, eux, ne sont plus défaits : depuis que
   « .nav-fold » les porte, ce bouton-ci a le droit de se voir comme les autres. */
#categories .cat,#tools .cat{padding:6px 9px;width:100%;
  display:flex;text-align:left;font-size:var(--fs-nav-sub)}
#categories .cat:hover,#tools .cat:hover{color:var(--fg)}
#categories .nav-group{display:flex;flex-direction:column;gap:3px}
/* Repris à la même spécificité que la ligne au-dessus : « .nav-group.folded »,
   deux classes, perdrait contre un identifiant, et replier la liste des wikis
   n'aurait fait que tourner le chevron. En recherche, « #categories.searching » la rouvre sur les wikis trouvés. */
#categories .nav-group.folded,#tools .nav-group.folded{display:none}

/* ═══════ UN REPLI OUVERT EST UN ENCART ═══════
   « On voit pas à quel bouton ça correspond » — 19 septembre 2026 : déplié,
   l'en-tête et ce qu'il ouvre se lisaient comme deux voisins. L'en-tête
   devient le bandeau du cadre, son contenu le corps — replié aussi, quand il
   garde un aperçu, comme les icônes des outils. Seul le premier rang du
   sommaire s'encadre ; plus bas, le trait de gauche suffit. */
#tools,#categories{gap:0}
#categories .cat[aria-expanded="true"]{margin-bottom:0}
#tools .nav-fold,#categories .nav-fold[aria-expanded="true"],
#nav .nav-fold[aria-expanded="true"]:not(.nav-sous){border-radius:8px 8px 0 0;border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
#tools .nav-fold[aria-expanded="true"] ~ .nav-group,
#tools .nav-fold[aria-expanded="false"] + .tools-peek,
#categories .nav-fold[aria-expanded="true"] + .nav-group,
#categories .cat-row:has(> .cat[aria-expanded="true"]) + .nav-group,
#nav .nav-fold[aria-expanded="true"] + .nav-group[data-deep="1"],
#nav .nav-row:has(> .nav-fold[aria-expanded="true"]) + .nav-group[data-deep="1"]{
  border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-top:none;border-radius:0 0 8px 8px;
  /* MÊME RETRAIT QUE LE SOMMAIRE (4 px) : à 7, les boutons des outils étaient
     6 px plus étroits que les chapitres, et l'encart paraissait plus petit
     (20 septembre 2026). */
  padding:4px 6px;margin:0 0 10px;background:var(--bg)}
/* LE BANDEAU « WIKIS » EST UNE RANGÉE : le titre qui replie, et « Tout plier » à sa droite — le cadre passe du titre à la rangée. */
#categories .cat-row{display:flex;align-items:center;gap:4px;margin-top:2px;padding-right:4px;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px}
#categories .cat-row > .cat{flex:0 1 auto;width:auto;min-width:0;margin:0;border:none;background:none}
#categories .cat-row:has(> .cat:hover){border-color:var(--blue)}
#categories .cat-row:has(> .cat[aria-expanded="true"]){border-radius:8px 8px 0 0;border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
#categories .cat-row > .fold-all{flex:0 0 auto;width:auto;margin:4px 0;white-space:nowrap}
#categories .cat-row > .nav-fold-n{padding:0 5px}
#categories .cat-row > .cat[aria-expanded="false"] ~ .fold-all,#categories .fold-all[hidden]{display:none}
/* LA FAMILLE D'UN WIKI se replie comme une partie, et comme elle passé le premier rang : en capitales discrètes, son contenu tenu par un trait de gauche, pas un second cadre. */
#categories .nav-fam{font-size:var(--fs-nav-sub);text-transform:uppercase;letter-spacing:1.2px;
  color:var(--fg3);font-weight:700;padding:6px 9px;margin-top:6px}
/* LA PREMIÈRE FAMILLE COLLE AU CADRE COMME LA DERNIÈRE : 4 px en haut comme en bas (10 octobre 2026). */
#categories .nav-group > .nav-fam:first-child{margin-top:0}
#categories .nav-fam[aria-expanded="true"]{border-radius:8px;border-color:var(--line)}
/* LA SOUS-FAMILLE (`group: Personnel / Famille`) : un cran sous sa famille — casse ordinaire, même repli, même trait. */
#categories .nav-fam.nav-subfam{text-transform:none;letter-spacing:.2px;font-weight:600;margin-top:3px}
#categories .nav-fam[aria-expanded="true"] + .nav-group{border:none;border-left:2px solid var(--line);
  border-radius:0;margin:3px 0 2px 8px;padding:0 0 0 6px;background:none}
/* MÊME COULEUR = MÊME NIVEAU, dans un wiki comme entre les wikis (21 octobre 2026) : list.js pose `--part`
   (famille = niveau 1, sous-famille = niveau 2), avec la palette de sidebar.css. */
#categories button.nav-fam:not(.nav-act){background:color-mix(in srgb,var(--part,var(--bg3)) 26%,var(--bg3));color:var(--fg2);
  border-color:color-mix(in srgb,var(--part,var(--line)) 50%,var(--line))}
#categories button.nav-fam:not(.nav-act):hover{border-color:var(--part,var(--blue));color:var(--fg)}
#categories .nav-fam[aria-expanded="true"] + .nav-group{border-left-color:var(--part,var(--line))}
#categories .nav-group button:not(.nav-act,.nav-fam,.on),#categories .nav-group .nav-act{
  background:color-mix(in srgb,var(--part,var(--bg3)) 20%,var(--bg3))}
#categories .nav-group button:not(.nav-act,.nav-fam,.on):hover{background:color-mix(in srgb,var(--part,var(--bg3)) 32%,var(--bg3))}
/* LE FOND DE L'ENCART PREND LA COULEUR DE SA PARTIE (`--part`, posé par tree.js) : on voit où l'une finit et où l'autre commence. */
#nav .nav-fold[aria-expanded="true"]:not(.nav-sous),
#nav .nav-fold[aria-expanded="true"] + .nav-group[data-deep="1"],
#nav .nav-row:has(> .nav-fold[aria-expanded="true"]) + .nav-group[data-deep="1"]{
  border-color:color-mix(in srgb,var(--part,var(--blue)) 50%,var(--line))}
#nav .nav-fold:not(.nav-sous){background:color-mix(in srgb,var(--part,var(--bg3)) 26%,var(--bg3))}
#nav .nav-fold[aria-expanded="true"] + .nav-group[data-deep="1"],
#nav .nav-row:has(> .nav-fold[aria-expanded="true"]) + .nav-group[data-deep="1"]{
  background:color-mix(in srgb,var(--part,var(--bg)) 15%,var(--bg))}
#nav .nav-fold[aria-expanded="true"]{border-bottom-width:0;border-radius:8px 8px 0 0}
/* MÊME CHOSE À CHAQUE NIVEAU, FOND OPAQUE : translucide, le bleu du parent teintait l'ambre de l'enfant (24 septembre 2026). */
#nav .nav-fold.nav-sous{background:color-mix(in srgb,var(--part,var(--bg3)) 26%,var(--bg3));
  border-color:color-mix(in srgb,var(--part,var(--line)) 50%,var(--line))}
#nav .nav-group[data-deep] .nav-group[data-deep]{background:color-mix(in srgb,var(--part,var(--bg)) 15%,var(--bg));
  box-shadow:inset 1px 0 0 0 var(--frame),inset -1px 0 0 0 var(--frame),inset 0 -1px 0 0 var(--frame);--frame:color-mix(in srgb,var(--part,var(--line)) 50%,transparent);
  border-radius:0 0 8px 8px;padding:5px 0;margin:0 0 6px}
#nav .nav-group[data-deep] .nav-group[data-deep="2"]{padding-inline:3px}
/* LE FOND DES BOUTONS PREND LA COULEUR DE LEUR SOUS-CATÉGORIE (`--part` hérité), pour qu'on voie d'où ils sont. */
#nav .nav-group a:not(.active),#nav .nav-group .nav-act{background:color-mix(in srgb,var(--part,var(--bg3)) 20%,var(--bg3))}
#nav .nav-group a:not(.active):hover{background:color-mix(in srgb,var(--part,var(--bg3)) 32%,var(--bg3))}
/* LE CHAPITRE OUVERT GARDE LA TEINTE DE SON NIVEAU, EN PLEIN : en bleu pâle, il redevenait l'ancien bouton et ne se voyait plus (24 septembre 2026). */
#nav .nav-group a.active{background:color-mix(in srgb,var(--part,var(--blue)) 55%,var(--bg3));color:var(--fg);
  border-color:var(--part,var(--blue));box-shadow:inset 4px 0 0 var(--part,var(--blue)),0 1px 4px color-mix(in srgb,var(--part,var(--blue)) 40%,transparent);font-weight:700}
#nav .nav-group a.active .nav-num,#nav .nav-group a.active .nav-cnt{color:var(--fg)}

/* ═══════ CHAQUE WIKI PORTE SON « ⋯ » ═══════
   Le bouton prend la place, le « ⋯ » ce qu'il reste — comme un chapitre du
   sommaire. Le « ⋯ » est LUI AUSSI un `button` de `#categories` : sans le
   `:not(.nav-act)` des règles ci-dessus, il héritait de la mise en forme
   d'une entrée — fond, cadre, et surtout `width:100%` — et c'est lui qui
   prenait la ligne (22 septembre 2026). */
#categories .nav-row > button:not(.nav-act){flex:1 1 auto;min-width:0}
#categories .nav-row{margin-bottom:0}

/* Au doigt : une ligne de la colonne vise 48 px, comme un bouton. */
@media(max-width:1000px),(pointer:coarse){#categories button:not(.nav-act),.nav-fold{min-height:48px}}