:root {
    --swiper-pagination-color: var(--red);
    --swiper-navigation-color: var(--white);
    --swiper-pagination-bullet-size: .75rem;
    --swiper-pagination-bullet-width: .75rem;
    --swiper-pagination-bullet-height: .75rem;
    --swiper-pagination-bullet-inactive-color: var(--white);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 0.656rem;
    --swiper-pagination-bullet-vertical-gap: 0.656;
    --swiper-pagination-bottom: 2.5rem;
    --swiper-navigation-size: 2.5rem;
    --swiper-navigation-sides-offset: calc(var(--swiper-navigation-size) / 2 * -1);

    --image-height-rem: 16.25;
    --banner-height-rem: 5.625;
    --swiper-height: calc((var(--image-height-rem) + var(--banner-height-rem)) * var(--base-font-size) * 1px);
}
    
.blue-slide .recipe-footer {
    background-color: var(--blue);
    color: var(--white);
}

.blue-slide a,
.blue-slide a:visited {
    color: var(--white);
}

.blue-slide a.cta,
.blue-slide a.cta:visited {
    color: var(--blue);
}

.swiper-slide {
    max-width: 100vw;
}

.swiper-slide picture,
.swiper-slide img {
    width: 100%;
    object-fit: cover;
}

.swiper:not(.disabled) .swiper-slide .recipe-footer {
    height: auto;
    height: calc(var(--banner-height-rem) * var(--base-font-size) * 1px) !important;
    height: calc(var(--banner-height) * 1px) !important;
}

.swiper:not(.disabled)[data-slider-height=true] .swiper-slide .recipe-footer {
    height: auto !important;
    min-height: calc(var(--banner-height-rem) * var(--base-font-size) * 1px) !important;
    min-height: calc(var(--banner-height) * 1px) !important;
}

.swiper-arrow {
    display: none;
    border-radius: var(--radius);
    width: var(--swiper-navigation-size);
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    /* pointer-events: initial; */
    opacity: .5;
}

.swiper-arrow:after {
    font-size: calc(var(--swiper-navigation-size) / 2);
    font-weight: 700;
}

/* Specific sliders */
/* Home hero banner */

/* fixed positionned slider flag */
/* .home .componentHero {
    --flag-height: .38rem;
}

.home .componentHero .swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: calc(var(--flag-height) + .001rem);
}

.home .componentHero .swiper .swiper-slide .recipe-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.125rem 0 2.5rem;
}

.home .componentHero:has(.swiper .swiper-slide) {
    position: relative;
    background-color: var(--white);
}

.home .componentHero:has(.swiper .swiper-slide):before,
.home .componentHero:has(.swiper .swiper-slide):after {
    content: '';
    position: absolute;
    width: 33%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-color: var(--green);
}

.home .componentHero:has(.swiper .swiper-slide):after {
    left: initial;
    right: 0;
    background-color: var(--red);
} */
/* end fixed positionned slider flag */

/* moving slider flag */
.home .componentHero {
    --flag-height: .38rem;
}

.home .componentHero .swiper .swiper-slide {
    display: flex;
    flex-direction: column;
}

.home .componentHero .swiper .swiper-slide .recipe-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2.125rem 0 2.5rem;
    border-bottom: calc(var(--flag-height) + .001rem) solid var(--white);
    box-sizing: border-box;
}

.home .componentHero .swiper .swiper-slide .recipe-footer:before,
.home .componentHero .swiper .swiper-slide .recipe-footer:after {
    content: '';
    position: absolute;
    width: 33%;
    height: var(--flag-height);
    left: 0;
    bottom: calc(var(--flag-height) * -1);
    background-color: var(--green);
}

.home .componentHero .swiper .swiper-slide .recipe-footer:after {
    left: initial;
    right: 0;
    background-color: var(--red);
}
/* end moving flag */

.home .componentHero .swiper .swiper-slide h1,
.home .componentHero .swiper .swiper-slide h3,
.home .componentHero .swiper .swiper-slide p {
    width: 80vw;
    max-width: 25rem;
    margin: 0 auto;
    text-align: center;
}

.home .componentHero .swiper .swiper-slide h1,
.home .componentHero .swiper .swiper-slide h3 {
    font-family: "Brygada 1918", serif;
    font-size: 1.875rem;
    line-height: 1;
    margin-bottom: .5rem;
}

