Test

Bootstrap_new/css/style_office.css

@@ -319,13 +319,6 @@ body {
 }
 
 
-/* Content area fluide */
-.content-area {
-    padding: calc(var(--header-height) + 56px + 8px) 24px 24px 24px; /* Réduction de +16px à +8px */
-    max-width: 1400px;
-    margin: 0 auto;
-}
-
 /* Content card */
 .content-card {
     background: var(--office-card);
@@ -335,18 +328,13 @@ body {
 }
 
 
-/* Ajustement pour responsive */
+/* Sidebar collapsée (tablette) */
 @media (max-width: 1200px) {
-    .nav-bar {
-        left: var(--sidebar-collapsed);
-    }
-    
-    .content-area {
-        padding-left: 24px;
-        padding-right: 24px;
-    }
+  .nav-bar { left: var(--sidebar-collapsed); }
+  .content-area { padding-left: 24px; padding-right: 24px; }
 }
 
+
 .card-header {
     background-color: #fafafa;
     border-bottom: 1px solid var(--office-border);
@@ -736,75 +724,35 @@ body {
     }
 }
 
-/* Pour mobile */
+/* Mobile — UNE SEULE définition */
 @media (max-width: 768px) {
-    .app-sidebar {
-        transform: translateX(-100%);
-        width: var(--sidebar-width);
-    }
+  .app-sidebar { transform: translateX(-100%); width: var(--sidebar-width); }
+  .app-sidebar.show { transform: translateX(0); }
+  .app-main { margin-left: 0; }
 
-    .app-sidebar.show {
-        transform: translateX(0);
-    }
-
-    .app-main {
-        margin-left: 0;
-    }
-    
-    .content-area {
-        padding: calc(var(--header-height) + 56px + 8px) 16px 16px 16px;
-        max-width: 100%;
-    }
-    
-    .header-content {
-        padding: 0 16px;
-    }
-    
-    .user-info {
-        display: none;
-    }
-    
-    .nav-text,
-    .nav-title,
-    .nav-badge,
-    .nav-arrow {
-        display: block;
-    }
-
-    .nav-bar {
-        left: 0;
-        border-radius: 0;
-        top: var(--header-height);
-    }
-    
-    .nav-bar > .nav-tabs {
-        padding: 0 16px;
-    }
-    
-    .content-area {
-        padding: calc(var(--header-height) + 56px) 16px 16px 16px;
-    }
-    
-    .content-card {
-        border-radius: 8px;
-        margin: 8px 0 16px 0; /* 8px en haut, 16px en bas */
-    }
+  .nav-bar { left: 0; border-radius: 0; top: var(--header-height); }
+  .nav-bar > .nav-tabs { padding: 0 16px; }
 
+  /* Garder +8px ici pour fermer l’écart (rouge) */
+  .content-area {   padding: calc(var(--header-height) + 56px + 8px) 16px 16px 16px;  max-width: 100%; }
+  .content-card { border-radius: 8px;  margin: 8px 0 16px 0; /* 8px en haut, 16px en bas */ }
+  .header-content { padding: 0 16px; }
+  .user-info { display: none; }
 }
 
-/* Correction pour les écrans larges */
+/* Écrans larges : mêmes insets pour nav-tabs et content-area */
 @media (min-width: 1400px) {
-    .nav-bar > .nav-tabs {
-        padding-left: calc((100vw - 1400px) / 2);
-        padding-right: calc((100vw - 1400px) / 2);
-    }
-    
-    .content-area {
-        padding-left: calc((100vw - 1400px) / 2);
-        padding-right: calc((100vw - 1400px) / 2);
-    }
+  .nav-bar > .nav-tabs {
+    padding-left: calc((100vw - 1400px) / 2);
+    padding-right: calc((100vw - 1400px) / 2);
+  }
+  .content-area {
+    padding-left: calc((100vw - 1400px) / 2);
+    padding-right: calc((100vw - 1400px) / 2);
+  }
 }
 
+
 /* ============================================
    SCROLLBAR STYLING
    ============================================ */