/* ===== QCM ONEA – Réseaux & Systèmes · mobile-first ===== */
:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --texte: #0f1b2d;
  --texte-2: #5a6a80;
  --bord: #e1e7f0;
  --bord-fort: #c9d3e1;
  --primaire: #0b63b6;
  --primaire-2: #084f93;
  --primaire-doux: #e6f0fb;
  --sur-primaire: #ffffff;
  --accent: #0e9f9a;
  --ok: #0f8a50;
  --ok-fond: #e7f7ee;
  --ko: #c8322f;
  --ko-fond: #fdeeee;
  --moyen: #b86a00;
  --moyen-fond: #fff5e2;
  --violet: #6d4ad8;
  --orange: #d9581c;
  --code-fond: #f0f3f8;
  --hero-1: #0b2545;
  --hero-2: #0b4f8f;
  --hero-3: #0e8f8b;
  --ombre-1: 0 1px 2px rgba(15, 27, 45, .05);
  --ombre: 0 1px 2px rgba(15, 27, 45, .04), 0 6px 20px -6px rgba(15, 27, 45, .10);
  --ombre-haute: 0 2px 4px rgba(15, 27, 45, .05), 0 14px 32px -10px rgba(15, 27, 45, .22);
  --rayon: 18px;
  --rayon-s: 12px;
  --police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09111c; --surface: #101b2b; --surface-2: #172538; --texte: #e8eef7; --texte-2: #94a5bb;
    --bord: #1f2f45; --bord-fort: #2d4160; --primaire: #5aabff; --primaire-2: #8ac3ff; --primaire-doux: #12294a;
    --sur-primaire: #06121f; --accent: #3fd0c8;
    --ok: #4bd08c; --ok-fond: #0f2e21; --ko: #ff7a74; --ko-fond: #3a191b; --moyen: #f3b44c; --moyen-fond: #372a12;
    --violet: #a58bff; --orange: #ff9a62; --code-fond: #0b1522;
    --hero-1: #071528; --hero-2: #0a3563; --hero-3: #0b5f5c;
    --ombre-1: 0 1px 2px rgba(0,0,0,.3);
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
    --ombre-haute: 0 2px 4px rgba(0,0,0,.35), 0 16px 36px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09111c; --surface: #101b2b; --surface-2: #172538; --texte: #e8eef7; --texte-2: #94a5bb;
  --bord: #1f2f45; --bord-fort: #2d4160; --primaire: #5aabff; --primaire-2: #8ac3ff; --primaire-doux: #12294a;
  --sur-primaire: #06121f; --accent: #3fd0c8;
  --ok: #4bd08c; --ok-fond: #0f2e21; --ko: #ff7a74; --ko-fond: #3a191b; --moyen: #f3b44c; --moyen-fond: #372a12;
  --violet: #a58bff; --orange: #ff9a62; --code-fond: #0b1522;
  --hero-1: #071528; --hero-2: #0a3563; --hero-3: #0b5f5c;
  --ombre-1: 0 1px 2px rgba(0,0,0,.3);
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  --ombre-haute: 0 2px 4px rgba(0,0,0,.35), 0 16px 36px -10px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--texte);
  font: 16px/1.55 var(--police);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; font-weight: 750; margin-bottom: 1rem; }
code { font-family: var(--mono); font-size: .86em; background: var(--code-fond); border: 1px solid var(--bord); padding: .05em .38em; border-radius: 6px; word-break: break-word; }
pre { font-family: var(--mono); font-size: .8rem; line-height: 1.5; background: var(--code-fond); border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: .8rem .9rem; margin: .6rem 0; overflow-x: auto; white-space: pre; }
[hidden] { display: none !important; }

.vue { max-width: 800px; margin: 0 auto; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }

/* ---------- Accueil : en-tête ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  margin: 12px 0 22px; padding: 18px 18px 18px; border-radius: 24px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(63, 208, 200, .35), transparent 55%),
    linear-gradient(140deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%);
  box-shadow: var(--ombre-haute);
}
.hero::after { /* vague décorative */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 60 10 120 70 200 40 S 340 10 400 40 V70 H0z' fill='white'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.hero > * { position: relative; z-index: 1; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entete-simple { justify-content: center; padding: 22px 0 16px; }
.entete-simple h1 { font-size: 1.5rem; font-weight: 800; }
.marque { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; color: #7fe3dc; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; }
.hero h1 { font-size: 1.4rem; font-weight: 800; }
.sous-titre { margin: 1px 0 0; font-size: .84rem; color: rgba(255,255,255,.78); }

.btn-icone { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); font-size: 1.1rem; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--ombre-1); transition: background .15s, border-color .15s; }
.btn-icone:hover { border-color: var(--bord-fort); }
.btn-icone-hero { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.btn-icone-hero:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); }


