/* DYS.MA - liste deroulante avec recherche (combobox). Jetons du design system uniquement.
   Le <select> natif reste dans le formulaire mais n'est plus affiche ; le champ reprend les classes du
   select (.in, .ui-select...) donc son apparence. La liste est une COUCHE fixe au-dessus de la page (rattachee
   a <body> ou a la fenetre ouverte) : jamais rognee par un conteneur ; hauteur = espace libre, ouverte vers le haut au besoin. */
.cbx { position: relative; display: block; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }
.filters .cbx, .hub-filtres .cbx, .hub-filters .cbx { display: inline-block; inline-size: auto; }
.hub-bar .cbx { display: inline-block; flex: 0 1 220px; inline-size: auto; min-inline-size: 150px; }
.cbx-natif {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px;
  margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden;
}
.cbx-champ {
  inline-size: 100%; box-sizing: border-box; padding-inline-end: var(--ds-sp-8);
  background-repeat: no-repeat; background-position: right var(--ds-sp-3) center; background-size: 12px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  text-overflow: ellipsis;
}
.cbx-champ:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 1px; }
.cbx.is-inactif .cbx-champ { cursor: not-allowed; }
.cbx-liste {
  position: fixed; z-index: var(--ds-z-dropdown); inset-inline: auto; inset-block-end: auto;
  inset-inline-start: var(--cbx-x, 0); inset-block-start: var(--cbx-y, 0); inline-size: var(--cbx-w, auto);
  box-sizing: border-box; max-block-size: var(--cbx-max, 16rem); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: var(--ds-sp-1); list-style: none;
  background: var(--ds-surface); color: var(--ds-text);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md); box-shadow: var(--ds-sh-2);
}
.cbx-liste[hidden] { display: none; }
.cbx-liste.cbx-liste--haut { inset-block-start: auto; inset-block-end: var(--cbx-y, 0); }
.cbx-option, .cbx-vide {
  min-block-size: var(--ds-ctl-dense); display: flex; align-items: center; box-sizing: border-box;
  padding: var(--ds-sp-1) var(--ds-sp-3); border-radius: var(--ds-r-sm);
  font-size: var(--ds-fs-md); line-height: var(--ds-lh-tight); overflow-wrap: anywhere; cursor: pointer;
}
.cbx-option[hidden], .cbx-vide[hidden], .cbx-groupe[hidden] { display: none; }
.cbx-option.is-actif { background: var(--ds-primary-soft); color: var(--ds-primary-text); }
.cbx-option[aria-selected="true"] { font-weight: 600; }
.cbx-option.is-inactive { color: var(--ds-text-subtle); cursor: not-allowed; }
.cbx-vide { color: var(--ds-text-muted); cursor: default; font-style: italic; }
.cbx-groupe {
  padding: var(--ds-sp-2) var(--ds-sp-3) var(--ds-sp-1); font-size: var(--ds-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ds-text-muted);
}
@media (max-width: 767.98px) {
  .cbx-champ { font-size: 16px; min-block-size: var(--ds-ctl-touch); }
  .cbx-option, .cbx-vide { min-block-size: var(--ds-ctl-touch); }
  
}