/* ═══════════════════════════════════════════════════════════════════════════
   fabunia.css — LA feuille de style. Une seule, pour toutes les pages.

   Avant elle, quatre pages portaient quatre largeurs (960, 1140, 900, 1120 px)
   et quatre palettes. On changeait d'onglet et on changeait de site.

   ⚠️ SOURCE UNIQUE. `index.html` la lie ; les pages engendrées l'incorporent en
   ligne au moment de la construction, pour rester autonomes en projection et
   dans l'export nomade. Aucune page ne redéfinit un jeton pour son compte.

   Zéro appel réseau : aucune police distante, aucune image distante.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- encre et papier ------------------------------------------------- */
  --encre:#14181a;          /* presque noir, tirant sur le vert */
  --gris:#5d6a66;
  --fond:#fbfaf7;           /* papier légèrement froid, jamais crème */
  --blanc:#ffffff;
  --filet:#e2e4e0;

  /* ---- la signature ---------------------------------------------------- */
  --vert:#1f5130;           /* le tableau et l'atelier — 8,83:1 sur le fond */
  --vert-clair:#e6f0ea;
  --vert-vif:#2f7a4a;       /* réservé aux surfaces, jamais au texte fin */

  /* ---- les cinq périodes, une couleur chacune -------------------------- */
  --p1:#1f5130;  --p1-clair:#e6f0ea;
  --p2:#25506f;  --p2-clair:#e4eef6;
  --p3:#4a3b6b;  --p3-clair:#eeeaf6;
  --p4:#8a5000;  --p4-clair:#fbf0dd;
  --p5:#6b1f2e;  --p5-clair:#f8e7ea;

  /* ---- alias historiques, conservés : des pages les emploient déjà ----- */
  --bleu:#25506f;    --bleu-clair:#e4eef6;
  --violet:#4a3b6b;  --violet-clair:#eeeaf6;
  --ocre:#8a5000;    --ocre-clair:#fbf0dd;
  --prune:#6b1f2e;   --prune-clair:#f8e7ea;
  --acier:#606462;   --acier-clair:#eeefed;

  /* ---- la mesure : UNE largeur, et c'est tout -------------------------- */
  /* ⛔ ÉLARGIE À 1320 px — Emmanuel, 2026-09-04 : « pour le site, je pense qu'on pourra
     élargir la largeur globale, pour laisser plus d'espace ». Le plan des séances est la
     page qui en profite : une ligne de déroulé porte les minutes, la jauge, deux jeux
     d'heures le mercredi, l'intitulé, la bande « je sors » et la cible de droite — à
     1140 px, l'intitulé se cassait en deux lignes dès qu'une ligne était fournie.
     ⚠️ Ce n'est PAS la largeur de lecture : `--largeur-texte` ne bouge pas, et tout ce
     qui se lit en continu reste à 68 caractères. Élargir un texte suivi le rendrait
     moins lisible, pas plus — c'est la seule chose que cette valeur ne doit jamais
     faire. */
  --largeur:1320px;         /* la seule largeur de page du site */
  --largeur-texte:68ch;     /* la seule largeur de lecture suivie */
  /* ⚠️ LA GOUTTIÈRE, et elle respire avec l'écran. À 1,6 rem fixe, un téléphone de
     390 px donnait 51 px de marge à un texte qui n'en avait que 339 : la gouttière
     mangeait un septième de la ligne. `clamp` la ramène à 16 px sur téléphone et la
     laisse à 25,6 px dès qu'il y a de la place. */
  --marge:clamp(1rem, 3.4vw, 1.6rem);
  /* La gouttière RÉELLE : la marge, sauf si l'encoche d'un téléphone en paysage
     demande davantage. Un jeton, parce que le rang d'onglets doit la déborder
     exactement — et qu'une valeur recopiée à deux endroits diverge. */
  --gouttiere:max(var(--marge), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --rayon:10px;
  --rayon-petit:6px;
  /* La hauteur du bandeau collant, DÉCLARÉE — parce que trois choses en dépendent :
     l'ancre qui saute à un item (`:target`), le lecteur collant de l'explorateur et
     tout en-tête de tableau qui voudrait se figer. Elle était écrite en dur à 60 px
     ici et à 76 px ailleurs ; sur téléphone le bandeau en fait 100, et l'ancre
     atterrissait DERRIÈRE lui. */
  --h-bandeau:60px;
  /* La zone tactile minimale. « zones tactiles de 48 px » — design/README.md, mode
     Classe. Elle vivait dans site.css et n'existait que sur deux pages du site. */
  --touche:48px;
  --ombre:0 1px 2px rgba(20,24,26,.05), 0 4px 16px rgba(20,24,26,.06);
  --ombre-levee:0 3px 8px rgba(20,24,26,.09), 0 12px 32px rgba(20,24,26,.10);
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --police-chiffres:ui-monospace,Menlo,Consolas,"SFMono-Regular",monospace;
}

* { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

/* ⛔ LE PIED SE POSE AU BAS DE L'ÉCRAN — 2026-08-28. *« Le footer est trop détaché du
   bas de l'écran ! Pfff »* Sur une page courte — celle d'un outil, « La démarche » —, le
   pied venait se coller sous le dernier bloc et laissait deux cents pixels de vide EN
   DESSOUS de lui : il flottait au milieu de l'écran, et l'on ne savait plus si la page
   était finie ou si le reste tardait à charger.
   La page est donc une colonne haute d'au moins un écran, et le contenu POUSSE le pied
   vers le bas. ⚠️ C'est `main` qui grandit, pas le pied qui se colle : avec
   `margin-top:auto` sur le pied, sa distance au contenu changerait d'une page à l'autre.
   Ici, l'écart au-dessus du filet reste le même partout — 2,5 rem —, et la page longue
   ne bouge pas d'un pixel.
   ⚠️ `dvh` et non `vh` : sur un téléphone, la barre d'adresse se replie en défilant, et
   `100vh` réserve toujours la hauteur SANS elle — un écran de trop, donc du vide sous le
   pied, exactement le défaut qu'on corrige. */
body {
  margin:0; background:var(--fond); color:var(--encre);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  font:16px/1.55 var(--police);
  /* Un mot plus long que la colonne — une adresse, un nombre à rallonge — poussait la
     page entière au-delà de l'écran et toute la mise en page se décalait. Il se coupe. */
  overflow-wrap:break-word;
  /* une trame de papier, dessinée en CSS : aucune image, aucun appel réseau */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(31,81,48,.045), transparent 42%),
    radial-gradient(circle at 86% 4%,  rgba(37,80,111,.04), transparent 38%);
  background-attachment:fixed;
}

