/* Galerie défilante (pages photo et vidéo) : 4 cases visibles, noir et blanc,
   la case survolée s'agrandit, passe en couleur, arrête le défilement et fait tourner ses images. */
.photo-reel {
  --reel-gap: clamp(26px, 2.8vw, 44px);
  --reel-visible: 4;
  position: relative;
  margin: clamp(48px, 6vw, 84px) 0 0;
  padding-block: clamp(28px, 3.5vw, 48px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.photo-reel.is-dragging { cursor: grabbing; }

.photo-reel-track {
  display: flex;
  gap: var(--reel-gap);
  width: 100%;
  will-change: transform;
}

.photo-reel-tile {
  position: relative;
  flex: 0 0 calc((100% - (var(--reel-visible) - 1) * var(--reel-gap)) / var(--reel-visible));
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #191917;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1);
  transition: transform 520ms cubic-bezier(.22, .61, .36, 1), filter 520ms ease, box-shadow 520ms ease;
}

.photo-reel-tile[data-portfolio] { cursor: pointer; }

.photo-reel-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 900ms ease, transform 4s ease-out;
}

.photo-reel-tile img.is-active { opacity: 1; transform: scale(1); }

/* Case vidéo : la vidéo apparaît par-dessus l'image pendant le survol */
.photo-reel-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.photo-reel-tile.is-playing video { opacity: 1; }

.photo-reel-tile.is-hovered {
  z-index: 2;
  filter: grayscale(0) contrast(1);
  transform: scale(1.14);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

/* Au survol : petite ligne en bas de la photo qui indique que le clic mène au portfolio */
.photo-reel-tile[data-portfolio]::after {
  content: "Voir dans le portfolio \2192\FE0E";
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 1;
  padding: 0 2px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font: 500 12px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}
.photo-reel-tile.is-hovered::after { opacity: 1; transform: translate(-50%, 0); }

/* Placée en tête de section, au-dessus des formules */
/* --reel-bleed agrandit la zone visible de la galerie vers le haut et le bas (sans changer la mise en page)
   pour que l'ombre de la case agrandie déborde sur les sections voisines au lieu d'être coupée. */
.photo-reel--top {
  --reel-bleed: 110px;
  /* 90px sous la section du dessus - 76px + 36px de marge interne = 50px */
  margin: calc(-76px - var(--reel-bleed)) 0 calc(clamp(48px, 6vw, 84px) - var(--reel-bleed));
  padding-block: calc(36px + var(--reel-bleed));
  pointer-events: none;
}
.photo-reel--top .photo-reel-track { pointer-events: auto; }
.redesign-section:has(> .photo-reel--top) { padding-top: 0; }

@media (max-width: 900px) {
  .photo-reel { --reel-visible: 3; }
}

@media (max-width: 560px) {
  .photo-reel { --reel-visible: 2; }
  .photo-reel-tile.is-hovered { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .photo-reel-tile, .photo-reel-tile img { transition-duration: 1ms; }
}