/* Liste déroulante maison (13/11/2026, js/liste-deroulante.js) : le panneau qui remplace la liste du système quand on
   ouvre un <select>. Une surface pleine qui flotte (seule exception à « jamais d'ombre » : ce qui flotte), arête haute,
   ombre en couches ; l'option survolée ou atteinte au clavier en voile ; l'option courante porte le faisceau de la
   marque à gauche et une coche bleue. Jetons de l'application (../assets/tokens.css), repli sur ceux du scan et du
   rapport (--hv-*, ../rapport/jetons.css) : la même feuille sert les deux. Aucun littéral de couleur. */
.ld-panneau {
  --ld-fond: var(--panneau-2, var(--hv-panneau-2));
  --ld-trait: var(--trait-fort, var(--hv-trait-fort));
  --ld-encre: var(--encre, var(--hv-encre));
  --ld-encre-2: var(--encre-2, var(--hv-encre-2));
  --ld-actif: var(--voile-3, var(--hv-voile-3));
  --ld-bleu: var(--bleu-texte, var(--hv-bleu-texte));
  position: fixed; inset: auto; z-index: 220; box-sizing: border-box; margin: 0; padding: 6px;
  width: max-content; min-width: 180px; max-width: calc(100vw - 16px); overflow: visible;
  border: 1px solid var(--ld-trait); border-radius: var(--rayon-3, var(--hv-rayon-3));
  background: var(--ld-fond); color: var(--ld-encre);
  box-shadow: var(--trait-lumiere, var(--hv-trait-lumiere)), var(--ombre-flottante, var(--hv-ombre-flottante));
  font-family: var(--police, var(--hv-police)); font-size: 14px; line-height: 1.35; text-align: left;
  transform-origin: top center; animation: ld-ouvre 140ms cubic-bezier(0.2, 0, 0, 1) both;
}
.ld-panneau[data-cote="haut"] { transform-origin: bottom center; animation-name: ld-ouvre-haut; }
.ld-panneau:popover-open { display: block; }

@keyframes ld-ouvre { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ld-ouvre-haut { from { opacity: 0; transform: translateY(4px) scale(0.985); } to { opacity: 1; transform: none; } }

.ld-liste {
  max-height: 308px; overflow-y: auto; overscroll-behavior: contain; outline: none;
  scrollbar-width: thin; scrollbar-color: var(--voile-4, var(--hv-voile-4)) transparent;
}
.ld-liste:focus-visible { box-shadow: none; }

.ld-option {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 7px 10px 7px 14px;
  border-radius: var(--rayon-2, var(--hv-rayon-2)); color: var(--ld-encre-2); cursor: pointer; user-select: none;
  transition: background-color 90ms linear, color 90ms linear;
}
.ld-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 1px; }
.ld-libelle { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Détail (data-ld-detail) : discret, poussé à droite ; s'il ne tient pas, il passe dessous, aligné sur le libellé. */
.ld-detail { flex: 0 1 auto; margin-left: auto; font-size: var(--taille-etiquette, var(--hv-taille-etiquette)); font-weight: var(--graisse-corps, var(--hv-graisse-corps)); color: var(--ld-encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-option.ld-actif .ld-detail, .ld-option[aria-selected="true"] .ld-detail { color: var(--ld-encre-2); }
/* Logo (data-ld-logo) : disque de 20 px ; repli à l'initiale sur le voile, jamais d'image cassée. */
.ld-logo { flex: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--voile-3, var(--hv-voile-3)); box-shadow: inset 0 0 0 1px var(--trait, var(--hv-trait)); }
/* Une image de logo, une fois chargée, se pose sur un disque clair (un logo noir détouré reste lisible sur le panneau
   sombre) ; avant, le disque reste en voile : jamais de rond blanc vide. */
img.ld-logo { object-fit: contain; padding: 2px; }
img.ld-logo.ld-charge { background: var(--encre, var(--hv-encre)); }
.ld-initiale { display: inline-grid; place-items: center; font-size: 10px; font-weight: var(--graisse-forte, var(--hv-graisse-forte)); line-height: 1; color: var(--ld-encre); }
/* Drapeau (data-ld-pays, js/drapeaux.js) : 14 px de haut, coins et filet repris de `.drapeau` (redits ici pour le scan). */
.ld-pays { flex: none; display: inline-flex; justify-content: center; align-items: center; width: 28px; }
.ld-option .drapeau { --drapeau-hauteur: 14px; position: relative; display: inline-flex; flex: none; border-radius: 3px; overflow: hidden; line-height: 0; }
.ld-option .drapeau svg { display: block; width: auto; height: var(--drapeau-hauteur); max-width: none; }
.ld-option .drapeau::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ld-trait); pointer-events: none; }
.ld-coche { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ld-bleu); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

