.responsible-sourcing-2024 {
    width: 100%;
    /* max-width: 2200px;*/
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    --FONT-CLARINS: "ClarinsRegular", "Clarins";
    --FONT-GOTHAM-BOOK: "Gotham SSm book A", "Gotham SSm book B", Helvetica, Arial,
        sans-serif;
    --FONT-GOTHAM-MEDIUM: "Gotham SSm medium A", "Gotham SSm medium B", Helvetica,
        Arial, sans-serif;
    --FONT-GOTHAM-XTRA-LIGHT: "GothamXtraLight";
    --FONT-SIZE: 14px;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: var(--FONT-SIZE);
    color: #333333;
    overflow: hidden;
    --swiper-theme-color: #333;
    --swiper-navigation-size: 24px;
    --swiper-navigation-sides-offset: calc(50% - 620px);
    transition: opacity ease-in-out 0.5s;
}

.responsible-sourcing-2024 * {
    box-sizing: border-box;
}

@font-face {
    font-family: 'GothamXtraLight';
    src: url('../fonts/GothamSSm-XLight-webfont.woff2') format('woff2'),
        url('../fonts/GothamSSm-XLight-webfont.woff') format('woff'),
        url('../fonts/GothamSSm-XLight-webfont.ttf') format('truetype');
}


i-clipboard-write .button--secondary {
    color: #333 !important;
    border: 1px solid #E9E3DE !important;
    color: #797674 !important;
}

/****************************************************************/
.responsible-sourcing-2024-link {
    margin: 0;
    margin-top: 16px;
    color: #333 !important;
    text-align: center;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    line-height: 145%;
    text-transform: uppercase;
    text-decoration: underline !important;
    cursor: pointer;
}

/****************************************************************/
.responsible-sourcing-2024-cta {
    position: relative;
    background-color: #fff !important;
    display: inline-block;
    color: #333 !important;
    padding: 14px 16px;
    text-decoration: none;
    font-size: var(--FONT-SIZE);
    line-height: 15px;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    height: 44px;
    box-sizing: border-box;
    text-transform: unset !important;
    letter-spacing: unset !important;
    outline: 0 !important;
    border: 1px solid #B0A9A5;
}

.responsible-sourcing-2024-cta:hover {
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .15);
}

.responsible-sourcing-2024-cta:active {}

.responsible-sourcing-2024-cta:focus-visible {
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 3px #6893D2;
}

/*------------------------------------------------*/
.responsible-sourcing-2024-cta:focus-visible::after {
    opacity: 1;
    outline: 0 !important;
}

.responsible-sourcing-2024-cta:hover {
    outline: 0 !important;
}

.responsible-sourcing-2024-cta:active::after {
    opacity: 1;
    outline: 0 !important;
}

/*------------------------------------------------*/

