:root {
    --white: #fff;
    --yellow: #F9B000;
    --green: #008553;
    --blue: #009FE3;
    --lavander: #7E65AA;
    --coral: var(--rouge);
    --rouge: #E6224F;
    --muted-blue-gray: #4A5565;
    --font-size-xs: 14px;
}
.panel>.panel-heading h2, .panel-title, .panel-front>.x-panel-header, .panel-front>.x-panel-header span, h2{
    font-weight: bold;
}
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    background: transparent url(images/site-pro/logo-pro-mdvm.svg) no-repeat center center;
    width: 248px;
    height: 80px;
}

#ermes_main_menu li.LEVEL1[class*=logo-] {
    gap: 8px;
}

#ermes_main_menu li.LEVEL1.logo-violet::before {
    background: url(images/site-pro/icon-violet.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}

#ermes_main_menu li.LEVEL1.logo-vert::before {
    background: url(images/site-pro/icon-vert.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}

#ermes_main_menu li.LEVEL1.logo-bleu::before {
    background: url(images/site-pro/icon-bleu.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}

#ermes_main_menu li.LEVEL1.logo-jaune::before {
    background: url(images/site-pro/icon-jaune.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}

#ermes_main_menu li.LEVEL1.logo-rouge::before {
    background: url(images/site-pro/icon-rouge.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}

.btn-account {
    background: var(--white);
    color: var(--primary-color);
    border-color: var(--white);
    font-size: var(--font-size-xs);
    padding: 10px 8px;
    font-weight: 400;
}

.btn-account:hover,
.btn-account:focus,
.open .dropdown-toggle.btn-account {}

.btn-account-label::before {
    content: '';
    background: url(images/site-pro/user-icon.svg) no-repeat center center;
    display: inline-block;
    width: 19px;
    height: 16px;
    background-size: 100%;
}

.btn-account-label {
    display: flex;
    align-items: center;
}

#main_search_form {
    width: 54%;
    float: none;
    margin: 0 auto;
}

.logoandlinks ul {
    display: flex;
    gap: 12px;
    font-size: 12px;
    margin-top: 8px;
}

footer .logoandlinks ul li {
    color: var(--muted-blue-gray);
}

footer .footer-part-2 {
    justify-content: center;
}

footer .footer-white .follow {
    font-weight: 400;
    font-size: 14px;
}

/*********STYLES*****************/
/*** styles des titres****/

.title-logo[class*=logo-] h2[id*=title-]:before {
    height: 24px;
    width: 22px;
}
.title-logo[class*=logo-] h2[id*=title-] {
    grid-template-columns: 20px auto;
}
.logo-actu h2[id*=title-]::before {
    background: url(images/site-pro/icon-actu.svg) no-repeat;
    background-size: 100%;
    background-position: center;
    
}

.logo-Calendar h2[id*=title-]::before {
    background: url(images/site-pro/Calendar.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}

.logo-cloche h2[id*=title-]::before {
    background: url(images/site-pro/bell.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}

.logo-formation h2[id*=title-]::before {
    background: url(images/site-pro/formation.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}
.logo-coffee h2[id*=title-]::before {
    background: url(images/site-pro/coffee.svg) no-repeat;
    background-size: 100%;
    background-position: center;
}
/*******Responsive*******/

@media(min-width:1370px) {}

@media (min-width: 992px) {
    .button-my-account {
        padding-right: 16px;
    }
}

@media (max-width:991.98px) {
    #main_search_form {
        width: 90%;

    }
}

@media (min-width: 768px) {
    .navbar>.container .navbar-brand {
        margin: -34px 0 0px 0;
        background: transparent url(images/site-pro/logo-pro-mdvm.svg) no-repeat center;
        width: 248px;
        background-size: contain;
    }

    .navbar-container.container.container-header {
        padding: 0 16px;
    }

    .accueil-portail-pro #search-panel .container::before {
        content: "Bienvenue sur votre portail professionnel";
        font-family: Arial;
        font-weight: 400;
        font-size: 36px;
        line-height: 130%;
        color: var(--white);
        margin-top: 48px;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .accueil-portail-pro #search-panel .panel-body::before {
        content: "Accédez à tous vos services, ressources et outils collaboratifs pour le réseau de lecture publique du Val-de-Marne";
        font-family: Arial;
        font-weight: 400;
        font-size: 16px;
        line-height: 130%;
        color: var(--white);
        margin-bottom: 24px;
        white-space: normal;
        width: 100%;
        text-align: center;
        transform: translatex(63px);
    }

    #search-panel .panel-body {
        height: auto;
        padding: 8px 0 15px 0;
        margin: 0 auto;
        width: 100%;
        max-width: max-content;
    }

    #ermes_main_menu,
    #nav-rich-menu {
        margin: -625px auto 0;
        padding-right: 0;
        width: 75%;
        padding-left: 100px;
        gap: 24px;
        justify-content: center;
    }

    #ermes_main_menu li.LEVEL1 {
        height: 48px;
        place-content: center;
        padding: 0 8px;
    }

    #ermes_main_menu li.LEVEL1>a,
    #nav-rich-menu>li a {
        font-size: 14px;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .button-my-account {
        top: 28px;
    }

    .btn-account {
        top: 0;
    }

    #ermes_main_menu li.LEVEL1.logo-violet:hover>a,
    #ermes_main_menu li.LEVEL1.logo-violet:focus>a,
    #ermes_main_menu li.LEVEL1.logo-violet:hover,
    #ermes_main_menu li.LEVEL1.logo-violet:focus {
        background: var(--lavander) !important;
        color: var(--white) !important;
    }

    #ermes_main_menu li.LEVEL1.logo-vert:hover>a,
    #ermes_main_menu li.LEVEL1.logo-vert:focus>a,
    #ermes_main_menu li.LEVEL1.logo-vert:hover,
    #ermes_main_menu li.LEVEL1.logo-vert:focus {
        background: var(--green) !important;
        color: var(--white) !important;
    }

    #ermes_main_menu li.LEVEL1.logo-bleu:hover>a,
    #ermes_main_menu li.LEVEL1.logo-bleu:focus>a,
    #ermes_main_menu li.LEVEL1.logo-bleu:hover,
    #ermes_main_menu li.LEVEL1.logo-bleu:focus {
        background: var(--blue) !important;
    }

    #ermes_main_menu li.LEVEL1.logo-jaune:hover>a,
    #ermes_main_menu li.LEVEL1.logo-jaune:focus>a,
    #ermes_main_menu li.LEVEL1.logo-jaune:hover,
    #ermes_main_menu li.LEVEL1.logo-jaune:focus {
        background: var(--yellow) !important;
    }

    #ermes_main_menu li.LEVEL1.logo-rouge:hover>a,
    #ermes_main_menu li.LEVEL1.logo-rouge:focus>a,
    #ermes_main_menu li.LEVEL1.logo-rouge:hover,
    #ermes_main_menu li.LEVEL1.logo-rouge:focus {
        background: var(--rouge) !important;
        color: var(--white) !important;
    }

    #ermes_main_menu li.LEVEL1.hover-marine:hover>a,
    #ermes_main_menu li.LEVEL1.hover-marine:focus>a,
    #ermes_main_menu li.LEVEL1.hover-marine:hover,
    #ermes_main_menu li.LEVEL1.hover-marine:focus {
        background: var(--primary-color) !important;
        color: var(--white) !important;
    }

    #ermes_main_menu .LEVEL1>a.dropdown-toggle::after {
        content: "\f078";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 10px;
        line-height: 100%;
        transition: transform 0.5s ease-in-out;
    }
}