header {
  top: 0;
  z-index: 1000;

  height: var(--header-height);
  width: 100%;
  background-color: var(--white);
}

.header--sticky {
  position: sticky;
}

.header--fixed {
  position: fixed;
}

.header--container {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
}

.header--container.content-width {
  max-width: min(80vw, 94rem);
}

.header--logo-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .header--logo {
    display: block;
    width: var(--width-mobile);
    height: var(--height-mobile);
  }
}

.header--logo:focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}

.header--nav {
  display: flex;
  align-items: center;
}

.header--nav.header--modal:not(.header--modal__desktop-only) {
  flex-direction: column;
  gap: 1.25rem;
  justify-content: center;
}

.header--nav-links {
  display: flex;
  list-style: none;
  padding-inline: 0;

  width: var(--content-width);
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.header--nav.header--modal:not(.header--modal__desktop-only) .header--nav-links {
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.header--nav--item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.31rem;
  height: 100%;
}

.header--nav--item:has(.header--accordion-content.hidden) {
  gap: 0;
}

.header--nav--item .header--accordion-title,
.header--nav--item .header--component-menu-item__item {
  margin-bottom: 0;
}

.header--nav:not(.header--modal):not(.header--modal__mobile-only) .header--accordion-content {
  position: absolute;
}

.header--nav--subitems {
  display: flex;
  flex-direction: column;
  gap: 0.31rem;
  list-style: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.header--burger {
  pointer-events: visible;
  cursor: pointer;
}

.header--burger path {
  stroke: var(--secondary);
  transform-origin: center center;
  transition: transform var(--transition-time);
}

/* MODALS */

.header--modal {
  position: fixed;
  background-color: var(--white);
  top: calc(var(--header-height) - 1px);
  left: 0;
  z-index: 100;

  height: calc(100vh - var(--header-height));
  width: 100vw;

  opacity: 0;
  overflow: auto;

  transition:
    transform var(--transition-time),
    opacity var(--transition-time);
}

.header--modal.is-open {
  opacity: 1;
}

.header--nav:not(.header--modal),
.header--modal__desktop-only {
  position: static;

  height: auto;
  width: auto;

  transform: none;
  opacity: 1;

  overflow: auto;
}

/* --- GESTION AFFICHAGE SOUS-MENU --- */

/* 1. Caché par défaut */
.header--accordion-content {
  /* display: none; */
}

/* 2. Affiché si la classe .is-active est présente (Mobile via JS) */
.component-accordion.is-active .header--accordion-content {
  display: block;
}

@media screen and (max-width: 63.938rem) /* 1023px */ {
  .header--nav--subitems {
    width: 100%;
  }
}

@media screen and (min-width: 64rem) /* 1024px */ {
  .header--container {
    justify-content: center;
  }

  .header--logo-link {
    width: var(--width-desktop);
    z-index: 1000;

    .header--logo {
      position: relative;
      width: var(--width-desktop);
      height: auto;
    }
  }

  /* HEADER MODALS */

  .header--nav:not(.header--modal),
  .header--nav.header--modal:not(.header--modal__desktop-only) {
    display: flex;
    flex-direction: row;
    padding-top: 0;
    height: 100%;
    width: 100%;
    gap: 11.62rem;
  }

  .header--nav.header--modal.header--modal__mobile-only .header--nav-links {
    flex-direction: row;
    padding-inline: 0;
    height: 100%;
    gap: 3.12rem;
  }

  .header--nav.header--modal:not(.header--modal__desktop-only) .header--nav-links {
    gap: 1rem;
  }

  .header--nav.header--modal:not(.header--modal__desktop-only) .header--nav-links.level-1 {
    justify-content: start;
  }
  .header--nav.header--modal:not(.header--modal__desktop-only) .header--nav-links.level-2 {
    justify-content: end;
  }

  .header--modal__mobile-only {
    position: static;

    height: auto;
    width: auto;

    transform: none;
    opacity: 1;
  }

  /* --- GESTION HOVER DESKTOP --- */

  /* Au survol du parent (li), on affiche le contenu (le lien reste cliquable) */
  .component-accordion:hover .header--accordion-content {
    display: block;
  }

  .component-accordion .header--accordion-content {
    position: absolute;
    top: var(--header-height);
    left: -1.81rem;
    width: max-content;
    min-width: 19.438rem;
  }

  /* Style du menu déroulant desktop (positionnement) */
  .header--nav:not(.header--modal) .header--accordion-content {
    /* On s'assure qu'il est bien positionné (déjà en absolute dans ton code de base) */
    top: 100%;
    left: 0;
    background-color: var(--black);
    min-width: 200px;
    padding: 1rem;
    z-index: 1100;
  }

  .header--nav--subitems {
    align-items: start;
  }
}

@media screen and (min-width: 80rem) /* 1280px */ {
  .header .accordion-content ul {
    padding-left: 0rem;
  }

  .header--nav.header--modal:not(.header--modal__desktop-only) .header--nav-links {
    gap: 3.12rem;
  }
}

@media screen and (min-width: 90rem) /* 1440px */ {
  .header--nav:not(.header--modal),
  .header--nav.header--modal:not(.header--modal__desktop-only) {
    gap: 27.62rem;
  }
}

@media screen and (min-width: 120rem) /* 1440px */ {
  .header--nav:not(.header--modal),
  .header--nav.header--modal:not(.header--modal__desktop-only) {
    gap: 43.62rem;
  }
}