/* ==========================================================================
   Wortklar — design system
   Source de vérité : designv2.md, section 4. Les composants n'emploient que
   les variables sémantiques définies ici, jamais une couleur écrite en dur.
   ========================================================================== */

/* ---------- 1. Tokens primitifs (designv2.md) ---------- */

:root {
  /* Brand */
  --color-primary-700: #0756B8;
  --color-primary-600: #0879DC;
  --color-primary-500: #1095F1;
  --color-primary-100: #DCEEFF;
  --color-primary-050: #F2F8FF;

  /* Ink */
  --color-ink-900: #0B1833;
  --color-ink-700: #2C4265;
  --color-ink-500: #667795;
  --color-ink-300: #9AA8BC;

  /* Surfaces */
  --color-white: #FFFFFF;
  --color-canvas: #F8FBFF;
  --color-border: #E3EAF3;
  --color-disabled: #DDE4EC;

  /* Feedback */
  --color-success-600: #20A96B;
  --color-success-100: #DDF7E9;
  --color-warning-600: #E89B12;
  --color-warning-100: #FFF1CE;
  --color-danger-600: #D9435F;
  --color-danger-100: #FFE3E8;
  --color-info-100: #DFF4FF;

  /* Module accents */
  --module-learn: #1487E8;
  --module-learn-bg: #E9F5FF;
  --module-agentur: #C2417F;
  --module-agentur-bg: #FDEDF5;
  --module-grammar: #E65B62;
  --module-grammar-bg: #FFF0EB;
  --module-interview: #7A3FC1;
  --module-interview-bg: #F4ECFF;
  --module-course: #087D99;
  --module-course-bg: #E6F8FA;
  --module-review: #11815B;
  --module-review-bg: #E9F9EF;
  --module-library: #B77A08;
  --module-library-bg: #FFF4DF;
  --module-shadow: #D9591B;
  --module-shadow-bg: #FFF0E4;
  --module-lengura: #4F46E5;
  --module-lengura-bg: #EEF0FF;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(11 24 51 / 0.05);
  --shadow-md: 0 8px 24px rgb(34 65 110 / 0.08);
  --shadow-focus: 0 0 0 3px rgb(16 149 241 / 0.28);

  /* Spacing — base 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* ---- Compléments au système ----
     Nuances plus sombres pour le texte : les 600 de la palette ne tiennent
     pas 4,5:1 en petit corps sur fond clair. */
  --color-success-700: #127A4C;
  --color-warning-700: #8F5E08;
  --color-danger-700: #B42845;
  --color-sun-400: #F6C343;
  --color-sun-500: #EFB321;
  --color-mist: #EEF3F9;
  --module-verbs: #C2417F;
  --module-verbs-bg: #FDEBF4;
  --flag-black: #1B1B1B;
  --flag-red: #DD0000;
  --flag-gold: #FFCE00;

  /* Typographie */
  --font-sans: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-hand: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Brush Script MT", cursive;
  --text-scale: 1;
  --text-display: calc(42px * var(--text-scale));
  --text-h1: calc(34px * var(--text-scale));
  --text-h2: calc(24px * var(--text-scale));
  --text-h3: calc(18px * var(--text-scale));
  --text-body-lg: calc(18px * var(--text-scale));
  --text-body: calc(16px * var(--text-scale));
  --text-small: calc(14px * var(--text-scale));
  --text-label: calc(13px * var(--text-scale));

  /* Structure */
  --sidebar-width: 232px;
  --header-height: 64px;
  --content-max: 1440px;
}

/* ---------- 2. Tokens sémantiques ---------- */

:root {
  color-scheme: light;
  --bg-canvas: var(--color-canvas);
  --bg-surface: var(--color-white);
  --bg-subtle: var(--color-primary-050);
  --bg-muted: var(--color-mist);
  --line: var(--color-border);
  --line-strong: var(--color-disabled);
  --text-strong: var(--color-ink-900);
  --text-body: var(--color-ink-700);
  --text-muted: var(--color-ink-500);
  --text-faint: var(--color-ink-300);
  --text-on-accent: var(--color-white);
  --accent: var(--color-primary-600);
  --accent-hover: var(--color-primary-700);
  --accent-text: var(--color-primary-700);
  --accent-soft: var(--color-primary-100);
  --accent-softer: var(--color-primary-050);
  --success: var(--color-success-600);
  --success-text: var(--color-success-700);
  --success-soft: var(--color-success-100);
  --warning: var(--color-warning-600);
  --warning-text: var(--color-warning-700);
  --warning-soft: var(--color-warning-100);
  --danger: var(--color-danger-600);
  --danger-text: var(--color-danger-700);
  --danger-soft: var(--color-danger-100);
  --info-soft: var(--color-info-100);
  --sun: var(--color-sun-400);
  --sun-hover: var(--color-sun-500);
  --overlay: rgb(11 24 51 / 0.45);
  --avatar-bg: var(--color-ink-900);
  --genre-der: var(--color-primary-700);
  --genre-die: var(--color-danger-700);
  --genre-das: var(--color-success-700);
  --genre-pluriel: var(--color-ink-500);
  --auxiliaire-ist: var(--color-warning-700);
  --auxiliaire-hat: var(--color-primary-700);
  --skeleton: var(--color-mist);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #0A1222;
  --bg-surface: #111B2E;
  --bg-subtle: #14233A;
  --bg-muted: #1A2840;
  --line: #24344F;
  --line-strong: #33466A;
  --text-strong: #EEF3FB;
  --text-body: #C9D4E6;
  --text-muted: #9AAAC4;
  --text-faint: #64748F;
  --text-on-accent: #FFFFFF;
  --accent: #1F74C8;
  --accent-hover: #2C86DD;
  --accent-text: #86C3F8;
  --accent-soft: #16304F;
  --accent-softer: #122640;
  --success: #34C27F;
  --success-text: #74DBA8;
  --success-soft: #10301F;
  --warning: #F0B03E;
  --warning-text: #F5CB7C;
  --warning-soft: #33270F;
  --danger: #F07088;
  --danger-text: #F6A1B1;
  --danger-soft: #3A1621;
  --info-soft: #102B40;
  --sun: #F6C343;
  --sun-hover: #FFD466;
  --overlay: rgb(0 4 12 / 0.6);
  --avatar-bg: #2C86DD;
  --genre-der: #8AC0F7;
  --genre-die: #F6A1B1;
  --genre-das: #7FD9A9;
  --genre-pluriel: #9AAAC4;
  --auxiliaire-ist: #F5CB7C;
  --auxiliaire-hat: #8AC0F7;
  --skeleton: #1A2840;
  --module-learn: #5AB0F5;
  --module-learn-bg: #102640;
  --module-agentur: #EE8FBF;
  --module-agentur-bg: #3A1B2C;
  --module-grammar: #F08A8F;
  --module-grammar-bg: #361C1E;
  --module-interview: #B690EA;
  --module-interview-bg: #251B39;
  --module-course: #4CC6DB;
  --module-course-bg: #0E2B33;
  --module-review: #4FCB96;
  --module-review-bg: #0F2B20;
  --module-library: #E8B754;
  --module-library-bg: #32260E;
  --module-shadow: #FF9A5C;
  --module-shadow-bg: #3A2212;
  --module-lengura: #A5B4FC;
  --module-lengura-bg: #23264D;
  --module-verbs: #EE8ABD;
  --module-verbs-bg: #361629;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 10px 28px rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg-canvas: #0A1222;
    --bg-surface: #111B2E;
    --bg-subtle: #14233A;
    --bg-muted: #1A2840;
    --line: #24344F;
    --line-strong: #33466A;
    --text-strong: #EEF3FB;
    --text-body: #C9D4E6;
    --text-muted: #9AAAC4;
    --text-faint: #64748F;
    --text-on-accent: #FFFFFF;
    --accent: #1F74C8;
    --accent-hover: #2C86DD;
    --accent-text: #86C3F8;
    --accent-soft: #16304F;
    --accent-softer: #122640;
    --success: #34C27F;
    --success-text: #74DBA8;
    --success-soft: #10301F;
    --warning: #F0B03E;
    --warning-text: #F5CB7C;
    --warning-soft: #33270F;
    --danger: #F07088;
    --danger-text: #F6A1B1;
    --danger-soft: #3A1621;
    --info-soft: #102B40;
    --sun: #F6C343;
    --sun-hover: #FFD466;
    --overlay: rgb(0 4 12 / 0.6);
    --avatar-bg: #2C86DD;
    --genre-der: #8AC0F7;
    --genre-die: #F6A1B1;
    --genre-das: #7FD9A9;
    --genre-pluriel: #9AAAC4;
    --auxiliaire-ist: #F5CB7C;
    --auxiliaire-hat: #8AC0F7;
    --skeleton: #1A2840;
    --module-learn: #5AB0F5;
    --module-learn-bg: #102640;
    --module-grammar: #F08A8F;
    --module-grammar-bg: #361C1E;
    --module-interview: #B690EA;
    --module-interview-bg: #251B39;
    --module-course: #4CC6DB;
    --module-course-bg: #0E2B33;
    --module-review: #4FCB96;
    --module-review-bg: #0F2B20;
    --module-library: #E8B754;
    --module-library-bg: #32260E;
    --module-shadow: #FF9A5C;
    --module-shadow-bg: #3A2212;
    --module-verbs: #EE8ABD;
    --module-verbs-bg: #361629;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
    --shadow-md: 0 10px 28px rgb(0 0 0 / 0.35);
  }
}

:root[data-text-size="large"] { --text-scale: 1.125; }
:root[data-text-size="xlarge"] { --text-scale: 1.25; }

/* ---------- 3. Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg-canvas);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-canvas);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon {
  width: 20px;
  height: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

/* ---------- 4. Typographie ---------- */

.display {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.08;
}

.overline {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 650;
  line-height: 1.3;
}

.lead {
  max-width: 70ch;
  color: var(--text-body);
  font-size: var(--text-body-lg);
  line-height: 1.5;
}

.field-help,
.fine-print {
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.45;
}

.fine-print {
  font-size: var(--text-label);
}

.result-count {
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* ---------- 5. Shell ---------- */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: var(--space-6) var(--space-4) var(--space-6);
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-subtle), var(--bg-canvas) 60%);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
}

.brand:hover {
  background: var(--accent-softer);
}

.brand-symbol {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--flag-black) 0 34%, var(--flag-red) 34% 67%, var(--flag-gold) 67%);
  box-shadow: inset 0 -3px 6px rgb(0 0 0 / 0.18), 0 1px 2px rgb(11 24 51 / 0.2);
}

.brand-symbol::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.38), transparent 45%);
  content: "";
}

.brand-text {
  display: grid;
  line-height: 1.15;
}

.brand-text strong {
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-text small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-label);
}

.sidebar-nav {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-8);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-body);
  font-size: var(--text-body);
  font-weight: 550;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.nav-item .icon {
  width: 22px;
  height: 22px;
  color: var(--text-muted);
}

.nav-item:hover {
  background: var(--accent-softer);
  color: var(--text-strong);
}

.nav-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--text-strong);
  font-weight: 650;
}

.nav-item[aria-current="page"] .icon {
  color: var(--accent);
}

.sidebar-quote {
  margin: auto 0 0;
  padding: var(--space-6) var(--space-3) 0;
  text-align: center;
}

.sidebar-quote blockquote {
  margin: 0;
  color: var(--text-body);
  font-size: var(--text-body);
  font-style: italic;
  line-height: 1.45;
}

.sidebar-quote figcaption {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-small);
  font-style: italic;
}

.main-column {
  min-width: 0;
}

.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: var(--space-6) var(--space-8) var(--space-4);
}

.mobile-brand {
  display: none;
}

.page-heading h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.15;
}

.page-heading h1:focus {
  box-shadow: none;
}

.page-heading p {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-body);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.global-search {
  position: relative;
  width: clamp(240px, 26vw, 340px);
}

.global-search > .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.global-search input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.global-search input::placeholder {
  color: var(--text-muted);
}

.global-search input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.global-search input::-webkit-search-cancel-button {
  display: none;
}

.search-kbd {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

.global-search input:focus ~ .search-kbd {
  display: none;
}

.search-toggle {
  display: none;
}

.search-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  padding: var(--space-2);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.search-group + .search-group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.search-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-3) var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 650;
}

.search-group-title .icon {
  width: 16px;
  height: 16px;
}

.search-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.search-option strong {
  overflow: hidden;
  color: var(--text-strong);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-option small {
  grid-column: 1;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-option .badge {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.search-option[aria-selected="true"],
.search-option:hover {
  background: var(--accent-softer);
}

.search-option[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--accent);
}

.search-empty {
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-small);
  text-align: center;
}

.account {
  position: relative;
}

.account-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 2px var(--space-2) 2px 2px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  text-align: left;
}

.account-button:hover {
  background: var(--accent-softer);
}

.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
}

.account-text {
  display: grid;
  line-height: 1.2;
}

.account-text strong {
  color: var(--text-strong);
  font-size: var(--text-body);
  font-weight: 700;
}

.account-text small {
  color: var(--text-body);
  font-size: var(--text-small);
}

.account-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.account-button[aria-expanded="true"] .account-chevron {
  transform: rotate(180deg);
}

.account-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  width: 260px;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.account-menu-note {
  margin: var(--space-2) var(--space-3) var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-label);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-strong);
  font-size: var(--text-small);
  font-weight: 550;
  text-align: left;
}

.menu-item .icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.menu-item:hover {
  background: var(--accent-softer);
}

.main-content {
  width: min(100%, var(--content-max));
  min-width: 0;
  margin-inline: auto;
  padding: var(--space-2) var(--space-8) var(--space-12);
}

.main-content:focus {
  box-shadow: none;
}

.system-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(calc(100% - 64px), calc(var(--content-max) - 64px));
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--info-soft);
  color: var(--text-strong);
  font-size: var(--text-small);
}

.view:not([hidden]) {
  animation: page-fade var(--duration-normal) var(--ease-standard) both;
}

@keyframes page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-narrow {
  width: min(100%, 800px);
  margin-inline: auto;
}

/* Écriture libre : le texte reste le centre de l'écran, les consignes sont
   visibles sans transformer l'exercice en table large ou en pseudo-examen. */
/* Ces trois modules assemblent leurs cartes au cas par cas : le respir vient
   du conteneur de vue, sinon chaque carte renaît sans padding. */
.free-writing .card,
.einbuergerungstest .card,
#view-errors > .card {
  padding: var(--space-6);
}
.free-writing { display: grid; gap: var(--space-6); }
.free-writing-intro, .free-writing-brief, .free-writing-editor, .free-writing-result { display: grid; gap: var(--space-4); }
.free-writing-groups { display: grid; gap: var(--space-8); }
.free-writing-group-title { margin: 0 0 var(--space-4); font-size: var(--text-h2); }
.free-writing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.free-writing-topic { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.free-writing-topic h3 { margin: 0; font-size: var(--text-h3); }
.free-writing-topic p { margin: 0; color: var(--text-muted); }
.free-writing-toolbar, .free-writing-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.free-writing-toolbar { justify-content: space-between; }
.free-writing-brief ul, .free-writing-rubric { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.free-writing-text { width: 100%; min-height: 300px; resize: vertical; font: inherit; line-height: 1.65; }
.free-writing-points, .free-writing-errors { display: grid; gap: var(--space-3); }
.check-row { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--text-body); }
.check-row input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.check-row small { display: block; margin-top: var(--space-1); color: var(--text-muted); }
.free-writing-corrected { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-muted); white-space: pre-wrap; line-height: 1.65; }
.free-writing-score { margin: 0; color: var(--accent-text); }
.free-writing-score strong { font-size: var(--text-h2); }

