/*===================== STYLE GLOBAL OF WEBSITE ===========================*/
:root{
    --color-blue-absde : #0A3764;
    /* --color-blue-absde : #003C95; */
    --color-blue-opac-absde : #E6ECF4;
    --color-yellow-btn-absde : #FFD400;
    
    --font-montserrat : Montserrat;
    --font-montserrat-extraLight : Montserrat-extraLight;
    --font-montserrat-light : Montserrat-light;
    --font-montserrat-regular : Montserrat-regular;
    --font-montserrat-medium : Montserrat-medium;
    --font-montserrat-bold : Montserrat-bold;
    --font-montserrat-semibold : Montserrat-semibold;
    --font-montserrat-extraBold : Montserrat-extraBold;

}

body, html {
    scroll-behavior: smooth;
    background: #f7f8fb;
}

/*===================== HEADER OF WEBSITE ===========================*/

/* ---- FIRST HEADER ------ */
.header-top-first {
    height: 7.076719vw;
    padding: 0.85978vw 4.2989vw;
    background-color: var(--color-blue-absde);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-bars {
    display: none;
}

.header-top-first .content-header-left {
    display: flex;
    align-items: center;
    gap: 0.4861vw;
    /* width: 20vw; */
    width: 6.101852vw;
    height: 6.400132vw;
    font-size: var(--descrip-size);
}
.header-top-first .content-header-left .logo-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-top-first .content-header-right {
    display: flex;
    align-items: center;
    gap: 1.65vw;
    color: white;
}
.header-top-first .content-header-right .input-select{
    cursor: pointer;
    padding: 0.5291vw;
    display: flex;
    align-items: center;
    gap: 0.5291vw;
}
.header-top-first .content-header-right .input-select span{
    font-size: var(--p-size-alt);
    font-family: var(--font-montserrat-semibold);
    transition: all .5s ease;
}
.header-top-first .content-header-right .input-select select{
    font-size: var(--p-size-alt);
    font-family: var(--font-montserrat-semibold);
    outline: none;
    border: none;
    background: transparent;
    color: white;
    transition: all .5s ease;
    padding-right: 8px;
}
.header-top-first .content-header-right .input-select select option{
    background: white;
    color: var(--color-blue-absde);
    font-size: var(--p-size-alt);
    font-family: var(--font-montserrat-semibold);
}
.header-top-first .content-header-right .input-select:hover{
    background: white;
    transition: all .5s ease;
}
.header-top-first .content-header-right .input-select:hover span,
.header-top-first .content-header-right .input-select:hover select{
    color: var(--color-blue-absde);
    transition: all .5s ease;
}
.header-top-first .content-header-right .social-network-list {
    display: flex;
    align-items: center;
    gap: 1.058vw;
}
.header-top-first .content-header-right .social-network-list .icon-social{
    width: 1.587301vw;
    height: 1.587301vw;
    cursor: pointer;
}
 
/*===================== FOOTER OF WEBSITE ===========================*/

/* CUSTOMISE TOP DESIGN BENIN */
.top-head-footer {
    overflow: hidden !important;
    background: #F2F2F2 !important;
}
.top-head-footer .section-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.top-head-footer .section-row .bg-green{
    background-color: #428852 !important;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.top-head-footer .section-row .bg-yellow{
    background-color: #FACE33 !important;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.top-head-footer .section-row .bg-red{
    background-color: #E93F33 !important;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.top-head-footer .section-row .space {
    height: 0.59523vw;
    display: block;
}

.footer {
    padding: 2.2486vw 3.968253vw;
    background: #242424;
    color: white;
}
.footer .content-section {
    display: flex;
    flex-direction: column;
}


.footer .content-section .bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer .content-section .bottom-section span:nth-child(1){
    font-size: var(--p-size-alt);
    font-family: var(--font-montserrat-bold);
}
.footer .content-section .bottom-section span:nth-child(2){
    font-size: var(--p-size-alt);
    font-family: var(--font-montserrat-regular);
}

/* =========================  CUSTOMISE MODAL -----------  */

body.inactif {
    overflow: hidden;
    width: 100%;
}
.modal_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #003c95cf;
    z-index: 999999;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center;
    
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease-in-out;
}
.modal_container.show_modal {
    visibility: visible;
    opacity: 1;
    transition: all .5s ease-in-out;
}
.modal_container.show_modal .modal_content{
    transform: translateY(0);
    transition: all .5s ease-out;
}
.modal_content {
    width: 51.719vw;
    height: 20.238vw;
    border-radius: 10px;
    background: var(--color-blue-absde);
    display: flex;
    flex-direction: column;
    gap: 4.166vw;
    box-shadow: 0px 0px 14px #ffffff42;
    padding: 3.373vw 3.7037vw 0 3.7037vw ;
    transform: translateY(30%);
    transition: all .5s ease-out;
}
.modal_content .details_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal_content .details_content.top_modal span.title_modal {
    font-size: var(--h2-size);
    font-family: var(--font-montserrat-semibold);
    color: white !important;
}
.modal_content .details_content.top_modal .modal_close i{
    color: white;
    font-size: 3vw;
    cursor: pointer;
}
.modal_content .details_content.bottom_modal {
    background: white;
    border-radius: 10px;
}
.modal_content .details_content.bottom_modal input {
    font-size: var(--h5-size);
    font-family: var(--font-montserrat-semibold);
    color: #151515;
    margin-left: 2.050vw;
    width: 100%;
    border: none;
    outline: none;
}
.modal_content .details_content.bottom_modal input::placeholder {
    text-transform: uppercase;
}
.modal_content .details_content.bottom_modal span {
    background: var(--color-yellow-btn-absde);
    padding: 1.5211vw 2.050vw;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .5s ease-in-out;
}
.modal_content .details_content.bottom_modal span:hover {
    background: #ffd4006e;
    border-top: 1px solid var(--color-blue-absde);
    border-bottom: 1px solid var(--color-blue-absde);
    border-right: 1px solid var(--color-blue-absde);
    transition: all .5s ease-in-out;
}

