/* =============================================================================
   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;
}

/* Police de la marque « BanKaMaths » : Ka Boing, idéal pour un titre
   ludique, rétro et très reconnaissable en gros. 100 % locale. */
@font-face {
  font-family: "KaBoing";
  src: url("/polices/Ka-Boing!.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-marque: "KaBoing", "Choco", "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive;
    --police-texte: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
    /* Couleur de la classe courante (posée par www/js/ambiance.js depuis
       /api/etat) : le bandeau d'en-tête reprend exactement cette couleur. */
    --accent-classe: #7c3aed;
    --accent-classe-clair: #a06bf5;
    --accent-classe-sombre: #5a28b3;
}

* { 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 ---- */
/* Le bandeau reprend la couleur de la classe (variables posées par
   www/js/ambiance.js) : même couleur, en léger dégradé pour le relief. */
.entete {
  background: linear-gradient(120deg, var(--accent-classe-sombre) 0%, var(--accent-classe) 55%, var(--accent-classe-clair) 130%);
  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-marque);
  font-weight: normal;
  font-size: 3.4em;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.18);
  animation: titre-danse 6s ease-in-out infinite;
}

/* Marque « BanKaMaths » dans la ligne des pages classe/QCM : en grand,
   même police élégante que sur l'accueil. */
.entete-ligne .entete-marque {
  font-family: var(--police-marque);
  font-size: 2em;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.18);
  white-space: nowrap;
}

@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: 1 1 100%;
  font-size: .9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.ligne-a-deposer input[type=text] {
  flex: 1 1 100%;
  padding: 8px 10px;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  font-size: .9em;
  font-family: inherit;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: var(--texte);
}

.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; }

/* ------------------------------------------------- admin : 3 colonnes ------ */
.admin-3col {
  display: grid;
  /* Colonnes 1 et 2 à largeur réglable à la souris (--l1/--l2, poignées
     .separateur-largeur) ; la 3e prend le reste. */
  grid-template-columns: var(--l1, minmax(310px, 1fr)) 18px
                         var(--l2, minmax(330px, 1.05fr)) 18px
                         minmax(320px, 1fr);
  gap: 0;
  align-items: start;
}

/* Poignées de redimensionnement entre les colonnes */
.separateur-largeur {
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  touch-action: none;
}
.separateur-largeur::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--bordure, #ddd6f3);
  transition: background .15s ease;
}
.separateur-largeur:hover::after,
.separateur-largeur.actif::after { background: var(--accent); }
body.redimensionne { cursor: col-resize; user-select: none; }

/* ---- colonnes : défilement indépendant + barre de navigation de lecture ---- */
.cadre-colonne { position: relative; }
.colonne {
  position: relative;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.colonne::-webkit-scrollbar { display: none; }
/* Titre + bandeau « actif » restent affichés pendant le défilement */
.entete-colonne {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flow-root;          /* encadre les marges des enfants : fond bien opaque */
  background: var(--carte);
  margin: -20px -22px 0;
  padding: 20px 22px 0;
}
.barre-defilement {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 4px;
  width: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .09);
  z-index: 5;
  cursor: pointer;
  touch-action: none;
}
.curseur-defilement {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 28px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .8;
}
.barre-defilement:hover .curseur-defilement,
.barre-defilement.actif .curseur-defilement { opacity: 1; }

/* L'admin prof a besoin de toute la largeur pour ses 3 colonnes */
#ecran-admin { max-width: 1500px; }

.admin-3col .colonne { margin-bottom: 0; }

.sous-titre-colonne {
  font-size: .72em;
  color: var(--texte-clair);
  font-family: var(--police-texte);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.aide-colonne { font-size: .8em; color: var(--texte-clair); margin: 0 0 12px; line-height: 1.5; }

/* Bandeau bien visible : classe / chapitre en cours d'édition */
.bandeau-actif {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6f0ff;
  border: 2px solid var(--accent);
  border-left-width: 7px;
  border-radius: 12px;
  padding: 9px 12px;
  margin: 0 0 12px;
  min-height: 42px;
}
.bandeau-actif .etiquette { flex: none; font-size: .8em; color: var(--texte-clair); }
.bandeau-actif strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--police-fun);
  font-weight: bold;
  color: var(--accent);
  font-size: 1.08em;
}

