/* START hero */
.hero{
    min-height: 70vh;
    height: auto;
}

.hero .serarator{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
}

@media screen and (max-width: 650px) {
    .hero{
        min-height: 30vh;
        height: auto;
    }
}

/* END hero */

/* START introHero */
.introHero .containerImg{
    width: 100%;
    display: flex;
    justify-content: center;
}

.introHero .logo{
    width: auto;
    height: 40vh;
    display: flex;
    z-index: 1;
}

/* END introHero */

/* START imgTextSpecial */
.imgTextSpecial .uniformSpacing{
    display: flex;
    align-items: center;
}


.imgTextSpecial .uniformSpacing img{
    width: 50%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.imgTextSpecial .uniformSpacing > div{
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 50%;
    background-color: white;
    box-shadow: 0px 3px 10px #00000029;
    padding: 2.75em;
    height: fit-content;
}

@media screen and (max-width: 1200px) {
    .imgTextSpecial .uniformSpacing {
        flex-direction: column;
    }

    .imgTextSpecial .uniformSpacing img, .imgTextSpecial .uniformSpacing div{
        width: 100%;
    }

    .imgTextSpecial .uniformSpacing img{
        max-height: 20em;
    }

}

/* END imgTextSpecial */

/* START templateIconeTex */
.templateIconeTex .uniformSpacing {
    display: flex;
    flex-wrap: wrap;
    gap: 5em;
}

.templateIconeTex .uniformSpacing .element {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    width: calc((100% - 5em * 2) /3);
}

.templateIconeTex .uniformSpacing .element span{
    display: flex;
    justify-content: center;
}


.templateIconeTex .uniformSpacing .element span svg{
    width: 4.5em;
    height: auto;
}

/* END templateIconeTex */


/* START bandeauListing */

.bandeauListing .containerIntrotext {
    display: flex;
    justify-content: center;
    padding: calc(var(--defaultSpacing) * 2);
    padding-bottom: calc(var(--defaultSpacing) * 6);
    background-position-y: top;
}

.bandeauListing .bigSpacing{
    padding-top: 0;
    margin-top: -8em;
    position: relative;
    z-index: 11;

}

.bandeauListing .bigSpacing .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 5em;
}

.bandeauListing .bigSpacing .cards .element {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: calc((100% - 5em * 2) / 3);
}

.bandeauListing .bigSpacing .cards .element img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.bandeauListing .bigSpacing .cards .element svg {
    width: 1.5em;
    height: 1.5em;
}

@media screen and (max-width: 850px) {
    .bandeauListing .bigSpacing .cards {
        justify-content: center;
        gap: 2em;
    }

    .bandeauListing .bigSpacing .cards .element {
        width: 70%;
        gap: .5em;
    }
}

/* END bandeauListing */

/* START listingProduct */
.listingProduct{
    background: transparent linear-gradient(180deg, var(--basicColor2) 0%, #B84A4F 56%, var(--basicColor2) 100%) 0% 0% no-repeat padding-box;
}

.listingProduct .uniformSpacing{
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.listingProduct .uniformSpacing .products{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.listingProduct .uniformSpacing .products .product {
    background: var(--basicColor3) 0% 0% no-repeat padding-box;
    width: calc((100% - 1em * 2) / 3);
    height: auto;
    aspect-ratio: 1/1;
    position: relative;
}

.listingProduct .uniformSpacing .products .product img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: ease all .3s;
}

.listingProduct .uniformSpacing .products .product img.imgEntete{
    opacity: 0;
    transition: ease all .3s;
    position: absolute;
    top: 0;
    left: 0;
}

.listingProduct .uniformSpacing .products .product:hover img.imgEntete{
    opacity: 1;
}

.listingProduct .uniformSpacing .products .product:hover img:not(.imgEntete){
    opacity: 0;
}

/* END listingProduct */


/* START containerCuisine */
.containerCuisine > .serarator{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.containerCuisine > img{
    height: 50vh;
    width: 100%;
    object-position: center;
    object-fit: cover;
}


.containerCuisine .uniformSpacing{
    display: flex;
    flex-direction: column;
}

.containerCuisine .uniformSpacing .containerIntroText{
    box-shadow: 0px 3px 10px #00000029;
    padding: 2.5em;
    transform: translateY(-50%);
}

.containerCuisine .uniformSpacing .listing{
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    transform: translateY(-50%);
}

.containerCuisine .uniformSpacing .listing .element{
    display: flex;
    flex-direction: column;
    gap: .75em;
    width: calc((100% - 3em * 2) / 3);
}

.containerCuisine .uniformSpacing .listing .element *{
    text-align: left;
}

.containerCuisine .uniformSpacing .listing .element svg {
    width: 2em;
    height: 2em;
}

.containerCuisine .uniformSpacing .mainLink{
    transform: translateY(-40%);
}

/* END containerCuisine */


/* START bandeauImg */
.bandeauImg .uniformSpacing {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}

/* END bandeauImg */