.home .componentHero .swiper .swiper-slide .cta {
    --line-height: 1.875rem;
    line-height: var(--line-height);
    border-radius: calc(var(--line-height) / 2);
    padding: 0 1rem;
    font-size: .813rem;
    margin-top: 1rem;
}

.home .componentHero .swiper .swiper-slide a:has(img) {
    order: 2;
}

.home .componentHero .swiper .swiper-slide img {
    max-height: 21.875rem;
    object-fit: cover;
}

.recipe.card {
    display: flex;
    flex-direction: column;
    min-height: 23.125rem;
    border-radius: var(--radius);
    overflow: hidden;
    padding-bottom: 0.938rem;
}

.recipe .recipe-notation-star {
    cursor: initial
}

.recipe.card picture {
    border-radius: var(--radius) var(--radius) 0 0;
}

.recipe.card-img-container {
    width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
}

.recipe.card img {
    display: block;
    object-fit: cover;
    height: 18.125rem;
    width: 100%;
}

.home .recipe.card h3 {
    color: inherit;
    margin: .938rem 0 .313rem;
    font-size: 1.125rem;
    line-height: 1.25rem;
}

.home .componentRecipesList-readMore {
    margin-top: calc(1.5rem - var(--shadow-blur) * 2);
}

.swiper-slide.card img {
    height: calc(var(--image-height-rem) * var(--base-font-size) * 1px);
}

.componentRecipesList .recipe-footer {
    background-color: var(--white);
}

.recipe.card .recipe-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: .875rem 2.25rem 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.recipe.card:not(.swiper-slide) .recipe-footer {
    flex: 1;
}

.recipe.card h3 {
    color: inherit;
    margin: 0 0 .75rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.188rem;
}

.recipe.card .cta {
    background-color: var(--blue);
    color: var(--white);
    margin-top: auto;
}

.recipe.card.blue-slide .cta {
    background-color: var(--white);
    color: var(--blue);
}

.recipe.card.blue-slide .cta:has( + .recipe-notation) {
    margin-bottom: 1.313rem;
}

@media screen and (min-width: 64rem) {

    .recipe.card.blue-slide .cta:has( + .recipe-notation) {
        margin-bottom: 2rem;
    }
}

@media screen and (min-width: 64rem) {

    :root {
        --swiper-pagination-bottom: 1.5rem;
        --image-height-rem: 15;
    }

    .home .componentHero .swiper .swiper-slide {
        flex-direction: row-reverse;
    }

    .home .componentHero .swiper .swiper-slide a:has(img) ,
    .home .componentHero .swiper .swiper-slide .recipe-footer {
        flex: 1;
        width: 50%;
    }

    .home .componentHero .swiper .swiper-slide img {
        max-height: 31.25rem;
    }

    .home .componentHero .swiper .swiper-slide .recipe-footer {
        justify-content: center;
    }

    .home .componentHero .swiper .swiper-slide h1,
    .home .componentHero .swiper .swiper-slide h3 {
        max-width: 22rem;
    }

    .home .componentHero .swiper .swiper-slide p {
        max-width: 18rem;
    }
    
    .home .componentHero .swiper .swiper-slide p {
        font-size: 1.25rem;
        font-size: 1.375rem;
    }

    .home .componentHero .swiper .swiper-slide h1,
    .home .componentHero .swiper .swiper-slide h3 {
        font-size: var(--h1-size);
        line-height: var(--h1-line-height);
        margin-bottom: 1rem;
    }

    .home .componentHero .swiper .swiper-slide .cta {
        font-size: 1rem;
        margin-top: 2.25rem;
    }

    .home .componentHero .swiper .swiper-slide .recipe-footer {
        border: none;
    }
    
    .home .componentHero .swiper .swiper-slide .recipe-footer:before,
    .home .componentHero .swiper .swiper-slide .recipe-footer:after {
        content: initial;
    }

    /* moving flag slider */
    /* .home .componentHero .swiper {
        position: relative;
    }

    .home .componentHero:has(.swiper .swiper-slide) {
        position: relative;
        background-color: var(--white);
    }

    .home .componentHero .swiper-slide {
        border-bottom: calc(var(--flag-height) + .001rem) solid var(--white);
    }
    
    .home .componentHero .swiper-slide:before,
    .home .componentHero .swiper-slide:after {
        content: '';
        position: absolute;
        width: 33%;
        height: var(--flag-height);
        left: 0;
        bottom: calc(var(--flag-height) * -1);
        background-color: var(--green);
    }

    .home .componentHero .swiper-slide:after {
        left: initial;
        right: 0;
        background-color: var(--red);
    } */
    /* end moving flag slider */

    /* start fixed flag slider */
    .home .componentHero:has(.swiper .swiper-slide) {
        position: relative;
        border-bottom: calc(var(--flag-height) + .001rem) solid var(--white);
    }
    
    .home .componentHero:has(.swiper .swiper-slide):before,
    .home .componentHero:has(.swiper .swiper-slide):after {
        content: '';
        position: absolute;
        width: 33%;
        height: var(--flag-height);
        left: 0;
        bottom: calc(var(--flag-height) * -1);
        background-color: var(--green);
    }

    .home .componentHero:has(.swiper .swiper-slide):after {
        left: initial;
        right: 0;
        background-color: var(--red);
    }

    .home .componentHero .swiper .swiper-slide{
        gap: 0;
    }
    /* end fixed flag slider */

    .home .recipe.card h3 {
        margin: 1.375rem 0 .813rem;
        font-size: 1.375rem;
        line-height: 1.188rem;
    }
}
/* RECIPES LIST SLIDER */