/* Survolée ou atteinte au clavier : un voile, le texte passe à l'encre pleine. */
.ld-option.ld-actif { background: var(--ld-actif); color: var(--ld-encre); }
/* Le choix courant : texte plein, coche, et le faisceau de la marque en filet vertical (le même que l'onglet actif). */
.ld-option[aria-selected="true"] { color: var(--ld-encre); font-weight: var(--graisse-moyenne, var(--hv-graisse-moyenne)); }
.ld-option[aria-selected="true"] .ld-coche { opacity: 1; }
.ld-option[aria-selected="true"]::before {
  content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--bleu, var(--hv-bleu)), var(--bleu-clair, var(--hv-bleu-clair)));
  box-shadow: var(--lueur-point, 0 0 0 transparent);
}
.ld-option[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.ld-option[aria-disabled="true"].ld-actif { background: transparent; }

/* Groupes (<optgroup>) : un titre en étiquette, un filet entre deux groupes. */
.ld-groupe + .ld-groupe, .ld-option + .ld-groupe { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--trait, var(--hv-trait)); }
/* Une option hors groupe qui suit un groupe : un filet la sépare, sinon elle semblerait en faire partie. */
.ld-groupe + .ld-option { margin-top: 9px; }
.ld-groupe + .ld-option::after { content: ""; position: absolute; left: 4px; right: 4px; top: -5px; border-top: 1px solid var(--trait, var(--hv-trait)); pointer-events: none; }
.ld-groupe-titre { padding: 8px 14px 4px; font-size: var(--taille-etiquette, var(--hv-taille-etiquette)); font-weight: var(--graisse-moyenne, var(--hv-graisse-moyenne)); color: var(--ld-encre-2); }
.ld-groupe .ld-option { padding-left: 22px; }
.ld-groupe .ld-option[aria-selected="true"]::before { left: 12px; }

/* Au doigt sur grand écran (tablette) : des lignes plus hautes. */
@media (pointer: coarse) { .ld-option { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .ld-panneau { animation: none; }
  .ld-option { transition: none; }
}

/* Contraste élevé de Windows : bords et option active rendus par le système. */
@media (forced-colors: active) {
  .ld-panneau { border-color: CanvasText; }
  .ld-option.ld-actif { outline: 2px solid Highlight; outline-offset: -2px; }
  .ld-coche { stroke: CanvasText; }
}

/* ---------- Le bouton fermé hors des .sel (formulaires.css habille ceux-là) ---------- */
/* Liste du scan (select.champ-saisie, chevron en image de fond) : ouverte, le chevron pointe vers le haut et le bord
   s'allume comme au focus. */
select.champ-saisie[data-ld-ouvert] { border-color: var(--hv-bleu-texte, var(--bleu-texte)); box-shadow: var(--hv-focus, var(--anneau-focus)); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 15 6-6 6 6'/></svg>"); }

/* Encore des options à faire défiler : le bord concerné s'efface en fondu (posé par le script, `data-suite`). */
.ld-liste[data-suite="bas"] { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.ld-liste[data-suite="haut"] { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(0deg, #000 calc(100% - 28px), transparent); }
.ld-liste[data-suite="haut bas"] { -webkit-mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }