: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);
}
.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 {
    padding: var(--space-12) var(--space-20);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-base);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn:disabled {
    background: #999;
    cursor: not-allowed;
}
.btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
}
.btn-secondary {
    background: #ddd;
    color: #333;
}
.questions-container {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    padding: var(--space-24);
}
.question {
    margin-bottom: var(--space-24);
    border-bottom: 1px solid #ddd;
    padding-bottom: var(--space-16);
}
.question:last-child {
    border-bottom: none;
}
.question-number {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-8);
}
.question-text {
    font-size: 16px;
    margin-bottom: var(--space-8);
}
.btn-read-question {
    background: var(--color-primary);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--radius-base);
    border: none;
    color: white;
    cursor: pointer;
    margin-top: var(--space-8);
}
.btn-read-question.reading {
    background: var(--color-success);
}
.btn-answer-toggle {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
    background: var(--color-success);
    color: white;
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    padding: 8px 12px;
}
.answer-input {
    display: block ;
    padding: 8px 12px;
    width: 100%;
    max-width: 400px;
    margin-top: var(--space-8);
    border: 2px solid #ddd;
    border-radius: var(--radius-base);
}
.answer-indiv {
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 8px;
    display: none;
}
.score-display {
    background: #fafafa;
    border: 2px solid var(--color-primary);
    padding: var(--space-20);
    margin-bottom: var(--space-24);
    border-radius: var(--radius-lg);
    display: none;
    text-align: center;
}
.score-display.show {
    display: block;
}
.score-number {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-primary);
}
@media print {
    .identity-form, .controls, .btn, .answer-input, .answer-indiv, .btn-read-question, .btn-answer-toggle, .score-display {
      display: none !important;
    }
     /* Afficher une case pour écrire à la main */
    .question::after {
        content: "";
        display: block !important;
        width: 200px;
        height: 24px;
        border: 1px solid #000;
        margin-top: 8px;
        background: white;
    }
    
    
     /* RÉDUIRE l'espacement général */
    body {
        background: white;
        color: black;
        padding: 10px !important; /* Réduit le padding */
        max-width: 100%;
        margin: 0;
    }
    .questions-container {
      border: none;
      box-shadow: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-24);
      gap: 12px !important; /* RÉDUIT de 20px à 12px */
        padding: 0 !important;
    }
    .question {
      break-inside: avoid;
        margin-bottom: 15px !important; /* RÉDUIT */
        padding-bottom: 25px; /* Espace pour la case réponse */
        border-bottom: 1px solid #ddd;
        page-break-inside: avoid;
        position: relative;
        min-height: auto; /* Supprime toute hauteur minimale */
    }
 /* RÉDUIRE l'espace dans les questions */
    .question-number {
        color: black;
        font-weight: bold;
        margin-bottom: 4px !important; /* RÉDUIT */
        font-size: 14px;
    }
.question-text {
        margin-bottom: 8px !important; /* RÉDUIT */
        font-size: 14px;
        line-height: 1.3;
    }
    
    /* Case réponse plus compacte */
    
    
    .question::after {
        content: "";
        display: block !important;
        width: 180px; /* Légèrement réduit */
        height: 18px; /* Légèrement réduit */
        border: 1px solid #000;
        border-bottom: 2px solid #000;
        background: white;
        position: absolute;
        bottom: 3px; /* Rapproché du texte */
        left: 70px;
    }

    #printHeader {
      display: block;
      margin-bottom: var(--space-24);
      font-weight: 600;
      border-bottom: 2px solid black;
      padding-bottom: var(--space-12);
    }
    #printHeader input {
      width: 180px;
      padding: 6px;
      margin-right: 20px;
      border: 1px solid black;
      font-weight: 600;
    }
}


@media print {
  .controls {
    display: none !important;
  }
}


@media print {

  /* Affiche nom, prénom, classe */
  .identity-form {
    display: block !important;
    page-break-after: avoid;
  }

  /* Masque les contrôles et boutons inutiles à l'impression */
  .controls,
  .btn,
  .answer-input,
  .btn-read-question,
  .btn-answer-toggle,
  .score-display {
    display: none !important;
  }

  /* Affiche les réponses dans le corps */
  .answer {
    display: block !important;
  }

  /* Header avec infos personnelles avant les questions */
  .printHeader {
    display: block !important;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 2px solid black;
    padding-bottom: 10px;
  }

  /* Style du body pour impression */
  body {
    background: white;
    color: black;
  }
}

@media print {
  /* Afficher le bloc infos utilisateur */
  .print-info {
    display: block !important;
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }

  /* Cacher les boutons et champs réponses */
  .btn-read-question,
  .btn-answer-toggle,
  .user-answer,
  .controls,
  #pdfBtn,
  #scoreBtn,
  #generateBtn {
    display: none !important;
  }

  /* Afficher la réponse */
  .answer {
    display: block !important;
  }
}


.print-info {
  display: none; /* Caché à l’écran */
}

@media print {
  .print-info {
    display: block !important; /* Visible à l’impression */
  }

  /* Facultatif : masquer le formulaire à l’impression */
  .identity-form {
    display: none;
  }
}