/* ==============================================================================
   SÉLECTEUR DE LANGUE AVEC DRAPEAUX — surcouche visuelle d'un <select> conservé.
   ------------------------------------------------------------------------------
   POURQUOI UN COMPOSANT ET PAS DES EMOJI : un <option> natif ne rend QUE du texte,
   et les emoji drapeaux n'existent pas sous Windows (mesuré le 2026-08-04 :
   « 🇫🇷 » y occupe exactement 2× la largeur d'un indicateur régional seul et ne
   rend qu'UNE couleur au canvas — le navigateur affiche les deux lettres). Un
   drapeau ne peut donc venir que d'une image, donc d'un composant.

   Aucune invention de style : tout est repris des jetons de `fields.css`
   (--w-field-h, --w-field-r, --w-soft, --w-panel, --w-accent, --w-ring), pour que
   le champ soit indiscernable d'un <select> voisin. Le seul ajout visuel est le
   drapeau lui-même.
   ============================================================================ */

/* Le <select> d'origine RESTE dans le DOM (valeur, options, envoi de formulaire,
   restauration). On le retire seulement de la vue et du parcours clavier. */
.fs-native-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.fs-root { position: relative; display: inline-block; }

/* ── Déclencheur : même boîte qu'un .form-select ─────────────────────────────── */
.fs-trigger {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  min-height: var(--w-field-h);
  padding: 0 30px 0 10px;
  font-size: 14px; font-family: inherit; line-height: 1;
  text-align: left;
  color: var(--w-ink);
  background-color: var(--w-panel);
  border: 1px solid var(--w-soft);
  border-radius: var(--w-field-r);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.fs-trigger:hover:not(:disabled):not(:focus) { border-color: var(--w-ink-2); }

/* `outline` transparent conservé : en contraste forcé (Windows), box-shadow n'est
   PAS rendue et le système substitue un contour à cet outline. Sans lui, le focus
   disparaît pour ceux qui en ont le plus besoin. Même raisonnement que fields.css. */
.fs-trigger:focus-visible,
.fs-root[data-open="true"] .fs-trigger {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--w-accent);
  box-shadow: var(--w-ring);
}
.fs-trigger:disabled { opacity: .55; cursor: not-allowed; }

/* Chevron : dessiné en CSS, il suit `currentColor` — donc les deux thèmes et les
   états sans qu'aucune couleur ne soit écrite ici. */
.fs-caret {
  position: absolute; right: 10px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 1.5px solid var(--w-soft);
  border-bottom: 1.5px solid var(--w-soft);
  transform: rotate(45deg);
  transition: transform .16s ease, border-color .14s ease;
  pointer-events: none;
}
.fs-root[data-open="true"] .fs-caret {
  transform: rotate(225deg); margin-top: -2px;
  border-color: var(--w-accent);
}

/* ── Le drapeau ──────────────────────────────────────────────────────────────── */
.fs-flag {
  flex: 0 0 auto;
  width: 21px; height: 14px;
  border-radius: 2px;
  display: block;
  /* Cerne interne : sans lui, un drapeau à bord blanc (JP, NL) se dissout dans le
     panneau. L'ombre portée reste hors du flux, la boîte ne bouge pas. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .13) inset;
}
/* Cale pour les valeurs sans drapeau (« auto », « ar »…) : elle occupe la place
   sans rien dessiner, pour que la colonne de texte reste alignée d'une ligne à
   l'autre. Une ligne plus courte que ses voisines se lit comme une erreur. */
.fs-flag-vide { box-shadow: none; background: none; }

.fs-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Liste ───────────────────────────────────────────────────────────────────── */
.fs-list {
  position: absolute; z-index: 60;
  top: calc(100% + 4px); left: 0; min-width: 100%;
  max-height: 280px; overflow-y: auto;
  margin: 0; padding: 4px;
  list-style: none;
  background-color: var(--w-panel);
  border: 1px solid var(--w-soft);
  border-radius: var(--w-field-r);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .28), 0 2px 6px -2px rgba(0, 0, 0, .12);
}
.fs-root:not([data-open="true"]) .fs-list { display: none; }

.fs-option {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  font-size: 14px; line-height: 1;
  color: var(--w-ink);
  border-radius: calc(var(--w-field-r) - 2px);
  cursor: pointer;
  user-select: none;
}
/* L'option ACTIVE au clavier et l'option SURVOLÉE partagent le même repère : deux
   marqueurs concurrents feraient croire à deux curseurs. */
.fs-option:hover,
.fs-option[data-active="true"] { background-color: var(--w-canvas); }

.fs-option[aria-selected="true"] { font-weight: 600; }
/* Coche : marquer la sélection par la seule graisse ne se voit pas à 14 px. */
.fs-option[aria-selected="true"]::after {
  content: ""; margin-left: auto;
  width: 5px; height: 9px;
  border-right: 2px solid var(--w-accent);
  border-bottom: 2px solid var(--w-accent);
  transform: rotate(45deg) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .fs-trigger, .fs-caret { transition: none; }
}