/* =========================================================
   Réseaux sociaux dans le header mobile
   ========================================================= */

/*
 * Le bloc est présent dans le DOM à toutes les largeurs (déplacé en JS dans
 * .bizberg_header_wrapper, voir assets/header-social-mobile.js), mais ne
 * doit apparaître qu'en dessous de 1024px : au-delà, les réseaux sociaux
 * restent affichés uniquement dans la barre du haut (#top-bar), comme avant.
 */
.bizberg_header_wrapper #top-social-left {
    display: none;
}

@media only screen and (max-width: 1024px) {

    .bizberg_header_wrapper #top-social-left {
        display: flex;
        align-items: center;
    }

    /* "display: flex" sur le ul annule le float des <li> (hérité du style
       pensé pour la barre du haut) : plus besoin de clearfix. */
    .bizberg_header_wrapper #top-social-left ul {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bizberg_header_wrapper #top-social-left li {
        list-style: none;
    }

    .bizberg_header_wrapper #top-social-left li a {
        width: 34px;
        height: 34px;
        line-height: 34px;
        border: none;
        /* Le Customizer ("Social Icons Color") met les icônes en blanc par
           défaut (#fff), pensé pour le fond sombre de la barre du haut. Sur
           le header mobile, en fond blanc, elles seraient invisibles : on
           impose ici une couleur lisible propre à ce contexte. */
        color: #007582;
    }

    .bizberg_header_wrapper #top-social-left li:hover a,
    .bizberg_header_wrapper #top-social-left li:focus a {
        color: #fff;
    }

}