/* ============ LINGUA — feuille de style ============ */
:root{
  --bg:#F7F5F0; --bg2:#FFFFFF; --bg3:#EFEBE2;
  --ink:#1A1D1C; --ink2:#454E4B; --ink3:#646D69;
  --line:#E2DDD2; --line2:#D2CCBE;
  --brand:#0E5A52; --brand2:#14776C; --brand-soft:#E3EFEC; --brand-ink:#0B4941;
  --gold:#8A5A0C; --gold2:#E0A63F; --gold-soft:#FBF1DE; --gold-deco:#C8871F;
  --ok:#1C7A47; --ok-soft:#E2F3E9;
  --no:#B8332B; --no-soft:#FBE8E6;
  --lock:#79817E;
  --shadow:0 1px 2px rgba(26,29,28,.05), 0 4px 16px rgba(26,29,28,.06);
  --shadow2:0 8px 32px rgba(14,90,82,.16);
  --r:16px; --r2:12px; --r3:22px;
  --nav:66px;
  --fs:1;
}
[data-theme="dark"]{
  --bg:#121614; --bg2:#1B211E; --bg3:#232A27;
  --ink:#F0EDE6; --ink2:#B6BEBA; --ink3:#828B87;
  --line:#2C3531; --line2:#3A443F;
  --brand:#3FA396; --brand2:#55BCAE; --brand-soft:#17302C; --brand-ink:#7FD3C7;
  --gold:#E0A63F; --gold2:#F0C069; --gold-soft:#2C2415; --gold-deco:#E0A63F;
  --ok:#4CBE7D; --ok-soft:#16301F; --no:#E8635A; --no-soft:#2E1817;
  --lock:#6A736F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  --shadow2:0 8px 32px rgba(0,0,0,.45);
}
/* thème système, avant même que le script ait tourné */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121614; --bg2:#1B211E; --bg3:#232A27;
    --ink:#F0EDE6; --ink2:#B6BEBA; --ink3:#828B87;
    --line:#2C3531; --line2:#3A443F;
    --brand:#3FA396; --brand2:#55BCAE; --brand-soft:#17302C; --brand-ink:#7FD3C7;
    --gold:#E0A63F; --gold2:#F0C069; --gold-soft:#2C2415; --gold-deco:#E0A63F;
    --ok:#4CBE7D; --ok-soft:#16301F; --no:#E8635A; --no-soft:#2E1817;
    --lock:#6A736F;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --shadow2:0 8px 32px rgba(0,0,0,.45);
  }
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:calc(16px * var(--fs));line-height:1.55;
  min-height:100dvh;overscroll-behavior-y:none;
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px));
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
/* unicode-bidi:isolate — un mot latin, un chiffre ou une ponctuation finale
   dans une phrase arabe se place sinon du mauvais côté : le texte reste lisible,
   mais la virgule saute en tête de ligne et une référence « A1 » se retourne.
   L'isolation coupe ce calcul du contexte environnant (règle d'ingénierie RTL). */
.ar,[lang="ar"]{font-family:"Noto Naskh Arabic","Amiri","Geeza Pro","Traditional Arabic",serif;direction:rtl;unicode-bidi:isolate;line-height:2}

/* ---------- structure ---------- */
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.view{display:none;animation:fade .25s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pt{padding-top:14px}
.pb{padding-bottom:24px}

/* ---------- topbar ---------- */
.top{
  position:sticky;top:0;z-index:40;background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 0 8px;
  border-bottom:1px solid transparent;transition:border-color .2s, background .2s;
}
.top.stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.top-in{display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto;padding:0 16px}
.brandmark{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.bm-logo{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(145deg,var(--brand2),var(--brand));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.02em;
  box-shadow:0 2px 8px rgba(14,90,82,.28)
}
.bm-t{font-size:.95rem;font-weight:750;letter-spacing:-.01em;line-height:1.1}
.bm-s{font-size:.68rem;color:var(--ink3);font-weight:500}
.icobtn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--bg2);border:1px solid var(--line);font-size:1rem;flex:none;
  transition:transform .12s, background .15s
}
.icobtn:active{transform:scale(.93)}
.langpill{
  display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);font-size:.8rem;font-weight:650;flex:none
}
.langpill:active{transform:scale(.96)}

