/**
 * /app/styles/lang-switcher.css — le sélecteur de langue, landing et invité.
 *
 * Deux surfaces, deux systèmes de tokens : la landing tourne encore sur les
 * variables historiques (--color2, --colorfont, --RADIUS), le dashboard sur le
 * design system (--surface-2, --text, --radius-md). Plutôt que deux feuilles,
 * on déclare ici des variables locales qui prennent le token du design system
 * quand il existe et retombent sur l'ancien sinon — la même règle habille donc
 * les deux pages sans savoir laquelle elle habille.
 *
 * Il y avait un TROISIÈME niveau, littéral, qui n'a jamais servi : la landing
 * charge styles/sombre.css, où --color2, --color4, --color5 et --colorfont sont
 * tous définis. Le niveau 2 y résout donc toujours, et §1.6 interdit le reste.
 */

[data-lang-switcher] {
  --ls-surface:       var(--surface-2, var(--color2));
  --ls-surface-hover: var(--surface-3, var(--color4));
  --ls-text:          var(--text, var(--colorfont));
  --ls-border:        var(--border, color-mix(in srgb, var(--colorfont) 12%, transparent));
  --ls-radius:        var(--radius-md, var(--RADIUS, 8px));
  --ls-accent:        var(--primary, var(--color5));
}

/* Landing : épinglé en haut à droite, au-dessus du formulaire. */
#lang-switcher {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 1000;
}

.lang-toggle {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  padding: .5rem .75rem;
  color: var(--ls-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  opacity: .8;
  transition: opacity .2s, background .2s;
}

.lang-toggle:hover {
  opacity: 1;
  background: var(--ls-surface-hover);
}

#lang-switcher .lang-toggle::before {
  content: '🌐';
  font-size: 1.1rem;
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  inset-inline-end: 0;
  min-width: 180px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  box-shadow: 0 4px 12px color-mix(in srgb, #000 50%, transparent);
  z-index: 1001;
}

.lang-menu.show { display: block; }

.lang-option {
  padding: .65rem 1rem;
  color: var(--ls-text);
  cursor: pointer;
  transition: background .15s;
  font-size: .9rem;
}

.lang-option:hover,
.lang-option:focus-visible {
  background: var(--ls-surface-hover);
  outline: none;
}

.lang-option.active {
  background: var(--ls-accent);
  font-weight: 600;
}

/* Mode invité : le sélecteur est une entrée du pied de sidebar, donc le bouton
   emprunte l'habillage de .gt-sidebar-link (rendu par sidebar.js) et ne porte
   rien ici. Le menu, lui, doit sortir de la sidebar : #gt-sidebar est en
   overflow:hidden, un menu en `absolute` y serait coupé. D'où `fixed`, avec la
   position calculée à l'ouverture par lang-switcher.js. */
.lang-switcher-sidebar { position: relative; }

.lang-switcher-sidebar .lang-toggle {
  width: 100%;
  background: none;
  border: none;
  opacity: 1;
  padding: 8px 10px;
  /* Un <button> n'hérite ni de la police ni de l'alignement : sans ces quatre
     lignes il jurerait avec les <a> voisins du pied de sidebar. */
  font-family: inherit;
  font-size: var(--font-sm, .9rem);
  font-weight: var(--fw-medium, 500);
  color: var(--text-muted, var(--ls-text));
  text-align: start;
  justify-content: flex-start;
}

.lang-switcher-sidebar .lang-toggle:hover {
  color: var(--text, var(--ls-text));
}

.lang-switcher-sidebar .lang-menu {
  position: fixed;
  top: auto;
  inset-inline-end: auto;
  min-width: 200px;
  max-height: min(400px, 60vh);
  z-index: 3000;
}

@media (prefers-reduced-motion: reduce) {
  .lang-toggle,
  .lang-option { transition: none; }
}