diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index b695e7f5..16d6d3a6 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1,145 +1,186 @@
-/* =============================
+/* ============================================================
    INTER SANTÉ — THEME MODERN
-   SaaS Premium UI v2025
-   ============================= */
+   Portail Gestionnaire — v2025
+   Inspiré Microsoft Outlook / Fluent Design System
+   Palette : Bleu #0A64AD · Gris #F3F6F9 · Turquoise #00A3E0
+   ============================================================ */
 
-/* === 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');
+/* === FONTS : Segoe UI → Inter (meilleure compatibilité web) === */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
-/* === CSS VARIABLES === */
+/* ============================================================
+   VARIABLES — DESIGN TOKEN SYSTEM
+   ============================================================ */
 :root {
-  /* Brand Colors */
-  --color-primary:       #1a6b4a;
-  --color-primary-light: #25a06e;
-  --color-primary-dark:  #114532;
-  --color-primary-ghost: rgba(26, 107, 74, 0.08);
 
-  /* Accent / Status */
-  --color-accent:        #0abf7c;
-  --color-urgent:        #e63946;
-  --color-warning:       #f4a261;
-  --color-success:       #2ec4b6;
-  --color-info:          #3a86ff;
-  --color-neutral:       #6c757d;
+  /* ── Palette principale Fluent / Outlook ── */
+  --color-primary:        #0A64AD;   /* Bleu Outlook profond         */
+  --color-primary-light:  #1A7DC4;   /* Hover / survol               */
+  --color-primary-dark:   #064F8C;   /* Pressed / actif fort         */
+  --color-primary-ghost:  rgba(10, 100, 173, 0.07);
+  --color-primary-tint:   rgba(10, 100, 173, 0.12);
 
-  /* Backgrounds */
-  --bg-base:             #f4f6f9;
-  --bg-surface:          #ffffff;
-  --bg-surface-2:        #f8fafc;
-  --bg-sidebar:          #ffffff;
-  --bg-header:           #ffffff;
+  /* ── Accent turquoise Outlook ── */
+  --color-accent:         #00A3E0;   /* Turquoise Fluent             */
+  --color-accent-light:   rgba(0, 163, 224, 0.12);
 
-  /* Text */
-  --text-primary:        #1a2332;
-  --text-secondary:      #6b7280;
-  --text-muted:          #9ca3af;
-  --text-inverse:        #ffffff;
+  /* ── Status ── */
+  --color-urgent:         #C4314B;   /* Rouge Fluent (Teams/Outlook) */
+  --color-warning:        #FFB74D;   /* Orange doux                  */
+  --color-success:        #107C10;   /* Vert Fluent                  */
+  --color-success-bg:     rgba(16, 124, 16, 0.08);
+  --color-info:           #00A3E0;
+  --color-neutral:        #8A8886;   /* Gris Fluent exact            */
 
-  /* Borders */
-  --border-light:        #e8ecf0;
-  --border-medium:       #d1d5db;
+  /* ── Backgrounds épurés ── */
+  --bg-base:              #F3F6F9;   /* Gris clair Outlook           */
+  --bg-surface:           #FFFFFF;
+  --bg-surface-2:         #F7F9FC;
+  --bg-surface-hover:     #EEF3F8;
+  --bg-sidebar:           #FAFBFC;   /* Sidebar CLAIR style Outlook  */
+  --bg-header:            #0A64AD;   /* Header bleu Outlook          */
 
-  /* Spacing & Radius */
+  /* ── Texte ── */
+  --text-primary:         #1B1B1F;
+  --text-secondary:       #484644;
+  --text-muted:           #8A8886;
+  --text-inverse:         #FFFFFF;
+  --text-on-primary:      #FFFFFF;
+
+  /* ── Bordures fines ── */
+  --border-light:         #E1E5EA;
+  --border-medium:        #C8CDD4;
+  --border-focus:         #0A64AD;
+
+  /* ── Radius Fluent ── */
+  --radius-xs:   4px;
   --radius-sm:   6px;
-  --radius-md:   12px;
-  --radius-lg:   16px;
-  --radius-xl:   24px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-xl:   16px;
   --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);
+  /* ── Ombres douces Fluent ── */
+  --shadow-xs:      0 1px 2px rgba(0,0,0,.04);
+  --shadow-sm:      0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+  --shadow-md:      0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
+  --shadow-lg:      0 8px 24px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.05);
+  --shadow-xl:      0 16px 40px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);
+  --shadow-primary: 0 4px 14px rgba(10, 100, 173, 0.30);
 
-  /* Transitions */
-  --transition-fast:   0.15s ease;
-  --transition-base:   0.25s ease;
-  --transition-slow:   0.4s cubic-bezier(.4,0,.2,1);
+  /* ── Transitions Fluent ── */
+  --transition-fast:   0.12s cubic-bezier(.33,1,.68,1);
+  --transition-base:   0.20s cubic-bezier(.33,1,.68,1);
+  --transition-slow:   0.35s cubic-bezier(.33,1,.68,1);
 
-  /* Layout */
-  --sidebar-width:       240px;
-  --sidebar-collapsed:   68px;
-  --header-height:       64px;
-  --context-width:       320px;
+  /* ── Layout ── */
+  --sidebar-width:       220px;
+  --sidebar-collapsed:   52px;
+  --header-height:       48px;
+  --context-width:       300px;
 }
 
-/* === BASE RESET & GLOBALS === */
+/* ============================================================
+   BASE
+   ============================================================ */
 *, *::before, *::after { box-sizing: border-box; }
 
