/* Harmonia — feuille de style commune.
   Les couleurs reprennent les tokens de lib/design_system/tokens/app_colors.dart.
   Le thème sombre est dérivé des mêmes teintes : l'app n'expose pas de palette
   sombre web, on garde donc les hues et on inverse les luminosités. */

/* `format('truetype-variations')` est refusé par Chrome, qui retombe alors
   silencieusement sur la police système — le wordmark perdait son arrondi.
   `truetype` fonctionne pour une variable font et reste compris partout. */
@font-face {
  font-family: 'Quicksand';
  src: url('/fonts/Quicksand-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
/* Inter n'est pas auto-hébergée : 859 Ko de police variable pour du texte
   courant, sur un site de quatre pages, ne se justifient pas. Le texte tombe
   sur la pile système, très proche visuellement. Quicksand reste chargée —
   c'est elle qui porte la marque. */

:root {
  --bg: #FBF4E8;
  --surface: #F2E6CC;
  --line: #E8D4B0;
  --ink: #3A2818;
  --ink-2: #7A5C30;
  --brand: #E07A2F;
  --brand-deep: #D06820;
  --green: #5A7247;

  /* Pas de variante sombre : l'app n'en a pas. `AppTheme` ne définit ni
     `darkTheme` ni `ThemeMode` — elle est crème en toutes circonstances, et le
     site doit l'être aussi. Forcer `light` empêche le navigateur de teinter
     les éléments natifs (champs, barres de défilement) en sombre. */
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

h1, h2, .wordmark {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700; margin: 0 0 .4rem; }
/* Les h2 des pages légales restent sobres ; ceux de l'accueil sont remontés
   dans home.css — un titre de la même taille que son paragraphe ne hiérarchise
   rien. */
h2 { font-size: 1.2rem; font-weight: 600; margin: 2.5rem 0 .6rem; }
p  { margin: 0 0 1rem; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }

.meta, .maj { color: var(--ink-2); font-size: .95rem; margin-top: 0; }

strong { font-weight: 650; }

/* ── Pied de page commun ─────────────────────────────────────────────────── */
footer {
  margin-top: 4.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--brand); text-decoration: underline; }

/* ── Accueil ─────────────────────────────────────────────────────────────── */
/* `.hero`, `.wave`/`pulse`, `.steps`/`.step` et `.soon` de la toute première
   maquette n'ont plus d'usage — l'accueil actuel vit entièrement dans
   home.css (`.hero-home`, `.split`, `.offers`…). `.wordmark` et `.baseline`
   restent : leur h1/p sont toujours dans index.html, stylés ici en base et
   affinés dans home.css pour le contexte du hero. */
.wordmark { font-size: clamp(2.6rem, 9vw, 4rem); font-weight: 700; margin: 0 0 .3rem; }

.baseline { font-size: clamp(1.1rem, 3vw, 1.35rem); color: var(--ink-2); margin: 0 0 2.5rem; }