/* ============================================================
   navbar.css — design system v0 — composant navbar
   Owner: xilrian-agent (XA) · 2026-05-08
   ============================================================
   Layout primaire navigation — utilisable dans .ds-header ou
   en standalone. Sur mobile : flex wrap simple, pas de drawer
   pour v0 (laissé aux agents si besoin).
   ============================================================ */

.ds-navbar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.ds-navbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-navbar__item {
  margin: 0;
}

.ds-navbar__link {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-base);
  font-size: var(--ds-font-size-base);
  font-weight: var(--ds-font-weight-medium);
  color: var(--surface-color-text, currentColor);
  text-decoration: none;
  transition: background-color var(--ds-transition-fast),
              color var(--ds-transition-fast);
}

.ds-navbar__link:hover {
  background-color: var(--surface-color-hover-bg, rgba(0, 0, 0, 0.06));
  text-decoration: none;
}

.ds-navbar__link[aria-current="page"],
.ds-navbar__link--active {
  background-color: var(--surface-color-active-bg, rgba(0, 0, 0, 0.08));
  font-weight: var(--ds-font-weight-semibold);
}

/* ----- Mobile : navbar pliable simple sans JS ----- */
@media (max-width: 639px) {
  .ds-navbar__list {
    gap: var(--ds-space-0);
  }

  .ds-navbar__link {
    padding: var(--ds-space-1) var(--ds-space-2);
    font-size: var(--ds-font-size-sm);
  }
}

/* ----- Variant : navbar verticale (sidebar style) ----- */
.ds-navbar--vertical {
  flex-direction: column;
  align-items: stretch;
}

.ds-navbar--vertical .ds-navbar__list {
  flex-direction: column;
  width: 100%;
}

.ds-navbar--vertical .ds-navbar__link {
  width: 100%;
}