diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css
index 59b5578..7c1c6bf 100644
--- a/Bootstrap_new/css/style_office.css
+++ b/Bootstrap_new/css/style_office.css
@@ -24,6 +24,14 @@
/* Responsive breakpoints */
--breakpoint-tablet: 1200px;
--breakpoint-mobile: 768px;
+
+ --office-primary-light: rgba(183, 71, 42, 0.08);
+ --office-primary-lighter: rgba(183, 71, 42, 0.04);
+ --office-primary-border: rgba(183, 71, 42, 0.15);
+ --office-warm-bg: #fefcfb;
+ --office-card-highlight: #fff9f8;
+ --content-margin-left: calc(var(--sidebar-width) + 24px);
+ --content-margin-right: 24px;
}
/* ============================================
@@ -237,33 +245,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);
- border: 1px solid var(--office-border);
+ box-shadow: 0 2px 8px rgba(183, 71, 42, 0.08);
+ border: 1px solid rgba(183, 71, 42, 0.15);
position: fixed;
top: var(--header-height);
- left: var(--sidebar-width);
+ left: 0;
right: 0;
z-index: 1000;
- max-width: calc(1400px + 24px * 2);
- margin: 0 auto;
- padding: 0 24px;
+ width: calc(100% - var(--sidebar-width)); /* Largeur totale moins sidebar */
+ max-width: 1400px; /* Largeur max identique à content-area */
+ margin: 0 auto 0 calc(var(--sidebar-width) + 24px); /* Marge gauche = sidebar + padding */
+ padding: 0;
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%);
}
+/* Conteneur interne pour le padding */
.nav-tabs {
display: flex;
- gap: 8px;
+ gap: 4px;
overflow-x: auto;
- padding: 8px 0;
+ padding: 0 24px; /* Padding ici au lieu de sur nav-bar */
height: 100%;
align-items: center;
flex-wrap: nowrap;
+ width: 100%;
}
.nav-tab {
@@ -301,28 +313,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 - LARGEUR IDENTIQUE À NAV-BAR
============================================ */
.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);
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+ border: 1px solid rgba(183, 71, 42, 0.12);
margin-bottom: 24px;
overflow: hidden;
+ width: calc(100% - var(--sidebar-width) - 48px); /* Largeur identique à nav-bar */
+ max-width: 1400px;
+ margin-left: calc(var(--sidebar-width) + 24px); /* Alignement avec nav-bar */
+ margin-right: 24px;
}
/* Ajustement pour responsive */
@media (max-width: 1200px) {
+ .nav-bar {
+ width: calc(100% - var(--sidebar-collapsed));
+ margin-left: calc(var(--sidebar-collapsed) + 24px);
+ max-width: calc(1400px - var(--sidebar-collapsed));
+ }
+
.content-card {
- margin-top: calc(var(--header-height) + 56px);
+ width: calc(100% - var(--sidebar-collapsed) - 48px);
+ margin-left: calc(var(--sidebar-collapsed) + 24px);
+ }
+
+ .content-area {
+ padding-left: calc(var(--sidebar-collapsed) + 24px);
}
}
@@ -339,7 +367,21 @@ content-area {
}
.card-body {
- padding: 24px;
+ padding: 28px;
+ background-color: #fefcfb;
+ min-height: 400px;
+}
+
+/* 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;
}
/* ============================================
@@ -711,11 +753,6 @@ content-area {
width: 100%;
right: -100%;
}
-
- /* Pour la version collapsed de la sidebar */
- .nav-bar {
- left: var(--sidebar-collapsed);
- }
}
/* Pour mobile */
@@ -754,9 +791,45 @@ content-area {
.nav-bar {
left: 0;
- padding: 0 16px;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+ top: var(--header-height);
+ box-shadow: 0 2px 12px rgba(183, 71, 42, 0.1);
max-width: 100%;
}
+
+ .nav-tabs {
+ padding: 0 16px;
+ }
+
+ .content-area {
+ padding: calc(var(--header-height) + 56px) 16px 16px 16px;
+ }
+
+ .content-card {
+ width: 100%;
+ margin: 0 0 16px 0;
+ border-radius: 8px;
+ }
+
+ .card-body {
+ padding: 20px;
+ }
+}
+
+/* Pour les très grands écrans (au-delà de 1400px) */
+@media (min-width: 1400px) {
+ .nav-bar {
+ margin-left: calc((100vw - 1400px) / 2 + var(--sidebar-width) + 24px);
+ width: calc(1400px - var(--sidebar-width) - 48px);
+ }
+
+ .content-card {
+ margin-left: calc((100vw - 1400px) / 2 + var(--sidebar-width) + 24px);
+ width: calc(1400px - var(--sidebar-width) - 48px);
+ }
}
/* ============================================
@@ -782,4 +855,25 @@ content-area {
.app-sidebar::-webkit-scrollbar-thumb:hover,
.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);
}
\ No newline at end of file
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index f9d2a91..2228633 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -145,7 +145,7 @@ console.groupEnd();
-
+