/* ── L'ENVELOPPE — la largeur unique, et la gouttière ─────────────────────────
   ⛔ LA GOUTTIÈRE EST ÉCRITE EN `padding-inline`, ET CE N'EST PAS UN DÉTAIL.

   Elle a été écrite `padding:0 var(--marge)` pendant tout l'été. Deux classes qui
   se posent SUR la même balise — `.titre-page` et `.section` — portaient un
   `padding` en RACCOURCI, plus bas dans la feuille : à spécificité égale, la
   dernière déclaration gagne, et le raccourci remet le padding horizontal à zéro.

   Sur grand écran cela ne se voyait pas : la page est bridée à 1140 px et flotte au
   milieu de l'écran, donc il reste de la marge de toute façon. Sur un téléphone,
   `.enveloppe` fait exactement la largeur de l'écran — et le titre, le texte et les
   cartes venaient toucher les deux bords. C'est ce qu'Emmanuel a vu le 2026-08-20 :
   « il manque des espaces sur le bord ».

   Deux règles, donc, et `tests/site/verifier-responsive.py` refuse leur violation :
   1. la gouttière s'écrit en `padding-inline`, jamais en raccourci ;
   2. toute classe qui s'ajoute à `.enveloppe` s'écrit en `padding-block`. */
.enveloppe {
  width:100%; max-width:var(--largeur); margin-inline:auto;
  padding-inline:var(--gouttiere);
}

/* ── LE BANDEAU — identique sur toutes les pages ─────────────────────────── */
.bandeau {
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,.93); backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--filet);
}
.bandeau-int { display:flex; align-items:center; gap:.4rem 1.6rem; min-height:var(--h-bandeau); }

.marque { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit;
  font-weight:700; letter-spacing:-.015em; font-size:1.06rem; flex:none; }
.marque .pastille { width:26px; height:26px; border-radius:7px; flex:none;
  background:linear-gradient(145deg, var(--vert-vif), var(--vert));
  display:grid; place-items:center; color:#fff; font-size:.78rem; font-weight:800; }
.marque small { display:block; font-weight:500; font-size:.7rem; color:var(--gris);
  letter-spacing:0; margin-top:-2px; }

/* ⚠️ `flex-wrap:wrap` était la seule réponse du bandeau à l'étroitesse : sept onglets
   se rangeaient sur TROIS rangs et le bandeau collant mesurait 233 px de haut — plus
   du quart d'un écran de téléphone, à demeure, sur les sept pages. « menu du haut
   surchargé », 2026-08-20. Sous 900 px il devient un rang qui DÉFILE : voir le pavé
   RESPONSIVE en fin de feuille. */
.onglets { display:flex; gap:.15rem; flex-wrap:wrap; margin-left:auto; }
.onglets a {
  /* min-height:var(--touche) et non plus un simple bloc : sur tablette, un onglet de
     34 px se rate. C'est le mode Classe qui commande — design/README.md. */
  display:flex; align-items:center; min-height:var(--touche);
  padding:.5rem .8rem; border-radius:var(--rayon-petit);
  text-decoration:none; color:var(--gris); font-size:.88rem; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
}
.onglets a:hover { background:var(--vert-clair); color:var(--vert); }
.onglets a[aria-current="page"] {
  background:var(--vert); color:#fff;
}
/* L'anneau de focus est posé sur TOUT ce qui peut le recevoir, et pas seulement sur
   les liens et les boutons : un champ de recherche, un <summary> repliable et une
   région défilable au clavier en ont autant besoin. Sans règle nue, l'accès clavier
   était invisible dès qu'on ajoutait un composant. */
:focus-visible { outline:3px solid var(--vert-vif); outline-offset:2px; }
:focus:not(:focus-visible) { outline:none; }
/* Le bandeau est collant : sans cette réserve, un lien d'ancre — « voir ces
   entraînements » — déposait sa cible EXACTEMENT derrière lui, et on croyait le
   lien cassé. La réserve suit la hauteur réelle du bandeau, qui change avec l'écran. */
:target { scroll-margin-top:calc(var(--h-bandeau) + .8rem); }

/* ── LE TITRE DE PAGE — même gabarit partout ─────────────────────────────── */
/* ⚠️ `padding-block`, et jamais le raccourci : cette classe se pose SUR `.enveloppe`
   et le raccourci lui effacerait sa gouttière. Voir le pavé de `.enveloppe`. */
.titre-page { padding-block:2.4rem 1.4rem; }
.titre-page h1 { margin:0 0 .4rem; font-size:2.05rem; line-height:1.15; letter-spacing:-.022em; }
/* Le chapô et les encarts prennent toute la largeur de page : ce sont des blocs
   d'annonce, pas de la lecture suivie. Bridés à 68ch ils s'arrêtaient à mi-chemin. */
.titre-page .chapo { margin:0; color:var(--gris); font-size:1rem; }
.titre-page .surtitre {
  display:inline-block; margin-bottom:.55rem; font-size:.74rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--vert);
  background:var(--vert-clair); padding:.25rem .6rem; border-radius:999px;
}

/* ── LES LIENS DU CORPS DE PAGE ──────────────────────────────────────────────
   La charte n'en disait rien : chaque page engendrée posait sa propre règle
   `a { color:var(--vert) }`, et celles qui l'oubliaient — les pages de chapitre, le
   jour où elles sont nées — affichaient des liens bleus soulignés au milieu d'une
   page verte. Les composants qui ont leur couleur (onglets, cartes, boutons,
   téléchargements) la reprennent après, et gagnent : ils sont plus spécifiques. */
/* Ce qui pousse le pied vers le bas : le contenu prend toute la place qui reste.
   `flex-shrink:0` parce qu'un contenu plus haut que l'écran ne doit pas se comprimer. */