-html { font-size: 14px; scroll-behavior: smooth; }
+html {
+  font-size: 14px;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
 
 body {
-  font-family: 'DM Sans', system-ui, sans-serif;
+  font-family: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
   background: var(--bg-base);
   color: var(--text-primary);
-  line-height: 1.6;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6,
-.fw-bold, .fw-semibold, .nav-link span {
-  font-family: 'Syne', sans-serif;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Inter', 'Segoe UI', sans-serif;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-primary);
 }
 
-/* === SCROLLBAR === */
-::-webkit-scrollbar { width: 5px; height: 5px; }
+/* Scrollbar Fluent */
+::-webkit-scrollbar { width: 4px; height: 4px; }
 ::-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); }
+::-webkit-scrollbar-thumb {
+  background: var(--border-medium);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover { background: var(--color-neutral); }
 
-/* ==============================
-   HEADER
-   ============================== */
+/* ============================================================
+   HEADER — Bleu Outlook #0A64AD
+   ============================================================ */
 #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;
+  border-bottom: none;
+  padding: 0 12px;
   z-index: 1000;
-  transition: background var(--transition-base);
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.08),
+              0 2px 8px rgba(10,100,173,0.25);
+}
+
+/* Liseré turquoise bas du header */
+#header::after {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    var(--color-accent) 20%,
+    rgba(0,163,224,0.5) 60%,
+    transparent 100%
+  );
 }
 
 #header.mode-test {
-  background: linear-gradient(90deg, #7b2d00, #c0392b);
-}
-
-#header .logo {
-  gap: 10px;
-  text-decoration: none;
+  background: linear-gradient(90deg, #8B0000, #C4314B) !important;
 }
 
+/* Logo */
+#header .logo { gap: 8px; text-decoration: none; flex-shrink: 0; }
 #header .logo img {
-  width: 34px;
-  height: 34px;
-  border-radius: var(--radius-sm);
+  width: 28px; height: 28px;
   object-fit: contain;
+  filter: brightness(0) invert(1);
+  opacity: 0.92;
 }
-
 #header .logo span {
-  font-family: 'Syne', sans-serif;
-  font-weight: 800;
-  font-size: 1.05rem;
-  color: var(--color-primary);
-  letter-spacing: -0.02em;
+  font-weight: 600;
+  font-size: 0.93rem;
+  color: rgba(255,255,255,0.95);
+  letter-spacing: 0.01em;
+  white-space: nowrap;
 }
 
-/* Toggle sidebar button */
+/* Toggle */
 .toggle-sidebar-btn {
-  font-size: 1.4rem;
-  color: var(--text-secondary);
+  font-size: 1.2rem;
+  color: rgba(255,255,255,0.78);
   cursor: pointer;
-  padding: 4px 8px;
+  padding: 4px 7px;
   border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
-  margin-left: 12px;
+  margin-left: 8px;
+  line-height: 1;
 }
 .toggle-sidebar-btn:hover {
-  color: var(--color-primary);
-  background: var(--color-primary-ghost);
+  color: #fff;
+  background: rgba(255,255,255,0.15);
 }
 
 /* Breadcrumb */
@@ -147,352 +188,340 @@ h1, h2, h3, h4, h5, h6,
   background: transparent !important;
   padding: 0 !important;
   margin: 0;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
 }
 .breadcrumb-item a {
-  color: var(--text-muted);
+  color: rgba(255,255,255,0.62);
   text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   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); }
+.breadcrumb-item a:hover { color: #fff; }
+.breadcrumb-item.active {
+  color: rgba(255,255,255,0.94);
+  font-weight: 500;
+}
+.breadcrumb-item + .breadcrumb-item::before {
+  content: "›";
+  color: rgba(255,255,255,0.35);
+  font-size: 1rem;
+  line-height: 1;
+}
 
-/* Header Nav Icons */
+/* Nav icons header */
 #header .header-nav .nav-link {
-  color: var(--text-secondary);
-  padding: 6px 10px;
+  color: rgba(255,255,255,0.78);
+  padding: 5px 8px;
   border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
   position: relative;
+  font-size: 0.88rem;
 }
 #header .header-nav .nav-link:hover {
-  color: var(--color-primary);
-  background: var(--color-primary-ghost);
+  color: #fff;
+  background: rgba(255,255,255,0.14);
 }
 
+/* Badge notification */
 .badge-number {
   position: absolute;
-  top: 2px; right: 4px;
+  top: 1px; right: 3px;
   background: var(--color-urgent) !important;
-  font-size: 0.6rem;
-  min-width: 16px;
-  height: 16px;
+  font-size: 0.55rem;
+  font-weight: 700;
+  min-width: 15px;
+  height: 15px;
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1.5px solid var(--bg-header);
+  animation: pulse-badge 2.5s infinite;
   cursor: pointer;
-  border: 2px solid white;
-  transition: transform var(--transition-fast);
 }
-.badge-number:hover { transform: scale(1.2); }
+.badge-number:hover { transform: scale(1.15); }
 
-/* Company logo area */
+/* Zone société — verre dépoli */
 .company-logo-area {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   padding: 4px 10px;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-light);
-  background: var(--bg-surface-2);
+  border: 1px solid rgba(255,255,255,0.20);
+  background: rgba(255,255,255,0.10);
+  backdrop-filter: blur(4px);
   transition: all var(--transition-fast);
