/* ====================================================================
   PINEAU — Variante "coverflow" (plus fidèle à la créa)
   Surcharge UNIQUEMENT le carrousel : cartes voisines empilées
   DERRIÈRE la carte active, qui dépassent sur les côtés.
   Se charge après style.css (réutilise tout le reste).
==================================================================== */

/* Pas de fondu sur les bords, on laisse les voisines déborder/dépasser */
.carousel {
  overflow: visible;
}
.carousel__viewport {
  overflow: visible;
  flex: 1;
  -webkit-mask-image: none;
          mask-image: none;
}

/* La piste devient un contexte de positionnement (cartes en absolu) */
.carousel__track {
  position: relative;
  display: block;
  padding: 24px 0;
  min-height: 560px;            /* repli avant calcul JS ; cartes v2 plus hautes (ratio ~0,55) */
}

/* Chaque carte est empilée au centre ; le JS gère décalage / échelle / z-index */
.card {
  position: absolute;
  top: 24px;
  left: 50%;
  width: clamp(210px, 62%, 400px);
  margin: 0;
  flex: none;
  opacity: 0;                   /* révélée par le JS */
  transform: translateX(-50%);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
  will-change: transform, opacity;
}

/* Ombre douce qui épouse les coins, seulement sur la carte de devant */
.card.is-active .card__img {
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.4));
}

/* Flèches au-dessus des cartes empilées */
.carousel__arrow {
  position: relative;
  z-index: 50;
}

/* @media (min-width: 768px) {
  .card { width: clamp(260px, 46%, 380px); }
}
@media (min-width: 1024px) {
  .card { width: clamp(300px, 40%, 400px); }
} */