/* ============================================================
   PIXEL ÉTINCELLE — REEL (slider "livre ouvert")
   Réalisations : image centrale nette, images latérales inclinées
   en 3D, angles vifs (aucun radius), navigation manuelle uniquement.
   ============================================================ */

.reel { position: relative; margin-top: var(--space-12); }

.reel-stage {
  position: relative;
  height: clamp(320px, 42vw, 460px);
  perspective: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-slide {
  position: absolute;
  width: min(560px, 60vw);
  height: 88%;
  transition: transform 0.55s cubic-bezier(.16,1,.3,1), opacity 0.55s ease, filter 0.55s ease;
  cursor: pointer;
}

.reel-slide .img-loader-wrap {
  width: 100%; height: 100%;
  border-radius: 0; /* volontairement carré, pas de radius */
  box-shadow: 0 30px 70px -12px rgba(0,0,0,.65);
}
.reel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.reel-slide[data-pos="center"] { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; z-index: 3; filter: brightness(1); }
.reel-slide[data-pos="left"]   { transform: translateX(-58%) rotateY(32deg) scale(.82); opacity: .7; z-index: 2; filter: brightness(.55); }
.reel-slide[data-pos="right"]  { transform: translateX(58%) rotateY(-32deg) scale(.82); opacity: .7; z-index: 2; filter: brightness(.55); }
.reel-slide[data-pos="far-left"]  { transform: translateX(-95%) rotateY(38deg) scale(.65); opacity: 0; z-index: 1; filter: brightness(.4); }
.reel-slide[data-pos="far-right"] { transform: translateX(95%) rotateY(-38deg) scale(.65); opacity: 0; z-index: 1; filter: brightness(.4); }
.reel-slide[data-pos="hidden"] { transform: translateX(0) scale(.5); opacity: 0; z-index: 0; pointer-events: none; }

.reel-caption {
  position: absolute;
  left: 50%; bottom: -8px; transform: translate(-50%, 100%);
  z-index: 3;
  text-align: center;
  width: min(560px, 60vw);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.reel-slide[data-pos="center"] .reel-caption { opacity: 1; }
.reel-caption .tag { margin-bottom: var(--space-2); }
.reel-caption h3 { font-size: var(--fs-lg); margin: var(--space-2) 0 0; }

.reel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; z-index: 4;
  display: grid; place-items: center;
  background: var(--bg-elevated); box-shadow: var(--neu-raised-600);
  border: none; color: var(--text-primary); cursor: pointer;
  transition: box-shadow var(--dur-fast);
}
.reel-arrow:hover { box-shadow: var(--neu-inset-600); color: var(--accent-primary); }
.reel-arrow:active { box-shadow: var(--neu-inset-700); }
.reel-prev { left: clamp(4px, 2vw, 32px); }
.reel-next { right: clamp(4px, 2vw, 32px); }

.reel-dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--space-16); }
.reel-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--bg-elevated); box-shadow: var(--neu-raised-700);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.reel-dots button.is-active { background: var(--pe-grad); transform: scale(1.3); box-shadow: 0 0 10px rgba(229,18,35,.5); }

@media (max-width: 760px) {
  .reel-slide { width: 78vw; }
  .reel-slide[data-pos="left"] { transform: translateX(-48%) rotateY(28deg) scale(.75); }
  .reel-slide[data-pos="right"] { transform: translateX(48%) rotateY(-28deg) scale(.75); }
  .reel-arrow { width: 44px; height: 44px; }
  .reel-caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-slide { transition: opacity .3s linear; }
}