/** Shopify CDN: Minification failed

Line 84:0 Unexpected "{"
Line 84:2 Expected identifier but found "%"
Line 84:37 Unexpected "/"
Line 84:41 Expected identifier but found "%"
Line 108:0 Unexpected "{"
Line 108:2 Expected identifier but found "%"
Line 108:39 Unexpected "{"
Line 108:41 Expected identifier but found "%"
Line 126:0 Unexpected "{"
Line 126:2 Expected identifier but found "%"
... and 18 more hidden warnings

**/


.article-image-blog {
	width: 880px;
  	background-repeat: no-repeat;
	background-size: cover;
	min-height: 400px;
	background-position: center center;
  	margin:auto;
  
}
.title-article-blog {
	width: auto;
	font-size: 23px;
	font-weight: 600;
	text-align: center;
	margin-top: 24px;
}
.breadcrumb-blog{
	width: 880px;
  	margin: 0 auto 24px auto;
}
.content-article-blog {
	width: 880px;
  	margin: 24px auto;
}
.author-article-blog{
	width: 880px;
  	margin: 24px auto;
  	padding : 8px 0px;
  	border-top: 1px dashed #EFD5C7;
    border-bottom: 1px dashed #EFD5C7;
}
.author-img-blog {
	border-radius:50%;
}
.box {
   display: flex;
   align-items:center;
}
.box img{
	margin-right: 16px;
}
p > a {
	color: #AF8368;
	font-weight: 600;
	text-decoration: underline;
}
.encart {
	background-color: #FFF8F3;
	padding: 10px;
	border-left: 2px solid #AF8368;
	font-weight: 600;
	font-style: italic;
	font-size: 16px;
}
blockquote {
	background-color: #FFF8F3;
	padding: 10px;
	border-left: 2px solid #AF8368;
	font-weight: 600;
	font-style: italic;
	font-size: 16px;
}
blockquote p {
	margin: 0;
}

{ % comment %} CSS BLOCK NEWSLETTER */ { % endcomment %} 

.newsletter-article-blog{
	width: 500px;
  	margin: 24px auto;
  	padding : 8px 0px;

}
.box-newsletter {
   display: flex;
   align-items:center;
}


.newsletter-article-blog p {
   margin-top: 16px;
}
.box-newsletter span {
	font-family: 'Libre Baskerville';
	font-size: 22px;
	font-weight: 400;
	margin-left: 8px;
}

{ % comment %}  /* CSS BLOCK PICTOS */ { % endcomment %} 

.bloc-pictos-2022{
	width: 500px;
  	margin: 24px auto;
  	padding : 8px 0px;

}
.title-pictos-2022 {
	font-family: Libre Baskerville;
	font-size: 22px;
	font-weight: 400;
}
.pictos-2022 {
	text-align: center;
  	margin-bottom : 24px;
}

{ % comment %} /* CSS BLOCK SELECTION PRODUIT */ { % endcomment %} 

.bloc-selection-produit {
	width:1200px;
  	margin:auto;
}
.title-selection-produit-2022 {
	font-family: 'Libre Baskerville';
	font-size: 22px;
	font-weight: 400;
  	margin-bottom: 16px;
}
.bloc-selection-produit > .four.columns {
	display: inline-block;
  	float: initial;
  	width: 32%
}
.title-product-selection-produit-2022 {
  	font-size: 16px;
	font-weight: 600;
}
.price-product-selection-produit-2022 {
  	font-size: 16px;
	font-weight: 400;
}
.text-product-selection-produit-2022 {
	border-left: 1px solid #C1C1C1;
	margin: 10px 0 10x;
	padding: 0 10px;
    font-size: 14px;
	font-weight: 400;
}

{ % comment %} /* CSS BLOCK BLOG ARTICLE */ { % endcomment %} 

.bloc-article {
  	margin:auto;
}
.3-bloc-article{
	width:1200px;
}
.bloc-article > .four.columns {
	display: inline-block;
  	float: initial;
  	width: 32%
}
.title-bloc-article-2022 {
	font-family: 'Libre Baskerville';
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 16px;
	text-align: center;
	padding: 24px 0 16px 0;
}
.three-bloc-article > .four.columns {
	display: inline-block;
  	float: initial;
  	width: 32%
}
.three-bloc-article {
	width: 1200px;
	margin: auto;
}
.title-article-bloc-2022 {
  	font-size: 12px;
	font-weight: 600;
}

@media screen and (max-width: 1081px) {
  
	.breadcrumb-blog {
	width: calc(100% - 32px);
	margin-left: 16px;
	margin-right: 16px;
	}
	.article-image-blog {
	width: 100%;
	}
  	.content-article-blog {
	width: calc(100% - 32px);
	margin: 24px 16px;
	}
 	.author-article-blog {
	width: calc(100% - 32px);
	margin: 24px 16px;
  	}
  	.bloc-selection-produit {
	width: calc(100% - 32px);;
	margin-left: 16px;
	margin-right: 16px;
	}
  	.bloc-selection-produit > .four.columns.alpha.article:nth-child(2) {
	width: 100%;
	}
  	.bloc-selection-produit > .four.columns.alpha.article:nth-child(3) {
	width: 50%;
	}
  	.bloc-selection-produit > .four.columns.alpha.article:nth-child(4) {
	width: 50%;
	}
	.article img {
	width: 100%;
	}
  .three-bloc-article {
	width: 100%;
	}
  .three-bloc-article > .four.columns {
	width: calc(100% - 32px);
	margin: 0 16px;
	}
}







.s-collection-selector {
  display: block;
  position: relative;
  margin-inline: auto;
  scroll-margin-top: 80px;
}

.s-collection-selector .title {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-top: var(--spacing-350);
  margin-inline: auto;
  font-family: var(--ff-primary);
  font-size: var(--fs-350);
  line-height: var(--lh-400);
  font-weight: 900;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}

@media only screen and (min-width: 601px) {
  .s-collection-selector {
    scroll-margin-top: 92px;
  }

  .s-collection-selector .title {
    justify-content: center;
    margin-top: var(--spacing-400);
  }
}


.s-collection-selector ul {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--spacing-300);
  margin-top: calc(var(--spacing-300) - var(--spacing-500));
  margin-bottom: calc(var(--spacing-300) - var(--spacing-600));
  padding-top: var(--spacing-500);
  padding-inline: var(--gutter-width-regular);
  padding-bottom: var(--spacing-600);
  overflow: hidden;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing-500);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.s-collection-selector ul::-webkit-scrollbar {
  display: none;
}

@media only screen and (min-width: 601px) {
  .s-collection-selector ul {
    justify-content: center;
    margin-bottom: calc(var(--spacing-400) - var(--spacing-600));
  }
}

.s-collection-selector li {
  width: auto;
  height: 60px;
  background-color: var(--clr-neutral-100);
  border-radius: var(--radius-350);
  box-shadow: var(--shadow-button);
  transition: var(--transition-400);
}

.s-collection-selector li:hover {
  box-shadow: var(--shadow-button-hover);
}

.s-collection-selector a {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 100%;
  padding: 0 var(--spacing-200);
  font-family: var(--ff-primary);
  font-size: var(--fs-350);
  line-height: var(--lh-400);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  border-radius: var(--radius-350);
}

.s-collection-selector li.active {
  background-color: var(--clr-neutral-900);
}

.s-collection-selector li.active a {
  font-weight: 700;
  color: var(--clr-neutral-100);
}

.s-collection-selector li.small a {
  width: 90px;
}

.s-collection-selector .spinner {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 1000px;
  margin-inline: auto;
}

.s-collection-selector .spinner div {
  position: relative;
  height: 60px;
  width: 60px;
  top: var(--spacing-500);
  border: 10px solid var(--clr-primary-200);
  border-top: 10px solid var(--clr-primary-400);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} }

@media only screen and (min-width: 601px) {
  .s-collection-selector .spinner {
    height: 1500px;
  }

  .s-collection-selector .spinner div {
    top: var(--spacing-550);
  }
}




.shopify-section.announcement {
  background-color: var(--clr-neutral-200)
}

.s-announcement {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: calc(100% - (2 * var(--gutter-width-regular)));
  max-width: var(--page-width-900);
  height: var(--spacing-450);
  margin-inline: auto;
}

