/* Taxi 121 Théorie - shared theme "Taxi" (light + dark).
   Contract for page authors: assets/DESIGN.md.
   Order of sections: 1 tokens - 2 base - 3 app shell - 4 layout - 5 components - 6 utilities - 7 motion.
   Pages load this file BEFORE their own <style>; page CSS is for page-specific drawings only and uses these tokens. */

/* ===================================================================== 1. TOKENS */
:root {
  color-scheme: light;

  /* Brand: Swiss taxi yellow. Yellow is always paired with dark text (--on-accent). */
  --accent: #F5C518;
  --accent-hover: #E0B000;
  --on-accent: #111111;
  --accent-soft: #FFF4CC;          /* selected options, tips, "keep" boxes */
  --accent-ring: rgba(245, 197, 24, .45);
  --accent-text: #7A5900;          /* yellow family that passes AA as text on surfaces (dark mode: the yellow itself) */
  --strong: #1F2226;               /* high-emphasis outline/fill: selected borders, active dot (dark mode: yellow) */
  --on-strong: #FFFFFF;
  --hl: rgba(245, 197, 24, .55);   /* highlighter behind .num */

  /* Surfaces and text */
  --bg: #F5EFE2;                   /* style A "calm course": warm cream background */
  --surface: #FFFCF6;              /* warm card, not pure white */
  --surface-2: #EFE6D3;            /* soft panel inside a card */
  --ink: #1A1A1A;
  --muted: #5F6368;
  --line: #E2D7C2;
  /* Chapter colours (soft, calm): number circles, lesson picture panels */
  --c1: #2A8C80; --c1-soft: #DDEFEA;
  --c2: #3567C4; --c2-soft: #E1EAF9;
  --c3: #7655B8; --c3-soft: #ECE5F8;
  --c4: #C4741F; --c4-soft: #F8E6D2;
  --c5: #2E8550; --c5-soft: #E0F0E4;
  --line-strong: #D3CCBD;
  --control: #948E7E;              /* border of pills, options, cells (3:1 on white) */
  --track: var(--line);            /* empty part of meters, timelines, sliders */
  --fill-edge: rgba(0, 0, 0, .22); /* thin edge that keeps a yellow fill visible on a light track */
  --link: var(--accent-text);
  --focus-halo: #111111;

  /* App shell - style A: calm light bar, light hero card, no checkered stripe */
  --appbar: #F5EFE2;
  --on-appbar: #1A1A1A;
  --appbar-muted: #5F6368;
  --appbar-line: #E6E1D6;
  --appbar-hover: rgba(0, 0, 0, .05);
  --hero: #FFFFFF;
  --on-hero: #1A1A1A;
  --hero-muted: #5F6368;
  --hero-2: #F5F0E3;
  --checker: linear-gradient(#E6E1D6, #E6E1D6);

  /* Semantic colours (same meaning in every lesson) + soft backgrounds */
  --drive: #2F6FD6;  --drive-soft: #E7EFFC;   /* driving (steering wheel) */
  --work: #E08A1E;   --work-soft: #FDF0DE;    /* other work / waiting (hammers) */
  --break: #1E8E4F;  --break-soft: #E2F3E9;   /* break (chair) */
  --rest: #8A94A3;   --rest-soft: #EEF0F3;    /* rest / off */
  --ok: #1E7B45;     --ok-soft: #E4F3EA;
  --warn: #C77700;   --warn-soft: #FFF1D9;   --warn-text: #8F5600;
  --bad: #C62828;    --bad-soft: #FDE9E7;

  /* Illustration colours (real-world objects in lesson drawings) */
  --paper: #FFFDF5;  --pen: #1D3F9A;
  --taxi: var(--accent); --taxi-edge: #A8830A; --glass: #CFE3F5; --tyre: #26292E; --hub: #A9B0BA;
  --device: #2A2D33; --device-2: #3D4148; --device-ink: #D9DCE0; --lcd-bg: #0C1A12; --lcd: #BFF0CC;

  /* Legacy names used by existing page CSS (aliases: do not redefine in pages) */
  --card: var(--surface);
  --soft: var(--surface-2);
  --brand: var(--strong);
  --brk: var(--break);
  --okbg: var(--ok-soft);
  --warnbg: var(--warn-soft);
  --badbg: var(--bad-soft);
  --sel: var(--accent-soft);

  /* Shape, spacing (8 px grid), type */
  --r-card: 16px; --r-btn: 12px; --r-sm: 8px; --r-round: 999px;
  --sp-h: 4px; --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 48px;
  --shadow-card: 0 1px 2px rgba(31, 34, 38, .06), 0 6px 18px rgba(31, 34, 38, .07);
  --shadow-up: 0 -2px 14px rgba(0, 0, 0, .18);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-body: 17px; --fs-lead: 18px; --fs-sm: 15px; --fs-xs: 13.5px; --fs-2xs: 12.5px;
  --fs-h1: 26px; --fs-h2: 21px; --fs-h3: 18px; --fs-big: 34px;
  --lh: 1.5;
  --tap: 44px;
  --page-max: 680px; --shell-max: 1040px;
  --appbar-h: 56px; --stripe-h: 1px; --tabbar-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent-soft: #3A3113; --accent-ring: rgba(245, 197, 24, .35);
    --accent-text: #F5C518; --strong: #F5C518; --on-strong: #111111; --hl: rgba(245, 197, 24, .28);
    --bg: #121316; --surface: #1C1E22; --surface-2: #25282D; --ink: #EDEDED; --muted: #A0A4AA;
    --line: #2E3136; --line-strong: #3B3F45; --control: #6E737B; --fill-edge: transparent;
    --appbar: #0E0F11; --appbar-muted: #A9ADB3; --hero: #202328; --hero-muted: #B4B8BE;
    --drive: #6EA0F0; --drive-soft: #1B2A45; --work: #F0A443; --work-soft: #3A2B14;
    --break: #4CC283; --break-soft: #15301F; --rest: #8A94A3; --rest-soft: #262A30;
    --ok: #5FCB8E; --ok-soft: #16301F; --warn: #F2B44A; --warn-soft: #3A2C12; --warn-text: #F2B44A;
    --bad: #FF8A80; --bad-soft: #3B1E1C;
    --paper: #1E252E; --pen: #A9C6FF; --taxi-edge: #C9A00F; --glass: #3B5573; --tyre: #0B0C0E; --hub: #6E757F;
    --device: #0A0B0D; --device-2: #26292E; --lcd: #9BE3B0;
    --shadow-card: none; --shadow-up: 0 -1px 0 #2E3136;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent-soft: #3A3113; --accent-ring: rgba(245, 197, 24, .35);
  --accent-text: #F5C518; --strong: #F5C518; --on-strong: #111111; --hl: rgba(245, 197, 24, .28);
  --bg: #121316; --surface: #1C1E22; --surface-2: #25282D; --ink: #EDEDED; --muted: #A0A4AA;
  --line: #2E3136; --line-strong: #3B3F45; --control: #6E737B; --fill-edge: transparent;
  --appbar: #0E0F11; --appbar-muted: #A9ADB3; --hero: #202328; --hero-muted: #B4B8BE;
  --drive: #6EA0F0; --drive-soft: #1B2A45; --work: #F0A443; --work-soft: #3A2B14;
  --break: #4CC283; --break-soft: #15301F; --rest: #8A94A3; --rest-soft: #262A30;
  --ok: #5FCB8E; --ok-soft: #16301F; --warn: #F2B44A; --warn-soft: #3A2C12; --warn-text: #F2B44A;
  --bad: #FF8A80; --bad-soft: #3B1E1C;
  --paper: #1E252E; --pen: #A9C6FF; --taxi-edge: #C9A00F; --glass: #3B5573; --tyre: #0B0C0E; --hub: #6E757F;
  --device: #0A0B0D; --device-2: #26292E; --lcd: #9BE3B0;
  --shadow-card: none; --shadow-up: 0 -1px 0 #2E3136;
}

/* ===================================================================== 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3, h4 { color: inherit; line-height: 1.25; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.01em; margin: 0 0 var(--sp-1); }
h2 { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 var(--sp-1); }
h3 { font-size: var(--fs-h3); font-weight: 700; margin: var(--sp-3) 0 var(--sp-1); }
p { margin: 12px 0; }
b, strong { font-weight: 700; }
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button:not(:disabled) { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--on-accent); }
/* Focus: yellow ring + dark halo, visible on light and dark backgrounds */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); }
:focus:not(:focus-visible) { outline: none; }

