/* Charte de marque — Hazo Velona
   Ambiance : Terre latérite et sol vivant, Forêt dense et ombre fraîche, Papier sable et lumière de saison sèche. Palette resserrée : vert forêt profond pour le texte et les structures, ocre latérite comme unique accent, sable clair pour les fonds. Aucun vert tracteur, aucun rouge bordeaux, aucun blanc pur.. Surfaces mates façon papier kraft non blanchi. Filets fins de 1 px pour séparer les blocs, comme des lignes de parcelle. Pas de dégradé ni de transparence..
   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=Atkinson+Hyperlegible:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #F4EDE1;
  --surface: #FBF7F0;
  --text: #1E3A2B;
  --muted: #5A6B5D;
  --accent: #A8492A;
  --border: #D6C8B0;

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", 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: 2px;
  --shadow: aucune ombre portée ; séparation par filet 1px solid #D6C8B0;
  --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; }