.liste-admin {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.elt-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 46px;
  background: #fff;
  border: 2px solid var(--bordure);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  user-select: none;
}

.elt-admin:hover { border-color: #cdb6f5; box-shadow: 0 4px 12px rgba(124, 58, 237, .12); }

.elt-admin.actif {
  border-color: var(--accent);
  background: #f6f0ff;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .18);
}

.elt-admin.glisse { opacity: .35; }

.elt-admin.drop-cible {
  outline: 3px dashed var(--ok);
  outline-offset: -5px;
  background: #ecfdf3;
}

.elt-admin .poignee { color: var(--texte-clair); cursor: grab; font-size: 1.05em; flex: none; }
.elt-admin .poignee:active { cursor: grabbing; }

.pastille {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid rgba(0, 0, 0, .08);
}

.elt-admin .titre-elt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: bold;
  font-size: .98em;
  line-height: 1.25;
  word-break: break-word;
}

.elt-admin .badge {
  flex: none;
  font-size: .72em;
  color: var(--accent);
  background: #efe9fb;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  font-weight: bold;
}

.mini-actions { display: flex; gap: 5px; align-items: center; flex: none; }
.mini-actions.colonne-actions { flex-direction: column; align-items: stretch; }

.mini-bouton {
  border: none;
  background: #f4eefe;
  border-radius: 9px;
  padding: 5px 8px;
  font-size: .85em;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, transform .15s ease;
}
.mini-bouton:hover { background: #e6d9fb; transform: scale(1.12); }
.mini-bouton.danger:hover { background: #fdecef; }
.fleches-ordre { gap: 3px; }
.btn-fleche { padding: 5px 7px; font-size: .75em; }
.btn-fleche:disabled { opacity: .3; cursor: default; transform: none; }
.btn-fleche:disabled:hover { background: #f4eefe; transform: none; }


.select-deplacer {
  max-width: 135px;
  font-size: .78em;
  padding: 4px 6px;
  border: 2px solid var(--bordure);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  color: var(--texte);
}
.select-deplacer:focus { outline: none; border-color: var(--accent); }

.edit-inline {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 9px;
  border: 2px solid var(--accent);
  border-radius: 9px;
  font-family: inherit;
  font-size: .95em;
  background: #fff;
  color: var(--texte);
  user-select: text;
}
.edit-inline:focus { outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, .2); }

/* Documents (colonne 3) */
.elt-document { align-items: flex-start; padding: 10px; }

.elt-document .corps-doc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.elt-document .lien-doc:hover { text-decoration: underline; color: var(--accent); }
.elt-document .comment-doc {
  font-size: .8em;
  color: var(--texte-clair);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elt-document .comment-doc::before { content: "✏️ "; font-size: .9em; }
.elt-document .comment-doc.vide { font-style: italic; }
.elt-admin .comment-doc.en-edition::before { content: none; }
.elt-document .comment-doc:hover { color: var(--accent); text-decoration: underline dotted; }
.elt-document .meta-doc { font-size: .72em; color: var(--texte-clair); opacity: .8; }

/* Champ d'édition en place : il occupe toute la largeur de l'encadré,
   sur sa propre ligne (sinon le champ est écrasé et invisible). */
.elt-admin .en-edition {
  flex: 1 1 100%;
  display: block;
  overflow: visible;
  white-space: normal;
}

/* Barre de progression indépendante par fichier */
.barre-envoi {
  position: relative;
  flex: 1 1 150px;
  min-width: 120px;
  height: 14px;
  background: #efe9fb;
  border-radius: 999px;
  overflow: hidden;
}
.barre-envoi .remplie {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width .2s ease;
}

/* Barre de progression affichée directement sur un encadré
   (classe ou chapitre) pendant l'envoi de fichiers. */
.barre-encadre {
  display: block;
  position: relative;
  flex: 1 1 100%;
  height: 9px;
  margin-top: 8px;
  background: #efe9fb;
  border-radius: 999px;
  overflow: hidden;
}
.barre-encadre .remplie {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width .2s ease;
}
.barre-encadre.finie .remplie { background: var(--ok); }

.statut-envoi {
  flex: none;
  font-size: .74em;
  color: var(--texte-clair);
  min-width: 74px;
  text-align: right;
}
.statut-envoi.bon { color: var(--ok); font-weight: bold; }
.statut-envoi.mauvais { color: var(--danger); font-weight: bold; }
.ligne-a-deposer.reussie { border-color: var(--ok); background: #f2fbf5; }
.ligne-a-deposer.echouee { border-color: #f8c5d2; background: #fff5f8; }

/* Blocs repliables (nouvelle classe, nouveau chapitre, QCM) */
.bloc-ajout, .bloc-qcm {
  border: 2px dashed var(--bordure);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 4px;
}
.bloc-ajout summary, .bloc-qcm summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--accent);
  font-size: .9em;
}
.bloc-ajout[open], .bloc-qcm[open] { background: #fbf8ff; }

.ligne-form.vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin: 10px 0 4px;
}
.ligne-form.vertical label {
  font-size: .8em;
  color: var(--texte-clair);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ligne-form.vertical input[type=text] {
  padding: 9px 11px;
  border: 2px solid var(--bordure);
  border-radius: 12px;
  font-size: .95em;
  font-family: inherit;
  background: #fff;
  color: var(--texte);
  width: 100%;
}
.ligne-form.vertical input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
}
.ligne-form.vertical input[type=color] {
  width: 64px;
  height: 38px;
  padding: 2px;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.sous-titre-docs {
  margin: 18px 0 10px;
  font-family: var(--police-fun);
  font-weight: normal;
  color: var(--accent);
  font-size: 1.05em;
}

#bloc-qcm.survole { outline: 4px dashed var(--accent-2); outline-offset: -8px; }
#bloc-qcm .qcm-ligne { margin-bottom: 6px; }

/* Responsive : 2 colonnes puis 1 colonne (poignées masquées, espacement relancé) */
@media (max-width: 1250px) {
  .admin-3col { grid-template-columns: 1fr 1fr; gap: 16px; }
  .colonne { max-height: none; }
  .separateur-largeur { display: none; }
  .admin-3col .cadre-documents { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .admin-3col { grid-template-columns: 1fr; gap: 16px; }
  .separateur-largeur { display: none; }
  .admin-3col .cadre-documents { grid-column: auto; }
  .select-deplacer { max-width: none; }
}

/* --------------------------------------------------------------- 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: 2.4em; }
  .entete-ligne .entete-marque { font-size: 1.6em; }
  .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;
  }
}

/* =============================================================================
   Ambiance « Matrix » réversible (pluie de code mathématique)
   --------------------------------------------------------------------------
   Choix : fond noir-vert profond, pluie monochrome verte + formules de maths
   en cyan/violet/ambre ; on garde des touches de couleur (couleurs des
   chapitres, boutons danger/forest, badges QCM). Basculable via le bouton
   .bascule-ambiance (www/js/ambiance.js), mémorisé en localStorage.
   Le thème classique reste intact : tout est scopé sous .ambiance-matrix.
   ========================================================================== */

/* Pluie de code : toile plein écran derrière le contenu (z-index 0). */
#pluie-matrix {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Le décor « fun » clair est remplacé par la pluie en mode Matrix. */
.ambiance-matrix .decor-maths { display: none; }

.ambiance-matrix {
  --fond: #4a2358;
  --carte: rgba(74, 35, 88, .88);
  --texte: #fff3f8;
  --texte-clair: #ffc7dd;
  --accent: #ff5d8f;        /* rose bonbon (pluie principale) */
  --accent-2: #ff9f43;      /* orange peche (niveau 2, pluie) */
  --accent-3: #b366ff;      /* violet grape (niveau 3, pluie) */
  --soleil: #ffd54a;        /* ambre (touche de couleur) */
  /* --accent-classe* : NON redéfinies ici — elles héritent de :root /
     du <html> posé par ambiance.js, pour que le bandeau prenne
     la couleur de chaque classe (ex. LY1mth #FF7F32, LY2spe #475242). */
  --ok: #22c55e;
  --danger: #ff5d7a;
  --bordure: rgba(255, 93, 143, .35);
  --ombre: 0 10px 24px rgba(0, 0, 0, .5);
  --police-fun: ui-monospace, "Cascadia Mono", Consolas, Menlo, "Courier New", monospace;
  /* --- une teinte par niveau, du plus foncé (classes) au plus clair (documents) --- */
  --niveau-1: rgba(88, 22, 52, .94);    /* niveau 1 : classes (accueil, colonne 1) */
  --niveau-2: rgba(96, 45, 18, .94);    /* niveau 2 : chapitres (colonne 2) */
  --niveau-3: rgba(56, 28, 92, .94);   /* niveau 3 : documents, QCM, questions */
  --liseret-1: #ff5d8f;                /* rose bonbon */
  --liseret-2: #ff9f43;                /* orange peche */
  --liseret-3: #b366ff;                /* violet grape */
  color-scheme: dark;
  background: #4a2358;
  animation: none;
}

/* Sur les pages classe / QCM, l'en-tête reprend la couleur de la classe
   (variables posées par www/js/ambiance.js) : chaque classe a son ambiance. */
.ambiance-matrix .entete {
  background: linear-gradient(120deg, var(--accent-classe-sombre) 0%, var(--accent-classe) 50%, var(--accent-classe-clair) 130%);
  border-bottom: 2px solid var(--accent-classe-clair);
  box-shadow: 0 0 34px rgba(255, 93, 143, .2);
}

.ambiance-matrix .entete-marque h1,
.ambiance-matrix .entete-etroit h1 {
  animation: none;
  font-family: var(--police-marque);
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(255, 93, 143, .8), 2px 2px 0 rgba(0, 0, 0, .4);
}

.ambiance-matrix .entete-ligne .entete-marque {
  font-family: var(--police-marque);
  font-size: 2em;
  letter-spacing: 1px;
}

.ambiance-matrix .logo {
  background: #3d1a3d;
  color: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 0 14px rgba(255, 93, 143, .5);
}

.ambiance-matrix .titre-section { text-shadow: 0 0 12px rgba(255, 93, 143, .55); }

/* Interrupteur d'ambiance (créé par www/js/ambiance.js), discret en bas à gauche. */
.bascule-ambiance {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, "Courier New", monospace;
  font-weight: bold;
  font-size: .85em;
  color: #fff3f8;
  background: rgba(45, 18, 48, .85);
  border: 2px solid rgba(255, 93, 143, .5);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 93, 143, .25);
  transition: box-shadow .2s ease, transform .2s ease;
}

.bascule-ambiance:hover {
  box-shadow: 0 0 18px rgba(255, 93, 143, .55);
  transform: translateY(-2px);
}

/* ---- surfaces claires → panneaux sombres semi-opaques (la pluie reste visible) ---- */
.ambiance-matrix .carte {
  border-color: rgba(255, 93, 143, .35);
  box-shadow: 0 0 22px rgba(255, 93, 143, .12), 0 10px 24px rgba(0, 0, 0, .55);
}

.ambiance-matrix .bandeau-chapitres {
  background: rgba(88, 22, 52, .92);
  border-bottom: 3px solid rgba(255, 93, 143, .4);
}

/* ---- une teinte par niveau : 1 = classes, 2 = chapitres, 3 = documents/QCM ---- */
.ambiance-matrix #col-classes,
.ambiance-matrix .carte-classe { background: var(--niveau-1); }
.ambiance-matrix #col-chapitres { background: var(--niveau-2); }
.ambiance-matrix #col-documents,
.ambiance-matrix .qcm-selecteur { background: var(--niveau-3); }

.ambiance-matrix #col-classes .entete-colonne { background: var(--niveau-1); border-top: 4px solid var(--liseret-1); }
.ambiance-matrix #col-chapitres .entete-colonne { background: var(--niveau-2); border-top: 4px solid var(--liseret-2); }
.ambiance-matrix #col-documents .entete-colonne { background: var(--niveau-3); border-top: 4px solid var(--liseret-3); }

.ambiance-matrix #col-classes { border-color: rgba(255, 93, 143, .45); }
.ambiance-matrix #col-chapitres { border-color: rgba(255, 159, 67, .45); }
.ambiance-matrix #col-documents { border-color: rgba(179, 102, 255, .45); }

.ambiance-matrix #col-classes h2 { color: var(--liseret-1); }
.ambiance-matrix #col-chapitres h2 { color: var(--liseret-2); }
.ambiance-matrix #col-documents h2 { color: var(--liseret-3); }

/* Page élève : les chapitres restent colorés par le professeur, les corps
   de chapitre (niveau 2) et les documents (niveau 3) suivent le dégradé. */
.ambiance-matrix .accordion-corps { background: var(--niveau-2); border-top: 4px solid var(--liseret-2); }
.ambiance-matrix .fichier-ligne:hover { background: rgba(179, 102, 255, .12); }
.ambiance-matrix .lien-apercu:hover { background: rgba(179, 102, 255, .14); }

.ambiance-matrix .qcm-question { background: var(--niveau-3); border-top: 4px solid var(--liseret-3); }
.ambiance-matrix .qcm-question:hover { border-color: rgba(255, 93, 143, .6); }
.ambiance-matrix .qcm-option { background: rgba(45, 18, 48, .9); }
.ambiance-matrix .qcm-option:hover { background: rgba(255, 93, 143, .1); }
.ambiance-matrix .qcm-option-statique:hover { background: rgba(45, 18, 48, .9); }
.ambiance-matrix .qcm-progress { background: rgba(45, 18, 48, .94); }
.ambiance-matrix .qcm-progress .piste { background: rgba(255, 93, 143, .15); }
.ambiance-matrix .qcm-intro { background: rgba(45, 18, 48, .95); }
.ambiance-matrix .qcm-explication { background: rgba(45, 18, 48, .95); }
.ambiance-matrix .qcm-option.bonne { background: rgba(34, 197, 94, .16); }
.ambiance-matrix .qcm-option.choisie-fausse { background: rgba(255, 93, 122, .14); }
.ambiance-matrix .qcm-verdict.juste { background: rgba(34, 197, 94, .16); }
.ambiance-matrix .qcm-verdict.faux { background: rgba(255, 93, 122, .14); }

.ambiance-matrix .elt-admin { background: rgba(45, 18, 48, .9); }
.ambiance-matrix #col-chapitres .elt-admin { background: rgba(70, 20, 44, .9); }
.ambiance-matrix #col-documents .elt-admin { background: rgba(48, 24, 80, .9); }
.ambiance-matrix .elt-admin:hover {
  border-color: rgba(255, 93, 143, .55);
  box-shadow: 0 0 14px rgba(255, 93, 143, .25);
}
.ambiance-matrix .elt-admin.actif {
  background: rgba(255, 93, 143, .1);
  box-shadow: 0 0 16px rgba(255, 93, 143, .3);
}
.ambiance-matrix .elt-admin.drop-cible { background: rgba(34, 197, 94, .16); }

.ambiance-matrix .bandeau-actif { background: rgba(255, 93, 143, .08); }
.ambiance-matrix .bloc-ajout[open], .ambiance-matrix .bloc-qcm[open] {
  background: rgba(255, 93, 143, .06);
}

.ambiance-matrix .carte-classe {
  border: 1px solid rgba(255, 93, 143, .3);
  box-shadow: 0 0 18px rgba(0, 0, 0, .5);
}
.ambiance-matrix .barre-defilement { background: rgba(255, 93, 143, .18); }
.ambiance-matrix .separateur-largeur::after { background: rgba(255, 93, 143, .3); }

/* ---- boutons, badges, liens : le rose bonbon remplace le violet ---- */
.ambiance-matrix .bouton-principal {
  background: linear-gradient(120deg, #e0447c, #ff5d8f);
  color: #3d1038;
  box-shadow: 0 0 16px rgba(255, 93, 143, .45);
}

.ambiance-matrix .bouton-secondaire {
  background: rgba(45, 18, 48, .9);
  color: var(--accent);
  border-color: rgba(255, 93, 143, .55);
}

.ambiance-matrix .bouton-danger {
  background: linear-gradient(120deg, #c21740, #ff5d7a);
  box-shadow: 0 0 14px rgba(255, 93, 122, .35);
}

.ambiance-matrix .btn-retour, .ambiance-matrix .lien-admin {
  background: rgba(45, 18, 48, .9);
  color: var(--accent) !important;
  border: 2px solid rgba(255, 93, 143, .5);
  box-shadow: 0 0 12px rgba(255, 93, 143, .25);
}

.ambiance-matrix .bouton-qcm { background: #3d1a3d; }
.ambiance-matrix .lien-telecharger {
  background: linear-gradient(120deg, #e0447c, #ff5d8f);
  color: #3d1038;
  box-shadow: 0 0 12px rgba(255, 93, 143, .45);
}
.ambiance-matrix .btn-foret {
  background: linear-gradient(120deg, #e0447c, #ff5d8f) !important;
  color: #3d1038 !important;
}

.ambiance-matrix .elt-admin .badge {
  background: rgba(255, 93, 143, .14);
  color: #ffd0e2;
}

.ambiance-matrix .mini-bouton { background: rgba(255, 93, 143, .14); color: #fff3f8; }
.ambiance-matrix .mini-bouton:hover { background: rgba(255, 93, 143, .28); }
.ambiance-matrix .mini-bouton.danger:hover { background: rgba(255, 93, 122, .25); }

.ambiance-matrix .qcm-lien { background: rgba(45, 18, 48, .9); }
.ambiance-matrix .qcm-lien.actuel {
  background: linear-gradient(120deg, #e0447c, var(--accent-2));
  color: #3d1038;
}
.ambiance-matrix .qcm-num {
  background: linear-gradient(135deg, #e0447c, var(--accent-2));
  color: #3d1038;
}
.ambiance-matrix .carte-classe .voir { background: rgba(45, 18, 48, .88); color: #fff3f8; }

/* ---- modale d'aperçu PDF : barre verte, fenêtre sombre ---- */
.ambiance-matrix .modale-fond { background: rgba(42, 18, 48, .82); }
.ambiance-matrix .modale-fenetre { background: #3d1038; }
.ambiance-matrix .modale-barre {
  background: linear-gradient(120deg, #5b1741, #8a2f56);
  border-bottom: 2px solid rgba(255, 93, 143, .4);
}

/* ---- champs de saisie : fond sombre, halo rose au focus ---- */
.ambiance-matrix .ligne-form select,
.ambiance-matrix .ligne-form input[type=text],
.ambiance-matrix .ligne-form input[type=password],
.ambiance-matrix .login-carte input[type=password],
.ambiance-matrix .ligne-a-deposer input[type=text],
.ambiance-matrix .tableau-fichiers input[type=text],
.ambiance-matrix .ligne-form.vertical input[type=text],
.ambiance-matrix .ligne-form.vertical input[type=color],
.ambiance-matrix .edit-inline,
.ambiance-matrix .select-deplacer,
.ambiance-matrix #select-chapitre { background: #3d1a3d; }

.ambiance-matrix .ligne-form select:focus, .ambiance-matrix .ligne-form input:focus,
.ambiance-matrix .login-carte input[type=password]:focus,
.ambiance-matrix .ligne-form.vertical input:focus,
.ambiance-matrix .select-deplacer:focus,
.ambiance-matrix .edit-inline:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 93, 143, .2);
}

/* ---- divers : messages, zone de dépôt, séparateurs pastel ---- */
.ambiance-matrix .message-info {
  background: rgba(34, 197, 94, .12);
  color: #ffe0ec;
  border-color: rgba(34, 197, 94, .45);
}
.ambiance-matrix .message-erreur {
  background: rgba(255, 93, 122, .12);
  color: #ffc9d4;
  border-color: rgba(255, 93, 122, .45);
}

.ambiance-matrix .zone-depot { background: rgba(45, 18, 48, .95); }
.ambiance-matrix .zone-depot.survole { background: rgba(34, 197, 94, .14); }
.ambiance-matrix .ligne-a-deposer.reussie { background: rgba(34, 197, 94, .1); }
.ambiance-matrix .ligne-a-deposer.echouee { background: rgba(255, 93, 122, .1); }
.ambiance-matrix .elt-admin:hover { border-color: rgba(255, 93, 143, .55); }
.ambiance-matrix .barre-envoi, .ambiance-matrix .barre-encadre,
.ambiance-matrix .qcm-progress .piste { background: rgba(255, 93, 143, .15); }
.ambiance-matrix #carte-qcm.survole, .ambiance-matrix #bloc-qcm.survole {
  outline-color: var(--accent-2);
}

.ambiance-matrix .login-carte h1 { color: var(--accent); }
.ambiance-matrix .pied a:hover { color: var(--accent-2); }

/* ---- accessibilité : sans animation, la pluie reste figée sur fond sombre ---- */
@media (prefers-reduced-motion: reduce) {
  #pluie-matrix { opacity: .55; }
}