diff --git a/app/layout.tsx b/app/layout.tsx
index 1405ff5..a4edd92 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,21 +6,21 @@ import "./assets/main.css";
 import NavLink from "./components/NavLink";
 
 export default function RootLayout({ children }) {
-  // Référence pour observer la taille du conteneur
-  const containerRef = useRef<HTMLDivElement>(null);
+  // Références pour observer le contenu de main
+  const contentRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState("max-w-4xl");
   const [containerHeight, setContainerHeight] = useState("min-h-[50vh]");
 
   useEffect(() => {
     const observer = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        const width = entry.contentRect.width;
+        const contentWidth = entry.contentRect.width;
         
-        if (width > 1400) {
+        if (contentWidth > 1400) {
           setContainerWidth("max-w-full");
-        } else if (width > 1200) {
+        } else if (contentWidth > 1200) {
           setContainerWidth("max-w-6xl");
-        } else if (width > 1000) {
+        } else if (contentWidth > 1000) {
           setContainerWidth("max-w-5xl");
         } else {
           setContainerWidth("max-w-4xl");
@@ -28,11 +28,12 @@ export default function RootLayout({ children }) {
       }
     });
 
-    if (containerRef.current) {
-      observer.observe(containerRef.current);
+    if (contentRef.current) {
+      observer.observe(contentRef.current);
     }
+    
     return () => observer.disconnect();
-  }, []);
+  }, [children]); // 🔄 Recalculer à chaque mise à jour des enfants
 
   return (
     <html lang="fr">
@@ -44,7 +45,7 @@ export default function RootLayout({ children }) {
             <div className="circle-one blur-3xl w-64 h-64 rounded-full bg-rose-400/60 top-0 right-28 absolute"></div>
             <div className="circle-two blur-3xl w-64 h-64 rounded-full bg-indigo-400/60 bottom-0 left-28 absolute"></div>
           </div>
-          
+
           {/* En-tête avec navigation */}
           <header className="z-10 bg-white/50 backdrop-blur rounded-lg border-2 border-gray-500">
             <div className="max-w-4xl mx-auto flex items-center justify-between p-4">
@@ -60,13 +61,13 @@ export default function RootLayout({ children }) {
             </div>
           </header>
 
-          {/* Conteneur principal avec ajustement dynamique et scroll horizontal si nécessaire */}
+          {/* Conteneur principal ajusté dynamiquement */}
           <div className="overflow-x-auto">
-            <main 
-              ref={containerRef} 
-              className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6`}
-            >
-              {children}
+            <main className={`backdrop-blur z-10 w-full ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6`}>
+              {/* 🎯 On observe ce div plutôt que main */}
+              <div ref={contentRef}>
+                {children}
+              </div>
             </main>
           </div>
 
diff --git a/app/portfolio/page.jsx b/app/portfolio/page.jsx
index fa24aaa..27e9eeb 100644
--- a/app/portfolio/page.jsx
+++ b/app/portfolio/page.jsx
@@ -30,7 +30,7 @@ export default async function Page() {
   }
 
   return (
-    <div className={`large-container mx-auto p-6 ${containerWidth}`}>
+    <div className={`mx-auto p-6 ${containerWidth}`}>
       {/* Titre de la page */}
       <h1 className="text-3xl mb-6 font-bold text-grey-700">Portfolio formation 42</h1>
       
