Refactor: cursor dans un wrapper commun pour centrage parfait

- 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

@@ -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
+  <div class="cursor-dot"></div>
-  class="cursor-outline"
+  <div class="cursor-outline"></div>
-  class:upon-target={onTarget}
+</div>
-  style="transform: translate({outlineX}px, {outlineY}px)"
-></div>
 
 <style>
-  .cursor,
+  .cursor-wrapper {
-  .cursor-outline {
     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-wrapper {
-    .cursor-outline {
       display: none;
     }
   }