/* ===================================================================== 3. APP SHELL (rendered by assets/app.js) */
.skip {
  position: absolute; left: var(--sp-1); top: -120px; z-index: 100; padding: 10px 14px;
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-btn); font-weight: 700; text-decoration: none;
}
.skip:focus { top: var(--sp-1); }

/* App bar: charcoal, logo + page title + (wide screens) tabs + EN / theme toggles, checkered stripe below */
.appbar {
  position: relative; z-index: 20; display: block; background: var(--appbar); color: var(--on-appbar);
  min-height: calc(var(--appbar-h) + var(--stripe-h)); padding-top: env(safe-area-inset-top, 0px);
}
.appbar::after, .stripe { content: ""; display: block; height: var(--stripe-h); background: #F5C518; background: var(--checker); }
.appbar-in {
  display: flex; align-items: center; gap: 10px; max-width: var(--shell-max); min-height: var(--appbar-h); margin: 0 auto;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
}
.brand { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.brand svg { display: block; width: 99px; height: 33px; }
.brand text { font-family: Arial, Helvetica, sans-serif; }
.lg-ink { fill: var(--on-appbar); } .lg-num { fill: var(--lg-num, var(--on-appbar)); } .lg-k { fill: var(--lg-k, #1F2226); }
.appbar-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--on-appbar); font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.appbar-title .t-main { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.appbar-title .t-en { display: block; color: var(--appbar-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-en="1"] .appbar-title .t-main { -webkit-line-clamp: 1; }
.appbar-actions { flex: none; display: flex; gap: var(--sp-h); }
.appbar-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); height: var(--tap); padding: 0 10px;
  border: 1.5px solid var(--appbar-line); border-radius: var(--r-btn); background: transparent; color: var(--on-appbar);
  font-size: 14px; font-weight: 800; letter-spacing: .04em; line-height: 1;
}
.appbar-btn:hover { background: var(--appbar-hover); }
.appbar-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.appbar-btn svg { width: 20px; height: 20px; }

/* Tab bar: fixed at the bottom on phones, inline in the app bar on wide screens. Active tab in yellow. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  background: var(--appbar); box-shadow: var(--shadow-up);
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.tab {
  position: relative; flex: 1 1 0; min-width: 0; min-height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--appbar-muted); font-size: 12px; font-weight: 650; line-height: 1.2; text-decoration: none;
}
.tab svg { width: 24px; height: 24px; flex: none; }
.tab:hover { color: var(--on-appbar); }
.tab[aria-current="page"] { color: var(--accent); }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.tab:focus-visible { outline-offset: -4px; box-shadow: none; }
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 860px) {
  .tabbar { position: static; flex: none; gap: var(--sp-h); padding: 0; background: transparent; box-shadow: none; }
  .tab { flex: none; flex-direction: row; gap: var(--sp-1); min-height: var(--tap); padding: 0 14px; border-radius: var(--r-btn); font-size: 15px; }
  .tab svg { width: 20px; height: 20px; }
  .tab:hover { background: var(--appbar-hover); }
  .tab[aria-current="page"]::before { top: auto; bottom: 3px; left: 14px; right: 14px; height: 3px; border-radius: 3px; }
  body.has-tabbar { padding-bottom: 0; }
}

/* ===================================================================== 4. LAYOUT */
main, .page {
  display: block; max-width: var(--page-max); margin: 0 auto;
  padding: var(--sp-2) max(16px, env(safe-area-inset-right, 0px)) var(--sp-4) max(16px, env(safe-area-inset-left, 0px));
}
.page-foot { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--sp-2) var(--sp-4); color: var(--muted); font-size: 13px; }
.page-foot .en { font-size: inherit; }
.section { margin-top: var(--sp-4); scroll-margin-top: var(--sp-2); }
.stack > * + * { margin-top: var(--sp-2); }

/* Section header with a numbered yellow badge ("Étape 1 · Apprendre") */
.stage-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 2px 12px; }
.stage-head h2 { margin: 3px 0 0; font-size: 19px; }
.stage-desc { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.stage-desc .en { font-size: inherit; }
.stage-num {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 800;
}

/* ===================================================================== 5. COMPONENTS */

/* --- Card */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; box-shadow: var(--shadow-card);
}
.card + .card { margin-top: var(--sp-2); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
@media (max-width: 380px) { .card { padding: 16px; } }

/* --- Hero: charcoal panel with yellow facts (start page, page intros) */
.hero {
  position: relative; overflow: hidden; padding: 22px 20px 20px; border-radius: var(--r-card);
  background: var(--hero); color: var(--on-hero); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.hero > :first-child { margin-top: 0; }
.hero > :last-child { margin-bottom: 0; }
.hero h1, .hero h2 { color: var(--on-hero); margin-top: 10px; }
.hero .en, .hero .muted, .hero .lead .en { color: var(--hero-muted); }
.hero .lead { color: var(--on-hero); }
.hero a:not(.btn) { color: var(--accent); }
.hero .stat { background: var(--hero-2); }
.hero .stat .v { color: var(--accent); }
.hero .stat .k { color: var(--hero-muted); }
.hero .btn.ghost { color: var(--on-hero); border-color: var(--appbar-line); }
.hero .status { color: var(--ink); }
.hero .status .en { color: var(--muted); }   /* status boxes are light panels: not the hero's light-grey English */
@media (max-width: 380px) { .hero { padding: 18px 16px 16px; } }

/* --- Buttons: primary = yellow with dark text */
.btn {
  display: block; width: 100%; min-height: 48px; padding: 11px 18px; margin: 0;
  border: 2px solid transparent; border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .1s; -webkit-tap-highlight-color: transparent;
}
a.btn { color: var(--on-accent); }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
* + .btn { margin-top: 12px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--control); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--strong); }
.btn.dark { background: var(--strong); color: var(--on-strong); }
.btn.sm { min-height: var(--tap); padding: 8px 14px; font-size: 15px; }
.btn.inline { display: inline-block; width: auto; }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface-2); border-color: var(--line); color: var(--muted); cursor: default; transform: none;
}
.btn.ghost:disabled, .btn.ghost[disabled] { background: transparent; }
/* English sub-label inside buttons (different names in different pages) */
.btn .en, .ben, .btnen, .enb { display: block; color: inherit; font-size: 13px; font-weight: 500; opacity: .8; }
.enb { color: var(--muted); opacity: 1; font-size: 12.5px; }
.btn .enb { color: inherit; opacity: .8; }

