From 64338db79ce31114381d8f63b3c71c1369b66821 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Wed, 25 Feb 2026 13:46:04 +0000
Subject: [PATCH] av

---
 Bootstrap_new/css/theme-modern.css | 1398 +++++++++++++++++++++++-----
 1 file changed, 1144 insertions(+), 254 deletions(-)

diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index 39029901..7e7dd555 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1,57 +1,1143 @@
-/* ============================================================
-   INTER SANTÉ — THEME MODERN (MASTER SaaS EDITION)
-   Focus: High-Density Data, Decision Clarity & Office 365 UI
-   ============================================================ */
+/* =============================
+   INTER SANTÉ — THEME MODERN
+   SaaS Premium UI v2025
+   ============================= */
 
-/* === 1. FONTS & DESIGN TOKENS === */
-@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700&display=swap');
+/* === FONTS === */
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
 
+/* === CSS VARIABLES === */
 :root {
-  /* Palette Microsoft Outlook 365 & Enterprise */
-  --color-primary:       #0078d4; 
-  --color-primary-light: #2b88d8;
-  --color-primary-dark:  #005a9e;
-  --color-primary-ghost: #eff6fc;
+  /* Brand Colors */
+  --color-primary:       #1a6b4a;
+  --color-primary-light: #25a06e;
+  --color-primary-dark:  #114532;
+  --color-primary-ghost: rgba(26, 107, 74, 0.08);
 
-  /* Statuts Métier (Clarté Décisionnelle) */
-  --color-success:       #107c10; /* Vert Excel */
-  --color-urgent:        #d13438; /* Rouge Alerte */
-  --color-warning:       #ffaa44; /* Orange Attention */
+  /* Accent / Status */
+  --color-accent:        #0abf7c;
+  --color-urgent:        #e63946;
+  --color-warning:       #f4a261;
+  --color-success:       #2ec4b6;
   --color-info:          #3a86ff;
   --color-neutral:       #6c757d;
 
-  /* Backgrounds & Contrastes (Optimisé pour 8h de travail/jour) */
-  --bg-app:              #f3f2f1; /* Gris neutre Office */
-  --bg-card:             #ffffff;
-  --text-main:           #323130; /* Noir Microsoft pour lecture longue */
-  --text-muted:          #605e5c;
-  --border-light:        #edebe9;
+  /* Backgrounds */
+  --bg-base:             #f4f6f9;
+  --bg-surface:          #ffffff;
+  --bg-surface-2:        #f8fafc;
+  --bg-sidebar:          #0f2d20;
+  --bg-header:           #ffffff;
 
-  /* Structure & Arrondis (Équilibre Image 2 / Modernité) */
-  --radius-lg:           12px; 
-  --radius-md:           8px;
-  --radius-sm:           4px;
-  
-  --shadow-sm:           0 2px 8px rgba(0,0,0,0.08);
-  --shadow-lg:           0 15px 45px rgba(0,0,0,0.15);
-  --transition-fast:     0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  /* Text */
+  --text-primary:        #1a2332;
+  --text-secondary:      #6b7280;
+  --text-muted:          #9ca3af;
+  --text-inverse:        #ffffff;
+
+  /* Borders */
+  --border-light:        #e8ecf0;
+  --border-medium:       #d1d5db;
+
+  /* Spacing & Radius */
+  --radius-sm:   6px;
+  --radius-md:   12px;
+  --radius-lg:   16px;
+  --radius-xl:   24px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs:  0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
+  --shadow-sm:  0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
+  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
+  --shadow-lg:  0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
+  --shadow-xl:  0 16px 48px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07);
+  --shadow-primary: 0 4px 20px rgba(26,107,74,.25);
+
+  /* Transitions */
+  --transition-fast:   0.15s ease;
+  --transition-base:   0.25s ease;
+  --transition-slow:   0.4s cubic-bezier(.4,0,.2,1);
+
+  /* Layout */
+  --sidebar-width:       240px;
+  --sidebar-collapsed:   68px;
+  --header-height:       64px;
+  --context-width:       320px;
 }
 
