Fix: navigation sous-pages blog/white-papers + singleSlug

- App.svelte : flèches clavier bloquées sur sous-page (ArrowLeft → history.back())
- Blog/WhitePapers : reset de articleData/itemData après 1100ms (post-transition)
  pour éviter le flash pendant l'animation de changement de slide
- WhitePapers : singleSlug jamais resetté (pré-affiché à l'arrivée sur la slide)
- WhitePapers : $effect sur isActive pour replaceState + openItem si itemData null
- WhitePapers/Blog : handlePopState ignore les popstate hors de la page courante

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

site/blueprints/pages/white-paper.yml

@@ -0,0 +1,108 @@
+title: Livre blanc
+icon: file
+status:
+  draft:
+    label: Brouillon
+    text: Non visible
+  listed:
+    label: Publié
+    text: Visible publiquement
+tabs:
+  content:
+    label: Contenu
+    icon: text
+    columns:
+      main:
+        width: 2/3
+        sections:
+          header:
+            type: fields
+            fields:
+              intro:
+                label: Description courte
+                type: writer
+                nodes: false
+                marks:
+                  - bold
+                  - italic
+                  - link
+                maxlength: 200
+      sidebar:
+        width: 1/3
+        sections:
+          meta:
+            type: fields
+            fields:
+              published:
+                label: Date de publication
+                type: date
+                display: DD/MM/YYYY
+                required: true
+                default: today
+                translate: false
+              cover:
+                label: Image de couverture
+                type: files
+                layout: cards
+                max: 1
+                accept: image/*
+                translate: false
+                image:
+                  cover: true
+                  ratio: 3/4
+                uploads:
+                  template: image
+              downloadFile:
+                label: Fichier PDF
+                type: files
+                max: 1
+                accept: application/pdf
+                translate: false
+                help: Fichier téléchargé après soumission du formulaire
+  leads:
+    label: Contacts intéressés
+    icon: users
+    sections:
+      contactDatabase:
+        type: fields
+        fields:
+          contactDatabase:
+            label: Visiteurs ayant téléchargé
+            type: structure
+            translate: false
+            columns:
+              firstName:
+                label: Prénom
+                width: 1/4
+              lastName:
+                label: Nom
+                width: 1/4
+              email:
+                label: Email
+                width: 1/4
+              company:
+                label: Entreprise
+                width: 1/4
+              role:
+                label: Fonction
+              downloadedAt:
+                label: Date
+            fields:
+              firstName:
+                type: text
+                label: Prénom
+              lastName:
+                type: text
+                label: Nom
+              email:
+                type: email
+                label: Email
+              company:
+                type: text
+                label: Entreprise
+              role:
+                type: text
+                label: Fonction
+              downloadedAt:
+                type: text
+                label: Date

site/blueprints/pages/white-papers.yml

@@ -0,0 +1,43 @@
+title: Livres blancs
+icon: book
+status:
+  draft:
+    label: Brouillon
+    text: La page est accessible uniquement pour les éditeurs connectés
+  listed:
+    label: Public
+    text: La page est accessible par tout le monde
+tabs:
+  content:
+    label: Contenu
+    icon: text
+    sections:
+      content:
+        type: fields
+        fields:
+          intro:
+            type: writer
+            marks:
+              - bold
+              - italic
+              - green
+              - pixel
+              - underline
+              - strike
+              - clear
+              - link
+            nodes:
+              - heading
+            headings:
+              - 1
+            help: Section de texte centrée (optionnelle).
+      items:
+        label: Livres blancs
+        type: pages
+        layout: cards
+        sortBy: published desc
+        template: white-paper
+        image:
+          ratio: 3/4
+          cover: true
+        info: "{{ page.published.toDate('d/m/Y') }}"

site/blueprints/site.yml

@@ -1,85 +1,113 @@
 title: World Game
 
-columns:
-  - width: 1/2
-    sections:
-      navigation:
-        type: pages
-        label: Menu
-        help: Accédez aux pages et réordonnez-les
-        layout: list
-        size: small
-        sortable: true
-        create: false
-        status: listed
-
-  - width: 1/2
-    fields:
-      siteTitle:
-        label: Titre du site
-        type: text
-        translate: true
-      siteTagline:
-        label: Tagline
-        type: text
-        translate: true
-      siteDescription:
-        label: Description
-        type: textarea
-        translate: true
-      footerLogo:
-        label: Logo
-        type: files
-        layout: cards
-        max: 1
-        help: Utilisé en pied de page (page À propos, Blog et Article).
-
-  - width: 1/2
-    fields:
-      contactEmail:
-        label: Email
-        type: email
-        width: 1/2
-        translate: false
-      contactAddress:
-        label: Adresse
-        type: writer
-        buttons: false
-        nodes: false
-        width: 1/2
-        placeholder: 33 rue Jean Dupont
-      socialLinks:
-        label: Liens réseaux sociaux
-        type: structure
-        translate: false
-        fields:
-          label:
-            label: Nom
-            required: true
-            type: text
-            width: 1/3
-            placeholder: "Ex: LinkedIn, Instagram..."
-          url:
-            label: URL
-            required: true
-            type: url
-            width: 1/3
-          picto:
-            label: Icône SVG
-            type: textarea
-            width: 1/3
-            buttons: false
+tabs:
+  mainTab:
+    label: Principal
+    columns:
+      - width: 1/2
+        sections:
+          navigation:
+            type: pages
+            label: Menu
+            help: Accédez aux pages et réordonnez-les
+            layout: list
             size: small
-            help: Collez le code SVG de l'icône
+            sortable: true
+            create: false
+            status: listed
 
-  - width: 1/2
-    sections:
-      contact:
-        type: fields
+      - width: 1/2
         fields:
-          legalNotices:
-            label: Mentions légales (PDF)
+          siteTitle:
+            label: Titre du site
+            type: text
+            translate: true
+          siteTagline:
+            label: Tagline
+            type: text
+            translate: true
+          siteDescription:
+            label: Description
+            type: textarea
+            translate: true
+          footerLogo:
+            label: Logo
             type: files
+            layout: cards
             max: 1
-            accept: application/pdf
+            help: Utilisé en pied de page (page À propos, Blog et Article).
+
+      - width: 1/2
+        fields:
+          contactEmail:
+            label: Email
+            type: email
+            width: 1/2
             translate: false
+          contactAddress:
+            label: Adresse
+            type: writer
+            buttons: false
+            nodes: false
+            width: 1/2
+            placeholder: 33 rue Jean Dupont
+          socialLinks:
+            label: Liens réseaux sociaux
+            type: structure
+            translate: false
+            fields:
+              label:
+                label: Nom
+                required: true
+                type: text
+                width: 1/3
+                placeholder: "Ex: LinkedIn, Instagram..."
+              url:
+                label: URL
+                required: true
+                type: url
+                width: 1/3
+              picto:
+                label: Icône SVG
+                type: textarea
+                width: 1/3
+                buttons: false
+                size: small
+                help: Collez le code SVG de l'icône
+
+      - width: 1/2
+        sections:
+          contact:
+            type: fields
+            fields:
+              legalNotices:
+                label: Mentions légales (PDF)
+                type: files
+                max: 1
+                accept: application/pdf
+                translate: false
+  dataTab:
+    label: Données d'usage
+    icon: chart
+    fields:
+      contactDatabase:
+        label: Ont téléchargé un livre blanc
+        type: structure
+        fields:
+          firstName:
+            label: Prénom
+            type: text
+            required: true
+          lastName:
+            label: Nom
+            type: text
+            required: true
+          company:
+            label: Société
+            type: text
+          role:
+            label: Fonction
+            type: text
+          email:
+            type: email
+            required: true

site/config/config.php

@@ -11,4 +11,8 @@ return [
     ],
 
     'thumbs' => require __DIR__ . '/thumbs.php',
+
+    'routes' => [
+        require(__DIR__ . '/routes/download-white-paper.php')
+    ],
 ];

site/config/menu.php

@@ -29,7 +29,8 @@ return [
     'portfolio' => menuItem('portfolio', 'Portfolio','images', 'pages/portfolio'),
     'jouer'     => menuItem('jouer',     'Jouer',    'play',   'pages/jouer'),
     'a-propos'  => menuItem('a-propos',  'À propos', 'users',  'pages/a-propos'),
-    'blog'      => menuItem('blog',      'Blog',     'text',   'pages/blog'),
+    'blog'         => menuItem('blog',         'Blog',          'text', 'pages/blog'),
+    'white-papers' => menuItem('livres-blancs', 'Livres blancs', 'book', 'pages/livres-blancs'),
     '-',
     'users',
     'system',

site/config/routes/download-white-paper.php

@@ -0,0 +1,93 @@
+<?php
+
+function wpReject(int $code, string $message): void {
+    http_response_code($code);
+    header('Content-Type: application/json');
+    echo json_encode(['error' => $message]);
+    exit;
+}
+
+return [
+    'pattern' => ['(:any)/(:any)/download', 'en/(:any)/(:any)/download'],
+    'method'  => 'POST',
+    'action'  => function (string $parent, string $slug) {
+
+        $page = page($parent . '/' . $slug);
+        if (!$page || $page->intendedTemplate()->name() !== 'white-paper') {
+            wpReject(404, 'Not found');
+        }
+
+        $body = kirby()->request()->body()->toArray();
+
+        // ── Honeypot ──────────────────────────────────────────────
+        if (!empty($body['_hp'])) {
+            wpReject(400, 'Bad request');
+        }
+
+        // ── Rate limiting (5 req / hour / IP) ─────────────────────
+        $ip       = $_SERVER['HTTP_X_FORWARDED_FOR'] ?? $_SERVER['REMOTE_ADDR'] ?? 'unknown';
+        $cacheKey = 'wp-dl-' . md5($ip);
+        $cache    = kirby()->cache('pages');
+        $hits     = (int)($cache->get($cacheKey) ?? 0);
+        if ($hits >= 5) {
+            wpReject(429, 'Too many requests');
+        }
+        $cache->set($cacheKey, $hits + 1, 60); // TTL 60 min
+
+        // ── Validation des champs requis ──────────────────────────
+        $firstName = trim($body['firstName'] ?? '');
+        $lastName  = trim($body['lastName']  ?? '');
+        $email     = trim($body['email']     ?? '');
+
+        if ($firstName === '' || $lastName === '' || $email === '') {
+            wpReject(422, 'Missing required fields');
+        }
+
+        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+            wpReject(422, 'Invalid email');
+        }
+
+        // ── Stocker le lead dans contactDatabase ──────────────────
+        $company = trim($body['company'] ?? '');
+        $role    = trim($body['role']    ?? '');
+        $entries = $page->contactDatabase()->toStructure()->toArray();
+
+        $existingIndex = null;
+        foreach ($entries as $i => $entry) {
+            if (strtolower($entry['email'] ?? '') === strtolower($email)) {
+                $existingIndex = $i;
+                break;
+            }
+        }
+
+        if ($existingIndex !== null) {
+            // Contact déjà présent — on enrichit les champs vides uniquement
+            if ($company !== '' && empty($entries[$existingIndex]['company'])) {
+                $entries[$existingIndex]['company'] = $company;
+            }
+            if ($role !== '' && empty($entries[$existingIndex]['role'])) {
+                $entries[$existingIndex]['role'] = $role;
+            }
+        } else {
+            $entries[] = [
+                'firstName'    => $firstName,
+                'lastName'     => $lastName,
+                'email'        => $email,
+                'company'      => $company,
+                'role'         => $role,
+                'downloadedAt' => date('d/m/Y H:i'),
+            ];
+        }
+
+        kirby()->impersonate('kirby', function () use ($page, $entries) {
+            $page->update(['contactDatabase' => \Kirby\Data\Data::encode($entries, 'yaml')]);
+        });
+
+        header('Content-Type: application/json');
+        echo json_encode([
+            'success' => true,
+            'fileUrl' => $page->downloadFile()->toFile()?->url(),
+        ]);
+        exit;
+    }
+];

site/templates/white-paper.json.php

@@ -0,0 +1,13 @@
+<?php
+
+$specificData = [
+    'published'  => $page->published()->toDate('d/m/Y'),
+    'intro'      => $page->intro()->inline()->value(),
+    'cover'      => $page->cover()->toFile()?->url(),
+    'fileUrl'    => $page->downloadFile()->toFile()?->url(),
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);

site/templates/white-paper.php

@@ -0,0 +1,2 @@
+<?php snippet('header') ?>
+<?php snippet('footer') ?>

site/templates/white-papers.json.php

@@ -0,0 +1,26 @@
+<?php
+
+$items = $page->children()->listed()->sortBy('published', 'desc');
+
+$mapItem = function ($item) {
+    return [
+        'title'     => $item->title()->value(),
+        'slug'      => $item->slug(),
+        'published' => $item->published()->toDate('d/m/Y'),
+        'intro'     => $item->intro()->value(),
+        'cover'     => $item->cover()->toFile()?->url(),
+    ];
+};
+
+$singleSlug = $items->count() === 1 ? $items->first()->slug() : null;
+
+$specificData = [
+    'intro'      => $page->intro()->value(),
+    'items'      => $items->map($mapItem)->values(),
+    'singleSlug' => $singleSlug,
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);

site/templates/white-papers.php

@@ -0,0 +1,2 @@
+<?php snippet('header') ?>
+<?php snippet('footer') ?>

src/App.svelte

@@ -16,6 +16,7 @@
   import Game from '@views/Game.svelte'
   import Blog from '@views/Blog.svelte'
   import Article from '@views/Article.svelte'
+  import WhitePapers from '@views/WhitePapers.svelte'
   import Default from '@views/Default.svelte'
 
   const templates = {
@@ -28,6 +29,7 @@
     game: Game,
     blog: Blog,
     article: Article,
+    'white-papers': WhitePapers,
     default: Default
   }
 
@@ -56,10 +58,22 @@
     window.addEventListener('resize', handleResize)
 
     const handleKeydown = (e) => {
+      if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return
+
+      // Si on est sur une sous-page (ex: /livres-blancs/slug), ne pas changer de slide
+      const activePath = slides.active?.path ?? ''
+      const currentPath = window.location.pathname.replace(/^\/en/, '') || '/'
+      const isSubPage = activePath && currentPath.startsWith(activePath + '/')
+
+      if (isSubPage) {
+        if (e.key === 'ArrowLeft') history.back()
+        return
+      }
+
       if (e.key === 'ArrowRight') {
         const next = slides.all[slides.activeIndex + 1]
         if (next) slideTo(next.path)
-      } else if (e.key === 'ArrowLeft') {
+      } else {
         const prev = slides.all[slides.activeIndex - 1]
         if (prev) slideTo(prev.path)
       }

src/components/layout/Cursor.svelte

@@ -14,7 +14,7 @@
     }
 
     const handleMouseOver = (e) => {
-      onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
+      onTarget = !!e.target.closest('a, button:not([disabled]), [role="button"]:not([disabled]), [tabindex]')
     }
 
     const handleMouseOut = () => {

src/components/layout/Footer.svelte

@@ -124,7 +124,7 @@
     margin-left: -16.6vw;
   }
   
-  :global(.blog .page-scrollable-footer) {
+  :global(.collection .page-scrollable-footer) {
     margin-left: -12.4vw;
     margin-top: 5rem;
   }

src/i18n/index.js

@@ -47,6 +47,31 @@ const dict = {
   privacy: { fr: "Confidentialité", en: "Privacy" },
   // About
   our_team: { fr: "NOTRE ÉQUIPE", en: "OUR TEAM" },
+  // White Papers
+  white_paper_label: { fr: "LIVRE BLANC", en: "WHITE PAPER" },
+  read_wp: { fr: "Télécharger", en: "Download" },
+  wp_form_intro: {
+    fr: "Renseignez vos informations pour télécharger notre livre blanc.",
+    en: "Fill in your information to download our white paper.",
+  },
+  wp_firstname: { fr: "Prénom*", en: "First name*" },
+  wp_lastname: { fr: "Nom*", en: "Last name*" },
+  wp_company: { fr: "Société", en: "Company" },
+  wp_role: { fr: "Fonction", en: "Role" },
+  wp_email: { fr: "E-mail*", en: "E-mail*" },
+  wp_consent: {
+    fr: "En cochant cette case, j'accepte d'être recontacté par la société World Game. Mes données ne seront ni vendues, ni partagées.",
+    en: "By checking this box, I agree to be contacted by World Game. My data will not be sold or shared.",
+  },
+  wp_download: { fr: "TÉLÉCHARGER", en: "DOWNLOAD" },
+  wp_success: {
+    fr: "Votre demande a été enregistrée. Le téléchargement devrait démarrer.",
+    en: "Your request has been registered. The download should start.",
+  },
+  wp_error: {
+    fr: "Une erreur est survenue, veuillez réessayer.",
+    en: "An error occurred, please try again.",
+  },
   // Menu
   menu: { fr: "MENU", en: "MENU" },
   connect: { fr: "CONNECT", en: "CONNECT" },

src/styles/buttons.css

@@ -2,6 +2,10 @@ button {
   border: none;
 }
 
+button[disabled] {
+  cursor: none;
+}
+
 /* Button */
 .button {
   width: 14vmax;
@@ -26,7 +30,7 @@ button {
   outline: 2px solid #04fea0;
 }
 
-.button:hover {
+.button:not([disabled]):hover {
   background-color: initial;
   background-position: 0;
   outline: 2px solid #04fea0;
@@ -64,6 +68,5 @@ button {
 
 /* Clickable elements */
 .clickable {
-  cursor: pointer;
   user-select: none;
 }

src/styles/collection.css

@@ -0,0 +1,180 @@
+/* Shared styles for collection pages (Blog, WhitePapers) */
+
+/* --- Header / Intro --- */
+.collection-header {
+  text-align: center;
+  padding: 6rem 0 3rem;
+  max-width: 40rem;
+  margin: auto;
+}
+
+.collection-header h1 {
+  font-size: var(--font-size-title-main);
+  text-transform: uppercase;
+  margin-bottom: 2rem;
+}
+
+.collection-header p {
+  font-size: var(--font-size-subtitle);
+  font-weight: 400;
+}
+
+.collection-header :global(h1) {
+  font-family: "Terminal", sans-serif;
+  font-size: var(--font-size-title-main);
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+}
+
+.collection-header :global(p) {
+  font-size: var(--font-size-subtitle);
+  line-height: 1.6;
+  max-width: 640px;
+  margin: 0 auto;
+  opacity: 0.9;
+}
+
+/* --- Card --- */
+.collection-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+  padding: 1.5rem 0;
+}
+
+.collection-card-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 640px;
+}
+
+.collection-card-date {
+  color: #d9d9d9;
+  font-size: var(--font-size-paragraph);
+}
+
+.collection-card-title {
+  font-family: "Danzza", sans-serif;
+  font-size: 40px;
+  max-width: 80%;
+  font-weight: 700;
+}
+
+.collection-card-title a {
+  transition: color 0.2s;
+}
+
+.collection-card-title a:hover {
+  color: var(--color-primary);
+}
+
+.collection-card-description {
+  color: #d9d9d9;
+  font-family: "Danzza", sans-serif;
+  font-size: var(--font-size-paragraph);
+  font-weight: 400;
+}
+
+.collection-card-readmore {
+  color: var(--color-primary);
+  font-family: "Danzza", sans-serif;
+  font-size: var(--font-size-paragraph);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.collection-card-readmore .arrow {
+  margin-left: 5px;
+}
+
+/* --- Image --- */
+.collection-card-image img {
+  width: 300px;
+  height: 169px;
+  object-fit: cover;
+  transition: transform 0.3s;
+}
+
+.collection-card-image img:hover {
+  transform: scale(1.05);
+}
+
+.collection-card-image--featured img {
+  width: auto;
+  height: 300px;
+}
+
+/* --- Divider --- */
+.collection-divider {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  margin: 0;
+}
+
+/* --- Featured --- */
+.collection-card--featured .collection-card-title {
+  font-size: 36px;
+  line-height: 1.3;
+}
+
+/* --- Loading --- */
+.collection-loading {
+  text-align: center;
+  padding: 4rem 0;
+  opacity: 0.6;
+}
+
+/* --- Mobile --- */
+@media (max-width: 700px) {
+  .collection-header {
+    padding: 4rem 0 2rem;
+  }
+
+  .collection-header :global(h1) {
+    font-size: var(--font-size-title-main-mobile);
+  }
+
+  .collection-header :global(p) {
+    font-size: var(--font-size-subtitle-mobile);
+  }
+
+  .collection-card {
+    flex-direction: column;
+  }
+
+  .collection-card-image img,
+  .collection-card-image--featured img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+
+  .collection-card--featured .collection-card-title {
+    font-size: var(--font-size-title-section-mobile);
+  }
+
+  .collection-card-title {
+    font-size: var(--font-size-title-section-mobile);
+  }
+}
+
+/* --- Tablet --- */
+@media (min-width: 701px) and (max-width: 912px) {
+  .collection-header :global(h1) {
+    font-size: var(--font-size-title-main-tablet);
+  }
+
+  .collection-card {
+    flex-direction: column;
+  }
+
+  .collection-card-image img,
+  .collection-card-image--featured img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+}

src/styles/fonts.css

@@ -65,3 +65,7 @@
   background-clip: text;
   -webkit-background-clip: text;
 }
+
+.pixel {
+  font-family: "Terminal", sans-serif;
+}

src/styles/index.css

@@ -3,6 +3,7 @@
 @import './reset.css';
 @import './fonts.css';
 @import './layout.css';
+@import './collection.css';
 @import './buttons.css';
 @import './cursor.css';
 @import './utils.css';

src/views/Blog.svelte

@@ -95,10 +95,11 @@
     }
   })
 
