/* =========================================================
   Revisly — page « Quiz »
   (se charge par-dessus dashboard.css, qui fournit l'ossature
   et les éléments partagés : en-tête, puces, état vide)
   ========================================================= */

/* ---------- séries ---------- */
.series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.serie{
  display:flex;flex-direction:column;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:14px;padding:18px;min-width:0;
  transition:border-color .15s,background .15s;
}
.serie:hover{border-color:var(--border-fort);background:var(--surface-hover)}
.serie .row{display:flex;align-items:center;gap:10px}
.serie .tag{border:.8px solid var(--surface-border);border-radius:999px;padding:1px 9px;font-size:.6875rem;color:var(--ink-secondary)}
.serie .score{
  margin-left:auto;font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;
  padding:2px 9px;border-radius:999px;white-space:nowrap;
}
.score.bien{background:rgba(78,163,90,.18);color:var(--ink-ok);border:.8px solid rgba(78,163,90,.4)}
.score.moyen{background:rgba(201,162,39,.16);color:var(--ink-warn);border:.8px solid rgba(201,162,39,.4)}
.score.faible{background:rgba(207,86,71,.16);color:var(--ink-ko);border:.8px solid rgba(207,86,71,.4)}
.score.vierge{background:var(--surface-soft);color:var(--ink-tertiary);border:.8px solid var(--surface-border)}

.serie h3{margin-top:12px;font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.serie .meta{margin-top:6px;display:flex;align-items:center;gap:12px;font-size:.75rem;color:var(--ink-tertiary);flex-wrap:wrap}
.serie .meta span{display:flex;align-items:center;gap:5px}
.serie .meta svg{width:13px;height:13px}
.serie .go{margin-top:auto;padding-top:16px}
.serie .go .btn{width:100%}

/* ---------- déroulé du quiz ---------- */
.run{max-width:720px;margin:0 auto;width:100%}

.run-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.run-top .lbl{min-width:0}
.run-top .lbl b{display:block;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-top .lbl span{font-size:.75rem;color:var(--ink-tertiary)}
.run-bar{flex:1;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.run-bar i{display:block;height:100%;border-radius:999px;background:var(--sky);transition:width .35s ease}
.run-count{font-size:.8125rem;color:var(--ink-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}

.qcard{
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:18px;padding:28px;
}
.qcard .role{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-tertiary)}
.qcard h2{margin-top:10px;font-size:1.25rem;font-weight:600;line-height:1.45;letter-spacing:-.01em}

.options{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 16px;border-radius:12px;font-size:.9375rem;
  background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-primary);
  transition:background .15s,border-color .15s;
}
.option:hover:not(:disabled){background:var(--surface-soft-hover);border-color:var(--border-fort)}
.option:disabled{cursor:default}
.option .key{
  flex:none;width:24px;height:24px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;
  background:var(--track);border:.8px solid var(--surface-border);color:var(--ink-secondary);
}
.option .txt{min-width:0}
.option .mark{margin-left:auto;flex:none;width:18px;height:18px;opacity:0}
.option .mark svg{width:18px;height:18px}

.option.pick{border-color:var(--sky);background:var(--sky-tint)}
.option.pick .key{background:var(--sky);border-color:var(--sky);color:#fff}
.option.bon{border-color:var(--moss);background:rgba(78,163,90,.16)}
.option.bon .key{background:var(--moss);border-color:var(--moss);color:#fff}
.option.bon .mark{opacity:1;color:var(--ink-ok)}
.option.faux{border-color:var(--blush);background:rgba(207,86,71,.14)}
.option.faux .key{background:var(--blush);border-color:var(--blush);color:#fff}
.option.faux .mark{opacity:1;color:var(--ink-ko)}

.feedback{
  margin-top:18px;border-radius:12px;padding:14px 16px;
  border:.8px solid var(--surface-border);background:var(--surface-soft);
}
.feedback b{display:flex;align-items:center;gap:8px;font-size:.9375rem}
.feedback b svg{width:16px;height:16px}
.feedback p{margin-top:6px;font-size:.875rem;line-height:1.6;color:var(--ink-secondary)}
.feedback.bon{border-color:rgba(78,163,90,.45);background:rgba(78,163,90,.12)}
.feedback.bon b{color:var(--ink-ok)}
.feedback.faux{border-color:rgba(207,86,71,.45);background:rgba(207,86,71,.1)}
.feedback.faux b{color:var(--ink-ko)}

.run-actions{margin-top:18px;display:flex;align-items:center;gap:12px}
.run-actions .btn{min-width:170px}
.run-hint{margin-left:auto;font-size:.75rem;color:var(--ink-tertiary)}

/* ---------- résultat ---------- */
.result{max-width:640px;margin:0 auto}
.result-head{
  text-align:center;background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:18px;padding:32px 28px;
}
.gauge{position:relative;width:140px;height:140px;margin:0 auto 18px}
.gauge svg{width:140px;height:140px;transform:rotate(-90deg)}
.gauge .track{stroke:var(--track)}
.gauge .fill{stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.gauge .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .mid b{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.gauge .mid span{margin-top:3px;font-size:.6875rem;color:var(--ink-tertiary)}
.result-head h2{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.result-head .sub{margin-top:8px;font-size:.875rem;color:var(--ink-secondary)}

.review{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.review-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:12px;padding:12px 14px;
}
.review-row .st{
  flex:none;width:22px;height:22px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.review-row .st svg{width:13px;height:13px;color:#fff}
.review-row.bon .st{background:var(--moss)}
.review-row.faux .st{background:var(--blush)}
.review-row .q{font-size:.875rem;font-weight:500;line-height:1.45}
.review-row .a{margin-top:4px;font-size:.8125rem;color:var(--ink-tertiary)}
.review-row .a b{color:var(--ink-ok);font-weight:600}

.result .actions{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.result .actions .btn{width:100%}

@media (prefers-reduced-motion: reduce){
  .run-bar i,.gauge .fill,.option{transition:none}
}

@media (max-width:1180px){
  .series{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .series{grid-template-columns:1fr}
  .qcard{padding:22px}
  .qcard h2{font-size:1.125rem}
}
@media (max-width:640px){
  .run-top .lbl{display:none}
  .run-actions{flex-direction:column;align-items:stretch}
  .run-actions .btn{width:100%}
  .run-hint{margin-left:0;text-align:center}
}