arengibook 3.1.4-main → 3.1.5-itemWithTooltip

package/dist/index.js

@@ -13488,7 +13488,7 @@ var LOCALES = {
 var css_248z$6 = "@charset \"UTF-8\";\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n/* Force une largeur à 100% de l'input Calendar */\n.datepicker-fullwidth {\n  width: 100%;\n}\n\n.datepicker-fullwidth > .dp-input-wrapper {\n  width: 100%;\n}\n.datepicker-fullwidth > .dp-input-wrapper > .p-calendar {\n  width: 100%;\n}\n\n.dp-input-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n.dp-input-wrapper .dp-clear-btn {\n  position: absolute;\n  right: 7px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 2.8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #b0b8c4;\n  z-index: 1;\n  border-radius: 50%;\n  line-height: 1;\n}\n.dp-input-wrapper .dp-clear-btn:hover {\n  color: #1a1e26;\n  background-color: rgba(0, 0, 0, 0.06);\n}\n.dp-input-wrapper .dp-clear-btn .pi {\n  font-size: 9.1px;\n}\n\n/* Application du mixin field sur l'input du Calendar */\n.p-calendar > .p-inputtext {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-calendar > .p-inputtext:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.p-calendar > .p-inputtext:focus, .p-calendar > .p-inputtext:focus-within, .p-calendar > .p-inputtext.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.p-calendar > .p-inputtext[disabled], .p-calendar > .p-inputtext.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.p-calendar > .p-inputtext[readonly], .p-calendar > .p-inputtext.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.p-calendar > .p-inputtext[readonly]:hover, .p-calendar > .p-inputtext.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.p-calendar > .p-inputtext.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.p-calendar > .p-inputtext.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.p-calendar > .p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.p-calendar > .p-inputtext:focus, .p-calendar > .p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}\n\n/* Panel invisible jusqu'au repositionnement (évite le flash position basse → haute) */\n.datepickerbook:not(.dp-ready) {\n  visibility: hidden !important;\n}\n\n/* Neutralise les styles hérités */\n.datepickerbook table,\n.datepickerbook tbody,\n.datepickerbook tr,\n.datepickerbook td,\n.datepickerbook th {\n  background-color: unset !important;\n  color: inherit !important;\n  border: none;\n}\n\n/* Restaure les couleurs et l'entete du calendrier  */\n.datepickerbook .p-datepicker {\n  background-color: #ffffff !important;\n  color: #1a1e26 !important;\n  border-radius: 7px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n}\n\n.datepickerbook .datepicker-custom-header {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  padding: 7px 10.5px;\n}\n\n.datepickerbook .datepicker-spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 11.9px;\n}\n\n.datepickerbook .dp-label {\n  margin: 3.5px 0;\n  font-weight: 500;\n}\n\n.p-datepicker .p-datepicker-title,\n.p-datepicker .p-datepicker-prev,\n.p-datepicker .p-datepicker-next {\n  display: none !important;\n}\n\n.datepickerbook .p-datepicker-header {\n  justify-content: center;\n}\n\n.datepickerbook .dp-popup {\n  position: absolute;\n  top: 100%;\n  margin-top: 3.5px;\n  background: #ffffff;\n  border: 1px solid #e0e3e8;\n  border-radius: 4px;\n  padding: 3.5px;\n  z-index: 10;\n}\n\n.datepickerbook .dp-popup-months,\n.datepickerbook .dp-popup-years {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n  gap: 3.5px;\n}\n\n.datepickerbook .dp-popup-item {\n  border: none;\n  background: transparent;\n  padding: 2.1px 5.6px;\n  cursor: pointer;\n  font-size: 11.2px;\n}\n\n.datepickerbook .dp-popup-item:hover {\n  background: #f4f5f6;\n}\n\n/*.datepickerbook .dp-header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 10.5px;\n}*/\n.datepickerbook .dp-header-part {\n  display: flex;\n  align-items: center;\n  gap: 3.5px;\n}\n\n.datepickerbook .dp-label-button {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 3.5px 0;\n}\n\n.datepickerbook.dp-monthyear-mode .dp-monthyear-header {\n  padding-bottom: 3.5px;\n}\n\n.datepickerbook {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  margin-bottom: 3.5px;\n}\n\n.datepickerbook .dp-back-button {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 12.6px;\n}\n\n.datepickerbook .dp-title {\n  font-weight: 600;\n  font-size: 12.6px;\n}\n\n/* Colonnes mois / années */\n.datepickerbook .dp-header-lists {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 7px;\n}\n\n.datepickerbook .dp-month-list,\n.datepickerbook .dp-year-list {\n  padding-right: 3.5px;\n  display: flex;\n  flex-direction: column;\n  gap: 2.1px;\n}\n\n.datepickerbook .dp-list-item:hover {\n  background: #f4f5f6;\n}\n\n.p-datepicker-header.datepicker-custom-header.dp-monthyear-header {\n  margin: auto;\n}\n\n/*.p-monthpicker*/\n.p-datepicker.dp-monthyear-mode {\n  box-shadow: none !important;\n  border-radius: 0px;\n}\n.p-datepicker.dp-monthyear-mode .dp-header-top-alt {\n  display: none !important;\n}\n\n.p-datepicker-monthpicker.dp-monthyear-mode {\n  box-shadow: none !important;\n  border-radius: 0px;\n}\n.p-datepicker-monthpicker.dp-monthyear-mode .dp-header-top-alt {\n  display: none !important;\n}\n\n.p-datepicker {\n  width: 331px !important;\n  min-width: 331px !important;\n  max-width: 331px !important;\n}\n.p-datepicker .dp-arrow {\n  border: none;\n  background-color: transparent;\n  color: #b0b8c4;\n  cursor: pointer;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-datepicker .dp-arrow:hover {\n  color: #3f3f3f;\n  background-color: rgba(63, 63, 63, 0.08);\n}\n.p-datepicker.dp-year-only {\n  box-shadow: none !important;\n  width: auto !important;\n  min-width: unset !important;\n  max-width: unset !important;\n}\n.p-datepicker.dp-year-only .dp-header-top-alt {\n  display: none !important;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header {\n  width: 205px;\n  min-width: 205px;\n  max-width: 205px;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header .dp-year-container {\n  width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container {\n  width: 100%;\n  border-top: 1px solid #e0e3e8;\n  height: 51px;\n  display: flex;\n  align-items: center;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n  border-right: 1px solid #e0e3e8;\n  border-radius: 0px 0px 0px 5px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-down {\n  border-radius: 0px 0px 5px 0px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 49%;\n  border-radius: 0px;\n  flex: 1;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-year-list {\n  width: 100%;\n  gap: 0px;\n  padding: 0px;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  border-bottom: 1px solid #3f3f3f !important;\n  font-weight: 600;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n  background-color: transparent;\n  border: none;\n  color: #1a1e26;\n  transition: 0s !important;\n  height: 25px;\n  font-size: 16px;\n  border-radius: 0px;\n  border-bottom: 1px solid #e0e3e8;\n  width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n  padding: 3px 10px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n  background-color: rgba(63, 63, 63, 0.08) !important;\n  color: #3f3f3f;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n  padding: 3px 10px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.dp-monthyear-mode .p-datepicker-group, .p-datepicker-monthpicker .p-datepicker-group, .dp-year-only .p-datepicker-group {\n  padding: 0px !important;\n  border: 0px solid transparent !important;\n}\n.dp-monthyear-mode .dp-monthyear-header, .p-datepicker-monthpicker .dp-monthyear-header, .dp-year-only .dp-monthyear-header {\n  justify-content: flex-start;\n  gap: 0;\n  background: #ffffff;\n  border: 1px solid rgba(255, 255, 255, 0.33);\n  border-radius: 8px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  padding: 0px !important;\n  width: 331px;\n  min-width: 331px;\n  max-width: 331px;\n}\n.dp-monthyear-mode .dp-header-top-alt, .p-datepicker-monthpicker .dp-header-top-alt, .dp-year-only .dp-header-top-alt {\n  width: 100%;\n  height: 50px !important;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part:first-child, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part:first-child, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part:first-child {\n  border-right: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part {\n  width: 49%;\n  height: 50px;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  color: #1a1e26;\n  font-size: 16px;\n  text-transform: capitalize;\n}\n.dp-monthyear-mode .p-datepicker-calendar-container, .p-datepicker-monthpicker .p-datepicker-calendar-container, .dp-year-only .p-datepicker-calendar-container {\n  display: none;\n}\n.dp-monthyear-mode .dp-actions, .p-datepicker-monthpicker .dp-actions, .dp-year-only .dp-actions {\n  width: 100%;\n  background-color: #ffffff;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 0px 0px 5px 5px;\n  padding: 0px 10px 10px 10px;\n}\n.dp-monthyear-mode .dp-actions .p-button:first-child, .p-datepicker-monthpicker .dp-actions .p-button:first-child, .dp-year-only .dp-actions .p-button:first-child {\n  border: 0px solid transparent;\n  color: #3f3f3f;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child, .p-datepicker-monthpicker .dp-actions .p-button:last-child, .dp-year-only .dp-actions .p-button:last-child {\n  background-color: #ffffff;\n  border: 1px solid #3f3f3f;\n  color: #3f3f3f;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child:hover, .p-datepicker-monthpicker .dp-actions .p-button:last-child:hover, .dp-year-only .dp-actions .p-button:last-child:hover {\n  background-color: #3f3f3f;\n  color: #ffffff;\n}\n.dp-monthyear-mode .dp-actions .p-button, .p-datepicker-monthpicker .dp-actions .p-button, .dp-year-only .dp-actions .p-button {\n  padding: 10px 15px;\n}\n.dp-monthyear-mode .dp-actions .p-button .p-button-icon, .p-datepicker-monthpicker .dp-actions .p-button .p-button-icon, .dp-year-only .dp-actions .p-button .p-button-icon {\n  display: none;\n}\n.dp-monthyear-mode .dp-header-lists, .p-datepicker-monthpicker .dp-header-lists, .dp-year-only .dp-header-lists {\n  width: calc(100% - 20px);\n  height: 300px;\n  display: flex;\n  align-items: flex-start;\n  gap: initial;\n  padding: 0px;\n  margin: 10px;\n}\n.dp-monthyear-mode .dp-month-list, .p-datepicker-monthpicker .dp-month-list, .dp-year-only .dp-month-list {\n  transition: none !important;\n  border: 1px solid #e0e3e8;\n  margin: 0px 10px 0px 0px !important;\n  gap: 0px;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item-active, .p-datepicker-monthpicker .dp-month-list .dp-list-item-active, .dp-year-only .dp-month-list .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  border-bottom: 1px solid #3f3f3f !important;\n  font-weight: 600;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .dp-year-only .dp-month-list .dp-list-item {\n  border: none;\n  height: 25px;\n  background-color: transparent;\n  font-size: 16px;\n  text-transform: capitalize;\n  border-radius: 0px;\n  margin: 0px;\n  padding: 3px;\n  width: calc(100% - 0px);\n  border-bottom: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:last-child, .p-datepicker-monthpicker .dp-month-list .dp-list-item:last-child, .dp-year-only .dp-month-list .dp-list-item:last-child {\n  border: none;\n}\n.dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-year-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  border: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container, .dp-year-only .dp-year-container .dp-arrow-container {\n  width: 100%;\n  border-top: 1px solid #e0e3e8;\n  height: 51px;\n  display: flex;\n  align-items: center;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-up, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-up, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n  border-right: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-year, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-year, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 49%;\n  border-radius: 0px;\n  flex: 1;\n}\n.dp-monthyear-mode .dp-year-container .dp-year-list, .p-datepicker-monthpicker .dp-year-container .dp-year-list, .dp-year-only .dp-year-container .dp-year-list {\n  width: 100%;\n  gap: 0px;\n  padding: 0px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item-active, .p-datepicker-monthpicker .dp-year-container .dp-list-item-active, .dp-year-only .dp-year-container .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  border-bottom: 1px solid #3f3f3f !important;\n  font-weight: 600;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n  background-color: transparent;\n  border: none;\n  color: #1a1e26;\n  transition: 0s !important;\n  height: 25px;\n  font-size: 16px;\n  border-radius: 0px;\n  border-bottom: 1px solid #e0e3e8;\n  width: 100%;\n  padding: 3px 10px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big), .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big), .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n  padding: 3px 10px !important;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n  background-color: rgba(63, 63, 63, 0.08) !important;\n  color: #3f3f3f;\n}\n.dp-monthyear-mode .dp-month-list, .dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-month-list, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-month-list, .dp-year-only .dp-year-container {\n  width: 49%;\n  flex: 1;\n  margin: 0px;\n  background-color: transparent;\n  padding: 0px;\n  height: 100%;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-month-list .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n  cursor: pointer;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .dp-monthyear-mode .dp-year-container .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover, .dp-year-only .dp-year-container .dp-list-item:hover {\n  color: #3f3f3f;\n  border-bottom: 1px solid rgba(63, 63, 63, 0.08);\n}\n.dp-monthyear-mode .dp-month-list:hover, .dp-monthyear-mode .dp-year-container:hover, .p-datepicker-monthpicker .dp-month-list:hover, .p-datepicker-monthpicker .dp-year-container:hover, .dp-year-only .dp-month-list:hover, .dp-year-only .dp-year-container:hover {\n  background-color: rgba(255, 255, 255, 0.31);\n}\n\n.p-datepicker {\n  padding: 0px;\n  background-color: #ffffff;\n  box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.21);\n  width: 321px;\n}\n.p-datepicker .p-datepicker-group-container {\n  width: 100%;\n}\n.p-datepicker .p-datepicker-group {\n  background: #ffffff;\n  border-radius: 8px;\n  padding-bottom: 1px;\n}\n.p-datepicker .p-datepicker-header {\n  padding: 0px;\n  /*position: fixed;\n  left: 0;*/\n  height: 50px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #e0e3e8;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month {\n  border-right: 1px solid #e0e3e8;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month .dp-arrow-left {\n  border-radius: 7px 0px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-year .dp-arrow-right {\n  border-radius: 0px 7px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part {\n  width: 49%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow {\n  width: 30px;\n  height: 49px;\n  min-width: 30px;\n  min-height: 49px;\n  max-width: 30px;\n  max-height: 49px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n  color: #3f3f3f;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button {\n  width: calc(100% - 60px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50px;\n  margin: 0px;\n  text-transform: capitalize;\n  color: #3f3f3f;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n  font-weight: 800;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part:hover {\n  background-color: rgba(255, 255, 255, 0.31);\n}\n.p-datepicker .p-datepicker-calendar-container {\n  padding: 10px;\n  /* margin-top: 50px;*/\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar {\n  margin: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th {\n  padding: 2px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th span {\n  color: #1a1e26;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today {\n  background-color: transparent;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today span {\n  background-color: transparent;\n  font-weight: 600;\n  color: #3f3f3f;\n  border: 1px solid #3f3f3f;\n  text-decoration: underline;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td {\n  padding: 0px;\n  border: 1px solid #f4f5f6;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-highlight {\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.31);\n  font-weight: 600;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n  background-color: transparent !important;\n  font-size: 12px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span {\n  margin: 0;\n  width: 100%;\n  border-radius: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span:hover {\n  background-color: rgba(63, 63, 63, 0.08) !important;\n  color: #3f3f3f;\n  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.31);\n}\n\n/* WRAPPER GLOBAL */\n.dp-monthyear-header {\n  width: 360px;\n  background: #ffffff;\n  border-radius: 18px;\n  padding: 24px 26px;\n  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);\n  display: flex;\n  flex-direction: column;\n  font-family: Inter, sans-serif;\n  gap: 22px;\n}\n\n/* TITRE */\n.dp-header-top-alt .dp-title {\n  font-size: 21.7px;\n  font-weight: 700;\n  text-align: center;\n  color: #1a1e26;\n  margin-bottom: 2px;\n}\n\n/* HOVER ANNÉES */\n.datepickerbook .dp-year-list .dp-list-item:hover {\n  background: rgba(63, 63, 63, 0.15);\n}\n\n.dp-month-list .dp-list-item-active {\n  background: #ffffff;\n  font-weight: 600;\n}\n\n/* Centrage parfait */\n.dp-year-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  padding: 0;\n}\n\n/* Année normale */\n.dp-year-list .dp-list-item {\n  font-size: 16.8px;\n  color: #b0b8c4;\n  padding: 4px 0;\n  cursor: pointer;\n  transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.dp-year-list .dp-list-item:hover {\n  color: #1a1e26;\n}\n\n/* FLECHES */\n.dp-arrow-up,\n.dp-arrow-down {\n  font-size: 21px;\n  color: #1a1e26;\n  padding: 6px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  margin: 4px 0;\n}\n\n/* ACTIONS BAS – GROS BOUTONS */\n.dp-actions {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  padding-top: 5px;\n  padding-bottom: 10px;\n}\n\n/* TITRE MOIS ANNEE */\n.dp-header-top {\n  margin: auto;\n}\n\n/*DATEPICKER MENSUEL CUSTOMISE*/\n.p-monthpicker {\n  display: none !important;\n  margin: auto;\n}\n\n.datepickerbook .p-datepicker-header {\n  border: none !important;\n  border-bottom: none !important;\n  box-shadow: none !important;\n  background: transparent !important;\n}\n\n.datepickerbook.p-datepicker {\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n/*DATEPICKER ANNUEL CUSTOMISE*/\n.p-yearpicker {\n  display: none !important;\n}\n\n.datepickerbook .p-datepicker-footer {\n  margin-bottom: 20px;\n}\n\n.dp-error-message {\n  color: red !important;\n  font-style: italic !important;\n  display: block !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  white-space: normal !important;\n  word-break: break-word !important;\n  overflow-wrap: break-word !important;\n  line-height: 1.4 !important;\n  font-size: 12.25px !important;\n  margin-top: 2px !important;\n  float: none !important;\n  position: static !important;\n}";
 styleInject(css_248z$6);
 
-var _excluded$4 = ["value", "onChange", "placeholder", "dateFormat", "displayMask", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear", "reopenOnClick", "invalidDateMessage", "onPanelShow", "onPanelHide"];
+var _excluded$5 = ["value", "onChange", "placeholder", "dateFormat", "displayMask", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear", "reopenOnClick", "invalidDateMessage", "onPanelShow", "onPanelHide"];
 var normalizeDate = function normalizeDate(v) {
   if (!v) return null;
   return v instanceof Date ? v : new Date(v);
@@ -13542,7 +13542,7 @@ var DatePicker = function DatePicker(_ref) {
     _ref.invalidDateMessage;
     var onPanelShow = _ref.onPanelShow,
     onPanelHide = _ref.onPanelHide,
-    rest = _objectWithoutProperties$1(_ref, _excluded$4);
+    rest = _objectWithoutProperties$1(_ref, _excluded$5);
   var _useState = useState(function () {
       return normalizeDate(value);
     }),
@@ -33444,7 +33444,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
 });
 HeaderCell.displayName = 'HeaderCell';
 
-var _excluded$3 = ["unstyled", "__TYPE", "ptOptions"];
+var _excluded$4 = ["unstyled", "__TYPE", "ptOptions"];
 function ownKeys$1$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1$4(Object(t), true).forEach(function (r) { _defineProperty$7(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TableHeader = /*#__PURE__*/React.memo(function (props) {
@@ -33675,7 +33675,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
           unstyled = _RowBase$getProps.unstyled;
           _RowBase$getProps.__TYPE;
           _RowBase$getProps.ptOptions;
-          var rest = _objectWithoutProperties(_RowBase$getProps, _excluded$3);
+          var rest = _objectWithoutProperties(_RowBase$getProps, _excluded$4);
         var headerRowProps = mergeProps({
           role: 'row'
         }, unstyled ? _objectSpread$1$4({
@@ -37016,8 +37016,13 @@ var PopupPresets = {
   }
 };
 
+var css_248z$5 = "@charset \"UTF-8\";\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.dropdownbook.p-dropdown-panel {\n  z-index: 999999 !important;\n}\n\n.p-tooltip {\n  z-index: 1000000 !important;\n}\n\n.dropdown-tooltip-item {\n  position: relative;\n  width: 100%;\n  cursor: pointer;\n}\n\n/* ===== ItemWithTooltip : deux colonnes (libellé à gauche / picto i à l'extrême droite) ===== */\n/* PrimeReact enveloppe le template dans un span inline (.p-dropdown-item-label)\n   qui empêche l'item de s'étirer sur toute la largeur du panel */\n.p-dropdown-item .p-dropdown-item-label:has(.dropdown-item-two-cols) {\n  display: block;\n  width: 100%;\n}\n\n.p-dropdown-items .p-dropdown-item:has(.dropdown-item-two-cols) {\n  padding-right: 10px;\n}\n\n.dropdown-item-two-cols {\n  display: flex !important;\n  align-items: center;\n  justify-content: space-between;\n  width: 100% !important;\n  max-width: none !important;\n}\n\n.dropdown-item-info-icon {\n  font-size: 14px;\n  color: #6b7280;\n}\n\n/* Application du mixin field sur le wrapper du Dropdown */\n.dropdown-container .p-dropdown {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dropdown-container .p-dropdown:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.dropdown-container .p-dropdown:focus, .dropdown-container .p-dropdown:focus-within, .dropdown-container .p-dropdown.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.dropdown-container .p-dropdown[disabled], .dropdown-container .p-dropdown.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.dropdown-container .p-dropdown[readonly], .dropdown-container .p-dropdown.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.dropdown-container .p-dropdown[readonly]:hover, .dropdown-container .p-dropdown.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.dropdown-container .p-dropdown.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.dropdown-container .p-dropdown.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.dropdown-container .p-dropdown {\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n\n.dd-search-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.dd-search-row [class*=-filter-container] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n.dd-search-row [class*=-filter-container] .p-inputtext {\n  width: 100%;\n  height: 32px;\n  padding: 0 24.5px 0 12px;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n.dd-search-row [class*=-filter-container] [class*=-filter-icon] {\n  right: 10.5px;\n  color: #b0b8c4;\n}\n\n.dd-sort-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dd-sort-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n\n.dropdownbook .p-dropdown-header:has(.dd-search-row) {\n  padding: 0;\n}\n\n/* ===== Badge couleur dans les items ===== */\n.dd-color-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 4px 10px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n  cursor: default;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: #f4f5f6;\n  color: #1a1e26;\n  border: 1px solid #e0e3e8;\n  border-color: var(--badge-color, #e0e3e8);\n  background-color: color-mix(in srgb, var(--badge-color, #f4f5f6) 50%, transparent);\n}\n.dd-color-badge.is-selected {\n  background-color: var(--badge-color, #f4f5f6);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.p-dropdown-item:hover .dd-color-badge {\n  background-color: var(--badge-color) !important;\n}\n\n/* ===== Override PrimeReact default item colors ===== */\n.dropdownbook .p-dropdown-items .p-dropdown-item:not(.p-highlight):hover {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight {\n  background: rgba(63, 63, 63, 0.08) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {\n  background: rgba(63, 63, 63, 0.12) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-focus {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n\n/* ===== Override PrimeReact filter input focus ===== */\n.dropdownbook .p-dropdown-filter.p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.dropdownbook .p-dropdown-filter.p-inputtext:focus, .dropdownbook .p-dropdown-filter.p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}";
+styleInject(css_248z$5);
+
+var _excluded$3 = ["style", "className"],
+  _excluded2$2 = ["class"];
 var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
-  var _window$Translator, _window$Translator2;
+  var _computedOptions$, _window$Translator, _window$Translator2;
   var value = _ref.value,
     options = _ref.options,
     _ref$placeholder = _ref.placeholder,
@@ -37028,6 +37033,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     optionLabel = _ref$optionLabel === void 0 ? 'label' : _ref$optionLabel,
     _ref$optionValue = _ref.optionValue,
     optionValue = _ref$optionValue === void 0 ? 'value' : _ref$optionValue,
+    optionsUrl = _ref.optionsUrl,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     _ref$errorMessage = _ref.errorMessage,
@@ -37039,7 +37045,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _ref$editable = _ref.editable,
     editable = _ref$editable === void 0 ? false : _ref$editable,
     _ref$filter = _ref.filter,
-    filter = _ref$filter === void 0 ? filter : _ref$filter,
+    filter = _ref$filter === void 0 ? false : _ref$filter,
     _ref$selectMetaConfig = _ref.selectMetaConfig,
     selectMetaConfig = _ref$selectMetaConfig === void 0 ? {
       labelStyle: null,
@@ -37048,7 +37054,79 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _ref$objValue = _ref.objValue,
     objValue = _ref$objValue === void 0 ? null : _ref$objValue,
     _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$attr = _ref.attr,
+    attr = _ref$attr === void 0 ? {} : _ref$attr,
+    _ref$choice_attr = _ref.choice_attr,
+    choice_attr = _ref$choice_attr === void 0 ? function () {
+      return {};
+    } : _ref$choice_attr,
+    _ref$optionClassname = _ref.optionClassname,
+    optionClassname = _ref$optionClassname === void 0 ? null : _ref$optionClassname,
+    _ref$valueClassname = _ref.valueClassname,
+    valueClassname = _ref$valueClassname === void 0 ? null : _ref$valueClassname,
+    _ref$isGroupedOption = _ref.isGroupedOption,
+    isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
+    _ref$showTooltipGroup = _ref.showTooltipGroup,
+    showTooltipGroup = _ref$showTooltipGroup === void 0 ? false : _ref$showTooltipGroup,
+    _ref$prevTextShowTool = _ref.prevTextShowTooltip,
+    prevTextShowTooltip = _ref$prevTextShowTool === void 0 ? null : _ref$prevTextShowTool,
+    onSearch = _ref.onSearch,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$loading = _ref.loading,
+    externalLoading = _ref$loading === void 0 ? false : _ref$loading,
+    status = _ref.status,
+    _ref$optionStyle = _ref.optionStyle,
+    optionStyle = _ref$optionStyle === void 0 ? {
+      maxWidth: '250px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    } : _ref$optionStyle,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    _ref$groupedItemTempl = _ref.groupedItemTemplateConfig,
+    groupedItemTemplateConfig = _ref$groupedItemTempl === void 0 ? {
+      showIcon: false,
+      iconKey: 'icon',
+      showImage: false,
+      imageKey: 'image',
+      imageStyle: null,
+      labelStyle: null,
+      generalIcon: null,
+      generalImage: null
+    } : _ref$groupedItemTempl;
+    _ref.isSelectMeta;
+    var hasInfoLine = _ref.hasInfoLine,
+    InfoLineValue = _ref.InfoLineValue,
+    _ref$selectConfig = _ref.selectConfig,
+    selectConfig = _ref$selectConfig === void 0 ? {
+      labelStyle: null,
+      generalIcon: null
+    } : _ref$selectConfig,
+    withIcon = _ref.withIcon,
+    withColor = _ref.withColor,
+    _ref$truncateAt = _ref.truncateAt,
+    truncateAt = _ref$truncateAt === void 0 ? null : _ref$truncateAt;
+    _ref.virtualScroll;
+    var virtualScrollerOptions = _ref.virtualScrollerOptions,
+    _ref$enableItemToolti = _ref.enableItemTooltip,
+    enableItemTooltip = _ref$enableItemToolti === void 0 ? false : _ref$enableItemToolti,
+    _ref$enableItemLink = _ref.enableItemLink,
+    enableItemLink = _ref$enableItemLink === void 0 ? false : _ref$enableItemLink,
+    _ref$openOnHover = _ref.openOnHover,
+    openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
+    _ref$itemsCheckedToTh = _ref.itemsCheckedToTheTop,
+    itemsCheckedToTheTop = _ref$itemsCheckedToTh === void 0 ? false : _ref$itemsCheckedToTh,
+    _ref$enableSorting = _ref.enableSorting,
+    enableSorting = _ref$enableSorting === void 0 ? false : _ref$enableSorting,
+    _ref$enableSecondaryL = _ref.enableSecondaryLabel,
+    enableSecondaryLabel = _ref$enableSecondaryL === void 0 ? false : _ref$enableSecondaryL,
+    _ref$secondaryLabelKe = _ref.secondaryLabelKey,
+    secondaryLabelKey = _ref$secondaryLabelKe === void 0 ? 'profession' : _ref$secondaryLabelKe,
+    _ref$subItem = _ref.subItem,
+    subItem = _ref$subItem === void 0 ? false : _ref$subItem;
   var _useState = useState(null),
     _useState2 = _slicedToArray$d(_useState, 2),
     optionSelected = _useState2[0],
@@ -37066,6 +37144,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     inputValue = _useState8[0],
     setInputValue = _useState8[1];
   var dropdownRef = useRef(null);
+  var dropdownComposantRef = useRef(null);
   useRef(null);
   var clickedFromList = useRef(false);
   var _useState9 = useState(''),
@@ -37076,15 +37155,74 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _useState10 = _slicedToArray$d(_useState1, 2),
     showRequiredError = _useState10[0],
     setShowRequiredError = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray$d(_useState11, 2),
+    tooltipKey = _useState12[0],
+    setTooltipKey = _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray$d(_useState13, 2),
+    sortOrder = _useState14[0],
+    setSortOrder = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray$d(_useState15, 2),
+    isDropdownOpen = _useState16[0],
+    setIsDropdownOpen = _useState16[1];
+  var _useState17 = useState(''),
+    _useState18 = _slicedToArray$d(_useState17, 2),
+    selectedGroupLabel = _useState18[0],
+    setSelectedGroupLabel = _useState18[1];
 
   // 🔹 Lazy loading
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray$d(_useState11, 2),
-    loading = _useState12[0],
-    setLoading = _useState12[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray$d(_useState19, 2),
+    loading = _useState20[0],
+    setLoading = _useState20[1];
   var loadLazyTimeout = useRef();
-  useRef(1);
-  useRef('');
+  var currentPageRef = useRef(1);
+  var hasMoreRef = useRef(true);
+  var isLoadingRef = useRef(false);
+  var searchTermRef = useRef('');
+  var loadedOptionsRef = useRef([]);
+  var updateLoadedOptions = function updateLoadedOptions(opts) {
+    loadedOptionsRef.current = opts;
+    setLoadedOptions(opts);
+  };
+  var inverseColor = function inverseColor(hexColor) {
+    var r = parseInt(hexColor.substr(1, 2), 16);
+    var g = parseInt(hexColor.substr(3, 2), 16);
+    var b = parseInt(hexColor.substr(5, 2), 16);
+    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.18 ? '#000000' : '#FFFFFF';
+  };
+  var truncateLabel = function truncateLabel(label) {
+    if (!label || typeof label !== 'string') return label;
+    if (!truncateAt || label.length <= truncateAt) return label;
+    return label.slice(0, truncateAt) + '…';
+  };
+
+  // PrimeReact 10 ignore la prop `escape` : sa Tooltip écrit toujours via
+  // createTextNode. Un MutationObserver rescande les `.p-tooltip-text` pour
+  // convertir le texte contenant du HTML en innerHTML rendu.
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var rewrite = function rewrite() {
+      document.querySelectorAll('.p-tooltip .p-tooltip-text').forEach(function (el) {
+        var raw = el.textContent;
+        if (raw && /<[a-z][\s\S]*>/i.test(raw) && el.innerHTML !== raw) {
+          el.innerHTML = raw;
+        }
+      });
+    };
+    var observer = new MutationObserver(rewrite);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [enableItemTooltip]);
   var optionTemplate = function optionTemplate(option) {
     var _ref2 = selectMetaConfig || {},
       labelStyle = _ref2.labelStyle,
@@ -37092,17 +37230,115 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     var styleLabel = {
       marginLeft: '10px'
     };
-    return /*#__PURE__*/React__default.createElement("div", {
+    var tooltipProps = enableItemTooltip ? {
+      'data-pr-tooltip': (option === null || option === void 0 ? void 0 : option.tooltip) || (option === null || option === void 0 ? void 0 : option.description),
+      'data-pr-position': 'right'
+    } : {};
+    var tooltipContent = (option === null || option === void 0 ? void 0 : option.tooltip) || (option === null || option === void 0 ? void 0 : option.description);
+    var hasTooltip = Boolean(enableItemTooltip && tooltipContent);
+    var infoIcon = hasTooltip ? /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-info-circle dropdown-item-info-icon"
+    }) : null;
+    var secondaryLabel = enableSecondaryLabel ? option === null || option === void 0 ? void 0 : option[secondaryLabelKey] : null;
+    var isLink = enableItemLink && (option === null || option === void 0 ? void 0 : option.link);
+    var handleLinkClick = function handleLinkClick(e) {
+      if (isLink) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(option.link, '_blank', 'noopener,noreferrer');
+      }
+    };
+    var optionAttrs = typeof choice_attr === 'function' ? choice_attr(option) : {};
+    var attrStyle = optionAttrs.style,
+      attrClassName = optionAttrs.className,
+      restAttrs = _objectWithoutProperties$1(optionAttrs, _excluded$3);
+    var className = "flex align-items-center dropdown-tooltip-item ".concat(attrClassName || optionClassname || '').trim();
+    if (hasTooltip) {
+      // Deux colonnes : libellé à l'extrême gauche, picto "i" à l'extrême droite.
+      // Le tooltip est porté par l'item entier et pointe sur le picto.
+      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
+        onClick: function onClick() {
+          clickedFromList.current = true;
+        },
+        className: "".concat(className, " dropdown-item-two-cols").trim(),
+        style: _objectSpread2({
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          fontSize: '14px',
+          maxWidth: 'none',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          width: '100%',
+          justifyContent: 'space-between'
+        }, attrStyle)
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "dropdown-item-label-col",
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          minWidth: 0,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        }
+      }, option === null || option === void 0 ? void 0 : option[optionLabel]), /*#__PURE__*/React__default.createElement("div", {
+        className: "dropdown-item-info-col",
+        style: {
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center',
+          marginLeft: '8px'
+        }
+      }, infoIcon));
+    }
+    if (withIcon || withColor) {
+      var _ref3 = selectConfig || {},
+        cfgLabelStyle = _ref3.labelStyle,
+        cfgGeneralIcon = _ref3.generalIcon;
+      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
+        onClick: function onClick() {
+          clickedFromList.current = true;
+        },
+        className: className,
+        style: _objectSpread2(_objectSpread2({
+          fontSize: '14px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }, optionStyle), attrStyle)
+      }), withIcon && cfgGeneralIcon && /*#__PURE__*/React__default.createElement("i", {
+        style: {
+          color: option === null || option === void 0 ? void 0 : option.color
+        },
+        className: cfgGeneralIcon
+      }), withColor && option !== null && option !== void 0 && option.color ? /*#__PURE__*/React__default.createElement("span", {
+        className: "dd-color-badge".concat(optionSelected === (option === null || option === void 0 ? void 0 : option[optionValue]) ? ' is-selected' : ''),
+        style: {
+          '--badge-color': option.color,
+          color: inverseColor(option.color)
+        }
+      }, option === null || option === void 0 ? void 0 : option[optionLabel]) : /*#__PURE__*/React__default.createElement("span", {
+        style: _objectSpread2(_objectSpread2({}, cfgLabelStyle), subItem ? {
+          flex: 1
+        } : {})
+      }, option === null || option === void 0 ? void 0 : option[optionLabel]));
+    }
+    return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
       onClick: function onClick() {
         clickedFromList.current = true;
       },
-      className: "flex align-items-center",
-      style: {
+      className: className,
+      style: _objectSpread2({
         padding: '6px 10px',
         height: 'auto'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: _objectSpread2({
+      }, attrStyle)
+    }), /*#__PURE__*/React__default.createElement("div", {
+      style: _objectSpread2(_objectSpread2({}, subItem ? {
+        flex: 1
+      } : {}), {}, {
         fontSize: '15px',
         fontWeight: 'bold'
       }, labelStyle)
@@ -37113,9 +37349,185 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       className: generalIcon
     }), /*#__PURE__*/React__default.createElement("span", {
       style: styleLabel
-    }, option === null || option === void 0 ? void 0 : option[optionLabel])));
+    }, option === null || option === void 0 ? void 0 : option[optionLabel]), secondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+      onClick: isLink ? handleLinkClick : undefined,
+      onMouseDown: isLink ? function (e) {
+        return e.stopPropagation();
+      } : undefined,
+      style: {
+        cursor: isLink ? 'pointer' : 'default',
+        marginTop: '2px',
+        width: 'fit-content'
+      }
+    }, /*#__PURE__*/React__default.createElement("small", {
+      style: {
+        opacity: 0.75,
+        fontSize: '12px',
+        textDecoration: isLink ? 'underline' : 'none',
+        color: isLink ? '#3b82f6' : 'inherit',
+        fontWeight: 'normal'
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: subItem ? {} : {
+        marginLeft: '10px'
+      }
+    }, secondaryLabel)))));
+  };
+  var groupedItemTemplate = function groupedItemTemplate(option) {
+    var _ref4 = groupedItemTemplateConfig || {},
+      showImage = _ref4.showImage,
+      imageKey = _ref4.imageKey,
+      imageStyle = _ref4.imageStyle,
+      showIcon = _ref4.showIcon,
+      iconKey = _ref4.iconKey,
+      labelStyle = _ref4.labelStyle,
+      generalIcon = _ref4.generalIcon,
+      generalImage = _ref4.generalImage;
+    var icon = option.value && option.value[iconKey];
+    var styleLabel = generalIcon || showImage && option[imageKey] || showIcon && icon ? {
+      marginLeft: '10px'
+    } : {};
+    if (option.group) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex align-items-center"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle)
+      }, generalIcon && /*#__PURE__*/React__default.createElement("i", {
+        className: generalIcon,
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle)
+      }), generalImage && /*#__PURE__*/React__default.createElement("img", {
+        alt: "General",
+        src: generalImage,
+        style: imageStyle || {
+          width: '18px',
+          marginRight: '0.5rem'
+        },
+        className: "mr-2"
+      }), showImage && option[imageKey] && /*#__PURE__*/React__default.createElement("img", {
+        alt: option.label,
+        src: option[imageKey],
+        style: imageStyle || {
+          width: '18px',
+          marginRight: '0.5rem'
+        },
+        className: "mr-2"
+      }), showIcon && icon && /*#__PURE__*/React__default.createElement("i", {
+        className: "mr-2 ".concat(icon),
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle)
+      }), /*#__PURE__*/React__default.createElement("span", {
+        style: styleLabel
+      }, option.label)));
+    }
+    return null;
   };
