/* Toby English — styles pensés pour la dyspraxie :
   grandes cibles (≥ 56 px), espacement généreux, une seule colonne, pas d'italique,
   couleurs + icônes (jamais la couleur seule), focus très visible, animations désactivables. */

:root {
  --bg: #FBF6EC; --surface: #FFFDF8; --surface2: #F3ECDD; --ink: #1F2A37; --muted: #5B6573; --line: #E3D9C6;
  --primary: #3A5BA0; --primary-ink: #fff; --primary-soft: #E4EAF6; --accent: #E9A23B; --accent-soft: #FCEFD8;
  --good: #2E63B8; --good-bg: #E3ECFA; --soft: #B86B12; --soft-bg: #FDF0DA; --danger: #B23A3A;
  --focus: #1D5FD1; --shadow: 0 2px 0 rgba(31,42,55,.08), 0 6px 18px rgba(31,42,55,.06);
  --c-s: #1D5FD1; --c-v: #C0392B; --c-a: #A0522D; --c-n: #D35400; --c-q: #7D3C98; --c-o: #117A8B; --c-x: #C0392B;
  --fs: 20px; --lh: 1.6; --ls: .01em; --ws: .06em;
  --font: 'Lexend', 'Verdana', 'Segoe UI', sans-serif;
  --radius: 16px;
}
[data-theme="bleu"] { --bg: #EAF2FA; --surface: #F8FBFE; --surface2: #DCE8F4; --line: #C9D9EA; }
[data-theme="vert"] { --bg: #EDF6EC; --surface: #FAFDF9; --surface2: #DDEEDB; --line: #CBE0C8; }
[data-theme="blanc"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface2: #F2F4F7; --line: #DDE1E6; }
[data-theme="sombre"] {
  --bg: #1B2027; --surface: #242B34; --surface2: #2E3640; --ink: #ECEFF3; --muted: #A9B3BF; --line: #3A4450;
  --primary: #8FB0F2; --primary-ink: #0F1626; --primary-soft: #22304D; --accent: #F0B455; --accent-soft: #3A3022;
  --good: #8FB0F2; --good-bg: #1F2D47; --soft: #F0B455; --soft-bg: #3A3022; --danger: #F07C7C; --focus: #7FB2FF;
  --c-s: #7FB2FF; --c-v: #FF8A7A; --c-a: #E0A07A; --c-n: #FFB067; --c-q: #D19CF0; --c-o: #5FD3E0; --c-x: #FF8A7A;
  --shadow: 0 2px 0 rgba(0,0,0,.3);
}
[data-size="s"] { --fs: 17px; } [data-size="m"] { --fs: 20px; } [data-size="l"] { --fs: 23px; } [data-size="xl"] { --fs: 27px; }
[data-font="atkinson"] { --font: 'Atkinson Hyperlegible', 'Verdana', sans-serif; }
[data-font="opendyslexic"] { --font: 'OpenDyslexic', 'Verdana', sans-serif; --ls: 0; }
[data-font="systeme"] { --font: 'Verdana', 'Segoe UI', sans-serif; }
[data-spacing="large"] { --lh: 1.9; --ls: .04em; --ws: .14em; }
[data-colors="off"] { --c-s: inherit; --c-v: inherit; --c-a: inherit; --c-n: inherit; --c-q: inherit; --c-o: inherit; --c-x: inherit; }

* { box-sizing: border-box; }
html { font-size: var(--fs); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  line-height: var(--lh); letter-spacing: var(--ls); word-spacing: var(--ws);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; max-width: 68ch; }
b, strong { font-weight: 700; }
em, i { font-style: normal; font-weight: 700; } /* pas d'italique : difficile à lire */
.muted { color: var(--muted); }
.hidden { display: none !important; }
button, input, select { font: inherit; letter-spacing: inherit; color: inherit; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 10px; }

[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* couleurs grammaticales : couleur + gras (jamais la couleur seule) */
.g-s { color: var(--c-s); font-weight: 700; }
.g-v { color: var(--c-v); font-weight: 700; }
.g-a { color: var(--c-a); font-weight: 700; }
.g-n { color: var(--c-n); font-weight: 700; text-decoration: underline wavy; text-underline-offset: 4px; }
.g-q { color: var(--c-q); font-weight: 700; }
.g-o { color: var(--c-o); font-weight: 700; }
.g-x { color: var(--c-x); font-weight: 800; background: color-mix(in srgb, var(--c-x) 14%, transparent); border-radius: 4px; padding: 0 2px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 56px; padding: .55em 1.3em; border-radius: 14px; border: 2px solid transparent;
  font-weight: 700; cursor: pointer; text-align: center; transition: transform .08s, background .15s;
  box-shadow: 0 4px 0 rgba(0,0,0,.14);
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.14); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.secondary { background: var(--accent); color: #2b1d05; }
.btn.ghost { background: var(--surface); border-color: var(--line); box-shadow: none; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); box-shadow: none; }
.btn.big { min-height: 64px; font-size: 1.05rem; padding: .6em 1.6em; }
.btn.small { min-height: 48px; font-size: .9rem; padding: .4em 1em; }
.btn.mic { background: var(--c-q); color: #fff; }
.btn.mic.on { animation: pulse 1s infinite; }
.icon-btn { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); font-size: 1.2rem; cursor: pointer; flex: none; }
.link-btn { background: none; border: none; color: var(--focus); font-weight: 700; cursor: pointer; min-height: 48px; padding: 0 .6em; text-decoration: underline; text-underline-offset: 4px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.row-btns.center, .hero-btns.center { justify-content: center; }

.audio-btn {
  width: 56px; height: 56px; flex: none; border-radius: 50%; border: 2px solid var(--line);
  background: var(--surface); font-size: 1.3rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.audio-btn.big { width: 76px; height: 76px; font-size: 1.9rem; background: var(--primary-soft); border-color: var(--primary); }
.audio-btn.slow.big { width: 64px; height: 64px; font-size: 1.5rem; background: var(--surface); border-color: var(--line); }
.audio-btn:active { transform: scale(.95); }

/* ---------- Coque ---------- */
.shell { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 14px; background: var(--surface);
  border-right: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; }
.brand b { display: block; font-size: 1.1rem; } .brand small { color: var(--muted); font-size: .8rem; }
.nav-btn {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 16px; border-radius: 14px;
  border: 2px solid transparent; background: none; cursor: pointer; font-weight: 700; text-align: left; width: 100%;
}
.nav-btn:hover { background: var(--surface2); }
.nav-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--ink); }
.nav-ic { font-size: 1.4rem; width: 1.6em; text-align: center; }
.pill { margin-left: auto; background: var(--accent); color: #2b1d05; border-radius: 99px; padding: 0 .6em; font-size: .85rem; }
.main { padding: 0 28px 60px; outline: none; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
  padding: 14px 0; background: var(--bg); border-bottom: 2px solid var(--line); margin-bottom: 24px;
}
.stat { font-size: .95rem; white-space: nowrap; }
.goal { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: .9rem; }
.goal-bar { width: 160px; height: 14px; background: var(--surface2); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.goal-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.page { max-width: 860px; margin: 0 auto; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 18px 0; box-shadow: var(--shadow); }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.stat-card { text-align: center; } .stat-card b { display: block; font-size: 1.8rem; } .stat-card span { color: var(--muted); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Mascotte ---------- */
.toby { display: inline-block; flex: none; }
.toby svg { display: block; overflow: visible; }
[data-motion="on"] .toby svg { animation: bob 3.2s ease-in-out infinite; }
.toby-say { display: flex; align-items: center; gap: 16px; }
.bubble-say { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 14px 18px; flex: 1; box-shadow: var(--shadow); }
.bubble-say::before { content: ''; position: absolute; left: -11px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right-color: var(--line); border-left: 0; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(125,60,152,.5); } 50% { box-shadow: 0 0 0 12px rgba(125,60,152,0); } }

/* ---------- Accueil / parcours ---------- */
.hero { margin-bottom: 22px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.level-tabs { display: flex; gap: 12px; margin: 26px 0 8px; flex-wrap: wrap; }
.level-tab { min-height: 64px; min-width: 120px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 16px; }
.level-tab b { font-size: 1.15rem; } .level-tab small { color: var(--muted); font-size: .8rem; }
.level-tab.active { border-color: var(--primary); background: var(--primary-soft); }
.level-tab.soon { opacity: .7; }
.soon-card { text-align: center; padding: 34px; }
.unit { margin: 26px 0 40px; }
.unit-head {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--uc); color: #fff; box-shadow: var(--shadow);
}
.unit-head p { margin: 0; opacity: .95; font-size: .92rem; }
.unit-head h2 { margin: 0; color: #fff; }
.unit-head small { opacity: .9; font-weight: 700; }
.unit-ic { font-size: 2.2rem; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.22); border-radius: 50%; flex: none; }
.unit-txt { flex: 1; min-width: 0; }
.unit-count { font-weight: 800; background: rgba(0,0,0,.15); padding: 4px 12px; border-radius: 99px; flex: none; }
.unit.locked .unit-head { filter: grayscale(.75) brightness(.95); }
.nodes { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 0 6px; }
.node-wrap { display: flex; align-items: center; gap: 16px; transform: translateX(calc(var(--off) * 46px)); }
.node {
  width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  font-size: 1.6rem; font-weight: 800; color: #fff; background: var(--uc);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--uc) 65%, #000);
}
.node:active { transform: translateY(4px); box-shadow: 0 3px 0 color-mix(in srgb, var(--uc) 65%, #000); }
.node.done { background: var(--accent); box-shadow: 0 7px 0 #B57818; }
.node.locked { background: var(--surface2); color: var(--muted); box-shadow: 0 7px 0 var(--line); cursor: default; }
.node.review { border-radius: 24px; }
.node.current { outline: 5px solid color-mix(in srgb, var(--uc) 35%, transparent); outline-offset: 6px; }
[data-motion="on"] .node.current { animation: halo 2s ease-in-out infinite; }
@keyframes halo { 50% { outline-offset: 10px; } }
.node-label { font-weight: 700; max-width: 360px; line-height: 1.3; text-wrap: balance; }

/* aperçu de leçon */
.pv-words { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.pv-words li { display: flex; align-items: center; gap: 12px; }
.pv-emoji { font-size: 1.5rem; width: 1.6em; text-align: center; }

/* ---------- Modales et notifications ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(20,25,32,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--surface); border-radius: 22px; padding: 26px 28px; max-width: 620px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-icon { font-size: 2.6rem; text-align: center; }
.modal h2 { text-align: center; }
.modal-btns { display: flex; gap: 14px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.modal-btns .btn { flex: 1; min-width: 160px; }
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--bg);
  padding: 14px 22px; border-radius: 14px; display: flex; gap: 10px; align-items: center; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: opacity .5s;
}
.toast.out { opacity: 0; }

/* ---------- Mode leçon (plein écran, épuré) ---------- */
.lesson-mode { min-height: 100vh; }
.lesson { display: flex; flex-direction: column; min-height: 100vh; }
.l-head { display: flex; align-items: center; gap: 18px; padding: 16px 24px; max-width: 980px; width: 100%; margin: 0 auto; }
.l-progress { flex: 1; height: 18px; background: var(--surface2); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.l-fill { height: 100%; width: 0; background: var(--primary); border-radius: 99px; transition: width .35s; }
.l-count { font-weight: 700; color: var(--muted); min-width: 4.5em; text-align: right; }
.l-body { flex: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: 12px 24px 200px; }
.l-foot { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 3px solid var(--line); padding: 16px 24px 20px; z-index: 10; }
.l-foot.good { background: var(--good-bg); border-top-color: var(--good); }
.l-foot.soft { background: var(--soft-bg); border-top-color: var(--accent); }
.fb, .foot-row { max-width: 780px; margin: 0 auto; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.foot-row .btn { min-width: 220px; }
.kbd-help { color: var(--muted); font-size: .8rem; }
.fb-title { font-size: 1.2rem; font-weight: 800; }
.l-foot.good .fb-title { color: var(--good); }
.l-foot.soft .fb-title { color: var(--soft); }
.fb-sol { font-size: 1.15rem; margin: 4px 0; }
.fb-sub { color: var(--muted); }
.fb-note { margin: 4px 0; }
.fb:not(:empty) { margin-bottom: 12px; }

.ex-head { margin: 10px 0 22px; }
.ex-title { font-size: 1.35rem; margin: 0; }
.ex-sub { color: var(--muted); margin: 4px 0 0; font-size: .92rem; }
.prompt-word { display: flex; align-items: center; gap: 18px; margin: 10px 0 26px; }
.word-big { font-size: 1.8rem; font-weight: 800; }
.prompt-fr { display: flex; align-items: center; gap: 16px; font-size: 1.45rem; font-weight: 700; margin: 10px 0 24px; padding: 16px 20px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); }
.mid-emoji { font-size: 2.6rem; }
.listen-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 12px 0 26px; }
.audio-row { display: flex; gap: 14px; align-items: center; justify-content: center; }
.pron { margin: 10px 0; font-size: 1rem; }
.pron-lbl { color: var(--muted); }

/* choix */
.choices { display: grid; gap: 14px; }
.choices.two { grid-template-columns: 1fr 1fr; }
.pic-grid { grid-template-columns: repeat(2, 1fr); }
.choice {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 12px 18px;
  border-radius: var(--radius); border: 3px solid var(--line); background: var(--surface); cursor: pointer;
  text-align: left; font-weight: 600; font-size: 1.08rem; box-shadow: 0 4px 0 var(--line);
}
.choice:hover { border-color: color-mix(in srgb, var(--focus) 50%, var(--line)); }
.choice.selected { border-color: var(--focus); background: color-mix(in srgb, var(--focus) 10%, var(--surface)); box-shadow: 0 4px 0 var(--focus); }
.choice.right { border-color: var(--good); background: var(--good-bg); box-shadow: 0 4px 0 var(--good); }
.choice.right::after { content: '✓'; position: absolute; right: 16px; font-size: 1.4rem; color: var(--good); font-weight: 900; }
.choice.wrong { border-color: var(--accent); background: var(--soft-bg); box-shadow: 0 4px 0 var(--accent); }
.choice.wrong::after { content: '✗'; position: absolute; right: 16px; font-size: 1.3rem; color: var(--soft); font-weight: 900; }
.choice:disabled { cursor: default; opacity: 1; }
.choice.nope { opacity: .45; }
.choice.pic { justify-content: center; min-height: 150px; }
.pic { font-size: 4.2rem; line-height: 1; }
.key {
  flex: none; width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--line); display: inline-flex;
  align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; color: var(--muted); background: var(--bg);
}
.choice.pic .key { position: absolute; left: 12px; top: 12px; }

/* carte de découverte */
.learn-card { text-align: center; padding: 24px; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.badge-new { display: inline-block; background: var(--accent-soft); color: var(--soft); border-radius: 99px; padding: 4px 14px; font-weight: 800; font-size: .85rem; margin-bottom: 8px; }
.badge-new.gram { background: color-mix(in srgb, var(--c-q) 15%, var(--surface)); color: var(--c-q); }
.badge-new.tip { background: var(--primary-soft); color: var(--primary); }
.big-emoji { font-size: 6rem; line-height: 1.15; }
.learn-en { font-size: 2.3rem; font-weight: 800; margin: 6px 0 14px; }
.learn-fr { font-size: 1.35rem; margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--line); color: var(--muted); font-weight: 600; }

/* grammaire */
.grammar-card { background: var(--surface); border: 2px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.g-intro { color: var(--muted); }
.g-examples { display: grid; gap: 10px; margin: 12px 0 18px; }
.g-ex { display: flex; align-items: center; gap: 14px; font-size: 1.25rem; }
.g-table { border-collapse: separate; border-spacing: 0; margin: 14px 0; width: 100%; max-width: 560px; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; }
.g-table th, .g-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.g-table th { background: var(--surface2); }
.g-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface2) 45%, var(--surface)); }
.g-table tr:last-child td { border-bottom: none; }
.g-rule { background: var(--accent-soft); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.g-tip { background: var(--primary-soft); border-radius: 12px; padding: 12px 16px; margin: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.g-unit summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; min-height: 48px; display: flex; align-items: center; gap: 8px; }
.g-sheet { border-top: 2px dashed var(--line); padding-top: 14px; margin-top: 14px; }

/* trous */
.gap-sentence { font-size: 1.55rem; font-weight: 600; margin: 10px 0 10px; line-height: 1.8; }
.gap-slot { display: inline-block; min-width: 4.5em; border-bottom: 4px solid var(--focus); text-align: center; padding: 0 .2em; color: var(--focus); }
.gap-slot.filled { border-bottom-style: solid; }
.gap-slot.right { color: var(--good); border-color: var(--good); }
.gap-slot.fixed { color: var(--soft); border-color: var(--accent); }
.gap-fr { color: var(--muted); font-size: 1.05rem; margin-bottom: 22px; }

/* écriture */
.type-input {
  width: 100%; min-height: 66px; font-size: 1.4rem; padding: 10px 18px; border-radius: var(--radius);
  border: 3px solid var(--line); background: var(--surface);
}
.type-input.small { min-height: 56px; font-size: 1rem; max-width: 340px; }
.type-input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent); }
.type-input.right { border-color: var(--good); background: var(--good-bg); }
.type-input.wrong { border-color: var(--accent); background: var(--soft-bg); }
.hint-box { font-size: 1.4rem; letter-spacing: .15em; margin: 12px 0 0; min-height: 1.5em; color: var(--focus); font-weight: 700; }

/* tuiles de phrase */
.answer-line {
  min-height: 84px; border-bottom: 3px solid var(--line); border-top: 3px solid var(--line); padding: 12px 4px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px;
}
.answer-line.right { border-color: var(--good); background: var(--good-bg); }
.answer-line.wrong { border-color: var(--accent); background: var(--soft-bg); }
.placeholder { color: var(--muted); }
.bank { display: flex; flex-wrap: wrap; gap: 14px; }
.tile {
  min-height: 58px; min-width: 58px; padding: 6px 18px; border-radius: 14px; border: 3px solid var(--line);
  background: var(--surface); font-weight: 700; font-size: 1.15rem; cursor: pointer; box-shadow: 0 4px 0 var(--line);
}
.tile.used { visibility: visible; opacity: .25; box-shadow: none; }
.tile.placed { border-color: var(--focus); box-shadow: 0 4px 0 var(--focus); }

/* paires */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; width: 100%; }
.pair-col { display: grid; gap: 14px; }
.pair {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 18px; border-radius: var(--radius);
  border: 3px solid var(--line); background: var(--surface); font-weight: 700; font-size: 1.1rem; cursor: pointer; text-align: left; width: 100%; line-height: 1.3;
  box-shadow: 0 4px 0 var(--line);
}
.pair.selected { border-color: var(--focus); box-shadow: 0 4px 0 var(--focus); background: color-mix(in srgb, var(--focus) 10%, var(--surface)); }
.pair.matched { border-color: var(--good); background: var(--good-bg); box-shadow: none; opacity: .65; }
.pair.matched::after { content: '✓'; margin-left: auto; color: var(--good); font-weight: 900; }
.pair.nope { border-color: var(--accent); }
[data-motion="on"] .pair.nope { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* parler */
.speak-card { text-align: center; padding: 22px; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; display: grid; gap: 12px; justify-items: center; }
.speak-status { text-align: center; font-weight: 700; min-height: 1.6em; }
.heard { display: block; color: var(--muted); font-weight: 400; }

/* dialogue */
.chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.bubble { max-width: 82%; padding: 12px 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); position: relative; }
.bubble.them { align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--primary-soft); border-color: var(--primary); border-bottom-right-radius: 4px; }
.bubble .who { font-size: .8rem; font-weight: 800; color: var(--muted); }
.b-en { font-size: 1.15rem; font-weight: 600; }
.b-fr { color: var(--muted); font-size: .9rem; }
.b-tools { position: absolute; right: -66px; top: 50%; transform: translateY(-50%); }
.bubble.me .b-tools { right: auto; left: -66px; }
.chat-q { font-weight: 700; }
.chat-end { text-align: center; font-weight: 800; font-size: 1.2rem; }

/* fin de leçon */
.finish { max-width: 720px; margin: 0 auto; padding: 40px 24px 60px; text-align: center; }
.finish .toby { margin: 0 auto; }
.finish-sub { margin: 0 auto 20px; font-size: 1.1rem; }
.finish-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.fs { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 8px; }
.fs b { display: block; font-size: 1.5rem; } .fs span { color: var(--muted); font-size: .85rem; }
.finish .card { text-align: left; }
.ok-card { background: var(--good-bg); border-color: var(--good); }
.badge-card { background: var(--accent-soft); border-color: var(--accent); }
.badge-line { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.badge-ic { font-size: 1.8rem; }

/* révision */
.mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; margin: 12px 0; }
.mem-col { background: var(--surface2); border-radius: 14px; padding: 12px 6px; }
.mem-ic { font-size: 1.8rem; } .mem-col b { display: block; font-size: 1.4rem; } .mem-col span { font-size: .85rem; color: var(--muted); }

/* lexique */
.lex-tools { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.search { flex: 1; min-width: 240px; min-height: 58px; padding: 0 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); }
.select { min-height: 58px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); max-width: 100%; }
.lex-unit { margin: 26px 0 10px; }
.lex-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); margin-bottom: 10px; }
.lex-row.unseen { opacity: .7; }
.lex-emoji { font-size: 1.8rem; width: 1.6em; text-align: center; flex: none; }
.lex-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lex-txt b { font-size: 1.15rem; }
.dots { color: var(--primary); letter-spacing: .1em; white-space: nowrap; font-size: .9rem; }

/* progrès */
.level-card { display: flex; align-items: center; gap: 20px; }
.lvl-badge { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: #2b1d05; font-size: 2.2rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.lvl-txt { flex: 1; } .lvl-txt .goal-bar { width: 100%; margin: 8px 0; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 460px; margin: 10px 0 16px; }
.cal-day { aspect-ratio: 1; border-radius: 10px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary-ink); }
.cal-day.on { background: color-mix(in srgb, var(--primary) 55%, var(--surface)); }
.cal-day.goal { background: var(--primary); }
.cal-day.frozen { background: #CFE6F7; }
.cal-day.today { outline: 3px solid var(--accent); outline-offset: 2px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { text-align: center; padding: 14px 10px; border-radius: 14px; background: var(--surface2); opacity: .55; display: flex; flex-direction: column; gap: 2px; }
.badge.got { opacity: 1; background: var(--accent-soft); border: 2px solid var(--accent); }
.badge small { color: var(--muted); font-size: .78rem; line-height: 1.35; }

/* réglages */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.set-row:last-child { border-bottom: none; }
.set-lbl { display: flex; flex-direction: column; max-width: 340px; }
.set-lbl small { font-size: .82rem; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-btn { min-height: 52px; min-width: 64px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; }
.seg-btn.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.preset { text-align: left; min-height: 96px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.preset small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.preset.on, .preset:hover { border-color: var(--primary); }
.kbd-list { list-style: none; padding: 0; display: grid; gap: 8px; }
kbd { display: inline-block; min-width: 2.4em; padding: 2px 8px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 8px; background: var(--surface2); font-family: inherit; font-weight: 700; text-align: center; }

/* accueil */
.onboard { max-width: 680px; margin: 0 auto; padding: 50px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.onboard .lead { font-size: 1.15rem; }
.onb-list { text-align: left; list-style: none; padding: 0; display: grid; gap: 10px; font-size: 1.05rem; }
.onboard .presets { width: 100%; }
.onboard .set-row { width: 100%; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 2px solid var(--line); }
  .brand { width: 100%; padding-bottom: 6px; }
  .nav-btn { width: auto; flex: 1 1 140px; }
  .main { padding: 0 16px 60px; }
  .goal { margin-left: 0; }
  .node-wrap { transform: none; }
  .finish-stats { grid-template-columns: 1fr 1fr; }
  .kbd-help { display: none; }
  .foot-row .btn { width: 100%; }
  .b-tools { position: static; transform: none; margin-top: 6px; }
}

/* ---------- Impression des fiches ---------- */
@media print {
  .side, .topbar, .title-row button, .audio-btn { display: none !important; }
  .shell { display: block; } body { background: #fff; }
  details { display: block; } details > * { display: block; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ---------- Connexion et sauvegarde en ligne ---------- */
.login .type-input { max-width: 420px; }
.login-toby { font-size: 5rem; line-height: 1; }
.login-msg { font-weight: 700; margin: 6px 0; }
.login-msg.err { color: var(--danger); }
.login-msg.ok { color: var(--good); }
.cloud-stat { background: none; border: 2px solid var(--line); border-radius: 99px; padding: 4px 12px; cursor: pointer; min-height: 40px; font-size: .85rem; }
.snaps { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
@media (max-width: 860px) { .cloud-lbl { display: none; } }

/* ---------- Illustrations générées ---------- */
.pic-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.word-img { display: block; border-radius: 14px; object-fit: contain; }
.pic-wrap.big .word-img { width: 190px; height: 190px; margin: 0 auto; border-radius: 22px; }
.pic-wrap.opt .word-img { width: 130px; height: 130px; }
.pic-wrap.mid .word-img { width: 76px; height: 76px; }
.pic-wrap.small .word-img { width: 44px; height: 44px; border-radius: 8px; }
.big-emoji .pic-wrap { font-size: inherit; }

/* ---------- Paires de sons ---------- */
.mp-grid { grid-template-columns: 1fr 1fr; }
.choice.mp { justify-content: center; min-height: 170px; }
.choice.mp .key { position: absolute; left: 12px; top: 12px; }
.mp-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mp-emoji { font-size: 3rem; line-height: 1.1; }
.mp-word { font-size: 1.6rem; }
.mp-sound { font-weight: 700; color: var(--muted); background: var(--surface2); border-radius: 99px; padding: 4px 14px; }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* ---------- Cartes mémoire ---------- */
.fc-card { max-width: 640px; margin: 0 auto; background: var(--surface); border: 3px solid var(--uc); border-radius: 26px; overflow: hidden; box-shadow: 0 8px 0 color-mix(in srgb, var(--uc) 35%, transparent); }
.fc-band { background: var(--uc); color: #fff; font-weight: 800; padding: 10px 18px; font-size: .9rem; }
.fc-face { padding: 22px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.fc-back { border-top: 3px dashed var(--line); }
.fc-word { font-size: 2.2rem; font-weight: 800; }
.fc-word.fr { color: var(--muted); }
.fc-answer { font-size: 2rem; font-weight: 800; color: var(--uc); }
.fc-flip { display: flex; margin: 24px auto 0; min-width: 280px; }
.fc-rate { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 100%; }
.fc-rate .btn { min-height: 64px; flex-direction: row; justify-content: flex-start; gap: 10px; font-size: 1rem; box-shadow: none; border: 3px solid var(--line); background: var(--surface); }
.fc-rate .btn .key { margin: 0; }
.fc-no:hover { border-color: var(--accent); } .fc-mid:hover { border-color: var(--focus); } .fc-yes:hover { border-color: var(--good); }
@media (max-width: 600px) { .fc-rate { grid-template-columns: 1fr; } }

.lesson.no-foot .l-foot { display: none; }
.lesson.no-foot .l-body { padding-bottom: 40px; }
.fc-card.flipped .pic-wrap.big .word-img { width: 120px; height: 120px; }
.fc-card.flipped .fc-face { gap: 8px; padding: 16px 22px; }
.fc-rate .btn { white-space: nowrap; padding: 6px 14px; }

/* ---------- Règles anti-écrasement (valables partout) ---------- */
/* un texte de bouton passe à la ligne entre les mots, équilibré, jamais au milieu d'un mot */
button, .btn, .choice, .pair, .preset, .seg-btn, .tile, .nav-btn { text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; }
.btn { max-width: 100%; }
.btn > span:not(.key) { min-width: 0; }
.row-btns > .btn, .hero-btns > .btn { flex: 0 1 auto; }
.brand small { white-space: nowrap; }
.choices:not(.two):not(.pic-grid):not(.mp-grid) { grid-template-columns: 1fr; }
.pic-grid, .mp-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.modal-btns .btn { min-width: 200px; }
@media (max-width: 600px) { .choices.two { grid-template-columns: 1fr; } .pairs { gap: 12px; } }

/* ---------- Icônes et mascotte (direction artistique Toby) ---------- */
.ic { display: inline-block; vertical-align: middle; object-fit: contain; border-radius: 10px; flex: none; user-select: none; }
.ic-nav { width: 34px; height: 34px; }
.ic-stat { width: 26px; height: 26px; margin-right: 6px; border-radius: 6px; }
.ic-audio { width: 30px; height: 30px; border-radius: 6px; }
.audio-btn.big .ic-audio { width: 44px; height: 44px; }
.audio-btn.slow.big .ic-audio { width: 38px; height: 38px; }
.ic-unit { width: 52px; height: 52px; border-radius: 50%; }
.ic-inline { width: 1.5em; height: 1.5em; border-radius: 6px; margin-right: 4px; }
.ic-onband { background: #FBF6EC; }
.ic-lg { width: 52px; height: 52px; }
.ic-xl { width: 96px; height: 96px; border-radius: 22px; }
.nav-ic { width: 34px; display: inline-flex; justify-content: center; }
.unit-ic { background: #FBF6EC; overflow: hidden; }
.badge .ic-lg { margin: 0 auto 4px; }
.badge:not(.got) .ic-lg { filter: grayscale(.9) opacity(.6); }
.toby { display: inline-flex; }
.toby-img { display: block; object-fit: contain; border-radius: 24px; }
[data-motion="on"] .toby-img { animation: bob 3.2s ease-in-out infinite; }
.toby-say .toby-img { border-radius: 50%; }
[data-theme="sombre"] .ic, [data-theme="sombre"] .toby-img { box-shadow: 0 0 0 2px rgba(255,255,255,.06); }

.ic-node { width: 44px; height: 44px; border-radius: 50%; }
.ic-goal { width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; vertical-align: -5px; }
/* cartes de choix avec description : assez larges pour ne jamais tasser le texte */
.presets, .sound-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.preset { min-height: 0; }
/* paires sur téléphone : les mots anglais, puis les traductions en dessous (jamais deux colonnes tassées) */
@media (max-width: 600px) { .pairs { grid-template-columns: 1fr; } .pair-col + .pair-col { border-top: 3px dashed var(--line); padding-top: 14px; } }

/* ---------- Parcours : pièces de jeu générées (médaillons, gemme, coffres) ---------- */
.node, .node.done, .node.locked, .node.review { background: none; box-shadow: none; outline: none; width: 100px; height: 100px; padding: 0; border-radius: 50%; position: relative; display: grid; place-items: center; }
.node:active { transform: translateY(3px) scale(.97); box-shadow: none; }
.node:hover .node-art { filter: brightness(1.05) drop-shadow(0 6px 8px rgba(31,42,68,.18)); }
.node-art { width: 100px; height: 100px; border-radius: 0; filter: drop-shadow(0 5px 6px rgba(31,42,68,.16)); transition: filter .15s, transform .15s; }
.node.review .node-art { width: 108px; height: 108px; }
.node-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #1F2A44, 0 0 6px rgba(31,42,68,.5); pointer-events: none; }
.node.locked { cursor: default; }
.node.locked .node-art { filter: saturate(.75) opacity(.9); }
/* halo de la leçon en cours : un anneau parfaitement centré (sans contour décalé) */
.node.current { outline: none; }
.node.current::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--primary) 35%, transparent); pointer-events: none; }
[data-motion="on"] .node.current { animation: none; }
[data-motion="on"] .node.current::before { animation: ring 2.2s ease-in-out infinite; }
@keyframes ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .45; } }

/* ---------- Objectif du jour (coffre + anneau) ---------- */
.goal { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 99px; font-weight: 800; color: var(--ink); }
.goal:hover { background: var(--surface2); }
.goal-ring { position: relative; width: 64px; height: 64px; display: inline-block; }
.goal-ring svg { position: absolute; inset: 0; }
.goal-ring circle { transition: stroke-dashoffset .6s ease; }
.goal-chest { position: absolute; inset: 11px; width: 42px; height: 42px; border-radius: 0; }
.goal.done .goal-chest { animation: none; }
[data-motion="on"] .goal.done .goal-chest { animation: pop 1.6s ease-in-out infinite; }
@keyframes pop { 50% { transform: scale(1.08) rotate(-3deg); } }
.goal-txt { font-size: .95rem; }
.cloud-silent { display: none; }
.topbar { min-height: 84px; }

/* ---------- Grands écrans : on utilise la largeur, sans allonger les lignes de texte ---------- */
.page { max-width: 1120px; }
.g-table { max-width: 100%; }
@media (min-width: 1100px) {
  .g-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .g-sheet > h3, .g-sheet > .g-rule, .g-sheet > .g-tip, .g-sheet > .g-tip:only-of-type { grid-column: 1 / -1; }
  .g-sheet > .g-examples { margin-top: 0; }
  .g-sheet > .g-table { margin-top: 0; }
  .lex-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .lex-list > .lex-unit, .lex-list > p { grid-column: 1 / -1; }
  .hero, .path { max-width: 900px; margin-left: auto; margin-right: auto; }
  .level-tabs { max-width: 900px; margin-left: auto; margin-right: auto; }
}

/* ---------- Réglages ---------- */
.settings .set-card { padding: 8px 24px 16px; }
.set-head { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; margin: 10px 0 6px; cursor: default; }
details.set-card > summary.set-head { cursor: pointer; min-height: 56px; list-style: none; }
details.set-card > summary::-webkit-details-marker { display: none; }
details.set-card > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
details.set-card[open] > summary::after { content: '▴'; }
.ic-sec { width: 40px; height: 40px; border-radius: 0; }
.set-row { padding: 14px 0; }
.set-lbl b { font-size: 1.02rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 10px 0; background: none; border: none; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.switch-row:last-child { border-bottom: none; }
.switch { flex: none; width: 60px; height: 34px; border-radius: 99px; background: var(--surface2); border: 2px solid var(--line); position: relative; transition: background .2s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
.switch.on { background: var(--primary); border-color: var(--primary); }
.switch.on .knob { left: 29px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; }
.swatch.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.sw-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); }
.kbd-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; margin: 0; }
.settings .presets { margin-bottom: 8px; }

/* les pièces ont une marge transparente : on les agrandit pour qu'elles remplissent le bouton */
.node-art { width: 132px; height: 132px; margin: -16px; }
.node.review .node-art { width: 140px; height: 140px; margin: -20px; }
.node.current::before { inset: -6px; }

.page-title { display: flex; align-items: center; gap: 12px; }
.ic-title { width: 46px; height: 46px; border-radius: 0; }
/* agrandissement par zoom (ne déborde pas de la mise en page) au lieu de marges négatives */
.node-art { width: 100px; height: 100px; margin: 0; transform: scale(1.32); }
.node.review .node-art { width: 100px; height: 100px; margin: 0; transform: scale(1.4); }

/* ---------- Toby vivant ---------- */
.toby-live { position: relative; display: inline-block; flex: none; transform-origin: 50% 100%; }
.toby-live .tf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.toby-live .tf.on { opacity: 1; }
[data-motion="on"] .toby-live.breathe { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03); } }
[data-motion="on"] .toby-live.hop { animation: hop .9s cubic-bezier(.3, 1.6, .5, 1) 1; }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(0) scale(1.06, .92); } 55% { transform: translateY(-18px) scale(.96, 1.06); } 80% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }
[data-motion="on"] .toby-live.nod { animation: nod 1.2s ease-in-out 1; }
@keyframes nod { 25% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } 100% { transform: none; } }

/* logo */
.brand { gap: 12px; padding: 4px 4px 18px; }
.brand-txt { display: flex; flex-direction: column; gap: 2px; }
.wordmark { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wordmark .w1 { font-size: 1.55rem; font-weight: 800; color: var(--primary); letter-spacing: -.01em; }
.wordmark .w2 { font-size: .8rem; font-weight: 800; color: var(--soft); text-transform: uppercase; letter-spacing: .14em; }
.brand-txt small { color: var(--muted); font-size: .78rem; }

/* toutes les stats réunies, en haut à droite */
.topbar { justify-content: flex-end; }
.stats-cluster { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 2px solid var(--line); border-radius: 99px; padding: 4px 6px 4px 14px; box-shadow: var(--shadow); }
.stats-cluster .stat { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 99px; font-size: 1rem; }
.stats-cluster .stat + .stat { border-left: 2px solid var(--line); border-radius: 0; }
.stats-cluster .goal { margin-left: 4px; border-left: 2px solid var(--line); border-radius: 0 99px 99px 0; padding-left: 10px; }
.stats-cluster .goal-ring { width: 52px; height: 52px; }
.stats-cluster .goal-ring svg { width: 52px; height: 52px; }
.stats-cluster .goal-chest { inset: 9px; width: 34px; height: 34px; }

/* vignettes de Toby le long du chemin */
.unit-body { position: relative; }
.path-decor { position: absolute; top: 90px; width: 170px; height: 170px; pointer-events: none; }
.path-decor.right { right: 4%; }
.path-decor.left { left: 4%; }
.decor-img { width: 100%; height: 100%; border-radius: 0; filter: drop-shadow(0 6px 8px rgba(31,42,68,.12)); }
[data-motion="on"] .path-decor .decor-img { animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sway { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-4px); } }
.path-decor.sleeping .decor-img { opacity: .85; }
[data-motion="on"] .path-decor.sleeping .decor-img { animation: breathe 4.5s ease-in-out infinite; }
.zz { position: absolute; top: 4px; right: 34%; width: 40px; height: 60px; }
.zz i { position: absolute; bottom: 0; left: 50%; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--primary); background: var(--primary-soft); opacity: 0; }
[data-motion="on"] .zz i { animation: bubble 3.6s ease-in infinite; }
.zz i:nth-child(2) { animation-delay: 1.2s !important; width: 13px; height: 13px; }
.zz i:nth-child(3) { animation-delay: 2.4s !important; width: 8px; height: 8px; }
@keyframes bubble { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(14px, -56px); opacity: 0; } }
@media (max-width: 1100px) { .path-decor { width: 120px; height: 120px; } }
@media (max-width: 720px) { .path-decor { display: none; } }

