.image-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 25%,
    black 75%, transparent 100%
  );
}

.image-marquee .marquee-wrapper {
  display: flex;
  width: max-content;
  will-change: transform;
}

.image-marquee .marquee-wrapper img {
  flex-shrink: 0;
  max-height: 72px;  /* ajustez ou exposez un champ hauteur */
  margin-right: 12rem;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Durées selon speed */
.image-marquee[data-speed="Drowsy"]    .marquee-wrapper { animation-duration: 30s; }
.image-marquee[data-speed="Slow"]      .marquee-wrapper { animation-duration: 20s; }
.image-marquee[data-speed="Normal"]    .marquee-wrapper { animation-duration: 10s; }
.image-marquee[data-speed="Fast"]      .marquee-wrapper { animation-duration: 7s; }
.image-marquee[data-speed="Swift"]     .marquee-wrapper { animation-duration: 5s; }
.image-marquee[data-speed="Hyper"]     .marquee-wrapper { animation-duration: 2s; }

/* Application des animations */
.image-marquee[data-direction="Left"]  .marquee-wrapper {
  animation-name: marquee-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.image-marquee[data-direction="Right"] .marquee-wrapper {
  animation-name: marquee-right;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}