/* === FONT FACES === */
/* Inter — corps de texte */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === DESIGN TOKENS === */
/* Charte graphique CoQuest officielle */
:root {
  /* Couleurs principales — piliers CCC */
  --color-cerveau: #69236C;        /* Violet prune — pilier Cerveau 🧠 */
  --color-coeur: #D63385;          /* Rose fuchsia — pilier Cœur ❤️ */
  --color-corps: #DEDC00;          /* Jaune vif — pilier Corps ⚡ */
  --color-noir: #1D1D1B;           /* Noir profond — texte, titres */

  /* Déclinaisons fonctionnelles */
  --primary: #69236C;              /* Violet — couleur principale de marque */
  --primary-light: #7E3A82;        /* Violet éclairci — hover, accents */
  --primary-dark: #123548;         /* Bleu foncé — header, footer, blocs CTA */
  --accent-warm: #D63385;          /* Rose — CTAs principaux, alertes, énergie */
  --accent-warm-hover: #BF2D77;    /* Rose foncé — hover des CTAs */
  --accent-highlight: #DEDC00;     /* Jaune — highlights, badges Corps, accents */
  --accent-highlight-soft: #F5F3A0; /* Jaune doux — fonds jaunes légers */

  /* Alias pour compatibilité (stat cards, badges CCC) */
  --accent-green: #69236C;         /* Cerveau = violet */
  --accent-yellow: #DEDC00;        /* Corps = jaune */
  --accent-pink: #D63385;          /* Cœur = rose */

  /* Neutres */
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAF7;
  --neutral-100: #F2F0EB;
  --neutral-200: #E0DDD5;
  --neutral-300: #C4C0B8;
  --neutral-500: #8A8681;
  --neutral-700: #3A3A38;
  --neutral-800: #2e2e2c;           /* Texte corps (contraste AA sur fond clair) */
  --neutral-900: #1D1D1B;           /* Noir charte */

  /* Couleur pastilles étapes (bleu) */
  --color-step: #1B4D6E;
  --color-step-08: rgba(27, 77, 110, 0.08);
  --color-step-06: rgba(27, 77, 110, 0.06);

  /* Accent warm — transparences (bandeaux, highlights) */
  --accent-warm-12: rgba(214, 51, 133, 0.12);
  --accent-warm-08: rgba(214, 51, 133, 0.08);

  /* Highlight comparatif — bleu-gris léger */
  --color-highlight-bg: #ecf0f4;

  /* Tableau comparatif — check vert saturé */
  --accent-check: #2EAF6E;

  /* Badges CCC — fonds et textes (pastels harmonisés avec piliers) */
  --badge-cerveau-bg: #ede0ee;
  --badge-cerveau-text: #69236C;
  --badge-coeur-bg: #fce4ec;
  --badge-coeur-text: #c2185b;
  --badge-corps-bg: #fffde7;
  --badge-corps-text: #9e9700;

  /* Sémantique — jetons du jeu */
  --jeton-vert: #69236C;           /* Violet = "validé" (cerveau) */
  --jeton-jaune: #DEDC00;          /* Jaune = "à creuser" */
  --jeton-rose: #D63385;           /* Rose = "point bloquant" */

  /* Typographie — Georgia (titres) + Inter (corps) */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;
  --text-stat: 6rem;
  --text-stat-compact: clamp(1.8rem, 3vw, 2.5rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.7;

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

  /* Layout */
  --max-width: 90rem;
  --max-width-narrow: 56rem;
  /* Hero — hauteur identique sur toutes les pages (titre section suivante visible) */
  --hero-min-height: 72vh;

  /* Cadre image hero (Accueil, Manifeste, Méthode, Offres) — fond et ombre identiques */
  --hero-img-bg: rgba(255, 255, 255, 0.06);
  --hero-img-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Images de contenu — dimensions uniformes */
  --content-img-landscape-w: 32rem;   /* paysage : largeur max */
  --content-img-landscape-ratio: 16 / 9;
  --content-img-portrait-w: 18rem;    /* portrait : largeur max */
  --content-img-portrait-ratio: 3 / 4;
  --gutter: 2rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* Breakpoints (pour référence, utiliser dans media queries) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}