/* ============================================================
   Quiz « Quelle couche choisir ? » (page-quiz.php)
   ============================================================ */

.lpc-quiz {
  background: var(--lpc-sage-soft);
  padding-block: var(--lpc-space-12) var(--lpc-space-20);
  min-height: 70vh;
}
.lpc-quiz [hidden] { display: none !important; }

.lpc-quiz__header { text-align: center; margin-bottom: var(--lpc-space-8); }
.lpc-quiz__title {
  font-family: var(--lpc-font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  margin: var(--lpc-space-3) 0 0;
}

.lpc-quiz__progress { display: flex; align-items: center; gap: var(--lpc-space-3); margin-bottom: var(--lpc-space-8); }
.lpc-quiz__progress-label { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--lpc-ink-3); white-space: nowrap; }
.lpc-quiz__progress-bar { flex: 1; height: 4px; background: rgba(42, 36, 32, .1); border-radius: var(--lpc-radius-pill); overflow: hidden; }
.lpc-quiz__progress-bar span { display: block; height: 100%; width: 0; background: var(--lpc-terra); transition: width .3s ease; }

.lpc-quiz__question {
  font-family: var(--lpc-font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  margin: 0 0 var(--lpc-space-6);
}

.lpc-quiz__options { display: flex; flex-direction: column; gap: var(--lpc-space-3); }
.lpc-quiz__option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--lpc-space-4);
  width: 100%;
  padding: var(--lpc-space-5) var(--lpc-space-6);
  background: #fff;
  border: 1px solid var(--lpc-line);
  border-radius: var(--lpc-radius);
  text-align: left;
  font-family: inherit;
  color: var(--lpc-ink);
  cursor: pointer;
  transition: border-color var(--lpc-t-fast), box-shadow var(--lpc-t-fast), transform var(--lpc-t-fast);
}
.lpc-quiz__option:hover,
.lpc-quiz__option:focus-visible { border-color: var(--lpc-terra); box-shadow: var(--lpc-shadow-sm); transform: translateY(-1px); }
.lpc-quiz__option-title { font-family: var(--lpc-font-display); font-size: 20px; }
.lpc-quiz__option-sub { grid-column: 1; font-size: 14px; color: var(--lpc-ink-3); }
.lpc-quiz__option-arrow { grid-row: 1 / 3; grid-column: 2; color: var(--lpc-terra); font-size: 18px; }

.lpc-quiz__back {
  margin-top: var(--lpc-space-6);
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  color: var(--lpc-ink-2);
  cursor: pointer;
}
.lpc-quiz__back:hover { color: var(--lpc-terra-dark); }

/* Résultat */
.lpc-quiz__result { text-align: center; }
.lpc-quiz__result-title {
  font-family: var(--lpc-font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  font-style: italic;
  color: var(--lpc-terra-dark);
  margin: var(--lpc-space-3) 0;
}
.lpc-quiz__result-lead { font-size: 17px; color: var(--lpc-ink-2); max-width: 560px; margin: 0 auto var(--lpc-space-3); }
.lpc-quiz__size { font-weight: 600; color: var(--lpc-ink); }

.lpc-quiz__proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lpc-space-6);
  text-align: left;
  background: var(--lpc-bg);
  margin: var(--lpc-space-6) 0;
}
.lpc-quiz__proscons h3 { font-family: var(--lpc-font-display); font-size: 18px; margin: 0 0 var(--lpc-space-3); }
.lpc-quiz__proscons ul { margin: 0; }

.lpc-quiz__grid { text-align: left; margin-top: var(--lpc-space-6); }
.lpc-quiz__night { margin-top: var(--lpc-space-10); }
.lpc-quiz__night h3 { font-family: var(--lpc-font-display); font-size: 22px; font-weight: 500; }

.lpc-quiz__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--lpc-space-4); margin-top: var(--lpc-space-10); }
.lpc-quiz__actions .lpc-quiz__back { margin-top: 0; }

@media (max-width: 767px) {
  .lpc-quiz__proscons { grid-template-columns: 1fr; }
}

/* Teaser de l'accueil : les réponses sont des liens vers le quiz */
a.lpc-quiz-teaser__answer { display: block; color: var(--lpc-ink); text-decoration: none; cursor: pointer; }