/* ==========================================================================
   OSETHOS — Design tokens
   Source : cahier des charges section 2 (charte graphique)
   ========================================================================== */

:root {
  /* Couleurs (valeurs hexadécimales exactes — section 2.1) */
  --or: #7F6000;              /* Or / Doré — titres, contours pilule, CTA pleins */
  --marron: #3B2415;          /* Marron foncé / café — contour Contact, bouton Retour, bandeaux */
  --overlay-sombre: #3A3838;  /* Overlay semi-transparent sur photos plein écran */
  --pilule-bg: #EEEEEE;       /* Fond des boutons pilule */
  --gris-tres-clair: #F2F2F2; /* Fond header / footer */
  --carte-bg: #E7E6E6;        /* Fond des cartes (piliers) */
  --texte: #1A1A1A;           /* Texte courant */
  --noir: #000000;            /* Texte de nav, contours */
  --texte-secondaire: #434343;
  --texte-secondaire-2: #5A5449;
  --texte-tertiaire: #999999;
  --blanc: #FFFFFF;
  --blanc-casse: #FBFAF8;     /* Fond des modales */

  /* Typographies (section 2.2) */
  --police-nav: 'Montserrat', sans-serif;
  --police-hero: 'Montserrat', sans-serif;
  --police-corps: 'Inter', sans-serif;
  --police-impact: 'Red Hat Display', sans-serif;

  /* Échelle type (base 16px, rapports issus de la maquette 720x405 = ratio 16:9) */
  --fs-nav: 0.875rem;         /* 13pt/16pt ref -> ~14px */
  --fs-corps: 1rem;           /* 16pt */
  --fs-hero-titre: 2rem;      /* 24pt ref, ajusté à l'échelle web */
  --fs-exergue: 1.75rem;      /* 22pt ref */
  --fs-tunnel-titre: 3.4rem;  /* 45pt ref */
  --fs-impact: 2.6rem;        /* 36pt ref */
  --fs-label-pilier: 0.7rem;  /* 7pt ref, lettres espacées */
  --fs-soustitre-carte: 1rem; /* 16pt SemiBold */

  /* Rayons / formes */
  --radius-pilule: 999px;
  --radius-carte: 4px;

  /* Espacements */
  --espace-xs: 0.5rem;
  --espace-sm: 1rem;
  --espace-md: 2rem;
  --espace-lg: 4rem;
  --espace-xl: 6rem;

  /* Largeurs (correction : max 15% de marge de chaque côté sur toutes les pages) */
  --largeur-max: 1900px;
  --largeur-contenu-etroit: 85%;

  /* Transitions */
  --transition-rapide: 180ms ease;
  --transition-normale: 320ms ease;

  /* Z-index */
  --z-header: 500;
  --z-dropdown: 510;
  --z-modale: 900;
  --z-cookie: 950;
  --z-cartouche: 520;
}