/* Charte de marque — Atelier Saône
   Ambiance : Atelier de quartier lyonnais, plan de travail et crayon à papier, Papier kraft et vert forêt, lumière de fin d'après-midi sur les quais de Saône, Netteté rétro : cadres fins, ombres portées sèches, typographie qui assume son dessin. Gamme restreinte et ancrée : vert forêt profond comme couleur de structure, crème papier comme fond, safran comme seul accent vif. Aucun bleu technologique, aucun contraste pétant. Le safran n'apparaît qu'aux points d'action et sur les filets.. Papier mat et grain fin sur les fonds crème, aplats forêt pour les blocs de contraste, filets d'un trait net de 1 px, ombres portées sans flou (décalage franc, sans diffusion), comme des tirages posés sur une table..
   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=Instrument+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #F3EEE4;
  --surface: #FBF8F2;
  --text: #1C2E27;
  --muted: #5A6B62;
  --accent: #D9A23B;
  --border: #CFC5AE;

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", 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: 4px 4px 0 0 #203B32;
  --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; }