-  var isInvalidEffective = invalid || showRequiredError;
+  var panelFooterTemplate = function panelFooterTemplate() {
+    if (InfoLineValue) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          padding: '8px'
+        }
+      }, /*#__PURE__*/React__default.createElement("b", null, InfoLineValue));
+    }
+  };
+  var isInvalidEffective = invalid || status === 'error' || showRequiredError;
+
+  // 🔹 Chargement des options depuis une URL (même contrat que MultiSelectMetaAsync)
+  var fetchOptionsFromUrl = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var search,
+        _ref6,
+        _ref6$page,
+        page,
+        length,
+        start,
+        queryParams,
+        response,
+        responseJSON,
+        dataAjax,
+        mappedOptions,
+        hasMore,
+        _args = arguments,
+        _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+            _ref6 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref6$page = _ref6.page, page = _ref6$page === void 0 ? 1 : _ref6$page;
+            _context.p = 1;
+            length = 25;
+            start = (page - 1) * length;
+            queryParams = new URLSearchParams();
+            if (search) queryParams.append('search[value]', search);
+            queryParams.append('start', start);
+            queryParams.append('length', length);
+            _context.n = 2;
+            return fetch("".concat(optionsUrl, "?").concat(queryParams.toString()));
+          case 2:
+            response = _context.v;
+            if (response.ok) {
+              _context.n = 4;
+              break;
+            }
+            if (!(response.status === 404)) {
+              _context.n = 3;
+              break;
+            }
+            hasMoreRef.current = false;
+            return _context.a(2, {
+              options: [],
+              hasMore: false
+            });
+          case 3:
+            throw new Error("Erreur HTTP: ".concat(response.status));
+          case 4:
+            _context.n = 5;
+            return response.json();
+          case 5:
+            responseJSON = _context.v;
+            dataAjax = responseJSON.data || [];
+            mappedOptions = dataAjax.map(function (opt) {
+              if (opt.hasOwnProperty('color') && opt.color !== null && opt.color.length > 0) {
+                opt.color = opt.color.toLowerCase();
+              } else {
+                delete opt.color;
+              }
+              opt.label = opt.nom !== undefined && opt.nom !== null ? opt.nom : opt.label;
+              opt.value = opt.id;
+              return opt;
+            });
+            hasMore = start + dataAjax.length < responseJSON.recordsTotal;
+            return _context.a(2, {
+              options: mappedOptions,
+              hasMore: hasMore,
+              additional: {
+                page: page + 1
+              }
+            });
+          case 6:
+            _context.p = 6;
+            _t = _context.v;
+            console.error("Erreur lors de la récupération des options :", _t);
+            return _context.a(2, {
+              options: [],
+              hasMore: false
+            });
+        }
+      }, _callee, null, [[1, 6]]);
+    }));
+    return function fetchOptionsFromUrl() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var loadOptions = typeof options === 'function' ? options : fetchOptionsFromUrl;
   var style = {
     border: isInvalidEffective ? '1px solid red' : '1px solid #ccc',
     width: '100%',
@@ -37126,36 +37538,38 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
   }, [optionSelected]);
   useEffect(function () {
     setOptionSelected(objValue ? objValue === null || objValue === void 0 ? void 0 : objValue[optionValue] : value !== null && value !== void 0 ? value : null);
+    currentPageRef.current = 1;
+    hasMoreRef.current = true;
+    isLoadingRef.current = false;
     var loadInitialOptions = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var result, _result$options, exists;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var result, initialOpts, exists;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
-              _context.n = 1;
-              return options('', [], {
+              _context2.n = 1;
+              return loadOptions('', [], {
                 page: 1
               });
             case 1:
-              result = _context.v;
-              setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+              result = _context2.v;
+              hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+              initialOpts = (result === null || result === void 0 ? void 0 : result.options) || [];
               if (objValue) {
-                exists = result === null || result === void 0 || (_result$options = result.options) === null || _result$options === void 0 ? void 0 : _result$options.some(function (opt) {
+                exists = initialOpts.some(function (opt) {
                   return opt[optionValue] === objValue[optionValue];
                 });
-                if (!exists) {
-                  setLoadedOptions(function (prev) {
-                    return [].concat(_toConsumableArray$a(prev), [objValue]);
-                  });
-                }
+                updateLoadedOptions(exists ? initialOpts : [].concat(_toConsumableArray$a(initialOpts), [objValue]));
+              } else {
+                updateLoadedOptions(initialOpts);
               }
             case 2:
-              return _context.a(2);
+              return _context2.a(2);
           }
-        }, _callee);
+        }, _callee2);
       }));
       return function loadInitialOptions() {
-        return _ref3.apply(this, arguments);
+        return _ref7.apply(this, arguments);
       };
     }();
     loadInitialOptions();