@media (max-width: 640px) {
  .free-writing-grid { grid-template-columns: 1fr; }
  .free-writing-actions .button { width: 100%; justify-content: center; }
  .free-writing-text { min-height: 260px; }
}

/* Infobulles des icônes seules, sur la barre compacte et les boutons. */
[data-tooltip] {
  position: relative;
}

@media (hover: hover) {
  .icon-button[data-tooltip]:hover::after,
  .icon-button[data-tooltip]:focus-visible::after {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 70;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--text-strong);
    color: var(--bg-surface);
    content: attr(data-tooltip);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
  }
}

/* ---------- 6. Composants ---------- */

/* Boutons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-strong);
  font-size: var(--text-small);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.button .icon {
  width: 18px;
  height: 18px;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button:disabled {
  opacity: 0.5;
}

.button--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.button--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.button--secondary {
  border-color: var(--line);
  background: var(--bg-surface);
  color: var(--text-strong);
}

.button--secondary:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-softer);
}

.button--ghost {
  background: transparent;
  color: var(--accent-text);
}

.button--ghost:hover:not(:disabled) {
  background: var(--accent-softer);
}

.button--danger {
  border-color: var(--danger-soft);
  background: var(--bg-surface);
  color: var(--danger-text);
}

.button--danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.button--danger-solid {
  background: var(--danger-text);
  color: var(--color-white);
}

.button--danger-solid:hover:not(:disabled) {
  background: var(--danger);
}

.button--sun {
  background: var(--sun);
  color: var(--color-ink-900);
}

.button--sun:hover:not(:disabled) {
  background: var(--sun-hover);
}

.button--lg {
  min-height: 52px;
  padding: 0 var(--space-6);
  font-size: var(--text-body);
}

.button--block {
  width: 100%;
}

.button[aria-busy="true"] {
  position: relative;
  color: transparent;
}

.button[aria-busy="true"]::after {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--text-on-accent);
  content: "";
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.link-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-text);
  font-size: var(--text-small);
  font-weight: 600;
}

.link-button:hover {
  text-decoration: underline;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-body);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.icon-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-softer);
  color: var(--accent-text);
}

.icon-button:disabled {
  opacity: 0.45;
}

.icon-button--ghost {
  border-color: transparent;
  background: transparent;
}

.icon-button[aria-pressed="true"] {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning-text);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.button-row--center {
  justify-content: center;
}

/* Cartes */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.card--success {
  border-color: transparent;
  background: var(--success-soft);
  box-shadow: none;
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-header .link-button,
.card-header .level-goal {
  margin-left: auto;
}

.card-header--stacked {
  align-items: flex-start;
}

.card-title {
  font-size: var(--text-h3);
  font-weight: 750;
  line-height: 1.35;
}

.card-subtitle {
  margin-top: 2px;
  color: var(--accent-text);
  font-size: var(--text-small);
}

.card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--accent);
}

.card-icon .icon {
  width: 26px;
  height: 26px;
}

.card-icon--goal { color: var(--danger); }
.card-icon--success { color: var(--success); }
.card-icon--primary { color: var(--accent); }
.card-icon--interview { color: var(--module-interview); }

/* Badges et pastilles */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 650;
  white-space: nowrap;
}

.badge .icon {
  width: 14px;
  height: 14px;
}

.badge--level {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.badge--success {
  background: var(--success-soft);
  color: var(--success-text);
}

.badge--warning {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.badge--danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}

.badge--status[data-statut="new"] { background: var(--accent-softer); color: var(--accent-text); }
.badge--status[data-statut="fragile"] { background: var(--warning-soft); color: var(--warning-text); }
.badge--status[data-statut="learning"] { background: var(--info-soft); color: var(--text-strong); }
.badge--status[data-statut="mastered"] { background: var(--success-soft); color: var(--success-text); }

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 700;
}

/* Onglets et pastilles de filtre */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-4);
}

.tab,
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-strong);
  font-size: var(--text-small);
  font-weight: 600;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.tab small,
.chip span {
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tab:hover,
.chip:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-softer);
}

.tab[aria-selected="true"],
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.tab[aria-selected="true"] small,
.chip[aria-pressed="true"] span {
  color: var(--accent-text);
}

.chip:disabled {
  opacity: 0.45;
  cursor: default;
}

.tab .icon {
  width: 16px;
  height: 16px;
}

.tab .tab-done {
  color: var(--success);
}

.tabs--compact {
  margin: var(--space-3) 0;
}

/* Une bande qui défile au lieu de s'empiler : le cours compte vingt et une journées. */
.tabs--defilement {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
}

/* La journée coupée au bord droit ressemble à une troncature : un fondu du
   contenu marque « la bande continue ». Le fondu vit sur le cadre (jamais
   défilant), sinon ses pourcentages se calculaient sur les 3 000 px de
   contenu au lieu des 1 100 px visibles. Le côté fondu suit la position de
   défilement, annoncée par data-defile (annoncerDefilement, app.js). */
.tabs-cadre { min-width: 0; }

.tabs-cadre[data-defile="debut"] {
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}

.tabs-cadre[data-defile="fin"] {
  mask-image: linear-gradient(90deg, transparent, #000 36px);
}

.tabs-cadre[data-defile="milieu"] {
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

.tabs--defilement .tab {
  flex: none;
  scroll-snap-align: start;
}

.tabs--compact .tab {
  min-height: 38px;
}

.chip-group,
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-list li {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-strong);
  font-size: var(--text-small);
}

/* ---------- La porte d'entrée ---------- */

.porte {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-5);
  /* La même lumière que le tableau de bord : une aube bleue douce derrière
     la carte, au lieu d'un canvas nu. */
  background:
    radial-gradient(110% 60% at 50% -12%, var(--color-primary-100), transparent 60%),
    var(--bg-canvas);
}

.porte-carte {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 420px);
  padding: clamp(var(--space-5), 5vw, var(--space-8));
}

.brand--porte {
  justify-self: start;
  pointer-events: none;
}

.porte-titre {
  margin-top: var(--space-2);
  font-size: var(--text-h1);
  font-weight: 800;
  color: var(--text-strong);
}

.porte-carte form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

.porte-profil {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.porte-profil[hidden] { display: none; }

.porte-profil legend {
  padding: 0 var(--space-2);
  color: var(--text-strong);
  font-weight: 750;
}

.avatar img,
.home-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.porte-carte .local-note {
  margin: 0;
}

.sync-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 650;
  white-space: nowrap;
}

.sync-state[data-etat="envoi"] {
  background: var(--accent-softer);
  color: var(--accent-text);
}

.sync-state[data-etat="hors-ligne"] {
  background: var(--warning-soft);
  color: var(--warning-text);
}

@media (max-width: 767px) {
  .sync-state {
    display: none;
  }
}

.backup-state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-body);
  font-size: var(--text-small);
  font-weight: 600;
}

.backup-state[data-alerte="true"] {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.chip-list li.chip-empty {
  background: none;
  color: var(--text-muted);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-label);
  font-weight: 600;
}

.active-filter span {
  opacity: 0.75;
}

.active-filter .icon {
  width: 14px;
  height: 14px;
}

.active-filter--reset {
  border-color: var(--line);
  background: var(--bg-surface);
  color: var(--text-body);
}

.segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  margin-bottom: var(--space-5);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
}

.segmented button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font-size: var(--text-small);
  font-weight: 600;
}

.segmented button[aria-pressed="true"] {
  background: var(--bg-surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

/* Progression */

.progress {
  position: relative;
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--duration-slow) var(--ease-standard);
}

.progress--success .progress-fill { background: var(--success); }
.progress--primary .progress-fill { background: linear-gradient(90deg, var(--color-primary-500), var(--accent)); }
.progress--thin { height: 6px; }

.progress-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.progress-value {
  color: var(--text-strong);
  font-size: var(--text-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}

.ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  stroke: var(--line-strong);
  stroke-width: 6;
}

.ring-value-arc {
  stroke: var(--ring-color, var(--accent));
  stroke-width: 6;
  transition: stroke-dashoffset var(--duration-slow) var(--ease-standard);
}

.ring-label {
  position: relative;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Formulaires */

.field {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  min-width: 0;
}

.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  font-size: var(--text-small);
  font-weight: 600;
}

.field-label span,
.field-label output {
  color: var(--text-muted);
  font-weight: 500;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-strong);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.select {
  padding-right: var(--space-10);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.textarea {
  padding: var(--space-3) var(--space-4);
  line-height: 1.55;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input:hover,
.select:hover:not(:disabled),
.textarea:hover {
  border-color: var(--line-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.select:disabled {
  opacity: 0.65;
}

.input--short {
  width: min(100%, 180px);
}

.form-grid {
  display: grid;
  gap: 0 var(--space-4);
}

.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.search-field {
  position: relative;
  flex: 1 1 auto;
}

.search-field > .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.search-field .input {
  padding-left: 42px;
}

.toolbar {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

.toolbar--split {
  margin-top: 0;
}

.range {
  width: 100%;
  min-height: 32px;
  margin: 0;
  accent-color: var(--accent);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 64px;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.toggle-row span {
  display: grid;
}

.toggle-row strong {
  color: var(--text-strong);
  font-size: var(--text-small);
  font-weight: 650;
}

.toggle-row small {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.toggle-row input {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  appearance: none;
  background: var(--line-strong);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.toggle-row input::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  content: "";
  transition: transform var(--duration-fast) var(--ease-standard);
}

.toggle-row input:checked {
  background: var(--accent);
}

.toggle-row input:checked::after {
  transform: translateX(20px);
}

.day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.day-picker label {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-body);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}

.day-picker input {
  position: absolute;
  opacity: 0;
}

.day-picker label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.day-picker label:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}

/* Messages */

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--text-strong);
  font-size: var(--text-small);
}

.notice > div {
  flex: 1 1 220px;
}

.notice p {
  color: var(--text-body);
}

.notice--info { background: var(--info-soft); }
.notice--success,
.notice[data-tone="ok"],
.notice[data-ton="ok"] { background: var(--success-soft); color: var(--success-text); }
.notice--error,
.notice[data-tone="error"],
.notice[data-ton="error"] { background: var(--danger-soft); color: var(--danger-text); }
.notice--compact { padding: var(--space-3); }

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feedback {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-muted);
  color: var(--text-strong);
  font-size: var(--text-small);
}

.feedback .icon {
  width: 18px;
  height: 18px;
}

.feedback[data-etat="juste"] {
  border-left-color: var(--success);
  background: var(--success-soft);
  color: var(--success-text);
}

.feedback[data-etat="faux"] {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-text);
}

.local-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--success-text);
  font-size: var(--text-small);
  font-weight: 600;
}

.local-note .icon {
  width: 18px;
  height: 18px;
}

.empty-state,
.empty-list {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
  text-align: center;
}

.empty-state .icon {
  width: 36px;
  height: 36px;
  color: var(--text-faint);
}

.empty-state strong {
  color: var(--text-strong);
  font-size: var(--text-h3);
}

.state-panel {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 520px;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  text-align: center;
}

.state-panel > .icon {
  width: 40px;
  height: 40px;
  color: var(--warning);
}

.state-panel p {
  color: var(--text-muted);
}

/* Squelettes de chargement */

.skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--bg-surface) 50%, var(--skeleton) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton--hero { height: 220px; }
.skeleton--card { height: 150px; }
.skeleton--tall { height: 420px; }

.skeleton-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.skeleton-row--main {
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.9fr);
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* Dialogues */

.dialog {
  width: min(calc(100% - 32px), 560px);
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-body);
  box-shadow: var(--shadow-md);
}

.dialog--wide {
  width: min(calc(100% - 32px), 760px);
}

.dialog::backdrop {
  background: var(--overlay);
}

.dialog[open] {
  animation: dialog-in var(--duration-normal) var(--ease-standard) both;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.dialog form,
.dialog-body {
  padding: var(--space-6);
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.dialog-header h2 {
  font-size: var(--text-h2);
  font-weight: 750;
  line-height: 1.25;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.dialog-close-row {
  display: flex;
  justify-content: flex-end;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
  padding: 0 !important;
}

.sheet {
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--bg-surface);
  color: var(--text-body);
  box-shadow: var(--shadow-md);
}

.sheet::backdrop {
  background: var(--overlay);
}

.sheet[open] {
  animation: sheet-in var(--duration-normal) var(--ease-standard) both;
}

@keyframes sheet-in {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.sheet-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-h3);
  font-weight: 750;
}

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-strong);
  font-weight: 650;
  text-align: left;
}

.sheet-item[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-softer);
}

/* Toast et activité vocale */

.toast {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 120;
  max-width: min(380px, calc(100% - 48px));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-md);
  font-size: var(--text-small);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

.voice-activity {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: var(--shadow-md);
  font-size: var(--text-label);
  font-weight: 650;
  pointer-events: none;
  transform: translateX(-50%);
}

.voice-activity::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Divulgations */

.disclosure-card {
  margin-top: var(--space-5);
  overflow: hidden;
}

.disclosure-card > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-5);
  color: var(--text-strong);
  list-style: none;
  cursor: pointer;
}

.disclosure-card > summary::-webkit-details-marker {
  display: none;
}

.disclosure-card > summary:hover {
  background: var(--accent-softer);
}

.disclosure-card > summary strong {
  font-weight: 650;
}

.disclosure-chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.disclosure-card[open] .disclosure-chevron {
  transform: rotate(180deg);
}

.disclosure-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-top: 1px solid var(--line);
}

.info-disclosure {
  margin-top: var(--space-3);
}

.info-disclosure summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  color: var(--accent-text);
  font-size: var(--text-label);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.info-disclosure summary::-webkit-details-marker {
  display: none;
}

.info-disclosure summary .icon {
  width: 16px;
  height: 16px;
}

.info-disclosure p {
  color: var(--text-muted);
  font-size: var(--text-label);
}

/* Listes */

.bullet-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.bullet-list li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--text-body);
  line-height: 1.55;
}

