/* Charte de marque — Brique & Pixel
   Ambiance : brutaliste, artisanal, net. Terre cuite et papier crème, contrastés par un noir d'encre. Une seule couleur d'accent, la brique, réservée aux actions et aux chiffres clés.. Aplats pleins et blocs de texte découpés comme des murs. Bordures épaisses de 4 px, séparations franches, aucun dégradé, aucun flou. Le grain vient de la typographie condensée et des blocs de couleur..
   Ces variables sont le contrat visuel du site : n'invente aucune autre couleur ni police. */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800&family=Archivo:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #F3EDE2;
  --surface: #FFFDF8;
  --text: #1A1613;
  --muted: #5A4E46;
  --accent: #B5401C;
  --border: #1A1613;

  --font-heading: "Big Shoulders Display", Georgia, serif;
  --font-body: "Archivo", 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: 0;
  --shadow: 6px 6px 0 #1A1613;
  --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; }