<div class="slider">
  <div class="slide-track" id="logoTrack">

    <!-- &#x1f53d; COLLE TES LOGOS ICI -->
    
    <!-- Exemple :
    <div class="slide"><img decoding="async" src="logo1.png" alt="logo1" title="Créer des images qui défilent à l&#039;infini (sans plugin) 46"></div>
    <div class="slide"><img decoding="async" src="logo2.png" alt="logo2" title="Créer des images qui défilent à l&#039;infini (sans plugin) 47"></div>
    -->

    <!-- &#x1f53c; FIN ZONE LOGOS -->

  </div>
</div>

<script>
(function () {
  function initLogoSlider() {
    const track = document.getElementById('logoTrack');
    if (!track) return;

    const originalSlides = Array.from(track.children).map(el => el.cloneNode(true));
    let resizeTimer;

    function buildSlider() {
      track.style.animation = 'none';
      track.innerHTML = '';

      originalSlides.forEach(slide => {
        track.appendChild(slide.cloneNode(true));
      });

      const oneSetWidth = track.scrollWidth;
      if (!oneSetWidth) return;

      while (track.scrollWidth < oneSetWidth * 2) {
        originalSlides.forEach(slide => {
          track.appendChild(slide.cloneNode(true));
        });
      }

      track.style.setProperty('--loop-width', oneSetWidth + 'px');

      void track.offsetWidth;

      const duration = window.innerWidth <= 768 ? '60s' : '55s';
      track.style.animation = `logo-scroll ${duration} linear infinite`;
    }

    const images = track.querySelectorAll('img');
    let loaded = 0;

    if (!images.length) {
      buildSlider();
    } else {
      images.forEach(img => {
        if (img.complete) {
          loaded++;
          if (loaded === images.length) buildSlider();
        } else {
          img.addEventListener('load', () => {
            loaded++;
            if (loaded === images.length) buildSlider();
          });
          img.addEventListener('error', () => {
            loaded++;
            if (loaded === images.length) buildSlider();
          });
        }
      });
    }

    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(buildSlider, 150);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initLogoSlider);
  } else {
    initLogoSlider();
  }
})();
</script>