@layer pages {
/* ============================================================================
   LE CLUB — seulement ce qui n'existe nulle part ailleurs.
   L'en-tete de page (.page-hero), la grille d'arguments (.why) et l'appel
   final (.cta-final) sont mutualises dans components.css.
   ========================================================================= */

/* Recit a gauche, photo a droite : la photo reste en haut, le texte defile. */
.club-story { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 1024px) {
  .club-story { grid-template-columns: 1.1fr 1fr; gap: var(--sp-16); }
  .club-photo { position: sticky; top: calc(var(--header-h-lg) + var(--sp-8)); }
}

.club-photo { margin: 0; }
.club-photo .media-zoom { border-radius: var(--r-2xl); box-shadow: var(--sh-3); }
.club-photo figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-style: italic;
}

/* ---- FICHE ENCADRANT ---------------------------------------------------- */
.person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  border: var(--bw-hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  transition: var(--t-all);
}
.person:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
  box-shadow: var(--sh-3);
}
.person .avatar { margin-bottom: var(--sp-3); }
.person__name { font-family: var(--ff-display); font-size: var(--fs-lg); text-transform: none; }
.person__role {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
}
.person__text { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
}