/* ---------------------------------------------------------------------------
   Alpeia — i18n.css
   Apport de la variante multilingue : bascule de langue dans l'en-tete et
   bandeau de contexte en tete de page.

   Regles tenues :
     - aucune valeur de charte n'est recopiee ici : ce fichier consomme la
       couche semantique de tokens.css (--color-*, --text-*, --space-*,
       --control-height, ...), la meme que base.css et components.css ;
     - aucune couleur litterale (charte §8.1) ;
     - cible tactile >= 44 px (charte R-A5) : min-height: var(--control-height) ;
     - etat courant porte par [aria-current] (charte §8.1 : l'etat ne peut pas
       diverger du balisage) ;
     - l'anneau de focus vient de base.css (a:focus-visible), pas d'ici.
   Les fichiers de charte (tokens.css, base.css, components.css) ne sont pas
   modifies ; tools/check_css_tokens.py compare leur empreinte a t_540564a4.
--------------------------------------------------------------------------- */

.alpeia-langues {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.alpeia-langue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding-inline: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) var(--ease-standard);
}

.alpeia-langue:hover {
  color: var(--color-text);
}

.alpeia-langue[aria-current] {
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Bandeau de contexte : rappelle en tete de page dans quelle langue la page est
   lue, et propose l'autre langue. Il ne remplace pas la bascule de l'en-tete et
   n'ajoute aucune entree dans les deux entrees de navigation. */
.alpeia-contexte {
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.alpeia-contexte__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-2);
}

.alpeia-contexte p {
  margin: 0;
}

.alpeia-contexte__lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  color: var(--color-link);
  font-weight: var(--weight-strong);
}

.alpeia-contexte strong,
.alpeia-contexte__lien {
  color: var(--color-text);
}