/* ============================================================================
   app.css — SIS-cours, habillage par la CHARTE UTTOP.

   ⚠️ Ce fichier ne définit PLUS de palette. Il se charge APRÈS
   `assets/charte/css/uttop-charte.css` et ne fait que **traduire** les classes
   historiques de l'app (`.card`, `.btn`, `.pill`, `.q`…) dans le langage de la
   charte. Trois systèmes se disputaient le nom « charte UTTOP » — celui-ci a
   été rendu à son rôle : une couche de correspondance, pas une palette de plus.

   Règle : aucune couleur en dur. Toujours `var(--uttop-*)`.
   Accent : donné par `data-uttop-etab` (établissement) ou par la couleur du
   cours, posée en ligne (`--uttop-accent`) — cf. themes/uttop-etablissements.css.
   ============================================================================ */

/* Alias de compatibilité : du code ancien lit encore ces noms. */
:root {
  --blue: var(--uttop-navy);       --green: var(--uttop-green-ink);
  --purple: var(--uttop-indigo);   --bg: var(--uttop-bg);
  --surface: var(--uttop-surface); --ink: var(--uttop-ink);
  --muted: var(--uttop-ink-soft);  --line: var(--uttop-line);
  --line-strong: var(--uttop-line-strong);
  --ok: var(--uttop-green-ink);    --warn: var(--uttop-warning-ink);
  --err: var(--uttop-danger-ink);  --info: var(--uttop-info-ink);
  --radius: var(--uttop-r-md);     --radius-sm: var(--uttop-r-sm);
  --shadow: var(--uttop-sh-sm);
  --mono: var(--uttop-font-mono);  --sans: var(--uttop-font-body);
}

/* Utilitaires de l'app (le reset et l'atmosphère viennent de la charte). */
.pad { padding: var(--uttop-s5); }
.muted { color: var(--uttop-ink-soft); }
.small { font-size: var(--uttop-fs-sm); }
.center { text-align: center; }
.row { display: flex; gap: var(--uttop-s3); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }

