/* ============================================================
   CrossFit TTS — The Train Station · Waterloo
   Système visuel « Warm Playbook » — éditorial néo-brutaliste chaleureux.
   Réf. handoff Claude Design : fond crème #fbf6ef · encre #3a3128 ·
   blocs pastel (lavande / pêche / sauge / rose), ombres dures 0 4px 0,
   bordures 2px encre, pilules arrondies, légères rotations.
   Anton (titres capitales) · Public Sans (corps) · Space Mono (labels).
   ============================================================ */

:root {
  /* Fonds crème */
  --cream:    #fbf6ef;   /* fond page */
  --cream-2:  #fdf8f0;   /* surfaces, cartes */
  --sand:     #f5efe4;   /* cellules vides, zones neutres */
  --line:     #efe3d2;   /* filet clair */

  /* Encre (texte + bordures) */
  --ink:      #3a3128;   /* texte fort + bordures 2px */
  --ink-2:    #5a554c;   /* corps secondaire */
  --ink-3:    #5f5647;
  --muted:    #8a8374;   /* méta, légendes */

  /* Pastels d'accent */
  --lav:      #ddd0f0;   /* lavande */
  --peach:    #f6d4b5;   /* pêche */
  --sage:     #d3e5cd;   /* sauge */
  --pink:     #efc3dc;   /* rose */
  --gold:     #efdca6;   /* or doux (Calisthenics) */
  --grape:    #a678c8;   /* liens / eyebrow accent */
  --grape-2:  #b795d8;   /* contour de titre fantôme */
  --rose-2:   #d98cb8;   /* contour secondaire / soulignés */
  --lav-cast: #c9b3e8;   /* ombre portée douce sous CTA sombre */

  /* Typo */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body:    "Public Sans", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 20px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --shadow-hard: 0 4px 0 var(--ink);
  --header-h: 70px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: var(--grape); text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--lav); color: var(--ink); }

/* ── Typographie ── */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1.03; text-transform: uppercase;
  color: var(--ink); letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 4rem); }
h2 { font-size: clamp(2rem, 5vw, 2.85rem); margin-bottom: 0.5em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 800; }

/* Mot « fantôme » contouré (signature handoff) */
.accent {
  color: transparent;
  -webkit-text-stroke: 2px var(--grape-2);
  text-stroke: 2px var(--grape-2);
}
h2 .accent { -webkit-text-stroke-color: var(--rose-2); text-stroke: 2px var(--rose-2); }

.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink-2); line-height: 1.6; }

/* Eyebrow = label mono */
.eyebrow {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grape); margin-bottom: 0.9rem;
}
.eyebrow.is-magenta { color: var(--rose-2); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--cream-2);
  padding: 0.6em 1.1em; z-index: 2000; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Cibles d'ancre : décalées sous le header sticky (70px) pour que le
   titre ne soit pas masqué à l'arrivée sur /la-box/#coachs. */
:target, [id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

/* ── Reveal (progressive enhancement) ── */
.js .reveal { opacity: 0; transform: translateY(26px); }
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   TOP BAR + HEADER (NAP + navigation)
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  flex-wrap: wrap; padding: 8px 20px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--muted);
}
.topbar a { color: var(--ink-2); transition: color 0.2s ease; white-space: nowrap; }
.topbar a:hover { color: var(--grape); }
.topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grape); flex-shrink: 0; }
.topbar__sep { opacity: 0.5; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(251, 246, 239, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}
body.is-scrolled .site-header { box-shadow: 0 6px 22px rgba(58, 49, 40, 0.10); }
.site-header__inner {
  max-width: var(--container); margin: 0 auto; min-height: var(--header-h);
  padding: 12px clamp(20px, 4vw, 48px);
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__logo {
  flex-shrink: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink);
}
.nav__links { display: flex; align-items: center; gap: 2rem; flex: 1; justify-content: center; }
.nav__links a {
  font-family: var(--font-body); font-weight: 500; font-size: 0.9rem;
  color: var(--ink-2); position: relative; padding: 0.2rem 0; transition: color 0.2s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px;
  background: var(--rose-2); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.nav__cta {
  flex-shrink: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  color: var(--ink); background: var(--pink);
  padding: 11px 22px; border-radius: 999px; border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink); transform: rotate(-2deg);
  transition: transform 0.15s var(--ease), box-shadow 0.15s ease;
}
.nav__cta:hover { transform: rotate(-2deg) translateY(2px); box-shadow: 0 2px 0 var(--ink); }

.nav__burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; margin-left: auto; }
.nav__burger span { display: block; width: 23px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: all 0.3s var(--ease); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav__overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(58, 49, 40, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.nav__overlay.is-open { opacity: 1; pointer-events: auto; }
.nav__drawer {
  position: fixed; top: 0; right: 0; z-index: 1101;
  width: min(360px, 100vw); height: 100dvh; background: var(--cream);
  border-left: 2px solid var(--ink);
  padding: 1.25rem 1.25rem 1.75rem; display: flex; flex-direction: column; gap: 1rem;
  transform: translateX(100%); transition: transform 0.35s var(--ease);
  overflow-y: auto; box-shadow: -18px 0 50px rgba(58, 49, 40, 0.18);
}
.nav__drawer.is-open { transform: translateX(0); }

.nav__drawer-head { display: flex; align-items: center; justify-content: space-between; }
.nav__drawer-brand { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.nav__close {
  flex: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--cream-2); color: var(--ink); font-size: 1rem; display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--ink); transition: transform 0.12s var(--ease), box-shadow 0.12s ease;
}
.nav__close:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }

.nav__drawer-nav { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem; }
.nav__drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; color: var(--ink);
  padding: 0.7rem 1rem; border: 2px solid var(--ink); border-radius: 13px;
  box-shadow: 0 3px 0 var(--ink); transition: transform 0.12s var(--ease), box-shadow 0.12s ease;
}
.nav__drawer-nav a::after { content: "→"; opacity: 0.45; font-weight: 700; }
.nav__drawer-nav a:nth-child(5n+1) { background: var(--lav); }
.nav__drawer-nav a:nth-child(5n+2) { background: var(--peach); }
.nav__drawer-nav a:nth-child(5n+3) { background: var(--sage); }
.nav__drawer-nav a:nth-child(5n+4) { background: var(--pink); }
.nav__drawer-nav a:nth-child(5n+5) { background: var(--cream-2); }
/* léger désalignement néo-brutaliste */
.nav__drawer-nav a:nth-child(odd) { transform: rotate(-1.2deg); }
.nav__drawer-nav a:nth-child(even) { transform: rotate(1.2deg); }
.nav__drawer-nav a:active { transform: translateY(3px) rotate(0deg); box-shadow: 0 0 0 var(--ink); }
.nav__drawer-nav a[aria-current="page"]::after { content: "●"; opacity: 0.8; color: var(--grape); }

/* CTA essai gratuit : pastel 3D (surcharge .btn-primary) */
.nav__drawer .nav__drawer-cta {
  margin-top: auto; text-align: center; transform: rotate(-1.5deg);
  background: var(--pink); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.nav__drawer .nav__drawer-cta:active { transform: rotate(0deg) translateY(4px); box-shadow: 0 1px 0 var(--ink); }

/* ============================================================
   SECTIONS
   ============================================================ */
main { display: block; }
main > section {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) var(--gutter);
}
main > section > p, main > section > ul, main > section > ol {
  max-width: 62ch; font-size: 1.08rem; color: var(--ink-2);
}
main > section > .lead { color: var(--ink-2); }
main > section > img, main > section > picture { margin-block: 2rem; }

/* Titre fantôme géant en arrière-plan (discret) */
main > section[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute; top: clamp(0.5rem, 2vw, 1.5rem); right: var(--gutter);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4rem, 13vw, 11rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px rgba(58, 49, 40, 0.07);
  z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
}
main > section[data-ghost] > * { position: relative; z-index: 1; }

