/* ==========================================================================
   CANINOVA — MODULE DE PAGE : QUIZ
   Chargé uniquement sur page-quiz.php.
   Ne contient QUE ce qui est propre au quiz : décor du héro, barre de
   progression, cartes de question, boutons de réponse, cercle de score et
   transitions d'apparition pilotées par js/quiz.js.
   Boutons, cartes, pastilles, progression et typographie viennent de
   style.css et css/components.css.

   Les classes non préfixées (.quiz-question--active, .quiz-answer-btn--selected,
   .quiz-results--visible, .quiz-result-block--visible) sont des crochets
   d'état posés par js/quiz.js : elles ne peuvent pas être renommées, elles
   sont donc stylées ici en combinaison avec les classes .cn-quiz__*.
   ========================================================================== */

/* ==========================================================================
   HÉRO
   ========================================================================== */

.cn-quiz__hero {
  position: relative;
  overflow: hidden;
}

/* Halo décoratif, dans la lignée des fonds sombres de la DA. */
.cn-quiz__hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -12%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cn-terracotta) 26%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* .cn-stack empile, .cn-center aligne le texte : il ne reste que le centrage
   transversal des blocs et la remontée au-dessus du halo. */
.cn-quiz__hero-inner {
  position: relative;
  z-index: 1;
  align-items: center;
}

/* Le jeu d'icônes n'a pas de dimensions propres : on les pose au cas par cas. */
.cn-quiz__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.cn-quiz__icon svg {
  width: 16px;
  height: 16px;
}

.cn-quiz__badge .cn-quiz__icon svg {
  width: 13px;
  height: 13px;
}

.cn-quiz__title {
  max-width: 18ch;
}

.cn-quiz__hook {
  max-width: 54ch;
  font-style: italic;
}

.cn-quiz__intro {
  max-width: 62ch;
}

/* Barème de points : encart d'appui, aligné à gauche même dans un héro centré
   car il contient souvent une liste. */
.cn-quiz__legend {
  max-width: 40rem;
  text-align: left;
  font-size: var(--cn-t-sm);
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-left: 3px solid var(--cn-terracotta);
  border-radius: var(--cn-r-md);
  padding: 16px 20px;
}

/* ==========================================================================
   PARCOURS
   ========================================================================== */

/* Colonne de lecture plus étroite que le conteneur : une question doit tenir
   d'un seul regard. */
.cn-quiz__wrapper {
  max-width: 660px;
  margin-inline: auto;
}

/* ── Barre de progression ────────────────────────────────────────────────
   js/quiz.js bascule style.display entre 'flex' et 'none' : l'état masqué
   initial est posé ici, la valeur flex reste celle attendue par le script. */
.cn-quiz__progress {
  display: none;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}

.cn-quiz__progress-track {
  flex: 1;
}

/* Le remplissage part à zéro : le JS écrit ensuite style.width en pourcentage. */
.cn-quiz__progress-bar {
  width: 0;
}

.cn-quiz__progress-label {
  white-space: nowrap;
}

/* ── Question ────────────────────────────────────────────────────────────
   Chaque question est une carte du design system. Le JS force display:block
   à l'affichage, ce qui neutralise le flex de .cn-card sans autre effet. */
.cn-quiz__question {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cn-quiz__question.quiz-question--active {
  opacity: 1;
  transform: none;
}

.cn-quiz__question-num {
  display: block;
  font-size: var(--cn-t-h3);
  margin-bottom: 6px;
}

.cn-quiz__question-subtext {
  font-size: var(--cn-t-sm);
  margin-top: 10px;
}

/* ── Réponses ─────────────────────────────────────────────────────────── */

/* L'empilement vient de .cn-stack--sm : on ne pose ici que le rythme. */
.cn-quiz__answers {
  margin: 26px 0 28px;
}

/* Ligne de réponse : ni un .cn-btn (pleine largeur, deux colonnes, texte à
   gauche) ni une .cn-card (cliquable, état sélectionné) — d'où ce composant
   local, bâti uniquement sur les jetons. */
.cn-quiz__answer {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font-family: var(--cn-font-body);
  font-size: var(--cn-t-sm);
  color: var(--cn-text);
  background: var(--cn-cream);
  border: 1.5px solid var(--cn-border-2);
  border-radius: var(--cn-r-md);
  padding: 13px 16px;
  transition: border-color var(--cn-ease), background-color var(--cn-ease),
    box-shadow var(--cn-ease);
}

.cn-quiz__answer:hover {
  border-color: var(--cn-teal-line);
  background: var(--cn-white);
}

.cn-quiz__answer.quiz-answer-btn--selected {
  border-color: var(--cn-teal);
  background: var(--cn-teal-soft);
  box-shadow: 0 2px 14px -6px color-mix(in srgb, var(--cn-teal) 55%, transparent);
}

/* Pas un .cn-avatar : celui-ci est un médaillon plein teal de 34 px, alors
   qu'il faut ici une pastille douce qui s'inverse à la sélection. */
.cn-quiz__answer-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--cn-teal-soft);
  color: var(--cn-teal);
  font-size: var(--cn-t-card);
  font-weight: 700;
  transition: background-color var(--cn-ease), color var(--cn-ease);
}