.s-announcement .cta {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 240px;
  margin-right: auto;
}

@media only screen and (min-width: 1001px) {
  .s-announcement .cta {
    display: flex;
  }
}

.s-announcement .announcements {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--spacing-300);

  width: calc(100vw - 2 * var(--gutter-width-regular));
  max-width: 420px;

  overflow: hidden;
  overflow-x: scroll;

  scroll-snap-type: x mandatory;

  -ms-overflow-style: none;
  scrollbar-width: none;

  pointer-events: none;
  user-select: none
}

.s-announcement .announcements::-webkit-scrollbar {
  display: none;
}

/*
@media only screen and (min-width: 1001px) {
  .s-announcement .announcements {
    left: 48px;
  }
}
*/

.s-announcement .announcements p {
  min-width: min(420px, calc(100vw - 2 * var(--gutter-width-regular)));
  font-family: var(--ff-primary);
  font-size: var(--fs-300);
  line-height: var(--fs-300);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;

  scroll-snap-align: start;
}

.s-announcement .announcements p a {
  font-weight: 700;
  text-decoration: underline;
  color: var(--clr-primary-400);
  cursor: pointer;
  pointer-events: all
}

.s-announcement .languages {
  display: none;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  width: 240px;
  margin-left: auto;
}

@media only screen and (min-width: 1001px) {
  .s-announcement .languages {
    display: flex
  }
}




.s-collection-banner {
  display: block;
  position: relative;
  margin-inline: auto;
  padding-bottom: var(--spacing-450);
}

.s-collection-banner img {
  display: block;
  max-width: 100%;
  height: 520px;
  margin-inline: auto;
  object-fit: cover;
}

.s-collection-banner img.desktop {
  display: none;
  max-width: 100%;
  height: 640px;
  margin-inline: auto;
  object-fit: cover;
}

@media only screen and (min-width: 601px) {
  .s-collection-banner img.mobile {
    display: none
  }

  .s-collection-banner img.desktop {
    display: block
  }
}

.s-collection-banner div.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.s-collection-banner div.wrapper > div {
  display: flex;
  position: relative;
  align-items: flex-end;
  justify-content: center;
  width: calc(100% - 2 * var(--gutter-width-regular));
  max-width: 1240px;
  height: 100%;
  margin-inline: auto;
}

.s-collection-banner .container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: calc(var(--spacing-500) - 10px) calc(var(--spacing-400) - 10px);
  background-color: rgba(255, 255, 255, 0.95);
  border: 10px solid var(--clr-primary-400);
  /*backdrop-filter: blur(20px);*/
  box-shadow: var(--shadow-button);
  border-radius: var(--radius-300);
}

.s-collection-banner h1 {
  font-family: var(--ff-primary);
  font-size: var(--fs-800);
  line-height: var(--lh-400);
  font-weight: 900;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  text-align: center;
}

.s-collection-banner p {
  margin-top: var(--spacing-300);
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-700);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-transform: none;
  text-align: center;
}

.s-collection-banner h1 ~ p {
  margin-top: var(--spacing-350);
}

@media only screen and (min-width: 601px) {
  .s-collection-banner {
    padding: 0;
  }

  .s-collection-banner div.wrapper > div {
    align-items: center;
    justify-content: flex-start;
  }

  .s-collection-banner .container {
    align-items: flex-start;
    justify-content: center;
    max-width: 450px;
    margin-left: 0;
    margin-right: auto;
    padding: calc(var(--spacing-550) - 15px);
    border-width: 15px;
  }

  .s-collection-banner h1 {
    text-align: left;
  }

  .s-collection-banner p {
    text-align: left;
  }
}




.s-collection-selector {
  display: block;
  position: relative;
  margin-inline: auto;
  scroll-margin-top: 80px;
}

.s-collection-selector .title {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-top: var(--spacing-350);
  margin-inline: auto;
  font-family: var(--ff-primary);
  font-size: var(--fs-350);
  line-height: var(--lh-400);
  font-weight: 900;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}

@media only screen and (min-width: 601px) {
  .s-collection-selector {
    scroll-margin-top: 92px;
  }

  .s-collection-selector .title {
    justify-content: center;
    margin-top: var(--spacing-400);
  }
}


.s-collection-selector ul {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--spacing-300);
  margin-top: calc(var(--spacing-300) - var(--spacing-500));
  margin-bottom: calc(var(--spacing-300) - var(--spacing-600));
  padding-top: var(--spacing-500);
  padding-inline: var(--gutter-width-regular);
  padding-bottom: var(--spacing-600);
  overflow: hidden;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing-500);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.s-collection-selector ul::-webkit-scrollbar {
  display: none;
}

@media only screen and (min-width: 601px) {
  .s-collection-selector ul {
    justify-content: center;
    margin-bottom: calc(var(--spacing-400) - var(--spacing-600));
  }
}

.s-collection-selector li {
  width: auto;
  height: 60px;
  background-color: var(--clr-neutral-100);
  border-radius: var(--radius-350);
  box-shadow: var(--shadow-button);
  transition: var(--transition-400);
}

.s-collection-selector li:hover {
  box-shadow: var(--shadow-button-hover);
}

.s-collection-selector a {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 100%;
  padding: 0 var(--spacing-200);
  font-family: var(--ff-primary);
  font-size: var(--fs-350);
  line-height: var(--lh-400);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  border-radius: var(--radius-350);
}

.s-collection-selector li.active {
  background-color: var(--clr-neutral-900);
}

.s-collection-selector li.active a {
  font-weight: 700;
  color: var(--clr-neutral-100);
}

.s-collection-selector li.small a {
  width: 90px;
}

.s-collection-selector .spinner {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 1000px;
  margin-inline: auto;
}

.s-collection-selector .spinner div {
  position: relative;
  height: 60px;
  width: 60px;
  top: var(--spacing-500);
  border: 10px solid var(--clr-primary-200);
  border-top: 10px solid var(--clr-primary-400);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} }

@media only screen and (min-width: 601px) {
  .s-collection-selector .spinner {
    height: 1500px;
  }

  .s-collection-selector .spinner div {
    top: var(--spacing-550);
  }
}







.s-page-header {
  display: block;
  position: relative;
  max-width: 1680px;
  margin-inline: auto;
}

.s-page-header img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.s-page-header .page-info {
  display: block;
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-top: var(--spacing-500);
  margin-inline: auto;
}

.s-page-header h1 {
  margin-top: var(--spacing-500);
  font-family: var(--ff-primary);
  font-size: var(--fs-600);
  line-height: var(--lh-400);
  font-weight: 900;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  text-align: center;
}

.s-page-header h1 span {
  color: var(--clr-primary-400);
}

.s-page-header .content {
  margin-top: var(--spacing-300);
  font-family: var(--ff-secondary);
  font-size: var(--fs-450);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

.s-page-header .scroll {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: var(--spacing-500);
  margin-inline: auto;
}


@media only screen and (min-width: 601px) {
  .s-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--spacing-400);
  }

  .s-page-header img {
    width: 50%;
  }

  .s-page-header .page-info {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    width: calc(50% - var(--spacing-400));
    margin-top: 0;
  }

  .s-page-header h1 {
    margin-top: 0;
    font-size: var(--fs-800);
    text-align: left;
  }

  .s-page-header .content {
    font-size: var(--fs-600);
    text-align: left;
  }

  .s-page-header .b-button {
    margin-left: 0;
  }

  .s-page-header .scroll {
    display: none;
  }
}

@media only screen and (min-width: 901px) {
  .s-page-header {
    gap: var(--spacing-600);
  }

  .s-page-header .page-info {
    width: calc(50% - var(--spacing-600));
  }
}




/* Layout */
.s-product {
  position: relative;
}

@media only screen and (min-width: 901px) {
  .s-product .first-material {
    grid-area: box-0;
    position: sticky;
    height: 496px;
    top: 160px;
    z-index: 1;
  }

  .s-product .second-material {
    grid-area: box-1;
    width: calc(100vw - 562px);
    margin-left: -52px;
  }

  div.s-product {
    display: grid;
    grid-template-columns: 518px auto;
    grid-template-rows: auto;
    column-gap: var(--spacing-500);
    row-gap: 0;
    grid-template-areas:
    "box-0 box-1";
    width: calc(100% - 32px);
    max-width: var(--page-width-700);
    margin-left: var(--spacing-400);
    margin-right: initial;
  }
}