.bullet-list li::before {
  position: absolute;
  top: 9px;
  left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.fact-list {
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.fact-list li {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.fact-list span {
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 650;
}

.fact-list p {
  color: var(--text-body);
  font-size: var(--text-small);
  line-height: 1.55;
}

/* Citations et phrases allemandes */

.quote-line,
.example-pair {
  position: relative;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-12) var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-subtle);
}

.quote-line p,
.example-pair p {
  max-width: 68ch;
  color: var(--text-strong);
  font-size: var(--text-body-lg);
  line-height: 1.5;
}

.quote-line footer,
.example-pair footer {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.example-speak {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: var(--space-1);
  padding: 0;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.example-speak svg,
.example-speak .icon {
  width: 16px;
  height: 16px;
}

.example-speak:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.example-pair > .example-speak {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  margin: 0;
}

.example-block {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.example-block--work {
  background: var(--module-course-bg);
}

.example-block-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--text-strong);
  font-size: var(--text-label);
  font-weight: 650;
}

.example-block-label .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.example-block--work .example-block-label .icon {
  color: var(--module-course);
}

.example-line + .example-line {
  margin-top: var(--space-3);
}

.example-line > p:first-child {
  color: var(--text-strong);
  font-size: var(--text-body);
  line-height: 1.55;
}

.example-fr {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* Mots reconnus */

.lien {
  padding: 0 1px;
  border-radius: 3px;
  background: none;
  color: inherit;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.lien--vocab {
  text-decoration-color: var(--accent);
}

.lien--grammaire {
  text-decoration-color: var(--warning);
  text-decoration-style: dashed;
}

.lien:hover,
.lien:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.lien--grammaire:hover,
.lien--grammaire:focus-visible {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.bulle {
  position: fixed;
  z-index: 130;
  display: grid;
  gap: 3px;
  max-width: min(300px, calc(100vw - 24px));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.bulle-etiquette {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 650;
}

.bulle-etiquette--grammaire {
  color: var(--warning-text);
}

.bulle strong {
  color: var(--text-strong);
  font-size: var(--text-body);
  font-weight: 700;
}

.bulle-fr {
  color: var(--text-body);
  font-size: var(--text-small);
}

.bulle-note {
  color: var(--text-muted);
  font-size: var(--text-label);
}

/* Genres, auxiliaires, trous */

.genre { font-weight: 800; }
.genre--der { color: var(--genre-der); }
.genre--die { color: var(--genre-die); }
.genre--das { color: var(--genre-das); }
.genre--pluriel { color: var(--genre-pluriel); }

.auxiliaire { font-weight: 750; }
.auxiliaire--ist { color: var(--auxiliaire-ist); }
.auxiliaire--hat { color: var(--auxiliaire-hat); }

.trou {
  display: inline-block;
  min-width: 4.5em;
  margin: 0 0.15em;
  border-bottom: 2px solid var(--accent);
}

.carte-image {
  margin: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(3rem, 9vw, 4.25rem);
  line-height: 1.1;
}

/* ---------- 7. Tableau de bord ---------- */

.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.hero {
  position: relative;
  min-height: clamp(220px, 20vw, 268px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-ink-700);
}

.hero-art,
.hero-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-art svg {
  stroke: none;
}

.hero-content::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(11 24 51 / 0.58) 0%, rgb(11 24 51 / 0.44) 45%, rgb(11 24 51 / 0.12) 100%);
  content: "";
}

.hero-content > * {
  position: relative;
}

.hero-content {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-2);
  height: 100%;
  min-height: 220px;
  padding: var(--space-6) var(--space-8);
  color: var(--color-white);
}

.hero-title {
  color: var(--color-white);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.08;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
}

.hero-question {
  color: var(--color-white);
  font-size: var(--text-body-lg);
  font-weight: 500;
}

.hero-phrase {
  color: var(--color-white);
  font-size: var(--text-body-lg);
  font-style: italic;
  opacity: 0.95;
}

.hero-handwriting {
  position: absolute;
  top: 50%;
  right: var(--space-8);
  color: var(--color-white);
  font-family: var(--font-hand);
  font-size: 30px;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.3);
  transform: translateY(-50%) rotate(-8deg);
}

.dashboard-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.goal-card,
.progress-card,
.activities-card,
.dashboard-aside .card {
  padding: var(--space-6);
}

.goal-text {
  max-width: 44ch;
  margin-bottom: var(--space-4);
  color: var(--text-body);
}

.goal-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.goal-tasks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 600;
}

.goal-tasks .icon {
  width: 16px;
  height: 16px;
  color: var(--text-faint);
}

.goal-tasks li[data-fait="true"] {
  background: var(--success-soft);
  color: var(--success-text);
}

.goal-tasks li[data-fait="true"] .icon {
  color: var(--success);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  align-items: center;
}

.metric > .icon {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
}

.metric dd {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.metric dt {
  grid-column: 2;
  grid-row: 2;
  color: var(--text-body);
  font-size: var(--text-label);
  line-height: 1.25;
}

.metric--streak > .icon { color: var(--danger); }
.metric--words > .icon { color: var(--success); }
.metric--rules > .icon { color: var(--accent); }
.metric--interviews > .icon { color: var(--module-interview); }

.metric--streak.is-lit > .icon {
  animation: flame 900ms var(--ease-standard) 1;
}

@keyframes flame {
  0% { transform: scale(0.6); opacity: 0.4; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.dashboard-main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.9fr);
  gap: var(--space-5);
  align-items: start;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.activity {
  --activity-color: var(--module-learn);
  --activity-bg: var(--module-learn-bg);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-2) var(--space-3);
  min-height: 188px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--activity-bg);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.activity--learn { --activity-color: var(--module-learn); --activity-bg: var(--module-learn-bg); }
.activity--grammar { --activity-color: var(--module-grammar); --activity-bg: var(--module-grammar-bg); }
.activity--verbs { --activity-color: var(--module-verbs); --activity-bg: var(--module-verbs-bg); }
.activity--interview { --activity-color: var(--module-interview); --activity-bg: var(--module-interview-bg); }
.activity--course { --activity-color: var(--module-course); --activity-bg: var(--module-course-bg); }
.activity--review { --activity-color: var(--module-review); --activity-bg: var(--module-review-bg); }
.activity--library { --activity-color: var(--module-library); --activity-bg: var(--module-library-bg); }

@media (hover: hover) {
  .activity:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.activity-tile,
.module-tile {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--activity-color, var(--accent)) 22%, transparent);
  color: var(--activity-color, var(--accent));
}

.activity-tile .icon,
.module-tile .icon {
  width: 28px;
  height: 28px;
}

.activity .ring {
  --ring-color: var(--activity-color);
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
}

/* Le corps reste dans la colonne de gauche même quand la carte n'a pas
   d'anneau (Bibliothèque) : sans cette ancre, il venait se coller à côté
   de la tuile et cassait le gabarit des six cartes. */
.activity-body {
  grid-column: 1;
  grid-row: 2;
}

.activity-body h3 {
  color: var(--text-strong);
  font-size: var(--text-h3);
  font-weight: 750;
}

.activity-body p {
  margin-top: 2px;
  color: var(--text-body);
  font-size: var(--text-small);
  line-height: 1.4;
}

.activity-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.activity-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 600;
}

.activity-state .icon {
  width: 16px;
  height: 16px;
}

.activity[data-etat="completed"] .activity-state {
  color: var(--success-text);
}

.activity[data-etat="due"] .activity-state {
  color: var(--text-strong);
}

.activity-foot .button {
  margin-left: auto;
  min-height: 44px;
  padding: 0 var(--space-4);
}

.activity--wide {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
}

.activity--wide .activity-foot {
  grid-column: 3;
  grid-row: 1;
}

.dashboard-aside {
  display: grid;
  gap: var(--space-5);
}

.quote-box {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  text-align: center;
}

.quote-box blockquote {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-body-lg);
  line-height: 1.45;
}

.quote-translation {
  margin-top: var(--space-2);
  color: var(--text-body);
  font-size: var(--text-small);
}

.quote-box figcaption {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-label);
}

.motivation-card .link-button {
  margin-top: var(--space-2);
}

.level-goal {
  color: var(--text-strong);
  font-size: var(--text-small);
  font-weight: 650;
  white-space: nowrap;
}

.level-scale {
  display: grid;
  gap: var(--space-2);
}

.level-scale .progress {
  height: 14px;
}

.level-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-body);
  font-size: var(--text-small);
  font-weight: 600;
}

.level-steps li:last-child {
  text-align: right;
}

.level-steps li:nth-child(2),
.level-steps li:nth-child(3) {
  text-align: center;
}

.level-estimate {
  margin-top: var(--space-3);
  color: var(--text-body);
  font-size: var(--text-small);
}

.calendar-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  margin-bottom: var(--space-2);
}

.calendar-month {
  color: var(--text-strong);
  font-size: var(--text-h3);
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
}

.calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.calendar th {
  padding: var(--space-1) 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 500;
}

.calendar td {
  padding: 3px 0;
  text-align: center;
}

.calendar-day {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-strong);
  font-size: var(--text-small);
}

/* Blanc sur vert vif ne donne que 2,3 de contraste : c'est l'encre sombre du
   fond qui se lit sur cette pastille, pas le blanc. */
.calendar-day[data-etat="done"] {
  background: var(--success);
  color: var(--bg-canvas);
  font-weight: 700;
}

.calendar-day[data-etat="partial"]::after {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  content: "";
  transform: translateX(-50%);
}

.calendar-day[data-etat="rest"] {
  color: var(--text-muted);
}

.calendar-day[data-avenir="true"] {
  color: var(--text-muted);
}

.calendar-day[data-aujourdhui="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
}

.calendar-day[data-aujourdhui="true"][data-etat="partial"]::after {
  background: var(--color-white);
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--text-label);
}

.calendar-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-dot--done { background: var(--success); }
.legend-dot--partial { width: 6px; height: 6px; background: var(--success); }
.legend-dot--today { background: var(--accent); }

.cta-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--warning-soft);
}

.cta-illustration {
  width: 96px;
  height: 72px;
  stroke: none;
}

.cta-text h2 {
  font-size: var(--text-h3);
  font-weight: 750;
}

.cta-text p {
  margin-top: 2px;
  color: var(--text-body);
}

.shortcut-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.shortcut-list div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.shortcut-list dd {
  margin: 0;
  color: var(--text-body);
  font-size: var(--text-small);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-tile {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.stat-tile strong {
  display: block;
  color: var(--text-strong);
  font-size: var(--text-h2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stat-tile span {
  color: var(--text-body);
  font-size: var(--text-label);
}

.stats-section + .stats-section {
  margin-top: var(--space-5);
}

.stats-section h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h3);
}

.stats-levels {
  display: grid;
  gap: var(--space-3);
}

.stats-level {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 120px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-small);
}

.stats-level strong {
  color: var(--text-strong);
}

.stats-level span:last-child {
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.history-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-list li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
}

.history-list li:nth-child(odd) {
  background: var(--bg-subtle);
}

.history-list strong {
  color: var(--text-strong);
}

/* ---------- 8. En-têtes de module ---------- */

.module-intro {
  --module-color: var(--accent);
  --activity-color: var(--accent);
  padding: var(--space-6);
}

.module-intro--learn { --module-color: var(--module-learn); --activity-color: var(--module-learn); }
.module-intro--grammar { --module-color: var(--module-grammar); --activity-color: var(--module-grammar); }
.module-intro--verbs { --module-color: var(--module-verbs); --activity-color: var(--module-verbs); }
.module-intro--interview { --module-color: var(--module-interview); --activity-color: var(--module-interview); }
.module-intro--course { --module-color: var(--module-course); --activity-color: var(--module-course); }

.module-intro-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.module-intro h2 {
  font-size: var(--text-h2);
  font-weight: 750;
  line-height: 1.25;
}

.module-intro .lead {
  margin-bottom: var(--space-4);
}

.module-intro-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sheet-item--grammar { --activity-color: var(--module-grammar); }
.sheet-item--verbs { --activity-color: var(--module-verbs); }
.sheet-item--interview { --activity-color: var(--module-interview); }
.sheet-item--shadowing { --activity-color: var(--module-shadow); }
.sheet-item--library { --activity-color: var(--module-library); }
.sheet-item--settings { --activity-color: var(--color-ink-500); }

.sheet-item .module-tile {
  width: 40px;
  height: 40px;
}

.sheet-item .module-tile .icon {
  width: 22px;
  height: 22px;
}

.flow-steps,
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.flow-steps li,
.stepper li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3) 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 600;
  counter-increment: etape;
}

.flow-steps li::before,
.stepper li::before {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-muted);
  content: counter(etape);
  font-size: 12px;
}

.stepper li[aria-current="step"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.stepper li[aria-current="step"]::before {
  background: var(--accent);
  color: var(--text-on-accent);
}

.stepper li[data-fait="true"] {
  color: var(--success-text);
}

.stepper li[data-fait="true"]::before {
  background: var(--success);
  color: var(--color-white);
  content: "✓";
}

/* ---------- 9. Sessions (Apprendre, Réviser, Verbes) ---------- */

.session-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.session-progress {
  display: grid;
  gap: var(--space-2);
}

.session-count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.session-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.session-timer .icon {
  width: 14px;
  height: 14px;
}

.study-card,
.learn-card,
.notion-card,
.lesson-stage,
.summary-card {
  padding: clamp(var(--space-5), 4vw, var(--space-10));
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.prompt-block {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
}

.prompt-word {
  color: var(--text-strong);
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.prompt-note {
  min-height: 1.4em;
  color: var(--text-muted);
  font-size: var(--text-small);
}

.prompt-context {
  width: min(100%, 580px);
  text-align: left;
}

.audio-prompt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: 0 var(--space-6) 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-body-lg);
  font-weight: 700;
}

.audio-prompt .icon {
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  fill: currentColor;
}

.audio-prompt:hover {
  background: var(--accent-softer);
}

.answer-entry {
  width: min(100%, 580px);
  margin: 0 auto;
}

.answer-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  margin-top: 6px;
}

.answer-input-row .button {
  min-height: 48px;
}

.keyboard-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px var(--space-2);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-label);
}

.answer-panel {
  width: min(100%, 640px);
  margin: 0 auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  animation: page-fade var(--duration-normal) var(--ease-standard) both;
}

.answer-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.word-display {
  color: var(--text-strong);
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.comparison {
  min-height: 1.4em;
  margin-top: var(--space-2);
  color: var(--text-body);
  font-size: var(--text-small);
}

.comparison[data-match="true"] {
  color: var(--success-text);
}

.rating-panel {
  margin-top: var(--space-4);
}

.rating-question {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-small);
  text-align: center;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.rating-button {
  --rating-color: var(--accent);
  --rating-soft: var(--accent-softer);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--space-2);
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-top: 4px solid var(--rating-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-strong);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.rating-button span {
  font-size: var(--text-small);
  font-weight: 700;
}

.rating-button small {
  grid-column: 1;
  color: var(--text-muted);
  font-size: var(--text-label);
}

.rating-button kbd {
  grid-column: 2;
  grid-row: 1 / 3;
}

.rating-button:hover {
  background: var(--rating-soft);
}

.rating-button:active {
  transform: translateY(1px);
}

.rating-button--again { --rating-color: var(--danger); --rating-soft: var(--danger-soft); }
.rating-button--hard { --rating-color: var(--warning); --rating-soft: var(--warning-soft); }
.rating-button--good { --rating-color: var(--accent); --rating-soft: var(--accent-softer); }
.rating-button--easy { --rating-color: var(--success); --rating-soft: var(--success-soft); }

.summary-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}