-  max-width: 180px;
+  max-width: 175px;
+  text-decoration: none;
 }
 .company-logo-area:hover {
-  border-color: var(--color-primary-light);
-  box-shadow: var(--shadow-sm);
+  background: rgba(255,255,255,0.20);
+  border-color: rgba(255,255,255,0.38);
 }
-.company-logo-area img { height: 32px; width: auto; object-fit: contain; }
+.company-logo-area img { height: 28px; width: auto; object-fit: contain; }
 .company-logo-area .company-name {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: rgba(255,255,255,0.95);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* User Initials Badge */
+/* Initiales — turquoise sur bleu */
 .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;
+  width: 28px; height: 28px;
+  border-radius: var(--radius-md);
+  background: var(--color-accent);
+  color: #fff;
   font-weight: 700;
-  font-size: 0.75rem;
+  font-size: 0.68rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--shadow-primary);
-  transition: transform var(--transition-fast);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+  flex-shrink: 0;
+}
+.nav-link:hover .initials {
+  transform: scale(1.06);
+  box-shadow: 0 2px 8px rgba(0,163,224,0.45);
 }
-.nav-link:hover .initials { transform: scale(1.08); }
 
 /* Dropdown */
 .dropdown-menu {
   border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
-  padding: 6px;
-  font-size: 0.85rem;
-  margin-top: 8px !important;
+  padding: 4px;
+  font-size: 0.82rem;
+  margin-top: 6px !important;
+  background: var(--bg-surface);
 }
 .dropdown-item {
   border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  gap: 10px;
+  padding: 7px 11px;
+  gap: 9px;
   display: flex;
   align-items: center;
-  color: var(--text-primary);
+  color: var(--text-secondary);
   transition: all var(--transition-fast);
+  font-size: 0.81rem;
 }
 .dropdown-item:hover {
   background: var(--color-primary-ghost);
   color: var(--color-primary);
 }
-.dropdown-item i { width: 16px; color: var(--text-muted); }
+.dropdown-item i { width: 15px; color: var(--text-muted); font-size: 0.82rem; }
+.dropdown-divider { border-color: var(--border-light); margin: 3px 0; }
 
-/* Language flag */
-.lang-selector img { border-radius: 3px; }
+.lang-selector img { border-radius: 2px; }
 
-/* ==============================
-   SIDEBAR
-   ============================== */
+/* ============================================================
+   SIDEBAR — Navigation Pane Outlook (fond clair, épuré)
+   ============================================================ */
 #sidebar {
   width: var(--sidebar-width);
   background: var(--bg-sidebar);
+  border-right: 1px solid var(--border-light);
   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;
+  padding: 8px 6px;
 }
 
-#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::before { display: none; } /* Pas d'ornement — épuré Fluent */
+
+.sidebar-nav { list-style: none; padding: 0; margin: 0; }
+.sidebar-nav .nav-item { margin-bottom: 1px; }
+
+.sidebar-section-label {
+  font-size: 0.60rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 10px 10px 3px;
+  display: block;
 }
 
-/* Sidebar Nav */
-.sidebar-nav {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.sidebar-nav .nav-item { margin-bottom: 2px; }
-
-/* Parent links */
+/* Liens parent */
 .sidebar-nav > .nav-item > .nav-link {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 9px 10px;
+  gap: 9px;
+  padding: 7px 10px;
   border-radius: var(--radius-md);
-  color: rgba(255,255,255,0.72);
-  font-size: 0.82rem;
-  font-weight: 500;
+  color: var(--text-secondary);
+  font-size: 0.81rem;
+  font-weight: 400;
   text-decoration: none;
-  transition: all var(--transition-base);
+  transition: all var(--transition-fast);
   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:hover {
+  background: var(--bg-surface-hover);
+  color: var(--text-primary);
 }
-
 .sidebar-nav > .nav-item > .nav-link i:first-child {
-  font-size: 1.1rem;
-  width: 22px;
+  font-size: 0.95rem;
+  width: 20px;
   text-align: center;
   flex-shrink: 0;
-  opacity: 0.85;
+  color: var(--text-muted);
+  transition: color var(--transition-fast);
 }
-
+.sidebar-nav > .nav-item > .nav-link:hover i:first-child { color: var(--color-primary); }
 .sidebar-nav > .nav-item > .nav-link span {
-  font-family: 'Syne', sans-serif;
-  font-size: 0.8rem;
-  letter-spacing: 0.01em;
+  font-size: 0.80rem;
   flex: 1;
-  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: 400;
 }
-
 .sidebar-nav > .nav-item > .nav-link span.active-main {
-  color: var(--color-accent);
-  font-weight: 700;
+  color: var(--color-primary);
+  font-weight: 600;
 }
-
 .sidebar-nav > .nav-item > .nav-link .bi-chevron-down {
-  font-size: 0.65rem;
-  opacity: 0.6;
-  transition: transform var(--transition-base);
+  font-size: 0.60rem;
+  color: var(--text-muted);
+  transition: transform var(--transition-base), color var(--transition-fast);
   flex-shrink: 0;
 }
-
-/* Rotates chevron when open */
 .sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down {
   transform: rotate(180deg);
-  opacity: 1;
+  color: var(--color-primary);
 }
 
-/* Sub-menu (Level 1) */
+/* Actif — accent bleu à gauche, style Outlook */
+.sidebar-nav > .nav-item > .nav-link.parent-active,
+.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] {
+  background: var(--color-primary-ghost);
+  color: var(--color-primary);
+}
+.sidebar-nav > .nav-item > .nav-link.parent-active i:first-child,
+.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] i:first-child {
+  color: var(--color-primary);
+}
+.sidebar-nav > .nav-item > .nav-link.parent-active::before {
+  content: '';
+  position: absolute;
+  left: 0; top: 20%; bottom: 20%;
+  width: 3px;
+  background: var(--color-primary);
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+/* Sous-menu */
 .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;
+  padding: 2px 0 2px 29px;
+  margin: 0 0 2px 0;
 }
