gf

Bootstrap_new/css/style_moderne.css

@@ -1,117 +1,23 @@
+/* --- Structure Globale --- */
 :root {
     --primary-color: #0088cf;
-    --bg-workspace: #f6f9ff;
-    --sidebar-width: 280px;
-    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    --sidebar-bg: #2c3e50; /* Couleur sombre pro pour trancher avec le contenu */
-    --header-height: 60px;
+    --sidebar-bg: #2c3e50;
+    --main-bg: #f6f9ff;
 }
 
 body {
-    background-color: var(--bg-workspace) !important;
-    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    background-color: var(--main-bg);
+    font-family: 'Open Sans', sans-serif;
 }
 
-/* Modernisation des inputs */
-.form-control, .form-select {
-    border-radius: 8px;
-    border: 1px solid #dee2e6;
-    padding: 0.6rem 0.75rem;
-    transition: all 0.2s;
-}
-
-.form-control:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 0.25rem rgba(0, 136, 207, 0.1);
-}
-
-/* Suppression du look "Tableau de bord 2010" pour les fieldsets */
-fieldset {
-    background: #fff;
-    border-radius: 12px;
-    padding: 1.5rem;
-    box-shadow: var(--card-shadow);
-    border: none;
-    margin-bottom: 1.5rem;
-}
-
-legend {
-    float: none;
-    width: auto;
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    padding: 0 10px;
-}
-
-/* Style des cartes pour remplacer les fieldsets */
-.card-modern {
-    background: #ffffff;
-    border: none;
-    border-radius: 10px;
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    margin-bottom: 1.5rem;
-}
-
-/* On épure le scrollbar pour le côté moderne */
-::-webkit-scrollbar {
-    width: 6px;
-}
-::-webkit-scrollbar-thumb {
-    background: #ccc;
-    border-radius: 10px;
-}
-
-.sidebar {
-    background-color: #2c3e50 !important; /* Couleur pro */
-    padding-top: 20px;
-}
-.sidebar-nav .nav-link {
-    background: transparent;
-    color: #ecf0f1;
-    font-weight: 500;
-    transition: 0.3s;
-}
-.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active-main {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--primary-color);
-    border-left: 4px solid var(--primary-color);
-}
-.sidebar-nav .nav-content a {
-    padding-left: 45px;
-    font-size: 0.9rem;
-    color: #bdc3c7;
-}
-
-.nav-scroller {
-    scrollbar-width: none; /* Cache la barre de scroll sur Firefox */
-}
-.nav-scroller::-webkit-scrollbar {
-    display: none; /* Cache la barre de scroll sur Chrome/Safari */
-}
-
-/* Espacement du Main */
 #main {
-    margin-top: 60px; /* Hauteur du header */
-    padding: 20px 0;
-    min-height: calc(100vh - 60px);
-    background-color: #f6f9ff;
     transition: all 0.3s;
+    min-height: calc(100vh - 60px);
 }
 
-/* Style du fil d'ariane */
-.breadcrumb-item + .breadcrumb-item::before {
-    content: "\f105" !important; /* Symbole FontAwesome > */
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    padding-right: 12px;
-    color: #adb5bd;
-}
-
-/* Onglets fluides */
-.nav-scroller {
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
+/* --- Fil d'Ariane & Onglets --- */
+.breadcrumb-container .breadcrumb {
+    border: none;
 }
 
 .sub-nav-link {
@@ -123,28 +29,13 @@ legend {
     transition: all 0.2s;
 }
 
-.sub-nav-link:hover {
-    color: #0088cf;
+.sub-nav-link:hover, .active-tab {
+    color: var(--primary-color) !important;
+    border-bottom: 3px solid var(--primary-color) !important;
     background: rgba(0, 136, 207, 0.05);
 }
 
-.active-tab {
-    color: #0088cf !important;
-    border-bottom: 3px solid #0088cf !important;
-    background: rgba(0, 136, 207, 0.08);
-}
-
-/* Animation douce lors du changement de page */
-#contenu {
-    animation: fadeIn 0.4s ease-in-out;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-/* Bouton flottant Chatbot */
+/* --- Chatbot & Contexte (Droite) --- */
 .chatbot-trigger {
     position: fixed;
     bottom: 30px;
@@ -152,7 +43,7 @@ legend {
     width: 60px;
     height: 60px;
     border-radius: 50%;
-    background: #0088cf;
+    background: var(--primary-color);
     color: white;
     border: none;
     z-index: 1060;
@@ -162,15 +53,21 @@ legend {
     font-size: 24px;
 }
 
-.badge-msg-count {
+.pulse {
     position: absolute;
-    top: -5px;
-    right: -5px;
-    font-size: 0.7rem;
-    border: 2px solid white;
+    width: 100%; height: 100%;
+    border-radius: 50%;
+    background: var(--primary-color);
+    opacity: 0.6;
+    animation: pulse-animation 2s infinite;
+    z-index: -1;
+}
+
+@keyframes pulse-animation {
+    0% { transform: scale(1); opacity: 0.6; }
+    100% { transform: scale(1.6); opacity: 0; }
 }
 
-/* Sidebar Contextuelle */
 .context-sidebar {
     position: fixed;
     top: 60px;
@@ -182,49 +79,24 @@ legend {
     transition: all 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
     display: flex;
     flex-direction: column;
+    border-left: 1px solid #e0e6ed;
 }
 
-.context-sidebar.active {
-    right: 0;
-}
-
-.context-header {
-    padding: 15px;
-    background: white;
-}
+.context-sidebar.active { right: 0; }
 
 .section-label {
     font-size: 10px;
     font-weight: 800;
     color: #8e9db5;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
     margin-bottom: 5px;
     display: block;
 }
 
-.info-card {
-    transition: transform 0.2s;
-}
-
-.info-card:hover {
-    transform: translateY(-2px);
-}
-
-.stats-grid {
-    font-size: 9px;
-    letter-spacing: -0.2px;
-}
-
-.btn-close-context {
-    border: none;
-    background: transparent;
-    color: #adb5bd;
-    font-size: 1.5rem;
-    transition: 0.2s;
-}
-
-.btn-close-context:hover {
-    color: #0088cf;
-    transform: translateX(3px);
+/* --- Sidebar Gauche --- */
+.sidebar {
+    width: 250px;
+    background-color: var(--sidebar-bg);
+    min-height: 100vh;
 }
+.toggle-sidebar .sidebar { margin-left: -250px; }