/* Charte de marque — Arcade Digitale
   Ambiance : Pierre chaude des arènes au midi, Enseigne peinte, cadre net et typo large, Atelier d'imprimerie rétro qui sent l'encre. Fond pierre claire et encre brune, un seul accent terracotta saturé réservé aux actions. Pas de bleu, pas de dégradé : quatre teintes au maximum par écran.. Aplats pleins, filets d'un trait, ombres portées décalées sans flou, comme des étiquettes d'enseigne posées sur du papier kraft. Bords vifs, jamais arrondis..
   Ces variables sont le contrat visuel du site : n'invente aucune autre couleur ni police. */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Work+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #F4E9D8;
  --surface: #FBF6EC;
  --text: #1F1A17;
  --muted: #5E5148;
  --accent: #C8502D;
  --border: #3A2E27;

  --font-heading: "Unbounded", Georgia, serif;
  --font-body: "Work 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: 0px (angles vifs partout, aucun arrondi sur cartes, boutons ou champs);
  --shadow: 6px 6px 0 0 #1F1A17 (ombre portée nette, décalée, sans flou ; inversée en 3px au survol);
  --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; }