/*
Theme Name: Chb
Theme URI: https://underscores.me/
Author: chb
Author URI: http://www.chb.fr
Description: Un super thème optimisé par les meilleurs intés du monde.
Version: 1
License: GNU General Public License v1 or later
Text Domain: starter-theme
*/
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraLight.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Light.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraBold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Black.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Bold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Medium.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Thin.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraLight.woff2') format('woff2'),
        url('assets/fonts/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Light.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Bold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Medium.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Thin.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-ExtraLight.woff2') format('woff2'),
        url('assets/fonts/Roboto-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-Bold.woff2') format('woff2'),
        url('assets/fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-Light.woff2') format('woff2'),
        url('assets/fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-Medium.woff2') format('woff2'),
        url('assets/fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-Regular.woff2') format('woff2'),
        url('assets/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-SemiBold.woff2') format('woff2'),
        url('assets/fonts/Roboto-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-Thin.woff2') format('woff2'),
        url('assets/fonts/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

:root {
    --cLwhite: #FFFFFF;
    --cLred: #E6001C;
    --cLdarkGrey: #1C1C1C;
    --cLblue: #008FC5;
    --cLlightGrey: #E9E9E9;
    --cLgreen: #67A042;
    --cLgreenSoft: #66BB69;
    --cLmintNeon: #0FFFA8;
    --cLdarkGrey2: #1C1C1C;
    --cLblack: #000000;
    --cLblueStrong: #004FCB;
    --cLblueSlate: #3B5794;
    --cLblueLight: #1895C3;
    --cLgreySoft: #E5E5E5;
    --cLmediumGrey: #858585;
    --cLmediumGrey2: #858585;
    --cLgreenLight: #67BB6A;
    --cLwhiteSoft: #FAFAFA;
    --cLdeepBlue: #00374B;
    --cLalmostBlack: #161614;
    --cLgreyDark: #4B4B4B;
    --cLblackAlpha: #00000036;
    --cLgreyMid: #707070;
    --cLgoldBright: #E4B301;
    --cLyellowLime: #EAE819;



    --cLblueDeep: #00709A;
    --cLbluePrimary: #1473E6;
    --cLblueIce: #ECF2FF;


    --labelSize: 12vw;
    --pd:min(5rem,15vw);
}
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    font-weight: 300;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    color: var(--cLgreyDark);
    font-size: min(16px,4vw);
    font-family: 'Roboto', sans-serif;
    & * {
        margin-block: 0;
        box-sizing: border-box;
    }
    & [style*="--w"] {width: var(--w)}
    & .flex,
    & .row {
        display: flex;
        flex-wrap: wrap;
        &.align-items-center {align-items: center;}
        &.direction-row-reverse {flex-direction: row-reverse;}
        &.direction-column {
            flex-wrap: nowrap;
            flex-direction: column;
            row-gap: min(2rem, 7vw);
        }
        &:has(>:is(.full, .half)) {gap: min(1.4rem, 5vw) 10%;}
        & .full {flex: 1 1 100%;}
        & .half {flex: 1 1 max(300px, 40%);}
    }
    & :is(section, footer) {position: relative;}
    & [class^="container"]:not(:is([class*="leaflet"])) {
        margin-inline: auto;
        &.container {width: min(1056px, calc(100% - var(--pd)))}
        &.container-xl {width: min(1106px, calc(100% - var(--pd)))}
        &.container-xxl {width: min(1410px, calc(100% - var(--pd)))}
        &.container-xxxl {width: min(1780px, calc(100% - var(--pd)))}
        &.container-max {width: 100vw}
    }
    & [style*="--w:"] {width:var(--w);}
    /* text */
    & [class^="text"] {
        display: flex;
        flex-direction: column;
        row-gap: min(1rem, 5vw);
        &:not([style*="--w:"]) { width: 100%;}
        &.text-center {
            text-align: center;
            align-items: center
        }

        &.text-left {
            text-align: left;
            align-items: flex-start
        }

        &.text-right {
            text-align: right;
            align-items: flex-end
        }
    }
    & p[style*="text-align: center;"] {
       justify-content: center;
       & [class^=btn-]:not(:has( + *)) {
        margin-inline: auto;
       }
    }
    & p[style*="text-align: right;"] {
        justify-content: flex-end;
        & [class^=btn-]:not(:has( + *)) {
         margin-inline: auto 0;
        }
    }
    & a {
        color: inherit;
        text-decoration: none;

        &.overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            font-size: 0;
        }

        &:not(:is([class^=btn-],[class^=link-])):hover {color: var(--cLgreenLight)}
    }
    & p:has([class^=btn-]) {display: contents;}
    & p:has([class^=btn-]+[class^=btn-]) {
        display: flex;
        flex-wrap: wrap;
        gap: min(1rem, 5vw);
        align-items: center;
        &:is(.text-center p) {justify-content: center;}
    }
    & strong {font-weight: 700;}
    & ul {
        &:not([class]) {
            padding-left: 1rem;
        }
        &[class] {
            padding-left: 0;
            list-style: none;
            justify-content: flex-end;
            padding-top: 10px;
            &.puce-listing {
                display: flex;
                row-gap: min(1.3rem, 4vw);
                flex-direction: column;
                &>li {
                    position: relative;
                    padding-left: min(3rem, 8vw);
                    &::before {
                        position: absolute;
                        left: 0;
                        top: 50%;
                        width: 0;
                        height: 0;
                        content: '';
                        padding: min(1rem, 3vw);
                        transform: translateY(-50%);
                        background-color: var(--cLTtheme, var(--cLCyanBright));
                        -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/puce-list.png);
                        mask-image: url(assets/images/puce-list.png);

                    }
                }
            }
        }
    }
    & :is(h1, h2, h3, h4, h5, h6) {
        color: inherit;
        line-height: 1.3;
        font-weight: 700;
        color: var(--cLblue);
        text-transform: uppercase;
        font-family: 'Montserrat', sans-serif;
        &:is(h1) {font-size: min(53px, 6vw); }
        &:is(h2) {font-size: min(47px, 6vw);}
        &:is(h3) {font-size: min(33px, 6vw);}
        &:is(h4) {font-size: min(28px, 6vw); }
        &:is(h5) {font-size: min(22px, 5vw);}
        &:is(h6) {font-size: min(20px, 4.5vw);}
        & em {font-style: normal;}
        &:has(em) {line-height: 1;}
        & em:has(+br) {
            line-height: 1;
            display: inline-block;
        }
    }
    & .fs70 {font-size: min(70px, 7vw);}
    & .fs50 {font-size: min(50px, 6.8vw);}
    & .fs44 {font-size: min(44px, 6.6vw);}
    & .fs40 {font-size: min(35px, 6.6vw);}
    & .fs36 {font-size: min(36px, 6vw);}
    & .fs35 {font-size: min(35px, 6vw);}
    & .fs33 {font-size: min(33px, 6vw);}
    & .fs31 {font-size: min(31px, 5vw);}
    & .fs30 {font-size: min(30px, 5vw);}
    & .fs28 {font-size: min(28px, 5vw);}
    & .fs26 {font-size: min(26px, 5vw);}
    & .fs25 {font-size: min(25px, 4vw);}
    & .fs24 {font-size: min(24px, 4vw);}
    & .fs23 {font-size: min(23px, 5vw);}
    & .fs22 {font-size: min(22px, 4vw);}
    & .fs20 {font-size: min(20px, 4vw);}
    & .fs18 {font-size: min(18px, 4vw);}
    & .fs19 {font-size: min(19px, 4vw);}
    & .fs16 {font-size: min(16px, 3.7vw);}
    & .fs15 {font-size: min(15px, 3.7vw);}
    & .fs14 {font-size: min(14px, 3.7vw);}
    & .initial-text {text-transform: initial;}
    & .uppercase-text {text-transform: uppercase;}
    & .weight-300 {font-weight: 300;}
    & .weight-400 {font-weight: 400;}
    & .weight-500 {font-weight: 500;}
    & .weight-600 {font-weight: 600;}
    & .weight-700 {font-weight: 700;}
    & .weight-800 {font-weight: 800;}
    & .weight-900 {font-weight: 900;}
    & .roboto {font-family: 'Roboto', sans-serif;}
    & .montserrat {font-family: 'Montserrat', sans-serif;}
    & hr {
        width: 100%;
        border: none;
        display: block;
        border-bottom: 1px solid var(--cLgreySoft);
    }
    /* icn */
    & [style^="--icn"] {
        position: relative;
        display: flex;
        align-items: center;
        column-gap: min(10px, 4vw);

        &[style^="--icn-before"]::before,
        &[style^="--icn-after"]::after {
            position: relative;
            content: "";
            display: block;
            transition: initial;
            pointer-events: none;
            padding: min(.7rem, 3vw);
            background-color: currentcolor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-position: center;
            mask-position: center;
        }
        &.icn-xl::before,
        &.icn-xl::after {padding: min(1rem, 4vw);}
        &[style^="--icn-before"]::before {
            -webkit-mask-image: var(--icn-before);
            mask-image: var(--icn-before);
            
        }
        &[style^="--icn-after"]::after {
            -webkit-mask-image: var(--icn-after);
            mask-image: var(--icn-after);
        }

    }
    /* arrow */
    & .arrow {
        position: relative;
        height: 0;
        outline: 0;
        z-index: 1;
        font-size: 0;
        flex: 0 0 auto;
        cursor: pointer;
        max-width: 100%;
        overflow: hidden;
        width: max-content;
        border-radius: 3rem;
        transition: all .2s;
        color: var(--cLblue);
        display: inline-block;
        padding: min(1.375rem, 4vw);
        background-color: transparent;
        border: .165rem solid var(--cLblue);
        &.white {
            color: var(--cLwhite);
            border-color: var(--cLwhite);
            background-color: var(--cLwhite);
            &:hover {
                color: var(--cLwhite);
                background-color: var(--cLblue);
                border-color: var(--cLblue);
            }
        }
        &::after,
        &::before {
            position: absolute;
            content: "";
            inset: 17%;
            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 {
            translate: -100% 0;
            opacity: 0
        }
        &.slick-disabled {
            pointer-events: none;
            opacity: .2
        }
        &.arrow-xl {
            border: none;
            border-radius: 0;
            background-color: transparent;
            padding: min(1rem, 3vw) min(2.7rem, 6vw);
            &:hover {
                background-color: var(--cLblue);

                &::after,
                &::before {
                    color: var(--cLCyanBright);
                }
            }
            &::after,
            &::before {
                inset: 0%;
                -webkit-mask-image: url(assets/images/arrow-xl.svg);
                mask-image: url(assets/images/arrow-xl.svg);
            }
        }
        &.prev {transform: rotate(-180deg)}
        &:is(a:hover &,
        a.overlay:hover &,
        a.overlay:hover ~ &,
        a.overlay:hover ~ * &),
        &:hover {
            color: var(--cLwhite);
            background-color: var(--cLblue);
            border-color: var(--cLblue);
        }
        &: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 {
            translate: 0 0;
            opacity: 1
        }
    }
    /* btns */
    & .badge-new {
        font-size: 12px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
        color: var(--cLblueStrong);
        background-color: var(--cLblueIce);
    }
    & [class^=btn-] {
        position: relative;
        z-index: 1;
        outline: 0;
        display: flex;
        line-height: 1;
        max-width: 100%;
        cursor: pointer;
        font-weight: 700;
        width: max-content;
        text-align: center;
        border-radius: 2rem;
        align-items: center;
        transition: all .3s;
        font-size: min(14px,4vw);
        column-gap: min(10px, 4vw);
        border: .065rem solid transparent;
        font-family: 'Montserrat', sans-serif;
        padding: min(.8rem, 2.6vw) min(1.5rem, 6vw);
        & .wpcf7-spinner {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            margin: 0;
            transform: translate(-50%,-50%);
        }
        &:not(.initial-text) {text-transform: uppercase;}
        &.rad-8 {border-radius: 8px;}
        &.btn-cLwhite {
            color: var(--cLblueLight);
            border-color: var(--cLwhite);
            background-color: var(--cLwhite);
            &:is(a:hover &, a.overlay:hover &, a.overlay:hover ~ &, a.overlay:hover ~ * &),
            &:hover {
                color: var(--cLwhite);
                border-color: var(--cLblueLight);
                background-color: var(--cLblueLight);
            }
        }
        &.btn-cLblueStrong {
            color: var(--cLwhite);
            border-color: var(--cLblueStrong);
            background-color: var(--cLblueStrong);
            &:is(a:hover &, a.overlay:hover &, a.overlay:hover ~ &, a.overlay:hover ~ * &),
            &:hover {
                color: var(--cLalmostBlack);
                border-color: var(--cLblackAlpha);
                background-color: var(--cLblackAlpha);
            }
        }
        &.btn-cLred {
            color: var(--cLwhite);
            border-color: var(--cLred);
            background-color: var(--cLred);
            &:is(a:hover &, a.overlay:hover &, a.overlay:hover ~ &, a.overlay:hover ~ * &),
            &:hover {
                color: var(--cLred);
                border-color: var(--cLblack);
                background-color: var(--cLblack);
            }
        }
        &.btn-cLblue {
            color: var(--cLwhite);
            border-color: var(--cLblue);
            background-color: var(--cLblue);
            &:is(a:hover &, a.overlay:hover &, a.overlay:hover ~ &, a.overlay:hover ~ * &),
            &:hover {
                color: var(--cLblue);
                border-color: var(--cLdeepBlue);
                background-color: var(--cLdeepBlue);
            }
        }
        &.btn-cLgreenLight {
            color: var(--cLwhite);
            border-color: var(--cLgreenLight);
            background-color: var(--cLgreenLight);
            &:is(a:hover &, a.overlay:hover &, a.overlay:hover ~ &, a.overlay:hover ~ * &),
            &:hover {
                color: var(--cLgreenLight);
                border-color: var(--cLdeepBlue);
                background-color: var(--cLdeepBlue);
            }
        }
        & input {
            padding: 0;
            border: none;
            outline: none;
            color: inherit;
            font-size: inherit;
            font-family: inherit;
            pointer-events: none;
            font-weight: inherit;
            background: transparent;
        }
        & .arrow {
            color: currentColor;
            padding: min(0.7rem, 4vw);
            border-color: transparent;
            background-color: transparent;
            &::after,
            &::before {inset: 0;}
        }
        &:hover .arrow {color: currentColor;}
    }
    /* inputs */
    & input {
        &:not(:is([type="radio"], [type="checkbox"], [type="submit"], [type=image], [type=file])) {
            width: 100%;
            line-height: 1;
        }
        &: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(--cLblack);
            &[type="checkbox"] { box-shadow: inset 0 0 0 1px var(--cLblack) }
            &[type="radio"]:not(:checked) {
                appearance: none;
                border-radius: 2rem;
                border: 1px solid var(--cLblack)
            }
        }
        &[type="date"] {
            position: relative;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none
        }
        &.gform_button[type="submit"] {
            border: none;
            outline: none;
            border-radius: 5px;
            color: currentColor;
            color: currentColor;
            padding: min(0.7rem, 5vw);
            text-transform: uppercase;
            background-color: transparent;
            border: 1px solid currentColor;
        }
    }
    & input:not(:is([type="radio"], [type="checkbox"], [type="button"], [type="submit"], [type="image"], [type="file"])),
    & select,
    & textarea {
        border: none;
        outline: none;
        border-radius: 0;
        font-size: inherit;
        height: min(50px, 13vw);
        padding: min(1rem, 2.5vw) 0;
        background-color: transparent;
        border-bottom: 1px solid var(--cLblack);
        &:is([multiple="multiple"]) {height: auto}
        &::-webkit-input-placeholder {
            font-weight: 400;
            text-align: left;
            font-style: normal;
            color: currentColor;
        }
        &::-moz-placeholder {
            font-weight: 400;
            text-align: left;
            font-style: normal;
            color: currentColor;
        }
        &::-ms-input-placeholder {
            font-weight: 400;
            text-align: left;
            font-style: normal;
            color: currentColor;
        }
        &::placeholder {
            font-weight: 400;
            text-align: left;
            font-style: normal;
            color: currentColor;
        }
        &:is(textarea) {
            width: 100%;
            resize: none;
            font-family: inherit;
            height: min(200px, 30vw) !important
        }
    }
    & label:not([class]):has(> input[type="radio"]),
    .accept {
        position: relative;
        display: flex;
        column-gap: min(1rem, 3vw);
    }
    & .accept {
        font-weight: 400;
        line-height: 1.5;
        font-size: min(14px, 4vws);
    }
    & :is(.label-form, label:not(:is([class], :has(input[type="radio"])))) {
        font-weight: 500;
        font-size: min(20px, 4vw);
        & span {
            font-weight: 400;
            font-size: min(20px, 3.5vw);
        }
    }
    /* Bg */
    &.bg-cLblue,
    & .bg-cLblue {
        color: var(--cLwhite);
        background-color: var(--cLblue);
    }
    &.bg-cLmintNeon,
    & .bg-cLmintNeon {
        color: var(--cLwhite);
        background-color: var(--cLmintNeon);
    }
    &.bg-cLgoldBright,
    & .bg-cLgoldBright {
        color: var(--cLwhite);
        background-color: var(--cLgoldBright);
    }
    &.bg-cLyellowLime,
    & .bg-cLyellowLime {
        color: inherit;
        background-color: var(--cLyellowLime);
    }
    &.bg-cLgreySoft,
    & .bg-cLgreySoft {
        color: var(--cLdarkGrey);
        background-color: var(--cLgreySoft);
    }
    &.bg-cLlightGrey,
    & .bg-cLlightGrey {
        color: var(--cLdarkGrey);
        background-color: var(--cLlightGrey);
    }
    &.bg-cLlightGrey-50,
    & .bg-cLlightGrey-50 {
        background: linear-gradient(0deg,var(--cLlightGrey) 0%, var(--cLlightGrey) 50%, transparent 50%);
    }
    &.bg-transparent-cLlightGrey-50,
    & .bg-transparent-cLlightGrey-50 {
        background: linear-gradient(0deg, transparent 0%, transparent 50%, var(--cLlightGrey) 50%);
    }
    & .montserrat {font-family: 'Montserrat',sans-serif;}
    & .cLblack {color: var(--cLblack);}
    & .cLgreen {color: var(--cLgreen);}
    & .cLgreenLight {color: var(--cLgreenLight);}
    & .cLblue {color: var(--cLblue);}
    & .cLgreyMid {color: var(--cLgreyMid);}
    & .cLblueLight {color: var(--cLblueLight);}
    & .cLblueSlate {color: var(--cLblueSlate);}
    & .cLbluePrimary {color: var(--cLbluePrimary);}
    & .cLblueStrong {color: var(--cLblueStrong);}
    & .cliping {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        clip-path: inset(0rem round 0rem);
        & img {
            position: fixed;
            inset: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
            filter: brightness(.8);
        }
        & video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &~* {
            z-index: 1;
            position: relative;
            color: var(--cLwhite);
            & :is(h1, h2, h3, h4, h5, h6) {color: inherit;}
        }
    }
    & picture {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
        & img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            max-width: inherit;
        }
    }
    & .rs {
        display: flex;
        flex-wrap: wrap;
        gap: min(.7rem, 4vw);
        & [style^="--icn"] {
            border-radius: 5px;
            padding: min(0.7rem, 5vw);
            color: var(--cLCyanBright);
            text-transform: uppercase;
            background-color: transparent;
            border: 1px solid var(--cLCyanBright);
            &::before {
                scale: .9;
                padding: min(13px, 5vw);
            }

            &:hover {
                color: var(--cLDeepNavy);
                background-color: var(--cLCyanBright);
            }
        }
        & a:has( [style^="--icn"]) {
            display: flex;
            font-weight: 700;
            align-items: center;
            font-size: min(20px,4vw);
            color: var(--cLblueLight);
            text-transform: uppercase;
            column-gap: min(1rem,5vw);
            font-family: 'Montserrat',sans-serif;
            & [style^="--icn"] {
                border-radius: 2rem;
                color: var(--cLwhite);
                background-color: #3b5998;
            }
        }
    }
    & .mask-text-image {
        background: var(--img) no-repeat center center fixed;
        background-size: cover;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        transform: initial !important;
    }
    & .wp-slider {
        position: relative;
        width: 100%;
    }
    & .ct-slider,
    & .listing {
        position: relative;
        display: flex;
        column-gap: 2%;
    }
    & .slick-list {
        position: relative;
        overflow: hidden;
        width: 100%;
        & .slick-track {
            display: flex;
            flex-wrap: nowrap;
            will-change: transform;
            & .slick-slide {
                flex: 0 0 auto;
            }
        }
    }
    & .swiper {
        position: relative;
        width: 100%;
        overflow: hidden;
        & .swiper-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            box-sizing: content-box;
            transition-property: transform;
            transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
            & .swiper-slide {
                height: 100%;
                display: block;
                flex-shrink: 0;
                transition-property: transform;
            }
        }
        &.swiper-android .swiper-slide,
        &.swiper-ios .swiper-slide,
        & .swiper-wrapper {
            transform: translate3d(0px, 0, 0);
        }
        &.swiper-backface-hidden .swiper-slide {
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    }
    section:is(.bg-cLlightGrey-50 + .bg-cLlightGrey, .bg-cLlightGrey + .bg-cLlightGrey)>[class^="container"]:not(*~*),
    section:not(:is([class*=bg-],.sc9)) + .bg-cLlightGrey-50>[class^="container"]:not(*~*),
    section:not(:is([class*=bg-],.sc9)) + :is(section,footer):not(:is([class*=bg-]))>[class^="container"]:not(*~*) {padding-top: 0;}
    /* header */
    .link-green {
        display: grid;
        will-change: color;
        transition: all .3s;
        align-content: center;
        color: var(--cLwhite);
        border-radius: 0 0 2rem 0;
        padding: min(1rem,3vw) min(1.5rem,5vw);
        background-color: var(--cLgreenLight);
        &:hover {
            color: var(--cLblue);
            background-color: var(--cLdeepBlue);
        }
    }
    & .link {
        display: flex;
        column-gap: 10px;
        align-items: center;
        &:hover {color: var(--cLblue);}
        &:has( .arrow) {text-transform: uppercase;}
    }
    & .links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    & .annuaire {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        row-gap: min(3.5rem,6vw);
        background-color: var(--cLwhite);
        padding: min(50px,5vw) min(80px,5vw);
         & .head {
            display: flex;
            line-height: 1;
            flex-wrap: wrap;
            align-items: center;
            row-gap: min(2rem,5vw);
            width: min(700px,100%);
            & .icn {
                display: flex;
                align-items: center;
                gap: min(1rem,5vw) 5%;
                flex: 1 1 max(300px,40%);
                & [style^="--icn"] {
                    overflow: hidden;
                    flex: 0 0 auto;
                    border-radius: 3rem;
                    border: 2px solid currentColor;
                    &::before {
                        scale: .5;
                        padding: min(2.3rem, 9vw);
                    }
                }
            }
            & .fs31 {
                display: flex;
                flex: 1 1 max(300px,40%);
                @media screen and (width>1200px) {
                    &::before {
                        position: relative;
                        width: 1px;
                        content: '';
                        height: 4rem;
                        margin-inline: min(2rem,5vw);
                        background-color: currentColor;
                    }
                }
            }
        }
        & .nav {
            position: relative;
            & > li {
                padding-block: min(2rem,5vw);
                border-top: 1px solid var(--cLblackAlpha);
                & .links {
                    & > p:not(:first-child) {
                        display: flex;
                        @media screen and (width>1024px) {
                            &::before {
                                position: relative;
                                width: 1px;
                                content: '';
                                height: min(2rem,10vw);
                                margin: auto min(2rem,5vw);
                                background-color: currentColor;
                            }
                        }
                    }
                }
                &:last-child {border-bottom: 1px solid var(--cLblackAlpha);}
            }
        }
    }
    & .historique {
        display: flex;
        flex-wrap: wrap;
        min-height: 338px;
        row-gap: min(1rem);
        background-color: var(--cLwhite);
        padding: min(50px,5vw) min(45px,5vw);
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
        & .left {
           display: flex;
           flex-direction: column;
           justify-content: center;
           flex: 1 1 max(200px,20%);
           padding-inline: min(35px,5vw);
           & [style^="--icn"] {
               margin-inline: auto;
               color: var(--cLblueLight);
               &::before {padding: min(3rem, 10vw);}
           }
        }
        & .center {
            flex: 1 1 max(300px,45%);
            padding: min(2rem,5vw) min(35px,5vw);
            & .link {
                display: flex;
                align-items: center;
                column-gap: min(1rem,5vw);
                text-transform: uppercase;
            }
            @media screen and (width<700px) {
                border-block: 1px solid var(--cLblackAlpha);

            }
            @media screen and (width>=1200px) {
                border-inline: 1px solid var(--cLblackAlpha);
            }
        }
        & .right {
            justify-content: center;
            flex: 1 1 max(300px,25%);
            padding-inline: min(35px,5vw);
        }
    }
    & .gouvernance {
        display: flex;
        flex-wrap: wrap;
        min-height: 338px;
        row-gap: min(1rem,5vw);
        background-color: var(--cLwhite);
        padding: min(50px,5vw) min(45px,5vw);
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
        & .left {
           display: flex;
           /* text-align: center; */
           flex-direction: column;
           justify-content: center;
           flex: 1 1 max(200px,20%);
           padding-inline: min(15px,5vw);
           & [style^="--icn"] {
               margin-inline: auto;
               color: var(--cLblueLight);
               &::before {padding: min(3rem, 10vw);}
           }
        }
        & .center {
            /* font-weight: 700;
            font-size: min(24px,4vw); */
            flex: 1 1 max(300px,45%);
            padding: min(2rem,5vw) min(80px,5vw);
            & .link {
                display: flex;
                align-items: center;
                column-gap: min(1rem,5vw);
                text-transform: uppercase;
            }
            @media screen and (width<700px) {
                border-block: 1px solid var(--cLblackAlpha);
            }
            @media screen and (width>=1200px) {
                border-inline: 1px solid var(--cLblackAlpha);
            }
        }
        & .right {
            justify-content: center;
            flex: 1 1 max(300px,25%);
            padding-inline: min(35px,5vw);
            & picture {
                margin-inline: auto;
                width: min(300px,100%);
                & img { object-fit: contain; }
            }
        }
    }
    & .square-image {
        overflow: hidden;
        aspect-ratio: 1/1;
        width: min(138px,100%);
        border-radius: min(1.2rem,5vw);
    }
    & .square-icone {
        position: relative;
        display: grid;
        aspect-ratio: 1/1;
        align-content: center;
        color: var(--cLwhite);
        width: min(150px,100%);
        border-radius: min(12px,3vw);
        background-color: var(--cLgreenSoft);
        &[style^="--icn-before"]::before {
            position: absolute;
            inset: 0;
            scale: .6;
        }
    }
    & .grid-blocks {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: min(2rem,8vw) 3%;
        & .col-card {
            position: relative;
            display: grid;
            flex: 1 1 100%;
            align-items: center;
            gap: min(2rem,8vw) 0;
            background-color: var(--cLwhite);
            border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            & .text {
                padding: min(34px,5vw);
                & p:not([class]) {
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;  
                    overflow: hidden;
                }
            }
        }
        & .col2-text-card {
            position: relative;
            display: grid;
            gap: min(2rem,8vw) 0;
            padding: min(34px,5vw);
            background-color: var(--cLwhite);
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
        }
        & .text-card {
            position: relative;
            flex: 1;
            padding: min(34px,5vw);
            background-color: var(--cLwhite);
            border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
            & .text {
                height: 100%;
                justify-content: space-between;
                & p {
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;  
                    overflow: hidden;
                }
                & .flex {
                    align-items: center;
                    & .next {margin-left: auto;}
                }
            }
        }
        & article:has(picture) {
            display: grid;
            align-content: center;
            padding: min(34px,5vw);
            background-color: var(--cLwhite);
            border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
            & picture {
                height: min(270px,50vw);
                & img {
                    object-fit: contain;
                }
            }
        }
        & .xxl {flex: 1 1 max(300px,40%);}
        & .xl {flex: 1 1 max(300px,28%);}
    }
    & .montfort {
        position: relative;
        display: flex;
        /*flex-wrap: wrap;*/
        min-height: 338px;
        gap: min(2rem,5vw) 5%;
        row-gap: min(1rem,5vw);
        background-color: var(--cLwhite);
        padding: min(50px,5vw) min(45px,5vw);
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
        & .left {
            flex: 1 1 max(150px,10%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            @media screen and (width<700px) {
                padding-bottom: min(35px,5vw);
                border-bottom: 1px solid var(--cLblackAlpha);
            }
            @media screen and (width>=1000px) {
                padding-inline: min(35px,5vw);
                border-right: 1px solid var(--cLblackAlpha);
            }
        }
        & .text {
            justify-content: center;
            flex: 1 1 max(300px,55%);
            & .flex {
                & .link {margin-left: auto;}
            }
            @media screen and (width>=1000px) {
                padding-inline: min(35px,5vw);
            }
        }
        &:has( .text + .text) {
            &  .text {
                padding-inline: 0;
                flex: 1 1 max(300px,20%);
                justify-content: flex-start;
                & p {
                    /* display: -webkit-box;
                    -webkit-line-clamp: 6;
                    -webkit-box-orient: vertical;  
                    overflow: hidden; */
                }
            }
        }
    }
    & .montfort-cards {
        display: flex;
        gap: min(2rem,5vw) 2%;
        flex-wrap: wrap;
        & > li {
            position: relative;
            flex: 1 1 max(150px,5%);
            height: min(377px,75vw);
            background-color: var(--cLwhite);
            border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
            & .text-center {
                position: relative;
                height: 100%;
                justify-content: space-between;
                padding: min(3rem,7vw) min(1.5rem,5vw) min(1.5rem,5vw);
            }
            &:has(>picture) {
                flex: 1 1 max(300px,37%);
                & picture {
                    position: relative;
                    border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
                }
            }
        }
    }
    & .card {
        position: relative;
        overflow: hidden;
        border-radius: min(1rem,5vw);
        background-color: var(--cLwhite);
        & picture {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            height: min(377px,75vw);
            padding: min(1rem,5vw) min(.7rem,5vw);
            & img {
                position: absolute;
                inset: 0;
                scale: 1.2;
                translate: 0 -10%;
                transition: all .3s;
                &:is(.card:hover &) {
                    scale: 1;
                    translate: 0 0%;
                }
            }
            & [class^=btn-] {
                opacity: 0;
                translate: 0 -1rem;
                visibility: hidden;
                transition: all .3s;
                padding-inline: min(1rem,5vw);
                &:is(.card:hover &,.card.not-hover &) {
                    opacity: 1;
                    translate: 0 0%;
                    visibility: visible;
                }
            }
        }
        & [class^="text"] {
            position: absolute;
            inset: 0;
            transition: all .3s;
            background-color: var(--cLwhite);
            padding: min(50%,15vw) min(2rem,5vw) min(2rem,10vw);
            /* &:is(.card.not-hover &) {display: none;} */
            & > *:not(.arrow) {transition: inherit;}
            & [style^="--icn"] {
                &::before {
                    -webkit-mask-position: center bottom;
                    mask-position: center bottom;
                    padding: min(3rem,10vw);
                }
            }
            & .arrow {
                margin-top: auto;
                &:is(.card.not-hover &) {
                    color: var(--cLwhite);
                    border-color: var(--cLblue);
                    background-color: var(--cLblue);
                }
            }
            &:is(.card:hover &,.card.not-hover &) {
                background-color: transparent;
                & > *:not(.arrow) {
                    opacity: 0;
                    visibility: hidden;
                    transform: translateY(-10%);
                }
            }
        }
    }
    & .wrapper-activity {
        display: flex;
        column-gap: 2%;
        & .activity {
            flex: 0 0 auto;
            width: min(352px,70vw);
        }
    }
    & .activity {
        position: relative;
        overflow: hidden;
        height: min(612px,100vw);
        border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
        & picture {
            & img {
                scale: 1.02;
                transition: all .3s;
                &:is(.activity:hover &) {scale: 1;}
            }
        }
        & .text-center {
            position: absolute;
            top: 50%;
            left: 50%;
            color: var(--cLwhite);
            justify-content: center;
            transform: translate(-50%, -50%);
            padding: min(50px,5vw) min(45px,5vw);
        }
        & .overlay {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: min(50px,5vw) min(45px,5vw);
        }
    }
    & .article {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        background-color: var(--cLwhite);
        & picture {
            height: min(300px,50vw);
            flex: 1 1 max(241px,30%);
            @media screen and (width>=1000px) {
                height: inherit;
            }
        }
        &  .body {
            margin-block: auto;
            padding: min(3rem,5vw);
            flex: 1 1 max(300px,60%);
            & .text {
                & p:not([class]) {
                    display: -webkit-box;
                    -webkit-line-clamp: 7;
                    -webkit-box-orient: vertical;  
                    overflow: hidden;
                }
            }
        }
    }
    & .wrapper-actus {
        display: grid;
        justify-content: center;
        gap: min(30px, 5vw) min(27px,4vw);
        grid-template-columns: repeat(auto-fit, minmax(min(400px,100%), 1fr));
        & .actus {width: 100%;}
    }
    & .actus {
        position: relative;
        width: min(300px,100%);
        background-color: var(--cLwhite);
        border-radius: min(24px,5vw) 0px min(24px,5vw) min(24px,5vw);
        & .overlay {
            display: flex;
            padding: min(10px,5vw);
            justify-content: flex-end;
            & .arrow {rotate: -45deg;}
        }
        & picture {
            height: min(250px,50vw);
            & img {
                scale: 1.04;
                transition: all .3s;
                &:is(.actus:hover &) {scale: 1;}
            }
        }
        & .text {
            padding: min(20px,5vw) min(30px,5vw);
            & .title {
                position: relative;
                &::after {
                    position: relative;
                    content: '';
                    width: 50px;
                    height: 4px;
                    display: block;
                    background-color: var(--cLblue);
                }
            }
            & p {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
        }
    }
    & article:not([class]) {
        position: relative;
        color: var(--cLblueLight);
        background-color: var(--cLwhite);
        & .wrapper-picture {
            position: relative;
            background-color: var(--cLgreenLight);
            & picture {
                &:is(.rotate &) {
                    /*rotate: -3deg;
                    inset: 1.5rem 1rem -1rem;
                    width: calc(100% - (min(2rem,10vw)));
                    clip-path: inset(0 round min(1rem,5vw));
                    & img {object-fit: contain;}*/
                }
            }
        }
        & .body {
            position: relative;
            padding: min(2rem,10vw);
            &:is(.wrapper-picture.rotate + &) {margin-top: 2.5rem;}
        }
    }
    & .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        & > li:not(:first-child) {
            position: relative;
            display: flex;
            align-items: center;
            color: var(--cLmediumGrey);
            font-size: min(14px,3.3vw);
            &::before {
                position: relative;
                content: '/';
                display: block;
                margin-inline: 5px;
            }
            & a {
                display: block;
                line-height: 1;
            }
        }
    }
    & .accordion {
        & .accordion-item {
            display: grid;
            transition: all .3s;
            grid-template-rows: 3em 0fr;
            &.is-open {grid-template-rows: 3em 1fr;}
            & .accordion-head {
                display: flex;
                cursor: pointer;
                font-weight: 700;
                align-items: center;
                font-size: min(22px,5vw);
                color: var(--cLblueLight);
                justify-content: space-between;
                padding-block: min(0.6rem,3vw);
                font-family: 'Montserrat',sans-serif;
                border-bottom: 1px solid var(--cLgreyMid);
                & img {
                    height: 100%;
                    flex: 0 0 auto;
                    display: block;
                    object-fit: contain;
                }
                & .plus {
                    width: .8rem;
                    height: .8rem;
                    display: grid;
                    display: block;
                    flex: 0 0 auto;
                    align-content: center;
                    &::before,&::after {
                        position: relative;
                        z-index: 1;
                        content: '';
                        height: 3px;
                        width: 100%;
                        display: block;
                        background-color: var(--cLblueLight);
                    }
                    &::before {
                        rotate: -90deg;
                        margin-bottom: -3px;
                        transition: all .3s;
                    }
                    &:is(.accordion-item.is-open &)::before {rotate: 0deg;}
                }
            }
            & .accordion-body {
                overflow: hidden;
                & [class^="text"] {padding-block: min(1rem,4vw);}
            }
        }
    }
    & .icon[style^="--icn"] {
        position: relative;
        display: grid;
        width: min(42px,8vw);
        height: min(42px,8vw);
        align-content: center;
        border-radius: min(8px,5vw);
        background-color: var(--cLgreySoft);
        &::before {
            position: absolute !important;
            inset: 24%;
            padding: 0 !important;
        }
    }
    & .pill-info {
        display: block;
        font-size: 13px;
        font-weight: 700;
        padding: min(10px,15px,5vw);
        border-radius: min(8px,5vw);
        background-color: var(--cLgreySoft);
    }
    & header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1000;
        background-color: var(--cLwhite);
        &:is(body:not(.home) &) {border-bottom: 1px solid var(--cLgreySoft);}
        & select {
            border: none;
            height: auto;
            padding-block: 0;
            color: currentColor;
        }
        & .top {
            position: relative;
            padding-block: 5px;
            & .row {
                & .left,
                & .right {
                    flex: 1 1 max(260px,20%);
                    & .nav {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        & li:not(:first-child) {
                            position: relative;
                            display: flex;
                            &::before {
                                position: relative;
                                width: 1px;
                                content: '';
                                line-height: 1;
                                display: block;
                                height: inherit;
                                margin-inline: min(1rem,5vw);
                                background-color: currentColor;
                            }
                        }
                    }
                }
                & .center {
                    text-align: center;
                    flex: 1 1 max(260px,50%);
                }
            }
        }
        & .bar {
            & .nav {
                text-transform: uppercase;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                & > li {
                    display: grid;
                    & [style^="--icn"] {
                        padding-inline: min(.4rem,3vw) min(1.4rem,5vw);
                        &::before {padding: min(1.1rem, 5vw);}
                        &::after {
                            position: absolute;
                            left: 0;
                            width: 1px;
                            content: '';
                            height: min(1.5rem,80%);
                            background-color: var(--cLgreyDark);
                        }
                    }
                    & > span {
                        display: block;
                        color: var(--cLwhite);
                        padding: 4px min(2rem,5vw) 0;
                        background-color: var(--cLblueDeep);
                        &:not(:first-child) {border-top: 1px solid currentColor;}
                    }
                }
            }
        }
        & .body {
            & .row {
                column-gap: 5%;
                align-items: center;
                & .left {
                    & .logo {
                        display: block;
                        overflow: hidden;
                        transition: all .3s;
                        will-change: transform;
                        width: min(187px, 20vw);
                        border-radius: 0 0 min(3rem,5vw) 0;
                        & img {
                            width: 100%;
                            height: 100%;
                            display: block;
                            max-width: inherit;
                            object-fit: contain;
                        }
                        @media screen and (width<600px) {
                            & {margin-left: -8vw;}
                        }
                        @media screen and (width>=1200px) {
                            & {margin-top: -3.6rem;}
                        }
                    }
                }
                & .right {
                    flex: 1;
                    & .ct-nav {
                        & nav {
                            & .primary {
                                position: relative;
                                display: flex;
                                align-items: center;
                                gap: 10px min(1rem,5vw);
                                justify-content: space-between;
                                & li {
                                    position: relative;
                                    &:has(>.onglet) {
                                        position: relative;
                                        display: grid;
                                        text-align: center;
                                        transition: all .3s;
                                        grid-template-rows: 1.3em 0fr;
                                        &.open-sub-menu {grid-template-rows: 1.3em 1fr;}
                                        & .onglet {
                                            position: absolute;
                                            top: 2px;
                                            right: 0;
                                            width: 20px;
                                            height: 20px;
                                            display: block;
                                            flex: 0 0 auto;
                                            transition: all .5s;
                                            &:is(.open-sub-menu > &) {rotate: -180deg;} 
                                            &::before {
                                                position: absolute;
                                                inset: 0;
                                                content: '';
                                                background-color: currentcolor;
                                                -webkit-mask-repeat: no-repeat;
                                                mask-repeat: no-repeat;
                                                -webkit-mask-size: contain;
                                                mask-size: contain;
                                                -webkit-mask-position: center;
                                                mask-position: center;
                                                -webkit-mask-image: url(assets/images/arrow-down.svg);
                                                mask-image: url(assets/images/arrow-down.svg);
                                            }
                                            @media screen and (width>=1200px) {
                                                & {
                                                    position: relative;
                                                }
                                            }
                                        }
                                        & .sub-menu {
                                            display: flex;
                                            overflow: hidden;
                                            flex-direction: column;
                                            row-gap: min(.3rem, 3vw);
                                            @media screen and (width>=1200px) {
                                                & {
                                                    overflow: visible;
                                                }
                                            }
                                        }
                                        @media screen and (width>=1200px) {
                                            & {
                                                display: flex;
                                                column-gap: 10px;
                                            }
                                        }
                                    }
                                }
                                @media screen and (width>=1200px) {
                                    & .sub-menu {
                                        position: absolute;
                                        top: 100%;
                                        left: 50%;
                                        opacity: 0;
                                        z-index: 2;
                                        visibility: hidden;
                                        will-change: opacity;
                                        color: var(--cLwhite);
                                        width: min(300px,70vw);
                                        transform: translateX(-50%);
                                        padding-inline: min(1rem,5vw);
                                        background-color: var(--cLdeepBlue);
                                        & li {
                                            & a {
                                                width: 100%;
                                                display: inline-block;
                                                padding-block: min(1rem,4vw);
                                            }
                                            &:not(:first-child) {border-top: 1px solid var(--cLblueDeep);}
                                            & .sub-menu {
                                                top: 0;
                                                left: 100%;
                                                transform: inherit;
                                            }
                                        }
                                        &:is(li:hover > &) {
                                            opacity: 1;
                                            visibility: visible;
                                        }
                                    }
                                }
                                @media screen and (width<1200px) {
                                    & {padding-block: min(5rem,10vw) min(2rem,5vw);}
                                }
                            }
                        }
                        @media screen and (width<1200px) {
                            & {
                                position: fixed;
                                inset: 0;
                                opacity: 0;
                                z-index: 1;
                                visibility: hidden;
                                transition: all .3s;
                                & nav {
                                    position: relative;
                                    height: 100%;
                                    width: min(600px,100%);
                                    background-color: var(--cLwhite);
                                    & .primary {
                                        flex-direction: column;
                                    }
                                }
                                &:is(header.nav-is-open &) {
                                    opacity: 1;
                                    visibility: visible;
                                }
                            }
                        }
                    }
                    & .nav {
                        position: relative;
                        display: flex;
                        align-items: center;
                        column-gap: min(1rem,4vw);
                        justify-content: flex-end;
                        & .user {
                            position: relative;
                            border-radius: 2rem;
                            color: var(--cLwhite);
                            padding: min(2rem,5vw);
                            background-color: var(--cLblue);
                            &::before {
                                position: absolute;
                                inset: 20%;
                            }
                        }
                    }
                }
            }
        }
        & .open-nav {
            position: relative;
            z-index: 2;
            height: 28px;
            row-gap: 8px;
            display: flex;
            transition: .2s;
            cursor: pointer;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            color: var(--cLblueLight);
            &:is(header.nav-is-open .open-nav) {
                row-gap: 0;
                transform: rotate(45deg);
            }
            & span {
                width: 1.8rem;
                height: .15rem;
                line-height: 0;
                transition: .3s;
                border-radius: 1rem;
                pointer-events: none;
                background: currentColor;
                transform-origin: 55% center;
                &:is(header.nav-is-open span:first-child) {
                    transform: translate(-.1rem, .2rem) rotate(90deg);
                }
                &:is(header.nav-is-open span:nth-child(2)) {
                    display: none;
                }
            }
        }
        @media screen and (width>=1200px) {
            & {top: -5.7rem;}
        }
    }
    & .scbreadcrumb {
        & [class^="container"] {
            padding-block: min(3rem,5vw);
        }
    }
    & .sc1 {
        & [class^="container"] {
            padding-block: min(6rem,10vw);
            & .wrapper-text {
                position: relative;
                z-index: 1;
                overflow: hidden;
                padding: min(2.5rem,5vw);
                border-radius: min(2rem,5vw);
                &::before {
                    position: absolute;
                    inset: 0;
                    content: '';
                    z-index: -1;
                    opacity: 0.71;
                    pointer-events: none;
                    /*background-color: var(--cLblue);*/
                }
                & [class^="text"] {
                    width: min(665px,100%);
                    font-size: min(35px,4vw);
                    font-family: 'Montserrat',sans-serif;
                }
            }
        }
    }
    & .sc2 {
        & [class^="container"] {
            padding-block: min(5rem,10vw);
            & > .row {
                gap: min(2rem,5vw) 3%;
                & .left {
                    flex: 1 1 max(350px,55%);
                    & .grid {
                        display: grid;
                        gap: min(2rem,8vw) 3.5%;
                        grid-template-columns: repeat(auto-fit, minmax(min(200px,30vw), 1fr));
                    }
                }
                & .right {
                    flex: 1 1 max(350px,35%);
                    & .row {
                        height: 100%;
                        & article:not([class]) {
                            & .accordion {
                                margin-block: min(1rem,5vw);
                            }
                        }
                        @media screen and (width>1200px) {
                            & > *:last-child {margin-top: auto;}
                        }
                    }
                }
            }
        }
    }
    & .sc3 {
        & [class^="container"] {
            padding-block: min(6rem,10vw);
            & .row {
                align-items: center;
                gap: min(2rem,5vw) 5%;
                & > picture {
                    height: min(319px,60vw);
                    flex: 1 1 max(300px,40%);
                    border-radius: min(12px,5vw);
                }
                & > .text {flex: 1 1 max(300px,40%);}
            }
        }
    }
    & .sc4 {
        & [class^="container"] {
            padding-block: min(5rem,10vw);
        }
    }
    & .sc5 {
        & [class^="container"] {
            padding-block: min(6rem,10vw);
            & .wrapper-text {
                position: relative;
                z-index: 1;
                overflow: hidden;
                padding: min(2.5rem,5vw);
                border-radius: min(2rem,5vw);
                &::before {
                    position: absolute;
                    inset: 0;
                    content: '';
                    z-index: -1;
                    opacity: 0.71;
                    pointer-events: none;
                    background-color: var(--cLblue);
                }
                & [class^="text"] {
                    font-size: min(35px,4vw);
                    font-family: 'Montserrat',sans-serif;
                }
            }
        }
    }
    & .sc6 {
        & [class^="container"] {
            padding-block: min(6rem,10vw);
            & picture.image {border-radius: min(43px,5vw);}
            & .flex-blocks {
                gap: min(50px,5vw);
                display: flex;
                flex-wrap: wrap;
                & .block {
                    padding: min(60px,10vw);
                    flex: 1 1 max(300px,40%);
                    border-radius: min(42px,5vw);
                    background-color: var(--cLwhite);
                    &.full {flex: 1 1 100%;}
                    & .text-center {
                        height: 100%;
                        & .arrow {margin-top: auto;}
                    }
                    & picture {
                        display: grid;
                        aspect-ratio: 1/1;
                        align-content: center;
                        width: min(138px,100%);
                    }
                    & .flex {
                        row-gap: min(20px,5vw);
                        & > img {
                            object-fit: contain;
                            height: min(72px,15vw);
                            width: miin(120px,100%);
                        }
                        & > [class^="btn"] {
                            margin-inline: auto;
                            width: min(300px,100%);
                            justify-content: center;
                            padding-block: min(16px,5vw);
                        }
                    }
                } 
            }
        }
    }
    & .sc7 {
        overflow: hidden;
        & .icon-title {
            display: flex;
            align-items: center;
            column-gap: min(10px,5vw);
            & picture {
                border-radius: 50%;
                width: min(74px,15vw);
                height: min(74px,15vw);
            }
        }
        & .logos {
            display: flex;
            flex-wrap: wrap;
            gap: min(20px,5vw) 5%;
            & li {
                overflow: hidden;
                width: min(310px,100%);
                height: min(163px,40vw);
                border-radius: min(24px,5vw);
                box-shadow: 0 0 1rem var(--cLblackAlpha);
                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    object-position: center;
                } 
            }
        }
        & [class^="container"] {
            padding-block: min(6rem,10vw);
            & .wrapper-activity {
                position: relative;
                width: 100vw;
                overflow-x: scroll;
                margin-left: -7.5vw;
                padding-inline: 7.5vw;
                scrollbar-width: none;
                scroll-behavior: smooth;
                -ms-overflow-style: none;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                scrollbar-color: transparent transparent;
                & > li {
                    scroll-snap-align: center;
                }
                @media screen and (width>1200px) {
                    & {
                        width: 100%;
                        margin-left: 0;
                        padding-inline: 0;
                    }
                }
            }
        }
    }
    & .sc8 {
        & [class^="container"] {
            padding-block: min(2rem,10vw);
            & .job-list-header {
                position: sticky;
                top: 129px;
                z-index: 2;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                padding-block: 10px;
                font-size: min(13px,3.5vw);
                background-color: var(--cLwhite);
                & > p {
                    flex: 1 1 max(200px,40%);
                }
                & .sort-info {
                    display: flex;
                    row-gap: 10px;
                    align-items: flex-end;
                    flex-direction: column;
                    flex: 1 1 max(200px,40%);
                    & .info {
                        width: 15px;
                        height: 15px;
                        display: grid;
                        line-height: 1;
                        cursor: pointer;
                        font-size: 12px;
                        text-align: center;
                        border-radius: 2rem;
                        color:var(--cLwhite);
                        align-content: center;
                        background: var(--cLgreyMid);
                    }
                    & div { 
                        display: flex;
                        column-gap: 10px;
                        align-items: center;
                    }
                }
            }
            & .location-pills {
                display: flex;
                gap: min(10px,4vw);
                justify-content: center;
                & [class^="btn-"]:not(.is-active) {
                    filter: opacity(0.5);
                    color: var(--cLwhite);
                    border-color: var(--cLgreyMid);
                    background-color: var(--cLgreyMid);
                }
            }
            & .filters-row {
                gap: 10px;
                display: flex;
                justify-content: center;
                & .custom-select {flex: 1;}
            }
            & .custom-select {
                gap: 5px;
                height: 43px;
                border: none;
                display: flex;
                font-size: 14px;
                cursor: pointer;
                appearance: none;
                border-radius: 4px;
                align-items: center;
                background-size: 11px;
                color: var(--cLgreyMid);
                -webkit-appearance: none;
                padding: 8px 25px 8px 12px;
                background-repeat: no-repeat;
                background-position: 90% center;
                background-color: var(--cLgreySoft);
                background-image: url(assets/images/triangle-down.svg);
            }
            & .job-list {
                display: flex;
                flex: 0 0 45%;
                min-width: 350px;
                row-gap: min(15px,5vw);
                flex-direction: column;
            }
            & .card-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            & .job-content {
                display: grid;
                gap: min(2rem,8vw) 2%;
                grid-template-columns: 78% 20%;
                /* repeat(auto-fit, minmax(min(200px,30vw), 1fr)) */
                & picture {border-radius: 24px 0px 24px 24px;}
            }
            & .job-card {
                position: relative;
                display: flex;
                padding: 16px;
                cursor: pointer;
                border-radius: 8px;
                transition: all .3s;
                row-gap: min(10px,4vw);
                flex-direction: column;
                background: var(--cLwhite);
                font-size: min(14px,3.8vw);
                border: 1px solid var(--cLgreySoft);
                & [class^="text"] {
                    row-gap: min(6px,4vw);
                    & > .flex {
                        flex-wrap: nowrap;
                    }
                    & .candidate::before {
                        padding: min(8px,5vw);
                        color: var(--cLbluePrimary);
                    }
                }
                &:hover {box-shadow: 0 4px 12px var(--cLblackAlpha);}
                &.is-active {border: 2px solid var(--cLblueStrong);}
            }
            & .search-container {
                padding: 8px;
                display: flex;
                background: #fff;
                border-radius: 8px;
                align-items: center;
                border: 1px solid var(--cLalmostBlack);
                & .input-group {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    padding: 0 10px;
                }
                & .input-group:first-child {
                    border-right: 1px solid var(--border-color);
                }
                & .input-group svg {
                    width: 20px;
                    height: 20px;
                    fill: var(--text-light);
                    margin-right: 10px;
                }
                & .input-group input {
                    border: none;
                    outline: none;
                    width: 100%;
                    font-size: 16px;
                    padding: 8px 0;
                }
            }
            & .job-detail-pane {
                flex: 1;
                top: 20px;
                padding: 24px;
                position: sticky;
                overflow-y: auto;
                border-radius: 8px;
                background: white;
                height: calc(100vh - 40px);
                border: 1px solid var(--border-color);
                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                & .info {
                    display: flex;
                    column-gap: 10px;
                    align-items: center;
                    & [style^="--icn"] {
                        width: 20px;
                        height: 20px;
                        border-radius: 2rem;
                        background-color: currentColor;
                        &::before {
                            position: absolute;
                            inset: 30%;
                            padding: 0;
                            background-color: var(--cLwhite);
                        }
                    }
                }
            }
            & .youtube-card {
                position: relative;
                display: grid;
                gap: min(30px,5vw);
                align-items: flex-end;
                background-color: var(--cLwhite);
                padding: min(100px, 5vw) min(70px, 5vw) 0 min(70px, 5vw);
                grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
                border-radius: min(24px, 5vw) 0px min(24px, 5vw) min(24px, 5vw);
                & picture {
                    position: absolute;
                    left: 14%;
                    width: min(174px,20vw);
                    height: min(174px,20vw);
                    top: calc((min(174px,20vw) / 1.8) * -1);
                    & img {object-fit: contain;}
                }
                & [class^="btn"] {
                    width: min(300px,100%);
                    justify-content: center;
                    padding-block: min(16px,5vw);
                }
            }
            & .linkedin-card {
                position: relative;
                background-color: var(--cLwhite);
                border-radius: min(24px, 5vw) 0px min(24px, 5vw) min(24px, 5vw);
                padding: min(100px, 5vw) min(70px, 5vw) min(70px, 5vw) min(70px, 5vw);
                & picture {
                    position: absolute;
                    left: 10%;
                    width: min(464px,60vw);
                    height: min(116px,10vw);
                    top: calc((min(116px,10vw) / 2) * -1);
                    & img {object-fit: contain;}
                }
                & > .text {padding-bottom: min(25px,7vw);}
                & .grid {
                    display: grid;
                    gap: min(30px,5vw);
                    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
                    & [class^="btn"] {
                        width: min(300px,100%);
                        justify-content: center;
                        padding-block: min(16px,5vw);
                    }
                }
            }
        }
    }
    & .sc9 {
        & [class^="container"] {
            display: grid;
            align-content: center;
            min-height: min(300px,80vw);
            padding-block: min(6rem,10vw);
            & .breadcrumb {
                margin-block: calc(min(2rem,5vw) * -1) min(2rem,8vw);
                & * {color: var(--cLwhite);}
            }
        }
    }
    & .sc10 {
        & [class^="container"] {
            padding-block: min(6rem,10vw);
        }
    }
    & .sc11 {
        & [class^="container"] {
            padding-block: min(6rem,10vw);
        }
    }
    & .sc12 {
        & [class^="container"] {
            padding-block: min(6rem,10vw);
            & .job-list-header {
                position: sticky;
                top: 129px;
                z-index: 2;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                padding-block: 10px;
                font-size: min(13px,3.5vw);
                background-color: var(--cLwhite);
                & > p {
                    flex: 1 1 max(200px,40%);
                }
                & .sort-info {
                    display: flex;
                    row-gap: 10px;
                    align-items: flex-end;
                    flex-direction: column;
                    flex: 1 1 max(200px,40%);
                    & .info {
                        width: 15px;
                        height: 15px;
                        display: grid;
                        line-height: 1;
                        cursor: pointer;
                        font-size: 12px;
                        text-align: center;
                        border-radius: 2rem;
                        color:var(--cLwhite);
                        align-content: center;
                        background: var(--cLgreyMid);
                    }
                    & div { 
                        display: flex;
                        column-gap: 10px;
                        align-items: center;
                    }
                }
            }
            & .location-pills {
                display: flex;
                gap: min(10px,4vw);
                justify-content: center;
                & [class^="btn-"]:not(.is-active) {
                    filter: opacity(0.5);
                    color: var(--cLwhite);
                    border-color: var(--cLgreyMid);
                    background-color: var(--cLgreyMid);
                }
            }
            & .filters-row {
                gap: 10px;
                display: flex;
                justify-content: center;
                & .custom-select {flex: 1;}
            }
            & .custom-select {
                gap: 5px;
                height: 43px;
                border: none;
                display: flex;
                font-size: 14px;
                cursor: pointer;
                appearance: none;
                border-radius: 4px;
                align-items: center;
                background-size: 11px;
                color: var(--cLgreyMid);
                -webkit-appearance: none;
                padding: 8px 25px 8px 12px;
                background-repeat: no-repeat;
                background-position: 90% center;
                background-color: var(--cLgreySoft);
                background-image: url(assets/images/triangle-down.svg);
            }
            & .job-list {
                display: flex;
                flex: 0 0 45%;
                min-width: 350px;
                row-gap: min(15px,5vw);
                flex-direction: column;
            }
            & .card-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            & .job-content {
                display: grid;
                gap: min(2rem,8vw) 2%;
                grid-template-columns: 78% 20%;
                /* repeat(auto-fit, minmax(min(200px,30vw), 1fr)) */
                & picture {border-radius: 24px 0px 24px 24px;}
            }
            & .job-card {
                position: relative;
                display: flex;
                padding: 16px;
                cursor: pointer;
                border-radius: 8px;
                transition: all .3s;
                row-gap: min(10px,4vw);
                flex-direction: column;
                background: var(--cLwhite);
                font-size: min(14px,3.8vw);
                border: 1px solid var(--cLgreySoft);
                & [class^="text"] {
                    row-gap: min(6px,4vw);
                    & > .flex {
                        flex-wrap: nowrap;
                    }
                    & .candidate::before {
                        padding: min(8px,5vw);
                        color: var(--cLbluePrimary);
                    }
                }
                &:hover {box-shadow: 0 4px 12px var(--cLblackAlpha);}
                &.is-active {border: 2px solid var(--cLblueStrong);}
                & .badge-new {
                    font-size: 12px;
                    font-weight: 700;
                    padding: 4px 8px;
                    border-radius: 4px;
                    display: inline-block;
                    color: var(--cLblueStrong);
                    background-color: var(--cLblueIce);
                }
            }
            & .search-container {
                padding: 8px;
                display: flex;
                background: #fff;
                border-radius: 8px;
                align-items: center;
                border: 1px solid var(--cLalmostBlack);
                & .input-group {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    padding: 0 10px;
                }
                & .input-group:first-child {
                    border-right: 1px solid var(--border-color);
                }
                & .input-group svg {
                    width: 20px;
                    height: 20px;
                    fill: var(--text-light);
                    margin-right: 10px;
                }
                & .input-group input {
                    border: none;
                    outline: none;
                    width: 100%;
                    font-size: 16px;
                    padding: 8px 0;
                }
            }
            & .job-detail-pane {
                flex: 1;
                top: 20px;
                padding: 24px;
                position: sticky;
                overflow-y: auto;
                border-radius: 8px;
                background: white;
                height: calc(100vh - 40px);
                border: 1px solid var(--border-color);
                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                & .info {
                    display: flex;
                    column-gap: 10px;
                    align-items: center;
                    & [style^="--icn"] {
                        width: 20px;
                        height: 20px;
                        border-radius: 2rem;
                        background-color: currentColor;
                        &::before {
                            position: absolute;
                            inset: 30%;
                            padding: 0;
                            background-color: var(--cLwhite);
                        }
                    }
                }
            }
            & .youtube-card {
                position: relative;
                display: grid;
                gap: min(30px,5vw);
                align-items: flex-end;
                background-color: var(--cLwhite);
                padding: min(100px, 5vw) min(70px, 5vw) 0 min(70px, 5vw);
                grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
                border-radius: min(24px, 5vw) 0px min(24px, 5vw) min(24px, 5vw);
                & picture {
                    position: absolute;
                    left: 14%;
                    width: min(174px,20vw);
                    height: min(174px,20vw);
                    top: calc((min(174px,20vw) / 1.8) * -1);
                    & img {object-fit: contain;}
                }
                & [class^="btn"] {
                    width: min(300px,100%);
                    justify-content: center;
                    padding-block: min(16px,5vw);
                }
            }
            & .linkedin-card {
                position: relative;
                background-color: var(--cLwhite);
                border-radius: min(24px, 5vw) 0px min(24px, 5vw) min(24px, 5vw);
                padding: min(100px, 5vw) min(70px, 5vw) min(70px, 5vw) min(70px, 5vw);
                & picture {
                    position: absolute;
                    left: 10%;
                    width: min(464px,60vw);
                    height: min(116px,10vw);
                    top: calc((min(116px,10vw) / 2) * -1);
                    & img {object-fit: contain;}
                }
                & > .text {padding-bottom: min(25px,7vw);}
                & .grid {
                    display: grid;
                    gap: min(30px,5vw);
                    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
                    & [class^="btn"] {
                        width: min(300px,100%);
                        justify-content: center;
                        padding-block: min(16px,5vw);
                    }
                }
            }
        }
    }
    & .sc13 {
        & [class^="container"] {
            padding-block: min(3rem,10vw);
            & > .row {
                align-items: center;
                gap: min(30px,5vw) 5%;
                & picture {
                    flex: 1 1 max(150px,20%);
                    border-radius: min(43px,5vw);
                }
                & .text {
                    flex: 1 1 max(300px,70%);
                }
            }
        }
    }
    & .sc14 {
        & [class^="container"] {
            padding-block: min(3rem,10vw);
            & figure {border-radius: min(43px,5vw);}
            & .grid {
                position: relative;
                display: grid;
                gap: min(100px,5vw) 5%;
                grid-template-columns: repeat(auto-fit, minmax(max(300px,30%), 1fr));
                & > .text:nth-child(3n + 2) {
                    padding-block: min(3rem,5vw);
                    border-block: 1px solid currentColor;
                    @media screen and (width>=1200px) {
                        padding-block: 0;
                        border-block: none;
                        padding-inline: min(3rem,5vw);
                        border-inline: 1px solid currentColor;
                    }
                }
                & .nav-link {
                    columns: 2 130px;
                    & > li {
                        width: 100%;
                        display: inline-block;
                    }
                }
            }
        }
    }
    & .sc-bandeau {
        display: grid;
        min-height: 100vh;
        align-content: center;
        & [class^="container"] {
            padding-block: min(6rem,10vw);
            & .logo {
                display: block;
                width: min(150px,20vw);
                & img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    & footer {
        & [class^="container"]  {
            padding-block: min(5rem,10vw);
            & .row {
                gap: min(2rem,10vw) 5%;
                & .nav {
                    display: flex;
                    row-gap: min(1rem,4vw);
                    flex-direction: column;
                    align-items: end;
                }
                & .left {
                    flex: 1;
                    & li {
                        & [class^=btn-] {font-size: min(20px,4vw);}
                        &:has(>span[style*="--icn-"]) {
                            display: flex;
                            border-radius: 10px;
                            color: var(--cLwhite);
                            column-gap: min(1rem,5vw);
                            background-color: var(--cLblue);
                            padding: min(1rem,5vw) min(1.5rem, 6vw);
                            & p {
                                display: flex;
                                line-height: 1.05;
                                font-size: min(17px,4vw);
                                flex-direction: column;
                                text-transform: uppercase;
                                & a[href^="mailto"] {
                                    text-transform: initial;
                                    font-size: min(16px,3.7vw);
                                }
                                &:not(:first-child)::before {
                                    position: relative;
                                    content: ''; 
                                    width: 100%;
                                    height: 1px;
                                    display: block;
                                    margin-block: 10px;
                                    background-color: currentColor;
                                }
                            }
                        }
                    }
                }
                & .center {
                    flex: 1 1 max(200px,19%);
                    & .logo {
                        display: block;
                        margin-inline: auto;
                        width: min(252px,min(100%,30vw));
                        & img {
                            width: 100%;
                            height: 100%;
                            display: block;
                            object-fit: contain;
                        }
                    }
                }
                & .right {
                    flex: 1 1 max(300px,25%);
                    & [class^=btn-] {
                        font-size: min(15px,4.5vw);
                    }
                }
            }
        }
    }
    @media screen and (width <1200px) {.desk {display: none !important;}}
    @media screen and (width >=1200px) {.mob {display: none !important;}}
}







.main-content {
    display: flex;
    gap: 20px;
    position: relative;
}

.sort-select {
    background: #e4e2e0;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.bordered { border-radius: 35px; max-height: 650px;}

/* 🔒 Désactivation totale du hover sur les 3 dernières cards */
.grid .card:nth-last-child(-n+3):hover picture img {
    scale: 1.2 !important;
    translate: 0 -10% !important;
}

/* Bloc texte inchangé */
.grid .card:nth-last-child(-n+3):hover [class^="text"] {
    background-color: var(--cLwhite) !important;
}

.grid .card:nth-last-child(-n+3):hover [class^="text"] > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* 🚫 Bouton qui apparaît au hover (btn-cLblue) 
.grid .card:nth-last-child(-n+3) picture .btn-cLblue {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
}*/
/* HERO slider (ACF) — fade stable + dots */
.hero-slider{position:relative;overflow:hidden}
.hero-slides{position:relative;min-height:60vh}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}

.hero-dots{position:absolute;left:50%;bottom:min(30px,6vw);transform:translateX(-50%);display:flex;gap:12px;z-index:999}
.hero-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:transform .2s ease,background-color .2s ease}
.hero-dot.is-active{background:#fff;transform:scale(1.2)}

/* Le fond (image hero) ne doit JAMAIS passer au-dessus */
.hero-slide picture.cliping,
.hero-slide picture.cliping img {
    z-index: 0 !important;
    pointer-events: none;
}

/* ===== HERO DOTS – style propre & stable ===== */

.hero-dots{
    position: absolute;
    left: 50%;
    bottom: min(32px,6vw);
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 20;
}

.hero-dot{
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,.45);
    cursor: pointer;
    transition: all .25s ease;
}

/* dot actif */
.hero-dot.is-active{
    background-color: #fff;
    transform: scale(1.4);
}

/* hover (desktop uniquement) */
@media (hover: hover){
    .hero-dot:hover{
        background-color: #fff;
        transform: scale(1.25);
    }
}

/* Hero : supprimer le fond bleu du texte */
.sc1 .wrapper-text{
    background: transparent !important;
}
/* Hero : overlay sombre pour faire ressortir le texte */
.sc1 picture.cliping::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.25); /* ajuste ici : .35 à .55 */
    z-index: 1;
}

