/* === Galerie de logos à défilement infini (CSS only) === */
.ho5-logos-marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow: hidden;
  width: 100%;
  padding: 2rem 0;
}

.ho5-logos-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.ho5-logos-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: scroll-left var(--marquee-speed, 30s) linear infinite;
}

.ho5-logos-marquee.reverse .ho5-logos-track {
  animation-name: scroll-right;
}

.ho5-logo-item {
  background-color: #eeede9;
  border-radius: 6px;
  padding: 16px;
  flex: 0 0 auto;
}

.ho5-logo-item img {
  display: block;
  width: 210px;
  height: auto;
}

/* === Animations === */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* === Pause au survol === */
.ho5-logos-marquee:hover .ho5-logos-track {
  animation-play-state: paused;
}

/* === Vitesse responsive === */

/* Desktop par défaut : vitesse normale (~30s) */
.ho5-logos-marquee {
  --marquee-speed: 30s;
}

/* Tablette (≤ 1024px) : plus lent (~40s) */
@media (max-width: 1024px) {
  .ho5-logos-marquee {
    --marquee-speed: 40s;
  }
}

/* Mobile (≤ 640px) : encore plus lent (~55s) */
@media (max-width: 640px) {
  .ho5-logos-marquee {
    --marquee-speed: 55s;
  }
}

/* Optionnel : réduire un peu les gaps et tailles d’image sur mobile */
@media (max-width: 640px) {
  .ho5-logos-track {
    gap: 1.5rem;
  }
  .ho5-logo-item img {
    width: 100px;
  }
}