diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css
new file mode 100644
index 0000000..568442b
--- /dev/null
+++ b/Bootstrap_new/css/style_office.css
@@ -0,0 +1,696 @@
+    /* Style Office pour le Portail RH*/
+    :root {
+        /* PowerPoint/Office 2019 Color Palette */
+        --office-primary: #b7472a;          /* Sidebar color - PowerPoint accent */
+        --office-secondary: #2b579a;        /* Header/buttons - Office blue */
+        --office-accent: #107c10;           /* Success/active states - Excel green */
+        --office-light: #f3f3f3;           /* Background - Office gray */
+        --office-dark: #323130;            /* Text color */
+        --office-border: #d0d0d0;          /* Borders */
+        --office-hover: #f0f0f0;           /* Hover states */
+        --office-card: #ffffff;            /* Card backgrounds */
+        
+        --sidebar-width: 260px;
+        --sidebar-collapsed: 70px;
+        --header-height: 64px;
+        --transition-speed: 0.3s;
+    }
+    
+    /* Base Styles */
+    body {
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
+        background-color: var(--office-light);
+        color: var(--office-dark);
+        line-height: 1.5;
+        overflow-x: hidden;
+    }
+    
+    /* Header - PowerPoint/Office Style */
+    .app-header {
+        background-color: var(--office-secondary);
+        height: var(--header-height);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1030;
+    }
+    
+    .header-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 100%;
+        padding: 0 24px;
+    }
+    
+    .logo-container {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+    
+    .app-logo {
+        display: flex;
+        align-items: center;
+        color: white;
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 20px;
+    }
+    
+    .app-logo img {
+        height: 36px;
+        filter: brightness(0) invert(1);
+    }
+    
+    /* Sidebar - PowerPoint Orange (#b7472a) */
+    .app-sidebar {
+        width: var(--sidebar-width);
+        background: linear-gradient(180deg, var(--office-primary) 0%, #a53e24 100%);
+        position: fixed;
+        top: var(--header-height);
+        left: 0;
+        bottom: 0;
+        z-index: 1020;
+        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+        transition: width var(--transition-speed) ease;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    
+    /* Subtle pattern overlay for modern look */
+    .app-sidebar::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: 
+            radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 20%),
+            radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 20%);
+        pointer-events: none;
+    }
+    
+    .sidebar-nav {
+        padding: 24px 0;
+    }
+    
+    .nav-section {
+        margin-bottom: 32px;
+        padding: 0 20px;
+    }
+    
+    .nav-title {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 12px;
+        padding: 0 16px;
+    }
+    
+    .nav-item {
+        margin-bottom: 4px;
+    }
+    
+    .nav-link {
+        display: flex;
+        align-items: center;
+        color: rgba(255, 255, 255, 0.85);
+        padding: 12px 16px;
+        text-decoration: none;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .nav-link:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+        color: white;
+        transform: translateX(4px);
+    }
+    
+    .nav-link.active {
+        background-color: rgba(255, 255, 255, 0.15);
+        color: white;
+        font-weight: 500;
+        box-shadow: inset 3px 0 0 white;
+    }
+    
+    .nav-link i {
+        width: 24px;
+        font-size: 18px;
+        margin-right: 12px;
+        text-align: center;
+    }
+    
+    .nav-text {
+        flex: 1;
+        font-size: 14px;
+    }
+    
+    .nav-badge {
+        background-color: var(--office-accent);
+        color: white;
+        font-size: 11px;
+        padding: 2px 6px;
+        border-radius: 10px;
+        margin-left: 8px;
+    }
+    
+    .nav-arrow {
+        font-size: 12px;
+        opacity: 0.7;
+        transition: transform 0.2s ease;
+    }
+    
+    .nav-link[aria-expanded="true"] .nav-arrow {
+        transform: rotate(90deg);
+    }
+    
+    .nav-submenu {
+        background-color: rgba(0, 0, 0, 0.1);
+        border-radius: 6px;
+        margin-top: 4px;
+        padding: 8px 0;
+    }
+    
+    .nav-submenu .nav-link {
+        padding: 8px 16px 8px 52px;
+        font-size: 13px;
+    }
+    
+    .nav-submenu .nav-link::before {
+        content: '•';
+        position: absolute;
+        left: 36px;
+        opacity: 0.6;
+    }
+    
+    /* Main Content Area */
+    .app-main {
+        margin-left: var(--sidebar-width);
+        padding-top: var(--header-height);
+        min-height: 100vh;
+        transition: margin-left var(--transition-speed) ease;
+        background-color: var(--office-light);
+    }
+    
+    .content-area {
+        padding: 24px;
+        max-width: 1400px;
+        margin: 0 auto;
+    }
+    
+    /* Breadcrumb/Navigation Bar */
+    .nav-bar {
+        background-color: white;
+        border-radius: 8px;
+        padding: 16px 24px;
+        margin-bottom: 24px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        border: 1px solid var(--office-border);
+    }
+    
+    .nav-tabs {
+        display: flex;
+        gap: 8px;
+        overflow-x: auto;
+        padding-bottom: 4px;
+    }
+    
+    .nav-tab {
+        display: inline-flex;
+        align-items: center;
+        padding: 8px 16px;
+        background-color: transparent;
+        color: var(--office-dark);
+        text-decoration: none;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 500;
+        white-space: nowrap;
+        transition: all 0.2s ease;
+        border: 1px solid transparent;
+    }
+    
+    .nav-tab:hover {
+        background-color: var(--office-hover);
+        color: var(--office-secondary);
+    }
+    
+    .nav-tab.active {
+        background-color: var(--office-secondary);
+        color: white;
+        border-color: var(--office-secondary);
+    }
+    
+    .nav-tab i {
+        margin-right: 8px;
+        font-size: 16px;
+    }
+    
+    /* Content Cards */
+    .content-card {
+        background-color: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        border: 1px solid var(--office-border);
+        margin-bottom: 24px;
+        overflow: hidden;
+    }
+    
+    .card-header {
+        background-color: #fafafa;
+        border-bottom: 1px solid var(--office-border);
+        padding: 20px 24px;
+        font-weight: 600;
+        color: var(--office-dark);
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    
+    .card-body {
+        padding: 24px;
+    }
+    
+    /* Header Controls */
+    .header-controls {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+    
+    .header-btn {
+        background: transparent;
+        border: none;
+        color: white;
+        padding: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        position: relative;
+        transition: background-color 0.2s ease;
+    }
+    
+    .header-btn:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .notification-badge {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        background-color: var(--office-accent);
+        color: white;
+        font-size: 10px;
+        font-weight: 600;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .user-menu {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        cursor: pointer;
+        padding: 4px 12px;
+        border-radius: 6px;
+        transition: background-color 0.2s ease;
+    }
+    
+    .user-menu:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .user-avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--office-primary), #ff6b35);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 14px;
+    }
+    
+    .user-info {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .user-name {
+        color: white;
+        font-weight: 500;
+        font-size: 14px;
+    }
+    
+    .user-role {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+    }
+    
+    /* Context Panel */
+    .context-panel {
+        position: fixed;
+        right: -380px;
+        top: var(--header-height);
+        bottom: 0;
+        width: 380px;
+        background-color: white;
+        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
+        z-index: 1015;
+        transition: right 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        border-left: 1px solid var(--office-border);
+    }
+    
+    .context-panel.open {
+        right: 0;
+    }
+    
+    .context-header {
+        background: linear-gradient(135deg, var(--office-secondary), #1e4a8b);
+        color: white;
+        padding: 20px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    
+    .context-title {
+        font-size: 18px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    
+    .context-close {
+        background: transparent;
+        border: none;
+        color: white;
+        font-size: 20px;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+        transition: background-color 0.2s ease;
+    }
+    
+    .context-close:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .context-body {
+        flex: 1;
+        padding: 24px;
+        overflow-y: auto;
+    }
+    
+    .context-section {
+        margin-bottom: 28px;
+    }
+    
+    .section-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--office-secondary);
+        margin-bottom: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    
+    .section-title i {
+        font-size: 16px;
+    }
+    
+    .info-box {
+        background-color: #fafafa;
+        border: 1px solid var(--office-border);
+        border-radius: 6px;
+        padding: 16px;
+        margin-bottom: 12px;
+    }
+    
+    .info-label {
+        font-size: 12px;
+        color: #666;
+        margin-bottom: 4px;
+    }
+    
+    .info-value {
+        font-size: 15px;
+        font-weight: 500;
+        color: var(--office-dark);
+        line-height: 1.4;
+    }
+    
+    .action-btn {
+        width: 100%;
+        padding: 12px;
+        background-color: white;
+        border: 1px solid var(--office-border);
+        border-radius: 6px;
+        color: var(--office-dark);
+        font-weight: 500;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        margin-bottom: 8px;
+    }
+    
+    .action-btn:hover {
+        background-color: var(--office-hover);
+        border-color: var(--office-secondary);
+        color: var(--office-secondary);
+        transform: translateX(4px);
+    }
+    
+    .action-btn i {
+        width: 20px;
+        text-align: center;
+        font-size: 18px;
+    }
+    
+    .photo-container {
+        text-align: center;
+        padding: 16px;
+        background-color: #fafafa;
+        border-radius: 8px;
+        border: 1px solid var(--office-border);
+    }
+    
+    .patient-photo {
+        width: 150px;
+        height: 150px;
+        border-radius: 8px;
+        object-fit: cover;
+        border: 3px solid white;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        transition: transform 0.3s ease;
+    }
+    
+    .patient-photo:hover {
+        transform: scale(1.05);
+    }
+    
+    /* Toggle Button */
+    .context-toggle {
+        position: fixed;
+        right: 24px;
+        bottom: 24px;
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--office-primary), #ff6b35);
+        color: white;
+        border: none;
+        box-shadow: 0 4px 12px rgba(183, 71, 42, 0.3);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        z-index: 1010;
+        transition: all 0.3s ease;
+    }
+    
+    .context-toggle:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(183, 71, 42, 0.4);
+    }
+    
+    /* Test Mode Indicator */
+    .test-indicator {
+        background: linear-gradient(45deg, #ffd700, #ffed4e);
+        color: #8a6d3b;
+        padding: 4px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: 12px;
+        animation: pulse 2s infinite;
+    }
+    
+    @keyframes pulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.7; }
+        100% { opacity: 1; }
+    }
+    
+    /* Language Selector */
+    .language-selector {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        background-color: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+    }
+    
+    .language-selector:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+    
+    .language-flag {
+        width: 24px;
+        height: 16px;
+        object-fit: cover;
+        border-radius: 2px;
+    }
+    
+    /* Modal Customization */
+    .modal-office .modal-header {
+        background: linear-gradient(135deg, var(--office-secondary), #1e4a8b);
+        color: white;
+        border-bottom: none;
+    }
+    
+    .modal-office .modal-title {
+        font-weight: 600;
+    }
+    
+    /* Responsive Design */
+    @media (max-width: 1200px) {
+        .app-sidebar {
+            width: var(--sidebar-collapsed);
+        }
+        
+        .app-main {
+            margin-left: var(--sidebar-collapsed);
+        }
+        
+        .nav-text,
+        .nav-title,
+        .nav-badge,
+        .nav-arrow {
+            display: none;
+        }
+        
+        .nav-link {
+            justify-content: center;
+            padding: 16px;
+        }
+        
+        .nav-link i {
+            margin-right: 0;
+            font-size: 20px;
+        }
+        
+        .nav-submenu .nav-link {
+            padding: 12px;
+            justify-content: center;
+        }
+        
+        .nav-submenu .nav-link::before {
+            display: none;
+        }
+        
+        .context-panel {
+            width: 100%;
+            right: -100%;
+        }
+    }
+    
+    @media (max-width: 768px) {
+        .app-sidebar {
+            transform: translateX(-100%);
+            width: var(--sidebar-width);
+        }
+        
+        .app-sidebar.open {
+            transform: translateX(0);
+        }
+        
+        .app-main {
+            margin-left: 0;
+        }
+        
+        .header-content {
+            padding: 0 16px;
+        }
+        
+        .content-area {
+            padding: 16px;
+        }
+        
+        .user-info {
+            display: none;
+        }
+        
+        .nav-text,
+        .nav-title,
+        .nav-badge,
+        .nav-arrow {
+            display: block;
+        }
+    }
+    
+    /* Scrollbar Styling */
+    .app-sidebar::-webkit-scrollbar,
+    .context-body::-webkit-scrollbar {
+        width: 6px;
+    }
+    
+    .app-sidebar::-webkit-scrollbar-track,
+    .context-body::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 3px;
+    }
+    
+    .app-sidebar::-webkit-scrollbar-thumb,
+    .context-body::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 3px;
+    }
+    
+    .app-sidebar::-webkit-scrollbar-thumb:hover,
+    .context-body::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.4);
+    }
diff --git a/Controleur/ControleurConnexion.php b/Controleur/ControleurConnexion.php
index 99cfde9..e45b052 100755
--- a/Controleur/ControleurConnexion.php
+++ b/Controleur/ControleurConnexion.php
@@ -321,7 +321,10 @@ require_once 'Framework/Localisation.php';
 
 				$this->requete->getSession()->setAttribut("villeClient_C", $utilisateur['villeClient']);
 				$this->requete->getSession()->setAttribut("paysClient_C", $utilisateur['paysClient']);
