/* www/quiz_serie.css
   Habillage du quiz « Série de 10 » : carte centrée, barre de progression à
   pastilles, anneau de score, révélation des réponses. Pas de JS : l'anneau et
   les transitions sont en CSS pur. */

.quiz-module { padding: 0.5rem 0 2rem; }

/* Carte centrée et lisible, commune aux 3 écrans. */
.quiz-module .quiz-card {
  max-width: 680px;
  margin: 1rem auto;
  border: none;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}
.quiz-titre { font-weight: 700; }

/* --- Barre de progression (10 pastilles) --- */
.quiz-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 0.5rem;
}
.quiz-progress .pastille {
  flex: 1 1 0;
  height: 8px;
  border-radius: 4px;
  background: #e9ecef;
  transition: background-color 0.25s ease;
}
.pastille-juste    { background: #2E8B57 !important; }
.pastille-faux     { background: #C0392B !important; }
.pastille-courante { background: #0d6efd !important; }
.pastille-avenir   { background: #e9ecef !important; }

/* --- Carte-question (énoncé) avec entrée en fondu --- */
.carte-question {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
  text-align: center;
  animation: quiz-fade-in 0.35s ease;
}
.carte-question .enonce {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}
@keyframes quiz-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Réponses : radio stylé en boutons pleine largeur, toute la zone cliquable.
   On masque le cercle natif (mais on le garde fonctionnel) et on stylise le
   label associé ; clic sur le texte = sélection (comportement natif du label).
   Couvre Bootstrap 5 (.form-check) et le repli Bootstrap 3 (.radio). */
/* Tout le bloc de réponses (intitulé + boutons) est plafonné et centré au niveau
   de NOTRE conteneur — indépendant du markup interne de Shiny. align-self couvre
   le cas où .card-body est un conteneur flex (bslib), margin auto le cas bloc. */
.quiz-reponses {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}
/* Shiny fixe .shiny-input-container à 300px par défaut : sans cet override, le
   groupe radio reste en 300px calé à gauche DANS le conteneur centré. On le force
   à remplir .quiz-reponses (460px). */
.quiz-reponses .shiny-input-container { width: 100%; max-width: 100%; }
.quiz-reponses .control-label,
.quiz-reponses .form-label {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
/* Réponses centrées : le groupe est plafonné en largeur et centré par marges
   auto (robuste quel que soit le markup interne — radioButtons rend .radio, pas
   .form-check, sous Bootstrap 5). */
.quiz-reponses .shiny-options-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.quiz-reponses .form-check,
.quiz-reponses .radio { width: 100%; padding: 0; margin: 0; min-height: 0; }
.quiz-reponses .form-check-input,
.quiz-reponses .radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.quiz-reponses .form-check-label,
.quiz-reponses .radio label {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid #0d6efd;
  border-radius: 8px;
  color: #0d6efd;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.quiz-reponses .form-check-label:hover,
.quiz-reponses .radio label:hover { background: #e7f1ff; }
.quiz-reponses .form-check-input:checked + .form-check-label,
.quiz-reponses .radio label:has(input:checked) {
  background: #0d6efd;
  color: #fff;
}

/* --- Révélation des réponses (mêmes centrage/largeur que les réponses) --- */
.options-reveal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}
.option-reveal {
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: #6c757d;
  background: #fff;
  text-align: center;
}
.option-reveal span { margin-left: 0.4rem; }
.option-correcte {
  border-color: #2E8B57;
  background: #e9f5ee;
  color: #1e6e44;
  font-weight: 600;
}
.option-incorrecte {
  border-color: #C0392B;
  background: #fbeceb;
  color: #962a20;
  font-weight: 600;
}
.taquin-manche { font-size: 1.1rem; color: #343a40; }
.feedback-explication { line-height: 1.6; }

/* --- Anneau de score (écran bilan) --- */
.anneau-score {
  --pct: 0;
  --accent: #2E8B57;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), #e9ecef 0);
  transition: background 0.6s ease;
}
.anneau-score .anneau-chiffre {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  color: #343a40;
}

/* --- Récapitulatif du bilan --- */
.recap-ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f3f5;
}
.recap-icone { width: 1.2rem; text-align: center; }
.recap-juste .recap-icone { color: #2E8B57; }
.recap-faux  .recap-icone { color: #C0392B; }
.recap-fait { font-weight: 500; }
.recap-detail { font-size: 0.85rem; color: #6c757d; }

/* --- Mobile --- */
@media (max-width: 575px) {
  .quiz-module .quiz-card { margin: 0.5rem 0.25rem; }
  .carte-question .enonce { font-size: 1.1rem; }
  .quiz-progress { gap: 4px; }
  .anneau-score { width: 128px; height: 128px; }
  .anneau-score .anneau-chiffre { width: 96px; height: 96px; font-size: 1.8rem; }
}