diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css
index 79c04c8..1e85238 100644
--- a/Bootstrap_new/css/style_office.css
+++ b/Bootstrap_new/css/style_office.css
@@ -233,6 +233,16 @@ body {
     background-color: var(--office-light);
 }
 
+/* Quand sidebar réduite */
+.app-sidebar.collapsed {
+    width: var(--sidebar-collapsed);
+}
+
+.app-main.collapsed {
+    margin-left: var(--sidebar-collapsed);
+}
+
+
 content-area {
     padding: 0 24px 24px 24px; 
     max-width: 1400px;
@@ -307,28 +317,20 @@ content-area {
     font-size: 16px;
 }
 
-/* ============================================
-   CONTENT AREA - SIMPLIFIÉ
-   ============================================ */
-.content-area.content-area {
-    padding: calc(var(--header-height) + 56px + 16px) 0 0 0 !important;
-    max-width: 100vw !important;
-    margin: 0 !important;
-    width: 100vw !important;
-    overflow-x: hidden;
+
+/* Content area fluide */
+.content-area {
+    padding: calc(var(--header-height) + 56px + 16px) 24px 24px 24px;
+    max-width: 1400px;
+    margin: 0 auto;
 }
 
-/* ============================================
-   CONTENT CARD - SIMPLE ET PROPRE
-   ============================================ */
+/* Content card */
 .content-card {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-   
-    width: 100vw !important;
-    max-width: 100vw !important;
-    margin-top: -120px !important;
+    background: var(--office-card);
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0,0,0,.05);
+    margin-top: 24px;
 }
 
 
@@ -357,15 +359,11 @@ content-area {
 }
 
 .card-body {
-    background-color: var(--office-light);
-    padding: 30px !important;
-    border: none !important;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    min-height: calc(100vh - var(--header-height) - 56px - 16px) !important;
-    margin-left: -75px;
+    padding: 24px;
+    background-color: var(--office-card);
 }
 
+
 /* ============================================
    HEADER CONTROLS
    ============================================ */
@@ -700,10 +698,10 @@ content-area {
     .app-sidebar {
         width: var(--sidebar-collapsed);
     }
-    
     .app-main {
         margin-left: var(--sidebar-collapsed);
     }
+
     
     .nav-text,
     .nav-title,
@@ -743,21 +741,22 @@ content-area {
         transform: translateX(-100%);
         width: var(--sidebar-width);
     }
-    
-    .app-sidebar.open {
+
+    .app-sidebar.show {
         transform: translateX(0);
     }
-    
+
     .app-main {
         margin-left: 0;
     }
     
-    .header-content {
-        padding: 0 16px;
+    .content-area {
+        padding: calc(var(--header-height) + 56px) 16px 16px 16px;
+        max-width: 100%;
     }
     
-    .content-area {
-        padding: 16px;
+    .header-content {
+        padding: 0 16px;
     }
     
     .user-info {
diff --git a/Bootstrap_new/js/ux-manager.js b/Bootstrap_new/js/ux-manager.js
index 41bd10f..1d80087 100644
--- a/Bootstrap_new/js/ux-manager.js
+++ b/Bootstrap_new/js/ux-manager.js
@@ -69,16 +69,18 @@ class UXManager {
      */
     toggleSidebar() {
         const sidebar = document.getElementById('sidebar');
-        if (sidebar) {
-            sidebar.classList.toggle('show');
-            // Annoncer le changement pour l'accessibilité
+        const main = document.getElementById('mainContent');
+        if (sidebar && main) {
+            sidebar.classList.toggle('collapsed');
+            main.classList.toggle('collapsed');
             this.accessibility.announce(
-                sidebar.classList.contains('show') 
-                    ? 'Menu latéral ouvert' 
-                    : 'Menu latéral fermé'
+                sidebar.classList.contains('collapsed') 
+                    ? 'Menu latéral réduit' 
+                    : 'Menu latéral ouvert'
             );
         }
     }
+
     
     /**
      * Vérifier et gérer l'expiration de session utilisateur
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 2ce4e5d..90fb9e9 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -145,7 +145,7 @@ console.groupEnd();
         <link rel="manifest" href="<?= $racineWeb ?>manifest.json">
         
         <!-- 4. VOS STYLES PERSONNALISÉS (en dernier pour qu'ils dominent) -->
-        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.23.05" rel="stylesheet">
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.23.06" rel="stylesheet">
         <link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
 
         <!-- ============================================
@@ -278,7 +278,7 @@ console.groupEnd();
         <header class="app-header">
             <div class="header-content">
                 <div class="logo-container">
-                    <button class="header-btn sidebar-toggle" aria-label="Menu navigation" onclick="appUX.toggleSidebar()">
+                    <button class="header-btn toggle-sidebar-btn" aria-label="Basculer la sidebar" onclick="appUX.toggleSidebar()">
                         <i class="bi bi-list"></i>
                     </button>
                     
@@ -632,7 +632,7 @@ console.groupEnd();
         <?php endif; ?>
 
         <!-- UX Enhancement Script -->
-        <script src="/Bootstrap_new/js/ux-manager.js?ver=2025.12.23.00"></script>
+        <script src="/Bootstrap_new/js/ux-manager.js?ver=2025.12.23.01"></script>
         
         <!-- Service Worker Registration -->
         <script src="/Js/sw-register.js?ver=2025.12.22.00"></script>