/* Container + variables */
.etc-logo-marquee{
  --marquee-duration: 12s;     /* override via style inline */
  --gap: 24px;                 /* espace entre logos */
  --logo-height: 48px;
  --fade-width: 80px;          /* largeur du dégradé */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Tablet : un peu plus rapide 
@media (max-width: 1024px){
  .etc-logo-marquee{
    --marquee-duration: 18s !important;
  }
}

@media (max-width: 600px){
  .etc-logo-marquee{
    --marquee-duration: 20s !important;
  }
}  */

/* Viewport (masque) */
.etc-logo-marquee__viewport{
  width: 100%;
  overflow: hidden;
}

/* Track animé (2x la liste) */
.etc-logo-marquee__track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: nowrap;
  min-width: max-content;        /* important : la largeur = contenu complet */
  animation: etc-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}

/* Items */
.etc-logo-marquee__item{
  flex: 0 0 auto;      /* largeur auto (logos non étirés) */
  display: flex;
  align-items: center;
}

.etc-logo-marquee__item img{
  height: var(--logo-height);
  width: auto;
  max-width: none;
  display: block;
  filter: grayscale(100%);
  opacity: .85;
  transition: filter .2s ease, opacity .2s ease;
}

.etc-logo-marquee__item:hover img,
.etc-logo-marquee__item:focus img{
  filter: none;
  opacity: 1;
}

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

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

/* Animation: translateX jusqu'à -50% car contenu dupliqué */
@keyframes etc-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Option: si fond ≠ blanc, remplace #fff ci-dessus
   ou fais: .etc-logo-marquee { --fade-color:#f6f6f6; }
   puis: background: linear-gradient(to right, var(--fade-color), transparent); */