/* Toby dit le mot dans une bulle */
.speaker { display: flex; align-items: flex-end; gap: 14px; margin: 6px 0 24px; }
.speech { position: relative; background: var(--surface); border: 3px solid var(--line); border-radius: 22px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 30px; box-shadow: var(--shadow); }
.speech::before { content: ''; position: absolute; left: -14px; bottom: 18px; border: 12px solid transparent; border-right-color: var(--line); border-left: 0; }
.speech::after { content: ''; position: absolute; left: -9px; bottom: 21px; border: 9px solid transparent; border-right-color: var(--surface); border-left: 0; }
.speech-row { display: flex; gap: 12px; }
.speech .word-big { font-size: 1.9rem; }

/* Toby réagit dans la correction */
.fb-wrap { max-width: 780px; margin: 0 auto; display: flex; align-items: flex-end; gap: 14px; }
.fb-wrap .fb { flex: 1; margin: 0; }
.fb-toby { display: none; }
.l-foot.good .fb-toby, .l-foot.soft .fb-toby { display: inline-block; margin-bottom: 6px; }
.fb-level { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.link-btn.small { font-size: .82rem; min-height: 40px; color: var(--muted); text-decoration: none; border: 2px solid var(--line); border-radius: 99px; padding: 0 12px; background: var(--surface); }
.link-btn.small:disabled { opacity: .45; cursor: default; }
/* logo empilé : ne déborde jamais de la colonne */
.brand { min-width: 0; }
.brand-txt { min-width: 0; }
.wordmark { flex-direction: column; align-items: flex-start; gap: 2px; }
.wordmark .w1 { font-size: 1.6rem; }
.wordmark .w2 { font-size: .72rem; letter-spacing: .22em; }
.brand-txt small { white-space: normal; line-height: 1.3; }
.side { overflow-x: hidden; }

/* ---------- Accueil sur deux colonnes ---------- */
.page-wide { max-width: 1240px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.home-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 0; }
.home-aside .card { margin: 0 0 18px; }
@media (max-width: 1150px) { .home-grid { grid-template-columns: 1fr; } .home-aside { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 16px; } }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.ic-head { width: 34px; height: 34px; border-radius: 0; }
.pill-soft { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2); border-radius: 99px; padding: 2px 10px; font-size: .82rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.small { font-size: .82rem; }
.side-card { padding: 16px 18px; }
.side-row { display: flex; align-items: center; gap: 12px; }
.side-row p { margin: 0; }
.ic-btn { width: 28px; height: 28px; border-radius: 0; }

/* quêtes */
.quest { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.quest:first-of-type { border-top: none; }
.ic-quest { width: 40px; height: 40px; border-radius: 0; }
.quest-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.quest-txt b { font-size: .95rem; line-height: 1.3; }
.qbar { position: relative; height: 22px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.qfill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s; }
.qfill.uc { background: var(--uc); }
.qbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: var(--ink); }
.ic-chest { width: 44px; height: 44px; border-radius: 0; }
.ic-chest.closed { filter: saturate(.7); }
.quest.done .qfill { background: var(--primary); }
.quest.done b { color: var(--muted); }
.finish .quests { text-align: left; }

/* semaine */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 110px; margin: 4px 0 8px; }
.wk { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.wk-bar { flex: 1; width: 100%; max-width: 30px; background: var(--surface2); border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; }
.wk-fill { width: 100%; background: color-mix(in srgb, var(--primary) 55%, var(--surface)); border-radius: 8px; }
.wk.goal .wk-fill { background: var(--primary); }
.wk span { font-size: .78rem; font-weight: 800; color: var(--muted); }
.wk.today span { color: var(--primary); }

/* ---------- Réviser : centre d'entraînement ---------- */
.hub-hero { display: flex; align-items: center; gap: 22px; padding: 22px 26px; }
.hub-hero-txt h2 { margin: 2px 0 6px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--soft); font-size: .78rem; }
.section-title { font-size: 1.2rem; margin: 30px 0 12px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.hub-tile { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; min-height: 92px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; box-shadow: 0 4px 0 var(--line); }
.hub-tile:hover:not(:disabled) { border-color: var(--primary); }
.hub-tile:disabled { opacity: .5; cursor: default; }
.ic-tile { width: 52px; height: 52px; border-radius: 0; }
.hub-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hub-txt small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.sound-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.sound-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; text-align: left; }
.sound-cell:hover { border-color: var(--primary); }
.sound-cell small { color: var(--muted); }
.sound-cell .qbar { width: 100%; margin-top: 6px; }