/* ---- Bandeau de tête : le header institutionnel de la charte -------------- */
header.topbar {
  position: sticky; top: 0; z-index: 20; overflow: hidden;
  display: flex; align-items: center; gap: var(--uttop-s3);
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--uttop-s5) 12px;
  background: var(--uttop-grad-header); color: #fff;
  box-shadow: 0 6px 22px -12px rgba(7,41,74,.6);
}
header.topbar::after {                 /* signature : filet arc-en-ciel */
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--uttop-rainbow);
}
header.topbar::before {                /* filigrane : parallélogrammes fantômes */
  content: ""; position: absolute; right: -40px; top: -30px; width: 240px; height: 180px;
  background:
    linear-gradient(135deg, transparent 49%, rgba(255,255,255,.07) 50% 62%, transparent 63%),
    linear-gradient(135deg, transparent 64%, rgba(255,255,255,.05) 65% 80%, transparent 81%);
  transform: skewX(var(--uttop-skew)); pointer-events: none;
}
header.topbar .brand {
  font-family: var(--uttop-font-display); font-weight: var(--uttop-fw-black);
  letter-spacing: var(--uttop-tracking-display); font-size: var(--uttop-fs-lg);
}
header.topbar .brand small { font-weight: var(--uttop-fw-normal); opacity: .78; font-size: var(--uttop-fs-sm); }
header.topbar .role { margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: var(--uttop-fs-sm); opacity: .95; }
header.topbar a { color: #fff; }

/* ---- Conteneurs ----------------------------------------------------------
   `wrap` sert AUSSI de modificateur flex (.row.wrap) : scoper à main, sinon le
   conteneur de page s'applique à chaque barre d'outils. */
main.wrap { max-width: 1000px; margin: 0 auto; padding: var(--uttop-s6) var(--uttop-s4) var(--uttop-s8); }
main.wrap.narrow { max-width: 640px; }
main.wrap.wide { max-width: 1240px; }

/* ---- Cartes : surface papier, coin accent oblique, entrée échelonnée ------ */
.card {
  position: relative; overflow: hidden;
  background: var(--uttop-surface); border: 0; border-radius: var(--uttop-r-lg);
  box-shadow: var(--uttop-sh-md); padding: var(--uttop-s5); margin-bottom: var(--uttop-s4);
  animation: uttop-rise var(--uttop-t-slow) both;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 58px; height: 8px;
  background: var(--uttop-accent); border-bottom-right-radius: 8px;
}
.card.flat { box-shadow: var(--uttop-sh-sm); }
.card.flat::before { display: none; }
.card h2 { font-size: var(--uttop-fs-lg); margin: 0 0 var(--uttop-s2); }
main.wrap > *:nth-child(1) { animation-delay: .02s; }
main.wrap > *:nth-child(2) { animation-delay: .08s; }
main.wrap > *:nth-child(3) { animation-delay: .14s; }
main.wrap > *:nth-child(4) { animation-delay: .20s; }

/* ---- Boutons : pilules à dégradé, réaction au survol ---------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--uttop-s2);
  font: inherit; font-weight: var(--uttop-fw-bold); border: 0; cursor: pointer;
  padding: 11px 20px; border-radius: var(--uttop-r-pill);
  background: linear-gradient(135deg, var(--uttop-navy), var(--uttop-indigo));
  color: #fff; box-shadow: var(--uttop-sh-sm);
  transition: transform var(--uttop-t-fast), box-shadow var(--uttop-t-fast), filter var(--uttop-t-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--uttop-sh-md); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.btn.green  { background: linear-gradient(135deg, var(--uttop-green), var(--uttop-teal)); }
.btn.warn   { background: linear-gradient(135deg, var(--uttop-yellow), #e0a800); color: var(--uttop-navy-deep); }
.btn.danger { background: linear-gradient(135deg, var(--uttop-red), #c33d1c); }
.btn.ghost  { background: var(--uttop-surface); color: var(--uttop-navy);
              box-shadow: inset 0 0 0 2px var(--uttop-line-strong); }
.btn.ghost:hover { background: var(--uttop-surface-2); box-shadow: inset 0 0 0 2px var(--uttop-navy); }
.btn.sm { padding: 6px 13px; font-size: var(--uttop-fs-sm); }

/* ---- Champs -------------------------------------------------------------- */
label.field { display: block; margin-bottom: var(--uttop-s3);
  font-weight: var(--uttop-fw-bold); font-size: var(--uttop-fs-sm); color: var(--uttop-ink-2); }
label.field span { display: block; margin-bottom: 5px; }
input[type=text], input[type=search], input[type=number], select, textarea {
  width: 100%; font: inherit; padding: 11px 14px; color: var(--uttop-ink);
  background: var(--uttop-surface); border: 2px solid var(--uttop-line);
  border-radius: var(--uttop-r-sm); transition: border-color var(--uttop-t-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--uttop-line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--uttop-accent); box-shadow: var(--uttop-sh-focus);
}
textarea { resize: vertical; min-height: 90px; }
textarea.code, input.blank { font-family: var(--uttop-font-mono); }

/* ---- Pastilles ----------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px;
  border-radius: var(--uttop-r-pill); font-size: var(--uttop-fs-xs);
  font-weight: var(--uttop-fw-bold); background: var(--uttop-surface-2); color: var(--uttop-ink-soft); }
.pill.ok   { background: var(--uttop-success-soft); color: var(--uttop-green-ink); }
.pill.warn { background: var(--uttop-warning-soft); color: var(--uttop-yellow-ink); }
.pill.err  { background: var(--uttop-danger-soft);  color: var(--uttop-danger-ink); }
.pill.info { background: var(--uttop-info-soft);    color: var(--uttop-info-ink); }
.pill.live { background: var(--uttop-success-soft); color: var(--uttop-green-ink); }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--uttop-green-ink); animation: pulse 1.6s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,138,95,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(31,138,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,138,95,0); }
}

/* ---- Code ---------------------------------------------------------------- */
pre.code { background: var(--uttop-navy-deep); color: #e8f0f7; padding: 14px 16px;
  border-radius: var(--uttop-r-sm); overflow-x: auto; font-family: var(--uttop-font-mono);
  font-size: .9rem; line-height: 1.55; margin: 10px 0; white-space: pre;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
code.inline { font-family: var(--uttop-font-mono); background: var(--uttop-surface-2);
  padding: 1px 6px; border-radius: 5px; font-size: .9em; }

/* ---- Tableaux ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; font-size: var(--uttop-fs-sm); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--uttop-line); }
th { font-size: var(--uttop-fs-xs); text-transform: uppercase;
  letter-spacing: var(--uttop-tracking-caps); color: var(--uttop-ink-soft); }
tbody tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--uttop-surface-2); }

/* ---- Toast --------------------------------------------------------------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--uttop-navy-deep); color: #fff; padding: 12px 20px;
  border-radius: var(--uttop-r-pill); box-shadow: var(--uttop-sh-lg);
  z-index: 100; font-size: var(--uttop-fs-sm); font-weight: var(--uttop-fw-medium);
  animation: rise .22s cubic-bezier(.2,1.2,.4,1); }
.toast.err { background: linear-gradient(135deg, var(--uttop-red), #c33d1c); }
.toast.ok  { background: linear-gradient(135deg, var(--uttop-green-ink), var(--uttop-teal)); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- Lecteur d'examen ---------------------------------------------------- */
.exam-head { position: sticky; top: 56px; z-index: 15; background: var(--uttop-surface);
  border-radius: var(--uttop-r-lg); padding: 12px 16px; margin-bottom: var(--uttop-s4);
  box-shadow: var(--uttop-sh-md); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.timer { font-family: var(--uttop-font-mono); font-weight: var(--uttop-fw-bold); font-size: 1.05rem; }
.timer.low { color: var(--uttop-danger-ink); }
.timer.over { color: var(--uttop-yellow-ink); font-size: .95rem; }
.progress { flex: 1; min-width: 140px; height: 10px; background: var(--uttop-surface-3);
  border-radius: var(--uttop-r-pill); overflow: hidden; box-shadow: inset 0 1px 2px rgba(12,60,96,.12); }
.progress > i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--uttop-rainbow); background-size: 200% 100%;
  transition: width var(--uttop-t-slow); animation: uttop-shine 3s linear infinite; }

/* ---- Onglets ------------------------------------------------------------- */
.section-tabs { display: flex; gap: var(--uttop-s2); flex-wrap: wrap; margin-bottom: var(--uttop-s4); }
.section-tabs button {
  font: inherit; font-weight: var(--uttop-fw-bold); font-size: var(--uttop-fs-sm);
  padding: 8px 16px; border-radius: var(--uttop-r-pill); cursor: pointer;
  border: 0; box-shadow: inset 0 0 0 2px var(--uttop-line-strong);
  background: var(--uttop-surface); color: var(--uttop-ink-2);
  transition: transform var(--uttop-t-fast), box-shadow var(--uttop-t-fast); }
.section-tabs button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--uttop-navy); }
.section-tabs button.active {
  background: linear-gradient(135deg, var(--uttop-navy), var(--uttop-indigo));
  color: #fff; box-shadow: var(--uttop-sh-sm); }
.section-tabs button .dot { color: var(--uttop-green); }

/* ---- Questions ----------------------------------------------------------- */
.q { position: relative; background: var(--uttop-surface); border-radius: var(--uttop-r-lg);
  padding: 18px 20px; margin-bottom: var(--uttop-s3); box-shadow: var(--uttop-sh-sm); }
.q .qhead { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.q .qnum { font-family: var(--uttop-font-display); font-weight: var(--uttop-fw-black); color: var(--uttop-accent-ink); }
.q .qbareme { margin-left: auto; font-size: var(--uttop-fs-xs); color: var(--uttop-ink-soft); }
.q .prompt { font-weight: var(--uttop-fw-bold); font-size: var(--uttop-fs-lg);
  line-height: var(--uttop-lh-snug); margin-bottom: 6px; }
.q.answered  { box-shadow: var(--uttop-sh-sm), inset 5px 0 0 var(--uttop-green); }
.q.gr-ok      { box-shadow: var(--uttop-sh-sm), inset 5px 0 0 var(--uttop-green); }
.q.gr-bad     { box-shadow: var(--uttop-sh-sm), inset 5px 0 0 var(--uttop-red); }
.q.gr-partial { box-shadow: var(--uttop-sh-sm), inset 5px 0 0 var(--uttop-yellow); }
.q.gr-pending { box-shadow: var(--uttop-sh-sm), inset 5px 0 0 var(--uttop-yellow); background: #FFFCF2; }
.q.gr-empty   { box-shadow: var(--uttop-sh-sm), inset 5px 0 0 var(--uttop-line-strong); }
.gr-chip { font-size: var(--uttop-fs-xs); font-weight: var(--uttop-fw-bold);
  padding: 2px 9px; border-radius: var(--uttop-r-pill); }
.gr-chip.ok    { background: var(--uttop-success-soft); color: var(--uttop-green-ink); }
.gr-chip.bad   { background: var(--uttop-danger-soft);  color: var(--uttop-danger-ink); }
.gr-chip.warn  { background: var(--uttop-warning-soft); color: var(--uttop-yellow-ink); }
.gr-chip.muted { background: var(--uttop-surface-2);    color: var(--uttop-ink-soft); }

/* ---- Options : cibles franches, état choisi net -------------------------- */
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 15px;
  border-radius: var(--uttop-r-sm); margin: 8px 0; cursor: pointer;
  background: var(--uttop-surface); box-shadow: inset 0 0 0 2px var(--uttop-line);
  transition: box-shadow var(--uttop-t-fast), background var(--uttop-t-fast), transform var(--uttop-t-fast); }
.opt:hover { background: var(--uttop-surface-2); box-shadow: inset 0 0 0 2px var(--uttop-line-strong); }
.opt:has(input:checked), .opt.sel {
  background: var(--uttop-accent-soft); box-shadow: inset 0 0 0 2px var(--uttop-accent);
  transform: translateX(2px); }
.opt input { margin-top: 3px; accent-color: var(--uttop-accent); width: 18px; height: 18px; flex: none; }
.opt .otext { flex: 1; }
.opt .otext pre.code { margin: 0; }

.ordering-list { list-style: none; padding: 0; margin: 8px 0; }
.ordering-list li { display: flex; gap: 10px; align-items: center; padding: 10px 13px;
  border-radius: var(--uttop-r-sm); margin: 6px 0; background: var(--uttop-surface);
  box-shadow: inset 0 0 0 2px var(--uttop-line); }
.ordering-list li .handle { cursor: grab; color: var(--uttop-faint); }
.ordering-list .ord-btns { margin-left: auto; display: flex; gap: 4px; }

.fillblanks { font-family: var(--uttop-font-mono); font-size: .9rem;
  background: var(--uttop-navy-deep); color: #e8f0f7; padding: 14px 16px;
  border-radius: var(--uttop-r-sm); white-space: pre-wrap; line-height: 2.1; }
.fillblanks input.blank { display: inline-block; width: 9ch; padding: 1px 6px; margin: 0 2px;
  vertical-align: baseline; background: #17304F; color: #fff; border: 1px solid #3b5273;
  border-radius: 5px; font-family: var(--uttop-font-mono); }

/* ---- Bandeaux ------------------------------------------------------------ */
#banner { padding: 11px 16px; border-radius: var(--uttop-r-sm); margin-bottom: var(--uttop-s3);
  font-size: var(--uttop-fs-sm); font-weight: var(--uttop-fw-medium); display: flex; align-items: center; }
#banner.banner-warn { background: var(--uttop-warning-soft); color: var(--uttop-yellow-ink); }
#banner.banner-info { background: var(--uttop-info-soft); color: var(--uttop-info-ink); }
.save-state { font-size: var(--uttop-fs-xs); color: var(--uttop-ink-soft); }
.save-state.saved { color: var(--uttop-green-ink); }

/* ---- Régie : deux colonnes ----------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: var(--uttop-s4); }
@media (min-width: 1000px) { .split.two { grid-template-columns: 380px 1fr; } }
.bar { font-size: var(--uttop-fs-xs); }
.bar i { display: inline-block; height: 6px; border-radius: 3px; background: var(--uttop-green); vertical-align: middle; }

/* ---- Régie de séance ------------------------------------------------------
   label.field est display:block et select width:100% : sans plafond, chaque
   champ prend toute la largeur et la barre d'outils s'empile. */
#tab-seance .row > label.field { margin-bottom: 0; }
#tab-seance .row > label.field select { min-width: 200px; max-width: 320px; width: auto; }
#tab-seance .card > .row + .row { margin-top: var(--uttop-s3); }
#tab-seance #seInfo { margin: var(--uttop-s3) 0 0; font-family: var(--uttop-font-mono);
  font-size: var(--uttop-fs-xs); color: var(--uttop-ink-soft); }
