/* ---- LE FIL D'ARIANE : où l'on est, au-dessus du titre ----
   UNE SEULE LIGNE, QUEL QUE SOIT LE NOMBRE DE CRANS. Chaque cran était une
   pastille encadrée dans une rangée qui passe à la ligne : à 390 px comme à
   1280, deux crans s'empilaient à gauche du titre et l'en-tête devenait bancal
   (« trouve un autre moyen d'afficher le chemin, là c'est mal fait »,
   20 septembre 2026, capture à l'appui).

   Du texte-lien discret, souligné en pointillé pour qu'il se lise comme un
   lien, séparé par « › ». C'EST LE MILIEU QUI CÈDE : les crans intermédiaires
   portent un `flex-shrink` cent fois plus fort que les deux bouts, donc ils
   s'abrègent en « … » avant que le premier (le wiki) et le dernier (là d'où
   l'on vient) ne bougent. Aucun glissé latéral (règle 46) : `overflow:hidden`
   et pas `auto`. Le chemin entier reste lisible au survol et au doigt, par le
   `data-tip` posé sur le <nav> (règle 42). */
.crumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  margin: 0 0 10px; min-width: 0; overflow: hidden;
  font-size: var(--fs-ui); line-height: 1.3; }
/* `block` ET NON `inline-flex` : sur un conteneur flexible, `text-overflow`
   ne s'applique pas — le cran se faisait COUPER net, sans « … », par
   l'`overflow:hidden` du fil (capture du 20 septembre 2026). */
.crumbs .crumb { display: block; line-height: 20px; color: var(--fg2);
  text-decoration: none; min-width: 3ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 0 100 auto; }
/* Les deux bouts tiennent bon — cent fois mieux que ce qui est entre eux — et
   ils gardent un plancher de neuf caractères : « 🎮 S » ne dit plus rien. */
.crumbs .crumb:first-child { flex-shrink: 1; min-width: 9ch; }
.crumbs .crumb:last-child { flex-shrink: 2; min-width: 9ch; }
.crumbs a.crumb { color: var(--fg); text-decoration: underline dotted;
  text-underline-offset: 3px; text-decoration-color: var(--fg3); }
.crumbs a.crumb:hover { color: var(--blue2); text-decoration-color: var(--blue); }
.crumbs a.crumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.crumbs .crumb-sep { color: var(--fg3); flex: 0 0 auto; }
/* AU DOIGT, UN CRAN SE VISE (UI.md, règle 4) : la hauteur de la cible passe à
   48 px sans que le fil quitte sa ligne — c'est le remplissage vertical qui
   grandit, pas la boîte. */
@media (pointer: coarse) { .crumbs .crumb { padding: 14px 0; } }
/* LE FIL ET LA BARRE SUR UNE LIGNE, qui seule colle : le titre reste dans sa section, centré sur la colonne
   du chapitre, et s'en va au défilement (« les titres se cachent, pas la ligne du haut », 9 octobre 2026). */
/* C'est l'en-tête qui colle, plus la barre : collante dans un conteneur à sa hauteur, elle ne collait plus à rien. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "crumbs bar"; align-items: center; gap: 6px 16px; margin-bottom: 10px; padding: 6px 0;
  position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); }
.page-head > .crumbs { grid-area: crumbs; margin: 0; }
.page-head > .toolbar.page { grid-area: bar; justify-self: end; position: static; background: none; backdrop-filter: none;
  flex-wrap: nowrap; white-space: nowrap; min-width: 0; max-width: 100%; }
/* Sous 1000 px l’en-tête ne colle plus, et le fil se range à côté du ☰. */
@media (max-width: 1000px) {
  html:has(.page-head) #content { padding-top: 14px; }
  .page-head { position: static; backdrop-filter: none; background: none; min-height: 48px; padding: 0; }
  .page-head > .toolbar.page { padding: 0; }
  .page-head > .crumbs { margin-left: 62px; }
  /* La colonne du fil garde la place du ☰ fixe : une barre large venait se poser dessous. */
  .page-head { grid-template-columns: minmax(62px, 1fr) auto; }
}
@media (max-width: 959px) and (pointer: coarse) {
  html:has(.toolbar.foot) .page-head > .crumbs { margin-left: 0; }
  html:has(.toolbar.foot) .page-head { grid-template-columns: minmax(0, 1fr) auto; }
  html:has(.toolbar.foot) #content { padding-top: 20px; }
}

