/* ==========================================================
   HISTOIRE & BIOGRAPHIES
   TOP BAR MOBILE
   ========================================================== */

/* Cache complètement le bloc sur ordinateur */
.mobile-topbar-custom {
    display: none;
}


/* ==========================================================
   TABLETTE + MOBILE
   ========================================================== */

@media (max-width: 991px) {

    .mobile-topbar-custom {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        padding: 10px 12px;

        background: #ffffff;
        border-bottom: 1px solid #eeeeee;

        font-family: 'Open Sans', sans-serif;

        box-sizing: border-box;
    }


    /* =========================
       DATE
       ========================= */

    .m-date {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        margin-bottom: 10px;
    }

    .m-label {
        display: inline-block;

        margin-right: 6px;
        padding: 2px 8px;

        background: #ff0000;
        color: #ffffff;

        border-radius: 4px;

        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;

        white-space: nowrap;
    }

    .m-value {
        color: #000000;

        font-size: 13px;
        line-height: 1.4;

        white-space: nowrap;
    }


    /* =========================
       MENU
       ========================= */

    .m-topbar-menu {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        flex-wrap: nowrap;

        width: 100%;

        padding: 6px 0;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        box-sizing: border-box;
    }


    /* Cache la barre de scroll sur Chrome / Safari */

    .m-topbar-menu::-webkit-scrollbar {
        display: none;
    }


    /* =========================
       LIENS
       ========================= */

    .m-topbar-menu a {
        display: inline-block;
        flex: 0 0 auto;

        padding: 3px 8px;

        color: #000000 !important;

        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;

        text-decoration: none !important;

        white-space: nowrap;
    }


    /* Hover */

    .m-topbar-menu a:hover {
        color: #e78723 !important;
    }


    /* =========================
       SÉPARATEURS |
       ========================= */

    .m-topbar-menu .sep {
        display: inline-block;
        flex: 0 0 auto;

        margin: 0 2px;

        color: #cccccc;

        font-size: 13px;
        font-weight: 400;

        white-space: nowrap;
    }


    /* =========================
       EMAIL - si utilisé
       ========================= */

    .m-email {
        margin-top: 8px;

        color: #999999;

        font-size: 15px;
    }
}


/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media (max-width: 480px) {

    .mobile-topbar-custom {
        padding: 8px 10px;
    }

    .m-label,
    .m-value {
        font-size: 12px;
    }

    .m-topbar-menu a {
        padding: 3px 6px;

        font-size: 13px;
    }

    .m-topbar-menu .sep {
        margin: 0 1px;

        font-size: 12px;
    }
}