@font-face{font-family:Lexend;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lexend-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Lexend;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/lexend-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Lexend;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/lexend-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Lexend;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lexend-latin-700-normal.woff2) format('woff2')}

:root{
  --paper:#FAF6F2;--grid:#F0E4E2;--card:#FFFFFF;--ink:#1F1B24;--ink-2:#5E5560;--line:#E2D3D3;
  --blue:#C42847;--blue-ink:#FFFFFF;--blue-soft:#FBE7EB;--gold:#9A6508;--gold-soft:#FBF0D9;
  --ok:#1E7448;--ok-soft:#E0F1E7;--miss:#3D5A80;--miss-soft:#E8EEF6;--cell:24px;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#161414;--grid:#211E1E;--card:#211E1E;--ink:#F3EEEE;--ink-2:#BDB3B3;--line:#3A3434;
  --blue:#E8475F;--blue-ink:#FFFFFF;--blue-soft:#3B1C22;--gold:#E7B54B;--gold-soft:#3A2E14;
  --ok:#62C493;--ok-soft:#15302A;--miss:#9DB8DE;--miss-soft:#1E2A3B;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#161414;--grid:#211E1E;--card:#211E1E;--ink:#F3EEEE;--ink-2:#BDB3B3;--line:#3A3434;
  --blue:#E8475F;--blue-ink:#FFFFFF;--blue-soft:#3B1C22;--gold:#E7B54B;--gold-soft:#3A2E14;
  --ok:#62C493;--ok-soft:#15302A;--miss:#9DB8DE;--miss-soft:#1E2A3B;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);color:var(--ink);
  font-family:Lexend,"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.45;-webkit-text-size-adjust:100%}
#app{max-width:560px;margin:0 auto;padding:16px 16px 48px}
#app.wide{max-width:860px}
h1{font-size:30px;line-height:1.15;font-weight:700;margin:8px 0 6px;letter-spacing:-.01em}
h2{font-size:20px;font-weight:600;margin:0 0 10px}
p{margin:0 0 12px}
.muted{color:var(--ink-2);font-size:16px}
.small{font-size:14px}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn{display:block;width:100%;min-height:56px;border:0;border-radius:14px;background:var(--blue);color:var(--blue-ink);
  font-size:19px;font-weight:600;padding:14px 18px;cursor:pointer;text-align:center}
.btn.ghost{background:var(--card);color:var(--blue);border:2px solid var(--blue)}
.btn+.btn{margin-top:12px}
.link{background:none;border:0;color:var(--blue);font-size:16px;text-decoration:underline;text-underline-offset:3px;padding:10px 0;cursor:pointer}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.stack>*+*{margin-top:12px}

/* Accueil démo */
.hero-ex{display:grid;grid-template-columns:repeat(5,44px);justify-content:center;margin:22px 0 10px;font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.hero-ex span{height:44px;display:flex;align-items:center;justify-content:center}
.hero-ex .r{border:2px solid var(--blue);border-radius:8px;background:var(--card);margin:2px;color:var(--blue)}
.hero-ex .k{font-size:15px;color:var(--ink-2);height:24px}
.hero-ex .rule{grid-column:1/-1;border-top:3px solid var(--ink);height:0;margin:4px 0}

/* Élève */
.path{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:12px 0 4px}
.path i{aspect-ratio:1;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.path i.on{background:var(--blue);border-color:var(--blue)}
.path i.next{border-color:var(--blue);border-style:dashed}
.skills-kid{list-style:none;padding:0;margin:0}
.skills-kid li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:17px}
.skills-kid li:last-child{border-bottom:0}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i.done{background:var(--blue)}
.dots i.now{background:var(--ink)}
.note{background:var(--blue-soft);border-radius:12px;padding:10px 14px;font-size:16px;margin:12px 0}
.lead{font-size:19px;text-align:center;margin:18px 0 4px}
.prompt{font-size:clamp(32px,10vw,46px);font-weight:600;text-align:center;margin:22px 0 6px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.prompt.s{font-size:clamp(22px,6.6vw,32px)}
.words{font-size:22px;text-align:center;font-weight:500;margin:10px 0;line-height:1.35}
.answer{min-height:64px;margin:14px auto;max-width:300px;border:2px solid var(--ink);border-radius:12px;background:var(--card);
  font-size:34px;font-weight:600;text-align:center;padding:8px 10px;font-variant-numeric:tabular-nums}
.answer .unit{font-size:18px;font-weight:500;color:var(--ink-2);margin-left:6px}
.answer.empty .val{color:var(--ink-2);font-weight:400}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.key{min-height:58px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:26px;font-weight:500;cursor:pointer}
.key.go{background:var(--blue);color:var(--blue-ink);border-color:var(--blue);font-size:18px;font-weight:600}
.key:active{transform:scale(.97)}
.hintbox{border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:4px 12px 12px 4px;padding:10px 14px;font-size:16px;margin:10px 0}
.center{text-align:center}
.line-svg{width:100%;max-width:440px;display:block;margin:6px auto 0}
.pose{display:grid;justify-content:center;margin:14px auto 4px;font-size:30px;font-weight:500;font-variant-numeric:tabular-nums}
.pose .c{width:44px;height:48px;display:flex;align-items:center;justify-content:center}
.pose .k{height:30px}
.pose .kin{width:30px;height:26px;margin:2px auto;border:1px dashed var(--line);border-radius:6px;background:transparent;color:var(--blue);font-size:16px;font-weight:600;cursor:pointer;padding:0}
.pose .rule{grid-column:1/-1;border-top:3px solid var(--ink);margin:4px 0 6px}
.pose .res{width:40px;height:46px;margin:0 2px;border:2px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:28px;font-weight:600;cursor:pointer;padding:0}
.pose .res.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.pose .res.bad{border-color:var(--miss);background:var(--miss-soft)}
.probtext{font-size:20px;line-height:1.55;background:var(--card);border-left:4px solid var(--blue);padding:14px 16px;border-radius:4px 14px 14px 4px;margin:16px 0}
.ops{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op{min-height:72px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:17px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.op b{font-size:26px;font-weight:600;color:var(--blue)}
.fb{border-radius:14px;padding:14px 16px;margin:16px 0 12px;font-size:17px}
.fb.ok{background:var(--ok-soft)}
.fb.ok strong{color:var(--ok)}
.fb.miss{background:var(--miss-soft)}
.fb.miss strong{color:var(--miss)}
.fb p{margin:6px 0 0}

/* Division posée */
.potence{display:grid;grid-template-columns:auto auto;justify-content:center;margin:18px auto 6px;font-size:32px;font-weight:600;font-variant-numeric:tabular-nums}
.potence .pa{padding:4px 16px 4px 0;text-align:right}
.potence .pd{border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:4px 16px}
.potence .pq{border-left:3px solid var(--ink);padding:10px 0 0 12px}
.potence .pr{padding:10px 16px 0 0;text-align:right}
.potence label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:2px}
.dres{width:112px;height:52px;border:2px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:28px;font-weight:600;cursor:pointer;padding:0}
.dres.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.dres.bad{border-color:var(--miss);background:var(--miss-soft)}
/* Parent */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cards .panel{margin:0}
.big{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:16px}
.kv:last-child{border-bottom:0}
.kv b{font-weight:600;font-variant-numeric:tabular-nums}
.radar{width:100%;max-width:420px;display:block;margin:0 auto}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:14px;color:var(--ink-2);margin-top:6px}
.legend span::before{content:"";display:inline-block;width:18px;height:0;margin-right:6px;vertical-align:middle}
.legend .l1::before{border-top:2px dashed var(--ink-2)}
.legend .l2::before{border-top:3px solid var(--blue)}
.srow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow .chip{align-self:start;justify-self:end;line-height:1.35}
.srow .meta{grid-column:1/-1;font-size:14px;color:var(--ink-2)}
.chip{display:inline-block;border-radius:999px;padding:3px 11px;font-size:14px;font-weight:600;white-space:nowrap}
.b0{background:var(--miss-soft);color:var(--miss)}
.b1{background:var(--gold-soft);color:var(--gold)}
.b2{background:var(--blue-soft);color:var(--blue)}
.b3{background:var(--ok-soft);color:var(--ok)}
.b4{background:var(--ok);color:var(--card)}
.err{font-size:15px;margin:4px 0 0;padding-left:12px;border-left:2px solid var(--line);color:var(--ink-2)}
.err b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:600;color:var(--ink-2)}
.sync{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2)}
.sync::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok)}
.sync.wait::before{background:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2 .btn+.btn{margin-top:0}

/* Fenêtre d'installation */
.backdrop{position:fixed;inset:0;background:rgba(8,15,30,.5);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.modal{background:var(--card);color:var(--ink);width:100%;max-width:560px;border-radius:22px 22px 0 0;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));max-height:92%;overflow:auto}
.appicon{width:56px;height:56px;border-radius:14px;background:var(--blue);color:var(--blue-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;flex:none}
.modal-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--paper);border-radius:12px;padding:4px;margin:6px 0 14px}
.tab{min-height:42px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font-size:16px;font-weight:500;cursor:pointer}
.tab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.steps{list-style:none;padding:0;margin:0 0 16px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:8px 0;font-size:17px}
.steps li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:15px}
.ico{display:inline-flex;vertical-align:middle;border:1px solid var(--line);border-radius:6px;padding:1px 5px;margin:0 2px}
textarea{width:100%;min-height:220px;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--paper);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.modal{animation:up .22s ease-out}.fb{animation:fade .18s ease-out}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}

