/* ================================================================
 * nav-tools.css — menu déroulant « Outils » de la navigation
 * (métronome, accordeur, grilles). Chargé par toutes les pages.
 * Utilise les variables et la classe .nav-link déjà définies par les pages.
 * ================================================================ */
.nav-drop{position:relative;display:inline-block}
.nav-drop>.nav-link{cursor:pointer}
.nav-drop>.nav-link::after{content:"\25BE";margin-left:5px;font-size:9px;opacity:.7}
.nav-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:170px;z-index:5000;
  display:none;flex-direction:column;gap:2px;padding:4px;
  background:#0e0a07;border:1px solid var(--line,#3a2c1e);border-radius:8px;box-shadow:0 18px 40px -12px rgba(0,0,0,.9);
}
.nav-menu::before{content:"";position:absolute;left:-10px;right:-10px;top:-14px;height:14px}
.nav-menu .nav-link{display:block}
.nav-drop:hover>.nav-link{color:var(--cream,#f4e7d0)}
.nav-drop:hover>.nav-menu,.nav-drop:focus-within>.nav-menu,.nav-drop.open>.nav-menu{display:flex}
@media(max-width:760px){
  /* la barre défile horizontalement : le menu est donc positionné en « fixed » par nav-tools.js */
  .nav-menu{position:fixed;top:auto;right:auto}
  .nav-drop:hover>.nav-menu,.nav-drop:focus-within>.nav-menu{display:none}
  .nav-drop.open>.nav-menu{display:flex}
}
/* pages guitare : le survol/actif utilise la couleur de la page */