/* ============================================================
   Sélecteur de langue FR / EN — partagé par index.html et roadmap.html.
   Un seul bouton rond affichant le drapeau de la langue VERS laquelle il
   bascule (le drapeau UK quand le site est en français, le drapeau
   français quand il est en anglais). Volontairement compact (40px, comme
   le bouton burger et l'icône téléphone du menu mobile) : la rangée
   logo/menu/CTA/réseaux sociaux de l'en-tête est déjà dense (voir
   custom-fixes.css, section "EN-TÊTE MOBILE") et un bouton texte "FR / EN"
   plus large y faisait déborder le menu et le CTA sur deux lignes.

   Les deux drapeaux (data-flag="fr" / data-flag="en") sont tous les deux
   dans le DOM : js/i18n.js bascule l'attribut hidden sur l'un des deux
   plutôt que de réécrire le SVG, plus simple et sans flash de contenu. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(17, 24, 40, 0.14);
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lang-toggle:hover {
  border-color: #bd8b17;
  transform: translateY(-1px);
}

.lang-toggle:focus-visible {
  outline: 2px solid #bd8b17;
  outline-offset: 2px;
}

.lang-flag {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(17, 24, 40, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lang-toggle [data-flag][hidden] {
  display: none;
}