.summary-card h2 {
  font-size: var(--text-h2);
  font-weight: 750;
}

.summary-card > p {
  max-width: 52ch;
  color: var(--text-body);
}

.summary-check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  animation: success-pop var(--duration-slow) var(--ease-standard) both;
}

.summary-check .icon {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

@keyframes success-pop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.summary-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
  margin: var(--space-2) 0;
  text-align: left;
}

.summary-columns h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  font-weight: 700;
}

/* Apprendre */

.form-grid + .field-help,
#lesson-availability {
  margin: 0 0 var(--space-5);
}

.preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.preview-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 2px var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.preview-emoji {
  grid-row: 1 / 3;
  font-size: 24px;
  text-align: center;
}

.preview-list strong {
  color: var(--text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.preview-list small {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.notion-card h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h2);
  font-weight: 750;
}

.notion-summary {
  max-width: 68ch;
  margin-bottom: var(--space-4);
  color: var(--text-body);
  font-size: var(--text-body-lg);
}

.notion-examples,
.learn-examples {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.learn-card .carte-image {
  margin-top: var(--space-4);
}

.learn-word {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.learn-fr {
  margin-top: var(--space-2);
  color: var(--text-body);
  font-size: var(--text-body-lg);
}

.learn-note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.learn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.learn-actions #learn-skip {
  margin-right: auto;
}

/* Chaque action dit sa conséquence : sinon « passer » ressemble à un refus. */
.learn-actions .button {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  height: auto;
  padding-block: var(--space-3);
}

.learn-actions .button small {
  font-size: var(--text-label);
  font-weight: 500;
  opacity: 0.75;
}

.learn-actions #learn-work {
  position: relative;
  padding-right: var(--space-8);
}

.learn-actions #learn-work .icon {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  translate: 0 -50%;
}

.card-meta-action[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.fiche-remise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.fiche-remise .field-help {
  flex: 1 1 220px;
  margin: 0;
}

.badge--priorite {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.recall-card,
.test-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}

.recall-prompt {
  color: var(--text-strong);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
}

.recall-answer {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: 100%;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.choice-list {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 460px);
  margin-top: var(--space-2);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-strong);
  font-weight: 600;
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.choice:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-softer);
}

.choice .icon {
  width: 18px;
  height: 18px;
  margin-left: auto;
}

.choice[data-etat="juste"] {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success-text);
}

.choice[data-etat="faux"] {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-text);
}

.choice:disabled {
  cursor: default;
}

/* Famille de mots et phrase personnelle */

.famille {
  margin-top: var(--space-5);
}

.famille .overline {
  margin-bottom: var(--space-2);
}

.famille-mots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.famille-mot.lien {
  display: inline-block;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-body);
  font-size: var(--text-small);
  text-decoration: none;
}

.famille-mot--connu.lien {
  border-color: transparent;
  background: var(--success-soft);
  color: var(--success-text);
}

.famille-mot--courant.lien {
  border-color: var(--accent);
  background: var(--accent-softer);
  color: var(--text-strong);
  font-weight: 700;
}

.ma-phrase {
  margin-top: var(--space-5);
}

.ma-phrase .field-label {
  margin-bottom: 6px;
}

.ma-phrase-pied {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ma-phrase-etat {
  flex: 1;
  color: var(--text-muted);
  font-size: var(--text-label);
}

.ma-phrase-etat[data-ton="ok"] { color: var(--success-text); }
.ma-phrase-etat[data-ton="attention"] { color: var(--warning-text); }

.reponse {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-strong);
  line-height: 1.55;
  resize: vertical;
}

.reponse:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* ---------- 10. Grammaire ---------- */

.grammar-group {
  margin-top: var(--space-6);
}

.grammar-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.grammar-group-title {
  font-size: var(--text-h3);
  font-weight: 750;
}

.grammar-group-head .progress {
  flex: 0 1 220px;
  height: 8px;
}

.rule-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-strong);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.rule-row:hover {
  border-color: var(--accent);
  background: var(--accent-softer);
}

.rule-step {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 700;
}

.rule-step .icon {
  width: 18px;
  height: 18px;
}

.rule-row strong {
  display: block;
  font-weight: 650;
}

.rule-row small {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.rule-row[data-etat="done"] .rule-step {
  background: var(--success-soft);
  color: var(--success);
}

.rule-row[data-etat="current"] {
  border-color: var(--module-grammar);
}

.rule-row[data-etat="current"] .rule-step {
  background: var(--module-grammar);
  color: var(--color-white);
}

.rule-row[data-etat="locked"] {
  background: var(--bg-canvas);
  color: var(--text-body);
}

.rule-row[data-etat="locked"] .rule-step {
  color: var(--text-muted);
}

.grammar-lesson .session-toolbar {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.lesson-nav {
  display: flex;
  gap: var(--space-2);
}

.lesson-card {
  padding: clamp(var(--space-5), 4vw, var(--space-10));
}

.lesson-card > h2 {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.15;
}

.lesson-section {
  margin-top: var(--space-8);
}

.lesson-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-h3);
  font-weight: 750;
}

.lesson-section-title .icon {
  width: 22px;
  height: 22px;
  color: var(--module-grammar);
}

.error-compare {
  display: grid;
  gap: var(--space-2);
}

.error-compare p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
}

.error-compare .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.error-compare .faux {
  background: var(--danger-soft);
  color: var(--danger-text);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.error-compare .juste {
  background: var(--success-soft);
  color: var(--success-text);
}

.error-compare .pourquoi {
  padding-left: 0;
  color: var(--text-body);
  font-size: var(--text-small);
}

.exercise-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.exercise {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.exercise-sentence {
  color: var(--text-strong);
  font-size: var(--text-body-lg);
  line-height: 1.5;
}

.exercise-fr {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-small);
}

.exercise-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.exercise-form .input {
  flex: 1 1 200px;
}

.exercise-gap {
  padding: 0 var(--space-3);
  border-bottom: 2px solid var(--module-grammar);
  color: var(--text-muted);
  letter-spacing: 1px;
}

.exercise-hint {
  margin-top: var(--space-2);
  color: var(--text-body);
  font-size: var(--text-small);
}

.exercise-hint[data-etat="juste"] {
  color: var(--success-text);
  font-weight: 600;
}

.exercise-hint[data-etat="faux"] {
  color: var(--danger-text);
}

.validation-block {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.validation-question + .validation-question {
  margin-top: var(--space-5);
}

.validation-question > p {
  margin-bottom: var(--space-2);
  color: var(--text-strong);
  font-weight: 650;
}

.validation-question .choice-list {
  width: 100%;
}

.lesson-complete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* ---------- 11. Verbes ---------- */

.verbes-entete {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.verbes-entete .button {
  justify-self: start;
}

.verbes-groupe {
  margin-top: var(--space-6);
}

.verbes-groupe h3 {
  font-size: var(--text-h3);
  font-weight: 750;
}

.verbes-groupe > .field-help {
  margin: var(--space-1) 0 var(--space-3);
}

.accordion {
  margin-top: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.accordion > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  list-style: none;
  cursor: pointer;
}

.accordion > summary::-webkit-details-marker {
  display: none;
}

.accordion > summary:hover {
  background: var(--accent-softer);
}

.accordion[open] > summary {
  border-bottom: 1px solid var(--line);
}

.accordion-body {
  padding: var(--space-5);
}

.verbe > summary {
  display: grid;
  grid-template-columns: 2em minmax(7em, auto) 1fr auto auto;
  align-items: baseline;
  gap: var(--space-3);
}

.verbe > summary strong {
  color: var(--text-strong);
  font-weight: 700;
}

.verbe-image {
  font-size: 1.2em;
}

.verbe-formes {
  color: var(--text-body);
  font-size: var(--text-small);
}

.verbe-fr {
  color: var(--text-muted);
  font-size: var(--text-small);
  text-align: right;
}

.verbe-statut {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success-text);
  font-size: var(--text-label);
  font-weight: 600;
  white-space: nowrap;
}

.verbe-statut--revoir {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.verbe-formes-grandes {
  color: var(--text-strong);
  font-size: clamp(1.3rem, 3.5vw, 1.75rem);
  font-weight: 700;
}

.verbe-colonnes {
  display: grid;
  grid-template-columns: minmax(12em, 16em) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin: var(--space-4) 0 var(--space-2);
}

.verbe-colonnes .fact-list {
  margin: 0;
}

.verbe-present {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.verbe-present caption {
  padding-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 650;
  text-align: left;
}

.verbe-present th {
  padding: 6px var(--space-3) 6px 0;
  color: var(--text-muted);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.verbe-present td {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-strong);
}

.verbe-temps {
  margin: var(--space-4) 0;
}

.verbe-temps > summary {
  color: var(--accent-text);
  font-weight: 650;
  cursor: pointer;
}

.conjugaison-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15em, 100%), 1fr));
  gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0 var(--space-2);
}

.verbe-present caption small {
  margin-left: 0.35em;
  font-weight: 500;
}

.forme--change {
  color: var(--accent-text);
  font-weight: 750;
}

.verbe-saisies {
  display: grid;
  gap: var(--space-1);
  width: min(100%, 520px);
  margin: 0 auto;
}

.verbe-saisies .input {
  margin-bottom: var(--space-2);
}

.verbe-actions {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.verbe-correction {
  width: min(100%, 580px);
  margin: var(--space-5) auto 0;
}

.verbe-corrections {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.verbe-corrections li {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 2px var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-muted);
}

.verbe-corrections li span {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.verbe-corrections li strong {
  color: var(--text-strong);
}

.verbe-corrections li small {
  grid-column: 2;
  color: var(--text-body);
  font-size: var(--text-small);
}

.verbe-corrections li[data-etat="juste"] { border-left-color: var(--success); background: var(--success-soft); }
.verbe-corrections li[data-etat="faux"] { border-left-color: var(--danger); background: var(--danger-soft); }

/* ---------- 12. Entretiens et cours ---------- */

.course-header {
  margin-bottom: var(--space-3);
  padding: var(--space-5);
}

.course-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.course-method {
  color: var(--text-body);
  font-size: var(--text-small);
  line-height: 1.55;
}

.course-method span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-strong);
  font-size: var(--text-label);
  font-weight: 700;
}

.course-section {
  margin-top: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.course-section > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  list-style: none;
  cursor: pointer;
}

.course-section > summary::-webkit-details-marker {
  display: none;
}

.course-section > summary:hover {
  background: var(--accent-softer);
}

.course-section > summary strong {
  color: var(--text-strong);
  font-weight: 650;
}

.course-section > summary small {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-label);
}

.course-step {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 700;
}

.course-section[open] > summary {
  border-bottom: 1px solid var(--line);
}

.course-section[open] .course-step {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.course-section-body {
  padding: var(--space-2) var(--space-5) var(--space-5);
}

.course-hint {
  margin: var(--space-3) 0;
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.course-hint em {
  color: var(--text-strong);
  font-style: normal;
  font-weight: 650;
}

.reveal {
  margin-top: var(--space-2);
}

.reveal > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  font-size: var(--text-label);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.reveal > summary::-webkit-details-marker {
  display: none;
}

.reveal > summary:hover {
  background: var(--accent-softer);
}

.reveal[open] > summary {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.reveal-body {
  padding-top: var(--space-3);
}

.drill-list,
.step-list {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}

.drill-list li,
.step-list li {
  margin-bottom: var(--space-4);
  padding-left: var(--space-1);
}

.drill-fr {
  color: var(--text-strong);
  font-size: var(--text-body);
}

.drill-de,
.model-text,
.reading-paragraph > p,
.course-phrase,
.question-de {
  color: var(--text-strong);
  font-size: var(--text-body);
  line-height: 1.6;
}

.reading-fr {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.model-text {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-subtle);
}

.model-text--block {
  white-space: pre-line;
}

.reading-text {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
}

.vocab-table {
  margin-top: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.vocab-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.vocab-row:last-child {
  border-bottom: 0;
}

.vocab-de {
  color: var(--text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.vocab-note {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-label);
}

.vocab-fr,
.vocab-example {
  color: var(--text-body);
  font-size: var(--text-small);
}

.vocab-example {
  color: var(--text-muted);
}

.course-notion-title {
  margin: var(--space-3) 0;
  font-size: var(--text-h3);
  font-weight: 750;
}

.course-situation {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-strong);
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.fact {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
}

.fact[data-ok="true"] {
  border-left-color: var(--success);
}

.fact span {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 650;
}

.fact strong {
  color: var(--text-strong);
  font-size: var(--text-small);
}

.step-label {
  margin-bottom: var(--space-1);
  color: var(--text-strong);
  font-size: var(--text-small);
  font-weight: 650;
}

.starter-list {
  margin: 0;
  padding-left: var(--space-4);
  list-style: none;
}

.starter-list li {
  position: relative;
  margin-bottom: var(--space-1);
  color: var(--text-body);
}

.starter-list li::before {
  position: absolute;
  left: calc(var(--space-4) * -1);
  color: var(--accent);
  content: "›";
}

.writing-fields {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.writing-field {
  padding: var(--space-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.writing-field span {
  color: var(--text-strong);
  font-weight: 650;
}

.course-progress {
  margin: 0 0 var(--space-4);
  color: var(--text-body);
  font-size: var(--text-small);
}

.course-footer {
  margin-top: var(--space-3);
  padding: var(--space-5);
}

.question-fr {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.question-ecrite {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success-text);
  font-size: var(--text-label);
  font-weight: 650;
}

.interview-objective {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--module-interview) 28%, var(--line));
  border-radius: var(--radius-md);
  background: var(--module-interview-bg);
}

.interview-objective strong {
  color: var(--module-interview);
  font-size: var(--text-label);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.interview-objective p {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.55;
}

.interview-rescue {
  margin: var(--space-4) 0;
  padding: var(--space-5);
}

.interview-rescue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.interview-rescue-head h3 {
  margin: 2px 0 0;
  color: var(--text-strong);
  font-size: var(--text-title);
}

.interview-rescue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.interview-rescue-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.interview-rescue-list li > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.interview-rescue-list strong {
  color: var(--text-strong);
  font-size: var(--text-small);
  line-height: 1.4;
}

.interview-rescue-list small {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.reponse-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}

.reponse-etat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success-text);
  font-size: var(--text-label);
  font-weight: 650;
}

.vocab-utile li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 4px 6px 4px 12px;
}

.vocab-utile button {
  color: var(--text-strong);
  font-weight: 700;
}

.vocab-utile strong {
  color: var(--text-strong);
  font-weight: 700;
}

.vocab-utile button:hover {
  color: var(--accent);
  text-decoration: underline;
}

.vocab-utile small {
  color: var(--text-muted);
  font-size: var(--text-label);
}

@media (max-width: 720px) {
  .interview-rescue-list {
    grid-template-columns: 1fr;
  }

  .interview-rescue {
    padding: var(--space-4);
  }
}

.feedback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}

.feedback-tile {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.feedback-tile h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  font-weight: 700;
}

.feedback-tile h4 .icon {
  width: 16px;
  height: 16px;
  color: var(--module-interview);
}

.feedback-tile p,
.feedback-tile li {
  color: var(--text-body);
  font-size: var(--text-small);
}

.feedback-tile ul {
  margin: 0;
  padding-left: var(--space-4);
}

.checklist {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.checklist input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--success);
}

/* Documents importés */

.document {
  margin-top: var(--space-3);
  padding: var(--space-4);
}

.document-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.document-entete strong {
  margin-right: auto;
  color: var(--text-strong);
}

.document-phrases {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.document-phrase {
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  color: var(--text-strong);
  text-align: left;
}

.document-phrase:hover {
  border-bottom-color: var(--accent);
  color: var(--accent-text);
}

/* ---------- 13. Bibliothèque ---------- */

.filter-panel {
  margin-top: 0;
}

.library-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
}

.word-list {
  overflow: hidden;
}

.word-row {
  display: grid;
  grid-template-columns: 44px minmax(160px, 0.9fr) minmax(160px, 1.1fr) auto 44px 44px;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.word-row:last-child {
  border-bottom: 0;
}

.word-row:hover {
  background: var(--accent-softer);
}

.word-level {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 700;
}

.word-level[data-level="A1"],
.word-level[data-level="A2"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.word-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-strong);
  font-size: var(--text-body-lg);
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
}

.word-main:hover {
  color: var(--accent-text);
}

.word-image {
  font-size: 1.1em;
}

.word-fr {
  min-width: 0;
  color: var(--text-body);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.load-more {
  display: flex;
  margin: var(--space-4) auto 0;
}

/* Fiche mot */

.fiche-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.fiche-mots {
  flex: 1 1 180px;
  min-width: 0;
}

.fiche-head .carte-image {
  font-size: 56px;
}

.fiche-title {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
}

.fiche-fr {
  margin-top: var(--space-1);
  color: var(--text-body);
  font-size: var(--text-body-lg);
}

.fiche-actions {
  display: flex;
  gap: var(--space-2);
}

.fiche-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.history-grid div {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.history-grid dt {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.history-grid dd {
  margin: 2px 0 0;
  color: var(--text-strong);
  font-weight: 700;
}

.section-title {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-h3);
  font-weight: 750;
}

/* ---------- 14. Réglages ---------- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.settings-card {
  padding: var(--space-6);
}

.settings-card--wide {
  grid-column: 1 / -1;
}

.settings-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-3);
  margin-bottom: var(--space-5);
}

.settings-heading h2 {
  min-width: 0;
  font-size: var(--text-h3);
  font-weight: 750;
}

.settings-heading .badge {
  max-width: 100%;
  margin-left: auto;
}

.settings-card > .field-help {
  margin-bottom: var(--space-4);
}

.settings-card .fine-print {
  margin-top: var(--space-4);
}

.correcteur-providers {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.correcteur-provider {
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.correcteur-provider legend {
  padding: 0 var(--space-2);
  color: var(--text-strong);
  font-weight: 750;
}

.correcteur-provider-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.correcteur-provider-tete .toggle-row {
  flex: 1 1 auto;
  margin: 0;
  border: 0;
}

.correcteur-provider-champs {
  margin-top: var(--space-3);
}

.correcteur-effacer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--danger-text);
  font-size: var(--text-small);
}

.file-button {
  cursor: pointer;
}

.prise-liste {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}

.prise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.prise-texte {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--text-strong);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.prise-meta {
  color: var(--text-muted);
  font-size: var(--text-label);
}

/* ---------- 15. Atelier oral et studio ---------- */

.atelier {
  width: min(calc(100% - 24px), 640px);
}

.atelier-phrase {
  min-height: 2.6em;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--text-strong);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
}

.atelier-phrase[data-cache="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-small);
  font-weight: 500;
}

.mot {
  padding: 0 2px;
  border-radius: 4px;
  transition: background-color 80ms linear, color 80ms linear;
}

.mot--actif {
  background: var(--accent);
  color: var(--text-on-accent);
}

.atelier-etat {
  margin: 0 0 var(--space-3);
}

.atelier-marche {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-3) 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-strong);
  font-size: var(--text-label);
  font-weight: 600;
}

.atelier-marche span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-muted);
  font-size: 12px;
  font-weight: 700;
}