-
-.sidebar-nav .nav-content li { margin-bottom: 1px; }
-
 .sidebar-nav .nav-content li a {
   display: block;
-  padding: 7px 10px;
+  padding: 5px 10px;
   border-radius: var(--radius-sm);
-  color: rgba(255,255,255,0.55);
-  font-size: 0.78rem;
+  color: var(--text-muted);
+  font-size: 0.77rem;
+  font-weight: 400;
   text-decoration: none;
   transition: all var(--transition-fast);
   border-left: 2px solid transparent;
-  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
 .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;
+  color: var(--text-primary);
+  background: var(--bg-surface-hover);
 }
-
+/* Sous-lien actif — accent turquoise */
 .sidebar-nav .nav-content li a.active-submenu {
-  color: var(--color-accent);
-  background: rgba(10,191,124,0.12);
+  color: var(--color-primary);
+  background: var(--color-primary-tint);
   border-left-color: var(--color-accent);
-  font-weight: 600;
-  padding-left: 14px;
+  font-weight: 500;
 }
 
-/* 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
+   ============================================================ */
 #main {
   margin-left: var(--sidebar-width);
-  padding-top: calc(var(--header-height) + 16px);
+  padding-top: calc(var(--header-height) + 12px);
   min-height: 100vh;
   transition: margin-left var(--transition-slow);
-  padding-bottom: 32px;
+  padding-bottom: 28px;
 }
 
 @media (max-width: 1199px) {
   #main { margin-left: 0 !important; }
-  #sidebar { transform: translateX(-100%); }
-  #sidebar.sidebar-open { transform: translateX(0); }
+  #sidebar {
+    transform: translateX(-100%);
+    width: var(--sidebar-width) !important;
+    background: var(--bg-surface);
+    box-shadow: var(--shadow-xl);
+  }
+  #sidebar.sidebar-mobile-open { transform: translateX(0); }
 }
 
-/* Scroll Menu */
+/* Scroll menu */
 .scrollmenu {
   display: flex;
-  gap: 4px;
+  gap: 0;
   overflow-x: auto;
-  padding: 8px 16px;
+  padding: 0 16px;
   background: var(--bg-surface);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-xs);
-  margin: 0 16px 16px;
+  border-bottom: 1px solid var(--border-light);
+  margin: 0 0 14px 0;
   scrollbar-width: none;
+  box-shadow: var(--shadow-xs);
 }
 .scrollmenu::-webkit-scrollbar { display: none; }
-
 .scrollmenu a {
   white-space: nowrap;
-  padding: 6px 14px;
-  border-radius: var(--radius-full);
+  padding: 10px 14px;
   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;
+  border-bottom: 2px solid transparent;
 }
-
 .scrollmenu a:hover {
-  background: var(--color-primary-ghost);
   color: var(--color-primary);
-  border-color: rgba(26,107,74,0.2);
+  border-bottom-color: rgba(10,100,173,0.30);
+  background: var(--color-primary-ghost);
 }
-
 .scrollmenu a.active {
-  background: var(--color-primary);
-  color: white;
-  box-shadow: var(--shadow-primary);
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+  font-weight: 600;
 }
 
-/* Page content wrapper */
-.page-content {
-  padding: 0 16px;
-}
-
-/* Fixed header within main */
+.page-content { padding: 0 16px; }
 .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 */
+/* ============================================================
+   CONTEXT DRAWER
+   ============================================================ */
 .btn-info-context {
   position: fixed;
   right: 0;
@@ -503,22 +532,21 @@ h1, h2, h3, h4, h5, h6,
   color: white;
   border: none;
   border-radius: var(--radius-lg) 0 0 var(--radius-lg);
-  padding: 12px 10px;
+  padding: 11px 9px;
   cursor: pointer;
   box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   transition: all var(--transition-base);
 }
 .btn-info-context:hover {
   background: var(--color-primary-light);
-  padding-left: 14px;
+  padding-left: 13px;
 }
-.btn-info-context i { font-size: 16px; }
+.btn-info-context i { font-size: 14px; }
 
-/* Context Drawer Panel */
 #barre_laterale_d {
   position: fixed;
   right: 0;
@@ -533,93 +561,84 @@ h1, h2, h3, h4, h5, h6,
   overflow-x: hidden;
   padding: 0 !important;
   display: none;
-  transition: transform var(--transition-slow);
 }
 
-#barre_laterale_d .drawer-inner {
-  padding: 16px;
-}
+#barre_laterale_d .drawer-inner { padding: 14px; }
 
-/* Drawer Close Button */
 .btn-cacher-contexte {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
+  justify-content: space-between;
   width: 100%;
-  padding: 12px;
-  background: var(--bg-sidebar);
+  padding: 10px 14px;
+  background: var(--color-primary);
   color: white;
   border: none;
   cursor: pointer;
-  font-size: 0.8rem;
-  font-family: 'Syne', sans-serif;
+  font-size: 0.74rem;
   font-weight: 600;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
   transition: background var(--transition-fast);
-  margin-bottom: 16px;
-  border-radius: 0;
+  margin-bottom: 14px;
 }
