/* ============================================================
   QUIZ d'orientation — annesoeapas.fr
   DA du site (tokens.css). Contrastes WCAG 2.2 AA vérifiés (G6) :
   texte charbon ≥ 16:1 / tags brun sur menthe ≥ 7:1 / barre brun sur menthe ≥ 3:1.
   Cibles tactiles ≥ 44px (SC 2.5.8). Chargé seulement sur /trouver-mon-accompagnement/.
   ============================================================ */

.quiz-section { padding-block: var(--section-py); }

/* Largeur de lecture confortable (le quiz est étroit, ≠ pleine largeur de page) */
#quiz { max-width: 40rem; }

/* --- Carte (étape) --- */
.quiz-card {
  background: var(--bg);
  border: 1px solid var(--color-peche);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.quiz-card h1 { margin-bottom: var(--space-2); }

.quiz-lede { margin-bottom: var(--space-3); font-size: 1.05rem; }

/* --- Disclaimer médical (conservé mot pour mot — bleu poudré + charbon = 13:1) --- */
.quiz-disclaimer {
  background: var(--bg-bleu);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.95rem;
}

.quiz-step { font-size: 0.9rem; margin-bottom: var(--space-2); }

/* --- Barre de progression (role=progressbar) --- */
.quiz-progress {
  height: 8px;
  background: var(--bg-menthe);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.quiz-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.3s ease; /* neutralisé par prefers-reduced-motion (base.css) */
}

/* --- Groupe de réponses --- */
.quiz-card fieldset { border: 0; margin: 0; padding: 0; }
.quiz-card legend {
  font-family: var(--font-heading);
  color: var(--heading);
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: var(--space-3);
  padding: 0;
}

.quiz-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-comfort); /* 44px */
  border: 2px solid var(--color-peche);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--bg);
  cursor: pointer;
}
.quiz-opt:hover { border-color: var(--accent); background: var(--bg-menthe); }
/* État sélectionné (≠ couleur seule : bordure forte + fond) */
.quiz-opt:has(input:checked) { border-color: var(--accent); background: var(--bg-menthe); }
/* Focus clavier reporté sur toute la carte d'option */
.quiz-opt:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.quiz-opt input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.quiz-opt span { font-size: 1rem; }

/* --- Message de validation (role=alert) — texte + gras (≠ couleur seule) --- */
.quiz-error {
  min-height: 1.2em;
  margin-bottom: var(--space-2);
  color: var(--heading);
  font-weight: 600;
}
.quiz-error:not(:empty)::before { content: "⚠ "; }

/* --- Navigation étape --- */
.quiz-nav { margin-top: var(--space-3); }
.quiz-block { width: 100%; margin-top: var(--space-2); }
.quiz-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-comfort);
  padding: var(--space-2);
  background: transparent;
  border: 0;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.quiz-back:hover { color: var(--link-hover); }

/* --- Résultat --- */
.quiz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-2);
  padding: 0;
}
.quiz-tag {
  display: inline-block;
  background: var(--bg-menthe);
  color: var(--heading);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
}
.quiz-profil { font-size: 1.05rem; margin-block: var(--space-2); }
#res-title { margin-bottom: var(--space-1); }
#res-work-wrap h3, .quiz-result h3 { margin-top: var(--space-3); }
.quiz-work { margin: var(--space-2) 0; padding-left: var(--space-4); }
.quiz-work li { margin-bottom: var(--space-1); }
.quiz-attendre { margin-block: var(--space-2); }
.quiz-humble { font-size: 0.9rem; font-style: italic; margin-top: var(--space-3); }

.quiz-alt { font-size: 0.9rem; margin-top: var(--space-3); }