@media only screen and (min-width: 1101px) {
  div.s-product {
    margin-left: auto;
    margin-right: auto;
  }

  .s-product .second-material {
    width: 470px;
  }
}

@media only screen and (min-width: 901px) {
  .product-miniatures__container {
    grid-area: box-0;
  }

  .product-images__container {
    grid-area: box-1;
  }

  .product-infos {
    grid-area: box-2;
  }

  .s-product .first-material {
    display: grid;
    grid-template-columns: 124px 362px;
    grid-template-rows: 496px auto;
    column-gap: var(--spacing-400);
    row-gap: var(--spacing-400);
    grid-template-areas:
    "box-0 box-1"
    ".     box-2";
  }
}

/* Layout miniatures */

.product-miniatures__container {
  position: relative;
  display: none;
}

@media only screen and (min-width: 901px) {
  .product-miniatures__container {
    display: block;
    height: 496px;
  }

  .product-miniatures {
    display: flex;
    position: relative;
    height: 448px;

    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--spacing-300);

    padding: var(--spacing-300) var(--spacing-350) var(--spacing-400);
    margin-top: calc(-1 * var(--spacing-300));
    margin-left: calc(-1 * var(--spacing-350));

    overflow-x: hidden;
    overflow-y: scroll;

    scroll-snap-type: y mandatory;
    scroll-padding: var(--spacing-350);

    -ms-overflow-style: none;
    scrollbar-width: none;

    user-select: none;
  }

  .product-miniatures::-webkit-scrollbar {
    display: none;
  }

  .product-miniature {
    scroll-snap-align: start;
  }

  .product-miniature__img {
    border-radius: 17px;
    box-shadow: var(--shadow-card);
  }
}

/* Style flèches miniature */

.product-miniatures__arrows {
  display: none;
}

@media only screen and (min-width: 901px) {
  .product-miniatures__arrows {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -16px;
    left: -24px;
    pointer-events: none;
  }

  .product-miniature__arrow {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--clr-neutral-100);
    color: var(--clr-neutral-400);
    border: 1px solid var(--clr-neutral-400);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-500);
    z-index: 1;
    pointer-events: auto;
  }

  .product-miniature__arrow:hover {
    border-color: var(--clr-primary-400);
    color: var(--clr-primary-400);
  }

  .product-miniature__arrow.previous {
    transform: rotate(90deg);
    top: 8px;
    left: 50%;
  }

  .product-miniature__arrow.next {
    transform: rotate(90deg);
    bottom: 72px;
    left: 50%;
  }
}

/* Style overlay miniature */

.product-miniatures__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: calc(-1 * var(--spacing-300));
  margin-left: calc(-1 * var(--spacing-350));
  top: 0;
  left: 0;
  pointer-events: none;
}

.product-miniatures__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: 48px;
  background: linear-gradient(#ffffff 16px, #ffffff00 100%);
}

.product-miniatures__overlay::after {
  content: '';
  position: absolute;
  bottom: 48px;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: 64px;
  background: linear-gradient(#ffffff00 0%, #ffffff 32px);
}


/* Layout images */

.product-images__container {
  position: relative;
}

.product-images {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-400);

  margin-top: calc(-1 * var(--spacing-400));
  padding: var(--spacing-400);

  overflow-x: scroll;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing-450);

  -ms-overflow-style: none;
  scrollbar-width: none;

  user-select: none;
}

.product-images::-webkit-scrollbar {
  display: none;
}

.product-image {
  scroll-snap-align: start;
}

.product-image__img {
  position: relative;
  width: calc(100vw - 96px);
  max-width: 330px;
  height: auto;
  border-radius: 40px;
  box-shadow: var(--shadow-card);
}

@media only screen and (min-width: 481px) {
  .product-images {
    scroll-padding: var(--spacing-500);
  }
}

@media only screen and (min-width: 901px) {
  .product-images__container {
    display: block;
    height: 496px;
  }

  .product-images {
    height: 448px;

    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--spacing-450);

    margin-top: calc(-1 * var(--spacing-300));
    margin-left: calc(-1 * (var(--spacing-200) + var(--spacing-500)));
    padding: var(--spacing-300) var(--spacing-450) var(--spacing-400);

    overflow-x: hidden;
    overflow-y: scroll;

    scroll-snap-type: y mandatory;
    scroll-padding: var(--spacing-350);

    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Style overlay image */

.product-images__overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: calc(-1 * var(--spacing-300));
  margin-left: calc(-1 * var(--spacing-450));
  top: 0;
  left: 0;
  pointer-events: none;
}

@media only screen and (min-width: 901px) {
  .product-images__overlay {
    display: block;
  }
}

.product-images__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: var(--spacing-350);
  background: linear-gradient(#ffffff 8px, #ffffff00 100%);
}