/* CUSTOM MODAL --- FORM NEWSLETTER */

.modal_content.modal_newsletter {
    height: auto;
    padding: 3.373vw 3.7037vw 3.373vw 3.7037vw;
}
.modal_content .details_content.details_newsletter {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    background: transparent;
}
.modal_content .details_content.details_newsletter input {
    padding: 1vw 1vw;
    margin-left: 0;
    color: #151515;
    border-radius: 10px;
    font-size: var(--h6-size);
}
.modal_content .details_content.details_newsletter input::placeholder {
    text-transform: lowercase;
}
.modal_content .details_content.details_newsletter button {
    background: var(--color-blue-opac-absde);
    color: #003C95;
    text-transform: uppercase;
    font-family: var(--font-montserrat-bold);
    padding: 1vw 2vw;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.modal_content .details_content.details_newsletter button:hover {
    transition: all .3s ease-in-out;
    background: var(--color-yellow-btn-absde);
}

/*===================== RESPONSIVE OF HEADER__WEBSITE ===========================*/

@media (max-width:768px) {
    
    .header-top-first {
        height: auto;
        padding: 3.587302vw 4.984127vw;
        background-color: var(--color-blue-absde);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-top-first .content-header-left {
        display: flex;
        align-items: center;
        gap: 2.4861vw;
        font-size: var(--descrip-size);
    }
    .header-top-first .content-header-right {
        display: none;
    }

    .toggle-bars {
        display: none;
        color: white;
        font-size: 7vw;
    }
    .toggle-bars.active {
        display: block;
    }
    .header-top-first .content-header-left .logo-img {
        width: auto;
        height: 16.400132vw;
    }
    .header-top-first .content-header-left p {
        font-size: 2.9637vw;
        color: white;
        font-family: var(--font-montserrat-semibold);
    }
    .header-top-first .content-header-left img.logo-drap {
        width: -webkit-fill-available;
        height: 0.9vw;
    }
    
    .header-top-secund.web,
    .header-top-secund.mobile {
        display: none;
    }
    .header-top-secund.mobile.active {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: flex-start;
        width: 100%;
        overflow: scroll;
        height: 100vh;
        padding: 0;
        box-sizing: border-box;
        background: var(--color-blue-absde);
        color: white;
        animation: openMenu .5s linear;
        transition: all .5s ease-in-out;
        padding-bottom: 10em;
    }
    @keyframes openMenu {
        0% {
            opacity: 0;
            transform: translateY(-50%);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
   
    .header-top-secund.mobile span {
        font-size: 4.2923vw;
        margin-left: 5vw;
        flex: 0;
        padding: 3vw 4vw;
        text-transform: uppercase;
        color: #ffffff5c;
        font-family: var(--font-montserrat-semibold);
    }
    .header-top-secund.mobile .input-select {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-top-secund.mobile .input-select span {
        text-wrap: nowrap;
    }
    .header-top-secund.mobile .section-delimit {
        border-top: 0.3px solid #ffffff24;
        width: -webkit-fill-available;
    }
    .header-top-secund.mobile a {
        background: var(--color-blue-absde);
        color: white;
        font-size: 4.2923vw;
        text-wrap: wrap;
        margin-left: 5vw;
        flex: 0;
        text-transform: uppercase;
        padding: 4vw 4vw;
        justify-content: flex-start;
        text-align: start;
        line-height: 6vw;
        transition: all 300ms ease-out;
    }
    .header-top-secund.mobile a.take-rdv {
        background: var(--color-yellow-btn-absde);
        color: var(--color-blue-absde);
    }
    .header-top-secund.mobile a#execute_search {
        display: none;
    }
    .header-top-secund.mobile a:hover {
        background: white;
        color: var(--color-blue-absde);
        transition: all 300ms ease-out;
    }
    .header-top-secund.mobile a.accueil-icon {
        display: none;
    }
    .header-top-secund.mobile a.active {
        color: var(--color-blue-absde);
        background: white;
    }
    .header-top-secund.mobile .content-header-right {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        margin-top: 12px;
    }
    .header-top-secund.mobile .content-header-right .social-network-list {
        display: flex;
    }
    .header-top-secund.mobile .content-header-right .social-network-list a {
        margin: 0;
        font-size: 7vw;
        padding: 3vw;
    }

    /* SECTION FOOTER */

    .top-head-footer .section-row .space {
        height: 1.59523vw;
    }
    .footer {
        padding: 8vw;
    }

    .footer .content-section .head-section {
        display: flex;
        flex-direction: column;
        gap: 9.57142vw;
        margin-bottom: 9.2989vw;
    }
    .footer .content-section .head-section .content-header-left {
        border-right: none;
        gap: 4.4861vw;
        align-items: center;
        padding-right: 0;
        width: 100%;
    }
    .footer .content-section .head-section .content-header-left .logo-img {
        width: 100%;
        height: 100%;
    }
    .footer .content-section .head-section .content-header-left p {
        font-size: 2.8637vw;
    }
    .footer .content-section .head-section .content-header-left img.logo-drap {
        width: 100%;
        height: 1.7vw;
    }
    .footer .content-section .head-section .list-items {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8vw;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
    }
    .footer .content-section .head-section .list-items span {
        text-transform: uppercase;
        font-family: var(--font-montserrat-medium);
        font-size: 3.92592vw;
        white-space: nowrap;
    }
    .footer .content-section .between-section {
        flex-direction: column;
        gap: 10vw;
        align-items: flex-start;
    }
    .footer .content-section .between-section .left ,
    .footer .content-section .between-section .right {
        flex-direction: column;
        width: 100%;
    }
    .footer .content-section .between-section .left .content {
        gap: 2.992vw;
    }
    .footer .content-section .between-section .right a {
        width: 100%;
        text-align: center;
        padding: 5vw;
    }
    .footer .content-section .bottom-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 3vw;
        padding-top: 5vw;
    }

    /* MODAL */
    
    .modal_content {
        width: auto;
        height: auto;
        padding: 7vw 6vw;
    }
    .modal_content .details_content.top_modal .modal_close i {
        color: white;
        font-size: 6vw;
        cursor: pointer;
    }
    .modal_content .details_content.bottom_modal span {
        background: var(--color-yellow-btn-absde);
        padding: 1.2vw 3.05vw;
    }
    .modal_content .details_content.bottom_modal input {
        font-size: var(--h6-size);
        margin-left: 0vw;
        margin: 0 6vw;
    }
    
    /* MODAL DE LA NEWSLETTER */
    .modal_content.modal_newsletter {
        padding: 6vw 5vw;
    }
    .modal_content .details_content.top_modal span.title_modal {
        margin-right: 6vw;
    }
    .modal_content .details_content.details_newsletter {
        gap: 4.5vw;
    }
    .modal_content .details_content.details_newsletter.bottom_modal input {
        padding: 3vw;
    }
    .modal_content .details_content.details_newsletter button {
        padding: 2vw 4vw;
    }

}