@@ -37163,7 +37577,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [options, objValue, value]);
+  }, [options, optionsUrl, objValue, value]);
   var handleClickOutside = function handleClickOutside(event) {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsEditing(false);
@@ -37181,7 +37595,39 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       }
     };
   }, [dropdownRef.current]);
+  useEffect(function () {
+    if (enableItemTooltip) {
+      setTooltipKey(function (prevKey) {
+        return prevKey + 1;
+      });
+    }
+  }, [loadedOptions, enableItemTooltip, optionSelected]);
+  var getSelectedGroupLabel = function getSelectedGroupLabel(selectedValue) {
+    if (!isGroupedOption || !selectedValue) return '';
+    var _iterator = _createForOfIteratorHelper$7(loadedOptions),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var group = _step.value;
+        if (showTooltipGroup && group.items && group.items.some(function (item) {
+          return item.value === selectedValue;
+        })) {
+          if (prevTextShowTooltip) return prevTextShowTooltip + ' ' + group.label;
+          return group.label;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return '';
+  };
+  useEffect(function () {
+    if (optionSelected) setSelectedGroupLabel(getSelectedGroupLabel(optionSelected));
+  }, [optionSelected, loadedOptions]);
   var handleChange = function handleChange(e) {
+    if (readOnly) return;
     setOptionSelected(e.value);
     if (clickedFromList.current) {
       var _selected$optionLabel;
@@ -37192,69 +37638,92 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       setInputValue((_selected$optionLabel = selected === null || selected === void 0 ? void 0 : selected[optionLabel]) !== null && _selected$optionLabel !== void 0 ? _selected$optionLabel : '');
     }
     clickedFromList.current = false;
-    if (onChange) onChange(e.value);
+    if (typeof onChange === 'function') {
+      onChange(e.value);
+    } else if (typeof onChange === 'string' && typeof window[onChange] === 'function') {
+      window[onChange](e.value);
+    }
   };
   var handleClear = function handleClear() {
     setOptionSelected(null);
     setInputValue('');
-    if (onChange) onChange(null);
-    options('', [], {
+    if (typeof onChange === 'function') {
+      onChange(null);
+    } else if (typeof onChange === 'string' && typeof window[onChange] === 'function') {
+      window[onChange](null);
+    }
+    searchTermRef.current = '';
+    currentPageRef.current = 1;
+    hasMoreRef.current = true;
+    isLoadingRef.current = false;
+    loadOptions('', [], {
       page: 1
     }).then(function (result) {
-      setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+      hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+      updateLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
     });
   };
   var handleInputChange = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
-      var search, result, _result$options2, _result, filteredOptions;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.n) {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
+      var search, result, _result$options, _result, filteredOptions;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
           case 0:
             search = e.target.value;
             setInputValue(search);
+            if (typeof onSearch === 'function') onSearch(search);
+            searchTermRef.current = search;
+            currentPageRef.current = 1;
+            hasMoreRef.current = true;
+            isLoadingRef.current = false;
             if (search) {
-              _context2.n = 2;
+              _context3.n = 2;
               break;
             }
-            _context2.n = 1;
-            return options('', [], {
+            _context3.n = 1;
+            return loadOptions('', [], {
               page: 1
             });
           case 1:
-            result = _context2.v;
-            setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
-            _context2.n = 4;
+            result = _context3.v;
+            hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+            updateLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+            _context3.n = 4;
             break;
           case 2:
-            _context2.n = 3;
-            return options(search, [], {
+            _context3.n = 3;
+            return loadOptions(search, [], {
               page: 1
             });
           case 3:
-            _result = _context2.v;
-            filteredOptions = (_result === null || _result === void 0 || (_result$options2 = _result.options) === null || _result$options2 === void 0 ? void 0 : _result$options2.filter(function (opt) {
+            _result = _context3.v;
+            hasMoreRef.current = (_result === null || _result === void 0 ? void 0 : _result.hasMore) !== false;
+            filteredOptions = (_result === null || _result === void 0 || (_result$options = _result.options) === null || _result$options === void 0 ? void 0 : _result$options.filter(function (opt) {
               return opt[optionLabel].toLowerCase().includes(search.toLowerCase());
             })) || [];
-            setLoadedOptions(filteredOptions);
+            updateLoadedOptions(filteredOptions);
           case 4:
-            return _context2.a(2);
+            return _context3.a(2);
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return function handleInputChange(_x) {
-      return _ref4.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
+  var handleMouseEnter = function handleMouseEnter() {
+    var _dropdownComposantRef;
+    if (!openOnHover || disabled || readOnly) return;
+    (_dropdownComposantRef = dropdownComposantRef.current) === null || _dropdownComposantRef === void 0 || _dropdownComposantRef.show();
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    var _dropdownComposantRef2;
+    if (!openOnHover) return;
+    (_dropdownComposantRef2 = dropdownComposantRef.current) === null || _dropdownComposantRef2 === void 0 || _dropdownComposantRef2.hide();
+  };
   var selectedOption = loadedOptions.find(function (opt) {
     return opt[optionValue] === optionSelected;
   });
-  var inverseColor = function inverseColor(hexColor) {
-    var r = parseInt(hexColor.substr(1, 2), 16);
-    var g = parseInt(hexColor.substr(3, 2), 16);
-    var b = parseInt(hexColor.substr(5, 2), 16);
-    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return luminance > 0.18 ? '#000000' : '#FFFFFF';
-  };
   var valueTemplate = function valueTemplate() {
     if (isEditing) return null;
     if (!selectedOption) return /*#__PURE__*/React__default.createElement("span", {
@@ -37262,7 +37731,42 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
         color: '#aaa'
       }
     }, placeholder);
-    return /*#__PURE__*/React__default.createElement("span", {
+    var valueTooltip = enableItemTooltip ? (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tooltip) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.description) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption[optionLabel]) : null;
+    var valueTooltipAttrs = valueTooltip ? {
+      'data-pr-tooltip': valueTooltip,
+      'data-pr-position': 'top'
+    } : {};
+    if (withIcon || withColor) {
+      var _ref9 = selectConfig || {},
+        labelStyle = _ref9.labelStyle,
+        generalIcon = _ref9.generalIcon;
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          fontFamily: 'Arial',
+          fontSize: '14px'
+        }, valueStyle)
+      }, withIcon && generalIcon && /*#__PURE__*/React__default.createElement("i", {
+        style: {
+          color: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color
+        },
+        className: generalIcon
+      }), withColor && selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? /*#__PURE__*/React__default.createElement("span", {
+        className: "dd-color-badge is-selected",
+        style: {
+          '--badge-color': selectedOption.color,
+          color: inverseColor(selectedOption.color)
+        }
+      }, truncateLabel(selectedOption[optionLabel])) : /*#__PURE__*/React__default.createElement("span", {
+        className: valueClassname,
+        style: labelStyle
+      }, truncateLabel(selectedOption[optionLabel])));
+    }
+    return /*#__PURE__*/React__default.createElement("span", _extends$J({
+      className: "".concat(valueClassname || '').concat(valueTooltip ? ' dropdown-tooltip-trigger' : '').trim() || undefined,
+      title: valueTooltip ? undefined : selectedOption[optionLabel],
       style: _objectSpread2({
         backgroundColor: selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color : '#FFFFFF',
         color: selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? inverseColor(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color) : '#FFFFFF',
@@ -37273,41 +37777,53 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
         display: 'inline-block',
         fontFamily: 'Arial'
       }, valueStyle)
-    }, selectedOption[optionLabel]);
+    }, valueTooltipAttrs), truncateLabel(selectedOption[optionLabel]));
   };
 
-  // 🔹 Fonction de lazy loading (simulation d’un backend)
+  // 🔹 Lazy loading paginé au scroll (même logique que MultiSelectMetaAsync)
   var onLazyLoad = function onLazyLoad(event) {
     setLoading(true);
-    if (loadLazyTimeout.current) {
-      clearTimeout(loadLazyTimeout.current);
-    }
-    loadLazyTimeout.current = setTimeout(function () {
-      var first = event.first,
-        last = event.last;
-      var _items = _toConsumableArray$a(loadedOptions);
-      for (var i = first; i < last; i++) {
-        if (!_items[i]) {
-          _items[i] = _defineProperty$g(_defineProperty$g({}, optionLabel, "Option #".concat(i)), optionValue, i);
-        }
-      }
-      setLoadedOptions(_items);
-      setLoading(false);
-      var virtualscroll1 = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
-      if (virtualscroll1) {
-        virtualscroll1.style.height = "auto";
-      }
-      var hiddenSelectDiv = document.querySelector('.p-hidden-accessible.p-dropdown-hidden-select');
-      if (hiddenSelectDiv) {
-        var nextEl = hiddenSelectDiv.nextElementSibling;
-        if (nextEl && nextEl.tagName === 'INPUT' && nextEl.value && nextEl.value.trim() !== '') {
-          var virtualscroll = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
-          if (virtualscroll) {
-            virtualscroll.style.height = 'auto';
-          }
+    if (event.last < loadedOptionsRef.current.length - 1 || !hasMoreRef.current) {
+      setTimeout(function () {
+        return setLoading(false);
+      }, 0);
+      return;
+    }
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+    if (loadLazyTimeout.current) clearTimeout(loadLazyTimeout.current);
+    loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var nextPage, result, newOptions;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            nextPage = currentPageRef.current + 1;
+            _context4.n = 1;
+            return loadOptions(searchTermRef.current, [], {
+              page: nextPage
+            });
+          case 1:
+            result = _context4.v;
+            newOptions = (result === null || result === void 0 ? void 0 : result.options) || [];
+            if (!(newOptions.length === 0)) {
+              _context4.n = 2;
+              break;
+            }
+            hasMoreRef.current = false;
+            isLoadingRef.current = false;
+            setLoading(false);
+            return _context4.a(2);
+          case 2:
+            updateLoadedOptions([].concat(_toConsumableArray$a(loadedOptionsRef.current), _toConsumableArray$a(newOptions)));
+            hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+            currentPageRef.current = nextPage;
+            isLoadingRef.current = false;
+            setLoading(false);
+          case 3:
+            return _context4.a(2);
         }
-      }
-    }, Math.random() * 1000 + 250);
+      }, _callee4);
+    })), 500);
   };
   useEffect(function () {
     var handleAnyClick = function handleAnyClick(e) {
@@ -37334,20 +37850,105 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       return document.removeEventListener('click', handleAnyClick);
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: dropdownRef,
-    className: "flex flex-col gap-1",
-    onClick: isInvalidEffective || disabled ? null : function () {
+
+  // 🔹 Options calculées (réordonnancement + tri, comme Dropdown)
+  var smartSort = function smartSort(opts, order, labelKey) {
+    if (!order) return opts;
+    var dir = order === 'desc' ? 1 : -1;
+    return _toConsumableArray$a(opts).sort(function (a, b) {
+      var _a$labelKey, _b$labelKey;
+      var aLabel = String((_a$labelKey = a === null || a === void 0 ? void 0 : a[labelKey]) !== null && _a$labelKey !== void 0 ? _a$labelKey : '').trim();
+      var bLabel = String((_b$labelKey = b === null || b === void 0 ? void 0 : b[labelKey]) !== null && _b$labelKey !== void 0 ? _b$labelKey : '').trim();
+      return dir * aLabel.localeCompare(bLabel, 'fr', {
+        sensitivity: 'base',
+        numeric: true
+      });
+    });
+  };
+  var computedOptions = useMemo(function () {
+    var opts = loadedOptions;
+    if (itemsCheckedToTheTop && optionSelected) {
+      var selected = opts.find(function (opt) {
+        return (opt === null || opt === void 0 ? void 0 : opt[optionValue]) === optionSelected;
+      });
+      if (selected) {
+        opts = [selected].concat(_toConsumableArray$a(opts.filter(function (opt) {
+          return (opt === null || opt === void 0 ? void 0 : opt[optionValue]) !== optionSelected;
+        })));
+      }
+    }
+    if (enableSorting) {
+      opts = smartSort(opts, sortOrder, optionLabel);
+    }
+    return opts;
+  }, [loadedOptions, itemsCheckedToTheTop, optionSelected, enableSorting, sortOrder, optionValue, optionLabel]);
+  var toggleSortOrder = function toggleSortOrder() {
+    setSortOrder(function (prev) {
+      if (prev === null) return 'desc';
+      if (prev === 'desc') return 'asc';
+      return null;
+    });
+    requestAnimationFrame(function () {
+      var _dropdownComposantRef3;
+      (_dropdownComposantRef3 = dropdownComposantRef.current) === null || _dropdownComposantRef3 === void 0 || _dropdownComposantRef3.show();
+    });
+  };
+  var customFilterTemplate = function customFilterTemplate(opts) {
+    if (!enableSorting) return opts.element;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "dd-search-row"
+    }, opts.element, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "dd-sort-btn",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleSortOrder();
+      }
+    }, /*#__PURE__*/React__default.createElement("i", {
+      className: sortOrder === 'desc' ? 'pi pi-sort-amount-down' : sortOrder === 'asc' ? 'pi pi-sort-amount-up-alt' : 'pi pi-sort-alt'
+    })));
+  };
+  var mergedClassName = "flex flex-col gap-1 ".concat(attr["class"] || '').trim();
+  attr["class"];
+    var cleanAttr = _objectWithoutProperties$1(attr, _excluded2$2);
+  return /*#__PURE__*/React__default.createElement("div", _extends$J({
+    ref: dropdownRef
+  }, cleanAttr, {
+    className: mergedClassName,
+    style: {
+      width: '100%'
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: isInvalidEffective || disabled || readOnly ? null : function () {
       return setIsEditing(editable);
     }
-  }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    options: loadedOptions,
+  }), enableItemTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    key: tooltipKey,
+    target: ".dropdown-tooltip-item, .dropdown-tooltip-trigger",
+    appendTo: document.body,
+    position: "right",
+    autoHide: false,
+    hideDelay: 150,
+    style: {
+      zIndex: 9999999
+    }
+  }), /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$J({
+    ref: dropdownComposantRef,
+    options: computedOptions,
     onChange: handleChange,
+    onClick: function onClick(e) {
+      if (readOnly) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
     filter: filter,
+    filterTemplate: filter ? customFilterTemplate : undefined,
     placeholder: placeholder === "" || placeholder === null ? ' ' : placeholder,
     optionLabel: optionLabel,
     optionValue: optionValue,
-    showClear: true,
+    showClear: showClear,
     disabled: disabled,
     editable: isEditing,
     onFocus: function onFocus() {
@@ -37365,16 +37966,38 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     },
     dropdownMode: "current",
     itemTemplate: optionTemplate,
-    valueTemplate: valueTemplate,
-    virtualScrollerOptions: {
+    valueTemplate: valueTemplate
+  }, hasInfoLine && {
+    panelFooterTemplate: panelFooterTemplate
+  }, {
+    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
+  }, isGroupedOption && computedOptions.length > 0 && Array.isArray((_computedOptions$ = computedOptions[0]) === null || _computedOptions$ === void 0 ? void 0 : _computedOptions$.items) && {
+    optionGroupLabel: 'label',
+    optionGroupChildren: 'items'
+  }, {
+    onShow: function onShow() {
+      if (isGroupedOption && showTooltipGroup) setIsDropdownOpen(true);
+      if (enableItemTooltip) setTooltipKey(function (k) {
+        return k + 1;
+      });
+    },
+    onHide: function onHide() {
+      if (isGroupedOption && showTooltipGroup) setIsDropdownOpen(false);
+    },
+    emptyMessage: externalLoading ? 'Chargement…' : 'Aucune option disponible',
+    virtualScrollerOptions: _objectSpread2({
       lazy: true,
       onLazyLoad: onLazyLoad,
       itemSize: 38,
       showLoader: true,
-      loading: loading,
+      loading: loading || externalLoading,
       delay: 25
-    },
-    className: "w-full md:w-14rem"
+    }, virtualScrollerOptions),
+    className: "w-full"
+  })), !isDropdownOpen && selectedGroupLabel && isGroupedOption && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    target: ".p-dropdown-label.p-inputtext",
+    content: selectedGroupLabel,
+    position: "top"
   }), name && /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
     name: name,