.product-images__overlay::after {
  content: '';
  position: absolute;
  bottom: 48px;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: var(--spacing-350);
  background: linear-gradient(#ffffff00 0%, #ffffff 16px);
}


/* Style infos produit */

@media only screen and (min-width: 901px) {
  .product-infos {
    margin-top: -96px;
    margin-left: -72px;
  }
}

.product-compare {
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-decoration: line-through;
  color: var(--clr-neutral-400);
}

.product-price {
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-650);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

.product-quantity {
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

/* Layout partie droite */

.product-short-description,
.product-option__label,
.product-variants__label,
.product-buttons,
.product-reassurances {
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 901px) {
  .product-short-description,
  .product-option__label,
  .product-variants__label,
  .product-buttons,
  .product-reassurances {
    width: 100%;
    padding-right: var(--spacing-400);
  }
}

@media only screen and (min-width: 1101px) {
  .product-short-description,
  .product-option__label,
  .product-variants__label,
  .product-buttons,
  .product-reassurances {
    padding-right: 0;
  }
}

.product-short-description p.title {
  font-size: var(--fs-450);
  line-height: var(--lh-600);
  font-weight: 700;
  text-transform: uppercase;
}

.product-short-description em {
  font-weight: 700;
  color: var(--clr-primary-400);
}

.product-short-description a {
  text-decoration: underline;
}

.product-short-description p,
.product-short-description ul {
  margin-top: var(--spacing-350);
}

.product-short-description :first-child {
  margin-top: 0;
}

.product-short-description ul {
  margin-inline-start: var(--spacing-400);
  list-style-position: inside;
  list-style-type: disc;
}



/* Layout options */

.product-options {
  margin-top: var(--spacing-400);
}

.option-values {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-350);

  margin-top: calc(-1 * var(--spacing-350));
  padding: var(--spacing-450) var(--spacing-400);

  overflow-x: scroll;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing-400);

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.option-values::-webkit-scrollbar {
  display: none;
}

.option-value {
  scroll-snap-align: start;
}

@media only screen and (min-width: 901px) {
  .option-values {
    margin-left: calc(-1 * var(--spacing-400));
  }
}

/* Style flèche options */

.option-values__arrows {
  display: none;
}

@media only screen and (min-width: 1101px) {
  .option-values__arrows {
    display: block;
  }

  .option-value__arrow {
    top: 78px;
    right: -32px;
  }

  .option-value__arrow.alt {
    top: 113px;
  }

  .option-value__arrow.previous {
    left: -48px;
    transform: rotate(180deg)
  }
}

/* Style overlay options */

.option-values__container {
  position: relative;
}

.option-values__overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

@media only screen and (min-width: 901px) {
  .option-values__overlay {
    display: block;
  }
}

.option-values__overlay::before {
  content: '';
  position: absolute;
  top: var(--spacing-400);
  left: calc(-1 * var(--spacing-450));
  width: var(--spacing-450);
  height: calc(100% - var(--spacing-450));
  background: linear-gradient(90deg, #ffffff 24px, #ffffff00 100%);
}

.option-values__overlay::after {
  content: '';
  position: absolute;
  top: var(--spacing-400);
  right: 0;
  width: var(--spacing-500);
  height: calc(100% - var(--spacing-450));
  background: linear-gradient(90deg, #ffffff00 0%, #ffffff 40px);
}

@media only screen and (min-width: 1101px) {
  .option-values__overlay::after {
    right: calc(-1 * var(--spacing-300));
  }
}

/* Style label option */

.product-option__label,
.product-variants__label {
  margin: 0;
  padding-left: var(--spacing-400);
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
}

@media only screen and (min-width: 901px) {
  .product-option__label,
  .product-variants__label {
    padding-left: 0;
  }
}


/* Style sélecteur variantes */

.product-variants__select {
  width: calc(100% - var(--spacing-500));
  margin-inline: auto;
  margin-top: var(--spacing-350);
  margin-bottom: var(--spacing-450);
}

@media only screen and (min-width: 901px) {
  .product-variants__select {
    width: calc(100% - var(--spacing-400));
    margin-inline: initial;
    margin-right: auto;
  }
}

@media only screen and (min-width: 1101px) {
  .product-variants__select {
    width: 100%;
    margin-right: auto;
  }
}

/* Style description courte */

.product-short-description {
  padding-top: 32px;
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-700);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
}

@media only screen and (min-width: 901px) {
  .product-short-description {
    padding-top: 0;
  }
}


/* Style réassurances */

.product-delivery {
  padding: var(--spacing-300) var(--spacing-200) var(--spacing-200);
  <!-- margin-top: var(--spacing-400); -->
  <!-- border-top: 1px solid var(--clr-neutral-300); -->
  <!-- border-bottom: 1px solid var(--clr-neutral-300); -->
}

.product-delivery__title {
  font-family: var(--ff-primary);
  font-size: var(--fs-300);
  line-height: var(--lh-400);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

.product-delivery__subtitle {
  font-family: var(--ff-primary);
  font-size: var(--fs-250);
  line-height: 24px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center
}


.joone-arrow {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-400);
  border: 1px solid var(--clr-neutral-400);
  border-radius: 50%;

  transition: var(--transition-400);
  user-select: none;
  cursor: pointer;
  z-index: 1;
}

.joone-arrow:hover {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  border-color: var(--clr-primary-400);
}

.joone-arrow::after {
  content: url(data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99974 10.2823C6.99979 10.1881 6.97894 10.0948 6.93838 10.0077C6.89783 9.92067 6.83836 9.84155 6.76338 9.77491L1.94996 5.49995L6.76338 1.22499C6.91488 1.09042 7 0.9079 7 0.717585C7 0.52727 6.91488 0.344749 6.76338 0.210176C6.61187 0.0756025 6.40638 -2.59478e-08 6.19212 -3.53135e-08C5.97786 -4.46792e-08 5.77237 0.0756024 5.62086 0.210176L0.236729 4.99254C0.16168 5.05916 0.102144 5.13826 0.0615256 5.22533C0.0209062 5.31239 2.40546e-07 5.40571 2.36427e-07 5.49995C2.32307e-07 5.59419 0.0209062 5.68751 0.0615256 5.77458C0.102144 5.86164 0.161679 5.94074 0.236729 6.00736L5.62086 10.7897C5.73381 10.8901 5.87775 10.9585 6.03446 10.9862C6.19117 11.0139 6.35361 10.9997 6.50123 10.9454C6.64885 10.8911 6.77501 10.7991 6.86375 10.681C6.95249 10.563 6.99981 10.4242 6.99974 10.2823Z' fill='%23A8A8A8'/%3E%3C/svg%3E%0A);
  transform: rotate(180deg);
  background-position: center;
}


/* Image produit */
.joone-product-image img {
  width: calc(100vw - 100px);
  max-width: 330px;
  height: calc((100vw - 100px) * 1.25);
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-600);
  box-shadow: var(--shadow-button);
}


/* Miniature produit */
.joone-product-miniature {
  cursor: pointer;
}

.joone-product-miniature img {
  width: 100px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-400);
  box-shadow: var(--shadow-button);
}

.joone-blank-miniature {
  min-width: 100px;
  min-height: 120px;
  visibility: hidden;
}


/* Sélecteur produit */
.joone-product-selector {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;

  width: 130px;
  height: 95px;

  padding: var(--spacing-300);
  box-shadow: var(--shadow-button);
  border-radius: var(--radius-300);
  background-color: var(--clr-neutral-100);
  transition: var(--transition-400), padding 0;
  user-select: none;
  cursor: pointer;
}

.joone-product-selector:hover {
  box-shadow: var(--shadow-button-hover);
}

.joone-product-selector span {
  min-width: 130px;
  font-family: var(--ff-primary);
  font-size: var(--fs-300);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--clr-neutral-500);
}

.joone-product-selector.active {
  padding: calc(var(--spacing-300) - 3px);
  border: 3px solid var(--clr-primary-400);
  box-shadow: var(--shadow-button-hover);
}

.joone-product-selector.unavailable {
  cursor: auto;
}

.joone-product-selector.active.unavailable {
  border-radius: calc(var(--radius-300) + 3px);
}

.joone-product-selector.unavailable::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-300);
}

.joone-product-selector.unavailable::after {
  content: "Victime de son succ\e8s";
  position: absolute;
  width: 245px;
  height: 40px;
  top: 50%;
  left: 50%;
  padding-top: 6px;
  padding-left: 0px;
  transform: translateX(-50%) translateY(-50%) rotate(345deg);

  font-family: var(--ff-primary);
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;

  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-500);
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;

  z-index: 0;

  clip-path: polygon(60px 0px, 195px 0px, 169px 100px, 0px 235px);
}

.joone-product-selector.image {
  min-width: 130px;
  height: 175px;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
}

.joone-product-selector.image span {
  visibility: hidden;
}

.joone-product-selector.image.unavailable::after {
  content: "Victime de son succ\e8s";
  position: absolute;
  width: 240px;
  height: 48px;
  top: 50%;
  left: 50%;
  padding-top: 14px;
  padding-left: 0px;
  transform: translateX(-50%) translateY(-50%) rotate(327deg);

  font-family: var(--ff-primary);
  font-size: 10px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;

  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-500);
  border: 0;

  z-index: 0;

  clip-path: polygon(58px 0px, 213px 0px, 154px 90px, 0px 90px);
}

.joone-blank-selector {
  min-width: 130px;
  min-height: 95px;
  visibility: hidden;
}

/* Bouton */
.joone-button {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--spacing-300);
  border: 1px solid var(--clr-neutral-900);
  box-shadow: var(--shadow-button);
  transition: var(--transition-400);
  cursor: pointer;
  user-select: none;
}

.joone-button:hover {
  padding: calc(var(--spacing-300) - 3px) 16px;
  border: 4px solid var(--clr-primary-400);
  box-shadow: var(--shadow-button-hover);
}

.joone-button.blur {
  backdrop-filter: blur(6px) brightness(0.75);
}

.joone-button p {
  position: relative;
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;
}

.joone-button p span {
  font-style: italic;
  text-transform: initial;
}

.joone-button.atc p,
.joone-button.oos p {
  padding-left: calc(2 * var(--fs-400));
}

.joone-button.arrow p {
  margin-left: var(--fs-400);
  margin-right: calc(2 * var(--fs-400));
}

.joone-button.atc,
.joone-button.oos {
  padding: var(--spacing-300) !important;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
}

.joone-button.atc:hover,
.joone-button.oos:hover {
  padding: calc(var(--spacing-300) - 3px) !important;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
}

.joone-button.atc p::before,
.joone-button.oos p::before {
  position: absolute;
  width: calc(var(--fs-400) / 2);
  height: calc(var(--fs-400) / 2);
  top: 0;
  left: 0;
}

.joone-button.arrow p::after {
  content: '>';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-1 * var(--spacing-350));

  font-family: monospace;
  font-style: normal;
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;

  color: var(--clr-neutral-100);
}

