/*
Theme Name: 	MFM Digital
Theme URI: 		http://themes.muffingroup.com/betheme
Author: 		MFM Digital
Author URI: 	http://mfmdigital.com.com
Description:	MFM Digital Child Theme
Template:		betheme
Version: 		1.0.0
*/

/* Theme customization starts here
-------------------------------------------------------------- */
#Content{
    padding-top: 0px;
}

.gallerySwiper{
    height: 100%;
    width: 100%;
}
.headerSwiperContainer{
    position: absolute;
    height: 100%;
    width: 100%;
}
.column:has(.gallerySwiper) , .mcb-column-inner:has(.gallerySwiper){
    height: 100%;
}
.mfn-header-menu li.accent-item{
    align-items: center;
}
.mfn-header-menu li.accent-item a{
    background-color:#0088FF;
    border-radius:50px;
    padding:1.2em!important;
    color:#fff!important;
    font-weight:600!important
}
.mfn-header-menu li.accent-item+li{margin-left: 0;}
.section_wrapper:has(.gallerySwiper){
    padding: 0;
    margin: 0;
    max-width: 100%!important;
}
.mfn-header-menu .mfn-menu-link .menu-icon > img[src*="whatsapp"]{
    width:40px
}
/* Remettre les marge de betheme */
/* .fullscreenAbsolute{
    position: absolute;
    height: 100vh;
    width: 100vw;
} */



.gallerySwiper img{
    height: 100%;
    width: 100%;
    object-fit: cover;

}
.marque_list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
select#sorting{
    width:160px;
    border:solid 1px;
    border-radius:8px;
    margin-bottom: 5px;

    option{
        background-color:#127bd7!important;
        color:#fff;

    }
}
.marque_list li {
    width: fit-content;
    font-size: 39px;
    font-weight: 600;
    line-height: 60px;
    color: black;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 20px;
    position: relative; /* Permet au ::before de suivre */
    padding-left: 0px; /* Crée de l’espace à gauche pour la ligne */
    transition: transform 0.3s ease-in-out;
    a{
        color:inherit;
        text-decoration: none;
    }
}
.marque_list li::before {
    content: "";
    width: 65px;
    height: 1px;
    background-color: transparent;
    display: flex;
    position: absolute;
    left: -85px;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease-in-out, left 0.3s ease-in-out;
}
.marque_list li.active::before {
    background-color: #0088FF;
}
.marque_list li.active {
    transform: translateX(85px);
}
.social_icons{
    display: inline-flex;
    width: fit-content;
    gap: 10px;
    img{
        max-width:40px;
    }
}
.social_icons.black a img{
    filter: invert(1);
}
.forminator-custom-form:has(.sumbit_button) {
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto;
    align-items: stretch;
    gap: 0;
}

.forminator-custom-form .forminator-row:has(.custom_row) {
    margin: 0!important;
    grid-column: 1;
    height: 100%;
}

.forminator-custom-form .forminator-row:has(.sumbit_button) {
    margin: 0!important;

    grid-column: 2;
}
.forminator-custom-form .custom_row > div, .forminator-custom-form .custom_row,.forminator-custom-form .forminator-col:has(.sumbit_button) {
    height: 100%;
    padding: 0!important;
}

.forminator-custom-form .custom_row input {

    width: 350px;
    margin: 0;
    height: 100%;
    background-color: #fff;
    border-radius: 5px 0 0 5px;
    padding: 12.5px 20px;
    border: unset;
    box-shadow: 2px 2px 20px 0px #0000000D;
    text-align: center;
}
@media (max-width:768px){
    .forminator-custom-form .custom_row input {
        width: 230px;
    }
}

.forminator-custom-form .sumbit_button {
    border-radius: 0 5px 5px 0;
    padding: 14px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 20px 0px #0000000D;
}

.forminator-custom-form .sumbit_button img {
    width: 22px;
    height: 22px;
    display: flex;
}

.forminator-custom-form:has(.sumbit_button) .forminator-response-message{
    grid-row: 2;
    grid-column: 1 / span 2;
}