/* ---------- bottom nav ---------- */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
.nav-in{display:flex;max-width:560px;margin:0 auto;height:var(--nav)}
.nb{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink3);font-size:.64rem;font-weight:600;letter-spacing:.01em;
  position:relative;transition:color .16s
}
.nb svg{width:22px;height:22px;stroke-width:1.7;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.nb.on{color:var(--brand)}
.nb.on::before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}

/* ---------- cards ---------- */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.card+.card{margin-top:10px}
.sec-h{
  font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink3);margin:22px 2px 9px;display:flex;align-items:center;gap:8px
}
.sec-h::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- hero / leçon du jour ---------- */
.hero{
  border-radius:var(--r3);padding:20px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-ink) 0%,var(--brand) 55%,var(--brand2) 100%);
  box-shadow:var(--shadow2);margin-top:4px
}
.hero::after{
  content:"";position:absolute;right:-48px;top:-48px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.17),transparent 68%)
}
.hero-tag{font-size:.64rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:7px}
.hero-t{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;position:relative}
.hero-m{font-size:.82rem;opacity:.82;margin-top:6px;position:relative}
.hero-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:15px;position:relative;
  background:#fff;color:var(--brand-ink);padding:11px 20px;border-radius:100px;
  font-size:.86rem;font-weight:750;box-shadow:0 3px 14px rgba(0,0,0,.16)
}
.hero-go:active{transform:scale(.97)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:12px 8px;text-align:center}
.stat-n{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--brand)}
.stat-l{font-size:.62rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-top:5px;font-weight:650}
.bar{height:8px;background:var(--bg3);border-radius:99px;overflow:hidden;margin-top:10px}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar.gold>i{background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* ---------- listes ---------- */
.row{
  display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r2);padding:12px 13px;margin-bottom:8px;width:100%;text-align:left;
  transition:transform .12s,border-color .15s
}
.row:active{transform:scale(.985)}
.row.locked{opacity:.62}
.row.done{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.row-ic{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-size:1.15rem;background:var(--bg3)
}
.row.done .row-ic{background:var(--ok-soft)}
.row-b{flex:1;min-width:0}
.row-k{font-size:.62rem;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--brand)}
.row.locked .row-k{color:var(--lock)}
.row-t{font-size:.91rem;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.row-s{font-size:.72rem;color:var(--ink3);margin-top:2px}
.row-e{flex:none;font-size:.95rem;color:var(--ink3)}

/* chapitre */
.chap{margin-bottom:16px}
.chap-h{display:flex;align-items:center;gap:11px;padding:14px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px;width:100%;text-align:left}
.chap-ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:1.15rem;flex:none}
.chap-n{font-size:.62rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.chap-t{font-size:1rem;font-weight:750;letter-spacing:-.01em}
.chap-p{font-size:.72rem;color:var(--ink3);margin-top:2px}
.chap-body{padding-left:6px;border-left:2px solid var(--line);margin-left:19px;padding-top:2px}
.chap-body[hidden]{display:none}

/* ---------- leçon ---------- */
.lhead{
  border-radius:var(--r3);padding:18px;color:#fff;margin-top:4px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-ink),var(--brand2))
}
.lhead .back{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  padding:10px 15px;min-height:40px;border-radius:100px;font-size:.78rem;font-weight:650;color:#fff;margin-bottom:11px
}
.lhead h2{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.18}
.lhead .obj{font-size:.82rem;opacity:.85;margin-top:7px}
.lhead .meta{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7}

.prof{
  background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);
  border-radius:var(--r);padding:15px;margin-top:14px;position:relative
}
.prof-h{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:8px}
.prof p{font-size:.88rem;line-height:1.62;color:var(--ink2)}
.prof b{color:var(--ink);font-weight:700}

