:root {
    --clwhite: #fff;
    --clblue: #3E9FB6;
    --clpink: #C23487;
    --clgrey: #222324;
    --clyellow: #EDBE00;
    --cllight-grey: #F1F1F1;
    --clwhite-grey: #D9D9D9;

    --menu-color:var(--clpink);
    --cLcurrentTheme: var(--clpink);
}
* {box-sizing: border-box;}
#content {margin-top: 0;}
[style^="--icn"] {position: relative;}
[style^="--icn"]::before {
    position: relative;
    width: 0;
    height: 0;
    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;
    -webkit-mask-image: var(--icn);
    mask-image: var(--icn);
}
/* Couleurs spécifiques */
.bg-clyellow { background-color: var(--clyellow); }
.bg-clblue   { background-color: var(--clblue); }
.bg-clpink   { background-color: var(--clpink); }
.bg-clgrey   { background-color: var(--cllight-grey); color: var(--clgrey); }

.clgrey {color: var(--clgrey);}
.clblue  {color: var(--clblue); }
.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}

.text-uppercase {text-transform: uppercase;}
.text-initial {text-transform: initial;}

.fs55 { font-size: clamp(min(40px,8vw),3.5vw,55px);}
.fs50 { font-size: clamp(min(36px,7vw),3.5vw,50px);}
.fs40 { font-size: clamp(min(30px,6vw),3.1vw,40px);}
.fs35 { font-size: clamp(min(20px,5vw),3vw,35px);}
.fs30 { font-size: clamp(min(20px,4.7vw),2.8vw,30px);}
.fs27 { font-size: clamp(min(17px,4vw),1.3vw,27px);}
.fs20 { font-size: clamp(min(16px,3.9vw),1.03vw,20px);}
.fs16 { font-size: clamp(min(14px,3.3vw),1vw,16px);}

.quicksand {font-family: "Quicksand", sans-serif;}