.news_blog_slider .swiper-slide .imgContainer{
    position: relative;
    width: fit-content;
    height: fit-content;

}
.news_blog_slider .swiper-slide .imgContainer img{
    height: 300px;
    width: 400px;
    object-fit: cover;

}
.news_blog_slider .swiper-slide .imgContainer .category{
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: 17px;
    left: 9px;
}
.news_blog_slider .swiper-slide .imgContainer .category span{
    padding: 5px 35px;
    font-size: 15px;
    line-height: 20px;
    border-radius: 16px;
    background-color: #0088FF;
    color: white;
    text-transform: uppercase;


}
.news_blog_slider .swiper-slide h3{
    margin: 20px 0 6px 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    text-align: justify;
}
.news_blog_slider .swiper-slide .excerpt{
    font-size: 14px;
    line-height: 23px;
    text-align: justify;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 11px;
    color: black;
}
.news_blog_slider .swiper-slide .excerpt+div{
    font-style: italic;
    color:#000;
    font-size: 14px;
}
.news_blog_slider .swiper-slide .credit span{
    padding: 0 8.5px;
    color: black;
    font-size: 14px;
    font-style: italic;
    line-height: 23px;
    text-align: justify;
    &:first-of-type{
        border-right: 1px solid #0088FF;

    }
}

.specialHeader{
    p{
        display: flex;
        gap: 30px;
        align-items: center;

    }
    &.center p{
        justify-content: center;

    }
}

.specialHeader p::after{
    content: "";
    display: flex;
    width: 65px;
    height: 1px;
    background-color: #0088FF;
}

.archive #Content{
    padding-top: 140px;
}
@media(min-width:768px){
    .archive #Content{
        padding-top: 110px;
    }
}
li.menu-item-has-children>a>span.menu-sub.mfn-menu-subicon{

    order:-1

}
body.home .invertColor{
    .mfn-header-menu>li>a>span{
        color: white !important ;

    }
    span{
    }
   .logo-wrapper img{
    filter: invert(1);
   }
}
.new_cars_slider .swiper-slide{
    display: flex;
    flex-direction: column;
    gap:17px;
}
.vehicle-card{
    display: flex;
    flex-direction: column;
    gap:17px;
    background-color: #fff;
    &.hide{
        display:none;
    }
    border:solid 1px #0088FF;
    border-radius:8px;
    overflow:hidden;
    .imgContainer{
        position: relative;
        display: flex;
        /* box-shadow: 2px 2px 20px 0px #00000040; */

    }
    .imgContainer .thumbnail{
       width:100%;
       aspect-ratio:1;
        object-fit: cover;
        border-radius: 0px;
    }
    .imgContainer .imgContent{
        display: flex;
        padding: 22px 19px 14px 17px;

       position:absolute;
       inset:0;
        flex-direction: column;
        justify-content: space-between;
        z-index: 5;
        &:hover{
            text-decoration: unset;
        }
    }


    .imgContainer .category span{
        background-color: #0088FF;
        color: white;
        padding: 3px 33px 5px 33px ;
        border-radius: 20px;
        font-size:15px;
        line-height: 1.5em;
        display: inline-block;
    }
    .imgContainer .footerData{
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    .imgContainer .footerData .infos{
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-self:flex-end;
    }
    .imgContainer .footerData .infos span{
        display: flex;
        padding:  0 23px;
        /* background: #FFFFFF38; */
        /* backdrop-filter: blur(4px); */
        background-color: #4a4b4c;
        border-radius: 16px;
        color: white;
        font-size: 12px;
        font-weight: 600;
        line-height: 17px;
        align-items: center;
        line-height:2em
    }

    .imgContainer .footerData .goto{
        background-color: white;
        border-radius: 50px;
        width: 42px;
        display: flex;
        padding: 5px;
        justify-self: end;
        height: 42px;
        box-sizing: border-box;
    }
    h3{
        font-size: 15px;
        font-weight: 700;
        line-height: 25px;
        padding: 0 15px;
        min-height:2lh;

        >span{
            display:flex;
            justify-content: space-between;
            flex-wrap:wrap;
            gap:4px;
        }


    }
}



.grid-vehicles{
    display:flex;
    flex-wrap: wrap;
    gap:16px;
    justify-content:center;
    max-width:2200px;
    scroll-margin-top:120px;

    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    .vehicle-card{
        width:clamp(300px,100%,315px);
        opacity:1;
        transition:all ease-in-out 0.2s;
    }
    &.faded .vehicle-card{
        opacity:0;
    }
}



@media(width>=1240px){
    .before-vehicles .open-filters{display:none}
    .archive.post-type-archive-vehicles main{
        display:grid;
        grid-template-columns:420px 1fr;
        align-items:flex-start;
        &>*{
            padding:40px;
        }
        &>form{
            position:sticky;
            top:110px;
            h3+div{
                max-height: calc(100vh - 120px - 180px);
                overflow: auto;
                /* scrollbar-width:none; */
            }
        }
    }
}
body ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px;
    height: 10px
}

