diff --git a/src/components/layout/Cursor.svelte b/src/components/layout/Cursor.svelte
index f7dfc2c..22a088c 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: var(--z-cursor);
+    z-index: 9999;
   }
 
   .cursor {
diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index c780726..25b9cff 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: var(--z-header);
+    z-index: 50;
     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: var(--z-header);
+    z-index: 60;
   }
 
   .wg-logo {
@@ -102,11 +102,6 @@
     display: inline;
   }
 
-  .navbar--open {
-    background-color: transparent;
-    backdrop-filter: none;
-  }
-
   .navbar--open .navbar-list {
     visibility: hidden;
   }
@@ -117,7 +112,7 @@
     font-weight: bold;
     vertical-align: middle;
     position: relative;
-    z-index: var(--z-content);
+    z-index: 5;
     color: white;
     transition: color 0.3s;
   }
@@ -133,7 +128,7 @@
     right: 5vh;
     top: 50%;
     transform: translateY(-50%);
-    z-index: var(--z-header);
+    z-index: 60;
     background: none;
     border: none;
     padding: 0;
diff --git a/src/components/layout/Menu.svelte b/src/components/layout/Menu.svelte
index be87401..d5cd964 100644
--- a/src/components/layout/Menu.svelte
+++ b/src/components/layout/Menu.svelte
@@ -14,15 +14,16 @@
   $effect(() => {
     if (!dialogEl) return
     if (isMenuOpen) {
-      dialogEl.show()
-      const onKeyDown = (e) => { if (e.key === 'Escape') navigation.closeMenu() }
-      window.addEventListener('keydown', onKeyDown)
-      return () => window.removeEventListener('keydown', onKeyDown)
+      dialogEl.showModal()
     } 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>
@@ -49,84 +50,81 @@
 <dialog
   bind:this={dialogEl}
   id="main-menu"
-  class="menu"
+  class="menu golden-grid"
   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>
-    <div class="vertical-line vertical-line-col14"></div>
-    <div class="vertical-line-end"></div>
+  <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>
-
-    <!-- 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.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}
+  <!-- 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>
-        {/each}
-      {/if}
+        </li>
+      {/each}
+    </ol>
+  </nav>
 
-      {#if contact.legalNotice}
-        <a
-          href={contact.legalNotice}
-          download
-          class="menu-connect-legal"
-        >
-          {t('legal')}
+  <!-- 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.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}
         </a>
-      {/if}
-    </aside>
-  </div>
+      {/each}
+    {/if}
+
+    {#if contact.legalNotice}
+      <a
+        href={contact.legalNotice}
+        download
+        class="menu-connect-legal"
+      >
+        {t('legal')}
+      </a>
+    {/if}
+  </aside>
 </dialog>
 
 <style>
   /* Dialog reset + full screen */
   dialog.menu {
-    position: fixed;
-    inset: 0;
     border: none;
     padding: 0;
     margin: 0;
@@ -134,16 +132,10 @@
     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
new file mode 100644
index 0000000..b1f001e
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,290 @@
+/* FONT SIZING SYSTEM - Consistent typography across the site */
+:root {
+  /* Base font sizes for desktop */
+  --font-size-paragraph: 18px;
+  --font-size-paragraph-small: 16px;
+  --font-size-subtitle: 20px;
+  --font-size-title-section: 32px;
+  --font-size-title-main: 48px;
+  --font-size-title-hero: 96px;
+  --font-size-button: 13px;
+  --font-size-caption: 12px;
+
+  /* Mobile font sizes */
+  --font-size-paragraph-mobile: 16px;
+  --font-size-paragraph-small-mobile: 12px;
+  --font-size-subtitle-mobile: 16px;
+  --font-size-title-section-mobile: 24px;
+  --font-size-title-main-mobile: 32px;
+  --font-size-title-hero-mobile: 48px;
+  --font-size-button-mobile: 11px;
+  --font-size-caption-mobile: 10px;
+
+  /* Tablet font sizes */
+  --font-size-paragraph-tablet: 16px;
+  --font-size-paragraph-small-tablet: 14px;
+  --font-size-subtitle-tablet: 18px;
+  --font-size-title-section-tablet: 28px;
+  --font-size-title-main-tablet: 40px;
+  --font-size-title-hero-tablet: 64px;
+  --font-size-button-tablet: 12px;
+  --font-size-caption-tablet: 11px;
+}
+
+html,
+body {
+  height: 100%;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  min-height: calc(var(--vh, 1vh) * 100);
+  user-select: none;
+}
+
+body {
+  margin: 0;
+  font-family: "Danzza Regular", "Danzza", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: none;
+  background: #000;
+  overflow-x: hidden;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  cursor: none;
+}
+
+/* Font faces */
+@font-face {
+  font-family: "Terminal";
+  font-weight: bold;
+  src: local("terminal-grotesque"),
+    url("/assets/fonts/terminal-grotesque.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Danzza";
+  src: local("Danzza Regular"),
+    url("/assets/fonts/Danzza-Regular.woff") format("woff"),
+    url("/assets/fonts/Danzza-Regular.otf") format("opentype");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Danzza Light";
+  src: local("Danzza Light"),
+    url("/assets/fonts/Danzza-Light.woff") format("woff"),
+    url("/assets/fonts/Danzza-Light.otf") format("opentype");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Danzza Medium";
+  src: local("Danzza Medium"),
+    url("/assets/fonts/Danzza-Medium.woff") format("woff"),
+    url("/assets/fonts/Danzza-Medium.otf") format("opentype");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Danzza Bold";
+  src: local("Danzza Bold"),
+    url("/assets/fonts/Danzza-Bold.woff") format("woff"),
+    url("/assets/fonts/Danzza-Bold.otf") format("opentype");
+  font-display: swap;
+}
+
+.font-face-terminal {
+  font-family: "Terminal";
+}
+
+.font-face-danzza {
+  font-family: "Danzza";
+}
+
+.font-face-danzza-light {
+  font-family: "Danzza Light";
+}
+
+.font-face-danzza-medium {
+  font-family: "Danzza Medium";
+}
+
+.font-face-danzza-bold {
+  font-family: "Danzza Bold";
+}
+
+/* Golden Grid */
+.golden-grid {
+  height: 100vh !important;
+  min-height: 100% !important;
+  display: grid !important;
+  position: relative;
+  grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
+  text-align: center;
+}
+
+.slide {
+  overflow-y: hidden;
+}
+
+/* Vertical Lines */
+.vertical-line {
+  z-index: 1;
+  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
+  height: 150%;
+}
+
+.vertical-line-start {
+  z-index: 1;
+  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: 1;
+  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
+  grid-area: 1/11 / span 20 / span 1;
+  height: 150%;
+}
+
+.vertical-line-end {
+  z-index: 1;
+  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
+  grid-area: 1/16 / span 20 / span 1;
+  height: 150%;
+}
+
+/* Button */
+.button {
+  width: 14vmax;
+  min-width: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  z-index: 1;
+  padding: 12px 16px;
+  transition: 0.5s ease-out;
+  font-family: "Danzza Bold";
+  background-color: #04fea0;
+  border: none;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-position: left;
+  background-color: transparent;
+  outline: solid 2px #04fea0;
+}
+
+.button p {
+  color: black;
+  margin: 0;
+  transition: color 0.3s;
+}
+
+.button:hover p {
+  color: #04fea0 !important;
+}
+
+.earth-icon {
+  width: 24px;
+  height: 24px;
+  background-image: url("/assets/img/icon-earth-green.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-right: 8px;
+  transition: filter 0.3s;
+}
+
+.button:hover .earth-icon {
+  filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
+    hue-rotate(91deg) brightness(101%) contrast(97%);
+}
+
+/* Clickable elements */
+.clickable {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Cursor */
+#cursor-dot,
+#cursor-dot-outline,
+#cursor-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 99999;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+}
+
+#cursor-dot {
+  width: 14px;
+  height: 14px;
+  background-color: white;
+}
+
+#cursor-circle {
+  width: 50px;
+  height: 50px;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #04fea0;
+}
+
+#cursor-dot-outline {
+  width: 13px;
+  height: 13px;
+  background-color: white;
+}
+
+@media (pointer: coarse) {
+  #cursor-dot,
+  #cursor-dot-outline,
+  #cursor-circle {
+    display: none;
+  }
+
+  body,
+  * {
+    cursor: auto;
+  }
+}
+
+/* Selection */
+::selection {
+  background: #04fea0;
+  color: #000;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #000;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #04fea0;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #03d98c;
+}
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
index b6ce28b..42fa360 100644
--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   position: sticky;
-  z-index: var(--z-base);
+  z-index: 1;
   padding: 12px 16px;
   transition: 0.5s ease-out;
   font-family: "Danzza Bold";
diff --git a/src/styles/cursor.css b/src/styles/cursor.css
index bb44f35..64bb2e6 100644
--- a/src/styles/cursor.css
+++ b/src/styles/cursor.css
@@ -5,7 +5,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  z-index: var(--z-cursor);
+  z-index: 99999;
   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/layout.css b/src/styles/layout.css
index fae21c5..a0c3b74 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -15,27 +15,27 @@
 
 /* Vertical Lines */
 .vertical-line {
-  z-index: var(--z-base);
+  z-index: 1;
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
   height: 150%;
 }
 
 .vertical-line-start {
-  z-index: var(--z-base);
+  z-index: 1;
   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);
+  z-index: 1;
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
   grid-area: 1/11 / span 20 / span 1;
   height: 150%;
 }
 
 .vertical-line-end {
-  z-index: var(--z-base);
+  z-index: 1;
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
   grid-area: 1/16 / span 20 / span 1;
   height: 150%;
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 1f87eeb..e746f86 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,25 +1,6 @@
 /* CSS Variables */
 :root {
-  /* Colors */
-  --color-primary: #04fea0;
-  --color-primary-hover: #03d98c;
-  --color-background: #000;
-  --color-text: #fff;
-
-  /* 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)
-   */
-  --z-base:    1;
-  --z-content: 5;
-  --z-menu:    100;
-  --z-header:  200;
-  --z-cursor:  9999;
-
-  /* Font sizes — desktop */
+  /* Base font sizes for desktop */
   --font-size-paragraph: 18px;
   --font-size-paragraph-small: 16px;
   --font-size-subtitle: 20px;
@@ -29,7 +10,7 @@
   --font-size-button: 13px;
   --font-size-caption: 12px;
 
-  /* Font sizes — mobile */
+  /* Mobile font sizes */
   --font-size-paragraph-mobile: 16px;
   --font-size-paragraph-small-mobile: 12px;
   --font-size-subtitle-mobile: 16px;
@@ -39,7 +20,7 @@
   --font-size-button-mobile: 11px;
   --font-size-caption-mobile: 10px;
 
-  /* Font sizes — tablet */
+  /* Tablet font sizes */
   --font-size-paragraph-tablet: 16px;
   --font-size-paragraph-small-tablet: 14px;
   --font-size-subtitle-tablet: 18px;
@@ -48,4 +29,10 @@
   --font-size-title-hero-tablet: 64px;
   --font-size-button-tablet: 12px;
   --font-size-caption-tablet: 11px;
+
+  /* Colors */
+  --color-primary: #04fea0;
+  --color-primary-hover: #03d98c;
+  --color-background: #000;
+  --color-text: #fff;
 }
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
index 3d88d88..d983561 100644
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@@ -135,7 +135,7 @@
 
   /* Text overlay */
   .home-text {
-    z-index: var(--z-content);
+    z-index: 5;
     grid-area: 9/1 / span 6 / span 20;
     width: 100%;
     justify-self: center;