/* ══════════════════════════════════════════════════════════════
   MOBILE-BOTTOM-NAV.CSS — Barre de navigation fixée en bas (mobile)
   Balisage : includes/mobile-bottom-nav.php  (classes préfixées .mbn)

   Boutons : ACCUEIL, PIÈCES, BATTERIES, RECHERCHE, SUIVI CMD + icône utilisateur tout à droite (blanche = déconnecté, verte = connecté).
   Boutons compacts (police et marges fluides selon la largeur de l'écran) pour que les 5 tiennent sur une ligne.
   Reproduit la barre de /mes_commandes en affichage mobile (≤ 768 px) :
   fond #1A1A2E, coins hauts arrondis (18 px), boutons « pilule » en majuscules,
   bouton actif en dégradé or. Masquée sur ordinateur.
   À charger APRÈS les autres feuilles du <head> (ou en dernier du bundle CSS).
   ══════════════════════════════════════════════════════════════ */
.mbn, .mbn-spacer { display: none; }

@media (max-width: 768px) {
    :root { --mbn-h: calc(50px + env(safe-area-inset-bottom, 0px)); --mbn-u: 36px; }   /* 10 + 30 + 10 + zone sûre iPhone ; --mbn-u = largeur de l'icône user */

    .mbn {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 999;                       /* sous le header/menu (1000), le panier (2000), les notifications et le zoom photo */
        margin: 0;
        padding: 10px 8px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: #1A1A2E;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
        -webkit-tap-highlight-color: transparent;
    }
    /* Les 5 boutons se partagent toute la largeur disponible (équilibrés), icône user à droite */
    .mbn-menu { display: flex; align-items: center; gap: 4px; width: 100%; }
    .mbn-links { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
    nav.mbn a.mbn-link { flex: 1 1 auto; }

    /* !important : les feuilles du site stylent les <a> en mobile (min-height, couleurs, soulignement...) */
    nav.mbn a.mbn-link {
        display: inline-flex !important; align-items: center; justify-content: center;
        box-sizing: border-box;
        min-height: 30px !important; margin: 0 !important; padding: 6px clamp(3px, 1.2vw, 7px) !important;
        border: 0 !important; border-radius: 8px !important;
        background: rgba(255, 255, 255, .12);
        color: #ffffff !important;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: clamp(7.8px, 2.4vw, 10px) !important; font-weight: 700 !important; line-height: 16px !important;
        letter-spacing: .1px; text-transform: uppercase; text-decoration: none !important; white-space: nowrap;
        box-shadow: none;
        outline: none;
        user-select: none; -webkit-user-select: none;
        transition: background .2s;
    }
    nav.mbn a.mbn-link:active { background: rgba(255, 255, 255, .22); }
    nav.mbn a.mbn-link.active {
        background: linear-gradient(135deg, #F7B801 0%, #e5a800 100%);
        color: #003a6b !important;
        box-shadow: 0 2px 8px rgba(247, 184, 1, .45);
    }
    nav.mbn a.mbn-link:focus-visible { outline: 2px solid #F7B801; outline-offset: 2px; }

    /* Icône utilisateur, collée tout à droite (même forme ovale que l'icône du milieu de la navbar du haut) :
       blanche = visiteur non connecté (-> /login) ; verte lumineuse = connecté (-> /mes_commandes) */
    nav.mbn a.mbn-user {
        display: inline-flex !important; align-items: center; justify-content: center;
        box-sizing: border-box; flex: 0 0 auto;
        min-width: var(--mbn-u) !important; min-height: 30px !important; height: 30px; width: var(--mbn-u);
        margin: 0 0 0 auto !important; padding: 0 !important;
        border-radius: 16px !important;
        text-decoration: none !important; outline: none;
        transition: background .2s, box-shadow .2s;
    }
    nav.mbn a.mbn-user svg { display: block; flex: none; stroke: currentColor; width: 16px; height: 16px; }
    nav.mbn a.mbn-user--guest {
        background: rgba(255, 255, 255, .15);
        border: 2px solid rgba(255, 255, 255, .5) !important;
        color: #ffffff !important;
    }
    nav.mbn a.mbn-user--on {
        background: rgba(62, 207, 110, .22);
        border: 2px solid #3ecf6e !important;
        color: #3ecf6e !important;
        box-shadow: 0 0 10px rgba(62, 207, 110, .75), 0 0 2px rgba(62, 207, 110, .9) inset;
    }
    nav.mbn a.mbn-user:active { background: rgba(255, 255, 255, .28); }
    nav.mbn a.mbn-user--on:active { background: rgba(62, 207, 110, .4); }
    nav.mbn a.mbn-user:focus-visible { outline: 2px solid #F7B801; outline-offset: 2px; }

    /* Très petits écrans (≤ 340 px) : encore un peu plus compact pour que les 5 boutons + l'icône tiennent sur une ligne */
    @media (max-width: 340px) {
        :root { --mbn-u: 30px; }
        .mbn { padding-left: 5px; padding-right: 5px; }
        .mbn-menu { gap: 3px; }
        .mbn-links { gap: 2px; }
        nav.mbn a.mbn-link { padding: 6px 2px !important; letter-spacing: 0; }
        nav.mbn a.mbn-user { height: 28px; min-height: 28px !important; }
        nav.mbn a.mbn-user svg { width: 13px; height: 13px; }
    }
    @media (hover: hover) {
        nav.mbn a.mbn-link:hover { background: rgba(255, 255, 255, .22); }
        nav.mbn a.mbn-link.active:hover { background: linear-gradient(135deg, #F7B801 0%, #e5a800 100%); }
    }

    /* Espace réservé en bas de page : le pied de page (même fond #1A1A2E) reste entièrement lisible */
    .mbn-spacer { display: block; height: var(--mbn-h); background: #1A1A2E; }

    /* Menu hamburger ouvert : la barre s'efface (comme les boutons flottants du site) */
    body.menu-open .mbn { display: none; }

    /* Boutons flottants déjà présents sur certaines pages : remontés d'une hauteur de barre
       (leur distance au bord d'origine est conservée : 20 px / 76 px). Classe posée par includes/mobile-bottom-nav.php. */
    html.mbn-on .wa-float        { bottom: calc(var(--mbn-h) + 20px); }
    html.mbn-on .float-call-btn  { bottom: calc(var(--mbn-h) + 76px); }
    html.mbn-on .scroll-to-top   { bottom: calc(var(--mbn-h) + 20px) !important; }
}