/* =========================================================================
   BioGladys — feuille de style unique
   =========================================================================

   Organisation du fichier :
      1. Variables (couleurs, espacements, arrondis)
      2. Remise à zéro et bases
      3. Structure (en-tête, contenu, pied)
      4. Éléments communs (boutons, cartes, messages, formulaires)
      5. Pages publiques (accueil, connexion, rejoindre)
      6. Espace élève (chapitres, fiches, progression)
      7. Exercices (entraînement et quiz)
      8. Quiz en direct — écran projeté et écran élève
      9. Espace enseignante
     10. Adaptation aux petits écrans
     11. Images des fiches et bibliothèque
     12. Décor de fond (motifs de biologie)
     13. Questions des élèves et application mobile

   Aucune police extérieure n'est chargée : la politique de sécurité du
   site interdit toute ressource distante, et une police téléchargée
   ralentirait le premier affichage sur le téléphone d'une élève en 4G.
   ========================================================================= */

/* =========================================================================
   1. Variables
   ========================================================================= */
:root {
  /* Couleurs de marque — un violet prune profond, réchauffé de rose et
     de corail. Assez doux pour un usage long, assez contrasté pour être
     lisible au vidéoprojecteur. */
  --prune:        #4a2545;
  --prune-clair:  #6d3a63;
  --prune-encre:  #2e1429;
  --rose:         #e0567a;
  --rose-clair:   #f7d9e2;
  --corail:       #ff8a65;
  --menthe:       #14a98b;
  --menthe-clair: #d6f3ec;
  --ambre:        #e8a33d;
  --ambre-clair:  #fdf0d9;
  --rouge:        #d64545;
  --rouge-clair:  #fbe0e0;

  /* Fonds et textes */
  --creme:     #fdf9f7;
  --blanc:     #ffffff;
  --sable:     #f6ebe6;
  --bord:      #ecdcd6;
  --texte:     #34212f;
  --texte-doux:#7a6672;

  /* Rythme */
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  24px;
  --r-xl: 32px;

  --ombre-s: 0 1px 2px rgba(74, 37, 69, .06), 0 2px 8px rgba(74, 37, 69, .05);
  --ombre-m: 0 2px 6px rgba(74, 37, 69, .07), 0 12px 28px rgba(74, 37, 69, .08);
  --ombre-l: 0 8px 20px rgba(74, 37, 69, .10), 0 24px 56px rgba(74, 37, 69, .12);

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;

  --largeur: 1180px;
}

/* =========================================================================
   2. Remise à zéro et bases
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* --- L'attribut « hidden » doit gagner, toujours ---------------------------

   PIEGE CLASSIQUE, et il a mordu deux fois sur ce site.

   L'attribut HTML « hidden » ne masque un element que par la feuille de
   style du navigateur, qui dit « [hidden] { display: none } ». Une simple
   classe comme « .case-question { display: flex } » est PLUS SPECIFIQUE :
   elle l'ecrase, et l'element reste visible alors que le JavaScript croit
   l'avoir cache.

   Les deux cas rencontres le 2026-08-26 :

     * le filtre de recherche au lancement d'un quiz ne masquait AUCUNE
       ligne — defaut present depuis l'origine, jamais vu parce que le
       compteur, lui, se mettait bien a jour ;
     * la proposition d'installer l'application restait affichee en
       permanence, et le bouton « Compris » ne la faisait pas partir.

   Cette regle unique regle les deux, et tous les cas a venir. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--creme);
  /* Deux halos très doux en fond : la page respire sans image à charger. */
  background-image:
    radial-gradient(900px 500px at 12% -10%, rgba(224, 86, 122, .10), transparent 70%),
    radial-gradient(800px 460px at 95% 0%,   rgba(255, 138, 101, .10), transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.25;
  color: var(--prune);
  font-weight: 700;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--rose); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

mark {
  background: linear-gradient(transparent 55%, var(--rose-clair) 55%);
  color: inherit;
  padding: 0 .1em;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--bord);
  margin: 1.6rem 0;
}

/* Le contour de mise au point reste visible : c'est indispensable pour
   qui navigue au clavier, et cela ne gêne personne d'autre. */
:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Personne n'aime être secoué : on respecte le réglage du système. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   3. Structure
   ========================================================================= */
.entete {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
  z-index: 50;
}
.entete-dedans {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: .7rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--prune);
  text-decoration: none;
  flex-shrink: 0;
}
.marque:hover { text-decoration: none; }
/* Le logo est un disque : plus de tuile en degrade derriere lui. L'ombre
   portee reste, elle le decolle du fond creme sans l'encadrer. */
.marque-picto {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: var(--ombre-s);
  flex-shrink: 0;
}
.marque-picto svg { display: block; width: 100%; height: 100%; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }

/* --- L'apostrophe d'Anato'metier, rendue comme le noyau du logo --------
   Le caractere reste dans le HTML — un lecteur d'ecran, un moteur de
   recherche et un copier-coller doivent recuperer « Anato'metier » et non
   « Anatometier ». Il est seulement masque visuellement (text-indent hors
   cadre + overflow), et remplace par le disque.

   « vertical-align » le remonte a la hauteur d'une vraie apostrophe :
   pose sur la ligne de base, le disque ressemblerait a un point. */
.marque-point {
  display: inline-block;
  width: .3em;
  height: .3em;
  margin: 0 .07em;
  border-radius: 50%;
  background: var(--rose);
  vertical-align: .46em;
  font-style: normal;
  text-indent: -99em;
  overflow: hidden;
}
.marque-texte strong { font-size: 1.12rem; letter-spacing: -.02em; }
.marque-texte small { font-size: .72rem; color: var(--texte-doux); }

.menu {
  display: flex;
  gap: .25rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.menu a {
  padding: .45rem .8rem;
  border-radius: 999px;
  color: var(--prune);
  font-size: .92rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.menu a:hover { background: var(--sable); text-decoration: none; }
.menu a.lien-fort {
  background: linear-gradient(135deg, var(--rose), var(--corail));
  color: #fff;
  box-shadow: var(--ombre-s);
}
.menu a.lien-fort:hover { filter: brightness(1.06); }

.compte-menu {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-left: .9rem;
  border-left: 1px solid var(--bord);
}
.compte-nom {
  display: flex; align-items: center; gap: .45rem;
  color: var(--prune); font-size: .9rem; font-weight: 600;
}
.pastille {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--prune-clair), var(--rose));
  color: #fff; font-size: .85rem; font-weight: 700;
}
.bouton-lien {
  background: none; border: 0; padding: 0;
  color: var(--texte-doux); font: inherit; font-size: .82rem;
  cursor: pointer; text-decoration: underline;
}
.bouton-lien:hover { color: var(--rose); }

.bouton-menu {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: .4rem; margin-left: auto;
}
.bouton-menu span {
  display: block; width: 22px; height: 2px;
  background: var(--prune); border-radius: 2px;
  margin: 4px 0; transition: transform .2s, opacity .2s;
}

