Migration vers architecture Svelte + Kirby inspirée de design-to-pack

- Mise en place de Svelte 4 avec Vite pour le frontend (SPA)
- Simplification des templates PHP (header/footer minimalistes)
- Création de templates JSON pour API (home, about, expertise, portfolio, jouer, game, blog, article, project)
- Ajout d'un controller de site pour définir genericData globalement
- Structure des stores Svelte (page, navigation, locale, site)
- Router avec navaid pour navigation SPA et interception des liens
- Composants layout (Header, Footer, Cursor) et vues de base
- Build Vite vers assets/dist/ (index.js/css)
- Header PHP détecte assets/dist pour basculer dev/prod

Architecture fonctionnelle de base établie, à améliorer et compléter.

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

src/components/ui/Button.svelte

@@ -0,0 +1,98 @@
+<script>
+  export let variant = 'primary' // primary, secondary, outline
+  export let size = 'medium' // small, medium, large
+  export let disabled = false
+  export let href = null
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="btn btn--{variant} btn--{size}"
+    class:disabled
+    on:click
+  >
+    <slot />
+  </a>
+{:else}
+  <button
+    class="btn btn--{variant} btn--{size}"
+    {disabled}
+    on:click
+  >
+    <slot />
+  </button>
+{/if}
+
+<style>
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 2rem;
+    font-weight: 600;
+    text-decoration: none;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.9rem;
+  }
+
+  .btn--primary {
+    background: #04fea0;
+    color: #000;
+    border-color: #04fea0;
+  }
+
+  .btn--primary:hover {
+    background: #03d98c;
+    border-color: #03d98c;
+  }
+
+  .btn--secondary {
+    background: #000;
+    color: #04fea0;
+    border-color: #04fea0;
+  }
+
+  .btn--secondary:hover {
+    background: #04fea0;
+    color: #000;
+  }
+
+  .btn--outline {
+    background: transparent;
+    color: #fff;
+    border-color: #fff;
+  }
+
+  .btn--outline:hover {
+    background: #fff;
+    color: #000;
+  }
+
+  .btn--small {
+    padding: 0.5rem 1.5rem;
+    font-size: 0.8rem;
+  }
+
+  .btn--medium {
+    padding: 0.75rem 2rem;
+    font-size: 0.9rem;
+  }
+
+  .btn--large {
+    padding: 1rem 2.5rem;
+    font-size: 1rem;
+  }
+
+  .btn:disabled,
+  .btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+</style>

src/components/ui/VideoBackground.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { onMount } from 'svelte'
+
+  export let src
+  export let poster = ''
+  export let overlay = true
+
+  let videoElement
+
+  onMount(() => {
+    if (videoElement && src) {
+      videoElement.play().catch(err => {
+        console.log('Autoplay failed:', err)
+      })
+    }
+  })
+</script>
+
+<div class="video-background">
+  {#if src}
+    <video
+      bind:this={videoElement}
+      {poster}
+      muted
+      loop
+      playsinline
+      preload="metadata"
+      class="video-background__video"
+    >
+      <source {src} type="video/mp4" />
+    </video>
+  {/if}
+
+  {#if overlay}
+    <div class="video-background__overlay"></div>
+  {/if}
+</div>
+
+<style>
+  .video-background {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    z-index: 0;
+  }
+
+  .video-background__video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    transform: translate(-50%, -50%);
+    object-fit: cover;
+  }
+
+  .video-background__overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.3),
+      rgba(0, 0, 0, 0.7)
+    );
+  }
+</style>