@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Medium.woff2') format('woff2'),
        url('assets/fonts/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Bold.woff2') format('woff2'),
        url('assets/fonts/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('asstes/fonts/Roboto-Regular.woff2') format('woff2'),
        url('asstes/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('asstes/fonts/Roboto-Bold.woff2') format('woff2'),
        url('asstes/fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('asstes/fonts/Roboto-Medium.woff2') format('woff2'),
        url('asstes/fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
  /* Neutral */
--cLWhite: #FFFFFF;
--cLgrayMedium: #666666;
--cLgrayDark: #949494;
--cLwhiteSmoke: #F5F5F5;

/* Blue */
--cLbluePrimary: #0A5AF9;
--cLblueSky: #3782DD;
--cLblueIndigo: #222FD6;
--cLblueBright: #3883E0;
--fs110: clamp(min(40px,10vw), 6.6vw, 110px);
--fs93: clamp(min(60px,8vw), 4.9vw, 93px);
--fs78: clamp(min(60px,7.4vw), 4.1vw, 78px);
--fs77: clamp(min(60px,7.4vw), 4vw, 77px);
--fs61: clamp(min(56px,7vw), 3.2vw, 61px);
--fs39: clamp(min(24px,4.5vw), 2.1vw, 39px);
--fs35: clamp(min(22px,5.5vw), 1.9vw, 35px);
--fs28: clamp(min(19px,3.9vw), 1.7vw, 28px);
--fs26: clamp(min(19px,3.8vw), 1.4vw, 26px);
--fs23: clamp(min(19px,3.7vw), 1.2vw, 23px);
--fs18: clamp(min(18px,3.5vw), 1vw, 18px);
--fs16: min(16px,3.4vw);
--fs15: min(15px,3.3vw);
--fs14: min(14px,3.2vw);
}

html.lenis, html.lenis body {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.is-scrolling iframe {pointer-events: none;}
html {
    font-size: var(--fs15);
    scroll-behavior: smooth;
    color: var(--cLbluePrimary);
    font-family: 'Roboto', sans-serif;
    *,
    *::before,
    *::after {
        margin: 0;padding:0;
        box-sizing: border-box;
    }
    & body {
        & section {scroll-margin-top: min(10em,15vw);}
        & img,
        & video,
        & canvas,
        & svg {
            height: auto;
            display: block;
            max-width: 100%;
        }
        & button {
            background: none;
            border: none;
            padding: 0;
        }
        & img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            object-fit: contain;
        }
        & picture {
            position: relative;
            height: 100%;
            display: block;
            overflow: hidden;
            & img {
                object-fit: cover;
                max-width: inherit;
                &:is(.parallax-img) {
                    scale: 1.2;
                    translate: 0 -20;
                    transition: none;
                    will-change: transform;
                }
            }
        }
        & :focus {
            outline: none;
        }
        & hr {border-bottom: 2px solid var(--);}
        & :is(h1,h2,h3,h4,h5,h6) {line-height: 1.1;}
        .fs93 {font-size: var(--fs93);}
        .fs78 {font-size: var(--fs78);}
        .fs77 {font-size: var(--fs77);}
        .fs61 {font-size: var(--fs61);}
        .fs39 {font-size: var(--fs39);}
        .fs35 {font-size: var(--fs35);}
        .fs28 {font-size: var(--fs28);}
        .fs26 {font-size: var(--fs26);}
        .fs23 {font-size: var(--fs23);}
        .fs15 {font-size: var(--fs15);}
        
        & .fw300 {font-weight: 300;}
        & .fw400 {font-weight: 400;}
        & .fw500 {font-weight: 500;}
        & .fw600 {font-weight: 600;}
        & .fw700 {font-weight: 700;}
        & .fw750 {font-weight: 750;}
        & .fw800 {font-weight: 800;}
        & .fw900 {font-weight: 900;}
        & .italic {font-style: italic;}
        & .line-height-1 {line-height: 1;}
        & .uppercase-text {text-transform: uppercase;}
        & .uppercase-initial {text-transform: initial;}
        & .gotham {font-family: 'Gotham', sans-serif;}
        & ol,
        & ul {
            margin: 0;
            padding: 0;
            & li {
                &::marker { 
                    line-height: 0;
                    font-size: 1.3em;
                    color: currentColor;
                }
            }
            &[class] {list-style: none;}
            &:not([class]) {
                display: grid;
                row-gap: .3em;
                padding-left: 1.7em;
            }
            &:is(ol) {
                list-style: none;
                counter-reset: item;
                padding-left: 0 !important;
                & li {
                    position: relative;
                    padding-left: 1.7em;
                    counter-increment: item;
                    &::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                        line-height: 1;
                        display: block;
                        font-weight: 800;
                        font-size: 1.3em;
                        content: counter(item) ". ";
                        color: transparent !important;
                        -webkit-text-stroke: 1px var(--cLAccentYellow);
                    }
                }
            }
        }
        & a {
            color: inherit;
            text-decoration: none;
            &:not([class]):hover {color: var(--cLAccentYellow);}
        }
        & p:has( :is(.btn, .tag)) {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: min(10px, 4vw);
            &:is(.text-center &) {
                justify-content: center;
            }
        }
        & [style^="--icn-"] {
            display: flex;
            align-items: center;
            column-gap: min(.6em, 3vw);
            &[style^="--icn-before"]::before,
            &[style^="--icn-after"]::after {
                position: relative;
                content: "";
                display: block;
                transition: initial;
                pointer-events: none;
                padding: min(1em, 5vw);
                background-color: currentcolor;
            }
            &[style^="--icn-before"]::before {
                -webkit-mask : var(--icn-before) center / contain no-repeat;
                mask : var(--icn-before) center / contain no-repeat;
            }
            &[style^="--icn-after"]::after {
                -webkit-mask : var(--icn-after) center / contain no-repeat;
                mask : var(--icn-after) center / contain no-repeat;
            }
        }
        & [class^="text"] {
            width: 100%;
            display: flex;
            flex-direction: column;
            row-gap: min(1em, 3vw);
            &.text-center {
                text-align: center;
                align-items: center;
            }
            &.text-right {
                text-align: right;
                align-items: flex-end;
            }
        }
        & button.btn {cursor: pointer;}
        & .arrow {
            position: relative;
            width: 0;
            height: 0;
            margin: 0;
            outline: 0;
            z-index: 2;
            top: initial;
            right: inherit;
            font-size: 0;
            left: initial;
            flex: 0 0 auto;
            bottom: inherit;
            cursor: pointer;
            overflow: hidden;
            aspect-ratio: 1/1;
            border-radius: 50%;
            transition: all .2s;
            display: inline-block;
            color: var(--cLWhite);
            padding: min(1.375rem, 4.8vw);
            background-color: var(--cLbluePrimary);
            border: 1px solid var(--cLbluePrimary);
            &.rotate-45 {rotate: -45deg;}
            &.swiper-button-lock {display: none;}
            &::after,
            &::before {
                position: absolute;
                inset: 30%;
                content: "";
                display: block;
                transition: inherit;
                pointer-events: none;
                background-color: currentColor;
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-position: center;
                mask-position: center;
                -webkit-mask-size: contain;
                mask-size: contain;
                -webkit-mask-image: url(assets/images/arrow.svg);
                mask-image: url(assets/images/arrow.svg);
            }
            &::after {
                opacity: 0;
                translate: -100% 0;
            }
            &.slick-disabled {
                opacity: .2;
                pointer-events: none;
            }
            &.prev {
                transform: rotate(-180deg)
            }
            &:is(a:hover &,
            a.overlay:hover &,
            a.overlay:hover ~ &,
            a.overlay:hover ~ * &)::before,
            &:hover::before {
                translate: 100% 0;
                opacity: 0
            }
            &:is(a:hover &,
            a.overlay:hover &,
            a.overlay:hover ~ &,
            a.overlay:hover ~ * &)::after,
            &:hover::after {
                opacity: 1;
                translate: 0 0;
            }
        }
        /* Container */
        & main {
            width: 100vw;
            overflow-x: clip;
        }
        & [style^="--w:"] {width: var(--w);}
        & [class^="container"] {
            margin-inline: auto;
            padding-block: min(5em,10vw);
            &.container {width: clamp(min(500px,calc(100vw - min(5em,10vw))),72vw,1380px);}
            &.container-xl {width: min(1670px, calc(100vw - min(5rem, 10vw)));}
            &.container-xxl {width: min(1780px, calc(100vw - min(5rem, 10vw)));}
        }
        & .row,
        & .flex {
            display: flex;
            flex-wrap: wrap;
            row-gap: min(2em, 10vw);
            &.items-center {align-items: center;}
            &.space-between {
                justify-content: space-between;
            }
            &.direction-reverse {
                flex-direction: row-reverse;
            }
            &.direction-column {
                flex-wrap: nowrap;
                flex-direction: column;
                row-gap: min(3em, 7vw);
            }
            @media screen and (width<700px) {
                &.direction-reverse {
                    flex-direction: column-reverse;
                }
            }
        }
        & section {position: relative;}
        & .overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            font-size: 0;
            &:has(:is(.arrow, .plus)) {
                padding: min(15px, 6vw);
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                & .arrow {
                    rotate: -45deg;
                    color: currentColor;
                }
            }
            &:has( .play) {
                display: flex;
                align-items: center;
                justify-content: center;
                & .play {
                    color: var(--cLRedVivid);
                    &::before {padding: min(3rem, 10vw);}
                }
            }
        }
        & .cliping {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background-color: var(--cLgrayMedium);
            clip-path: inset(0rem round 0rem);
            & img {
                position: absolute;
                inset: 0;
                object-fit: cover;
                &:is(.cliping.filter &) {
                    opacity: .6;
                    filter: brightness(.7);
                }
            }
            &~*:not(:has( .title-hiden)) {
                position: relative;
                z-index: 1;
                color: var(--cLWhite);
            }
        }
        & [class^="btn-"] {
            border: none;
            line-height: 1;
            cursor: pointer;
            overflow: hidden;
            font-weight: 500;
            border-radius: 2em;
            text-align: center;
            color: currentColor;
            transition: all .3s;
            white-space: nowrap;
            display: inline-flex;
            letter-spacing: -2.5%;
            max-width: max-content;
            font-size: var(--fs15);
            text-transform: uppercase;
            background-color: transparent;
            border: 1px solid currentColor;
            font-family: 'Roboto', sans-serif;
            padding: min(0.723em,3vw) min(1.3em,5vw);
            &.btn-cLWhite {
                color: var(--cLbluePrimary);
                border-color: var(--cLWhite);
                background-color: var(--cLWhite);
                &:hover {
                    color: var(--cLWhite);
                    border-color: var(--cLbluePrimary);
                    background-color: var(--cLbluePrimary);
                }
            }
            &:has( .arrow,[style^="--icn-"]) {
                align-items: center;
                column-gap: min(1.5rem,6vw);
                padding: min(.9em,3vw) min(0.5em,1.5vw);
                &:has( .arrow) {
                    padding-left: min(1.3em,5vw);
                }
                & .arrow {
                    position: relative;
                    scale: 2.3;
                    z-index: 0;
                    left: -6px;
                    flex: 0 0 auto;
                    color: currentColor;
                    pointer-events: none;
                    padding: min(.4rem,2vw);
                    border-color: transparent;
                    background-color: currentColor;
                    &::after, &::before { 
                        inset: 27%;
                        background-color: contrast-color(currentColor);
                    }
                }
            }
        }
        & .pagination {
            position: relative;
            width: 100%;
            display: flex;
            column-gap: .5em;
            align-items: center;
            justify-content: center;
            margin-top: min(2em,5vw);
            & .dots {
                display: flex;
                width: max-content;
                align-items: center;
                justify-content: center;
                & .swiper-pagination-bullet {
                    background-color: hsl(from var(--cLblueIndigo) h s l/.7);
                    &:is(section.bg-cLblueIndigo &) {background-color: hsl(from var(--cLWhite) h s l/.7);}
                }
            }
        }
        & .bg-cLblueIndigo {
            color: var(--cLWhite);
            background-color: var(--cLblueIndigo);
            & .see {color: inherit;}
        }
        & .bg-cLblueSky {
            color: var(--cLWhite);
            background-color: var(--cLblueSky);
            & .see {color: inherit;}
        }
        & .bg-cLwhiteSmoke {
            background-color: var(--cLwhiteSmoke);
            & .see {color: inherit;}
        }
        & .cLblueSky {color: var(--cLblueSky);}
        & .cLblueBright {color: var(--cLblueBright);}
        & .see {
            position: relative;
            transition: all .3s;
            align-items: center;
            display: inline-flex;
            font-size: var(--fs15);
            column-gap: min(0.5em, 3vw);
            color: var(--cLgrayMedium);
            &::after {
                position: relative;
                height: 0;
                content: '';
                display: block;
                transition: all .3s;
                background-color: currentColor;
                padding: min(.4em, 3vw) min(.5em, 5vw);
                mask: url(assets/images/arrows-chevron.svg) center / contain no-repeat;
            }
            &:hover::after,
            &:is(.cardB:hover &)::after {
                translate: 5px 0;
                background-color: currentColor;
            }
        }
        /* Formulaire */
        & .flex:has(.full,.half) {row-gap: min(.8em,5vw);}
        & .half {flex: 1 1 max(200px, 40%);}
        & .full {flex: 1 1 100%;}
        & *:is(.full,.half) {
            display: grid;
            row-gap: min(.3em,4vw);
            & .title {line-height: .9;}
            & label {
                font-weight: 700;
                letter-spacing: -.85px;
                font-family: Arial, sans-serif;
                &:has([type="checkbox"]) {
                    display: flex;
                    column-gap: .6em;
                }
            }
        }
        & .wpcf7-not-valid-tip {
            display: block;
            margin-top: 7px;
            font-size: min(13px,3.6vw);
        }
        & input:is([type="radio"], [type="checkbox"]) {
            margin: 0;
            outline: none;
            flex: 0 0 auto;
            width: min(1.5rem, 6vw);
            height: min(1.5rem, 6vw);
            accent-color: var(--cLblueIndigo);

            &[type="checkbox"] {
                box-shadow: inset 0 0 0 1px var(--cLblueIndigo)
            }

            &[type="radio"]:not(:checked) {
                appearance: none;
                border-radius: 2rem;
                border: 1px solid var(--cLblueIndigo)
            }
        }

        & input:not(:is(.qty-value, [type="radio"], [type="checkbox"], [type="button"], [type="submit"], [type="image"], [type="file"])),
        & select,
        & textarea {
            width: 100%;
            outline: none;
            border-radius: 0;
            height: min(40px, 13vw);
            color: var(--cLblueIndigo);
            font-size: min(15px, 3.7vw);
            background-color: var(--cLWhite);
            border: 1px solid var(--cLblueIndigo);
            padding: min(.5em, 2.5vw) min(1em, 5vw);
            &:is([multiple="multiple"]) {
                height: auto
            }
            &::-webkit-input-placeholder {
                font-weight: 300;
                text-align: left;
                font-style: normal;
                color: currentColor;
            }
            &::-moz-placeholder {
                font-weight: 300;
                text-align: left;
                font-style: normal;
                color: currentColor;
            }
            &::-ms-input-placeholder {
                font-weight: 300;
                text-align: left;
                font-style: normal;
                color: currentColor;
            }
            &::placeholder {
                font-weight: 300;
                text-align: left;
                font-style: normal;
                color: currentColor;
            }
            &:is(textarea) {
                width: 100%;
                resize: none;
                font-family: inherit;
                height: min(150px, 30vw) !important
            }
        }
        & input:is([type="radio"],[type="checkbox"]) {
            margin: 0 .5rem 0 0;
            outline: none;
            flex: 0 0 auto;
            width: min(1.5rem,4vw);
            height: min(1.5rem,4vw);
            accent-color: var(--cLblueIndigo);
            &:is([type="checkbox"]) {box-shadow: inset 0 0 0 1px var(--cLblueIndigo);}
            &:is([type="radio"]:not(:checked)) {
                appearance: none;
                border-radius: 2rem;
                border: 1px solid var(--cLblueIndigo);
            }
        }
        & header {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all .3s;
            color: var(--cLbluePrimary);
            padding-block: min(3em,3vw);
            background-color: var(--cLWhite);
            &:is(.is-stuck) {padding-block: min(1em,3vw);}
            & [class^="container"] {
                padding-block: 0;
                & .row {
                    column-gap: 2%;
                    align-items: center;
                    & .left {
                        flex: 1 1 max(min(150px,30vw),75%);
                        & .logo {
                            display: block;
                            position: relative;
                            width: min(770px,100%);
                        }
                        @media screen and (width >= 1200px) {
                            & {flex: 1 1 max(min(300px,30vw),40%);}
                        }
                    }
                    & .right {
                        flex: 1 1 max(min(60px,10vw),10%);
                        display: flex;
                        justify-content: flex-end;
                        & .ct-nav {
                            flex: 1;
                            position: fixed;
                            top: 0;
                            right: 0;
                            z-index: 2;
                            height: 100vh;
                            visibility: hidden;
                            pointer-events: none;
                            width: min(500px,100vw);
                            &:is(header:has( .open-nav > input:checked) &) {
                                opacity: 1;
                                visibility: visible;
                                transition: all .3s;
                            }
                            & nav {
                                position: relative;
                                left: 100%;
                                width: 100%;
                                height: 100%;
                                transition: .2s;
                                text-align: left;
                                box-sizing: border-box;
                                font-size: min(20px,5vw);
                                padding: 8rem 1.5rem 2rem;
                                background-color: var(--cLWhite);
                                &:is(header:has( .open-nav > input:checked) &) {
                                    translate: -100% 0;
                                }
                                & .primary {
                                    position: relative;
                                    height: 100%;
                                    display: flex;
                                    row-gap: 1.5rem;
                                    font-weight: 500;
                                    overflow-y: scroll;
                                    overflow-x: hidden;
                                    flex-direction: column;
                                    & a[style^="--icn-before"]::before, 
                                    & a[style^="--icn-after"]::after {
                                        padding: min(0.6em, 5vw);
                                    }
                                    & ul {
                                        position: relative;
                                        height: 0;
                                        opacity: 0;
                                        display: flex;
                                        row-gap: 1rem;
                                        transition: all .3s;
                                        pointer-events: none;
                                        width: min(300px,70vw);
                                        flex-direction: column;
                                        @media screen and (width >= 1200px) {
                                            & {
                                                position: absolute;
                                                z-index: 1;
                                                padding: 1rem;
                                                width: min(300px,70vw);
                                                top: calc(100% + 1rem);
                                                color: var(--cLPrimaryBlue);
                                                background-color: var(--cLbluePrimary);
                                            }
                                        }
                                    }
                                    @media screen and (width >= 1200px) {
                                        & {
                                            margin-left: auto;
                                            overflow: visible;
                                            border-radius: 2em;
                                            max-height: initial;
                                            align-items: center;
                                            max-width: max-content;
                                            flex-direction: initial;
                                            justify-content: flex-end;
                                            column-gap: min(1.5em,4vw);
                                        }
                                    }
                                }
                                @media screen and (width >= 1200px) {
                                    & {
                                        left: 0;
                                        padding: 0;
                                        width: 100%;
                                        height: auto;
                                        font-size: inherit;
                                        background-color: initial;
                                    }
                                }
                            }
                            @media screen and (width >= 1200px) {
                                & {
                                    position: relative;
                                    width: 100%;
                                    height: auto;
                                    visibility: visible;
                                    pointer-events: inherit;
                                }
                            }
                        }
                        & .open-nav {
                            position: relative;
                            z-index: 3;
                            height: 28px;
                            display: flex;
                            row-gap: 8px;
                            cursor: pointer;
                            transition: .2s;
                            width: max-content;
                            align-items: center;
                            color: var(--cLbluePrimary);
                            flex-direction: column;
                            justify-content: center;
                            &:has( input:checked) {
                                row-gap: 0;
                                color: var(--cLbluePrimary);
                                transform: rotate(45deg);
                                /* @media screen and (width >= 1200px) {
                                    & {color: var(--cLbluePrimary);}
                                } */
                            }
                            & span {
                                width: 1.8rem;
                                height: 0.15rem;
                                line-height: 0;
                                transition: all .3s;
                                border-radius: 1rem;
                                pointer-events: none;
                                background: currentColor;
                                transform-origin: 55% center;
                                &:is(.open-nav:has( input:checked) &):nth-child(2) {display: none;}
                                &:is(.open-nav:has( input:checked) &):nth-child(1) {
                                    transform: translate(-.1rem,.2rem) rotate(90deg);
                                }
                            }
                            @media screen and (width >= 1200px) {
                                & {color: var(--cLbluePrimary);}
                            }
                        }
                        @media screen and (width >= 1200px) {
                            & {flex: 1 1 max(min(300px,30vw),40%);}
                        }
                    }
                }
            }
        }
        & .sc1 {
            & [class^="text"] {
                row-gap: min(.5em,5vw);
            }
        }
        & .sc2 {
            & .grid {
                display: grid;
                gap: min(1.5em,3vw) 1%;
                grid-template-columns: repeat(auto-fill, minmax(max(min(300px,80vw), 30%), 1fr));
                & .cardA {
                    position: relative;
                    padding: min(4em,5vw);
                    color: var(--cLWhite);
                    border-radius: min(32px,5vw);
                    background-color: var(--cLblueIndigo);
                    & [class^="text"] {
                        height: 100%;
                        row-gap: min(3em,8vw);
                        & .title {
                            display: block;
                            width: min(333px,100%);
                        }
                        & p:has( .icn) {
                            margin-top: auto;
                            & .icn[style^="--icn-before"]::before {padding: clamp(min(2em,7vw),3.7vw,70px);}
                        }
                    }
                    @media screen and (width >= 1200px) {
                        & {aspect-ratio: 1/1.2;}
                    }
                }
            }
        }
        & .sc3 {
            & .swiper {
                overflow: visible;
                clip-path: polygon(0 0, calc(100% + (min(1780px, calc(100vw - min(5rem, 10vw))) / 2)) 0%, calc(100% + (min(1780px, calc(100vw - min(5rem, 10vw))) / 2)) 100%, 0% 100%);
                & .cardB {
                    position: relative;
                    overflow: hidden;
                    aspect-ratio: 1/1.4;
                    mix-blend-mode: multiply;
                    border-radius: min(32px,5vw);
                    & picture {
                        & img {
                            transition: all .3s;
                            &:is(.cardB:hover &) {
                                scale: 1.03;
                                rotate: -1deg;
                                backdrop-filter: blur(1em);
                            }
                        }
                    }
                    & [class^="text"] {
                        position: absolute;
                        inset: 0;
                        z-index: 1;
                        color: var(--cLWhite);
                        padding:  min(3em,5vw);
                    }
                }
            }
        }
        & .sc4 {
            & .cliping {
                & img {position: fixed;}
                &::after {
                    position: absolute;
                    inset: 0;
                    content: '';
                    mix-blend-mode: multiply;
                    /* background-color: hsl(from var(--cLblueIndigo) h s l/0.6); */
                }
            }
            & [class^="text"] {
                min-height: min(900px,80dvh);
                & .object {
                    width: 1.5em;
                    height: 0.72em;
                    display: inline-block;
                    background-color: var(--cLblueIndigo);
                    clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 100%, 0% 100%);
                }
            }
        }
        & .sc5 {
            & .slider {
                position: relative;
                width: auto;
                display: flex;
                flex-wrap: nowrap;
                overflow-y: hidden;
                overflow-x: scroll;
                scrollbar-width: none;
                gap: 2rem min(2rem, 3vw);
                -ms-overflow-style: none;
                scroll-snap-type: x mandatory;
                scrollbar-color: transparent transparent;
                padding-inline: calc(100vw - min(1780px, calc(100vw - min(5rem, 10vw))));
                margin-inline: calc((100vw - min(1780px, calc(100vw - min(5rem, 10vw)))) * -1);
                & .cardC {
                    position: relative;
                    flex: 0 0 auto;
                    aspect-ratio: 1/1;
                    padding: min(4em,5vw);
                    color: var(--cLWhite);
                    scroll-snap-align: center;
                    border-radius: min(32px,5vw);
                    background-color: var(--cLblueSky);
                    width: clamp(min(400px,85vw),42vw,806px);
                    & [class^="text"] {
                        height: 100%;
                        & .title {
                            display: block;
                            width: min(333px,100%);
                        }
                        & p:has( .icn) {
                            display: flex;
                            margin-top: auto;
                            justify-content: flex-end;
                            & .icn[style^="--icn-before"]::before {padding: clamp(min(1.5em,7vw),3.7vw,70px);}
                        }
                    }
                }
            }
        }
        & .sc6 {
            & .row {
                column-gap: 7%;
                & .left {
                    flex: 1 1 max(min(300px,880vw),40%);
                    & .rs-link {
                        font-size: 0;
                        column-gap: 0;
                        overflow: hidden;
                        width: max-content;
                        border-radius: min(1rem,4vw);
                        background-color: currentColor;
                        &[style^="--icn-before"] {
                            &::before {
                                transition: all .3s;
                                background-color: #1258a4;
                                padding: clamp(min(1.9rem,7vw),2.4vw,3rem);
                            }
                            &:hover::before {background-color: var(--cLbluePrimary);}
                        }
                    }
                }
                & .right {
                    flex: 1 1 max(min(300px,880vw),40%);
                    & picture {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 1/.8;
                    }
                }
            }
        }
        & .sc7 {
            & [class^="container"] {
               &:is(.th-cLblueIndigo) {
                   --th: var(--cLblueIndigo);
               }
               &:is(.th-cLblueSky) {
                   --th: var(--cLblueSky);
               }
               & .ct-texte {
                   position: relative;
                   isolation: isolate;
                   width: min(1000px,100%);
                   &::before {
                       position: absolute;
                       z-index: -1;
                       content: '';
                       background-color: hsl(from var(--th,var(--cLblueIndigo)) h s l/0.8);
                       clip-path: polygon(0 0, calc(100% - 25vw) 0, 100% 100%, 0% 100%);
                       inset: calc((min(5em,10vw) * -1)) 0 calc((min(5em,10vw) * -1)) calc((100vw - clamp(min(500px,calc(100vw - min(5em,10vw))),72vw,1380px)) / -2);
                   }
                   @media screen and (width>=1200px) {
                       &::before {background-color: var(--th,var(--cLblueIndigo));}
                   }
               }
            }
        }
        & .sc8 {
            & .custom-tabs-container {
                display: grid;
                row-gap: min(2.5em,5vw);
                & .tabs-header {
                    position: relative;
                    width: auto;
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: scroll;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                    column-gap: min(3em,9vw);
                    scroll-snap-type: x mandatory;
                    scrollbar-color: transparent transparent;
                    padding-inline: calc(100vw - clamp(min(500px,calc(100vw - min(5em,10vw))),72vw,1380px));
                    margin-inline: calc((100vw - clamp(min(500px,calc(100vw - min(5em,10vw))),72vw,1380px)) * -1);
                    & .tab-btn {
                        position: relative;
                        flex: 0 0 auto;
                        cursor: pointer;
                        color: currentColor;
                        transition: all .3s;
                        scroll-snap-align: center;
                        padding-bottom: min(.6em,5vw );
                        border-bottom: 3px solid currentColor;
                        &:not(.active) {
                            font-weight: 400;
                            color: var(--cLgrayDark);
                            border-color: transparent;
                        }
                    }
                }
                & .tabs-content {
                    & .tab-pane {
                        display: none;
                        &.active {
                            display: block;
                        }
                    }
                }
            }
        }
        & .sc9 {
            & .left {
                position: relative;
                z-index: 1;
                padding: min(3em,5vw);
                border-radius: min(32px,5vw);
                background-color: var(--cLWhite);
                flex: 1 1 max(min(300px,0vw),20%);
                
            }
            & .right {
                position: relative;
                flex: 1 1 max(min(300px,0vw),60%);
                & picture {
                    border-radius: min(32px,5vw);
                    & img {
                        object-fit: cover;
                        max-width: initial;
                        @media screen and (width>= 1200px) {
                            & {
                                position: absolute;
                                inset: 0;
                            }
                        }
                    }
                    @media screen and (width>= 1200px) {
                        & {
                            margin-left: -2em;
                            border-radius: 0 min(32px,5vw) min(32px,5vw) 0;
                        }
                    }
                }
                & .ct-text {
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                    color: var(--cLWhite);
                    & .text {
                        margin-inline: auto;
                        width: min(964px,80%);
                        /* background-color: var(--cLWhite); */
                        padding: min(5em,10vw) min(3em,5vw);
                        & .object {
                            width: 1.5em;
                            height: 0.72em;
                            display: inline-block;
                            background-color: var(--cLblueIndigo);
                            clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 100%, 0% 100%);
                        }
                    }
                }
            }
        }
        & .sc10 {
            & .row {
                & .left {
                    flex: 1 1 max(min(300px,80vw),40%);
                    &:is(.row.direction-reverse &) {flex: 1 1 max(min(300px,80vw),35%);}
                    & .grid {
                        position: relative;
                        display: grid;
                        z-index: 1;
                        row-gap: min(2em,5vw);
                        align-content: flex-end;
                        filter: drop-shadow(0 0 1em hsl(from #000 h s l/0.1));
                        & .cardD {
                            position: relative;
                            margin-left: auto;
                            padding: min(4em,5vw);
                            width: min(601px,100%);
                            border-radius: min(32px,5vw);
                            background-color: var(--cLWhite);
                            &.th-cLblueIndigo {
                                color: var(--cLWhite);
                                background-color: var(--cLblueIndigo);
                            }
                            &.th-cLblueSky {
                                color: var(--cLWhite);
                                background-color: var(--cLblueSky);
                            }
                            @media screen and (width>=1200px) {
                                 &:is(.row.direction-reverse &) {margin-inline: 0 auto;}
                            }
                        }
                        @media screen and (width>=1200px) {
                            & {
                                padding-block: min(5em,5vw);
                                margin-right: calc(min(9em,10vw) * -1);
                                &:is(.row.direction-reverse &) {margin-inline:  calc(min(7em,10vw) * -1) 0;}
                            }
                        }
                    }
                }
                & .right {
                    flex: 1 1 max(min(300px,80vw),60%);
                    &:is(.row.direction-reverse &) {flex: 1 1 max(min(300px,80vw),60%);}
                    & picture {
                        border-radius: min(32px,5vw);
                        @media screen and (width>= 1200px) {
                            & img {
                                position: absolute;
                                inset: 0;
                            }
                        }
                    }
                }
            }
        }
        & footer {
            & .logo {
                position: relative;
                display: block;
                margin-inline: auto;
                width: min(650px,100%);
                & img {object-fit: contain;}
            }
            & .flex {
                justify-content: center;
                & > div {
                    position: relative;
                    &:not(:first-child) {
                        display: flex;
                        &::before {
                            position: relative;
                            content: '';
                            height: auto;
                            width: 1px;
                            margin-inline: min(2em,5vw);
                            background-color: hsl(from var(--cLblueIndigo) h s l/0.1);
                        }
                    }
                    & .nav {
                        display: grid;
                        row-gap: min(.7em,5vw);
                    }
                    & .btns {
                        display: flex;
                        row-gap: min(1em,5vw);
                        flex-direction: column;
                        justify-content: space-between;
                    }
                }
            }
        }
        @media screen and (width >= 1200px) {
            & .mob {display: none !important;}
        }
        @media screen and (width < 1200px) {
            & .desk {display: none !important;}
        }
    }
}