/* =========================================================
   Kit commun des jeux — thème, composants et écrans partagés
   ========================================================= */
:root{
  --bg:#CDE9F2; --bg-deep:#A9D6E6; --surface:#FFFFFF; --ink:#1F2F5C; --muted:#50618A;
  --face:#FFFFFF; --face-ink:#1F2F5C; --rim:#1F2F5C;
  --hour:#E23D2E; --minute:#2A6FDB; --sun:#FFC43D; --ok:#2FA866; --no:#E23D2E; --orange:#F29A1F; --violet:#8B5CF6;
  --shadow:0 5px 0 rgba(31,47,92,.18);
  --font:"Baloo 2","Arial Rounded MT Bold",ui-rounded,"Trebuchet MS","DejaVu Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10203A; --bg-deep:#0A162A; --surface:#1C3052; --ink:#EAF2FF; --muted:#A9BBDB;
    --face:#F6F8FC; --face-ink:#1F2F5C; --rim:#7FB2FF;
    --hour:#FF5A48; --minute:#4F8FFF; --ok:#3CC47A; --no:#FF5A48;
    --shadow:0 5px 0 rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#10203A; --bg-deep:#0A162A; --surface:#1C3052; --ink:#EAF2FF; --muted:#A9BBDB;
  --face:#F6F8FC; --face-ink:#1F2F5C; --rim:#7FB2FF;
  --hour:#FF5A48; --minute:#4F8FFF; --ok:#3CC47A; --no:#FF5A48;
  --shadow:0 5px 0 rgba(0,0,0,.35);
}
/* Habillages (débloqués avec les étoiles, communs à tous les jeux) */
[data-skin="soleil"]{--face:#FFF4CC;--rim:#F29A1F;--face-ink:#5A3A00}
[data-skin="ocean"]{--face:#E2F5FF;--rim:#0E7FA8;--face-ink:#0B3D5C}
[data-skin="foret"]{--face:#E8F6E1;--rim:#2F7D3A;--face-ink:#1E4A24}
[data-skin="bonbon"]{--face:#FFE8F3;--rim:#D6408B;--face-ink:#6B1240}
[data-skin="espace"]{--face:#1B1740;--rim:#7C5CFF;--face-ink:#FFFFFF}
/* Habillages de saison (Cabrioles) */
[data-skin="citrouille"]{--face:#FFE3C2;--rim:#E2700F;--face-ink:#4A2200}
[data-skin="sapin"]{--face:#E4F4E4;--rim:#C6282B;--face-ink:#14532D}
[data-skin="neige"]{--face:#F2F8FF;--rim:#6FA8DC;--face-ink:#1E3A5F}
[data-skin="fleurs"]{--face:#FFF0F7;--rim:#EC4899;--face-ink:#5B1A3A}
[data-skin="lac"]{--face:#DFF6F4;--rim:#0F9C9A;--face-ink:#0B4744}
[data-skin="nuit"]{--face:#14203F;--rim:#FFC43D;--face-ink:#FFF3C4}
/* Habillages au-delà de 100 étoiles ; Arc-en-ciel et Diamant sont animés */
@property --rim{syntax:"<color>";inherits:true;initial-value:#1F2F5C}
@property --owl-body{syntax:"<color>";inherits:true;initial-value:#8B5CF6}
@property --owl-ear{syntax:"<color>";inherits:true;initial-value:#6B45B8}
[data-skin="arcenciel"]{--face:#FFFFFF;--rim:#E23D2E;--face-ink:#1F2F5C;animation:arcEnCiel 9s linear infinite}
[data-skin="or"]{--face:#FFF6D6;--rim:#D4A017;--face-ink:#6B4A00}
[data-skin="dragon"]{--face:#E6F6DC;--rim:#2E8B57;--face-ink:#8A1F1F}
[data-skin="licorne"]{--face:#FFF0FA;--rim:#C77DFF;--face-ink:#7A3E9D}
[data-skin="diamant"]{--face:#EEF9FF;--rim:#7FD8FF;--face-ink:#1C4E80;animation:diamant 2.4s ease-in-out infinite}
@keyframes arcEnCiel{0%,100%{--rim:#E23D2E;--owl-body:#F25C54;--owl-ear:#C23B33}17%{--rim:#F2811D;--owl-body:#F7A440;--owl-ear:#D4831A}33%{--rim:#FFC43D;--owl-body:#F2C531;--owl-ear:#C99A00}
  50%{--rim:#2FA866;--owl-body:#4CC07A;--owl-ear:#2F7D3A}67%{--rim:#2A6FDB;--owl-body:#4D8DF0;--owl-ear:#1E4FA3}83%{--rim:#8B5CF6;--owl-body:#9C6BFF;--owl-ear:#6B45B8}}
@keyframes diamant{0%,100%{--rim:#7FD8FF;--owl-body:#7FD8FF}50%{--rim:#D9C8FF;--owl-body:#C5B3FF}}
@media (prefers-reduced-motion: reduce){[data-skin="arcenciel"],[data-skin="diamant"]{animation:none}}

/* ---------- Base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 60% at 50% 112%, var(--bg-deep) 0 45%, transparent 46%), var(--bg);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--font);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;
}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;touch-action:manipulation}
button:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
button:disabled{cursor:default}
h1,h2{margin:0;line-height:1.1}
.screen{min-height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen[hidden]{display:none}
/* Pendant le chargement, les écrans restent invisibles jusqu'au choix du premier (accueil, pause, réglages…) :
   pas d'éclair de page à moitié dessinée. Sécurité : ils réapparaissent seuls après 1,5 s. */
html.kit-attente .screen{animation:kitAttente 1.5s step-end}
@keyframes kitAttente{from,to{visibility:hidden}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes pulse{50%{transform:scale(1.25)}}

/* ---------- Barre du haut ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px}
.topRight{display:flex;gap:8px;align-items:center}
.brand{display:flex;align-items:center;gap:6px;font-weight:800;font-size:1.8rem;line-height:1}
.brand .owl{width:42px}
.chip{background:var(--surface);border-radius:999px;padding:3px 12px;font-weight:800;font-size:1.25rem;box-shadow:var(--shadow);white-space:nowrap}
.chip[hidden]{display:none}
.streak{background:var(--orange);color:#fff}
.goal{background:var(--ok);color:#fff}
.streak.pulse{animation:pulse .5s}
.iconbtn{width:50px;height:50px;border-radius:50%;background:var(--surface);font-size:1.5rem;box-shadow:var(--shadow);flex:none;display:grid;place-items:center}
.gear{opacity:.5;width:42px;height:42px;font-size:1.2rem}
.gear.holding{opacity:1;animation:hold 1.5s linear}
@keyframes hold{to{transform:rotate(180deg)}}
.dots{display:flex;gap:7px;flex:1;justify-content:center}
.dots span{width:15px;height:15px;border-radius:50%;background:var(--surface);opacity:.6}
.dots span.done{background:var(--sun);opacity:1}
.dots span.now{outline:3px solid var(--ink);opacity:1}

/* ---------- Chouette et bulle ---------- */
.owl{display:block;width:100%;height:auto;overflow:visible}
.owl .eyes-happy,.owl .brows,.owl-print .eyes-happy,.owl-print .brows{display:none}
.owl.happy .eyes-open{display:none}
.owl.happy .eyes-happy{display:inline}
.owl.sad .brows{display:inline}
.owl.sad .pupil{transform:translateY(3px)}
.owl .beak{transform-box:fill-box;transform-origin:50% 0}
.owl.talking .beak{animation:talk .22s infinite alternate}
@keyframes talk{to{transform:scaleY(.55)}}
.coach .owl{animation:bob 3s ease-in-out infinite}
.coach .owl.happy{animation:hop .5s 2}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes hop{50%{transform:translateY(-12px) rotate(-6deg)}}
.coach{display:flex;align-items:center;gap:10px;padding:0 16px;width:100%;max-width:820px;margin:0 auto}
.owlWrap{width:58px;flex:none}
.bubble{flex:1;background:var(--surface);border-radius:18px;padding:6px 14px;font-weight:700;font-size:1.12rem;line-height:1.2;
  box-shadow:var(--shadow);position:relative;min-height:50px;display:flex;align-items:center}
.bubble::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-9px;border:9px solid transparent;border-left:0;border-right-color:var(--surface)}
.coach .iconbtn{width:46px;height:46px;font-size:1.25rem}
.coach .iconbtn.talking{background:var(--sun);animation:pulse .6s infinite}

/* ---------- Mises en page de jeu ---------- */
.homeMain{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:4px 14px 18px}
.homePanel{width:100%;max-width:460px;display:flex;flex-direction:column;gap:14px}
.play{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:10px 16px 18px}
.panel{width:100%;max-width:430px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.stage{width:min(84vw,46dvh);aspect-ratio:1;flex:none}

/* Tuiles de modes */
.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
/* 4 jeux à étoiles en 2 × 2, puis « Mon coffre » sur toute la largeur */
body:not([data-portail]) .modes .mode[data-open="chest"]{grid-column:1/-1;flex-direction:row;gap:10px;min-height:62px}
body:not([data-portail]) .modes .mode[data-open="chest"] .mi{font-size:1.8rem}
.mode{border-radius:22px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  color:#fff;font-weight:800;font-size:.98rem;line-height:1.05;box-shadow:var(--shadow);min-height:86px;text-align:center}
.mode .mi{font-size:2.1rem;line-height:1.15}
.mode{position:relative}
.m1{background:var(--minute)} .m2{background:var(--orange)} .m3{background:var(--hour)}
.m4{background:var(--ok)} .m5{background:var(--violet)} .m6{background:var(--sun);color:#1F2F5C}

/* Boutons */
.big{border-radius:20px;padding:10px 14px;font-weight:800;font-size:1.3rem;background:var(--surface);box-shadow:var(--shadow)}
.big.ok{background:var(--ok);color:#fff}
.big[hidden]{display:none}
.row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode:active,.big:active,.ans:active,.key:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(31,47,92,.18)}

/* Réponses à choisir */
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answers.n3{grid-template-columns:1fr;gap:10px}
.ansWrap{position:relative}
.ans{width:100%;border-radius:20px;padding:12px 6px 10px;background:var(--surface);box-shadow:var(--shadow);border:5px solid transparent;
  display:flex;flex-direction:column;align-items:center;line-height:1.05}
.n3 .ans{flex-direction:row;justify-content:center;gap:14px;padding:6px 44px 6px 10px}
.ans.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--surface))}
.ans.bad{border-color:var(--no);animation:shake .4s}
.listen{position:absolute;top:-10px;right:-6px;width:40px;height:40px;border-radius:50%;background:var(--sun);color:#1F2F5C;font-size:1.05rem;box-shadow:var(--shadow)}
.n3 .listen{top:50%;margin-top:-20px;right:6px;box-shadow:none}

/* Pavé numérique */
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{height:54px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);font-weight:800;font-size:1.9rem;line-height:1}
.key.alt{background:var(--sun);color:#1F2F5C;font-size:1.45rem}
.key:disabled{opacity:.4}

/* ---------- Composants de jeu partagés ---------- */
/* Chemin des niveaux */
.path{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:6px;position:relative}
.path::before{content:"";position:absolute;left:10%;right:10%;top:26px;height:6px;border-radius:3px;background:var(--surface);opacity:.7}
.stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;font-weight:700;font-size:.78rem;line-height:1.05;text-align:center}
.stop .stopIcon{width:52px;height:52px;border-radius:50%;padding:3px;background:var(--surface);box-shadow:var(--shadow);border:3px solid transparent;display:grid;place-items:center}
.stop .stopIcon svg{width:100%;height:100%;display:block}
.stop.on .stopIcon{border-color:var(--ink);transform:scale(1.1)}
.stop.locked .stopIcon{filter:grayscale(1);opacity:.5}
.stop .lock{position:absolute;top:-6px;right:2px;font-size:1rem}
.stop .bar{display:block;width:42px;height:6px;border-radius:3px;background:var(--surface);overflow:hidden;margin-top:2px}
.stop .bar b{display:block;height:100%;background:var(--ok);border-radius:3px}
.stop:active .stopIcon{transform:translateY(3px)}
/* Grand affichage */
.readout,.target{text-align:center;background:var(--surface);border-radius:22px;padding:4px 12px;box-shadow:var(--shadow)}
.bignum{font-weight:800;font-size:3rem;line-height:1.1;font-variant-numeric:tabular-nums}
.words{font-weight:700;font-size:1.15rem;color:var(--muted);line-height:1.15}
/* Cases de chiffres */
.slots{display:flex;justify-content:center;align-items:center;gap:8px}
.slot{width:58px;height:74px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;
  font-weight:800;font-size:2.9rem;line-height:1;border:4px solid transparent}
.slot.active{border-color:var(--minute);animation:blink 1.2s infinite}
.slot.given{opacity:.45}
.slot.shown{color:var(--orange)}
.slot.bad{border-color:var(--no);animation:shake .4s}
@keyframes blink{50%{border-color:transparent}}
/* Plus / moins */
.steppers{display:grid;grid-template-columns:repeat(var(--k,2),1fr);gap:8px}
.step{height:58px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);font-weight:800;font-size:1.6rem}
.step.plus{background:var(--ok);color:#fff}
.step:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(31,47,92,.18)}
/* Mémo */
.memo .stage{display:none}
.memo .panel{max-width:640px}
.memoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%, calc((100dvh - 190px) * .75));margin:0 auto}
.memoCard{aspect-ratio:1;border-radius:16px;background:var(--minute);box-shadow:var(--shadow);display:grid;place-items:center;padding:6px;border:4px solid transparent;overflow:hidden}
.memoCard .back{font-size:2.2rem;color:#fff;font-weight:800;line-height:1}
.memoCard .front{display:none;width:100%;height:100%;place-items:center}
.memoCard.open,.memoCard.done{background:var(--surface)}
.memoCard.open .front,.memoCard.done .front{display:grid}
.memoCard.open .back,.memoCard.done .back{display:none}
.memoCard.open{animation:flip .25s}
.memoCard.done{border-color:var(--ok)}
.memoCard.miss{border-color:var(--no)}
.memoCard:active{transform:translateY(3px)}
@keyframes flip{from{transform:rotateY(90deg)}}
.compact .play{gap:10px;padding-top:6px}
.compact .stage{width:min(58vw,28dvh)}

/* ---------- Temps d'écran ---------- */
.lock{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;max-width:520px;margin:0 auto}
.lockOwl,.setupOwl{width:120px}
.setupOwl{width:80px;margin:6px auto 0}
.lock h1{font-size:2.1rem}
.lockText{font-size:1.25rem;font-weight:700;margin:0}
.lockIdea{font-size:1.1rem;font-weight:700;color:var(--muted);margin:0;background:var(--surface);border-radius:16px;padding:8px 14px;box-shadow:var(--shadow)}
.lockIdea:empty{display:none}
.lockIdea{cursor:pointer;transition:transform .2s}
.lockIdea:not(:empty)::after{content:" 🔄";opacity:.6}
.lockIdea:active{transform:scale(.97)}
.lockActions{width:100%;margin-top:8px}
.lockActions[hidden]{display:none}
.seg.ages{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg.ages button{font-size:.9rem;padding:8px 0}
.mini-step{display:inline-flex;align-items:center;gap:6px}
.mini-step button{width:32px;height:32px;border-radius:50%;background:var(--bg);font-weight:800;font-size:1.1rem}
.mini-step b{min-width:62px;text-align:center;white-space:nowrap}
.pinBox{position:fixed;inset:0;z-index:60;background:rgba(10,20,40,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.pinBox[hidden]{display:none}
.pinInner{background:var(--surface);border-radius:24px;padding:16px;width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}
.pinTitle{font-weight:800;font-size:1.25rem;text-align:center}
.pinDots{display:flex;justify-content:center;gap:14px}
.pinDots i{width:18px;height:18px;border-radius:50%;border:3px solid var(--ink)}
.pinDots i.on{background:var(--ink)}
.pinDots.bad{animation:shake .4s}
.pinInner .keypad .key{height:52px}
.pinInner .pbtn{margin-top:0}
/* Guide illustré « Améliorer la voix » */
.guideInner{max-width:420px;max-height:calc(100dvh - 32px);overflow:auto}
.guideTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.guideTabs button{border-radius:12px;padding:7px 2px;background:var(--bg);font-weight:700;font-size:.8rem;line-height:1.1;border:3px solid transparent}
.guideTabs button{position:relative}
.guideTabs button.ici::after{content:"";position:absolute;top:4px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.guideTabs button.on{border-color:var(--ink);background:var(--surface)}
.guideStep{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-height:290px}
.guideStep p{margin:0;font-weight:600;line-height:1.35}
.gNum{width:38px;height:38px;border-radius:50%;background:var(--sun);color:#1F2F5C;font-weight:800;font-size:1.2rem;display:grid;place-items:center;flex:none}
.gFrame{width:230px;background:#F2F3F7;color:#1F2F5C;border-radius:26px;padding:10px 10px 14px;border:5px solid #1F2F5C;
  box-shadow:0 10px 24px rgba(10,20,40,.3);text-align:left;font-size:.86rem}
.gFrame.ordi{width:280px;border-radius:12px;border-width:4px}
.gBar{display:flex;gap:4px;justify-content:center;margin:0 0 6px}
.gBar i{width:6px;height:6px;border-radius:50%;background:#C9CDD8}
.gFrame.ordi .gBar{justify-content:flex-start}
.gFrame.ordi .gBar i:nth-child(1){background:#FF5F57}.gFrame.ordi .gBar i:nth-child(2){background:#FEBC2E}.gFrame.ordi .gBar i:nth-child(3){background:#28C840}
.gTitle{font-weight:800;font-size:1.05rem;margin:0 4px 6px}
.gRow{position:relative;display:flex;align-items:center;gap:8px;background:#fff;padding:8px 10px;font-weight:600;border-bottom:1px solid #E4E6EC}
.gRow:first-child{border-radius:10px 10px 0 0}.gRow:last-child{border-radius:0 0 10px 10px;border-bottom:0}
.gRow span:nth-child(1):not(.gIc),.gIc + span{flex:1}
.gIc{font-size:1rem}
.gChev{color:#A0A6B5;font-weight:800}
.gRow.on{background:#FFF3C4;outline:3px solid var(--sun);outline-offset:-3px;z-index:1;animation:gPulse 1.4s ease-in-out infinite}
.gTap{position:absolute;right:-14px;bottom:-14px;font-size:1.6rem;animation:gTap 1.4s ease-in-out infinite}
@keyframes gPulse{50%{outline-color:#F2811D}}
@keyframes gTap{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,-6px)}}
.guideDots{display:flex;justify-content:center;gap:6px}
.guideDots i{width:8px;height:8px;border-radius:50%;background:var(--bg-deep,#C9CDD8);opacity:.5}
.guideDots i.on{background:var(--ink);opacity:1}
.durPick{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.durPick b{font-size:2rem;font-weight:800;min-width:4.5em;text-align:center}
.timerPill{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:25;background:var(--surface);color:var(--ink);
  border-radius:999px;padding:4px 12px;font-weight:800;font-size:1rem;box-shadow:var(--shadow)}
.timerPill[hidden]{display:none}
.timerPill.low{background:var(--orange);color:#fff}

/* ---------- Effets ---------- */
.burst{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20}
.burst span{font-size:9rem;opacity:0}
.burst.show span{animation:pop .9s ease-out}
@keyframes pop{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.15)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1) translateY(-40px)}}
#kitConfetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:15}
#kitConfetti i{position:absolute;top:-24px;width:10px;height:15px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(760deg)}}
#kitConfetti i.emo{width:auto;height:auto;background:none;font-size:22px;font-style:normal;line-height:1}

/* ---------- Cabrioles : décor de saison (feuilles, flocons, pétales…) ---------- */
.screen{position:relative;z-index:1}
/* ---------- Habillages : le fond prend les teintes de l'habillage choisi ---------- */
.fondHabillage{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.72;
  background:radial-gradient(70% 55% at 0% 0%,var(--fond-a) 0,transparent 70%),
             radial-gradient(70% 55% at 100% 100%,var(--fond-b) 0,transparent 70%),
             radial-gradient(45% 35% at 100% 0%,color-mix(in srgb,var(--fond-b) 70%,transparent) 0,transparent 70%)}
[data-skin="arcenciel"] .fondHabillage{animation:fondArc 12s linear infinite}
@keyframes fondArc{to{filter:hue-rotate(360deg)}}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .fondHabillage{opacity:.42} }
:root[data-theme="dark"] .fondHabillage{opacity:.42}
@media (prefers-reduced-motion: reduce){ .fondHabillage{animation:none!important} }
.saison.habillage i{opacity:.85}
.saison.habillage.discret i{opacity:.35}
.saison{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.saison i{position:absolute;top:-40px;font-style:normal;line-height:1;opacity:.85;
  animation-name:saisonTombe,saisonBalance;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,alternate}
.saison.discret i{opacity:.32}
@keyframes saisonTombe{from{translate:0 0}to{translate:0 calc(100dvh + 80px)}}
@keyframes saisonBalance{from{transform:translateX(-18px) rotate(-20deg)}to{transform:translateX(18px) rotate(20deg)}}
@media (prefers-reduced-motion: reduce){.saison{display:none}}
.skin.saisonnier .need{color:#B4580E}
.skinGrid.garde .prev svg .acc{transform-box:view-box}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:92vw;
  background:var(--ink);color:var(--bg);font-weight:700;padding:8px 16px;border-radius:16px;z-index:30;text-align:center;font-size:1.05rem}
.toast[hidden]{display:none}

/* ---------- Récompense ---------- */
.reward{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center}
.sticker{font-size:8rem;line-height:1.1;background:var(--surface);border-radius:50%;width:11rem;height:11rem;display:grid;place-items:center;
  box-shadow:0 0 0 10px var(--sun),var(--shadow);animation:grow .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes grow{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
.reward h1{font-size:2.5rem;margin-top:14px}
.reward p{font-size:1.2rem;font-weight:700;margin:0;color:var(--muted)}
.news{background:var(--sun);color:#1F2F5C !important;border-radius:16px;padding:4px 14px}
.news[hidden]{display:none}

/* ---------- Coffre ---------- */
.chest{flex:1;padding:4px 18px 24px;max-width:620px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.chest h1{font-size:2rem}
.chest h2{font-size:1.3rem;margin-top:6px}
.chest h2 span{color:var(--muted);font-weight:700}
.stickerGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.stickerGrid span{aspect-ratio:1;border-radius:14px;background:var(--surface);display:grid;place-items:center;font-size:1.9rem;box-shadow:var(--shadow)}
.stickerGrid.cabs span{background:linear-gradient(135deg,#FFE7A3,#FFC2D8);box-shadow:0 0 0 3px var(--sun),var(--shadow)}
#kitCabWrap[hidden]{display:none}
.stickerGrid.album2 span:not(.no){background:linear-gradient(135deg,#E2F4FF,#E9E0FF)}
#kitAlbum2Info:empty{display:none}
.medals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.medal{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);text-align:center}
.medal b{font-size:2.1rem;line-height:1.1;filter:grayscale(1);opacity:.35}
.medal small{font-weight:700;font-size:.78rem;color:var(--muted);line-height:1.1}
.medal.won b{filter:none;opacity:1;animation:popIn .5s}
.medal.won{box-shadow:0 0 0 3px var(--sun),var(--shadow)}
.medal.won small{color:var(--ink)}
.stickerGrid span.no{font-size:1.2rem;color:var(--muted);opacity:.6;font-weight:800}
.skinGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.skin{background:var(--surface);border-radius:18px;padding:8px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:2px;
  font-weight:700;font-size:.95rem;border:4px solid transparent;position:relative}
.skin .prev{width:70px;height:70px}
.skin .prev svg{width:100%;height:100%;display:block}
.skin.on{border-color:var(--ink)}
.skin.locked .prev{filter:grayscale(1);opacity:.45}
.skin .need{font-size:.85rem;color:var(--muted)}
.parentVersion{text-align:center;color:var(--muted);font-weight:700;font-size:.85rem;margin:4px 0 0}

/* ---------- Espace parent ---------- */
.parent{flex:1;padding:4px 20px 24px;max-width:540px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.parent h1{font-size:1.8rem}
.card{background:var(--surface);border-radius:18px;padding:10px 16px;box-shadow:var(--shadow);font-size:1.05rem}
.card:empty{display:none}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;font-weight:700}
.opt input{width:26px;height:26px;accent-color:var(--ok)}
.optTitle{font-weight:800;margin-top:4px}
.pbtn{width:100%;border-radius:14px;padding:9px;font-weight:700;font-size:1.02rem;background:var(--bg);margin-top:6px}
.pbtn.go{background:var(--ok);color:#fff}
.pbtn.danger{background:var(--no);color:#fff}
.voixRow select{font:inherit;font-weight:700;font-size:.95rem;max-width:58%;padding:6px 8px;border-radius:10px;border:2px solid var(--bg);background:var(--bg);color:var(--ink)}
.small{color:var(--muted);font-size:.93rem;margin:6px 0 0;line-height:1.35}
.diag{font-weight:700;color:var(--ink)}
.seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:4px 0 8px}
.seg button{border-radius:12px;padding:6px 0;background:var(--bg);font-weight:700;font-size:.74rem;line-height:1.1;border:3px solid transparent}
.seg button.on{border-color:var(--ink);background:var(--surface)}

/* Espace parent sur ordinateur : deux colonnes, plus grand */
@media (min-width:960px){
  #kitParent .parent{display:block;max-width:1120px;column-count:2;column-gap:22px;padding:4px 28px 32px}
  #kitParent .parent > *{break-inside:avoid;margin:0 0 16px}
  #kitParent .parent > h1{column-span:all;font-size:2.2rem;margin:0 0 14px}
  #kitParent .card{font-size:1.12rem;padding:14px 20px}
  #kitParent .pbtn{font-size:1.08rem;padding:11px}
  #kitParent .small{font-size:1rem}
}
@media (min-width:1500px) and (min-height:800px){
  #kitParent .parent{zoom:1.18}
}
/* Guide de la voix sur ordinateur : plus grand */
@media (min-width:960px) and (min-height:700px){
  #kitGuide .guideInner{zoom:1.35;max-height:calc((100dvh - 32px) / 1.35)}
}
@media (min-width:1500px) and (min-height:950px){
  #kitGuide .guideInner{zoom:1.6;max-height:calc((100dvh - 32px) / 1.6)}
}

/* ---------- Fiches imprimables ---------- */
.preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.preview .page{background:#fff;border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.preview .page > svg,#kitPrint .page > svg{display:block;width:100%;height:auto}
#kitPrint{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff !important;min-height:0;height:auto}
  body > *:not(#kitPrint){display:none !important}
  #kitPrint{display:block}
  #kitPrint .page{width:210mm;height:297mm;overflow:hidden;break-after:page;page-break-after:always;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #kitPrint .page:last-child{break-after:auto;page-break-after:auto}
  #kitPrint .page > svg{width:210mm;height:297mm}
}

/* ---------- Écrans larges et paysage ---------- */
@media (orientation:landscape) and (min-width:560px){
  .homeMain,.play{flex-direction:row;gap:32px}
  .stage{width:min(44vw,calc(100dvh - 150px))}
  .compact .stage{width:min(38vw,calc(100dvh - 150px))}
  .memoGrid{grid-template-columns:repeat(4,1fr);width:min(100%, calc((100dvh - 170px) * 1.33))}
  .top{padding:6px 16px}
}
@media (orientation:landscape) and (max-height:520px){
  .top{padding:4px 12px}
  .iconbtn{width:40px;height:40px;font-size:1.15rem}
  .chip{font-size:1.05rem}
  .owlWrap{width:42px}
  .bubble{font-size:.98rem;min-height:40px;padding:4px 12px}
  .coach .iconbtn{width:38px;height:38px}
  .play{padding:6px 12px 8px;gap:20px}
  .panel{gap:8px}
  .stage{width:min(40vw,calc(100dvh - 120px))}
  .homeMain{padding-bottom:8px}
  .mode{min-height:66px}
  .mode .mi{font-size:1.6rem}
  .ans{padding:4px 6px}
  .big{padding:6px 12px;font-size:1.15rem}
  .keypad{grid-template-columns:repeat(6,1fr);gap:6px}
  .key{height:44px;font-size:1.45rem}
  .compact .stage{width:min(40vw,calc(100dvh - 120px))}
  .bignum{font-size:2.2rem}
  .slot{width:46px;height:56px;font-size:2.2rem}
  .step{height:46px;font-size:1.3rem}
  .memoGrid{width:min(100%, calc((100dvh - 120px) * 1.33))}
}
/* ---------- Transitions douces ---------- */
/* Entre deux écrans : l'ancien s'efface, le nouveau glisse en place */
.screen.leaving{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  animation:screenOut .45s cubic-bezier(.5,0,.75,0) forwards}
.screen.entering{animation:screenIn .65s cubic-bezier(.25,1.35,.5,1) both}
@keyframes screenOut{to{opacity:0;transform:scale(.9) translateY(-14px);filter:blur(3px)}}
@keyframes screenIn{0%{opacity:0;transform:translateY(46px) scale(.92)}55%{opacity:1}}
/* Entre deux pages (portail ↔ jeux) : navigateurs récents (Safari 18.2+, Chrome 126+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pageOut .42s cubic-bezier(.5,0,.75,0) both}
::view-transition-new(root){animation:pageIn .7s cubic-bezier(.25,1.3,.5,1) both}
@keyframes pageOut{to{opacity:0;transform:scale(.88);filter:blur(4px)}}
@keyframes pageIn{0%{opacity:0;transform:translateY(60px) scale(.9)}50%{opacity:1}}
/* Les boutons de mode arrivent l'un après l'autre */
.entering .modes .mode{animation:modeIn .55s cubic-bezier(.3,1.5,.5,1) backwards}
.entering .modes .mode:nth-child(2){animation-delay:.06s} .entering .modes .mode:nth-child(3){animation-delay:.12s}
.entering .modes .mode:nth-child(4){animation-delay:.18s} .entering .modes .mode:nth-child(5){animation-delay:.24s}
.entering .modes .mode:nth-child(6){animation-delay:.3s}
@keyframes modeIn{from{opacity:0;transform:translateY(30px) scale(.8)}}
/* Fenêtres (code parent, durée) */
.pinBox:not([hidden]){animation:veil .35s ease-out}
.pinBox:not([hidden]) .pinInner{animation:popIn .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes veil{from{background:rgba(10,20,40,0)}}
@keyframes popIn{from{opacity:0;transform:translateY(40px) scale(.8)}}
.toast:not([hidden]){animation:toastIn .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}}
/* Boutons : réaction fluide au toucher, léger soulèvement au survol (souris uniquement) */
.mode,.big,.ans,.key,.step,.pbtn,.iconbtn,.chip,.stop .stopIcon,.memoCard,.skin,.seg button,.gcard,.player,.pseudo,.planet{
  transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .18s,filter .18s,background-color .2s,border-color .2s,opacity .2s}
@media (hover:hover){
  .mode:hover,.big:hover:not(:disabled),.pbtn:hover,.key:hover:not(:disabled),.step:hover,.iconbtn:hover,.player:hover,.pseudo:hover{transform:translateY(-2px);filter:brightness(1.04)}
}
.bubble{transition:background-color .2s}
.dots span{transition:background-color .3s,transform .3s,outline-color .3s}
.dots span.now{transform:scale(1.15)}
.stop .bar b{transition:width .6s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
svg.owl{overflow:visible}