From 0233a6a4a4de2069559808924c8d9b242825b370 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 11 Mar 2026 10:57:52 +0100
Subject: [PATCH] =?UTF-8?q?Feat:=20footer=20s=C3=A9mantique=20dans=20Blog,?=
 =?UTF-8?q?=20About=20et=20Article?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refonte complète du Footer (sémantique propre, données dynamiques depuis
le store site, bouton subscribe avec l'animation .button partagée).
Intégré dans About, Blog et Article. Scroll-to-top au départ de About et Blog.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/layout/Footer.svelte | 348 ++++++++++++++++++++++++----
 src/views/About.svelte              |  23 +-
 src/views/Article.svelte            |   4 +
 src/views/Blog.svelte               |   4 +
 4 files changed, 335 insertions(+), 44 deletions(-)

diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index 8acc8cb..469d241 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -1,73 +1,341 @@
 <script>
   import { site } from '@state/site.svelte'
 
-  const siteTitle = $derived(site.title || 'World Game')
-  const currentYear = $derived(new Date().getFullYear())
+  const logo    = $derived(site.logo)
+  const title   = $derived(site.title || 'World Game')
+  const contact = $derived(site.contact || {})
+  const socials = $derived(contact.socials ?? [])
+  const year    = new Date().getFullYear()
+
+  let email  = $state('')
+  let status = $state(null)
+
+  async function handleSubscribe(e) {
+    e.preventDefault()
+    if (!email) return
+    try {
+      const res = await fetch('/newsletter.json', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email })
+      })
+      if (res.ok) {
+        status = { type: 'success', message: 'Merci pour votre inscription !' }
+        email = ''
+      } else {
+        status = { type: 'error', message: 'Une erreur est survenue.' }
+      }
+    } catch {
+      status = { type: 'error', message: 'Une erreur est survenue.' }
+    }
+  }
 </script>
 
