/* Animation marquee pour les logos d'intégration */
.logos-marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logos-right-marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - 1.5rem));
  }
}

@keyframes scroll-reverse {
  0% {
    transform: translateX(calc(-100% - 1.5rem));
  }
  100% {
    transform: translateX(0);
  }
}

.animate-scroll {
  animation: scroll 40s linear infinite;
  display: flex;
  width: max-content;
  gap: 1.5rem;
}

.animate-scroll-reverse {
  animation: scroll-reverse 40s linear infinite;
  display: flex;
  width: max-content;
  gap: 1.5rem;
}

/* Optimisation performance */
.logos-marquee-container .animate-scroll,
.logos-right-marquee-container .animate-scroll-reverse {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}