/* =========================================
   LANG SELECTOR — Sélecteur de langue
   ========================================= */
.lang-selector {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: -.5rem;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .4;
  padding: .25rem .1rem;
  /* Reste en 400 au repos, contrairement aux liens de nav : en 12px
     capitales et à 40% d'opacité, un 300 deviendrait illisible. */
  font-weight: 400;
  transform-origin: center center;
  transition: opacity .3s ease,
              transform .45s var(--ease-out),
              font-weight .2s linear;
  line-height: 1;
}

/* Même hover que les liens de nav : scale + forte montée en graisse */
.lang-btn:hover {
  opacity: .75;
  transform: scale(1.1);
  font-weight: 700;
}

/* 700 et non 600 : 600 n'existe pas en fichier et était déjà rendu en 700.
   L'écrire explicitement évite une transition de graisse sans effet. */
.lang-btn.is-active { opacity: 1; font-weight: 700; }
/* La langue active est déjà en gras : au survol elle ne fait que grossir */
.lang-btn.is-active:hover { opacity: 1; font-weight: 700; }

.lang-sep {
  font-size: .6rem;
  opacity: .25;
  user-select: none;
}

@media (max-width: 720px) {
  .lang-btn { font-size: .7rem; }
}