/* =====================================================================
   VARIABLES DU DESIGN — Ô Pré du Canal
   ---------------------------------------------------------------------
   Toutes les couleurs, polices et tailles du site sont définies ici.
   Modifier une valeur la change partout sur le site.
   Palette inspirée du logo : pont en briques (terre cuite),
   feuillage (sauge, olive), lin et crème.
   ===================================================================== */

:root {
  /* ---------- Couleurs ---------- */
  --creme: #F6F1E7;          /* fond principal */
  --creme-clair: #FBF8F2;    /* cartes, surfaces claires */
  --lin: #EEE5D3;            /* fond des sections alternées */
  --sable: #DCCBAA;          /* filets, bordures douces */
  --paille: #E3C38E;         /* accent doré sur fond sombre */
  --sauge: #A3AD86;          /* vert sauge (feuillage du logo) */
  --sauge-pale: #E3E7D6;
  --olive: #5C6A43;          /* vert olive : liens, accents */
  --foret: #2E3A25;          /* vert forêt : sections sombres */
  --foret-profond: #222B1C;
  --brique: #9A4F12;         /* terre cuite du pont : boutons, accents chauds */
  --brique-fonce: #7A3D0C;
  --encre: #2E2A24;          /* texte principal */
  --encre-doux: #625A4E;     /* texte secondaire */
  --blanc: #FFFDF8;

  /* Ombres chaudes */
  --ombre-douce: 0 1px 2px rgba(60, 45, 20, .06), 0 8px 24px -12px rgba(60, 45, 20, .18);
  --ombre-carte: 0 2px 4px rgba(60, 45, 20, .05), 0 22px 44px -22px rgba(60, 45, 20, .32);
  --ombre-forte: 0 30px 70px -30px rgba(25, 20, 10, .55);

  /* ---------- Polices ---------- */
  --police-titre: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --police-texte: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --police-manuscrite: 'Amatic SC', 'Cormorant Garamond', cursive;

  /* Tailles de texte (s'adaptent à la largeur de l'écran) */
  --taille-hero: clamp(2.7rem, 1.3rem + 3.9vw, 5.4rem);
  --taille-h1: clamp(2.6rem, 1.6rem + 4vw, 5rem);
  --taille-h2: clamp(2.2rem, 1.5rem + 2.6vw, 3.7rem);
  --taille-h3: clamp(1.45rem, 1.2rem + .9vw, 1.95rem);
  --taille-texte: clamp(1rem, .96rem + .2vw, 1.0875rem);
  --taille-petit: .9rem;

  /* ---------- Espacements & formes ---------- */
  --largeur-max: 1240px;
  --marge: clamp(20px, 5vw, 56px);
  --espace-section: clamp(80px, 9vw, 150px);
  --rayon: 18px;
  --rayon-petit: 10px;
  --arche: 999px 999px var(--rayon) var(--rayon);   /* forme d'arche, comme le pont du logo */

  /* ---------- Animations ---------- */
  --courbe: cubic-bezier(.22, .7, .2, 1);
  --courbe-douce: cubic-bezier(.4, 0, .2, 1);
  --hauteur-entete: 86px;
}

@media (max-width: 1023px) {
  :root { --hauteur-entete: 72px; }
}