correction du style

Bootstrap_new/css/style_office.css

@@ -225,11 +225,12 @@ body {
     background-color: var(--office-light);
 }
 
-.content-area {
+content-area {
-    padding: 2px 24px 24px 24px;
+    padding: 0 24px 24px 24px; 
     max-width: 1400px;
     margin: 0 auto;
     position: relative;
+    padding-top: calc(var(--header-height) + 56px + 16px); /* Espace pour header + nav-bar + marge */
 }
 
 /* ============================================
@@ -238,31 +239,31 @@ body {
 .nav-bar {
     background-color: white;
     border-radius: 8px;
-    margin-bottom: 24px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--office-border);
-    position: fixed; /* Fixe dans la fenêtre */
+    position: fixed;
-    top: var(--header-height); /* Positionné juste en dessous du header */
+    top: var(--header-height);
-    left: var(--sidebar-width); /* Aligné avec le début du contenu principal */
+    left: var(--sidebar-width);
-    right: 0; /* Prend toute la largeur restante */
+    right: 0;
     z-index: 1000;
-    max-width: calc(1400px + 24px * 2); /* Ajusté pour correspondre au contenu */
+    max-width: calc(1400px + 24px * 2);
     margin: 0 auto;
-    padding: 0 24px; /* Padding pour l'alignement */
+    padding: 0 24px;
-    overflow-x: auto; /* Permettre le défilement horizontal si nécessaire */
+    overflow-x: auto;
-    height: 56px; /* Hauteur fixe pour la barre */
+    height: 56px;
     display: flex;
     align-items: center;
-    transition: left var(--transition-speed) ease; /* Animation avec la sidebar */
+    transition: left var(--transition-speed) ease;
 }
 
 .nav-tabs {
     display: flex;
     gap: 8px;
     overflow-x: auto;
-    padding: 8px 0; /* Ajouté pour l'espace vertical */
+    padding: 8px 0;
-    height: 100%; /* Prend toute la hauteur du nav-bar */
+    height: 100%;
-    align-items: center; /* Centrer verticalement */
+    align-items: center;
+    flex-wrap: nowrap;
 }
 
 .nav-tab {
@@ -296,6 +297,16 @@ body {
     font-size: 16px;
 }
 
+/* ============================================
+   CONTENT AREA - AJUSTÉ POUR LA NAV-BAR FIXE
+   ============================================ */
+.content-area {
+    padding: calc(var(--header-height) + 56px + 16px) 24px 24px 24px;
+    max-width: 1400px;
+    margin: 0 auto;
+    position: relative;
+}
+
 /* ============================================
    CONTENT CARDS - AJUSTÉ POUR LA NAV-BAR FIXE
    ============================================ */
@@ -304,15 +315,18 @@ body {
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--office-border);
-    margin-top: 80px; /* Espace pour la nav-bar fixe (header-height + nav-bar height) */
     margin-bottom: 24px;
     overflow: hidden;
 }
 
 /* Ajustement pour responsive */
 @media (max-width: 1200px) {
-    .content-card {
+    .nav-bar {
-        margin-top: calc(var(--header-height) + 56px);
+        left: var(--sidebar-collapsed);
+    }
+
+    .content-area {
+        padding-left: calc(var(--sidebar-collapsed) + 24px);
     }
 }
 
@@ -702,10 +716,7 @@ body {
         right: -100%;
     }
 
-    /* Pour la version collapsed de la sidebar */
+    
-    .nav-bar {
-        left: var(--sidebar-collapsed);
-    }
 }
 
 /* Pour mobile */
@@ -746,6 +757,13 @@ body {
         left: 0;
         padding: 0 16px;
         max-width: 100%;
+        border-radius: 0;
+        top: var(--header-height);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .content-area {
+        padding: calc(var(--header-height) + 56px) 16px 16px 16px;
     }
 }
 

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