/* ============================================================
   carrousel-ventes.css — "Nos dernières ventes" : deux rangées
   de photos qui défilent en continu, en sens opposés.
   À charger après style.css.
   ============================================================ */
.ventes-section { overflow: hidden; }
.ventes-section .section-head { margin-bottom: 40px; }

.ventes-marquee {
  display: flex; flex-direction: column; gap: 16px;
  /* bords gauche et droit en fondu */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ventes-rangee { overflow: hidden; }
.ventes-piste {
  display: flex; gap: 16px; width: max-content;
  animation: ventesDefile var(--duree, 60s) linear infinite;
}
.ventes-rangee.inverse .ventes-piste { animation-direction: reverse; }
.ventes-marquee:hover .ventes-piste,
.ventes-marquee:focus-within .ventes-piste { animation-play-state: paused; }
@keyframes ventesDefile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); } /* -50% = une copie complète (+ moitié du gap) */
}

/* Carte photo */
.vente-card {
  position: relative; flex: 0 0 auto; width: 250px; aspect-ratio: 3 / 4;
  padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: var(--card-dark);
}
.vente-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.vente-card:hover img { transform: scale(1.05); }
.vente-card-legende {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 13px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; text-align: left;
}
.vente-card-legende strong { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
.vente-card-legende em {
  flex-shrink: 0; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 4px 7px; border-radius: 2px;
}
.vente-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.ventes-cta { text-align: center; margin-top: 44px; }

/* Agrandissement */
.vente-zoom {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .9);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.vente-zoom[hidden] { display: none; }
.vente-zoom figure { margin: 0; max-width: min(92vw, 720px); }
.vente-zoom img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 8px; }
.vente-zoom figcaption { margin-top: 14px; text-align: center; color: #fff; font-size: 16px; font-weight: 600; }
.vente-zoom-fermer {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vente-zoom-fermer svg { width: 22px; height: 22px; }

@media (max-width: 700px) {
  .vente-card { width: 180px; border-radius: 8px; }
  .ventes-marquee, .ventes-piste { gap: 10px; }
  .vente-card-legende strong { font-size: 12.5px; }
  @keyframes ventesDefile { to { transform: translateX(calc(-50% - 5px)); } }
}

/* "Réduire les animations" : pas de défilement auto, on fait glisser au doigt */
@media (prefers-reduced-motion: reduce) {
  .ventes-marquee { -webkit-mask-image: none; mask-image: none; }
  .ventes-rangee { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px; }
  .ventes-piste { animation: none; }
  .ventes-piste > [aria-hidden="true"] { display: none; }
  .vente-card { scroll-snap-align: start; }
}