diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index 7e7dd555..40b1dded 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1,1184 +1,306 @@
-/* =============================
-   INTER SANTÉ — THEME MODERN
-   SaaS Premium UI v2025
-   ============================= */
+/* ============================================================
+   INTER SANTÉ — THEME MODERN (STRATEGIC UX EDITION)
+   SaaS Premium UI v2025 - High-End HealthTech B2B
+   ============================================================ */
 
-/* === 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');
+/* === 1. TYPOGRAPHIE & FONT-FACE === */
+@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;1,9..40,400&display=swap');
 
-/* === CSS VARIABLES === */
 :root {
-  /* Brand Colors */
-  --color-primary:       #1a6b4a;
+  /* --- Palette Chromatique "Trust & Health" --- */
+  --color-primary:       #1a6b4a; /* Vert émeraude profond (Stabilité) */
   --color-primary-light: #25a06e;
   --color-primary-dark:  #114532;
   --color-primary-ghost: rgba(26, 107, 74, 0.08);
+  --color-accent:        #0abf7c; /* Cyan/Vert médical */
+  
+  /* --- Status Colors (Clarté décisionnelle) --- */
+  --color-success:       #2ec4b6; /* Validé / Payé */
+  --color-warning:       #f4a261; /* En attente / À compléter */
+  --color-urgent:        #e63946; /* Rejeté / Anomalie / Retard */
+  --color-info:          #3a86ff; /* Information / Courtier */
 
-  /* Accent / Status */
-  --color-accent:        #0abf7c;
-  --color-urgent:        #e63946;
-  --color-warning:       #f4a261;
-  --color-success:       #2ec4b6;
-  --color-info:          #3a86ff;
-  --color-neutral:       #6c757d;
+  /* --- Neutres & Surfaces --- */
+  --bg-app:              #f8fafc; /* Fond très clair "Lumière" */
+  --bg-card:             #ffffff;
+  --text-main:           #0f172a; /* Bleu-noir pour contraste maximal */
+  --text-muted:          #64748b;
+  --border-light:        #e2e8f0;
 
-  /* Backgrounds */
-  --bg-base:             #f4f6f9;
-  --bg-surface:          #ffffff;
-  --bg-surface-2:        #f8fafc;
-  --bg-sidebar:          #0f2d20;
-  --bg-header:           #ffffff;
-
-  /* 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;
+  /* --- Design Tokens --- */
+  --shadow-sm:           0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md:           0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03);
+  --shadow-lg:           0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+  --radius-lg:           14px;
+  --radius-md:           8px;
+  --transition-fast:     0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth:   0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
-/* === BASE RESET & GLOBALS === */
-*, *::before, *::after { box-sizing: border-box; }
-
-html { font-size: 14px; scroll-behavior: smooth; }
-
+/* === 2. RESET & FONDATION === */
 body {
-  font-family: 'DM Sans', system-ui, sans-serif;
-  background: var(--bg-base);
-  color: var(--text-primary);
-  line-height: 1.6;
+  background-color: var(--bg-app) !important;
+  color: var(--text-main);
+  font-family: 'DM Sans', sans-serif !important;
   -webkit-font-smoothing: antialiased;
+  letter-spacing: -0.01em;
 }
 
-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;
+h1, h2, h3, .logo-text {
   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;
+  color: var(--color-primary-dark);
 }
 
-#sidebar::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
+/* === 3. PATTERN : NAVIGATION (SIDEBAR) === */
+.sidebar {
+  background: white !important;
+  border-right: 1px solid var(--border-light) !important;
+  box-shadow: none !important;
+  width: 260px;
 }
 
-/* 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;
+.sidebar-nav .nav-link {
+  color: var(--text-muted) !important;
   font-weight: 500;
-  text-decoration: none;
-  transition: all var(--transition-base);
+  border-radius: var(--radius-md);
+  margin: 4px 15px;
+  padding: 10px 15px;
+  transition: var(--transition-fast);
+}
+
+.sidebar-nav .nav-link i {
+  font-size: 1.25rem;
+  color: var(--text-muted);
+}
+
+.sidebar-nav .nav-link:hover, 
+.sidebar-nav .nav-link.active-main {
+  background-color: var(--color-primary-ghost) !important;
+  color: var(--color-primary) !important;
+}
+
+.sidebar-nav .nav-link.active-main {
   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;
-}
-
-.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: '';
+.sidebar-nav .nav-link.active-main::before {
+  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 {
+  left: -15px;
+  top: 15%;
+  height: 70%;
+  width: 4px;
   background: var(--color-primary);
-  color: white;
-  box-shadow: var(--shadow-primary);
+  border-radius: 0 4px 4px 0;
 }
 
-/* Page content wrapper */
-.page-content {
-  padding: 0 16px;
+/* === 4. PATTERN : DATA CARDS & KPI === */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-light) !important;
+  border-radius: var(--radius-lg) !important;
+  box-shadow: var(--shadow-sm) !important;
+  transition: var(--transition-smooth);
 }
 
-/* Fixed header within main */
-.fixed-div {
-  position: sticky;
-  top: var(--header-height);
-  z-index: 500;
-  background: var(--bg-base);
-  padding-bottom: 4px;
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md) !important;
 }
 
