/* Charte de marque — Atelier Saône
   Ambiance : atelier de quartier lyonnais, papier épais et encre verte, précision de métier sans froideur technique. Registre chaud et terreux : crème légèrement ocré en fond, vert forêt profond pour le texte et les aplats, brique rare et uniquement sur les actions. Aucune couleur fluorescente, aucun blanc pur, aucun dégradé.. Surface de papier mat plutôt que verre ou métal. Filets fins de 1px en vert translucide pour séparer les blocs, titres en serif à fort contraste comme sur une page imprimée, cartes sans relief marqué..
   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: #F6F1E7;
  --surface: #EEE6D6;
  --text: #23392F;
  --muted: #56675D;
  --accent: #A4482E;
  --border: #D6CBB6;

  --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: 2px;
  --shadow: 0 1px 2px rgba(35,57,47,0.08), 0 8px 24px rgba(35,57,47,0.06);
  --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; }