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