/* Menu application mobile */
.app-menu {
  display: flex;
  justify-content: center;
  gap: 15px;
  background-color: #1e3c72;
  padding: 10px 0;
  flex-wrap: wrap;
}

.app-menu a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  transition: background 0.3s, transform 0.2s;
}

.app-menu a:hover {
  background-color: #1e90ff;
  transform: translateY(-2px);
}

.app-menu .icon {
  font-size: 1.2rem;
  color: #ffb703; /* couleur des icônes */
}

/* Dropdown */
.menu-item.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #1e3c72;
  flex-direction: column;
  min-width: 180px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10;
}

.dropdown-content a {
  padding: 8px 12px;
  white-space: nowrap;
  background-color: #1e3c72;
}

.dropdown-content a:hover {
  background-color: #1e90ff;
}

/* Show dropdown on click */
.menu-item.dropdown.open .dropdown-content {
  display: flex;
  flex-direction: column;
}

/* Responsive: menu vertical sur petit écran */
@media (max-width: 500px) {
  .app-menu {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .dropdown-content {
    position: relative;
    top: 0;
    left: 0;
    box-shadow: none;
    width: 100%;
  }

  .menu-item.dropdown.open .dropdown-content {
    display: flex;
  }
}