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/router/index.js

@@ -1,93 +1,109 @@
-import navaid from "navaid";
-import { page } from "@state/page.svelte";
-import { navigation } from "@state/navigation.svelte";
+import { slides } from "@state/slides.svelte";
 import { site } from "@state/site.svelte";
 import { locale } from "@state/locale.svelte";
 
-export const router = navaid("/", () => {
-  // Default handler
-});
+let siteInitialized = false;
 
-async function loadPage(path) {
-  navigation.setLoading(true);
-  page.setLoading(true);
+function normalizePath(path) {
+  return path === "/" ? "/home" : path;
+}
+
+async function loadSlide(path) {
+  const idx = slides.getIndexByPath(path);
+  if (idx !== -1) {
+    const slide = slides.all[idx];
+    if (slide.loaded || slide.loading) return;
+    slides.setLoading(path, true);
+  }
+
+  console.log(`[router] loadSlide: ${path}`);
 
   try {
     const response = await fetch(`${path}.json`);
-
-    if (!response.ok) {
-      throw new Error(`Failed to load page: ${response.status}`);
-    }
-
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
     const data = await response.json();
 
-    if (data.site) {
-      site.set(data.site);
-      locale.initialize(data.site.language, data.site.languages);
-    }
-
-    page.set({
-      data,
-      template: data.template || "default",
-      url: path,
-      loading: false,
-      error: null,
+    console.log(`[router] fetch ok: ${path}`, {
+      template: data.template,
+      hasSite: !!data.site,
+      navigation: data.site?.navigation,
     });
 
-    window.scrollTo(0, 0);
+    if (!siteInitialized && data.site) {
+      site.set(data.site);
+      locale.initialize(data.site.language, data.site.languages);
+      slides.init(data.site.navigation);
+      siteInitialized = true;
+      console.log(`[router] slides initialized:`, slides.all.map(s => s.path));
+    }
+
+    slides.setData(path, data);
+    console.log(`[router] setData done: ${path}, slides loaded:`, slides.all.map(s => `${s.path}=${s.loaded}`));
   } catch (error) {
-    console.error("Failed to load page:", error);
-    page.setError(error);
-  } finally {
-    navigation.setLoading(false);
+    console.error(`[router] Failed to load slide ${path}:`, error);
+    slides.setLoading(path, false);
   }
 }
 
-// Route handlers
-router
-  .on("/", () => loadPage("/home"))
-  .on("/expertise", () => loadPage("/expertise"))
-  .on("/portfolio", () => loadPage("/portfolio"))
-  .on("/portfolio/:slug", ({ slug }) => loadPage(`/portfolio/${slug}`))
-  .on("/jouer", () => loadPage("/jouer"))
-  .on("/jouer/:slug", ({ slug }) => loadPage(`/jouer/${slug}`))
-  .on("/a-propos", () => loadPage("/a-propos"))
-  .on("/blog", () => loadPage("/blog"))
-  .on("/blog/:slug", ({ slug }) => loadPage(`/blog/${slug}`))
-  .on("*", (params) => {
-    // Fallback for other routes
-    loadPage(window.location.pathname);
+function loadAllSlidesInBackground(exceptPath) {
+  slides.all
+    .filter((s) => s.path !== exceptPath)
+    .forEach((s) => loadSlide(s.path));
+}
+
+export function slideTo(path, { skipHistory = false } = {}) {
+  path = normalizePath(path);
+
+  if (!skipHistory) {
+    history.pushState({}, "", path === "/home" ? "/" : path);
+  }
+
+  const idx = slides.getIndexByPath(path);
+  if (idx !== -1 && slides.all[idx].title) {
+    document.title = `${slides.all[idx].title} — World Game`;
+  }
+
+  slides.slideTo(path);
+
+  if (idx !== -1 && !slides.all[idx].loaded) {
+    loadSlide(path);
+  }
+}
+
+export async function initRouter() {
+  const initialPath = normalizePath(window.location.pathname);
+  console.log(`[router] initRouter, initialPath: ${initialPath}`);
+
+  await loadSlide(initialPath);
+
+  const idx = slides.getIndexByPath(initialPath);
+  console.log(`[router] after initial load, idx=${idx}, slides.all.length=${slides.all.length}`);
+  if (idx !== -1) {
+    slides.setActiveIndex(idx);
+  }
+
+  loadAllSlidesInBackground(initialPath);
+
+  window.addEventListener("popstate", () => {
+    const path = normalizePath(window.location.pathname);
+    slideTo(path, { skipHistory: true });
   });
 
-export function initRouter() {
-  // Start listening to route changes
-  router.listen();
-
-  // Intercept internal link clicks
   document.addEventListener("click", (e) => {
     const link = e.target.closest("a");
     if (!link) return;
 
     const url = new URL(link.href, window.location.origin);
-
-    // Only intercept same-origin links without target attribute
     if (
       url.origin === window.location.origin &&
       !link.target &&
       !link.hasAttribute("download")
     ) {
       e.preventDefault();
-      navigateTo(url.pathname);
+      slideTo(url.pathname);
     }
   });
-
-  // Handle browser back/forward
-  window.addEventListener("popstate", () => {
-    router.run(window.location.pathname);
-  });
 }
 
-export function navigateTo(path) {
-  window.history.pushState({}, "", path);
-  loadPage(path);
-}
+// Keep navigateTo as alias so existing views don't break
+export const navigateTo = slideTo;