-                				
+
+
+				
+                $this->requete->getSession()->setAttribut("adherent_C", "");
                 $this->requete->getSession()->setAttribut("numeroBeneficiaire_C", "");				
                 $this->requete->getSession()->setAttribut("nomBeneficiaire_C", "");				
                 $this->requete->getSession()->setAttribut("prenomsBeneficiaire_C", "");				
diff --git a/Societes/radiant/images/logo_etat.png b/Societes/radiant/images/logo_etat.png
old mode 100644
new mode 100755
diff --git a/Societes/radiant/images/logo_etat_new.png b/Societes/radiant/images/logo_etat_new.png
old mode 100644
new mode 100755
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 1ab0e49..8ab83a6 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -1,580 +1,509 @@
 <?php 
-  
-  require_once 'gabarit_queries.php';
-  $gabary = new Gabary();
-  
-  $_SESSION['firstLevelMenu']='';
-  $current_url = $_SERVER['REQUEST_URI']; 
-  $elements = explode("/", $current_url);
-  $activeLink = $elements[1];
-  
-  $_SESSION['firstLevelMenu']=$activeLink;
-  
-  
-  const MAX_COMPANY_NAME_LENGTH = 20;
+require_once 'gabarit_queries.php';
+$gabary = new Gabary();
+$_SESSION['firstLevelMenu'] = '';
+$current_url = $_SERVER['REQUEST_URI']; 
+$elements = explode("/", $current_url);
+$activeLink = $elements[1] ?? '';
+$_SESSION['firstLevelMenu'] = $activeLink;
 
