/* Bouton FR | EN dans l'en-tête du site (en haut à droite). Texte blanc sur fond sombre :
   l'en-tête est transparent sur le diaporama puis devient noir au défilement. */
.bp-lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .75); border-radius: 2px; vertical-align: middle; }
.bp-lang button {
  min-width: 40px; min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: #fff;
  font: 600 12px/1 "Poppins", sans-serif; letter-spacing: .06em; cursor: pointer;
}
.bp-lang button + button { border-left: 1px solid rgba(255, 255, 255, .75); }
.bp-lang button:hover { background: rgba(255, 255, 255, .18); }
.bp-lang button[aria-pressed="true"] { background: #fff; color: #111; }
.bp-lang button:focus-visible { outline: 3px solid #e91e63; outline-offset: 2px; }

/* Ordinateur : le sélecteur est le dernier élément du menu. */
.menu-box .bp-lang-item { display: inline-flex; align-items: center; margin-left: 18px; }
.bp-lang-item .bp-lang { position: relative; top: 0; }
.bp-lang-mobile { display: none; }

/* Le menu est plus large avec le sélecteur : la colonne du menu prend 70 % de l'en-tête, celle du logo 30 %. */
@media (min-width: 992px) {
  .elementor-column.elementor-element-52bbbe70 { width: 30%; }
  .elementor-column.elementor-element-5abea9d9 { width: 70%; }
  .menu-box .bp-lang-item { white-space: nowrap; }
}
/* Écrans moyens : espacements du menu resserrés pour que tout tienne sur une ligne. */
@media (min-width: 992px) and (max-width: 1199px) {
  .menu-box .navigation > li > a { padding-left: 9px; padding-right: 9px; }
  .menu-box .bp-lang-item { margin-left: 8px; }
  .bp-lang button { min-width: 34px; padding: 0 8px; }
}

/* Téléphone et tablette : le menu devient un bouton, le sélecteur se place juste à sa gauche. */
@media (max-width: 991px) {
  .bp-lang-mobile { display: inline-flex; margin-right: 14px; }
  .box-mobile .bp-lang-mobile { vertical-align: middle; }
}