/* ============================================================
   Page à propos.

   Un propos avant les engagements : l'ouverture se lit comme un texte,
   à la mesure du texte courant, puis les engagements suivent en liste
   sans numéros, puisqu'ils ne sont pas une séquence. La page se ferme
   sur la signature de la marque, puis sur les trois clubs et le guide
   (snippets/onward.liquid). Page éditoriale : tout y reste franc.
   ============================================================ */

.about-page { padding-block: clamp(28px, 4vw, 56px) var(--space-section); }

.about-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(35px, 6vw, 90px);
  align-items: end;
}

/* Sans photo, l'ouverture est un texte : titre à gauche, propos à droite. */
.about-page__hero--text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.about-page__hero--text .about-page__story { margin-top: 0; padding-top: 6px; }

.about-page__content h1 {
  margin: 0 0 25px;
}

.about-page__lead {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-70);
  font-size: 1.22rem;
  line-height: 1.5;
}

.about-page__visual {
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 3;
}

.about-page__visual img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Le propos ---------- */

.about-page__story {
  max-width: 62ch;
  margin: clamp(56px, 7vw, 96px) 0 0;
  font-size: 1.14rem;
  line-height: 1.7;
}

.about-page__story .rte > p:first-child {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.about-page__story .rte + .rte { margin-top: 1em; }

/* ---------- Les engagements ---------- */

.about-page__chapters {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}

.about-page__chapters-title {
  margin: 0 0 28px;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.about-page__chapter-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un filet d'encre au-dessus de chaque engagement : le vert reste à l'achat. */
.about-page__chapter {
  padding-top: 18px;
  border-top: 1px solid var(--ink-12);
}

.about-page__chapter h3 {
  margin: 0 0 10px;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.about-page__chapter .rte { max-width: 52ch; color: var(--ink-70); }
.about-page__chapter .rte p:last-child { margin-bottom: 0; }

/* ---------- Événement ---------- */

/* Les photos gardent leur format : sur grand écran elles partagent une
   même hauteur, chacune au prorata de son ratio (--ar). Aucun recadrage. */
.about-event {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}

.about-event__title {
  margin: 0 0 20px;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.about-event__text { max-width: 60ch; margin-bottom: 24px; color: var(--ink-70); }

.about-event__figure { margin: 0; }

.about-event__photos {
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-event__photo {
  flex: var(--ar, 1) 1 0;
  min-width: 0;
}

.about-event__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.about-event__figure figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-12);
  color: var(--ink-70);
  font-size: .95rem;
}

@media (max-width: 759px) {
  .about-event__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .about-event__photo:first-child { grid-column: 1 / -1; }
}

/* ---------- L'équipe ---------- */

.about-page__team { margin-top: clamp(56px, 7vw, 96px); }

.about-page__team-title {
  margin: 0 0 28px;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.about-page__team-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px clamp(20px, 3vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-page__member-photo {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--ink-12);
  aspect-ratio: 4 / 5;
}

.about-page__member-photo img { width: 100%; height: 100%; object-fit: cover; }

.about-page__member-name { margin: 0; font-weight: 800; }
.about-page__member-role { margin: 4px 0 0; color: var(--ink-70); }

/* ---------- Clôture ---------- */

.about-page__close {
  display: grid;
  gap: 28px;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--ink);
  color: var(--paper);
}

.about-page__signature {
  margin: 0;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.about-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}

.about-page__actions .button { gap: 16px; }

.about-page__contact { margin: 0; }

/* Sur l'encre, l'anneau vert foncé du thème ne se voit plus : l'accent prend le relais. */
.about-page__close :focus-visible { outline-color: var(--accent); }

.about-page__contact a {
  display: inline-block;
  padding-block: 6px;
  color: var(--paper);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Par où continuer ---------- */

.about-page__onward { margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 950px) {
  .about-page__hero,
  .about-page__hero--text { grid-template-columns: 1fr; align-items: start; }
  .about-page__hero--text .about-page__story { margin-top: 12px; padding-top: 0; }
  .about-page__chapter-list { grid-template-columns: minmax(0, 1fr); }
}