/* ═══════════════════════════════════════════════════════════════════
   VARIABLES.CSS — Toutes les couleurs, polices et valeurs réutilisables
   ═══════════════════════════════════════════════════════════════════
   
   Ce fichier centralise TOUS les réglages de design :
   - Couleurs (palette complète)
   - Polices (titres et corps de texte)
   - Espacements
   - Ombres et effets
   - Arrondis
   
   Modifier UNE SEULE variable ici met à jour TOUT le site.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────
     COULEURS — Palette complète du site
     ───────────────────────────────────────────────────────────────── */
  
  /* Nuances de gris et noir */
  --blanc:    #ffffff;
  --gris-xs:  #f7f7f5;   /* Fonds de sections alternées */
  --gris-s:   #eeede9;   /* Séparateurs fins, bordures */
  --gris-m:   #c8c4bc;   /* Textes secondaires, labels */
/*--gris-l:   #4f4c47;   /* CORPS DE TEXTE principal — lisibilité */
  --gris-l:   #2d2d2d;   /* CORPS DE TEXTE principal — lisibilité */
  --gris-xl:  #3a3835;   /* Titres H3, fonds sombres */
  --noir:     #1c1b19;   /* Titres H1/H2, footer */
  
  /* Couleur d'accent (boutons, liens, éléments graphiques) */
  --accent:   #4a6741;   /* Vert sauge — à personnaliser */
  --accent-l: #e8ede7;   /* Version très claire de l'accent */
  
  
  /* ─────────────────────────────────────────────────────────────────
     TYPOGRAPHIE — Polices de caractères
     ───────────────────────────────────────────────────────────────── */
  
  --serif:    'Playfair Display', Georgia, serif;  /* Titres H1, H2, H3 */
  --sans:     'Source Sans 3', sans-serif;         /* Corps de texte, paragraphes */
  
  
  /* ─────────────────────────────────────────────────────────────────
     ESPACEMENTS ET DIMENSIONS
     ───────────────────────────────────────────────────────────────── */
  
  --container-width: 1060px;   /* Largeur maximale du contenu */
  --section-padding: 96px;     /* Marge verticale des sections */
  --radius: 4px;               /* Arrondi des coins (boutons, cartes) */
  
  
  /* ─────────────────────────────────────────────────────────────────
     EFFETS — Ombres et transitions
     ───────────────────────────────────────────────────────────────── */
  
  --shadow:   0 2px 20px rgba(0,0,0,.07);   /* Ombre légère */
  --shadow-m: 0 6px 40px rgba(0,0,0,.10);   /* Ombre moyenne */
  
  --transition: all 0.2s ease;  /* Transition standard pour survol */
}


/* ═══════════════════════════════════════════════════════════════════
   GUIDE RAPIDE DE PERSONNALISATION
   ═══════════════════════════════════════════════════════════════════
   
   Pour modifier l'apparence du site, changez les valeurs ci-dessus :
   
   1. CHANGER LA COULEUR D'ACCENT (boutons, liens)
      → Modifier --accent (actuellement #4a6741)
      Exemples : #2563EB (bleu), #DC2626 (rouge), #059669 (vert)
   
   2. ASSOMBRIR OU ÉCLAIRCIR LE TEXTE
      → Modifier --gris-l (actuellement #4f4c47)
      Plus foncé = #2d2d2d / Plus clair = #6b6b6b
   
   3. CHANGER LES POLICES
      → Modifier --serif et --sans
      Voir Google Fonts : fonts.google.com
      Ne pas oublier d'importer la nouvelle police dans page-accueil.php
   
   4. MODIFIER L'ESPACEMENT VERTICAL
      → Modifier --section-padding (actuellement 96px)
      Plus serré = 64px / Plus aéré = 120px
   
   5. CHANGER LA LARGEUR DU SITE
      → Modifier --container-width (actuellement 1060px)
      Plus étroit = 900px / Plus large = 1200px
   
   ═══════════════════════════════════════════════════════════════════ */