/* =====================================================
   MENU - ACCUEIL
   Desktop : maison seule
   Mobile  : maison + Accueil
   ===================================================== */

.menu-home > a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

/* Maison */
.menu-home > a::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3L12 3z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3L12 3z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* =====================================================
   DESKTOP : masque "Accueil" et centre la maison
   ===================================================== */

@media (min-width: 769px) {

    .menu-home > a {
        font-size: 0 !important;
        justify-content: center !important;
    }

}


/* =====================================================
   MOBILE : affiche "Accueil" et aligne à gauche
   ===================================================== */

@media (max-width: 768px) {

    .menu-home > a {
        font-size: inherit !important;
        justify-content: flex-start !important;
    }

}


/* =====================================================
   MENU - CONTACT
   Enveloppe pleine + libellé
   ===================================================== */

.menu-contact > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
}

/* Enveloppe pleine */
.menu-contact > a::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

@media (max-width: 768px) {
    .breakdance-menu-topbar {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}