/* ---- LE PLAN « SUR CETTE PAGE » : un rail collant, plus un encart ----
   C'était un repli posé au-dessus du texte. Ouvert sur un grand écran, il
   prenait 240 px avant le premier paragraphe — la lecture commençait sous la
   ligne de flottaison (UI.md, règle 35) ; replié sur un téléphone, il ajoutait
   un bouton de plus. Un sommaire de page n'est pas une préface : il accompagne
   la lecture, donc il vit À CÔTÉ d'elle.

   Rien ne s'affiche par défaut : chaque forme s'allume dans sa requête, et une
   seule à la fois (UI.md, règle 30). */
.page-toc, .toc-jump { display: none; }

/* ── DÈS 1200 PX : LE RAIL, À DROITE DE LA COLONNE ──
   232 px, c'est la largeur qui tient un titre de section moyen sur deux lignes
   sans voler de place au texte : sous 1200 px, la colonne de lecture tomberait
   sous 700 px et c'est elle qu'on est venu lire. */
@media (min-width: 1200px) {
  #content:has(.page-toc) { display: grid; grid-template-columns: minmax(0, 1fr) 232px;
    column-gap: 32px; align-items: start; }
  #content:has(.page-toc) > * { grid-column: 1; min-width: 0; }
  #content:has(.page-toc) > .toolbar.foot { grid-column: 1 / -1; }
  /* Rangée 2 : le rail à côté de la section, donc collant sur toute sa hauteur.
     `top` dégage l'en-tête (fil · barre), qui colle déjà en 0. */
  #content:has(.page-toc) > .page-toc { display: block; grid-column: 2; grid-row: 2;
    position: sticky; top: 64px; max-height: calc(100dvh - 96px); overflow-y: auto;
    border-left: 2px solid var(--line); padding: 2px 0 2px 14px; }
  #content:has(.page-toc) > .module { grid-row: 2; }
}
.toc-h { font-size: var(--fs-floor); text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--fg3); font-weight: 700; margin-bottom: 8px; }
.toc-l { display: flex; flex-direction: column; gap: 1px; }
/* Un lien de rail, pas une pastille : c'est une liste qu'on balaie du regard
   pendant qu'on lit, et douze pastilles encadrées en feraient un second menu.
   Le trait de gauche fait l'état — il est là, incolore, sur chaque ligne, donc
   la ligne ne bouge pas d'un pixel quand elle s'allume (règle 8). */
.toc-a { display: block; padding: 6px 8px; border-left: 2px solid transparent;
  margin-left: -16px; font-size: var(--fs-ui); line-height: 1.35; color: var(--fg3);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; transition: color .15s, border-color .15s; }
.toc-a:hover { color: var(--fg); border-left-color: var(--fg3); }
/* LÀ OÙ L'ON EST, SANS COMPARER (règle 1) : trait plein, texte à la couleur du
   corps, fond teinté — trois signaux, parce qu'un rail se lit du coin de l'œil.
   Le TEXTE reste `--fg` et non `--blue2` : mesuré sur les onze thèmes, l'accent
   sur un fond bleuté à 16 % tombait à 2,08 sur « ocean » et 2,20 sur « ember »,
   là où la couleur du corps garde le contraste du corps partout. */
.toc-a.active { color: var(--fg); border-left-color: var(--blue); font-weight: 600;
  background: color-mix(in srgb, var(--blue) 16%, transparent); }
