diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index e85c145..9e2e54e 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -68,44 +68,44 @@ function isActive(href: string): boolean {
     </div>
   </div>
 
-  <!-- Mobile Menu (fullscreen) -->
-  <div
-    id="mobile-menu"
-    class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden"
-  >
-    <div class="flex flex-col items-center justify-center h-full px-6 space-y-4">
-      <!-- Close button -->
-      <button
-        id="mobile-menu-close"
-        class="absolute top-8 right-6 text-night p-2 focus:outline-none"
-        aria-label="Fermer le menu"
+</nav>
+
+<!-- Menu mobile (hors nav pour éviter les problèmes de stacking context) -->
+<div
+  id="mobile-menu"
+  class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden"
+>
+  <div class="flex flex-col items-center justify-center h-full px-6 space-y-4">
+    <button
+      id="mobile-menu-close"
+      class="absolute top-8 right-6 text-night p-2 focus:outline-none"
+      aria-label="Fermer le menu"
+    >
+      <Icon name="lucide:x" size={28} />
+    </button>
+
+    {navLinks.map((link) => (
+      <a
+        href={link.href}
+        class:list={[
+          'text-2xl font-display tracking-wide transition-all px-6 py-3 rounded-2xl',
+          isActive(link.href) ? 'text-dream-coral font-bold' : 'text-night/70 hover:text-night',
+        ]}
       >
-        <Icon name="lucide:x" size={28} />
-      </button>
+        {link.label}
+      </a>
+    ))}
 
-      {navLinks.map((link) => (
-        <a
-          href={link.href}
-          class:list={[
-            'text-2xl font-display tracking-wide transition-all px-6 py-3 rounded-2xl',
-            isActive(link.href) ? 'text-dream-coral font-bold' : 'text-night/70 hover:text-night',
-          ]}
-        >
-          {link.label}
-        </a>
-      ))}
-
-      <div class="flex gap-8 pt-8 border-t border-night/10 mt-4">
-        <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-pink transition-colors">
-          <Icon name="lucide:instagram" size={28} />
-        </a>
-        <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-blue transition-colors">
-          <Icon name="lucide:facebook" size={28} />
-        </a>
-      </div>
+    <div class="flex gap-8 pt-8 border-t border-night/10 mt-4">
+      <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-pink transition-colors">
+        <Icon name="lucide:instagram" size={28} />
+      </a>
+      <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-blue transition-colors">
+        <Icon name="lucide:facebook" size={28} />
+      </a>
     </div>
   </div>
-</nav>
+</div>
 
 <script>
   const navbar = document.getElementById('navbar')!;
diff --git a/src/components/PageSection.astro b/src/components/PageSection.astro
new file mode 100644
index 0000000..2898b90
--- /dev/null
+++ b/src/components/PageSection.astro
@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  maxWidth?: string;
+  padding?: string;
+}
+
+const { class: className, maxWidth = 'max-w-7xl', padding = 'pt-32 pb-24', ...attrs } = Astro.props;
+---
+
+<div {...attrs} class:list={[padding, "min-h-screen bg-cloud relative overflow-hidden", className]}>
+  <slot name="background" />
+  <div class:list={[maxWidth, "mx-auto px-4 sm:px-6 lg:px-8 relative z-10"]}>
+    <slot />
+  </div>
+</div>
diff --git a/src/pages/agenda/index.astro b/src/pages/agenda/index.astro
index fc32b07..e2044ca 100644
--- a/src/pages/agenda/index.astro
+++ b/src/pages/agenda/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+import PageSection from '../../components/PageSection.astro';
 import { Icon } from 'astro-icon/components';
 import { fetchSpectacles, fetchAgenda } from '../../lib/storyblok';
 
@@ -10,11 +11,8 @@ const now = new Date();
 ---
 
 <Layout title="Agenda — Compagnie AspiRêves">
-  <div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
-    <!-- Background -->
-    <div class="absolute top-1/2 left-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[120px] -translate-x-1/2"></div>
-
-    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+  <PageSection maxWidth="max-w-5xl">
+    <div slot="background" class="absolute top-1/2 left-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[120px] -translate-x-1/2"></div>
       <!-- Header -->
       <div class="animate-entrance text-center mb-12 md:mb-20">
         <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">L'<span class="text-dream-coral italic">Agenda</span></h1>
@@ -156,6 +154,5 @@ const now = new Date();
           <p class="font-display text-3xl text-night/30 italic">Le nuage se prépare pour de nouveaux voyages...</p>
         </div>
       )}
-    </div>
-  </div>
+  </PageSection>
 </Layout>
diff --git a/src/pages/ateliers.astro b/src/pages/ateliers.astro
index 4c8a1c4..565f76d 100644
--- a/src/pages/ateliers.astro
+++ b/src/pages/ateliers.astro
@@ -1,15 +1,13 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import PageSection from '../components/PageSection.astro';
 import { Icon } from 'astro-icon/components';
 import { companyInfo } from '../data';
 ---
 
 <Layout title="Ateliers Théâtre — Compagnie AspiRêves">
-  <div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
-    <!-- Background -->
-    <div class="absolute top-1/4 right-0 w-[500px] h-[500px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
-
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+  <PageSection>
+    <div slot="background" class="absolute top-1/4 right-0 w-[500px] h-[500px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
       <!-- Header -->
       <div class="animate-entrance text-center mb-16 md:mb-24">
         <div class="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
