/* ===========================================================================
   Examen civique — feuille de style
   ---------------------------------------------------------------------------
   Registre visuel : l'administration française. Bleu République, papier
   gris-bleu d'un formulaire officiel, verts et rouges de la charte de l'État.
   Tout ce sur quoi on agit est en grotesque (Archivo) : énoncés, réponses,
   commandes. Le serif (Spectral, fonderie française) est réservé aux fiches,
   seul endroit où l'on lit d'une traite plutôt qu'on n'agit.
   =========================================================================== */

/* ---------- Fontes auto-hébergées (sous-ensemble latin) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2-variations'),
      url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900; font-stretch:100%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Spectral'; src:url('fonts/spectral-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Spectral'; src:url('fonts/spectral-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- Jetons ---------- */
:root{
  /* Palette claire : papier gris-bleu d'un formulaire officiel */
  --encre:#0e1030;          /* texte, surfaces pleines */
  --encre-70:#4a4f6b;       /* texte secondaire */
  --encre-45:#797e97;       /* légendes, métadonnées */
  --papier:#edeef4;         /* fond de page */
  --surface:#ffffff;        /* feuilles, panneaux */
  --surface-2:#f6f7fa;      /* lignes alternées, champs */
  --trait:#d6d8e2;          /* filets */
  --trait-fort:#b3b7c7;

  --bleu:#000091;           /* Bleu France, celui de la charte de l'État */
  --bleu-pale:#e4e5f7;
  --vert:#18753c;           /* juste */
  --rouge:#e1000f;          /* Rouge Marianne */
  --rouge-pale:#fdeaeb;
  --ambre:#8a5a00;          /* mise en situation, avertissement */
  --ambre-pale:#fbf0dc;

  /* ---------- Échelle d'espacement ----------
     Un pas de 4 px, et rien entre les crans. Toute marge, tout retrait, tout
     écart de grille sort d'ici : c'est ce qui fait qu'un écran a un rythme
     plutôt qu'une suite de valeurs trouvées une par une.

     Ce que chaque cran veut dire, pour qu'on choisisse par intention et non
     par tâtonnement :
       e1  une chose et son ombre portée, deux éléments soudés
       e2  une chose et sa légende — elles se lisent d'un seul tenant
       e3  à l'intérieur d'un bloc
       e4  rembourrage standard d'un bloc
       e5  entre deux blocs frères
       e6  entre deux groupes de sens différent
       e7  respiration de tête ou de pied d'écran            */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:24px; --e6:32px; --e7:48px;

  /* Marge latérale de l'écran. Tout ce qui doit déborder jusqu'aux bords s'en
     sert en négatif : une bande pleine largeur et la marge qui l'entoure ne
     peuvent pas diverger, et rien ne dépasse au point de faire apparaître une
     barre de défilement horizontale. */
  --gouttiere:max(var(--e4), env(safe-area-inset-left), env(safe-area-inset-right));

  /* ---------- Échelle typographique ----------
     Base 16, progression douce. Les composants n'écrivent jamais de taille en
     dur : ils piochent ici. C'est la même règle que pour les espacements. */
  --t-050:11px;   /* onglets, mentions les plus fines */
  --t-100:12px;   /* méta, mentions */
  --t-200:13px;   /* annotations */
  --t-300:15px;   /* texte secondaire, explications */
  --t-400:16px;   /* corps */
  --t-500:18px;   /* réponse mise en avant */
  --t-600:21px;
  --t-700:24px;
  --t-800:27px;   /* énoncé */
  --t-900:38px;   /* chiffres */
  --t-1000:52px;  /* score d'examen */

  /* ---------- Interlignes ---------- */
  --i-serre:1.22;   /* titres et énoncés */
  --i-moyen:1.35;   /* réponses */
  --i-lu:1.5;       /* texte qui se lit en continu */

  --r-sm:6px; --r:10px; --r-lg:16px;
  --ligne:1px solid var(--trait);
  --barre:4px;              /* épaisseur du filet latéral d'une option */
  --nav-h:60px;
  /* Bas de l'écran utile : au-dessus des onglets sur téléphone, au ras du
     bord ailleurs. Tout ce qui se colle en bas s'y aligne. */
  --bas-utile:calc(var(--nav-h) + env(safe-area-inset-bottom));

  --sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Spectral',Georgia,'Times New Roman',serif;

  color-scheme:light;
}

:root[data-theme="dark"]{
  --encre:#e8e9f2;
  --encre-70:#a6a9bf;
  --encre-45:#7d8199;
  --papier:#0e1024;
  --surface:#181b33;
  --surface-2:#1f2240;
  --trait:#2e3252;
  --trait-fort:#454a70;

  --bleu:#9aa3ff;
  --bleu-pale:#232750;
  --vert:#6fc08b;
  --rouge:#f08b8b;
  --rouge-pale:#3a1c1e;
  --ambre:#e0b366;
  --ambre-pale:#332714;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

/* Une classe qui pose display: bat la règle [hidden] du navigateur.
   On la rétablit explicitement, sinon .btn[hidden] reste visible. */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--sans);
  font-size:var(--t-400);
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;background:none;border:0;padding:0;text-align:inherit}
a{color:var(--bleu)}

:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:var(--r-sm)}
:root[data-theme="dark"] :focus-visible{outline-color:var(--bleu)}

/* Jeu d'icônes : présent dans le document, absent de la mise en page. */
.sprite{position:absolute}

/* Masqué visuellement, lisible par un lecteur d'écran */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===========================================================================
   Ossature
   =========================================================================== */
/* Colonne pleine hauteur. Aucune hauteur n'est calculée à la main : l'en-tête
   et la barre d'onglets prennent ce qu'il leur faut, « main » occupe le reste.
   Additionner des constantes déborderait de quelques pixels dès qu'un
   élément change de taille.

   100svh et non 100dvh : sur iPhone, la barre d'outils de Safari se replie en
   cours de défilement et dvh change avec elle, ce qui fait osciller la page.
   svh correspond au viewport le plus petit — la page tient dans tous les cas. */
