/* Charte de marque — Garrigue
   Ambiance : Pierre calcaire au soleil de fin d'après-midi, Atelier de quartier où l'on prend le temps d'écouter, Ordre discret : une grille nette, des filets fins, peu de décor. Crème et sable inspirés de la pierre calcaire, un seul accent terracotta, aucun dégradé ni halo.. Aplats mats sur papier crème, filets d'1 px, surfaces légèrement teintées et jamais brillantes. Le grain de pierre est suggéré par les couleurs, sans texture plaquée..
   Ces variables sont le contrat visuel du site : n'invente aucune autre couleur ni police. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #F7F1E6;
  --surface: #FFFBF4;
  --text: #2B2320;
  --muted: #6B5E55;
  --accent: #9E4522;
  --border: #E3D6C2;

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.06rem);
  --step-1: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
  --step-4: clamp(3rem, 2.2rem + 4vw, 5.5rem);

  --space-1: .5rem; --space-2: 1rem; --space-3: 1.75rem;
  --space-4: 3rem; --space-5: 5rem; --space-6: 8rem;

  --radius: 18px;
  --shadow: 0 1px 2px rgba(60,40,20,0.06), 0 8px 24px rgba(60,40,20,0.08);
  --maxw: 1200px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.05; margin: 0 0 var(--space-2); letter-spacing: -.02em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 var(--space-2); }
a { color: inherit; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-5); }
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.4rem; border-radius: var(--radius);
  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
img { max-width: 100%; display: block; }