.bt {
    line-height: 1;
    border-radius: 2em;
    padding: 12px 25px;
    transition: all .3s;
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    font-size: clamp(min(14px,4vw),1vw,18px);
    box-shadow: 5px 10px 20px -10px rgba(0, 0, 0, 0.33);
}
.bt-clblue:hover,
.bt-pink {
    color: var(--clwhite);
    background-color: var(--clpink);
    border: 2px solid var(--clpink);
}
.bt-clblue {
    color: var(--clwhite);
    background-color: var(--clblue);
    border: 2px solid var(--clblue);
}
.bt-pink:hover {
    background-color: var(--clblue);
    border: 2px solid var(--clblue);
}
&:has(.primary li.th_clyellow:is(.current-menu-item,.current-menu-parent)) {--cLcurrentTheme: var(--clyellow);}
&:has(.primary li.th_clblue:is(.current-menu-item,.current-menu-parent)) {--cLcurrentTheme: var(--clblue);}
&:has(.primary li.th_clpink:is(.current-menu-item,.current-menu-parent)) {--cLcurrentTheme: var(--clpink);}
&:has(.primary li.th_cllight-grey:is(.current-menu-item,.current-menu-parent)) {--cLcurrentTheme: var(--cllight-grey);}
/* --- header--- */
.social-link [style^="--icn"] {
    padding: 1em;
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding-block: 1em;
    height: min(95px,20vw) !important;
    background-color: var(--clwhite);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
header .row {
    display: flex;
    column-gap: 3em;
    margin-inline:auto;
    align-items: center;
    width:min(1110px,90vw);
    justify-content: space-between;
}
.sub-menu {background-color: transparent;}
header .logo-container {
    position: relative;
    z-index: 2;
}
header .rs {
    position: relative;
    z-index: 2;
    padding: 0;
    font-size: 0;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    margin-left: auto;
    border-radius: 2rem;
    width: min(2.5rem,11vw);
    height: min(2.5rem,11vw);
    background-color: currentcolor;
    &::before {
        position: absolute;
        inset: 0;
        height: auto;
        width: auto;
        scale: .5;
        background-color: var(--clwhite);
    }
}
header {
    & .logo {
        display: block;
        width: clamp(min(200px,40vw),20vw,200px);
        & img {
            display: block;
            width: 100%;
            height: 100%;
            max-width: initial;
            object-fit: contain;
        }
    }
    & nav {
        position: fixed;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: all .4s;
        color: var(--clgrey);
        &:is(input:checked ~ &) {
            opacity: 1;
            visibility: visible;
            transition: all .3s;
        }
        & .primary {
            position: relative;
            left: 100%;
            width: 100%;
            height: 100%;
            row-gap: 1em;
            display: flex;
            text-align: left;
            transition: all .3s;
            flex-direction: column;
            box-sizing: border-box;
            font-size: min(15px,4vw);
            padding: 7rem 1.5rem 2rem;
            background-color: var(--clwhite-grey); 
            &:is(input:checked ~ nav &) {transform: translateX(-100%);}
            & li {
                &:is(.primary > li) {
                    &.th_clyellow {--menu-color:var(--clyellow);}
                    &.th_clblue {--menu-color:var(--clblue);}
                    &.th_clpink {--menu-color:var(--clpink);}
                    &.th_cllight-grey {--menu-color:var(--cllight-grey);}
                    & > a {
                        white-space: nowrap;
                        &[title]::before {
                            position: relative;
                            display: block;
                            line-height: 1;
                            font-weight: 700;
                            padding: 5px 6px;
                            border-radius: 5px;
                            width: max-content;
                            margin-bottom: .3em;
                            color: var(--clgrey);
                            content: attr(title);
                            font-size: min(16px,4vw);
                            text-transform: uppercase;
                            background-color: var(--menu-color);
                        }
                        & [style^="--icn"] {
                            width: 1.5em;
                            height: 1.5em;
                            display: grid;
                            border-radius: 2em;
                            align-content: center;
                            justify-content: center;
                            background-color: currentcolor;
                            &::before {
                                scale: .8;
                                background-color: var(--clwhite);
                            }
                        }
                        &:is(li:hover &) {color: var(--menu-color)}
                        &:is(li.th_clblue > a)::before {color: var(--clwhite);}
                        &:is(li.th_clpink > a)::before {color: var(--clwhite);}
                    }
                    &.th_clyellow li:hover {
                        & > a {color: var(--clyellow);}
                    } 
                    &.th_clblue li:hover {
                        & > a {color: var(--clblue);}
                    } 
                    &.th_clpink li:hover {
                        & > a {color: var(--clpink);}
                    } 
                    &.th_cllight-grey li:hover {
                        & > a {color: var(--cllight-grey);}
                    }
                    &:has( > ul) {
                        display: grid;
                        transition: all .3s;
                        grid-template-rows: 3em 0fr;
                        &:has( > .up-down input:checked) {
                            grid-template-rows: 3em 1fr;
                            & > ul {margin-top: 1em;}
                        }
                        & > ul {
                            overflow: hidden;
                            transition: all .3s;
                            pointer-events: inherit;
                        }
                        @media screen and (width >= 1200px) {
                            & {
                                padding-right: 2em;
                                & .up-down {
                                    pointer-events: none;
                                    color: var(--clwhite);
                                    &:is(li:hover > &) {rotate: -180deg;}
                                }
                                & ul {
                                    & .up-down {display: none;}
                                }
                            }
                        }
                    }
                }
                &:has( > ul) {
                    position: relative;
                    display: grid;
                    /* &:not(:has( > a[title])) {
                        grid-template-rows: 1em 0fr;
                        &:has( > .up-down input:checked) {grid-template-rows: 1em 1fr;}
                    } */
                    & .up-down {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 1em;
                        z-index: 2;
                        aspect-ratio: 1/1;
                        transition: all .3s;
                        &:has( input:checked) {rotate: -180deg;}
                        &::before {
                            position: absolute;
                            inset: 0;
                            content: '';
                            display: block;
                            pointer-events: none;
                            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(../image/angle-down.svg);
                            mask-image: url(../image/angle-down.svg);
                        }
                        @media screen and (width >= 1200px) {
                            & {display: none;}
                        }
                    }
                    & > ul {
                        position: relative;
                        top: 0;
                        left: 0;
                        padding: 0;
                        border: none;
                        display: flex;
                        row-gap: 0.2em;
                        overflow: hidden;
                        align-items: initial;
                        flex-direction: column;
                        transition: height 0.3s, 0.3s;
                        & a {
                            font-weight: 400;
                            text-transform: initial;
                        }
                        &:is(.primary > li > &) {
                            padding-left: 1em;
                            & > li {
                                display: grid;
                                row-gap: 1em;
                                & > .up-down {display: none;}
                                & > a {
                                    font-weight: 700;
                                    font-size: min(26px,6vw);
                                    color: var(--clgrey) !important;
                                    font-family: "Quicksand", sans-serif;
                                    @media screen and (width >= 1200px) {
                                        & {
                                            width: 30%;
                                            padding: 1em;
                                            display: grid;
                                            flex: 0 0 auto;
                                            pointer-events: none;
                                            align-content: center;
                                            background-color: var(--menu-color);
                                            
                                        }
                                    }

                                }
                                & .sub-menu {
                                    top: 0;
                                    left: 0;
                                    padding: 0;
                                    text-align: left;
                                    pointer-events: initial;
                                    & li {
                                        padding: 0px;
                                        border: none !important;
                                        & .sub-menu {
                                            @media screen and (width >= 1200px) {
                                                top: 0;
                                                left: 0;
                                                padding: 0;
                                                width: 100%;
                                                display: block;
                                                text-align: left;
                                                background-color: transparent;
                                            }
                                        }
                                    }
                                }
                                & > .sub-menu {
                                    & > li {
                                        display: grid;
                                        transition: all .3s;
                                        padding: min(2em,1vw);
                                        grid-template-rows: 3em 0fr;
                                        &:has( > .up-down input:checked) {grid-template-rows: 3em 1fr;}
                                        &:last-child:not(:first-child) { 
                                            background-color: var(--clwhite-grey); 
                                            & > a {
                                                font-size: 25px;
                                                padding-bottom: 0;
                                                border-bottom: none;
                                                text-transform: initial;
                                            }
                                            & > ul {
                                                flex: 1;
                                                & a {
                                                    display: flex;
                                                    column-gap: 1em;
                                                    align-items: center;
                                                    text-transform: uppercase;
                                                    @media screen and (width>=1200px) {
                                                        & {display: inline-block;}
                                                    }
                                                }
                                            }
                                            @media screen and (width >= 1200px) {
                                                & {
                                                    display: flex;
                                                    flex-direction: column;
                                                }
                                            }
                                        }
                                        & > a {
                                            color: #000;
                                            display: block;
                                            font-weight: 700;
                                            line-height: 120%;
                                            pointer-events: none;
                                            margin-bottom: .5em;
                                            padding-bottom: .5em;
                                            letter-spacing: -.8px;
                                            font-size: min(16px,4vw);
                                            text-transform: uppercase;
                                            font-family: "Quicksand", sans-serif;
                                            border-bottom: 1px solid var(--cllight-grey);
                                        }
                                        &:nth-child(1),
                                        &:nth-child(2) {
                                            & li {
                                                display: flex;
                                                &::before {
                                                    position: relative;
                                                    top: .4em;
                                                    width: 3px;
                                                    content: '';
                                                    height: 3px;
                                                    flex: 0 0 auto;
                                                    border-radius: 1em;
                                                    margin-right: 0.4em;
                                                    background-color: currentColor;
                                                }
                                            }
                                        }
                                        &:nth-child(1),
                                        &:nth-child(2),
                                        &:nth-child(3) {
                                            & ul {
                                                display: flex;
                                                row-gap: .6em;
                                                flex-direction: column;
                                                justify-content: inherit;
                                                /* display: grid;
                                                row-gap: .6em;
                                                justify-content: inherit; */
                                                & a {font-size: min(13px,3.5vw);}
                                            }
                                        }
                                        & > .sub-menu {overflow: hidden;}
                                        @media screen and (width>=1200px) {
                                            & {grid-template-rows: initial;}
                                        }
                                    }
                                    @media screen and (width >= 1200px) {
                                        & {
                                            flex: 1;
                                            display: grid;
                                            grid-gap: 0px;
                                            grid-template-columns: repeat(20, 1fr);
                                            /*  */
                                            /* width: auto;
                                            align-items: normal;
                                            justify-content: initial; */
                                            /*  */
                                            & > li {
                                                &:nth-child(2) { grid-area: 12 / 1 / 21 / 11; }
                                                &:nth-child(1) { grid-area: 1 / 1 / 12 / 11; }
                                                &:last-child:not(:first-child) {grid-area: 1 / 11 / 21 / 21; }
                                            }
                                        }
                                    }
                                }
                                @media screen and (width >= 1200px) {
                                    & {
                                        width: 100%;
                                        padding: 0;
                                        display: flex;
                                    }
                                }
                            }
                            @media screen and (width >= 1200px) {
                                & {
                                    position: absolute;
                                    top: 150%;
                                    left: 50%;
                                    padding: 0;
                                    row-gap: 0;
                                    opacity: 0;
                                    width: 100%;
                                    visibility: hidden;
                                    transition: all .3s;
                                    transform: translateX(-50%);
                                    background-color: var(--clwhite);
                                    &:is(li:hover > &) {
                                        top: 100%;
                                        opacity: 1;
                                        visibility: visible;
                                    }
                                }
                            }

                        }
                    }
                    @media screen and (width >= 1200px) {
                        & { 
                            position: initial;
                            display: block;
                        }
                    }
                }
                @media screen and (width >= 1200px) {
                    &:is(.next-mob) ~ li {display: none;}
                }
            }
            @media screen and (width >= 1200px) {
                & {
                    position: relative;
                    left: 0;
                    width: auto;
                    padding: 0;
                    height: 100%;
                    column-gap: 2em;
                    flex-direction: inherit;
                    background-color: transparent;
                    transform: inherit !important;
                }
            }
        }
        @media screen and (width >= 1200px) {
            & {
                position: relative;
                inset: 0;
                opacity: 1;
                visibility: visible;
            }
            
        }
    }
    & .open-nav {
        position: relative;
        z-index: 2;
        height: 28px;
        display: flex;
        row-gap: 8px;
        cursor: pointer;
        transition: .2s;
        width: max-content;
        align-items: center;
        color: var(--clpink);
        flex-direction: column;
        justify-content: center;
        & span {
            width: 1.8rem;
            height: 0.15rem;
            line-height: 0;
            transition: all .3s;
            border-radius: 1rem;
            pointer-events: none;
            background: currentColor;
            transform-origin: 55% center;
        }
        &:is(input:checked + .open-nav &):nth-child(1) {
            transform: translate(-.1rem,.2rem) rotate(90deg);
        }
    }
    & + * {padding-top: min(5em,10vw);}
}
section[class^="sc"] strong {font-weight: 800;}
section[class^="sc"] .overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}
/* sc1 */
.sc1 {background: var(--cllight-grey) url('../image/vector-home.svg') 15% 103% / min(850px,60vw) no-repeat;}
.sc1 .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-inline: auto;
    gap: min(2em,10vw) 7%;
    width: min(1110px,90vw);
    padding-block: min(4em,10vw);
}
.sc1 .left {
    display: grid;
    line-height: 1.2;
    row-gap: min(2em,4vw);
    flex: 1 1 max(300px,30%);
}
.sc1 .right {flex: 1 1 max(300px,50%);}
.sc1 .grid {
    display: grid;
    grid-gap: 0px;
    font-weight: 600;
    letter-spacing: -4%;
    font-size: min(13px,2.2vw);
    font-family: 'Quicksand',sans-serif;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(30, 1fr);
}
.sc1 .grid > div { position: relative;}
.sc1 .grid > div:nth-child(1) {
    display: grid;
    grid-gap: 0px;
    grid-area: 1 / 2 / 14 / 17;
    grid-template-columns: repeat(20, 1fr);
    /* grid-template-rows: repeat(20, 1fr); */
}
.sc1 .grid > div:nth-child(1) > picture { grid-area: 1 / 5 / 21 / 21; }
.sc1 .grid > div:nth-child(1) > div {
    color: var(--clwhite);
    grid-area: 12 / 1 / 19 / 11;
    background-color: var(--clblue);
}

