/* =============================================================================
   EduQuizAI — Feuille de style de l'application
   Reprise des maquettes HTML/CSS (docs/conception/maquettes) et de la charte
   graphique. Accessibilité : RGAA 4.1 (contrastes, focus visible, cibles de 44 px).

   SOMMAIRE (rechercher « == N. » pour aller à une partie)
     == 1.  Police
     == 2.  Variables de la charte graphique
     == 3.  Base (réinitialisation, texte, titres, liens)
     == 4.  Utilitaires
     == 5.  Boutons
     == 6.  Formulaires
     == 7.  Alertes, messages et badges
     == 8.  Cartes
     == 9.  Pages hors connexion (connexion, mot de passe)
     == 10. Structure de l'espace enseignant (en-tête, navigation, menu mobile)
     == 11. Tableau de bord
     == 12. Listes, tableaux et pagination
     == 13. Pages « sans défilement » (ordinateur)
     == 14. Détail d'une leçon
     == 15. Générateur de quiz et écran d'attente
     == 16. Détail d'un quiz
     == 17. Modification d'un quiz
     == 18. Fenêtres de dialogue (suppression, export)
     == 19. Import d'un fichier texte

   Point de rupture mobile : 820 px (max-width:820px = mobile, min-width:821px = ordinateur).
   ============================================================================= */


/* == 1. Police ================================================================
   Inter, hébergée par l'application (aucune requête vers un service externe). */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.62fbcb9c11f3.woff2") format("woff2");
}


/* == 2. Variables de la charte graphique ====================================== */

:root {
  /* Couleur primaire (bleu) : boutons, liens, éléments actifs */
  --primaire: #1D4ED8;
  --primaire-fonce: #1E3A8A;
  --primaire-clair: #EFF6FF;

  /* Accent IA (ambre) : décoration et contour de focus uniquement */
  --accent: #F59E0B;

  /* Couleurs d'état (contraste ≥ 4,5:1 sur blanc) */
  --succes: #15803D;
  --succes-clair: #F0FDF4;
  --alerte: #B45309;
  --alerte-clair: #FFFBEB;
  --erreur: #B91C1C;
  --erreur-clair: #FEF2F2;

  /* Textes, fonds et bordures */
  --texte: #0F172A;
  --texte-2: #475569;
  --fond: #F8FAFC;
  --surface: #FFFFFF;
  --bordure: #CBD5E1;

  /* Arrondi des cartes */
  --rayon: 10px;
}


/* == 3. Base (réinitialisation, texte, titres, liens) ========================= */

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

a {
  color: var(--primaire);
}

h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

h2 {
  font-size: 20px;
  font-weight: 700;
}


/* == 4. Utilitaires ============================================================ */

/* Texte secondaire (gris) */
.muted {
  color: var(--texte-2);
  font-size: 14px;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* == 5. Boutons ================================================================ */

/* Bouton de base : hauteur minimale de 44 px (cible tactile, RGAA) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

/* Bouton désactivé : action pas encore disponible */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variantes de couleur (toujours en couleur pleine) */
.btn-primaire {
  background: var(--primaire);
  color: #fff;
}
.btn-primaire:hover {
  background: var(--primaire-fonce);
}

.btn-secondaire {
  background: var(--primaire-fonce);
  color: #fff;
}
.btn-secondaire:hover {
  background: #172554;
}

.btn-succes {
  background: var(--succes);
  color: #fff;
}
.btn-succes:hover {
  background: #166534;
}

.btn-modifier {
  background: var(--alerte);
  color: #fff;
}
.btn-modifier:hover {
  background: #92400E;
}

.btn-danger {
  background: var(--erreur);
  color: #fff;
}
.btn-danger:hover {
  background: #991B1B;
}

/* Tailles */
.btn-bloc {
  width: 100%;
}

.btn-petit {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 14px;
}

/* Focus clavier toujours visible (contour ambre) */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Boutons « icône » des tableaux (voir, modifier, supprimer) */
.btn-icone {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--bordure);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texte-2);
}
.btn-icone:hover {
  background: var(--fond);
  color: var(--primaire);
}