-<footer class="footer">
-  <div class="footer__container">
-    <div class="footer__brand">
-      <p class="footer__title">{siteTitle}</p>
-      <p class="footer__tagline">Play to Engage</p>
+<footer class="site-footer">
+  <div class="footer-main">
+
+    <!-- Logo -->
+    {#if logo}
+      <div class="footer-brand">
+        <img src={logo} alt={title} />
+      </div>
+    {/if}
+
+    <!-- Location -->
+    {#if contact.address}
+      <div class="footer-col">
+        <h3>Location</h3>
+        <address>{@html contact.address}</address>
+      </div>
+    {/if}
+
+    <!-- Contact -->
+    {#if contact.email}
+      <div class="footer-col">
+        <h3>Contact</h3>
+        <a href="mailto:{contact.email}">{contact.email}</a>
+      </div>
+    {/if}
+
+    <!-- Follow us -->
+    {#if socials.length > 0}
+      <div class="footer-col">
+        <h3>Follow us</h3>
+        <ul class="footer-socials" role="list">
+          {#each socials as social}
+            <li>
+              <a href={social.url} target="_blank" rel="noopener noreferrer" aria-label={social.label}>
+                {#if social.picto}
+                  {@html social.picto}
+                {:else}
+                  {social.label}
+                {/if}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+
+    <!-- Newsletter -->
+    <div class="footer-newsletter">
+      <h3>Subscribe to our newsletters!</h3>
+      <form class="footer-newsletter-form" onsubmit={handleSubscribe}>
+        <input
+          class="footer-newsletter-input"
+          type="email"
+          placeholder="Enter your email"
+          bind:value={email}
+          required
+        />
+        <button type="submit" class="button">Subscribe</button>
+      </form>
+      {#if status}
+        <p class="footer-newsletter-status footer-newsletter-status--{status.type}">
+          {status.message}
+        </p>
+      {/if}
     </div>
 
-    <div class="footer__copyright">
-      <p>&copy; {currentYear} {siteTitle}. Tous droits réservés.</p>
-    </div>
+  </div>
+
+  <!-- Copyright bar -->
+  <div class="footer-bottom">
+    <p>World Game &copy; {year}. All rights reserved.</p>
+    <div class="footer-divider" aria-hidden="true"></div>
+    <a href="/cookies">Cookies preferences</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>
+    {:else}
+      <a href="/privacy">Privacy</a>
+    {/if}
   </div>
 </footer>
 
 <style>
-  .footer {
-    background: #000;
-    color: #fff;
-    padding: 3rem 2rem 2rem;
-    margin-top: auto;
+  .site-footer {
+    width: 100vw;
+    background: #0d0e22;
   }
 
-  .footer__container {
-    max-width: 1400px;
-    margin: 0 auto;
+  /* --- Main row --- */
+  .footer-main {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    gap: 2rem;
+    justify-content: space-between;
+    padding: 24px 45px;
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
   }
 
-  .footer__brand {
-    flex: 1;
+  /* --- Brand --- */
+  .footer-brand img {
+    height: 40px;
+    width: auto;
   }
 
-  .footer__title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin: 0 0 0.5rem;
+  /* --- Info columns --- */
+  .footer-col {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 136px;
   }
 
-  .footer__tagline {
-    color: #04fea0;
-    margin: 0;
-    font-size: 0.9rem;
+  .footer-col h3 {
+    color: #fff;
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph);
+    font-weight: 500;
+    text-transform: uppercase;
+    line-height: 16px;
   }
 
-  .footer__copyright {
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.6);
+  .footer-col address,
+  .footer-col address a,
+  .footer-col a {
+    color: #4dfca1;
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph-small);
+    font-style: normal;
+    line-height: 20px;
+    text-decoration: none;
   }
 
-  .footer__copyright p {
-    margin: 0;
+  /* --- Socials --- */
+  .footer-socials {
+    display: flex;
+    gap: 24px;
+    list-style: none;
   }
 
-  @media (max-width: 768px) {
-    .footer__container {
+  .footer-socials a {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .footer-socials :global(svg),
+  .footer-socials img {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* --- Newsletter --- */
+  .footer-newsletter {
+    width: 493px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .footer-newsletter h3 {
+    color: #fff;
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph);
+    font-weight: 500;
+    text-transform: uppercase;
+    line-height: 16px;
+  }
+
+  .footer-newsletter-form {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .footer-newsletter-input {
+    width: 315px;
+    height: 45px;
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid #fff;
+    color: #fff;
+    font-size: 16px;
+    font-family: "Danzza", sans-serif;
+  }
+
+  .footer-newsletter-input::placeholder {
+    opacity: 0.7;
+    color: #fff;
+  }
+
+  /* Override .button width for footer context */
+  .footer-newsletter-form :global(.button) {
+    width: auto;
+    min-width: unset;
+    position: static;
+    height: 45px;
+  }
+
+  .footer-newsletter-status {
+    padding: 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .footer-newsletter-status--success {
+    background: #4dfca1;
+    color: #1e1938;
+  }
+
+  .footer-newsletter-status--error {
+    background: #ff6b6b;
+    color: #fff;
+  }
+
+  /* --- Copyright bar --- */
+  .footer-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    padding: 24px 45px;
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
+  }
+
+  .footer-bottom p,
+  .footer-bottom a {
+    color: #fff;
+    font-family: "Danzza", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+
+  .footer-divider {
+    width: 1px;
+    height: 24px;
+    background: #4dfca1;
+  }
+
+  /* --- Mobile (≤700px) --- */
+  @media (max-width: 700px) {
+    .footer-main {
       flex-direction: column;
-      text-align: center;
+      align-items: flex-start;
+      gap: 20px;
+      padding: 16px 20px;
     }
 
-    .footer__copyright {
-      order: 2;
+    .footer-newsletter {
+      width: 100%;
+    }
+
+    .footer-newsletter-input {
+      width: 100%;
+      flex-grow: 1;
+    }
+
+    .footer-newsletter-form :global(.button) {
+      width: 100%;
+      margin-top: 10px;
+    }
+
+    .footer-bottom {
+      flex-direction: column;
+      gap: 16px;
+      text-align: center;
+      padding: 16px 20px;
+    }
+
+    .footer-divider {
+      width: 100%;
+      height: 1px;
+    }
+  }
+
+  /* --- Tablet (701px–912px) --- */
+  @media (min-width: 701px) and (max-width: 912px) {
+    .footer-main {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 20px;
+      padding: 20px 30px;
+    }
+
+    .footer-newsletter {
+      width: 100%;
+    }
+
+    .footer-newsletter-input {
+      width: 60%;
+    }
+
+    .footer-bottom {
+      flex-direction: column;
+      gap: 16px;
+      text-align: center;
+      padding: 20px 30px;
+    }
+
+    .footer-divider {
+      width: 100%;
+      height: 1px;
     }
   }
 </style>
diff --git a/src/views/About.svelte b/src/views/About.svelte
index 7c73419..d946232 100644
--- a/src/views/About.svelte
+++ b/src/views/About.svelte
@@ -1,15 +1,24 @@
 <script>
   import { fade } from 'svelte/transition'
+  import { slides } from '@state/slides.svelte'
+  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
-  const intro = $derived(data?.intro || {})
-  const mission = $derived(data?.mission || {})
+  const intro     = $derived(data?.intro || {})
+  const mission   = $derived(data?.mission || {})
   const manifesto = $derived(data?.manifesto || {})
-  const team = $derived(data?.team || {})
+  const team      = $derived(data?.team || {})
+  const isActive  = $derived(slides.active?.id === 'about')
+
+  let sectionEl = $state(null)
+
+  $effect(() => {
+    if (!isActive) sectionEl?.scrollTo(0, 0)
+  })
 </script>
 
-<div class="about" transition:fade>
+<div class="about page-scrollable" bind:this={sectionEl} transition:fade>
   <section class="about__intro">
     <h1>{intro.title || data?.title}</h1>
     {#if intro.text}
@@ -61,6 +70,8 @@
       </div>
     </section>
   {/if}
+
+  <Footer />
 </div>
 
 <style>
@@ -165,6 +176,10 @@
     opacity: 0.8;
   }
 
+  .about :global(.site-footer) {
+    margin-left: -2rem;
+  }
+
   @media (max-width: 768px) {
     .about {
       padding: 6rem 1rem 3rem;
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 51226cb..f61bc81 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -3,6 +3,8 @@
    * Vue article — sous-composant de Blog.svelte.
    * Reçoit les données article via props, pas via le slide system.
    */
+  import Footer from '@components/layout/Footer.svelte'
+
   let { data, onBack } = $props()
 
   let copySuccess = $state(false)
@@ -111,6 +113,8 @@
 
 </article>
 
+<Footer />
+
 <style>
   .article {
     grid-area: 6 / 1 / span 10 / span 20;
diff --git a/src/views/Blog.svelte b/src/views/Blog.svelte
index 83603ba..5b03889 100644
--- a/src/views/Blog.svelte
+++ b/src/views/Blog.svelte
@@ -307,6 +307,10 @@
     opacity: 0.6;
   }
 
+  .blog :global(.site-footer) {
+    margin-left: -50px;
+  }
+
   /* --- Mobile --- */
   @media (max-width: 700px) {
     .blog-header {