Feat: intégration multilingue FR/EN (i18n)

- Ajout de src/i18n/index.js : dictionnaire centralisé + fonction t(key, vars)
- Ajout de LanguageSwitcher.svelte : toggle FR/EN avec persistance localStorage
- Router : normalizePath strip /en/, apiPrefix() pour les fetches, détection langue (URL > localStorage > navigator)
- Tous les composants (Header, Menu, Footer, Article, Blog, Play) migrent vers t() depuis @i18n
- Blog : navigation interne (fetch, history, getSlugFromUrl) locale-aware

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

src/App.svelte

@@ -5,6 +5,7 @@
 
   import Header from '@components/layout/Header.svelte'
   import Cursor from '@components/layout/Cursor.svelte'
+  import LanguageSwitcher from '@components/ui/LanguageSwitcher.svelte'
 
   import Home from '@views/Home.svelte'
   import About from '@views/About.svelte'
@@ -94,6 +95,7 @@
     {/each}
   </div>
 </main>
+<LanguageSwitcher />
 
 <style>
   :global(#app) {

src/components/layout/Footer.svelte

@@ -1,5 +1,6 @@
 <script>
   import { site } from '@state/site.svelte'
+  import { t } from '@i18n'
 
   const logo    = $derived(site.logo)
   const title   = $derived(site.title || 'World Game')
@@ -20,13 +21,13 @@
         body: JSON.stringify({ email })
       })
       if (res.ok) {
-        status = { type: 'success', message: 'Merci pour votre inscription !' }
+        status = { type: 'success', message: t('newsletter_success') }
         email = ''
       } else {
-        status = { type: 'error', message: 'Une erreur est survenue.' }
+        status = { type: 'error', message: t('newsletter_error') }
       }
     } catch {
-      status = { type: 'error', message: 'Une erreur est survenue.' }
+      status = { type: 'error', message: t('newsletter_error') }
     }
   }
 </script>
