/* =====================================================================
   LE SÉLECTEUR DE LANGUE — un habillage, cinq thèmes
   =====================================================================
   Cette feuille n'est servie QUE sur un site qui sert plus d'une langue.
   Un site monolingue ne la demande pas et n'en porte pas la balise : pas
   un octet ne bouge sur le parc déjà livré.

   ELLE NE CONNAÎT AUCUN THÈME, ET C'EST LA CONDITION POUR N'EN
   CONTREDIRE AUCUN. Pas une couleur, pas une police, pas une mesure qui
   leur appartienne : `currentColor`, des `em`, et de l'opacité. Le
   sélecteur vit dans `.menu`, il hérite donc de la voix de l'en-tête —
   la couleur du thème, sa police, sa graisse — sans qu'aucun thème ait
   eu à le prévoir.

   UNE SEULE PLACE DANS LE DOCUMENT, DEUX PLACES À L'ÉCRAN. Il est écrit
   en premier dans `.menu` : c'est ce qu'il faut pour le panneau mobile,
   où il doit être en haut et entrer tôt dans la boucle de focus. Sur
   grand écran, `order` le renvoie après la liste, donc à droite de la
   barre. Les cinq thèmes posent `.menu { display: flex }` au-dessus de
   900 px et en font un panneau en dessous : la bascule est la même
   partout, et c'est vérifié.
   ===================================================================== */

.langues { flex: 0 0 auto; }

.langues__liste {
  display: flex;
  align-items: center;
  gap: 0.15em;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La langue courante est lisible, les autres sont en retrait — mais
   jamais au point d'être illisibles : 0.6 sur un texte d'en-tête reste
   au-dessus du contraste exigé dans les cinq thèmes. C'est le rapport,
   et non la couleur, qui distingue : une couleur d'accent aurait été
   juste dans un thème et fausse dans les quatre autres. */
.langues__lien {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-size: 0.78em;
  letter-spacing: 0.09em;
  line-height: 1;
  padding: 0.5em 0.45em;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.langues__lien:hover,
.langues__lien:focus-visible { opacity: 1; }

/* La version qu'on lit se souligne : l'opacité seule ne se voit pas sur
   une capture, ne se voit pas en noir et blanc, et ne se dit pas à voix
   haute. `aria-current` le dit à qui écoute, le trait le dit à qui
   regarde. */
.langues__lien[aria-current] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: from-font;
}

/* ---------- Grand écran : à la fin de la barre, donc à droite -------- */

@media (min-width: 900px) {
  .langues { order: 1; }

  /* ET IL NE SE LIT PAS COMME UNE ENTRÉE DE MENU. Posé à l'écart des
     entrées d'un cran de menu ordinaire — les cinq thèmes emploient le
     même — il en avait l'air. La moitié de cet écart en plus suffit à
     dire que c'est autre chose : mesuré, l'écart passe de 32 à 48 px à
     1440, de 22 à 33 px à 1024. */
  .langues { margin-left: clamp(0.5rem, 1.2vw, 1rem); }
}

/* ---------- Petit écran : en haut du panneau ouvert ------------------
   La sélection est plus forte que celle des thèmes — `.js .menu a` fait
   0,2,1 — parce qu'ils dessinent leurs entrées de menu en pleine largeur
   et en hauteur de doigt. Une rangée de deux codes de langue n'est pas
   une entrée de menu : elle garde sa taille, et gagne les 44 px de haut
   qu'un doigt réclame. */

@media (max-width: 899px) {
  /* LE PANNEAU OUVERT — trois réglages, et tous les trois sont des
     distances mesurées, pas des impressions.

     AU MÊME FER QUE LES ENTRÉES — sans imposer un fer. Le lien avait
     une largeur minimale de 44 px et son texte y était centré : « FR »
     commençait donc douze pixels plus à droite que « La maison ». La
     boîte épouse maintenant son texte, et le premier lien perd son
     retrait de gauche — le glyphe commence alors exactement où commence
     la première entrée. La hauteur de 44 px, elle, reste : c'est la
     place d'un doigt, et elle ne se négocie pas.

     ET CELA MARCHE AUSSI QUAND LE THÈME CENTRE SON PANNEAU. Forcer le
     texte à gauche de sa boîte aurait désaligné bruyère, qui centre ses
     entrées : le sélecteur serait parti douze pixels trop à gauche.
     Une boîte qui épouse son texte se centre juste et se ferre juste,
     sans que la feuille ait à savoir lequel des deux le thème fait.

     PLUS PRÈS DE LA BARRE, PLUS LOIN DU MENU. Le sélecteur remonte d'un
     tiers vers l'enseigne et s'écarte d'un quart de la première entrée :
     il cesse d'appartenir à la liste et se rattache à ce qui identifie
     le site. Les valeurs sont en `rem`, donc elles suivent la taille de
     texte de chaque thème. */
  .langues {
    order: -1;
    margin-top: -0.75rem;
    margin-bottom: 0.375rem;
  }

  .menu .langues .langues__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    min-width: 0;
    padding: 0.6em 0.45em;
    font-size: 0.9rem;
    border: 0;
  }

  .menu .langues .langues__liste > li:first-child .langues__lien {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .langues__lien { transition: none; }
}