-/*
-  if (strlen($_SESSION['nomSociete']) <= MAX_COMPANY_NAME_LENGTH) {
-		$companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES);
-  } else {
-		$companyDisplayName = strtoupper($_SESSION['codeSociete']);
-  }
-*/
-
-  $companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES);
-  
-  $imgData = $_SESSION['photoAssureCrypte'];
+$companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES);
+$imgData = $_SESSION['photoAssureCrypte'] ?? '';
 ?>
 
-<!doctype html>
-<html lang="fr">
-    <head>
-        <meta charset="UTF-8"/>
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		
-		<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-		<meta name="format-detection" content="telephone=no">
-		<meta name="msapplication-tap-highlight" content="no">
-		
-		<base href="<?= $racineWeb ?>" >
-		
-	    <!-- Favicons -->
-	    <link rel="icon" href="Bootstrap_new/images/new/favicon.ico"/>
+<!DOCTYPE html>
+<html lang="fr" data-bs-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <base href="<?= $racineWeb ?>">
+    
+    <title><?= htmlspecialchars($_SESSION['vue'] ?? 'INTER SANTE') ?></title>
+    
+    <!-- Bootstrap 5 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Select2 -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap5-theme@1.3.0/dist/select2-bootstrap5.min.css" rel="stylesheet">
+    
+    <!-- DataTables -->
+    <link href="https://cdn.datatables.net/v/bs5/dt-1.13.6/datatables.min.css" rel="stylesheet">
+    
+    <!-- SweetAlert2 -->
+    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
+    
+    <!-- Office/PowerPoint Inspired Styles -->
+    <link href="Bootstrap_new/css/style_office.css?ver=2025.12.20.00" rel="stylesheet">
+    
+    <script>
+        const modeDev = <?= $_SESSION['modeDev_C'] ?? 0 ?>;
+        if (modeDev != "1") {
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
+        }
+    </script>
+</head>
+<body>
+    <!-- Header -->
+    <header class="app-header">
+        <div class="header-content">
+            <div class="logo-container">
+                <button class="header-btn sidebar-toggle d-lg-none">
+                    <i class="bi bi-list"></i>
+                </button>
+                
+                <a href="#" class="app-logo">
+                    <img src="Bootstrap_new/images/new/favicon.png" alt="Inter Santé">
+                    <span class="ms-2">INTER SANTÉ</span>
+                </a>
+                
+                <?php if($_SESSION['bdTests_C'] == "1"): ?>
+                <div class="test-indicator">
+                    <i class="fas fa-flask"></i>
+                    <span>MODE TEST</span>
+                </div>
+                <?php endif; ?>
+            </div>
+            
+            <div class="header-controls">
+                <!-- Notifications -->
+                <button class="header-btn notification-btn" onclick="pop_messagerie()">
+                    <i class="bi bi-bell"></i>
+                    <span class="notification-badge" id="notificationCount">0</span>
+                </button>
+                
+                <!-- Company Info -->
+                <div class="language-selector" onclick="changer_langue()">
+                    <?php
+                    $flag = est_anglophone() ? 'england.png' : 'france.png';
+                    $lib = est_anglophone() ? 'EN' : 'FR';
+                    ?>
+                    <img src="Bootstrap_new/images/<?= $flag ?>" alt="Language" class="language-flag">
+                    <span class="text-white"><?= $lib ?></span>
+                </div>
+                
+                <!-- User Menu -->
+                <div class="user-menu dropdown-toggle" data-bs-toggle="dropdown">
+                    <div class="user-avatar">
+                        <?= $_SESSION['userInitials_C'] ?? 'U' ?>
+                    </div>
+                    <div class="user-info">
+                        <div class="user-name"><?= $_SESSION['utilisateur_C'] ?? _('Utilisateur') ?></div>
+                        <div class="user-role"><?= $_SESSION['nomClient_C'] ?? _('Client') ?></div>
+                    </div>
+                </div>
+                
+                <!-- User Dropdown -->
+                <div class="dropdown-menu dropdown-menu-end">
+                    <div class="dropdown-header">
+                        <div class="user-avatar mx-auto mb-2">
+                            <?= $_SESSION['userInitials_C'] ?? 'U' ?>
+                        </div>
+                        <div class="text-center">
+                            <div class="fw-bold"><?= $_SESSION['utilisateur_C'] ?? _('Utilisateur') ?></div>
+                            <small class="text-muted"><?= $_SESSION['nomClient_C'] ?? _('Client') ?></small>
+                        </div>
+                    </div>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="javascript:change_password()">
+                        <i class="fas fa-user-circle me-2"></i> <?= _('Mon compte') ?>
+                    </a>
+                    <a class="dropdown-item" href="javascript:gerer_messagerie()">
+                        <i class="fas fa-envelope me-2"></i> <?= _('Messagerie') ?>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item text-danger" href="#">
+                        <i class="fas fa-sign-out-alt me-2"></i> <?= _('Déconnexion') ?>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
 
