diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index 9ea73fb0..7e7dd555 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1,342 +1,267 @@
-/* ============================================================
-   INTER SANTÉ — THÈME OUTLOOK 365 PREMIUM
-   Inspiration Microsoft 365 - Élégant, professionnel, moderne
-   ============================================================ */
+/* =============================
+   INTER SANTÉ — THEME MODERN
+   SaaS Premium UI v2025
+   ============================= */
 
 /* === FONTS === */
-@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@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');
 
-/* === VARIABLES === */
+/* === CSS VARIABLES === */
 :root {
-  /* Couleurs principales - Palette Outlook */
-  --outlook-blue:          #0078d4;
-  --outlook-blue-light:    #50b0f0;
-  --outlook-blue-dark:     #106ebe;
-  --outlook-blue-soft:     #deecf9;
-  --outlook-bg:            #f5f5f5;
-  
-  /* Neutres */
-  --neutral-10:            #1e1e1e;
-  --neutral-20:            #323130;
-  --neutral-30:            #3b3a39;
-  --neutral-40:            #484644;
-  --neutral-50:            #605e5c;
-  --neutral-60:            #797775;
-  --neutral-70:            #8a8886;
-  --neutral-80:            #b3b0ad;
-  --neutral-90:            #d2d0ce;
-  --neutral-95:            #eaeaea;
-  --neutral-98:            #f5f5f5;
-  --neutral-white:         #ffffff;
+  /* Brand Colors */
+  --color-primary:       #1a6b4a;
+  --color-primary-light: #25a06e;
+  --color-primary-dark:  #114532;
+  --color-primary-ghost: rgba(26, 107, 74, 0.08);
 
-  /* Statuts */
-  --status-success:        #107c41;
-  --status-warning:        #ffaa44;
-  --status-error:          #d13438;
-  --status-info:           #0078d4;
-  --status-urgent:         #e81123;
-
-  /* Sémantique */
-  --primary:               var(--outlook-blue);
-  --primary-hover:         var(--outlook-blue-dark);
-  --primary-soft:          var(--outlook-blue-soft);
-  --text-primary:          #252423;
-  --text-secondary:        #605e5c;
-  --text-tertiary:         #8a8886;
-  --text-disabled:         #b3b0ad;
-  --border-default:        #edebe9;
-  --border-hover:          #c8c6c4;
-  --border-focus:          var(--outlook-blue);
+  /* Accent / Status */
+  --color-accent:        #0abf7c;
+  --color-urgent:        #e63946;
+  --color-warning:       #f4a261;
+  --color-success:       #2ec4b6;
+  --color-info:          #3a86ff;
+  --color-neutral:       #6c757d;
 
   /* Backgrounds */
-  --bg-page:               #f5f5f5;
-  --bg-surface:            #ffffff;
-  --bg-surface-hover:      #f3f2f1;
-  --bg-surface-pressed:    #e1dfdd;
-  --bg-sidebar:            #faf9f8;
-  --bg-header:             #ffffff;
-  --bg-menu-hover:         #f3f2f1;
+  --bg-base:             #f4f6f9;
+  --bg-surface:          #ffffff;
+  --bg-surface-2:        #f8fafc;
+  --bg-sidebar:          #0f2d20;
+  --bg-header:           #ffffff;
 
-  /* Shadows */
-  --shadow-sm: 0 1.6px 3.6px rgba(0, 0, 0, 0.08), 0 0.3px 0.9px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 6.4px 14.4px rgba(0, 0, 0, 0.08), 0 1.2px 3.6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 25.6px 57.6px rgba(0, 0, 0, 0.12), 0 4.8px 14.4px rgba(0, 0, 0, 0.1);
-  --shadow-card: 0 0.4px 0.8px rgba(0, 0, 0, 0.06), 0 1.6px 3.6px rgba(0, 0, 0, 0.04);
-  
-  /* Radius */
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  /* 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;
 
-  /* Layout */
-  --header-height: 48px;
-  --sidebar-width: 280px;
-  --context-width: 320px;
-  
+  /* 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.1s ease;
-  --transition-base: 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
-  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --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;
 }
 
-/* === BASE === */
-* { box-sizing: border-box; }
+/* === BASE RESET & GLOBALS === */
+*, *::before, *::after { box-sizing: border-box; }
 
-html { 
-  font-size: 14px; 
+html { font-size: 14px; scroll-behavior: smooth; }
+
+body {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }
 
-body {
-  font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
-  background: var(--bg-page);
-  color: var(--text-primary);
-  line-height: 1.5;
-  margin: 0;
-  overflow: hidden;
+h1, h2, h3, h4, h5, h6,
+.fw-bold, .fw-semibold, .nav-link span {
+  font-family: 'Syne', sans-serif;
 }
 
-/* === SCROLLBAR STYLE OUTLOOK === */
-::-webkit-scrollbar { width: 12px; height: 12px; }
+/* === SCROLLBAR === */
+::-webkit-scrollbar { width: 5px; height: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { 
-  background: var(--neutral-80); 
-  border-radius: var(--radius-full);
-  border: 3px solid transparent;
-  background-clip: padding-box;
-}
-::-webkit-scrollbar-thumb:hover { background: var(--neutral-60); background-clip: padding-box; }
-::-webkit-scrollbar-corner { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); }
+::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }
 
-/* ===================================================
-   HEADER - Style Outlook (compact et efficace)
-   =================================================== */
+/* ==============================
+   HEADER
+   ============================== */
 #header {
   height: var(--header-height);
   background: var(--bg-header);
-  border-bottom: 1px solid var(--border-default);
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  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);
 }
 
