diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index 4e0a0271..c76a79c0 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -129,4 +129,49 @@ body { background: var(--bg-body); color: #444; }
 
 @media (max-width: 1199px) {
     #main { margin-left: 20px !important; }
+}
+
+/* --- 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%;
+}
+
+/* --- BOUTON CONTEXTE DANS LE HEADER --- */
+.btn-context-trigger {
+    background: #f1f5f9;
+    border: none;
+    color: var(--primary);
+    font-weight: 700;
+    padding: 8px 16px;
+    border-radius: 10px;
+    transition: all 0.2s;
+}
+
+.btn-context-trigger:hover {
+    background: #e2e8f0;
+    transform: translateY(-1px);
+}
+
+/* Pulse effect pour le mode Test */
+.pulse {
+    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;
+}
+
+@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
diff --git a/Vue/includes/head-meta.php b/Vue/includes/head-meta.php
index fb2286e5..fb5380a7 100644
--- a/Vue/includes/head-meta.php
+++ b/Vue/includes/head-meta.php
@@ -13,4 +13,4 @@
 <link href="<?= $url ?>Bootstrap_new/css/select2.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 
-<link href="<?= $url ?>Bootstrap_new/css/theme-modern.css?ver=2026.02.23.10" rel="stylesheet">
\ No newline at end of file
+<link href="<?= $url ?>Bootstrap_new/css/theme-modern.css?ver=2026.02.23.11" rel="stylesheet">
\ No newline at end of file
diff --git a/Vue/includes/modals.php b/Vue/includes/modals.php
index 58b4c718..e7bef135 100644
--- a/Vue/includes/modals.php
+++ b/Vue/includes/modals.php
@@ -1,15 +1,32 @@
-<div class="modal fade" id="popmessagerie" tabindex="-1">
+<div class="modal fade" id="popmessagerie" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-lg">
-        <div class="modal-content border-0 shadow-lg rounded-4">
-            <div class="modal-header bg-light">
-                <h5 class="modal-title fw-bold text-primary"><i class="bi bi-envelope me-2"></i>Messages non lus</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        <div class="modal-content border-0 shadow-2xl rounded-4">
+            <div class="modal-header border-0 bg-light-primary py-3 px-4">
+                <h5 class="modal-title fw-800 text-primary">
+                    <i class="bi bi-chat-left-text-fill me-2"></i><?= _("Messages non lus") ?>
+                </h5>
+                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div class="modal-body">
-                <div id="div_messagerie" class="py-3 text-center text-muted">Chargement...</div>
+            <div class="modal-body p-4">
+                <div id="div_messagerie" class="min-h-200">
+                    </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 class="modal-footer border-0 p-3">
+                <button type="button" class="btn btn-secondary rounded-pill px-4 fw-bold" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="pop_photo" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content border-0 bg-transparent">
+            <div class="modal-body p-0 text-center">
+                <div id="div_pop_photo" class="photo-frame shadow-2xl">
+                    </div>
+                <button type="button" class="btn btn-white btn-sm rounded-pill mt-3 shadow" data-bs-dismiss="modal">
+                    <i class="bi bi-x-lg me-1"></i> <?= _("Fermer") ?>
+                </button>
             </div>
         </div>
     </div>
diff --git a/Vue/includes/scripts-footer.php b/Vue/includes/scripts-footer.php
index 47c2e16c..699ec109 100644
--- a/Vue/includes/scripts-footer.php
+++ b/Vue/includes/scripts-footer.php
@@ -1,35 +1,49 @@
-<script src="<?=$racineWeb?>Bootstrap/js/jquery.min.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/vendor/apexcharts/apexcharts.min.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/vendor/chart.js/chart.umd.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/vendor/echarts/echarts.min.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/vendor/quill/quill.min.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/vendor/simple-datatables/simple-datatables.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/js/jquery-ui.js"></script>
-<script src="<?=$racineWeb?>Bootstrap/js/timer.jquery.js"></script>
-<script src="<?=$racineWeb?>Bootstrap_new/js/select2.min.js"></script>
+<script src="<?= $racineWeb ?>Bootstrap/js/jquery.min.js"></script>
+<script src="<?= $racineWeb ?>Bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+<script src="<?= $racineWeb ?>Bootstrap/vendor/apexcharts/apexcharts.min.js"></script>
+<script src="<?= $racineWeb ?>Bootstrap/vendor/chart.js/chart.umd.js"></script>
+<script src="<?= $racineWeb ?>Bootstrap/vendor/simple-datatables/simple-datatables.js"></script>
+<script src="<?= $racineWeb ?>Bootstrap/js/timer.jquery.js"></script>
+<script src="<?= $racineWeb ?>Bootstrap_new/js/select2.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
-<script src="<?=$racineWeb . $_SESSION['dossierSociete'].'/Js/societe.js' ?>"></script>
-<script src="<?=$racineWeb?>Bootstrap/js/main.js"></script>
+<script src="<?= $racineWeb . $_SESSION['dossierSociete'].'/Js/societe.js' ?>"></script>
+<script src="<?= $racineWeb ?>Bootstrap/js/main.js"></script>
 
-<script>
+<script type="text/javascript">
     $(document).ready(function() {
-        // Initialisation de ta barre latérale
-        $("#showSideNav").on("click", function() { $("#barre_laterale_d").addClass('active'); });
-        $("#hideSideNav").on("click", function() { $("#barre_laterale_d").removeClass('active'); });
-        
-        // Timer messagerie original
-        if (typeof raffraichier_messagerie === "function") {
-            $('#timer').timer({
-                duration: '60s',
-                callback: function() { raffraichier_messagerie(); },
-                repeat: true
-            });
-        }
-        
+        // Initialisation du rafraîchissement global
         if (typeof raffraichier_gabarit === "function") {
             raffraichier_gabarit();
         }
+
+        // Timer de messagerie (60s)
+        $('#timer').timer({
+            duration: '60s',
+            callback: function() {
+                if (typeof raffraichier_messagerie === "function") raffraichier_messagerie();
+            },
+            repeat: true
+        });
+
+        // Gestion fluide de la sidebar de contexte
+        $("#showSideNav").on("click", function() {
+            $("#barre_laterale_d").addClass('active');
+            $("body").addClass('context-open');
+        });
+
+        $("#hideSideNav").on("click", function() {
+            $("#barre_laterale_d").removeClass('active');
+            $("body").removeClass('context-open');
+        });
+        
+        // Auto-close sur mobile si clic en dehors
+        $(document).mouseup(function(e) {
+            var container = $("#barre_laterale_d");
+            if (!container.is(e.target) && container.has(e.target).length === 0 && container.hasClass('active')) {
+                container.removeClass('active');
+            }
+        });
     });
 </script>
\ No newline at end of file