::selection {
    color: #fff;
    background-color: #ffd372
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: 0;
    margin: 0;
    padding: 0;
    border: 0
}

:root {
    --wrapper: 94.6vw;
    --gutter: 2.7vw;
    --col: calc((var(--wrapper) - 11*var(--gutter))/12);
    --col-2: calc(var(--col)*2 + var(--gutter));
    --col-3: calc(var(--col)*3 + 2*var(--gutter));
    --col-4: calc(var(--col)*4 + 3*var(--gutter));
    --col-5: calc(var(--col)*5 + 4*var(--gutter));
    --col-6: calc(var(--col)*6 + 5*var(--gutter));
    --col-7: calc(var(--col)*7 + 6*var(--gutter));
    --col-8: calc(var(--col)*8 + 7*var(--gutter));
    --col-9: calc(var(--col)*9 + 8*var(--gutter));
    --col-10: calc(var(--col)*10 + 9*var(--gutter));
    --col-11: calc(var(--col)*11 + 10*var(--gutter));
    --col-12: calc(var(--col)*12 + 11*var(--gutter));
    --cg1: calc((var(--wrapper) - 11*var(--gutter))/12 + var(--gutter));
    --cg2: calc(var(--col)*2 + var(--gutter) + var(--gutter));
    --cg3: calc(var(--col)*3 + 2*var(--gutter) + var(--gutter));
    --cg4: calc(var(--col)*4 + 3*var(--gutter) + var(--gutter));
    --cg5: calc(var(--col)*5 + 4*var(--gutter) + var(--gutter));
    --cg6: calc(var(--col)*6 + 5*var(--gutter) + var(--gutter));
    --cg7: calc(var(--col)*7 + 6*var(--gutter) + var(--gutter));
    --cg8: calc(var(--col)*8 + 7*var(--gutter) + var(--gutter));
    --cg9: calc(var(--col)*9 + 8*var(--gutter) + var(--gutter));
    --cg10: calc(var(--col)*10 + 9*var(--gutter) + var(--gutter));
    --cg11: calc(var(--col)*11 + 10*var(--gutter) + var(--gutter));
    --cg12: calc(var(--col)*12 + 11*var(--gutter) + var(--gutter))
}

@media (max-width: 767px) {
    :root {
        --wrapper: calc(100vw - 40px);
        --gutter: 20px
    }
}

html[lang=en] .visibleFR,
html[lang=fr] .visibleEN {
    display: none !important
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent
}

ul {
    list-style-type: none
}

button {
    cursor: pointer;
    background: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    -webkit-tap-highlight-color: transparent;
    color: inherit
}

.a {
    position: absolute
}

.r {
    position: relative
}

.f {
    position: fixed
}

.s {
    position: sticky
}

.flex {
    display: flex
}

.flexCe {
    align-items: center
}

.flexCl {
    flex-direction: column
}

.flexFe {
    align-items: flex-end
}

.flexJCe {
    justify-content: center
}

.flexJFe {
    justify-content: flex-end
}

.flexWr {
    flex-wrap: wrap
}

.flexSb {
    justify-content: space-between
}

.h100 {
    height: 100vh
}

.wrap {
    width: 100%;
    padding-inline: 2.7vw !important
}

@media (max-width: 767px) {
    .wrap {
        padding-inline: 20px !important
    }
}

.wrap2 {
    width: var(--col-6);
    margin: 0 auto;
    min-width: 600px
}

@media (max-width: 767px) {
    .wrap2 {
        width: var(--wrapper);
        min-width: initial
    }
}

#preview-bar-iframe,
#admin-bar-iframe {
    display: none !important
}

html,
body {
    width: 100%;
    min-height: 100%
}

html {
    scroll-behavior: initial
}

body {
    font: 400 normal clamp(18px, 1.98vw, 38px)/1.16 "Neue Montreal 2020";
    background: #fef7e6;
    color: #0e0e0e
}

.titre {
    font: 300 normal clamp(65px, 16.2vw, 317px)/.85 "Neue Montreal 2020";
    text-transform: uppercase
}

.titre2 {
    font: 300 normal clamp(65px, 11.5vw, 222px)/1 "Neue Montreal 2020";
    text-transform: uppercase
}

.titreContent {
    font: 300 normal clamp(36px, 10vw, 200px)/1 "Neue Montreal 2020";
    text-transform: uppercase
}

.titreProduit {
    font: 300 normal clamp(40px, 3.96vw, 76px)/.85 "Neue Montreal 2020";
    text-transform: uppercase
}

.sousTitre {
    font: 300 normal clamp(18px, 2.77vw, 53px)/1 "Neue Montreal 2020";
    text-transform: uppercase
}

.grosTitre {
    font: 300 normal clamp(80px, 23.2vw, 446px)/1 "Neue Montreal 2020";
    text-transform: uppercase
}

@media (max-width: 767px) {
    .grosTitre {
        font-size: 80px
    }

    .grosTitreSpe {
        font-size: 21.1vw
    }
}

.petitTexte {
    font: 400 normal clamp(15px, 1.31vw, 25px)/1 "Neue Montreal 2020";
    text-transform: uppercase
}

.petitTexte2 {
    font: 400 normal clamp(15px, 1.31vw, 25px)/1.25 "Neue Montreal 2020"
}

.h2 {
    font: 400 normal clamp(40px, 5.62vw, 107px)/1 "Neue Montreal 2020";
    text-transform: uppercase
}

.h5 {
    font: 400 normal clamp(20px, 1.72vw, 33px)/1 "Neue Montreal 2020"
}

.h6 {
    font: 400 normal clamp(14px, 1.05vw, 20px)/1 "Neue Montreal 2020";
    text-transform: uppercase
}

.details {
    font-size: 16px;
    line-height: 1.25
}

#transition {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none
}

#transition.f {
    background: initial
}

#transition.devant {
    pointer-events: initial
}

#firstCercle {
    position: absolute;
    width: 50vw;
    height: 50vw;
    background: #ffd372;
    display: none;
    border-radius: 100%
}

#firstCercle.on {
    display: block
}

.toHomePage #transition svg path {
    fill: #acd084
}

.toHomePage #transition #firstCercle {
    background: #acd084
}

.shopify-challenge__container {
    margin-top: 150px
}

.minHeight {
    min-height: 100vh
}

#intro {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: #fef7e6;
    text-align: center
}

#intro.off {
    display: none
}

.yerbaMate {
    margin: 0 auto;
    bottom: 26%;
    width: var(--col-8);
    left: var(--cg2)
}

.yerbaMate span {
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%)
}

@media (max-width: 600px) {
    .yerbaMate {
        width: var(--wrapper);
        left: 50%;
        transform: translate(-50%);
        bottom: 22%
    }
}

html[lang=en] .yerbaMate {
    bottom: 60%;
    width: var(--col-10);
    left: var(--cg1)
}

@media (max-width: 600px) {
    html[lang=en] .yerbaMate {
        bottom: 55%;
        left: 50%;
        width: var(--wrapper)
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.imgFullW,
.c-videoFullWidth {
    height: 100vh;
    border-top: 1px solid #0E0E0E;
    border-bottom: 1px solid #0E0E0E;
    overflow: hidden
}

.imgFullW img,
.imgFullW video,
.c-videoFullWidth img,
.c-videoFullWidth video {
    width: 100%;
    height: calc(100% + 100px);
    object-fit: cover;
    display: block;
    transform: translateY(-100px)
}

@media (max-width: 767px) {

    .imgFullW,
    .c-videoFullWidth {
        height: 100vw
    }
}

.imgDuo {
    height: 100vh;
    border-top: 1px solid #0E0E0E;
    border-bottom: 1px solid #0E0E0E;
    overflow: hidden
}

.imgDuo img {
    width: 50%;
    height: 100%;
    object-fit: cover
}

.imgDuo:before {
    content: "";
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #0e0e0e;
    position: absolute;
    z-index: 2
}

@media (max-width: 767px) {
    .imgDuo {
        height: 68.5vw
    }
}

.imgDuo .parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    transform: translateY(-100px)
}

.btn {
    font: 400 normal clamp(22px, 1.72vw, 33px)/2.8 "Neue Montreal 2020";
    display: inline-block
}

.btnOmbre>span {
    background-color: #f15b40;
    border: 1px solid #2b3d73;
    color: #fff;
    border-radius: 2em;
    padding: 0 1.3em;
    display: block;
    transition: .1s;
    transition-property: transform
}

.btnOmbre:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #2b3d73;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2em;
    transform: translateY(.15em);
    z-index: -1
}

.btnOmbre:hover span {
    transform: translateY(.15em)
}

.btnOmbre60 {
    line-height: 2.4
}

.btnOmbreBleu>span {
    background-color: #2b3d73;
    border: 1px solid #0E0E0E
}

.btnOmbreBleu:after {
    background: #0e0e0e
}

.btnOmbreRouge>span {
    background-color: #e72f63
}

.btnOmbreVert>span {
    background-color: #195e1c;
    border: 1px solid #0E0E0E
}

.btnOmbreVert:after {
    background: #0e0e0e
}

.btn50 {
    line-height: 2.54;
    border-radius: 2em;
    font-size: clamp(15px, 1.31vw, 25px)
}

.btn50h {
    line-height: 2.54;
    border-radius: 2em;
    font-size: clamp(20px, 1.32vw, 25px)
}

.btn50h:not(.bounce) {
    padding: 0 1em
}

.btn50h.bounce {
    background: none
}

.btn50h.bounce .elBounce {
    padding: 0 1em
}

.btn60 {
    line-height: 3;
    border-radius: 2em;
    font-size: clamp(15px, 1.31vw, 25px)
}

.btn60:not(.bounce) {
    padding: 0 1em
}

.btn60.bounce {
    background: none
}

.btn60.bounce .elBounce {
    padding: 0 1em
}

.btnEspace {
    white-space: nowrap
}

.btnEspace span,
.btnEspace:after {
    border-radius: .5em
}

.btnRond {
    width: clamp(55px, 4.96vw, 95px);
    height: clamp(55px, 4.96vw, 95px);
    border-radius: 100%
}

.btnRond2 {
    width: clamp(55px, 4.49vw, 86px);
    height: clamp(55px, 4.49vw, 86px);
    background: #fff;
    border-radius: 100%
}

.btnRond3 {
    width: clamp(55px, 3.96vw, 76px);
    height: clamp(55px, 3.96vw, 76px);
    border-radius: 100%
}

.btnRond3.btnOmbre span {
    padding: 0;
    aspect-ratio: 1;
    line-height: 0;
    display: flex;
    background: #ffd372
}

.btnRond4 {
    width: clamp(50px, 3.3vw, 63px);
    height: clamp(50px, 3.3vw, 63px);
    background: #fff;
    border-radius: 100%;
    font-size: clamp(20px, 1.32vw, 25px)
}

.path1 {
    width: 95vw;
    height: auto;
    overflow: visible
}

.path2 {
    width: 100%;
    height: auto;
    overflow: visible;
    bottom: var(--gutter);
    left: 0
}

.path2 textPath {
    font-size: 38px;
    fill: #fef7e6
}

@media (max-width: 767px) {
    .path2 textPath {
        font-size: 60px
    }
}

.c-Subscribe {
    margin: calc(-30px - 6vw) 0 0
}

.c-Subscribe .data {
    transform: translateY(15px)
}

.c-Subscribe .data .haut {
    background: #e72f63;
    line-height: 1.1;
    padding: 25px 0 23px;
    align-items: center
}

.c-Subscribe .data .bas {
    aspect-ratio: 1
}