@@ -44,7 +45,7 @@
     <!-- Location -->
     {#if contact.address}
       <div class="footer-col">
-        <h3>Location</h3>
+        <h3>{t('location')}</h3>
         <address>{@html contact.address}</address>
       </div>
     {/if}
@@ -52,7 +53,7 @@
     <!-- Contact -->
     {#if contact.email}
       <div class="footer-col">
-        <h3>Contact</h3>
+        <h3>{t('contact')}</h3>
         <a href="mailto:{contact.email}">{contact.email}</a>
       </div>
     {/if}
@@ -60,7 +61,7 @@
     <!-- Follow us -->
     {#if socials.length > 0}
       <div class="footer-col">
-        <h3>Follow us</h3>
+        <h3>{t('follow_us')}</h3>
         <ul class="footer-socials" role="list">
           {#each socials as social}
             <li>
@@ -79,16 +80,16 @@
 
     <!-- Newsletter -->
     <div class="footer-newsletter">
-      <h3>Subscribe to our newsletters!</h3>
+      <h3>{t('newsletter_heading')}</h3>
       <form class="footer-newsletter-form" onsubmit={handleSubscribe}>
         <input
           class="footer-newsletter-input"
           type="email"
-          placeholder="Enter your email"
+          placeholder={t('newsletter_placeholder')}
           bind:value={email}
           required
         />
-        <button type="submit" class="button">Subscribe</button>
+        <button type="submit" class="button">{t('newsletter_submit')}</button>
       </form>
       {#if status}
         <p class="footer-newsletter-status footer-newsletter-status--{status.type}">
@@ -101,14 +102,14 @@
 
   <!-- Copyright bar -->
   <div class="footer-bottom">
-    <p>World Game &copy; {year}. All rights reserved.</p>
+    <p>{t('copyright', { year })}</p>
     <div class="footer-divider" aria-hidden="true"></div>
-    <a href="/cookies">Cookies preferences</a>
+    <a href="/cookies">{t('cookies')}</a>
     <div class="footer-divider" aria-hidden="true"></div>
     {#if contact.legalNotice}
-      <a href={contact.legalNotice} target="_blank" rel="noopener noreferrer">Mentions légales</a>
+      <a href={contact.legalNotice} target="_blank" rel="noopener noreferrer">{t('legal')}</a>
     {:else}
-      <a href="/privacy">Privacy</a>
+      <a href="/privacy">{t('privacy')}</a>
     {/if}
   </div>
 </footer>

src/components/layout/Header.svelte

@@ -3,6 +3,7 @@
   import { locale } from '@state/locale.svelte'
   import { slides } from '@state/slides.svelte'
   import Menu from '@components/layout/Menu.svelte'
+  import { t } from '@i18n'
 
   const isMenuOpen = $derived(navigation.isMenuOpen)
   const currentLang = $derived(locale.current)
@@ -40,7 +41,7 @@
   <button
     class="navbar-toggle"
     onclick={toggleMenu}
-    aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
+    aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
     aria-expanded={isMenuOpen}
     aria-controls="main-menu"
   >

src/components/layout/Menu.svelte

@@ -3,6 +3,7 @@
   import { locale } from '@state/locale.svelte'
   import { slides } from '@state/slides.svelte'
   import { site } from '@state/site.svelte'
+  import { t } from '@i18n'
 
   const isMenuOpen = $derived(navigation.isMenuOpen)
   const currentLang = $derived(locale.current)
@@ -32,18 +33,6 @@
     return slide.titles?.[currentLang] || slide.title || slide.id
   }
 
-  const labels = {
-    menu:    { fr: 'MENU',            en: 'MENU' },
-    connect: { fr: 'CONNECT',         en: 'CONNECT' },
-    address: { fr: 'ADRESSE',         en: 'LOCATION' },
-    mail:    { fr: 'MAIL',            en: 'MAIL' },
-    socials: { fr: 'RÉSEAUX',         en: 'SOCIALS' },
-    legal:   { fr: 'MENTIONS LÉGALES', en: 'LEGAL NOTICE' },
-  }
-
-  function t(key) {
-    return labels[key]?.[currentLang] || labels[key]?.fr || key
-  }
 </script>
 
 <dialog

src/components/ui/LanguageSwitcher.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { locale } from '@state/locale.svelte'
+
+  function switchLanguage() {
+    const isEn = locale.current === 'en'
+    const newLang = isEn ? 'fr' : 'en'
+    localStorage.setItem('wg_lang', newLang)
+    const clean = window.location.pathname.replace(/^\/en/, '') || '/'
+    window.location.href = isEn ? clean : `/en${clean}`
+  }
+</script>
+
+<div class="lang-switcher font-face-danzza-bold clickable" onclick={switchLanguage}>
+  <p class="clickable">{locale.current === 'en' ? 'fr' : 'en'}</p>
+</div>
+
+<style>
+  .lang-switcher {
+    z-index: 60;
+    position: absolute;
+    bottom: 4vh;
+    left: 4vh;
+    text-transform: uppercase;
+    color: rgb(4, 254, 160);
+    display: block;
+    cursor: pointer;
+  }
+</style>

src/i18n/index.js

@@ -0,0 +1,51 @@
+import { locale } from '@state/locale.svelte'
+
+const dict = {
+  // Article
+  'published_on':           { fr: 'Publié le',                            en: 'Published on' },
+  'link_copied':            { fr: 'Lien copié !',                         en: 'Link copied!' },
+  'copy_link':              { fr: 'Copier le lien',                       en: 'Copy link' },
+  'share_article':          { fr: 'Partager cet article',                 en: 'Share this article' },
+  'related':                { fr: 'Nos recommandations',                  en: 'Our recommendations' },
+  'share_whatsapp':         { fr: 'Partager sur WhatsApp',                en: 'Share on WhatsApp' },
+  'share_x':                { fr: 'Partager sur X',                       en: 'Share on X' },
+  'share_facebook':         { fr: 'Partager sur Facebook',                en: 'Share on Facebook' },
+  'share_linkedin':         { fr: 'Partager sur LinkedIn',                en: 'Share on LinkedIn' },
+  // Blog
+  'loading':                { fr: 'Chargement…',                          en: 'Loading…' },
+  'read_article':           { fr: "Lire l'article",                       en: 'Read article' },
+  // Play
+  'play':                   { fr: 'Jouer',                                en: 'Play' },
+  'coming_soon':            { fr: 'Coming soon',                          en: 'Coming soon' },
+  // Header
+  'close_menu':             { fr: 'Fermer le menu',                       en: 'Close menu' },
+  'open_menu':              { fr: 'Ouvrir le menu',                       en: 'Open menu' },
+  // Footer
+  'location':               { fr: 'Adresse',                              en: 'Location' },
+  'contact':                { fr: 'Contact',                              en: 'Contact' },
+  'follow_us':              { fr: 'Réseaux',                              en: 'Follow us' },
+  'newsletter_heading':     { fr: 'Inscrivez-vous à notre newsletter !',  en: 'Subscribe to our newsletter!' },
+  'newsletter_placeholder': { fr: 'Votre email',                         en: 'Enter your email' },
+  'newsletter_submit':      { fr: "S'inscrire",                           en: 'Subscribe' },
+  'newsletter_success':     { fr: 'Merci pour votre inscription !',       en: 'Thank you for subscribing!' },
+  'newsletter_error':       { fr: 'Une erreur est survenue.',             en: 'An error occurred.' },
+  'copyright':              { fr: 'World Game © {year}. Tous droits réservés.', en: 'World Game © {year}. All rights reserved.' },
+  'legal':                  { fr: 'Mentions légales',                     en: 'Legal notice' },
+  'cookies':                { fr: 'Préférences cookies',                  en: 'Cookie preferences' },
+  'privacy':                { fr: 'Confidentialité',                      en: 'Privacy' },
+  // Menu
+  'menu':                   { fr: 'MENU',                                 en: 'MENU' },
+  'connect':                { fr: 'CONNECT',                              en: 'CONNECT' },
+  'address':                { fr: 'ADRESSE',                              en: 'LOCATION' },
+  'mail':                   { fr: 'MAIL',                                 en: 'MAIL' },
+  'socials':                { fr: 'RÉSEAUX',                              en: 'SOCIALS' },
+}
+
+export function t(key, vars = {}) {
+  const lang = locale.current
+  let str = dict[key]?.[lang] ?? dict[key]?.fr ?? key
+  for (const [k, v] of Object.entries(vars)) {
+    str = str.replace(`{${k}}`, v)
+  }
+  return str
+}

src/router/index.js

@@ -5,7 +5,12 @@ import { locale } from "@state/locale.svelte";
 let siteInitialized = false;
 
 function normalizePath(path) {
-  return path === "/" ? "/home" : path;
+  const stripped = path.replace(/^\/en(\/|$)/, '$1') || '/';
+  return stripped === '/' ? '/home' : stripped;
+}
+
+function apiPrefix() {
+  return locale.current === 'en' ? '/en' : '';
 }
 
 /**
@@ -47,8 +52,7 @@ async function loadSlide(path) {
   }
 
   try {
-    // Fetch the actual slide path (parent), not the sub-page
-    const response = await fetch(`${slidePath}.json`);
+    const response = await fetch(`${apiPrefix()}${slidePath}.json`);
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
     const data = await response.json();
 
@@ -76,7 +80,10 @@ export function slideTo(path, { skipHistory = false } = {}) {
   path = normalizePath(path);
 
   if (!skipHistory) {
-    history.pushState({}, "", path === "/home" ? "/" : path);
+    const historyPath = locale.current === 'en'
+      ? (path === '/home' ? '/en' : `/en${path}`)
+      : (path === '/home' ? '/' : path);
+    history.pushState({}, '', historyPath);
   }
 
   const idx = findSlideIndex(path);
@@ -94,6 +101,22 @@ export function slideTo(path, { skipHistory = false } = {}) {
 }
 
 export async function initRouter() {
+  // Language detection: URL prefix > localStorage > navigator
+  const hasEnPrefix = window.location.pathname.startsWith('/en');
+  if (hasEnPrefix) {
+    locale.setLanguage('en');
+    localStorage.setItem('wg_lang', 'en');
+  } else if (!localStorage.getItem('wg_lang')) {
+    const navLang = navigator.language || navigator.languages?.[0] || 'fr';
+    if (navLang.startsWith('en')) {
+      window.location.replace('/en' + window.location.pathname);
+      return;
+    }
+  } else if (localStorage.getItem('wg_lang') === 'en') {
+    window.location.replace('/en' + window.location.pathname);
+    return;
+  }
+
   const initialPath = normalizePath(window.location.pathname);
 
   await loadSlide(initialPath);

src/views/Article.svelte

@@ -4,6 +4,7 @@
    * Reçoit les données article via props, pas via le slide system.
    */
   import Footer from '@components/layout/Footer.svelte'
+  import { t } from '@i18n'
 
   let { data, onBack } = $props()
 
@@ -25,27 +26,27 @@
 
   <!-- Date + share buttons -->
   <div class="article-topbar">
-    <time class="article-date">Publié le {data.published}</time>
+    <time class="article-date">{t('published_on')} {data.published}</time>
     <div class="article-share">
       {#if copySuccess}
-        <span class="copy-toast">Lien copié !</span>
+        <span class="copy-toast">{t('link_copied')}</span>
       {/if}
       <div class="share-buttons">
         <!-- svelte-ignore a11y_invalid_attribute -->
-        <a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
-          <img src="/assets/icons/link-icon.svg" alt="Copier le lien" width="20" height="20" />
+        <a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
+          <img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
         </a>
         <a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/whatsapp-icon.svg" alt="Partager sur WhatsApp" width="20" height="20" />
+          <img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
         </a>
         <a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/twitter-icon.svg" alt="Partager sur X" width="20" height="20" />
+          <img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
         </a>
         <a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/facebook-icon.svg" alt="Partager sur Facebook" width="20" height="20" />
+          <img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
         </a>
         <a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-          <img src="/assets/icons/linkedin-icon.svg" alt="Partager sur LinkedIn" width="20" height="20" />
+          <img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
         </a>
       </div>
     </div>
@@ -74,23 +75,23 @@
   <!-- Share section (bas d'article) -->
   <div class="article-share-section">
     <hr class="share-divider" />
-    <p class="share-label">Partager cet article</p>
+    <p class="share-label">{t('share_article')}</p>
     <div class="share-buttons">
       <!-- svelte-ignore a11y_invalid_attribute -->
-      <a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
-        <img src="/assets/icons/link-icon.svg" alt="Copier le lien" width="20" height="20" />
+      <a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
+        <img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
       </a>
       <a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/whatsapp-icon.svg" alt="Partager sur WhatsApp" width="20" height="20" />
+        <img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
       </a>
       <a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/twitter-icon.svg" alt="Partager sur X" width="20" height="20" />
+        <img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
       </a>
       <a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/facebook-icon.svg" alt="Partager sur Facebook" width="20" height="20" />
+        <img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
       </a>
       <a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
-        <img src="/assets/icons/linkedin-icon.svg" alt="Partager sur LinkedIn" width="20" height="20" />
+        <img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
       </a>
     </div>
   </div>
@@ -98,7 +99,7 @@
   <!-- Articles recommandés -->
   {#if data.related?.length}
     <section class="article-related">
-      <h2>Nos recommandations</h2>
+      <h2>{t('related')}</h2>
       <div class="article-related-grid">
         {#each data.related as rec}
           <a href="/blog/{rec.slug}" class="article-related-card">

src/views/Blog.svelte

@@ -1,8 +1,10 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
+  import { locale } from '@state/locale.svelte'
   import Footer from '@components/layout/Footer.svelte'
   import Article from '@views/Article.svelte'
+  import { t } from '@i18n'
 
   let { data } = $props()
 
@@ -15,9 +17,9 @@
   let articleLoading = $state(false)
   let sectionEl = $state(null)
 
-  // Extract slug from current URL (for direct navigation to /blog/slug)
+  // Extract slug from current URL (for direct navigation to /blog/slug or /en/blog/slug)
   function getSlugFromUrl() {
-    const parts = window.location.pathname.split('/').filter(Boolean)
+    const parts = window.location.pathname.replace(/^\/en/, '').split('/').filter(Boolean)
     // parts = ['blog', 'slug'] → slug = 'slug'
     return parts.length >= 2 && parts[0] === 'blog' ? parts[1] : null
   }
@@ -25,7 +27,8 @@
   async function openArticle(slug) {
     articleLoading = true
     try {
-      const res = await fetch(`/blog/${slug}.json`)
+      const prefix = locale.current === 'en' ? '/en' : ''
+      const res = await fetch(`${prefix}/blog/${slug}.json`)
       if (!res.ok) throw new Error(`HTTP ${res.status}`)
       articleData = await res.json()
       scrollToTop()
@@ -39,7 +42,8 @@
 
   function backToList() {
     articleData = null
-    history.pushState({}, '', '/blog')
+    const prefix = locale.current === 'en' ? '/en' : ''
+    history.pushState({}, '', `${prefix}/blog`)
     document.title = `${data?.title ?? 'Blog'} — World Game`
     scrollToTop()
   }
@@ -56,12 +60,13 @@
     const url = new URL(link.href, window.location.origin)
     if (url.origin !== window.location.origin) return
 
-    const match = url.pathname.match(/^\/blog\/([^/]+)$/)
+    const match = url.pathname.match(/^(?:\/en)?\/blog\/([^/]+)$/)
     if (match) {
       e.preventDefault()
       e.stopPropagation()
       const slug = match[1]
-      history.pushState({}, '', `/blog/${slug}`)
+      const prefix = locale.current === 'en' ? '/en' : ''
+      history.pushState({}, '', `${prefix}/blog/${slug}`)
       openArticle(slug)
     }
   }
@@ -129,7 +134,7 @@
               <p class="blog-card-description">{featured.intro}</p>
             {/if}
             <a href="/blog/{featured.slug}" class="blog-card-readmore">
-              Lire l'article <span class="arrow">→</span>
+              {t('read_article')} <span class="arrow">→</span>
             </a>
           </div>
           {#if featured.cover}
@@ -151,7 +156,7 @@
               <a href="/blog/{article.slug}">{article.title}</a>
             </h2>
             <a href="/blog/{article.slug}" class="blog-card-readmore">
-              Lire l'article <span class="arrow">→</span>
+              {t('read_article')} <span class="arrow">→</span>
             </a>
           </div>
           {#if article.cover}
@@ -168,7 +173,7 @@
       {/each}
 
       {#if articleLoading}
-        <p class="blog-loading">Chargement…</p>
+        <p class="blog-loading">{t('loading')}</p>
       {/if}
 
     </div>

src/views/Play.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
   import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
+  import { t } from '@i18n'
 
   let { data } = $props()
 
@@ -113,7 +114,7 @@
 
 <section
   class="play golden-grid"
-  aria-label="Jouer"
+  aria-label={t('play')}
   style={displayedGame?.backgroundColor ? `--background-color: ${displayedGame.backgroundColor}` : ''}
 >
 
@@ -217,9 +218,9 @@
             target="_blank"
             rel="noopener noreferrer"
             class="button play-icon"
-          >Jouer</a>
+          >{t('play')}</a>
         {:else}
-          <button class="button" disabled>Coming soon</button>
+          <button class="button" disabled>{t('coming_soon')}</button>
         {/if}
       </div>
     {/if}

vite.config.js

@@ -43,7 +43,8 @@ export default defineConfig({
       '@state': path.resolve(__dirname, 'src/state'),
       '@router': path.resolve(__dirname, 'src/router'),
       '@utils': path.resolve(__dirname, 'src/utils'),
-      '@composables': path.resolve(__dirname, 'src/composables')
+      '@composables': path.resolve(__dirname, 'src/composables'),
+      '@i18n': path.resolve(__dirname, 'src/i18n')
     }
   },
   server: {