/* Barre unique. z-index 200 : sous l'overlay d'auth WattsMonde (11000)
   et sous le rail replié (10030). Le fond reste sombre pour rester lisible
   tant que les pages ne sont pas passées au thème (lot suivant). */

.site-header {
  position: fixed;
  z-index: 200;
  inset: 0 0 auto 0;
  height: 64px;
  color: var(--ink);
  background: rgba(17, 20, 25, .94);
  border-bottom: 1px solid transparent;
  transition: transform .45s var(--ease), background .4s, border-color .4s;
}

.site-header.is-solid {
  background: rgba(17, 20, 25, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}

.site-header.is-up { transform: translateY(-100%); }

.site-header__bar {
  height: 64px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: 18px;
}

a.site-header__mark {
  flex: none;
  font: 800 21px/1 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}

a.site-header__mark span { color: var(--teal); }

.site-header__panel {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.site-header__links,
.site-header__tools {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__tools { margin-left: auto; gap: 18px; }

.site-header a {
  color: var(--mute);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-header a:hover,
.site-header a[aria-current="page"] { color: var(--ink); }

a.site-header__mark {
  font: 800 21px/1 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
  text-transform: none;
}

a.site-header__access {
  flex: none;
  color: var(--ink);
  border: 1px solid var(--line2);
  padding: 9px 14px;
  white-space: nowrap;
  transition: border-color .25s, background .25s;
}

.site-header__access-short { display: none; }

.site-header__access:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(236, 234, 228, .06);
}

.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  place-items: center;
  cursor: pointer;
}

.site-header__burger,
.site-header__burger::before,
.site-header__burger::after {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--ink);
}

.site-header__burger { position: relative; }

.site-header__burger::before,
.site-header__burger::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-header__burger::before { top: -6px; }
.site-header__burger::after { top: 6px; }

.site-header .nav-badge-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--sig);
  vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(255, 106, 43, .45);
  animation: site-header-live 2s steps(1) infinite;
}

@keyframes site-header-live {
  50% { opacity: .3; }
}

.site-header__lang,
.site-header__account { position: relative; }

.site-header summary {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.site-header summary::-webkit-details-marker { display: none; }

.site-header summary:hover { color: var(--ink); }

.site-header__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line2);
}

.site-header__menu a {
  display: block;
  padding: 8px 10px;
}

.site-header :where(a, button, summary):focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

.app-container {
  display: block;
  min-height: 100vh;
}

.app-container > main { padding-top: 64px; }

body.veille-public-body .app-container > main { padding-top: 64px !important; }

body.home-agades .home-toolbar {
  margin-left: 0 !important;
  width: 100% !important;
}

body:has(#site-header) #app {
  position: relative;
  inset: auto;
  height: calc(100dvh - 64px);
  margin-top: 64px;
}

body:has(#site-header) header.wm-chrome-tier1 { top: 64px; }
body:has(#site-header) .wm-chrome-tier2 { top: 116px; }
body:has(#site-header) .wm-app-topbar { top: 78px; }

html:has(#site-header) {
  scroll-padding-top: 88px;
}

html:has(#site-header) :target {
  scroll-margin-top: 88px;
}

@media (max-width: 900px) {
  .site-header__access { margin-left: auto; padding: 8px 10px; }
  .site-header__toggle { display: grid; flex: none; margin-left: 0; }

  .site-header__panel {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 8px 20px 20px;
    background: rgba(17, 20, 25, .96);
    border-bottom: 1px solid var(--line);
  }

  .site-header__panel.is-open { display: flex; }

  .site-header__links,
  .site-header__tools {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    gap: 14px;
  }

  .site-header__menu { position: static; min-width: 0; }
}

@media (max-width: 480px) {
  .site-header__access-long { display: none; }
  .site-header__access-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__access,
  .site-header .nav-badge-live {
    transition: none !important;
    animation: none !important;
  }

  .site-header.is-up { transform: none !important; }
}