/* Ludicademia — pages élève.
   Deux sortes de pages : les pages illustrées (.scene, image 1024 × 1536 avec des éléments posés dessus,
   tailles en cqw = % de la largeur de la scène) et les pages simples (.page), aux couleurs du monde. */
:root {
  --nuit: #1F2A44; --or: #E9B949; --or-fonce: #C99A3E; --creme: #FFF6DE; --encre: #2A1708; --encre2: #6B4A1F;
  --parchemin: #FBE4B3; --parchemin2: #F3D193; --bois: #5A321C; --bois2: #3B2012;
  --principal: #173E8C; --btn-haut: #0556BA; --btn-bas: #02399A; --son: #033F8A; --fond-page: #0B2340;
  --titre-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --texte-font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
[data-monde="heroicademia"] { --principal: #1B3C8F; --btn-haut: #0656B6; --btn-bas: #013893; --son: #033D80; --fond-page: #121A3A; }
[data-monde="zombicademia"] { --principal: #1E4A35; --btn-haut: #02604F; --btn-bas: #00342A; --son: #01493E; --fond-page: #0E1A12; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--texte-font); color: var(--encre); background: var(--fond-page); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
body[data-type="accueil"] { background: radial-gradient(circle at 50% 0%, #3A4C78 0%, var(--nuit) 60%) fixed; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
#fond { position: fixed; inset: -40px; z-index: -1; background: center / cover no-repeat; filter: blur(16px) brightness(.42) saturate(1.1); }
#app.charge::after { content: "Chargement…"; position: fixed; top: 12px; right: 12px; z-index: 60; background: #000b; color: #fff; padding: 6px 14px; border-radius: 99px; font-size: .9rem; }

/* ---------- Boutons communs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; text-decoration: none;
  background: linear-gradient(var(--btn-haut), var(--btn-bas)); color: #fff; border: 3px solid var(--or); border-radius: 999px;
  padding: .6em 1.3em; font-weight: 700; font-family: var(--titre-font); font-size: 1.05rem; box-shadow: 0 4px 0 #0006; text-shadow: 0 1px 0 #0007;
}
.btn:hover { filter: brightness(1.12); }
.btn:focus-visible, .lien:focus-visible, .onglet:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.principal { font-size: 1.15rem; }
.btn.secondaire { background: linear-gradient(var(--parchemin), var(--parchemin2)); color: var(--encre); text-shadow: none; }
.lien { background: none; border: 0; color: var(--creme); text-decoration: underline; font-size: 1rem; padding: 4px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: #1b1209ee; color: #fff; border: 2px solid var(--or); padding: 10px 18px; border-radius: 14px; max-width: min(92vw, 520px); text-align: center; box-shadow: 0 8px 24px #0008; }

/* ======================================================================
   Entrée et choix du monde
   ====================================================================== */
.accueil { width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 16px 32px; }
.marque { text-align: center; color: var(--creme); margin: 8px 0 24px; }
.marque h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 8vw, 3.2rem); margin: 0; color: #E0A526; letter-spacing: .02em; text-shadow: 0 2px 0 #0008; }
.marque p { margin: 4px 0 0; font-style: italic; opacity: .85; }
.carte { background: var(--creme); border: 3px solid #E0A526; border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px #0006; }
.carte label { display: block; font-weight: bold; margin-bottom: 8px; text-align: center; font-size: 1.15rem; }
.saisie { display: flex; gap: 10px; }
.saisie input {
  flex: 1; min-width: 0; font-size: 1.5rem; padding: 12px 14px; border: 2px solid #C9B27A; border-radius: 14px;
  background: #fff; color: #1B2333; text-align: center; letter-spacing: .04em; font-family: var(--texte-font);
}
.saisie input:focus { outline: 3px solid #E0A526; outline-offset: 1px; }
.btn-fleche { font-size: 1.6rem; width: 64px; border: 0; border-radius: 14px; background: var(--nuit); color: #E0A526; }
.btn-fleche:disabled { opacity: .5; cursor: wait; }
.aide { text-align: center; color: #6B5B3A; margin: 12px 0 0; font-size: .95rem; }
.erreur { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #FBE3DF; color: #8A1C12; text-align: center; }
.erreur:empty { display: none; }
.bonjour { text-align: center; color: var(--creme); font-size: 1.4rem; margin: 0 0 14px; }
.mondes { display: grid; gap: 14px; }
.monde {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 108px; text-align: left;
  border: 3px solid #E0A526; border-radius: 18px; padding: 18px 20px; color: #fff; box-shadow: 0 6px 18px #0005;
  background-size: cover; background-position: center 16%; text-shadow: 0 2px 4px #000c;
}
.monde strong { display: block; font-family: Georgia, serif; font-size: 1.6rem; }
.monde span { opacity: .95; font-weight: 700; }
.monde.tortugademia { background-image: linear-gradient(90deg, #0B4F6Cee, #1F8A9E66), url("../mondes/tortugademia/pages/menu.webp"); }
.monde.heroicademia { background-image: linear-gradient(90deg, #1E3A8Aee, #4C5FB566), url("../mondes/heroicademia/pages/menu.webp"); }
.monde.zombicademia { background-image: linear-gradient(90deg, #2F4A2Aee, #5B7A3A66), url("../mondes/zombicademia/pages/menu.webp"); }
.monde:hover { filter: brightness(1.1); }
.monde.ferme { filter: grayscale(.85); opacity: .7; border-color: #8A8F99; }
.monde .etat { font-size: 1.6rem; }
.message { margin: 16px 0 0; padding: 14px; border-radius: 14px; background: var(--creme); text-align: center; }
.message:empty { display: none; }
.bas { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }
.discret { text-align: center; margin-top: 28px; }
.discret a { color: #C7CCDA; font-size: .9rem; }

/* ======================================================================
   Pages simples (aux couleurs du monde)
   ====================================================================== */
.page { width: 100%; max-width: 760px; margin: 0 auto; padding: 14px 16px 40px; color: var(--creme); }
.entete { text-align: center; margin: 18px 0 14px; }
.entete h1 { margin: 0; font-family: var(--titre-font); font-size: clamp(1.9rem, 7vw, 2.8rem); color: #F7C948; text-shadow: 0 3px 0 #000a, 0 0 18px #0008; }
.entete p { margin: 4px 0 0; font-style: italic; color: var(--creme); }
.parchemin { background: linear-gradient(var(--parchemin), var(--parchemin2)); color: var(--encre); border: 3px solid var(--or-fonce); border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px #0007; }
.pied { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.regle { background: #0008; color: #FFF3D6; border-radius: 12px; padding: 10px 14px; font-size: .95rem; text-align: center; margin: 12px 0; }

.barre { display: flex; align-items: center; gap: 12px; background: linear-gradient(#6B3B1F, #4A2713); border: 3px solid var(--or); border-radius: 18px; padding: 8px 14px 8px 8px; box-shadow: 0 6px 18px #0007; }
.barre .medaillon { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; padding: 0; border: 3px solid var(--or); background: #E9D3A1; }
.barre .medaillon img, .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.barre .qui { display: flex; flex-direction: column; min-width: 0; }
.barre .qui strong { font-family: var(--titre-font); font-size: 1.35rem; color: #fff; }
.barre .qui span { color: #FFE29A; font-size: .95rem; }
.barre .pts { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.barre .pts strong { font-family: var(--titre-font); font-size: 1.6rem; color: #FFE29A; line-height: 1; }
.barre .pts span { font-size: .85rem; color: #FFF3D6; }

.degres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 10px 0 18px; }
.degre { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 10px; border-radius: 20px; border: 4px solid var(--or);
  background: linear-gradient(var(--btn-haut), var(--btn-bas)); color: #fff; box-shadow: 0 6px 0 #0006, 0 10px 24px #0007; }
.degre strong { font-family: var(--titre-font); font-size: 2.8rem; line-height: 1; text-shadow: 0 3px 0 #0007; }
.degre span { color: #FFE29A; font-weight: 700; }
.degre:hover { filter: brightness(1.12); transform: translateY(-2px); }
.progression { margin: 6px 0 12px; text-align: center; }
.progression p { margin: 6px 0 0; color: var(--creme); font-size: .95rem; }
.jauge { height: 16px; background: #0008; border: 2px solid var(--or); border-radius: 99px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: linear-gradient(#FFE07A, #E0A526); }
.parchemin .progression p, .grade-actuel .progression p { color: var(--encre2); }
.raccourcis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.raccourci { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; min-height: 120px;
  background: linear-gradient(var(--parchemin), var(--parchemin2)); color: var(--encre); border: 3px solid var(--or-fonce); border-radius: 16px; font-weight: 700; font-family: var(--titre-font); font-size: 1.02rem; box-shadow: 0 6px 18px #0006; }
.raccourci img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--or-fonce); background: #E9D3A1; }
.raccourci img.ban { width: 100%; max-width: 150px; height: auto; aspect-ratio: 640 / 263; border-radius: 10px; }
.raccourci .ico { font-size: 2.6rem; line-height: 1; }
.raccourci:hover { filter: brightness(1.06); transform: translateY(-2px); }
@media (max-width: 480px) { .raccourcis { grid-template-columns: 1fr; } .raccourci { flex-direction: row; min-height: 0; justify-content: flex-start; } .raccourci img.ban { max-width: 110px; } }

/* Salle des trophées */
.onglets { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.onglet { background: linear-gradient(var(--parchemin), var(--parchemin2)); color: var(--encre); border: 2px solid var(--or-fonce); border-radius: 99px; padding: 8px 18px; font-weight: 700; font-family: var(--titre-font); font-size: 1.1rem; }
.onglet.actif { background: linear-gradient(var(--btn-haut), var(--btn-bas)); color: #fff; border-color: var(--or); box-shadow: 0 0 0 2px #0006, 0 0 14px #FFD54A66; }
.onglets.petits .onglet { font-size: .98rem; padding: 6px 14px; }
.onglet small { opacity: .8; font-family: var(--texte-font); }
.armoire-salle { background: linear-gradient(#5A321C, #3B2012); border: 4px solid var(--or-fonce); border-radius: 18px; padding: 14px; margin: 14px 0; color: #FFE29A; box-shadow: 0 10px 30px #0008, inset 0 0 40px #0007; }
.armoire-salle h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--titre-font); font-size: 1.4rem; margin: 0 0 12px; }
.armoire-salle .compte { margin-left: auto; background: #0007; padding: 2px 12px; border-radius: 99px; font-size: 1rem; color: #fff; font-family: var(--texte-font); }
.armoire-salle .insigne { background: #FFD54A; color: #5A3A00; padding: 2px 12px; border-radius: 99px; font-size: .95rem; font-family: var(--texte-font); }
.armoire-salle.complete { box-shadow: 0 0 0 4px #FFD54A, 0 0 34px #FFD54A99, inset 0 0 40px #0007; }
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grille.cinq { grid-template-columns: repeat(5, 1fr); }
.case { background: #2A170Cbb; border-radius: 12px; padding: 8px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-bottom: 6px solid #8A5A2B; min-width: 0; }
.case .trophee-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; }
.case.a-gagner .trophee-img { filter: grayscale(1) brightness(.32) opacity(.75); }
.case.vide { opacity: .45; }
.case .nom { font-size: .8rem; color: #FFF3D6; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.case.gagne .trophee-img { filter: drop-shadow(0 4px 6px #000a); }
@media (max-width: 460px) { .grille { gap: 6px; } .case .nom { font-size: .68rem; } .grille.cinq { grid-template-columns: repeat(3, 1fr); } }

/* Trophée provisoire (pas encore d'image pour cette armoire) et emplacement vide */
.trophee-img.provisoire { display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #FFF0B8 0%, #E7B547 55%, #9C6A1E 100%); border-radius: 50%; box-shadow: inset 0 -4px 8px #0004; }
.trophee-img.provisoire span { font-size: 180%; line-height: 1; }
.trophee-img.provisoire small { font-weight: 700; color: #4A2A00; }
.case .trophee-img.provisoire { font-size: 1.1rem; width: 80%; }
.trophee-img.vide-rayon { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px dashed #FFF5; color: #FFF7; font-weight: 700; font-size: 1.4rem; width: 70%; aspect-ratio: 1; }

/* Boss */
.boss-liste { display: grid; gap: 12px; }
.boss-carte { display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: center; background: linear-gradient(var(--parchemin), var(--parchemin2)); border: 3px solid var(--or-fonce); border-radius: 16px; padding: 8px; text-align: left; color: var(--encre); box-shadow: 0 6px 18px #0007; }
.boss-carte img { width: 100%; border-radius: 10px; aspect-ratio: 640 / 263; object-fit: cover; display: block; }
.boss-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.boss-info strong { font-family: var(--titre-font); font-size: 1.2rem; }
.boss-info .statut { font-size: .92rem; font-weight: 700; color: var(--encre2); }
.boss-carte.actif { box-shadow: 0 0 0 3px #FF6B5B, 0 0 24px #FF6B5B99; }
.boss-carte.vaincu img { filter: grayscale(.7); }
.boss-carte.vaincu .statut { color: #1E6B2A; }
.boss-carte:hover { filter: brightness(1.05); }
.pv { height: 14px; background: #0007; border-radius: 99px; overflow: hidden; border: 2px solid #1b0c06; }
.pv i { display: block; height: 100%; background: linear-gradient(#FF7B6B, #C0261A); }

/* Grades */
.grade-actuel { display: grid; grid-template-columns: 38% 1fr; gap: 16px; align-items: center; background: linear-gradient(var(--parchemin), var(--parchemin2)); color: var(--encre); border: 3px solid var(--or-fonce); border-radius: 18px; padding: 12px 16px; box-shadow: 0 10px 30px #0007; }
.grade-actuel img { width: 100%; display: block; }
.grade-actuel h2 { font-family: var(--titre-font); font-size: 1.7rem; margin: 0; color: var(--principal); }
.grade-actuel p { margin: 2px 0; }
.grade-actuel .petit { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre2); }
.grade-actuel .progression { text-align: left; }
.grades-liste { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.grade { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; background: linear-gradient(var(--parchemin), var(--parchemin2)); border-radius: 14px; padding: 6px 14px 6px 6px; color: var(--encre); border: 2px solid var(--or-fonce); }
.grade img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--or-fonce); background: #E9D3A1; }
.grade .g-nom strong { display: block; font-family: var(--titre-font); font-size: 1.08rem; }
.grade .g-nom small { color: var(--encre2); }
.grade .g-etat { font-size: 1.3rem; }
.grade.obtenu .g-etat { color: #1E6B2A; }
.grade.actuel { background: #FFF3CF; box-shadow: 0 0 0 3px #FFD54A, 0 0 18px #FFD54A99; }
.grade.futur { opacity: .85; }
.grade.futur img { filter: brightness(.3) sepia(.4); }
@media (max-width: 460px) { .grade-actuel { grid-template-columns: 1fr; text-align: center; } .grade-actuel img { max-width: 220px; margin: 0 auto; } .grade-actuel .progression { text-align: center; } }

/* Liste de vocabulaire */
.liste-corps { font-size: 1rem; }
.vl-part { font-family: var(--titre-font); font-size: 1.7rem; color: var(--principal); margin: 18px 0 2px; }
.vl-sec { margin: 0 0 14px; }
.vl-h { font-weight: 900; font-size: 1.1rem; color: var(--bois); margin: 14px 0 6px; }
.vl-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #FFFAF0; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 2px #DCC79F; font-size: 1.05rem; }
.vl-table th { background: var(--principal); color: #fff; text-align: left; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; }
.vl-table td { padding: 8px 12px; width: 50%; vertical-align: top; border-top: 1px solid #ECDCB9; }
.vl-table tbody tr:nth-child(even) td { background: #F8EDD4; }
.vl-l { font-weight: 800; }
.vl-gap b { color: var(--principal); }
.art-der { color: #1F5FA8; } .art-die { color: #C0392B; } .art-das { color: #2E7D32; }
.vl-words { columns: 3 13em; column-gap: 22px; margin: 0; padding: 12px 14px 12px 34px; background: #FFFAF0; border-radius: 12px; box-shadow: inset 0 0 0 2px #DCC79F; font-size: 1.1rem; font-weight: 700; }
.vl-words li { break-inside: avoid; padding: 3px 0; }
.vl-rule { background: #FFF3CF; border-left: 6px solid var(--bois); border-radius: 10px; padding: 8px 14px 10px; }
.vl-rule p { margin: 4px 0; }
.vl-sent { margin: 0; padding: 12px 14px 12px 40px; background: #FFFAF0; border-radius: 12px; box-shadow: inset 0 0 0 2px #DCC79F; }
.vl-sent li { padding: 3px 0; }
@media (max-width: 520px) { .vl-table { font-size: .95rem; } .vl-table td { padding: 7px 8px; } .parchemin { padding: 12px; } }

/* ---------- Fenêtres ---------- */
.modal-fond { position: fixed; inset: 0; z-index: 50; background: #000b; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fondu .25s ease-out; }
.modal { position: relative; width: 100%; max-width: 420px; max-height: 92vh; overflow: auto; text-align: center; padding: 22px 20px 20px;
  background: radial-gradient(circle at 50% 30%, #FFF6DF, var(--parchemin) 60%, var(--parchemin2)); color: var(--encre); border: 4px solid var(--or); border-radius: 24px; box-shadow: 0 0 0 4px #0005, 0 20px 60px #000c; animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.modal h2 { font-family: var(--titre-font); font-size: 1.8rem; margin: 8px 0 6px; color: var(--principal); }
.modal p { margin: 6px 0; font-size: 1.05rem; }
.modal-image { display: flex; justify-content: center; }
.modal-image img, .modal-image .trophee-img { width: 62%; max-width: 230px; aspect-ratio: auto; filter: drop-shadow(0 6px 10px #0006); border-radius: 12px; }
.modal-image .trophee-img.provisoire { aspect-ratio: 1; font-size: 1.6rem; border-radius: 50%; }
.modal-image.ban img { width: 100%; max-width: none; }
.m-trophee .modal-image, .m-grade .modal-image { background: radial-gradient(circle, #FFE58A 0%, transparent 65%); }
.modal .pv { margin: 10px 8px 4px; }
.modal-bas { margin-top: 14px; }
.liste-erreurs { list-style: none; padding: 0; margin: 8px 0 0; text-align: left; }
.liste-erreurs li { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-bottom: 1px solid #E3CF9F; }
.liste-erreurs .q { font-weight: 700; }
.liste-erreurs s { color: #A3271B; }
.liste-erreurs .bonne b { color: #1E6B2A; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* ======================================================================
   Pages illustrées
   ====================================================================== */
.scene-cadre { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: center; }
.scene {
  position: relative; width: min(100vw, calc(100vh * 2 / 3), 760px); width: min(100vw, calc(100dvh * 2 / 3), 760px);
  aspect-ratio: 2 / 3; container-type: inline-size; overflow: hidden; box-shadow: 0 0 50px #000b; user-select: none; -webkit-user-select: none;
}
.scene-fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.pos { position: absolute; }
.scene input, .scene .lecons { user-select: text; -webkit-user-select: text; }
.zone { background: transparent; border: 0; padding: 0; border-radius: 3cqw; transition: box-shadow .15s, background .15s; }
.zone:hover { background: #FFF2; box-shadow: 0 0 0 .5cqw #FFE28Acc, 0 0 4cqw #FFE28A88; }
.zone:focus-visible { outline: none; box-shadow: 0 0 0 .7cqw #FFD34D, 0 0 4cqw #FFD34D; }
.zone:active { background: #FFF4; }

/* Barre du haut */
.portrait { border-radius: 50%; overflow: hidden; border: 0; padding: 0; background: #E9D3A1; }
.portrait:hover, .portrait:focus-visible { outline: none; box-shadow: 0 0 0 .6cqw #FFE28A, 0 0 3cqw #FFE28A; }
.plaque-prenom { display: flex; flex-direction: column; justify-content: center; padding: 0 2.2cqw; border-radius: 1.6cqw; color: #3B2210;
  background: radial-gradient(ellipse at 50% 45%, #FDEBC2 0%, #FBE4B3 60%, #F6D9A0 100%); }
.plaque-prenom strong { font: 700 4.6cqw/1.05 var(--titre-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plaque-prenom span { font-size: 2.2cqw; color: #7A4A1D; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .3cqw; }
.plaque-points { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 1.4cqw; color: #FFE29A;
  background: radial-gradient(ellipse at 50% 40%, #4E2B1F, #3E2118); }
.plaque-points strong { font: 700 5.4cqw/1 var(--titre-font); text-shadow: 0 .3cqw 0 #000a; }
.plaque-points span { font: 700 2.6cqw/1.2 var(--titre-font); color: #FFF3D6; }

/* Menu des branches */
.pastille { display: flex; align-items: center; justify-content: center; pointer-events: none; background: #000b; color: #fff; border: .35cqw solid var(--or); border-radius: 99px; font: 700 2.7cqw/1 var(--texte-font); }
.pastille.bientot { background: #333c; color: #ddd; font-size: 2.3cqw; }

/* Leçons d'une branche */
.lecons { overflow-y: auto; display: flex; flex-direction: column; gap: 1.5cqw; padding: 1.4cqw 1.4cqw 1.4cqw 1.2cqw; border-radius: 2cqw;
  background: linear-gradient(90deg, #4A2915, #6A3D22 50%, #4A2915); border: .5cqw solid var(--or-fonce); box-shadow: inset 0 0 3cqw #000a;
  scrollbar-width: thin; scrollbar-color: var(--or) #0004; overscroll-behavior: contain; }
.lecon { flex: none; display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 1.6cqw 1.2cqw 1.2cqw; border-radius: 1.8cqw;
  background: linear-gradient(#FCEBC4, #F5D9A0); border: .45cqw solid #D7A443; box-shadow: 0 .5cqw 0 #0005; }
.lecon-jouer { flex: 1; display: flex; align-items: center; gap: 1.6cqw; background: none; border: 0; padding: 0; text-align: left; color: inherit; min-width: 0; border-radius: 1.4cqw; }
.lecon-jouer:focus-visible { outline: .5cqw solid var(--or); outline-offset: .6cqw; }
.lecon:hover { filter: brightness(1.04); }
.sceau { width: 10.5cqw; height: 10.5cqw; flex: none; }
.lecon-texte { display: flex; flex-direction: column; min-width: 0; }
.lecon-texte strong { font: 700 3.5cqw/1.1 var(--titre-font); color: var(--encre); }
.lecon-texte .st { font-size: 2.6cqw; color: #5A3A1A; margin-top: .3cqw; }
.lecon-texte .et { font-size: 2.3cqw; font-weight: 700; margin-top: .6cqw; color: #6B6B6B; }
.lecon.reussi .et { color: #2E7D32; }
.lecon.parfait .et { color: #B7791F; }
.lecon.fermee { opacity: .7; }
.btn-liste { flex: none; background: linear-gradient(var(--btn-haut), var(--btn-bas)); color: #fff; border: .35cqw solid var(--or); border-radius: 1.4cqw; font: 700 2.7cqw/1 var(--titre-font); padding: 1.3cqw 1.8cqw; box-shadow: 0 .4cqw 0 #0006; }
.btn-liste:hover { filter: brightness(1.15); }
.lecons .vide { margin: auto 0; background: linear-gradient(#FCEBC4, #F5D9A0); border: .45cqw solid #D7A443; border-radius: 2cqw; padding: 4cqw 3cqw; display: flex; flex-direction: column; gap: 1.4cqw; text-align: center; }
.lecons .vide strong { font: 700 5cqw/1.1 var(--titre-font); color: var(--principal); }
.lecons .vide span { font-size: 3cqw; color: var(--encre2); }

/* Armoire des derniers trophées */
.armoire { display: grid; grid-template-rows: repeat(3, 1fr); padding: 1cqw 1cqw 0; border-radius: 1cqw;
  background: linear-gradient(90deg, #2E180C, #4F2C17 50%, #2E180C); box-shadow: inset 0 0 3cqw #000c; }
.rayon { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5cqw; padding-bottom: .8cqw; border-bottom: 1.6cqw solid #8A5A2B; box-shadow: 0 .6cqw 0 #2a160b; min-height: 0; }
.rayon .trophee-img { height: 64%; width: auto; aspect-ratio: 1; object-fit: contain; border-radius: 1cqw; filter: drop-shadow(0 .6cqw .6cqw #000a); }
.rayon .trophee-img.provisoire { font-size: 2.6cqw; border-radius: 50%; }
.rayon .trophee-img.vide-rayon { width: auto; height: 50%; font-size: 4cqw; }
.etiquette { background: linear-gradient(#FBE6B4, #EBC983); color: #3B2210; font: 700 2.2cqw/1.25 var(--titre-font); padding: .3cqw 1.4cqw; border-radius: .7cqw; border: .25cqw solid var(--or-fonce); max-width: 96%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rayon.libre .etiquette { opacity: .55; }
.btn-voir { background: linear-gradient(var(--btn-haut), var(--btn-bas)); border: .55cqw solid var(--or); border-radius: 2.4cqw; color: #fff; font: 700 3.6cqw/1.1 var(--titre-font); text-shadow: 0 .3cqw 0 #0007; box-shadow: 0 .6cqw 0 #0007; padding: 0 1cqw; }
.btn-voir:hover { filter: brightness(1.12); }

/* Quiz */
.btn-quitter { background: #000a; color: #fff; border: .35cqw solid var(--or); border-radius: 99px; font: 700 2.8cqw/1 var(--texte-font); z-index: 2; }
.btn-quitter:hover { background: #000d; }
.perle { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #E2E2E2, #9A9A9A 60%, #6E6E6E); border: .35cqw solid #5A5A5A; box-shadow: inset 0 -.4cqw .6cqw #0005; display: flex; align-items: center; justify-content: center; }
.perle.hors { background: #3B2416; border-color: #2A170C; box-shadow: none; opacity: .9; }
.perle.courante { background: radial-gradient(circle at 40% 35%, #DFFFFF, #57D6EE 55%, #1A8DB0); border-color: #E9FFFF; box-shadow: 0 0 0 .4cqw #7FF3FF88, 0 0 3cqw #7FF3FF; }
.perle.ok { background: radial-gradient(circle at 40% 35%, #5E9BEF, #1D4FA8 70%); border-color: var(--or); }
.perle.ok::after { content: "★"; color: #FFD54A; font-size: 3cqw; line-height: 1; text-shadow: 0 .2cqw 0 #0007; }
.perle.ko { background: radial-gradient(circle at 40% 35%, #F08070, #A3271B 70%); border-color: #FFC9BF; }
.perle.ko::after { content: "✗"; color: #fff; font: 700 2.8cqw/1 var(--texte-font); }
.plaque-question { display: flex; align-items: center; justify-content: center; border-radius: .9cqw; color: #3B2210; font: 700 2.9cqw/1 var(--titre-font);
  background: linear-gradient(#FDDBA0, #F6CD86); }
.carte-question { display: flex; flex-direction: column; align-items: stretch; padding: 1.6cqw 2.6cqw 1.4cqw; border-radius: 1.6cqw; color: var(--encre); text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #FFF6DF, #FCEBC6 70%, #F8E2B4); }
.q-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0 7.5cqw; }
.carte-question.avec-choix .q-zone { flex: none; height: 54%; }
.carte-question.avec-choix .question.cite, .carte-question.avec-choix .question.cite .autour { font-size: 3.2cqw; gap: .2cqw; }
.question { margin: 0; font: 700 6cqw/1.15 var(--titre-font); overflow-wrap: anywhere; }
.question.t2 { font-size: 5.2cqw; } .question.t3 { font-size: 4.4cqw; } .question.t4 { font-size: 3.7cqw; } .question.t5 { font-size: 3.1cqw; }
.question.cite { display: flex; flex-direction: column; align-items: center; gap: .4cqw; font-size: 3.6cqw; }
.question.cite .autour { font-size: 3.6cqw; font-weight: 700; }
.question.cite .mot { font-size: 6.4cqw; line-height: 1.1; color: var(--principal); }
.question.cite.t2 .mot { font-size: 5.4cqw; } .question.cite.t3 .mot { font-size: 4.5cqw; } .question.cite.t4 .mot { font-size: 3.8cqw; } .question.cite.t5 .mot { font-size: 3.2cqw; }
.trou { display: inline-block; width: 12cqw; border-bottom: .5cqw solid var(--encre); margin: 0 .6cqw; vertical-align: baseline; }
.repondu .indice { display: none; }
.indice { margin: .8cqw 0 0; font-size: 2.7cqw; color: var(--encre2); font-style: italic; }
.ecoute { position: absolute; top: 1.2cqw; right: 1.4cqw; display: flex; gap: .8cqw; }
.haut-parleur { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; border: .3cqw solid var(--or-fonce); background: #FFF8E6; font-size: 3.3cqw; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.haut-parleur:hover { background: #FFE9B0; }
.haut-parleur.petit { width: 5.4cqw; height: 5.4cqw; font-size: 2.7cqw; margin-left: 1.2cqw; }
.carte-bas { flex: none; display: flex; justify-content: center; min-height: 0; }
.accents { display: flex; flex-wrap: wrap; gap: .5cqw; justify-content: center; }
.accents button { min-width: 4.3cqw; height: 5.2cqw; padding: 0 .4cqw; font: 700 2.8cqw/1 var(--texte-font); border-radius: .9cqw; border: .3cqw solid var(--or-fonce); background: #fff; color: var(--encre); }
.question.dictee { font-size: 4.2cqw; }
.ecoute.grand { position: static; margin: 1.2cqw 0 .4cqw; gap: 2cqw; }
.ecoute.grand .haut-parleur { width: 11cqw; height: 11cqw; font-size: 5.6cqw; border-width: .45cqw; box-shadow: 0 .5cqw 0 #0003; }
.ecoute.grand .haut-parleur:first-child { background: radial-gradient(circle at 40% 35%, #FFFBEF, #FFE7A8); }
.accents button:hover { background: #FFF1C8; }
.retour { display: inline-flex; align-items: center; justify-content: center; gap: 1cqw; font: 700 3cqw/1.2 var(--texte-font); padding: .7cqw 1.6cqw; border-radius: 1.4cqw; text-align: center; }
.retour.ok { background: #DFF3DF; color: #1E6B2A; }
.retour.ko { background: #FBE1DC; color: #8A1C12; }
.retour b { color: var(--encre); }
.zone-reponse { display: flex; align-items: center; justify-content: center; }
.reponse { width: 95%; height: 74%; border: 0; border-radius: 1.6cqw; background: #FEFAF4; font: 600 4.6cqw/1 var(--texte-font); color: #1B2333; padding: 0 2.6cqw; outline: none; box-shadow: inset 0 0 0 .35cqw #D9C08A; }
.reponse::placeholder { color: #8C8273; font-style: italic; font-weight: 400; }
.reponse:focus { box-shadow: inset 0 0 0 .5cqw var(--or); }
.zone-reponse.ok .reponse { background: #EEFBEA; box-shadow: inset 0 0 0 .6cqw #2E7D32; }
.zone-reponse.ko .reponse { background: #FDEEEB; box-shadow: inset 0 0 0 .6cqw #A3271B; }
.choix { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1.6cqw; padding: 1.6cqw; border-radius: 1.6cqw; background: #FBEBC6; }
.option { border: .4cqw solid var(--or-fonce); background: #FFFAF0; border-radius: 1.6cqw; font: 700 3.5cqw/1.15 var(--texte-font); color: var(--encre); padding: 1cqw; overflow-wrap: anywhere; }
.option:hover:not(:disabled) { background: #FFF1C8; }
.option.ok { background: #DFF3DF; border-color: #2E7D32; color: #1E6B2A; }
.option.ko { background: #FBE1DC; border-color: #A3271B; color: #8A1C12; }
.option:disabled { cursor: default; }
.btn-valider, .btn-son { display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; border-radius: 3cqw; }
.btn-valider:hover, .btn-son:hover { background: #FFF2; }
.btn-valider:focus-visible, .btn-son:focus-visible { outline: none; box-shadow: 0 0 0 .7cqw #FFD34D; }
.btn-valider span, .btn-son span { visibility: hidden; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 .3cqw 0 #0007; }
.btn-valider span { width: 84%; height: 70%; border-radius: 1.8cqw; background: linear-gradient(var(--btn-haut), var(--btn-bas)); font: 700 4.2cqw/1 var(--titre-font); white-space: nowrap; }
.btn-valider.suivant span, .btn-valider.attente span { visibility: visible; }
.btn-valider.attente span { font-size: 3.6cqw; }
.btn-valider.attente { cursor: default; }
.btn-son span { width: 78%; height: 66%; border-radius: 1.6cqw; background: var(--son); font: 700 3cqw/1 var(--titre-font); }
.btn-son.coupe span { visibility: visible; }
.btn-son.coupe span::before { content: "🔇 "; }

/* Résultat */
.res-titre { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #3B2210; overflow: hidden; }
.res-titre strong { font: 700 6.4cqw/1 var(--titre-font); color: var(--principal); }
.res-titre span { font-size: 2.5cqw; color: var(--encre2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: .4cqw; }
.res-score { display: flex; align-items: center; justify-content: center; font: 700 9cqw/1 var(--titre-font); color: var(--encre); }
.res-note { display: flex; align-items: center; justify-content: center; text-align: center; font: 700 2.3cqw/1.1 var(--texte-font); color: var(--encre2); background: #FBE7BCe6; border-radius: 99px; }
.res-gain { display: flex; align-items: center; justify-content: center; font: 700 7cqw/1 var(--titre-font); color: #FFD54A; text-shadow: 0 .4cqw 0 #000a; }
.res-gain.zero { color: #E8E0D0; font-size: 6cqw; }
.res-prix { display: flex; align-items: center; justify-content: center; }
.res-prix img, .res-prix .trophee-img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 .8cqw 1cqw #0008); }
.res-prix .trophee-img { height: 90%; width: auto; aspect-ratio: 1; object-fit: contain; border-radius: 1.4cqw; }
.res-prix .trophee-img.provisoire { font-size: 3.4cqw; border-radius: 50%; }
.res-prix .rond { width: 80%; height: auto; border-radius: 50%; border: .6cqw solid var(--or); background: #E9D3A1; }
.res-prix .ban { width: 100%; height: auto; border-radius: 1.4cqw; border: .4cqw solid var(--or); }
.res-prix .etoiles { font-size: 7cqw; letter-spacing: .4cqw; color: #FFD54A; text-shadow: 0 0 2cqw #FFF8, 0 .4cqw 0 #8A5A00; }
.res-etiquette { display: flex; align-items: center; justify-content: center; font: 700 2.9cqw/1 var(--titre-font); color: #3B2210; text-align: center; }
.btn-erreurs { background: #FFF8E6; border: .4cqw solid var(--or-fonce); border-radius: 99px; font: 700 2.9cqw/1 var(--texte-font); color: #8A1C12; box-shadow: 0 .4cqw 0 #0005; }
.btn-erreurs:hover { background: #FFEFC2; }

/* Page d'un boss : barre de vie et cœurs posés sur ceux du dessin */
.pv-scene { background: #2A0A08; border-radius: .6cqw; overflow: hidden; box-shadow: inset 0 0 .6cqw #000; }
.pv-scene i { display: block; height: 100%; background: linear-gradient(#FF6A5A, #D42A1C 55%, #9E140C); box-shadow: inset 0 .3cqw 0 #FFFFFF55; transition: width .6s; }
.coeur-perdu { border-radius: 35%; -webkit-backdrop-filter: grayscale(1) brightness(.45); backdrop-filter: grayscale(1) brightness(.45); }
.pv-texte { display: flex; align-items: center; justify-content: center; background: #000b; color: #fff; border-radius: 99px; font: 700 2.2cqw/1 var(--texte-font); white-space: nowrap; }
.nom-boss { display: flex; align-items: center; padding-left: 1.2cqw; background: linear-gradient(#22324F, #121C33); color: #fff; font: 700 2.5cqw/1 var(--titre-font); border-radius: .6cqw; }
.panneau-boss { display: flex; flex-direction: column; gap: .6cqw; padding: 1.2cqw 2cqw; color: #fff; border-radius: 2cqw; background: #120C08e6; border: .4cqw solid var(--or); font-size: 2.9cqw; box-shadow: 0 1cqw 3cqw #000b; }
.panneau-boss .lien { color: #FFE29A; font-size: 2.6cqw; align-self: flex-start; padding: 0; }
.panneau-boss .action { flex: 1; display: flex; align-items: center; gap: 2cqw; justify-content: space-between; }
.panneau-boss p { margin: 0; line-height: 1.25; }
.panneau-boss .btn { font-size: 3.3cqw; white-space: nowrap; padding: 1.2cqw 2.6cqw; border-width: .4cqw; flex: none; }
.mini-trophee { width: 11cqw; flex: none; }