.responsible-sourcing-2024-tabcontainer {
    position: relative;
    max-width: 1260px;
    padding-top: 65px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.responsible-sourcing-2024-tabsection {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    margin: 0 auto;
    width: 100%;
    z-index: 2;
    order: 2;
    padding-bottom: 90px;
}

.responsible-sourcing-2024-tabsection[data-open="0"] {
    top: 0;
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.responsible-sourcing-2024-tabsection::after {
    content: " ";
    height: 200px;
    width: 100vw;
    min-width: 2200px;
    display: block;
    position: absolute;
    left: calc(50% - 50vw);
    top: 0;
    z-index: -1;
    background: linear-gradient(to bottom, var(--HILITE-COLOR) 0%, transparent 100%);
}

.responsible-sourcing-2024-tabsection::before {
    content: " ";
    height: 100%;
    width: 100vw;
    min-width: 2200px;
    display: block;
    position: absolute;
    left: calc(50% - 50vw);
    top: 0;
    z-index: -2;
}

.responsible-sourcing-2024-tabcontainer__title {
    margin: 0;
    width: 33.33%;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5em;
    cursor: pointer;
    text-transform: uppercase;
    /*position: absolute; top: 0;*/
}

.responsible-sourcing-2024-tabcontainer__title[data-open="1"] {
    background-color: var(--HILITE-COLOR);
    border-radius: 15px 15px 0px 0px;
}

.responsible-sourcing-2024-tabsection[data-tab="domaine-clarins"]::before {
    background: linear-gradient(-215.05deg, #9EC4E3 -0.71%, #C6D7D4 53.83%, #EBEAAA 111.82%);
}

.responsible-sourcing-2024-tabsection[data-tab="domaine-clarins"],
.responsible-sourcing-2024-tabcontainer__title[data-tab="domaine-clarins"] {
    --HILITE-COLOR: #A7C9E0;
}

.responsible-sourcing-2024-tabsection[data-tab="sourcing-policy"]::before {
    background: linear-gradient(-220.36deg, #D7DB9D -1.17%, #F3E8C8 23.26%, #EFCEC1 64%, #F3A291 83.46%);
}

.responsible-sourcing-2024-tabsection[data-tab="sourcing-policy"],
.responsible-sourcing-2024-tabcontainer__title[data-tab="sourcing-policy"] {
    --HILITE-COLOR: #F2E8C7;
}

.responsible-sourcing-2024-tabsection[data-tab="better-world"]::before {
    background: linear-gradient(-212.95deg, #A7C171 -0.68%, #C9D798 50.18%, #F9FBC0 104.25%);
}

.responsible-sourcing-2024-tabsection[data-tab="better-world"],
.responsible-sourcing-2024-tabcontainer__title[data-tab="better-world"] {
    --HILITE-COLOR: #B9CD86;
}


.responsible-sourcing-2024-tabsection__title {
    margin: 0 auto;
    font-family: var(--FONT-CLARINS);
    font-size: 48px;
    font-weight: 400;
    line-height: 70px;
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-top: 60px;

}

.responsible-sourcing-2024-tabsection__title strong {
    font-size: 60px;
    font-weight: 400;
    line-height: 87px;
    text-align: left;
    font-family: var(--FONT-CLARINS);
}

.responsible-sourcing-2024-tabsection__intro {
    margin: 0 auto;
    margin-top: 32px;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 20px;
    font-weight: 400;
    line-height: 29px;
    text-align: center;
    max-width: 1046px;
}

.responsible-sourcing-2024-tabsection__bold-text {
    margin: 0 auto;
    margin-top: 16px;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

.responsible-sourcing-2024-tabsection__text {
    margin: 0 auto;
    margin-top: 24px;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

.responsible-sourcing-2024-tabsection__mentions {
    margin: 0 auto;
    margin-top: 32px;
    margin-bottom: 32px;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    text-align: center;
    max-width: 1046px;
}

.responsible-sourcing-2024-tabsection__hilite {
    margin: 0 auto;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 48px;
    font-weight: 400;
    line-height: 70px;
    text-align: right;
    text-transform: uppercase;
}

.responsible-sourcing-2024-tabsection__row {
    margin: 0 auto;
    display: flex;
    padding: 90px;
    gap: 120px;
}

.responsible-sourcing-2024-tabsection__col {
    flex-basis: 50%;
}

.responsible-sourcing-2024-tabsection__videoplayer {
    margin: 0 auto;
    position: relative;
    max-width: 1048px;
    display: block;
}

.responsible-sourcing-2024-tabsection__videoplayer-title {
    margin: 36px auto;
    font-family: var(--FONT-CLARINS);
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
}

.responsible-sourcing-2024-video {
    width: 100%;
    display: block;
    height: auto;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.responsible-sourcing-2024-video>img {
    display: block;
    height: auto;
    width: 100%;
}


.responsible-sourcing-2024-tabsection__ingredient {
    position: absolute;
    mix-blend-mode: multiply;
    z-index: 1;
}

.responsible-sourcing-2024-tabsection__ingredient>img {
    display: block;
}



/*************************************************************/
/*********** BIODIVERSITY 2024 - TAB-01   *****************/
/*************************************************************/
.responsible-sourcing-2024-tabsection[data-tab="domaine-clarins"] {
    padding-bottom: 0;
}

.responsible-sourcing-2024-tabcontainer__360 {
    position: relative;
    display: block;
}

.responsible-sourcing-2024-tabcontainer__360-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: absolute;
    top: 0;
    left: 0;
}

.responsible-sourcing-2024-tabcontainer__360-title {
    margin: 0;
    font-family: var(--FONT-CLARINS);
    font-size: 48px;
    font-weight: 400;
    line-height: 58px;
    text-align: center;
    color: #fff;
    max-width: 400px;
}

.responsible-sourcing-2024-tabcontainer__360-text {
    margin: 0;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 3.5px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    max-width: 400px;
}

.responsible-sourcing-2024-tabcontainer__360-visual {
    width: 100%;
    position: relative;
    display: block;
    height: 484px;
}

.responsible-sourcing-2024-tabcontainer__360-visual>img {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
}


*[data-tab="domaine-clarins"] .responsible-sourcing-2024-tabsection__hilite {
    color: #00278A;
}

*[data-tab="domaine-clarins"] .responsible-sourcing-2024-tabsection__row {
    max-width: 1224px;
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="flower-1"] {
    top: -132px;
    left: -219px;
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="flower-2"] {
    bottom: -118px;
    right: -288px;
}

*[data-tab="domaine-clarins"] .responsible-sourcing-2024-tabsection__title {
    max-width: 1046px;
}

/*************************************************************/
/*********** BIODIVERSITY 2024 - TAB-02   *****************/
/*************************************************************/

*[data-tab="sourcing-policy"] .responsible-sourcing-2024-tabsection__title {
    max-width: 750px;
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="leaf-1"] {
    top: 0;
    left: calc(50% + 50vw - 546px);
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="leaf-2"] {
    bottom: 764px;
    right: calc(50% + 50vw - 450px);
}

@media(max-width:2200px) {
    .responsible-sourcing-2024-tabsection__ingredient[data-ingredient="leaf-1"] {
        top: 0;
        left: calc(50% + 558px);
    }

    .responsible-sourcing-2024-tabsection__ingredient[data-ingredient="leaf-2"] {
        bottom: 764px;
        right: calc(50% + 570px);
    }

}

.responsible-sourcing-2024-tabsection[data-tab="sourcing-policy"] {
    padding-bottom: 0;
}

*[data-tab="sourcing-policy"] .responsible-sourcing-2024-tabsection__intro {
    margin-bottom: 32px;
}

*[data-tab="sourcing-policy"] .responsible-sourcing-2024-tabsection__row {
    align-items: center;
}

*[data-tab="sourcing-policy"] .responsible-sourcing-2024-tabsection__row {
    max-width: 1024px;
}

*[data-tab="sourcing-policy"] .responsible-sourcing-2024-tabsection__hilite {
    color: #CA2B01;
}

.responsible-sourcing-2024-tabslider {
    width: 100%;
    --swiper-navigation-sides-offset: 20px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-color: #fff;
}

@media(min-width:1536px) {
    .responsible-sourcing-2024-tabslider {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
}

.responsible-sourcing-2024-tabslider__slide::before {
    content: "";
    position: absolute;
    top: 48px;
    width: 2200px;
    height: calc(100% - 48px);
    right: calc(50% - 414px);
}

.responsible-sourcing-2024-tabslider__slide {
    position: relative;
    padding-bottom: 48px;
    display: flex;
    flex-direction: row-reverse;
    gap: 78px;
    justify-content: center;
    overflow: hidden;
}

.responsible-sourcing-2024-tabslider__photo {
    position: relative;
    z-index: 2;
    width: 540px;
}

.responsible-sourcing-2024-tabslider__photo>img {
    display: block;
    height: auto;
}

.responsible-sourcing-2024-tabslider__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 571px;
    gap: 16px;
}

.responsible-sourcing-2024-tabslider__main-title {
    margin: 0;
    font-family: var(--FONT-CLARINS);
    font-size: 48px;
    font-weight: 400;
    line-height: 70px;
    text-align: center;
    color: #fff;
}

.responsible-sourcing-2024-tabslider__title {
    margin: 0;
    margin-top: 28px;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-size: 35px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    color: #fff;
    position: relative;
    width: 100%;
    padding: 0 40px;

}

.responsible-sourcing-2024-tabslider .responsible-sourcing-2024-cta {
    margin-top: 28px;
}

.responsible-sourcing-2024-tabslider__baseline {
    margin: 0;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-size: 20px;
    font-weight: 400;
    line-height: 29px;
    text-align: center;
    color: #333;
    text-transform: uppercase;
}

.responsible-sourcing-2024-tabslider__text {
    margin: 0;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #fff;
}

.responsible-sourcing-2024-tabslider__slide[data-slide="01"]::before {
    background: #959EAA;
}

.responsible-sourcing-2024-tabslider__slide[data-slide="02"]::before {
    background: #AB9DB8;
}

.responsible-sourcing-2024-tabslider__slide[data-slide="03"]::before {
    background: #ACA993;
}

/*************************************************************/
/*********** BIODIVERSITY 2024 - TAB-02   *****************/
/*************************************************************/

*[data-tab="better-world"] .responsible-sourcing-2024-tabsection__title {
    max-width: 500px;
}

.responsible-sourcing-2024-tabsection__date-title {
    margin: 0;
    margin-top: 32px;
    font-family: var(--FONT-GOTHAM-XTRA-LIGHT);
    font-weight: 250;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.responsible-sourcing-2024-tabsection__date-title span {
    font-weight: 250;
    font-size: 34px;
    transform: rotate(2deg);
    padding: 8px 24px;

}

.responsible-sourcing-2024-tabsection__date-title strong {
    font-weight: 250;
    font-size: 24px;
    transform: rotate(-2deg);
    padding: 8px 24px;
}


.responsible-sourcing-2024-tabsection__date-title[data-title="1"] strong {
    background: #B40024;
}

.responsible-sourcing-2024-tabsection__date-title[data-title="1"] span {
    background: #fff;
    color: #333;

}

.responsible-sourcing-2024-tabsection__date-title[data-title="2"] span {

    background: #A3B826;
}

.responsible-sourcing-2024-tabsection__date-title[data-title="2"] strong {
    background: #B40024;
}


.responsible-sourcing-2024-tabgrid {
    margin: 64px auto;
    display: flex;
    gap: 182px;
    max-width: 1122px;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;

}

.responsible-sourcing-2024-tabgrid__item {
    position: relative;

}

.responsible-sourcing-2024-tabgrid__photo {
    display: block;
    width: 100%;
}

.responsible-sourcing-2024-tabgrid__photo>img {
    display: block;
    height: auto;
}

.responsible-sourcing-2024-tabgrid__content {
    margin: 0;
    padding: 28px 37px;
    position: absolute;
    z-index: 2;
    background-color: #333333;
    color: #fff;
    min-height: 205px;
    width: 324px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;

    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;

}

.responsible-sourcing-2024-tabgrid__content strong {
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 48px;
    font-weight: 400;
    line-height: 48px;
    margin-bottom: 8px;
    text-align: left;
}

*[data-item="1"] .responsible-sourcing-2024-tabgrid__content {
    bottom: -36px;
    right: -36px;
    background: #C2C043;
}

*[data-item="2"] .responsible-sourcing-2024-tabgrid__content {
    bottom: -36px;
    left: -36px;
    background: #E2A4C4;
}

*[data-item="3"] .responsible-sourcing-2024-tabgrid__content {
    top: -36px;
    right: -36px;
    background: #D2A157;

}

*[data-item="4"] .responsible-sourcing-2024-tabgrid__content {
    top: -36px;
    left: -36px;
    background: #E5BF3C;

}

*[data-tab="better-world"] .responsible-sourcing-2024-tabsection__intro span {
    display: block;
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="world-1"] {
    mix-blend-mode: normal;
    top: 55px;
    left: calc(50% + 250px);
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="world-2"] {
    mix-blend-mode: normal;
    top: 235px;
    left: calc(50% - 930px);
    z-index: -1;
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="world-3"] {
    bottom: 0px;
    left: calc(50% - 930px);
    z-index: -1;
}

.responsible-sourcing-2024-tabsection__ingredient[data-ingredient="world-4"] {
    bottom: 0px;
    left: calc(50% + 530px);
    z-index: -1;
}

.responsible-sourcing-2024-keyvalues {
    margin: 64px auto;
    max-width: 920px;
}

.responsible-sourcing-2024-keyvalues__item-wrapper {
    display: flex;
    justify-content: center;
}

.responsible-sourcing-2024-keyvalues__item {
    position: relative;
    width: 264px;
    height: 264px;
    text-align: center;
    display: flex;
    flex-direction: column;
}


.responsible-sourcing-2024-keyvalues__item-value {
    margin: 0 auto;
    line-height: 1em;
    color: #333;
    font-size: 48px;
    font-family: var(--FONT-GOTHAM-XTRA-LIGHT);
    margin-bottom: 10px;
    display: block;
    text-align: center;
    padding-top: 95px;
}

.responsible-sourcing-2024-keyvalues__item-circular-text {
    margin: 0;
    --s: 260px;
    --p: 10px;
    flex: 1;
    height: var(--s);
    width: var(--s);
    position: absolute;
    top: 0px;
    overflow: hidden;
}


.responsible-sourcing-2024-keyvalues__item-text {
    text-align: center;
    font-size: 14px;
    color: #333;
    font-family: var(--FONT-GOTHAM-BOOK);

}

.responsible-sourcing-2024-keyvalues__item-circular-text--left,
.responsible-sourcing-2024-keyvalues__item-circular-text--right {
    content: '';
    display: block;
    height: 100%;
    width: 50%;
}

.responsible-sourcing-2024-keyvalues__item-circular-text--left {
    float: left;
    clear: left;
    shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
}

.responsible-sourcing-2024-keyvalues__item-circular-text--right {
    float: right;
    clear: right;
    shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);
}

.responsible-sourcing-2024-keyvalues__item-picto {
    width: 80px;
    height: 80px;
    margin: 20px auto;
}


.responsible-sourcing-2024-keyvalues__item svg {
    transform: rotate(-90deg);
    position: absolute;
    top: calc(50% - 132px);
    left: calc(50% - 132px);
}

.responsible-sourcing-2024-keyvalues__item svg circle {
    stroke-dashoffset: 0;
    stroke: #dbe1a9;
    stroke-width: 2px;
    width: 264px;
    height: 264px;
}

.responsible-sourcing-2024-keyvalues__item[data-anim="1"] svg circle {
    transition: stroke-dashoffset 2s linear;
}

.responsible-sourcing-2024-keyvalues__item svg .bar {
    stroke: #85a248;
    stroke-dashoffset: 816px;
}

.responsible-sourcing-2024-keyvalues__item {
    position: relative;
    flex-basis: 50%;
    height: 264px;
    text-align: center;
}

.responsible-sourcing-2024-tabsection__link {
    display: flex;
    justify-content: center;
}

/*************************************************************/
/*********** BIODIVERSITY 2024 - CLOSER LOOK *****************/
/*************************************************************/
.responsible-sourcing-2024-closerlook {
    background-color: #E1EDC6;
    position: relative;
    z-index: 2;
    padding: 70px 0;
    margin-top: 90px;
}

@media(min-width:1261px) {
    .responsible-sourcing-2024-closerlook {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
}

.responsible-sourcing-2024-closerlook__ingredient {
    position: absolute;
    top: -250px;
    right: 0;
}

@media(min-width:1260px) {
    .responsible-sourcing-2024-closerlook__ingredient {
        right: -127px;
        left: auto;
    }
}

@media(min-width:1537px) {
    .responsible-sourcing-2024-closerlook__ingredient {
        right: auto;
        left: calc(50% + 670px);
    }

}

.responsible-sourcing-2024-closerlook__visual {
    width: 292px;
    height: 292px;
    overflow: hidden;
    border-radius: 8px;
    display: block;
}

.responsible-sourcing-2024-closerlook__visual>img {
    width: 100%;
    height: 100%;
    display: block;
}

.responsible-sourcing-2024-closerlook__num {
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 120px;
    font-weight: 400;
    line-height: 1em;
    text-align: center;
    color: #659C1D80;
    margin-bottom: 15px;
}

.responsible-sourcing-2024-closerlook__title {
    margin: 0;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 36px;
    font-weight: normal;
    line-height: 52px;
    text-align: center;
}

.responsible-sourcing-2024-closerlook__title strong {
    font-family: var(--FONT-GOTHAM-BOOK);
    font-weight: normal;
    text-transform: uppercase;
    display: block;
}

.responsible-sourcing-2024-closerlook__slider {
    display: block;
    margin: 0 auto;
    position: relative;
    max-width: 1328px;
    overflow: hidden;
    padding: 32px;
    width: 100%;
}


.responsible-sourcing-2024-closerlook__action {
    font-family: var(--FONT-GOTHAM-BOOK);
    color: #659C1D;
    font-size: 24px;
    font-weight: normal;
    line-height: 34px;
    letter-spacing: 4px;
    text-align: left;
    padding: 16px;
    margin: 0;
}

.responsible-sourcing-2024-closerlook__text {
    font-family: var(--FONT-GOTHAM-BOOK);
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    padding: 0 16px;
    margin: 0;
}

.responsible-sourcing-2024-closerlook .swiper-slide {
    width: 292px;
}

.responsible-sourcing-2024-closerlook .swiper-slide:nth-child(2n) {
    padding-top: 146px;
}

.responsible-sourcing-2024-tabgrid__TRUST-logo {
    position: absolute;
    bottom: -58px;
    left: -65px;
}

/*************************************************************/
/************ BIODIVERSITY 2024 - RELATED **********************/
/*************************************************************/
.responsible-sourcing-2024-related {
    padding: 32px;
    position: relative;
    --swiper-pagination-bottom: 64px;
}

.responsible-sourcing-2024-related__title {
    margin: 50px auto;
    font-family: var(--FONT-CLARINS);
    font-size: 35px;
    font-weight: 400;
    line-height: 42px;
    text-align: center;
}

.responsible-sourcing-2024-related__slider {
    max-width: 1260px;
    margin: 0 auto;
}

.responsible-sourcing-2024-related__link {
    max-width: 1260px;
    margin: 60px auto;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
}

.responsible-sourcing-2024-related__link .responsible-sourcing-2024-cta {
    background-color: #B40024 !important;
    color: #fff !important;
    border: 0px;
}

/*************************************************************/
/************ BIODIVERSITY 2024 - PUSHS **********************/
/*************************************************************/
.responsible-sourcing-2024-pushs {
    padding: 64px 32px;

}

.responsible-sourcing-2024-pushs__title {
    margin: 0;
    padding: 0;
    color: #333;
    text-align: center;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-size: 36px;
    font-style: normal;
    font-weight: normal;
    line-height: 145%;
    letter-spacing: 7.2px;
    text-transform: uppercase;
}

.responsible-sourcing-2024-pushs__slider {
    margin: 0 auto;
    margin-top: 40px;
    max-width: 1264px;
}

.responsible-sourcing-2024-pushs__slider .swiper-slide {
    height: auto;
}

.responsible-sourcing-2024-crosslink {
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    padding: 32px;
    padding-top: 0px;
    padding-bottom: 40px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background: #FBF6F3 !important;
    max-width: 398px;
    height: 100%;
    cursor: pointer;
}

.responsible-sourcing-2024-crosslink:hover {
    box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.15);
}

.responsible-sourcing-2024-crosslink__visual {
    margin-left: -32px;
    margin-right: -32px;
    width: calc(100% + 64px);
    display: block;
}

.responsible-sourcing-2024-crosslink__visual>img {
    width: 100%;
    height: auto;
    display: block;
}

.responsible-sourcing-2024-crosslink__title {
    margin: 0;
    margin-top: 24px;
    padding: 0;
    color: #333;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: 18px;
    width: 100%;
}

.responsible-sourcing-2024-crosslink__text {
    margin: 0;
    margin-top: 8px;
    padding: 0;
    width: 100%;
    color: #333;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%;
    flex: 1;
}

@media(max-width:1023px) and (min-width:762px) {
    .responsible-sourcing-2024-pushs__slider {
        max-width: 830px;
    }
}

@media(max-width:761px) {
    .responsible-sourcing-2024-pushs {
        padding: 64px 16px;
    }

    .responsible-sourcing-2024-pushs__title {
        font-size: 21px;
        letter-spacing: 4.2px;
    }

    .responsible-sourcing-2024-pushs__slider {
        margin-top: 24px;
    }

    .responsible-sourcing-2024-pushs__slider .swiper-slide {
        width: auto;
    }

    .responsible-sourcing-2024-crosslink {
        max-width: 300px;
    }


    .responsible-sourcing-2024-crosslink {
        justify-content: flex-start;
    }

    .responsible-sourcing-2024-crosslink__text {
        flex: unset;
    }
}


/**********************************/
/**********  MOBILE     ***********/
/**********************************/
@media(max-width:1130px) {
    .responsible-sourcing-2024-tabgrid {
        column-gap: 60px;
    }
}

@media(max-width:1023px) {
    .responsible-sourcing-2024-tabsection__ingredient {
        display: none;
    }

    .responsible-sourcing-2024-tabsection__row {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px;
    }

    .responsible-sourcing-2024-tabcontainer__image {
        display: none;
    }

    .responsible-sourcing-2024-tabsection__hilite {
        font-size: 24px;
        line-height: 35px;
        text-align: center;
    }


    .responsible-sourcing-2024-tabsection__title {
        padding: 30px;
    }

    .responsible-sourcing-2024-tabsection__bold-text,
    .responsible-sourcing-2024-tabsection__text {
        text-align: center;
    }

    .responsible-sourcing-2024-tabcontainer {
        display: block;
        padding: 16px 0;
    }

    .responsible-sourcing-2024-tabcontainer::before {
        content: "";
        border-top: 1px solid #B0A9A5;
        margin: 0 16px;
        height: 1px;
        display: block;
    }

    .responsible-sourcing-2024-tabcontainer__title {
        margin: 0 16px;
        width: calc(100% - 32px);
        height: 65px;
        background-color: #fff;
        border-bottom: 1px solid #B0A9A5;
        text-align: left;
        border-radius: 0px;
        justify-content: flex-start;
        position: relative;
    }

    .responsible-sourcing-2024-tabcontainer__title::before {
        content: "";
        height: 24px;
        width: 24px;
        display: block;
        position: absolute;
        top: calc(50% - 12px);
        right: 0;
        pointer-events: none;
        background: url(../img/arrow.svg);
        background-size: cover;
        transition: transform ease-in-out 0.5s;
        transform: rotate(0deg);
    }

    .responsible-sourcing-2024-tabcontainer__title[data-open="1"]::before {
        transform: rotate(180deg);
    }

    .responsible-sourcing-2024-tabsection__title {
        font-size: 30px;
        line-height: 37px;
        margin-top: 0px;
        padding: 24px 16px;
    }

    .responsible-sourcing-2024-tabcontainer__title[data-open="1"] {
        background-color: #fff;
        border-radius: 0px;
    }

    .responsible-sourcing-2024-tabsection__title strong {
        font-size: 40px;
        line-height: 50px;
    }

    .responsible-sourcing-2024-tabsection__intro {
        margin-top: 6px;
        font-size: 16px;
        line-height: 24px;
        padding: 0 16px;
    }

    .responsible-sourcing-2024-tabcontainer__360-content {
        padding: 16px;
    }

    .responsible-sourcing-2024-tabcontainer__360-title {
        font-size: 30px;
        line-height: 36px;
        max-width: 250px;
    }

    .responsible-sourcing-2024-tabcontainer__360-text {
        max-width: 250px;
    }

    .responsible-sourcing-2024-tabsection__videoplayer-title {
        margin: 0px auto;
        padding: 24px 16px;
        font-size: 20px;
        line-height: 24px;
    }

    .responsible-sourcing-2024-closerlook {
        background-color: #E1EDC6;
        padding: 24px 0px;
        margin-top: 36px;
        padding-bottom: 36px;
    }

    .responsible-sourcing-2024-closerlook__ingredient {
        display: none;
    }

    .responsible-sourcing-2024-closerlook__title {
        padding: 0 16px;
        font-size: 24px;
        line-height: 35px;
    }

    .responsible-sourcing-2024-closerlook .swiper-slide:nth-child(2n) {
        padding-top: 0;
    }

    .responsible-sourcing-2024-closerlook__slider {
        padding: 16px;
        padding-bottom: 32px;
        --swiper-pagination-bottom: 0px;
    }

    .responsible-sourcing-2024-tabslider__slide {
        padding-bottom: 0;
        flex-direction: column-reverse;
        gap: 24px;
        padding-top: 24px;
    }

    .responsible-sourcing-2024-tabslider__content {
        width: 100%;
        gap: 16px;
        padding: 0 16px;
    }

    .responsible-sourcing-2024-tabslider__photo {
        width: 100%;
    }

    .responsible-sourcing-2024-tabslider__photo>img {
        width: 100%;
        height: auto;
    }

    .responsible-sourcing-2024-tabslider__slide::before {
        content: "";
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        right: 0;
    }

    .responsible-sourcing-2024-tabslider .swiper-slide {
        height: auto;
    }

    .responsible-sourcing-2024-tabgrid__content {
        width: calc(100% - 60px);
    }

    *[data-item="1"] .responsible-sourcing-2024-tabgrid__content {
        right: 0;
        top: auto;
        bottom: -60px;
    }

    *[data-item="2"] .responsible-sourcing-2024-tabgrid__content {
        left: 0;
        top: auto;
        bottom: -60px;
    }

    *[data-item="3"] .responsible-sourcing-2024-tabgrid__content {
        right: 0;
        top: auto;
        bottom: -60px;
    }

    *[data-item="4"] .responsible-sourcing-2024-tabgrid__content {
        left: 0;
        top: auto;
        bottom: -60px;
    }



    .responsible-sourcing-2024-tabgrid__item {
        width: 100%;
    }

    .responsible-sourcing-2024-tabgrid__photo {
        display: block;
        width: calc(100% - 16px);
    }

    .responsible-sourcing-2024-tabgrid__photo>img {
        display: block;
        width: 100%;
        height: auto;
    }

    .responsible-sourcing-2024-tabgrid {
        gap: 120px;
        margin-bottom: 120px;
    }

    .responsible-sourcing-2024-tabgrid__TRUST-logo {
        position: absolute;
        bottom: auto;
        top: -40px;
        left: -40px;
        width: 80px;
        height: 80px;
    }

    .responsible-sourcing-2024-keyvalues__item {
        margin: 0 auto;
    }

    .responsible-sourcing-2024-keyvalues {
        margin: 30px auto;
        --swiper-pagination-bottom: 48px;
    }

    .responsible-sourcing-2024-related__title {
        margin: 40px auto;
        margin-bottom: 24px;
        padding: 0 16px;
    }

    .responsible-sourcing-2024-related {
        padding: 0;
    }
}

/***********************************************************/

.responsible-sourcing-2024-numbers {
    max-width: 736px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    --swiper-pagination-color: #00278A;
    overflow: hidden;
}



.responsible-sourcing-2024-numbers__ingredient {
    position: absolute;
    right: auto;
    left: 0;
    height: 0;
    margin-top: -200px;
}

@media(max-width:1023px) {
    .responsible-sourcing-2024-numbers__ingredient {
        display: none;
    }
}

@media(min-width:1260px) {
    .responsible-sourcing-2024-numbers__ingredient {
        right: auto;
        left: -127px;
    }
}

@media(min-width:1537px) {
    .responsible-sourcing-2024-numbers__ingredient {
        right: calc(50% + 400px);
        left: auto;
    }

}




.responsible-sourcing-2024-numbers__title {
    margin: 100px auto;
    max-width: 446px;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
    color: #00278A;
    text-transform: uppercase;
}

.responsible-sourcing-2024-numbers__item {
    padding-left: 159px;
    min-height: 135px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;

}

.responsible-sourcing-2024-numbers__item+.responsible-sourcing-2024-numbers__item {
    margin-top: 40px;
}

.responsible-sourcing-2024-numbers__item>p {
    margin: 0;
}

.responsible-sourcing-2024-numbers__item-picto {
    position: absolute;
    width: 135px;
    height: 135px;
    top: 0;
    left: 0;
}

.responsible-sourcing-2024-numbers__item-value {
    margin: 0;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 56px;
    font-weight: 400;
    line-height: 56px;
    text-align: left;
    color: #00278A;
}

.responsible-sourcing-2024-numbers__item-text {
    margin: 0;
}

.responsible-sourcing-2024-numbers__item-text strong {
    margin: 12px 0;
    display: block;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    color: #00278A;
}

@media(max-width:761px) {


    .responsible-sourcing-2024-numbers {
        max-width: 375px;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        padding-bottom: 76px;
        margin-bottom: 40px;
    }

    .responsible-sourcing-2024-numbers__item {
        max-width: 375px;
        width: 100%;
    }

    .responsible-sourcing-2024-numbers__title {
        margin: 76px 0;
        font-size: 25px;
        line-height: 30px;
        text-align: center;
    }
}


/**************************************************************/


.responsible-sourcing-2024-popin {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    --swiper-theme-color: #333;
    --swiper-navigation-size: 24px;
    --swiper-pagination-bottom: 16px;
    z-index: 10000;
    padding-top: 90px;
}

.responsible-sourcing-2024-popin[data-open="0"] {
    display: none;
}

.responsible-sourcing-2024-popin__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity ease-in-out 0.25s;
}



.responsible-sourcing-2024-popin[data-open="0"] .responsible-sourcing-2024-popin__overlay {
    opacity: 0;
}


.responsible-sourcing-2024-popin__bar {
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #fff;
    position: relative;
    display: block;
    border-bottom: 1px solid #797674;
    height: 40px;
}

.responsible-sourcing-2024-popin__close {
    width: 24px;
    height: 24px;
    background-image: url(../img/close.svg);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    font-size: 0;
    border: 0px;
    top: 8px;
    right: 8px;
    background-color: transparent;
    position: absolute;
}

.responsible-sourcing-2024-popin__content {
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #fff;
    position: relative;
    flex: 1;
}

.responsible-sourcing-2024-popin__main {
    margin: 0 auto;
    transform: translateY(0%);
    transition: transform ease-out 0.25s;
    max-width: 1048px;
    width: calc(100% - 80px);
    height: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;

}

.responsible-sourcing-2024-popin[data-open="0"] .responsible-sourcing-2024-popin__main {
    transform: translateY(100%);
}

.responsible-sourcing-2024-popin__wrapper {
    padding: 40px 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 64px;
}

.responsible-sourcing-2024-popin__logo {
    flex-basis: 100%;
}

.responsible-sourcing-2024-popin__logo img {
    margin: 0 auto;
    display: block;
}

.responsible-sourcing-2024-popin__title {
    margin: 0;
    flex-basis: calc(50% - 32px);
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 35px;
    font-weight: 400;
    line-height: 50.75px;
    text-align: right;
    color: #00278A;
}

.responsible-sourcing-2024-popin__title strong {
    display: block;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-weight: 400;
}

.responsible-sourcing-2024-popin__title+.responsible-sourcing-2024-popin__intro {
    padding-top: 80px;
}

.responsible-sourcing-2024-popin__intro {
    margin: 0;
    flex-basis: calc(50% - 32px);
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.responsible-sourcing-2024-popin__intro strong {
    display: block;
    font-family: var(--FONT-GOTHAM-MEDIUM);
    font-weight: 400;
}

.responsible-sourcing-2024-player {
    position: relative;
    display: inline-block;
    font-size: 0;
}

.responsible-sourcing-2024-player {
    position: relative;
    display: inline-block;
    font-size: 0;
}

#POPIN-SAINTE-COLOMBE .responsible-sourcing-2024-popin_ingredient:first-child {
    position: absolute;
    top: -25%;
    left: -22%;
    width: 35.5555%;
}

#POPIN-SAINTE-COLOMBE .responsible-sourcing-2024-popin_ingredient:last-child {
    position: absolute;
    bottom: -38%;
    right: -25%;
    width: 35.5555%;
}

#POPIN-SERRAVAL .responsible-sourcing-2024-popin_ingredient:first-child {
    position: absolute;
    top: -20%;
    left: -18%;
    width: 35.5555%;
}

#POPIN-SERRAVAL .responsible-sourcing-2024-popin_ingredient:last-child {
    position: absolute;
    bottom: -20%;
    right: -17%;
    width: 25%;
    height: auto;
}

.responsible-sourcing-2024-popin__end {
    margin: 0;
    margin-bottom: 40px;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 16px;
    font-weight: 400;
    line-height: 23.2px;
    text-align: center;
    display: block;
    max-width: 616px;
    position: relative;
}

.responsible-sourcing-2024-popin__end em {
    margin: 0;
    margin-bottom: 24px;
    font-family: var(--FONT-CLARINS);
    font-size: 24px;
    font-weight: 400;
    line-height: 28.8px;
    display: block;
    text-align: center;

}

@media(max-width:761px) {
    .responsible-sourcing-2024-popin__main {
        width: 100%;
    }

    .responsible-sourcing-2024-popin__title {

        font-size: 20px;
        line-height: 29px;
        text-align: left;

    }

    .responsible-sourcing-2024-popin__wrapper {
        padding: 24px 16px;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 16px;
    }

    .responsible-sourcing-2024-popin__title+.responsible-sourcing-2024-popin__intro {
        padding-top: 0px;
    }

    .responsible-sourcing-2024-popin_ingredient {
        display: none;
    }
}


/********************************************************/
.responsible-sourcing-2024-domaine-list {
    display: flex;
    margin: 0 -96px;
    gap: 40px;
    padding: 40px;
    position: relative;
}

.responsible-sourcing-2024-domaine {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.responsible-sourcing-2024-domaine__background {
    position: relative;
    display: block;
    width: 100%;
}

.responsible-sourcing-2024-domaine__background img {
    display: block;
    width: 100%;
    height: auto;
}

.responsible-sourcing-2024-domaine__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.responsible-sourcing-2024-domaine__logo {}

.responsible-sourcing-2024-domaine__title {
    color: #fff;
    margin: 0;
    margin-bottom: 32px;
    font-family: var(--FONT-CLARINS);
    font-size: 35px;
    font-weight: 400;
    line-height: 42px;
    text-align: center;

}

.responsible-sourcing-2024-domaine__text {
    color: #fff;
    margin: 0;
    font-family: var(--FONT-GOTHAM-BOOK);
    font-size: 12px;
    font-weight: 400;
    line-height: 17.4px;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
}

.responsible-sourcing-2024-domaine .responsible-sourcing-2024-cta {
    margin-top: 24px;
}

.responsible-sourcing-2024-domaine-list .responsible-sourcing-2024-cta {
    margin-top: 32px;
}

.responsible-sourcing-2024-domaine-list .responsible-sourcing-2024-domaine__logo {
    width: 32%;
    height: auto;
}

.responsible-sourcing-2024-domaine-list::before {
    position: absolute;
    width: 100vw;
    height: 100%;
    left: calc(50% - 50vw);
    top: 0;
    content: "";
    background-color: #fff;
}

@media(max-width:761px) {
    .responsible-sourcing-2024-domaine-list {
        display: flex;
        margin: 0;
        gap: 16px;
        padding: 16px;
        position: relative;
        flex-direction: column;
    }
}



/* ------------------------------------------------------------------------------------------------------------ */
.responsible-sourcing-2024-popin__title+.responsible-sourcing-2024-popin__intro p {
    margin-bottom: 10px;
}

.responsible-sourcing-2024-tabsection__intro {
    max-width: 946px;
}

@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .responsible-sourcing-2024-numbers__ingredient {
        display: none;
    }

    .responsible-sourcing-2024-domaine-list {
        margin: 0 3px;
    }

    .responsible-sourcing-2024-tabsection__intro {
        max-width: 100%;
    }

    #POPIN-SAINTE-COLOMBE .responsible-sourcing-2024-popin_ingredient:last-child {
        right: -29%;
    }

    .responsible-sourcing-2024-numbers__ingredient {
        left: -50px;
    }

    .responsible-sourcing-2024-tabsection__ingredient[data-ingredient="world-1"] {
        left: calc(50% + 310px);
    }

    .responsible-sourcing-2024-domaine__logo {
        width: 300px;
    }
}

@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .responsible-sourcing-2024-closerlook__title {
        font-size: 27px;
    }

    .responsible-sourcing-2024-tabslider__content {
        width: 411px;
    }

    .responsible-sourcing-2024-tabslider__main-title {
        font-size: 41px;
    }

    .responsible-sourcing-2024-tabslider__title {
        font-size: 30px;
    }

    .responsible-sourcing-2024-tabslider__slide::before {
        top: 18px;
        height: calc(100% - 8px);
    }

    .responsible-sourcing-2024-domaine-list {
        margin: 0 2px;
    }

    .responsible-sourcing-2024-numbers__ingredient {
        left: -50px;
    }

    .responsible-sourcing-2024-tabsection__ingredient[data-ingredient="world-1"] {
        left: calc(50% + 310px);
    }
}

/*iPhone 6/7/8/plus, XR, 11, X, 12 and 11.*/
@media (max-width: 480px) {
    .responsible-sourcing-2024-numbers__ingredient {
        display: none;
    }

    .responsible-sourcing-2024-numbers__item-value {
        display: block;
    }

    .responsible-sourcing-2024-tabsection__title strong {
        font-size: 30px;
        line-height: 100%;
    }

    *[data-tab="domaine-clarins"] .responsible-sourcing-2024-tabsection__title {
        font-size: 23px;
    }

    .responsible-sourcing-2024-tabsection__intro {
        max-width: 100%;
    }

    .responsible-sourcing-2024-tabcontainer__title {
        font-size: 15px;
    }
}