/* Le menu des choses à cocher d'une page — « À cocher ici ». */

/* ============================================================
   CE QUI RESTE ICI

   Le PLAN de la page est parti dans un rail collant (`js/read/page/outline.js`,
   `.page-toc` dans `css/read/outline.css`) le 20 septembre 2026 : un encart replié en tête
   de chapitre repoussait le premier paragraphe de 243 px. Ces règles-ci
   servent encore au menu des tâches, qui a la même forme — un repli, une
   rangée de liens — et c'est pour ça qu'elles ne sont pas parties avec lui.
   ============================================================ */
.outline {
  margin: 14px 0 22px; padding: 12px 16px;
  background: var(--bg2); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: var(--radius);
}
/* IL OUVRE ET IL FERME LE PLAN, DONC C'EST UN BOUTON. Mesuré le 9 septembre
   2026 : 834 × 23 px, ni fond ni filet — la seule chose qui le distinguait du
   bloc qui le porte était un chevron de treize pixels. */
.outline-t {
  font-size: var(--fs-floor); text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--fg2); font-weight: 700; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 7px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; min-height: 48px;
}
.outline-t:hover { border-color: var(--blue); color: var(--fg); }
.outline-t::-webkit-details-marker { display: none; }
/* Le chevron dit d'un coup d'œil que le bloc s'ouvre — et de quel côté : dessiné dans `blocks/nav.css`, avec ceux des menus. */
.outline[open] .outline-t { margin-bottom: 8px; }
.outline-l { display: flex; flex-wrap: wrap; gap: 6px; }
/* CHAQUE ENTRÉE EST UNE PASTILLE, ET ÇA SE VOIT. Le fond était transparent et
   le filet aussi : six titres alignés sur le fond du bloc se lisaient comme
   une seule phrase, et on ne savait pas où commençait le lien suivant.
   `nowrap` + `flex:0 0 auto` : dans une rangée flexible, un lien se laisse
   comprimer avant de changer de ligne — « virsh » se retrouvait scié en deux
   dès qu'on resserrait la fenêtre. Il passe à la ligne, il ne se casse plus. */
.outline-a {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: var(--fs-ui); line-height: 1.35; color: var(--fg2);
  text-decoration: none; border: 1px solid var(--line);
  background: var(--bg3); transition: .15s;
  flex: 0 0 auto; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.outline-a:hover { border-color: var(--blue); color: var(--fg); }
/* Le titre où l'on se trouve porte l'accent plein, comme un bouton principal :
   `var(--bg)` est le papier du thème, donc lisible sur les dix palettes. */
.outline-a.active { color: var(--bg); border-color: var(--blue); background: var(--blue); }

/* ---- LE MENU DES CHOSES À COCHER ----
   Même forme que le plan — c'est la même navigation, sur un autre axe : le plan
   mène aux sections, celui-ci aux gestes. Le liseré vert le distingue du bleu
   du plan sans qu'on ait à lire son titre, et reprend la couleur que portent
   déjà partout la validation d'une tâche et le bouton « Je l'ai fait ». */
.outline.todo { border-left-color: var(--green); margin: -4px 0 14px; padding: 6px 10px; }
/* Une tâche par ligne : en rangée, deux courtes se casaient côte à côte et pas les longues, une liste en dents de scie. */
.todo .outline-l { flex-direction: column; align-items: flex-start; }
/* Le plan d'une présentation : une partie = son nom, puis ses chapitres en pastilles. */
.outline.plan { margin: -4px 0 14px; padding: 6px 10px; }
.plan-part + .plan-part, .outline-l + .plan-part, .plan-part + .outline-l { margin-top: 10px; }
.plan-h { display: inline-block; margin: 0 0 6px; font-weight: 700; font-size: var(--fs-ui); color: var(--fg); text-decoration: none; }
a.plan-h:hover { color: var(--blue); }
.outline-t > .mod-meta { margin: 0 0 0 auto; justify-content: flex-end; text-transform: none; letter-spacing: 0; }
.todo-a::before { content: '☐'; margin-right: 6px; opacity: .75; }
.todo-a.done::before { content: '☑'; color: var(--green); opacity: 1; }
/* Fait = rangé, pas effacé : on doit pouvoir y revenir, mais l'œil doit tomber
   sur ce qui reste. */
.todo-a.done { color: var(--fg3); text-decoration: line-through; opacity: .8; }
.todo-a.done:hover { text-decoration: none; opacity: 1; }
.todo-a.done.active, .todo-a.active { text-decoration: none; }

@media (max-width: 700px) {
  .outline { padding: 10px 12px; }
  .outline-l { flex-direction: column; gap: 4px; }
  /* En colonne, chaque entrée occupe la largeur : plus rien ne la comprime,
     et un titre long se replie plutôt que de finir en « … ». Elle faisait
     34 px de haut, mesurée le 9 septembre 2026 : c'est le premier lien qu'on
     touche en ouvrant un chapitre au téléphone. */
  .outline-a { padding: 7px 10px; border-radius: 8px; white-space: normal;
    overflow: visible; min-height: 48px; display: flex; align-items: center; }
}
/* « À cocher ici » plus petit (9 octobre 2026) ; sous le doigt, la cible garde ses 48 px. */
.todo .outline-t, .plan .outline-t { min-height: 32px; padding: 4px 10px; }
@media (pointer: coarse) { .todo .outline-t, .plan .outline-t { min-height: 48px; } }
.todo .outline-a { padding: 2px 9px; }