/* ===== file: /assets/css/components/hs-combo.css ===== */
/* Composant « dropdown custom » partagé (accueil + properties).
   Un <select data-hs-combo> est enrichi en JS (hero-select.js) : son hôte (parent
   direct) reçoit .hs-combo-host puis .hs-on, et un bouton + un panneau custom sont
   injectés. Le <select> natif reste dans le DOM (caché) → il porte name + value,
   donc la soumission/filtrage côté page reste inchangé.

   La SURFACE du bouton est pilotée par des variables, pour matcher le style des
   champs de chaque page (à définir sur le conteneur hôte) :
     --hs-btn-h       hauteur du bouton            (def. 54px)
     --hs-btn-radius  rayon                        (def. 16px)
     --hs-btn-bg      fond                         (def. #fff)
     --hs-btn-border  bordure                      (def. gris clair)
     --hs-btn-color   couleur du texte            (def. #0b1220)
     --hs-btn-shadow  ombre                        (def. douce)
     --hs-accent      teinte focus/hover           (def. teal) */

.hs-combo-host { position: relative; }

/* Par défaut : select natif visible, custom masqué */
.hs-combo__btn,
.hs-combo__panel { display: none; }

/* Champ enrichi : select natif masqué (mais soumettable), bouton custom visible */
.hs-combo-host.hs-on > select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  pointer-events: none;
}
.hs-combo-host.hs-on .hs-combo__btn { display: flex; }

.hs-combo__btn {
  width: 100%;
  height: var(--hs-btn-h, 54px);
  align-items: center;
  gap: 8px;
  border-radius: var(--hs-btn-radius, 16px);
  border: 1px solid var(--hs-btn-border, rgba(148, 163, 184, .45));
  background: var(--hs-btn-bg, #ffffff);
  color: var(--hs-btn-color, #0b1220);
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  box-shadow: var(--hs-btn-shadow, 0 10px 24px rgba(2, 6, 23, .08));
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hs-combo__btn:hover { border-color: var(--hs-accent, rgba(13, 148, 136, .4)); }
.hs-combo-host.is-open .hs-combo__btn {
  border-color: var(--hs-accent, rgba(13, 148, 136, .55));
  box-shadow: 0 0 0 4px rgba(13, 148, 136, .14);
}

.hs-combo__value {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-combo__caret {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #0f766e;
  transition: transform .18s ease;
}
.hs-combo-host.is-open .hs-combo__caret { transform: rotate(180deg); }

/* Panneau déroulant (popup ancré sous le champ) — affichage piloté par .is-open */
.hs-combo__panel.is-open { display: block; }
.hs-combo__panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 60;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, .18);
  overflow: hidden;
  padding: 6px;
}

/* Barre de recherche (champs avec data-hs-search) */
.hs-combo__search { padding: 2px 2px 6px; }
.hs-combo__search-input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: #f8fafc;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  color: #0b1220;
}
.hs-combo__search-input:focus {
  border-color: rgba(13, 148, 136, .55);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .12);
}

/* Liste : ~3 options visibles puis scroll (3 × 44px) */
.hs-combo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hs-combo__opt {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  color: #0b1220;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-combo__opt:hover,
.hs-combo__opt.is-active { background: rgba(13, 148, 136, .10); }
.hs-combo__opt.is-selected {
  color: #0f766e;
  font-weight: 800;
  background: rgba(13, 148, 136, .08);
}
.hs-combo__empty {
  padding: 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* Scrollbar discrète */
.hs-combo__list::-webkit-scrollbar { width: 8px; }
.hs-combo__list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, .18);
  border-radius: 8px;
}