/* Mobilis — style sobre « Charge » : noir et blanc, vert = progrès, rouge = douleur / recul.
   Mise en page : une colonne sur téléphone ; barre latérale + contenu centré sur ordinateur. */
:root {
  --bg: #f3f3f2; --surface: #ffffff; --surface-2: #ececea; --ink: #15171a; --ink-2: #3a3c40; --muted: #6b6d71; --line: #e2e2df;
  --on-ink: #ffffff; --pos: #1c9b55; --pos-soft: #e3f4ea; --neg: #d6403a; --neg-soft: #fbe7e5; --warn: #b7791f;
  --radius: 20px; --radius-sm: 14px;
  --fig-body: #15171a; --fig-far: #b4b6b9; --fig-joint: #ffffff; --fig-prop: #e4e4e1; --fig-mat: #dcdcd8; --fig-accent: #1c9b55;
  --an-muscle: rgba(214, 64, 58, 0.42); --an-tendon: #d99a1e; --an-nerve: #c9a400; --an-joint: #3b82c4;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0b; --surface: #151517; --surface-2: #1f1f22; --ink: #f2f2f3; --ink-2: #c9c9cc; --muted: #8b8b90; --line: #26262a;
    --on-ink: #0a0a0b; --pos: #3ccf7b; --pos-soft: #10291b; --neg: #ff5a4f; --neg-soft: #2c1412; --warn: #e3a948;
    --fig-body: #f2f2f3; --fig-far: #55575c; --fig-joint: #0a0a0b; --fig-prop: #232326; --fig-mat: #1c1c1f; --fig-accent: #3ccf7b;
    --an-muscle: rgba(255, 90, 79, 0.45); --an-tendon: #f0b13c; --an-nerve: #f2d33b; --an-joint: #6aaee8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0b; --surface: #151517; --surface-2: #1f1f22; --ink: #f2f2f3; --ink-2: #c9c9cc; --muted: #8b8b90; --line: #26262a;
  --on-ink: #0a0a0b; --pos: #3ccf7b; --pos-soft: #10291b; --neg: #ff5a4f; --neg-soft: #2c1412; --warn: #e3a948;
  --fig-body: #f2f2f3; --fig-far: #55575c; --fig-joint: #0a0a0b; --fig-prop: #232326; --fig-mat: #1c1c1f; --fig-accent: #3ccf7b;
  --an-muscle: rgba(255, 90, 79, 0.45); --an-tendon: #f0b13c; --an-nerve: #f2d33b; --an-joint: #6aaee8;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
html, body { overflow-x: clip; } /* jamais de défilement horizontal : évite que Chrome mobile dézoome la page */
body { overflow-wrap: break-word; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a { color: inherit; }
.tnum { font-variant-numeric: tabular-nums; }

/* Coquille : téléphone = colonne + barre d'onglets en bas ; ordinateur = barre latérale */
.shell { min-height: 100vh; }
#app { max-width: 560px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 112px max(16px, env(safe-area-inset-left, 0px)); }
.screen { padding-top: max(16px, env(safe-area-inset-top, 0px)); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.topbar { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 14px; }
.topbar h1 { flex: 1; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); flex: none; }
.icon-btn svg { width: 20px; height: 20px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
h3 { font-size: 17px; margin: 0 0 4px; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.big { font-size: 44px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.mid { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card + .card { margin-top: 10px; }
.card.flat { background: transparent; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: 15.5px; transition: transform .08s; }
.btn:active { transform: scale(0.985); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.soft { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn.danger { background: transparent; color: var(--neg); border-color: var(--line); }
.btn.sm { width: auto; min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: 11px; }
.btn[disabled] { opacity: 0.35; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Puces et pastilles */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.chip.pos { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, var(--line)); background: var(--pos-soft); }
.chip.neg { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, var(--line)); background: var(--neg-soft); }
.chip.ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 8px; margin: 0 -16px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 14px; }
.pill.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 13px; }
.seg button { border: 0; background: transparent; border-radius: 10px; padding: 9px 4px; font-size: 13px; font-weight: 600; color: var(--muted); min-height: 38px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days button { aspect-ratio: 1; max-width: 100%; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 13px; color: var(--muted); }
.days button.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* Barres */
.bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); border-radius: 4px; transition: width .4s; }
.bar.pos > i { background: var(--pos); }
.lvl { display: inline-flex; gap: 3px; }
.lvl i { width: 12px; height: 4px; border-radius: 2px; background: var(--surface-2); }
.lvl i.on { background: var(--ink); }

/* Formulaires */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; letter-spacing: .02em; }
.input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; padding: 13px 14px; font-size: 16px; outline: none; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.45; }
.input:focus { border-color: var(--ink); }
.search { position: relative; margin-bottom: 12px; }
.search svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.search .input { padding-inline-start: 42px; }
.choice { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: start; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px; }
.choice + .choice { margin-top: 8px; }
.choice.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice b { display: block; font-weight: 700; }
.choice small { color: var(--muted); display: block; margin-top: 2px; }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; margin-top: 1px; display: grid; place-items: center; }
.choice.on .radio { border-color: var(--ink); }
.choice.on .radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.choice.flag.on { border-color: var(--neg); box-shadow: inset 0 0 0 1px var(--neg); }
.choice.flag.on .radio { border-color: var(--neg); }
.choice.flag.on .radio::after { background: var(--neg); }
input[type="range"] { width: 100%; accent-color: var(--ink); height: 28px; }
.scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.toggle > span { min-width: 0; }
.switch { position: relative; width: 48px; height: 28px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.switch.on { background: var(--pos); border-color: var(--pos); }
.switch.on::after { transform: translateX(20px); background: #fff; }
.err { color: var(--neg); font-size: 13.5px; margin: 8px 0 0; }
.note { font-size: 12.5px; color: var(--muted); }
.steps-dots { display: flex; gap: 5px; margin: 0 0 18px; }
.steps-dots i { height: 3px; flex: 1; border-radius: 2px; background: var(--surface-2); }
.steps-dots i.on { background: var(--ink); }
.ob-title { font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; margin: 6px 0 8px; font-weight: 700; text-wrap: balance; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(to top, var(--bg) 72%, transparent); z-index: 6; }
.sticky-cta > div { max-width: 528px; margin: 0 auto; display: flex; gap: 10px; }

/* Liste d'exercices */
.ex-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: start; background: transparent; border: 0; padding: 10px 14px 10px 10px; color: inherit; }
.ex-thumb { width: 60px; height: 52px; border-radius: 12px; background: var(--surface-2); flex: none; overflow: hidden; }
.ex-thumb svg { width: 100%; height: 100%; display: block; }
.ex-item .meta { flex: 1; min-width: 0; }
.ex-item .meta b { display: block; font-size: 14.5px; line-height: 1.25; font-weight: 700; }
.ex-item .meta small { color: var(--muted); font-size: 12.5px; }
.check { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; color: var(--on-ink); }
.check.on { background: var(--pos); border-color: var(--pos); color: #fff; }
.check svg { width: 15px; height: 15px; }

/* Accueil */
.hello { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.today { padding: 18px; }
.today .row.between { align-items: flex-end; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.kpis > div { padding: 14px 12px; }
.kpis > div + div { border-inline-start: 1px solid var(--line); }
.kpis b { display: block; font-size: 24px; font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpis span { font-size: 11.5px; color: var(--muted); }
.banner { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 12px 14px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.banner.neg { border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); background: var(--neg-soft); }
.banner.pos { border-color: color-mix(in srgb, var(--pos) 40%, var(--line)); background: var(--pos-soft); }
.banner svg { width: 20px; height: 20px; flex: none; }
.list-plain { padding-inline-start: 18px; margin: 4px 0; }
.list-plain li { margin: 4px 0; }

/* Navigation */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.nav .inner { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.nav button { border: 0; background: transparent; color: var(--muted); display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font-size: 10.5px; font-weight: 600; min-height: 50px; }
.nav button svg { width: 22px; height: 22px; }
.nav button.on { color: var(--ink); }
.nav .fab { justify-self: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; padding: 0; min-height: 0; }
.nav .fab svg { width: 22px; height: 22px; }
/* Mise en page ordinateur : classe posée par index.html (largeur ≥ 900 px et pas un téléphone tactile) */
html.wide #app { max-width: 760px; padding-left: 280px; padding-right: 32px; padding-bottom: 60px; margin-left: max(0px, calc(50% - 520px)); }
html.wide .nav { top: 0; bottom: 0; right: auto; width: 232px; left: max(0px, calc(50% - 520px)); border-top: 0; border-right: 1px solid var(--line); padding: 28px 16px; background: var(--surface); }
html.wide .nav .inner { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
html.wide .nav .brand { display: flex !important; }
html.wide .nav button { grid-auto-flow: column; justify-content: start; gap: 12px; font-size: 14.5px; padding: 10px 12px; border-radius: 12px; min-height: 0; }
html.wide .nav button.on { background: var(--surface-2); }
html.wide .nav .fab { order: 10; width: 100%; height: auto; border-radius: 12px; padding: 12px; margin-top: 16px; grid-auto-flow: column; gap: 8px; font-size: 14.5px; }
html.wide .nav .fab span { display: inline !important; }
html.wide .sticky-cta > div { max-width: 700px; }
html.wide .sticky-cta { padding-left: 280px; }
.nav .brand { display: none; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; padding: 0 12px 20px; }

/* Schéma */
.fig-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; position: relative; }
.fig-wrap svg { width: 100%; height: auto; display: block; aspect-ratio: 240 / 200; }
.fig-tools { position: absolute; inset-inline-end: 10px; top: 10px; display: flex; gap: 6px; }
.fig-tools .chip { cursor: pointer; }
.fig-cap { position: absolute; inset-inline-start: 12px; top: 12px; }
.fg-ground { stroke: var(--line); stroke-width: 1.5; }
.fg-prop { fill: var(--fig-prop); }
.fg-mat { fill: var(--fig-mat); }
.fg-limb, .fg-trunk { stroke: var(--fig-body); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fg-trunk { stroke-width: 7; }
.fg-far { stroke: var(--fig-far); }
.fg-head { fill: var(--fig-body); }
.fg-nose { fill: var(--fig-joint); }
.fg-joint { fill: var(--fig-joint); }
.fg-ghost { opacity: 0.13; }
.fg-trace { stroke: var(--fig-accent); fill: none; stroke-width: 1.5; stroke-dasharray: 3 3; }
.fg-arrow { stroke-dasharray: none; stroke-width: 1.8; }
.fg-arc { stroke: var(--fig-accent); fill: none; stroke-width: 1.5; }
.fg-arc-txt { font-size: 9px; font-weight: 700; fill: var(--fig-accent); font-family: var(--font); }
.fg-key { fill: var(--ink); }
.fg-key-txt { fill: var(--on-ink); font-size: 7.5px; font-weight: 800; font-family: var(--font); }
.fg-held { fill: var(--ink-2); }
.fg-held-line { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.fg-thick { stroke-width: 6; }
.fg-band { stroke: var(--fig-accent); stroke-width: 1.6; }
.fg-an { stroke-linecap: round; fill: none; }
.fg-an-muscle { stroke: var(--an-muscle); }
.fg-an-tendon { stroke: var(--an-tendon); }
.fg-an-fascia { stroke: var(--an-tendon); stroke-dasharray: 2 2; }
.fg-an-nerve { stroke: var(--an-nerve); stroke-dasharray: 3 2; }
.fg-an-joint { fill: none; stroke: var(--an-joint); stroke-width: 1.6; }
.fg-an-label { font-size: 7px; font-weight: 700; fill: var(--ink); font-family: var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 2.5px; stroke-linejoin: round; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-inline-end: 6px; vertical-align: 2px; }

.keylist { list-style: none; padding: 0; margin: 0; }
.keylist li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; }
.keylist li + li { border-top: 1px solid var(--line); }
.keylist .n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: none; }
.steplist { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steplist li { counter-increment: s; display: flex; gap: 12px; padding: 12px 16px; }
.steplist li + li { border-top: 1px solid var(--line); }
.steplist li::before { content: counter(s); font-weight: 300; font-size: 22px; line-height: 1; width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plane { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; gap: 10px; align-items: center; background: var(--surface); }
.plane.off { opacity: .4; }
.plane svg { width: 30px; height: 30px; flex: none; }
.plane b { font-size: 13.5px; display: block; }
.plane small { font-size: 11.5px; color: var(--muted); }

/* Calendrier */
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; margin-bottom: 6px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal button { aspect-ratio: 1; border: 0; background: transparent; border-radius: 12px; position: relative; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; display: grid; place-items: center; }
.cal button.out { color: var(--muted); opacity: .35; }
.cal button.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal button.sel { background: var(--ink); color: var(--on-ink); }
.cal button .dots { position: absolute; bottom: 5px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.cal button .dots i { width: 5px; height: 5px; border-radius: 50%; }
.d-done { background: var(--pos); }
.d-plan { background: transparent; box-shadow: inset 0 0 0 1.2px var(--muted); }
.d-miss { background: var(--neg); }
.d-appt { background: var(--an-joint); }

/* Écran caméra */
.train { position: fixed; inset: 0; background: #000; color: #fff; z-index: 30; display: flex; flex-direction: column; }
.train .stage { position: relative; flex: 1; overflow: hidden; background: #000; }
.train video, .train canvas.overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.train video { background: #000; }
.train video.mirror { transform: scaleX(-1); }
.train .hud-top { position: absolute; left: 0; right: 0; top: 0; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 28px max(12px, env(safe-area-inset-left, 0px)); display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent); z-index: 3; }
.train .hud-top .icon-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(8px); }
.train .hud-title { flex: 1; min-width: 0; }
.train .hud-title b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.train .hud-title small { opacity: .75; font-size: 12.5px; }
.train .plane-badge { display: inline-flex; gap: 6px; align-items: center; border: 1px solid rgba(255, 255, 255, .3); padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; margin-top: 6px; }
.train .plane-badge svg { width: 14px; height: 14px; }
.train .counter { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); top: 92px; width: 96px; height: 96px; z-index: 2; }
.train .counter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.train .counter .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.train .counter .val b { font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; }
.train .counter .val small { display: block; font-size: 11px; opacity: .7; margin-top: 4px; }
.train .depth { position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); top: 100px; bottom: 150px; width: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden; z-index: 2; }
.train .depth i { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 6px; transition: height .08s linear; }
.train .depth::after { content: ''; position: absolute; left: 0; right: 0; top: 10%; height: 2px; background: var(--pos); }
.train .cue { position: absolute; left: 16px; right: 16px; bottom: 120px; text-align: center; z-index: 2; }
.train .cue span { display: inline-block; background: rgba(255, 255, 255, .96); color: #111; padding: 11px 16px; border-radius: 14px; font-weight: 700; font-size: 16px; max-width: 100%; }
.train .cue span.bad { background: #ff5a4f; color: #fff; }
.train .cue span.good { background: #3ccf7b; color: #06200f; }
.train .bottom { padding: 12px max(12px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: #000; display: flex; gap: 10px; border-top: 1px solid #1c1c1e; }
.train .bottom .btn { border-color: #fff; background: #fff; color: #000; }
.train .bottom .btn.ghost { background: #151517; color: #fff; border-color: #2a2a2e; }
.train .center-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; z-index: 2; }
.train .center-msg .bignum { font-size: 110px; font-weight: 200; font-variant-numeric: tabular-nums; }
.train .setup { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: 12px; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 16px; max-height: calc(100% - 110px); overflow: auto; z-index: 4; border: 1px solid var(--line); }
.train .setup .fig-wrap { max-width: 260px; margin: 8px auto; }
.train .mini-fig { position: absolute; left: 30px; bottom: 118px; width: 112px; background: rgba(255, 255, 255, .92); border-radius: 14px; padding: 2px; z-index: 2; --fig-body: #15171a; --fig-far: #b4b6b9; --fig-joint: #fff; --fig-prop: #e4e4e1; --fig-mat: #dcdcd8; --line: #e2e2df; }
.train .mini-fig svg { width: 100%; height: auto; display: block; }
.train .guided-fig { width: min(380px, 88vw); background: #fff; border-radius: 22px; padding: 6px; --fig-body: #15171a; --fig-far: #b4b6b9; --fig-joint: #fff; --fig-prop: #e4e4e1; --fig-mat: #dcdcd8; --line: #e2e2df; --ink: #15171a; --on-ink: #fff; --surface: #fff; }
.train .guided-fig svg { width: 100%; height: auto; display: block; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin 1s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Feuilles modales */
.sheet-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 40; display: flex; align-items: flex-end; animation: fade .15s; }
.sheet { background: var(--bg); color: var(--ink); width: 100%; max-width: 560px; margin: 0 auto; border-radius: 24px 24px 0 0; padding: 10px max(16px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); max-height: 92vh; overflow: auto; animation: up .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 14px; }
html.wide .sheet-bg { align-items: center; } html.wide .sheet { border-radius: 24px; }
.coach-box { display: flex; gap: 12px; padding: 14px; }
.coach-box .ai { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; flex: none; }
.coach-box .ai svg { width: 18px; height: 18px; }
.coach-box p { margin: 2px 0 0; }

/* Graphiques */
.chart svg { width: 100%; height: auto; display: block; }
.chart .ax { stroke: var(--line); }
.chart text { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--on-ink); padding: 11px 16px; border-radius: 12px; z-index: 60; font-weight: 600; font-size: 14px; animation: fade .2s; max-width: calc(100% - 32px); text-align: center; }
.toast.top { bottom: auto; top: calc(16px + env(safe-area-inset-top, 0px)); }

/* Carte du corps */
.bodymap { display: block; margin: 4px auto; width: 100%; max-width: 230px; }
.bodymap .bm-body { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.2; }
.bodymap .bm-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; cursor: pointer; }
.bodymap .bm-dot.on { fill: var(--ink); }
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.region-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 13px 14px; text-align: start; font-weight: 700; font-size: 14px; color: var(--ink); }
.region-btn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* Authentification */
.auth { min-height: calc(100vh - 40px); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.brand-lg { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.brand-lg svg { width: 30px; height: 30px; }
.auth h1 { font-size: 40px; line-height: 1.02; letter-spacing: -0.045em; margin: 28px 0 10px; font-weight: 700; white-space: pre-line; }
.auth .hero-fig { width: 100%; max-width: 320px; margin: 10px 0 18px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; margin: 14px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* QR */
.qr { background: #fff; border-radius: 16px; padding: 12px; width: 200px; margin: 0 auto; }
.qr svg, .qr img { width: 100%; height: auto; display: block; }
.code-big { font-size: 34px; font-weight: 300; letter-spacing: 0.12em; text-align: center; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; }
.stepper b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }

.desk-only { display: none; }
html.wide .desk-only { display: block; }

/* 1.2 */
.lang-select { appearance: none; -webkit-appearance: none; padding: 10px 34px 10px 14px; font-size: 15px; font-weight: 600; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; width: auto; min-width: 128px; }
html[dir="rtl"] .lang-select { padding: 10px 14px 10px 34px; background-position: 13px 55%, 18px 55%; }
html[dir="rtl"] .i-back { transform: scaleX(-1); }
html[dir="rtl"] .switch::after { left: auto; right: 2px; }
.ex-item.lg .ex-thumb { width: 96px; height: 80px; }
.ex-item.lg .meta b { font-size: 15.5px; }
.comment-box { position: relative; }
.comment-box textarea { min-height: 86px; resize: vertical; }
.mic-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mic-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: 14px; color: var(--ink); }
.mic-btn.rec { background: var(--neg); border-color: var(--neg); color: #fff; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .75; } }
.trialbar { background: var(--ink); color: var(--on-ink); border-radius: 14px; padding: 12px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.4; }
.trialbar .tb-top { display: flex; gap: 10px; align-items: flex-start; }
.trialbar .tb-top svg { flex: none; margin-top: 2px; }
.trialbar b { display: block; font-size: 14px; }
.trialbar .grow { min-width: 0; }
.trialbar .tb-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.trialbar button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 10px; font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--on-ink) 16%, transparent); color: var(--on-ink); }
.trialbar button svg { width: 14px; height: 14px; flex: none; }
.test-opt { display: flex; gap: 12px; align-items: center; width: 100%; text-align: start; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px; margin-top: 10px; color: var(--ink); }
.test-opt .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.test-opt b { display: block; }
.test-opt small { color: var(--muted); }
html[dir="rtl"] .switch.on::after { transform: translateX(-20px); }
.spinner.sm { width: 14px; height: 14px; margin: 0; display: inline-block; border-color: color-mix(in srgb, var(--ink) 25%, transparent); border-top-color: var(--ink); vertical-align: -2px; }