/* Les boutons : une seule échelle, la barre qui les porte, et le retour en haut. */

.toolbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);padding:14px 0;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--line);margin-bottom:10px}
/* SOUS 1000 PX, ELLE NE COLLE PLUS. Le ☰ est posé en fixe au coin haut-gauche ;
   la barre, collante à top:0, venait se garer dessous dès qu'on faisait défiler
   — et « Imprimer » disparaissait sous le bouton du menu. Sur un téléphone,
   cinquante pixels d'actions figées en haut d'un chapitre coûtent d'ailleurs
   plus qu'ils ne servent : on y vient pour lire. */
@media(max-width:1000px){.toolbar{position:static;backdrop-filter:none}}
/* LA BARRE DU HAUT D'UN CHAPITRE, DISCRÈTE : trois petits boutons rangés à
   droite, sans filet — sept boutons pleine taille au-dessus du titre étaient
   « trop présents » (19 septembre 2026). Le reste est derrière « ⋯ ». */
.toolbar.page{padding:6px 0;gap:6px;justify-content:flex-end;border-bottom:none;margin-bottom:0}
/* ═══════════════ LES BOUTONS — UNE SEULE ÉCHELLE ═══════════════
   Il y en avait sept formes : .btn, .tool-btn, « #manage .btn »,
   « .perm-row .btn », « .row-actions .btn », .account-btn, #btnImprimer —
   chacune avec sa taille, son arrondi et sa graisse. Trois se touchaient dans
   le même bandeau du menu, et ça se voyait : « Reprendre » n'avait ni la
   hauteur ni la largeur de « Préférences », posé juste à côté.

   Une règle donne la FORME, un modificateur la TAILLE (.sm), trois le RÔLE
   (.pri, .danger, .active). Un bouton neuf n'a plus rien à redéfinir — et
   deux boutons voisins ne peuvent plus se désaccorder.

   `display:inline-block` et non `inline-flex` : « Suivant → Le titre du
   chapitre » est un lien coupé par une ellipse, et `text-overflow` ne
   s'applique pas au texte nu d'un conteneur flex. */
/* EN REM, PAS EN PIXELS. C'est l'échelle unique de tous les boutons du site —
   le bandeau du menu, la barre d'un chapitre, chaque dialogue — et elle était
   la première chose que le curseur « taille du texte » ne déplaçait pas :
   mesurée le 9 septembre 2026, « #tools .btn » rendait 13 px à 80 % comme à
   140 %. UI.md règle 3 la cite nommément. */
.btn{display:inline-block;padding:8px 14px;font-size:var(--fs-ui);line-height:1.25;
  font-family:inherit;font-weight:600;text-align:center;text-decoration:none;
  background:var(--bg2);border:1px solid var(--line);color:var(--fg2);
  border-radius:9px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--blue);color:var(--fg)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* La taille resserrée : une action de LIGNE — renommer, supprimer, retirer —
   dans un tableau ou sous le sommaire. Jamais une action de page. */
.btn.sm{padding:5px 10px;font-size:var(--fs-floor);border-radius:8px}
/* ═══════ LE TEXTE POSÉ SUR UN ACCENT : var(--bg), jamais #fff ═══════
   Un bouton principal, un onglet actif, une pastille cochée : du texte sur le
   bleu ou le vert du thème. Il était blanc en dur — et le blanc sur le bleu du
   thème sombre donne 3,2 de rapport, 2,4 sur « océan », 2,46 sur « contraste »
   dont c'est pourtant tout le propos. Sous la barre de 4,5 de la norme, et ça
   se paie au soleil sur un téléphone.

   `var(--bg)` est le papier du thème : sombre sur un accent clair, clair sur un
   accent sombre. Le rapport ne descend jamais sous 4,8 sur les dix thèmes, et
   un thème neuf l'obtient sans rien avoir à déclarer. `contrast.js` le mesure. */
.btn.pri{background:var(--blue);border-color:var(--blue);color:var(--bg)}
.btn.pri:hover{color:var(--bg);filter:brightness(1.08)}

/* IL SE VOIT, OU IL NE SERT À RIEN. Il portait le fond et le filet d'une carte
   ordinaire : posé sur la page, à côté du texte, on ne le distinguait plus du
   fond — et un bouton qu'on ne trouve pas ne remonte personne. L'accent plein,
   comme un bouton principal, avec `var(--bg)` pour le glyphe : c'est le papier
   du thème, donc lisible sur les dix palettes. */
#toTop{position:fixed;right:26px;bottom:26px;z-index:150;width:50px;height:50px;border-radius:50%;
  background:var(--blue);border:1px solid var(--blue);color:var(--bg);cursor:pointer;
  font-size:22px;/* glyphe fixe : la flèche dans un disque de 50 px */line-height:1;font-weight:700;display:none;
  box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .15s,filter .15s}
#toTop:hover{filter:brightness(1.1);transform:translateY(-2px)}
#toTop:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
#toTop.show{display:block}

/* ═══════════ AU DOIGT : 48 PX, DANS LES DEUX DIMENSIONS ═══════════
   Mesuré à 390 px le 9 septembre 2026, avant correction : « .btn » 34 px de
   haut sur les six barres d'un chapitre, « .btn.sm » 45 × 30 dans les lignes
   de l'administration, les boutons de wiki 36, l'en-tête d'une partie 22, une
   entrée de sommaire 29. Aucun ne visait le doigt. La hauteur se gagne au
   REMPLISSAGE, pas à un « height » : le libellé reste centré, et l'ellipse de
   « Suivant → … » continue de fonctionner sur un inline-block. */
@media(max-width:1000px),(pointer:coarse){
  /* La LARGEUR aussi : « ↩️ » et « ✏️ » sont des boutons à un seul glyphe, et
     ils mesuraient 38 et 45 px de large pour 48 de haut. UI.md a déjà tranché
     l'argument « c'est la hauteur qu'un doigt vise » : il vise une surface. */
  .btn,.btn.sm{min-height:48px;min-width:48px;padding-top:0;padding-bottom:0;line-height:48px}
}