/* ============================================================
   INTERFACE3 — QUIZ (v2 - Clean & Structured)
   Design System : Minimaliste / Editorial
   ============================================================ */

/* 1. STRUCTURE GLOBALE & CORRECTIFS DESIGN SYSTEM */
#quiz.section--sm {
  /* Aligne l'espacement de la section sur le quiz */
  padding-block: clamp(var(--s6), 4vw, var(--s12)) !important;
}

.quiz-shell {
  display: grid;
  gap: var(--s8);
}

.quiz-header {
  display: grid;
  gap: var(--s4);
}

/* 2. ÉLÉMENTS DE LA CARTE */
.quiz-card,
.quiz-result {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(var(--s8), 4vw, var(--s12));
  box-shadow: var(--shadow-sm);
}

/* Barre Meta (Badge + Bouton Recommencer) */
.quiz-meta {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--s4);
  flex-wrap: nowrap;
  padding-bottom: 1em;
}

.quiz-meta .badge,
.quiz-meta .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.quiz-meta .badge { padding-inline: 1rem; }
.quiz-meta .btn { margin-left: auto; }

/* Typographie des questions */
.quiz-question { margin-bottom: var(--s4); }

.quiz-helper {
  margin-bottom: var(--s8);
  max-width: 70ch;
  color: var(--text-muted);
}

/* 3. RÉPONSES (Grille 2 colonnes Desktop) */
.quiz-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.quiz-answer {
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s6);
  transition: all var(--t-fast);
  min-height: 60px;
  display: grid;
  gap: var(--s2);
  cursor: pointer;
}

.quiz-answer:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.quiz-answer.is-selected {
  border: 2px solid var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(75, 43, 255, 0.12);
}

.quiz-answer__label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

/* 4. NAVIGATION (Retour / Suivant) */
.quiz-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: var(--s3);
  margin-top: var(--s4);
  width: 100%;
}

.quiz-nav .btn {
  flex: 1; 
  min-height: 48px;
  font-size: var(--text-xs);
  justify-content: center;
  white-space: nowrap;
}

/* Suppression de tous les éléments graphiques des boutons (flèches, ronds, etc.) */
.quiz-nav .btn .icon-container, 
.quiz-nav .btn span:has(svg), 
.quiz-nav .btn i, 
.quiz-nav .btn svg,
.quiz-nav .btn::before, 
.quiz-nav .btn::after {
  display: none !important;
}

/* 5. RÉSULTATS & GRILLES SPÉCIFIQUES */
.quiz-result__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s10);
}

.quiz-result__grid .f-card { height: 100%; min-height: 260px; }

.quiz-result__actions {
  margin-top: var(--s12);
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
}

.quiz-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
}

.quiz-hero-split__image {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  aspect-ratio: 4/3;
}

.quiz-hero-split__image img { width: 100%; height: 100%; object-fit: cover; }

/* 6. RESPONSIVE (Media Queries) */
@media (max-width: 980px) {
  .quiz-result__grid { grid-template-columns: 1fr; }
}

@media (max-width: 769px) {
  .quiz-hero-split { grid-template-columns: 1fr; }
  .quiz-hero-split__image { order: -1; }
}

@media (max-width: 720px) {
  .quiz-answers { grid-template-columns: 1fr; }
}

/* Ajustements Desktop spécifiques */
@media (min-width: 770px) {
  .quiz-nav .btn {
    width: auto;
    min-width: 160px;
    padding-inline: var(--s8);
    flex: 0 0 auto; /* Empêche l'étirement sur desktop */
  }
}

/* Ajustements Mobile spécifiques */
@media (max-width: 640px) {
  #quiz.section--sm { padding-block: var(--s6); }
  .quiz-card, .quiz-result { padding: var(--s6); }
  .quiz-meta { gap: var(--s3); }
  .quiz-answer { padding: var(--s3); min-height: 48px; }
  .quiz-answer:hover { transform: none; box-shadow: var(--shadow-sm); }
}

/* ============================================================
   QUIZ — Fix overflow mobile (questions & réponses)
============================================================ */
@media (max-width: 640px) {

  /* 1) Sécurise le conteneur */
  .quiz-card {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 2) Les réponses ne doivent JAMAIS forcer la largeur */
  .quiz-answer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

  /* 3) Le texte doit pouvoir casser correctement */
  .quiz-answer__label {
    display: block;
    width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: left;
  }

  /* 4) Même chose pour la question */
  .quiz-question {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 5) Sécurité globale (anti-scroll fantôme) */
  .quiz-shell {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ============================================================
   QUIZ — Suppression du padding interne en mobile
============================================================ */
@media (max-width: 640px) {

  .quiz-card {
    padding: 0;
    padding-top: 1em;
  }

  /* On redonne un padding léger uniquement aux contenus internes */
  .quiz-question,
  .quiz-meta,
  .quiz-answers,
  .quiz-nav {
    padding-inline: var(--s4);
  }

  .quiz-question {
    padding-top: var(--s4);
  }

  .quiz-nav {
    padding-bottom: var(--s4);
  }
  
  .quiz-nav .btn {
    flex: initial;   /* ✅ supprime flex: 1 */
    width: auto;     /* ✅ laisse le bouton à sa largeur naturelle */
  }

}



@media (max-width: 640px) {
  .btn-arrow {
    display: none !important;
  }
}