:root{
  --bg:#FFF1CF; --paper:#FFFBF1; --ink:#25305C; --ink-soft:#5B6491;
  --sun:#FFB000; --sun-dark:#E59A00; --good:#14907F; --good-bg:#DDF3EE;
  --loss:#7A4E8C; --loss-bg:#EFE3F4; --peach:#FFDDBE; --line:#EBD9AC;
  --font:"Andika","Atkinson Hyperlegible","Trebuchet MS",Verdana,sans-serif;
  --font-title:"Arial Rounded MT Bold","Avenir Next Rounded","Avenir Next",var(--font);
  --r:28px;
}
body.dys{--font:"OpenDyslexic","Andika","Comic Sans MS","Trebuchet MS",sans-serif;--font-title:var(--font)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:20px;line-height:1.4}
#app{min-height:100dvh;display:flex;flex-direction:column;position:relative}
#stage{flex:1;display:flex;flex-direction:column}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px;border-radius:12px}
h1,h2{font-family:var(--font-title);font-weight:700;margin:0;line-height:1.15}

.vue-switch{position:fixed;right:12px;bottom:12px;z-index:9;display:flex;gap:2px;background:rgba(37,48,92,.86);padding:4px;border-radius:999px;font-size:13px}
.vue-switch button{color:#fff;padding:6px 12px;border-radius:999px;opacity:.75}
.vue-switch button.on{background:#fff;color:var(--ink);opacity:1}
body.clean .vue-switch{display:none}

/* ---------- enfant : squelette ---------- */
.kid{flex:1;display:flex;flex-direction:column;padding:clamp(18px,3vw,36px) clamp(20px,5vw,64px) clamp(24px,3.5vw,44px);max-width:1000px;width:100%;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.dots{display:flex;gap:8px}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--line)}
.dots i.done{background:var(--ink)}
.dots i.now{background:var(--sun);box-shadow:0 0 0 4px rgba(255,176,0,.3)}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border-radius:999px;padding:10px 18px;font-size:18px}
.chip b{font-family:var(--font-title)}
.body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,32px);text-align:center;padding:clamp(8px,2vh,24px) 0}
.foot{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

.btn{min-height:64px;padding:14px 36px;border-radius:999px;background:var(--sun);color:var(--ink);font-family:var(--font-title);font-size:clamp(22px,2.6vw,28px);box-shadow:0 6px 0 var(--sun-dark);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sun-dark)}
.btn[disabled]{background:#EBDDB6;color:#9A9272;box-shadow:0 6px 0 #D9C998;cursor:not-allowed}
.btn.second{background:var(--paper);box-shadow:0 6px 0 var(--line);font-size:22px;padding-inline:26px}
.btn.big{min-height:84px;padding-inline:56px;font-size:clamp(26px,3.2vw,34px)}
.btn small{display:block;font-family:var(--font);font-size:16px;opacity:.75;margin-top:2px}

.mascot svg{width:clamp(130px,22vw,210px);height:auto;display:block}
.mascot.small svg{width:56px}
.mascot.bounce svg{animation:hop 2.6s ease-in-out infinite}
@keyframes hop{0%,88%,100%{transform:translateY(0)}93%{transform:translateY(-10px)}}

/* ---------- accueil ---------- */
.hello h1{font-size:clamp(36px,5vw,56px)}
.counter{background:var(--paper);border-radius:var(--r);padding:22px 44px 26px;min-width:min(420px,100%)}
.counter .n{font-family:var(--font-title);font-size:clamp(64px,10vw,96px);line-height:1}
.counter .n span{font-size:.38em;margin-left:8px}
.counter .l{margin:6px 0 14px;color:var(--ink-soft)}
.meter{height:14px;background:var(--line);border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--good);border-radius:999px}
.opt{color:var(--ink-soft);font-size:16px;display:flex;gap:10px;align-items:center;justify-content:center}
.opt button{background:var(--paper);padding:8px 16px;border-radius:999px;font-size:16px}

/* ---------- consigne ---------- */
.bubble{position:relative;background:var(--paper);border-radius:var(--r);padding:28px 34px;font-size:clamp(26px,3.6vw,38px);line-height:1.3;max-width:760px;font-family:var(--font-title)}
.bubble::before{content:"";position:absolute;top:-16px;left:50%;margin-left:-16px;border:16px solid transparent;border-top:0;border-bottom-color:var(--paper)}
.qnum{color:var(--ink-soft);font-size:18px}