body ::-webkit-scrollbar-track {
    background: rgba(0,0,0,.1);
    border-radius: 0
}

body ::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,.25);
    -webkit-transition: color .2s ease;
    transition: color .2s ease
}

body ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,.15)
}

body ::-webkit-scrollbar-thumb:hover {
    background: rgba(128,135,139,.8)
}

main .container{
    width:100%;
}
h3.results-count{
    font-size:20px;
    line-height: 1em;
    font-weight: 500;
    &:has(span:empty){
        visibility: hidden;
    }
}
.before-vehicles{
    padding:10px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    button{
        background-color:#00000000;
        width: 60px;
        height: 60px;
        padding:5px;
        outline:none!important;
        &:hover,&:focus{
            background-color:#1f1f1f00;
            &::before{
            background-color:#1b1b1b;

            }
        }
        &::before{
            border-radius:16px;
            content:'';
            display: block;
            background-color:#000;
            width: 100%;
            height: 100%;
            background-image:url(dist/image/icons/filter.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size:16px;


        }
    }
}
@media(width<1340px){
    #Content:has(#vehicles-filters.open){
        position:relative;
        z-index:3
    }
}
.broudsuperior-slider-container .swiper-slide{
    /* max-width:360px; */
    align-self: stretch;
    &>div{
        background-color:#F9FCFF;
        border-radius:5px;
        padding:40px;
        font-size:15px;
        line-height:1.3em;
        height:100%;
        h3{
            font-size:15px;
            line-height:1.3em;
            font-weight: 600;
            margin-top:10px;
        }

    }
}

@media(width<1239px){
    #mfn-header-template .section_wrapper{
        max-width:calc(100% - 10px);
    }
}

@media(width<1000px){
    #mfn-header-template ul.mfn-header-menu>li{
        margin-right:0;
    }
}

.column_button.hover-scale .button{
    transform:scale(1);
    transition:all ease-in-out .2s;
    &:hover{
        transform:scale(1.1);

    }
}

.showroom-gallery{
    max-width:800px;
    margin:auto;
    .swiper{
        width:100%;
    }
    .gallery-item{
        padding-left:0;
        padding-right:0;
        margin-bottom: 0;
    }
    .swiper-slide img{
        width:100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        object-position: center;
        display:block;
    }

    .swiper-nav{
        position:absolute;
        bottom:0;
        right:0;
        display:flex;
        .swiper-button-prev,
        .swiper-button-next{
            width:40px;
            height:40px;
            background:rgb(248, 248, 248);
            position:static;
            background-image:url(dist/image/icons/arrowdown.svg);
            background-size:30px;
            background-position:center;
            transform:rotate(90deg)
        }
        .swiper-button-next{
            transform: rotate(-90deg);
        }
    }
}

