From ebd8ad5e7bf94581fc4824bcfdf21b4cb464b325 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 19 Feb 2026 14:18:59 +0100
Subject: [PATCH] Feat: cursor upon-target sur liens et boutons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Détection de survol via mouseover sur a, button, [role="button"], [tabindex]
- Classe upon-target appliquée au curseur et à son outline
- cursor-outline scale(0.5) au survol d'un élément interactif

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

diff --git a/src/components/layout/Cursor.svelte b/src/components/layout/Cursor.svelte
index f7dfc2c..67c75e6 100644
--- a/src/components/layout/Cursor.svelte
+++ b/src/components/layout/Cursor.svelte
@@ -1,10 +1,11 @@
 <script>
   import { onMount } from 'svelte'
 
-  let cursorX = 0
-  let cursorY = 0
-  let outlineX = 0
-  let outlineY = 0
+  let cursorX = $state(0)
+  let cursorY = $state(0)
+  let outlineX = $state(0)
+  let outlineY = $state(0)
+  let onTarget = $state(false)
   let rafId
 
   onMount(() => {
@@ -13,6 +14,14 @@
       cursorY = e.clientY
     }
 
+    const handleMouseOver = (e) => {
+      onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
+    }
+
+    const handleMouseOut = () => {
+      onTarget = false
+    }
+
     const animate = () => {
       outlineX += (cursorX - outlineX) * 0.2
       outlineY += (cursorY - outlineY) * 0.2
@@ -20,17 +29,29 @@
     }
 
     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" style="transform: translate({cursorX}px, {cursorY}px)"></div>
-<div class="cursor-outline" style="transform: translate({outlineX}px, {outlineY}px)"></div>
+<div
+  class="cursor"
+  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>
 
 <style>
   .cursor,
@@ -40,6 +61,7 @@
     left: 0;
     pointer-events: none;
     z-index: var(--z-cursor);
+    transition: transform 0.1s ease, scale 0.2s ease, opacity 0.2s ease;
   }
 
   .cursor {
@@ -57,6 +79,11 @@
     border-radius: 50%;
     transform-origin: center;
     margin: -16px 0 0 -16px;
+    transition: scale 0.2s ease;
+  }
+
+  .cursor-outline.upon-target {
+    scale: 0.5;
   }
 
   @media (max-width: 768px) {