/* ---------- Carousel container ONLY ---------- */
.carousel {
  --s: 150px; /* logo size */
  --d: 40s;    /* animation duration */
  --n: 4;     /* visible logos */

  display: flex;
  overflow: hidden;
  mask: linear-gradient(90deg, #0000, #000 10% 90%, #0000);
  padding-block: 5px;
  margin: 20px auto;
}

/* Animate ONLY images inside .carousel */
.carousel img {
  width: var(--s);
  offset-path: shape(
    from calc(var(--s) / -2) 50%,
    hline by calc(
      sibling-count() *
      max(100% / var(--n), var(--s) + 10px)
    )
  );
  animation: slide var(--d) linear infinite
    calc(-1 * sibling-index() * var(--d) / sibling-count());
}

/* ✅ Anti-déformation (à ajouter JUSTE APRÈS) */
.carousel img{
  height: var(--s);
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

/* Pause on hover */
.carousel:hover img {
  animation-play-state: paused;
}

/* Animation */
@keyframes slide {
  to {
    offset-distance: 100%;
  }
}

/* ---------- Non-carousel images (for proof) ---------- */
.normal img {
  width: 150px;
  margin: 10px;
}


/* base = valeur desktop (override le inline style) */
.carousel { --s: 80px; }

/* tablette */
@media (max-width: 992px) {
  .carousel { --s: 60px; }
}

/* mobile */
@media (max-width: 768px) {
  .carousel { --s: 40px; }
}

/* petit mobile */
@media (max-width: 480px) {
  .carousel { --s: 30px; }
}