@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ── Overlay modal QCM ── */
#qcmModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
#qcmModal.active {
  display: flex;
}

.qcm-score-title{
  text-align: center !important;
  font-size: 24px;
  font-weight: bolder;
  color:brown;
}

/* ── Boîte de dialogue ── */
#qcmModal .qcm-dialog {
 position: relative;
  background: #ffffff !important;
  border-radius: 12px;
  width: 70%;
  height: 90%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  overflow: auto;
  padding-left: 5%;padding-right: 5%;padding-top:2% !important;padding-bottom:2% !important;
  font-family: 'Inter', sans-serif;
}

/* ── En-tête modal ── */
#qcmModal .qcm-dialog-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-bottom: 10px solid white;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6, #93c5fd); /* fallback = band-blue */
  border-top-right-radius: 15px;
  flex-shrink: 0;border-top-left-radius: 15px;
  transition: background 0.25s ease;
}

/* ── Variantes de couleur d'en-tête, assorties à la bande de la carte d'origine ── */
#qcmModal .qcm-dialog-header.band-slate   { background: linear-gradient(90deg, #04748b, #22b8d1, #7de3f0); }
#qcmModal .qcm-dialog-header.band-blue    { background: linear-gradient(90deg, #1d4ed8, #3b82f6, #93c5fd); }
#qcmModal .qcm-dialog-header.band-amber   { background: linear-gradient(90deg, #d97706, #f59e0b, #fcd34d); }
#qcmModal .qcm-dialog-header.band-emerald { background: linear-gradient(90deg, #059669, #10b981, #6ee7b7); }
#qcmModal .qcm-dialog-header.band-purple  { background: linear-gradient(90deg, #7c3aed, #8b5cf6, #c4b5fd); }
#qcmModal .qcm-dialog-header.band-rose    { background: linear-gradient(90deg, #e11d48, #f43f5e, #fda4af); }
#qcmModal .qcm-dialog-header h2 {
  margin: 0;
  font-size: 1.6rem;font-weight: bolder;
  color:white;
  font-family: 'Inter', sans-serif;
}
#qcmModal .qcm-dialog-close {
    position: absolute; top: 5px; right: 5px;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background:  red;
    border: 1px solid transparent !important;
    color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--trans); font-size: 1.25rem;font-weight: bolder;
}
#qcmModal .qcm-dialog-close:hover {
 background:var(--primary); color: var(--white); border-color: var(--danger-light);
}

/* ── Corps scrollable ── */
#qcm-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  background: #f0f2f5;
  color: #333;
}

/* ── Reset interne ── */
#qcm-modal-body *,
#qcm-modal-body *::before,
#qcm-modal-body *::after {
  box-sizing: border-box;
}

/* ── Titres ── */
#qcm-modal-body h2,
#qcm-modal-body h3 {
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
}

/* ── Timer ── */
#qcm-modal-body #timer {
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  text-align: center;
}

/* ── Barre de progression ── */
#qcm-modal-body #qcm-progress-bar-container {
  width: 100%;
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}

#qcm-modal-body #qcm-progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  transition: width 0.3s ease;
}

#qcm-modal-body #progress-bar-container {
    width: 100%;
    height: 12px;
    background: red !important;
    border: 2px solid black;
}


/* ── Bloc question ── */
#qcm-modal-body .question {
  margin-bottom: 28px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 10px;
  border: 1px solid #ccc;
  border-left: 5px solid #3b82f6; /* fallback = band-blue */
}

/* ── Bordure gauche des questions, assortie à la bande de la carte d'origine ── */
#qcmModal.band-slate   #qcm-modal-body .question { border-left-color: #22b8d1; }
#qcmModal.band-blue    #qcm-modal-body .question { border-left-color: #3b82f6; }
#qcmModal.band-amber   #qcm-modal-body .question { border-left-color: #f59e0b; }
#qcmModal.band-emerald #qcm-modal-body .question { border-left-color: #10b981; }
#qcmModal.band-purple  #qcm-modal-body .question { border-left-color: #8b5cf6; }
#qcmModal.band-rose    #qcm-modal-body .question { border-left-color: #f43f5e; }

/* ── Labels options ── CORRECTIF ── */
#qcm-modal-body label {
  display: grid;
  grid-template-columns: auto 1fr auto; /* input | texte | icône ✅❌ */
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  margin: 8px 0;
  background: #f8f9fa;
  border-radius: 6px;
  border: 0.2px solid #008899;
  transition: background 0.3s, transform 0.2s;
  cursor: pointer;
  user-select: none;
}

