html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Important pour éviter scroll global */
  font-family: 'Segoe UI', sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-sidebar {
  background-color: #343a40;
  color: white;
  width: 250px;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  z-index: 1000;
  overflow-y: auto;
}

.brand-link {
  padding: 0.8rem 1rem;
  font-weight: bold;
}

.nav-sidebar .nav-link {
  color: white;
  font-size: 0.875rem;
}

.nav-sidebar .nav-link:hover {
  background-color: #495057;
}

.nav-sidebar .nav-link.active {
  background-color: #495057;
}

.content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f4f6f9;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

footer {
  background: #dee2e6;
  font-size: 0.875rem;
  padding: 10px;
  flex-shrink: 0;
}

.nav-icon {
  width: 20px;
}

.nav-link[aria-expanded="true"] .fa-angle-down {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.nav-link[aria-expanded="false"] .fa-angle-down {
  transition: transform 0.3s ease;
}

.navbar .nav-link i {
  font-size: 1.4rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.navbar .nav-link:hover i {
  color: #007bff; /* bleu Bootstrap */
  transform: scale(1.15);
}

  .navbar .badge {
    font-size: 0.65rem; /* Réduire la taille du nombre */
    padding: 2px 5px;
  }

.badge {
  font-size: 0.65rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.sidebar-collapse .main-sidebar {
  width: 80px !important;
  overflow-x: hidden;
}

.sidebar-collapse .main-sidebar .brand-link span {
  display: none;
}

.sidebar-collapse .nav-sidebar .nav-link div {
  display: none; /* cache les textes de menu */
}

.sidebar-collapse .nav-sidebar .collapse {
  display: none !important; /* cache les sous-menus */
}

.sidebar-collapse .nav-sidebar i.nav-icon {
  margin-right: 0;
  text-align: center;
  width: 100%;
}

.dropdown-menu li a:hover {
  background-color: #f0f2f5;
  font-weight: 500;
  color: #212529;
}