/* Container */
.etc-logo-carousel-swiper {
  position: relative;
  overflow: hidden;
  --logo-height: 48px;
  --fade-width: 80px;
}

/* Linear motion */
.etc-logo-carousel-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}

/* Items */
.etc-logo-slide {
  width: auto !important;
  /* Important for 'auto' slidesPerView */
  display: flex;
  align-items: center;
  justify-content: center;
}

.etc-logo-slide img {
  height: var(--logo-height);
  width: auto;
  max-width: none;
  display: block;
  transition: filter .3s ease, opacity .3s ease;
}

/* Grayscale activé (via Elementor) */
.etc-logo-grayscale .etc-logo-slide img {
  filter: grayscale(100%);
  opacity: .85;
}

.etc-logo-grayscale .etc-logo-slide:hover img,
.etc-logo-grayscale .etc-logo-slide:focus img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Dégradés latéraux (blanc par défaut) */
.etc-logo-carousel-swiper::before,
.etc-logo-carousel-swiper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fade-width);
  pointer-events: none;
  z-index: 2;
}

.etc-logo-carousel-swiper::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.etc-logo-carousel-swiper::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
}