/*  ------  reset   ------  */

#main:not(.main-homepage) {
   padding-top: 0px;
}

.breadcrumb {
   display: none !important;
}

#wrapper {
   max-width: 100%;
}

footer {
   margin-top: 0;
}

.footer-wrapper {
   position: relative;
}

.primary-content {
   padding-bottom: 0px;
}

#wrapper.pt_category-wide .site-width-slot,
#wrapper.pt_category-wide .breadcrumb-container,
#wrapper.pt_category-wide .page-content {
   max-width: 100%;
   margin: 0 auto;
   padding-left: 0 !important;
   padding-right: 0 !important;
}


/*  ------  fonts   ------  */

@font-face {
   font-family: "Gotham_Light";
   src: url("../fonts/GothamLight.woff2") format("woff2"),
      url("../fonts/GothamLight.woff") format("woff"),
      url("../fonts/GothamLight.ttf") format("truetype");
}

@font-face {
   font-family: "Gotham_ExtraLight";
   src: url("../fonts/GothamExtraLight.woff2") format("woff2"),
      url("../fonts/GothamExtraLight.woff") format("woff"),
      url("../fonts/GothamExtraLight.ttf") format("truetype");
}

/*  ------  variables   ------  */

.ds9__page {
   --CLARINS-FONT: ClarinsRegular, Clarins;
   --GOTHAM-EXTRALIGHT: "Gotham_ExtraLight";
   --GOTHAM-LIGHT: "Gotham_Light";
   --GOTHAM-BOOK: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
   --GOTHAM-MEDIUM: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
   --COLOR-DEFAULT: #333;
   --COLOR-PAGE: #AC651B;
   --COLOR-RED-A: #b40024;
   --COLOR-RED-B: #8c0b26;
   --RADIUS: 8px;
   --ratioWidth: 1px;
   --mainOffset: 0px;
   --screenHeight: calc(100vh - var(--mainOffset));
}

/*
@media (min-width: 768px) {
   .ds9__page {
      --mainOffset: 0px;
   }
}
*/


/*  ------  page   ------  */

.ds9__page {
   font-family: var(--GOTHAM-BOOK);
   font-weight: normal;
   color: #fff;
   position: relative;
   width: 100%;
}

.ds9__page * {
   box-sizing: border-box;
}

.ds9__page h1,
.ds9__page h2,
.ds9__page h3,
.ds9__page h4 {
   margin: 0;
   padding: 0;
   font-weight: normal;
}

.ds9__page p {
   margin: 0;
   padding: 0;
}

.ds9__page picture {
   display: block;
   width: 100%;
}

.ds9__page img {
   width: 100%;
   display: block;
}

.ds9__page sup {
   line-height: 1em;
   font-size: 0.55em;
   position: relative;
   left: 0.1em;
}

.ds9__page a {
   color: var(--COLOR-DEFAULT);
   text-decoration: none;
}

.ds9__page .ds9__container {
   position: relative;
   max-width: 1046px;
   width: 92%;
   margin: 0 auto;
}

.ds9__page .ds9__bloc {
   position: relative;
   width: 100%;
   margin: 0 auto;
}

.ds9__page .ds9__title {
   font-size: 54px;
   line-height: 1.2em;
   font-family: var(--GOTHAM-MEDIUM);
   text-rendering: optimizeSpeed;
}

.ds9__page .ds9__title[data-animate="1"] {
   height: 1.2em;
   overflow: hidden;
   position: relative;
   top: 0;
   left: 0;
}

.ds9__page .ds9__title[data-animate="1"] span {
   display: block;
   white-space: nowrap;
   position: absolute;
   top: 0;
   left: 0;
}

.ds9__page .ds9__title small {
   display: block;
}

.ds9__page .ds9__suptitle {
   font-size: 24px;
   line-height: 1.2em;
   font-family: var(--GOTHAM-MEDIUM);
   text-rendering: optimizeSpeed;
   text-transform: uppercase;
}

.ds9__page .ds9__subtitle {
   font-size: 20px;
   line-height: 1.2em;
   font-family: var(--GOTHAM-MEDIUM);
   text-rendering: optimizeSpeed;
}

.ds9__page .ds9__text {
   font-size: 14px;
   line-height: 1.45em;
   text-rendering: optimizeSpeed;
}

.ds9__page .ds9__text>span {
   display: block;
}

.ds9__page .ds9__text .ds9__nowrap {
   white-space: nowrap;
}

.ds9__page .ds9__text a {
   text-decoration: underline;
}

.ds9__page .ds9__text a:hover {
   text-decoration: none;
}

.ds9__page .ds9__colored {
   color: var(--COLOR-PAGE);
}

.ds9__page .ds9__text strong,
.ds9__page .ds9__strong {
   font-family: var(--GOTHAM-MEDIUM);
   font-weight: normal;
}

.ds9__page .ds9__price {
   font-size: 16px;
   line-height: 20px;
}

.ds9__page .ds9__cta {}

.ds9__page .ds9__cta-btn {
   cursor: pointer;
   display: inline-flex;
   min-width: 132px;
   height: auto;
   padding: 17px;
   font-size: 14px;
   line-height: 1em;
   text-align: center;
   text-decoration: none;
   letter-spacing: 0;
   color: #fff;
   background-color: var(--COLOR-RED-A);
   border: 2px solid var(--COLOR-RED-A);
   border-radius: 5px;
   font-family: var(--GOTHAM-MEDIUM, Helvetica, Arial);
   font-weight: 500;
   position: relative;
   top: 0;
   left: 0;
   align-items: center;
   justify-content: center;
}

.ds9__page .ds9__cta-btn:hover {
   color: #fff;
   outline: 0 !important;
   background-color: var(--COLOR-RED-B);
   border-color: var(--COLOR-RED-B);
}

.ds9__page .ds9__cta-white {
   color: var(--COLOR-DEFAULT);
   background: #fff;
   border: 1px solid #B0A9A5;
   transition: all 0.3s;
}

.ds9__page .ds9__cta-white:hover {
   color: var(--COLOR-DEFAULT);
   border: 1px solid #797674;
   background: #fff;
   box-shadow: 0px 0px 7px 0px #00000026;
}

.ds9__page .ds9__cta-transparent {
   color: #fff;
   background: transparent;
   border: 1px solid #fff;
   transition: all 0.3s;
}

.ds9__page .ds9__cta-transparent:hover {
   color: #fff;
   border: 1px solid #fff;
   background: transparent;
   box-shadow: 0px 0px 7px 0px #00000026;
}

.ds9__page .ds9__cta .add-to-bag button {
   background-color: var(--COLOR-RED-A) !important;
   border: 2px solid var(--COLOR-RED-A) !important;
   height: 52px !important;
   width: auto;
   text-transform: none;
   padding-left: 1.575em;
   padding-right: 1.575em;
}

.ds9__page .ds9__cta .add-to-bag button:active,
.ds9__page .ds9__cta .add-to-bag button:focus {
   border: 2px solid var(--COLOR-RED-A) !important;
   color: #fff !important;
}

.ds9__page .ds9__cta .add-to-bag button:focus {
   outline: 2px solid var(--COLOR-RED-A) !important;
}

.ds9__page .ds9__cta .add-to-bag button:hover {
   border: 2px solid var(--COLOR-RED-A) !important;
   color: #fff !important;
   background-color: var(--COLOR-RED-B) !important;
}

.ds9__page .ds9__link {
   cursor: pointer;
   text-decoration: underline;
   color: #fff;
   font-family: var(--GOTHAM-MEDIUM);
   font-size: 11px;
   line-height: 1.42em;
   letter-spacing: 0.02em;
   text-transform: uppercase;
   display: inline-block;
}

.ds9__page .ds9__link:hover {
   text-decoration: none;
}

.ds9__page .ds9__btn-more {
   cursor: pointer;
   width: 45px;
   margin: 12px auto 0 auto;
   margin-top: 0;
}

.ds9__page .ds9__btn-more svg,
.ds9__page .ds9__btn-more img {
   width: 100%;
   display: block;
}

.ds9__page .ds9__btn-more .ds9__more-plus {
   transition: transform 0.4s;
   transform-origin: 50% 50%;
}

.ds9__page .ds9__btn-more .ds9__more-circle {
   transition: transform 0.4s;
   transform-origin: 50% 50%;
}

.ds9__page .ds9__link-quickshop {
   cursor: pointer;
   text-decoration: underline;
   display: inline-block;
}

.ds9__page .ds9__link-quickshop:hover {
   text-decoration: none;
}