.atelier-marche[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.atelier-marche[aria-selected="true"] span {
  background: var(--accent);
  color: var(--text-on-accent);
}

.atelier-reglages {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-4) 0;
}

.rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 650;
}

.rec-indicator::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.rec-indicator[data-actif="true"] {
  background: var(--danger-soft);
  color: var(--danger-text);
}

.rec-indicator[data-actif="true"]::before {
  animation: pulse 1s ease-in-out infinite;
}

.atelier-tour {
  color: var(--text-muted);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.atelier-resultat {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.atelier-courbes {
  width: 100%;
  height: 72px;
  margin: var(--space-2) 0 var(--space-1);
}

.courbe {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.courbe--modele { stroke: var(--accent); }
.courbe--vous { stroke: var(--warning); stroke-dasharray: 3 2; }

.atelier-legende {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-label);
}

.pastille {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.pastille--modele { background: var(--accent); }
.pastille--vous { margin-left: var(--space-3); background: var(--warning); }

.atelier-score {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.atelier-score strong {
  color: var(--text-strong);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1;
}

.atelier-score span {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.transcription {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.transcription-brute {
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
}

.transcription-mots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-3);
}

.mot-ok,
.mot-manque {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: var(--text-small);
}

.mot-ok {
  background: var(--success-soft);
  color: var(--success-text);
}

.mot-manque {
  background: var(--bg-muted);
  color: var(--text-muted);
  text-decoration: line-through;
}

.studio-titre {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.35;
}

.studio-video {
  width: 100%;
  margin: var(--space-3) 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  object-fit: cover;
}

.studio-video[data-audio="true"] {
  height: 56px;
  aspect-ratio: auto;
  object-fit: contain;
}

/* ---------- 16. Responsive ---------- */

/* Tablette : barre compacte à icônes, tableau de bord sur une colonne. */
@media (max-width: 1199px) {
  :root {
    --sidebar-width: 84px;
  }

  .sidebar {
    align-items: center;
    padding-inline: var(--space-2);
  }

  .brand {
    justify-content: center;
    width: auto;
  }

  .sidebar .brand-text,
  .nav-label,
  .sidebar-quote {
    display: none;
  }

  .sidebar-nav {
    justify-items: center;
  }

  .nav-item {
    justify-content: center;
    width: 56px;
    padding: 0;
  }

  .nav-item[data-tooltip]:hover::after,
  .nav-item[data-tooltip]:focus-visible::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    z-index: 70;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--text-strong);
    color: var(--bg-surface);
    content: attr(data-tooltip);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .app-header,
  .main-content {
    padding-inline: var(--space-6);
  }

  .account-text,
  .account-chevron {
    display: none;
  }

  .dashboard-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-card {
    grid-column: 1 / -1;
  }

  .skeleton-row--main {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .dashboard-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-4);
  }

  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-handwriting {
    display: none;
  }

  .form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .word-row {
    grid-template-columns: 44px minmax(0, 1fr) auto 44px 44px;
  }

  .word-row .word-fr {
    grid-column: 2 / 4;
    grid-row: 2;
  }
}

/* Mobile : en-tête de 64 px, barre basse à cinq entrées. */
@media (max-width: 767px) {
  /* L'en-tête devient collant plus bas : sans cette réserve, tout défilement
     automatique — correction, exercice, résultat — glisse sous l'en-tête et
     l'on tombe au milieu du bloc au lieu de son début. */
  html {
    scroll-padding-top: 180px;
  }

  .app-shell {
    display: block;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .sidebar {
    display: none;
  }

  .app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-3);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--bg-surface);
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--header-height);
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-strong);
    font-size: 19px;
    font-weight: 800;
  }

  .mobile-brand .brand-symbol {
    width: 30px;
    height: 30px;
  }

  .page-heading {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: var(--space-4) 0 var(--space-3);
    border-top: 1px solid var(--line);
  }

  .page-heading h1 {
    font-size: 28px;
  }

  .page-heading p {
    font-size: var(--text-small);
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    gap: var(--space-2);
  }

  .search-toggle {
    display: inline-grid;
  }

  .global-search {
    position: absolute;
    top: 8px;
    right: var(--space-4);
    left: var(--space-4);
    z-index: 40;
    display: none;
    width: auto;
  }

  body.search-open .global-search {
    display: block;
  }

  .search-panel {
    left: 0;
    width: 100%;
  }

  .avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .system-banner {
    width: calc(100% - 32px);
    margin-top: var(--space-3);
  }

  .main-content {
    padding: var(--space-4) var(--space-4) var(--space-8);
  }

  .bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 4px var(--space-2) env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: var(--bg-surface);
  }

  .hero {
    min-height: 240px;
  }

  .hero-content::before {
    background: linear-gradient(100deg, rgb(11 24 51 / 0.62), rgb(11 24 51 / 0.46));
  }

  .hero-content {
    min-height: 240px;
    padding: var(--space-5);
  }

  .hero-title {
    font-size: 32px;
  }

  .goal-card,
  .progress-card,
  .activities-card,
  .dashboard-aside .card,
  .settings-card,
  .module-intro,
  .free-writing .card,
  .einbuergerungstest .card,
  #view-errors > .card {
    padding: var(--space-4);
  }

  /* Un libellé long (« Supprimer toutes mes données locales ») passe sur deux
     lignes au lieu de pousser la rangée hors de la carte. */
  .button-row .button,
  .dialog-actions .button {
    white-space: normal;
  }

  .activity-grid,
  .dashboard-aside,
  .summary-columns,
  .form-grid--2,
  .form-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .activity--wide {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }

  .activity--wide .activity-foot {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .cta-banner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .cta-banner .button {
    width: 100%;
  }

  .cta-illustration {
    width: 72px;
    height: 54px;
  }

  .study-card,
  .learn-card,
  .notion-card,
  .lesson-stage,
  .summary-card,
  .lesson-card {
    padding: var(--space-5) var(--space-4);
  }

  .answer-input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .keyboard-hint {
    display: none;
  }

  .rating-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .vocab-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .toolbar--split {
    flex-direction: column;
  }

  .word-row {
    grid-template-columns: 40px minmax(0, 1fr) 44px 44px;
    padding-inline: var(--space-3);
  }

  .word-row .badge--status {
    display: none;
  }

  .word-row .word-fr {
    grid-column: 2 / -1;
  }

  .verbe > summary {
    grid-template-columns: 1.6em minmax(0, 1fr) auto;
  }

  .verbe-formes {
    grid-column: 2 / -1;
  }

  .verbe-fr {
    grid-column: 2;
    text-align: left;
  }

  .verbe-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }

  .learn-actions {
    justify-content: stretch;
  }

  .learn-actions .button {
    flex: 1 1 100%;
  }

  .toast {
    right: var(--space-3);
    bottom: calc(80px + env(safe-area-inset-bottom));
    max-width: calc(100% - 24px);
  }

  .voice-activity {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .history-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .history-list li span:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .stats-level {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .stats-level span:last-child {
    grid-column: 1 / -1;
    text-align: left;
  }

  .fiche-head .carte-image {
    order: -1;
    flex-basis: 100%;
  }
}

@media (min-width: 768px) {
  .bottom-nav,
  .sheet {
    display: none;
  }
}

.bottom-nav-item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 56px;
  padding-inline: 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.bottom-nav-item span {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(9px, 3vw, 11px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav-item .icon {
  width: 24px;
  height: 24px;
}

.bottom-nav-item[aria-current="page"],
.bottom-nav-item[aria-expanded="true"] {
  color: var(--accent-text);
}

.bottom-nav-item[aria-current="page"] .icon {
  color: var(--accent);
}

/* ---------- 17. Mouvement réduit ---------- */

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


/* ---------- Mise en pratique ---------- */

.activity--pratique { --activity-color: var(--module-learn); --activity-bg: var(--module-learn-bg); }

.pratique-scene {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.pratique-scene h2,
.pratique-scene h3,
.pratique-scene p,
.pratique-scene fieldset {
  margin: 0;
}

.pratique-scene > .button {
  justify-self: start;
}

.pratique-scene .feedback {
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

/* Une ligne de plus de quatre-vingts caractères se lit mal, et en allemand
   qu'on déchiffre encore, l'œil perd le début de la ligne suivante. */
.pratique-texte {
  max-width: 58ch;
  color: var(--text-strong);
  font-size: 1.125rem;
  line-height: 1.75;
}

.pratique-texte + .button-row { margin-top: var(--space-4); }

/* La phrase française n'est pas une note de bas de page : c'est le sens qu'il
   faut reconstruire. Elle se lit comme du texte, pas comme une légende. */
.pratique-enonce {
  max-width: 62ch;
  color: var(--text-body);
  font-size: 1rem;
}

.pratique-question {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  border: 0;
}

.pratique-question legend {
  margin-bottom: var(--space-2);
  color: var(--text-strong);
  font-weight: 600;
}

.pratique-ordre,
.pratique-mots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pratique-ordre {
  min-height: 60px;
  padding: var(--space-3);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-md);
}

.mot-puce {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.mot-puce:disabled {
  cursor: default;
  opacity: 0.35;
}

.pratique-ordre .mot-puce {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.pratique-ordre .mot-puce:disabled {
  opacity: 1;
}

.dialogue-fil {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.replique {
  max-width: min(88%, 560px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.replique p {
  color: var(--text-strong);
}

.replique small {
  color: var(--text-muted);
}

.replique--moi {
  justify-self: end;
  background: var(--accent-soft);
}

.replique--moi[data-etat="faux"] {
  box-shadow: inset 3px 0 0 var(--danger);
}

.pratique-tour {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.pratique-imposes li[data-etat="juste"] {
  background: var(--success-soft);
  color: var(--success-text);
}

.pratique-imposes li[data-etat="faux"] {
  background: var(--danger-soft);
  color: var(--danger-text);
}

mark.faute {
  padding: 0 2px;
  border-radius: 4px;
  background: var(--danger-soft);
  color: var(--danger-text);
}

.pratique-bilan {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.pratique-scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pratique-scores strong {
  margin-right: 4px;
  color: var(--text-strong);
  font-size: 1.5rem;
}

.pratique-scene .recall-prompt {
  font-size: clamp(1.2rem, 3.2vw, 1.5rem);
  line-height: 1.5;
  text-align: left;
}

.correcteur-entete {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.correcteur-entete > div {
  min-width: 0;
}

.correcteur-mascotte {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--accent-softer), var(--info-soft));
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.correcteur-mascotte:focus-visible {
  box-shadow: var(--shadow-focus);
}

.mascotte-sprite {
  position: absolute;
  inset: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 300% 300%;
}

.correcteur-actions {
  display: grid;
  grid-template-columns: minmax(220px, 420px) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-4);
}

.correcteur-actions .field,
.correcteur-actions .field-help {
  margin: 0;
}

.correction-resultat {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.correction-resume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.correction-score {
  display: grid;
  place-content: center;
  width: 76px;
  height: 76px;
  border: 5px solid var(--success);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-strong);
  line-height: 1;
  text-align: center;
}

.correction-score strong { font-size: 1.4rem; }
.correction-score small { margin-top: 3px; color: var(--text-muted); }

.correcteur-repli {
  padding: var(--space-3);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning-text);
  font-size: var(--text-small);
}

.correction-texte {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.correction-texte-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.correction-texte > .button { justify-self: start; }

.correction-forces {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--success-soft);
}

.correction-explications {
  display: grid;
  gap: var(--space-3);
}

.correction-erreur {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.correction-erreur[data-gravite="mineur"] { border-left-color: var(--warning); }

.correction-erreur-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.correction-changement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-strong);
}

.correction-changement del { color: var(--danger-text); }
.correction-changement ins { color: var(--success-text); font-weight: 700; text-decoration: none; }
.correcteur-attribution { margin: 0; }

.spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: correcteur-tour .8s linear infinite;
}

@keyframes correcteur-tour { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .correcteur-entete { align-items: flex-start; }
  .correcteur-mascotte { flex-basis: 76px; width: 76px; height: 76px; border-radius: 22px; }
  .correcteur-actions { grid-template-columns: minmax(0, 1fr); }
  .correction-resume { align-items: start; }
  .correction-score { width: 64px; height: 64px; }
  .correcteur-provider-tete { align-items: flex-start; flex-direction: column; }
  .correcteur-provider-tete .badge { align-self: flex-start; }
}

/* ---------- Shadowing ---------- */

.activity--shadowing { --activity-color: var(--module-shadow); --activity-bg: var(--module-shadow-bg); }

#view-shadowing {
  --shadow-accent: var(--module-shadow);
  --shadow-fond: var(--module-shadow-bg);
}

.shadow-joueur {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--shadow-fond), var(--bg-surface) 70%);
}

.joueur-tete {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.joueur-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--shadow-accent);
  box-shadow: 0 0 0 4px var(--shadow-fond), 0 6px 18px rgb(0 0 0 / 0.15);
  font-size: 2rem;
}

.joueur-infos {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.joueur-infos h2,
.joueur-infos p {
  margin: 0;
}

.xp-barre {
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
}

.xp-barre span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--shadow-accent), #FFC247);
  transition: width 0.8s var(--ease-standard);
}

.joueur-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.joueur-stats li {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  text-align: center;
}

.joueur-stats strong {
  color: var(--text-strong);
  font-size: 1.25rem;
}

.joueur-stats small {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.shadow-joueur > .button {
  justify-self: stretch;
}

.shadow-episodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.shadow-episode {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--duration-fast, 0.15s) var(--ease-standard), box-shadow var(--duration-fast, 0.15s) var(--ease-standard);
}

.shadow-episode:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.1);
}