.c-Subscribe .data .bas img {
    width: 12vw;
    height: 12vw;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.c-Subscribe .rond {
    border-radius: 100%;
    border: 1px solid #FFF;
    width: 2vw;
    height: 2vw;
    margin: 0 0 18px;
    min-width: 25px;
    min-height: 25px
}

@media (max-width: 767px) {
    .c-Subscribe .data .bas img {
        width: 130px;
        height: 130px
    }
}

.data {
    width: var(--col-4);
    text-align: center;
    min-width: 336px
}

.data .haut {
    background: #f15b40;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 2.8;
    border-radius: .75em
}

.data .bas {
    background: #fff;
    aspect-ratio: .95;
    border-radius: .9em
}

.data .bas p {
    width: var(--col-3);
    margin: 0 auto;
    padding: 24px 0 0
}

.data .bas svg {
    width: 12vw !important;
    height: 12vw !important;
    position: absolute;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important
}

.data .bas svg path:not(.p1) {
    stroke: #f15b40
}

.data .bas svg path.p1 {
    fill: #f15b40
}

@media (max-width: 767px) {
    .data {
        min-width: 270px
    }

    .data .bas p {
        width: 100%;
        padding: 24px 24px 0
    }

    .data .bas svg {
        width: 120px !important;
        height: 120px !important;
        top: 60%
    }
}

[data-boisson=mure-et-hibiscus] .data .haut {
    background: #2b3d73
}

[data-boisson=mure-et-hibiscus] .data .bas svg path:not(.p1) {
    stroke: #2b3d73
}

[data-boisson=mure-et-hibiscus] .data .bas svg path.p1,
[data-boisson=mure-et-hibiscus] .data .bas svg path:first-child {
    fill: #2b3d73
}

[data-boisson=punch-tropical] .data .haut {
    background: #e72f63
}

[data-boisson=punch-tropical] .data .bas svg path:not(.p1) {
    stroke: #e72f63
}

[data-boisson=punch-tropical] .data .bas svg path.p1,
[data-boisson=punch-tropical] .data .bas svg path:first-child {
    fill: #e72f63
}

[data-boisson=melon-et-menthe] .data .haut {
    background: #195e1c
}

[data-boisson=melon-et-menthe] .data .bas svg path:not(.p1) {
    stroke: #195e1c
}

[data-boisson=melon-et-menthe] .data .bas svg path.p1,
[data-boisson=melon-et-menthe] .data .bas svg path:first-child {
    fill: #195e1c
}

@media (max-width: 900px) {
    .btn.offMob {
        display: none !important
    }
}

.arrondi {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: 0 0;
    transform: scaleY(0)
}



.innerEtoiles {
    position: relative
}

.innerEtoiles .etoile {
    top: 0;
    left: 0;
    opacity: 0;
    width: 2.5vw;
    height: auto;
    max-width: 50px;
    min-width: 20px
}

.innerEtoiles .etoileBulle {
    width: 1.5vw;
    min-width: 15px;
    max-width: 40px
}

.rainbow .mot {
    display: inline-block
}

.rainbow span.lettre {
    display: inline-block;
    transform: scale(.8)
}

.rainbow .ls+.la {
    margin: 0 0 0 -.01em
}

.rainbow .la+.lv {
    margin: 0 0 0 -.14em
}

.rainbow .lt+.lo {
    margin: 0 0 0 -.1em
}

.rainbow .lt+.la {
    margin: 0 0 0 -.12em
}

.rainbow .la+.lc {
    margin: 0 0 0 -.05em
}

.rainbow .lc+.lt {
    margin: 0 0 0 -.05em
}

svg.rainbow {
    overflow: visible
}

html[lang=en] .rainbow .la+.lv {
    margin: 0
}

html[lang=en] .rainbow .lt+.lo {
    margin: 0
}

html[lang=en] .rainbow .lt+.la {
    margin: 0
}

html[lang=en] .rainbow .la+.lc {
    margin: 0
}

html[lang=en] .rainbow .lc+.lt {
    margin: 0
}

html[lang=en] .rainbow .lv+.le {
    margin: 0 -.04em 0 -.14em
}

html[lang=en] .rainbow .lu+.lr {
    margin: 0 0 0 -.01em
}

span.c-beige {
    color: #fef7e6
}

span.c-noir {
    color: #0e0e0e
}

span.c-jaune {
    color: #ffd372
}

span.c-bleu {
    color: #88c1f8
}

span.c-bleu2 {
    color: #2b3d73
}

span.c-rose {
    color: #f6b1cf
}

span.c-rouge {
    color: #e72f63
}

span.c-orange {
    color: #f15b40
}

path.c-beige {
    fill: #fef7e6
}

path.c-noir {
    fill: #0e0e0e
}

path.c-jaune {
    fill: #ffd372
}

path.c-bleu {
    fill: #88c1f8
}

path.c-bleu2 {
    fill: #2b3d73
}

path.c-rose {
    fill: #f6b1cf
}

path.c-rouge {
    fill: #e72f63
}

path.c-orange {
    fill: #f15b40
}

.bounce {
    background: none
}

.bounce .elBounce {
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: #fff;
    border-radius: inherit;
    animation-duration: .3s;
    animation-timing-function: ease
}

.bounce .elBounceNoir {
    background: #0e0e0e
}

.bounce:hover span {
    animation-name: bounceSpe
}

@keyframes bounceSpe {

    0%,
    to {
        transform: translateZ(0) scale(1)
    }

    40% {
        transform: translateZ(0) scale(1.05)
    }

    80% {
        transform: translateZ(0) scale(.96)
    }
}

.bounce2 span {
    animation-duration: .3s;
    animation-timing-function: ease
}

.bounce2:hover span {
    animation-name: bounceSpe2
}

@keyframes bounceSpe2 {

    0%,
    to {
        transform: translateZ(0) scale(1)
    }

    40% {
        transform: translateZ(0) scale(1.03)
    }

    80% {
        transform: translateZ(0) scale(.97)
    }
}

.parallaxEtoile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-productsSlider+.c-videoFullWidth {
    border-top: 0
}

.bandeau {
    text-transform: uppercase;
    z-index: 6;
    font: 400 normal clamp(12px, 1.05vw, 18px)/1 "Neue Montreal 2020";
    text-align: center;
    display: block;
    width: 100%;
    cursor: pointer;
    padding: .5em 0 .4em;
    pointer-events: initial
}

.bandeau a {
    text-decoration: underline
}

.bandeau.off {
    display: none
}

.closeBandeau {
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(12px, 1.05vw, 18px)
}

@media (max-width: 767px) {
    .bandeau {
        font-size: 12px;
        line-height: 1;
        padding: 5px 45px 5px var(--gutter)
    }
}

.innerHeader.f {
    z-index: 5;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none
}

.header {
    position: relative;
    z-index: 5;
    padding: 30px var(--gutter) 0;
    width: 100%
}

.header .gauche {
    pointer-events: initial
}

.header .logo {
    fill: #fff;
    width: clamp(94px, 8.79vw, 169px);
    height: auto;
    transition: fill .2s ease-in-out .2s
}

.header .btn.btnRond4 {
    display: flex
}

.header .droite {
    pointer-events: initial
}

.header .droite>a,
.header .droite button {
    margin: 0 0 0 10px
}

.header .pastille {
    border-radius: 100%;
    width: clamp(16px, 1.05vw, 20px);
    height: clamp(16px, 1.05vw, 20px);
    background: #0e0e0e;
    color: #fff;
    top: -1px;
    right: -1px;
    font-weight: 500;
    font-size: 11px
}

.header .pastille.off {
    display: none
}

.header .fleche {
    margin: 0 0 0 10px
}

@media (max-width: 767px) {
    .header .gauche {
        top: 46px
    }

    .header .droite {
        top: var(--gutter)
    }
}

.logoNeg .logo,
.template- .logo,
.template-customers-login .logo,
.template-customers-account .logo,
.template-customers-addresses .logo {
    fill: #0e0e0e
}

.btn.openMenu {
    display: none !important;
    transition: .2s;
    transition-delay: .2s;
    overflow: hidden
}

@media (max-width: 900px) {
    .btn.openMenu {
        display: flex !important
    }
}

.btn.openMenu .innerIcon {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    transition: .6s cubic-bezier(.65, 0, .09, 1.38)
}

.btn.openMenu .innerIcon2 {
    transform: translateY(-100%)
}

.innerMenuMob {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    padding: 5px;
    overflow: scroll;
    display: none;
    z-index: 4;
    pointer-events: initial
}

.innerMenuMob.on {
    display: block
}

.menuMobile {
    width: 100%;
    border-radius: 20px;
    overflow: scroll;
    padding: 80px calc(var(--gutter) - 5px) 30px
}

.menuMobile ul:not(.saveurs) {
    display: block !important
}

.menuMobile ul li a {
    display: block;
    color: #0e0e0e;
    line-height: 47px;
    font-size: 23px
}

.menuMobile li+li {
    border-top: 1px solid rgba(14, 14, 14, .2)
}

.menuMobile ul button {
    width: 100%;
    text-align: left;
    line-height: 47px;
    font-size: 23px
}

.menuMobile .saveurs {
    display: none;
    flex-wrap: wrap
}

.menuMobile .saveurs.on {
    display: flex
}

.menuMobile .saveurs li {
    flex: 0 0 calc(50% - var(--gutter) / 2);
    border: 0
}

.menuMobile .saveurs li img {
    width: 100%;
    display: block;
    height: auto
}

.menuMobile .saveurs li a {
    font-size: 15px;
    line-height: 2;
    margin: 0 0 10px
}

.menuMobile .barrePlus.off {
    visibility: hidden
}

.contentMenuMob {
    opacity: 0;
    visibility: hidden
}

.fondMenuMobile {
    background: #fff;
    transform: scaleY(0);
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

.basMenuMob {
    margin: 50px 0 0;
    justify-content: space-between;
    align-items: center
}

.basMenuMob .socials a {
    margin: 0 0 0 10px
}

.petitLien {
    font-size: 16px
}

.menuOuvert .header .droite .btnRond4:not(.openMenu) {
    background: #f1f1f1
}

.menuOuvert .openMenu {
    background: #0e0e0e
}

.menuOuvert .btn.openMenu .innerIcon1 {
    transform: translateY(100%)
}

.menuOuvert .btn.openMenu .innerIcon2 {
    transform: translate(0)
}

.sousMenu {
    visibility: hidden;
    opacity: 0;
    top: 5px;
    left: 5px;
    width: calc(100vw - 10px);
    z-index: -1;
    border-radius: 25px;
    padding: calc(5px + clamp(95px, 6.6vw, 110px)) calc(var(--gutter) - 5px) var(--gutter);
    overflow: hidden;
    min-height: calc(22vw + 115px)
}

.sousMenu li {
    width: var(--col-3);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5%)
}

.sousMenu li+li {
    margin: 0 0 0 var(--gutter)
}

.sousMenu .bounce2 {
    display: block
}

.sousMenu .border {
    width: 100%;
    aspect-ratio: 1.2;
    display: block;
    outline: 1px solid #0E0E0E;
    margin: 0 0 10px;
    overflow: hidden
}

.sousMenu span {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.sousMenu span img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transform: scale(1.1)
}

.sousMenu .fondM {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleY(0);
    transform-origin: 0 0;
    z-index: -1
}

.innerSML {
    height: calc(5px + clamp(95px, 6.6vw, 110px));
    opacity: 0;
    top: 0;
    left: calc(var(--gutter) - 5px)
}

.sousMenuLogo {
    transform: translateY(6%)
}

.toAllProd {
    width: max-content;
    margin: var(--gutter) auto 0;
    opacity: 0;
    transform: translateY(-20%)
}

.toAllProd.off {
    display: none
}

.items {
    pointer-events: none
}

.items a {
    pointer-events: initial
}

.itemsApprendre {
    position: absolute;
    top: calc(5px + clamp(95px, 6.6vw, 110px))
}

.header .btn:not(.btnOmbre) .elBounce {
    transition: .8s;
    transition-property: background
}

.panneauOn .header .btn:not(.btnOmbre) .elBounce {
    background: #f1f1f1
}

.panneauOn .logo {
    fill: #0e0e0e
}

@media (min-width: 901px) {
    .panneauOn .gauche {
        pointer-events: none
    }
}

.overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
    transition-property: background
}

