/* Golems reprend l'entête du site principal (site-header / header-brand /
   logo / channel-nav, définis dans style.css) pour rester visuellement
   identique au reste de wiwitv.fr. Ce fichier n'ajoute que ce qui est
   propre à golems : la pastille de connexion dans le header-brand. */

/* --- Rideau de chargement plein écran : visible par défaut (aucun JS
   requis), présent dès le tout premier rendu de la page pour couvrir
   l'ancien contenu pendant qu'une navigation classique (pas de SPA) se
   fait, et jusqu'à ce que la page ait fini de charger son propre contenu
   (chaque page appelle window.golemsHidePageLoader() une fois prête). --- */
.golems-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.golems-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.golems-page-loader i {
  font-size: 2rem;
  color: var(--cyan);
}

.golems-auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
}

.golems-auth-pill__loading {
  color: var(--text-dim);
  font-size: 1rem;
}

.golems-auth-pill__login {
  font-size: var(--step--2);
  padding: 0.5em 1em;
}

.golems-auth-pill__user {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.25em 0.85em 0.25em 0.25em;
  background: var(--panel);
  border: 1px solid rgba(241, 238, 249, 0.2);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s var(--ease-glitch), border-color 0.15s ease, box-shadow 0.15s ease;
}

.golems-auth-pill__user:hover,
.golems-auth-pill__user:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(45, 242, 255, 0.28);
}

.golems-auth-pill__user:active {
  transform: translateY(0) scale(0.97);
}

.golems-auth-pill__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cyan);
  flex-shrink: 0;
}

.golems-auth-pill__name {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-hi);
  white-space: nowrap;
}

.golems-auth-pill__logout {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95em;
  line-height: 1;
  padding-left: 0.4em;
  margin-left: 0.1em;
  border-left: 1px solid rgba(241, 238, 249, 0.16);
  transition: color 0.15s ease, transform 0.15s ease;
}

.golems-auth-pill__logout:hover {
  color: var(--magenta);
  transform: scale(1.2);
}

.golems-auth-pill__logout:active {
  transform: scale(0.9);
}

@media (max-width: 480px) {
  .golems-auth-pill__name {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- Menu du site Golems (une seule barre, même style que wiwitv.fr) ---------- */
.channel-nav.golems-subnav {
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin-left: auto;
  letter-spacing: 0.05em;
}

.golems-subnav a {
  position: relative;
  align-items: center;
  white-space: nowrap;
  gap: 0.5em;
  padding: 0.6em 0.95em;
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.golems-subnav a i { color: var(--cyan); font-size: 0.9em; }

.golems-subnav a:hover {
  background: rgba(241, 238, 249, 0.05);
  border-color: rgba(241, 238, 249, 0.14);
}

.golems-subnav a[aria-current="page"] {
  background: rgba(241, 238, 249, 0.06);
  border-color: rgba(241, 238, 249, 0.18);
}

.golems-subnav a[aria-current="page"] i { color: var(--magenta); }

.golems-subnav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.6em;
  right: 0.6em;
  bottom: -1px;
  height: 2px;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}

.golems-subnav .golems-back {
  margin-left: 0.6rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(241, 238, 249, 0.16);
  color: var(--text-dim);
}

.golems-subnav .golems-back i { color: var(--text-dim); }

.nav-soon__tag {
  font-size: 0.6em;
  letter-spacing: 0.08em;
  padding: 0.1em 0.5em;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .golems-subnav a i { display: none; }
  .golems-subnav .golems-back i { display: inline; }
}

@media (max-width: 720px) {
  .channel-nav.golems-subnav { margin-left: 0; gap: 0.4rem; }
  .golems-subnav a { padding: 0.8em 0.4em; }
  .golems-subnav a i { display: inline; }
  .golems-subnav a[aria-current="page"]::after { display: none; }
  .golems-subnav .golems-back { margin-left: 0; padding-left: 0.4em; border-left: none; }
}

/* ---------- Logo Golems : icône + nom + baseline ---------- */
.logo.golems-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.golems-logo__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 47, 158, 0.45));
  transition: transform 0.2s ease;
}

.golems-logo:hover .golems-logo__icon {
  transform: rotate(-8deg) scale(1.08);
}

.golems-logo__txt {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.golems-logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.golems-logo__txt small {
  margin-top: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  white-space: nowrap;
}

@media (max-width: 1180px) and (min-width: 721px) {
  .golems-logo__txt small { display: none; }
}

/* ---------- Respiration de la barre (logo / pastille / menu) ---------- */
[data-golems-nav] > .wrap {
  gap: 2.2rem;
}

[data-golems-nav] .header-brand {
  gap: 1.6rem;
}

[data-golems-nav] .golems-auth-pill {
  gap: 0.9rem;
}

[data-golems-nav] .golems-auth-pill__logout {
  margin-left: 0.3rem;
}

.channel-nav.golems-subnav {
  gap: 0.15rem;
}

.golems-subnav a {
  padding: 0.6em 0.8em;
}

@media (max-width: 1320px) and (min-width: 721px) {
  .golems-subnav .golems-back {
    font-size: 0;
    gap: 0;
    padding-inline: 0.8em;
  }
  .golems-subnav .golems-back i { font-size: 0.95rem; }
}

@media (max-width: 720px) {
  [data-golems-nav] > .wrap { gap: 1rem; }
  [data-golems-nav] .header-brand { gap: 0.9rem; }
}

/* Le pseudo ne doit jamais dépasser de sa pastille : la marque ne rétrécit pas,
   c'est le menu qui passe à la ligne s'il manque de place. */
[data-golems-nav] .header-brand,
[data-golems-nav] .golems-auth-pill,
[data-golems-nav] .golems-auth-pill__user {
  flex-shrink: 0;
}

.golems-auth-pill__user {
  white-space: nowrap;
}

.golems-auth-pill__name {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 721px) {
  .channel-nav.golems-subnav {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }
}

/* ---------- Une seule ligne, toujours : tout rétrécit avec l'écran plutôt que de passer à la ligne ---------- */
@media (min-width: 721px) {
  .channel-nav.golems-subnav {
    flex-wrap: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    font-size: clamp(0.62rem, 0.62vw + 0.22rem, 0.8rem);
    letter-spacing: 0.03em;
  }

  .golems-subnav a {
    padding: 0.6em clamp(0.45em, 0.6vw, 0.8em);
    gap: 0.4em;
  }
}

@media (min-width: 721px) and (max-width: 1400px) {
  .golems-logo__txt small { display: none; }
  .golems-subnav a i { display: none; }
  .golems-subnav .golems-back i { display: inline; }
  .golems-subnav .golems-back { font-size: 0; gap: 0; padding-inline: 0.7em; margin-left: 0.3rem; padding-left: 0.7em; }
  .golems-subnav .golems-back i { font-size: 0.85rem; }
}

@media (min-width: 721px) and (max-width: 1150px) {
  [data-golems-nav] > .wrap { gap: 1rem; }
  [data-golems-nav] .header-brand { gap: 0.8rem; }
  .golems-auth-pill__name { max-width: 90px; }
  .golems-logo__name { font-size: 1.1rem; }
}