:root {
  --ink: #132333;
  --muted: #5e7182;
  --paper: #fbf8f2;
  --white: #ffffff;
  --blue: #1976d2;
  --blue-pale: #e8f3ff;
  --coral: #eb6659;
  --coral-pale: #fff0ec;
  --purple: #7454d6;
  --purple-pale: #f0ecff;
  --green: #14836b;
  --green-pale: #e2f6f0;
  --amber: #a8670f;
  --amber-pale: #fdf1dd;
  --slate: #3f5a73;
  --slate-pale: #e8eef4;
  --mint: #dff8ed;
  --border: #dfdfdc;
  --shadow: 0 14px 30px rgba(30, 52, 73, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #e7edf0; color: var(--ink); font-family: Inter, ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { position: relative; min-height: 100svh; max-width: 720px; margin: 0 auto; padding: env(safe-area-inset-top) 20px calc(88px + env(safe-area-inset-bottom)); background: var(--paper); overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 14px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 1.05rem; font-weight: 500; text-decoration: none; }
.brand-mark { display: block; width: 35px; height: 35px; }
.install-button { display: flex; align-items: center; gap: 5px; padding: 8px 11px; border: 1px solid #b9d4ef; border-radius: 99px; color: #1265ad; background: #f6fbff; font-size: .76rem; font-weight: 750; }
.install-button span { font-size: 1rem; line-height: .8; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.account { position: relative; }
.account-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; overflow: hidden; border: 1px solid #dbe3ea; border-radius: 50%; background: #fff; }
.account-mark { width: 18px; height: 18px; }
.account-avatar { display: none; width: 100%; height: 100%; object-fit: cover; }
.account.has-photo .account-avatar { display: block; }
.account.has-photo .account-mark { display: none; }
.account.is-signed-in .account-button { border-color: #a9d8c9; box-shadow: 0 0 0 2px #e4f6ef; }
.account-menu { position: absolute; z-index: 10; top: calc(100% + 9px); right: 0; width: max-content; max-width: 240px; padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.account-name { margin: 0 0 2px; font-size: .84rem; font-weight: 800; letter-spacing: -.02em; }
.account-email { margin: 0 0 12px; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; }
.account-menu .ghost-button { width: 100%; padding: 9px 12px; border-radius: 10px; font-size: .76rem; font-weight: 750; }

.screen { display: none; animation: show .28s ease; }
.screen.is-active { display: block; }
/* L'écran reçoit le focus à l'ouverture (pour les lecteurs d'écran), sans cadre bleu autour. */
.screen:focus { outline: none; }
@keyframes show { from { opacity: .1; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero { padding: 37px 0 28px; background: radial-gradient(circle at 95% 12%, #e2efff 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #f4e9ff 0 78px, transparent 79px); }
.eyebrow, .card-kicker { margin: 0 0 8px; color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 13px; font-size: clamp(2.45rem, 9vw, 4.3rem); line-height: .96; letter-spacing: -.06em; }
h1 em { color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero-copy, .intro { max-width: 480px; margin-bottom: 21px; color: var(--muted); font-size: 1rem; line-height: 1.52; }
.primary-button, .complete-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 13px; color: #fff; background: #123e67; box-shadow: 0 8px 18px rgba(18, 62, 103, .2); padding: 13px 17px; font-weight: 750; }
.primary-button span { font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.streak { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 650; }
.streak > span[aria-hidden] { color: #e39441; }

.progress-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 35px; padding: 18px 19px; border: 1px solid #d9e6eb; border-radius: 18px; background: #f3fbfa; }
.progress-card h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.03em; }
.progress-sync { margin: 6px 0 0; max-width: 30ch; color: var(--muted); font-size: .71rem; line-height: 1.35; }
.progress-ring { display: grid; width: 58px; height: 58px; place-items: center; border: 6px solid #b3e8dc; border-radius: 50%; color: #1b7c70; background: #fff; font-size: .72rem; font-weight: 800; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 1.42rem; letter-spacing: -.04em; }
.section-heading.compact { align-items: center; }
.time-pill { flex: 0 0 auto; padding: 6px 9px; border-radius: 99px; color: var(--muted); background: #ecece8; font-size: .68rem; font-weight: 750; }
.lesson-card { display: flex; gap: 13px; margin-bottom: 13px; padding: 15px; border: 1px solid var(--border); border-radius: 20px; background: var(--white); box-shadow: 0 4px 10px rgba(31, 45, 55, .025); }
.lesson-card[data-card="futur"] { border-left: 5px solid var(--blue); }
.lesson-card[data-card="connecteurs"] { border-left: 5px solid var(--coral); }
.lesson-card[data-card="tcf"] { border-left: 5px solid var(--purple); }
.lesson-card[data-card="passe"] { border-left: 5px solid var(--green); }
.lesson-card[data-card="hypothese"] { border-left: 5px solid var(--amber); }
.lesson-icon { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 15px; font-size: 1rem; font-weight: 850; }
.blue-icon { color: var(--blue); background: var(--blue-pale); }
.coral-icon { color: var(--coral); background: var(--coral-pale); font-size: 1.6rem; }
.purple-icon { color: var(--purple); background: var(--purple-pale); font-size: 1.6rem; }
.green-icon { color: var(--green); background: var(--green-pale); font-size: 1.6rem; }
.amber-icon { color: var(--amber); background: var(--amber-pale); }
.lesson-card-content { min-width: 0; flex: 1; }
.lesson-meta > span { white-space: nowrap; }
.lesson-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-bottom: 4px; color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .1em; }
.lesson-card h3 { margin: 0 0 4px; font-size: 1.08rem; letter-spacing: -.035em; }
.lesson-card p { margin: 0 0 12px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; }
.status { color: var(--muted); font-size: .71rem; font-weight: 650; }
.status.is-done { color: #158372; }
.card-status { display: grid; gap: 2px; }
.card-score { color: var(--purple); font-size: .68rem; font-weight: 750; }
.card-score:empty { display: none; }
.card-bottom button { border: 0; color: var(--ink); background: transparent; font-size: .76rem; font-weight: 800; }
.daily-tip { display: flex; gap: 12px; align-items: center; margin: 29px 0 15px; padding: 15px; border-radius: 16px; background: #fff7dd; }
.tip-symbol { display: grid; flex: 0 0 33px; height: 33px; place-items: center; border-radius: 50%; color: #9d6817; background: #ffe39a; }
.daily-tip p, .install-hint { margin: 0; color: #695c47; font-size: .76rem; line-height: 1.4; }
.install-hint { padding: 0 4px; color: var(--muted); text-align: center; }

.lesson-screen { padding: 13px 0 18px; }
.back-button { margin: 0 0 30px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: .82rem; font-weight: 750; }
.back-button span { color: var(--ink); font-size: 1rem; }
.blue-text { color: var(--blue); } .coral-text { color: var(--coral); } .purple-text { color: var(--purple); }
.green-text { color: var(--green); } .amber-text { color: var(--amber); }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 25px 0 14px; }
.compare-card { min-height: 231px; padding: 15px; border-radius: 17px; }
.compare-card.future, .compare-card.real { background: var(--blue-pale); } .compare-card.conditional, .compare-card.unreal { background: var(--purple-pale); }
.compare-card.event { background: var(--green-pale); } .compare-card.scene { background: var(--amber-pale); }
.mini-tag { display: inline-block; margin-bottom: 17px; padding: 5px 7px; border-radius: 6px; color: #fff; background: var(--blue); font-size: .57rem; font-weight: 850; letter-spacing: .08em; }
.conditional .mini-tag, .unreal .mini-tag { background: var(--purple); }
.event .mini-tag { background: var(--green); } .scene .mini-tag { background: var(--amber); }
.compare-card h2 { margin: 0 0 8px; font-size: 1.08rem; letter-spacing: -.035em; }
.compare-card > p:not(.mini-tag) { min-height: 54px; margin-bottom: 10px; color: var(--muted); font-size: .74rem; line-height: 1.35; }
blockquote { margin: 0 0 11px; color: var(--ink); font-size: .79rem; line-height: 1.38; }
.future blockquote b, .future span strong, .real blockquote b, .real span strong { color: var(--blue); } .conditional blockquote b, .conditional span strong, .unreal blockquote b, .unreal span strong { color: var(--purple); }
.event blockquote b, .event span strong { color: var(--green); } .scene blockquote b, .scene span strong { color: var(--amber); }
.compare-card > span { color: var(--muted); font-size: .68rem; }
.formula-card, .model-answer, .speak-card, .exam-note { margin: 14px 0; padding: 18px; border: 1px solid var(--border); border-radius: 17px; background: #fff; }
.formula-row { display: grid; grid-template-columns: 96px 1fr; gap: 4px; margin: 12px 0; font-size: .8rem; line-height: 1.4; }
.formula-row strong { grid-row: span 2; align-self: center; font-size: .91rem; }.formula-row > span { color: var(--muted); }.formula-row b { grid-column: 2; }
.formula-note { margin: 13px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.4; }
.memory-strip { display: flex; gap: 10px; align-items: center; margin: 14px 0 28px; padding: 13px; border-radius: 14px; background: var(--mint); }
.memory-strip > span { display: grid; flex: 0 0 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: #199c87; font-weight: 850; }
.memory-strip p { margin: 0; font-size: .76rem; line-height: 1.4; }
.stem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.stem-grid div { display: grid; grid-template-columns: 1fr auto; gap: 3px; padding: 10px; border-radius: 12px; background: #f0f3f5; font-size: .75rem; }
.stem-grid > div > span { color: var(--coral); font-weight: 800; }.stem-grid small { grid-column: 1 / -1; color: var(--muted); font-size: .67rem; }
.practice { margin: 30px 0 14px; }
.practice-head { padding: 18px; border-radius: 18px; color: #fff; background: #123e67; box-shadow: 0 8px 18px rgba(18, 62, 103, .16); }
.practice-head .card-kicker { color: #9ec5ff; }
.practice-head h2 { margin: 0 0 13px; font-size: 1.22rem; line-height: 1.2; letter-spacing: -.04em; }
.practice-bar { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .18); }
.practice-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #9fe5db; transition: width .3s ease; }
.practice-count { margin: 8px 0 0; color: #cfe0ef; font-size: .74rem; font-weight: 650; }
.exercise-part { margin-top: 24px; }
.exercise-part-title { margin: 0 0 4px; font-size: 1.02rem; letter-spacing: -.03em; }
.exercise-part-instruction { margin: 0 0 10px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.exercise { margin: 10px 0; padding: 16px; border: 2px solid #d2e5f4; border-radius: 16px; background: #fbfdff; transition: border-color .2s ease; }
.exercise[data-state="correct"] { border-color: #a3d6c8; }.exercise[data-state="almost"] { border-color: #f1cf86; }.exercise[data-state="wrong"] { border-color: #f0b8af; }
.exercise-number { margin: 0 0 6px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.exercise-prompt { margin: 0 0 12px; font-size: .98rem; font-weight: 700; line-height: 1.55; letter-spacing: -.02em; }
.gap { color: #8aa3b8; letter-spacing: .04em; }.gap.is-filled { color: #146c55; letter-spacing: normal; text-decoration: underline 2px #9fe5db; text-underline-offset: 3px; }
.gap-input { max-width: 100%; margin: 0 2px; padding: 3px 7px; border: 0; border-bottom: 2px solid var(--blue); border-radius: 7px 7px 0 0; color: var(--ink); background: var(--blue-pale); font: inherit; font-size: 1rem; }
.gap-input:focus { outline: 2px solid #9ec5ff; outline-offset: 1px; }
.exercise[data-state="correct"] .gap-input { border-color: #42aa85; color: #146c55; background: #ecfbf4; }.exercise[data-state="almost"] .gap-input { border-color: #e3a73b; color: #7a5311; background: #fff7dd; }.exercise[data-state="wrong"] .gap-input { border-color: #e78275; color: #a13d34; background: #fff0ed; text-decoration: line-through; }
.hint-chip { display: inline-block; padding: 2px 8px; border-radius: 99px; color: var(--purple); background: var(--purple-pale); font-size: .72rem; font-weight: 750; letter-spacing: 0; vertical-align: 2px; }
.exercise-form { display: grid; justify-items: start; }
.check-button, .ghost-button { min-height: 40px; padding: 0 15px; border-radius: 10px; font-size: .8rem; font-weight: 750; }
.check-button { border: 0; color: #fff; background: #123e67; }.ghost-button { border: 1px solid #c7dceb; color: var(--muted); background: #fff; }
.check-button:disabled, .ghost-button:disabled { opacity: .45; cursor: default; }
.exercise .choice-row { flex-wrap: wrap; }.exercise .choice-row:not(.stack) button { flex: 1 1 110px; }.choice-row button:disabled { cursor: default; }
.order-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px; min-height: 54px; margin-bottom: 10px; padding: 8px; border: 2px dashed #c7dceb; border-radius: 12px; background: #fff; }
.order-pool { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.order-line.stack, .order-pool.stack { flex-direction: column; align-items: stretch; }
.order-chip { padding: 8px 11px; border: 1px solid #c7dceb; border-radius: 10px; color: var(--ink); background: #eef4f8; font-size: .8rem; font-weight: 700; line-height: 1.35; text-align: left; }
.order-line .order-chip { border-color: #9ec5ff; background: var(--blue-pale); }
.order-chip.is-correct { border-color: #42aa85; color: #146c55; background: #ecfbf4; }.order-chip.is-wrong { border-color: #e78275; color: #a13d34; background: #fff0ed; }.order-chip:disabled { cursor: default; }
.order-placeholder { align-self: center; padding: 0 4px; color: #8aa3b8; font-size: .74rem; }
.order-actions { display: flex; justify-content: flex-end; gap: 8px; }
.feedback strong { color: var(--ink); }.exercise[data-state="correct"] .feedback strong { color: #146c55; }.exercise[data-state="almost"] .feedback strong { color: #8a5a0f; }.exercise[data-state="wrong"] .feedback strong { color: #a13d34; }
.practice-result { margin-top: 18px; padding: 22px 18px; border: 1px solid #c3e8de; border-radius: 18px; background: #f1fcf8; text-align: center; }
.result-score { margin: 2px 0 4px; color: #146759; font-size: 2.4rem; font-weight: 850; letter-spacing: -.04em; }
.result-message { max-width: 360px; margin: 0 auto; color: #48776e; font-size: .84rem; line-height: 1.45; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.choice-row { display: flex; gap: 9px; }.choice-row.stack { display: grid; }
.choice-row button { flex: 1; padding: 11px 8px; border: 1px solid #c7dceb; border-radius: 10px; color: var(--ink); background: #fff; font-size: .8rem; font-weight: 750; }.choice-row.stack button { text-align: left; }
.choice-row button.is-correct { border-color: #42aa85; color: #146c55; background: #ecfbf4; }.choice-row button.is-wrong { border-color: #e78275; color: #a13d34; background: #fff0ed; }
.feedback { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: .77rem; line-height: 1.4; }
.complete-button { width: 100%; background: #167b6d; }
.complete-button.is-complete { color: #167b6d; border: 1px solid #a3d6c8; background: #ebfbf4; box-shadow: none; }

.connector-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 14px; }.connector-map article { min-height: 164px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--border); }.connector-map article:nth-child(3n + 1) { background: #fff2ef; }.connector-map article:nth-child(3n + 2) { background: #edf6ff; }.connector-map article:nth-child(3n) { background: #f1edff; }
.connector-number { color: var(--coral); font-size: .64rem; font-weight: 850; letter-spacing: .1em; }.connector-map h2 { margin: 10px 0 7px; font-size: .97rem; letter-spacing: -.03em; }.connector-map p { margin-bottom: 9px; font-size: .74rem; line-height: 1.42; }.connector-map small { color: var(--muted); font-size: .66rem; line-height: 1.3; }
.model-answer { background: #fffdf9; }.model-answer > p:not(.card-kicker) { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.5; }.model-answer mark { padding: 0 2px; color: inherit; background: #ffe29f; }.model-answer small { color: var(--muted); font-size: .7rem; }
details { margin: 10px 0; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; } summary { padding: 15px; cursor: pointer; font-size: .82rem; font-weight: 800; list-style: none; } summary::-webkit-details-marker { display: none; } summary::after { float: right; content: "+"; color: var(--muted); font-size: 1rem; } details[open] summary::after { content: "−"; } details > p { margin: 0; padding: 0 15px 15px; color: var(--muted); font-size: .8rem; line-height: 1.45; }.grammar-note { background: #fff8e9; }

.exam-note { display: grid; grid-template-columns: 36px 1fr; gap: 8px 10px; background: var(--purple-pale); border-color: #dcd1ff; }.exam-note > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #fff; background: var(--purple); font-size: 1.25rem; }.exam-note p { margin: 0; color: #4b426d; font-size: .78rem; line-height: 1.44; }.exam-note a { grid-column: 2; color: #5140aa; font-size: .73rem; font-weight: 800; }
.phrase-tabs details { margin: 10px 0; }.task-badge { display: inline-block; margin-right: 7px; padding: 3px 5px; border-radius: 5px; color: #fff; background: var(--purple); font-size: .53rem; letter-spacing: .08em; }.task-badge.write { background: var(--coral); }.phrase-list { display: grid; gap: 9px; margin: 0; padding: 0 15px 16px 33px; color: var(--muted); font-size: .78rem; line-height: 1.38; }.phrase-list b { color: var(--ink); }
.speak-card { border-color: #c3e8de; background: #f1fcf8; }.speak-card h2 { margin-bottom: 6px; font-size: 1.2rem; letter-spacing: -.04em; }.speak-card > p:not(.card-kicker):not(.timer-tip) { color: var(--muted); font-size: .78rem; line-height: 1.4; }.timer-controls { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; margin: 15px 0 5px; }.timer-controls select, .timer-controls button { min-height: 42px; border: 1px solid #badbd4; border-radius: 10px; background: #fff; padding: 0 10px; color: var(--ink); font-size: .78rem; font-weight: 750; }.timer-controls button { color: #fff; border-color: #167b6d; background: #167b6d; }.timer-controls output { grid-column: 1 / -1; color: #146759; font-size: 2rem; font-weight: 850; letter-spacing: .04em; text-align: center; }.timer-tip { margin: 6px 0 0; color: #48776e; font-size: .7rem; text-align: center; }

.bottom-nav { position: fixed; z-index: 5; right: max(20px, calc((100vw - 720px) / 2 + 20px)); bottom: max(13px, env(safe-area-inset-bottom)); left: max(20px, calc((100vw - 720px) / 2 + 20px)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px; border: 1px solid #dce2e6; border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 28px rgba(31, 49, 63, .16); backdrop-filter: blur(14px); }.bottom-nav button { display: grid; gap: 2px; justify-items: center; padding: 6px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-size: .63rem; font-weight: 750; }.bottom-nav button span { font-size: 1rem; }.bottom-nav button.is-selected { color: #0d5a99; background: #e7f3ff; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 94px; left: 24px; max-width: 520px; margin: auto; padding: 12px 14px; border-radius: 12px; color: #fff; background: #123e67; box-shadow: var(--shadow); font-size: .8rem; text-align: center; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .22s ease; }.toast.show { opacity: 1; transform: none; }
/* Allemand : même système visuel, avec l'écoute des phrases et les couleurs des genres. */
.hero-de { background: radial-gradient(circle at 95% 12%, #fde9c4 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #ffe4de 0 78px, transparent 79px); }
.hero-de h1 em { color: var(--coral); }
.slate-icon { color: var(--slate); background: var(--slate-pale); font-size: 1.4rem; }
.slate-text { color: var(--slate); }
.lesson-icon.de-small-icon { font-size: 1rem; }
.lesson-card.edge-blue { border-left: 5px solid var(--blue); } .lesson-card.edge-amber { border-left: 5px solid var(--amber); } .lesson-card.edge-green { border-left: 5px solid var(--green); }
.lesson-card.edge-purple { border-left: 5px solid var(--purple); } .lesson-card.edge-coral { border-left: 5px solid var(--coral); } .lesson-card.edge-slate { border-left: 5px solid var(--slate); }
.level-heading { display: flex; gap: 12px; align-items: center; margin: 22px 0 12px; }
.section-heading + .level-heading { margin-top: 4px; }
.level-badge { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: var(--blue); font-size: .9rem; font-weight: 850; }
.level-badge.a2 { background: var(--coral); } .level-badge.b1 { background: var(--purple); } .level-badge.b2 { background: var(--slate); }
.level-heading h3 { margin: 0 0 2px; font-size: 1.02rem; letter-spacing: -.03em; }
.level-heading p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.next-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 10px; padding: 13px 17px; border: 1px solid #c7dceb; border-radius: 13px; color: var(--ink); background: #fff; font-weight: 750; text-align: left; }
.next-button small { display: block; color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .1em; }

.de-banner { display: flex; align-items: center; gap: 13px; width: 100%; margin: 22px 0 0; padding: 15px; border: 1px solid #f1d9a8; border-radius: 18px; color: var(--ink); background: linear-gradient(120deg, #fff8e8, #fff1ec); text-align: left; }
.de-flag { flex: 0 0 42px; height: 42px; border-radius: 13px; background: linear-gradient(#1c1c1c 0 33.3%, #dd3a2f 33.3% 66.6%, #f5c518 66.6%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.de-banner-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.de-banner-text small { color: var(--amber); font-size: .6rem; font-weight: 850; letter-spacing: .1em; }
.de-banner-text strong { font-size: 1.05rem; letter-spacing: -.035em; }
.de-banner-text > span { color: var(--muted); font-size: .76rem; line-height: 1.38; }
.de-banner-arrow { font-size: 1.1rem; font-weight: 800; }

.compare-card.tone-blue { background: var(--blue-pale); } .compare-card.tone-purple { background: var(--purple-pale); } .compare-card.tone-green { background: var(--green-pale); } .compare-card.tone-amber { background: var(--amber-pale); } .compare-card.tone-coral { background: var(--coral-pale); }
.tone-purple .mini-tag { background: var(--purple); } .tone-green .mini-tag { background: var(--green); } .tone-amber .mini-tag { background: var(--amber); } .tone-coral .mini-tag { background: var(--coral); }
.tone-blue blockquote b { color: var(--blue); } .tone-purple blockquote b { color: var(--purple); } .tone-green blockquote b { color: var(--green); } .tone-amber blockquote b { color: var(--amber); } .tone-coral blockquote b { color: var(--coral); }

.gender-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 25px 0 10px; }
.gender-card { padding: 13px 12px; border-radius: 16px; }
.gender-card .mini-tag { margin-bottom: 10px; }
.gender-card h2 { margin: 0 0 8px; font-size: 1.7rem; letter-spacing: -.04em; }
.gender-card p:not(.mini-tag) { margin: 0; font-size: .82rem; font-weight: 750; }
.gender-card small { display: block; margin: 2px 0 8px; color: var(--muted); font-size: .66rem; }
.gender-card > span { color: var(--muted); font-size: .7rem; }
.gender-card.der { background: var(--blue-pale); } .gender-card.der h2 { color: var(--blue); }
.gender-card.die { background: var(--coral-pale); } .gender-card.die h2 { color: var(--coral); } .gender-card.die .mini-tag { background: var(--coral); }
.gender-card.das { background: var(--green-pale); } .gender-card.das h2 { color: var(--green); } .gender-card.das .mini-tag { background: var(--green); }

/* Mise en page en ligne, sans flexbox : Safari sur iPhone mesurait mal la largeur de l'icône
   dans un bouton flex, et le mot « Écouter » débordait du bouton. */
.say-button { display: none; box-sizing: border-box; min-height: 30px; margin: 0; padding: 6px 12px 6px 10px; border: 1px solid #c7dceb; border-radius: 99px; color: #1265ad; background: #fff; font-size: .72rem; font-weight: 750; line-height: 16px; white-space: nowrap; vertical-align: middle; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.can-speak .say-button { display: inline-block; }
.say-button::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--speaker) center / contain no-repeat; mask: var(--speaker) center / contain no-repeat; }
.say-button.icon { position: relative; width: 28px; min-height: 0; height: 28px; padding: 0; }
.say-button.icon::before { position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; width: 14px; height: 14px; }
.say-button:active { background: var(--blue-pale); }
/* Petit bouton rond à la fin d'une phrase allemande, dans le fil du texte. */
.say-button.icon.phrase { position: relative; width: 22px; height: 22px; margin: -3px 0 0 2px; border-color: #b9d4ef; color: #1265ad; font-weight: 400; vertical-align: middle; }
.say-button.icon.phrase::before { margin: -6px 0 0 -6px; width: 12px; height: 12px; }
.voice-card h2 { margin-bottom: 6px; font-size: 1.2rem; letter-spacing: -.04em; }
.voice-card > p:not(.card-kicker) { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.voice-controls { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin: 12px 0 4px; }
.voice-controls select, .voice-controls button { min-height: 42px; min-width: 0; padding: 0 10px; border: 1px solid #badbd4; border-radius: 10px; color: var(--ink); background: #fff; font-size: .78rem; font-weight: 750; }
.voice-controls button { padding: 0 16px; color: #fff; border-color: #167b6d; background: #167b6d; }
.voice-help { margin: 12px 0 0; background: #fff; }
.voice-help .phrase-list { padding-left: 33px; }
.voice-help .phrase-list li { list-style: disc; }
:root { --speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E"); }
.compare-card .say-button, .gender-grid + .say-button { margin-bottom: 4px; }
.model-answer .say-button { margin: 0 0 10px; }
.phrase-list li { position: relative; list-style: none; }
.phrase-list .say-button.icon { position: absolute; top: -4px; left: -34px; }
.phrase-list { padding-left: 50px; }
html:not(.can-speak) .phrase-list { padding-left: 33px; } html:not(.can-speak) .phrase-list li { list-style: disc; }
.phrase-list li b { display: block; }
.task-badge.help { background: var(--green); } .task-badge.polite { background: var(--amber); }
html:not(.can-speak) .speak-hint { display: none; }

.formula-row b .blue-text { color: var(--blue); } .formula-row b .coral-text { color: var(--coral); } .formula-row b .green-text { color: var(--green); }

.nowrap { white-space: nowrap; }
/* Mots allemands à écouter un par un : soulignés en pointillé, surlignés pendant la lecture. */
.can-speak .say-word { cursor: pointer; border-radius: 4px; text-decoration: underline dotted rgba(18, 101, 173, .45); text-decoration-thickness: 1.5px; text-underline-offset: 3px; -webkit-tap-highlight-color: rgba(25, 118, 210, .15); transition: background-color .15s ease; }
.can-speak h1 .say-word, .can-speak .exercise-prompt .say-word { text-decoration: none; }
.can-speak .say-word:hover { background: rgba(25, 118, 210, .08); }
.say-word.is-speaking { background: var(--blue-pale); box-shadow: 0 0 0 2px var(--blue-pale); }

.umlaut-keys { display: flex; gap: 6px; margin: 0 0 10px; }
.umlaut-key { width: 38px; height: 36px; border: 1px solid #c7dceb; border-radius: 9px; color: var(--ink); background: #fff; font-size: .95rem; font-weight: 750; }
.umlaut-key:disabled { opacity: .45; cursor: default; }

/* Lire et regarder : les deux cartes d'entrée de l'accueil allemand. */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: -18px 0 30px; }
.feature-card { display: grid; align-content: start; gap: 8px; min-height: 148px; padding: 15px; border: 1px solid var(--border); border-radius: 18px; color: var(--ink); text-align: left; box-shadow: 0 4px 10px rgba(31, 45, 55, .025); }
.feature-read { border-color: #f1d9a8; background: linear-gradient(150deg, #fff8e8, #fff); }
.feature-watch { border-color: #f4c8c1; background: linear-gradient(150deg, #fff0ec, #fff); }
.feature-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; }
.feature-read .feature-icon { background: var(--amber); } .feature-watch .feature-icon { background: var(--coral); }
.feature-icon svg { width: 20px; height: 20px; }
.feature-text { display: grid; gap: 3px; }
.feature-text strong { font-size: 1.05rem; letter-spacing: -.03em; }
.feature-text small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.feature-progress { align-self: end; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.hero-read { background: radial-gradient(circle at 95% 12%, #fde9c4 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #e2f6f0 0 78px, transparent 79px); }
.hero-watch { background: radial-gradient(circle at 95% 12%, #ffe4de 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #e8f3ff 0 78px, transparent 79px); }
.hero-read h1 em { color: var(--amber); } .hero-watch h1 em { color: var(--coral); }
#deStories > .back-button, #deVideos > .back-button, #deWords > .back-button, #deVerbs > .back-button, #deBooks > .back-button, #deMyWords > .back-button { margin: 13px 0 0; }

/* Une histoire : le texte, les boutons d'écoute et la traduction à la demande. */
.story-number { font-size: 1.15rem !important; }
.story-subtitle { margin: -6px 0 14px; color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-style: italic; }
.story-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 8px; }
.story-toolbar .story-player { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 8px; }
.story-player.is-paused { grid-template-columns: 1fr 52px; }
.story-player .primary-button { width: 100%; }
.story-restart { min-height: 44px; padding: 0; border-radius: 13px; font-size: 1.2rem; }
.story-de.is-paused-here { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f1c86a; border-radius: 5px; }
.story-grammar { margin: 0 0 16px; padding: 16px; border: 1px solid #dcd1ff; border-radius: 17px; background: var(--purple-pale); }
.story-grammar h2 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -.03em; }
.story-grammar > p:not(.card-kicker) { margin: 0 0 10px; color: #4b426d; font-size: .8rem; line-height: 1.45; }
.grammar-examples { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.grammar-examples li { display: grid; gap: 1px; padding: 9px 11px; border-radius: 11px; background: #fff; }
.grammar-examples span { font-size: .9rem; font-weight: 700; }
.grammar-examples small { color: var(--muted); font-size: .72rem; }
html:not(.can-speak) .story-toolbar { grid-template-columns: 1fr; }
.story-toolbar .primary-button { gap: 8px; padding: 11px 16px; }
.story-toolbar .primary-button[aria-pressed="true"] { background: var(--coral); box-shadow: 0 8px 18px rgba(235, 102, 89, .25); }
.story-toggle { min-height: 44px; border-radius: 13px; }
.story-toggle[aria-pressed="true"] { border-color: #9ec5ff; color: #0d5a99; background: var(--blue-pale); }
html:not(.can-speak) .story-audio { display: none; }
.story-help { margin: 0 0 18px; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.story-text { padding: 20px 18px; border: 1px solid var(--border); border-radius: 18px; background: #fffdf9; }
.story-paragraph { margin: 0 0 16px; font-family: Georgia, "Times New Roman", serif; font-size: 1.14rem; line-height: 1.75; }
.story-paragraph:last-child { margin-bottom: 0; }
.story-de { border-radius: 5px; transition: background-color .2s ease; }
.story-en { display: none; }
.story-text.show-english .story-sentence { display: block; margin-bottom: 10px; }
.story-text.show-english .story-en { display: block; margin-top: 1px; color: var(--muted); font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .78rem; line-height: 1.4; }
.story-text .say-button.icon.phrase { width: 20px; height: 20px; border-color: transparent; background: var(--blue-pale); }
.is-speaking:not(button):not(.say-word) { border-radius: 5px; background: #ffe29f; box-shadow: 0 0 0 3px #ffe29f; }
.story-glossary { margin: 26px 0 0; }
.glossary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.glossary-list li { display: grid; gap: 2px; padding: 10px 11px; border-radius: 12px; background: #f0f3f5; font-size: .75rem; }
.glossary-list b { font-size: .84rem; }
.glossary-list span { color: var(--muted); font-size: .7rem; line-height: 1.3; }

/* À la fin d'une leçon : l'histoire et les vidéos qui la prolongent. */
.practise-more { display: grid; gap: 8px; margin: 22px 0 16px; padding: 15px; border: 1px solid #e6dcc7; border-radius: 17px; background: #fffaf0; }
.practise-more .card-kicker { margin-bottom: 2px; }
.more-link { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 9px 11px 9px 9px; border: 1px solid var(--border); border-radius: 13px; color: var(--ink); background: #fff; text-align: left; }
.more-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; }
.more-icon svg { width: 18px; height: 18px; }
.more-icon.read { background: var(--amber); } .more-icon.watch { background: var(--coral); }
.more-text { display: grid; gap: 1px; min-width: 0; font-size: .86rem; font-weight: 750; letter-spacing: -.02em; }
.more-text small { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.more-arrow { color: var(--muted); font-weight: 800; }

/* Les vidéos : une vignette, puis le lecteur YouTube au toucher. */
.watch-tips article { min-height: 0; }
.video-section { margin: 26px 0 8px; }
.video-grid { display: grid; gap: 12px; }
.video-card { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; scroll-margin: 90px; }
.video-card.is-focused { animation: video-focus 1.8s ease; }
@keyframes video-focus { 0%, 40% { box-shadow: 0 0 0 4px #ffb4a9; } 100% { box-shadow: 0 0 0 0 transparent; } }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #10202e; }
.video-frame iframe, .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { display: block; padding: 0; background: #10202e; }
.video-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play-icon { position: absolute; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; margin: -29px 0 0 -29px; border-radius: 50%; color: #fff; background: rgba(235, 102, 89, .92); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.video-play-icon svg { width: 28px; height: 28px; margin-left: 3px; }
.video-play:hover .video-play-icon, .video-play:focus-visible .video-play-icon { transform: scale(1.08); }
.video-info { padding: 13px 15px 15px; }
.video-meta { margin: 0 0 5px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.video-info h3 { margin: 0 0 5px; font-size: 1.02rem; letter-spacing: -.03em; }
.video-info p:not(.video-meta) { margin: 0 0 9px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.video-link { color: #1265ad; font-size: .74rem; font-weight: 800; text-decoration: none; }
.video-more { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 2px 0; }
.video-more a { color: #1265ad; font-size: .76rem; font-weight: 800; text-decoration: none; }
.channel-card { margin-top: 28px; }
.channel-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.channel-list li { display: grid; gap: 1px; }
.channel-list a { color: #1265ad; font-size: .86rem; font-weight: 800; text-decoration: none; }
.channel-list span { color: var(--muted); font-size: .74rem; }

@media (min-width: 620px) { .app-shell { padding-right: 34px; padding-left: 34px; }.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.glossary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }.bottom-nav { right: calc((100vw - 720px) / 2 + 34px); left: calc((100vw - 720px) / 2 + 34px); }.compare-card { min-height: 207px; }.formula-row { grid-template-columns: 120px 1fr auto; align-items: center; }.formula-row strong { grid-row: auto; }.formula-row b { grid-column: auto; }.timer-controls { grid-template-columns: 160px 100px 1fr; }.timer-controls output { grid-column: auto; } }
@media (max-width: 370px) { .app-shell { padding-right: 14px; padding-left: 14px; }.gender-grid { gap: 6px; }.gender-card { padding: 11px 9px; }.gender-card .mini-tag { font-size: .5rem; }.compare-card { padding: 12px; }.compare-card h2 { font-size: .96rem; }.compare-card > p:not(.mini-tag), blockquote { font-size: .7rem; }.connector-map { grid-template-columns: 1fr; }.bottom-nav { right: 14px; left: 14px; } }

/* Mots et verbes : les deux nouvelles cartes de l'accueil allemand. */
.feature-words { border-color: #dcd1ff; background: linear-gradient(150deg, var(--purple-pale), #fff); }
.feature-verbs { border-color: #bfe5d9; background: linear-gradient(150deg, var(--green-pale), #fff); }
.feature-words .feature-icon { background: var(--purple); } .feature-verbs .feature-icon { background: var(--green); }
.hero-words { background: radial-gradient(circle at 95% 12%, #e6deff 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #e8f3ff 0 78px, transparent 79px); }
.hero-verbs { background: radial-gradient(circle at 95% 12%, #d5f2e8 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #fdf1dd 0 78px, transparent 79px); }
.hero-words h1 em { color: var(--purple); } .hero-verbs h1 em { color: var(--green); }
.level-badge.ff { background: var(--amber); font-size: 1.2rem; }
.like-count { color: var(--purple); }

/* Les sons qui séparent l'anglais de l'allemand, et les quatre formes d'un verbe. */
.cousin-card h2 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -.03em; }
.cousin-card > p:not(.card-kicker) { margin: 0 0 12px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.cousin-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cousin-list li { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: baseline; padding: 9px 11px; border-radius: 11px; background: #f4f6f8; font-size: .8rem; line-height: 1.45; }
.cousin-list b { color: var(--purple); font-size: .74rem; letter-spacing: .02em; }
.cousin-list [lang="de"] { font-weight: 750; }
.cousin-card .cousin-foot { margin: 12px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.cousin-foot [lang="de"] { color: var(--ink); font-weight: 700; }

/* Une liste de mots. */
.art { font-weight: 800; }
.art-der { color: var(--blue); } .art-die { color: var(--coral); } .art-das { color: var(--green); }
.word-list, .verb-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.word-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 11px 13px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.word-row.is-ff { border-color: #f1d9a8; background: #fffaf0; }
.word-main { min-width: 0; }
.word-de { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.word-main > .say-button.icon.phrase { width: 22px; height: 22px; border-color: transparent; background: var(--blue-pale); vertical-align: -3px; }
.word-pl { display: block; margin-top: 1px; color: var(--muted); font-size: .72rem; }
.word-meaning { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding-top: 2px; color: #3c4a55; font-size: .82rem; line-height: 1.3; border-radius: 8px; }
.word-note { grid-column: 1 / -1; margin: 3px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.ff-note { color: #8a5a0f; }
.tag { display: inline-block; padding: 2px 6px; border-radius: 6px; font-size: .6rem; font-weight: 850; letter-spacing: .04em; white-space: nowrap; }
.tag-like { color: var(--purple); background: var(--purple-pale); }
.tag-ff { color: var(--amber); background: var(--amber-pale); }
.tag-irr { color: var(--coral); background: var(--coral-pale); }
.tag-case { color: var(--slate); background: var(--slate-pale); }
.word-list.only-like .word-row:not(.is-like) { display: none; }
.is-testing .word-en, .is-testing .verb-en { filter: blur(5px); cursor: pointer; transition: filter .2s ease; user-select: none; }
.is-testing .word-meaning .tag, .is-testing .word-note { visibility: hidden; }
.is-testing .is-revealed .word-en, .is-testing .verb-en.is-revealed { filter: none; }
.is-testing .word-meaning.is-revealed .tag { visibility: visible; }
.word-toolbar .story-toggle { padding: 0 10px; }

/* Une liste de verbes. */
.verb-group h3 { margin: 12px 0 2px; color: var(--green); font-size: .78rem; font-weight: 850; letter-spacing: .02em; }
.verb-card { display: grid; gap: 7px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }
.verb-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: space-between; }
.verb-name { margin: 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.verb-name b { color: var(--green); }
.verb-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.verb-en { margin: -3px 0 0; color: #3c4a55; font-size: .84rem; border-radius: 8px; }
.verb-en small { color: var(--muted); font-size: .74rem; }
.verb-forms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.verb-form { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 9px; border-radius: 10px; background: var(--green-pale); font-size: .86rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.verb-form small { color: #3f7f70; font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.conj { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 9px 38px 9px 10px; border-radius: 11px; background: #f4f6f8; }
.conj-cell { font-size: .84rem; }
.conj-pron { color: var(--muted); font-size: .74rem; }
.conj .say-button.icon.phrase.conj-say { position: absolute; top: 50%; right: 9px; margin: -11px 0 0; }
.verb-example { display: grid; gap: 1px; margin: 0; padding-left: 10px; border-left: 3px solid #d7ece5; }
.verb-example [lang="de"] { font-family: Georgia, "Times New Roman", serif; font-size: .95rem; }
.verb-example small { color: var(--muted); font-size: .72rem; }
.verb-list.is-compact .verb-example, .verb-list.is-compact .word-note, .verb-list.is-compact .conj { display: none; }
.verb-card .word-note { margin: 0; }

/* Enregistrer en PDF, et la liste de lectures conseillées. */
.print-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; margin: 0 0 18px; border-radius: 13px; color: #123e67; }
.print-button svg { flex: 0 0 auto; width: 18px; height: 18px; }
.story-screen .print-button { margin-top: 18px; }
.library-card h2 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -.03em; }
.library-card > p:not(.card-kicker) { margin: 0 0 12px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.pdf-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pdf-buttons .print-button { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; justify-items: start; margin: 0; padding: 9px 12px; text-align: left; }
.pdf-buttons .print-button svg { grid-row: span 2; }
.pdf-buttons .print-button span { font-weight: 800; }
.pdf-buttons .print-button small { color: var(--muted); font-size: .66rem; font-weight: 700; }
.pdf-buttons .print-button:last-child { grid-column: 1 / -1; }
.library-guide { margin: 8px 0 26px; }
.library-intro { margin: -6px 0 16px; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.library-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.library-list a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #fff; text-decoration: none; }
.library-name { font-size: .92rem; font-weight: 800; letter-spacing: -.02em; }
.library-level { color: var(--green); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.library-text { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.story-print-en { display: none; }

@media (max-width: 370px) { .import-fields { grid-template-columns: 1fr; }.word-row { grid-template-columns: 1fr; }.conj { grid-template-columns: repeat(2, minmax(0, 1fr)); }.cousin-list li { grid-template-columns: 1fr; gap: 2px; } }

/* Impression et PDF : seulement les écrans demandés, sans boutons, en noir sur blanc. */
@media print {
  @page { margin: 16mm 15mm; }
  body, .app-shell { background: #fff !important; }
  .app-shell { max-width: none; padding: 0; overflow: visible; }
  .is-printing .topbar, .is-printing .bottom-nav, .is-printing .toast { display: none !important; }
  .is-printing main > * { display: none !important; }
  .is-printing main > .print-me { display: block !important; padding: 0; animation: none; }
  .is-printing main > .print-me ~ .print-me { break-before: page; }
  .print-me :is(.back-button, .story-toolbar, .story-help, .practice, .complete-button, .next-button, .practise-more, .say-button, .print-button, .save-word) { display: none !important; }
  .print-me .story-text { padding: 0; border: 0; background: none; }
  .print-me .story-paragraph { font-size: 12pt; line-height: 1.6; }
  .print-me .story-print-en { display: block; margin-top: 20px; break-before: avoid; }
  .print-me .story-print-en h2 { font-size: 13pt; }
  .print-me .story-print-en p { color: #333; font-size: 10pt; line-height: 1.5; }
  .print-me :is(.story-grammar, .word-row, .verb-card, .glossary-list li, .grammar-examples li) { break-inside: avoid; }
  .print-me .is-speaking, .print-me .is-paused-here { background: none !important; box-shadow: none !important; }
  .print-me .say-word { text-decoration: none !important; }
  .print-me h1 { font-size: 26pt; }
  .print-me .word-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .print-me .word-list.only-like .word-row:not(.is-like) { display: grid; }
  .print-me .is-testing .word-en, .print-me .is-testing .verb-en { filter: none; }
  .print-me .is-testing .word-meaning .tag, .print-me .is-testing .word-note { visibility: visible; }
  .print-me .verb-list.is-compact :is(.verb-example, .word-note, .conj) { display: grid; }
}

/* Livres et mots enregistrés : les deux nouvelles cartes de l'accueil allemand. */
.feature-books { border-color: #c9dcf0; background: linear-gradient(150deg, var(--blue-pale), #fff); }
.feature-mywords { border-color: #f1d9a8; background: linear-gradient(150deg, #fff6df, #fff); }
.feature-books .feature-icon { background: var(--blue); } .feature-mywords .feature-icon { background: #d39a1c; }
.hero-books { background: radial-gradient(circle at 95% 12%, #d9eaff 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #fdf1dd 0 78px, transparent 79px); }
.hero-mywords { background: radial-gradient(circle at 95% 12%, #fde9c4 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #f0ecff 0 78px, transparent 79px); }
.hero-books h1 em { color: var(--blue); } .hero-mywords h1 em { color: var(--amber); }

/* L'étoile qui enregistre un mot des listes. */
.word-row { position: relative; padding-right: 42px; }
.save-word { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #f1d9a8; border-radius: 50%; color: #b7811a; background: #fffaf0; font-size: 1rem; line-height: 1; }
.save-word[aria-pressed="true"] { border-color: #e5b44a; color: #fff; background: #e0a526; }
.word-row .save-word { position: absolute; top: 9px; right: 9px; }
.verb-tags .save-word { width: 26px; height: 26px; font-size: .9rem; }

/* La bibliothèque. */
.book-icon { font-size: .82rem !important; }
.book-card { position: relative; }
.book-sync { color: var(--muted); font-weight: 700; }
.book-delete { margin-top: 8px; padding: 0; border: 0; color: #a13d34; background: none; font-size: .72rem; font-weight: 750; }
.book-empty { margin: 4px 0 14px; padding: 16px; border: 1px dashed var(--border); border-radius: 15px; color: var(--muted); font-size: .8rem; line-height: 1.45; text-align: center; }
.import-card h3 { margin: 0 0 6px; font-size: 1.02rem; letter-spacing: -.02em; }
.import-card > p { margin: 0 0 12px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.import-card .primary-button { width: 100%; }
.import-card .progress-sync { margin: 10px 0 0; }
.import-preview h3 { margin: 0 0 4px; font-size: 1.05rem; }
.import-status { margin: 0 0 10px; font-size: .84rem; font-weight: 700; }
.import-bar { margin: 0; }
.import-error { margin: 0 0 12px; color: #a13d34; font-size: .84rem; line-height: 1.45; }
.import-summary { margin: 0 0 10px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.import-warning { margin: 0 0 10px; padding: 9px 11px; border-radius: 10px; color: #8a5a0f; background: var(--amber-pale); font-size: .76rem; line-height: 1.4; }
.import-fields { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 8px; margin: 0 0 12px; }
.import-fields label { display: grid; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.import-fields input, .import-fields select, .reader-nav select, .mw-filters input, .mw-filters select, .reader-search input, .wc-field input { min-width: 0; padding: 9px 10px; border: 1px solid #c7dceb; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: .86rem; letter-spacing: 0; text-transform: none; }
.import-chapters { display: grid; gap: 6px; max-height: 340px; margin: 0 0 10px; padding: 0 0 0 22px; overflow-y: auto; font-size: .78rem; }
.import-chapters li { padding: 4px 0; }
.import-chapters b { display: block; font-size: .84rem; }
.import-chapters small { color: var(--muted); font-size: .66rem; font-weight: 700; }
.import-chapters span { display: block; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.import-sample { margin: 0 0 14px; font-size: .8rem; }
.import-sample summary { color: #1265ad; font-weight: 750; cursor: pointer; }
.import-sample p { font-family: Georgia, "Times New Roman", serif; font-size: .92rem; line-height: 1.6; }
.import-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.import-actions .primary-button:disabled { opacity: .45; }

/* La liseuse. */
.reader-nav { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; margin: 0 0 6px; }
.reader-nav .ghost-button { padding: 0; font-size: 1.1rem; }
.reader-screen .story-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reader-screen .story-toolbar .story-player { grid-column: 1 / -1; }
.reader-english[hidden] { display: none; }
.reader-screen .story-toolbar:has(.reader-english[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reader-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 0 14px; }
.reader-search[hidden] { display: none; }
.search-results { grid-column: 1 / -1; }
.search-count, .search-empty { margin: 2px 0 8px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.search-list { display: grid; gap: 6px; max-height: 50vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.search-list button { display: grid; gap: 2px; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; color: var(--ink); background: #fff; text-align: left; font-size: .8rem; line-height: 1.4; }
.search-list small { color: var(--purple); font-size: .64rem; font-weight: 800; letter-spacing: .04em; }
.search-list mark, .say-word.is-found { border-radius: 3px; background: #ffe29f; color: inherit; }
.reader-text .story-paragraph { scroll-margin-top: 80px; }
.reader-text .bk-say { width: 20px; height: 20px; border-color: transparent; background: var(--blue-pale); }
/* Le texte en anglais d'un livre importé : le bouton « EN » d'un paragraphe et sa traduction. */
.reader-text .bk-en { margin-left: 5px; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: transparent; font: 800 .6rem/1.6 Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .05em; vertical-align: 2px; cursor: pointer; }
.reader-text .bk-en[aria-pressed="true"] { border-color: transparent; color: var(--blue); background: var(--blue-pale); }
.reader-text .bk-en.is-loading { animation: bk-en-wait 1s ease-in-out infinite alternate; }
@keyframes bk-en-wait { to { opacity: .35; } }
.reader-text .bk-english { display: none; margin-top: 6px; color: var(--muted); font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .8rem; font-weight: 400; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.story-text.show-english .bk-english, .reader-text .story-paragraph.show-en .bk-english { display: block; }
.story-text.show-english .bk-en { display: none; }
.bk-english-note { margin: -6px 0 14px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.bk-english-note[hidden] { display: none; }

/* La fiche d'un mot touché dans un livre. */
.word-card { position: fixed; z-index: 30; right: max(12px, calc((100vw - 720px) / 2 + 12px)); bottom: calc(86px + env(safe-area-inset-bottom)); left: max(12px, calc((100vw - 720px) / 2 + 12px)); display: grid; gap: 10px; padding: 14px 15px 15px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(20, 40, 60, .22); }
.word-card[hidden] { display: none; }
.wc-head { display: flex; gap: 8px; align-items: center; }
.wc-head b { font-size: 1.35rem; letter-spacing: -.02em; }
.wc-close { margin-left: auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #f0f3f5; font-size: 1.2rem; line-height: 1; }
.wc-known { margin: -4px 0 0; color: #3c4a55; font-size: .84rem; }
.wc-field { display: grid; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wc-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wc-levels button { min-height: 34px; border: 1px solid #c7dceb; border-radius: 9px; color: var(--muted); background: #fff; font-size: .78rem; font-weight: 800; }
.wc-levels button[aria-pressed="true"] { border-color: var(--purple); color: #fff; background: var(--purple); }
.wc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wc-actions a { margin-right: auto; color: #1265ad; font-size: .8rem; font-weight: 750; text-decoration: none; }
.wc-actions .primary-button { padding: 10px 16px; }

/* Mes mots. */
#deMyWords .mw-summary { display: block; }
.mw-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.mw-count { display: inline-flex; gap: 4px; align-items: baseline; padding: 5px 9px; border-radius: 99px; color: var(--purple); background: var(--purple-pale); font-size: .72rem; font-weight: 800; }
.mw-count.is-empty { color: var(--muted); background: #f0f3f5; }
.mw-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 0 12px; }
.mw-filters { display: grid; grid-template-columns: 1fr 140px; gap: 8px; margin: 0 0 14px; }
.mw-level-group .level-heading .ghost-button { margin-left: auto; }
.mw-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.mw-row { display: grid; gap: 7px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.mw-row.is-reviewed { border-color: #bfe5d9; background: #f6fdfa; }
.mw-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.mw-de { margin: 0; font-size: 1.02rem; font-weight: 800; }
.mw-remove { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #f0f3f5; font-size: 1.05rem; line-height: 1; }
.mw-meaning { width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; color: #3c4a55; background: #f4f6f8; font: inherit; font-size: .84rem; }
.mw-meaning:focus { border-color: #9ec5ff; background: #fff; outline: none; }
.mw-sentence { margin: 0; padding-left: 9px; border-left: 3px solid #e6dcc7; color: #4a5560; font-family: Georgia, "Times New Roman", serif; font-size: .86rem; line-height: 1.45; }
.mw-bottom { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.mw-source { flex: 1 1 140px; color: var(--muted); font-size: .68rem; }
.mw-level { padding: 5px 6px; border: 1px solid #c7dceb; border-radius: 8px; background: #fff; font: inherit; font-size: .74rem; }
.mw-status { padding: 6px 10px; border: 1px solid #c7dceb; border-radius: 8px; color: var(--muted); background: #fff; font-size: .72rem; font-weight: 750; }
.mw-status[aria-pressed="true"] { border-color: #a3d6c8; color: #167b6d; background: #ebfbf4; }
.review-card { text-align: center; }
.review-word { margin: 10px 0 6px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.review-sentence { margin: 0 auto 10px; max-width: 460px; color: #4a5560; font-family: Georgia, "Times New Roman", serif; font-size: .95rem; line-height: 1.5; }
.review-meaning { margin: 0 0 12px; color: var(--purple); font-size: 1.05rem; font-weight: 750; }
.review-actions { display: flex; justify-content: center; gap: 8px; margin: 0 0 8px; }
.review-actions[hidden] { display: none; }
.review-stop { margin-top: 4px; padding: 0; border: 0; color: var(--muted); background: none; font-size: .74rem; font-weight: 750; }
.next-button[hidden], .practice[hidden], .story-glossary[hidden], .import-preview[hidden], .review-card[hidden], .story-restart[hidden] { display: none; }
.reader-text .bk-label { margin-bottom: 6px; font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Le français à côté de l'anglais, et les mots qui ressemblent au français. */
.word-fr { color: #6b5aa6; font-size: .78rem; font-style: italic; }
.word-fr::before { content: "FR · "; font-style: normal; font-size: .6rem; font-weight: 850; letter-spacing: .06em; opacity: .75; }
.verb-en .word-fr { display: block; margin-top: 1px; }
.tag-fr { color: #2f5bb7; background: #e9efff; }
.fr-count { color: #2f5bb7; }
.word-list.only-fr .word-row:not(.is-fr) { display: none; }
.is-testing .word-fr { filter: blur(5px); }
.is-testing .is-revealed .word-fr, .is-testing .verb-en.is-revealed .word-fr { filter: none; }
.word-toolbar.toolbar-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.word-toolbar.toolbar-3 .word-hide { grid-column: 1 / -1; }
.word-toolbar.toolbar-1 .word-hide { grid-column: 1 / -1; }
@media (min-width: 520px) { .word-toolbar.toolbar-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.word-toolbar.toolbar-3 .word-hide { grid-column: auto; } }

/* La recherche dans les listes de mots. */
.word-search { margin: 0 0 18px; }
.word-search input { width: 100%; padding: 12px 14px; border: 1px solid #c7dceb; border-radius: 13px; color: var(--ink); background: #fff; font: inherit; font-size: .9rem; }
.ws-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ws-row { display: grid; gap: 4px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.ws-meaning { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: #3c4a55; font-size: .84rem; }
.ws-bottom { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.level-chip { padding: 2px 7px; border-radius: 6px; color: #fff; background: var(--purple); font-size: .62rem; font-weight: 850; }
.ws-open { margin-right: auto; padding: 0; border: 0; color: #1265ad; background: none; font-size: .74rem; font-weight: 750; text-align: left; }

/* Les traductions dans la recherche d'un livre, et la fiche d'un mot. */
.search-hints { display: grid; gap: 5px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #f1edff; list-style: none; font-size: .82rem; line-height: 1.4; }
.hint-arrow { color: var(--muted); font-size: .76rem; }
.wc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wc-level-hint { margin: -4px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.35; }

/* Mes mots : l'anglais et le français côte à côte. */
.mw-meanings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mw-meanings label { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
.mw-meanings label > span { color: var(--muted); font-size: .6rem; font-weight: 850; letter-spacing: .06em; }
.mw-french { width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; color: #4f3f8a; background: #f4f6f8; font: inherit; font-size: .84rem; font-style: italic; }
.mw-french:focus { border-color: #9ec5ff; background: #fff; outline: none; }
.mw-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0; color: var(--muted); font-size: .7rem; }
.mw-of { color: var(--muted); font-size: .72rem; font-weight: 700; }
.mw-count small { font-size: .62rem; font-weight: 700; opacity: .8; }
.mw-totals-note { margin: 6px 0 0; color: var(--muted); font-size: .66rem; }
@media (max-width: 420px) { .mw-meanings, .wc-fields { grid-template-columns: 1fr; } }

/* Le bouton du thème (clair, sombre, ou celui de l'appareil). */
.theme-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid #dbe3ea; border-radius: 50%; color: var(--ink); background: #fff; font-size: 1.05rem; line-height: 1; }
.wc-auto { margin: -4px 0 0; color: var(--muted); font-size: .68rem; font-style: italic; }

/* Radio et podcasts (#deListen) et le lecteur qui reste en bas de l'écran. */
.feature-listen { border-color: #cfe5dc; background: linear-gradient(150deg, var(--green-pale), #fff); }
.feature-listen .feature-icon { background: var(--green); }
.hero-listen { background: radial-gradient(circle at 95% 12%, #d9f2ea 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #f0ecff 0 78px, transparent 79px); }
.hero-listen h1 em { color: var(--green); }
.listen-tabs { position: sticky; z-index: 3; top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 22px 0 6px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.listen-tabs button { min-height: 38px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: .82rem; font-weight: 800; }
.listen-tabs button[aria-selected="true"] { color: #fff; background: var(--green); }
#listenRadio[hidden], #listenPodcasts[hidden] { display: none; }
.listen-group { margin: 22px 0 6px; }
.listen-group h2 { margin: 0 0 4px; font-size: 1.05rem; }
.listen-intro { margin: 0 0 12px; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.listen-list { display: grid; gap: 10px; }
.listen-card { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: start; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.listen-card.is-podcast { grid-template-columns: 1fr auto; }
.listen-fav { width: 34px; height: 34px; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: 50%; color: #b0b8bf; background: transparent; font-size: 1.25rem; line-height: 1; }
.listen-fav[aria-pressed="true"] { color: #d39a1c; }
.listen-group.is-favourites h2 { color: #a8670f; }
.listen-fav-hint { margin: 16px 0 0; color: var(--muted); font-size: .74rem; }
.listen-subtitles { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #cfe5dc; border-radius: 14px; background: var(--green-pale); }
.listen-subtitles p { margin: 0; font-size: .76rem; line-height: 1.45; }
.listen-hide { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: .78rem; font-weight: 750; }
.listen-hide input { width: 18px; height: 18px; accent-color: var(--green); }
.episode-list li.is-heard b { color: var(--muted); font-weight: 650; }
.episode-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.episode-tools button, .episode-tools a { min-height: 26px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: transparent; font-size: .66rem; font-weight: 800; text-decoration: none; }
.episode-tools [aria-pressed="true"] { border-color: transparent; color: var(--green); background: var(--green-pale); }
.episode-tools [aria-expanded="true"] { border-color: transparent; color: var(--blue); background: var(--blue-pale); }
.episode-notes { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #f6f4ef; color: var(--ink); font-size: .78rem; line-height: 1.5; white-space: pre-line; }
.episode-notes[hidden] { display: none; }
.listen-info h3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: .95rem; }
.listen-info p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.listen-info .listen-by { margin-top: 1px; color: var(--green); font-size: .68rem; font-weight: 800; letter-spacing: .03em; }
.listen-level { padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--blue); font-size: .62rem; font-weight: 850; letter-spacing: .04em; }
.listen-level.level-a1, .listen-level.level-a2 { background: var(--green); }
.listen-level.level-b1 { background: var(--blue); }
.listen-level.level-b2 { background: var(--purple); }
.listen-level.level-c1 { background: var(--coral); }
.listen-play { display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 6px 14px rgba(20, 131, 107, .25); }
.listen-play svg { width: 22px; height: 22px; }
.listen-play.small { width: 34px; height: 34px; box-shadow: none; }
.listen-play.small svg { width: 17px; height: 17px; }
.listen-play.is-playing { background: #0f5f4e; }
.listen-episodes-button { margin-top: 10px; }
.listen-episodes[hidden] { display: none; }
.episode-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.episode-list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.episode-list b { display: block; font-size: .8rem; line-height: 1.35; }
.episode-list small { display: block; margin-top: 2px; color: var(--muted); font-size: .7rem; }
.listen-note { font-size: .76rem; }
.listen-link { display: inline-block; margin-top: 10px; color: var(--blue); font-size: .76rem; font-weight: 750; }
.listen-player { position: fixed; z-index: 6; right: max(12px, calc((100vw - 720px) / 2 + 12px)); bottom: calc(max(13px, env(safe-area-inset-bottom)) + 74px); left: max(12px, calc((100vw - 720px) / 2 + 12px)); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 11px; align-items: center; padding: 9px 10px 9px 9px; border: 1px solid #cfe5dc; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(20, 50, 45, .2); }
.listen-player[hidden] { display: none; }
.lp-toggle { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--green); }
.lp-toggle svg { width: 20px; height: 20px; }
.listen-player.is-loading .lp-toggle { animation: bk-en-wait 1s ease-in-out infinite alternate; }
.lp-text { min-width: 0; }
.lp-title { display: block; overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.lp-sub { display: block; overflow: hidden; color: var(--muted); font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lp-close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #f1f4f2; font-size: 1.2rem; line-height: 1; }
.lp-podcast { display: none; grid-column: 1 / -1; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.listen-player.is-podcast .lp-podcast { display: grid; }
.lp-podcast button { min-width: 38px; height: 30px; padding: 0 7px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: transparent; font-size: .7rem; font-weight: 800; }
.lp-seek { width: 100%; accent-color: var(--green); }
.lp-time { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; text-align: center; }
body.has-listen-player .app-shell { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
body.has-listen-player .word-card { bottom: calc(max(13px, env(safe-area-inset-bottom)) + 160px); }

/* === THÈME SOMBRE (généré par tools/dark-theme.py) === */
/* Les variables, puis chaque couleur écrite en dur dans les règles ci-dessus. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e4ebf2; --muted: #9db0c1; --paper: #121a22; --white: #1a2430;
  --blue: #5aa9f5; --blue-pale: #162a3d; --coral: #f08a7f; --coral-pale: #3a211e;
  --purple: #a592f2; --purple-pale: #251f3f; --green: #3cc3a0; --green-pale: #12302a;
  --amber: #e2a64c; --amber-pale: #33270f; --slate: #93adc6; --slate-pale: #1d2834;
  --mint: #133028; --border: #2c3a47; --shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] body { background: #22272c; }
:root[data-theme="dark"] .install-button { border: 1px solid #374c62; color: #91bde4; background: var(--white); }
:root[data-theme="dark"] .account-button { border: 1px solid #3e4851; background: var(--white); }
:root[data-theme="dark"] .account.is-signed-in .account-button { border-color: #456158; box-shadow: 0 0 0 2px #345347; }
:root[data-theme="dark"] .account-menu { background: var(--white); }
:root[data-theme="dark"] .hero { background: radial-gradient(circle at 95% 12%, #142234 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #221331 0 78px, transparent 79px); }
:root[data-theme="dark"] .primary-button, :root[data-theme="dark"] .complete-button { background: #123f68; }
:root[data-theme="dark"] .progress-card { border: 1px solid #3d4c51; background: #192826; }
:root[data-theme="dark"] .progress-ring { border: 6px solid #3c6159; color: #a0e7de; background: var(--white); }
:root[data-theme="dark"] .time-pill { background: #22282d; }
:root[data-theme="dark"] .status.is-done { color: #9fe7dc; }
:root[data-theme="dark"] .daily-tip { background: #362e15; }
:root[data-theme="dark"] .tip-symbol { color: #e5c595; background: #51431f; }
:root[data-theme="dark"] .daily-tip p, :root[data-theme="dark"] .install-hint { color: #cac1b1; }
:root[data-theme="dark"] .formula-card, :root[data-theme="dark"] .model-answer, :root[data-theme="dark"] .speak-card, :root[data-theme="dark"] .exam-note { background: var(--white); }
:root[data-theme="dark"] .stem-grid div { background: #1e2328; }
:root[data-theme="dark"] .practice-head { background: #123f68; }
:root[data-theme="dark"] .practice-bar span { background: #2e4e49; }
:root[data-theme="dark"] .exercise { border: 2px solid #34495a; background: var(--white); }
:root[data-theme="dark"] .exercise[data-state="correct"] { border-color: #46635b; }
:root[data-theme="dark"] .exercise[data-state="almost"] { border-color: #736037; }
:root[data-theme="dark"] .exercise[data-state="wrong"] { border-color: #663c36; }
:root[data-theme="dark"] .gap.is-filled { color: #a8e9d8; }
:root[data-theme="dark"] .gap-input:focus { outline: 2px solid #2b4771; }
:root[data-theme="dark"] .exercise[data-state="correct"] .gap-input { color: #a8e9d8; background: #182c23; }
:root[data-theme="dark"] .exercise[data-state="almost"] .gap-input { color: #e8cfa4; background: #362e15; }
:root[data-theme="dark"] .exercise[data-state="wrong"] .gap-input { color: #db9690; background: #301712; }
:root[data-theme="dark"] .check-button { background: #123f68; }
:root[data-theme="dark"] .ghost-button { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .order-line { border: 2px dashed #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .order-chip { border: 1px solid #3b4d5a; background: #1c2429; }
:root[data-theme="dark"] .order-line .order-chip { border-color: #2b4771; }
:root[data-theme="dark"] .order-chip.is-correct { color: #a8e9d8; background: #182c23; }
:root[data-theme="dark"] .order-chip.is-wrong { color: #db9690; background: #301712; }
:root[data-theme="dark"] .exercise[data-state="correct"] .feedback strong { color: #a8e9d8; }
:root[data-theme="dark"] .exercise[data-state="almost"] .feedback strong { color: #e7cb9f; }
:root[data-theme="dark"] .exercise[data-state="wrong"] .feedback strong { color: #db9690; }
:root[data-theme="dark"] .practice-result { border: 1px solid #3d5b53; background: #172a23; }
:root[data-theme="dark"] .result-score { color: #aaeadf; }
:root[data-theme="dark"] .result-message { color: #aacbc5; }
:root[data-theme="dark"] .choice-row button { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .choice-row button.is-correct { color: #a8e9d8; background: #182c23; }
:root[data-theme="dark"] .choice-row button.is-wrong { color: #db9690; background: #301712; }
:root[data-theme="dark"] .complete-button.is-complete { color: #a2e8de; border: 1px solid #46635b; background: #182d24; }
:root[data-theme="dark"] .connector-map article { background: var(--white); }
:root[data-theme="dark"] .connector-map article:nth-child(3n + 1) { background: #2f1712; }
:root[data-theme="dark"] .connector-map article:nth-child(3n + 2) { background: #122130; }
:root[data-theme="dark"] .connector-map article:nth-child(3n) { background: #191230; }
:root[data-theme="dark"] .model-answer { background: var(--white); }
:root[data-theme="dark"] .model-answer mark { background: #4f401e; }
:root[data-theme="dark"] details { background: var(--white); }
:root[data-theme="dark"] .grammar-note { background: #312813; }
:root[data-theme="dark"] .exam-note { border-color: #352664; }
:root[data-theme="dark"] .exam-note p { color: #b5aece; }
:root[data-theme="dark"] .speak-card { border-color: #3d5b53; background: #172a23; }
:root[data-theme="dark"] .timer-controls select, :root[data-theme="dark"] .timer-controls button { border: 1px solid #445b56; background: var(--white); }
:root[data-theme="dark"] .timer-controls output { color: #aaeadf; }
:root[data-theme="dark"] .timer-tip { color: #aacbc5; }
:root[data-theme="dark"] .bottom-nav { border: 1px solid #3e4851; }
:root[data-theme="dark"] .bottom-nav button.is-selected { color: #9ac4e6; background: #132332; }
:root[data-theme="dark"] .toast { background: #123f68; }
:root[data-theme="dark"] .hero-de { background: radial-gradient(circle at 95% 12%, #40321a 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #361a14 0 78px, transparent 79px); }
:root[data-theme="dark"] .next-button { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .de-banner { border: 1px solid #695835; background: linear-gradient(120deg, #322813, #301a12); }
:root[data-theme="dark"] .de-flag { background: linear-gradient(#3d3d3d 0 33.3%, #dd3a2f 33.3% 66.6%, #f5c518 66.6%); }
:root[data-theme="dark"] .say-button { border: 1px solid #3b4d5a; color: #91bde4; background: var(--white); }
:root[data-theme="dark"] .say-button.icon.phrase { border-color: #374c62; color: #91bde4; }
:root[data-theme="dark"] .voice-controls select, :root[data-theme="dark"] .voice-controls button { border: 1px solid #445b56; background: var(--white); }
:root[data-theme="dark"] .voice-help { background: var(--white); }
:root[data-theme="dark"] .umlaut-key { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .feature-read { border-color: #695835; background: linear-gradient(150deg, #322813, var(--white)); }
:root[data-theme="dark"] .feature-watch { border-color: #613933; background: linear-gradient(150deg, #301912, var(--white)); }
:root[data-theme="dark"] .hero-read { background: radial-gradient(circle at 95% 12%, #40321a 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #1d302a 0 78px, transparent 79px); }
:root[data-theme="dark"] .hero-watch { background: radial-gradient(circle at 95% 12%, #361a14 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #132232 0 78px, transparent 79px); }
:root[data-theme="dark"] .story-de.is-paused-here { box-shadow: 0 0 0 2px var(--border), 0 0 0 4px #f1c86a; }
:root[data-theme="dark"] .story-grammar { border: 1px solid #352664; }
:root[data-theme="dark"] .story-grammar > p:not(.card-kicker) { color: #b5aece; }
:root[data-theme="dark"] .grammar-examples li { background: var(--white); }
:root[data-theme="dark"] .story-toggle[aria-pressed="true"] { border-color: #2b4771; color: #9ac4e6; }
:root[data-theme="dark"] .story-text { background: var(--white); }
:root[data-theme="dark"] .is-speaking:not(button):not(.say-word) { background: #4f401e; box-shadow: 0 0 0 3px #715c2b; }
:root[data-theme="dark"] .glossary-list li { background: #1e2328; }
:root[data-theme="dark"] .practise-more { border: 1px solid #58503e; background: var(--white); }
:root[data-theme="dark"] .more-link { background: var(--white); }
:root[data-theme="dark"] .video-card { background: var(--white); }
:root[data-theme="dark"] .video-frame { background: #203f5b; }
:root[data-theme="dark"] .video-play { background: #203f5b; }
:root[data-theme="dark"] .video-link { color: #91bde4; }
:root[data-theme="dark"] .video-more a { color: #91bde4; }
:root[data-theme="dark"] .channel-list a { color: #91bde4; }
:root[data-theme="dark"] .feature-words { border-color: #352664; background: linear-gradient(150deg, var(--purple-pale), var(--white)); }
:root[data-theme="dark"] .feature-verbs { border-color: #3e5c52; background: linear-gradient(150deg, var(--green-pale), var(--white)); }
:root[data-theme="dark"] .hero-words { background: radial-gradient(circle at 95% 12%, #1d1436 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #132232 0 78px, transparent 79px); }
:root[data-theme="dark"] .hero-verbs { background: radial-gradient(circle at 95% 12%, #21352e 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #352a17 0 78px, transparent 79px); }
:root[data-theme="dark"] .cousin-list li { background: #1d2125; }
:root[data-theme="dark"] .word-row { background: var(--white); }
:root[data-theme="dark"] .word-row.is-ff { border-color: #695835; background: var(--white); }
:root[data-theme="dark"] .word-meaning { color: #bbc6cf; }
:root[data-theme="dark"] .ff-note { color: #e7cb9f; }
:root[data-theme="dark"] .verb-card { background: var(--white); }
:root[data-theme="dark"] .verb-en { color: #bbc6cf; }
:root[data-theme="dark"] .verb-form small { color: #a4d2c7; }
:root[data-theme="dark"] .conj { background: #1d2125; }
:root[data-theme="dark"] .verb-example { border-left: 3px solid #3c534b; }
:root[data-theme="dark"] .print-button { color: #abcbea; }
:root[data-theme="dark"] .library-list a { background: var(--white); }
:root[data-theme="dark"] .feature-books { border-color: #37495c; background: linear-gradient(150deg, var(--blue-pale), var(--white)); }
:root[data-theme="dark"] .feature-mywords { border-color: #695835; background: linear-gradient(150deg, #352c14, var(--white)); }
:root[data-theme="dark"] .hero-books { background: radial-gradient(circle at 95% 12%, #152538 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #352a17 0 78px, transparent 79px); }
:root[data-theme="dark"] .hero-mywords { background: radial-gradient(circle at 95% 12%, #40321a 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #191230 0 78px, transparent 79px); }
:root[data-theme="dark"] .save-word { border: 1px solid #695835; color: #e2c48b; background: var(--white); }
:root[data-theme="dark"] .book-delete { color: #db9690; }
:root[data-theme="dark"] .import-error { color: #db9690; }
:root[data-theme="dark"] .import-warning { color: #e7cb9f; }
:root[data-theme="dark"] .import-fields input, :root[data-theme="dark"] .import-fields select, :root[data-theme="dark"] .reader-nav select, :root[data-theme="dark"] .mw-filters input, :root[data-theme="dark"] .mw-filters select, :root[data-theme="dark"] .reader-search input, :root[data-theme="dark"] .wc-field input { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .import-sample summary { color: #91bde4; }
:root[data-theme="dark"] .search-list button { background: var(--white); }
:root[data-theme="dark"] .search-list mark, :root[data-theme="dark"] .say-word.is-found { background: #4f401e; }
:root[data-theme="dark"] .word-card { background: var(--white); }
:root[data-theme="dark"] .wc-close { background: #1e2328; }
:root[data-theme="dark"] .wc-known { color: #bbc6cf; }
:root[data-theme="dark"] .wc-levels button { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .wc-actions a { color: #91bde4; }
:root[data-theme="dark"] .mw-count.is-empty { background: #1e2328; }
:root[data-theme="dark"] .mw-row { background: var(--white); }
:root[data-theme="dark"] .mw-row.is-reviewed { border-color: #3e5c52; background: var(--white); }
:root[data-theme="dark"] .mw-remove { background: #1e2328; }
:root[data-theme="dark"] .mw-meaning { color: #bbc6cf; background: #1d2125; }
:root[data-theme="dark"] .mw-meaning:focus { border-color: #2b4771; background: var(--white); }
:root[data-theme="dark"] .mw-sentence { border-left: 3px solid #58503e; color: #b7bfc8; }
:root[data-theme="dark"] .mw-level { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .mw-status { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .mw-status[aria-pressed="true"] { border-color: #46635b; color: #a2e8de; background: #182d24; }
:root[data-theme="dark"] .review-sentence { color: #b7bfc8; }
:root[data-theme="dark"] .tag-fr { background: #131b31; }
:root[data-theme="dark"] .word-search input { border: 1px solid #3b4d5a; background: var(--white); }
:root[data-theme="dark"] .ws-row { background: var(--white); }
:root[data-theme="dark"] .ws-meaning { color: #bbc6cf; }
:root[data-theme="dark"] .ws-open { color: #91bde4; }
:root[data-theme="dark"] .search-hints { background: #191230; }
:root[data-theme="dark"] .mw-french { color: #a99ed3; background: #1d2125; }
:root[data-theme="dark"] .mw-french:focus { border-color: #2b4771; background: var(--white); }
:root[data-theme="dark"] .theme-button { border: 1px solid #3e4851; background: var(--white); }
:root[data-theme="dark"] .feature-listen { border-color: #404b54; background: linear-gradient(150deg, var(--green-pale), var(--white)); }
:root[data-theme="dark"] .hero-listen { background: radial-gradient(circle at 95% 12%, #21332d 0 58px, transparent 59px), radial-gradient(circle at 5% 92%, #191230 0 78px, transparent 79px); }
:root[data-theme="dark"] .listen-tabs { background: var(--white); }
:root[data-theme="dark"] .listen-card { background: var(--white); }
:root[data-theme="dark"] .listen-group.is-favourites h2 { color: #e4c294; }
:root[data-theme="dark"] .listen-subtitles { border: 1px solid #404b54; }
:root[data-theme="dark"] .episode-notes { background: #1e2328; }
:root[data-theme="dark"] .listen-play.is-playing { background: #116a57; }
:root[data-theme="dark"] .listen-player { border: 1px solid #404b54; background: var(--white); }
:root[data-theme="dark"] .lp-close { background: #1e2328; }
/* === FIN DU THÈME SOMBRE === */
/* Réglages sombres faits à la main (gardés quand on relance tools/dark-theme.py). */
:root[data-theme="dark"] .bottom-nav { background: rgba(22, 31, 41, .94); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .toast { box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .word-fr { color: #b3a6f0; }

/* Langue des traductions dans la liseuse (EN / FR), dictionnaire de la fiche, livres gratuits */
.reader-lang { display: inline-flex; min-height: 44px; padding: 3px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface, #fff); }
.reader-lang button { flex: 1; min-width: 40px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font: 800 .74rem/1 Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .05em; cursor: pointer; }
.reader-lang button[aria-pressed="true"] { color: #0d5a99; background: var(--blue-pale); }
.wc-dict i { color: var(--muted); font-size: .76rem; }
.wc-alt { margin: -4px 0 0; color: #3c4a55; font-size: .78rem; }
.wc-actions a:first-child { margin-right: 0; }
.book-source { margin: 4px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.book-source a { color: #1265ad; font-weight: 700; text-decoration: none; }
.book-free-intro { margin: 4px 0 0; font-size: .82rem; }
:root[data-theme="dark"] .reader-lang { background: transparent; }
:root[data-theme="dark"] .reader-lang button[aria-pressed="true"] { color: #9ac4e6; }
:root[data-theme="dark"] .wc-alt { color: #bbc6cf; }
:root[data-theme="dark"] .book-source a { color: #9ac4e6; }

/* Signets, passages surlignés, mots déjà enregistrés (liseuse) */
.reader-marks { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface, #fff); }
.reader-marks h2 { margin: 0 0 8px; font-size: .95rem; }
.reader-marks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reader-marks li { display: flex; gap: 6px; align-items: flex-start; }
.reader-marks .rm-open { flex: 1; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: inherit; text-align: left; font: inherit; font-size: .84rem; cursor: pointer; }
.reader-marks .rm-open small { color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .03em; }
.reader-marks .rm-remove { min-width: 36px; min-height: 36px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 1.1rem; cursor: pointer; }
.reader-marks .rm-empty { color: var(--muted); font-size: .82rem; }
#readerText [data-p].is-bookmarked { position: relative; }
#readerText [data-p].is-bookmarked::before { content: ""; position: absolute; left: -12px; top: 4px; width: 4px; height: 1.4em; border-radius: 2px; background: #e0a100; }
.reader-highlight { position: fixed; z-index: 40; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 10px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
::highlight(cap-highlight) { background-color: rgba(255, 214, 92, .55); color: inherit; }
#readerText.mark-saved .say-word.is-saved { text-decoration: underline; text-decoration-style: solid; text-decoration-color: #c2410c; text-decoration-thickness: 2px; text-underline-offset: 3px; background: rgba(251, 146, 60, .12); border-radius: 3px; }
:root[data-theme="dark"] .reader-marks { background: transparent; }
:root[data-theme="dark"] ::highlight(cap-highlight) { background-color: rgba(202, 138, 4, .45); }
:root[data-theme="dark"] #readerText.mark-saved .say-word.is-saved { text-decoration-color: #fdba74; background: rgba(251, 146, 60, .16); }
.mh-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mh-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface, #fff); }
.mh-de { margin: 0 0 6px; font-weight: 650; }
.mh-tr { margin: 2px 0; color: #3c4a55; font-size: .86rem; }
.mh-tr b { display: inline-block; min-width: 26px; color: var(--muted); font-size: .7rem; }
.mh-bottom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: .74rem; color: var(--muted); }
.mh-bottom .mh-source { margin-right: auto; }
:root[data-theme="dark"] .mh-row { background: transparent; }
:root[data-theme="dark"] .mh-tr { color: #bbc6cf; }
.mw-highlights { margin-top: 22px; }
.mw-highlights h2 { margin: 0 0 4px; font-size: 1.05rem; }
.mw-highlights h2 small { color: var(--muted); font-weight: 600; }
.mh-list .mw-empty { color: var(--muted); font-size: .85rem; list-style: none; }
/* Histoires : traduction anglaise ou française (les deux sont dans la page) */
.story-screen.tr-en [data-tr="fr"], .story-screen.tr-fr [data-tr="en"] { display: none !important; }
.mh-note { margin: 4px 0 0; color: var(--muted); font-size: .72rem; font-style: italic; }
.reader-highlight[hidden], .reader-marks[hidden] { display: none; }

/* Traduction phrase par phrase (livres gratuits et importés) : chaque traduction sous sa phrase. */
.reader-text .bk-line { display: none; }
.story-text.show-english .bk-line, .reader-text .story-paragraph.show-en .bk-line { display: block; margin: 2px 0 9px; padding-left: 9px; border-left: 2px solid rgba(18, 101, 173, .22); color: var(--muted); font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .8rem; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.42; text-transform: none; overflow-wrap: anywhere; }
.story-text.show-english .bk-line:last-of-type, .reader-text .story-paragraph.show-en .bk-line:last-of-type { margin-bottom: 4px; }
:root[data-theme="dark"] .story-text.show-english .bk-line, :root[data-theme="dark"] .reader-text .story-paragraph.show-en .bk-line { border-left-color: rgba(147, 197, 253, .3); color: #b9c4ce; }

/* Chansons (#deSongs) et vers dans la liseuse */
.song-new { white-space: nowrap; }
.song-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.song-row { display: flex; gap: 8px; align-items: center; padding: 10px 10px 10px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface, #fff); }
.song-open { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.song-title { font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.song-open small { color: var(--muted); font-size: .76rem; }
.song-level { padding: 1px 6px; border-radius: 6px; background: rgba(124, 58, 237, .12); color: #6d28d9; font-size: .7rem; }
.song-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.song-actions .ghost-button { min-height: 36px; padding: 6px 10px; font-size: .8rem; text-decoration: none; }
.song-form { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface, #fff); }
.song-form[hidden] { display: none; }
.song-form h2 { margin: 0; font-size: 1.1rem; }
.song-form label { display: grid; gap: 5px; font-size: .82rem; font-weight: 650; }
.song-form label small { color: var(--muted); font-weight: 500; }
.song-form input, .song-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.song-form textarea { min-height: 240px; resize: vertical; line-height: 1.5; font-family: Georgia, "Times New Roman", serif; }
.song-form-note { margin: 0; color: var(--muted); font-size: .74rem; }
.song-form-note a { font-weight: 650; }
.song-find-row button:disabled { opacity: .6; cursor: wait; }
.song-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.reader-song-link { margin: -4px 0 10px; font-size: .84rem; }
.reader-song-link a[hidden] { display: none; }
.reader-screen.is-song .reader-nav, .reader-screen.is-song #readerComplete, .reader-screen.is-song #readerNext, .reader-screen.is-song #readerQuiz { display: none; }
.reader-text .story-paragraph.is-song .story-de { display: block; }
.reader-text .story-paragraph.is-song { margin-bottom: 22px; }
.story-text.show-english .is-song .bk-line { margin: 0 0 7px; }
.reader-text.is-editing .bk-line, #readerText.is-editing .bk-line { padding: 3px 8px; border: 1px dashed rgba(18, 101, 173, .45); border-radius: 8px; color: inherit; background: rgba(18, 101, 173, .05); cursor: text; }
#readerEditLines[aria-pressed="true"] { background: var(--blue-pale, #e6f0fb); }
:root[data-theme="dark"] .song-row, :root[data-theme="dark"] .song-form { background: transparent; }
:root[data-theme="dark"] .song-level { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
:root[data-theme="dark"] #readerText.is-editing .bk-line { border-color: rgba(147, 197, 253, .5); background: rgba(147, 197, 253, .06); }
.feature-songs { border-color: #e5cdf5; background: linear-gradient(150deg, #f7ecff, #fff); }
.feature-songs .feature-icon { background: #8b5cf6; }
:root[data-theme="dark"] .feature-songs { border-color: #4d3a66; background: linear-gradient(150deg, #2c2140, var(--white)); }

/* Chansons : recherche LRCLIB, vidéo YouTube et vers minutés */
.song-find { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(139, 92, 246, .07); }
.song-find label { font-size: .82rem; font-weight: 650; }
.song-find label small { color: var(--muted); font-weight: 500; }
.song-find-row { display: flex; gap: 8px; }
.song-find-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.song-find-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.song-find-pick { width: 100%; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.song-find-pick span { font-weight: 650; overflow-wrap: anywhere; }
.song-find-pick small { color: var(--muted); font-size: .74rem; }
.song-find-pick small.is-synced { color: #15803d; font-weight: 650; }
.sp-video { position: sticky; top: 0; z-index: 30; margin: 0 -4px 10px; aspect-ratio: 16 / 9; max-height: 34vh; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.sp-video[hidden] { display: none; }
.sp-video iframe, .sp-video > div { display: block; width: 100%; height: 100%; border: 0; }
.song-player { display: grid; gap: 8px; margin: 0 0 10px; }
.song-player[hidden], .sp-sync[hidden], .sp-url[hidden], .sp-change[hidden] { display: none; }
.sp-sync { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.sp-sync .ghost-button { min-height: 36px; padding: 6px 12px; font-size: .8rem; }
#songFollow[aria-pressed="true"] { background: var(--blue-pale, #e6f0fb); }
.sp-offset { display: inline-flex; gap: 6px; align-items: center; }
.sp-offset output { min-width: 3.6em; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.sp-url { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-url input { flex: 1 1 200px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.sp-url .ghost-button { min-height: 38px; padding: 6px 12px; font-size: .8rem; text-decoration: none; }
.sp-change { justify-self: start; padding: 0; border: 0; background: none; color: var(--blue, #1265ad); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.sp-note { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }
#readerText.is-synced .story-paragraph.is-song { padding-left: 28px; }
#readerText .sp-seek { float: left; clear: left; width: 24px; height: 24px; margin: 4px 0 0 -30px; padding: 0; border: 0; border-radius: 50%; background: rgba(18, 101, 173, .1); color: var(--blue, #1265ad); font-size: .62rem; line-height: 24px; cursor: pointer; user-select: none; -webkit-user-select: none; }
#readerText .story-de.is-current { border-radius: 6px; background: rgba(139, 92, 246, .14); box-shadow: 0 0 0 4px rgba(139, 92, 246, .14); }
#readerText .bk-line.is-current { color: inherit; border-left-color: #8b5cf6; }
:root[data-theme="dark"] .song-find { background: rgba(167, 139, 250, .1); }
:root[data-theme="dark"] .song-find-pick { background: transparent; }
:root[data-theme="dark"] .song-find-pick small.is-synced { color: #86efac; }
:root[data-theme="dark"] #readerText .sp-seek { background: rgba(147, 197, 253, .15); color: #93c5fd; }
:root[data-theme="dark"] #readerText .story-de.is-current { background: rgba(167, 139, 250, .22); box-shadow: 0 0 0 4px rgba(167, 139, 250, .22); }
/* overflow: hidden sur .app-shell empêcherait la vidéo de rester en haut (sticky) : clip coupe
   de la même façon sans créer de zone de défilement. */
@supports (overflow: clip) { .app-shell { overflow: clip; } }

/* ——— Visuels des leçons (visuals.js) ——— */
/* Le genre des noms : der bleu, die corail, das vert ; lisible en clair et en sombre. */
:root { --g-m: #1565c0; --g-f: #c8423a; --g-n: #11805f; --g-m-pale: #e6f0fd; --g-f-pale: #fdecea; --g-n-pale: #e1f5ec; --case-acc: #c8423a; --case-dat: #6a4bd0; }
:root[data-theme="dark"] { --g-m: #74b4ff; --g-f: #ff9a8f; --g-n: #4fd3a8; --g-m-pale: #16283d; --g-f-pale: #3a201d; --g-n-pale: #113026; --case-acc: #ff9a8f; --case-dat: #b3a2ff; }
.g-m { color: var(--g-m); } .g-f { color: var(--g-f); } .g-n { color: var(--g-n); }
.g-word { font-weight: 750; }
.g-icon { display: none; margin-right: 3px; font-style: normal; font-size: .9em; }
:root[data-gender="characters"] .g-icon { display: inline; }
:root[data-gender="off"] .g-m, :root[data-gender="off"] .g-f, :root[data-gender="off"] .g-n { color: inherit; }
:root[data-gender="off"] .g-badge { background: var(--slate-pale); }
.g-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; vertical-align: 2px; }
.g-badge.g-m { background: var(--g-m-pale); } .g-badge.g-f { background: var(--g-f-pale); } .g-badge.g-n { background: var(--g-n-pale); }
/* Dans la liseuse : les noms prennent la couleur de leur genre, sans gras (lecture longue). */
#readerText.mark-gender .say-word.g-m, .story-text .say-word.g-m { color: var(--g-m); } #readerText.mark-gender .say-word.g-f, .story-text .say-word.g-f { color: var(--g-f); } #readerText.mark-gender .say-word.g-n, .story-text .say-word.g-n { color: var(--g-n); }
:root[data-gender="off"] #readerText .say-word.g-m, :root[data-gender="off"] #readerText .say-word.g-f, :root[data-gender="off"] #readerText .say-word.g-n, :root[data-gender="off"] .story-text .say-word.g-m, :root[data-gender="off"] .story-text .say-word.g-f, :root[data-gender="off"] .story-text .say-word.g-n { color: inherit; }
.wc-signal { margin: 0 0 8px; padding: 7px 10px; border-radius: 10px; background: var(--mint); font-size: .74rem; line-height: 1.38; }
.wc-signal.is-exception { background: var(--amber-pale); }

/* Le réglage du genre (accueil allemand et liseuse). */
.gender-pref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--white); }
.gender-pref > p { flex: 1 1 180px; margin: 0; font-size: .76rem; line-height: 1.35; }
.gender-pref > p b { display: block; font-size: .82rem; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--slate-pale); }
.seg button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 800; }
.seg button[aria-pressed="true"] { color: var(--ink); background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }

/* Les signaux de genre. */
.signal-card, .structure-card, .scene-card, .lt-card { margin: 18px 0; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--white); }
.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.signal-col { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; border-radius: 13px; font-size: .8rem; font-weight: 750; }
.signal-col.g-m { background: var(--g-m-pale); } .signal-col.g-f { background: var(--g-f-pale); } .signal-col.g-n { background: var(--g-n-pale); }
.signal-col > b { margin-bottom: 4px; font-size: 1.15rem; letter-spacing: -.03em; }
:root[data-gender="characters"] .signal-col .g-icon { display: inline; }
.signal-col small { margin-top: 5px; color: var(--muted); font-size: .64rem; font-weight: 650; line-height: 1.3; }

/* Le schéma de la phrase : place 1 │ verbe ① │ milieu │ verbe ②. */
.structure-card h2 { margin: 0 0 10px; font-size: 1.05rem; letter-spacing: -.03em; }
.ss-legend { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.ss-legend span { padding: 3px 8px; border-radius: 99px; font-size: .6rem; font-weight: 800; letter-spacing: .04em; }
.ss-rows { display: grid; gap: 10px; }
.ss-row { padding: 9px; border-radius: 14px; background: var(--paper); }
.ss-cells { display: flex; flex-wrap: wrap; align-items: stretch; gap: 5px; }
.ss-cell { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 9px; border-radius: 9px; font-size: .86rem; font-weight: 700; line-height: 1.2; }
.ss-cell.is-empty { min-width: 26px; justify-content: center; color: var(--muted); opacity: .45; }
.ss-first, .ss-legend .ss-first { background: var(--slate-pale); color: var(--ink); }
.ss-v1, .ss-v2, .ss-legend .ss-v1, .ss-legend .ss-v2 { color: #fff; background: var(--blue); }
.ss-v2 { margin-left: auto; }
.ss-mid, .ss-legend .ss-mid { flex: 1 1 auto; background: transparent; border: 1.5px dashed var(--border); color: var(--ink); }
.ss-conj { color: #fff; background: var(--purple); }
.ss-pre { color: var(--muted); background: transparent; border: 1.5px dotted var(--border); font-weight: 600; }
.ss-after { background: var(--amber-pale); }
.is-sub .ss-v2 { background: var(--purple); }
.ss-cell.ss-v1.is-empty, .ss-cell.ss-v2.is-empty { color: var(--muted); background: transparent; border: 1.5px dashed var(--border); }
:root[data-theme="dark"] .ss-v1, :root[data-theme="dark"] .ss-v2, :root[data-theme="dark"] .ss-conj, :root[data-theme="dark"] .ss-legend .ss-v1, :root[data-theme="dark"] .ss-legend .ss-v2 { color: #0d1620; }
.ss-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.ss-en { flex: 1; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.ss-play { flex: none; padding: 4px 9px; border: 1px solid var(--purple); border-radius: 99px; color: var(--purple); background: var(--purple-pale); font-size: .7rem; font-weight: 800; }
.ss-row.is-playing .ss-v1 { animation: ss-v1 .9s ease; }
.ss-row.is-playing .ss-v2 { animation: ss-v2 1.1s cubic-bezier(.3, .8, .3, 1); }
@keyframes ss-v1 { 0% { transform: scale(.7); } 50% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes ss-v2 { 0% { transform: translateX(calc(-1 * var(--ss-gap, 140px))); opacity: .2; } 30% { opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ss-row.is-playing .ss-v1, .ss-row.is-playing .ss-v2 { animation: none; } }

/* La scène Wo ? / Wohin ? */
.scene-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.scene-kinds button, .scene-preps button { padding: 8px 6px; border: 1.5px solid var(--border); border-radius: 12px; color: var(--ink); background: var(--white); font-size: .7rem; line-height: 1.25; }
.scene-kinds button b { display: block; font-size: .95rem; }
.scene-kinds button[data-scene-kind="wo"][aria-pressed="true"] { border-color: var(--case-dat); background: var(--purple-pale); }
.scene-kinds button[data-scene-kind="wohin"][aria-pressed="true"] { border-color: var(--case-acc); background: var(--coral-pale); }
.scene-svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.sc-wall { fill: #f3efe6; } .sc-floor { fill: #e2d5bf; } .sc-frame { fill: none; stroke: #d8cfbf; stroke-width: 2; stroke-dasharray: 4 4; }
.sc-box path { fill: #d9a35f; stroke: #a56f2e; stroke-width: 2; } .sc-box .sc-box-front { fill: #c98e48; }
.sc-table rect { fill: #8b5e3c; } .sc-sofa rect { fill: #5b8fc9; }
.sc-label { fill: #6b5a43; font-size: 10px; font-weight: 700; font-family: inherit; }
.sc-path { fill: none; stroke: var(--case-acc); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0; transition: opacity .3s; }
.sc-path.is-on { opacity: .9; }
.sc-item { transition: transform .9s cubic-bezier(.35, .9, .3, 1.15); }
.sc-item.is-behind text { opacity: .55; }
.sc-pulse { fill: none; stroke: var(--case-dat); stroke-width: 2; opacity: 0; }
.sc-item.is-still .sc-pulse { animation: sc-pulse 1.6s ease-out 2; }
@keyframes sc-pulse { 0% { opacity: .8; r: 12; } 100% { opacity: 0; r: 24; } }
:root[data-theme="dark"] .sc-wall { fill: #253241; } :root[data-theme="dark"] .sc-floor { fill: #3a3326; } :root[data-theme="dark"] .sc-label { fill: #c9b896; }
.scene-sentence { margin: 12px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; line-height: 1.4; }
.case-dat { color: var(--case-dat); } .case-acc { color: var(--case-acc); }
.scene-sentence b { padding: 0 3px; border-radius: 5px; }
.scene-sentence b.case-dat { background: var(--purple-pale); } .scene-sentence b.case-acc { background: var(--coral-pale); }
.scene-rule { margin: 0 0 12px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.scene-preps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.scene-preps button b { display: block; font-size: .9rem; }
.scene-preps button small { color: var(--muted); font-size: .62rem; }
.scene-preps button[aria-pressed="true"] { border-color: var(--ink); background: var(--slate-pale); }
@media (prefers-reduced-motion: reduce) { .sc-item { transition: none; } }

/* Tableaux des leçons en données. */
.lt-scroll { overflow-x: auto; }
.lt-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.lt-table th, .lt-table td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.lt-table thead th { color: var(--muted); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.lt-table tbody th { color: var(--muted); font-size: .72rem; font-weight: 700; }
.lt-table td { font-weight: 650; }
:root[data-gender="off"] .art-der, :root[data-gender="off"] .art-die, :root[data-gender="off"] .art-das { color: inherit; }
.wc-head .g-badge { margin: 0 4px 0 0; }

/* Le tableau des cas (visuals.js) : les articles qui changent se retournent et restent surlignés. */
.cases-card, .prefix-card { margin: 18px 0; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--white); }
.ct-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; margin-bottom: 10px; }
.ct-tabs button { padding: 7px 4px; border: 1.5px solid var(--border); border-radius: 12px; color: var(--ink); background: var(--white); font-size: .66rem; line-height: 1.2; }
.ct-tabs button b { display: block; font-size: .74rem; }
.ct-tabs button small { color: var(--muted); }
.ct-tabs button[aria-pressed="true"] { border-color: var(--ink); background: var(--slate-pale); }
.ct-table { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: .8rem; }
.ct-table thead th { font-size: .74rem; font-weight: 850; text-align: center; }
.ct-table tbody th { color: var(--muted); font-size: .64rem; font-weight: 800; text-align: left; white-space: nowrap; }
.ct-cell { padding: 7px 4px; border-radius: 10px; background: var(--paper); text-align: center; line-height: 1.25; }
.ct-cell .ct-art { display: block; font-size: .95rem; }
.ct-cell .ct-noun { color: var(--muted); font-size: .7rem; font-weight: 650; }
.ct-cell .ct-noun u { color: var(--ink); font-weight: 850; text-decoration: none; background: var(--amber-pale); border-radius: 3px; padding: 0 1px; }
.ct-cell.g-m .ct-art { color: var(--g-m); } .ct-cell.g-f .ct-art { color: var(--g-f); } .ct-cell.g-n .ct-art { color: var(--g-n); }
:root[data-gender="off"] .ct-cell .ct-art { color: inherit; }
.ct-cell.is-changed { animation: ct-flip .6s ease; background: #fff3c4; box-shadow: inset 0 0 0 1.5px #e5b937; }
.ct-cell.is-same { opacity: .55; transition: opacity .4s; }
@keyframes ct-flip { 0% { transform: rotateX(90deg); } 60% { transform: rotateX(-12deg); } 100% { transform: none; } }
:root[data-theme="dark"] .ct-cell.is-changed { background: #3d3412; box-shadow: inset 0 0 0 1.5px #a8862a; }
.ct-role { margin: 10px 0 4px; font-size: .78rem; line-height: 1.4; }
.ct-example { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.45; }
.ct-example small { display: block; color: var(--muted); font-family: inherit; font-size: .72rem; }
.ct-hit { padding: 0 3px; border-radius: 5px; }
.ct-nom { color: var(--slate); } .ct-acc { color: var(--case-acc); } .ct-dat { color: var(--case-dat); } .ct-gen { color: var(--amber); }
.ct-hit.ct-nom { background: var(--slate-pale); } .ct-hit.ct-acc { background: var(--coral-pale); } .ct-hit.ct-dat { background: var(--purple-pale); } .ct-hit.ct-gen { background: var(--amber-pale); }
@media (prefers-reduced-motion: reduce) { .ct-cell.is-changed { animation: none; } }

/* Les préfixes. */
.prefix-card h2 { margin: 12px 0 8px; font-size: .86rem; letter-spacing: -.02em; }
.prefix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.prefix-item { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; padding: 9px; border-radius: 12px; font-size: .72rem; line-height: 1.3; }
.prefix-item.is-separable { background: var(--purple-pale); } .prefix-item.is-inseparable { background: var(--green-pale); }
.prefix-arrow { grid-row: span 3; display: grid; height: 30px; place-items: center; border-radius: 9px; background: var(--white); font-size: .9rem; font-weight: 800; }
.prefix-item b { font-size: .95rem; }
.prefix-item small { color: var(--muted); font-size: .64rem; }

/* La scène à imaginer (fiche d'un mot, My words, révision). */
.wc-scene input { font-size: .82rem; }
.mw-scene, .review-scene { margin: 4px 0 0; color: var(--muted); font-size: .74rem; font-style: italic; line-height: 1.35; }

/* Répétition espacée et images (My words, listes de mots). */
.mw-review-modes { margin: 10px 0 4px; }
.mw-review-modes .seg { display: flex; }
.mw-review-modes .seg button { flex: 1; }
.mw-due { margin: 8px 2px 0; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.mw-box { color: var(--muted); font-size: .64rem; font-weight: 750; letter-spacing: .04em; white-space: nowrap; }
.mw-pic, .word-pic, .wc-pic { margin-right: 6px; font-size: 1.25em; line-height: 1; vertical-align: -2px; }
.review-picture { margin: 4px 0 6px; font-size: 4.2rem; line-height: 1.1; text-align: center; }
.review-prompt { margin: 0 0 10px; font-size: 1.05rem; font-weight: 750; line-height: 1.35; }
.review-type { display: flex; gap: 8px; margin: 0 0 10px; }
.review-type input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 12px; color: var(--ink); background: var(--white); font-size: 1rem; }
.review-result { margin: 0 0 6px; font-weight: 800; }
.review-result.is-right { color: var(--green); } .review-result.is-almost { color: var(--amber); } .review-result.is-wrong { color: var(--coral); }

/* Le chemin A1 → B2 (accueil allemand). */
.path-map { margin: 14px 0 18px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--white); box-shadow: var(--shadow, none); }
.path-next { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; width: 100%; margin: 6px 0 8px; padding: 12px 14px; border: 0; border-radius: 16px; color: #fff; background: #123e67; text-align: left; cursor: pointer; }
.path-next small { grid-column: 1; font-size: .62rem; font-weight: 800; letter-spacing: .06em; opacity: .8; }
.path-next strong { grid-column: 1; font-size: 1rem; }
.path-next > span { grid-row: 1 / span 2; grid-column: 2; font-size: 1.2rem; }
.path-story { display: block; width: 100%; margin: 0 0 10px; padding: 9px 12px; border: 1px dashed var(--border); border-radius: 13px; color: var(--ink); background: transparent; font-size: .8rem; text-align: left; cursor: pointer; }
.path-done { margin: 8px 0; font-weight: 700; }
.path-levels { position: relative; margin: 4px 0 0; padding: 0; list-style: none; }
.path-levels::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 20px; border-left: 3px dotted var(--border); }
.path-level { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.path-level .level-badge { position: relative; z-index: 1; flex: 0 0 42px; }
.path-level > div { flex: 1; min-width: 0; }
.path-level h3 { margin: 2px 0 6px; font-size: .9rem; letter-spacing: -.02em; }
.path-level h3 em { margin-left: 4px; padding: 2px 7px; border-radius: 99px; color: #fff; background: var(--coral); font-size: .6rem; font-style: normal; font-weight: 800; letter-spacing: .03em; vertical-align: 2px; }
.path-level.is-later { opacity: .62; }
.path-level.is-current .level-badge { box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 28%, transparent); }
.path-bar { display: grid; grid-template-columns: 58px 1fr 40px; gap: 8px; align-items: center; margin: 3px 0; color: var(--muted); font-size: .68rem; }
.path-bar i { position: relative; height: 6px; overflow: hidden; border-radius: 9px; background: var(--border); }
.path-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 9px; background: var(--green); }
.path-bar b { color: var(--ink); text-align: right; font-weight: 750; }