From 5fb85a43411746eaf6ed1fd5b1503b32e0bee5e6 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Thu, 2 Apr 2026 17:22:06 +0000
Subject: [PATCH] der

---
 Bootstrap_new/css/custom.css       |   4 +-
 Bootstrap_new/css/theme-modern.css | 178 ++++++++++++++---------------
 2 files changed, 89 insertions(+), 93 deletions(-)

diff --git a/Bootstrap_new/css/custom.css b/Bootstrap_new/css/custom.css
index ec561281..4d6e7889 100755
--- a/Bootstrap_new/css/custom.css
+++ b/Bootstrap_new/css/custom.css
@@ -24,7 +24,7 @@ color:white
 }
 
 .sidebar-nav .nav-content a:hover{
-  color:#9c9da0 !important;
+  color:#cac2a4 !important;
   /* background:grey !important */
   font-weight: bold !important;
 }
@@ -124,7 +124,7 @@ padding:5px
 }
 
 .sidebar-nav .nav-link{
-width:170px
+width:190px
 }
 
 #main{
diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index 552c754b..a1dc5a4c 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -265,17 +265,17 @@ h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold {
    Section 2 : Sidebar (Navigation Haute Densité)
    ============================================================ */
 #sidebar {
-    width: var(--sidebar-width);
-    background: var(--color-primary); /* Charcoal profond pour le contraste */
-    position: fixed;
-    top: var(--header-height);
-    left: 0;
-    height: calc(100vh - var(--header-height));
-    /*overflow-y: auto;*/
-    border-right: 1px solid rgba(255, 255, 255, 0.05);
-    transition: width var(--transition-base);
-    z-index: 900;
-    padding: 1rem 0.5rem;
+  width: var(--sidebar-width);
+  background: var(--bg-sidebar);
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  height: calc(100vh - var(--header-height));
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: width var(--transition-slow);
+  z-index: 900;
+  padding: 8px 4px;
 }
 
 /* Liseré supérieur discret — gris clair */
@@ -289,50 +289,51 @@ h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold {
 
 /* Sidebar Nav */
 .sidebar-nav {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-.sidebar-nav .nav-item { margin-bottom: 4px; }
+.sidebar-nav .nav-item { margin-bottom: 2px; }
 
 /* Parent links */
 .sidebar-nav > .nav-item > .nav-link {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    border-radius: var(--radius-sm);
-    color: rgba(255, 255, 255, 0.65);
-    font-size: 13px;
-    font-weight: 500;
-    text-decoration: none;
-    transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 9px 10px;
+  border-radius: var(--radius-md);
+  color: rgba(255,255,255,0.72);
+  font-size: 0.82rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all var(--transition-base);
+  position: relative;
 }
 
-.sidebar-nav > .nav-item > .nav-link:hover{
+.sidebar-nav > .nav-item > .nav-link:hover,
+.sidebar-nav > .nav-item > .nav-link.active {
   background: rgba(255,255,255,0.10);
   color: white;
 }
 
-/* État Actif (Parent) */
-.sidebar-nav > .nav-item > .nav-link.active,
-.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] {
-    background: rgba(255, 255, 255, 0.08);
-    color: #FFFFFF;
-}
-
 .sidebar-nav > .nav-item > .nav-link i:first-child {
-    font-size: 1.1rem;
-    width: 20px;
-    text-align: center;
-    opacity: 0.9;
+  font-size: 1.1rem;
+  width: 22px;
+  text-align: center;
+  flex-shrink: 0;
+  opacity: 0.85;
 }
 
 .sidebar-nav > .nav-item > .nav-link span {
-    font-family: 'Syne', sans-serif;
-    font-weight: 600;
-    letter-spacing: 0.02em;
+  font-family: 'Syne', sans-serif;
+  font-size: 0.8rem;
+  letter-spacing: 0.01em;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Active item : blanc brillant */
@@ -355,51 +356,45 @@ h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold {
 
 /* Sub-menu (Level 1) */
 .sidebar-nav .nav-content {
-    list-style: none;
-    padding: 5px 0 5px 15px; /* Indentation réduite */
-    margin: 4px 0;
-    border-left: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de guide verticale */
-    margin-left: 22px; 
+  list-style: none;
+  padding: 4px 0 4px 32px;
+  margin: 0;
+  background: rgba(0,0,0,0.18);
+  border-radius: var(--radius-sm);
+  margin-bottom: 2px;
 }
 
 .sidebar-nav .nav-content li { margin-bottom: 1px; }
 
 .sidebar-nav .nav-content li a {
-    display: flex;
-    align-items: center;
-    padding: 8px 12px;
-    border-radius: var(--radius-sm);
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 12px;
-    text-decoration: none;
-    transition: all var(--transition-fast);
+  display: block;
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
+  color: rgba(255,255,255,0.55);
+  font-size: 0.78rem;
+  text-decoration: none;
+  transition: all var(--transition-fast);
+  border-left: 2px solid transparent;
+  position: relative;
 }
 
 .sidebar-nav .nav-content li a:hover {
-    color: #FFFFFF;
-    background: rgba(255, 255, 255, 0.05);
+  color: white;
+  background: rgba(255,255,255,0.07);
+  border-left-color: rgba(255,255,255,0.5);
+  padding-left: 14px;
 }
 
-/* Sous-menu actif : Barre verticale discrète */
+/* Sous-menu actif : fond blanc translucide + bordure blanche */
 .sidebar-nav .nav-content li a.active-submenu {
-    color: #FFFFFF;
-    background: rgba(255, 255, 255, 0.1);
-    font-weight: 600;
-    position: relative;
+  color: #ffffff;
+  background: rgba(255,255,255,0.12);
+  border-left-color: #ffffff;
+  font-weight: 600;
+  padding-left: 10px;
+  width: 100% !important;
 }
 
-.sidebar-nav .nav-content li a.active-submenu::before {
-    content: '';
-    position: absolute;
-    left: -16px; /* S'aligne sur la bordure gauche du nav-content */
-    top: 20%;
-    height: 60%;
-    width: 3px;
-    background: #FFFFFF;
-    border-radius: 0 2px 2px 0;
-}
-
-/*
 .sidebar-nav .nav-content li a.active-submenu::after {
   content: '';
   position: absolute;
@@ -411,44 +406,45 @@ h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold {
   border-radius: 50%;
   background: rgba(255,255,255,0.8);
 }
-*/
 
-/* Titres de sections (ex: PARAMÉTRAGE, COMPTABILITÉ) */
+/* Separator label */
 .sidebar-section-label {
-    font-family: 'Syne', sans-serif;
-    font-size: 10px;
-    font-weight: 800;
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.3);
-    padding: 20px 12px 8px;
+  font-family: 'Syne', sans-serif;
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.28);
+  padding: 12px 10px 4px;
+  margin-top: 4px;
 }
 
-/* Sidebar Footer & Versioning */
 .sidebar-footer {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: 12px 15px;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    background: var(--color-primary);
+    padding: 15px;
+    border-top: 1px solid var(--border-light);
+    background: var(--bg-sidebar); /* Garde la couleur de ta sidebar */
 }
 
 .version-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 9px;
-    color: rgba(255, 255, 255, 0.3);
-    font-weight: 700;
+    font-size: 0.7rem;
+    color: rgba(255, 255, 255, 0.4); /* Très discret sur fond sombre */
+    font-family: 'DM Sans', sans-serif;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
 .version-tag {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.1);
     padding: 2px 6px;
-    border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    font-weight: 700;
 }
 
 /* ==============================