/* ── Grilles ── */
.grid { display: grid; gap: clamp(1.15rem, 2.5vw, 1.5rem); margin-top: 2.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* Photo encadrée avec panneau pastel décalé (signature handoff) */
.media-oval { margin-block: 2.5rem; position: relative; width: fit-content; }
.media-oval::before {
  content: ""; position: absolute; inset: 18px -14px -16px 18px;
  background: var(--lav); border-radius: var(--radius-lg); z-index: 0;
}
.media-oval picture, .media-oval img { position: relative; z-index: 1; }
.media-oval picture img {
  border-radius: var(--radius-lg); border: 2px solid var(--ink);
  display: block; width: 100%;
}

/* Placeholder photo (convention handoff : rayures + label mono) */
.ph {
  display: grid; place-items: center; width: 100%; max-width: 560px;
  border: 2px solid var(--ink); border-radius: var(--radius-lg);
  color: var(--muted); font-family: var(--font-mono); font-size: 0.82rem;
  text-align: center; padding: 1.25rem; overflow: hidden; margin-block: 2.25rem;
}
.ph--stripe { background: repeating-linear-gradient(45deg, #e5dfd2 0 7px, #eee9df 7px 14px); }
.ph--lav   { background: var(--lav); }
.ph--peach { background: var(--peach); }
.ph--sage  { background: var(--sage); }
.ph--pink  { background: var(--pink); }
.ph--wide  { max-width: none; }
.ph span {
  background: var(--cream-2); color: var(--ink-2); padding: 0.4rem 0.85rem;
  border-radius: 999px; border: 1px solid var(--line); max-width: 90%;
}
.grid .ph, .card .ph { margin-block: 0; max-width: none; }

/* Photo encadrée de section : on garde la hauteur (~gabarit placeholder),
   la largeur suit le ratio naturel de l'image — jamais d'étirement.
   Panneau pastel décalé en « ombre » (comme le hero). */
.photo { position: relative; width: fit-content; max-width: 100%; margin-block: 2.25rem; }
.photo::before {
  content: ""; position: absolute; inset: 16px -14px -14px 16px;
  background: var(--peach); border-radius: var(--radius-xl); z-index: 0;
}
.photo picture { position: relative; z-index: 1; display: block; }
.photo picture img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: clamp(300px, 40vw, 420px);
  border: 2px solid var(--ink); border-radius: var(--radius-lg);
}

/* Bannière photo 16:9 (communauté) : remplit le cadre + ombre pastel */
/* Cadre à taille stricte, repris trait pour trait du placeholder .ph :
   même largeur, même bordure, même rayon, même marge, aucune ombre.
   Le ratio est passé en style inline, comme le faisait la macro ph().
   C'est le cadre qui commande, jamais la photo : elle le remplit
   entièrement (cover) et déborde sur son axe long.

   Recadrage : ajouter style="--focal: 50% 30%" sur le conteneur pour
   déplacer le point d'intérêt (2e valeur = vertical, 0% = haut).
   Variante sans rognage : classe .photo-frame--contain. */
.photo-frame {
  display: grid; place-items: center; width: 100%; overflow: hidden;
  border: 2px solid var(--ink); border-radius: var(--radius-lg);
  margin-block: 2.25rem; background: var(--sand);
}
.photo-frame picture { display: block; width: 100%; height: 100%; }
.photo-frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focal, 50% 50%);
}
.photo-frame--contain img { object-fit: contain; }

.photo-16x9 { margin-block: 2.5rem; }
.photo-16x9 picture {
  display: block; width: 100%; overflow: hidden;
  border: 2px solid var(--ink); border-radius: var(--radius-lg);
  box-shadow: 10px 10px 0 var(--lav);
}
.photo-16x9 img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ============================================================
   HERO (2 colonnes : texte + photo encadrée)
   ============================================================ */
.hero {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(2rem, 5vw, 3rem);
  align-items: center; padding: clamp(48px, 6vw, 72px) var(--gutter);
}
.hero__content { display: flex; flex-direction: column; gap: 1.4rem; }
.hero h1 { max-width: 14ch; text-wrap: balance; }
.hero__content > p:not(.eyebrow) { max-width: 50ch; font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--ink-2); }
.hero__actions { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }

.hero__media { position: relative; }
.hero__media::before {
  content: ""; position: absolute; inset: 20px -14px -14px 20px;
  background: var(--lav); border-radius: var(--radius-xl); z-index: 0;
}
.hero__media picture, .hero__media img { position: relative; z-index: 1; }
.hero__media picture img {
  width: 100%; height: clamp(340px, 46vw, 520px); object-fit: cover;
  border-radius: var(--radius-lg); border: 2px solid var(--ink); display: block;
}
.hero__badge {
  position: absolute; top: -16px; right: -6px; z-index: 2;
  background: var(--pink); color: var(--ink); font-weight: 800; font-size: 0.85rem;
  padding: 11px 18px; border-radius: 999px; border: 2px solid var(--ink);
  transform: rotate(4deg); box-shadow: 0 3px 0 var(--ink);
}

/* Entrée échelonnée au chargement (colonne texte) */
.js .hero .hero__content > * { opacity: 0; transform: translateY(24px); }
.js .hero-in .hero__content > * { animation: heroRise 0.8s var(--ease) forwards; }
.js .hero-in .hero__content > *:nth-child(1) { animation-delay: 0.06s; }
.js .hero-in .hero__content > *:nth-child(2) { animation-delay: 0.16s; }
.js .hero-in .hero__content > *:nth-child(3) { animation-delay: 0.26s; }
.js .hero-in .hero__content > *:nth-child(4) { animation-delay: 0.36s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }

.hero__scroll { display: none; }