.cn-quiz__answer.quiz-answer-btn--selected .cn-quiz__answer-letter {
  background: var(--cn-teal);
  color: var(--cn-white);
}

.cn-quiz__answer-text {
  line-height: 1.45;
}

/* ── Navigation ───────────────────────────────────────────────────────── */

/* La rangée vient de .cn-row : seul le calage des boutons est propre au quiz.
   « Précédent » n'existe pas sur la première question : le bouton d'avance
   reste calé à droite dans les deux cas. */
.cn-quiz__next {
  margin-left: auto;
}

/* ==========================================================================
   RÉSULTATS
   ========================================================================== */

.cn-quiz__results {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cn-quiz__results.quiz-results--visible {
  opacity: 1;
  transform: none;
}

.cn-quiz__score {
  align-items: center;
  margin-bottom: 30px;
}

.cn-quiz__score-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 9.5rem;
  height: 9.5rem;
  border-radius: 50%;
  background: var(--cn-white);
  border: 2px solid var(--cn-teal-line);
  box-shadow: var(--cn-shadow-card);
}

.cn-quiz__score-number {
  font-family: var(--cn-font-title);
  font-size: var(--cn-t-h2-major);
  font-weight: 600;
  line-height: 1;
  color: var(--cn-teal);
}

.cn-quiz__score-max {
  font-size: var(--cn-t-meta);
  color: var(--cn-text-4);
  margin-top: 4px;
}

/* Un seul bloc est révélé par le JS ; les autres restent en display:none. */
.cn-quiz__result {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cn-quiz__result.quiz-result-block--visible {
  opacity: 1;
  transform: none;
}

.cn-quiz__result-tag {
  align-self: flex-start;
}

.cn-quiz__result-title {
  margin-top: 14px;
}

.cn-quiz__result-text {
  margin-top: 12px;
}

/* ── CTA post-résultat ────────────────────────────────────────────────── */

.cn-quiz__cta {
  margin-top: 22px;
}

/* Bandeau code promo. Pas un .cn-notice : celui-ci impose un fond sable en
   dur, illisible dans la carte sombre du CTA. On s'appuie ici sur les jetons
   de surface, qui basculent seuls grâce à .cn-dark. */
.cn-quiz__promo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--cn-t-sm);
  color: var(--cn-text-2);
  background: var(--cn-surface);
  border: 1px dashed var(--cn-border-3);
  border-radius: var(--cn-r-md);
  padding: 12px 16px;
  margin-bottom: 20px;
}

.cn-quiz__promo .cn-quiz__icon {
  color: var(--cn-terracotta);
  margin-top: 2px;
}

.cn-quiz__cta-text {
  margin-top: 12px;
}

.cn-quiz__cta-btn {
  align-self: flex-start;
  margin-top: 20px;
}

.cn-quiz__cta-details {
  font-size: var(--cn-t-meta);
  line-height: 1.5;
  color: var(--cn-text-3);
  margin-top: 16px;
}

/* Le centrage vient de .cn-center (le bouton est inline-flex). */
.cn-quiz__restart {
  margin-top: 26px;
}

/* ==========================================================================
   PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 600px) {
  .cn-quiz__answer {
    grid-template-columns: 2rem 1fr;
    gap: 12px;
  }

  .cn-quiz__answer-letter {
    width: 2rem;
    height: 2rem;
  }

  /* Les deux boutons de navigation passent pleine largeur, l'avance en tête. */
  .cn-quiz__nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cn-quiz__next {
    margin-left: 0;
  }

  .cn-quiz__score-circle {
    width: 8rem;
    height: 8rem;
  }

  .cn-quiz__cta-btn {
    align-self: stretch;
  }
}