/* === Toggle langue Polylang — style pilule ===
   Spécificité augmentée avec .et_pb_menu pour battre les règles de menu.css */

/* Neutralise le style "menu" hérité de Divi sur les items de langue */
.et_pb_menu .et-menu li.lang-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Les liens deviennent les boutons de la pilule */
.et_pb_menu .et-menu li.lang-item > a {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0 !important;            /* cache "Français" / "English" */
  font-weight: 700;
  letter-spacing: 0.08em;
padding: 7px 13px !important;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  display: inline-flex !important;    /* centrage parfait du ::before */
  align-items: center;
  justify-content: center;
  min-width: 44px;                    /* largeur cohérente FR/EN */
  box-sizing: border-box;
  transform: none !important;         /* annule le translateY hover de menu.css */
}

/* Tue la barre de soulignement (::after) héritée de menu.css :
   menu.css force scaleX(1) sur .current-menu-item — on neutralise ici */
.et_pb_menu .et-menu li.lang-item > a::after {
  content: none !important;
  display: none !important;
  background: none !important;
  transform: none !important;
}

/* Réaffiche FR / EN — on recrée un ::before puisque ::after est désactivé */
.et_pb_menu .et-menu li.lang-item-fr > a::before {
  content: 'FR';
  font-size: 11px;
  display: inline-block;
}
.et_pb_menu .et-menu li.lang-item-en > a::before {
  content: 'EN';
  font-size: 11px;
  display: inline-block;
}

/* Premier item : coin gauche arrondi, bordure droite retirée
   pour ne pas doubler le trait avec le second */
.et_pb_menu .et-menu li.lang-item-first > a {
  border-radius: 999px 0 0 999px;
  border-right: none;
}

/* Second item : coin droit arrondi */
.et_pb_menu .et-menu li.lang-item:not(.lang-item-first) > a {
  border-radius: 0 999px 999px 0;
}

/* Langue active (classe ajoutée automatiquement par Polylang) */
.et_pb_menu .et-menu li.lang-item.current-lang > a {
  background: #F2A900;
  color: #003324 !important;
  border-color: #F2A900;
}

/* Hover sur la langue non active */
.et_pb_menu .et-menu li.lang-item:not(.current-lang) > a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Toggle langue — version MENU MOBILE (.et_mobile_menu)
   Approche « bouton unique » : on n'affiche QUE la langue vers
   laquelle basculer (la langue courante est masquée), précédée
   d'une icône globe. Plus épuré qu'une pilule à deux états.
   Divi clone le menu desktop dans le déroulant mobile avec les
   mêmes classes lang-item* / current-lang (posée par Polylang).
   ============================================================ */

/* On masque la langue active : il ne reste que l'autre langue */
.et_mobile_menu li.lang-item.current-lang {
  display: none !important;
}

/* L'item restant : on détache du menu et on annule les séparateurs */
.et_mobile_menu li.lang-item {
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  border: none !important;
  text-align: right !important;     /* le bouton se cale à droite, sous le burger */
}

/* Le lien devient un bouton pilule « globe + langue »
   (override menu.css : display:block + padding-right + align right) */
.et_mobile_menu li.lang-item > a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85) !important;   /* affiche "English"/"Français" */
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center !important;
  box-sizing: border-box;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* Icône globe avant le libellé. En `mask` + currentColor, elle prend
   automatiquement la couleur du texte (claire au repos, foncée au hover). */
.et_mobile_menu li.lang-item > a::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zM17.9 17.39c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41C19.92 5.77 22 8.65 22 12c0 2.08-.8 3.97-2.1 5.39z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zM17.9 17.39c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41C19.92 5.77 22 8.65 22 12c0 2.08-.8 3.97-2.1 5.39z'/></svg>") center / contain no-repeat;
}

/* Survol / tap : pilule orange (annule aussi le décalage padding de menu.css) */
.et_mobile_menu li.lang-item > a:hover {
  padding: 9px 16px !important;
  background: #F2A900;
  border-color: #F2A900;
  color: #003324 !important;
}