-/* === 2. BASE RESET & TYPOGRAPHIE === */
+/* === BASE RESET & GLOBALS === */
+*, *::before, *::after { box-sizing: border-box; }
+
+html { font-size: 14px; scroll-behavior: smooth; }
+
 body {
-  background-color: var(--bg-app) !important;
-  color: var(--text-main);
-  font-family: 'DM Sans', 'Segoe UI', sans-serif !important;
-  font-size: 0.92rem;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }
 
-h1, h2, h3, .logo-text, .modal-title {
+h1, h2, h3, h4, h5, h6,
+.fw-bold, .fw-semibold, .nav-link span {
   font-family: 'Syne', sans-serif;
+}
+
+/* === SCROLLBAR === */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); }
+::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }
+
+/* ==============================
+   HEADER
+   ============================== */
+#header {
+  height: var(--header-height);
+  background: var(--bg-header);
+  border-bottom: 1px solid var(--border-light);
+  box-shadow: var(--shadow-xs);
+  padding: 0 1.25rem;
+  z-index: 1000;
+  transition: background var(--transition-base);
+}
+
+#header.mode-test {
+  background: linear-gradient(90deg, #7b2d00, #c0392b);
+}
+
+#header .logo {
+  gap: 10px;
+  text-decoration: none;
+}
+
+#header .logo img {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius-sm);
+  object-fit: contain;
+}
+
+#header .logo span {
+  font-family: 'Syne', sans-serif;
+  font-weight: 800;
+  font-size: 1.05rem;
+  color: var(--color-primary);
+  letter-spacing: -0.02em;
+}
+
+/* Toggle sidebar button */
+.toggle-sidebar-btn {
+  font-size: 1.4rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  margin-left: 12px;
+}
+.toggle-sidebar-btn:hover {
+  color: var(--color-primary);
+  background: var(--color-primary-ghost);
+}
+
+/* Breadcrumb */
+.breadcrumb {
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0;
+  font-size: 0.8rem;
+}
+.breadcrumb-item a {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+.breadcrumb-item a:hover { color: var(--color-primary); }
+.breadcrumb-item.active { color: var(--color-primary); font-weight: 600; }
+.breadcrumb-item + .breadcrumb-item::before { color: var(--border-medium); }
+
+/* Header Nav Icons */
+#header .header-nav .nav-link {
+  color: var(--text-secondary);
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  position: relative;
+}
+#header .header-nav .nav-link:hover {
+  color: var(--color-primary);
+  background: var(--color-primary-ghost);
+}
+
+.badge-number {
+  position: absolute;
+  top: 2px; right: 4px;
+  background: var(--color-urgent) !important;
+  font-size: 0.6rem;
+  min-width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 2px solid white;
+  transition: transform var(--transition-fast);
+}
+.badge-number:hover { transform: scale(1.2); }
+
+/* Company logo area */
+.company-logo-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-light);
+  background: var(--bg-surface-2);
+  transition: all var(--transition-fast);
+  max-width: 180px;
+}
+.company-logo-area:hover {
+  border-color: var(--color-primary-light);
+  box-shadow: var(--shadow-sm);
+}
+.company-logo-area img { height: 32px; width: auto; object-fit: contain; }
+.company-logo-area .company-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* User Initials Badge */
+.initials {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
+  color: white;
+  font-family: 'Syne', sans-serif;
+  font-weight: 700;
+  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-primary);
+  transition: transform var(--transition-fast);
+}
+.nav-link:hover .initials { transform: scale(1.08); }
+
+/* Dropdown */
+.dropdown-menu {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 6px;
+  font-size: 0.85rem;
+  margin-top: 8px !important;
+}
+.dropdown-item {
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  gap: 10px;
+  display: flex;
+  align-items: center;
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+.dropdown-item:hover {
+  background: var(--color-primary-ghost);
+  color: var(--color-primary);
+}
+.dropdown-item i { width: 16px; color: var(--text-muted); }
+
+/* Language flag */
+.lang-selector img { border-radius: 3px; }
+
+/* ==============================
+   SIDEBAR
+   ============================== */
+#sidebar {
+  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: 12px 8px;
+}
+
+#sidebar::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
+}
+
+/* Sidebar Nav */
+.sidebar-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebar-nav .nav-item { margin-bottom: 2px; }
+
+/* Parent links */
+.sidebar-nav > .nav-item > .nav-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  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.active {
+  background: rgba(255,255,255,0.10);
+  color: white;
+}
+
+.sidebar-nav > .nav-item > .nav-link i:first-child {
+  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-size: 0.8rem;
+  letter-spacing: 0.01em;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-nav > .nav-item > .nav-link span.active-main {
+  color: var(--color-accent);
   font-weight: 700;
 }
 
-/* Liens spécifiques h6 (Fichier initial respecté) */
+.sidebar-nav > .nav-item > .nav-link .bi-chevron-down {
+  font-size: 0.65rem;
+  opacity: 0.6;
+  transition: transform var(--transition-base);
+  flex-shrink: 0;
+}
+
+/* Rotates chevron when open */
+.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down {
+  transform: rotate(180deg);
+  opacity: 1;
+}
+
+/* Sub-menu (Level 1) */
+.sidebar-nav .nav-content {
+  list-style: none;
+  padding: 4px 0 4px 32px;
+  margin: 0;
+  background: rgba(0,0,0,0.15);
+  border-radius: var(--radius-sm);
+  margin-bottom: 2px;
+}
+
+.sidebar-nav .nav-content li { margin-bottom: 1px; }
+
+.sidebar-nav .nav-content li a {
+  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: white;
+  background: rgba(255,255,255,0.07);
+  border-left-color: var(--color-accent);
+  padding-left: 14px;
+}
+
+.sidebar-nav .nav-content li a.active-submenu {
+  color: var(--color-accent);
+  background: rgba(10,191,124,0.12);
+  border-left-color: var(--color-accent);
+  font-weight: 600;
+  padding-left: 14px;
+}
+
+/* Active indicator dot */
+.sidebar-nav .nav-content li a.active-submenu::after {
+  content: '';
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--color-accent);
+}
+
+/* Separator label */
+.sidebar-section-label {
+  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.3);
+  padding: 12px 10px 4px;
+  margin-top: 4px;
+}
+
+/* ==============================
+   MAIN CONTENT
+   ============================== */
+#main {
+  margin-left: var(--sidebar-width);
+  padding-top: calc(var(--header-height) + 16px);
+  min-height: 100vh;
+  transition: margin-left var(--transition-slow);
+  padding-bottom: 32px;
+}
+
+@media (max-width: 1199px) {
+  #main { margin-left: 0 !important; }
+  #sidebar { transform: translateX(-100%); }
+  #sidebar.sidebar-open { transform: translateX(0); }
+}
+
+/* Scroll Menu */
+.scrollmenu {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  padding: 8px 16px;
+  background: var(--bg-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+  margin: 0 16px 16px;
+  scrollbar-width: none;
+}
+.scrollmenu::-webkit-scrollbar { display: none; }
+
+.scrollmenu a {
+  white-space: nowrap;
+  padding: 6px 14px;
+  border-radius: var(--radius-full);
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all var(--transition-fast);
+  border: 1px solid transparent;
+  flex-shrink: 0;
+}
+
+.scrollmenu a:hover {
+  background: var(--color-primary-ghost);
+  color: var(--color-primary);
+  border-color: rgba(26,107,74,0.2);
+}
+
+.scrollmenu a.active {
+  background: var(--color-primary);
+  color: white;
+  box-shadow: var(--shadow-primary);
+}
+
+/* Page content wrapper */
+.page-content {
+  padding: 0 16px;
+}
+
+/* Fixed header within main */
+.fixed-div {
+  position: sticky;
+  top: var(--header-height);
+  z-index: 500;
+  background: var(--bg-base);
+  padding-bottom: 4px;
+}
+
+/* Section */
+.section { padding: 0; }
+
+/* ==============================
+   CONTEXT DRAWER (Barre Latérale D)
+   ============================== */
+
+/* Trigger button */
+.btn-info-context {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1100;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+  padding: 12px 10px;
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  transition: all var(--transition-base);
+}
+.btn-info-context:hover {
+  background: var(--color-primary-light);
+  padding-left: 14px;
+}
+.btn-info-context i { font-size: 16px; }
+
+/* Context Drawer Panel */
+#barre_laterale_d {
+  position: fixed;
+  right: 0;
+  top: var(--header-height);
+  width: var(--context-width) !important;
+  height: calc(100vh - var(--header-height));
+  background: var(--bg-surface);
+  border-left: 1px solid var(--border-light);
+  box-shadow: var(--shadow-xl);
+  z-index: 1050;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 !important;
+  display: none;
+  transition: transform var(--transition-slow);
+}
+
+#barre_laterale_d .drawer-inner {
+  padding: 16px;
+}
+
+/* Drawer Close Button */
+.btn-cacher-contexte {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  background: var(--bg-sidebar);
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-family: 'Syne', sans-serif;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  transition: background var(--transition-fast);
+  margin-bottom: 16px;
+  border-radius: 0;
+}
+.btn-cacher-contexte:hover { background: var(--color-primary); }
+
+/* Context Cards */
+.context-card {
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  margin-bottom: 10px;
+  transition: box-shadow var(--transition-fast);
+}
+.context-card:hover { box-shadow: var(--shadow-sm); }
+
+.context-card-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.context-card-label i { color: var(--color-primary); }
+
+.context-card-label a {
+  color: var(--color-primary);
+  text-decoration: none;
+  font-weight: 700;
+  margin-left: auto;
+  font-size: 0.7rem;
+}
+.context-card-label a:hover { text-decoration: underline; }
+
+.context-btn {
+  width: 100%;
+  background: white;
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-sm);
+  padding: 7px 10px;
+  text-align: left;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.context-btn:hover {
+  background: var(--color-primary-ghost);
+  border-color: var(--color-primary-light);
+  color: var(--color-primary);
+}
+.context-btn i { color: var(--color-primary); flex-shrink: 0; }
+
+.context-btn.btn-primary-context {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: white;
+}
+.context-btn.btn-primary-context:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary-light);
+  color: white;
+}
+.context-btn.btn-primary-context i { color: rgba(255,255,255,0.8); }
+
+/* Stats row in context */
+.context-stats {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+.context-stat {
+  flex: 1;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm);
+  padding: 8px 4px;
+  text-align: center;
+}
+.context-stat-value {
+  font-family: 'Syne', sans-serif;
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: var(--color-primary);
+}
+.context-stat-label {
+  font-size: 0.58rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Recent Policies List */
+.recent-policies-title {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.recent-policies-title i { color: var(--color-primary); }
+
+.policy-item {
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-light);
+  margin-bottom: 4px;
+  background: white;
+  transition: all var(--transition-fast);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.policy-item:hover {
+  background: var(--color-primary-ghost);
+  color: var(--color-primary);
+  border-color: rgba(26,107,74,0.2);
+  padding-left: 14px;
+}
+
+/* Photo container */
+.photo-container {
+  text-align: center;
+  margin-bottom: 10px;
+}
+.photo-container img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  border: 3px solid white;
+  transition: transform var(--transition-base);
+  cursor: pointer;
+}
+.photo-container img:hover { transform: scale(1.05); }
+
+/* Password change link */
+.change-pwd-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  background: var(--bg-surface-2);
+  border: 1px dashed var(--border-medium);
+  text-decoration: none;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  transition: all var(--transition-fast);
+  margin-bottom: 10px;
+}
+.change-pwd-link:hover {
+  background: var(--color-primary-ghost);
+  border-color: var(--color-primary-light);
+  color: var(--color-primary);
+}
+.change-pwd-link img { width: 22px; }
+
+/* Devis mode banner */
+.mode-devis-banner {
+  background: linear-gradient(135deg, #7209b7, #f72585);
+  color: white;
+  text-align: center;
+  font-family: 'Syne', sans-serif;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 8px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 10px;
+  text-transform: uppercase;
+}
+
+/* ==============================
+   TABLES (DataTables)
+   ============================== */
+.table-container {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  border: 1px solid var(--border-light);
+}
+
+.table {
+  background: white !important;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  font-size: 0.82rem;
+  --bs-table-bg: transparent !important;
+  --bs-table-color: var(--text-primary) !important;
+  --bs-table-striped-color: var(--text-primary) !important;
+}
+
+.table thead tr {
+  background: var(--color-primary) !important;
+  color: white !important;
+}
+
+.table > thead {
+  background-color: var(--color-primary) !important;
+}
+
+.table th {
+  background: var(--color-primary) !important;
+  color: white !important;
+  font-family: 'Syne', sans-serif;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 12px 14px !important;
+  border: none !important;
+  white-space: nowrap;
+}
+.table th:hover { background: var(--color-primary-dark) !important; }
+
+.table td {
+  padding: 10px 14px !important;
+  border-bottom: 1px solid var(--border-light) !important;
+  border-top: none !important;
+  vertical-align: middle;
+  color: var(--text-primary);
+}
+.table td:hover { font-style: normal !important; }
+
+.table tr:last-child td { border-bottom: none !important; }
+
+.table tbody tr {
+  transition: all var(--transition-fast);
+}
+.table tbody tr:hover {
+  background: var(--color-primary-ghost) !important;
+  font-style: normal !important;
+}
+.table tbody tr:hover td:first-child {
+  border-left: 3px solid var(--color-accent);
+}
+
+/* Status Badges */
+.badge-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: var(--radius-full);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.badge-status::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.badge-valide    { background: rgba(46,196,182,0.12); color: var(--color-success); }
+.badge-urgent    { background: rgba(230,57,70,0.12);  color: var(--color-urgent); }
+.badge-attente   { background: rgba(244,162,97,0.12); color: var(--color-warning); }
+.badge-info      { background: rgba(58,134,255,0.12); color: var(--color-info); }
+.badge-inactive  { background: rgba(108,117,125,0.12); color: var(--color-neutral); }
+
+/* ==============================
+   CARDS
+   ============================== */
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs);
+  transition: box-shadow var(--transition-base);
+}
+.card:hover { box-shadow: var(--shadow-md); }
+
+.card-header {
+  background: transparent;
+  border-bottom: 1px solid var(--border-light);
+  padding: 14px 18px;
+  font-family: 'Syne', sans-serif;
+  font-weight: 700;
+  font-size: 0.88rem;
+}
+
+/* ==============================
+   BUTTONS
+   ============================== */
+.btn {
+  border-radius: var(--radius-sm) !important;
+  font-size: 0.8rem;
+  font-weight: 600;
+  font-family: 'DM Sans', sans-serif;
+  padding: 7px 16px;
+  transition: all var(--transition-fast);
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-primary {
+  background: var(--color-primary) !important;
+  color: white !important;
+  box-shadow: 0 2px 8px rgba(26,107,74,0.3);
+}
+.btn-primary:hover {
+  background: var(--color-primary-light) !important;
+  box-shadow: 0 4px 16px rgba(26,107,74,0.4);
+  transform: translateY(-1px);
+}
+
+.btn-info {
+  background: var(--color-info) !important;
+  color: white !important;
+}
+.btn-info:hover {
+  background: #2563eb !important;
+  transform: translateY(-1px);
+}
+
+.btn-warning {
+  background: var(--color-urgent) !important;
+  color: white !important;
+}
+
+.btn-default, .btn-outline-secondary {
+  background: white;
+  border: 1px solid var(--border-medium) !important;
+  color: var(--text-secondary) !important;
+}
+.btn-default:hover, .btn-outline-secondary:hover {
+  border-color: var(--color-primary-light) !important;
+  color: var(--color-primary) !important;
+  background: var(--color-primary-ghost);
+}
+
+.btn-sm { padding: 5px 12px; font-size: 0.75rem; }
+
+/* ==============================
+   FORM ELEMENTS
+   ============================== */
+.form-control, .form-select {
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-sm);
+  font-size: 0.82rem;
+  color: var(--text-primary);
+  height: auto !important;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.form-control:focus, .form-select:focus {
+  border-color: var(--color-primary-light);
+  box-shadow: 0 0 0 3px rgba(26,107,74,0.1);
+  outline: none;
+}
+
+td input[readonly], td select[readonly],
+td input[disabled], td select[disabled] {
+  background: #f1f5f9 !important;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+/* ==============================
+   LEGENDS & FIELDSETS
+   ============================== */
+legend, #chemin,
+fieldset legend, form legend {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
+  color: white;
+  font-family: 'Syne', sans-serif;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  display: block;
+}
+
+/* ==============================
+   MODALS
+   ============================== */
+.modal-content {
+  border: none;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  overflow: hidden;
+}
+
+.modal-header {
+  background: var(--color-primary) !important;
+  color: white !important;
+  padding: 16px 20px;
+  border-bottom: none;
+}
+
+.modal-title {
+  font-family: 'Syne', sans-serif;
+  font-size: 0.92rem !important;
+  font-weight: 700;
+}
+
+.modal-header .close, .modal-header .btn-close {
+  background: rgba(255,255,255,0.2) !important;
+  color: white !important;
+  border: 1px solid rgba(255,255,255,0.3) !important;
+  border-radius: var(--radius-sm);
+  opacity: 1;
+  transition: background var(--transition-fast);
+  font-size: 0.75rem;
+  padding: 4px 10px;
+}
+.modal-header .close:hover { background: rgba(255,255,255,0.35) !important; }
+
+.modal-body { padding: 20px; }
+
+.modal-footer {
+  border-top: 1px solid var(--border-light);
+  padding: 12px 20px;
+  gap: 8px;
+}
+
+/* Side Panel Modal (optional modern variant) */
+.modal.side-panel .modal-dialog {
+  position: fixed;
+  top: 0; right: 0;
+  margin: 0;
+  max-width: 480px;
+  width: 100%;
+  height: 100%;
+}
+.modal.side-panel .modal-content {
+  height: 100%;
+  border-radius: 0;
+}
+
+/* ==============================
+   NAV TABS
+   ============================== */
+.nav-tabs {
+  border-bottom: 2px solid var(--border-light);
+  gap: 4px;
+}
+.nav-tabs .nav-link {
+  color: var(--text-secondary);
+  border: none;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  padding: 8px 16px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+}
+.nav-tabs .nav-link:hover {
+  color: var(--color-primary);
+  background: var(--color-primary-ghost);
+}
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+  background: var(--color-primary) !important;
+  color: white !important;
+  font-family: 'Syne', sans-serif;
+  font-weight: 700;
+  border: none;
+}
+
+/* ==============================
+   ALERTS & TOASTS
+   ============================== */
+.alert {
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.82rem;
+  border-left: 4px solid;
+}
+.alert-success { border-color: var(--color-success); background: rgba(46,196,182,0.1); }
+.alert-danger   { border-color: var(--color-urgent);  background: rgba(230,57,70,0.1); }
+.alert-warning  { border-color: var(--color-warning); background: rgba(244,162,97,0.1); }
+.alert-info     { border-color: var(--color-info);    background: rgba(58,134,255,0.1); }
+
+/* ==============================
+   FOOTER (inside context bar)
+   ============================== */
+footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; }
+
+/* ==============================
+   MICRO-INTERACTIONS & UTILS
+   ============================== */
+.hover-shadow-sm:hover {
+  box-shadow: var(--shadow-md) !important;
+  transform: translateY(-2px);
+  transition: all var(--transition-base);
+}
+
+.hover-scale:hover {
+  transform: scale(1.04);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-base);
+}
+
+.transition { transition: all var(--transition-base); }
+
+/* Skeleton Loader */
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: var(--radius-sm);
+}
+@keyframes skeleton-loading {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* AJAX Loading overlay */
+.ajax-loading {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.6;
+}
+.ajax-loading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255,255,255,0.6);
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+/* Pulse animation for notifications */
+@keyframes pulse-badge {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.4); }
+  50% { box-shadow: 0 0 0 5px rgba(230,57,70,0); }
+}
+.badge-number { animation: pulse-badge 2s infinite; }
+
+/* Mode Test Banner */
+.mode-test-active #header {
+  background: linear-gradient(90deg, #7b2d00, #c0392b) !important;
+}
+.mode-test-banner {
+  background: repeating-linear-gradient(
+    45deg, #ffd700, #ffd700 10px, #000 10px, #000 20px
+  );
+  color: white;
+  text-align: center;
+  font-weight: 800;
+  font-size: 0.7rem;
+  padding: 3px;
+  letter-spacing: 0.15em;
+}
+
+/* Filter option */
+.filter-option-inner-inner {
+  background-color: #f1f5f9 !important;
+}
+
+/* h6 links in context */
 h6 a {
   text-decoration: none;
   color: var(--color-primary);
@@ -61,234 +1147,38 @@ h6 a {
 }
 h6 a:hover {
   background: var(--color-primary);
-  color: white !important;
-  padding: 1px 5px;
-  border-radius: var(--radius-sm);
-}
-
-/* === 3. HEADER & NAVIGATION (header.php) === */
-.header {
-  background-color: var(--color-primary) !important;
-  color: white !important;
-  height: 50px !important;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
-  z-index: 1000;
-}
-
-.initials {
-  background: rgba(255, 255, 255, 0.2);
   color: white;
-  border: 1px solid rgba(255, 255, 255, 0.4);
-  font-weight: 700;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
+  border-bottom-color: transparent;
+  padding: 1px 4px;
+  border-radius: 3px;
 }
 
-.mode-test-badge {
-  background: white;
-  color: var(--color-primary);
-  font-weight: 800;
-  padding: 2px 10px;
-  border-radius: var(--radius-sm);
-  font-size: 0.65rem;
-  margin-left: 10px;
-}
-
-/* === 4. SIDEBAR (sidebar.txt) === */
-.sidebar {
-  background: #faf9f8 !important;
-  border-right: 1px solid var(--border-light) !important;
-}
-
-.sidebar-nav .nav-link {
-  color: var(--text-main) !important;
-  font-weight: 500;
-  border-radius: var(--radius-md);
-  margin: 4px 10px;
-  padding: 10px 15px;
-  transition: var(--transition-fast);
-}
-
-.sidebar-nav .nav-link:hover,
-.sidebar-nav .nav-link.parent-active,
-.sidebar-nav .nav-link.active-main {
-  background-color: var(--color-primary-ghost) !important;
-  color: var(--color-primary) !important;
-}
-
-/* === 5. PANNEAU DE CONTEXTE (barre-contexte.txt) === */
-#barre_laterale_d {
-  background: white;
-  border-left: 2px solid var(--border-light);
-  box-shadow: -4px 0 25px rgba(0,0,0,0.05);
-  transition: transform 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
-}
-
-.context-card {
-  background: #faf9f8;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
-  padding: 12px;
-  margin-bottom: 12px;
-  transition: var(--transition-fast);
-}
-
-.context-card:hover { border-color: var(--color-primary-light); }
-
-.context-card-label {
-  color: var(--color-primary);
-  font-weight: 700;
-  font-size: 0.65rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 6px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.btn-primary-context {
-  background-color: var(--color-primary-ghost) !important;
-  color: var(--color-primary) !important;
-  border: 1px solid var(--color-primary) !important;
-  font-weight: 600;
-  width: 100%;
-  border-radius: var(--radius-sm);
-}
-
-/* Textarea spécifique context bar */
+/* Textarea in context */
 .mb-2 textarea {
   font-size: 0.78rem;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-light);
-  padding: 10px;
   width: 100%;
-}
-
-/* === 6. TABLEAUX (Structure Image 2) === */
-.table-responsive {
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-light);
-  background: white;
-  margin-bottom: 20px;
-}
-
-.table thead th {
-  background-color: #faf9f8 !important;
-  color: var(--text-muted);
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 0.75rem;
-  padding: 14px !important;
-  border-bottom: 3px solid var(--color-primary) !important; /* Ligne de force Bleue */
-}
-
-.table tbody tr td {
-  padding: 12px !important;
-  border-bottom: 1px solid #f1f5f9 !important;
-}
-
-.table tbody tr:hover {
-  background-color: #f8fafc !important;
-}
-
-/* === 7. MODALS & ALERTES (modals.txt) === */
-.modal-content {
-  border-radius: var(--radius-lg) !important;
-  border: none;
-  box-shadow: var(--shadow-lg) !important;
-}
-
-.modal-header {
-  background-color: #faf9f8;
-  border-bottom: 1px solid var(--border-light);
-  padding: 15px 20px;
-}
-
-.alert {
-  border-radius: var(--radius-md);
-  border: none;
-  font-weight: 500;
-  border-left: 5px solid transparent;
-}
-.alert-info { background: #eff6fc; color: #0078d4; border-left-color: var(--color-primary); }
-.alert-danger { background: #fde7e9; color: #a80000; border-left-color: var(--color-urgent); }
-
-/* === 8. PATTERNS GRAPHIQUES (Conservation 100%) === */
-
-/* Bannière Mode Test Zébrée */
-.mode-test-banner {
-  background: repeating-linear-gradient(45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px) !important;
-  color: white !important;
-  font-weight: 800;
-  text-align: center;
-  padding: 6px;
-}
-
-/* Skeleton Loaders (scripts-footer.txt) */
-.skeleton {
-  background: linear-gradient(90deg, #f3f2f1 25%, #edebe9 50%, #f3f2f1 75%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite;
+  border: 1px solid var(--border-medium);
   border-radius: var(--radius-sm);
+  padding: 8px;
 }
 
-@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
-
-/* Effets Photos (Initial Source) */
-.image-container img:hover { filter: grayscale(100%); transition: 0.3s; }
-.photo-container img:hover { transform: scale(1.1); cursor: pointer; transition: 0.3s; }
-
-/* Scrollmenu (gabarit.txt) */
-.scrollmenu {
-  background: white;
-  padding: 8px 15px;
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
-  display: flex;
-  gap: 10px;
-  overflow-x: auto;
-  border: 1px solid var(--border-light);
-}
-.scrollmenu a {
-  padding: 8px 18px;
-  color: var(--text-main);
-  text-decoration: none;
-  font-weight: 600;
-  border-radius: 20px;
+/* .sr-only (keep accessible but hidden visually) */
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
   white-space: nowrap;
-}
-.scrollmenu a:hover, .scrollmenu a.active {
-  background: var(--color-primary-ghost);
-  color: var(--color-primary);
+  border-width: 0;
 }
 
-/* === 9. BOUTONS === */
-.btn-primary {
-  background-color: var(--color-primary) !important;
-  border-radius: var(--radius-md) !important;
-  font-weight: 600 !important;
-  border: none !important;
-  padding: 10px 24px !important;
-  transition: all 0.2s;
+/* ==============================
+   RESPONSIVE
+   ============================== */
+@media (max-width: 768px) {
+  #sidebar { width: var(--sidebar-width); }
+  #barre_laterale_d { width: 100% !important; }
+  .scrollmenu { margin: 0 8px 8px; }
+  .page-content { padding: 0 8px; }
 }
-
-.btn-primary:hover {
-  background-color: var(--color-primary-dark) !important;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.25) !important;
-}
-
-/* === 10. RESPONSIVE === */
-@media (max-width: 1199px) {
-    #sidebar { left: -260px; transition: 0.3s; }
-    .toggle-sidebar #sidebar { left: 0; }
-    #main { margin-left: 0 !important; padding: 15px !important; }
-    #barre_laterale_d { width: 100% !important; right: -100%; }
-    #barre_laterale_d.active { right: 0; }
-}
\ No newline at end of file