diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f87242e..c323d9e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -63,7 +63,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   const locale = cookieStore.get("NEXT_LOCALE")?.value || "fr";
 
   return (
-    <html lang={locale} suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning className="h-full">
       <head>
         <meta
           name="viewport"
@@ -119,7 +119,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
       </head>
-      <body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
+      <body
+        className={cn("min-h-screen bg-background font-sans antialiased h-full", inter.className)}
+      >
         <I18nProvider locale={locale}>
           <PreferencesProvider>
             <ClientLayout>{children}</ClientLayout>
diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index 715d3c0..924c968 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -64,11 +64,11 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <PreferencesProvider>
-        <div className="relative min-h-screen">
+        <div className="relative min-h-screen h-full">
           <LoadingBar />
           {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
           {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />}
-          <main className={`${!isPublicRoute ? "container" : ""}`}>{children}</main>
+          <main className={`${!isPublicRoute ? "container pt-safe" : ""}`}>{children}</main>
           <InstallPWA />
           <Toaster />
           <NetworkStatus />
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 1c74b42..2b66003 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -16,7 +16,7 @@ export function Header({ onToggleSidebar }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pt-safe">
       <div className="container flex h-14 max-w-screen-2xl items-center">
         <button
           onClick={onToggleSidebar}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 9f3d298..d157028 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,7 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
-html, body {overscroll-behavior:none}
+html,
+body {
+  overscroll-behavior: none;
+}
+
+/* Ajout des règles pour gérer le safe-area-inset sur iOS */
+@supports (padding-top: env(safe-area-inset-top)) {
+  body {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  header.sticky {
+    padding-top: env(safe-area-inset-top);
+    height: calc(3.5rem + env(safe-area-inset-top)); /* 3.5rem (h-14) + safe-area-inset-top */
+  }
+}
 
 @layer base {
   :root {
@@ -85,4 +100,9 @@ html, body {overscroll-behavior:none}
   .hide-scrollbar::-webkit-scrollbar {
     display: none; /* Chrome, Safari and Opera */
   }
+
+  /* Classe utilitaire pour le padding-top avec safe-area-inset */
+  .pt-safe {
+    padding-top: env(safe-area-inset-top, 0);
+  }
 }
