/* ==========================================================
   DESIGN TOKENS — partagés par la landing et la maquette
   ========================================================== */
:root {
  /* Palette : blanc minéral, vert mousse, bois, fleur de cerisier */
  --paper:      #f5f2ec;
  --paper-2:    #ebe6dc;
  --stone:      #d9d2c5;
  --ink:        #171a18;
  --ink-2:      #3a3f3b;
  --muted:      #7a807b;
  --moss:       #2d440f;
  --moss-2:     #1e2e0a;
  --gold:       #ba8916;
  --gold-2:     #d4a531;
  --sage:       #8fae92;
  --blush:      #e8b8ad;
  --terracotta: #c9694f;
  --wood:       #c9a578;
  --accent:     var(--gold);
  --accent-ink: #1e2e0a;

  /* Chrome sombre translucide de la maquette */
  --glass:        rgba(20, 24, 22, 0.72);
  --glass-strong: rgba(20, 24, 22, 0.88);
  --glass-line:   rgba(255, 255, 255, 0.10);
  --glass-text:   #f2efe8;
  --glass-muted:  rgba(242, 239, 232, 0.62);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow-1: 0 2px 6px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.10);
  --shadow-2: 0 4px 12px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boutons génériques */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.4em; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(186,137,22,.35); }
.btn-primary:hover { background: var(--gold-2); box-shadow: 0 12px 32px rgba(186,137,22,.45); }
.btn-ghost { border: 1px solid currentColor; }
.btn-light { background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(10px); }
.btn svg { width: 1.1em; height: 1.1em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}