body > main { flex:1 0 auto; }
main a { color:var(--vert); }
main a.carte, main a.dl, main a.action { color:inherit; }
main a.action { color:#fff; }
main a.action.sourdine { color:var(--vert); }

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
/* ⚠️ `padding-block` — même raison que `.titre-page` juste au-dessus. */
.section { padding-block:.6rem 2.2rem; }
.section h2 {
  display:flex; align-items:center; gap:.55rem;
  font-size:1.12rem; margin:1.8rem 0 1rem; letter-spacing:-.01em;
}
.section h2::before {
  content:""; width:9px; height:20px; border-radius:3px; background:var(--vert); flex:none;
}
.section h2 .compte { margin-left:auto; font-size:.8rem; font-weight:500; color:var(--gris); }

/* ── CARTES ──────────────────────────────────────────────────────────────── */
/* `min(272px,100%)` et non `272px` : sur un écran de 320 px, une colonne de 272 px
   plus les gouttières débordait, et c'est la PAGE ENTIÈRE qui se décalait. */
.grille { display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr)); }

.carte {
  display:block; background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--rayon); padding:1.15rem 1.25rem; box-shadow:var(--ombre);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease;
}
.carte::before {
  content:""; position:absolute; inset:0 auto 0 0; width:5px;
  background:var(--vert);
}
a.carte:hover { transform:translateY(-3px); box-shadow:var(--ombre-levee); }
.carte b, .carte h3 { display:block; font-size:1.02rem; color:var(--vert);
  margin:0 0 .3rem; letter-spacing:-.01em; }
.carte p, .carte span.desc { margin:0; font-size:.875rem; color:var(--gris); line-height:1.5; }
/* Deux paragraphes dans une carte se collaient : le chiffre et sa légende
   semblaient appartenir à la phrase suivante. */
.carte p + p { margin-top:.55rem; }
.carte .pied { margin-top:.8rem; font-size:.78rem; color:var(--gris);
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* teintes de carte, par période — et le titre suit, qu'il soit <b> ou <h3>.
   Vu à l'œil sur l'accueil du site : cinq cartes à liseré coloré, cinq titres verts.
   Le liseré disait la période, le titre disait autre chose. */
.carte.p1::before{background:var(--p1)} .carte.p1 b, .carte.p1 h3{color:var(--p1)}
.carte.p2::before{background:var(--p2)} .carte.p2 b, .carte.p2 h3{color:var(--p2)}
.carte.p3::before{background:var(--p3)} .carte.p3 b, .carte.p3 h3{color:var(--p3)}
.carte.p4::before{background:var(--p4)} .carte.p4 b, .carte.p4 h3{color:var(--p4)}
.carte.p5::before{background:var(--p5)} .carte.p5 b, .carte.p5 h3{color:var(--p5)}

/* Le titre d'un rang de téléchargements : plus discret qu'un titre de section, parce
   qu'il annonce des boutons, pas un chapitre. Il est EN HAUT de page partout où il y a
   quelque chose à prendre — « ça devrait être en haut, rapidement accessible »
   (2026-08-23). */
.section h2.tel-titre { font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--vert); margin:.4rem 0 .1rem; }
.section h2.tel-titre::before { content:none; }

/* ── VIGNETTES ────────────────────────────────────────────────────────────────
   Un dessin par destination, et LE MÊME sur la tuile de l'accueil et en tête de la
   page où elle mène : on clique sur un dessin, on retrouve ce dessin, on sait qu'on
   est au bon endroit sans relire le titre. Les dessins vivent dans
   `core/rendu/derives/_illustrations.py` — source unique.
   ⚠️ La vignette prend la couleur de sa carte : le dessin est en `currentColor`, et
   c'est la teinte de période qui décide. Sans cela, sept dessins verts sur des cartes
   de cinq couleurs — le défaut déjà corrigé sur les titres de carte. */
.vign { display:block; width:44px; flex:none; color:var(--vert); }
.vign svg { display:block; width:100%; height:auto; }
.carte .vign { margin-bottom:.7rem; }
.carte.p1 .vign{color:var(--p1)} .carte.p2 .vign{color:var(--p2)}
.carte.p3 .vign{color:var(--p3)} .carte.p4 .vign{color:var(--p4)}
.carte.p5 .vign{color:var(--p5)}

/* En tête de page, elle se range À DROITE du titre et le texte passe à côté : posée
   au-dessus, elle repoussait le titre d'une hauteur de vignette et la page semblait
   commencer plus bas que les autres. */
.titre-page .vign { float:right; width:76px; margin:.15rem 0 .9rem 1.4rem; }
@media (max-width:620px) { .titre-page .vign { width:52px; margin-left:1rem; } }

/* ── ÉTIQUETTES ──────────────────────────────────────────────────────────── */
.etq {
  display:inline-flex; align-items:center; gap:.32rem; padding:.16rem .55rem;
  border-radius:999px; font-size:.74rem; font-weight:650; line-height:1.5;
  background:var(--vert-clair); color:var(--vert); white-space:nowrap;
}
.etq.p1{background:var(--p1-clair);color:var(--p1)} .etq.p2{background:var(--p2-clair);color:var(--p2)}
.etq.p3{background:var(--p3-clair);color:var(--p3)} .etq.p4{background:var(--p4-clair);color:var(--p4)}
.etq.p5{background:var(--p5-clair);color:var(--p5)}
.etq.sourdine{background:var(--acier-clair);color:var(--acier)}

/* ── ENCART D'AVERTISSEMENT ──────────────────────────────────────────────── */
.avert {
  background:var(--ocre-clair); border:1px solid rgba(138,80,0,.22);
  border-left:5px solid var(--ocre); border-radius:var(--rayon-petit);
  padding:.95rem 1.15rem; font-size:.9rem; margin:1.4rem 0;
}
.avert strong { color:var(--ocre); }

/* ── TABLEAUX ────────────────────────────────────────────────────────────── */
.cadre-table { overflow-x:auto; border:1px solid var(--filet); border-radius:var(--rayon);
  background:var(--blanc); box-shadow:var(--ombre); }
table.tbl { border-collapse:collapse; width:100%; font-size:.9rem; }
/* Sans cette règle, le navigateur centre la légende : elle était le seul texte centré
   de tout le site, et elle annonce un tableau qui, lui, se lit à gauche. */
/* ⚠️ Une légende appartient au TABLEAU, donc elle prend sa largeur — et quand le
   tableau est plus large que l'écran, il faut faire défiler pour lire la légende qui
   explique justement qu'il faut faire défiler. Elle se cale à gauche et se borne à
   la largeur visible : elle reste lisible, et sur place. */
table.tbl caption { caption-side:top; text-align:left; padding:.7rem .8rem;
  color:var(--gris); font-size:.84rem; border-bottom:1px solid var(--filet);
  position:sticky; left:0; box-sizing:border-box;
  width:min(100%, calc(100vw - 2 * var(--gouttiere))); }