/* Lesson nav: prev (narrow ghost) + next (primary) */
.nav { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.nav > .btn { flex: 1 1 0; margin-top: 0; }
.nav > .btn.ghost:first-child { flex: 0 0 64px; font-size: 20px; }
/* End-of-lesson buttons */
.endbtns, .nav2 { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.endbtns > .btn, .nav2 > .btn { flex: 1 1 170px; width: auto; margin-top: 0; }
.endbtns > .btn.ghost { flex: 0 1 120px; }
/* buttons side by side: centre the label (+ English sub-label) vertically */
.nav > .btn, .endbtns > .btn, .nav2 > .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* --- Pills / toggles (option buttons inside lessons) */
.row { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: 12px; }
.row > .btn { margin-top: 0; }
.row.tight { gap: 6px; margin-top: 6px; }
.row.between { justify-content: space-between; align-items: center; gap: 4px 8px; margin-top: 0; }
.pill {
  flex: 1 1 auto; min-height: var(--tap); padding: 10px 14px; border: 1.5px solid var(--control); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font-size: 15.5px; line-height: 1.3;
  transition: border-color .15s, background-color .15s;
}
.pill:hover { border-color: var(--strong); }
.pill.on, .pill[aria-pressed="true"] { border-color: var(--strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--strong); font-weight: 700; }
.pill:disabled, .pill[disabled] { opacity: .45; cursor: default; }
.pill.hint { border-color: var(--strong); animation: t121-pulse 1.1s ease-in-out infinite; }
.row.tight .pill { padding: 8px; font-size: 14.5px; }
@keyframes t121-pulse { 50% { box-shadow: 0 0 0 5px var(--accent-ring); } }

/* --- Status boxes: g = ok, o = warning, r = not allowed, n / i = neutral info, y = tip */
.status {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-btn); border-left: 5px solid var(--strong);
  background: var(--surface-2); color: var(--ink); font-size: 16.5px;
}
.status.g { background: var(--ok-soft); border-left-color: var(--ok); }
.status.o { background: var(--warn-soft); border-left-color: var(--warn); }
.status.r { background: var(--bad-soft); border-left-color: var(--bad); }
.status.n, .status.i, .def { background: var(--surface-2); border-left-color: var(--strong); }
.status.y { background: var(--accent-soft); border-left-color: var(--accent); }
.status.sm { margin-top: var(--sp-1); padding: 9px 12px; font-size: 15.5px; }
.status ul { margin: 6px 0 0; padding-left: 20px; }
.status li { margin: 5px 0; }
.status small.hint { margin-top: var(--sp-h); }
.def { margin-top: 10px; padding: 12px 14px; border-left: 5px solid var(--strong); border-radius: var(--r-btn); }

/* --- Meters, tracks, fills, thin progress bar */
.meter { margin-top: 12px; }
.meter .lbl { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-1); color: var(--muted); font-size: 14px; }
.meter .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter .lbl b.over, .over { color: var(--bad); }
.meter .lbl small { display: block; font-size: 12px; }
.meter.off { opacity: .4; }
.track { position: relative; height: 12px; margin-top: var(--sp-h); background: var(--track); border-radius: var(--r-round); overflow: hidden; }
.track.lg { height: 16px; }
.track.sm { height: 8px; }
.fill { height: 100%; width: 0; border-radius: inherit; background: var(--strong); transition: width .35s var(--ease), background-color .3s; }
.fill.accent { background: var(--accent); box-shadow: inset 0 0 0 1px var(--fill-edge); }
.fill.ok { background: var(--ok); }    .fill.warn { background: var(--warn); }  .fill.bad { background: var(--bad); }
.fill.drive { background: var(--drive); } .fill.work { background: var(--work); } .fill.break { background: var(--break); } .fill.rest { background: var(--rest); }
.bar { height: 8px; margin: var(--sp-1) 0 var(--sp-h); background: var(--track); border-radius: var(--r-round); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; box-shadow: inset 0 0 0 1px var(--fill-edge); transition: width .3s var(--ease); }

