/* =====================================================================================================
   Yoca média - TEAM PAGE (23_equipe.html, en/23_team.html)
   -----------------------------------------------------------------------------------------------------
   Same black page as the About page (yoca-about.css is loaded first: tokens, containers, roll buttons,
   section heads). Here: hero with key figures, filter chips by department, member cards (photo,
   name, role, "since", short biography), former members ("Ils ont fait partie de l'aventure"), closing CTA.
   Webflow: one CMS collection "Équipe" (name, photo, role, department, since, bio, status current/former,
   "featured" switch for the About page). Behaviour (chips): assets/js/yoca-team.js.
   ===================================================================================================== */

/* ---------- Hero ---------- */
.team-hero { padding: 200px 0 100px; }
.team-hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.team-hero h1 { margin: 0 0 32px; font-size: clamp(3.4rem, 8vw, 6.4rem); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.team-figures { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 64px auto 0; padding: 0; border-top: 1px solid var(--line); }
.team-figures li { padding: 28px 12px 0; text-align: center; }
.team-figures li + li { border-left: 1px solid var(--line); }
.team-figures strong { display: block; font-family: Lato, var(--main-font); font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #fff; }
.team-figures span { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ---------- Current members ---------- */
.team-current { padding: 4rem 0 8rem; }
.team-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.team-bar h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.1; color: #fff; }
.team-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.team-chips[hidden] { display: none; }
.team-chip { height: 40px; padding: 0 18px; border: 1px solid #ffffff33; border-radius: 50px; background: transparent; color: #ffffffcc; font: 600 14px/1 var(--main-font); cursor: pointer; transition: background-color .35s var(--ease-site), border-color .35s var(--ease-site), color .35s var(--ease-site); }
.team-chip:hover { border-color: #fff; color: #fff; }
.team-chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--ink); }
.team-chip sup { margin-left: 4px; font-size: 11px; opacity: .6; }

.crew-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 24px; margin: 0; padding: 0; }
.crew-card[hidden] { display: none; }
.crew-card { display: flex; flex-direction: column; }
.crew-card__photo { position: relative; margin: 0 0 22px; overflow: hidden; border-radius: 10px; background: #161616; aspect-ratio: 4 / 5; }
.crew-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) brightness(.78); transform: scale(1.02); transition: filter .8s var(--ease-site), transform 1.2s var(--ease-out-expo); }
.crew-card__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out-expo); }
.crew-card:hover .crew-card__photo img { filter: none; transform: scale(1.06); }
.crew-card:hover .crew-card__photo::after { transform: none; }
.crew-card__since { margin-bottom: 10px !important; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.crew-card h3 { margin: 0 0 6px; font-family: var(--main-font); font-size: 1.6rem; font-weight: 500; line-height: 1.05; text-transform: uppercase; color: #fff; }
.crew-card__role { margin-bottom: 14px !important; font-size: 16px; font-weight: 700; color: #fff; }
.crew-card__bio { font-size: 15px; line-height: 1.6; color: var(--soft); }
.crew-card__bio strong { color: #fff; }
/* Long biographies: first paragraph shown, the rest behind "Lire la suite" (<details>, no JavaScript needed) */
.crew-card__more { margin-top: 12px; }
.crew-card__more summary { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid var(--red); font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; list-style: none; }
.crew-card__more summary::-webkit-details-marker { display: none; }
.crew-card__more summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.crew-card__more .crew-card__close, .crew-card__more[open] .crew-card__open { display: none; }
.crew-card__more[open] .crew-card__close { display: inline; }
.crew-card__more .crew-card__bio { margin-top: 12px !important; }
.team-note { margin-top: 48px !important; font-size: 14px; color: #ffffff73; }

/* Former members rows (.former-row) are in yoca-about.css: the About page shows them too. */
.team .about-cta .button-row { justify-content: center; margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .team-hero { padding: 170px 0 80px; }
  .crew-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .team-hero { padding: 140px 0 60px; }
  .team-figures strong { font-size: 38px; }
  .team-figures span { font-size: 11px; letter-spacing: .1em; }
  .team-current { padding: 2rem 0 5rem; }
  .team-chips { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .team-chips::-webkit-scrollbar { display: none; }
  .team-chip { flex: none; }
  .crew-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
  .crew-card h3 { font-size: 1.25rem; }
}
@media (max-width: 479px) {
  .crew-grid { grid-template-columns: 1fr; }
  .crew-card__photo { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .crew-card__photo img, .crew-card__photo::after, .team-chip { transition: none !important; }
}