/* Boutons icône colorés (icônes : contraste ≥ 3:1, RGAA 4.1 critère 3.3) */
.btn-icone.voir {
  background: var(--primaire);
  color: #fff;
  border-color: var(--primaire);
}
.btn-icone.voir:hover {
  background: var(--primaire-fonce);
  border-color: var(--primaire-fonce);
  color: #fff;
}

.btn-icone.modifier {
  background: var(--alerte);
  color: #fff;
  border-color: var(--alerte);
}
.btn-icone.modifier:hover {
  background: #92400E;
  border-color: #92400E;
  color: #fff;
}

.btn-icone.danger {
  background: var(--erreur);
  color: #fff;
  border-color: var(--erreur);
}
.btn-icone.danger:hover {
  background: #991B1B;
  border-color: #991B1B;
  color: #fff;
}


/* == 6. Formulaires ============================================================ */

/* Un champ = un libellé + une zone de saisie */
.champ {
  margin-bottom: 18px;
}

label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #94A3B8;
  border-radius: 8px;
  font: inherit;
  color: var(--texte);
  background: #fff;
}

/* Texte d'aide sous un champ */
.aide {
  font-size: 13px;
  color: var(--texte-2);
  margin-top: 4px;
}

/* Astérisque des champs obligatoires */
.obligatoire {
  color: var(--erreur);
}

/* Champ en erreur (bordure rouge) et message d'erreur sous le champ */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border: 2px solid var(--erreur);
}

.msg-erreur {
  color: var(--erreur);
  font-size: 13px;
  margin-top: 6px;
  font-weight: 600;
}

/* Groupes de champs (cases à cocher, choix) */
fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

legend {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  padding: 0;
}

/* Mise en page des formulaires sur deux colonnes */
.form-carte {
  max-width: 860px;
}

.grille-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/* Boutons en bas de formulaire (Annuler / Enregistrer) */
.actions-form {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid #E2E8F0;
}

/* Éditeur de contenu d'une leçon (barre d'outils + zone de texte) */
.editeur {
  border: 1px solid #94A3B8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.editeur textarea,
.editeur trix-editor {
  border: 0;
  border-radius: 0;
  min-height: 320px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.6;
}

/* Zone de saisie Trix : même aspect que la zone de texte, défilement interne */
.editeur trix-editor {
  display: block;
  padding: 10px 12px;
  overflow-y: auto;
  color: var(--texte);
  outline: none;
}
.editeur trix-editor[hidden],
.editeur textarea[hidden] {
  display: none;
}
.editeur trix-editor:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
/* Mise en forme affichée dans l'éditeur (comme sur la page détail) */
.editeur trix-editor h1 {
  font-size: 18px;
  margin: 12px 0 4px;
}
.editeur trix-editor ul,
.editeur trix-editor ol {
  margin: 0 0 0 20px;
}

/* Contenu en erreur : bordure rouge sur tout l'éditeur */
.editeur-erreur {
  border: 2px solid var(--erreur);
}

.barre-outils {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--bordure);
  background: #F1F5F9;
}