-.btn-cacher-contexte:hover { background: var(--color-primary); }
+.btn-cacher-contexte:hover { background: var(--color-primary-light); }
 
-/* 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;
+  padding: 10px;
+  margin-bottom: 8px;
   transition: box-shadow var(--transition-fast);
 }
 .context-card:hover { box-shadow: var(--shadow-sm); }
 
 .context-card-label {
-  font-size: 0.65rem;
-  font-weight: 700;
+  font-size: 0.61rem;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--text-muted);
-  margin-bottom: 6px;
+  margin-bottom: 5px;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
 }
-.context-card-label i { color: var(--color-primary); }
-
+.context-card-label i { color: var(--color-primary); font-size: 0.70rem; }
 .context-card-label a {
-  color: var(--color-primary);
+  color: var(--color-accent);
   text-decoration: none;
-  font-weight: 700;
+  font-weight: 600;
   margin-left: auto;
-  font-size: 0.7rem;
+  font-size: 0.69rem;
 }
 .context-card-label a:hover { text-decoration: underline; }
 
 .context-btn {
   width: 100%;
   background: white;
-  border: 1px solid var(--border-medium);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius-sm);
-  padding: 7px 10px;
+  padding: 6px 10px;
   text-align: left;
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-size: 0.76rem;
+  font-weight: 500;
+  color: var(--text-secondary);
   cursor: pointer;
   transition: all var(--transition-fast);
   display: flex;
   align-items: center;
-  gap: 8px;
-  text-overflow: ellipsis;
+  gap: 7px;
   overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .context-btn:hover {
   background: var(--color-primary-ghost);
-  border-color: var(--color-primary-light);
+  border-color: rgba(10,100,173,0.25);
   color: var(--color-primary);
 }
-.context-btn i { color: var(--color-primary); flex-shrink: 0; }
+.context-btn i { color: var(--color-primary); flex-shrink: 0; font-size: 0.77rem; }
 
 .context-btn.btn-primary-context {
   background: var(--color-primary);
@@ -629,130 +648,116 @@ h1, h2, h3, h4, h5, h6,
 .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); }
+.context-btn.btn-primary-context i { color: rgba(255,255,255,0.85); }
 
-/* Stats row in context */
-.context-stats {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 10px;
-}
+.context-stats { display: flex; gap: 4px; margin-bottom: 8px; }
 .context-stat {
   flex: 1;
-  background: var(--bg-surface-2);
+  background: var(--bg-surface);
   border: 1px solid var(--border-light);
   border-radius: var(--radius-sm);
-  padding: 8px 4px;
+  padding: 7px 4px;
   text-align: center;
 }
 .context-stat-value {
-  font-family: 'Syne', sans-serif;
-  font-size: 0.95rem;
-  font-weight: 800;
+  font-size: 1rem;
+  font-weight: 700;
   color: var(--color-primary);
+  line-height: 1;
 }
 .context-stat-label {
-  font-size: 0.58rem;
+  font-size: 0.57rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  margin-top: 2px;
 }
 
-/* Recent Policies List */
 .recent-policies-title {
-  font-size: 0.65rem;
-  font-weight: 700;
+  font-size: 0.61rem;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--text-muted);
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
+  gap: 5px;
+  margin-bottom: 6px;
 }
-.recent-policies-title i { color: var(--color-primary); }
+.recent-policies-title i { color: var(--color-primary); font-size: 0.67rem; }
 
 .policy-item {
-  padding: 7px 10px;
+  display: block;
+  padding: 6px 10px;
   border-radius: var(--radius-sm);
   border: 1px solid var(--border-light);
-  margin-bottom: 4px;
+  border-left: 2px solid transparent;
+  margin-bottom: 3px;
   background: white;
-  transition: all var(--transition-fast);
-  font-size: 0.75rem;
+  font-size: 0.74rem;
   color: var(--text-secondary);
   text-decoration: none;
-  display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: all var(--transition-fast);
 }
 .policy-item:hover {
   background: var(--color-primary-ghost);
   color: var(--color-primary);
-  border-color: rgba(26,107,74,0.2);
-  padding-left: 14px;
+  border-left-color: var(--color-accent);
 }
 
-/* Photo container */
-.photo-container {
-  text-align: center;
-  margin-bottom: 10px;
-}
+.photo-container { text-align: center; margin-bottom: 8px; }
 .photo-container img {
-  width: 80px;
-  height: 80px;
+  width: 72px; height: 72px;
   object-fit: cover;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
-  border: 3px solid white;
+  border: 2px solid var(--border-light);
   transition: transform var(--transition-base);
   cursor: pointer;
 }
-.photo-container img:hover { transform: scale(1.05); }
+.photo-container img:hover { transform: scale(1.04); }
 