.ds9__page .ds9__gradient {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: linear-gradient(290.41deg, #DC903B 2.55%, #9E4D16 35.47%, #240600 92.85%);
}

.ds9__page .ds9__nowrap {
   white-space: nowrap;
}


.ds9__page .ds9__quickshop {
   display: none;
}

.ds9__page .ds9__addtobag {
   display: none;
}

.ds9__page .ds9__sticky {
   overflow: hidden;
   position: -webkit-sticky;
   position: sticky;
   top: var(--mainOffset);
   height: auto;
   width: 100%;
   left: 0;
}

@media (min-width: 768px) {

   .ds9__page .ds9__title {
      font-size: 64px;
      line-height: 1.2em;
   }

   .ds9__page .ds9__suptitle {
      font-size: 36px;
      line-height: 1.2em;
   }

   .ds9__page .ds9__subtitle {
      font-size: 24px;
      line-height: 1.2em;
   }

   .ds9__page .ds9__btn-more {
      margin: 16px 0 0 0;
      margin-top: 0;
   }

   .ds9__page .ds9__btn-more:hover .ds9__more-plus {
      transform: scale(0.8);
   }

   .ds9__page .ds9__btn-more:hover .ds9__more-circle {
      transform: rotate(45deg);
   }

}


/*   header    */

.ds9__page .ds9__header {
   --headerImgRatio: 1px;
   position: relative;
   height: 967px;
}

.ds9__page .ds9__header-media {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.ds9__page .ds9__header-picture {
   width: 100%;
   height: 100%;
}

.ds9__page .ds9__header-img {
   width: auto;
   height: 100%;
   object-fit: cover;
   display: block;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.ds9__page .ds9__header-body {
   position: relative;
}

.ds9__page .ds9__header-content {
   position: relative;
   top: 0;
   left: 0;
   width: 90%;
   margin: 0 auto;
   text-align: center;
}

.ds9__page .ds9__header-content-1 {
   padding-top: calc(64 * var(--headerImgRatio));
}

.ds9__page .ds9__header-content-2 {
   position: absolute;
   top: 636px;
   left: calc(50% - 132px);
   width: 264px;
}

.ds9__page .ds9__header-content-3 {
   position: absolute;
   top: 834px;
   left: calc(50% - 132px);
   width: 264px;
}

.ds9__page .ds9__header-suptitle {
   display: block;
   font-size: 18px;
   line-height: 1.2em;
   font-family: var(--GOTHAM-BOOK);
   text-transform: uppercase;
   padding-bottom: 4px;
}

.ds9__page .ds9__header-title {
   font-size: 24px;
   line-height: 1.2em;
   text-transform: uppercase;
}

.ds9__page .ds9__header-text {
   font-size: 16px;
   line-height: 1.1em;
   font-family: var(--GOTHAM-MEDIUM);
   text-transform: uppercase;
   padding-bottom: 5px;
}

.ds9__page .ds9__header-cta {
   padding-top: 27px;
   padding-bottom: 32px;
}

.ds9__page .ds9__header-result-number {
   font-size: 64px;
   line-height: 0.825em;
   font-family: var(--GOTHAM-EXTRALIGHT);
   display: flex;
   align-items: flex-start;
   justify-content: center;
}

.ds9__page .ds9__header-result-glyph {
   font-size: 0.55em;
   line-height: 0.825em;
   font-family: var(--GOTHAM-LIGHT);
}

.ds9__page .ds9__header-result-text {
   font-size: 16px;
   line-height: 1.25em;
   font-family: var(--GOTHAM-MEDIUM);
   text-align: center;
}

.ds9__page .ds9__header-link {
   color: #fff;
}

.ds9__page .ds9__header-discover {
   display: none;
}



@media (min-width: 768px) {

   .ds9__page .ds9__header {
      --headerRatio: calc(100vw / 1281);
      --headerImgRatio: calc(100vw / 1281);
      height: 44vw;
      min-height: var(--screenHeight);
      background: #000;
   }

   .ds9__page .ds9__header-img {
      width: 100%;
      height: 120%;
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }

   .ds9__page .ds9__header-body {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
   }

   .ds9__page .ds9__header-content {
      width: 100%;
      position: relative;
      top: 0;
      left: calc(50% + 20 * var(--headerImgRatio));
      width: calc(50% - 20 * var(--headerImgRatio));
      text-align: left;
      margin: 0;
   }

   .ds9__page .ds9__header-content-1 {
      position: absolute;
      bottom: 10.5vh;
      left: 0;
      max-width: calc(700 * var(--headerRatio));
      padding-top: 0;
      padding-right: calc(20 * var(--headerRatio));
   }

   .ds9__page .ds9__header-content-2 {
      position: absolute;
      top: 6vh;
      left: 0;
      width: auto;
      max-width: calc(350 * var(--headerRatio));
      padding-right: 20px;
   }

   .ds9__page .ds9__header-content-3 {
      position: absolute;
      top: 6vh;
      left: calc((-1) * (246) * var(--headerImgRatio));
      width: auto;
      max-width: calc(264 * var(--headerRatio));
      transform: translateX(-100%);
   }

   .ds9__page .ds9__header-suptitle {
      font-size: calc(24 * var(--headerRatio));
      line-height: 1.2em;
      padding-bottom: 0;
   }

   .ds9__page .ds9__header-title {
      font-size: calc(36 * var(--headerRatio));
      line-height: 1.2em;
      width: auto;
      margin: 0;
   }

   .ds9__page .ds9__header-text {
      font-size: calc(16 * var(--headerRatio));
      line-height: 1.1em;
   }

   .ds9__page .ds9__header-result-number {
      font-size: calc(80 * var(--headerRatio));
      line-height: 0.825em;
   }

   .ds9__page .ds9__header-result-text {
      font-size: calc(16 * var(--headerRatio));
      line-height: 1.25em;
   }

   .ds9__page .ds9__header-discover {
      display: none;
   }

}

@media (min-width: 1281px) {

   .ds9__page .ds9__header {
      --headerRatio: calc(100vw / 1281);
   }

   .ds9__page .ds9__header {
      --headerImgRatio: calc(100vh / 850);
      height: var(--screenHeight);
      background: #000;
   }

   .ds9__page .ds9__header-img {
      width: auto;
      height: 182%;
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }

   .ds9__page .ds9__header-content {
      position: relative;
      top: 0;
      left: calc(50% + 30 * var(--headerImgRatio));
      width: calc(50% - 30 * var(--headerImgRatio));
      text-align: left;
      margin: 0;
   }

   .ds9__page .ds9__header-content-1 {
      position: absolute;
      bottom: 10.5vh;
      left: 0;
      max-width: 700px;
      padding-top: 0;
      padding-right: 20px;
   }

   .ds9__page .ds9__header-content-2 {
      position: absolute;
      top: 6vh;
      left: 0;
      width: auto;
      max-width: 350px;
      padding-right: 20px;
   }

   .ds9__page .ds9__header-content-3 {
      position: absolute;
      top: 6vh;
      left: calc((-1) * (426) * var(--headerImgRatio));
      transform: translateX(-100%);
   }

   .ds9__page .ds9__header-suptitle {
      font-size: 24px;
      line-height: 1.2em;
      padding-bottom: 0;
   }

   .ds9__page .ds9__header-title {
      font-size: 36px;
      line-height: 1.2em;
      width: auto;
      margin: 0;
   }

   .ds9__page .ds9__header-result-number {
      font-size: 80px;
      line-height: 0.825em;
   }

   .ds9__page .ds9__header-cta {
      padding-top: 24px;
      padding-bottom: 0;
   }

   .ds9__page .ds9__header-discover {
      display: block;
      cursor: pointer;
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 1;
      transition: opacity 0.3s;
   }

   .ds9__page .ds9__header-discover-text {
      font-size: 12px;
      line-height: 1.45em;
      letter-spacing: 0.2em;
      text-transform: uppercase;
   }

   .ds9__page .ds9__header-discover-img {
      width: 32px;
      margin: 0 auto;
      transform: translateY(-2px);
      animation: discover 2s cubic-bezier(.28, 0.5, .22, 0.5);
      animation-iteration-count: infinite;
   }

   .ds9__page .ds9__header-discover.ds9__hidden {
      opacity: 0;
   }

   .ds9__page .ds9__header-discover.ds9__hidden .ds9__header-discover-img {
      animation-iteration-count: 0;
   }

   @keyframes discover {
      from {
         transform: translateY(-2px);
      }

      50% {
         transform: translateY(-10px);
      }

      to {
         transform: translateY(-2px);
      }
   }

}

@media (max-width: 1281px) and (min-width: 768px) {

   /*
  .ds9__page .ds9__header { --headerRatio:calc(100vw / 1364); }
*/

   /*
.ds9__page .ds9__header-img { height: auto; width: calc(2100 * (100vw / 1364)); }
*/

   /*
.ds9__page .ds9__header-content { left: calc(50% + 22 * var(--headerRatio)); width: calc(50% - 22 * var(--headerRatio)); }

.ds9__page .ds9__header-content-1 {  }
.ds9__page .ds9__header-content-2 {  }
.ds9__page .ds9__header-content-3 { left:calc( (-1) * 420 * var(--headerRatio)); width: calc(264 * var(--headerRatio)); }

.ds9__page .ds9__header-suptitle { font-size: calc(24 * var(--headerRatio)); line-height: 1.2em; padding-bottom: 0; }
.ds9__page .ds9__header-title { font-size: calc(36 * var(--headerRatio)); line-height: 1.2em; width:auto; margin: 0; }
.ds9__page .ds9__header-text { font-size: calc(16 * var(--headerRatio)); line-height: 1.1em; }

.ds9__page .ds9__header-result-number { font-size: calc(80 * var(--headerRatio)); line-height:0.825em;  }
.ds9__page .ds9__header-result-text { font-size: calc(16 * var(--headerRatio)); line-height:1.25em;  }

.ds9__page .ds9__header-cta { padding-top: calc(24 * var(--headerRatio)); padding-bottom: 0; }

.ds9__page .ds9__header-discover { display:block; cursor:pointer; position: absolute; bottom:calc(6 * var(--headerRatio)); left:50%; transform:translateX(-50%); }
.ds9__page .ds9__header-discover-text { font-size: calc(12 * var(--headerRatio)); line-height: 1.45em; letter-spacing:0.2em; text-transform: uppercase; }
.ds9__page .ds9__header-discover-img { width: calc(32 * var(--headerRatio)); margin: 0 auto; }

*/
}


@media (min-width: 768px) and (max-height: 750px) {

   .ds9__page .ds9__header-content-2 {
      max-width: 100%;
   }

}




/*   navigation    */

.ds9__page .ds9__navigation {
   --topNav: var(--mainOffset);
   height: 45px;
   transition: transform 0.5s;
   transform: translateY(calc((-1) * var(--topNav) - 45px));
   position: fixed;
   top: var(--topNav);
   left: 0;
   width: 100%;
   z-index: 21;
}

.ds9__page .ds9__navigation.ds9__stacked {
   transform: translateY(0);
}

.ds9__page .ds9__navigation-content {
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: column;
   height: auto;
   max-height: 0;
   transition: max-height 0.5s ease-out;
}

.ds9__page .ds9__navigation.ds9__opened .ds9__navigation-content {
   max-height: 325px;
}

.ds9__page .ds9__navigation-handler {
   display: flex;
   justify-content: space-between;
   position: relative;
   left: 0;
   top: 0;
}

.ds9__page .ds9__navigation-handler-click {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   cursor: pointer;
}

.ds9__page .ds9__navigation-handler-left {
   height: 44px;
   display: flex;
   align-items: center;
   color: #fff;
}

.ds9__page .ds9__navigation-handler-right {
   padding-right: 6px;
   display: flex;
   align-items: center;
}

.ds9__page .ds9__navigation-handler-text {
   font-size: 14px;
   line-height: 1.45em;
   font-family: var(--GOTHAM-MEDIUM);
   padding: 0 20px;
   display: block;
   pointer-events: none;
}

.ds9__page .ds9__navigation-handler-arrow {
   background: url(images/holy_arrow.svg) left top no-repeat;
   background-size: 100% auto;
   width: 8px;
   height: 15px;
   transform: rotate(90deg);
   transition: transform 0.3s;
   pointer-events: none;
}

.ds9__page .ds9__navigation.ds9__opened .ds9__navigation-handler-arrow {
   transform: rotate(-90deg);
}

.ds9__page .ds9__navigation-inside {
   position: relative;
   top: 0;
   left: 0;
   z-index: 1;
   background: #BE8958;
   color: #fff;
}

.ds9__page .ds9__navigation-items {
   display: flex;
   flex-direction: column;
   padding: 0;
   list-style: none;
   margin: 0 16px;
   padding-bottom: 16px;
   width: calc(100% - 32px);
   border-top: solid 1px #fff;
}

.ds9__page .ds9__navigation-item {
   height: 52px;
   white-space: nowrap;
   display: flex;
   align-items: center;
   border-bottom: solid 1px #D3CCC8;
   position: relative;
   cursor: pointer;
}

.ds9__page .ds9__navigation-item:hover,
.ds9__page .ds9__navigation-item.ds9__active {}

.ds9__page .ds9__navigation-item span {
   font-size: 14px;
   line-height: 1.45em;
   color: #fff;
   letter-spacing: 0.05em;
   display: block;
   text-align: center;
   position: relative;
}

.ds9__page .ds9__navigation-item {
   opacity: 1;
}

.ds9__page.ds9__stack .ds9__navigation-inside {
   position: fixed;
   top: var(--mainOffset);
   left: 0;
   z-index: 10;
   width: 100%;
}

.ds9__page .ds9__navigation-inside .ds9__cta-btn {
   padding-top: 0;
   padding-bottom: 0;
   height: 32px;
}

.ds9__page .ds9__navigation-handler .ds9__cta-btn {
   margin-left: 20px;
}

.ds9__page .ds9__navigation-content .ds9__cta-btn {
   display: none;
}

@media (min-width: 1140px) {

   .ds9__page .ds9__navigation-content {
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      max-height: unset;
   }

   .ds9__page .ds9__navigation-handler {
      display: none;
   }

   .ds9__page .ds9__navigation-inside {
      height: 45px;
   }

   .ds9__page .ds9__navigation-items {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-bottom: 0;
      width: unset;
      border-top: none;
   }

   .ds9__page .ds9__navigation-item {
      display: block;
      height: unset;
      border-bottom: none;
      margin: 0 16px;
   }

   .ds9__page .ds9__navigation-item a {
      text-transform: uppercase;
   }

   .ds9__page .ds9__navigation-item a span {
      letter-spacing: 0
   }

   .ds9__page .ds9__navigation-item:hover span {
      color: #e9d2bd;
   }

   .ds9__page .ds9__navigation-content .ds9__cta-btn {
      display: flex;
   }

}



/*    popin   */

.ds9__page .ds9__popins {
   display: none;
}

.ds9__page .ds9__popin {
   width: 100%;
   max-width: 1048px;
   margin: 0 auto;
   background: #fff;
}

.ds9__page .ds9__popin-body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.ds9__page .ds9__popin-body.ds9__popin-flex_center {
   align-items: center;
}

.ds9__page .ds9__popin-media {
   width: 100%;
   overflow: hidden;
}

.ds9__page .ds9__popin-content {
   width: 90%;
   text-align: center;
   margin: 0 auto;
   padding-bottom: 24px;
}

.ds9__page .ds9__popin-title {
   font-size: 28px;
   line-height: 1.2em;
   padding-top: 16px;
   padding-bottom: 24px;
   background: linear-gradient(101.16deg, #B06002 24.41%, #E8B05F 52.52%, #D7811D 79.49%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-fill-color: transparent;
   max
}

.ds9__page .ds9__popin-title .ds9__popin-title-maxwidth {
   max-width: 375px;
   display: inline-block;
}

.ds9__page .ds9__popin-subtitle {
   font-size: 14px;
   line-height: 1.45em;
   color: #333;
}

.ds9__page .ds9__popin-text {
   font-size: 14px;
   line-height: 1.45em;
   padding-bottom: 1.45em;
   color: #333;
}

.ds9__page .ds9__popin-text:last-child {
   padding-bottom: 0;
}

.ds9__page .ds9__popin-link {
   padding-bottom: 8px;
}

.ds9__page .ds9__popin-link:last-child {
   padding-bottom: 0;
}

.ds9__page .ds9__popin-link .ds9__link {
   color: #333;
}

.ds9__page .ds9__popin-center .ds9__popin-main-title {
   text-align: center;
   width: 80%;
   margin: 0 auto;
}

.ds9__page .ds9__popin-center .ds9__popin-main-text {
   text-align: center;
   width: 80%;
   margin: 0 auto;
}

.ds9__page .ds9__popin-body.ds9__popin-left .ds9__popin-content {}


@media (min-width: 768px) {

   .ds9__page .ds9__popin-body {
      flex-direction: row;
      align-items: flex-start;
   }

   .ds9__page .ds9__popin-inside {
      padding: 24px;
      width: 90vw;
      max-width: 1048px;
   }

   .ds9__page .ds9__popin-media {
      width: calc(50% - 32px);
      border-radius: 8px;
      overflow: hidden;
   }

   .ds9__page .ds9__popin-content {
      width: calc(50% + 32px);
      padding-left: 64px;
      text-align: left;
      margin: 0;
      padding-bottom: 0;
   }

   .ds9__page .ds9__popin-title {
      padding: 0 24px 16px 0;
   }

   .ds9__page .ds9__popin-body.ds9__popin-right {
      flex-direction: row-reverse;
   }

   .ds9__page .ds9__popin-body.ds9__popin-right .ds9__popin-content {
      text-align: right;
      padding-left: 0;
      padding-right: 64px;
   }

   .ds9__page .ds9__popin-body.ds9__popin-right .ds9__popin-title {
      padding-right: 0;
      padding-left: 24px;
   }

}


/*   innovation    */

.ds9__page .ds9__innovation {
   width: 100%;
   position: relative;
   top: 0;
   left: 0;
}

.ds9__page .ds9__innovation-media {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 177vw;
   overflow: hidden;
}

.ds9__page .ds9__innovation-picture {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
}

.ds9__page .ds9__innovation-picture[data-item="1"] {
   position: relative;
   opacity: 1;
}

.ds9__page .ds9__innovation-picture[data-visible="1"] {
   opacity: 1;
}

.ds9__page .ds9__innovation-img {}

.ds9__page .ds9__innovation-top {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   overflow: hidden;
   transform: translateY(-50%);
}

.ds9__page .ds9__innovation-body {
   position: relative;
   top: 0;
   left: 0;
}

.ds9__page .ds9__innovation-inside {
   width: 100%;
   max-width: 800px;
}

.ds9__page .ds9__innovation-suptitle {
   text-align: center;
}

.ds9__page .ds9__innovation-title {
   text-align: center;
}

.ds9__page .ds9__innovation-items {
   width: 100%;
   position: relative;
   top: 0;
   left: 0;
}

.ds9__page .ds9__innovation-item {
   display: flex;
   flex-direction: column;
   position: relative;
   top: 0;
   left: 0;
   padding-top: 24px;
   padding-bottom: 22px;
}

.ds9__page .ds9__innovation-item-media {
   width: 82%;
   margin: 0 auto;
   position: relative;
   left: 0;
   top: 0;
   overflow: hidden;
   border-radius: 8px;
}

.ds9__page .ds9__innovation-item-content {
   width: 82%;
   margin: 0 auto;
   padding-top: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.ds9__page .ds9__innovation-item-top {
   padding-bottom: 16px;
   text-align: center;
   width: 90%;
   margin: 0 auto;
}

.ds9__page .ds9__innovation-item-suptitle {
   font-size: 20px;
   line-height: 1.2em;
}

.ds9__page .ds9__innovation-item-title {
   font-size: 32px;
   line-height: 1.2em;
}

.ds9__page .ds9__innovation-item-text {
   padding-bottom: 16px;
   text-align: center;
}

.ds9__page .ds9__innovation-item-popin {
   cursor: pointer;
   position: absolute;
   top: 14px;
   left: 11px;
}

.ds9__page .ds9__innovation-item-popin-close {
   position: absolute;
   top: 0;
   left: 0;
   width: 32px;
   height: 32px;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.3s;
}

.ds9__page .ds9__innovation-item-popin-close svg {
   width: 14px;
   display: block;
   transform: rotate(45deg);
   transition: transform 0.4s;
}

.ds9__page .ds9__innovation-item-popin-legend {
   position: absolute;
   top: 45px;
   left: 0;
   color: #fff;
   font-size: 11px;
   line-height: 1.2em;
   letter-spacing: 0.02em;
   font-family: var(--GOTHAM-MEDIUM);
   text-align: left;
   user-select: none;
}

.ds9__page .ds9__innovation-item-popin-legend span {
   display: block;
   white-space: nowrap;
}

.ds9__page .ds9__innovation-item-popin-content {
   background: #fff;
   position: absolute;
   top: 45px;
   left: 0px;
   text-align: center;
   padding: 24px;
   border-radius: 8px;
   width: 238px;
   opacity: 0;
   transition: opacity 0.5s;
   pointer-events: none;
}

.ds9__page .ds9__innovation-item-popin-text {
   font-size: 12px;
   line-height: 1.45em;
   color: #333;
}

.ds9__page .ds9__innovation-item-popin.ds9__opened .ds9__innovation-item-popin-content {
   opacity: 1;
   pointer-events: unset;
}

.ds9__page .ds9__innovation-item-popin.ds9__opened .ds9__innovation-item-popin-close {
   background: #B06002;
}

.ds9__page .ds9__innovation-item-popin.ds9__opened .ds9__innovation-item-popin-close svg {
   transform: rotate(0deg);
}

.ds9__page .ds9__innovation-item-popin.ds9__opened .ds9__innovation-item-popin-close path {
   fill: #FFFFFF;
}

.ds9__page .ds9__popin-dragonfly {
   background: linear-gradient(101.16deg, #B06002 24.41%, #E8B05F 52.52%, #D7811D 79.49%);
   border-radius: 8px;
   padding: 1px;
   margin-top: 18px;
}

.ds9__page .ds9__popin-dragonfly-inside {
   display: flex;
   align-items: center;
   background: #fff;
   border-radius: 8px;
   overflow: hidden;
}

.ds9__page .ds9__popin-dragonfly-media {
   padding-top: 14px;
}

.ds9__page .ds9__popin-dragonfly-picture {
   width: 92px;
}

.ds9__page .ds9__popin-dragonfly-img {
   transform: translateX(-24px)rotate(43deg);
}

.ds9__page .ds9__popin-dragonfly-content {
   padding: 12px 0;
   text-align: left;
}

.ds9__page .ds9__popin-dragonfly-title {
   font-size: 18px;
   line-height: 1.45em;
   padding-top: 0;
   padding-bottom: 8px;
}

.ds9__page .ds9__popin-dragonfly-text {
   padding-bottom: 0;
}

.ds9__page .ds9__popin-reed {
   position: relative;
   top: 0;
   left: 0;
   width: 319px;
   border-radius: 8px;
   overflow: hidden;
   margin: 0 auto;
}

.ds9__page .ds9__popin-reed-media {
   position: relative;
   top: 0;
   left: 0;
}

.ds9__page .ds9__popin-reed-content {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 130px;
   text-align: left;
}

.ds9__page .ds9__popin-reed-title {
   font-size: 14px;
   line-height: 1.45em;
   color: #E38711;
   padding-top: 0;
   padding-bottom: 0;
}

.ds9__page .ds9__popin-reed-text {
   font-size: 14px;
   line-height: 1.45em;
}


@media (min-width: 768px) {

   .ds9__page .ds9__innovation {
      --ratioInnovationWidth: 1px;
      --itemHeight: calc(var(--screenHeight) * 0.78 - 110px);
      --ratioInnovationHeight: min(1px, calc(var(--itemHeight) / 292));
      height: 150vh;
      background: #000;
      margin-bottom: 32px;
   }

   .ds9__page .ds9__innovation-media {
      display: block;
      width: 100%;
      height: var(--screenHeight);
      --pictureInnovationWidth: calc(var(--screenHeight) * 16 / 9);
   }

   .ds9__page .ds9__innovation-media::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: calc(100% - var(--pictureInnovationWidth) + 210px + var(--pictureInnovationWidth) * 0.2);
      height: 100%;
      background: linear-gradient(90deg, #95613B calc(100% - 210px), rgba(149, 97, 59, 0) 100%);
   }

   .ds9__page .ds9__innovation-picture {
      width: auto;
      height: 100%;
      left: auto;
      right: calc((-1) * var(--pictureInnovationWidth) * 0.2);
   }

   .ds9__page .ds9__innovation-img {
      width: auto;
      height: 100%;
   }

   .ds9__page .ds9__innovation-body {
      position: absolute;
      top: 0;
      left: calc(50% - 600 * var(--ratioInnovationWidth));
      height: var(--screenHeight);
      z-index: 3;
   }

   .ds9__page .ds9__innovation-inside {
      width: 100%;
      max-width: 800px;
      height: 100%;
   }

   .ds9__page .ds9__innovation-top {
      padding-top: calc(0.12 * var(--screenHeight));
      padding-bottom: calc(0.05 * var(--screenHeight));
      position: relative;
      top: 0;
      left: 0;
      transform: none;
   }

   .ds9__page .ds9__innovation-wrapper {
      width: calc(616 * var(--ratioInnovationHeight));
      height: calc(var(--itemHeight) + 0.05 * var(--screenHeight));
      overflow: hidden;
      margin: 0 auto;
   }

   .ds9__page .ds9__innovation-items {
      width: 100%;
      padding-top: calc(0.05 * var(--screenHeight));
   }

   /*
.ds9__page .ds9__innovation-item { display: none; flex-direction:row; align-items:flex-start; position: absolute; top: 50%; left: 0; transform:translateY(-50%); opacity: 0; transition:opacity 1s ease-out;  padding-top: 0; padding-bottom: 0;  }
*/
   .ds9__page .ds9__innovation-item {
      flex-direction: row;
      align-items: flex-start;
      position: relative;
      top: 0;
      left: 0;
      padding-top: 0;
      padding-bottom: calc((var(--itemHeight) - 292 * var(--ratioInnovationHeight)) * 0.5 + var(--screenHeight) * 0.05);
   }

   .ds9__page .ds9__innovation-item:first-child {
      padding-top: calc((var(--itemHeight) - 292 * var(--ratioInnovationHeight)) * 0.5 - var(--screenHeight) * 0.05);
   }

   .ds9__page .ds9__innovation-item:nth-of-type(2n+1) {
      flex-direction: row-reverse;
   }

   .ds9__page .ds9__innovation-item.ds9__active {
      display: flex;
   }

   .ds9__page .ds9__innovation-item.ds9__visible {
      opacity: 1;
   }

   .ds9__page .ds9__innovation-item-media {
      width: calc(292 * var(--ratioInnovationHeight));
      margin: 0;
   }

   .ds9__page .ds9__innovation-item-content {
      width: calc(100% - calc(292 * var(--ratioInnovationHeight)));
      padding-top: 0;
      padding-left: calc(32 * var(--ratioInnovationHeight));
      align-items: flex-start;
      margin: 0;
      max-width: calc(325 * var(--ratioInnovationHeight));
   }

   .ds9__page .ds9__innovation-item:nth-of-type(2n+1) .ds9__innovation-item-content {
      align-items: flex-end;
      padding-left: 0;
      padding-right: calc(32 * var(--ratioInnovationHeight));
   }

   .ds9__page .ds9__innovation-item-top {
      width: 100%;
      text-align: left;
      margin: 0;
   }

   .ds9__page .ds9__innovation-item:nth-of-type(2n+1) .ds9__innovation-item-top {
      text-align: right;
   }

   .ds9__page .ds9__innovation-item-title {
      font-size: calc(32 * var(--ratioInnovationHeight));
      line-height: 1.2em;
   }

   .ds9__page .ds9__innovation-item-suptitle {
      font-size: calc(24 * var(--ratioInnovationHeight));
      line-height: 1.2em;
   }

   .ds9__page .ds9__innovation-item-text {
      text-align: left;
      padding-bottom: calc(16 * var(--ratioInnovationHeight));
      font-size: calc(14 * var(--ratioInnovationHeight));
      line-height: 1.45em;
   }

   .ds9__page .ds9__innovation-item:nth-of-type(2n+1) .ds9__innovation-item-text {
      text-align: right;
   }

   .ds9__page .ds9__innovation-item .ds9__link {
      font-size: calc(11 * var(--ratioInnovationHeight));
      line-height: 1.42em;
   }

   .ds9__page .ds9__innovation-item .ds9__btn-more {
      width: calc(45 * var(--ratioInnovationHeight));
      height: calc(45 * var(--ratioInnovationHeight));
      /* margin-top: calc(16 * var(--ratioInnovationHeight)); */
   }

   .ds9__page .ds9__innovation-item .ds9__btn-more svg {
      height: 100%;
   }

   .ds9__page .ds9__innovation-item-popin .ds9__innovation-item-popin-close:hover {
      background: #B06002;
   }

   .ds9__page .ds9__innovation-item-popin .ds9__innovation-item-popin-close:hover path {
      fill: #FFFFFF;
   }

   .ds9__page .ds9__innovation-item-popin-content {
      top: 45px;
      padding: calc(24 * var(--ratioInnovationHeight));
      width: calc(238 * var(--ratioInnovationHeight));
   }

   .ds9__page .ds9__innovation-item-popin-text {
      font-size: calc(12 * var(--ratioInnovationHeight));
      line-height: 1.45em;
   }

   .ds9__page .ds9__popin-dragonfly {
      margin-top: 50px;
   }

   .ds9__page .ds9__popin-dragonfly-content {
      padding: 24px 0;
   }

   .ds9__page .ds9__popin-dragonfly-title {
      padding-bottom: 12px;
   }

   .ds9__page .ds9__popin-dragonfly-media {
      margin: 0 35px;
      padding-top: 0;
   }

   .ds9__page .ds9__popin-dragonfly-picture {
      width: 98px;
   }

   .ds9__page .ds9__popin-dragonfly-img {
      transform: rotate(35deg);
   }


   .ds9__page .ds9__popin-reed {
      margin: 0;
   }

}


@media (min-width: 1281px) {

   /*
    .ds9__page .ds9__innovation-media::before { width: 50%; }
    .ds9__page .ds9__innovation-picture { right: auto; left:calc(50% - 210px); }
*/

}

@media (max-width: 1364px) {

   .ds9__page .ds9__innovation {
      --ratioInnovationWidth: calc(100vw / 1364);
   }

}



/*   ingredient    */

.ds9__page .ds9__ingredient {
   width: 100%;
   max-width: 1264px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 32px;
   padding-bottom: 32px;
}

.ds9__page .ds9__ingredient-top {
   width: 100%;
   padding-bottom: 24px;
}

.ds9__page .ds9__ingredient-suptitle {
   text-align: center;
}

.ds9__page .ds9__ingredient-title {
   text-align: center;
   padding-bottom: 32px;
}

.ds9__page .ds9__ingredient-subtitle {
   text-align: center;
   padding-top: 24px;
   padding-bottom: 16px;
}

.ds9__page .ds9__ingredient-text {
   text-align: center;
   /* padding-bottom: 32px; */
   padding-bottom: 16px;
}

.ds9__page .ds9__ingredient-media {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
}

.ds9__page .ds9__ingredient-content {
   width: 100%;
   text-align: center;
   padding-bottom: 22px;
}

.ds9__page .ds9__ingredient-subtitle,
.ds9__page .ds9__ingredient-text {
   width: 90%;
   margin: 0 auto;
}

.ds9__page .ds9__ingredient-popin {
   cursor: pointer;
   position: absolute;
   top: 61vw;
   left: 42vw;
}

.ds9__page .ds9__ingredient-popin-close {
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 32px;
   height: 32px;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   transition: background 0.3s;
}

.ds9__page .ds9__ingredient-popin-close svg {
   width: 14px;
   display: block;
   transform: rotate(45deg);
   transition: transform 0.5s;
}

.ds9__page .ds9__ingredient-popin-legend {
   position: absolute;
   top: 0;
   left: 38px;
   color: #fff;
   font-size: 11px;
   line-height: 1.2em;
   letter-spacing: 0.02em;
   font-family: var(--GOTHAM-MEDIUM);
   user-select: none;
}

.ds9__page .ds9__ingredient-popin-legend span {
   display: block;
   white-space: nowrap;
}

.ds9__page .ds9__ingredient-popin-content {
   background: #fff;
   position: absolute;
   top: -9px;
   left: 16px;
   text-align: center;
   padding: 10px;
   border-radius: 5px;
   width: 200px;
   opacity: 0;
   transition: opacity 0.5s;
   transform: translate(-50%, -100%);
   pointer-events: none;
}

.ds9__page .ds9__ingredient-popin-text {
   font-size: 12px;
   line-height: 1.45em;
   color: #333;
}

.ds9__page .ds9__ingredient-popin.ds9__opened .ds9__ingredient-popin-close svg {
   transform: rotate(0deg);
}

.ds9__page .ds9__ingredient-popin.ds9__opened .ds9__ingredient-popin-content {
   opacity: 1;
   pointer-events: unset;
}

.ds9__page .ds9__ingredient-popin.ds9__opened .ds9__ingredient-popin-close {
   background: #B06002;
}

.ds9__page .ds9__ingredient-popin.ds9__opened .ds9__ingredient-popin-close path {
   fill: #FFFFFF;
}

.ds9__page .ds9__popin-ingredients-wrapper {
   width: 100%;
   margin: 0 auto;
   position: relative;
   left: 0;
   top: 0;
}

.ds9__page .ds9__popin-ingredient {
   display: flex;
   align-items: center;
   flex-direction: column;
   width: 100%;
}

.ds9__page .ds9__popin-ingredient-media {
   width: 324px;
}

.ds9__page .ds9__popin-ingredient-content {
   width: 90%;
   margin: 0 auto;
}

.ds9__page .ds9__popin-ingredient-title {
   text-align: center;
   padding-bottom: 12px;
}

.ds9__page .ds9__popin-ingredient-subtitle {
   text-align: center;
   padding-bottom: 8px;
   text-transform: uppercase;
}

.ds9__page .ds9__popin-ingredient-text {
   text-align: center;
}


@media (min-width: 768px) {

   .ds9__page .ds9__ingredient {
      --ratioIngredient: 1px;
      flex-direction: row;
      padding-top: 32px;
   }

   .ds9__page .ds9__ingredient-top {
      padding-bottom: 0;
   }

   .ds9__page .ds9__ingredient-content {
      width: 100%;
      text-align: left;
      padding-bottom: 0;
   }

   .ds9__page .ds9__ingredient-suptitle {
      text-align: left;
   }

   .ds9__page .ds9__ingredient-title {
      text-align: left;
   }

   .ds9__page .ds9__ingredient-subtitle {
      padding-top: 0;
      text-align: left;
      margin: 0;
   }

   .ds9__page .ds9__ingredient-text {
      text-align: left;
      margin: 0;
   }

   .ds9__page .ds9__ingredient-media {
      width: calc(616 * var(--ratioIngredient));
      border-radius: 8px;
      overflow: hidden;
   }

   .ds9__page .ds9__ingredient-content {
      width: calc(100% - 616 * var(--ratioIngredient));
      padding-left: 64px;
   }

   .ds9__page .ds9__ingredient-popin {
      top: calc(374 * var(--ratioIngredient));
      left: calc(266 * var(--ratioIngredient));
   }

   .ds9__page .ds9__ingredient-popin-content {
      top: 38px;
      left: 26px;
      padding: 24px;
      border-radius: 8px;
      width: 286px;
      transform: none;
   }

   .ds9__page .ds9__ingredient-popin .ds9__ingredient-popin-close:hover {
      background: #B06002;
   }

   .ds9__page .ds9__ingredient-popin .ds9__ingredient-popin-close:hover path {
      fill: #FFFFFF;
   }

   .ds9__page .ds9__popin-ingredient {
      width: 720px;
   }

   .ds9__page .ds9__popin-ingredients-wrapper {
      width: 75%;
   }

   .ds9__page .ds9__popin-ingredient {
      flex-direction: row;
   }

   .ds9__page .ds9__popin-ingredient-content {
      width: 380px;
      padding-left: 16px;
      margin: 0;
   }

   .ds9__page .ds9__popin-ingredient-title {
      text-align: left;
      padding-bottom: 12px;
   }

   .ds9__page .ds9__popin-ingredient-subtitle {
      text-align: left;
      padding-bottom: 8px;
   }

   .ds9__page .ds9__popin-ingredient-text {
      text-align: left;
   }

}

@media (max-width: 1364px) {

   .ds9__page .ds9__ingredient {
      --ratioIngredient: calc(100vw / 1364);
   }

}



/*   edito    */

.ds9__page .ds9__edito {
   width: 100%;
   max-width: 1264px;
   margin: 0 auto;
   padding-bottom: 20px;
}

.ds9__page .ds9__edito-top {
   padding-top: 32px;
   padding-bottom: 24px;
}

.ds9__page .ds9__edito-suptitle {
   text-align: center;
}

.ds9__page .ds9__edito-title {
   text-align: center;
}

.ds9__page .ds9__edito-media {
   width: 100%;
}

.ds9__page .ds9__edito-content {
   text-align: center;
   padding-top: 24px;
}

.ds9__page .ds9__edito-subtitle {
   width: 90%;
   margin: 0 auto;
   padding-bottom: 16px;
}

.ds9__page .ds9__edito-text {
   width: 90%;
   margin: 0 auto;
   font-size: 18px;
   line-height: 1.45em;
   padding-bottom: 44px;
}

.ds9__page .ds9__edito-results {
   display: flex;
   flex-wrap: wrap;
}

.ds9__page .ds9__edito-result {
   width: 50%;
   padding-bottom: 34px;
}

.ds9__page .ds9__edito-result-number {
   font-size: 64px;
   line-height: 0.825em;
   font-family: var(--GOTHAM-EXTRALIGHT);
   display: flex;
   align-items: flex-start;
   justify-content: center;
}

.ds9__page .ds9__edito-result-glyph {
   font-size: 0.55em;
   line-height: 0.825em;
   font-family: var(--GOTHAM-LIGHT);
}

.ds9__page .ds9__edito-result-text {
   font-size: 14px;
   line-height: 1.45em;
   font-family: var(--GOTHAM-MEDIUM);
   text-align: center;
}


@media (min-width: 768px) {

   .ds9__page .ds9__edito {
      padding-bottom: 80px;
   }

   .ds9__page .ds9__edito-top {
      padding-bottom: 32px;
   }

   .ds9__page .ds9__edito-media {
      border-radius: 8px;
      overflow: hidden;
   }

   .ds9__page .ds9__edito-content {
      padding-top: 40px;
      margin: 0 auto;
   }

   .ds9__page .ds9__edito-subtitle {
      width: auto;
      margin: 0;
      padding-bottom: 8px;
   }

   .ds9__page .ds9__edito-text {
      width: auto;
      margin: 0;
      font-size: 14px;
      line-height: 1.45em;
      padding-bottom: 26px;
   }

   .ds9__page .ds9__edito-results {
      flex-wrap: nowrap;
      justify-content: center;
   }

   .ds9__page .ds9__edito-result {
      width: 150px;
      min-width: 150px;
      margin-right: 48px;
      padding-bottom: 0;
   }

   .ds9__page .ds9__edito-result:last-child {
      margin-right: 0;
   }
}


/*   double formula    */

.ds9__page .ds9__formula {
   --formulaHeight: 948px;
   width: 100%;
   height: var(--formulaHeight);
   position: relative;
   left: 0;
   top: 0;
}

.ds9__page .ds9__formula-media {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.ds9__page .ds9__formula-media::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: calc(var(--formulaHeight) - (100vw * 1.77778) + 210px);
   background: linear-gradient(180deg, rgba(81, 44, 25, 0) 0%, #512C19 210px);
}

.ds9__page .ds9__formula-picture {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
}

.ds9__page .ds9__formula-picture[data-visible="1"] {
   opacity: 1;
}

.ds9__page .ds9__formula-picture[data-item="1"] {
   position: relative;
   opacity: 1;
}

.ds9__page .ds9__formula-img {}

.ds9__page .ds9__formula-content {
   position: absolute;
   left: 0;
   width: 100%;
   padding-top: 40px;
   text-align: center;
   z-index: 3
}

.ds9__page .ds9__formula-content-2 {
   position: absolute;
   top: 392px;
   left: 0;
   width: 100%;
}

.ds9__page .ds9__formula-suptitle {
   text-align: center;
   padding-bottom: 8px;
}

.ds9__page .ds9__formula-title {}

.ds9__page .ds9__formula-subtitle {
   font-size: 24px;
   line-height: 1.2em;
   text-align: center;
   padding-bottom: 24px;
   width: 80%;
   max-width: 300px;
   margin: 0 auto;
}

.ds9__page .ds9__formula-text {}

.ds9__page .ds9__formula-bloc {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: centent;
   padding-bottom: 16px;
}

.ds9__page .ds9__formula-bloc-media {
   width: 180px;
   height: 170px;
   display: block;
   border-radius: 8px;
   overflow: hidden;
}

.ds9__page .ds9__formula-bloc-content {
   width: 90%;
   margin: 0 auto;
   padding-top: 16px;
}

.ds9__page .ds9__formula-bloc-result {
   padding-bottom: 12px;
}

.ds9__page .ds9__formula-bloc-result-line {
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

.ds9__page .ds9__formula-bloc-result-number {
   font-size: 64px;
   line-height: 0.825em;
   font-family: var(--GOTHAM-EXTRALIGHT);
   display: flex;
   align-items: flex-start;
   min-width: 112px;
}

.ds9__page .ds9__formula-bloc-result-glyph {
   font-size: 0.55em;
   line-height: 0.825em;
   font-family: var(--GOTHAM-LIGHT);
}

.ds9__page .ds9__formula-bloc-result-text-first {
   font-size: 18px;
   line-height: 1em;
}

.ds9__page .ds9__formula-bloc-result-text {
   text-align: center;
   font-size: 18px;
   line-height: 1.45em;
   font-family: var(--GOTHAM-MEDIUM);
}

.ds9__page .ds9__formula-bloc-text {
   font-size: 14px;
   line-height: 1.45em;
}


@media (min-width: 768px) {

   .ds9__page .ds9__formula {
      --formulaHeight: 736px;
      background: #000;
   }

   .ds9__page .ds9__formula-media {
      width: 100%;
      height: 100%;
   }

   .ds9__page .ds9__formula-media::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: auto;
      left: auto;
      right: 0;
      z-index: 1;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, rgba(81, 44, 25, 0) 0%, #512C19 210px);
   }

   .ds9__page .ds9__formula-picture {
      width: calc(var(--formulaHeight) * 1.77778);
      height: 100%;
      left: calc(50% + 210px - (var(--formulaHeight) * 1.77778));
      opacity: 0;
   }

   .ds9__page .ds9__formula-img {
      width: calc(var(--formulaHeight) * 1.77778);
      height: 100%;
   }

   .ds9__page .ds9__formula-content {
      position: absolute;
      left: 50%;
      width: 50%;
      max-width: 616px;
      padding-top: 48px;
      text-align: left;
   }

   .ds9__page .ds9__formula-content-2 {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
   }

   .ds9__page .ds9__formula-suptitle {
      text-align: left;
      padding-bottom: 0px;
   }

   .ds9__page .ds9__formula-title {
      padding-bottom: 44px;
   }

   .ds9__page .ds9__formula-subtitle {
      text-align: left;
      padding-bottom: 32px;
      width: unset;
      max-width: 100%;
      margin: 0;
   }

   .ds9__page .ds9__formula-bloc {
      flex-direction: row;
      /* padding-bottom: 32px;*/
      padding-bottom: 16px;
   }

   .ds9__page .ds9__formula-bloc-media {
      width: 195px;
      height: auto;
   }

   .ds9__page .ds9__formula-bloc-content {
      width: calc(100% - 195px);
      padding-top: 0;
      padding-left: 32px;
   }

   .ds9__page .ds9__formula-bloc-result {
      padding-bottom: 24px;
   }

   .ds9__page .ds9__formula-bloc-result-line {
      justify-content: flex-start;
   }

   .ds9__page .ds9__formula-bloc-result-text-first {
      font-size: 24px;
      line-height: 1.45em;
   }

   .ds9__page .ds9__formula-bloc-result-text {
      text-align: left;
      font-size: 24px;
      line-height: 1.45em;
   }

}





/*   Sample   */

.ds9__page .ds9__sample {
   text-align: center;
   width: 90%;
   margin: 0 auto;
   padding-top: 40px;
   padding-bottom: 56px;
}

.ds9__page .ds9__sample-title {
   font-size: 21px;
   line-height: 1.45em;
   font-family: var(--GOTHAM-MEDIUM);
   padding-bottom: 12px;
   text-transform: uppercase;
   letter-spacing: 0.2em;
   width: 80%;
   margin: 0 auto;
}

.ds9__page .ds9__sample-text {
   padding-bottom: 24px;
}

.ds9__page .ds9__sample-body {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   width: 90%;
   margin: 0 auto;
}

.ds9__page .ds9__sample-media {
   width: 237px;
   margin: 0 auto;
}

.ds9__page .ds9__sample-content {
   width: 100%;
   text-align: left;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.ds9__page .ds9__sample-steps {
   text-align: left;
   width: 100%;
   max-width: 382px;
   padding-top: 24px;
   padding-bottom: 24px;
   padding-right: 24px;
}

.ds9__page .ds9__sample-step {
   position: relative;
   padding: 5px 0;
   display: flex;
   justify-content: flex-start;
}

.ds9__page .ds9__sample-step-text {
   display: block;
   width: calc(100% - 28px);
   font-size: 12px;
   line-height: 1.45em;
   padding-left: 10px;
}

.ds9__page .ds9__sample-step-number {
   display: block;
   width: 28px;
   height: 28px;
   color: #fff;
   font-size: 12px;
   line-height: 28px;
   border-radius: 50%;
   text-align: center;
   background: #B86D28;
}

.ds9__page .ds9__sample-legend {
   font-size: 12px;
   line-height: 1.45em;
   color: #fff;
}

.ds9__page .ds9__sample-cta {
   text-align: center;
}

.ds9__page .ds9__sample-more {
   padding-top: 15px;
   text-align: center;
}

.ds9__page .ds9__sample-more-handler {
   padding-bottom: 8px;
}

.ds9__page .ds9__sample-more-handler span {
   font-size: 10px;
   line-height: 1.45em;
   text-transform: uppercase;
   position: relative;
   cursor: pointer;
   text-decoration: underline;
   opacity: 0.8;
   transition: opacity 0.3s;
}

.ds9__page .ds9__sample-more-handler span:hover {
   text-decoration: none;
   opacity: 1;
}

.ds9__page .ds9__sample-more-panel {
   max-height: 0;
   transition: max-height 0.5s;
   overflow: hidden;
}

.ds9__page .ds9__sample-more[data-open="1"] .ds9__sample-more-panel {
   max-height: 200px;
}

.ds9__page .ds9__sample-more[data-open="1"] .ds9__sample-more-handler span {
   opacity: 1;
}

@media (min-width: 768px) {

   .ds9__page .ds9__sample {
      padding-top: 64px;
      padding-bottom: 64px;
   }

   .ds9__page .ds9__sample-body {
      border: solid 1px #fff;
      border-radius: 8px;
      flex-direction: row;
      width: 90%;
      max-width: 832px;
      margin: 0 auto;
   }

   .ds9__page .ds9__sample-media {
      width: 237px;
      margin: 0 50px 0 63px;
      padding: 29px 0;
   }

   .ds9__page .ds9__sample-content {
      width: calc(100% - 350px);
      padding-left: 40px;
      align-items: flex-start;
   }

   .ds9__page .ds9__sample-title {
      font-size: 24px;
      line-height: 1.45em;
   }

   .ds9__page .ds9__sample-more {
      padding-bottom: 16px;
      text-align: left;
   }

   .ds9__page .ds9__sample-cta {
      text-align: left;
   }

}


/*   facial   */

.ds9__page .ds9__bloc-facial {
   margin-top: 66px;
   padding-top: 66px
}

.ds9__page .ds9__facial {
   position: relative;
   top: 0;
   left: 0;
   text-align: center;
   width: 90%;
   max-width: 832px;
   margin: 0 auto 60px auto;
   color: var(--COLOR-DEFAULT);
   background: #BE8958;
   display: flex;
   flex-direction: row;
   justify-content: center;
   border-radius: var(--RADIUS);
}

.ds9__page .ds9__facial-media {
   position: absolute;
   top: -32px;
   left: calc(50% - 105px);
   width: 210px;
   margin: 0 auto;
   border-radius: var(--RADIUS);
   overflow: hidden;
   border: solid 4px #333;
   background: #333;
}

.ds9__page .ds9__facial-media iframe {
   width: 202px;
   height: calc(202px * 16 / 9);
   display: block;
}

.ds9__page .ds9__facial-body {
   position: relative;
   top: 0;
   left: 0;
   padding: 370px 0 32px 0;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.ds9__page .ds9__facial-content {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}

.ds9__page .ds9__facial-suptitle {
   font-size: 32px;
   line-height: 1.2em;
   color: #fff;
}

.ds9__page .ds9__facial-title {
   font-size: 32px;
   line-height: 1.2em;
   color: #fff;
   padding-bottom: 4px;
}

.ds9__page .ds9__facial-text {
   padding-bottom: 24px;
   color: #fff;
}

.ds9__page .ds9__facial-content-left {}

.ds9__page .ds9__facial-content-right-link {
   padding-bottom: 32px;
}

.ds9__page .ds9__facial-content-right-text {
   display: none;
   font-size: 14px;
   line-height: 1.2em;
   color: #fff;
   text-transform: uppercase;
   text-align: center;
   padding-top: 12px;
}

.ds9__page .ds9__facial-qrcode {
   display: none;
}

.ds9__page .ds9__facial-expert {
   position: relative;
   top: 0;
   left: 0;
   display: flex;
   align-items: flex-start;
   justify-content: stretch;
   flex-direction: row;
   padding-left: 44px;
}

.ds9__page .ds9__facial-expert-body {
   position: relative;
   top: 0;
   left: 0;
   background: #fff;
   border-radius: 52px;
   border-radius: var(--RADIUS);
   padding: 12px 24px 12px 54px;
}

.ds9__page .ds9__facial-expert-visual {
   z-index: 1;
   position: absolute;
   top: calc(50% - 44px);
   left: 0;
   width: 88px;
   height: 88px;
   background: #fff;
   border-radius: 50%;
   overflow: hidden;
   border: solid 4px #fff;
}

.ds9__page .ds9__facial-expert-content {}

.ds9__page .ds9__facial-expert-name {
   font-size: 17px;
   line-height: 1.2em;
   color: #9D6552;
   padding-bottom: 4px;
}

.ds9__page .ds9__facial-expert-text {}


@media (min-width: 768px) {

   .ds9__page .ds9__bloc-facial {
      margin-top: 63px;
      padding-top: 63px
   }

   .ds9__page .ds9__facial {
      text-align: left;
   }

   .ds9__page .ds9__facial-media {
      top: calc(50% - 185px);
      left: 40px;
   }

   .ds9__page .ds9__facial-body {
      padding: 32px 40px 32px 271px;
      align-items: flex-start;
   }

   .ds9__page .ds9__facial-content {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
   }

   .ds9__page .ds9__facial-suptitle {
      font-size: 37px;
      line-height: 1.2em;
   }

   .ds9__page .ds9__facial-title {
      font-size: 37px;
      line-height: 1.2em;
   }

   .ds9__page .ds9__facial-qrcode {
      width: 92px;
      display: block;
   }

   .ds9__page .ds9__facial-content-right-text {
      display: block;
   }

   .ds9__page .ds9__facial-content-right-link {
      display: none;
   }


}




/*   Push   */

.ds9__page .ds9__push {
   padding-top: 40px;
   padding-bottom: 56px;
}

.ds9__page .ds9__push-body {
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
}

.ds9__page .ds9__push-content {
   width: 90%;
   padding-top: 24px;
   text-align: center;
}

.ds9__page .ds9__push-title {
   font-size: 32px;
   line-height: 1.2em;
   text-align: center;
   padding-bottom: 24px;
}

.ds9__page .ds9__push-subtitle {
   font-size: 24px;
   line-height: 1.2em;
   padding-bottom: 16px;
   text-align: center;
}

.ds9__page .ds9__push-text {
   font-size: 16px;
   line-height: 1.45em;
   padding-bottom: 24px;
   text-align: center;
}

.ds9__page .ds9__push-media {
   width: 92%;
   border-radius: 8px;
   overflow: hidden;
}


@media (min-width: 768px) {

   .ds9__page .ds9__push {
      width: 90%;
      max-width: 832px;
      margin: 0 auto 112px auto;
      padding-top: 60px;
      padding-bottom: 0;
   }

   .ds9__page .ds9__push-body {
      flex-direction: row;
      align-items: center;
      padding: 24px 0 24px 0;
   }

   .ds9__page .ds9__push-content {
      width: 100%;
      padding-top: 0;
      text-align: right;
      padding-left: 24px;
      padding-right: 40px;
   }

   .ds9__page .ds9__push-title {
      text-align: right;
   }

   .ds9__page .ds9__push-subtitle {
      padding-bottom: 24px;
      text-align: right;
   }

   .ds9__page .ds9__push-text {
      font-size: 14px;
      line-height: 1.45em;
      padding-bottom: 24px;
      text-align: right;
   }

   .ds9__page .ds9__push-media {
      width: 90%;
      border-radius: 8px;
      overflow: hidden;
   }

}




/*  legendes */

.ds9__page .ds9__bloc-legendes {}

.ds9__page .ds9__legendes {
   width: 100%;
   max-width: 1264px;
   margin: 0 auto;
   padding: 0 3% 24px 3%;
   text-align: center;
}

.ds9__page .ds9__legende {
   font-size: 10px;
   line-height: 1.45em;
}



@media (min-width: 768px) {

   .ds9__page .ds9__legende {
      text-align: left;
   }

}



/*  faq */

.ds9__page .ds9__bloc-faq {
   padding-bottom: 48px;
}

.ds9__page .ds9__faq-title {
   font-size: 28px;
   line-height: 1.2em;
   text-align: center;
   max-width: 425px;
   margin: 0 auto;
   padding-bottom: 20px;
   width: 90%;
   margin: 0 auto;
}

.ds9__page .ds9__faq-text {
   font-size: 16px;
   line-height: 1.42em;
   text-align: center;
   max-width: 260px;
   margin: 0 auto;
   padding-bottom: 30px;
}


.ds9__page .ds9__faq-items {
   width: calc(100% - 40px);
   max-width: 832px;
   height: auto;
   display: block;
   vertical-align: top;
   margin: 0 auto;
   border-top: solid 1px #fff;
}

.ds9__page .ds9__faq-item {
   height: 40px;
   display: block;
   transition: height ease-in-out 0.5s;
   overflow: hidden;
   border-bottom: 1px solid #fff;
}

.ds9__page .ds9__faq-item-handler:after {
   content: "";
   width: 20px;
   height: 40px;
   background: url(../commun/arrow-down-white-icon.svg) center center no-repeat;
   background-size: 100% auto;
   transform: rotate(0deg);
   transition: transform 0.3s;
   position: absolute;
   right: 0px;
   top: 10px;
   cursor: pointer;
}

.ds9__page .ds9__faq-item[data-open="1"] .ds9__faq-item-handler:after {
   transform: rotate(180deg);
}

.ds9__page .ds9__faq-item-handler {
   text-align: left;
   font-weight: normal;
   font-size: 14px;
   line-height: 1.42em;
   padding: 16px 35px 16px 0;
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
}

.ds9__page .ds9__faq-item-answer {
   font-size: 14px;
   display: block;
   padding-top: 20px;
   padding-bottom: 20px;
   box-sizing: border-box;
   text-align: left;
}

.ds9__page .ds9__faq-item-answer a {
   text-decoration: underline;
   color: #fff;
}

.ds9__page .ds9__faq-item-answer a:hover {
   text-decoration: none;
}



@media (min-width: 768px) {

   .ds9__page .ds9__bloc-faq {
      padding-top: 0;
      padding-bottom: 112px;
   }

   .ds9__page .ds9__faq-item-handler {
      padding: 18px 45px 18px 0;
   }

   .ds9__page .ds9__faq-title {
      font-size: 36px;
      line-height: 1.2em;
      max-width: unset;
      padding-bottom: 64px;
   }

   .ds9__page .ds9__faq-text {
      font-size: 14px;
      line-height: 1.42em;
      text-align: center;
      padding-bottom: 43px;
      max-width: unset;
   }

}




/*    Swiper    */

.ds9__page .swiper-container {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
   list-style: none;
   display: block;
}

.ds9__page .swiper-container-initialized {
   opacity: 1;
}

.ds9__page .swiper-container-no-flexbox .swiper-slide {
   float: left;
}

.ds9__page .swiper-container-vertical>.swiper-wrapper {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
}

.ds9__page .swiper-wrapper {
   position: relative;
   /* width: 100%; */
   height: 100%;
   /* z-index: 1; */
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   flex-wrap: nowrap;
   -webkit-transition-property: -webkit-transform;
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
   transition-property: transform, -webkit-transform;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
}

.ds9__page .swiper-container-android .swiper-slide,
.ds9__page .swiper-wrapper {
   -webkit-transform: translate3d(0px, 0, 0);
   transform: translate3d(0px, 0, 0);
}

.ds9__page .swiper-container-multirow>.swiper-wrapper {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.ds9__page .swiper-container-free-mode>.swiper-wrapper {
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
   margin: 0 auto;
}

.ds9__page .swiper-slide {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   position: relative;
   -webkit-transition-property: -webkit-transform;
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
   transition-property: transform, -webkit-transform;
   text-align: center;
}

.ds9__page .swiper-slide:before,
.swiper-slide:after {
   content: "";
   display: table;
}

.ds9__page .swiper-slide:after {
   clear: both;
}

.ds9__page .swiper-slide-invisible-blank {
   visibility: hidden;
}

/* Auto Height */
.ds9__page .swiper-container-autoheight,
.ds9__page .swiper-container-autoheight .swiper-slide {
   height: auto;
}

.ds9__page .swiper-container-autoheight .swiper-wrapper {
   -webkit-box-align: start;
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
   -webkit-transition-property: height, -webkit-transform;
   transition-property: height, -webkit-transform;
   -o-transition-property: transform, height;
   transition-property: transform, height;
   transition-property: transform, height, -webkit-transform;
}

/* IE10 Windows Phone 8 Fixes */
.ds9__page .swiper-container-wp8-horizontal,
.ds9__page .swiper-container-wp8-horizontal>.swiper-wrapper {
   -ms-touch-action: pan-y;
   touch-action: pan-y;
}

.ds9__page .swiper-container-wp8-vertical,
.ds9__page .swiper-container-wp8-vertical>.swiper-wrapper {
   -ms-touch-action: pan-x;
   touch-action: pan-x;
}

.swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden
}

.ds9__page .swiper-button {
   position: absolute;
   top: 0;
   width: 25px;
   height: 25px;
   z-index: 10;
   cursor: pointer;
}

.ds9__page .swiper-button:after {
   content: "";
   background-size: 75% auto;
   background-position: center;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
   display: block;
}

.ds9__page .ds9__game-container .swiper-button::after {}

.ds9__page .swiper-button:focus {
   outline: none;
}

.ds9__page .swiper-button-prev.swiper-button-disabled,
.ds9__page .swiper-button-next.swiper-button-disabled {
   opacity: 0.4;
   cursor: auto;
   pointer-events: none;
}

.ds9__page .swiper-button-prev,
.ds9__page .swiper-container-rtl .swiper-button-next,
html[dir="rtl"] .swiper-button-next {
   left: -37.5px;
   right: auto;
   top: calc(50% - 12.5px);
}

.ds9__page .swiper-button-prev::after,
.ds9__page .swiper-container-rtl .swiper-button-next::after,
html[dir="rtl"] .swiper-button-next::after {
   background-image: url(../commun/arrow-left-grey-icon.svg);
}

.ds9__page .swiper-button-next,
.ds9__page .swiper-container-rtl .swiper-button-prev,
html[dir="rtl"] .swiper-button-prev {
   right: -37.5px;
   left: auto;
   top: calc(50% - 12.5px);
}

.ds9__page .swiper-button-next:after,
.ds9__page .swiper-container-rtl .swiper-button-prev:after,
html[dir="rtl"] .swiper-button-prev:after {
   background-image: url(../commun/arrow-right-grey-icon.svg);
}

.ds9__page .swiper-button-lock {
   display: none;
}

.ds9__page .swiper-pagination {
   position: relative;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   padding: 25px 0;
}

.swiper-pagination.swiper-pagination-hidden {
   opacity: 0
}

.swiper-pagination-bullet {
   width: 16px;
   height: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   opacity: 1;
   position: relative;
}

.swiper-pagination-bullet:after {
   content: "";
   position: relative;
   width: 8px;
   height: 8px;
   display: block;
   border-radius: 50%;
   background: #D3CCC8;
   opacity: 1
}

button.swiper-pagination-bullet {
   border: none;
   margin: 0;
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
   appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer
}

.swiper-pagination-bullet:only-child {
   display: none !important
}

.swiper-pagination-bullet-active:after {
   opacity: 1;
   background: #333;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0;
}


/*
.ds9__page .swiper-wrapper {
    justify-content: center;
}

@media screen and (max-width:2289px){

.ds9__page .swiper-wrapper {
    justify-content: unset;
}
}

*/



.ds9__page .ds9__popin-ingredients-wrapper .swiper-button-prev,
.ds9__page .ds9__popin-ingredients-wrapper .swiper-container-rtl .swiper-button-next,
html[dir="rtl"] .ds9__popin-ingredients-wrapper .swiper-button-next {
   top: 150px;
}

.ds9__page .ds9__popin-ingredients-wrapper .swiper-button-next,
.ds9__page .ds9__popin-ingredients-wrapper .swiper-container-rtl .swiper-button-prev,
html[dir="rtl"] .ds9__popin-ingredients-wrapper .swiper-button-prev {
   top: 150px;
}



@media screen and (max-width:1024px) {

   .ds9__page .ds9__services-wrapper .swiper-pagination {
      display: block;
   }

}


@media screen and (max-width:767px) {

   .ds9__page .swiper-pagination {
      padding: 32px 0;
   }

   .ds9__page .ds9__testimonies-wrapper .swiper-button {
      display: none;
   }

   .ds9__page .ds9__testimonies-wrapper .swiper-pagination {
      display: block;
   }

   .ds9__page .ds9__anchor-items-wrapper .swiper-button {
      display: none;
   }

   .ds9__page .ds9__services-wrapper .swiper-pagination {
      display: block;
   }

   .ds9__page .ds9__testimonies {
      width: 100%;
   }

   .ds9__page .ds9__testimony-right {
      padding-left: 0px;
   }

   .ds9__page .ds9__testimony-title::before {
      left: -10px;
   }

   .ds9__page .swiper-button-next,
   .ds9__page .swiper-container-rtl .swiper-button-prev,
   html[dir="rtl"] .swiper-button-prev {
      right: 5%;
   }

   .ds9__page .swiper-button-prev,
   .ds9__page .swiper-container-rtl .swiper-button-next,
   html[dir="rtl"] .swiper-button-next {
      left: 5%;
   }

}







/*  ---   Popin   --- */
/*  ---   v0.1.2   --- */

.ds9__bloc-popin {
   background: #eac27c;
   padding: 30px 0;
   text-align: center;
}

.ds9__page .popin__content-opener {
   display: none;
}

.ds9__page .popin__content-wrapper {
   --popin_height: 100vh;
   --popin_top: 180px;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100vw;
   height: 0;
   z-index: 10000;
}

@supports(height: 100dvh) {
   .ds9__page .popin__content-wrapper {
      --popin_height: 100dvh;
      --popin_top: 90px
   }

   .ds9__page .popin__content-title {
      color: #FF3300;
   }
}

.ds9__page .popin__content-overlay {
   background: #000;
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 0.3s;
   transition-delay: 0.3s;
}

.ds9__page .popin__content {
   position: absolute;
   bottom: 0;
   left: 0;
   display: flex;
   align-items: flex-end;
   transform: translateY(100%);
}

.ds9__page .popin__content-body {
   background: #fff;
   border-radius: 8px;
   max-height: calc(var(--popin_height) - var(--popin_top));
   text-rendering: optimizeLegibility;
   overflow: hidden;
}

.ds9__page .popin__content-content {
   max-height: calc(var(--popin_height) - var(--popin_top));
   overflow: hidden;
}

.ds9__page .popin__content-wrapper[data-scrollable="1"] .popin__content-content {
   overflow-x: hidden;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior-y: contain;
}

.ds9__page .popin__content-closer {
   cursor: pointer;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 1;
   width: 24px;
   height: 24px;
   background: transparent;
}

.ds9__page .popin__content-closer-white path {
   fill: #fff;
}

.ds9__page .popin__content-title {
   padding-top: 15px;
   padding-bottom: 15px;
   font-size: 28px;
   line-height: 1.375em;
}

.ds9__page .popin__content-text {
   padding-bottom: 30px;
   font-size: 14px;
   line-height: 1.375em;
}

.ds9__page .popin__content-wrapper[data-open="1"] {
   height: calc(var(--popin_height) + 1px);
}

.ds9__page .popin__content-wrapper[data-open="1"] .popin__content-overlay {
   transition: opacity 0.5s ease-out;
   opacity: 0.5;
}

.ds9__page .popin__content-wrapper[data-open="1"] .popin__content {
   top: 50%;
   left: 50%;
   bottom: auto;
   transform: translate(-50%, -50%);
}


@media (max-width:768px) {

   .ds9__page .popin__content {
      width: 100%;
      transition-property: transform;
      transition-duration: 0.3s;
      transition-timing-function: ease-in;
      transition-delay: 0;
   }

   .ds9__page .popin__content-wrapper[data-open="1"] .popin__content {
      transition: transform 0.5s cubic-bezier(0, 0.56, 0.1, 1) 0.2s;
      transform: translateY(0);
      top: auto;
      bottom: 0;
      left: 0;
   }

   .ds9__page .popin__content-body {
      border-radius: 8px 8px 0 0;
      width: 100%;
   }

   .ds9__page .popin__content-content {
      max-height: calc(var(--popin_height) - var(--popin_top) - 40px);
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
   }

   .ds9__page .popin__content-handler {
      border-bottom: solid 1px #ccc;
      height: 40px;
      position: relative;
      top: 0;
      left: 0;
   }

   .ds9__page .popin__content-closer-white path {
      fill: #000;
   }

   .ds9__page .popin__content-opener {
      display: inline-block;
      cursor: pointer;
   }

   .ds9__page .popin__content-toClone {
      display: none;
   }

}


/* =============================================== */

.ds9__page .ds9__bloc [data-anchor-id="4"] {
   position: relative;
   width: 100%;
   margin: 0 auto;
   scroll-margin-top: 1000px !important;
}

.ds9__page .ds9__edito [data-anchor-id="4"] {
   scroll-margin-top: 1000px !important;
}

.ds9__page .ds9__innovation-picture[data-item="1"] {
   position: absolute;
}


@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
   .ds9__page .ds9__ingredient-popin-content {
      left: -27px;
   }
}


@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
   .ds9__page .ds9__ingredient-popin-content {
      left: -81px;
   }
}

/* ===||=== */
@media screen and (max-width: 480px) {
   .ds9__page .ds9__navigation {
      top: 48px;
   }
}

/* --- */
body,
html {
   overflow-x: clip !important;
}
.ds9__page .ds9__faq-title {
   padding-top: 20px;
}
@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
   .ds9__page .ds9__popin-subtitle {
      font-size: 13px;
   }

   .ds9__page .ds9__popin-content {
      padding-left: 15px;
   }
}

@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
   .ds9__page .ds9__popin-body.ds9__popin-right .ds9__popin-content {
      padding-top: 14px !important;
   }
}

/* Double Serum Gen 9 */
#wrapper.pt_wrapper #ds9__page .ds9__navigation {
   display: none;
}

/* HIDE QR */
.ds9__page .ds9__bloc-facial {
   display: none;
}