/* -------------------------- ALL -------------------------- */

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 8%;
    background-color: #fff;
    position: relative;
}

.header .logo{
    max-width: 230px;
}

header .menuContainer{
    display: flex;
    align-items: center;
}

header .menuContainer .telephone{
    margin-left: 52px;
    font-size: 20px;
    line-height: 20px;
    color: #000;
    font-weight: 500;
    background-color: var(--gris1);
    padding: 10px 28px;
    text-align: center;
}

header .menuContainer .telephone:hover{
    color: #fff;
    background-color: #000;
}

header .menuContainer .contact{
    margin-left: 32px;
    font-size: 20px;
    line-height: 20px;
    color: #fff;
    font-weight: 500;
    background-color: var(--vert);
    padding: 10px 28px;
    text-align: center;
}

header .menuContainer .contact:hover{
    background-color: #000;
}

header .menuContainer .menu-header-container,
header .menuContainer .menu-header-container *{
    height: fit-content;
}

header .menuContainer .menu-header-container .menu{
    display: flex;
    gap: 28px;
}

header .menuContainer .menu-header-container .menu > li{
    padding-bottom: 40px;
    position: relative;
}

header .menuContainer .menu-header-container .menu > li > a{
    font-size: 20px;
    line-height: 20px;
    color: #000;
    font-weight: 500;
    display: flex !important;
    align-items: center;
    text-align: center;
}

header .menuContainer .menu-header-container .menu > li.menu-item-has-children > a{
    gap: 10px;
}

header .menuContainer .menu-header-container .menu > li.menu-item-has-children > a::after{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.844' height='7.337' viewBox='0 0 11.844 7.337'%3E%3Cpath id='Tracé_38101' data-name='Tracé 38101' d='M16443.906,334.843l5.215,5.215,5.215-5.215' transform='translate(-16443.199 -334.136)' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 12px;
    width: 12px;
    display: block;
    position: relative;
}

header .menuContainer .menu-header-container .menu > li.current-menu-item.menu-item-has-children > a::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.844' height='7.337' viewBox='0 0 11.844 7.337'%3E%3Cpath id='Tracé_38101' data-name='Tracé 38101' d='M16443.906,334.843l5.215,5.215,5.215-5.215' transform='translate(-16443.199 -334.136)' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E%0A");
}

header .menuContainer .menu-header-container .menu > li:hover > a{
    background-color: #EFEFEF;
}

header .menuContainer .menu-header-container .menu > li.current-menu-item > a{
    background-color: var(--vert);
    color: #fff;
}

header .menuContainer .menu-header-container .menu > li > a{
    padding: 62px 20px 19px 20px;
    display: block;
}

header .menuContainer .menu-header-container .menu li .sub-menu{
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 100%);
    background-color: var(--gris2);
    z-index: 999;
}

header .menuContainer .menu-header-container .menu li:hover .sub-menu{
    display: flex;
}

header .menuContainer .menu-header-container .menu li .sub-menu li a{
    display: block;
    font-size: 18px;
    line-height: 22px;
    color: #000;
    font-weight: 500;
    text-align: center;
    padding-block: 9px;
    padding-inline: 50px;
    white-space: nowrap;
}

header .menuContainer .menu-header-container .menu li .sub-menu li a:hover{
    background-color: var(--vert);
    color: #fff;
}

header .burger{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: #000;
    border-radius: 100%;
    height: 52px;
    width: 52px;
    aspect-ratio: 1;
}

header .burger .barre{
    height: 2px;
    width: 18px;
    background-color: #fff;
    border-radius: 10px;
    opacity: 1;
    transition: 300ms ease;
    transform: none;
}

body.menuOpen header .burger .barre2{
    opacity: 0;
    transition: 300ms ease;
}

body.menuOpen header .burger .barre1{
    transition: 300ms ease;
    transform: rotate(45deg) translate(5px, 5px);
    width: 24px;
}

body.menuOpen header .burger .barre3{
    transition: 300ms ease;
    transform: rotate(-45deg) translate(5px, -5px);
    width: 24px;
}

@media (max-width: 1700px){
    header .menuContainer .menu-header-container .menu{
        gap: 20px;
    }
    header .menuContainer .telephone{
        margin-left: 30px;
    }
    header .menuContainer .menu-header-container .menu > li > a{
        padding-top: 50px;
    }
    header .menuContainer .menu-header-container .menu > li > a,
    header .menuContainer .contact,
    header .menuContainer .telephone{
        font-size: 18px;
        line-height: 18px;
    }
    header .menuContainer .menu-header-container .menu > li{
        padding-bottom: 35px;
    }
    .header .logo{
        max-width: 190px;
    }
}

