/* ===== 14-NAVBAR-DROPDOWN.CSS ===== */
/* 🎨 Styles pour le menu dropdown "Plus d'outils" uniquement */
/* ⚠️ Les styles du bouton trigger (.dropdown-trigger) sont dans navbar-nouvelle.css */

/* ========================================
   CONTENEUR DROPDOWN
   ======================================== */

.navbar-dropdown {
    position: relative;
    display: inline-block;
}

/* ========================================
   MENU DROPDOWN
   Style identique au dropdown instrument
   ======================================== */

.dropdown-menu {
    position: fixed;
    /* ✅ Fond vert olive avec couche blanche transparente (comme dropdown instrument) */
    background: var(--couleur-primaire);
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--couleur-primaire);
    border: var(--bordure-normale) solid rgba(255, 255, 255, 0.3);
    border-radius: var(--rayon-md);
    box-shadow: var(--ombre-xl);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-normale), transform var(--transition-normale);
    z-index: calc(var(--z-navbar) + 1);
    overflow: hidden;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ========================================
   ITEMS DROPDOWN
   Style identique aux items du dropdown instrument
   ======================================== */

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    padding: var(--padding-sm) var(--padding-md);
    color: var(--texte-blanc);
    font-size: var(--texte-base);
    font-weight: var(--poids-medium);
    text-decoration: none;
    transition: background var(--transition-normale);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--couleur-primaire-foncee);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* État actif - highlight plus fort */
.dropdown-item.active {
    background: rgba(255, 255, 255, 0.4);
    font-weight: var(--poids-semi-bold);
}

/* ========================================
   SÉPARATEUR (pour futures options)
   ======================================== */

.dropdown-divider {
    height: 1px;
    background: var(--couleur-primaire-foncee);
    margin: 0;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 47.9375rem) {
    /* Masquer le dropdown en mobile */
    .navbar-dropdown {
        display: none;
    }
}

/* ========================================
   RESPONSIVE - TABLETTE
   ======================================== */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .navbar-dropdown {
        display: inline-block;
    }
}

/* ========================================
   RESPONSIVE - DESKTOP
   ======================================== */

@media (min-width: 64rem) {
    .navbar-dropdown {
        display: inline-block;
    }
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

.dropdown-item:focus-visible {
    outline: 3px solid var(--texte-blanc);
    outline-offset: -2px;
}

/* ========================================
   PRÉFÉRENCE MOUVEMENT RÉDUIT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu,
    .dropdown-item {
        transition: none;
    }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    .navbar-dropdown {
        display: none !important;
    }
}