/* ---------- Lexique ---------- */
.lex-tools-card { padding: 14px 16px; }
.lex-tools-card .lex-tools { margin: 0 0 10px; }
.lex-tools-card .search { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.lex-unit { display: flex; align-items: center; gap: 8px; }
.lex-unit .pill-soft { margin-left: 4px; }
.meter { display: inline-flex; gap: 3px; flex: none; }
.meter i { width: 8px; height: 22px; border-radius: 4px; background: var(--surface2); }
.meter.m1 i:nth-child(-n+1), .meter.m2 i:nth-child(-n+2), .meter.m3 i:nth-child(-n+3), .meter.m4 i:nth-child(-n+4) { background: var(--primary); }
.lex-row .audio-btn { width: 46px; height: 46px; }

/* ---------- Grammaire ---------- */
.g-unit { border-left: 6px solid var(--uc); }
.g-unit.locked { opacity: .75; }
.g-unit summary { gap: 10px; }
.g-unit-title { flex: 1; }
.g-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; grid-column: 1 / -1; }
.g-sheet-head h3 { margin: 0; }
.g-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Progrès ---------- */
.prog-hero { display: flex; align-items: center; gap: 24px; padding: 22px 26px; }
.prog-hero-txt { flex: 1; }
.prog-hero-txt h2 { margin: 0; font-size: 1.8rem; }
.lvl-ring { position: relative; width: 128px; height: 128px; flex: none; }
.lvl-ring svg { position: absolute; inset: 0; }
.lvl-num { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.lvl-num small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.lvl-num b { font-size: 2.4rem; line-height: 1; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 14px; }
.stat-tile { display: flex; align-items: center; gap: 14px; margin: 10px 0; padding: 14px 16px; }
.stat-tile b { display: block; font-size: 1.5rem; line-height: 1.1; }
.stat-tile span { color: var(--muted); font-size: .88rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 16px; }
.two-col .card { margin: 10px 0; }
.units-prog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px 16px; }
.unit-prog { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-left: 6px solid var(--uc); border-radius: var(--radius); padding: 10px 14px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 14px; }
.ach { display: flex; align-items: center; gap: 14px; margin: 8px 0; padding: 14px 16px; }
.ach:not(.got) .ic-ach { filter: grayscale(.9) opacity(.6); }
.ach-ic { position: relative; flex: none; }
.ic-ach { width: 58px; height: 58px; border-radius: 0; }
.ach-lvl { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #2b1d05; font-size: .66rem; font-weight: 900; border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.ach:not(.got) .ach-lvl { background: var(--surface2); color: var(--muted); }
.pv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* vignettes toujours à gauche (les titres de leçons partent à droite), hauteur variable */
.path-decor.right, .path-decor.left { left: 0; right: auto; }
.path-decor.right { top: 230px; }
.path-decor.left { top: 60px; }
.home-main .nodes { padding-left: 120px; }
@media (max-width: 1100px) { .home-main .nodes { padding-left: 90px; } }
@media (max-width: 720px) { .home-main .nodes { padding-left: 0; } }
@media (max-width: 640px) {
  .hub-hero, .prog-hero { flex-direction: column; align-items: flex-start; }
  .hub-hero .row-btns .btn, .side-card .row-btns .btn { width: 100%; }
}

/* ---------- Icônes : tailles par usage (2e série) ---------- */
.ic-ex { width: 40px; height: 40px; border-radius: 0; margin-right: 10px; vertical-align: -9px; }
.ic-fb { width: 30px; height: 30px; border-radius: 0; margin-right: 8px; vertical-align: -7px; }
.ic-mem { width: 56px; height: 56px; border-radius: 0; display: block; margin: 0 auto 4px; }
.ic-preset { width: 46px; height: 46px; border-radius: 0; flex: none; }
.ic-toast { width: 28px; height: 28px; border-radius: 0; }
.preset { flex-direction: row; align-items: center; gap: 12px; }
.preset-txt { display: flex; flex-direction: column; gap: 4px; }
.h-ic { display: flex; align-items: center; gap: 8px; }
.crown-tag { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; }
.section-title { display: flex; align-items: center; gap: 10px; }
.g-rule, .g-tip { display: flex; align-items: flex-start; gap: 8px; }
.g-rule .ic-inline, .g-tip .ic-inline { margin-top: 2px; }
.fb-note { display: flex; align-items: center; gap: 6px; }
.btn .ic-btn, .link-btn .ic-btn, .hub-tile .ic-btn { flex: none; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; }
.onb-list li { display: flex; align-items: center; gap: 10px; }

/* ---------- Tableau des sons : une illustration par son, cartes de même hauteur ---------- */
.sound-chart { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); grid-auto-rows: 1fr; }
.sound-cell { align-items: center; text-align: center; gap: 6px; padding: 16px 14px; box-shadow: 0 4px 0 var(--line); }
.snd-ill { width: 96px; height: 96px; border-radius: 0; }
.sound-cell b { font-size: 1.02rem; line-height: 1.3; }
.sound-cell .qbar { margin-top: auto; }

