/* =============================================================================
   BanKaMaths — feuille de style « fun » 🎉
   Thème lumineux et coloré pour les lycéens : dégradés pastels animés,
   symboles de maths qui flottent, cartes qui « poppent », QCM gamifié.
   Polices 100 % locales (aucune dépendance internet).
   L'ancienne version sobre est archivée dans BAK/app.css.austere.css
   ============================================================================= */

/* ------------------------------------------------------------- polices ------ */
@font-face {
  font-family: "Choco";
  src: url("/polices/ChocoMArabKor.woff") format("woff"),
       url("/polices/ChocoMArabKor.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --fond: #fdf7ff;
  --carte: #ffffff;
  --texte: #2b2440;
  --texte-clair: #6f688c;
  --accent: #7c3aed;        /* violet pop */
  --accent-2: #ec4899;      /* rose bonbon */
  --accent-3: #0ea5e9;      /* bleu azur */
  --soleil: #f59e0b;        /* jaune soleil */
  --ok: #16a34a;
  --danger: #e11d48;
  --bordure: #e7e1f4;
  --ombre: 0 10px 24px rgba(124, 58, 237, .14);
  --police-fun: "Choco", "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive;
  --police-texte: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police-texte);
  color: var(--texte);
  min-height: 100vh;
  background: linear-gradient(135deg, #fdf7ff 0%, #eef6ff 35%, #fff1f7 70%, #f4fff8 100%);
  background-size: 300% 300%;
  background-attachment: fixed;
  animation: fond-vivant 24s ease infinite;
}

@keyframes fond-vivant {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------- décor : symboles flottants */
.decor-maths {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.decor-maths span {
  position: absolute;
  font-family: var(--police-fun);
  color: var(--accent);
  opacity: .09;
  animation: flotter 14s ease-in-out infinite;
}

@keyframes flotter {
  0%   { transform: translateY(0) rotate(-8deg); }
  50%  { transform: translateY(-34px) rotate(10deg); }
  100% { transform: translateY(0) rotate(-8deg); }
}

.entete, .contenu, .bandeau-chapitres, .pied { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- entête ---- */
.entete {
  background: linear-gradient(120deg, #7c3aed 0%, #c026d3 45%, #f43f5e 80%, #fb923c 110%);
  color: #fff;
  padding: 36px 20px 46px;
  text-align: center;
  border-radius: 0 0 34px 34px;
  box-shadow: 0 14px 30px rgba(124, 58, 237, .30);
}

.entete-marque h1 {
  margin: 6px 0 4px;
  font-family: var(--police-fun);
  font-weight: normal;
  font-size: 2.7em;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.18);
  animation: titre-danse 6s ease-in-out infinite;
}

@keyframes titre-danse {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(1deg) translateY(-3px); }
}

.entete-marque p { margin: 0; opacity: .92; font-size: 1.05em; }

.logo {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-family: var(--police-fun);
  font-weight: bold;
  font-size: 1.25em;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.entete:hover .logo { transform: rotate(-12deg) scale(1.15); }

.entete-etroit { text-align: left; padding: 18px 24px 40px; }

.entete-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.entete-etroit h1 {
  margin: 8px 0 4px;
  font-size: 2.1em;
  animation: none;
  text-shadow: 2px 2px 0 rgba(0,0,0,.18);
}
.entete-etroit .sous-titre { margin: 2px 0 0; opacity: .92; }

.btn-retour, .lien-admin {
  display: inline-block;
  background: #fff;
  color: var(--accent) !important;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .88em;
  font-weight: bold;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}

.btn-retour:hover, .lien-admin:hover {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: 0 8px 16px rgba(0,0,0,.22);
}

/* ---------------------------------------------------------------- contenu --- */
.contenu {
  max-width: 1050px;
  margin: 0 auto;
  padding: 30px 16px 60px;
}

.titre-section {
  font-family: var(--police-fun);
  font-weight: normal;
  color: var(--accent);
  text-align: center;
  margin: 10px 0 24px;
  font-size: 1.7em;
  text-shadow: 1px 1px 0 #fff;
}

.chargement {
  color: var(--texte-clair);
  text-align: center;
  font-style: italic;
}

/* ----------------------------------------------------------- grille classes - */
.grille-classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}

.carte-classe {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  padding: 0;
  color: #fff;
  background: var(--couleur, #7c3aed); /* repli si color-mix() non supporté */
  background: linear-gradient(140deg,
              var(--couleur, #7c3aed),
              color-mix(in srgb, var(--couleur, #7c3aed) 55%, #ec4899));
  box-shadow: 0 8px 20px rgba(31, 20, 60, .25);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}

/* reflet qui balaye la carte au survol */
.carte-classe::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 60%;
  height: 220%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition: left .55s ease;
}

.carte-classe:hover {
  transform: translateY(-7px) rotate(-1.2deg) scale(1.03);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--couleur, #7c3aed) 45%, transparent);
}

.carte-classe:hover::before { left: 130%; }

.carte-classe .bande { height: 10px; background: rgba(255,255,255,.85); }

.carte-classe .corps { padding: 16px 18px 18px; }

.carte-classe .emoji {
  font-size: 2.4em;
  line-height: 1;
  margin-bottom: 6px;
  display: inline-block;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.carte-classe:hover .emoji { transform: scale(1.25) rotate(10deg); }

.carte-classe h3 {
  margin: 4px 0 8px;
  font-family: var(--police-fun);
  font-weight: normal;
  font-size: 1.35em;
  text-shadow: 1px 2px 0 rgba(0,0,0,.20);
}

.carte-classe p { margin: 2px 0; opacity: .92; font-size: .88em; }

.carte-classe .voir {
  display: inline-block;
  margin-top: 10px;
  background: rgba(255,255,255,.92);
  color: var(--texte);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: bold;
  font-size: .82em;
}

/* ------------------------------------------------------------------ cartes - */
.carte {
  background: var(--carte);
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: var(--ombre);
  border: 2px solid #f0eafc;
}

.carte h2 {
  margin: 0 0 16px;
  font-family: var(--police-fun);
  font-weight: normal;
  color: var(--accent);
  font-size: 1.3em;
  padding-bottom: 8px;
  border-bottom: 3px dashed var(--bordure);
}

.ligne-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.ligne-form label {
  display: flex;
  flex-direction: column;
  font-size: .82em;
  color: var(--texte-clair);
  gap: 4px;
}

.ligne-form label.large { flex: 1 1 220px; }

.ligne-form select, .ligne-form input[type=text], .ligne-form input[type=password] {
  padding: 9px 11px;
  border: 2px solid var(--bordure);
  border-radius: 12px;
  font-size: .95em;
  font-family: inherit;
  background: #fff;
  color: var(--texte);
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ligne-form select:focus, .ligne-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
}

/* ------------------------------------------------------------- navigation --- */
.bandeau-chapitres {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 3px dashed #d9cdf2;
  position: sticky;
  top: 0;
  z-index: 20;
}

.bandeau-chapitres label { font-size: .92em; color: var(--texte); font-weight: bold; }

#select-chapitre {
  min-width: 280px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  font-size: .95em;
  font-family: inherit;
  background: #fff;
  color: var(--texte);
  box-shadow: 0 3px 10px rgba(124, 58, 237, .15);
}

/* -------------------------------------------------------------- accordéons -- */
.accordion {
  margin-bottom: 20px;
  animation: apparaitre .35s ease both;
}

@keyframes apparaitre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.accordion-tete {
  width: 100%;
  background: var(--couleur, #7c3aed); /* repli si color-mix() non supporté */
  background: linear-gradient(120deg,
              var(--couleur, #7c3aed),
              color-mix(in srgb, var(--couleur, #7c3aed) 60%, #ec4899));
  color: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  box-shadow: 0 6px 14px rgba(31, 20, 60, .22);
  transition: border-radius .2s ease, transform .15s ease;
}

.accordion-tete:hover { transform: translateX(4px); }

.accordion-toggle {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  padding: 14px 16px;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.15);
}

.accordion-toggle .icone {
  display: inline-block;
  transition: transform .25s ease;
  font-size: 1.1em;
}

.accordion.ouvert .accordion-toggle .icone { transform: rotate(180deg); }

/* Bouton QCM dans l'en-tête d'un chapitre (page élève) */
.bouton-qcm {
  flex: 0 0 auto;
  background: #fff;
  color: var(--couleur, #7c3aed);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .88em;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .15s ease;
}

.bouton-qcm:hover { transform: translateY(-2px) scale(1.06); filter: brightness(.95); }

/* Menu déroulant quand le chapitre contient plusieurs QCM (page élève) */
select.select-qcm {
  border: none;
  padding: 7px 10px;
  max-width: 240px;
  cursor: pointer;
  font-family: inherit;
}

/* Sélecteur de QCM en haut de la page QCM (plusieurs QCM dans le chapitre) */
.qcm-selecteur {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: .9em;
  box-shadow: var(--ombre);
}

.qcm-lien {
  background: #fff;
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 13px;
  font-weight: bold;
  font-size: .92em;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.qcm-lien:hover { transform: translateY(-2px) rotate(-1deg); }

.qcm-lien.actuel {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  cursor: default;
}

/* Liste des QCM dans l'espace professeur */
.qcm-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--bordure);
}

.qcm-ligne:last-child { border-bottom: none; }
.qcm-infos { flex: 1 1 240px; min-width: 0; }

.bouton-mini { padding: 6px 11px; font-size: .8em; }

/* Corps des chapitres (dépliable) */
.accordion-corps {
  background: #fff;
  border: 3px solid var(--couleur, #7c3aed);
  border-top: none;
  border-radius: 0 0 18px 18px;
  padding: 8px 14px;
  display: none;
  animation: deplie .25s ease;
}

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

.accordion.ouvert .accordion-tete { border-radius: 18px 18px 0 0; }
.accordion.ouvert .accordion-corps { display: block; }

/* -------------------------------------------------------- liste fichiers --- */
.fichier-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  border-bottom: 1px dashed var(--bordure);
  transition: background .15s ease;
}

.fichier-ligne:hover { background: #faf6ff; }

.lien-apercu {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 12px;
  color: var(--texte);
  transition: background .15s ease, transform .15s ease;
}

.lien-apercu:hover { background: #f1eaff; transform: translateX(4px); }

.lien-telecharger {
  flex: 0 0 auto;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  font-size: 1.05em;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(124, 58, 237, .3);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}

.lien-telecharger:hover { transform: scale(1.18) rotate(8deg); }

.fichiers a,
.fichiers a:last-child { border-bottom: none; }

.fichiers .nom-fichier {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fichiers .date-fichier {
  flex: 0 0 auto;
  font-size: .78em;
  color: var(--texte-clair);
  margin-left: 8px;
}

.fichiers .icone { font-size: 1.15em; }

.fichier-vide {
  color: var(--texte-clair);
  font-style: italic;
  padding: 14px 8px;
}

/* ------------------------------------------------------- prévisualisation PDF - */
.modale-fond {
  position: fixed;
  inset: 0;
  background: rgba(35, 20, 70, .70);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: fondu .2s ease;
}

@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

.modale-fenetre {
  background: #fff;
  width: min(96vw, 1200px);
  height: min(94vh, 950px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  animation: pop-fenetre .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes pop-fenetre {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modale-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  flex-wrap: wrap;
}

.modale-titre {
  font-weight: bold;
  font-size: .95em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modale-boutons { display: flex; gap: 8px; flex-wrap: wrap; }

/* Boutons de la barre réalisés avec des <a> : aspect identique aux <button> */
a.bouton { text-decoration: none; color: inherit; }
a.bouton-secondaire { color: var(--texte); }

.modale-fenetre iframe {
  flex: 1;
  border: 0;
  width: 100%;
  min-height: 0;
  background: #fff;
}

.btn-foret {
  background: linear-gradient(120deg, #16a34a, #22c55e) !important;
  color: #fff !important;
  font-weight: bold;
}

/* ---------------------------------------------------------------- boutons --- */
.bouton {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .92em;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), filter .16s ease, box-shadow .16s ease;
}

.bouton:hover { transform: translateY(-2px); filter: brightness(1.06); }
.bouton:active { transform: scale(.94); }

.bouton-principal {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 14px rgba(124, 58, 237, .35);
}

.bouton-principal:hover { box-shadow: 0 10px 20px rgba(236, 72, 153, .4); }

.bouton-secondaire {
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.bouton-danger {
  background: linear-gradient(120deg, #e11d48, #f43f5e);
  color: #fff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, .35);
}

.bouton-large { width: 100%; padding: 14px; font-size: 1.08em; margin-top: 10px; }

.bouton:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* --------------------------------------------------------------- page QCM ---- */
.qcm-intro {
  background: linear-gradient(120deg, #f5edff, #ffeef6);
  border-left: 6px solid var(--accent-2);
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: .95em;
}

/* barre de progression « x/y répondues » */
.qcm-progress {
  position: sticky;
  top: 64px;
  z-index: 15;
  background: rgba(255,255,255,.94);
  border: 2px solid var(--bordure);
  border-radius: 999px;
  padding: 8px 14px;
  margin-bottom: 18px;
  box-shadow: var(--ombre);
  font-size: .85em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.qcm-progress .piste {
  flex: 1 1 auto;
  height: 12px;
  background: #efe9fb;
  border-radius: 999px;
  overflow: hidden;
}

.qcm-progress .remplie {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--soleil));
  transition: width .3s ease;
}

.qcm-progress .compte { font-weight: bold; color: var(--accent); white-space: nowrap; }

.qcm-question {
  background: #fff;
  border: 2px solid var(--bordure);
  border-radius: 16px;
  padding: 14px 18px 16px;
  margin: 0 0 16px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .07);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.qcm-question:hover { border-color: #cdb6f5; }

.qcm-question-tete {
  font-weight: bold;
  margin: 2px 0 12px;
  line-height: 1.5;
}

.qcm-num {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: .85em;
  margin-right: 4px;
  box-shadow: 0 3px 8px rgba(124, 58, 237, .35);
}

.qcm-options { display: flex; flex-direction: column; gap: 8px; }

.qcm-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 13px;
  border: 2px solid var(--bordure);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  line-height: 1.5;
  background: #fdfcff;
}

.qcm-option:hover {
  background: #f5edff;
  border-color: var(--accent);
  transform: translateX(5px);
}

.qcm-option input[type=radio] { accent-color: var(--accent); transform: translateY(1px); }

.qcm-option-statique { cursor: default; }
.qcm-option-statique:hover { background: #fdfcff; transform: none; }

.qcm-option.bonne {
  background: #e9f9ee;
  border-color: var(--ok);
  animation: bonne-rep .45s cubic-bezier(.34,1.56,.64,1);
}

@keyframes bonne-rep {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.qcm-option.choisie-fausse { background: #fdecef; border-color: var(--danger); }

.qcm-marque { font-size: .8em; font-weight: bold; white-space: nowrap; }
.qcm-marque.bonne { color: var(--ok); }
.qcm-marque.faux { color: var(--danger); }

.qcm-juste { border-color: var(--ok); }
.qcm-faux { border-color: var(--danger); }

.qcm-verdict {
  font-size: .78em;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 999px;
}
.qcm-verdict.juste { background: #e9f9ee; color: var(--ok); }
.qcm-verdict.faux { background: #fdecef; color: var(--danger); }

.qcm-explication {
  background: #f6f2ff;
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  padding: 10px 13px;
  margin: 12px 0 2px;
  font-size: .92em;
}

/* ------------------------------------------------------------- score final -- */
.qcm-score {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-radius: 24px;
  padding: 26px 18px;
  margin-bottom: 22px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(31, 20, 60, .28);
}

.qcm-score::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.25), transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(255,255,255,.18), transparent 45%);
  animation: brille 5s ease-in-out infinite;
}

@keyframes brille {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4%, -4%); }
}

.qcm-score.excellent { background: linear-gradient(120deg, #16a34a, #22c55e, #a3e635); }
.qcm-score.bien { background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.qcm-score.a-revoir { background: linear-gradient(120deg, #f97316, var(--danger)); }

.qcm-score-emoji {
  font-size: 3em;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  animation: rebond-emoji 1.4s ease-in-out infinite;
  position: relative;
}

@keyframes rebond-emoji {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}

.qcm-score-note {
  font-family: var(--police-fun);
  font-size: 2.2em;
  font-weight: normal;
  text-shadow: 2px 2px 0 rgba(0,0,0,.2);
  position: relative;
}

.qcm-score-pct { font-size: 1.4em; font-weight: bold; opacity: .92; position: relative; }
.qcm-score-msg { flex-basis: 100%; font-size: 1em; opacity: .97; position: relative; }

.qcm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}

/* ---------------------------------------------------------------- confettis -- */
.confetti {
  position: fixed;
  top: -20px;
  z-index: 2000;
  width: 12px;
  height: 18px;
  border-radius: 3px;
  pointer-events: none;
  animation: tombe-confetti linear forwards;
}

@keyframes tombe-confetti {
  0%   { transform: translateY(-5vh) rotate(0deg) rotateY(0deg); opacity: 1; }
  100% { transform: translateY(108vh) rotate(720deg) rotateY(540deg); opacity: .85; }
}

/* -------------------------------------------------------------- zone dépôt -- */
.zone-depot {
  border: 3px dashed var(--accent);
  border-radius: 18px;
  background: linear-gradient(120deg, #faf5ff, #fff5fa);
  padding: 36px 18px;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.zone-depot:hover { transform: scale(1.008); }

.zone-depot.survole {
  background: #ecfdf3;
  border-color: var(--ok);
  transform: scale(1.02);
}

.zone-depot .zone-texte { margin: 0; color: var(--texte); line-height: 1.7; font-size: 1.05em; }

.aide { font-size: .84em; color: var(--texte-clair); }

.ligne-a-deposer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 2px dashed var(--bordure);
  border-radius: 14px;
  padding: 9px 12px;
  margin-top: 10px;
}

.ligne-a-deposer .nom-doc {
  flex: 0 1 190px;
  font-size: .85em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.ligne-a-deposer input[type=text] {
  flex: 1 1 auto;
  padding: 8px 10px;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  font-size: .88em;
  font-family: inherit;
  min-width: 180px;
}

.ligne-a-deposer .suppr-doc {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 1.1em;
  cursor: pointer;
  transition: transform .15s ease;
}

.ligne-a-deposer .suppr-doc:hover { transform: rotate(12deg) scale(1.2); }

/* ----------------------------------------------------------- liste fichiers - */
.tableau-fichiers { width: 100%; border-collapse: collapse; }

.tableau-fichiers th {
  text-align: left;
  font-size: .8em;
  color: var(--texte-clair);
  border-bottom: 2px solid var(--bordure);
  padding: 6px 8px;
}

.tableau-fichiers td {
  border-bottom: 1px dashed var(--bordure);
  padding: 8px;
  vertical-align: middle;
  font-size: .9em;
}

.tableau-fichiers .comment-affichage { cursor: pointer; }
.tableau-fichiers input[type=text] {
  width: 100%;
  padding: 6px 8px;
  border: 2px solid var(--bordure);
  border-radius: 9px;
  font-size: .88em;
  font-family: inherit;
}

.petits-boutons { display: flex; gap: 6px; flex-wrap: wrap; }
.petits-boutons .bouton { padding: 5px 11px; font-size: .8em; }

/* ------------------------------------------------------------- messages ------- */
.message-info {
  padding: 11px 15px;
  border-radius: 12px;
  background: #e9f9ee;
  color: #14532d;
  border: 2px solid #b7ecc7;
  font-size: .9em;
  white-space: pre-line;
}

.message-erreur {
  padding: 11px 15px;
  border-radius: 12px;
  background: #fdecef;
  color: #9f1239;
  border: 2px solid #f8c5d2;
  font-size: .9em;
  white-space: pre-line;
}

/* --------------------------------------------------------------- admin -------- */
.entete-admin {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.15);
}

.entete-admin h1 { margin: 0 0 4px; font-family: var(--police-fun); font-weight: normal; }
.entete-admin p { margin: 0; opacity: .92; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Rétroaction visuelle du glisser-déposer de CSV sur la carte QCM */
#carte-qcm.survole { outline: 4px dashed var(--accent-2); outline-offset: -8px; }

.ecran-login { display: flex; justify-content: center; padding-top: 60px; }

.login-carte {
  max-width: 430px;
  width: 100%;
  text-align: center;
  border-top: 8px solid;
  border-image: linear-gradient(120deg, var(--accent), var(--accent-2)) 1;
}

.login-carte h1 { font-family: var(--police-fun); font-weight: normal; color: var(--accent); }

.login-carte form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.login-carte input[type=password] {
  padding: 12px 14px;
  font-size: 1em;
  font-family: inherit;
  border: 2px solid var(--bordure);
  border-radius: 12px;
  text-align: center;
}

.login-carte input[type=password]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
}

.lien-simple { color: var(--accent); font-size: .9em; font-weight: bold; }
.lien-simple:hover { text-decoration: underline; }

/* --------------------------------------------------------------- pied --------- */
.pied {
  text-align: center;
  padding: 22px;
  color: var(--texte-clair);
  font-size: .85em;
}

.pied a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: bold;
}

.pied a:hover { color: var(--accent-2); }

/* ------------------------------------------------------------ responsif ------- */
@media (max-width: 640px) {
  .entete-marque h1 { font-size: 2em; }
  .entete-ligne { flex-wrap: wrap; }
  .ligne-form { flex-direction: column; align-items: stretch; }
  #select-chapitre { min-width: 0; width: 100%; }
  .tableau-fichiers { display: block; overflow-x: auto; }
  .fichiers .date-fichier { display: block; margin-left: 0; }
  .qcm-progress { top: 58px; }
}

/* Accessibilité : on calme les animations si l'élève le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}