:root {
  /* Mediterranean palette test — bg #F4F0E4 · cream #FFEED6 · blue #4D84CF · red #961B2B */
  --palette-bg: #F4F0E4;
  --palette-yellow: #FAD27C;
  --palette-cream: #FFEED6;
  --palette-blue: #4D84CF;
  --palette-red: #961B2B;
  --paper: var(--palette-bg);
  --paper-deep: #E8E2D4;
  --ink: #3D2A1A;
  --muted: #6B5040;
  --card: var(--palette-cream);
  --border: rgba(61, 42, 26, 0.12);
  --shadow: 0 10px 28px rgba(61, 42, 26, 0.1);
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--muted);
  --radius: 14px;
  --present: #E8C45A;
  --passe: #B83248;
  --imparfait: #5CAD6E;
  --futur: #4A78B5;
  --conditionnel: #A58AD6;
  --highlight: var(--palette-yellow);
  /* 首页三色条：参考色卡左列蓝 / 白 / 红 */
  --fr-bleu: var(--palette-blue);
  --fr-bleu-light: #8BB5E5;
  --fr-bleu-hover: #3F72BD;
  --fr-bleu-deep: #3568B5;
  --fr-bleu-strong: #2A558F;
  --fr-bleu-shadow: 0 10px 28px rgba(77, 132, 207, 0.42);
  --fr-bleu-shadow-hover: 0 14px 34px rgba(42, 85, 143, 0.45);
  --fr-blanc: var(--palette-cream);
  --module-test-white: #FFFFFF;
  --verbs-surface: #FFF6E9;
  --verbs-surface-deep: #F5ECDD;
  --fr-rouge: var(--palette-red);
  --fr-rouge-light: #B84555;
  --fr-rouge-hover: #821724;
  --fr-rouge-deep: #6E1420;
  --fr-rouge-strong: #5A101A;
  --fr-rouge-shadow: 0 10px 28px rgba(150, 27, 43, 0.36);
  --fr-rouge-shadow-hover: 0 14px 34px rgba(90, 16, 26, 0.42);
  --max-w: min(480px, 100%);
  --nav-bar-min-h: 3.75rem;
  --nav-title-size: clamp(1.625rem, 4.2vw, 2.5rem);
  --quiz-paper: var(--paper);
  --quiz-paper-deep: var(--paper-deep);
  --quiz-ink: var(--ink);
  --quiz-muted: var(--muted);
  --quiz-shadow: var(--shadow);
  --quiz-serif: var(--serif);
  --quiz-sans: var(--sans);
  /* TEST — 整页竖条三色（蓝 · 现有浅底 · 红） */
  --fr-tricolor-bleu: #9BC0CC;
  --fr-tricolor-blanc: var(--palette-bg);
  --fr-tricolor-rouge: #E0B8B0;
  --fr-tricolor-bg: linear-gradient(
    to right,
    var(--fr-tricolor-bleu) 0%,
    var(--fr-tricolor-bleu) 33.333%,
    var(--fr-tricolor-blanc) 33.333%,
    var(--fr-tricolor-blanc) 66.666%,
    var(--fr-tricolor-rouge) 66.666%,
    var(--fr-tricolor-rouge) 100%
  );
  /* Quiz blanc croissants — max-height slot (≤600 / ≥601); page heroes use display-h below */
  --hero-mascot-h: 54px;
  --hero-mascot-h-a2: 56px;
  /* Standalone heroes — Search uses base; Home / Scenario use lg (~+18%) */
  --page-hero-mascot-h: 62px;
  --page-hero-mascot-h-lg: 73px;
}

@media (min-width: 601px) {
  :root {
    --hero-mascot-h: 76px;
    --hero-mascot-h-a2: 80px;
    --page-hero-mascot-h: 93px;
    --page-hero-mascot-h-lg: 110px;
  }
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  background: var(--fr-tricolor-bg);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
}