/* ============ MEMENTO VIV'EXPRESS — menu déroulant « Les éditions » ============
   Ajout non destructif : css/style.css et css/pages.css ne bougent pas.
   Deux déclinaisons du même contenu — un panneau flottant dans le header desktop,
   un accordéon dans le menu mobile plein écran. */

/* ---------------- Header desktop : le déclencheur ---------------- */

.nav-drop{position:relative;display:flex;align-items:center}

.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;position:relative;
  font-family:inherit;font-weight:600;font-size:.92rem;line-height:1.6;
  color:var(--creme);background:none;border:none;padding:0;cursor:pointer;
  transition:color .3s;
}
.header.scrolled .nav-drop-btn,
.header-page .nav-drop-btn{color:var(--noir)}

/* même soulignement orange que les autres liens du header */
.nav-drop-btn::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:3px;
  background:var(--orange);transition:right .25s;
}
.nav-drop-btn:hover::after,
.nav-drop.open > .nav-drop-btn::after,
.nav-drop.is-current > .nav-drop-btn::after{right:0}

.nav-drop-chev{
  width:11px;height:11px;flex:none;transition:transform .25s ease;
  margin-top:1px;
}
.nav-drop.open .nav-drop-chev{transform:rotate(180deg)}

/* ---------------- Header desktop : le panneau ---------------- */

.nav-drop-menu{
  /* min-width : de quoi tenir « Édition 2027 » + sa pastille sur une seule ligne */
  position:absolute;top:100%;left:50%;z-index:5;min-width:228px;
  margin-top:12px;padding:8px;
  background:var(--creme);border:1px solid var(--ligne);border-radius:14px;
  box-shadow:0 18px 40px rgba(31,26,19,.16);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
/* zone tampon : la souris peut traverser les 12px entre le lien et le panneau */
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

@media (hover:hover){
  .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
}
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}

/* on neutralise le soulignement hérité de .header-nav a */
.header-nav .nav-drop-menu a{
  display:block;padding:9px 14px;border-radius:9px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.04em;line-height:1.2;
  color:var(--noir);transition:background .2s,color .2s;
}
.header-nav .nav-drop-menu a::after{display:none}
.header-nav .nav-drop-menu a:hover,
.header-nav .nav-drop-menu a:focus-visible{background:var(--creme2)}
.header-nav .nav-drop-menu a[aria-current]{background:var(--jaune)}

/* ---------------- Menu mobile : l'accordéon ---------------- */

/* le déroulant peut faire déborder l'overlay sur les petits écrans :
   flex-start + marges auto = centré quand ça rentre, scrollable sinon */
.menu-mobile{justify-content:flex-start;overflow-y:auto;padding:84px 24px 48px}
.menu-mobile > *:first-child{margin-top:auto}
.menu-mobile > *:last-child{margin-bottom:auto}

.menu-drop{display:flex;flex-direction:column;align-items:center;width:100%}

.menu-drop-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.7rem;line-height:1;color:var(--creme);
  background:none;border:none;padding:0;cursor:pointer;
}
.menu-drop-btn .nav-drop-chev{width:15px;height:15px}
.menu-drop.open .nav-drop-chev{transform:rotate(180deg)}

.menu-drop-list{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s cubic-bezier(.7,0,.3,1),opacity .25s ease,margin-top .35s;
}
.menu-drop.open .menu-drop-list{max-height:260px;opacity:1;margin-top:22px}

.menu-mobile .menu-drop-list a{
  font-size:1.05rem;font-weight:700;letter-spacing:.06em;
  color:rgba(255,251,239,.82);transition:color .2s;
}
.menu-mobile .menu-drop-list a:hover,
.menu-mobile .menu-drop-list a[aria-current]{color:var(--jaune)}

/* ---------------- L'édition à venir, mise en avant ---------------- */

/* pastille « prochaine » sur l'entrée 2027 des deux menus. Pas de fond ajouté
   sur le lien lui-même : le jaune reste réservé à la page courante. */
.nav-next-tag{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.6rem;letter-spacing:.07em;line-height:1.55;vertical-align:middle;
}
/* panneau desktop : fond crème → pastille noire, sur la même ligne que le libellé */
.header-nav .nav-drop-menu .nav-next{white-space:nowrap}
.header-nav .nav-drop-menu .nav-next-tag{background:var(--noir);color:var(--jaune)}
/* overlay mobile : fond noir → pastille jaune */
.menu-mobile .menu-drop-list .nav-next-tag{background:var(--jaune);color:var(--noir);font-size:.66rem}

@media (prefers-reduced-motion:reduce){
  .nav-drop-menu,.nav-drop-chev,.menu-drop-list{transition:none}
}