@@ -37411,9 +38034,6 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
   }, errorMessage || (showRequiredError ? ((_window$Translator = window.Translator) === null || _window$Translator === void 0 ? void 0 : _window$Translator.trans('error.required')) || 'Veuillez renseigner ce champ' : ((_window$Translator2 = window.Translator) === null || _window$Translator2 === void 0 ? void 0 : _window$Translator2.trans('error.invalid_selection')) || 'Sélection invalide'))));
 };
 
-var css_248z$5 = "@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.dropdownbook.p-dropdown-panel {\n  z-index: 999999 !important;\n}\n\n.p-tooltip {\n  z-index: 1000000 !important;\n}\n\n.dropdown-tooltip-item {\n  position: relative;\n  width: 100%;\n  cursor: pointer;\n}\n\n/* Application du mixin field sur le wrapper du Dropdown */\n.dropdown-container .p-dropdown {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dropdown-container .p-dropdown:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.dropdown-container .p-dropdown:focus, .dropdown-container .p-dropdown:focus-within, .dropdown-container .p-dropdown.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.dropdown-container .p-dropdown[disabled], .dropdown-container .p-dropdown.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.dropdown-container .p-dropdown[readonly], .dropdown-container .p-dropdown.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.dropdown-container .p-dropdown[readonly]:hover, .dropdown-container .p-dropdown.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.dropdown-container .p-dropdown.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.dropdown-container .p-dropdown.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.dropdown-container .p-dropdown {\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n\n.dd-search-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.dd-search-row [class*=-filter-container] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n.dd-search-row [class*=-filter-container] .p-inputtext {\n  width: 100%;\n  height: 32px;\n  padding: 0 24.5px 0 12px;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n.dd-search-row [class*=-filter-container] [class*=-filter-icon] {\n  right: 10.5px;\n  color: #b0b8c4;\n}\n\n.dd-sort-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dd-sort-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n\n.dropdownbook .p-dropdown-header:has(.dd-search-row) {\n  padding: 0;\n}\n\n/* ===== Badge couleur dans les items ===== */\n.dd-color-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 4px 10px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n  cursor: default;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: #f4f5f6;\n  color: #1a1e26;\n  border: 1px solid #e0e3e8;\n  border-color: var(--badge-color, #e0e3e8);\n  background-color: color-mix(in srgb, var(--badge-color, #f4f5f6) 50%, transparent);\n}\n.dd-color-badge.is-selected {\n  background-color: var(--badge-color, #f4f5f6);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.p-dropdown-item:hover .dd-color-badge {\n  background-color: var(--badge-color) !important;\n}\n\n/* ===== Override PrimeReact default item colors ===== */\n.dropdownbook .p-dropdown-items .p-dropdown-item:not(.p-highlight):hover {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight {\n  background: rgba(63, 63, 63, 0.08) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {\n  background: rgba(63, 63, 63, 0.12) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-focus {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n\n/* ===== Override PrimeReact filter input focus ===== */\n.dropdownbook .p-dropdown-filter.p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.dropdownbook .p-dropdown-filter.p-inputtext:focus, .dropdownbook .p-dropdown-filter.p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}";
-styleInject(css_248z$5);
-
 var _excluded$2 = ["class"],
   _excluded2$1 = ["style", "className"];
 var Dropdown = function Dropdown(props) {
@@ -37519,10 +38139,11 @@ var Dropdown = function Dropdown(props) {
     _props$subItem = props.subItem,
     subItem = _props$subItem === void 0 ? false : _props$subItem,
     _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required;
+    required = _props$required === void 0 ? false : _props$required,
+    optionsUrl = props.optionsUrl;
 
   // --- Async delegation ---
-  var isAsyncOptions = typeof options === 'function';
+  var isAsyncOptions = typeof options === 'function' || optionsUrl;
   if (isAsyncOptions) {
     return /*#__PURE__*/React__default.createElement(DropdownSelectMetaAsync, props);
   }
@@ -37628,7 +38249,7 @@ var Dropdown = function Dropdown(props) {
         return prevKey + 1;
       });
     }
