Feat: navigation par slides horizontaux

- Nouveau store slides.svelte.js : gestion de l'état des slides (activeIndex, pendingPath, chargement progressif)
- Réécriture du router : remplace navaid par une logique custom avec chargement de la slide initiale puis des autres en arrière-plan
- App.svelte : layout slides-wrapper avec translateX, transition 1000ms
- Header.svelte : menu 100% dynamique depuis slides.all (ordre et titres multilingues depuis Kirby)
- site/controllers/site.php : navigation exposée via site->pages()->listed() avec titres par langue, home prependue

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

src/App.svelte

@@ -1,8 +1,7 @@
 <script>
-  import { page } from '@state/page.svelte'
+  import { slides } from '@state/slides.svelte'
 
   import Header from '@components/layout/Header.svelte'
-  import Footer from '@components/layout/Footer.svelte'
   import Cursor from '@components/layout/Cursor.svelte'
 
   import Home from '@views/Home.svelte'
@@ -17,22 +16,20 @@
   import Default from '@views/Default.svelte'
 
   const templates = {
-    'home': Home,
-    'about': About,
-    'expertise': Expertise,
-    'portfolio': Portfolio,
-    'project': Project,
-    'jouer': Jouer,
-    'game': Game,
-    'blog': Blog,
-    'article': Article,
-    'default': Default
+    home: Home,
+    about: About,
+    expertise: Expertise,
+    portfolio: Portfolio,
+    project: Project,
+    jouer: Jouer,
+    game: Game,
+    blog: Blog,
+    article: Article,
+    default: Default
   }
 
-  const pageData = $derived(page.data)
-  const template = $derived(pageData ? (page.template || 'default') : null)
-  const View = $derived(template ? (templates[template] || Default) : null)
-  const showFooter = $derived(template && template !== 'home')
+  const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
+  const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
 </script>
 
 <div class="app">
@@ -40,14 +37,22 @@
   <Header />
 
   <main class="main">
-    {#if pageData && View}
-      <View data={pageData} />
-    {/if}
+    <div
+      class="slides-wrapper"
+      style="width: {wrapperWidth}; transform: {wrapperTransform}"
+    >
+      {#each slides.all as slide}
+        <div class="slide" data-slide={slide.id}>
+          {#if slide.loaded}
+            <svelte:component
+              this={templates[slide.template] ?? Default}
+              data={slide.data}
+            />
+          {/if}
+        </div>
+      {/each}
+    </div>
   </main>
-
-  {#if showFooter}
-    <Footer />
-  {/if}
 </div>
 
 <style>
@@ -61,17 +66,7 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     background: #000;
     color: #fff;
-    overflow-x: hidden;
-  }
-
-  .app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .main {
-    flex: 1;
+    overflow: hidden;
   }
 
   :global(a) {
@@ -83,4 +78,26 @@
     max-width: 100%;
     height: auto;
   }
+
+  .app {
+    height: 100vh;
+  }
+
+  .main {
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+  }
+
+  .slides-wrapper {
+    display: flex;
+    height: 100%;
+    transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
+  }
+
+  .slide {
+    width: 100vw;
+    height: 100vh;
+    flex-shrink: 0;
+  }
 </style>