<section class="marquee-wrapper">
  <!-- Ligne du haut (vers la droite) -->
  <div class="marquee marquee-right">
    <div class="marquee-content" id="content-right">
      <span>Wreizh Animation défillement&nbsp;&nbsp;</span>
      <span>Wreizh Animation défillement&nbsp;&nbsp;</span>
      <span>Wreizh Animation défillement&nbsp;&nbsp;</span>
      <span>Wreizh Animation défillement&nbsp;&nbsp;</span>
    </div>
  </div>

  <!-- Ligne du bas (vers la gauche) -->
  <div class="marquee marquee-left">
    <div class="marquee-content" id="content-left">
      <span>Offre promotionel -40%&nbsp;&nbsp;</span>
      <span>Offre promotionel -40%&nbsp;&nbsp;</span>
      <span>Offre promotionel -40%&nbsp;&nbsp;</span>
      <span>Offre promotionel -40%&nbsp;&nbsp;</span>
    </div>
  </div>
</section>

<!-- Police Unbounded -->
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&display=swap" rel="stylesheet">

<style>
  .marquee-wrapper {
    font-family: 'Unbounded', sans-serif;
    font-size: 2rem;
    color: white;
    padding: 20px 0;
    position: relative;
    background: transparent;
  }

  .marquee {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    height: 60px;
    display: flex;
    align-items: center;
  }

  .marquee-content {
    display: inline-flex;
    will-change: transform;
    min-width: 200%;
    font-weight: 600;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .marquee-content span {
    display: inline-block;
    padding: 0 2rem;
  }

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

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

  .marquee-left .marquee-content {
    animation: scroll-left 10s linear infinite;
  }

  .marquee-right .marquee-content {
    animation: scroll-right 10s linear infinite;
  }
</style>

<script>
  let lastScrollTop = window.pageYOffset;
  let lastTime = Date.now();

  const contentRight = document.getElementById("content-right");
  const contentLeft = document.getElementById("content-left");

  function updateMarqueeSpeed() {
    const now = Date.now();
    const scrollTop = window.pageYOffset;
    const deltaScroll = Math.abs(scrollTop - lastScrollTop);
    const deltaTime = now - lastTime;

    const base = 10;
    const factor = 0.05;
    const speedFactor = Math.min(Math.max(1 + (deltaScroll / deltaTime) * factor, 0.5), 3);
    const newDuration = base / speedFactor;

    contentRight.style.animationDuration = `${newDuration}s`;
    contentLeft.style.animationDuration = `${newDuration}s`;

    lastScrollTop = scrollTop;
    lastTime = now;
  }

  window.addEventListener("scroll", updateMarqueeSpeed);
</script>