/**
 * assets/i18n/i18n.css — Style du sélecteur de langue
 * ════════════════════════════════════════════════════════════════
 * Petit composant autonome inséré dans le bandeau du haut de chaque
 * page (voir #centLangSwitcherMount dans le HTML, rempli par i18n.js).
 * Conçu pour s'intégrer visuellement au bandeau existant du site
 * (mêmes couleurs que .tb-right / .tb-social) sans dépendre de Bootstrap.
 * ════════════════════════════════════════════════════════════════
 */
.lang-switcher{position:relative;display:inline-block;margin-right:14px}
.lang-current{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.2s;line-height:1;
}
.lang-current:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.lang-current i.fa-globe{font-size:12px}
.lang-caret{font-size:9px;margin-left:1px;transition:transform .2s}
.lang-menu.open ~ .lang-current .lang-caret,
.lang-switcher:has(.lang-menu.open) .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:150px;
  background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:6px;display:none;flex-direction:column;gap:2px;z-index:1200;
}
.lang-menu.open{display:flex}
.lang-opt{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;padding:8px 10px;border-radius:7px;
  font-size:13px;font-weight:700;color:#333;cursor:pointer;transition:.15s;
}
.lang-opt:hover{background:#f2f6ef;color:var(--g1,#2d7a0f)}
.lang-opt.active{background:var(--g3,#eaf5e2);color:var(--g1,#2d7a0f)}
.lang-opt-name{font-weight:500;color:#888;font-size:12px}
.lang-opt.active .lang-opt-name{color:var(--g1,#2d7a0f)}

/* Sur mobile, le bandeau du haut est souvent masqué/compact : on garde
   le switcher discret mais toujours accessible (voir CSS de chaque page,
   la classe .tb-right reste visible même si .tb-left est masquée). */
@media (max-width:576px){
  .lang-current{padding:4px 9px;font-size:11.5px}
  .lang-switcher{margin-right:8px}
}

/* Variante utilisée sur les pages sans bandeau standard (404.html,
   login.html, reset-password.html) : sélecteur flottant en haut à droite.
   Le point de montage lui-même reçoit la classe (positionnement fixe),
   sans dépendre d'un script supplémentaire ni d'un ordre d'exécution. */
.lang-switcher-mount-floating{position:fixed;top:16px;right:16px;z-index:2000}
.lang-switcher-mount-floating .lang-switcher{margin-right:0}
.lang-switcher-mount-floating .lang-current{
  background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
}