.joone-button.atc p::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='16px' height='16px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10.501 5.833 L 10.501 3.667 C 10.501 2.47 9.381 1.5 8.001 1.5 C 6.62 1.5 5.501 2.47 5.501 3.667 L 5.501 5.833' stroke='%23010101' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 14.5 14.5 L 1.5 14.5 L 2.5 5.833 L 13.5 5.833 L 14.5 14.5 Z' stroke='%23010101' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.joone-button.oos p::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='16px' height='16px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 6.337 13.318 C 6.457 13.663 6.682 13.962 6.98 14.174 C 7.278 14.386 7.635 14.5 8.001 14.5 C 8.367 14.5 8.723 14.386 9.021 14.174 C 9.32 13.962 9.544 13.663 9.665 13.318' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 1.501 10.954 L 14.5 10.954' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 14.5 10.954 C 13.887 10.912 13.31 10.65 12.876 10.215 C 12.441 9.781 12.179 9.204 12.137 8.591 L 12.137 5.636 C 12.137 4.539 11.701 3.487 10.925 2.711 C 10.15 1.936 9.098 1.5 8.001 1.5 C 6.904 1.5 5.852 1.936 5.076 2.711 C 4.3 3.487 3.865 4.539 3.865 5.636 L 3.865 8.591 C 3.823 9.204 3.56 9.781 3.126 10.215 C 2.691 10.65 2.114 10.912 1.501 10.954' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.change_packaging {
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-top: 20px;
}

@media only screen and (max-width: 1024px) {
  .change_packaging {
    width: calc(100% - 2 * var(--gutter-width-regular));
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}

.change_packaging > p {
  font-size: 9px;
}

.change_packaging > p:nth-child(1n) {
  margin-bottom: 8px;
}



/* Layout */
.s-product {
  position: relative;
}

@media only screen and (min-width: 901px) {
  .s-product .first-material {
    grid-area: box-0;
    position: sticky;
    height: 496px;
    top: 160px;
    z-index: 1;
  }

  .s-product .second-material {
    grid-area: box-1;
    width: calc(100vw - 562px);
    margin-left: -52px;
  }

  div.s-product {
    display: grid;
    grid-template-columns: 518px auto;
    grid-template-rows: auto;
    column-gap: var(--spacing-500);
    row-gap: 0;
    grid-template-areas:
    "box-0 box-1";
    width: calc(100% - 32px);
    max-width: var(--page-width-700);
    margin-left: var(--spacing-400);
    margin-right: initial;
  }
}

@media only screen and (min-width: 1101px) {
  div.s-product {
    margin-left: auto;
    margin-right: auto;
  }

  .s-product .second-material {
    width: 470px;
  }
}

@media only screen and (min-width: 901px) {
  .product-miniatures__container {
    grid-area: box-0;
  }

  .product-images__container {
    grid-area: box-1;
  }

  .product-infos {
    grid-area: box-2;
  }

  .s-product .first-material {
    display: grid;
    grid-template-columns: 124px 362px;
    grid-template-rows: 496px auto;
    column-gap: var(--spacing-400);
    row-gap: var(--spacing-400);
    grid-template-areas:
    "box-0 box-1"
    ".     box-2";
  }
}

/* Layout miniatures */

.product-miniatures__container {
  position: relative;
  display: none;
}

@media only screen and (min-width: 901px) {
  .product-miniatures__container {
    display: block;
    height: 496px;
  }

  .product-miniatures {
    display: flex;
    position: relative;
    height: 448px;

    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--spacing-300);

    padding: var(--spacing-300) var(--spacing-350) var(--spacing-400);
    margin-top: calc(-1 * var(--spacing-300));
    margin-left: calc(-1 * var(--spacing-350));

    overflow-x: hidden;
    overflow-y: scroll;

    scroll-snap-type: y mandatory;
    scroll-padding: var(--spacing-350);

    -ms-overflow-style: none;
    scrollbar-width: none;

    user-select: none;
  }

  .product-miniatures::-webkit-scrollbar {
    display: none;
  }

  .product-miniature {
    scroll-snap-align: start;
  }

  .product-miniature__img {
    border-radius: 17px;
    box-shadow: var(--shadow-card);
  }
}

/* Style flèches miniature */

.product-miniatures__arrows {
  display: none;
}

@media only screen and (min-width: 901px) {
  .product-miniatures__arrows {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -16px;
    left: -24px;
    pointer-events: none;
  }

  .product-miniature__arrow {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--clr-neutral-100);
    color: var(--clr-neutral-400);
    border: 1px solid var(--clr-neutral-400);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-500);
    z-index: 1;
    pointer-events: auto;
  }

  .product-miniature__arrow:hover {
    border-color: var(--clr-primary-400);
    color: var(--clr-primary-400);
  }

  .product-miniature__arrow.previous {
    transform: rotate(90deg);
    top: 8px;
    left: 50%;
  }

  .product-miniature__arrow.next {
    transform: rotate(90deg);
    bottom: 72px;
    left: 50%;
  }
}

/* Style overlay miniature */

.product-miniatures__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: calc(-1 * var(--spacing-300));
  margin-left: calc(-1 * var(--spacing-350));
  top: 0;
  left: 0;
  pointer-events: none;
}

.product-miniatures__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: 48px;
  background: linear-gradient(#ffffff 16px, #ffffff00 100%);
}

.product-miniatures__overlay::after {
  content: '';
  position: absolute;
  bottom: 48px;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: 64px;
  background: linear-gradient(#ffffff00 0%, #ffffff 32px);
}


/* Layout images */

.product-images__container {
  position: relative;
}

.product-images {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-400);

  margin-top: calc(-1 * var(--spacing-400));
  padding: var(--spacing-400);

  overflow-x: scroll;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing-450);

  -ms-overflow-style: none;
  scrollbar-width: none;

  user-select: none;
}

.product-images::-webkit-scrollbar {
  display: none;
}

.product-image {
  scroll-snap-align: start;
}

.product-image__img {
  position: relative;
  width: calc(100vw - 96px);
  max-width: 330px;
  height: auto;
  border-radius: 40px;
  box-shadow: var(--shadow-card);
}

@media only screen and (min-width: 481px) {
  .product-images {
    scroll-padding: var(--spacing-500);
  }
}

@media only screen and (min-width: 901px) {
  .product-images__container {
    display: block;
    height: 496px;
  }

  .product-images {
    height: 448px;

    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--spacing-450);

    margin-top: calc(-1 * var(--spacing-300));
    margin-left: calc(-1 * (var(--spacing-200) + var(--spacing-500)));
    padding: var(--spacing-300) var(--spacing-450) var(--spacing-400);

    overflow-x: hidden;
    overflow-y: scroll;

    scroll-snap-type: y mandatory;
    scroll-padding: var(--spacing-350);

    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Style overlay image */

.product-images__overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: calc(-1 * var(--spacing-300));
  margin-left: calc(-1 * var(--spacing-450));
  top: 0;
  left: 0;
  pointer-events: none;
}

@media only screen and (min-width: 901px) {
  .product-images__overlay {
    display: block;
  }
}

.product-images__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: var(--spacing-350);
  background: linear-gradient(#ffffff 8px, #ffffff00 100%);
}