/* --- Timeline (coloured segments) + legend */
.timeline, .tl { display: flex; height: 18px; margin-top: 10px; background: var(--track); border-radius: 6px; overflow: hidden; }
.timeline > i, .tl > i { display: block; height: 100%; transition: width .3s; }
.timeline > i + i, .tl > i + i { box-shadow: inset 1px 0 0 var(--surface); }
.sg-drive { background: var(--drive); } .sg-work { background: var(--work); } .sg-brk, .sg-break { background: var(--break); } .sg-rest { background: var(--rest); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.legend span::before {
  content: ""; display: inline-block; width: var(--w, 10px); height: var(--h, 10px); margin-right: 5px;
  border-radius: 2px; vertical-align: -1px; background: var(--c, var(--muted));
}

/* --- Flip card (tap to turn) */
.flip { margin-top: 10px; perspective: 800px; cursor: pointer; border-radius: var(--r-btn); }
.flip .in { position: relative; display: grid; min-height: 86px; transform-style: preserve-3d; transition: transform .45s var(--ease); }
.flip.on .in { transform: rotateY(180deg); }
.flip .f, .flip .b {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; padding: 12px 14px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); background: var(--surface);
}
.flip .f { border-left: 5px solid var(--accent); }
.flip .b { transform: rotateY(180deg); background: var(--surface-2); }
.flip .f b { color: var(--strong); font-size: 18px; }

