/* Sélecteur de langue (menu déroulant, globe + liste) — voir views/partials/lang_switcher.php.
   Fichier séparé plutôt qu'ajouté à base.css : celui-ci est déjà au-dessus de la limite de 300
   lignes du projet (découpage prévu séparément, ne pas l'aggraver ici). Reprend le style du menu
   contextuel des cartes (.ctx-menu, pages.css) pour rester cohérent visuellement. */

.lang-switcher { position: relative; }

/* border-radius/hauteur alignés sur .head-icon (base.css, bouton notifs) — retour Noé 2026-08-19 :
   « il est rond alors qu'on le veut carré », la pilule détonnait à côté du carré des notifs. */
.lang-switcher-toggle {
  display: flex; align-items: center; gap: 5px; height: 36px;
  padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--border);
  color: var(--ink-dim); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; list-style: none; user-select: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lang-switcher-toggle::-webkit-details-marker { display: none; }
.lang-switcher-toggle:hover { color: var(--ink); border-color: var(--border-strong); }
.lang-switcher[open] .lang-switcher-toggle { color: var(--accent); border-color: var(--accent); }

.lang-switcher-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 90;
  min-width: 140px; padding: 6px;
  background: color-mix(in srgb, var(--bg-panel, #0c1220) 92%, #000);
  border: 1px solid var(--border-strong); border-radius: var(--r-md, 10px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; gap: 2px; animation: popIn 0.12s ease-out;
}

.lang-switcher-option {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 7px; background: transparent; border: 0; cursor: pointer;
  color: var(--ink); font: inherit; font-size: 0.86rem;
}
.lang-switcher-option:hover, .lang-switcher-option:focus-visible { background: var(--accent-soft); color: var(--accent); }
.lang-switcher-option.active { color: var(--gold); font-weight: 600; }

@media (max-width: 720px) {
  .lang-switcher-toggle span { display: none; }
}