table.tbl th, table.tbl td { padding:.62rem .8rem; text-align:left;
  border-bottom:1px solid var(--filet); vertical-align:top; }
/* ⚠️ PAS de `position:sticky` ici. `.cadre-table` porte `overflow-x:auto`, donc il est
   lui-même le conteneur de défilement : un `top:60px` calé sur la hauteur du bandeau
   poussait l'en-tête 60 px vers le bas et il recouvrait la première ligne du tableau. */
table.tbl thead th { background:var(--vert-clair); color:var(--vert); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; }
table.tbl tbody tr:last-child td { border-bottom:0; }
table.tbl tbody tr:hover { background:var(--vert-clair); }
table.tbl td.num { font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; }

/* ── L'OMBRE QUI DIT QU'ON PEUT FAIRE DÉFILER ─────────────────────────────────
   Un tableau plus large que l'écran défile à l'intérieur de son cadre. Rien ne le
   disait : sur un téléphone, on voyait une table coupée net et l'on concluait que la
   page était cassée. Ces quatre fonds font le travail sans une ligne de JavaScript —
   deux voiles ancrés au CONTENU (`local`), deux ombres ancrées au CADRE (`scroll`) :
   l'ombre n'apparaît que du côté où il reste quelque chose à voir, et elle s'efface
   d'elle-même quand tout tient. */
.cadre-table, .fils, .outil-piste, .tableau { --piste:var(--blanc); }
/* `.tableau` est le cadre d'un tableau DANS un document de chapitre — il est posé
   par `_elements_html.py` et défile comme les autres. */
