/* ==========================================================================
   EN-TÊTE COMMUN — toutes les pages publiques (js/site-header.js le dessine).
   Header flottant de verre, menu « La ville », menu mobile plein écran, et
   les décalages qui laissent la place au header sur chaque type de page.
   ========================================================================== */
:root { --nw-header-h: 68px; }

.hd {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: var(--nw-sp-4);
    width: min(calc(100% - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), var(--nw-max));
    height: var(--nw-header-h);
    padding: 0 10px 0 16px;
    border: 1px solid var(--nw-hairline);
    border-radius: var(--nw-radius-lg);
    background: rgba(14, 9, 27, .5);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--nw-shadow), var(--nw-inset);
    transform: translateX(-50%);
    transition: top var(--nw-base) var(--nw-ease), background var(--nw-base) var(--nw-ease), border-color var(--nw-base) var(--nw-ease);
}
.hd.is-scrolled {
    top: 10px;
    background: rgba(9, 5, 18, .9);
    border-color: var(--nw-border);
}
.hd .nw-brand > img.nw-brand-banner { width: auto; height: 42px; }

.hd-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline: auto;
}
.hd-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--nw-radius-sm);
    background: none;
    color: var(--nw-text-dim);
    font: 600 14px var(--nw-font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nw-fast) var(--nw-ease), background var(--nw-fast) var(--nw-ease);
}
.hd-link svg { width: 14px; height: 14px; transition: transform var(--nw-base) var(--nw-ease); }
.hd-link:hover, .hd-menu.is-open > .hd-link { color: var(--nw-text); background: rgba(255, 255, 255, .06); }
.hd-link.is-active { color: #fff; }
.hd-link.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--nw-gradient-text);
}

/* « La ville » : un panneau de liens, ouvert au survol (souris) ou au clic */
.hd-menu { position: relative; }
.hd-menu.is-open > .hd-link svg { transform: rotate(180deg); }
.hd-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 540px;
    padding: 8px;
    border: 1px solid var(--nw-border);
    border-radius: var(--nw-radius);
    background: rgba(15, 9, 27, .98);
    box-shadow: var(--nw-shadow-lg);
    opacity: 0;
    transform: translate(-50%, -6px);
    pointer-events: none;
    transition: opacity var(--nw-base) var(--nw-ease), transform var(--nw-base) var(--nw-ease);
}
/* Pont invisible : la souris traverse l'espace entre bouton et panneau sans le refermer */
.hd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.hd-menu.is-open .hd-panel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.hd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--nw-radius-sm);
    transition: background var(--nw-fast) var(--nw-ease);
}
.hd-item:hover, .hd-item:focus-visible { background: var(--nw-glass-hover); }
.hd-item-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--hd-tint) 16%, transparent);
    color: color-mix(in srgb, var(--hd-tint) 75%, #fff);
}
.hd-item-icon svg { width: 18px; height: 18px; }
.hd-item b { display: block; font-size: 14px; font-weight: 700; color: var(--nw-text); }
.hd-item small { display: block; margin-top: 2px; font-size: 12px; color: var(--nw-text-faint); }

