/**
 * Navigation en pied de page - Tous les appareils
 * Navigation principale de l'application
 */

/* Navigation en pied de page - CACHÉE */
.mobile-bottom-nav {
    display: none !important;
}

/* Retire le padding du body */
body {
    padding-bottom: 0;
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    color: var(--gray-500);
    text-decoration: none;
    transition: all var(--transition-fast);
    min-width: 60px;
    border-radius: var(--radius-lg);
}

.mobile-bottom-nav .nav-item:hover,
.mobile-bottom-nav .nav-item:active {
    background: var(--gray-100);
}

.mobile-bottom-nav .nav-item.active {
    color: var(--primary-600);
}

.mobile-bottom-nav .nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: var(--space-1);
    stroke-width: 2;
}

.mobile-bottom-nav .nav-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-align: center;
}

/* Animation au tap */
.mobile-bottom-nav .nav-item:active {
    transform: scale(0.95);
}

/* Indicateur actif */
.mobile-bottom-nav .nav-item.active .nav-icon {
    stroke-width: 2.5;
}

.mobile-bottom-nav .nav-item.active .nav-label {
    font-weight: var(--font-semibold);
}

/* Responsive - Ajustements pour desktop */
@media (min-width: 1024px) {
    .mobile-bottom-nav {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
}