/* ====================================================================== */
/* ======== ASSORTIMENTS ================================================ */
/* ====================================================================== */

#categories_home {
content-visibility:auto;
contain:layout style paint;
contain-intrinsic-size:auto 650px;
overflow:visible !important;
padding:0 0 50px 0
}

#summervibes_left_bg {
display:inline-block;
position:absolute;
z-index:10500;
width:250px;
height:auto;
top:12%;
left:0;
margin:0;
padding:0
}

#summervibes_right_bg {
display:inline-block;
position:absolute;
z-index:10500;
width:250px;
height:auto;
top:6%;
right:0;
margin:0;
padding:0
}

#cache_top_categories {
display:inline-block;
position:relative;
width:100%;
height:auto;
aspect-ratio:1600/150;
margin:0;
padding:0
}

#categories_produits_home {
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
margin:40px 0 10px 0;
padding:0
}

#categories_produits_home article {
flex:1;
position:relative;
text-align:center;
overflow:hidden
}

#categories_produits_home a {
display:inline-block;
position:relative;
width:100%;
overflow:hidden;
margin:0;
padding:0
}

#categories_produits_home img {
display:block;
width:100%;
height:auto;
aspect-ratio:500/400;
object-fit:contain;
transition:transform 0.8s ease;
margin:0
}

#categories_produits_home a::after {
position:absolute;
z-index:9996;
content:'';
width:100%;
height:100%;
background-size:cover;
pointer-events:none;
top:0;
left:0
}

#categories_produits_home a.greenCache::after { background-image:url('./img/cacheImgGreen.webp') }
#categories_produits_home a.blueCache::after { background-image:url('./img/cacheImgBlue.webp') }
#categories_produits_home a.yellowCache::after { background-image:url('./img/cacheImgYellow.webp') }

#categories_produits_home a span,
#categories_produits_home a h3 {
display:inline-block;
position:absolute;
z-index:9997;
width:100%;
text-align:center;
background-repeat:no-repeat;
background-position:center center;
background-size:auto;
font-family:felt-tip-roman, sans-serif;
color:white;
bottom:0;
left:0;
margin:0;
padding:25px;
}

#categories_produits_home a:hover span,
#categories_produits_home a:hover h3 { color:white }

#categories_produits_home a:hover img { transform:scale(1.1) }

.greenCache span,
.greenCache h3 { background-image:url('./img/ribbonGreen.webp') }
.blueCache span,
.blueCache h3 { background-image:url('./img/ribbonBlue.webp') }
.yellowCache span,
.yellowCache h3 { background-image:url('./img/ribbonYellow.webp') }

.greenCache:hover h2,
.greenCache:hover h3,
.greenCache:hover span,
.greenCacheCat:hover h2,
.greenCacheCat:hover h3,
.greenCacheCat:hover span {
background-image:url('./img/ribbonWhite.webp') !important;
color:var(--subColorA) !important
}

.blueCache:hover span,
.blueCache:hover h2,
.blueCache:hover h3,
.blueCacheCat:hover h2,
.blueCacheCat:hover h3,
.blueCacheCat:hover span {
background-image:url('./img/ribbonWhite.webp') !important;
color:var(--mainColorA) !important
}

.yellowCache:hover h2,
.yellowCache:hover h3,
.yellowCache:hover span,
.yellowCacheCat:hover h2,
.yellowCacheCat:hover h3,
.yellowCacheCat:hover span {
background-image:url('./img/ribbonWhite.webp') !important;
color:var(--extraColorA) !important
}

#categories_liste,
#categories_liste2 {
flex-wrap:wrap;
justify-content:space-between;
gap:25px;
margin:40px 0 10px 0;
padding:0
}

#categorie_solo {
flex-wrap:wrap;
justify-content:space-between;
gap:0;
margin:0;
padding:0
}

#categories_liste { display:flex }

#categories_liste2 { display:none }

#categories_liste article {
flex:1 1 calc(33.333% - 25px);
max-width:500px;
position:relative;
text-align:center;
box-sizing:border-box;
overflow:hidden;
margin-bottom:30px
}

#categories_liste2 article,
#categorie_solo article {
display:inline-block;
position:relative;
vertical-align:middle;
width:100%;
overflow:hidden;
margin:0 0 30px 0;
padding:0
}

#categories_liste a {
display:block;
position:relative;
width:100%;
margin:0;
padding:0
}

#categories_liste2 article > a,
#categorie_solo article > div:nth-child(1) {
display:inline-block;
position:relative;
vertical-align:middle;
width:20%;
overflow:hidden;
margin:0 5% 0 0;
padding:0
}

#categories_liste2 div,
#categorie_solo article > div:nth-child(2) {
display:inline-block;
position:relative;
vertical-align:middle;
width:75%;
margin:0;
padding:0
}

#categories_liste img,
#categories_liste2 img,
#categorie_solo article > div:nth-child(1) img {
display:block;
width:100%;
height:auto;
max-width:800px;
max-height:800px;
margin:0;
object-fit:contain;
transition:transform 0.8s ease
}

#categories_liste a::after,
#categories_liste2 a::after,
#categorie_solo article > div:nth-child(1)::after {
position:absolute;
z-index:9996;
content:'';
width:100%;
height:100%;
background-size:cover;
pointer-events:none;
top:0;
left:0
}

#categories_liste a.greenCacheCat::after,
#categories_liste2 a.greenCacheCat::after,
#categorie_solo div.greenCacheCat::after { background-image:url('./img/cacheNewsGreens.webp') }

#categories_liste a.blueCacheCat::after,
#categories_liste2 a.blueCacheCat::after,
#categorie_solo div.blueCacheCat::after { background-image:url('./img/cacheNewsBlue.webp') }

