Feat: variables z-index + header au-dessus du menu

- style.css : plage z-index (--z-base, --z-content, --z-menu, --z-header, --z-cursor)
- Menu : show() au lieu de showModal() pour sortir du top-layer natif,
  Escape géré manuellement via keydown, z-index: var(--z-menu), position: fixed
- Header : z-index: var(--z-header) sur navbar, logo et toggle (toujours au-dessus du menu)
- Cursor/cursor.css : z-index: var(--z-cursor)
- Home : z-index: var(--z-content) sur home-text

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

src/components/layout/Cursor.svelte

@@ -39,7 +39,7 @@
     top: 0;
     left: 0;
     pointer-events: none;
-    z-index: 9999;
+    z-index: var(--z-cursor);
   }
 
   .cursor {

src/components/layout/Header.svelte

@@ -63,7 +63,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 50;
+    z-index: var(--z-header);
     font-family: "Danzza";
     font-size: var(--font-size-paragraph);
     font-weight: normal;
@@ -82,7 +82,7 @@
     left: 5vh;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 60;
+    z-index: var(--z-header);
   }
 
   .wg-logo {
@@ -112,7 +112,7 @@
     font-weight: bold;
     vertical-align: middle;
     position: relative;
-    z-index: 5;
+    z-index: var(--z-content);
     color: white;
     transition: color 0.3s;
   }
@@ -128,7 +128,7 @@
     right: 5vh;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 60;
+    z-index: var(--z-header);
     background: none;
     border: none;
     padding: 0;

src/components/layout/Menu.svelte

@@ -14,16 +14,15 @@
   $effect(() => {
     if (!dialogEl) return
     if (isMenuOpen) {
-      dialogEl.showModal()
+      dialogEl.show()
+      const onKeyDown = (e) => { if (e.key === 'Escape') navigation.closeMenu() }
+      window.addEventListener('keydown', onKeyDown)
+      return () => window.removeEventListener('keydown', onKeyDown)
     } else if (dialogEl.open) {
       dialogEl.close()
     }
   })
 
-  function handleCancel() {
-    navigation.closeMenu()
-  }
-
   function handleNavClick() {
     navigation.closeMenu()
     // La navigation elle-même est gérée par le router via le <a href>
@@ -50,10 +49,10 @@
 <dialog
   bind:this={dialogEl}
   id="main-menu"
-  class="menu golden-grid"
+  class="menu"
   aria-label="Menu principal"
-  oncancel={handleCancel}
 >
+  <div class="menu-inner golden-grid">
     <div class="vertical-line-start"></div>
     <div class="vertical-line vertical-line-col8"></div>
     <div class="vertical-line-center"></div>
@@ -120,11 +119,14 @@
         </a>
       {/if}
     </aside>
+  </div>
 </dialog>
 
 <style>
   /* Dialog reset + full screen */
   dialog.menu {
+    position: fixed;
+    inset: 0;
     border: none;
     padding: 0;
     margin: 0;
@@ -132,10 +134,16 @@
     max-height: 100vh;
     width: 100vw;
     height: 100vh;
+    z-index: var(--z-menu);
     background-color: rgba(0, 0, 0, 0.9);
     color: white;
   }
 
+  .menu-inner {
+    width: 100%;
+    height: 100%;
+  }
+
   dialog.menu::backdrop {
     display: none;
   }

src/style.css

@@ -1,3 +1,18 @@
+/* Z-INDEX SCALE
+ * --z-base     : éléments décoratifs (lignes verticales, bg)
+ * --z-content  : contenu de slides (textes, overlays légers)
+ * --z-menu     : overlay menu plein écran
+ * --z-header   : barre de navigation (toujours au-dessus du menu)
+ * --z-cursor   : curseur personnalisé (toujours au-dessus de tout)
+ */
+:root {
+  --z-base:    1;
+  --z-content: 5;
+  --z-menu:    100;
+  --z-header:  200;
+  --z-cursor:  9999;
+}
+
 /* FONT SIZING SYSTEM - Consistent typography across the site */
 :root {
   /* Base font sizes for desktop */
@@ -224,7 +239,7 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  z-index: 99999;
+  z-index: var(--z-cursor);
   transform: translate(-50%, -50%);
   transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
   border-radius: 50%;

src/styles/cursor.css

@@ -5,7 +5,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  z-index: 99999;
+  z-index: var(--z-cursor);
   transform: translate(-50%, -50%);
   transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
   border-radius: 50%;

src/views/Home.svelte

@@ -135,7 +135,7 @@
 
   /* Text overlay */
   .home-text {
-    z-index: 5;
+    z-index: var(--z-content);
     grid-area: 9/1 / span 6 / span 20;
     width: 100%;
     justify-self: center;