/* ==========================================================================
   Design tokens — Modulobox
   Toutes les valeurs de marque sont centralisées ici.
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --c-red:        #e3101b;
  --c-red-dark:   #c00d16;
  --c-navy:       #14202e;   /* titres, texte fort */
  --c-text:       #2a3441;   /* texte courant */
  --c-muted:      #5b6573;
  --c-leaf:       #c8d92b;

  /* Neutres */
  --c-white:      #ffffff;
  --c-bg:         #ffffff;
  --c-line:       #d9dde3;   /* bordures de champs */
  --c-divider:    #e6e8ec;
  --c-icon-bg:    #f1f2f4;

  /* Fonds des cartes avantages */
  --c-warm-bg:    #fdf3e9;
  --c-cool-bg:    #eaf3fa;
  --c-fresh-bg:   #eff5e6;

  /* Footer */
  --c-footer-bg:  #262626;
  --c-star:       #f5b335;

  /* Typographie */
  --ff-base: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-hand: "Caveat", "Segoe Print", cursive;   /* annotations manuscrites */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-h1:    clamp(3rem, min(4.6vw, 8.4vh), 5.25rem);   /* suit aussi la hauteur d'écran */
  --fs-lead:  clamp(1.25rem, min(1.8vw, 3.1vh), 1.875rem);
  --fs-h2:    1.6875rem;
  --fs-card:  1.1875rem;
  --fs-body:  1rem;
  --fs-small: 0.9375rem;
  --fs-nav:   0.9375rem;

  /* Espacements & rayons */
  --container-max: 1640px;
  --container-pad: clamp(24px, 3vw, 48px);
  --header-h: 76px;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Ombres */
  --shadow-header: 0 2px 14px rgba(20, 32, 46, .06);
  --shadow-card:   0 12px 40px rgba(20, 32, 46, .10);
  --shadow-soft:   0 6px 24px rgba(20, 32, 46, .06);

  --transition: .2s ease;
}