#seQuestionState .prompt, #qBox .prompt { font-weight: var(--uttop-fw-bold); }

/* ---- QR de séance, plein écran (pour la projection) ------------------------
   Traitement repris de l'écran du séminaire recherche (`202607-seminaire-recherche-uttop/
   3-code/ecran/ecran.css`, .ec-qr-frame / .ec-qr-cap) : le QR reste NOIR SUR BLANC dans
   une carte blanche arrondie, posée sur un fond sombre. C'est le cadre qui fait le style,
   jamais les modules.

   Pourquoi on n'habille pas le QR lui-même (pas de logo au centre, pas de dégradé) : la
   correction d'erreur du générateur vendorisé est en niveau M (~15 %). Un logo mange des
   modules, et l'échec ne se voit qu'au moment où trente téléphones essaient à la fois, du
   fond d'un amphi, sur un vidéoprojecteur au contraste inconnu. Le coût est asymétrique. */
.qr-plein { position: fixed; inset: 0; z-index: 90; padding: var(--uttop-s5);
  display: grid; place-items: center; overflow: auto;
  color: #eaf1f8;
  background:
    radial-gradient(50vw 50vw at 85% -10%, rgba(74, 91, 212, .25), transparent 60%),
    radial-gradient(45vw 45vw at -5% 10%, rgba(61, 190, 139, .22), transparent 60%),
    linear-gradient(160deg, #07294a, #0c3c60 55%, #0a3358); }
.qr-plein.hidden { display: none; }
.qr-boite { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--uttop-s4); max-width: min(94vw, 760px); }
.qr-code { background: #fff; padding: clamp(14px, 2.4vh, 26px); border-radius: 24px;
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .6); }
.qr-code svg { display: block; width: min(52vh, 74vw, 460px); height: auto; }
/* `color` explicite : `h2` porte ailleurs une couleur d'encre sombre, et l'héritage
   depuis .qr-plein ne la surpasse pas — le titre sortait noir sur bleu nuit. */
