/* ==========================================================================
   Afoodi — page /equipe
   Continuité avec /methodologie et /offre (Archivo + palette OKLCH), plus les
   objets propres à la page : la photo de groupe et les portraits en alternance.
   ========================================================================== */

/* Les éléments révélés ne sont masqués que si GSAP a bien démarré : si le CDN
   tombe ou que le JS ne s'exécute pas, la page reste entièrement lisible. */
.has-gsap [data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   HERO + PHOTO DE GROUPE
   ========================================================================== */
.top {
  background:
    radial-gradient(1100px 620px at 50% -8%, oklch(0.33 0.05 163 / .85), transparent 60%),
    linear-gradient(175deg, var(--green-dark), var(--green-ink) 70%);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.hero { padding: clamp(48px, 6.5vw, 96px) 0 clamp(32px, 4vw, 52px); max-width: 1000px; }
.hero h1 {
  font-size: clamp(40px, 6.2vw, 88px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .98;
  margin-top: 18px;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--orange); }
.hero__text { max-width: 760px; margin-top: clamp(22px, 2.6vw, 34px); display: grid; gap: 16px; }
.hero__text p { font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.6; color: var(--cream-dim); text-wrap: pretty; }
.hero__lead { font-size: clamp(16.5px, 1.3vw, 19px) !important; color: var(--cream) !important; }
.hero__text strong { color: var(--cream); font-weight: 800; }

/* Photo d'équipe.
   Noir et blanc, comme les portraits : les photos arrivent de sources et
   d'époques différentes, la désaturation les fait tenir ensemble. Le filtre
   est appliqué à l'affichage — les fichiers restent en couleur. */
.groupe { margin-top: clamp(30px, 3.4vw, 48px); }
.groupe img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1);
  border-radius: 24px;
  border: 1px solid var(--panel-line);
  background: oklch(0.24 0.04 165 / .5);
}

/* ==========================================================================
   LES QUATRE PROFILS
   ========================================================================== */
.membres {
  background: linear-gradient(175deg, var(--green-deep), var(--green-ink));
  padding: clamp(56px, 7vw, 110px) 0 clamp(70px, 8vw, 130px);
  display: grid;
  gap: 0;
}
.membres .wrap { display: grid; gap: clamp(56px, 7vw, 110px); }

.membre {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  scroll-margin-top: 100px;
}
/* Un portrait sur deux passe à droite : le regard descend en zigzag plutôt
   qu'en colonne, et les quatre profils ne se confondent pas. */
.membre--flip .membre__portrait { order: 2; }

.membre__portrait { position: sticky; top: 100px; }
.membre__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  border-radius: 24px;
  border: 1px solid var(--panel-line);
  background: oklch(0.24 0.04 165 / .5);
}

.membre__role { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--mint); }
.membre h3 {
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
  margin-top: 14px;
  text-wrap: balance;
}
.membre__texte p:not(.membre__role):not(.membre__punch):not(.membre__lead) {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream-dim);
  margin-top: 18px;
  max-width: 62ch;
  text-wrap: pretty;
}
.membre__lead {
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.4;
  margin-top: clamp(18px, 2vw, 26px);
  max-width: 44ch;
  text-wrap: pretty;
}
.membre__texte strong { color: var(--cream); font-weight: 800; }
.membre__texte em { font-style: italic; }
.membre__punch {
  margin-top: clamp(22px, 2.4vw, 32px);
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--cream);
  border-left: 2px solid var(--orange);
  padding-left: 18px;
  max-width: 60ch;
  text-wrap: pretty;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .membre { grid-template-columns: 1fr; gap: clamp(22px, 3vw, 34px); }
  /* Sur une colonne, le portrait passe toujours au-dessus du texte et ne
     colle plus : un élément sticky pleine largeur bloquerait le défilement. */
  .membre--flip .membre__portrait { order: 0; }
  .membre__portrait { position: static; max-width: 340px; }

}