.overlay.jaune {
    background: #ffd372
}

.overlay.bleu {
    background: #88c1f8
}

.overlay.rose {
    background: #f6b1cf;
    z-index: 6
}

@media (max-width: 900px) {
    .overlay.jaune {
        z-index: 4
    }
}

.c-HomeHero-fond {
    background: #acd084;
    transition: .3s;
    transition-property: background-color;
    transition-delay: .3s
}

[data-boisson=pamplemousse] .c-HomeHero-fond {
    background-color: #ffd372
}

[data-boisson=punch-tropical] .c-HomeHero-fond {
    background-color: #f6b1cf
}

[data-boisson=mure-et-hibiscus] .c-HomeHero-fond {
    background-color: #88c1f8
}

[data-boisson=melon-et-menthe] .c-HomeHero-fond {
    background-color: #acd084
}

@media (max-width: 600px) {
    .c-HomeHero-fond {
        overflow: hidden
    }
}

.c-HomeHero--part1 {
    height: 400vh
}

.c-HomeHero--part2 {
    width: 100%;
    overflow: clip
}

.c-HomeHero--part3 .grosTitre {
    text-align: center
}

.c-HomeHero--part3 .petitTexte {
    width: var(--cg3);
    min-width: 276px
}

.c-HomeHero.off .lotties,
.c-HomeHero.off .mainCanvas {
    display: none
}

.c-HomeHero .margeNeg {
    margin: -100vh 0 0;
    z-index: 2;
    position: relative
}

@media (max-width: 767px) {
    .c-HomeHero--part3 {
        padding: 15px 0 0
    }
}

@media (max-width: 600px) {
    .c-HomeHero--part1 {
        height: 100vh
    }

    .c-HomeHero .margeNeg {
        margin: 0
    }
}

.lotties .step {
    width: 100%;
    height: 100%
}

.lotties .step1 {
    transform: rotate(45deg)
}

.lotties .step2 {
    transform: rotate(90deg)
}

.lotties .step3 {
    transform: rotate(135deg)
}

.lotties .step4 {
    transform: rotate(180deg)
}

.lotties .step5 {
    transform: rotate(225deg)
}

.lotties .step6 {
    transform: rotate(270deg)
}

.lotties .step7 {
    transform: rotate(315deg)
}

.lotties svg {
    width: 100%;
    height: auto;
    display: block
}

.lotties .stepChild {
    width: 100vw
}

.lotties .gauche,
.lotties .droite {
    flex: 0 0 50%
}

.lotties .gauche {
    transform-origin: 0 100%
}

.lotties .droite {
    transform-origin: 100% 100%
}

@media (max-width: 600px) {
    .lotties {
        position: absolute
    }
}

.introGauche,
.introDroite {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.introGauche {
    transform: translate(-100%) rotate(-40deg);
    transform-origin: 0 100%
}

.introDroite {
    transform: translate(100%) rotate(40deg);
    transform-origin: 100% 100%
}

.lottie_pamp_1 {
    width: 40vw;
    left: calc(-1 * var(--cg1));
    top: 50%;
    transform: translateY(-50%)
}

.lottie_pamp_1 .bulles {
    width: 5vw;
    height: auto;
    left: 75%;
    top: 10%
}

.lottie_pamp_2 {
    width: var(--col-4);
    left: var(--cg2);
    bottom: 10vh;
    transform: rotate(20deg)
}

.woman {
    width: var(--cg3);
    height: auto;
    transform: translateY(-23%);
    right: var(--cg2)
}

.lottie_pamp_4 {
    width: var(--col-5);
    bottom: -10vh;
    right: calc(-1 * var(--cg1))
}

.lottie_hibi_1 {
    width: 30vw;
    left: var(--gutter);
    top: 10vh
}

.lottie_hibi_1 .star {
    left: 110%;
    top: 0;
    width: 3vw;
    height: auto
}

.lottie_hibi_2 {
    width: 16vw;
    left: var(--cg1);
    bottom: 5vh
}

.lottie_hibi_2 .star {
    right: 105%;
    top: -10%;
    width: 3vw;
    height: auto
}

.lottie_hibi_3 {
    width: 60vw;
    right: var(--col-2);
    top: 0
}

.lottie_hibi_3 .planet {
    top: 50%;
    left: 80%;
    width: 50%;
    height: auto
}

.lottie_hibi_3 .star {
    left: 110%;
    top: 40%;
    width: 3vw;
    height: auto
}

.lottie_trop_1 {
    width: 38vw;
    bottom: -10vh
}

.lottie_trop_1 .eau {
    bottom: 95%;
    left: -5%;
    width: 90%;
    height: auto
}

.lottie_trop_2 {
    width: 42vw;
    left: 35%
}

.mangue {
    width: 11vw;
    right: var(--gutter);
    top: -4%
}

.lottie_trop_4 {
    width: 20vw;
    top: 40%;
    left: var(--cg1)
}

.lottie_melo_1 {
    width: 36vw;
    left: 3vw;
    top: 45%;
    transform: translateY(-56%)
}

.lottie_melo_2 {
    width: 26vw;
    right: 5vw;
    top: 8vh
}

.lottie_melo_3 {
    width: 32vw;
    bottom: -2vh;
    right: 4vw
}

.fleur {
    width: 33vw;
    top: 45%;
    left: 10vw;
    transform: translateY(-50%)
}

@media (pointer: coarse) {

    .woman,
    .mangue,
    .planet,
    .star,
    .eau,
    .fleur {
        display: none
    }
}

@media (max-width: 768px) {
    .lottie_pamp_1 {
        width: 80vw;
        left: -30%;
        top: 46%
    }

    .lottie_pamp_1 .bulles {
        width: 10vw;
        top: -5%;
        left: 70%
    }

    .lottie_pamp_2 {
        width: 140%
    }

    .woman {
        right: -32%;
        width: 100%;
        transform: translateY(-20%)
    }

    .lottie_pamp_4 {
        display: none
    }

    .lottie_hibi_1 {
        width: 65vw;
        left: -35%;
        top: 16vh
    }

    .lottie_hibi_1 .star {
        width: 30px
    }

    .lottie_hibi_2 {
        width: 28vw;
        left: -14%;
        bottom: 32vh
    }

    .lottie_hibi_2 .star {
        display: none
    }

    .lottie_hibi_3 {
        width: 130vw;
        right: -34%;
        top: auto;
        bottom: -22%
    }

    .lottie_hibi_3 .planet {
        display: none
    }

    .lottie_trop_1 {
        width: 76vw;
        bottom: -8%;
        left: -54%
    }

    .lottie_trop_2 {
        width: 73vw;
        top: 5%;
        left: -12%
    }

    .lottie_trop_4 {
        width: 52vw;
        top: 50%;
        left: -15%
    }

    .mangue {
        display: none
    }
}

.innerCercle {
    width: 450vw;
    height: 450vw;
    border-radius: 100%;
    top: 0;
    left: calc(50% - 225vw)
}

@media (max-width: 600px) {
    .innerCercle {
        width: 640vw;
        height: 640vw;
        left: calc(50% - 320vw)
    }
}

.innerCercle.lotties {
    transform: rotate(-135deg)
}

@media (max-width: 600px) {
    .sectionCercleH {
        height: auto
    }

    .innerCercleH {
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
        position: relative
    }

    .innerCercleH .cercle {
        position: relative;
        transform: none !important;
        margin: calc(-2 * var(--gutter)) 0 0
    }

    .innerCercleH .cercle .etape {
        height: auto
    }
}

.sectionCercle {
    overflow: hidden
}

.sectionCercle:before {
    content: "";
    background: #fef7e6;
    top: calc(6vw + 30px);
    left: 0;
    width: 100%;
    height: calc(100% - 6vw - 30px);
    position: absolute
}

.sectionCercle .cercle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center
}

.sectionCercle .cercle:nth-child(2) {
    transform: rotate(25deg)
}

.sectionCercle .cercle:nth-child(3) {
    transform: rotate(50deg)
}

.sectionCercle .cercle:nth-child(4) {
    transform: rotate(75deg)
}

.sectionCercle .cercle:nth-child(5) {
    transform: rotate(100deg)
}

.sectionCercle .cercle:nth-child(6) {
    transform: rotate(130deg)
}

.sectionCercle .etapeSpe {
    width: 100vw;
    margin: 0 auto
}

.sectionCercle .etapeSpe .rainbow {
    width: 95vw;
    height: auto
}

.sectionCercle .etapeSpe .etoile {
    display: none
}

.sectionCercle .etapeSpe .allBulles {
    width: 98vw;
    left: 1vw;
    top: 52%;
    height: auto;
    transform: translate(20%, -50%)
}

.sectionCercle .etapeText {
    text-align: center
}

.sectionCercle .etapeText p {
    margin: 44px 0 0
}

.sectionCercle h2 {
    font: 300 normal clamp(32px, 5.62vw, 108px)/.98 "Neue Montreal 2020";
    text-transform: uppercase
}

@media (max-width: 600px) {
    .sectionCercle .etapeSpe {
        margin: calc(2 * var(--gutter) + 75px) auto 75px
    }

    .sectionCercle .etapeSpe .etoile {
        display: block
    }

    .sectionCercle .etapeSpe .allBulles {
        display: none
    }

    .sectionCercle .etapeText {
        padding: 150px 0 125px
    }
}

.c-videoFullWidth {
    z-index: 3;
    position: relative
}

.rotate {
    transform: rotate(180deg)
}

.slider-navigation {
    width: var(--col-6);
    padding: 0 0 30px;
    z-index: 3;
    position: fixed;
    bottom: 0;
    left: calc(var(--cg3) + var(--gutter));
    transform: translateY(100%)
}

.slider-navigation>.flex {
    width: 100%
}

.slider-navigation .btnOmbre {
    white-space: nowrap
}

.slider-navigation .btnOmbre:not(.current) {
    display: none
}

.slider-navigation .btnOmbre .premier {
    visibility: hidden
}

.slider-navigation .btnOmbre .second {
    left: 50%;
    transform: translate(-50%)
}

@media (max-width: 767px) {
    .slider-navigation {
        width: var(--wrapper);
        left: var(--gutter)
    }

    .slider-navigation .btnOmbre {
        margin: 0
    }

    .slider-navigation .flex.wrap {
        justify-content: space-between;
        align-items: center
    }
}

@media (max-width: 600px) {
    .slider-navigation {
        position: absolute
    }
}

.scrollHoriHome {
    width: max-content;
    padding: 0 0 0 20vw;
    background: #fef7e6
}

.scrollHoriHome .etape {
    width: 60vw;
    border: 1px solid red
}

.scrollHoriHome .etapeSpe {
    width: 100vw;
    margin: 0 0 0 10vw
}

.scrollHoriHome .etapeText {
    text-align: center
}

.scrollHoriHome .etapeText p {
    margin: 44px 0 0
}

.scrollHoriHome h2 {
    font: 300 normal clamp(65px, 5.62vw, 108px)/.98 "Neue Montreal 2020";
    text-transform: uppercase
}

