/* ==========================================================================
   Cap Bréhat Pro - Mobile Bottom Navigation Bar (Synchronisé avec l'accueil)
   ========================================================================== */

.mobile-bottom-nav { 
    display: none; 
}

@media (max-width: 768px) {
    /* Sur mobile, on épure le haut : pas de menu encombrant ni de boutons tassés */
    #auth-header-actions { 
        display: none !important; 
    }
    
    header .max-w-7xl { 
        justify-content: center !important; 
    }

    /* Padding de sécurité pour ne pas recouvrir le pied de page */
    body { 
        padding-bottom: 75px !important; 
    }

    /* Barre de navigation fixée en bas avec effet de flou */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
        z-index: 2000 !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 9px 0 !important;
        padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    /* Boutons individuels */
    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-decoration: none !important;
        color: #64748b !important;
        font-size: 0.68rem !important;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-weight: 500 !important;
        gap: 3px !important;
        transition: color 0.15s ease, transform 0.15s ease !important;
    }

    .mobile-nav-item:active {
        transform: scale(0.95);
    }

    /* Icônes SVG */
    .mobile-nav-item svg {
        width: 21px !important;
        height: 21px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    /* État actif */
    .mobile-nav-item.active {
        color: #0A2540 !important;
        font-weight: 700 !important;
    }

    .mobile-nav-item.active svg {
        stroke-width: 2.3 !important;
    }

    /* Mise en avant spécifique (Dashboard pro ou action clé) */
    .mobile-nav-item.highlight-btn {
        color: #0d9488 !important;
        font-weight: 700 !important;
    }
}