/* Quizlet — refonte 1a : colonne unique, bleu froid, Helvetica, rayon léger.
   Remplace static/css/quiz.css.

   Deux couches :
   1. les écrans participant migrés (classes .topbar / .stage / .panel / .option…)
   2. les écrans admin encore sur l'ancien balisage (.wrap, .table, .q-block…),
      restylés avec les mêmes tokens — rien à toucher côté admin pour l'instant.

   Mode sombre : tout passe par des variables. Il s'active automatiquement avec la
   préférence système, et se force avec <html data-theme="dark"> ou "light". */

:root {
  --ink: #14181F;
  --ink-soft: #4A5160;
  --muted: #6B7280;
  --paper: #FFFFFF;
  --shell: #F6F7F9;
  --line: #DDE3EE;
  --line-soft: #F1F3F8;
  --line-strong: #C3CEE6;
  --accent: #2F5BEA;
  --accent-dark: #1E3FB0;
  --accent-soft: #EDF1FE;
  --accent-pale: #A9BCF7;
  --accent-row: #F8FAFE;
  --ok: #0F7A5A;
  --ok-soft: #E8F5EF;
  --ok-ink: #0B5B43;
  --bad: #C13B2E;
  --bad-soft: #FBEEEB;
  --bad-ink: #8E2C21;
  --on-accent: #FFFFFF;
  --code-bg: #14181F;
  --code-fg: #E7EBF3;
  --sunken: #F8F9FC;
  --chip: #F1F3F8;
  --chip-hover: #E7ECF7;
  --btn-bg: #14181F;
  --btn-fg: #FFFFFF;
  --btn-bg-hover: #000000;
  --ring: 0 0 0 3px rgba(47, 91, 234, 0.12);
  --ring-strong: 0 0 0 3px rgba(47, 91, 234, 0.18);
  --overlay: rgba(20, 24, 31, 0.5);
  --r: 6px;
  --r-lg: 8px;
  --font: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* Palette sombre. Activée par <html data-theme="dark">, posée par le script de bascule
   depuis localStorage. Pas de détection système : le défaut est le mode clair. */
:root[data-theme="dark"] {
  --ink: #E7EBF3;
  --ink-soft: #A9B1C2;
  --muted: #7C879C;
  --paper: #191E27;
  --shell: #0F1319;
  --line: #2A313D;
  --line-soft: #222834;
  --line-strong: #3A4353;
  --accent: #5B82F5;
  --accent-dark: #8CA8F9;
  --accent-soft: #1B2540;
  --accent-pale: #33477F;
  --accent-row: #171F31;
  --ok: #3FBF92;
  --ok-soft: #142A22;
  --ok-ink: #7FD9B6;
  --bad: #F0705F;
  --bad-soft: #2C1917;
  --bad-ink: #F3A79A;
  --on-accent: #0B1020;
  --code-bg: #0A0D12;
  --code-fg: #DDE3EE;
  --sunken: #12161D;
  --chip: #232A36;
  --chip-hover: #2E3644;
  --btn-bg: #E7EBF3;
  --btn-fg: #14181F;
  --btn-bg-hover: #FFFFFF;
  --ring: 0 0 0 3px rgba(91, 130, 245, 0.22);
  --ring-strong: 0 0 0 3px rgba(91, 130, 245, 0.32);
  --overlay: rgba(5, 7, 11, 0.66);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code, pre, .mono { font-family: var(--mono); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.m-0 { margin: 0; }
.lead { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; margin: 0 0 4px; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 12px; }

/* ======================================================================
   1. Écrans participant
   ====================================================================== */

.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar { background: var(--paper); border-bottom: 1px solid var(--line); }

.topbar-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 16px; }

.edition { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.brand { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }

.tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 4px 8px;
}

.link-quiet { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.link-quiet:hover { color: var(--accent); }

/* --- Bascule clair / sombre -------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  min-height: 34px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); }

.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}

.theme-toggle[aria-pressed="true"] .theme-dot { background: var(--accent); border-color: var(--accent); }

/* --- Avancement : barre unique, segments cliquables ---------------------- */

.progress-bar { background: var(--paper); border-bottom: 1px solid var(--line); }

.progress-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.progress-count { font-size: 13px; font-weight: 600; }
.progress-saved { font-size: 13px; color: var(--muted); }

.progress-track { display: flex; gap: 4px; }

.progress-seg {
  flex: 1;
  height: 22px;
  display: block;
  position: relative;
  border-radius: 3px;
}

.progress-seg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  transition: background 120ms ease;
}

.progress-seg.is-done::after { background: var(--accent); }
.progress-seg.is-current::after { background: var(--accent-pale); }
.progress-seg:hover::after { background: var(--accent-dark); }

.progress-seg-label {
  position: absolute;
  left: 0; right: 0; top: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 120ms ease;
}

.progress-seg:hover .progress-seg-label,
.progress-seg.is-current .progress-seg-label { opacity: 1; }
.progress-seg.is-current .progress-seg-label { color: var(--accent); font-weight: 700; }

/* --- Colonne de lecture ------------------------------------------------- */

.stage { flex: 1; display: flex; justify-content: center; padding: 40px 24px 56px; }

.column {
  width: 100%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.column-wide { max-width: 820px; }

.page-head { display: flex; flex-direction: column; gap: 6px; }

.question { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; text-wrap: pretty; }

.code-block {
  margin: 0;
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 18px 20px;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  line-height: 1.7;
  overflow-x: auto;
}

/* --- Choix -------------------------------------------------------------- */

.options { display: grid; gap: 10px; }
.options form { margin: 0; }

.option,
.option-btn {
  width: 100%;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.option:hover,
.option-btn:hover { border-color: var(--line-strong); }
.option:hover .option-letter,
.option-btn:hover .option-letter { background: var(--chip-hover); color: var(--ink-soft); }

.option:focus-visible,
.option-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-strong);
}

.option.is-selected,
.option-btn.selected {
  border: 1.5px solid var(--accent);
  box-shadow: var(--ring);
  padding: 15.5px 17.5px;
  font-weight: 600;
}

.option-letter,
.option-btn .option-letter {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--r);
  background: var(--chip);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option.is-selected .option-letter,
.option-btn.selected .option-letter { background: var(--accent); color: var(--on-accent); }

.option-text { flex: 1; }

.option-flag {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* --- Navigation -------------------------------------------------------- */

.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.btn-spacer { display: block; }
.remaining { font-size: 13px; color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r);
  padding: 12px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }

.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-primary:hover { background: var(--accent-dark); color: var(--on-accent); }

.btn-ghost { background: var(--paper); color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }

.btn-small { padding: 8px 12px; min-height: 34px; font-size: 12.5px; }
.btn-block { width: 100%; }

.btn-danger { background: var(--bad); color: #FFFFFF; border-color: transparent; }
.btn-danger:hover { background: var(--bad-ink); color: #FFFFFF; }

/* --- Récap avant envoi ------------------------------------------------- */

.recap {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recap-note {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
}

.recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.recap-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 14px;
}

.recap-num { flex: none; font-size: 11px; color: var(--muted); }
.recap-link { flex: 1; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-link:hover { color: var(--accent); }
.recap-answered { flex: none; font-size: 12px; font-weight: 700; color: var(--accent); }

/* --- Encarts ---------------------------------------------------------- */

.callout {
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.callout strong { font-weight: 700; }
.callout-error { background: var(--bad-soft); color: var(--bad-ink); }
.callout-ok { background: var(--ok-soft); color: var(--ok-ink); }

/* --- Panneaux et lignes ----------------------------------------------- */

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

.panel-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.panel-title { font-size: 15px; font-weight: 700; }
.panel-note { font-size: 13px; color: var(--muted); }
.panel-empty { padding: 22px; font-size: 13.5px; color: var(--muted); }

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
}

.row:last-child { border-bottom: none; }
.row.is-me { background: var(--accent-row); }

.row-rank { flex: none; width: 26px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.row.is-me .row-rank { color: var(--accent); font-weight: 700; }
.row-name { flex: 1; font-size: 14.5px; font-weight: 600; min-width: 0; }
.row-name a { color: var(--ink); }
.row-name a:hover { color: var(--accent); }
.row-you { font-size: 12px; font-weight: 600; color: var(--accent); }
.row-num { flex: none; font-family: var(--mono); font-size: 13px; text-align: right; }
.row-num-w { width: 62px; }
.row-cell { flex: none; font-size: 13px; color: var(--muted); text-align: right; }
.row-cell-w { width: 74px; }
.row-link { flex: none; font-size: 13px; font-weight: 600; }

.meter { flex: none; width: 180px; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.meter > span { display: block; height: 8px; width: 0; border-radius: 4px; background: var(--accent); }
.meter-soft > span { background: var(--accent-pale); }

.delta { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--bad); }
.delta-new { color: var(--muted); font-size: 11px; text-transform: uppercase; }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 7px;
  background: var(--chip);
  color: var(--ink-soft);
}

.badge-OPEN, .badge-IN_PROGRESS, .badge-open { background: var(--accent); color: var(--on-accent); }
.badge-CLOSED, .badge-closed { background: var(--chip); color: var(--ink-soft); }
.badge-DRAFT { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* --- Corrigé ---------------------------------------------------------- */

.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review.is-right { border-left-color: var(--ok); }
.review.is-wrong { border-left-color: var(--bad); }

.review-head { display: flex; align-items: baseline; gap: 12px; }
.review-num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.review-title { flex: 1; font-size: 16px; font-weight: 600; }
.review-verdict { font-size: 12px; font-weight: 700; }
.review.is-right .review-verdict { color: var(--ok); }
.review.is-wrong .review-verdict { color: var(--bad); }

.review-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.review-options li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--sunken);
  color: var(--muted);
}

.review-options li.correct-option { background: var(--ok-soft); color: var(--ok-ink); font-weight: 600; }
.review-options li.wrong-option { background: var(--bad-soft); color: var(--bad-ink); font-weight: 600; }
.review-flag { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.review-explain { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

/* --- Chiffres clés ---------------------------------------------------- */

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; }

.stat {
  flex: 1 1 150px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}

.stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 10px; }
.stat-value { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat-unit { font-size: 13px; color: var(--muted); }

/* --- Formulaires ------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 6px; }

label, .label, .field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.input, .textarea,
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
textarea, select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px;
  min-height: 48px;
}

.textarea, textarea { font-family: var(--mono); font-size: 13.5px; min-height: 200px; resize: vertical; line-height: 1.6; }

.input:focus, .textarea:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; min-height: 0; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.form-actions .go-next { margin-left: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions-spaced { margin: 4px 0; }

/* Deux boutons côte à côte, de libellés inégaux : ils se partagent la ligne en parts
   égales plutôt que de prendre chacun la largeur de son texte. */
.actions-equal .btn { flex: 1 1 0; }

/* --- Mobile ---------------------------------------------------------- */

@media (max-width: 640px) {
  .topbar-inner, .progress-inner { padding-left: 18px; padding-right: 18px; }
  .topbar-inner { flex-wrap: wrap; gap: 8px 14px; }
  .stage { padding: 22px 18px 40px; }
  h1, .question { font-size: 22px; line-height: 1.3; }
  .code-block { font-size: 12px; padding: 14px; }
  .option, .option-btn { min-height: 52px; padding: 15px 16px; }
  .option.is-selected, .option-btn.selected { padding: 14.5px 15.5px; }
  .progress-saved { display: none; }
  .nav-row .btn-primary { flex: 1; }
  .stat { flex-basis: 100%; }
  .meter { display: none; }
  .row { gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
  .panel-head { padding: 14px 16px; }
  .row-cell-w { width: auto; }
  .two-cols { grid-template-columns: 1fr; }
}

/* ======================================================================
   2. Écrans admin — classes historiques, mêmes tokens
   ====================================================================== */

.wrap { max-width: 820px; margin: 0 auto; padding: 32px 24px 56px; }

/* Deux ou trois enfants : le second est poussé à droite, la bascule le suit.
   Le cas à deux enfants rend exactement comme avant. */
.masthead { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.masthead > *:nth-child(2) { margin-left: auto; }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; font-weight: 700; color: var(--accent); }
.kicker.muted { color: var(--muted); }
.rule { height: 1px; background: var(--line); margin-bottom: 28px; }
.form-actions + .rule { margin-top: 24px; }

.label { font-family: var(--font); font-size: 13px; letter-spacing: 0; margin-bottom: 6px; }
.label-gap { margin-top: 18px; }
.label-inline { display: inline; }
.title-link { color: var(--ink); font-weight: 600; }
.title-link:hover { color: var(--accent); }

/* --- Respiration des formulaires admin ---------------------------------
   Un champ ne colle ni à son libellé ni au bouton qui le suit. Les rangées
   composées (.pin-row, .opt-row) remettent la marge à zéro, plus bas. */
.wrap .label, .wrap label { margin-bottom: 9px; }
.wrap .input, .wrap .textarea,
.wrap input[type="text"], .wrap input[type="password"],
.wrap input[type="number"], .wrap input[type="date"],
.wrap textarea, .wrap select { margin-bottom: 22px; }
/* Une rangée composée tient la place d'un champ : elle porte donc la même marge, sur la
   rangée et non sur ses enfants. Sur le bouton, cette marge serait retranchée de sa hauteur
   étirée (align-items: stretch) : il redeviendrait plus court que le champ d'à côté. */
.wrap .pin-row { margin-bottom: 22px; }
.wrap .two-cols { row-gap: 0; }          /* la marge des champs fait déjà l'interligne */
.wrap .form-actions { margin-top: 14px; gap: 12px; }
.wrap .actions { gap: 12px; }
.wrap .q-head { flex-wrap: wrap; }
.wrap h2 { margin-top: 38px; }

/* --- Boutons de largeur uniforme ---------------------------------------
   Les barres d'actions s'alignent quelle que soit la longueur du libellé.
   Les puces — numéros de position, « × » — gardent leur largeur naturelle. */
.wrap .btn { min-width: 220px; }
.wrap .btn-small { min-width: 124px; }
.wrap .btn-block { min-width: 0; }
/* Rangée composée : le champ garde la priorité. Le bouton prend sa largeur
   naturelle, peut rétrécir avec la rangée, et ne dépasse jamais la moitié —
   il ne peut donc plus être plus large que le champ qu'il accompagne. */
.wrap .pin-row .btn { min-width: 0; flex: 0 1 auto; max-width: 50%; }

.wrap nav.actions .btn,
.wrap .opt-remove { min-width: 0; }
.modal .actions .btn { flex: 1 1 0; }

/* Bandeau de numéros de question : il ne colle ni à ce qui le précède ni à ce qui le suit,
   partout où il apparaît — saisie d'une question comme page d'une édition. */
.wrap nav.actions { margin: 14px 0 30px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 32px; }
.pin-value { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.season-link { margin-right: 10px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.table td { padding: 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }

.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pin-row { display: flex; gap: 8px; }
.pin-row .input { margin-bottom: 0; flex: 1 1 0; min-width: 0; }

.q-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin: 0 0 14px;
}

.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.q-number { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.opt-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.opt-row .input { margin-bottom: 0; }

.q-view { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 14px; }
.opt-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.opt-list li { display: flex; gap: 12px; align-items: center; font-size: 14px; padding: 10px 12px; border-radius: var(--r); background: var(--sunken); color: var(--muted); }
.opt-list li.correct-option { background: var(--ok-soft); color: var(--ok-ink); font-weight: 600; }

.options-grid { display: grid; gap: 10px; margin: 18px 0; }
.quiz-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.question-title { margin-top: 26px; }
.import-details { margin-top: 34px; }
.import-details form { margin-top: 12px; }
.import-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* Listes de la page d'import : les erreurs à corriger, puis le rappel du format. */
.import-errors, .import-rules { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.import-errors li { font-family: var(--mono); font-size: 12.5px; }
.import-rules { margin-top: 12px; }
.import-rules li { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

.big-num { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.big-num-total { font-size: 18px; color: var(--muted); font-weight: 600; }
.progress { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.progress-fill { height: 6px; border-radius: 3px; width: 0; background: var(--accent); transition: width .3s ease; }

#options { display: grid; gap: 10px; margin: 18px 0; }

.modal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
  max-width: 32rem;
}

.modal::backdrop { background: var(--overlay); }
.modal-message { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; }

/* Étroit : deux boutons de 220px ne tiennent plus côte à côte — chacun prend
   la ligne entière, ce qui les garde de même largeur. */
@media (max-width: 640px) {
  .wrap .toolbar .btn,
  .wrap .form-actions .btn,
  .wrap .actions .btn:not(.btn-small) { flex: 1 1 100%; min-width: 0; }
}