/* Trois piliers sous le hero (CrossFit · Hyrox · TTS Switch, à égalité) */
.pillars {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  padding: 0 var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
}
.pillar {
  position: relative; display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--cream-2); border: 2px solid var(--ink); border-radius: var(--radius-lg);
  padding: 1.5rem; color: var(--ink); transition: transform 0.2s var(--ease);
}
.pillar--lav { box-shadow: 7px 7px 0 var(--lav); }
.pillar--peach { box-shadow: 7px 7px 0 var(--peach); }
.pillar--sage { box-shadow: 7px 7px 0 var(--sage); }
.pillar:hover { transform: translateY(-5px); }
.pillar__badge {
  position: absolute; top: -13px; right: 18px;
  font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--ink); color: var(--cream-2); border: 2px solid var(--ink);
  padding: 4px 11px; border-radius: 999px; transform: rotate(2deg);
}
.pillar__k { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; }
.pillar__d { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); flex: 1; }
.pillar__go { font-weight: 800; font-size: 0.92rem; color: var(--grape); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

/* Hero variantes pages internes */
.hero--center {
  display: block; max-width: 900px; text-align: center;
  padding-block: clamp(56px, 7vw, 80px);
}
.hero--center .hero__content { align-items: center; }
.hero--center .hero__content > p:not(.eyebrow) { margin-inline: auto; max-width: 54ch; }
.hero--stack { display: block; }
.hero--stack .hero__content { margin-bottom: 2.5rem; }
.hero--stack .hero h1, .hero--stack h1 { max-width: 20ch; }

/* Carte réservation (essai gratuit) */
.booking-card {
  background: var(--cream-2); border: 2px solid var(--ink); border-radius: var(--radius-lg);
  box-shadow: 0 5px 0 var(--lav); padding: 2rem; display: flex; flex-direction: column; gap: 1rem;
  position: sticky; top: calc(var(--header-h) + 1rem);
}
.booking-card h2 { font-size: 1.6rem; margin: 0; }
.booking-card p { color: var(--ink-2); font-size: 0.98rem; margin: 0; }
.booking-card .btn-primary { margin-top: 0.4rem; text-align: center; }

/* Étapes numérotées (essai gratuit) */
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; margin: 0.5rem 0 0; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; padding: 0; border: 0; }
.steps li::before { display: none; }
.step__num {
  flex: none; width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--ink);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink);
}
.steps li:nth-child(1) .step__num { background: var(--lav); }
.steps li:nth-child(2) .step__num { background: var(--peach); }
.steps li:nth-child(3) .step__num { background: var(--sage); }
.steps li:nth-child(4) .step__num { background: var(--pink); }
.step__body strong { display: block; font-size: 1rem; margin-bottom: 0.15rem; }
.step__body span { font-size: 0.95rem; color: var(--ink-2); }

/* ============================================================
   BOUTONS (pilules néo-brutalistes, ombre dure « pressable »)
   ============================================================ */
.btn-primary, .btn-outline {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: 1rem; padding: 15px 28px; border-radius: 999px;
  border: 2px solid var(--ink);
  transition: transform 0.14s var(--ease), box-shadow 0.14s ease;
}
.btn-primary { background: var(--ink); color: var(--cream-2); box-shadow: 0 5px 0 var(--lav-cast); }
.btn-primary:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--lav-cast); }
.btn-primary:active { transform: translateY(5px); box-shadow: 0 0 0 var(--lav-cast); }

.btn-outline { background: var(--cream-2); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.btn-outline:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.btn-outline:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }

/* Lien souligné (action secondaire discrète) */
.btn-link {
  display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  color: var(--ink); padding: 6px 4px; border-bottom: 2px solid var(--rose-2);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btn-link:hover { color: var(--grape); border-color: var(--grape); }

/* Bouton isolé placé directement dans une section : espace au-dessus */
main > section > .btn-primary, main > section > .btn-outline, main > section > .btn-link { margin-top: 2.25rem; }

/* ============================================================
   CARTES (crème bordée + pastille couleur alternée)
   ============================================================ */
.card {
  position: relative; background: var(--cream-2);
  border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1.7rem; display: flex; flex-direction: column; gap: 0.65rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s ease;
}
.card::before {
  content: ""; width: 44px; height: 44px; border-radius: 12px;
  background: var(--lav); margin-bottom: 0.35rem;
}
.card:nth-child(4n+2)::before { background: var(--peach); }
.card:nth-child(4n+3)::before { background: var(--sage); }
.card:nth-child(4n+4)::before { background: var(--pink); }
.card:hover { transform: translateY(-5px); box-shadow: 0 9px 0 var(--lav); }

/* Grille désordonnée — modificateur à poser sur le conteneur .grid.
   Cycle de 4 angles inégaux : un désordre régulier se lit comme une
   erreur, un désordre irrégulier se lit comme une intention.
   La carte se redresse au survol, comme .coach et .testimonial. */
.grid--tilted .card:nth-child(4n+1) { transform: rotate(-1.2deg); }
.grid--tilted .card:nth-child(4n+2) { transform: rotate(0.9deg); }
.grid--tilted .card:nth-child(4n+3) { transform: rotate(-0.6deg); }
.grid--tilted .card:nth-child(4n+4) { transform: rotate(1.4deg); }
.grid--tilted .card:hover { transform: rotate(0deg) translateY(-5px); }
.card:nth-child(4n+2):hover { box-shadow: 0 9px 0 var(--peach); }
.card:nth-child(4n+3):hover { box-shadow: 0 9px 0 var(--sage); }
.card:nth-child(4n+4):hover { box-shadow: 0 9px 0 var(--pink); }
.card h3 { margin: 0; }
.card p { color: var(--ink-2); font-size: 0.98rem; }
.card .display {
  font-family: var(--font-display); font-weight: 400; font-size: 2.9rem;
  color: var(--ink); margin: 0.1rem 0 0.3rem; line-height: 1;
}
.card .btn-primary, .card .btn-outline { margin-top: auto; align-self: flex-start; font-size: 0.92rem; padding: 12px 22px; }

/* Carte sans pastille (tarifs) */
.card.is-plain::before { display: none; }

/* Carte mise en avant (tarif vedette) */
.card.is-featured { background: var(--lav); }
.card.is-featured::before { display: none; }
.card__badge {
  position: absolute; top: -14px; right: 22px;
  font-family: var(--font-body); font-weight: 800; font-size: 0.72rem;
  color: var(--ink); background: var(--pink); border: 2px solid var(--ink);
  padding: 5px 13px; border-radius: 999px; transform: rotate(3deg);
}

/* ============================================================
   COACHS (grille de fiches)
   ============================================================ */
.coach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
/* Carte coach. Ombre encre unique : la rotation pastel des ombres ne
   codait aucune information, elle ajoutait du bruit. */
.coach {
  background: var(--cream-2); border: 2px solid var(--ink); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-hard);
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
}
/* Désordre maîtrisé : cycle de 4 angles contre une grille de 3 colonnes,
   donc aucune rotation ne se répète en ligne ni en colonne. La carte se
   redresse au survol, comme .testimonial et .stat-bar. */
.coach:nth-child(4n+1) { transform: rotate(-1.2deg); }
.coach:nth-child(4n+2) { transform: rotate(0.9deg); }
.coach:nth-child(4n+3) { transform: rotate(-0.6deg); }
.coach:nth-child(4n+4) { transform: rotate(1.4deg); }
.coach:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 9px 0 var(--ink); }

/* En-tête : pastille + identité sur une ligne, alignées au centre. */
.coach__head { display: flex; align-items: center; gap: 13px; padding: 18px 20px 0; }
.coach__id { min-width: 0; }

/* Pastille monogramme, décorative (aria-hidden) : le prénom porte l'info.
   Rotation pastel sur 4 temps, le motif standard du site. Sur une grille
   à 3 colonnes, le décalage évite toute répétition en ligne ou colonne. */
.coach__mono {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--lav); border-radius: 13px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.2rem; line-height: 1; letter-spacing: 0.06em; text-indent: 0.06em;
  text-transform: uppercase; color: var(--ink);
}
.coach:nth-child(4n+2) .coach__mono { background: var(--peach); }
.coach:nth-child(4n+3) .coach__mono { background: var(--sage); }
.coach:nth-child(4n+4) .coach__mono { background: var(--pink); }

.coach__name { margin: 0; font-size: 1.15rem; line-height: 1.15; }
.coach__role { margin: 1px 0 0; font-size: 0.82rem; color: var(--ink-2); }

.coach__body { padding: 14px 20px 18px; display: flex; flex-direction: column; flex: 1; gap: 12px; }

/* Disciplines en tags : le filet clair leur donne du contour sur le crème,
   sinon le fond sable seul se confond avec la carte. */
