/* ===== Bande rose ===== */
nav.menu{
  position: relative;              /* IMPORTANT : rend le z-index effectif */
  z-index: 99;                    /* au-dessus du header/content */
  overflow: visible;
  
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.35)
  );
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(159,0,112,0.08);

  border-top: 1px solid rgba(255,255,255,0.70);
  border-bottom: 1px solid rgba(159,0,112,0.22);

  /* petit tassage vertical du bandeau */
  padding: 2px 0;
}

/* ===== UL principal ===== */
nav.menu > ul{
  width:min(75%, 1200px);
  margin:0 auto;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap: .5rem;
}

/* ===== LI top ===== */
nav.menu > ul > li{
  list-style:none;
  position:relative; /* ancre du sous-menu */
}

/* ===== Liens top : marche avec <li><a> OU <li><div><a> ===== */
nav.menu > ul > li > a,
nav.menu > ul > li > div > a{
  display:flex;
  align-items:center;
  gap:.45rem;
  min-height: 38px;     /* ajuste 36–42 selon ton goût */
  padding: 0 10px;      /* on contrôle par min-height */
  line-height: 1.1;
  text-decoration:none;

  font-family: 'Sora', sans-serif;
  font-weight: 300;                 /* 300 = parfois trop fin sur fond clair */
  font-size: clamp(1.0rem, 1.2vw, 1.45rem);
  letter-spacing: .06em;

  color: rgba(190, 51, 206, 0.90);
  border-radius: 10px;

  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* Hover / focus */
nav.menu > ul > li:hover > a,
nav.menu > ul > li:hover > div > a,
nav.menu > ul > li:focus-within > a,
nav.menu > ul > li:focus-within > div > a{
  background: rgba(255,255,255,0.55);
  color: rgba(159, 0, 112, 0.92);
  transform: translateY(-1px);
}

/* Icônes (si tu remets les <img class="img-home">) */
nav.menu img.img-home{
  width: 1.12rem;
  height: auto;
  vertical-align: middle;
  display: block;
}

/* =========================================
   SOUS-MENU
========================================= */
nav.menu ul.sub-menu{
  position: absolute;
  top: 100%;
  left: 0;

  /* IMPORTANT : au-dessus de tout */
  z-index: 2000;

  /* caché par défaut */
  display: none;

  margin-top: 6px; /* tu peux laisser un espace visuel */
  padding: 10px;

  list-style: none;
  min-width: 200px;

  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 1px solid rgba(159,0,112,0.18);
  border-radius: 0 14px 14px 14px;
  border-radius: 0 14px 14px 14px;
  box-shadow: 0 18px 40px rgba(80,0,90,0.18);

  transform: translateY(4px);
  opacity: 0; 
  transition: transform .18s ease, opacity .18s ease;
}
nav.menu ul.sub-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;       /* zone tampon */
  height:10px;
}
/* Affichage : hover OU navigation clavier (focus) */
nav.menu > ul > li:hover > ul.sub-menu,
nav.menu > ul > li:focus-within > ul.sub-menu{
  display: block;
  transform: translateY(0);
  opacity: 1;
}

/* Liens sous-menu */
nav.menu ul.sub-menu a{
  display:block;
  font-family: 'Sora', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: .03em;
  padding:3px 10px;
  white-space:nowrap;
  text-decoration:none;
  color: MediumOrchid;
  font-size:clamp(1.05rem, 1.15vw, 1.25rem);
  text-align:left;
  border-radius:10px;
  transition: background-color .16s ease, color .16s ease;
}
nav.menu li.has-submenu > ul.sub-menu{ left:8px; }

nav.menu ul.sub-menu a:hover,
nav.menu ul.sub-menu a:focus{
  background: linear-gradient(90deg, rgba(201,46,155,0.10), rgba(255,255,255,0.0));
  color: rgba(120, 0, 90, 0.95);
}
/* Option : petit séparateur entre items (désactive si tu n’aimes pas) */
/*nav.menu ul.sub-menu li + li{
  margin-top: 2px;
}*/
/* =========================================
   (Optionnel) : meilleure zone de clic sur mobile/tactile
========================================= */
@media (max-width: 900px){
  nav.menu > ul{
    width: min(96%, 1200px);
    gap: .55rem;
  }

  nav.menu > ul > li > a,
  nav.menu > ul > li > div > a{
    padding: 7px 9px;
    font-size: clamp(1.00rem, 1.5vw, 1.25rem);
  }
}