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/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>