vertical lines : centraliser en fixed dans App.svelte

- Retirer les lignes des views (Home, Expertise, About, Portfolio)
- Centraliser dans App.svelte en position:fixed, visibilité par slide
  via transition de hauteur 0→100vh selon slides.active.template
- Positions calculées depuis la golden-grid (1/6, 1/3, 1/2, 2/3, 5/6)
- Nettoyer layout.css (garder seulement les classes pour Menu.svelte)

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

src/App.svelte

@@ -36,6 +36,15 @@
   const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
   const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
 
+  const linesBySlide = {
+    home:      [6, 11, 16],
+    expertise: [6, 8, 11, 14, 16],
+    about:     [6, 8, 11, 14, 16],
+    portfolio: [11, 16],
+  }
+  const ALL_COLS = [6, 8, 11, 14, 16]
+  const activeLines = $derived(new Set(linesBySlide[slides.active?.template] ?? []))
+
   let isReady    = $state(false)
   let isResizing = $state(false)
   let resizeTimer = null
@@ -127,6 +136,12 @@
 <Header />
 <div class="bg-fixed" style="background-image: url('/assets/img/scrollable-page-background.png')"></div>
 
+<div class="vertical-lines" aria-hidden="true">
+  {#each ALL_COLS as col}
+    <div class="vl vl-col{col}" class:visible={activeLines.has(col)}></div>
+  {/each}
+</div>
+
 <main class="main">
   <div
     class="slides-wrapper"
@@ -204,4 +219,28 @@
     background-position: center;
     background-repeat: no-repeat;
   }
+
+  .vertical-lines {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-base);
+    pointer-events: none;
+  }
+
+  .vl {
+    position: absolute;
+    top: 0;
+    height: 0;
+    border-left: 0.1px solid rgba(238, 238, 238, 0.2);
+    overflow: hidden;
+    transition: height 600ms cubic-bezier(0.77, 0, 0.175, 1);
+  }
+
+  .vl.visible { height: 100vh; }
+
+  .vl-col6  { left: calc(10.66 / 63.96 * 100%); }
+  .vl-col8  { left: calc(21.32 / 63.96 * 100%); }
+  .vl-col11 { left: calc(31.98 / 63.96 * 100%); }
+  .vl-col14 { left: calc(42.64 / 63.96 * 100%); }
+  .vl-col16 { left: calc(53.30 / 63.96 * 100%); }
 </style>

src/components/layout/Footer.svelte

@@ -99,10 +99,7 @@
   footer {
     width: 100vw;
     background: #0d0e22;
-  }
+    z-index: 2;
-
-  :global(.about .page-scrollable-footer) {
-    margin-left: -16.6vw;
   }
   
   :global(.collection .page-scrollable-footer) {

src/styles/layout.css

@@ -19,33 +19,18 @@
   overflow-y: auto;
 }
 
-/* Vertical Lines */
+/* Vertical Lines — utilisées dans Menu.svelte (golden-grid) */
-.vertical-line {
+.vertical-line       { grid-area: auto; }
-  z-index: var(--z-base);
+.vertical-line-start { grid-area: 1/6  / span 20 / span 1; }
-  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
+.vertical-line-center{ grid-area: 1/11 / span 20 / span 1; }
-  height: 150%;
+.vertical-line-end   { grid-area: 1/16 / span 20 / span 1; }
-  pointer-events: none;
-}
-
-.vertical-line-start {
-  z-index: var(--z-base);
-  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
-  grid-area: 1/6 / span 20 / span 1;
-  height: 150%;
-}
-
-.vertical-line-center {
-  z-index: var(--z-base);
-  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
-  grid-area: 1/11 / span 20 / span 1;
-  height: 150%;
-}
 
+.vertical-line,
+.vertical-line-start,
+.vertical-line-center,
 .vertical-line-end {
-  z-index: var(--z-base);
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
-  grid-area: 1/16 / span 20 / span 1;
+  pointer-events: none;
-  height: 150%;
 }
 
 @media screen and (min-width: 700px) {

src/views/About.svelte

@@ -77,6 +77,7 @@
 </script>
 
 <div class="about golden-grid page-scrollable" bind:this={sectionEl} onscroll={() => navigation.setScrolled(sectionEl.scrollTop > 100)}>
+
   <div class="page-container">
     <!-- Intro -->
     <section class="about-intro">
@@ -182,12 +183,18 @@
   }
 
   .page-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    font-size: var(--font-size-paragraph);
     grid-area: 6/6/span 7/span 10;
     height: 100%;
     place-self: center;
     text-align: center;
     white-space: pre-line;
     width: 100%;  
+    overflow:visible;
   }
 
   /* ── Intro ── */

src/views/Expertise.svelte

@@ -284,13 +284,6 @@
     </video>
   </div>
 
-  <!-- Decorative vertical lines -->
-  <div class="vertical-line-start"               aria-hidden="true"></div>
-  <div class="vertical-line vertical-line-col8"  aria-hidden="true"></div>
-  <div class="vertical-line-center"              aria-hidden="true"></div>
-  <div class="vertical-line vertical-line-col14" aria-hidden="true"></div>
-  <div class="vertical-line-end"                 aria-hidden="true"></div>
-
   <!-- Title -->
   <h2 class="expertise-title">
     {@html data?.pageTitle ?? ''}
@@ -345,15 +338,6 @@
     opacity: 1;
   }
 
-  /* Custom vertical lines */
-  .vertical-line-col8 {
-    grid-area: 1/8 / span 20 / span 1;
-  }
-
-  .vertical-line-col14 {
-    grid-area: 1/14 / span 20 / span 1;
-  }
-
   /* Title */
   .expertise-title {
     grid-area: 8/6 / span 5 / span 5;

src/views/Home.svelte

@@ -87,10 +87,6 @@
     </figure>
   </div>
 
-  <div class="vertical-line-start"></div>
-  <div class="vertical-line-center"></div>
-  <div class="vertical-line-end"></div>
-
   <div class="home-text">
     <h2 class="font-face-danzza-light home-subtitle">
       {data.hero.subtitle}

src/views/Portfolio.svelte

@@ -156,10 +156,6 @@
   bind:this={sectionEl}
   aria-label="Portfolio"
 >
-  <!-- Decorative vertical lines -->
-  <div class="vertical-line-center" aria-hidden="true"></div>
-  <div class="vertical-line-end" aria-hidden="true"></div>
-
   {#if currentProject}
     <!-- Galerie animation (gauche desktop / plein écran mobile) -->
     <div class="portfolio-gallery desktop-only" aria-hidden="true">
@@ -243,15 +239,6 @@
     background-size: cover;
   }
 
-  /* Custom vertical lines */
-  .vertical-line-col8 {
-    grid-area: 1/8 / span 20 / span 1;
-  }
-
-  .vertical-line-col14 {
-    grid-area: 1/14 / span 20 / span 1;
-  }
-
   /* Desktop layout */
   .portfolio-gallery {
     grid-area: 1/1 / span 20 / span 7;