/* L'aventure de Kylian : un paysage tropical en plein jour. Ciel bleu (soleil, nuages, mouettes), îles lointaines à l'horizon,
   mer turquoise où flottent les îles des matières : lagon, plage de sable, herbe, palmiers qui se balancent, et un monument.
   Cartes blanches givrées, boutons en relief doux, pas de contours noirs.
   Polices : Fredoka (titres), Nunito (interface), Andika (tout ce qui se LIT dans les jeux : lettres, syllabes, mots). */
:root{
  --ink:#1b2d4f; --ink-soft:#56688a; --edge:#22305a;               /* --edge : traits des dessins des jeux (dés, formes…) */
  --paper:#f5f8fc; --surface:#ffffff; --line:#e6ecf4; --line-strong:#d0d9e6;
  --bleu:#3d7bff; --rouge:#ff5a7a; --vert:#1fbf86; --jaune:#ffc53d; --violet:#8b5cf6; --orange:#ff8a4c;
  --bleu-c:#e5efff; --rouge-c:#ffe7ed; --vert-c:#dcf8ec; --jaune-c:#fff3d1; --violet-c:#efe9ff; --orange-c:#ffebde;
  --on-color:#ffffff; --on-jaune:#4a3000; --star:#ffb800; --star-off:#e2e7f0;
  --good:#12a873; --good-bg:#dcf8ec; --bad-bg:#eef2f7;
  --h-corps:#ffae45; --h-aile:#f08a1f; --h-ventre:#fff3dc; --h-bec:#ff6b4a; --h-trait:#3a2a1a;
  --or:#ffc93c; --carte:rgb(255 255 255 / .9);
  --ombre-douce:0 12px 34px rgb(8 60 110 / .22);
  --theme:#3d7bff; --theme-c:#9cc9ff;
  --f-title:"Playwrite FR Moderne","Segoe Script",cursive;
  --f-lire:"Andika","Comic Sans MS","Trebuchet MS",sans-serif;
  --f-ui:"Nunito","Segoe UI",system-ui,sans-serif;
  --f-round:"Fredoka","Nunito","Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:hidden}
body{
  font-family:var(--f-ui); font-weight:700; color:var(--ink); font-size:1.1rem; line-height:1.45; min-height:100vh;
  background-color:#0f8fc0;
  background-image:radial-gradient(circle at 50% 100%, transparent 13px, rgb(255 255 255 / .05) 14px 16px, transparent 17px),
    linear-gradient(180deg, #4fd0ea 0, #18a8d2 45vh, #0b80b6 100vh);
  background-size:70px 34px, 100% 100%; background-attachment:fixed;
  -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;
}
main{position:relative; z-index:1}
.wrap{max-width:1000px}
.min-w-0{min-width:0}
button{font:inherit; color:inherit; cursor:pointer; touch-action:manipulation}
button:focus-visible{outline:3px solid var(--or); outline-offset:4px}
.verre{background:var(--carte); border:1px solid rgb(255 255 255 / .9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--ombre-douce)}

/* ---------- Plume, le hibou ---------- */
.hibou-btn{background:none; border:0; padding:0; flex:none; border-radius:50%}
.hibou{display:inline-block; width:var(--hw,88px); line-height:0; transform-origin:50% 100%; animation:respire 3.2s ease-in-out infinite;
  filter:drop-shadow(0 10px 14px rgb(8 50 100 / .28))}
.hibou svg{width:100%; height:auto; overflow:visible}
.h-plume{fill:var(--h-corps); stroke:var(--h-trait); stroke-width:2.5; stroke-linejoin:round}
.h-aile{fill:var(--h-aile); stroke:var(--h-trait); stroke-width:2.5; stroke-linejoin:round; transform-box:fill-box}
.h-g{transform-origin:100% 10%} .h-d{transform-origin:0 10%}
.h-ventre{fill:var(--h-ventre)}
.h-trait{fill:none; stroke:var(--h-aile); stroke-width:2.5; stroke-linecap:round; opacity:.6}
.h-blanc{fill:#fff; stroke:var(--h-trait); stroke-width:2.5}
.h-pup{fill:var(--h-trait)}
.h-bec{fill:var(--h-bec); stroke:var(--h-trait); stroke-width:2; stroke-linejoin:round}
.h-joue{fill:#ff7aa2; opacity:.55}
.h-pied{fill:none; stroke:var(--h-bec); stroke-width:4.5; stroke-linecap:round}
.h-yeux{transform-box:fill-box; transform-origin:center; animation:cligne 4.5s infinite}
.hibou.joie{animation:saute .8s cubic-bezier(.3,1.4,.5,1)}
.hibou.joie .h-g{animation:battreG .2s 4} .hibou.joie .h-d{animation:battreD .2s 4}
.hibou.oups{animation:penche .8s ease-in-out}

/* Bulle de Plume */
.bulle{position:relative; background:#fff; color:var(--ink); border-radius:22px; padding:10px 18px; margin:0 0 0 14px; font-weight:800; font-size:1.05rem; line-height:1.35;
  box-shadow:0 10px 30px rgb(8 60 110 / .2); animation:pop .35s cubic-bezier(.3,1.6,.5,1); text-wrap:balance}
.bulle::before{content:""; position:absolute; left:-10px; top:50%; margin-top:-10px; border:10px solid transparent; border-left:0; border-right:12px solid #fff}
.bulle.good{background:linear-gradient(135deg, #e3fbef, #c9f5e0); color:var(--good)}
.bulle.good::before{border-right-color:#e3fbef}

/* Boutons du haut */
.pill{display:inline-flex; align-items:center; gap:7px; min-height:48px; padding:6px 18px; border-radius:999px; color:var(--ink); font-family:var(--f-ui); font-weight:800; font-size:1.05rem;
  background:var(--carte); border:1px solid #fff; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 8px 22px rgb(8 60 110 / .2);
  transition:transform .12s, box-shadow .2s}
button.pill:hover{box-shadow:0 10px 26px rgb(8 60 110 / .3)}
button.pill:active{transform:scale(.95)}
.rond-pill{width:48px; padding:0; justify-content:center}
.total .s{color:var(--star); font-size:1.25em; line-height:1}
.barre-haut{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}

/* ---------- Accueil : le ciel ---------- */
.paysage{position:relative; overflow:hidden}
.ciel-scene{position:relative; overflow:hidden; background:linear-gradient(180deg, #2f9bef 0%, #5cb9fb 40%, #9fdcff 78%, #d3f1ff 100%)}
.soleil{position:absolute; top:-40px; right:6%; width:240px; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #fffef2 0 18%, #fff3b0 26%, rgb(255 236 150 / .55) 40%, rgb(255 236 150 / 0) 68%); animation:pulse 6s ease-in-out infinite}
.nuage{position:absolute; left:0; width:220px; height:80px; pointer-events:none; opacity:.95; animation:derive-ciel linear infinite;
  background:radial-gradient(circle at 30% 70%, #fff 0 26%, transparent 27%), radial-gradient(circle at 52% 45%, #fff 0 30%, transparent 31%),
    radial-gradient(circle at 74% 68%, #fff 0 24%, transparent 25%), radial-gradient(ellipse at 50% 88%, #eaf6ff 0 40%, transparent 41%);
  filter:drop-shadow(0 8px 10px rgb(40 120 190 / .18))}
.nuage.c1{top:90px; animation-duration:90s; animation-delay:-20s} .nuage.c2{top:30px; scale:.6; animation-duration:120s; animation-delay:-80s; opacity:.8}
.nuage.c3{top:210px; scale:.8; animation-duration:105s; animation-delay:-50s; opacity:.85}
.mouette{position:absolute; left:0; width:30px; height:14px; pointer-events:none; animation:vol 38s linear infinite}
.mouette svg{width:100%; height:100%; overflow:visible; animation:battement .5s ease-in-out infinite alternate; transform-origin:50% 60%}
.mouette.m1{top:150px; animation-delay:-6s} .mouette.m2{top:175px; animation-delay:-8s; scale:.75} .mouette.m3{top:120px; animation-delay:-26s; scale:.85}
.ciel-scene .container{position:relative; z-index:1}
.hud{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-top:16px}
.rang{display:flex; align-items:center; gap:12px; border-radius:24px; padding:8px 18px 8px 8px; min-width:0; max-width:100%}
.rang-ico{position:relative; width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:1.65rem;
  background:conic-gradient(var(--or) var(--p,0%), #e5ebf3 0)}
.rang-ico::before{content:""; position:absolute; inset:5px; border-radius:50%; background:linear-gradient(160deg, #eaf5ff, #cfe7ff)}
.rang-ico span{position:relative}
.rang-nom{margin:0; font-weight:900; font-size:1rem; line-height:1.2}
.xp{height:8px; width:200px; max-width:100%; border-radius:99px; background:#e5ebf3; overflow:hidden; margin-top:6px}
.xp.large{width:100%; height:10px; margin-top:8px}
.xp i{display:block; height:100%; width:var(--p,0%); border-radius:99px; background:linear-gradient(90deg, #ffb347, var(--or)); transition:width .8s}
.rang-reste{margin:4px 0 0; font-size:.8rem; font-weight:700; color:var(--ink-soft); line-height:1.2}
.hero{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 0 16px}
.hero-txt{min-width:0}
.salut-chip{display:inline-block; margin:0; padding:6px 14px; border-radius:999px; font-size:.98rem; font-weight:800}
.titre{margin:12px 0 10px; font-family:var(--f-round); font-weight:700; font-size:clamp(2.7rem,9.4vw,5.6rem); line-height:.95; letter-spacing:-.01em;
  filter:drop-shadow(0 6px 0 rgb(14 80 150 / .35)) drop-shadow(0 14px 24px rgb(10 60 120 / .3))}
.titre span{display:block; -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em}
.titre .t1{background-image:linear-gradient(180deg, #ffffff 40%, #e4f4ff)}
.titre .t2{background-image:linear-gradient(90deg, #ffe066, #ffb238, #ffd84a, #ffe066); background-size:250% 100%; animation:brille 7s linear infinite}
.hero-sous{margin:0; color:#fff; font-weight:800; font-size:clamp(1rem,2.6vw,1.2rem); text-shadow:0 2px 10px rgb(10 70 140 / .35)}
.hero-hibou{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; margin-right:clamp(0px,6vw,80px)}
.hero-hibou .hibou{--hw:clamp(96px,17vw,160px); animation:plane 5s ease-in-out infinite}
.bulle-mini{background:#fff; color:var(--ink); font-weight:800; font-size:.95rem; padding:6px 14px; border-radius:16px 16px 16px 4px; box-shadow:0 8px 20px rgb(8 60 110 / .25);
  animation:pop .5s cubic-bezier(.3,1.6,.5,1) .6s backwards}
.defi{position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; width:100%; text-align:left; color:#fff; padding:14px;
  border:0; border-radius:26px; background:linear-gradient(120deg, #ffb238, #ff7a59 60%, #ff5f86); box-shadow:0 8px 0 #d9573f, 0 18px 34px rgb(220 90 60 / .35);
  transition:transform .15s, box-shadow .15s}
.defi::after{content:""; position:absolute; top:0; bottom:0; width:70px; left:-90px; background:rgb(255 255 255 / .35); transform:skewX(-20deg); animation:reflet 4s ease-in-out infinite}
.defi:hover{transform:translateY(-2px)} .defi:active{transform:translateY(6px); box-shadow:0 2px 0 #d9573f}
.defi b{display:block; font-family:var(--f-round); font-weight:600; font-size:1.3rem; line-height:1.2}
.defi small{display:block; font-size:.98rem; font-weight:800; color:rgb(255 255 255 / .9); line-height:1.3}
.defi-ico{flex:none; width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-size:1.8rem; background:rgb(255 255 255 / .25); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35)}
.defi-go{margin-left:auto; flex:none; padding:10px 18px; border-radius:999px; font-weight:900; font-size:1rem; color:#e0543c; background:#fff; white-space:nowrap; box-shadow:0 4px 0 rgb(0 0 0 / .1)}
.defi.fait{background:linear-gradient(120deg, #3ddc97, #13b27a); box-shadow:0 8px 0 #0e8d60, 0 18px 34px rgb(20 160 110 / .3)}
.defi.fait::after{display:none}

/* ---------- L'horizon et la mer ---------- */
.horizon{position:relative; height:76px; margin-top:-1px; background:linear-gradient(180deg, #d3f1ff 0, #d3f1ff 66px, #5fd3ea 66px)}
.horizon-terre{position:absolute; left:0; right:0; bottom:10px; width:100%; height:34px}
.palmier-loin{position:absolute; bottom:22px; width:40px; height:auto; overflow:visible}
.palmier-loin.petit{width:30px; bottom:20px}
.mer{position:relative; overflow:hidden; padding:20px 0 80px;
  background-color:#14a3cf;
  background-image:radial-gradient(circle at 50% 100%, transparent 13px, rgb(255 255 255 / .07) 14px 16px, transparent 17px),
    linear-gradient(180deg, #5fd3ea 0, #2bb8d9 260px, #1197c8 70%, #0b7fb6 100%);
  background-size:70px 34px, 100% 100%}
.reflets i{position:absolute; width:16px; height:3px; border-radius:3px; background:#fff; opacity:0; animation:reflet-eau 4s ease-in-out infinite}
.reflets i:nth-child(1){top:4%; left:12%} .reflets i:nth-child(2){top:9%; left:63%; animation-delay:-1s} .reflets i:nth-child(3){top:22%; left:34%; animation-delay:-2s}
.reflets i:nth-child(4){top:36%; left:86%; animation-delay:-3s} .reflets i:nth-child(5){top:52%; left:8%; animation-delay:-1.5s} .reflets i:nth-child(6){top:64%; left:56%; animation-delay:-2.5s}
.reflets i:nth-child(7){top:78%; left:24%; animation-delay:-.5s} .reflets i:nth-child(8){top:88%; left:76%; animation-delay:-3.5s}
.bateau{position:absolute; top:6px; left:0; width:86px; z-index:0; pointer-events:none; animation:navigue 70s linear infinite}
.bateau svg{width:100%; height:auto; animation:tangue 3s ease-in-out infinite; transform-origin:50% 90%}
.mer > .container{position:relative; z-index:1}

/* ---------- Les îles ---------- */
.carte{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:34px 30px; justify-items:center; padding-top:30px}
.ile{position:relative; width:100%; max-width:430px; display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; padding:0; color:#fff;
  animation:arrive .8s cubic-bezier(.3,1.4,.5,1) var(--d,0ms) backwards}
.ile-scene{position:relative; display:block; width:100%; aspect-ratio:360/250; transition:scale .2s}
.ile-sol{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ile-sol .ecume{animation:ecume 6s linear infinite}
.ile-sol .clapot{animation:clapot 3.4s ease-in-out var(--b,0s) infinite; transform-box:fill-box; transform-origin:center}
.palme{transform-box:fill-box; transform-origin:50% 100%; animation:balance 4.5s ease-in-out infinite}
.palme.p2{animation-duration:5.2s; animation-delay:-1.4s}
.ile-lieu{position:absolute; left:50%; bottom:37%; translate:-50% 0; font-size:clamp(4.2rem,13vw,6.2rem); line-height:1; transition:transform .25s cubic-bezier(.3,1.6,.5,1);
  filter:drop-shadow(0 10px 8px rgb(20 70 40 / .3))}
.ile-petit{position:absolute; left:63%; bottom:31%; font-size:clamp(1.9rem,6vw,2.6rem); line-height:1; filter:drop-shadow(0 5px 5px rgb(20 70 40 / .3)); animation:danse 3s ease-in-out infinite}
button.ile:hover .ile-scene{scale:1.03}
button.ile:hover .ile-lieu{transform:translateY(-8px)}
button.ile:active .ile-scene{scale:.97}
.ile-nom{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-round); font-weight:600; font-size:clamp(1.25rem,4.2vw,1.55rem); line-height:1.1; text-align:center;
  color:var(--on-fort,#fff); background:var(--fort); padding:8px 20px; border-radius:999px; margin-top:-8px;
  box-shadow:0 5px 0 color-mix(in srgb, var(--fort) 70%, #0a2040), 0 12px 24px rgb(5 50 90 / .3)}
.ile-info{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.chip{display:inline-flex; align-items:center; gap:4px; padding:3px 11px; border-radius:999px; font-size:.88rem; font-weight:800; color:var(--ink);
  background:rgb(255 255 255 / .88); box-shadow:0 4px 12px rgb(5 50 90 / .18)}
.chip.or{color:#4a3000; background:linear-gradient(180deg, #ffe08a, #ffbe4a)}
.mystere{cursor:default} .mystere .ile-scene{filter:saturate(.25) brightness(1.05)} .mystere .ile-lieu{opacity:.9}
.brume{position:absolute; inset:0 -4% 6%; border-radius:50%; filter:blur(12px); animation:flotte 7s ease-in-out infinite;
  background:radial-gradient(ellipse at 30% 58%, rgb(255 255 255 / .92), transparent 55%), radial-gradient(ellipse at 70% 45%, rgb(255 255 255 / .88), transparent 55%)}
.parents{margin-top:60px; font-size:.92rem; font-weight:600; color:var(--ink-soft); border-radius:22px; padding:16px 18px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.parents p{margin:0; max-width:66ch; min-width:0; flex:1 1 260px}
.parents strong{color:var(--ink)}

/* ---------- Une île : le chemin des jeux ---------- */
.ile-tete{display:flex; align-items:center; gap:16px; border-radius:26px; padding:14px 20px; border-top:8px solid var(--theme)}
.ile-tete-lieu{font-size:clamp(3rem,10vw,4.2rem); line-height:1; flex:none; filter:drop-shadow(0 8px 8px rgb(8 60 110 / .25)); animation:flotte 3.4s ease-in-out infinite}
.titre-page{margin:0; font-family:var(--f-round); font-weight:700; font-size:clamp(1.6rem,5.6vw,2.5rem); line-height:1.1; color:#fff; text-shadow:0 3px 14px rgb(5 50 90 / .35)}
.ile-tete .titre-page{color:var(--ink); text-shadow:none}
.ile-sous{margin:2px 0 0; font-weight:700; color:var(--ink-soft)}
.ile-sous .s{color:var(--star)}
.chemin{position:relative; display:flex; flex-direction:column; gap:26px; padding:18px 0 60px}
.trace{position:absolute; left:0; top:0; pointer-events:none; overflow:visible}
.trace path{fill:none; stroke-linecap:round}
.trace .t1{stroke:rgb(255 255 255 / .16); stroke-width:36} .trace .t2{stroke:#fff; stroke-width:7; stroke-dasharray:0 20; opacity:.85} .trace .t3{display:none}
.panneau{position:relative; z-index:1; align-self:center; display:flex; align-items:center; gap:8px; margin:6px 0 -4px; padding:7px 18px; border-radius:999px;
  font-weight:900; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:#fff; box-shadow:0 8px 20px rgb(5 50 90 / .22)}
.panneau span{font-size:1.1rem; letter-spacing:0}
.etape{position:relative; z-index:1; width:170px; margin-left:calc(var(--x) - 85px); display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:0; padding:0; color:#fff}
.rond{position:relative; width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-size:2.7rem; line-height:1;
  background:radial-gradient(circle at 34% 26%, #fff 0 35%, color-mix(in srgb, var(--theme) 14%, #fff) 70%, color-mix(in srgb, var(--theme) 30%, #fff));
  box-shadow:0 8px 0 color-mix(in srgb, var(--theme) 60%, #0a2040), 0 20px 28px rgb(5 40 80 / .35), inset 0 -8px 14px rgb(0 0 0 / .12);
  animation:pop .5s cubic-bezier(.3,1.6,.5,1) backwards; transition:transform .15s, box-shadow .15s}
.rond::before{content:""; position:absolute; inset:-10px; border-radius:50%; background:conic-gradient(var(--or) var(--p,0%), rgb(255 255 255 / .45) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px))}
button.etape:hover .rond{transform:translateY(-4px) scale(1.05)}
button.etape:active .rond{transform:translateY(6px); box-shadow:0 2px 0 color-mix(in srgb, var(--theme) 60%, #0a2040), 0 8px 14px rgb(5 40 80 / .3)}
.etape-nom{font-family:var(--f-round); font-weight:600; font-size:1.1rem; line-height:1.15; text-align:center; text-shadow:0 2px 10px rgb(5 40 80 / .55)}
.mini{font-size:.95rem; letter-spacing:1px; line-height:1; padding:4px 9px; border-radius:99px; background:rgb(5 40 80 / .35)}
.mini i{font-style:normal; color:rgb(255 255 255 / .35)} .mini i.on{color:var(--or)}
.nouveau{position:absolute; top:-8px; right:-34px; padding:3px 10px; border-radius:99px; font-family:var(--f-ui); font-size:.78rem; font-weight:900; line-height:1.3; color:#fff;
  background:linear-gradient(135deg, #ff6fa5, #ff4d6d); box-shadow:0 6px 14px rgb(255 60 110 / .4); rotate:10deg; animation:bump 2s ease-in-out infinite}
.etape.verrou .rond{background:rgb(255 255 255 / .25); border:2px dashed rgb(255 255 255 / .6); box-shadow:none; font-size:2rem}
.etape.verrou .rond::before{display:none}
.etape.verrou .etape-nom{opacity:.8}

/* ---------- Une partie ---------- */
.dots{display:flex; gap:6px; align-items:center}
.dots i{display:block; width:clamp(26px,6vw,42px); height:10px; border-radius:99px; background:rgb(255 255 255 / .22); font-size:0; transition:background .3s}
.dots i.gagne{background:linear-gradient(90deg, #ffb347, var(--or)); box-shadow:0 0 10px rgb(255 200 80 / .7)}
.dots i.fait{background:rgb(255 255 255 / .75)}
.dots i.now{background:#fff; animation:pulse 1.4s ease-in-out infinite}
.coach{display:flex; align-items:center; gap:4px; min-height:96px}
.coach .hibou{--hw:clamp(66px,16vw,90px)}
.coach .bulle{font-size:clamp(1.12rem,3.7vw,1.45rem); flex:1 1 auto; min-width:0}
.sheet{background:#fff; color:var(--ink); font-family:var(--f-lire); border-radius:34px; padding:clamp(18px,4vw,38px); display:flex; flex-direction:column; align-items:center;
  gap:24px; text-align:center; box-shadow:0 30px 70px rgb(16 8 70 / .4), inset 0 -6px 0 rgb(29 35 87 / .05)}
.visuel{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%}
.pic{font-size:clamp(5rem,22vw,8rem); line-height:1.1; display:inline-block; filter:drop-shadow(0 12px 14px rgb(30 30 90 / .18));
  animation:arrive .55s cubic-bezier(.3,1.5,.5,1) backwards, flotte 3s ease-in-out .6s infinite}
.sum{font-size:clamp(2.2rem,9vw,3.8rem); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; animation:monte .4s backwards}
.mot-trou{font-size:clamp(2.6rem,11vw,4.2rem); font-weight:700; letter-spacing:.08em; line-height:1.2; animation:monte .4s backwards}
.slot{display:inline-block; min-width:.9em; border-bottom:5px dashed var(--bleu); color:var(--ink-soft); text-align:center; line-height:1}
.slot.rempli{color:var(--good); border-bottom-color:var(--good); animation:arrive .5s cubic-bezier(.3,1.6,.5,1)}
.carte-son{width:118px; height:118px; border-radius:32px; border:0; padding:0; display:grid; place-items:center; font-size:4rem; font-weight:700; line-height:1; color:#fff;
  background:linear-gradient(140deg, #a98bff, #7044ea); box-shadow:0 8px 0 #4f27b8, 0 18px 30px rgb(80 40 190 / .35), inset 0 2px 0 rgb(255 255 255 / .35);
  animation:arrive .5s cubic-bezier(.3,1.5,.5,1) backwards}
.carte-son:active{transform:translateY(6px); box-shadow:0 2px 0 #4f27b8}

/* Objets à compter, boîte de 10, trains de nombres */
.operation{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 18px}
.compte{display:grid; grid-template-columns:repeat(5, auto); gap:8px; justify-content:center}
.obj{width:clamp(48px,12.5vw,60px); aspect-ratio:1; padding:0; border-radius:18px; border:2px solid var(--line); background:var(--paper);
  font-size:clamp(1.6rem,6.5vw,2.2rem); line-height:1; display:grid; place-items:center; position:relative;
  animation:arrive .4s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0) * 70ms) backwards; transition:transform .12s, background .2s}
.obj.vu{border-color:#ffd27a; background:var(--jaune-c); transform:scale(1.06)}
.obj.vu::after{content:attr(data-n); position:absolute; top:-10px; right:-10px; min-width:26px; height:26px; padding:0 6px; border-radius:13px; color:#fff;
  background:linear-gradient(135deg, #6b93ff, #3d64f0); box-shadow:0 4px 10px rgb(60 100 240 / .4); font-family:var(--f-ui); font-size:.85rem; font-weight:900; display:grid; place-items:center}
.plus{font-size:2.4rem; font-weight:700}
.boite{display:grid; grid-template-columns:repeat(5, auto); gap:4px; padding:4px; background:var(--line-strong); border-radius:18px}
.case{width:clamp(50px,14vw,66px); aspect-ratio:1; background:#fff; display:grid; place-items:center; font-size:clamp(1.6rem,7vw,2.3rem); line-height:1; border:0; border-radius:12px; padding:0}
.boite .obj{border:0; border-radius:12px; animation:none; background:repeating-linear-gradient(45deg, #fff 0 8px, var(--paper) 8px 12px)}
.boite .obj.vu{background:var(--jaune-c); transform:none}
.boite .obj.vu::after{top:3px; right:3px}
.legende{margin:0; font-weight:700; color:var(--ink-soft)}
.train{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px}
.wagon{min-width:clamp(58px,15vw,78px); height:clamp(58px,15vw,78px); padding:0 12px; border-radius:20px; background:var(--bleu-c); color:var(--ink);
  font-size:clamp(1.8rem,7vw,2.6rem); font-weight:700; line-height:1; display:inline-grid; place-items:center; box-shadow:0 5px 0 #c9d6fb;
  font-variant-numeric:tabular-nums; animation:arrive .45s cubic-bezier(.3,1.5,.5,1) backwards}
.wagon:nth-child(2){animation-delay:.1s} .wagon:nth-child(3){animation-delay:.2s} .wagon:nth-child(4){animation-delay:.3s}
.wagon.mot{font-size:clamp(1.3rem,5vw,1.8rem)}
.wagon.slot{background:#fff; border:3px dashed var(--bleu); box-shadow:none; color:var(--ink-soft)}
.wagon.slot.rempli{border:3px solid var(--good); background:var(--good-bg); color:var(--good)}
.fleche{font-size:2rem; font-weight:700; color:var(--ink-soft)}
.de{width:clamp(64px,17vw,90px); height:auto; filter:drop-shadow(0 8px 10px rgb(30 30 90 / .18)); animation:arrive .45s cubic-bezier(.3,1.5,.5,1) .15s backwards}
.de-vide{width:clamp(64px,17vw,90px); height:clamp(64px,17vw,90px); border:3px dashed #f3b730; border-radius:20px; background:var(--jaune-c);
  display:inline-grid; place-items:center; font-size:2.2rem; font-weight:700; color:var(--ink-soft)}
.de-vide.rempli{border:3px solid var(--good); background:var(--good-bg)}
.paquets{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:14px 18px}
.paquet{width:clamp(96px,26vw,124px); height:auto; animation:arrive .45s cubic-bezier(.3,1.5,.5,1) backwards}
.seuls{display:flex; gap:4px; align-items:flex-end}
.seul{width:clamp(11px,3vw,14px); height:auto}
.crayons-vrac{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 6px; max-width:520px; font-size:clamp(1.3rem,5vw,1.7rem); line-height:1.2}
.seul-mini{display:inline-block; rotate:-35deg}
.bande{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:620px}
.bande span{min-width:34px; height:34px; border-radius:9px; background:var(--paper); font-weight:700; font-size:1rem; display:grid; place-items:center}

/* Lecture : syllabes en couleurs, phrases */
.mot-syl{display:flex; align-items:flex-end; justify-content:center; gap:2px; font-size:clamp(2.4rem,10vw,4rem); font-weight:700; line-height:1.2; animation:monte .4s backwards}
.syl.s0{color:var(--rouge)} .syl.s1{color:var(--bleu)}
.mot-syl .slot{min-width:1.6em; margin:0 4px}
.phrase{margin:0; font-size:clamp(1.6rem,6vw,2.4rem); font-weight:700; line-height:1.4; background:var(--jaune-c); border-radius:24px; padding:18px 24px;
  box-shadow:0 6px 0 #f6dc9a; text-wrap:balance; animation:monte .4s backwards}
.vf{display:block; font-size:1.4em; line-height:1.2}
.scene{display:flex; justify-content:center; gap:clamp(10px,4vw,30px); font-size:clamp(3rem,13vw,5rem); line-height:1.1; padding:10px 22px 14px;
  border-radius:24px; background:linear-gradient(180deg, transparent 62%, var(--vert-c) 62%)}
.scene span{animation:arrive .45s cubic-bezier(.3,1.5,.5,1) backwards}
.scene span:nth-child(2){animation-delay:.1s} .scene span:nth-child(3){animation-delay:.2s} .scene span:nth-child(4){animation-delay:.3s}
.billes{width:100%; max-width:520px; height:auto}
.revele{opacity:0; transition:opacity .4s} .revele.on{opacity:1}
.bille{display:inline-block; width:1.1em; height:1.1em; border-radius:50%; background:var(--col); box-shadow:inset -3px -3px 0 rgb(0 0 0 / .15), 0 0 0 2px var(--edge); vertical-align:-.15em; margin-right:.3em}
.obj.barre::before{content:""; position:absolute; inset:46% -4px auto; height:5px; background:var(--rouge); border-radius:3px; rotate:-35deg}
.obj.barre{opacity:.75}
.obj.barre.parti{opacity:.15; transition:opacity .5s}

/* Réponses : relief doux, couleur pastel et lèvre teintée */
.choix .cc{position:relative}
.cc:nth-child(4n+1){--c:var(--bleu-c); --l:#c7d5fb} .cc:nth-child(4n+2){--c:var(--jaune-c); --l:#f4dc95}
.cc:nth-child(4n+3){--c:var(--violet-c); --l:#d8cafb} .cc:nth-child(4n+4){--c:var(--orange-c); --l:#f8cdb0}
.choice{width:100%; height:100%; min-height:90px; background:var(--c, var(--paper)); color:var(--ink); border:0; border-radius:24px; padding:14px 8px; font-weight:700;
  font-size:clamp(1.7rem,6vw,2.6rem); line-height:1.2; box-shadow:0 7px 0 var(--l, var(--line-strong)), 0 14px 24px rgb(30 30 90 / .1); min-width:0; overflow-wrap:anywhere;
  transition:transform .12s, box-shadow .12s; animation:monte .4s calc(.2s + var(--k,0) * .1s) backwards}
.choice:hover{transform:translateY(-2px)}
.choice:active{transform:translateY(5px); box-shadow:0 2px 0 var(--l, var(--line-strong))}
.choice.ok{background:linear-gradient(180deg, #5ef0b0, #18c48a); color:#fff; box-shadow:0 7px 0 #0f8f62, 0 16px 30px rgb(20 180 120 / .35); animation:youpi .6s}
.choice.ok .cursive{color:rgb(255 255 255 / .85)}
.choice.no{background:var(--bad-bg); opacity:.4; box-shadow:none; transform:translateY(7px); animation:non .35s; cursor:default}
.choice .emo{font-size:clamp(3rem,12vw,4.6rem); line-height:1.1; display:block}
.choice .emo.petit{font-size:clamp(2.2rem,8vw,3rem)}
.legende-choix{display:block; font-size:clamp(1.1rem,4vw,1.4rem)}
.choice svg{width:100%; max-width:130px; height:auto; display:block; margin:auto}
.en-ligne .choice{min-height:72px; padding:10px 18px}
.choice .crayon{max-width:none}
.lettre{display:flex; flex-direction:column; align-items:center; line-height:1.05}
.lettre .cursive{font-family:var(--f-title); font-weight:400; font-size:.55em; color:var(--ink-soft); line-height:1.7}
.tache{display:block; width:min(110px,82%); aspect-ratio:1; margin:auto; background:var(--col); border:3px solid var(--edge); border-radius:58% 42% 55% 45% / 45% 55% 45% 55%}
.ecoute{position:absolute; top:-12px; right:0; width:46px; height:46px; padding:0; border-radius:50%; background:#fff; border:0; color:var(--ink);
  font-size:1.15rem; line-height:1; box-shadow:0 6px 16px rgb(30 30 90 / .22); z-index:2; display:grid; place-items:center}
.ecoute:active{transform:scale(.92)}

/* Fin de partie */
.fin{display:flex; flex-direction:column; align-items:center; gap:20px; font-family:var(--f-ui)}
.stars{font-size:clamp(2.8rem,12vw,4.6rem); letter-spacing:.06em; line-height:1}
.stars span{display:inline-block}
.stars .on{color:var(--star); text-shadow:0 0 22px rgb(255 190 0 / .55); animation:arrive .5s cubic-bezier(.3,1.8,.5,1) var(--d,0ms) backwards, flotte 2.4s ease-in-out 1.6s infinite}
.stars .off{color:var(--star-off)}
.encore{margin:0; font-weight:800; color:var(--ink-soft)}
.encore .s{color:var(--star)}
.cadeau{display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 24px; border-radius:26px; background:linear-gradient(140deg, #fff6d8, #ffe6f2);
  box-shadow:0 12px 30px rgb(255 150 120 / .2)}
.cadeau p{margin:0; font-family:var(--f-round); font-weight:600; font-size:1.4rem; color:var(--ink)}
.bandeau{margin:0; font-family:var(--f-round); font-weight:600; font-size:1.3rem; color:#4a2500; padding:8px 20px; border-radius:999px;
  background:linear-gradient(180deg, #ffe08a, #ffad42); box-shadow:0 5px 0 #d77a1e; animation:youpi 1s ease-in-out 3}
.grade{font-size:3.4rem; line-height:1; animation:youpi 1s ease-in-out infinite}
.big{border:0; border-radius:20px; padding:14px 28px; font-family:var(--f-ui); font-weight:900; font-size:1.2rem; color:#fff;
  background:linear-gradient(180deg, #5ef0b0, #18c48a); box-shadow:0 6px 0 #0f8f62, 0 14px 26px rgb(20 180 120 / .3); transition:transform .12s, box-shadow .12s}
.big.alt{background:var(--paper); color:var(--ink); box-shadow:0 6px 0 var(--line-strong)}
.big.jaune{background:linear-gradient(180deg, #ffe08a, #ffad42); color:#4a2500; box-shadow:0 6px 0 #d77a1e}
.big:active{transform:translateY(5px); box-shadow:0 1px 0 #0f8f62}

/* Album : autocollants découpés, posés sur le ciel */
.album-tete{border-radius:22px; padding:16px 20px; display:flex; flex-direction:column; gap:10px}
.jauge{height:12px; border-radius:999px; background:rgb(255 255 255 / .18); overflow:hidden}
.jauge i{display:block; height:100%; width:var(--p,0%); border-radius:999px; background:linear-gradient(90deg, #ffb347, var(--or)); box-shadow:0 0 12px rgb(255 200 90 / .7); transition:width .6s}
.album-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:18px}
.sticker{aspect-ratio:1; min-width:0; border-radius:26px; padding:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff;
  background:var(--verre); border:1px solid var(--verre-bord); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 10px 26px rgb(16 10 70 / .25);
  rotate:var(--r,0deg); animation:arrive .45s cubic-bezier(.3,1.6,.5,1) backwards}
.sticker .e{font-size:clamp(2.6rem,9vw,3.4rem); line-height:1.1;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 8px rgb(16 10 70 / .35))}
.sticker .nom{font-size:.88rem; font-weight:800; line-height:1.15; text-align:center}
.sticker.cache{background:rgb(255 255 255 / .05); border:1.5px dashed rgb(255 255 255 / .3); box-shadow:none; color:rgb(255 255 255 / .35); font-size:2.2rem; font-family:var(--f-round)}
.sheet .sticker{background:#fff; color:var(--ink); border:0; box-shadow:0 10px 24px rgb(30 30 90 / .18)}
.sticker.neuf{width:120px; animation:arrive .6s cubic-bezier(.3,1.8,.5,1) .8s backwards, danse 1.2s ease-in-out 1.6s infinite}
.sticker.danse{animation:youpi .6s}

/* Animations */
@keyframes arrive{from{opacity:0; transform:scale(.5) translateY(20px)}}
@keyframes monte{from{opacity:0; transform:translateY(24px)}}
@keyframes pop{from{opacity:0; transform:scale(.7)}}
@keyframes flotte{50%{translate:0 -10px}}
@keyframes youpi{30%{scale:1.15; rotate:-3deg}60%{scale:.96; rotate:2deg}}
@keyframes bump{40%{scale:1.2}}
@keyframes danse{25%{rotate:-6deg}75%{rotate:6deg}}
@keyframes non{25%{translate:-7px 0}75%{translate:7px 0}}
@keyframes respire{50%{transform:translateY(-3px) scaleY(1.02)}}
@keyframes plane{50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes saute{30%{transform:translateY(-24px) rotate(-6deg)}60%{transform:translateY(0)}78%{transform:translateY(-8px)}}
@keyframes penche{30%{transform:rotate(-10deg)}70%{transform:rotate(7deg)}}
@keyframes battreG{50%{transform:rotate(28deg)}} @keyframes battreD{50%{transform:rotate(-28deg)}}
@keyframes cligne{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes scintille{to{opacity:.45}}
@keyframes aurore{to{transform:translate(8vmax, 6vmax) scale(1.15)}}
@keyframes pulse{50%{opacity:.75; scale:1.03}}
@keyframes derive{to{transform:translateX(-220px)}}
@keyframes brille{to{background-position:250% 0}}
@keyframes bordure{to{--a:360deg}}
@keyframes bouchon{50%{transform:translateY(-12px)}}
@keyframes ombre{50%{transform:scale(.82); opacity:.7}}
.total.bump .s{animation:bump .6s}
.conf{position:fixed; width:13px; height:13px; pointer-events:none; z-index:20; font-size:26px; line-height:13px; font-style:normal}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* Petits écrans */
@media (max-width:560px){
  .hero{padding-top:18px}
  .hero-txt{padding-right:86px}
  .hero-hibou{position:absolute; right:0; top:10px; margin:0}
  .hero-hibou .hibou{--hw:88px}
  .bulle-mini{display:none}
  .rang{flex:1 1 100%}
  .xp{width:100%}
  .barre-haut .txt{display:none}
  .etape{width:140px; margin-left:calc(var(--x) - 70px)}
  .rond{width:84px; height:84px; font-size:2.4rem}
  .defi-go{padding:10px 14px}
}

/* Paysage : animations */
@keyframes derive-ciel{from{transform:translateX(-260px)} to{transform:translateX(calc(100vw + 260px))}}
@keyframes vol{from{transform:translateX(-60px) translateY(0)} 50%{transform:translateX(50vw) translateY(-30px)} to{transform:translateX(calc(100vw + 60px)) translateY(10px)}}
@keyframes battement{to{transform:scaleY(.4)}}
@keyframes reflet{0%,55%{left:-90px}100%{left:110%}}
@keyframes reflet-eau{0%,100%{opacity:0; transform:scaleX(.4)}50%{opacity:.75; transform:scaleX(1)}}
@keyframes navigue{from{transform:translateX(-120px)} to{transform:translateX(calc(100vw + 120px))}}
@keyframes tangue{50%{transform:rotate(4deg) translateY(2px)}}
@keyframes ecume{to{stroke-dashoffset:-96}}
@keyframes clapot{50%{transform:scale(1.03)}}
@keyframes balance{50%{transform:rotate(3deg)}}

/* Album et autocollants sur la mer */
.sticker{background:rgb(255 255 255 / .9); color:var(--ink); border:0; box-shadow:0 10px 24px rgb(5 50 90 / .22)}
.sticker.cache{background:rgb(255 255 255 / .12); border:2px dashed rgb(255 255 255 / .55); color:rgb(255 255 255 / .7)}
.jauge{background:#e5ebf3}
.dots i{background:rgb(255 255 255 / .35)}

/* ---------- Missions de l'accueil : la fusée et le défi du jour ---------- */
.missions{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:16px; margin-bottom:60px}
.fusee-carte{position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; width:100%; text-align:left; color:#fff; padding:12px 14px; border:0; border-radius:26px;
  background:radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%) 0 0 / 60px 50px, radial-gradient(1px 1px at 70% 70%, #fff 50%, transparent 51%) 0 0 / 44px 38px,
    linear-gradient(135deg, #1b2a7a, #3b2a96 60%, #5b3bd6);
  box-shadow:0 8px 0 #141c5a, 0 18px 34px rgb(30 30 120 / .4); transition:transform .15s, box-shadow .15s}
.fusee-carte:hover{transform:translateY(-2px)} .fusee-carte:active{transform:translateY(6px); box-shadow:0 2px 0 #141c5a}
.fusee-carte b{display:block; font-family:var(--f-round); font-weight:600; font-size:1.3rem; line-height:1.2}
.fusee-carte small{display:block; font-size:.95rem; font-weight:800; color:rgb(255 255 255 / .85); line-height:1.3}
.fc-fusee{flex:none; width:44px; animation:flotte 3s ease-in-out infinite}
.fc-fusee svg{width:100%; height:auto; display:block}
.fc-fusee .flamme{opacity:0}
.fusee-carte.prete .fc-fusee .flamme{opacity:1; transform-box:fill-box; transform-origin:50% 0; animation:flamme .12s infinite alternate}
.carbu-jauge{display:block; height:10px; margin-top:7px; border-radius:99px; background:rgb(255 255 255 / .2); overflow:hidden}
.carbu-jauge i{display:block; height:100%; width:var(--p,0%); border-radius:99px; background:linear-gradient(90deg, #ffb347, #ffe066); box-shadow:0 0 12px rgb(255 210 90 / .7); transition:width .8s}
.fc-go{flex:none; padding:10px 14px; border-radius:999px; font-weight:900; font-size:.98rem; white-space:nowrap; color:#fff; background:rgb(255 255 255 / .16)}
.fusee-carte.prete .fc-go{color:#0d5a3e; background:linear-gradient(180deg, #7dffc4, #2fd897); box-shadow:0 4px 0 #13a06d; animation:appel 1.4s ease-in-out infinite}
.fusee-carte.non{animation:non .4s}
.carbu-fin{display:flex; align-items:center; gap:10px; margin:0; width:min(100%, 360px); font-weight:800; color:var(--ink-soft)}
.carbu-fin .carbu-jauge{flex:1; margin:0; background:var(--line)}
.espace-pret{background:linear-gradient(135deg, #1b2a7a, #5b3bd6)} .espace-pret p{color:#fff} .espace-pret .petit{font-family:var(--f-ui); font-size:1rem; font-weight:700; opacity:.85}

/* ---------- Décollage ---------- */
#lancement{position:fixed; inset:0; z-index:60; overflow:hidden; background:#05061a}
.lc-ciel{position:absolute; left:0; right:0; bottom:0; height:400vh;
  background:linear-gradient(0deg, #bfe9ff 0%, #5cb9fb 10%, #2f7be0 22%, #1d3aa8 36%, #121c66 50%, #080b30 64%, #05061a 80%)}
.lc-etoiles{position:absolute; left:0; right:0; top:0; height:45%;
  background:radial-gradient(1.6px 1.6px at 10% 20%, #fff 50%, transparent 51%) 0 0 / 120px 110px, radial-gradient(1.2px 1.2px at 60% 70%, #fff 50%, transparent 51%) 0 0 / 90px 80px,
    radial-gradient(2px 2px at 40% 40%, #fff 50%, transparent 51%) 0 0 / 170px 150px}
.lc-nuage{position:absolute; width:220px; height:110px; opacity:.95;
  background:radial-gradient(circle at 30% 70%, #fff 0 26%, transparent 27%), radial-gradient(circle at 52% 45%, #fff 0 30%, transparent 31%),
    radial-gradient(circle at 74% 62%, #fff 0 22%, transparent 23%), radial-gradient(ellipse 46% 22% at 50% 70%, #f2f9ff 0 98%, transparent 100%)}
.lc-sol{position:absolute; left:0; right:0; bottom:0; height:14vh; background:linear-gradient(180deg, #5fd3ea, #1197c8)}
.lc-sol::before{content:""; position:absolute; left:50%; bottom:3vh; width:min(70vw, 420px); height:9vh; translate:-50% 0; border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, #93e463, #3aa94b 60%, #f4cd84 61%, #e2b46a 75%, transparent 76%)}
.lc-pas{position:absolute; left:50%; bottom:8vh; width:120px; height:14px; translate:-50% 0; border-radius:4px; background:linear-gradient(180deg, #c9d2de, #8a96a8)}
.lc-fusee{position:absolute; left:50%; bottom:calc(8vh + 12px); width:clamp(70px, 12vw, 110px); margin-left:calc(clamp(70px, 12vw, 110px) / -2); will-change:transform}
.lc-fusee svg{width:100%; height:auto; display:block}
.lc-fusee .flamme{opacity:0; transform-box:fill-box; transform-origin:50% 0}
.lc-fusee.feu .flamme{opacity:1; animation:flamme .1s infinite alternate}
.lc-fusee.tremble svg{animation:tremble .07s infinite}
.lc-compte{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.lc-compte span{font-family:var(--f-round); font-weight:700; font-size:clamp(6rem, 24vw, 12rem); color:#fff; text-shadow:0 8px 30px rgb(10 40 100 / .5); animation:compte 1s ease-out both}
.lc-compte .go{font-size:clamp(3rem, 12vw, 6rem); color:#ffe066}
.lc-fumee{position:fixed; z-index:61; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgb(255 255 255 / .95), rgb(230 236 245 / .6) 55%, transparent 70%); animation:fumee var(--t,1.6s) ease-out forwards}

/* ---------- Le système solaire ---------- */
body[data-vue="espace"], body[data-vue="arcade"]{background:#060824}
#espace{min-height:100vh; color:#fff;
  background:radial-gradient(1px 1px at 70% 20%, rgb(255 255 255 / .8) 50%, transparent 51%) 0 0 / 90px 80px,
    radial-gradient(1.5px 1.5px at 20% 60%, #fff 50%, transparent 51%) 0 0 / 130px 120px,
    radial-gradient(ellipse at 70% 10%, rgb(110 70 220 / .35), transparent 60%), radial-gradient(ellipse at 10% 90%, rgb(40 120 220 / .3), transparent 60%), #060824}
.esp-sous{margin:0; color:rgb(255 255 255 / .75); font-weight:700}
.carbu-pill{gap:8px}
.temps-jauge{display:block; width:clamp(70px, 18vw, 140px); height:10px; border-radius:99px; background:var(--line); overflow:hidden}
.temps-jauge i{display:block; height:100%; width:var(--p,100%); border-radius:99px; background:linear-gradient(90deg, #ff8a3d, #ffd84a); transition:width .3s linear}
.temps-txt{font-variant-numeric:tabular-nums; min-width:2.6em}
.systeme{position:relative; width:100%; height:min(64vh, 640px); min-height:360px; margin:4px 0 10px}
.nebuleuse{position:absolute; inset:-60px 0; pointer-events:none; z-index:0; -webkit-mask:linear-gradient(transparent, #000 18%, #000 82%, transparent); mask:linear-gradient(transparent, #000 18%, #000 82%, transparent);
  background:radial-gradient(ellipse 40% 30% at 18% 30%, rgb(140 80 255 / .22), transparent 70%), radial-gradient(ellipse 35% 28% at 85% 70%, rgb(40 160 255 / .18), transparent 70%),
    linear-gradient(160deg, transparent 30%, rgb(190 170 255 / .08) 45%, rgb(255 255 255 / .1) 50%, rgb(190 170 255 / .08) 55%, transparent 70%)}
.nebuleuse::before, .nebuleuse::after{content:""; position:absolute; inset:0;
  background:radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%) 0 0 / 160px 140px, radial-gradient(2px 2px at 60% 70%, #fff 50%, transparent 51%) 0 0 / 210px 190px,
    radial-gradient(1px 1px at 40% 40%, #cfe1ff 50%, transparent 51%) 0 0 / 70px 90px; animation:scintille 2.6s ease-in-out infinite alternate}
.nebuleuse::after{background-position:80px 50px, 30px 120px, 20px 40px; animation-delay:-1.3s; animation-duration:3.4s}
.orbite{position:absolute; left:50%; top:50%; translate:-50% -50%; border:1px solid rgb(255 255 255 / .12); border-radius:50%; pointer-events:none; z-index:1}
.orbite.o-ceinture{border-color:transparent}
.astre{position:absolute; left:0; top:0; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.astre:focus-visible{outline:3px solid #ffd84a; outline-offset:4px}
/* le Soleil : son halo, et des rayons qui tournent doucement */
.soleil-esp{left:50%; top:50%; width:clamp(64px, 11vw, 104px); aspect-ratio:1; translate:-50% -50%; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 40% 38%, #fffbe6, #ffd23f 45%, #ff8a1f 80%); box-shadow:0 0 40px 14px rgb(255 190 60 / .55), 0 0 120px 44px rgb(255 140 40 / .25)}
.soleil-esp i{position:absolute; inset:-38%; z-index:-1; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(rgb(255 210 90 / .3) 0 5deg, transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 35%, transparent 70%); mask:radial-gradient(circle, #000 35%, transparent 70%); animation:soleil-tourne 60s linear infinite}
@keyframes soleil-tourne{to{rotate:360deg}}
/* les planètes */
.planete{width:calc(var(--t) * var(--e, 1)); height:calc(var(--t) * var(--e, 1)); border-radius:50%;
  background:var(--f); box-shadow:inset -5px -5px 10px rgb(0 0 0 / .45), 0 0 10px rgb(255 255 255 / .12); will-change:transform; transition:filter .2s}
.planete::after{content:""; position:absolute; inset:-12px; border-radius:50%}
.planete.terre{box-shadow:inset -5px -5px 10px rgb(0 0 0 / .45), 0 0 9px 2px rgb(120 190 255 / .55)}
.planete.jupiter{box-shadow:inset -9px -9px 16px rgb(0 0 0 / .45), 0 0 14px rgb(255 220 180 / .2)}
.planete.saturne, .planete.uranus{background:none; box-shadow:none}
.planete.saturne::before, .planete.uranus::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--f); box-shadow:inset -6px -6px 12px rgb(0 0 0 / .45)}
.planete.uranus::before{background:var(--f)}
.anneau-arr, .anneau-av{position:absolute; left:-68%; right:-68%; top:31%; bottom:31%; border-radius:50%; pointer-events:none; rotate:-16deg;
  border:calc(var(--t) * var(--e, 1) * .1) solid rgb(236 210 150 / .9); box-shadow:0 0 0 2px rgb(190 160 100 / .45), inset 0 0 0 2px rgb(255 240 200 / .35)}
.anneau-arr{z-index:-1} .anneau-av{z-index:1; clip-path:inset(50% 0 0 0)}
.uranus .anneau-arr{left:-30%; right:-30%; top:-30%; bottom:-30%; rotate:0deg; scale:.32 1; border:1.5px solid rgb(200 245 255 / .55); box-shadow:none}
.planete.lune{background:radial-gradient(circle at 60% 60%, #9a9a9a 0 14%, transparent 15%), radial-gradient(circle at 32% 32%, #fbfbfb, #bdbdbd 60%, #6d6d6d); box-shadow:inset -2px -2px 3px rgb(0 0 0 / .4)}
.planete.lune::after{inset:-8px}
.astre.vu{filter:brightness(1.25) drop-shadow(0 0 8px rgb(255 255 255 / .8))}
/* la ceinture d'astéroïdes */
.ceinture{position:absolute; inset:0; pointer-events:none; z-index:2}
.ceinture i{position:absolute; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:40%; background:#b9ad9e; opacity:.75}
/* la comète : sa queue part à l'opposé du Soleil */
.comete{width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; z-index:4;
  background:radial-gradient(circle, #fff 30%, #bfeaff 60%, rgb(140 210 255 / 0) 72%); box-shadow:0 0 12px 4px rgb(160 220 255 / .6)}
.comete i{position:absolute; left:50%; top:50%; width:calc(110px * var(--q, 1)); height:9px; translate:0 -50%; border-radius:0 99px 99px 0; pointer-events:none; z-index:-1;
  background:linear-gradient(90deg, rgb(220 245 255 / .85), rgb(150 210 255 / .35) 45%, transparent)}
.comete::after{content:""; position:absolute; inset:-12px; border-radius:50%}
/* la fiche d'un astre */
.esp-bulle{position:absolute; left:0; top:0; z-index:20; width:min(290px, calc(100vw - 32px)); padding:12px 15px 13px; border-radius:18px; pointer-events:none;
  background:rgb(255 255 255 / .97); color:var(--ink); box-shadow:0 14px 40px rgb(0 0 0 / .45), 0 0 0 3px rgb(255 216 74 / .55)}
.esp-bulle.vu{animation:bulle-in .25s cubic-bezier(.3,1.5,.5,1)}
@keyframes bulle-in{from{opacity:0; scale:.85}}
.eb-type{display:inline-block; font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#5b3bd6; background:#efe9ff; padding:2px 9px; border-radius:99px}
.esp-bulle b{display:block; font-family:var(--f-round); font-weight:600; font-size:1.35rem; line-height:1.15; margin-top:4px}
.esp-bulle p{margin:4px 0 0; font-weight:600; font-size:.98rem; line-height:1.38; color:var(--ink-soft)}
/* les cartes des jeux */
.esp-titre-jeux{margin:6px 0 14px; font-family:var(--f-round); font-weight:600; font-size:1.7rem; color:#fff}
.esp-titre-jeux small{display:block; margin-top:2px; font-family:var(--f-ui); font-size:1rem; font-weight:700; color:rgb(255 255 255 / .65)}
.esp-jeux{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:16px}
.esp-carte{display:flex; flex-direction:column; padding:0; text-align:left; color:#fff; border-radius:22px; overflow:hidden; cursor:pointer;
  border:1px solid rgb(255 255 255 / .16); background:linear-gradient(180deg, rgb(255 255 255 / .11), rgb(255 255 255 / .04)); box-shadow:0 10px 28px rgb(0 0 0 / .35);
  transition:transform .2s, border-color .2s, box-shadow .2s}
.esp-carte:hover, .esp-carte:focus-visible{transform:translateY(-4px); border-color:rgb(255 216 74 / .75); box-shadow:0 16px 36px rgb(0 0 0 / .45), 0 0 24px rgb(255 216 74 / .25); outline:none}
.esp-photo{position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:#0b1040}
.esp-photo img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s}
.esp-carte:hover .esp-photo img{transform:scale(1.06)}
.esp-photo::after{content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(transparent, rgb(12 14 52 / .75)); pointer-events:none}
.esp-badge{position:absolute; left:10px; top:10px; z-index:1; width:44px; height:44px; display:grid; place-items:center; font-size:1.5rem; border-radius:14px;
  background:rgb(10 14 50 / .6); border:1px solid rgb(255 255 255 / .25); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.esp-corps{display:flex; flex-direction:column; gap:5px; flex:1; padding:12px 14px 14px}
.esp-corps b{font-family:var(--f-round); font-weight:600; font-size:1.3rem; line-height:1.15}
.esp-resume{font-weight:600; font-size:.95rem; line-height:1.3; color:rgb(255 255 255 / .75)}
.esp-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:auto; padding-top:8px}
.esp-chip{font-size:.8rem; font-weight:800; padding:3px 10px; border-radius:99px; background:rgb(255 255 255 / .12)}
.esp-chip.or{background:rgb(255 216 74 / .2); color:#ffe48a}
.esp-jouer{margin-left:auto; padding:6px 14px; border-radius:99px; font-weight:900; font-size:.9rem; color:#3a2300; background:linear-gradient(135deg, #ffe066, #ff9f3d);
  box-shadow:0 3px 0 #c86f1c}
@media (max-width:560px){ .systeme{height:52vh; min-height:300px} .esp-titre-jeux{font-size:1.4rem} }

/* ---------- Un mini-jeu ---------- */
#arcade{position:fixed; inset:0; z-index:5; background:#060824}
#jeu-canvas{position:absolute; inset:0; display:block; touch-action:none; cursor:none}   /* le vaisseau ou le panier sert de curseur */
.arcade-hud{position:absolute; left:0; right:0; top:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; pointer-events:none}
.arcade-hud > *{pointer-events:auto}
.arcade-hud #arc-retour{margin-right:auto}
.arcade-hud .pill{min-height:42px; padding:4px 14px; font-size:.98rem}
.arcade-voile{position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:20px; background:rgb(6 8 36 / .55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.arc-carte{width:min(100%, 440px); display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; color:var(--ink); background:#fff; border-radius:30px;
  padding:26px 24px; box-shadow:0 30px 70px rgb(0 0 0 / .45); animation:arrive .5s cubic-bezier(.3,1.5,.5,1)}
.arc-carte h2{margin:0; font-family:var(--f-round); font-weight:700; font-size:clamp(1.6rem, 6vw, 2.2rem)}
.arc-carte p{margin:0; font-weight:700; color:var(--ink-soft)}
.arc-ico{font-size:3.4rem; line-height:1; animation:flotte 2.5s ease-in-out infinite}
.arc-record{color:#b86e00!important}

@keyframes flamme{from{transform:scaleY(.85)} to{transform:scaleY(1.15)}}
@keyframes tremble{25%{translate:-2px 1px}75%{translate:2px -1px}}
@keyframes compte{from{opacity:0; transform:scale(2.2)} 30%{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(.8)}}
@keyframes fumee{from{opacity:.95; transform:scale(.4)} to{opacity:0; transform:translate(var(--dx,0), 90px) scale(2.6)}}
@keyframes appel{50%{transform:scale(1.06)}}
@media (max-width:560px){ .arcade-hud .pill{padding:4px 10px} .temps-jauge{width:60px} }
.arc-legende{display:flex; flex-direction:column; gap:6px; width:100%; margin:4px 0}
.arc-legende span{padding:7px 12px; border-radius:14px; font-weight:800; font-size:1rem; text-align:left}
.arc-legende .bon{background:#fff3d1; color:#7a5200} .arc-legende .mauvais{background:#ffe1e1; color:#b0102a} .arc-legende .bonus{background:#dcf8ec; color:#0e7a52}
.carbu-pill.vide{background:#ffe1e1; color:#b0102a; animation:appel 1.2s ease-in-out infinite}

/* ---------- La course des tables d'addition ---------- */
.course-choix{display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; font-family:var(--f-ui)}
.course-titre{margin:0; font-family:var(--f-round); font-weight:600; font-size:clamp(1.4rem,4.5vw,1.9rem)}
.course-modes{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; width:100%}
.course-mode{display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 12px; border:0; border-radius:24px; color:#fff;
  box-shadow:0 7px 0 rgb(0 0 0 / .18), 0 14px 26px rgb(30 30 90 / .15); transition:transform .12s, box-shadow .12s}
.course-mode:hover{transform:translateY(-3px)} .course-mode:active{transform:translateY(5px); box-shadow:0 2px 0 rgb(0 0 0 / .18)}
.course-mode b{font-family:var(--f-round); font-weight:600; font-size:1.35rem} .course-mode small{font-weight:800; opacity:.92}
.cm-ico{width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:2.4rem; background:rgb(255 255 255 / .22)}
.m-decouverte{background:linear-gradient(160deg, #3ddc97, #16a874)} .m-rapide{background:linear-gradient(160deg, #5b8cff, #2f5fe0)}
.m-expert{background:linear-gradient(160deg, #ff6b7d, #e0364f)}
.course{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; font-family:var(--f-ui)}
.course-haut{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; width:100%; font-weight:800; color:var(--ink-soft)}
.course-haut span{background:var(--paper); border-radius:99px; padding:4px 14px}
.c-chrono b{color:var(--ink); font-variant-numeric:tabular-nums}
.piste{position:relative; width:100%; border-radius:18px; overflow:hidden; background:#3a3f4b;
  background-image:repeating-linear-gradient(90deg, rgb(255 255 255 / .55) 0 26px, transparent 26px 52px); background-size:100% 4px; background-repeat:repeat-x; background-position:0 50%;
  box-shadow:inset 0 6px 0 #e0364f, inset 0 -6px 0 #22a865}
.couloir{position:relative; height:66px}
.c-nom{position:absolute; left:10px; top:6px; font-size:.75rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:rgb(255 255 255 / .55)}
.voiture{position:absolute; left:0; top:50%; translate:0 -50%; width:62px; height:56px; display:grid; place-items:center; font-size:3.4rem; line-height:1;
  transform:scaleX(-1); transition:left .35s cubic-bezier(.3,1.2,.5,1)}
.voiture.rival{transform:none; transition:none; width:56px}
.voiture.rival svg{width:46px; height:auto}
.arrivee{position:absolute; right:0; top:0; bottom:0; width:22px;
  background:conic-gradient(#fff 25%, #222 0 50%, #fff 0 75%, #222 0) 0 0 / 11px 11px}
.c-question{font-family:var(--f-lire); font-weight:700; font-size:clamp(2.6rem,10vw,4rem); line-height:1.1; animation:monte .3s}
.c-pave{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; width:100%}
.c-touche{min-height:62px; border:0; border-radius:16px; background:var(--jaune-c); color:var(--ink); font-family:var(--f-lire); font-weight:700;
  font-size:clamp(1.5rem,5vw,2.1rem); box-shadow:0 5px 0 #f4dc95; transition:transform .1s, box-shadow .1s}
.c-touche:active{transform:translateY(4px); box-shadow:0 1px 0 #f4dc95}
.c-touche.bon{animation:touche-bon .45s}
.c-touche.faux{animation:non .35s, touche-faux .6s}
@keyframes touche-bon{40%{background:#5ef0b0; transform:scale(1.08)}}
@keyframes touche-faux{30%{background:#ffd0d6}}
.course-res{margin:0; padding:10px 16px; border-radius:18px; background:var(--paper); font-weight:800; color:var(--ink); text-align:center}
.course-res.gagne{background:linear-gradient(135deg, #e3fbef, #c9f5e0); color:#0e7a52}
@media (max-width:480px){ .couloir{height:56px} .voiture{font-size:2.1rem} .c-touche{min-height:54px} }
.esp-nouveau{position:absolute; right:10px; top:10px; z-index:1; padding:4px 11px; border-radius:99px; font-size:.8rem; font-weight:900; color:#fff;
  background:linear-gradient(135deg, #ff5a7a, #ff8a3d); box-shadow:0 3px 10px rgb(255 90 122 / .5); rotate:4deg}
/* la carte « La fusée est prête » en fin de partie : un gros bouton qui fait décoller */
button.espace-pret{border:0; width:min(100%, 420px); cursor:pointer; box-shadow:0 10px 30px rgb(91 59 214 / .45), 0 0 0 3px rgb(255 216 74 / .7);
  animation:appel 1.6s ease-in-out infinite; transition:filter .2s}
button.espace-pret:hover{filter:brightness(1.12)}
button.espace-pret:focus-visible{outline:3px solid #ffd84a; outline-offset:4px}
.pret-go{padding:8px 20px; border-radius:99px; font-weight:900; font-size:1.1rem; color:#3a2300; background:linear-gradient(135deg, #ffe066, #ff9f3d); box-shadow:0 3px 0 #c86f1c}

/* Jeux corsés (novembre) : deux images côte à côte, paires de dés, 5 objets en ligne */
.choice .emo.duo{font-size:clamp(2.2rem,9vw,3.6rem); white-space:nowrap}
.choice .paire-des{display:flex; gap:6px; justify-content:center}
.choice .paire-des svg{width:45%; max-width:72px}
.scene span:nth-child(5){animation-delay:.4s}

/* Jeu maîtrisé (5/5 trois fois de suite) : la médaille sur le chemin et le message de fin */
.medaille{position:absolute; bottom:-6px; left:-10px; font-size:1.8rem; line-height:1; filter:drop-shadow(0 4px 6px rgb(5 40 80 / .35))}
.maitrise-fin{margin:0; padding:10px 18px; border-radius:18px; background:#fff3c4; color:var(--ink); font-weight:800; text-align:center; max-width:460px}
.cadeau p.petit{font-family:var(--f-ui); font-size:1rem; font-weight:700; max-width:420px; text-align:center}

/* Les exercices faits : le bouton 📋 de l'accueil et sa bulle */
.exos-bulle{position:absolute; top:calc(100% + 12px); right:0; z-index:50; width:min(380px, calc(100vw - 32px)); max-height:min(70vh, 560px); overflow:auto;
  padding:14px 16px 16px; border-radius:22px; background:var(--surface); color:var(--ink); font-family:var(--f-ui); box-shadow:0 18px 40px rgb(10 30 70 / .3)}
.exos-bulle::before{content:""; position:absolute; top:-8px; left:44px; width:16px; height:16px; background:var(--surface); rotate:45deg; border-radius:3px; left:var(--fleche, 44px)}
.exos-tete{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:1.15rem}
.exos-ferme{width:36px; height:36px; border:0; border-radius:50%; background:var(--paper); color:var(--ink); font-weight:900}
.exos-total{margin:4px 0 10px; color:var(--ink-soft); font-weight:700}
.exos-liste{display:flex; flex-direction:column}
.exos-ligne{display:grid; grid-template-columns:36px 1fr 44px 48px; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line)}
.exos-cols{border-top:0; padding-top:0; font-size:.78rem; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em}
.exos-cols span:nth-child(n+3), .exos-jour, .exos-compte{text-align:center}
.exos-ico{font-size:1.5rem; line-height:1; text-align:center}
.exos-nom{display:block; font-weight:800; line-height:1.2}
.exos-ligne small{display:block; color:var(--ink-soft); font-weight:700; font-size:.8rem}
.exos-jour{font-weight:800; color:var(--ink-soft)}
.exos-compte{font-weight:900; font-size:1.15rem; background:var(--jaune-c); border-radius:999px; padding:2px 0}
.exos-vide{margin:0; color:var(--ink-soft); font-weight:700}

/* Exercice acquis (5/5 trois fois de suite) : fermé, en attendant d'être remplacé */
.etape.acquis .rond{background:linear-gradient(180deg, #fff6d0, #ffe08a)}
.etape.acquis .ico-acquis{opacity:.45; filter:grayscale(.6)}
.etape.acquis .medaille{bottom:auto; left:auto; top:50%; right:50%; translate:50% -50%; font-size:2.6rem}
.acquis-tag{color:#fff; font-weight:900; background:rgb(20 150 90 / .75)}
.exos-acquis{font-size:.8rem; font-weight:900; color:#0f7a4f; white-space:nowrap}
.course-mode:disabled{opacity:.55; filter:grayscale(.5); cursor:default; transform:none}

/* Compteur de parties sans faute sous chaque exercice (5 = acquis) */
.sans-faute{font-family:var(--f-ui); font-size:.8rem; font-weight:900; line-height:1; padding:4px 9px; border-radius:99px; color:rgb(255 255 255 / .6); background:rgb(5 40 80 / .3)}
.sans-faute.en-cours{color:#fff; background:rgb(255 170 30 / .85)}

/* Les petits problèmes : une histoire à écouter (plus petite que les phrases à lire) */
.pb-ico{font-size:clamp(2.6rem,10vw,3.6rem); line-height:1}
.phrase.probleme{font-size:clamp(1.25rem,4.4vw,1.8rem); font-weight:700; max-width:640px}
.phrase.probleme b{display:block; margin-top:6px; color:var(--ink)}

/* Bulle 📋 : onglets « Faits » / « Acquis » */
.exos-onglets{display:flex; gap:6px; margin:10px 0 2px; padding:4px; border-radius:14px; background:var(--paper)}
.exos-onglets button{flex:1; border:0; border-radius:10px; padding:7px 8px; background:transparent; color:var(--ink-soft); font-weight:800; font-size:.95rem}
.exos-onglets button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 2px 8px rgb(10 30 70 / .12)}
.exos-badge{display:inline-block; min-width:22px; padding:0 6px; margin-left:4px; border-radius:99px; background:#ffe08a; color:#5a3b00; font-size:.8rem; line-height:1.5}
.exos-ligne.exos-ligne-acquis{grid-template-columns:36px 1fr 36px}
.exos-medaille{font-size:1.4rem; text-align:center}

/* Réglages parents : sauvegarder / restaurer la progression */
.parents-boutons{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.parents .sauvegarde-info{flex-basis:100%; max-width:none; margin:0; font-size:.85rem; color:var(--ink-soft)}