body {
  padding-top: var(--header-offset-desktop, 190px);
}

.siteHeader {
  position: fixed;
  font-family: 'Mulish', sans-serif;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(16px, 3vw, 24px) 16px clamp(8px, 1.5vw, 12px);
  background: var(--header-bg);
  box-shadow: var(--header-shadow);
  backdrop-filter: blur(0px);
  transition:
    padding 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease,
    backdrop-filter 220ms ease;
}

.headerInner {
  width: min(100%, var(--container-max));
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    flex-direction 220ms ease,
    align-items 220ms ease,
    justify-content 220ms ease,
    width 220ms ease;
}

.headerBrand {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform-origin: top center;
  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    transform 220ms ease,
    width 220ms ease,
    margin 220ms ease;
}

.logoLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.siteLogo {
  width: min(78vw, 420px);
  max-width: 100%;
  height: auto;
  display: block;
  transition:
    width 220ms ease,
    transform 220ms ease,
    opacity 180ms ease;
}

.mainNav {
  margin-top: clamp(14px, 2.5vw, 20px);
  width: 100%;
  transition:
    margin-top 220ms ease,
    width 220ms ease,
    margin-left 220ms ease;
}

/* Nouveau conteneur des 2 groupes */
.navRows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 18px;
  row-gap: 10px;
  width: 100%;
}

.navGroup {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--nav-gap);
  padding: 0;
  margin: 0;
}

.navGroup li {
  list-style: none;
  text-align: center;
}
.mainNav,
.mainNav * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mainNav a {
  position: relative;
  display: inline-block;
  padding: var(--nav-hit-y) var(--nav-hit-x);
  text-decoration: none;
  font-size: clamp(11px, 1.5vw, 13px);
  color: #aaa;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--nav-radius);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  will-change: box-shadow, background-color;  
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-drag: none;
  user-drag: none;
  transition:
    color var(--transition-fast) ease,
    background-color var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease,
    opacity var(--transition-fast) ease;
}

.mainNav a::before,
.mainNav a::after {
  content: "";
  position: absolute;
  width: var(--bracket-size);
  height: var(--bracket-size);
  opacity: 0;
  pointer-events: none;
  transition:
    top 180ms cubic-bezier(.2,.9,.2,1),
    left 180ms cubic-bezier(.2,.9,.2,1),
    opacity 140ms ease,
    border-color 120ms ease;
}

.mainNav a::before {
  top: -16px;
  left: -16px;
  border-top: var(--bracket-stroke) solid var(--bracket-color);
  border-left: var(--bracket-stroke) solid var(--bracket-color);
}

.mainNav a::after {
  top: calc(100% + 5px);
  left: calc(100% + 5px);
  border-right: var(--bracket-stroke) solid var(--bracket-color);
  border-bottom: var(--bracket-stroke) solid var(--bracket-color);
}

.mainNav a:hover,
.mainNav a.active,
.mainNav a.nav-pressed {
  color: #1a1a1a;
  background-color: var(--logo-beige);
}

.mainNav a:hover {
  box-shadow:
    0 3px 7px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}

.mainNav a.active,
.mainNav a.nav-pressed {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.82);
}

.mainNav a:hover::before,
.mainNav a.active::before {
  opacity: 1;
  top: -6px;
  left: -6px;
}

.mainNav a:hover::after,
.mainNav a.active::after {
  opacity: 1;
  top: calc(100% - 6px);
  left: calc(100% - 6px);
}

.mainNav a.active::before,
.mainNav a.nav-pressed::before {
  border-top-color: var(--bracket-active-color);
  border-left-color: var(--bracket-active-color);
}

.mainNav a.active::after,
.mainNav a.nav-pressed::after {
  border-right-color: var(--bracket-active-color);
  border-bottom-color: var(--bracket-active-color);
}

.mainNav a.nav-pressed::before {
  opacity: 0;
  top: -16px;
  left: -16px;
}

.mainNav a.nav-pressed::after {
  opacity: 0;
  top: calc(100% + 5px);
  left: calc(100% + 5px);
}

.mainNav a.active-leaving::before,
.mainNav a.active-leaving::after {
  opacity: 0;
  top: 50%;
  left: 50%;
}

.mainNav a.active.active-anim::before {
  opacity: 0;
  top: -16px;
  left: -16px;
}

.mainNav a.active.active-anim::after {
  opacity: 0;
  top: calc(100% + 5px);
  left: calc(100% + 5px);
}

/* ===== Desktop compact ===== */

@media (min-width: 768px) {
  body.header-scrolled .siteHeader {
    padding: 10px 16px;
    backdrop-filter: blur(8px);
  }

  body.header-scrolled .headerInner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  body.header-scrolled .headerBrand {
    width: auto;
    margin: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  body.header-scrolled .siteLogo {
    width: clamp(150px, 15vw, 220px);
  }

  body.header-scrolled .mainNav {
    width: auto;
    margin-top: 0;
    margin-left: 24px;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }

  body.header-scrolled .navRows {
    width: max-content;
    max-width: 100%;
    justify-content: center;
    column-gap: 18px;
    row-gap: 10px;
  }

  body.header-scrolled .navGroup {
    gap: clamp(8px, 1vw, 18px);
  }
}

/* Si tout ne tient plus sur une ligne, le groupe du bas passe entier dessous */
@media (min-width: 768px) and (max-width: 1120px) {
  body.header-scrolled .headerInner {
    align-items: flex-start;
  }

  body.header-scrolled .mainNav {
    margin-left: 18px;
  }

  body.header-scrolled .navRows {
    width: max-content;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    column-gap: 0;
  }

  body.header-scrolled .navGroup {
    justify-content: center;
  }

  body.header-scrolled .navGroup--top {
    width: 100%;
  }

  body.header-scrolled .navGroup--bottom {
    width: 100%;
  }
}

/* ===== Mobile ===== */

@media (max-width: 767px) {
  .siteHeader {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .headerBrand {
    max-height: 180px;
    opacity: 1;
    transform: translateY(0);
  }

  .siteLogo {
    width: min(86vw, 360px);
  }

  .mainNav {
    margin-top: 12px;
  }

  .navRows {
    row-gap: 10px;
    column-gap: 0;
  }

  .navGroup {
    width: 100%;
    gap: 10px 12px;
  }

  .navGroup--top,
  .navGroup--bottom {
    justify-content: center;
  }

  .mainNav a {
    letter-spacing: 0.09em;
  }

  body.header-scroll-down .headerBrand {
    max-height: 0;
    opacity: 0;
    transform: translateY(-16px);
  }

  body.header-scroll-down .mainNav {
    margin-top: 0;
  }

  body.header-scroll-up .headerBrand,
  body:not(.header-scroll-down) .headerBrand {
    max-height: 180px;
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .navGroup {
    gap: 8px 10px;
  }

  .mainNav a {
    font-size: 11px;
    padding: 7px 10px;
    letter-spacing: 0.08em;
  }
}