/* ============================================================
   Ce que le moteur d'origine n'avait pas : l'application servie.

   Tout est en jetons (var(--bg2), var(--line)…), jamais une couleur en dur —
   sinon l'éditeur et les dialogues seraient illisibles dans cinq thèmes sur
   six, exactement comme un bloc de contenu.
   ============================================================ */

/* ============================================================
   LE DÉMARRAGE : ce qui se voit avant que le contenu arrive.

   Rien ici ne dépend du JavaScript. C'est le point : la coquille est envoyée
   la première, et elle doit dire « ça arrive » sans attendre les quinze
   modules qui la suivent. boot.js pose data-ready sur <html> quand le contenu
   est affiché ; tout ce bloc s'efface alors d'un coup.

   Le repli est volontairement dans ce sens : si boot.js n'arrive JAMAIS —
   réseau coupé, module en erreur — l'animation continue au lieu de mentir en
   affichant une page vide et calme.
   ============================================================ */

#loading { position: fixed; inset: 0 0 auto; height: 3px; z-index: 400;
  background: var(--bg3); overflow: hidden; }
#loading i { display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  animation: glisse 1.1s ease-in-out infinite; }
@keyframes glisse { from { transform: translateX(-100%); }
                    to   { transform: translateX(350%); } }

/* L'ombre de la page à venir : des barres à la place des lignes de texte.
   Elle occupe la place que le contenu prendra, ce qui évite le sursaut de
   mise en page au moment où il arrive. */
.skeleton { display: flex; flex-direction: column; gap: 12px; padding: 22px 4px; }
.sq { display: block; height: 13px; border-radius: 6px; background: var(--bg3); }
.sq.short { width: 62%; }
.sq.title { height: 30px; width: 55%; margin-bottom: 10px; }
.sq.block { height: 92px; border-radius: var(--radius); }

/* Le battement rend l'attente lisible ; sans lui, le squelette ressemble à une
   page cassée. Coupé pour qui a demandé moins d'animation — l'attente reste
   visible par la barre du haut. */
@media (prefers-reduced-motion: no-preference) {
  .sq { animation: battement 1.4s ease-in-out infinite; }
}
@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

html[data-ready] #loading,
html[data-ready] .skeleton { display: none; }

/* Le texte que lit un lecteur d'écran, et lui seul : « Chargement… » doit être
   annoncé, mais il ferait doublon avec le squelette à l'écran. */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ---- bouton de compte, au PIED du menu ----
   Il a descendu avec ses préférences et sa sortie : l'identité se règle une
   fois, et sa place est en bas (UI.md, règle 18). L'air autour vient du pied
   lui-même, pas du bouton. */
#account { margin: 0; }
/* Pleine largeur comme tout ce qui se clique dans la colonne : un seul gabarit
   du haut en bas, sinon l'œil en compte trois avant d'arriver au sommaire. */
#account .account-btn { display: block; width: 100%; text-align: left; }

/* ---- réglages : un libellé au-dessus de son sélecteur ---- */

/* ---- les résultats, à la place du sommaire : le même sommaire, réduit aux chapitres trouvés ---- */
#nav.searching > :not(.nav-found) { display: none; }
#nav .nav-found > .nav-part { color: var(--blue); }
#nav .nav-found > div + div { margin-top: 10px; }
#nav .nav-found .nav-hits { margin-left: auto; padding-left: 8px; font-size: .8em; color: var(--fg3); }
#nav .nav-found b { font-weight: 700; color: var(--fg); background: color-mix(in srgb, var(--blue) 30%, transparent); border-radius: 3px; }
/* Le nom d'un wiki trouvé dans la liste des wikis. */
#categories.searching { --hit: var(--purple); }
#categories.searching .nav-row button[data-p]:not(.on) {
  box-shadow: inset 3px 0 0 var(--hit); background: color-mix(in srgb, var(--hit) 10%, var(--bg2));
}

/* ---- créer : sous le sommaire, jamais au milieu de la lecture ----
   Les boutons n'existent que pour qui peut écrire, et ils restent discrets :
   on ouvre un wiki dix fois pour le lire, une fois pour y ajouter.

   DEUX BOUTONS, ET DEUX SEULEMENT : « + Chapitre » et « + Partie », qui visent
   le wiki ouvert. « 📚 Wiki » est monté en tête de colonne le 10 septembre
   2026 — il ne dépend d'aucun wiki, il n'avait rien à faire sous son sommaire.
   La grille en garde deux cases de même taille, comme #tools. */
/* EN HAUT, SOUS « + Wiki » : plus de trait ni de rembourrage de bloc — c'est
   une rangée d'ajouts, pas une section (20 septembre 2026). */
#manage { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
#manage:empty { display: none; }
#manage .btn { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- pied de page : précédent / suivant ---- */
.toolbar.foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
/* CES SÉPARATEURS-LÀ POUSSENT, ils ne tracent rien. La règle commune
   « .toolbar .sep » leur donne un fond et un pixel de large ; combinée à
   « flex:1 », elle étirait ce pixel en une barre grise pleine largeur — entre
   « Précédent » et « Suivant » au pied d'un chapitre, entre le nom du fichier
   et « Fichier » dans l'éditeur. Une seule règle pour les deux : c'est le même
   défaut, et il se corrigeait deux fois. */