-/* Logo */
 #header .logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
+  gap: 10px;
   text-decoration: none;
-  border-radius: var(--radius-sm);
-  transition: background var(--transition-fast);
-}
-
-#header .logo:hover {
-  background: var(--bg-surface-hover);
 }
 
 #header .logo img {
-  width: 24px;
-  height: 24px;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius-sm);
+  object-fit: contain;
 }
 
 #header .logo span {
-  font-weight: 600;
-  font-size: 1rem;
-  color: var(--text-primary);
-  letter-spacing: 0.3px;
+  font-family: 'Syne', sans-serif;
+  font-weight: 800;
+  font-size: 1.05rem;
+  color: var(--color-primary);
+  letter-spacing: -0.02em;
 }
 
-/* Toggle sidebar */
+/* Toggle sidebar button */
 .toggle-sidebar-btn {
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   color: var(--text-secondary);
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
   cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
-  margin-left: 4px;
+  margin-left: 12px;
 }
-
 .toggle-sidebar-btn:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
+  color: var(--color-primary);
+  background: var(--color-primary-ghost);
 }
 
 /* Breadcrumb */
 .breadcrumb {
-  background: transparent;
-  padding: 0 16px;
+  background: transparent !important;
+  padding: 0 !important;
   margin: 0;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
 }
-
 .breadcrumb-item a {
-  color: var(--text-secondary);
+  color: var(--text-muted);
   text-decoration: none;
-  padding: 4px 6px;
+  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);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.breadcrumb-item a:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
-}
-
-.breadcrumb-item.active {
-  color: var(--text-primary);
-  font-weight: 500;
-  padding: 4px 6px;
-}
-
-/* Header Icons */
-.header-nav {
-  height: 100%;
-}
-
-.header-nav ul {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.header-nav .nav-link {
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  height: 100%;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 0.9rem;
-  transition: all var(--transition-fast);
   position: relative;
-  border-bottom: 2px solid transparent;
+}
+#header .header-nav .nav-link:hover {
+  color: var(--color-primary);
+  background: var(--color-primary-ghost);
 }
 
-.header-nav .nav-link:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
-  border-bottom-color: var(--primary);
-}
-
-/* Badge notifications */
 .badge-number {
   position: absolute;
-  top: 8px;
-  right: 4px;
-  background: var(--status-error);
-  color: white;
-  font-size: 0.65rem;
-  font-weight: 600;
+  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;
-  border: 1px solid white;
+  cursor: pointer;
+  border: 2px solid white;
+  transition: transform var(--transition-fast);
 }
+.badge-number:hover { transform: scale(1.2); }
 
 /* Company logo area */
