/* ==========================================================================
   Quiz JEHC — feuille de styles commune (HTML/CSS, sans framework)
   --------------------------------------------------------------------------
   Thème par défaut   : .qz            → direction A « salle de formation »
   Variante           : .qz.tv         → direction B « quiz télé »
   Marque blanche     : redéfinir --brand et --accent sur l'élément .qz,
                        ex. <div class="qz" style="--brand:#004B87;--accent:#E30613">
                        Toutes les teintes dérivées (fonds doux, textes d'accent)
                        sont calculées avec color-mix().
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
.qz {
  --brand: #0D2B4E;
  --accent: #C4962A;
  --brand-ink: #FFFFFF;
  --accent-ink: #0D2B4E;
  --accent-text: color-mix(in oklab, var(--accent) 58%, #000);
  --brand-soft: color-mix(in oklab, var(--brand) 9%, #fff);
  --accent-soft: color-mix(in oklab, var(--accent) 16%, #fff);

  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #F4F5F7;
  --track: #E2E6EC;
  --ink: #0D2B4E;
  --ink-2: #33445C;
  --muted: #5B6472;
  --line: #D7DCE3;
  --line-strong: #A9B2BF;
  --bar: #8D97A5;

  --ok: #17784A;   --ok-bg: #E5F2EB;   --ok-ink: #FFFFFF;
  --ko: #B42318;   --ko-bg: #FBEAE8;   --ko-ink: #FFFFFF;
  --part: #A84F0B; --part-bg: #FCEFE1; --part-ink: #FFFFFF;

  --sel: var(--brand);
  --sel-bg: var(--brand-soft);
  --sel-ink: var(--brand-ink);

  /* couleurs d'appariement (association) — toutes lisibles avec du blanc */
  --pc1: #1D4ED8; --pc2: #0F766E; --pc3: #7C3AED;
  --pc4: #B45309; --pc5: #BE185D; --pc6: #4D7C0F;

  /* couleurs d'option (utilisées par .tv uniquement) */
  --o1: #E5484D; --o2: #3E63DD; --o3: #F5B417; --o4: #2B9A66; --o5: #9B51E0;

  --code-bg: #FFFFFF;
  --code-ink: #0D2B4E;

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --font: 'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-long: 'Libre Baskerville', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --w-display: 700;
  --track-display: -0.01em;

  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.qz *, .qz *::before, .qz *::after { box-sizing: inherit; }

