/* Galerie cinétique des clubs */

.club-gallery {
  --gallery-gap: clamp(10px, 1vw, 16px);
  padding-block: var(--space-section);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 157, 220, .16), transparent 34%),
    var(--ink);
  color: #fff;
}

.club-gallery__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 32ch);
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 54px);
}

.club-gallery__title {
  max-width: 12ch;
  margin: 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.club-gallery__lead {
  max-width: 32ch;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.club-gallery__rail {
  display: flex;
  align-items: stretch;
  gap: var(--gallery-gap);
  height: clamp(500px, 60vh, 680px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery-card {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 15, 28, .22);
  transition: flex-grow 520ms cubic-bezier(.22, 1, .36, 1);
}

.gallery-card[data-active="true"] { flex-grow: 2.05; }

.gallery-card__link {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  color: inherit;
  outline-offset: -4px;
}

.gallery-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.gallery-card__visual::after {
  content: "";
  position: absolute;
  inset: auto 10% 7% 10%;
  height: 8%;
  border-radius: 50%;
  background: rgba(10, 35, 64, .13);
  filter: blur(22px);
  opacity: .35;
  transform: scaleX(.7);
  transition: opacity 360ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.gallery-card__helmet {
  position: relative;
  z-index: 1;
  width: 112%;
  height: 100%;
  max-height: 520px;
  padding: clamp(20px, 3vw, 46px) clamp(12px, 2vw, 34px);
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: translate3d(0, 2%, 0) scale(.84);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.gallery-card[data-active="true"] .gallery-card__helmet {
  transform: translate3d(0, -1%, 0) scale(1.04);
}

.gallery-card[data-active="true"] .gallery-card__visual::after {
  opacity: .7;
  transform: scaleX(1);
}

.gallery-card__crest {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 2vw, 24px);
  right: clamp(14px, 2vw, 24px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  opacity: .7;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.gallery-card__crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-card[data-active="true"] .gallery-card__crest {
  opacity: 1;
  transform: translateY(0);
}

.gallery-card__caption {
  display: grid;
  align-content: end;
  min-height: clamp(172px, 17vw, 220px);
  padding: clamp(22px, 2.5vw, 38px);
  background: #102f45;
  color: #fff;
  transition: background-color 380ms ease, color 380ms ease;
}

.gallery-card[data-active="true"] .gallery-card__caption {
  background: var(--club, #009ddc);
  color: var(--club-ink, #0a2340);
}

.gallery-card__kicker {
  margin-bottom: 10px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c6ff4a;
  white-space: nowrap;
}

.gallery-card[data-active="true"] .gallery-card__kicker { color: currentColor; }

.gallery-card__name {
  max-width: 14ch;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(2rem, 3vw, 3.6rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.gallery-card:not([data-active="true"]) .gallery-card__name {
  font-size: clamp(1.65rem, 2.1vw, 2.75rem);
}

.gallery-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 2vw, 28px);
  font-size: .9rem;
  font-weight: 800;
}

.gallery-card__arrow {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  opacity: .72;
  transform: translateX(-5px);
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.gallery-card[data-active="true"] .gallery-card__arrow,
.gallery-card__link:hover .gallery-card__arrow,
.gallery-card__link:focus-visible .gallery-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 899px) {
  .club-gallery { padding-block: var(--space-section-tight); }

  .club-gallery__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 26px;
  }

  .club-gallery__lead { font-size: .94rem; }

  /* Défilement naturel : les trois cartes s'empilent, aucun rail latéral.
     La carte qui passe au milieu de l'écran reçoit le traitement du survol
     desktop. --focus (0 à 1) est posé par sec-clubs.js d'après la position
     verticale ; sans script il vaut 1 et chaque carte reste pleine. */
  .club-gallery__rail {
    flex-direction: column;
    height: auto;
    gap: clamp(14px, 3vw, 22px);
  }

  .gallery-card,
  .gallery-card[data-active="true"] {
    --focus: 1;
    flex: none;
    transform: scale(calc(.94 + .06 * var(--focus)));
    transform-origin: 50% 50%;
  }

  .gallery-card__link { grid-template-rows: auto auto; }

  .gallery-card__visual { height: clamp(250px, 62vw, 380px); }

  .gallery-card__helmet,
  .gallery-card[data-active="true"] .gallery-card__helmet {
    width: 100%;
    max-height: none;
    padding: 18px 28px;
    transform: translate3d(0, calc(4% - 5% * var(--focus)), 0) scale(calc(.8 + .22 * var(--focus)));
    transition: none;
  }

  .gallery-card__visual::after,
  .gallery-card[data-active="true"] .gallery-card__visual::after {
    opacity: calc(.25 + .45 * var(--focus));
    transform: scaleX(calc(.7 + .3 * var(--focus)));
    transition: none;
  }

  .gallery-card__crest,
  .gallery-card[data-active="true"] .gallery-card__crest {
    opacity: calc(.45 + .55 * var(--focus));
    transform: translateY(calc(6px - 6px * var(--focus)));
    transition: none;
  }

  /* La couleur est un état, pas une position : seule la carte active, la plus
     proche du milieu de l'écran, prend la couleur de son club, qui balaie la
     légende de gauche à droite. Un remplissage lié au défilement laissait des
     légendes à moitié colorées à l'arrêt, et du texte blanc sur le jaune de
     Lens. */
  .gallery-card__caption,
  .gallery-card[data-active="true"] .gallery-card__caption {
    position: relative;
    isolation: isolate;
    min-height: 0;
    padding: 22px 24px 24px;
    background: #102f45;
    color: #fff;
    transition: color 200ms ease 120ms;
  }

  .gallery-card__caption::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--club, #102f45);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 280ms cubic-bezier(.4, 0, 1, 1);
  }

  .gallery-card[data-active="true"] .gallery-card__caption::before {
    clip-path: inset(0 0 0 0);
    transition: clip-path 520ms cubic-bezier(.16, 1, .3, 1);
  }

  .gallery-card[data-active="true"] .gallery-card__caption { color: var(--club-ink, #fff); }

  .gallery-card__kicker,
  .gallery-card[data-active="true"] .gallery-card__kicker { color: currentColor; }

  .gallery-card__name,
  .gallery-card:not([data-active="true"]) .gallery-card__name { font-size: clamp(2.1rem, 9vw, 3rem); }

  .gallery-card__footer { margin-top: 16px; }
}

/* Tablette : image et légende côte à côte, pour que chaque carte reste
   lisible d'un coup d'œil sans devenir une affiche de pleine hauteur. */
@media (min-width: 600px) and (max-width: 899px) {
  .gallery-card__link { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto; }
  .gallery-card__visual { height: 320px; }
  .gallery-card__helmet,
  .gallery-card[data-active="true"] .gallery-card__helmet {
    transform: translate3d(0, calc(3% - 3% * var(--focus)), 0) scale(calc(.78 + .14 * var(--focus)));
  }
  .gallery-card__caption,
  .gallery-card[data-active="true"] .gallery-card__caption { align-content: end; }
}

/* Mobile : casque qui sort du bandeau -------------------------------------
   Seule la carte active, la plus proche du milieu de l'écran, déplie son
   visuel ; les autres ne gardent que leur bandeau de couleur. Le repli de la
   carte du dessus et le dépli de la suivante ont la même durée et la même
   courbe : ils se compensent, le bandeau actif ne saute pas. */
@media (max-width: 599px) {
  /* Courbe qui démarre et freine en douceur : l'ouverture ne donne plus
     d'à-coup au premier instant. */
  .club-gallery { --fold: 540ms; --fold-ease: cubic-bezier(.45, .05, .25, 1); }

  .gallery-card,
  .gallery-card[data-active="true"] { transform: none; box-shadow: none; }

  /* Dépli et repli strictement symétriques : la carte qui se replie au-dessus
     compense celle qui se déplie, le bandeau regardé ne bouge pas. */
  .gallery-card__link {
    grid-template-rows: 0fr auto;
    transition: grid-template-rows var(--fold) var(--fold-ease);
  }

  .gallery-card[data-active="true"] .gallery-card__link { grid-template-rows: 1fr auto; }

  .gallery-card__visual {
    height: auto;
    min-height: 0;
    overflow: hidden;
    contain: paint;
  }

  /* Le casque ne bouge pas une fois sorti : tout le mouvement est dans son
     apparition. Il se dévoile avec l'ouverture de la carte, monte à peine du
     bandeau et se pose en fondu. À la sortie, il s'efface plus vite. */
  .gallery-card__helmet,
  .gallery-card[data-active="true"] .gallery-card__helmet {
    height: clamp(230px, 62vw, 300px);
    padding: 18px 28px 22px;
    opacity: 0;
    transform: translate3d(0, 8%, 0) scale(.965);
    transform-origin: 50% 100%;
    transition: opacity 220ms ease-in, transform 260ms ease-in;
    will-change: transform, opacity;
  }

  .gallery-card[data-active="true"] .gallery-card__helmet {
    opacity: 1;
    transform: none;
    transition: opacity 480ms cubic-bezier(.33, 1, .68, 1) 90ms, transform 680ms cubic-bezier(.33, 1, .68, 1) 60ms;
  }

  .gallery-card__visual::after { display: none; }

  .gallery-card__crest,
  .gallery-card[data-active="true"] .gallery-card__crest {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.9);
    transition: opacity 180ms ease-in, transform 260ms ease-in;
  }

  .gallery-card[data-active="true"] .gallery-card__crest {
    opacity: 1;
    transform: none;
    transition: opacity 340ms cubic-bezier(.33, 1, .68, 1) 230ms, transform 480ms cubic-bezier(.33, 1, .68, 1) 230ms;
  }

  /* Le balayage de couleur suit le même rythme que le dépli. */
  .gallery-card__caption::before { transition: clip-path 300ms cubic-bezier(.55, 0, 1, .45); }
  .gallery-card[data-active="true"] .gallery-card__caption::before { transition: clip-path var(--fold) var(--fold-ease); }

  .club-gallery__rail { gap: 10px; }

  .gallery-card__caption,
  .gallery-card[data-active="true"] .gallery-card__caption { padding: 20px 22px; }

  .gallery-card__footer { margin-top: 12px; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  /* Pas de mouvement : ni agrandissement ni recul. Reste le passage à la
     couleur du club, qui dit quelle carte est au centre. */
  .gallery-card,
  .gallery-card[data-active="true"],
  .gallery-card__helmet,
  .gallery-card[data-active="true"] .gallery-card__helmet,
  .gallery-card__crest { transform: none; }

  .gallery-card__link { transition: none; }

  .gallery-card__caption::before,
  .gallery-card[data-active="true"] .gallery-card__caption::before { clip-path: none; opacity: 0; transition: opacity 200ms ease; }
  .gallery-card[data-active="true"] .gallery-card__caption::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card,
  .gallery-card__helmet,
  .gallery-card__visual::after,
  .gallery-card__crest,
  .gallery-card__caption,
  .gallery-card__arrow { transition: none; }
}