@@ -107,7 +105,5 @@ import { companyInfo } from '../data';
           Nous contacter
         </a>
       </div>
-    </div>
-
-  </div>
+  </PageSection>
 </Layout>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 8e2b410..bea316b 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,15 +1,13 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import PageSection from '../components/PageSection.astro';
 import { Icon } from 'astro-icon/components';
 import { companyInfo } from '../data';
 ---
 
 <Layout title="Contact — Compagnie AspiRêves">
-  <div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
-    <!-- Background -->
-    <div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
-
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+  <PageSection>
+    <div slot="background" class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
       <!-- Header -->
       <div class="animate-entrance text-center mb-16 md:mb-24">
         <div class="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
@@ -85,6 +83,5 @@ import { companyInfo } from '../data';
 
         </div>
       </div>
-    </div>
-  </div>
+  </PageSection>
 </Layout>
diff --git a/src/pages/la-compagnie.astro b/src/pages/la-compagnie.astro
index 699dbdf..e3b2a7b 100644
--- a/src/pages/la-compagnie.astro
+++ b/src/pages/la-compagnie.astro
@@ -1,16 +1,16 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import PageSection from '../components/PageSection.astro';
 import { Icon } from 'astro-icon/components';
 import { companyInfo } from '../data';
 ---
 
 <Layout title="La Compagnie — Compagnie AspiRêves">
-  <div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
-    <!-- Background -->
-    <div class="absolute top-1/4 left-0 w-[500px] h-[500px] bg-dream-purple/20 rounded-full filter blur-[120px] -translate-x-1/2"></div>
-    <div class="absolute bottom-1/4 right-0 w-[400px] h-[400px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
-
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+  <PageSection>
+    <Fragment slot="background">
+      <div class="absolute top-1/4 left-0 w-[500px] h-[500px] bg-dream-purple/20 rounded-full filter blur-[120px] -translate-x-1/2"></div>
+      <div class="absolute bottom-1/4 right-0 w-[400px] h-[400px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
+    </Fragment>
       <!-- Header -->
       <div class="animate-entrance text-center mb-16 md:mb-24">
         <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 leading-tight">La <span class="text-dream-coral italic">Compagnie</span></h1>
@@ -119,7 +119,5 @@ import { companyInfo } from '../data';
           Nous contacter
         </a>
       </div>
-    </div>
-
-  </div>
+  </PageSection>
 </Layout>
diff --git a/src/pages/spectacles/[id].astro b/src/pages/spectacles/[id].astro
index af4cf97..bd134a0 100644
--- a/src/pages/spectacles/[id].astro
+++ b/src/pages/spectacles/[id].astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+import PageSection from '../../components/PageSection.astro';
 import { Icon } from 'astro-icon/components';
 import { getLiveStory, storyblokEditable } from '@storyblok/astro';
 import { fetchSpectacles, fetchAgenda, mapStoryToSpectacle, extractYouTubeId } from '../../lib/storyblok';
@@ -51,12 +52,11 @@ const youtubeId = spectacle.teaser ? extractYouTubeId(spectacle.teaser) : null;
 ---
 
 <Layout title={`${spectacle.title} — Compagnie AspiRêves`}>
-  <div {...storyblokEditable(spectacle._blok)} class="pt-24 md:pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
-    <!-- Background -->
-    <div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
-    <div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
-
-    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+  <PageSection {...storyblokEditable(spectacle._blok)} padding="pt-24 md:pt-32 pb-24" maxWidth="max-w-6xl">
+    <Fragment slot="background">
+      <div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
+      <div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
+    </Fragment>
       <!-- Back button -->
       <a
         href="/spectacles/"
@@ -202,6 +202,5 @@ const youtubeId = spectacle.teaser ? extractYouTubeId(spectacle.teaser) : null;
           </div>
         </section>
       )}
-    </div>
-  </div>
+  </PageSection>
 </Layout>
diff --git a/src/pages/spectacles/index.astro b/src/pages/spectacles/index.astro
index ec4c471..d838f1a 100644
--- a/src/pages/spectacles/index.astro
+++ b/src/pages/spectacles/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+import PageSection from '../../components/PageSection.astro';
 import { Icon } from 'astro-icon/components';
 import { storyblokEditable } from '@storyblok/astro';
 import { fetchSpectacles } from '../../lib/storyblok';
@@ -19,12 +20,11 @@ const retraites = spectacles.filter(s => s.retired).sort(byDateDesc);
 ---
 
 <Layout title="Spectacles — Compagnie AspiRêves">
-  <div class="pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
-    <!-- Background -->
-    <div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
-    <div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
-
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+  <PageSection>
+    <Fragment slot="background">
+      <div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
+      <div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
+    </Fragment>
       <!-- Header -->
       <div class="animate-entrance text-center mb-16 md:mb-24">
         <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">Nos <span class="text-dream-purple italic">Spectacles</span></h1>
@@ -230,7 +230,5 @@ const retraites = spectacles.filter(s => s.retired).sort(byDateDesc);
           </div>
         </div>
       )}
-    </div>
-
-  </div>
+  </PageSection>
 </Layout>