/* -------------------------------------------------------------------------- */
/* Header commun — harmonisation depuis index.html                             */
/* -------------------------------------------------------------------------- */
/*
  Ce fichier est chargé après les CSS de page.
  Il force uniquement le logo et le burger du header à reprendre l'affichage
  de la page mère, sans toucher aux footers ni à CollectionPrivee.
*/

.site-header {
  position: absolute !important;
  inset-block-start: 58px !important;
  inset-inline: 0 !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

.site-header__inner {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  min-block-size: 120px !important;
  padding-block: 0 !important;
}

.site-header .brand {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: clamp(18px, 1.2vw, 23px) !important;
  inline-size: clamp(320px, 22.4vw, 430px) !important;
  min-block-size: clamp(116px, 6.98vw, 134px) !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  transform: none !important;
  transform-origin: left top !important;
  pointer-events: auto !important;
}

.site-header .brand__mark {
  display: block !important;
  flex: 0 0 clamp(92px, 5.6vw, 108px) !important;
  inline-size: clamp(92px, 5.6vw, 108px) !important;
  block-size: clamp(112px, 6.4vw, 124px) !important;
}

.site-header .brand__logo-mark {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: contain !important;
  object-position: center -30% !important;
  opacity: 1 !important;
  filter: none !important;
}

.site-header .brand__text {
  display: block !important;
  padding-block-start: 0.05em !important;
  inline-size: clamp(230px, 16.15vw, 310px) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-logo) !important;
  font-size: clamp(32px, 2.24vw, 43px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.112em !important;
  line-height: 1.16 !important;
  text-transform: uppercase !important;
}

.site-header .brand__line {
  display: block !important;
  white-space: nowrap !important;
}

.site-header .menu-button {
  position: fixed !important;
  inset-block-start: clamp(44px, 3.02vw, 58px) !important;
  inset-inline-end: var(--section-pad-x-desktop) !important;
  z-index: calc(var(--z-header, 20) + 60) !important;
  display: inline-grid !important;
  place-content: center !important;
  gap: 6px !important;
  inline-size: 102px !important;
  block-size: 102px !important;
  border: 1px solid rgba(138, 105, 67, 0.56) !important;
  border-radius: var(--pill-radius) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
}

.site-header .menu-button__line {
  display: block !important;
  inline-size: 28px !important;
  block-size: 3px !important;
  background: currentColor !important;
  color: #fff !important;
}

@media (max-width: 1919px) and (min-width: 1440px) {
  .site-header {
    inset-block-start: 42px !important;
  }

  .site-header__inner {
    min-block-size: 96px !important;
  }

  .site-header .brand {
    inline-size: clamp(330px, 23vw, 390px) !important;
    min-block-size: 108px !important;
    gap: 18px !important;
  }

  .site-header .brand__mark {
    flex-basis: clamp(76px, 5.2vw, 92px) !important;
    inline-size: clamp(76px, 5.2vw, 92px) !important;
    block-size: clamp(92px, 6vw, 108px) !important;
  }

  .site-header .brand__text {
    inline-size: clamp(220px, 16vw, 280px) !important;
    font-size: clamp(28px, 2.1vw, 34px) !important;
  }

  .site-header .menu-button {
    inset-block-start: 42px !important;
    inset-inline-end: 48px !important;
    inline-size: 76px !important;
    block-size: 76px !important;
  }
}

@media (max-width: 1439px) and (min-width: 1280px) {
  .site-header {
    inset-block-start: 34px !important;
  }

  .site-header__inner {
    min-block-size: 86px !important;
  }

  .site-header .brand {
    inline-size: 310px !important;
    min-block-size: 92px !important;
    gap: 16px !important;
  }

  .site-header .brand__mark {
    flex-basis: 68px !important;
    inline-size: 68px !important;
    block-size: 82px !important;
  }

  .site-header .brand__text {
    inline-size: 218px !important;
    font-size: 27px !important;
  }

  .site-header .menu-button {
    inset-block-start: 36px !important;
    inset-inline-end: 40px !important;
    inline-size: 68px !important;
    block-size: 68px !important;
  }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .site-header {
    inset-block-start: 32px !important;
  }

  .site-header__inner {
    min-block-size: 76px !important;
  }

  .site-header .brand {
    inline-size: 286px !important;
    min-block-size: 82px !important;
    gap: 14px !important;
  }

  .site-header .brand__mark {
    flex-basis: 60px !important;
    inline-size: 60px !important;
    block-size: 74px !important;
  }

  .site-header .brand__text {
    inline-size: 206px !important;
    font-size: 24px !important;
  }

  .site-header .menu-button {
    inset-block-start: 30px !important;
    inset-inline-end: 40px !important;
    inline-size: 64px !important;
    block-size: 64px !important;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .site-header {
    inset-block-start: 28px !important;
  }

  .site-header__inner {
    min-block-size: 72px !important;
  }

  .site-header .brand {
    inline-size: 258px !important;
    min-block-size: 72px !important;
    gap: 12px !important;
  }

  .site-header .brand__mark {
    flex-basis: 52px !important;
    inline-size: 52px !important;
    block-size: 64px !important;
  }

  .site-header .brand__text {
    inline-size: 194px !important;
    font-size: 22px !important;
  }

  .site-header .menu-button {
    inset-block-start: 26px !important;
    inset-inline-end: 32px !important;
    inline-size: 60px !important;
    block-size: 60px !important;
  }
}

@media (max-width: 767px) {
  .site-header {
    inset-block-start: 22px !important;
  }

  .site-header__inner {
    align-items: flex-start !important;
    min-block-size: 60px !important;
  }

  .site-header .brand {
    inline-size: min(260px, calc(100vw - 112px)) !important;
    min-block-size: 60px !important;
    gap: 10px !important;
  }

  .site-header .brand__mark {
    flex-basis: clamp(38px, 12vw, 48px) !important;
    inline-size: clamp(38px, 10vw, 48px) !important;
    block-size: clamp(48px, 12vw, 58px) !important;
  }

  .site-header .brand__logo-mark {
    object-position: center 45% !important;
  }

  .site-header .brand__text {
    inline-size: min(188px, calc(100vw - 170px)) !important;
    padding-block-start: 1px !important;
    font-size: clamp(18px, 5vw, 21px) !important;
    letter-spacing: 0.082em !important;
  }

  .site-header .menu-button {
    inset-block-start: 22px !important;
    inset-inline-end: 24px !important;
    inline-size: 52px !important;
    block-size: 52px !important;
    gap: 5px !important;
  }

  .site-header .menu-button__line {
    inline-size: 18px !important;
    block-size: 3px !important;
  }
}

@media (max-width: 389px) {
  .site-header .brand {
    inline-size: min(232px, calc(100vw - 94px)) !important;
    gap: 8px !important;
  }

  .site-header .brand__mark {
    flex-basis: 34px !important;
    inline-size: 34px !important;
    block-size: 44px !important;
  }

  .site-header .brand__logo-mark {
    object-position: center -20% !important;
  }

  .site-header .brand__text {
    inline-size: min(174px, calc(100vw - 142px)) !important;
    font-size: 16px !important;
    letter-spacing: 0.075em !important;
  }

  .site-header .menu-button {
    inset-block-start: 18px !important;
    inset-inline-end: 20px !important;
    inline-size: 48px !important;
    block-size: 48px !important;
  }
}

/* Stabilisation header : le conteneur ne doit pas recevoir de transform GSAP. */
.site-header[data-motion="header"] {
  transform: none !important;
}