From c6fa61c77bfdd937ba2e11bf770649ae0de854da Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 18 Mar 2026 12:14:59 +0100
Subject: [PATCH] =?UTF-8?q?Feat:=20footer=20reveal=20=E2=80=94=20page-scro?=
 =?UTF-8?q?llable-footer=20int=C3=A9gr=C3=A9=20aux=20vues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Footer renommé page-scrollable-footer, positionné en dernier enfant
  de .page-container dans About, Blog et Article
- Marges négatives pour aligner le footer pleine largeur (about / blog)
- Retrait du footer global fixe de App.svelte

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.svelte                      |  3 ---
 src/components/layout/Footer.svelte | 17 ++++++++++-------
 src/styles/layout.css               |  5 -----
 src/views/About.svelte              |  6 ++++--
 src/views/Article.svelte            |  2 ++
 src/views/Blog.svelte               |  2 ++
 6 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 999e4e7..daa35b0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,7 +7,6 @@
   import Cursor from '@components/layout/Cursor.svelte'
   import LanguageSwitcher from '@components/ui/LanguageSwitcher.svelte'
 
-  import Footer from '@components/layout/Footer.svelte'
   import Home from '@views/Home.svelte'
   import About from '@views/About.svelte'
   import Expertise from '@views/Expertise.svelte'
@@ -96,7 +95,6 @@
     {/each}
   </div>
 </main>
-<Footer />
 <LanguageSwitcher />
 
 <style>
@@ -129,7 +127,6 @@
 
   .main {
     position: relative;
-    z-index: 1;
     overflow: hidden;
     height: 100vh;
   }
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index 5cc29be..1858b61 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -32,7 +32,7 @@
   }
 </script>
 
-<footer class="site-footer">
+<footer class="page-scrollable-footer">
   <div class="footer-main">
 
     <!-- Logo -->
@@ -115,14 +115,17 @@
 </footer>
 
 <style>
-  .site-footer {
+  footer {
     width: 100vw;
     background: #0d0e22;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: -2;
+  }
+
+  :global(.about .page-scrollable-footer) {
+    margin-left: -16.6vw;
+  }
+  
+  :global(.blog .page-scrollable-footer) {
+    margin-left: -12.4vw;
   }
 
   /* --- Main row --- */
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 44b6993..b0c36eb 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -17,11 +17,6 @@
 .page-scrollable {
   height: 100%;
   overflow-y: auto;
-  margin-bottom: var(--footer-height);
-}
-
-.page-scrollable .page-container {
-  margin-bottom: var(--footer-height);
 }
 
 /* Vertical Lines */
diff --git a/src/views/About.svelte b/src/views/About.svelte
index e4734b9..5c5c300 100644
--- a/src/views/About.svelte
+++ b/src/views/About.svelte
@@ -3,6 +3,7 @@
   import { slides } from '@state/slides.svelte'
 
   import { t } from '@i18n'
+  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -152,9 +153,10 @@
         </div>
       </section>
     {/if}
-  
-  </div>
+
+    <Footer />
   </div>
+</div>
 
 
 <style>
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index c62fe69..5248d9c 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -5,6 +5,7 @@
    */
 
   import { t } from '@i18n'
+  import Footer from '@components/layout/Footer.svelte'
 
   let { data, onBack } = $props()
 
@@ -114,6 +115,7 @@
   {/if}
 </article>
 
+<Footer />
 </div>
 
 <style>
diff --git a/src/views/Blog.svelte b/src/views/Blog.svelte
index a2f354f..d4295b6 100644
--- a/src/views/Blog.svelte
+++ b/src/views/Blog.svelte
@@ -5,6 +5,7 @@
 
   import Article from '@views/Article.svelte'
   import { t } from '@i18n'
+  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -176,6 +177,7 @@
         <p class="blog-loading">{t('loading')}</p>
       {/if}
 
+      <Footer />
     </div>
 
   {/if}