body {
    & .fs38 {
        font-size: clamp(min(38px, 8vw), 2vw, 38px);
    }

    & .fs36 {
        font-size: clamp(min(36px, 8vw), 2vw, 36px);
    }

    & .fs23 {
        font-size: clamp(min(23px, 5vw), 1.4vw, 23px);
    }

    & .fs20 {
        font-size: clamp(min(20px, 5vw), 1.4vw, 20px);
    }

    & .fs16 {
        font-size: clamp(min(16px, 4vw), 1vw, 16px);
    }

    & .fs14 {
        font-size: clamp(min(14px, 4vw), 1vw, 14px);
    }

    & .fs13 {
        font-size: clamp(min(13px, 4vw), 1vw, 13px);
    }

    & .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;
    }

    & .roboto {
        font-family: 'Roboto', sans-serif;
    }

    & picture {
        position: relative;
        height: 100%;
        display: block;
        overflow: hidden;

        & img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            object-fit: cover;
            max-width: inherit;
        }
    }

    & [class^="text"] {
        width: 100%;
        display: flex;
        row-gap: min(2em, 3vw);
        flex-direction: column;

        &.text-center {
            text-align: center;
            align-items: center;
        }

        &.text-right {
            text-align: right;
            align-items: flex-end;
        }
    }

    & .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;
        color: #ffffff;
        aspect-ratio: 1/1;
        border-radius: 3rem;
        transition: all .2s;
        display: inline-block;
        padding: min(1.314rem, 5vw);
        background-color: #57AFBA;
        border: 1px solid #57AFBA;

        &.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: url(../images/arrow.svg) center / contain no-repeat;
            mask: url(../images/arrow.svg) center / contain no-repeat;
        }

        &::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 ~ * &),
        &:hover {
            border-color: var(--cLPrimaryBlue);
            background: linear-gradient(124.29deg, #AFD04A 12.6%, #63861F 99.7%);

        }

        &: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;
        }
    }

    & .btn {
        border: none;
        line-height: 1;
        max-width: 100%;
        overflow: hidden;
        font-weight: 700;
        border-radius: 2em;
        text-align: center;
        transition: all .3s;
        letter-spacing: -2.5%;
        display: inline-block;
        text-transform: initial;
        justify-content: center;
        text-transform: uppercase;
        border: 1px solid transparent;
        font-family: 'Roboto', sans-serif;
        font-size: clamp(min(14px, 4vw), 1vw, 14px);
        padding: min(1.143em, 3vw) min(1.8em, 5vw);

        &.btn-border-green {
            color: #182324;
            border-color: #57AFBA;
            background-color: transparent;

            &:hover {
                color: #182324;
                border-color: #57AFBA;
                background-color: #57AFBA;

            }
        }

        &.btn-border-gris {
            color: #182324;
            border-color: #C2CBD3;
            background-color: transparent;

            &:hover {
                color: #182324;
                border-color: #C2CBD3;
                background-color: #C2CBD3;

            }
        }
    }

    & [style^="--icn-"] {
        display: flex;
        align-items: center;
        column-gap: min(10px, 3vw);

        &[style^="--icn-before"]::before,
        &[style^="--icn-after"]::after {
            position: relative;
            content: "";
            display: block;
            transition: initial;
            pointer-events: none;
            padding: min(1rem, 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;
        }
    }

    & [style^="--w:"] {
        width: var(--w);
    }

    & [class^="container"] {
        margin-inline: auto;
        padding-block: min(5em, 10vw);

        &.container {
            width: min(1100px, min(calc(100vw - min(2rem, 10vw)), 100%));
        }
    }

    & .row,
    & .flex {
        display: flex;
        flex-wrap: wrap;
        row-gap: min(2rem, 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(50px, 10vw);
        }

        @media screen and (width<700px) {
            &.direction-reverse {
                flex-direction: column-reverse;
            }
        }
    }

    & section {
        position: relative;
        color: #182324;

        & p:not([class]) {
            color: inherit !important;
        }
    }

    & .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;
        clip-path: inset(0rem round 0rem);
        background-color: var(--cLPrimaryBlue);

        & 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: #ffffff;
        }
    }

    & [style^="--underline-color:"] {
        position: relative;

        &::after {
            position: relative;
            content: '';
            display: block;
            margin-top: .3em;
            aspect-ratio: 3.5/1;
            height: min(.75em, 5vw);
            background: var(--underline-color);
            -webkit-mask: url(../images/underline.svg) center bottom / contain no-repeat;
            mask: url(../images/underline.svg) center bottom / contain no-repeat;
        }

        &:is(.text-center &)::after {
            margin-inline: auto;
        }

        &:is(.text-right &)::after {
            margin-inline: auto 0;
        }
    }

    & header#masthead {
        & #menus_header {
            & #conteneur_menus_head:after {
                background: #116773;
            }

            & #menu_principal {
                & .menu>li {
                    margin-inline: 0;

                    &>a,
                    &>span {
                        text-align: left;
                    }

                }
            }

            & nav#site-navigation {
                display: flex;
                align-items: center;

                & .rs {
                    display: none;
                    column-gap: .5em;
                    align-items: center;
                    padding-bottom: 1em;
                    margin-inline: auto;

                    & a {
                        font-size: 0;
                        display: block;
                        color: #ffffff !important;
                        &:hover {color: #FFC426 !important;}
                        &[style^="--icn-before"]::before {
                            padding: min(0.6rem, 4vw) min(1rem, 5vw);
                        }
                    }

                    @media screen and (width >=1200px) {
                        & {
                            display: flex;
                        }
                    }
                }
            }
        }
    }

    & .sc1 {
        position: relative;
        z-index: 1;
        & .swiper {
            overflow: visible;
            height: min(1080px,90dvh);
            & .swiper-wrapper {
                height: 100%;
                & .swiper-slide {
                    height: auto;
                    & .cliping {
                        & img {
                            filter: brightness(.5);
                        }
                    }
        
                    & [class^="container"] {
                        height: 100%;
                        padding-block: min(5em, 10vw) min(15em, 10vw);
        
                        & [class^="text"] {
                            margin-left: auto;
                            height: max-content;
                            row-gap: min(1em, 3vw);
                            padding: min(3em, 5vw) min(1.5em, 5vw) min(3em, 10vw);
        
                            & .fs38 {
                                line-height: 1.2;
                            }
        
                            @media screen and (width < 1200px) {
                                & .btn-border-green {
                                    color: #ffffff;
                                }
                            }
        
                            @media screen and (width >=1200px) {
                                & {
                                    color: #182324;
                                    background-color: #ffffff;
                                    border-radius: min(10px, 4vw);
                                }
                            }
                        }
                    }
                }
            }
        }

        & .container:has(.pagination) {
            position: absolute;
            left: 50%;
            z-index: 1;
            translate: -50% 0;
            padding-block: 0;
            bottom: calc(min(15em, 10vw) - (min(1.5rem, 5vw) * 4.8));

            & .pagination {
                position: relative;
                height: 0;
                display: flex;
                align-items: center;
                column-gap: min(1em, 5vw);
                justify-content: center;

                & .ct-dots {
                    position: absolute;
                    right: 0;
                    z-index: 2;
                    left: inherit;
                    display: flex;
                    width: min(490px, 100%);
                    justify-content: center;
                    bottom: calc(min(1.5rem, 5vw) * 3);

                    & .swiper-pagination-bullet {
                        width: 2em;
                        height: 0.25em;
                        border-radius: 1em;
                        background-color: #C7C7C7;

                        &.swiper-pagination-bullet-active {
                            background-color: #57AFBA;
                        }
                    }
                }

                @media screen and (width >=1200px) {
                    & {
                        justify-content: flex-end;
                    }
                }
            }
        }

        /* .swiper-slide {
            min-height: min(70dvh,1080px);
        } */

        @media screen and (width >=1200px) {
            & {
                margin-top: calc(min(2em, 5vw) * -1);

                .swiper-slide {
                    /* min-height: min(70dvh,1080px); */
                    display: grid;

                    .cliping {
                        & img {
                            filter: none;
                        }
                    }

                    div[class^="container"] {
                        height: 100%;
                        display: flex;
                    }

                    &.haut-centre {
                        div[class^="text"] {
                            margin-inline: auto;
                            margin-block: 0 auto;
                        }
                    }

                    &.haut-gauche {
                        div[class^="text"] {
                            margin-inline: 0 auto;
                            margin-block: 0 auto;
                        }
                    }

                    &.haut-centre {
                        div[class^="text"] {
                            margin-inline: auto;
                            margin-block: 0 auto;
                        }
                    }

                    &.haut-droite {
                        div[class^="text"] {
                            margin-inline: 0 auto;
                            margin-block: 0 auto;
                        }
                    }


                    &.centre {
                        div[class^="text"] {
                            margin-inline: auto;
                            margin-block: auto;
                        }
                    }

                    &.centre-gauche {
                        div[class^="text"] {
                            margin-inline: auto 0;
                            margin-block: auto;
                        }
                    }

                    &.centre-droite {
                        div[class^="text"] {
                            margin-inline: 0 auto;
                            margin-block: auto;
                        }
                    }


                    &.bas-droite {
                        div[class^="text"] {
                            margin-inline: auto 0;
                            margin-block: auto 0;
                        }
                    }

                    &.bas-gauche {
                        div[class^="text"] {
                            margin-inline: 0 auto;
                            margin-block: auto 0;
                        }
                    }

                    &.bas-centre {
                        div[class^="text"] {
                            margin-inline: auto;
                            margin-block: auto;
                        }
                    }
                }
            }
        }

    }

    & .sc2 {
        isolation: isolate;

        &::before {
            position: absolute;
            inset: 0;
            content: '';
            background-color: #F1F9FA;
            clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 calc(100% - min(5em, 10vw)));
        }

        & .swiper {
            display: flex;
            row-gap: min(2em, 7vw);
            flex-direction: column;
        }

        & .cardA {
            position: relative;
            height: auto;
            transition: all .3s;
            background-color: var(--th);
            border-radius: min(12px, 4vw);
            padding: min(2em, 5vw) min(1em, 5vw);
            color: hsl(from contrast-color(var(--th)) h s l / .8);

            &:hover {
                &~.cardA {
                    scale: .97;
                    rotate: -2deg;
                    translate: 2% 0;
                }
            }

            &:has(~ .cardA:hover) {
                scale: .97;
                rotate: 2deg;
                translate: -2% 0;
            }

            & [class^="text"] {
                height: 100%;
                row-gap: min(1.5em, 4vw);
            }

            & [style^="--icn-before"]::before,
            & [style^="--icn-after"]::after {
                padding: min(1.5rem, 5vw);
            }

            & .plus {
                position: relative;
                width: 0;
                height: 0;
                margin-top: auto;
                border-radius: 4em;
                border: 1px solid hsl(from contrast-color(var(--th)) h s l / .2);
                padding: min(1.314rem, 5vw);
                background-color: transparent;

                &::before,
                &::after {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 50%;
                    scale: .5;
                    width: 100%;
                    height: .1em;
                    translate: 0 -50%;
                    background-color: hsl(from contrast-color(var(--th)) h s l / .8);
                }

                &::after {
                    rotate: -90deg;
                }
            }
        }

        & .pagination {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            column-gap: min(1em, 5vw);

            @media screen and (width >=1200px) {
                & {
                    justify-content: flex-end;
                }
            }
        }
    }

    & .sc3 {
        & .grid {
            display: grid;
            gap: min(2em, 7vw) 3%;
            grid-template-columns: repeat(auto-fill, minmax(max(min(250px, 80vw), 40%), 1fr));

            & .cardB {
                position: relative;
                display: flex;
                flex-wrap: wrap;
                overflow: hidden;
                border-radius: min(12px, 4vw);
                border: 1px solid #E8EBEE;

                & picture {
                    height: min(266px, 50vw);
                    flex: 1 1 max(min(200px, 80vw), 40%);

                    & img {
                        transition: all .3s;

                        &:is(.cardB:hover &) {
                            scale: 1.1;
                            rotate: -2deg;
                        }
                    }

                    /* &:is(.cardB:nth-child(1) &) {
                        width: 100%;
                        flex: 1 0 100%;
                        height: min(293px, 50vw);
                    } */

                    /* @media screen and (width >=1200px) {
                        & {
                            height: auto;
                        }
                    } */
                }

                & .text {
                    row-gap: min(.7em, 5vw);
                    padding: min(1.5em, 5vw);
                    flex: 1 1 max(min(200px, 80vw), 40%);

                    & time {
                        font-weight: 400;
                        background-color: #F1F9FA;
                        border-radius: 3em;
                        margin-right: auto;
                        padding: min(1em, 4vw) min(1.5em, 5vw);
                        font-size: clamp(min(12px, 3vw), 1vw, 12px);
                    }

                    & .fs20 {
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }

                    & p:not(:is([class], :has(.btn))) {
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;

                        /* &:is(.cardB:nth-child(1) &) {
                            @media screen and (width >=1200px) {
                                -webkit-line-clamp: 4;
                                line-clamp: 4;
                            }
                        } */
                    }

                    & .btn {
                        column-gap: .5em;
                        display: inline-flex;
                        text-transform: initial;
                        padding-block: min(0.9em, 3vw);

                        &::after {
                            position: relative;
                            content: "";
                            display: block;
                            padding: .23em;
                            transition: inherit;
                            transition: all .3s;
                            pointer-events: none;
                            background-color: currentColor;
                            -webkit-mask: url(../images/arrow.svg) center / contain no-repeat;
                            mask: url(../images/arrow.svg) center / contain no-repeat;
                        }

                        &:is(.cardB:hover &) {
                            color: #182324;
                            border-color: #C2CBD3;
                            background-color: #C2CBD3;

                            &::after {
                                translate: .3em 0;
                            }
                        }
                    }

                    /* @container cards (width > 400px) {
                        & {
                            background-color: #AFD04A;
                        }
                    } */
                }

            }

            /* & .cardB:nth-child(1) {
                @media screen and (width >=1200px) {
                    & {
                        grid-area: 1 / 1 / 26 / 18;
                    }
                }
            }

            & .cardB:nth-child(2) {
                @media screen and (width >=1200px) {
                    & {
                        grid-area: 1 / 19 / 13 / 36;
                    }
                }

            }

            & .cardB:nth-child(3) {
                @media screen and (width >=1200px) {
                    grid-area: 14 / 19 / 26 / 36;
                }
            }

            @media screen and (width >=1200px) {
                & {
                    gap: 0;
                    grid-template-columns: repeat(35, 1fr);
                }
            } */
        }
    }

    & .sc4 {

        p {
            color: #182324;
        }

        .ct-swiper:has(.swiper-button-lock) {
            .swiper-wrapper {
                justify-content: center;
            }
        }

        & .swiper {
            display: flex;
            row-gap: min(2em, 7vw);
            flex-direction: column;

            & .cardC {
                position: relative;
                height: auto;
                transition: all .3s;
                padding: min(1em, 5vw);
                background-color: #ffffff;
                border-radius: min(12px, 4vw);
                border: 1px solid var(--color-turquoise-95, #F1F9FA);

                &:hover {
                    background-color: hsl(from #F1F9FA h s l / .5);
                }

                & picture {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 1/.4;

                    & img {
                        object-fit: contain;
                    }
                }

                & .text {
                    height: 100%;

                    & p.fs14 {
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        line-clamp: 3;
                        -webkit-box-orient: vertical;
                        box-orient: vertical;
                        overflow: hidden;
                        color: #182324 !important;
                    }

                    & p:has(.btn) {
                        margin-top: auto;
                    }
                }

                & .btn {
                    column-gap: .5em;
                    display: inline-flex;
                    text-transform: initial;
                    padding-block: min(0.9em, 3vw);

                    &::after {
                        position: relative;
                        content: "";
                        display: block;
                        padding: .23em;
                        transition: inherit;
                        pointer-events: none;
                        background-color: currentColor;
                        -webkit-mask: url(../images/arrow.svg) center / contain no-repeat;
                        mask: url(../images/arrow.svg) center / contain no-repeat;
                    }

                    &:is(.cardC:hover &) {
                        color: #182324;
                        border-color: #C2CBD3;
                        background-color: #C2CBD3;

                        &::after {
                            translate: .3em 0;
                        }
                    }
                }
            }

            & .pagination {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                column-gap: min(1em, 5vw);

                @media screen and (width >=1200px) {
                    & {
                        justify-content: flex-end;
                    }
                }
            }
        }
    }

    & .une_actu {
        & .visuel {
            & img {
                transition: all .3s;

                &:is(.une_actu:hover &) {
                    scale: 1.1;
                    rotate: -2deg;
                }
            }
        }
    }

    & footer {
        color: #ffffff;
        background-color: #116773;

        & .container {
            padding-bottom: 0;

            & a {
                color: inherit;
                transition: color .3s ease;
                text-decoration: underline;
                text-underline-offset: 3px;

                &:hover {
                    color: #FFC426;
                    text-decoration: underline;
                    text-decoration-color: #FFC426;
                }
            }

            & .row {
                gap: 0 5%;

                & .nav {
                    display: grid;
                    row-gap: .4em;
                    line-height: 1.5;
                }

                &>.adress {
                    padding-block: 0 min(4em, 10vw);
                    flex: 1 1 max(min(200px, 80vw), 10%);

                    & .logo {
                        width: min(160px, 100%);
                    }

                    @media screen and (width >=1000px) {
                        & {
                            padding-block: 0;
                        }
                    }
                }

                &>.cart {
                    padding-block: 0 min(4em, 10vw);
                    flex: 1 1 max(min(300px, 80vw), 20%);

                    & img {
                        object-fit: contain;
                    }

                    @media screen and (width >=1000px) {
                        & {
                            scale: 1.15;
                            padding-block: 0;
                        }
                    }
                }

                &>.menu-contact {
                    padding-block: 0 min(4em, 10vw);
                    flex: 1 1 max(min(300px, 80vw), 40%);

                    & hr {
                        margin: 0;
                        width: 100%;
                        border: none;
                        box-sizing: border-box;
                        border-bottom: 1px solid hsl(from #ffffff h s l / .6);
                    }

                    & .menu {
                        column-gap: 5%;
                        grid-template-columns: repeat(auto-fill, minmax(max(min(200px, 30vw), 40%), 1fr));
                    }

                    @media screen and (width >=1000px) {
                        & {
                            padding-block: 0;
                        }
                    }
                }
            }

            & .rs {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: .5em min(1.5em, 3vw);
                background-color: #ffffff;
                padding-block: min(0.9em, 3vw);
                clip-path: polygon(-30vw 0%, 100vw 0%, 100vw 100%, -30vw 100%);
                box-shadow: 50vw 0 0 50vw #ffffff, -50vw 0 0 50vw #ffffff;

                & [style^="--icn-before"]::before {
                    padding: min(0.52em, 5vw);
                }

                & * {
                    color: #869791;
                }

                &>li:first-child {
                    flex: 1 1 100%;
                    text-align: center;

                    @media screen and (width >=1200px) {
                        & {
                            flex: 0 0 auto;
                        }
                    }
                }
            }
        }

    }
}