/* =============================================================================
   MOBILE BOTTOM NAVIGATION - mobile-nav.css
   Barre de navigation fixée en bas pour les utilisateurs mobiles
   ============================================================================= */

/* --- Masqué par défaut (desktop) --- */
.bottom-nav {
    display: none;
}

/* --- Visible uniquement sur mobile (≤700px) --- */
@media screen and (max-width: 700px) {
    /* Espace en bas du body pour ne pas cacher de contenu */
    body {
        padding-bottom: 70px;
    }

    nav::before {
        display: none;
    }

    nav .container {
        justify-content: center;
    }

    nav .container .right {
        display: none;
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        background: var(--grey-1);
        border-top: 1px solid #9f5f733b;
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 0 5px;
        backdrop-filter: saturate(150%) blur(15px);
        -webkit-backdrop-filter: saturate(150%) blur(15px);
    }

    /* Chaque item de la nav */
    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--grey-17);
        font-size: 0.68em;
        font-weight: 500;
        gap: 3px;
        padding: 5px 10px;
        border-radius: 10px;
        transition: all 150ms;
        min-width: 55px;
    }

    .bottom-nav a:hover,
    .bottom-nav a.active {
        color: var(--purple-1);
    }

    /* Icônes SVG */
    .bottom-nav a svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .bottom-nav a.active svg {
        stroke: var(--purple-1);
    }

    /* Masquer le footer sur très petit écran pour la nav */
    footer {
        margin-bottom: 0;
    }
}