Fix: cursor outline scale depuis le bon centre

scale() dans le transform plutôt qu'en propriété CSS séparée.
La propriété scale CSS calcule son transform-origin sur la position
layout (avant translate), pas la position visuelle — d'où le décalage.
Avec transform: translate(-50%, -50%) scale(0.5), le centre reste en (0,0).

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

site/blueprints/site.yml

@@ -12,6 +12,26 @@ columns:
         sortable: true
         create: false
         status: listed
+
+  - width: 1/2
+    fields:
+      siteTitle:
+        label: Titre du site
+        type: text
+        translate: true
+      siteTagline:
+        label: Tagline
+        type: text
+        translate: true
+      siteDescription:
+        label: Description
+        type: textarea
+        translate: true
+      logo:
+        label: Logo
+        type: files
+        max: 1
+
   - width: 1/2
     fields:
       contactEmail:

site/controllers/site.php

@@ -14,7 +14,7 @@ return function ($page, $kirby, $site) {
     'template' => $page->intendedTemplate()->name(),
     'modified' => $page->modified('Y-m-d'),
     'site' => [
-      'title' => $site->site_title()->value(),
+      'title' => $site->siteTitle()->value(),
       'url' => $site->url(),
       'logo' => $site->logo()->toFile()?->url(),
       'language' => $kirby->language()?->code() ?? 'fr',

src/components/layout/Cursor.svelte

@@ -1,10 +1,9 @@
 <script>
   import { onMount } from 'svelte'
 
-  let cursorX = 0
+  let cursorX = $state(0)
-  let cursorY = 0
+  let cursorY = $state(0)
-  let outlineX = 0
+  let onTarget = $state(false)
-  let outlineY = 0
   let rafId
 
   onMount(() => {
@@ -13,55 +12,74 @@
       cursorY = e.clientY
     }
 
-    const animate = () => {
+    const handleMouseOver = (e) => {
-      outlineX += (cursorX - outlineX) * 0.2
+      onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
-      outlineY += (cursorY - outlineY) * 0.2
+    }
-      rafId = requestAnimationFrame(animate)
+
+    const handleMouseOut = () => {
+      onTarget = false
     }
 
     window.addEventListener('mousemove', handleMouseMove)
-    animate()
+    window.addEventListener('mouseover', handleMouseOver)
+    window.addEventListener('mouseout', handleMouseOut)
 
     return () => {
       window.removeEventListener('mousemove', handleMouseMove)
-      if (rafId) cancelAnimationFrame(rafId)
+      window.removeEventListener('mouseover', handleMouseOver)
+      window.removeEventListener('mouseout', handleMouseOut)
     }
   })
 </script>
 
-<div class="cursor" style="transform: translate({cursorX}px, {cursorY}px)"></div>
+<div
-<div class="cursor-outline" style="transform: translate({outlineX}px, {outlineY}px)"></div>
+  class="cursor-wrapper"
+  class:upon-target={onTarget}
+  style="transform: translate({cursorX}px, {cursorY}px)"
+>
+  <div class="cursor-dot"></div>
+  <div class="cursor-outline"></div>
+</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);
   }
 
-  .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%;
+    transition: transform 0.2s ease;
-    transform-origin: center;
+  }
-    margin: -16px 0 0 -16px;
+
+  .upon-target .cursor-outline {
+    transform: translate(-50%, -50%) scale(0.5);
   }
 
   @media (max-width: 768px) {
-    .cursor,
+    .cursor-wrapper {
-    .cursor-outline {
       display: none;
     }
   }