footer .footer-menu{
    text-align: right;
    color: #8bb44f;
    padding-right: 10px;
}

.documents-downloads{
    margin-top: clamp(3rem,6vw,5rem);
}

.documents-list{
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.document-item{
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.document-item a{
    display: block;
    padding: 1rem 0;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    transition: opacity .2s ease;
}

.document-item a:hover{
    opacity: .7;
}

.documents-downloads{ margin-top: 2rem; }
.documents-list{ list-style:none; padding:0; margin:1rem 0 0; }
.document-item{ padding:.6rem 0; border-bottom:1px solid rgba(0,0,0,.08); }
.document-item a{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }

/* Documents : picto téléchargement à droite */
.documents-list .document-item a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.documents-list .document-item a::after{
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: .85;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* icône download (SVG) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}


/* SC14 slider (même format que l'image) */
.sc14-slider{
    position: relative;
  }
  
  .sc14-slider .sc14-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease;
  }
  
  .sc14-slider .sc14-slide.is-active{
    position: relative;
    opacity: 1;
    visibility: visible;
  }
  
  /* Important : l'image garde sa taille/format existant */
  .sc14-slider img.bordered{
    display: block;
    width: 100%;
    height: auto;
  }
  /* =========================
   SC14 – Image pleine hauteur
   ========================= */

.sc14 .montfort {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
  }
  
  .sc14 .montfort .left {
    flex: 0 0 45%; /* ajustable */
    max-width: 45%;
    position: relative;
  }
  
  .sc14 .montfort .left picture,
  .sc14 .montfort .left img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* garde aspect et couvre tout */
    display: block;
  }
  
  .sc14 .montfort .text {
    flex: 1 1 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Assure que le parent prenne minimum toute la hauteur de l’image */
  .sc14 .montfort {
    min-height: 400px; /* ajustable selon ton design */
  }

  /* Montfort : image plus large + pleine hauteur */
.sc7 .montfort{
    align-items: stretch;
  }
  
  /* Colonne image plus large (ajuste 30% / 35% / 40%) */
  .sc7 .montfort .left{
    flex: 0 0 35%;
    max-width: 35%;
    align-self: stretch;
  }
  
  /* L'image n'est plus carrée et remplit la hauteur */
  .sc7 .montfort .left .square-image{
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    object-fit: cover;
    display: block;
  }
  
  /* Responsive : sur mobile on repasse en largeur 100% */
  @media (max-width: 999px){
    .sc7 .montfort .left{
      flex: 1 1 100%;
      max-width: 100%;
    }
    .sc7 .montfort .left .square-image{
      height: auto;
    }
  }

  @media (max-width: 1200px){
    .montfort {
        flex-wrap: wrap;
  }
}

  /* Vignettes section 14 : image en fond via --bg */
.flex-blocks .block{
    position: relative;
    overflow: hidden;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
  }
  
  /* Overlay pour lisibilité */
  .flex-blocks .block::before{
    content:"";
    position:absolute;
    inset:0;
    /*background: rgba(0,0,0,.45);*/
    z-index:0;
  }
  
  /* Texte au-dessus */
  .flex-blocks .block .text-center{
    position: relative;
    z-index: 1;
    padding: 2rem;
  }
  

 /* 1) Image bien ajustée dans le bloc */
.flex-blocks .block{
    background-size: cover;          /* couvre toute la vignette */
    background-position: center;     /* centrée */
    background-repeat: no-repeat;
    min-height: 260px;              /* ajuste si besoin */
    border-radius: 12px;            /* optionnel */
  }
  
  /* ===== VIGNETTES SECTION 14 – VERSION SAINE ===== */

.block.block-bg{
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* Overlay STRICTEMENT dans l'article */
  .block.block-bg .block-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 0;
    pointer-events: none;
  }
  
  /* Contenu au-dessus */
  .block.block-bg .text-center{
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem,4vw,3rem);
  }
  
  /* Texte lisible */
  .block.block-bg h3{
    color: #fff;
    text-shadow: 0 8px 18px rgba(0,0,0,.55);
  }
  

