/* ============================================================
   quiz.css — styles propres au Quiz.
   ============================================================ */

.quiz-box { min-width: 300px; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.quiz-progress { text-align: center; color: var(--text-soft); font-size: 14px; }
.quiz-q { font-size: 20px; font-weight: 600; text-align: center; }

.quiz-opts { display: grid; gap: 10px; }
.quiz-opt {
  text-align: left; font-size: 16px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.quiz-opt:hover:not([disabled]) { border-color: var(--accent); background: #2a316a; }
.quiz-opt[disabled] { cursor: default; }
.quiz-opt.chosen  { border-color: var(--accent); background: #2a316a; }
.quiz-opt.correct { border-color: var(--good); background: #1f4d3a; }
.quiz-opt.wrong   { border-color: var(--bad); background: #4d2030; }

.quiz-scores { text-align: center; font-size: 14px; }