/* ---------- Exercice de sons : carte + bouton écouter dans la même colonne ---------- */
.mp-top { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 6px 0 22px; flex-wrap: wrap; }
.mp-ill { width: 84px; height: 84px; border-radius: 0; flex: none; }
.mp-top-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.mp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mp-col { display: flex; flex-direction: column; gap: 10px; }
.mp-col .choice { width: 100%; min-height: 150px; }
.mp-listen { width: 100%; }
.mp-word { font-size: 2rem; }
@media (max-width: 560px) { .mp-cols { grid-template-columns: 1fr; } }

.ic-cal { width: 70%; height: 70%; border-radius: 0; }
.chat-end { justify-content: center; }
/* cartes mémoire : les 3 boutons d'évaluation, compacts, sur une seule ligne */
.fc-rate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fc-rate .btn { min-height: 52px; padding: 6px 8px; gap: 6px; font-size: .88rem; justify-content: center; white-space: normal; text-wrap: balance; line-height: 1.15; }
.fc-rate .btn .key { display: none; }
.fc-rate .btn .ic-btn { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .fc-rate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-rate .btn { flex-direction: column; white-space: normal; text-wrap: balance; font-size: .8rem; min-height: 72px; }
  .fc-rate .btn .key { display: none; }
}
/* la barre de stats ne dépasse jamais de l'écran */
.topbar { min-width: 0; }
.stats-cluster { max-width: 100%; min-width: 0; flex-wrap: nowrap; }
.stats-cluster .goal { padding-right: 12px; }
.goal-txt.done { color: var(--primary); font-size: 1.1rem; }
@media (max-width: 520px) { .stats-cluster .stat { padding: 6px 6px; } .stats-cluster { padding-left: 8px; } }

