/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;

  width: 100%;

  color: var(--studio-white);
  background: transparent;

  transition:
    background-color 300ms ease,
    box-shadow 300ms ease,
    backdrop-filter 300ms ease;
}

body.admin-bar .site-header {
  top: 32px;
}

.site-header::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background: rgba(255, 255, 255, 0.12);

  transition: opacity 300ms ease;
}

.site-header__inner {
  width: min(calc(100% - 64px), var(--container-width));
  min-height: var(--header-height);

  margin-inline: auto;

  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);

  transition: min-height 300ms ease;
}

/* ==========================================================
   LOGO
   ========================================================== */

.site-header__brand {
  min-width: 0;

  display: flex;
  align-items: center;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;
}

.site-header__logo-image {
  width: auto;
  max-width: 180px;
  height: 64px;

  object-fit: contain;
  object-position: left center;

  transition:
    height 300ms ease,
    max-width 300ms ease;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.site-header__navigation {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 1.8vw, 34px);

  list-style: none;
}

.site-header__menu li {
  position: relative;
  flex-shrink: 0;
}

.site-header__menu a {
  position: relative;

  display: inline-flex;
  align-items: center;

  padding: 14px 0;

  color: var(--studio-white);

  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  transition:
    color 200ms ease,
    opacity 200ms ease;
}

.site-header__menu a::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;

  height: 2px;

  background: var(--studio-red);

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 250ms ease;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible,
.site-header__menu .current-menu-item > a {
  color: var(--studio-red);
}

.site-header__menu a:hover::after,
.site-header__menu a:focus-visible::after,
.site-header__menu .current-menu-item > a::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==========================================================
   BOUTON AUDIT
   ========================================================== */

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-header__cta {
  min-height: 50px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border: 1px solid var(--studio-red);
  border-radius: 12px;

  color: var(--studio-white);
  background: var(--studio-red);

  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;

  transition:
    color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}

.site-header__cta span {
  font-size: 18px;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {

  background: transparent;

  transform: translateY(-2px);
}

/* ==========================================================
   HEADER APRÈS DÉFILEMENT
   ========================================================== */

.site-header.is-scrolled {
  background: rgba(5, 8, 12, 0.98);

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-scrolled::after {
  opacity: 0;
}

.site-header.is-scrolled .site-header__inner {
  min-height: var(--header-height-scrolled);
}

.site-header.is-scrolled .site-header__logo-image {
  max-width: 155px;
  height: 52px;
}

/* ==========================================================
   BOUTON MENU MOBILE
   ========================================================== */

.site-header__toggle {
  display: none;

  width: 48px;
  height: 48px;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.site-header__toggle span {
  display: block;

  width: 28px;
  height: 2px;

  margin: 7px auto;

  background: var(--studio-white);

  transition:
    transform 250ms ease,
    opacity 250ms ease;
}

.site-header__toggle.is-active span:first-child {
  transform: translateY(4.5px) rotate(45deg);
}

.site-header__toggle.is-active span:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* ==========================================================
   RESPONSIVE DU HEADER
   ========================================================== */

@media (max-width: 1280px) {
  .site-header__inner {
    width: min(calc(100% - 48px), var(--container-width));

    grid-template-columns: 160px minmax(0, 1fr) auto;
    gap: 24px;
  }

  .site-header__logo-image {
    max-width: 150px;
    height: 56px;
  }

  .site-header__menu {
    gap: 18px;
  }

  .site-header__menu a {
    font-size: 12px;
  }

  .site-header__cta {
    min-height: 46px;
    padding: 0 16px;

    font-size: 12px;
  }
}

@media (max-width: 1050px) {
  .site-header__inner {
    width: min(calc(100% - 40px), var(--container-width));

    grid-template-columns: 1fr auto;
    gap: 20px;
  }

  .site-header__logo-image {
    max-width: 145px;
    height: 54px;
  }

  .site-header__navigation {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;

    visibility: hidden;
    opacity: 0;

    padding: 30px 24px 40px;

    background: rgba(5, 8, 12, 0.98);

    transform: translateY(-20px);

    transition:
      opacity 250ms ease,
      visibility 250ms ease,
      transform 250ms ease;
  }

  body.admin-bar .site-header__navigation {
    top: calc(var(--header-height) + 32px);
  }

  .site-header__navigation.is-open {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);
  }

  .site-header__menu {
    width: 100%;

    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .site-header__menu li {
    width: 100%;
  }

  .site-header__menu a {
    width: 100%;
    padding: 16px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    font-size: 15px;
  }

  .site-header__actions {
    display: none;
  }

  .site-header__toggle {
    display: block;
  }
}

@media (max-width: 767px) {
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .site-header__navigation {
    top: calc(var(--header-height) + 46px);
  }

  .site-header__inner {
    width: calc(100% - 32px);
  }

  .site-header__logo-image {
    max-width: 130px;
    height: 48px;
  }
}