/* Vague 1 */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-variant-numeric:tabular-nums}
.fr span:first-child{border-bottom:3px solid currentColor;padding:0 .14em 2px}
.fr span:last-child{padding-top:2px}
.choices{display:grid;gap:10px;margin-top:14px}
.choices.c2{grid-template-columns:1fr 1fr}
.choices.c3{grid-template-columns:repeat(3,1fr)}
.choice{min-height:68px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:26px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.choice.small{font-size:20px}
.choice.picked{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.choice.right{border-color:var(--ok);background:var(--ok-soft)}
.choice.wrong{border-color:var(--miss);background:var(--miss-soft)}
.fracin{display:flex;flex-direction:column;align-items:center;gap:6px;margin:16px auto 4px}
.fracin .fbar{width:130px;border-top:3px solid var(--ink)}
.seq{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 6px}
.seq span{min-width:52px;padding:8px 10px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:24px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.seq span.q{border:2px dashed var(--blue);color:var(--blue)}
.tipcard{background:var(--gold-soft);border-radius:18px;padding:20px;margin:18px 0}
.tipcard .tag{display:inline-block;background:var(--gold);color:var(--card);border-radius:999px;padding:3px 12px;font-size:14px;font-weight:600;margin-bottom:10px}
.tipcard h2{font-size:22px}
.tipcard .ex{font-size:19px;margin:8px 0}
.tipcard .why{font-size:15px;color:var(--ink-2);margin:0}
.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;background:var(--gold-soft);color:var(--gold)}
.welcome{font-size:20px;line-height:1.5;margin:6px 0 4px}
.voyage{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;margin:12px 0 6px}
.isle{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-2);text-align:center;line-height:1.2}
.isle i{width:30px;height:30px;border-radius:50% 46% 52% 44%;border:2px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:16px}
.isle.on i{background:var(--blue);border-color:var(--blue)}
.isle.now i{border-color:var(--blue);border-width:3px;background:var(--blue-soft)}
.isle.now{color:var(--ink);font-weight:600}
.lights{display:flex;align-items:center;gap:10px;font-size:16px;margin-top:6px}
.tips-list .tip{padding:14px 0;border-bottom:1px solid var(--line)}
.tips-list .tip:last-child{border-bottom:0}
.tips-list h3{font-size:17px;margin:0 0 4px}
.tips-list p{margin:0;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.togg{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:15px;cursor:pointer;min-height:40px}
.togg.on{background:var(--blue);border-color:var(--blue);color:var(--blue-ink)}
.togg:disabled{opacity:.5;cursor:default}
.bilan p{margin:0 0 10px}
.bilan b{font-weight:600}
.dom-h{font-size:15px;font-weight:600;color:var(--ink-2);margin:16px 0 0}
.key.comma{font-weight:700}
.key.blank{visibility:hidden}

.domrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
.domrow:last-child{border-bottom:0}
.domrow .togg{padding:6px 12px;min-height:36px;font-size:14px}
.boff{background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}

/* ===== Meleto · français ===== */
.brand{display:flex;align-items:center;gap:10px;margin:6px 0 2px;font-weight:600;font-size:17px;color:var(--blue)}
.brand svg{width:30px;height:30px;flex:none}
.appicon svg{width:100%;height:100%;display:block}
.subjects{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.subj{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;width:100%;min-height:92px;border:2px solid var(--blue);border-radius:16px;background:var(--card);color:var(--ink);padding:14px 16px;cursor:pointer;font:inherit}
.subj b{font-size:22px;color:var(--blue)}
.subj span{font-size:14px;color:var(--ink-2);line-height:1.3}
.stack .subj+.subj{margin-top:0}
.stack{display:grid;gap:12px}
.sent{font-size:21px;line-height:1.55;text-align:center;margin:16px 0 6px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.sent .hl{color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--blue);color:transparent;line-height:1.1}
.reading{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:4px 14px 14px 4px;padding:14px 16px;margin:14px 0}
.reading h3{margin:0 0 6px;font-size:17px;color:var(--blue)}
.reading p{margin:0;font-size:17px;line-height:1.65}
.reading.flutext p{font-size:20px;line-height:1.8;font-weight:400}
.say{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--blue);background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:10px 20px;font-family:inherit;font-weight:600;font-size:17px;line-height:1;cursor:pointer;margin-top:8px}
.say::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.tin{display:block;width:100%;min-height:58px;margin-top:14px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:600 24px/1.2 Lexend,system-ui,sans-serif;text-align:center;padding:10px 14px}
.tin:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.tin.ok{border-color:var(--ok);background:var(--ok-soft)}
.tin.bad{border-color:var(--miss);background:var(--miss-soft)}
.choice.long{font-size:17px;font-weight:500;text-align:left;padding:12px 16px;min-height:56px;line-height:1.35}
.ptabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:5px;margin:12px 0}
.ptab{border:0;border-radius:10px;background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:17px;line-height:1;padding:12px 8px;cursor:pointer}
.ptab.on{background:var(--blue);color:var(--blue-ink)}
.flubar{height:12px;border-radius:999px;background:var(--blue-soft);overflow:hidden;margin:18px 0 6px}
.flubar i{display:block;height:100%;width:0;background:var(--blue);transition:width .25s linear}
.reading.words{line-height:2.1;text-align:left}
.wtok{border:0;background:none;color:var(--ink);font:inherit;font-size:18px;padding:2px 3px;border-radius:6px;cursor:pointer}
.wtok.after{color:var(--ink-2);opacity:.55}
.wtok.last{background:var(--blue);color:var(--blue-ink);opacity:1}
.wtok.err{text-decoration:line-through;text-decoration-color:var(--miss);text-decoration-thickness:2px;background:var(--miss-soft)}
.check{display:flex;align-items:center;gap:10px;margin:16px 0 4px;font-size:17px}
.check input{width:22px;height:22px;accent-color:var(--blue)}
.btn[disabled]{opacity:.45;cursor:default}
.stack .btn+.btn{margin-top:0}

.revban{border-color:var(--blue);box-shadow:inset 4px 0 0 var(--blue)}

.ptabs{grid-template-columns:repeat(4,1fr)}
.ptab{font-size:15px;padding:12px 4px}
.ltable{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0}
.ltable th,.ltable td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.ltable th{color:var(--ink-2);font-weight:600}
.tipcard .tablewrap{margin:6px 0}
.ptabs.two{grid-template-columns:1fr 1fr}

.map{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.mapwrap{margin:12px 0}
.mapwrap.small .map{max-height:240px;object-fit:contain}
.tipcard .map,.tips-list .map{margin:8px 0}

.ptabs{grid-template-columns:repeat(5,1fr)}
.ptab{font-size:14px;padding:11px 2px}
.subjects .subj:last-child:nth-child(odd){grid-column:1/-1}

.toast{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--ink);color:var(--paper);border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.4;box-shadow:0 6px 24px rgba(0,0,0,.25)}

.sel{display:block;width:100%;min-height:48px;margin-top:6px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:17px;padding:0 12px}

.ptabs{display:flex;flex-wrap:wrap}.ptabs .ptab{flex:1 1 auto;min-width:96px;padding:11px 10px}
.ptabs.two{display:grid}

.subj.done{opacity:.55;border-style:dashed;cursor:default}
.check{align-items:flex-start}.check input{flex:none;width:22px;height:22px;margin:3px 0 0}

.kidtabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}.kidtab{flex:1 1 0;min-width:110px;min-height:52px;border-radius:16px;border:2px solid var(--blue);background:var(--card);color:var(--blue);font-family:inherit;font-weight:700;font-size:19px;cursor:pointer}.kidtab.on{background:var(--blue);color:var(--blue-ink)}

