diff --git a/src/components/header.astro b/src/components/header.astro
index fae9e52..5004323 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -31,12 +31,13 @@ const currentMenus = menus[currentLang] || menus.fr;
     class="flex items-center justify-between h-full max-w-5xl pl-6 pr-4 mx-auto border-b border-l-0 border-r-0 border-transparent select-none lg:border-r lg:border-l lg:rounded-b-xl"
   >
     <Logo />
-    <div
+    <button
       id="mobileMenuBackground"
-      onclick="closeMobileMenu()"
-      class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90"
+      type="button"
+      aria-label="Fermer le menu"
+      class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90 appearance-none border-0 p-0 cursor-default"
     >
-    </div>
+    </button>
     <nav
       class="relative z-30 flex flex-row-reverse justify-start w-full text-sm sm:justify-end text-neutral-500 dark:text-neutral-400 sm:flex-row"
     >
@@ -94,3 +95,9 @@ const currentMenus = menus[currentLang] || menus.fr;
     </nav>
   </div>
 </header>
+
+<script is:inline>
+  document.getElementById('mobileMenuBackground').addEventListener('click', function () {
+    window.closeMobileMenu();
+  });
+</script>