/* ============================================================
   🌙 HERO MENU — STYLE LUXE ALIGNÉ À GAUCHE
   Identique au header mais placé dans le hero
============================================================ */

/* Menu dans le hero */
.hero-menu {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-start: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* alignement horizontal */
  gap: 44px;  /* un peu plus compact que 54px */
  margin-top: 5px;
  padding-left: clamp(0px, 5vw, 25px);

  z-index: 50;
  background: transparent;
  border: none;
    pointer-events: auto;
}

/* =============================
   NAVIGATION — identique à ton style luxe
============================= */
.hero-menu a {
  position: relative;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.05rem; /* légèrement plus petit que le header */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s ease, opacity 0.4s ease;
  opacity: 0.9;
}

/* — Soulignement doré — */
.hero-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: linear-gradient(90deg, #bfa670, #e6d69e);
  opacity: 0.3;
  transition: width 0.35s ease, left 0.35s ease, opacity 0.3s ease;
}

.hero-menu a:hover::after,
.hero-menu a.active::after {
  width: 100%;
  left: 0;
  opacity: 1;
}

/* — Hover doré lumineux — */
.hero-menu a:hover,
.hero-menu a.active {
  color: #e6d69e;
  opacity: 1;
}

/* =============================
   RESPONSIVE
============================= */

/* Medium (tablette) */
@media (max-width: 900px) {
  .hero-menu {
    top: 18px;
    left: 24px; /* toujours aligné à gauche */
    gap: 26px; /* plus compact */
    padding-left: 0;
      margin-top: 10px;
      margin-left: 10px;

  }

  .hero-menu a {
    font-size: 0.85rem;
    letter-spacing: 0.065em;
  }
}

/* Petit mobile */
@media (max-width: 600px) {
  .hero-menu {
    flex-direction: row; /* horizontal à gauche */
    align-items: center;
    justify-content: flex-start;
    top: 16px;
    left: 18px;
    gap: 16px;
    margin-top: 10px;
          margin-left: 10px;

  }

  .hero-menu a {
    font-size: 0.74rem; /* VRAIMENT plus petit sur mobile */
    letter-spacing: 0.06em;
  }
}