/* Wrapper (centré, largeur contrôlée) */
.logos-strip {
  --per-view-d: 5;
  --gap-d: 40px;
  --logo-h-d: 80px;
  --maxw: 1200px;
  /* Resolved (overridable in media queries) */
  --per-view: var(--per-view-d);
  --gap: var(--gap-d);
  --logo-h: var(--logo-h-d);
  --dur: 30s;
  /* durée par défaut si JS absent */
  position: relative;
  overflow: hidden;
  max-width: var(--maxw);
  margin: 0 auto;
}

.logos-strip .logos-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  /* Add padding equal to one gap so total scrollWidth = 2 * (items + gaps) exactly */
  padding-right: var(--gap);
}

.logos-strip .logos-item {
  flex: 0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  display: flex;
  align-items: center;
  justify-content: center;
}

.logos-strip .logos-item img {
  display: block;
  max-height: var(--logo-h) !important;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Éditeur */
.logos-strip.is-editor {
  border: 1px dashed #ddd;
  padding: 12px;
}

.logos-strip .logos-toolbar {
  margin-bottom: 12px;
}

.logos-strip .logos-empty {
  color: #777;
  padding: 24px;
}

/* Animation CSS (appliquée seulement sur le front via JS en ajoutant .is-animated) */
@keyframes logos-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--loop, 50%)), 0, 0);
  }
}

.logos-strip.is-animated .logos-track {
  animation: logos-marquee var(--dur) linear infinite;
}

/* Pause si utilisateur préfère réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .logos-strip.is-animated .logos-track {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .logos-strip {
    --per-view: 3;
    --gap: 24px;
    --logo-h: 96px;
  }
}

@media (max-width: 480px) {
  .logos-strip {
    --per-view: 2;
    --gap: 16px;
    --logo-h: 110px;
  }
}

/* Lien (si logo cliquable) */
.logos-strip .logos-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logos-strip .logos-link img {
  pointer-events: none;
}

@media (max-width: 360px) {
  .logos-strip {
    --per-view: 1;
    --gap: 12px;
    --logo-h: 120px;
  }
}