/* ==========================================================================
   IBVB — Design tokens
   Palette: bleu nuit institutionnel + indigo + cyan (héritage de la brochure,
   modernisé). Typo: serif éditoriale (titres) + grotesque (UI/texte).
   ========================================================================== */

:root {
  /* Couleurs */
  --color-night: #0B1130;        /* bleu nuit — fond institutionnel, footer, header */
  --color-night-2: #131A42;      /* variante légèrement plus claire pour cartes sur fond nuit */
  --color-indigo: #3730A9;       /* indigo — CTA principal, liens actifs */
  --color-indigo-dark: #2A2483;  /* hover indigo */
  --color-cyan: #22B8CD;         /* cyan — accents, soulignés, numéros */
  --color-cyan-soft: #E4F7F9;    /* fond très pâle cyan pour badges/tags */
  --color-ivory: #FAF9F6;        /* fond principal clair */
  --color-ivory-2: #F3F1EA;      /* fond de section alterné */
  --color-ink: #171821;          /* texte principal */
  --color-ink-soft: #4A4B58;     /* texte secondaire */
  --color-line: #E4E2D9;         /* séparateurs sur fond clair */
  --color-line-dark: #262C55;    /* séparateurs sur fond nuit */
  --color-white: #FFFFFF;

  /* Typographie */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle typographique (clamp = fluide entre mobile et desktop) */
  --fs-hero: clamp(2.5rem, 5.5vw + 1rem, 4.75rem);
  --fs-h1: clamp(2.1rem, 3.2vw + 1rem, 3.25rem);
  --fs-h2: clamp(1.65rem, 2vw + 1rem, 2.35rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --fs-lead: clamp(1.1rem, 0.6vw + 1rem, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  /* Espacement — échelle cohérente (4 → 128). Les alias --space-xs..2xl
     sont conservés pour compatibilité avec le CSS existant. */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: 1.75rem;
  --space-lg: var(--space-12);
  --space-xl: var(--space-20);
  --space-2xl: var(--space-32);

  /* Z-index — échelle centralisée pour éviter les conflits d'empilement */
  --z-header: 500;
  --z-mobile-nav: 490;
  --z-announcement: 510;
  --z-sticky-buy: 400;
  --z-lightbox: 900;
  --z-toast: 950;

  /* Rayons / ombres */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-card: 0 1px 2px rgba(11,17,48,0.04), 0 8px 24px rgba(11,17,48,0.06);
  --shadow-card-hover: 0 4px 10px rgba(11,17,48,0.06), 0 20px 40px rgba(11,17,48,0.10);

  /* Grille */
  --container-max: 1200px;
  --container-pad: 1.5rem;

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}

@media (min-width: 768px) {
  :root { --container-pad: 2.5rem; }
}