:root{
  --sky:#EAF5FF; --paper:#FFFFFF; --ink:#27324A; --ink-2:#5B6782; --line:#D6E1EE;
  --sun:#FFC94A; --sun-soft:#FFF3CF; --sea:#56B7D9; --sea-soft:#DDF3FB;
  --lime:#8CCB2E; --lime-soft:#EEF8DC; --lav:#F1EEFC; --ok:#2E9E5B; --ok-soft:#E3F6EA; --no:#E0624B; --no-soft:#FDECE8;
  --r:22px; color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 16px/1.5 "Nunito",system-ui,sans-serif;padding:14px 16px 28px;-webkit-tap-highlight-color:transparent}
.wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:"Baloo 2","Nunito",system-ui,sans-serif;line-height:1.08;margin:0;font-weight:800;text-wrap:balance}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
.muted{color:var(--ink-2)}

/* barre du haut */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:22px;background:none;border:none;padding:0}
.brand .hex{width:22px;height:22px;background:var(--lime);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.panel{background:var(--paper);border-radius:var(--r);padding:18px}
.btn{border:none;border-radius:16px;padding:12px 20px;font-weight:800;font-size:16px;background:var(--ink);color:#fff;min-height:48px}
.btn.soft{background:var(--sky);color:var(--ink)}
.btn.big{font-size:20px;padding:14px 26px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.center{justify-content:center;text-align:center}

/* profils */
.who{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.kid{border:3px solid transparent;background:var(--paper);border-radius:24px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;font-size:19px}
.kid:hover{border-color:var(--sun)}
.kid .char{height:110px}
.kid small{font-weight:700;color:var(--ink-2);font-size:13.5px}
.kid.add{border:3px dashed var(--line);background:transparent;justify-content:center;min-height:190px;color:var(--ink-2)}
.field{display:flex;flex-direction:column;gap:6px;font-weight:800}
.field input{border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-size:18px;background:#fff}
.choices{display:flex;gap:8px;flex-wrap:wrap}

/* matières */
.subjects{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.subj{flex:none;border:3px solid var(--line);background:var(--paper);border-radius:18px;padding:10px 16px;font-weight:800;display:flex;gap:8px;align-items:center}
.subj[aria-pressed="true"]{border-color:var(--ink)}
.subj[disabled]{opacity:.55;cursor:not-allowed}
.subj em{font-style:normal;font-size:12px;background:var(--sky);border-radius:999px;padding:1px 8px}

/* amis */
.friends{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.friend{flex:none;width:96px;text-align:center;font-weight:800;font-size:13.5px}
.friend .slot{height:96px;border-radius:20px;background:var(--sky);display:grid;place-items:center;overflow:hidden}
.friend .slot .char{height:90px}
.friend.off .slot{background:#E3E9F1}
.friend.off .slot .char{filter:brightness(0) opacity(.18)}

/* carte : un seul chemin qui serpente (style Duolingo), un monde par étape qui s'illumine */
:root{--back:cubic-bezier(.34,1.56,.64,1);--saber:#18FFFF}
.path{display:flex;flex-direction:column;gap:26px;width:100%;max-width:640px;margin:0 auto}
.world{position:relative;--lit:1}
.w-banner{position:sticky;top:8px;z-index:6;display:flex;align-items:center;gap:12px;background:var(--main);color:#fff;border-radius:22px;padding:8px 14px 8px 8px;box-shadow:0 6px 0 var(--dark),0 10px 22px rgba(20,30,60,.18)}
.world.locked .w-banner{background:#64748B;box-shadow:0 6px 0 #475569}
.w-banner .char.char{height:58px;width:58px;flex:none;object-fit:contain;background:rgba(255,255,255,.95);border-radius:50%;padding:2px}
.w-title{flex:1;min-width:0}
.w-title h2{font-size:clamp(18px,4.4vw,24px);color:#fff}
.w-title p{margin:2px 0 0;font-size:13.5px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-count{flex:none;background:#fff;color:var(--dark);border-radius:999px;padding:4px 12px;font:800 16px "Baloo 2",sans-serif;text-align:center;line-height:1.1}
.world.locked .w-count{color:#475569}
.w-count small{display:block;font:800 10.5px "Nunito",sans-serif}
.w-body{position:relative;margin-top:12px;border-radius:28px;overflow:hidden;isolation:isolate;background:#DCE6F0}
.w-far{position:absolute;inset:-90px 0;transform:translate3d(0,var(--pf,0px),0)}
.w-far svg{width:100%;height:100%;display:block;will-change:transform;animation:kenburns 18s ease-in-out infinite alternate}
.w-mid,.w-front{position:absolute;inset:0;pointer-events:none}
.w-front{z-index:4;transform:translate3d(0,var(--pn,0px),0)}
.w-mark{position:absolute;top:var(--y);left:calc(50% + var(--s) * (min(50vw,320px) - 46px));translate:-50% 0;font-size:clamp(60px,15vw,108px);line-height:1;animation:float 6s ease-in-out infinite var(--d)}
.w-near{position:absolute;top:var(--y);left:calc(50% + var(--s) * min(50vw,320px));translate:-50% 0;font-size:clamp(84px,24vw,150px);line-height:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
/* le monde dort (gris) puis reprend ses couleurs à chaque niveau réussi */
.w-veil{position:absolute;inset:0;background:#808080;mix-blend-mode:saturation;opacity:calc((1 - var(--lit)) * .92);transition:opacity 1.2s}
.w-veil:after{content:"";position:absolute;inset:0;background:#fff;opacity:calc((1 - var(--lit)) * .35)}
.w-item{position:absolute;z-index:1;left:calc(50% + var(--s) * min(37vw,215px));translate:-50% -50%;font-size:40px;line-height:1;filter:grayscale(1);opacity:.35}
.w-item.on{filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));opacity:1;animation:float 4.5s ease-in-out infinite calc(var(--i) * -.6s)}
.w-item.pop{animation:item-pop 1s var(--back) 1s both,float 4.5s ease-in-out 2s infinite}
/* le tracé */
.trail{position:absolute;z-index:2;top:0;left:50%;width:400px;margin-left:-200px;overflow:visible;fill:none;stroke-linecap:round;pointer-events:none}
.t-road path{stroke:#fff;stroke-opacity:.8;stroke-width:24}
.t-fill path{stroke:var(--main);stroke-width:11}
.t-glow{stroke:var(--saber);stroke-width:18;opacity:.5;filter:blur(5px);animation:saber-glow 1.6s ease-in-out infinite}
.t-saber{stroke:#fff;stroke-width:6;stroke-dasharray:1;stroke-dashoffset:0}
.t-spark{stroke:#fff;stroke-width:12;stroke-dasharray:.05 .95;animation:spark 1.8s linear infinite}
/* les niveaux */
.node{position:absolute;z-index:3;left:calc(50% + var(--x));translate:-50% -50%;width:74px;height:68px;padding:0;border:none;background:none;display:grid;place-items:center}
.node .face{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:var(--main);color:#fff;font:800 26px "Baloo 2",sans-serif;box-shadow:0 7px 0 var(--dark),0 12px 18px rgba(20,30,60,.22);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.node .face svg{width:34px;height:34px}
.node:active .face{transform:translateY(5px);box-shadow:0 2px 0 var(--dark)}
.node.open .face{background:#fff;color:var(--dark);border:5px solid var(--main)}
.node.lock .face{background:#DCE3EC;color:#64748B;box-shadow:0 7px 0 #B6C2D1}
.node.lock .face svg{width:28px;height:28px}
.node[disabled]{cursor:not-allowed}
.node.done .face:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);translate:-120% 0;animation:shine 7s ease-in-out infinite calc(var(--i) * .4s)}
.node.next{width:90px;height:84px}
.node.next .face{background:var(--main);color:#fff;border:none;font-size:32px;animation:breathe 2.2s ease-in-out infinite}
.node.next:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:6px solid var(--main);animation:ring 1.8s ease-out infinite}
.crown{position:absolute;top:-14px;right:-6px;font-size:24px;font-style:normal;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.start-tip{position:absolute;z-index:2;top:50%;left:calc(100% + 14px);translate:0 -50%;background:#fff;color:var(--dark);border:3px solid #E2E8F0;border-radius:14px;padding:5px 12px;font:800 15px "Nunito",sans-serif;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;box-shadow:0 4px 0 #E2E8F0;animation:tip 1.6s ease-in-out infinite}
.start-tip:after{content:"";position:absolute;top:50%;right:100%;translate:0 -50%;border:9px solid transparent;border-right-color:#fff}
.node.tip-l .start-tip{left:auto;right:calc(100% + 14px)}
.node.tip-l .start-tip:after{right:auto;left:100%;border-right-color:transparent;border-left-color:#fff}
.node-friend{position:absolute;z-index:3;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800}
.node-friend .char.char{height:100px;width:auto;filter:brightness(0) opacity(.22)}
.node-friend b{font-size:64px;line-height:1;filter:grayscale(1) opacity(.4)}
.node-friend span{background:#fff;border-radius:999px;padding:3px 12px;font-size:14px;box-shadow:0 3px 0 rgba(20,30,60,.12)}
.node-friend.won .char{filter:drop-shadow(0 6px 8px rgba(0,0,0,.2));animation:sway 3s ease-in-out infinite;transform-origin:50% 95%}
.node-friend.won b{filter:none}
/* entrées en décalé, avec rebond à l'arrivée (quand le monde apparaît à l'écran) */
.world.pre .node,.world.pre .w-item,.world.pre .node-friend,.world.pre .t-saber{opacity:0}
.world.in .node{animation:land .7s cubic-bezier(.3,.9,.4,1) calc(var(--i) * 100ms + 120ms) both}
.world.in .w-item.on:not(.pop){animation:land .7s cubic-bezier(.3,.9,.4,1) calc(var(--i) * 100ms + 170ms) both,float 4.5s ease-in-out infinite 2s}
.world.in .w-item:not(.on){animation:land .7s cubic-bezier(.3,.9,.4,1) calc(var(--i) * 100ms + 170ms) both}
.world.in .node-friend{animation:remate 1s var(--back) 1s both}
.world.in .t-saber{animation:trace .9s cubic-bezier(.2,.8,.3,1) .9s both}
.world.in .t-glow,.world.in .t-spark{animation-delay:1.6s}
/* sabre laser : éclat sur le niveau réussi, puis une ligne de lumière s'ouvre comme un portail sur le suivant */
.node.burst:before,.node.burst:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:5px solid #fff;box-shadow:0 0 18px 4px var(--saber);animation:burst .9s ease-out .3s both}
.node.burst:after{animation-delay:.5s}
.node.portal:after{content:"";position:absolute;left:-34px;right:-34px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#fff;box-shadow:0 0 14px 5px var(--saber);animation:portal-line 1.3s ease-out 1.2s both}
.node.portal .face{animation:portal-open .8s var(--back) 1.6s both,breathe 2.2s ease-in-out 2.6s infinite}
.node.portal .start-tip{animation:remate .7s var(--back) 2.2s both,tip 1.6s ease-in-out 3s infinite}
.world.ignite .w-banner:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);animation:sweep 1.1s ease-out .4s both;pointer-events:none}
.world.complete .w-banner h2:after{content:" ★";color:#FFE45C}
@keyframes land{0%{opacity:0;transform:translateY(-42px) scale(.6)}55%{opacity:1;transform:translateY(4px) scale(1.1,.88)}78%{transform:translateY(-3px) scale(.96,1.05)}100%{opacity:1;transform:none}}
@keyframes remate{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.12)}80%{transform:scale(.95)}100%{opacity:1;transform:none}}
@keyframes item-pop{0%{transform:scale(.2) rotate(-25deg)}70%{transform:scale(1.45) rotate(8deg)}100%{transform:none}}
@keyframes float{50%{transform:translateY(-7px)}}
@keyframes breathe{50%{transform:scale(1.06)}}
@keyframes ring{0%{opacity:.6;transform:scale(.92)}100%{opacity:0;transform:scale(1.3)}}
@keyframes tip{50%{transform:translateX(5px)}}
.node.tip-l .start-tip{animation-name:tip-l}
@keyframes tip-l{50%{transform:translateX(-5px)}}
.node.portal.tip-l .start-tip{animation-name:remate,tip-l}
@media (max-width:520px){.start-tip{font-size:12px;padding:4px 8px;left:calc(100% + 8px);letter-spacing:0}.node.tip-l .start-tip{right:calc(100% + 8px)}.w-mark{left:calc(50% + var(--s) * (50vw - 18px));opacity:.5}}
@keyframes sway{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes shine{0%,80%{translate:-120% 0}100%{translate:120% 0}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1.5%)}}
@keyframes trace{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes spark{from{stroke-dashoffset:.05}to{stroke-dashoffset:-.95}}
@keyframes saber-glow{50%{opacity:.85;stroke-width:24}}
@keyframes burst{0%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(2.1)}}
@keyframes portal-line{0%{opacity:0;transform:scaleX(0)}25%{opacity:1;transform:scaleX(1)}55%{opacity:1;transform:scaleX(1) scaleY(1)}100%{opacity:0;transform:scaleX(1.1) scaleY(16)}}
@keyframes portal-open{0%{clip-path:inset(50% 0 50% 0);filter:brightness(2.2)}100%{clip-path:inset(0 0 0 0);filter:none}}
@keyframes sweep{from{opacity:1;translate:-100% 0}to{opacity:0;translate:100% 0}}
.scene{width:100%;height:auto;display:block;border-radius:18px}
.sc-el{opacity:.3;filter:grayscale(1);transform-box:fill-box;transform-origin:center;transform:scale(.7)}
.sc-el.on{opacity:1;filter:none;transform:none;transition:opacity .5s,filter .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.scene-cap{font-weight:800;font-size:13.5px;margin-top:6px}

/* niveau */
.lvl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lvl-head h2{font-size:22px;flex:1;min-width:180px}
.dots{display:flex;gap:6px}
.dots i{width:16px;height:16px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--ok)}
.dots i.cur{background:var(--sun);box-shadow:0 0 0 3px var(--ink) inset}
.stage{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.cast{display:flex;align-items:flex-end;justify-content:center;gap:2px;min-height:200px}
.cast .char{height:190px;object-fit:contain}
.cast .char.small{height:120px}
.cast .char.pop{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(.92) translateY(6px)}60%{transform:scale(1.05) translateY(-6px)}100%{transform:none}}
.card{background:var(--paper);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px}
.consigne{display:flex;gap:10px;align-items:center;font-weight:800;font-size:17px}
.pic{font-size:64px;line-height:1;text-align:center}
.sentence{font-family:"Baloo 2",sans-serif;font-size:30px;font-weight:800;text-align:center;line-height:1.25}
.sentence .blank{display:inline-block;min-width:3.2em;border-bottom:4px solid var(--ink);color:var(--ok)}
.sentence .w-ok{color:var(--ok)}
.sentence .w-bad{color:var(--no);text-decoration:underline wavy var(--no)}
.kiko-said{background:var(--sun-soft);border-radius:18px;padding:10px 14px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kiko-said .bad{text-decoration:line-through 2px var(--no);color:#8A5A00;font-family:"Baloo 2",sans-serif;font-size:22px}
.say{border:none;background:var(--sky);border-radius:50%;width:48px;height:48px;display:inline-grid;place-items:center;flex:none}
.say svg{width:24px;height:24px}
.say.big{width:84px;height:84px;background:var(--sea-soft)}
.say.big svg{width:40px;height:40px}
.hint{font-weight:800;color:var(--ink-2);font-size:16px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.opt{border:3px solid var(--line);background:var(--paper);border-radius:18px;padding:12px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:26px;min-height:80px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}
.opt.pic-opt{font-size:58px;min-height:110px}
.opt .say{position:absolute;top:6px;right:6px;width:34px;height:34px}
.opt .say svg{width:18px;height:18px}
.opt:hover{border-color:var(--sun)}
.opt.bad{background:var(--no-soft);border-color:var(--no);animation:shake .35s}
.opt.good{background:var(--ok-soft);border-color:var(--ok)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ask{font-size:30px;margin:0}
.opts.cards{grid-template-columns:repeat(3,1fr)}
.card-opt{flex-direction:column;align-items:stretch;min-height:200px;padding:14px;font-family:"Nunito",sans-serif;font-size:20px;font-weight:700}
.card-opt .cpic{font-size:72px;line-height:1;flex:1;display:grid;place-items:center}
.card-opt .cword{text-align:left}
.card-opt .ckey{position:absolute;right:10px;bottom:10px;border:2px solid var(--line);border-radius:8px;width:28px;height:28px;display:grid;place-items:center;font-size:14px;color:var(--ink-2)}
@media (max-width:520px){.opts.cards{grid-template-columns:1fr 1fr 1fr;gap:8px}.card-opt{min-height:150px;padding:8px}.card-opt .cpic{font-size:48px}.card-opt .ckey{display:none}.ask{font-size:24px}}
.typed{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.typed input{border:3px solid var(--line);border-radius:16px;padding:12px 14px;font-size:24px;font-weight:800;width:min(260px,100%);text-align:center;background:#fff}
.typed input.bad{border-color:var(--no);animation:shake .35s}
/* maths */
.mq{font-family:"Baloo 2",sans-serif;font-size:40px;font-weight:800;text-align:center;line-height:1.2;margin:0;letter-spacing:.02em}
.mq.small{font-size:26px}
.qb{display:inline-block;min-width:1.6em;border-bottom:4px solid var(--ink);color:var(--ink-2);text-align:center}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 .1em}
.fr b{display:block;padding:0 .15em}
.fr b:first-child{border-bottom:3px solid currentColor}
.problem{font-size:22px;font-weight:700;line-height:1.45;margin:0;text-align:center;text-wrap:pretty}
.mpic{font-size:48px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
.mpic svg{width:150px;height:auto}
.mpic .frac-pic{width:220px}.mpic .frac-pic.disc{width:150px}
.opt.pic-opt svg{width:84px;height:84px}
.opt .fr{font-size:28px}
.base{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.base i{display:block;background:var(--sea);border:2px solid #2D86A8;border-radius:3px}
.base .b-h{width:60px;height:60px;background-image:linear-gradient(#2D86A8 1px,transparent 1px),linear-gradient(90deg,#2D86A8 1px,transparent 1px);background-size:6px 6px}
.base .b-d{width:12px;height:60px;background-image:linear-gradient(#2D86A8 1px,transparent 1px);background-size:6px 6px}
.base .b-u{width:12px;height:12px;background:var(--sun);border-color:#C99A1E}
.money{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.coin{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE9A8,#E3B23C);border:3px solid #B98A1A;display:grid;place-items:center;font:800 19px "Baloo 2",sans-serif;color:#5A4200}
.bill{padding:16px 18px;border-radius:8px;background:#CDEBC0;border:3px solid #6FAE55;font:800 22px "Baloo 2",sans-serif;color:#2E5A1F}
.clock .face{fill:#fff;stroke:var(--ink);stroke-width:4}
.clock .ticks line{stroke:var(--ink);stroke-width:3}
.clock .nums text{font:800 14px "Nunito",sans-serif;fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.clock .hh{stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.clock .mh{stroke:var(--no);stroke-width:4;stroke-linecap:round}
.frac-pic .on{fill:var(--sun);stroke:var(--ink);stroke-width:2}
.frac-pic .off{fill:#fff;stroke:var(--ink);stroke-width:2}
.shape *{fill:var(--sea-soft);stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.worked{background:var(--lav);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.worked.half{background:var(--sun-soft)}
.worked h4{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.explain{margin:0;font-weight:700;text-align:center}
.colop{display:grid;justify-content:center;font:800 34px/1.25 "Baloo 2",ui-monospace,monospace;text-align:center;margin:0 auto}
.colop i{font-style:normal}
.colop .carry{font-size:18px;color:var(--no);align-self:end}
.colop .op{color:var(--ink-2)}
.colop .bar{grid-column:1/-1;border-top:4px solid var(--ink);margin:2px 0}
.colop .res{color:var(--ok)}
.colop .qb{min-width:.8em}
.typed .unit{align-self:center;font:800 24px "Baloo 2",sans-serif}
@media (max-width:520px){.mq{font-size:32px}.problem{font-size:19px}.coin{width:56px;height:56px;font-size:16px}}
.micwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.mic{width:104px;height:104px;border-radius:50%;border:none;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 6px 0 #11182A}
.mic svg{width:46px;height:46px}
.mic.on{background:var(--no);animation:pulse 1s ease-in-out infinite}
.mic-label{font-weight:800}
.feedback{min-height:28px;font-weight:800;text-align:center}
.feedback.ok{color:var(--ok)}
.feedback.no{color:var(--no)}
.tip{background:var(--sea-soft);border-radius:16px;padding:10px 14px;font-weight:700;display:flex;gap:10px;align-items:center}
.tip .char{width:52px;height:52px;object-fit:cover;object-position:top;border-radius:50%;background:#fff;flex:none;overflow:hidden}
.tip .svgchar svg{width:52px;height:52px}
.warn{background:var(--no-soft);border-radius:14px;padding:10px 14px;font-weight:700}

/* fin de niveau, nouvel ami */
.end{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.end .char{height:190px}
.end h2{font-size:34px}
.end .scene{max-width:520px}
.reveal .char{height:230px;animation:pop .7s ease}

/* personnages SVG : la pose devient un mouvement */
.svgchar{display:inline-block;aspect-ratio:200/220}
.svgchar svg{width:100%;height:100%;display:block}
.char.svgchar{height:190px}
.pose-rit svg,.pose-applaudit svg,.pose-danse svg{animation:hop .7s ease-in-out infinite}
.pose-reflechit svg,.pose-se-trompe svg{animation:tilt 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes hop{50%{transform:translateY(-8px)}}
@keyframes tilt{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}

/* carnet */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--sky);border-radius:16px;padding:12px}
.stat b{display:block;font-family:"Baloo 2",sans-serif;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.stat small{font-weight:700;color:var(--ink-2)}
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.list li{display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:8px;flex-wrap:wrap}
.list li small{color:var(--ink-2);font-weight:700;margin-left:auto}
.rules{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rules li{display:flex;gap:10px;font-weight:700}
.rules li:before{content:"";flex:none;width:12px;height:12px;margin-top:6px;background:var(--lime);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}

/* fenêtre */
.modal{position:fixed;inset:0;background:rgba(39,50,74,.45);display:grid;place-items:center;padding:16px;z-index:20}
.modal .panel{width:min(440px,100%);display:flex;flex-direction:column;gap:14px}

.foot{text-align:center;color:var(--ink-2);font-size:13px;font-weight:700}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.confetti.big i{width:13px;height:20px}
.confetti i:nth-child(even){animation-name:fall2}
@keyframes fall2{50%{transform:translate(-40px,55vh) rotate(260deg)}to{transform:translate(30px,110vh) rotate(620deg)}}

@media (max-width:760px){
  .unit,.stage,.grid2{grid-template-columns:1fr}
  .cast{min-height:0}
  .cast .char,.cast .char.svgchar{height:110px}.cast .char.small{height:80px}
  .sentence{font-size:25px}
  .stats{grid-template-columns:1fr 1fr 1fr}
  .stat b{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* maths cycle 3 : division posée, demi-droite graduée, angles, rectangles */
.potence{display:grid;grid-template-columns:auto auto;justify-content:center;font-family:"Baloo 2",sans-serif;font-size:30px;font-weight:800;line-height:1.3}
.potence .dvd{padding:0 .5em 0 0;text-align:right}
.potence .dvs{border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:0 .5em}
.potence .quo{grid-column:2;padding:0 .5em;color:var(--ok)}
.potence .quo .qb{color:var(--ink-2)}
.mpic .axis{width:min(380px,100%)}
.axis line{stroke:var(--ink);stroke-width:2}.axis .ax{stroke-width:3}
.axis text{font:800 15px "Nunito",sans-serif;fill:var(--ink);text-anchor:middle}
.axis .pt{fill:var(--no)}.axis .arrow{stroke:var(--no);stroke-width:3}
.angle line{stroke:var(--ink);stroke-width:4;stroke-linecap:round}.angle circle{fill:var(--ink)}
.angle .arc{fill:none;stroke:var(--no);stroke-width:3}
.opt.pic-opt svg.angle{width:100%;max-width:170px;height:auto}
.mpic .rect-pic{width:min(300px,100%)}
.rect-pic .r{fill:#FFF3C9;stroke:var(--ink);stroke-width:3}
.rect-pic .grid line{stroke:#D8B64A;stroke-width:1.5}
.rect-pic text{font:800 15px "Nunito",sans-serif;fill:var(--ink);text-anchor:middle}.rect-pic .side{text-anchor:start}
/* anglais étapes 6 à 10 : dictée, mots à remettre en ordre, dialogue, compréhension */
.gloss{text-align:center;margin:0;font-weight:800;color:var(--muted,#6B7280)}
.typed.wide input{width:min(560px,100%);text-align:left;font-size:20px}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{border:3px solid var(--line);background:var(--paper);border-radius:14px;padding:8px 14px;font:800 22px "Baloo 2",sans-serif;cursor:pointer}
.tile:disabled{opacity:.3}
.tile.on{border-color:var(--ok);background:#fff}
.order-line{min-height:56px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.order-line.bad{animation:shake .35s}
.dialog{display:flex;flex-direction:column;gap:8px}
.bubble{margin:0;background:var(--sun-soft);border-radius:16px;padding:8px 12px;font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.who-says{margin:0;text-align:center}
.read-text{background:#fff;border:3px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.read-text p{margin:0;font-size:19px;line-height:1.45;font-weight:600}
.ask.small{font-size:22px;text-align:center}
.opts.sentences{grid-template-columns:1fr}
.opts.sentences .opt{font-size:20px;min-height:56px}

/* Tochi Pro (16 ans et plus) : deux documents, carte postale, badges. Même univers, rien ne change pour les enfants. */
.subj.pro{border-style:dashed}
.subj.pro[aria-pressed="true"]{border-style:solid}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.doc{background:#fff;border:3px solid var(--line);border-radius:16px;padding:10px 12px;min-width:0}
.doc h4{margin:0 0 6px;font-size:15px}
.doc p{margin:0 0 6px;font-size:16px;line-height:1.45;font-weight:600}
.doc-table{width:100%;border-collapse:collapse;font-size:15px}
.doc-table th,.doc-table td{border-bottom:2px solid var(--line);padding:5px 4px;text-align:left}
.doc-table th{font-size:13px;color:var(--ink-2)}
.postcard{background:#fff;border:3px solid var(--line);border-radius:16px;padding:8px;max-width:420px;margin:8px auto;transform:rotate(-1.5deg)}
.postcard svg{width:100%;height:auto;display:block;border-radius:10px}
.pc-msg{margin:8px 4px 2px;font-size:16px;font-weight:700;font-style:italic;line-height:1.4}
.badge{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--sun);background:var(--sun-soft);border-radius:999px;padding:4px 14px 4px 4px;font-weight:800}
.badge b{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:20px}
.badge small{font-weight:600;color:var(--ink-2)}
.badge.off{border-color:var(--line);background:var(--paper);opacity:.6;padding-right:4px}
.teaser{margin:0;background:var(--lav);border-radius:14px;padding:10px 12px;font-weight:700}
.small-note{font-size:13px;margin:8px 0 0}
@media (max-width:620px){.docs{grid-template-columns:1fr}}

/* Compte famille (22/10) */
.compte{max-height:calc(100vh - 32px);overflow:auto}
.coche{display:flex;gap:10px;align-items:flex-start;font-weight:700;line-height:1.35}
.coche input{width:22px;height:22px;flex:none;margin-top:2px}
.code-secours{margin:0;font:800 26px/1.2 ui-monospace,Consolas,monospace;letter-spacing:1px;text-align:center;background:var(--sun-soft);border:3px dashed var(--sun);border-radius:14px;padding:14px;user-select:all;word-break:break-all}
.compte details{border:2px solid var(--line);border-radius:14px;padding:10px 12px}
.compte details[open]{display:flex;flex-direction:column;gap:10px}
.compte summary{font-weight:800;cursor:pointer}
.btn.danger{background:var(--no);color:#fff}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* ---------- Accueil façon page web (22/10) ---------- */
.accueil{display:flex;flex-direction:column;gap:22px}
.hero{position:relative;overflow:hidden;border-radius:28px;min-height:440px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:34px 34px 26px;isolation:isolate;box-shadow:0 18px 40px rgba(2,119,189,.18)}
.hero.compact{min-height:260px;padding:22px 26px}
.h-fond{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.h-soleil{transform-origin:700px 78px;animation:breathe 5s ease-in-out infinite}
.h-deco{position:absolute;left:var(--x);top:var(--y);font-size:28px;z-index:-1;animation:float 6s ease-in-out infinite var(--d);opacity:.9}
.h-texte{display:flex;flex-direction:column;gap:14px;color:#0B2545;max-width:560px}
.h-texte h1{font-size:clamp(32px,5.2vw,58px);line-height:1.02;letter-spacing:-.5px;animation:monte .8s cubic-bezier(.2,.9,.3,1) both}
.hero.compact .h-texte h1{font-size:clamp(24px,3.6vw,38px)}
.h-texte p{margin:0;font-size:clamp(17px,2vw,20px);font-weight:700;color:#12355B;animation:monte .8s .12s cubic-bezier(.2,.9,.3,1) both}
.h-texte .row{animation:monte .8s .24s cubic-bezier(.2,.9,.3,1) both}
.btn3d{background:#58CC02;color:#fff;font-size:20px;padding:16px 34px;border-radius:18px;box-shadow:0 6px 0 #46A302;text-transform:uppercase;letter-spacing:.6px;transition:transform .08s,box-shadow .08s}
.btn3d:hover{filter:brightness(1.05)}
.btn3d:active{transform:translateY(5px);box-shadow:0 1px 0 #46A302}
.btn.ghost{background:rgba(255,255,255,.85);color:#0B2545;border:2px solid #fff}
.h-scene{position:relative;height:340px}
.hero.compact .h-scene{height:200px}
.h-scene .char{position:absolute;bottom:0;height:62%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.18))}
.h-p1{left:2%;height:56%!important;animation:bob 2.6s ease-in-out infinite}
.h-p2{left:30%;height:78%!important;z-index:1;animation:bob 3s ease-in-out infinite -.8s}
.h-p3{right:0;height:66%!important;animation:bob 2.8s ease-in-out infinite -1.4s}
.bulle{position:absolute;background:#fff;color:#0B2545;font:800 17px "Baloo 2",sans-serif;padding:8px 14px;border-radius:18px;box-shadow:0 6px 14px rgba(0,0,0,.12);white-space:nowrap}
.bulle:after{content:"";position:absolute;bottom:-8px;left:22px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.h-scene .bulle{opacity:0;animation:bulle 9s infinite}
.b1{left:0;top:6%}.b2{left:30%;top:-2%;animation-delay:3s!important}.b3{right:0;top:10%;animation-delay:6s!important}
.hero.compact .bulle{display:none}
.chiffres{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chiffres span{background:var(--paper);border-radius:999px;padding:10px 18px;font:800 16px "Baloo 2",sans-serif;box-shadow:0 4px 0 var(--line)}
.qui{display:flex;flex-direction:column;gap:12px}
.qui h2{font-size:clamp(26px,4vw,36px)}
.demo{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:linear-gradient(135deg,#FFF8E1,#FFE0B2);border-radius:28px;padding:22px 26px;border:3px solid #FFCC80}
.d-perso{position:relative;width:170px;height:170px;display:grid;place-items:end center}
.d-perso .char{height:150px;animation:bob 2.6s ease-in-out infinite}
.demo{margin-top:18px}
.d-bulle{top:-34px;left:50%;transform:translateX(-50%);opacity:1}
.d-bulle:after{left:50%;margin-left:-9px}
.d-txt{display:flex;flex-direction:column;gap:10px}
.d-txt h2{font-size:clamp(24px,3.4vw,34px)}.d-txt p{margin:0;font-weight:700;font-size:18px}
.d-mic{width:64px;height:64px}
.atout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:var(--paper);border-radius:28px;padding:26px 30px}
.atout.inverse .a-img{order:2}
.a-img{position:relative;height:240px;display:grid;place-items:end center;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#E3F2FD,#FFF)}
.a-img .scene{position:absolute;inset:0;width:100%;height:100%}
.a-rond{position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,#FFE082,#FFF3E0 70%);top:12px}
.a-perso{position:relative;height:200px;animation:bob 3s ease-in-out infinite}
.a-deco{position:absolute;right:14%;top:14%;font-size:44px;animation:float 4s ease-in-out infinite}
.a-txt h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:10px;color:#0B2545}
.a-txt p{margin:0;font-size:18px;line-height:1.55;color:var(--ink-2);font-weight:600}
.bloc{display:flex;flex-direction:column;gap:14px}
.bloc>h2{font-size:clamp(26px,4vw,38px);text-align:center}
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.porte{background:var(--paper);border-radius:24px;overflow:hidden;box-shadow:0 6px 0 var(--line);transition:transform .2s}
.porte:hover{transform:translateY(-4px)}
.p-img{position:relative;height:150px;display:grid;place-items:end center}
.p-img .scene{position:absolute;inset:0;width:100%;height:100%}
.p-perso{position:relative;height:120px;margin-bottom:-6px}
.p-txt{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.p-txt h3{font-size:26px}.p-txt p{margin:0;color:var(--ink-2);font-weight:600}
.parents-acc{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:center;background:#0B2545;color:#fff;border-radius:28px;padding:26px 30px}
.parents-acc h2{font-size:clamp(26px,3.6vw,36px);text-align:left;color:#fff}
.parents-acc p{margin:6px 0 0;color:#BFD7EA;font-weight:700}
.parents-acc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.parents-acc li{font-weight:700;font-size:17px}.parents-acc li span{color:#58CC02;font-weight:900;margin-right:6px}
.fin-acc{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:12px 0 6px}
.fin-acc h2{font-size:clamp(28px,4.4vw,44px)}
.f-perso{height:150px;animation:bob 2.6s ease-in-out infinite}
.atout,.porte,.parents-acc,.fin-acc,.demo{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1)}
.porte{transition-delay:calc(var(--i,0) * 120ms)}
.vu{opacity:1!important;transform:none!important}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bulle{0%,4%{opacity:0;transform:translateY(8px) scale(.8)}8%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-6px)}}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:24px 18px 0;min-height:0;text-align:center}
  .h-texte{align-items:center}.h-texte .row{justify-content:center}
  .h-scene{height:220px}.hero.compact .h-scene{display:none}
  .h-deco{display:none} /* sur téléphone, les décorations passaient sur le titre */
  .demo{grid-template-columns:1fr;justify-items:center;text-align:center}.d-txt .row{justify-content:center}
  .atout{grid-template-columns:1fr;padding:20px}.atout.inverse .a-img{order:0}.a-img{height:200px}
  .portes{grid-template-columns:1fr}
  .parents-acc{grid-template-columns:1fr;padding:22px}
}
@media (prefers-reduced-motion:reduce){.atout,.porte,.parents-acc,.fin-acc,.demo{opacity:1;transform:none}.h-scene .bulle{opacity:1}}

/* ---------- En-tête : retour à l'accueil (22/10) ---------- */
body[data-ecran="accueil"] .accueil-btn{display:none}

/* ---------- Mode Pro (16 ans et plus, 22/10) : sobre et professionnel, mais chaleureux ----------
   Inspiré des tableaux de bord de formation pour adultes : fond clair et neutre, cartes nettes,
   une couleur d'accent (sarcelle), des chiffres qui disent où on en est. Mêmes personnages, en plus petit. */
body.mode-pro{--sky:#F3F6F9;--ink:#13293D;--ink-2:#51627A;--line:#DCE3EB;background:#F3F6F9}
body.mode-pro .panel{border:1px solid var(--line);box-shadow:0 1px 2px rgba(19,41,61,.05)}
body.mode-pro .btn{background:#00796B}
body.mode-pro .btn.soft{background:#E0F2F1;color:#004D40}
body.mode-pro .btn.big{border-radius:14px}
body.mode-pro .pill[aria-pressed="true"]{background:#13293D;border-color:#13293D}
body.mode-pro .tete-carte h1{font-size:clamp(26px,4.4vw,34px);letter-spacing:-.2px}
body.mode-pro .subj{border-width:2px;border-radius:14px}
body.mode-pro .subj[aria-pressed="true"]{border-color:#00796B;background:#E0F2F1}
body.mode-pro .friends .slot .char{height:62px}
body.mode-pro .friend small{display:block;font-size:12px;font-weight:700;color:var(--ink-2)}
body.mode-pro .stage .cast .char{max-height:150px}
.tableau-pro{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px}
.tp-carte{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.tp-carte b{font:800 26px/1.1 "Baloo 2",sans-serif;color:#13293D}
.tp-carte.tp-large b{font-size:19px}
.tp-carte small{color:var(--ink-2);font-weight:700}
.tp-barre{height:10px;background:#E0F2F1;border-radius:999px;overflow:hidden}
.tp-barre i{display:block;height:100%;background:linear-gradient(90deg,#26A69A,#00796B);border-radius:inherit;transition:width .8s ease}
@media (max-width:760px){.tableau-pro{grid-template-columns:repeat(3,1fr);gap:8px}.tp-large{grid-column:1/-1}.tp-carte{padding:10px 12px}.tp-carte b{font-size:21px}.tp-carte small{font-size:12px}}

/* étoiles qui scintillent dans le ciel de l'accueil (22/10) */
.etoile{position:absolute;left:var(--x);top:var(--y);width:var(--t);height:var(--t);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,#fff 0 18%,transparent 19%),conic-gradient(from 0deg,transparent 0 40deg,#FFF59D 45deg,transparent 50deg 130deg,#FFF59D 135deg,transparent 140deg 220deg,#FFF59D 225deg,transparent 230deg 310deg,#FFF59D 315deg,transparent 320deg);
  border-radius:50%;filter:drop-shadow(0 0 6px #fff);animation:scintille var(--v) ease-in-out infinite var(--d)}
.etoile:before{content:"";position:absolute;inset:-35%;background:linear-gradient(#fff,#fff) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat;opacity:.9}
@keyframes scintille{0%,100%{opacity:.15;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
@media (max-width:760px){.etoile{opacity:.7}}
@media (prefers-reduced-motion:reduce){.etoile{animation:none;opacity:.8}}
.d-perso.parle .char{animation:parle .35s ease-in-out infinite}
.d-perso.parle .d-bulle{background:#FFF59D}
@keyframes parle{50%{transform:translateY(-8px) scale(1.04)}}

/* test de niveau (22/10) */
.test-niveau{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto;width:100%}
.test-corps{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.test-perso{height:150px}
.test-q{display:flex;flex-direction:column;gap:12px}
.consigne-test{margin:0;font-weight:800}
.test-fin{max-width:620px;margin:0 auto}
.test-etape{margin:0;font:800 26px/1.2 "Baloo 2",sans-serif;color:#0B2545}
@media (max-width:620px){.test-corps{grid-template-columns:1fr}.test-perso{height:100px;justify-self:center}}

/* ---------- Français (22/10) ---------- */
.fr-show{font-family:"Baloo 2",sans-serif;font-size:56px;font-weight:800;text-align:center;margin:0;letter-spacing:.04em;line-height:1.1}
.fr-lire{font-size:34px;letter-spacing:.02em}
.opt.audio-opt{min-height:96px;flex-direction:column;gap:4px}
.opt.audio-opt .say{position:static;width:56px;height:56px}
.opt.audio-opt .say svg{width:28px;height:28px}
.opt.audio-opt b{font-size:18px;color:var(--ink-2)}
.opt.lettre-opt{font-size:52px;min-height:110px}
.opt small{font-size:16px}
.order-line.graphemes{gap:2px}
.order-line.graphemes .tile{padding:8px 10px}
.accents{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.accents .acc{min-width:44px;min-height:44px;font:800 20px "Baloo 2",sans-serif}
.copy-model p{font-family:"Baloo 2",sans-serif;font-size:24px;font-weight:800}
.fr-circuits .pill[aria-pressed="true"]{outline:3px solid var(--sun)}
.fluence{display:flex;flex-direction:column;gap:14px}
.fl-texte{background:#fff;border:3px solid var(--line);border-radius:18px;padding:16px 18px;font:700 24px/1.6 "Nunito",sans-serif}
.fl-texte.petit{font-size:17px;text-align:left}
.fl-texte span{border-radius:6px;transition:background .3s}
.fl-texte span.lu{background:var(--ok-soft)}
.fl-texte span.pas-lu{color:var(--ink-2)}
.fl-temps{font:800 34px "Baloo 2",sans-serif;min-width:3.5em;text-align:center}
.fl-score{font-size:22px;margin:0}
.fl-score b{font:800 52px "Baloo 2",sans-serif;color:var(--ok)}
.fl-carnet{width:100%;font-size:14px}
@media (max-width:520px){.fr-show{font-size:44px}.fl-texte{font-size:20px}.opt.lettre-opt{font-size:40px}}

/* ---------- Français du CE2 à la terminale (22/10) ---------- */
.fr-phrase{font-size:26px}
.fr-phrase .cible{text-decoration:underline 3px var(--sun);text-underline-offset:5px}
.read-text.lecture{flex-direction:column;align-items:stretch}
.read-text.lecture p{font-size:18px;line-height:1.6;white-space:normal}
.read-text .auteur{color:var(--ink-2);font-weight:700}
.redac{width:100%;box-sizing:border-box;border:3px solid var(--line);border-radius:16px;padding:12px;font:600 18px/1.5 "Nunito",sans-serif;background:#fff;min-height:180px}
.redac-sujet{margin:0;font-weight:700}
.redac-requis{margin:0;padding-left:20px;color:var(--ink-2);font-weight:700}
#redacCompte.ok-n{color:var(--ok)}
.grille{border:2px solid var(--line);border-radius:16px;padding:10px 12px;display:grid;gap:10px}
.grille legend{font-weight:800;padding:0 6px}
.grille-m{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.grille-m label{border:2px solid var(--line);border-radius:12px;padding:6px 8px;font-size:14px;cursor:pointer;display:flex;gap:6px;align-items:flex-start}
.grille-m label:has(input:checked){border-color:var(--ok);background:var(--ok-soft)}
.redac-res ul{margin:4px 0 8px;padding-left:4px;list-style:none}
.redac-res li.ok{color:var(--ok);font-weight:700}
.redac-res li.no{color:var(--no);font-weight:700}
.ecrit summary{cursor:pointer;font-weight:700}
.ecrit p{white-space:pre-wrap;background:#fff;border-radius:12px;padding:8px}
.debat{margin:0}

/* charte de la langue (22/10) : l'erreur est montrée, pas corrigée */
.lyster{border:2px dashed var(--line);border-radius:14px;padding:8px 12px;margin-top:6px}
.lyster .small-sentence{font-size:22px;margin:0}
.lyster mark.a-revoir{background:none;color:var(--no);text-decoration:underline wavy var(--no);text-underline-offset:4px}

/* ---------- méthode des 4 clés (22/10) ---------- */
.cle-choix{border:2px solid var(--line);border-radius:14px;padding:8px 12px;display:grid;gap:6px;margin-top:8px}
.pill.cle.choisie{outline:3px solid var(--ink)}
.cle-badge{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:99px;border:2px solid var(--line);font-size:14px;font-weight:800}
body.cles-couleur .cle-son{border-color:#1E6FD9;color:#1E6FD9}
body.cles-couleur .cle-famille{border-color:#2E8B57;color:#2E8B57}
body.cles-couleur .cle-chaine{border-color:#D96C00;color:#B85A00}
body.cles-couleur .cle-memoire{border-color:#7B4FC9;color:#7B4FC9}
/* espacement large : lettres, mots et lignes plus espacés (au lieu d'une police « dyslexie ») */
body.espacement-large .sentence, body.espacement-large .fr-show, body.espacement-large .read-text p,
body.espacement-large .fl-texte, body.espacement-large .opt, body.espacement-large .consigne span, body.espacement-large .typed input,
body.espacement-large .redac{letter-spacing:.12em;word-spacing:.16em;line-height:1.8}

/* méthode des 4 clés, étape 2 : famille, chaîne, gestes, radical */
.lettres-mot{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.lettres-mot .opt{min-width:52px;font-size:30px;font-weight:800}
.sentence.chaine{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sentence.chaine .mot-opt{width:auto;padding:6px 12px}
.sentence.chaine .mot{padding:2px 6px;border-radius:8px}
.sentence.chaine .chef{border:3px solid var(--ink);font-weight:800}
.sentence.chaine .lie{background:#FFE3C2;color:#7A3D00}
.sentence.chaine .cible-accord{text-decoration:underline 3px}
.feedback .apres{margin-top:6px;font-size:22px}
.muette{color:#9AA0A6;text-decoration:line-through}
.chante{color:#2E8B57;font-size:1.2em}
.conj-res .rad{color:#1E6FD9}.conj-res .term{color:#D96C00}
.conj-res small{display:block;font-size:15px;font-weight:600}

/* méthode des 4 clés, étape 4 : « je doute » et mesure de transfert */
.pill.doute{justify-self:start;margin-top:4px}
.doute-aide:empty{display:none}
.panel.transfert h3{margin:6px 0 0}

/* Histoire (23/10) : clé après une erreur, repère à retenir, frise des 5 périodes */
.cle-hist b{font-weight:800}
.retenir{margin-top:8px;font-weight:700}
.frise-hist{display:flex;gap:3px;margin-top:8px;font-size:12px;line-height:1.2}
.frise-hist span{flex:1;padding:6px 4px;text-align:center;border-radius:8px;border:2px solid var(--line);opacity:.55}
.frise-hist span.on{opacity:1;font-weight:800;border-color:currentColor}

/* page d'accueil de la version de test (23/10) */
.bandeau-test{background:#FFF4D6;color:#5a4300;border:2px solid #F2C94C;border-radius:14px;padding:8px 14px;margin:0 0 10px;font-size:15px;line-height:1.4}
.bandeau-test a{color:inherit;font-weight:800;white-space:nowrap}
@media (prefers-color-scheme: dark){.bandeau-test{background:#3a2f10;color:#ffe9a8;border-color:#8a6d1a}}