.product-images__overlay::after {
  content: '';
  position: absolute;
  bottom: 48px;
  left: 0;
  width: calc(100% + var(--spacing-350));
  height: var(--spacing-350);
  background: linear-gradient(#ffffff00 0%, #ffffff 16px);
}


/* Style infos produit */

@media only screen and (min-width: 901px) {
  .product-infos {
    margin-top: -96px;
    margin-left: -72px;
  }
}

.product-compare {
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-decoration: line-through;
  color: var(--clr-neutral-400);
}

.product-price {
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-650);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

.product-quantity {
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

/* Layout partie droite */

.product-short-description,
.product-option__label,
.product-variants__label,
.product-buttons,
.product-reassurances {
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 901px) {
  .product-short-description,
  .product-option__label,
  .product-variants__label,
  .product-buttons,
  .product-reassurances {
    width: 100%;
    padding-right: var(--spacing-400);
  }
}

@media only screen and (min-width: 1101px) {
  .product-short-description,
  .product-option__label,
  .product-variants__label,
  .product-buttons,
  .product-reassurances {
    padding-right: 0;
  }
}

.product-short-description p.title {
  font-size: var(--fs-450);
  line-height: var(--lh-600);
  font-weight: 700;
  text-transform: uppercase;
}

.product-short-description em {
  font-weight: 700;
  color: var(--clr-primary-400);
}

.product-short-description a {
  text-decoration: underline;
}

.product-short-description p,
.product-short-description ul {
  margin-top: var(--spacing-350);
}

.product-short-description :first-child {
  margin-top: 0;
}

.product-short-description ul {
  margin-inline-start: var(--spacing-400);
  list-style-position: inside;
  list-style-type: disc;
}



/* Layout options */

.product-options {
  margin-top: var(--spacing-400);
}

.option-values {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-350);

  margin-top: calc(-1 * var(--spacing-350));
  padding: var(--spacing-450) var(--spacing-400);

  overflow-x: scroll;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-padding: var(--spacing-400);

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.option-values::-webkit-scrollbar {
  display: none;
}

.option-value {
  scroll-snap-align: start;
}

@media only screen and (min-width: 901px) {
  .option-values {
    margin-left: calc(-1 * var(--spacing-400));
  }
}

/* Style flèche options */

.option-values__arrows {
  display: none;
}

@media only screen and (min-width: 1101px) {
  .option-values__arrows {
    display: block;
  }

  .option-value__arrow {
    top: 78px;
    right: -32px;
  }

  .option-value__arrow.alt {
    top: 113px;
  }

  .option-value__arrow.previous {
    left: -48px;
    transform: rotate(180deg)
  }
}

/* Style overlay options */

.option-values__container {
  position: relative;
}

.option-values__overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

@media only screen and (min-width: 901px) {
  .option-values__overlay {
    display: block;
  }
}

.option-values__overlay::before {
  content: '';
  position: absolute;
  top: var(--spacing-400);
  left: calc(-1 * var(--spacing-450));
  width: var(--spacing-450);
  height: calc(100% - var(--spacing-450));
  background: linear-gradient(90deg, #ffffff 24px, #ffffff00 100%);
}

.option-values__overlay::after {
  content: '';
  position: absolute;
  top: var(--spacing-400);
  right: 0;
  width: var(--spacing-500);
  height: calc(100% - var(--spacing-450));
  background: linear-gradient(90deg, #ffffff00 0%, #ffffff 40px);
}

@media only screen and (min-width: 1101px) {
  .option-values__overlay::after {
    right: calc(-1 * var(--spacing-300));
  }
}

/* Style label option */

.product-option__label,
.product-variants__label {
  margin: 0;
  padding-left: var(--spacing-400);
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
}

@media only screen and (min-width: 901px) {
  .product-option__label,
  .product-variants__label {
    padding-left: 0;
  }
}


/* Style sélecteur variantes */

.product-variants__select {
  width: calc(100% - var(--spacing-500));
  margin-inline: auto;
  margin-top: var(--spacing-350);
  margin-bottom: var(--spacing-450);
}

@media only screen and (min-width: 901px) {
  .product-variants__select {
    width: calc(100% - var(--spacing-400));
    margin-inline: initial;
    margin-right: auto;
  }
}

@media only screen and (min-width: 1101px) {
  .product-variants__select {
    width: 100%;
    margin-right: auto;
  }
}

/* Style description courte */

.product-short-description {
  padding-top: 32px;
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-700);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
}

@media only screen and (min-width: 901px) {
  .product-short-description {
    padding-top: 0;
  }
}


/* Style réassurances */

.product-delivery {
  padding: var(--spacing-300) var(--spacing-200) var(--spacing-200);
  <!-- margin-top: var(--spacing-400); -->
  <!-- border-top: 1px solid var(--clr-neutral-300); -->
  <!-- border-bottom: 1px solid var(--clr-neutral-300); -->
}

.product-delivery__title {
  font-family: var(--ff-primary);
  font-size: var(--fs-300);
  line-height: var(--lh-400);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

.product-delivery__subtitle {
  font-family: var(--ff-primary);
  font-size: var(--fs-250);
  line-height: 24px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center
}


.joone-arrow {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-400);
  border: 1px solid var(--clr-neutral-400);
  border-radius: 50%;

  transition: var(--transition-400);
  user-select: none;
  cursor: pointer;
  z-index: 1;
}

.joone-arrow:hover {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  border-color: var(--clr-primary-400);
}

.joone-arrow::after {
  content: url(data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99974 10.2823C6.99979 10.1881 6.97894 10.0948 6.93838 10.0077C6.89783 9.92067 6.83836 9.84155 6.76338 9.77491L1.94996 5.49995L6.76338 1.22499C6.91488 1.09042 7 0.9079 7 0.717585C7 0.52727 6.91488 0.344749 6.76338 0.210176C6.61187 0.0756025 6.40638 -2.59478e-08 6.19212 -3.53135e-08C5.97786 -4.46792e-08 5.77237 0.0756024 5.62086 0.210176L0.236729 4.99254C0.16168 5.05916 0.102144 5.13826 0.0615256 5.22533C0.0209062 5.31239 2.40546e-07 5.40571 2.36427e-07 5.49995C2.32307e-07 5.59419 0.0209062 5.68751 0.0615256 5.77458C0.102144 5.86164 0.161679 5.94074 0.236729 6.00736L5.62086 10.7897C5.73381 10.8901 5.87775 10.9585 6.03446 10.9862C6.19117 11.0139 6.35361 10.9997 6.50123 10.9454C6.64885 10.8911 6.77501 10.7991 6.86375 10.681C6.95249 10.563 6.99981 10.4242 6.99974 10.2823Z' fill='%23A8A8A8'/%3E%3C/svg%3E%0A);
  transform: rotate(180deg);
  background-position: center;
}


/* Image produit */
.joone-product-image img {
  width: calc(100vw - 100px);
  max-width: 330px;
  height: calc((100vw - 100px) * 1.25);
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-600);
  box-shadow: var(--shadow-button);
}


/* Miniature produit */
.joone-product-miniature {
  cursor: pointer;
}

.joone-product-miniature img {
  width: 100px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-400);
  box-shadow: var(--shadow-button);
}

.joone-blank-miniature {
  min-width: 100px;
  min-height: 120px;
  visibility: hidden;
}


/* Sélecteur produit */
.joone-product-selector {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;

  width: 130px;
  height: 95px;

  padding: var(--spacing-300);
  box-shadow: var(--shadow-button);
  border-radius: var(--radius-300);
  background-color: var(--clr-neutral-100);
  transition: var(--transition-400), padding 0;
  user-select: none;
  cursor: pointer;
}

.joone-product-selector:hover {
  box-shadow: var(--shadow-button-hover);
}

.joone-product-selector span {
  min-width: 130px;
  font-family: var(--ff-primary);
  font-size: var(--fs-300);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--clr-neutral-500);
}

.joone-product-selector.active {
  padding: calc(var(--spacing-300) - 3px);
  border: 3px solid var(--clr-primary-400);
  box-shadow: var(--shadow-button-hover);
}

.joone-product-selector.unavailable {
  cursor: auto;
}

.joone-product-selector.active.unavailable {
  border-radius: calc(var(--radius-300) + 3px);
}

.joone-product-selector.unavailable::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-300);
}

.joone-product-selector.unavailable::after {
  content: "Victime de son succ\e8s";
  position: absolute;
  width: 245px;
  height: 40px;
  top: 50%;
  left: 50%;
  padding-top: 6px;
  padding-left: 0px;
  transform: translateX(-50%) translateY(-50%) rotate(345deg);

  font-family: var(--ff-primary);
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;

  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-500);
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;

  z-index: 0;

  clip-path: polygon(60px 0px, 195px 0px, 169px 100px, 0px 235px);
}

.joone-product-selector.image {
  min-width: 130px;
  height: 175px;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
}

.joone-product-selector.image span {
  visibility: hidden;
}

.joone-product-selector.image.unavailable::after {
  content: "Victime de son succ\e8s";
  position: absolute;
  width: 240px;
  height: 48px;
  top: 50%;
  left: 50%;
  padding-top: 14px;
  padding-left: 0px;
  transform: translateX(-50%) translateY(-50%) rotate(327deg);

  font-family: var(--ff-primary);
  font-size: 10px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;

  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-500);
  border: 0;

  z-index: 0;

  clip-path: polygon(58px 0px, 213px 0px, 154px 90px, 0px 90px);
}

.joone-blank-selector {
  min-width: 130px;
  min-height: 95px;
  visibility: hidden;
}

/* Bouton */
.joone-button {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--spacing-300);
  border: 1px solid var(--clr-neutral-900);
  box-shadow: var(--shadow-button);
  transition: var(--transition-400);
  cursor: pointer;
  user-select: none;
}

.joone-button:hover {
  padding: calc(var(--spacing-300) - 3px) 16px;
  border: 4px solid var(--clr-primary-400);
  box-shadow: var(--shadow-button-hover);
}