#vehicles-filters{
    @media(width<1239px){
        display:none;
        &.open{
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            display:flex;
        flex-direction: column;

            z-index:999;
            background-color:#fff;
        }
        &>div:nth-child(2){
            flex-grow:1;
            height:calc(100vh - 150px);
            overflow:auto
        }
        .filter-checkboxes{
            max-height:initial!important
        }
    }
    h3.filter-title{
        background-color:#000000;
        color:#fff;
        display:block;
        padding:20px 10px;
        font-size: 17px;
        font-weight: 700;
        line-height:1.2em;
        text-align: center;
        margin-bottom: 0;
        border-radius:5px 5px 0 0;
        display:flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        &::before{
            content:'';
            display: inline-block;
            height:1em;
            width:1em;
            background-image: url(dist/image/icons/filter.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size:contain;
        }

    }
    &>div:last-child{
        background-color: #0088FF;
        color:#fff;
        border-radius:0 0 5px 5px;
        button{
            display:block;
            width:100%;
            text-align: center;
            font-size: 17px;
            line-height: 60px;
        }
    }
    .filter-tab{
        padding:16px 4px 16px 16px;
        border-left:solid 1px #0088FF;
        border-right:solid 1px #0088FF;
        border-bottom:solid 1px #0088FF;
        h3{
            font-size: 15px;
            line-height: 1.2em;
        }
        .filter-checkboxes{
            display:grid;
            grid-template-columns: 1fr 1fr;
            column-gap:8px;
            row-gap:4px;
            font-size: 15px;
            line-height: 1em;
            color:#000;
            max-width:450px;

            max-height:180px;
            overflow-y:auto;
            overflow-x:hidden;
            &>div:has(.w-icon-autres){
                order:99
            }
            label{
                display:flex;
                gap:0.2em;
                align-items:flex-start;
                cursor:pointer;
                span{
                    line-height:1.2em;
                    display:flex;
                    text-transform:capitalize;
                    /* align-items: center; */
                }
                span[class*="w-icon-"]::before,
                span[class*="color-icon-"]::before,
                &.haslogo span::before
                {
                    content:'';
                    display:inline-block;
                    background-size:contain;
                    background-position:center;
                    background-repeat: no-repeat;
                    height:1.2em;
                    flex-shrink: 0;
                    flex-grow:0;


                }
                &.haslogo span::before{
                    width:1.4em;
                    height:1.4em;
                    margin-right: 4px;
                }
                span[class*="w-icon-"]::before{
                    width:30px;

                    background-image: url(dist/image/icons/vehicle-citadine.svg);

                }
                span.w-icon-cabriolet::before{
                    background-image: url(dist/image/icons/vehicle-cabriolet.svg);
                }
                span.w-icon-coupe::before{
                    background-image: url(dist/image/icons/vehicle-coupe.svg);
                }
                span.w-icon-suv-4x4-pick-up::before{
                    background-image: url(dist/image/icons/vehicle-4x4.svg);
                }
                span.w-icon-monospace::before{
                    background-image: url(dist/image/icons/vehicle-monospace.svg);
                }
                span.w-icon-naked-bike::before{
                    background-image: url(dist/image/icons/icon-moto.png);
                }
                span.w-icon-autres::before{
                    background-image: url(dist/image/icons/icon-other.png);
                    background-size:13px;
                }

                span[class*="color-icon-"]::before{
                    width:1.4em;
                    height:1.4em;
                    border-radius: 50px;
                    margin-right: 4px;
                }
                span[class$="vert"]::before{
                    background-color:green;
                }
                span[class$="blanc"]::before{
                    background-color:#fff;
                    box-shadow:inset 0 0 0 1px #585858;
                }
                span[class$="bleu"]::before{
                    background-color:#243d7e;
                }
                span[class$="noir"]::before{
                    background-color:black;
                }
                span[class$="beige"]::before{
                    background-color:rgb(234, 235, 187);
                }
                span[class$="argent"]::before{
                    background-color:rgb(216, 216, 216);
                }
                span[class$="gris"]::before{
                    background-color:rgb(182, 182, 182);
                }
                span[class$="rouge"]::before{
                    background-color:rgb(187, 27, 15);
                }
                span[class$="orange"]::before{
                    background-color:rgb(224, 130, 23);
                }
                span[class$="brun"]::before{
                    background-color:rgb(95, 52, 4);
                }
                span[class$="jaune"]::before{
                    background-color:rgb(231, 219, 41);
                }
                span[class$="rouge"]::before{
                    background-color:rgb(187, 27, 15);
                }
                span[class$="bronze"]::before{
                    background-color:#977d68;
                }
            }
        }
    }
}

.pswp button{
    background-color:transparent!important
}

#deman-team{
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    justify-content: center;
    @media(min-width:640px){
        /* display:grid;
        grid-template-columns: 1fr 1fr; */
    }

    &>div{
        padding:16px;
        text-align:center;
        display:grid;
        gap:20px;
        img{
            max-width:250px;
            margin:auto;
            aspect-ratio: 1;
            object-fit:cover;
            display:block;
            margin:auto;
            border-radius:500px;
            transition:all ease-in-out .2s;
        }
        /* &:not(:hover) img{
            filter:grayscale(1);
            background-color:transparent;
        }
        &:hover img{
            background-color:#0088ff;
            filter:grayscale(0)

        } */
        h3{
            font-size: 16px;
            line-height: 1.4em;
            color:#000;
            font-weight: 600;
            margin-bottom: 8px;
        }
        p{
            font-size: 15px;
            line-height: 1.2em;
            margin-bottom: 8px;
            color:#000000ad;

            a{
                color:#000;
                text-decoration:underline;
            }
        }
        @media(width>=768px){
            width:calc(50% - 10px);
        }

        @media(width>=1240px){
            text-align:left;

            grid-template-columns: 250px 1fr;
            align-items:center
        }
    }
}