-  }, [options, enableItemTooltip]);
+  }, [options, enableItemTooltip, optionSelected]);
 
   // --- Helpers ---
   var getSelectedGroupLabel = function getSelectedGroupLabel(selectedValue) {
@@ -37665,6 +38286,34 @@ var Dropdown = function Dropdown(props) {
     return label.slice(0, truncateAt) + '…';
   };
 
+  // --- Tooltip HTML support ---
+  // PrimeReact 10 ignore la prop `escape` : sa Tooltip écrit toujours via
+  // createTextNode. Un MutationObserver global rescande les `.p-tooltip-text`
+  // pour convertir le texte contenant du HTML en innerHTML rendu.
+  // On l'installe une seule fois côté document.body, indépendamment du montage
+  // des composants — car onShow ne se déclenche pas lors du changement de
+  // cible pendant que le tooltip est déjà visible.
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var rewrite = function rewrite() {
+      document.querySelectorAll('.p-tooltip .p-tooltip-text').forEach(function (el) {
+        var raw = el.textContent;
+        if (raw && /<[a-z][\s\S]*>/i.test(raw) && el.innerHTML !== raw) {
+          el.innerHTML = raw;
+        }
+      });
+    };
+    var observer = new MutationObserver(rewrite);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [enableItemTooltip]);
+
   // --- Event handlers ---
   var handleShow = function handleShow() {
     return setIsDropdownOpen(true);
@@ -37712,6 +38361,11 @@ var Dropdown = function Dropdown(props) {
     } : {
       className: 'dropdown-tooltip-item'
     };
+    var tooltipContent = option.tooltip || option.description;
+    var hasTooltip = Boolean(enableItemTooltip && tooltipContent);
+    var infoIcon = hasTooltip ? /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-info-circle dropdown-item-info-icon"
+    }) : null;
     var secondaryLabel = enableSecondaryLabel ? option === null || option === void 0 ? void 0 : option[secondaryLabelKey] : null;
     var isLink = enableItemLink && option.link;
     var handleLinkClick = function handleLinkClick(e) {
@@ -37791,10 +38445,7 @@ var Dropdown = function Dropdown(props) {
       optionAttrs.style;
         optionAttrs.className;
         var restAttrs = _objectWithoutProperties$1(optionAttrs, _excluded2$1);
-      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
-        className: className,
-        style: _style
-      }), imgUrl && /*#__PURE__*/React__default.createElement("img", {
+      var labelContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, imgUrl && /*#__PURE__*/React__default.createElement("img", {
         src: imgUrl,
         alt: "",
         style: {
@@ -37845,6 +38496,42 @@ var Dropdown = function Dropdown(props) {
           marginLeft: '10px'
         }
       }, secondaryLabel)))) : option[optionLabel]);
+      if (hasTooltip) {
+        // Deux colonnes : libellé à l'extrême gauche, picto "i" à l'extrême droite.
+        // Le tooltip est porté par l'item entier (survol de toute la ligne) et,
+        // en position "right" sur un item pleine largeur, il pointe sur le picto.
+        return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
+          className: "".concat(className, " dropdown-item-two-cols"),
+          style: _objectSpread2(_objectSpread2({}, _style), {}, {
+            width: '100%',
+            maxWidth: 'none',
+            justifyContent: 'space-between'
+          })
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "dropdown-item-label-col",
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }
+        }, labelContent), /*#__PURE__*/React__default.createElement("div", {
+          className: "dropdown-item-info-col",
+          style: {
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            marginLeft: '8px'
+          }
+        }, infoIcon));
+      }
+      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
+        className: className,
+        style: _style
+      }), labelContent);
     }
     var _ref2 = selectMetaConfig || {},
       labelStyle = _ref2.labelStyle,
@@ -37917,6 +38604,11 @@ var Dropdown = function Dropdown(props) {
     }, secondaryLabel)))));
   };
   var valueTemplate = function valueTemplate(option) {
+    var valueTooltip = enableItemTooltip ? (option === null || option === void 0 ? void 0 : option.tooltip) || (option === null || option === void 0 ? void 0 : option.description) || (option === null || option === void 0 ? void 0 : option[optionLabel]) : null;
+    var valueTooltipAttrs = valueTooltip ? {
+      'data-pr-tooltip': valueTooltip,
+      'data-pr-position': 'top'
+    } : {};
     if (isSelectMeta) {
       if (!isEditing) {
         var iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option === null || option === void 0 ? void 0 : option.color) : '#000000';
@@ -37986,9 +38678,10 @@ var Dropdown = function Dropdown(props) {
           fontSize: '14px'
         }, valueStyle)
       };
-      return imgUrl ? /*#__PURE__*/React__default.createElement("div", {
-        style: _style2
-      }, /*#__PURE__*/React__default.createElement("img", {
+      return imgUrl ? /*#__PURE__*/React__default.createElement("div", _extends$J({
+        style: _style2,
+        className: valueTooltip ? 'dropdown-tooltip-trigger' : undefined
+      }, valueTooltipAttrs), /*#__PURE__*/React__default.createElement("img", {
         src: imgUrl,
         alt: "",
         style: {
@@ -37996,15 +38689,15 @@ var Dropdown = function Dropdown(props) {
           height: '18px',
           objectFit: 'contain'
         }
-      }), /*#__PURE__*/React__default.createElement("span", null, option === null || option === void 0 ? void 0 : option[optionLabel])) : /*#__PURE__*/React__default.createElement("span", {
-        className: attrs.className,
+      }), /*#__PURE__*/React__default.createElement("span", null, option === null || option === void 0 ? void 0 : option[optionLabel])) : /*#__PURE__*/React__default.createElement("span", _extends$J({
+        className: "".concat(attrs.className || '').concat(valueTooltip ? ' dropdown-tooltip-trigger' : '').trim() || undefined,
         style: _objectSpread2(_objectSpread2(_objectSpread2({}, attrs.style), optionStyle), {}, {
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis'
         }),
-        title: option === null || option === void 0 ? void 0 : option[optionLabel]
-      }, truncateLabel(option === null || option === void 0 ? void 0 : option[optionLabel]) || placeholder);
+        title: valueTooltip ? undefined : option === null || option === void 0 ? void 0 : option[optionLabel]
+      }, valueTooltipAttrs), truncateLabel(option === null || option === void 0 ? void 0 : option[optionLabel]) || placeholder);
     }
   };
   var groupedItemTemplate = function groupedItemTemplate(option) {
@@ -38149,9 +38842,11 @@ var Dropdown = function Dropdown(props) {
     }
   }, enableItemTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
     key: tooltipKey,
-    target: ".dropdown-tooltip-item",
+    target: ".dropdown-tooltip-item, .dropdown-tooltip-trigger",
     appendTo: document.body,
     position: "right",
+    autoHide: false,
+    hideDelay: 150,
     style: {
       zIndex: 9999999
     }
@@ -38659,15 +39354,19 @@ var DropdownPresets = {
     options: [{
       label: 'Option A',
       value: 'a',
-      tooltip: 'Information spécifique pour l’option A'
+      tooltip: '<b>Option A</b> — <i>information</i> spécifique.<br/>Prise en charge du <u>HTML</u>.'
     }, {
       label: 'Option B',
       value: 'b',
-      tooltip: 'Détail complémentaire lié à l’option B'
+      tooltip: '<span style="color:#3b82f6">Détail</span> complémentaire pour <b>B</b>'
     }, {
       label: 'Option C',
       value: 'c',
-      tooltip: 'Contexte métier propre à cette option'
+      tooltip: 'Contexte métier :<ul style="margin:4px 0 0 16px;padding:0"><li>Point 1</li><li>Point 2</li></ul>'
+    }, {
+      label: 'Option D',
+      value: 'd',
+      tooltip: 'Documentation : <a href="https://example.com" target="_blank" rel="noopener" style="color:#60a5fa;text-decoration:underline">ouvrir la doc</a>'
     }],
     filter: true,
     enableSorting: true
@@ -41015,7 +41714,7 @@ var Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPr
 }));
 Badge.displayName = 'Badge';
 