-	    <!-- Google Fonts -->
-	    <link href="https://fonts.gstatic.com" rel="preconnect">
-	    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
+    <!-- Sidebar -->
+    <aside class="app-sidebar" id="sidebar">
+        <nav class="sidebar-nav">
+            <div class="nav-section">
+                <div class="nav-title"> <?= _('Navigation principale') ?></div>
+                <?php foreach ($menus as $key0 => $menuParent): 
+                    $menuChildrenLevelOne = $gabary->get_menus_by_parent_code($menuParent['vue']); 
+                    $isActive = false;
+                    
+                    // Check if any child is active
+                    foreach ($menuChildrenLevelOne as $menuChild) {
+                        if ((explode('/', $menuChild['lienMenu'])[0] ?? '') == $activeLink) {
+                            $isActive = true;
+                            break;
+                        }
+                    }
+                ?>
+                <div class="nav-item">
+                    <?php if (sizeof($menuChildrenLevelOne) > 0): ?>
+                    <a href="#submenu<?= $key0 ?>" 
+                       class="nav-link <?= $isActive ? 'active' : '' ?>" 
+                       data-bs-toggle="collapse"
+                       aria-expanded="<?= $isActive ? 'true' : 'false' ?>">
+                        <i class="<?= $menuParent['icone'] ?>"></i>
+                        <span class="nav-text"><?= $menuParent['libeleMenu'] ?></span>
+                        <i class="nav-arrow bi bi-chevron-right"></i>
+                    </a>
+                    
+                    <div class="nav-submenu collapse <?= $isActive ? 'show' : '' ?>" id="submenu<?= $key0 ?>">
+                        <?php foreach ($menuChildrenLevelOne as $key1 => $menuChild): 
+                            $childActive = (explode('/', $menuChild['lienMenu'])[0] ?? '') == $activeLink;
+                        ?>
+                        <a href="<?= $menuChild['lienMenu'] ?>" 
+                           class="nav-link <?= $childActive ? 'active' : '' ?>">
+                            <?= $menuChild['libeleMenu'] ?>
+                        </a>
+                        <?php endforeach; ?>
+                    </div>
+                    <?php else: ?>
+                    <a href="<?= $menuParent['lienMenu'] ?>" class="nav-link">
+                        <i class="<?= $menuParent['icone'] ?>"></i>
+                        <span class="nav-text"><?= $menuParent['libeleMenu'] ?></span>
+                    </a>
+                    <?php endif; ?>
+                </div>
+                <?php endforeach; ?>
+            </div>
+        </nav>
+    </aside>
 
-	    <!-- Vendor CSS Files -->
+    <!-- Main Content -->
+    <main class="app-main" id="mainContent">
+        <!-- Navigation Tabs -->
+        <div class="content-area">
+            <?php if(!empty($menusvue)): ?>
+            <div class="nav-bar">
+                <div class="nav-tabs">
+                    <?php foreach ($menusvue as $menu): 
+                        $isActive = ($_SESSION['vue'] ?? '') == $menu['libeleMenu'];
+                    ?>
+                    <a href="<?= $menu['lienMenu'] ?>" 
+                       class="nav-tab <?= $isActive ? 'active' : '' ?>"
+                       title="<?= $menu['descriptionMenu'] ?? '' ?>">
+                        <i class="bi bi-arrow-right-circle"></i>
+                        <?= $menu['libeleMenu'] ?>
+                    </a>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+            <?php endif; ?>
+            
+            <!-- Hidden Inputs -->
+            <input type="hidden" id="racineWeb" value="<?= $racineWeb ?>">
+            <input type="hidden" id="dureeSession" value="<?= $_SESSION['dureeSession'] ?>">
+            <input type="hidden" id="nomSociete" value="<?= $_SESSION['nomSociete'] ?>">
+            <input type="hidden" id="nomClient" value="<?= htmlspecialchars($_SESSION['nomClient_C']) ?>">
+            
+            <!-- Content Container -->
+            <div class="content-card">
+                <div class="card-body">
+                    <div id="contenu">
+                        <div id="div_test_gabarit"></div>
+                        <?= $contenu ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
 
-	  <link href="Bootstrap/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-	  <link href="Bootstrap/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-	  <link href="Bootstrap/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
-	  <link href="Bootstrap/vendor/quill/quill.snow.css" rel="stylesheet">
-	  <link href="Bootstrap/vendor/quill/quill.bubble.css" rel="stylesheet">
-	  <link href="Bootstrap/vendor/remixicon/remixicon.css" rel="stylesheet">
-	  <link href="Bootstrap/vendor/simple-datatables/style.css" rel="stylesheet">
-	  
+    <!-- Context Panel -->
+    <aside class="context-panel" id="contextPanel">
+        <div class="context-header">
+            <div class="context-title">
+                <i class="bi bi-info-circle"></i>
+                <span><?= _('Contexte de la session') ?></span>
+            </div>
+            <button class="context-close" onclick="toggleContextPanel()">
+                <i class="bi bi-x-lg"></i>
+            </button>
+        </div>
+        
+        <div class="context-body">
+            <!-- Souscripteur -->
+            <div class="context-section">
+                <div class="section-title">
+                    <i class="bi bi-building"></i>
+                    <span><?= _('Souscripteur') ?></span>
+                </div>
+                <div class="info-box">
+                    <div class="info-value">
+                        <?= $this->nettoyer($_SESSION['nomClient_C']) ?>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Adhérent principal -->
+            <div class="context-section">
+                <div class="section-title">
+                    <i class="bi bi-person-badge"></i>
+                    <span><?= _('Assuré principal') ?></span>
+                </div>
+                <div class="info-box">
+                    <div class="info-value">
+                        <?= $this->nettoyer($_SESSION['adherent_C']) ?>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Patient -->
+            <div class="context-section">
+                <div class="section-title">
+                    <i class="bi bi-person-heart"></i>
+                    <span><?= _('Bénéficiaire') ?></span>
+                </div>
+                
+                <button class="action-btn" onclick="afficher_beneficiaire_id()">
+                    <i class="bi bi-person"></i>
+                    <span><?= _('Bénéficiaire').' : '.$this->nettoyer($_SESSION['numeroBeneficiaire_C']) ?></span>
+                </button>
+                
+                <div class="info-box">
+                    <div class="info-value">
+                        <?= $this->nettoyer($_SESSION['beneficiaire_C']) ?>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Photo patient -->
+            <?php if ($_SESSION['faceRegistered_C'] == "1" && ($_SESSION['idBeneficiaire_C'] ?? 0) > 0): ?>
+            <div class="context-section">
+                <div class="section-title">
+                    <i class="bi bi-camera"></i>
+                    <span><?= _('Photo du bénéficiaire') ?></span>
+                </div>
+                <div class="photo-container">
+                    <img src="data:image/jpg;base64,<?= $imgData ?>" 
+                         class="patient-photo"
+                         onclick="openPhotoModal()"
+                         alt="<?= _('Photo du bénéficiaire') ?>">
+                </div>
+            </div>
+            <?php endif; ?>
+                        
+            <!-- Actions -->
+            <div class="context-section">
+                <div class="section-title">
+                    <i class="bi bi-lightning"></i>
+                    <span><?= _('Actions rapides') ?></span>
+                </div>
+                
+                <button class="action-btn" onclick="gerer_messagerie()">
+                    <i class="bi bi-chat-dots"></i>
+                    <span><?= _('Gérer les notifications') ?></span>
+                </button>
+                
+                <button class="action-btn" onclick="change_password()">
+                    <i class="bi bi-key"></i>
+                    <span><?= _('Changer le mot de passe') ?></span>
+                </button>
+            </div>
+            
+            <!-- Messages -->
+            <div id="nbMessagesNonLus" class="d-none">
+                <input type="hidden" id="msgNonLus" value="0">
+            </div>
+        </div>
+    </aside>
 
