Custom Cursors

<div class="custom-cursor cursor-dot" id="cursorDot"></div>
<div class="custom-cursor cursor-ring" id="cursorRing"></div>
<div class="cursor-zone" id="zone-dot">
  Hover this area
  <span class="info-text">Dot + ring cursor</span>
</div>

.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: none
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: #6366f1;
  border-radius: 50%
}

.cursor-ring {
  width: 40px;
  height: 40px;
  border: 2px solid #6366f1;
  border-radius: 50%;
  transition: all .15s ease-out
}

.cursor-zone {
  /* Ces variables venaient du design system du SITE : chez l'acheteur
     elles n'existent pas, le fond disparaissait et les coins devenaient carres.
     Scopees ici, elles cascadent sans polluer sa page. */
  --bg-elevated: #1a1a24;
  --radius-xl: 1rem;
  --space-4: 1rem;
  --text-muted: #8b8b93;
  --text-secondary: #a1a1aa;

   width: 100%;
   height: 300px;
   background: var(--bg-elevated);
   border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: var(--text-secondary);
   position: relative;
   overflow: hidden;
   }

.info-text  {
   position: absolute;
   bottom: var(--space-4);
   left: 50%;
   transform: translateX(-50%);
   font-size: 0.875rem;
   color: var(--text-muted);
   }

/* Le JS pose cette classe au survol d'une cible : sans regle, le curseur
   natif restait visible par-dessus le curseur personnalise. */
.cursor-active {
  cursor: none
}

// Zone 1: Dot Follower
    (function(){
      const zoneDot = document.getElementById('zone-dot');
      if (!zoneDot) return;
      const cursorDot = document.getElementById('cursorDot');
      const cursorRing = document.getElementById('cursorRing');
      if (!cursorDot || !cursorRing) return;
      let ringX = 0, ringY = 0;
      let dotX = 0, dotY = 0;

      zoneDot.addEventListener('mouseenter', () => {
        zoneDot.classList.add('cursor-active');
        cursorDot.style.display = 'block';
        cursorRing.style.display = 'block';
      });
      zoneDot.addEventListener('mouseleave', () => {
        zoneDot.classList.remove('cursor-active');
        cursorDot.style.display = 'none';
        cursorRing.style.display = 'none';
      });
      zoneDot.addEventListener('mousemove', (e) => {
        dotX = e.clientX;
        dotY = e.clientY;
        cursorDot.style.left = dotX - 4 + 'px';
        cursorDot.style.top = dotY - 4 + 'px';
      });

      function animateRing() {
        ringX += (dotX - ringX) * 0.15;
        ringY += (dotY - ringY) * 0.15;
        cursorRing.style.left = ringX - 20 + 'px';
        cursorRing.style.top = ringY - 20 + 'px';
        requestAnimationFrame(animateRing);
      }
      animateRing();
    })();