/* ==========================================================================
   MathBooster — feuille de style unique
   Reprise fidèle du système visuel de la maquette « Maths Martin ».
   Aucune dépendance, aucun framework.
   ========================================================================== */

:root {
  --fond: #edebe4;
  --surface: #f7f6f2;
  --carte: #fff;
  --bord: #dde3ee;
  --bord-doux: #f0eee8;
  --bord-creme: #e7e4db;
  --survol-creme: #eae7df;

  --encre: #1b2a4a;
  --nuit: #141c2e;
  --nuit-bord: #2a3550;
  --nuit-ligne: #39456a;

  --texte: #4a5772;
  --texte-fort: #3d4b68;
  --sourdine: #6c7a99;
  --sourdine-clair: #8a97b4;
  --sourdine-pale: #b8c2d6;

  --accent: #2f6bff;
  --accent-fonce: #1b4fd1;
  --accent-pale: #eef3ff;
  --accent-tres-pale: #d5e2ff;
  --sur-nuit: #c3cde3;
  --sur-nuit-doux: #9fb0d4;

  --vert: #1f7a5c;
  --vert-fond: #f0f7f3;
  --vert-bord: #cfe4d9;

  --orange: #b4541a;
  --orange-sombre: #8e3f10;
  --orange-fond: #fdf3ec;
  --orange-bord: #f2dbc9;

  --rouge: #b42318;
  --rouge-fond: #fdf0ef;

  --violet: #6b3fa0;
  --violet-fond: #f6f1fb;
  --violet-bord: #e2d5ef;

  --serif: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --large: 1120px;
  --lecture: 820px;
  --r-carte: 14px;
  --r-bouton: 9px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fonce); text-decoration: underline; }

img { max-width: 100%; height: auto; }
sup { font-size: .68em; line-height: 0; }
sub { font-size: .68em; line-height: 0; }

input, select, textarea, button { font-family: var(--serif); font-size: 16px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--encre); color: #fff; padding: 12px 18px; border-radius: 0 0 9px 0;
}
.evitement:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------ trames */

