Fr

Bootstrap_new/css/style_office.css

@@ -244,30 +244,26 @@ content-area {
     position: fixed;
     top: var(--header-height);
     left: var(--sidebar-width);
-    right: 0;
+    right: 24px; /* Au lieu de right: 0 */
     z-index: 1000;
-    width: calc(100% - var(--sidebar-width)); /* Largeur dynamique */
+    margin: 0 24px 0 0; /* Marge à droite */
-    max-width: 1400px; /* Largeur max fixe */
-    margin: 0 auto;
     padding: 0 24px;
     overflow-x: auto;
     height: 56px;
     display: flex;
     align-items: center;
-    transition: all var(--transition-speed) ease;
+    transition: left var(--transition-speed) ease;
     background: linear-gradient(135deg, #ffffff 0%, #fef8f7 100%);
-    transform: translateX(calc((100vw - min(100vw, 1400px)) / 2)); /* Centrage précis */
 }
 
 .nav-tabs {
     display: flex;
-    gap: 4px;
+    gap: 8px;
     overflow-x: auto;
-    padding: 0;
+    padding: 8px 0;
     height: 100%;
     align-items: center;
     flex-wrap: nowrap;
-    width: 100%;
 }
 
 .nav-tab {
@@ -301,67 +297,35 @@ content-area {
     font-size: 16px;
 }
 
+@media (max-width: 1400px) {
+    .nav-bar {
+        right: 24px;
+        margin: 0 24px 0 0;
+    }
+}
+
 /* ============================================
    CONTENT AREA - AJUSTÉ POUR LA NAV-BAR FIXE
    ============================================ */
 .content-area {
-    padding: calc(var(--header-height) + 56px + 20px) 24px 24px 24px;
+    padding: calc(var(--header-height) + 56px + 16px) 24px 24px 24px;
     max-width: 1400px;
     margin: 0 auto;
     position: relative;
-    width: 100%;
 }
 
 /* ============================================
-   CONTENT CARDS - HARMONISÉ AVEC NAV-BAR
+   CONTENT CARDS - AJUSTÉ POUR LA NAV-BAR FIXE
    ============================================ */
 .content-card {
     background-color: white;
-    border-radius: 12px;
+    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    border: 1px solid rgba(183, 71, 42, 0.12);
+    border: 1px solid var(--office-border);
     margin-bottom: 24px;
     overflow: hidden;
-    width: 100%;
 }
 
-/* Bordure subtile en haut pour lier visuellement avec nav-bar */
-.content-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, var(--office-primary), #d15a3a, #ff7b5c);
-    opacity: 0.8;
-}
-
-/* Ajustement pour responsive */
-@media (max-width: 1200px) {
-    .nav-bar {
-        left: var(--sidebar-collapsed);
-        width: calc(100% - var(--sidebar-collapsed));
-        transform: translateX(calc((100vw - min(100vw, 1400px)) / 2));
-    }
-    
-    .content-area {
-        padding-left: calc(var(--sidebar-collapsed) + 24px);
-    }
-}
-
-/* Pour les écrans larges (au-delà de 1400px) */
-@media (min-width: 1400px) {
-    .nav-bar {
-        left: calc(50% - 700px + var(--sidebar-width) / 2); /* Centrage précis */
-        right: auto;
-        width: calc(1400px - var(--sidebar-width));
-    }
-    
-    .app-sidebar {
-        left: calc(50% - 700px); /* Sidebar aussi centrée */
-    }
-}
 
 .card-header {
     background-color: #fafafa;
@@ -376,9 +340,7 @@ content-area {
 }
 
 .card-body {
-    padding: 28px;
+    padding: 24px;
-    background-color: #fefcfb;
-    min-height: 400px;
 }
 
 /* ============================================
@@ -751,6 +713,11 @@ content-area {
         right: -100%;
     }
 
+    .nav-bar {
+        left: var(--sidebar-collapsed);
+        right: 24px;
+        margin: 0 24px 0 0;
+    }
     
 }
 
@@ -790,34 +757,19 @@ content-area {
 
     .nav-bar {
         left: 0;
-        width: 100%;
         padding: 0 16px;
         max-width: 100%;
         border-radius: 0;
         top: var(--header-height);
-        box-shadow: 0 2px 12px rgba(183, 71, 42, 0.1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transform: none;
     }
 
-    .content-area {
-        padding: calc(var(--header-height) + 56px) 16px 16px 16px;
-    }
-    
-    .content-card {
-        border-radius: 8px;
-        margin: 0 0 16px 0;
-    }
-    
-    .card-body {
-        padding: 20px;
-    }
-}
-
-/* Correction pour éviter le débordement sur écrans étroits */
-@media (max-width: 1400px) {
     .nav-bar {
-        max-width: calc(100% - 48px);
+        left: 0;
-        transform: none;
+        right: 0;
+        margin: 0;
+        border-radius: 0;
+        padding: 0 16px;
     }
 }
 
@@ -845,24 +797,3 @@ content-area {
 .context-body::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.4);
 }
-
-/* ============================================
-   STYLE DE SCROLLBAR POUR NAV-TABS
-   ============================================ */
-.nav-tabs::-webkit-scrollbar {
-    height: 4px;
-}
-
-.nav-tabs::-webkit-scrollbar-track {
-    background: rgba(183, 71, 42, 0.05);
-    border-radius: 2px;
-}
-
-.nav-tabs::-webkit-scrollbar-thumb {
-    background: rgba(183, 71, 42, 0.2);
-    border-radius: 2px;
-}
-
-.nav-tabs::-webkit-scrollbar-thumb:hover {
-    background: rgba(183, 71, 42, 0.3);
-}

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.22.05" rel="stylesheet">
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.22.06" rel="stylesheet">
         <link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
 
         <!-- ============================================