-var css_248z$4 = "@charset \"UTF-8\";\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.multiselect-container {\n  position: relative;\n  display: inline-block;\n}\n\n/* Application du mixin field sur le wrapper du MultiSelect */\n.multiselect-container .p-multiselect {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.multiselect-container .p-multiselect:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.multiselect-container .p-multiselect:focus, .multiselect-container .p-multiselect:focus-within, .multiselect-container .p-multiselect.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.multiselect-container .p-multiselect[disabled], .multiselect-container .p-multiselect.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.multiselect-container .p-multiselect[readonly], .multiselect-container .p-multiselect.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.multiselect-container .p-multiselect[readonly]:hover, .multiselect-container .p-multiselect.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.multiselect-container .p-multiselect.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.multiselect-container .p-multiselect.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.multiselect-container .p-multiselect {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  overflow: hidden;\n}\n.multiselect-container .p-multiselect .p-multiselect-trigger {\n  border-left: 1px solid #cccccc;\n}\n\n.selected-options-tooltip {\n  position: absolute;\n  background-color: #ffffff;\n  border: 1px solid #e0e3e8;\n  border-radius: 4px;\n  padding: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  width: 400px;\n  top: 100%;\n  left: 0;\n}\n\n.selected-options-tooltip div {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.multiselect-tooltip-item {\n  width: 100%;\n  cursor: pointer;\n}\n\n/* ===== Checkbox hiding (replaces inline <style> tags) ===== */\n.ms-no-checkbox .p-multiselect-items .p-multiselect-item .p-checkbox {\n  display: none !important;\n}\n\n.ms-no-checkbox .p-multiselect-items .p-multiselect-item {\n  padding-left: 14px !important;\n  align-items: center;\n}\n\n/* ===== Custom panel header ===== */\n.ms-panel-header {\n  padding: 0;\n}\n\n.ms-search-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.ms-search-row [class*=-filter-container] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n.ms-search-row [class*=-filter-container] .p-inputtext {\n  width: 100%;\n  height: 32px;\n  padding: 0 24.5px 0 12px;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n.ms-search-row [class*=-filter-container] [class*=-filter-icon] {\n  right: 10.5px;\n  color: #b0b8c4;\n}\n\n.ms-sort-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-sort-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n\n.ms-selectall-row {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.ms-selectall-row > div:first-child {\n  width: 16px !important;\n  height: 16px !important;\n  margin-right: 8px;\n  display: flex;\n  align-items: center;\n}\n.ms-selectall-row > div:first-child .ms-group-checkbox {\n  width: 16px;\n  height: 16px;\n  min-width: 16px;\n  min-height: 16px;\n}\n\n.ms-selectall-row .p-checkbox {\n  margin-right: 0;\n}\n\n.ms-selectall-label {\n  font-size: 14px;\n  color: #1a1e26;\n}\n\n.ms-counter {\n  font-size: 13px;\n  color: #b0b8c4;\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n/* ===== Custom panel footer ===== */\n.ms-panel-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  border-top: 1px solid #e0e3e8;\n}\n\n.ms-cancel-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  padding: 6px 12px;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ms-cancel-btn:hover {\n  color: #1a1e26;\n}\n\n.ms-apply-btn {\n  background: #3f3f3f;\n  color: #ffffff;\n  border: none;\n  border-radius: 4px;\n  padding: 6px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ms-apply-btn:hover {\n  background: #1a1e26;\n}\n\n/* ===== Group header ===== */\n.ms-group-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 4px 0;\n  user-select: none;\n}\n\n.ms-group-checkbox {\n  width: 16px;\n  height: 16px;\n  min-width: 16px;\n  min-height: 16px;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: #ffffff;\n  color: #ffffff;\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-group-checkbox.checked, .ms-group-checkbox.p-highlight {\n  background-color: #3f3f3f;\n  border-color: #3f3f3f;\n}\n.ms-group-checkbox.partial {\n  background: linear-gradient(to top right, #3f3f3f 50%, transparent 50%);\n  border-color: #3f3f3f;\n}\n.ms-group-checkbox {\n  margin-right: 8px;\n}\n\n.ms-group-label {\n  font-weight: bold;\n  font-size: 14px;\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-group-collapse-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-group-collapse-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n.ms-group-collapse-btn {\n  width: 20px;\n  height: 20px;\n  border-color: #b0b8c4;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 8px;\n}\n\n/* ===== Checkbox PrimeReact — ISO avec ms-group-checkbox ===== */\n.p-checkbox-input {\n  display: none;\n}\n\n/* Checkbox PrimeReact — items + select all */\n.p-checkbox {\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\n}\n\n.p-multiselect-item {\n  display: flex;\n  align-items: center;\n  padding: 6px 12px !important;\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 400 !important;\n}\n.p-multiselect-item > span:not([class]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-selectall-row {\n  display: flex;\n  align-items: center;\n}\n\n.p-checkbox .p-checkbox-box {\n  width: 16px !important;\n  height: 16px !important;\n  min-width: 16px;\n  min-height: 16px;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 3px;\n  background: #ffffff;\n  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-checkbox .p-checkbox-box svg {\n  color: #ffffff;\n  width: 10px;\n  height: 10px;\n}\n\n.p-checkbox.p-highlight .p-checkbox-box {\n  background-color: #3f3f3f !important;\n  border-color: #3f3f3f !important;\n}\n.p-checkbox.p-highlight .p-checkbox-box svg {\n  color: #ffffff;\n}\n\n/* ===== Tokens (chips de valeurs sélectionnées) — chevauchement ===== */\n/* Label container — prend tout l'espace disponible */\n.p-multiselect .p-multiselect-label-container {\n  flex: 1 !important;\n  min-width: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Tokens en ligne, remplissent tout le container */\n.p-multiselect .p-multiselect-label {\n  overflow: hidden !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n  display: flex !important;\n  align-items: center;\n  gap: 0px !important;\n  flex-wrap: nowrap !important;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token {\n  position: relative;\n  margin-right: 0 !important;\n  margin-left: 0 !important;\n  flex-shrink: 1;\n  min-width: 25%;\n  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token .p-multiselect-token-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: block;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token .p-multiselect-token-icon {\n  min-width: 14px;\n  min-height: 14px;\n  flex-shrink: 0;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:not(:first-child) {\n  margin-left: -20px !important;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(1) {\n  z-index: 1;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(2) {\n  z-index: 2;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(3) {\n  z-index: 3;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(4) {\n  z-index: 4;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(5) {\n  z-index: 5;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(6) {\n  z-index: 6;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(7) {\n  z-index: 7;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(8) {\n  z-index: 8;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(9) {\n  z-index: 9;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(10) {\n  z-index: 10;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:hover {\n  z-index: 100 !important;\n  transform: translateY(-2px);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n.p-multiselect-token {\n  animation: fadeIn 180ms cubic-bezier(0.4, 0, 0.2, 1) both;\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 4px 4px 4px 8px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  font-weight: normal;\n  font-style: normal;\n  white-space: nowrap;\n  border: 1px solid var(--badge-color, #e0e3e8);\n  background-color: var(--badge-color, #f4f5f6);\n  color: inherit;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-multiselect-token .p-multiselect-token-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.p-multiselect-token .p-multiselect-token-icon {\n  cursor: pointer;\n  min-width: 12px;\n  min-height: 12px;\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  border-radius: 100%;\n  padding: 0;\n  margin-left: 0 !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-multiselect-token .p-multiselect-token-icon svg {\n  width: 8px;\n  height: 8px;\n  min-width: 8px;\n  min-height: 8px;\n}\n.p-multiselect-token .p-multiselect-token-icon:hover {\n  background-color: #ffffff;\n}\n\n/* ===== Badge compteur (> maxSelectedLabels) ===== */\n.ms-counter-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5.6px;\n  padding: 0;\n  font-size: 11.2px;\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 500;\n  white-space: nowrap;\n  background: none;\n  color: #b0b8c4;\n  border: none;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-counter-badge:hover {\n  color: #1a1e26;\n}\n.ms-counter-badge > span:not([class]) {\n  color: #1a1e26;\n}\n\n.ms-counter-dots {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.ms-counter-dots .ms-counter-dot {\n  animation: fadeIn 180ms cubic-bezier(0.4, 0, 0.2, 1) both;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  border-radius: 100%;\n  background-color: #e0e3e8;\n  border: 1.5px solid #ffffff;\n  display: block;\n  cursor: pointer;\n  position: relative;\n  z-index: 1;\n  transform: scale(1);\n  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-counter-dots .ms-counter-dot:not(:first-child) {\n  margin-left: -5px;\n}\n.ms-counter-dots .ms-counter-dot:hover {\n  transform: scale(1.35);\n  z-index: 100 !important;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(1) {\n  animation-delay: 40ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(2) {\n  animation-delay: 80ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(3) {\n  animation-delay: 120ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(4) {\n  animation-delay: 160ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(5) {\n  animation-delay: 200ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(6) {\n  animation-delay: 240ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(7) {\n  animation-delay: 280ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(8) {\n  animation-delay: 320ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(9) {\n  animation-delay: 360ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(10) {\n  animation-delay: 400ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(11) {\n  animation-delay: 440ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(12) {\n  animation-delay: 480ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(13) {\n  animation-delay: 520ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(14) {\n  animation-delay: 560ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(15) {\n  animation-delay: 600ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(16) {\n  animation-delay: 640ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(17) {\n  animation-delay: 680ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(18) {\n  animation-delay: 720ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(19) {\n  animation-delay: 760ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(20) {\n  animation-delay: 800ms;\n}\n\n.ms-counter-label {\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.ms-counter-end {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n\n.ms-counter-count {\n  font-size: 11.2px;\n  font-weight: 600;\n  color: #1a1e26;\n}\n\n/* Tooltip custom avec dots colorés */\n.ms-counter-tooltip {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 2px 0;\n}\n\n.ms-counter-tooltip-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n}\n\n.ms-counter-tooltip-dot {\n  width: 8px;\n  height: 8px;\n  min-width: 8px;\n  border-radius: 100%;\n  background-color: #e0e3e8;\n  flex-shrink: 0;\n}\n\n.ms-counter-clear-icon {\n  cursor: pointer;\n  font-size: 10px;\n  min-width: 16px;\n  min-height: 16px;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #b0b8c4;\n  border-radius: 100%;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-counter-clear-icon:hover {\n  color: #1a1e26;\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.p-multiselect-token-label {\n  font-size: 12.25px !important;\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n}\n\n/* Un seul token → on autorise les ... si ça dépasse */\n.p-multiselect-token:only-child .p-multiselect-token-label {\n  text-overflow: ellipsis !important;\n}\n\n/* ===== Badge couleur dans les items ===== */\n.ms-color-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 4px 10px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n  cursor: default;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: #f4f5f6;\n  color: #1a1e26;\n  border: 1px solid #e0e3e8;\n  border-color: var(--badge-color, #e0e3e8);\n  background-color: color-mix(in srgb, var(--badge-color, #f4f5f6) 50%, transparent);\n}\n.ms-color-badge.is-selected {\n  background-color: var(--badge-color, #f4f5f6);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n.ms-color-badge {\n  cursor: pointer;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: block;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.p-multiselect-item:hover .ms-color-badge {\n  background-color: var(--badge-color) !important;\n}\n\n/* ===== Groupes — header + indentation enfants ===== */\n.p-multiselect-item-group {\n  font-size: 14px;\n  font-weight: 600;\n  padding: 8px 12px !important;\n  position: sticky;\n  top: 0;\n  z-index: 5;\n  background-color: #ffffff !important;\n  border-bottom: 1px solid #e0e3e8;\n}\n\n/* Items enfants décalés quand il y a des groupes */\n.p-multiselect-item-group ~ .p-multiselect-item {\n  padding-left: 28px !important;\n}\n\n/* ===== Override PrimeReact default item colors ===== */\n.p-multiselect-items .p-multiselect-item:not(.p-highlight):hover {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n.p-multiselect-items .p-multiselect-item.p-highlight {\n  background: rgba(63, 63, 63, 0.08) !important;\n  color: #1a1e26 !important;\n}\n.p-multiselect-items .p-multiselect-item.p-highlight.p-focus {\n  background: rgba(63, 63, 63, 0.12) !important;\n  color: #1a1e26 !important;\n}\n.p-multiselect-items .p-multiselect-item.p-focus {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n\n/* ===== Override PrimeReact filter input focus ===== */\n.p-multiselect-filter.p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.p-multiselect-filter.p-inputtext:focus, .p-multiselect-filter.p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}";
+var css_248z$4 = "@charset \"UTF-8\";\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.multiselect-container {\n  position: relative;\n  display: inline-block;\n}\n\n/* Application du mixin field sur le wrapper du MultiSelect */\n.multiselect-container .p-multiselect {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.multiselect-container .p-multiselect:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.multiselect-container .p-multiselect:focus, .multiselect-container .p-multiselect:focus-within, .multiselect-container .p-multiselect.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.multiselect-container .p-multiselect[disabled], .multiselect-container .p-multiselect.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.multiselect-container .p-multiselect[readonly], .multiselect-container .p-multiselect.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.multiselect-container .p-multiselect[readonly]:hover, .multiselect-container .p-multiselect.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.multiselect-container .p-multiselect.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.multiselect-container .p-multiselect.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.multiselect-container .p-multiselect {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  overflow: hidden;\n}\n.multiselect-container .p-multiselect .p-multiselect-trigger {\n  border-left: 1px solid #cccccc;\n}\n\n.selected-options-tooltip {\n  position: absolute;\n  background-color: #ffffff;\n  border: 1px solid #e0e3e8;\n  border-radius: 4px;\n  padding: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  width: 400px;\n  top: 100%;\n  left: 0;\n}\n\n.selected-options-tooltip div {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.multiselect-tooltip-item {\n  width: 100%;\n  cursor: pointer;\n}\n\n/* ===== ItemWithTooltip : picto info à l'extrême droite de l'item ===== */\n/* PrimeReact enveloppe le template dans un <span> sans classe ; on force ce span\n   à s'étirer sur toute la largeur restante pour que le picto touche le bord droit. */\n.p-multiselect-panel .p-multiselect-item > span {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: block;\n  width: 100%;\n}\n\n.multiselect-item-info-icon {\n  font-size: 14px;\n  color: #6b7280;\n}\n\n/* ===== Checkbox hiding (replaces inline <style> tags) ===== */\n.ms-no-checkbox .p-multiselect-items .p-multiselect-item .p-checkbox {\n  display: none !important;\n}\n\n.ms-no-checkbox .p-multiselect-items .p-multiselect-item {\n  padding-left: 14px !important;\n  align-items: center;\n}\n\n/* ===== Custom panel header ===== */\n.ms-panel-header {\n  padding: 0;\n}\n\n.ms-search-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.ms-search-row [class*=-filter-container] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n.ms-search-row [class*=-filter-container] .p-inputtext {\n  width: 100%;\n  height: 32px;\n  padding: 0 24.5px 0 12px;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n.ms-search-row [class*=-filter-container] [class*=-filter-icon] {\n  right: 10.5px;\n  color: #b0b8c4;\n}\n\n.ms-sort-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-sort-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n\n.ms-selectall-row {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.ms-selectall-row > div:first-child {\n  width: 16px !important;\n  height: 16px !important;\n  margin-right: 8px;\n  display: flex;\n  align-items: center;\n}\n.ms-selectall-row > div:first-child .ms-group-checkbox {\n  width: 16px;\n  height: 16px;\n  min-width: 16px;\n  min-height: 16px;\n}\n\n.ms-selectall-row .p-checkbox {\n  margin-right: 0;\n}\n\n.ms-selectall-label {\n  font-size: 14px;\n  color: #1a1e26;\n}\n\n.ms-counter {\n  font-size: 13px;\n  color: #b0b8c4;\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n/* ===== Custom panel footer ===== */\n.ms-panel-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  border-top: 1px solid #e0e3e8;\n}\n\n.ms-cancel-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  padding: 6px 12px;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ms-cancel-btn:hover {\n  color: #1a1e26;\n}\n\n.ms-apply-btn {\n  background: #3f3f3f;\n  color: #ffffff;\n  border: none;\n  border-radius: 4px;\n  padding: 6px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ms-apply-btn:hover {\n  background: #1a1e26;\n}\n\n/* ===== Group header ===== */\n.ms-group-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 4px 0;\n  user-select: none;\n}\n\n.ms-group-checkbox {\n  width: 16px;\n  height: 16px;\n  min-width: 16px;\n  min-height: 16px;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: #ffffff;\n  color: #ffffff;\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-group-checkbox.checked, .ms-group-checkbox.p-highlight {\n  background-color: #3f3f3f;\n  border-color: #3f3f3f;\n}\n.ms-group-checkbox.partial {\n  background: linear-gradient(to top right, #3f3f3f 50%, transparent 50%);\n  border-color: #3f3f3f;\n}\n.ms-group-checkbox {\n  margin-right: 8px;\n}\n\n.ms-group-label {\n  font-weight: bold;\n  font-size: 14px;\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-group-collapse-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-group-collapse-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n.ms-group-collapse-btn {\n  width: 20px;\n  height: 20px;\n  border-color: #b0b8c4;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 8px;\n}\n\n/* ===== Checkbox PrimeReact — ISO avec ms-group-checkbox ===== */\n.p-checkbox-input {\n  display: none;\n}\n\n/* Checkbox PrimeReact — items + select all */\n.p-checkbox {\n  display: flex;\n  align-items: center;\n  margin-right: 8px;\n}\n\n.p-multiselect-item {\n  display: flex;\n  align-items: center;\n  padding: 6px 12px !important;\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 400 !important;\n}\n.p-multiselect-item > span:not([class]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-selectall-row {\n  display: flex;\n  align-items: center;\n}\n\n.p-checkbox .p-checkbox-box {\n  width: 16px !important;\n  height: 16px !important;\n  min-width: 16px;\n  min-height: 16px;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 3px;\n  background: #ffffff;\n  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-checkbox .p-checkbox-box svg {\n  color: #ffffff;\n  width: 10px;\n  height: 10px;\n}\n\n.p-checkbox.p-highlight .p-checkbox-box {\n  background-color: #3f3f3f !important;\n  border-color: #3f3f3f !important;\n}\n.p-checkbox.p-highlight .p-checkbox-box svg {\n  color: #ffffff;\n}\n\n/* ===== Tokens (chips de valeurs sélectionnées) — chevauchement ===== */\n/* Label container — prend tout l'espace disponible */\n.p-multiselect .p-multiselect-label-container {\n  flex: 1 !important;\n  min-width: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Tokens en ligne, remplissent tout le container */\n.p-multiselect .p-multiselect-label {\n  overflow: hidden !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n  display: flex !important;\n  align-items: center;\n  gap: 0px !important;\n  flex-wrap: nowrap !important;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token {\n  position: relative;\n  margin-right: 0 !important;\n  margin-left: 0 !important;\n  flex-shrink: 1;\n  min-width: 25%;\n  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token .p-multiselect-token-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: block;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token .p-multiselect-token-icon {\n  min-width: 14px;\n  min-height: 14px;\n  flex-shrink: 0;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:not(:first-child) {\n  margin-left: -20px !important;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(1) {\n  z-index: 1;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(2) {\n  z-index: 2;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(3) {\n  z-index: 3;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(4) {\n  z-index: 4;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(5) {\n  z-index: 5;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(6) {\n  z-index: 6;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(7) {\n  z-index: 7;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(8) {\n  z-index: 8;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(9) {\n  z-index: 9;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:nth-child(10) {\n  z-index: 10;\n}\n.p-multiselect .p-multiselect-label .p-multiselect-token:hover {\n  z-index: 100 !important;\n  transform: translateY(-2px);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n.p-multiselect-token {\n  animation: fadeIn 180ms cubic-bezier(0.4, 0, 0.2, 1) both;\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 4px 4px 4px 8px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  font-weight: normal;\n  font-style: normal;\n  white-space: nowrap;\n  border: 1px solid var(--badge-color, #e0e3e8);\n  background-color: var(--badge-color, #f4f5f6);\n  color: inherit;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-multiselect-token .p-multiselect-token-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.p-multiselect-token .p-multiselect-token-icon {\n  cursor: pointer;\n  min-width: 12px;\n  min-height: 12px;\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  border-radius: 100%;\n  padding: 0;\n  margin-left: 0 !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-multiselect-token .p-multiselect-token-icon svg {\n  width: 8px;\n  height: 8px;\n  min-width: 8px;\n  min-height: 8px;\n}\n.p-multiselect-token .p-multiselect-token-icon:hover {\n  background-color: #ffffff;\n}\n\n/* ===== Badge compteur (> maxSelectedLabels) ===== */\n.ms-counter-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5.6px;\n  padding: 0;\n  font-size: 11.2px;\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 500;\n  white-space: nowrap;\n  background: none;\n  color: #b0b8c4;\n  border: none;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-counter-badge:hover {\n  color: #1a1e26;\n}\n.ms-counter-badge > span:not([class]) {\n  color: #1a1e26;\n}\n\n.ms-counter-dots {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.ms-counter-dots .ms-counter-dot {\n  animation: fadeIn 180ms cubic-bezier(0.4, 0, 0.2, 1) both;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  border-radius: 100%;\n  background-color: #e0e3e8;\n  border: 1.5px solid #ffffff;\n  display: block;\n  cursor: pointer;\n  position: relative;\n  z-index: 1;\n  transform: scale(1);\n  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-counter-dots .ms-counter-dot:not(:first-child) {\n  margin-left: -5px;\n}\n.ms-counter-dots .ms-counter-dot:hover {\n  transform: scale(1.35);\n  z-index: 100 !important;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(1) {\n  animation-delay: 40ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(2) {\n  animation-delay: 80ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(3) {\n  animation-delay: 120ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(4) {\n  animation-delay: 160ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(5) {\n  animation-delay: 200ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(6) {\n  animation-delay: 240ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(7) {\n  animation-delay: 280ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(8) {\n  animation-delay: 320ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(9) {\n  animation-delay: 360ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(10) {\n  animation-delay: 400ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(11) {\n  animation-delay: 440ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(12) {\n  animation-delay: 480ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(13) {\n  animation-delay: 520ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(14) {\n  animation-delay: 560ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(15) {\n  animation-delay: 600ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(16) {\n  animation-delay: 640ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(17) {\n  animation-delay: 680ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(18) {\n  animation-delay: 720ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(19) {\n  animation-delay: 760ms;\n}\n.ms-counter-dots .ms-counter-dot:nth-child(20) {\n  animation-delay: 800ms;\n}\n\n.ms-counter-label {\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.ms-counter-end {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n\n.ms-counter-count {\n  font-size: 11.2px;\n  font-weight: 600;\n  color: #1a1e26;\n}\n\n/* Tooltip custom avec dots colorés */\n.ms-counter-tooltip {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 2px 0;\n}\n\n.ms-counter-tooltip-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n}\n\n.ms-counter-tooltip-dot {\n  width: 8px;\n  height: 8px;\n  min-width: 8px;\n  border-radius: 100%;\n  background-color: #e0e3e8;\n  flex-shrink: 0;\n}\n\n.ms-counter-clear-icon {\n  cursor: pointer;\n  font-size: 10px;\n  min-width: 16px;\n  min-height: 16px;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #b0b8c4;\n  border-radius: 100%;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ms-counter-clear-icon:hover {\n  color: #1a1e26;\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.p-multiselect-token-label {\n  font-size: 12.25px !important;\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n}\n\n/* Un seul token → on autorise les ... si ça dépasse */\n.p-multiselect-token:only-child .p-multiselect-token-label {\n  text-overflow: ellipsis !important;\n}\n\n/* ===== Badge couleur dans les items ===== */\n.ms-color-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 4px 10px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n  cursor: default;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: #f4f5f6;\n  color: #1a1e26;\n  border: 1px solid #e0e3e8;\n  border-color: var(--badge-color, #e0e3e8);\n  background-color: color-mix(in srgb, var(--badge-color, #f4f5f6) 50%, transparent);\n}\n.ms-color-badge.is-selected {\n  background-color: var(--badge-color, #f4f5f6);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n.ms-color-badge {\n  cursor: pointer;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: block;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.p-multiselect-item:hover .ms-color-badge {\n  background-color: var(--badge-color) !important;\n}\n\n/* ===== Groupes — header + indentation enfants ===== */\n.p-multiselect-item-group {\n  font-size: 14px;\n  font-weight: 600;\n  padding: 8px 12px !important;\n  position: sticky;\n  top: 0;\n  z-index: 5;\n  background-color: #ffffff !important;\n  border-bottom: 1px solid #e0e3e8;\n}\n\n/* Items enfants décalés quand il y a des groupes */\n.p-multiselect-item-group ~ .p-multiselect-item {\n  padding-left: 28px !important;\n}\n\n/* ===== Override PrimeReact default item colors ===== */\n.p-multiselect-items .p-multiselect-item:not(.p-highlight):hover {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n.p-multiselect-items .p-multiselect-item.p-highlight {\n  background: rgba(63, 63, 63, 0.08) !important;\n  color: #1a1e26 !important;\n}\n.p-multiselect-items .p-multiselect-item.p-highlight.p-focus {\n  background: rgba(63, 63, 63, 0.12) !important;\n  color: #1a1e26 !important;\n}\n.p-multiselect-items .p-multiselect-item.p-focus {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n\n/* ===== Override PrimeReact filter input focus ===== */\n.p-multiselect-filter.p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.p-multiselect-filter.p-inputtext:focus, .p-multiselect-filter.p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}";
 styleInject(css_248z$4);
 
 var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
