section { padding-block:var(--space-6); }

/* Hero */
.hero { min-height:100svh; display:flex; align-items:center; padding-top:var(--space-7); }
.hero__title { font-size:var(--fs-hero); max-width:14ch; }
.hero__bar { width:40%; margin-block:var(--space-4); }
.hero__ctas { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.hero__meta { color:var(--mod-gray-2); letter-spacing:0.12em; margin-top:var(--space-5); }

/* Sport */
.sport__grid { display:grid; gap:var(--space-5); }
.sport h2 { font-size:var(--fs-h2); margin-block:var(--space-2) var(--space-3); }
.sport p { color:var(--mod-gray-1); max-width:46ch; }
.vs { margin-top:var(--space-3); }
.vs > div { display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2);
  border-top:1px solid var(--mod-gray-3); font-family:var(--font-mono); font-size:0.75rem; }
.vs dt { color:var(--mod-gray-2); text-decoration:line-through; }
@media (min-width:720px){ .sport__grid{ grid-template-columns:1.1fr 1fr; } }

/* Principes */
.principes h2 { font-size:var(--fs-h2); margin-block:var(--space-2) var(--space-4); }
.principes__list li { display:grid; grid-template-columns:auto 1fr; gap:var(--space-3);
  align-items:baseline; padding-block:var(--space-3); border-top:1px solid var(--mod-gray-3); }
.principes__list span:last-child { font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.1rem,4vw,1.8rem); line-height:1; }

/* Manifesto */
.manifesto { text-align:center; }
.manifesto__line { font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.3rem,5vw,2.4rem); line-height:1.1; color:var(--mod-gray-2); margin-block:var(--space-2); }
/* When motion is reduced (or GSAP never runs the color reveal), keep manifesto
   lines readable — #555 on #0A0A0A is only 2.66:1, below WCAG AA for large text. */
@media (prefers-reduced-motion: reduce) {
  .manifesto__line { color:var(--mod-white); }
}

/* Meute */
.meute h2 { font-size:var(--fs-h2); margin-block:var(--space-2) var(--space-4); }
.meute__grid { display:grid; gap:var(--space-3); }
@media (min-width:560px){ .meute__grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .meute__grid{ grid-template-columns:repeat(4,1fr);} }

/* Épreuves */
.epreuves h2 { font-size:var(--fs-h2); margin-block:var(--space-2) var(--space-4); }
.chal { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-3); align-items:center;
  padding:var(--space-3); margin-bottom:var(--space-2); }
.chal__t { font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem; line-height:1; }
.chal__d { font-size:0.625rem; color:var(--mod-gray-1); margin-top:var(--space-1); letter-spacing:0.05em; }
.chal__st { font-size:0.625rem; letter-spacing:0.1em; }
.chal__st--live { background:var(--mod-yellow); color:#000; padding:3px 6px; }
.chal__st--done { color:var(--mod-gray-2); }

/* Uniforme */
.uniforme h2 { font-size:var(--fs-h2); margin-block:var(--space-2) var(--space-4); }
.uniforme__grid { display:grid; gap:var(--space-3); }
@media (min-width:560px){ .uniforme__grid{ grid-template-columns:repeat(3,1fr);} }
.prod__img { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:0.625rem; color:var(--mod-gray-2);
  background:repeating-linear-gradient(45deg,#141414,#141414 8px,#181818 8px,#181818 16px);
  border-bottom:1px solid var(--mod-gray-3); }
.prod__name { font-family:var(--font-display); text-transform:uppercase; padding:var(--space-2) var(--space-3) 0; }
.prod__price { color:var(--mod-yellow); padding:var(--space-1) var(--space-3) var(--space-3); }

/* Join */
.join { text-align:center; }
.join h2 { font-size:var(--fs-h2); margin-block:var(--space-2); }
.join__lead { color:var(--mod-gray-1); max-width:44ch; margin:0 auto var(--space-4); }
.join__form { margin-inline:auto; }
.join__socials { display:flex; gap:var(--space-4); justify-content:center; margin-top:var(--space-4); font-size:0.6875rem; letter-spacing:0.1em; }
.join__socials a:hover { color:var(--mod-white); }

/* Footer */
.footer { border-top:1px solid var(--mod-gray-3); padding-block:var(--space-5); }
.footer__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (min-width:560px){ .footer__grid{ grid-template-columns:2fr 1fr 1fr;} }
.footer__logo { font-family:var(--font-display); font-size:1.5rem; }
.footer__tag { color:var(--mod-gray-1); margin-top:var(--space-2); letter-spacing:0.1em; font-size:0.625rem; }
.footer h3 { margin-bottom:var(--space-2); }
.footer nav a { display:block; font-family:var(--font-mono); font-size:0.6875rem; color:var(--mod-gray-1); margin-bottom:var(--space-1); }
.footer nav a:hover { color:var(--mod-white); }
.footer__bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2);
  margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--mod-gray-3);
  font-size:0.625rem; color:var(--mod-gray-2); }