-/* Password change link */
 .change-pwd-link {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
+  gap: 9px;
+  padding: 8px 10px;
   border-radius: var(--radius-md);
   background: var(--bg-surface-2);
-  border: 1px dashed var(--border-medium);
+  border: 1px solid var(--border-light);
   text-decoration: none;
   color: var(--text-secondary);
-  font-size: 0.78rem;
+  font-size: 0.76rem;
   transition: all var(--transition-fast);
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 .change-pwd-link:hover {
   background: var(--color-primary-ghost);
-  border-color: var(--color-primary-light);
+  border-color: rgba(10,100,173,0.20);
   color: var(--color-primary);
 }
-.change-pwd-link img { width: 22px; }
+.change-pwd-link img { width: 18px; opacity: 0.65; }
 
-/* Devis mode banner */
 .mode-devis-banner {
-  background: linear-gradient(135deg, #7209b7, #f72585);
+  background: linear-gradient(135deg, #6B21A8, #C026D3);
   color: white;
   text-align: center;
-  font-family: 'Syne', sans-serif;
-  font-size: 0.7rem;
+  font-size: 0.67rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
-  padding: 8px;
+  letter-spacing: 0.07em;
+  padding: 7px;
   border-radius: var(--radius-sm);
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   text-transform: uppercase;
 }
 
-/* ==============================
-   TABLES (DataTables)
-   ============================== */
+/* ============================================================
+   TABLES — DataTables épurées Fluent
+   ============================================================ */
 .table-container {
   background: white;
   border-radius: var(--radius-lg);
@@ -763,244 +768,233 @@ h1, h2, h3, h4, h5, h6,
 
 .table {
   background: white !important;
-  border-collapse: separate;
-  border-spacing: 0;
+  border-collapse: collapse;
   width: 100%;
-  font-size: 0.82rem;
+  font-size: 0.80rem;
   --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 > thead,
+.table thead tr { background: 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;
+  font-size: 0.70rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
-  padding: 12px 14px !important;
+  padding: 10px 12px !important;
   border: none !important;
   white-space: nowrap;
 }
 .table th:hover { background: var(--color-primary-dark) !important; }
 
 .table td {
-  padding: 10px 14px !important;
+  padding: 9px 12px !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 { transition: background var(--transition-fast); }
+.table tbody tr:hover { background: var(--bg-surface-hover) !important; }
 .table tbody tr:hover td:first-child {
-  border-left: 3px solid var(--color-accent);
+  box-shadow: inset 3px 0 0 var(--color-accent);
 }
 
-/* Status Badges */
+/* Badges statut */
 .badge-status {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 3px 10px;
+  padding: 2px 9px;
   border-radius: var(--radius-full);
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-size: 0.67rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
 }
 .badge-status::before {
   content: '';
-  width: 5px;
-  height: 5px;
+  width: 5px; height: 5px;
   border-radius: 50%;
   background: currentColor;
+  flex-shrink: 0;
 }
-.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-valide   { background: rgba(16,124,16,0.10);   color: #107C10; }
+.badge-urgent   { background: rgba(196,49,75,0.10);    color: #C4314B; }
+.badge-attente  { background: rgba(255,183,77,0.15);   color: #8A5000; }
+.badge-info     { background: rgba(0,163,224,0.12);    color: #0078A8; }
+.badge-inactive { background: rgba(138,136,134,0.12);  color: #6B6966; }
 
-/* ==============================
+/* ============================================================
    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);
+  transition: box-shadow var(--transition-base), transform var(--transition-base);
 }
-.card:hover { box-shadow: var(--shadow-md); }
-
+.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
 .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;
+  padding: 12px 16px;
+  font-weight: 600;
+  font-size: 0.84rem;
 }
 
-/* ==============================
-   BUTTONS
-   ============================== */
+/* ============================================================
+   BOUTONS — Fluent
+   ============================================================ */
 .btn {
-  border-radius: var(--radius-sm) !important;
-  font-size: 0.8rem;
-  font-weight: 600;
-  font-family: 'DM Sans', sans-serif;
-  padding: 7px 16px;
+  border-radius: var(--radius-md) !important;
+  font-size: 0.79rem;
+  font-weight: 500;
+  font-family: 'Inter', 'Segoe UI', sans-serif;
+  padding: 6px 14px;
   transition: all var(--transition-fast);
-  border: none;
+  border: 1px solid transparent;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
+  line-height: 1.4;
 }
 
 .btn-primary {
   background: var(--color-primary) !important;
+  border-color: var(--color-primary) !important;
   color: white !important;
-  box-shadow: 0 2px 8px rgba(26,107,74,0.3);
+  box-shadow: 0 1px 4px rgba(10,100,173,0.22);
 }
 .btn-primary:hover {
   background: var(--color-primary-light) !important;
-  box-shadow: 0 4px 16px rgba(26,107,74,0.4);
+  border-color: var(--color-primary-light) !important;
+  box-shadow: 0 2px 8px rgba(10,100,173,0.28);
   transform: translateY(-1px);
 }
+.btn-primary:active { background: var(--color-primary-dark) !important; transform: none; }
 
 .btn-info {
-  background: var(--color-info) !important;
+  background: var(--color-accent) !important;
+  border-color: var(--color-accent) !important;
   color: white !important;
 }
 .btn-info:hover {
-  background: #2563eb !important;
+  background: #0090C8 !important;
+  border-color: #0090C8 !important;
   transform: translateY(-1px);
 }
 
 .btn-warning {
-  background: var(--color-urgent) !important;
-  color: white !important;
+  background: var(--color-warning) !important;
+  border-color: var(--color-warning) !important;
+  color: #1B1B1F !important;
 }
 
-.btn-default, .btn-outline-secondary {
-  background: white;
+.btn-default, .btn-secondary, .btn-outline-secondary {
+  background: white !important;
   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;
+.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
+  background: var(--bg-surface-hover) !important;
+  border-color: var(--color-primary) !important;
   color: var(--color-primary) !important;
-  background: var(--color-primary-ghost);
 }
 
-.btn-sm { padding: 5px 12px; font-size: 0.75rem; }
+.btn-outline-primary {
+  background: transparent !important;
+  border: 1px solid var(--color-primary) !important;
+  color: var(--color-primary) !important;
+}
+.btn-outline-primary:hover { background: var(--color-primary-ghost) !important; }
 
-/* ==============================
-   FORM ELEMENTS
-   ============================== */
+.btn-sm { padding: 4px 11px; font-size: 0.73rem; }
+.btn-lg { padding: 9px 20px; font-size: 0.88rem; }
+
+/* ============================================================
+   FORMULAIRES
+   ============================================================ */
 .form-control, .form-select {
   border: 1px solid var(--border-medium);
-  border-radius: var(--radius-sm);
-  font-size: 0.82rem;
+  border-radius: var(--radius-md);
+  font-size: 0.80rem;
+  font-family: 'Inter', 'Segoe UI', sans-serif;
   color: var(--text-primary);
+  background: white;
   height: auto !important;
+  padding: 6px 10px;
   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);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(10,100,173,0.15);
   outline: none;
 }
+.form-control::placeholder { color: var(--text-muted); }
+.form-label { font-size: 0.77rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
 
 td input[readonly], td select[readonly],
 td input[disabled], td select[disabled] {
-  background: #f1f5f9 !important;
-  font-weight: 600;
+  background: var(--bg-surface-2) !important;
   color: var(--text-secondary);
+  font-weight: 500;
 }
 
-/* ==============================
-   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;
+/* ============================================================
+   LÉGENDES
+   ============================================================ */
+legend, #chemin, fieldset legend, form legend {
+  background: var(--color-primary) !important;
+  color: white !important;
+  font-size: 0.74rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  padding: 5px 12px;
   border-radius: var(--radius-sm);
   display: block;
 }
 
-/* ==============================
-   MODALS
-   ============================== */
+/* ============================================================
+   MODALS — Fluent Dialog
+   ============================================================ */
 .modal-content {
   border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   overflow: hidden;
 }
-
 .modal-header {
   background: var(--color-primary) !important;
   color: white !important;
-  padding: 16px 20px;
+  padding: 14px 18px;
   border-bottom: none;
 }
-
 .modal-title {
-  font-family: 'Syne', sans-serif;
-  font-size: 0.92rem !important;
-  font-weight: 700;
+  font-size: 0.88rem !important;
+  font-weight: 600;
 }
-
 .modal-header .close, .modal-header .btn-close {
-  background: rgba(255,255,255,0.2) !important;
+  background: rgba(255,255,255,0.18) !important;
   color: white !important;
-  border: 1px solid rgba(255,255,255,0.3) !important;
+  border: 1px solid rgba(255,255,255,0.25) !important;
   border-radius: var(--radius-sm);
   opacity: 1;
+  font-size: 0.72rem;
+  padding: 3px 9px;
   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 .close:hover { background: rgba(255,255,255,0.30) !important; }
+.modal-body { padding: 18px; font-size: 0.81rem; }
+.modal-footer { border-top: 1px solid var(--border-light); padding: 10px 18px; gap: 7px; }
 
-.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;
@@ -1009,81 +1003,85 @@ fieldset legend, form legend {
   width: 100%;
   height: 100%;
 }
-.modal.side-panel .modal-content {
-  height: 100%;
-  border-radius: 0;
-}
+.modal.side-panel .modal-content { height: 100%; border-radius: 0; }
 
-/* ==============================
-   NAV TABS
-   ============================== */
+/* ============================================================
+   ONGLETS — Style Outlook (soulignement bleu)
+   ============================================================ */
 .nav-tabs {
-  border-bottom: 2px solid var(--border-light);
-  gap: 4px;
+  border-bottom: 1px solid var(--border-light);
+  gap: 0;
+  background: var(--bg-surface);
+  padding: 0 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;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  padding: 8px 14px;
+  font-size: 0.78rem;
   font-weight: 500;
   transition: all var(--transition-fast);
+  margin-bottom: -1px;
 }
 .nav-tabs .nav-link:hover {
   color: var(--color-primary);
   background: var(--color-primary-ghost);
+  border-bottom-color: rgba(10,100,173,0.30);
 }
 .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;
+  color: var(--color-primary) !important;
+  background: transparent !important;
+  border-bottom: 2px solid var(--color-primary) !important;
+  font-weight: 600;
 }
 
-/* ==============================
-   ALERTS & TOASTS
-   ============================== */
+/* ============================================================
+   ALERTES
+   ============================================================ */
 .alert {
   border: none;
   border-radius: var(--radius-md);
-  font-size: 0.82rem;
-  border-left: 4px solid;
+  font-size: 0.79rem;
+  border-left: 3px solid;
+  padding: 10px 14px;
 }
-.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); }
+.alert-success  { border-color: var(--color-success); background: var(--color-success-bg); color: #0A5C0A; }
+.alert-danger   { border-color: var(--color-urgent);  background: rgba(196,49,75,0.08);    color: #8B0023; }
+.alert-warning  { border-color: var(--color-warning); background: rgba(255,183,77,0.12);   color: #7A4800; }
+.alert-info     { border-color: var(--color-accent);  background: var(--color-accent-light); color: #005878; }
 
-/* ==============================
-   FOOTER (inside context bar)
-   ============================== */
-footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; }
+/* ============================================================
+   FOOTER
+   ============================================================ */
+footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.70rem; }
 
-/* ==============================
-   MICRO-INTERACTIONS & UTILS
-   ============================== */
+/* ============================================================
+   MICRO-INTERACTIONS & UTILITAIRES
+   ============================================================ */
 .hover-shadow-sm:hover {
   box-shadow: var(--shadow-md) !important;
-  transform: translateY(-2px);
+  transform: translateY(-1px);
   transition: all var(--transition-base);
 }
-
 .hover-scale:hover {
-  transform: scale(1.04);
+  transform: scale(1.03);
   box-shadow: var(--shadow-md);
   transition: all var(--transition-base);
 }
-
 .transition { transition: all var(--transition-base); }
 
-/* Skeleton Loader */
+/* Skeleton */
 .skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg,
+    var(--bg-surface-2) 25%,
+    var(--border-light) 50%,
+    var(--bg-surface-2) 75%
+  );
   background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite;
+  animation: skeleton-loading 1.6s infinite;
   border-radius: var(--radius-sm);
 }
 @keyframes skeleton-loading {
@@ -1091,78 +1089,65 @@ footer { background: transparent !important; color: var(--text-muted) !important
   100% { background-position: -200% 0; }
 }
 
-/* AJAX Loading overlay */
-.ajax-loading {
-  position: relative;
-  pointer-events: none;
-  opacity: 0.6;
-}
+/* AJAX overlay */
+.ajax-loading { position: relative; pointer-events: none; opacity: 0.55; }
 .ajax-loading::after {
   content: '';
   position: absolute;
   inset: 0;
-  background: rgba(255,255,255,0.6);
+  background: rgba(255,255,255,0.55);
   border-radius: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   z-index: 10;
 }
 
-/* Pulse animation for notifications */
+/* Pulse notification */
 @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); }
+  0%, 100% { box-shadow: 0 0 0 0 rgba(196,49,75,0.40); }
+  50%       { box-shadow: 0 0 0 4px rgba(196,49,75,0.00); }
 }
-.badge-number { animation: pulse-badge 2s infinite; }
 
-/* Mode Test Banner */
+/* Mode test */
 .mode-test-active #header {
-  background: linear-gradient(90deg, #7b2d00, #c0392b) !important;
+  background: linear-gradient(90deg, #8B0000, #C4314B) !important;
 }
 .mode-test-banner {
   background: repeating-linear-gradient(
-    45deg, #ffd700, #ffd700 10px, #000 10px, #000 20px
+    45deg, #FFD700, #FFD700 10px, #1B1B1F 10px, #1B1B1F 20px
   );
   color: white;
   text-align: center;
-  font-weight: 800;
-  font-size: 0.7rem;
+  font-weight: 700;
+  font-size: 0.67rem;
   padding: 3px;
-  letter-spacing: 0.15em;
+  letter-spacing: 0.12em;
 }
 
-/* Filter option */
-.filter-option-inner-inner {
-  background-color: #f1f5f9 !important;
-}
+/* Bootstrap-Select */
+.filter-option-inner-inner { background-color: var(--bg-surface-2) !important; }
 
-/* h6 links in context */
+/* Liens h6 contexte */
 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;
+  color: var(--color-accent);
+  text-decoration: underline;
 }
 
-/* Textarea in context */
+/* Textarea */
 .mb-2 textarea {
-  font-size: 0.78rem;
+  font-size: 0.77rem;
   width: 100%;
   border: 1px solid var(--border-medium);
   border-radius: var(--radius-sm);
-  padding: 8px;
+  padding: 7px;
+  font-family: 'Inter', 'Segoe UI', sans-serif;
 }
 
-/* .sr-only (keep accessible but hidden visually) */
+/* sr-only */
 .sr-only {
   position: absolute;
   width: 1px; height: 1px;
@@ -1173,12 +1158,46 @@ h6 a:hover {
   border-width: 0;
 }
 
-/* ==============================
-   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; }
+/* ============================================================
+   SIDEBAR TOGGLE — déclaré en dernier pour override Bootstrap
+   ============================================================ */
+#sidebar {
+  transition: width 0.28s cubic-bezier(.33,1,.68,1),
+              transform 0.28s cubic-bezier(.33,1,.68,1) !important;
+  overflow: hidden !important;
+  will-change: width;
+}
+#main {
+  transition: margin-left 0.28s cubic-bezier(.33,1,.68,1) !important;
+  will-change: margin-left;
+}
+
+body.toggle-sidebar #sidebar { width: var(--sidebar-collapsed) !important; }
+body.toggle-sidebar #main    { margin-left: var(--sidebar-collapsed) !important; }
+
+body.toggle-sidebar #sidebar .nav-link span,
+body.toggle-sidebar #sidebar .nav-link .bi-chevron-down,
+body.toggle-sidebar #sidebar .sidebar-section-label {
+  opacity: 0; width: 0; overflow: hidden;
+  display: inline-block;
+  transition: opacity 0.18s ease, width 0.18s ease;
+}
+body:not(.toggle-sidebar) #sidebar .nav-link span,
+body:not(.toggle-sidebar) #sidebar .nav-link .bi-chevron-down {
+  opacity: 1; width: auto;
+  transition: opacity 0.22s ease 0.06s, width 0.22s ease;
+}
+body.toggle-sidebar #sidebar .nav-link { justify-content: center !important; padding: 9px 0 !important; }
+body.toggle-sidebar #sidebar .nav-link i:first-child { font-size: 1.1rem !important; width: auto !important; margin: 0 !important; }
+body.toggle-sidebar #sidebar .nav-link.parent-active::before { display: none; }
+body.toggle-sidebar #sidebar .nav-content { display: none !important; }
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+@media (max-width: 768px) {
+  #barre_laterale_d { width: 100% !important; }
+  .scrollmenu { margin: 0; }
+  .page-content { padding: 0 8px; }
+  .modal-content { border-radius: var(--radius-md); }
 }