.shell{
  max-width:720px;
  margin:0 auto;
  /* Les quatre bords tiennent compte des zones inaccessibles. En navigateur
     les insets valent 0 et max() retombe sur la marge normale ; une fois
     l'application installée sur l'écran d'accueil, l'inset du haut vaut la
     hauteur de la Dynamic Island — sans cela, la première ligne passe dessous.
     Gauche et droite servent au mode paysage. */
  padding:
    max(var(--e4), env(safe-area-inset-top))
    var(--gouttiere)
    calc(var(--nav-h) + env(safe-area-inset-bottom))
    var(--gouttiere);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
main{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0 }

/* ---------- Barre supérieure ----------
   Une seule barre, un seul filet. Sur téléphone elle se réduit à rien : le
   titre de l'application n'apprend rien à qui vient de l'ouvrir, et cette
   hauteur sert mieux à l'énoncé. Les onglets en sortent par position:fixed. */
.barre{
  display:flex; align-items:center; gap:var(--e3);
  padding:var(--e3) 0 var(--e3);
  position:sticky; top:0; z-index:20;
  background:var(--papier);
}
.barre::after{
  content:''; position:absolute; bottom:0;
  left:calc(-1 * var(--gouttiere)); right:calc(-1 * var(--gouttiere));
  height:1px; background:var(--trait);
}
.marque{display:flex;align-items:center;gap:var(--e2);min-width:0;flex:1}
.marque .sigle{
  width:30px;height:30px;flex:none;border-radius:var(--r-sm);
  background:var(--encre);display:grid;place-items:center;
}
.marque .sigle span{display:block;width:13px;height:13px;border-radius:2px;
  background:linear-gradient(to right,var(--bleu) 0 33.33%,#fff 33.33% 66.66%,var(--rouge) 66.66% 100%)}
:root[data-theme="dark"] .marque .sigle span{
  background:linear-gradient(to right,#4d54d6 0 33.33%,#f0f1ff 33.33% 66.66%,#e05a5a 66.66% 100%)}
.marque h1{
  font-size:var(--t-400); font-weight:600; margin:0; letter-spacing:-.011em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.entete-actions{display:flex;gap:var(--e1);flex:none;margin-left:auto}

.ico-btn{
  width:38px;height:38px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--encre-70);
}
.ico-btn:hover{background:var(--surface-2);color:var(--encre)}
.ico-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Navigation basse (pouce) ---------- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--surface);
  border-top:var(--ligne);
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.nav button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h); color:var(--encre-45);
  font-size:var(--t-050); font-weight:500; letter-spacing:-.012em;
  position:relative; padding:0 2px; text-align:center;
}
.nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav button[aria-current="page"]{color:var(--bleu)}
.nav button[aria-current="page"]::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:2px; background:var(--bleu);
}
/* ---------- Vues ---------- */
/* Aucune animation au changement de vue : un écran qui apparaît en fondu à
   chaque geste finit par fatiguer plus qu'il ne renseigne. */
.vue{display:none}
.vue.active{display:block}

/* « Réviser » occupe la hauteur restante : les réponses tombent sous le pouce
   et l'espace libre se place au-dessus de la question, jamais en dessous. */
#vue-reviser.active{
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
}
/* ---------- Composition de l'écran de révision ----------
   Une seule règle, valable avant comme après la réponse : le bloc utile est
   un tout — contenu plus action — et l'espace libre se partage au-dessus et
   au-dessous de lui, davantage en bas qu'en haut. L'espace ne s'accumule
   ainsi jamais à un seul endroit : ni trou au milieu, ni bouton rejeté tout
   en bas. */
.pousse{flex:1 1 0; min-height:0; max-height:var(--e7)}
.pousse--bas{flex:1.6 1 0; max-height:calc(var(--e7) * 2.5)}

/* ===========================================================================
   Composants partagés
   =========================================================================== */

/* Une ligne d'orientation en tête d'écran : ce qu'il est utile de faire
   maintenant, d'après les données. Pas un titre, pas une explication. */
