.ct-slider{
    position: relative;
    display: flex;
    /* column-gap: min(20px,min(5vw,2%)); */
}
/* ,.slick-track  */
.ct-slider {
    width: 100%;
}
/* .ct-slider .slick-list {
    position: relative;
    width: 100%;
} */
/* .ct-slider .slick-track {
    position: relative;
    display: flex;
    padding-block: min(10px,4vw);
}
.ct-slider .slick-track .slick-slide {
    flex: 0 0 auto;
    margin-right: min(20px,min(5vw,2%));
} */
/* fieldset */
fieldset {
    position: relative;
    min-inline-size: auto;
    padding: min(33px,7vw);
    border-radius: min(20px,4vw);
    border: 1px solid var(--cLSoftYellow);
}
fieldset legend {
    rotate: -2deg;
    transform-origin: left center;
}
/* wrapper-product-v2 */
.wp-slider {position: relative;}
.ct-slider:has(>.product-v2) {filter: drop-shadow(2px 4px 10px var(--cLBlackTransparent13));}
.wrapper-product-v2 {
    .swiper-products-v2 {
        width: calc(100% + ((100vw - min(1346px,85vw)) / 2));
        @media screen and (width >= 1200px) {
            & {width: 100%;}
        }
    }
   & .pagination {
        position: absolute;
        top: 50%;
        height: 0;
        z-index: 1;
        width: 110%;
        margin-inline: -5%;
        align-items: center;
        transform: translateY(-50%);
        justify-content: space-between;
    }
}
.product-v2 {
    position: relative;
    height: auto;
    display: flex;
    transition: all .3s;
    border-radius: 10px;
    row-gap: min(10px,2vw);
    flex-direction: column;
    background: var(--cLWhite);
    padding: min(20px,5vw) min(18px,5vw);
    & picture {
        flex: 0 0 auto;
        margin-inline: auto;
        width: min(90px,20vw);
        height: min(90px,20vw);
        border-radius: 20rem;
        /* -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url(../images/circle.svg);
        mask-image: url(../images/circle.svg); */
    }
}
.product-v2:has( .overlay):hover {background-color:var(--cLTealStrong);}
body:has( #page_theme) .product-v2:has( .overlay):hover {background-color:var(--page_theme);}
.product-v2 [class^=text] {row-gap: min(10px,2vw);}
.product-v2 .ttl-19 {color: inherit;}
.product-v2 .ttl-19::after {
    position: relative;
    content: '';
    height: 1px;
    width: 116px;
    display: block;
    margin-inline: auto;
    margin-top: min(10px,2vw);
    background-color: var(--cLMintPastel);
}
/* @media screen and (min-width:0px) {
    .ct-slider > .product-v2:nth-child(1) ~ .product-v2  {display: none;}
    .ct-slider > .product-v2 {width: 100%;}
}
@media screen and (min-width:768px) {
    .ct-slider > .product-v2:nth-child(1) ~ .product-v2  {display: flex;}
    .ct-slider > .product-v2:nth-child(3) ~ .product-v2  {display: none;}
    .ct-slider > .product-v2 {width: 32%;}
}
@media screen and (min-width:1200px) {
    .ct-slider > .product-v2:nth-child(3) ~ .product-v2  {display: flex;}
    .ct-slider > .product-v2:nth-child(4) ~ .product-v2  {display: none;}
    .ct-slider > .product-v2 {width: 24%;}
}
@media screen and (min-width:1360px) {
    .ct-slider > .product-v2:nth-child(4) ~ .product-v2  {display: flex;}
    .ct-slider > .product-v2:nth-child(5) ~ .product-v2  {display: none;}
    .ct-slider > .product-v2 {width: 19%;}
} */
/* ul.cards-toggle */
.cards-toggle {
    position: relative;
    display: grid;
    gap: min(30px, 5vw) 2%;
    align-items: flex-start;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    & > li {
        position: relative;
        display: grid;
        transition: all .3s;
        padding: min(1rem, 3vw);
        border-radius: min(10px, 2vw);
        grid-template-rows: 4.8em 0fr;
        border: 1px solid var(--cLTealStrong);
        @media screen and (width>=1200px) {
            &:hover { grid-template-rows: 4.8em 1fr;}
        }
        &.is-open {grid-template-rows: 4.8em 1fr;}
        & .tp {
            display: flex;
            cursor: pointer;
            line-height: 1.2;
            align-items: center;
            column-gap: min(16px, 5vw);
            & picture {
                flex: 0 0 auto;
                width: min(90px, 20vw);
                height: min(90px, 20vw);
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-position: center;
                mask-position: center;
                -webkit-mask-size: contain;
                mask-size: contain;
                -webkit-mask-image: url(../images/circle.svg);
                mask-image: url(../images/circle.svg);

                @media screen and (width>=1200px) {
                    &:is(li:hover &) {
                        animation: rotate-center 6s linear infinite both;
                    }
                    & img {
                        &:is(li:hover &) {
                            animation: rotate-center-rev 6s linear infinite both;
                        }
                    }
                }
            }
            &:has(+ .bd) .open {
                position: relative;
                display: grid;
                flex: 0 0 auto;
                aspect-ratio: 1/1;
                margin-left: auto;
                width: min(24px, 5vw);
                align-content: center;
                &::before,
                &::after {
                    position: relative;
                    content: '';
                    width: 100%;
                    height: 2px;
                    display: block;
                    transition: all .3s;
                    background-color: var(--cLTealStrong);
                }
                &::before {
                    rotate: -90deg;
                    margin-bottom: -2px;
                }
                &:is(.is-open)::after {
                    rotate: 0deg;
                }
            }
        }
        & .bd {
            overflow: hidden;
            transition: all .4s;
            font-size: min(14px, 4vw);
            & .text {padding-top: min(16px, 5vw);}
        }
    }
}
ul.cards-toggle .tp > p {margin: 0;}
/* slide-text */
.ct-slide-text {
    position: relative;
    height: 50px;
    overflow: hidden;
}
.ct-slide-text .slide-text * {line-height: 1;}
.slide-text {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
}
.slide-text > li { grid-area: 1 / 1 / 2 / 6;visibility:hidden;opacity:0;}
.slide-text:has( li.active) li ~ li { visibility:visible;opacity:1; }
.slide-text:has( li.active) li:not(.active){ visibility:hidden;opacity:0; }
/* Accordion */
.accordion {
    width: 100%;
    display: flex;
    row-gap: min(1rem,3vw);
    border-radius: 8px;
    flex-direction: column;
    counter-reset: nav-counter;
    filter: drop-shadow(0 4px 12px #0000000d);
    & .accordion-item {
        display: grid;
        overflow: hidden;
        border-radius: 5px;
        transition: all .2s;
        grid-template-rows: 3.2em 0fr;
        counter-increment: nav-counter;
        background-color: var(--cLWhite);
        &.is-open {grid-template-rows: 4.8em 1fr;}
        &:last-child {border-bottom: none;}
        & .accordion-header {
            display: flex;
            cursor: pointer;
            font-weight: 600;
            align-items: center;
            text-transform: uppercase;
            transition: all 0.3s ease;
            column-gap: min(1rem,2vw);
            justify-content: space-between;
            padding: min(0.7rem,3vw) min(1rem,5vw);
            &:is(.accordion-item.is-open &) {
                color: var(--cLWhite);
                background-color: var(--cLTealStrong);
            }
            & .accordion-icon {
                position: relative;
                flex: 0 0 auto;
                margin-left: auto;
                border-radius: 50%;
                width: min(32px,5vw);
                height: min(32px,5vw);
                color: var(--cLTealStrong);
                background-color: var(--cLWhite);
                border: 1px solid var(--cLTealStrong);
                &:is(.accordion-item.is-open &) {border: 1px solid var(--cLTealStrong);} 
                &::before {
                    position: absolute;
                    inset: 20%;
                    content: '';
                    display: block;
                    transition: initial;
                    pointer-events: none;
                    transition: all .3s;
                    background-color: currentcolor;
                    -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
                    -webkit-mask-size: contain;
                    mask-size: contain;
                    -webkit-mask-position: center;
                    mask-position: center;
                    -webkit-mask-image: url(../images/arrow-down-accordion.svg);
                    mask-image: url(../images/arrow-down-accordion.svg);
                }  
                &:is(.accordion-item.is-open &)::before {rotate: -180deg;} 
            }
        }
        & .accordion-content {
            overflow: hidden;
            background-color: var(--cLWhite);
            & .text {
                font-weight: 400;
                font-style: normal;
                font-size: var(--fs16);
                padding: min(20px,5vw);
            }
        }
    }
}
/* accordion sp */
.accordion-sp {
    & .accordion-item-sp {
        display: grid;
        transition: all .3s;
        grid-template-rows: 3.2em 0fr;
        &.is-open {grid-template-rows: 3.2em 1fr;}
        & .accordion-title-sp {
            font-weight: 700;
            transition: all .4s;
            letter-spacing: 0.4px;
            font-size: min(40px,7vw);
            color: var(--cLTealStrong);
            &:is(.accordion-item-sp.is-open &) {
                color: var(--cLYellowOlive);
                text-shadow: 4px 4px 4px rgba(158, 158, 158, 0.25);
                -webkit-text-stroke: 1px var(--cLWhite);
            }
        }
        & .accordion-content-sp {
            position: relative;
            overflow: hidden;
            & picture {border-radius: min(20px,4vw);}
        }
    }
}

/* product */
.product {
    position: relative;
    display: flex;
    cursor: pointer;
    transition: all .4s;
    border-radius: .6rem;
    row-gap: min(30px,5vw);
    flex-direction: column;
    width: min(267px,100%);
    font-size: var(--fs13);
    margin-top: min(4.7rem,20vw);
    background-color: var(--cLWhite);
    padding: calc(min(132px,min(70%,30vw)) / 1.3) min(20px,5vw) min(20px,5vw) min(20px,5vw);
    &:hover {background-color: var(--cL);}
    & picture {
        position: absolute;
        left: 50%;
        display: block;
        overflow: visible;
        margin-inline: auto;
        transform: translateX(-50%);
        width: min(132px,min(70%,30vw));
        height: min(132px,min(70%,30vw));
        top: calc(min(132px,min(70%,30vw)) / -2);
        &::before {
            position: absolute;
            content: '';
            inset: -15px -15px 15px 15px;
            background-color: currentColor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-image: url(../images/circle.svg);
            mask-image: url(../images/circle.svg);
        }
        &:is(.product:hover &::before) {rotate: -20deg;}
        & img {
            border-radius: 50%;
            object-fit: contain;
            transition: all .3s;
            &:is(.product:hover &) {
                scale: 1.15;
                filter: drop-shadow(0 0 6px var(--cL));
                animation: rotate-center 6s linear infinite both;
            }
        }
        &:is(.product:hover &::before) {rotate: -20deg;}
    }
    & .text-center {
        & * {
           &:is(.product:hover &:not(.btn-)) {color: #ffffff !important;} 
        }
    }
}
/* .product:hover [class^=text] *:not(.btn-) {color: #ffffff !important;} */
.product [class^=text] {row-gap:min(15px,3vw);}
.product[style] picture::before,
.product[style] .title {color: var(--cL);transition: all .4s;}
.product[style]:hover .title {color: inherit;}
.product [class^=text] > p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.product [class^=text] > .btn- {color: var(--cLWhite);}
.product:hover [class^=text] > .btn- {mix-blend-mode: hard-light;}
/* sc1 */
.sc1 {padding-block: min(174px,35vw) min(211px,22vw);}
.sc1 .ct-dc {z-index: 1;}
.sc1 .ct-dc .leaf {
    bottom: 50px;
    right: 268px;
    width: 122px;
    height: 103px;
}
.sc1 .cliping {
    display: block;
    transition: initial;
    pointer-events: none;
    background-color: currentcolor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    -webkit-mask-image: url(../images/bandeau-home.svg);
    mask-image: url(../images/bandeau-home.svg);
}
.sc1 .cliping::after {content: none;}
.sc1 .cliping img {object-position: 50% center;height: 101%;}
/* .sc1 .text > * {opacity: 0;} */
.sc1 h1 {line-height: 1;}
/* sc2 */
.sc2 {
    & .ct-dc {
        & .pistache {
            left: 268px;
            width: 87px;
            height: 144px;
            top: var(--sp5);
        }
    }
    & .container-xxxl {
        position: relative;
        & .wrapper-products {
            position: relative;
            filter: drop-shadow(0px 0px 20px var(--cLBlackTransparent13));
            & .swiper-products {
                position: relative;
                padding-top: min(10px,5vw);
                width: calc(100% + ((100vw - min(1346px,85vw)) / 2));
                & .product {height: auto;}
                @media screen and (width >= 1200px) {&{width: 100%;}}
            }
            & .pagination {
                position: absolute;
                top: 58%;
                left: 50%;
                height: 0;
                z-index: 1;
                width: min(111%,90vw);
                transform: translate(-50%);
                justify-content: space-between;
            }
        }
    }
}
/* sc3 */
.sc2:has(+.sc3) > * {padding-bottom: 0;}
.sc3:has(+.sc4) { margin-bottom: calc(min(6rem,10vw) * -1);}
.sc3 + .sc4 > * { padding-top: 0;}
.sc3 {z-index: 1;pointer-events: none;}
.sc3 > picture {
    position: relative;
    /* opacity: .2; */
    width: 1573px;
    margin-inline: auto;
    pointer-events: none;
    height: min(302px,55vw);
}
.sc3 > picture img {object-position: 80% top;}
/* sc4 */
.sc-bandeau + .sc4 > .ct-dc {display: none;}
.sc4 .ct-dc .line-yellow {
    top: 50%;
    left: -30px;
    width: 164px;
    height: 410px;
    translate: 0 -50%;
}
.sc4 > .row {
    position: relative;
    z-index: 2;
}
.sc4 svg.drow-count.mob-tab {
    display: block;
    margin-inline: auto;
    width: min(400px,73vw);
}
.sc4 .drow-count text {
    fill: var(--cLForestGreenDark);
    font-size: min(18px,5vw);
}
.sc4 .drow-count > path {pointer-events: none;}
.sc4 .drow-count g > path {fill:var(--th);}
.sc4 .drow-count text [data-count] {
    font-weight: 700;
    font-size: min(35px,10vw);
}
.sc4 .drow-count text .karma {font-size: min(34px,9vw);}
.sc4 .container-xxxl:has(  + .container-xxxl .drow-count) {
    position: relative;
    z-index: 1;
    margin-bottom:calc(min(5rem,10vw) * -1);
}
/* sc5 */
.sc5 [class^="row"] {gap: min(20px,5vw) 7%;}
.sc5 [class^="row"] .left {
    position: relative;
    display: grid;
    grid-gap: 0px;
    aspect-ratio: 1/1;
    flex: 1 1 max(200px,25%);
    grid-template-columns: repeat(40, 1fr);
    grid-template-rows: repeat(40, 1fr);
}
.sc5 [class^="row"] .left > .image { grid-area: 1 / 5 / 37 / 40; }
.sc5 [class^="row"] .left > .img_1 { grid-area: 14 / 1 / 19 / 8; }
.sc5 [class^="row"] .left > .img_2 { grid-area: 33 / 21 / 41 / 27; }
.sc5 [class^="row"] .left > .img_3 { grid-area: 31 / 29 / 41 / 34; }
.sc5 [class^="row"] .left img {object-fit: contain;}
.sc5 [class^="row"] .right {
    position: relative;
    flex: 1 1 max(350px,60%);
}
/* sc7 */
section:has(+ .sc7) {padding-bottom: 5rem;}
.sc7 + section {padding-top: 5rem;}
.sc7 {
    z-index: 3;
    margin-block: -5rem;
}
.sc7 [class^="row"] {
    color: var(--cLWhite);
    gap: min(30px,5vw) 10%;
    border-radius: min(10px,2vw);
    padding: min(2rem,4vw) min(3rem,4vw);
    background-color: var(--cLTealStrong);
    box-shadow: 0px 7px 20px 0px var(--cLBlackTransparent13);
}
.sc7 [class^="row"] > .left {flex: 1 1 max(300px,40%);}
.sc7 [class^="row"] > .right {flex: 0 0 auto;width: max-content;max-width: 100%;}
.sc7 [class^="row"] :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) {color: inherit;}
.sc7 [class^="row"] h3 {
    line-height: 1.5;
    font-size: var(--fs30);
}
/* sc8 */
/* .sc8 .text-center {opacity: 0;} */
.sc8 .step-sav {
    position: relative;
    margin-inline: auto;
    margin-block: 5rem;
    width: min(335.628px,100%);
}
.sc8 .step-sav > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: max-content;
    object-fit: cover;
    object-position: top center;
}
.sc8 .content-steps {
    position: relative;
    display: flex;
    margin-block: -5rem;
    row-gap: min(75px,15vw);
    flex-direction: column;
}
.sc8 .content-steps > li {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: min(23px,6vw);
}
.sc8 .content-steps :is(.pistachio,.line) {
    position: absolute;
}
.sc8 .content-steps :is(.pistachio,.line) img {object-fit: contain;}
.sc8 .content-steps li .line {rotate: initial !important;}
.sc8 .content-steps li:nth-child(1) .line {
    top: 72%;
    right: min(32px,7vw);
    height: min(77px,28vw);
    width: min(77px,28vw);
}
.sc8 .content-steps li:nth-child(2) .line {
    top: 56%;
    right: min(86%,290px);
    height: 100px;
    width: 45px;
}
.sc8 .content-steps li:nth-child(1) .pistachio {
    top: 64%;
    left: 59%;
    width: min(90px,23vw);
    height: min(88px,23vw);
}
.sc8 .content-steps > li .wp-img {position: relative;}
.sc8 .content-steps > li[style]:nth-child(1) .wp-img {filter: drop-shadow(-8px 8px 0px var(--th));}
.sc8 .content-steps > li[style]:nth-child(2) .wp-img {filter: drop-shadow(8px -8px 0px var(--th));}
.sc8 .content-steps > li[style]:nth-child(3) .wp-img {filter: drop-shadow(-1px 10px 0px var(--th));}
.sc8 .content-steps > li:nth-child(1) .wp-img {
    width: min(296px,60vw);
    height: min(228px,46vw);
}
.sc8 .content-steps > li:nth-child(2) .wp-img {
    width: min(224px,55vw);
    height: min(260px,70vw);
}
.sc8 .content-steps > li:nth-child(3) .wp-img {
    width: min(282px,70vw);
    margin-inline: auto;
    height: min(196px,50vw);
}
.sc8 .content-steps > li .wp-img > picture {
    width: 100%;
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.sc8 .content-steps > li .wp-img > picture img {cursor: pointer;}
.sc8 .content-steps > li:nth-child(1) .wp-img > picture{
    -webkit-mask-image: url(../images/mask-1.webp);
    mask-image: url(../images/mask-1.webp);
}
.sc8 .content-steps > li:nth-child(2) .wp-img > picture{
    -webkit-mask-image: url(../images/mask-2.webp);
    mask-image: url(../images/mask-2.webp);
}
.sc8 .content-steps > li:nth-child(3) .wp-img > picture{
    -webkit-mask-image: url(../images/mask-3.webp);
    mask-image: url(../images/mask-3.webp);
}
.sc8 .content-steps > li .ct-cricle {
    position: absolute;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc8 .content-steps > li:nth-child(1) .ct-cricle {
    left: 54%;
    top: 45%;
}
.sc8 .content-steps > li:nth-child(2) .ct-cricle {
    top: 14%;
    left: 49%;
}
.sc8 .content-steps > li:nth-child(3) .ct-cricle {
    left: 47%;
    top: 9%;
}
.sc8 .content-steps > li .flag {
    position: relative;
    width: 45px;
    height: 45px;
    display: block;
    z-index: 2;
    flex: 0 0 auto;
    overflow: hidden;
    aspect-ratio: 2/2;
    border-radius: 50%;
    margin-right: -13px;
    max-width: inherit;
}
.sc8 .content-steps > li .logo {
    position: absolute;
    top: 19px;
    left: 100%;
    width: 76px;
    height: 76px;
    display: block;
    z-index: 2;
    flex: 0 0 auto;
    aspect-ratio: 2/2;
    max-width: inherit;
}
.sc8 .content-steps > li .circle {
    position: relative;
    row-gap: 5px;
    display: flex;
    rotate: -7deg;
    line-height: 1;
    aspect-ratio: 2/2;
    text-align: center;
    align-items: center;
    height: min(98px,23vw);
    width: min(98px,23vw);
    padding: min(10px,4vw);
    font-size: var(--fs12);
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.sc8 .content-steps > li[style] .circle {background-color: var(--th);}
.sc8 .content-steps > li:hover .wp-img img {scale:1.1;}
.sc8 .content-steps > li .circle [style^="--icn"]::before {padding: 1.25rem;}
.sc8 .content-steps > li .circle * {margin-block: 0;}
.sc8 .content-steps > li [class^=text] {
    row-gap: 0;
    line-height: normal;
    width: min(241px,100%);
}
.sc8 .content-steps > li [class^=text] * {font-size: var(--fs16);}
.sc8 .content-steps > li:nth-child(2) [class^=text] {
    margin-left: auto;
    text-align: right;
}
.sc8 .content-steps > li h6 {
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

/* sc9 */
.sc9 [class^=row] {gap: min(43px,8vw) 5%;}
.sc9 [class^=row] > .left {flex: 1 1 max(253px,20%);}
.sc9 [class^=row] > .right {flex: 1 1 max(350px,75%);}
.sc9 .ct-articles {
    position: relative;
    width: 100vw;
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-left: -7.5vw;
    padding-inline: 7.5vw;
    scrollbar-width: none;
    scroll-behavior: smooth;
    column-gap: max(1.5rem,2%);
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: transparent transparent;
}
.sc9 .ct-articles::-webkit-scrollbar {display: none}
/* sc10 */
.sc10 .ct-dc .recipe-left {
    width: 297.967px;
    height: 297.967px;
    top: calc(280px / -2);
    left: calc(280px / -3);
}
.sc10 .ct-dc .line-right {
    z-index: 2;
    bottom: -43%;
    width: 152px;
    right: -2.3%;
    height: auto;
}
.sc10 .listing-circles {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: min(2rem,5vw) 5%;
}
.sc10 .listing-circles > li {
    position: relative;
    width: 47.5%;
    display: flex;
    align-items: center;
    row-gap: min(1rem,4vw);
    flex-direction: column;
}
.sc10 .listing-circles > li figure {
    position: relative;
    display: block;
    overflow: visible;
    aspect-ratio: 1/1;
    width: min(236.419px,35vw);
    height: min(236.419px,35vw);
}
.sc10 .listing-circles > li figure::before {
    position: absolute;
    inset: 10%;
    content: '';
    transition: all .3s;
    filter: opacity(0.4);
    background-color: var(--cLYellowOlive);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.sc10 .listing-circles > li:hover picture {animation: rotate-center 6s linear infinite both;}
.sc10 .listing-circles > li:hover picture img {animation: rotate-center-rev 6s linear infinite both;}
.sc10 .listing-circles > li:hover figure::before {inset: -1rem 0px 10px -1rem;}
.sc10 .listing-circles > li  picture {
    width: 100%;
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.sc10 .listing-circles h6 {color: inherit;}
.sc10 ul.products {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: min(2rem,8vw) 5%;
}
.sc10 ul.products > li {
    position: relative;
    width: 100%;
    display: flex;
    transition: all .3s;
    align-items: center;
    flex-direction: column;
}
.sc10 ul.products > li:has( a):hover {scale: 1.03;}
.sc10 ul.products > li[style^="--th"] figure {color: var(--th);}
.sc10 ul.products > li figure {
    z-index: 1;
    flex: 0 0 auto;
    overflow: visible;
    width: min(132px, min(70%, 30vw));
    height: min(132px, min(70%, 30vw));
}
.sc10 ul.products > li picture {
    position: relative;
    display: block;
    overflow: visible;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
}
.sc10 ul.products > li picture::before {
    position: absolute;
    content: '';
    transition: all .4s;
    inset: -15px -15px 15px 15px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.sc10 ul.products > li picture img {
    object-fit: contain;
}
.sc10 ul.products > li [class^="text"] {
    position: relative;
    display: flex;
    flex: 1 1 100%;
    aspect-ratio: 1/1;
    align-items: center;
    row-gap: min(1rem,4vw);
    flex-direction: column;
    padding: min(1rem,5vw);
    width: min(223px, 100%);
    justify-content: center;
    margin-top: calc(min(3rem,13vw) * -1);
    background-color: var(--cLMintBackground);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.sc10 ul.products > li [class^="text"] > img {
    position: relative;
    height: 40px;
    max-width: initial;
    object-fit: contain;
    width: min(200px,70%);
}
.sc10 ul.products > li h6 {color: var(--cLForestGreenDark);}
/* sc11 */
section:has( + .sc11) {padding-bottom: min(20rem,100vw);}
.sc11 + section {padding-top: min(20rem,100vw);}
@media screen and (width>900px) {
    section:has( + .sc11) {padding-bottom: min(10rem,15vw);}
    .sc11 + section {padding-top: min(10rem,15vw);}
}
.grid-activity {
    display: flex;
    flex-wrap: wrap;
    row-gap: min(2rem,5vw);
}
.sc11 {
    height: 0;
    /* opacity: 0; */
    z-index: 2;
    display: flex;
    /* visibility: hidden; */
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.sc11[style^="--h"] {
    opacity: 1;
    visibility: visible;
}
.sc11 [class^=row] {
    gap: min(60px,15vw) 5%;
    justify-content: space-between;
}
.sc11 [class^=row] .box {
    position: relative;
    flex: 1 1 max(200px,20%);
}
.sc11 .box [class^=text] {
    position: relative;
    row-gap: 2px;
    transition: all .3s;
    margin-inline: auto;
    padding: min(1rem,5vw);
    width: min(260px,100%);
    font-size: min(19px,4vw);
    border-radius: min(10px,3vw);
    background-color: var(--cLWhite);
    border: 1px solid var(--cLTealStrong);
}
.sc11 .box [class^=text]:hover {scale: 1.04;}
.sc11 .box [class^=text] > .ttl-22 {font-size:inherit;text-transform: uppercase;}
body:has( #page_theme) .sc11 .box .text-center > strong {color: var(--page_theme) !important;}
.sc11 .line-arrow.next {
    position: absolute;
    top: 96%;
    right: 79%;
    rotate: 80deg;
    width: min(130px,20vw);
    height: min(62px,15vw);
}
.sc11 .line-arrow.back {
    position: absolute;
    bottom: 101%;
    left: 78%;
    rotate: 70deg;
    width: min(140px,20vw);
    height: min(70px,15vw);
}
.sc11 .content {
    position: relative;
    z-index: 1;
    padding: min(60px,12vw);
    flex: 1 1 min(300px,40%);
}
.sc11 .content [class^=text] {
    row-gap: min(20px,4vw);
    width: min(260.031px,100%);
}
.sc11 .content::before {
    position: absolute;
    inset: -7%;
    content: '';
    z-index: -1;
    pointer-events: none;
    background-color: var(--cLYellowOlive);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
body:has( #page_theme) .sc11 .content::before {background-color: var(--page_theme);}
.sc11 .content .text .karma {
    font-weight: 400;
    text-align: center;
    font-size: min(50px,11vw);
}
.sc11 .content .text .listing-spec {
    display: flex;
    row-gap: min(20px,3vw);
    flex-direction: column;
    font-size: var(--fs13);
}
.sc11 .content .text * {color: var(--cLWhite) !important;}
.sc11 .content .text [style^="--icn"]::before {
    color: var(--page_theme,var(--cLForestGreenDark));
} 
.sc11 .content .text .listing-spec > div {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: min(12px,3vw);
}
.sc11 .content .listing-spec > div > [style^="--icn"] {
    background-color: var(--cLWhite);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.sc11 .content .listing-spec > div > [style^="--icn"]::before {
    scale: 0.55;
    padding: min(1.85rem,7vw);
}
.sc11 .content .text .listing-spec > div > div > * {margin: 0;}
.sc11 .content .listing-spec > div strong {display: block;}
.sc11 .content .listing-spec > div ul {margin: 0;}
/* sc12 */
body:has( #page_theme) .sc12 .text-center .karma {color: var(--page_theme) !important;}
.sc12 .ct-dc > .dc1 {
    top: 11%;
    right: 94%;
    opacity: 0;
    width: auto;
    height: auto;
}
.sc12 .ct-dc > .dc2 {
    top: 50%;
    right: 92%;
    opacity: 0;
    width: min(300px,20vw);
    height: min(300px,20vw);
}
.sc12 .table {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.sc12 .table > .col {
    position: relative;
    width: 50%;
    text-align: center;
}
.sc12 .table > .col:nth-child(odd) {border-right: 1px solid var(--cLMintPastel);}
.sc12 .table > .col .th {
    position: relative;
    z-index: 1;
    display: flex;
    column-gap: 8px;
    font-weight: 600;
    align-items: center;
    font-size: var(--fs15);
    justify-content: center;
    color: var(--cLForestGreenDark);
    padding: min(10px,3vw) min(10px,3vw) 15px;
    border-bottom: 1px solid var(--cLMintPastel);
}
.sc12 .table > .col .th::before {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    inset: -5px 0 5px;
    background-color: var(--cLMintLight);
}
.sc12 .table > .col .th [style^="--icn"]::before {padding: 1.125rem;}
.sc12 .table > .col .tb {
    position: relative;
    font-size: var(--fs14);
    padding: min(10px,3vw);
}
/* sc13 */
.sc13 .row {flex-direction: column-reverse;}
.sc13 .ct-dc > .dc1 {
    top: 63%;
    left: 89%;
    z-index: 1;
    mix-blend-mode: multiply;
}
.sc13 .ct-dc .dc2 {
    left: 93.5%;
    top: -25%;
    z-index: 2;
    width: 152px;
    height: auto;
}
.sc13 [class^=row] {
    gap: min(100px,25vw) 10%;
    /* gap: min(30px,7vw) 10%; */
}
.sc13 [class^=row] .left {
    position: relative;
    z-index: 1;
    flex: 1 1 max(350px,43%);
}
.description-tabs {
    @media screen and (width<1024px) {
        & > .tabs-onglet {order: 0;}
        & > *:not(.tabs-onglet) {order: 2;}
    }
}
.tabs-onglet {
    position: relative;
    display: grid;
    gap: min(28px,3vw) 5%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    & .item {
        position: relative;
        display: grid;
        transition: all .3s;
        grid-template-rows: 3em 0fr;
        &.is-open {grid-template-rows: 3em 1fr;}
        & .buton {
            position: relative;
            z-index: 1;
            cursor: pointer;
            font-weight: 600;
            transition: all .3s;
            border-radius: 2rem;
            text-transform: uppercase;
            font-size: min(16px,4vw);
            background-color: transparent;
            color: var(--cLForestGreenDark);
            border: .065rem solid var(--cLForestGreenDark);
            padding: min(10px,3vw) min(20px,3vw) min(10px,3vw) min(25px,3vw);
            &:is(.item.is-open &) {
                color: var(--cLWhite);
                background-color: var(--page_theme,var(--cLYellowOlive));
                border: .065rem solid var(--page_theme,var(--cLYellowOlive));
            }
        }
        & .fleche {
            position: absolute;
            left: 8%;
            width: 20vw;
            bottom: 100%;
            height: 60vw;
            visibility: hidden;
            transition: all 0s;
            pointer-events: none;
            border-bottom: none;
            border-right: none;
            border: 2px solid var(--page_theme,var(--cLYellowOlive));
            border-right: none;
            border-bottom: none;
            &::after {
                position: absolute;
                top: -8px;
                right: -5px;
                content: '';
                width: 15px;
                height: 15px;
                display: block;
                border-radius: 50%;
                background-color: var(--page_theme,var(--cLYellowOlive));
            }
            &:is(.item.is-open &) {
                visibility: visible;
                transition: all .3s .3s;
            }
            @media screen and (width>1024px) {
                & {
                    left: 60%;
                    border-right: none;
                    border-bottom: none;
                    height: min(30px,10vw);
                    width: min(600px,300%);
                    transform: skewX(322deg);
                    border-top: 2px solid var(--page_theme,var(--cLYellowOlive));
                    border-left: 2px solid var(--page_theme,var(--cLYellowOlive));
                    &::after {transform: skewX(37deg);}
                }
            }
        }
        & > .text {
            overflow: hidden;
            padding-top: min(10px,5vw);
            font-size: min(14px, 4vw);
        }
    }
}
.sc13 [class^=row] .right {
    position: relative;
    flex: 1 1 max(300px,40%);
}
.sc13 .right > div {
    position: relative;
    aspect-ratio: 1/1;
    margin-inline: auto 0;
    width: min(500px,100%);
}
.sc13 .right > div::before {
    position: absolute;
    content: '';
    transition: all .4s;
    filter: opacity(0.4);
    background-color: var(--cLYellowOlive);
    inset: calc(min(40px,4vw) * -1) 0px 10px calc(min(75px,5vw) * -1);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
body:has( #page_theme) .sc13 .right > div::before {background-color: var(--page_theme);}
.sc13 .right > div picture {
    aspect-ratio: 1/1;
    height: auto;
    /* width: min(440.318px,100%); */
}
.sc13 .right > div picture img {
    object-fit: contain;
}
/* sc15 */
.sc15 .ban {
    position: relative;
    margin-top: 3rem;
    padding: min(30px,5vw);
    border-radius: min(10px,4vw);
    filter: drop-shadow(0px 7px 24px var(--cLBlackTransparent13));
}
.sc15 .row {
    align-items: center;
    gap: min(28px,5vw) 5%;
}
.sc15 .row > picture {
    position: relative;
    margin-top: -3rem;
    flex: 1 1 max(234px,30%);
    transform: rotate(-4.238deg);
}
.sc15 .row > .text {
    position: relative;
    flex: 1 1 max(300px,40%);
}
.sc15 .row > .ct-btn {
    position: relative;
    flex: 0 0 auto;
}
.sc15 .row :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) {color: inherit;}
.sc15 .arrow-to-rg {
    position: absolute;
    right: 80%;
    bottom: 153%;
    width: min(103.72px,20vw);
    transform: rotateY(180deg) rotate(53deg) !important;
}
/* sc16 */
.sc16 .ct-dc > .pistache-left {
    bottom: 24%;
    width: 165.348px;
    height: 108.951px;
    left: calc(min(700px,50vw) * -1 + 50vw);
}
.sc16 .ct-dc > .pistache-right {
    bottom: 26%;
    width: 66.438px;
    height: 100.958px;
    left: calc(min(600px,50vw) + 50vw);
}
.sc16 .ct-dc > .recipe-right  {
    width: 280px;
    height: 285px;
    top: calc(280px / -3);
    right: calc(280px / -3);
}
.sc16 [class^="text"] {color: var(--cLCocoaCream);}
.sc16 [class^="text"] p > strong {color: var(--cLCharcoal);}
.listing-articles-cards {
    position: relative;
    z-index: 2;
    display: grid;
    justify-content: center;
    gap: min(2rem,10vw) 5%;
    grid-template-columns: repeat(auto-fit, minmax(min(365px,100%), min-content));
    & .articles-cards {
        position: relative;
        cursor: pointer;
        & picture {
            aspect-ratio: 2/2;
            width: 100%;
            height: min(350px,60vw);
            border-radius: min(10px,3vw);
            & img {scale: 1.02;}
            &  h3 {
                position: absolute;
                bottom: 0;
                left: 50%;
                z-index: 2;
                text-align: center;
                aspect-ratio: 2/0.2;
                font-size: min(22px,4vw);
                padding: min(0.7rem,3vw) min(1.5rem,5vw);
                text-transform: uppercase;
                transform: translateX(-50%);
                &::before {
                    position: absolute;
                    content: '';
                    inset: 0 -8% 0;
                    z-index: -1;
                    display: block;
                    pointer-events: none;
                    background-color: var(--cLWhite);
                    -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
                    -webkit-mask-size: contain;
                    mask-size: contain;
                    -webkit-mask-position: center bottom;
                    mask-position: center bottom;
                    -webkit-mask-image: url(../images/mask-card-title.svg);
                    mask-image: url(../images/mask-card-title.svg);
                }
            }
        }
        & [class^="text"] {
            position: relative;
            row-gap: 5px;
            line-height: 1.4;
            padding: min(1rem,5vw);
            color: var(--cLCharcoal);
            font-size: min(16px,4vw);
        }
    }
}
/* sc17 */
section:has(+ .sc17) {padding-bottom:min(10rem,15vw);}
section:has(+ .sc17) {padding-bottom:min(10rem,15vw);}
.sc17 {
    position: relative; 
    color: var(--cLWhite);
    margin-top: calc(min(10rem,15vw) * -1);
}
.sc17 .container-xl {position: relative;}
.sc17 .cliping {border-radius: min(15px,3vw);}
.sc17 .cliping img {filter: brightness(0.8);}
.sc17 :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) > *:not([class]),
.sc17 :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) {color: inherit;}
.sc17 + footer {margin-top: min(5rem,10vw);}
.sc17 + section {
    padding-top:min(10rem,15vw);
    margin-bottom: calc(min(10rem,15vw) * -1);
}
/* sc18 */
.sc18 .row {
    position: relative;
    gap: min(2rem,5vw) 5%;
}
.sc18 .row > :is(.left,.right) {flex: 1 1 300px;}
.grid-icons {
    position: relative;
    display: grid;
    gap: min(1rem,5vw) 3%;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(min(200px,100%), min-content));
    & .icone-item {
        position: relative;
        display: grid;
        font-weight: 700;
        text-align: center;
        place-items: center;
        justify-content: center;
        align-items: self-start;
        font-size: min(16px,4vw);
        & [style^="--icn"] {
            position: relative;
            width: max-content;
            color: var(--cLMediumTeal);
            background-color: var(--cLWhite);
            background-color: var(--cLMintBackground);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-image: url(../images/circle.svg);
            mask-image: url(../images/circle.svg);
        }
        & [style^="--icn"]::before {
            scale: .59;
            padding: min(3.5625rem,12vw); 
        } 
    }
}
/* .sc18 .listing > li {
    position: relative;
    flex: 1 1 40%;
    display: flex;
    font-weight: 700;
    align-items: center;
    row-gap: min(1rem,3vw);
    flex-direction: column;
    justify-content: center;
    font-size: min(16px,4vw);
}
.sc18 .listing [style^="--icn"] {
    position: relative;
    width: max-content;
    color: var(--cLMediumTeal);
    background-color: var(--cLWhite);
    background-color: var(--cLMintBackground);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.sc18 .listing [style^="--icn"]::before {
    scale: .59;
    padding: min(3.5625rem,12vw);
} */
/* sc19 */
.sc19 .ct-dc > .recipe-left {
    width: 297.967px;
    height: 294.999px;
    bottom: 0;
    left: calc(297.967px / -2);
}
.sc19 .ct-dc > .recipe-right {
    width: 297.967px;
    height: 294.999px;
    top: calc(297.967px / -3.5);
    right: calc(297.967px / -3.5);
}
.sc19 .row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    gap: min(1rem,5vw) 6%;
}
.sc19 .row picture {
    position: relative;
    border-radius: min(20px,4vw);
}
/* sc22 */
section:has(+ section .circle-icn) {padding-bottom: var(--sp5);}
.sc22:has( .circle-icn) > .container-xl {padding-top: 0;}
.sc22 .circle-icn[style^="--icn"] {
    position: relative;
    z-index: 1;
    color: var(--cLTealStrong);
    margin-bottom: calc(min(37px,4vw) * -1.2);
}
.sc22 .circle-icn[style^="--icn"] ~ *{
    position: relative;
    z-index: 2;
}
.sc22 .circle-icn[style^="--icn"]::before {
    translate: 0 -100%;
    padding: min(1.825rem,6vw);
}
.sc22 .circle-icn[style^="--icn"]::after {
    position: absolute;
    inset: 0;
    scale: 4.5;
    content: '';
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    transform-origin: center 35%;
    background-color: var(--cLWhite);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
/* .sc2 .text-center {opacity: 0;} */
/* sc23 */
.sc23 {
    & .pagination {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 0;
        z-index: 1;
        width: min(115%,95vw);
        transform: translate(-50%);
        justify-content: space-between;
        & .arrow {
            width: 0;
            height: 0;
            padding: min(1.0375rem,4.5vw);
        }
    }
}
.logo-item {
    position: relative;
    display: block;
    height: 71.022px;
    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
/* sc24 */
.sc24 .ct-dc .line-right {
    top: -50%;
    width: 120px;
    right: -1.3%;
    height: 100%;
}
.sc24 .ct-dc .plant-left {
    left: 45px;
    bottom: 10%;
    width: 157px;
    height: 234px;
}
.sc24 .ct-dc .line-right {
    top: -50%;
    width: 120px;
    right: -1.3%;
    height: 100%;
}
.content-filter  {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    & .item-filter {
        position: relative;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        grid-area: 1 / 1 / 2 / 2;
        & picture {
            position: relative;
            aspect-ratio: 1.2/1;
            height: min(317px,60%);
            border-radius: min(20px,4vw);
            background-color: currentcolor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: fill;
            mask-size: fill;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-image: url(../images/Rectangle-mask.webp);
            mask-image: url(../images/Rectangle-mask.webp);
        }
        & .text { 
            position: relative;
            z-index: 1;
            width: min(347px,60%);
            padding: min(20px,5vw);
            font-size: min(14px,3.8vw);
            border-radius: min(20px,4vw);
            background-color: var(--cLWhite);
            margin: calc(min(78px,10vw) * -1) 0 0 auto;
            & .ttl {
                font-weight: 700;
                font-size: min(18px,4vw);
                text-transform: uppercase;
                margin-bottom: calc(min(37px,4vw) / -2);
            }
        }
        &.is-active {
            opacity: 1;
            visibility: visible;
        }
    }
}
.filter-nav {
    position: relative;
    display: flex;
    column-gap: 5%;
    flex-wrap: wrap;
    align-items: center;
    & li {
        cursor: pointer;
        font-weight: 700;
        line-height: 1.3;
        transition: all .4s;
        letter-spacing: 0.4px;
        font-size: min(38px,7vw);
        text-transform: uppercase;
        color: var(--cLTealStrong);
        &.is-active {
            color: var(--cLYellowOlive);
            text-shadow: 4px 4px 4px rgba(158, 158, 158, 0.25);
            -webkit-text-stroke: 1px var(--cLWhite);
        }
    }
}
.sc24 {
    & .grid {
        display: grid;
        gap: min(2rem,5vw) 5%;
        grid-template-columns: minmax(0, 55%) minmax(0, 40%);
        @media (width<1200px) {
            & {
                grid-template-columns: 1fr;
            }
        }
    }
}
/* sc26 */
.sc26 .row {
    gap: min(2rem,5vw) 5%;
}
.sc26 .row .left {flex: 1 1 max(350px,45%);}
.sc26 .left .flex {
    position: relative;
    align-items: center;
    gap: min(1rem,5vw) 5%;
}
.sc26 .left .flex > picture {
    position: relative;
    max-width: max(200px,30%);
    flex: 1 1 max(200px,30%);
}
.sc26 .left .flex > .text {
    flex: 1 1 max(300px,60%);
}
.sc26 .row .right {
    flex: 1 1 max(350px,40%);
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
}
.sc26 .row .right .carte { grid-area: 1 / 1 / 21 / 21; }
.sc26 .row .right > .carte img { object-fit: contain;}
.sc26 .row .right > .image {
    width: 100%;
    height: 100%;
    top: -10%;
    grid-area: 5 / 14 / 12 / 21;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
/* sc27 */
.sc27 .ct-dc > .recipe-left {
    width: 297.967px;
    height: 294.999px;
    top: calc(297px / -2);
    left: calc(297px / -3);
}
.sc27 .ct-dc > .line-right {
    top: -15%;
    width: 120px;
    right: -1.3%;
    height: 100%;
}
.sc27 .row {
    position: relative;
    gap: min(2rem,5vw) 5%;
    align-items: center;
}
.sc27 .row picture {border-radius: min(10px,4vw);}
.sc27 .row .left {position: relative;}
.sc27 .row .left::after {
    position: absolute;
    content: '';
    top: 88%;
    left: -13%;
    pointer-events: none;
    background-size: contain;
    width: min(144.463px,20vw);
    height: min(144.463px,20vw);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotateX(180deg) rotate(300deg);
    background-image: url(../images/arrow-to-left.svg);
}
/* sc28 */
.sc28 + footer {z-index: 4;}
.sc28:has(+footer) {z-index: inherit;}
.sc28:has(+footer) .row > div {padding-block: min(5rem,10vw) min(20rem,20vw);}
.sc28 .row > div {
    position: relative;
    flex: 1 1 max(350px,50%);
    padding-block: min(5rem,10vw);
}
.sc28 .row > div picture {
    position: absolute;
    inset-block: 0;
    left: -7.5vw;
    width: 100vw;
    max-width: inherit;
    pointer-events: none;
}
.sc28 .row > div picture::after {
    position: absolute;
    inset: 0;
    content: '';
    pointer-events: none;
    mix-blend-mode: multiply;
    background-color: rgb(0 0 0 / 30%);
}
.sc28 .row > div .text {
    position: relative;
    z-index: 1;
    color: var(--cLWhite);
}
.sc28 .row > div .text ul {
    padding: 0;
    list-style: none;
}
.sc28 .row > div .text ul > li {
    padding-block: min(.8rem,4vw);
    border-bottom: 1px solid var(--cLMintPastel);
}
.sc28 .row > div .text :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) {color: inherit;}
@media screen and (max-width:700px) {
    .sc1 .text {width: min(571px,80%);margin-left: auto;}
    .sc1 .text h1 > * {font-size: min(20px, 5vw);}
    .sc1 .text [class^=btn-] {text-align: left;}
}
@media screen and (min-width:700px) {
     /* sc10 */
    .sc10 ul.products > li {width: 30%;}
}
@media screen and (min-width:1000px) {
    /* sc3 */
    .sc3 > picture img {object-position: center;}
}
@media (min-width:1024px) {
    .mob-tab {display: none !important}
    /* sc3 */
    .sc2 + .sc3 { margin-top: calc(min(4rem,10vw) * -1);}
    /* sc4 */
    .sc4 .drow-count {
        position: relative;
        margin-block: max(-6vw,-7rem) calc(var(--sp9) * -1);
    }
    .sc-bandeau + .sc4 .drow-count {margin-block: 0;}
    /* sc8 */
    .sc8 .step-sav > svg {
        position: relative;
        height: 100%;
    }
    .sc8 .content-steps {
        position: absolute;
        inset: 0;
        margin-block: 0;
    }
    .sc8 .content-steps > li {position: absolute; }
    .sc8 .content-steps > li:nth-child(2) {
        top: 35%;
        right: 0;
        left: initial;
        transform: translateY(-50%);
    }
    .sc8 .content-steps > li:nth-child(3) {
        left: 0%;
        bottom: 0;
    }
    .sc8 .step-sav {
        width: 100%;
        margin-block: 0;
    }
    .sc8 .content-steps > li [class^=text] {position: absolute;}
    .sc8 .content-steps > li:nth-child(1) [class^=text] {
        top: 69%;
        left: 85%;
    }
    .sc8 .content-steps > li:nth-child(2) [class^=text] {
        top: 65%;
        right: 102%;
    }
    .sc8 .content-steps > li:nth-child(3) [class^=text] {
        top: 41%;
        left: 106%;
    }
    .sc8 .content-steps > li:nth-child(3) .ct-cricle {
        left: 35%;
        top: 1%;
    }
    .sc8 .content-steps > li:nth-child(1) .ct-cricle {
        left: 60%;
        top: 73%;
    }
    .sc8 .content-steps > li:nth-child(2) .ct-cricle {
        top: 44%;
        left: 3%;
    }
    .sc8 .content-steps li:nth-child(1) .pistachio {
        top: min(58px,3.6vw);
        left: min(400px,27vw);
        width: min(130px,23vw);
        height: min(122px,23vw);
    }
    .sc8 .content-steps li:nth-child(1) .line {
        top: min(50px,3vw);
        left: min(569px,37vw);
        height: min(31px,3vw);
        /* rotate: -4deg !important; */
        width: min(335.628px,13vw);
    }
    .sc8 .content-steps li:nth-child(2) .pistachio:nth-of-type(1) {
        rotate: 11deg;
        top: min(48px,1.6vw);
        left: -49px;
        width: min(72px,23vw);
        height: min(48px,23vw);
    }
    .sc8 .content-steps li:nth-child(2) .pistachio:nth-of-type(2) {
        top: min(467px,31vw);
        left: max(-159px,-8vw);
        width: min(70px,23vw);
        height: min(51px,23vw);
    }
    .sc8 .content-steps li:nth-child(2) .line {
        /* rotate: 1deg; */
        top: min(478px, 31vw);
        left: max(-408px, -22vw);
        height: min(28px, 3vw);
        width: min(335.628px, 13vw);
    }
    .sc8 .content-steps li:nth-child(3) .pistachio {
        top: 10%;
        left: min(342px,24vw);
        width: min(61px,23vw);
        height: min(61px,23vw);
    }
    .sc8 .ct-dc .plant {
        left: 85px;
        top: -45px;
        width: 119.002px;
        height: 177.016px;
    }
    .sc8 .ct-dc .recipe {
        right: -61px;
        top: 22px;
        width: 280px;
        height: 285px;
    }
    .sc8 .ct-dc .bag {
        right: 200px;
        bottom: -45px;
        width: 174.022px;
        height: 160.927px;
    }
    .sc8 .ct-dc .line-curve {
        right: -30px;
        top: 176px;
        width: 152px;
        height: 978.5px;
    }
    /* sc10 */
    .sc10 .listing-circles > li {width: 30%;}
    /* sc11 */
    .sc11 .line-arrow.next {
        position: absolute;
        top: 120%;
        right: -5%;
        rotate: 0deg;
    }
    .sc11 .line-arrow.back {
        position: absolute;
        left: -5%;
        bottom: 120%;
        rotate: 0deg;
    }
    /* sc12 */
    .sc12 .table > .col {width: 33.333%;}
    .sc12 .table > .col:nth-child(odd) {border-right: initial;}
    .sc12 .table > .col:nth-child(3n + 1), .sc12 .table > .col:nth-child(3n + 2) {border-right: 1px solid var(--cLMintPastel);}
    /* sc13 */
    .sc13 .row {
        align-items: center;
        flex-direction: inherit;
    }
    /* sc21 */
    .sc21 .ct-dc {inset: calc(min(110px,10vw) * -1) 0 0;}
    .sc21 .ct-dc .recipe {
        top: 0;
        left: -120px;
        width: 297.967px;
        height: 297.967px;
    }
    /* sc28 */
    .sc28 .row > div picture {left: 0;width: 50vw;}
    .sc28 .row > div:nth-child(odd) picture {right: 0;left: inherit;}
    .sc28 .row > div .text {padding-inline: min(5rem,5vw);}
    .sc28 .row > div:nth-child(odd)  .text {padding-left: 0;}
}
@media screen and (min-width:1200px) {
    /* .ct-slider { overflow: hidden; } */
    .sc8 .content-steps > li:nth-child(1) .wp-img {
        width: min(405px,60vw);
        height: min(311px,46vw);
    }
    .sc8 .content-steps > li:nth-child(2) .wp-img {
        width: min(317px,55vw);
        height: min(365px,70vw);
    }
    .sc8 .content-steps > li:nth-child(3) .wp-img {
        width: min(393px,70vw);
        height: min(273px,50vw);
    }
    /* sc9 */
    .sc9 .ct-articles {
        width: 100%;
        column-gap: 2%;
        margin-left: 0;
        padding-inline: 0;
    }
    /* sc12 */
    /* .sc2 .ct-slider > .product {width: 23.7%;} */
    .sc12 .table > .col {width: 20%;}
    .sc12 .table > .col:nth-child(3n + 1), .sc12 .table > .col:nth-child(3n + 2) {border-right: initial;}
    .sc12 .table > .col:not(:nth-child(5n+1)) {border-left: 1px solid var(--cLMintPastel);}
    /* sc14 */
    /* .sc14 .cards-toggle {
        justify-content: center;
    } */
    /* sc15 */
    .sc15 .ban { margin-top: 0;}
    .sc15 .row > picture {
        margin-top: 0;  
        margin-block: calc(min(3rem,5vw) * -1);
    }
    .sc15 .arrow-to-rg {
        width: 111px;
        object-fit: none;
        object-position: right bottom;
        transform: rotate(3deg) !important;
    }
    /* sc22 */
    .sc22 .circle-icn[style^="--icn"]::after {scale: 6;}
    /* sc27 */
    .sc27 .row .left::after {
        top: 10%;
        left: 86%;
        transform: inherit;
    }
}
@media screen and (min-width:1300px) {
    /* sc10 */
    .sc10 .listing-circles > li {width: 21.25%;}
}