.box-over:has(.swiper) {
    display: block;
    padding-left: 0;
    padding-right: 0;
}

.componentRecipesList .swiper-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.componentRecipesList .swiper-container:has(.edit-buttons) {
    padding-top: 3.75rem;
}

.componentRecipesList h2 {
    padding: 0 1rem;
}

.componentRecipesList .swiper {
    --swiper-navigation-top-offset: calc(100% - 16.25rem);
    position: relative;
    top: calc(var(--shadow-blur) * -1);
    align-self: center;
    overflow: visible;
    margin-left: calc((var(--side-padding) + (100vw - var(--content-width)) / 2 + var(--shadow-blur)) * -1);
    padding: calc(var(--shadow-blur) - 0.001rem);
}

.swiper-otherRecipes {
    padding: calc(var(--shadow-blur) - 0.001rem);
}

@media screen and (min-width: 48rem) {

    .componentRecipesList .swiper {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (min-width: 64rem) {

    [data-disable-on=desktop].swiper:is(div, #hey),
    [data-disable-on=desktop].swiper .swiper-wrapper:is(div, #hey) {
        max-width: none;
        width: auto;
        display: flex;
        justify-content: center;
        overflow: visible;
    }

    [data-disable-on=desktop].swiper .swiper-wrapper:is(div, #hey) .swiper-slide-visible:has( + .fake-slide) {
        margin-right: 0 !important;
    }

    /* workaround for "nth-of-class" selector */
    [data-disable-on=desktop].swiper .swiper-wrapper:is(div, #hey) article:nth-child(1 of .swiper-slide-visible),
    [data-disable-on=desktop].swiper .swiper-wrapper:is(div, #hey) article:nth-child(2 of .swiper-slide-visible) {
        margin-right: 2rem !important;
    }

    [data-disable-on=desktop] .swiper-slide.fake-slide,
    [data-disable-on=desktop] ~ .swiper-arrow {
        display: none !important;
    }

    .swiper-container {
        --side-padding: 3.688rem;
        display: block;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }

    .componentRecipesList .swiper-container:has(.edit-buttons) {
        padding-top: 5.625rem;
    }

    .componentRecipesList h2 {
        padding: 0 5.75rem;
    }


    .componentRecipesList.overlappingBoxes h2 {
        padding: 0 .32rem;
    }
    
    .componentRecipesList .swiper {
        overflow: hidden;
        width: 100%;
    }

    .componentRecipesList .swiper-arrow {
        --swiper-navigation-top-offset: 53.6%;
        display: flex;
    }

    .recipe.card h3 {
        font-size: 1.375rem;
    }
}
/* END RECIPES LIST SLIDER */

/* PRODUCTS SLIDER */
.products-swiper {
    position: relative;
}

.products-swiper * {
    text-align: center;
}

.products-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
}

.products-swiper .product-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.products-swiper .cta {
    line-height: 2.5rem;
    background-color: var(--blue);
    color: var(--white);
    margin-top: auto;
}

.products-swiper .swiper-arrow {
    --swiper-navigation-top-offset:43vw;
    --swiper-navigation-sides-offset: 1.188rem;
}

.product-wrapper .swiper-arrow {
    display: flex;
}

.product-wrapper:has(.swiper-arrow) {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 2.688rem;
}

.product-wrapper:has(.swiper-arrow) h2 {
    margin: 3.688rem 4rem 0.5rem;
}

.product-wrapper:has(.swiper-arrow) h3 {
    margin: 1rem 3rem;
}

.product-wrapper:has(.swiper-arrow) p {
    margin: 0 2rem 1.5rem;
}

.products-swiper .swiper-slide {
    padding: 1rem 3rem 1.875rem;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.products-swiper .swiper-slide a:has(picture) {
    width: 100%;
}

.products-swiper .product-image {
    width: 16.25rem;
    margin: 0 auto;
}

.pageProduct .products-swiper .product-image {
    width: 14.5rem;
}

.products-swiper .product-image img {
    min-width: initial;
}

.product-wrapper .swiper-arrow {
    position: absolute;
}

.product-wrapper .swiper-arrow.swiper-button-prev{
    left: 7%;
}

.product-wrapper .swiper-arrow.swiper-button-next{
    right: 7%;
}


.home .product-wrapper:has(.swiper-arrow) {
    margin-bottom: 0;
}

.componentRecipesList .swiper-slide,
.componentProductsList .swiper-slide {
    box-shadow: var(--shadow-transparent);
    transition: box-shadow var(--transition-time);
}

.componentRecipesList .swiper-slide.swiper-slide-visible,
.componentProductsList .swiper-slide.swiper-slide-visible {
    box-shadow: var(--shadow);
}

.pageProduct .componentProductsList .swiper-arrow.swiper-button-prev {
    left: calc((var(--swiper-navigation-size) * .5 + .5rem) * -1);
}

.pageProduct .componentProductsList .swiper-arrow.swiper-button-next {
    right: calc((var(--swiper-navigation-size) * .5 + .5rem) * -1);
}

@media screen and (min-width: 48rem) {

    .product-wrapper:has(.swiper-arrow) {
        margin-top: 0;
        margin-bottom: 6calc(var(--flag-height) + .001rem);
    }

    .product-wrapper:has(.swiper-arrow) h2 {
        margin: 1.688rem 0 2rem;
    }

    .home .product-wrapper:has(.swiper-arrow) h2 {
        margin: 1.688rem 0  calc(2rem - var(--shadow-blur));
    }

    .product-wrapper:has(.swiper-arrow) p {
        font-size: var(--p-l-size);
        line-height: var(--p-l-line-height);
    }

    .product-wrapper:has(.swiper-arrow) p:has( + .cta) {
        margin-bottom: 1.1rem;
    }

    .products-swiper {
        overflow: visible;
        box-shadow: none;
    }

    .products-swiper .swiper-slide {
        padding-top: 2.74rem;
        padding-bottom: 2.563rem;
        box-shadow: var(--shadow-transparent);
        border-radius: var(--radius);
        transition: box-shadow var(--transition-time);
    }

    .products-swiper .swiper-slide.swiper-slide-visible {
        box-shadow: var(--shadow);
    }

    .products-swiper .swiper-arrow {
        --swiper-navigation-top-offset: 50%;
    }

    .product-wrapper .swiper-arrow {
        display: none;
    }

    .product-wrapper:has(.swiper-slide:nth-child(3)) .swiper-arrow {
        display: flex;
    }

    .products-swiper .product-image {
        margin: 0 auto;
        width: 15.375rem;
    }

    .pageProduct .products-swiper .product-image {
        width: 13rem;
    }
}

@media screen and (min-width: 64rem) {

    .product-wrapper:not(:has(.swiper-slide:nth-child(4))) .swiper-arrow {
        display: none;
    }

    .product-wrapper:has(.swiper-arrow) h3 {
        margin-top: .5rem;
    }
    
    .home .products-swiper {
        max-width: 63.438rem;
        margin-left: auto;
        margin-right: auto;
    }

    .home .product-wrapper h3,
    .home .product-wrapper p {
        margin-left: 0;
        margin-right: 0;
    }
    
    .products-swiper {
        padding: calc(var(--shadow-blur) - 0.001rem);
        overflow: hidden;
    }
    
    .products-swiper .swiper-slide {
        padding-left: 2.375rem;
        padding-right: 2.375rem;
    }

    .product-wrapper .swiper-arrow {
        position: relative;
    }
    
    .product-wrapper .swiper-arrow.swiper-button-prev{
        left:auto;
    }
    
    .product-wrapper .swiper-arrow.swiper-button-next{
        right: auto;
    }

    .product-wrapper .swiper-arrow {
        top: auto;
    }
}

.componentRecipesList .swiper {
    width: 100vw;
}

.pageGeneric.acceuil-recettes .componentRecipesList .swiper-slide .recipe-footer{
    justify-content: center;
}

@media screen and (min-width: 48rem) {

    .componentRecipesList .swiper {
        width: var(--min-content-width);
    }
}

@media screen and (min-width: 64rem) {

    .componentRecipesList .swiper {
        width: 15.375rem;
        width: 100%;
    }
}

/* PAGE RECIPE */
    
.pageRecipe .swiper {
    padding-bottom: 0;
}

@media screen and (min-width: 64rem) {
    
    .pageRecipe .swiper {
        position: static;
        width: 20.438rem;
        padding: 0;
        margin-left: 0;
        margin-bottom: 1.67rem;
    }
    
    .pageRecipe .swiper-wrapper {
        flex-direction: column;
        gap: 1.188rem;
    }
    
    .pageRecipe .swiper-slide img {
        --image-height-rem: 18.125;
    }
    
    .pageRecipe .swiper-slide {
        width: 100% !important;
        margin-right: 0 !important;
        box-shadow: none;
    }
    
    .pageRecipe .swiper-slide .recipe-footer {
        background-color: var(--blue);
    }
    
    .pageRecipe .swiper-slide .recipe-footer,
    .pageRecipe .swiper-slide .recipe-footer h3 a {
        color: var(--white);
    }
    
    .pageRecipe .swiper-slide .recipe-footer .cta {
        background-color: var(--white);
        color: var(--blue);
    }
    
    .pageRecipe .swiper-slide:nth-child(n+5) {
        display: none;
    }
}

/* Page range has parent */

.pageRange-hasParent .componentProductsList .swiper .swiper-slide {
    padding: 0.5rem 2rem 2.438rem;
    box-shadow: none;
}

.pageRange-hasParent .componentProductsList .swiper-slide img {
    width: 14.5rem;
    margin: 0 auto;
}

.pageRange-hasParent .componentProductsList .swiper-slide h2 {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1.25rem;
}

.pageRange.pageRange-hasParent .pageRange-child .product-wrapper:has(.swiper-arrow) .product-footer h2 {
    margin: 1.2rem 1rem 1.15rem;
}

.pageRange-hasParent .componentProductsList .swiper-slide .product-footer p {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2.25rem;
}

.pageRange-hasParent .componentProductsList .swiper-arrow {
    --swiper-navigation-top-offset: 14rem;
}

.pageRange-hasParent .componentProductsList:not(:has(.swiper > h2)) .swiper-arrow {
    --swiper-navigation-top-offset: 50%;
}

@media screen and (min-width: 64rem) {

    .pageRange.pageRange-hasParent .pageRange-children {
        gap: 0;
    }

    .pageRange.pageRange-hasParent .products-swiper {
        max-width: 52.5rem;
        padding-bottom: 4.875rem;
    }

     .pageRange.pageRange-hasParent .componentProductsList .swiper .swiper-slide {
        padding: 1rem 1rem 1.5rem;
    }

     .pageRange.pageRange-hasParent .pageRange-child .product-wrapper:has(.swiper-arrow) .product-footer h2 {
        padding: 0;
        margin: 1.25rem 0 .5rem;
        font-size: 1.375rem;
        line-height: 1.188rem;
        font-weight: 600;
     }

     .pageRange.pageRange-hasParent .componentProductsList .swiper-slide .product-footer p {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .pageRange-hasParent .componentProductsList .swiper-slide img {
        width: 13rem;
    }
}

/* Page product */

.pageProduct .recipe.card h3 {
    font-size: 1.25rem;
    line-height: 1.188rem;
}

.pageProduct .swiper {
    margin-left: calc((var(--side-padding) + (100vw - var(--content-width)) / 2 + var(--shadow-blur)) * -1);
}

@media screen and (min-width: 64rem) {

    .pageProduct .recipe img {
        height: 16.188rem;
    }

    .pageProduct .swiper {
        margin-left: 0;
    }

    .pageProduct .componentRecipesList .swiper-arrow {
        --swiper-navigation-top-offset: 48.6%;
      }
}

/* FLUID HEIGHT SLIDES */

.swiper .swiper-wrapper.fluid .swiper-slide .recipe-footer {
    flex: 1;
}

.swiper .fluid .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

.swiper .fluid .recipe-footer {
    display: flex;
    flex-direction: column;
}

.swiper .fluid .recipe-footer > *:last-child {
    margin-top: auto;
    margin-bottom: auto;
}