/* Les outils, le pied de la colonne et l'ajout d'un wiki. */

/* ═══════════════════ LES OUTILS DU MENU ═══════════════════
   Deux ou trois boutons, pas une bande de réglages. Ce qui s'affichait ici en
   permanence — thème, menu, langue, taille, cinq actions — était utilisé une
   fois par mois et poussait les chapitres hors de l'écran. Il vit maintenant
   dans deux panneaux, ouverts à la demande. */
/* UNE COLONNE, PAS DEUX. C'était une grille de deux colonnes tant que trois
   boutons s'y rangeaient ; à deux, « 🛠️ Administration » tombait dans une
   demi-colonne de 127 px sur un rail de 285 et s'affichait « 🛠️ Administ… » —
   mesuré le 10 septembre 2026 à 1280 px. UI.md, règle 9 : un libellé tronqué
   n'est plus le mot qu'on cherche, et la place se prend en hauteur.
   Un seul gabarit pleine largeur du haut en bas de la colonne, comme le
   compte, les wikis et le pied.

   IL VIT AU PIED, APRÈS LES CHAPITRES (UI.md, règle 47) : préférences
   comprises, avant la sortie. Ce qui ne vaut que pour le wiki ouvert —
   reprendre, s'entraîner — suit sa barre, dans `#wikiTools`. */
#tools{display:flex;flex-direction:column;gap:7px}
/* CE QUI VAUT POUR LE WIKI OUVERT, sous sa barre : deux boutons côte à côte. */
#wikiTools{display:flex;gap:6px;margin-top:8px}
#wikiTools[hidden]{display:none}
/* UNE TRONCATURE POUR TOUS LES BOUTONS DE LA COLONNE : quatre copies, une règle. */
#wikiTools .btn,.side-foot .btn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .btn{width:100%}
#wikiTools .btn{flex:1 1 auto;min-width:0}
#wikiTools .fold-all[hidden]{display:none}
/* VIDE, IL DESSINE QUAND MÊME SON TRAIT — 1 px de séparateur et 24 px de vide
   au-dessus de rien, sur l'écran de connexion. `#manage` avait déjà sa règle
   (css/read/nav.css) ; celle-ci manquait. En menu HAUT la question ne se pose pas : le
   bloc y perd bordure et marges. */
#tools:empty{display:none}
#tools .cat{margin:0;font:inherit;font-size:var(--fs-nav-sub)}
#tools .nav-group{display:flex;flex-direction:column;gap:7px}
/* REPLIÉ, LE BLOC GARDE SES ICÔNES : une rangée, et le suivi reste à un appui. */
#tools .tools-peek{display:none;gap:6px}
#tools .nav-fold[aria-expanded="false"] + .tools-peek{display:flex}
/* CENTRÉ PAR FLEX, SANS MARGE DE CÔTÉ : à cinq par rangée, l'emoji à 1,45 em débordait les 14 px du `.btn` et partait à droite. */
#tools .tools-peek > button{flex:1 1 0;min-width:0;position:relative;padding-inline:0;
  display:flex;align-items:center;justify-content:center}
/* Les questions échues, en pastille : dans le libellé déplié, au coin de l'icône repliée. */
.tool-due{display:inline-block;margin-left:7px;min-width:18px;padding:0 5px;border-radius:99px;
  background:var(--blue);color:var(--bg);font-size:var(--fs-nav-sub);font-weight:700;
  line-height:18px;text-align:center;vertical-align:1px;font-variant-numeric:tabular-nums}
.tool-due[hidden]{display:none}
.tools-peek .tool-due{position:absolute;top:-6px;right:-4px;margin:0}

/* ═══════════════════ LE PIED DE LA COLONNE ═══════════════════
   « Déconnexion met le tout en bas, préférences au-dessus » — 10 septembre
   2026. Le compte, ses réglages et sa sortie s'ouvrent une fois par session :
   dans le flux, ils prenaient la place d'un wiki qu'on ouvre tous les jours.
   EMPILÉS, jamais côte à côte : la demande dit « au-dessus », pas « à côté ». */
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:7px;
  padding:12px 15px 0;border-top:1px solid var(--line)}
/* Sur l'écran de connexion, ses hôtes sont vides : sans cette règle il ne
   resterait qu'un trait posé sous rien — le défaut déjà payé par `#tools`. */
.side-foot:not(:has(.btn)){display:none}
/* VIDE, IL PRENAIT QUAND MÊME SES DEUX ÉCARTS : connecté, `#account` ne porte
   plus rien, et il posait 14 px entre les outils et la sortie. */
#account:empty{display:none}
/* L'encart des outils est le dernier de son bloc : ses 10 px du bas
   s'ajoutaient à l'écart du pied, et « Se déconnecter » tombait loin. */
#tools .nav-group{margin-bottom:0}
#userTools{display:flex;flex-direction:column;gap:7px}

/* MÊME HAUTEUR QUE LA CROIX, sur la ligne du nom : deux boutons voisins de
   27 et 34 px ne se lisaient pas comme une paire (UI.md, règle 8). */
#addWiki{flex:none}
#addWiki .btn{min-height:34px}
@media(max-width:1000px),(pointer:coarse){#addWiki .btn{min-height:48px}}
#addWiki:empty{display:none}

/* ═══════════════════ CE QUI SE GLISSE LE DIT ═══════════════════
   UI.md, règle 46 : une flèche collée au bord d'une rangée qui défile de côté,
   tant qu'il reste à voir. Une balise de largeur nulle, collante ; la flèche et
   son fondu débordent vers l'intérieur. */
.slide-more{position:sticky;flex:0 0 0;width:0;align-self:stretch;z-index:3;pointer-events:none}
.slide-more[hidden]{display:none}
.slide-more::before{position:absolute;top:0;bottom:0;width:30px;display:flex;align-items:center;
  justify-content:center;font-size:1.4em;font-weight:700;color:var(--blue)}
.slide-more.end{right:0;margin-left:auto}
.slide-more.end::before{content:'›';right:0;background:linear-gradient(90deg,transparent,var(--bg2) 55%)}
.slide-more.start{left:0}
.slide-more.start::before{content:'‹';left:0;background:linear-gradient(270deg,transparent,var(--bg2) 55%)}