-  // Reset article view when leaving the blog slide
+  // Reset après la fin de la transition de slide (1100ms) pour éviter le flash
   $effect(() => {
     if (!isActive && articleData) {
-      articleData = null
+      const timer = setTimeout(() => { articleData = null }, 1100)
+      return () => clearTimeout(timer)
     }
   })
 </script>
@@ -106,7 +107,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <section
-  class="blog page-scrollable"
+  class="collection blog page-scrollable"
   class:golden-grid={!!articleData}
   bind:this={sectionEl}
   onclick={handleClick}
@@ -119,49 +120,49 @@
     <div class="page-container">
 
       {#if data?.intro}
-        <header class="blog-header">
+        <header class="collection-header">
           {@html data.intro}
         </header>
       {/if}
 
       {#if featured}
-        <article class="blog-card blog-card--featured">
-          <div class="blog-card-text">
-            <time class="blog-card-date">{featured.published}</time>
-            <h2 class="blog-card-title">
+        <article class="collection-card collection-card--featured">
+          <div class="collection-card-text">
+            <time class="collection-card-date">{featured.published}</time>
+            <h2 class="collection-card-title">
               <a href="/blog/{featured.slug}">{featured.title}</a>
             </h2>
             {#if featured.intro}
-              <p class="blog-card-description">{featured.intro}</p>
+              <p class="collection-card-description">{featured.intro}</p>
             {/if}
-            <a href="/blog/{featured.slug}" class="blog-card-readmore">
+            <a href="/blog/{featured.slug}" class="collection-card-readmore">
               {t('read_article')} <span class="arrow">→</span>
             </a>
           </div>
           {#if featured.cover}
-            <div class="blog-card-image blog-card-image--featured">
+            <div class="collection-card-image collection-card-image--featured">
               <a href="/blog/{featured.slug}">
                 <img src={featured.cover} alt={featured.title} />
               </a>
             </div>
           {/if}
         </article>
-        <hr class="blog-divider" />
+        <hr class="collection-divider" />
       {/if}
 
       {#each articles as article, i}
-        <article class="blog-card">
-          <div class="blog-card-text">
-            <time class="blog-card-date">{article.date}</time>
-            <h2 class="blog-card-title">
+        <article class="collection-card">
+          <div class="collection-card-text">
+            <time class="collection-card-date">{article.date}</time>
+            <h2 class="collection-card-title">
               <a href="/blog/{article.slug}">{article.title}</a>
             </h2>
-            <a href="/blog/{article.slug}" class="blog-card-readmore">
+            <a href="/blog/{article.slug}" class="collection-card-readmore">
               {t('read_article')} <span class="arrow">→</span>
             </a>
           </div>
           {#if article.cover}
-            <div class="blog-card-image">
+            <div class="collection-card-image">
               <a href="/blog/{article.slug}">
                 <img src={article.cover} alt={article.title} />
               </a>
@@ -169,12 +170,12 @@
           {/if}
         </article>
         {#if i < articles.length - 1}
-          <hr class="blog-divider" />
+          <hr class="collection-divider" />
         {/if}
       {/each}
 
       {#if articleLoading}
-        <p class="blog-loading">{t('loading')}</p>
+        <p class="collection-loading">{t('loading')}</p>
       {/if}
 
       <Footer />
@@ -189,178 +190,18 @@
     padding: 0 50px;
   }
 
-  /* --- Header / Intro --- */
-  .blog-header {
-    text-align: center;
-    padding: 6rem 0 3rem;
-  }
-
-  .blog-header :global(h1) {
-    font-family: "Terminal", sans-serif;
-    font-size: var(--font-size-title-main);
-    text-transform: uppercase;
-    margin-bottom: 1.5rem;
-  }
-
-  .blog-header :global(p) {
-    font-size: var(--font-size-subtitle);
-    line-height: 1.6;
-    max-width: 640px;
-    margin: 0 auto;
-    opacity: 0.9;
-  }
-
   .page-container {
     max-width: none;
     padding: 0 10%;
   }
 
-  /* --- Card (article item) --- */
-  .blog-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 2rem;
-    padding: 1.5rem 0;
-  }
-
-  .blog-card-text {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-width: 640px;
-  }
-
-  .blog-card-date {
-    color: #d9d9d9;
-    font-size: var(--font-size-paragraph);
-  }
-
-  .blog-card-title {
-    font-family: "Danzza", sans-serif;
-    font-size: 40px;
-    max-width: 80%;
-    font-weight: 700;
-  }
-
-  .blog-card-title a {
-    transition: color 0.2s;
-  }
-
-  .blog-card-title a:hover {
-    color: var(--color-primary);
-  }
-
-  .blog-card-description {
-    color: #d9d9d9;
-    font-family: "Danzza",sans-serif;
-    font-size: var(--font-size-paragraph);
-    font-weight: 400;
-  }
-
-  .blog-card-readmore {
-    color: var(--color-primary);
-    font-family: "Danzza", sans-serif;
-    font-size: var(--font-size-paragraph);
-    font-weight: 500;
-    text-transform: uppercase;
-  }
-
-  .blog-card-readmore .arrow {
-    margin-left: 5px;
-  }
-
-  .blog-card-readmore:hover {
+  .collection-card-readmore:hover {
     gap: 1rem;
   }
 
-  /* --- Image --- */
-  .blog-card-image img {
-    width: 300px;
-    height: 169px;
-    object-fit: cover;
-    transition: transform 0.3s;
-  }
-
-  .blog-card-image img:hover {
-    transform: scale(1.05);
-  }
-
-  .blog-card-image--featured img {
-    width: auto;
-    height: 300px;
-  }
-
-  /* --- Divider --- */
-  .blog-divider {
-    border: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.15);
-    margin: 0;
-  }
-
-  /* --- Featured --- */
-  .blog-card--featured .blog-card-title {
-    font-size: 36px;
-    line-height: 1.3;
-  }
-
-  /* --- Loading --- */
-  .blog-loading {
-    text-align: center;
-    padding: 4rem 0;
-    opacity: 0.6;
-  }
-
-  /* --- Mobile --- */
   @media (max-width: 700px) {
-    .blog-header {
-      padding: 4rem 0 2rem;
-    }
-
-    .blog-header :global(h1) {
-      font-size: var(--font-size-title-main-mobile);
-    }
-
-    .blog-header :global(p) {
-      font-size: var(--font-size-subtitle-mobile);
-    }
-
-    .blog-card {
-      flex-direction: column;
-    }
-
-    .blog-card-image img,
-    .blog-card-image--featured img {
-      width: 100%;
-      height: auto;
-      aspect-ratio: 16/9;
-    }
-
-    .blog-card--featured .blog-card-title {
-      font-size: var(--font-size-title-section-mobile);
-    }
-
-    .blog-card-title {
-      font-size: var(--font-size-title-section-mobile);
-    }
-  }
-
-  /* --- Tablet --- */
-  @media (min-width: 701px) and (max-width: 912px) {
-    .blog-header :global(h1) {
-      font-size: var(--font-size-title-main-tablet);
-    }
-
-    .blog-card {
-      flex-direction: column;
-    }
-
-    .blog-card-image img,
-    .blog-card-image--featured img {
-      width: 100%;
-      height: auto;
-      aspect-ratio: 16/9;
+    .blog {
+      padding: 0 1.25rem;
     }
   }
 </style>

src/views/WhitePaper.svelte

@@ -0,0 +1,437 @@
+<script>
+  import { locale } from '@state/locale.svelte'
+  import { t } from '@i18n'
+
+  let { data, onBack } = $props()
+
+  let firstName  = $state('')
+  let lastName   = $state('')
+  let company    = $state('')
+  let role       = $state('')
+  let email      = $state('')
+  let consent    = $state(false)
+  let submitting = $state(false)
+  let status     = $state(null) // null | 'success' | 'error'
+  let showForm      = $state(false)
+  let honeypot = $state('')
+
+  let isEmailValid = $derived.by(() => {
+    const emailValidator = /^[\w\-\.]+@([\w-]+\.)+[\w-]{2,}$/gm
+    return emailValidator.test(email)
+  })
+  
+  let isDownloadable = $derived.by(() => {
+    return firstName.length > 0 && lastName.length > 0 && email.length > 0 && isEmailValid && consent
+  })
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    if (!consent) return
+    submitting = true
+    status = null
+    try {
+      const prefix = locale.current === 'en' ? '/en' : ''
+      const res = await fetch(`${prefix}/${data.uri}/download`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ firstName, lastName, company, role, email, _hp: honeypot })
+      })
+      const result = await res.json()
+      if (result.fileUrl) {
+        window.open(result.fileUrl, '_blank')
+        status = 'success'
+      } else {
+        status = 'error'
+      }
+    } catch {
+      status = 'error'
+    } finally {
+      submitting = false
+    }
+  }
+</script>
+
+<div class="white-paper">
+  <div class="catch-area">
+    <!-- Label — separate so form can align with title -->
+    <p class="label">{t('white_paper_label')}</p>
+
+    <!-- Title + description + mobile trigger -->
+    <div class="text">
+      <h1 class="title">{data.title}</h1>
+      {#if data.intro}
+        <p class="description">{data.intro}</p>
+      {/if}
+      <button class="trigger button" onclick={() => showForm = true}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
+          <path d="M5 20H19V18H5V20Z" fill="currentColor"/>
+        </svg>
+        {t('wp_download')}
+      </button>
+    </div>
+  </div>
+
+  <!-- Cover image -->
+  {#if data.cover}
+    <img src={data.cover} alt={data.title} class="cover" />
+  {/if}
+
+  <!-- Form area: right column on desktop, full-screen overlay on mobile -->
+  <div class="form-area" class:is-visible={showForm}>
+    <button class="form-close" onclick={() => showForm = false} aria-label="Fermer">✕</button>
+    <div class="form-card">
+      <p class="form-intro">{t('wp_form_intro')}</p>
+      <form class="form" onsubmit={handleSubmit}>
+        <div class="form-row">
+          <input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
+          <input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
+        </div>
+        <input class="input" type="text" placeholder={t('wp_company')} bind:value={company} />
+        <input class="input" type="text" placeholder={t('wp_role')} bind:value={role} />
+        <input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
+
+        <div class="hp" aria-hidden="true">
+          <label for="website">Website</label>
+          <input id="website" type="text" name="website" tabindex="-1" autocomplete="off" bind:value={honeypot} />
+        </div>
+
+        <label class="consent">
+          <input type="checkbox" bind:checked={consent} required />
+          <span>{t('wp_consent')}</span>
+        </label>
+
+        {#if status === 'success'}
+          <p class="status status--success">{t('wp_success')}</p>
+        {:else if status === 'error'}
+          <p class="status status--error">{t('wp_error')}</p>
+        {/if}
+
+        <button type="submit" class="submit button" disabled={submitting || !isDownloadable}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
+            <path d="M5 20H19V18H5V20Z" fill="currentColor"/>
+          </svg>
+          {t('wp_download')}
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<style>
+  .white-paper {
+    color: var(--color-text);
+    padding: 8rem 5rem;
+    display: flex;
+    column-gap: 5rem;
+  }
+
+  .catch-area {
+    width: min(100%, 45vw);
+  }
+
+  .label {
+    margin-bottom: 1rem;
+    align-self: end;
+    font-family: "Terminal", sans-serif;
+    font-size: var(--font-size-paragraph);
+    color: var(--color-primary);
+    text-transform: uppercase;
+    z-index: 1;
+  }
+
+  /* ── Title + description + mobile trigger ── */
+  .text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+    z-index: 1;
+  }
+
+  .title {
+    font-family: "Danzza bold", sans-serif;
+    font-size: var(--font-size-title-main);
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.1;
+  }
+
+  .description {
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph);
+    opacity: 0.8;
+    max-width: 90%;
+  }
+
+  /* Mobile trigger: hidden on desktop */
+  .trigger {
+    display: none;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .cover {
+    align-self: start;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* ── Form area: desktop — right column ── */
+  .form-area {
+    margin-top: 2rem;
+    width: min(100%, 30vw);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    z-index: 2;
+  }
+
+  /* Close button: hidden on desktop */
+  .form-close {
+    display: none;
+  }
+
+  .form-card {
+    background: #0b0b18;
+    border-radius: 4px;
+    padding: 2.5rem;
+    width: 100%;
+  }
+
+  .form-intro {
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph);
+    line-height: 1.5;
+    color: #fff;
+    margin-bottom: 2rem;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .input {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    color: #fff;
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph);
+    padding: 0.875rem 1rem;
+    width: 100%;
+    transition: border-color 0.2s;
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+  }
+
+  .input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .hp {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .consent {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    cursor: pointer;
+    margin-top: 0.5rem;
+  }
+
+  .consent input[type="checkbox"] {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    margin-top: 2px;
+    accent-color: var(--color-primary);
+    cursor: pointer;
+  }
+
+  .consent span {
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph-small);
+    color: rgba(255, 255, 255, 0.75);
+    line-height: 1.4;
+  }
+
+  .submit {
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .submit:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .status {
+    padding: 0.5rem 0.75rem;
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph-small);
+    border-radius: 2px;
+  }
+
+  .status--success {
+    background: rgba(4, 254, 160, 0.15);
+    color: var(--color-primary);
+  }
+
+  .status--error {
+    background: rgba(255, 107, 107, 0.15);
+    color: #ff6b6b;
+  }
+
+  /* ── Mobile ── */
+  @media (max-width: 700px) {
+    .white-paper {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+      padding: 6vh 1.25rem 0;
+      position: relative;
+    }
+
+    .label {
+      font-size: var(--font-size-paragraph-small);
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+
+    .text {
+      flex: 1;
+      align-items: center;
+      text-align: center;
+      gap: 1rem;
+      overflow: hidden;
+    }
+
+    .title {
+      font-size: clamp(2rem, 10vw, 3.5rem);
+    }
+
+    .description {
+      max-width: 100%;
+      font-size: var(--font-size-paragraph-small);
+    }
+
+    .trigger {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      margin-top: auto;
+    }
+
+    .cover {
+      position: absolute;
+      bottom: -10%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 75%;
+      max-width: 300px;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    /* Form overlay */
+    .form-area {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      background: #0b0b18;
+      flex-direction: column;
+      padding: 1.5rem 1.25rem;
+      overflow-y: auto;
+    }
+
+    .form-area.is-visible {
+      display: flex;
+    }
+
+    .form-close {
+      display: block;
+      align-self: flex-end;
+      background: none;
+      border: none;
+      color: #fff;
+      font-size: 1.25rem;
+      cursor: pointer;
+      padding: 0.25rem 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .form-card {
+      background: none;
+      padding: 0;
+      flex: 1;
+    }
+
+    .submit {
+      margin-top: auto;
+    }
+  }
+
+  /* ── Tablet ── */
+  @media (min-width: 701px) and (max-width: 912px) {
+    .white-paper {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 1fr;
+      height: 100vh;
+      padding: 6vh 2rem 2rem;
+      gap: 1rem 2rem;
+    }
+
+    .label {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .text {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .cover {
+      display: none;
+    }
+
+    .form-area {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+      align-items: flex-start;
+    }
+
+    .trigger {
+      display: none;
+    }
+  }
+</style>

src/views/WhitePapers.svelte

@@ -0,0 +1,179 @@
+<script>
+  import { onMount } from 'svelte'
+  import { slides } from '@state/slides.svelte'
+  import { locale } from '@state/locale.svelte'
+  import WhitePaper from '@views/WhitePaper.svelte'
+  import { t } from '@i18n'
+  import Footer from '@components/layout/Footer.svelte'
+
+  let { data } = $props()
+
+  const isActive = $derived(slides.active?.id === data?.uri)
+  const items    = $derived(data?.items ?? [])
+  const pageUri  = $derived(data?.uri ?? 'white-papers') // ex: "livres-blancs"
+
+  let itemData = $state(null)
+  let itemLoading = $state(false)
+  let sectionEl = $state(null)
+
+  function getSlugFromUrl() {
+    const parts = window.location.pathname.replace(/^\/en/, '').split('/').filter(Boolean)
+    return parts.length >= 2 && parts[0] === pageUri ? parts[1] : null
+  }
+
+  async function openItem(slug) {
+    itemLoading = true
+    try {
+      const prefix = locale.current === 'en' ? '/en' : ''
+      const res = await fetch(`${prefix}/${pageUri}/${slug}.json`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      itemData = await res.json()
+      sectionEl?.scrollTo(0, 0)
+    } catch (e) {
+      console.error(`[${pageUri}] Failed to load:`, e)
+      itemData = null
+    } finally {
+      itemLoading = false
+    }
+  }
+
+  function backToList() {
+    itemData = null
+    const prefix = locale.current === 'en' ? '/en' : ''
+    history.pushState({}, '', `${prefix}/${pageUri}`)
+    document.title = `${data?.title ?? pageUri} — World Game`
+    sectionEl?.scrollTo(0, 0)
+  }
+
+  function handleClick(e) {
+    const link = e.target.closest('a[href]')
+    if (!link) return
+    const url = new URL(link.href, window.location.origin)
+    if (url.origin !== window.location.origin) return
+    const match = url.pathname.match(new RegExp(`^(?:/en)?/${pageUri}/([^/]+)$`))
+    if (match) {
+      e.preventDefault()
+      e.stopPropagation()
+      const slug = match[1]
+      const prefix = locale.current === 'en' ? '/en' : ''
+      history.pushState({}, '', `${prefix}/${pageUri}/${slug}`)
+      openItem(slug)
+    }
+  }
+
+  function handlePopState() {
+    if (!isActive) return
+    // Si l'URL n'appartient plus à ce slide, le router gère — on ne touche à rien
+    const onThisPage = window.location.pathname.replace(/^\/en/, '').startsWith(`/${pageUri}`)
+    if (!onThisPage) return
+    const slug = getSlugFromUrl()
+    if (slug && (!itemData || itemData.uri !== `${pageUri}/${slug}`)) {
+      openItem(slug)
+    } else if (!slug && itemData) {
+      itemData = null
+      sectionEl?.scrollTo(0, 0)
+    }
+  }
+
+  onMount(() => {
+    const slug = getSlugFromUrl() ?? (data?.singleSlug ?? null)
+    if (slug) openItem(slug)
+
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  })
+
+  // Quand le slide devient actif avec un seul livre blanc :
+  // - remplace l'URL /parent par /parent/slug (back saute le parent)
+  // - ré-ouvre l'item si itemData a été vidé
+  $effect(() => {
+    if (isActive && data?.singleSlug) {
+      if (!getSlugFromUrl()) {
+        const prefix = locale.current === 'en' ? '/en' : ''
+        history.replaceState({}, '', `${prefix}/${pageUri}/${data.singleSlug}`)
+      }
+      if (!itemData) openItem(data.singleSlug)
+    }
+  })
+
+  // Reset après la fin de la transition de slide (1100ms) pour éviter le flash
+  // Pas de reset pour singleSlug : le contenu reste en mémoire et est pré-affiché à l'arrivée
+  $effect(() => {
+    if (!isActive && itemData && !data?.singleSlug) {
+      const timer = setTimeout(() => { itemData = null }, 1100)
+      return () => clearTimeout(timer)
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<section
+  class="collection white-papers page-scrollable"
+  bind:this={sectionEl}
+  onclick={handleClick}
+>
+  {#if itemData}
+    <WhitePaper data={itemData} onBack={backToList} />
+  {:else}
+    <div class="page-container">
+
+      {#if data?.intro}
+        <header class="collection-header">
+          {@html data.intro}
+        </header>
+      {/if}
+
+      {#each items as item, i}
+        <article class="collection-card">
+          <div class="collection-card-text">
+            <time class="collection-card-date">{item.published}</time>
+            <h2 class="collection-card-title">
+              <a href="/{pageUri}/{item.slug}">{item.title}</a>
+            </h2>
+            {#if item.intro}
+              <p class="collection-card-description">{item.intro}</p>
+            {/if}
+            <a href="/{pageUri}/{item.slug}" class="collection-card-readmore">
+              {t('read_wp')} <span class="arrow">→</span>
+            </a>
+          </div>
+          {#if item.cover}
+            <div class="collection-card-image">
+              <a href="/{pageUri}/{item.slug}">
+                <img src={item.cover} alt={item.title} />
+              </a>
+            </div>
+          {/if}
+        </article>
+        {#if i < items.length - 1}
+          <hr class="collection-divider" />
+        {/if}
+      {/each}
+
+      {#if itemLoading}
+        <p class="collection-loading">{t('loading')}</p>
+      {/if}
+
+      <Footer class="page-scrollable-footer" />
+    </div>
+  {/if}
+</section>
+
+<style>
+  .white-papers {
+    color: var(--color-text);
+    padding: 0 50px;
+  }
+
+  .page-container {
+    max-width: none;
+    padding: 0 10%;
+  }
+
+  @media (max-width: 700px) {
+    .white-papers {
+      padding: 0 1.25rem;
+    }
+  }
+</style>