@media(width>=768px){
    .section.no-wrap .section_wrapper{
        flex-wrap:nowrap;
        .wrap{
            flex-shrink:0;
        }
    }
}

.mfn-acc.accordion_wrapper {
    .question{
        position: relative;
        &::before{
            content:'';
            display:block;
            width:20px;
            height:20px;
            background-image: url(dist/image/icons/arrowdown.svg);
            background-size:contain;
            background-position: center;
            position:absolute;
            right:8px;
            top:8px;
            transform:rotate(0deg)
        }
        &.active::before{
            /* background-color: red; */
            transform:rotate(180deg)

        }
        border:none;
        .answer{
            box-shadow:inset 0px 4px 3px -2px #B8DEFF;
        }
        .title{
            background-color:transparent;
            box-shadow: none;
            border:none;
            padding-left:10px;
            color:#000;
            font-size:25px;
            line-height: 1.2em;
            font-weight: 400;
            &::before{
                display:none;
            }
            &>i{
                display:none!important;
            }
        }
    }
}

.showroom-list.column{
    .timeline_items::after{display:none}
    .timeline_items>li{
        background:none!important;
        padding:40px 40px 40px 90px!important;
        text-align:left;
        h3,.desc{
            text-align:left;
        }
        h3{
            font-size: 28px;
            line-height:1.2em;
            color:#0088FF
        }
        .desc::before{display:none}
        h3::before{
            display:none;
        }
        .desc{
            font-size: 15px;
            line-height: 1.2em;
            color:#00000099;
            text-decoration: none;
            b{
                color:#000;
                display:block;
                margin-bottom: 8px;
            }
        }
        &::before{
            position: absolute;
            content:'';
            display:block;
            top:40px;
            left:0px;
            width:70px;
            height: 70px;
            border-radius: 10px;
            background-color:#E6F3FF;
            border:none;
        }

        &:not(:last-child)::after{
            content:'';
            position:absolute;
            display:block;
            left:35px;
            top:150px;
            bottom:0px;
            width:1px;
            background-color:#0088FF;
        }
    }
}

.mfn-header-tmpl-menu-sidebar-wrapper{
    align-items: center!important;
    ul{
        gap:10px;
    }
}
.fancy-head-right small{
    font-size:0.5em;
    line-height:1.2em;
}
.section:has(.fancy-head-right){
    overflow: hidden;
}
.fancy-head-right{position: relative;}
.fancy-head-right::before{
    content:'';
    display: block;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:100vw;
    background-color:#fff;
    box-shadow: 4px 4px 35px 0px #0000000A;
    border-radius: 20px 0 0 20px;

}
#actu-grid >.mcb-wrap-inner{
    gap:10px;
    margin-bottom: 40px;
}

#actu-grid .column_image{
    .mcb-column-inner{
        margin-left: 0;
        margin-right: 0;
    }
    .image_wrapper img{
        width:100%;
        aspect-ratio:4/3;
        object-fit: cover;
        object-position:center;
        display:block;
        border-radius:13px 13px 0 0;
    }
}


#actu-grid .mfn-queryloop-item-wrapper{
    /* padding:8px; */
    position:relative;
    align-self: stretch;
    &&::before{
        position:absolute;
        display:block;
        content:'';
        inset:-1px;
        border-radius:13px;
        border:solid 1px #0088FF;
    }
}
#actu-grid .column_tag_cloud{
    position:absolute;
    top:0;
    left:0px;
    margin-top: calc(75% - 40px);
    &>div{
        /* margin-left: 0; */
    }
    li a{
        display:inline-block;
        padding:0.2em 0.8em 0.4em 0.8em;
        background-color: #0088FF;
        color:#fff;
        border-radius:40px;
        font-size:14px;
        line-height: 1em;
        text-transform: uppercase;
    }
}
#blog-tags{
    list-style-type: none;
    display:flex;
    justify-content: center;
    gap:6px;
    flex-wrap: wrap;
    margin: 0;padding: 0;
    scroll-margin-top:200px
}
#blog-tags li a{
    border:solid 1px #0088FF;
    color:#000;
    border-radius:40px;
    display:inline-block;
    padding:0.2em 0.8em 0.4em 0.8em;
    line-height:1em;
    font-size:14px;
    text-transform: uppercase;

}

#blog-tags li.active a{
    background-color:#000;
    color:#fff;
    border-color:#000;
}

button.mfp-arrow::before{
    background-color:transparent!important;

}

