/* Jetons de design. Palette reprise du logo et du film (film/src/lib.js).
   TODO(AC-12) : palette, accents par secteur et typographie à valider ; police à convertir en WOFF2 (AC-08). */

@font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-800.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Marque */
  --navy: #041a3e;
  --navy-80: #1d3357;
  --navy-60: #3c4c64;
  --navy-soft: #e8edf5;
  --mint: #4adc8a;
  --mint-strong: #36c776;
  --mint-soft: #e3f8ec;
  --mint-ink: #0f6e3a;
  --paper: #f7fafc;
  --white: #ffffff;
  --line: #e2e8f0;
  --line-strong: #c9d3e0;
  --mute: #5b6b82;
  --ink: var(--navy);

  /* États */
  --caution: #8a4b00;
  --caution-ink: #5c3500;
  --caution-bg: #fff4e0;
  --caution-line: #f0c27f;
  --danger: #b3261e;
  --danger-bg: #fdf1f0;

  /* Typographie */
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --fs-h1: clamp(2.375rem, 1.65rem + 3.6vw, 4.5rem);

  /* Espacements et formes */
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 8vw, 112px);
  --container: 1200px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --tap: 44px;
  --shadow-sm: 0 1px 2px rgb(4 26 62 / 6%), 0 2px 8px rgb(4 26 62 / 5%);
  --shadow: 0 2px 6px rgb(4 26 62 / 6%), 0 12px 32px rgb(4 26 62 / 9%);
  --shadow-lg: 0 4px 12px rgb(4 26 62 / 8%), 0 24px 60px rgb(4 26 62 / 16%);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Accent par défaut (redéfini par .accent-*) */
  --accent: var(--navy);
  --accent-ink: var(--navy);
  --accent-soft: var(--navy-soft);
  --accent-on: #ffffff;
}

/* Accents des secteurs et des maquettes. --accent-ink respecte un contraste AA sur fond blanc. */
.accent-navy { --accent: #041a3e; --accent-ink: #041a3e; --accent-soft: #e8edf5; --accent-on: #ffffff; }
.accent-plum { --accent: #7b4b94; --accent-ink: #6a3d82; --accent-soft: #f3ecf7; --accent-on: #ffffff; }
.accent-rose { --accent: #a8324a; --accent-ink: #a8324a; --accent-soft: #f9e9ec; --accent-on: #ffffff; }
.accent-blue { --accent: #2450c8; --accent-ink: #2450c8; --accent-soft: #e8eefb; --accent-on: #ffffff; }
.accent-coral { --accent: #ff6b57; --accent-ink: #b33a28; --accent-soft: #ffede9; --accent-on: #041a3e; }
.accent-orange { --accent: #ee7a1a; --accent-ink: #a14e00; --accent-soft: #fdefe2; --accent-on: #041a3e; }
.accent-leaf { --accent: #247a4b; --accent-ink: #1d6a40; --accent-soft: #e5f3eb; --accent-on: #ffffff; }
.accent-teal { --accent: #2f7a70; --accent-ink: #245f57; --accent-soft: #e4f1ef; --accent-on: #ffffff; }