-	  <link href="Bootstrap_new/css/datatables.min.css" rel="stylesheet">
-	  <link href="Bootstrap_new/css/select2.min.css" rel="stylesheet">
-	  <link href="Bootstrap/css/style.css?ver=2024.03.14.00" rel="stylesheet">
-	  <link href="Bootstrap_new/css/style.css?ver=2025.09.30.06" rel="stylesheet">
-	  <link href="Bootstrap_new/select/css/bootstrap-select.min.css" rel="stylesheet">
-	  
-	  <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css" rel="stylesheet">
-  
-	  <title><?= $_SESSION['vue'] ?></title>
-	  
-		<script type="text/javascript">
-			var modeDev = <?= $_SESSION['modeDev_C'] ?>;
-			if (modeDev!="1") 
-			{
-				if (document.addEventListener) {
-					document.addEventListener('contextmenu', function (e) {
-						e.preventDefault();
-					}, false);
-				} else {
-					document.attachEvent('oncontextmenu', function () {
-						window.event.returnValue = false;
-					});
-				}
-			}
-		</script>
-		
-		<!-- Libraries -->
-		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-		
-	    <link rel="stylesheet" href="Bootstrap_new/datatables/datatable.min.css"  crossorigin="anonymous">
-	  
-        <link href="Bootstrap_new/css/custom.css?ver=2024.08.26.02" rel="stylesheet">
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-		
-		<link href="Bootstrap_new/css/style_new.css?ver=2025.11.24.01" rel="stylesheet">
-		<!-- END: webview fixes -->
-	</head>
-	
-	<body >
-	<?php
-		$style = "";
-		$test  = "";
-		$colorTests="";
-		
-		$flag = (est_anglophone()) ? 'england.png' : 'france.png';
-	    $alt  = (est_anglophone()) ? 'English' : 'Français';
-		$lib  = (est_anglophone()) ? 'En' : 'Fr';
-		
-		if($_SESSION['bdTests_C']== "1"){
-			$colorTests=$_SESSION['colorTests'];
-			$style = "background-color: $colorTests;";
-			$test  = "MODE TEST";
-		}
-	?>
+    <!-- Toggle Button -->
+    <button class="context-toggle" onclick="toggleContextPanel()">
+        <i class="bi bi-info-circle"></i>
+    </button>
 