/* --- Progress dots (lesson screens) */
.dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 0 12px; }
.dots i { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--line-strong); transition: width .25s, background-color .25s; }
.dots i.on { width: 24px; background: var(--strong); }

/* --- Quiz / decision options: .choice (new), button.opt (quiz), .ch (shift) */
.choice, button.opt, .ch {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: var(--sp-1) 0 0; padding: 12px 14px;
  border: 1.5px solid var(--control); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font-size: 17px; line-height: 1.35; text-align: left; transition: border-color .15s, background-color .15s;
}
.ch { display: block; font-size: 16.5px; }
.choice:hover:not(:disabled), button.opt:hover:not(:disabled), .ch:hover:not(:disabled) { border-color: var(--strong); }
.choice.sel, button.opt.sel { border-color: var(--strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--strong); }
.choice.right, button.opt.right, .ch.good { border-color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); }
.choice.wrong, button.opt.wrong, .ch.bad { border-color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
.choice:disabled, button.opt:disabled, .ch:disabled { cursor: default; }
.choice > b:first-child, button.opt > b:first-child {
  flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 15px;
}
.choice.sel > b:first-child, button.opt.sel > b:first-child { background: var(--accent); color: var(--on-accent); }
.choice.right > b:first-child, button.opt.right > b:first-child { background: var(--ok); color: var(--surface); }
.choice.wrong > b:first-child, button.opt.wrong > b:first-child { background: var(--bad); color: var(--surface); }
.q, .qq { margin: 12px 0 var(--sp-1); font-size: 19px; font-weight: 700; line-height: 1.35; }
.tr { margin: 0 0 12px; color: var(--muted); font-size: 15px; }

/* --- Explanation / feedback box */
.exp, .fb { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-btn); border-left: 5px solid var(--ok); background: var(--ok-soft); }
.exp.bad, .fb.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.fb .art, .exp .src { display: block; margin-top: var(--sp-h); color: var(--muted); font-size: 13px; }

