*{box-sizing:border-box}
:root{
  --bg:#06162f;--bg2:#0b2a54;--card:#102a50;--white:#fff;--muted:#b8c7dc;
  --nav:rgba(7,28,59,.94)
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;background:
 radial-gradient(circle at 10% 5%,rgba(78,123,255,.22),transparent 22rem),
 radial-gradient(circle at 90% 18%,rgba(109,34,255,.18),transparent 20rem),
 linear-gradient(180deg,var(--bg2),var(--bg));color:white}
body{padding-bottom:92px}
button{font:inherit}
.topbar{height:82px;padding:12px clamp(16px,4vw,54px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:rgba(3,18,40,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;gap:12px;align-items:center}
.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:26px;font-weight:900;background:linear-gradient(145deg,#67e1ff,#7668ff);box-shadow:0 10px 28px rgba(74,125,255,.35)}
.brand strong{font-size:20px;display:block}.brand span{font-size:12px;color:#b9c8dc}
.parent-btn{border:0;border-radius:16px;padding:12px 16px;background:#143761;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer}
main{width:min(1180px,calc(100% - 28px));margin:auto}
.hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:38px 4px 24px}
.hero h1{margin:.2rem 0 .5rem;font-size:clamp(30px,5vw,58px);line-height:1}
.hero p{color:var(--muted);max-width:680px;margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px!important;color:#78dfff!important;font-weight:800}
.age-selector{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.age{border:0;color:white;background:#123157;padding:12px 15px;border-radius:16px;cursor:pointer;transition:.2s}
.age.active{background:linear-gradient(135deg,#7f5cff,#22c5ff);box-shadow:0 10px 30px rgba(55,140,255,.25);transform:translateY(-2px)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{position:relative;min-height:260px;border:0;border-radius:28px;overflow:hidden;padding:0;color:white;cursor:pointer;box-shadow:0 18px 34px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .18s ease,filter .18s ease}
.tile:hover{transform:translateY(-5px) scale(1.01);filter:brightness(1.06)}
.tile:active{transform:scale(.98)}
.tile-purple{background:radial-gradient(circle at 58% 30%,#7f4eff,#3c237f 72%)}
.tile-green{background:radial-gradient(circle at 58% 30%,#30d69d,#11735f 72%)}
.tile-orange{background:radial-gradient(circle at 58% 30%,#ff9b39,#b94f1f 72%)}
.tile-blue{background:radial-gradient(circle at 58% 30%,#37b8ff,#14599f 72%)}
.tile-red{background:radial-gradient(circle at 58% 30%,#ff5570,#9e2a4c 72%)}
.tile-yellow{background:radial-gradient(circle at 58% 30%,#ffd45f,#d6801d 72%)}
.tile-label{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 18px;text-align:left;background:linear-gradient(180deg,transparent,rgba(1,13,31,.95) 58%);padding-top:44px}
.tile-label span{display:block;font-weight:900;font-size:24px}.tile-label small{display:block;color:#e1e7ef;margin-top:4px}
.bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.b1{width:36px;height:36px;left:12%;top:12%}.b2{width:16px;height:16px;right:18%;top:16%}.b3{width:25px;height:25px;left:17%;top:52%}.b4{width:47px;height:47px;right:10%;top:44%}
.art{height:200px;display:grid;place-items:center;position:relative}
.book{width:125px;height:92px;position:relative;filter:drop-shadow(0 14px 10px rgba(0,0,0,.25))}
.page{position:absolute;top:8px;width:62px;height:82px;background:#fff;border:7px solid #ffb33d}.left{left:4px;border-radius:12px 4px 8px 12px;transform:rotate(-7deg)}.right{right:4px;border-radius:4px 12px 12px 8px;transform:rotate(7deg)}.spark{position:absolute;color:#fff;font-size:28px}.s1{left:-28px;top:-20px}.s2{right:-30px;top:-5px}
.calc{width:112px;background:#f4f6fb;padding:12px;border-radius:18px;box-shadow:0 18px 20px rgba(0,0,0,.22);transform:rotate(-6deg)}
.calc-screen{background:#123050;color:#7af8dc;padding:11px 7px;border-radius:10px;font-weight:900;text-align:center}
.calc-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.calc-keys i{height:18px;border-radius:6px;background:#d5dae7}
.science-art{display:flex;justify-content:center;gap:24px;align-items:center}.planet{width:90px;height:90px;border-radius:50%;background:linear-gradient(145deg,#fbd75c,#ff6c59);position:relative;box-shadow:0 0 0 8px rgba(255,255,255,.08)}.ring{position:absolute;width:135px;height:32px;border:10px solid #ffe9b0;border-radius:50%;left:-23px;top:28px;transform:rotate(-18deg)}.moon{position:absolute;width:22px;height:22px;background:#fff1d7;border-radius:50%;right:-28px;top:-5px}.flask{font-size:70px;transform:rotate(8deg)}
.language-art{display:flex;gap:12px;align-items:center;justify-content:center}.speech{background:white;color:#16406e;padding:15px 18px;border-radius:22px;font-size:24px;font-weight:900;transform:rotate(-5deg);box-shadow:0 12px 18px rgba(0,0,0,.18)}.globe{font-size:70px}
.memory-art{display:flex;gap:8px;align-items:center;justify-content:center}.card{width:70px;height:95px;border-radius:14px;background:#fff;color:#e64961;display:grid;place-items:center;font-size:38px;font-weight:900;box-shadow:0 12px 18px rgba(0,0,0,.2)}.c1{transform:rotate(-11deg)}.c2{transform:translateY(-10px)}.c3{transform:rotate(11deg);color:#11305a}
.creative-art{display:flex;align-items:center;justify-content:center;gap:16px}.palette{font-size:84px}.pencil{font-size:64px;transform:rotate(-15deg)}
.quest{margin:22px 0 32px;padding:18px 20px;border-radius:24px;background:linear-gradient(135deg,#0d3768,#122752);display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.quest>div{display:flex;gap:14px;align-items:center}.quest-icon{font-size:38px}.quest p{margin:4px 0 0;color:#c7d4e6}.quest button{border:0;border-radius:16px;padding:12px 18px;background:#fff;color:#0b2348;font-weight:900;cursor:pointer}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;height:82px;background:var(--nav);backdrop-filter:blur(18px);display:flex;justify-content:center;gap:min(9vw,100px);border-top:1px solid rgba(255,255,255,.08)}
.nav-item{width:92px;border:0;background:transparent;color:#8fa5c4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}.nav-item span{font-size:24px}.nav-item small{font-size:11px}.nav-item.active{color:#7ddfff}
.modal{position:fixed;inset:0;background:rgba(1,7,18,.72);display:none;place-items:center;z-index:100;padding:18px;backdrop-filter:blur(10px)}.modal.show{display:grid}.modal-card{position:relative;width:min(520px,100%);background:linear-gradient(180deg,#153a68,#091f43);padding:28px;border-radius:30px;box-shadow:0 26px 80px rgba(0,0,0,.45);text-align:center;border:1px solid rgba(255,255,255,.1)}.close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#244b74;color:#fff;font-size:28px;cursor:pointer}.modal-icon{font-size:54px}.modal-card h2{font-size:34px;margin:6px 0}.modal-card p{color:#c7d5e8;line-height:1.55}.quiz{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.quiz button{border:0;border-radius:18px;padding:16px;background:#f6f7fb;color:#0e2a52;font-size:18px;font-weight:900;cursor:pointer}.quiz button:hover{transform:translateY(-2px)}.reward{min-height:28px;margin-top:14px;font-weight:900;color:#ffd95a}.parent-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.parent-stats div{background:#0b274d;padding:15px 8px;border-radius:18px}.parent-stats b{display:block;font-size:20px}.parent-stats span{font-size:11px;color:#9fb1ca}
@media(max-width:900px){.menu-grid{grid-template-columns:repeat(2,1fr)}.hero{align-items:flex-start;flex-direction:column}.age-selector{justify-content:flex-start}}
@media(max-width:560px){.topbar{height:70px;padding:10px 14px}.brand span{display:none}.parent-btn{font-size:0;padding:10px}.parent-btn::after{content:"👨‍👩‍👧";font-size:20px}.hero{padding-top:26px}.hero h1{font-size:36px}.menu-grid{gap:12px}.tile{min-height:210px;border-radius:22px}.art{height:157px}.tile-label span{font-size:19px}.tile-label small{font-size:11px}.quest{align-items:flex-start;gap:14px;flex-direction:column}.quest button{width:100%}.bottom-nav{justify-content:space-around;gap:0}.nav-item{width:auto;flex:1}}
@media(max-width:390px){.menu-grid{grid-template-columns:1fr}.tile{min-height:230px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* ===== Connexion / compte parent ===== */
.hidden{display:none!important}
.app-shell{min-height:100vh}
.auth-screen{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:22px;overflow:auto;
  background:
    radial-gradient(circle at 16% 15%,rgba(91,107,255,.34),transparent 22rem),
    radial-gradient(circle at 84% 20%,rgba(40,216,255,.19),transparent 20rem),
    radial-gradient(circle at 50% 100%,rgba(140,60,255,.24),transparent 26rem),
    linear-gradient(180deg,#0b2d5a,#06152f 70%);
}
.auth-deco{position:absolute;border-radius:50%;filter:blur(1px);opacity:.6;pointer-events:none}
.auth-deco-1{width:150px;height:150px;left:7%;top:22%;background:rgba(255,255,255,.05);box-shadow:0 0 60px rgba(70,160,255,.24)}
.auth-deco-2{width:100px;height:100px;right:8%;bottom:16%;background:rgba(255,255,255,.05);box-shadow:0 0 55px rgba(152,89,255,.2)}
.auth-card{
  width:min(500px,100%);position:relative;background:linear-gradient(180deg,rgba(18,54,97,.96),rgba(6,27,58,.98));
  border:1px solid rgba(255,255,255,.12);border-radius:34px;padding:30px;
  box-shadow:0 32px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:15px}
.auth-logo{width:54px;height:54px;border-radius:18px;font-size:30px}
.auth-brand strong{display:block;font-size:25px}.auth-brand span{display:block;font-size:12px;color:#b9c8dc}
.auth-illustration{display:flex;justify-content:center;gap:12px;margin:16px 0 18px}
.auth-illustration span{
  width:56px;height:56px;display:grid;place-items:center;border-radius:18px;font-size:29px;
  background:linear-gradient(145deg,#1e4c82,#15345e);box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.auth-illustration span:nth-child(2){transform:translateY(-9px)}
.auth-illustration span:nth-child(3){transform:translateY(3px)}
.auth-card h1{text-align:center;font-size:34px;margin:4px 0 6px}
.auth-card>p{text-align:center;color:#b9c8dc;line-height:1.45;margin:0 auto 20px;max-width:390px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#092348;padding:5px;border-radius:16px;margin:16px 0}
.auth-tab{border:0;background:transparent;color:#9db1cc;padding:11px;border-radius:12px;font-weight:800;cursor:pointer}
.auth-tab.active{background:linear-gradient(135deg,#765dff,#1fc5f3);color:white;box-shadow:0 8px 20px rgba(51,126,255,.24)}
.auth-form{display:grid;gap:13px}
.auth-form label>span{display:block;font-size:12px;color:#ced9e9;margin:0 0 7px 3px;font-weight:800}
.auth-form input{
  width:100%;border:1px solid rgba(255,255,255,.12);outline:none;background:#081f41;color:#fff;
  padding:14px 15px;border-radius:15px;font-size:16px;transition:.18s;
}
.auth-form input:focus{border-color:#61d9ff;box-shadow:0 0 0 3px rgba(69,195,255,.12)}
.password-wrap{position:relative}.password-wrap input{padding-right:54px}
.show-password{position:absolute;right:7px;top:6px;width:40px;height:36px;border:0;border-radius:10px;background:#12355f;color:white;cursor:pointer}
.auth-submit{
  border:0;border-radius:16px;padding:15px 18px;margin-top:3px;color:white;font-size:17px;font-weight:900;cursor:pointer;
  background:linear-gradient(135deg,#7b5cff,#16c7f6);box-shadow:0 12px 28px rgba(51,129,255,.28)
}
.auth-submit:disabled{opacity:.55;cursor:wait}
.forgot-btn{border:0;background:transparent;color:#7fe0ff;cursor:pointer;padding:4px;font-size:13px}
.auth-error{min-height:0;color:#ffb8c3;background:rgba(255,74,103,.1);border-radius:11px;font-size:13px;text-align:center}
.auth-error:not(:empty){padding:9px}
.auth-note{margin-top:17px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);color:#aebdd2;font-size:11px;line-height:1.45;text-align:center}
.header-actions{display:flex;align-items:center;gap:8px}
.logout-btn{border:0;border-radius:16px;padding:12px 14px;background:#4b2449;color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.logout-btn:hover{background:#63305f}
@media(max-width:560px){
  .auth-screen{padding:12px}.auth-card{padding:22px 18px;border-radius:26px}
  .auth-card h1{font-size:29px}.auth-illustration span{width:48px;height:48px;font-size:24px}
  .logout-btn{font-size:0;padding:10px}.logout-btn::after{content:"↪";font-size:20px}
  .header-actions{gap:4px}
}


/* ===== Historique — jeux développés ===== */
.score-chip{
  display:flex;align-items:center;gap:6px;padding:10px 13px;border-radius:15px;
  background:linear-gradient(135deg,#f5b817,#ff8d27);color:#352000;font-weight:900;
  box-shadow:0 8px 20px rgba(255,161,29,.2)
}
.player-strip{
  margin:0 0 22px;padding:14px 16px;border-radius:22px;background:linear-gradient(135deg,rgba(18,57,102,.95),rgba(14,34,71,.95));
  display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(255,255,255,.08)
}
.player-welcome{display:flex;align-items:center;gap:12px}.avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#173e70;font-size:28px}
.player-welcome small{display:block;color:#8fa8c7;font-size:11px}.player-welcome strong{display:block;margin-top:2px}
.mini-stats{display:flex;gap:8px}.mini-stats div{min-width:92px;text-align:center;padding:9px 12px;border-radius:14px;background:rgba(4,22,48,.55)}
.mini-stats b{display:block;font-size:17px}.mini-stats span{display:block;color:#94a9c7;font-size:9px;margin-top:2px;text-transform:uppercase;letter-spacing:.06em}

.game-modal-card{width:min(850px,96vw);max-height:92vh;overflow:auto;text-align:left;padding:28px}
.game-heading{display:flex;align-items:center;gap:18px;margin:2px 42px 20px 0}.game-heading .modal-icon{min-width:72px;height:72px;display:grid;place-items:center;border-radius:22px;background:#0d2e59}
.game-heading h2{margin:0;font-size:34px}.game-heading p{margin:4px 0 0}.game-kicker{font-size:11px!important;text-transform:uppercase;letter-spacing:.13em;color:#71dcff!important;font-weight:900}
.game-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.game-choice{border:0;text-align:left;min-height:190px;border-radius:24px;padding:18px;background:linear-gradient(160deg,#18477b,#0b2851);color:white;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 28px rgba(0,0,0,.18);transition:.18s}
.game-choice:hover{transform:translateY(-4px);filter:brightness(1.08)}
.game-choice-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.1);font-size:31px;margin-bottom:18px}
.game-choice strong{display:block;font-size:20px}.game-choice small{display:block;color:#b8c9dd;margin-top:6px;line-height:1.35}
.game-choice em{display:block;font-style:normal;color:#76e3ff;font-size:12px;font-weight:900;margin-top:16px}

.play-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 46px 12px 0;color:#bfd0e3}
.back-btn{border:0;border-radius:12px;padding:9px 12px;background:#163c69;color:#fff;cursor:pointer}.play-stars{padding:8px 11px;border-radius:12px;background:#523f12;color:#ffd34d}
.game-progress{height:9px;background:#071a37;border-radius:999px;overflow:hidden;margin-bottom:18px}.game-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#45d9ff,#7a61ff,#ffce4a);border-radius:999px;transition:width .3s}
.game-stage{min-height:365px;display:grid;place-items:center}
.question-card{text-align:center;width:min(650px,100%)}.question-mark{width:52px;height:52px;border-radius:18px;margin:auto;display:grid;place-items:center;background:#173e70;font-size:30px;font-weight:900}
.question-card h3{font-size:clamp(24px,4vw,38px);margin:15px 0 22px}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.answer-btn{border:0;border-radius:18px;padding:17px 14px;min-height:58px;background:#f4f7fb;color:#0c2a52;font-weight:900;font-size:18px;cursor:pointer;transition:.14s;box-shadow:0 7px 0 #cad4e3}
.answer-btn:hover:not(:disabled){transform:translateY(-2px)}.answer-btn:disabled{cursor:default}.answer-btn.correct{background:#baf4d6;box-shadow:0 7px 0 #68c99a}.answer-btn.wrong{background:#ffd0d6;box-shadow:0 7px 0 #e7808f}
.game-feedback{text-align:center;min-height:28px}.game-feedback.good{color:#75efad}.game-feedback.bad{color:#ffc0c9}

.finish-screen{text-align:center;width:min(520px,100%)}.finish-icon{font-size:76px}.finish-screen h3{font-size:35px;margin:8px 0}.finish-screen p{color:#bccbe0}.finish-stars{font-size:28px;font-weight:900;color:#ffd34d;margin:18px}
.primary-game-btn,.secondary-game-btn{border:0;border-radius:16px;padding:13px 18px;font-weight:900;cursor:pointer;margin:4px}
.primary-game-btn{background:linear-gradient(135deg,#785cff,#22c9f2);color:white}.secondary-game-btn{background:#183d68;color:#fff}
.word-game{text-align:center;width:100%}.instruction{font-size:20px!important}.word-slots{font-size:clamp(30px,7vw,52px);font-weight:900;letter-spacing:.12em;min-height:78px;padding:14px}
.letter-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.letter-bank button{width:54px;height:58px;border:0;border-radius:15px;background:#fff;color:#102c55;font-size:24px;font-weight:900;box-shadow:0 6px 0 #bdc9da;cursor:pointer}.letter-bank button:disabled{opacity:.25}
.word-actions{margin-top:22px}
.listen-game,.sequence-memory,.observe-game,.drawing-game,.story-game{text-align:center;width:100%}.speaker-btn{border:0;border-radius:22px;padding:22px 28px;background:linear-gradient(135deg,#2f9af8,#6e60ff);color:white;font-size:22px;font-weight:900;cursor:pointer;box-shadow:0 12px 30px rgba(59,127,255,.25)}
.emoji-answer{font-size:30px}
.memory-board{display:grid;gap:9px;width:min(650px,100%);margin:auto}.memory-4{grid-template-columns:repeat(4,1fr)}.memory-6{grid-template-columns:repeat(4,1fr)}.memory-8{grid-template-columns:repeat(4,1fr)}
.memory-card{aspect-ratio:1/1.08;border:0;border-radius:17px;background:linear-gradient(145deg,#745cf8,#254f9c);font-size:34px;cursor:pointer;position:relative;transform-style:preserve-3d}
.memory-card .card-face{display:none}.memory-card .card-back{display:block;color:white;font-weight:900}.memory-card.open{background:#f7f8fb}.memory-card.open .card-back{display:none}.memory-card.open .card-face{display:block}.memory-card.done{background:#c9f5dc;box-shadow:inset 0 0 0 3px #5dd394}
.memory-moves{text-align:center!important}
.sequence-display{font-size:clamp(30px,6vw,52px);padding:30px 10px;background:#0a2850;border-radius:24px;margin:14px 0}.countdown{font-size:30px;font-weight:900;color:#73e1ff;margin-top:15px}
.observe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px auto;max-width:420px;background:#0b2850;border-radius:24px;padding:16px}.observe-grid span{font-size:30px;padding:8px}.target-symbol{font-size:34px}
.drawing-prompt{font-size:20px;font-weight:900;margin-bottom:10px}.draw-tools{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:10px}
.color-dot{width:35px;height:35px;border:3px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer}.color-dot.selected{outline:3px solid white;outline-offset:2px}.color-dot[data-color="#101b35"]{background:#101b35}.color-dot[data-color="#ff4d67"]{background:#ff4d67}.color-dot[data-color="#ffbd3e"]{background:#ffbd3e}.color-dot[data-color="#2fca87"]{background:#2fca87}.color-dot[data-color="#319cff"]{background:#319cff}.color-dot[data-color="#925dff"]{background:#925dff}
.tool-btn{border:0;border-radius:10px;padding:8px 10px;background:#183e6c;color:white;cursor:pointer}
#drawCanvas{width:100%;height:auto;max-height:420px;background:white;border-radius:18px;touch-action:none;box-shadow:inset 0 0 0 1px #d9e0eb}.done-drawing{margin-top:12px}
.story-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.story-cards div{padding:16px 10px;border-radius:18px;background:#0c2b55}.story-cards span{display:block;font-size:30px}.story-cards b{display:block;margin-top:7px;font-size:13px}
#storyText{width:100%;min-height:150px;border:0;border-radius:18px;padding:15px;background:#f7f9fc;color:#0b2850;font:inherit;resize:vertical;outline:none}.story-actions{margin-top:10px}
.big-score{text-align:center;font-size:34px;color:#ffd34d;margin:12px}.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.badge{border-radius:16px;padding:14px 8px;background:#0b2850;text-align:center;opacity:.48}.badge.unlocked{opacity:1;background:linear-gradient(145deg,#174979,#143461)}.badge span{display:block;font-size:30px}.badge small{display:block;margin-top:5px;color:#c4d0e1}
.stats-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.stats-summary div{text-align:center;background:#0b2850;border-radius:16px;padding:14px 7px}.stats-summary b{display:block;font-size:21px}.stats-summary span{font-size:10px;color:#9eb1ca}

@media(max-width:760px){
  .player-strip{align-items:flex-start;flex-direction:column}.mini-stats{width:100%}.mini-stats div{flex:1;min-width:0}
  .game-picker{grid-template-columns:1fr}.game-choice{min-height:130px}
  .game-modal-card{padding:22px 15px}.game-heading{margin-right:36px}.game-heading .modal-icon{min-width:58px;height:58px}
  .answer-grid{grid-template-columns:1fr}.game-stage{min-height:330px}
  .story-cards{grid-template-columns:1fr}.memory-card{font-size:26px}
}
@media(max-width:560px){
  .score-chip{padding:9px 10px}.score-chip b{font-size:13px}
  .player-welcome strong{font-size:13px}.mini-stats span{font-size:8px}
  .game-heading h2{font-size:28px}.game-heading p{font-size:12px}
  .memory-board{gap:6px}.memory-6,.memory-8{grid-template-columns:repeat(4,1fr)}
  .answer-btn{font-size:16px;padding:14px 10px}
  .badge-grid{grid-template-columns:repeat(2,1fr)}
}


/* ===== Historique — difficulté par âge & nouveaux exercices ===== */
.difficulty-badge{
  display:inline-block;margin-top:8px;padding:5px 9px;border-radius:999px;
  background:linear-gradient(135deg,#725cff,#1fc8ef);color:white;
  font-size:11px;font-weight:900;letter-spacing:.03em
}
.difficulty-note{display:inline-block;margin-top:7px;color:#9fb7d1;font-size:11px}
.spell-game{width:min(580px,100%);text-align:center}
.spell-clue{font-size:clamp(28px,6vw,46px);font-weight:900;margin-bottom:18px}
.spell-input{
  display:block;width:min(420px,100%);margin:15px auto;padding:16px 18px;
  border:2px solid rgba(255,255,255,.14);border-radius:18px;background:#f7f9fc;
  color:#0b2850;font-size:22px;font-weight:900;text-align:center;outline:none
}
.spell-input:focus{border-color:#63dcff;box-shadow:0 0 0 4px rgba(67,202,255,.12)}
.odd-game{width:min(650px,100%);text-align:center}
.odd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.odd-grid.long-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.odd-btn{
  min-width:0;min-height:92px;padding:12px 10px;border:0;border-radius:20px;background:#f6f8fc;color:#0b2850;
  font-size:clamp(20px,3vw,32px);font-weight:900;cursor:pointer;box-shadow:0 7px 0 #c9d4e3;overflow-wrap:anywhere
}
.odd-btn.correct{background:#baf4d6;box-shadow:0 7px 0 #68c99a}
.odd-btn.wrong{background:#ffd0d6;box-shadow:0 7px 0 #e7808f}
@media(max-width:560px){
  .odd-grid{grid-template-columns:repeat(2,1fr)}
  .odd-btn{min-height:74px}
}


/* ===== Historique — profils enfants ===== */
.profile-chip{
  border:0;border-radius:16px;padding:7px 11px 7px 8px;background:#143761;color:white;
  display:flex;align-items:center;gap:9px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)
}
.profile-chip>span:first-child{
  width:36px;height:36px;border-radius:12px;background:#0b274d;
  display:grid;place-items:center;font-size:22px
}
.profile-chip-text{text-align:left;line-height:1.05}
.profile-chip-text b{display:block;font-size:12px}
.profile-chip-text small{display:block;color:#9fb5d0;font-size:9px;margin-top:3px}
.age-auto-card{
  min-width:255px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;
  background:linear-gradient(135deg,#173f70,#102b51);border:1px solid rgba(255,255,255,.08)
}
.age-auto-card>span{
  width:50px;height:50px;display:grid;place-items:center;border-radius:16px;
  background:#09264d;font-size:29px
}
.age-auto-card small,.age-auto-card strong,.age-auto-card em{display:block}
.age-auto-card small{color:#80dcff;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.age-auto-card strong{font-size:15px;margin-top:2px}
.age-auto-card em{font-style:normal;color:#aebed2;font-size:10px;margin-top:3px}

.profile-modal-card{width:min(610px,96vw);max-height:92vh;overflow:auto}
.profile-gate{
  background:linear-gradient(180deg,rgba(4,23,50,.98),rgba(3,13,31,.99));
  backdrop-filter:none
}
.profiles-list{display:grid;gap:9px;margin:18px 0;transition:.2s}
.profiles-dimmed{opacity:.2;pointer-events:none}
.empty-profiles{
  padding:22px;border-radius:20px;background:#0b2850;text-align:center
}
.empty-profiles span{font-size:38px;display:block}
.empty-profiles strong{display:block;margin-top:6px}
.empty-profiles small{display:block;color:#9eb2cb;margin-top:3px}
.profile-row{
  display:flex;align-items:center;gap:8px;border-radius:20px;
  background:#0b2850;padding:7px;border:1px solid transparent
}
.profile-row.active{border-color:#5ddcff;background:#10365f}
.profile-select{
  flex:1;display:flex;align-items:center;gap:12px;border:0;background:transparent;
  color:white;text-align:left;padding:7px;cursor:pointer
}
.profile-select>span:last-child b{display:block;font-size:17px}
.profile-select>span:last-child small{display:block;color:#a8b9cf;font-size:11px;margin-top:3px}
.profile-big-avatar{
  width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  background:#173f70;font-size:30px
}
.profile-row-actions{display:flex;gap:5px}
.profile-row-actions button{
  width:36px;height:36px;border:0;border-radius:11px;background:#173c68;color:white;cursor:pointer
}
.add-profile-card{
  width:100%;display:flex;align-items:center;gap:13px;padding:14px;
  border:1px dashed #4e739e;background:rgba(11,40,80,.5);color:white;
  border-radius:20px;cursor:pointer;text-align:left
}
.add-profile-card>span{
  width:45px;height:45px;border-radius:15px;background:#164b7f;
  display:grid;place-items:center;font-size:26px
}
.add-profile-card strong,.add-profile-card small{display:block}
.add-profile-card small{color:#9cb0c9;margin-top:3px}
.profile-form{
  display:grid;gap:15px;text-align:left;margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08)
}
.profile-form h3{margin:0;text-align:center;font-size:23px}
.profile-form label>span,.field-label{
  display:block;font-size:11px;color:#c8d5e6;font-weight:900;margin:0 0 7px 4px
}
.profile-form input[type=text]{
  width:100%;padding:14px;border-radius:15px;border:1px solid rgba(255,255,255,.12);
  background:#081f41;color:white;font-size:16px;outline:none
}
.age-stepper{
  display:flex;align-items:center;justify-content:center;gap:16px;padding:9px;
  border-radius:18px;background:#09264c
}
.age-stepper button{
  width:48px;height:48px;border:0;border-radius:15px;background:#194979;
  color:white;font-size:26px;cursor:pointer
}
.age-stepper div{min-width:92px;text-align:center}
.age-stepper b{font-size:31px}
.age-stepper small{font-size:11px;color:#a5b8d0;margin-left:3px}
.avatar-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.avatar-choice{
  aspect-ratio:1;border:2px solid transparent;border-radius:15px;
  background:#0a2850;font-size:26px;cursor:pointer
}
.avatar-choice.selected{border-color:#62dcff;background:#174f82;transform:translateY(-2px)}
.age-preview{
  display:flex;align-items:center;gap:12px;padding:13px;border-radius:18px;
  background:linear-gradient(135deg,#123f6e,#19385e)
}
.age-preview>span{font-size:30px}
.age-preview strong,.age-preview small{display:block}
.age-preview small{color:#a7b9ce;margin-top:3px;font-size:11px}
.profile-form-actions{display:flex;justify-content:flex-end;gap:6px}

/* ===== Bonne réponse très visible après une erreur ===== */
.game-feedback{
  width:min(650px,100%);
  margin:18px auto 0;
  min-height:0
}
.feedback-box{
  border-radius:25px;padding:17px 18px;text-align:center;
  animation:feedbackPop .22s ease-out
}
.feedback-good{
  background:rgba(38,177,108,.14);
  border:1px solid rgba(117,239,173,.28)
}
.feedback-bad{
  background:rgba(219,65,91,.15);
  border:1px solid rgba(255,149,166,.32)
}
.feedback-icon{display:block;font-size:32px;margin-bottom:5px}
.feedback-box>strong{display:block;font-size:18px}
.correct-answer-big{
  margin:15px auto 2px;padding:18px 14px;border-radius:21px;background:#fff;
  color:#0c2a52;box-shadow:0 12px 30px rgba(0,0,0,.20)
}
.correct-answer-big small{
  display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:#70829b;font-weight:900;margin-bottom:8px
}
.correct-answer-big strong{
  display:block;font-size:clamp(32px,7vw,56px);line-height:1.08;
  color:#0b2f62;font-weight:1000;overflow-wrap:anywhere
}
@keyframes feedbackPop{
  from{transform:scale(.9);opacity:0}
  to{transform:scale(1);opacity:1}
}

@media(max-width:650px){
  .profile-chip-text{display:none}
  .profile-chip{padding:6px}
  .profile-chip>span:first-child{width:34px;height:34px}
  .age-auto-card{width:100%}
  .avatar-picker{grid-template-columns:repeat(4,1fr)}
  .feedback-box{padding:13px}
  .correct-answer-big{padding:16px 10px}
  .correct-answer-big strong{font-size:clamp(30px,11vw,48px)}
}


/* ===== Historique — variété, fluence et suivi parent ===== */
.variety-banner{
  position:relative;display:flex;align-items:center;gap:14px;margin:-8px 0 20px;
  padding:14px 50px 14px 16px;border-radius:22px;
  background:linear-gradient(135deg,#513c8f,#145f7a);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(0,0,0,.18)
}
.variety-icon{font-size:34px}.variety-banner strong{display:block}.variety-banner p{margin:3px 0 0;color:#c7d7ea;font-size:12px}
.variety-banner>button:not(.variety-close){margin-left:auto;border:0;border-radius:14px;padding:11px 14px;background:#fff;color:#14325b;font-weight:900;cursor:pointer}
.variety-close{position:absolute;right:8px;top:7px;border:0;background:transparent;color:#c4d2e2;font-size:20px;cursor:pointer}
.finish-variety{margin:14px 0;padding:12px;border-radius:16px;background:#122f59;color:#cce5f1;font-size:12px;line-height:1.45}

/* Fluence */
.fluence-intro,.fluence-game,.fluence-result,.pre-fluence{width:min(760px,100%);text-align:center}
.fluence-school-badge{display:inline-block;padding:7px 11px;border-radius:999px;background:#163f70;color:#79ddff;font-size:12px;font-weight:900}
.fluence-intro h3{font-size:clamp(25px,5vw,38px);margin:14px 0 8px}.fluence-intro p{max-width:650px;margin:8px auto;color:#c5d4e5}
.fluence-target{margin:18px auto;padding:14px;border-radius:18px;background:#0a2b55;color:#d7e6f4}.fluence-target strong{color:#72e3ff}
.fluence-note{font-size:11px!important}
.fluence-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fluence-topline>div:last-child{text-align:right}.fluence-topline small,.fluence-topline b{display:block}.fluence-topline small{color:#8fa6c3;font-size:10px}
.fluence-timer{font-size:38px;font-weight:1000;font-variant-numeric:tabular-nums;padding:10px 15px;border-radius:18px;background:#0a2b55;color:#7be4ff}
.timer-ended{background:#692e42;color:#ffd5dc}
.fluence-text{padding:20px;border-radius:22px;background:#f8fafc;color:#132b4d;text-align:left;line-height:2.05;font-size:18px;max-height:390px;overflow:auto}
.fluence-word{display:inline;border:0;background:transparent;color:inherit;font:inherit;padding:2px 3px;margin:0;cursor:pointer;border-radius:5px}
.fluence-text:not(.select-last-word) .fluence-word{cursor:default}
.fluence-word.read-word{background:#dff4ff}.fluence-word.last-read-word{background:#ffdc76;box-shadow:0 0 0 2px #c18b00}
.fluence-instruction{font-size:12px!important;color:#a9bad0!important}
.fluence-errors{display:flex;align-items:center;justify-content:center;gap:10px;margin:13px 0}.fluence-errors button{width:38px;height:38px;border:0;border-radius:12px;background:#183f6c;color:white;font-size:22px;cursor:pointer}.fluence-errors b{min-width:30px;font-size:23px}
.fluence-score{width:170px;height:170px;border-radius:50%;margin:12px auto;display:grid;place-items:center;align-content:center;background:linear-gradient(145deg,#1d6291,#663eb3);font-size:54px;font-weight:1000;box-shadow:0 20px 45px rgba(0,0,0,.28)}.fluence-score small{display:block;font-size:12px;letter-spacing:.1em}
.fluence-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.fluence-result-grid div{padding:12px;border-radius:16px;background:#0c2d57}.fluence-result-grid b,.fluence-result-grid span{display:block}.fluence-result-grid b{font-size:22px}.fluence-result-grid span{font-size:10px;color:#9eb3ce}
.pre-fluence small{color:#7adfff}.pre-fluence p{font-size:18px!important}.pre-fluence-word{font-size:clamp(42px,10vw,80px);font-weight:1000;padding:30px 14px;margin:15px auto;background:#f7f9fc;color:#12305a;border-radius:24px}.pre-fluence-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

/* Parent lock */
.parent-dashboard-modal{width:min(1050px,97vw);max-height:94vh;overflow:auto;text-align:left}
.parent-dashboard-modal #parentLockView{width:min(520px,100%);margin:auto;text-align:center}
.parent-code-form{display:grid;gap:12px;margin:18px auto 0}.parent-code-form label{text-align:left}.parent-code-form label>span{display:block;font-size:11px;color:#c7d5e6;font-weight:900;margin:0 0 6px 4px}
.parent-code-form input,.change-code-form input{
  width:100%;border:1px solid rgba(255,255,255,.13);outline:none;background:#081f41;color:#fff;
  padding:14px 15px;border-radius:15px;font-size:17px
}
.parent-code-form input:focus,.change-code-form input:focus{border-color:#62dcff;box-shadow:0 0 0 3px rgba(70,200,255,.12)}
.parent-wide-btn{width:100%;margin:0}.parent-auth-message{min-height:20px;color:#ffbdc7;font-size:12px;text-align:center}
.parent-first-setup{padding:15px;border-radius:18px;background:#0b2b55}.parent-first-setup>span{display:block;font-size:33px}.parent-first-setup strong,.parent-first-setup small{display:block}.parent-first-setup small{color:#a7bad2;margin-top:3px}
.parent-recovery{text-align:center}.parent-recovery h3{font-size:24px;margin:8px}.parent-recovery p{color:#b7c6d9}.recovery-email{padding:12px;border-radius:14px;background:#0b2a52;font-weight:900;margin:12px 0}

/* Parent dashboard */
.parent-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-right:40px}
.parent-kicker{margin:0!important;font-size:10px!important;color:#67ddff!important;letter-spacing:.13em;font-weight:900}
.parent-dashboard-head h2{margin:3px 0 0;font-size:32px}
#parentProfileSelect{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0b2a52;color:white;padding:11px;outline:none}
.parent-child-card{display:flex;align-items:center;gap:12px;margin:16px 0;padding:13px;border-radius:20px;background:linear-gradient(135deg,#113b69,#173253)}
.parent-child-avatar{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#09264b;font-size:31px}.parent-child-card strong,.parent-child-card small{display:block}.parent-child-card small{color:#9fb3cb;margin-top:3px}
.parent-overall-badge{margin-left:auto;padding:8px 10px;border-radius:999px;background:#174c71;color:#8ee4ff;font-size:11px;font-weight:900}
.parent-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}.parent-kpis>div{padding:13px;border-radius:18px;background:#0b2a52;text-align:center}.parent-kpis span,.parent-kpis b,.parent-kpis small{display:block}.parent-kpis span{font-size:22px}.parent-kpis b{font-size:22px;margin-top:2px}.parent-kpis small{font-size:9px;color:#9eb3cd;text-transform:uppercase}
.parent-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.parent-panel{background:linear-gradient(155deg,#0e315d,#0a2549);border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:16px;box-shadow:0 12px 24px rgba(0,0,0,.14)}
.parent-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.parent-panel-title small{display:block;font-size:9px;color:#72dfff;letter-spacing:.11em;font-weight:900}.parent-panel-title h3{margin:2px 0 0;font-size:20px}
.parent-panel-title>span{font-size:27px}.pie-panel{text-align:center}.pie-panel canvas{display:block;width:min(240px,100%);height:auto;margin:auto}.parent-panel-title #parentPieCenter{font-size:20px;font-weight:900;color:#72e0ff}
.pie-legend{display:flex;justify-content:center;gap:18px;font-size:10px;color:#a7bad1}.pie-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}.legend-good{background:#51d99a}.legend-bad{background:#ff7087}
#parentWeeklyChart{width:100%;height:210px;display:block}.panel-hint{font-size:10px!important;color:#8ea5c1!important;line-height:1.45}
.subject-progress-list{display:grid;gap:11px}.subject-row{display:grid;grid-template-columns:minmax(150px,1fr) 2fr 50px;align-items:center;gap:10px}.subject-row-head span{display:block}.subject-row-head small{display:block;color:#90a7c2;font-size:9px;margin-top:3px}.subject-bar{height:9px;background:#071b38;border-radius:999px;overflow:hidden}.subject-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#55d69d,#49bff2,#7960fb)}.subject-score{text-align:right}
.insight-list{display:grid;gap:8px}.insight-item{display:flex;align-items:flex-start;gap:10px;padding:11px;border-radius:15px;background:#0a284f}.insight-item>span{font-size:24px}.insight-item b{display:block}.insight-item p{margin:3px 0 0;color:#b7c7da;font-size:11px;line-height:1.45}.insight-item.warning{background:rgba(176,68,85,.15)}.insight-item.positive{background:rgba(58,162,114,.13)}
.fluence-parent-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.fluence-parent-stats>div{text-align:center;padding:12px;border-radius:15px;background:#09284f}.fluence-parent-stats small,.fluence-parent-stats b,.fluence-parent-stats span{display:block}.fluence-parent-stats small{font-size:9px;color:#8ea6c2}.fluence-parent-stats b{font-size:25px;margin:4px}.fluence-parent-stats span{font-size:9px;color:#b8c9da}
.fluence-meter{position:relative;height:28px;border-radius:999px;background:#071d3b;overflow:hidden;margin-top:12px}.fluence-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4ccf91,#43bff2,#8a65ff)}.fluence-meter span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:900}
.fluence-parent-empty{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:#0a284f}.fluence-parent-empty>span{font-size:32px}.fluence-parent-empty b{display:block}.fluence-parent-empty p{margin:3px 0 0;color:#afc1d5;font-size:11px}
.recent-activity{display:grid;gap:7px}.activity-row{display:flex;gap:10px;align-items:center;padding:9px;border-radius:14px;background:#09284e}.activity-row>span{font-size:22px}.activity-row b,.activity-row small{display:block}.activity-row small{color:#8da6c2;font-size:9px;margin-top:2px}.empty-dashboard{padding:16px;text-align:center;color:#90a7c2}
.security-email-row{display:flex;justify-content:space-between;gap:10px;padding:10px;border-radius:13px;background:#09284e;font-size:11px}.change-code-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-top:10px}.change-code-form input{font-size:13px;padding:11px}
@media(max-width:800px){
  .parent-dashboard-grid{grid-template-columns:1fr}.parent-kpis{grid-template-columns:repeat(2,1fr)}
  .fluence-parent-stats{grid-template-columns:repeat(2,1fr)}.change-code-form{grid-template-columns:1fr}
  .subject-row{grid-template-columns:1fr}.subject-score{text-align:left}.parent-dashboard-head{align-items:flex-start;flex-direction:column}
  #parentProfileSelect{width:100%}
}
@media(max-width:560px){
  .variety-banner{align-items:flex-start;flex-wrap:wrap}.variety-banner>button:not(.variety-close){margin-left:48px}
  .fluence-text{font-size:17px;padding:15px}.fluence-result-grid{grid-template-columns:1fr}
  .parent-dashboard-modal{padding:20px 12px}.parent-kpis{gap:6px}.parent-child-card{align-items:flex-start}.parent-overall-badge{font-size:9px}
}


/* ===== Le Monde de Néo v7 — Branding, PWA et mobile ===== */
html{scroll-behavior:smooth;background:#06162f}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
button,a,input,select,textarea{touch-action:manipulation}
.topbar{height:auto;min-height:82px;padding-top:max(10px,env(safe-area-inset-top,0px));gap:14px}
.neo-brand{text-decoration:none;color:white;min-width:0}.brand-logo{width:128px;height:58px;object-fit:contain;filter:drop-shadow(0 7px 14px rgba(0,0,0,.18))}.brand-copy{min-width:0}.brand-copy strong{font-size:17px;white-space:nowrap}.brand-copy span{font-size:10px;color:#a8bdd7;white-space:nowrap}
.install-header-btn{border:0;border-radius:16px;padding:10px 12px;background:linear-gradient(135deg,#0f6786,#2258a4);color:white;display:flex;align-items:center;gap:6px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.install-header-btn span{font-size:18px}.install-header-btn b{font-size:11px}
.install-card{margin:0 0 20px;padding:16px;border-radius:24px;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#103c6b,#17336a 55%,#514084);border:1px solid rgba(255,255,255,.09);box-shadow:0 15px 30px rgba(0,0,0,.18)}
.install-card-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.08);font-size:30px;flex:none}.install-card small{display:block;color:#72dfff;font-size:9px;font-weight:900;letter-spacing:.12em}.install-card strong{display:block;font-size:16px;margin-top:2px}.install-card p{margin:3px 0 0;color:#b7c8dc;font-size:11px}.install-card>button{margin-left:auto;border:0;border-radius:15px;padding:12px 14px;background:#fff;color:#12315c;font-weight:900;cursor:pointer;white-space:nowrap}.install-card.installed{opacity:.75}.install-card.installed>button{pointer-events:none}
.install-modal-card{width:min(680px,96vw);max-height:92dvh;overflow:auto}.install-modal-logo{text-align:center}.install-modal-logo img{width:min(330px,80%);max-height:145px;object-fit:contain}.install-lead{text-align:center!important}.install-native-btn{display:block;margin:10px auto 16px!important}.install-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#08244a;border-radius:16px;padding:5px;margin:15px 0}.install-tab{border:0;border-radius:12px;padding:11px;background:transparent;color:#9fb4cf;font-weight:900;cursor:pointer}.install-tab.active{background:linear-gradient(135deg,#735cff,#21c8ee);color:#fff}.install-guide{display:grid;gap:9px}.guide-step{display:flex;gap:12px;align-items:flex-start;padding:11px;border-radius:16px;background:#0b2a52;text-align:left}.guide-step>b{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:#1c5a8d;color:#fff;flex:none}.guide-step strong{display:block}.guide-step p{margin:3px 0 0!important;color:#aebfd4!important;font-size:11px!important}.official-guide{display:block;text-align:center;color:#75dcff;text-decoration:none;font-size:12px;font-weight:900;padding:8px}.install-requirement{margin-top:14px;padding:11px;border-radius:14px;background:rgba(255,196,65,.08);color:#d5c794;font-size:10px;line-height:1.5}.install-requirement code{background:#071d3a;padding:2px 4px;border-radius:5px;color:#fff}
.network-status{position:fixed;z-index:9999;left:50%;top:max(8px,env(safe-area-inset-top,0px));transform:translateX(-50%);padding:7px 11px;border-radius:999px;background:#9d5c14;color:white;font-size:10px;font-weight:900;box-shadow:0 5px 18px rgba(0,0,0,.25)}
.site-footer{width:min(1180px,calc(100% - 28px));margin:10px auto 26px;padding:20px;border-radius:26px;background:linear-gradient(155deg,#0c2d56,#081f40);border:1px solid rgba(255,255,255,.07)}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:105px;height:62px;object-fit:contain}.footer-brand strong,.footer-brand span{display:block}.footer-brand span{font-size:10px;color:#9fb3cc;margin-top:2px}.footer-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin:17px 0}.footer-links a{color:#b7c9dc;text-decoration:none;font-size:11px}.footer-links a:hover{color:#72deff;text-decoration:underline}.footer-bottom{display:flex;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);color:#859dbb;font-size:9px}
.parent-data-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.danger-game-btn{border:0;border-radius:14px;padding:11px 13px;background:#6b2b42;color:white;font-weight:900;cursor:pointer}
.bottom-nav{height:calc(82px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
body.standalone-app .topbar{padding-top:max(12px,env(safe-area-inset-top,0px))}body.standalone-app .install-card{display:none}
@media(max-width:780px){
  .topbar{padding-left:12px;padding-right:12px}.brand-logo{width:105px;height:52px}.brand-copy{display:none}.header-actions{gap:5px}.parent-btn span{display:none}.parent-btn{font-size:0;padding:9px}.parent-btn::after{content:"👨‍👩‍👧";font-size:18px}.install-header-btn b{display:none}.install-header-btn{padding:9px}.score-chip{padding:9px}.profile-chip{padding:6px}
  main{width:min(100% - 20px,1180px)}.hero{padding-top:23px}.hero h1{font-size:clamp(31px,9vw,45px)}.age-auto-card{min-width:0}.player-strip{margin-bottom:14px}
  .install-card{align-items:flex-start;flex-wrap:wrap}.install-card>button{width:100%;margin-left:0}.install-card-icon{width:46px;height:46px}
  .site-footer{width:calc(100% - 20px);margin-bottom:15px}.footer-bottom{flex-direction:column}
  .parent-dashboard-modal,.game-modal-card,.profile-modal-card{max-height:calc(100dvh - max(12px,env(safe-area-inset-top,0px)) - 12px)}
}
@media(max-width:480px){
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}.topbar{min-height:66px}.brand-logo{width:82px;height:45px}.score-chip{font-size:11px}.profile-chip>span:first-child{width:32px;height:32px}.install-header-btn span{font-size:17px}.parent-btn::after{font-size:18px}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{min-height:195px;border-radius:20px}.art{height:142px}.tile-label{padding:38px 12px 14px}.tile-label span{font-size:18px}.tile-label small{font-size:10px}.calc{transform:scale(.82) rotate(-6deg)}.science-art{gap:9px;transform:scale(.86)}.language-art{transform:scale(.86)}.memory-art{transform:scale(.82)}.creative-art{transform:scale(.85)}
  .mini-stats div{padding:8px 5px}.mini-stats b{font-size:14px}.quest{padding:14px}.quest-icon{font-size:31px}.quest p{font-size:11px}.bottom-nav{height:calc(72px + env(safe-area-inset-bottom,0px))}.nav-item span{font-size:21px}.nav-item small{font-size:9px}
  .install-tabs{grid-template-columns:1fr}.install-modal-card{padding:20px 12px}.install-modal-logo img{width:260px}.site-footer{padding:15px}.footer-brand img{width:85px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}


/* =========================================================
   Historique — Compte Firebase + mode petits explorateurs
   ========================================================= */

.account-chip{
  display:flex;align-items:center;gap:8px;border:1px solid rgba(133,214,255,.26);
  background:linear-gradient(180deg,rgba(20,63,111,.9),rgba(9,35,70,.92));
  color:#fff;border-radius:16px;padding:8px 11px;min-height:46px;cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.16)
}
.account-chip>span:first-child{font-size:20px}
.account-chip-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.08}
.account-chip-copy b{font-size:12px;max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-chip-copy small{font-size:10px;color:#9dddfb;margin-top:3px}

.account-gate{z-index:2500;background:rgba(2,10,24,.82);backdrop-filter:blur(14px)}
.account-gate.account-required .account-modal-card{box-shadow:0 34px 90px rgba(0,0,0,.46)}
.account-modal-card{width:min(94vw,520px);max-height:92vh;overflow:auto;padding:26px}
.account-brand{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.account-brand img{width:70px;height:70px;object-fit:contain;border-radius:18px;background:rgba(255,255,255,.06)}
.account-brand div{display:flex;flex-direction:column}
.account-brand strong{font-size:21px}
.account-brand small{color:#93b8d8;margin-top:3px}
.account-view{text-align:center}
.account-view>p{color:#aac3da;line-height:1.55}
.account-cloud{font-size:54px;margin:8px 0}
.account-cloud-ok{filter:drop-shadow(0 10px 18px rgba(95,218,255,.22))}
.account-loader{width:180px;height:7px;border-radius:99px;background:#0e2c51;margin:22px auto;overflow:hidden}
.account-loader i{display:block;width:48%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6ce3ff,#8d7bff);animation:neoLoader 1.1s ease-in-out infinite alternate}
@keyframes neoLoader{from{transform:translateX(-10%)}to{transform:translateX(120%)}}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#071d38;border:1px solid #173d68;padding:6px;border-radius:16px;margin:18px 0}
.account-tab{border:0;border-radius:12px;padding:11px 12px;background:transparent;color:#9ebbd4;font-weight:800;cursor:pointer}
.account-tab.active{background:linear-gradient(135deg,#1978cf,#6656dc);color:white;box-shadow:0 8px 18px rgba(37,106,202,.25)}
.account-form{display:grid;gap:12px;text-align:left}
.account-form label{display:grid;gap:6px}
.account-form label>span{font-size:12px;font-weight:800;color:#b9cee1}
.account-form input[type="email"],.account-form input[type="password"]{
  width:100%;box-sizing:border-box;border:1px solid #244e77;background:#071c35;color:#fff;
  border-radius:13px;padding:13px 14px;font:inherit;outline:none
}
.account-form input:focus{border-color:#66d9ff;box-shadow:0 0 0 3px rgba(102,217,255,.12)}
.account-parent-check{grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px!important;background:#0a2544;padding:12px;border-radius:13px;border:1px solid #173d68}
.account-parent-check input{margin-top:3px;accent-color:#55d39b}
.account-parent-check span{font-weight:600!important;line-height:1.4}
.account-wide-btn{width:100%;margin-top:2px}
.account-message{min-height:22px;margin:12px 0 0;color:#c9d9e7;font-weight:700;font-size:13px}
.account-message.error{color:#ff9bac}
.account-message.success{color:#71e6ae}
.account-privacy-note{font-size:11px!important;color:#7899b7!important;margin-top:16px!important}
.account-email{font-size:15px;font-weight:900;background:#071d38;border:1px solid #1a456e;border-radius:13px;padding:12px;margin:10px 0 16px;word-break:break-word}
.sync-card{display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(145deg,#0b294b,#0a213d);border:1px solid #1c527f;border-radius:16px;padding:14px;margin:14px 0}
.sync-card>span{font-size:26px}
.sync-card div{display:flex;flex-direction:column;gap:3px}
.sync-card small{color:#9bb8d1;line-height:1.35}

.early-sound-banner{
  margin:0 auto 20px;width:min(1180px,calc(100% - 32px));box-sizing:border-box;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:15px 18px;border-radius:20px;border:1px solid rgba(255,208,75,.42);
  background:linear-gradient(135deg,rgba(255,190,45,.16),rgba(255,118,82,.12));
  box-shadow:0 15px 35px rgba(0,0,0,.12)
}
.early-sound-icon{font-size:34px}
.early-sound-banner small{display:block;color:#ffd876;font-weight:900;letter-spacing:.08em;font-size:10px}
.early-sound-banner strong{display:block;font-size:17px;margin:3px 0}
.early-sound-banner p{margin:0;color:#bad0e4;font-size:13px;line-height:1.4}
.early-sound-banner button,.replay-audio-btn{
  border:1px solid rgba(111,225,255,.45);background:linear-gradient(135deg,#1387c7,#5367e2);
  color:#fff;font-weight:900;border-radius:13px;padding:11px 14px;cursor:pointer;
  box-shadow:0 8px 18px rgba(25,113,205,.2)
}
.early-question-card .question-mark{font-size:28px}
.early-question-card h3{font-size:clamp(22px,4.5vw,34px);line-height:1.24}
.early-question-tools{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.early-question-tools span{font-size:12px;color:#ffd876;font-weight:800}
.early-learner .answer-grid{gap:14px}
.early-learner .answer-btn.early-answer-btn{
  min-height:82px;font-size:clamp(22px,5vw,32px);font-weight:900;border-radius:20px;padding:16px;
  line-height:1.18
}
.early-learner .game-choice{min-height:132px}
.early-learner .game-choice-icon{font-size:38px}
.early-learner .game-choice strong{font-size:18px}
.early-learner .game-choice small{font-weight:700;color:#bfe8ff}
.early-learner .letter-bank button{min-width:58px;min-height:58px;font-size:28px}
.early-learner .primary-game-btn,.early-learner .secondary-game-btn{min-height:50px;font-size:15px}
.early-learner .pre-fluence-word{font-size:clamp(42px,11vw,72px)}

@media(max-width:850px){
  .account-chip-copy{display:none}
  .account-chip{min-width:46px;justify-content:center;padding:8px}
}
@media(max-width:640px){
  .account-modal-card{padding:20px 16px}
  .account-brand img{width:58px;height:58px}
  .account-brand strong{font-size:18px}
  .early-sound-banner{grid-template-columns:auto 1fr;margin-bottom:14px;padding:13px}
  .early-sound-banner button{grid-column:1/-1;width:100%}
  .early-sound-banner p{font-size:12px}
  .early-learner .answer-btn.early-answer-btn{min-height:76px;font-size:24px}
}

.early-answer-btn{position:relative;display:flex!important;align-items:center;justify-content:center;gap:9px}
.early-answer-number{
  position:absolute;top:7px;left:8px;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  font-size:13px;font-weight:1000;color:#fff
}
.early-answer-label{display:inline-block}


/* ===== v7.36 — Installation proposée avant le compte ===== */
.install-first-gate{
  z-index:4200;
  background:
    radial-gradient(circle at 50% 12%,rgba(40,185,238,.18),transparent 32%),
    rgba(2,10,24,.90);
  backdrop-filter:blur(18px);
}
.install-first-card{
  width:min(94vw,540px);
  max-height:94dvh;
  overflow:auto;
  padding:24px 24px 20px;
  border-radius:30px;
}
.install-first-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  margin-bottom:12px;
}
.install-first-brand img{
  width:68px;
  height:68px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,.06);
}
.install-first-brand div{display:grid;gap:2px}
.install-first-brand span{
  color:#72dfff;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.13em;
}
.install-first-brand strong{
  font-size:20px;
  line-height:1.05;
}
.install-first-icon{
  font-size:48px;
  margin:5px 0 0;
}
.install-first-card h2{
  font-size:30px;
  margin:4px 0 8px;
}
.install-first-lead{
  margin:0 auto 14px!important;
  max-width:440px;
  font-size:14px;
}
.install-first-context{
  margin:12px 0;
  padding:13px 14px;
  border-radius:17px;
  background:linear-gradient(135deg,rgba(255,193,68,.13),rgba(82,105,255,.13));
  border:1px solid rgba(255,255,255,.10);
  color:#f6e5b1;
  font-size:13px;
  line-height:1.55;
  text-align:left;
}
.install-first-context strong{color:#fff}
.install-first-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:15px 0;
}
.install-first-steps>div{
  min-height:82px;
  padding:10px 8px;
  border-radius:17px;
  background:#0b2a52;
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.install-first-steps b{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#735cff,#21c8ee);
  color:#fff;
}
.install-first-steps span{
  color:#d6e3f4;
  font-size:11px;
  font-weight:850;
  line-height:1.25;
}
.install-first-primary{
  width:100%;
  margin-top:2px!important;
  min-height:52px;
  font-size:16px!important;
}
.install-first-copy{
  width:100%;
  margin-top:9px;
  min-height:45px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:#0a2a52;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.install-first-skip{
  margin-top:10px;
  border:0;
  background:transparent;
  color:#aebfd4;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:800;
  cursor:pointer;
  padding:8px 10px;
}
.install-first-foot{
  margin:4px 0 0!important;
  color:#8fa7c4!important;
  font-size:10px!important;
}
.install-first-card.messenger-mode .install-first-context{
  background:linear-gradient(135deg,rgba(255,179,71,.18),rgba(255,95,109,.10));
  color:#ffe1a1;
}
.install-first-card.ios-mode .install-first-steps>div:nth-child(1) b::after{content:""}
body.install-first-open{overflow:hidden!important}

@media (max-width:560px){
  .install-first-gate{padding:max(10px,env(safe-area-inset-top,0px)) 10px max(10px,env(safe-area-inset-bottom,0px))}
  .install-first-card{
    width:100%;
    max-height:calc(100dvh - 20px);
    padding:18px 14px 16px;
    border-radius:25px;
  }
  .install-first-brand img{width:56px;height:56px}
  .install-first-brand strong{font-size:18px}
  .install-first-card h2{font-size:26px}
  .install-first-lead{font-size:13px}
  .install-first-steps{gap:6px}
  .install-first-steps>div{min-height:76px;padding:8px 5px}
  .install-first-steps span{font-size:10px}
}


/* ===== v7.36 — Correctifs mobile, paires, Vrai/Faux et voix ===== */

/* Explication pédagogique après Vrai/Faux */
.answer-explanation{
  margin:18px auto 0;
  width:min(620px,100%);
  padding:15px 17px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,203,74,.16),rgba(65,206,255,.10));
  border:1px solid rgba(255,220,115,.28);
  text-align:left;
  line-height:1.45;
  animation:neoExplainIn .22s ease-out;
}
.answer-explanation span{
  display:block;
  color:#ffd96b;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:5px;
}
.answer-explanation strong{
  display:block;
  color:#f4f8ff;
  font-size:15px;
}
@keyframes neoExplainIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

/* Les cartes "Paires" doivent rester carrées et compactes */
.memory-board,
.memory-4,.memory-5,.memory-6,.memory-7,.memory-8{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.memory-card{
  aspect-ratio:1/1;
}

/* Ecran "installer avant le compte" : aucune largeur ne peut dépasser le téléphone */
.install-first-gate{
  width:100vw;
  max-width:100vw;
  overflow-x:hidden;
}
.install-first-card{
  box-sizing:border-box;
  min-width:0!important;
  max-width:min(540px,calc(100vw - 24px))!important;
  width:min(540px,calc(100vw - 24px))!important;
  overflow-x:hidden!important;
}
.install-first-brand{
  min-width:0;
}
.install-first-brand img{
  flex:0 0 54px;
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  object-fit:contain!important;
}
.install-first-brand>div{
  min-width:0;
}
.install-first-brand strong,
.install-first-brand span{
  overflow-wrap:anywhere;
}
.install-first-card h2,
.install-first-lead,
.install-first-context,
.install-first-foot{
  max-width:100%;
  overflow-wrap:anywhere;
}
.install-first-primary,
.install-first-copy,
.install-first-skip{
  max-width:100%;
  white-space:normal;
}

@media(max-width:560px){
  .install-first-gate{
    padding:max(8px,env(safe-area-inset-top,0px)) 8px max(8px,env(safe-area-inset-bottom,0px))!important;
    place-items:center!important;
  }
  .install-first-card{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    padding:14px 13px 14px!important;
    border-radius:22px!important;
  }
  .install-first-brand{
    margin-bottom:7px!important;
    gap:9px!important;
  }
  .install-first-brand img{
    flex-basis:46px;
    width:46px!important;
    height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
    border-radius:13px!important;
  }
  .install-first-brand span{font-size:8px!important}
  .install-first-brand strong{font-size:16px!important}
  .install-first-icon{
    font-size:34px!important;
    margin:0!important;
  }
  .install-first-card h2{
    font-size:clamp(22px,7vw,28px)!important;
    line-height:1.05!important;
    margin:2px 0 7px!important;
  }
  .install-first-lead{
    font-size:12px!important;
    line-height:1.4!important;
    margin:0 auto 9px!important;
  }
  .install-first-context{
    margin:8px 0!important;
    padding:10px 11px!important;
    font-size:11px!important;
  }
  .install-first-steps{
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin:9px 0!important;
  }
  .install-first-steps>div{
    min-height:0!important;
    height:auto!important;
    padding:7px 9px!important;
    border-radius:13px!important;
    display:grid!important;
    grid-template-columns:28px 1fr!important;
    justify-items:start!important;
    text-align:left!important;
  }
  .install-first-steps b{
    width:27px!important;
    height:27px!important;
    border-radius:9px!important;
    font-size:12px!important;
  }
  .install-first-steps span{
    font-size:11px!important;
    align-self:center!important;
  }
  .install-first-primary{
    min-height:47px!important;
    font-size:15px!important;
    margin:1px 0 0!important;
  }
  .install-first-skip{
    margin-top:5px!important;
    padding:7px 6px!important;
    font-size:12px!important;
  }
  .install-first-foot{
    margin:2px 0 0!important;
    font-size:9px!important;
    line-height:1.35!important;
  }

  /* Paires : 4 colonnes compactes, adaptées à un écran de téléphone */
  .memory-board,
  .memory-4,.memory-5,.memory-6,.memory-7,.memory-8{
    width:min(92vw,340px)!important;
    max-width:340px!important;
    gap:5px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .memory-card{
    width:100%!important;
    min-width:0!important;
    aspect-ratio:1/1!important;
    border-radius:11px!important;
    font-size:24px!important;
    box-shadow:none!important;
  }
  .memory-moves{
    margin:8px 0 0!important;
    font-size:12px!important;
  }

  .answer-explanation{
    margin-top:12px;
    padding:12px 13px;
    border-radius:15px;
  }
  .answer-explanation strong{
    font-size:13px;
  }
}

/* Très petits écrans */
@media(max-width:380px){
  .memory-board,
  .memory-4,.memory-5,.memory-6,.memory-7,.memory-8{
    width:min(94vw,310px)!important;
    gap:4px!important;
  }
  .memory-card{
    border-radius:9px!important;
    font-size:21px!important;
  }
}

/* ===== Historique — Réglages de la lecture audio ===== */
.early-sound-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  min-width:196px;
}
.neo-voice-switch{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(4,16,34,.42);
  font-size:13px;
  font-weight:800;
  color:#e9f3ff;
  cursor:pointer;
  user-select:none;
}
.neo-voice-switch input{
  width:19px;
  height:19px;
  flex:none;
  accent-color:#38b6ff;
  cursor:pointer;
}
.neo-voice-picker{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.neo-voice-picker>span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffd876;
}
.neo-voice-picker select{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  box-sizing:border-box;
  padding:10px 34px 10px 12px;
  border-radius:13px;
  border:1px solid rgba(111,225,255,.34);
  /* Fond sombre + texte clair : sans couleur explicite, le texte héritait du blanc
     du bandeau et la liste apparaissait vide. */
  background-color:rgba(4,16,34,.62);
  color:#f2f8ff;
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236fe1ff' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
}
.neo-voice-picker select:disabled{
  opacity:.45;
  cursor:not-allowed;
}
/* Sur Android et Windows la liste déroulée hérite du fond clair du système. */
.neo-voice-picker select option{
  background:#0d2138;
  color:#f2f8ff;
}
.neo-voice-warning{
  margin:0;
  font-size:11.5px;
  line-height:1.4;
  padding:8px 11px;
  border-radius:11px;
  background:rgba(255,146,60,.16);
  border:1px solid rgba(255,168,86,.34);
  color:#ffd2a8;
}
/* Voix coupée : on n'affiche plus les invites qui demandent d'écouter. */
body.neo-voice-off .early-sound-banner p,
body.neo-voice-off .early-question-tools{
  display:none;
}

@media(max-width:640px){
  /* La règle historique ne visait que le bouton direct du bandeau ; le bloc de
     réglages doit prendre toute la largeur à sa place. */
  .early-sound-actions{grid-column:1/-1;min-width:0}
  .early-sound-actions button{width:100%}
}


/* ===== v7.36 — Jeux ludiques, version visible & joueurs en ligne ===== */
.tile-cyan{background:radial-gradient(circle at 58% 30%,#36e2d3,#13759b 72%)}
.playful-art{position:relative}
.playful-puzzle{font-size:84px;transform:rotate(-9deg);filter:drop-shadow(0 14px 12px rgba(0,0,0,.22))}
.playful-star{position:absolute;font-size:40px;right:24%;top:18%;transform:rotate(12deg)}
.playful-rocket{position:absolute;font-size:45px;left:22%;bottom:18%;transform:rotate(-20deg)}

.app-live-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 18px}
.online-players-pill,.version-pill{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(7,34,70,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font-size:12px;color:#c7d7e9}
.online-players-pill strong,.version-pill strong{color:#fff;font-size:13px}
.online-globe{font-size:17px}
.online-pulse{width:9px;height:9px;border-radius:50%;background:#52e39a;box-shadow:0 0 0 0 rgba(82,227,154,.55);animation:neoOnlinePulse 1.8s infinite}
.online-players-pill.offline .online-pulse{background:#ffb84e;animation:none;box-shadow:none}
.online-players-pill.error .online-pulse{background:#ff6b7f;animation:none;box-shadow:none}
@keyframes neoOnlinePulse{0%{box-shadow:0 0 0 0 rgba(82,227,154,.5)}70%{box-shadow:0 0 0 8px rgba(82,227,154,0)}100%{box-shadow:0 0 0 0 rgba(82,227,154,0)}}

/* Puzzle */
.puzzle-game{width:min(720px,100%);text-align:center}
.puzzle-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.puzzle-head h3{margin:0;font-size:clamp(22px,4vw,32px)}
.puzzle-head p{margin:4px 0 0;color:#a9bfd8;font-size:12px}
.puzzle-preview{width:92px;aspect-ratio:1;border-radius:16px;background-size:cover;background-position:center;box-shadow:0 8px 22px rgba(0,0,0,.24),inset 0 0 0 2px rgba(255,255,255,.16);flex:0 0 auto}
.puzzle-board{display:grid;gap:5px;width:min(88vw,470px);aspect-ratio:1;margin:12px auto;padding:7px;border-radius:24px;background:#061b39;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 18px 38px rgba(0,0,0,.24)}
.puzzle-piece{border:0;border-radius:10px;cursor:pointer;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform .12s,outline .12s,filter .12s;min-width:0;min-height:0}
.puzzle-piece:hover{filter:brightness(1.07)}
.puzzle-piece.selected{outline:4px solid #ffd75f;outline-offset:-4px;transform:scale(.94);z-index:2}
.puzzle-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.puzzle-moves{font-weight:900;color:#ffd75f}

/* Cherche et trouve */
.find-game{width:min(700px,100%);text-align:center}
.find-target{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:18px;background:#0c315e;margin-bottom:12px;font-weight:900}.find-target b{font-size:30px}.find-target span{color:#a9c2df}
.find-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(92vw,520px);margin:auto;padding:12px;border-radius:24px;background:#08244a}
.find-item{aspect-ratio:1;border:0;border-radius:16px;background:#f6f8fc;font-size:clamp(27px,6vw,42px);cursor:pointer;box-shadow:0 5px 0 #c7d3e2;transition:.12s}.find-item:active{transform:translateY(3px);box-shadow:0 2px 0 #c7d3e2}.find-item.found{background:#bbf4d6;box-shadow:0 5px 0 #66c995;transform:scale(.9);opacity:.6}.find-item.miss{animation:neoMiss .25s;background:#ffd2d8}@keyframes neoMiss{50%{transform:translateX(5px)}}

/* Tri tactile / glisser-déposer */
.sort-game{width:min(760px,100%);text-align:center}.sort-game h3{margin:0 0 5px;font-size:clamp(24px,4vw,34px)}.sort-game>p{color:#adc1d9;margin:0 0 14px}
.sort-pool{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;min-height:90px;padding:14px;border-radius:22px;background:#08244a;margin-bottom:14px}
.sort-item{display:flex;align-items:center;gap:7px;border:0;border-radius:16px;background:#f7f9fc;color:#0c2a52;padding:10px 12px;font-weight:900;cursor:grab;box-shadow:0 5px 0 #c4d0df;user-select:none}.sort-item span{font-size:28px}.sort-item.selected{outline:4px solid #ffd65e;transform:translateY(-2px)}.sort-item.done{display:none}
.sort-bins{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sort-bin{border:2px dashed rgba(255,255,255,.25);border-radius:22px;background:#0b315e;color:#fff;min-height:125px;padding:16px;display:grid;place-items:center;cursor:pointer;transition:.14s}.sort-bin strong{display:block;font-size:18px}.sort-bin small{display:block;color:#9fb8d4;margin-top:5px}.sort-bin.drag-over,.sort-bin.selected-target{border-color:#6fe2ff;background:#124679;transform:scale(1.02)}.sort-bin.correct-flash{animation:neoCorrectBin .35s}@keyframes neoCorrectBin{50%{background:#176748}}.sort-bin.wrong-flash{animation:neoWrongBin .35s}@keyframes neoWrongBin{50%{background:#743247}}

/* Labyrinthe */
.maze-game{width:min(680px,100%);text-align:center}.maze-game h3{margin:0;font-size:clamp(24px,4vw,34px)}.maze-game p{color:#adc1d9;margin:5px 0 12px}
.maze-board{display:grid;gap:3px;width:min(88vw,470px);aspect-ratio:1;margin:0 auto 12px;padding:8px;background:#061b39;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.maze-cell{display:grid;place-items:center;border-radius:7px;background:#1a4b7b;min-width:0;min-height:0;font-size:clamp(16px,4.5vw,30px)}.maze-cell.wall{background:#07152d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.maze-cell.goal{background:#7d6719}.maze-cell.player{background:#185f63;box-shadow:inset 0 0 0 2px #6ff0dc}
.maze-controls{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,52px);justify-content:center;gap:7px}.maze-controls button{border:0;border-radius:15px;background:#173f6d;color:#fff;font-size:25px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 #082548}.maze-controls button:active{transform:translateY(3px);box-shadow:0 2px 0 #082548}.maze-up{grid-column:2}.maze-left{grid-column:1;grid-row:2}.maze-down{grid-column:2;grid-row:2}.maze-right{grid-column:3;grid-row:2}

@media(max-width:560px){
  .app-live-meta{margin-top:-8px;gap:7px}.online-players-pill,.version-pill{padding:7px 10px;font-size:10px;gap:6px}.online-players-pill strong,.version-pill strong{font-size:11px}.version-pill span:last-child{display:none}
  .find-grid{grid-template-columns:repeat(4,1fr);gap:6px;padding:9px}.find-item{border-radius:13px}
  .sort-bins{grid-template-columns:1fr}.sort-bin{min-height:92px}.sort-pool{max-height:230px;overflow:auto}
  .puzzle-preview{width:72px}.puzzle-board{width:min(90vw,390px);gap:4px;padding:5px;border-radius:18px}.puzzle-piece{border-radius:7px}
  .maze-board{width:min(90vw,390px);gap:2px;padding:6px}.maze-cell{border-radius:5px}
}
/* ======================================================================
   v7.36 — Illustrations de jeu + deux vrais jeux (puzzle, taquin)
   ====================================================================== */

/* --- cadre « carte photo » des visuels de question --- */
.quiz-picture{
  background:linear-gradient(160deg,#ffffff,#eef4fb)!important;
  padding:6px!important;border:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px rgba(11,40,74,.10),
             0 4px 10px rgba(8,28,55,.16),0 20px 40px -12px rgba(8,28,55,.42)!important;
  animation:neoPictureIn .42s cubic-bezier(.22,1,.36,1) both;
}
.real-learning-image{background:linear-gradient(160deg,#ffffff,#eef4fb)!important;border:0!important;padding:6px!important}
@keyframes neoPictureIn{from{opacity:0;transform:translateY(10px) scale(.965)}to{opacity:1;transform:none}}

/* ------------------------------- PUZZLE À PIÈCES ------------------------------- */
.jz-card{align-items:stretch}
.jz-title{margin:2px 0 8px;text-align:center;font-size:17px}
.jz-wrap{position:relative;width:100%;margin:0 auto;touch-action:none;user-select:none}
.jz-board{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#123a63,#0b2444);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.45),0 10px 26px -10px rgba(4,18,36,.7);
}
.jz-board.solved{box-shadow:inset 0 0 0 3px rgba(70,215,140,.9),0 12px 30px -8px rgba(20,120,70,.6)}
.jz-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transition:opacity .35s ease;pointer-events:none}
.jz-grid{position:absolute;inset:0;pointer-events:none}
.jz-slot{position:absolute;overflow:visible;pointer-events:none}
.jz-tray{
  /* BUG corrigé : position:absolute sans top NI bottom -> le bac se plaçait
     à sa position statique, c'est-à-dire tout en haut, PAR-DESSUS le
     plateau. D'où les pièces qui recouvraient l'image sur téléphone. */
  position:absolute; left:50%; bottom:0; top:auto;
  transform:translateX(-50%); width:100%;
  border-radius:18px; background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.22);
}
.jz-tray-label{position:absolute;left:10px;top:6px;font-size:10px;color:#9fb8d4;letter-spacing:.06em;font-weight:800}
.jz-layer{position:absolute;inset:0;pointer-events:none}
.jz-piece-holder{
  position:absolute;pointer-events:auto;cursor:grab;touch-action:none;
  filter:drop-shadow(0 4px 6px rgba(4,18,36,.55));
  transition:filter .18s ease;
}
.jz-piece-holder.dragging{cursor:grabbing;filter:drop-shadow(0 14px 18px rgba(4,18,36,.6)) brightness(1.06);z-index:40}
.jz-piece-holder.locked{pointer-events:none;filter:drop-shadow(0 1px 2px rgba(4,18,36,.35));animation:jzSnap .3s ease}
/* Dans le bac, les pièces sont réduites juste assez pour tenir en deux
   rangées. Elles reprennent leur taille réelle dès qu'on les saisit. */
.jz-piece-holder.returning{
  transition:left .32s cubic-bezier(.22,1,.36,1), top .32s cubic-bezier(.22,1,.36,1),
             width .32s ease, height .32s ease;
}
.jz-piece{width:100%;height:100%;overflow:visible;display:block}
@keyframes jzSnap{0%{transform:scale(1.08)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.jz-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.jz-btn{
  border:0;border-radius:14px;padding:9px 15px;font-weight:800;font-size:13px;cursor:pointer;
  background:linear-gradient(135deg,#735cff,#21c8ee);color:#fff;
}
.jz-count{font-weight:900;color:#a9c3de;font-size:13px}
.jz-done{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  background:rgba(10,32,58,.92);color:#fff;padding:12px 18px;border-radius:16px;
  font-weight:900;font-size:15px;text-align:center;z-index:60;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.7);animation:neoPictureIn .3s ease both;
}

/* ------------------------------------ TAQUIN ----------------------------------- */
.tq-wrap{position:relative;display:flex;justify-content:center;margin:4px 0}
.tq-board{
  position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#123a63,#0b2444);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.45),0 10px 26px -10px rgba(4,18,36,.7);
}
.tq-board.solved{box-shadow:inset 0 0 0 3px rgba(70,215,140,.9)}
.tq-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .35s ease;pointer-events:none}
.tq-tile{
  position:absolute;left:0;top:0;cursor:pointer;
  transition:transform .16s cubic-bezier(.3,1,.4,1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.28);
  border-radius:5px;overflow:hidden;
}
.tq-tile svg{display:block;width:100%;height:100%}
.tq-tile:active{filter:brightness(1.12)}

@media (max-width:560px){
  .jz-title{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .quiz-picture,.jz-done{animation:none}
}

/* ======================================================================
   v7.36 — Atelier de mini-jeux : personnages animés + scène.
   Tout personnage produit par NeoMini.chars porte la classe .nm-char ;
   les animations ci-dessous s'appliquent donc automatiquement à tous les
   jeux que tu écriras avec la fabrique.
   ====================================================================== */
.nm-card{ align-items:stretch }
.nm-q{ text-align:center; margin:2px 0 10px; font-size:19px }
.nm-stage{ border-radius:26px; overflow:hidden; box-shadow:0 14px 30px -14px rgba(4,18,36,.7) }
.nm-scene{ display:block; width:100%; height:auto }

/* respiration permanente : le personnage n'est jamais figé */
.nm-idle{ animation:nmIdle 2.6s ease-in-out infinite; transform-origin:50% 100% }
@keyframes nmIdle{ 0%,100%{ translate:0 0; scale:1 1 } 50%{ translate:0 -5px; scale:1.02 .985 } }

/* le bras gauche salue */
.nm-char .nm-arm, .nm-char .nm-hand{ transform-origin:center; animation:nmWave 2.6s ease-in-out infinite }
@keyframes nmWave{ 0%,100%{ rotate:0deg } 50%{ rotate:-14deg } }

/* arrivée en scène, décalée d'un personnage à l'autre */
.nm-pop{ animation:nmPop .45s cubic-bezier(.2,1.5,.4,1) both }
@keyframes nmPop{ from{ opacity:0; translate:0 26px; scale:.5 } to{ opacity:1; translate:0 0; scale:1 } }

/* réaction à la bonne réponse : tout le monde saute */
.nm-cheer{ animation:nmCheer .5s ease-in-out 3 }
@keyframes nmCheer{ 0%,100%{ translate:0 0 } 30%{ translate:0 -26px } 60%{ translate:0 2px } }

.nm-sun{ animation:nmSpin 26s linear infinite; transform-origin:662px 74px }
@keyframes nmSpin{ to{ rotate:360deg } }
.nm-clouds{ animation:nmDrift 20s ease-in-out infinite alternate }
@keyframes nmDrift{ from{ translate:-18px 0 } to{ translate:22px 0 } }
.nm-flowers g{ animation:nmSway 3.4s ease-in-out infinite; transform-origin:50% 100% }
.nm-flowers g:nth-child(even){ animation-delay:-1.5s }
@keyframes nmSway{ 0%,100%{ rotate:-7deg } 50%{ rotate:7deg } }

/* les réponses sont elles aussi des personnages */
.nm-answers{ display:flex; justify-content:center; gap:14px; margin-top:12px; flex-wrap:wrap }
.nm-answer{
  border:0; background:linear-gradient(160deg,#ffffff,#e9f2fb); border-radius:26px;
  padding:6px 4px 2px; width:112px; cursor:pointer;
  box-shadow:0 0 0 1px rgba(11,40,74,.10), 0 10px 22px -10px rgba(8,28,55,.6);
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease;
}
.nm-answer svg{ display:block; width:100%; height:auto }
.nm-answer:hover:not(:disabled){ transform:translateY(-6px) }
.nm-answer:active:not(:disabled){ transform:translateY(-1px) }
.nm-answer:disabled{ cursor:default; opacity:.62 }
.nm-answer.nm-right{ opacity:1; box-shadow:0 0 0 4px #3ecf85, 0 14px 26px -10px rgba(20,120,70,.7) }
.nm-answer.nm-wrong{ opacity:1; box-shadow:0 0 0 4px #ef6a5c; animation:nmShake .4s }
@keyframes nmShake{ 0%,100%{ translate:0 0 } 25%{ translate:-8px 0 } 75%{ translate:8px 0 } }

@media (max-width:560px){
  .nm-answer{ width:92px }
  .nm-q{ font-size:16px }
}
@media (prefers-reduced-motion:reduce){
  .nm-idle,.nm-char .nm-arm,.nm-char .nm-hand,.nm-pop,.nm-cheer,
  .nm-sun,.nm-clouds,.nm-flowers g,.nm-answer.nm-wrong{ animation:none }
}

/* ======================================================================
   v7.36 — Jeux à glisser (moteur commun neo-drag.js)
   Les pièces flottent dans .dg-layer en position absolue ; les cibles
   (.dg-slot) restent dans le flux normal. Le moteur compare les
   rectangles à l'écran au lâcher : aucune coordonnée codée en dur.
   ====================================================================== */
.dg-card{ align-items:stretch }
.dg-q{ text-align:center; margin:2px 0 10px; font-size:18px }

.dg-wrap{
  position:relative;
  touch-action:none;          /* sans ça, le doigt fait défiler la page */
  user-select:none;
  -webkit-user-select:none;
}
.dg-layer{ position:absolute; inset:0; pointer-events:none; z-index:5 }

.dg-piece{
  position:absolute; left:0; top:0;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  filter:drop-shadow(0 5px 7px rgba(4,18,36,.5));
  transition:filter .16s ease;
}
.dg-piece svg{ display:block; width:100%; height:100% }
.dg-piece.dg-grab{ cursor:grabbing; filter:drop-shadow(0 16px 20px rgba(4,18,36,.6)) brightness(1.07); z-index:40 }
.dg-piece.dg-return{ transition:left .3s cubic-bezier(.22,1,.36,1), top .3s cubic-bezier(.22,1,.36,1) }
.dg-piece.dg-locked{ cursor:default; filter:drop-shadow(0 2px 3px rgba(4,18,36,.4)); animation:dgSnap .3s ease }
.dg-piece.dg-refuse{ animation:dgRefuse .4s }
.dg-piece.dg-eaten{ animation:dgEaten .45s ease forwards }
.dg-piece.dg-cheer{ animation:dgCheer .5s ease-in-out 2 }
@keyframes dgSnap{ 0%{ scale:1.14 } 60%{ scale:.95 } 100%{ scale:1 } }
@keyframes dgRefuse{ 0%,100%{ rotate:0deg } 25%{ rotate:-9deg } 75%{ rotate:9deg } }
@keyframes dgEaten{ to{ scale:.15; opacity:0; translate:0 26px } }
@keyframes dgCheer{ 0%,100%{ translate:0 0 } 35%{ translate:0 -18px } }

.dg-board{
  position:relative;
  border-radius:26px;
  padding:16px 12px;
  background:linear-gradient(180deg,#dff2ff,#bfe6fb 55%,#8ed46a 55%,#5ba844);
  box-shadow:inset 0 2px 10px rgba(4,20,42,.22), 0 12px 26px -14px rgba(4,18,36,.7);
  overflow:hidden;
}
.dg-tray{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  gap:10px; flex-wrap:wrap;
  margin-top:14px; padding:12px 10px; min-height:120px;
  border-radius:22px;
  background:rgba(255,255,255,.07);
  border:1px dashed rgba(255,255,255,.24);
}
.dg-home{ width:84px; height:104px }

.dg-slot{ position:relative }
.dg-slot::after{
  content:""; position:absolute; inset:-6px; border-radius:22px;
  border:3px dashed rgba(255,255,255,.55);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.dg-wrap:has(.dg-grab) .dg-slot::after{ opacity:1 }

/* --- la chenille --- */
.cat-board{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap }
.cat-head{ width:92px; flex:0 0 auto }
.cat-head svg, .cat-seg svg{ display:block; width:100%; height:auto }
.cat-seg{ width:84px; flex:0 0 auto }

/* --- les monstres --- */
.feed-board{ display:flex; justify-content:space-around; align-items:flex-end; gap:12px; padding-bottom:22px }
.feed-mouth{ width:min(42%,190px); text-align:center }
.feed-mouth svg{ display:block; width:100%; height:auto }
.feed-mouth strong{
  display:block; margin-top:4px; font-size:12.5px; font-weight:900; color:#0d3358;
  background:rgba(255,255,255,.86); border-radius:12px; padding:4px 8px;
}
.feed-mouth.feed-chew svg{ animation:dgChew .5s ease }
@keyframes dgChew{ 0%,100%{ scale:1 1 } 40%{ scale:1.06 .92 } 70%{ scale:.97 1.05 } }

/* --- écris le mot --- */
.word-board{ display:flex; flex-direction:column; align-items:center; gap:12px; background:linear-gradient(180deg,#eaf6ff,#cfe9fb) }
.word-pic{
  /* aspect-ratio est la vraie correction : le navigateur réserve la place
     de l'illustration AVANT de l'avoir chargée. Sans ça le plateau grandit
     au chargement, le bac descend, et les pièces déjà posées restent en
     l'air — exactement une hauteur de bac trop haut. */
  width:min(58%,236px);
  aspect-ratio:320/220;
  height:auto;
  border-radius:18px;
  box-shadow:0 8px 18px -8px rgba(4,18,36,.6);
}
.word-slots{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.word-slot, .word-fixed{
  width:62px; height:74px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900;
}
.word-slot{ background:rgba(255,255,255,.55); border:3px dashed #6f9dc4 }
.word-fixed{ background:#fff; color:#123f6b; box-shadow:0 4px 10px -4px rgba(4,18,36,.5) }

@media (max-width:560px){
  .dg-q{ font-size:16px }
  .cat-head{ width:74px } .cat-seg{ width:66px } .dg-home{ width:70px; height:88px }
  .word-slot,.word-fixed{ width:48px; height:58px; font-size:24px }
}
@media (prefers-reduced-motion:reduce){
  .dg-piece.dg-locked,.dg-piece.dg-refuse,.dg-piece.dg-cheer,.feed-mouth.feed-chew svg{ animation:none }
}


/* ======================================================================
   v7.36 — Les 13 activités classiques reçoivent le style des jeux ludiques.
   Elles passent TOUTES par renderQuestion() : on habille cette fonction
   une seule fois plutôt que de reprendre chaque jeu.
   ====================================================================== */
.question-card.neo-skin{
  position:relative;
  isolation:isolate;
  padding-top:126px;
  border-radius:28px;
  overflow:hidden;
}

/* Bandeau illustré derrière l'en-tête : ciel, colline, soleil. */
.question-card.neo-skin::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:138px; z-index:-1;
  background:
    radial-gradient(circle at 86% 26%, #ffe9a0 0 22px, rgba(255,233,160,.35) 23px, transparent 46px),
    radial-gradient(120% 96% at 50% 132%, #6fc255 0 52%, transparent 52.5%),
    linear-gradient(180deg,#bfe8fb,#8fd6f8);
}
.question-card.neo-skin::after{
  content:"";
  position:absolute; left:0; right:0; top:126px; height:16px; z-index:-1;
  background:radial-gradient(70% 100% at 50% 0%, rgba(4,20,42,.22), transparent 70%);
}

.q-stage{ position:absolute; left:0; right:0; top:4px; height:132px; z-index:0; pointer-events:none }
.q-mascot{
  position:absolute; left:50%; bottom:0; width:118px; height:auto;
  transform:translateX(-50%);
  transition:opacity .18s ease;
}
.q-mascot-cheer, .q-mascot-oops{ opacity:0 }

/* La mascotte réagit. Attention : quand l'enfant se trompe, le bouton
   juste reçoit AUSSI la classe .correct pour montrer la bonne réponse —
   d'où le :not(:has(.wrong)) pour distinguer les deux cas. */
.question-card.neo-skin:has(.answer-btn.correct):not(:has(.answer-btn.wrong)) .q-mascot{ opacity:0 }
.question-card.neo-skin:has(.answer-btn.correct):not(:has(.answer-btn.wrong)) .q-mascot-cheer{
  opacity:1; animation:qCheer .55s ease-in-out 2;
}
.question-card.neo-skin:has(.answer-btn.wrong) .q-mascot{ opacity:0 }
.question-card.neo-skin:has(.answer-btn.wrong) .q-mascot-oops{ opacity:1 }
@keyframes qCheer{ 0%,100%{ translate:0 0 } 35%{ translate:0 -22px } }

.question-card.neo-skin .question-mark{
  position:relative; z-index:2; margin:0 auto 6px;
  box-shadow:0 6px 14px -6px rgba(4,20,42,.6);
}
.question-card.neo-skin h3{ position:relative; z-index:2; text-align:center }

/* Boutons de réponse : vrai relief, enfoncement au doigt, réactions. */
.question-card.neo-skin .answer-btn{
  position:relative;
  border:0;
  border-radius:20px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -5px 0 rgba(4,20,42,.16),
    0 6px 0 rgba(4,20,42,.22),
    0 12px 20px -12px rgba(4,20,42,.7);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.question-card.neo-skin .answer-btn:active:not([data-locked]){
  transform:translateY(5px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 rgba(4,20,42,.22);
}
.question-card.neo-skin .answer-btn.correct{
  box-shadow:0 0 0 4px #3ecf85, 0 6px 0 rgba(20,110,64,.55), 0 14px 24px -12px rgba(20,120,70,.8);
  animation:qPop .34s ease;
}
.question-card.neo-skin .answer-btn.wrong{
  box-shadow:0 0 0 4px #ef6a5c, 0 6px 0 rgba(150,40,32,.5);
  animation:qShake .38s;
}
@keyframes qPop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.07) } 100%{ transform:scale(1) } }
@keyframes qShake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-7px) } 75%{ transform:translateX(7px) } }

@media (max-width:560px){
  .question-card.neo-skin{ padding-top:108px }
  .question-card.neo-skin::before{ height:118px }
  .q-stage{ height:114px }
  .q-mascot{ width:98px }
}
@media (prefers-reduced-motion:reduce){
  .q-mascot-cheer,.question-card.neo-skin .answer-btn.correct,
  .question-card.neo-skin .answer-btn.wrong{ animation:none }
}

/* Écran de fin : la mascotte félicite l'enfant. */
.game-done.neo-done{
  position:relative; padding-top:20px; text-align:center;
  border-radius:26px; overflow:hidden;
  background:linear-gradient(180deg,#bfe8fb 0 58%,#6fc255 58%,#4e9c3f);
  color:#0d3358;
}
.game-done.neo-done h3{ color:#0d3358; margin:6px 0 4px }
.game-done.neo-done p{ color:#124a2a; font-weight:700 }
.done-mascot{ display:block; width:132px; height:auto; margin:0 auto -6px; animation:qCheer .6s ease-in-out 3 }
.game-done.neo-done .game-done-icon{ font-size:32px }
@media (prefers-reduced-motion:reduce){ .done-mascot{ animation:none } }

/* ======================================================================
   v7.36 — 3-5 ANS : des réponses à regarder.
   À cet âge on ne lit pas encore : le mot devient une grande image, et le
   texte n'est plus qu'un rappel sous l'image.
   ====================================================================== */
.early-question-card .answer-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
.answer-btn.early-answer-btn.has-visual{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 10px 12px;
  min-height:0;
  background:linear-gradient(170deg,#ffffff,#e9f2fb);
  color:#0d3358;
}
.ea-art{ display:block; width:100%; }
.ea-pic{
  display:block; width:100%; height:auto;
  aspect-ratio:320/220;          /* réserve la place avant chargement */
  border-radius:16px;
  box-shadow:0 6px 14px -8px rgba(4,18,36,.6);
}
.ea-svg{ display:block; width:74%; margin:0 auto; height:auto; aspect-ratio:160/200 }
.ea-emoji{ display:block; font-size:56px; line-height:1.1; text-align:center }
.answer-btn.early-answer-btn.has-visual .early-answer-label{
  font-size:19px; font-weight:900; letter-spacing:.01em; text-transform:none;
}
.answer-btn.early-answer-btn.has-visual.correct{ background:linear-gradient(170deg,#e6fff2,#bff0d6) }
.answer-btn.early-answer-btn.has-visual.wrong{ background:linear-gradient(170deg,#ffeceb,#ffd3ce) }

/* Confettis : uniquement quand la réponse est juste du premier coup. */
.q-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.q-confetti i{
  position:absolute; top:-14px; width:9px; height:14px; border-radius:2px;
  left:calc(6% + var(--k) * 5.8%);
  background:hsl(calc(var(--k) * 37) 85% 60%);
  opacity:0;
}
.question-card.neo-skin:has(.answer-btn.correct):not(:has(.answer-btn.wrong)) .q-confetti i{
  animation:qFall 1.15s ease-in forwards;
  animation-delay:calc(var(--k) * 0.045s);
}
@keyframes qFall{
  0%{ opacity:0; transform:translateY(0) rotate(0deg) }
  12%{ opacity:1 }
  100%{ opacity:0; transform:translateY(190px) rotate(420deg) }
}

@media (max-width:560px){
  .ea-emoji{ font-size:46px }
  .answer-btn.early-answer-btn.has-visual .early-answer-label{ font-size:17px }
}
@media (prefers-reduced-motion:reduce){ .q-confetti i{ animation:none !important } }

/* Compteur de joueurs en ligne, version bandeau : compact, il doit tenir
   à côté des autres pastilles sans faire déborder l'en-tête. */
.online-players-pill.in-header{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:12.5px; font-weight:800; color:#cfe4ff;
  white-space:nowrap;
}
.online-players-pill.in-header strong{ color:#7edfff; font-size:13.5px }
.online-players-pill.in-header .online-globe{ font-size:13px }
@media (max-width:900px){
  .online-players-pill.in-header #onlinePlayersText{ display:none }
  .online-players-pill.in-header{ padding:7px 10px }
}

/* Quand l'application est déjà installée, la carte d'invitation se fait
   discrète au lieu de disparaître : le parent garde accès au guide. */
body.neo-installed .install-card{ opacity:.62 }
body.neo-installed .install-card button{ pointer-events:auto }

/* L'image de la consigne. aspect-ratio d'abord : sans lui le titre grandit
   au chargement et tout ce qui suit sursaute. */
.question-card.neo-skin h3 .q-pic{
  display:block;
  width:min(62%,240px);
  margin:10px auto 4px;
  aspect-ratio:320/220;
  height:auto;
  border-radius:18px;
  box-shadow:0 8px 18px -8px rgba(4,18,36,.6);
}
.question-card.neo-skin h3 .q-emoji{
  font-size:1.9em;
  line-height:1;
  vertical-align:-0.22em;
  display:inline-block;
}
@media (max-width:560px){
  .question-card.neo-skin h3 .q-pic{ width:min(74%,200px) }
  .question-card.neo-skin h3 .q-emoji{ font-size:1.7em }
}

@supports not (height: 1dvh){
/* ======================================================================
   v7.36 — Repli pour les navigateurs sans dvh (à lire en premier).
   Les cartes de réponse étaient dimensionnées en pourcentage de LARGEUR.
   Sur un téléphone en portrait la largeur est généreuse et la hauteur ne
   l'est pas : quatre cartes + la scène + la consigne + le message de
   résultat dépassaient l'écran, et l'enfant devait faire défiler pour
   voir s'il avait bon. On pilote donc tout par la HAUTEUR disponible.

   vh et non vh : sur iPhone, vh compte la barre d'adresse comme si elle
   était toujours masquée, ce qui redonne le débordement.
   ====================================================================== */
.ea-art{ display:flex; align-items:center; justify-content:center; width:100% }
.ea-pic{
  width:auto;
  height:clamp(64px, 15vh, 132px);
  max-width:100%;
  margin:0;
}
.ea-svg{
  width:auto;
  height:clamp(66px, 16vh, 140px);
  max-width:100%;
  margin:0;
}
.ea-emoji{ font-size:clamp(32px, 8vh, 56px) }

.answer-btn.early-answer-btn.has-visual{
  padding:8px 8px 9px;
  gap:4px;
}
.answer-btn.early-answer-btn.has-visual .early-answer-label{
  font-size:clamp(14px, 2.1vh, 19px);
}
.early-question-card .answer-grid{ gap:10px !important }

/* Écran court : la scène du haut et la consigne se resserrent, pour
   laisser la place aux réponses plutôt qu'au décor. */
@media (max-height:860px){
  .question-card.neo-skin{ padding-top:92px }
  .question-card.neo-skin::before{ height:104px }
  .q-stage{ height:100px }
  .q-mascot{ width:88px }
  .question-card.neo-skin h3{ font-size:clamp(17px, 2.6vh, 22px); margin:4px 0 6px }
  .question-card.neo-skin h3 .q-pic{ height:clamp(70px, 15vh, 150px); width:auto; margin:6px auto 2px }
  .early-question-tools{ margin:2px 0 8px }
  .feedback-box{ padding:10px 12px }
}
@media (max-height:720px){
  .question-card.neo-skin{ padding-top:78px }
  .question-card.neo-skin::before{ height:88px }
  .q-stage{ height:86px }
  .q-mascot{ width:74px }
  .ea-pic, .ea-svg{ height:clamp(56px, 13vh, 104px) }
}

}
/* ======================================================================
   v7.36 — Tenir dans l'écran.
   Les cartes de réponse étaient dimensionnées en pourcentage de LARGEUR.
   Sur un téléphone en portrait la largeur est généreuse et la hauteur ne
   l'est pas : quatre cartes + la scène + la consigne + le message de
   résultat dépassaient l'écran, et l'enfant devait faire défiler pour
   voir s'il avait bon. On pilote donc tout par la HAUTEUR disponible.

   dvh et non vh : sur iPhone, vh compte la barre d'adresse comme si elle
   était toujours masquée, ce qui redonne le débordement.
   ====================================================================== */
.ea-art{ display:flex; align-items:center; justify-content:center; width:100% }
.ea-pic{
  width:auto;
  height:clamp(64px, 15dvh, 132px);
  max-width:100%;
  margin:0;
}
.ea-svg{
  width:auto;
  height:clamp(66px, 16dvh, 140px);
  max-width:100%;
  margin:0;
}
.ea-emoji{ font-size:clamp(32px, 8dvh, 56px) }

.answer-btn.early-answer-btn.has-visual{
  padding:8px 8px 9px;
  gap:4px;
}
.answer-btn.early-answer-btn.has-visual .early-answer-label{
  font-size:clamp(14px, 2.1dvh, 19px);
}
.early-question-card .answer-grid{ gap:10px !important }

/* Écran court : la scène du haut et la consigne se resserrent, pour
   laisser la place aux réponses plutôt qu'au décor. */
@media (max-height:860px){
  .question-card.neo-skin{ padding-top:92px }
  .question-card.neo-skin::before{ height:104px }
  .q-stage{ height:100px }
  .q-mascot{ width:88px }
  .question-card.neo-skin h3{ font-size:clamp(17px, 2.6dvh, 22px); margin:4px 0 6px }
  .question-card.neo-skin h3 .q-pic{ height:clamp(70px, 15dvh, 150px); width:auto; margin:6px auto 2px }
  .early-question-tools{ margin:2px 0 8px }
  .feedback-box{ padding:10px 12px }
}
@media (max-height:720px){
  .question-card.neo-skin{ padding-top:78px }
  .question-card.neo-skin::before{ height:88px }
  .q-stage{ height:86px }
  .q-mascot{ width:74px }
  .ea-pic, .ea-svg{ height:clamp(56px, 13dvh, 104px) }
}

/* ======================================================================
   v7.36 — Des cartes de réponse toutes identiques.
   Certaines réponses ont une illustration, d'autres un pictogramme : les
   deux ne se dimensionnaient pas de la même façon, donc les cartes
   n'avaient ni la même hauteur ni le même équilibre, et le pictogramme
   flottait au milieu d'un grand vide.
   La zone d'image a maintenant une hauteur FIXE, commune aux trois cas,
   et le pictogramme reçoit sa propre tuile au même format que les
   illustrations.
   ====================================================================== */
.early-question-card .answer-grid{
  grid-auto-rows:1fr !important;   /* toutes les rangées à la même hauteur */
  align-items:stretch !important;
}
.answer-btn.early-answer-btn.has-visual{
  height:100%;
  justify-content:center;
}
.ea-art{
  height:clamp(70px, 15dvh, 132px);
  flex:0 0 auto;
}
.ea-pic,
.ea-svg{
  height:100%;
  width:auto;
  max-width:100%;
  margin:0;
}
.ea-emoji{
  display:flex; align-items:center; justify-content:center;
  height:100%;
  aspect-ratio:320/220;
  width:auto;
  border-radius:16px;
  background:linear-gradient(160deg,#eef6ff,#d3e6f7);
  box-shadow:inset 0 0 0 1px rgba(11,40,74,.09), 0 6px 14px -10px rgba(4,18,36,.5);
  font-size:clamp(30px, 7dvh, 54px);
  line-height:1;
}

@supports not (height: 1dvh){
  .ea-art{ height:clamp(70px, 15vh, 132px) }
  .ea-emoji{ font-size:clamp(30px, 7vh, 54px) }
}


/* ======================================================================
   v7.36 — En-tête allégé, découverte sans compte et espace parents.
   ====================================================================== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px}
.topbar-left{display:flex;align-items:center;gap:18px;min-width:0}
.topbar-left .brand{flex:0 1 auto;min-width:0}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap}
.profile-mini{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.14)}
.online-players-pill.in-header{gap:7px;padding:8px 13px;background:rgba(255,255,255,.075)}
.online-pulse{width:8px;height:8px;border-radius:50%;background:#4ee09a;box-shadow:0 0 0 4px rgba(78,224,154,.12)}

.discovery-banner{width:min(1180px,calc(100% - 32px));margin:0 auto 20px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:linear-gradient(135deg,rgba(39,126,190,.16),rgba(92,80,205,.12));border:1px solid rgba(111,211,255,.18);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.discovery-copy{display:flex;align-items:center;gap:12px;min-width:0}.discovery-icon{font-size:30px}.discovery-copy small{display:block;color:#79dfff;font-size:10px;font-weight:900;letter-spacing:.08em}.discovery-copy strong{display:block;font-size:16px;margin:2px 0}.discovery-copy p{margin:0;color:#a9bfd6;font-size:12px;line-height:1.4}
.guest-age-picker{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:#08264a;border:1px solid #1f507c}.guest-age-picker span{font-size:11px;font-weight:900;color:#a9c5dc}.guest-age-picker select{border:0;border-radius:9px;background:#123d69;color:#fff;padding:7px 9px;font-weight:900;outline:none}
.discovery-account-btn{border:0;border-radius:13px;padding:11px 14px;background:linear-gradient(135deg,#1f90d2,#6d60df);color:#fff;font-weight:900;cursor:pointer;white-space:nowrap}

.parent-guest-view>p{color:#acc3d9;line-height:1.55}.parent-guest-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.parent-guest-benefits>div{background:#0a294f;border:1px solid #184b78;border-radius:17px;padding:14px 10px}.parent-guest-benefits span{display:block;font-size:27px}.parent-guest-benefits b{display:block;margin-top:5px}.parent-guest-benefits small{display:block;color:#9fb5cd;margin-top:4px;line-height:1.35}.parent-guest-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 18px}
.premium-soon-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;text-align:left;padding:15px;border-radius:19px;background:linear-gradient(135deg,rgba(255,197,64,.15),rgba(114,87,223,.14));border:1px solid rgba(255,211,96,.25)}.premium-star{font-size:32px}.premium-soon-card small{display:block;color:#ffd76a;font-size:10px;font-weight:1000;letter-spacing:.09em}.premium-soon-card strong{display:block;font-size:17px;margin:2px 0}.premium-soon-card p{margin:0;color:#aac0d6;font-size:12px;line-height:1.4}.premium-soon-card button{border:1px solid rgba(255,218,113,.35);background:#173d68;color:#fff;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer}.premium-dashboard-card{margin:16px 0}

/* Dissuasion de copie visuelle : ce n'est pas une protection cryptographique. */
.app-shell{-webkit-user-select:none;user-select:none}.app-shell input,.app-shell textarea,.app-shell select{-webkit-user-select:text;user-select:text}.brand-logo,.footer-brand img{-webkit-user-drag:none;user-drag:none}

@media(max-width:900px){
  .topbar{gap:10px}.topbar-left{gap:10px}.brand-copy{display:none}.online-players-pill.in-header #onlinePlayersText{display:none}.header-actions{gap:7px}.install-header-btn b,.parent-btn span{display:none}.install-header-btn,.parent-btn{min-width:42px;padding:10px}.profile-mini{width:40px;height:40px}
  .discovery-banner{grid-template-columns:1fr auto}.discovery-account-btn{grid-column:1/-1;width:100%}
}
@media(max-width:560px){
  .topbar{height:auto;min-height:68px;padding:9px 10px}.brand-logo{width:58px;max-height:48px;object-fit:contain}.topbar-left{gap:7px}.online-players-pill.in-header{padding:7px 8px}.score-chip{padding:8px 10px}.profile-mini{width:38px;height:38px;font-size:19px}.header-actions{gap:5px}
  .discovery-banner{width:calc(100% - 22px);grid-template-columns:1fr;gap:10px;padding:13px}.guest-age-picker{justify-content:space-between}.parent-guest-benefits{grid-template-columns:1fr}.parent-guest-actions{grid-template-columns:1fr}.premium-soon-card{grid-template-columns:auto 1fr}.premium-soon-card button{grid-column:1/-1;width:100%}
}


/* ======================================================================
   v7.36 — Version dans le bandeau + interface mobile sans zoom.
   ====================================================================== */
.header-version-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:5px 9px;border-radius:999px;
  border:1px solid rgba(111,211,255,.22);
  background:rgba(20,71,118,.58);color:#9fe7ff;
  font-size:11px;font-weight:1000;letter-spacing:.02em;white-space:nowrap;
}
@media(max-width:560px){
  .header-version-pill{min-height:28px;padding:4px 7px;font-size:10px}
  .topbar-left{gap:5px}
}
@media(max-width:390px){
  .brand-logo{width:52px}
  .online-players-pill.in-header{padding:6px 7px;gap:5px}
  .header-version-pill{padding:4px 6px}
  .score-chip{padding:7px 8px}
  .install-header-btn,.parent-btn{min-width:38px;padding:9px}
  .profile-mini{width:36px;height:36px}
}

/* Le zoom tactile est désactivé sur l’interface smartphone.
   Le défilement vertical/horizontal reste disponible. */
@media(max-width:900px) and (pointer:coarse){
  html,body{touch-action:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
}

/* ======================================================================
   v7.36 — Les listes d’activités défilent seules dans leur fenêtre.
   Le contenu de l’accueil reste immobile derrière Lecture / Maths / etc.
   ====================================================================== */
html.game-modal-open,
body.game-modal-open{
  overflow:hidden !important;
  overscroll-behavior:none;
}
body.game-modal-open{
  position:fixed;
  left:0;
  right:0;
  width:100%;
}
#gameModal{
  overflow:hidden;
  overscroll-behavior:none;
}
#gameModal .game-modal-card{
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-gutter:stable;
}
@media(max-width:760px){
  #gameModal{padding:10px;align-items:center}
  #gameModal .game-modal-card{
    width:100%;
    max-height:calc(100dvh - 20px);
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
  }
}


/* ======================================================================
   v7.36 — Ambiance saisonnière animée + date du jour style tableau.
   Les thèmes modifient seulement le décor général. Les cartes, menus et jeux
   conservent exactement leur structure et leurs couleurs fonctionnelles.
   ====================================================================== */
body{
  --season-accent:#6fdcff;
  --season-glow-1:rgba(78,123,255,.22);
  --season-glow-2:rgba(109,34,255,.18);
  --season-bg-top:#0b2a54;
  --season-bg-bottom:#06162f;
  --season-topbar:rgba(3,18,40,.78);
  background:
    radial-gradient(circle at 10% 5%,var(--season-glow-1),transparent 22rem),
    radial-gradient(circle at 90% 18%,var(--season-glow-2),transparent 20rem),
    linear-gradient(180deg,var(--season-bg-top),var(--season-bg-bottom));
  background-attachment:fixed;
  transition:background .5s ease;
}
body[data-season="rentree"]{
  --season-accent:#ffd45f;--season-glow-1:rgba(70,153,255,.25);--season-glow-2:rgba(255,204,82,.13);
  --season-bg-top:#0c315e;--season-bg-bottom:#07182e;--season-topbar:rgba(4,24,49,.82);
}
body[data-season="automne"]{
  --season-accent:#ffb05c;--season-glow-1:rgba(221,113,46,.20);--season-glow-2:rgba(121,65,139,.18);
  --season-bg-top:#332442;--season-bg-bottom:#11182a;--season-topbar:rgba(28,19,39,.84);
}
body[data-season="noel"]{
  --season-accent:#83e6d0;--season-glow-1:rgba(34,167,143,.20);--season-glow-2:rgba(218,68,92,.15);
  --season-bg-top:#123e4e;--season-bg-bottom:#071c2a;--season-topbar:rgba(5,31,38,.86);
}
body[data-season="hiver"]{
  --season-accent:#a9e6ff;--season-glow-1:rgba(109,198,255,.25);--season-glow-2:rgba(177,164,255,.14);
  --season-bg-top:#173f66;--season-bg-bottom:#08182e;--season-topbar:rgba(7,29,51,.84);
}
body[data-season="printemps"]{
  --season-accent:#9ce9a8;--season-glow-1:rgba(86,204,138,.18);--season-glow-2:rgba(232,132,190,.14);
  --season-bg-top:#16484c;--season-bg-bottom:#071f31;--season-topbar:rgba(7,37,43,.84);
}
body[data-season="ete"]{
  --season-accent:#ffe071;--season-glow-1:rgba(54,197,238,.22);--season-glow-2:rgba(255,193,66,.15);
  --season-bg-top:#0e516b;--season-bg-bottom:#06223b;--season-topbar:rgba(5,35,53,.84);
}
body[data-season] .topbar{
  background:var(--season-topbar);
  border-bottom-color:color-mix(in srgb,var(--season-accent) 24%,transparent);
}
body[data-season] .eyebrow{color:var(--season-accent)!important}

/* Couche d'animation. Elle ne capte jamais les clics/touches. */
.seasonal-decor{
  position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  opacity:.72;transition:opacity .35s ease;contain:layout paint style;
}
.seasonal-particle{
  position:absolute;left:var(--left);top:-14vh;display:block;line-height:1;
  font-size:var(--size);opacity:var(--opacity);will-change:transform;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.16));
  animation:neoSeasonFall var(--duration) linear var(--delay) infinite;
  user-select:none;
}
.particle-noel,.particle-hiver{filter:drop-shadow(0 0 5px rgba(220,248,255,.42));animation-name:neoSnowFall}
.particle-automne{animation-name:neoLeafFall}
.particle-rentree{animation-name:neoSchoolFall}
.particle-printemps{animation-name:neoPetalFall}
.particle-ete{animation-name:neoSummerDrift}

@keyframes neoSnowFall{
  0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}
  7%{opacity:var(--opacity)}
  45%{transform:translate3d(var(--drift55),46vh,0) rotate(45deg)}
  78%{transform:translate3d(var(--driftNeg20),88vh,0) rotate(125deg)}
  100%{transform:translate3d(var(--drift),118vh,0) rotate(var(--spin));opacity:var(--opacity)}
}
@keyframes neoLeafFall{
  0%{transform:translate3d(0,-12vh,0) rotate(-20deg);opacity:0}
  8%{opacity:var(--opacity)}
  28%{transform:translate3d(var(--drift),26vh,0) rotate(80deg)}
  55%{transform:translate3d(var(--driftNeg55),58vh,0) rotate(190deg)}
  80%{transform:translate3d(var(--drift65),90vh,0) rotate(285deg)}
  100%{transform:translate3d(var(--driftNeg20),118vh,0) rotate(var(--spin));opacity:var(--opacity)}
}
@keyframes neoSchoolFall{
  0%{transform:translate3d(0,-13vh,0) rotate(-8deg);opacity:0}
  8%{opacity:var(--opacity)}
  35%{transform:translate3d(var(--drift55),33vh,0) rotate(7deg)}
  65%{transform:translate3d(var(--driftNeg25),72vh,0) rotate(-6deg)}
  100%{transform:translate3d(var(--drift),118vh,0) rotate(var(--spin));opacity:var(--opacity)}
}
@keyframes neoPetalFall{
  0%{transform:translate3d(0,-12vh,0) rotate(0) scale(.86);opacity:0}
  7%{opacity:var(--opacity)}
  33%{transform:translate3d(var(--drift),34vh,0) rotate(90deg) scale(1)}
  66%{transform:translate3d(var(--driftNeg40),76vh,0) rotate(180deg) scale(.92)}
  100%{transform:translate3d(var(--drift75),118vh,0) rotate(var(--spin)) scale(1);opacity:var(--opacity)}
}
@keyframes neoSummerDrift{
  0%{transform:translate3d(0,-12vh,0) rotate(-4deg);opacity:0}
  9%{opacity:var(--opacity)}
  35%{transform:translate3d(var(--drift35),30vh,0) rotate(4deg)}
  70%{transform:translate3d(var(--driftNeg35),76vh,0) rotate(-3deg)}
  100%{transform:translate3d(var(--drift20),118vh,0) rotate(5deg);opacity:var(--opacity)}
}
@keyframes neoSeasonFall{
  from{transform:translate3d(0,-12vh,0) rotate(0);opacity:0}
  8%{opacity:var(--opacity)}
  to{transform:translate3d(var(--drift),118vh,0) rotate(var(--spin));opacity:var(--opacity)}
}

/* Quelques éléments arrivés au sol donnent l'impression que le décor vit. */
.seasonal-ground{
  position:absolute;left:2%;right:2%;bottom:84px;height:32px;
  display:flex;align-items:flex-end;justify-content:space-around;
  opacity:.50;filter:saturate(.88);
}
.seasonal-ground span{display:block;font-size:clamp(17px,2vw,26px);animation:neoGroundBreathe 4.6s ease-in-out var(--ground-delay) infinite alternate}
@keyframes neoGroundBreathe{from{transform:translateY(4px) rotate(-3deg)}to{transform:translateY(0) rotate(3deg)}}
.ground-noel,.ground-hiver{opacity:.30;filter:brightness(1.15)}
.ground-ete{opacity:.34}

/* Noël : une fine couche de neige se dépose sur le haut des cartes d'activité. */
body[data-season="noel"]:not([data-season-animation="off"]) .tile::after,
body[data-season="noel"]:not([data-season-animation="off"]) .game-choice::after{
  content:"";position:absolute;z-index:12;pointer-events:none;left:-2%;right:-2%;top:-2px;height:17px;
  background:
    radial-gradient(18px 9px at 6% 8px,rgba(255,255,255,.95) 0 61%,transparent 64%),
    radial-gradient(26px 11px at 20% 5px,rgba(248,253,255,.96) 0 60%,transparent 63%),
    radial-gradient(22px 10px at 38% 8px,rgba(255,255,255,.95) 0 61%,transparent 64%),
    radial-gradient(30px 12px at 58% 5px,rgba(247,253,255,.97) 0 60%,transparent 63%),
    radial-gradient(21px 10px at 77% 8px,rgba(255,255,255,.94) 0 61%,transparent 64%),
    radial-gradient(27px 11px at 94% 5px,rgba(248,253,255,.96) 0 60%,transparent 63%);
  filter:drop-shadow(0 3px 3px rgba(10,36,55,.20));
  transform-origin:top center;animation:neoSnowSettle 1.35s ease-out both;
}
@keyframes neoSnowSettle{from{opacity:0;transform:translateY(-8px) scaleY(.35)}to{opacity:1;transform:translateY(0) scaleY(1)}}

/* Hiver : même principe, beaucoup plus discret que Noël. */
body[data-season="hiver"]:not([data-season-animation="off"]) .tile::after{
  content:"";position:absolute;z-index:12;pointer-events:none;left:4%;right:4%;top:0;height:6px;border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,rgba(242,252,255,.82),rgba(215,242,255,.40));opacity:.55;
}

#contenu,.site-footer,.bottom-nav{position:relative;z-index:1}
.topbar{z-index:20}.bottom-nav{z-index:30}.modal{z-index:100}

/* Tableau de la date : petit, lisible, volontairement différent des cartes. */
.today-board{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  margin:0 0 13px 2px;padding:8px 14px 9px;border-radius:8px;
  border:4px solid #95673e;background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 36%),
    linear-gradient(180deg,#254f42,#173a31);
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.06);
  color:#fbf7dc;font-family:"Comic Sans MS","Chalkboard SE",ui-rounded,system-ui,sans-serif;
  font-size:14px;font-weight:800;letter-spacing:.015em;text-transform:lowercase;
  transform:rotate(-.35deg);
}
.today-board::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1px;
  background:rgba(255,255,255,.18);border-radius:99px;
}
.today-board-icon{font-size:16px;filter:saturate(.75)}

/* Réglages parents du thème et de son intensité. */
.seasonal-settings-panel{border-color:color-mix(in srgb,var(--season-accent) 22%,rgba(255,255,255,.08))!important}
.season-theme-picker{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:11px 12px;border-radius:14px;background:rgba(5,28,54,.62);border:1px solid rgba(255,255,255,.08)}
.season-theme-picker+ .season-theme-picker{margin-top:9px}
.season-theme-picker>span{font-size:12px;font-weight:900;color:#bdd0e4}
.season-theme-picker select{min-width:min(290px,65%);border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#123b64;color:white;padding:10px 12px;font-weight:800;outline:none}
.season-theme-status{margin-top:10px;color:var(--season-accent);font-size:11px;font-weight:900;text-align:right;line-height:1.4}

body[data-season-animation="reduced"] .seasonal-decor{opacity:.48}
body[data-season-animation="reduced"] .seasonal-particle{filter:none}
body[data-season-animation="reduced"] .seasonal-ground{opacity:.22}
body[data-season-animation="off"] .seasonal-decor{display:none}

@media(max-width:760px){
  .seasonal-decor{opacity:.57}
  .seasonal-ground{bottom:80px;height:23px;opacity:.28}
  .seasonal-ground span{font-size:17px}
  .today-board{font-size:12px;padding:6px 10px 7px;margin-bottom:11px;border-width:3px}
  .today-board-icon{font-size:14px}
  .season-theme-picker{align-items:stretch;flex-direction:column;gap:8px}
  .season-theme-picker select{width:100%;min-width:0;max-width:none}
  .season-theme-status{text-align:left}
  body[data-season="noel"]:not([data-season-animation="off"]) .tile::after{height:12px;opacity:.88}
}
@media(prefers-reduced-motion:reduce){
  body:not([data-season-animation="full"]) .seasonal-particle,
  body:not([data-season-animation="full"]) .seasonal-ground span{animation-duration:18s!important}
  body{transition:none}
}


/* Deux nouvelles matières : Temps & Espace, Vie quotidienne.
   Mêmes proportions et mêmes effets que les six tuiles existantes. */
.tile.tile-teal{ background:linear-gradient(150deg,#15818f,#0c5a6b 58%,#073d4c) }
.tile.tile-rose{ background:linear-gradient(150deg,#b8437a,#8c2b5e 58%,#5f1a41) }
.time-art,.daily-art{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px }
.time-art .compass{ font-size:58px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)) }
.time-art .clockface{ font-size:38px; transform:translateY(10px); filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)) }
.daily-art .heartface{ font-size:58px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)) }
.daily-art .handshake{ font-size:38px; transform:translateY(10px); filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)) }

/* ======================================================================
   v7.36 — Coût d'affichage.
   Le voile de matière utilisait mix-blend-mode sur CHAQUE bouton de
   réponse. Ce mode force le navigateur à recomposer la zone à chaque
   repeinture : sur une grille de six boutons animés, cela se sent sur une
   tablette d'entrée de gamme. On le garde sur les grandes surfaces, où
   l'effet est visible, et on le retire sur les petits éléments, où il ne
   se voyait pas.
   ====================================================================== */
.answer-btn::before,
.nm-answer::before{
  mix-blend-mode:normal;
  opacity:.34;
  background-image:radial-gradient(132% 104% at 8% -22%, rgba(255,255,255,.30), rgba(255,255,255,0) 56%);
}

/* Les animations permanentes tournent même hors de l'écran. On les met en
   pause quand une fenêtre de jeu est ouverte : l'accueil n'est plus visible. */
body.game-modal-open .nm-flowers g,
body.game-modal-open .nm-clouds,
body.game-modal-open .nm-sun{ animation-play-state:paused }

/* Indique au navigateur ce qui va bouger : il prépare la couche à l'avance
   au lieu de la recalculer au premier mouvement. */
.dg-piece,.jz-piece-holder{ will-change:left, top }
.nm-char{ will-change:transform }

/* ======================================================================
   v7.36 — Finition appliquée à TOUS les jeux.
   Les boutons repérés par neo-polish.js reçoivent le même relief que ceux
   du rendu commun, quel que soit le jeu qui les a créés.
   ====================================================================== */
.neo-poli{
  border:0;
  border-radius:18px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -4px 0 rgba(4,20,42,.15),
    0 5px 0 rgba(4,20,42,.20),
    0 10px 18px -12px rgba(4,20,42,.65);
  transition:transform .12s ease, box-shadow .12s ease;
}
.neo-poli:active:not([disabled]):not([data-locked]){
  transform:translateY(4px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 1px 0 rgba(4,20,42,.2);
}
.neo-poli.has-visual{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:8px;
  background:linear-gradient(170deg,#ffffff,#e9f2fb);
  color:#0d3358;
}
.neo-poli.has-visual .early-answer-label{
  font-size:clamp(13px, 2dvh, 18px); font-weight:900;
}

/* --- Record personnel --- */
.neo-record{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:6px 12px; border-radius:999px;
  background:linear-gradient(135deg,#ffd34a,#ff9c2e); color:#4a2f00;
  font-weight:900; font-size:13px;
  animation:qPop .45s ease;
}

/* v7.36 — accueil et correction des débordements mobiles. */
html,body{touch-action:auto}
.hero h2{font-size:clamp(1.5rem,3vw,2.4rem);margin:12px 0}
.welcome-screen{display:grid;grid-template-columns:minmax(160px,320px) 1fr;align-items:center;gap:32px;max-width:1120px;margin:28px auto;padding:32px;background:linear-gradient(135deg,#103b65,#092341);border:1px solid #356284;border-radius:28px}
.welcome-screen img{width:100%;height:auto;object-fit:contain}
.welcome-screen h1{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.15}
.welcome-screen p{font-size:1rem;line-height:1.65;color:#cee5fb}
.welcome-screen a{color:#9ce7ff}
.welcome-primary{display:block;min-height:60px;padding:16px 28px;border:0;border-radius:18px;background:#ffcf51;color:#173351;font-size:1.3rem;font-weight:900;cursor:pointer}
.welcome-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.welcome-actions button{padding:12px;border:1px solid #6397bf;border-radius:12px;background:#173d62;color:white;font:inherit;cursor:pointer}
.neo-welcome #contenu>section:not(#welcomeScreen){display:none!important}
.subject-row{grid-template-columns:minmax(0,1fr) minmax(50px,1fr) auto}
.subject-row-head{min-width:0;overflow-wrap:anywhere}
.brand-logo,.footer-brand img,.legal-logo img{object-fit:contain;image-rendering:auto;flex-shrink:0}
:focus-visible{outline:3px solid #ffcf51;outline-offset:4px}
@media(max-width:760px){
 .welcome-screen{grid-template-columns:1fr;margin:16px 12px;padding:22px;gap:6px}
 .welcome-screen>img{width:190px;max-height:150px;justify-self:center}
 .welcome-primary{width:100%}.welcome-actions button{flex:1 1 150px}
 .subject-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;font-size:14px}
 .subject-row-head{grid-column:1/-1}.subject-bar{min-width:0}
 .topbar{flex-wrap:wrap;gap:6px;padding-top:max(10px,env(safe-area-inset-top));height:auto}
 .topbar-left{flex:1 1 auto;min-width:0}.header-actions{flex-shrink:0}
 .hero,.player-strip{min-width:0}.mini-stats{flex-wrap:wrap}
 .game-modal-card,.parent-modal-card,.profile-modal-card{min-width:0;max-width:100%}
 input,select,textarea{font-size:16px}
}
@media(max-width:390px){.header-actions{margin-left:auto}.welcome-screen{padding:18px}.score-chip{padding:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

.welcome-screen>img{max-width:270px;justify-self:center}.brand-logo{height:auto}.footer-brand img{height:auto;max-width:180px}

.subject-row-head small{font-size:14px;line-height:1.5}.subject-row-head span{font-size:15px}


/* ===== v7.41 — Navigation mobile simplifiée + fermeture tactile fiable ===== */
/* La navigation du bas a été retirée du HTML : le contenu utilise désormais tout l'écran. */
body{padding-bottom:env(safe-area-inset-bottom,0px)!important}
#contenu,.site-footer{position:relative;z-index:1}
.seasonal-ground{bottom:14px}

/* Boutons de fermeture : grande cible tactile, au-dessus de tous les jeux/décors. */
.modal .close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:10000!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
  font-size:31px!important;
  line-height:1!important;
}
.modal-card{isolation:isolate}
#gameModal .game-modal-card>.close,
#parentModal .parent-dashboard-modal>.close,
#statsModal .stats-card>.close,
#installModal .install-modal-card>.close,
#accountModal .account-modal-card>.close,
#profileModal .profile-modal-card>.close{z-index:10001!important}

/* Le compteur d'étoiles du haut remplace l'accès de la barre inférieure. */
.header-actions .score-chip{cursor:pointer;user-select:none;touch-action:manipulation}
.header-actions .score-chip:active{transform:scale(.96)}

@media(max-width:780px){
  body{padding-bottom:env(safe-area-inset-bottom,0px)!important}
  .site-footer{margin-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .seasonal-ground{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .modal{padding-top:max(12px,env(safe-area-inset-top,0px))!important}
  .modal .close{top:10px!important;right:10px!important}
}

/* ===== v7.41 — Choix du type de calcul (Calcul éclair) ===== */
.calc-ops{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0 12px}
.calc-ops.hidden{display:none}
.calc-op{min-width:56px;min-height:44px;padding:6px 16px;border-radius:14px;
  border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  color:#eaf2ff;font-size:19px;font-weight:800;line-height:1;cursor:pointer;
  touch-action:manipulation;transition:transform .12s ease,background .12s ease}
.calc-op:active{transform:scale(.94)}
.calc-op.active{background:#ffc12c;border-color:#ffc12c;color:#23262e}
.calc-op:focus-visible{outline:3px solid #7fd4ff;outline-offset:2px}
@media (max-width:780px){
  .calc-op{min-width:48px;padding:6px 12px;font-size:18px}
}

/* ===== v7.41 — Bouton « Passer » commun à toutes les épreuves ===== */
.skip-zone{display:flex;justify-content:center;margin:10px 0 2px}
.skip-zone.hidden{display:none}
.skip-btn{min-height:44px;padding:9px 18px;border-radius:14px;
  border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  color:#b9cbe6;font-size:15px;font-weight:700;cursor:pointer;
  touch-action:manipulation;transition:transform .12s ease,color .12s ease}
.skip-btn:hover{color:#eaf2ff}
.skip-btn:active{transform:scale(.96)}
.skip-btn:focus-visible{outline:3px solid #7fd4ff;outline-offset:2px}

/* ===== v7.41 — Cadre des jeux ludiques =====
   .playful-card et .playful-kicker étaient utilisées par le puzzle, le taquin
   et les chiffres rigolos sans qu'aucune règle ne les habille : le contenu
   flottait au milieu de la fenêtre, sans cadre ni respiration. */
.playful-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:min(820px,100%);margin:0 auto;padding:16px 14px 18px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 30px rgba(0,0,0,.22)
}
.playful-kicker{
  display:inline-block;margin-bottom:2px;padding:5px 14px;border-radius:999px;
  background:rgba(127,212,255,.14);color:#8fd4ff;
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase
}
@media (max-width:780px){
  .playful-card{padding:12px 6px 14px;border-radius:18px;gap:4px}
  .playful-kicker{font-size:11px;padding:4px 11px}
}

/* ===== v7.41 — Série de jours et boutique ===== */
.hero-side{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.streak-band{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,140,40,.22),rgba(255,193,44,.12));
  border:1px solid rgba(255,170,60,.3)}
.streak-band.hidden{display:none}
.streak-band b{font-size:17px}
.streak-band small{color:#e7d3b5;font-size:12px}
.streak-flame{font-size:22px;line-height:1}
.shop-btn{border:0;border-radius:16px;padding:13px 18px;cursor:pointer;font-weight:800;font-size:16px;
  color:#23262e;background:linear-gradient(135deg,#ffd465,#ffb02e);
  box-shadow:0 8px 22px rgba(255,176,46,.28);transition:transform .12s ease}
.shop-btn:active{transform:scale(.96)}
.hero-compagnon{font-size:26px;margin-left:2px}

.shop-card{width:min(680px,96vw);text-align:center}
.shop-balance{font-size:18px;font-weight:900;color:#ffc12c;margin:6px 0 2px}
.shop-note{font-size:13px;color:var(--muted);margin:0 0 10px}
.shop-section{margin:16px 0 8px;font-size:15px;text-align:left;color:#cfe0f5}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;
  border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.shop-item.owned{border-color:rgba(127,212,255,.35)}
.shop-item strong{font-size:13px}
.shop-emoji{font-size:34px;line-height:1}
.shop-action{min-height:36px;border:0;border-radius:12px;padding:7px 12px;cursor:pointer;
  font-weight:800;font-size:13px;background:#1d4b86;color:#eaf2ff}
.shop-action.buy{background:linear-gradient(135deg,#ffd465,#ffb02e);color:#23262e}
.shop-state{font-size:12px;font-weight:800;color:var(--muted)}
.shop-state.equipped{color:#7fe0a8}

/* Décors achetables.
   Le fond de la page est peint à partir des variables --season-*, pas de
   --bg/--bg2 : c'est celles-là qu'il faut redéfinir, sinon rien ne bouge.
   Ces règles sont placées après le bloc des saisons pour l'emporter. */
body.decor-foret{
  --season-glow-1:rgba(86,204,138,.20);--season-glow-2:rgba(180,230,120,.12);
  --season-bg-top:#124a24;--season-bg-bottom:#07200f;--season-topbar:rgba(6,32,15,.84);
  --season-accent:#9ce9a8;
}
body.decor-ocean{
  --season-glow-1:rgba(64,180,255,.24);--season-glow-2:rgba(40,230,210,.14);
  --season-bg-top:#0a4a6b;--season-bg-bottom:#04182c;--season-topbar:rgba(4,26,44,.84);
  --season-accent:#7fe3ff;
}
body.decor-couchant{
  --season-glow-1:rgba(255,140,60,.24);--season-glow-2:rgba(214,70,140,.16);
  --season-bg-top:#7a3324;--season-bg-bottom:#2a0f24;--season-topbar:rgba(42,15,36,.86);
  --season-accent:#ffc07a;
}
body.decor-espace{
  --season-glow-1:rgba(130,90,255,.26);--season-glow-2:rgba(80,200,255,.14);
  --season-bg-top:#241a4d;--season-bg-bottom:#05040f;--season-topbar:rgba(8,6,24,.88);
  --season-accent:#c3aaff;
}

@media (max-width:780px){
  .hero-side{flex-direction:row;flex-wrap:wrap}
  .streak-band{flex:1 1 100%}
  .shop-btn{flex:1 1 100%}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
  .shop-emoji{font-size:28px}
}

/* Le bouton boutique dans la barre du haut suit le style des autres actions. */
.shop-btn-top{display:flex;align-items:center;gap:7px;padding:12px 15px;border-radius:16px;font-size:15px}
@media (max-width:900px){ .shop-btn-top b{display:none} .shop-btn-top{padding:12px 13px} }