/* CONTENEUR : taille imposée */
article .wrapper-picture{
    display: block;
    width: 100%;
    height: 140px;          /* ← ajuste ici */
    overflow: hidden;
}

/* PICTURE : hérite de la taille */
article .wrapper-picture picture{
    display: block;
    width: 100%;
    height: 100%;
}

/* IMAGE : CONTRAINTE + object-fit actif */
article .wrapper-picture picture img{
    display: block;
    width: 100% !important;
    height: 100% !important;     /* ← OBLIGATOIRE */
    max-width: none !important;
    object-fit: cover !important;
    object-position: top !important;
}



.partners-head{ margin-bottom: 2rem; }
.partners-intro{ margin-top: .75rem; }

.partners-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.partner-card{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  padding: 1.2rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.partner-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,.10);
}

.partner-logo{
  display: grid;
  place-items: center;
  height: 90px;
}

.partner-logo img{
  max-height: 90px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-name{
  font-weight: 700;
  text-align: center;
  opacity: .85;
}

@media (max-width: 999px){
  .partners-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .partners-grid{ grid-template-columns: 1fr; }
}


div#boutin_inscription {
    background-color: #ffffff;
    width: auto;
    padding: 20px;
    margin: auto;
    text-align: center;
}
p.titre_btn_inscription {
    font-size: 25px;
    font-weight: bold;
    color: #008fc5;
    padding-bottom: 20px;
}