/* ===== Maternelle ===== */
#app.mat{max-width:760px}
.mtop{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px}
.mdots{display:flex;gap:6px}.mdots span{width:14px;height:14px;border-radius:50%;background:var(--line)}.mdots span.done{background:var(--blue)}.mdots span.cur{background:var(--blue);box-shadow:0 0 0 4px rgba(196,40,71,.25)}
.madult{font-size:14px;color:var(--ink-2);background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:8px 12px;margin:0 0 12px}
.mq{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.msay{flex:none;width:64px;height:64px;border-radius:50%;border:none;background:var(--blue);color:#fff;font-size:30px;cursor:pointer;box-shadow:0 6px 16px rgba(196,40,71,.35)}
.mprompt{font-size:22px;font-weight:600;line-height:1.35;margin:0}
.mvis{background:var(--card);border-radius:20px;padding:16px;margin:10px 0 14px;text-align:center}
.mset{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;line-height:1.1}
.mrow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.mop{font-size:40px;font-weight:700;color:var(--blue)}
.mbig{font-size:56px;font-weight:700;letter-spacing:2px}
.mbox{display:inline-block;margin-top:8px;font-size:44px}.mtot{font-size:20px;font-weight:700;margin:8px 0 0}
.mhero{font-size:96px;line-height:1.1}.mhero.big{font-size:130px}
.mword{font-size:28px;font-weight:700;margin:4px 0 0}
.mgr{font-size:30px;font-weight:700;margin:0;color:var(--ink-2)}
.mseq{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:44px}.mseq .mq{display:inline-flex;width:56px;height:56px;border:3px dashed var(--blue);border-radius:14px;align-items:center;justify-content:center;font-size:34px;color:var(--blue);font-weight:700;margin:0}
.mopts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mopts.n2,.mopts.wide{grid-template-columns:1fr 1fr}.mopts.n4{grid-template-columns:1fr 1fr}
.mtile{min-height:120px;border-radius:22px;border:3px solid var(--line);background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;transition:transform .15s}
.mtile:active{transform:scale(.97)}.mtile.good{border-color:#2FA84F;background:#E8F7EC}.mtile.show{border-color:#2FA84F;box-shadow:0 0 0 4px rgba(47,168,79,.3)}
.mtile.bad{animation:mshake .45s}@keyframes mshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.memo{font-size:64px;line-height:1}.mlab{font-size:15px;color:var(--ink-2)}
.mdig{font-size:58px;font-weight:700;color:var(--ink)}.mtxt{font-size:32px;font-weight:700;letter-spacing:2px;color:var(--ink)}
.mcol{display:block;width:76px;height:76px;border-radius:50%;border:2px solid rgba(0,0,0,.15)}
.mfb{min-height:44px;text-align:center;font-size:22px;font-weight:700;margin-top:14px}.mstar{font-size:30px}
.mhomes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.mhome{min-height:190px;border-radius:24px;border:3px solid var(--blue);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:inherit;color:var(--ink)}
.mhome b{font-size:20px}.mhome[disabled]{opacity:.45;cursor:default}
.mend{text-align:center;padding-top:30px}.mend .btn{margin-top:12px}
.album{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}.album span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:40px;border-radius:16px;background:var(--card);border:2px dashed var(--line);color:var(--line)}.album span.got{border-style:solid;border-color:var(--blue)}
.mrowp{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.mrowp>div{display:flex;flex-direction:column;gap:2px}.mrowp .chip{align-self:flex-start;margin-top:4px}.btn.small{min-height:40px;padding:0 14px;font-size:14px;width:auto;flex:none}

.trace{background:#fff;border-radius:22px;border:3px solid var(--line);overflow:hidden;margin:10px 0 14px}.trace canvas{display:block;width:100%;touch-action:none}
.rlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rcard{min-height:110px;border-radius:20px;border:3px solid var(--blue);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:inherit;color:var(--ink);padding:10px;text-align:center}.rcard .memo{font-size:40px}.rcard b{font-size:16px}
.rlines{background:var(--card);border-radius:20px;padding:14px 18px;margin:12px 0}.rline{font-size:20px;margin:6px 0;padding:4px 8px;border-radius:10px;transition:background .2s}.rline.on{background:rgba(196,40,71,.15);font-weight:700}
.recrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}.recrow audio{max-width:100%;height:40px}

.mtxt.big{font-size:52px}.mgrp{border:2px dashed var(--line);border-radius:14px;padding:6px;margin:4px}

.mimg{display:inline-block;object-fit:contain;vertical-align:middle;-webkit-user-drag:none;user-select:none}
.mtile{background:#fff}.mvis{background:#fff}
.mmelo{display:flex;align-items:center;gap:12px;margin:8px 0}.mmelo .mprompt{flex:1}
.mend .melo{display:block;margin:0 auto}.mend .mhero.big{font-size:72px}
.mfb{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.mfbm img{display:block}
.row3{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px}

/* contraste : surfaces blanches toujours en texte foncé, même en mode sombre */
.mtile,.mvis,.trace{color:#2A1F22}
.mtile .mlab,.mvis .mlab{color:#6E5F63}.mtile .mdig,.mtile .mtxt,.mvis .mword,.mvis .mbig,.mvis .mtot,.mvis .mgr,.mvis .mtxt{color:#2A1F22}
.mopts{grid-template-columns:repeat(3,minmax(0,1fr))}.mopts.n2,.mopts.wide,.mopts.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.mtile{min-width:0;padding:8px}.mtile .mimg{max-width:100%;height:auto}.mvis .mimg{max-width:100%;height:auto}

.phead{display:flex;justify-content:space-between;align-items:center}
.gear{width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:22px;font-family:inherit}
.gear.on{border-color:var(--blue);color:var(--blue)}
.pseg{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:4px;margin:10px 0 16px}
.pseg button{min-height:46px;border:0;border-radius:12px;background:none;font-family:inherit;font-size:17px;font-weight:700;color:var(--ink-2);cursor:pointer}
.pseg button.on{background:var(--blue);color:var(--blue-ink)}
.ptitle{font-size:24px;margin:14px 0 12px}.pbig{font-size:20px;margin:0 0 4px}
.subjects{grid-template-columns:repeat(2,minmax(0,1fr))}.subj{min-width:0}.subj b{overflow-wrap:break-word;hyphens:auto}

.pindots{display:flex;justify-content:center;gap:16px;margin:18px 0}.pindots span{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-2)}.pindots span.on{background:var(--ink);border-color:var(--ink)}
.pindots.bad{animation:mshake .45s}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:0 auto}.pinkey{min-height:68px;border-radius:18px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;font-size:28px;font-weight:700;cursor:pointer}

.pincur{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:10px 14px;margin:6px 0}.pincur b{font-size:22px;letter-spacing:6px}

.learn{background:var(--card);border-left:4px solid var(--blue);border-radius:12px;padding:10px 14px;margin:10px 0;font-size:16px;line-height:1.45}
details.rule{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin:8px 0}details.rule summary{cursor:pointer;font-weight:700;color:var(--blue);min-height:32px;display:flex;align-items:center}details.rule p{margin:6px 0 4px;font-size:15px;line-height:1.5}

.subjects .subj{padding-left:14px;padding-right:12px}.subjects .subj b{font-size:clamp(16px,4.3vw,24px);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}

.mstory{font-size:16px;line-height:1.5;color:#4A3B3F;margin:0;text-align:left}
.ptabs .ptab{min-width:120px}.mhomes.one{grid-template-columns:1fr}