/* ================================================================
   FEDET  -  team.html (styles spécifiques à la page)
   Réf. desktop 1280 : nav fixe / breaker 400 / team 701 / hero 992 /
   ticker bleu 80 / breaker 800 / footer 284
   ================================================================ */

/* ---------- Nav fixe (spécificité live de /team) ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(9, 9, 9, 0.1);
  background: rgba(255, 255, 255, 0.85); /* translucide : rend le blur visible */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Le monogramme FEDET du logo est stylé par .logo-mark (base.css, partagé). */

/* ---------- Rideaux sticky : les breakers restent collés en haut,
   les sections opaques suivantes glissent par-dessus ---------- */
.image-breaker {
  position: sticky;
  top: 0;
  z-index: 1;
}
.team-section,
.presidente-hero,
.ticker-blue,
.site-footer {
  position: relative;
  z-index: 2;
}

/* ---------- Section 2  -  L'équipe ---------- */
.team-section {
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 87.625dvh;
  padding: 20px 0;
  overflow: hidden; /* l'éventail coverflow ne crée jamais de scroll horizontal */
}
.team-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
}
.team-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.team-intro .section-sub { max-width: 900px; }
.team-h2 { text-wrap: balance; }
.team-h2 .w { color: var(--black); }
.team-h2 .w.blue { color: var(--blue); }

/* Révélation mot à mot (les deux h2 de la page) */
.wr .w {
  display: inline-block;
  opacity: 0.001;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
}
.wr.visible .w {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ---------- Carrousel coverflow ---------- */
.carousel {
  position: relative;
  width: 320px;
  height: 320px;
  aspect-ratio: 1;
  margin: 0 auto;
  perspective: 1200px;
  touch-action: pan-y;      /* swipe horizontal capturé, scroll vertical natif */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.carousel.dragging { cursor: grabbing; }
.carousel:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 8px;
  border-radius: 12px;
}
.carousel-cards {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.carousel .card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  border-radius: 8px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}
/* Les transforms sont désormais pilotés frame par frame (ressort lerp du JS) :
   plus de transition CSS sur transform/opacity des cartes. */
.carousel .card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Avatars initiales (remplacent les photos surf du template) ---------- */
.carousel .card .avatar,
.hero-photo .avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(130% 100% at 22% 14%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 58%),
    linear-gradient(var(--av-angle, 160deg), var(--blue), var(--blue-dark));
}
.carousel .card .avatar {
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
}
.hero-photo .avatar { border-radius: 17px; }
.carousel .card .avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.carousel .card .avatar span,
.hero-photo .avatar span {
  font-family: var(--display);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  opacity: 0.96;
}
.carousel .card .avatar span { font-size: 96px; }
.hero-photo .avatar span { font-size: 140px; }
/* variation de l'angle du dégradé par carte (4 et 15 premiers entre eux :
   un même membre change d'angle d'un cycle à l'autre) */
.carousel .card:nth-child(4n + 1) .avatar { --av-angle: 140deg; }
.carousel .card:nth-child(4n + 2) .avatar { --av-angle: 175deg; }
.carousel .card:nth-child(4n + 3) .avatar { --av-angle: 205deg; }
.carousel .card:nth-child(4n + 4) .avatar { --av-angle: 115deg; }
.card-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 202px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  border-radius: 0 0 8px 8px;
  z-index: 2;
  pointer-events: none;
}
.card-label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: calc(100% - 28px);
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0.85;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.carousel .card.is-active .card-label { opacity: 1; }
/* nom + rôle de la carte active : entrée fondu / glissé vers le haut */
.carousel .card.is-active .card-label h3,
.carousel .card.is-active .card-label p {
  animation: team-label-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.carousel .card.is-active .card-label p { animation-delay: 0.06s; }
@keyframes team-label-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.card-label h3 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.1px;
  color: var(--white);
  max-width: 100%;
  text-wrap: balance;
}
.card-label p {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.1px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 100%;
  text-wrap: balance;
}