.coach__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; list-style: none; }
.coach__tags li {
  background: var(--sand); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; font-size: 0.78rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
/* Neutralise la puce losange de "main > section li" : les tags ne sont pas
   une liste de prose. Même parade que .steps li::before. */
.coach__tags li::before { display: none; }

/* Certification : l'information la plus forte après le prénom, donc pleine
   encre et graisse marquée. Collée en bas quelle que soit la hauteur. */
.coach__certs {
  margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 0.85rem; font-weight: 700; color: var(--ink);
}
/* Coach sans certification : la ligne ET son filet disparaissent. */
.coach__certs:empty, .coach__tags:empty { display: none; }
@media (max-width: 900px) { .coach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .coach-grid { grid-template-columns: 1fr; } }

/* Blocs pastel inclinés (philosophie, infos) */
.pastel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.pastel-card { border-radius: var(--radius); padding: 24px 26px; }
.pastel-card:nth-child(3n+1) { background: var(--lav); transform: rotate(-1deg); }
.pastel-card:nth-child(3n+2) { background: var(--peach); transform: rotate(1deg); }
.pastel-card:nth-child(3n+3) { background: var(--sage); transform: rotate(-1deg); }
.pastel-card h3 { margin: 0 0 0.4rem; }
.pastel-card p { margin: 0; font-size: 0.95rem; color: var(--ink-3); }

/* ============================================================
   STAT-BAR (blocs pastel inclinés + grands chiffres)
   ============================================================ */
.stat-bar {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  padding: 0.5rem var(--gutter) 1rem;
}
.stat-bar > div {
  border-radius: var(--radius); padding: 24px 26px; background: var(--lav);
  transition: transform 0.22s var(--ease);
}
.stat-bar > div:nth-child(1) { background: var(--lav);   transform: rotate(-1deg); }
.stat-bar > div:nth-child(2) { background: var(--peach); transform: rotate(1deg); }
.stat-bar > div:nth-child(3) { background: var(--sage);  transform: rotate(-1deg); }
.stat-bar > div:nth-child(4) { background: var(--pink);  transform: rotate(1deg); }
.stat-bar > div:hover { transform: rotate(0deg) translateY(-4px); }
.stat-bar__inner { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--ink-3); }
.stat-bar__value {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 2.6rem); line-height: 1; color: var(--ink);
}
.stat-bar__value.cyan, .stat-bar__value.magenta { color: var(--ink); }

/* ============================================================
   TRAIN-BARBELL BAND (bloc sombre signature — emblème néon)
   ============================================================ */
.train-band {
  width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; text-align: center;
  background: var(--ink); color: var(--cream-2);
  border-radius: var(--radius-xl); padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}
.train-band__eyebrow {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lav); margin-bottom: 1.25rem;
}
.train-band picture { display: block; width: min(620px, 90%); margin: 0 auto; }
.train-band picture img { width: 100%; animation: trainFloat 6s ease-in-out infinite; }
.train-band__tag {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 0.95; color: var(--cream-2);
  margin-top: 1.25rem; text-transform: uppercase;
}
.train-band__tag .accent { -webkit-text-stroke-color: var(--lav); text-stroke-color: var(--lav); }
@keyframes trainFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============================================================
   MARQUEE (bandeau défilant néo-brutaliste)
   ============================================================ */
.marquee {
  position: relative; overflow: hidden; padding-block: 1.1rem;
  margin-block: clamp(2.5rem, 6vw, 4rem);
  border-block: 2px solid var(--ink); background: var(--peach);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: 3rem; animation: marquee 30s linear infinite; }
.marquee__track span {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 2rem);
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 3rem;
}
.marquee__track span::after { content: "✳"; color: var(--grape); font-size: 0.7em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   TÉMOIGNAGES (cartes crème inclinées + étoiles)
   ============================================================ */
.testimonial {
  position: relative; background: var(--cream-2);
  border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s ease;
}
.testimonial:nth-child(odd) { transform: rotate(-1deg); }
.testimonial:nth-child(even) { transform: rotate(1deg); }
.testimonial::before { content: "★★★★★"; letter-spacing: 2px; color: var(--grape); font-size: 1.05rem; }
.testimonial:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 8px 0 var(--lav); }
.testimonial p { font-size: 1rem; color: var(--ink-2); line-height: 1.65; margin: 0; }
.testimonial footer { font-weight: 800; font-size: 0.92rem; color: var(--ink-3); }

/* ============================================================
   LISTES
   ============================================================ */
main > section ul:not(.nav__links):not(.stat-bar):not(.marquee__track) { padding-left: 0; }
main > section li {
  position: relative; padding: 0.55rem 0 0.55rem 1.8rem;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
main > section li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 12px; height: 12px; border-radius: 4px; transform: rotate(45deg);
  background: var(--grape);
}

/* ============================================================
   TABLE (horaires)
   ============================================================ */