/* Supprimer le margin-right sur l'input (géré par gap) */
#qcm-modal-body input[type="checkbox"],
#qcm-modal-body input[type="radio"] {
  margin-right: 0;
  transform: scale(1.2);
  flex-shrink: 0;
}

/* Le ::after reste à droite sans écraser le texte */
#qcm-modal-body label::after {
  content: '';
  font-weight: bold;
  font-size: 18px;
  /* ← SUPPRIMÉ : margin-left: auto  c'était le coupable */
}

#qcm-modal-body label.correct::after  { content: ' ✅'; }
#qcm-modal-body label.incorrect::after { content: ' ❌'; }
/* Le ::after se colle à droite sans écraser le texte */
#qcm-modal-body label::after {
  content: '';
  flex-shrink: 0; /* ← empêche la compression */
  font-weight: bold;
  font-size: 18px;
  /* supprimer margin-left: auto */
}

/* Supprimer margin-right sur l'input (géré par gap) */
#qcm-modal-body input[type="checkbox"],
#qcm-modal-body input[type="radio"] {
  margin-right: 0; /* ← était 10px */
  transform: scale(1.2);
  flex-shrink: 0;
}
/* ── Inputs ── */
#qcm-modal-body input[type="checkbox"],
#qcm-modal-body input[type="radio"] {
  margin-right: 10px;
  transform: scale(1.2);
  flex-shrink: 0;
}

/* ── Réponses correctes / incorrectes ── */
#qcm-modal-body label.correct {
  background-color: #d4edda;
  border-color: #28a745;
  color: #155724;
  font-weight: bold;
}
#qcm-modal-body label.correct::after  { content: ' ✅'; }

#qcm-modal-body label.incorrect {
  background-color: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
  font-weight: bold;
}
#qcm-modal-body label.incorrect::after { content: ' ❌'; }

/* ── Navigation ── */
#qcm-modal-body .navigation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  overflow: hidden;
}

/* ── Boutons navigation ── */
/* Conteneur des boutons */
#qcm-modal-body .nav-buttons {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

/* Style commun */
#qcm-modal-body .nav-btn {
  padding: 10px 20px;
  color: #fff;
  border: none;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  min-width: 110px;
}


.qcm-btn-prev { background-color: #007bff; }
.qcm-btn-prev:hover {transform: scale(1.1);font-weight: bolder}
.qcm-btn-next { background-color:  #007bff;}
.qcm-btn-next:hover { transform: scale(1.1);font-weight: bolder}
.qcm-btn-submit { background-color: #28a745;}
.qcm-btn-submit:hover { transform: scale(1.05);font-weight: bolder}

/* Précédent à gauche */
#qcm-modal-body .btn-prev {
  background-color: #007bff;
  margin-right: auto;color:#ffffff;
}

#qcm-modal-body .btn-prev:hover {
  background-color:red;
}

/* Suivant à droite */
#qcm-modal-body .btn-next {
  background-color: #007bff;
  margin-right: 10px;
}

#qcm-modal-body .btn-next:hover {
  background-color: #0056b3;
}

/* Valider complètement à droite */
#qcm-modal-body .btn-submit {
  background-color: #28a745;
}

#qcm-modal-body .btn-submit:hover {
  background-color: #218838;
}

/* ── Score ── */
/* Conteneur des résultats */
#qcm-modal-body #qcm-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 15px;
}

/* Cases */
#qcm-modal-body #qcm-result-grid .correct,
#qcm-modal-body #qcm-result-grid .incorrect {
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* Vert */
#qcm-modal-body #qcm-result-grid .correct {
  background: #d4edda;
  border: 1px solid #28a745;
  color: #155724;
}

/* Rouge */
#qcm-modal-body #qcm-result-grid .incorrect {
  background: #f8d7da;
  border: 1px solid #dc3545;
  color: #721c24;
}

/* Score final */
#qcm-modal-body .qcm-total {
  margin-top: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
/* ── Responsive ── */
@media (max-width: 600px) {
  #qcm-modal-body {
    padding: 16px;
  }
  #qcm-modal-body .navigation {
    flex-direction: column;
  }
  #qcm-modal-body .nav-btn {
    width: 100%;
  }
}

.btn-restart {
  margin-top: 15px;
  background-color: #4CAF50;
  color: white;
}
.btn-restart:hover {
  background-color: #45a049;
}