.notion{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);padding:15px;margin-top:10px}
.notion h3{font-size:.95rem;font-weight:750;margin-bottom:9px;letter-spacing:-.01em}
.notion .body{font-size:.87rem;line-height:1.68;color:var(--ink2)}
.notion .body b{color:var(--ink)}
.ex{background:var(--bg3);border-radius:10px;padding:10px 12px;margin-top:8px}
.ex-a{font-size:.92rem;font-weight:650}
.ex-b{font-size:.78rem;color:var(--ink2);margin-top:2px}
.ex-n{font-size:.7rem;color:var(--ink3);margin-top:3px;font-style:italic}

/* vocabulaire */
.voc{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:12px 13px;margin-bottom:8px;display:flex;gap:11px;align-items:flex-start}
.voc-b{flex:1;min-width:0}
.voc-fr{font-size:.75rem;color:var(--ink3);font-weight:550}
.voc-t{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;margin-top:2px;word-break:break-word}
.voc-t.ar{font-size:1.4rem;font-weight:600}
.voc-p{font-size:.8rem;color:var(--gold);font-style:italic;margin-top:3px;font-weight:600}
.voc-n{font-size:.72rem;color:var(--ink3);margin-top:4px;line-height:1.45}
.reg{display:inline-block;font-size:.58rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:2px}
.reg.parle{background:var(--gold-soft);color:var(--gold)}
.reg.soutenu{background:var(--brand-soft);color:var(--brand)}
.spk{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:1rem;transition:all .14s
}
.spk:active,.spk.on{background:var(--brand);color:#fff;transform:scale(.94)}
.spk.sm{width:38px;height:38px;font-size:.9rem;border-radius:10px}

/* blocs */
.blk{border-radius:var(--r);padding:14px;margin-top:10px;border:1px solid}
.blk-h{font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.blk.hear{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.blk.hear .blk-h{color:var(--ok)}
.blk.spoken{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 28%,transparent)}
.blk.spoken .blk-h{color:var(--gold)}
.blk.idi{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 25%,transparent)}
.blk.idi .blk-h{color:var(--brand)}
.blk.pron{background:var(--bg2);border-color:var(--line)}
.blk.pron .blk-h{color:var(--ink2)}
.it{background:var(--bg2);border-radius:10px;padding:10px 11px;margin-bottom:7px;display:flex;gap:9px;align-items:flex-start}
.it:last-child{margin-bottom:0}
.it-b{flex:1;min-width:0}
.it-t{font-size:.93rem;font-weight:650}
.it-t.ar{font-size:1.25rem;font-weight:600}
.it-p{font-size:.76rem;color:var(--gold);font-style:italic;font-weight:600}
.it-f{font-size:.76rem;color:var(--ink3);margin-top:2px}
.vs{display:grid;gap:6px;margin-top:5px}
.vs-r{display:flex;gap:8px;align-items:center;font-size:.86rem;flex-wrap:wrap}
.vs-k{font-size:.58rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:5px;flex:none;min-width:58px;text-align:center}
.vs-k.s{background:var(--brand-soft);color:var(--brand)}
.vs-k.p{background:var(--gold-soft);color:var(--gold)}
.drill{display:flex;gap:8px;align-items:center;background:var(--bg3);border-radius:9px;padding:8px 10px;margin-bottom:6px}
.drill-w{font-weight:700;font-size:.95rem;flex:none}
.drill-w.ar{font-size:1.2rem}
.drill-p{font-size:.76rem;color:var(--gold);font-style:italic;font-weight:600}
.drill-t{font-size:.7rem;color:var(--ink3)}

/* dialogue */
.bub{max-width:85%;padding:11px 13px;border-radius:16px;margin-bottom:9px;position:relative}
.bub.you{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.bub.other{background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:5px}
.bub .who{font-size:.57rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:3px}
.bub .t{font-size:.93rem;font-weight:650;line-height:1.35}
.bub .t.ar{font-size:1.2rem;font-weight:600}
.bub .p{font-size:.73rem;font-style:italic;opacity:.8;margin-top:3px}
.bub .f{font-size:.75rem;opacity:.78;margin-top:4px}
.bub.hidefr .f{display:none}
.bub.active{outline:2.5px solid var(--gold);outline-offset:2px}
.dctl{display:flex;gap:8px;margin:4px 0 12px}
.dctl>button{flex:1;border-radius:12px;padding:11px;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}
.dplay{background:var(--brand);color:#fff}
.dstop{background:var(--no-soft);color:var(--no)}
.dfr{background:var(--bg3);color:var(--ink2)}
.dfr.on{background:var(--brand);color:#fff}
/* histoires : texte continu, phrase lue surlignée, texte masqué avant la 1re lecture */
.st-txt{line-height:1.75;font-size:.98rem}
.st-s{cursor:pointer;border-radius:6px;padding:1px 2px;transition:background .3s}
.st-s .f{display:block;font-size:.78rem;color:var(--ink2);margin:0 0 6px}
.st-txt.sansfr .f{display:none}
.st-s .ph{display:block;font-size:.8rem;font-style:italic;color:var(--brand);direction:ltr;text-align:left}
.st-txt.sansph .ph{display:none}
.st-txt.lignes .st-s{display:block;margin-bottom:6px}
.st-txt.lignes .st-s .t{display:block;font-size:1.25rem;font-weight:600}
.st-txt:not(.sansfr) .st-s{display:block}
.st-s.active{background:var(--gold-soft,rgba(214,168,58,.22));outline:2px solid var(--gold);outline-offset:1px}
.st-p{display:block;height:10px}
.st-txt.cache .st-s .t,.st-txt.cache .st-s .f,.st-txt.cache .st-s .ph{filter:blur(6px);user-select:none}

/* ---------- quiz ---------- */
.qwrap{margin-top:8px}
.qprog{display:flex;gap:4px;margin-bottom:14px}
.qprog>i{flex:1;height:4px;border-radius:99px;background:var(--bg3)}
.qprog>i.ok{background:var(--ok)}
.qprog>i.no{background:var(--no)}
.qprog>i.cur{background:var(--brand)}
.qkind{font-size:.62rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.qq{font-size:1.05rem;font-weight:700;line-height:1.4;letter-spacing:-.01em;margin-bottom:14px}
.qq.ar{font-size:1.5rem;font-weight:600}
.opt{
  display:block;width:100%;text-align:left;background:var(--bg2);border:2px solid var(--line);
  border-radius:var(--r2);padding:13px 14px;margin-bottom:9px;font-size:.92rem;font-weight:600;
  transition:all .15s
}
.opt.ar{font-size:1.2rem;direction:rtl;text-align:right}
.opt:active{transform:scale(.985)}
.opt.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.opt.no{background:var(--no-soft);border-color:var(--no);color:var(--no)}
.opt.dim{opacity:.5}
.qin{
  width:100%;background:var(--bg2);border:2px solid var(--line);border-radius:var(--r2);
  padding:14px;font-size:1rem;font-weight:600;outline:none;transition:border-color .15s
}
.qin:focus{border-color:var(--brand)}
.qin.ok{border-color:var(--ok);background:var(--ok-soft)}
.qin.no{border-color:var(--no);background:var(--no-soft)}
.words{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;min-height:50px;background:var(--bg3);border-radius:var(--r2);padding:11px}
.wchip{background:var(--bg2);border:1.5px solid var(--line);border-radius:9px;padding:8px 12px;font-size:.88rem;font-weight:650}
.wchip:active{transform:scale(.94)}
.wchip.used{opacity:.3;pointer-events:none}
.mic{
  width:100%;border-radius:var(--r2);padding:16px;background:var(--brand);color:#fff;
  font-size:.92rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px
}
.mic.rec{background:var(--no);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.72}}
.said{background:var(--bg3);border-radius:10px;padding:11px;margin-top:10px;font-size:.88rem}
.why{
  border-radius:var(--r2);padding:13px;margin-top:10px;font-size:.85rem;line-height:1.6;
  background:var(--bg3);border-left:3px solid var(--brand);color:var(--ink2)
}
.why.ok{border-left-color:var(--ok)}
.why.no{border-left-color:var(--no)}
.why b{color:var(--ink)}
.why-h{font-weight:750;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.why.ok .why-h{color:var(--ok)}
.why.no .why-h{color:var(--no)}

/* ---------- boutons ---------- */
.btn{
  width:100%;border-radius:14px;padding:15px;font-size:.95rem;font-weight:750;
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  transition:transform .12s
}
.btn:active{transform:scale(.985)}
.btn.p{background:var(--brand);color:#fff;box-shadow:0 3px 14px rgba(14,90,82,.26)}
.btn.g{background:linear-gradient(135deg,var(--gold-deco),var(--gold2));color:#3A2600;box-shadow:0 3px 14px rgba(200,135,31,.26)}
.btn.s{background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
.btn.ok{background:var(--ok);color:#fff}
.btn:disabled{opacity:.4;pointer-events:none}
.btn.sm{padding:11px;font-size:.85rem;border-radius:12px}
.btns2{display:flex;gap:9px}
.btns2>.btn{margin-top:12px}

/* ---------- résultat ---------- */
.score{text-align:center;padding:26px 18px;border-radius:var(--r3);margin-top:8px;color:#fff}
.score.pass{background:linear-gradient(135deg,#126B3F,var(--ok))}
.score.fail{background:linear-gradient(135deg,#8E2A23,var(--no))}
.score-n{font-size:3.2rem;font-weight:850;letter-spacing:-.04em;line-height:1}
.score-l{font-size:.68rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:4px}
.score-m{font-size:.92rem;margin-top:11px;opacity:.94;line-height:1.5}
.skillbar{margin-top:9px}
.skillbar-h{display:flex;justify-content:space-between;font-size:.78rem;font-weight:650;margin-bottom:4px}
.skillbar-h span:last-child{color:var(--ink3);font-weight:600}

/* ---------- coach ---------- */
.chat{display:flex;flex-direction:column;gap:10px;padding:4px 0 10px}
.msg{max-width:88%;padding:12px 14px;border-radius:16px;font-size:.88rem;line-height:1.55;white-space:pre-wrap}
.msg.me{background:var(--brand);color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.msg.ai{background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.ai b{font-weight:750}
.chatbar{
  position:sticky;bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px));
  background:var(--bg);padding:10px 0;display:flex;gap:8px;border-top:1px solid var(--line)
}
.chatbar input{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:100px;padding:12px 16px;font-size:.9rem;outline:none}
.chatbar input:focus{border-color:var(--brand)}
.chatbar button{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}
.sugg{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.sugg::-webkit-scrollbar{display:none}
.sugg button{flex:none;background:var(--bg2);border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:.78rem;font-weight:600;white-space:nowrap}

/* ---------- réglages ---------- */
.set{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.set:last-child{border-bottom:none}
.set-b{flex:1;min-width:0}
.set-t{font-size:.9rem;font-weight:650}
.set-s{font-size:.74rem;color:var(--ink3);margin-top:1px;line-height:1.4}
.seg{display:flex;background:var(--bg3);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:7px 11px;border-radius:8px;font-size:.76rem;font-weight:650;color:var(--ink3)}
.seg button.on{background:var(--bg2);color:var(--ink);box-shadow:var(--shadow)}
select.sel{background:var(--bg3);border:none;border-radius:10px;padding:9px 12px;font-size:.82rem;font-weight:650;outline:none}
input.tin{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:.85rem;outline:none;margin-top:8px}
input.tin:focus{border-color:var(--brand)}

/* ---------- divers ---------- */
.empty{text-align:center;padding:36px 20px;color:var(--ink3);font-size:.88rem;line-height:1.6}
.empty .big{font-size:2.4rem;margin-bottom:10px;opacity:.55}
.note{font-size:.76rem;color:var(--ink3);line-height:1.55;padding:0 2px;margin-top:8px}
.tag{display:inline-block;font-size:.64rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px;background:var(--bg3);color:var(--ink3)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.no{background:var(--no-soft);color:var(--no)}
.tag.gold{background:var(--gold-soft);color:var(--gold)}
.sheet{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);display:none;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)
}
.sheet.on{display:flex;animation:fade .2s}
.sheet-in{
  background:var(--bg2);width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:20px 18px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));animation:up .28s cubic-bezier(.2,.9,.3,1);
  max-height:86dvh;overflow-y:auto
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet-h{font-size:1.05rem;font-weight:750;margin-bottom:4px}
.sheet-s{font-size:.8rem;color:var(--ink3);margin-bottom:14px}
.grab{width:38px;height:4px;background:var(--line2);border-radius:99px;margin:0 auto 14px}
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav) + 20px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:100px;font-size:.83rem;font-weight:650;
  z-index:100;opacity:0;pointer-events:none;transition:all .3s;white-space:nowrap;max-width:90vw
}
.toast.on{opacity:1;transform:translateX(-50%)}
.hidden{display:none !important}

/* Navigation au clavier : un anneau visible sur les deux thèmes */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
.opt:focus-visible,.row:focus-visible,.btn:focus-visible{outline-offset:3px}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
}

/* ============ cartes mémoire ============ */
.card-face{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r3);
  padding:26px 18px;text-align:center;box-shadow:var(--shadow);margin-bottom:14px
}
.card-face.listen{padding:34px 18px}
.cf-t{font-size:1.6rem;font-weight:750;letter-spacing:-.02em;line-height:1.3;word-break:break-word}
.cf-t.ar{font-size:2.1rem;font-weight:600;line-height:1.9}
.cf-fr{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.cf-h{font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);margin-bottom:10px}
.cf-p{font-size:.88rem;color:var(--gold);font-style:italic;font-weight:600;margin-top:5px}
.card-face .spk{margin:14px auto 0}
.bigspk{
  width:88px;height:88px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:2rem;
  box-shadow:0 4px 18px rgba(14,90,82,.18);transition:transform .14s
}
.bigspk:active,.bigspk.on{transform:scale(.93);background:var(--brand);color:#fff}

.recall{
  background:var(--bg3);border-radius:var(--r2);padding:14px;text-align:center;margin-top:12px
}
.recall-t{font-size:1.2rem;font-weight:750}
.recall-t.ar{font-size:1.6rem;font-weight:600}
.recall-p{font-size:.82rem;color:var(--gold);font-style:italic;font-weight:600;margin-top:3px}
.recall-f{font-size:.86rem;color:var(--ink2);margin-top:5px}
.recall-n{font-size:.75rem;color:var(--ink3);margin-top:6px;line-height:1.5}
.recall .spk{margin:10px auto 0}

.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-top:10px}
.gr{
  border-radius:12px;padding:13px 10px;font-size:.88rem;font-weight:700;min-height:52px;
  display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid transparent
}
.gr small{font-size:.6rem;font-weight:600;opacity:.72;text-transform:none;letter-spacing:0}
.gr:active{transform:scale(.96)}
.g0{background:var(--no-soft);color:var(--no)}
.g1{background:var(--gold-soft);color:var(--gold)}
.g2{background:var(--brand-soft);color:var(--brand)}
.g3{background:var(--ok-soft);color:var(--ok)}

.diff{margin-top:8px;font-size:1rem;letter-spacing:.02em}
.diff.ar{font-size:1.3rem}
.d-ok{color:var(--ok);font-weight:700}
.d-no{color:var(--no);font-weight:700;text-decoration:underline wavy}

/* ============ clavier arabe ============ */
.kbd{background:var(--bg3);border-radius:var(--r2);padding:9px;margin-top:10px;user-select:none}
.kbd-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink3);padding:2px 4px 8px
}
.kbd-tog{font-size:.7rem;font-weight:700;color:var(--brand);text-transform:none;letter-spacing:0;min-height:38px;padding:0 10px}
.kbd-row{display:flex;gap:5px;margin-bottom:5px;justify-content:center}
.kbd-row:last-child{margin-bottom:0}
.kbd-k{
  flex:1;min-width:0;height:46px;border-radius:9px;background:var(--bg2);
  border:1px solid var(--line);font-size:1.35rem;font-family:"Noto Naskh Arabic",serif;
  display:grid;place-items:center;transition:transform .08s,background .1s
}
.kbd-k:active{transform:scale(.9);background:var(--brand-soft)}
.kbd-h{font-size:1.5rem;color:var(--brand)}
.kbd-w{font-size:.78rem;font-family:inherit;font-weight:650;flex:1.6}

/* ============ lecteur audio ============ */
.player{
  background:linear-gradient(135deg,var(--brand-ink),var(--brand2));color:#fff;
  border-radius:var(--r3);padding:34px 20px;text-align:center;box-shadow:var(--shadow2);
  min-height:230px;display:flex;flex-direction:column;justify-content:center;gap:10px
}
.pl-fr{font-size:1.15rem;font-weight:700;line-height:1.3}
.pl-t{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;min-height:2.2rem}
.pl-t.ar{font-size:2.2rem;font-weight:600;line-height:1.8}
.pl-p{font-size:.92rem;opacity:.82;font-style:italic;min-height:1.2rem}
.pl-ctl{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:22px}
.icobtn.big{width:58px;height:58px;font-size:1.3rem;border-radius:18px}
.icobtn.big.prim{
  width:72px;height:72px;background:var(--brand);color:#fff;border-color:transparent;
  font-size:1.5rem;box-shadow:0 4px 16px rgba(14,90,82,.3)
}

/* ============ atelier ============ */
.opt-p{font-size:.78rem;color:var(--gold);font-style:italic;font-weight:600;margin-left:6px}
.opt-f{display:block;font-size:.74rem;color:var(--ink3);font-weight:500;margin-top:3px;direction:ltr;text-align:left}
.opt.ar .opt-f{text-align:right}
.lect{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 18px;font-size:1.7rem;line-height:2.4;text-align:center;box-shadow:var(--shadow)
}
.lect.solution{
  background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent);margin-top:12px
}
.tracewrap{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);aspect-ratio:1;max-width:100%
}
#trace{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}

/* ============ conversation ============ */
.convo-bar{
  position:sticky;bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px));
  background:var(--bg);padding:12px 0 8px;border-top:1px solid var(--line);margin-top:14px
}
.convo-bar .mic{margin:0}
.cv-obj{padding:10px 13px;margin-bottom:10px}
.cv-o{font-size:.82rem;color:var(--ink2);padding:2px 0}
.cv-o.ok{color:var(--ok);font-weight:700}
.cv-aide{margin:0 0 10px;max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cv-aide .wchip{text-align:left;white-space:normal}
.convo-bar .btn{margin-top:8px}

/* ============ courbe d'activité ============ */
.spark{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:14px}
.spark>i{flex:1;background:var(--bg3);border-radius:3px 3px 0 0;min-height:4px;transition:height .4s}
.spark>i.on{background:linear-gradient(180deg,var(--brand2),var(--brand))}

textarea.tin{font-family:inherit;line-height:1.6}
textarea.tin.ar{font-family:"Noto Naskh Arabic",serif;font-size:1.25rem;line-height:2;direction:rtl}
input.tin.ar{font-family:"Noto Naskh Arabic",serif;font-size:1.25rem;direction:rtl}
.qin.ar{font-family:"Noto Naskh Arabic",serif;font-size:1.4rem;direction:rtl;text-align:right}