table {
  width: 100%; max-width: var(--container); border-collapse: separate; border-spacing: 0;
  margin-top: 2rem; font-size: 0.98rem; background: var(--cream-2);
  border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden;
}
thead th {
  background: var(--ink); color: var(--cream-2);
  font-family: var(--font-body); font-weight: 800; font-size: 0.95rem;
  text-align: left; padding: 0.95rem 1.2rem;
}
tbody th, tbody td { padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
tbody th[scope="row"] {
  text-align: left; color: var(--ink); font-family: var(--font-mono); font-weight: 700;
  white-space: nowrap; width: 1%; padding-right: 2rem;
}
tbody tr:hover td, tbody tr:hover th { background: var(--sand); }
tbody td { color: var(--ink-2); }

/* ============================================================
   PLANNING (grille hebdo colorée — page Horaires)
   ============================================================ */
.sched {
  overflow-x: auto; margin-top: 2rem;
  background: var(--cream-2); border: 2px solid var(--ink); border-radius: var(--radius); padding: 20px;
}
.sched__grid { min-width: 860px; display: grid; grid-template-columns: 76px repeat(7, 1fr); gap: 6px; }
.sched__day { font-weight: 800; text-align: center; padding: 8px 0; font-size: 0.9rem; }
.sched__time { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); align-self: center; }
.sched__cell {
  border-radius: 8px; padding: 9px 6px; text-align: center;
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center;
}
.sched__cell--empty { background: var(--sand); }
.sched__cell--lav   { background: var(--lav); }
.sched__cell--pink  { background: var(--pink); }
.sched__cell--sage  { background: var(--sage); }
.sched__cell--peach { background: var(--peach); }
.sched__cell--gold  { background: var(--gold); }
.sched__cls { font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.sched__t { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-2); }
.sched__legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: 0.8rem; font-weight: 600; align-items: center; }
.sched__leg { display: flex; align-items: center; gap: 7px; }
.sched__dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sched__dot--lav { background: var(--lav); } .sched__dot--pink { background: var(--pink); }
.sched__dot--sage { background: var(--sage); } .sched__dot--peach { background: var(--peach); }
.sched__dot--gold { background: var(--gold); }
.sched__note { color: var(--muted); font-weight: 500; }

/* ============================================================
   FAQ (native <details>, 0 JS)
   ============================================================ */
details.faq-item {
  max-width: var(--container); border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--cream-2); padding: 0 1.5rem; margin-bottom: 0.9rem;
}
details.faq-item[open] { box-shadow: 0 4px 0 var(--lav); }
details.faq-item summary {
  list-style: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); padding: 1.15rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+"; font-family: var(--font-body); font-weight: 400; color: var(--grape);
  font-size: 1.7rem; line-height: 1; transition: transform 0.3s var(--ease);
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item > p { margin: 0 0 1.25rem; color: var(--ink-2); line-height: 1.7; }

/* ============================================================
   BLOC CTA (panneau lavande arrondi)
   ============================================================ */
main > section.cta-block {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin: 0 auto clamp(3.5rem, 8vw, 5.5rem);
  background: var(--lav); border: 2px solid var(--ink); border-radius: var(--radius-xl);
  text-align: center; padding: clamp(2.75rem, 6vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
}
main > section.cta-block h2 { color: var(--ink); }
main > section.cta-block h2 .accent { -webkit-text-stroke-color: var(--grape); text-stroke-color: var(--grape); }
main > section.cta-block p { color: var(--ink-2); margin-inline: auto; max-width: 48ch; }
main > section.cta-block .btn-primary { margin-top: 1.6rem; box-shadow: 0 5px 0 var(--cream-2); }
main > section.cta-block .btn-primary:hover { box-shadow: 0 3px 0 var(--cream-2); }

/* ============================================================
   ADRESSE / CONTACT / FORMULAIRE
   ============================================================ */
address { font-style: normal; font-size: 1.08rem; line-height: 1.9; color: var(--ink-2); margin-bottom: 2rem; }
address a { color: var(--grape); font-weight: 700; }
iframe { width: 100%; border: 0; border-radius: var(--radius); }
form { max-width: 36rem; display: grid; gap: 0.3rem; margin-top: 2rem; }
form label { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-top: 0.9rem; }
input, textarea, select {
  font-family: var(--font-body); font-size: 1rem; background: var(--cream-2);
  border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); padding: 0.8rem 1rem;
  transition: box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px var(--lav); }
textarea { min-height: 9rem; resize: vertical; }
form .btn-primary { margin-top: 1.4rem; justify-self: start; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--cream-2); border-top: 2px solid var(--ink); }
.site-footer__map iframe { display: block; width: 100%; height: 260px; border-radius: 0; }

/* Mention d'origine sous un bloc de témoignages */
.attribution-note {
  margin-top: 1.5rem; font-family: var(--font-mono);
  font-size: 0.75rem; line-height: 1.5; color: var(--muted);
}
.stat-bar__inner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.stat-bar__inner a:hover { color: var(--ink); }

/* ============================================================
   LISTE DE LIENS DE RATTRAPAGE (404)
   ============================================================ */