.contenu {
  flex: 1;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1.2rem 4rem;
}
.plein { flex: 1; width: 100%; }

.pied {
  border-top: 1px solid var(--bord);
  padding: 1.4rem 1.2rem;
  text-align: center;
  font-size: .82rem;
  color: var(--texte-doux);
}


/* --- Pied de page : mention de réalisation -------------------------- */
/* Présente sur TOUTES les pages, y compris celles sans en-tête (connexion,
   quiz projeté) : ce sont celles que l'on regarde le plus longtemps.
   Volontairement très discrète — elle ne doit jamais concurrencer le
   contenu du cours. */
.pied .copyright {
  margin: .5rem 0 0;
  font-size: .72rem;
  color: var(--texte-doux);
  opacity: .75;
}
.pied .copyright a { color: inherit; text-decoration: underline; }
.pied .copyright a:hover { color: var(--prune-clair); }

/* Sur les pages plein écran, le pied se réduit à cette seule ligne et
   ne prend ni bordure ni hauteur : le quiz garde tout l'écran. */
.pied-mince {
  border-top: 0;
  padding: .6rem 1rem 1rem;
}
.pied-mince .copyright { margin: 0; }

/* --- Fil d'Ariane --------------------------------------------------- */
.fil {
  font-size: .85rem;
  color: var(--texte-doux);
  margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.fil a { color: var(--texte-doux); }
.fil a:hover { color: var(--rose); }
.fil span[aria-hidden] { opacity: .5; }

/* --- En-tête de page -------------------------------------------------- */
.titre-page {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.titre-page p { color: var(--texte-doux); margin: .2rem 0 0; }
.titre-page .actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* =========================================================================
   4. Éléments communs
   ========================================================================= */

/* --- Boutons ---------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .68rem 1.25rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, box-shadow .15s, filter .15s;
  background: linear-gradient(135deg, var(--rose), var(--corail));
  color: #fff;
  box-shadow: var(--ombre-s);
}
.bouton:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--ombre-m); }
.bouton:active { transform: translateY(0); }
.bouton[disabled], .bouton:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.bouton.secondaire {
  background: var(--blanc);
  color: var(--prune);
  border: 1px solid var(--bord);
  box-shadow: none;
}
.bouton.secondaire:hover { background: var(--sable); }

.bouton.sombre { background: linear-gradient(135deg, var(--prune), var(--prune-clair)); }
.bouton.danger { background: linear-gradient(135deg, #c9403f, var(--rouge)); }
.bouton.menthe { background: linear-gradient(135deg, #0f9a7e, var(--menthe)); }

.bouton.petit { padding: .4rem .85rem; font-size: .85rem; }
.bouton.grand { padding: .95rem 1.9rem; font-size: 1.08rem; }
.bouton.large { width: 100%; }

/* --- Cartes ------------------------------------------------------------ */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1.4rem;
  box-shadow: var(--ombre-s);
}
.carte-titre {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.carte-titre h2, .carte-titre h3 { margin: 0; }

.grille { display: grid; gap: 1.1rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --- Chiffres clés ------------------------------------------------------ */
.chiffres { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.chiffre {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  padding: 1rem 1.1rem;
  box-shadow: var(--ombre-s);
}
.chiffre b {
  display: block;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--prune);
  letter-spacing: -.03em;
}
.chiffre span { font-size: .82rem; color: var(--texte-doux); }

/* --- Messages ----------------------------------------------------------- */
.messages {
  max-width: var(--largeur);
  margin: 1rem auto 0;
  padding: 0 1.2rem;
  display: grid;
  gap: .6rem;
}
.message {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: var(--r-m);
  font-size: .93rem;
  border: 1px solid;
  animation: apparait .3s ease;
}
.message-picto {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; color: #fff;
}
.message-succes { background: var(--menthe-clair); border-color: #a9e3d5; color: #0b5e4c; }
.message-succes .message-picto { background: var(--menthe); }
.message-erreur { background: var(--rouge-clair); border-color: #f3bcbc; color: #8f2020; }
.message-erreur .message-picto { background: var(--rouge); }
.message-info   { background: var(--ambre-clair); border-color: #f2d9a8; color: #7a5310; }
.message-info .message-picto { background: var(--ambre); }
.message-fermer {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: inherit; opacity: .55;
}
.message-fermer:hover { opacity: 1; }

@keyframes apparait { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Formulaires --------------------------------------------------------- */
.champ { margin-bottom: 1.1rem; }
.champ > label,
.champ-titre {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  color: var(--prune);
  margin-bottom: .35rem;
}
.champ .aide {
  display: block;
  font-size: .8rem;
  color: var(--texte-doux);
  margin-top: .3rem;
  font-weight: 400;
}

input[type=text], input[type=password], input[type=search], input[type=number],
select, textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  font: inherit;
  font-size: .96rem;
  color: var(--texte);
  background: var(--blanc);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(224, 86, 122, .16);
}
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
textarea.code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .9rem;
}

.ligne-champs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.case {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .93rem; cursor: pointer;
}
.case input { width: auto; margin-top: .25rem; accent-color: var(--rose); }

/* --- Étiquettes ---------------------------------------------------------- */
.etiquette {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  background: var(--sable); color: var(--prune);
  white-space: nowrap;
}
.etiquette.rose   { background: var(--rose-clair); color: #9c2545; }
.etiquette.menthe { background: var(--menthe-clair); color: #0b5e4c; }
.etiquette.ambre  { background: var(--ambre-clair); color: #7a5310; }
.etiquette.rouge  { background: var(--rouge-clair); color: #8f2020; }
.etiquette.grise  { background: #eee9ec; color: var(--texte-doux); }

/* --- Jauges --------------------------------------------------------------- */
.jauge {
  height: 8px;
  background: var(--sable);
  border-radius: 999px;
  overflow: hidden;
}
.jauge > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--rose), var(--corail));
  border-radius: 999px;
  transition: width .5s ease;
}
.jauge.verte > i  { background: linear-gradient(90deg, #0f9a7e, var(--menthe)); }
.jauge.ambre > i  { background: linear-gradient(90deg, #d18f24, var(--ambre)); }
.jauge.rouge > i  { background: linear-gradient(90deg, #b93636, var(--rouge)); }

/* --- Zone vide ------------------------------------------------------------ */
.vide {
  text-align: center;
  padding: 2.6rem 1.4rem;
  color: var(--texte-doux);
  background: var(--blanc);
  border: 1px dashed var(--bord);
  border-radius: var(--r-l);
}
.vide .picto { font-size: 2.4rem; display: block; margin-bottom: .6rem; opacity: .5; }

/* --- Tableaux -------------------------------------------------------------- */
.tableau { width: 100%; overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td {
  padding: .7rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--bord);
  vertical-align: middle;
}
.tableau th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texte-doux); font-weight: 700;
}
.tableau tbody tr:hover { background: #fdf6f3; }
.tableau td.serre { white-space: nowrap; }

/* =========================================================================
   5. Pages publiques
   ========================================================================= */

/* --- Accueil ------------------------------------------------------------- */
.heros {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 4rem 1.2rem 2.5rem;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3rem;
  align-items: center;
}
.heros-texte h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  margin-bottom: .6rem;
}
.heros-texte .accroche {
  font-size: 1.12rem;
  color: var(--texte-doux);
  max-width: 34rem;
  margin-bottom: 1.8rem;
}
.heros-signature {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .85rem; color: var(--texte-doux);
  margin-bottom: 1.2rem;
  padding: .35rem .85rem .35rem .35rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 999px;
}
.heros-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.heros-illu { display: grid; place-items: center; }
.heros-illu svg { width: 100%; max-width: 380px; height: auto; }

.bandeau-niveaux {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1rem 1.2rem 4rem;
}
.bandeau-niveaux h2 { text-align: center; margin-bottom: .4rem; }
.bandeau-niveaux .sous { text-align: center; color: var(--texte-doux); margin-bottom: 2rem; }

.carte-niveau {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1.3rem;
  box-shadow: var(--ombre-s);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .2s;
}
.carte-niveau::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--teinte, var(--rose));
}
a.carte-niveau:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); text-decoration: none; }
.carte-niveau .famille {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--teinte, var(--rose));
}
.carte-niveau h3 { margin: 0; font-size: 1.12rem; }
.carte-niveau p { font-size: .88rem; color: var(--texte-doux); margin: 0; }
.carte-niveau .compteurs {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .7rem;
}

/* --- Connexion et rejoindre ------------------------------------------- */
.ecran-centre {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.2rem;
}
.boite {
  width: 100%;
  max-width: 430px;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  padding: 2.2rem;
  box-shadow: var(--ombre-l);
}
.boite-large { max-width: 520px; }
.boite .logo-boite {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 1.1rem;
  box-shadow: var(--ombre-m);
}
.boite .logo-boite svg { display: block; width: 100%; height: 100%; }
.boite h1 { text-align: center; font-size: 1.5rem; margin-bottom: .3rem; }
.boite .sous { text-align: center; color: var(--texte-doux); font-size: .9rem; margin-bottom: 1.8rem; }
.boite-pied {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--bord);
  text-align: center; font-size: .85rem; color: var(--texte-doux);
}

/* Champ du code à 6 chiffres */
.champ-code input {
  font-size: 2.1rem;
  text-align: center;
  letter-spacing: .5em;
  padding: .8rem .5rem .8rem 1.3rem;
  font-weight: 700;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--prune);
}

/* =========================================================================
   6. Espace élève
   ========================================================================= */
.salut {
  background: linear-gradient(135deg, var(--prune), var(--prune-clair) 60%, #8a4a72);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 1.8rem 2rem;
  margin-bottom: 1.8rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ombre-m);
}
.salut::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,101,.35), transparent 65%);
}
.salut h1 { color: #fff; margin-bottom: .25rem; position: relative; }
.salut p { color: rgba(255,255,255,.82); margin: 0; position: relative; }
.salut .raccourcis { display: flex; gap: .7rem; margin-top: 1.2rem; flex-wrap: wrap; position: relative; }
.salut .bouton.secondaire {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.salut .bouton.secondaire:hover { background: rgba(255,255,255,.24); }

.carte-chapitre {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--ombre-s);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform .15s, box-shadow .2s;
}
a.carte-chapitre:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); text-decoration: none; }
.carte-chapitre .haut { display: flex; align-items: center; gap: .7rem; }
.carte-chapitre .numero {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--rose-clair);
  color: #9c2545;
  font-weight: 700; font-size: 1rem;
}
.carte-chapitre h3 { margin: 0; font-size: 1.05rem; }
.carte-chapitre .resume { font-size: .87rem; color: var(--texte-doux); margin: 0; }
.carte-chapitre .bas {
  margin-top: auto; padding-top: .6rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--texte-doux);
}
.carte-chapitre .progression-mini { flex: 1; min-width: 90px; }

