hg

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 {