diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index ddb29bd0..c334a8fb 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1413,25 +1413,22 @@ select[class*="selectpicker"],
     font-family: 'DM Sans', sans-serif; /* Ou votre police SaaS */
 }
 
-/* ENTÊTE FIXE "STICKY" */
+/* --- LE HEADER STICKY (Base Neutral Pro) --- */
 .header-section {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
-    /* On descend à 1020 : assez pour survoler la page, 
-       mais assez bas pour laisser passer les dropdowns (1050+) */
-    z-index: 1010 !important; 
-    background-color: rgba(255, 255, 255, 0.85); /* Un blanc légèrement plus opaque pour la lisibilité */
+    /* On reste à 1000 pour être au-dessus du contenu mais sous les menus système */
+    z-index: 1000 !important; 
+    background-color: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-bottom: 0.15rem !important; /* Un peu plus d'espace pour respirer */
-    border-bottom: 1px solid rgba(0,0,0,0.05); /* Optionnel : une ligne très fine pour marquer la séparation au scroll */
+    padding: 5px 0;
+    margin-bottom: 1rem !important;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
     transition: all 0.3s ease;
 }
 
-/* On s'assure que la carte à l'intérieur de la section fixe garde son ombre */
 .header-section > div {
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08) !important;
 }
@@ -1749,50 +1746,45 @@ select[class*="selectpicker"],
 }
 
 /* Force l'alignement de la hauteur du SelectPicker avec les inputs sm */
-    .bootstrap-select .btn.dropdown-toggle {
-        padding-top: 0.25rem !important;
-        padding-bottom: 0.25rem !important;
-        height: 31px !important; /* Hauteur standard du form-control-sm */
-        font-size: 8.5pt !important;
-        display: flex;
-        align-items: center;
-        background-color: #fff !important;
-        border-width: 2px !important;
-    }
+.bootstrap-select .btn.dropdown-toggle {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+    height: 31px !important; /* Hauteur standard du form-control-sm */
+    font-size: 8.5pt !important;
+    display: flex;
+    align-items: center;
+    background-color: #fff !important;
+    border-width: 2px !important;
+}
 
-    /* Aligne l'icône de flèche */
-    .bootstrap-select .btn.dropdown-toggle .filter-option {
-        display: flex;
-        align-items: center;
-        height: 100%;
-    }
+/* Aligne l'icône de flèche */
+.bootstrap-select .btn.dropdown-toggle .filter-option {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
 
-    /* Corrige la bordure spécifique si vous utilisez border-start-0 */
-    .bootstrap-select.border-2 .btn.dropdown-toggle {
-        border-color: #dee2e6 !important;
-    }
+/* Corrige la bordure spécifique si vous utilisez border-start-0 */
+.bootstrap-select.border-2 .btn.dropdown-toggle {
+    border-color: #dee2e6 !important;
+}
 
-
-  /* On cible le conteneur du calendrier (selon la bibliothèque utilisée) */
-.datepicker-dropdown, 
-.datepicker.dropdown-menu, 
-.bootstrap-datetimepicker-widget {
-    z-index: 9999 !important; /* On explose le plafond des 1050 */
-    opacity: 1 !important;
-    visibility: visible !important;
-    display: block !important; /* Parfois le flou du header cache les éléments en 'absolute' */
-    /* Sécurité supplémentaire : on s'assure que le menu n'est pas coupé */
+/* --- LE DATEPICKER (Correction Visuelle & Z-Index) --- */
+.datepicker-dropdown {
+    /* Le secret : un index supérieur au header (1000) */
+    z-index: 2000 !important; 
     position: absolute !important;
+    padding: 10px !important;
+    border: 2px solid #212e53 !important;
+    border-radius: 10px !important;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
+    background-color: #fff !important;
 }
 
-.datepicker {
-   padding: 10px !important;
-   border: 2px solid #212e53 !important; /* Ta couleur Primary-ghost */
-   border-radius: 10px !important;
-   box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
-}
-
+/* Style des jours actifs (Couleur de ta charte) */
 .datepicker table tr td.active {
-    background-color: #212e53 !important; /* Couleur Primary */
+    background-color: #212e53 !important;
     border-radius: 5px !important;
-}
\ No newline at end of file
+    color: #fff !important;
+}
+  
\ No newline at end of file
diff --git a/Vue/Baremepriseencharge/index.php b/Vue/Baremepriseencharge/index.php
index c578430a..a6d958c0 100755
--- a/Vue/Baremepriseencharge/index.php
+++ b/Vue/Baremepriseencharge/index.php
@@ -57,26 +57,21 @@
 </div>
 
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        // On cible l'input de date par son ID
-        var inputDate = document.getElementById('dateEffetBareme');
+    document.addEventListener("DOMContentLoaded", function() {
+        // 1. Initialisation visuelle des SelectPickers
+        actualiserSelectPicker('.selectpicker');
+
+        // 2. Gestion du pré-chargement si le Garant est déjà connu (Session)
+        const codeGarant = $("#codeGcAssureur").val();
         
-        if (inputDate) {
-            // Initialisation (si ton plugin le permet en JS pur)
-            // Sinon, on gère dynamiquement le z-index lors du clic
-            inputDate.addEventListener('focus', function() {
-                // Un court délai pour laisser le plugin créer l'élément DOM du calendrier
-                setTimeout(function() {
-                    var picker = document.querySelector('.datepicker-dropdown');
-                    if (picker) {
-                        // On le déplace à la fin du body pour qu'il ignore le z-index du header
-                        document.body.appendChild(picker);
-                        picker.style.zIndex = "9999";
-                        picker.style.display = "block";
-                        picker.style.opacity = "1";
-                    }
-                }, 100);
-            });
+        if (codeGarant && codeGarant.trim() !== "") {
+            // On déclenche le filtrage des produits immédiatement
+            filtreproduitbareme();
+            
+            /** * Optionnel : Si tu veux aussi lancer la recherche des barèmes 
+             * automatiquement quand la page s'ouvre avec un garant en session
+             */
+            setTimeout(() => { afficher_bareme_produit(); }, 500);
         }
     });
 </script>
\ No newline at end of file
diff --git a/Vue/Detailbaremepriseencharge/index.php b/Vue/Detailbaremepriseencharge/index.php
index 6a778217..131fc74f 100755
--- a/Vue/Detailbaremepriseencharge/index.php
+++ b/Vue/Detailbaremepriseencharge/index.php
@@ -134,14 +134,20 @@
 <div class="modal fade" id="div_actesgarantiebareme" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false"></div>
 
 <script>
-    document.addEventListener("DOMContentLoaded", function() {
-        $('.datepicker').datepicker({
-            format: 'dd/mm/yyyy',
-            autoclose: true,
-            container: 'body', // <--- C'est cette ligne qui sauve la mise !
-            orientation: 'bottom auto', // Force l'ouverture vers le bas si possible
-            todayHighlight: true
-        });
+    document.addEventListener('focusin', function (e) {
+        // Si l'élément cliqué est l'input date
+        if (e.target.id === 'dateEffetBareme' || e.target.classList.contains('datepicker')) {
+            setTimeout(function() {
+                var picker = document.querySelector('.datepicker-dropdown');
+                if (picker) {
+                    // On déplace le calendrier à la racine du BODY
+                    document.body.appendChild(picker);
+                    // On s'assure qu'il est visible et au premier plan
+                    picker.style.zIndex = "99999";
+                    picker.style.display = "block";
+                }
+            }, 100);
+        }
     });
 </script>