.nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.4s ease, opacity 0.4s ease;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);

  /* Le flou est conservé. L'ombre qui descend garde le logo blanc lisible
     quand la photo du carrousel est claire. */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0.45) 0%,
              rgba(0, 0, 0, 0.18) 70%,
              rgba(0, 0, 0, 0) 100%);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 20px;
  min-height: 80px;
}

/* ✅ NAV CACHE AU SCROLL */
.nav.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* ✅ BURGER */
.burger {
  position: fixed;
  top: 25px;
  right: 60px;

  width: 40px;
  height: 50px;

  background-image: url("../assets/hum.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;

  border: none;
  cursor: pointer;

  z-index: 1002;

  transition: transform 0.4s ease;
}

/* ✅ BURGER QUI BOUGE AVEC LE MENU */
.burger.open{
  transform: translateX(-260px)
}

/* ✅ MENU */
.menu-wrapper {
  /* filter: invert(1); */
   box-shadow: -5px 0 15px rgba(0, 0, 0, 0.355);
  position: fixed;
  top: 0;
  right: 0;

  width: 260px;
  height: 100vh;

  background: white;

  transform: translateX(100%);
  transition: transform 0.4s ease;

  z-index: 1001;
}

.menu-wrapper.open {
  transform: translateX(0);
}

.menu {
  padding: 80px 20px;
  color: black;
}


.title {
  text-align: center;
  font-family: var(--roboto);
  position: absolute; /* Positionne absolument le titre par rapport à nav */
  left: 50%; /* Centre horizontalement */
  transform: translateX(-50%); /* Ajuste le centrage */
  margin: 0; /* Réinitialise les marges */
  cursor: pointer;

}

.menu button {
  background-color: #ffffff;
  color: #000000;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  font-size: 18px;
  font-family:  var(--open-sans);
  text-align: right;
  border: none;
  outline: none;
  transition: 0.4s;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .menu-title:hover, .subtitle li:hover {
  background-color: #c7c7c7;
}

.subtitle {
  padding: 0 18px;
  background-color: rgb(255, 255, 255);
  color: #000;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  font-family:  var(--roboto);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  list-style: none;
  font-style: normal;
  margin: 0;
  padding-left: 10px;
}

.subtitle.open {
  max-height: 500px; /* Assez grand pour afficher tout le contenu */
  z-index: 2;
}

.subtitle li {
  padding: 8px 0px; 
}

/* Les deux groupes de boutons du menu, chacun dans son cadre :
   [PRODUCTS, SHOP]  et  [LOOKBOOKS, MANIFESTO, CONTACT] */
.menu-group {
  border: 1px solid #000;
  padding: 6px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.menu-group:last-of-type {
  margin-bottom: 0;
}


/* Page contact : le fond est clair, le logo blanc et le burger gris
   y seraient invisibles. On les repasse en sombre. */
.page-link .logo {
  filter: none;
}

.page-link .burger {
  filter: invert(1);
}

.page-link .nav {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* La page contact doit rester vierge : l'image de fond porte déjà les
   emails, l'Instagram, le site et l'adresse de la boutique. On masque
   donc aussi les boutons du pied de page, qui feraient doublon. */
.page-link .footer {
  display: none;
}