#categories_liste a.yellowCacheCat::after,
#categories_liste2 a.yellowCacheCat::after,
#categorie_solo div.yellowCacheCat::after { background-image:url('./img/cacheNewsOrange.webp') }

#categories_liste a span,
#categories_liste a h2 {
display:inline-block;
position:absolute;
z-index:9997;
width:auto;
height:auto;
max-width:80%;
max-height:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
font-family:felt-tip-roman, sans-serif;
color:white;
bottom:25px;
left:0;
right:0;
margin:0 auto;
padding:25px 50px
}

#categories_liste a:hover span,
#categories_liste a:hover h2 { color:white }

#categories_liste a:hover img,
#categories_liste2 a:hover img,
#categorie_solo:hover img { transform:scale(1.1) }

#categories_liste .blueCacheCat span,
#categories_liste .blueCacheCat h2 { background-image:url('./img/ribbonBlue2HD.webp') !important }
#categories_liste .blueCacheCat:hover span,
#categories_liste .blueCacheCat:hover h2 { background-image:url('./img/ribbonWhite2HD.webp') !important }

/* ====================================================================== */
/* ======== LISTING PRODUCTS ============================================ */
/* ====================================================================== */

#vueCategories a {
display:inline-block;
position:relative;
width:auto;
font-family:cronos-pro, sans-serif;
margin:0 20px 0 0;
padding:0
}

#vueCategories a:last-of-type { margin:0 }

.vueNonActive { 
text-decoration:underline;
color:green;
font-weight:700
}

.vueNonActive:hover { 
text-decoration:none;
color:grey;
font-weight:700
}

.vueActive { 
text-decoration:none;
color:grey;
font-weight:400
}

.vueActive:hover { 
text-decoration:underline;
color:green;
font-weight:400
}

#produits_liste {
display:flex;
flex-wrap:wrap
}

#produits_liste article {
position:relative;
width:calc(33% - 4%);
margin:2%;
padding:0
}

#produits_liste article:nth-child(3n+1) { margin-left:0 }

#produits_liste article:nth-child(3n) { margin-right:0 }

#produits_liste article a {
display:block;
position:relative;
background:url('./img/cacheProduitHome.webp') no-repeat center center;
background-size:contain;
padding-top:100%
}

#produits_liste article .img-container {
position:absolute;
display:flex;
align-items:center;
justify-content:center;
top:0;
right:0;
bottom:0;
left:0
}

#produits_liste article .img-container img {
max-width:70%;
max-height:70%;
object-fit:contain
}

#produits_liste a span {
display:flex;
align-items:center;
justify-content:center;
position:absolute;
z-index:9997;
width:auto;
height:auto;
min-height:90px;
max-width:100%;
max-height:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
text-align:center;
font-family:felt-tip-roman, sans-serif;
color:white;
line-height:1.5;
bottom:25px;
left:0;
right:0;
margin:0 auto;
padding:0 32px
}

#produits_liste a:hover span { color:white }

#produits_liste a:hover img { transform:scale(1.1) }

#produits_liste .greenCacheCat span { background-image:url('./img/ribbonGreen2HD.webp') }
#produits_liste .blueCacheCat span { background-image:url('./img/ribbonBlue2HD.webp') }
#produits_liste .yellowCacheCat span { background-image:url('./img/ribbonYellow2HD.webp') }

#produits_liste .greenCacheCat:hover span,
#produits_liste .greenCacheCat:hover a span  {
background-image:url('./img/ribbonWhite2HD.webp');
color:var(--subColorA) !important
}

#produits_liste .blueCacheCat:hover span,
#produits_liste .blueCacheCat:hover a span {
background-image:url('./img/ribbonWhite2HD.webp');
color:var(--mainColorA) !important
}

#produits_liste .yellowCacheCat:hover span,
#produits_liste .yellowCacheCat:hover a span  {
background-image:url('./img/ribbonWhite2HD.webp');
color:var(--extraColorA) !important
}

#produit_intro {
display:flex;
width:100%;
margin:0;
padding:0;
}

#produit_intro > div:nth-child(1) {
flex:6;
margin-right:5%;
}

#produit_intro > div:nth-child(2) {
position:relative;
display:flex;
flex:3.5;
align-items:center;
justify-content:center;
background:url('./img/cacheProduitWhite.webp') no-repeat center center;
background-size:contain
}

#produit_intro > div:nth-child(2) div {
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:0;
padding-bottom:100%
}

#produit_intro > div:nth-child(2) div img {
position:absolute;
width:70%;
height:70%;
object-fit:contain;
transform:translate(-50%, -50%);
top:50%;
left:50%
}

#produit_valeurs ul {
display:flex;
flex-wrap:wrap;
justify-content:center;
width:100%;
list-style-type:none;
margin:0;
padding:0
}

#produit_valeurs ul li {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:calc(20% - 10px);
height:150px;
text-align:center;
margin:5px;
padding:0
}

#produit_valeurs ul li.cacheBlue { background:url('./img/cacheNutritionBlue.webp') no-repeat center center; background-size:contain }
#produit_valeurs ul li.cacheGreen { background:url('./img/cacheNutritionGreen.webp') no-repeat center center; background-size:contain }
#produit_valeurs ul li.cacheYellow { background:url('./img/cacheNutritionYellow.webp') no-repeat center center; background-size:contain }

#produit_valeurs li span {
width:70%;
margin:0 15% 10px 15%;
padding:0 25px
}

.produitLabel img {
display:inline-block;
position:relative;
width:150px;
height:auto;
margin:0
}

#produit_similaire #produits_liste article:nth-child(1),
#produit_similaire #produits_liste article:nth-child(2),
#produit_similaire #produits_liste article:nth-child(3) { margin-top:0 }

/* ====================================================================== */
/* ======== PRODUCTS HOME =============================================== */
/* ====================================================================== */

