/* =============================================================
   FLUENTIS — Charte graphique officielle
   Palette : Bleu marine + Or chaud + Vert sauge + Fond crème
   Polices  : Cormorant Garamond (display) + DM Sans (body)
   Généré le : 2026-04-01
============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* ── Typographie ─────────────────────── */
  --font-display : 'Cormorant Garamond', Georgia, serif;
  --font-body    : 'DM Sans', 'Helvetica Neue', sans-serif;

  /* ── Échelle fluide ──────────────────── */
  --text-xs   : clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm   : clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base : clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg   : clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl   : clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl  : clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-hero : clamp(2.5rem,   1rem    + 4vw,    4.5rem);

  /* ── Couleurs marque ─────────────────── */
  --color-navy       : #2D5F8A;
  --color-navy-dark  : #1e4268;
  --color-navy-light : #4a7ba8;
  --color-gold       : #E8A24E;
  --color-gold-dark  : #c8842e;
  --color-gold-light : #f0bc78;
  --color-sage       : #5BA898;
  --color-sage-dark  : #3d8a7a;
  --color-sage-light : #7dc4b4;

  /* ── Surfaces (fond crème) ───────────── */
  --color-bg               : #F7F4EF;
  --color-surface          : #FAF8F4;
  --color-surface-2        : #FDFCFA;
  --color-surface-offset   : #F0EDE6;
  --color-surface-offset-2 : #E8E4DC;
  --color-surface-dynamic  : #DDD9CF;
  --color-divider          : #D6D1C8;
  --color-border           : #CCC8BE;

  /* ── Texte ───────────────────────────── */
  --color-text         : #1C1A14;
  --color-text-muted   : #6B6860;
  --color-text-faint   : #A8A49C;
  --color-text-inverse : #F7F4EF;

  /* ── Rôles sémantiques ───────────────── */
  --color-primary           : var(--color-navy);
  --color-primary-hover     : var(--color-navy-dark);
  --color-primary-active    : #152e4d;
  --color-primary-highlight : #d0dde8;

  --color-accent            : var(--color-gold);
  --color-accent-hover      : var(--color-gold-dark);
  --color-accent-highlight  : #f5e4cc;

  --color-success           : var(--color-sage);
  --color-success-hover     : var(--color-sage-dark);
  --color-success-highlight : #cce8e2;

  --color-error             : #a12c4a;
  --color-error-hover       : #7d1e36;
  --color-error-highlight   : #e0ced3;

  --color-warning           : #c47a1a;
  --color-warning-hover     : #a35e0e;
  --color-warning-highlight : #f0dec4;

  /* ── Espacement (base 4px) ───────────── */
  --space-1  : 0.25rem;   --space-2  : 0.5rem;
  --space-3  : 0.75rem;   --space-4  : 1rem;
  --space-5  : 1.25rem;   --space-6  : 1.5rem;
  --space-8  : 2rem;      --space-10 : 2.5rem;
  --space-12 : 3rem;      --space-16 : 4rem;
  --space-20 : 5rem;      --space-24 : 6rem;
  --space-32 : 8rem;

  /* ── Bordures et ombres ──────────────── */
  --radius-sm   : 0.375rem;  --radius-md   : 0.5rem;
  --radius-lg   : 0.75rem;   --radius-xl   : 1rem;
  --radius-full : 9999px;

  --shadow-sm : 0 1px 3px rgba(29, 47, 74, 0.08);
  --shadow-md : 0 4px 12px rgba(29, 47, 74, 0.10);
  --shadow-lg : 0 12px 32px rgba(29, 47, 74, 0.14);

  --transition : 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Largeurs ────────────────────────── */
  --content-narrow  : 640px;
  --content-default : 960px;
  --content-wide    : 1200px;
}

/* ── MODE SOMBRE ─────────────────────────── */
[data-theme="dark"] {
  --color-bg               : #13110e;
  --color-surface          : #18160f;
  --color-surface-2        : #1d1b14;
  --color-surface-offset   : #1a1810;
  --color-surface-offset-2 : #201e16;
  --color-surface-dynamic  : #2a2820;
  --color-divider          : #242118;
  --color-border           : #302d22;
  --color-text             : #e8e4da;
  --color-text-muted       : #918d82;
  --color-text-faint       : #5c5950;
  --color-text-inverse     : #13110e;
  --color-primary          : #6a9ec4;
  --color-primary-hover    : #4d84ad;
  --color-primary-active   : #2d5f8a;
  --color-primary-highlight: #1e2e38;
  --color-accent           : #f0bc78;
  --color-accent-hover     : #e8a24e;
  --color-accent-highlight : #3a2e18;
  --color-success          : #7dc4b4;
  --color-success-hover    : #5ba898;
  --color-success-highlight: #1a2e2a;
  --shadow-sm : 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md : 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg : 0 12px 32px rgba(0,0,0,0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg             : #13110e;
    --color-surface        : #18160f;
    --color-surface-2      : #1d1b14;
    --color-surface-offset : #1a1810;
    --color-text           : #e8e4da;
    --color-text-muted     : #918d82;
    --color-primary        : #6a9ec4;
    --color-primary-hover  : #4d84ad;
    --color-accent         : #f0bc78;
    --color-success        : #7dc4b4;
  }
}