body,html{height:100%;margin:0;font-family:Oxanium,sans-serif}body{background:linear-gradient(135deg,#fcfbdf,#d8f0e8);color:#0c3d2e;background-image:url('../images/default.jpg')}.corps{background-image:url('../images/wcgegr2p5np91.webp');border-radius:10px;width:94%;margin:0 2%;padding:1%}.topnav-wrapper{position:relative;overflow:hidden}



/* ========================================================================= */
/* MENU DESKTOP (Tes styles originaux adaptés à la nouvelle grille) */
/* ========================================================================= */
.desktop-topnav {
    display: flex;
    justify-content: center; /* On centre au lieu du scroll */
    flex-wrap: wrap;
    padding: 10px 8px;
    gap: 10px;
    background: linear-gradient(135deg, #0a2a24, #123f36);
    box-shadow: inset 0 0 8px #004d40aa;
}

.desktop-topnav a {
    display: inline-block;
    color: #c3f0e9;
    text-align: center;
    padding: 14px 16px;
    font-size: 17px;
    text-decoration: none;
    border-radius: 6px;
    transition: color .3s, text-shadow .3s, background .3s;
}

.desktop-topnav a.active, 
.desktop-topnav a:hover {
    color: #c3f0e9;
    text-shadow: 0 0 6px #00b8c9aa;
    background: linear-gradient(145deg, #0c3d2e, #00b8c9);
    border-radius: 15px;
}

/* On cache le menu mobile sur PC par défaut */
.mobile-bottom-nav {
    display: none;
}

/* ========================================================================= */
/* MENU MOBILE (Mêmes couleurs, mais format App en bas) */
/* ========================================================================= */
@media (max-width: 768px) {
    /* On cache le menu desktop */
    .desktop-topnav { display: none; }
    
    /* Marge pour ne pas que le footer soit caché par la barre */
    body { padding-bottom: 80px; }

    /* La barre du bas avec TON dégradé */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: linear-gradient(135deg, #0a2a24, #123f36);
        box-shadow: inset 0 0 8px #004d40aa, 0 -4px 15px rgba(0,0,0,0.5); /* L'ombre portée vers le haut */
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        padding: 8px 4px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    /* Les boutons inactifs */
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: rgba(195, 240, 233, 0.6); /* Ton bleu/vert, mais un peu transparent */
        font-size: 11px;
        text-transform: uppercase;
        font-weight: bold;
        flex: 1;
        text-decoration: none;
        padding: 8px 0;
        border-radius: 15px; /* Ton arrondi */
        transition: all .3s;
    }

    /* L'effet Actif / Hover (Ton bouton parfait !) */
    .mobile-nav-item.active, 
    .mobile-nav-item:hover {
        color: #c3f0e9;
        text-shadow: 0 0 6px #00b8c9aa;
        background: linear-gradient(145deg, #0c3d2e, #00b8c9);
    }

    .mobile-nav-item .icon {
        font-size: 20px;
    }
}