/* ---------- Téléphone : barre d'onglets en bas (comme une appli), encoches iPhone ---------- */
.nav-short { display: none; }
.seg-sub { display: block; font-size: .72rem; font-weight: 600; opacity: .75; }
.time-input { width: 140px; text-align: center; }
.l-head { padding-top: calc(16px + env(safe-area-inset-top)); }
.l-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) {
  .shell { display: block; }
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: nowrap; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right: none; border-top: 2px solid var(--line); border-bottom: none; box-shadow: 0 -4px 14px rgba(0,0,0,.05);
  }
  .side .brand { display: none; }
  .side .nav-btn {
    position: relative; flex: 1 1 0; min-width: 0; width: auto; min-height: 58px; padding: 4px 2px; gap: 2px;
    flex-direction: column; justify-content: center; text-align: center; font-size: .68rem; line-height: 1.1; border-radius: 12px;
  }
  .side .nav-btn .nav-long { display: none; }
  .side .nav-btn .nav-short { display: block; white-space: nowrap; }
  .side .nav-btn { border-width: 0; font-size: .7rem; }
  .side .nav-btn .nav-ic { width: auto; font-size: 1.1rem; }
  .side .nav-btn .ic-nav { width: 30px; height: 30px; }
  .side .nav-btn.active { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
  .side .nav-btn .pill { position: absolute; top: 2px; right: 50%; margin: 0 -26px 0 0; font-size: .7rem; padding: 0 .45em; }
  .main { padding: 0 14px calc(96px + env(safe-area-inset-bottom)); }
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 0 8px; margin: 0 -14px 16px; padding-left: 14px; padding-right: 14px; justify-content: center; }
  .topbar .stats-cluster { margin: 0 auto; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* dans l'appli iPhone : pas de survol, pas de surlignage gris au toucher, pas de sélection accidentelle */
.native { -webkit-tap-highlight-color: transparent; }
.native body { -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
.native input, .native textarea { -webkit-user-select: text; user-select: text; }
.native .kbd-help, .native .kbd-list, .native .key { display: none !important; }
@media (max-width: 760px) {
  .side .nav-btn { padding: 4px 0; font-size: .66rem; }
  .mem { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mem-col { min-width: 0; }
  .g-table { display: block; overflow-x: auto; }
  .g-table th, .g-table td { padding: 8px 10px; }
}
@media (max-width: 420px) { .presets { grid-template-columns: 1fr !important; } }

/* ---------- Leçon plein écran : en-tête, exercice, bouton — jamais besoin de défiler ---------- */
.lesson { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.l-head { flex: none; }
.l-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding-bottom: calc(var(--foot-h, 120px) + 12px); }
.lesson.no-foot .l-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.l-body > .ex { flex: none; }
.l-body > .ex-dialogue { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ex-dialogue > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ex-dialogue .chat { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 70px 4px 2px; }
.g-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.g-dots { display: flex; gap: 8px; margin-left: auto; }
.g-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.g-dot.on { background: var(--primary); width: 26px; border-radius: 99px; }

@media (max-width: 760px) {
  .lesson-mode .key { display: none !important; }
  .l-head { padding: calc(6px + env(safe-area-inset-top)) 14px 6px; gap: 12px; }
  .l-head .icon-btn { width: 44px; height: 44px; }
  .l-progress { height: 14px; }
  .l-body { padding: 4px 16px calc(var(--foot-h, 90px) + 8px); }
  .l-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .l-foot .btn.big { min-height: 54px; width: 100%; }
  .foot-row .btn { min-width: 0; }
  .fb:not(:empty) { margin-bottom: 8px; }
  .fb-title { font-size: 1.05rem; } .fb-sol { font-size: 1rem; }

  .ex-head { margin: 2px 0 10px; }
  .ex-title { font-size: 1.15rem; }
  .ex-title .ic-ex { width: 28px; height: 28px; }
  .ex-sub { display: none; }
  .ex-flash .ex-sub, .ex-minimal .ex-sub { display: none; }

  /* Toby qui parle : plus petit, la bulle sur une ligne */
  .speaker { margin: 0 0 12px; gap: 8px; align-items: center; }
  .speaker .toby-live { width: 62px !important; height: 62px !important; }
  .speech { padding: 8px 12px; margin-bottom: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-width: 2px; }
  .speech::before { bottom: 50%; margin-bottom: -12px; } .speech::after { bottom: 50%; margin-bottom: -9px; }
  .speech .word-big { font-size: 1.45rem; line-height: 1.2; }
  .audio-btn.big { width: 58px; height: 58px; font-size: 1.5rem; }
  .audio-btn.slow.big { width: 50px; height: 50px; font-size: 1.2rem; }
  .word-big { font-size: 1.5rem; }

  /* choix */
  .choices { gap: 8px; }
  .choice { min-height: 52px; padding: 8px 14px; gap: 10px; font-size: 1rem; box-shadow: 0 3px 0 var(--line); }
  .choice.right::after, .choice.wrong::after { right: 12px; }
  .pic-grid, .mp-grid { grid-template-columns: 1fr 1fr !important; }
  .choice.pic { min-height: 0; padding: 8px; }
  .pic-wrap.opt .word-img { width: min(100px, 24vw); height: min(100px, 24vw); }
  .pic { font-size: 3rem; }

  /* nouveau mot */
  .learn-card { padding: 14px; border-radius: 20px; }
  .pic-wrap.big .word-img { width: 150px; height: 150px; }
  .big-emoji { font-size: 4.5rem; }
  .learn-en { font-size: 2rem; margin: 4px 0 10px; }
  .learn-fr { margin-top: 10px; padding-top: 10px; }
  .pron { font-size: .9rem; }

  /* consignes en français */
  .prompt-fr { margin: 2px 0 12px; padding: 10px 14px; gap: 12px; font-size: 1.25rem; }
  .pic-wrap.mid .word-img { width: 56px; height: 56px; }
  .mid-emoji { font-size: 2rem; }

  /* paires : deux colonnes côte à côte */
  .pairs { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .pair-col { gap: 8px; }
  .pair-col + .pair-col { border-top: none !important; padding-top: 0 !important; }
  .pair { min-height: 54px; padding: 6px 10px; font-size: 1rem; gap: 6px; box-shadow: 0 3px 0 var(--line); }

  /* phrases */
  .gap-sentence { font-size: 1.35rem; line-height: 1.6; margin: 2px 0 4px; }
  .gap-fr { margin-bottom: 12px; font-size: .95rem; }
  .type-input { min-height: 56px; }
  .hint-box { margin-top: 6px; font-size: 1.2rem; }
  .lesson-mode .row-btns { margin: 10px 0; gap: 8px; }
  .lesson-mode .btn.small { min-height: 44px; font-size: .88rem; padding: 4px 12px; }
  .answer-line { min-height: 64px; padding: 8px 2px; gap: 8px; margin-bottom: 12px; }
  .bank { gap: 8px; }
  .tile { min-height: 48px; min-width: 48px; padding: 4px 12px; font-size: 1.05rem; box-shadow: 0 3px 0 var(--line); }
  .ex-build .prompt-fr, .ex-listenBuild .speaker { margin-bottom: 8px; }

  /* oral */
  .speak-card { padding: 14px; gap: 8px; }
  .l-body .row-btns.center .btn { flex: 1 1 40%; min-height: 50px; }

  /* sons */
  .mp-top { padding: 8px 12px; margin: 0 0 12px; gap: 10px; flex-wrap: nowrap; }
  .mp-ill { width: 52px; height: 52px; }
  .mp-top-txt { min-width: 0; } .mp-top-txt small { display: none; }
  .mp-top .audio-row { gap: 8px; }
  .mp-cols { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .mp-col { gap: 8px; }
  .mp-col .choice { min-height: 104px; }
  .mp-word { font-size: 1.6rem; }
  .mp-listen { min-height: 46px; font-size: .85rem; padding: 4px 8px; }

  /* fiches de grammaire et astuces (découpées en pages si besoin) */
  .grammar-card { padding: 14px 16px; border-radius: 20px; }
  .grammar-card h2 { font-size: 1.2rem; margin: 6px 0; }
  .g-intro { margin: 4px 0; font-size: .95rem; }
  .g-examples { gap: 6px; margin: 6px 0; }
  .g-ex { font-size: 1.1rem; gap: 10px; }
  .g-ex .audio-btn { width: 46px; height: 46px; }
  .g-rule, .g-tip { padding: 10px 12px; margin: 8px 0; font-size: .95rem; }

  /* cartes mémoire */
  .fc-face { padding: 14px; gap: 8px; }
  .fc-word { font-size: 1.8rem; } .fc-answer { font-size: 1.7rem; }
  .fc-card .pic-wrap.big .word-img { width: 120px; height: 120px; }
  .fc-flip { width: 100%; margin-top: 12px; }

  /* conversation */
  .ex-dialogue .chat { padding-right: 0; }
  .bubble { max-width: 88%; padding: 8px 12px; }
  .bubble .b-tools { position: static; transform: none; margin-top: 4px; }
  .chat-choices .choice { min-height: 48px; }
}
@media (max-width: 760px) {
  .lesson-mode .g-table { display: table; font-size: .9rem; line-height: 1.3; margin: 8px 0; }
  .lesson-mode .g-table th, .lesson-mode .g-table td { padding: 6px 8px; }
}
@media (max-width: 760px) {
  /* images de choix : plus grandes quand l'écran le permet */
  .pic-wrap.opt .word-img { width: min(124px, 28vw, 14vh); height: min(124px, 28vw, 14vh); }
  .speaker .toby-live { width: 72px !important; height: 72px !important; }
}

/* ---------- Fin de séance : deux écrans fixes, boutons en bas ---------- */
.finish { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 0; max-width: 720px; }
.fin-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(16px + env(safe-area-inset-top)) 20px 8px; }
.fin-body > * { flex: none; }
.fin-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
.fin-foot .btn { width: 100%; }
.fin-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fin-chip { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; }
.fin-chip span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fin-chip small { color: var(--muted); font-size: .8rem; }
.fin-words h3 { margin: 0 0 8px; }
@media (max-width: 760px) {
  .finish h1 { font-size: 1.5rem; margin: 6px 0 4px; }
  .finish-sub { font-size: .95rem; margin-bottom: 12px; }
  .finish-stats { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; margin: 10px 0; }
  .fs { padding: 8px 2px; } .fs b { font-size: 1.15rem; } .fs span { font-size: .72rem; }
  .finish .card { padding: 12px 14px; margin: 8px 0; }
  .fin-chips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* retour après une réponse : panneau court, la question reste visible */
  .fb-wrap { gap: 10px; align-items: center; }
  .l-foot .fb-toby { width: 56px !important; height: 56px !important; margin-bottom: 0 !important; }
  .fb-title { display: flex; align-items: center; gap: 6px; line-height: 1.25; }
  .fb-sol { margin: 2px 0; }
  .fb-sub, .fb-note { font-size: .88rem; margin: 2px 0; }
  .fb-note.muted { display: none; }
  .fb-level { flex-wrap: nowrap; margin-top: 6px; }
  .fb-level .link-btn.small { min-height: 36px; font-size: .78rem; padding: 0 10px; }
  .fb-level .ic-btn { width: 18px; height: 18px; }
}

/* ---------- Menus sur téléphone : pages courtes, onglets ---------- */
.ptabs { display: flex; gap: 4px; padding: 4px; margin: 4px 0 12px; background: var(--surface2); border-radius: 14px; }
.ptab { flex: 1 1 0; min-width: 0; min-height: 44px; border: none; border-radius: 10px; background: none; font-weight: 700; font-size: .9rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ptab.on { background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ptab-body > .section-title:first-child { display: none; }
.legend-box summary { cursor: pointer; font-weight: 700; color: var(--primary); min-height: 44px; display: flex; align-items: center; }
.g-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 6px 0; }
.g-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; background: none; border: none; text-align: left; font-weight: 700; font-size: .98rem; cursor: pointer; color: var(--ink); }
.g-open span:nth-child(2) { flex: 1; min-width: 0; }
.g-chev { font-size: 1.4rem; color: var(--muted); }
.g-train { min-width: 48px; min-height: 48px !important; padding: 0 !important; justify-content: center; }
@media (max-width: 760px) {
  .page-title { font-size: 1.35rem; margin: 2px 0 10px; }
  .page-title .ic-title { width: 30px; height: 30px; }
  .section-title { font-size: 1.05rem; margin: 14px 0 8px; }
  .set-intro { display: none; }
  .settings .set-card { margin: 8px 0; padding: 4px 14px; }
  .settings .set-card[open] { padding-bottom: 14px; }
  .settings .set-head { min-height: 52px; margin: 0; }
  .backup-card { margin-top: 12px; }

  /* Accueil : le parcours seulement, niveaux en une ligne */
  .level-tabs { margin: 0 0 8px; gap: 6px; flex-wrap: nowrap; }
  .level-tab { min-width: 0; flex: 1 1 0; min-height: 48px; padding: 4px; }
  .level-tab b { font-size: 1rem; } .level-tab small { font-size: .68rem; }

  /* Réviser */
  .hub-hero { padding: 14px; gap: 12px; }
  .hub-hero .toby, .hub-hero .toby-live { display: none; }
  .hub-hero-txt h2 { font-size: 1.15rem; }
  .hub-hero-txt .muted { display: none; }
  .hub-hero .row-btns { margin: 10px 0 0; gap: 8px; }
  .hub-hero .row-btns .btn { width: 100%; min-height: 52px; }
  .hub-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hub-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; min-height: 0; position: relative; }
  .hub-tile .hub-txt small { display: none; }
  .hub-tile .hub-txt b { font-size: .92rem; line-height: 1.25; }
  .hub-tile .pill-soft { position: absolute; top: 8px; right: 8px; }
  .ptab-body > .muted:first-of-type { display: none; }
  .sound-chart { grid-template-columns: 1fr 1fr !important; gap: 8px; grid-auto-rows: auto; }
  .sound-cell { padding: 8px 10px; gap: 2px; }
  .snd-ill { width: 52px; height: 52px; }
  .sound-cell b { font-size: .88rem; }
  .sound-cell small { font-size: .78rem; }
  .sound-cell .qbar { margin-top: 4px; }

  /* Progrès */
  .prog-hero { padding: 14px; gap: 14px; }
  .prog-hero .toby, .prog-hero .toby-live { display: none; }
  .lvl-ring { width: 96px; height: 96px; }
  .lvl-ring svg { width: 96px; height: 96px; }
  .prog-hero-txt h2 { font-size: 1.4rem; }
  .prog-hero-txt p { margin: 4px 0; font-size: .88rem; }
  .tiles { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .stat-tile { margin: 0; padding: 10px; gap: 8px; }
  .stat-tile b { font-size: 1.2rem; } .stat-tile span { font-size: .76rem; }
  .stat-tile .ic-tile { width: 32px; height: 32px; }
  .two-col { display: block; }
  .cal { gap: 5px; margin: 6px 0; }
  .quests .muted.small, .side-card > .muted.small { display: none; }
  .ach { margin: 6px 0; padding: 10px 12px; }
  .units-prog { gap: 6px; }

  /* Mots */
  .lex-tools-card { padding: 10px 12px; margin: 6px 0 10px; }
  .lex-tools { gap: 8px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 40px; padding: 0 12px; font-size: .88rem; }
  .lex-tools-card > .muted { display: none; }
  .lex-row { padding: 6px 10px; gap: 8px; margin: 6px 0; }
  .lex-row .audio-btn { width: 42px; height: 42px; }
  .lex-row .audio-btn.slow { display: none; }
  .lex-txt small { display: none; }
  .lex-unit { margin: 6px 0; font-size: 1rem; }
}
@media (max-width: 760px) {
  .ptab-body .section-title { display: none; }
  .backup-card { display: none; }
  /* Réviser : exercices en liste compacte */
  .hub-grid { grid-template-columns: 1fr !important; gap: 8px; margin-top: 10px; }
  .hub-tile { flex-direction: row; align-items: center; min-height: 58px; padding: 8px 12px; }
  .hub-tile .ic-tile { width: 36px; height: 36px; }
  .hub-tile .pill-soft { position: static; margin-left: auto; }
  /* Progrès : tuiles en 3 colonnes, listes en 2 colonnes */
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
  .stat-tile { flex-direction: column; text-align: center; gap: 2px; padding: 8px 4px; }
  .stat-tile span { display: block; font-size: .7rem; line-height: 1.2; }
  .units-prog { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .unit-prog { padding: 8px; gap: 6px; }
  .unit-prog .ic-tile { width: 30px; height: 30px; }
  .unit-prog b { font-size: .8rem; line-height: 1.2; display: block; }
  .ach-grid { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .ach { margin: 0; padding: 8px; gap: 6px; flex-direction: column; text-align: center; }
  .ach .muted { display: none; }
  .ach b { font-size: .82rem; }
  .ach .quest-txt { width: 100%; }
  .ach .ic-ach { width: 40px; height: 40px; }
  /* Mots : grille de 2 colonnes */
  .lex-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .lex-list > .lex-unit, .lex-list > p { grid-column: 1 / -1; }
  .lex-row { position: relative; margin: 0; padding: 8px; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; }
  .lex-row .meter { position: absolute; left: 8px; bottom: 8px; display: none; }
  .lex-row .audio-btn:not(.slow) { position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; }
  .lex-txt { padding-right: 0; line-height: 1.25; min-width: 0; }
  .lex-txt b { font-size: .98rem; }
  .lex-txt span { font-size: .85rem; }
  /* Leçons : unités repliées */
  .unit.collapsed { margin-bottom: 8px; }
  .unit.collapsed .unit-head p { display: none; }
  .unit.collapsed .unit-head { padding-top: 10px; padding-bottom: 10px; }
  .unit-head.tappable { cursor: pointer; }
  /* Grammaire : unités compactes */
  .g-unit { padding: 4px 14px; margin: 6px 0; }
  .g-unit > summary { min-height: 52px; }
  .g-open { font-size: .92rem; line-height: 1.25; }
}
@media (max-width: 760px) {
  .sound-chart { grid-template-columns: 1fr !important; gap: 6px; }
  .sound-cell { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 6px 10px; box-shadow: 0 3px 0 var(--line); }
  .sound-cell .snd-ill { grid-row: 1 / 3; width: 44px; height: 44px; }
  .sound-cell b { grid-column: 2; font-size: .92rem; }
  .sound-cell small { grid-column: 2; }
  .sound-cell .qbar { grid-column: 3; grid-row: 1 / 3; width: 96px; margin: 0; }
  .mem { gap: 6px; }
  .mem-col { padding: 8px 4px; }
  .mem-col .ic-mem { width: 36px; height: 36px; }
  .mem-col b { font-size: 1.15rem; }
  .ptab-body .card .muted { font-size: .85rem; }
}
@media (max-width: 760px) {
  /* les onglets suffisent à se repérer (et l'onglet du bas est surligné) : pas de grand titre en plus */
  .page:has(.ptabs) > .page-title { display: none; }
  .sound-cell b { text-wrap: wrap; line-height: 1.2; }
  .sound-cell .qbar { width: auto; min-width: 84px; }
  .g-open .ic-inline { display: none; }
}
@media (max-width: 760px) {
  .main { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 10px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .ptabs { margin: 0 0 10px; }
  .hub-hero .eyebrow { display: none; }
  .hub-hero .row-btns .btn { min-height: 50px; font-size: .95rem; white-space: nowrap; }
  .hub-hero .row-btns { flex-wrap: nowrap; }
  .hub-hero .row-btns .btn { width: auto; flex: 1 1 0; padding: 4px 10px; }
  .sound-cell { padding: 5px 10px; }
  .mem-col { padding: 6px 4px; }
}
@media (max-width: 760px) {
  .hub-hero .row-btns { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .hub-hero .row-btns .btn { width: 100%; flex: none; min-height: 48px; }
}

/* jamais de zoom : ni double toucher, ni zoom automatique sur les champs (16 px minimum) */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
button, a, input, select, label, .choice, .tile, .pair { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1em); }

/* ---------- Fin de séance : récapitulatif propre ---------- */
.fin-body > .toby-live, .fin-body > .toby { margin: 0 auto 4px; }
.finish h1 { margin: 8px 0 4px; }
.finish-sub { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; color: var(--muted); }
.fin-sum { margin: 14px auto 8px; width: 100%; max-width: 440px; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.fin-xp { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-bottom: 2px solid var(--line); }
.fin-xp b { font-size: 2.2rem; line-height: 1; color: var(--ink); }
.fin-xp span { font-weight: 800; font-size: 1.1rem; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); align-self: flex-end; padding-bottom: 3px; }
.fin-xp-ic { width: 40px; height: 40px; }
.fin-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.fin-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 14px; }
.fin-cell + .fin-cell { border-left: 2px solid var(--line); }
.fin-ic { width: 30px; height: 30px; margin-bottom: 2px; }
.fin-cell b { font-size: 1.35rem; line-height: 1.1; }
.fin-cell span { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* ---------- Image + voix -> sens (façon code de la route) ---------- */
.cr-scene { display: flex; align-items: center; justify-content: center; gap: 18px; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 14px; margin: 0 0 14px; box-shadow: var(--shadow); }
.cr-pic { flex: none; display: flex; }
.pic-wrap.scene .word-img { width: min(200px, 44vw, 26vh); height: min(200px, 44vw, 26vh); border-radius: 18px; }
.cr-pic .pic-wrap.scene, .cr-pic > span { font-size: min(7rem, 22vw); line-height: 1; }
.cr-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cr-word { font-size: 1.5rem; }
.cr-grid { grid-template-columns: 1fr 1fr !important; }
.choice.cr { min-height: 64px; padding: 8px 12px; }
.cr-opt { display: flex; align-items: center; gap: 10px; width: 100%; }
.cr-letter { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.choice.cr.selected .cr-letter { background: var(--focus); color: #fff; }
.choice.cr .key { display: none; }

/* ---------- Correct ou pas ? / mémo de grammaire ---------- */
.rc-card { background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 14px 16px; margin: 0 0 14px; text-align: center; box-shadow: var(--shadow); }
.rc-card .gap-sentence { margin: 4px 0; }
.rc-card .gap-fr { margin-bottom: 8px; }
.rc-grid { grid-template-columns: 1fr 1fr !important; }
.choice.rc { justify-content: center; min-height: 64px; }
.rc-opt { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.rule-key { background: var(--primary-soft); border-radius: 16px; padding: 10px 14px; margin: 10px 0; }
.rule-key small { color: var(--muted); font-weight: 700; }
.rule-key-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.rule-key-en { font-size: 1.35rem; font-weight: 700; }
.rule-how { font-size: .9rem; margin: 8px 0 0; }

/* ---------- Pourquoi ? (explications) ---------- */
.why-btn { color: var(--primary) !important; border-color: color-mix(in srgb, var(--primary) 45%, var(--line)) !important; font-weight: 800; }
.xp { text-align: left; display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.xp p { margin: 0; }
.xp-word { display: flex; align-items: center; gap: 12px; }
.xp-big { font-size: 1.4rem; font-weight: 800; }
.xp-diff { background: var(--soft-bg); border-radius: 12px; padding: 8px 10px; }
.xp-sent { display: flex; align-items: center; gap: 10px; }
.xp-en { font-weight: 700; font-size: 1.1rem; }
.xp-ex { display: grid; gap: 4px; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.xp-chip { background: var(--surface2); border-radius: 99px; padding: 4px 10px; font-size: .9rem; }
.xp-rule { background: var(--primary-soft); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; }
.xp-spell { letter-spacing: .1em; }
.xp-pair { display: grid; gap: 8px; }

/* ---------- Quêtes : on touche pour commencer ---------- */
button.quest { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 12px; }
button.quest:not(.done):hover { background: var(--surface2); }

@media (max-width: 760px) {
  /* conversation : bulles compactes, le bouton son à droite du texte */
  .bubble { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
  .bubble .who, .bubble .b-en, .bubble .b-fr { grid-column: 1; }
  .bubble .b-tools { grid-column: 2; grid-row: 1 / span 3; position: static; transform: none; margin: 0; }
  .bubble .b-tools .audio-btn { width: 40px; height: 40px; font-size: 1rem; }
  .b-en { font-size: 1.05rem; }
  .chat { gap: 8px; }
  .chat-q { margin: 8px 0 6px; }
  .mp-top-txt b { font-size: .95rem; line-height: 1.2; }
  .cr-scene { padding: 10px; gap: 12px; }
  .cr-opt { font-size: .95rem; }
  .choice.cr { min-height: 58px; }
  .rule-key-en { font-size: 1.15rem; }
  .fin-xp b { font-size: 1.9rem; }
}
button.quest:first-of-type { border-top: none; }
.cr-side .link-btn { white-space: nowrap; }
.xp { max-height: 68vh; }
@media (max-width: 760px) {
  .l-foot .fb-toby { display: none !important; }
  .fb-level { gap: 6px; flex-wrap: wrap; }
  .fb-level .link-btn.small { white-space: nowrap; padding: 0 9px; gap: 4px; }
}
@media (max-width: 760px) { .hub-tile { min-height: 50px; padding: 6px 12px; } .hub-grid { gap: 6px; } }
.fb-title { text-wrap: pretty; }

/* ---------- Notifications : petite bannière en haut, discrète ---------- */
.toasts { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast {
  position: static; transform: none; pointer-events: auto; cursor: pointer; font: inherit; text-align: left;
  display: flex; align-items: center; gap: 10px; width: auto; max-width: min(440px, 100%);
  padding: 8px 14px 8px 10px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); animation: toast-in .35s cubic-bezier(.2,.9,.3,1.2);
  transition: opacity .3s, transform .3s;
}
.toast.out { opacity: 0; transform: translateY(-12px); }
.toast-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; }
.ic-toast { width: 24px; height: 24px; }
.toast-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.toast-txt b { font-size: .92rem; }
.toast-txt small { font-size: .8rem; color: var(--muted); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .toast { bottom: auto !important; } }

@media (max-width: 760px) {
  /* ---------- En-têtes d'unité fins et raffinés ---------- */
  .unit { margin: 14px 0 18px; }
  .unit-head { padding: 10px 12px !important; gap: 12px; border-radius: 18px; min-height: 0; }
  .unit-ic { width: 42px; height: 42px; }
  .ic-unit { width: 34px; height: 34px; }
  .unit-txt small { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
  .unit-head h2 { font-size: 1.05rem; line-height: 1.2; }
  .unit-head p { font-size: .8rem; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .unit-head p .ic-goal { width: 14px; height: 14px; vertical-align: -2px; }
  .unit-count { font-size: .8rem; padding: 3px 9px; }
  .level-tab { min-height: 42px; }
  .level-tab b { font-size: .92rem; } .level-tab small { font-size: .62rem; }

  /* ---------- Cercle du niveau (Progrès › Bilan) ---------- */
  .lvl-num small { font-size: .55rem; letter-spacing: .06em; }
  .lvl-num b { font-size: 1.7rem; line-height: 1; }
}
.snd-score { display: none; }
@media (max-width: 760px) {
  /* Sons : nom + mots à gauche, petite barre dessous, score lisible à droite */
  .sound-chart { gap: 10px !important; }
  .sound-cell { grid-template-columns: 44px 1fr auto !important; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 3px; padding: 10px 12px !important; }
  .sound-cell .snd-ill { grid-row: 1 / 4; }
  .sound-cell b { grid-column: 2; }
  .sound-cell > small { grid-column: 2; }
  .sound-cell .qbar { grid-column: 2; grid-row: 3; width: 100% !important; min-width: 0; height: 6px; margin: 3px 0 0 !important; }
  .sound-cell .qbar span { display: none; }
  .snd-score { display: flex; flex-direction: column; align-items: center; justify-content: center; grid-column: 3; grid-row: 1 / 4; min-width: 64px; padding: 4px 8px; border-radius: 12px; background: var(--primary-soft); }
  .snd-score b { font-size: 1rem; color: var(--primary); }
  .snd-score small { font-size: .66rem; color: var(--muted); }
  .snd-score.new { background: var(--surface2); }
  .snd-score.new b { font-size: .78rem; color: var(--muted); }
}

/* ---------- Parcours téléphone façon Duolingo ---------- */
.ppath { position: relative; padding-bottom: 30px; }
.u-banner {
  position: sticky; z-index: 4; display: flex; align-items: stretch; margin: 0 0 6px; border-radius: 18px; overflow: hidden;
  background: var(--uc); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--uc) 65%, #000); transition: background .3s, box-shadow .3s;
}
.ub-txt { flex: 1; min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 1px; }
.ub-txt small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ub-txt b { font-size: 1.05rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-book { flex: none; width: 58px; border: none; border-left: 2px solid color-mix(in srgb, var(--uc) 70%, #000); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ub-ic { width: 30px; height: 30px; filter: brightness(0) invert(1); }
.punit { position: relative; padding: 4px 0 10px; }
.pu-div { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; color: var(--muted); font-weight: 700; font-size: .92rem; text-align: center; }
.pu-div::before, .pu-div::after { content: ''; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.pu-div span { max-width: 70%; }
.pnodes { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; }
.pnode-wrap { position: relative; transform: translateX(calc(var(--off) * 46px)); }
.ppath .node, .ppath .node.done, .ppath .node.locked, .ppath .node.review { width: 76px; height: 76px; }
.ppath .node-art, .ppath .node.review .node-art { width: 76px; height: 76px; margin: 0; transform: scale(1.3); }
.ppath .node-num { font-size: 1.6rem; }
.pn-start {
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  background: var(--surface); color: var(--uc); border: 2px solid var(--line); border-radius: 12px; padding: 5px 12px;
  font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 3px 0 var(--line);
  animation: pn-bob 1.6s ease-in-out infinite;
}
.pn-start::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--surface); }
@keyframes pn-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
[data-motion="off"] .pn-start { animation: none; }
.pu-decor { position: absolute; top: 60px; width: 118px; height: 118px; pointer-events: none; }
.pu-decor.left { left: 0; } .pu-decor.right { right: 0; }
.punit:first-child .pu-decor, .u-banner + .punit .pu-decor { top: 30px; }
.pu-decor .zz { position: absolute; top: 4px; right: 10px; }
/* bulle d'une leçon */
.lpop {
  position: relative; width: 100%; max-width: 360px; margin: 4px auto 6px; padding: 16px; border-radius: 20px;
  background: var(--uc); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--uc) 65%, #000); animation: toast-in .25s ease-out;
}
.lpop.locked { background: var(--surface2); color: var(--ink); box-shadow: 0 6px 0 var(--line); }
.lp-arrow { position: absolute; top: -10px; left: calc(50% + var(--off) * 46px - 10px); width: 20px; height: 20px; background: inherit; transform: rotate(45deg); border-radius: 4px; }
.lpop.locked .lp-arrow { background: var(--surface2); }
.lp-title { display: block; font-size: 1.1rem; line-height: 1.25; position: relative; }
.lp-meta { margin: 4px 0 12px; opacity: .9; font-size: .9rem; position: relative; }
.lpop.locked .lp-meta { margin-bottom: 0; color: var(--muted); }
.lp-go { width: 100%; min-height: 52px; border: none; border-radius: 14px; background: #fff; color: var(--uc); font: inherit; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.18); position: relative; }
.lp-go:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.lp-more { width: 100%; margin-top: 8px; min-height: 40px; border: none; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; position: relative; }
.pu-div { margin: 30px 0 4px; font-size: .85rem; }
.pu-div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.pnodes { padding-top: 46px; }
.pu-decor { top: 74px; }
.u-banner + .punit .pu-decor { top: 50px; }
.u-banner + .punit .pnodes { padding-top: 40px; }
@media (max-width: 760px) { .login .row-btns { flex-direction: column; } .login .row-btns .btn { width: 100%; } }

/* ---------- Aperçu d'une leçon : structuré, seule la liste des mots défile ---------- */
.lsheet { background: var(--surface); border-radius: 24px; width: 100%; max-width: 520px; max-height: min(88vh, 720px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); border-top: 6px solid var(--uc); }
.ls-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; }
.ls-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--uc) 14%, var(--surface)); display: flex; align-items: center; justify-content: center; }
.ls-ic-img { width: 40px; height: 40px; border-radius: 50%; }
.ls-titles { flex: 1; min-width: 0; }
.ls-titles small { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--uc); }
.ls-titles h2 { margin: 2px 0 0; font-size: 1.25rem; line-height: 1.2; text-align: left; }
.ls-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); font-size: 1rem; cursor: pointer; align-self: flex-start; }
.ls-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.ls-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; background: var(--surface2); border-radius: 99px; padding: 4px 10px 4px 6px; }
.ls-pill .ic-inline { width: 18px; height: 18px; margin: 0; }
.ls-pill.ok { background: var(--good-bg); }
.ls-btns { display: flex; gap: 8px; padding: 0 16px 14px; }
.ls-btns .btn.primary { flex: 1; min-height: 54px; }
.ls-btns .btn.ghost { flex: none; min-height: 54px; padding: 0 16px; }
.ls-lines { display: grid; gap: 6px; padding: 12px 16px; border-top: 2px solid var(--line); }
.ls-line { display: flex; align-items: center; gap: 10px; }
.ls-line .ic-inline { width: 26px; height: 26px; flex: none; margin: 0; }
.ls-line span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ls-line small { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ls-line b { font-size: .92rem; }
.ls-note { padding: 10px 16px; margin: 0; border-top: 2px solid var(--line); color: var(--muted); font-size: .9rem; }
.ls-words-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 2px solid var(--line); background: var(--bg); }
.ls-label { padding: 10px 16px 6px; color: var(--muted); font-weight: 700; font-size: .78rem; }
.ls-words { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px 14px; align-content: start; }
.ls-word { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ls-word:active { transform: scale(.98); }
.ls-pic { flex: none; display: flex; }
.ls-pic .word-img { width: 36px; height: 36px; border-radius: 8px; }
.ls-wtxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ls-wtxt b { font-size: .92rem; }
.ls-wtxt small { font-size: .78rem; color: var(--muted); }
@media (max-width: 760px) {
  /* sur téléphone : feuille qui monte du bas de l'écran */
  .ls-back { align-items: flex-end; padding: 0; }
  .lsheet { max-width: none; border-radius: 24px 24px 0 0; max-height: 86vh; padding-bottom: env(safe-area-inset-bottom); animation: sheet-up .28s cubic-bezier(.2,.9,.3,1); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.u-banner { margin-top: 4px; }

/* ---------- Barre du haut sur téléphone : capsule « verre liquide » (codes iOS 26/27) ----------
   plus de cadre dans un cadre : la barre disparaît, il reste une capsule flottante translucide,
   le contenu défile dessous (flou + léger fondu en haut de l'écran). */
@media (max-width: 760px) {
  .topbar {
    background: transparent; border-bottom: none; box-shadow: none;
    padding: calc(6px + env(safe-area-inset-top)) 14px 8px; margin: 0 -14px 6px;
  }
  .topbar::before {
    content: ''; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 55%, transparent 100%);
  }
  .topbar .stats-cluster {
    width: 100%; justify-content: space-between; gap: 0; margin: 0;
    height: 50px; padding: 0 6px 0 14px; border-radius: 99px;
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid color-mix(in srgb, #fff 70%, transparent);
    box-shadow: 0 8px 24px rgba(31,42,68,.10), 0 1px 2px rgba(31,42,68,.06), inset 0 1px 0 rgba(255,255,255,.75);
  }
  .topbar .stats-cluster .stat, .topbar .stats-cluster .stat + .stat { border: none; border-radius: 99px; padding: 4px 6px; gap: 5px; font-size: .98rem; }
  .topbar .stats-cluster .stat b { font-weight: 700; letter-spacing: -.01em; }
  .topbar .ic-stat { width: 22px; height: 22px; margin: 0; }
  .topbar .stats-cluster .goal { border: none; margin: 0; padding: 0 2px 0 4px; gap: 4px; border-radius: 99px; }
  .topbar .stats-cluster .goal-ring, .topbar .stats-cluster .goal-ring svg { width: 40px; height: 40px; }
  .topbar .stats-cluster .goal-chest { inset: 7px; width: 26px; height: 26px; }
  .topbar .goal-txt { font-size: .82rem; font-weight: 700; color: var(--muted); padding-right: 6px; }
  .topbar .goal-txt.done { font-size: .95rem; color: var(--primary); }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .topbar .stats-cluster { border-color: rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
}
[data-theme="sombre"] .topbar .stats-cluster { border-color: rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }

/* =====================================================================
   Finition « premium » : bordures fines, ombres douces en couches, reflets légers,
   verre dépoli pour les barres. Mêmes tailles qu'avant (rien ne déborde de l'écran).
   ===================================================================== */
:root {
  --line: #E7DECD;
  --shadow: 0 1px 2px rgba(31,42,55,.05), 0 6px 20px rgba(31,42,55,.06);
  --shadow-lg: 0 2px 6px rgba(31,42,55,.06), 0 18px 40px rgba(31,42,55,.10);
  --glass: color-mix(in srgb, var(--surface) 64%, transparent);
  --glass-edge: color-mix(in srgb, #fff 72%, transparent);
}
[data-theme="sombre"] { --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --shadow-lg: 0 18px 40px rgba(0,0,0,.45); --glass-edge: rgba(255,255,255,.12); --glass: color-mix(in srgb, var(--surface) 70%, transparent); }

/* titres plus nets */
h1, h2, .page-title, .ex-title, .lp-title, .ls-titles h2 { letter-spacing: -.015em; }
h1, .page-title { font-weight: 800; }

/* cartes : trait fin + ombre douce */
.card, .grammar-card, .learn-card, .speak-card, .rc-card, .cr-scene, .hub-tile, .sound-cell, .stat-tile, .ach, .unit-prog,
.lex-row, .fin-sum, .fc-card, .mp-top, .prompt-fr, .bubble, .g-unit, .set-card, .quests, .side-card, .fin-chip, .ls-word {
  border-width: 1px;
  box-shadow: var(--shadow);
}
.fc-card { border-width: 2px; }
.bubble.me { box-shadow: none; }

/* boutons : léger dégradé + reflet en haut, ombre de relief conservée (toucher rassurant) */
.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 86%, #fff) 0%, var(--primary) 100%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 62%, #000), inset 0 1px 0 rgba(255,255,255,.22);
  letter-spacing: .01em;
}
.btn.primary:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 62%, #000), inset 0 1px 0 rgba(255,255,255,.22); }
.btn.secondary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 100%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn.ghost { border-width: 1px; box-shadow: 0 1px 2px rgba(31,42,55,.06); }
.btn:disabled { box-shadow: none; }

/* choix et tuiles : bordure plus légère au repos, même relief */
.choice, .tile, .pair { border-color: color-mix(in srgb, var(--line) 85%, var(--ink) 4%); }

/* fenêtres : fond flouté, coins plus doux */
.modal-back { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(20,25,32,.42); }
.modal, .lsheet { border-radius: 26px; box-shadow: var(--shadow-lg); }
.modal { border: 1px solid var(--line); }

/* leçon : barre de progression fine et brillante, pied de page en verre */
.l-progress { height: 12px; border: none; background: color-mix(in srgb, var(--surface2) 85%, var(--line)); }
.l-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 75%, #fff), var(--primary)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.25); }
.l-foot { border-top: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.l-foot.good { background: color-mix(in srgb, var(--good-bg) 88%, transparent); border-top: 2px solid var(--good); }
.l-foot.soft { background: color-mix(in srgb, var(--soft-bg) 90%, transparent); border-top: 2px solid var(--accent); }

/* onglets internes (Réviser, Progrès) : segment iOS */
.ptabs { background: color-mix(in srgb, var(--surface2) 80%, transparent); border-radius: 14px; padding: 3px; }
.ptab { border-radius: 11px; }
.ptab.on { box-shadow: 0 1px 2px rgba(31,42,55,.08), 0 3px 8px rgba(31,42,55,.08); }

/* ---------- Barre d'onglets du bas : capsule flottante en verre (codes iOS 26/27) ---------- */
@media (max-width: 760px) {
  .side {
    left: 12px; right: 12px; bottom: max(10px, calc(env(safe-area-inset-bottom) - 6px));
    padding: 5px; gap: 0; border-radius: 30px; border: 1px solid var(--glass-edge); border-top: 1px solid var(--glass-edge);
    background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 10px 30px rgba(31,42,55,.14), 0 1px 3px rgba(31,42,55,.08), inset 0 1px 0 rgba(255,255,255,.6);
  }
  [data-theme="sombre"] .side { box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
  .side .nav-btn { min-height: 54px; border-radius: 24px; font-size: .64rem; font-weight: 700; color: var(--muted); gap: 1px; transition: background .2s, color .2s; }
  .side .nav-btn .ic-nav { width: 27px; height: 27px; transition: transform .2s; }
  .side .nav-btn.active { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
  .side .nav-btn.active .ic-nav { transform: scale(1.06); }
  .side .nav-btn:not(.active) .ic-nav { opacity: .85; }
  .side .nav-btn .pill { top: 3px; margin-right: -24px; box-shadow: 0 0 0 2px var(--surface); }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* bouton « Ma leçon » (parcours téléphone) */
.goto-cur {
  position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 15;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 99px;
  border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 22px rgba(31,42,55,.16); color: var(--primary); font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer;
  opacity: 0; transform: translateY(10px) scale(.95); pointer-events: none; transition: opacity .2s, transform .2s;
}
.goto-cur.show { opacity: 1; transform: none; pointer-events: auto; }
.gc-arrow { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
/* objectif du jour : coffre + anneau + pastille = un seul objet */
.goal-badge {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); white-space: nowrap;
  font-size: .66rem; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 99px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(31,42,55,.15);
}
.goal-badge.done {
  left: auto; right: -4px; bottom: -3px; transform: none; width: 20px; height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: .72rem;
  background: var(--primary); color: var(--primary-ink); border: 2px solid var(--surface);
}
.stats-cluster .goal { padding-right: 6px !important; padding-bottom: 4px; }
@media (max-width: 760px) {
  .topbar .goal-badge { font-size: .58rem; bottom: -6px; padding: 2px 5px; }
  .topbar .goal-badge.done { width: 18px; height: 18px; font-size: .64rem; bottom: -2px; right: -3px; }
}

/* =====================================================================
   Menus sur téléphone, codes iOS : taille de texte d'app (17 px), grands titres sobres,
   listes groupées à séparateurs fins, en-têtes de section discrets, champs de recherche iOS.
   Les écrans d'exercice ne sont PAS concernés (ils gardent leur taille).
   ===================================================================== */
@media (max-width: 760px) {
  html:has(#app.shell) { font-size: calc(var(--fs) * .85); }

  .shell .page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 4px 2px 12px; }
  .shell .page-title .ic-title { display: none; }
  .shell .section-title { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 4px 6px; }
  .shell .section-title .ic-head { display: none; }
  .shell p.muted, .shell .card .muted { font-size: .88rem; line-height: 1.45; }
  .shell .card { border-radius: 16px; padding: 14px; margin: 10px 0; }
  .shell .card-head h3, .shell .set-head { font-size: 1rem; }
  .shell .card-head .ic-head { width: 24px; height: 24px; }

  /* recherche et filtres façon iOS */
  .shell .lex-tools-card { background: none; border: none; box-shadow: none; padding: 0; margin: 0 0 8px; }
  .shell .lex-tools { gap: 8px; margin: 0 0 8px; flex-wrap: nowrap; }
  .shell .search {
    min-width: 0; min-height: 40px; height: 40px; border: none; border-radius: 12px; background-color: color-mix(in srgb, var(--surface2) 90%, var(--ink) 4%);
    padding: 0 12px 0 36px; font-size: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237A8494' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 11px center;
  }
  .shell .select { min-height: 40px; height: 40px; border: none; border-radius: 12px; background-color: color-mix(in srgb, var(--surface2) 90%, var(--ink) 4%); font-size: 15px; padding: 0 10px; max-width: 46%; }
  .shell .chips { gap: 6px; }
  .shell .chip { min-height: 32px; padding: 0 12px; font-size: .82rem; border-width: 1px; }
  .shell .legend-box summary { min-height: 36px; font-size: .9rem; }

  /* listes groupées : un seul bloc arrondi, lignes séparées par un trait fin */
  .shell .tiles, .shell .units-prog, .shell .ach-grid, .shell .hub-grid, .shell .sound-chart {
    display: block !important; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); padding: 0; margin: 8px 0 14px;
  }
  .shell .tiles > *, .shell .units-prog > *, .shell .ach-grid > *, .shell .hub-grid > *, .shell .sound-chart > * {
    margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: none; width: 100%;
  }
  .shell .tiles > * + *, .shell .units-prog > * + *, .shell .ach-grid > * + *, .shell .hub-grid > * + *, .shell .sound-chart > * + * { border-top: 1px solid var(--line) !important; }

  /* Progrès › chiffres : une ligne = libellé à gauche, valeur à droite */
  .shell .stat-tile { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 11px 14px; text-align: left; }
  .shell .stat-tile .ic-tile { width: 26px; height: 26px; flex: none; }
  .shell .stat-tile > div { flex: 1; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
  .shell .stat-tile b { font-size: 1rem; font-weight: 700; white-space: nowrap; }
  .shell .stat-tile span { font-size: .92rem; color: var(--ink); line-height: 1.3; }
  .shell .prog-hero { padding: 14px; gap: 14px; }
  .shell .lvl-ring, .shell .lvl-ring svg { width: 76px; height: 76px; }
  .shell .lvl-num b { font-size: 1.5rem; }
  .shell .prog-hero-txt h2 { font-size: 1.3rem; }
  .shell .prog-hero-txt p { font-size: .85rem; margin: 2px 0; }

  /* barres de progression fines, valeur en petit à droite */
  .shell .qbar { height: 6px; overflow: visible; margin-right: 46px; background: var(--surface2); }
  .shell .qbar span { inset: auto; right: -46px; top: 50%; transform: translateY(-50%); width: 42px; text-align: right; font-size: .72rem; font-weight: 700; color: var(--muted); display: block; }
  .shell .qfill { border-radius: 99px; }
  .shell .quest-txt { gap: 6px; }
  .shell .quest-txt b { font-size: .92rem; }

  /* unités et succès : lignes compactes */
  .shell .unit-prog { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; border-left: 4px solid var(--uc) !important; }
  .shell .unit-prog .ic-tile { width: 30px; height: 30px; }
  .shell .unit-prog b { font-size: .92rem; }
  .shell .ach { display: flex; flex-direction: row !important; align-items: center; gap: 12px; padding: 10px 14px; text-align: left !important; }
  .shell .ach .ic-ach { width: 36px; height: 36px; }
  .shell .ach .muted { display: block !important; font-size: .78rem; }
  .shell .ach b { font-size: .92rem; }
  .shell .ach-lvl { font-size: .58rem; }

  /* Réviser : lignes de liste avec chevron */
  .shell .hub-tile { padding: 10px 14px !important; min-height: 52px; }
  .shell .hub-tile::after { content: '›'; margin-left: auto; padding-left: 8px; font-size: 1.3rem; color: var(--muted); line-height: 1; }
  .shell .hub-tile .pill-soft + * { display: none; }
  .shell .hub-tile .hub-txt b { font-size: .95rem; }
  .shell .hub-hero { padding: 14px; }
  .shell .hub-hero-txt h2 { font-size: 1.1rem; }
  .shell .sound-cell { padding: 10px 14px !important; }

  /* semaine, calendrier, quêtes */
  .shell .week { height: 84px; gap: 6px; }
  .shell .wk-bar { max-width: 22px; border-radius: 6px; }
  .shell .cal-day { border-radius: 8px; font-size: .75rem; }
  .shell .quest { padding: 10px 0; gap: 10px; }
  .shell .ic-quest { width: 26px; height: 26px; }
  .shell .ic-chest { width: 28px; height: 28px; }

  /* Mots */
  .shell .lex-unit { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 12px 4px 4px; }
  .shell .lex-unit .pill-soft { font-size: .7rem; }
  .shell .lex-row { border-radius: 14px; padding: 10px; }
  .shell .lex-txt b { font-size: .98rem; }
  .shell .lex-txt span { font-size: .84rem; color: var(--muted); }

  /* Règles et Options : lignes de liste */
  .shell .g-unit { padding: 2px 14px; margin: 8px 0; }
  .shell .g-unit > summary { font-size: .95rem; min-height: 48px; }
  .shell .g-open { font-size: .9rem; min-height: 46px; }
  .shell .settings .set-card { padding: 2px 14px; }
  .shell .settings .set-head { min-height: 48px; font-size: .98rem; }
  .shell .set-lbl b { font-size: .95rem; }
  .shell .set-lbl small { font-size: .78rem; }
  .shell .seg-btn { min-height: 40px; padding: 0 12px; font-size: .88rem; border-width: 1px; border-radius: 10px; }
  .shell .switch-row { min-height: 54px; }
  .shell .preset { padding: 10px 12px; }
}
@media (max-width: 760px) {
  .shell .sound-cell .qbar { margin-right: 0; }
  .shell .sound-cell .qbar span { display: none !important; }
  .shell .ach .qbar { margin-right: 84px; }
  .shell .ach .qbar span { right: -84px; width: 80px; white-space: nowrap; }
  .shell .lex-row { flex-direction: row; align-items: center; gap: 8px; padding: 8px 46px 8px 8px; min-height: 56px; }
  .shell .lex-row .lex-emoji { width: 30px; font-size: 1.3rem; }
  .shell .lex-row .lex-emoji .word-img { width: 30px; height: 30px; }
  .shell .lex-row .audio-btn:not(.slow) { top: 50%; transform: translateY(-50%); width: 34px; height: 34px; right: 6px; }
  .shell .title-row .btn { min-height: 36px; padding: 0 12px; font-size: .85rem; border-radius: 99px; }
  .shell .title-row .btn .ic-btn { width: 20px; height: 20px; }
  .shell .title-row { align-items: center; }
}

/* ---------- Révision du jour : une carte nette, deux actions côte à côte ---------- */
.rev-hero { padding: 16px; }
.rh-top { display: flex; align-items: center; gap: 14px; }
.rh-badge { flex: none; width: 60px; height: 60px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--primary); color: var(--primary-ink); line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.rh-badge b { font-size: 1.35rem; }
.rh-badge small { font-size: .62rem; font-weight: 700; opacity: .9; margin-top: 3px; }
.rh-badge.ok { background: var(--good-bg); }
.rh-ic { width: 34px; height: 34px; }
.rh-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rh-txt b { font-size: 1.1rem; line-height: 1.25; }
.rh-txt small { font-size: .85rem; color: var(--muted); line-height: 1.35; }
.rh-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rh-actions .btn { min-height: 48px; padding: 0 10px; font-size: .95rem; white-space: nowrap; }
.btn.tint { background: var(--primary-soft); color: var(--primary); box-shadow: none; border: none; }
.btn.tint:active { transform: scale(.98); }

/* ---------- Accueil du jour ---------- */
.wl-sheet { padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); }
.wl-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px; }
.wl-top h2 { margin: 0; font-size: 1.35rem; text-align: left; }
.wl-top p { margin: 2px 0 0; font-size: .92rem; }
.wl-list { margin: 8px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.wl-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.wl-row + .wl-row { border-top: 1px solid var(--line); }
.wl-ic { width: 28px; height: 28px; flex: none; }
.wl-row span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wl-row b { font-size: .95rem; }
.wl-row small { font-size: .8rem; color: var(--muted); }
.wl-btns { display: grid; gap: 8px; padding: 8px 16px 4px; }
.wl-btns .btn { width: 100%; }
.wl-btns .btn.tint { min-height: 50px; }
.wl-later { justify-self: center; min-height: 40px; color: var(--muted); }

/* ---------- Connexion : un seul écran, classique et soigné ---------- */
.lg { min-height: 100vh; min-height: 100dvh; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom)); }
.lg-brand { text-align: center; }
.lg-toby { display: flex; justify-content: center; margin-bottom: 4px; }
.lg-word { justify-content: center; font-size: 1.6rem; }
.lg-tag { margin: 2px 0 0; color: var(--muted); font-size: .9rem; max-width: none; }
.lg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 20px 18px; box-shadow: var(--shadow-lg, var(--shadow)); display: grid; gap: 12px; }
.lg-title { margin: 0; font-size: 1.3rem; text-align: center; letter-spacing: -.015em; }
.lg-sub { margin: -4px 0 2px; text-align: center; color: var(--muted); font-size: .88rem; line-height: 1.45; max-width: none; }
.lg-field { position: relative; }
.lg-input { width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); padding: 0 52px 0 16px; font-size: 17px; }
.lg-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent); background: var(--surface); }
.lg-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: none; background: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .55; }
.lg-eye.on { opacity: 1; background: var(--primary-soft); }
.lg-eye-ic { width: 24px; height: 24px; }
.lg-btn { width: 100%; min-height: 52px !important; font-size: 1rem; }
.lg-err:empty { display: none; }
.lg-msg { margin: 0; text-align: center; font-size: .88rem; font-weight: 700; }
.lg-msg.err { color: var(--danger); }
.lg-foot { text-align: center; color: var(--muted); font-size: .78rem; margin: 0 auto; max-width: 300px; line-height: 1.4; }
.lg-skip { align-self: center; background: none; border: none; color: var(--primary); font: inherit; font-weight: 700; font-size: .92rem; min-height: 44px; padding: 0 12px; cursor: pointer; }
.lg-spin { width: 34px; height: 34px; margin: 10px auto; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: lg-spin .8s linear infinite; }
@keyframes lg-spin { to { transform: rotate(360deg); } }
.lg-brand .wordmark { flex-direction: row !important; align-items: baseline; justify-content: center; width: 100%; gap: 8px; } .lg-brand .wordmark .w1 { font-size: 1.9rem; }

/* ---------- Parcours « Liste » : ligne du temps épurée ---------- */
.tl-banner { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-edge); box-shadow: 0 6px 18px rgba(31,42,55,.08); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); align-items: center; padding-left: 14px; border-radius: 16px; }
.tlb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--uc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--uc) 18%, transparent); transition: background .3s; }
.tl-banner .ub-txt { padding: 8px 10px; }
.tl-banner .ub-txt small { color: var(--uc); opacity: 1; }
.tl-banner .ub-txt b { font-size: .98rem; }
.tl-banner .ub-book { border-left: 1px solid var(--line); width: 52px; }
.tl-banner .ub-ic { filter: none; width: 26px; height: 26px; }

.tl-unit { padding: 6px 0 14px; }
.tl-chap { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px; margin: 14px 0 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.tl-chap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--uc); }
.tl-chap-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--uc) 12%, var(--surface)); display: flex; align-items: center; justify-content: center; }
.tl-uic { width: 34px; height: 34px; border-radius: 50%; }
.tl-chap-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-chap-txt small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--uc); }
.tl-chap-txt b { font-size: 1.05rem; line-height: 1.25; }
.tl-bar { height: 5px; border-radius: 99px; background: var(--surface2); margin-top: 6px; overflow: hidden; }
.tl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--uc); }
.tl-chap-art { flex: none; width: 64px; height: 64px; margin: -8px -4px -8px 0; }
.tl-art { width: 64px; height: 64px; border-radius: 0; }
.tl-unit.locked .tl-chap { opacity: .75; }