form.forminator-ui.forminator-design--material[data-design=material]{
    button.forminator-button{
        background-color:#000!important;
        display:block;
        width:100%;
        font-size:15px;
        border-radius:80px;
        span:first-child:after{
            display:inline-block;
            vertical-align: middle;
            content:'';
            height:1.2em;
            width:1.2em;
            margin-left: 1em;
            background-size:contain;
            background-image:url(dist/image/icons/icon-plane.svg);
            background-repeat: no-repeat;
        }
    }

    .forminator-row{
        display:flex;
        flex-wrap:wrap;
        gap:8px;

        &>div{
            width:100%;
        }
    }
    .forminator-checkbox{
        align-items:flex-start
    }
}

.mcb-column-inner ul{
    margin:0;
    list-style-type:none;
    strong{
        color:#000
    }
}

ul>li{
    &.horaire,&.location{
        position:relative;
        padding-left:2.2em;
        strong.blue{
            color:#0088FF;
        }
        a{
            color:#000;
            text-decoration:underline
        }
        &::before{
            display:inline-block;
            position:absolute;
            top:0.4em;
            left:0;
            content:'';
            width:1.4em;
            height:1.4em;
            background-image: url(dist/image/icons/icon-clock.svg);
            background-repeat: no-repeat;
            background-size:contain;
            background-position: center;
            margin-right: 1em;
        }
        &.location::before{
            background-image: url(dist/image/icons/icon-location.svg);

        }
    }
    &>a{
        &:where([href^="tel"],[href^="mailto"]){
            color:#000;
            text-decoration:underline
            &::before{
                display:inline-block;
                content:'';
                width:1.4em;
                height:1.4em;
                background-image: url(dist/image/icons/icon-phone.svg);
                background-repeat: no-repeat;
                background-size:contain;
                background-position: center;
                margin-right: 1em;
                vertical-align: middle;
            }
            &[href^="mailto"]::before{
                background-image: url(dist/image/icons/icon-mail.svg);

            }


        }
}
}

@media(width>=960px){
.wrap.sticktop,.mfn-nested-wrap.sticktop{
    position:sticky;
    top:160px;
}
}

section.section:has(#sectionpages){
    position:fixed;
    top: 116px;
    left:0;
    right:0;
    display:none;
    z-index:999;

}
.admin-bar section.section:has(#sectionpages){
    top:148px;
}
@media(min-width:1200px){
    section.section:has(#sectionpages){
        display:block;
        >.section_wrapper{
            max-width:1240px;
        }
    }
    #sectionpages{
        display:flex;
        justify-content: center;
        gap:10px;
        box-shadow: 0 4px 20px #0000000d;

        padding:10px;
        width:100%;
        background-color:#fff;
        border-radius:0 0 10px 10px;
        align-items:center;
        li a{
            display:inline-block;
            padding:0.4em 1.2em;
            border-radius:40px;
            color:#000;
            text-decoration: none;

            &.active{
                background-color:#0088FF;
                color:#fff;
            }
            &::first-letter{
                text-transform: uppercase;
            }

        }

    }
}

.more-vehicle{
    padding:24px;
    background-color:#f6f6f6;
    text-align:center;
    max-width:clamp(320px,60vw,640px);
    margin:auto;
    margin-top: 140px;
    border-radius:8px;
    h3{
        font-size:24px;
    }
}
.post-type-archive-accessoires #Content,
.single-accessoires #Content{
    margin-top: 40px;
    h1{
        font-size:clamp(24px,5vw,30px);
    }
}
.single-accessoires #Content{
    padding-top: 60px;
    @media(width>768px){
        padding-top: 110px;
    }
}

.single .accessoire-item{
    display:grid;
    gap:40px;
    padding-bottom: 80px;

    @media(width>960px){
        grid-template-columns: 1fr 1fr;
    }
}

.grid-accessoires{
    display:grid;
    padding-bottom: 40px;
    gap:40px;
    @media(width>740px){
        grid-template-columns: 1fr 1fr;
    }
    @media(width>1240px){
        grid-template-columns: 1fr 1fr 1fr;
    }

    .accessoire-card{
       border: solid 1px #0088FF;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    >div{
        padding:0 20px 0 20px;
    }
    >a{
        position:absolute;
        inset:0;
    }
    h3{
        font-size:18px;
        line-height:1.4em;
        font-weight: 600;
    }
        img{
            aspect-ratio: 1;
            object-fit: cover;
            object-position: center;
        }
    }
}