:root {
  --color-primary: #2E86AB;
  --color-primary-hover: #236d8d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --radius-base: 4px;
  --radius-lg: 8px;
}

body {
  font-family: var(--font-family-base);
  background: #fff;
  color: #333;
  padding: var(--space-20);
  max-width: 900px;
  margin: auto;
}

h1 {
  color: var(--color-primary);
  margin-bottom: var(--space-24);
}

.controls, .identity-form {
  background: #fafafa;
  padding: var(--space-20);
  border: 1px solid #ddd;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

.controls label, .identity-form label {
  font-weight: 600;
}

.identity-form, .controls {
    background: #fafafa;
    padding: var(--space-20);
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-24);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: center;
}
.identity-form label, .controls label {
    font-weight: 600;
}

.identity-form input, .controls input {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-base);
  border: 1px solid #ddd;
  width: 150px;
}

.btn {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-base);
  padding: var(--space-8) var(--space-16);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: var(--color-primary-hover);
}

.questions-container {
  margin-top: var(--space-24);
}

.question {
  border: 1px solid #ddd;
  border-radius: var(--radius-base);
  padding: var(--space-16);
  margin-bottom: var(--space-16);
}

.question-number {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-8);
}

.question-text {
  font-size: 1.1em;
  margin-bottom: var(--space-8);
}

.answer-indiv {
  margin-top: var(--space-12);
  padding: var(--space-12);
  background-color: #e3f2fd;
  border-left: 4px solid var(--color-primary);
  display: none;
  white-space: pre-wrap;
}

.btn-answer-toggle {
  margin-top: var(--space-8);
}

.btn-read-question {
  margin-left: 8px;
}

.score-display {
  font-size: 1.2em;
  font-weight: 700;
  margin-top: var(--space-20);
  color: var(--color-success);
  display: none;
}

.score-display.show {
  display: block;
}

@media print {
  #questions-container {
    column-count: 2;
    column-gap: 20px; /* espace entre les colonnes */
  }
}

@media print {
  .controls {
    display: none !important;
  }
}
@media print {
  /* Empêche les sauts de page dans le container global */
  #questions-container {
    page-break-inside: avoid !important;
  }

  /* Chaque question complète (intitulé + nom + question) est gardée ensemble */
  .question {
    page-break-inside: avoid !important;
    break-inside: avoid-column !important;
    break-inside: avoid-page !important;
    margin-bottom: 1em;
  }

  /* Titre et nom qui font partie de la question ne doivent pas être coupés */
  .question-title,
  .question-name {
    page-break-inside: avoid !important;
  }

  /* Masquer les éléments de contrôle (boutons, inputs) à l'impression si besoin */
  
}
@media print {
  #questions-container {
    column-count: 2;
    column-gap: 20px;
  }
  .question {
    page-break-inside: avoid;
    break-inside: avoid-column;
    break-inside: avoid-page;
    margin-bottom: 1em;
  }
  .controls, #printBtn {
    display: none !important;
  }
}
@media print {
  #user-info, #questions-container {
    page-break-inside: avoid;
  }
  /* Eviter le saut entre les 2 conteneurs */
  #user-info {
    page-break-after: avoid;
  }
  #questions-container {
    page-break-before: avoid;
  }
  /* Masquer les éléments de contrôle inutiles */
  .controls, #printBtn {
    display: none !important;
  }
}
@media print {
  #print-area {
    page-break-inside: avoid;
  }
}
@media print {
  
  .btn,  /* classe pour masquer les boutons */
  .read-btn, /* classe spécifique des boutons lire */
  .show-answer-btn { /* classe spécifique des boutons afficher réponse */
    display: none !important;
  }
 /* Masquer les boutons afficher et son à l'impression */
  .btn, /* règle générale si vos boutons ont cette classe */
  .btn-answer-toggle, /* bouton bascule réponse */
  .btn-read-question, /* bouton lire question, si existant */
  .btn-sound /* supposé pour bouton son, à adapter si autre classe */ {
    display: none !important;


  }


}