diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index c79249f..7632f63 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -23,18 +23,38 @@ const homeHref = hrefFor('home', lang);
   </head>
   <body class="min-h-screen bg-white text-slate-900">
     <header class="border-b border-slate-200">
-      <nav class="mx-auto max-w-6xl flex items-center justify-between p-4">
-        <a href={homeHref} class="flex items-center gap-3">
-          <img src="/assets/images/logo.png" alt="VillaFleurie" class="h-10 w-auto" />
-          <span class="sr-only">VillaFleurie</span>
-        </a>
-        <div class="flex items-center gap-4">
-          {nav.map((n) => <a href={n.href} class="text-sm hover:underline">{n.label}</a>)}
-          <a href={hrefFor('contact', lang)} class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
-          <div class="ml-2 flex items-center gap-2 text-xs">
-            <a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
-            <span class="text-slate-400">|</span>
-            <a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
+      <nav class="mx-auto max-w-6xl p-4">
+        <div class="flex items-center justify-between">
+          <a href={homeHref} class="flex items-center gap-3">
+            <img src="/assets/images/logo.png" alt="VillaFleurie" class="h-10 w-auto" />
+            <span class="sr-only">VillaFleurie</span>
+          </a>
+          <div class="flex items-center gap-4">
+            <button id="nav-toggle" class="md:hidden inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-2" aria-controls="mobile-menu" aria-expanded="false">
+              <span class="sr-only">Toggle navigation</span>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M3.75 6.75A.75.75 0 0 1 4.5 6h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75ZM3.75 12a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15A.75.75 0 0 1 3.75 12Zm0 5.25a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
+            </button>
+            <div class="hidden md:flex items-center gap-4">
+              {nav.map((n) => <a href={n.href} class="text-sm hover:underline">{n.label}</a>)}
+              <a href={hrefFor('contact', lang)} class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
+              <div class="ml-2 flex items-center gap-2 text-xs">
+                <a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
+                <span class="text-slate-400">|</span>
+                <a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="mobile-menu" class="mt-3 hidden md:hidden border-t border-slate-200 pt-3">
+          <div class="flex flex-col gap-3">
+            {nav.map((n) => <a href={n.href} class="text-base">{n.label}</a>)}
+            <a href={hrefFor('contact', lang)} class="inline-flex items-center justify-center rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
+            <div class="flex items-center gap-2 text-sm">
+              <span class="text-slate-500">Lang:</span>
+              <a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
+              <span class="text-slate-400">|</span>
+              <a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
+            </div>
           </div>
         </div>
       </nav>
@@ -68,7 +88,18 @@ const homeHref = hrefFor('home', lang);
       </div>
     </footer>
     <script>
+      // Plausible init
       window.plausible = window.plausible || function(){(window.plausible.q = window.plausible.q || []).push(arguments)}
+      // Mobile nav toggle
+      const btn = document.getElementById('nav-toggle');
+      const menu = document.getElementById('mobile-menu');
+      if (btn && menu) {
+        btn.addEventListener('click', () => {
+          const isHidden = menu.classList.contains('hidden');
+          menu.classList.toggle('hidden', !isHidden);
+          btn.setAttribute('aria-expanded', String(isHidden));
+        });
+      }
     </script>
     <script defer data-domain="villafleuriegp.com" src="https://plausible.nemausat.com/js/script.outbound-links.js"></script>
   </body>
