diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index c76a79c0..2c41cf8b 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1,177 +1,198 @@
-/* --- BASE --- */
+/* * THEME-MODERN.CSS
+ * Refonte UI/UX - Application Gestion Santé
+ */
+
 :root {
-    --primary: #2C3E50;
-    --accent: #08C5D1;
-    --bg-body: #F4F7FB;
+    --primary-color: #0d6efd; /* Bleu médical */
+    --secondary-bg: #f8f9fa;
+    --sidebar-bg: #ffffff;
+    --sidebar-width: 260px;
+    --sidebar-collapsed-width: 80px;
+    --border-radius: 12px;
+    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    --transition-speed: 0.3s;
 }
 
-body { background: var(--bg-body); color: #444; }
+/* --- Global Layout --- */
+body {
+    font-family: 'Inter', 'Poppins', -apple-system, sans-serif;
+    background-color: var(--secondary-bg);
+    color: #444;
+}
 
-/* --- HEADER FLOATING --- */
+.main {
+    margin-left: var(--sidebar-width);
+    padding: 20px 30px;
+    transition: all var(--transition-speed);
+}
+
+.mode-test-active {
+    border-top: 5px solid orange;
+}
+
+/* --- Header & Navigation --- */
 #header {
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(10px);
-    margin: 10px 15px;
-    width: calc(100% - 30px);
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
+    background: #fff;
+    box-shadow: 0 1px 10px rgba(0,0,0,0.05);
+    padding: 10px 20px;
 }
 
-/* --- LE "WAHOO" : MAIN CARD --- */
-#main {
-    margin: 95px 20px 20px 320px; /* Espace pour la sidebar */
-    background: white;
-    border-radius: 20px;
-    min-height: 80vh;
-    padding: 30px;
-    border: 1px solid #edf2f7;
-    /* On évite les ombres lourdes, on mise sur la netteté */
+.breadcrumb {
+    border-radius: 8px;
+    background: transparent !important;
 }
 
-/* --- SIDEBAR : UNITÉ VISUELLE --- */
-#sidebar {
-    background: var(--primary);
-    border-right: none;
-    margin: 10px 0 10px 15px;
-    height: calc(100vh - 20px);
-    border-radius: 15px;
+.initials {
+    background-color: var(--primary-color);
+    color: white;
+    width: 35px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-weight: bold;
 }
 
