:root {
  /* Couleurs */
  --bg: #051829;
  --bg-footer: #041321;
  --surface: #0A2640;
  --surface-alt: #071F35;
  --surface-hover: #0E2E4C;
  --text: #EEF0F6;
  --text-2: #A3ABBF;
  --text-3: #C9CFDC;
  --muted: #7590AD;
  --placeholder: #8A93A8;
  --accent: #00A891;
  --brand: #0095BE;
  --ok: #34D399;
  --warn: #F5B84B;
  --on-accent: #051829;

  /* Lignes (valeurs exactes des maquettes) */
  --line: rgba(238, 240, 246, .08);
  --line-2: rgba(238, 240, 246, .10);
  --line-3: rgba(238, 240, 246, .12);
  --line-4: rgba(238, 240, 246, .14);
  --line-5: rgba(238, 240, 246, .16);
  --line-6: rgba(238, 240, 246, .18);
  --line-6b: rgba(238, 240, 246, .20);
  --line-7: rgba(238, 240, 246, .22);
  --line-8: rgba(238, 240, 246, .25);

  /* Typographie */
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Rayons */
  --r-pill: 999px;
  --r-xs: 12px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-2xl: 32px;
  --r-3xl: 36px;

  /* Mise en page */
  --container: 1320px;
  --gutter: 32px;
  --section-y: 128px;
  --header-h: 77px;

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-scroll: cubic-bezier(.45, 0, .55, 1);
  --t-fast: .3s;
  --t-base: .4s;
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --section-y: 88px;
  }
}