/* Nebula NBL — i18n language switcher styling */
.nbl-lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;
  font:600 .82rem/1 "InterNebula",sans-serif;letter-spacing:.06em;
  color:#dbe4ee;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.nbl-lang-btn:hover{transform:translateY(-1px);background:rgba(124,245,255,.1);border-color:rgba(124,245,255,.4);color:#7cf5ff}
.nbl-lang-btn svg{opacity:.9}
.nbl-lang-btn.is-floating{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:95;
  background:rgba(9,12,26,.82);backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
/* Sur la page Labyrinthe, le bouton "Passer" occupe le coin haut-droit (z-80).
   On place donc le globe à sa GAUCHE pour éviter le chevauchement. */
body:has(.lab-skip) .nbl-lang-btn.is-floating{
  right:auto;left:14px;
}

/* Modal */
.nbl-lang-modal{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.nbl-lang-modal.is-open{display:flex;animation:nblFadeIn .22s ease-out}
.nbl-lang-backdrop{position:absolute;inset:0;background:rgba(2,4,12,.72);backdrop-filter:blur(6px)}
.nbl-lang-panel{
  position:relative;width:min(560px,100%);max-height:min(720px,92vh);
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(11,20,46,.98),rgba(20,10,40,.92));
  border:1px solid rgba(124,245,255,.24);border-radius:22px;
  box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 0 80px rgba(124,245,255,.05);
  overflow:hidden;animation:nblSlideUp .28s cubic-bezier(.2,.7,.2,1);
}
.nbl-lang-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px 12px;
}
.nbl-lang-head h2{
  margin:0;font-family:"CormorantNebula",serif;font-size:1.5rem;font-weight:600;color:#fff;
}
.nbl-lang-close{
  background:transparent;border:0;color:#dbe4ee;
  font-size:1.6rem;line-height:1;cursor:pointer;padding:4px 10px;border-radius:8px;
  transition:background .18s;
}
.nbl-lang-close:hover{background:rgba(255,255,255,.08);color:#fff}
.nbl-lang-search{
  margin:0 22px 12px;padding:12px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;color:#fff;font-size:.95rem;
  outline:none;transition:border-color .18s;
}
.nbl-lang-search:focus{border-color:rgba(124,245,255,.55);background:rgba(124,245,255,.06)}
.nbl-lang-list{
  flex:1;overflow-y:auto;padding:4px 12px 12px;
  scrollbar-width:thin;scrollbar-color:rgba(124,245,255,.3) transparent;
}
.nbl-lang-list::-webkit-scrollbar{width:6px}
.nbl-lang-list::-webkit-scrollbar-thumb{background:rgba(124,245,255,.3);border-radius:3px}
.nbl-lang-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;margin:2px 0;
  background:transparent;border:1px solid transparent;border-radius:12px;
  color:#dbe4ee;text-align:left;cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s;
}
.nbl-lang-item:hover{background:rgba(124,245,255,.08);border-color:rgba(124,245,255,.2);transform:translateX(2px)}
.nbl-lang-item.is-current{background:rgba(255,216,138,.1);border-color:rgba(255,216,138,.3)}
.nbl-lang-item.is-current .nbl-lang-code{color:#ffd88a}
.nbl-lang-flag{font-size:1.4rem;line-height:1;flex-shrink:0}
.nbl-lang-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.nbl-lang-native{font-family:"InterNebula",sans-serif;font-size:.95rem;color:#fff;font-weight:500}
.nbl-lang-name{font-size:.78rem;color:rgba(219,228,238,.55)}
.nbl-lang-code{font:600 .75rem/1 "InterNebula",sans-serif;letter-spacing:.06em;color:rgba(148,164,184,.75);padding:4px 8px;border:1px solid rgba(255,255,255,.1);border-radius:6px}
.nbl-lang-foot{margin:0;padding:12px 22px 18px;font-size:.75rem;color:rgba(148,164,184,.6);text-align:center}
.nbl-lang-empty{padding:24px;text-align:center;color:rgba(219,228,238,.6)}

/* TTS bouton flottant "Écouter la page" — bas-gauche */
.nbl-tts-btn{
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);left:16px;z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:999px;
  font:600 .82rem/1 "InterNebula",sans-serif;letter-spacing:.06em;
  color:#02040c;background:linear-gradient(135deg,#7cf5ff 0%,#a4b8ff 100%);
  border:0;cursor:pointer;
  box-shadow:0 6px 24px rgba(124,245,255,.25);
  transition:transform .18s,box-shadow .18s;
}
.nbl-tts-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(124,245,255,.4)}
.nbl-tts-btn.is-playing{background:linear-gradient(135deg,#ffd88a 0%,#ff9d5c 100%)}
.nbl-tts-btn.is-loading{opacity:.7;pointer-events:none}
.nbl-tts-btn svg{width:16px;height:16px}

@keyframes nblFadeIn{from{opacity:0}to{opacity:1}}
@keyframes nblSlideUp{from{transform:translateY(20px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes nblSpin{to{transform:rotate(360deg)}}

/* RTL support */
html[dir="rtl"] .nbl-lang-item:hover{transform:translateX(-2px)}
html[dir="rtl"] .nbl-lang-btn.is-floating{right:auto;left:14px}
html[dir="rtl"] .nbl-tts-btn{left:auto;right:16px}

@media (max-width:520px){
  .nbl-lang-panel{max-height:88vh;border-radius:18px}
  .nbl-lang-head h2{font-size:1.25rem}
}