#produits_home {
background-color:var(--extraColorA);
content-visibility:auto;
contain:layout style paint;
contain-intrinsic-size:auto 1250px;
font-size:0;
padding:0
}

#cache_top_produits {
display:inline-block;
position:relative;
width:100%;
height:auto;
aspect-ratio:1600/260;
line-height:0;
font-size:0;
margin:0;
padding:0
}

#cache_top_produits::before {
content:'';
position:absolute;
z-index:9990;
width:100%;
height:6px;
background-color:#ffb500;
bottom:-3px;
left:0
}

#produits_month_home {
display:flex;
justify-content:space-between;
align-items:top;
width:100%;
gap:50px;
margin:0 0 40px 0;
padding:0;
}

#produits_month_home a {
flex:1;
position:relative;
text-align:center
}

#produits_month_home a div,
.splide__slide.produitHome a div {
position:relative;
width:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
margin:0;
padding-bottom:100%
}

#produits_month_home a:nth-child(6n+1) div,
.splide__slide.produitHome:nth-child(6n+1) a div { background-image:url('./img/cacheProduitHome.webp') }
#produits_month_home a:nth-child(6n+2) div,
.splide__slide.produitHome:nth-child(6n+2) a div { background-image:url('./img/cacheProduitHome.webp') }
#produits_month_home a:nth-child(6n+3) div,
.splide__slide.produitHome:nth-child(6n+3) a div { background-image:url('./img/cacheProduitHome.webp') }
#produits_month_home a:nth-child(6n+4) div,
.splide__slide.produitHome:nth-child(6n+4) a div { background-image:url('./img/cacheProduitHome.webp') }
#produits_month_home a:nth-child(6n+5) div,
.splide__slide.produitHome:nth-child(6n+5) a div { background-image:url('./img/cacheProduitHome.webp') }
#produits_month_home a:nth-child(6n+6) div,
.splide__slide.produitHome:nth-child(6n+6) a div { background-image:url('./img/cacheProduitHome.webp') }

#produits_month_home a:hover div,
.splide__slide.produitHome a:hover div { background-image:url('./img/cacheProduitHome_hover.webp') }

#produits_month_home a div img,
.splide__slide.produitHome a div img {
position:absolute;
max-width:70%;
max-height:70%;
height:auto;
width:auto;
transition:transform 0.3s ease-out; 
top:0;
left:0;
bottom:0;
right:0;
margin:auto
}

#produits_month_home a:hover div img,
.splide__slide.produitHome a:hover div img { transform:scale(1.05) }

.splide__slide.produitHome a span,
.splide__slide.produitHome a h4 {
display:inline-block;
position:relative;
width:100%;
font-size:1.2rem;
text-align:center;
font-family:felt-tip-roman, sans-serif;
margin:10px 0 0 0;
padding:0
}

#produits_month_home a span,
#produits_month_home a h4 {
display:inline-block;
position:relative;
width:100%;
font-size:1.6rem;
text-align:center;
font-family:felt-tip-roman, sans-serif;
margin:10px 0 0 0;
padding:0
}

#produits_month_home a:hover span,
.splide__slide.produitHome a:hover span,
#produits_month_home a:hover h4,
.splide__slide.produitHome a:hover h4 { color:var(--subColorA) }

.splide__slide.produitHome img {
width:100%;
height:auto
}

#produits_selection_home,
#ingredients_pural {
display:inline-block;
position:relative;
width:100%;
margin:0;
padding:0
}

.wrapCategory {
display:inline-block;
position:relative;
width:100%;
min-height:2200px;
margin:0;
padding:0
}