.sc1 .grid > div:nth-child(2) {
    display: grid;
    grid-gap: 0px;
    grid-area: 1 / 18 / 15 / 31;
    grid-template-columns: repeat(30, 1fr);
}
.sc1 .grid > div:nth-child(2) > picture { grid-area: 6 / 1 / 31 / 31; }
.sc1 .grid > div:nth-child(2) > div { 
    grid-area: 1 / 7 / 10 / 27; 
    background-color: var(--clyellow);
}

.sc1 .grid > div:nth-child(3) {
    display: grid;
    grid-gap: 0px;
    grid-area: 15 / 1 / 31 / 17;
    grid-template-columns: repeat(30, 1fr);
}
.sc1 .grid > div:nth-child(3) > picture  { grid-area: 1 / 1 / 28 / 31; }
.sc1 .grid > div:nth-child(3) > div { 
    color: var(--clwhite);
    grid-area: 23 / 11 / 31 / 27; 
    background-color: var(--clpink);
}

.sc1 .grid > div:nth-child(4) {
    display: grid;
    grid-gap: 0px;
    grid-area: 16 / 18 / 31 / 31;
    grid-template-columns: repeat(30, 1fr);
}
.sc1 .grid > div:nth-child(4) > picture { grid-area: 1 / 1 / 31 / 27; }
.sc1 .grid > div:nth-child(4) > div { 
    grid-area: 3 / 18 / 4 / 31; 
    background-color: var(--clwhite);
}
.sc1 .grid > div > div {
    position: relative;
    padding: 1em;
    display: grid;
    line-height: 1.2;
    align-content: center;
    border-radius: min(.7em,2vw);
}
.sc1 .grid > div picture {
    overflow: hidden;
    border-radius: min(13px,3vw);
}
.sc1 .grid > div picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: initial;
    transition: all .3s;
}
.sc1 .grid > div:hover picture img {
    scale: 1.02;
    rotate: -1deg;
    filter: grayscale(1);
}

