/* BASE : palette sombre, police système, boutons et états accessibles. */
*{box-sizing:border-box}body{margin:0;background:#08090d;color:#f5f5fa;font-family:Arial,Helvetica,sans-serif}[hidden]{display:none!important}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:12px;background:#b197fc;color:#101018;padding:14px 22px;font-weight:700;transition:transform .2s,background .2s}button:hover{transform:translateY(-2px)}button:disabled{opacity:.55;cursor:default;transform:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #72e6c0;outline-offset:4px}.subtle{background:#20212b;color:#ddd}input,select{background:#151720;border:1px solid #3b3d4b;color:white;border-radius:10px;padding:12px;max-width:100%}.muted{color:#9fa2b3;line-height:1.7;font-size:14px}.eyebrow,.welcome{letter-spacing:.25em;font-size:12px;color:#b8a2f8}h2{font-size:clamp(32px,5vw,54px);letter-spacing:-.04em}h3{font-size:28px}a{color:inherit}
/* ACCUEIL : titre central, halo, entrée et contrôle audio. */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;padding:40px 20px}.content{position:relative;text-align:center;z-index:2}.glow{position:absolute;width:500px;height:500px;max-width:90vw;background:#7540a940;filter:blur(100px);border-radius:50%}h1{font-size:clamp(58px,11vw,118px);letter-spacing:-.06em;line-height:.95;margin:30px 0;font-weight:900}h1 span{display:block;color:#b394ff}#enterButton{display:block;margin:36px auto 20px;background:#f3f1fa;border-radius:40px;padding:18px 32px;letter-spacing:.1em;font-size:13px}#introMusic{font-size:12px}.welcome{animation:appear 1s both}.content h1{animation:appear 1s .25s both}
/* ÉCLAIRS : six symboles colorés, animés par une double pulsation douce. */
.bolts{position:absolute;width:min(760px,96vw);height:440px;pointer-events:none}.bolts i{position:absolute;font-style:normal;font-size:100px;color:#a17aff;text-shadow:0 0 20px currentColor;animation:heartbeat 2.4s infinite;opacity:.3}.bolts i:nth-child(1){left:4%;top:8%;transform:rotate(-20deg)}.bolts i:nth-child(2){right:4%;top:12%;color:#50baff;animation-delay:.2s}.bolts i:nth-child(3){left:15%;bottom:3%;color:#55e6ac;animation-delay:.4s}.bolts i:nth-child(4){right:14%;bottom:0%;animation-delay:.3s}.bolts i:nth-child(5){left:36%;top:-12%;font-size:60px;color:#50baff;animation-delay:.1s}.bolts i:nth-child(6){right:33%;bottom:-12%;font-size:65px;color:#55e6ac;animation-delay:.5s}@keyframes heartbeat{0%,65%,100%{opacity:.2;filter:brightness(.7)}15%,35%{opacity:.9;filter:brightness(1.5)}25%,45%{opacity:.4;filter:brightness(.9)}}@keyframes appear{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* SECTIONS : cinq grands panneaux responsifs et couleurs individuelles. */
#mainSite{max-width:1240px;margin:auto;padding:30px 5vw}header{display:flex;align-items:center;justify-content:space-between;gap:18px}header a{text-decoration:none;font-weight:900;letter-spacing:-.03em;font-size:22px}header a span{display:block;font-size:9px;letter-spacing:.18em;color:#8a8d9d;margin-top:6px}.lobby{padding:75px 0 40px}.lobby h2{max-width:650px;margin:18px 0}.sections{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}.category{position:relative;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-height:290px;padding:32px;border:1px solid #343044;background:linear-gradient(135deg,#282036,#101118);color:#eee;overflow:hidden}.category b{font-size:clamp(28px,4vw,42px);letter-spacing:-.04em;line-height:1.05}.category span:not(.number){font-size:13px;color:#bbb;line-height:1.5}.category .number{font-size:10px;letter-spacing:.18em;color:var(--accent,#b197fc)}.category em{font-style:normal;font-size:13px;color:var(--accent,#b197fc)}.blue{--accent:#6abaff;background:linear-gradient(135deg,#172c40,#101118)}.green{--accent:#65dbb0;background:linear-gradient(135deg,#16362d,#101118)}.orange{--accent:#f1b56d;background:linear-gradient(135deg,#3d2c1c,#101118)}.pink{--accent:#e998d1;background:linear-gradient(135deg,#371e36,#101118)}.wide{grid-column:1/-1}footer{color:#686c7d;font-size:11px;text-align:center;padding:30px}
/* JEUX : boutons, plateau de morpion, scores et lecteur de playlist. */
#playArea{padding:50px 0}.panel{margin:28px auto;padding:30px;background:#11131b;border:1px solid #2a2d3b;border-radius:20px;max-width:800px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:25px auto}.cell{height:90px;font-size:42px;background:#232636;color:#bfa6ff}.readout{text-align:center;font-size:24px;margin:20px}.reaction{width:100%;min-height:180px;font-size:22px;background:#34254c}.reaction.wait{background:#65302f}.reaction.go{background:#43cba0;color:#071810}.track{display:flex;justify-content:space-between;gap:20px;padding:16px;border-bottom:1px solid #292b37;align-items:center}.track.active{background:#25203a;border-radius:10px}label{display:block;margin:16px 0;color:#c4c5cf}input[type=range]{padding:0}.code{width:100%;font-size:12px}.quiz-options{display:grid;gap:12px}.quiz-options button{text-align:left;background:#252839;color:#eee}.quiz-options .correct{background:#216249}.quiz-options .wrong{background:#693138}.score{font-size:42px;font-weight:bold;color:#b197fc}.names{width:100%}
/* MOBILE ET ACCESSIBILITÉ : une colonne, éclairs plus petits, mouvement réduit. */
@media(max-width:650px){.sections{grid-template-columns:1fr}.wide{grid-column:auto}.category{min-height:260px}.lobby{padding-top:45px}header a{font-size:17px}header button{font-size:11px;padding:12px}.panel{padding:20px}.bolts i{font-size:65px}.bolts{height:380px}.bolts i:nth-child(1){left:0}.bolts i:nth-child(2){right:0}.track{flex-wrap:wrap}}


/* VERSION 1.4 : repères fixes et identité mauve renforcée. */
.version{position:absolute;right:24px;top:16px;font-size:10px;letter-spacing:.16em;color:#c5b4ee;z-index:5}.date-stamp{position:fixed;bottom:10px;right:20px;font-size:9px;letter-spacing:.2em;color:#a39ab5;z-index:5;pointer-events:none}body{background:radial-gradient(ellipse at 30% 0%,#241338 0,transparent 65%),#090910}.sections .category{border-color:#513b70;box-shadow:0 8px 32px #08051155}.category.purple{background:linear-gradient(135deg,#482768,#171020)}.lobby h2{color:#e2d1ff}.panel{border-color:#4a326a;background:#15101f}header{padding-top:20px}.hero .content h1{animation:appear 1s .25s both,floatTitle 6s 1.3s ease-in-out infinite}.glow{animation:glowDrift 9s ease-in-out infinite}.waves{position:absolute;width:min(600px,85vw);aspect-ratio:1;pointer-events:none}.waves i{position:absolute;inset:0;border:1px solid #b18af855;border-radius:50%;box-shadow:0 0 24px #8e54ff22;animation:ripple 7s linear infinite}.waves i:nth-child(2){animation-delay:-2.3s}.waves i:nth-child(3){animation-delay:-4.6s}@keyframes ripple{0%{transform:scale(.45);opacity:0}20%{opacity:.7}100%{transform:scale(1.5);opacity:0}}@keyframes floatTitle{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes glowDrift{0%,100%{transform:translate(-30px,-20px)}50%{transform:translate(35px,25px)}}
/* HALLOWEEN : carte orange, décoration et ambiance de la section. */
.halloween{background:radial-gradient(circle at 90% 10%,#ed7d2533,transparent 55%),linear-gradient(135deg,#3f2217,#180f1b)!important;border-color:#955025!important;--accent:#ffb86a}.decor{font-size:32px!important;letter-spacing:14px;animation:floatTitle 5s ease-in-out infinite}.horror-panel{border-color:#9a572b;background:linear-gradient(135deg,#29170e,#170f1e)}.horror-panel h3{color:#ffb468}.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings label{margin:0}.settings select{display:block;width:100%;margin-top:8px}.progress{height:5px;border-radius:8px;background:#342447;margin:20px 0;overflow:hidden}.progress span{display:block;height:100%;background:#b591ff}.review{padding:16px 0;border-bottom:1px solid #362942;line-height:1.6}.pill{font-size:11px;background:#332144;color:#ceb5fb;padding:8px 12px;border-radius:20px}.role-card{padding:35px;text-align:center;background:#211622;border:1px solid #704733;border-radius:18px;font-size:28px}.quiz-options button.correct:disabled,.quiz-options button.wrong:disabled{opacity:1}
@media(max-width:650px){.settings{grid-template-columns:1fr}.version{right:16px;top:10px}.date-stamp{font-size:8px}.waves{width:95vw}.category b{font-size:34px}}


/* VERSION 1.5 : ondes contrastées et mouvement visible dès l’ouverture. */
.hero .content h1{animation:titleMotion 4s ease-in-out infinite;text-shadow:0 0 45px #ae75ff66}.hero .content h1 span{animation:domainGlow 3s ease-in-out infinite}.hero .glow{animation:glowMotion 7s ease-in-out infinite;background:#854cf866}.hero .waves{width:min(680px,100vw);height:min(680px,100vw);aspect-ratio:1}.hero .waves i{border:2px solid #b68cff;box-shadow:0 0 22px #9563ff66,inset 0 0 22px #9563ff33;animation:visibleWave 4.5s linear infinite}.hero .waves i:nth-child(2){animation-delay:-1.5s}.hero .waves i:nth-child(3){animation-delay:-3s}.hero .bolts i{animation:lightningBeat 2.6s ease-in-out infinite}.hero .bolts i:nth-child(even){animation-delay:-1.2s}
@keyframes titleMotion{0%,100%{transform:translateY(10px) scale(.98)}50%{transform:translateY(-12px) scale(1.02)}}@keyframes domainGlow{0%,100%{text-shadow:0 0 20px #9b63fa66}50%{text-shadow:0 0 50px #bc8affaa}}@keyframes glowMotion{0%,100%{transform:translate(-60px,-30px) scale(.95)}50%{transform:translate(65px,45px) scale(1.2)}}@keyframes visibleWave{0%{transform:scale(.45);opacity:0}15%{opacity:.65}80%{opacity:.3}100%{transform:scale(1.45);opacity:0}}@keyframes lightningBeat{0%,100%{opacity:.35;translate:0 8px;filter:brightness(.9)}20%,40%{opacity:.85;translate:0 -8px;filter:brightness(1.35)}30%,65%{opacity:.4;translate:0 0;filter:brightness(1)}}
/* CARTES : lumière colorée continue et plus forte au survol. */
.lobby{padding:30px 0}.sections{margin-top:12px}.category{--card-glow:#a371ff;box-shadow:0 0 18px color-mix(in srgb,var(--card-glow) 18%,transparent),inset 0 0 32px color-mix(in srgb,var(--card-glow) 10%,transparent)!important;border-color:color-mix(in srgb,var(--card-glow) 65%,#222)!important}.category:hover{box-shadow:0 0 34px color-mix(in srgb,var(--card-glow) 36%,transparent),inset 0 0 40px color-mix(in srgb,var(--card-glow) 16%,transparent)!important}.blue{--card-glow:#59baff}.green{--card-glow:#51e6ad}.orange{--card-glow:#ffa64d}.pink{--card-glow:#ef94d7}.halloween{--card-glow:#ff922f}.christmas{--card-glow:#bfeaff;--accent:#ddf4ff;background:radial-gradient(circle at top right,#c3eaff44,transparent 65%),linear-gradient(135deg,#304d68,#152233)!important}.christmas b{color:#e2f5ff}.category .coming{color:#d6edff!important;font-size:11px!important;letter-spacing:.06em}.lock-badge{font-size:24px!important;display:inline-block;margin-left:10px}.christmas-panel{border-color:#b8ddf2;background:linear-gradient(135deg,#233d52,#111e2f)}.christmas-panel h3{color:#ddf3ff}.snow-decor{font-size:36px;letter-spacing:10px;animation:snowFloat 5s ease-in-out infinite;text-align:center;padding:24px 0}@keyframes snowFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(10px)}}
/* État audio annoncé seulement aux lecteurs d’écran, aucun nom visible. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#introMusic{min-width:100px}#seasonPassword{display:block;margin:12px 0;width:100%}
/* ÉCOLE : bordeaux, halo rouge et disposition des outils. */
.school{--card-glow:#fa596b;--accent:#ff98a5;background:radial-gradient(circle at 90% 5%,#f24c6740,transparent 60%),linear-gradient(135deg,#491b2c,#1b111c)!important}.school-panel{border-color:#963b51;background:linear-gradient(135deg,#2d1420,#15101c)}.school-panel h3{color:#ffacb7}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.tool-grid button{text-align:left;background:#3b2030;color:#ffdce3}.tool-grid small{display:block;font-weight:normal;margin-top:7px;line-height:1.5}.tool-grid .unavailable{background:#251e29;color:#aaa;border:1px dashed #594250}.download-link{display:inline-block;padding:14px 22px;margin:16px 0;border-radius:12px;background:#ff9aaa;color:#26111a;font-weight:bold;text-decoration:none}.grade-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:12px 0}.grade-row input{width:100%;min-width:0}.grade-row button{padding:10px}.school-panel input[type=file]{width:100%}@media(max-width:650px){.tool-grid{grid-template-columns:1fr}.grade-row{grid-template-columns:1fr 1fr auto}}