/* Droit — feuille de style, écrite à la main (aucun framework, aucune police externe, aucun style en ligne : la CSP les interdit).

   Principes
   - Mobile d'abord : une colonne, cibles tactiles >= 44 px, texte >= 16 px (en dessous, l'iPhone zoome sur les champs).
   - Clair et sombre automatiques (prefers-color-scheme). Les couleurs sont des variables : tests/test_interface.py vérifie leurs
     contrastes (>= 4,5:1) en lisant ce fichier, donc toute modification de palette doit rester lisible.
   - Un état n'est JAMAIS indiqué par la couleur seule : toujours un texte ou un symbole à côté.
*/

/* ---- Palette et mesures -------------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eceff5;
  --text: #121722;
  --muted: #485263;
  --border: #c9d1dd;
  --bordure-champ: #6b7686;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --on-accent: #ffffff;
  --accent-soft: #e6edff;
  --ok: #14532d;
  --ok-soft: #e4f5ea;
  --ok-border: #7cc197;
  --warn: #7c3a05;
  --warn-soft: #fff1da;
  --warn-border: #e0b062;
  --bad: #8f1d1d;
  --bad-soft: #fdeaea;
  --bad-border: #e09393;
  --rayon: 14px;
  --rayon-petit: 10px;
  --ombre: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --largeur: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1117;
    --surface: #171b23;
    --surface-2: #1f2430;
    --text: #e9edf3;
    --muted: #a6afbd;
    --border: #323a49;
    --bordure-champ: #8591a5;
    --accent: #8db4ff;
    --accent-hover: #b0cbff;
    --on-accent: #0a1226;
    --accent-soft: #1a2745;
    --ok: #8fe3ac;
    --ok-soft: #12301f;
    --ok-border: #2f6b47;
    --warn: #ffcf86;
    --warn-soft: #3a2a0d;
    --warn-border: #7a5a1f;
    --bad: #ffa8a8;
    --bad-soft: #3b1717;
    --bad-border: #7c3a3a;
    --ombre: none;
  }
}

/* ---- Base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0.25rem 0 1rem; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.5rem; }
p { margin: 0 0 0.9rem; }
ul, ol { margin: 0 0 0.9rem; padding-left: 1.25rem; }
li { margin-bottom: 0.3rem; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
code {
  font: 0.95em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
strong { font-weight: 650; }

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

.muted { color: var(--muted); }
.petit { font-size: 0.9rem; }
.espace-haut { margin-top: 1.25rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 20;
  background: var(--accent); color: var(--on-accent);
  padding: 0.6rem 1rem; border-radius: var(--rayon-petit);
}
.skip:focus { top: 0.5rem; }

/* ---- Mise en page -------------------------------------------------------------------------- */
.page {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom))
           max(1rem, env(safe-area-inset-left));
}
body.avec-nav .page { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

.barre-haut {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.barre-haut-contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  min-height: 56px;
  padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marque {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 750; font-size: 1.2rem; color: var(--text); text-decoration: none; letter-spacing: 0.01em;
}
/* Lien d'action isolé (hors d'une phrase) : zone tactile de 44 px */
.lien-action { display: inline-flex; align-items: center; min-height: 44px; }
.deconnexion { margin: 0; }

/* Navigation : barre d'onglets en bas du téléphone (accessible au pouce), sous l'en-tête sur grand écran. */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.onglets a {
  flex: 1; min-height: 56px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-weight: 600; text-decoration: none; font-size: 0.9rem;
  min-width: 0; padding: 0 0.15rem; text-align: center;
  border-top: 3px solid transparent;
}
@media (max-width: 22.5rem) { .onglets a { font-size: 0.8rem; } }   /* téléphones de 360 px et moins : « Progression » doit tenir */
.onglets a[aria-current="page"] { color: var(--accent); border-top-color: var(--accent); font-weight: 750; }

@media (min-width: 48rem) {
  /* Grand écran : en-tête, puis onglets, puis page (l'ordre du code place la navigation après la page : `order` la remonte). */
  body.avec-nav { display: flex; flex-direction: column; min-height: 100vh; }
  .barre-haut { order: 0; }
  .onglets { order: 1; position: static; padding: 0; }
  body.avec-nav .page { order: 2; width: 100%; flex: 1 0 auto; padding-bottom: 2rem; }
  .onglets-contenu { max-width: var(--largeur); margin: 0 auto; display: flex; }
  .onglets a { border-top: 0; border-bottom: 3px solid transparent; min-height: 48px; }
  .onglets a[aria-current="page"] { border-bottom-color: var(--accent); }
  .page { padding-top: 1.5rem; }
}
.onglets-contenu { display: flex; width: 100%; }

/* ---- Cartes -------------------------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--ombre);
}
.carte > :last-child { margin-bottom: 0; }
.carte-action { border-color: var(--accent); background: var(--accent-soft); }
.liste-cartes { list-style: none; padding: 0; margin: 0; }
.liste-cartes > li { margin: 0 0 1rem; padding: 1rem; }

/* ---- Boutons ------------------------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.25rem;
  font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--rayon-petit);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bouton-principal { background: var(--accent); color: var(--on-accent); }
.bouton-principal:hover { background: var(--accent-hover); color: var(--on-accent); }
.bouton-secondaire { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.bouton-secondaire:hover { background: var(--accent-soft); color: var(--accent-hover); }
.bouton-lien { background: transparent; color: var(--accent); min-height: 44px; padding: 0.5rem 0.75rem; font-weight: 600; }
.bouton-plein { display: flex; width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.actions > .bouton, .actions > form { flex: 1 1 12rem; margin: 0; }

/* ---- Formulaires --------------------------------------------------------------------------- */
.champ { display: block; margin-bottom: 1rem; }
.champ-libelle { display: block; font-weight: 650; margin-bottom: 0.35rem; }
.champ-aide { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
input, textarea {
  display: block; width: 100%;
  min-height: 48px; padding: 0.7rem 0.85rem;
  font: inherit; font-size: 1rem;                 /* 16 px minimum : sinon l'iPhone zoome sur le champ */
  color: var(--text); background: var(--surface);
  border: 2px solid var(--bordure-champ); border-radius: var(--rayon-petit);
}
textarea { min-height: 13rem; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); outline-offset: 0; }
input.code-saisie { font-size: 1.5rem; letter-spacing: 0.25em; text-align: center; }

/* ---- Messages ------------------------------------------------------------------------------ */
.alerte {
  border: 1px solid var(--border); border-left-width: 6px; border-radius: var(--rayon-petit);
  padding: 0.8rem 1rem; margin-bottom: 1rem; background: var(--surface);
}
.alerte-erreur { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.alerte-info { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.alerte-attention { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.alerte-ok { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.alerte strong:first-child { margin-right: 0.35rem; }

/* ---- Étiquettes d'état (toujours avec un texte et un symbole) ------------------------------ */
.pastille {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 650; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.pastille-acquis { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.pastille-en_cours { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.pastille-a_revoir { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.pastille-nouveau { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---- Barre de progression (élément natif <progress>, sans style en ligne) ------------------ */
progress {
  display: block; width: 100%; height: 0.7rem; margin: 0.5rem 0 0.75rem;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--surface-2);
}
progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--ok); border-radius: 999px; }

/* ---- Statistiques -------------------------------------------------------------------------- */
.stats { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.stats li {
  margin: 0; padding: 0.8rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--rayon-petit); text-align: center;
}
.stats strong { display: block; font-size: 1.7rem; line-height: 1.1; }
.stats span { color: var(--muted); font-size: 0.9rem; }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---- Chapitres et notions ------------------------------------------------------------------ */
.fil { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.35; margin-bottom: 0.15rem; }
.chapitre-titre { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.notions { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.notions li {
  margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.notions li:last-child { border-bottom: 0; }
.notions .nom { font-weight: 600; flex: 1 1 14rem; }

/* ---- Question et correction ---------------------------------------------------------------- */
.enonce { font-size: 1.15rem; line-height: 1.5; font-weight: 600; }
.repere { display: block; color: var(--muted); font-size: 0.9rem; font-weight: 400; margin-top: 0.4rem; }

.niveau {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  border: 2px solid var(--border); border-radius: var(--rayon); padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.niveau strong { font-size: 1.25rem; }
.niveau-acquis { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.niveau-fragile { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.niveau-non_acquis { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.bloc-ok { border-left: 6px solid var(--ok-border); }
.bloc-erreur { border-left: 6px solid var(--bad-border); }
.bloc-manque { border-left: 6px solid var(--warn-border); }
.bloc-piste { border-left: 6px solid var(--accent); }
.citations { list-style: none; padding: 0; margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--muted); }

details { margin-bottom: 1rem; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--accent); }
details[open] > summary { margin-bottom: 0.4rem; }
.reponse-eleve { white-space: pre-wrap; background: var(--surface-2); border-radius: var(--rayon-petit); padding: 0.8rem; }

/* ---- Double authentification et codes de secours ------------------------------------------- */
.etapes { list-style: none; counter-reset: etape; padding: 0; }
.etapes > li { counter-increment: etape; position: relative; padding-left: 2.6rem; margin-bottom: 1.1rem; }
.etapes > li::before {
  content: counter(etape); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.qr {
  display: block; width: min(16.5rem, 100%); height: auto; margin: 0.75rem auto;
  background: #ffffff; padding: 0.5rem; border-radius: var(--rayon-petit); border: 1px solid var(--border);
}
.codes-secours { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.codes-secours li { margin: 0; }
.codes-secours code { display: block; text-align: center; padding: 0.6rem; font-size: 1.05rem; }

/* ---- Connexion et pages centrées ----------------------------------------------------------- */
.page-etroite { max-width: 28rem; }
.marque-grande { display: block; text-align: center; font-size: 2rem; font-weight: 800; margin: 1.5rem 0 0.25rem; }
.sous-marque { text-align: center; color: var(--muted); margin-bottom: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .bouton { transition: background-color 0.15s ease, color 0.15s ease; }
}

/* ---- QCM ----------------------------------------------------------------------------------- */
.options-qcm { border: 0; padding: 0; margin: 0 0 1rem; }
.option-qcm {
  display: flex; align-items: center; gap: 0.75rem; min-height: 56px; margin-bottom: 0.6rem; padding: 0.75rem 1rem;
  background: var(--surface); border: 2px solid var(--bordure-champ); border-radius: var(--rayon-petit); cursor: pointer;
}
.option-qcm input { flex: none; width: 1.4rem; height: 1.4rem; min-height: 0; margin: 0; accent-color: var(--accent); }
.option-qcm:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.option-qcm:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.option-lettre {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--surface-2); color: var(--text);
}
.options-resultat { list-style: none; padding: 0; margin: 0 0 1rem; }
.option-resultat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; padding: 0.7rem 1rem;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--rayon-petit);
}
.option-resultat .etiquette { margin-left: auto; font-size: 0.9rem; }
.option-bonne { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.option-choisie-fausse { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.citation {
  margin: 0 0 0.5rem; padding: 0.6rem 1rem; font-style: italic; background: var(--surface-2);
  border-left: 4px solid var(--accent); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

/* ---- Lecture du cours ---------------------------------------------------------------------- */
.texte-cours {
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7;
  padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rayon);
}
.liste-liens { list-style: none; padding: 0; margin: 0 0 1rem; }
.liste-liens li { margin: 0; padding: 0.15rem 0; border-bottom: 1px solid var(--border); }
.liste-liens li:last-child { border-bottom: 0; }

/* ---- Entraînement au plan ----------------------------------------------------------------- */
[hidden] { display: none !important; }
.minuteur-boite { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.minuteur {
  font: 700 2.4rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.8rem; border-radius: var(--rayon-petit); background: var(--accent-soft); color: var(--accent);
}
.minuteur-urgent { background: var(--warn-soft); color: var(--warn); }
.minuteur-fini { background: var(--bad-soft); color: var(--bad); }
.grand-champ { min-height: 16rem; }
.critere-titre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; font-size: 1.05rem; margin: 0 0 0.4rem; }
.niveau-plan-a_reprendre { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.niveau-plan-correct { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.niveau-plan-solide { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.pastille-insuffisant, .pastille-plan-a_reprendre { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.pastille-fragile, .pastille-plan-attente { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.pastille-correct, .pastille-plan-correct { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pastille-solide, .pastille-plan-solide { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }