Upgrade Svelte 5.0.0 → 5.53.7 + fix Cursor class syntax

- Mise à jour de Svelte vers 5.53.7 pour supporter la syntaxe tableau/objet sur l'attribut class
- Cursor.svelte : class={[...]} avec états onTarget et onClick
- blueprints : catchphrase → catchPhrase
- buttons.css : suppression cursor: pointer
- Portfolio.svelte : scale hover nav item

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/layout/Cursor.svelte

@@ -4,6 +4,7 @@
   let cursorX = $state(0)
   let cursorY = $state(0)
   let onTarget = $state(false)
+  let onClick = $state(false)
   let rafId
 
   onMount(() => {
@@ -19,22 +20,32 @@
     const handleMouseOut = () => {
       onTarget = false
     }
+    
+    const handleMouseDown = () => {
+      onClick = true
+    }
+    
+    const handleMouseUp = () => {
+      onClick = false
+    }
 
     window.addEventListener('mousemove', handleMouseMove)
     window.addEventListener('mouseover', handleMouseOver)
     window.addEventListener('mouseout', handleMouseOut)
+    window.addEventListener('mousedown', handleMouseDown)
+    window.addEventListener('mouseup', handleMouseUp)
 
     return () => {
       window.removeEventListener('mousemove', handleMouseMove)
       window.removeEventListener('mouseover', handleMouseOver)
-      window.removeEventListener('mouseout', handleMouseOut)
+      window.removeEventListener('mousedown', handleMouseDown)
+      window.removeEventListener('mouseup', handleMouseUp)
     }
   })
 </script>
 
 <div
-  class="cursor-wrapper"
-  class:upon-target={onTarget}
+  class={["cursor-wrapper", onTarget && "upon-target", onClick && "is-clicking"]}
   style="transform: translate({cursorX}px, {cursorY}px)"
 >
   <div class="cursor-dot"></div>
@@ -59,23 +70,35 @@
     left: 0;
     border-radius: 50%;
     transform: translate(-50%, -50%);
+    transition: all 0.2s ease-in-out;
   }
 
   .cursor-dot {
-    width: 8px;
-    height: 8px;
-    background: #04fea0;
+    width: 12px;
+    height: 12px;
+    background: #fff;
   }
 
   .cursor-outline {
-    width: 40px;
-    height: 40px;
-    border: 2px solid #04fea0;
-    transition: transform 0.2s ease;
+    width: 45px;
+    height: 45px;
+    border: 3px solid #04fea0;
   }
 
   .upon-target .cursor-outline {
-    transform: translate(-50%, -50%) scale(0.5);
+    width: 25px;
+    height: 25px;
+    border-width: 2px;
+  }
+
+  .is-clicking .cursor-dot {
+    width: 33px;
+    height: 33px;
+  }
+
+  .upon-target.is-clicking .cursor-dot {
+    width: 21px;
+    height: 21px;
   }
 
   @media (max-width: 768px) {

src/styles/buttons.css

@@ -10,7 +10,6 @@
   padding: 12px 16px;
   transition: 0.5s ease-out;
   border: none;
-  cursor: pointer;
 
   font-family: "Danzza Bold";
   font-size: var(--font-size-button);

src/views/Portfolio.svelte

@@ -261,7 +261,7 @@
   }
 
   .portfolio-nav-item:hover button {
-    transform: scale(1);
+    transform: scale(1.25);
   }
 
   .portfolio-nav-item.active button {