/* ==========================================================================
   VARIABLES CSS — Pro Essentiel
   Toutes les couleurs, polices, espacements et tailles principales du site
   sont centralisés ici. Pour changer l'identité visuelle du site, modifiez
   uniquement ce fichier.
   ========================================================================== */

:root {
  /* ----- Couleurs principales (identité Pro Essentiel) ----- */
  --color-navy: #142a4c;          /* bleu marine profond — couleur principale */
  --color-navy-dark: #0d1d36;     /* variante plus sombre (survols, fonds forts) */
  --color-navy-light: #2c4a75;    /* bleu plus clair — éléments secondaires */
  --color-gold: #c6a15b;          /* beige doré / champagne — accentuation */
  --color-gold-light: #e4d3af;    /* doré clair — fonds discrets, séparateurs */
  --color-ivory: #faf7f1;         /* blanc cassé / ivoire — fond général */
  --color-white: #ffffff;
  --color-text: #232a33;          /* gris foncé bleuté — texte principal */
  --color-text-muted: #55606c;    /* texte secondaire */
  --color-border: #e3ddd0;        /* bordures fines, discrètes */
  --color-success: #2f6b4f;
  --color-error: #a33b3b;

  /* ----- Typographie ----- */
  /* Empilement de polices système : rapide, sans dépendance externe */
  --font-heading: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --fs-base: 1.0625rem;   /* 17px — confort de lecture */
  --fs-sm: 0.9375rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.25rem;

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* ----- Espacements (échelle cohérente) ----- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ----- Mise en page ----- */
  --container-width: 1180px;
  --container-padding: var(--space-3);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ----- Ombres et effets ----- */
  --shadow-sm: 0 1px 3px rgba(20, 42, 76, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 42, 76, 0.10);
  --shadow-lg: 0 20px 48px rgba(13, 29, 54, 0.16);
  --shadow-gold: 0 0 0 1px var(--color-gold-light);

  /* ----- Transitions ----- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  /* ----- En-tête ----- */
  --header-height: 96px;

  /* ----- Icônes ----- */
  --icon-size-sm: 20px;
  --icon-size-md: 28px;
  --icon-size-lg: 40px;
  --icon-stroke: 1.6;

  /* ----- Lettrage ----- */
  --tracking-wide: 0.09em;
  --tracking-wider: 0.14em;
}