#wrapCategory7 {
background:url('./img/bgCat7_left.webp') no-repeat left 450px, url('./img/bgCat7_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory8 {
background:url('./img/bgCat8_left.webp') no-repeat left 450px, url('./img/bgCat8_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory9 {
background:url('./img/bgCat9_left.webp') no-repeat left 450px, url('./img/bgCat9_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory10 {
background:url('./img/bgCat10_left.webp') no-repeat left 450px, url('./img/bgCat10_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory11 {
background:url('./img/bgCat11_left.webp') no-repeat left 450px, url('./img/bgCat11_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory12 {
background:url('./img/bgCat12_left.webp') no-repeat left 450px, url('./img/bgCat12_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory13 {
background:url('./img/bgCat13_left.webp') no-repeat left 450px, url('./img/bgCat13_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory14 {
background:url('./img/bgCat14_left.webp') no-repeat left 450px, url('./img/bgCat14_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory15 {
background:url('./img/bgCat15_left.webp') no-repeat left 450px, url('./img/bgCat15_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory16 {
background:url('./img/bgCat16_left.webp') no-repeat left 450px, url('./img/bgCat16_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory17 {
background:url('./img/bgCat17_left.webp') no-repeat left 450px, url('./img/bgCat17_right.webp') no-repeat right 450px;
background-size:auto
}

#wrapCategory18 {
background:url('./img/bgCat18_left.webp') no-repeat left 450px, url('./img/bgCat18_right.webp') no-repeat right 450px;
background-size:auto
}

/* ====================================================================== */
/* ======== LABELS ====================================================== */
/* ====================================================================== */

#cache_top_labels {
display:inline-block;
position:relative;
width:100%;
height:auto;
aspect-ratio:1600/260;
line-height:0;
font-size:0;
top:-2px !important;
margin:-2px 0 12px 0 !important;
padding:0
}

#labels_home {
display:block;
background:url('./img/Summervibes/labelBG_left_summervibes.webp') no-repeat left center, url('./img/Summervibes/labelBG_right_summervibes.webp') no-repeat right center;
background-size:auto 100%;
content-visibility:auto;
contain:layout style paint;
contain-intrinsic-size:auto 950px;
padding-top:0 !important;
padding-left:0;
padding-right:0
}

#labels_home.section {
display:block;
height:100% !important;
height:auto !important;
overflow:visible !important;
padding:0 !important
}

#labels_home .content { overflow:visible !important }

.labels_carousel {
display:block;
position:relative;
overflow:visible;
text-align:center;
width:100%;
height:850px;
margin:50px 0 25px
}

.labels_list {
display:block;
position:relative;
align-items:center;
justify-content:center;
list-style:none;
width:100%;
max-width:1200px;
height:850px;
margin:0 auto
}

.labels_item {
position:absolute;
width:80%;
height:auto;
transition:all 0.3s ease-in;
transform-origin:center center;
list-style:none
}

.labels_item[data-pos="0"] {
z-index:5;
transform:translateX(20%)
}

.labels_item[data-pos="1"] {
z-index:4;
transform:translateX(10%)
}

.labels_item[data-pos="-1"] {
z-index:3;
transform:translateX(0)
}

.labels_item .label_card {
display:block;
width:100%;
height:auto;
aspect-ratio:753/593
}

.labels_item section {
display:inline-block;
position:absolute;
width:80%;
height:80%;
top:10%;
left:10%;
margin:0;
padding:0
}

.labels_item section > div:nth-child(1) {
display:flex;
align-items:center;
margin:0 0 25px 0;
padding:0
}

.labels_item section > div:nth-child(1) img {
display:inline-block;
position:relative;
width:25%;
height:auto;
aspect-ratio:1/1;
box-sizing:border-box;
vertical-align:middle;
margin:0 5% 0 0;
padding:0
}

.labels_item section > div:nth-child(1) div {
display:inline-block;
position:relative;
width:70%;
box-sizing:border-box;
vertical-align:middle;
margin:0;
padding:0
}

.labels_item section > div:nth-child(1) div p:nth-child(1) { font-size:3.00rem }
.labels_item section > div:nth-child(1) div p:nth-child(2) { font-size:1.50rem }

.labels_item section > div:nth-child(2) { font-size:1.00rem }

/* ====================================================================== */
/* ======== BRANDS ====================================================== */
/* ====================================================================== */


#recherche_marques {
display:inline-block;
position:relative;
width:100%;
background-color:#f1f1f1;
margin:0;
padding:10px
}

#affiner_marques {
width:100%;
margin:0;
padding:0
}

#affiner_marques > div {
display:flex;
flex-wrap:wrap;
margin:0 0 25px 0
}

#affiner_marques > div > p {
flex:1;
margin:0
}

#affiner_marques > div > p:nth-child(1) {
 flex-basis:30%
}

#affiner_marques > div > p:nth-child(2) {
flex-basis:70%
}

#affiner_marques > p:nth-child(2),
#affiner_marques > p:nth-child(3),
#affiner_marques > p:nth-child(4) {
width:100%;
margin: 0 0 25px 0
}

#affiner_marques label {
display:inline-block;
position:relative;
width:125px;
vertical-align:middle;
color:var(--mainColorA);
margin:0 15px 0 0;
padding:0
}

#affiner_marques select,
#affiner_marques input {
display:inline-block;
position:relative;
width:auto;
vertical-align:middle;
color:#c4c1c1;
background-color:white;
border:solid 1px #e3e3e3;
border-radius:4px;
margin:0;
padding:6px
}

.premiereLettre {
display:inline-block;
position:relative;
width:20px;
background-color:var(--subColorA);
color:white;
font-size:0.8rem;
text-align:center;
border:none;
border-radius:4px;
cursor:pointer;
margin:0 5px 0 0;
padding:4px 0 2px 0
}

.premiereLettre:hover { background-color:var(--mainColorA) }

.detailsMarque {
display:inline-block;
position:relative;
width:auto;
background-color:#c8cf0f;
color:white;
font-size:0.8rem;
text-align:center;
border:none;
border-radius:4px;
cursor:pointer;
margin:0 5px 0 0;
padding:5px 10px 3px 10px
}

.detailsMarque:hover { background-color:var(--mainColorA) !important }

.premiereLettre.checked,
.detailsMarque.checked { background-color:var(--mainColorA) !important }

#marques_liste {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:space-between;
width:100%;
margin:40px 0
}

#marques_liste::after {
content:"";
flex:auto
}

#marques_liste article {
flex:0 0 calc(20% - 30px);
border:solid 1px #f6f6f6;
box-shadow:rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin:0 15px 40px 15px;
padding:25px 0 0 0
}

#marques_liste article:hover {
border:solid 1px #f2f2f2;
box-shadow:none
}

#marques_liste article div {
position:relative;
width:80%;
background-color:white;
margin:0 10%;
padding-bottom:80%
}

#marques_liste article div img {
position:absolute;
max-width:100%;
max-height:100%;
height:auto;
width:auto;
top:0;
left:0;
bottom:0;
right:0;
margin:auto
}

#marques_liste h2 {
display:inline-block;
position:relative;
width:100%;
font-weight:400;
border-bottom:solid 6px var(--subColorA);
margin:10px 0 0 0;
padding:0 0 12px 0
}

#marque_motsClefs_ok { margin:0 0 0 10px }

#marque_motsClefs_no { margin:0 0 0 5px }

#marques_reset {
display:inline-block;
position:absolute;
width:auto;
text-decoration:none;
color:red;
font-size:0.7rem;
border:none;
background:none;
cursor:pointer;
bottom:10px;
right:10px;
margin:0;
padding:0
}

#marques_reset i {
display:inline-block;
position:relative;
vertical-align:middle;
width:auto;
margin:0 5px 0 0
}

#marques_reset span {
display:inline-block;
position:relative;
vertical-align:middle;
width:auto;
margin:0
}

:root {
--product_turquoise:#3DBFCA;
--product_turquoiseDark:#0F5A61;
--product_green:#3FA45C;
--product_greenDark:#1E6B3C;
--product_yellow:#F5C518;
--product_yellowDark:#6B5200;
--product_coral:#EF7D57;
--product_coralDark:#7A2A10;
--product_mint:#B8E8C8;
--product_ink:#26352C;
--product_grey:#5C6B61;
--product_line:#E2EEE6;
--product_cream:#F4F9F2;
--product_trail:#D2E6D8;
--product_radius:24px;
--product_ease:cubic-bezier(.34,1.56,.64,1)
}

#product_page {
position:relative;
overflow-x:hidden;
color:var(--product_ink);
margin:0;
padding:clamp(48px,8vw,96px) 0 clamp(60px,8vw,110px)
}

#product_page::before {
position:absolute;
content:"";
width:clamp(260px,30vw,440px);
height:clamp(260px,30vw,440px);
background-image:url(/img/responsabilite.png);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:.16;
pointer-events:none;
top:-70px;
right:-70px;
transform:rotate(11deg)
}

.product_wrap {
width:100%;
max-width:1320px;
margin:0 auto;
padding:0 clamp(16px,4vw,52px)
}

.product_visuallyHidden {
position:absolute;
overflow:hidden;
width:1px;
height:1px;
clip:rect(0 0 0 0);
white-space:nowrap
}

.product_skipLink {
position:absolute;
z-index:50;
background:var(--product_green);
text-decoration:none;
font-weight:800;
color:#fff;
top:-60px;
left:16px;
transition:top .2s var(--product_ease);
border-radius:0 0 12px 12px;
padding:12px 20px
}

.product_skipLink:focus-visible {
top:0
}

#product_hero {
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
gap:clamp(28px,5vw,64px);
align-items:start;
margin-bottom:clamp(44px,5vw,76px)
}

#product_gallery {
position:relative;
z-index:0
}

#product_gallery::before {
position:absolute;
z-index:0;
content:"";
width:74%;
height:74%;
background:var(--product_yellow);
border-radius:46% 54% 52% 48%/54% 46% 54% 46%;
opacity:.95;
right:-16px;
bottom:-16px
}

#product_gallery::after {
position:absolute;
z-index:0;
content:"";
width:120px;
height:120px;
background:var(--product_green);
border-radius:50%;
opacity:.92;
top:-12px;
left:-12px
}

#product_galleryMain {
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1/1;
overflow:hidden;
background:#fff;
border-radius:var(--product_radius);
box-shadow:0 26px 54px -26px rgba(20,80,44,.55);
margin:0;
padding:clamp(20px,4vw,48px)
}

#product_mainImage {
display:block;
width:100%;
height:100%;
object-fit:contain;
transition:transform .5s var(--product_ease)
}

#product_galleryMain:hover #product_mainImage {
transform:scale(1.04)
}

#product_thumbs {
position:relative;
z-index:1;
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:18px
}

.product_thumb {
display:block;
overflow:hidden;
width:74px;
height:74px;
background:#fff;
border:2px solid var(--product_line);
border-radius:16px;
opacity:.7;
cursor:pointer;
transition:border-color .25s var(--product_ease),opacity .25s var(--product_ease),transform .25s var(--product_ease);
padding:6px
}

.product_thumb img {
display:block;
width:100%;
height:100%;
object-fit:contain
}

.product_thumb:hover {
opacity:1;
transform:translateY(-3px)
}

.product_thumbActive {
border-color:var(--product_turquoise);
opacity:1
}

.product_thumb:focus-visible {
outline:3px solid var(--product_turquoiseDark);
outline-offset:2px
}

#product_summary {
display:flex;
flex-direction:column;
gap:18px
}

#product_subtitle {
font-weight:800;
color:var(--product_turquoiseDark);
line-height:1.35;
margin:0
}

#product_ratingSummary {
display:flex;
align-items:center;
gap:10px
}

.product_starsRead {
position:relative;
display:inline-block;
width:5.6em;
height:1em;
font-size:19px;
line-height:1
}

.product_starsRead::before {
display:block;
content:"\2605\2605\2605\2605\2605";
letter-spacing:.1em;
color:#D7E5DC
}

.product_starsRead::after {
position:absolute;
display:block;
width:var(--product_rate,0%);
overflow:hidden;
content:"\2605\2605\2605\2605\2605";
letter-spacing:.1em;
color:var(--product_yellow);
top:0;
left:0
}

.product_ratingValue {
font-weight:800
}

.product_ratingMax {
font-weight:700;
color:var(--product_grey)
}

#product_presentation {
line-height:1.65
}

#product_presentation p {
margin:0 0 12px
}

#product_bioDetails {
line-height:1.6;
margin:0
}

#product_labels {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
margin:4px 0
}

#product_labels img {
display:block;
width:auto;
height:48px
}

#product_controle {
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
color:var(--product_greenDark);
margin:0
}

#product_controle i {
color:var(--product_green)
}

#product_actions {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
margin-top:6px
}

.product_btnBuy {
display:inline-flex;
align-items:center;
gap:12px;
background:linear-gradient(135deg,var(--product_green) 0%,var(--product_greenDark) 100%);
border-radius:60px;
box-shadow:0 14px 28px -16px rgba(20,80,44,.85);
text-decoration:none;
text-transform:uppercase;
font-size:17px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
cursor:pointer;
transition:transform .25s var(--product_ease);
padding:16px 30px
}

.product_btnBuy i {
font-size:19px
}

.product_btnBuy:hover {
transform:translateY(-3px)
}

.product_btnShare {
display:inline-flex;
align-items:center;
gap:10px;
background:#fff;
border:2px solid var(--product_turquoise);
border-radius:60px;
font-size:16px;
font-weight:800;
color:var(--product_turquoiseDark);
cursor:pointer;
transition:background .25s var(--product_ease),color .25s var(--product_ease),transform .25s var(--product_ease);
padding:13px 24px
}