-	<!-- ======= Header ======= -->
-	<header id="header" class="header fixed-top d-flex align-items-center " style="<?=$style?>">
-		<div class="d-flex align-items-center justify-content-between">
-		  <a  class="logo d-flex align-items-center">
-			<img src="Bootstrap_new/images/new/favicon.png" alt="Logo Inter santé"/>
-			<span class="d-none d-lg-block">INTER SANTE</span>
-		  </a>
-		  
-		  <i id="btn_sidebar" class="bi bi-list toggle-sidebar-btn d-lg-inline-block"></i>
-		  
-		  <a  id="a_deconnect" class="d-flex align-items-center me-4" href="#" title="<?= _("Quitter") ?>">
-			<i class="bi bi-power me-1" ></i>
-			<span class="d-none d-lg-inline"><?= _("Quitter") ?></span>
-		  </a>
-		  
-		  <a  id="a_actualiser"  class="d-flex align-items-center" href="javascript:actualiser_page();" title="<?= _("Actualiser la page") ?>">
-			<i class="fas fa-sync-alt me-1" ></i>
-			<span class="d-none d-lg-inline"><?= _("Actualiser") ?></span>
-		  </a>
-		</div>
-		<!-- End Logo -->
-	
-		
-		<nav class="header-nav ms-auto">
-		  <ul class="d-flex align-items-center">
-			
-			<li class="nav-item">
-			  <a title="<?= _("Gestionnaire d'assurance santé");?>" style="margin-left:10px; margin-right:10px;" class="nav-link nav-icon" href="javascript:infos_entite();">
-
-				<img id="lienLogo" src="<?= $_SESSION['lienLogo'] ?>" alt="Logo" style="width:200px;max-height: 60px;" class="rounded-circle">
-
-				<span id="nomSociete" class="d-none d-lg-inline"> <?=$companyDisplayName?> </span>
-				
-			  </a>
-			</li>
-			
-			<li class="nav-item dropdown pe-3">
-				<a title="<?= _("Changer la langue actuelle");?>" style="margin-left:12px;" class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
-					<?= "<img src='Bootstrap_new/images/$flag' alt='$alt' width='30'>" ?><span class="d-none d-md-block dropdown-toggle ps-2"><?= $lib ?></span>
-				</a>
-				<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
-					<li>
-					  <a class="dropdown-item d-flex align-items-center" href="javascript:changer_langue();">
-						<i class="fa fa-exchange" aria-hidden="true"></i>
-						<span ><?=_("Changer de langue")?></span>
-					  </a>
-					</li>
-				</ul>
-			</li>
-			
-			<li class="nav-item dropdown pe-3">
-				<a title="<?= _("Initial utilisateur connecté");?>" style="margin-left:10px; margin-right:10px;" class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
-					<span class="initials"> <?php echo $_SESSION['userInitials_C']; ?> </span>
-					<span class="d-none d-md-block dropdown-toggle ps-2"></span>
-				</a>
-				
-				<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
-					<li>
-						<a class="dropdown-item d-flex align-items-center" href="javascript:change_password();">
-							<i class="fa fa-user-circle" aria-hidden="true"></i>
-							<span ><?= $_SESSION['utilisateur_C']; ?></span>
-						</a>
-					</li>
-					
-				</ul>
-			</li>
-		  </ul>
-		</nav>
-		
-		
-		<!-- End Icons Navigation -->
-	</header><!-- End Header -->
-	
-	
-
-  <!-- ======= Sidebar ======= -->
-  
-	<aside id="sidebar" class="sidebar">
-	  <?php 
-	  $menuChildrenLevelThree = [];
-
-	  if(sizeof($menusvue) > 0) {
-		$current_url = $_SERVER['REQUEST_URI']; 
-		$elements = explode("/", $current_url);
-		$activeLink = $elements[1];
-		$menuCount = count($menusvue);
-		$showBurgerMenu = $menuCount > 5;
-	  ?>
-	  
-	  <!-- Version desktop (affichage normal) -->
-	  <ul class="sidebar-nav desktop-menu" id="sidebar-nav">
-		<?php foreach ($menusvue as $key3 => $menu): ?>
-		  <li class="nav-item">
-			<?php if($activeLink === basename($menu['lienMenu'])):?>
-			<a class="nav-link collapsed" href="<?= $menu['lienMenu']; ?>" title="<?= $menu['descriptionMenu']; ?>">
-			  <i class="<?= $menu['icone'] ?>" style="color:#2c3e50 !important;"></i>
-			  <span style="font-weight:700; color:#2c3e50 !important;"><?= $menu['libeleMenu'] ?></span>
-			  <i class="bi bi-chevron-right ms-auto" style="color:#2c3e50 !important;"></i>
-			</a>
-			<?php else:?>
-			<a class="nav-link collapsed" href="<?= $menu['lienMenu']; ?>" title="<?= $menu['descriptionMenu']; ?>">
-			  <i class="<?= $menu['icone'] ?>"></i>
-			  <span style="font-weight:700"><?= $menu['libeleMenu'] ?></span>
-			  <i class="bi bi-chevron-right ms-auto"></i>
-			</a>
-			<?php endif;?>
-		  </li>
-		<?php endforeach; ?>
-	  </ul>
-	  
-	  <!-- Version mobile avec menu burger -->
-	  <div class="mobile-bottom-nav d-lg-none">
-		<div class="mobile-nav-container">
-		  <?php 
-		  // Afficher seulement les 4 premiers menus + le burger
-		  $displayedMenus = array_slice($menusvue, 0, 4);
-		  
-		  foreach ($displayedMenus as $key3 => $menu): ?>
-			<div class="mobile-nav-item">
-			  <a class="mobile-nav-link" href="<?php echo $menu['lienMenu']; ?>" title="<?= $menu['descriptionMenu']; ?>">
-				<?php if($activeLink === basename($menu['lienMenu'])):?>
-				<i class="<?= ' '. $menu['icone'] ?> mobile-nav-icon" style="color:#5784BA;"></i>
-				<span class="mobile-nav-label" style="color:#5784BA;"><?= $menu['libeleMenu'] ?></span>
-				<?php else:?>
-				<i class="<?= ' '. $menu['icone'] ?> mobile-nav-icon" style="color:#2c3e50;"></i>
-				<span class="mobile-nav-label" style="color:#2c3e50;"><?= $menu['libeleMenu'] ?></span>
-				<?php endif;?>
-			  </a>
-			</div>
-		  <?php endforeach; ?>
-		  
-		  <!-- Menu burger pour les menus supplémentaires -->
-		  <?php if ($showBurgerMenu): ?>
-			<div class="mobile-nav-item burger-menu-container">
-			  <a class="mobile-nav-link burger-menu-toggle" href="javascript:void(0);" id="burgerMenuToggle">
-				<i class="bi bi-list mobile-nav-icon burger-icon"></i>
-				<span class="mobile-nav-label"><?= _("Plus") ?></span>
-			  </a>
-			  
-			  <!-- Menu déroulant des menus supplémentaires -->
-			  <div class="burger-dropdown-menu" id="burgerDropdown">
-				<?php 
-				$additionalMenus = array_slice($menusvue, 4);
-				foreach ($additionalMenus as $menu): ?>
-				  <a href="<?php echo $menu['lienMenu']; ?>" class="burger-menu-item">
-					<i class="<?= $menu['icone'] ?>"></i>
-					<span><?= $menu['libeleMenu'] ?></span>
-				  </a>
-				<?php endforeach; ?>
-			  </div>
-			</div>
-		  <?php else: ?>
-			<!-- Afficher le 5ème menu normalement si exactement 5 menus -->
-			<?php if (isset($menusvue[4])): ?>
-			<div class="mobile-nav-item">
-			  <a class="mobile-nav-link" href="<?php echo $menusvue[4]['lienMenu']; ?>" title="<?= $menusvue[4]['descriptionMenu']; ?>">
-				<?php if($activeLink === basename($menusvue[4]['lienMenu'])):?>
-				<i class="<?= ' '. $menusvue[4]['icone'] ?> mobile-nav-icon" style="color:#5784BA;"></i>
-				<span class="mobile-nav-label" style="color:#5784BA;"><?= $menusvue[4]['libeleMenu'] ?></span>
-				<?php else:?>
-				<i class="<?= ' '. $menusvue[4]['icone'] ?> mobile-nav-icon" style="color:#2c3e50;"></i>
-				<span class="mobile-nav-label" style="color:#2c3e50;"><?= $menusvue[4]['libeleMenu'] ?></span>
-				<?php endif;?>
-			  </a>
-			</div>
-			<?php endif; ?>
-		  <?php endif; ?>
-		</div>
-	  </div>
-	  <?php } ?>
-	</aside>
-		
-  <main id="main" class="main">
-	<input class="sr-only"  type="text" id="racineWeb" 	name="racineWeb"  value="<?= $racineWeb ?>">
-	<INPUT class="sr-only"  TYPE="text" id="vue" name="vue" value="<?= isset($_SESSION['vue']) ? $_SESSION['vue'] : ''; ?>">	
-		
-	<input class="sr-only" 	type="text" id="nomSociete" name="nomSociete"  value="<?= $_SESSION['nomSociete'] ?>">
-    <section class="section main-dashboard">
-		<div id="contenu" style="margin-top:-58px;">
-			<div id="div_test_gabarit">
-
-				<?php 
-				/*
-					var_dump
-					(
-						array
-						(
-							"dossierLogo" => $_SESSION['dossierLogo'],
-							"dossierAssure" => $_SESSION['dossierAssure'],
-							"lienLogo" => $_SESSION['lienLogo'],
-						)
-						
-					);
-				*/
-				?>
-			
-			</div>
-			<?= $contenu ?>
-		</div>				
-    </section>
-
-  </main><!-- End #main -->
-  
-  <button class="btn-info-context mb-2" id="showSideNav" title="<?= _("Afficher contexte")?>">
-	<i class="fa-solid fa fa-angle-double-left" style="font-size:24px"></i> <i class="fa fa-cog fa-spin" style="font-size:24px"></i>
-  </button>
-  
- 	<div id="barre_laterale_d" class="col-2 sidenav" >
-		<div class="card shadow-sm p-2">
-			<!--<button class="btn btn-danger" id="hideSideNav"> <?= _("Cacher contexte") ?> <i class="fa-solid fa-arrow-right"></i></button>-->
-			<button class="btn-cacher-contexte mb-3 w-100" id="hideSideNav" title="<?= _("Cacher contexte")?>">
-				<i class="fa fa-cog fa-spin" style="font-size:24px"></i> <i class="fa-solid fa fa-angle-double-right" style="font-size:24px"></i>
-			</button>
-			
-			<!-- Informations sur le Souscripteur -->
-			<div class="mb-2">
-				<h6 class="text-muted"><?= _("Souscripteur") ?></h6>
-				<textarea  rows="2" cols="25" readonly><?= $this->nettoyer($_SESSION['nomClient_C']) ?></textarea>
-			</div>
-			
-			<!-- Adhérent et bénéficiaire -->
-			<div class="mb-2">
-				<button class="btn btn-info btn-sm w-100 text-truncate" onclick="javascript:afficher_adherent_id();" id="numeroAdherent_C" NAME="numeroAdherent_C" title="<?= _("Voir les membres de famille")?>">
-					<i class="fa-solid fa-users"></i> <?= _("Famille")." : ".$this->nettoyer($_SESSION['numeroAdherent_C']) ?>
-				</button>
-			</div>
-
-			<div class="mb-2">
-				<button class="btn btn-outline-secondary btn-sm w-100 text-truncate" onclick="javascript:afficher_adherent_id();" title="<?= _("Voir les membres de famille")?>">
-					 <?= substr($this->nettoyer($_SESSION['adherent_C']), 0, 25) ?>
-				</button>
-			</div>
-
-			<div class="mb-2">
-				<button class="btn btn-info btn-sm w-100 text-truncate" onclick="javascript:afficher_beneficiaire_id();" id="numeroBeneficiaire_C" NAME="numeroBeneficiaire_C" title="<?= _("Afficher le bénéficiaire")?>">
-					<i class="fa-solid fa-user"></i> <?= _("Bénéficiaire")." : ".$this->nettoyer($_SESSION['numeroBeneficiaire_C']) ?>
-				</button>
-			</div>
-
-			<div class="mb-2">
-				<button class="btn btn-outline-secondary btn-sm w-100 text-truncate" onclick="javascript:afficher_beneficiaire_id();" title="<?= _("Afficher le bénéficiaire")?>">
-					<?= substr($this->nettoyer($_SESSION['beneficiaire_C']), 0, 25) ?>
-				</button>
-			</div>
-			
-			<!-- Photo -->
-			<div class="photo-container text-center mb-2">
-				<?php if ($_SESSION['faceRegistered_C']=="1" && $_SESSION['idBeneficiaire_C'] > "0"): ?>
-					<img src="data:image/jpg;base64,<?=$imgData?>"
-					class="img-fluid rounded" style="width: 200px;" data-bs-toggle="modal" data-bs-target="#pop_photo" alt="<?= _("Photo") ?>">
-				<?php endif; ?>
-			</div>
-			
-			<!-- Changer le mot de passe -->
-			<div class="image-container mb-3 text-center">
-			  <a href="javascript:change_password();" 
-				 title="<?= isset($_SESSION['lang']) && $_SESSION['lang']=="en_US" ? 'Change password' : 'Changer le mot de passe' ?>"
-				 class="d-inline-block text-decoration-none text-dark">
-
-	
-				<div class="p-4 bg-light rounded-circle shadow-sm d-inline-flex justify-content-center align-items-center transition hover-scale">
-				  <img src="Bootstrap_new/images/pwd.png" alt="Changer mot de passe" class="img-fluid" style="width:30px;">
-				</div>
-
-				<!-- Texte sous l’icône -->
-				<div class="mt-2 fw-semibold text-secondary small">
-				  <?= isset($_SESSION['lang']) && $_SESSION['lang']=="en_US" ? 'Change Password' : 'Changer le mot de passe' ?>
-				</div>
-			  </a>
-			</div>
-											
-			<!-- Bouton Gérer Messages  
-			<div class="mb-2">
-				<button class="btn btn-outline-primary btn-sm w-100" onclick="javascript:gerer_messagerie();">
-					<?= _("Gérer Notifications") ?> <i class="fa fa-comments" aria-hidden="true"></i>
-				</button>
-			</div>
-			-->
-		</div>	
-	</div>
-
-
-	<div class="modal fade" id="popmessagerie" role="dialog">
-		<div class="modal-dialog modal-lg">
-			<div class="modal-content">
-			
-				<div class="modal-header">
-					<button type="button" class="close" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-					<h4 class="modal-title"> <?= _("Notification non lus") ?> </h4>
-				</div>
-
-				<div class="modal-body">
-					<div id="div_messagerie">	
-					
-					</div>	
-					
-				</div>
-				
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-				</div>
-				
-			</div>
-		</div>
-	</div>
-
-		
-	<div class="modal fade" id="popmessagerie" role="dialog">
-		<div class="modal-dialog modal-lg">
-			<div class="modal-content">
-			
-				<div class="modal-header">
-					<button type="button" class="close" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-					<h4 class="modal-title"> <?= _("Messages non lus") ?> </h4>
-				</div>
-
-				<div class="modal-body">
-					<div id="div_messagerie">	
-					
-					</div>	
-					
-				</div>
-				
-				  <div class="modal-footer">
-					<button id="btn_close_messagerie" NAME="btn_close_messagerie" type="button" class="btn btn-default" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-
-				  </div>
-				
-			</div>
-		</div>
-	</div>
-
-
-    <button id="btn_pop_messagerie" NAME="btn_pop_messagerie" type="button" class="sr-only" data-bs-toggle="modal" data-bs-target="#popmessagerie"> <?= _("Afficher les notifications non lus...") ?> </button>
-	
-	<button id="btn_pop_dernier_messagerie" NAME="btn_pop_dernier_messagerie" class="sr-only" type="button" data-bs-toggle="modal" data-bs-target="#popderniermessagerie"> <?= _("Alerte Réception Message...") ?> </button>
-
-	<div class="modal fade" id="popderniermessagerie" role="dialog">
-			<div class="modal-dialog modal-lg">
-				<div class="modal-content">
-				
-					<div class="modal-header">
-						<button type="button" class="close" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-						<h4 class="modal-title"> <?= _("Alerte Réception Message...") ?> </h4>
-					</div>
-
-					<div class="modal-body">
-						<div id="div_dernier_messagerie">	
-						
-						</div>	
-						
-					</div>
-					
-					  <div class="modal-footer">
-						<button id="btn_close_pop_dernier_messagerie" name="btn_close_pop_dernier_messagerie" type="button" class="btn btn-default" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-					  </div>					
-				</div>
-			</div>
-		</div>
-		
-		<div class="modal fade" id="pop_photo" role="dialog">
-			<div class="modal-dialog modal-lg">
-				<div class="modal-content">			
-					<div class="modal-header">
-						<button id="btn_close_pop" name="btn_close_pop" type="button" class="close" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-						<h4 class="modal-title"> <?= _("Photo") ?> </h4>
-					</div>
-				
-					<div class="modal-body">
-						<img src="data:image/jpg;base64,<?=$imgData?>" style="width: 450px;" >
-					</div>		
-					
-				  <div class="modal-footer">
-					<button type="button" class="btn btn-default" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-				  </div>
-				</div>
-			</div>
-		</div>
-  
-<!-- Vendor JS Files -->
-<script src="Bootstrap/vendor/apexcharts/apexcharts.min.js"></script>
-  <script src="Bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <script src="Bootstrap/vendor/chart.js/chart.umd.js"></script>
-  <script src="Bootstrap/vendor/echarts/echarts.min.js"></script>
-  <script src="Bootstrap/vendor/quill/quill.min.js"></script>
-  <script src="Bootstrap/vendor/simple-datatables/simple-datatables.js"></script>
-  <script src="Bootstrap/vendor/php-email-form/validate.js"></script>
-
-  <script src="Bootstrap/js/jquery.min.js"></script>
-  <script src="Bootstrap/js/jquery-ui.js"></script>
-  <script src="Bootstrap/js/timer.jquery.js"></script>
-
-  <script src="Bootstrap_new/js/select2.min.js"></script>
-  <script src="Bootstrap_new/select/js/bootstrap-select.min.js"></script>
-
-  <!-- Template Main JS File -->
-  <script src="Bootstrap/js/main.js"></script>
-  <script src="Bootstrap_new/datatables/datatable.min.js" crossorigin="anonymous"></script>
-  
-  <?php if (est_anglophone()) : ?>
-	<script src="Js/datepicker-eng.js"></script>
-  <?php else: ?>
-	<script src="Js/datepicker-fr.js"></script>
-  <?php endif; ?> 
-	
-    <script src="Bootstrap/js/sweetalert.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
-    <script src="Js/fonctions.js?ver=2025.12.11.00"></script> 
-    <script src="Bootstrap/js/bootstrap.min.js"></script>
-	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-	
-	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.all.min.js"></script>
-	
-    <div id="div_ajaxgabarit">							
+    <!-- Modals -->
+    <!-- Photo Modal -->
+    <div class="modal fade modal-office" id="photoModal" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><?= _('Photo du bénéficiaire') ?></h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body text-center">
+                    <?php if ($_SESSION['faceRegistered_C'] == "1"): ?>
+                    <img src="data:image/jpg;base64,<?= $imgData ?>" 
+                         class="img-fluid rounded"
+                         style="max-height: 70vh; max-width: 100%;">
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
     </div>
 