@media (max-width: 767px) {
    .scrollHoriHome {
        padding: 0 10px 0 calc(var(--gutter) / 2) !important
    }

    .scrollHoriHome .etape {
        width: calc(100vw - var(--gutter))
    }
}

.mainCanvas {
    bottom: 0;
    left: 50%;
    pointer-events: none;
    z-index: 3;
    height: 100%
}

.mainCanvas svg {
    position: absolute;
    bottom: 20vh;
    left: 50%;
    width: 25vh !important;
    height: auto !important;
    transform: translate(-50%) !important
}

@media (max-width: 600px) {
    .mainCanvas {
        position: absolute
    }
}

.template-index .mainCanvas {
    transform: translate(-50%, 100%)
}

.template-index .imgFullW,
.template-index .imgDuo {
    z-index: 3
}

.c-newsletterSubscribe {
    z-index: 3;
    position: relative
}

.c-newsletterSubscribe .btnOmbre {
    margin: 40px 0 250px
}

.c-newsletterSubscribe .details {
    width: calc(var(--cg2) + var(--gutter));
    display: block;
    text-align: center;
    z-index: 1;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px
}

@media (max-width: 900px) {

    .c-newsletterSubscribe .details,
    .c-newsletterSubscribe .inscrisToi {
        min-width: 300px
    }

    .c-newsletterSubscribe .innerFleur {
        display: none
    }
}

@media (max-width: 767px) {
    .c-newsletterSubscribe .inscrisToi {
        width: var(--wrapper);
        min-width: auto
    }

    .c-newsletterSubscribe .details {
        position: relative;
        bottom: var(--gutter)
    }

    .c-newsletterSubscribe .inscrisToi {
        margin: 40px auto 0
    }

    .c-newsletterSubscribe .fusee {
        bottom: 10vw
    }
}

.tenBoirais {
    width: 95%;
    display: block;
    height: auto
}

.inscrisToi {
    width: var(--col-4);
    text-align: center;
    margin: 0 auto
}

.innerFleur {
    width: calc(.96 * var(--cg2));
    top: 29vw;
    left: 70.5%;
    text-align: center
}

.innerFleur img {
    width: 100%;
    height: auto;
    display: block
}

.innerFleur p {
    text-transform: uppercase;
    transform: translate(-7%, 5%) rotate(17deg);
    font-size: 1.6vw
}

.lottieFusee svg {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 38vw !important;
    height: auto !important;
    left: -8vw;
    transform: rotate(15deg) !important
}

@media (max-width: 767px) {
    .lottieFusee svg {
        width: 74vw !important;
        left: -26vw;
        max-width: 400px !important
    }
}

.c-instagramPush {
    z-index: 2;
    position: relative;
    margin: -300px 0;
    padding: 300px 0;
    overflow: hidden
}

.c-instagramPush .pushInsta {
    border-radius: 25px
}

.c-instagramPush p {
    text-transform: uppercase;
    margin: 280px 0 0
}

.c-instagramPush h2 {
    width: var(--col-8);
    margin: 60px 0 0
}

.c-instagramPush .datasInsta {
    text-align: center
}

.c-instagramPush .btn {
    margin: 45px 0 250px;
    z-index: 1
}

.c-instagramPush .btn span {
    background: #f15b40
}

.c-instagramPush .arrondi {
    margin: -1px 0 0
}

@media (max-width: 767px) {
    .c-instagramPush h2 {
        width: var(--wrapper)
    }
}

.innerInsta {
    background: #ffd372;
    margin: -6vw 0 0;
    padding: 6vw 0 0
}

.pushInsta {
    object-fit: cover
}

.pushInsta0 {
    left: calc(var(--gutter) + var(--col));
    transform: rotate(10deg) translateY(50%);
    top: 15%;
    width: calc(var(--cg2) + var(--gutter));
    height: calc(var(--cg2) + var(--gutter));
    min-width: 160px;
    min-height: 160px
}

.pushInsta1 {
    right: var(--cg1);
    top: 0;
    transform: rotate(-15deg) translateY(30%);
    width: var(--col-3);
    height: var(--col-3);
    min-width: 200px;
    min-height: 200px
}

.pushInsta2 {
    bottom: -14%;
    left: var(--cg3);
    z-index: 1;
    transform: translate(30%, 60%);
    width: calc(var(--col-3) - var(--gutter));
    height: calc(var(--col-3) - var(--gutter));
    min-width: 200px;
    min-height: 200px
}

.pushInsta3 {
    bottom: 10%;
    right: var(--gutter);
    transform: rotate(15deg) translate(-50%, 100%);
    width: var(--cg2);
    height: var(--cg2);
    min-width: 160px;
    min-height: 160px
}

@media (max-width: 767px) {
    .pushInsta0 {
        left: 0;
        top: 12%
    }

    .pushInsta1 {
        right: var(--gutter)
    }

    .pushInsta2 {
        bottom: -6%;
        left: var(--cg1)
    }

    .pushInsta3 {
        right: calc(-1 * var(--gutter))
    }
}

.c-press {
    height: 73vw;
    margin: -6vw 0 0;
    padding: 6vw 0 0;
    color: #fff;
    background: #2b3d73;
    position: relative
}

.c-press>.flex {
    height: 100%
}

.innerPress {
    width: var(--col-6)
}

.uneQuote {
    width: var(--col-5);
    text-align: center;
    margin: 0 auto;
    text-transform: initial
}

.uneQuote:not(.current) {
    display: none
}

.imgBackground {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .14
}

.slider-navigation2 {
    overflow: inherit;
    height: auto;
    margin: 77px 0 0;
    padding: 0;
    left: auto;
    position: relative
}

.slider-navigation2 .innerBtn2 .btn span {
    background: #88c1f8
}

.c-HomeHero--part1 .fond {
    display: none;
    height: 100%;
    width: auto;
    left: 50%;
    transform: translate(-50%) scale(1.2);
    transform-origin: 50% 0%
}

.c-HomeHero--part1 .fond.first {
    opacity: 0
}

@media (pointer: coarse) {
    .c-HomeHero--part1 .fond {
        display: block
    }
}

.template-product .scrollHoriHome {
    padding: 0 10vw
}

.heroProduct {
    padding: 110px 0 50px
}

.heroProduct .gauche,
.heroProduct .droite {
    width: var(--col-6)
}

.heroProduct .gauche {
    aspect-ratio: .84;
    border: 1px solid #0E0E0E;
    height: min-content;
    opacity: 0
}

.heroProduct .innerGauche {
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.heroProduct .lesImgs {
    height: 100%;
    z-index: 1;
    transform: scale(1.02)
}

.heroProduct .lesImgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.heroProduct .lesImgs img.current {
    clip-path: url(#svgMask);
    -webkit-clip-path: url(#svgMask)
}

.heroProduct .lesImgs img:first-child {
    z-index: 1
}

.heroProduct .svgMask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.heroProduct .droite {
    text-align: center
}

.heroProduct .prix_detail {
    font: 400 normal clamp(18px, 1.72vw, 33px)/1 "Neue Montreal 2020";
    margin: 23px 0 0
}

.heroProduct .prix_detail span:first-child {
    margin: 0 4.5vw 0 0
}

.heroProduct h1 {
    margin: 116px 0 0
}

.heroProduct .description {
    margin: 40px auto 0;
    width: var(--col-5)
}

.heroProduct #AddToCart {
    width: 100%;
    margin: 12px 0 0
}

.heroProduct #AddToCart span {
    background: #ffd372;
    color: #0e0e0e;
    border: 1px solid #0E0E0E
}

.heroProduct #AddToCart:after {
    background: #0e0e0e
}

.heroProduct .carac {
    text-align: center
}

.heroProduct .carac svg {
    width: 4.1vw;
    height: 4.1vw;
    object-fit: contain;
    margin: 64px 0 15px
}

@media (max-width: 900px) {
    .heroProduct>.flex {
        flex-wrap: wrap
    }

    .heroProduct .gauche {
        margin: 0 auto
    }

    .heroProduct .droite {
        flex: 0 0 100%
    }
}

@media (max-width: 767px) {
    .heroProduct .gauche {
        width: 100%;
        aspect-ratio: 1
    }

    .heroProduct h1 {
        margin: 16px 0 0
    }

    .heroProduct .description {
        width: var(--col-10)
    }

    .heroProduct #AddToCart {
        margin: 10px 0 0
    }

    .heroProduct .carac {
        display: none
    }
}

[data-boisson=punch-tropical] #AddToCart span {
    background: #f6b1cf
}

[data-boisson=mure-et-hibiscus] #AddToCart span {
    background: #88c1f8
}

[data-boisson=melon-et-menthe] #AddToCart span {
    background: #acd084
}

.innerQDB {
    margin: 18vw 0 10vw
}

.queDuBon {
    margin: 18vw 0 0
}

.organic {
    width: 9.65vw;
    height: 9.65vw;
    bottom: 4%;
    right: -4%;
    z-index: 2;
    min-width: 88px;
    min-height: 88px
}

.navSlider {
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 2 * var(--gutter));
    left: var(--gutter);
    z-index: 2
}

.innerLignes {
    width: var(--col-5);
    margin: 0 auto;
    text-align: left
}

.innerLignes .w50 {
    width: 50%
}

.innerLignes .bRight {
    border-right: 1px solid #0E0E0E
}

.innerLignes .ligne {
    border: 1px solid #0E0E0E
}

.innerLignes .ligne1 {
    height: clamp(55px, 3.96vw, 76px);
    margin: 45px 0 0;
    border-radius: 2em;
    overflow: hidden
}

.innerLignes .ligne2 {
    height: clamp(60px, 4.96vw, 95px);
    border-radius: .8em;
    overflow: hidden
}

.innerLignes .ligne2.recurringOptions {
    margin: 12px 0 0
}

.innerLignes .ligne2+.ligne2 {
    margin: -1px 0 0
}

.innerLignes #Quantity {
    line-height: 100%;
    height: 100%;
    width: 100%;
    text-align: center
}

.innerLignes #Product {
    line-height: 100%;
    height: 100%;
    width: 100%;
    color: inherit
}

.innerLignes input,
.innerLignes select,
.innerLignes option {
    font: inherit;
    background: none
}

.innerLignes select {
    padding: 0 1.3em
}

.innerLignes .radio {
    padding: 0 4em 0 1.2em;
    cursor: pointer
}

.innerLignes .radio:after {
    content: "";
    width: clamp(16px, 1.19vw, 23px);
    height: clamp(16px, 1.19vw, 23px);
    border-radius: 100%;
    border: 1px solid #0E0E0E;
    position: absolute;
    right: 1.6em;
    top: 50%;
    transform: translate(50%, -50%);
    background: #fef7e6
}

.innerLignes .radio:before {
    width: clamp(9px, .66vw, 13px);
    height: clamp(9px, .66vw, 13px);
    border-radius: 100%;
    background: #0e0e0e;
    position: absolute;
    right: 1.6em;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 2
}

.innerLignes .radio[checked] {
    background: #f6b1cf
}

.innerLignes .radio[checked]:before {
    content: ""
}

@media (max-width: 767px) {
    .innerLignes .radio {
        padding: 0 3em 0 1.2em
    }
}

.innerLignes .i_ {
    top: 50%;
    transform: translateY(-50%);
    right: 1.2em;
    height: auto;
    width: clamp(21px, 1.78vw, 34px)
}

.innerLignes .i_chevron {
    pointer-events: none
}

.innerLignes .i_moins {
    right: auto;
    left: 1.2em
}

.innerLignes .i_moins,
.innerLignes .i_plus {
    height: 100%
}

.innerLignes .i_ img {
    display: block;
    width: 100%
}

@media (max-width: 900px) {
    .innerLignes {
        width: var(--col-9)
    }
}

