.site-header {
  height: var(--head);
  position: sticky;
  top: 0;
  z-index: 600; /* au-dessus du grain de la page (base.css, 500) et du paysage des en-têtes (501) */
  background: linear-gradient(180deg, #171510fc, #0e0d0cfa);
  box-shadow: 0 9px 28px #000b;
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  /* Le logo suit la hauteur de l'en-tête (plus basse sur un écran moyen) */
  width: calc(var(--head) - 10px);
  height: calc(var(--head) - 10px);
  display: grid;
  place-items: center;
  flex: 0 0 calc(var(--head) - 10px);
}
.brand img {
  width: calc(var(--head) - 18px);
  height: calc(var(--head) - 18px);
  object-fit: contain;
  filter: drop-shadow(0 4px 8px #000);
}
.main-nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-inline: auto;
}
.main-nav a {
  white-space: nowrap;
  font:
    700 15px/1 Roboto,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  color: #ded5c6;
}
.main-nav a:after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 19px;
  height: 5px;
  background: linear-gradient(90deg, transparent, #a82e26 9%, #c43b31 72%, transparent);
  clip-path: polygon(0 35%, 15% 4%, 54% 18%, 100% 0, 95% 72%, 53% 62%, 12% 100%);
  opacity: 0;
  transform: scaleX(0.35);
  transition: 0.25s;
}
.main-nav a:hover,
.main-nav a.active {
  color: #e9a94d;
}
.main-nav a:hover:after,
.main-nav a.active:after {
  opacity: 1;
  transform: scaleX(1);
}
/* Soutenir : le bouton commun (.support-button, packages/ui/css/buttons.css) ; dans le menu, sans le trait rouge des liens */
.main-nav a.nav-highlight {
  height: auto;
}
.main-nav a.nav-highlight:after {
  display: none;
}
/* --- Menus déroulants (La ruche, Le serveur, Outils, Mon espace) --- */
.nav-group {
  position: relative;
  height: 100%;
}
.nav-group__toggle {
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #ded5c6;
  font:
    700 15px/1 Roboto,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  cursor: pointer;
}
.nav-group__toggle i {
  display: grid;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.nav-group__toggle svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}
.nav-group:hover .nav-group__toggle,
.nav-group.is-open .nav-group__toggle,
.nav-group.active .nav-group__toggle {
  color: #e9a94d;
}
.nav-group.is-open .nav-group__toggle i,
.nav-group:hover .nav-group__toggle i {
  transform: rotate(180deg);
}
.nav-group__menu {
  position: absolute;
  top: calc(100% - 14px);
  left: 50%;
  display: grid;
  min-width: 220px;
  padding: 8px;
  border: 1px solid #5e4931;
  border-top: 2px solid var(--honey);
  background: linear-gradient(180deg, #1a1712, #0f0e0c);
  box-shadow: 0 20px 50px #000a;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.18s,
    transform 0.18s,
    visibility 0.18s;
}
.nav-group:hover .nav-group__menu,
.nav-group:focus-within .nav-group__menu,
.nav-group.is-open .nav-group__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.main-nav .nav-group__menu a {
  display: block;
  height: auto;
  padding: 11px 14px;
  font-size: 13px;
  white-space: nowrap;
}
.main-nav .nav-group__menu a:after {
  display: none;
}
.main-nav .nav-group__menu a:hover,
.main-nav .nav-group__menu a.active {
  background: #26201a;
  color: #e9a94d;
}

.header-link {
  font:
    700 15px/1 Roboto,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e9e0d1;
}
.header-link:hover {
  color: #e5a248;
}
.language {
  display: flex;
  border: 1px solid #5e4931;
}
.language button {
  border: 0;
  background: #15130f;
  color: #d7cdbd;
  padding: 9px 11px;
  font: 700 0.8rem Roboto;
}
.language button.active {
  background: var(--red);
  color: #fff;
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  color: #eee;
  background: #181611;
  border: 1px solid #654e32;
  font-size: 20px;
}
.header-separator {
  height: 7px;
  margin-bottom: -7px;
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, #0d0c0b, transparent);
}
.header-separator:after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9d6e375e 25%, #c98b4385 50%, #9d6e375e 75%, transparent);
}
.header-actions {
  display: flex;
  gap: 16px;
  height: 100%;
  align-items: center;
}
.header-actions > .header-link {
  height: 42px;
  display: flex;
  align-items: center;
}
/* Se connecter : un vrai bouton rouge (texture du bouton d'action), pas un lien discret */
.steam-login {
  position: relative;
  white-space: nowrap;
  isolation: isolate;
  padding: 0 18px;
  color: #fff4e4;
  text-shadow: 0 1px #500;
  transition: transform 0.2s;
}
.steam-login:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px -4px;
  background: url("/ui/images/button-red.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 8px #0008);
}
.steam-login:hover {
  color: #fff;
  transform: translateY(-1px);
}
.steam-login:hover:before {
  filter: drop-shadow(0 4px 8px #0008) brightness(1.1);
}
.header-link svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  flex: 0 0 21px;
  align-self: center;
}

@media (min-width: 2100px) {
  .site-header .container {
    width: min(calc(100% - 150px), var(--max));
  }
}

/* Écran moyen : tout tient sur une ligne (les intitulés passaient sur deux lignes et la langue sortait de l'écran) :
   plus serré, plus petit, Discord en icône seule. */
@media (max-width: 1440px) {
  .header-inner {
    gap: 18px;
  }
  .main-nav {
    gap: 20px;
  }
  .main-nav a,
  .nav-group__toggle,
  .header-link {
    font-size: 13px;
  }
  .header-actions {
    gap: 10px;
  }
  .header-actions > .header-link:not(.steam-login) span {
    display: none;
  }
  .steam-login {
    padding: 0 12px;
  }
}

/* Plus étroit : le menu passe dans le bouton ☰ (avant, seulement sous 900 px : entre les deux, l'en-tête débordait) */
@media (max-width: 1180px) {
  .brand {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
  }
  .brand img {
    width: 60px;
    height: 60px;
  }
  .main-nav {
    display: none;
    position: fixed;
    top: var(--head);
    inset-inline: 0;
    height: auto;
    padding: 18px;
    background: #11100f;
    flex-direction: column;
    align-items: stretch;
    /* Plus haut que l'écran (quatre groupes dépliés) : il défile, Soutenir reste atteignable */
    max-height: calc(100svh - var(--head));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu-open .main-nav {
    display: flex;
  }
  .main-nav a {
    height: auto;
    padding: 14px;
    place-items: center start;
  }
  .main-nav a:after {
    bottom: 5px;
  }
  /* Dans le menu ☰ : les groupes dépliés, avec leur titre */
  .nav-group {
    height: auto;
  }
  .nav-group__toggle {
    width: 100%;
    height: auto;
    padding: 14px 14px 6px;
    color: #c89146;
    font-size: 0.8rem;
    pointer-events: none;
  }
  .nav-group__toggle i {
    display: none;
  }
  .nav-group__menu {
    position: static;
    min-width: 0;
    padding: 0 0 0 12px;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Touché, survolé ou focalisé, le groupe reprenait le décalage du menu déroulant d'ordinateur (-50 %) : le
     sous-menu glissait hors du panneau (« Mon espace » vide au toucher). */
  .nav-group:hover .nav-group__menu,
  .nav-group:focus-within .nav-group__menu,
  .nav-group.is-open .nav-group__menu {
    transform: none;
  }
  .header-link:not(.steam-login) span {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

/* Téléphone : « Se connecter » en icône seule */
@media (max-width: 760px) {
  .steam-login span {
    display: none;
  }
}

@media (max-width: 620px) {
  .header-inner {
    gap: 8px;
  }
  .header-actions {
    gap: 7px;
  }
  .language button {
    padding: 8px;
  }
}

/* Le bandeau « vote ouvert » sous la navigation (layout/vote-banner.js) : posé sous l'en-tête, en superposition sur le
   haut de la page (il ne décale rien), rouge sombre uni (ni dégradé ni bordure, une ombre le détache) ; le point rouge
   qui clignote, la phrase, le compte à rebours, les liens. */
/* La pile : les bandeaux s'y suivent, l'un sous l'autre (layout/banners.js) */
.banner-stack {
  position: fixed;
  top: var(--head);
  right: 0;
  left: 0;
  z-index: 599;
}
.vote-banner {
  background: #8f2c21f2;
  box-shadow: 0 8px 22px #000a;
  animation: vote-banner-in 0.4s ease-out;
}
.vote-banner__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 46px;
}
.vote-banner__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffb3a6;
  animation: vote-banner-dot 1.4s ease-out infinite;
}
.vote-banner p {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #f3e3c8;
}
.vote-banner p strong {
  font: 900 0.95rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Le compte à rebours : de petites cases */
.vote-banner__clock {
  display: inline-flex;
  flex: none;
  gap: 4px;
}
.vote-banner__clock > span {
  display: grid;
  justify-items: center;
  min-width: 32px;
  padding: 2px 3px;
  background: #00000059;
}
.vote-banner__clock b {
  color: #ffd27a;
  font: 900 0.9rem/1.1 "Roboto Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
}
.vote-banner__clock small {
  color: #f3e3c8aa;
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Le vote fini : le compte à rebours laisse la place à un mot (19 oct. 2026) */
.vote-banner__over {
  flex: none;
  color: #ffd27a;
  font: 800 0.9rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.03em;
}
.vote-banner__link {
  flex: none;
  padding: 6px 13px;
  border: 1px solid #f3e3c855;
  color: #f3e3c8;
  font: 800 0.8rem Roboto, sans-serif;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.vote-banner__link:hover {
  border-color: var(--honey);
  background: #ffffff12;
}
.vote-banner__link.is-discord {
  border-color: #f3e3c8;
  background: #f3e3c8;
  color: #6b1f17;
}
.vote-banner__link.is-discord:hover {
  background: #fff;
}
.vote-banner__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #f3e3c8aa;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.vote-banner__close:hover {
  color: #fff;
}
@keyframes vote-banner-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes vote-banner-dot {
  from {
    box-shadow: 0 0 0 0 #ffb3a6cc;
  }
  to {
    box-shadow: 0 0 0 8px #ffb3a600;
  }
}
@media (max-width: 760px) {
  body.has-vote-banner {
    --banner: 92px;
  }
  .vote-banner__inner {
    flex-wrap: wrap;
    gap: 8px 12px;
    height: auto;
    padding-block: 8px;
  }
  .vote-banner p {
    flex-basis: calc(100% - 60px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vote-banner,
  .vote-banner__dot {
    animation: none;
  }
}

/* Le bandeau du vote affiché : plus d'ombre sous l'en-tête (les deux se suivent sans trait noir), et ce qui se colle sous
   l'en-tête (sommaires, colonnes) se colle sous le bandeau : --banner, sa hauteur */
body.has-vote-banner {
  --banner: 46px;
}
body.has-vote-banner .site-header {
  box-shadow: none;
}

/* Les menus déroulants en sections (8 oct.) : un titre de section, puis chaque lien avec son icône et une ligne
   d'explication. Le lien de la page ouverte : brun éclairci et liseré miel. */
.nav-group__menu {
  min-width: 280px;
  padding: 6px;
}
.nav-menu__section {
  margin: 0;
  padding: 10px 12px 4px;
  color: #c89146;
  font: 700 0.8rem/1 "Roboto Condensed", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-menu__section:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid #2f271d;
}
.main-nav .nav-group__menu a.nav-menu__link {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-left: 3px solid transparent;
  white-space: normal;
}
.nav-menu__link > i {
  display: grid;
  place-items: center;
}
.nav-menu__link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #c89146;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-menu__link span {
  display: grid;
  gap: 2px;
}
.nav-menu__link b {
  color: #ece2d0;
  font: 700 14px/1.2 Roboto, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.nav-menu__link small {
  color: #a99c89;
  font: 400 0.8rem/1.3 Roboto, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.main-nav .nav-group__menu a.nav-menu__link:hover {
  background: #26201a;
}
.main-nav .nav-group__menu a.nav-menu__link:hover b {
  color: #f0b45c;
}
.main-nav .nav-group__menu a.nav-menu__link.active {
  border-left-color: var(--honey);
  background: #342a20;
}
.main-nav .nav-group__menu a.nav-menu__link.active b {
  color: #f0b45c;
}
@media (max-width: 1180px) {
  .nav-group__menu {
    min-width: 0;
  }
  .nav-menu__link small {
    display: none;
  }
  .nav-menu__section {
    padding-left: 0;
  }
}
.main-nav .nav-group__menu a.nav-menu__link,
.nav-menu__link span {
  justify-items: start;
  text-align: left;
}
@media (min-width: 1181px) {
  .nav-group__menu {
    min-width: 310px;
  }
}

/* L'heure sur le serveur de jeu, entre le logo et la navigation (layout/sky.js) : soleil le jour, lune la nuit. Coupée
   dans Paramètres (data-clock="off"). */
.header-clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(215, 157, 65, 0.35);
  background: rgba(10, 9, 7, 0.55);
  color: var(--cream);
  font: 700 15px/1 "Roboto Condensed", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: none;
}
.header-clock i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 7px var(--gold);
}
/* La nuit, un croissant de lune */
.header-clock[data-phase="night"] i {
  background: transparent;
  box-shadow: inset -3px 1px 0 #c9d4e6;
}
html[data-clock="off"] .header-clock,
.header-clock[hidden] {
  display: none;
}
@media (max-width: 1440px) {
  .header-clock {
    font-size: 13px;
    padding: 4px 8px;
  }
}