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

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

.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: 75.75rem;
}

.header--container:has(.header--nav.is-open) {
  .header--logo-link {
    display: none;
  }
}

.header--logo-link {
  position: absolute;
  left: 0;
  top: 2.5rem;

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

.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;
  padding-top: 8rem;
}

.header--nav-links {
  display: flex;
  list-style: none;
  padding-inline: 2rem;
}

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

.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--burger {
  pointer-events: visible;
  cursor: pointer;
}

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

header .user-firstName{
  color:var(--white);  
  white-space: normal; 
  display: none; 
  font-size: 1rem; 
  word-break: break-word;   
  max-width: 100%; 

}

/* MODALS */

.header--modal {
  position: fixed;
  background-color: var(--black);
  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;
}

/* SEARCH */

.header--search-label {
  width: 100%;
}

.header--search-input {
  width: 100%;
  background: transparent;
  border-bottom: 0.063rem solid var(--blue-800);
  border-radius: 0;
  color: var(--blue-800);
  margin-bottom: 1.5rem;
}

.header--search-input:focus {
  outline: none;
}

.search--submit {
  border: 2px solid var(--blue-800);
  border-radius: 2.5rem;
  color: var(--blue-800);
  background: transparent;
  width: 100%;
  padding: 0.5rem;
  cursor: pointer;

  transition:
    color var(--transition-time, 0.25s),
    background-color var(--transition-time, 0.25s);
}

.search--submit:hover,
.search--submit:focus {
  color: var(--blue-400);
  background-color: var(--blue-800);
  outline: none;
}
/* --- 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 (min-width: 64rem) /* 1024px */ {
  .header--container {
    justify-content: center;
  }

  .header--logo-link {
    width: var(--width-desktop);
    top: 0;
    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%;
  }

  .header--nav.header--modal:not(.header--modal__mobile-only) {
    flex-direction: column;
  }

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

  .header--nav.header--modal.header--modal__desktop-only .header--nav-links {
    flex-direction: column;
  }

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

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

    height: auto;
    width: auto;

    transform: none;
    opacity: 1;
  }

  header .name-connected{
    display: flex;
    height: 100%;
    align-items: center;
  }

  .header--modal__desktop-only {
    position: fixed;

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

    transform: translateX(100%);
  }

  .header--modal__desktop-only .header--nav-links {
    flex-direction: column;
  }
  /* --- GESTION HOVER DESKTOP --- */

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

  /* 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--component-menu-item__item {
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .header--component-menu-item__item:has(.inscription) {
    right: 2.063rem;
  }
  .header--component-menu-item__item:has(.connexion) {
    right: 0;
    left: auto;
  }

  header .user-firstName{
    display: inline-block; 
  }
  
  .header--nav:has(.connexion .user-firstName:empty) 
  .header--component-menu-item__item:has(.panier){
    right: 3.5rem;
    left: auto;
  }

  .header--nav:has(.connexion .user-firstName:not(:empty)) 
  .header--component-menu-item__item:has(.panier){
    right: 11.5rem;
    left: auto;
  }

  .header--component-menu-item__item:has(.connexion):has(.user-firstName:not(:empty)) p.name-connected {
      display: flex;
      visibility: visible;
  }

  .header--component-menu-item__item.is-hovered .connexion,
  .header--component-menu-item__item.is-hovered .connexion * {
      color: var(--primary);
  }

  .header--component-menu-item__item:has(.connexion):has(.user-firstName:not(:empty)) {
      right: 0;
      left: auto;
  }

  .header--component-menu-item__item:has(.connexion):has(.user-firstName:empty) p.name-connected {
      display: none;
      visibility: hidden;
  }


  .header--nav--subitems {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    padding: 2.5rem 0;
    justify-content: center;

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

  .header--nav--subitems .header--component-menu-item__subitem {
    display: flex;
    flex-direction: column;
    justify-content: end;
  }

  .header .accordion-content ul {
    padding-left: 9.375rem;
  }
}

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

  .header--component-menu-item__item:has(.connexion) {
    right: auto;
    left: 68rem;
  }

  .header--component-menu-item__item:has(.connexion):has(.user-firstName:empty) ~ 
  .header--component-menu-item__item:has(.panier) {
    right: auto;
  }

  
  .header--nav:has(.connexion .user-firstName:empty) 
  .header--component-menu-item__item:has(.panier){
    right: auto;
    left: 65.5rem;
  }

  .header--nav:has(.connexion .user-firstName:not(:empty)) 
  .header--component-menu-item__item:has(.panier){
    right: auto;
    left: 65.5rem;
  }

  .header--component-menu-item__item:has(.connexion):has(.user-firstName:not(:empty)) p.name-connected {
      display: flex;
      visibility: visible;
  }

  .header--component-menu-item__item:has(.connexion):has(.user-firstName:not(:empty)) {
      right: auto;
      left: 68rem;
  }

  .header--component-menu-item__item:has(.connexion):has(.user-firstName:empty) p.name-connected {
      display: none;
      visibility: hidden;
  }
}