.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 17px 41px;
  background: var(--color-bg);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 54px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  height: 6px;
  width: 100%;
  background: var(--color-text);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out), background-color 0.2s var(--ease-out), width 0.3s var(--ease-out);
}

.hamburger span:nth-child(2) {
  height: 5px;
  width: 70%;
  background: var(--color-accent-green-bright);
}

.hamburger:hover span:nth-child(2) {
  width: 100%;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(16.5px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-16.5px) rotate(-45deg);
}

.site-logo {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.site-logo-img {
  /* Logo officiel (POG_BRUN.png du pack "POG LOGOS"), recadré au plus près */
  height: 38px;
  width: auto;
}

.header-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
}

.header-icon-btn svg,
.header-icon-btn img {
  width: 22px;
  height: 22px;
}

.social-links {
  display: flex;
  gap: var(--space-2);
}

.social-links a {
  width: 20px;
  height: 20px;
  opacity: 0.9;
  color: var(--color-text-muted);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.social-links a:hover {
  opacity: 1;
  color: var(--color-text);
  transform: translateY(-2px);
}

.social-links svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* Largeur limitée au contenu (+ un peu d'air) plutôt que plein écran,
     pour laisser le site visible à côté du menu ouvert. */
  width: fit-content;
  max-width: 90vw;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) calc(var(--space-4) + var(--space-3)) var(--space-3) var(--space-3);
  background: linear-gradient(160deg, var(--color-bg-alt) 0%, var(--nav-panel-bg) 65%);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.35s var(--ease-out);
}

.nav-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Bandes aux couleurs de la Palestine, plaquées au bord du panneau :
   elles se déplacent avec lui puisqu'elles héritent de son transform. */
.nav-panel-stripes {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.nav-panel-stripes span {
  flex: 1;
}

.nav-panel-stripes span:nth-child(1) { background: var(--color-accent-green-bright); }
.nav-panel-stripes span:nth-child(2) { background: #ffffff; }
.nav-panel-stripes span:nth-child(3) { background: var(--color-accent-noir); }
.nav-panel-stripes span:nth-child(4) { background: var(--color-accent-red); }

.nav-panel.is-open {
  transform: translateX(0);
}

.nav-panel-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  /* px fixe : le menu burger ne doit pas suivre l'échelle globale des fonts */
  line-height: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.nav-panel-close svg {
  width: 18px;
  height: 18px;
}

.nav-panel-close:hover {
  background: var(--color-accent-green-bright);
  border-color: var(--color-accent-green-bright);
  color: var(--color-bg);
}

.nav-panel-eyebrow {
  position: relative;
  z-index: 1;
  padding-left: var(--space-3);
  margin-bottom: 0;
}

.nav-panel ul {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-3);
  counter-reset: nav-item;
}

.nav-panel li {
  counter-increment: nav-item;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.nav-panel.is-open li {
  opacity: 1;
  transform: translateX(0);
}

.nav-panel.is-open li:nth-child(1) { transition-delay: 0.05s; }
.nav-panel.is-open li:nth-child(2) { transition-delay: 0.1s; }
.nav-panel.is-open li:nth-child(3) { transition-delay: 0.15s; }
.nav-panel.is-open li:nth-child(4) { transition-delay: 0.2s; }
.nav-panel.is-open li:nth-child(5) { transition-delay: 0.25s; }
.nav-panel.is-open li:nth-child(6) { transition-delay: 0.3s; }

.nav-panel a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  /* px fixe : le menu burger ne doit pas suivre l'échelle globale des fonts */
  font-size: clamp(44px, 8vw, 70px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--color-text-muted);
  /* 6px réservés à droite et rendus au survol (gap 14 -> 20) : la largeur totale du lien
     ne change pas, donc le panneau (width: fit-content) ne se redimensionne pas. */
  padding-right: 6px;
  transition: color 0.2s var(--ease-out), gap 0.2s var(--ease-out), padding 0.2s var(--ease-out);
}

.nav-panel a::before {
  content: counter(nav-item, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  /* brun de l'événement (#251816, celui du logo POG_BRUN) */
  color: var(--color-text);
}

.nav-panel a:hover,
.nav-panel a[aria-current="page"] {
  color: var(--color-text);
  gap: 20px;
  padding-right: 0;
}

.nav-panel a[aria-current="page"] {
  color: var(--color-accent-green-bright);
}

/* Le site désactive les animations en global si l'OS demande "réduire les
   animations" (voir base.css). L'ouverture du menu est fonctionnelle
   (donne un retour visuel clair), donc on la garde animée dans tous les cas. */
.hamburger span {
  transition-duration: 0.25s !important;
}

.nav-panel {
  transition-duration: 0.35s !important;
}

.nav-panel li {
  transition-duration: 0.35s !important;
}

/* Le menu burger ne bloque plus le scroll du site derrière lui */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Tous les noms (organisateurs + staff) entassés ensemble, tout en bas du footer */
.footer-names {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding-top: var(--space-2);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.footer-names li:not(:last-child)::after {
  content: "·";
  margin-left: 6px;
  color: var(--color-border);
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.footer-menu a {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease-out);
}

.footer-menu a:hover {
  color: var(--color-accent-green-bright);
}

.footer-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.footer-credits a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-credits a:hover {
  color: var(--color-text);
}