/* ---------- question ---------- */
.rappel{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:999px;padding:8px 10px 8px 24px;max-width:100%;text-align:left;font-size:19px}
.rappel button{flex:none;width:56px;height:56px;border-radius:50%;background:var(--peach);font-size:24px}
.illus{font-size:clamp(56px,9vh,84px);line-height:1}
.qtext{font-family:var(--font-title);font-size:clamp(30px,4.4vw,46px)}
.choices{display:grid;gap:16px;width:min(560px,100%)}
.choice{min-height:72px;border-radius:22px;background:var(--paper);border:4px solid transparent;font-family:var(--font-title);font-size:clamp(28px,3.6vw,38px);box-shadow:0 5px 0 var(--line)}
.choice.on{border-color:var(--ink);background:#fff}
.gapword{font-family:var(--font-title);font-size:clamp(56px,10vw,92px);letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
.hole{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.15em;margin:0 .06em;border-radius:16px;border:4px dashed var(--ink-soft);color:var(--ink);background:rgba(255,255,255,.55)}
.hole.full{border-style:solid;border-color:var(--ink);background:#fff}
.tiles{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.tile{min-width:72px;min-height:72px;padding:6px 22px;border-radius:22px;background:var(--paper);font-family:var(--font-title);font-size:clamp(28px,3.6vw,38px);box-shadow:0 5px 0 var(--line)}
.tile.off{opacity:.25;box-shadow:none;pointer-events:none}
.tile.on{background:#fff;border:4px solid var(--ink)}
.line{min-height:92px;width:min(760px,100%);border-bottom:5px solid var(--ink-soft);display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;justify-content:center;padding:8px 8px 12px}
.line .tile{background:#fff}
.say{display:flex;gap:16px;justify-content:center}
.say button{width:104px;height:104px;border-radius:50%;background:var(--peach);font-size:44px;box-shadow:0 6px 0 #EDBF93}
.say button.slow{width:76px;height:76px;font-size:32px;align-self:center}
.say button:active{transform:translateY(4px)}
.typed{width:min(460px,100%);height:84px;border-radius:22px;border:4px solid var(--ink);background:#fff;text-align:center;font-family:var(--font-title);font-size:42px;color:var(--ink)}
.typed:focus-visible{outline:0}
.accents{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.accents button{width:64px;height:64px;border-radius:18px;background:var(--paper);font-family:var(--font-title);font-size:30px;box-shadow:0 4px 0 var(--line)}

.scene{width:min(720px,100%);border-radius:var(--r);background:#CFE9F7;display:block;touch-action:manipulation}
.scene g.obj{cursor:pointer}
.tools{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.tool{min-height:60px;padding:6px 20px;border-radius:999px;background:var(--paper);font-size:20px;border:4px solid transparent;display:inline-flex;align-items:center;gap:10px}
.tool.on{border-color:var(--ink);background:#fff}
.sw{width:30px;height:30px;border-radius:50%;display:inline-block;border:3px solid var(--ink)}
.done-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:36px;color:var(--ink-soft);font-size:17px}
.done-list span{background:var(--paper);border-radius:999px;padding:4px 14px}

/* ---------- retour ---------- */
.fb{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 28px 26px;border-radius:var(--r);max-width:680px;width:100%}
.fb.good{background:var(--good-bg)}
.fb.oops{background:var(--paper)}
.fb h2{font-size:clamp(34px,5vw,50px)}
.score{display:inline-block;font-family:var(--font-title);font-size:30px;border-radius:999px;padding:4px 22px}
.score.plus{background:var(--good);color:#fff}
.score.minus{background:var(--loss-bg);color:var(--loss);font-size:24px}
.answer{font-family:var(--font-title);font-size:clamp(28px,4.2vw,44px);background:#fff;border-radius:22px;padding:10px 30px;display:inline-block}
.expl{font-size:clamp(20px,2.4vw,24px);max-width:560px;margin:0}
.stars{display:flex;gap:10px;justify-content:center}
.stars svg{width:76px;height:76px}
.big-n{font-family:var(--font-title);font-size:clamp(70px,11vw,110px);line-height:1}
.big-n span{font-size:.36em;margin-left:8px}

/* ---------- maman & adulte ---------- */
.adult{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:clamp(20px,3vw,40px) clamp(18px,4vw,48px) 90px;display:flex;flex-direction:column;gap:22px}
.adult.maman{max-width:560px}
.adult h1{font-size:clamp(26px,3.2vw,34px)}
.adult .sub{color:var(--ink-soft);font-size:17px;margin-top:4px}
.panel{background:var(--paper);border-radius:var(--r);padding:22px 24px}
.panel h2{font-size:21px;margin-bottom:12px}
.give{text-align:center;padding:30px 20px 26px}
.give .n{font-family:var(--font-title);font-size:clamp(84px,24vw,128px);line-height:1}
.give .n span{font-size:.3em;margin-left:6px}
.give .when{color:var(--ink-soft);margin:6px 0 20px}
.give .btn{width:100%}
.give .btn.ok{background:var(--good);color:#fff;box-shadow:0 6px 0 #0D6E61}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:130px}
.week div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;font-size:14px;color:var(--ink-soft)}
.week i{display:block;width:100%;max-width:34px;border-radius:10px 10px 4px 4px;background:var(--peach);min-height:4px}
.week .today i{background:var(--sun)}
.week b{font-family:var(--font-title);font-size:15px;color:var(--ink);font-weight:400}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rows li{display:flex;gap:12px;align-items:flex-start;font-size:18px}
.rows .ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px}
.rows .ok{background:var(--good-bg);color:var(--good)}
.rows .no{background:var(--loss-bg);color:var(--loss)}
.rows small{display:block;color:var(--ink-soft);font-size:15px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
textarea{width:100%;min-height:150px;border-radius:20px;border:3px solid var(--line);background:#fff;padding:16px 18px;font:inherit;color:var(--ink);resize:vertical}
textarea:focus{border-color:var(--ink);outline:0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.panel .btn.second{background:var(--peach);box-shadow:0 6px 0 #EDBF93}
.actions .btn{font-size:20px;min-height:58px;padding-inline:26px}
.photo{display:none;margin-top:14px;border-radius:16px;max-height:200px}
.note{margin-top:14px;background:var(--good-bg);color:#0D6E61;border-radius:16px;padding:12px 16px;font-size:17px}
.serie{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:2px solid var(--line)}
.serie:last-child{border:0}
.serie .t{flex:1}
.serie .t small{display:block;color:var(--ink-soft);font-size:15px}
.serie.wait{opacity:.6}
.pill{font-size:15px;background:var(--peach);padding:4px 12px;border-radius:999px}
.serie .btn{font-size:18px;min-height:52px;padding-inline:22px}

@media (max-width:480px){html,body{font-size:18px}.vue-switch{bottom:8px}}
@media (orientation:landscape) and (max-height:900px){.mascot svg{width:clamp(110px,16vw,160px)}.body{gap:14px}.counter{padding:16px 40px 20px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.btn.wa{background:#25D366;color:#0B3D1E;box-shadow:0 6px 0 #1A9E4B}
.list{max-height:520px;overflow:auto;padding-right:6px}
.serie.done{opacity:.55}
.pill{white-space:nowrap}
@media (max-width:480px){.btn.big{padding-inline:22px;font-size:24px}.btn.big.wa{width:100%}}
@media (max-width:480px){.topbar{gap:8px}.dots{gap:5px}.dots i{width:10px;height:10px}.dots i.now{box-shadow:0 0 0 3px rgba(255,176,0,.3)}.topbar .chip{padding:8px 12px;font-size:15px;white-space:nowrap}}

/* ---------- n° 18 : UX optimisée ---------- */
html,body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
button,.tile,.choice,.scene{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.prog{display:flex;align-items:center;gap:12px;flex:1;max-width:320px}
.prog b{font-family:var(--font-title);font-size:22px;white-space:nowrap}
.prog .bar{flex:1;height:14px;background:var(--line);border-radius:999px;overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--good);border-radius:999px;transition:width .3s}
.rappel{font-family:var(--font-title);font-size:clamp(24px,3.2vw,34px);line-height:1.25;padding:14px 12px 14px 26px;border-radius:var(--r);max-width:760px;width:100%}
.rappel button{width:64px;height:64px;font-size:28px;box-shadow:0 4px 0 #EDBF93}
.foot{position:sticky;bottom:0;padding:14px 0 4px;background:linear-gradient(to top,var(--bg) 70%,rgba(255,241,207,0))}
.btn[disabled]{color:#6F6741}
.btn.big{min-width:min(360px,100%)}
.accents button{width:56px;height:56px}
.tool{min-height:52px}
.opt button{min-height:48px;padding:10px 20px}
#undo{min-height:52px!important}
.fb,.stars.pop svg,.mascot.hop2 svg{animation:pop .35s ease-out both}
.stars.pop svg:nth-child(2){animation-delay:.25s}.stars.pop svg:nth-child(3){animation-delay:.5s}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-16px;width:12px;height:18px;border-radius:3px;animation:fall 2.8s linear 2 both}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.big-n{font-size:clamp(84px,13vw,128px)}
.foot.fin{flex-direction:column;align-items:center}
.foot.fin .btn.wa{width:min(460px,100%)}
@media (max-width:480px){
  .mascot svg{width:110px}
  .hello .mascot svg{width:120px}
  .body{gap:14px}
  .hello h1{font-size:34px}
  .counter{padding:14px 20px 18px}
  .counter .n{font-size:60px}
  .rappel{font-size:22px}
  .rappel button{width:56px;height:56px}
  .kid{padding-inline:16px}
  .btn.big.wa{width:100%}
}
@media (max-height:700px){.mascot svg{width:90px}.hello .mascot svg{width:90px}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
@media (orientation:landscape) and (max-height:900px){
  .mascot svg{width:clamp(80px,12vw,110px)}.hello .mascot svg{width:110px}
  .big-n{font-size:84px}.stars svg{width:56px;height:56px}
  .kid{padding-top:12px;padding-bottom:12px}.body{gap:10px;padding:4px 0}
  .fb{padding:16px 24px}.foot{padding-top:8px}
  .btn.big{min-height:72px}
}
.foot{pointer-events:none}.foot>*{pointer-events:auto}
.kid>.body{padding-bottom:12px}
/* pied fixe en bas, le contenu défile au-dessus (jamais caché derrière Valider) */
.kid{height:100dvh;min-height:0;overflow:hidden}
.kid>.body{min-height:0;overflow-y:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
.kid>.body>:first-child{margin-top:auto}.kid>.body>:last-child{margin-bottom:auto}
.foot{position:static;flex:none;background:none}