-.entity-info {
+.company-logo-area {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 12px;
-  border-radius: var(--radius-sm);
-  transition: background var(--transition-fast);
-  text-decoration: none;
+  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);
-  height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.entity-info:hover {
-  background: var(--bg-surface-hover);
-}
-
-.entity-logo {
-  height: 28px;
-  width: auto;
-  max-width: 100px;
-  object-fit: contain;
-}
-
-.entity-name {
-  font-weight: 500;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-}
-
-/* User initials - style Outlook */
+/* User Initials Badge */
 .initials {
   width: 32px;
   height: 32px;
-  background: var(--primary);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
   color: white;
-  font-weight: 600;
-  font-size: 0.85rem;
-  display: flex;
+  font-family: 'Syne', sans-serif;
+  font-weight: 700;
+  font-size: 0.75rem;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-full);
-  transition: all var(--transition-fast);
+  box-shadow: var(--shadow-primary);
+  transition: transform var(--transition-fast);
 }
+.nav-link:hover .initials { transform: scale(1.08); }
 
-.nav-link:hover .initials {
-  background: var(--primary-hover);
-  transform: scale(1.05);
-}
-
-/* Dropdown - style Outlook */
+/* Dropdown */
 .dropdown-menu {
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
-  padding: 4px 0;
-  margin-top: 4px !important;
-  min-width: 200px;
-  background: var(--bg-surface);
-}
-
-.dropdown-item {
-  padding: 8px 16px;
+  padding: 6px;
   font-size: 0.85rem;
-  color: var(--text-primary);
+  margin-top: 8px !important;
+}
+.dropdown-item {
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  gap: 10px;
   display: flex;
   align-items: center;
-  gap: 10px;
+  color: var(--text-primary);
   transition: all var(--transition-fast);
 }
-
 .dropdown-item:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
+  background: var(--color-primary-ghost);
+  color: var(--color-primary);
 }
+.dropdown-item i { width: 16px; color: var(--text-muted); }
 
-.dropdown-item i {
-  width: 18px;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-}
+/* Language flag */
+.lang-selector img { border-radius: 3px; }
 
-/* ===================================================
-   SIDEBAR - Style Outlook (Fluent UI)
-   =================================================== */
+/* ==============================
+   SIDEBAR
+   ============================== */
 #sidebar {
   width: var(--sidebar-width);
   background: var(--bg-sidebar);
@@ -345,730 +270,915 @@ body {
   left: 0;
   height: calc(100vh - var(--header-height));
   overflow-y: auto;
-  border-right: 1px solid var(--border-default);
-  transition: width var(--transition-slow), transform var(--transition-slow);
+  overflow-x: hidden;
+  transition: width var(--transition-slow);
   z-index: 900;
+  padding: 12px 8px;
 }
 
-/* Sidebar brand */
-.sidebar-brand {
-  padding: 16px 20px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  border-bottom: 1px solid var(--border-default);
+#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-brand img {
-  width: 28px;
-  height: 28px;
-}
-
-.sidebar-brand span {
-  font-weight: 600;
-  font-size: 1rem;
-  color: var(--text-primary);
-}
-
-/* Sidebar nav */
+/* Sidebar Nav */
 .sidebar-nav {
   list-style: none;
-  padding: 8px 0;
+  padding: 0;
   margin: 0;
 }
 