.cadre-table, .fils, .outil-piste, .tableau {
  background-image:
    /* les deux voiles — opaques sur leur premier tiers, sinon ils laissent
       transparaître l'ombre qu'ils sont censés effacer */
    linear-gradient(to right, var(--piste, var(--fond)) 42%, transparent),
    linear-gradient(to left,  var(--piste, var(--fond)) 42%, transparent),
    /* les deux ombres */
    linear-gradient(to right, rgba(20,24,26,.15), transparent),
    linear-gradient(to left,  rgba(20,24,26,.15), transparent);
  background-position:left center, right center, left center, right center;
  background-repeat:no-repeat;
  background-size:30px 100%, 30px 100%, 12px 100%, 12px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* ── L'ACTION PRINCIPALE D'UNE PAGE ──────────────────────────────────────────
   Le bouton plein, celui qu'on cherche du regard en arrivant. Il existait en trois
   exemplaires — « Ouvrir le chapitre » sur l'année, « Lancer » sur le projecteur, un
   lien nu sur les automatismes — avec trois dessins différents. Un seul, ici.

   ⚠️ Il porte `--touche` : c'est le bouton qu'on vise du doigt, en classe, sur une
   tablette posée à côté du tableau. */
.actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0 1.5rem; }
a.action {
  display:inline-flex; align-items:center; gap:.5rem; min-height:var(--touche);
  padding:.55rem 1.15rem; border-radius:999px;
  background:var(--vert); color:#fff; border:1px solid var(--vert);
  text-decoration:none; font-weight:650; font-size:.95rem;
  transition:transform .14s, box-shadow .14s;
}
a.action:hover { transform:translateY(-1px); box-shadow:var(--ombre-levee); color:#fff; }
/* La seconde action d'une page : même forme, moins de poids. Deux boutons pleins
   côte à côte ne disent plus lequel est le principal. */
a.action.sourdine { background:var(--blanc); color:var(--vert); border-color:var(--filet); }
a.action.sourdine:hover { border-color:var(--vert); background:var(--vert-clair); }

/* ── LES VUES D'UNE MÊME CHOSE ───────────────────────────────────────────────
   Trois boutons, un seul contenu montré. Ce n'est pas une navigation : on ne change
   pas de sujet, on change de FORME. « Ou alors c'est la progression vue sous
   différentes formes » — Emmanuel, 2026-08-20.

   ⚠️ Ce sont des <button>, pas des liens : rien ne se charge, tout est déjà là. Un
   lecteur d'écran l'entend grâce à `aria-pressed`, que le script tient à jour. */
.vues { display:flex; flex-wrap:wrap; gap:.35rem; margin:1.4rem 0 1.6rem;
  padding:.3rem; background:var(--acier-clair); border-radius:999px;
  width:max-content; max-width:100%; }
.vue-onglet {
  font:inherit; font-size:.9rem; font-weight:650; cursor:pointer;
  min-height:var(--touche); padding:.4rem 1rem; border:0; border-radius:999px;
  background:transparent; color:var(--gris);
}
.vue-onglet:hover { color:var(--vert); }
.vue-onglet[aria-pressed="true"] { background:var(--blanc); color:var(--vert);
  box-shadow:0 1px 3px rgba(20,24,26,.10); }
@media (max-width:620px) {
  /* Trois pastilles dans 340 px : elles passent en pleine largeur plutôt que de
     se réduire à trois moignons illisibles. */
  .vues { width:100%; border-radius:var(--rayon); }
  .vue-onglet { flex:1 1 100%; border-radius:var(--rayon-petit); }
}

/* ── PIED DE PAGE ────────────────────────────────────────────────────────── */
.pied-site { border-top:1px solid var(--filet); margin-top:2.5rem;
  padding:1.6rem 0 3rem; font-size:.82rem; color:var(--gris); }
.pied-site a { color:var(--vert); }
/* ⛔ LE MÊME PIED QUE SUR INCLUS'IA — Emmanuel, 2026-08-21 : « dans le footer, je veux
   que tu regardes ce que j'ai fait sur mon site Inclus'IA pour prendre le même format. »
   Repris de `src/components/ui/Footer.astro` : UNE ligne sur écran large, deux groupes
   écartés — qui l'a fait à gauche, où aller à droite —, des barres verticales pour
   séparer, et chaque entrée insécable pour qu'on retourne à la ligne ENTRE deux
   libellés, jamais au milieu de l'un d'eux. */
.pied-rangee { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.25rem 1rem; margin:0 0 .8rem; }
@media (min-width:900px) { .pied-rangee { justify-content:space-between; } }
.pied-groupe { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.25rem .65rem; }
.pied-groupe > * { white-space:nowrap; }
.pied-groupe .sep { color:var(--filet); }
.pied-groupe .marque { font-weight:700; color:var(--encre); }
.pied-liens a { text-decoration:none; font-weight:600; }
.pied-liens a:hover { text-decoration:underline; }
/* ⛔ LA MÉCANIQUE DE CARAMEL — Emmanuel, 2026-08-28 : « reprends ma mécanique de mes
   sites comme Caramel ». Là-bas, chaque entrée du pied est une ICÔNE ET UN LIBELLÉ
   collés (`display:inline-flex; gap:8px`), et la ligne s'aère de 25 px entre deux
   entrées. Les barres verticales disparaissent : avec une icône devant chaque libellé,
   elles faisaient deux séparateurs pour une seule séparation.
   ⚠️ Les icônes sont DESSINÉES dans la page, jamais chargées : zéro appel réseau, et
   sept glyphes ne valent pas une fonte d'icônes entière. */
.pied-liens a, .pied-groupe .marque { display:inline-flex; align-items:center; gap:.4rem; }
.pied-groupe { gap:.35rem 1.1rem; }
.pied-ico { width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* Le numéro se COMPARE d'un coup d'œil — chiffres de largeur fixe, comme un tableau. */
.pied-version { font-variant-numeric:tabular-nums; letter-spacing:.01em; }
/* ⚠️ « essai local » n'est pas une version : c'est un avertissement. Il ne s'affiche
   que sur le Mac d'Emmanuel, quand la page qu'il regarde contient du travail non
   commité — donc quelque chose que personne d'autre ne peut voir en ligne. */
.pied-version.pied-en-cours { color:var(--ocre); }

/* ── UN PEU DE COULEUR ────────────────────────────────────────────────────────
   « Je le trouve tristoune. » — Emmanuel, 2026-08-19. Tout était vert, du haut de
   la page jusqu'en bas. Les cinq teintes de période existaient déjà et ne servaient
   qu'au calendrier : elles courent maintenant dans toutes les pages. Aucune sixième
   couleur n'est inventée, et chacune reste au-dessus de 4,5:1. */
.section h2:nth-of-type(5n+2)::before { background:var(--p2); }
.section h2:nth-of-type(5n+3)::before { background:var(--p3); }
.section h2:nth-of-type(5n+4)::before { background:var(--p4); }
.section h2:nth-of-type(5n+5)::before { background:var(--p5); }

.chap { border-top:4px solid var(--vert); }
.chap.p1 { border-top-color:var(--p1); } .chap.p1 > h3 { color:var(--p1); }
.chap.p2 { border-top-color:var(--p2); } .chap.p2 > h3 { color:var(--p2); }
.chap.p3 { border-top-color:var(--p3); } .chap.p3 > h3 { color:var(--p3); }
.chap.p4 { border-top-color:var(--p4); } .chap.p4 > h3 { color:var(--p4); }
.chap.p5 { border-top-color:var(--p5); } .chap.p5 > h3 { color:var(--p5); }

/* ── TÉLÉCHARGEMENTS ─────────────────────────────────────────────────────── */
.dl-rangee { display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin:.3rem 0 1.6rem; }
a.dl { display:flex; align-items:center; gap:.75rem; background:var(--blanc);
  border:1px solid var(--filet); border-radius:var(--rayon); padding:.75rem .9rem;
  text-decoration:none; color:inherit; box-shadow:var(--ombre);
  transition:transform .14s, box-shadow .14s; }
a.dl:hover { transform:translateY(-2px); box-shadow:var(--ombre-levee); }
a.dl .fmt { flex:none; font-size:.62rem; font-weight:800; letter-spacing:.03em;
  background:var(--vert-clair); color:var(--vert); padding:.32rem .42rem; border-radius:5px; }
a.dl span:last-child { font-size:.79rem; color:var(--gris); line-height:1.4; }
a.dl b { display:block; font-size:.92rem; color:var(--encre); font-weight:650; }


/* ═══════════════════════════════════════════════════════════════════════════
   LES COMPOSANTS DES PAGES ÉDITORIALES

   ⚠️ Ces classes ne sont pas décoratives : ce sont EXACTEMENT celles que posent
   `site/assets/js/vue-progression.js` et `vue-objectifs.js` au moment du rendu.
   Elles vivaient dans `site/assets/css/site.css`, une seconde feuille avec sa
   propre palette, sa propre largeur et son propre mode sombre — d'où deux pages
   du site qui ne ressemblaient à aucune autre. Emmanuel, le 2026-08-19 :

       « l'onglet La progression et Les objectifs ouvrent des pages au visuel
         totalement différent aux autres : il faut que ça soit harmonisé »

   Elles sont ici, en jetons de la charte, et nulle part ailleurs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RÉSERVE — la provenance est toujours visible ────────────────────────── */
/* Même dessin que .avert : c'est le même objet, sous le nom que pose le JS. */
.reserve {
  background:var(--ocre-clair); border:1px solid rgba(138,80,0,.22);
  border-left:5px solid var(--ocre); border-radius:var(--rayon-petit);
  padding:.95rem 1.15rem; font-size:.9rem; margin:1.4rem 0;
}
.reserve strong { color:var(--ocre); }
.reserve p { margin:.5rem 0; }
.reserve p:first-child { margin-top:0; }
.reserve p:last-child { margin-bottom:0; }
.reserve.info { background:var(--vert-clair); border-color:rgba(31,81,48,.22);
  border-left-color:var(--vert); }
.reserve.info strong { color:var(--vert); }

/* ── LES FILS DE LA PROGRESSION ──────────────────────────────────────────────
   Une notion n'est pas un bloc qui se termine : c'est un fil qui traverse les
   semaines. Un vrai <table>, jamais un dessin — un lecteur d'écran le parcourt. */
.fils { overflow-x:auto; margin:1.4rem 0; border:1px solid var(--filet);
  border-radius:var(--rayon); background:var(--blanc); box-shadow:var(--ombre); }
.fils table { border-collapse:collapse; width:100%; font-size:.86rem; }
.fils th, .fils td { padding:.4rem .5rem; border-bottom:1px solid var(--filet);
  text-align:center; }
.fils thead th { background:var(--vert-clair); color:var(--vert); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.05em; }
.fils tbody tr:last-child th, .fils tbody tr:last-child td { border-bottom:0; }
/* La colonne des noms reste visible quand on fait défiler les périodes. */
.fils th:first-child, .fils td:first-child {
  position:sticky; left:0; z-index:2; text-align:left;
  /* 14 rem fixes = 224 px : sur un téléphone il ne restait que 150 px pour les cinq
     périodes, et l'on faisait défiler une table dont on ne voyait qu'une colonne. */
  min-width:clamp(8.5rem, 38vw, 14rem);
  background:var(--blanc); border-right:1px solid var(--filet); font-weight:600;
}
.fils thead th:first-child { background:var(--vert-clair); z-index:3; }
/* Même raison que pour `table.tbl caption` : la légende ne défile pas avec la table
   qu'elle explique. */
.fils caption { caption-side:top; text-align:left; padding:.7rem .8rem;
  color:var(--gris); font-size:.84rem; border-bottom:1px solid var(--filet);
  position:sticky; left:0; box-sizing:border-box;
  width:min(100%, calc(100vw - 2 * var(--gouttiere))); }

.marqueur {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.9rem; height:1.9rem; padding:0 .35rem; border-radius:999px;
  /* « 1–2 » se coupait en deux lignes dans une pastille haute de 1,9 rem. */
  white-space:nowrap;
  font-size:.78rem; font-weight:700; font-family:var(--police-chiffres);
  border:1px solid var(--filet); background:var(--fond); color:var(--gris);
}
.marqueur.introduit { background:var(--vert); color:#fff; border-color:var(--vert); }
.marqueur.pratique  { background:var(--vert-clair); color:var(--vert); border-color:var(--vert); }
.marqueur.reactive  { background:var(--ocre-clair); color:var(--ocre); border-color:var(--ocre);
  border-style:dashed; }
.marqueur.permanent { border-style:dotted; }

ul.legende { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; list-style:none;
  padding:0; margin:1rem 0; font-size:.85rem; color:var(--gris); }
ul.legende li { display:flex; align-items:center; gap:.5rem; }

/* ── LES UNITÉS, PÉRIODE PAR PÉRIODE ─────────────────────────────────────── */
.periode { margin-top:2.4rem; }
.periode > h3 {
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline;
  border-bottom:2px solid var(--vert); padding-bottom:.4rem; margin:0 0 .8rem;
  font-size:1.05rem; letter-spacing:-.01em;
}
.periode > h3 small { color:var(--gris); font-weight:400; font-size:.8rem; }
/* Une teinte par période, comme sur le calendrier et sur l'année : on ne change pas
   de code couleur en changeant de page. */
.periode:nth-of-type(1) > h3 { border-bottom-color:var(--p1); }
.periode:nth-of-type(2) > h3 { border-bottom-color:var(--p2); }
.periode:nth-of-type(3) > h3 { border-bottom-color:var(--p3); }
.periode:nth-of-type(4) > h3 { border-bottom-color:var(--p4); }
.periode:nth-of-type(5) > h3 { border-bottom-color:var(--p5); }

.unite {
  background:var(--blanc); border:1px solid var(--filet); border-left:4px solid var(--vert);
  border-radius:0 var(--rayon-petit) var(--rayon-petit) 0;
  padding:.8rem 1rem; margin:.6rem 0; box-shadow:var(--ombre);
}
.unite.hors-enseignement { border-left-color:var(--acier); background:var(--acier-clair); }
.unite.evaluation { border-left-color:var(--prune); }
/* Les séances de résolution de problèmes : ni une unité, ni du hors-enseignement.
   Elles prennent des séances et travaillent des notions, mais transversalement. */
.unite.problemes { border-left-color:var(--ocre); border-left-style:dashed; }
.unite > header { display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:baseline; }
.unite h4 { margin:0; font-size:1rem; letter-spacing:-.01em; }
.unite .meta { margin-left:auto; color:var(--gris); font-size:.82rem;
  font-variant-numeric:tabular-nums; }
.unite p { margin:.5rem 0 0; font-size:.9rem; color:var(--gris);
  max-width:var(--largeur-texte); }
.unite ul { margin:.5rem 0 0; padding-left:1.1rem; font-size:.88rem; }
.unite ul li { margin-bottom:.2rem; }
.unite details { margin:.6rem 0 0; border:0; }

/* ── « LE DÉTAIL » — une grille de cartes courtes, pas une colonne de prose ──
   Emmanuel, 2026-08-22 : « la vue Détail est trop grosse et difficile à relire,
   trop de texte ; fais des points clés à lire ». Deux corrections de fond :

   1. **des POINTS, pas un paragraphe.** Le texte long vit maintenant replié.
   2. **une GRILLE.** Les cartes pleine largeur empilaient une période sur trois
      hauteurs d'écran. En deux colonnes, une période se regarde d'un coup.

   ⚠️ Et surtout : `.unite p` bride sa largeur à `--largeur-texte`, ce qui est fait
   pour un ARTICLE. Dans une carte qui porte des lignes courtes, cela laissait un
   tiers de la carte blanc — « on perd de la place inutilement ». Une carte s'en
   affranchit explicitement. */
.grille-unites { display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(21rem, 1fr)); align-items:start; }
.unite.carte { margin:0; padding:.7rem .85rem .75rem; }
.unite.carte > header { gap:.2rem .7rem; }
.unite.carte h4 { font-size:.95rem; line-height:1.25; }
.unite.carte .meta { font-size:.76rem; white-space:nowrap; }
.unite.carte p { max-width:none; }
.unite .lien-unite { color:inherit; text-decoration:none;
  border-bottom:1px solid var(--vert-clair); }
.unite .lien-unite:hover { color:var(--vert); border-bottom-color:var(--vert); }

ul.points { margin:.45rem 0 0; padding-left:1rem; font-size:.86rem; line-height:1.45; }
ul.points li { margin:0 0 .18rem; color:var(--encre); }
ul.points li::marker { color:var(--vert); }

/* Un dépliant DANS une carte : sans cadre ni fond, sinon la carte porte des cartes. */
details.mince { border:0; background:transparent; padding:0; margin:.35rem 0 0;
  max-width:none; }
details.mince > summary { padding:.3rem 0; font-size:.8rem; font-weight:500;
  min-height:0; color:var(--gris); }
details.mince > summary:hover { color:var(--vert); }
details.mince[open] { padding-bottom:.2rem; }
details.mince ul { margin:.1rem 0 .3rem; padding-left:1.1rem; font-size:.84rem; }
details.mince p { margin:.1rem 0 .3rem; font-size:.84rem; color:var(--gris);
  max-width:none; }

/* ── DÉPLIANTS ───────────────────────────────────────────────────────────── */
details { border:1px solid var(--filet); border-radius:var(--rayon-petit);
  background:var(--blanc); padding:0 1rem; margin:1rem 0;
  max-width:var(--largeur-texte); }
details[open] { padding-bottom:.75rem; }
summary { cursor:pointer; padding:.7rem 0; font-weight:600; font-size:.9rem;
  color:var(--vert); min-height:var(--touche); display:flex; align-items:center; }

/* ── LE FILTRE DES OBJECTIFS — un outil de lecture, pas une recherche ────── */
.filtre { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin:1.4rem 0 .4rem; }
.filtre label { display:block; font-size:.84rem; color:var(--gris); margin-bottom:.25rem; }
.filtre input {
  /* `min-width:18rem` = 288 px : sur un téléphone de 390 px, le champ imposait sa
     largeur et poussait le bouton « Vider » hors de l'écran. Il s'étire maintenant
     dans ce qui reste, et ne réclame plus rien. */
  font:inherit; padding:.55rem .7rem; min-height:var(--touche);
  flex:1 1 16rem; min-width:0;
  max-width:100%; border:1px solid var(--filet); border-radius:var(--rayon-petit);
  background:var(--blanc); color:var(--encre);
}
.filtre button {
  font:inherit; font-weight:600; padding:.5rem .9rem; min-height:var(--touche);
  cursor:pointer; border:1px solid var(--filet); border-radius:var(--rayon-petit);
  background:var(--blanc); color:var(--encre);
}
.filtre button:hover { border-color:var(--vert); color:var(--vert); background:var(--vert-clair); }
.compteur { color:var(--gris); font-size:.85rem; font-variant-numeric:tabular-nums; margin:0; }
mark { background:var(--p4-clair); color:var(--encre); padding:0 .1em; border-radius:2px;
  box-shadow:inset 0 -2px 0 var(--ocre); }

/* ── LA FRACTION EMPILÉE ─────────────────────────────────────────────────────
   « 3/4 » se lit avec un numérateur au-dessus d'un dénominateur, pas en ligne.
   Ces trois règles vivaient à TROIS endroits — `_fractions.py`, le projecteur, et
   nulle part pour les pages éditoriales, où le LaTeX du programme sortait en clair.
   Elles sont ici, et les vues du site s'en servent aussi. */
.frac { display:inline-block; text-align:center; vertical-align:middle;
  /* ⛔ `align-self` NEUTRALISE `align-items:baseline` DU PARENT — Emmanuel, 2026-08-21 :
     « c'est une représentation mathématique, le trait de fraction devrait TOUJOURS être
     bien centré ». Dans un conteneur `flex` — et les titres du répertoire en sont —
     `vertical-align` ne compte pour rien, et l'alignement sur la ligne de base pose le
     DÉNOMINATEUR sur la ligne du texte : la fraction pendait sous la phrase. Ici, le
     trait se retrouve à la hauteur du signe « = », qui est sa place. */
  align-self:center;
  /* .78 plutôt que .72 : à un dixième d'em près, « 1000 » d'un dénominateur devenait
     illisible à côté du corps de texte. La fraction est du contenu, pas une note. */
  font-size:.78em; margin:0 .2em; line-height:1.06; }
.frac .num { display:block; border-bottom:.08em solid currentColor; padding:0 .18em; }
.frac .den { display:block; padding:0 .18em; }

/* ── CHIFFRE MIS EN AVANT ────────────────────────────────────────────────── */
.chiffre { display:block; font-size:1.9rem; font-weight:700; line-height:1.1;
  color:var(--vert); letter-spacing:-.02em; }
.chiffre + span { color:var(--gris); font-size:.85rem; }

/* ── LISTES ET TEXTE SUIVI ───────────────────────────────────────────────── */
/* ⛔ AUCUNE LARGEUR N'EST IMPOSÉE AU TEXTE — 2026-08-23, et c'est la TROISIÈME fois
   qu'Emmanuel le dit :

     « toutes tes div placent le texte à gauche… on perd de la place inutilement »
     « Rohhh, tu coupes la longueur des textes hyper vite à gauche »
     « arrête d'afficher le texte sur la première moitié de la div : regarde l'espace
       manquant à droite, c'est insupportable, et il y a plein d'autres endroits où
       c'est pareil sur le site… pfff »

   Les deux premières fois, la règle a été gardée et une EXCEPTION ajoutée — d'abord
   pour les cartes, puis pour les encarts, les fiches, les tableaux, les dépliants. Une
   liste d'exceptions ne se referme jamais : tout composant né après elle recommençait
   à couper son texte au milieu de sa boîte. La mesure du 2026-08-23 en a trouvé
   **149** sur sept pages — 95 rien que sur les objectifs.

   La règle est donc INVERSÉE : par défaut, un texte prend la largeur de sa boîte. Ce
   qui se lit en continu — un article — le DÉCLARE, avec `.article` ci-dessous. Et
   `tests/site/verifier-responsive.py` mesure les pages rendues : il refuse désormais
   tout texte bridé qui ne se réclame pas d'un article. */

/* Un ARTICLE : une page qui se lit d'un bout à l'autre, comme « La démarche ». Seuls
   ses paragraphes et ses listes se brident — jamais les boîtes qu'il contient. */
.article > p, .article > ul > li, .article > ol > li { max-width:var(--largeur-texte); }
/* ⚠️ La liste d'exceptions qui vivait ici — cartes, encarts, fiches, tableaux,
   dépliants — n'a plus d'objet : plus rien n'est bridé par défaut. Ne pas la
   ressusciter en ajoutant une règle `max-width` sur un `p` ou un `li`. */
.nombre { text-align:right; font-variant-numeric:tabular-nums; }

/* ── UTILITAIRES ─────────────────────────────────────────────────────────── */
.texte { max-width:var(--largeur-texte); }
.saut-au-contenu { position:absolute; left:-9999px; }
.saut-au-contenu:focus { left:.5rem; top:.5rem; position:fixed; z-index:99; background:var(--vert);
  color:#fff; padding:.6rem 1rem; border-radius:var(--rayon-petit); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — trois paliers, une seule mise en page

   « Le site est censé être responsive et fonctionner sur mobile comme sur tablette
     comme sur ordi. […] il manque des espaces sur le bord, des textes coupés, c'est
     pas optimisé, menu du haut surchargé »  — Emmanuel, 2026-08-20, capture à l'appui.

   Ce bloc ne faisait que sept lignes et n'avait qu'un seul palier. Il ne s'agit pas
   d'une seconde mise en page : c'est la MÊME, qui se resserre.

    ≤ 1060 px  le bandeau passe en deux rangs — la marque, puis un rang d'onglets
               qui DÉFILE au lieu de se replier sur trois lignes. Le seuil est MESURÉ :
               la marque fait 208 px, les sept onglets 736, et il faut 25 px entre les
               deux — soit 1021 px de page. En dessous, le bandeau se repliait de
               lui-même sur deux rangs ragués ; le rang qui défile est plus net, et
               il ne grandit plus jamais
     ≤ 620 px  téléphone : la typographie se resserre, les cadres se serrent
     ≤ 400 px  petit téléphone : le sous-titre de la marque s'efface

   ⚠️ Aucune règle ci-dessous ne CACHE un lien. Un menu qui replie des pages derrière
   un bouton fait croire qu'elles n'existent pas ; le rang défile, les sept onglets
   restent atteignables, et l'ombre de droite dit qu'il y a une suite.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1060px) {
  /* Le bandeau mesure deux rangs, et tout ce qui se cale dessus doit le savoir :
     l'ancre `:target` d'abord, qui sinon dépose sa cible derrière lui. */
  :root { --h-bandeau:104px; }

  .bandeau-int { flex-wrap:wrap; padding-block:.35rem; }
  .marque { min-height:2.4rem; }

  /* LE RANG QUI DÉFILE. Il va d'un bord à l'autre de l'écran — d'où la largeur
     débordante et les marges négatives : un onglet coupé par le BORD DE L'ÉCRAN se
     lit comme « ça continue », un onglet coupé par la gouttière se lit comme un
     défaut. Le `padding-inline` intérieur remet le premier onglet à l'aplomb de la
     marque, et `scroll-padding` fait de même quand le rang se recale. */
  .onglets {
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    margin-left:0;
    width:calc(100% + 2 * var(--gouttiere));
    margin-inline:calc(var(--gouttiere) * -1);
    padding-inline:var(--gouttiere);
    scroll-padding-inline:var(--gouttiere);
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    /* `overflow-x:auto` rend AUSSI l'axe vertical défilant, donc rognant : sans ces
       cinq pixels, l'anneau de focus d'un onglet — 3 px, décalé de 2 — était coupé en
       haut et en bas, et l'on ne voyait plus où l'on était au clavier. La marge
       négative rend la hauteur qu'ils prenaient. */
    padding-block:5px; margin-block:-5px;
    /* Le rang s'efface à ses deux bouts au lieu d'être tranché net. Le voile ne
       mord que si un onglet l'atteint : quand les sept tiennent à l'écran, il n'y a
       rien sous le fondu et il ne se voit pas. Une ombre portée, elle, se serait vue
       même sans rien à faire défiler. */
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--gouttiere),
                       #000 calc(100% - 26px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 var(--gouttiere),
                       #000 calc(100% - 26px), transparent 100%);
  }
  .onglets::-webkit-scrollbar { height:0; display:none; }
  .onglets a { min-height:44px; padding:.45rem .7rem; font-size:.85rem;
    scroll-snap-align:center; }

  .titre-page { padding-block:1.8rem 1.1rem; }
  .titre-page h1 { font-size:1.7rem; }
}

@media (max-width:620px) {
  /* 44 px et non 48 : c'est la taille tactile d'Apple, et sur un écran de 640 px de
     haut les quatre pixels rendus à chaque rangée finissent par se voir. La tablette,
     elle, garde ses 48 px — c'est elle que vise le mode Classe. */
  :root { --touche:44px; }

  .titre-page h1 { font-size:1.5rem; }
  .titre-page .chapo { font-size:.95rem; }
  .titre-page .surtitre { font-size:.7rem; }
  .section h2 { font-size:1.05rem; margin:1.5rem 0 .85rem; }
  .carte { padding:1rem 1.05rem; }
  .avert, .reserve { padding:.85rem .95rem; }
  details { padding-inline:.9rem; }
  .unite { padding:.7rem .85rem; }
  .fils th, .fils td { padding:.35rem .42rem; }
  table.tbl th, table.tbl td { padding:.55rem .6rem; }
  .pied-site { padding-block:1.4rem 2.2rem; }
  /* Deux colonnes de liens dans un pied de 320 px donnaient deux colonnes d'un mot. */
  ul.docs { columns:1; }
}

@media (max-width:360px) {
  /* Le sous-titre « mathématiques 6e · 2026-2027 » ne coûte RIEN en hauteur — il se
     glisse sous le nom, dans les 2,4 rem que la marque occupe déjà. Il ne s'efface
     donc que lorsque la LARGEUR manque, pas avant : c'est une identité, et elle est
     de toute façon répétée par le titre de la page et par le pied. */
  .marque small { display:none; }
  .marque { font-size:1rem; }
}

/* ── IMPRESSION ──────────────────────────────────────────────────────────── */
@media print {
  /* « Le papier est une cible, pas un export » — design/README.md, principe 4.
     Cette feuille était plus complète dans site.css que dans la charte : ce qui
     s'imprimait bien depuis deux pages du site s'imprimait mal depuis les autres. */
  body { background:#fff; background-image:none; font-size:10.5pt; line-height:1.4; }
  .bandeau, .pied-site, .saut-au-contenu, .filtre, .bascule, .sans-impression { display:none !important; }
  .enveloppe { max-width:none; padding:0; }
  a { color:#000; text-decoration:none; }
  /* Une adresse cliquée à l'écran n'existe plus sur le papier : on l'écrit. */
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; color:#555;
    word-break:break-all; }
  h1, h2, h3, h4 { break-after:avoid; page-break-after:avoid; }
  .carte, .cadre-table, .unite, .reserve, .avert, details, table { box-shadow:none;
    break-inside:avoid; page-break-inside:avoid; }
  /* Tout s'imprime, même ce qui est replié : le papier n'a pas de clic. */
  details { border:0; padding:0; }
  details:not([open]) > *:not(summary) { display:revert; }
  details > summary { list-style:none; font-weight:700; color:#000; }
  .fils, .cadre-table { overflow:visible; border:0; }
  .fils th, table.tbl thead th { position:static; }
  .marqueur { border:1px solid #000; color:#000; }
  .marqueur.introduit { background:#000; color:#fff; }
  .periode { break-before:page; page-break-before:always; }
  .periode:first-of-type { break-before:auto; page-break-before:auto; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; }
}