.product_btnShare:hover {
background:var(--product_turquoise);
color:#0C3A40;
transform:translateY(-3px)
}

.product_btnBuy:focus-visible,
.product_btnShare:focus-visible {
outline:3px solid var(--product_greenDark);
outline-offset:3px
}

#product_rateBox {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
width:100%;
border-top:1px dashed var(--product_line);
margin-top:6px;
padding-top:16px
}

#product_rateBox > p {
font-weight:700;
margin:0
}

#product_rateStars {
display:inline-flex;
flex-direction:row-reverse;
gap:4px;
border:0;
margin:0;
padding:0
}

#product_rateStars input {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
opacity:0
}

#product_rateStars label {
font-size:26px;
color:#D7E5DC;
cursor:pointer;
transition:transform .15s var(--product_ease),color .15s var(--product_ease)
}

#product_rateStars label:hover,
#product_rateStars label:hover ~ label,
#product_rateStars input:checked ~ label {
color:var(--product_yellow)
}

#product_rateStars label:hover {
transform:scale(1.18)
}

#product_rateStars input:focus-visible + label {
outline:3px solid var(--product_yellowDark);
outline-offset:3px;
border-radius:4px
}

#product_rateFeedback {
width:100%;
margin:0
}

#product_facts {
display:grid;
position:relative;
grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
gap:clamp(24px,4vw,52px);
align-items:start;
margin-bottom:clamp(44px,5vw,72px)
}


#product_facts::before {
position:absolute;
content:"";
width:clamp(260px,30vw,440px);
height:clamp(260px,30vw,440px);
background-image:url(/img/origines.png);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:.16;
pointer-events:none;
bottom:-70px;
left:-70px;
transform:rotate(11deg)
}

.product_blockTitle {
font-size:clamp(22px,3vw,30px);
font-weight:900;
line-height:1.2;
margin:0 0 18px
}

.product_titleTurquoise { color:var(--product_turquoiseDark) }

.product_titleYellow { color:var(--product_yellowDark) }

.product_titleGreen { color:var(--product_greenDark) }

.product_titleCoral { color:var(--product_coralDark) }

#product_ingredients p {
line-height:1.65;
margin:0 0 12px
}

#product_nutrition {
background:#fff;
border:1px solid var(--product_line);
border-radius:var(--product_radius);
box-shadow:0 18px 40px -26px rgba(20,80,44,.5);
padding:clamp(18px,3vw,28px)
}

#product_nutritionTable {
width:100%;
border-collapse:collapse;
font-size:15px
}

#product_nutritionTable caption {
text-align:left;
margin-bottom:10px
}

#product_nutritionTable th,
#product_nutritionTable td {
text-align:left;
border-bottom:1px solid var(--product_line);
padding:10px 4px
}

#product_nutritionTable td {
text-align:right;
font-weight:800;
white-space:nowrap
}

#product_nutritionTable tr:last-child th,
#product_nutritionTable tr:last-child td {
border-bottom:0
}

.product_nutritionSub th {
font-size:13px;
color:var(--product_grey);
padding-left:18px
}

#product_pillars {
position:relative;
overflow:hidden;
background:linear-gradient(180deg,#F4F9F2 0%,#E9F4EB 100%);
margin:0;
padding:clamp(50px,6vw,84px) 0
}

.product_pillarsHead {
text-align:center;
max-width:760px;
margin:0 auto clamp(34px,4vw,52px)
}

.product_pillarsEyebrow {
display:inline-flex;
align-items:center;
gap:9px;
text-transform:uppercase;
font-size:13px;
font-weight:900;
letter-spacing:3px;
color:var(--product_green);
margin:0
}

.product_pillarsEyebrow i {
color:var(--product_coral);
font-size:15px
}

.product_pillarsTitle {
position:relative;
display:inline-block;
font-size:clamp(28px,3.8vw,44px);
font-weight:900;
line-height:1.08;
color:var(--product_greenDark);
margin:12px 0 18px
}

.product_pillarsTitle::after {
position:absolute;
content:"";
width:58%;
height:8px;
background:var(--product_coral);
border-radius:8px;
bottom:-8px;
left:21%;
transform:skewX(-12deg)
}

.product_pillarsLead {
font-size:17px;
font-weight:700;
line-height:1.55;
color:var(--product_grey);
margin:0
}

#product_pillarsGrid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr))
}

.product_pillarCard {
position:relative;
display:flex;
text-decoration:none;
color:inherit;
cursor:pointer
}

.product_pillarCard + .product_pillarCard::before {
position:absolute;
z-index:0;
content:"";
top:14px;
bottom:14px;
left:0;
border-left:2px dotted var(--product_trail)
}

.product_pillarCard:hover::before,
.product_pillarCard:hover + .product_pillarCard::before {
border-color:transparent
}

.product_pillarCard:focus-visible {
outline:3px solid var(--product_greenDark);
outline-offset:3px;
border-radius:24px
}

.product_pillarCardInner {
display:flex;
flex-direction:column;
width:100%;
background:#fff0;
border-radius:24px;
transition:transform .35s var(--product_ease),box-shadow .35s var(--product_ease),background .35s var(--product_ease);
padding:24px clamp(20px,2vw,30px) 26px
}

.product_pillarCard:hover .product_pillarCardInner {
background:#fff;
box-shadow:0 28px 50px -26px rgba(20,80,44,.4);
transform:translateY(-6px)
}

.product_pillarCardIcon {
display:flex;
align-items:center;
justify-content:center;
width:76px;
height:76px;
border-radius:50%;
font-size:32px;
transition:transform .4s var(--product_ease)
}

