/* Sélecteur de langue (js/components/LangSelect.js) + sa place sur l'écran de connexion.
   Fichier IDENTIQUE dans le CRM et le Prospector ; n'utilise que les jetons communs
   aux deux applications (css/index.css). */

.lang-select {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-muted);
}
.lang-select-ico { width: 14px; height: 14px; flex: none; }

.lang-select-input {
  -webkit-appearance: none; appearance: none;
  min-height: 32px;
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit; font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lang-select-input:hover { background-color: var(--bg-hover); }
.lang-select-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* Liste déroulante native : couleurs lisibles dans les deux thèmes. */
.lang-select-input option { background: var(--bg-surface); color: var(--text); }

/* Chevron dessiné en CSS (suit currentColor, donc le thème). */
.lang-select::after {
  content: ""; position: absolute; right: 11px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Variante compacte : libellé masqué visuellement, toujours lu par les lecteurs d'écran. */
.lang-select.compact .lang-select-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Écran de connexion : sous la carte, centré. */
.auth-lang { display: flex; justify-content: center; margin-top: 16px; }