/* -----------------------------------------------------------------
   Selecteur de langues.
   Il reutilise le composant .nav-dropdown de l'en-tete, donc aucun
   JavaScript nouveau : navigation.js pilote deja tout [data-dropdown].
   Seules les differences visuelles sont ici. A fondre dans main.css
   au prochain rebuild global, avec partenaires.css.
   ----------------------------------------------------------------- */

/* Le menu est le dernier de la barre : il s'ouvre vers la gauche,
   sinon il deborde du bord droit de l'ecran. */
.nav-dropdown--lang .nav-dropdown__menu {
  left: auto;
  right: -.2rem;
  min-width: 12.5rem;
}

.nav-dropdown--lang .nav-dropdown__trigger { gap: .4em; }

.nav-dropdown__globe {
  width: 17px; height: 17px; flex: 0 0 auto;
  opacity: .85;
}
.nav-dropdown--lang .nav-dropdown__trigger:hover .nav-dropdown__globe { opacity: 1; }

.nav-dropdown__lang-code {
  font-weight: 600;
  letter-spacing: .04em;
  font-size: .92rem;
}

/* La langue courante reste cliquable mais se distingue. */
.nav-dropdown__menu--lang a[aria-current] { font-weight: 700; }
.nav-dropdown__menu--lang a[aria-current]::after {
  content: "\2713";
  position: absolute;
  right: 1.1rem;
  color: var(--color-brand-primary);
  font-weight: 700;
}

/* Menu mobile : meme rendu que les autres groupes, plus le marqueur. */
.mobile-menu__group--lang a[aria-current] { font-weight: 700; }
.mobile-menu__group--lang a[aria-current]::after {
  content: "\2713";
  margin-left: .45em;
  color: var(--color-brand-primary);
}

@media (max-width: 1100px) {
  .nav-dropdown--lang .nav-dropdown__trigger .nav-dropdown__chevron { display: none; }
}

/* -----------------------------------------------------------------
   Liens de definition vers le lexique, poses dans le corps des
   articles. Souligne pointille, pour les distinguer d'un lien de
   navigation : le lecteur voit qu'il va vers une definition, pas
   vers une autre page de contenu.
   ----------------------------------------------------------------- */
.blog-article a.lex {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  color: inherit;
  font-weight: 500;
}
.blog-article a.lex:hover {
  color: var(--color-brand-primary);
  text-decoration-style: solid;
}
.blog-article a.lex:focus-visible {
  outline: 2px solid var(--color-energy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -----------------------------------------------------------------
   Un lien pose dans le corps d'une definition du lexique heritait de
   la couleur du texte, sans soulignement ni graisse : il etait
   invisible. On lui donne le meme traitement que les liens du bloc
   « Voir aussi », plus un soulignement, puisqu'il est en pleine phrase.
   ----------------------------------------------------------------- */
.gl-entry__def a {
  color: var(--color-brand-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}
.gl-entry__def a:hover { text-decoration-thickness: 2px; }
.gl-entry__def a:focus-visible {
  outline: 2px solid var(--color-energy);
  outline-offset: 2px;
  border-radius: 2px;
}