/* ============================================================
 *  POP QUIZ V3 - Style "Compact & Orange Pépite"
 *  Couleur principale : #ff6233
 *  ============================================================ */

.pop-quiz-box {
  /* Bordure Orange Pépite */
  border: 2px solid #ff6233;
  /* Fond très léger orangé pour l'ambiance */
  background-color: #fff8f6;
  border-radius: 12px;

  /* --- RÉDUCTION DU VIDE (Compact) --- */
  padding: 1.2rem; /* Réduit de 24px à ~19px */
  margin: 2rem 0; /* Marge externe standard */

  /* Ombre "plate" moderne (Hard Shadow) assortie */
  box-shadow: 4px 4px 0 rgba(255, 98, 51, 0.2);

  position: relative;
  overflow: hidden;
  color: #333; /* Texte gris foncé pour la lisibilité */
}

/* Titre Compact */
.pop-quiz-box h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #e64a19; /* Orange un peu plus foncé pour le contraste texte */
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* Intro Compacte */
.pop-quiz-box .intro {
  font-style: italic;
  color: #555;
  margin-bottom: 1rem; /* Réduit */
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Liste des questions (Puces flèches) */
.pop-quiz-box .list-section p {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px; /* Très serré entre les lignes */
  font-weight: 600;
  font-size: 0.95rem;
}

.pop-quiz-box .list-section p::before {
  content: "➤"; /* Petite flèche dynamique */
  color: #ff6233;
  font-size: 0.8em;
  position: absolute;
  left: 0;
  top: 3px;
}

/* ===========================
 *  LE BOUTON (CTA) - Style Pépite
 *  =========================== */
.pop-quiz-box .answers-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
  cursor: pointer;

  /* Bouton Orange Plein */
  background: #ff6233;
  color: white;
  border: none;

  padding: 8px 18px; /* Plus petit */
  border-radius: 6px; /* Coins un peu carrés pour le côté "Pep's" */
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  margin: 0.8rem 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pop-quiz-box .answers-cta:hover {
  background: #e64a19; /* Plus foncé au survol */
  transform: translateY(-1px);
}

.pop-quiz-box .answers-cta::after {
  content: "▼";
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.pop-quiz-box .answers-cta .hide { display: none; }

/* ===========================
 *  ZONE RÉPONSES & VOILE
 *  =========================== */

.pop-quiz-box .answers-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pop-quiz-box .answers-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 5px;
  /* Fond blanc à l'intérieur pour bien lire les résultats */
  background: white;
  border: 1px solid #ffd8cc;
}

.pop-quiz-box .answers-section {
  padding: 15px;
  transition: filter 0.3s ease;
}

.pop-quiz-box .answers-section p {
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.pop-quiz-box .answers-section p:last-child { margin-bottom: 0; }

/* LE VOILE (SPOILER) */
.pop-quiz-box .veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Fond semi-transparent orangé */
  background: rgba(255, 245, 240, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  color: #ff6233;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9em;
  cursor: pointer;
}

.pop-quiz-box .veil span::before { content: "🫣 "; font-size: 1.2em; }

/* ===========================
 *  LOGIQUE D'OUVERTURE
 *  =========================== */

/* FERMÉ */
.pop-quiz-box .answers-toggle:not(:checked) ~ .answers-wrap .answers-section {
  filter: blur(8px);
}

/* OUVERT */
.pop-quiz-box .answers-toggle:checked + .answers-cta {
  background: #333; /* Le bouton devient gris foncé quand ouvert */
}
.pop-quiz-box .answers-toggle:checked + .answers-cta::after { transform: rotate(180deg); }
.pop-quiz-box .answers-toggle:checked + .answers-cta .show { display: none; }
.pop-quiz-box .answers-toggle:checked + .answers-cta .hide { display: inline; }

.pop-quiz-box .answers-toggle:checked ~ .answers-wrap .veil {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.pop-quiz-box .answers-toggle:checked ~ .answers-wrap .answers-section {
  filter: none;
}

/* ===========================
 *  CONCLUSION (Correctif Lisibilité & Format)
 *  =========================== */

.pop-quiz-box .conclusion {
  /* Séparation avec le haut */
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed #ffccbc; /* On garde la ligne pointillée orange sympa */

  /* --- CORRECTION TEXTE --- */
  color: #000000;       /* Noir strict */
  font-weight: normal;  /* On enlève le gras forcé pour respecter l'éditeur */
  font-size: 1rem;      /* Taille standard lisible */
  line-height: 1.6;     /* Interligne augmenté pour éviter l'effet "pâté" */

  /* Gestion des mots longs sur mobile */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Gestion des paragraphes dans la conclusion (pour aérer les blocs de texte) */
.pop-quiz-box .conclusion p {
  margin-bottom: 1em; /* Espace entre les paragraphes */
  margin-top: 0;
}

/* Suppression de la marge du dernier paragraphe pour l'alignement */
.pop-quiz-box .conclusion p:last-child {
  margin-bottom: 0;
}

/* On s'assure que le Gras et l'Italique de l'éditeur ressortent bien */
.pop-quiz-box .conclusion strong,
.pop-quiz-box .conclusion b {
  font-weight: 700;
  color: #000;
}

.pop-quiz-box .conclusion em,
.pop-quiz-box .conclusion i {
  font-style: italic;
}

/* Liens dans la conclusion (si vous en mettez) */
.pop-quiz-box .conclusion a {
  color: #ff6233;
  text-decoration: underline;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 600px) {
  .pop-quiz-box { padding: 15px; margin: 1.5rem 0; }
}