.hd-actions { display: flex; align-items: center; gap: 8px; }
.hd-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(34, 197, 94, .25);
    border-radius: var(--nw-radius-pill);
    background: rgba(34, 197, 94, .08);
    color: #bbf7d0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--nw-fast) var(--nw-ease);
}
.hd-live:hover { background: rgba(34, 197, 94, .14); }
.hd-live i { color: #22c55e; }
.hd-live b { color: #fff; }
.hd-live-max { color: rgba(187, 247, 208, .6); }
.hd-live.nw-status--off { border-color: rgba(148, 163, 184, .2); background: rgba(148, 163, 184, .06); color: #94a3b8; }
.hd-live.nw-status--off i { color: #64748b; }
.hd-live.nw-status--off .nw-dot--pulse::after { animation: none; opacity: 0; }

.hd-auth { display: flex; align-items: center; }
.hd-auth .nw-btn--sm { height: 40px; padding-inline: 18px; }

.hd-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 12px;
    border: 1px solid var(--nw-hairline);
    border-radius: var(--nw-radius-sm);
    background: var(--nw-glass);
    cursor: pointer;
}
.hd-burger span { height: 2px; border-radius: 2px; background: var(--nw-text); transition: transform var(--nw-base) var(--nw-ease), opacity var(--nw-fast); }
.hd-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger.is-open span:nth-child(2) { opacity: 0; }
.hd-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile plein écran, sous le header */
.hd-drawer {
    position: fixed;
    inset: 0;
    z-index: 890;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(7, 4, 14, .97);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nw-base) var(--nw-ease), visibility 0s linear var(--nw-base);
}
.hd-drawer.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-drawer-inner {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin: 0 auto;
    padding: calc(14px + var(--nw-header-h) + 18px) 22px calc(28px + env(safe-area-inset-bottom, 0px));
}
.hd-drawer-title {
    margin: var(--nw-sp-5) 0 var(--nw-sp-2);
    font-family: var(--nw-font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--nw-primary-light);
}
.hd-drawer-title:first-child { margin-top: 0; }
.hd-drawer-inner > a:not(.nw-btn) {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--nw-border-soft);
    font-size: 17px;
    font-weight: 600;
    color: var(--nw-text);
}
.hd-drawer-inner > a:not(.nw-btn):hover { color: var(--nw-primary-light); }
.hd-drawer-discord { margin-top: var(--nw-sp-6); }

/* Le compte dans le menu mobile : le menu déroulant s'ouvre en place */
.hd-drawer .nw-user-chip { width: 100%; }
.hd-drawer .nw-user-chip-name { max-width: none; flex: 1; text-align: left; }
.hd-drawer .nw-user-dropdown {
    position: static;
    display: none;
    min-width: 0;
    margin-top: 8px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.hd-drawer .nw-user-menu.is-open .nw-user-dropdown { display: block; }
.hd-drawer .nw-btn--sm { width: 100%; height: 46px; }

html.is-locked { overflow: hidden; }
/* La page en cours, dans le panneau « La ville » */
.hd-item.is-current { background: var(--nw-glass-hover); box-shadow: inset 0 0 0 1px var(--nw-border); }
.hd-drawer-inner > a[aria-current="page"] { color: var(--nw-primary-light); }

/* ---------- Outils d'une page posés dans la barre (recherche du règlement…) ---------- */
.hd-actions .wk-searchbtn { min-width: 200px; height: 40px; padding-block: 0; }

/* ---------- Place laissée au header fixe ---------- */
:root { --nw-topbar-h: 0px; }
.hd ~ .nw-space-page { padding-top: calc(14px + var(--nw-header-h) + 12px); }
.hd ~ .nw-space-page .nw-space-bar { display: none; }

/* ---------- Pied de page sur les pages « espace » ---------- */
.nw-space-page + .nw-footer, .nw-space-page > .nw-footer { margin-top: auto; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (hover: hover) and (min-width: 1081px) {
    .hd-menu:hover .hd-panel, .hd-menu:focus-within .hd-panel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    .hd-menu:hover > .hd-link { color: var(--nw-text); background: rgba(255, 255, 255, .06); }
    .hd-menu:hover > .hd-link svg { transform: rotate(180deg); }
}

@media (max-width: 1360px) {
    .hd-link { padding: 0 11px; }
    .hd-live-label { display: none; }
    .hd-actions .wk-searchbtn { min-width: 0; }
    .hd-actions .wk-searchbtn span, .hd-actions .wk-searchbtn kbd { display: none; }
}

@media (max-width: 1240px) {
    .hd-live-max { display: none; }
}

@media (max-width: 1080px) {
    .hd-nav, .hd-auth { display: none; }
    .hd-actions { margin-left: auto; }
    .hd-burger { display: flex; }
    .hd-drawer { display: block; }
    .hd-live-label { display: inline; }
}

@media (max-width: 860px) {
    .hd { background: rgba(14, 9, 27, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 520px) {
    :root { --nw-header-h: 60px; }
    .hd { top: 10px; width: calc(100% - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); padding: 0 8px 0 12px; }
    .hd.is-scrolled { top: 8px; }
    .hd-live { height: 36px; padding: 0 10px; font-size: 12px; }
    .hd-live-label { display: none; }
    .hd-drawer-inner { padding-top: calc(10px + var(--nw-header-h) + 14px); }
    .hd .nw-brand > img.nw-brand-banner { height: 32px; }
    .hd ~ .nw-space-page { padding-top: calc(10px + var(--nw-header-h) + 10px); }
}

@media (max-width: 860px) {
    .hd ~ .wk-page .wk-side { top: var(--wk-top, 84px); }
    .hd-panel { width: min(540px, calc(100vw - 32px)); }
}

@media print {
    .hd, .hd-drawer { display: none !important; }
    .hd ~ .nw-space-page { padding-top: 0; }
}

/* ---------- Bouton de thème (sombre / clair / automatique) ---------- */
.hd-theme {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--nw-border-soft);
    border-radius: 50%;
    background: var(--nw-glass);
    color: var(--nw-text-dim);
    cursor: pointer;
    transition: color var(--nw-fast) var(--nw-ease), background var(--nw-fast) var(--nw-ease), border-color var(--nw-fast) var(--nw-ease);
}
.hd-theme:hover { color: var(--nw-text); background: var(--nw-glass-hover); border-color: var(--nw-border); }
.hd-theme svg, .hd-drawer-theme svg { width: 18px; height: 18px; }
[data-hd-theme] svg { display: none; }
[data-hd-theme][data-choice="dark"] .hd-theme-dark,
[data-hd-theme][data-choice="light"] .hd-theme-light,
[data-hd-theme][data-choice="system"] .hd-theme-system { display: block; }
.hd-drawer-theme {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--nw-border-soft);
    background: none;
    color: var(--nw-text);
    font: 600 17px var(--nw-font-body);
    cursor: pointer;
}

/* Cinq colonnes de liens dans le pied de page */
@media (min-width: 1081px) {
    .nw-footer-grid { grid-template-columns: 1.4fr repeat(4, minmax(130px, 1fr)); }
}
@media (max-width: 520px) {
    .hd-theme { display: none; }
}

/* La Boutique remonte dans la barre : un lien un peu plus visible */
.hd-link--shop { color: var(--nw-primary-light); }
.hd-link--shop.is-active, .hd-link--shop:hover { color: var(--nw-text); }

/* ---------- Navigation à quatre entrées (RENEW de l'accueil) ---------- */
.hd-nav .hd-link { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.hd-link:focus-visible, .hd-item:focus-visible { outline: 2px solid var(--nw-primary-light, #c084fc); outline-offset: 2px; }
.hd-menu--infos .hd-panel { grid-template-columns: 1fr; width: 320px; }
@media (hover: hover) and (min-width: 1081px) {
    .hd-menu:focus-within:not(.is-open) .hd-panel { opacity: 0; transform: translate(-50%, -6px); pointer-events: none; }
    .hd-menu:hover:not(.is-picked) .hd-panel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    .hd-menu.is-picked .hd-panel { opacity: 0; pointer-events: none; }
}
@media (max-width: 860px) { .hd-menu--infos .hd-panel { width: min(320px, calc(100vw - 32px)); } }

.ft { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--nw-sp-6); margin-bottom: var(--nw-sp-6); }
.ft-brand { display: grid; gap: var(--nw-sp-3); justify-items: start; max-width: 380px; }
.ft-brand .nw-brand > img.nw-brand-banner { height: 44px; width: auto; }
.ft-brand p { font-size: 14px; line-height: 1.6; color: var(--nw-text-dim); }
.ft-discord svg { width: 16px; height: 16px; }
.ft-links { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ft-links a { color: var(--nw-text-dim); transition: color var(--nw-fast) var(--nw-ease); }
.ft-links a:hover, .ft-links a[aria-current="page"] { color: var(--nw-text); }
.ft-legal { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.ft-legal a:hover { color: var(--nw-text); }
@media (max-width: 560px) { .ft-links { flex-direction: column; gap: 12px; } }