.shadow-episode strong {
  color: var(--text-strong);
}

.shadow-episode .badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.shadow-episode[data-fini="true"] {
  border-color: var(--success);
}

.episode-image {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 2.2rem;
  line-height: 1;
}

.episode-progres {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
}

.episode-progres span {
  display: block;
  height: 100%;
  background: var(--shadow-accent);
}

.episode-etoiles {
  color: var(--text-muted);
}

.shadow-jeu {
  display: grid;
  gap: var(--space-3);
}

.shadow-barre {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.shadow-pastilles {
  display: flex;
  flex: 1;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shadow-pastilles li {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
}

.shadow-pastilles li[data-etat="courant"] { background: var(--shadow-accent); box-shadow: 0 0 0 2px var(--shadow-fond); }
.shadow-pastilles li[data-etat="note-0"] { background: var(--line-strong); }
.shadow-pastilles li[data-etat="note-1"] { background: #F5B971; }
.shadow-pastilles li[data-etat="note-2"] { background: #F2A93B; }
.shadow-pastilles li[data-etat="note-3"] { background: #E8B400; }

.shadow-combo {
  color: var(--shadow-accent);
  font-weight: 800;
  white-space: nowrap;
}

.shadow-combo[data-visible="true"] {
  animation: shadow-pop 0.4s var(--ease-standard);
}

.shadow-xp {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--shadow-fond);
  color: var(--shadow-accent);
  font-weight: 800;
  white-space: nowrap;
}

.shadow-reglages {
  display: grid;
  gap: var(--space-2);
}

.shadow-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.segmente {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
}

.segmente button {
  flex: 1;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.segmente button[aria-checked="true"] {
  background: var(--bg-surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

.segmente--petit button {
  min-height: 34px;
}

.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  cursor: pointer;
}

.interrupteur input {
  width: 20px;
  height: 20px;
  accent-color: var(--shadow-accent);
}

.interrupteur:has(input:disabled) {
  opacity: 0.45;
}

.shadow-scene {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 5vw, var(--space-10));
  text-align: center;
}

.shadow-phase {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-strong);
  font-weight: 700;
}

.shadow-phase small {
  color: var(--text-muted);
  font-weight: 500;
}

.shadow-phase[data-etape="atoi"],
.shadow-phase[data-etape="ombre"] {
  background: var(--shadow-accent);
  color: #fff;
}

.shadow-phase[data-etape="atoi"] small,
.shadow-phase[data-etape="ombre"] small {
  color: rgb(255 255 255 / 0.85);
}

.shadow-phrase {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1.45rem, 5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.45;
}

.k-mot {
  display: inline-block;
  padding: 0 3px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  transition: color 0.12s linear, background-color 0.12s linear, transform 0.12s var(--ease-standard);
}

button.k-mot {
  text-decoration: underline dotted 2px;
  text-underline-offset: 6px;
  cursor: pointer;
}

.k-mot.est-dit { color: var(--text-strong); }
.k-mot.est-guide { color: var(--shadow-accent); }

.k-mot.est-actif {
  background: var(--shadow-accent);
  color: #fff;
  transform: scale(1.08);
}

.k-mot.est-juste { background: var(--success-soft); color: var(--success-text); }
.k-mot.est-rate { background: var(--danger-soft); color: var(--danger-text); }

.shadow-fr {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.lien-bouton {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.shadow-anneau {
  width: 72px;
  height: 72px;
  transform: rotate(-90deg);
  fill: none;
}

.shadow-anneau .ring-value-arc {
  --ring-color: var(--shadow-accent);
  transition: none;
}

.shadow-micro-actif {
  margin: 0;
  color: var(--danger-text);
  font-weight: 700;
  animation: shadow-clignote 1.2s ease-in-out infinite;
}

.shadow-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

.bouton-rond {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: var(--shadow-accent);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 10px 24px rgb(217 89 27 / 0.35);
  cursor: pointer;
  animation: shadow-respire 2.4s ease-in-out infinite;
}

.shadow-auto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.choix-note {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 88px;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-strong);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.choix-note span {
  font-size: 1.8rem;
}

.choix-note small {
  color: #E8B400;
}

.shadow-etoiles {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  font-size: 3rem;
  line-height: 1;
}

.shadow-etoiles span {
  color: var(--line-strong);
}

.shadow-etoiles span.gagnee {
  color: #F5B400;
  text-shadow: 0 4px 14px rgb(245 180 0 / 0.45);
  animation: shadow-pop 0.45s var(--ease-standard) both;
  animation-delay: calc(var(--rang) * 0.15s);
}

.shadow-gain {
  margin: 0;
  color: var(--shadow-accent);
  font-size: 1.2rem;
  font-weight: 800;
  animation: shadow-monte 0.8s var(--ease-standard) both;
}

.shadow-fin {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 5vw, var(--space-10));
  text-align: center;
}

.shadow-fin h2,
.shadow-fin p {
  margin: 0;
}

.fin-etoiles {
  font-size: 2.4rem;
  letter-spacing: 4px;
}

.palier-monte {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #FFC247, var(--module-shadow));
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  animation: shadow-pop 0.6s var(--ease-standard) both;
}

.fin-phrases {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.fin-phrases li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.fin-note {
  flex: none;
  color: #E8B400;
  letter-spacing: 1px;
}

@keyframes shadow-pop {
  0% { transform: scale(0.3); opacity: 0; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes shadow-monte {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes shadow-respire {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes shadow-clignote {
  50% { opacity: 0.4; }
}

@media (max-width: 520px) {
  .shadow-barre { flex-wrap: wrap; }
  .shadow-pastilles { order: 3; flex-basis: 100%; }
  .segmente button { padding: 0 var(--space-2); }
}

/* Le même effet, demandé depuis les réglages plutôt que par le système. */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

.shadow-serie {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 0;
  color: var(--text-strong);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------------ *
 * Le carnet d'erreurs et la réparation des phrases.
 * ------------------------------------------------------------------ */

/* L'action d'abord, les chiffres ensuite : la page sert à réparer, pas à
   contempler un tableau de bord. */
.carnet-tete {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.carnet-action { font-size: 1.05rem; }

.carnet-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carnet-chiffres li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.carnet-chiffres strong {
  color: var(--text-strong);
  font-size: 1.6rem;
  line-height: 1;
}

/* Même motif que .info-disclosure : chevron maison, pas le marqueur du
   navigateur, et l'accent plutôt qu'un gris indéfinissable. */
.carnet-aide summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  color: var(--accent-text);
  cursor: pointer;
  font-size: var(--text-small);
  font-weight: 600;
  list-style: none;
}

.carnet-aide summary::-webkit-details-marker {
  display: none;
}

.carnet-aide summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.carnet-aide[open] summary::before {
  transform: rotate(45deg);
}

.carnet-aide p {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.carnet-groupe { display: grid; gap: var(--space-3); }
.carnet-groupe + .carnet-groupe { margin-top: var(--space-5); }

.carnet-groupe h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.carnet-groupe h3 span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.erreur-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.erreur-pied .fine-print { margin: 0; }

.carnet-liste {
  display: grid;
  gap: var(--space-3);
}

.erreur-fiche {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.erreur-fiche[data-etat="progres"] { border-left-color: var(--warning); }

.erreur-fiche header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.erreur-etat {
  color: var(--text-muted);
  font-size: var(--text-small);
  font-weight: 600;
}

.reparation {
  display: grid;
  gap: var(--space-4);
}

.reparation-fausse {
  padding: var(--space-4);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--text-strong);
  font-size: 1.05rem;
}

.reparation-indice {
  padding: var(--space-3);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  font-size: var(--text-small);
}

.reparation-verdict {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.reparation-verdict[data-reussi="true"] { border-color: var(--success); }

.reparation-titre {
  color: var(--text-strong);
  font-weight: 700;
}

.reparation-juste span[data-juste="false"] {
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  text-decoration: underline wavy;
}

.reparation-conseils {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
}

.reparation-suivi {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.correction-image { color: var(--text-muted); font-style: italic; }
.correction-astuce { color: var(--text-strong); }
.correction-astuce strong { margin-right: var(--space-2); color: var(--success-text); }

.chouette-avant { color: var(--text-muted); }

.chouette-reponse {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

#chouette-corps { display: grid; gap: var(--space-4); }

/* ------------------------------------------------------------------ *
 * La grille d'examen, le plan de travail et la relecture d'entretien.
 * ------------------------------------------------------------------ */

.examen {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.examen-criteres {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.examen-criteres li {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-3);
  border-left: 3px solid var(--warning);
}

.examen-criteres li[data-verdict="atteint"] { border-left-color: var(--success); }
.examen-criteres li[data-verdict="insuffisant"] { border-left-color: var(--danger); }

.examen-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.examen-tete span { color: var(--text-muted); font-size: var(--text-small); font-weight: 600; }
.examen-verdict { color: var(--text-strong); font-weight: 600; }

.bilan-carnet { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.bilan-resume { color: var(--text-strong); font-size: 1.05rem; }

.bilan-priorites {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-5);
}

/* « display: grid » sur un <li> efface son numéro : la puce n'existe que
   pour un display list-item. L'espacement passe donc par les marges. */
.bilan-priorites li { display: list-item; }
.bilan-priorites li > * + * { margin-top: var(--space-1); }
.bilan-pourquoi { color: var(--text-muted); }
.bilan-encouragement { color: var(--success-text); font-weight: 600; }

.relecture:not(:empty) { margin-top: var(--space-4); }
.toggle-row--compact { margin-top: var(--space-3); }

.correcteur-essai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.correcteur-essai-etat { font-size: var(--text-small); }
.correcteur-essai-etat[data-resultat="attente"] { color: var(--text-muted); }
.correcteur-essai-etat[data-resultat="juste"] { color: var(--success-text); font-weight: 600; }
.correcteur-essai-etat[data-resultat="faux"] { color: var(--danger-text); font-weight: 600; }

.bilan-priorites li::marker { color: var(--text-muted); font-weight: 700; }
.bilan-priorites li strong { color: var(--text-strong); }

/* ==========================================================================
   Einbürgerungstest — préparation au test de naturalisation
   Uniquement des tokens sémantiques (designv2.md, section 4) : aucune couleur
   écrite en dur, contraste ≥ 4,5:1 pour le corps de texte.
   ========================================================================== */

.einbuergerungstest { display: grid; gap: var(--space-6); }
.einbuergerungstest h2 { margin: 0; }
.einbuergerungstest h3 { margin: 0; }
/* Un enfant de grille ne rétrécit pas sous sa largeur minimale : sans cette
 * règle, une fiche débordait de 32 px sur un écran de 320 px. Une longue phrase
 * allemande élargissait toute la carte. */
.einbuergerungstest * { min-width: 0; }
/* L'allemand fabrique des mots très longs et les codes d'explication du BAMF
 * aussi : plutôt qu'un débordement horizontal sur petit écran, on autorise la
 * coupure quand un mot ne peut pas tenir. */
.einbuergerungstest * { overflow-wrap: break-word; }

/* --- Présentation et provenance --- */

.eb-presentation { display: grid; gap: var(--space-4); }
.eb-provenance {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--text-body);
}
.eb-provenance li { position: relative; padding-left: var(--space-5); }
.eb-provenance li::before { content: "•"; position: absolute; left: var(--space-2); color: var(--accent); }
.eb-provenance strong { color: var(--text-strong); }

.eb-reglages { display: grid; gap: var(--space-4); }

/* --- Les deux modes --- */

.eb-modes { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eb-mode { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.eb-mode p { margin: 0; }
.eb-mode .select { width: 100%; }
.eb-seuil { color: var(--text-strong); }
.eb-progression { font-size: var(--text-small); color: var(--text-muted); }

/* --- Historique --- */

.eb-historique ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.eb-historique li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
.eb-historique-date { color: var(--text-muted); font-size: var(--text-small); }
.eb-historique-score { font-weight: 700; color: var(--text-strong); }

.eb-verdict {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 600;
}
.eb-verdict--ok { background: var(--color-success-100); color: var(--success-text); }
.eb-verdict--ko { background: var(--color-danger-100); color: var(--danger-text); }

/* --- Session --- */

.eb-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.eb-compteur { font-size: var(--text-small); color: var(--text-muted); }
.eb-progress { height: 8px; border-radius: var(--radius-pill); background: var(--bg-muted); overflow: hidden; }
.eb-progress span {
  display: block;
  height: 100%;
  width: var(--eb-progress, 0%);
  background: var(--accent);
  transition: width var(--duration-normal) var(--ease-standard);
}

.eb-question { display: grid; gap: var(--space-4); }
.eb-enonce { font-size: var(--text-h3); line-height: 1.4; color: var(--text-strong); }
.eb-traduction-controle { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.eb-traduction-controle .button { white-space: normal; }
.eb-notion--institution { --notion-ink: var(--accent-text); --notion-bg: var(--accent-soft); }
.eb-notion--droit { --notion-ink: var(--success-text); --notion-bg: var(--success-soft); }
.eb-notion--histoire { --notion-ink: var(--module-interview); --notion-bg: var(--module-interview-bg); }
.eb-notion--consigne { --notion-ink: var(--warning-text); --notion-bg: var(--warning-soft); }
.eb-notion {
  display: inline; font: inherit; color: var(--notion-ink); background: var(--notion-bg);
  border: 0; border-radius: 4px; padding: 2px 3px; cursor: help;
  text-decoration: underline dotted; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.eb-notion:hover { text-decoration-style: solid; }
.eb-notion:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.eb-notions { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.eb-notions h3 { margin: 0; font-size: var(--text-small); }
.eb-notions p, .eb-notions small { color: var(--text-muted); font-size: var(--text-label); }
.eb-notions-legende, .eb-notions-mots { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.eb-notion-categorie { color: var(--notion-ink); font-size: var(--text-label); }
.eb-notion-categorie::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--notion-ink); margin-right: 5px; }
.eb-notions-mots .eb-notion { min-height: 44px; padding: 8px 10px; font-size: var(--text-small); text-align: left; max-width: 100%; }
.eb-notion-info {
  position: fixed; z-index: 160; width: min(340px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow-y: auto; overflow-wrap: anywhere;
  box-sizing: border-box; padding: var(--space-4); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-body);
  box-shadow: var(--shadow-md); font-size: var(--text-small); line-height: 1.5;
}
.eb-notion-info p { margin: 0 0 var(--space-2); }
.eb-notion-info strong { display: block; color: var(--text-strong); margin-bottom: var(--space-2); }
.eb-notion-info small { display: block; color: var(--text-muted); font-size: var(--text-label); }
.eb-enonce-fr { margin: 0; color: var(--text-muted); font-size: var(--text-small); }
.eb-mention {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--text-label);
}
.eb-allemand { color: var(--text-strong); }

.eb-visuel { display: grid; gap: var(--space-2); margin: 0; }
.eb-visuel img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.eb-visuel figcaption { color: var(--text-muted); font-size: var(--text-label); }

.eb-options { display: grid; gap: var(--space-2); }
.eb-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.eb-option:hover:not([aria-disabled="true"]) { border-color: var(--accent); background: var(--bg-subtle); }
.eb-option:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.eb-option[aria-disabled="true"] { cursor: default; }
.eb-option--choisie { border-color: var(--accent); background: var(--bg-subtle); }
.eb-option--juste { border-color: var(--color-success-600); background: var(--color-success-100); }
.eb-option--faux { border-color: var(--color-danger-600); background: var(--color-danger-100); }

.eb-option-lettre {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-body);
  font-size: var(--text-label);
  font-weight: 700;
}
.eb-option--juste .eb-option-lettre { background: var(--color-success-600); color: var(--color-white); }
.eb-option--faux .eb-option-lettre { background: var(--color-danger-600); color: var(--color-white); }

.eb-option-texte { display: grid; gap: 2px; flex: 1 1 auto; }
.eb-option-fr { color: var(--text-muted); font-size: var(--text-small); }
/* L'état est porté par du texte, pas seulement par la couleur. */
.eb-option-etat {
  flex: none;
  align-self: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--text-body);
}
.eb-option-etat--juste { background: var(--color-success-100); color: var(--success-text); }
.eb-option-etat--faux { background: var(--color-danger-100); color: var(--danger-text); }

.eb-explication {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.eb-explication p { margin: 0; }
.eb-explication-fr { color: var(--text-body); font-size: var(--text-small); }
.eb-explication-ref { color: var(--text-muted); font-size: var(--text-label); }
.eb-suite { display: flex; justify-content: flex-end; margin: 0; }

.eb-navigation, .eb-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.eb-navigation { justify-content: space-between; }

/* --- Résultat --- */

.eb-resultat { display: grid; gap: var(--space-4); }
.eb-verdict-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.eb-actions { justify-content: flex-start; }
.eb-details { display: grid; gap: var(--space-4); margin: 0; padding-left: var(--space-6); }
.eb-detail--juste::marker { color: var(--success-text); }
.eb-detail--faux::marker { color: var(--danger-text); }
.eb-detail-titre { display: flex; gap: var(--space-2); margin: 0; }
.eb-detail-rang { flex: none; font-weight: 700; color: var(--text-muted); }
.eb-detail-attendu { margin: var(--space-1) 0 0; color: var(--danger-text); font-size: var(--text-small); }
.eb-detail-juste { margin: var(--space-1) 0 0; color: var(--success-text); font-size: var(--text-small); }
.eb-details > li > p { margin-left: var(--space-4); }

/* --- Repère de préparation --- */

.eb-preparation { display: grid; gap: var(--space-4); }
.eb-preparation p { margin: 0; }
.eb-prep-liste { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.eb-prep-liste li { display: grid; gap: var(--space-1); }
.eb-prep-titre { font-weight: 600; color: var(--text-strong); }
.eb-prep-chiffres { font-size: var(--text-small); color: var(--text-muted); }
.eb-jauge { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--bg-muted); overflow: hidden; }
.eb-jauge i { display: block; height: 100%; width: var(--eb-jauge, 0%); background: var(--accent); }
.eb-prep-details { font-size: var(--text-small); }
.eb-prep-details summary { cursor: pointer; color: var(--accent); }
.eb-prep-oubliees { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.eb-prep-oubliees li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.eb-prep-etiquette {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--text-label);
}
.eb-prep-conseil { font-size: var(--text-label); color: var(--text-muted); }

/* --- Fiches de révision --- */

.eb-fiches-intro, .eb-fiche { display: grid; gap: var(--space-4); }
.eb-fiche-liste { display: grid; gap: var(--space-4); margin: 0; padding-left: var(--space-6); }
.eb-fiche-liste li { padding-left: var(--space-2); }
.eb-fiche-de { margin: 0; overflow-wrap: break-word; }
.eb-fiche-fr { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-small); overflow-wrap: break-word; }
.eb-fiche-ref { margin: var(--space-1) 0 0; color: var(--text-faint); font-size: var(--text-label); }
/* L'allemand fabrique des mots très longs : on autorise la coupure plutôt
 * qu'un débordement horizontal sur petit écran. */
.eb-enonce, .eb-option-texte, .eb-prep-oubliees, .eb-detail-titre { overflow-wrap: break-word; }

@media (max-width: 900px) {
  .eb-modes { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .eb-navigation { justify-content: stretch; }
  .eb-navigation .button, .eb-actions .button { flex: 1 1 auto; }
  .eb-barre { justify-content: flex-start; }
  .eb-option { padding: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .eb-progress span { transition: none; }
}

/* ================= Lesen & Hören — les dialogues Lengura ================= */

.lh-filtres-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.lh-niveau {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--text-h3);
  color: var(--text-strong);
}

.lh-niveau small {
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 600;
}

.lh-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
}

.lh-episode {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.lh-episode:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .08));
}

.lh-episode strong {
  color: var(--text-strong);
  font-size: var(--text-body);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.lh-episode small {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.lh-episode-tete {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lh-categorie {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.lh-pastilles {
  display: flex;
  gap: 4px;
}

.lh-pastille {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.lh-reprendre {
  margin-bottom: var(--space-5);
}

/* ---- Lecteur ---- */

.lh-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-4);
}

.lh-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.lh-audio-bar {
  position: sticky;
  top: var(--space-3);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  backdrop-filter: blur(8px);
}

.lh-audio-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lh-audio-titre {
  color: var(--text-strong);
  font-size: var(--text-body);
  font-weight: 700;
}

#lh-locuteur {
  font-size: var(--text-small);
  font-weight: 700;
}

.lh-etat {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.lh-audio-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#lh-play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  cursor: pointer;
}

#lh-play:hover {
  background: var(--accent-hover);
}

#lh-play .icon {
  width: 20px;
  height: 20px;
}

.lh-progress {
  flex: 1 1 140px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  cursor: pointer;
  overflow: hidden;
}

#lh-progress-fill {
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.lh-time {
  color: var(--text-muted);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Dialogue ---- */

.lh-dialogue {
  max-height: 62vh;
  overflow-y: auto;
  padding: var(--space-6);
  scroll-behavior: smooth;
}

.lh-titre {
  margin: 0 0 var(--space-5);
  color: var(--text-strong);
  font-size: var(--text-h3);
  line-height: 1.3;
}

.lh-replique {
  margin: 0 0 var(--space-4);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 3px solid var(--lh-couleur, var(--text-faint));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background .2s;
}

.lh-replique--narrateur {
  border-left-style: dashed;
  color: var(--text-muted);
  font-style: italic;
}

.lh-replique--active {
  background: color-mix(in srgb, var(--lh-couleur, var(--accent)) 7%, transparent);
}

.lh-locuteur {
  display: block;
  margin-bottom: 2px;
  color: var(--lh-couleur, var(--text-muted));
  font-size: var(--text-small);
  font-weight: 700;
}

.lh-texte {
  margin: 0;
  color: var(--text-body);
  font-size: var(--text-body-lg);
  line-height: 1.75;
}

.lh-mot {
  border-radius: 3px;
  padding: 0 1px;
  transition: background .12s, color .12s;
}

.lh-mot.lh-dit {
  color: var(--text-strong);
}

.lh-mot.lh-actif {
  background: color-mix(in srgb, var(--lh-couleur, var(--accent)) 30%, transparent);
  color: var(--text-strong);
  font-weight: 600;
}

.lh-mot.lh-cherche {
  background: var(--color-primary-100);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---- Vocabulaire ---- */

.lh-pane--vocab {
  position: sticky;
  top: var(--space-3);
}

.lh-vocab {
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-4);
}

.lh-vocab-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.lh-vocab-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-body);
}

.lh-vocab-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lh-vocab-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: stretch;
}

.lh-vocab-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.lh-vocab-item:hover {
  background: var(--bg-subtle);
}

.lh-vocab-ajouter {
  align-self: stretch;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--accent-text);
  font: inherit;
  font-size: var(--text-label);
  cursor: pointer;
}
.lh-vocab-ajouter:hover, .lh-vocab-ajouter[aria-pressed="true"] { background: var(--accent-soft); }

.lh-paquet-resume, .lh-deck-head, .lh-deck-stats, .lh-deck-modes,
.lh-deck-liste, .lh-ratings { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.lh-paquet-resume { justify-content: space-between; margin-bottom: var(--space-4); padding: var(--space-4); }
.lh-paquet-resume strong, .lh-paquet-resume small { display: block; }
.lh-paquet-resume small { color: var(--text-muted); margin-top: var(--space-1); }
.lh-deck-intro { display: grid; gap: var(--space-4); }
.lh-deck-head { justify-content: space-between; }
.lh-deck-stats { gap: var(--space-2) var(--space-4); }
.lh-deck-stats strong { color: var(--accent-text); font-size: var(--text-h2); }
.lh-deck-stats span { color: var(--text-muted); margin-right: var(--space-3); }
.lh-deck-liste { align-items: stretch; margin-top: var(--space-4); }
.lh-deck-item { flex: 1 1 240px; display: flex; justify-content: space-between; gap: var(--space-3); }
.lh-deck-item strong, .lh-deck-item span, .lh-deck-item small { display: block; }
.lh-deck-item span, .lh-deck-item small { color: var(--text-muted); margin-top: var(--space-1); }
.lh-card-revision { max-width: 720px; margin: var(--space-5) auto; min-height: 310px; display: grid; align-content: center; gap: var(--space-5); text-align: center; }
.lh-card-meta { display: flex; justify-content: space-between; color: var(--text-muted); }
.lh-card-consigne { color: var(--text-muted); margin: 0; }
.lh-card-de { color: var(--text-strong); font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 700; margin: 0; }
.lh-card-fr { color: var(--text-strong); font-size: var(--text-body-lg); margin: 0; }
.lh-card-contexte { padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-muted); font-size: var(--text-body-lg); margin: 0; }
.lh-card-source { color: var(--text-muted); font-size: var(--text-label); margin: 0; }
.lh-ratings { justify-content: center; }
.lh-rating { min-width: 105px; display: grid; gap: 2px; }
.lh-rating small { color: var(--text-muted); }

.lh-vocab-de {
  color: var(--text-strong);
  font-size: var(--text-body);
  font-weight: 600;
}

.lh-vocab-fr {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.lh-vocab-fr em {
  opacity: .6;
}

@media (max-width: 900px) {
  .lh-layout {
    grid-template-columns: 1fr;
  }

  .lh-pane--vocab,
  .lh-audio-bar {
    position: static;
  }

  .lh-dialogue,
  .lh-vocab {
    max-height: 55vh;
  }
}

@media (max-width: 640px) {
  .lh-grille {
    grid-template-columns: 1fr;
  }

  .lh-dialogue {
    padding: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lh-mot,
  .lh-replique,
  .lh-episode {
    transition: none;
  }

  .lh-dialogue {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------ *
 * Agentur · 8 jours — le plan de préparation au rendez-vous.
 * ------------------------------------------------------------------ */

.module-intro--agentur { --module-color: var(--module-agentur); --activity-color: var(--module-agentur); }
.sheet-item--agentur { --activity-color: var(--module-agentur); }

.agentur-pane {
  display: grid;
  gap: var(--space-4);
}

.agentur-jours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.agentur-jour {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.agentur-jour:hover { transform: scale(1.06); }

.agentur-jour--actif {
  background: var(--module-agentur);
  border-color: var(--module-agentur);
  color: #fff;
}

.agentur-jour--fait:not(.agentur-jour--actif)::after {
  content: "✓";
  display: block;
  font-size: 0.7rem;
  line-height: 0.4;
  color: var(--module-review);
}

.agentur-titres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.agentur-lien {
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
}

.agentur-lien:hover { border-color: var(--module-agentur); }

.agentur-phrases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.agentur-phrase {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--border);
}

.agentur-phrase:last-child { border-bottom: 0; padding-bottom: 0; }

.agentur-phrase--dite .agentur-phrase-texte { opacity: 0.65; }

.agentur-phrase-texte { display: grid; gap: 2px; }

.agentur-phrase-texte p { margin: 0; }

.agentur-phrase-texte small { color: var(--text-faint); }

.agentur-phrase-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* L'allemand caché : le rappel actif avant la révélation d'un toucher. */
p[data-agentur-reveler] {
  filter: blur(7px);
  cursor: pointer;
  transition: filter 0.2s ease;
}

p[data-agentur-reveler].agentur-revele { filter: none; }

.agentur-bascule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  padding: 4px 10px;
  cursor: pointer;
}

.agentur-bascule .icon { width: 14px; height: 14px; }

.agentur-bascule--actif {
  background: var(--module-review);
  border-color: var(--module-review);
  color: #fff;
}

.agentur-chunk-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.agentur-chunk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--border);
}

.agentur-chunk:last-child { border-bottom: 0; padding-bottom: 0; }

.agentur-chunk--su .agentur-phrase-texte strong { color: var(--module-review); }

.agentur-criteres {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.agentur-critere {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.agentur-message {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--module-agentur);
  background: var(--module-agentur-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.agentur-reperes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* Lesen & Hören : sa couleur propre, la feuille « Plus » du mobile et
 * l'intro du module partagent le même accent. */
.sheet-item--lengura { --activity-color: var(--module-lengura); }
.module-intro--lesen-horen { --module-color: var(--module-lengura); --activity-color: var(--module-lengura); }

/* ==========================================================================
   Écoute en continu — le lecteur plein écran des séances de Hörverstehen.
   Une seule colonne centrée, pochette grande comme une pochette d'album,
   réplique courante en gros pour un coup d'œil depuis le bus.
   ========================================================================== */

.ecoute {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top) + var(--space-4)) var(--space-5) calc(env(safe-area-inset-bottom) + var(--space-5));
  background:
    radial-gradient(120% 55% at 50% -8%, rgb(79 70 229 / 0.42), transparent 62%),
    linear-gradient(178deg, #131a44, var(--color-ink-900) 52%, #060d22);
  color: rgb(255 255 255 / 0.92);
}

.ecoute[hidden] { display: none; }

body.ecoute-ouverte { overflow: hidden; }

.ecoute > * { width: min(100%, 520px); }

/* --- Tête : quitter · titre du mode · aléatoire --- */

.ecoute-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ecoute-mode {
  margin: 0;
  color: rgb(255 255 255 / 0.66);
  font-size: var(--text-label);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Le lecteur vit sur son fond nuit quel que soit le thème de l'app :
 * les boutons icônés n'héritent ni du fond ni de l'encre du thème. */
.ecoute .icon-button,
.ecoute .icon-button--ghost {
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.86);
}

.ecoute .icon-button:hover {
  background: rgb(255 255 255 / 0.18);
}

.ecoute-fermer,
.ecoute-bascule {
  color: rgb(255 255 255 / 0.8);
}

.ecoute-bascule[aria-pressed="true"] {
  color: var(--color-sun-400);
}

.ecoute-bascule[aria-pressed="true"]::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 2px auto -4px;
  border-radius: 50%;
  background: var(--color-sun-400);
}

/* --- Pochette : un visuel par niveau, qui respire pendant la lecture --- */

.ecoute-pochette {
  display: grid;
  place-items: center;
  width: 100%;
  margin: var(--space-6) 0 var(--space-5);
}

.ecoute-disque {
  position: relative;
  display: grid;
  place-items: center;
  width: min(64vw, 218px);
  aspect-ratio: 1;
  border-radius: 28px;
  background:
    radial-gradient(90% 90% at 22% 12%, rgb(255 255 255 / 0.28), transparent 46%),
    linear-gradient(140deg, var(--ecoute-couleur, #4f46e5), color-mix(in srgb, var(--ecoute-couleur, #4f46e5) 46%, #060d22));
  box-shadow:
    0 22px 60px rgb(3 8 24 / 0.55),
    inset 0 1px 0 rgb(255 255 255 / 0.22);
  color: rgb(255 255 255 / 0.9);
}

.ecoute-disque[data-niveau="A1"] { --ecoute-couleur: var(--module-learn); }
.ecoute-disque[data-niveau="A2"] { --ecoute-couleur: var(--module-course); }
.ecoute-disque[data-niveau="B1"] { --ecoute-couleur: var(--module-interview); }
.ecoute-disque[data-niveau="B2"] { --ecoute-couleur: var(--module-grammar); }

.ecoute-disque .icon {
  width: 34%;
  height: 34%;
}

.ecoute-note {
  position: absolute;
  right: 16%;
  top: 14%;
  color: rgb(255 255 255 / 0.85);
  font-size: 22px;
  opacity: 0;
}

/* La note ne danse que quand ça joue (le bouton affiche « Pause »). */
.ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-note {
  animation: ecoute-note 2.6s var(--ease-standard) infinite;
}

@keyframes ecoute-note {
  0% { opacity: 0; transform: translate(0, 6px) rotate(-8deg); }
  18% { opacity: 1; }
  45% { opacity: 0.9; transform: translate(10px, -8px) rotate(6deg); }
  70% { opacity: 0; transform: translate(18px, -18px) rotate(0deg); }
  100% { opacity: 0; }
}

/* --- Infos épisode --- */

.ecoute-info {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  text-align: center;
}

.ecoute-niveau {
  border: 1px solid rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.92);
}

.ecoute-titre {
  margin: 0;
  color: #ffffff;
  font-size: var(--text-h3);
  font-weight: 750;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ecoute-compte {
  margin: 0;
  color: rgb(255 255 255 / 0.62);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.ecoute-etat {
  min-height: 1.35em;
  margin: 0;
  color: var(--color-sun-400);
  font-size: var(--text-small);
}

/* --- La réplique courante, en grand --- */

.ecoute-scene {
  width: min(100%, 520px);
  min-height: 8.5em;
  max-height: 36vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.25) transparent;
  scroll-padding-block: 16px;
}

/* La fenêtre ne coupe jamais une ligne à mi-glyphe : quand le texte dépasse
   le cadre, il s'aligne en haut (le centrage flex fausse scrollHeight et
   rend le haut inatteignable) et un fondu haut/bas annonce le reste. Posé
   par app.js (.deborde) — un texte court reste entier, centré et net. */
.ecoute-scene.deborde {
  justify-content: flex-start;
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent);
}

.ecoute-replique-locuteur {
  margin: 0 0 var(--space-2);
  min-height: 1.2em;
  color: var(--color-sun-400);
  font-size: var(--text-small);
  font-weight: 700;
}

.ecoute-replique-texte {
  margin: 0;
  color: rgb(255 255 255 / 0.4);
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.7;
}

.ecoute-replique-texte .lh-mot {
  color: rgb(255 255 255 / 0.55);
  margin: 0 1px;
  padding: 0 2px;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.ecoute-replique-texte .lh-mot.lh-dit {
  color: rgb(255 255 255 / 0.94);
}

.ecoute-replique-texte .lh-mot.lh-actif {
  background: var(--color-sun-400);
  color: #241d02;
  font-weight: 700;
}

/* --- Progression et contrôles --- */

.ecoute-progression {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ecoute-horloge {
  color: rgb(255 255 255 / 0.66);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}

.ecoute-horloge:last-child { text-align: right; }

.ecoute-barre {
  flex: 1;
  height: 8px;
  background: rgb(255 255 255 / 0.16);
}

.ecoute-barre .lh-progress-fill {
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--module-lengura), var(--color-sun-400));
}

.ecoute-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 9vw, var(--space-10));
  margin-bottom: var(--space-4);
}

.ecoute-skip {
  width: 56px;
  height: 56px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.86);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.ecoute-skip:active { transform: scale(0.92); }

.ecoute-skip .icon {
  width: 30px;
  height: 30px;
}

.ecoute-play {
  display: grid;
  place-items: center;
  width: clamp(74px, 19vw, 88px);
  height: clamp(74px, 19vw, 88px);
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: var(--color-ink-900);
  cursor: pointer;
  box-shadow: 0 14px 38px rgb(3 8 24 / 0.5);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.ecoute-play:active { transform: scale(0.95); }

.ecoute-play .icon {
  width: 36px;
  height: 36px;
}

.ecoute-play:focus-visible,
.ecoute-skip:focus-visible,
.ecoute-fermer:focus-visible,
.ecoute-bascule:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ecoute-vitesses {
  justify-content: center;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.07);
}

.ecoute-vitesses button {
  border: 1px solid rgb(255 255 255 / 0.22);
  background: transparent;
  color: rgb(255 255 255 / 0.72);
}

.ecoute-vitesses button:hover {
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.08);
}

.ecoute-vitesses button[aria-checked="true"] {
  border-color: rgb(255 255 255 / 0.9);
  background: rgb(255 255 255 / 0.14);
  color: #ffffff;
}

/* Le CTA dans l'intro du module */
.lh-ecoute-lancement {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  margin-top: var(--space-5);
}

@media (max-width: 480px) {
  .ecoute { padding-inline: var(--space-4); }
  .ecoute-scene { min-height: 9.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-note { animation: none; opacity: 0.9; }
  .ecoute-skip:active, .ecoute-play:active { transform: none; }
}

html[data-motion="reduced"] .ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-note { animation: none; opacity: 0.9; }

/* ==========================================================================
   Lesen & Hören — covers éditoriales et lecteur continu v2.
   Les images donnent un repère rapide, tandis que tous les libellés restent
   du HTML natif, lisible et traduisible.
   ========================================================================== */

.lh-episode {
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: stretch;
  padding: 8px;
  overflow: hidden;
}

.lh-episode-cover {
  width: 92px;
  height: 100%;
  min-height: 126px;
  border-radius: calc(var(--radius-lg) - 4px);
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.lh-episode-corps {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
}

.lh-episode-corps strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ecoute {
  background:
    radial-gradient(95% 44% at 50% -7%, rgb(112 63 241 / 0.46), transparent 68%),
    radial-gradient(75% 38% at 5% 62%, rgb(62 24 155 / 0.25), transparent 74%),
    linear-gradient(175deg, #11183c 0%, #080f2c 54%, #050a1d 100%);
}

.ecoute-tete {
  position: sticky;
  top: 0;
  z-index: 4;
  padding-block: 2px var(--space-2);
  background: linear-gradient(#11183c 60%, transparent);
}

.ecoute-mode {
  color: rgb(255 255 255 / 0.82);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.18em;
}

.ecoute-pochette {
  margin: clamp(16px, 4vh, 34px) 0 var(--space-4);
}

.ecoute-disque {
  width: min(72vw, 310px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: clamp(24px, 7vw, 38px);
  background: #11183c;
  box-shadow: 0 26px 70px rgb(1 4 18 / 0.68), 0 0 0 1px rgb(117 73 255 / 0.16);
}

.ecoute-disque > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-standard), filter 300ms var(--ease-standard);
}

.ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-disque > img {
  transform: scale(1.025);
}

.ecoute-cover-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(4 7 22 / 0.02) 42%, rgb(4 7 22 / 0.82) 100%);
}

.ecoute-cover-niveau {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 13px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius-pill);
  background: rgb(104 55 232 / 0.84);
  color: white;
  font-size: var(--text-small);
  font-weight: 800;
  box-shadow: 0 8px 20px rgb(17 7 51 / 0.24);
  backdrop-filter: blur(12px);
}

.ecoute-cover-audio {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: 50%;
  background: rgb(9 14 40 / 0.62);
  color: white;
  backdrop-filter: blur(14px);
}

.ecoute-cover-audio .icon { width: 25px; height: 25px; }

.ecoute-onde {
  position: absolute;
  right: 78px;
  bottom: 26px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}

.ecoute-onde i {
  flex: 1;
  height: 28%;
  border-radius: var(--radius-pill);
  background: linear-gradient(#fbf7ff, #a766ff);
  box-shadow: 0 0 14px rgb(155 92 255 / 0.45);
  transform-origin: center;
}

.ecoute-onde i:nth-child(2n) { height: 72%; }
.ecoute-onde i:nth-child(3n) { height: 100%; }
.ecoute-onde i:nth-child(5n) { height: 48%; }

.ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-onde i {
  animation: ecoute-onde 900ms ease-in-out infinite alternate;
}
.ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-onde i:nth-child(2n) { animation-delay: -420ms; }
.ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-onde i:nth-child(3n) { animation-delay: -690ms; }

.ecoute-note { display: none; }

.ecoute-info { gap: 6px; margin-bottom: var(--space-4); }
.ecoute-niveau { display: none; }
.ecoute-titre { max-width: 24ch; font-size: clamp(21px, 5.8vw, 28px); letter-spacing: -0.025em; line-height: 1.18; }
.ecoute-compte { font-size: 14px; }

.ecoute-scene {
  min-height: 7.6em;
  margin-bottom: var(--space-4);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.045));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 18px 45px rgb(1 4 18 / 0.2);
  backdrop-filter: blur(16px);
}

.ecoute-replique-locuteur {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgb(245 177 45 / 0.14);
}

.ecoute-replique-texte { font-size: clamp(19px, 5.2vw, 24px); line-height: 1.58; }
.ecoute-replique-texte .lh-mot.lh-actif { border-radius: 6px; background: #f5b12d; box-shadow: 0 0 0 3px rgb(245 177 45 / 0.13); }

.ecoute-progression { margin-bottom: var(--space-4); }
.ecoute-barre { height: 6px; cursor: pointer; }
.ecoute-barre .lh-progress-fill { background: linear-gradient(90deg, #7c3aed, #c35cff); box-shadow: 0 0 12px rgb(170 75 255 / 0.45); }

.ecoute-controles {
  width: min(100%, 500px);
  justify-content: space-between;
  gap: 8px;
}

.ecoute-skip { width: 52px; height: 52px; flex: 0 0 auto; }
.ecoute-mode-action { width: 44px; height: 44px; border-color: transparent; background: rgb(255 255 255 / 0.06); }
.ecoute-mode-action .icon { width: 22px; height: 22px; }
.ecoute-mode-action[aria-pressed="true"] { border-color: rgb(179 99 255 / 0.72); background: rgb(130 62 230 / 0.22); color: #d9b8ff; box-shadow: 0 0 18px rgb(134 61 230 / 0.22); }
.ecoute-play { width: clamp(72px, 19vw, 84px); height: clamp(72px, 19vw, 84px); border: 4px solid #6e32c9; box-shadow: 0 0 0 3px rgb(151 72 255 / 0.18), 0 16px 42px rgb(1 4 18 / 0.58); }

.ecoute-vitesses {
  width: min(100%, 500px);
  min-height: 52px;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
}
.ecoute-vitesses button { min-height: 44px; border-radius: var(--radius-pill); }
.ecoute-vitesses button[aria-checked="true"] { border-color: #bd6bff; background: rgb(130 62 230 / 0.2); box-shadow: inset 0 0 0 1px rgb(213 166 255 / 0.38), 0 0 18px rgb(147 62 237 / 0.22); }

@keyframes ecoute-onde {
  from { transform: scaleY(0.42); opacity: 0.72; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 380px) {
  .ecoute { padding-inline: 14px; }
  .ecoute-disque { width: min(68vw, 270px); }
  .ecoute-scene { padding: var(--space-4); }
  .ecoute-skip { width: 46px; height: 46px; }
  .ecoute-mode-action { width: 40px; height: 40px; }
  .ecoute-play { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-onde i { animation: none; }
  .ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-disque > img { transform: none; }
}

html[data-motion="reduced"] .ecoute:has(.ecoute-play[aria-label="Pause"]) .ecoute-onde i { animation: none; }