@media (max-width: 767px) {
    .innerLignes {
        width: 100%
    }

    .innerLignes .ligne2.recurringOptions {
        margin: 10px 0 0
    }
}

.ligneAbonnement {
    display: none
}

.ligneAbonnement.on {
    display: flex
}

.ligneAbonnement .radio[checked] {
    background: #88c1f8
}

.voirTout {
    color: #fff;
    background: #0e0e0e
}

.descrLong p {
    width: var(--col-9);
    margin: 0 0 324px
}

@media (max-width: 1024px) {
    .descrLong p {
        margin: 0 0 75px
    }
}

@media (max-width: 767px) {
    .descrLong p {
        width: 100%
    }
}

.carac2 {
    flex-wrap: wrap;
    margin: 0 0 110px
}

.carac2 li {
    width: var(--col-6);
    border-bottom: 1px solid #0E0E0E;
    line-height: 3
}

@media (max-width: 1024px) {
    .carac2 li {
        width: var(--wrapper)
    }
}

@media (max-width: 767px) {
    .carac2 li {
        line-height: initial;
        height: 60px
    }

    .carac2 li span:first-child {
        line-height: 1.05;
        flex: 0 0 calc(100% - 50px)
    }

    .carac2 li span:last-child {
        width: 38px;
        height: 38px
    }
}

.innerCanvasP {
    width: var(--col-6);
    height: var(--col-6);
    border: 1px solid #0E0E0E
}

@media (max-width: 900px) {
    .sectionWebgl {
        display: block
    }

    .innerCanvasP {
        margin: 0 auto;
        width: 100%;
        height: var(--wrapper)
    }
}

.innerCanvasP img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0
}

.sectionWebgl .droite {
    width: var(--col-6)
}

@media (max-width: 900px) {
    .sectionWebgl .droite {
        margin: var(--gutter) 0 0
    }
}

.rondCarac {
    width: clamp(37px, 2.44vw, 47px);
    height: clamp(37px, 2.44vw, 47px);
    border: 1px solid #0E0E0E;
    border-radius: 100%
}

.sectionWebgl .petitTexte {
    padding: var(--gutter) 0
}

.sectionWebgl .med {
    font-weight: 500
}

.sectionWebgl .med span {
    border: 0
}

.sectionWebgl ul {
    width: var(--col-4);
    border-bottom: 1px solid #0E0E0E
}

.sectionWebgl li span {
    flex: 0 0 50%;
    line-height: clamp(46px, 3vw, 58px);
    border-top: 1px solid #0E0E0E
}

.sectionWebgl li span+span {
    border-left: 1px solid #0E0E0E
}

.sectionWebgl li+li {
    margin: -1px 0 0
}

.sectionWebgl li v+v {
    margin: 0 calc(var(--gutter) / 2) 0 0
}

.sectionWebgl .d {
    padding: 0 calc(var(--gutter) / 2)
}

@media (max-width: 1280px) {
    .sectionWebgl ul {
        width: var(--col-6)
    }
}

@media (max-width: 900px) {
    .sectionWebgl ul {
        width: var(--wrapper)
    }

    .sectionWebgl li v+v {
        flex: 0 0 46px
    }
}

.product_stock {
    padding-top: 30px;
    gap: 10px;
    justify-content: center;
    display: none
}

.product_stock svg {
    width: 16px;
    height: 16px
}