@media (max-width: 1500px){
    .header{
        padding-inline: 6%;
    }
    header .menuContainer .contact,
    header .menuContainer .telephone{
        margin-left: 20px;
    }
    header .menuContainer .menu-header-container .menu > li > a,
    header .menuContainer .contact,
    header .menuContainer .telephone,
    header .menuContainer .menu-header-container .menu li .sub-menu li a{
        font-size: 16px;
        line-height: 16px;
    }
    header .menuContainer .menu-header-container .menu li .sub-menu li a{
        padding-inline: 35px;
    }
    header .menuContainer .menu-header-container .menu > li > a{
        padding-inline: 20px;
    }
}

@media (max-width: 1400px){
    header .menuContainer .telephone{
        display: none;
    }
}

@media (max-width: 1200px){
    header .menuContainer .telephone,
    header .menuContainer .contact{
        padding-inline: 22px;
    }
    .header .logo{
        max-width: 160px;
    }
}

@media (min-width: 993px){
    header .menuContainer .menu-header-container .menu li:hover .sub-menu > .mobile{
        display: none;
    }
}

@media (max-width: 992px){
    header .menuContainer .telephone{
        display: block;
    }
    header .menuContainer{
        display: none;
        position: absolute;
        flex-direction: column;
        align-items: start;
        bottom: 0px;
        left: 0px;
        transform: translate(0%, 100%);
        width: 100vw;
        height: calc(100vh - 100px);
        padding-inline: 80px;
        padding-bottom: 36px;
        z-index: 999;
        background-color: #fff;
    }
    body.menuOpen header .menuContainer{
        display: flex;
        gap: 26px;
        overflow-y: scroll;
        padding-bottom: 100px;
    }
    .header{
        padding-inline: 80px;
        padding-block: 14px;
    }
    header .menuContainer .menu-header-container .menu{
        flex-direction: column;
    }
    header .menuContainer .menu-header-container, 
    header .menuContainer .menu-header-container .menu{
        width: 100%;
    }
    header .menuContainer .menu-header-container .menu{
        gap: 0px;
    }
    header .menuContainer .menu-header-container .menu > li{
        padding: 0px;
        border-bottom: solid 1px #D3D3D3;
    }
    header .menuContainer .menu-header-container .menu > li > a{
        padding-block: 25px;
        padding-inline: 0px;
        font-size: 18px;
        line-height: 22px;
        font-weight: bold;
        background-color: transparent !important;
        color: #000 !important;
    }
    header .menuContainer .telephone, 
    header .menuContainer .contact{
        margin: 0px;
        font-size: 20px;
        line-height: 24px;
    }
    header .menuContainer .menu-header-container .menu > li.menu-item-has-children > a::after{
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.844' height='7.337' viewBox='0 0 11.844 7.337'%3E%3Cpath id='Tracé_38101' data-name='Tracé 38101' d='M16443.906,334.843l5.215,5.215,5.215-5.215' transform='translate(-16443.199 -334.136)' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E%0A") !important;
    }
    header .menuContainer .menu-header-container .menu > li.menu-item-has-children.liOpen > a::after{
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.691' height='6.003' viewBox='0 0 9.691 6.003'%3E%3Cpath id='Tracé_38101' data-name='Tracé 38101' d='M16448.045,340.139l-4.846-4.846,1.156-1.157,3.689,3.689,3.689-3.689,1.156,1.157Z' transform='translate(16452.891 340.139) rotate(180)'/%3E%3C/svg%3E%0A") !important;
    }
    header .menuContainer .menu-header-container .menu > li.menu-item-has-children.liOpen{
        border-bottom: none !important;
    }
    header .menuContainer .menu-header-container .menu li .sub-menu{
        display: none !important;
        position: relative;
        left: 0px;
        transform: none;
        background-color: transparent;
        border-top: solid 1px #D3D3D3;
    }
    header .menuContainer .menu-header-container .menu > li.menu-item-has-children > a{
        pointer-events: none;
    }
    header .menuContainer .menu-header-container .menu li .sub-menu li a{
        text-align: start;
        font-size: 18px;
        line-height: 22px;
        padding-inline: 0px;
        padding-block: 25px;
        border-bottom: solid 1px #D3D3D3;
        background-color: transparent !important;
        color: #000 !important;
    }
    header .menuContainer .menu-header-container .menu li.liOpen .sub-menu{
        display: flex !important;
    }
}

@media (max-width: 800px){
    .header{
        padding-inline: 36px;
    }
    header .menuContainer{
        padding-inline: 36px;
    }
}