diff --git a/src/components/layout/Cursor.svelte b/src/components/layout/Cursor.svelte
index 22a088c..f7dfc2c 100644
--- a/src/components/layout/Cursor.svelte
+++ b/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 {
diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index 25b9cff..673ba7e 100644
--- a/src/components/layout/Header.svelte
+++ b/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;
diff --git a/src/components/layout/Menu.svelte b/src/components/layout/Menu.svelte
index d5cd964..be87401 100644
--- a/src/components/layout/Menu.svelte
+++ b/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,81 +49,84 @@
 <dialog
   bind:this={dialogEl}
   id="main-menu"
-  class="menu golden-grid"
+  class="menu"
   aria-label="Menu principal"
-  oncancel={handleCancel}
 >
-  <div class="vertical-line-start"></div>
-  <div class="vertical-line vertical-line-col8"></div>
-  <div class="vertical-line-center"></div>
-  <div class="vertical-line vertical-line-col14"></div>
-  <div class="vertical-line-end"></div>
+  <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>
+    <div class="vertical-line vertical-line-col14"></div>
+    <div class="vertical-line-end"></div>
 
-  <!-- Navigation -->
-  <nav class="menu-list font-face-terminal" aria-label="Navigation principale">
-    <p class="menu-title">{t('menu')}</p>
-    <ol class="menu-nav-list font-face-danzza-bold">
-      {#each slides.all as slide, i}
-        <li class="menu-nav-item">
-          <a
-            href={slide.path}
-            onclick={handleNavClick}
-            class="menu-nav-link"
-            class:active={activeId === slide.id}
-            aria-current={activeId === slide.id ? 'page' : undefined}
-          >
-            <span class="menu-nav-number font-face-danzza-medium">
-              {String(i + 1).padStart(2, '0')}
-            </span>
-            <span class="menu-nav-label">
-              {getTitle(slide)}
-            </span>
-          </a>
-        </li>
-      {/each}
-    </ol>
-  </nav>
+    <!-- Navigation -->
+    <nav class="menu-list font-face-terminal" aria-label="Navigation principale">
+      <p class="menu-title">{t('menu')}</p>
+      <ol class="menu-nav-list font-face-danzza-bold">
+        {#each slides.all as slide, i}
+          <li class="menu-nav-item">
+            <a
+              href={slide.path}
+              onclick={handleNavClick}
+              class="menu-nav-link"
+              class:active={activeId === slide.id}
+              aria-current={activeId === slide.id ? 'page' : undefined}
+            >
+              <span class="menu-nav-number font-face-danzza-medium">
+                {String(i + 1).padStart(2, '0')}
+              </span>
+              <span class="menu-nav-label">
+                {getTitle(slide)}
+              </span>
+            </a>
+          </li>
+        {/each}
+      </ol>
+    </nav>
 
-  <!-- Connect -->
-  <aside class="menu-connect" aria-label="Contact">
-    <p class="menu-connect-title">{t('connect')}</p>
+    <!-- Connect -->
+    <aside class="menu-connect" aria-label="Contact">
+      <p class="menu-connect-title">{t('connect')}</p>
 
-    {#if contact.address}
-      <p class="menu-connect-label">{t('address')}</p>
-      <p class="menu-connect-info">{@html contact.address}</p>
-    {/if}
+      {#if contact.address}
+        <p class="menu-connect-label">{t('address')}</p>
+        <p class="menu-connect-info">{@html contact.address}</p>
+      {/if}
 
-    {#if contact.email}
-      <p class="menu-connect-label">MAIL</p>
-      <a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
-        {contact.email}
-      </a>
-    {/if}
-
-    {#if contact.socials?.length}
-      <p class="menu-connect-label">{t('socials')}</p>
-      {#each contact.socials as social}
-        <a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
-          {social.label}
+      {#if contact.email}
+        <p class="menu-connect-label">MAIL</p>
+        <a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
+          {contact.email}
         </a>
-      {/each}
-    {/if}
+      {/if}
 
-    {#if contact.legalNotice}
-      <a
-        href={contact.legalNotice}
-        download
-        class="menu-connect-legal"
-      >
-        {t('legal')}
-      </a>
-    {/if}
-  </aside>
+      {#if contact.socials?.length}
+        <p class="menu-connect-label">{t('socials')}</p>
+        {#each contact.socials as social}
+          <a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
+            {social.label}
+          </a>
+        {/each}
+      {/if}
+
+      {#if contact.legalNotice}
+        <a
+          href={contact.legalNotice}
+          download
+          class="menu-connect-legal"
+        >
+          {t('legal')}
+        </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;
   }
diff --git a/src/style.css b/src/style.css
index b1f001e..45b11b0 100644
--- a/src/style.css
+++ b/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%;
diff --git a/src/styles/cursor.css b/src/styles/cursor.css
index 64bb2e6..bb44f35 100644
--- a/src/styles/cursor.css
+++ b/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%;
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
index d983561..3d88d88 100644
--- a/src/views/Home.svelte
+++ b/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;