/* 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;
    }
}

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

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

@media screen and (max-width: 650px) {
    .introHero .logo{
        width: auto;
        height: 25vh;
        display: flex;
        z-index: 1;
        margin-top: -15vh;
    }
}

/* 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;
}

@media screen and (max-width: 650px) {
    .templateIconeTex .uniformSpacing {
        gap: 1.5em;
    }

    .templateIconeTex .uniformSpacing .element {
        width: 100%;
    }
}

/* 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;
}

@media screen and (max-width: 600px) {
    .listingProduct .uniformSpacing .products .product {
        width: calc((100% - 1em) / 2);
    }
}

/* 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;
    gap: 2em;
}

.containerCuisine .uniformSpacing .containerIntroText {
    box-shadow: 0px 3px 10px #00000029;
    padding: 2.5em;
}

.containerCuisine .uniformSpacing .listing {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
}

.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%);
}

@media screen and (max-width: 650px) {
    .containerCuisine .uniformSpacing .listing{
        gap: 1.5em;
    }

    .containerCuisine .uniformSpacing .listing .element {
        width: 100%;
    }
}

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

/* END bandeauImg */