Feat: footer reveal — page-scrollable-footer intégré aux vues

- 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

@@ -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;
   }

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;
+  :global(.about .page-scrollable-footer) {
-    right: 0;
+    margin-left: -16.6vw;
-    z-index: -2;
+  }
+  
+  :global(.blog .page-scrollable-footer) {
+    margin-left: -12.4vw;
   }
 
   /* --- Main row --- */

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

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()
 
@@ -153,8 +154,9 @@
       </section>
     {/if}
 
+    <Footer />
   </div>
-  </div>
+</div>
 
 
 <style>

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>

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}