.toolbar.foot .sep, .ed-bar .sep { flex: 1; width: auto; background: none; }
.toolbar.foot a.btn { text-decoration: none; max-width: 44%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* CÔTE À CÔTE, PAS AUX DEUX BORDS (21 septembre 2026) : « le suivant pas tout
   à droite ». Le séparateur poussait « Suivant → » à 1 600 px du précédent,
   et il fallait traverser l'écran pour l'atteindre. Il ne pousse plus rien ;
   sous le pouce il est masqué, la barre s'y range toute seule. */
.toolbar.foot .sep { flex: 0 0 10px; }
.toolbar.foot .foot-line { justify-content: center; }
/* 🏠 ‹ › DU HAUT : de la largeur d'un bouton, avant « Modifier ». */
.toolbar.page .nav-step, .toolbar.page .nav-home { text-decoration: none; font-size: 1.15rem; line-height: 1;
  padding: 0 10px; display: inline-flex; align-items: center; align-self: stretch; }
.toolbar.foot { flex-direction: column; align-items: stretch; gap: 8px; }
.foot-line { display: flex; align-items: center; gap: 9px; width: 100%; }
/* La déroulante ne sert que sous le pouce : sur un grand écran, la colonne de
   gauche montre le sommaire en entier. */
.toolbar.foot .foot-jump, .toolbar.foot .foot-menu, .toolbar.foot .foot-up, .toolbar.foot .foot-arrow { display: none; }
/* La barre de l'accueil n'a que le ☰ et la déroulante — et celle d'une page
   sans voisin non plus : hors téléphone, elles seraient vides. */
.toolbar.foot.foot-home, .toolbar.foot.foot-bare { display: none; }
/* SOUS LE POUCE — téléphone TACTILE, moins de 960 px (UI.md, règle 39) : une
   seule ligne, « ☰ · ‹ · page ▾ · › », fixée en bas. La requête porte
   « pointer:coarse » parce que posée sur la seule largeur elle sortait aussi
   sur une fenêtre d'ordinateur étroite — « sur desktop c'est trop petit, et
   trop bas, tu navigues pas pareil » (18 septembre 2026) — et sur la « version
   pour ordinateur » d'un téléphone, qui annonce ~980 px. */
@media (max-width: 959px) and (pointer: coarse) {
  /* Au-dessus du voile (150) ET du tiroir (200) : le même ☰, au même endroit,
     referme ce qu'il a ouvert. Sous le voile, il devenait intouchable. */
  .toolbar.foot.foot-home, .toolbar.foot.foot-bare { display: flex; }
  .toolbar.foot { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 210; margin: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: 6px;
    background: var(--bg2); border-top: 1px solid var(--line); border-bottom: none; }
  .toolbar.foot .foot-line { gap: 4px; }
  .toolbar.foot a.btn { flex: 0 0 auto; max-width: none; min-width: 0; }
  .toolbar.foot .btn { display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 12px; }
  .toolbar.foot .foot-menu { display: inline-flex; flex: 0 0 auto; font-size: 1.25rem; }
  .toolbar.foot .foot-up { display: flex; flex: 0 0 auto; }
  /* La barre du pouce porte déjà ‹ et › : deux paires diraient deux gestes. */
  .toolbar.page .nav-step { display: none; }
  .toolbar.foot .sep, .toolbar.foot .foot-title, .toolbar.foot .foot-dir { display: none; }
  .toolbar.foot .foot-arrow { display: inline; font-size: 1.35rem; line-height: 1; }
  /* Les deux flèches à l'identique : réduit à « › », le bleu de « Suivant » ne disait plus rien (9 octobre 2026). */
  .toolbar.foot .btn.pri { background: var(--bg2); border-color: var(--line); color: var(--fg2); filter: none; }
  /* Et le même gabarit, lien ou bouton du menu : 48 et 33 px côte à côte (9 octobre 2026) ; 40, pour laisser 64 px aux deux listes à 390 px. */
  .toolbar.foot a.btn, .toolbar.foot .foot-up { width: 40px; min-width: 40px; }
  /* Le ☰ aussi, et 4 px entre les cases : 18 px rendus aux deux listes, qui coupaient leur libellé sur 97 % des chapitres (21 octobre 2026). */
  .toolbar.foot .foot-menu { width: 40px; min-width: 40px; padding: 0; }
  html:has(.toolbar.foot) #burger { display: none !important; }
  /* AU CHARGEMENT, NI ☰ EN HAUT NI SA RÉSERVE : il s'y montrait le temps que
     la barre du pouce arrive, puis passait en bas, et la page remontait de 50 px
     (19 septembre 2026). Une page sans barre le reçoit une fois prête. */
  html:not([data-ready]) #burger { display: none !important; }
  html:not([data-ready]) #content { padding-top: 20px; }
  /* Les deux déroulantes prennent tout ce qui reste, à parts égales — « page ▾ »
     pour changer de chapitre, « Sur cette page ▾ » pour sauter à une section :
     c'est la seule forme du plan au doigt, l'encart ayant disparu. `1 1 0` et
     non `1 1 auto` : sur `auto`, la plus bavarde des deux prenait toute la
     place et l'autre se réduisait à sa flèche. */
  .toolbar.foot .foot-jump, .toolbar.foot .toc-jump {
    display: block; flex: 1 1 0; min-width: 0; min-height: 48px;
    background: var(--bg3); color: var(--fg); border: 1px solid var(--line);
    border-radius: 8px; padding: 0 0 0 4px; font: inherit; font-size: var(--fs-ui);
    /* Coupé, mais en le disant (règle 34) : « 🧱 Comm▾ » se lisait comme un mot entier. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* UN QUART DE PLUS POUR LE PLAN : à parts égales, les deux faisaient 116 px
     à 390 px et « Sur cette page » en demande 124 — le libellé se coupait sur
     sa dernière lettre (règle 34). Un titre de chapitre, lui, se lit tronqué :
     son numéro vient en premier. */
  .toolbar.foot .toc-jump { flex-grow: 1.25; }
  html:has(.toolbar.foot) #content { padding-top: 20px; padding-bottom: 86px; }
  html:has(.toolbar.foot) #toTop, html:has(.toolbar.foot) #toast { bottom: 88px; }
}