From 8b4fa2aa47801da5527e42dc3c31921d0f7cf943 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 19 Feb 2026 14:24:56 +0100
Subject: [PATCH] Refactor: cursor dans un wrapper commun pour centrage parfait
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Un seul wrapper positionné par transform, les deux éléments à l'intérieur
- translate(-50%, -50%) sur chaque enfant : centre exact = origine du wrapper
- upon-target sur le wrapper → scale(0.5) sur cursor-outline sans décalage
- Suppression du lerp JS (plus nécessaire avec le centrage CSS)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/layout/Cursor.svelte | 49 ++++++++++++-----------------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/components/layout/Cursor.svelte b/src/components/layout/Cursor.svelte
index 67c75e6..2c511c2 100644
--- a/src/components/layout/Cursor.svelte
+++ b/src/components/layout/Cursor.svelte
@@ -3,8 +3,6 @@
 
   let cursorX = $state(0)
   let cursorY = $state(0)
-  let outlineX = $state(0)
-  let outlineY = $state(0)
   let onTarget = $state(false)
   let rafId
 
@@ -22,73 +20,66 @@
       onTarget = false
     }
 
-    const animate = () => {
-      outlineX += (cursorX - outlineX) * 0.2
-      outlineY += (cursorY - outlineY) * 0.2
-      rafId = requestAnimationFrame(animate)
-    }
-
     window.addEventListener('mousemove', handleMouseMove)
     window.addEventListener('mouseover', handleMouseOver)
     window.addEventListener('mouseout', handleMouseOut)
-    animate()
 
     return () => {
       window.removeEventListener('mousemove', handleMouseMove)
       window.removeEventListener('mouseover', handleMouseOver)
       window.removeEventListener('mouseout', handleMouseOut)
-      if (rafId) cancelAnimationFrame(rafId)
     }
   })
 </script>
 
 <div
-  class="cursor"
+  class="cursor-wrapper"
   class:upon-target={onTarget}
   style="transform: translate({cursorX}px, {cursorY}px)"
-></div>
-<div
-  class="cursor-outline"
-  class:upon-target={onTarget}
-  style="transform: translate({outlineX}px, {outlineY}px)"
-></div>
+>
+  <div class="cursor-dot"></div>
+  <div class="cursor-outline"></div>
+</div>
 
 <style>
-  .cursor,
-  .cursor-outline {
+  .cursor-wrapper {
     position: fixed;
     top: 0;
     left: 0;
+    width: 0;
+    height: 0;
     pointer-events: none;
     z-index: var(--z-cursor);
-    transition: transform 0.1s ease, scale 0.2s ease, opacity 0.2s ease;
   }
 
-  .cursor {
+  .cursor-dot,
+  .cursor-outline {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .cursor-dot {
     width: 8px;
     height: 8px;
     background: #04fea0;
-    border-radius: 50%;
-    transform-origin: center;
   }
 
   .cursor-outline {
     width: 40px;
     height: 40px;
     border: 2px solid #04fea0;
-    border-radius: 50%;
-    transform-origin: center;
-    margin: -16px 0 0 -16px;
     transition: scale 0.2s ease;
   }
 
-  .cursor-outline.upon-target {
+  .upon-target .cursor-outline {
     scale: 0.5;
   }
 
   @media (max-width: 768px) {
-    .cursor,
-    .cursor-outline {
+    .cursor-wrapper {
       display: none;
     }
   }