.carousel .c-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  transition:
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.carousel .c-arrow:hover {
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-50%) scale(1.12); /* grossit au survol */
}
.carousel .c-arrow:active {
  transform: translateY(-50%) scale(0.92); /* s'enfonce au clic */
}
.carousel .c-arrow img { width: 40px; height: 40px; }
.carousel .c-arrow.prev { left: 10px; }
.carousel .c-arrow.next { right: 10px; }
.carousel-pause {
  position: absolute;
  z-index: 42;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(8, 24, 48, .68);
  color: #fff;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.carousel-pause:hover { background: rgba(8,24,48,.92); transform: scale(1.06); }
.carousel-pause svg { width: 18px; height: 18px; }

/* ---------- Section 3  -  Hero Présidente ---------- */
.presidente-hero {
  padding: 80px 0;
  overflow: hidden; /* le fond parallaxe (data-plx) dépasse volontairement */
}
.presidente-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  top: -7%;
  height: 114%; /* marge verticale pour la légère parallaxe du fond */
  object-fit: cover;
  object-position: center;
  z-index: 0;
  will-change: transform;
}
.hero-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 33px;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 88px;
  padding: 33px 44px 43px;
}
.hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.hero-h2 .l1 .w { color: rgb(30, 30, 30); }
.hero-h2 .l2 .w { color: var(--blue-dark); }
.hero-row {
  display: flex;
  align-items: center;
  gap: 94px;
}
.hero-photo {
  position: relative;
  width: 507px;
  height: 434px;
  border-radius: 17px;
  overflow: hidden;
  flex-shrink: 0;
  will-change: transform;
}
/* Combine reveal (opacity/transform) + hover-lift (transform/ombre) : les deux
   règles d'anim.css ont la même spécificité et s'écraseraient mutuellement */
.hero-photo.hover-lift[data-reveal] {
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-photo img.parallax {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  height: 120%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  will-change: transform;
}
.hero-bio {
  flex: 1;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: -0.02em;
  color: var(--gray-2);
  text-align: left;
}
.hero-bio strong { font-weight: 700; }

/* Bloc "Form and image" : opacity 0, y+30, scale .9 -> none */
.reveal-scale {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Section 4  -  Ticker fond bleu plein ---------- */
.ticker-blue {
  background: rgb(36, 81, 159); /* #24519f */
}
.ticker-blue .ticker-track { gap: 40px; }
.ticker-blue .tick-star { width: 40px; height: 40px; flex-shrink: 0; }

/* ---------- Footer : contraste partagé avec le reste du site ---------- */
.site-footer .footer-brand span { animation-play-state: paused; }
.site-footer .footer-brand.visible span { animation-play-state: running; }

/* ================================================================
   Responsive  -  breakpoints Framer : ≥1200 / 810–1199.98 / ≤809.98
   ================================================================ */
@media (max-width: 1199.98px) {
  .team-section {
    min-height: 0;
    padding: 80px 20px;
  }
  .presidente-hero { padding: 80px 20px; }
  .hero-card { gap: 60px; }
  .hero-row { gap: 31px; }
  .hero-photo {
    width: 46%;
    height: auto;
    aspect-ratio: 507 / 434;
  }
  .hero-photo .avatar span { font-size: 100px; }
}

@media (max-width: 809.98px) {
  /* Variante téléphone du preset H2 : 44/54/-1px */
  .display-lg {
    line-height: 1.227;
    letter-spacing: -1px;
  }
  .team-section { padding: 60px 20px; }
  .team-inner { gap: 40px; }

  /* Carrousel : carte active ~78vw (carrée), voisins en bord d'écran,
     flèches sous le carrousel, centrées, cibles tactiles 48px */
  .carousel,
  .carousel .card {
    width: clamp(280px, 78vw, 360px);
    height: clamp(280px, 78vw, 360px);
  }
  .carousel { margin-bottom: 84px; }
  .carousel .card .avatar span { font-size: 23vw; }
  .card-shade { height: 60%; }
  .carousel .c-arrow {
    top: auto;
    bottom: -68px;
    transform: none;
    width: 48px;
    height: 48px;
    background: rgba(9, 9, 9, 0.35);
  }
  .carousel .c-arrow:hover { transform: scale(1.08); }
  .carousel .c-arrow:active { transform: scale(0.92); }
  .carousel .c-arrow.prev { left: calc(50% - 58px); }
  .carousel .c-arrow.next { right: calc(50% - 58px); }
  .carousel-pause { top: 10px; right: 10px; }

  .presidente-hero { padding: 60px 20px; }
  .hero-card {
    gap: 40px;
    padding: 24px 20px 40px;
  }
  .hero-head { gap: 19px; }
  .hero-row {
    flex-direction: column;
    align-items: stretch;
    gap: 31px;
  }
  .hero-photo {
    width: 100%;
    height: 52vw;
    aspect-ratio: auto;
  }
  .hero-photo .avatar span { font-size: 17vw; }

  .ticker-blue .tick-star { width: 30px; height: 30px; }
}