.qr-titre { margin: 0; color: #ffffff;
  font-size: clamp(1.3rem, 3.4vw, 2.1rem); font-weight: 800; line-height: 1.15; }
.qr-legende { margin: 0; font-size: clamp(.95rem, 1.9vw, 1.2rem); color: #bcd0e2; }
/* L'adresse en toutes lettres : un téléphone sans appareil photo, une caméra qui refuse,
   un élève qui voit l'écran de biais — il faut toujours un second chemin. */
.qr-url { margin: 0; font-weight: 800; color: #fff; letter-spacing: .01em;
  font-size: clamp(1.1rem, 2.8vw, 1.7rem); word-break: break-all; }
.qr-plein .btn { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }

/* Colonne de gauche de l'onglet Séance : `.split.two` est une grille, ses enfants sont
   des COLONNES. Empiler deux cartes y demande donc un conteneur, pas une troisième carte. */
.sis-colonne { display: flex; flex-direction: column; gap: var(--uttop-s4); }
/* Le QR à demeure : assez grand pour être scanné depuis le premier rang en se penchant,
   assez petit pour ne pas manger l'écran. Fond blanc en dur, comme en projection. */
.qr-petit { background: #fff; border-radius: 14px; padding: 12px; margin-top: var(--uttop-s3);
  display: grid; place-items: center; }
.qr-petit svg { display: block; width: 100%; max-width: 210px; height: auto; }
#seQrUrl { margin-top: var(--uttop-s2); font-family: var(--uttop-font-mono); text-align: center; }

/* ============================================================
   CORRECTION DE COPIE — côté élève (02/09)
   ------------------------------------------------------------
   Le bloc qui redescend sous chaque question en mode révision :
   sa réponse, l'attendue, l'explication de la banque et le
   commentaire de l'enseignant. Jusqu'ici la correction restait
   dans `grades/`, invisible de celui qu'elle concerne.
   ============================================================ */
.correction { margin-top: var(--uttop-s3); padding: 12px 14px; border-radius: var(--uttop-r-md);
  border-left: 4px solid var(--uttop-ink-soft); background: var(--uttop-surface-alt, #f6f7f9); }
.correction.ok      { border-left-color: var(--uttop-green-ink);   background: var(--uttop-success-soft); }
.correction.ko      { border-left-color: var(--uttop-error-ink, #b23a18); background: var(--uttop-error-soft, #fdeee9); }
.correction.attente { border-left-color: var(--uttop-yellow-ink);  background: var(--uttop-warning-soft); }
.correction p { margin: 0 0 6px; }
.correction p:last-child { margin-bottom: 0; }
.corr-verdict { font-weight: var(--uttop-fw-bold); }
.corr-pts { font-weight: normal; color: var(--uttop-ink-soft); }
.corr-l { font-size: var(--uttop-fs-sm); }
.corr-exp { font-size: var(--uttop-fs-sm); line-height: 1.5; padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,.12); }
.corr-com { font-size: var(--uttop-fs-sm); font-style: italic; }

/* ============================================================
   RÉUSSITE PAR QUESTION — côté enseignant (02/09)
   ============================================================ */
.stat-q { padding: 10px 0; border-bottom: 1px solid var(--uttop-line, #e6e6e6); }
.stat-q:last-child { border-bottom: 0; }
.stat-head { display: flex; gap: 10px; align-items: baseline; }
.stat-head .stat-id { font-family: var(--uttop-font-mono); font-size: var(--uttop-fs-xs);
  color: var(--uttop-ink-soft); }
.stat-head .stat-score { margin-left: auto; font-weight: var(--uttop-fw-bold); white-space: nowrap; }
.stat-prompt { font-size: var(--uttop-fs-sm); margin: 4px 0 8px; }
.stat-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--uttop-surface-alt, #eee); margin-bottom: 8px; }
.stat-bar > i { display: block; height: 100%; }
.stat-bar > i.j { background: var(--uttop-green-ink); }
.stat-bar > i.f { background: var(--uttop-error-ink, #b23a18); }
.stat-bar > i.a { background: var(--uttop-yellow-ink); }
.stat-opt { display: flex; gap: 8px; align-items: baseline; font-size: var(--uttop-fs-xs);
  padding: 2px 0; }
.stat-opt .n { font-family: var(--uttop-font-mono); min-width: 2.2em; text-align: right; }
.stat-opt.bonne { color: var(--uttop-green-ink); font-weight: var(--uttop-fw-bold); }
.stat-opt.piege { color: var(--uttop-error-ink, #b23a18); }

/* Question poussée puis CORRIGÉE (03/09) — l'option attendue est marquée, celle
   qu'on a cochée est jugée. Le bloc `.correction` est partagé avec l'examen. */
.opt-bonne  { outline: 2px solid var(--uttop-green-ink); outline-offset: 1px; }
.opt-juste  { background: var(--uttop-success-soft); }
.opt-fausse { background: var(--uttop-error-soft, #fdeee9); text-decoration: line-through; }

/* Question corrigée repliée : on garde le verdict et le bouton, on masque l'énoncé et
   les options — la question reste à l'écran jusqu'à ce que l'enseignant la close, et
   elle n'a pas à manger tout l'écran d'un téléphone. */
#qBox.replie > *:not(.correction):not(button) { display: none; }
#qBox.replie .corr-exp { display: none; }