/* --- Fiche de révision --------------------------------------------------- */
.fiche-corps {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 2rem 2.2rem;
  box-shadow: var(--ombre-s);
  font-size: 1.02rem;
  max-width: 780px;
}
.fiche-corps h3 {
  font-size: 1.25rem;
  margin: 1.8rem 0 .7rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--rose-clair);
}
.fiche-corps h3:first-child { margin-top: 0; }
.fiche-corps h4 { font-size: 1.05rem; margin: 1.3rem 0 .5rem; color: var(--prune-clair); }
.fiche-corps ul, .fiche-corps ol { padding-left: 1.3rem; margin: 0 0 1em; }
.fiche-corps li { margin-bottom: .4em; }
.fiche-corps li::marker { color: var(--rose); font-weight: 700; }

.encadre {
  display: flex; gap: .8rem;
  padding: .95rem 1.1rem;
  border-radius: var(--r-m);
  margin: 1.2rem 0;
  font-size: .95rem;
  border: 1px solid;
}
.encadre .picto {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .8rem; color: #fff;
}
.encadre div > :last-child { margin-bottom: 0; }
.encadre.retenir   { background: var(--menthe-clair); border-color: #a9e3d5; }
.encadre.retenir .picto   { background: var(--menthe); }
.encadre.attention { background: var(--rouge-clair); border-color: #f3bcbc; }
.encadre.attention .picto { background: var(--rouge); }
.encadre.anecdote  { background: var(--ambre-clair); border-color: #f2d9a8; }
.encadre.anecdote .picto  { background: var(--ambre); }

.tableau-fiche { overflow-x: auto; margin: 1.2rem 0; }
.tableau-fiche table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau-fiche th {
  background: var(--sable); color: var(--prune);
  padding: .6rem .8rem; text-align: left; font-weight: 700;
}
.tableau-fiche td { padding: .6rem .8rem; border-top: 1px solid var(--bord); }
.tableau-fiche tr:nth-child(even) td { background: #fdfaf9; }

.navigation-fiches {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 1.6rem; flex-wrap: wrap;
}

/* --- Badges -------------------------------------------------------------- */
.badges { display: flex; gap: .7rem; flex-wrap: wrap; }
.badge {
  display: flex; align-items: center; gap: .5rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: .4rem .9rem .4rem .5rem;
  box-shadow: var(--ombre-s);
}
.badge .picto {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ambre-clair);
  font-size: 1rem;
}
.badge b { font-size: .85rem; color: var(--prune); display: block; line-height: 1.2; }
.badge small { font-size: .72rem; color: var(--texte-doux); }

/* =========================================================================
   7. Exercices (entraînement et quiz)
   ========================================================================= */
.exo-cadre {
  max-width: 780px;
  margin: 0 auto;
}
.exo-barre {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.2rem;
}
.exo-barre .progression-serie { flex: 1; }
.exo-compteur { font-size: .88rem; color: var(--texte-doux); font-weight: 600; white-space: nowrap; }

.exo-carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--ombre-m);
}
.exo-type {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .8rem;
}
.exo-enonce {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--prune);
  line-height: 1.45;
  margin-bottom: 1.5rem;
}
.exo-consigne { font-size: .85rem; color: var(--texte-doux); margin-bottom: 1rem; }