@@ -41115,6 +41814,10 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     valueToapply = _ref.valueToapply,
     _ref$closeIcon = _ref.closeIcon,
     closeIcon = _ref$closeIcon === void 0 ? null : _ref$closeIcon,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? 'Annuler' : _ref$cancelLabel,
+    _ref$applyLabel = _ref.applyLabel,
+    applyLabel = _ref$applyLabel === void 0 ? 'Appliquer' : _ref$applyLabel,
     onHide = _ref.onHide;
     _ref.withSearch;
     _ref.renderValue;
@@ -41324,9 +42027,16 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
               _context2.n = 5;
               break;
             case 4:
-              result = {
-                options: []
-              };
+              if (Array.isArray(options)) {
+                result = {
+                  options: options,
+                  hasMore: false
+                };
+              } else {
+                result = {
+                  options: []
+                };
+              }
             case 5:
               hasMoreRef.current = ((_result = result) === null || _result === void 0 ? void 0 : _result.hasMore) !== false;
               initialOpts = _flattenOptions(((_result2 = result) === null || _result2 === void 0 ? void 0 : _result2.options) || []);
@@ -41394,7 +42104,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     if (enableItemTooltip) setTooltipKey(function (k) {
       return k + 1;
     });
-  }, [loadedOptions, enableItemTooltip]);
+  }, [loadedOptions, enableItemTooltip, selectedOptions]);
   var onLazyLoad = function onLazyLoad(event) {
     if (isOptionsArray) return;
     setLoading(true);
@@ -41479,6 +42189,30 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
   var getKey = function getKey(v) {
     return v && _typeof$g(v) === 'object' ? v[optionValue] : v;
   };
+
+  // PrimeReact 10 ignore la prop `escape` : sa Tooltip écrit toujours via
+  // createTextNode. Un MutationObserver rescande les `.p-tooltip-text` pour
+  // convertir le texte contenant du HTML en innerHTML rendu.
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var rewrite = function rewrite() {
+      document.querySelectorAll('.p-tooltip .p-tooltip-text').forEach(function (el) {
+        var raw = el.textContent;
+        if (raw && /<[a-z][\s\S]*>/i.test(raw) && el.innerHTML !== raw) {
+          el.innerHTML = raw;
+        }
+      });
+    };
+    var observer = new MutationObserver(rewrite);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [enableItemTooltip]);
   var inverseColor = function inverseColor(hexColor) {
     if (!hexColor || !hexColor.startsWith('#')) return '#000000';
     var hex = hexColor;
@@ -41671,6 +42405,11 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     } : {
       className: 'multiselect-tooltip-item'
     };
+    var tooltipContent = option.tooltip || option.description;
+    var hasTooltip = Boolean(enableItemTooltip && tooltipContent);
+    var infoIcon = hasTooltip ? /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-info-circle multiselect-item-info-icon"
+    }) : null;
     var secondaryLabel = enableSecondaryLabel ? option === null || option === void 0 ? void 0 : option[secondaryLabelKey] : null;
     var isLink = enableItemLink && option.link;
     var handleLinkClick = function handleLinkClick(e) {
@@ -41716,6 +42455,41 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
         marginLeft: '10px'
       }
     }, secondaryLabel)));
+    if (hasTooltip) {
+      // Deux colonnes : libellé à l'extrême gauche, picto "i" à l'extrême droite.
+      // Le tooltip est porté par l'item entier et pointe sur le picto.
+      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          fontSize: '14px',
+          maxWidth: 'none',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          width: '100%',
+          justifyContent: 'space-between'
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          minWidth: 0,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        }
+      }, option[optionLabel]), /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center',
+          marginLeft: '8px'
+        }
+      }, infoIcon));
+    }
     if (isSelectMeta) {
       var _ref7 = selectMetaConfig || {},
         labelStyle = _ref7.labelStyle,
@@ -41779,6 +42553,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     }, /*#__PURE__*/React__default.createElement("div", tooltipProps, option[optionLabel]), secondaryLabelNode);
   };
   var selectedItemTemplate = function selectedItemTemplate(paramValue) {
+    var _selectedOption3, _selectedOption4, _selectedOption5;
     if (paramValue == null) return null;
     if (truncateAt) {
       var index = (selectedOptions || []).indexOf(paramValue);
@@ -41792,11 +42567,16 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
           return o[optionValue] === paramValue;
         });
         if (!opt) return null;
-        return /*#__PURE__*/React__default.createElement("span", {
+        var _optTooltip = enableItemTooltip ? opt.tooltip || opt.description || opt[optionLabel] : null;
+        return /*#__PURE__*/React__default.createElement("span", _extends$J({
           style: _objectSpread2({
             marginRight: '6px'
-          }, valueStyle)
-        }, opt[optionLabel]);
+          }, valueStyle),
+          className: _optTooltip ? 'multiselect-selected-tooltip-trigger' : undefined
+        }, _optTooltip ? {
+          'data-pr-tooltip': _optTooltip,
+          'data-pr-position': 'top'
+        } : {}), opt[optionLabel]);
       }
       if (index === truncateAt) return /*#__PURE__*/React__default.createElement("span", {
         style: {
@@ -41867,11 +42647,16 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       color: objMatch.color !== undefined ? objMatch.color : selectedOption.color
     });
     var isLast = (selectedOptions || [])[(selectedOptions || []).length - 1] === paramValue;
-    return /*#__PURE__*/React__default.createElement("span", {
+    var optTooltip = enableItemTooltip ? ((_selectedOption3 = selectedOption) === null || _selectedOption3 === void 0 ? void 0 : _selectedOption3.tooltip) || ((_selectedOption4 = selectedOption) === null || _selectedOption4 === void 0 ? void 0 : _selectedOption4.description) || ((_selectedOption5 = selectedOption) === null || _selectedOption5 === void 0 ? void 0 : _selectedOption5[optionLabel]) : null;
+    return /*#__PURE__*/React__default.createElement("span", _extends$J({
       style: _objectSpread2({
         marginRight: '4px'
-      }, valueStyle)
-    }, selectedOption[optionLabel], !isLast && /*#__PURE__*/React__default.createElement("span", {
+      }, valueStyle),
+      className: optTooltip ? 'multiselect-selected-tooltip-trigger' : undefined
+    }, optTooltip ? {
+      'data-pr-tooltip': optTooltip,
+      'data-pr-position': 'top'
+    } : {}), selectedOption[optionLabel], !isLast && /*#__PURE__*/React__default.createElement("span", {
       style: {
         opacity: 0.8
       }
@@ -41972,7 +42757,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
           var _multiSelectRef$curre4;
           return (_multiSelectRef$curre4 = multiSelectRef.current) === null || _multiSelectRef$curre4 === void 0 ? void 0 : _multiSelectRef$curre4.hide();
         }
-      }, "Annuler"), /*#__PURE__*/React__default.createElement("button", {
+      }, cancelLabel), /*#__PURE__*/React__default.createElement("button", {
         type: "button",
         className: "ms-apply-btn",
         onClick: function onClick() {
@@ -41980,7 +42765,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
           handleApply();
           (_multiSelectRef$curre5 = multiSelectRef.current) === null || _multiSelectRef$curre5 === void 0 || _multiSelectRef$curre5.hide();
         }
-      }, "Appliquer"));
+      }, applyLabel));
     }
     if (hasInfoLine) {
       var length = selectedOptions ? selectedOptions.length : 0;
@@ -42100,9 +42885,11 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     }
   }, enableItemTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
     key: tooltipKey,
-    target: ".multiselect-tooltip-item",
+    target: ".multiselect-tooltip-item, .multiselect-tooltip-trigger, .multiselect-selected-tooltip-trigger",
     appendTo: document.body,
     position: "top",
+    autoHide: false,
+    hideDelay: 150,
     style: {
       zIndex: '9999999'
     }
@@ -42425,7 +43212,11 @@ var MultiSelect = function MultiSelect(props) {
     maxVisibleCounter = props.maxVisibleCounter;
     props.maxVisibleChips;
     var _props$closeIcon = props.closeIcon,
-    closeIcon = _props$closeIcon === void 0 ? null : _props$closeIcon;
+    closeIcon = _props$closeIcon === void 0 ? null : _props$closeIcon,
+    _props$cancelLabel = props.cancelLabel,
+    cancelLabel = _props$cancelLabel === void 0 ? 'Annuler' : _props$cancelLabel,
+    _props$applyLabel = props.applyLabel,
+    applyLabel = _props$applyLabel === void 0 ? 'Appliquer' : _props$applyLabel;
     props.withSearch;
     var hasInfoLine = props.hasInfoLine,
     _props$withIcon = props.withIcon,
@@ -42691,6 +43482,11 @@ var MultiSelect = function MultiSelect(props) {
     } : {
       className: 'multiselect-tooltip-item'
     };
+    var tooltipContent = option.tooltip || option.description;
+    var hasTooltip = Boolean(enableItemTooltip && tooltipContent);
+    var infoIcon = hasTooltip ? /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-info-circle multiselect-item-info-icon"
+    }) : null;
     var secondaryLabel = enableSecondaryLabel ? option === null || option === void 0 ? void 0 : option[secondaryLabelKey] : null;
     var isLink = enableItemLink && option.link;
     var handleLinkClick = function handleLinkClick(e) {
@@ -42761,6 +43557,41 @@ var MultiSelect = function MultiSelect(props) {
         }
       }, secondaryLabel)))));
     }
+    if (hasTooltip) {
+      // Deux colonnes : libellé à l'extrême gauche, picto "i" à l'extrême droite.
+      // Le tooltip est porté par l'item entier et pointe sur le picto.
+      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          fontSize: '14px',
+          maxWidth: 'none',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          width: '100%',
+          justifyContent: 'space-between'
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          minWidth: 0,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        }
+      }, option[optionLabel]), /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center',
+          marginLeft: '8px'
+        }
+      }, infoIcon));
+    }
     if (withColor || withIcon) {
       var _ref2 = selectConfig || {},
         _labelStyle = _ref2.labelStyle,
@@ -42818,14 +43649,7 @@ var MultiSelect = function MultiSelect(props) {
         }
       }, secondaryLabel)));
     }
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: _objectSpread2({
-        fontFamily: 'Arial',
-        fontSize: '14px',
-        display: 'flex',
-        flexDirection: 'column'
-      }, optionStyle)
-    }, /*#__PURE__*/React__default.createElement("div", tooltipProps, option[optionLabel]), secondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+    var secondaryContent = secondaryLabel ? /*#__PURE__*/React__default.createElement("div", {
       className: "secondary-link-zone",
       onClick: isLink ? handleLinkClick : undefined,
       onMouseDown: isLink ? function (e) {
@@ -42860,7 +43684,15 @@ var MultiSelect = function MultiSelect(props) {
       style: subItem ? {} : {
         marginLeft: '10px'
       }
-    }, secondaryLabel))));
+    }, secondaryLabel))) : null;
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: _objectSpread2({
+        fontFamily: 'Arial',
+        fontSize: '14px',
+        display: 'flex',
+        flexDirection: 'column'
+      }, optionStyle)
+    }, /*#__PURE__*/React__default.createElement("div", tooltipProps, option[optionLabel]), secondaryContent);
   };
   var inverseColor = function inverseColor(hexColor) {
     var r = parseInt(hexColor === null || hexColor === void 0 ? void 0 : hexColor.substr(1, 2), 16);
@@ -42878,6 +43710,31 @@ var MultiSelect = function MultiSelect(props) {
       window[onChange](ids);
     }
   };
+
+  // PrimeReact 10 ignore la prop `escape` : sa Tooltip écrit toujours via
+  // createTextNode. Un MutationObserver rescande les `.p-tooltip-text` pour
+  // convertir le texte contenant du HTML en innerHTML rendu — nécessaire car
+  // le tooltip est réutilisé (pas de callback à chaque changement de cible).
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var rewrite = function rewrite() {
+      document.querySelectorAll('.p-tooltip .p-tooltip-text').forEach(function (el) {
+        var raw = el.textContent;
+        if (raw && /<[a-z][\s\S]*>/i.test(raw) && el.innerHTML !== raw) {
+          el.innerHTML = raw;
+        }
+      });
+    };
+    var observer = new MutationObserver(rewrite);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [enableItemTooltip]);
   var handleChange = function handleChange(e) {
     if (disabled || effectiveReadOnly) return;
     var ids = Array.isArray(e.value) ? e.value : [e.value];
@@ -42920,11 +43777,16 @@ var MultiSelect = function MultiSelect(props) {
           return o.value === option;
         });
         if (!_opt) return null;
