/*
 * Fichier : ldc-navbar-style.css
 * Version corrigée
 */

.ldc-elegant-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2E3033;
    z-index: 1000;
    padding: 18px 0;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.ldc-nav-container {
    display: flex;
    justify-content: space-around;
    max-width: 380px;
    margin: 0 auto;
}

.ldc-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: #FFFFFF !important; /* Couleur de l'icône via currentColor */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ldc-nav-item:hover,
.ldc-nav-item:focus {
    background: #F97316;
    transform: translateY(-6px) scale(1.1);
    outline: none; /* Pour l'accessibilité au clavier */
}

.ldc-nav-icon {
    width: 26px;
    height: 26px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.ldc-nav-item:hover .ldc-nav-icon {
    opacity: 1;
}


/* --- CORRECTIONS ET AMÉLIORATIONS --- */

/* 1. On s'assure que le conteneur principal de la page peut s'étirer */
html, body {
    height: 100%; /* Important pour que le min-height fonctionne correctement */
}

body {
    /* 2. On garantit que le corps de la page fait TOUJOURS au moins 100%
       de la hauteur *dynamique* de la fenêtre visible. */
    min-height: 100dvh; /* dvh = dynamic viewport height */

    /* 3. On garde la marge de sécurité en bas pour que la barre ne cache pas le contenu */
    padding-bottom: 90px !important;
    
    /* 4. On s'assure que la couleur de fond du body est la même que celle de votre thème,
       pour que même si un "jour" apparaît, il soit de la bonne couleur.
       Adaptez cette couleur si besoin. */
    background-color: #2a2e34;
}

/* --- FIN DES CORRECTIONS --- */


/* Version Mobile */
@media (max-width: 768px) {
    .ldc-nav-item {
        width: 50px;
        height: 50px;
    }
    .ldc-nav-icon {
        width: 24px;
        height: 24px;
    }
    
    /* On ajuste le padding sur mobile si nécessaire */
    body {
        padding-bottom: 85px !important;
    }
}