.sc1 h1 .quicksand-title {
    display: block;
}
/* sc2 */
.sc2 {
    position: relative;
    z-index: 1;
    background-color: var(--clwhite);
    box-shadow: 5px 10px 20px -10px #00000021;
}
.sc2 .container {
    margin-inline: auto;
    width: min(1110px,90vw);
    padding-block: min(2em,5vw);
}
.sc2 .listing {
    display: flex;
    gap: 2em 2%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.sc2 .listing li {
    display: flex;
    column-gap: 1em;
    align-items: center;
    flex: 1 1 max(300px,30%);
}
.sc2 .listing li > span {
    flex: 1;
    display: flex;
    column-gap: .7em;
    align-items: center;
    font-size: min(18px,4vw);
}
.sc2 .listing li > span[style]:before {background: var(--clpink);}
.sc2 .listing li > span:not([style]):before {
    position: relative;
    content: '';
    height: 2em;
    border-left: 1px solid var(--clwhite-grey);
}
.sc2 .listing li > span[style^="--icn"] {
    flex: 0 0 auto;
    color: var(--clpink);
}
.sc2 .listing li > span[style^="--icn"]::before {padding: min(1.5rem, 5vw);}
.sc2 .listing li .title {
    font-weight: 800;
    font-size: min(40px,7.5vw);
}
/* sc3 */
.sc3 {
    position: relative;
    background-color: var(--clwhite);
}
.sc3 .container {
    display: grid;
    row-gap: 3em;
    margin-inline: auto;
    justify-items: center;
    width: min(1110px,90vw);
    padding-block:  min(5em,10vw);
}
.sc3 h2 {text-align: center;}
.sc3 .container .row {
    display: flex;
    gap: 1em 5%;
    flex-wrap: wrap;
}
.sc3 .row > picture {
    position: relative;
    overflow: hidden;
    height: min(352px,60vw);
    flex: 1 1 max(300px,50%);
    border-radius: min(8em,10vw) 0 min(8em,10vw) 0;
    border-bottom-right-radius: opacity/100;
    
}
.sc3 .row > picture::after {
    position: absolute;
    inset: 0;
    content: '';
    pointer-events: none;
    mix-blend-mode: multiply;
    background: transparent url('../image/mask.svg') center bottom / 100% no-repeat;
}
.sc3 .row > picture a::after {
    position: absolute;
    inset: 0;
    content: '';
    pointer-events: none;
    transition: all .3s;
    background: transparent url('../image/play.svg') center / 5em no-repeat;
}
.sc3 .row > picture a:hover::after {scale: 1.1;}
.sc3 .row > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sc3 .row > .text {
    display: grid;
    row-gap: 1em;
    line-height: 1.5;
    align-content: center;
    justify-items: flex-start;
    flex: 1 1 max(300px,40%);
}
/* sc4 */
.sc4 {
    color: var(--clwhite);
    background-color: var(--clblue);
}
.sc4 .container {
    display: grid;
    row-gap: 3em;
    margin-inline: auto;
    justify-items: center;
    width: min(1110px,90vw);
    padding-block:  min(5em,10vw);
}
.sc4 .container > .text {
    display: grid;
    row-gap: 1em;
    text-align: center;
    margin-inline: auto;
    justify-items: center;
    width: min(625,100%);
}
.sc4 .listing {
    width: 100%;
    display: grid;
    gap: 2.5em 2%;
    text-align: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fill, minmax(max(min(150px,40vw), 17%), 1fr));
}
.sc4 .listing li {
    position: relative;
    display: grid;
    row-gap: .6em;
    line-height: 1.5;
    justify-items: center;
    align-content: flex-start;
    &.th_clwhite {
        & .circle {
            background-color: var(--clwhite);
        }
    }
    &.th_clyellow {
        & .circle {
            background-color: var(--clyellow);
        }
    }
    &.th_clpink {
        & .circle {
            color: var(--clwhite);
            background-color: var(--clpink);
        }
    }
}
.sc4 .listing li .circle {
    position: relative;
    display: grid;
    aspect-ratio: 1/1;
    border-radius: 50%;
    color: var(--clgrey);
    justify-items: center;
    align-content: center;
    width: min(110px,20vw);
}
.sc4 .listing li em {
    display: block;
    font-style: italic;
}
/* sc7 */
.sc7 {
    position: relative;
    background-color: var(--clwhite);
}
.sc7 .container {
    display: grid;
    margin-inline: auto;
    gap: min(1em, 5vw) 5%;
    justify-items: center;
    width: min(1110px,90vw);
    padding-block: min(5em,10vw) 0;
    grid-template-columns: repeat(auto-fill, minmax(max(min(300px, 80%),40%), 1fr));
}
.sc7 .container .text {
    row-gap: 1em;
    display: grid;
    line-height: 1.5;
    align-content: center;
}
.sc7 .container .text h2 {line-height: 1.2;}
.sc7 .container picture {
    width: 100%;
}
.sc7 .container picture img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-width: initial;
}
.section-filter {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  & .container {
      margin-inline: auto;
    width: min(1110px,90vw);
    padding-block: min(3em,7vw);
    & .search-bar-grid {
      gap: 1.5em;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      & .form-group {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        column-gap: 1em;
        align-items: flex-end;
        min-width: min(300px,100%);
        & label { 
          position: relative;
          font-weight: 700;
          color: #000000;
          margin-bottom: 0;
          padding-bottom: 1rem;
          font-family: 'Quicksand',sans-serif;
          font-size: clamp(min(13px,4vw),1vw,15px);
        }
        &:is(.toggle-group) {
          flex: 0 0 auto;
          & label {
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            column-gap: .6em;
            align-items: center;
          }
        }
        & input, 
        & select {
          margin: 0;
          border: none;
          outline: none;
          align-self: end;
          border-radius: 0;
          padding: 0 0 .75rem 0;
          flex: 1 1 min(200px,100%);
          border-bottom: 1px solid #cbd5e1;
          font-size: clamp(min(13px,4vw),1vw,15px);
          color: hsl(from currentColor h s l / 0.8);
          &::-webkit-input-placeholder {
            font-weight: 400;
            font-size: inherit;
            color: hsl(from currentColor h s l / 0.8);
          }
          &::-moz-placeholder {
            font-weight: 400;
            font-size: inherit;
            color: hsl(from currentColor h s l / 0.8);
          }
          &::placeholder {
            font-weight: 400;
            font-size: inherit;
            color: hsl(from currentColor h s l / 0.8);
          }
        }
        @media screen and (width >= 1200px) {
          & {
            min-width: auto;
          }
        }
      }
      & .btn-search {
        color: #fff;
        border: none;
        display: flex;
        cursor: pointer;
        column-gap: .5em;
        font-weight: 600;
        border-radius: 2em;
        align-items: center;
        padding: .75rem .8rem;
        transition: background 0.3s;
        background-color: #3E9FB6;
        &:hover { background-color: #EDBE00; }
        &::before {
          position: relative;
          content: '';
          padding: 0.7em 0.5em;
          background-color: currentColor;
          mask: url(images/search.svg) center / contain no-repeat;
        }
      }
    }
    & .switch {
        position: relative;
        width: 40px;
        height: 22px;
        display: inline-block;
        input { opacity: 0; width: 0; height: 0; }
        & .slider-checkbox {
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;
            cursor: pointer; 
            transition: .3s; 
            border-radius: 2em;
            border: 1px solid #D9D9D9;
            &:before {
            position: absolute;
            left: .16em;
            width: 1em;
            bottom: .16em;
            content: "";
            height: 1em;
            transition: 0.3s;
            border-radius: 50%;
            background-color: #3e9fb6;
            }
        }
        & input:checked + .slider-checkbox { 
            border-color: #3e9fb6;
            background-color: #3e9fb6;
        }
        & input:checked + .slider-checkbox:before { 
            transform: translateX(18px); 
            background-color: #ffffff;
        }
        }
  }
}

@media screen and (width >= 1200px) {
    & {.mob {display: none !important;}}
}
@media screen and (width < 1200px) {
    & {.desk {display: none !important;}}
}

.actu {
    width: 100%;
    background: url(/wp-content/uploads/2023/10/AdobeStock_506424316.jpg)
    center no-repeat;
    background-size: cover;
    padding-bottom: 100px;
    position: relative;
}