.tl-list { position: relative; padding: 4px 0 4px 6px; }
.tl-list::before { content: ''; position: absolute; left: 29px; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--uc) 28%, var(--line)); }
.tl-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 7px 10px 7px 0; border-radius: 16px; cursor: pointer; border: 1px solid transparent; }
.tl-row:active { background: var(--surface2); }
.ppath .tl-node, .ppath .tl-node.done, .ppath .tl-node.locked { flex: none; width: 48px; height: 48px; position: relative; z-index: 1; display: grid; place-items: center; }
.ppath .tl-node .node-art { width: 48px; height: 48px; transform: scale(1.25); }
.ppath .tl-node .node-num { font-size: 1.05rem; }
.tl-node.current::before { inset: -5px !important; border-width: 3px !important; }
.tl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tl-txt b { font-size: .95rem; font-weight: 700; }
.tl-txt small { font-size: .78rem; color: var(--muted); margin-top: 1px; }
.tl-row.done .tl-txt b { color: color-mix(in srgb, var(--ink) 75%, var(--muted)); }
.tl-row.locked .tl-txt { opacity: .55; }
.tl-chev { flex: none; color: var(--muted); font-size: 1.3rem; width: 14px; text-align: center; }
.tl-row.current { background: var(--surface); border-color: color-mix(in srgb, var(--uc) 45%, var(--line)); box-shadow: 0 6px 18px color-mix(in srgb, var(--uc) 16%, transparent); padding-right: 8px; margin: 4px 0; }
.tl-row.current .tl-txt small { color: var(--uc); font-weight: 700; }
.tl-go { flex: none; min-height: 38px; padding: 0 14px; border: none; border-radius: 99px; background: var(--uc); color: #fff; font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--uc) 60%, #000); }
.tl-go:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--uc) 60%, #000); }

