@font-face{font-family:"Lexend";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lexend-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Lexend";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/lexend-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"Lexend";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/lexend-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Lexend";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lexend-latin-700-normal.woff2) format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/newsreader-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/newsreader-latin-600-normal.woff2) format("woff2");}
/* Ambiance : sereine et sérieuse. Fond brume froid, encre ardoise, un bleu profond pour agir,
   des états adoucis (sauge, ocre, brique douce). Une seule carte en relief par écran ;
   signature : la carte des notions (un point par notion). */
:root {
  --bg: #f2f4f3;
  --surface: #ffffff;
  --ink: #1c2730;
  --muted: #5e6b73;
  --line: #dde3e3;
  --accent: #33508a;
  --accent-soft: #e8edf6;
  --good: #3d7a62;
  --good-soft: #e4f0ea;
  --mid: #a87a2c;
  --mid-soft: #f6eedd;
  --bad: #a5584a;
  --bad-soft: #f5e6e2;
  --ombre: 0 1px 2px rgba(28, 39, 48, 0.05), 0 10px 28px -12px rgba(28, 39, 48, 0.18);
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Newsreader", Georgia, "Times New Roman", serif;
  --font-data: "Public Sans", system-ui, sans-serif;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10161c; --surface: #18212a; --ink: #e5eaed; --muted: #95a2aa; --line: #27323c;
    --accent: #93abe3; --accent-soft: #1e2a42; --good: #7dc3a5; --good-soft: #17302a;
    --mid: #dbb065; --mid-soft: #33291a; --bad: #e39d8f; --bad-soft: #3a2420;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10161c; --surface: #18212a; --ink: #e5eaed; --muted: #95a2aa; --line: #27323c;
  --accent: #93abe3; --accent-soft: #1e2a42; --good: #7dc3a5; --good-soft: #17302a;
  --mid: #dbb065; --mid-soft: #33291a; --bad: #e39d8f; --bad-soft: #3a2420;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.6); color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.wrap { max-width: 680px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; flex-direction: column; gap: 0; padding-block: 12px 10px; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand h1 { margin: 0; font-family: var(--font-read); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.brand .tag { font-family: var(--font-data); font-size: 11.5px; color: var(--muted); }
nav.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav.tabs button { flex: 0 0 auto; border: 0; background: none; font: inherit; font-weight: 500; color: var(--muted); padding: 8px 12px 10px; border-bottom: 2px solid transparent; cursor: pointer; }
nav.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
main { padding-block: 22px 64px; display: flex; flex-direction: column; gap: 18px; }
h2 { font-family: var(--font-read); font-weight: 600; font-size: 22px; margin: 0; text-wrap: balance; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn { font: inherit; font-weight: 500; border-radius: 8px; padding: 10px 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled, .btn[aria-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn.ghost { border-color: transparent; background: none; color: var(--accent); padding-inline: 6px; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.chip.neutral { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.mid { background: var(--mid-soft); color: var(--mid); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.question-text { font-family: var(--font-read); font-size: 21px; line-height: 1.4; text-wrap: pretty; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { text-align: left; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.choice .key { font-family: var(--font-data); font-size: 12px; color: var(--muted); padding-top: 2px; }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.choice.is-correct { border-color: var(--good); background: var(--good-soft); }
.choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.confidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.confidence button { font: inherit; padding: 10px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.confidence button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
textarea, input[type="text"], input[type="date"], input[type="time"], select { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.verdict { border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.verdict.good { background: var(--good-soft); }
.verdict.mid { background: var(--mid-soft); }
.verdict.bad { background: var(--bad-soft); }
.verdict strong { font-size: 15px; }
.verdict.good strong { color: var(--good); }
.verdict.mid strong { color: var(--mid); }
.verdict.bad strong { color: var(--bad); }
.model-answer { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; display: flex; flex-direction: column; gap: 6px; }
.source { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: var(--font-read); font-size: 15px; line-height: 1.55; display: flex; flex-direction: column; gap: 8px; }
.source .ref { font-family: var(--font-data); font-size: 11.5px; color: var(--muted); }
ul.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
details > summary { cursor: pointer; color: var(--accent); font-weight: 500; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
.trace { width: 100%; height: 34px; display: block; }
.trace .done { stroke: var(--accent); }
.trace .todo { stroke: var(--line); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.stat .num { font-family: var(--font-data); font-size: 24px; font-variant-numeric: tabular-nums; }
.prep { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; }
.prep-score { display: flex; align-items: baseline; gap: 2px; color: var(--accent); }
.prep-score .num { font-family: var(--font-data); font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.prep-score .unit { font-family: var(--font-data); font-size: 18px; }
.prep-txt { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.prep-txt p { margin: 0; }
.bar.big { height: 14px; }
.aide { margin-top: 6px; align-items: center; }
ol.plan-jours { list-style: none; padding: 0; margin: 12px 0 6px; display: flex; flex-direction: column; gap: 6px; }
ol.plan-jours li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; align-items: baseline; }
ol.plan-jours li.auj { border-color: var(--accent); background: var(--accent-soft); }
ol.plan-jours li.examen, ol.plan-jours li.veille { border-style: dashed; }
ol.plan-jours li.jour_j { border-color: var(--mid); background: var(--mid-soft); }
.pj-date { font-family: var(--font-data); font-size: 12.5px; color: var(--muted); }
.btn.large { width: 100%; padding: 13px 16px; font-size: 16px; }
.lien { font: inherit; font-size: 14px; background: none; border: 0; padding: 4px 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lien:disabled { opacity: .5; cursor: default; }
.actions-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.raccourcis { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; }
.raccourcis .btn.ghost { padding: 8px 10px; }
.barre-action { position: sticky; bottom: 0; z-index: 5; margin: -6px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) -64px; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.barre-label { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.barre-conf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.barre-conf .btn { padding: 12px 6px; font-weight: 600; border-color: var(--accent); color: var(--accent); background: var(--surface); }
.barre-conf .btn:disabled { border-color: var(--line); color: var(--muted); opacity: 1; }
.barre-conf .btn:not(:disabled):hover { background: var(--accent-soft); }
.q-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.q-meta .compteur { margin-left: auto; font-family: var(--font-data); }
details.plus > summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 4px 0; }
details.plus[open] > summary { margin-bottom: 8px; }
.panel.compact { gap: 8px; padding: 14px 18px; }
.panel.compact p { margin: 0; }
.cours-nom { margin: -6px 0 0; }
.activite { text-align: center; margin: 0; }
details.prototype summary { cursor: pointer; }
details.prototype p { margin: 8px 0 0; }
.chapitres { display: flex; flex-direction: column; gap: 6px; }
.chapitres > p { margin: 0; }
ul.liste-chap { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
ul.liste-chap label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; background: var(--surface); }
ul.liste-chap label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
ul.liste-chap input { margin-top: 4px; accent-color: var(--accent); }
ul.liste-chap label > span { display: flex; flex-direction: column; }
.lien.petit { font-size: 12.5px; padding: 0; }
.q-meta #btn-arreter { margin-left: 4px; color: var(--muted); }
.carte-cours { gap: 8px; }
.carte-cours.actif { border-color: var(--accent); }
.cc-tete { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.cc-tete b { font-size: 16px; flex: 1 1 100%; }
.carte-cours p { margin: 0; }
.cc-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bienvenue h2 { font-size: 24px; }
ol.etapes-bienvenue { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
ol.etapes-bienvenue li::marker { color: var(--accent); font-weight: 600; }
.serie { color: var(--mid); font-weight: 600; }
.lien-suppr { color: var(--muted); }
.confirm-suppr { border: 1px solid var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.confirm-suppr p { margin: 0; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.regul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.regul > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.regul .num { font-family: var(--font-data); font-size: 24px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 230px; margin: 4px auto 0; width: 100%; }
.cal-tete { font-size: 11px; color: var(--muted); text-align: center; }
.jour-cal { aspect-ratio: 1; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); }
.jour-cal.n1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); border-color: transparent; }
.jour-cal.n2 { background: color-mix(in srgb, var(--accent) 60%, var(--surface)); border-color: transparent; }
.jour-cal.n3 { background: var(--accent); border-color: transparent; }
.jour-cal.futur { background: none; border-style: dashed; opacity: .5; }
.jour-cal.auj { outline: 2px solid var(--ink); outline-offset: 1px; }
ul.liste-progres { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ligne-cours { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.ligne-cours:hover { border-color: var(--accent); }
.lc-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.lc-score { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.priorite.fait { border-color: var(--good); }
.lc-pied { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ligne-cours .bar { position: relative; overflow: visible; }
.ligne-cours .bar > span { border-radius: 999px; }
.repere { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; transform: translateX(-1px); }
.priorite { border-color: var(--accent); }
.courbe-prep { width: 100%; height: auto; display: block; }
.courbe-prep .c-grille { stroke: var(--line); stroke-width: 1; }
.courbe-prep .c-seuil { stroke: var(--good); stroke-width: 1; stroke-dasharray: 2 3; }
.courbe-prep .c-ech { stroke: var(--mid); stroke-width: 1.2; }
.courbe-prep .c-traj { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.courbe-prep .c-cible { fill: var(--surface); stroke: var(--good); stroke-width: 1.5; }
.courbe-prep .c-ligne { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.courbe-prep .c-point { fill: var(--accent); }
.courbe-prep .c-der { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.courbe-prep .c-axe { font-family: var(--font-data); font-size: 11.5px; fill: var(--muted); }
.courbe-prep .c-lab { font-size: 12px; fill: var(--muted); }
.courbe-prep .c-val { font-family: var(--font-data); font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.marque { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; }
.hdr-plus { padding: 6px 4px; font-size: 14px; }
.top-inner .tag { display: block; margin-top: -2px; font-family: var(--font-data); font-size: 11.5px; color: var(--muted); }
.ajout .drop .lien { white-space: nowrap; }
.ajout .drop { cursor: pointer; text-align: center; align-items: center; }
.ajout .drop p { margin: 0; }
.ajout.en-avant { border-color: var(--accent); }
.ajout.en-avant .drop { padding: 26px 16px; }
.regul-ligne summary { cursor: pointer; display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.regul-ligne summary b { color: var(--ink); font-family: var(--font-data); }
.regul-ligne details[open] summary { margin-bottom: 12px; }
.regul-ligne .regul { margin-bottom: 4px; }
.fiche-tete h2 { font-size: 21px; }
.gerer { padding-block: 10px; }
.accueil.fait { border-color: var(--good); }
.chrono { font-family: var(--font-data); font-size: 15px; font-variant-numeric: tabular-nums; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.chrono.urgent { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.plan-copie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.plan-copie button { font: inherit; font-size: 12px; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.plan-copie button.ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.plan-copie button[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
fieldset.formules legend { padding: 0; margin-bottom: 6px; }
fieldset.formules { border: 0; padding: 0; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.formule { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.formule:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
details.copie { border-top: 1px solid var(--line); padding: 10px 0; }
details.copie summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.copie-enonce { flex-basis: 100%; font-size: 14px; }
.copie-detail { padding: 8px 0 0; }
.ref-texte { margin: 4px 0 12px; max-height: 320px; overflow: auto; }
ul.prio { list-style: none; padding: 0; margin: 6px 0 12px; display: flex; flex-direction: column; gap: 8px; }
ul.prio li { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); }
.btn.small { padding: 2px 6px; font-size: 13px; }
.calib { display: flex; flex-direction: column; gap: 10px; }
.calib-row { display: grid; grid-template-columns: 110px 1fr 64px; gap: 10px; align-items: center; }
.bar { height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }
.calib-row.stack { grid-template-columns: 1fr 56px; row-gap: 4px; }
.calib-row.stack .lab { grid-column: 1 / -1; font-size: 13px; }
.calib-row .val { font-family: var(--font-data); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.qcard { display: flex; flex-direction: column; gap: 10px; }
.qcard .rate { display: flex; gap: 6px; flex-wrap: wrap; }
.qcard .rate button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.qcard .rate button[data-v="juste"][aria-pressed="true"] { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.qcard .rate button[data-v="ambigue"][aria-pressed="true"] { background: var(--mid-soft); border-color: var(--mid); color: var(--mid); }
.qcard .rate button[data-v="fausse"][aria-pressed="true"] { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.qtext { font-family: var(--font-read); font-size: 17px; line-height: 1.45; }
.notion-head { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.notion-head .id { font-family: var(--font-data); font-size: 11.5px; color: var(--muted); }
.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble { padding: 10px 12px; border-radius: 10px; max-width: 92%; white-space: pre-wrap; line-height: 1.5; }
.bubble.me { align-self: flex-end; background: var(--accent-soft); }
.bubble.tutor { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); font-family: var(--font-read); font-size: 15.5px; }
.note { font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; }
.mastery { display: flex; flex-wrap: wrap; gap: 6px; }
.fig { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fig figcaption { font-weight: 600; font-size: 14px; }
.fig-note { font-size: 12.5px; color: var(--muted); }
.fig-src { font-family: var(--font-data); font-size: 11px; color: var(--muted); }
.fig svg { width: 100%; height: auto; display: block; }
.fig-trace { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.fig-paper { stroke: var(--line); stroke-width: 1; }
.fig-axis { stroke: var(--muted); stroke-width: 1.2; fill: none; }
.fig-label { fill: var(--ink); font-family: var(--font-data); font-size: 14px; }
.fig-label-sm { fill: var(--muted); font-family: var(--font-ui); font-size: 12px; }
.fig-arrow { stroke: var(--bad); stroke-width: 2.2; fill: none; }
.fig-arrow-head { fill: var(--bad); }
.fig-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.fig-steps li { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.fig-steps li + li { margin-top: 22px; position: relative; }
.fig-steps li + li::before { content: "↓"; position: absolute; top: -21px; left: 18px; color: var(--accent); font-size: 15px; line-height: 20px; }
.fig-steps b { font-size: 14px; }
.fig-steps span { font-size: 13px; color: var(--muted); }
.fig-timeline { display: flex; flex-direction: column; gap: 10px; }
.fig-group { border-left: 3px solid var(--accent); padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
.fig-group > b { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.fig-seg { padding: 7px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.fig-marker { font-size: 12.5px; color: var(--bad); font-weight: 500; display: flex; gap: 6px; align-items: baseline; }
.fig-table-wrap { overflow-x: auto; }
.fig table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.fig th, .fig td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.fig th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.fig td:first-child { color: var(--muted); }
.fig-bars { display: flex; flex-direction: column; gap: 10px; }
.fig-bar-row { display: flex; flex-direction: column; gap: 4px; }
.fig-bar-row .lab { font-size: 13px; }
.fig-bar-track { position: relative; height: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.fig-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px 0 0 3px; }
.fig-bar-range { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: 0.45; }
.fig-bar-val { font-family: var(--font-data); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fig-scale { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 11px; color: var(--muted); }
.drop { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
#plage { align-items: center; gap: 10px; }
input.num { width: 72px; }
input[type="number"] { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); bottom: calc(118px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--surface); padding: 9px 14px; border-radius: 8px; font-size: 13px; z-index: 20; }
@media (max-width: 460px) {
  .question-text { font-size: 19px; }
  .calib-row { grid-template-columns: 92px 1fr 56px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fade { animation: fade 0.25s ease-out; }
  @keyframes fade { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
/* ===== Direction « sereine et sérieuse » ===== */
body { font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
header.top { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: transparent; }
body::before { background: var(--bg); }
.brand h1 { font-family: var(--font-read); font-weight: 600; font-size: 21px; letter-spacing: -0.005em; color: var(--ink); }
.top-inner .tag { font-family: var(--font-ui); font-size: 12px; }
main { gap: 22px; padding-top: 18px; }
h2 { font-family: var(--font-read); font-weight: 500; font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.small { font-size: 13.5px; }
/* surfaces : à plat par défaut, une seule carte en relief */
.panel { border: 0; border-radius: var(--radius); padding: 20px; gap: 14px; }
.accueil, .panel.question, .fiche-tete, .bienvenue, #app > .panel.fade:first-of-type:not(.ajout) { box-shadow: var(--ombre); border-radius: 18px; }
.accueil h2, .fiche-tete h2, .bienvenue h2 { font-size: 27px; }
.accueil h3, .fiche-tete h3, .bienvenue h3 { font-weight: 400; color: var(--muted); font-size: 14px; }
.panel.compact { padding: 14px 20px; }
.note { border: 0; background: none; padding: 4px 2px; }
details.prototype summary { color: var(--muted); }
/* boutons */
.btn { border-radius: 12px; font-weight: 600; padding: 11px 18px; border-color: var(--line); }
.btn.large { border-radius: 14px; padding: 14px 18px; font-size: 16.5px; }
.btn.primary { box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { filter: none; background: color-mix(in srgb, var(--accent) 88%, black); }
:root:not([data-theme="light"]) .btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, white); }
.btn.ghost, .lien { font-weight: 600; }
.lien { text-decoration-thickness: 1px; }
.chip { font-weight: 700; font-size: 12px; padding: 3px 10px; }
.chip.neutral { border: 0; background: var(--bg); }
/* question et réponses */
.question-text { font-family: var(--font-read); font-size: 23px; line-height: 1.4; font-weight: 400; }
.choice { border-radius: 12px; padding: 13px 15px; border-color: var(--line); }
.choice .key { font-family: var(--font-ui); font-weight: 700; color: var(--muted); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
textarea, input[type="text"], input[type="date"], input[type="time"], select, input[type="number"] { border-radius: 12px !important; }
.q-meta { font-size: 13px; }
.q-meta .compteur { font-family: var(--font-ui); }
.verdict { border-radius: 12px; }
.model-answer { border-left-width: 2px; }
.barre-conf .btn { border-radius: 12px; background: var(--surface); }
.barre-action { border-top-color: transparent; }
/* progression d'une séance : un point par question */
.progression { display: flex; gap: 6px; justify-content: center; padding: 2px 0 0; }
.progression span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
.progression span.juste { background: var(--good); }
.progression span.partiel { background: var(--mid); }
.progression span.faux { background: var(--bad); }
.progression span.encours { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); transform: scale(1.15); }
/* carte des notions : la signature */
.carte-notions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.cn-chap { display: inline-flex; gap: 4px; padding-right: 14px; border-right: 1px solid var(--line); }
.cn-chap:last-child { border-right: 0; padding-right: 0; }
.cn { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.cn.maitrisee { background: var(--good); }
.cn.fragile { background: var(--mid); }
.cn.a_travailler { box-shadow: 0 0 0 2px var(--bad) inset; }
.cn.nouvelle { box-shadow: 0 0 0 1.5px var(--line) inset; background: var(--bg); }
.accueil-notions { display: flex; flex-direction: column; gap: 8px; }
.cn-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.cn-legende span { display: inline-flex; align-items: center; gap: 6px; }
.prep-score { color: var(--ink); }
.prep-score .num { font-family: var(--font-read); font-weight: 500; font-size: 52px; letter-spacing: -0.02em; }
.prep-score .unit { font-family: var(--font-read); font-size: 22px; color: var(--muted); }
.bar { border: 0; background: color-mix(in srgb, var(--line) 70%, var(--bg)); height: 8px; }
.bar.big { height: 10px; }
.bar > span { background: var(--accent); border-radius: 999px; }
/* listes à plat */
ul.prio li { border: 0; background: var(--bg); border-radius: 12px; }
ul.liste-progres { gap: 0; }
.ligne-cours { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 14px 2px; background: none; }
ul.liste-progres li:last-child .ligne-cours { border-bottom: 0; }
.ligne-cours:hover { border-color: var(--line); }
.ligne-cours:hover b { color: var(--accent); }
.lc-tete b { font-size: 16px; font-weight: 700; }
.lc-score { font-family: var(--font-read); font-size: 18px; }
ol.plan-jours li { border: 0; background: var(--bg); border-radius: 10px; }
ol.plan-jours li.auj { background: var(--accent-soft); }
ol.plan-jours li.jour_j { background: var(--mid-soft); }
.pj-date { font-family: var(--font-ui); }
.regul .num, .stat .num { font-family: var(--font-read); font-weight: 500; }
.calib-row .val { font-family: var(--font-ui); }
.drop { border-radius: 14px; border-width: 1.5px; background: var(--bg); }
.ajout.en-avant { box-shadow: none; border: 1.5px solid var(--accent-soft); }
.ajout.en-avant .drop { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.jour-cal { border-radius: 3px; border: 0; background: color-mix(in srgb, var(--line) 60%, var(--bg)); }
.jour-cal.n1 { background: color-mix(in srgb, var(--good) 35%, var(--surface)); }
.jour-cal.n2 { background: color-mix(in srgb, var(--good) 65%, var(--surface)); }
.jour-cal.n3 { background: var(--good); }
.jour-cal.auj { outline: 2px solid var(--accent); }
.courbe-prep .c-axe { font-family: var(--font-ui); }
.courbe-prep .c-val { font-family: var(--font-read); font-size: 15px; }
.courbe-prep .c-ech { stroke: var(--muted); }
.serie { color: var(--good); }
.toast { border-radius: 12px; background: var(--ink); width: max-content; }
@media (prefers-reduced-motion: no-preference) { .fade { animation: fade .3s ease-out; } }

/* ===== Version React : finitions et mouvements ===== */
#root { min-height: 100vh; }
.fig-hote { display: contents; }
.marque h1 { display: inline-flex; align-items: center; gap: 10px; }
.marque-points { display: inline-flex; gap: 3px; }
.marque-points i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.marque-points i:nth-child(1) { background: var(--good); }
.marque-points i:nth-child(2) { background: var(--mid); }
.marque-points i:nth-child(3) { box-shadow: 0 0 0 1.5px var(--accent) inset; }
.choice { transition: border-color .15s, background-color .15s, transform .1s; }
.choice:active { transform: scale(0.992); }
.btn { transition: background-color .15s, border-color .15s, transform .1s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.cn { transition: background-color .35s, box-shadow .35s; }
/* fin de séance : la carte des notions rejoue la séance */
.fin-carte { background: var(--bg); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fin-carte .carte-notions { gap: 12px 16px; }
.fin-carte .cn { width: 13px; height: 13px; }
.fin-prep { font-size: 15px; }
.fin-apres { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .cn.bascule { animation: bascule .6s cubic-bezier(.2,.9,.3,1.3); }
  @keyframes bascule { 0% { transform: scale(.6); } 55% { transform: scale(1.45); } 100% { transform: scale(1); } }
  .cn.bascule.maitrisee { animation-name: bascule, halo; animation-duration: .6s, 1s; }
  @keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
  .progression span.juste, .progression span.partiel, .progression span.faux { animation: pose .45s cubic-bezier(.2,.9,.3,1.4); }
  @keyframes pose { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
  .verdict { animation: fade .3s ease-out; }
  .toast { animation: toast .25s ease-out; }
  @keyframes toast { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ===== Direction « page blanche, couleurs vives » =====
   La page est blanche ; la couleur vient du savoir lui-même : vert (maîtrisé), soleil (fragile),
   violet (à travailler — jamais de rouge correcteur), bleu électrique pour agir.
   Signature : la mosaïque des notions, et un relief graphique (contour encre + ombre décalée) réservé à la carte principale de chaque écran. */
:root {
  --page: #ffffff; --surface: #ffffff; --bg: #f3f4f8; --ink: #16171d; --muted: #5d606e; --line: #e4e6ee;
  --accent: #2e5bff; --accent-soft: #e8edff; --accent-ink: #1f45d6;
  --good: #00a87e; --good-soft: #dcf6ec; --good-ink: #007559;
  --mid: #ffb81c; --mid-soft: #fff1cf; --mid-ink: #8a5a00;
  --bad: #7c4dff; --bad-soft: #eee7ff; --bad-ink: #5a2fd6;
  --font-titre: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --relief: 5px 5px 0 var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0e0f14; --surface: #16181f; --bg: #1f212b; --ink: #f2f3f7; --muted: #a0a3b1; --line: #2b2e3a;
    --accent: #6f8bff; --accent-soft: #1d2650; --accent-ink: #a9b9ff;
    --good: #2fd3a0; --good-soft: #10342a; --good-ink: #6fe6bf;
    --mid: #ffc53d; --mid-soft: #3a2e10; --mid-ink: #ffd677;
    --bad: #a585ff; --bad-soft: #2a2050; --bad-ink: #c6b2ff;
  }
}
:root[data-theme="dark"] {
  --page: #0e0f14; --surface: #16181f; --bg: #1f212b; --ink: #f2f3f7; --muted: #a0a3b1; --line: #2b2e3a;
  --accent: #6f8bff; --accent-soft: #1d2650; --accent-ink: #a9b9ff;
  --good: #2fd3a0; --good-soft: #10342a; --good-ink: #6fe6bf;
  --mid: #ffc53d; --mid-soft: #3a2e10; --mid-ink: #ffd677;
  --bad: #a585ff; --bad-soft: #2a2050; --bad-ink: #c6b2ff;
}
body, body::before { background: var(--page); }
header.top { background: color-mix(in srgb, var(--page) 90%, transparent); border-bottom: 1px solid var(--line); }
.brand h1, h2 { font-family: var(--font-titre); font-weight: 700; letter-spacing: -0.025em; }
.brand h1 { font-size: 20px; }
h2 { font-size: 26px; line-height: 1.15; }
.accueil h2, .fiche-tete h2, .bienvenue h2 { font-size: 30px; }
.bienvenue h2 { font-size: 34px; }
h3 { font-size: 14.5px; }
.question-text { font-family: var(--font-titre); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; }
.qtext { font-family: var(--font-titre); font-weight: 600; }
/* logo : trois tuiles de la mosaïque */
.marque-points { gap: 3px; }
.marque-points i { width: 9px; height: 9px; border-radius: 2.5px; box-shadow: none !important; }
.marque-points i:nth-child(1) { background: var(--good); }
.marque-points i:nth-child(2) { background: var(--mid); }
.marque-points i:nth-child(3) { background: var(--bad); }
/* surfaces : blanches et à plat, un seul relief par écran */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.accueil, .panel.question, .fiche-tete, .bienvenue, .fin-seance, .cours-pret, #app > .panel.fade:first-of-type:not(.ajout) {
  border: 1.5px solid var(--ink); box-shadow: var(--relief); border-radius: 22px;
}
.accueil.fait { box-shadow: 5px 5px 0 var(--good); }
main { gap: 20px; }
.note { background: none; }
/* boutons */
.btn { border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.btn.primary:hover { background: var(--accent-ink); }
:root:not([data-theme="light"]) .btn.primary:hover { background: var(--accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #0e0f14; } }
:root[data-theme="dark"] .btn.primary { color: #0e0f14; }
.btn.primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.large { border-radius: 16px; padding: 15px 18px; font-size: 17px; }
.btn.ghost { border-color: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); border-color: transparent; }
.btn.danger { background: var(--bad); border-color: var(--ink); color: #fff; }
.lien { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chip { border-radius: 999px; }
.chip.good { color: var(--good-ink); }
.chip.mid { color: var(--mid-ink); }
.chip.bad { color: var(--bad-ink); }
/* question et réponses */
.choice { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--surface); }
.choice:hover { border-color: var(--ink); }
.choice .key { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 7px; background: var(--bg); color: var(--ink); padding: 0; font-size: 12.5px; margin-top: -1px; }
.choice[aria-pressed="true"] { border-color: var(--ink); background: var(--accent-soft); box-shadow: 3px 3px 0 var(--accent); }
.choice[aria-pressed="true"] .key { background: var(--accent); color: #fff; }
.choice.is-correct { border-color: var(--good); background: var(--good-soft); box-shadow: 3px 3px 0 var(--good); }
.choice.is-correct .key { background: var(--good); color: #fff; }
.choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.is-wrong .key { background: var(--bad); color: #fff; }
textarea, input[type="text"], input[type="date"], input[type="time"], select, input[type="number"] { border: 1.5px solid var(--line); border-radius: 14px !important; background: var(--surface); }
textarea:focus, input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.barre-action { background: color-mix(in srgb, var(--page) 90%, transparent); border-top: 1px solid var(--line); }
.barre-conf .btn { border: 1.5px solid var(--ink); color: var(--ink); border-radius: 14px; }
.barre-conf .btn[data-valider="sur"] { background: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barre-conf .btn[data-valider="sur"] { color: #0e0f14; } }
.barre-conf .btn:not(:disabled):hover { background: var(--accent-soft); }
.barre-conf .btn[data-valider="sur"]:not(:disabled):hover { background: var(--accent-ink); }
.barre-conf .btn:disabled { border-color: var(--line); color: var(--muted); background: var(--surface); box-shadow: none; }
.verdict { border-radius: 16px; padding: 14px 16px; }
.verdict.good strong { color: var(--good-ink); }
.verdict.mid strong { color: var(--mid-ink); }
.verdict.bad strong { color: var(--bad-ink); }
.verdict strong { font-family: var(--font-titre); font-size: 19px; letter-spacing: -0.01em; }
.model-answer { border-left: 3px solid var(--accent); }
.source { border: 0; background: var(--bg); border-radius: 14px; }
/* progression d'une séance : une barre segmentée, une case par question */
.progression { gap: 5px; padding: 0; }
.progression span { flex: 1; width: auto; height: 7px; border-radius: 4px; background: var(--bg); }
.progression span.encours { background: var(--ink); box-shadow: none; transform: none; }
.progression span.juste { background: var(--good); }
.progression span.partiel { background: var(--mid); }
.progression span.faux { background: var(--bad); }
/* la mosaïque des notions (signature) */
.carte-notions { gap: 10px 14px; }
.cn-chap { gap: 4px; border-right: 0; padding-right: 0; flex-wrap: wrap; }
.cn { width: 16px; height: 16px; border-radius: 4.5px; }
.cn.maitrisee { background: var(--good); }
.cn.fragile { background: var(--mid); }
.cn.a_travailler { background: var(--bad); box-shadow: none; }
.cn.nouvelle { background: var(--surface); box-shadow: 0 0 0 1.5px var(--line) inset; }
.accueil .cn, .fin-carte .cn { width: 22px; height: 22px; border-radius: 6px; }
.accueil .cn-chap, .fin-carte .cn-chap { gap: 5px; }
.cn-legende { gap: 6px 16px; font-size: 13px; }
.cn-legende .cn, .accueil .cn-legende .cn, .fin-carte .cn-legende .cn { width: 11px; height: 11px; border-radius: 3px; }
.fin-carte { background: var(--bg); border-radius: 18px; padding: 16px; }
/* chiffres */
.prep-score { color: var(--ink); }
.prep-score .num { font-family: var(--font-titre); font-weight: 800; font-size: 64px; letter-spacing: -0.04em; }
.prep-score .unit { font-family: var(--font-titre); font-weight: 600; color: var(--muted); }
.lc-score, .regul .num, .stat .num, .courbe-prep .c-val { font-family: var(--font-titre); font-weight: 700; }
.bar { background: var(--bg); height: 8px; }
.bar > span { background: var(--accent); }
.fin-apres { color: var(--accent); }
.serie { color: var(--good-ink); }
/* listes */
ul.prio li { background: var(--bg); border-radius: 14px; }
ol.plan-jours li { background: var(--bg); border-radius: 12px; }
ol.plan-jours li.auj { background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent) inset; }
ol.plan-jours li.jour_j { background: var(--mid-soft); }
.ligne-cours:hover b { color: var(--accent); }
.jour-cal { border-radius: 4px; background: var(--bg); }
.jour-cal.n1 { background: color-mix(in srgb, var(--good) 35%, var(--surface)); }
.jour-cal.n2 { background: color-mix(in srgb, var(--good) 65%, var(--surface)); }
.jour-cal.n3 { background: var(--good); }
.drop { background: var(--bg); border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 18px; }
.drop.over { background: var(--accent-soft); border-color: var(--accent); }
.ajout.en-avant { border: 1.5px solid var(--line); }
ol.etapes-bienvenue { list-style: none; padding: 0; counter-reset: e; gap: 12px; }
ol.etapes-bienvenue li { counter-increment: e; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
ol.etapes-bienvenue li::before { content: counter(e); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-family: var(--font-titre); font-weight: 800; color: #fff; }
ol.etapes-bienvenue li:nth-child(1)::before { background: var(--good); }
ol.etapes-bienvenue li:nth-child(2)::before { background: var(--mid); color: #16171d; }
ol.etapes-bienvenue li:nth-child(3)::before { background: var(--bad); }
.plan-copie button { border-radius: 8px; }
.plan-copie button.ok { background: var(--accent); color: #fff; }
.chrono { border: 1.5px solid var(--ink); font-weight: 700; }
.chrono.urgent { color: var(--bad-ink); border-color: var(--bad); background: var(--bad-soft); }
.confirm-suppr { border-color: var(--bad); background: var(--bad-soft); border-radius: 14px; }
.bubble.me { background: var(--accent); color: #fff; }
.bubble.tutor { background: var(--bg); border: 0; font-family: var(--font-ui); }
.toast { background: var(--ink); color: var(--page); border-radius: 14px; }
.fig-arrow { stroke: var(--bad); } .fig-arrow-head { fill: var(--bad); } .fig-marker { color: var(--bad-ink); }
@media (max-width: 460px) {
  .question-text { font-size: 22px; }
  .accueil h2, .fiche-tete h2 { font-size: 27px; }
  .bienvenue h2 { font-size: 30px; }
  .accueil, .panel.question, .fiche-tete, .bienvenue, .fin-seance, .cours-pret { box-shadow: 4px 4px 0 var(--accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .cn.bascule { animation: bascule .55s cubic-bezier(.2,.9,.3,1.4); }
  @keyframes bascule { 0% { transform: scale(.5) rotate(-12deg); } 60% { transform: scale(1.3) rotate(4deg); } 100% { transform: none; } }
  .cn.bascule.maitrisee { animation-name: bascule, halo; animation-duration: .55s, 1s; }
  @keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
  .progression span.juste, .progression span.partiel, .progression span.faux { animation: remplir .4s ease-out; transform-origin: left; }
  @keyframes remplir { from { transform: scaleX(.2); } to { transform: none; } }
}
ol.etapes-bienvenue li { display: block; position: relative; padding-left: 40px; min-height: 28px; }
ol.etapes-bienvenue li::before { position: absolute; left: 0; top: -2px; }
.aide .btn.ghost { padding-left: 0; }
.aide .btn.ghost:hover { background: none; text-decoration: underline; }
#app > .accueil.fait { box-shadow: 5px 5px 0 var(--good); }

/* ===== Affinage « pro » : bleu-vert, sans relief graphique ===== */
:root {
  --accent: #0b7a83; --accent-soft: #e2f3f2; --accent-ink: #075d64;
  --good: #0b7a83; --good-soft: #e2f3f2; --good-ink: #075d64;
  --mid: #f0b429; --mid-soft: #fdf3dc; --mid-ink: #845a00;
  --bad: #7b5cf0; --bad-soft: #efebfe; --bad-ink: #5638c9;
  --font-titre: "Schibsted Grotesk", "Public Sans", system-ui, sans-serif;
  --ombre-douce: 0 1px 2px rgba(16, 24, 32, .04), 0 12px 32px -16px rgba(16, 40, 48, .22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #3cc2c4; --accent-soft: #10302f; --accent-ink: #7fdcdc;
    --good: #3cc2c4; --good-soft: #10302f; --good-ink: #7fdcdc;
    --mid: #f5c451; --mid-soft: #3a2e12; --mid-ink: #ffd677;
    --bad: #a28cff; --bad-soft: #29214d; --bad-ink: #c5b8ff;
    --ombre-douce: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --accent: #3cc2c4; --accent-soft: #10302f; --accent-ink: #7fdcdc;
  --good: #3cc2c4; --good-soft: #10302f; --good-ink: #7fdcdc;
  --mid: #f5c451; --mid-soft: #3a2e12; --mid-ink: #ffd677;
  --bad: #a28cff; --bad-soft: #29214d; --bad-ink: #c5b8ff;
  --ombre-douce: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -16px rgba(0,0,0,.7);
}
.brand h1, h2 { font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 25px; line-height: 1.2; }
.accueil h2, .fiche-tete h2 { font-size: 28px; }
.bienvenue h2 { font-size: 31px; }
.question-text { font-weight: 500; font-size: 23px; line-height: 1.32; letter-spacing: -0.01em; }
.qtext { font-weight: 500; }
.verdict strong { font-size: 17px; }
.prep-score .num { font-weight: 700; font-size: 58px; letter-spacing: -0.03em; }
/* surfaces : fines, un seul élément en élévation douce */
.panel { border: 1px solid var(--line); border-radius: 16px; }
.accueil, .panel.question, .fiche-tete, .bienvenue, .fin-seance, .cours-pret, #app > .panel.fade:first-of-type:not(.ajout),
#app > .accueil.fait { border: 1px solid var(--line); box-shadow: var(--ombre-douce); border-radius: 18px; }
.accueil { border-top: 3px solid var(--accent); }
/* boutons : nets, sans ombre décalée */
.btn { border-radius: 10px; border: 1px solid var(--line); font-weight: 600; }
.btn:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.btn.large { border-radius: 12px; font-size: 16.5px; padding: 14px 18px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.primary:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn.danger { border-color: var(--bad); }
/* réponses */
.choice { border: 1px solid var(--line); border-radius: 12px; }
.choice:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.choice .key { background: var(--bg); color: var(--muted); border-radius: 6px; }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice.is-correct { box-shadow: 0 0 0 1px var(--good) inset; }
.barre-conf .btn, .barre-conf .btn[data-valider="sur"] { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); box-shadow: none; border-radius: 12px; }
.barre-conf .btn:not(:disabled):hover, .barre-conf .btn[data-valider="sur"]:not(:disabled):hover { background: var(--accent-soft); }
.barre-conf .btn:disabled { border-color: var(--line); color: var(--muted); }
textarea, input[type="text"], input[type="date"], input[type="time"], select, input[type="number"] { border: 1px solid var(--line); border-radius: 10px !important; }
/* bienvenue : numéros discrets */
ol.etapes-bienvenue li::before { background: none !important; color: var(--accent) !important; font-weight: 700; width: auto; height: auto; font-size: 17px; top: -1px; }
ol.etapes-bienvenue li { padding-left: 26px; }
/* mosaïque : tuiles plus fines */
.cn { border-radius: 3.5px; }
.accueil .cn, .fin-carte .cn { width: 18px; height: 18px; border-radius: 4.5px; }
.progression span.encours { background: var(--accent); }
.chrono { border: 1px solid var(--line); }
.plan-copie button.ok { background: var(--accent-soft); color: var(--accent-ink); }
.bubble.me { background: var(--accent-soft); color: var(--ink); }
@media (max-width: 460px) {
  .accueil, .panel.question, .fiche-tete, .bienvenue, .fin-seance, .cours-pret { box-shadow: var(--ombre-douce); }
  .question-text { font-size: 21px; }
  .accueil h2, .fiche-tete h2 { font-size: 26px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #062224; } }
:root[data-theme="dark"] .btn.primary { color: #062224; }
/* texte à trous : le champ est dans la phrase */
.trou-phrase { line-height: 1.6; }
input.trou { display: inline-block; vertical-align: baseline; font: inherit; color: var(--accent-ink); text-align: center;
  padding: 0 6px; margin: 0 3px; height: 1.35em; min-width: 0; border: 0 !important; border-bottom: 2px solid var(--accent) !important;
  border-radius: 6px 6px 0 0 !important; background: var(--accent-soft) !important; box-shadow: none !important; transition: width .12s; }
input.trou::placeholder { color: color-mix(in srgb, var(--accent) 45%, transparent); }
input.trou:focus { outline: none; background: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important; }
.trou-rempli { display: inline-block; padding: 0 8px; margin: 0 3px; border-radius: 6px 6px 0 0; border-bottom: 2px solid var(--muted); background: var(--bg); color: var(--ink); }
.trou-rempli.juste { border-color: var(--good); background: var(--good-soft); color: var(--good-ink); }
.trou-rempli.faux { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.trou-rempli.partiel { border-color: var(--mid); background: var(--mid-soft); color: var(--mid-ink); }
.trou-rempli.attendue { border-color: var(--good); background: var(--good-soft); color: var(--good-ink); text-decoration: none; }
.trou-groupe { white-space: nowrap; } .trou-groupe .trou-rempli { white-space: normal; }
/* barre de préparation vers l'objectif */
.objectif-barre { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 16px; }
.ob-statut { font-size: 14px; color: var(--muted); }
.ob-statut.good b { color: var(--good-ink); } .ob-statut.mid b { color: var(--mid-ink); } .ob-statut.bad b { color: var(--bad-ink); }
.ob-piste { position: relative; height: 14px; border-radius: 7px; background: var(--bg); margin-top: 6px; }
.ob-rempli { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 7px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ob-attendu { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.ob-cible { position: absolute; top: -7px; bottom: -7px; margin-left: -1px; border-left: 2px dashed var(--accent); }
.ob-etiquettes { position: relative; height: 16px; font-size: 11.5px; color: var(--muted); }
.ob-etiquettes span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ob-etiquettes .cible { color: var(--accent-ink); font-weight: 600; }
.ob-dates { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.ob-dates .fort { color: var(--ink); }
/* marque Corail */
.marque-nom { font-family: var(--font-titre); font-weight: 700; letter-spacing: 0.12em; font-size: 18px; }
.top-inner .tag { font-size: 12.5px; color: var(--muted); }
.promesse { font-size: 16px; color: var(--muted); line-height: 1.55; margin-top: -4px; }
/* chiffres tabulaires seulement là où des nombres s'alignent : ailleurs, ils élargissaient points et virgules */
body { font-variant-numeric: normal; }
.num, .lc-score, .chrono, .compteur, .calib-row .val, .fig-bar-val, .regul .num, .stat .num, .fin-apres, .ob-dates, .plan-copie button { font-variant-numeric: tabular-nums; }
/* veille du jour J */
.veille-score { display: flex; align-items: baseline; gap: 10px; }
.veille-score .num { font-family: var(--font-titre); font-weight: 700; font-size: 40px; letter-spacing: -0.03em; }
.veille-liste { display: flex; flex-direction: column; gap: 6px; }
.veille-liste ul.prio { margin: 0; }
ol.veille-suite { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
ol.veille-suite b { font-weight: 700; }
a#veille-rappel { justify-content: center; }
/* parcours express et pause */
.idee-cle { background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.idee-cle p { font-size: 15px; }
.pause { background: var(--mid-soft); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pause .btn.ghost { color: var(--mid-ink); }
.continuer-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.continuer-chap select { flex: 1; min-width: 0; }
.veille-liste li .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* l'oubli rendu visible */
.cn.efface { opacity: .38; }
ol.oubli { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ol.oubli li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline; padding: 9px 12px; background: var(--bg); border-radius: 12px; }
ol.oubli li.auj { background: var(--mid-soft); }
.oubli-date { font-size: 13px; font-weight: 600; }
ol.oubli li.auj .oubli-date { color: var(--mid-ink); }
.oubli-notions { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; }
.oubli-notion + .oubli-notion::before { content: "·"; margin-right: 10px; color: var(--muted); }
/* ce que vous savez */
.savoir-total { font-size: 15px; color: var(--muted); }
.savoir-total .num { font-family: var(--font-titre); font-weight: 700; font-size: 26px; color: var(--ink); margin-right: 4px; }
.carte-notions.mini { gap: 6px 10px; }
.carte-notions.mini .cn { width: 11px; height: 11px; border-radius: 3px; }
.carte-notions.mini .cn-chap { gap: 3px; }
/* examen : estimation face au résultat */
.estimation { font-size: 14px; border-radius: 12px; padding: 10px 14px; }
.estimation.good { background: var(--good-soft); color: var(--good-ink); }
.estimation.mid { background: var(--mid-soft); color: var(--mid-ink); }
@media (max-width: 460px) { ol.oubli li { grid-template-columns: 1fr; gap: 4px; } }
.oubli-notions { gap: 6px; }
.oubli-notion + .oubli-notion::before { content: none; }
.oubli-notion { background: var(--surface); border-radius: 8px; padding: 3px 9px; font-size: 13px; }
/* fiche du cours allégée */
.fiche-tete .veille-score { margin-top: 2px; }
.fiche-tete .objectif-barre { margin-bottom: 4px; }
.raccourcis-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -6px; }
.details-fiche { padding: 4px 20px; gap: 0; }
.details-fiche > details { border-top: 1px solid var(--line); padding: 14px 0; }
.details-fiche > details:first-child { border-top: 0; }
.details-fiche > details > summary { color: var(--ink); font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.details-fiche > details > summary::before { content: none; }
.details-fiche > details > summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 18px; line-height: 1; }
.details-fiche > details[open] > summary::after { content: "–"; }
.details-fiche .det-corps { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.details-fiche .panel { border: 0 !important; box-shadow: none !important; padding: 12px 0 0; background: none; }
.details-fiche .panel > h3 { display: none; }
/* bilan allégé */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.barre-action .lien { align-self: center; }

/* ===== Corail, version web : écrans publics, comptes, finitions ===== */
:root { --encre-marque: #0f3a3f; --encre-marque-2: #13474d; --largeur: 1120px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --encre-marque: #0c2629; --encre-marque-2: #103236; } }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo-tuiles { display: inline-flex; gap: 3px; }
.logo-tuiles i { width: 9px; height: 9px; border-radius: 2.5px; display: block; }
.logo-tuiles i:nth-child(1) { background: var(--good); }
.logo-tuiles i:nth-child(2) { background: var(--mid); }
.logo-tuiles i:nth-child(3) { background: var(--bad); }
.logo-nom { font-family: var(--font-titre); font-weight: 700; letter-spacing: 0.14em; font-size: 17px; }
.logo.clair { color: #fff; }
.marque { display: inline-flex; }

/* mosaïque décorative */
.mosaique-deco { display: inline-grid; grid-template-columns: repeat(5, max-content); gap: 6px; width: max-content; justify-content: start; }
.mosaique-deco i { width: 18px; height: 18px; border-radius: 5px; display: block; }
.mosaique-deco.grande { gap: 9px; } .mosaique-deco.grande i { width: 34px; height: 34px; border-radius: 8px; }
.mosaique-deco.petite { grid-template-columns: repeat(4, max-content); }
.mosaique-deco .t-m { background: var(--good); } .mosaique-deco .t-f { background: var(--mid); } .mosaique-deco .t-t { background: var(--bad); }
.mosaique-deco .t-n { box-shadow: inset 0 0 0 1.5px var(--line); }
.auth-marque .mosaique-deco .t-n { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
@media (prefers-reduced-motion: no-preference) {
  .mosaique-deco i, .mosaique-deco.anime i { animation: tuile .55s cubic-bezier(.2,.9,.3,1.25) both; }
  @keyframes tuile { from { opacity: 0; transform: translateY(-10px) scale(.7); } to { opacity: 1; transform: none; } }
}

/* chargement */
.chargement { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--page); color: var(--muted); }
.rotation { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; display: inline-block; animation: tourne .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
.chargement .rotation { color: var(--accent); width: 22px; height: 22px; margin: 0; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ===== écrans de compte ===== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; background: var(--page); }
.auth-marque { background: var(--encre-marque); color: #e8f1f1; padding: 36px 48px; display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 0; height: 100vh; }
.auth-marque-corps { display: flex; flex-direction: column; gap: 26px; max-width: 420px; }
.auth-promesse { font-family: var(--font-titre); font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0; }
.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #c9dcdc; }
.auth-points li { padding-left: 20px; position: relative; }
.auth-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--good); }
.auth-pied { font-size: 12.5px; color: #8fb0b2; margin: 0; }
.auth-logo { color: #fff; text-decoration: none; }
.auth-contenu { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 28px; }
.auth-logo-mobile { display: none; text-decoration: none; }
.auth-carte { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.auth-carte h1 { font-family: var(--font-titre); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.auth-sous-titre { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: -6px 0 0; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-ligne { display: flex; justify-content: flex-end; margin-top: -6px; font-size: 14px; }
.auth-lien-bas { font-size: 14.5px; color: var(--muted); text-align: center; margin: 0; }
.auth-legal { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; }
.auth-legal a { color: var(--muted); }
.auth-enveloppe { display: flex; justify-content: center; padding: 8px 0; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ-label { font-size: 14px; font-weight: 600; }
.champ-saisie { position: relative; display: flex; }
.champ-saisie input { width: 100%; height: 46px; padding: 0 14px; font-size: 16px; border-radius: 10px !important; }
.champ-saisie input:has(+ .champ-oeil) { padding-right: 84px; }
.champ-oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.champ-oeil:hover { background: var(--accent-soft); }
.champ-aide { font-size: 13px; color: var(--muted); }
.champ-erreur { font-size: 13px; color: var(--bad-ink); font-weight: 600; }
.champ.en-erreur input { border-color: var(--bad) !important; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.case input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.alerte { border-radius: 10px; padding: 11px 14px; font-size: 14px; line-height: 1.45; }
.alerte.erreur { background: var(--bad-soft); color: var(--bad-ink); }
.alerte.info { background: var(--accent-soft); color: var(--accent-ink); }
.auth .btn.large { width: 100%; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-marque { display: none; }
  .auth-contenu { justify-content: flex-start; padding-top: 28px; }
  .auth-logo-mobile { display: inline-flex; align-self: flex-start; max-width: 400px; width: 100%; margin: 0 auto; }
}

/* ===== en-tête de l'app : menu du compte ===== */
.brand-actions { display: flex; align-items: center; gap: 6px; }
.menu-compte { position: relative; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.avatar:hover, .avatar[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(16, 24, 32, .28); padding: 6px; display: flex; flex-direction: column; z-index: 30; animation: fade .15s ease-out; }
.menu-email { font-size: 12.5px; color: var(--muted); padding: 8px 10px 6px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu button { text-align: left; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--ink); padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--bg); }
.top-inner { padding-block: 12px; }

/* ===== page Compte ===== */
.compte-email { font-size: 22px !important; word-break: break-all; }
.jauge { display: flex; flex-direction: column; gap: 6px; }
.jauge-tete { display: flex; justify-content: space-between; font-size: 14px; }
.jauge-val { font-variant-numeric: tabular-nums; color: var(--muted); }
.separateur { border-top: 1px solid var(--line); margin: 4px 0; }
.compte-pied { justify-content: space-between; }

/* préparation d'un cours : étapes */
ol.etapes-gen { list-style: none; margin: 4px 0 0; padding: 14px 16px; background: var(--bg); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
ol.etapes-gen li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
ol.etapes-gen li.encours { color: var(--ink); font-weight: 600; }
ol.etapes-gen li.fait { color: var(--ink); }
.eg-point { width: 12px; height: 12px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.5px var(--line); flex: 0 0 auto; }
ol.etapes-gen li.fait .eg-point { background: var(--good); box-shadow: none; }
ol.etapes-gen li.encours .eg-point { box-shadow: inset 0 0 0 2px var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { background: var(--accent-soft); } }

/* ===== pages publiques ===== */
.pub { min-height: 100vh; display: flex; flex-direction: column; background: var(--page); }
.pub main { flex: 1; }
.pub-large { max-width: var(--largeur); margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left)); }
.pub-etroit { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; }
.pub-entete { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--page) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.pub-entete-int { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.pub-logo { text-decoration: none; }
.pub-nav { display: flex; gap: 8px; align-items: center; }
.pub-nav .btn { padding: 9px 16px; text-decoration: none; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.pub-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.pub-hero h1 { font-family: var(--font-titre); font-weight: 700; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 20px; max-width: 16ch; }
.pub-intro { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 28px; max-width: 54ch; }
.pub-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pub-cta .btn.large { width: auto; padding-inline: 24px; }
.pub-mention { font-size: 13.5px; color: var(--muted); margin: 16px 0 0; }
.apercu { display: flex; justify-content: center; }
.apercu-carte { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(16,24,32,.04), 0 30px 60px -30px rgba(15,58,63,.35); }
.apercu-sur { font-size: 13px; color: var(--muted); }
.apercu-score { font-family: var(--font-titre); font-weight: 700; font-size: 44px; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.apercu-score small { font-family: var(--font-ui); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--muted); }
.apercu-statut { font-size: 14px; color: var(--muted); } .apercu-statut b { color: var(--good-ink); }
.apercu-piste { position: relative; height: 12px; background: var(--bg); border-radius: 6px; margin: 4px 0 6px; }
.apercu-piste span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 6px; }
.apercu-piste i { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.apercu-piste em { position: absolute; top: -7px; bottom: -7px; border-left: 2px dashed var(--accent); }
.apercu-bouton { background: var(--accent); color: #fff; font-weight: 600; text-align: center; padding: 12px; border-radius: 12px; font-size: 15px; }
.apercu .mosaique-deco { grid-template-columns: repeat(8, max-content); }
.apercu .mosaique-deco i { width: 22px; height: 22px; }
.pub-section { padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--line); }
.pub-section h2 { font-family: var(--font-titre); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 28px; }
.pub-etapes { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pub-etapes li { counter-increment: e; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.pub-etapes li::before { content: counter(e); font-family: var(--font-titre); font-weight: 700; font-size: 15px; color: var(--accent-ink); width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 4px; }
.pub-etapes b { color: var(--ink); font-size: 18px; font-family: var(--font-titre); font-weight: 700; }
.pub-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.pub-bloc h2 { font-size: 24px; margin-bottom: 12px; }
.pub-bloc p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.pub-final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pub-final h2 { margin: 0; }
.pub-final p { color: var(--muted); margin: 0 0 12px; font-size: 16px; }
.pub-final .btn.large { width: auto; padding-inline: 26px; }
.pub-pied { border-top: 1px solid var(--line); padding: 28px 0 36px; }
.pub-pied-int { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.pub-pied nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pub-pied a { color: var(--muted); }
.pub-pied p { margin: 0; }
.pub-legal h1 { font-family: var(--font-titre); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; margin: 0 0 12px; }
.pub-legal h2 { font-family: var(--font-titre); font-weight: 700; font-size: 20px; margin: 32px 0 10px; }
.pub-legal p, .pub-legal li { font-size: 15.5px; line-height: 1.7; }
.pub-legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.note-modele { background: var(--mid-soft); color: var(--mid-ink); border-radius: 10px; padding: 10px 14px; font-size: 14px !important; }
mark.a-completer { background: var(--mid-soft); color: var(--mid-ink); border-radius: 4px; padding: 0 3px; }
@media (max-width: 900px) {
  .pub-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; padding-bottom: 48px; }
  .pub-etapes, .pub-deux { grid-template-columns: 1fr; gap: 28px; }
  .pub-section { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 460px) {
  .pub-nav #pub-connexion { display: none; }
  .pub-cta .btn.large { width: 100%; }
}

input[type="password"], input[type="email"] { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.champ-saisie input:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.compte-tete ~ .panel .auth-form .btn.large { width: auto; padding-inline: 22px; font-size: 15.5px; }

/* ===================================================================
   Identité Corail : Lexend (la voix de l'app), Newsreader (la voix du contenu),
   bleu-vert lagon en surfaces, encre pour le texte et les boutons, tuiles aux coins peu arrondis,
   ni ombre ni dégradé, jamais de rouge.
   =================================================================== */
:root {
  --page: #ffffff; --surface: #ffffff; --bg: #F4F8F8; --ink: #0C2629; --muted: #4A5A5E; --line: #DCE5E6;
  --lagon: #17B3B5; --lagon-pale: #E4F5F4;
  --accent: #17B3B5; --accent-soft: #EAF8F7; --accent-ink: #06666C;
  --good: #17B3B5; --good-soft: #EAF8F7; --good-ink: #06666C;
  --mid: #F0B429; --mid-soft: #FDF3DC; --mid-ink: #845A00;
  --bad: #7B5CF0; --bad-soft: #EFEBFE; --bad-ink: #5638C9;
  --bouton: #0C2629; --bouton-survol: #1E4146; --bouton-texte: #ffffff;
  --font-ui: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Lexend", system-ui, sans-serif;
  --font-titre: "Lexend", system-ui, sans-serif;
  --font-read: "Newsreader", Georgia, "Times New Roman", serif;
  --ombre-douce: none; --relief: none;
  --encre-marque: var(--lagon-pale);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0B1A1C; --surface: #102427; --bg: #152C2F; --ink: #E6F2F2; --muted: #9DB4B7; --line: #23393C;
    --lagon: #3ED0D2; --lagon-pale: #12393B;
    --accent: #3ED0D2; --accent-soft: #12393B; --accent-ink: #8BE3E4;
    --good: #3ED0D2; --good-soft: #12393B; --good-ink: #8BE3E4;
    --mid: #F5C451; --mid-soft: #3A2E12; --mid-ink: #FFD677;
    --bad: #A28CFF; --bad-soft: #29214D; --bad-ink: #C5B8FF;
    --bouton: #E6F2F2; --bouton-survol: #ffffff; --bouton-texte: #0B1A1C;
  }
}
:root[data-theme="dark"] {
  --page: #0B1A1C; --surface: #102427; --bg: #152C2F; --ink: #E6F2F2; --muted: #9DB4B7; --line: #23393C;
  --lagon: #3ED0D2; --lagon-pale: #12393B;
  --accent: #3ED0D2; --accent-soft: #12393B; --accent-ink: #8BE3E4;
  --good: #3ED0D2; --good-soft: #12393B; --good-ink: #8BE3E4;
  --mid: #F5C451; --mid-soft: #3A2E12; --mid-ink: #FFD677;
  --bad: #A28CFF; --bad-soft: #29214D; --bad-ink: #C5B8FF;
  --bouton: #E6F2F2; --bouton-survol: #ffffff; --bouton-texte: #0B1A1C;
}
body { font-family: var(--font-ui); font-weight: 400; }
a { color: var(--accent-ink); }
.brand h1, h2, h3, .auth-carte h1, .pub-hero h1, .pub-section h2, .pub-legal h1, .pub-legal h2 { font-family: var(--font-titre); font-weight: 600; }
h2 { letter-spacing: -0.02em; }
b, strong { font-weight: 600; }
/* la voix du contenu : questions, extraits, explications */
.question-text, .qtext { font-family: var(--font-read); font-weight: 500; letter-spacing: 0; }
.question-text { font-size: 25px; line-height: 1.4; }
/* surfaces : à plat, coins peu arrondis */
.panel { border-radius: 10px; }
.accueil, .panel.question, .fiche-tete, .bienvenue, .fin-seance, .cours-pret, #app > .panel.fade:first-of-type:not(.ajout), #app > .accueil.fait {
  border: 1px solid var(--line); box-shadow: none; border-radius: 10px;
}
.accueil { border-top: 1px solid var(--line); background: var(--lagon-pale); border-color: transparent; }
/* boutons : des tuiles allongées */
.btn { border-radius: 8px; font-weight: 500; }
.btn.large { border-radius: 8px; }
.btn.primary, .apercu-bouton { background: var(--bouton); border-color: var(--bouton); color: var(--bouton-texte); box-shadow: none; }
.btn.primary:hover, :root:not([data-theme="light"]) .btn.primary:hover { background: var(--bouton-survol); border-color: var(--bouton-survol); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: var(--bouton-texte); } }
:root[data-theme="dark"] .btn.primary { color: var(--bouton-texte); }
.btn.ghost, .lien { color: var(--accent-ink); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.chip { border-radius: 6px; }
.choice { border-radius: 8px; }
.choice[aria-pressed="true"] .key, .choice.is-correct .key { color: var(--bouton-texte); background: var(--bouton); }
.barre-conf .btn, .barre-conf .btn[data-valider="sur"] { border-radius: 8px; color: var(--accent-ink); border-color: var(--accent-ink); }
textarea, input[type="text"], input[type="date"], input[type="time"], select, input[type="number"], input[type="password"], input[type="email"], .champ-saisie input { border-radius: 8px !important; }
input.trou { color: var(--ink); border-radius: 4px 4px 0 0 !important; }
.avatar { border-radius: 6px; background: var(--bouton); color: var(--bouton-texte); }
.avatar:hover, .avatar[aria-expanded="true"] { background: var(--bouton-survol); }
.menu { border-radius: 10px; box-shadow: 0 12px 32px -14px rgba(12, 38, 41, .3); }
.alerte, .idee-cle, .pause, .estimation, ol.oubli li, ol.etapes-gen { border-radius: 8px; }
.ob-rempli, .apercu-piste span { background: var(--lagon); }
.progression span.encours { background: var(--lagon); }
.bubble { border-radius: 10px; }
.bubble.tutor { font-family: var(--font-read); font-size: 16.5px; }

/* logo */
.logo { gap: 9px; color: var(--ink); }
.logo-nom { font-family: var(--font-titre); font-weight: 600; letter-spacing: -0.02em; font-size: 22px; text-transform: none; }
.logo .marches { display: block; flex: none; }
.logo.clair { color: #fff; }

/* mosaïque décorative */
.mosaique-deco i { border-radius: 4px; }
.mosaique-deco.grande i { border-radius: 6px; }
.mosaique-deco .t-m { background: var(--lagon); }
.mosaique-deco .t-n, .auth-marque .mosaique-deco .t-n { box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: -2px; }

/* écrans de compte : panneau bleu-vert pâle, texte encre */
.auth-marque { background: var(--lagon-pale); color: var(--ink); }
.auth-promesse { color: var(--ink); font-weight: 600; font-size: 38px; letter-spacing: -0.03em; }
.auth-points { color: var(--muted); }
.auth-points li::before { background: var(--lagon); border-radius: 2px; }
.auth-pied { color: var(--muted); }
.auth-logo { color: var(--ink); }
.auth-carte h1 { font-weight: 600; letter-spacing: -0.025em; }

/* ===== page d'accueil publique ===== */
.pub-entete { background: color-mix(in srgb, var(--lagon-pale) 92%, transparent); border-bottom: 0; }
.pub-nav { gap: 14px; }
.pub-nav .btn.ghost { color: var(--ink); }
.lien-fort { color: var(--ink); font-weight: 500; font-size: 17px; text-underline-offset: 5px; }
.pub-haut { background: var(--lagon-pale); }
.pub-hero { display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: flex-end; justify-content: space-between; padding-top: 48px; padding-bottom: 40px; }
.pub-hero h1 { flex: 1 1 480px; font-weight: 600; font-size: clamp(40px, 5.6vw, 70px); line-height: 1.04; letter-spacing: -0.035em; margin: 0; max-width: 11ch; color: var(--ink); }
.pub-hero-texte { flex: 1 1 340px; max-width: 32em; }
.pub-intro { color: var(--ink); font-size: 18.5px; margin: 0 0 24px; }
.pub-cta { align-items: center; gap: 20px; }
.pub-etapes-zone { padding-bottom: 80px; }
.pub-etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; counter-reset: none; }
.pub-etapes li { display: flex; flex-direction: column; gap: 14px; color: var(--ink); counter-increment: none; }
.pub-etapes li::before { content: none; }
.etape-num { display: flex; align-items: center; gap: 10px; }
.etape-num span { flex: none; width: 34px; height: 34px; border-radius: 6px; background: var(--bouton); color: var(--bouton-texte); font-weight: 600; display: grid; place-items: center; }
.pub-etapes li:last-child .etape-num span { background: var(--lagon); color: #0C2629; }
.etape-num i { flex: 1; height: 2px; background: currentColor; opacity: .16; }
.etape-carte { flex: 1; background: var(--surface); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.etape-carte .picto { color: var(--ink); margin-bottom: 8px; }
.etape-carte h3 { margin: 0; font-size: 19px; }
.etape-carte p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.pub-section { border-top: 0; }
.pub-correction { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: center; padding-top: 96px; padding-bottom: 88px; }
.pub-correction-texte { flex: 1 1 380px; display: flex; flex-direction: column; gap: 22px; }
.pub-correction-texte h2 { margin: 0 0 4px; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; }
.pub-point { display: flex; gap: 20px; align-items: center; max-width: 34em; }
.pub-point svg { flex: none; }
.pub-point p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.pub-exemple { flex: 1 1 420px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pub-exemple-q { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.pub-exemple-q span { font-size: 13px; color: var(--muted); }
.pub-exemple-q p { margin: 0; font-family: var(--font-read); font-size: 24px; line-height: 1.45; }
.pub-exemple-q b { font-weight: 500; border-bottom: 2px solid var(--lagon); background: var(--accent-soft); padding: 0 6px; }
.pub-exemple-r { background: var(--accent-soft); padding: 18px 28px 22px; display: flex; flex-direction: column; gap: 6px; }
.pub-exemple-r strong { color: var(--accent-ink); }
.pub-exemple-r p { margin: 0; font-family: var(--font-read); font-size: 17px; line-height: 1.55; }
.pub-bandeau { background: var(--accent-soft); }
.pub-bandeau .pub-deux { padding-top: 72px; padding-bottom: 72px; }
.pub-bloc h2 { font-size: 26px; letter-spacing: -0.02em; }
.pub-final { padding-top: 88px; padding-bottom: 88px; }
.pub-final h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.025em; }
.pub-pied { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .pub-hero { padding-top: 32px; } .pub-correction { padding-top: 64px; padding-bottom: 64px; } }
@media (max-width: 460px) { .pub-cta .btn.large { width: auto; } .pub-hero h1 { font-size: 44px; } }

/* pictogrammes animés */
@media (prefers-reduced-motion: no-preference) {
  .pi-doc { animation: pi-descend 2.6s ease-in-out infinite; }
  .pi-fleche { animation: pi-clignote 2.6s ease-in-out infinite; }
  .pi-trace { stroke-dasharray: 140; animation: pi-trace 4s ease-in-out infinite; }
  .pi-s1 { animation: pi-s1 4s infinite; } .pi-s2 { animation: pi-s2 4s infinite; } .pi-s3 { animation: pi-s3 4s infinite; }
  .pi-c1, .pi-c2, .pi-c3 { stroke-dasharray: 22; }
  .pi-c1 { animation: pi-c1 4s infinite; } .pi-c2 { animation: pi-c2 4s infinite; } .pi-c3 { animation: pi-c3 4s infinite; }
  .pi-p1, .pi-p2, .pi-p3 { animation: pi-point 1.4s ease-in-out infinite; } .pi-p2 { animation-delay: .2s; } .pi-p3 { animation-delay: .4s; }
  .pi-drapeau { transform-box: fill-box; transform-origin: left center; animation: pi-vague 1.8s ease-in-out infinite; }
  .pi-e1, .pi-e2, .pi-e3 { animation: pi-brille 2.4s ease-in-out infinite; } .pi-e2 { animation-delay: .8s; } .pi-e3 { animation-delay: 1.6s; }
}
@keyframes pi-descend { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes pi-clignote { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pi-trace { 0% { stroke-dashoffset: 140; } 70%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 140; } }
@keyframes pi-s1 { 0%, 4% { fill: var(--surface); } 8%, 92% { fill: var(--lagon); } 100% { fill: var(--surface); } }
@keyframes pi-s2 { 0%, 34% { fill: var(--surface); } 40%, 92% { fill: var(--lagon); } 100% { fill: var(--surface); } }
@keyframes pi-s3 { 0%, 66% { fill: var(--surface); } 72%, 92% { fill: var(--lagon); } 100% { fill: var(--surface); } }
@keyframes pi-c1 { 0%, 5% { stroke-dashoffset: 22; } 15%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 22; } }
@keyframes pi-c2 { 0%, 30% { stroke-dashoffset: 22; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 22; } }
@keyframes pi-c3 { 0%, 55% { stroke-dashoffset: 22; } 65%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 22; } }
@keyframes pi-point { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes pi-vague { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
@keyframes pi-brille { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
/* notions pas encore vues : tuile en pointillés, comme sur la page d'accueil */
.cn.nouvelle { background: transparent; box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--ink) 40%, transparent); outline-offset: -1.5px; }
.pub main { padding: 0; gap: 0; }
.pub-exemple-q b { padding: 0 5px; margin-left: 1px; }
/* textes d'accent : le bleu-vert foncé, lisible sur fond clair */
details > summary, details.plus > summary, .prep-score, .fin-apres, .ligne-cours:hover b, .fig-steps li + li::before, .fig-group > b, .plan-copie button.ok,
.confidence button[aria-pressed="true"], .details-fiche > details > summary::after, ol.etapes-bienvenue li::marker, ol.etapes-bienvenue li::before { color: var(--accent-ink) !important; }
.case input, ul.liste-chap input { accent-color: var(--ink); }

/* ===== administration ===== */
.wrap.large { max-width: 1180px; }
.admin { display: flex; flex-direction: column; gap: 20px; }
.adm-tete { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.adm-tete h2 { font-size: 30px; margin: 0; }
.adm-outils { display: flex; gap: 10px; align-items: center; }
.adm-outils select { height: 40px; padding: 0 10px; }
.adm-onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.adm-onglets button { font: inherit; font-size: 15px; font-weight: 500; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; margin-bottom: -1px; cursor: pointer; }
.adm-onglets button:hover { color: var(--ink); }
.adm-onglets button[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.adm-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.adm-tuile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.adm-tuile-titre { font-size: 13.5px; color: var(--muted); }
.adm-tuile-val { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.adm-tuile-detail { font-size: 13px; color: var(--muted); line-height: 1.45; }
.adm-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
@media (max-width: 520px) { .adm-deux { grid-template-columns: 1fr; } }
.adm-graphe { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.adm-graphe figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; font-weight: 500; }
.adm-graphe figcaption b { font-variant-numeric: tabular-nums; }
.adm-barres { position: relative; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.adm-barre { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; cursor: default; }
.adm-barre i { display: block; width: 100%; background: var(--lagon); border-radius: 3px 3px 0 0; }
.adm-barre.actif i { background: var(--accent-ink); }
.adm-bulle { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ink); color: var(--page); font-size: 12.5px; padding: 6px 9px; border-radius: 6px; white-space: nowrap; display: flex; gap: 8px; pointer-events: none; z-index: 2; }
.adm-bulle b { font-variant-numeric: tabular-nums; }
.adm-axe { display: flex; gap: 2px; font-size: 11px; color: var(--muted); }
.adm-axe span { flex: 1; min-width: 0; white-space: nowrap; overflow: visible; }
.adm-axe-max { font-size: 11.5px; color: var(--muted); }
.adm-bloc { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.adm-bloc h3 { margin: 0; font-size: 16px; }
.adm-table-zone { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.adm-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table th:not(:first-child), .adm-table td:not(:first-child) { text-align: right; }
.adm-email { display: inline-flex; gap: 6px; align-items: center; }
.adm-table select { height: 34px; padding: 0 8px; }
.adm-saisie input { width: 110px; height: 36px; padding: 0 8px; text-align: right; }
.adm-classement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-classement li { display: grid; grid-template-columns: minmax(150px, 260px) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.adm-cl-piste { height: 12px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.adm-cl-piste i { display: block; height: 100%; background: var(--lagon); border-radius: 3px; }
.adm-cl-val { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; min-width: 90px; }
.adm-cl-val small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .adm-classement li { grid-template-columns: 1fr auto; } .adm-cl-piste { grid-column: 1 / -1; grid-row: 2; } }
.adm-ligne-outils { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; }
.adm-recherche input { height: 38px; padding: 0 12px; min-width: 240px; }
.adm-reglages { display: flex; flex-direction: column; gap: 16px; }
.adm-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 20px; align-items: end; }
.adm-champs input[type="text"], .adm-champs select { height: 44px; padding: 0 12px; width: 100%; box-sizing: border-box; }
.adm-ajout-modele { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-ajout-modele input { height: 40px; padding: 0 12px; min-width: 240px; width: auto; flex: 1; max-width: 420px; }
.adm-enregistrer { display: flex; justify-content: flex-end; }
.adm-axe span:last-child { display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .adm-axe span:not(:first-child):not(:last-child) { visibility: hidden; } }
.adm-saisie td:last-child input { width: 130px; }
/* double authentification et invitations */
.code-2fa { font-size: 22px !important; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
ol.deuxf-etapes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
ol.deuxf-etapes img { display: block; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.deuxf-cle { font-size: 14px; background: var(--bg); padding: 3px 8px; border-radius: 6px; word-break: break-all; }
.adm-champs-invit { grid-template-columns: 2fr 1fr 1fr auto; }
@media (max-width: 760px) { .adm-champs-invit { grid-template-columns: 1fr; } }
.adm-champs input[type="number"] { height: 44px; padding: 0 12px; width: 100%; box-sizing: border-box; }
.adm-actions { display: inline-flex; gap: 14px; }
.adm-nouveau-code b { font-size: 16px; letter-spacing: 0.05em; margin-right: 8px; }
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Mosaïques en filigrane dans les marges de l'app (derrière les cartes) */
.fond-mosaique { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; --filigrane: .2; }
.fond-mosaique.discret { --filigrane: .1; }
.fond-mosaique + main { position: relative; z-index: 1; }
.grappe { position: absolute; display: grid; grid-template-columns: repeat(7, 34px); grid-auto-rows: 34px; gap: 10px; opacity: var(--filigrane); }
.grappe i { display: block; border-radius: 8px; }
.grappe .t-m { background: var(--lagon); } .grappe .t-f { background: var(--mid); } .grappe .t-t { background: var(--bad); }
.grappe .t-n { outline: 2px dashed var(--ink); outline-offset: -2px; }
.grappe-haut { top: 96px; right: -14px; }
.grappe-bas { bottom: -14px; left: -14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fond-mosaique { --filigrane: .2; } :root:not([data-theme="light"]) .fond-mosaique.discret { --filigrane: .1; } }
:root[data-theme="dark"] .fond-mosaique { --filigrane: .2; } :root[data-theme="dark"] .fond-mosaique.discret { --filigrane: .1; }
/* écrans étroits : les marges sont trop minces, les grappes passeraient sous le texte */
@media (max-width: 1000px) { .fond-mosaique { display: none; } }
@media print { .fond-mosaique { display: none; } }