/* ── Navigation Securost — styles complémentaires aux classes Tailwind ──────── */

/* Badge "Nouveau" */
.nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: #FEF2F2;
  color: #C82A2F;
  line-height: 1.4;
}

/* Focus visible — accessibilité clavier (WCAG AA) */
#main-nav a:focus-visible,
#main-nav button:focus-visible {
  outline: 2px solid #C82A2F;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Chevron des mega-menus : rotation pilotée par aria-expanded plutôt que du JS inline */
#main-nav .chevron {
  transition: transform 0.3s ease;
}
#main-nav [aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* Accordéon mobile : hauteur animée en JS (voir navbar.js), transition ici */
#mobile-menu .acc-panel {
  overflow: hidden;
  height: 0px;
  transition: height 0.25s ease;
}

/* Flèche de section d'accordéon mobile */
#mobile-menu .acc-arrow {
  transition: transform 0.25s ease;
}
#mobile-menu [aria-expanded="true"] .acc-arrow {
  transform: rotate(180deg);
}

/* Le mega-menu desktop reste un simple show/hide pour préserver le comportement existant */
#main-nav .mega-menu {
  animation: nav-mega-in 0.15s ease-out;
}
@keyframes nav-mega-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}