.sectionCercleProd button {
    display: flex;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.sectionCercleProd button span.elBounce {
    background: #ffd372
}

.sectionCercleProd .mainCanvas {
    align-items: flex-end;
    left: 50%;
    transform: translate(-50%)
}

[data-boisson=punch-tropical] .sectionCercleProd button span {
    background: #f6b1cf
}

[data-boisson=mure-et-hibiscus] .sectionCercleProd button span {
    background: #88c1f8
}

[data-boisson=melon-et-menthe] .sectionCercleProd button span {
    background: #acd084
}

.toPrevCarte {
    left: var(--col-2)
}

.toNextCarte {
    right: var(--col-2)
}

div[id*=RechargeWidget_] {
    display: none !important
}

.hidden {
    display: none
}

.innerCercleCP .cercle:nth-child(2) {
    transform: rotate(30deg)
}

.innerCercleCP .cercle:nth-child(3) {
    transform: rotate(60deg)
}

.innerCercleCP .cercle:nth-child(4) {
    transform: rotate(90deg)
}

.innerCercleCP .cercle:nth-child(5) {
    transform: rotate(120deg)
}

.innerCercleCP .cercle:nth-child(6) {
    transform: rotate(150deg)
}

.innerCercleCP .cercle:nth-child(7) {
    transform: rotate(180deg)
}

.innerCercleCP .cercle:nth-child(8) {
    transform: rotate(210deg)
}

.innerCercleCP .cercle:nth-child(9) {
    transform: rotate(240deg)
}

.innerCercleCP .cercle:nth-child(10) {
    transform: rotate(270deg)
}

.innerCercleCP .cercle:nth-child(11) {
    transform: rotate(300deg)
}

.innerCercleCP .cercle:nth-child(12) {
    transform: rotate(330deg)
}

.template-collection .c-Collection__products {
    margin: var(--gutter) 0 0;
    position: relative;
    z-index: 1
}

.c-Collection>.negativ {
    padding-top: 150px
}

.c-Collection h1 {
    text-align: center;
    margin: 0 0 clamp(168px, 12.9vw, 245px)
}

.gardeRobe {
    bottom: 0;
    right: 0;
    width: 27.77vw;
    height: auto
}

@media (max-width: 767px) {
    .gardeRobe {
        width: 200px;
        bottom: 30px
    }
}

@media (max-width: 767px) {
    .petitTexteCollec {
        max-width: 276px
    }
}

.productThumb {
    width: 33.33%;
    aspect-ratio: 505/690;
    text-align: center;
    border-top: 1px solid #0E0E0E;
    border-right: 1px solid #0E0E0E
}

.productThumb .sousTitre {
    z-index: 3
}

.productThumb:after {
    content: "";
    width: calc(100% + 1px);
    height: 1px;
    position: absolute;
    top: 100%;
    background: #0e0e0e;
    left: 0;
    z-index: 2
}

.productThumb:nth-child(3n) {
    border-right: 0
}

.productThumb:nth-child(3n):after {
    width: 100%
}

.productThumb .sousTitre {
    display: block;
    padding: .64em var(--gutter) .2em
}

.productThumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.productThumb a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.productThumb a[data-product=mure-et-hibiscus] {
    background: #88c1f8
}

.productThumb a[data-product=pamplemousse] {
    background: #ffd372
}

.productThumb a[data-product=punch-tropical] {
    background: #f6b1cf
}

.productThumb .base,
.productThumb .hover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.productThumb:nth-child(1) .hover {
    clip-path: url(#svgMaskThumb1)
}

.productThumb:nth-child(2) .hover {
    clip-path: url(#svgMaskThumb2)
}

.productThumb:nth-child(3) .hover {
    clip-path: url(#svgMaskThumb3)
}

.productThumb:nth-child(4) .hover {
    clip-path: url(#svgMaskThumb4)
}

.productThumb:nth-child(5) .hover {
    clip-path: url(#svgMaskThumb5)
}

.productThumb:nth-child(6) .hover {
    clip-path: url(#svgMaskThumb6)
}

.productThumb:nth-child(7) .hover {
    clip-path: url(#svgMaskThumb7)
}

.productThumb:nth-child(8) .hover {
    clip-path: url(#svgMaskThumb8)
}

.productThumb:nth-child(9) .hover {
    clip-path: url(#svgMaskThumb9)
}

.productThumb:nth-child(10) .hover {
    clip-path: url(#svgMaskThumb10)
}

.productThumb:nth-child(11) .hover {
    clip-path: url(#svgMaskThumb11)
}

.productThumb:nth-child(12) .hover {
    clip-path: url(#svgMaskThumb12)
}

.productThumb:nth-child(13) .hover {
    clip-path: url(#svgMaskThumb13)
}

.productThumb:nth-child(14) .hover {
    clip-path: url(#svgMaskThumb14)
}

.productThumb:nth-child(15) .hover {
    clip-path: url(#svgMaskThumb15)
}

.productThumb:nth-child(16) .hover {
    clip-path: url(#svgMaskThumb16)
}

.productThumb:nth-child(17) .hover {
    clip-path: url(#svgMaskThumb17)
}

.productThumb:nth-child(18) .hover {
    clip-path: url(#svgMaskThumb18)
}

.productThumb:nth-child(19) .hover {
    clip-path: url(#svgMaskThumb19)
}

.productThumb:nth-child(20) .hover {
    clip-path: url(#svgMaskThumb20)
}

.productThumb .decouvrez {
    z-index: 3;
    left: calc(var(--gutter) / 2);
    bottom: calc(var(--gutter) / 2);
    border-radius: 2em;
    padding: 0 2em;
    font-size: clamp(15px, 1.31vw, 25px);
    background: #fff;
    color: #0e0e0e;
    line-height: 3.76;
    visibility: hidden;
    transform: translateY(50%);
    opacity: 0;
    transition: .3s cubic-bezier(.65, 0, .09, 1.38)
}

.productThumb .btnRond {
    z-index: 3;
    position: absolute;
    right: calc(var(--gutter) / 2);
    bottom: calc(var(--gutter) / 2);
    border-radius: 2em;
    background: #fff;
    color: #0e0e0e;
    display: flex !important;
    visibility: hidden;
    transform: translateY(50%);
    opacity: 0;
    transition: .3s cubic-bezier(.65, 0, .09, 1.38);
    transition-delay: 0
}

.productThumb .svgMaskThumb {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.productThumb a:hover .hover,
.productThumb a:hover .btn {
    visibility: initial
}

.productThumb a:hover .decouvrez,
.productThumb a:hover .btnRond {
    opacity: 1;
    visibility: visible;
    transform: translate(0)
}

.productThumb a:hover .btnRond {
    transition-delay: .07s
}

.productThumb .petitTexte {
    width: var(--col-3);
    z-index: 3;
    position: relative
}

.productThumb .infoQte {
    text-transform: initial;
    margin: 0 clamp(16px, 2.64vw, 50px) 0 0
}

@media (max-width: 1024px) {

    .productThumb .decouvrez,
    .productThumb .btnRond {
        display: none !important
    }
}

@media (max-width: 767px) {
    .productThumb {
        width: 50%;
        height: 68.5vw
    }

    .productThumb:nth-child(3n) {
        border-right: 1px solid #0E0E0E
    }

    .productThumb:nth-child(2n) {
        border-right: 0 !important
    }

    .productThumb:nth-child(3n):after {
        width: calc(100% + 1px)
    }

    .productThumb:nth-child(2n):after {
        width: 100% !important
    }

    .productThumb .hover {
        display: none
    }
}

.innerSlider {
    padding: 0 0 1px;
    width: 100%;
    overflow: hidden
}

.innerSlider .c-Collection__products {
    width: calc(100% + 1px);
    position: relative
}

.innerSlider .btnRond2 {
    display: flex
}

.innerSlider .productThumb:nth-child(3n) {
    border-right: 1px solid #0E0E0E
}

.innerSlider .nav button+button {
    margin: 0 0 0 var(--gutter)
}

.innerSlider .nav-mobile {
    display: none
}

.innerSlider .nav-desktop {
    display: flex
}

.innerSlider .nav-desktop {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    padding-inline: var(--gutter);
    z-index: 2;
    justify-content: space-between;
    pointer-events: none
}

.innerSlider .nav-desktop button {
    pointer-events: initial
}

@media (max-width: 767px) {
    .innerSlider .nav-mobile {
        display: flex
    }

    .innerSlider .nav-desktop {
        display: none
    }
}

.infosProducts {
    position: relative;
    padding-top: 100px;
    margin: 0 auto var(--gutter);
    flex-wrap: wrap
}

@media (max-width: 767px) {
    .infosProducts>*:nth-child(1) {
        order: 2
    }

    .infosProducts>*:nth-child(2) {
        order: 1
    }

    .infosProducts>*:nth-child(3) {
        order: 3
    }
}

.produitsReco {
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    font: inherit;
    line-height: 2.34
}

@media (max-width: 767px) {
    .produitsReco {
        position: relative;
        width: 100%;
        text-align: center;
        line-height: auto;
        margin: 0 0 30px
    }
}

footer,
.awwwards {
    position: relative;
    z-index: 2;
    height: 100vh;
    overflow: hidden
}

footer .titre,
.awwwards .titre {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 28vh;
    transform: translateY(-50%);
    visibility: hidden
}

footer .titre span.lettre,
.awwwards .titre span.lettre {
    display: inline-block;
    transform: scale(.8)
}

footer .titre.on,
.awwwards .titre.on {
    visibility: visible
}

footer:after,
.awwwards:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #0e0e0e;
    position: absolute;
    bottom: 20%;
    left: 0
}

footer .socials,
.awwwards .socials {
    z-index: 3;
    position: absolute;
    top: 53px;
    left: var(--gutter);
    transform: translateY(-50%)
}

footer .btnRond3+.btnRond3,
.awwwards .btnRond3+.btnRond3 {
    margin: 0 0 0 .85vw
}

footer .basDroite,
.awwwards .basDroite {
    flex-wrap: wrap
}

footer .basDroite a,
footer .basDroite button,
.awwwards .basDroite a,
.awwwards .basDroite button {
    margin: 0 0 0 var(--gutter)
}

footer .details,
.awwwards .details {
    bottom: 0;
    left: 0;
    padding: 0 0 var(--gutter);
    flex-wrap: wrap;
    position: absolute;
    z-index: 3
}

@media (max-width: 767px) {

    footer .basGauche,
    .awwwards .basGauche {
        order: 2;
        flex: 0 0 100%
    }

    footer .basDroite,
    .awwwards .basDroite {
        order: 1;
        flex: 0 0 100%
    }

    footer .basDroite button,
    .awwwards .basDroite button {
        position: absolute;
        bottom: var(--gutter);
        right: var(--gutter);
        text-decoration: underline
    }

    footer .liste,
    .awwwards .liste {
        width: 100%;
        margin: var(--gutter) 0;
        display: block
    }

    footer .liste li,
    .awwwards .liste li {
        text-align: center;
        width: 100%
    }

    footer .liste li a,
    .awwwards .liste li a {
        margin: 0
    }

    footer .socials,
    .awwwards .socials {
        display: none
    }

    footer:after,
    .awwwards:after {
        bottom: 40%
    }
}

.btnEspace {
    left: 50%;
    bottom: 25%;
    transform: translate(-50%);
    z-index: 3
}

.btnEspace span {
    background: #ffd372;
    color: #0e0e0e
}

.btnEspace:after {
    background: #0e0e0e
}

.innerJeu {
    width: 150vh;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

.innerJeu svg {
    display: block;
    width: 100% !important;
    height: auto;
    top: 0;
    left: 0
}

.innerJeu>div:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.innerJeu>* {
    pointer-events: none
}

.innerJeu .off {
    visibility: hidden
}

@media (orientation: portrait) {
    .innerJeu {
        width: 90vh
    }
}

@media (pointer: coarse) {
    .btnEspaceMobile {
        display: block
    }

    .btnEspaceDesktop {
        display: none
    }
}

@media (pointer: fine) {
    .btnEspaceMobile {
        display: none
    }

    .btnEspaceDesktop {
        display: block
    }
}

.nuage {
    width: auto;
    height: 12vh;
    top: 20vh;
    left: 100%;
    transform: translateY(-50%)
}

.nuage2 {
    top: 35vh;
    transform: translateY(-50%) scaleX(-1)
}

.denree {
    width: 28vh;
    height: 34vh;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    left: 100%;
    z-index: 2;
    pointer-events: none
}

.denree .innerDenree {
    width: 100%;
    height: 100%;
    position: absolute
}

.denree .bad {
    position: relative;
    width: 100%;
    height: 100%
}

.denree img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none
}

.denree img.on {
    display: block
}

.denree img.canette {
    height: 70%;
    top: auto;
    bottom: 6%
}

@media (max-width: 767px) {
    .denree {
        width: 19vh;
        height: 25vh;
        top: 65%
    }
}

.innerPaysage {
    position: absolute;
    bottom: 0%;
    width: 100%;
    left: 0
}

@media (orientation: portrait) {
    .innerPaysage {
        width: 200%;
        bottom: 24vh
    }
}

.innerPaysage svg>g>g:nth-child(3) path {
    stroke-width: 1px;
    vector-effect: non-scaling-stroke
}

.template-page-awwwards footer {
    display: none
}

.canetteAwww {
    width: 100%;
    height: 100%;
    position: absolute
}

.canetteAwww img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute
}

.canetteAwww img:not(.on) {
    visibility: hidden
}

.oCart {
    position: fixed;
    z-index: 9;
    width: 34.25vw;
    min-width: 492px;
    height: calc(100vh - 10px);
    top: 5px;
    right: 5px;
    border-radius: 25px;
    display: none;
    padding: 25px clamp(20px, 1.45vw, 28px) 100px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.oCart.on {
    display: block
}

.oCart button[type=submit] {
    width: 100%
}

.oCart button[type=submit] span {
    background: #ffd372;
    color: #0e0e0e;
    border: 1px solid #0E0E0E
}

.oCart button[type=submit]:after {
    background: #0e0e0e
}

.oCart .details {
    width: 46%;
    padding: 0 0 26px
}

.oCart::-webkit-scrollbar {
    display: none
}

.oCart .i_close {
    right: 0;
    top: 22px;
    line-height: 0
}

@media (max-width: 900px) {
    .oCart {
        padding: 25px calc(var(--gutter) - 5px);
        top: 5px;
        right: 5px;
        height: calc(100vh - 10px)
    }
}

@media (max-width: 767px) {
    .oCart {
        border-radius: 20px
    }
}

@media (max-width: 500px) {
    .oCart {
        width: calc(100vw - 10px);
        min-width: auto
    }
}

.fondTransparent {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 6;
    cursor: pointer;
    background: transparent
}

.fondTransparent.on {
    display: block
}

.oCart__head {
    margin: 0 0 20px
}

.oCart__item {
    display: flex;
    position: relative;
    padding: 22px 0
}

.oCart__item+.oCart__item {
    border-top: 1px solid rgba(14, 14, 14, .2)
}

.oCart__image {
    width: 28%
}

.oCart__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 100%
}

@media (max-width: 500px) {
    .oCart__image {
        width: 40%
    }
}

.oCart__description {
    flex: 1 1 100%;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    padding: 0 0 0 30px
}

.oCart__description .haut {
    padding: 0 50px 0 0
}

@media (max-width: 500px) {
    .oCart__description {
        padding: 0 0 0 20px
    }
}

.fondC {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: 0 0
}

.innerCart,
.innerCredits {
    visibility: hidden
}

.oCart__itemName {
    font: 400 normal clamp(15px, 1.31vw, 25px)/1.25 "Neue Montreal 2020"
}

.oCart__itemSize {
    margin: 2px 0 0;
    font: 400 normal clamp(16px, 1.05vw, 20px)/1 "Neue Montreal 2020"
}

.freq {
    margin: 0 0 0 10px;
    font-size: 13px
}

.oCart__itemQuantity_gauche {
    border: 1px solid rgba(14, 14, 14, .2);
    border-radius: 7px;
    width: 125px;
    display: flex;
    font: 400 normal clamp(15px, 1.31vw, 25px)/36px "Neue Montreal 2020"
}

.oCart__itemQuantity_gauche>* {
    flex: 0 0 33.33%;
    text-align: center
}

.oCart__itemQuantity button {
    display: flex;
    align-items: center;
    justify-content: center
}

.oCart__itemQuantity button.i_moins {
    padding: 0 0 0 10px
}

.oCart__itemQuantity button.i_plus {
    padding: 0 10px 0 0
}

.oCart__itemQuantity svg {
    width: 16px;
    height: 16px;
    object-fit: content
}

@media (max-width: 500px) {
    .oCart__itemQuantity_gauche {
        width: 100px;
        line-height: 32px
    }
}

.oCart__total {
    font: 500 normal clamp(15px, 1.31vw, 25px)/1 "Neue Montreal 2020";
    padding: 24px 0 14px
}

.credits.f {
    width: 34.25vw;
    min-width: 492px;
    bottom: 5px;
    right: 5px;
    border-radius: 25px;
    z-index: 9;
    display: none;
    padding: 25px clamp(20px, 1.45vw, 28px) 100px;
    overflow: hidden;
    background: initial
}

.credits.f.on {
    display: block
}

.credits.f .details {
    margin: 40px 0 0
}

@media (max-width: 500px) {
    .credits.f {
        width: calc(100vw - 10px);
        min-width: auto
    }
}

.credits.f .marges {
    margin: 40px 0 -20px
}

.template-customers-login .customer,
.template-customers-register .customer {
    z-index: 100;
    width: 34.25vw;
    margin: 180px auto 50px !important;
    min-width: 492px
}

.template-customers-login .customer h1,
.template-customers-register .customer h1 {
    font-weight: 400;
    text-transform: uppercase;
    text-align: left
}

.template-customers-login .customer input,
.template-customers-login .customer label,
.template-customers-register .customer input,
.template-customers-register .customer label {
    width: 100%;
    display: block
}

.template-customers-login .customer label,
.template-customers-register .customer label {
    margin: 30px 0 4px
}

.template-customers-login .customer input[type=email],
.template-customers-login .customer input[type=password],
.template-customers-login .customer input[type=text],
.template-customers-register .customer input[type=email],
.template-customers-register .customer input[type=password],
.template-customers-register .customer input[type=text] {
    border: 1px solid rgba(14, 14, 14, .2);
    border-radius: 7px;
    line-height: clamp(50px, 4.2vw, 82px);
    padding: 0 clamp(20px, 1.45vw, 28px)
}

.template-customers-login .customer input[type=email]::placeholder,
.template-customers-login .customer input[type=password]::placeholder,
.template-customers-login .customer input[type=text]::placeholder,
.template-customers-register .customer input[type=email]::placeholder,
.template-customers-register .customer input[type=password]::placeholder,
.template-customers-register .customer input[type=text]::placeholder {
    color: #0e0e0e99
}

.template-customers-login .customer .reset,
.template-customers-register .customer .reset {
    display: none
}

.template-customers-login .customer .reset.on,
.template-customers-register .customer .reset.on {
    display: block
}

.template-customers-login .customer .toConnexion,
.template-customers-register .customer .toConnexion {
    width: 100%
}

.template-customers-login .customer .toConnexion span,
.template-customers-register .customer .toConnexion span {
    background: #88c1f8;
    color: #0e0e0e;
    border: 1px solid #0E0E0E
}

.template-customers-login .customer .toConnexion:after,
.template-customers-register .customer .toConnexion:after {
    background: #0e0e0e
}

.template-customers-login .customer .details,
.template-customers-register .customer .details {
    text-align: center;
    text-decoration: underline;
    color: #2b3d73;
    margin: 15px auto 60px;
    display: block
}

.template-customers-login .customer .field label,
.template-customers-register .customer .field label {
    text-align: left
}

@media (max-width: 767px) {

    .template-customers-login .customer,
    .template-customers-register .customer {
        width: 100%;
        min-width: initial;
        margin: 150px auto 50px !important
    }
}

.template-customers-login .customer h2,
.template-customers-register .customer h2 {
    font-weight: 400
}

.template-customers-login .customer h2 svg,
.template-customers-register .customer h2 svg {
    width: 30px;
    height: 30px;
    filter: grayscale(1);
    display: block;
    margin: 10px auto 20px
}

.template-customers-login .customer #RegisterForm-email-error,
.template-customers-login .customer #RegisterForm-password-error,
.template-customers-login .customer #RecoverEmail-email-error,
.template-customers-register .customer #RegisterForm-email-error,
.template-customers-register .customer #RegisterForm-password-error,
.template-customers-register .customer #RecoverEmail-email-error {
    font-size: 16px !important;
    line-height: 1.25 !important
}

.template-customers-login .customer #RegisterForm-email-error svg,
.template-customers-login .customer #RegisterForm-password-error svg,
.template-customers-login .customer #RecoverEmail-email-error svg,
.template-customers-register .customer #RegisterForm-email-error svg,
.template-customers-register .customer #RegisterForm-password-error svg,
.template-customers-register .customer #RecoverEmail-email-error svg {
    width: 30px;
    height: 30px;
    filter: grayscale(1);
    display: block;
    margin: 10px auto
}

.spurit-ros__account-bar-wrapper {
    position: absolute;
    right: var(--gutter);
    top: 180px;
    line-height: 2.54;
    border-radius: 2em;
    padding: 0 1em;
    font-size: clamp(20px, 1.32vw, 25px);
    background: #0e0e0e;
    color: #fff
}

.spurit-ros__account-bar-wrapper .spurit-ros__bar {
    padding: 0 !important;
    border: 0 !important
}

@media (max-width: 767px) {
    .spurit-ros__account-bar-wrapper {
        right: auto;
        left: var(--gutter);
        top: 110px
    }
}

:is(.account, .order, .addresses) {
    margin: 180px auto 50px !important;
    max-width: 900px !important;
    padding: 0 var(--gutter) !important
}

.spurit-ros__subscriptions {
    margin: 180px auto 50px !important;
    max-width: var(--wrapper) !important;
    padding: 0 !important
}

:is(.account, .order) h1 {
    font-weight: 400 !important;
    text-transform: uppercase
}

:is(.account, .order) h2 {
    font-weight: 400 !important;
    text-transform: uppercase
}

.customer ul {
    padding: 0 !important;
    width: 100%;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.25 !important
}

#rc_login {
    display: none !important
}

.c-PointsSale>.r {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0)
}

.c-PointsSale .lottie {
    z-index: 2
}

.c-PointsSale .lottie1 {
    top: 0;
    left: var(--col-5);
    width: var(--col-4);
    transform: translate(-70%, -20%) rotate(20deg)
}

.c-PointsSale .lottie2 {
    width: 20vw;
    bottom: 0;
    right: var(--gutter);
    transform: translateY(24%)
}

@media (max-width: 767px) {
    .c-PointsSale {
        min-height: initial;
        position: relative;
        overflow: hidden
    }

    .c-PointsSale .lottie1 {
        left: auto;
        right: -12%;
        width: var(--col-11);
        max-width: 380px;
        transform: translate(0) rotate(20deg)
    }

    .c-PointsSale .lottie2 {
        display: none
    }
}

.c-PointsSale aside {
    background: #ffd372;
    padding: 210px var(--gutter) 0;
    flex: 0 0 calc(var(--gutter) * 2 + var(--col-4))
}

.c-PointsSale .droite {
    flex: 0 0 calc(var(--col-8) + var(--gutter))
}

.c-PointsSale .droite #datas {
    display: none
}

.c-PointsSale h1 {
    font: 400 normal clamp(32px, 2.77vw, 53px)/1 "Neue Montreal 2020";
    text-transform: uppercase;
    margin: 0 0 32px
}

@media (max-width: 767px) {
    .c-PointsSale aside {
        flex: 0 0 100%;
        height: min-content;
        padding: 120px var(--gutter) var(--gutter)
    }

    .c-PointsSale .droite {
        flex: 0 0 100%;
        height: min-content
    }
}

#map {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0
}

@media (max-width: 767px) {
    #map {
        position: relative;
        height: 100vw
    }
}

aside .mapboxgl-ctrl-geocoder {
    margin: 12px 0 0;
    position: relative;
    width: var(--cg3);
    max-width: auto;
    box-shadow: none
}

aside .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon-search {
    position: absolute;
    right: calc(var(--gutter) / 2);
    left: auto;
    width: 1.52vw;
    height: 1.52vw;
    top: 50%;
    transform: translateY(-50%);
    min-width: 28px;
    min-height: 28px
}

aside .mapboxgl-ctrl-geocoder--input {
    width: 100%;
    font: 400 normal clamp(15px, 1.31vw, 25px)/3.04 "Neue Montreal 2020";
    height: auto;
    border-radius: 7px;
    padding: 0 100px 0 calc(var(--gutter) / 2)
}

@media (max-width: 767px) {
    aside .mapboxgl-ctrl-geocoder {
        max-width: auto;
        width: 100%
    }

    aside .mapboxgl-ctrl-geocoder--input {
        line-height: 3.6;
        padding: 0 100px 0 var(--gutter)
    }
}

.mapboxgl-ctrl-geocoder--button {
    position: absolute;
    height: 100%;
    right: 70px !important;
    top: 0 !important
}

@media (max-width: 767px) {
    .mapboxgl-ctrl-geocoder--button {
        right: 60px
    }
}

.mapboxgl-ctrl-geocoder--icon-close {
    margin: 0 !important;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%)
}

.listings {
    display: none;
    position: relative;
    padding: 50px 0 100px
}

.listings .item {
    position: relative
}

.listings .item+.item {
    margin: 5px 0 0
}

@media (max-width: 767px) {
    .listings {
        padding: 5px 0 0
    }
}

.mapboxgl-popup-close-button {
    display: none
}

.mapboxgl-popup {
    padding-bottom: 60px
}

.item.active {
    font-weight: 700
}

.mapboxgl-popup-content {
    padding: 20px 25px !important;
    width: var(--col-3);
    border-radius: 7px !important;
    margin: 0 !important;
    box-shadow: none !important
}

@media (max-width: 1024px) {
    .mapboxgl-popup-content {
        width: var(--col-6)
    }
}

@media (max-width: 767px) {
    .mapboxgl-popup-content {
        width: var(--col-10)
    }
}

.mapboxgl-popup-content h3 {
    font: 400 normal clamp(15px, 1.31vw, 25px)/1 "Neue Montreal 2020";
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0 50px 0 0
}

.mapboxgl-popup-content h4 {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25
}

.mapboxgl-popup-anchor-bottom,
.mapboxgl-popup-anchor-top {
    max-width: var(--col-3) !important
}

@media (max-width: 1024px) {

    .mapboxgl-popup-anchor-bottom,
    .mapboxgl-popup-anchor-top {
        max-width: var(--col-6) !important
    }
}

@media (max-width: 767px) {

    .mapboxgl-popup-anchor-bottom,
    .mapboxgl-popup-anchor-top {
        max-width: var(--col-10) !important
    }
}

.mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
    margin-top: 15px
}

.mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
    border-bottom-color: #91c949
}

.marker {
    border: none;
    cursor: pointer;
    width: 42px;
    height: 52px;
    background-repeat: no-repeat
}

.petitClose {
    position: absolute;
    right: 25px;
    top: 20px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    filter: invert(1)
}

.addressCard,
.mapboxgl-popup-content {
    background: #fff;
    border-radius: 7px;
    position: relative;
    padding: 20px 25px
}

.addressCard .title,
.mapboxgl-popup-content .title {
    text-transform: uppercase;
    margin: 0 0 10px;
    max-width: var(--col-3)
}

.addressCard .number,
.mapboxgl-popup-content .number {
    right: 25px;
    top: 20px
}

.addressCard .address,
.mapboxgl-popup-content .address {
    line-height: 1.25
}

.addressCard .bas,
.mapboxgl-popup-content .bas {
    margin: 16px 0 0
}

.addressCard *,
.mapboxgl-popup-content * {
    font-weight: 400
}

.addressCard .under,
.mapboxgl-popup-content .under {
    color: #2b3d73;
    text-decoration: underline;
    cursor: pointer
}

.addressCard .under+.under,
.mapboxgl-popup-content .under+.under {
    margin: 0 0 0 30px
}

@media (max-width: 767px) {

    .addressCard .title,
    .mapboxgl-popup-content .title {
        max-width: var(--col-9)
    }

    .addressCard .under+.under,
    .mapboxgl-popup-content .under+.under {
        margin: 0 0 0 15px
    }
}

.distance {
    position: absolute;
    right: 25px;
    z-index: 1;
    font-weight: 400;
    bottom: 20px
}

.template-page-subscription .cercle:first-child {
    transform: translateY(50vh)
}

.template-page-subscription .finST {
    bottom: 90vh
}

.template-page-subscription .c-heroRoundish {
    background: #f6b1cf
}

@media (max-width: 767px) {
    .template-page-subscription .sectionCercle {
        height: auto;
        overflow: initial;
        padding: 125px 0 0
    }

    .template-page-subscription .innerCercle {
        width: 100%;
        height: auto;
        position: relative;
        left: auto;
        top: auto
    }

    .template-page-subscription .cercle {
        position: relative;
        transform: none !important;
        margin: calc(-2 * var(--gutter)) 0 0
    }

    .template-page-subscription .etape {
        height: auto
    }
}

.template-page-yerba .c-heroRoundish {
    background: #a09d9a
}

.c-heroRoundish {
    height: 100vw;
    position: relative;
    color: #fef7e6;
    overflow: hidden
}

.c-heroRoundish .wrap {
    height: 100%;
    padding: 0 0 var(--gutter)
}

.c-heroRoundish .innerTitre {
    margin: clamp(130px, 10vw, 200px) 0 0;
    z-index: 1
}

.c-heroRoundish .titre {
    text-align: center
}

.c-heroRoundish .titre .c-beige {
    opacity: 0
}

.c-heroRoundish .titre .c-noir {
    color: #fef7e6;
    -webkit-text-stroke: .005em #0E0E0E
}

.c-heroRoundish .cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    opacity: 0
}

.c-heroRoundish .petitTexte {
    width: var(--col-3);
    margin: 50px 0 0;
    z-index: 1
}

.c-heroRoundish .petitTexte.right {
    margin: 50px 0 0 var(--cg9)
}

.c-heroRoundish .arrondi {
    bottom: -1px;
    left: 0;
    display: block;
    width: 100%
}

@media (max-width: 1024px) {
    .c-heroRoundish .petitTexte {
        width: var(--col-4)
    }

    .c-heroRoundish .petitTexte.right {
        margin: 50px 0 0 var(--cg8)
    }
}

@media (max-width: 767px) {
    .c-heroRoundish {
        height: auto
    }

    .c-heroRoundish .petitTexte {
        width: var(--col-10);
        padding: 0 0 150px;
        margin: 50px auto 0;
        text-align: center
    }

    .c-heroRoundish .petitTexte.right {
        margin: 50px auto 0
    }
}

.sectionCercleYerba {
    overflow: initial
}

.c-yerbaContent .part1 {
    padding: 12vw 0 0
}

.c-yerbaContent .part1 .petitTexte {
    width: var(--cg4)
}

.c-yerbaContent .part1 img {
    width: var(--col-4);
    height: 35vw;
    object-fit: cover;
    border: 1px solid #0E0E0E
}

.c-yerbaContent .part2 {
    padding: 170px 0 0
}

.c-yerbaContent .part2 p {
    width: var(--col-8)
}

.c-yerbaContent .part2 img {
    width: var(--col-3);
    aspect-ratio: 1;
    object-fit: cover;
    margin: -17.6vw 0 0 var(--cg1);
    border: 1px solid #0E0E0E;
    height: min-content
}

@media (max-width: 767px) {
    .c-yerbaContent .part1 {
        align-items: flex-start;
        padding: 24vw 0 0
    }

    .c-yerbaContent .part1 .petitTexte {
        width: var(--cg6)
    }

    .c-yerbaContent .part1 img {
        width: var(--col-6);
        height: 48vw
    }

    .c-yerbaContent .part2 {
        flex-wrap: wrap;
        padding: 100px 0 8vw
    }

    .c-yerbaContent .part2 p {
        width: 100%
    }

    .c-yerbaContent .part2 img {
        width: 100%;
        margin: var(--gutter) 0 0
    }
}

.c-yerbaContent2 .part1 {
    padding: 50px 0 0
}

.c-yerbaContent2 .part1 p {
    width: var(--col-7)
}

.c-yerbaContent2 .part1 .btn {
    margin: 30px 0 0
}

.c-yerbaContent2 .part2 p {
    width: var(--cg3);
    margin: 60px 0 0 var(--cg7);
    padding-bottom: 20vw
}

@media (max-width: 767px) {
    .c-yerbaContent2 .part1 p {
        width: var(--col-10)
    }

    .c-yerbaContent2 .part2 p {
        width: var(--wrapper);
        margin: 60px 0 0;
        padding-bottom: 100px
    }
}

.cartesQuatuor {
    align-items: center;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-bottom: 15vw
}

.cartesQuatuor .col {
    width: var(--col-4)
}

.cartesQuatuor .col2 {
    z-index: 2
}

.cartesQuatuor .col3 {
    z-index: 3
}

.cartesQuatuor .uneCarte+.uneCarte {
    margin: var(--gutter) 0 0;
    z-index: 1;
    position: relative
}

@media (max-width: 1280px) {
    .cartesQuatuor {
        align-items: initial
    }

    .cartesQuatuor .col {
        width: var(--col-6)
    }

    .cartesQuatuor .col .data {
        margin: 0 auto
    }

    .cartesQuatuor .col .uneCarte+.uneCarte {
        margin: var(--gutter) auto 0
    }

    .cartesQuatuor .col3 {
        position: absolute;
        bottom: 0;
        left: 0
    }
}

@media (max-width: 767px) {
    .cartesQuatuor .col {
        width: 100%
    }

    .cartesQuatuor .col3 {
        position: relative;
        bottom: auto;
        left: auto
    }
}

@media (max-width: 600px) {
    .cartesQuatuor .uneCarte:not(.first) {
        margin: calc(-2 * var(--gutter)) 0 0
    }

    .cartesQuatuor .col .uneCarte+.uneCarte {
        margin: calc(-2 * var(--gutter)) 0 0
    }
}

.c-ContactForm {
    background: #f6b1cf
}

.c-ContactForm .titre {
    text-align: center;
    padding: clamp(130px, 10vw, 200px) 0 8vw
}

.c-ContactForm h1 .c-beige {
    color: #f6b1cf
}

.c-ContactForm h1 .c-rose {
    color: #fef7e6
}

#ContactForm {
    padding: 0 0 13vw
}

#ContactForm input[type=text],
#ContactForm input[type=tel],
#ContactForm input[type=email],
#ContactForm select {
    font: 400 normal clamp(15px, 1.31vw, 25px)/3.3 "Neue Montreal 2020";
    padding: 0 calc(var(--gutter) / 2);
    width: 100%;
    border-radius: 7px;
    -webkit-appearance: none;
    appearance: none;
    display: block
}

#ContactForm textarea {
    padding: calc(var(--gutter) / 2);
    width: 100%;
    border-radius: 7px;
    -webkit-appearance: none;
    appearance: none;
    display: block
}

#ContactForm .petitTexte2 {
    margin: 0 0 10px;
    display: block
}

#ContactForm #contact-success {
    margin: var(--gutter) 0 0;
    text-align: center
}

.ligne .t-form-group {
    width: calc(50% - var(--gutter) / 2)
}

.ligne button {
    width: 100%;
    z-index: 2
}

.ligne button span {
    background: #e72f63
}

.ligne+.ligne {
    margin: 25px 0 0
}

.c-FaqBlock {
    background: #ffd372;
    padding: 0 0 13vw
}

.c-FaqBlock h1 {
    padding: clamp(130px, 10vw, 200px) 0 0 var(--cg3)
}

.c-FaqBlock h1 span {
    display: inline-block
}

.c-FaqBlock h1 .c-beige {
    color: #ffd372
}

.c-FaqBlock h1 .c-jaune {
    color: #fef7e6
}

.c-FaqBlock .l2 {
    transform: translate(-72%) rotate(14deg);
    transform-origin: 80% 50%
}

.c-FaqBlock .l3 {
    transform: translate(8%) rotate(-10deg);
    transform-origin: 0 50%
}

.c-FaqBlock .h5 {
    text-transform: uppercase;
    text-align: center;
    margin: clamp(50px, 4.3vw, 82px) 0 35px
}

@media (max-width: 767px) {
    .c-FaqBlock h1 {
        font-size: 42px
    }
}

.uneQuestion {
    overflow: hidden;
    cursor: pointer;
    height: clamp(50px, 4.3vw, 82px);
    background: #fff;
    border-radius: 7px;
    margin: 5px 0 0
}

.uneQuestion .haut {
    height: clamp(50px, 4.3vw, 82px);
    padding: 0 calc(var(--gutter) / 2);
    border-radius: 7px
}

.uneQuestion .haut span {
    padding: 0 10px 0 0
}

.uneQuestion svg {
    flex: 0 0 20px
}

.uneQuestion p {
    padding: calc(var(--gutter) / 2) calc(var(--gutter) / 2) var(--gutter)
}

.uneQuestion.actif .barrePlus {
    visibility: hidden
}

@media (max-width: 1024px) {
    .uneQuestion .haut {
        padding: 0 var(--gutter)
    }

    .uneQuestion p {
        padding: var(--gutter) var(--gutter) var(--gutter)
    }
}

@media (max-width: 1024px) {
    .uneQuestion svg {
        flex: 0 0 16px
    }
}

.template-404 .fond404 {
    transition: .1s;
    transition-property: background-color
}

.template-404 .fond404[data-fond=jaune] {
    background-color: #ffd372
}

.template-404 .fond404[data-fond=rose] {
    background-color: #f6b1cf
}

.template-404 .fond404[data-fond=bleu] {
    background-color: #88c1f8
}

.template-404 .arc {
    top: auto;
    bottom: 0;
    transform: scale(1)
}

.template-404 .titre404 {
    font-size: 700px
}

.template-404 .path2 {
    transform-origin: 50% 4000%
}

.template-404 .mainCanvas {
    position: relative !important;
    left: auto !important
}

.template-404 canvas {
    transform: translateY(100vh)
}

.template-page .haut {
    padding: clamp(130px, 10vw, 200px) 0 0
}

.template-page h1 {
    margin: 0 0 clamp(50px, 4vw, 110px);
    text-align: center
}

.wisi {
    padding: 0 0 clamp(130px, 10vw, 200px)
}

.wisi h2 {
    font: 400 normal clamp(20px, 1.72vw, 33px)/1 "Neue Montreal 2020";
    text-transform: uppercase;
    padding: 1em 0 .5em
}

.wisi p {
    padding: 1em 0
}

.wisi p a {
    text-transform: uppercase
}

.c-CookieBanner,
.weglot-container {
    display: none !important
}

body .shopify-pc__banner__dialog {
    bottom: 30px;
    right: auto;
    left: var(--gutter);
    font-size: 12px;
    box-shadow: initial;
    border-radius: .75em;
    max-height: initial;
    max-width: 270px;
    padding: 20px 20px 12px;
    background: #fff
}

body .shopify-pc__banner__dialog>* {
    font: inherit;
    font-weight: 400;
    outline: none
}

body .shopify-pc__banner__dialog p,
body .shopify-pc__banner__dialog h2,
body .shopify-pc__banner__dialog a {
    color: #0e0e0e !important
}

body .shopify-pc__banner__dialog h2 {
    display: none
}

body .shopify-pc__banner__btns {
    flex-wrap: wrap;
    justify-content: space-between
}

body .shopify-pc__banner__dialog button.shopify-pc__banner__btn-manage-prefs {
    flex: 0 0 100% !important
}

body .shopify-pc__banner__dialog button {
    margin: 0 !important;
    background: transparent !important;
    outline: none !important;
    color: #0e0e0e !important;
    border-color: #0e0e0e !important
}

body .shopify-pc__banner__dialog button span {
    outline: none !important;
    border: 0 !important
}

body .shopify-pc__banner__btns-granular :nth-child(1) {
    order: 3
}

body .shopify-pc__banner__btn-accept,
body .shopify-pc__banner__btn-decline {
    flex-basis: calc(50% - 5px) !important;
    border-radius: 2em !important;
    outline: none !important;
    box-shadow: initial !important
}

body .shopify-pc__prefs__overlay {
    background-color: #f6b1cfe6
}

body .shopify-pc__prefs__dialog {
    font-size: 12px !important;
    box-shadow: none;
    border-radius: .75em;
    max-height: calc(100svh - 60px) !important
}

body .shopify-pc__prefs__dialog button {
    border-radius: 2em !important;
    outline: none !important;
    padding-block: 8px;
    box-shadow: initial !important;
    background: transparent !important
}

body .shopify-pc__prefs__header-actions button.primary {
    background: #1f1f1f;
    color: #1f1f1f;
    border-color: #1f1f1f
}

body .shopify-pc__prefs__option label input:focus~span svg {
    box-shadow: initial !important
}

body .shopify-pc__prefs__header-close {
    top: 36px
}

@media (max-width: 480px) {
    body .shopify-pc__banner__btns {
        flex-direction: row
    }

    body .shopify-pc__banner__dialog {
        min-width: var(--wrapper);
        bottom: var(--gutter)
    }

    body .shopify-pc__banner__btn-accept,
    body .shopify-pc__banner__btn-decline {
        flex-basis: calc(50% - 5px) !important;
        border-radius: 2em !important;
        outline: none !important;
        box-shadow: initial !important
    }
}

.template-customers-addresses .customer.addresses input[type=text],
.template-customers-addresses .customer.addresses input[type=tel],
.template-customers-addresses .customer.addresses input[type=email],
.template-customers-addresses .customer.addresses select {
    font: 400 normal clamp(15px, 1.31vw, 25px)/3.3 "Neue Montreal 2020";
    padding: 0 calc(var(--gutter) / 2);
    width: 100%;
    border-radius: 7px;
    -webkit-appearance: none;
    appearance: none;
    display: block
}

.template-customers-addresses .customer.addresses textarea {
    padding: calc(var(--gutter) / 2);
    width: 100%;
    border-radius: 7px;
    -webkit-appearance: none;
    appearance: none;
    display: block
}

.template-customers-addresses .customer.addresses .field {
    display: flex;
    flex-direction: column
}

.template-customers-addresses .customer.addresses .field label {
    order: 1
}

.template-customers-addresses .customer.addresses .field input {
    order: 2
}

.template-customers-addresses .customer.addresses .select svg {
    display: none
}

.template-customers-addresses .customer.addresses a,
.template-customers-addresses .customer.addresses button {
    text-decoration: underline
}

#ReCharge {
    padding: 150px 0 0
}

/*# sourceMappingURL=/cdn/shop/t/18/assets/app.css.map?v=93222507857934228391720466099 */