.toc-a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ── EN DESSOUS, À LA SOURIS : LA DÉROULANTE, SOUS L'EN-TÊTE ──
   Pourquoi là et pas au pied : en fenêtre étroite le pied n'est pas fixé, il
   est au BAS de la page — un plan qu'il faut atteindre en défilant ne sert
   plus à rien. L'en-tête, lui, colle en haut dès 1000 px : le plan reste sous
   la main pendant toute la lecture.

   SUR SA PROPRE LIGNE, et pas dans la barre : mesuré à 390 px le 20 septembre
   2026, « ☑ Tout valider » + la déroulante + « ⋯ » débordaient la rangée et
   écrasaient le fil d'Ariane — largeur du fil : 0, et « Tout valid… » passait
   SOUS la déroulante. Une ligne à elle coûte 38 px, et ne prend la place de
   rien. */
.page-head > .toc-jump { grid-area: toc; justify-self: start; }
@media (max-width: 1199px) {
  .page-head { grid-template-areas: "crumbs bar" "toc toc"; }
  .page-head > .toc-jump { display: block; max-width: min(320px, 100%);
    min-height: 38px; background: var(--bg3); color: var(--fg);
    border: 1px solid var(--line); border-radius: 8px; padding: 0 8px;
    font: inherit; font-size: var(--fs-ui); }
  .page-head > .toc-jump:hover { border-color: var(--blue); }
}
/* SOUS 700 PX, LA BARRE RESTE EN HAUT À DROITE, comme à l'ordinateur (« tout en haut sur la droite », 9 octobre 2026) :
   ses boutons n'y gardent que leur emoji, le mot passe dans l'infobulle, et le fil s'abrège à côté. */
@media (max-width: 700px) {
  .page-head > .toolbar.page .lb { display: none; }
  .page-head > .toolbar.page { flex-wrap: wrap; justify-content: flex-end; }
  /* Le fil réserve la hauteur du ☰ fixe (48 px) : sur une ligne, le titre remontait dessous. */
  .page-head > .crumbs { min-height: 48px; }
}
@media (max-width: 700px) and (pointer: coarse) {
  html:has(.toolbar.foot) .page-head > .crumbs { min-height: 0; }
}
/* SOUS LE POUCE, LE PLAN N'EST QUE DANS LA BARRE DU BAS : les deux s'affichaient
   ensemble — la même commande à deux endroits (UI.md, règle 30). Écrit ICI,
   après la règle qui l'allume : à spécificité égale, c'est l'ordre qui tranche. */
@media (max-width: 959px) and (pointer: coarse) {
  .page-head > .toc-jump { display: none; }
}
/* `hint()` pose `data-tip`, et `base.css` souligne en pointillé tout ce qui en
   porte : sur un <nav> la décoration descend dans les liens, qui héritaient
   d'un DOUBLE soulignement et d'un curseur « aide » alors qu'ils se cliquent.
   La bulle reste, la décoration revient aux crans eux-mêmes. */
.crumbs[data-tip] { text-decoration: none; cursor: default; }
.crumbs a.crumb { cursor: pointer; }
/* `:not(:empty):not(.btn)` : sans eux, la règle de `base.css` (0,3,2) l'emportait, et « Sur cette page » restait pointillé. */
select.toc-jump[data-tip]:not(:empty):not(.btn) { text-decoration: none; cursor: pointer; }

/* ---- « ↩︎ Revenir où j'étais » ----
   Fixée en bas à gauche, au-dessus de la barre du pouce et à l'opposé du
   « ↑ haut de page » : deux pastilles au même coin se recouvriraient. */
.resume-pill { position: fixed; left: 14px; bottom: 18px; z-index: 120;
  background: var(--bg3); color: var(--fg); border: 1px solid var(--blue);
  border-radius: 999px; font: inherit; font-size: var(--fs-ui); cursor: pointer;
  min-height: 48px; padding: 0 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  opacity: 1; transition: opacity .25s; }
.resume-pill:hover { border-color: var(--blue2); color: var(--blue2); }
.resume-pill.gone { opacity: 0; }
@media (max-width: 959px) and (pointer: coarse) { .resume-pill { bottom: 88px; } }

/* Le rail ne s’imprime pas : sur papier, le plan c’est la page elle-même. */
@media print { .page-toc, .toc-jump { display: none !important; } }