/* ---------- Fiche d'une leçon v2 : en-tête structuré, chiffres alignés, page derrière bloquée ---------- */
html.sheet-open, html.sheet-open body { overflow: hidden; }
html.sheet-open body { position: fixed; left: 0; right: 0; }
.ls-back { overscroll-behavior: contain; touch-action: none; }
.ls-back .lsheet { touch-action: pan-y; }
.ls2 { border-top: none; }
.ls-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 20px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--uc) 16%, var(--surface)) 0%, var(--surface) 100%); }
.ls-grab { width: 38px; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); margin-bottom: 8px; }
.ls2 .ls-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: .85rem; }
.ls2 .ls-ic { width: 64px; height: 64px; background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--uc) 22%, transparent), var(--shadow); margin-bottom: 6px; }
.ls2 .ls-ic-img { width: 48px; height: 48px; }
.ls-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--uc); }
.ls-title { margin: 0; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; }
.ls-done { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--good); background: var(--good-bg); border-radius: 99px; padding: 3px 10px 3px 6px; }
.ls-done .ic-inline { width: 16px; height: 16px; margin: 0; }
.ls-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ls-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; gap: 1px; }
.ls-stat + .ls-stat { border-left: 1px solid var(--line); }
.ls-stat-ic { width: 24px; height: 24px; margin-bottom: 2px; }
.ls-stat b { font-size: 1.1rem; line-height: 1.1; }
.ls-stat small { font-size: .72rem; color: var(--muted); }
.ls2 .ls-btns { padding: 14px 16px; }
.ls2 .ls-btns .btn { width: 100%; min-height: 54px; }
/* Liste : l'anneau de la leçon en cours reste dans sa carte */
.tl-row { padding-left: 8px; }
.tl-list::before { left: 37px; }
.ppath .tl-node .node-art { transform: scale(1.12); }
.ppath .tl-node.current::before { inset: -3px !important; border-width: 2px !important; }
.tl-row.current { margin: 6px 0; }