/* ---------- Cartes ---------- */
.titre-section { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-2); margin: 0 2px 10px; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; margin-bottom: 16px; }

/* ---------- Accueil : résumé de progression ---------- */
.resume { margin-top: 20px; padding: 14px 16px 12px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.resume-chiffres { display: flex; gap: 28px; }
.resume-chiffres > div { display: flex; flex-direction: column; }
.resume-v { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.resume-l { font-size: .76rem; color: rgba(255,255,255,.75); }
.resume-barre { height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); margin: 12px 0 14px; overflow: hidden; }
.resume-barre div { width: 0; height: 100%; background: #7fe3dc; border-radius: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.resume-lien { display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 700; color: #fff; text-decoration: none; opacity: .92; }
.resume-lien:hover { opacity: 1; text-decoration: underline; }

/* Courbe des scores (toujours sur le fond sombre de l'en-tête) */
.courbe { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.courbe-titre { font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.78); margin-bottom: 4px; }
.courbe-zone { position: relative; min-height: 40px; }
.courbe-zone svg { display: block; overflow: visible; touch-action: pan-y; }
.courbe-grille { stroke: rgba(255,255,255,.13); stroke-width: 1; }
.courbe-base { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.courbe-axe { fill: rgba(255,255,255,.6); font-size: 10px; font-weight: 600; }
.courbe-aire { fill: rgba(127,227,220,.14); }
.courbe-ligne { fill: none; stroke: #7fe3dc; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.courbe-point { fill: #7fe3dc; stroke: #0b3a6c; stroke-width: 2; pointer-events: none; }
.courbe-cible { fill: transparent; cursor: pointer; }
.courbe-valeur { position: absolute; right: 0; font-size: .78rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.courbe-bulle { position: absolute; z-index: 3; padding: 6px 10px; border-radius: 10px; background: #fff; color: #0f1b2d; font-size: .76rem; line-height: 1.35; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45); pointer-events: none; }
.courbe-bulle span { color: #5a6a80; }
.courbe-vide { margin: 4px 0 2px; font-size: .8rem; color: rgba(255,255,255,.72); }
.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; }

/* ---------- Accueil : séries en cours ---------- */
.en-cours { margin-bottom: 26px; }
.liste-en-cours { display: flex; flex-direction: column; gap: 10px; }
.serie-en-cours { display: flex; background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--primaire); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.sec-principal { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.sec-principal:hover { background: var(--surface-2); }
.sec-titre { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-info { font-size: .8rem; color: var(--texte-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sec-barre { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.sec-barre span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primaire), var(--accent)); }
.sec-abandon { width: 52px; flex-shrink: 0; border: 0; border-left: 1px solid var(--bord); background: transparent; color: var(--texte-2); font-size: 1rem; }
.sec-abandon:hover { color: var(--ko); background: var(--ko-fond); }

/* ---------- Accueil : modes ---------- */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.mode-tuile {
  --t: var(--primaire);
  text-align: left; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; background: var(--surface);
  display: flex; flex-direction: column; gap: 3px; min-height: 128px; box-shadow: var(--ombre);
  position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mode-tuile::after { content: "→"; position: absolute; top: 14px; right: 14px; color: var(--texte-2); font-weight: 700; opacity: .5; transition: transform .15s, opacity .15s, color .15s; }
.mode-tuile:hover { transform: translateY(-2px); box-shadow: var(--ombre-haute); border-color: color-mix(in srgb, var(--t) 45%, var(--bord)); }
.mode-tuile:hover::after { transform: translateX(3px); opacity: 1; color: var(--t); }
.mode-tuile:active { transform: scale(.98); }
.tuile-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); margin-bottom: 8px; }
.tuile-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tuile-texte { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.tuile-titre { font-weight: 750; font-size: 1rem; }
.tuile-desc { font-size: .78rem; color: var(--texte-2); line-height: 1.35; }
.tuile-examen { --t: #fff; background: linear-gradient(145deg, var(--primaire-2), var(--primaire)); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .tuile-examen { background: linear-gradient(145deg, #0b4f8f, #1670c7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tuile-examen { background: linear-gradient(145deg, #0b4f8f, #1670c7); } }
.tuile-examen .tuile-icone { background: rgba(255,255,255,.16); }
.tuile-examen .tuile-desc, .tuile-examen::after { color: rgba(255,255,255,.82); }
.tuile-examen:hover { border-color: transparent; }
.tuile-cas { --t: var(--violet); }
.tuile-revoir { --t: var(--orange); }
.tuile-revoir.vide { --t: var(--texte-2); }
.tuile-revoir.vide .tuile-titre { color: var(--texte-2); }
.tuile-mixte { --t: var(--accent); }
.tuile-theme { --t: var(--primaire); }
.tuile-large { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; min-height: 0; padding: 18px; }
.tuile-large .tuile-icone { width: 50px; height: 50px; margin-bottom: 0; flex-shrink: 0; }
.tuile-large .tuile-texte { margin-top: 0; }
.tuile-large .tuile-titre { font-size: 1.08rem; }
.tuile-large::after { top: 50%; transform: translateY(-50%); }
.tuile-large:hover::after { transform: translate(3px, -50%); }

/* ---------- Vues secondaires (choix du thème, progression) ---------- */
.entete-vue { display: flex; align-items: center; gap: 14px; padding: 20px 0 20px; }
.entete-vue h1 { font-size: 1.35rem; font-weight: 800; }
.sous-titre-vue { margin: 2px 0 0; font-size: .86rem; color: var(--texte-2); }
a.btn-icone { color: var(--texte); text-decoration: none; }
.btn-theme-droite { margin-left: auto; }
.liste-themes { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: 12px; }
.theme-carte { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-1); transition: border-color .15s, box-shadow .15s, transform .15s; }
.theme-carte:hover { border-color: color-mix(in srgb, var(--primaire) 45%, var(--bord)); box-shadow: var(--ombre); transform: translateY(-1px); }
.theme-carte:active { transform: scale(.99); }
.theme-icone { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.3rem; background: var(--surface-2); border-radius: 12px; }
.theme-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.theme-nom { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.theme-prog { display: flex; align-items: center; gap: 10px; }
.theme-barre { flex: 1; height: 5px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.theme-barre span { display: block; height: 100%; border-radius: 5px; background: var(--primaire); }
.theme-pct { min-width: 3.2em; text-align: right; font-size: .74rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.theme-fleche { font-size: 1.6rem; line-height: 1; color: var(--texte-2); }

.stats-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.stat-carte { display: flex; flex-direction: column; padding: 14px 16px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-1); }
.stat-carte .stat-v { font-size: 1.5rem; font-weight: 800; color: var(--primaire); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-carte .stat-l { font-size: .78rem; color: var(--texte-2); }
.onglets { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; background: var(--surface-2); border: 1px solid var(--bord); border-radius: 14px; }
.onglet { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 10px; padding: 9px 4px; font-weight: 700; font-size: .84rem; color: var(--texte-2); }
.onglet.actif { background: var(--surface); color: var(--primaire); box-shadow: var(--ombre-1); }
.prog-sous { margin-top: 5px; font-size: .78rem; color: var(--texte-2); }
.legende { margin: 0 0 16px; font-size: .8rem; color: var(--texte-2); }
.zone-reset { text-align: center; padding: 4px 0 20px; }



/* ---------- Boutons ---------- */
.btn { border: 0; border-radius: var(--rayon-s); padding: 10px 18px; font-weight: 700; min-height: 44px; transition: background .15s, transform .1s, box-shadow .15s; }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn-large { width: 100%; min-height: 54px; font-size: 1rem; }
.btn-petit { min-height: 38px; padding: 6px 14px; font-size: .86rem; }
.btn-primaire { background: var(--primaire); color: var(--sur-primaire); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primaire) 70%, transparent); }
.btn-primaire:hover:not(:disabled) { background: var(--primaire-2); }
.btn-primaire:disabled { background: var(--surface-2); color: var(--texte-2); border: 1px solid var(--bord); box-shadow: none; }
.btn-secondaire { background: var(--primaire-doux); color: var(--primaire); }
.btn-secondaire:hover { background: color-mix(in srgb, var(--primaire) 18%, var(--surface)); }
.btn-lien { background: transparent; color: var(--texte-2); }
.btn-lien:hover { color: var(--texte); background: var(--surface-2); }
#btn-reset { margin-top: 6px; color: var(--ko); }
#btn-reset:hover { background: var(--ko-fond); }

/* ---------- Progression / listes ---------- */
.prog-ligne { margin-bottom: 14px; }
.prog-ligne:last-child { margin-bottom: 0; }
.prog-tete { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; font-weight: 550; margin-bottom: 6px; }
.prog-chiffres { color: var(--texte-2); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.barre { height: 8px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.barre-fill { height: 100%; background: var(--primaire); border-radius: 8px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.barre-fill.bon { background: var(--ok); } .barre-fill.moyen { background: var(--moyen); } .barre-fill.faible { background: var(--ko); }
b.bon, .bon { color: var(--ok); } b.moyen { color: var(--moyen); } b.faible, .faible { color: var(--ko); }
.liste-simple { list-style: none; padding: 0; margin: 0 0 8px; }
.liste-simple li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--bord); font-size: .88rem; }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple b { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .82rem; padding: 3px 9px; border-radius: 20px; background: var(--surface-2); }
.liste-simple b.bon { background: var(--ok-fond); } .liste-simple b.moyen { background: var(--moyen-fond); } .liste-simple b.faible { background: var(--ko-fond); }
.liste-simple small { color: var(--texte-2); }
.vide-txt { color: var(--texte-2); font-size: .9rem; text-align: center; padding: 14px; margin: 0 0 8px; background: var(--surface-2); border-radius: var(--rayon-s); }

/* ---------- Quiz ---------- */
.barre-quiz {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 0; margin-bottom: 4px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.barre-centre { flex: 1; min-width: 0; }
.compteur { font-weight: 750; font-size: .9rem; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.progress { height: 8px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--primaire), var(--accent)); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.chrono { font-weight: 750; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--bord); padding: 7px 11px; border-radius: 11px; font-size: .88rem; white-space: nowrap; box-shadow: var(--ombre-1); }
.chrono.urgent { color: var(--ko); border-color: var(--ko); background: var(--ko-fond); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .65; } }

.question-zone { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; margin-bottom: 12px; scroll-margin-top: 76px; animation: entree .25s ease-out; }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag { font-size: .71rem; font-weight: 650; background: var(--surface-2); color: var(--texte-2); padding: 4px 9px; border-radius: 20px; line-height: 1.3; }
.tag-theme { background: var(--primaire-doux); color: var(--primaire); }
.enonce { font-size: 1.06rem; font-weight: 600; line-height: 1.6; }
.enonce.petit { font-size: .92rem; font-weight: 500; margin-bottom: 8px; }
.consigne { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--texte-2); margin: 14px 0 14px; }
.consigne .multi { color: var(--moyen); }

.options { display: flex; flex-direction: column; gap: 10px; }
.option { position: relative; display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; padding: 13px 14px; min-height: 54px; border: 1.5px solid var(--bord); border-radius: 14px; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.option:hover:not(.verrou) { border-color: color-mix(in srgb, var(--primaire) 55%, var(--bord)); background: color-mix(in srgb, var(--primaire-doux) 40%, var(--surface)); }
.lettre { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 750; font-size: .84rem; background: var(--surface-2); color: var(--texte-2); border: 1px solid var(--bord); transition: background .15s, color .15s; }
.option:not(.multiple) .lettre { border-radius: 50%; }
.opt-txt { flex: 1; padding-top: 3px; font-size: .95rem; min-width: 0; overflow-wrap: anywhere; }
.opt-txt pre { font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.option.choisie { border-color: var(--primaire); background: var(--primaire-doux); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 14%, transparent); }
.option.choisie .lettre { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }
.option.verrou { cursor: default; box-shadow: none; }
.option.verrou:not(.correcte):not(.fausse):not(.manquee) { opacity: .6; }
.option.correcte, .option.fausse, .option.manquee { padding-right: 42px; }
.option.correcte::after, .option.fausse::after, .option.manquee::after { position: absolute; right: 14px; top: 14px; font-weight: 800; font-size: 1rem; }
.option.correcte { border-color: var(--ok); background: var(--ok-fond); }
.option.correcte .lettre { background: var(--ok); border-color: var(--ok); color: #fff; }
.option.correcte::after { content: "✓"; color: var(--ok); }
.option.fausse { border-color: var(--ko); background: var(--ko-fond); }
.option.fausse .lettre { background: var(--ko); border-color: var(--ko); color: #fff; }
.option.fausse::after { content: "✕"; color: var(--ko); }
.option.manquee { border-color: var(--ok); border-style: dashed; }
.option.manquee .lettre { background: var(--ok); border-color: var(--ok); color: #fff; }
.option.manquee::after { content: "✓"; color: var(--ok); opacity: .6; }

.feedback { margin-top: 16px; border-radius: 14px; padding: 14px 16px; font-size: .93rem; border: 1px solid; animation: entree .25s ease-out; }
.feedback.ok { background: var(--ok-fond); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.feedback.ko { background: var(--ko-fond); border-color: color-mix(in srgb, var(--ko) 35%, transparent); }
.fb-titre { font-weight: 800; font-size: 1.02rem; margin-bottom: 8px; }
.feedback.ok .fb-titre { color: var(--ok); } .feedback.ko .fb-titre { color: var(--ko); }
.fb-bonne { margin-bottom: 10px; }
.fb-bonne ul { margin: 4px 0 0; padding-left: 20px; }
.fb-expl { line-height: 1.6; }
.feedback .fb-expl { background: var(--surface); border-radius: 10px; padding: 10px 12px; }

.actions-quiz { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }

/* ---------- Résultats ---------- */
.resultat-principal { text-align: center; padding-top: 26px; background: radial-gradient(90% 70% at 50% 0%, var(--primaire-doux), var(--surface) 70%); }
.jauge { --c: var(--primaire); width: 168px; height: 168px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--c) 60%, transparent); }
.jauge.bon { --c: var(--ok); } .jauge.moyen { --c: var(--moyen); } .jauge.faible { --c: var(--ko); }
.jauge-int { width: 136px; height: 136px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.jauge-score { font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.jauge-score small { font-size: 1rem; color: var(--texte-2); font-weight: 600; }
.jauge-pct { font-size: .95rem; font-weight: 700; color: var(--texte-2); margin-top: 5px; }
.res-libelle { font-weight: 700; font-size: 1.02rem; }
.res-mention { display: inline-block; font-size: .86rem; margin: 8px 0 18px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }
.res-mention.bon { color: var(--ok); background: var(--ok-fond); } .res-mention.moyen { color: var(--moyen); background: var(--moyen-fond); } .res-mention.faible { color: var(--ko); background: var(--ko-fond); }
.res-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.res-chiffres div { background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.res-chiffres b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.res-chiffres span { font-size: .74rem; color: var(--texte-2); }

.erreur { border: 1px solid var(--bord); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.erreur[open] { border-color: var(--bord-fort); }
.erreur summary { padding: 12px 14px; cursor: pointer; font-size: .9rem; font-weight: 600; list-style: none; line-height: 1.5; display: block; }
.erreur summary:hover { background: var(--surface-2); }
.erreur summary::-webkit-details-marker { display: none; }
.erreur summary::before { content: "›"; display: inline-block; width: 1em; color: var(--texte-2); font-weight: 800; transition: transform .15s; }
.erreur[open] summary::before { transform: rotate(90deg); }
.erreur-corps { padding: 2px 14px 14px; font-size: .9rem; }
.err-rep { border-radius: 10px; padding: 9px 12px; margin: 8px 0; border-left: 3px solid; }
.err-rep.ko { background: var(--ko-fond); border-color: var(--ko); } .err-rep.ok { background: var(--ok-fond); border-color: var(--ok); }
.actions-resultats { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--texte); color: var(--bg); padding: 11px 18px; border-radius: 14px; font-size: .9rem; font-weight: 600; z-index: 20; max-width: calc(100% - 32px); box-shadow: var(--ombre-haute); animation: entree .2s ease-out; }


/* ---------- Écrans plus larges ---------- */
@media (min-width: 620px) {
  .hero { padding: 26px 28px 24px; margin-top: 20px; }
  .hero h1 { font-size: 1.6rem; }
  .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode-tuile { min-height: 140px; padding: 16px; }
  .tuile-large { min-height: 0; padding: 20px 22px; }
  .liste-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grille { grid-template-columns: repeat(4, 1fr); }
  .carte { padding: 22px; }
  .question-zone { padding: 26px; }
  .enonce { font-size: 1.12rem; }
  .actions-resultats { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }