/* ============================================================
   menu-refonte-20260713.css
   Refonte du menu burger Studio + tabs internes.
   3 sections (Tes comptes / Outils / Gestion),
   5 items visibles au lieu de 9,
   Bot ↔ Crédits jeu et Équipe ↔ Gérer l'équipe fusionnés
   via une barre de tabs injectée dans chaque vue.
   ============================================================ */

/* --- 1. Sections dans le menu burger --------------------- */
.refonte-sec {
  padding: 10px 14px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: #7f8ba0;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 2px;
}
.refonte-sec.is-first { border-top: 0; margin-top: 0; }

/* Le sec header d'origine ("Créatrices" pour la rangée des comptes)
   est ré-étiqueté par le JS. Pas de style spécifique nécessaire. */

/* --- 2. Icônes emoji devant chaque item ------------------ */
.tg-menu-item[data-refonte-icon]::before,
.game-credit-menu-btn[data-refonte-icon]::before {
  content: attr(data-refonte-icon);
  display: inline-block;
  margin-right: 8px;
  font-size: 15px;
  vertical-align: -1px;
}

/* --- 3. Items masqués (fusionnés en tabs internes) ------- */
.tg-menu-item.refonte-hidden,
.game-credit-menu-btn.refonte-hidden { display: none !important; }

/* --- 4. Barre de tabs interne (Bot ↔ Crédits jeu, Équipe ↔ Gérer) */
.refonte-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 14px;
  max-width: 460px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-sizing: border-box;
}
.refonte-tab {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #b8c2d1;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.refonte-tab:hover { color: #fff; background: rgba(255,255,255,.04); }
.refonte-tab.is-active {
  background: #2481cc;
  color: #fff;
  box-shadow: 0 4px 12px rgba(36,129,204,.3);
}
/* Type "action" : ouvre une modale au lieu de switcher de vue.
   Style discret (contour) pour ne pas se confondre avec un tab actif. */
.refonte-tab.is-action {
  color: #dbe4ef;
  border: 1px solid rgba(255,255,255,.14);
}
.refonte-tab.is-action:hover {
  background: rgba(36,129,204,.15);
  border-color: #2aabee;
  color: #fff;
}