.barre-outils button {
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: var(--primaire-fonce);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.barre-outils button:hover,
.barre-outils button[data-trix-active] {
  background: var(--primaire);
}
.barre-outils button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Barre masquée tant que editeur.js ne l'a pas activée (sans JavaScript) */
.barre-outils[hidden] {
  display: none;
}

/* Compteur de caractères sous l'éditeur */
.compteur {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.compteur span:last-child {
  white-space: nowrap;
}

/* Compteur proche de la limite (plus de 95 %) */
.compteur-alerte {
  color: var(--erreur);
  font-weight: 600;
}

@media (max-width: 820px) {
  .grille-form {
    grid-template-columns: 1fr;
  }
  .actions-form {
    flex-direction: column-reverse;
  }
  .actions-form .btn {
    width: 100%;
  }
}


/* == 7. Alertes, messages et badges ============================================ */

/* Alertes : l'information n'est jamais portée par la couleur seule (texte explicite) */
.alerte-erreur {
  background: var(--erreur-clair);
  color: var(--erreur);
  border-left: 4px solid var(--erreur);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 18px;
}

/* Variante : alerte au-dessus d'un formulaire pleine page (maquette 4b) */
.alerte-serree {
  margin-bottom: 12px;
}

.alerte-succes {
  background: var(--succes-clair);
  color: var(--succes);
  border-left: 4px solid var(--succes);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 18px;
}

.alerte-info {
  background: var(--alerte-clair);
  border-left: 4px solid var(--alerte);
  color: #78350F;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 14px;
}

/* Messages Django affichés en haut du contenu (partials/messages.html) */
.messages {
  margin-bottom: 16px;
}
.messages .alerte-info {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Badges (statut d'un quiz, type de question) */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.badge-brouillon {
  background: var(--alerte-clair);
  color: var(--alerte);
}
.badge-valide {
  background: var(--succes-clair);
  color: var(--succes);
}
.badge-type {
  background: var(--primaire-clair);
  color: var(--primaire);
}


/* == 8. Cartes ================================================================== */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px;
}

/* En-tête de carte : titre à gauche, lien à droite */
.carte-titre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.carte-titre a {
  font-size: 14px;
  font-weight: 600;
}


/* == 9. Pages hors connexion (connexion, mot de passe) ==========================
   Gabarit : templates/base_connexion.html — maquettes 1, 12 et 13. */

.page-connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(160deg, var(--primaire-clair), var(--fond) 60%);
}

.connexion {
  width: 100%;
  max-width: 420px;
}

.connexion .logo {
  display: block;
  height: 56px;
  margin: 0 auto 24px;
}

.connexion h1 {
  font-size: 24px;
  text-align: center;
}

.connexion .muted {
  text-align: center;
  margin: 6px 0 24px;
}

.connexion .texte {
  font-size: 15px;
  margin-bottom: 20px;
}

/* Règles du mot de passe sous le champ (écran 12) */
.connexion .regles {
  font-size: 13px;
  color: var(--texte-2);
  margin: 4px 0 0 18px;
}

/* Lien « Mot de passe oublié ? » sous le champ mot de passe */
.lien-oubli {
  display: block;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}

.connexion .lien-retour {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
}

/* Texte sous la carte */
.connexion .pied {
  text-align: center;
  margin-top: 20px;
}


/* == 10. Structure de l'espace enseignant (en-tête, navigation, menu mobile) ======
   Gabarit : templates/base_connecte.html — maquettes 2 à 11. */

/* Lien d'évitement « Aller au contenu » : visible seulement au clavier */
.lien-evitement {
  position: absolute;
  left: -9999px;
}
.lien-evitement:focus {
  left: 16px;
  top: 8px;
  z-index: 10;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
}

/* En-tête */
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

.entete-int {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.entete .logo {
  height: 40px;
  display: block;
}

/* Navigation principale ; la page en cours porte aria-current="page" */
.nav {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--texte-2);
  font-weight: 600;
  text-decoration: none;
}
.nav a:hover {
  background: var(--fond);
  color: var(--texte);
}
.nav a[aria-current="page"] {
  background: var(--primaire-clair);
  color: var(--primaire);
}

/* Utilisateur connecté : initiales, nom, déconnexion */
.utilisateur {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primaire);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.lien-deco {
  color: var(--texte-2);
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Déconnexion : formulaire POST (jeton CSRF) présenté comme un lien */
.form-deco {
  display: flex;
}
button.lien-deco {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.lien-deco:hover {
  color: var(--texte);
}

/* Bouton du menu mobile : masqué sur ordinateur */
.menu-mobile {
  display: none;
}

/* Zone de contenu de la page */
.contenu {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* Titre de page (titre à gauche, bouton d'action à droite) */
.titre-page {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* Variante : titre et texte d'aide alignés au centre (formulaire de leçon) */
.titre-page-centre {
  align-items: center;
}

/* Fil d'Ariane */
.fil-ariane {
  font-size: 14px;
  color: var(--texte-2);
  margin-bottom: 12px;
}
.fil-ariane ol {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fil-ariane li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--texte-2);
}

/* Mobile : navigation masquée, remplacée par le bouton menu */
@media (max-width: 820px) {
  .entete-int {
    padding: 0 16px;
    gap: 12px;
  }
  .nav,
  .utilisateur .nom,
  .lien-deco,
  .form-deco {
    display: none;
  }
  .utilisateur {
    margin-left: auto;
  }
  .menu-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #fff;
  }
  .contenu {
    padding: 20px 16px 40px;
  }
}

/* Mobile, menu ouvert (classe ajoutée par static/js/menu.js) :
   navigation en colonne, puis utilisateur et déconnexion */
@media (max-width: 820px) {
  .entete.menu-ouvert .entete-int {
    flex-wrap: wrap;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .entete.menu-ouvert .nav {
    display: flex;
    flex-direction: column;
    order: 3;
    flex: 0 0 100%;
  }
  .entete.menu-ouvert .menu-mobile {
    order: 1;
    margin-left: auto;
  }
  .entete.menu-ouvert .utilisateur {
    order: 4;
    flex: 0 0 100%;
    margin-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--bordure);
  }
  .entete.menu-ouvert .utilisateur .nom,
  .entete.menu-ouvert .lien-deco {
    display: flex;
  }
  .entete.menu-ouvert .form-deco {
    display: flex;
    margin-left: auto;
  }
}


/* == 11. Tableau de bord ========================================================= */

/* Chiffres clés (leçons, quiz, quiz à valider) */
.grille-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.stat {
  display: flex;
  gap: 16px;
  align-items: center;
}
.stat .ico {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat .val {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}
.stat .lib {
  color: var(--texte-2);
  font-size: 14px;
  margin-top: 4px;
}

/* Deux colonnes (derniers éléments) */
.grille-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Listes simples dans les cartes */
.liste {
  list-style: none;
  padding: 0;
}
.liste li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #E2E8F0;
}
.liste li:first-child {
  border-top: 0;
}
.liste .t {
  font-weight: 600;
}
.liste .s {
  font-size: 13px;
  color: var(--texte-2);
}
.liste a.t {
  color: var(--texte);
  text-decoration: none;
}
.liste a.t:hover {
  color: var(--primaire);
  text-decoration: underline;
}

@media (max-width: 820px) {
  .grille-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
  }
  .stat .ico {
    width: 40px;
    height: 40px;
  }
  .stat .val {
    font-size: 26px;
  }
  .grille-2 {
    grid-template-columns: 1fr;
  }
}


/* == 12. Listes, tableaux et pagination ========================================== */

/* Filtres au-dessus des listes (recherche, matière, niveau) */
.filtres {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filtres .champ {
  margin: 0;
}
.filtres .recherche {
  flex: 1;
  min-width: 220px;
}
.filtres select {
  width: 200px;
}

/* Tableau dans une carte */
.tableau-carte {
  padding: 0;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

caption {
  text-align: left;
}

th {
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--texte-2);
  background: #F1F5F9;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid #E2E8F0;
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: 0;
}

/* Titre de la ligne : lien vers le détail, ou texte simple tant que la page n'existe pas */
td .t {
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
}
td a.t:hover {
  color: var(--primaire);
  text-decoration: underline;
}

/* Colonne des boutons d'action */
.actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.pagination nav {
  display: flex;
  gap: 6px;
}
.pagination a,
.pagination span.cur {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: var(--texte);
  font-weight: 600;
}
.pagination span.cur {
  background: var(--primaire);
  color: #fff;
  border-color: var(--primaire);
}
.pagination a {
  background: #DBEAFE;
  border-color: #BFDBFE;
  color: var(--primaire-fonce);
}
.pagination a:hover {
  background: var(--primaire-fonce);
  color: #fff;
}

/* Mobile : chaque ligne du tableau devient une fiche (libellé issu de data-l) */
@media (max-width: 820px) {
  .filtres select {
    width: 100%;
  }
  .filtres .champ {
    width: 100%;
  }
  table,
  thead,
  tbody,
  tr,
  td {
    display: block;
  }
  thead {
    position: absolute;
    left: -9999px;
  }
  tr {
    padding: 14px 16px;
    border-bottom: 1px solid #E2E8F0;
  }
  td {
    padding: 2px 0;
    border: 0;
  }
  td[data-l]::before {
    content: attr(data-l) " : ";
    color: var(--texte-2);
    font-size: 13px;
  }
  .actions {
    justify-content: flex-start;
    margin-top: 8px;
  }
}


/* == 13. Pages « sans défilement » (ordinateur) ===================================
   Avec <body class="sans-scroll">, la page tient dans la hauteur de l'écran :
   seules certaines zones défilent. Sur mobile, défilement normal. */

@media (min-width: 821px) {
  body.sans-scroll {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.sans-scroll .contenu {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  body.sans-scroll .titre-page {
    margin-bottom: 16px;
  }

  /* Formulaire de leçon occupant toute la hauteur disponible */
  .form-plein {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: none;
  }
  .form-plein .champ-extensible {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
  .form-plein .editeur {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .form-plein .editeur textarea,
  .form-plein .editeur trix-editor {
    flex: 1;
    min-height: 120px;
    resize: none;
  }
  .grille-form-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0 20px;
  }
  .form-plein .actions-form {
    margin-top: 16px;
    padding-top: 16px;
  }

  /* Espacements réduits pour tenir dans l'écran */
  body.sans-scroll .grille-stats {
    margin-bottom: 16px;
    gap: 16px;
  }
  body.sans-scroll .stat {
    padding: 16px 20px;
  }
  body.sans-scroll .liste li {
    padding: 9px 0;
  }
  body.sans-scroll .carte {
    padding: 18px 22px;
  }
  body.sans-scroll .tableau-carte {
    padding: 0;
  }
  body.sans-scroll td {
    padding: 9px 16px;
  }
  body.sans-scroll th {
    padding: 9px 16px;
  }
  body.sans-scroll .filtres {
    margin-bottom: 12px;
  }
  body.sans-scroll .pagination {
    margin-top: 10px;
  }
}


/* == 14. Détail d'une leçon ======================================================= */

/* Informations sous le titre (matière, niveau, date) */
.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

/* Contenu de la leçon à gauche, quiz associés à droite */
.grille-detail {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

/* Mise en forme du texte de la leçon */
.texte-lecon h3 {
  font-size: 18px;
  margin: 18px 0 6px;
}
.texte-lecon h3:first-child {
  margin-top: 0;
}
.texte-lecon p {
  margin-bottom: 10px;
}
.texte-lecon ul {
  margin: 0 0 10px 20px;
}

/* Groupe de boutons */
.boutons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (min-width: 821px) {
  body.sans-scroll .grille-detail {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
  }
  body.sans-scroll .grille-detail > .carte {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* Zone qui défile à l'intérieur d'une carte */
  body.sans-scroll .zone-defilante {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
  }
}

@media (max-width: 820px) {
  .grille-detail {
    grid-template-columns: 1fr;
  }
  .boutons .btn {
    flex: 1;
  }
}


/* == 15. Générateur de quiz et écran d'attente ====================================== */

/* Choix unique en « segments » (difficulté) : le bouton radio est masqué, le libellé sert de bouton */
.choix-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.choix-segment input,
.choix-cases input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choix-segment label {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #DBEAFE;
  color: var(--primaire-fonce);
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
}
.choix-segment input:checked + label {
  background: var(--primaire);
  color: #fff;
}
.choix-segment input:focus-visible + label,
.choix-cases input:focus-visible + label {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Cases à cocher en « tuiles » (types de questions) */
.choix-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.choix-cases label {
  margin: 0;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px 8px 42px;
  border-radius: 8px;
  background: #DBEAFE;
  color: var(--primaire-fonce);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  font-size: 15px;
}
.choix-cases label small {
  font-weight: 500;
  font-size: 12px;
}
.choix-cases label::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #fff;
  border: 2px solid var(--primaire-fonce);
}
.choix-cases input:checked + label {
  background: var(--primaire);
  color: #fff;
}
.choix-cases input:checked + label::before {
  content: "✓";
  color: var(--primaire);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #fff;
}
/* Même tuile avec un bouton radio : case ronde */
.choix-cases input[type="radio"] + label::before {
  border-radius: 50%;
}

/* Nombre de questions (boutons − / +) */
.nombre {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nombre input {
  width: 90px;
  text-align: center;
  font-weight: 700;
}
.nombre .btn {
  min-width: 44px;
  padding: 0;
}

/* Paramètres à gauche, aperçu de la leçon à droite */
.grille-gen {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

/* Encart d'information sur l'IA locale */
.encart-ia {
  background: var(--primaire-fonce);
  color: #fff;
  border-radius: var(--rayon);
  padding: 18px 20px;
  margin-top: 16px;
}
.encart-ia h2 {
  font-size: 16px;
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.encart-ia ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
}

/* Aperçu de la leçon, limité à 6 lignes */
.apercu {
  font-size: 14px;
  color: var(--texte-2);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
}

/* Écran d'attente (voile sombre + fenêtre centrée) */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 20;
}

.attente .btn {
  margin-top: 16px;
}

.attente {
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 6px solid #DBEAFE;
  border-top-color: var(--primaire);
  margin: 0 auto 18px;
  animation: tourne 1s linear infinite;
}

@keyframes tourne {
  to {
    transform: rotate(360deg);
  }
}

/* Animation ralentie si l'utilisateur limite les animations */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s;
  }
}

/* Étapes de la génération */
.etapes {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  text-align: left;
  font-size: 14px;
}
.etapes li {
  padding: 6px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.etapes .ok {
  color: var(--succes);
  font-weight: 700;
}
.etapes .encours {
  color: var(--primaire);
  font-weight: 700;
}
.etapes .attend {
  color: var(--texte-2);
}

/* Écran d'attente masqué tant qu'aucune génération n'est lancée */
.voile[hidden] {
  display: none;
}

/* Barre de progression */
.barre-prog {
  height: 8px;
  background: #DBEAFE;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 16px;
}
.barre-prog span {
  display: block;
  height: 100%;
  width: 60%;
  background: var(--primaire);
}
/* Durée inconnue (appel synchrone) : la barre va et vient au lieu de se remplir */
.barre-prog-indeterminee span {
  width: 35%;
  animation: barre-va-et-vient 1.6s ease-in-out infinite alternate;
}
@keyframes barre-va-et-vient {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 65%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .barre-prog-indeterminee span {
    width: 100%;
    animation: none;
  }
}

@media (max-width: 820px) {
  .grille-gen {
    grid-template-columns: 1fr;
  }
  .choix-cases {
    grid-template-columns: 1fr;
  }
}


/* == 16. Détail d'un quiz ========================================================== */

/* Une question */
.question {
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #fff;
}
.question-tete {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.question h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Numéro de la question (pastille) */
.num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primaire-fonce);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Choix de réponse ; la bonne réponse est en vert avec une étiquette texte */
.choix {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.choix li {
  padding: 9px 12px;
  border-radius: 8px;
  background: #F1F5F9;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.choix li.correct {
  background: var(--succes);
  color: #fff;
  font-weight: 600;
}
.choix li .etiq {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Explication et réponse attendue */
.explication {
  margin-top: 10px;
  font-size: 14px;
  background: var(--primaire-clair);
  border-left: 4px solid var(--primaire);
  padding: 8px 12px;
  border-radius: 6px;
}
.reponse-attendue {
  margin-top: 4px;
  font-size: 14px;
  background: var(--succes-clair);
  border-left: 4px solid var(--succes);
  padding: 8px 12px;
  border-radius: 6px;
}

/* Récapitulatif (colonne de droite) */
.recap dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 15px;
}
.recap dt {
  color: var(--texte-2);
}
.recap dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

@media (max-width: 820px) {
  .choix {
    grid-template-columns: 1fr;
  }
}


/* == 17. Modification d'un quiz ===================================================== */

.q-edit .question-tete {
  justify-content: space-between;
}
.q-edit .question-tete > div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.q-edit textarea {
  min-height: 64px;
  resize: vertical;
}

/* Liste des choix modifiables */
.choix-edit {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.choix-edit li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

/* Bouton radio « Bonne réponse » (radio masqué, libellé cliquable) */
.radio-correct {
  position: relative;
}
.radio-correct input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.radio-correct label {
  margin: 0;
  min-height: 44px;
  min-width: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  background: #DBEAFE;
  color: var(--primaire-fonce);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 10px;
}
.radio-correct input:checked + label {
  background: var(--succes);
  color: #fff;
}
.radio-correct input:focus-visible + label {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Accès rapide aux questions (numéros) */
.sommaire {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.sommaire a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #DBEAFE;
  color: var(--primaire-fonce);
  font-weight: 700;
  text-decoration: none;
}
.sommaire a[aria-current] {
  background: var(--primaire);
  color: #fff;
}

/* Boutons de la colonne de droite */
.aside-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.aside-actions .btn {
  width: 100%;
}


/* == 18. Fenêtres de dialogue (suppression, export) ================================== */

.dialogue {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
}

/* Export : fenêtre plus large */
.dialogue-large {
  max-width: 560px;
}

.dialogue .ico-danger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--erreur);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.dialogue h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

.dialogue p {
  color: var(--texte-2);
  margin-bottom: 8px;
}

/* Avertissement de suppression en cascade */
.dialogue .consequence {
  background: var(--erreur-clair);
  border-left: 4px solid var(--erreur);
  color: #7F1D1D;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin: 12px 0 20px;
}

.dialogue .boutons {
  justify-content: flex-end;
}

/* Export : choix du format et du contenu */
.dialogue .choix-segment label small {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.dialogue .choix-segment label {
  flex-direction: column;
  min-height: 56px;
}
.dialogue .choix-cases {
  grid-template-columns: 1fr 1fr;
}
.dialogue fieldset {
  margin-bottom: 16px;
}

@media (max-width: 820px) {
  .dialogue .boutons {
    flex-direction: column-reverse;
  }
  .dialogue .boutons .btn {
    width: 100%;
  }
}


/* == 19. Import d'un fichier texte ================================================== */

/* Libellé et bouton « Importer » sur la même ligne */
.label-ligne {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 6px;
}
.label-ligne label {
  margin: 0;
}

/* Zone de dépôt du fichier */
.depot {
  border: 2px dashed var(--primaire);
  background: var(--primaire-clair);
  border-radius: 12px;
  padding: 26px;
  text-align: center;
  color: var(--primaire-fonce);
}
.depot.survol {
  border-style: solid;
  background: #DBEAFE;
}
.depot .ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primaire);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}
.depot p {
  color: var(--primaire-fonce);
  margin: 0;
}

/* Fichier sélectionné */
.fichier-choisi {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--succes-clair);
  border-left: 4px solid var(--succes);
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 14px;
  font-size: 14px;
  color: #14532D;
}

.fichier-choisi[hidden] {
  display: none;
}

/* Fichier refusé : même bandeau que le fichier accepté, en rouge */
.fichier-refuse {
  background: var(--erreur-clair);
  border-left-color: var(--erreur);
  color: var(--erreur);
  font-weight: 600;
}

/* Règles d'import (formats, taille maximale) */
.regles {
  font-size: 13px;
  color: var(--texte-2);
  margin-top: 12px;
  padding-left: 18px;
}

/* Détail d'un quiz : carte des questions sans marge, la zone défilante porte la marge */
.carte-questions {
  padding: 0;
}
.carte-questions .zone-defilante {
  padding: 16px;
}
.titre-recap {
  font-size: 16px;
  margin-bottom: 12px;
}

/* Pages d'erreur : texte centré dans la carte */
.page-erreur {
  text-align: center;
}
.page-erreur .muted {
  margin: 8px 0 20px;
}

/* Fenêtre de validation d'un quiz : icône de confirmation */
.dialogue .ico-succes {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--succes);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: 700;
}

/* Lien « Données personnelles » (RGPD) : pied des pages connectées et des pages
   de connexion ; page d'information plus large que la carte de connexion */
/* Pied de page toujours en bas de l'écran, quelle que soit la hauteur du contenu */
body:has(> .pied) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Le contenu grandit pour pousser le pied en bas, et peut rétrécir : sur les pages
   « sans défilement » (section 13), il garde ainsi la hauteur de l'écran et seules
   ses zones internes défilent. Ailleurs, min-height: auto l'empêche de rétrécir
   sous la hauteur de son contenu. */
body:has(> .pied) > .contenu {
  flex: 1 1 auto;
  width: 100%;
}
.pied {
  padding: 6px 16px 10px;
  text-align: center;
  font-size: 13px;
}
.pied a,
.pied-connexion a {
  color: var(--texte-2);
}
.pied-connexion {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
}
.connexion.large {
  max-width: 760px;
}
.donnees-perso h2 {
  font-size: 18px;
  margin: 22px 0 8px;
}
.donnees-perso p,
.donnees-perso li {
  margin-bottom: 8px;
}
.donnees-perso ul {
  padding-left: 20px;
}
.donnees-perso table {
  width: 100%;
  margin: 8px 0 12px;
}
@media (min-width: 821px) {
  body.sans-scroll .zone-donnees-perso {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}