.joone-button.blur {
  backdrop-filter: blur(6px) brightness(0.75);
}

.joone-button p {
  position: relative;
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;
}

.joone-button p span {
  font-style: italic;
  text-transform: initial;
}

.joone-button.atc p,
.joone-button.oos p {
  padding-left: calc(2 * var(--fs-400));
}

.joone-button.arrow p {
  margin-left: var(--fs-400);
  margin-right: calc(2 * var(--fs-400));
}

.joone-button.atc,
.joone-button.oos {
  padding: var(--spacing-300) !important;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
}

.joone-button.atc:hover,
.joone-button.oos:hover {
  padding: calc(var(--spacing-300) - 3px) !important;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
}

.joone-button.atc p::before,
.joone-button.oos p::before {
  position: absolute;
  width: calc(var(--fs-400) / 2);
  height: calc(var(--fs-400) / 2);
  top: 0;
  left: 0;
}

.joone-button.arrow p::after {
  content: '>';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-1 * var(--spacing-350));

  font-family: monospace;
  font-style: normal;
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;

  color: var(--clr-neutral-100);
}

.joone-button.atc p::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='16px' height='16px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10.501 5.833 L 10.501 3.667 C 10.501 2.47 9.381 1.5 8.001 1.5 C 6.62 1.5 5.501 2.47 5.501 3.667 L 5.501 5.833' stroke='%23010101' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 14.5 14.5 L 1.5 14.5 L 2.5 5.833 L 13.5 5.833 L 14.5 14.5 Z' stroke='%23010101' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.joone-button.oos p::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='16px' height='16px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 6.337 13.318 C 6.457 13.663 6.682 13.962 6.98 14.174 C 7.278 14.386 7.635 14.5 8.001 14.5 C 8.367 14.5 8.723 14.386 9.021 14.174 C 9.32 13.962 9.544 13.663 9.665 13.318' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 1.501 10.954 L 14.5 10.954' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 14.5 10.954 C 13.887 10.912 13.31 10.65 12.876 10.215 C 12.441 9.781 12.179 9.204 12.137 8.591 L 12.137 5.636 C 12.137 4.539 11.701 3.487 10.925 2.711 C 10.15 1.936 9.098 1.5 8.001 1.5 C 6.904 1.5 5.852 1.936 5.076 2.711 C 4.3 3.487 3.865 4.539 3.865 5.636 L 3.865 8.591 C 3.823 9.204 3.56 9.781 3.126 10.215 C 2.691 10.65 2.114 10.912 1.501 10.954' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.change_packaging {
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-top: 20px;
} 

@media only screen and (max-width: 1024px) {
  .change_packaging {
    width: calc(100% - 2 * var(--gutter-width-regular));
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  } 
}
  
.change_packaging > p {
  font-size: 9px;
}

.change_packaging > p:nth-child(1n) {
  margin-bottom: 8px;
}



.s-product-banner {
  display: block;
  position: relative;
  margin-top: var(--spacing-600);
  margin-inline: auto;
}

.s-product-banner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.s-product-banner img.desktop {
  display: none;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

@media only screen and (min-width: 901px) {
  .s-product-banner img.mobile {
    display: none
  }

  .s-product-banner img.desktop {
    display: block
  }
}

.s-product-banner .wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.s-product-banner .wrapper > div {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
  
.s-product-banner .wrapper > div > p > .image_desc_text {
	color: white;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 24px;
	text-align: center;
}

.s-product-banner .wrapper > div > p > .image_desc_text_subtitle {
    color: white;
	font-family: var(--ff-secondary);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
  	text-align: center;
}
  



.s-product-composition {
  display: block;
  position: relative;
  margin-top: var(--spacing-600);
  margin-inline: auto;
  border: 15px solid var(--clr-primary-400);
}

.s-product-composition.maman {
  border-color: var(--clr-secondary-400);
}

@media only screen and (min-width: 601px) {
  .s-product-composition {
    border-width: 40px;
  }
}

.s-product-composition > div {
  display: block;
  position: relative;
  width: calc(100% - var(--gutter-width-regular));
  max-width: 880px;
  margin-inline: auto;
  padding: var(--spacing-550) 0;
}

.s-product-composition .composition-title {
  font-family: var(--ff-primary);
  font-size: var(--fs-500);
  line-height: var(--lh-400);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;
}

@media only screen and (min-width: 601px) {
  .s-product-composition > div {
    padding: var(--spacing-600) 0;
  }

  .s-product-composition .composition-title {
    font-size: var(--fs-700);
  }
}

.s-product-composition img,
.s-product-composition svg {
  max-width: 100%
}

.s-product-composition p {
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-700);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
}

.s-product-composition p.title {
  font-size: var(--fs-450);
  line-height: var(--lh-600);
  font-weight: 700;
  text-transform: uppercase;
}

.s-product-composition em {
  font-family: var(--ff-secondary);
  font-style: italic;
  font-weight: 400
}

.s-product-composition a {
  text-decoration: underline;
}

.s-product-composition p,
.s-product-composition ul {
  margin-top: var(--spacing-350);
}

.s-product-composition :first-child {
  margin-top: 0;
}

.s-product-composition ul {
  margin-inline-start: var(--spacing-400);
  list-style-type: disc;
}




.s-product-description.couche-one {
	border: 40px solid var(--clr-primary-400);
	width: 100%;
	max-width: none;
	display: block;
	position: relative;
}
.s-product-description.couche-one > .description,
.s-product-description.couche-one > .usage,
.s-product-description.couche-one > .composition,
.s-product-description.couche-one > .transparence {
	display: block;
	position: relative;
	width: calc(100% - var(--gutter-width-regular));
	max-width: 880px;
	margin-inline: auto;
	padding: var(--spacing-550) 0;
}
.s-product-description.couche-one .selectors {
	margin-bottom: 0px;
}
.s-product-description .selectors {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-500);
  max-width:880px;
  margin:auto;
}

.s-product-description .p-description,
.s-product-description .p-usage {
  padding-bottom: 2px;
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-600);
  font-weight: 800;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--clr-primary-400);
  cursor: pointer;
  user-select: none;
  transition: var(--transition-400);
}

.s-product-description .p-description.active,
.s-product-description .p-usage.active {
  font-weight: 700;
  color: var(--clr-neutral-900);
  box-shadow: inset 0 -2px var(--clr-neutral-900);
}

.s-product-description .separator {
  margin: 0 0.7ch;
  font-family: var(--primary-font);
  font-size: var(--fs-400);
  line-height: var(--lh-600);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  user-select: none;
}

@media only screen and (min-width: 601px) {
  .s-product-description .selectors {
    margin-bottom: var(--spacing-550);
  }

  .s-product-description .p-description,
  .s-product-description .p-usage {
    font-size: var(--fs-500);
  }
  
  .s-product-description .separator {
    font-size: var(--fs-500);
  }
}

.s-product-description .description img,
.s-product-description .usage img,
.s-product-description .description svg,
.s-product-description .usage svg {
  max-width: 100%
}

.s-product-description .description p,
.s-product-description .usage p {
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-700);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
}

.s-product-description .description p.title,
.s-product-description .usage p.title {
  font-size: var(--fs-450);
  line-height: var(--lh-600);
  font-weight: 700;
  text-transform: uppercase;
}

.s-product-description .description em,
.s-product-description .usage em {
  font-weight: 700;
  color: var(--clr-primary-400);
}

.s-product-description .description a,
.s-product-description .usage a {
  text-decoration: underline;
}

.s-product-description .description p,
.s-product-description .description ul,
.s-product-description .usage p,
.s-product-description .usage ul {
  margin-top: var(--spacing-350);
}

.s-product-description .description :first-child,
.s-product-description .usage :first-child {
  margin-top: 0;
}

