/* ---- LA PORTE FERMÉE : ce qu'on voit avant d'avoir un compte ----
   Un wiki fermé n'affiche ni sommaire ni chapitre : cet écran est tout ce qui
   reste, donc il porte son titre, sa phrase et son bouton — et rien d'autre.
   La boîte de connexion s'ouvre par-dessus ; le bouton reste derrière pour que
   la refermer ne laisse pas devant une page dont plus rien ne repart. */
.gate { max-width: 34rem; margin: 12vh auto 0; padding: 0 4px; text-align: center; }
.gate h1 { font-size: clamp(1.625rem, 6.2vw, 2.125rem); line-height: 1.15;
  margin: 0 0 14px; border: none; padding: 0; }
.gate-line { font-size: .9375rem; line-height: 1.65; color: var(--fg2);
  margin: 0 0 22px; }
/* Une cible tactile posée dans un conteneur centré ne se laisse pas comprimer :
   « flex:0 0 auto » plutôt qu'une largeur seule, sinon elle rétrécit sous les
   48 px à la première largeur étroite. */
.gate .btn { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-height: 48px; min-width: 48px; padding-inline: 22px; }

/* ---- FILTRER UN CHAPITRE ----
   942 lignes pour Kubernetes : sans champ, retrouver « inode » demande de lire la page
   entière. Il vit dans l'encart « Ce chapitre » ; « / » y amène, encart replié compris. */
.sheet-off { display: none !important; }
.sheet-filter { display: flex; align-items: center;
  gap: 10px; margin: 0 0 8px; }
.sheet-field { flex: 1 1 auto; min-width: 0; min-height: 44px;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 13px; font: inherit; font-size: var(--fs-ui); }
.sheet-field:focus { outline: none; border-color: var(--blue); }
.sheet-count { flex: 0 0 auto; font-size: var(--fs-floor); color: var(--fg3);
  font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .sheet-field { min-height: 48px; } }

/* ---- UN RENVOI QUI NE MÈNE NULLE PART SE VOIT ----
   Il restait bleu jusqu'au clic : renommer un chapitre en fabriquait dix d'un
   coup, sans qu'une seule page ait l'air cassée. Barré et grisé, il se corrige
   à la relecture ; il reste cliquable, car la cible peut revenir. */
.module a.dead { color: var(--fg3); text-decoration: line-through; cursor: help; }
/* L'emoji du rang au-dessus, puis l'icône du chapitre lié, un cran plus petite. */
.module .lead-em { font-size: 1.45em; line-height: 1; vertical-align: -.12em; }
.module a > .nav-em { font-size: 1.1em; }

/* ---- RENVOIS : « Voir aussi », ET « On arrive ici depuis » ----
   LA FORME EST AU MOTEUR, pas au greffon. Elle vivait dans le `STYLE` de
   blocks/seealso.js : une page qui n'écrivait aucun « ::: seealso » ne
   chargeait donc pas ce greffon, et le bloc « On arrive ici depuis » — que
   c'est LE MOTEUR qui pose — s'affichait en liste à puces nue, sans encart
   (21 septembre 2026). Le greffon garde le sien pour qui l'emporte seul ;
   celles-ci sont les règles de la page. */
.seealso { background: var(--bg2); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: var(--radius); padding: 12px 18px; margin: 22px 0; }
.seealso > b { display: block; font-size: var(--fs-floor); text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg3); margin-bottom: 6px; }
.seealso ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
/* La même forme dans l'autre sens : un lecteur ne doit pas avoir à distinguer
   deux mises en page pour un seul geste. Le filet passe à droite — c'est la
   seule chose qui dise le sens. */
.seealso.inbound { border-left: 1px solid var(--line); border-right: 3px solid var(--fg3); }

/* ---- S'ENTRAÎNER : réviser, ou passer un examen blanc ----
   UNE question à la fois, et rien autour : c'est tout ce que l'écran doit
   porter (UI.md, règle 10). Chaque chose qu'on touche fait 48 px de haut, au
   doigt comme à la souris — c'est sur un téléphone que ça se joue, dans les
   dix minutes où l'on révise vraiment. */
.revise { display: flex; flex-direction: column; gap: 12px; }
/* Pleine largeur, comme tout ce qui se clique ici : un seul gabarit du haut en
   bas, sinon l'œil compte trois formes avant d'arriver à la question. */
.revise .btn { display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; text-align: center; }
.rv-mode { font-weight: 600; }
.rv-help { font-size: var(--fs-ui); line-height: 1.6; color: var(--fg2); margin: 0 0 6px; }
.rv-count { font-size: var(--fs-floor); color: var(--fg3);
  font-variant-numeric: tabular-nums; }
.rv-track { height: 6px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.rv-track > i { display: block; height: 100%; width: 0; background: var(--blue);
  transition: width .25s; }
.rv-card { display: flex; flex-direction: column; gap: 12px; }
.rv-where { font-size: var(--fs-floor); color: var(--fg3); }
.rv-q { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.rv-opts { display: flex; flex-direction: column; gap: 8px; }
/* Une option est une PHRASE, pas un mot : elle se met sur plusieurs lignes au
   lieu d'être coupée, et garde ses 48 px quand elle n'en tient qu'une. */
.revise .rv-opt { justify-content: flex-start; text-align: left; white-space: normal;
  padding: 11px 14px; height: auto; line-height: 1.45; }
.revise .rv-opt.good { border-color: var(--green); color: var(--fg); }
.revise .rv-opt.bad { border-color: var(--red); color: var(--fg); }
.rv-why { font-size: var(--fs-ui); line-height: 1.6; color: var(--fg2);
  border-left: 3px solid var(--line); padding-left: 11px; }
.rv-answer { font-size: 1rem; line-height: 1.55; border-left: 3px solid var(--blue);
  padding-left: 11px; }
.rv-score { font-size: clamp(1.625rem, 6.2vw, 2.125rem); line-height: 1.15;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-sub { margin: 6px 0 0; }
.rv-missed { display: flex; flex-direction: column; gap: 8px; }
/* La carte est cliquable JUSQU'EN BAS (UI.md, règle 27) : c'est le lien qui
   porte les deux lignes, pas une case autour de lui. */
.revise a.rv-miss { flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; text-decoration: none; white-space: normal;
  padding: 10px 14px; height: auto; line-height: 1.45; }
.rv-miss-q { font-weight: 600; }
.rv-miss-w { font-size: var(--fs-floor); color: var(--fg3); }

/* ---- MA NOTE : le carnet du lecteur, sous le chapitre ----
   Fermé par défaut et discret : c'est un tiroir, pas une section du texte.
   Ouvert, il prend la largeur de la colonne pour qu'on puisse y écrire. */
.mynote { margin: 24px 0 0; padding: 8px 12px; border: 1px dashed var(--line);
  border-radius: 8px; background: var(--bg2); }
.mynote > summary { cursor: pointer; font-weight: 600; min-height: 32px;
  display: flex; align-items: center; }
.mynote textarea { width: 100%; margin-top: 8px; padding: 8px; box-sizing: border-box;
  font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; resize: vertical; }
.mynote-say { display: block; min-height: 18px; font-size: .85em; color: var(--fg3); }
.mynote.full > summary::after { content: ' •'; color: var(--blue); }