fix: rework mobile nav as fixed overlay, add 3-line burger

- Nav menu is now a fixed fullscreen overlay (opacity fade)
- Header stays at 3.5rem height, no height animation
- Burger has 3 lines, middle fades out on open
- Body scroll locked with overflow: hidden when menu open
- Various mobile layout fixes (handles, system, footer padding)
- Header full-width with no border-radius on mobile

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

assets/css/src/_footer.scss

@@ -1,5 +1,6 @@
 body > footer {
-  width: 100%;
+  width: 100vw;
+  box-sizing: border-box;
   position: fixed;
   bottom: 0;
   left: 0;

assets/css/src/_header.scss

@@ -1,10 +1,11 @@
 body {
   > header {
+    box-sizing: border-box;
     position: sticky;
     z-index: 999;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     padding: 1.5rem var(--padding-body);
     box-sizing: border-box;
 

assets/css/src/_mobile.scss

@@ -7,54 +7,66 @@ body.no-scroll {
   // ---- HEADER ----
   body > header {
     position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 3.5rem;
-    overflow: hidden;
+    margin: 0;
-    transition: height 0.4s ease;
+    border-radius: 0;
     box-sizing: border-box;
     padding: 1rem var(--padding-body);
+    z-index: 9999;
 
     nav {
       display: flex;
-      flex-wrap: wrap;
       align-items: center;
-      height: 100%;
+      position: relative;
+      z-index: 2;
 
       .nav-logo {
         display: block;
         font-size: 1rem;
-        order: 1;
+        z-index: 2;
       }
 
       .burger {
-        order: 2;
         margin-left: auto;
-        width: 2rem;
+        width: 7.125rem;
-        height: 2rem;
+        height: 1.25rem;
         position: relative;
         display: flex;
         flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
-        gap: 0.4rem;
+        z-index: 2;
 
         span {
           display: block;
           width: 100%;
-          height: 1.5px;
+          height: 1px;
           background-color: #fff;
           transition: transform 0.3s ease, opacity 0.3s ease;
+          transform-origin: center;
         }
       }
 
+      // Full-screen overlay
       ul {
-        order: 3;
+        position: fixed;
+        display: block;
+        top: 0;
+        left: 0;
         width: 100%;
+        height: 100dvh;
+        background-color: var(--color-blue);
         flex-direction: column;
         align-items: flex-start;
-        gap: 0;
+        padding: 6rem var(--padding-body) 2rem;
-        padding-top: 3rem;
+        box-sizing: border-box;
+        z-index: 1;
         opacity: 0;
-        transition: opacity 0.3s ease 0.1s;
+        pointer-events: none;
+        transition: opacity 0.3s ease-in-out;
 
         li {
           width: 100%;
@@ -62,18 +74,18 @@ body.no-scroll {
           a {
             display: block;
             padding: 0.5rem 0;
+            font-size: 2.5rem;
+            font-weight: 400;
           }
         }
 
         li:first-child {
           width: 100%;
           font-size: 2.5rem;
-          margin-bottom: 1rem;
 
           a {
             font-family: var(--font-narrow);
             text-transform: uppercase;
-            font-weight: 700;
           }
         }
 
@@ -87,22 +99,22 @@ body.no-scroll {
     }
 
     // ---- OPEN STATE ----
-    &.nav-open {
+    &.nav-open nav {
-      height: 100vh;
+      ul {
-      height: 100dvh;
+        opacity: 1;
+        pointer-events: all;
+      }
+
+      .burger span:nth-child(2) {
+        opacity: 0;
+      }
 
-      nav {
       .burger span:first-child {
-          transform: rotate(45deg) translateY(0.2rem);
+        transform: translateY(0.55rem) rotate(10deg);
       }
 
       .burger span:last-child {
-          transform: rotate(-45deg) translateY(-0.2rem);
+        transform: translateY(-0.55rem) rotate(-10deg);
-        }
-
-        ul {
-          opacity: 1;
-        }
       }
     }
   }
@@ -112,6 +124,10 @@ body.no-scroll {
     padding-top: 3.5rem;
   }
 
+  section {
+    scroll-margin-top: calc(4.8125rem + 1rem);
+  }
+
   // ---- HERO ----
   section#hero {
     height: auto;
@@ -198,6 +214,7 @@ body.no-scroll {
   // ---- HANDLES ----
   section#handles {
     margin: 3rem var(--padding-body);
+    padding: 0;
 
     header {
       flex-direction: column;
@@ -231,6 +248,7 @@ body.no-scroll {
   section#system {
     flex-direction: column;
     margin: 3rem var(--padding-body);
+    padding: 0;
     gap: 3rem;
 
     .text {
@@ -248,6 +266,7 @@ body.no-scroll {
 
     figure {
       width: 100%;
+      margin: 0;
       height: auto;
     }
   }

assets/css/src/_section_10-buy.scss

@@ -26,10 +26,14 @@ section#buy {
 
     .buy-links {
       margin-top: 5rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
       li {
-        margin-bottom: 1rem;
         a {
-          display: inline-block;
+          width: 14rem;
+          display: block;
         }
       }
     }
@@ -38,6 +42,7 @@ section#buy {
       @include label-base;
       letter-spacing: 2.4px;
       font-weight: 400;
+      margin-top: 1rem;
     }
   }
 

assets/css/src/_section_5-handles.scss

@@ -1,5 +1,5 @@
 section#handles {
-  margin: 5rem var(--padding-body);
+  padding: 10rem 15vw;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -37,11 +37,13 @@ section#handles {
       color: var(--color-blue);
       font-size: var(--font-size-s);
 
-      font-weight: 500;
-
       h4 {
         text-transform: uppercase;
         margin-bottom: 0.7rem;
+        font-weight: 500;
+      }
+      p {
+        font-weight: 400;
       }
     }
     .step:hover {

assets/css/src/_section_7-system.scss

@@ -1,7 +1,7 @@
 section#system {
   display: flex;
   justify-content: space-between;
-  margin: 5rem var(--padding-body);
+  padding: 10rem min(15vw, 100%);
 
   .text {
     display: flex;

assets/css/style.css

@@ -173,11 +173,12 @@ body {
 }
 
 body > header {
+  box-sizing: border-box;
   position: sticky;
   z-index: 999;
   top: 0;
   left: 0;
-  width: 100%;
+  width: 100vw;
   padding: 1.5rem var(--padding-body);
   box-sizing: border-box;
 }
@@ -471,7 +472,7 @@ section#excerpts .swiper-pagination-bullet-active {
 }
 
 section#handles {
-  margin: 5rem var(--padding-body);
+  padding: 10rem 15vw;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -513,11 +514,14 @@ section#handles .path .step {
   border: 1px solid var(--color-blue);
   color: var(--color-blue);
   font-size: var(--font-size-s);
-  font-weight: 500;
 }
 section#handles .path .step h4 {
   text-transform: uppercase;
   margin-bottom: 0.7rem;
+  font-weight: 500;
+}
+section#handles .path .step p {
+  font-weight: 400;
 }
 section#handles .path .step:hover {
   background-color: var(--color-blue);
@@ -533,7 +537,7 @@ section#handles .path .step:not(:last-child) {
 section#system {
   display: flex;
   justify-content: space-between;
-  margin: 5rem var(--padding-body);
+  padding: 10rem min(15vw, 100%);
 }
 section#system .text {
   display: flex;
@@ -697,12 +701,14 @@ section#buy .text p:not(:last-child) {
 }
 section#buy .text .buy-links {
   margin-top: 5rem;
-}
+  display: flex;
-section#buy .text .buy-links li {
+  flex-direction: column;
-  margin-bottom: 1rem;
+  align-items: center;
+  gap: 1rem;
 }
 section#buy .text .buy-links li a {
-  display: inline-block;
+  width: 14rem;
+  display: block;
 }
 section#buy .text .info {
   font-size: 0.625rem;
@@ -711,6 +717,7 @@ section#buy .text .info {
   opacity: 0.8;
   letter-spacing: 2.4px;
   font-weight: 400;
+  margin-top: 1rem;
 }
 section#buy img {
   width: 45%;
@@ -720,7 +727,8 @@ section#buy img {
 }
 
 body > footer {
-  width: 100%;
+  width: 100vw;
+  box-sizing: border-box;
   position: fixed;
   bottom: 0;
   left: 0;
@@ -784,51 +792,62 @@ body.no-scroll {
 @media (max-width: 930px) {
   body > header {
     position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 3.5rem;
-    overflow: hidden;
+    margin: 0;
-    transition: height 0.4s ease;
+    border-radius: 0;
     box-sizing: border-box;
     padding: 1rem var(--padding-body);
+    z-index: 9999;
   }
   body > header nav {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    height: 100%;
+    position: relative;
+    z-index: 2;
   }
   body > header nav .nav-logo {
     display: block;
     font-size: 1rem;
-    order: 1;
+    z-index: 2;
   }
   body > header nav .burger {
-    order: 2;
     margin-left: auto;
-    width: 2rem;
+    width: 7.125rem;
-    height: 2rem;
+    height: 1.25rem;
     position: relative;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 0.4rem;
+    z-index: 2;
   }
   body > header nav .burger span {
     display: block;
     width: 100%;
-    height: 1.5px;
+    height: 1px;
     background-color: #fff;
     transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: center;
   }
   body > header nav ul {
-    order: 3;
+    position: fixed;
+    display: block;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100dvh;
+    background-color: var(--color-blue);
     flex-direction: column;
     align-items: flex-start;
-    gap: 0;
+    padding: 6rem var(--padding-body) 2rem;
-    padding-top: 3rem;
+    box-sizing: border-box;
+    z-index: 1;
     opacity: 0;
-    transition: opacity 0.3s ease 0.1s;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
   }
   body > header nav ul li {
     width: 100%;
@@ -836,16 +855,16 @@ body.no-scroll {
   body > header nav ul li a {
     display: block;
     padding: 0.5rem 0;
+    font-size: 2.5rem;
+    font-weight: 400;
   }
   body > header nav ul li:first-child {
     width: 100%;
     font-size: 2.5rem;
-    margin-bottom: 1rem;
   }
   body > header nav ul li:first-child a {
     font-family: var(--font-narrow);
     text-transform: uppercase;
-    font-weight: 700;
   }
   body > header nav ul li:not(:first-child) {
     font-family: var(--font-narrow);
@@ -853,22 +872,25 @@ body.no-scroll {
     text-transform: uppercase;
     font-weight: 700;
   }
-  body > header.nav-open {
-    height: 100vh;
-    height: 100dvh;
-  }
-  body > header.nav-open nav .burger span:first-child {
-    transform: rotate(45deg) translateY(0.2rem);
-  }
-  body > header.nav-open nav .burger span:last-child {
-    transform: rotate(-45deg) translateY(-0.2rem);
-  }
   body > header.nav-open nav ul {
     opacity: 1;
+    pointer-events: all;
+  }
+  body > header.nav-open nav .burger span:nth-child(2) {
+    opacity: 0;
+  }
+  body > header.nav-open nav .burger span:first-child {
+    transform: translateY(0.55rem) rotate(10deg);
+  }
+  body > header.nav-open nav .burger span:last-child {
+    transform: translateY(-0.55rem) rotate(-10deg);
   }
   main {
     padding-top: 3.5rem;
   }
+  section {
+    scroll-margin-top: 5.8125rem;
+  }
   section#hero {
     height: auto;
     min-height: 60vh;
@@ -934,6 +956,7 @@ body.no-scroll {
   }
   section#handles {
     margin: 3rem var(--padding-body);
+    padding: 0;
   }
   section#handles header {
     flex-direction: column;
@@ -959,6 +982,7 @@ body.no-scroll {
   section#system {
     flex-direction: column;
     margin: 3rem var(--padding-body);
+    padding: 0;
     gap: 3rem;
   }
   section#system .text {
@@ -973,6 +997,7 @@ body.no-scroll {
   }
   section#system figure {
     width: 100%;
+    margin: 0;
     height: auto;
   }
   section#excerpt {

index.html

@@ -54,6 +54,7 @@
         <button class="burger" aria-label="Menu">
           <span></span>
           <span></span>
+          <span></span>
         </button>
         <ul>
           <li>
@@ -409,7 +410,7 @@
 
       <section id="author">
         <img
-          src="/assets/images/frederic-denjoy.jpg"
+          src="/assets/images/frederic-denjoy.jpeg"
           alt="Portrait de l'auteur Frédéric Denjoy"
         />
         <div class="text">