/* ============================================================
   RÉNO RESSOURCE — Variables CSS
   Charte graphique v1.1 — Mai 2026
   Accessibilité : conformité WCAG AA (ratio 4.5:1 minimum)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COULEURS
  ---------------------------------------------------------- */
  --color-marine:       #0D1F44;   /* Principal — ratio sur blanc : 14.8:1 ✓ */
  --color-blue:         #2E5FA3;   /* Secondaire — ratio sur blanc : 5.2:1 ✓ */
  --color-steel:        #4A7AB5;   /* Tertiaire — ratio sur blanc : 4.6:1 ✓ (était #5B8FCC = 3.2:1 ✗) */
  --color-ice:          #A8C4E5;   /* Décoratif uniquement — jamais utilisé comme couleur de texte */
  --color-offwhite:     #F4F7FB;   /* Fond de page principal */
  --color-white:        #FFFFFF;   /* Fond de cartes, zones de contenu */
  --color-slate:        #374151;   /* Texte paragraphes — quasi-noir, ratio sur blanc : 10.7:1 ✓ */
  --color-amber:        #C47800;   /* Accent texte — ratio sur blanc : 4.6:1 ✓ (était #E8A020 = 2.5:1 ✗ sur blanc) */
  --color-amber-ui:     #E8A020;   /* Amber original — pour fonds, boutons, badges (pas pour texte sur blanc) */
  --color-error:        #C0392B;   /* Erreurs — ratio sur blanc : 5.1:1 ✓ */
  --color-success:      #1E7A52;   /* Succès — ratio sur blanc : 5.5:1 ✓ */

  /* Couleurs avec opacité */
  --color-marine-10:    rgba(13, 31, 68, 0.10);
  --color-marine-20:    rgba(13, 31, 68, 0.20);
  --color-marine-50:    rgba(13, 31, 68, 0.50);
  --color-blue-10:      rgba(46, 95, 163, 0.10);
  --color-blue-20:      rgba(46, 95, 163, 0.20);

  /* ----------------------------------------------------------
     TYPOGRAPHIE
  ---------------------------------------------------------- */
  --font-display:       'Barlow Condensed', sans-serif;
  --font-body:          'Barlow', sans-serif;

  /* Tailles — minimums WCAG */
  --text-h1:            64px;
  --text-h2:            48px;
  --text-h3:            32px;
  --text-h4:            22px;
  --text-body:          17px;   /* était 16px — +1px pour lisibilité */
  --text-small:         14px;   /* était 13px — minimum recommandé WCAG */
  --text-label:         12px;   /* était 11px — minimum absolu */

  /* Poids */
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;

  /* Line-height */
  --leading-tight:      1.2;
  --leading-snug:       1.4;
  --leading-normal:     1.6;
  --leading-relaxed:    1.75;   /* était 1.7 — légèrement plus aéré */

  /* Letter-spacing */
  --tracking-tight:     -0.5px;
  --tracking-normal:    0px;
  --tracking-wide:      2px;
  --tracking-wider:     4px;

  /* ----------------------------------------------------------
     ESPACEMENT
  ---------------------------------------------------------- */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;
  --space-3xl:          64px;
  --space-4xl:          80px;

  /* ----------------------------------------------------------
     GRILLE & LAYOUT
  ---------------------------------------------------------- */
  --max-width:          1280px;
  --margin-desktop:     60px;
  --margin-mobile:      24px;
  --gutter:             24px;

  /* ----------------------------------------------------------
     BORDER-RADIUS
  ---------------------------------------------------------- */
  --radius-btn:         4px;
  --radius-input:       6px;
  --radius-card:        12px;
  --radius-hero:        20px;
  --radius-badge:       100px;

  /* ----------------------------------------------------------
     OMBRES
  ---------------------------------------------------------- */
  --shadow-sm:          0 2px 8px rgba(13, 31, 68, 0.06);
  --shadow-md:          0 4px 24px rgba(13, 31, 68, 0.08);
  --shadow-lg:          0 8px 40px rgba(13, 31, 68, 0.12);
  --shadow-xl:          0 16px 64px rgba(13, 31, 68, 0.16);

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --transition-fast:    0.15s ease;
  --transition-base:    0.25s ease;
  --transition-slow:    0.4s ease;

  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-toast:            500;
}

/* ----------------------------------------------------------
   RESPONSIVE — Ajustements typographie mobile
---------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --text-h1:          40px;
    --text-h2:          32px;
    --text-h3:          24px;
    --text-h4:          18px;
    --text-body:        16px;
    --text-small:       14px;
    --margin-desktop:   var(--margin-mobile);
  }
}