/* Styles pour la barre de navigation dans le header (Mobile) */
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-nav-button:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
}

.header-nav-button.active {
  color: var(--color-primary);
  background-color: rgba(0, 122, 255, 0.15);
}

.header-nav-button svg {
  width: 24px;
  height: 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-nav-toggle {
  position: relative;
  z-index: 1202;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus,
.mobile-nav-toggle[aria-expanded="true"] {
  color: rgba(56, 189, 248, 1);
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(56, 189, 248, 0.5);
  transform: scale(1.05);
}

.mobile-nav-toggle svg {
  width: 24px;
  height: 24px;
}

.app-header .mobile-nav {
  position: fixed;
  top: calc(var(--header-height, 56px) + 8px);
  right: 12px;
  left: auto;
  width: min(320px, calc(100% - 24px));
  display: block;
  padding: 16px;
  border-radius: 20px;
  background: rgba(11, 15, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.75);
  max-height: calc(100vh - var(--header-height, 56px) - 24px);
  overflow-y: auto;
  z-index: 1201;
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(-12px) scale(0.95);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.3s;
}

.app-header .mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0s;
}

.app-header .mobile-nav[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0s;
}

.app-header .mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.app-header .mobile-nav-list .nav-item {
  width: auto;
}

.app-header .mobile-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10.5px;
  width: 100%;
  height: auto;
  padding: 10.5px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--color-text-primary);
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.app-header .mobile-nav .nav-link:hover {
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.app-header .mobile-nav .nav-link.active {
  color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}

.app-header .mobile-nav .nav-link .nav-text {
  display: inline;
  font-size: 0.64rem;
}

.app-header .mobile-nav .nav-link .nav-icon {
  display: flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* ========================= */
/*   NAVIGATION EN SIDEBAR   */
/* ========================= */

/* Réglage “patron = Documents”
   -> 10ch ~ longueur "Documents", ajustable si besoin. */
:root{
  --nav-text-doc-ch: 10ch;
  --nav-icon-w: 22px;     /* largeur icône */
  --nav-gap: 10px;        /* espace icône/texte */
  --nav-pad-x: 24px;      /* padding gauche+droite cumulé */
}

/* 2 espacements nets sous le branding */
.app-sidebar .brand-block { margin-bottom: 24px !important; }

/* Colonne nav bornée */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--sidebar-w);
  width: var(--sidebar-w);
  overflow: visible;
  padding-top: 4px;
  align-items: flex-start; /* important: évite l’étirement plein-largeur */
}

.sidebar-nav .nav-item { list-style: none; width: auto; }

/* Lien = largeur fixe calée sur "Documents",
   clampé pour ne jamais dépasser la sidebar. */
.sidebar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--nav-gap);
  inline-size: clamp(
    140px,
    calc(var(--nav-text-doc-ch) + var(--nav-icon-w) + var(--nav-gap) + var(--nav-pad-x)),
    calc(var(--sidebar-w) - 16px)
  );
  padding: 8.8px 10.5px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}

.sidebar-nav .nav-link .nav-icon { flex: 0 0 auto; }
.sidebar-nav .nav-link .nav-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: ellipsis;
}

.sidebar-nav .nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
}

.sidebar-nav .nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-background-tertiary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(37,99,235,.25);
}

/* Mobile backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, 0.75);
  backdrop-filter: blur(6px);
  z-index: 1199;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-backdrop:not([hidden]) {
  display: block;
  opacity: 1;
}

body.mobile-nav-open,
body.mobile-menu-open {
  overflow: hidden;
}