.qz.tv {
  --brand: #4B2FD6;
  --accent: #FFC21A;
  --brand-ink: #FFFFFF;
  --accent-ink: #17113A;
  --accent-text: var(--accent);
  --bg: color-mix(in oklab, var(--brand) 30%, #07051A);
  --surface: color-mix(in oklab, var(--brand) 46%, #0B0826);
  --surface-2: color-mix(in oklab, var(--brand) 36%, #0B0826);
  --brand-soft: color-mix(in oklab, var(--brand) 60%, #0B0826);
  --accent-soft: color-mix(in oklab, var(--accent) 20%, #0B0826);
  --track: rgba(255, 255, 255, .14);
  --ink: #FFFFFF;
  --ink-2: #E6E2FF;
  --muted: #BDB6EC;
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .34);
  --bar: rgba(255, 255, 255, .5);

  --ok: #2EDC8A;   --ok-bg: rgba(46, 220, 138, .16);  --ok-ink: #062A18;
  --ko: #FF6B70;   --ko-bg: rgba(255, 107, 112, .16); --ko-ink: #2D0608;
  --part: #FFB224; --part-bg: rgba(255, 178, 36, .16); --part-ink: #2B1A00;

  --sel: var(--accent);
  --sel-bg: var(--accent-soft);
  --sel-ink: var(--accent-ink);

  --code-bg: #0A0722;
  --code-ink: #E8EDF5;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;

  --font: 'Inter', system-ui, sans-serif;
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-long: var(--font);
  --w-display: 800;
  --track-display: -0.02em;
}

/* ---------- 2. Utilitaires ---------------------------------------------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 28px; height: 28px; }
.mono, .qz code { font-family: var(--mono); }
.qz code { font-size: .94em; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* Logo (remplaçable en marque blanche) */
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo-mark { fill: var(--brand); }
.logo-jh { fill: var(--accent); font: 700 13px var(--font); letter-spacing: 0; }
.tv .logo-mark { fill: #fff; }
.tv .logo-jh { fill: var(--brand); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font: 600 12px/1 var(--font); letter-spacing: .02em; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.badge .ic { width: 14px; height: 14px; }
.badge-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge-ko { background: var(--ko-bg); color: var(--ko); border-color: transparent; }
.badge-part { background: var(--part-bg); color: var(--part); border-color: transparent; }
.badge-brand { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.badge-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.badge-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ko); }

/* ---------- 3. Boutons --------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r); border: 1px solid transparent; font: 600 15px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.tv .btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-lg { min-height: 56px; font-size: 17px; width: 100%; border-radius: var(--r-lg); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn[disabled], .btn.is-disabled { opacity: .42; cursor: not-allowed; }

/* ---------- 4. Champs ---------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 600 14px/1.2 var(--font); color: var(--ink-2); }
.input { width: 100%; height: 64px; padding: 0 18px; border: 2px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: 600 22px/1 var(--font); }
.input::placeholder { color: var(--muted); font-weight: 500; }
.input:focus, .input.is-focus { outline: none; border-color: var(--sel); box-shadow: 0 0 0 4px var(--sel-bg); }
.room-chip { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.room-chip b { font: 700 22px/1 var(--mono); letter-spacing: .14em; color: var(--ink); }
.room-chip span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.room-chip a { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.input-code { height: 84px; font: 700 34px/1 var(--mono); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; text-align: center; }
.field-err { font-size: 13px; color: var(--ko); font-weight: 600; }

/* ---------- 5. Option de QCM (participant) ------------------------------ */
.opts { display: flex; flex-direction: column; gap: 12px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: 500 18px/1.3 var(--font); text-align: left; cursor: pointer; }
.opt-key { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font: 700 16px/1 var(--font); }
.opt-label { flex: 1; min-width: 0; }
.opt-tag { flex: none; font: 700 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.opt-mark { flex: none; display: grid; place-items: center; }
.opt.is-selected { border-color: var(--sel); background: var(--sel-bg); }
.opt.is-selected .opt-key { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); }
.opt.is-locked { cursor: default; }
.opt.is-locked:not(.is-selected) { opacity: .45; }
.opt.is-correct { border-color: var(--ok); background: var(--ok-bg); }
.opt.is-correct .opt-key { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.opt.is-correct .opt-tag, .opt.is-correct .opt-mark { color: var(--ok); }
.opt.is-wrong { border-color: var(--ko); background: var(--ko-bg); }
.opt.is-wrong .opt-key { background: var(--ko); border-color: var(--ko); color: var(--ko-ink); }
.opt.is-wrong .opt-tag, .opt.is-wrong .opt-mark { color: var(--ko); }
.opt.is-dim { opacity: .45; }
/* quiz télé : pastilles colorées par option */
.tv .opt { border-width: 3px; font-weight: 600; }
.tv .opt-key { border: 0; color: #fff; font-family: var(--font-display); font-weight: 800; }
.tv .k1 .opt-key { background: var(--o1); }
.tv .k2 .opt-key { background: var(--o2); }
.tv .k3 .opt-key { background: var(--o3); color: #1B1446; }
.tv .k4 .opt-key { background: var(--o4); }
.tv .k5 .opt-key { background: var(--o5); }

/* ---------- 6. Option de QCM (projection) ------------------------------- */
.popts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.popt { display: flex; align-items: center; gap: 24px; min-height: 124px; padding: 20px 28px; border: 3px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: 600 40px/1.2 var(--font); }
.popt-key { flex: none; width: 76px; height: 76px; display: grid; place-items: center; border-radius: var(--r); background: var(--brand); color: var(--brand-ink); font: 800 38px/1 var(--font-display); }
.popt-label { flex: 1; min-width: 0; }
.popt-mark { flex: none; color: var(--ok); }
.popt.is-correct { border-color: var(--ok); background: var(--ok-bg); }
.popt.is-correct .popt-key { background: var(--ok); color: var(--ok-ink); }
.popt.is-dim { opacity: .38; }
.tv .popt { border: 0; color: #fff; }
.tv .popt.k1 { background: var(--o1); }
.tv .popt.k2 { background: var(--o2); }
.tv .popt.k3 { background: var(--o3); color: #1B1446; }
.tv .popt.k4 { background: var(--o4); }
.tv .popt.k5 { background: var(--o5); }
.tv .popt-key { background: rgba(0, 0, 0, .24); color: inherit; }
.tv .popt.is-correct { outline: 6px solid var(--ok); outline-offset: 6px; }
.tv .popt.is-correct .popt-key { background: rgba(0, 0, 0, .24); color: inherit; }
.tv .popt-mark { color: inherit; }

/* ---------- 7. Association --------------------------------------------- */
/* 7a. tap-tap (mobile) : deux colonnes de boutons */
.asso { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px; align-items: start; }
.asso-col { display: flex; flex-direction: column; gap: 10px; }
.asso-h { font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 2px 2px; }
.term, .target { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: 500 15px/1.3 var(--font); text-align: left; cursor: pointer; }
.term { font: 700 15px/1.2 var(--mono); }
.term-label, .target-label { flex: 1; min-width: 0; }
.term.is-armed { border-color: var(--sel); background: var(--sel-bg); box-shadow: 0 0 0 4px var(--sel-bg); }
.target.is-awaiting { border-style: dashed; border-color: var(--sel); }
.term.is-paired, .target.is-paired { border-color: var(--pc); background: color-mix(in oklab, var(--pc) 9%, var(--surface)); }
.pair-n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--pc); color: #fff; font: 700 13px/1 var(--font); }
.pc1 { --pc: var(--pc1); } .pc2 { --pc: var(--pc2); } .pc3 { --pc: var(--pc3); }
.pc4 { --pc: var(--pc4); } .pc5 { --pc: var(--pc5); } .pc6 { --pc: var(--pc6); }
.tv .term, .tv .target { border-width: 3px; }

/* 7b. glisser-déposer (PC) */
.dnd { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.bank { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); min-height: 120px; }
.chip-term { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 14px 8px 8px; border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 700 15px/1.2 var(--mono); cursor: grab; }
.chip-term .ic { color: var(--muted); }
.chip-term.is-dragging { opacity: .35; border-style: dashed; }
.chip-term.is-ghost { border-color: var(--sel); box-shadow: 0 0 0 4px var(--sel-bg); transform: rotate(-2deg); cursor: grabbing; }
.drops { display: flex; flex-direction: column; gap: 10px; }
.drop { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.slot { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 12px; border: 2px dashed var(--line-strong); border-radius: var(--r); color: var(--muted); font-size: 13px; }
.slot.is-over { border-style: solid; border-color: var(--sel); background: var(--sel-bg); color: var(--ink); }
.slot.is-filled { padding: 0; border: 0; }
.drop-def { font-size: 16px; line-height: 1.4; }

/* 7c. projection */
.passo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 16px 64px; }
.pcol { display: flex; flex-direction: column; gap: 16px; }
.pterm, .pdef { display: flex; align-items: center; gap: 20px; min-height: 84px; padding: 12px 22px; border: 3px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font: 600 30px/1.2 var(--font); }
.pterm { font: 700 30px/1.2 var(--mono); }
.pkey { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r); background: var(--brand); color: var(--brand-ink); font: 800 26px/1 var(--font-display); }
.pdef .pkey { background: transparent; color: var(--ink); border: 3px solid var(--line-strong); }
.tv .pterm { background: var(--brand); border-color: transparent; }
.tv .pkey { background: var(--accent); color: var(--accent-ink); }
.tv .pdef .pkey { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* rangée de révélation (projection) */
.prows { display: flex; flex-direction: column; gap: 14px; }
.prow { display: grid; grid-template-columns: 300px 40px minmax(0, 1fr) 300px; align-items: center; gap: 18px; }
.prow .pterm, .prow .pdef { min-height: 76px; font-size: 28px; }
.prow-arrow { color: var(--muted); }

/* ---------- 8. Trou (liste à choix) ------------------------------------- */
.code { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--code-bg); color: var(--code-ink); font: 500 15px/2.1 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.code-lg { padding: 36px 44px; font-size: 34px; line-height: 2; }
.proj .code { background: var(--surface-2); }
.tok-k { color: #1D4ED8; } .tok-s { color: #8A4B00; } .tok-f { color: #0F766E; } .tok-n { color: #A3330F; } .tok-c { color: #6B7280; }
.tv .code { border-color: transparent; }
.tv .tok-k { color: #8CB8FF; } .tv .tok-s { color: #F0C674; } .tv .tok-f { color: #7FD6C2; } .tv .tok-n { color: #F5A97F; } .tv .tok-c { color: #8A96A8; }

.gap { position: relative; display: inline-flex; vertical-align: middle; }
.gap-select { -webkit-appearance: none; appearance: none; min-width: 6.4em; min-height: 40px; padding: .2em 2em .2em .6em; border: 2px solid var(--accent); border-radius: var(--r-sm); background: #fff; color: #0D2B4E; font: 700 1em/1.2 var(--mono); cursor: pointer; }
.gap-select:focus, .gap.is-focus .gap-select { outline: 3px solid var(--accent); outline-offset: 2px; }
.gap .ic { position: absolute; right: .5em; top: 50%; transform: translateY(-50%); width: 1em; height: 1em; pointer-events: none; color: #0D2B4E; }
.gap.is-empty .gap-select { border-style: dashed; color: #5B6472; font-weight: 500; background: color-mix(in oklab, var(--accent) 12%, #fff); }
.gap.is-locked .gap-select { border-color: #A9B2BF; cursor: default; }
.gap.is-locked .ic { display: none; }
.gap.is-locked .gap-select { padding-right: .6em; }

.gap-res { display: inline-flex; align-items: center; gap: .35em; padding: .05em .5em; border-radius: var(--r-sm); font: 700 1em/1.5 var(--mono); vertical-align: middle; }
.gap-res .ic { width: .9em; height: .9em; stroke-width: 3; }
.gap-res.is-correct { background: var(--ok); color: var(--ok-ink); }
.gap-res.is-wrong { background: var(--ko); color: var(--ko-ink); }
.gap-res.is-wrong s { opacity: .85; }
.gap-fix { display: inline-flex; align-items: center; padding: .05em .5em; border-radius: var(--r-sm); border: 2px solid var(--ok); background: var(--ok-bg); color: var(--ok); font: 700 1em/1.4 var(--mono); vertical-align: middle; }

/* trou vide en projection */
.gap-blank { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-width: 4.4em; height: 1.45em; padding: 0 .35em; border: 3px dashed var(--accent); border-radius: var(--r-sm); vertical-align: middle; }
.gap-n { flex: none; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 .62em/1 var(--font); }
.choices { display: flex; flex-direction: column; gap: 14px; font: 500 26px/1.3 var(--font); color: var(--ink-2); }
.choices li { display: flex; align-items: center; gap: 16px; }
.choices code { font-weight: 700; color: var(--ink); }

/* ---------- 9. Chrono --------------------------------------------------- */
/* circonférence r=45 : 282.74 → stroke-dashoffset = 282.74 × (1 − restant/total) */
.timer { position: relative; width: var(--ts, 64px); height: var(--ts, 64px); flex: none; }
.timer svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: var(--track); stroke-width: 8; }
.timer-fill { fill: none; stroke: var(--brand); stroke-width: 8; stroke-dasharray: 282.74; }
.tv .timer-fill { stroke: var(--accent); stroke-linecap: round; }
.timer-val { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font: 700 calc(var(--ts, 64px) * .34)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.timer.is-low .timer-fill { stroke: var(--ko); }
.timer.is-low .timer-val { color: var(--ko); }
.timer.is-done .timer-fill { stroke: transparent; }
.timer-md { --ts: 72px; }
.timer-lg { --ts: 200px; }
.timer-lg .timer-track, .timer-lg .timer-fill { stroke-width: 9; }
.timer-mini { --ts: 18px; }
.timer-mini .timer-track, .timer-mini .timer-fill { stroke-width: 16; }

/* chrono discret (participant) */
.chrono { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font: 700 14px/1 var(--font); font-variant-numeric: tabular-nums; }
.chrono.is-low { background: var(--ko-bg); color: var(--ko); border-color: transparent; }
.chrono.is-low .timer-fill { stroke: var(--ko); }

/* ---------- 10. Jauge de réponses -------------------------------------- */
.gauge { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gauge-txt { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted); }
.gauge-txt b { color: var(--ink); font: 700 16px/1 var(--font); font-variant-numeric: tabular-nums; }
.gauge-bar { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.gauge-bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.tv .gauge-bar span { background: var(--accent); }
.gauge.is-complete .gauge-bar span { background: var(--ok); }
.gauge-lg { gap: 14px; }
.gauge-lg .gauge-txt { font-size: 28px; gap: 12px; }
.gauge-lg .gauge-txt b { font: var(--w-display) 48px/1 var(--font-display); }
.gauge-lg .gauge-bar { height: 18px; }

/* ---------- 11. Histogramme & taux de réussite ------------------------- */
.histo { display: flex; align-items: stretch; gap: var(--hg, 32px); height: var(--hh, 360px); }
.histo-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.histo-val { font: 700 26px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
.histo-val small { font-size: .7em; font-weight: 600; color: var(--muted); margin-left: 4px; }
.histo-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 2px solid var(--line-strong); }
.histo-bar { width: 100%; max-width: 150px; min-height: 4px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--bar); }
.histo-key { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r); background: var(--surface-2); border: 2px solid var(--line); color: var(--ink); font: 800 24px/1 var(--font-display); }
.histo-col.is-correct .histo-bar { background: var(--ok); }
.histo-col.is-correct .histo-key { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.histo-col.is-correct .histo-val { color: var(--ok); }
.tv .histo-col.k1 .histo-bar { background: var(--o1); }
.tv .histo-col.k2 .histo-bar { background: var(--o2); }
.tv .histo-col.k3 .histo-bar { background: var(--o3); }
.tv .histo-col.k4 .histo-bar { background: var(--o4); }
.tv .histo-col.k5 .histo-bar { background: var(--o5); }
.tv .histo.is-revealed .histo-col:not(.is-correct) { opacity: .4; }
.histo-sm { --hh: 160px; --hg: 14px; }
.histo-sm .histo-val { font-size: 14px; }
.histo-sm .histo-key { width: 30px; height: 30px; font-size: 14px; border-width: 1px; }

.rate { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rate-bar { flex: 1; height: 12px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.rate-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.rate-val { min-width: 3.4em; text-align: right; font: 700 16px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
.rate.is-low .rate-bar span { background: var(--part); }
.rate.is-low .rate-val { color: var(--part); }
.rate-lg .rate-bar { height: 22px; }
.rate-lg .rate-val { font-size: 30px; }

/* ---------- 12. Verdict & explication ----------------------------------- */
.verdict { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid; border-radius: var(--r-lg); }
.verdict-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.verdict-ic .ic { width: 24px; height: 24px; stroke-width: 2.6; }
.verdict-t { margin: 0; font: var(--w-display) 22px/1.1 var(--font-display); letter-spacing: var(--track-display); }
.verdict-s { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.verdict.ok { border-color: var(--ok); background: var(--ok-bg); }
.verdict.ok .verdict-ic { background: var(--ok); color: var(--ok-ink); }
.verdict.ok .verdict-t { color: var(--ok); }
.verdict.ko { border-color: var(--ko); background: var(--ko-bg); }
.verdict.ko .verdict-ic { background: var(--ko); color: var(--ko-ink); }
.verdict.ko .verdict-t { color: var(--ko); }
.verdict.part { border-color: var(--part); background: var(--part-bg); }
.verdict.part .verdict-ic { background: var(--part); color: var(--part-ink); }
.verdict.part .verdict-t { color: var(--part); }
.tv .verdict { border-width: 3px; }
.tv .verdict-t { font-size: 26px; }

.explain { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.explain-h { margin: 0 0 6px; font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.explain p { margin: 0; font: 400 15px/1.6 var(--font-long); color: var(--ink); }
.explain-lg { padding: 26px 32px; }
.explain-lg .explain-h { font-size: 18px; margin-bottom: 12px; }
.explain-lg p { font-size: 28px; line-height: 1.45; }

.lock-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--brand-soft); color: var(--ink); font: 600 15px/1.3 var(--font); }
.lock-note .ic { color: var(--brand); }
.tv .lock-note { background: var(--accent-soft); }
.tv .lock-note .ic { color: var(--accent); }

/* ---------- 13. Écran participant — téléphone -------------------------- */
.phone { width: 390px; height: 844px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tv .p-top { background: transparent; }
.p-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-who b { font: 700 14px/1 var(--mono); letter-spacing: .14em; }
.p-who span { font-size: 13px; color: var(--muted); }
.p-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.p-foot { padding: 12px 16px 22px; background: var(--surface); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.tv .p-foot { background: var(--surface-2); }
.q-kicker { margin: 0; font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.q-title { margin: 0; font: var(--w-display) 22px/1.3 var(--font-display); letter-spacing: var(--track-display); color: var(--ink); }
.tv .q-title { font-size: 24px; }
.hint { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.answered { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.answered b { color: var(--ink); }

/* attente */
.wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 24px; text-align: center; }
.wait h1 { margin: 0; font: var(--w-display) 26px/1.25 var(--font-display); letter-spacing: var(--track-display); }
.wait p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.dots { display: flex; gap: 10px; }
.dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: qz-pulse 1.4s ease-in-out infinite; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes qz-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.count-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font: 600 15px/1 var(--font); }
.count-pill b { font-variant-numeric: tabular-nums; }

/* ---------- 14. Écran participant — fenêtre PC ------------------------- */
.pc { min-height: 800px; display: flex; flex-direction: column; background: var(--bg); }
.pc-top { background: var(--surface); border-bottom: 1px solid var(--line); }
.tv .pc-top { background: transparent; }
.pc-top-in { max-width: 880px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pc-main { width: 100%; max-width: 880px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 22px; }
.pc-main .q-title { font-size: 28px; }
.pc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.pc-actions .btn { min-width: 220px; }

/* ---------- 15. Écran de projection (16:9) ----------------------------- */
.proj { width: 1600px; height: 900px; display: flex; flex-direction: column; gap: 30px; padding: 40px 72px 44px; background: var(--surface); overflow: hidden; }
.tv .proj { background: var(--bg); }
.proj-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--accent); font: 600 22px/1 var(--font); color: var(--muted); }
.tv .proj-head { border-bottom-color: var(--line); }
.proj-head .logo { font-size: 15px; }
.proj-join { display: flex; align-items: center; gap: 14px; }
.proj-join b { padding: 8px 14px; border-radius: var(--r); background: var(--brand); color: var(--brand-ink); font: 700 24px/1 var(--mono); letter-spacing: .14em; }
.tv .proj-join b { background: var(--accent); color: var(--accent-ink); }
.proj-kicker { margin: 0 0 12px; font: 700 20px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.proj-q { margin: 0; max-width: 1200px; font: var(--w-display) 54px/1.15 var(--font-display); letter-spacing: var(--track-display); color: var(--ink); }
.proj-q code { font-size: .9em; }
.proj-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.proj-main { flex: 1; min-height: 0; display: flex; gap: 56px; }
.proj-foot { display: flex; align-items: center; gap: 40px; }
.proj-foot .gauge { flex: 1; }

.roomcode { font: 800 210px/1 var(--mono); letter-spacing: .06em; color: var(--brand); }
.tv .roomcode { color: var(--accent); }
.qr { flex: none; width: 260px; height: 260px; padding: 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.qr svg { display: block; width: 100%; height: 100%; }
.names { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px; }
.name { display: inline-flex; align-items: center; height: 58px; padding: 0 24px; border-radius: var(--r-pill); background: var(--surface-2); border: 2px solid var(--line); font: 600 26px/1 var(--font); color: var(--ink); }
.name.is-new { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- 16. Écran admin -------------------------------------------- */
.admin { min-height: 900px; display: flex; flex-direction: column; background: var(--bg); font-size: 14px; }
.a-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 12px 24px; background: var(--brand); color: var(--brand-ink); }
.a-top .logo { color: #fff; }
.a-top .logo-mark { fill: #fff; }
.a-top .logo-jh { fill: var(--brand); }
.a-session { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.a-session b { font-size: 15px; }
.a-session span { font-size: 13px; opacity: .78; }
.a-top-stats { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 13px; }
.a-top-stats b { font-variant-numeric: tabular-nums; }
.a-code { padding: 6px 10px; border-radius: var(--r); background: rgba(255, 255, 255, .14); font: 700 16px/1 var(--mono); letter-spacing: .14em; }
.a-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 16px 24px 24px; }
.a-side { flex: 1 1 260px; min-width: 0; }
.a-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.a-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.panel-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-h h2 { margin: 0; font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.panel-b { padding: 16px; }
.qlist { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.qitem { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); }
.qitem.is-current { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.qitem.is-done .qnum { background: var(--surface-2); color: var(--muted); }
.qnum { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--brand); color: var(--brand-ink); font: 700 13px/1 var(--font); }
.qitem-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qitem-s { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.qitem-r { font: 600 12px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.cur { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 16px; }
.cur-q { flex: 1 1 320px; min-width: 0; }
.cur-q h1 { margin: 6px 0 0; font: 700 20px/1.3 var(--font); }
.ctrls { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kpi { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.kpi b { display: block; font: 700 26px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi.ok b { color: var(--ok); } .kpi.ko b { color: var(--ko); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { padding: 9px 16px; text-align: left; font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 8px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .is-wait td { color: var(--muted); }
.tbl .r { text-align: right; }
.thumb { position: relative; width: 320px; max-width: 100%; height: 180px; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.thumb-in { width: 1600px; height: 900px; transform: scale(.2); transform-origin: 0 0; pointer-events: none; }
.dq { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: var(--r-sm); }
.dq .ic { width: 14px; height: 14px; stroke-width: 3; }
.dq.ok { background: var(--ok); color: var(--ok-ink); }
.dq.part { background: var(--part-bg); color: var(--part); box-shadow: inset 0 0 0 1px var(--part); }
.dq.ko { background: var(--ko-bg); color: var(--ko); }
.dqs { display: flex; gap: 4px; }

/* ---------- 17. Planche de composants ---------------------------------- */
.sheet { width: 1600px; min-height: 2900px; padding: 64px 72px 80px; display: flex; flex-direction: column; gap: 52px; background: var(--bg); }
.sheet-h h1 { margin: 0; font: var(--w-display) 44px/1.1 var(--font-display); letter-spacing: var(--track-display); }
.sheet-h p { margin: 10px 0 0; max-width: 900px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.sec { display: flex; flex-direction: column; gap: 18px; }
.sec-h { display: flex; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.sec-h h2 { margin: 0; font: 700 22px/1.2 var(--font-display); }
.sec-h span { font: 500 13px/1 var(--mono); color: var(--muted); }
.specs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 28px; }
.spec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.spec-l { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.swatch { width: 150px; display: flex; flex-direction: column; gap: 8px; }
.swatch i { display: block; height: 64px; border-radius: var(--r); border: 1px solid var(--line); }
.swatch b { font-size: 13px; }
.swatch code { font-size: 12px; color: var(--muted); }