/* --- Tag / badge */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-h); padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-round);
  background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.5; vertical-align: middle;
  max-width: 100%;
}
.tag.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tag.dark { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.tag.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.tag.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn-text); }
.tag.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }

/* --- Big numbers, inline numbers, stats */
.big { font-size: var(--fs-big); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.big .of { color: var(--muted); font-size: 17px; font-weight: 600; }
.num {
  font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); padding: 0 2px; border-radius: 2px;
  background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 94%, transparent 94%);
}
.time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.stats { display: flex; gap: var(--sp-1); margin-top: 12px; }
.stat { flex: 1 1 0; min-width: 0; padding: 10px 12px; border-radius: var(--r-btn); background: var(--surface-2); }
.stat .v { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .k { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.stat .k .en { font-size: 12px; }
.stats.lg .v { font-size: var(--fs-big); }
.pass, .text-ok { color: var(--ok); }
.fail, .text-bad { color: var(--bad); }

/* --- "To remember" box */
.keep { margin-top: 12px; padding: 14px 16px; border: 2px dashed var(--accent-text); border-radius: 14px; background: var(--accent-soft); }
.keep ul { margin: 0; padding-left: 20px; }
.keep li { margin: 8px 0; }
.keep li::marker { color: var(--accent-text); }
small.src { display: block; color: var(--muted); font-size: 12.5px; }

/* --- Story / scene box and character intro */
.story { margin-top: 12px; padding: 12px 14px 12px 16px; border-left: 4px solid var(--accent); border-radius: var(--r-btn); background: var(--surface-2); font-size: 17px; }
.who { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px; border-radius: var(--r-btn); background: var(--surface-2); }
.who .av { flex: none; font-size: 40px; line-height: 1; }

/* --- Link tiles (lists of lessons / activities) */
.tiles { display: flex; flex-direction: column; gap: var(--sp-1); }
.tile {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .1s;
}
.tile:hover { border-color: var(--strong); }
.tile:active { transform: translateY(1px); }
.tile.next { border: 2px solid var(--accent); padding: 11px 13px; }
.tile-n {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 800;
}
.tile-n svg { width: 20px; height: 20px; }
.tile.next .tile-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tile.done .tile-n { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.tile-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-btn); background: var(--accent-soft); color: var(--strong); }
.tile-ic svg { width: 26px; height: 26px; }
.tile-tx { flex: 1 1 auto; min-width: 0; }
.tile-tx > b { display: block; font-size: 16.5px; line-height: 1.3; }
.tile-tx > .tag { margin-bottom: var(--sp-h); }
.tile-d { display: block; margin-top: 2px; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.tile-meta { display: block; margin-top: 6px; }
.tile-meta .tag { border-radius: var(--r-sm); }
.tile-go { flex: none; display: grid; place-items: center; color: var(--muted); }
.tile-go svg { width: 20px; height: 20px; }

/* --- Bordered item list, calendar cells, small labels */
.items { margin: 12px 0 0; padding: 0; list-style: none; }
.items li { margin-top: var(--sp-1); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--surface); }
.cal-l { margin-top: 12px; color: var(--muted); font-size: 13px; font-weight: 600; }
.calrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.cell {
  min-width: 0; min-height: 56px; padding: 4px 1px; border: 1.5px solid var(--control); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-size: 12.5px; line-height: 1.3; text-align: center;
}
.cell .ic { display: block; font-size: 16px; line-height: 1.4; }
.cell.on { border-color: var(--strong); box-shadow: inset 0 0 0 2px var(--strong); font-weight: 700; }

/* --- Accordion */
.acc { margin-top: var(--sp-1); border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--surface); overflow: hidden; }
.acc.on { border-color: var(--strong); }
.acc > button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 0; background: transparent; color: var(--ink); font-size: 16px; text-align: left;
}
.acc > button::after { content: "+"; margin-left: auto; color: var(--accent-text); font-size: 20px; font-weight: 800; line-height: 1; }
.acc.on > button::after { content: "\2013"; }
.acc > button:focus-visible { outline-offset: -4px; box-shadow: none; }
.acc .bd { display: none; padding: 0 14px 12px; font-size: 15.5px; }
.acc.on .bd { display: block; }