/* --- Choix multiples ----------------------------------------------------- */
.choix { display: grid; gap: .7rem; }
.choix button {
  display: flex; align-items: center; gap: .9rem;
  width: 100%;
  padding: 1rem 1.2rem;
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  font: inherit;
  font-size: 1.02rem;
  text-align: left;
  color: var(--texte);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.choix button:hover:not(:disabled) { border-color: var(--rose); background: #fffafb; }
.choix button:active:not(:disabled) { transform: scale(.995); }
.choix button .lettre {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--sable);
  color: var(--prune);
  font-weight: 700; font-size: .9rem;
  transition: background .15s, color .15s;
}
.choix button.choisi { border-color: var(--rose); background: var(--rose-clair); }
.choix button.choisi .lettre { background: var(--rose); color: #fff; }
.choix button.juste { border-color: var(--menthe); background: var(--menthe-clair); }
.choix button.juste .lettre { background: var(--menthe); color: #fff; }
.choix button.faux { border-color: var(--rouge); background: var(--rouge-clair); }
.choix button.faux .lettre { background: var(--rouge); color: #fff; }
.choix button:disabled { cursor: default; }
.choix button .marque-fin { margin-left: auto; font-size: 1.1rem; font-weight: 700; }

/* --- Vrai / faux --------------------------------------------------------- */
.vrai-faux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vrai-faux button {
  padding: 1.6rem 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: var(--r-l);
  border: 2px solid var(--bord);
  background: var(--blanc);
  color: var(--prune);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
}
.vrai-faux button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--rose); }
.vrai-faux button.choisi { border-color: var(--rose); background: var(--rose-clair); }
.vrai-faux button.juste  { border-color: var(--menthe); background: var(--menthe-clair); color: #0b5e4c; }
.vrai-faux button.faux   { border-color: var(--rouge); background: var(--rouge-clair); color: #8f2020; }

/* --- Texte à trous -------------------------------------------------------- */
.trous {
  font-size: 1.18rem;
  line-height: 2.4;
  color: var(--prune);
}
.trous input {
  display: inline-block;
  width: auto;
  min-width: 6ch;
  padding: .25rem .6rem;
  margin: 0 .2rem;
  border: 0;
  border-bottom: 2px dashed var(--rose);
  border-radius: 6px 6px 0 0;
  background: #fffafb;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  color: var(--prune);
}
.trous input.juste { border-bottom-color: var(--menthe); background: var(--menthe-clair); }
.trous input.faux  { border-bottom-color: var(--rouge); background: var(--rouge-clair); }
.trous .correction {
  display: inline-block;
  margin-left: .3rem;
  font-size: .85rem;
  color: var(--menthe);
  font-weight: 700;
}

/* --- Associations ---------------------------------------------------------- */
.paires { display: grid; gap: .7rem; }
.paire {
  display: grid;
  grid-template-columns: 1fr auto 1.1fr;
  gap: .7rem;
  align-items: center;
}
.paire .terme {
  padding: .8rem 1rem;
  background: var(--sable);
  border-radius: var(--r-m);
  font-weight: 600;
  color: var(--prune);
  font-size: .98rem;
}
.paire .fleche { color: var(--texte-doux); font-size: 1.1rem; }
.paire select { font-size: .95rem; }
.paire.juste select { border-color: var(--menthe); background: var(--menthe-clair); }
.paire.faux select  { border-color: var(--rouge); background: var(--rouge-clair); }
.paire .bonne-reponse {
  grid-column: 3; font-size: .8rem; color: var(--menthe); font-weight: 700; margin-top: -.3rem;
}

/* --- Schéma à annoter ------------------------------------------------------- */
.schema-zone {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.4rem;
  align-items: start;
}
.schema-dessin {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  padding: .8rem;
  position: relative;
}
.schema-dessin svg { width: 100%; height: auto; display: block; }
.schema-cible {
  fill: rgba(224, 86, 122, .10);
  stroke: var(--rose);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  cursor: pointer;
  transition: fill .15s;
}
.schema-cible.survol { fill: rgba(224, 86, 122, .25); }
.schema-cible.remplie { fill: rgba(20, 169, 139, .14); stroke: var(--menthe); stroke-dasharray: none; }
.schema-numero {
  font-size: 13px; font-weight: 700; fill: var(--prune);
  pointer-events: none; user-select: none;
}
.schema-reperes { display: grid; gap: .55rem; }
.schema-repere {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .6rem;
  align-items: center;
}
.schema-repere .num {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--prune); color: #fff;
  font-size: .8rem; font-weight: 700;
}
.schema-repere select { font-size: .9rem; padding: .5rem .6rem; }
.schema-repere.juste select { border-color: var(--menthe); background: var(--menthe-clair); }
.schema-repere.faux select  { border-color: var(--rouge); background: var(--rouge-clair); }

/* --- Correction ------------------------------------------------------------- */
.verdict {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-m);
  border: 1px solid;
  animation: apparait .25s ease;
}
.verdict.juste { background: var(--menthe-clair); border-color: #a9e3d5; }
.verdict.faux  { background: var(--rouge-clair); border-color: #f3bcbc; }
.verdict .titre-verdict {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem;
}
.verdict.juste .titre-verdict { color: #0b5e4c; }
.verdict.faux .titre-verdict  { color: #8f2020; }
.verdict p { font-size: .93rem; margin: 0; }
.verdict .explication { margin-top: .5rem; color: var(--texte); }

.exo-pied {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap;
}

/* --- Bilan de fin de série ------------------------------------------------- */
.bilan { text-align: center; padding: 1rem 0; }
.bilan .anneau {
  width: 170px; height: 170px;
  margin: 0 auto 1.4rem;
  position: relative;
  display: grid; place-items: center;
}
.bilan .anneau svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bilan .anneau .fond { fill: none; stroke: var(--sable); stroke-width: 12; }
.bilan .anneau .part {
  fill: none; stroke: url(#degrade-score); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}
.bilan .anneau b { font-size: 2.6rem; color: var(--prune); line-height: 1; }
.bilan .anneau span { font-size: .8rem; color: var(--texte-doux); }
.bilan h2 { margin-bottom: .3rem; }
.bilan .encouragement { color: var(--texte-doux); margin-bottom: 1.6rem; }
.bilan .actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* --- Choix du mode d'entraînement -------------------------------------------- */
.modes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mode-carte {
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1.3rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: transform .15s, border-color .15s, box-shadow .2s;
}
.mode-carte:hover { transform: translateY(-3px); border-color: var(--rose); box-shadow: var(--ombre-m); }
.mode-carte .picto { font-size: 1.8rem; display: block; margin-bottom: .5rem; }
.mode-carte b { display: block; color: var(--prune); font-size: 1.05rem; margin-bottom: .25rem; }
.mode-carte small { color: var(--texte-doux); font-size: .85rem; line-height: 1.45; display: block; }

/* =========================================================================
   8. Quiz en direct
   ========================================================================= */

/* --- Écran projeté (professeure) --------------------------------------- */
.page-piloter {
  background: var(--prune-encre);
  background-image:
    radial-gradient(900px 600px at 15% 0%, rgba(224, 86, 122, .22), transparent 65%),
    radial-gradient(800px 500px at 90% 100%, rgba(255, 138, 101, .18), transparent 65%);
  color: #fff;
}
.piloter {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.4rem clamp(1rem, 4vw, 3rem) 2rem;
}
.piloter h1, .piloter h2, .piloter h3 { color: #fff; }
.piloter-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.piloter-entete .titre-quiz { font-size: 1.1rem; font-weight: 600; opacity: .85; }

.code-partie {
  display: flex; align-items: center; gap: 1.2rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-l);
  padding: .8rem 1.4rem;
}
.code-partie .libelle { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.code-partie .valeur {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .12em;
  font-family: ui-monospace, Consolas, monospace;
  line-height: 1;
  background: linear-gradient(135deg, #fff, #ffd9c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.code-partie .adresse { font-size: .9rem; opacity: .75; }

.salle-attente { flex: 1; display: flex; flex-direction: column; }
.salle-attente .compte-joueurs {
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--corail));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.liste-joueurs {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 1.5rem 0;
  align-content: flex-start;
  flex: 1;
}
/* Les participants sont des boutons : cliquer sur l'un d'eux permet à
   l'enseignante de le retirer du quiz. D'où la remise à zéro des styles
   de bouton, pour qu'ils gardent l'aspect d'une simple étiquette. */
.jeton-joueur {
  padding: .55rem 1.1rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  animation: arrive .35s cubic-bezier(.2,.9,.3,1.3);
}
.jeton-joueur:hover {
  background: rgba(214, 69, 69, .35);
  border-color: var(--rouge);
}
.jeton-joueur.invite { opacity: .78; font-style: italic; }
@keyframes arrive { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }

.question-projetee { flex: 1; display: flex; flex-direction: column; }
.question-projetee .enonce-grand {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.28;
  margin: 1rem 0 1.8rem;
  max-width: 24ch;
}
.grille-reponses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.reponse-projetee {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--r-l);
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.16);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: background .3s, border-color .3s;
}
.reponse-projetee .lettre {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
  font-weight: 800;
}
.reponse-projetee.juste {
  background: rgba(20, 169, 139, .28);
  border-color: var(--menthe);
}
.reponse-projetee.juste .lettre { background: var(--menthe); }
.reponse-projetee.ecartee { opacity: .45; }
/* Barre de proportion des votes, dessinée derrière le texte. */
.reponse-projetee .barre-votes {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,.10);
  transition: width .8s cubic-bezier(.2,.8,.3,1);
  z-index: 0;
}
.reponse-projetee > * { position: relative; z-index: 1; }
.reponse-projetee .nb-votes { margin-left: auto; font-size: 1rem; opacity: .85; }

.chrono {
  --part: 1;
  height: 10px;
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.chrono > i {
  display: block; height: 100%;
  width: calc(var(--part) * 100%);
  background: linear-gradient(90deg, var(--menthe), var(--ambre) 60%, var(--rouge));
  transition: width .95s linear;
}
.chrono.urgence > i { animation: pulse .6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.piloter-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.compteur-reponses { font-size: 1.15rem; font-weight: 600; }
.compteur-reponses b { font-size: 1.7rem; }
.piloter .bouton.secondaire {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}
.piloter .bouton.secondaire:hover { background: rgba(255,255,255,.2); }

/* Podium et classement projeté */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.2rem; margin: 2rem 0; }
.marche { text-align: center; width: clamp(110px, 18vw, 190px); }
.marche .socle {
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  display: grid; place-items: center;
  font-size: 2rem; font-weight: 800;
  border: 1px solid rgba(255,255,255,.2);
  border-bottom: 0;
}
.marche.or     .socle { height: 170px; background: linear-gradient(180deg, #ffd76e, #e8a33d); color: #4a2a00; }
.marche.argent .socle { height: 130px; background: linear-gradient(180deg, #e6e6ee, #b9bcc9); color: #33343d; }
.marche.bronze .socle { height: 100px; background: linear-gradient(180deg, #f0b184, #c9764a); color: #43220f; }
.marche .nom { font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.marche .pts { font-size: .85rem; opacity: .8; }

.classement-liste { display: grid; gap: .5rem; max-width: 620px; margin: 0 auto; }
.classement-ligne {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.1rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-m);
}
.classement-ligne .rang {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.16); font-weight: 800; font-size: .9rem;
}
.classement-ligne .pseudo { font-weight: 600; }
.classement-ligne .score { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.classement-ligne.moi { background: rgba(224, 86, 122, .3); border-color: var(--rose); }

/* --- Écran de l'élève pendant un quiz ------------------------------------ */
.page-jeu { background: var(--creme); }
.jeu {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}
.jeu-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
  font-size: .88rem;
}
.jeu-entete .mon-score {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-weight: 700; color: var(--prune);
  font-variant-numeric: tabular-nums;
}
.jeu-corps { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.jeu-attente { text-align: center; padding: 2rem 1rem; }
.jeu-attente .picto-attente {
  font-size: 3rem; display: block; margin-bottom: 1rem;
  animation: respire 2.4s ease-in-out infinite;
}
@keyframes respire { 50% { transform: scale(1.12); opacity: .75; } }

.jeu-verdict {
  text-align: center;
  padding: 2.4rem 1.4rem;
  border-radius: var(--r-xl);
  animation: apparait .3s ease;
}
.jeu-verdict.juste { background: var(--menthe-clair); }
.jeu-verdict.faux  { background: var(--rouge-clair); }
.jeu-verdict .grand-picto { font-size: 3.6rem; display: block; margin-bottom: .6rem; }
.jeu-verdict h2 { margin-bottom: .3rem; }
.jeu-verdict.juste h2 { color: #0b5e4c; }
.jeu-verdict.faux h2  { color: #8f2020; }
.jeu-verdict .points { font-size: 1.6rem; font-weight: 800; color: var(--prune); }

/* =========================================================================
   9. Espace enseignante
   ========================================================================= */
.admin-grille { display: grid; grid-template-columns: 260px 1fr; gap: 1.6rem; align-items: start; }

.onglets-niveaux {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: .3rem;
}
.onglets-niveaux a {
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--bord);
  color: var(--prune);
  font-size: .88rem;
  font-weight: 600;
}
.onglets-niveaux a:hover { background: var(--sable); text-decoration: none; }
.onglets-niveaux a.actif {
  background: linear-gradient(135deg, var(--prune), var(--prune-clair));
  color: #fff; border-color: transparent;
}

.ligne-chapitre {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  margin-bottom: .6rem;
}
.ligne-chapitre .infos { flex: 1; min-width: 0; }
.ligne-chapitre .infos b { display: block; color: var(--prune); }
.ligne-chapitre .infos small { color: var(--texte-doux); font-size: .82rem; }
.ligne-chapitre .compteurs { display: flex; gap: .35rem; flex-wrap: wrap; }
.ligne-chapitre .commandes { display: flex; gap: .3rem; align-items: center; }
.ligne-chapitre.brouillon { opacity: .72; border-style: dashed; }

.bouton-icone {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--bord);
  background: var(--blanc);
  color: var(--prune);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: .95rem;
  transition: background .15s, border-color .15s;
}
.bouton-icone:hover { background: var(--sable); border-color: var(--rose); }
/* Un bouton-icone peut etre un <a> (renvoi vers une confirmation) autant
   qu'un <button> : il lui faut donc de quoi ne pas etre souligne. */
.bouton-icone { text-decoration: none; flex-shrink: 0; }
.bouton-icone.danger { color: var(--rouge); }
.bouton-icone.danger:hover { background: var(--rouge-clair); border-color: var(--rouge); color: var(--rouge); }

.ligne-question {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .85rem 1rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  margin-bottom: .55rem;
}
.ligne-question .type-picto {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px; display: grid; place-items: center;
  background: var(--rose-clair); color: #9c2545; font-size: 1rem;
}
.ligne-question .enonce { flex: 1; min-width: 0; font-size: .93rem; }
.ligne-question .enonce small { display: block; color: var(--texte-doux); font-size: .78rem; margin-top: .15rem; }

/* --- Aide-mémoire de la syntaxe des fiches ------------------------------- */
.aide-syntaxe {
  background: var(--sable);
  border-radius: var(--r-m);
  padding: 1rem 1.2rem;
  font-size: .85rem;
}
.aide-syntaxe h4 { margin-bottom: .6rem; font-size: .9rem; }
.aide-syntaxe dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; }
.aide-syntaxe dt {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--blanc);
  padding: .1rem .45rem;
  border-radius: 5px;
  font-size: .82rem;
  white-space: nowrap;
}
.aide-syntaxe dd { margin: 0; color: var(--texte-doux); }

/* --- Éditeur de propositions --------------------------------------------- */
.proposition {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .6rem;
  align-items: center;
  margin-bottom: .55rem;
}
.proposition.avec-apparie { grid-template-columns: auto 1fr 1fr auto; }
.proposition .coche { display: grid; place-items: center; }
.proposition .coche input { width: 20px; height: 20px; accent-color: var(--menthe); }

/* --- Sélection des questions d'un quiz ------------------------------------ */
.selection-chapitre { margin-bottom: 1.2rem; }
.selection-chapitre summary {
  cursor: pointer;
  padding: .8rem 1rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  font-weight: 600;
  color: var(--prune);
  display: flex; align-items: center; gap: .6rem;
  list-style: none;
}
.selection-chapitre summary::-webkit-details-marker { display: none; }
.selection-chapitre summary::before { content: '▸'; transition: transform .2s; }
.selection-chapitre[open] summary::before { transform: rotate(90deg); }
.selection-chapitre .liste { padding: .7rem .4rem .2rem 1.2rem; display: grid; gap: .35rem; }
.selection-chapitre .compte-choisies { margin-left: auto; font-size: .8rem; color: var(--texte-doux); }
/* La case « tout le chapitre ». Agrandie a 18px : elle est visee au doigt
   sur une tablette, entre deux eleves, juste avant de lancer le quiz. */
.selection-chapitre .case-chapitre {
  width: 18px; height: 18px;
  accent-color: var(--rose);
  cursor: pointer;
  flex-shrink: 0;
}

.case-question {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .7rem;
  border-radius: var(--r-s);
  cursor: pointer;
  font-size: .9rem;
}
.case-question:hover { background: var(--blanc); }
.case-question input { margin-top: .3rem; accent-color: var(--rose); }
.case-question .meta { color: var(--texte-doux); font-size: .78rem; }

.barre-lancement {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--bord);
  padding: .9rem 1.2rem;
  margin: 1.5rem -1.2rem -4rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  z-index: 20;
}
.barre-lancement .resume-choix { font-weight: 600; color: var(--prune); }

/* --- Identifiants fraîchement créés ---------------------------------------- */
.identifiants {
  background: var(--ambre-clair);
  border: 1px solid #f2d9a8;
  border-radius: var(--r-l);
  padding: 1.3rem;
  margin-bottom: 1.6rem;
}
.identifiants h3 { color: #7a5310; margin-bottom: .3rem; }
.identifiants .avertissement { font-size: .87rem; color: #7a5310; margin-bottom: 1rem; }
.identifiants table { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: var(--r-s); overflow: hidden; }
.identifiants th, .identifiants td { padding: .55rem .8rem; text-align: left; font-size: .9rem; border-bottom: 1px solid var(--bord); }
.identifiants td.mdp { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--prune); }

/* --- Bandeau « contenu proposé » -------------------------------------------- */
.bandeau-propose {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--ambre-clair);
  border: 1px solid #f2d9a8;
  border-radius: var(--r-m);
  padding: .9rem 1.1rem;
  font-size: .88rem;
  color: #7a5310;
  margin-bottom: 1.4rem;
}
.bandeau-propose strong { display: block; }

/* =========================================================================
   10. Petits écrans
   ========================================================================= */
@media (max-width: 900px) {
  .heros { grid-template-columns: 1fr; padding-top: 2.5rem; gap: 2rem; }
  .heros-illu { order: -1; }
  .heros-illu svg { max-width: 240px; }
  .admin-grille { grid-template-columns: 1fr; }
  .schema-zone { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--blanc);
    border-bottom: 1px solid var(--bord);
    padding: .8rem 1.2rem;
    box-shadow: var(--ombre-m);
    gap: .2rem;
  }
  .menu.ouvert { display: flex; }
  .menu a { padding: .7rem .9rem; border-radius: var(--r-s); }
  .bouton-menu { display: block; }
  .compte-menu { margin-left: auto; padding-left: 0; border-left: 0; }
  .compte-nom span:last-child { display: none; }
  .compte-menu form { display: none; }
  .entete-dedans { position: relative; }

  .contenu { padding: 1.4rem 1rem 3rem; }
  .exo-carte { padding: 1.4rem; border-radius: var(--r-l); }
  .exo-enonce { font-size: 1.12rem; }
  .fiche-corps { padding: 1.4rem; }
  .paire { grid-template-columns: 1fr; gap: .35rem; }
  .paire .fleche { display: none; }
  .vrai-faux { grid-template-columns: 1fr; }
  .podium { gap: .6rem; }
  .titre-page { flex-direction: column; align-items: stretch; }
  .barre-lancement { margin-left: -1rem; margin-right: -1rem; }
}

@media (max-width: 480px) {
  .salut { padding: 1.4rem 1.2rem; border-radius: var(--r-l); }
  .boite { padding: 1.6rem 1.3rem; }
  .champ-code input { font-size: 1.7rem; letter-spacing: .35em; }
  .chiffre b { font-size: 1.6rem; }
}

/* =========================================================================
   11. Images des fiches et bibliotheque
   ========================================================================= */

/* --- Une image dans une fiche ---------------------------------------- */
/* La hauteur est bornee : un schema en portrait pris au telephone ferait
   sinon trois ecrans a lui seul, et l'eleve perdrait le fil du texte.
   « contain » plutot que « cover » : on ne rogne JAMAIS un schema
   anatomique, la legende porterait sur une partie invisible. */
.fiche-image {
  margin: 1.6rem 0;
  text-align: center;
}
.fiche-image img {
  max-width: 100%;
  max-height: 62vh;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-m);
  border: 1px solid var(--bord);
  background: var(--blanc);
  box-shadow: var(--ombre-s);
}
.fiche-image figcaption {
  margin-top: .55rem;
  font-size: .86rem;
  color: var(--texte-doux);
  font-style: italic;
}

/* Repere d'image mal ecrit : signale a l'ecran, jamais silencieux. */
.image-cassee {
  border: 1px dashed var(--rouge);
  background: var(--rouge-clair);
  color: var(--texte);
  border-radius: var(--r-s);
  padding: .7rem .9rem;
  font-size: .86rem;
}
.image-cassee code {
  background: rgba(255, 255, 255, .6);
  padding: .1rem .3rem;
  border-radius: 4px;
}

/* --- Un document PDF joint a une fiche -------------------------------- */
/* Un lien, jamais un lecteur incruste : la CSP du site bloque <embed> et
   <object>, et un PDF incruste est penible au doigt. Le bloc est dessine
   assez grand pour etre vise sans effort sur un telephone. */
.fiche-pdf {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 1.4rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--blanc);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ombre-s);
  transition: border-color .15s, box-shadow .15s;
}
.fiche-pdf:hover { border-color: var(--rose); box-shadow: var(--ombre-m); }
.fiche-pdf .pdf-picto {
  flex-shrink: 0;
  width: 44px; height: 52px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--rouge-clair);
  color: var(--rouge);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.fiche-pdf .pdf-texte { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fiche-pdf .pdf-texte strong { color: var(--prune); }
.fiche-pdf .pdf-texte small { color: var(--texte-doux); font-size: .8rem; }

/* Pastille « PDF » la ou une miniature serait attendue : vignettes de
   l'editeur, et cartes de la bibliotheque. */
.vignette-picto,
.carte-media-picto {
  display: grid;
  place-items: center;
  background: var(--rouge-clair);
  color: var(--rouge);
  font-weight: 800;
  letter-spacing: .04em;
}
.vignette-picto { width: 100%; height: 68px; border-radius: 6px; font-size: .78rem; }
.carte-media-picto { width: 100%; height: 150px; font-size: 1.15rem; }

/* --- Depot d'image dans l'editeur de fiche ---------------------------- */
.images-envoi {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.images-envoi input[type="text"] {
  flex: 1 1 240px;
  min-width: 0;
}

.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .5rem;
}
.vignette {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  background: var(--blanc);
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.vignette:hover { border-color: var(--rose); box-shadow: var(--ombre-s); }
.vignette img {
  width: 100%;
  height: 68px;
  object-fit: contain;
  background: var(--sable);
  border-radius: 6px;
}
.vignette span {
  font-size: .7rem;
  color: var(--texte-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- La bibliotheque -------------------------------------------------- */
.galerie-medias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.carte-media {
  margin: 0;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--blanc);
  overflow: hidden;
  box-shadow: var(--ombre-s);
}
.carte-media > a { display: block; background: var(--sable); }
.carte-media img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.carte-media figcaption { padding: .6rem .7rem .7rem; }
.carte-media figcaption small {
  display: block;
  color: var(--texte-doux);
  font-size: .74rem;
  margin: .35rem 0 .5rem;
}
.ligne-legende { display: flex; gap: .3rem; align-items: center; }
.ligne-legende input { flex: 1 1 auto; min-width: 0; font-size: .85rem; padding: .35rem .5rem; }
.actions-media {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================================
   12. Le decor de fond — motifs de biologie
   =========================================================================

   Quelques cellules, virus et molecules qui flottent, aux couleurs de la
   charte. Trois regles gouvernent tout ce qui suit :

     * la LISIBILITE d'abord. Ce sont des fiches qu'on lit vingt minutes
       d'affilee : les motifs sont pales, peu nombreux, et places de
       preference HORS de la colonne de texte (1180 px de large) ;
     * la DENSITE decroit avec la largeur de l'ecran. Sur un telephone, la
       colonne occupe toute la place : il ne reste que quatre motifs, dans
       les coins ;
     * le MOUVEMENT est facultatif : coupe net pour qui a demande a son
       systeme de reduire les animations.
   ========================================================================= */

.decor {
  position: fixed;
  inset: 0;
  /* Derriere tout le contenu, et surtout : ne recoit aucun clic. Sans
     « pointer-events: none », un motif pose au-dessus d'un bouton le
     rendrait inutilisable — et le defaut serait invisible a la relecture. */
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.decor-motif {
  position: absolute;
  display: block;
  /* L'opacite globale du calque. C'est LE reglage a toucher si Gladys
     trouve le fond trop charge ou trop timide : une seule valeur, ici. */
  opacity: .5;
  animation: flotter 26s ease-in-out infinite;
  will-change: transform;
}
.decor-motif svg { display: block; }

/* Le flottement : quelques pixels, tres lentement. Une amplitude plus
   grande attirerait l'oeil, ce qui est exactement l'inverse du but. */
@keyframes flotter {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(0, -18px, 0) rotate(4deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* --- Placement -----------------------------------------------------------
   Les quatre premiers vivent dans les coins : ce sont les seuls conserves
   sur telephone. Les suivants occupent les MARGES laterales, et
   n'apparaissent qu'a partir de 1400 px — la largeur en dessous de laquelle
   ces marges n'existent pas.

   Le calcul, parce qu'il n'est pas devinable : la colonne de texte fait
   1180 px. Pour qu'un motif pose a « left: x% » et large de w reste hors
   d'elle, il faut  x/100 x W + w < (W - 1180) / 2. Le pire cas des valeurs
   ci-dessous se resout vers 1350 px ; 1400 laisse de l'air.

   Corollaire si l'on ajoute un motif : ne pas depasser « left/right: 5% »,
   ni 56 px de large. */

.decor-1  { top:  9%; left:  3%; width:  74px; height:  74px; color: var(--rose);        animation-duration: 28s; }
.decor-2  { top:  6%; right: 4%; width:  58px; height:  58px; color: var(--corail);      animation-duration: 22s; animation-delay: -4s; }
.decor-3  { bottom: 7%; left: 4%; width:  64px; height:  64px; color: var(--prune-clair); animation-duration: 31s; animation-delay: -9s; }
.decor-4  { bottom: 9%; right: 3%; width:  52px; height:  52px; color: var(--menthe);     animation-duration: 25s; animation-delay: -14s; }

.decor-5  { top: 33%; left:  1.5%; width: 54px; height: 54px; color: var(--ambre);       animation-duration: 33s; animation-delay: -6s; }
.decor-6  { top: 61%; right: 1.5%; width: 42px; height: 42px; color: var(--rose);        animation-duration: 21s; animation-delay: -11s; }
.decor-7  { top: 47%; left:  4.5%; width: 44px; height: 44px; color: var(--menthe);      animation-duration: 29s; animation-delay: -17s; }
.decor-8  { top: 21%; right: 4.5%; width: 38px; height: 38px; color: var(--prune-clair); animation-duration: 34s; animation-delay: -2s; }
.decor-9  { top: 77%; left:  2%;   width: 34px; height: 34px; color: var(--corail);      animation-duration: 24s; animation-delay: -20s; }
.decor-10 { top: 13%; right: 2%;   width: 30px; height: 30px; color: var(--menthe);      animation-duration: 27s; animation-delay: -8s; }
.decor-11 { top: 85%; left:  5%;   width: 32px; height: 32px; color: var(--ambre);       animation-duration: 30s; animation-delay: -13s; }
.decor-12 { top: 39%; right: 5%;   width: 32px; height: 32px; color: var(--rose);        animation-duration: 23s; animation-delay: -16s; }

/* Sous 1400 px, la colonne de texte touche presque les bords : tout ce qui
   est lateral passerait derriere les mots. On n'en garde que les coins. */
@media (max-width: 1399px) {
  .decor-5, .decor-6, .decor-7, .decor-8,
  .decor-9, .decor-10, .decor-11, .decor-12 { display: none; }
}

/* Sur telephone, meme les coins sont reduits et encore attenues : l'ecran
   est petit, et un motif de 70 px y pese autrement que sur un 27 pouces. */
@media (max-width: 700px) {
  .decor-motif { opacity: .38; }
  .decor-1 { width: 48px; height: 48px; }
  .decor-2 { width: 40px; height: 40px; }
  .decor-3 { width: 44px; height: 44px; }
  .decor-4 { width: 36px; height: 36px; }
}

/* --- Les endroits ou le decor n'a rien a faire -------------------------- */

/* L'ecran de quiz projete au tableau. A cinq metres, tout ce qui n'est pas
   la question est du bruit — et la salle est parfois mal eclairee. */
.page-jeu .decor,
.page-piloter .decor { display: none; }

/* Une animation en boucle sur une page ouverte une heure durant coute de la
   batterie pour rien. Et c'est, avant tout, un reglage d'accessibilite :
   certaines personnes sont genees, voire rendues malades, par le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .decor-motif { animation: none; }
}

/* =========================================================================
   13. Questions des eleves, et application mobile
   ========================================================================= */

/* --- Une ligne de la liste des questions ------------------------------- */
.ligne-question-eleve {
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ligne-question-eleve:hover {
  text-decoration: none;
  border-color: var(--rose);
  box-shadow: var(--ombre-s);
}
/* Un fil qui attend NOTRE lecture. Le liseré a gauche se voit en diagonale,
   sans avoir a lire les etiquettes une par une. */
.ligne-question-eleve.non-lu {
  border-left: 4px solid var(--rose);
  background: linear-gradient(90deg, var(--rose-clair) 0%, var(--blanc) 22%);
}
.pastille-neuf { color: var(--rose); font-size: .7em; vertical-align: .25em; }

/* --- La conversation ---------------------------------------------------- */
.conversation { display: flex; flex-direction: column; gap: .9rem; }

.bulle {
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  padding: .9rem 1.1rem;
  background: var(--blanc);
  max-width: 46rem;
}
.bulle header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .45rem;
  font-size: .85rem;
}
.bulle header strong { color: var(--prune); }
.bulle header time { color: var(--texte-doux); font-size: .78rem; margin-left: auto; }
.bulle-texte { line-height: 1.6; overflow-wrap: anywhere; }

/* Le message de l'enseignante est visuellement distinct : dans un fil de
   dix messages, on doit retrouver LA reponse d'un coup d'oeil. */
.bulle-prof {
  background: var(--rose-clair);
  border-color: #edc3d1;
}
/* Les siens, decales : c'est la convention de toutes les messageries, et
   les eleves n'ont rien a apprendre. */
.bulle-moi { margin-left: auto; }

/* --- La pastille du menu ------------------------------------------------ */
.pastille-compteur {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  margin-left: .2rem;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  vertical-align: .05em;
}

/* --- La proposition d'installer l'application --------------------------- */
/* En bas de l'ecran sur telephone : c'est la que le pouce arrive, et cela
   ne pousse pas le contenu vers le bas. */
.proposition-installation {
  position: fixed;
  left: .8rem;
  right: .8rem;
  bottom: .8rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--blanc);
  box-shadow: var(--ombre-l);
}
.proposition-picto { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; }
.proposition-picto svg { display: block; width: 100%; height: 100%; }
.proposition-texte { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.proposition-texte strong { color: var(--prune); font-size: .92rem; }
.proposition-texte small { color: var(--texte-doux); font-size: .78rem; }
.proposition-actions { display: flex; gap: .4rem; margin-left: auto; flex-shrink: 0; }

@media (max-width: 620px) {
  .proposition-installation { flex-wrap: wrap; }
  .proposition-actions { margin-left: 0; width: 100%; }
  .proposition-actions .bouton { flex: 1; }
}

/* Une fois installee, l'application n'a plus a proposer de s'installer. */
@media (display-mode: standalone) {
  .proposition-installation { display: none !important; }
}

/* --- Impression : la professeure imprime parfois une fiche ---------------- */
@media print {
  .entete, .pied, .messages, .navigation-fiches, .bouton { display: none !important; }
  /* Le decor de fond ne s'imprime pas : de l'encre pour rien. */
  .decor { display: none !important; }
  .proposition-installation { display: none !important; }
  body { background: #fff; }
  .fiche-corps { border: 0; box-shadow: none; padding: 0; max-width: none; }
  /* Une fiche imprimee sans ses schemas perdrait l'essentiel : on les
     garde, simplement bornes a une demi-page pour ne pas les isoler. */
  .fiche-image img { max-height: 12cm; box-shadow: none; }
  /* Sur papier, un lien n'est pas cliquable : on imprime son adresse,
     sans quoi l'eleve ne peut pas retrouver le document. */
  .fiche-pdf { box-shadow: none; }
  .fiche-pdf::after { content: ' (' attr(href) ')'; font-size: .75rem; color: #555; }
}