/* ============================================
   VARIABLES CSS - Personnalisation rapide
   Modifier ces valeurs suffit à changer
   l'identité visuelle de tout le site.
   ============================================ */

:root {
  /* Couleurs principales - bleu clair médical */
  --color-primary: #78afc3;
  --color-primary-dark: #315f76;
  --color-primary-rgb: 120, 175, 195; /* pour les fonds en rgba() (ex: hover 10%) */

  /* Couleur secondaire issue du bleu marine présent dans le logo. */
  --color-accent: #2e4473;
  --color-accent-dark: #20345c;
  --color-accent-rgb: 46, 68, 115; /* pour l'anneau de focus en box-shadow */

  /* Neutres bleutés */
  --color-white: #ffffff;
  --color-background: #faf7f2;
  --color-background-alt: #f0ede6;
  --color-text-heading: #20345c;
  --color-text-body: #5d6670;
  --color-border: #e4ddd0;

  /* États */
  --color-success: #2e8b57;
  --color-error: #c1443b;

  /* Typographie sobre, moderne et rassurante pour l'univers médical */
  --font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;

  /* Échelle de tailles */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.75rem;

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  /* Mise en page */
  --container-width: 1200px;
  --section-padding: 6rem;
  --section-padding-mobile: 3rem;
  --radius: 20px;
  --radius-sm: 10px;
  --shadow-sm: 0 8px 24px rgba(32, 52, 92, 0.08);
  --shadow-md: 0 12px 32px rgba(32, 52, 92, 0.12);
  --transition: 0.25s ease;

  /* Header */
  --header-height: 76px;
}