/* =====================================================================
   css/variables.css : les « réglages » du site (couleurs, tailles...)
   =====================================================================
   Rôle : regrouper en UN endroit toutes les valeurs réutilisées.
   Une variable CSS se déclare avec deux tirets (--nom: valeur;) et
   s'utilise avec var(--nom).
   Pourquoi ? Pour changer la couleur principale du site, on modifie
   UNE ligne ici au lieu de chercher dans tout le code.
   Ce fichier est chargé AVANT style.css (voir ../index.html). */

/* :root = l'élément <html>. Les variables déclarées ici sont donc
   disponibles partout dans la page. */
:root {
  /* --- Couleurs (palette « vanille et feuille ») --- */
  --couleur-fond: #fffaf0;        /* crème de la page */
  --couleur-surface: #ffffff;     /* fond des cartes */
  --couleur-texte: #2a2218;       /* brun presque noir */
  --couleur-texte-doux: #5a4f40;  /* texte secondaire (contraste > 4,5:1) */
  --couleur-principale: #1f5a3d;  /* vert feuille : titres, boutons */
  --couleur-principale-fonce: #153f2a; /* survol des boutons */
  --couleur-accent: #c98a1b;      /* or vanille : décorations */
  --couleur-bordure: #e6d9bd;

  /* --- Espacements : une petite « échelle » cohérente --- */
  --espace-1: 0.5rem;
  --espace-2: 1rem;
  --espace-3: 1.5rem;
  --espace-4: 3rem;

  /* --- Divers --- */
  --rayon: 0.75rem;               /* arrondi des coins */
  --largeur-max: 70rem;           /* largeur maximale du contenu */
  --police-titre: Georgia, "Times New Roman", serif;       /* polices déjà installées */
  --police-texte: system-ui, "Segoe UI", Arial, sans-serif;
}