/* Cacher sur desktop */
.hf-menu {
    display: none;
}

/* --------- MOBILE --------- */
@media (max-width: 768px) {

    .hf-menu {
        display: flex;
        justify-content: space-around;
        align-items: center;

        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;

        padding: 10px 0;
        background: #ffffff;
        border-top: 1px solid #dddddd;
        box-shadow: 0 -3px 20px rgba(0,0,0,0.12);

        z-index: 9999;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .hf-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 20%;
        text-decoration: none;
        color: #333;
        transition: 0.2s ease;
    }

    .hf-icon {
        font-size: 22px;
        line-height: 1;
        margin-bottom: 2px;
        text-align: center;
    }

    .hf-label {
        font-size: 11px;
        font-weight: 600;
        text-align: center;
    }

    .hf-item:hover {
        color: #0059ff;
        transform: translateY(-2px);
    }

    .hf-item:active {
        transform: scale(0.94);
    }
}

/* Très petits écrans */
@media (max-width: 380px) {
    .hf-icon { font-size: 20px; }
    .hf-label { font-size: 10px; }
}