.enveloppe { background: var(--surface); min-height: 100vh; display: flex; flex-direction: column; }
.large { width: 100%; max-width: var(--large); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.lecture { width: 100%; max-width: var(--lecture); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.moyen  { width: 100%; max-width: 960px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
main { display: block; flex: 1; padding-bottom: 56px; }

/* ------------------------------------------------ bannière appel à action */

.banniere-cta {
  /* Reste collée en haut au défilement ; l'en-tête défile avec le contenu. */
  position: sticky; top: 0; z-index: 45;
  background: linear-gradient(100deg, var(--accent) 0%, #6a3df0 55%, #b02fd4 100%);
  color: #fff;
}
.banniere-interne {
  max-width: var(--large); margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.banniere-texte { margin: 0; font-size: 17px; line-height: 1.45; flex: 1 1 300px; }
.banniere-texte strong { font-weight: 700; font-size: 19px; display: block; margin-bottom: 2px; }
.banniere-actions { display: flex; gap: 10px; flex-shrink: 0; margin-left: auto; }
.banniere-tel, .banniere-form {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 99px; font-weight: 700; font-size: 16.5px;
  text-decoration: none; white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.banniere-tel { background: #fff; color: var(--encre); }
.banniere-tel svg { width: 17px; height: 17px; }
.banniere-form { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.banniere-tel:hover, .banniere-form:hover {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.22);
  text-decoration: none; color: inherit;
}
.banniere-tel:hover { color: var(--accent); }

/* ------------------------------------------------------------------ entête */

.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
}
.entete-interne {
  max-width: var(--large); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
}
.marque { display: flex; align-items: center; gap: 10px; color: var(--encre); flex-shrink: 0; }
.marque:hover { text-decoration: none; color: var(--encre); }
.marque-jeton {
  width: 38px; height: 38px; border-radius: 10px; background: var(--encre); color: #fff;
  display: grid; place-items: center; font: 700 19px/1 var(--serif); flex-shrink: 0;
}
.marque-nom { display: flex; flex-direction: column; line-height: 1.15; }
.marque-nom strong { font-size: 18px; letter-spacing: -.01em; }
.marque-nom span { font: 400 11.5px/1.3 var(--mono); color: var(--sourdine); }

.nav-bureau { display: flex; gap: 2px; margin-left: auto; }
.nav-bureau a {
  padding: 9px 13px; border-radius: 8px; color: var(--texte-fort);
  font-size: 15.5px; font-weight: 600; white-space: nowrap;
}
.nav-bureau a:hover { background: var(--survol-creme); color: var(--encre); text-decoration: none; }
.nav-bureau a[aria-current="page"] { background: var(--survol-creme); color: var(--encre); }

.entete-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

.tel-entete {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px;
  border-radius: var(--r-bouton); border: 1px solid var(--bord); background: #fff;
  color: var(--encre); font-weight: 600; font-size: 15.5px; white-space: nowrap;
}
.tel-entete:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.cta-entete {
  display: inline-flex; align-items: center; height: 42px; padding: 0 16px;
  border-radius: var(--r-bouton); background: var(--encre); color: #fff;
  font-weight: 600; font-size: 15.5px; white-space: nowrap;
}
.cta-entete:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* menu mobile : <details>, aucun JavaScript */
.menu { margin-left: auto; }
.menu > summary {
  width: 44px; height: 44px; border-radius: var(--r-bouton);
  border: 1px solid var(--bord); background: #fff; color: var(--encre);
  display: grid; place-items: center; cursor: pointer; list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "☰"; font-size: 19px; }
.menu[open] > summary::after { content: "✕"; font-size: 17px; }
.menu-panneau {
  position: absolute; left: 0; right: 0; top: 100%;
  border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
  background: #fff; padding: 14px 16px 18px; z-index: 60;
  max-height: 72vh; overflow-y: auto;
}
.menu-titre {
  margin: 0 0 9px; font: 500 11.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--sourdine-clair);
}
.menu-titre + .menu-titre, .menu-grille + .menu-titre, .menu-liste + .menu-titre { margin-top: 18px; }
.menu-grille { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-grille a {
  min-width: 72px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px; border-radius: var(--r-bouton); background: var(--surface);
  border: 1px solid var(--bord); font-size: 16px; font-weight: 600; color: var(--encre);
}
.menu-liste { display: flex; flex-direction: column; gap: 7px; }
.menu-liste a {
  min-height: 48px; display: flex; align-items: center; padding: 0 15px;
  border-radius: var(--r-bouton); background: var(--surface);
  font-size: 16.5px; font-weight: 600; color: var(--encre);
}
.menu-grille a:hover, .menu-liste a:hover { background: var(--accent-pale); color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------ fil d'Ariane */

.ariane-barre { background: #fff; border-bottom: 1px solid var(--bord); }
.ariane {
  max-width: var(--large); margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--sourdine);
}
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.ariane li { display: flex; align-items: center; gap: 8px; }
.ariane li + li::before { content: "›"; color: var(--sourdine-pale); }
.ariane a { color: var(--sourdine); }
.ariane a:hover { color: var(--accent); }
.ariane [aria-current="page"] { color: var(--encre); font-weight: 600; }

/* ------------------------------------------------------------------ titres */

h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; margin: 0; text-wrap: balance; }
.h1-accueil { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; max-width: 16em; }
.chapo { margin: 16px 0 0; font-size: 19px; line-height: 1.5; color: var(--texte); max-width: 36em; text-wrap: pretty; }
.surtitre {
  font: 500 12px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); display: block;
}
h2 { font-size: 25px; letter-spacing: -.01em; line-height: 1.25; margin: 44px 0 0; }
h3 { font-size: 19px; line-height: 1.35; margin: 30px 0 0; }
.section-tete {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--bord);
}
.section-tete h2 { margin: 0; font-size: 19px; }
.compte { font: 400 13px/1 var(--mono); color: var(--sourdine-clair); }

/* ----------------------------------------------------------------- pastilles */

.pastilles { margin: 26px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pastille {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--texte);
  background: #fff; border: 1px solid var(--bord); border-radius: 99px; padding: 7px 13px;
}
.jeton {
  font: 500 12px/1 var(--mono); color: var(--accent); background: var(--accent-pale);
  padding: 6px 9px; border-radius: 6px; display: inline-block;
}
.jeton-neutre {
  font: 500 12.5px/1 var(--mono); color: var(--encre); background: var(--fond);
  padding: 6px 9px; border-radius: 6px; display: inline-block;
}

/* ------------------------------------------------------------------ boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 16.5px; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-primaire { background: var(--accent); color: #fff; }
.btn-primaire:hover { background: var(--accent-fonce); color: #fff; }
.btn-secondaire { background: #fff; border-color: var(--bord); color: var(--encre); }
.btn-secondaire:hover { border-color: var(--accent); color: var(--encre); }
.btn-nuit { background: var(--encre); color: #fff; }
.btn-nuit:hover { background: var(--accent); color: #fff; }
.btn-fantome { background: transparent; border-color: var(--nuit-ligne); color: #fff; }
.btn-fantome:hover { border-color: #fff; color: #fff; }
.btn-grand { height: 54px; padding: 0 24px; font-size: 17.5px; }
.barre-actions { margin: 26px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ grilles */

.grille { display: grid; gap: 12px; }
.g-niveaux { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.g-chapitres { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.g-actions { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g-deux { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.g-large { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g-formules { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.g-points { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

.carte-niveau {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 112px; padding: 16px 18px; background: #fff;
  border: 1px solid var(--bord); border-radius: var(--r-carte); color: var(--encre);
}
.carte-niveau:hover { border-color: var(--accent); box-shadow: 0 10px 22px -14px rgba(27,42,74,.45); text-decoration: none; color: var(--encre); }
.carte-niveau b { font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.carte-niveau span { font-size: 14px; color: var(--sourdine); }

.carte-chapitre { background: #fff; border: 1px solid var(--bord); border-radius: 13px; padding: 17px 18px; }
.carte-chapitre > a:first-child { font-size: 17.5px; font-weight: 700; color: var(--encre); }
.carte-chapitre > a:first-child:hover { color: var(--accent); text-decoration: none; }
.carte-chapitre p { margin: 7px 0 13px; font-size: 14.5px; color: var(--sourdine); line-height: 1.45; }
.liens-rapides { display: flex; gap: 6px; flex-wrap: wrap; }
.liens-rapides a {
  font-size: 14px; font-weight: 600; padding: 7px 11px; border-radius: 7px;
  background: var(--surface); color: var(--texte-fort);
}
.liens-rapides a:hover { background: var(--accent-pale); color: var(--accent); text-decoration: none; }

.carte-action {
  display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 13px;
  background: #fff; border: 1px solid var(--bord); color: var(--encre);
}
.carte-action:hover { border-color: var(--accent); text-decoration: none; color: var(--encre); }
.carte-action strong { font-size: 20px; }
.carte-action span { font-size: 14.5px; color: var(--sourdine); }
.carte-action-pleine { background: var(--accent); border-color: var(--accent); color: #fff; }
.carte-action-pleine:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.carte-action-pleine span { color: var(--accent-tres-pale); }

.carte-nuit {
  display: block; padding: 22px 24px; background: var(--encre);
  color: #fff; border-radius: var(--r-carte);
}
.carte-nuit:hover { background: #22345a; text-decoration: none; color: #fff; }
.carte-nuit h2, .carte-nuit h3 { margin: 10px 0 6px; font-size: 22px; color: #fff; }
.carte-nuit p { margin: 0; font-size: 15.5px; color: var(--sur-nuit); line-height: 1.45; }
.etiquette-nuit {
  font: 500 12px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sur-nuit-doux);
}

.carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 22px 24px; }
.carte h2 { margin: 0 0 14px; font-size: 18px; }
.carte ol, .carte ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; color: var(--texte-fort); line-height: 1.45; }

.liste-liens { display: flex; flex-direction: column; gap: 9px; }
.liste-liens a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--surface); border-radius: var(--r-bouton);
  font-size: 15.5px; font-weight: 600; color: var(--encre);
}
.liste-liens a:hover { background: var(--accent-pale); color: var(--accent); text-decoration: none; }
.liste-liens a span { font: 400 12.5px/1 var(--mono); color: var(--sourdine-clair); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--bord); border-radius: 99px;
  font-size: 15.5px; font-weight: 600; color: var(--encre);
}
.puce:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.puce span { font: 400 12.5px/1 var(--mono); color: var(--sourdine-clair); }

/* -------------------------------------------------------------- blocs cours */

.cours { max-width: var(--lecture); }
.cours h2 { margin: 44px 0 0; font-size: 25px; }
.cours h2:first-of-type { margin-top: 34px; }
.cours p { font-size: 17.5px; line-height: 1.62; }
.cours > p { margin: 14px 0 0; }
.cours ul, .cours ol { font-size: 17px; line-height: 1.6; padding-left: 22px; }
.cours li + li { margin-top: 7px; }

.bloc { margin: 16px 0 0; border-radius: 12px; padding: 18px 22px; }
.bloc p { margin: 10px 0 0; }
.bloc p:first-of-type { margin-top: 8px; }
.bloc > :last-child { margin-bottom: 0; }
.bloc-titre {
  font: 500 11.5px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; display: block;
}
.bloc-titre .precision { text-transform: none; letter-spacing: 0; opacity: .8; font-weight: 400; }

.bloc-def { background: #fff; border: 1px solid var(--bord); border-left: 3px solid var(--encre); }
.bloc-def .bloc-titre { color: var(--sourdine); }

.bloc-prop { background: #fff; border: 1px solid var(--bord); border-left: 3px solid var(--accent); }
.bloc-prop .bloc-titre { color: var(--accent); }

.bloc-methode { background: #fff; border: 1px solid var(--bord); border-left: 3px solid var(--violet); }
.bloc-methode .bloc-titre { color: var(--violet); }

.bloc-exemple { background: var(--vert-fond); border: 1px solid var(--vert-bord); }
.bloc-exemple .bloc-titre { color: var(--vert); }

.bloc-note { background: var(--accent-pale); }
.bloc-note .bloc-titre { color: var(--accent); }

.bloc-erreur { background: var(--orange-fond); border: 1px solid var(--orange-bord); }
.bloc-erreur .bloc-titre { color: var(--orange); }

/* La formule à retenir est encadrée et détachée du texte, comme sur une fiche
   de révision. `display: block` est indispensable : la classe est aussi posée
   sur des <span>, qu'un <p> a le droit de contenir — un <div>, non. */
.formule {
  display: block; margin: 14px 0 0; text-align: center; font-size: 19px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-bouton); padding: 14px 16px;
  overflow-x: auto;
}
.bloc .formule { background: var(--surface); }
.bloc-exemple .formule, .bloc-note .formule { background: #fff; }

.tableau-enveloppe {
  margin: 16px 0 0; background: #fff; border: 1px solid var(--bord);
  border-radius: 12px; overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
th {
  text-align: left; padding: 12px 16px; font-size: 13.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sourdine); background: var(--surface);
  border-bottom: 1px solid var(--bord); font-weight: 600; white-space: nowrap;
}
td { padding: 11px 16px; border-bottom: 1px solid var(--bord-doux); vertical-align: top; }
tr:last-child td { border-bottom: none; }

pre {
  margin: 16px 0 0; background: var(--nuit); color: #e8ecf6; border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; font: 400 14.5px/1.65 var(--mono);
}
code { font-family: var(--mono); font-size: .93em; }
p code, li code, td code { background: var(--surface); border: 1px solid var(--bord-creme); border-radius: 5px; padding: 1px 5px; }

/* --------------------------------------------------------------- exercices */

.filtres-difficulte { margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.filtre-diff {
  display: block; text-align: left; padding: 15px 17px; border-radius: 12px;
  background: #fff; border: 1.5px solid var(--bord); color: var(--encre);
}
.filtre-diff:hover { border-color: var(--accent); text-decoration: none; color: var(--encre); }
.filtre-diff[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtre-diff .rang { display: block; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.filtre-diff .nom { display: block; margin-top: 7px; font-size: 18.5px; font-weight: 700; }
.filtre-diff .quoi { display: block; margin-top: 4px; font-size: 14px; opacity: .78; }

.exo { background: #fff; border: 1px solid var(--bord); border-radius: 13px; padding: 20px 22px; }
.exos { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; }
.exo-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exo-enonce { margin: 13px 0 0; font-size: 18px; line-height: 1.5; font-weight: 600; }
.exo-enonce p { margin: 0 0 8px; }
.exo-enonce p:last-child { margin-bottom: 0; }
.exo-enonce ol, .exo-enonce ul { font-weight: 400; font-size: 17px; margin: 10px 0 0; padding-left: 22px; }
.badge-diff { font-size: 13.5px; font-weight: 600; padding: 6px 10px; border-radius: 99px; white-space: nowrap; }
.diff-1 { color: var(--vert); background: var(--vert-fond); }
.diff-2 { color: var(--accent); background: var(--accent-pale); }
.diff-3 { color: var(--orange); background: var(--orange-fond); }
.diff-4 { color: var(--rouge); background: var(--rouge-fond); }

/* correction repliable : <details>, aucun JavaScript */
.correction { margin-top: 16px; }
.correction > summary {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px;
  border-radius: var(--r-bouton); border: 1px solid var(--bord); background: var(--surface);
  color: var(--encre); font-weight: 600; font-size: 15.5px; cursor: pointer;
  list-style: none; width: fit-content;
}
.correction > summary::-webkit-details-marker { display: none; }
.correction > summary::before { content: "▸"; color: var(--sourdine); }
.correction[open] > summary::before { content: "▾"; }
.correction > summary:hover { border-color: var(--accent); color: var(--accent); }
.correction-corps { margin: 14px 0 0; border-top: 1px dashed var(--bord); padding-top: 16px; }
.correction-corps > .bloc-titre { color: var(--vert); }
.etapes { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.etape { margin: 0; padding: 13px 16px; background: var(--surface); border-radius: var(--r-bouton); font-size: 16.5px; line-height: 1.55; }
.etape ol, .etape ul { margin: 0; padding-left: 20px; }
.reponse {
  margin: 12px 0 0; padding: 13px 16px; background: var(--vert-fond);
  border: 1px solid var(--vert-bord); border-radius: var(--r-bouton); font-size: 17px; line-height: 1.5;
}

/* -------------------------------------------------------------------- quiz */

.quiz-progression {
  position: sticky; top: 80px; z-index: 20; background: var(--surface);
  padding: 10px 0; margin: 24px 0 0;
  display: flex; align-items: center; gap: 12px;
}
.jauge { flex: 1; height: 8px; border-radius: 99px; background: #e4e1d8; overflow: hidden; }
.jauge > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); width: 0; transition: width .2s; }
.quiz-compte { font: 500 14px/1 var(--mono); color: var(--texte); white-space: nowrap; }

.questions { display: flex; flex-direction: column; gap: 12px; }
.question { background: #fff; border: 1px solid var(--bord); border-radius: 13px; padding: 20px 22px; }
.question-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.question-num { font: 500 12px/1 var(--mono); color: var(--sourdine); }
.question-type { font-size: 13.5px; color: var(--sourdine-clair); background: var(--surface); padding: 5px 9px; border-radius: 5px; }
.question h2, .question h3 { margin: 12px 0 0; font-size: 19px; line-height: 1.45; font-weight: 600; }
.options { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; }
.option {
  display: flex; align-items: center; gap: 10px; text-align: left; min-height: 52px;
  padding: 13px 16px; border-radius: 10px; cursor: pointer; font-size: 17px;
  background: #fff; border: 1.5px solid var(--bord); color: var(--encre);
}
.option:hover { border-color: var(--accent); }
.option input { margin: 0; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.option:has(input:checked) { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-fonce); font-weight: 700; }
.saisie {
  margin-top: 14px; width: 100%; max-width: 340px; height: 52px; padding: 0 16px;
  font-size: 17px; color: var(--encre); background: #fff;
  border: 1.5px solid var(--bord); border-radius: 10px;
}
.saisie:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47,107,255,.12); outline: none; }

.verdict { margin: 12px 0 0; padding: 12px 15px; border-radius: var(--r-bouton); font-size: 16.5px; line-height: 1.55; }
.verdict-ok { background: var(--vert-fond); border: 1px solid var(--vert-bord); }
.verdict-ko { background: var(--orange-fond); border: 1px solid var(--orange-bord); }
.verdict b { display: block; margin-bottom: 4px; }
.verdict-ok b { color: var(--vert); }
.verdict-ko b { color: var(--orange); }

.resultat { margin: 24px 0 0; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 28px; }
.resultat-tete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.score { font-size: 46px; font-weight: 700; letter-spacing: -.03em; }
.mention { font-size: 22px; font-weight: 600; }
.pourcent { margin-left: auto; font: 500 15px/1 var(--mono); color: var(--sourdine); }
.jauge-score { margin: 18px 0 0; height: 10px; border-radius: 99px; background: var(--fond); overflow: hidden; }
.jauge-score > i { display: block; height: 100%; border-radius: 99px; width: 0; }

/* ----------------------------------------------------------------- annales */

.filtres {
  margin: 26px 0 0; background: #fff; border: 1px solid var(--bord); border-radius: 13px;
  padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end;
}
.champ-filtre { display: flex; flex-direction: column; gap: 7px; min-width: 150px; }
.champ-filtre > span, .champ-filtre > label {
  font-size: 13.5px; font-weight: 600; color: var(--sourdine);
  letter-spacing: .04em; text-transform: uppercase;
}
.champ-filtre select {
  height: 46px; padding: 0 12px; font-size: 16px; border: 1px solid var(--bord);
  border-radius: var(--r-bouton); background: #fff; color: var(--encre);
}
.groupe-filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.puce-filtre {
  height: 40px; display: inline-flex; align-items: center; padding: 0 15px;
  border-radius: 99px; font-size: 15px; font-weight: 600;
  background: #fff; border: 1px solid var(--bord); color: var(--texte-fort);
}
.puce-filtre:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.puce-filtre[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.compte-resultats { margin: 20px 0 0; font-size: 16px; color: var(--sourdine); }

.annale { background: #fff; border: 1px solid var(--bord); border-radius: 13px; padding: 19px 22px; }
.annale-tete { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.annale h2, .annale h3 { margin: 13px 0 0; font-size: 19px; line-height: 1.45; font-weight: 600; }
/* Bornée comme la correction : empilé sur écran moyen, l'énoncé s'étalerait
   sinon sur toute la largeur de la carte. */
.annale-enonce { margin: 8px 0 0; max-width: 68ch; font-size: 16.5px; line-height: 1.6; color: var(--texte); }

/* -------------------------------------------------------------- CTA contact */

.cta {
  margin: 34px 0 0; background: var(--encre); border-radius: var(--r-carte); padding: 28px;
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.cta-texte { flex: 1 1 320px; }
.cta h2, .cta h3 { margin: 0; font-size: 21px; color: #fff; }
.cta p { margin: 7px 0 0; font-size: 16.5px; color: var(--sur-nuit); line-height: 1.5; max-width: 40em; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.cta-tel, .cta-form {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 22px; border-radius: 12px; text-decoration: none; font-weight: 600;
  min-width: 150px; transition: transform .12s, box-shadow .12s;
}
.cta-tel { background: #fff; color: var(--encre); }
.cta-form { background: var(--accent); color: #fff; }
.cta-tel:hover, .cta-form:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.cta-tel svg, .cta-form svg { width: 20px; height: 20px; }
.cta-tel-num { font-size: 19px; letter-spacing: -.02em; }
.cta-tel-label, .cta-form span:last-child { font-size: 13px; font-weight: 400; opacity: .8; }
.cta-reassurance { width: 100%; margin: 4px 0 0; font-size: 13px; color: var(--sur-nuit); opacity: .7; }

/* ----------------------------------------------------- bouton flottant aide */
.flottant-aide {
  position: fixed; bottom: 72px; right: 16px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
}
.flottant-action {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 14px; text-decoration: none; font-weight: 600;
  font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.16);
  transition: transform .12s, box-shadow .12s;
}
.flottant-action:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.flottant-action svg { width: 18px; height: 18px; flex-shrink: 0; }
.flottant-tel { background: #fff; color: var(--encre); }
.flottant-form { background: var(--accent); color: #fff; }
.flottant-label { white-space: nowrap; }

/* ---------------------------------------------------------------- contact */

.carte-prof {
  background: var(--encre); border-radius: var(--r-carte); padding: 26px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.carte-prof-texte { flex: 1 1 340px; }
.carte-prof h2 { margin: 12px 0 0; font-size: 24px; color: #fff; }
.carte-prof p { margin: 9px 0 0; font-size: 16.5px; color: var(--sur-nuit); line-height: 1.55; }
.carte-prof-actions { flex: 0 0 320px; }
.tel-geant {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; border-radius: 10px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 20px; letter-spacing: .01em;
}
.tel-geant:hover { background: var(--accent-fonce); color: #fff; text-decoration: none; }
.dispo { margin: 12px 0 0; font-size: 14.5px; color: var(--sur-nuit-doux); text-align: center; }

.formulaire { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; }
.champ-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 14.5px; font-weight: 600; color: var(--texte-fort); }
.champ .aide { font-size: 13px; color: var(--sourdine-clair); font-weight: 400; }
.champ input, .champ select, .champ textarea {
  padding: 0 14px; height: 50px; font-size: 16.5px; color: var(--encre); background: #fff;
  border: 1px solid var(--bord); border-radius: var(--r-bouton); outline: none;
}
.champ textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47,107,255,.12);
}
.mention-legale { margin: 0; font-size: 13.5px; color: var(--sourdine-clair); line-height: 1.5; }

/* ------------------------------------------------------------- recherche */

.recherche { margin: 34px 0 0; position: relative; }
.recherche label { display: block; font-size: 15px; font-weight: 600; color: var(--texte); margin-bottom: 8px; }
.recherche input {
  width: 100%; height: 62px; padding: 0 20px; font-size: 18px; color: var(--encre);
  background: #fff; border: 1.5px solid var(--bord); border-radius: 12px; outline: none;
}
.recherche input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47,107,255,.12); }
.resultats {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: #fff;
  border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; z-index: 30;
  box-shadow: 0 18px 40px -18px rgba(27,42,74,.35);
}
.resultats:empty { display: none; }
.resultats a {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--bord-doux); color: var(--encre);
}
.resultats a:last-child { border-bottom: none; }
.resultats a:hover, .resultats a:focus { background: var(--surface); text-decoration: none; }
.resultats .jeton { min-width: 62px; text-align: center; }
.resultats .titre { font-size: 16.5px; font-weight: 600; }
.resultats .genre { margin-left: auto; font-size: 14px; color: var(--sourdine-clair); }
.res-tous {
  display: flex; align-items: center; padding: 13px 18px;
  font-weight: 600; font-size: 15px; color: var(--accent); background: var(--surface);
}
.res-tous:hover, .res-tous:focus { background: var(--accent-pale); text-decoration: none; }

/* recherche plein texte (/recherche/) et barre de l'en-tête */
.recherche-entete { position: relative; display: flex; align-items: center; }
.recherche-entete input {
  width: 180px; height: 40px; padding: 0 38px 0 14px; outline: none;
  border: 1px solid var(--bord); border-radius: 99px; background: #fff;
  color: var(--encre); font-size: 15px;
}
.recherche-entete input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.recherche-entete input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.recherche-entete button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 99px;
  background: transparent; color: var(--sourdine); cursor: pointer;
  display: grid; place-items: center;
}
.recherche-entete button:hover { color: var(--accent); background: var(--accent-pale); }
.recherche-entete svg { width: 17px; height: 17px; display: block; }
.resultats-entete { left: auto; right: 0; width: 340px; max-width: 88vw; }
@media (min-width: 1050px) { .recherche-entete input { width: 230px; } }

.recherche-ligne { display: flex; gap: 10px; }
.recherche-ligne input { flex: 1; min-width: 0; }
.recherche-ligne .btn { height: 62px; padding: 0 22px; width: auto; }
.recherche-statut { margin: 20px 0 0; font-size: 15.5px; color: var(--sourdine); }
.recherche-resultats { margin-top: 14px; }
.res-item {
  display: block; padding: 15px 18px; margin-bottom: 10px;
  border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--encre);
}
.res-item:hover { border-color: var(--accent); text-decoration: none; }
.res-tete { display: flex; align-items: center; gap: 10px; }
.res-tete .jeton { flex-shrink: 0; }
.res-titre { font-size: 17px; font-weight: 600; }
.res-genre { margin-left: auto; flex-shrink: 0; font-size: 14px; color: var(--sourdine-clair); }
.res-extrait { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--texte); }
.res-url { display: block; margin-top: 7px; font: 400 12.5px/1.4 var(--mono); color: var(--vert); }
.res-item mark, .res-extrait mark { background: var(--accent-tres-pale); color: inherit; border-radius: 3px; padding: 0 1px; }
.res-plus {
  display: block; margin: 18px auto 0; padding: 12px 24px; cursor: pointer;
  border-radius: var(--r-bouton); border: 1px solid var(--bord); background: var(--carte);
  color: var(--encre); font-weight: 600; font-size: 15.5px;
}
.res-plus:hover { border-color: var(--accent); color: var(--accent); }
.res-vide { font-size: 15.5px; color: var(--sourdine); }

/* ------------------------------------------------------------- pied de page */

.pied { margin-top: 56px; background: var(--nuit); color: #fff; }
.pied-interne { max-width: var(--large); margin: 0 auto; padding: 40px 20px 26px; }
.pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
.pied strong { font-size: 17px; }
.pied p { margin: 9px 0 0; font-size: 15.5px; color: var(--sur-nuit-doux); line-height: 1.55; }
.pied-titre {
  margin: 0 0 11px; font: 500 12px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sourdine-clair);
}
.pied-liens { display: flex; flex-direction: column; gap: 8px; }
.pied-liens a { font-size: 15.5px; color: var(--sur-nuit); }
.pied-liens a:hover { color: #fff; text-decoration: underline; }
.pied-tel {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 9px; height: 48px;
  padding: 0 18px; border-radius: var(--r-bouton); background: var(--accent);
  color: #fff; font-weight: 600; font-size: 16.5px;
}
.pied-tel:hover { background: var(--accent-fonce); color: #fff; text-decoration: none; }
.pied-bas {
  margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--nuit-bord);
  font-size: 14px; color: var(--sourdine-clair);
}
.pied-bas a { color: var(--sourdine-clair); }
.pied-bas a:hover { color: #fff; }

/* --------------------------------------------------- navigation mobile bas */

.nav-mobile {
  position: sticky; bottom: 0; z-index: 50; background: #fff;
  border-top: 1px solid var(--bord); display: none; padding: 6px 6px 8px;
  box-shadow: 0 -8px 24px -18px rgba(27,42,74,.5);
}
.nav-mobile a {
  flex: 1; min-height: 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; border-radius: 10px;
  color: var(--sourdine-clair); font-size: 13px; font-weight: 600;
}
.nav-mobile a:hover { text-decoration: none; }
.nav-mobile a[aria-current="page"] { color: var(--accent); background: var(--accent-pale); }
.nav-mobile svg { width: 21px; height: 21px; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .nav-bureau { display: none; }
  .tel-entete span.numero { display: none; }
  .tel-entete { padding: 0 14px; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .entete-interne { padding: 11px 16px; gap: 8px; position: relative; }
  /* Sur mobile, la recherche vit dans la barre de navigation du bas. */
  .recherche-entete { display: none; }
  .marque-nom span { display: none; }
  .marque-jeton { width: 34px; height: 34px; font-size: 17px; }
  .marque-nom strong { font-size: 16.5px; }
  .cta-entete { display: none; }
  .tel-entete { background: var(--accent); border-color: var(--accent); color: #fff; height: 44px; }
  .tel-entete:hover { color: #fff; }
  .entete-actions { gap: 8px; margin-left: auto; }
  .large, .lecture, .moyen { padding-left: 16px; padding-right: 16px; }
  .nav-mobile { display: flex; }
  main { padding-bottom: 8px; }
  .ariane code { display: none; }
  h1 { font-size: clamp(25px, 7vw, 32px); }
  .chapo { font-size: 17.5px; }
  .cours p { font-size: 17px; }
  .bloc { padding: 16px 17px; }
  .exo, .question, .annale, .carte { padding: 17px 18px; }
  .formule { font-size: 17px; padding: 12px 13px; }
  table { font-size: 15.5px; }
  th, td { padding: 10px 12px; }
  .cta { padding: 20px; }
  .cta-actions { width: 100%; }
  .cta-tel, .cta-form { flex: 1; min-width: 140px; }
  .flottant-aide { bottom: 64px; right: 10px; }
  .flottant-action { padding: 10px 14px; font-size: 13px; }
  .banniere-interne { padding: 12px 14px; gap: 10px; }
  .banniere-texte { font-size: 14.5px; flex-basis: 100%; }
  .banniere-texte strong { font-size: 16px; }
  .banniere-actions { width: 100%; margin-left: 0; }
  .banniere-tel, .banniere-form { flex: 1; justify-content: center; font-size: 15px; padding: 9px 14px; }
  .carte-prof { padding: 20px; }
  .carte-prof-actions { flex: 1 1 100%; }
  .champ-ligne { grid-template-columns: 1fr; }
  .quiz-progression { top: 122px; }
  .score { font-size: 38px; }
  .btn { width: 100%; }
  .barre-actions .btn, .cta-boutons .btn { width: auto; }
  .liens-rapides a { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 420px) {
  .g-niveaux { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .carte-niveau { min-height: 92px; padding: 13px 14px; }
  .carte-niveau b { font-size: 22px; }
}

@media print {
  .entete, .nav-mobile, .pied, .cta, .correction > summary, .ariane-barre, .recherche, .flottant-aide, .banniere-cta { display: none !important; }
  .correction-corps { display: block !important; }
  body { background: #fff; font-size: 12pt; }
  .carte, .exo, .bloc, .question { break-inside: avoid; border-color: #ccc; }
}

/* ------------------------------------------------- portes d'entrée examen */

.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 30px; }
.porte {
  display: flex; flex-direction: column; gap: 8px; padding: 26px 28px;
  border-radius: var(--r-carte); background: #fff; border: 1px solid var(--bord); color: var(--encre);
}
.porte:hover { border-color: var(--accent); box-shadow: 0 12px 26px -16px rgba(27,42,74,.45); text-decoration: none; color: var(--encre); }
.porte h2 { margin: 6px 0 0; font-size: 23px; }
.porte p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texte); }
.porte-etiquette {
  font: 500 12px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sourdine);
}
.porte-lien { margin-top: 8px; font-weight: 600; font-size: 16px; color: var(--accent); }
.porte-lien::after { content: " →"; }

.porte-pleine { background: var(--encre); border-color: var(--encre); color: #fff; }
.porte-pleine:hover { background: #22345a; border-color: #22345a; color: #fff; }
.porte-pleine h2 { color: #fff; }
.porte-pleine p { color: var(--sur-nuit); }
.porte-pleine .porte-etiquette { color: var(--sur-nuit-doux); }
.porte-pleine .porte-lien { color: #fff; }

/* --------------------------------------------------- la page d'un sujet */

/* Cette page met l'énoncé et sa correction côte à côte. Deux colonnes de
   lecture ne tiennent pas dans les 1120 px du reste du site : elle a donc son
   propre conteneur, plus large — et l'en-tête, le fil d'Ariane et le pied
   suivent, sinon plus rien ne s'aligne verticalement. */
.sujet-page {
  width: 100%; max-width: 1560px; margin: 0 auto;
  padding-left: 20px; padding-right: 20px;
}
.page-sujet .entete-interne,
.page-sujet .ariane,
.page-sujet .pied-interne { max-width: 1560px; }

/* Le sujet d'origine prend toute la largeur : c'est un document A4, on le lit
   en entier avant de le travailler. */
.sujet-visuel { margin-top: 30px; }
.sujet-visuel h2 { margin: 0 0 14px; font-size: 21px; }
/* Une page A4 est portrait : dans une boîte large, la visionneuse l'ajuste sur
   la hauteur. On vise donc ~1150 px de haut, ce qui rend la page autour de sa
   taille réelle (794 px de large) au lieu d'une vignette. */
.sujet-visionneuse {
  display: block; width: 100%; height: min(88vh, 1150px);
  border: 1px solid var(--bord); border-radius: var(--r-carte); background: var(--surface);
}
.sujet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }

/* Repli mobile : les navigateurs de téléphone n'affichent pas les PDF en
   iframe (icône d'interdiction) — on cache la visionneuse et on propose
   l'ouverture directe du fichier. */
.sujet-visionneuse-secours { display: none; }

/* Les en-têtes de colonne, puis une paire par exercice : l'énoncé et sa
   correction démarrent à la même hauteur, exercice après exercice. */
.sujet-colonnes-tete,
.sujet-paire {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px;
}
.sujet-colonnes-tete { margin: 24px 0 12px; }
.sujet-colonnes-tete span {
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sourdine); padding-bottom: 11px; border-bottom: 1px solid var(--bord);
}
.sujet-paire { align-items: start; margin-bottom: 22px; }

.sujet-exo { background: #fff; border: 1px solid var(--bord); border-radius: 13px; padding: 18px 20px; }
.sujet-exo h3 { margin: 12px 0 10px; font-size: 18px; line-height: 1.4; }
.sujet-exo .etapes { margin-top: 12px; }
.sujet-chapitre { font-size: 14px; color: var(--sourdine); }
.sujet-exo .badge-diff { margin-left: auto; }
.sujet-renvoi { margin: 12px 0 0; font-size: 15px; }
.sujet-note { margin: 10px 0 18px; color: var(--sourdine); font-size: 16px; max-width: 46em; }

.enonce-tete { padding-bottom: 12px; border-bottom: 1px solid var(--bord-doux); }
.jeton-enonce { color: var(--encre); background: var(--accent-tres-pale); }

/* Sous 1300 px les deux colonnes ne laissent plus assez de largeur au texte :
   on empile, énoncé puis correction, exercice par exercice — l'ordre de
   lecture reste le bon, et la correction retrouve toute la largeur. */
@media (max-width: 1300px) {
  .sujet-colonnes-tete { display: none; }
  .sujet-paire { grid-template-columns: 1fr; gap: 12px; margin-bottom: 34px; }
}

@media (max-width: 900px) {
  .sujet-visionneuse { display: none; }
  .sujet-visionneuse-secours {
    display: block; background: #fff; border: 1px solid var(--bord);
    border-radius: var(--r-carte); padding: 34px 22px; text-align: center;
  }
  .sujet-visionneuse-secours .btn { margin-top: 14px; }
  .sujet-visionneuse-secours .sujet-note { margin: 16px auto 0; font-size: 14.5px; }
  .sujet-page { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------ le corrigé d'un sujet : une étape, une question */

.sujet-acces { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }

/* Un sommaire d'ancres : sur un sujet de cinq exercices, on ne fait plus
   défiler la page pour retrouver la bonne correction. */
.corrige-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.corrige-index a {
  font: 500 13px/1 var(--mono); color: var(--encre); background: #fff;
  border: 1px solid var(--bord); border-radius: 99px; padding: 9px 14px;
}
.corrige-index a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.corrige-exo { padding: 18px 22px 16px; }
.corrige-tete { padding-bottom: 14px; border-bottom: 1px solid var(--bord-doux); }
.jeton-corrige { color: var(--vert); background: var(--vert-fond); }
.sujet-retour { margin-left: auto; font-size: 14.5px; white-space: nowrap; }

/* Le repère de la question passe en gouttière : une colonne de numéros que
   l'œil descend sans lire, et une ligne de texte enfin courte. */
.etapes-guidees { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etape-guidee {
  display: grid; grid-template-columns: 124px minmax(0, 68ch); gap: 0 22px;
  padding: 15px 0; border-bottom: 1px solid var(--bord-doux);
}
.etape-guidee:last-child { border-bottom: 0; padding-bottom: 4px; }

/* Changement de partie : la coupure structurante du sujet mérite mieux
   qu'un filet de plus au milieu des autres. */
.etape-rupture { border-top: 1px solid var(--bord); margin-top: 12px; padding-top: 24px; }

/* La partie au-dessus, la question en dessous : « Partie A · 1. a. » sur une
   seule ligne se cassait n'importe où. */
.etape-repere { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.repere-partie {
  font: 500 11.5px/1.4 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--sourdine-clair);
}
.repere-question { font: 600 13.5px/1.5 var(--mono); color: var(--accent); }
.etapes-comptees .etape-guidee::before {
  counter-increment: etape; content: "Étape " counter(etape);
  font: 500 13px/1.6 var(--mono); color: var(--sourdine-clair); padding-top: 3px;
}
.etape-texte {
  grid-column: 2; margin: 0; max-width: 68ch; font-size: 16.5px; line-height: 1.65;
  color: var(--texte-fort); text-wrap: pretty;
}

/* Côté énoncé la colonne est étroite : le repère devient un chapeau en gras
   avec un retrait pendant, qui aligne les questions sans gouttière. */
.enonce-question { padding-left: 2.4em; text-indent: -2.4em; }

/* « Partie A » porte le plan de l'epreuve : elle ne doit pas se lire comme
   une phrase de plus. */
.enonce-partie {
  margin: 22px 0 4px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sourdine);
  padding-bottom: 7px; border-bottom: 1px solid var(--bord-doux);
}
.enonce-partie span { letter-spacing: .04em; text-transform: none; color: var(--texte); }
.enonce-repere { color: var(--encre); font-weight: 600; }
.sujet-saut { font-weight: 600; }

/* En deux colonnes, la gouttière des repères prend une place qu'il vaut mieux
   rendre au texte. Cette règle doit suivre celle qui fixe la gouttière large,
   sinon l'ordre du fichier l'annule. */
@media (min-width: 1301px) and (max-width: 1460px) {
  .etape-guidee { grid-template-columns: 96px minmax(0, 68ch); gap: 0 16px; }
  .repere-question { font-size: 12.5px; }
  .repere-partie { font-size: 11px; }
}

@media (max-width: 900px) {
  .etape-guidee { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
  .etape-texte { grid-column: 1; }
  .etape-repere, .etapes-comptees .etape-guidee::before { padding-top: 0; }
  .corrige-exo { padding: 18px 17px 16px; }
  .sujet-retour { margin-left: 0; }
}

@media print {
  /* À l'impression, la visionneuse PDF ne rend rien d'utile et les renvois
     d'ancre ne mènent nulle part : on garde le texte. */
  .sujet-visuel, .corrige-index, .sujet-acces, .sujet-renvoi, .sujet-retour,
  .sujet-colonnes-tete { display: none !important; }
  .sujet-paire { display: block; }
  .sujet-exo { margin-bottom: 14px; }
  .sujet-exo, .etape-guidee { break-inside: avoid; }
}

/* Indices et exposants composés depuis « C_f », « u_n », « e^(−0,6t) ». Même
   taille pour les deux, et un décalage explicite : sans lui l'indice se pose
   trop haut et se confond avec la ligne de base. */
sub, sup { font-size: .72em; line-height: 0; letter-spacing: .01em; }
sub { vertical-align: -.22em; }
sup { vertical-align: .42em; }

/* ------------------------------------------------- étapes d'une démonstration

   Initialisation, hérédité, conclusion : les trois temps d'un raisonnement par
   récurrence doivent sauter aux yeux. Un filet et un retrait suffisent — c'est
   la mise en page qu'on attend sur une copie. */
.demo {
  margin: 12px 0 0; padding: 2px 0 2px 15px;
  border-left: 2px solid var(--bord);
}
.demo > b:first-child { color: var(--encre); }

/* -------------------------------------------- notation mathématique écrite

   Ce que l'élève a sous les yeux dans son manuel et trace sur sa copie : la
   fraction empilée, le radical barré, la flèche au-dessus du vecteur. Le HTML
   correspondant est composé au rendu par src/notation.mjs. */

/* La barre de fraction se pose sur la ligne d'écriture : `middle` place le
   milieu de la boîte — donc la barre — à mi-hauteur d'x du texte porteur. */
/* La fraction empilee occupe deux lignes : sans reduction elle depasse la
   hauteur de ligne de 14 px et vient mordre sur la ligne du dessus. On la
   resserre, et on aere en retour les textes qui portent des maths. */
.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; margin: 0 .16em; line-height: 1.1; font-size: .84em;
}
.frac-h { border-bottom: 1.2px solid currentColor; padding: 0 .3em .06em; }
.frac-b { padding: .06em .3em 0; }

/* Hauteur de ligne des textes ou fraction, radical et vecteur peuvent
   apparaitre : de quoi loger leur hauteur sans chevauchement. */
.annale-enonce, .etape-texte, .fiche-corps, .bloc, .etape, .exo-enonce { line-height: 1.8; }

/* text-indent est hérité, et une boîte inline-block ou un élément de flex sont
   des conteneurs de bloc : sans cette remise à zéro, le retrait pendant des
   questions d'énoncé décale le contenu de chaque fraction, radical et vecteur
   de 2,4 em vers la gauche — le numérateur part sur le mot d'avant. */
.frac, .racine, .vec { text-indent: 0; }

/* Le trait du radical remplace les parenthèses, comme au tableau. */
.racine { display: inline-flex; align-items: flex-start; }
/* Le trait doit prolonger le bras du radical, pas flotter au-dessus : la marge
   haute rattrape l'espace que la police laisse au-dessus du signe. */
.racine-sous {
  border-top: 1.3px solid currentColor;
  margin: .16em 0 0 -.1em; padding: .04em .18em 0 .08em;
}

/* La flèche couvre le nom entier du vecteur, pas seulement sa dernière lettre. */
.vec { position: relative; display: inline-block; padding: .26em .16em 0 .02em; }
.vec::before {
  content: ""; position: absolute; left: 0; right: .02em; top: .1em;
  border-top: 1.2px solid currentColor;
}
.vec::after {
  content: ""; position: absolute; right: .02em; top: .1em;
  width: .28em; height: .28em;
  border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor;
  transform: rotate(45deg); transform-origin: top right;
}

/* ------------------------------------------------------- fiche de révision

   Une fiche se lit debout, la veille du contrôle, ou s'imprime. Elle est donc
   plus dense que le cours : pas de cartouche coloré autour de chaque bloc,
   mais une étiquette et un filet, pour tenir le maximum sur une page. */

.fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }

.fiche-partie {
  margin: 30px 0 4px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sourdine);
  padding-bottom: 9px; border-bottom: 1px solid var(--bord);
}

.fiche-point, .fiche-methode {
  margin: 16px 0 0; padding: 15px 18px; background: #fff;
  border: 1px solid var(--bord); border-radius: 12px;
}
.fiche-point > :last-child, .fiche-methode > :last-child { margin-bottom: 0; }
.fiche-corps { font-size: 16.5px; line-height: 1.6; color: var(--texte-fort); }
.fiche-corps p { margin: 8px 0 0; }
.fiche-corps > :last-child { margin-bottom: 0; }

.fiche-tete {
  margin: 0 0 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fiche-etiquette, .fiche-numero {
  font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 6px; white-space: nowrap;
}
.fiche-etiquette.f-def { color: var(--encre); background: var(--fond); }
.fiche-etiquette.f-prop { color: var(--accent); background: var(--accent-pale); }
.fiche-etiquette.f-note { color: var(--orange); background: var(--orange-fond); }
.fiche-numero { color: var(--violet); background: var(--violet-fond); }
.fiche-sujet { font-weight: 600; font-size: 16.5px; color: var(--encre); }

/* Chaque élément important est encadré, et son filet dit sa nature — les mêmes
   couleurs que dans le cours, pour qu'une propriété reste une propriété d'une
   page à l'autre. */
.point-def { border-left: 3px solid var(--encre); }
.point-prop { border-left: 3px solid var(--accent); }
.point-note { border-left: 3px solid var(--orange); }
.fiche-methode { border-left: 3px solid var(--violet); }

@media print {
  /* Une fiche est faite pour finir sur du papier. */
  .fiche-actions, .fiche-point + .cta, .barre-actions { display: none !important; }
  .fiche-point, .fiche-methode { break-inside: avoid; border-color: #ccc; padding: 10px 12px; margin-top: 10px; }
  .fiche-partie { break-after: avoid; }
}