-        return /*#__PURE__*/React__default.createElement("span", {
+        var _optTooltip = enableItemTooltip ? _opt.tooltip || _opt.description || _opt[optionLabel] : null;
+        return /*#__PURE__*/React__default.createElement("span", _extends$J({
           style: _objectSpread2({
             marginRight: '6px'
-          }, valueStyle)
-        }, _opt[optionLabel]);
+          }, valueStyle),
+          className: _optTooltip ? 'multiselect-selected-tooltip-trigger' : undefined
+        }, _optTooltip ? {
+          'data-pr-tooltip': _optTooltip,
+          'data-pr-position': 'top'
+        } : {}), _opt[optionLabel]);
       }
       if (index === truncateAt) {
         return /*#__PURE__*/React__default.createElement("span", {
@@ -42976,11 +43838,16 @@ var MultiSelect = function MultiSelect(props) {
       var _selectedOption = flatOptions.find(function (opt) {
         return opt.value === option;
       });
-      return /*#__PURE__*/React__default.createElement("span", {
+      var _optTooltip2 = enableItemTooltip ? (_selectedOption === null || _selectedOption === void 0 ? void 0 : _selectedOption.tooltip) || (_selectedOption === null || _selectedOption === void 0 ? void 0 : _selectedOption.description) || (_selectedOption === null || _selectedOption === void 0 ? void 0 : _selectedOption[optionLabel]) || option : null;
+      return /*#__PURE__*/React__default.createElement("span", _extends$J({
         style: {
           marginRight: '4px'
-        }
-      }, _selectedOption ? "".concat(_selectedOption.label) : "".concat(option), !isLast && /*#__PURE__*/React__default.createElement("span", {
+        },
+        className: _optTooltip2 ? 'multiselect-selected-tooltip-trigger' : undefined
+      }, _optTooltip2 ? {
+        'data-pr-tooltip': _optTooltip2,
+        'data-pr-position': 'top'
+      } : {}), _selectedOption ? "".concat(_selectedOption.label) : "".concat(option), !isLast && /*#__PURE__*/React__default.createElement("span", {
         style: {
           opacity: 0.8
         }
@@ -42992,11 +43859,16 @@ var MultiSelect = function MultiSelect(props) {
       return o.value === option;
     });
     if (!opt) return null;
-    return /*#__PURE__*/React__default.createElement("span", {
+    var optTooltip = enableItemTooltip ? opt.tooltip || opt.description || opt[optionLabel] : null;
+    return /*#__PURE__*/React__default.createElement("span", _extends$J({
       style: _objectSpread2({
         marginRight: '4px'
-      }, valueStyle)
-    }, opt[optionLabel], !isLast && /*#__PURE__*/React__default.createElement("span", {
+      }, valueStyle),
+      className: optTooltip ? 'multiselect-selected-tooltip-trigger' : undefined
+    }, optTooltip ? {
+      'data-pr-tooltip': optTooltip,
+      'data-pr-position': 'top'
+    } : {}), opt[optionLabel], !isLast && /*#__PURE__*/React__default.createElement("span", {
       style: {
         opacity: 0.8
       }
@@ -43058,21 +43930,6 @@ var MultiSelect = function MultiSelect(props) {
       }
     }, isCollapsed ? '+' : "\u2212"));
   };
-  var getSelectedOptionsTooltipText = function getSelectedOptionsTooltipText() {
-    if (selectedOptions.length === 0) return "Aucune option sélectionnée";
-    return selectedOptions.map(function (opt) {
-      if (typeof opt === 'string' || typeof opt === 'number') {
-        var selectedOption = flatOptions.find(function (o) {
-          return o.value === opt || o[optionValue] === opt;
-        });
-        return selectedOption ? selectedOption[optionLabel] : String(opt);
-      }
-      if (_typeof$g(opt) === 'object' && opt !== null) {
-        return opt[optionLabel];
-      }
-      return String(opt);
-    }).join('\n');
-  };
   var BADGE_SIZES = {
     small: {
       fontSize: '10px',
@@ -43270,7 +44127,7 @@ var MultiSelect = function MultiSelect(props) {
           var _multiSelectRef$curre4;
           return (_multiSelectRef$curre4 = multiSelectRef.current) === null || _multiSelectRef$curre4 === void 0 ? void 0 : _multiSelectRef$curre4.hide();
         }
-      }, "Annuler"), /*#__PURE__*/React__default.createElement("button", {
+      }, cancelLabel), /*#__PURE__*/React__default.createElement("button", {
         type: "button",
         className: "ms-apply-btn",
         onClick: function onClick() {
@@ -43278,7 +44135,7 @@ var MultiSelect = function MultiSelect(props) {
           handleApply();
           (_multiSelectRef$curre5 = multiSelectRef.current) === null || _multiSelectRef$curre5 === void 0 || _multiSelectRef$curre5.hide();
         }
-      }, "Appliquer"));
+      }, applyLabel));
     }
     if (hasInfoLine) {
       var length = selectedOptions ? selectedOptions.length : 0;
@@ -43294,7 +44151,7 @@ var MultiSelect = function MultiSelect(props) {
         return prevKey + 1;
       });
     }
-  }, [options, enableItemTooltip]);
+  }, [options, enableItemTooltip, selectedOptions]);
 
   // Ajouter cette logique dans le composant
   useEffect(function () {
@@ -43330,9 +44187,11 @@ var MultiSelect = function MultiSelect(props) {
     }
   }, enableItemTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
     key: tooltipKey,
-    target: ".multiselect-tooltip-item",
+    target: ".multiselect-tooltip-item, .multiselect-tooltip-trigger, .multiselect-selected-tooltip-trigger",
     appendTo: document.body,
     position: "top",
+    autoHide: false,
+    hideDelay: 150,
     style: {
       zIndex: '9999999'
     }
@@ -43359,10 +44218,6 @@ var MultiSelect = function MultiSelect(props) {
       zIndex: 9999999
     }
   }), /*#__PURE__*/React__default.createElement("div", {
-    "data-pr-tooltip": enableItemTooltip ? getSelectedOptionsTooltipText() : null,
-    "data-pr-position": "right",
-    "data-pr-at": "right+5 top",
-    "data-pr-my": "left center-2",
     ref: containerRef,
     className: "multiselect-container custom-target-icon",
     style: {
@@ -44076,17 +44931,27 @@ var MultiSelectPresets = {
     options: [{
       label: 'Option 1',
       value: '1',
-      tooltip: 'Information spécifique à l’option 1'
+      tooltip: '<b>Option 1</b> — <i>information</i> spécifique.<br/>Prise en charge du <u>HTML</u>.'
     }, {
       label: 'Option 2',
-      value: '2',
-      tooltip: 'Détail complémentaire pour l’option 2'
+      value: '2'
+      // tooltip: '<span style="color:#3b82f6">Détail</span> complémentaire pour <b>l’option 2</b>',
     }, {
       label: 'Option 3',
       value: '3',
-      tooltip: 'Contexte métier propre à cette option'
+      tooltip: 'Contexte métier :<ul style="margin:4px 0 0 16px;padding:0"><li>Point 1</li><li>Point 2</li></ul>'
+    }, {
+      label: 'Option 4',
+      value: '4',
+      tooltip: 'Documentation : <a href="https://example.com" target="_blank" rel="noopener" style="color:#60a5fa;text-decoration:underline">ouvrir la doc</a>'
     }],
-    enableItemTooltip: true
+    enableItemTooltip: true,
+    cancelLabel: 'Fermer',
+    applyLabel: 'Appliquer',
+    onApply: function onApply(values) {
+      // eslint-disable-next-line no-console
+      console.log('Selection appliquée :', values);
+    }
   },
   ItemWithLink: {
     placeholder: 'Choisissez une option',
@@ -44371,6 +45236,61 @@ var MultiSelectMetaAsyncPresets = {
     displayCounter: true,
     maxVisibleCounter: 1
   },
+  ItemWithTooltip: {
+    placeholder: 'Survolez une option',
+    options: [{
+      label: 'Option 1',
+      value: '1',
+      tooltip: '<b>Option 1</b> — <i>information</i> spécifique.<br/>Prise en charge du <u>HTML</u>.'
+    }, {
+      label: 'Option 2',
+      value: '2',
+      tooltip: '<span style="color:#3b82f6">Détail</span> complémentaire pour <b>l’option 2</b>'
+    }, {
+      label: 'Option 3',
+      value: '3',
+      tooltip: 'Contexte métier :<ul style="margin:4px 0 0 16px;padding:0"><li>Point 1</li><li>Point 2</li></ul>'
+    }, {
+      label: 'Option 4',
+      value: '4',
+      tooltip: '<b>Cas particuliers</b><br/><small>Utilisation limitée</small>'
+    }, {
+      label: 'Option 5',
+      value: '5',
+      tooltip: 'Réservée aux <b style="color:#ef4444">administrateurs</b>'
+    }, {
+      label: 'Option 6',
+      value: '6',
+      tooltip: '<i>Recommandée</i> pour la <b>production</b>'
+    }, {
+      label: 'Option 7',
+      value: '7',
+      tooltip: 'Compatible avec les <u>anciens systèmes</u>'
+    }, {
+      label: 'Option 8',
+      value: '8',
+      tooltip: 'Optimisée pour les <b>grandes volumétries</b><br/>&gt; 10 M lignes'
+    }, {
+      label: 'Option 9',
+      value: '9',
+      tooltip: 'Nécessite des <span style="color:#f59e0b">droits étendus</span>'
+    }, {
+      label: 'Option 10',
+      value: '10',
+      tooltip: '<b style="color:#ef4444">⚠ À utiliser avec précaution</b>'
+    }, {
+      label: 'Option 11',
+      value: '11',
+      tooltip: 'Documentation : <a href="https://example.com" target="_blank" rel="noopener" style="color:#60a5fa;text-decoration:underline">ouvrir la doc</a>'
+    }],
+    enableItemTooltip: true,
+    cancelLabel: 'Fermer',
+    applyLabel: 'Appliquer',
+    onApply: function onApply(values) {
+      // eslint-disable-next-line no-console
+      console.log('Selection appliquée :', values);
+    }
+  },
   SearchAjaxLoading: {
     placeholder: 'Rechercher (Ajax)…',
     filter: true,
@@ -44436,24 +45356,160 @@ var createFakeOptions = function createFakeOptions(start, length) {
   }
   return options;
 };
+var mockPeople = [{
+  label: 'Alice Martin',
+  value: 1,
+  color: '#ff9900',
+  profession: 'Développeuse',
+  tooltip: 'Alice Martin — Développeuse',
+  link: 'https://example.com'
+}, {
+  label: 'Bruno Lefèvre',
+  value: 2,
+  color: '#3b82f6',
+  profession: 'Chef de projet',
+  tooltip: 'Bruno Lefèvre — Chef de projet',
+  link: 'https://example.com'
+}, {
+  label: 'Chloé Dubois',
+  value: 3,
+  color: '#10b981',
+  profession: 'Designer',
+  tooltip: 'Chloé Dubois — Designer',
+  link: 'https://example.com'
+}, {
+  label: 'David Morel',
+  value: 4,
+  color: '#8b5cf6',
+  profession: 'Data analyst',
+  tooltip: 'David Morel — Data analyst',
+  link: 'https://example.com'
+}, {
+  label: 'Emma Roux',
+  value: 5,
+  color: '#ec4899',
+  profession: 'Product owner',
+  tooltip: 'Emma Roux — Product owner',
+  link: 'https://example.com'
+}, {
+  label: 'Farid Benali',
+  value: 6,
+  color: '#f59e0b',
+  profession: 'DevOps',
+  tooltip: 'Farid Benali — DevOps',
+  link: 'https://example.com'
+}, {
+  label: 'Gaëlle Simon',
+  value: 7,
+  color: '#ef4444',
+  profession: 'QA engineer',
+  tooltip: 'Gaëlle Simon — QA engineer',
+  link: 'https://example.com'
+}, {
+  label: 'Hugo Bernard',
+  value: 8,
+  color: '#10b981',
+  profession: 'Développeur',
+  tooltip: 'Hugo Bernard — Développeur',
+  link: 'https://example.com'
+}];
+var asyncPeople = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var search,
+      _ref2,
+      _ref2$page,
+      page,
+      filtered,
+      pageSize,
+      start,
+      _args = arguments;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+          _ref2 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref2$page = _ref2.page, page = _ref2$page === void 0 ? 1 : _ref2$page;
+          _context.n = 1;
+          return simulateNetworkDelay();
+        case 1:
+          filtered = search ? mockPeople.filter(function (opt) {
+            return opt.label.toLowerCase().includes(search.toLowerCase());
+          }) : mockPeople;
+          pageSize = 30;
+          start = (page - 1) * pageSize;
+          return _context.a(2, {
+            options: filtered.slice(start, start + pageSize),
+            hasMore: start + pageSize < filtered.length,
+            additional: {
+              page: page + 1
+            }
+          });
+      }
+    }, _callee);
+  }));
+  return function asyncPeople() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var mockPeopleHtmlTooltips = mockPeople.map(function (p) {
+  return _objectSpread2(_objectSpread2({}, p), {}, {
+    tooltip: "<b>".concat(p.label, "</b> \u2014 <i>").concat(p.profession, "</i><br/>Contact : <a href=\"mailto:").concat(p.label.split(' ')[0].toLowerCase(), "@arengi.fr\" style=\"color:#60a5fa;text-decoration:underline\">").concat(p.label.split(' ')[0].toLowerCase(), "@arengi.fr</a><br/>Doc : <a href=\"https://example.com\" target=\"_blank\" rel=\"noopener\" style=\"color:#60a5fa;text-decoration:underline\">ouvrir la doc</a>")
+  });
+});
+var asyncPeopleHtmlTooltip = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var search,
+      _ref4,
+      _ref4$page,
+      page,
+      filtered,
+      pageSize,
+      start,
+      _args2 = arguments;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          search = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : '';
+          _ref4 = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : {}, _ref4$page = _ref4.page, page = _ref4$page === void 0 ? 1 : _ref4$page;
+          _context2.n = 1;
+          return simulateNetworkDelay();
+        case 1:
+          filtered = search ? mockPeopleHtmlTooltips.filter(function (opt) {
+            return opt.label.toLowerCase().includes(search.toLowerCase());
+          }) : mockPeopleHtmlTooltips;
+          pageSize = 30;
+          start = (page - 1) * pageSize;
+          return _context2.a(2, {
+            options: filtered.slice(start, start + pageSize),
+            hasMore: start + pageSize < filtered.length,
+            additional: {
+              page: page + 1
+            }
+          });
+      }
+    }, _callee2);
+  }));
+  return function asyncPeopleHtmlTooltip() {
+    return _ref3.apply(this, arguments);
+  };
+}();
 var DropdownSelectMetaAsyncPresets = {
   SelectMetaAsync: {
     options: function () {
-      var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
         var search,
-          _ref,
+          _ref5,
           page,
           allOptions,
           filtered,
           pageSize,
           start,
-          _args = arguments;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+          _args3 = arguments;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
             case 0:
-              search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
-              _ref = _args.length > 2 ? _args[2] : undefined, page = _ref.page;
-              _context.n = 1;
+              search = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '';
+              _ref5 = _args3.length > 2 ? _args3[2] : undefined, page = _ref5.page;
+              _context3.n = 1;
               return simulateNetworkDelay();
             case 1:
               allOptions = createFakeOptions(0, 100);
@@ -44462,7 +45518,7 @@ var DropdownSelectMetaAsyncPresets = {
               });
               pageSize = 30;
               start = (page - 1) * pageSize;
-              return _context.a(2, {
+              return _context3.a(2, {
                 options: filtered.slice(start, start + pageSize),
                 hasMore: start + pageSize < filtered.length,
                 additional: {
@@ -44470,7 +45526,7 @@ var DropdownSelectMetaAsyncPresets = {
                 }
               });
           }
-        }, _callee);
+        }, _callee3);
       }));
       function options() {
         return _options.apply(this, arguments);
@@ -44492,6 +45548,141 @@ var DropdownSelectMetaAsyncPresets = {
       fontSize: '14px',
       fontFamily: 'Arial'
     }
+  },
+  Base: {
+    options: asyncPeople,
+    value: null,
+    placeholder: 'Sélectionnez une option',
+    editable: true,
+    filter: false,
+    showClear: true,
+    valueStyle: {
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      padding: '0',
+      borderRadius: '0',
+      boxShadow: 'none',
+      fontFamily: 'inherit'
+    }
+  },
+  AsyncOptions: {
+    options: asyncPeople,
+    value: 3,
+    placeholder: 'Sélectionnez une option',
+    editable: true,
+    showClear: true,
+    selectMetaConfig: {
+      labelStyle: {
+        fontWeight: 'bold'
+      },
+      generalIcon: 'pi pi-tag'
+    }
+  },
+  SearchAjaxLoading: {
+    // En prod : optionsUrl: '/api/options' (pagination start/length, recherche search[value])
+    options: asyncPeople,
+    placeholder: 'Rechercher (Ajax)…',
+    filter: true,
+    showClear: true
+  },
+  Sorting: {
+    options: asyncPeople,
+    placeholder: 'Tri A→Z / Z→A',
+    filter: true,
+    enableSorting: true,
+    showClear: true
+  },
+  ItemsCheckedToTheTop: {
+    options: asyncPeople,
+    value: 5,
+    placeholder: 'Sélection remontée en haut',
+    itemsCheckedToTheTop: true,
+    showClear: true
+  },
+  OpenOnHover: {
+    options: asyncPeople,
+    placeholder: 'Ouverture au survol',
+    openOnHover: true
+  },
+  ItemWithTooltip: {
+    options: asyncPeopleHtmlTooltip,
+    placeholder: 'Tooltip sur les options',
+    enableItemTooltip: true
+  },
+  ItemWithSecondaryLabel: {
+    options: asyncPeople,
+    placeholder: 'Label secondaire',
+    enableSecondaryLabel: true,
+    secondaryLabelKey: 'profession'
+  },
+  ItemWithLink: {
+    options: asyncPeople,
+    placeholder: 'Lien sur le label secondaire',
+    enableSecondaryLabel: true,
+    secondaryLabelKey: 'profession',
+    enableItemLink: true
+  },
+  Badge: {
+    options: asyncPeople,
+    value: 2,
+    placeholder: 'Badges colorés',
+    withColor: true,
+    selectConfig: {
+      labelStyle: null,
+      generalIcon: null
+    }
+  },
+  WithIcon: {
+    options: asyncPeople,
+    value: 1,
+    placeholder: 'Icône devant chaque option',
+    withIcon: true,
+    selectConfig: {
+      labelStyle: {
+        fontWeight: '400'
+      },
+      generalIcon: 'pi pi-user'
+    }
+  },
+  Truncate: {
+    options: asyncPeople,
+    value: 2,
+    placeholder: 'Label tronqué',
+    truncateAt: 8,
+    valueStyle: {
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      padding: '0',
+      borderRadius: '0',
+      boxShadow: 'none',
+      fontFamily: 'inherit'
+    }
+  },
+  ReadOnly: {
+    options: asyncPeople,
+    value: 4,
+    readOnly: true,
+    showClear: false
+  },
+  Disabled: {
+    options: asyncPeople,
+    value: 4,
+    disabled: true
+  },
+  Required: {
+    options: asyncPeople,
+    value: null,
+    placeholder: 'Sélection obligatoire',
+    required: true,
+    name: 'monchamp',
+    status: 'error',
+    errorMessage: 'Une option doit être sélectionnée'
+  },
+  InfoLine: {
+    options: asyncPeople,
+    placeholder: 'Avec pied de panel',
+    hasInfoLine: true,
+    InfoLineValue: '8 utilisateurs disponibles'
   }
 };