.conseil{
  margin:2px 0 var(--e4); font-size:var(--t-200); line-height:1.5; color:var(--encre-70);
  max-width:46ch;
}
.conseil b{color:var(--encre); font-weight:600}
.conseil:empty{display:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:48px; padding:0 var(--e4); border-radius:var(--r);
  font-weight:600; font-size:var(--t-400); letter-spacing:-.008em;
  border:1px solid var(--trait); background:var(--surface); color:var(--encre);
  transition:background .12s,border-color .12s;
}
.btn:hover{border-color:var(--trait-fort)}
.btn--plein{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.btn--plein:hover{background:#000;border-color:#000}
:root[data-theme="dark"] .btn--plein:hover{background:#fff;border-color:#fff}
.btn--bleu{background:var(--bleu);color:#fff;border-color:var(--bleu)}
:root[data-theme="dark"] .btn--bleu{color:#10132b}
.btn--large{width:100%}
.btn--danger{color:var(--rouge);border-color:var(--trait)}
.btn--danger:hover{border-color:var(--rouge);background:var(--rouge-pale)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* Étiquettes de provenance — information, pas décoration */
.jeton{
  display:inline-flex;align-items:center;gap:var(--e1);
  font-size:var(--t-100); font-weight:500; color:var(--encre-45);
}
.jeton::before{content:'';width:7px;height:7px;border-radius:2px;background:currentColor;flex:none}
.jeton--off{color:var(--bleu)}
.jeton--sit{color:var(--ambre)}

/* ===========================================================================
   Vue « Réviser » — l'écran principal
   ---------------------------------------------------------------------------
   Pas de carte : la question EST la page. Rien ne l'encadre.
   =========================================================================== */

/* Jauge de session : un filet plein largeur sous le bandeau */
.jauge{
  height:3px; background:var(--trait); position:relative; overflow:hidden;
  margin:0 calc(-1 * var(--gouttiere));
}
.jauge i{
  display:block; height:100%; background:var(--encre-45); width:0;
  transition:width .3s cubic-bezier(.4,0,.2,1);
}

.q-entete{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3);
  padding:var(--e4) 0 0; font-size:var(--t-100); color:var(--encre-45);
}
.q-entete .ref{font-weight:500;letter-spacing:.01em}

/* Filtre actif : une pastille qu'on touche pour le retirer. */
.filtre-actif{
  display:inline-flex; align-items:center; gap:var(--e1);
  min-height:28px; padding:0 var(--e2) 0 var(--e3); border-radius:99px;
  background:var(--bleu-pale); color:var(--bleu);
  font-size:var(--t-100); font-weight:600;
}
.filtre-actif svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}


/* L'énoncé est en grotesque, pas en serif : le serif coûterait de la place
   sur chaque question et donnerait à l'écran l'allure d'un document alors
   qu'on y agit. Il est réservé au corps des fiches.

   L'énoncé est aussi grand que sa longueur le permet, en cinq crans pris dans
   l'échelle. Les deux tiers des questions tiennent en deux lignes et restent
   en grand ; les quelques mises en situation de 150 caractères et plus se
   composent plus petit, pour que les quatre réponses restent visibles sans
   défiler. La marge basse suit la taille : un grand titre appelle plus d'air
   qu'un petit. */
.question{
  font-family:var(--sans); font-weight:600;
  font-size:var(--t-800); line-height:var(--i-serre); letter-spacing:-.022em;
  margin:0 0 var(--e5); text-wrap:pretty; max-width:20ch;
}
.question[data-long="moyen"]    {font-size:var(--t-700); max-width:24ch}
.question[data-long="long"]     {font-size:var(--t-600); line-height:1.28; max-width:30ch}
.question[data-long="tres"]     {font-size:var(--t-500); line-height:var(--i-moyen); letter-spacing:-.014em; max-width:34ch; margin-bottom:var(--e4)}
.question[data-long="minuscule"]{font-size:var(--t-400); line-height:var(--i-moyen); letter-spacing:-.008em; max-width:38ch; margin-bottom:var(--e4)}

/* Sur les énoncés longs, les réponses se resserrent aussi : la hauteur
   gagnée sert à garder les quatre choix dans l'écran. */
.question[data-long="long"] ~ .options .ligne,
.question[data-long="tres"] ~ .options .ligne{padding:var(--e3) var(--e3);min-height:48px}
.question[data-long="tres"] ~ .options{gap:var(--e2)}
.question[data-long="minuscule"] ~ .options .ligne{padding:var(--e2) var(--e3);min-height:42px}
.question[data-long="minuscule"] ~ .options{gap:var(--e1);margin-bottom:var(--e3)}

/* ---------- Options ---------- */
.options{display:flex;flex-direction:column;gap:var(--e3);margin:0 0 var(--e5)}

/* Une réponse doit se voir comme une touche que l'on presse. Le relief vient
   d'un bord inférieur plus épais — comme une touche physique — plutôt que
   d'une ombre portée, et il s'enfonce réellement au contact. */
.option{
  display:block; width:100%;
  background:var(--surface);
  border:1px solid var(--trait);
  border-bottom:2px solid var(--trait-fort);
  border-radius:9px;
  overflow:hidden;
  transition:border-color .12s, background .12s, transform .06s;
}
.option:hover:not(:disabled){border-color:var(--encre-45)}
.option:active:not(:disabled){transform:translateY(1px);border-bottom-width:1px;margin-bottom:1px}
.option:disabled{cursor:default}
.option:disabled{border-bottom-width:1px;margin-bottom:1px}

/* Pas de lettre A/B/C/D : on touche la réponse, on ne tape pas son initiale.
   Toute la largeur va au texte. */
.option .ligne{
  display:grid; grid-template-columns:1fr 20px; gap:var(--e3); align-items:center;
  padding:var(--e4); min-height:58px;
}
.option .texte{
  font-size:var(--t-400); font-weight:500; line-height:var(--i-moyen);
  letter-spacing:-.011em; text-wrap:pretty;
}
.option .marque-etat{width:20px;height:20px;margin-top:1px;opacity:0;flex:none}
.option .marque-etat svg{width:20px;height:20px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}



.option.cochee{border-color:var(--bleu);background:var(--bleu-pale)}
.option.cochee .texte{color:var(--bleu);font-weight:600}



/* ---------- Correction ----------
   Elle prend la place des réponses. L'énoncé reste au-dessus, en rappel et
   plus petit : on vient de le lire, il sert maintenant de contexte. Il perd
   sa méta et garde le même écart avec ce qui suit que dans l'autre état.

   Les sélecteurs du rappel portent data-long pour peser autant que les règles
   de calibre, sinon celles-ci l'emportent et l'énoncé reste en grand. Le
   rappel ne descend jamais sous 15 px : en dessous il cesse d'être relisible,
   et ce n'est pas là qu'il faut gagner de la place. */
#vue-reviser.corrige .q-entete{display:none}

.question--rappel[data-long]{
  font-size:var(--t-400); line-height:var(--i-moyen); font-weight:600;
  margin:0 0 var(--e5); color:var(--encre-70); max-width:40ch;
}
.question--rappel[data-long="long"],
.question--rappel[data-long="tres"],
.question--rappel[data-long="minuscule"]{
  font-size:var(--t-300);
}

/* Deux énoncés, l'un barré l'autre retenu, chacun suivi de sa raison. Pas
   d'étiquettes « Ta réponse » ou « La bonne réponse » : la croix et la coche
   le disent déjà. Pas d'encadrés non plus — c'est un raisonnement
   qu'on lit, pas un formulaire qu'on remplit.

   Le rythme sort de l'échelle : e2 entre une réponse et sa raison, parce
   qu'elles forment une seule idée ; e5 entre les deux réponses, parce que ce
   sont deux idées. C'est cet écart-là qui rend le bloc lisible. */
.cor-bloc{
  display:grid; grid-template-columns:22px 1fr; gap:var(--e2) var(--e3);
  margin:0 0 var(--e5);
}
.cor-bloc svg{
  width:19px; height:19px; margin-top:var(--e1);
  fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.cor-bloc.ok svg{stroke:var(--vert)}
.cor-bloc.ko svg{stroke:var(--rouge)}
.cor-rep{
  grid-column:2; margin:0;
  font-size:var(--t-500); font-weight:600; line-height:var(--i-moyen);
  letter-spacing:-.014em; text-wrap:pretty;
}
.cor-bloc.ok .cor-rep{color:var(--vert)}
.cor-bloc.ko .cor-rep{color:var(--rouge); text-decoration:line-through;
  text-decoration-color:#ef8188;
  text-decoration-color:color-mix(in srgb, var(--rouge) 45%, transparent);
  text-decoration-thickness:1.5px}
.cor-pourquoi{
  grid-column:2; margin:0;
  font-size:var(--t-300); line-height:var(--i-lu); color:var(--encre-70);
  text-wrap:pretty; max-width:44ch;
}

/* ---------- Le repère à retenir ---------- */
.repere{
  display:none;
  border-top:var(--ligne);
  padding:var(--e4) 0 0; margin:var(--e2) 0 0;
}
.repere.visible{display:block}
.repere > summary{
  list-style:none; cursor:pointer;
  font-size:var(--t-100); font-weight:600; color:var(--bleu);
  letter-spacing:.002em; display:flex; align-items:center; gap:6px;
  min-height:20px;
}
.repere > summary::-webkit-details-marker{display:none}
/* Replié, le repère annonce qu'il y a quelque chose à ouvrir. */
.repere:not([open]) > summary::after{content:'voir';color:var(--encre-45);font-weight:500}
.repere[open] > summary{margin-bottom:var(--e2)}
.repere h3{
  font-size:var(--t-100); font-weight:600; color:var(--bleu);
  margin:0 0 var(--e1); letter-spacing:-.002em;
}
.repere p{margin:0;font-size:var(--t-300);line-height:var(--i-lu);color:var(--encre-70);text-wrap:pretty;max-width:46ch}
.repere p + p{margin-top:var(--e2)}

/* ---------- Barre d'action ---------- */
.actions-q{display:flex;gap:var(--e2);align-items:center;margin-top:var(--e5)}
.actions-q .btn{flex:1}

/* ---------- Pied d'action ----------
   L'action principale d'un écran ne se cherche jamais en faisant défiler :
   « Question suivante », « Terminer et corriger », « Réviser mes erreurs »
   restent collées au-dessus des onglets quand le contenu dépasse. Quand il
   tient, le pied reste à sa place dans le flux, sous le contenu.
   Le fond monte en dégradé depuis le papier : ce qui passe dessous s'efface
   au lieu d'être coupé net par un filet. */
.pied-action{
  position:sticky; bottom:var(--bas-utile); z-index:10;
  margin-left:calc(-1 * var(--gouttiere)); margin-right:calc(-1 * var(--gouttiere));
  padding:var(--e4) var(--gouttiere) var(--e3);
  background:linear-gradient(to bottom, transparent, var(--papier) var(--e4));
}
.pied-action:has(> :not([hidden]) + :not([hidden])){gap:var(--e2)}

.btn--carre{flex:0 0 48px !important; padding:0; width:48px}
.btn--carre svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Le second choix d'une paire : il reste un bouton, mais cède la largeur. */
.actions-q .btn--retrait{flex:0 0 auto; padding:0 var(--e4)}

/* « Je ne sais pas » est un aveu utile, pas une action principale : il reste
   lisible et atteignable, sans rivaliser visuellement avec les réponses. */
.btn-discret{
  display:block; width:100%; min-height:44px;
  color:var(--encre-45); font-size:var(--t-200); font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--trait-fort);
}
.btn-discret:hover{color:var(--encre-70);text-decoration-color:var(--encre-45)}

.raccourcis{
  margin:var(--e4) 0 0; font-size:var(--t-100); color:var(--encre-45);
  display:flex; flex-wrap:wrap; gap:var(--e1) var(--e3);
}
.raccourcis kbd{
  font:inherit; font-weight:600; color:var(--encre-70);
  border:var(--ligne); border-bottom-width:2px; border-radius:4px;
  padding:1px var(--e1); background:var(--surface);
}

/* Sans clavier physique, ces indications n'apprennent rien à personne. */
@media (pointer:coarse), (max-width:599px){
  .raccourcis{display:none}
}

/* ---------- Progression d'un item : cinq crans de Leitner ---------- */
.crans{display:inline-flex;gap:3px;align-items:center;vertical-align:-1px}
.crans i{width:9px;height:4px;border-radius:1px;background:var(--trait);display:block}
.crans i.plein{background:var(--vert)}
.crans i.chaud{background:var(--ambre)}

/* ===========================================================================
   Vue « Examen »
   =========================================================================== */
/* Ce qu'on vient chercher en ouvrant l'onglet : le dernier score, en grand. */
.rappel-examen{
  border-left:var(--barre) solid var(--trait-fort);
  padding:2px 0 2px var(--e3); margin:var(--e1) 0 var(--e5);
}
.rappel-examen.ok{border-left-color:var(--vert)}
.rappel-examen.ko{border-left-color:var(--rouge)}
.rappel-score{
  margin:0; font-size:var(--t-900); font-weight:600; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.rappel-score small{font-size:var(--t-500);color:var(--encre-45);font-weight:500}
.rappel-examen.ok .rappel-score{color:var(--vert)}
.rappel-examen.ko .rappel-score{color:var(--rouge)}
.rappel-txt{margin:var(--e1) 0 0;font-size:var(--t-200);color:var(--encre-70)}

/* Trois choix, mais pas trois égaux : l'épreuve complète est celle qui
   compte, les deux autres sont des variantes qu'on prend selon le temps
   qu'on a. Trois cartes identiques diraient le contraire. */
.formules{display:flex; flex-direction:column; margin:0 0 var(--e5)}

.formule--principale{
  display:block; width:100%; text-align:left;
  background:var(--encre); color:var(--papier);
  border:0; border-radius:var(--r); padding:var(--e5) var(--e4);
  margin-bottom:var(--e5);
  transition:background .12s, transform .06s;
}
.formule--principale:active{transform:translateY(1px)}
.formule--principale b{
  display:block; font-size:var(--t-600); font-weight:600;
  letter-spacing:-.018em; margin-bottom:var(--e1);
}
.formule--principale .duree{display:block; font-size:var(--t-300); opacity:.72; margin-bottom:var(--e3)}
.formule--principale .det{display:block; font-size:var(--t-200); line-height:var(--i-lu); opacity:.62; max-width:42ch}

.formule{
  display:grid; grid-template-columns:1fr auto; gap:2px var(--e3);
  width:100%; text-align:left; background:none; border:0;
  border-top:var(--ligne); padding:var(--e4) 0; min-height:60px; align-items:center;
}
.formule:last-of-type{border-bottom:var(--ligne)}
.formule b{font-size:var(--t-400); font-weight:600; letter-spacing:-.012em}
.formule .duree{
  grid-row:1; grid-column:2; font-size:var(--t-200); color:var(--encre-45); white-space:nowrap;
}
.formule span.det{grid-column:1/-1; font-size:var(--t-200); color:var(--encre-70); line-height:var(--i-moyen)}

/* Chrono */
.chrono-barre{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding:var(--e3) 0 var(--e2);
}
.chrono{
  font-size:var(--t-600); font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* Le dernier quart d'heure se signale par la couleur, pas par un clignotement :
   on révise à côté, on n'a pas besoin d'être harcelé. */
.chrono.urgent{color:var(--rouge)}
/* Le compteur ouvre le plan : c'est une commande, il en a l'air. */
.compteur{
  display:inline-flex; align-items:center; gap:var(--e1);
  min-height:40px; padding:0 var(--e2) 0 var(--e3); border-radius:99px;
  border:var(--ligne); background:var(--surface);
  font-size:var(--t-200); color:var(--encre-70); font-weight:500; white-space:nowrap;
}
.compteur b{color:var(--encre); font-weight:600}
.compteur svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.compteur:hover{border-color:var(--trait-fort)}
.chrono-barre .chrono{flex:1}
.chrono-barre .chrono[hidden] + .compteur{margin-right:auto}
.lien-action{
  min-height:40px; padding:0 var(--e2);
  font-size:var(--t-300); font-weight:600; color:var(--bleu);
}
.lien-action:hover{text-decoration:underline;text-underline-offset:3px}

.jeton--marquer{min-height:32px; color:var(--encre-45); cursor:pointer}
.jeton--marquer::before{display:none}
.jeton--marquer svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jeton--marquer.actif{color:var(--ambre); font-weight:600}

/* Le plan vit en feuille sur téléphone ; la colonne n'apparaît qu'en large. */
.examen-plan{display:none}
.plan-legende{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e2);
  font-size:var(--t-100) !important; color:var(--encre-45) !important; margin:var(--e3) 0 0 !important;
}
.plan-legende span{width:10px;height:10px;border-radius:2px;border:var(--ligne);background:var(--surface);margin-left:var(--e2)}
.plan-legende span:first-child{margin-left:0}
.plan-legende .l-repondu{background:var(--encre);border-color:var(--encre)}
.plan-legende .l-marquee{background:var(--ambre-pale);border-color:var(--ambre)}
#dlgPlan .plan{margin:var(--e4) 0 var(--e2)}
#dlgPlan .decompte{margin:0 0 var(--e4)}

/* Grille de navigation entre questions d'examen */
.plan{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--e2)}
.plan button{
  min-height:40px; border-radius:var(--r-sm); border:var(--ligne);
  background:var(--surface); color:var(--encre-70);
  font-size:var(--t-200); font-weight:600; display:grid; place-items:center;
}
.plan button.repondu{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.plan button.courante{outline:2px solid var(--bleu);outline-offset:1px}
.plan button.marquee{border-color:var(--ambre);background:var(--ambre-pale);color:var(--ambre)}

/* Résultat */
.verdict{text-align:left;padding:var(--e2) 0 var(--e5)}
.verdict .score{
  font-family:var(--sans); font-size:var(--t-1000); font-weight:600;
  letter-spacing:-.04em; line-height:1; margin:0; font-variant-numeric:tabular-nums;
}
.verdict .score small{font-size:var(--t-700);color:var(--encre-45);font-weight:500}
.verdict .statut{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px; font-weight:600; font-size:var(--t-400);
}
.verdict.reussi .score{color:var(--vert)}
.verdict.reussi .statut{color:var(--vert)}
.verdict.echoue .score{color:var(--rouge)}
.verdict.echoue .statut{color:var(--rouge)}
.statut-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fiche--bonnes{margin-top:var(--e4)}
.verdict .detail{color:var(--encre-70);font-size:var(--t-200);margin:10px 0 0;max-width:52ch}

.revue-item{border-top:var(--ligne);padding:var(--e4) 0}
.revue-item:first-child{border-top:0}
.revue-item .q{font-size:var(--t-400);font-weight:600;line-height:var(--i-moyen);letter-spacing:-.011em;margin:0 0 var(--e2);text-wrap:pretty}
.revue-ligne{display:grid;grid-template-columns:auto 1fr;gap:var(--e2);font-size:var(--t-200);line-height:1.45;padding:3px 0}
.revue-ligne .et{font-weight:600;flex:none}
.revue-ligne.ko .et{color:var(--rouge)}
.revue-ligne.ok .et{color:var(--vert)}
.revue-item .rep{font-size:var(--t-200);color:var(--encre-70);margin:var(--e2) 0 0;line-height:1.5}

/* ===========================================================================
   Vue « Fiches »
   =========================================================================== */
/* Les fiches sont une liste de documents, pas huit objets distincts. Des
   filets et du blanc suffisent à les séparer ; huit encadrés identiques
   empilés ne diraient rien du contenu. */
.fiche{border-bottom:var(--ligne); margin:0; background:none}
.fiche:first-of-type{border-top:var(--ligne)}
.fiche > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; gap:var(--e3); align-items:center;
  padding:var(--e4) 0; min-height:60px;
}
.fiche > summary::-webkit-details-marker{display:none}
.fiche > summary h3{
  font-size:var(--t-400); font-weight:600; margin:0 0 3px; letter-spacing:-.012em;
}
.fiche > summary .compte{font-size:var(--t-200); color:var(--encre-45); line-height:var(--i-moyen)}
.fiche > summary .chev{
  width:18px;height:18px;stroke:var(--encre-45);fill:none;stroke-width:1.8;
  transition:transform .2s;stroke-linecap:round;stroke-linejoin:round;
}
.fiche[open] > summary .chev{transform:rotate(180deg)}
/* Une fiche ouverte fait plusieurs écrans. Son titre reste en haut pendant
   la lecture : on la referme d'un geste, sans remonter la chercher. */
.fiche[open] > summary{
  position:sticky; top:var(--haut-utile, 0px); z-index:5;
  background:var(--papier); border-bottom:var(--ligne);
}

/* Celle qu'il faut lire maintenant : un filet bleu dans la marge, pas un
   encadré complet — on la repère sans casser l'alignement de la liste. */
.fiche--conseillee > summary{
  box-shadow:inset 3px 0 0 var(--bleu);
  padding-left:var(--e3);
}

.fiche-corps{padding:0 0 var(--e5)}
.fiche-corps h4{
  font-size:var(--t-200); font-weight:600; color:var(--bleu);
  margin:var(--e4) 0 var(--e2); letter-spacing:-.004em;
}
.fiche-corps h4:first-child{margin-top:var(--e3)}
.fiche-corps p{font-family:var(--serif);font-size:var(--t-400);line-height:1.62;margin:0 0 var(--e2);max-width:64ch;text-wrap:pretty}
.fiche-corps ul{margin:0 0 var(--e3);padding:0;list-style:none}
.fiche-corps li{
  font-family:var(--serif); font-size:var(--t-400); line-height:1.55;
  padding:var(--e1) 0 var(--e1) var(--e4); position:relative; max-width:64ch;
}
.fiche-corps li::before{
  content:''; position:absolute; left:2px; top:14px;
  width:7px; height:1.5px; background:var(--trait-fort);
}
.fiche-corps b{font-weight:600}
.fiche-corps .chiffre{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums}

/* Table de faits — pour les couples à ne pas confondre */
.duo{width:100%;border-collapse:collapse;margin:0 0 var(--e3);font-size:var(--t-200)}
.duo th,.duo td{text-align:left;padding:var(--e2) var(--e2);border-bottom:var(--ligne);vertical-align:top;line-height:1.4}
.duo th{font-weight:600;color:var(--encre-45);font-size:var(--t-100);width:34%}
.duo tr:last-child th,.duo tr:last-child td{border-bottom:0}
.duo td b{font-weight:600}
.duo .th-note{font-weight:400}

/* L'avertissement de piège : le seul élément qui a le droit de crier */
.piege{
  border-left:var(--barre) solid var(--ambre); background:var(--ambre-pale);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--e3) var(--e3); margin:0 0 var(--e3);
}
.piege p{font-family:var(--sans);font-size:var(--t-200);line-height:1.5;margin:0;color:var(--encre)}
.piege p strong{color:var(--ambre);font-weight:600}

/* Seule porte vers les réglages sur téléphone : en haut de Progression,
   l'écran de ce qui te concerne — données, historique, remise à zéro —, à
   droite, là où l'en-tête les porte sur grand écran. En tête et non en pied :
   on ne cherche pas un réglage en faisant défiler jusqu'en bas. */
.lien-reglages{
  display:flex; align-items:center; gap:var(--e2);
  margin:0 0 var(--e3) auto; min-height:44px; padding:0 var(--e1);
  font-size:var(--t-300); font-weight:600; color:var(--bleu);
}
.lien-reglages svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.lien-reglages:hover{text-decoration:underline;text-underline-offset:3px}

/* ===========================================================================
   Vue « Progression »
   =========================================================================== */
.pret{
  border:var(--ligne); border-left:var(--barre) solid var(--encre);
  background:var(--surface); border-radius:var(--r-sm);
  padding:var(--e4); margin-bottom:var(--e4);
}
.pret.oui{border-left-color:var(--vert)}
.pret.presque,.pret.partiel{border-left-color:var(--ambre)}
.pret.non{border-left-color:var(--rouge)}
.pret .estim{font-size:var(--t-900);font-weight:600;letter-spacing:-.035em;line-height:1.05;margin:0}
.pret .estim small{font-size:var(--t-400);color:var(--encre-45);font-weight:500;letter-spacing:-.01em}
.verdict-txt--suite{margin-top:var(--e3) !important}
.reprise{margin:var(--e4) 0 var(--e5)}
.reprise-titre{margin:0; font-weight:600}
.reprise-txt{margin:var(--e1) 0 0 !important}
.reprise-actions{margin-top:var(--e3)}
.choix-pile{display:flex; flex-direction:column; gap:var(--e2); padding-bottom:var(--e1)}
.pret .verdict-txt{margin:8px 0 0;font-size:var(--t-200);color:var(--encre-70);line-height:1.5;max-width:54ch}

.bloc{margin-bottom:var(--e5)}
.bloc > h3{
  font-size:var(--t-200); font-weight:600; margin:0 0 var(--e2);
  color:var(--encre-70); letter-spacing:-.004em;
}

.theme-ligne{display:grid;grid-template-columns:1fr auto;gap:3px var(--e3);padding:var(--e3) 0;border-bottom:var(--ligne)}
.theme-ligne:last-child{border-bottom:0}
.theme-ligne .nom{font-size:var(--t-200);font-weight:500}
.theme-ligne .val{font-size:var(--t-200);font-weight:600;font-variant-numeric:tabular-nums}
.theme-ligne .val.bas{color:var(--rouge)}
.theme-ligne .val.moyen{color:var(--ambre)}
.theme-ligne .val.haut{color:var(--vert)}
.theme-ligne .piste{grid-column:1/-1;height:3px;background:var(--trait);border-radius:2px;overflow:hidden;margin-top:3px}
.theme-ligne .piste i{display:block;height:100%;background:var(--encre);border-radius:2px;transition:width .4s ease}
.theme-ligne .piste i.bas{background:var(--rouge)}
.theme-ligne .piste i.moyen{background:var(--ambre)}
.theme-ligne .piste i.haut{background:var(--vert)}
.theme-ligne .sous{grid-column:1/-1;font-size:var(--t-100);color:var(--encre-45)}

/* Les 259 questions ne sont pas six statistiques : c'est une seule population
   qui avance dans un sens — jamais vue, à revoir, puis 1, 3, 7 et 21 jours.
   On vient lire ici deux choses, l'ordre et la proportion. Une barre unique,
   découpée au prorata, les rend toutes les deux d'un coup d'œil : la part grise à gauche, c'est ce qui reste
   à découvrir ; la part verte à droite, ce qui est acquis. */
.flux{
  display:flex; gap:2px; height:14px; margin:0 0 var(--e2);
  border-radius:99px; overflow:hidden;
}
.flux i{display:block; min-width:3px; transition:flex-grow .4s ease}
.flux .f0{background:var(--trait-fort)}
.flux .f1{background:var(--rouge)}
.flux .f2{background:var(--ambre)}
.flux .f3{background:#8f90c8; background:color-mix(in srgb, var(--bleu) 45%, var(--surface))}
.flux .f4{background:#4041a7; background:color-mix(in srgb, var(--bleu) 75%, var(--surface))}
.flux .f5{background:var(--vert)}

/* On ne nomme que les deux extrémités : les étapes du milieu se déduisent du
   sens de lecture, et six légendes de cette taille ne se liraient pas. */
.flux-bornes{
  display:flex; justify-content:space-between;
  margin:0 0 var(--e3); font-size:var(--t-100); color:var(--encre-45);
}
.flux-legende{
  margin:0; font-size:var(--t-200); line-height:var(--i-lu);
  color:var(--encre-70); max-width:46ch;
}
.flux-legende b{color:var(--encre); font-weight:600}

.faible{display:grid;grid-template-columns:1fr auto;gap:var(--e2);align-items:center;padding:var(--e3) 0;border-bottom:var(--ligne)}
.faible:last-child{border-bottom:0}
.faible .txt{font-size:var(--t-200);line-height:1.4}
.faible .txt .ref{color:var(--encre-45);font-size:var(--t-100);display:block;margin-top:2px}

.vide--reviser{margin:var(--e5) 0 0; color:var(--encre-70); font-size:var(--t-300)}
.vide--reviser p{margin:0 0 var(--e4)}
.sans-question .pousse{display:none}

.vide{
  color:var(--encre-45); font-size:var(--t-200); line-height:1.55;
  padding:var(--e4); text-align:left; border:1px dashed var(--trait);
  border-radius:var(--r-sm); max-width:52ch;
}

/* ===========================================================================
   Vue « Toutes les questions » (recherche)
   =========================================================================== */
.champ--recherche{display:block; width:100%; margin:var(--e1) 0 var(--e4)}
.champ{
  flex:1 1 100%; min-width:0;
  border:var(--ligne); border-radius:var(--r-sm); background:var(--surface);
  padding:var(--e3) var(--e3); font-size:var(--t-400); min-height:48px;
}
.champ::placeholder{color:var(--encre-45)}
.selecteur{
  flex:1 1 calc(50% - 4px); min-width:0;
  border:var(--ligne); border-radius:var(--r-sm); background:var(--surface);
  /* 16 px au minimum : en dessous, Safari sur iPhone agrandit toute la page
     au moment où l'on touche le champ, et il faut ensuite dézoomer à la main. */
  padding:var(--e3) 34px var(--e3) var(--e3); font-size:var(--t-400); font-weight:500; min-height:48px;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23797e97' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.decompte{font-size:var(--t-100);color:var(--encre-45);margin:var(--e3) 0 var(--e1)}

.entree{border-bottom:var(--ligne);padding:0}
.entree > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:8px 1fr 18px; gap:var(--e3);
  padding:var(--e4) 0; align-items:start; min-height:52px;
}
.entree > summary::-webkit-details-marker{display:none}
.entree > summary .q{font-size:var(--t-300);font-weight:500;line-height:1.45;text-wrap:pretty}
.entree > summary .chev{
  width:18px;height:18px;stroke:var(--encre-45);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px;transition:transform .18s;
}
.entree[open] > summary .chev{transform:rotate(180deg)}
/* L'origine tient dans un point : officielle ou reconstituée. */
.pastille-src{width:8px;height:8px;border-radius:2px;margin-top:6px;background:var(--bleu)}
.pastille-src.sit{background:var(--ambre)}

.entree-corps{padding:0 0 var(--e4) var(--e4)}
.entree-corps .rep{
  margin:0 0 var(--e2); font-size:var(--t-400); font-weight:600; line-height:1.35;
  color:var(--vert); letter-spacing:-.01em; text-wrap:pretty;
}
.entree-corps .note{font-size:var(--t-200);color:var(--encre-70);line-height:1.5;margin:0 0 var(--e2);text-wrap:pretty}
.entree-corps .note--tip{color:var(--encre-70);border-top:1px solid var(--trait);padding-top:var(--e2)}
.note--src{font-size:var(--t-100);color:var(--encre-45);margin:0}

/* ===========================================================================
   Boîte de dialogue (réglages, confirmation)
   =========================================================================== */
dialog{
  border:0; padding:0; background:transparent; max-width:none; max-height:none;
  width:100%; height:100%; margin:0;
}
dialog::backdrop{background:rgba(10,12,30,.5);backdrop-filter:blur(2px)}
/* Feuille ancrée au bord bas de l'écran. Son contenu défile ; la barre de
   titre, elle, reste en place, et la sortie avec. */
.modale{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--surface); color:var(--encre);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:0 var(--e4) calc(var(--e5) + env(safe-area-inset-bottom));
  max-height:min(86svh, 86dvh); overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

/* L'animation est portée par une classe posée à l'ouverture, pas par la règle
   de base : une animation CSS ne se rejoue pas quand un élément déjà présent
   dans le document redevient visible. Posée à chaque ouverture, elle fait
   monter la feuille depuis le bas au lieu de la faire surgir d'un coup. */
.modale.entre{animation:monte .28s cubic-bezier(.32,.72,0,1)}
.modale.sort{animation:descend .2s cubic-bezier(.4,0,1,1) forwards}
@keyframes monte{from{transform:translateY(100%)}to{transform:none}}
@keyframes descend{from{transform:none}to{transform:translateY(100%)}}

/* Titre et sortie restent collés en haut pendant le défilement. */
.modale-barre{
  position:sticky; top:0; z-index:2;
  background:var(--surface);
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:var(--e2) 0 var(--e4);
  border-bottom:var(--ligne); margin-bottom:var(--e2);
}
.modale .poignee{
  grid-column:1/-1; justify-self:center;
  width:36px; height:4px; border-radius:99px; background:var(--trait-fort);
  margin:0 0 var(--e4);
}
.modale h2{
  font-family:var(--sans); font-size:var(--t-600); font-weight:600;
  margin:0; letter-spacing:-.018em;
}
/* Un mot, pas un pictogramme : la croix est l'icône des mauvaises réponses,
   elle ne peut pas aussi vouloir dire « referme ». Le reste de l'application agit par des
   libellés sobres — « Je ne sais pas », « Réglages » — celui-ci s'y range. */
.modale-fermer{
  justify-self:end; min-height:44px; padding:0 var(--e2);
  font-size:var(--t-300); font-weight:600; color:var(--bleu);
}
.modale-fermer:hover{text-decoration:underline;text-underline-offset:3px}
.modale > p{font-size:var(--t-200);color:var(--encre-70);margin:0 0 var(--e4);line-height:1.5}
.reglage{display:grid;grid-template-columns:1fr auto;gap:var(--e3);align-items:center;padding:var(--e3) 0;border-top:var(--ligne)}
.reglage .lib{font-size:var(--t-200);font-weight:500}
.reglage--plein{grid-template-columns:1fr}

/* Trois groupes, nommés par ce qu'ils changent. */
.modale .groupe{
  margin:var(--e5) 0 0; padding-bottom:var(--e1);
  font-size:var(--t-200); font-weight:600; color:var(--encre-45);
}
.modale .groupe:first-of-type{margin-top:var(--e2)}

.sauvegarde{border-top:var(--ligne)}
.sauvegarde > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; gap:var(--e3); align-items:center;
  padding:var(--e3) 0; min-height:56px;
}
.sauvegarde > summary::-webkit-details-marker{display:none}
.sauvegarde .chev{width:18px;height:18px;stroke:var(--encre-45);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.sauvegarde[open] .chev{transform:rotate(180deg)}
.sauvegarde .lib{font-size:var(--t-200);font-weight:500}
.sauvegarde .lib span{display:block;font-weight:400;color:var(--encre-45);font-size:var(--t-100);margin-top:2px;line-height:1.4}
.sauvegarde-corps{padding:0 0 var(--e4)}
.sauvegarde-corps > p{font-size:var(--t-200);color:var(--encre-70);margin:0 0 var(--e3);line-height:var(--i-lu)}
.sauvegarde-corps .sous-titre{margin-top:var(--e5)}
.selecteur--compact{flex:0 0 auto; min-width:150px}
.reglage .lib span{display:block;font-weight:400;color:var(--encre-45);font-size:var(--t-100);margin-top:2px;line-height:1.4}

/* Interrupteur */
.bascule{width:48px;height:28px;border-radius:99px;background:var(--trait);position:relative;flex:none;transition:background .16s}
.bascule::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;transition:transform .16s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bascule[aria-checked="true"]{background:var(--vert)}
.bascule[aria-checked="true"]::after{transform:translateX(20px)}


/* ---------- Sauvegarde ----------
   Le texte brut se lit mal en proportionnelle et se relit mieux en chasse
   fixe : on voit tout de suite qu'il s'agit de données et non d'une phrase.
   La taille reste à 16 px, en dessous Safari agrandit la page au moindre
   appui dans un champ. */
.zone-code{
  width:100%; height:160px; resize:vertical;
  padding:var(--e3); margin:0 0 var(--e3);
  border:var(--ligne); border-radius:var(--r);
  background:var(--surface-2); color:var(--encre-70);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-400); line-height:var(--i-moyen);
  -webkit-text-size-adjust:100%;
}
.zone-code:focus{outline:2px solid var(--bleu);outline-offset:1px}
.zone-code--courte{height:96px}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
.modale .mot{
  min-height:1.5em; margin:var(--e2) 0 0;
  font-size:var(--t-200); color:var(--vert);
}
.modale .mot--erreur{color:var(--rouge); font-weight:500}
.modale .mot:empty{min-height:0; margin:0}
.modale .sous-titre{
  font-family:var(--sans); font-size:var(--t-400); font-weight:600;
  margin:var(--e6) 0 var(--e2); padding-top:var(--e4); border-top:var(--ligne);
}

/* ---------- Notice de bas de page ---------- */
.pied{
  margin-top:var(--e5); padding-top:var(--e4); border-top:var(--ligne);
  font-size:var(--t-100); color:var(--encre-45); line-height:1.6;
}
.pied p{margin:0 0 var(--e2);max-width:60ch}
.pied a{color:var(--encre-70)}
.pied--nu{border-top:0}
.pied--serre{margin-top:var(--e1)}

/* ===========================================================================
   Écrans plus larges — la mise en page reste une colonne de lecture
   =========================================================================== */
@media (min-width:600px){
  .shell{padding-bottom:var(--e6)}
  .marque{flex:0 0 auto}
  /* Les onglets rejoignent la barre : une seule rangée de chrome, un seul
     filet. Les icônes disparaissent — le libellé suffit, et les deux
     ensemble se disputeraient une place déjà étroite. */
  .nav{
    position:static; display:flex; gap:2px; justify-content:flex-start;
    background:transparent; border-top:0; border-bottom:0;
    margin:0 0 0 var(--e4); padding:0; flex:0 0 auto;
  }
  .nav button{
    flex-direction:row; gap:0; height:34px; padding:0 var(--e3);
    font-size:var(--t-200); border-radius:99px; white-space:nowrap;
  }
  .nav button svg{display:none}
  .nav button:hover{color:var(--encre)}
  /* L'onglet courant est une pastille posée sur le papier : lisible d'un
     coup d'œil, sans filet à aligner sur quoi que ce soit. */
  .nav button[aria-current="page"]{
    color:var(--encre); font-weight:600;
    background:var(--surface); border:var(--ligne);
  }
  .nav button[aria-current="page"]::before{display:none}
  html{scroll-padding-bottom:20px}
  :root{--bas-utile:env(safe-area-inset-bottom); --haut-utile:62px}
  /* La barre d'en-tête porte déjà l'accès aux réglages. */
  .lien-reglages{display:none}
  .plan{grid-template-columns:repeat(10,1fr)}
  .modale{
    position:relative; margin:6vh auto; max-width:480px;
    border-radius:var(--r-lg); padding-bottom:var(--e4);
    animation:monte-centre .2s cubic-bezier(.32,.72,0,1);
  }
  @keyframes monte-centre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  dialog{display:grid}
  dialog:not([open]){display:none}
}

@media (min-width:900px){
  /* Une colonne de lecture, en-tête compris. L'examen en cours et la
     progression ont quelque chose à poser à côté — le plan, des blocs —
     et toute la coquille s'élargit alors avec eux : logo et contenu
     gardent le même bord. */
  .shell{max-width:760px}
  .shell:has(#vue-examen.en-cours.active),
  .shell:has(#vue-progression.active){max-width:1040px}

  .examen-grille{
    display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:var(--e7);
    align-items:start;
  }
  .examen-plan{
    display:block; position:sticky; top:80px;
    padding:var(--e4); margin-top:var(--e4);
    background:var(--surface); border:var(--ligne); border-radius:var(--r);
  }
  .examen-plan .plan{grid-template-columns:repeat(5,1fr)}
  .examen-plan .decompte{margin:var(--e3) 0}
  #btnPlan{pointer-events:none; border-color:transparent; background:none}
  #btnPlan svg{display:none}
  #examenEnCours .pied-action{max-width:calc(100% - 260px - var(--e7) + 2 * var(--gouttiere))}

  #progressionCorps{
    display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e6); align-items:start;
  }
  #progressionCorps > .pret{grid-column:1/-1; margin-bottom:var(--e6)}
}

/* Sur téléphone, aucun écran ne porte de bandeau. Le nom de l'application
   n'apprend rien à qui vient de l'ouvrir, et les onglets du bas disent déjà où
   l'on est. On réduit la barre à rien plutôt que de la masquer : les onglets
   sont un de ses descendants en position:fixed, et display:none sur un parent
   emporte aussi ses enfants fixés. */
@media (max-width:599px){
  .barre{padding:0; min-height:0}
  .barre::after{display:none}
  .marque, .entete-actions{display:none}
  /* Sans bandeau, c'est le contenu qui arrive au bord : il faut donc bien
     réserver l'encoche ici aussi. Une valeur fixe l'écraserait et la première
     ligne passerait sous la Dynamic Island une fois l'application installée. */
  .shell{padding-top:max(var(--e3), env(safe-area-inset-top))}
}

/* Écran court — petit téléphone, ou n'importe lequel en paysage. On resserre,
   et surtout on retire l'accessoire : le thème et le rang dans la session sont
   utiles, les quatre réponses sont indispensables. Plutôt que de réduire
   encore le corps du texte jusqu'à l'illisible, on rend la place occupée par
   ce qui peut disparaître. */
@media (max-height:640px) and (max-width:900px){
  /* En révision le thème est accessoire, sauf le filtre actif : il doit
     rester visible partout où il agit. En examen la ligne porte « Marquer »,
     une commande : elle reste. */
  #vue-reviser .q-entete > :not(.filtre-actif){display:none}
  #vue-reviser .q-entete:has(> .filtre-actif[hidden]){display:none}
  .examen-q .q-entete{padding-top:var(--e2)}
  .question{margin:var(--e1) 0 var(--e3)}
  .option .ligne{padding:var(--e3) var(--e3);min-height:44px}
  .options{gap:var(--e2);margin-bottom:var(--e3)}
  .btn-discret{min-height:38px}
  .pousse{display:none}
}

/* ---------- Téléphone couché ----------
   En paysage il reste environ 320 px de hauteur, mais 850 de largeur. Empiler
   énoncé puis réponses ne tient pas, et personne ne veut faire défiler un QCM.
   On se sert donc de la largeur : l'énoncé à gauche, les réponses à droite,
   chacun dans sa colonne. Même contenu, même hiérarchie, autre géométrie. */
@media (orientation:landscape) and (max-height:480px) and (min-width:600px){
  .shell{padding-bottom:max(var(--e4), env(safe-area-inset-bottom)); max-width:none}
  .nav{
    position:fixed; top:0; bottom:0; left:0; right:auto; width:84px;
    grid-template-columns:1fr; grid-auto-rows:1fr;
    border-top:0; border-right:var(--ligne);
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  /* Le rail hérite des règles « barre d'en-tête » du palier 600 px : on les
     défait toutes, sinon les onglets restent en pastilles alignées en ligne
     au milieu de l'écran. */
  .nav{display:grid; margin:0; background:var(--surface); gap:0}
  .nav button{
    flex-direction:column; gap:3px; height:auto; padding:0 2px;
    font-size:var(--t-050); border-radius:0; white-space:normal;
  }
  .nav button svg{display:block}
  .nav button[aria-current="page"]{background:none; border:0; color:var(--bleu); font-weight:500}
  .nav button[aria-current="page"]::before{display:block;top:20%;bottom:20%;left:0;width:2px;height:auto;transform:none}
  .shell{padding-left:calc(84px + var(--e5)); padding-top:max(var(--e2), env(safe-area-inset-top))}
  /* Sur 390 px de haut, l'en-tête coûte une question : il s'efface,
     les onglets sont dans le rail et les réglages dans Progression. */
  .barre{padding:0; min-height:0}
  .barre::after, .marque, .entete-actions{display:none}
  .lien-reglages{display:flex}
  :root{--bas-utile:env(safe-area-inset-bottom); --haut-utile:0px}

  /* L'examen prend la même géométrie que la révision : énoncé à gauche,
     réponses à droite. */
  .examen-grille{display:block}
  .examen-q{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e6); align-items:start}
  .examen-q .q-entete{grid-column:1}
  .examen-q{grid-template-rows:auto 1fr}
  .examen-q .question{grid-column:1; margin-bottom:0; align-self:start}
  .examen-q .options{grid-column:2; grid-row:1/span 2; margin:var(--e3) 0 0}
  .examen-q .options .ligne{padding:var(--e2) var(--e3); min-height:0}
  .examen-q .options{gap:var(--e2)}
  .examen-q .option .texte{font-size:var(--t-300)}
  .chrono-barre{padding:var(--e1) 0}

  #vue-reviser.active{
    display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e6);
    align-content:start; padding-top:var(--e3);
  }
  .pousse, .pousse--bas{display:none}
  #vue-reviser .jauge{grid-column:1/-1}
  #vue-reviser .q-entete{grid-column:1; margin-bottom:var(--e2)}
  #vue-reviser .question{grid-column:1; margin-bottom:0; align-self:start}
  #vue-reviser .options{grid-column:2; grid-row:2/span 3; margin:0; align-self:start}
  #vue-reviser .correction{grid-column:2; grid-row:2/span 3; margin:0}
  #vue-reviser .actions-q{grid-column:1; margin-top:var(--e5); align-self:end}
  .raccourcis{display:none}

  /* Dans cette géométrie l'énoncé dispose d'une colonne entière : il peut
     rester grand même quand il est long. */
  .question[data-long="tres"], .question[data-long="minuscule"]{font-size:var(--t-500)}

  /* La colonne des réponses est celle qui contraint la hauteur, et réduire
     l'énoncé n'y change rien. On y resserre donc directement, et on la laisse
     défiler pour elle-même : l'énoncé reste sous les yeux pendant qu'on
     parcourt les propositions. */
  #vue-reviser .options .ligne{padding:var(--e2) var(--e3); min-height:0}
  #vue-reviser .options{gap:var(--e2)}
  #vue-reviser .option .texte{font-size:var(--t-300); line-height:var(--i-moyen)}
  #vue-reviser .options,
  #vue-reviser .correction{
    max-height:calc(100svh - var(--e7)); overflow-y:auto; overscroll-behavior:contain;
  }
  #vue-reviser .cor-bloc{margin-bottom:var(--e4)}
}

/* ---------- Respect des préférences système ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  }

@media print{
  .nav,.entete-actions,.actions-q,.raccourcis,.jauge{display:none}
  body{background:#fff}
  .fiche{break-inside:avoid;border:1px solid #ccc}
  .fiche > summary .chev{display:none}
}