/* ═══════════════════════════════════════════════════════════════
   GALERIE.CSS - Deux rangées de photos défilantes en continu
   Ligne 1 : droite → gauche | Ligne 2 : gauche → droite
═══════════════════════════════════════════════════════════════ */

#galerie {
  overflow: hidden;
  background-color: var(--blanc);
}

#galerie .section-inner {
  padding: 0 2rem;
}

#galerie .section-label {
  color: var(--noir);
}

#galerie .section-titre {
  color: var(--noir);
}

/* ── Piste conteneur ─────────────────────────────────────────── */
.galerie-piste {
  width: 100%;
  overflow: hidden;
  margin-bottom: 1.2rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.galerie-piste:last-of-type {
  margin-bottom: 0;
}

/* ── Track ───────────────────────────────────────────────────── */
.galerie-track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* ── Wrapper photo (zoom au hover, même logique que .film-jaquette-wrapper) ── */
/*
  border-radius: 1px + clip-path: inset(0) forcent le recalcul des bords
  lors du scale, ce qui élimine le trait clair parasite sur les côtés.
  La hauteur fixe garantit que le wrapper ne perturbe pas le flux du track.
*/
.galerie-photo-wrapper {
  flex-shrink: 0;
  height: 220px;
  width: auto;
  min-width: 280px;
  max-width: 420px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1px;
  clip-path: inset(0 round 1px);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
}

.galerie-photo-wrapper:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

/* ── Photo individuelle ──────────────────────────────────────── */
.galerie-photo {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(25%) contrast(1.02);
  -webkit-user-drag: none;
  user-select: none;
  transition: filter 0.4s ease;
}

.galerie-photo-wrapper:hover .galerie-photo {
  filter: grayscale(0%) contrast(1);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes defileGauche {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes defileDroite {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .galerie-photo-wrapper {
    height: 160px;
    min-width: 200px;
    max-width: 300px;
  }

  .galerie-piste {
    margin-bottom: 0.8rem;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 3%,
      black 97%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 3%,
      black 97%,
      transparent 100%
    );
  }

  /* Sur mobile, désactivation du scale (même logique que les vignettes films) */
  .galerie-photo-wrapper {
    transition: none;
  }

  .galerie-photo-wrapper:hover {
    transform: none;
    box-shadow: none;
  }
}