/* ==========================================================================
   Les Officiers — Variables CSS centralisées
   Charte graphique : Atelier 17 / Antoine Brunet
   ========================================================================== */

/* --- Typos : LuksDeco (titres) + Helvetica Neue (corps) --- */
@font-face {
  font-family: 'LuksDeco';
  src: url('../assets/brand/LuksDeco-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LuksDeco';
  src: url('../assets/brand/LuksDeco-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LuksDeco';
  src: url('../assets/brand/LuksDeco-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LuksDeco';
  src: url('../assets/brand/LuksDeco-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LuksDeco';
  src: url('../assets/brand/LuksDeco-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LuksDeco';
  src: url('../assets/brand/LuksDeco-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LuksDeco';
  src: url('../assets/brand/LuksDeco-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Helvetica Neue (corps de texte) — embarquée en woff2 --- */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/HelveticaNeue-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/HelveticaNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/HelveticaNeue-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Couleurs principales (charte graphique) --- */
  --color-primary: #00274d;        /* Bleu foncé logo — Pantone 289 C */
  --color-secondary: #e4c39c;      /* Crème 50% — accent marquise, CTA */
  --color-accent: #c9a577;         /* Crème foncé — hover states */
  --color-bg: #faf4e7;             /* Beige très clair 11% */
  --color-bg-dark: #00274d;        /* Bleu foncé logo — sections sombres */
  --color-bg-alt: #f0e8d8;         /* Beige clair — sections alternées */
  --color-text: #1d1d1b;           /* Noir charte */
  --color-text-light: #5a5a58;     /* Texte secondaire */
  --color-text-on-dark: #faf4e7;   /* Beige clair sur fond sombre */
  --color-white: #ffffff;
  --color-border: #d8d0c4;         /* Bordures subtiles beige */

  /* Couleurs complémentaires charte */
  --color-green: #4b9b72;          /* Vert clair */
  --color-green-dark: #093f3c;     /* Vert foncé */
  --color-beige: #f8d5a0;          /* Beige */
  --color-creme: #e4c39c;          /* Crème 50% */
  --color-marron: #a48351;         /* Marron clair */

  /* --- Typographies --- */
  --font-heading: 'LuksDeco', 'Georgia', serif;
  --font-body: 'Helvetica Neue', 'Arial', sans-serif;
  --font-accent: 'LuksDeco', 'Georgia', serif;

  /* --- Tailles de police --- */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-3xl: 2.5rem;     /* 40px */
  --fs-4xl: 3.5rem;     /* 56px */

  /* --- Espacements --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* --- Layout --- */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --nav-height: 64px;
  --nav-height-mobile: 56px;
  --border-radius: 4px;
  --border-radius-lg: 8px;

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* --- Ombres --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
}