.link-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.5rem; margin-top: 1.75rem;
}
.link-list a {
  font-weight: 700; color: var(--ink-2);
  border-bottom: 2px solid var(--line); padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link-list a:hover { color: var(--grape); border-color: var(--grape); }

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legal-date {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.hero--center .legal-date { margin-inline: auto; }
.legal-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

/* ============================================================
   FORMULAIRE
   ============================================================ */
form {
  display: flex; flex-direction: column; gap: 0.4rem;
  max-width: 44rem; margin-top: 2rem; padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--cream-2); border: 2px solid var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hard);
}
form label {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 0.9rem;
}
form input[type="text"], form input[type="email"], form textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 2px solid var(--ink);
  border-radius: 12px; padding: 12px 14px; width: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
form textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
form input:focus-visible, form textarea:focus-visible {
  outline: none; border-color: var(--grape); box-shadow: 0 3px 0 var(--grape);
}
form input:invalid:not(:placeholder-shown) { border-color: var(--rose-2); }
.form-consent { margin: 1.4rem 0 0.4rem; }
.form-consent label {
  display: flex; align-items: flex-start; gap: 0.6rem; margin: 0;
  font-family: var(--font-body); font-size: 0.88rem; line-height: 1.55;
  letter-spacing: 0; text-transform: none; color: var(--ink-2); cursor: pointer;
}
.form-consent input[type="checkbox"] {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--grape); cursor: pointer;
}
form .btn-primary { align-self: flex-start; margin-top: 1rem; }
form .btn-primary[disabled] { opacity: 0.6; cursor: progress; }

.form-msg {
  max-width: 44rem; margin-top: 2rem; padding: 16px 20px;
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-hard); font-size: 0.95rem; line-height: 1.55;
}
.form-msg[hidden] { display: none; }
.form-msg--ok { background: var(--sage); }
.form-msg--ko { background: var(--peach); }
.form-msg a { font-weight: 700; text-decoration: underline; }
/* Le formulaire suit un message : on évite la double marge. */
.form-msg + form { margin-top: 1rem; }

/* ============================================================
   CARTE CONSENTIE (click-to-load, aucun cookie avant clic)
   ============================================================ */
.map-consent {
  position: relative; width: 100%; height: var(--map-h, 300px);
  display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(45deg, #e5dfd2 0 7px, #eee9df 7px 14px);
  border-block: 2px solid var(--ink);
}
.map-consent__inner {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center; padding: 1.5rem clamp(1rem, 4vw, 2rem);
  max-width: 46ch; background: var(--cream-2);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-hard); transform: rotate(-1deg);
}
.map-consent__inner .eyebrow { margin: 0; }
.map-consent__addr { margin: 0; font-weight: 800; font-size: 1rem; color: var(--ink); }
.map-consent__note { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--ink-2); }
.map-consent__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 1rem; margin-top: 0.35rem;
}
.map-consent__btn { font-size: 0.88rem; padding: 11px 20px; }
.map-consent__actions .btn-link { font-size: 0.82rem; }
.map-consent iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-consent.is-loaded { background: var(--sand); place-items: stretch; }
/* Sans JS le bouton ne peut rien faire : on ne montre que le lien sortant. */
.no-js .map-consent__btn { display: none; }
@media (max-width: 640px) {
  .map-consent__inner { transform: none; }
}
.site-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 3rem);
  max-width: var(--container); margin: 0 auto; padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) 2rem;
}
.site-footer__col .nav__logo, .site-footer__col > .footer-logo {
  font-family: var(--font-display); font-weight: 400; font-size: 1.25rem;
  text-transform: uppercase; color: var(--ink); margin-bottom: 0.75rem; display: block;
}
.site-footer__col .footer-tag { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--grape); margin-bottom: 1rem; }
.site-footer__col p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 0.9rem; }
.site-footer__col strong { display: block; font-weight: 800; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.8rem; }
.site-footer__col li { padding: 0.28rem 0; }
.site-footer__col a { color: var(--ink-2); transition: color 0.2s ease; }
.site-footer__col a:hover { color: var(--grape); }
.site-footer__bar {
  border-top: 1px solid var(--line); padding: 1.4rem var(--gutter);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: var(--container); margin: 0 auto;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .topbar { gap: 0.9rem; font-size: 0.66rem; }
  .topbar__sep { display: none; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .hero { grid-template-columns: 1fr; }
  .hero__media { max-width: 520px; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .topbar { justify-content: center; gap: 0.3rem 0.85rem; text-align: center; }
  .stat-bar { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  main > section[data-ghost]::before { font-size: clamp(3rem, 22vw, 6rem); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero .hero__content > * { opacity: 1; transform: none; animation: none; }
  .train-band picture img { animation: none; }
}