From aec34a0d2da5d46af241d082d1de693d04356d33 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Thu, 26 Feb 2026 15:03:17 +0000
Subject: [PATCH] fan

---
 Bootstrap_new/css/theme-modern.css | 73 ++++++++++++++++++++----------
 Js/fonctions.js                    | 18 +++++---
 2 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css
index a6da9176..c606b7c1 100644
--- a/Bootstrap_new/css/theme-modern.css
+++ b/Bootstrap_new/css/theme-modern.css
@@ -1228,64 +1228,87 @@ h6 a:hover {
 .bg-warning-ghost { background: rgba(243, 156, 18, 0.12); }
 .bg-primary-ghost { background: rgba(33, 46, 83, 0.05); }
 
-/* --- FIX SELECTPICKER GLOBAL --- */
+/* ============================================================
+   FIX BOOTSTRAP-SELECT (SELECTPICKER) - NEUTRAL PRO THEME
+   ============================================================ */
 
-/* Cache l'élément select original de manière invisible pour le DOM */
+/* 1. DISPARITION RADICALE DU SELECT NATIF (Évite les doublons) */
 select.selectpicker {
     display: none !important;
     visibility: hidden !important;
+    opacity: 0 !important;
     height: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-}
-
-/* Si Bootstrap-Select crée une copie invisible mais qui prend de la place */
-.bootstrap-select > select.selectpicker {
-    display: none !important;
-    visibility: hidden !important;
+    width: 0 !important;
     position: absolute !important;
-    z-index: -100 !important;
 }
 
+/* 2. STYLE DU BOUTON (Apparence form-control) */
 .btn-form-select {
-    background-color: #fff !important;
+    background-color: #ffffff !important;
     border: 1px solid #e2e8f0 !important;
     color: var(--color-primary) !important;
     font-size: 0.82rem !important;
     padding: 0.5rem 0.75rem !important;
     border-radius: var(--radius-sm) !important;
+    width: 100% !important;
     display: flex !important;
     align-items: center;
     justify-content: space-between;
+    transition: all 0.2s ease-in-out;
 }
 
+/* État Focus */
 .bootstrap-select .dropdown-toggle:focus {
     outline: none !important;
     border-color: var(--color-primary-light) !important;
     box-shadow: 0 0 0 3px var(--color-primary-ghost) !important;
 }
 
-/* Ajustement de la zone de recherche dans le dropdown */
+/* 3. LE MENU DÉROULANT (Correction largeur et affichage) */
+.bootstrap-select.dropdown {
+    width: 100% !important;
+}
+
+.bootstrap-select .dropdown-menu {
+    min-width: 100% !important;
+    max-width: 100% !important;
+    border-radius: var(--radius-md);
+    border: 1px solid #e2e8f0;
+    box-shadow: var(--shadow-lg);
+    font-size: 0.82rem;
+    z-index: 9999 !important; /* Assure qu'il passe devant tout */
+}
+
+/* 4. ZONE DE RECHERCHE (Live Search) */
+.bootstrap-select .bs-searchbox {
+    padding: 8px 10px !important;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #e2e8f0;
+}
+
 .bootstrap-select .bs-searchbox .form-control {
     border: 1px solid #ced4da !important;
     background-color: #fff !important;
     font-size: 0.8rem !important;
+    padding: 6px 10px !important;
+    border-radius: var(--radius-sm) !important;
 }
 
-/* Limite la largeur du menu déroulant quand il est attaché au body */
-body > .bootstrap-select.dropdown {
-    max-width: 400px !important; /* Ajustez selon vos besoins */
-    width: auto !important;
+/* 5. ÉLÉMENTS DE LA LISTE */
+.bootstrap-select .dropdown-menu li a {
+    padding: 8px 12px !important;
+    color: var(--color-primary);
+    transition: background 0.1s;
 }
 
-/* Assure que la boîte de recherche reste compacte */
-.bootstrap-select .dropdown-menu {
-    min-width: 100% !important;
-    max-width: 100% !important;
-    box-shadow: var(--shadow-lg);
+.bootstrap-select .dropdown-menu li a:hover,
+.bootstrap-select .dropdown-menu li.selected a {
+    background-color: var(--color-primary) !important;
+    color: #ffffff !important;
 }
 
-/* Fix pour l'affichage plein écran */
-.bootstrap-select.show {
-    width: 100% !important;
+/* Correction pour les petits écrans / colonnes étroites */
+.bootstrap-select .filter-option {
+    flex: 1 1 auto;
+    text-align: left;
 }
\ No newline at end of file
diff --git a/Js/fonctions.js b/Js/fonctions.js
index 06015720..764579cf 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -91563,16 +91563,22 @@ function ui_refresh_select(selector) {
     let noneText    = (codeLangue === "en_US") ? 'Nothing selected' : 'Rien de sélectionné';
 
     if (typeof $.fn.selectpicker !== 'undefined') {
-        $el.selectpicker('destroy').selectpicker({
+        // 1. On détruit l'existant
+        $el.selectpicker('destroy');
+        
+        // 2. On réinitialise avec width: '100%'
+        $el.selectpicker({
             style: 'btn-form-select',
             liveSearch: true,
             liveSearchPlaceholder: placeholder,
             noneSelectedText: noneText,
-            width: '100%', // Assure que le bouton prend la largeur de la colonne
-            container: 'body',
-            dropdownAlignRight: 'auto',
-            // On force la taille du menu déroulant
-            size: 'auto' 
+            width: '100%', // FORCE la largeur du bouton
+            size: 'auto',
+            container: false // SURTOUT PAS de 'body' ici pour garder le contexte
         });
+
+        // 3. FORCE le rafraîchissement visuel pour corriger la largeur du menu
+        $el.selectpicker('refresh');
+        $el.selectpicker('render');
     }
 }
\ No newline at end of file