-/* --- CONTEXTE (Sidenav) --- */
-.sidenav-context {
-    position: fixed;
-    right: -340px;
-    top: 10px;
-    height: calc(100vh - 20px);
-    width: 320px;
-    background: white;
-    border-radius: 20px 0 0 20px;
-    box-shadow: -10px 0 40px rgba(0,0,0,0.05);
-    z-index: 1060;
-    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    padding: 25px;
-}
-.sidenav-context.active { right: 0; }
-
-/* --- WIDGETS DE DONNÉES --- */
-.context-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px; }
-.context-value-box { padding: 12px; background: #f8fafc; border-radius: 10px; border: 1px solid #eef2f7; display: flex; align-items: center; }
-.assured-card { cursor: pointer; transition: 0.3s; padding: 10px; border-radius: 12px; }
-.assured-card:hover { background: #f0f9fa; transform: translateY(-2px); }
-
-/* Avatar initials */
-.initials-circle {
-    width: 40px; height: 40px; background: var(--accent); color: white;
-    display: flex; align-items: center; justify-content: center;
-    border-radius: 50%; font-weight: bold;
-}
-
-/* --- SIDEBAR STRUCTURE --- */
+/* --- Sidebar (Navigation Latérale) --- */
 .sidebar {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    bottom: 20px;
-    width: 260px;
-    z-index: 996;
-    transition: all 0.3s;
-    padding: 20px;
-    overflow-y: auto;
-    background: #1e293b; /* Bleu Nuit */
-    border-radius: 20px;
+    width: var(--sidebar-width);
+    background: var(--sidebar-bg);
+    border-right: 1px solid #eee;
+    padding: 15px;
 }
 
 .sidebar-nav .nav-link {
-    display: flex;
-    align-items: center;
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: rgba(255,255,255,0.7);
+    border-radius: var(--border-radius);
     padding: 12px 15px;
-    border-radius: 12px;
-    margin-bottom: 5px;
-}
-
-.sidebar-nav .nav-link.active, .sidebar-nav .nav-link:hover {
-    background: rgba(8, 197, 209, 0.15);
-    color: #08C5D1;
-}
-
-/* --- MAIN TOOLBAR --- */
-.main-nav-toolbar {
-    background: white;
-    padding: 15px 25px;
-    border-radius: 15px;
-    border: 1px solid #edf2f7;
-    margin-top: -10px; /* Aligné avec le haut du main */
-}
-
-.nav-pill-item {
-    padding: 8px 16px;
-    border-radius: 10px;
-    text-decoration: none;
-    color: #64748b;
-    font-size: 0.85rem;
-    font-weight: 600;
+    font-weight: 500;
+    color: #555;
     transition: 0.2s;
 }
 
-.nav-pill-item.active {
-    background: #08C5D1;
-    color: white !important;
+.sidebar-nav .nav-link:hover, 
+.sidebar-nav .nav-link.active-main {
+    background: #f0f7ff;
+    color: var(--primary-color);
 }
 
-/* --- FIX DES SUPERPOSITIONS --- */
-#main {
-    margin-left: 300px !important; /* Sidebar (260) + Marge (40) */
-    transition: all 0.3s;
+.sidebar-nav .nav-link i {
+    font-size: 1.2rem;
+    margin-right: 10px;
+    color: #888;
 }
 
-@media (max-width: 1199px) {
-    #main { margin-left: 20px !important; }
+.sidebar-nav .nav-link.active-main i {
+    color: var(--primary-color);
 }
 
-/* --- MODALS PREMIUM --- */
-.bg-light-primary { background-color: #f0f7ff; }
-.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
-.min-h-200 { min-height: 200px; }
-
-.photo-frame img {
-    border: 5px solid white;
-    border-radius: 20px;
-    max-width: 100%;
+/* --- Barre de Contexte (Droite) --- */
+#barre_laterale_d {
+    position: fixed;
+    top: 0;
+    right: -350px; /* Caché par défaut */
+    width: 320px;
+    height: 100vh;
+    background: #fff;
+    z-index: 1050;
+    transition: right 0.3s ease-in-out;
+    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
 }
 
-/* --- BOUTON CONTEXTE DANS LE HEADER --- */
-.btn-context-trigger {
-    background: #f1f5f9;
+#barre_laterale_d.open {
+    right: 0; /* Apparaît au clic */
+}
+
+.btn-info-context {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    background: var(--primary-color);
+    color: #fff;
+    border-radius: 50px;
+    padding: 12px 20px;
     border: none;
-    color: var(--primary);
-    font-weight: 700;
-    padding: 8px 16px;
-    border-radius: 10px;
-    transition: all 0.2s;
+    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+    z-index: 1001;
 }
 
-.btn-context-trigger:hover {
-    background: #e2e8f0;
-    transform: translateY(-1px);
+/* --- Main Navigation (Scrollmenu) --- */
+.scrollmenu {
+    overflow: auto;
+    white-space: nowrap;
+    padding: 10px 0;
+    background: #fff;
+    border-radius: var(--border-radius);
+    margin-bottom: 20px;
+    box-shadow: var(--soft-shadow);
 }
 
-/* Pulse effect pour le mode Test */
-.pulse {
+.scrollmenu a {
     display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: #ef4444;
-    border-radius: 50%;
-    margin-right: 8px;
-    box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
-    animation: pulse-animation 2s infinite;
+    padding: 10px 20px;
+    text-decoration: none;
+    color: #666;
+    border-radius: 20px;
+    margin: 0 5px;
 }
 
-@keyframes pulse-animation {
-    0% { box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.4); }
-    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
-    100% { box-shadow: 0 0 0 0px rgba(239, 68, 68, 0); }
-}
\ No newline at end of file
+.scrollmenu a:hover {
+    background-color: var(--secondary-bg);
+    color: var(--primary-color);
+}
+
+/* --- Cards & UI Elements --- */
+.card {
+    border: none;
+    border-radius: var(--border-radius);
+    box-shadow: var(--soft-shadow);
+    transition: transform 0.2s;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+}
+
+.btn {
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-weight: 500;
+}
+
+.btn-info {
+    background-color: #08C5D1;
+    border: none;
+    color: white;
+}
+
+/* --- Modals Modernisation --- */
+.modal-content {
+    border-radius: var(--border-radius);
+    border: none;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+}
+
+.modal-header {
+    border-bottom: 1px solid #f1f1f1;
+    background: #fafafa;
+}
+
+/* --- Tables (DataTables Custom) --- */
+.table {
+    border-collapse: separate;
+    border-spacing: 0 8px;
+}
+
+.table tr {
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+}
+
+.table td, .table th {
+    padding: 15px;
+    border: none !important;
+}
+
+.table tr td:first-child { border-radius: 10px 0 0 10px; }
+.table tr td:last-child { border-radius: 0 10px 10px 0; }
\ No newline at end of file
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 8cef3d2d..d4662c12 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -23,6 +23,12 @@ $companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES);
 $modeDev = $_SESSION['modeDev_C'];
 $imgData = $_SESSION['photoAssureCrypte'];
 
+$infovue = $gabary->getInfosVue($_SESSION['vue']);
+
+$_SESSION['descriptionVue'] = est_anglophone() ? $infovue['DescriptionEng'] : $infovue['Description'];
+$_SESSION['titreRetour']    = est_anglophone() ? $infovue['titreRetourEng'] : $infovue['titreRetour'];
+$_SESSION['retourVue']      = $infovue['lienRetour'];
+
 // Pour l'exemple, on désactive le mode test, mais vous pouvez le laisser dynamique
 $_SESSION['bdTests_C'] = "0";
 ?>
diff --git a/Vue/includes/barre-contexte.php b/Vue/includes/barre-contexte.php
index 6b6aa091..c3e4c333 100644
--- a/Vue/includes/barre-contexte.php
+++ b/Vue/includes/barre-contexte.php
@@ -1,123 +1,37 @@
-<input type="hidden" id="numeroClient_C" value="<?= $this->nettoyer($_SESSION['numeroClient_C']) ?>">
-<input type="hidden" id="codeGcAssureur_C" value="<?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?>">
-
-<button class="btn-context-toggle" id="showSideNav" title="<?= _("Afficher contexte") ?>">
-    <i class="fa-solid fa-angles-left"></i>
-    <i class="fa fa-cog fa-spin"></i>
+<button class="btn-info-context" id="toggleContexte" title="<?= _("Infos Dossier") ?>">
+    <i class="bi bi-info-circle-fill"></i>
 </button>
 
-<div id="barre_laterale_d" class="context-panel">
-    <div class="context-panel-header">
-        <button class="btn-close-context" id="hideSideNav">
-            <i class="fa fa-cog fa-spin me-2"></i>
-            <i class="fa-solid fa-angles-right"></i>
+<aside id="barre_laterale_d" class="contexte-sidebar shadow">
+    <div class="contexte-header d-flex justify-content-between align-items-center mb-4">
+        <h5 class="mb-0 fw-bold"><?= _("Contexte") ?></h5>
+        <button type="button" class="btn-close" id="closeContexte"></button>
+    </div>
+
+    <div class="context-card mb-3 p-3 bg-light rounded border-start border-primary border-4">
+        <p class="small text-muted mb-1 text-uppercase fw-bold"><?= _("Garant") ?></p>
+        <div class="d-flex align-items-center">
+            <i class="bi bi-shield-check me-2 text-primary"></i>
+            <span class="fw-semibold"><?= $this->nettoyer($_SESSION['nomGarant_C']) ?></span>
+        </div>
+    </div>
+
+    <div class="context-card mb-3 p-3 bg-light rounded border-start border-info border-4">
+        <p class="small text-muted mb-1 text-uppercase fw-bold"><?= _("Client") ?></p>
+        <div class="mb-2">
+            <span class="badge bg-info text-dark mb-1">ID: <?= $this->nettoyer($_SESSION['numeroClient_d_C']) ?></span>
+            <div class="fw-semibold text-truncate"><?= $this->nettoyer($_SESSION['nomClient_d_C']) ?></div>
+        </div>
+        <button class="btn btn-sm btn-outline-info w-100" onclick="javascript:afficher_client_d_id();">
+            <i class="bi bi-eye"></i> <?= _("Détails Client") ?>
         </button>
     </div>
 
-    <div class="context-panel-body">
-        <!-- Garant -->
-        <div class="context-card">
-            <div class="context-card-title">
-                <i class="fas fa-user-shield"></i> <?= _("Garant") ?>
-                <a href="javascript:afficher_garant('<?= $this->nettoyer($_SESSION['codeGcAssureur_C']) ?>');" class="float-end">#<?= $_SESSION['codeGcAssureur_C'] ?></a>
-            </div>
-            <button class="btn btn-outline-primary w-100" onclick="afficher_garant('<?= $_SESSION['codeGcAssureur_C'] ?>')">
-                <?= $_SESSION['nomGcAssureur_C'] ?? '' ?>
-            </button>
-        </div>
-
-        <!-- Souscripteur -->
-        <div class="context-card">
-            <div class="context-card-title">
-                <i class="fas fa-user-tie"></i> <?= _("Souscripteur") ?>
-                <a href="javascript:afficher_client_id();" class="float-end">#<?= $_SESSION['numeroClient_C'] ?></a>
-            </div>
-            <button class="btn btn-outline-primary w-100" onclick="afficher_client_id()">
-                <?= $_SESSION['nomClient_C'] ?>
-            </button>
-        </div>
-
-        <!-- Police -->
-        <div class="context-card">
-            <button class="btn btn-primary w-100" onclick="afficher_police_id()">
-                <i class="fa fa-file-text me-2"></i> <?= _("Police") ?> : <?= $_SESSION['numeroPolice_C'] ?>
-                <br><small><?= dateLang($_SESSION['dateEffet_C'], $_SESSION['lang']) ?> - <?= dateLang($_SESSION['dateEcheance_C'], $_SESSION['lang']) ?></small>
-            </button>
-        </div>
-
-        <!-- Stats -->
-        <div class="context-card text-center">
-            <span class="badge bg-info"><?= _("Fam.") ?> <?= format_N($_SESSION['ndAdh_C']) ?></span>
-            <span class="badge bg-secondary"><?= _("Dép.") ?> <?= format_N($_SESSION['ndDep_C']) ?></span>
-            <span class="badge bg-success"><?= _("Bén.") ?> <?= format_N($_SESSION['ndActif_C']) ?></span>
-        </div>
-
-        <!-- Famille / Adhérent -->
-        <div class="context-card">
-            <button class="btn btn-outline-secondary w-100" onclick="afficher_adherent_id()">
-                <i class="fa-solid fa-users me-2"></i> <?= _("Famille") ?> : <?= $_SESSION['numeroAdherent_C'] ?>
-            </button>
-            <div class="mt-1 text-muted small"><?= substr($_SESSION['adherent_C'] ?? '', 0, 25) ?></div>
-        </div>
-
-        <!-- Bénéficiaire -->
-        <div class="context-card">
-            <button class="btn btn-outline-secondary w-100" onclick="afficher_beneficiaire_id()">
-                <i class="fa-solid fa-user me-2"></i> <?= _("Bénéficiaire") ?> : <?= $_SESSION['numeroBeneficiaire_C'] ?>
-            </button>
-            <div class="mt-1 text-muted small"><?= substr($_SESSION['beneficiaire_C'] ?? '', 0, 25) ?></div>
-            <small class="d-block text-muted"><?= dateLang($_SESSION['dateEntreeBeneficiaire_C'], $_SESSION['lang']) ?> - <?= dateLang($_SESSION['dateEcheancePolice_C'], $_SESSION['lang']) ?></small>
-        </div>
-
-        <!-- Photo -->
-        <?php if ($_SESSION['faceRegistered_C'] == "1" && $_SESSION['idBeneficiaire_C'] > "0"): ?>
-            <div class="context-card text-center">
-                <img src="data:image/jpg;base64,<?= $imgData ?>" class="img-fluid rounded border" style="max-width: 150px;" data-bs-toggle="modal" data-bs-target="#pop_photo" alt="Photo">
-            </div>
-        <?php endif; ?>
-
-        <!-- Dernières polices -->
-        <div class="context-card">
-            <div class="context-card-title"><i class="bi bi-clock-history"></i> <?= _("Dernières polices") ?></div>
-            <div class="list-group list-group-flush">
-                <?php foreach ($_SESSION['contextPolice'] ?? [] as $contextPolice): ?>
-                    <a href="javascript:selectionner_police(<?= $contextPolice['idPolice'] ?>,'<?= $contextPolice['numeroPolice'] ?>');afficher_police_id();" 
-                       class="list-group-item list-group-item-action p-2 small">
-                        <?= htmlspecialchars($contextPolice['libellePolice']) ?>
-                    </a>
-                <?php endforeach; ?>
-            </div>
-        </div>
-
-        <!-- Gestion messages -->
-        <button class="btn btn-success w-100 mt-2" onclick="gerer_messagerie()">
-            <i class="fa fa-comments me-2"></i> <?= _("Gérer Messages") ?>
+    <div class="context-card p-3 bg-light rounded border-start border-success border-4">
+        <p class="small text-muted mb-1 text-uppercase fw-bold"><?= _("Police / Contrat") ?></p>
+        <div class="fw-bold mb-2"># <?= $this->nettoyer($_SESSION['numeroPolice_d_C']) ?></div>
+        <button class="btn btn-sm btn-outline-success w-100" onclick="javascript:afficher_police_d_id_init();">
+            <i class="bi bi-file-earmark-text"></i> <?= _("Consulter") ?>
         </button>
-
-        <!-- Mot de passe -->
-        <div class="context-card text-center">
-            <a href="javascript:change_password();" class="d-inline-block p-3 bg-light rounded-circle shadow-sm">
-                <img src="Bootstrap_new/images/pwd.png" alt="Changer mot de passe" style="width: 30px;">
-            </a>
-            <div class="mt-1 small"><?= _("Changer mot de passe") ?></div>
-        </div>
-
-        <!-- Mode cotation -->
-        <?php if ($_SESSION['modeDevis'] == "1"): ?>
-            <div class="alert alert-warning text-center fw-bold p-2 mt-2"><?= _("GESTION DES COTATIONS") ?></div>
-            <div class="context-card">
-                <button class="btn btn-outline-warning w-100" onclick="afficher_client_d_id()">
-                    <i class="fa fa-user-times"></i> <?= _("Prospect") ?> : <?= $_SESSION['numeroClient_d_C'] ?>
-                </button>
-                <div class="mt-1 small"><?= substr($_SESSION['nomClient_d_C'] ?? '', 0, 25) ?></div>
-            </div>
-            <button class="btn btn-outline-warning w-100 mt-2" onclick="afficher_police_d_id_init()">
-                <i class="fa fa-file-text"></i> <?= $_SESSION['numeroPolice_d_C'] ?>
-            </button>
-        <?php endif; ?>
     </div>
-
-    <div class="context-panel-footer">
-        <span class="small text-muted" id="nbMessagesNonLus"><?= _("0 message(s) non lu(s)") ?></span>
-    </div>
-</div>
\ No newline at end of file
+</aside>
\ No newline at end of file
diff --git a/Vue/includes/head-meta.php b/Vue/includes/head-meta.php
index a628ab1d..80ddcb53 100644
--- a/Vue/includes/head-meta.php
+++ b/Vue/includes/head-meta.php
@@ -1,7 +1,12 @@
 <?php
-// Constantes pour la version des fichiers (cache busting)
-define('CSS_VERSION', '2026.02.23.15');
-define('JS_VERSION', '2026.02.23.15');
+/**
+ * VERSIONING AUTOMATIQUE (CACHE BUSTING)
+ * Génère une version unique basée sur la minute actuelle (Ex: 202602241530)
+ * Permet de forcer la mise à jour des fichiers CSS/JS chez tous les utilisateurs.
+ */
+if (!defined('APP_VERSION')) {
+    define('APP_VERSION', date('Y.m.d.H.i'));
+}
 ?>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -9,30 +14,25 @@ define('JS_VERSION', '2026.02.23.15');
 
 <base href="<?= $racineWeb ?>">
 
-<!-- Favicon -->
 <link rel="icon" href="Bootstrap_new/images/favicon.ico">
 
-<!-- Fonts modernes et légères -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 
-<!-- Vendor CSS Files (Bootstrap Icons, FontAwesome, etc.) -->
 <link href="Bootstrap/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <link href="Bootstrap/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 <link href="Bootstrap/vendor/remixicon/remixicon.css" rel="stylesheet">
 
-<!-- Libraries CSS -->
 <link href="Bootstrap_new/css/datatables.min.css" rel="stylesheet">
 <link href="Bootstrap_new/css/select2.min.css" 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">
 <link href="Bootstrap/vendor/quill/quill.snow.css" rel="stylesheet">
 
-<!-- Custom CSS (avec versioning) -->
-<link href="Bootstrap/css/style.css?ver=<?= CSS_VERSION ?>" rel="stylesheet">
-<link href="Bootstrap_new/css/custom.css?ver=<?= CSS_VERSION ?>" rel="stylesheet">
-<link href="Bootstrap_new/css/theme-modern.css?ver=<?= CSS_VERSION ?>" rel="stylesheet">
+<link href="Bootstrap/css/style.css?ver=<?= APP_VERSION ?>" rel="stylesheet">
+<link href="Bootstrap_new/css/custom.css?ver=<?= APP_VERSION ?>" rel="stylesheet">
+<link href="Bootstrap_new/css/theme-modern.css?ver=<?= APP_VERSION ?>" rel="stylesheet">
 
-<title><?= $_SESSION['vue'] ?? 'INTER SANTE' ?></title>
\ No newline at end of file
+<title><?= $_SESSION['descriptionVue'] ?? 'INTER SANTE' ?></title>
\ No newline at end of file
diff --git a/Vue/includes/header.php b/Vue/includes/header.php
index d03069d8..fcc91ec8 100644
--- a/Vue/includes/header.php
+++ b/Vue/includes/header.php
@@ -1,97 +1,45 @@
-<?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";
-}
-?>
-
-<header id="header" class="header fixed-top d-flex align-items-center" style="<?= $style ?>">
-    <div class="d-flex align-items-center justify-content-between w-100">
-        <!-- Logo et toggle -->
-        <div class="d-flex align-items-center">
-            <i class="bi bi-list toggle-sidebar-btn me-3"></i>
-            <a href="#" class="logo d-flex align-items-center">
-                <img src="Bootstrap_new/images/new/favicon.png" alt="Logo Inter santé" height="40">
-                <span class="d-none d-lg-block fw-bold ms-2">INTER SANTE</span>
-            </a>
-        </div>
-
-        <!-- Actions et profil -->
-        <div class="d-flex align-items-center gap-3">
-            <!-- Mode test -->
-            <?php if ($_SESSION['bdTests_C'] == "1"): ?>
-                <span class="badge bg-warning text-dark px-3 py-2"><?= $test ?></span>
-            <?php endif; ?>
-
-            <!-- Notifications -->
-            <div class="dropdown">
-                <a class="position-relative" href="#" data-bs-toggle="dropdown" aria-expanded="false">
-                    <i class="bi bi-bell fs-5"></i>
-                    <span id="span_notification" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">0</span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-end p-2" style="min-width: 300px;">
-                    <li class="text-center text-muted small p-3"><?= _("Aucune notification") ?></li>
-                </ul>
-            </div>
-
-            <!-- Logo société -->
-            <div class="d-flex align-items-center gap-2">
-                <img src="<?= $_SESSION['lienLogo'] ?>" alt="Logo" style="height: 40px;">
-                <span class="fw-semibold d-none d-lg-inline"><?= $companyDisplayName ?></span>
-            </div>
-
-            <!-- Langue -->
-            <div class="dropdown">
-                <a href="#" data-bs-toggle="dropdown" class="d-flex align-items-center gap-2">
-                    <img src="Bootstrap_new/images/<?= $flag ?>" alt="<?= $alt ?>" width="24" class="rounded">
-                    <span class="d-none d-md-inline"><?= $lib ?></span>
-                </a>
-                <ul class="dropdown-menu">
-                    <li>
-                        <a class="dropdown-item" href="javascript:changer_langue();">
-                            <i class="fa fa-exchange me-2"></i> <?= _("Changer de langue") ?>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-            <!-- Aide -->
-            <a href="Guideutilisation/" class="d-flex align-items-center" title="<?= _("Guide d'utilisation") ?>">
-                <i class="bi bi-question-circle-fill fs-5"></i>
-            </a>
-
-            <!-- Profil utilisateur -->
-            <div class="dropdown">
-                <a href="#" data-bs-toggle="dropdown" class="d-flex align-items-center gap-2">
-                    <span class="initials rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
-                        <?= $_SESSION['userInitials_C'] ?>
-                    </span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li>
-                        <a class="dropdown-item" href="javascript:change_password();">
-                            <i class="fa fa-user-circle me-2"></i> <?= $_SESSION['utilisateur_C'] ?>
-                        </a>
-                    </li>
-                    <li>
-                        <hr class="dropdown-divider">
-                    </li>
-                    <li>
-                        <a class="dropdown-item text-danger" href="#">
-                            <i class="bi bi-box-arrow-right me-2"></i> <?= _("Déconnexion") ?>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
+<header id="header" class="header fixed-top d-flex align-items-center">
+    <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">
+            <span class="d-none d-lg-block">INTER SANTE</span>
+        </a>
+        <i class="bi bi-list toggle-sidebar-btn ms-3"></i>
     </div>
+
+    <nav class="ms-4 d-none d-md-block">
+        <ol class="breadcrumb mb-0 bg-transparent">
+            <li class="breadcrumb-item small"><a href="<?= $_SESSION['retourVue'] ?>"><?= $_SESSION['titreRetour'] ?></a></li>
+            <li class="breadcrumb-item active small fw-bold text-primary"><?= $_SESSION['descriptionVue'] ?></li>
+        </ol>
+    </nav>
+
+    <nav class="header-nav ms-auto pe-3">
+        <ul class="d-flex align-items-center">
+            <li class="nav-item dropdown px-3">
+                <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
+                    <img src="Bootstrap_new/images/<?= (est_anglophone()) ? 'england.png' : 'france.png' ?>" width="20">
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end shadow border-0">
+                    <li><a class="dropdown-item" href="javascript:changer_langue();"><?= _("Changer de langue") ?></a></li>
+                </ul>
+            </li>
+
+            <li class="nav-item dropdown border-start ps-3">
+                <a class="nav-link nav-profile d-flex align-items-center" href="#" data-bs-toggle="dropdown">
+                    <span class="initials"><?= $_SESSION['userInitials_C'] ?></span>
+                    <span class="d-none d-md-block dropdown-toggle ps-2 fw-semibold"><?= $_SESSION['utilisateur_C'] ?></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end shadow border-0 profile">
+                    <li class="dropdown-header text-start">
+                        <h6 class="mb-0"><?= $_SESSION['nomSociete'] ?></h6>
+                        <small class="text-muted"><?= $_SESSION['libeleRole_C'] ?></small>
+                    </li>
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item d-flex align-items-center" href="javascript:change_password();"><i class="bi bi-shield-lock"></i> <span>Sécurité</span></a></li>
+                    <li><a class="dropdown-item d-flex align-items-center text-danger" href="LogOut/"><i class="bi bi-box-arrow-right"></i> <span>Déconnexion</span></a></li>
+                </ul>
+            </li>
+        </ul>
+    </nav>
 </header>
\ No newline at end of file
diff --git a/Vue/includes/main-navigation.php b/Vue/includes/main-navigation.php
index 238f8879..6739dd86 100644
--- a/Vue/includes/main-navigation.php
+++ b/Vue/includes/main-navigation.php
@@ -1,12 +1,13 @@
-<?php if (isset($menusvue) && count($menusvue) > 0): ?>
-    <div class="nav-scroller bg-white shadow-sm mb-3">
-        <nav class="nav nav-underline container">
+<?php if(isset($menusvue) && sizeof($menusvue) > 0): ?>
+    <div class="main-navigation-wrapper mb-4">
+        <div class="scrollmenu shadow-sm">
             <?php foreach ($menusvue as $menu): ?>
-                <a class="nav-link <?= (strpos($_SERVER['REQUEST_URI'], $menu['lienMenu']) !== false) ? 'active' : '' ?>" 
-                   href="<?= $menu['lienMenu'] ?>">
-                    <?= $menu['libeleMenu'] ?>
+                <a title="<?= $menu['descriptionMenu']; ?>" 
+                   href="<?= $menu['lienMenu']; ?>" 
+                   class="nav-link-modern">
+                   <?= $menu['libeleMenu'] ?>
                 </a>
             <?php endforeach; ?>
-        </nav>
+        </div>
     </div>
 <?php endif; ?>
\ No newline at end of file
diff --git a/Vue/includes/modals.php b/Vue/includes/modals.php
index 46e34e04..b85eb223 100644
--- a/Vue/includes/modals.php
+++ b/Vue/includes/modals.php
@@ -1,53 +1,28 @@
-<!-- Modal Messages non lus -->
-<div class="modal fade" id="popmessagerie" tabindex="-1">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header bg-primary text-white">
-                <h5 class="modal-title"><?= _("Messages non lus") ?></h5>
-                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+<div class="modal fade" id="popmessagerie" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content border-0 shadow-lg">
+            <div class="modal-header bg-light border-bottom">
+                <h5 class="modal-title fw-bold text-primary"><i class="bi bi-envelope-paper me-2"></i><?= _("Messages non lus") ?></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div class="modal-body" id="div_messagerie"></div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
+            <div class="modal-body p-0">
+                <div id="div_messagerie" class="modern-scroll" style="max-height: 450px; overflow-y: auto;">
+                    </div>
+            </div>
+            <div class="modal-footer border-0">
+                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
             </div>
         </div>
     </div>
 </div>
 
-<!-- Modal Alerte nouveau message -->
-<div class="modal fade" id="popderniermessagerie" tabindex="-1">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header bg-warning">
-                <h5 class="modal-title"><?= _("Alerte Réception Message...") ?></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="modal-body" id="div_dernier_messagerie"></div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
+<div class="modal fade" id="pop_photo" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-md modal-dialog-centered">
+        <div class="modal-content bg-transparent border-0">
+            <div class="modal-body p-0 text-center">
+                <div id="div_photo_id" class="rounded shadow-lg bg-white p-2">
+                     </div>
             </div>
         </div>
     </div>
-</div>
-
-<!-- Modal Photo -->
-<div class="modal fade" id="pop_photo" tabindex="-1">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header bg-primary text-white">
-                <h5 class="modal-title"><?= _("Photo") ?></h5>
-                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="modal-body text-center">
-                <img src="data:image/jpg;base64,<?= $imgData ?>" class="img-fluid" style="max-width: 450px;">
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Boutons cachés pour déclencher les modales (nécessaires pour le JS existant) -->
-<button id="btn_pop_messagerie" class="d-none" data-bs-toggle="modal" data-bs-target="#popmessagerie"></button>
-<button id="btn_pop_dernier_messagerie" class="d-none" data-bs-toggle="modal" data-bs-target="#popderniermessagerie"></button>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/Vue/includes/scripts-footer.php b/Vue/includes/scripts-footer.php
index 94e5525f..080fd21e 100644
--- a/Vue/includes/scripts-footer.php
+++ b/Vue/includes/scripts-footer.php
@@ -1,69 +1,59 @@
-<!-- Vendor JS -->
-<script src="Bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+<?php 
+// Réutilisation de la version définie dans le head ou redéfinition si besoin
+$v_scripts = defined('APP_VERSION') ? APP_VERSION : date('YmdHi'); 
+?>
+
+<div id="div_ajaxgabarit" class="d-none"></div>
+
 <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/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
-<!-- DataTables, Select2, etc. -->
-<script src="Bootstrap_new/datatables/datatable.min.js"></script>
+<script src="Bootstrap/vendor/apexcharts/apexcharts.min.js"></script>
+<script src="Bootstrap/vendor/chart.js/chart.umd.js"></script>
+<script src="Bootstrap/vendor/quill/quill.min.js"></script>
+<script src="Bootstrap/vendor/simple-datatables/simple-datatables.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>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
-<!-- Chart.js -->
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="Js/fonctions.js?ver=<?= $v_scripts ?>"></script>
 
-<!-- SweetAlert2 -->
-<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.all.min.js"></script>
+<script src="<?= $_SESSION['dossierSociete'].'/Js/societe.js?ver='.$v_scripts ?>"></script>
 
-<!-- Toastr -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+<script src="Bootstrap/js/main.js?v=<?= $v_scripts ?>"></script>
 
-<!-- Fonctions métier centralisées -->
-<script src="Js/fonctions.js?ver=<?= JS_VERSION ?>"></script>
-<script src="<?= $_SESSION['dossierSociete'] ?>/Js/societe.js?ver=<?= JS_VERSION ?>"></script>
-
-<!-- Datepicker selon langue -->
-<?php if (est_anglophone()): ?>
-    <script src="Js/datepicker-eng.js?ver=<?= JS_VERSION ?>"></script>
-<?php else: ?>
-    <script src="Js/datepicker-fr.js?ver=<?= JS_VERSION ?>"></script>
-<?php endif; ?>
-
-<script src="Js/html2pdf.js?ver=<?= JS_VERSION ?>"></script>
-
-<!-- Template Main JS -->
-<script src="Bootstrap/js/main.js?ver=<?= JS_VERSION ?>"></script>
-
-<!-- Initialisations et rafraîchissements -->
-<script>
+<script type="text/javascript">
     $(document).ready(function() {
-        // Masquer le panneau de contexte au chargement
-        $("#barre_laterale_d").hide();
+        /**
+         * Lancement de la mise à jour du gabarit (Défini dans fonctions.js)
+         */
+        if(typeof raffraichier_gabarit === "function") {
+            raffraichier_gabarit();
+        }
 
-        // Initialisation des selects
-        $('.select2').select2({ theme: 'bootstrap-5' });
-        $('.selectpicker').selectpicker();
+        /**
+         * Rafraîchissement automatique de la messagerie toutes les 60s
+         */
+        $('#timer').timer({
+            duration: '60s',
+            callback: function() { 
+                if(typeof raffraichier_messagerie === "function") raffraichier_messagerie(); 
+            },
+            repeat: true
+        });
 
-        // Rafraîchir le gabarit
-        //if (typeof raffraichir_gabarit === 'function') raffraichir_gabarit();
-    });
+        /**
+         * Gestion de l'affichage de la barre de contexte (Sidebar Droite)
+         */
+        $("#showSideNav, #toggleContexte").on("click", function(e) {
+            e.preventDefault();
+            $("#barre_laterale_d").addClass("open").fadeIn();
+        });
 
-    // Timer pour les messages
-    /*
-    $('#timer').timer({
-        duration: '60s',
-        callback: function() {
-            if (typeof raffraichir_messagerie === 'function') raffraichir_messagerie();
-        },
-        repeat: true
-    });
-    */
-
-    // Toggle du panneau de contexte
-    $("#hideSideNav").on("click", function() {
-        $("#barre_laterale_d").hide('slide', { direction: 'right' }, 300);
-    });
-    $("#showSideNav").on("click", function() {
-        $("#barre_laterale_d").show('slide', { direction: 'right' }, 300);
+        $("#hideSideNav, #closeContexte").on("click", function() {
+            $("#barre_laterale_d").removeClass("open").fadeOut();
+        });
     });
 </script>
\ No newline at end of file
diff --git a/Vue/includes/sidebar.php b/Vue/includes/sidebar.php
index 91ea3c07..ed0482ac 100644
--- a/Vue/includes/sidebar.php
+++ b/Vue/includes/sidebar.php
@@ -1,41 +1,38 @@
 <aside id="sidebar" class="sidebar">
     <ul class="sidebar-nav" id="sidebar-nav">
-        <?php foreach ($menus as $key0 => $menuParent):
-            $menuChildrenLevelOne = $gabary->get_menus_by_parent_code($menuParent['vue']);
+        <?php foreach ($menus as $key0 => $menuParent): 
+            $menuChildren = $gabary->get_menus_by_parent_code($menuParent['vue']);
+            $hasChildren = (sizeof($menuChildren) > 0);
+            $isActiveParent = (strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1));
         ?>
-            <?php if (sizeof($menuChildrenLevelOne) > 0): ?>
-                <li class="nav-item">
-                    <a class="nav-link <?= (strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1)) ? '' : 'collapsed' ?>" 
-                       data-bs-target="#menu-<?= $menuParent['codeMenu'] . $key0 ?>" 
-                       data-bs-toggle="collapse" 
-                       href="#">
+            <li class="nav-item">
+                <?php if ($hasChildren): ?>
+                    <a class="nav-link <?= $isActiveParent ? '' : 'collapsed' ?>" 
+                       data-bs-target="#menu-<?= $key0 ?>" 
+                       data-bs-toggle="collapse" href="#">
                         <i class="<?= $menuParent['icone'] ?>"></i>
                         <span><?= $menuParent['libeleMenu'] ?></span>
                         <i class="bi bi-chevron-down ms-auto"></i>
                     </a>
-                    <ul id="menu-<?= $menuParent['codeMenu'] . $key0 ?>" 
-                        class="nav-content collapse <?= (strtolower($menuParent['libeleMenu']) == strtolower($activeLevel1)) ? 'show' : '' ?>" 
-                        data-bs-parent="#sidebar-nav">
-                        <?php foreach ($menuChildrenLevelOne as $menuChild): 
+                    <ul id="menu-<?= $key0 ?>" class="nav-content collapse <?= $isActiveParent ? 'show' : '' ?>" data-bs-parent="#sidebar-nav">
+                        <?php foreach ($menuChildren as $menuChild): 
                             $link_clean = explode('/', $menuChild['lienMenu'])[0];
+                            $isSubActive = ($link_clean == $_SESSION['firstLevelMenu']);
                         ?>
                             <li>
-                                <a href="<?= $menuChild['lienMenu'] ?>" 
-                                   class="<?= ($link_clean == $activeLink) ? 'active' : '' ?>">
-                                    <?= $menuChild['libeleMenu'] ?>
+                                <a href="<?= $menuChild['lienMenu'] ?>" class="<?= $isSubActive ? 'active' : '' ?>">
+                                    <i class="bi bi-circle"></i><span><?= $menuChild['libeleMenu'] ?></span>
                                 </a>
                             </li>
                         <?php endforeach; ?>
                     </ul>
-                </li>
-            <?php else: ?>
-                <li class="nav-item">
-                    <a class="nav-link" href="<?= $menuParent['lienMenu'] ?>">
+                <?php else: ?>
+                    <a class="nav-link <?= $isActiveParent ? '' : 'collapsed' ?>" href="<?= $menuParent['lienMenu'] ?>">
                         <i class="<?= $menuParent['icone'] ?>"></i>
                         <span><?= $menuParent['libeleMenu'] ?></span>
                     </a>
-                </li>
-            <?php endif; ?>
+                <?php endif; ?>
+            </li>
         <?php endforeach; ?>
     </ul>
 </aside>
\ No newline at end of file