-.sidebar-nav .nav-item {
-  margin: 2px 0;
-}
+.sidebar-nav .nav-item { margin-bottom: 2px; }
 
 /* Parent links */
 .sidebar-nav > .nav-item > .nav-link {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 20px;
-  color: var(--text-primary);
-  text-decoration: none;
-  font-size: 0.9rem;
-  font-weight: 400;
-  transition: all var(--transition-fast);
-  position: relative;
-  border-left: 3px solid transparent;
-}
-
-.sidebar-nav > .nav-item > .nav-link:hover {
-  background: var(--bg-surface-hover);
-  border-left-color: var(--neutral-80);
-}
-
-.sidebar-nav > .nav-item > .nav-link.active {
-  background: var(--primary-soft);
-  border-left-color: var(--primary);
+  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 {
-  width: 20px;
-  color: var(--text-secondary);
   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 {
-  margin-left: auto;
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  transition: transform var(--transition-fast);
+  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 */
+/* Sub-menu (Level 1) */
 .sidebar-nav .nav-content {
   list-style: none;
-  padding: 4px 0 4px 44px;
+  padding: 4px 0 4px 32px;
   margin: 0;
-  background: var(--bg-page);
+  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: 8px 16px;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 0.85rem;
-  transition: all var(--transition-fast);
+  padding: 7px 10px;
   border-radius: var(--radius-sm);
-  margin: 2px 0;
+  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 {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
+  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(--primary);
-  font-weight: 500;
-  background: var(--primary-soft);
+  color: var(--color-accent);
+  background: rgba(10,191,124,0.12);
+  border-left-color: var(--color-accent);
+  font-weight: 600;
+  padding-left: 14px;
 }
 
-/* ===================================================
-   MAIN CONTENT - Style Outlook
-   =================================================== */
+/* 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: var(--header-height);
+  padding-top: calc(var(--header-height) + 16px);
   min-height: 100vh;
   transition: margin-left var(--transition-slow);
-  background: var(--bg-page);
+  padding-bottom: 32px;
 }
 
-/* Page content */
-.page-content {
-  padding: 24px;
+@media (max-width: 1199px) {
+  #main { margin-left: 0 !important; }
+  #sidebar { transform: translateX(-100%); }
+  #sidebar.sidebar-open { transform: translateX(0); }
 }
 
-/* Scroll Menu - style onglets Outlook */
+/* Scroll Menu */
 .scrollmenu {
   display: flex;
-  gap: 2px;
+  gap: 4px;
   overflow-x: auto;
-  background: transparent;
-  border-bottom: 1px solid var(--border-default);
-  margin-bottom: 24px;
-  padding: 0;
+  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: 8px 16px;
-  font-size: 0.85rem;
+  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-bottom: 2px solid transparent;
-  margin-bottom: -1px;
+  border: 1px solid transparent;
+  flex-shrink: 0;
 }
 
 .scrollmenu a:hover {
-  color: var(--text-primary);
-  background: var(--bg-surface-hover);
-  border-bottom-color: var(--neutral-80);
+  background: var(--color-primary-ghost);
+  color: var(--color-primary);
+  border-color: rgba(26,107,74,0.2);
 }
 
 .scrollmenu a.active {
-  color: var(--primary);
-  font-weight: 500;
-  border-bottom-color: var(--primary);
+  background: var(--color-primary);
+  color: white;
+  box-shadow: var(--shadow-primary);
 }
 
-/* ===================================================
-   CONTEXT DRAWER - Style Outlook
-   =================================================== */
+/* 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: 16px;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 950;
-  background: var(--bg-surface);
-  color: var(--text-secondary);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-full);
-  padding: 8px 12px;
+  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-fast);
-  font-size: 0.85rem;
+  transition: all var(--transition-base);
 }
-
 .btn-info-context:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
-  box-shadow: var(--shadow-lg);
-  right: 14px;
+  background: var(--color-primary-light);
+  padding-left: 14px;
 }
+.btn-info-context i { font-size: 16px; }
 
-.btn-info-context i {
-  font-size: 1rem;
-}
-
-/* Context Drawer */
+/* Context Drawer Panel */
 #barre_laterale_d {
   position: fixed;
-  right: -380px;
+  right: 0;
   top: var(--header-height);
-  width: var(--context-width);
+  width: var(--context-width) !important;
   height: calc(100vh - var(--header-height));
   background: var(--bg-surface);
-  border-left: 1px solid var(--border-default);
-  box-shadow: var(--shadow-lg);
-  z-index: 950;
+  border-left: 1px solid var(--border-light);
+  box-shadow: var(--shadow-xl);
+  z-index: 1050;
   overflow-y: auto;
-  transition: right var(--transition-slow);
+  overflow-x: hidden;
+  padding: 0 !important;
+  display: none;
+  transition: transform var(--transition-slow);
 }
 
-#barre_laterale_d.show {
-  right: 0;
+#barre_laterale_d .drawer-inner {
+  padding: 16px;
 }
 
-/* Drawer header */
+/* Drawer Close Button */
 .btn-cacher-contexte {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 8px;
   width: 100%;
-  padding: 16px 20px;
-  background: var(--bg-surface);
+  padding: 12px;
+  background: var(--bg-sidebar);
+  color: white;
   border: none;
-  border-bottom: 1px solid var(--border-default);
   cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  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(--bg-surface-hover);
-}
-
-.btn-cacher-contexte i {
-  color: var(--text-secondary);
-  transition: transform var(--transition-fast);
-}
-
-.btn-cacher-contexte:hover i {
-  transform: translateX(4px);
-}
+.btn-cacher-contexte:hover { background: var(--color-primary); }
 
 /* Context Cards */
 .context-card {
-  background: var(--bg-page);
-  border: 1px solid var(--border-default);
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius-md);
-  padding: 16px;
-  margin: 16px;
-  transition: all var(--transition-fast);
+  padding: 12px;
+  margin-bottom: 10px;
+  transition: box-shadow var(--transition-fast);
 }
+.context-card:hover { box-shadow: var(--shadow-sm); }
 
-.context-card:hover {
-  background: var(--bg-surface);
-  box-shadow: var(--shadow-sm);
-  border-color: var(--border-hover);
-}
-
-.context-card-header {
-  font-size: 0.7rem;
-  font-weight: 600;
+.context-card-label {
+  font-size: 0.65rem;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-tertiary);
-  margin-bottom: 12px;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 6px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
+.context-card-label i { color: var(--color-primary); }
 
-.context-card-header i {
-  color: var(--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: var(--bg-surface);
-  border: 1px solid var(--border-default);
+  background: white;
+  border: 1px solid var(--border-medium);
   border-radius: var(--radius-sm);
-  padding: 10px 12px;
+  padding: 7px 10px;
   text-align: left;
-  font-size: 0.85rem;
+  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(--bg-surface-hover);
-  border-color: var(--border-hover);
-  transform: translateX(2px);
+  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 i {
-  color: var(--primary);
-  width: 18px;
+.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 badges */
-.family-stats {
+/* Stats row in context */
+.context-stats {
   display: flex;
-  gap: 8px;
-  margin-top: 8px;
+  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;
 }
 
-.family-stats .badge {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  color: var(--text-secondary);
-  font-weight: 500;
-  padding: 4px 8px;
+/* 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: 16px;
+  margin-bottom: 10px;
 }
-
 .photo-container img {
   width: 80px;
   height: 80px;
   object-fit: cover;
-  border-radius: var(--radius-sm);
-  border: 2px solid var(--bg-surface);
-  box-shadow: var(--shadow-sm);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.photo-container img:hover {
-  transform: scale(1.05);
-  box-shadow: var(--shadow-md);
-  border-color: var(--primary);
-}
-
-/* Recent policies */
-.recent-policies-title {
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--text-tertiary);
-  padding: 16px 16px 8px;
-  letter-spacing: 0.5px;
-}
-
-.policy-item {
-  display: block;
-  padding: 8px 16px;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 0.85rem;
-  transition: all var(--transition-fast);
-  border-left: 2px solid transparent;
-}
-
-.policy-item:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
-  border-left-color: var(--primary);
-}
-
-/* ===================================================
-   TABLES - Style Outlook (Fluent UI)
-   =================================================== */
-.table-container {
-  background: var(--bg-surface);
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-default);
+  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%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-  background: var(--bg-surface);
+  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 th {
-  background: var(--bg-page);
-  color: var(--text-secondary);
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-default);
+.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;
-  letter-spacing: 0.3px;
+  padding: 12px 14px !important;
+  border: none !important;
   white-space: nowrap;
-  text-align: left;
 }
+.table th:hover { background: var(--color-primary-dark) !important; }
 
-.table tbody td {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-default);
-  color: var(--text-primary);
+.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: background var(--transition-fast);
+  transition: all var(--transition-fast);
 }
-
 .table tbody tr:hover {
-  background: var(--bg-surface-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);
 }
 
-.table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-/* Status badges - style Outlook */
+/* Status Badges */
 .badge-status {
   display: inline-flex;
   align-items: center;
-  padding: 4px 10px;
+  gap: 4px;
+  padding: 3px 10px;
   border-radius: var(--radius-full);
-  font-size: 0.7rem;
-  font-weight: 600;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
-  letter-spacing: 0.3px;
 }
-
-.badge-success {
-  background: #dff6dd;
-  color: var(--status-success);
+.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); }
 
-.badge-warning {
-  background: #fff4ce;
-  color: #8e7000;
-}
-
-.badge-error {
-  background: #fde7e9;
-  color: var(--status-error);
-}
-
-.badge-info {
-  background: #deecf9;
-  color: var(--primary);
-}
-
-.badge-urgent {
-  background: #fde7e9;
-  color: var(--status-urgent);
-  animation: pulse-subtle 1.5s infinite;
-}
-
-@keyframes pulse-subtle {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.8; }
-}
-
-/* ===================================================
-   CARDS - Style Outlook
-   =================================================== */
+/* ==============================
+   CARDS
+   ============================== */
 .card {
   background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-card);
-  transition: all var(--transition-fast);
-  overflow: hidden;
-}
-
-.card:hover {
-  box-shadow: var(--shadow-sm);
-  border-color: var(--border-hover);
+  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 {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-default);
-  background: var(--bg-page);
-  font-weight: 600;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  background: transparent;
+  border-bottom: 1px solid var(--border-light);
+  padding: 14px 18px;
+  font-family: 'Syne', sans-serif;
+  font-weight: 700;
+  font-size: 0.88rem;
 }
 
-.card-header i {
-  color: var(--primary);
-}
-
-.card-body {
-  padding: 20px;
-}
-
-/* ===================================================
-   BUTTONS - Style Outlook
-   =================================================== */
+/* ==============================
+   BUTTONS
+   ============================== */
 .btn {
-  padding: 8px 20px;
-  border-radius: var(--radius-sm);
-  font-size: 0.85rem;
-  font-weight: 500;
-  border: 1px solid transparent;
+  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: 8px;
-  cursor: pointer;
-  background: var(--bg-surface);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-}
-
-.btn:hover {
-  background: var(--bg-surface-hover);
-  border-color: var(--border-hover);
+  gap: 6px;
 }
 
 .btn-primary {
-  background: var(--primary);
-  border-color: var(--primary);
-  color: white;
+  background: var(--color-primary) !important;
+  color: white !important;
+  box-shadow: 0 2px 8px rgba(26,107,74,0.3);
 }
-
 .btn-primary:hover {
-  background: var(--primary-hover);
-  border-color: var(--primary-hover);
+  background: var(--color-primary-light) !important;
+  box-shadow: 0 4px 16px rgba(26,107,74,0.4);
   transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
 }
 
-.btn-outline-primary {
-  background: transparent;
-  border-color: var(--primary);
-  color: var(--primary);
+.btn-info {
+  background: var(--color-info) !important;
+  color: white !important;
+}
+.btn-info:hover {
+  background: #2563eb !important;
+  transform: translateY(-1px);
 }
 
-.btn-outline-primary:hover {
-  background: var(--primary-soft);
+.btn-warning {
+  background: var(--color-urgent) !important;
+  color: white !important;
 }
 
-.btn-sm {
-  padding: 4px 12px;
-  font-size: 0.75rem;
+.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-lg {
-  padding: 10px 24px;
-  font-size: 0.95rem;
-}
+.btn-sm { padding: 5px 12px; font-size: 0.75rem; }
 
-/* ===================================================
-   FORMS - Style Outlook
-   =================================================== */
+/* ==============================
+   FORM ELEMENTS
+   ============================== */
 .form-control, .form-select {
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--border-medium);
   border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   color: var(--text-primary);
-  background: var(--bg-surface);
-  transition: all var(--transition-fast);
-  width: 100%;
-  height: auto;
+  height: auto !important;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
-
-.form-control:hover, .form-select:hover {
-  border-color: var(--border-hover);
-}
-
 .form-control:focus, .form-select:focus {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
+  border-color: var(--color-primary-light);
+  box-shadow: 0 0 0 3px rgba(26,107,74,0.1);
   outline: none;
 }
 
-.form-label {
-  font-weight: 500;
+td input[readonly], td select[readonly],
+td input[disabled], td select[disabled] {
+  background: #f1f5f9 !important;
+  font-weight: 600;
   color: var(--text-secondary);
-  margin-bottom: 6px;
-  font-size: 0.8rem;
+}
+
+/* ==============================
+   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 - Style Outlook
-   =================================================== */
+/* ==============================
+   MODALS
+   ============================== */
 .modal-content {
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
+  border: none;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
   overflow: hidden;
 }
 
 .modal-header {
-  background: var(--bg-page);
-  border-bottom: 1px solid var(--border-default);
+  background: var(--color-primary) !important;
+  color: white !important;
   padding: 16px 20px;
+  border-bottom: none;
 }
 
 .modal-title {
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: 1rem;
+  font-family: 'Syne', sans-serif;
+  font-size: 0.92rem !important;
+  font-weight: 700;
 }
 
-.modal-header .btn-close {
-  background: transparent;
-  border: none;
-  font-size: 1.2rem;
-  color: var(--text-secondary);
-  padding: 4px;
+.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);
-  transition: all var(--transition-fast);
-  cursor: pointer;
+  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-header .btn-close:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-primary);
-}
-
-.modal-body {
-  padding: 20px;
-}
+.modal-body { padding: 20px; }
 
 .modal-footer {
-  border-top: 1px solid var(--border-default);
-  padding: 16px 20px;
-  background: var(--bg-page);
+  border-top: 1px solid var(--border-light);
+  padding: 12px 20px;
   gap: 8px;
 }
 
-/* ===================================================
-   LOADERS & PROGRESS
-   =================================================== */
-.spinner-outlook {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--border-default);
-  border-top-color: var(--primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
+/* 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;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+/* ==============================
+   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;
 }
 
-/* Skeleton loader */
-.skeleton {
-  background: linear-gradient(90deg, 
-    var(--border-default) 25%, 
-    var(--bg-surface-hover) 50%, 
-    var(--border-default) 75%
-  );
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite;
+/* ==============================
+   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); }
 
-@keyframes skeleton-loading {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
+/* ==============================
+   FOOTER (inside context bar)
+   ============================== */
+footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; }
 
-/* ===================================================
-   UTILS
-   =================================================== */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  border: 0;
-}
-
-/* Hover effects */
-.hover-lift {
-  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.hover-lift:hover {
+/* ==============================
+   MICRO-INTERACTIONS & UTILS
+   ============================== */
+.hover-shadow-sm:hover {
+  box-shadow: var(--shadow-md) !important;
   transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.hover-scale {
-  transition: transform var(--transition-fast);
+  transition: all var(--transition-base);
 }
 
 .hover-scale:hover {
-  transform: scale(1.02);
+  transform: scale(1.04);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-base);
 }
 
-/* Mode test */
+.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: #fff4ce;
-  border-bottom-color: #ffaa44;
+  background: linear-gradient(90deg, #7b2d00, #c0392b) !important;
 }
-
 .mode-test-banner {
-  background: repeating-linear-gradient(45deg, #ffaa44, #ffaa44 10px, #fff4ce 10px, #fff4ce 20px);
-  color: var(--text-primary);
+  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;
-  padding: 2px;
+  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;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ==============================
    RESPONSIVE
-   =================================================== */
-@media (max-width: 1199px) {
-  #main { margin-left: 0; }
-  #sidebar { transform: translateX(-100%); }
-  #sidebar.sidebar-open { transform: translateX(0); }
-}
-
+   ============================== */
 @media (max-width: 768px) {
-  .page-content { padding: 16px; }
-  #barre_laterale_d { width: 100%; }
-  .scrollmenu { flex-wrap: nowrap; }
-}
\ No newline at end of file
+  #sidebar { width: var(--sidebar-width); }
+  #barre_laterale_d { width: 100% !important; }
+  .scrollmenu { margin: 0 8px 8px; }
+  .page-content { padding: 0 8px; }
+}
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index edec6a99..9f2c0ad2 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -72,7 +72,7 @@ $descriptionVue             = $_SESSION['descriptionVue'];
   <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css" rel="stylesheet">
 
   <!-- FontAwesome -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluentui/react-icons@1.1.202/dist/font-icons/fluent-icons.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
 
   <!-- App CSS (Bootstrap original conservé pour rétrocompatibilité) -->
   <link href="Bootstrap/css/style.css?ver=2024.03.14.05" rel="stylesheet">