/**
 * Nooma — sélecteur de langue.
 *
 * Trois liens, pas un menu déroulant : avec seulement trois langues, un menu
 * ajoute un clic et cache l'information. Ce sont de vrais liens vers de
 * vraies adresses — c'est ce qui permet à Google de découvrir les versions
 * traduites, et à un visiteur de partager la page dans sa langue.
 */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(245, 239, 224, 0.03);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink-faint);
  transition: color .2s ease, background-color .2s ease;
}

.lang-switch a:hover { color: var(--ink); }

/* La langue courante est indiquée par la couleur ET par aria-current, pour
   que le repère existe aussi hors de la vue — lecteur d'écran, contraste
   élevé, daltonisme. */
.lang-switch a[aria-current="true"] {
  background: var(--gold);
  color: var(--gold-ink);
}

/* L'arabe se lit dans une autre police : sans ça, le « ع » du sélecteur
   tombe sur une police de repli au rendu incertain selon l'appareil. */
.lang-switch a[lang="ar"] {
  font-family: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1;
}

/* Sur mobile, le sélecteur reste visible alors que le menu se replie :
   c'est un repère d'orientation, pas une option secondaire. Quelqu'un qui
   arrive en français sur un téléphone doit voir immédiatement qu'il peut
   passer à l'arabe, sans avoir à deviner qu'il faut ouvrir un menu. */
@media (max-width: 620px) {
  .lang-switch { padding: 2px; }
  .lang-switch a { min-width: 26px; height: 22px; padding: 0 6px; font-size: 10px; }

  /* Le sélecteur occupe environ 100 px dans une barre qui n'en avait plus.
     Résultat mesuré le 24/08/2026 : 18 px de débordement horizontal sur un
     écran de 375 px. Le bouton d'appel à l'action est le sacrifice logique —
     il figure déjà dans le menu déroulant, à un cran de distance, tandis que
     le choix de la langue n'existe nulle part ailleurs. */
  .nav-actions .btn-primary { display: none; }
}