-	<div id="nbMessagesNonLus" name="nbMessagesNonLus">
-		<INPUT class='sr-only timer' id="timer" NAME="timer" TYPE="button" value="0">
-		<INPUT class="sr-only" TYPE="text" id="msgNonLus" NAME="msgNonLus" value="0" >
-		<input class="sr-only" type="text" id="deconnexion" name="deconnexion" value="0" >			
-	</div>
-
-	<script type="text/javascript">
-		raffraichier_gabarit();
-	</script>
-
-	<script type="text/javascript">
-      $('#timer').timer({
-              duration: '60s',
-              callback: function() {
-                raffraichier_messagerie();
-              },
-              repeat: true
-      });
+    <!-- Messages Modal -->
+    <div class="modal fade modal-office" id="messagesModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><?= _('Notifications non lus') ?></h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div id="div_messagerie"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <!-- JavaScript Libraries -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="https://cdn.datatables.net/v/bs5/dt-1.13.6/datatables.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    
+    <!-- Application Scripts -->
+    <script src="Js/fonctions.js?ver=2025.12.20.00"></script>
+    
+    <?php if (est_anglophone()): ?>
+        <script src="Js/datepicker-eng.js"></script>
+    <?php else: ?>
+        <script src="Js/datepicker-fr.js"></script>
+    <?php endif; ?>
+    
+    <script>
+        // DOM Ready
+        document.addEventListener('DOMContentLoaded', function() {
+            // Toggle Sidebar on Mobile
+            document.querySelector('.sidebar-toggle').addEventListener('click', function() {
+                document.getElementById('sidebar').classList.toggle('open');
+            });
+            
+            // Initialize tooltips
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new bootstrap.Tooltip(tooltipTriggerEl);
+            });
+            
+            // Initialize select2
+            $('.select2').select2({
+                theme: 'bootstrap-5',
+                width: '100%'
+            });
+            
+            // Initialize DataTables
+            $('.datatable').DataTable({
+                responsive: true,
+                language: {
+                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json'
+                },
+                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
+                     '<"row"<"col-sm-12"tr>>' +
+                     '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>'
+            });
+            
+            // Simulate notification count
+            updateNotificationCount();
+            
+            // Auto-refresh notifications every 60 seconds
+            setInterval(updateNotificationCount, 60000);
+            
+            // Auto-refresh sidebar content
+            setInterval(raffraichier_gabarit, 30000);
+        });
+        
+        // Toggle Context Panel
+        function toggleContextPanel() {
+            document.getElementById('contextPanel').classList.toggle('open');
+        }
+        
+        // Open Photo Modal
+        function openPhotoModal() {
+            var modal = new bootstrap.Modal(document.getElementById('photoModal'));
+            modal.show();
+        }
+        
+        // Show Messages Modal
+        function pop_messagerie() {
+            var modal = new bootstrap.Modal(document.getElementById('messagesModal'));
+            modal.show();
+            
+            // Load messages via AJAX
+            $.ajax({
+                url: 'load_messages.php',
+                method: 'GET',
+                success: function(data) {
+                    $('#div_messagerie').html(data);
+                }
+            });
+        }
+        
+        // Update Notification Count
+        function updateNotificationCount() {
+            // Simulate notification count update
+            // In production, this would be an AJAX call
+            var count = Math.floor(Math.random() * 10);
+            var badge = document.getElementById('notificationCount');
+            badge.textContent = count;
+            badge.style.display = count > 0 ? 'flex' : 'none';
+        }
+        
+        // Change Language
+        function changer_langue() {
+            Swal.fire({
+                title: 'Changer de langue',
+                text: 'Sélectionnez la langue souhaitée:',
+                icon: 'question',
+                showCancelButton: true,
+                confirmButtonText: 'Français',
+                cancelButtonText: 'English',
+                reverseButtons: true
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    // Switch to French
+                    window.location.href = '?lang=fr_FR';
+                } else if (result.dismiss === Swal.DismissReason.cancel) {
+                    // Switch to English
+                    window.location.href = '?lang=en_US';
+                }
+            });
+        }
+        
+        // Format dates based on locale
+        function formatOfficeDate(dateString) {
+            const date = new Date(dateString);
+            const options = { 
+                year: 'numeric', 
+                month: 'short', 
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            };
+            
+            if (est_anglophone()) {
+                return date.toLocaleDateString('en-US', options);
+            } else {
+                return date.toLocaleDateString('fr-FR', options);
+            }
+        }
+        
+        // Close sidebar when clicking outside on mobile
+        document.addEventListener('click', function(event) {
+            const sidebar = document.getElementById('sidebar');
+            const toggleBtn = document.querySelector('.sidebar-toggle');
+            
+            if (window.innerWidth < 768 && 
+                !sidebar.contains(event.target) && 
+                !toggleBtn.contains(event.target) && 
+                sidebar.classList.contains('open')) {
+                sidebar.classList.remove('open');
+            }
+        });
     </script>
-
-	<script>
-		$(document).ready(function() {
-			$("#barre_laterale_d").hide()
-
-			$("#side_nav").hide()
-
-			$("#barre_laterale_d").hide()
-		});
-
-		$("#hideSideNav").on( "click", function() {
-			$("#barre_laterale_d").hide('slide', {direction: 'right'}, 500)
-		} );
-				
-		$("#showSideNav").on( "click", function() {	
-			$("#barre_laterale_d").show('slide', {direction: 'right'}, 500)
-				} );
-			$( '#select-field' ).select2( {
-			theme: 'bootstrap-5'
-		} );
-	</script>
-	
-    </body>
+    
+    <!-- AJAX Content Area -->
+    <div id="div_ajaxgabarit"></div>
+</body>
 </html>
\ No newline at end of file