From 382933529fdf9b93ba958367df48dc6b12603456 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Mon, 22 Dec 2025 19:53:41 +0000
Subject: [PATCH] ba

---
 Bootstrap_new/css/style_office.css | 41 +++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css
index 5cdf664..45234c7 100644
--- a/Bootstrap_new/css/style_office.css
+++ b/Bootstrap_new/css/style_office.css
@@ -242,19 +242,27 @@ body {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--office-border);
     position: fixed; /* Fixe dans la fenêtre */
-    top: [hauteur-du-header]; /* À ajuster selon la hauteur de votre header */
-    left: 0;
-    right: 0;
+    top: var(--header-height); /* Positionné juste en dessous du header */
+    left: var(--sidebar-width); /* Aligné avec le début du contenu principal */
+    right: 0; /* Prend toute la largeur restante */
     z-index: 1000;
-    max-width: 1400px;
+    max-width: calc(1400px + 24px * 2); /* Ajusté pour correspondre au contenu */
     margin: 0 auto;
+    padding: 0 24px; /* Padding pour l'alignement */
+    overflow-x: auto; /* Permettre le défilement horizontal si nécessaire */
+    height: 56px; /* Hauteur fixe pour la barre */
+    display: flex;
+    align-items: center;
+    transition: left var(--transition-speed) ease; /* Animation avec la sidebar */
 }
 
 .nav-tabs {
     display: flex;
     gap: 8px;
     overflow-x: auto;
-    padding-bottom: 4px;
+    padding: 8px 0; /* Ajouté pour l'espace vertical */
+    height: 100%; /* Prend toute la hauteur du nav-bar */
+    align-items: center; /* Centrer verticalement */
 }
 
 .nav-tab {
@@ -289,18 +297,25 @@ body {
 }
 
 /* ============================================
-   CONTENT CARDS
+   CONTENT CARDS - AJUSTÉ POUR LA NAV-BAR FIXE
    ============================================ */
 .content-card {
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--office-border);
-    margin-top: 60px; /* Ajustez selon la hauteur de .nav-bar */
+    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 {
+        margin-top: calc(var(--header-height) + 56px);
+    }
+}
+
 .card-header {
     background-color: #fafafa;
     border-bottom: 1px solid var(--office-border);
@@ -686,8 +701,14 @@ body {
         width: 100%;
         right: -100%;
     }
+
+    /* Pour la version collapsed de la sidebar */
+    .nav-bar {
+        left: var(--sidebar-collapsed);
+    }
 }
 
+/* Pour mobile */
 @media (max-width: 768px) {
     .app-sidebar {
         transform: translateX(-100%);
@@ -720,6 +741,12 @@ body {
     .nav-arrow {
         display: block;
     }
+
+    .nav-bar {
+        left: 0;
+        padding: 0 16px;
+        max-width: 100%;
+    }
 }
 
 /* ============================================