.s-product-description .description ul,
.s-product-description .usage ul {
  margin-inline-start: var(--spacing-400);
  list-style-type: disc;
}
.s-product-description.couche-one.s-product-description .p-composition,
.s-product-description.couche-one.s-product-description .p-transparence,
.s-product-description.couche-one.s-product-description .p-description,
.s-product-description.couche-one.s-product-description .p-usage {
	padding-bottom: 2px;
	font-family: var(--ff-primary);
	font-size: var(--fs-400);
	line-height: var(--lh-600);
	font-weight: 400;
	letter-spacing: var(--letter-spacing);
	text-transform: none;
	color: #CFCFCF;
	cursor: pointer;
	user-select: none;
	transition: var(--transition-400);
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.15);
    padding: 20px;
    border-radius: 18px;
    margin: 5rem 2rem 0 2rem;
    width: 100%;
    text-align: center;
}
.s-product-description.couche-one.s-product-description .p-description {
  margin: 5rem 2rem 0 0;
}
.s-product-description.couche-one.s-product-description .p-transparence {
  margin: 5rem 0 0 2rem;
}
.s-product-description.couche-one.s-product-description .p-description.active,
.s-product-description.couche-one.s-product-description .p-usage.active,
.s-product-description.couche-one.s-product-description .p-composition.active, 
.s-product-description.couche-one.s-product-description .p-transparence.active {
	color: #BEEAD2;
	box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.15);
	font-weight: 900;
	padding: 20px;
	border: 2px solid #BEEAD2;
	border-radius: 18px;
    font-size: 1.3rem;
}
@media only screen and (min-width: 601px)
.s-product-description.couche-one.s-product-description .p-description.active,
.s-product-description.couche-one.s-product-description .p-usage.active,
.s-product-description.couche-one.s-product-description .p-composition.active, 
.s-product-description.couche-one.s-product-description .p-transparence.active {
  font-size: var(--fs-500);
}

  



.s-product-description {
  display: block;
  position: relative;
  width: calc(100% - 2 * var(--gutter-width-regular));
  max-width: 800px;
  margin-top: var(--spacing-600);
  margin-inline: auto;
}

.s-product-description .selectors {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-500);
}

.s-product-description .p-description,
.s-product-description .p-usage {
  padding-bottom: 2px;
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-600);
  font-weight: 800;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--clr-primary-400);
  cursor: pointer;
  user-select: none;
  transition: var(--transition-400);
}

.s-product-description .p-description.active,
.s-product-description .p-usage.active {
  font-weight: 700;
  color: var(--clr-neutral-900);
  box-shadow: inset 0 -2px var(--clr-neutral-900);
}

.s-product-description .separator {
  margin: 0 0.7ch;
  font-family: var(--primary-font);
  font-size: var(--fs-400);
  line-height: var(--lh-600);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  user-select: none;
}

@media only screen and (min-width: 601px) {
  .s-product-description .selectors {
    margin-bottom: var(--spacing-550);
  }

  .s-product-description .p-description,
  .s-product-description .p-usage {
    font-size: var(--fs-500);
  }
  
  .s-product-description .separator {
    font-size: var(--fs-500);
  }
}

.s-product-description .description img,
.s-product-description .usage img,
.s-product-description .description svg,
.s-product-description .usage svg {
  max-width: 100%
}

.s-product-description .description p,
.s-product-description .usage p {
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  line-height: var(--lh-700);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
}

.s-product-description .description p.title,
.s-product-description .usage p.title {
  font-size: var(--fs-450);
  line-height: var(--lh-600);
  font-weight: 700;
  text-transform: uppercase;
}

.s-product-description .description em,
.s-product-description .usage em {
  font-weight: 700;
  color: var(--clr-primary-400);
}

.s-product-description .description a,
.s-product-description .usage a {
  text-decoration: underline;
}

.s-product-description .description p,
.s-product-description .description ul,
.s-product-description .usage p,
.s-product-description .usage ul {
  margin-top: var(--spacing-350);
}

.s-product-description .description :first-child,
.s-product-description .usage :first-child {
  margin-top: 0;
}

.s-product-description .description ul,
.s-product-description .usage ul {
  margin-inline-start: var(--spacing-400);
  list-style-type: disc;
}




.s-product-header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100% - 2 * var(--gutter-width-regular));
  max-width: 1030px;
  padding-top: var(--spacing-350);
}

@media only screen and (min-width: 601px) {
  .s-product-header {
    padding-top: var(--spacing-450);
  }
}

.s-product-header .breadcrumbs {
  align-self: flex-start;
}

.s-product-header .breadcrumbs a {
  width: 100%;
  height: 100%;
  padding-top: var(--spacing-250);
  padding-left: var(--spacing-350);
  padding-bottom: var(--spacing-100);
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-400);
  line-height: var(--lh-400);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  text-align: left;
  color: var(--clr-neutral-400);
  box-shadow: inset 0 0 var(--clr-primary-400);
  transition: var(--transition-400);
  user-select: none;
}

.s-product-header .breadcrumbs a::before {
  content: '<';
  position: absolute;
  font-family: monospace;
  font-style: normal;
  font-size: 21px;
  line-height: 19px;
  font-weight: 400;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.s-product-header .breadcrumbs a:hover,
.s-product-header .breadcrumbs a:active {
  color: var(--clr-primary-400);
  box-shadow: inset 0 -2px var(--clr-primary-400);
}

@media only screen and (min-width: 901px) {
  .s-product-header .breadcrumbs {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.s-product-header .title {
  margin-top: var(--spacing-300);
}

.s-product-header .title h1 {
  font-family: var(--ff-primary);
  font-size: var(--fs-600);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  text-align: center;
}

.s-product-header .title p {
  margin-top: var(--spacing-100);
  font-family: var(--ff-secondary);
  font-size: var(--fs-600);
  line-height: var(--lh-400);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-transform: none;
  text-align: center;
  font-style: italic;
}

@media only screen and (min-width: 901px) {
  .s-product-header .title {
    margin-top: initial;
  }

  .s-product-header .title h1 {
    font-size: var(--fs-800);
  }

  .s-product-header .title p {
    font-size: var(--fs-900);
  }
}

.s-product-header .trustpilot {
  margin-top: var(--spacing-350);
  margin-bottom: var(--spacing-350)
}

@media only screen and (min-width: 901px) {
  .s-product-header .trustpilot {
    margin-top: var(--spacing-300);
    margin-bottom: var(--spacing-400)
  }
}




.s-product-promo {
  display: block;
  position: relative;
  width: calc(100% - 2 * var(--gutter-width-regular));
  max-width: var(--page-width-700);
  margin-top: var(--spacing-450);
  margin-inline: auto;
  background-color: var(--clr-primary-400a);
}

.s-product-promo p {
  padding: var(--spacing-400);
  font-family: var(--ff-primary-400);
  font-size: var(--fs-300);
  line-height: var(--lh-600);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--clr-neutral-500);
}

@media only screen and (min-width: 601px) {  
  .s-product-promo p {
    padding: var(--spacing-400) var(--spacing-550);
  }
}




.s-product-reviews {
  display: block;
  position: relative;
  width: calc(100% - 2 * var(--gutter-width-regular));
  max-width: 1000px;
  margin-top: var(--spacing-600);
  margin-inline: auto;
}




.s-product-yuka {
  display: block;
  position: relative;
  margin-top: var(--spacing-450);
  margin-inline: auto;
}

.s-product-yuka .intro {
  display: block;
  position: relative;
  width: calc(100% - 2 * var(--gutter-width-regular));
  max-width: 350px;
  margin-inline: auto;
  padding: 0 56px;
  font-family: var(--ff-secondary);
  font-style: italic;
  font-size: var(--fs-450);
  line-height: var(--lh-400);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  text-transform: uppercase;
}

.s-product-yuka .intro::before,
.s-product-yuka .intro::after {
  content: '';
  display: block;
  position: absolute;
  width: 38px;
  height: 3px;
  top: calc(50% - 1px);
  transform: translateY(-50%);
  background-color: var(--clr-primary-400);
}

.s-product-yuka .intro::before { left: 0 }

.s-product-yuka .intro::after { right: 0 }

.s-product-yuka .outro {
  width: calc(100% - 2 * var(--gutter-width-regular));
  margin-top: var(--spacing-400);
  margin-inline: auto;
  font-family: var(--ff-primary);
  font-style: italic;
  font-size: var(--fs-300);
  line-height: var(--lh-600);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--clr-neutral-900a);
}

@media only screen and (min-width: 601px) {
  .s-product-yuka {
    margin-top: var(--spacing-500);
  }

  .s-product-yuka .outro {
    margin-top: var(--spacing-450);
  }
}