.product_pillarCard:hover .product_pillarCardIcon {
transform:translateY(-4px) scale(1.07) rotate(-4deg)
}

.product_pillarCardTitle {
font-size:21px;
font-weight:900;
line-height:1.15;
margin:18px 0 10px
}

.product_pillarCardText {
font-size:15px;
font-weight:600;
line-height:1.62;
color:var(--product_grey);
margin:0 0 22px
}

.product_pillarCardBtn {
display:inline-flex;
align-self:flex-start;
align-items:center;
gap:8px;
border:2px solid;
border-radius:40px;
font-size:14px;
font-weight:900;
margin-top:auto;
transition:background .3s var(--product_ease),color .3s var(--product_ease),border-color .3s var(--product_ease);
padding:9px 18px
}

.product_pillarCardBtn i {
transition:transform .3s var(--product_ease)
}

.product_pillarCardBtn:hover i {
transform:translateX(4px)
}

.product_pillarCard--origine .product_pillarCardIcon { background:var(--product_turquoise); color:#fff }

.product_pillarCard--origine .product_pillarCardTitle { color:var(--product_turquoiseDark) }

.product_pillarCard--origine .product_pillarCardBtn { background:rgba(61,191,202,0); color:var(--product_turquoiseDark) }

.product_pillarCard--origine .product_pillarCardBtn:hover { background:rgba(61,191,202,1); border-color:var(--product_turquoise); color:#0C3A40 }

.product_pillarCard--social .product_pillarCardIcon { background:var(--product_yellow); color:var(--product_yellowDark) }

.product_pillarCard--social .product_pillarCardTitle { color:var(--product_yellowDark) }

.product_pillarCard--social .product_pillarCardBtn { background:rgba(245,197,24,0); color:var(--product_yellowDark) }

.product_pillarCard--social .product_pillarCardBtn:hover { background:rgba(245,197,24,1); border-color:var(--product_yellow); color:#4A3800 }

.product_pillarCard--engagement .product_pillarCardIcon { background:var(--product_green); color:#fff }

.product_pillarCard--engagement .product_pillarCardTitle { color:var(--product_greenDark) }

.product_pillarCard--engagement .product_pillarCardBtn { background:rgba(63,164,92,0); color:var(--product_greenDark) }

.product_pillarCard--engagement .product_pillarCardBtn:hover { background:rgba(63,164,92,1); border-color:var(--product_green); color:#fff }

.product_pillarCard--plaisir .product_pillarCardIcon { background:var(--product_coral); color:#fff }

.product_pillarCard--plaisir .product_pillarCardTitle { color:var(--product_coralDark) }

.product_pillarCard--plaisir .product_pillarCardBtn { background:rgba(239,125,87,0); color:var(--product_coralDark) }

.product_pillarCard--plaisir .product_pillarCardBtn:hover { background:rgba(239,125,87,1); border-color:var(--product_coral); color:#5A1E0C }

.product_pillar {
position:relative;
overflow:hidden;
margin:0;
padding:clamp(48px,7vw,92px) 0
}

.product_pillar::before {
position:absolute;
z-index:0;
content:"";
width:clamp(260px,30vw,440px);
height:clamp(260px,30vw,440px);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:.16;
pointer-events:none
}

.product_pillar > .product_wrap {
position:relative;
z-index:1
}

.product_pillar--origine {
background:#E8F6F8
}

.product_pillar--origine::before {
background-image:url(/img/planete.png);
top:-70px;
right:-70px;
transform:rotate(11deg)
}

.product_pillar--social {
background:#FEF7E0
}

.product_pillar--social::before {
background-image:url(/img/main.png);
top:-80px;
left:-60px;
transform:rotate(-9deg)
}

.product_pillar--engagement {
background:#E9F4EC
}

.product_pillar--engagement::before {
background-image:url(/img/engagement.png);
top:-60px;
right:-70px;
transform:rotate(-13deg)
}

.product_pillar--plaisir {
background:#FDEDE7
}

.product_pillar--plaisir::before {
background-image:url(/img/plaisir.png);
bottom:-70px;
left:-60px;
transform:rotate(14deg)
}

.product_pillarHead {
display:flex;
align-items:center;
gap:18px;
margin-bottom:24px
}

.product_pillarBadge {
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:64px;
height:64px;
border-radius:22px;
font-size:28px
}

.product_pillarBadge--origine { background:var(--product_turquoise); color:#fff }

.product_pillarBadge--social { background:var(--product_yellow); color:var(--product_yellowDark) }

.product_pillarBadge--engagement { background:var(--product_green); color:#fff }

.product_pillarBadge--plaisir { background:var(--product_coral); color:#fff }

.product_pillarTitle {
font-size:clamp(26px,4vw,40px);
font-weight:900;
line-height:1.1;
margin:0
}

.product_origineGrid {
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
gap:28px;
align-items:stretch
}

#product_originesMap {
width:100%;
min-height:440px;
height:100%;
overflow:hidden;
background:#dfeef0;
border-radius:var(--product_radius)
}

#product_originesList {
display:flex;
flex-direction:column;
gap:14px;
max-height:520px;
overflow-y:auto;
list-style:none;
margin:0;
padding:0
}

.product_origineItem {
display:flex;
gap:14px;
background:#fff;
border:1px solid var(--product_line);
border-radius:18px;
cursor:pointer;
transition:transform .25s var(--product_ease),border-color .25s var(--product_ease);
padding:16px
}

.product_origineItem:hover,
.product_origineItemActive {
border-color:var(--product_turquoise);
transform:translateY(-3px)
}

.product_origineMarker {
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:32px;
height:32px;
background:var(--product_turquoise);
border-radius:50%;
font-weight:900;
color:#fff
}

.product_origineIngredient {
font-weight:800;
margin:0 0 4px
}

.product_origineLieu {
font-weight:700;
color:var(--product_turquoiseDark);
margin:0
}

#product_socialItems {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
list-style:none;
margin:0 0 44px;
padding:0
}

.product_socialItem {
display:flex;
flex-direction:column;
gap:10px;
background:#fff;
border:1px solid #F3E6B5;
border-radius:20px;
padding:26px 22px
}

.product_socialIcon {
display:flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
background:var(--product_yellow);
border-radius:16px;
font-size:24px;
color:var(--product_yellowDark)
}

.product_socialIntitule {
font-weight:900;
color:var(--product_yellowDark);
margin:0
}

.product_socialPhrase {
line-height:1.55;
margin:0
}

.product_subBlockTitle {
font-size:clamp(20px,2.6vw,26px);
font-weight:900;
color:var(--product_yellowDark);
margin:0 0 22px
}

#product_projets {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px
}

.product_projet {
display:flex;
flex-direction:column;
overflow:hidden;
background:#fff;
border:1px solid var(--product_line);
border-radius:var(--product_radius);
transition:transform .3s var(--product_ease)
}

.product_projet:hover {
transform:translateY(-5px)
}

.product_projetPhoto {
overflow:hidden;
aspect-ratio:16/10
}

.product_projetPhoto img {
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s var(--product_ease)
}

.product_projet:hover .product_projetPhoto img {
transform:scale(1.06)
}

.product_projetBody {
display:flex;
flex-direction:column;
gap:10px;
flex:1;
padding:22px
}

.product_projetLogo {
width:auto;
max-width:120px;
height:40px;
object-fit:contain;
object-position:left
}

.product_projetTitre {
font-weight:900;
margin:0
}

.product_projetBlock {
flex:1;
line-height:1.6
}

.product_projetBlock p {
margin:0 0 10px
}

.product_projetBlock img {
display:block;
width:100%;
height:auto;
border-radius:12px;
margin:10px 0
}

.product_projetLien {
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
font-weight:800;
color:var(--product_yellowDark);
transition:gap .25s var(--product_ease)
}

.product_projetLien:hover {
gap:14px
}

.product_engagementBlock {
line-height:1.75
}

.product_engagementBlock p {
margin:0 0 16px
}

.product_engagementBlock img {
display:block;
width:100%;
height:auto;
border-radius:30px 30px 30px 80px;
margin:18px 0
}

.product_plaisirGrid {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:clamp(24px,4vw,44px);
align-items:center
}

.product_plaisirGrid--video {
grid-template-columns:minmax(0,1fr) minmax(0,1fr)
}

.product_plaisirText {
line-height:1.75
}

.product_plaisirText p {
margin:0 0 16px
}

.product_plaisirText img {
display:block;
width:100%;
height:auto;
border-radius:18px;
margin:14px 0
}

.product_plaisirVideo {
overflow:hidden;
aspect-ratio:16/9;
border-radius:var(--product_radius)
}

.product_plaisirVideo iframe {
display:block;
width:100%;
height:100%;
border:0
}

#product_similar {
margin-top:clamp(48px,6vw,80px)
}

#product_recipes {
margin-top:clamp(40px,5vw,64px)
}

#product_similarList {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:20px
}

.product_similarCard a {
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
height:100%;
background:#fff;
border:1px solid var(--product_line);
border-radius:20px;
text-decoration:none;
text-align:center;
color:var(--product_ink);
transition:transform .28s var(--product_ease),border-color .28s var(--product_ease);
padding:18px
}

.product_similarCard a:hover {
border-color:var(--product_green);
transform:translateY(-6px)
}

.product_similarCard a:focus-visible {
outline:3px solid var(--product_green);
outline-offset:3px
}

.product_similarImg {
display:flex;
align-items:center;
justify-content:center;
width:100%;
aspect-ratio:1/1;
overflow:hidden
}

.product_similarImg img {
display:block;
width:100%;
height:100%;
object-fit:contain
}

.product_similarName {
font-weight:800;
line-height:1.3
}

#product_recipesList {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:24px
}

.product_recipeCard a {
display:block;
overflow:hidden;
background:#fff;
border:1px solid var(--product_line);
border-radius:var(--product_radius);
text-decoration:none;
color:var(--product_ink);
transition:transform .28s var(--product_ease)
}

.product_recipeCard a:hover {
transform:translateY(-5px)
}

.product_recipeCard a:focus-visible {
outline:3px solid var(--product_coralDark);
outline-offset:3px
}

.product_recipeImg {
overflow:hidden;
aspect-ratio:3/2
}

.product_recipeImg img {
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s var(--product_ease)
}

.product_recipeCard a:hover .product_recipeImg img {
transform:scale(1.06)
}

.product_recipeTitle {
font-weight:800;
line-height:1.35;
color:var(--product_coralDark);
padding:16px 18px
}

@media(max-width:980px) {
	#product_hero {
	grid-template-columns:1fr;
	gap:30px
	}

	#product_facts {
	grid-template-columns:1fr;
	gap:32px
	}

	#product_pillarsGrid {
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px 0
	}

	.product_pillarCard + .product_pillarCard::before {
	display:none
	}

	.product_origineGrid {
	grid-template-columns:1fr
	}

	#product_originesList {
	max-height:none
	}

	.product_plaisirGrid--video {
	grid-template-columns:1fr
	}
}

@media(max-width:560px) {
	#product_pillarsGrid {
	grid-template-columns:1fr;
	gap:14px
	}

	.product_pillarHead {
	gap:14px
	}

	.product_pillarBadge {
	width:52px;
	height:52px;
	font-size:23px
	}

	.product_btnBuy {
	flex:1;
	justify-content:center
	}
}

@media(prefers-reduced-motion:reduce) {
	#product_page * {
	transition:none !important;
	animation:none !important
	}
}