/* Tokens du site : une seule famille d'accent, mode clair uniquement. */
:root {
  --f-titre: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-texte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 700;
  --f-casse-kicker: uppercase;
  --tm: 0.8rem;
  --t1: 1.0rem;
  --t2: 1.25rem;
  --t3: 1.562rem;
  --t4: 1.953rem;
  --t5: 2.441rem;
  --t6: 3.052rem;
  --t7: 3.815rem;
  --t-hero: clamp(2.44rem, 6vw, 4.77rem);
  --e1: 0.3rem;
  --e2: 0.6rem;
  --e3: 0.9rem;
  --e4: 1.2rem;
  --e5: 1.8rem;
  --e6: 2.4rem;
  --e7: 3.6rem;
  --e8: 4.8rem;
  --r-carte: 16px;
  --r-bouton: 999px;
  --r-image: 12px;
  --largeur: 1280px;
  --ico-trait: 2.5;
  --header-h: 76px;
  --bandeau-h: 44px;
  --c-fond: #ffffff;
  --c-fond-2: #f2f7f3;
  --c-surface: #ffffff;
  --c-texte: #0a0a0a;
  --c-texte-2: #4b5563;
  --c-primaire: #0b7a45;
  --c-sur-primaire: #ffffff;
  --c-primaire-clair: #0dd874;
  --c-secondaire: #0b7a45;
  --c-sur-secondaire: #ffffff;
  --c-primaire-texte: #0b7a45;
  --c-secondaire-texte: #0b7a45;
  --c-doux: #e6f4ec;
  --c-sur-doux: #0a0a0a;
  --c-bord: #c9e8d5;
  --c-voile: #0c1812;
  --c-sur-voile: #ffffff;
  --c-ombre: #0b3a24;
  --o-carte: 0 1px 2px rgba(10, 10, 10, .04);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #0b3a24 22%, transparent);
  --carte-fond: #f2f7f3;
  --carte-encre: #0a0a0a;
  --carte-encre-2: #4b5563;
  --carte-lien: #0b7a45;
  --carte-bord: 1px solid #c9e8d5;
  --btn-fond: transparent;
  --btn-texte: #0b7a45;
  --btn-bord: 0 solid transparent;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #0b7a45;
  --lien-deco: none;
  --lien-epaisseur: 1px;
  --lien-fond: #e6f4ec;
  --lien-fond-encre: #0a0a0a;
}

body { font-family: var(--f-texte); }
h1, h2, h3, h4 { font-family: var(--f-titre); }

/* Hero mobile : header + bandeau + hero tiennent exactement dans 100svh. */
@media (max-width: 767px) {
  .hero-site { padding-top: .4rem !important; padding-bottom: .4rem !important; }
  .hero-site .hero-chapo { line-height: 1.4 !important; }
  .hero-site .hero-preuve { margin-top: 1rem !important; gap: .5rem 1rem !important; }
  .hero-site .hero-pied { padding-top: .75rem !important; }
  .hero-site [data-defile] img { height: 26px !important; }
  .hero-site [data-defile] .kv-piste > * { margin-right: 2rem !important; }
  .hero-site .hero-pied p { margin-top: .5rem !important; font-size: .68rem !important; }
  .hero-site .hero-preuve img { height: 2rem !important; width: 2rem !important; }
}