-/* 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);
+.kpi-card {
+  border-left: 4px solid var(--color-primary) !important;
 }
 
-#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;
+.kpi-value {
+  font-size: 1.8rem;
   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;
+  color: var(--text-main);
 }
 
-/* ==============================
-   TABLES (DataTables)
-   ============================== */
-.table-container {
-  background: white;
+/* === 5. PATTERN : TABLEAUX ÉPURÉS (STRIPE STYLE) === */
+.table-responsive {
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  overflow: hidden;
-  border: 1px solid var(--border-light);
+  background: white;
 }
 
 .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;
+  margin-bottom: 0;
 }
 
-.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;
+.table thead th {
+  background-color: #f8fafc !important;
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 0.75rem;
   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;
+  padding: 16px !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);
+  transition: 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);
+  background-color: #f1f5f9 !important;
 }
 
-/* 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;
+.table td {
+  padding: 16px !important;
+  vertical-align: middle;
+  border-bottom: 1px solid #f1f5f9 !important;
 }
 
-/* ==============================
-   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 {
+/* === 6. PATTERN : CONTEXTUAL SIDE DRAWER (BARRE DROITE) === */
+#barre_laterale_d {
   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;
+  top: 0;
+  right: -350px;
+  width: 350px;
+  height: 100vh;
+  background: white;
+  z-index: 1050;
+  border-left: 1px solid var(--border-light);
+  box-shadow: var(--shadow-lg);
+  transition: var(--transition-smooth);
+  padding: 24px;
 }
 
-/* ==============================
-   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;
+#barre_laterale_d.active {
+  right: 0;
 }
 
-/* ==============================
-   ALERTS & TOASTS
-   ============================== */
-.alert {
-  border: none;
+.info-box {
+  background: #f1f5f9;
   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);
+  padding: 12px;
+  margin-bottom: 12px;
 }
 
-.hover-scale:hover {
-  transform: scale(1.04);
-  box-shadow: var(--shadow-md);
-  transition: all var(--transition-base);
+.info-box label {
+  display: block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: 4px;
 }
 
-.transition { transition: all var(--transition-base); }
+.info-box span {
+  font-weight: 600;
+  color: var(--color-primary-dark);
+}
 
-/* Skeleton Loader */
+/* === 7. PATTERN : SKELETON LOADING ANIMATION === */
 .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);
+  border-radius: 4px;
 }
+
 @keyframes skeleton-loading {
-  0%   { background-position: 200% 0; }
+  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;
+/* === 8. PATTERN : BULK ACTIONS BAR (FLOATING) === */
+.bulk-actions-bar {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--text-main);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 50px;
   display: flex;
   align-items: center;
+  gap: 20px;
+  box-shadow: var(--shadow-lg);
+  z-index: 2000;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from { bottom: -100px; }
+  to { bottom: 30px; }
+}
+
+/* === 9. PATTERN : COMMAND BAR (CMD+K) === */
+.command-bar-wrapper {
+  background: rgba(15, 23, 42, 0.8);
+  backdrop-filter: blur(8px);
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
   justify-content: center;
-  z-index: 10;
+  padding-top: 100px;
 }
 
-/* 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);
-  font-weight: 600;
-  border-bottom: 1px dashed var(--color-primary);
-  transition: all var(--transition-fast);
-}
-h6 a:hover {
-  background: var(--color-primary);
-  color: white;
-  border-bottom-color: transparent;
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
-/* Textarea in context */
-.mb-2 textarea {
-  font-size: 0.78rem;
-  width: 100%;
-  border: 1px solid var(--border-medium);
-  border-radius: var(--radius-sm);
-  padding: 8px;
-}
-
-/* .sr-only (keep accessible but hidden visually) */
-.sr-only {
-  position: absolute;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
+.command-bar {
+  width: 600px;
+  background: white;
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
+  box-shadow: var(--shadow-lg);
 }
 
-/* ==============================
-   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; }
+.command-input {
+  width: 100%;
+  border: none;
+  padding: 20px;
+  font-size: 1.1rem;
+  outline: none;
+  border-bottom: 1px solid var(--border-light);
 }
+
+/* === 10. BOUTONS & MICRO-INTERACTIONS === */
+.btn-primary {
+  background: var(--color-primary) !important;
+  border: none !important;
+  border-radius: var(--radius-md) !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+  box-shadow: 0 4px 6px rgba(26, 107, 74, 0.2) !important;
+  transition: var(--transition-fast) !important;
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-light) !important;
+  transform: translateY(-1px);
+}
+
+.badge-saas {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-weight: 700;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+}
+
+.status-paid { background: #dcfce7; color: #166534; }
+.status-urgent { background: #fee2e2; color: #991b1b; }
+.status-warning { background: #fef9c3; color: #854d0e; }
+
+/* TRUST BADGE (Pattern de confiance) */
+.trust-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7rem;
+    color: var(--color-primary);
+    background: var(--color-primary-ghost);
+    padding: 4px 10px;
+    border-radius: 100px;
+    font-weight: 600;
+}
+
+/* MODE TEST INDICATOR */
+.mode-test-active .header {
+  border-bottom: 3px solid var(--color-warning) !important;
+}
\ No newline at end of file