/* --- Slider */
input[type=range] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--tap); margin: 12px 0 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-round); background: var(--track); box-shadow: inset 0 0 0 1px var(--line-strong); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--on-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
input[type=range]::-moz-range-track { height: 8px; border-radius: var(--r-round); background: var(--track); }
input[type=range]::-moz-range-progress { height: 8px; border-radius: var(--r-round); background: var(--strong); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--on-accent); }
input[type=range]:focus-visible { outline-offset: 0; box-shadow: none; border-radius: var(--r-btn); }

/* --- Text helpers */
.lead { font-size: var(--fs-lead); }
.en { display: block; color: var(--muted); font-size: 14.5px; font-weight: 400; }
.muted { color: var(--muted); font-size: 14.5px; }
small.hint, p.hint { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: 13.5px; }
p.hint { margin-bottom: 0; }

/* --- Illustrations (inline SVG drawings in lessons) */
svg.ill { display: block; width: 100%; max-width: var(--ill-max, 440px); height: auto; margin: 12px auto 0; font-family: var(--font); }
svg text { font-family: var(--font); }

/* ===================================================================== 6. UTILITIES */
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--sp-1) !important; } .mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; } .mt-4 { margin-top: var(--sp-4) !important; }
.checker { background: #F5C518; background: var(--checker); }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.en-only { display: none !important; }
html[data-en="1"] .en-only { display: revert !important; }
html[data-en="1"] .fr-only { display: none !important; }

/* ===================================================================== 7. MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Chapter colours in dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c1: #6FC9BC; --c1-soft: #1B3532; --c2: #8DB0F2; --c2-soft: #1C2A44; --c3: #B9A1EC; --c3-soft: #2A2240; --c4: #F0B06A; --c4-soft: #3A2A17; --c5: #7FD49C; --c5-soft: #18301F; }
}
:root[data-theme="dark"] { --c1: #6FC9BC; --c1-soft: #1B3532; --c2: #8DB0F2; --c2-soft: #1C2A44; --c3: #B9A1EC; --c3-soft: #2A2240; --c4: #F0B06A; --c4-soft: #3A2A17; --c5: #7FD49C; --c5-soft: #18301F; }

/* Dark mode: tokens used on the dark app bar and hero that were only defined for light mode (text was almost invisible). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --on-appbar: #EDEDED; --on-hero: #EDEDED; --appbar-line: #33373D; --appbar-hover: rgba(255, 255, 255, .07); --hero-2: #2A2E34; }
}
:root[data-theme="dark"] { --on-appbar: #EDEDED; --on-hero: #EDEDED; --appbar-line: #33373D; --appbar-hover: rgba(255, 255, 255, .07); --hero-2: #2A2E34; }
/* Light mode: the active tab label in taxi yellow on cream was unreadable (1.5:1); use the dark accent text, keep the yellow bar. */
:root[data-theme="light"] .tab[aria-current="page"] { color: var(--accent-text); }

/* logo colours per theme */
:root[data-theme="dark"] { --lg-num: #F5C518; --lg-k: #2B2E33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lg-num: #F5C518; --lg-k: #2B2E33; } }

/* visually hidden, still read by screen readers */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Dark frame: top and bottom bars are always charcoal; only the content follows light/dark ---------- */
:root[data-theme] {
  --appbar: #1F2226 !important; --on-appbar: #F5EFE2 !important; --appbar-muted: #A9ADB3 !important; --appbar-line: rgba(255, 255, 255, .10) !important; --appbar-hover: rgba(255, 255, 255, .07) !important;
  --lg-num: #F5C518 !important; --lg-k: #2B2E33 !important;
}
:root[data-theme="dark"] { --appbar: #1E2126 !important; }   /* a touch lighter than the dark content, so the frame still reads */
.appbar { background: var(--appbar) !important; color: var(--on-appbar); border-bottom: 1px solid rgba(255, 255, 255, .08) !important; }
.appbar-btn { border-color: rgba(255, 255, 255, .18) !important; color: var(--on-appbar) !important; }
@media (max-width: 899px) {
  .tabbar { background: var(--appbar) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 -6px 20px rgba(0, 0, 0, .18) !important; }
  .tab { color: var(--appbar-muted) !important; }
  .tab[aria-current="page"] { color: #F5C518 !important; }
  .tab[aria-current="page"]::after { background: rgba(245, 197, 24, .16) !important; box-shadow: inset 0 0 0 1px rgba(245, 197, 24, .35) !important; }
}

/* Settings gear in the app bar (a link, styled like the buttons) */
.set-btn { text-decoration: none; }
.set-btn[aria-current="page"] { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.set-btn svg { transition: transform .4s ease; } .set-btn:hover svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .set-btn svg { transition: none; } }

/* Text size (Réglages): scales the page content; the app bar and tab bar keep their size */
html[data-fs] main { zoom: var(--fz, 1); }
/* ...and the pop-ups that live outside <main> (glossary sheet, welcome slides, tour and tip cards). Their boxes are
   positioned by script, so only their contents are scaled. */
html[data-fs] .gl-card, html[data-fs] .ob-s, html[data-fs] .ob-tip > *, html[data-fs] .ob-toast > * { zoom: var(--fz, 1); }