diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index 25d675d..ac26351 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -1509,10 +1509,38 @@ input[type="number"]:focus {
         display: none;
     }
 
+    .nav-links.mobile-open {
+        display: flex;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        padding: 1rem;
+        border-top: 2px solid var(--or-oki);
+        background: rgba(0, 0, 0, 0.98);
+    }
+
+    html.light-theme .nav-links.mobile-open {
+        background: rgba(255, 248, 231, 0.98);
+    }
+
     .nav-container {
         gap: 1rem;
     }
 
+    .menu-toggle.open span:nth-child(1) {
+        transform: rotate(45deg) translateY(8px);
+    }
+
+    .menu-toggle.open span:nth-child(2) {
+        opacity: 0;
+    }
+
+    .menu-toggle.open span:nth-child(3) {
+        transform: rotate(-45deg) translateY(-8px);
+    }
+
     .theme-toggle {
         padding: 0.4rem 0.6rem;
         font-size: 1rem;
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index de4ea30..31eb8ed 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -21,13 +21,6 @@
         // Sauvegarder la préférence
         localStorage.setItem('oki-theme', newTheme);
 
-        // Mettre à jour le menu mobile si ouvert
-        const navLinks = document.querySelector('.nav-links');
-        if (navLinks && navLinks.style.display === 'flex') {
-            const background = newTheme === 'light' ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
-            navLinks.style.background = background;
-        }
-
         // Mettre à jour les styles de la nav en fonction du scroll actuel
         const nav = document.querySelector('nav');
         const currentScroll = window.pageYOffset;
@@ -134,32 +127,18 @@ let menuOpen = false;
 
 menuToggle?.addEventListener('click', () => {
     menuOpen = !menuOpen;
-    if (menuOpen) {
-        // Déterminer le fond selon le thème actuel
-        const isLightTheme = document.documentElement.classList.contains('light-theme');
-        const background = isLightTheme ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
+    navLinks.classList.toggle('mobile-open', menuOpen);
+    menuToggle.classList.toggle('open', menuOpen);
+});
 
-        navLinks.style.display = 'flex';
-        navLinks.style.position = 'absolute';
-        navLinks.style.top = '100%';
-        navLinks.style.left = '0';
-        navLinks.style.right = '0';
-        navLinks.style.background = background;
-        navLinks.style.flexDirection = 'column';
-        navLinks.style.padding = '1rem';
-        navLinks.style.borderTop = '2px solid #E8A625';
-
-        // Animate menu toggle
-        menuToggle.children[0].style.transform = 'rotate(45deg) translateY(8px)';
-        menuToggle.children[1].style.opacity = '0';
-        menuToggle.children[2].style.transform = 'rotate(-45deg) translateY(-8px)';
-    } else {
-        navLinks.style.display = 'none';
-
-        // Reset menu toggle
-        menuToggle.children[0].style.transform = '';
-        menuToggle.children[1].style.opacity = '1';
-        menuToggle.children[2].style.transform = '';
+// Si la fenêtre est agrandie au-delà du breakpoint mobile pendant que le
+// menu est ouvert, on réinitialise son état pour éviter qu'il reste caché
+// ou en position absolue quand la nav desktop redevient visible.
+window.addEventListener('resize', () => {
+    if (menuOpen && window.innerWidth > 1100) {
+        menuOpen = false;
+        navLinks.classList.remove('mobile-open');
+        menuToggle.classList.remove('open');
     }
 });