Styling

Bootstrap_new/css/style_office.css

@@ -237,33 +237,37 @@ content-area {
    NAVIGATION TABS
    ============================================ */
 .nav-bar {
-    background-color: white;
+    background-color: #ffffff;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 8px rgba(183, 71, 42, 0.08);
-    border: 1px solid var(--office-border);
+    border: 1px solid rgba(183, 71, 42, 0.15);
     position: fixed;
     top: var(--header-height);
     left: var(--sidebar-width);
     right: 0;
     z-index: 1000;
-    max-width: calc(1400px + 24px * 2);
+    width: calc(100% - var(--sidebar-width)); /* Largeur dynamique */
+    max-width: 1400px; /* Largeur max fixe */
     margin: 0 auto;
     padding: 0 24px;
     overflow-x: auto;
     height: 56px;
     display: flex;
     align-items: center;
-    transition: left var(--transition-speed) ease;
+    transition: all 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: 8px;
+    gap: 4px;
     overflow-x: auto;
-    padding: 8px 0;
+    padding: 0;
     height: 100%;
     align-items: center;
     flex-wrap: nowrap;
+    width: 100%;
 }
 
 .nav-tab {
@@ -301,28 +305,44 @@ content-area {
    CONTENT AREA - AJUSTÉ POUR LA NAV-BAR FIXE
    ============================================ */
 .content-area {
-    padding: calc(var(--header-height) + 56px + 16px) 24px 24px 24px;
+    padding: calc(var(--header-height) + 56px + 20px) 24px 24px 24px;
     max-width: 1400px;
     margin: 0 auto;
     position: relative;
+    width: 100%;
 }
 
 /* ============================================
-   CONTENT CARDS - AJUSTÉ POUR LA NAV-BAR FIXE
+   CONTENT CARDS - HARMONISÉ AVEC NAV-BAR
    ============================================ */
 .content-card {
     background-color: white;
-    border-radius: 8px;
+    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
-    border: 1px solid var(--office-border);
+    border: 1px solid rgba(183, 71, 42, 0.12);
     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 {
@@ -330,6 +350,19 @@ content-area {
     }
 }
 
+/* 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;
     border-bottom: 1px solid var(--office-border);
@@ -343,7 +376,9 @@ content-area {
 }
 
 .card-body {
-    padding: 24px;
+    padding: 28px;
+    background-color: #fefcfb;
+    min-height: 400px;
 }
 
 /* ============================================
@@ -755,16 +790,35 @@ 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 8px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 12px rgba(183, 71, 42, 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);
+        transform: none;
+    }
 }
 
 /* ============================================
@@ -791,3 +845,24 @@ 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.03" rel="stylesheet">
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.22.04" rel="stylesheet">
         <link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
 
         <!-- ============================================