/* ========================================================= */
/* 🌍 LANG SWITCH — ULTRA CLEAN (DESKTOP + MOBILE)           */
/* ========================================================= */

/* ----------------------------- */
/* 1) DESKTOP : wrapper + panel  */
/* ----------------------------- */

.languagechoice {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 9999;
  display: inline-block;
  background: transparent;
}

/* ✅ Curseur : 1 seule règle pour tout le widget */
.languagechoice,
.languagechoice * {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}

/* Bouton */
.languagechoicebtn {
  background: transparent;
  border: none;
  padding: 10px;
  color: #90771B;
}

/* Panel (drapeaux) : caché par défaut */
.languagechoice-content {
  display: none;
  position: absolute;
  top: -5px;
  padding: 10px;
  width: max-content;
  white-space: nowrap;
  background: transparent;

  /* Slide-in (ton système existant) */
  right: -500px;
  transition: right 1s;
}

/* Liens : jamais de soulignement */
.languagechoice-content a {
  text-decoration: none !important;
}
.languagechoice-content a:hover {
  text-decoration: none !important;
}

/* Drapeaux desktop */
.languagechoice-content img {
  width: 50px;
  height: 28px;
  display: inline-block;
  padding: 0;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}
.languagechoice-content img:hover {
  opacity: 0.8;
}

/* Effets de contraste selon mode */
body.dark-mode .languagechoice-content img {
  box-shadow: 0 0 2px #FFFFFF;
}
body.light-mode .languagechoice-content img:hover {
  box-shadow: 0 0 10px #90771B;
}
body.dark-mode .languagechoice-content img:hover {
  box-shadow: 0 0 10px #FFFFFF;
}

/* ----------------------------- */
/* 2) MOBILE : dans #mobile-menu */
/* ----------------------------- */

/* ✅ Curseur : 1 seule règle pour toute la zone drapeaux */
#mobile-menu .flags,
#mobile-menu .flags * {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}

#mobile-menu .flags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3em;
  margin: 0 auto 1.2em auto;
}

#mobile-menu .flags img {
  height: 35px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-top: -8%;
}

/* Texte "Languages" si tu as un span dédié */
#mobile-menu .menu-languages span { color: #90771B; }
body.dark-mode #mobile-menu .menu-languages span { color: #C0B370; }
body.light-mode #mobile-menu .menu-languages span { color: #90771B; }

/* ----------------------------- */
/* 3) OPTIONNEL : ancien nom chelou */
/* ----------------------------- */
/* Si tu utilises vraiment cette classe, garde-la.
   Sinon : SUPPRIME-LA du CSS et du HTML. */
.fondulangueclicdroit {
  position: relative;
}