/*
Theme Name: Vrs
Theme URI: https://underscores.me/
Author: Vrs
Author URI: http://www.vrs.fr
Description: Un super thème optimisé par les meilleurs intés du monde.
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('assets/fonts/HelveticaNeue-Bold.woff') format('woff2'),
        url('assets/fonts/HelveticaNeue-Bold.woff2') format('woff');
    font-weight: bold;
    font-style: bold;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('assets/fonts/HelveticaNeue-Light.woff') format('woff2'),
        url('assets/fonts/HelveticaNeue-Light.woff2') format('woff');
    font-weight: light;
    font-style: light;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('assets/fonts/HelveticaNeue-Medium.woff') format('woff2'),
        url('assets/fonts/HelveticaNeue-Medium.woff2') format('woff');
    font-weight: medium;
    font-style: medium;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('assets/fonts/HelveticaNeueLTStd-Cn.woff') format('woff2'),
        url('assets/fonts/HelveticaNeueLTStd-Cn.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    --cLwhite: #FFFFFF;
    --cLblack: #000000;
    --cLgray94: #949494;
    --cLgrayF4: #F4F4F4;
    --cLgray70: #707070;
    --cLgray84: #848483;
    --cLgray78: #787878;
    --cLgrayBF: #DFDFDF;
    --cLgrayEB: #EBEBEB;
    --cLgrayF9: #F9F9F9;
    --cLgray21: #212121;
    --cLgray41: #414140;
    --cLyellow: #FFD400;
    --cLgrayEE: #EEEEEE;
    --cLgrayF5: #F5F5F5;
    --cLgrayCC: #CCCCCC;
    --cLgray74: #747474;
    --cLblack04: #040404;
    --cLblack03: #030304;
    --cLblueGray: #61889B;
    --cLgainsboro: #DBDBDB;
    --cLbeigeCream: #F9F4EE;
    --cLlightYellow: #FEF1B1;
    --cLgreenBright: #35CB00;
    --cLoffWhiteBlue: #EFF3F6;
    
    padding: 0;
    line-height: 1.5;
    color: var(--cLgray41);
    font-size: min(17px,3.7vw);
    font-family: "Montserrat",sans-serif;
}
* {margin: 0;box-sizing: border-box;}
img {
    display: block;
    max-width: 100%;
}
main{overflow-x:clip;}
main>header{z-index:1000;}
.cliping {
    position: absolute;
    inset: 0;
    inset: 0;
    clip-path: inset(0rem round 0rem);
}
.overlay {position: absolute;inset: 0;z-index: 2;cursor: pointer;}
picture {
    height: 100%;
    display: block;
    overflow: hidden;
}
picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-width: inherit;
}
a{color: inherit;text-decoration:none;}
a:not(:is([class],ul.rs a)):hover{color:var(--cLyellow);}
a.logo { position: relative; display: block; width: min(217px,45vw); }
ul:not([class]){padding-left:1rem;}
ul[class]{padding-left:0;list-style: none;}
ul.rs{position:relative;display:flex;column-gap:min(1rem,3vw)}
ul.rs a{display:block;background-color: var(--cLyellow);border-radius: 8px;}
ul.rs a:hover {background-color: var(--cLblack03);color: var(--cLyellow);}
ul.rs a::before {padding:min(1.25rem,5vw); scale: .5;}
strong {font-weight: 600;}
[style^="--icn"]::before {
    position: relative;
    content: "";
    padding: .7rem;
    display: block;
    transition: initial;
    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: var(--icn);
    mask-image: var(--icn);
}
[style^="--icn"],.btn.next {display:inline-flex;align-items: center;column-gap: 10px;}
h1,h2,h3,h4,h5,h6 {line-height: 1.3;font-weight: 700;text-transform: uppercase;}
:is(h1,h2,h3,h4,h5,h6) :is(em,strong) {font-style: inherit;color: var(--cLyellow);}
h1 {font-size: min(40px,10vw);}
h2 {font-size: min(35px,7vw);}
h3 {font-size: min(35px,7vw);}
h4 {font-size: min(24px,5vw);}
h5 {font-size: min(20px,4vw);}
h6 {font-size: min(17px,4vw);}
.fs-55 {font-size: min(55px,6vw);}
.fs-41 {font-size: min(41px,6vw);}
.fs-36 {font-size: min(36px,6vw);}
.fs-35 {font-size: min(35px,6vw);}
.fs-26 {font-size: min(26px,5.2vw);}
.fs-24 {font-size: min(24px,5.1vw);}
.fs-16 {font-size: min(16px,3.5vw);}
.fw-900 {font-weight: 900;}
.fw-700 {font-weight: 700;}
.color-inherit {color: inherit;}
.txt-initial {text-transform: initial;}
.first-title {font-size: min(27px,5vw);font-weight: 300;}
section {position: relative;}
.flex,[class^=flex],[class^=row]{display:flex;flex-wrap:wrap}
.reverse:is(.flex,[class^=flex],[class^=row]){flex-direction:row-reverse;}
.y{flex-direction:column;row-gap:min(3.5rem,8vw);flex-wrap:nowrap;}
[class^=container]:not(:is([class*=leaflet])){width:100%;margin-inline:auto;}
.container{max-width:min(960px,85vw)}
.container-xl{max-width:min(1360px,85vw)}
.container-xxl{max-width:min(1480px,85vw)}
.container-xxxl{max-width:min(1700px,95vw)}
.container-max{max-width:min(1920px,95vw)}
[style*="--w"] {width: var(--w);}
.arrow{position:relative;z-index:2;font-size:0;outline:0;flex:0 0 auto;cursor:pointer;max-width:100%;overflow:hidden;width:max-content;border-radius:3rem;transition:.2s;display:inline-block;color:var(--cLblack03);padding:min(1.4375rem,4.5vw);background-color:var(--cLyellow);border:.065rem solid var(--cLyellow)}
.arrow.rotate {rotate: -45deg;}
.arrow::after,.arrow::before{content:"";inset:30%;display:block;transition:inherit;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)}
.arrow.rotate::after,.arrow.rotate::before {-webkit-mask-image:url(assets/images/arrow-line.svg);mask-image:url(assets/images/arrow-line.svg)}
.arrow.prev{transform:rotate(-180deg)}
.arrow::after{translate:-100% 0;opacity:0}
.arrow:hover{color:var(--clwhite);background-color:var(--cLyellow);border-color:var(--cLyellow);}
.arrow::after,.arrow::before,.cliping{position:absolute;pointer-events:none}
.arrow:hover::before{translate:100% 0;opacity:0}
.arrow:hover::after{translate:0 0;opacity:1}
[class^=btn-]{z-index:1;line-height:1;font-weight:700;border-radius:5px;font-size:inherit;display:inline-block;width:max-content;padding:min(.6875rem,3vw) min(1.2rem,4vw);white-space:inherit;text-transform:uppercase;transition:.3s;font-family:inherit;border:1px solid transparent;text-decoration:none}
[class^=btn-][style^=--icn]{display:    flex;align-items:center}
[class^=btn-][style^=--icn]:before{padding:.5rem;scale: 1.5}
[class^=btn-]>input{margin:0!important;line-height:1!important;}
[class^=btn-]:has( input) {cursor: pointer;}
[class^=btn-] input:is([type="submit"],[type="button"]) {
    border: none;
    outline: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    background: transparent;
}
.next[class^=btn-]::after{position:relative;content:'';scale:1.5;left:5%;padding:min(.5rem,1.7vw);display:inline-block;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.svg);mask-image:url(assets/images/arrow.svg)}
.next.rotate[class^=btn-]::after {rotate: -45deg;}
.next[class^=btn-]{display:inline-flex;column-gap:.5rem;align-items:center;line-height:0rem;justify-content:space-between}
[class^="text"]{
    position: relative;
    width: 100%;
    display: flex;
    row-gap: min(20px,3vw);
    flex-direction: column;
}
.text-center{align-items: center;text-align: center;}
.text-right{align-items: flex-end;text-align: right;}
.adventures + :is(h1,h2,h3,h4,h5,h6) {margin-top:calc(min(20px,3vw) * -1.1);}
[class^="text"] > p + p:not(:has(.btn)) {margin-top: calc(min(10px,1.6vw) * -1);}
.text-center > p:has([class^=btn-] + [class^=btn-]) {justify-content: center;}
[class^="text"] > p:has([class^=btn-] + [class^=btn-]) {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: min(1rem,4vw) 5%;
}
/* dynamique sections */
section:not(:is([class*="bg-"],:has( > .cliping))) + section:not(:is([class*="bg-"],:has( > .cliping))) > *:not(* ~ *) {padding-top: 0;}
/* other */
.line {
    position: relative;
    display: block;
    height: min(7px,2vw);
    width: min(135px,30%);
    margin-block: min(1rem,5vw) 0;
    background-color: var(--cLyellow);
}
.txt-btn {
    display: flow-root;
    font-weight: inherit;
    &::before {
        content: "";
        display: table;
        margin-bottom: calc(-0.5lh + 0.5em);
    }
    &::after {
        content: "";
        display: table;
        margin-bottom: calc(-0.5lh + 0.28em);
    }
}
[class*="underline"] {
    position: relative;
    &::after {
        position: relative;
        content: '';
        display: block;
        height: min(25px,2vw);
        width: min(135px,30%);
        margin-top: min(1rem,5vw);
    }
    &.underline-cLyellow::after {
        background-color: var(--cLyellow);
    }
    &.underline-cLblueGray::after {
        background-color: var(--cLblueGray);
    }
}
.link {
        color: var(--cLblueGray);
        text-decoration: underline;
}
.icn-circle {
    border-radius: 50%;
    width: min(136px,20vw);
    height: min(136px,20vw);
    padding: min(1.5rem,5vw);
    border: 5px solid #030304;
}
.logo-circle {
    width: max-content;
    border-radius: 50%;
    color: var(--cLyellow);
    padding: min(1.5rem,5vw);
    border: 5px solid currentColor;
}
.logo-circle[style^="--icn"]::before {padding: min(2.4rem,5vw);}
.icn-circle > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.check-list {
    display: flex;
    row-gap: min(0.6rem,4vw);
    flex-direction: column;
}
.check-list > li {
    position: relative;
    display: flex;
    column-gap: min(0.3rem,3vw);
}
.check-list > li::before {
    position: relative;
    content: '';
    flex: 0 0 auto;
    padding: min(0.7rem,3.5vw);
    background-color: var(--cLyellow); 
    -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(/wp-content/uploads/2025/07/check.svg);
    mask-image: url(/wp-content/uploads/2025/07/check.svg);
}
.rounded[class^=btn-] {border-radius: 2rem;}
.cLgray21 {color: var(--cLgray21);}
.bg-cLbeigeCream {background-color: var(--cLbeigeCream);}
.bg-cLoffWhiteBlue {background-color: var(--cLoffWhiteBlue);}
.bg-cLblueGray {background-color: var(--cLblueGray);}
:is(.bg-cLblueGray) {color: var(--cLwhite);}
.btn-cLgrayF4 {
    color: var(--cLblack04);
    border-color: var(--cLgrayF4);
    background-color: var(--cLgrayF4);
    &:hover {
        color: var(--cLgrayF4);
        border-color: var(--cLblack04);
        background-color: var(--cLblack04);
    }
}

.btn-cLyellow {
    color: var(--cLblack04);
    border-color: var(--cLyellow);
    background-color: var(--cLyellow);
    &:hover {
        color: var(--cLyellow);
        border-color: var(--cLblack04);
        background-color: var(--cLblack04);
    }
}

.btn-cLblueGray {
    color: var(--cLgrayF4);
    border-color: var(--cLblueGray);
    background-color: var(--cLblueGray);
    &:hover {
        color: var(--cLblack04);
        border-color: var(--cLyellow);
        background-color: var(--cLyellow);
    }
}
.btn-send {
    cursor: pointer;
    width: 100%;
    font-weight: 700;
    border-radius: 0;
    padding: min(1rem,4vw);
    font-size: min(17px,4vw);
    color: var(--cLblueGray);
    text-transform: uppercase;
    background-color: transparent;
    border: 2px solid var(--cLgray94);
}
.bg-cLgrayF5 {background-color: var(--cLgrayF5);}
.chevron-next[class^="btn-"]:not([style^="--icn:"]) {
    position: relative;
    display: flex;
    align-items: center;
}
.chevron-next[class^="btn-"]:not([style^="--icn:"])::before{
   position: relative;
   content: '';
   display: block;
   transition: initial;
   pointer-events: none;
   padding: min(.5rem,4vw);
    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/chevron-next.svg);
    mask-image: url(assets/images/chevron-next.svg);
}
/* breadcrumbs */
.breadcrumbs {
    position: relative;
    display: flex;
    line-height: 1;
    font-size: min(14px,3.6vw);
    color: var(--cLgray70);
}
.breadcrumbs a {text-decoration: underline;}
.breadcrumbs > li:not(:first-child) {display: flex;}
.breadcrumbs > li:not(:first-child)::before {
    position: relative;
    width: 1px;
    content: '';
    height: 100%;
    display: block;
    margin-inline: 10px;
    background-color: currentColor;
}
.product {
    position: relative;
    display: flex;
    row-gap: min(1rem,5vw);
    flex-direction: column;
    border-radius: 14px;
    padding: min(1rem,5vw);
    border: 1px solid #BCBCBC;
    & picture {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: min(0.6rem,4vw);
    }
    & .text-center {
        row-gap: 0;
        text-transform: uppercase;
    }
    & .text-center h6 {font-size: min(17px,5vw);}
}
.item-product {
    position: relative;
    display: flex;
    border-radius: 6px;
    width: min(341px,100%);
    row-gap: min(1rem,4vw);
    flex-direction: column;
    padding: min(2rem,5vw);
    font-size: min(14px,3vw);
    border: 1px solid #CBCBCB;
    background-color: var(--cLwhite);
    & picture {
        position: relative;
        width: 190px;
        display: block;
        margin-inline: auto;
    }
    & picture > img {transition: all .3s;}
    &:hover picture > img {scale: 1.03;}
    & h2 {
        font-size: inherit;
    }
    & [class^=btn-] {margin-inline: auto;}
    & [class^="text"] {
        flex: 1;
        & [class^=btn-] {margin-top: auto;}
        & ul {
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;  
        overflow: hidden;
        }
    }
}
/* links */
ul.links > li {
    position: relative;
    display: flex;
    column-gap: 5px;
    color: var(--cLgray78);
    font-size: min(15px,3.7vw);
}
ul.links > li a:hover {font-weight: 700;color: var(--cLblack03);}
ul.links > li::before {
    position: relative;
    content: '';
    padding: 5px;
    display: block;
    transition: inherit;
    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/rightarrow.svg);
    mask-image: url(assets/images/rightarrow.svg);
}
/* cat-garage */
.cat-garage {
    position: relative;
    flex: 0 0 auto;
    transition: all .3s;
    width: min(497px,100%);
}
.cat-garage:hover {background-color: var(--cLbeigeCream);}
.cat-garage picture {
    position: relative;
    aspect-ratio: 1/1.2;
}
.cat-garage .ct-slider {
    overflow: hidden;
    border-radius: 9px;
}
.cat-garage > .text { padding: min(20px,5vw) min(50px,7vw);}
.cat-garage .ct-image {position: relative;}
.cat-garage .ct-image .text {
    position: absolute;
    inset: 0;
    padding: min(20px,5vw);
    justify-content: flex-end;
}
.cat-garage .ct-image .text .title {
    width: min(324px,100%);
    color: var(--cLwhite);
    letter-spacing: -0.72px;
    font-size: min(32px,7vw);
    justify-content: flex-end;
    text-shadow: 0px 1px 4px #000000CF;
}
.cat-garage .links {z-index: 4;}
.cat-garage h3 {
    font-size: min(27px,6vw);
}
.pagination-nums {
    position: relative;
    display: flex;
    align-items: center;
    font-size: min(14px,4vw);
    justify-content: space-between;
    padding-top: min(1rem,5vw);
    border-top: 1px solid var(--cLblack);
    .paginated-nums {
        display: flex;
        align-items: center;
        column-gap: min(0.5rem,3vw);
        & li {
            & *:not(.current) {font-weight: 700;}
        }
        & .arrow {
            border: none;
            display: block;
            background-color: transparent;
            padding: min(0.8375rem,4.5vw);
        }
    }
}
/* slider */
.slick-list {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.slick-track {
    position: relative;
    display: flex;
}
.slick-track .slick-slide {z-index:0 !important;}
.slick-track .slick-slide.slick-active {z-index:1 !important;}
.pagination {
    position: relative;
    display: flex;
    column-gap: min(1rem,4vw);
}
.slick-dots {
    position: relative;
    display: flex;
    column-gap: min(.5rem,3vw);
}
.slick-dots button {
    font-size: 0;
    border: none;
    outline: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--cLlightYellow);
}
.slick-dots li.slick-active button {background-color: var(--cLyellow);}
/* article */
.ct-slider {
    position: relative;
    display: flex;
    column-gap: 2%;
}
.ct-slider > .article:nth-child(3) ~ .article {display: none;}
.article {
    position: relative;
    color: var(--cLwhite);
    width: max(32%,min(467px,100%));
    border-radius: 11px 0px 0px 11px;
    background-color: var(--cLblueGray);
}
.article figure {
    position: relative;
    transition: all .4s;
    aspect-ratio: 1/0.55;
}
.article:hover figure {background-color: var(--cLyellow);}
.article picture {border-radius: min(10rem,10vw) 0 0 0;}
.article .tag {
    position: absolute;
    top: 90%;
    opacity: 0;
    font-weight: 700;
    transition: all .4s;
    right: min(1rem,5vw);
    color: var(--cLyellow);
    letter-spacing: -0.36px;
    text-transform: uppercase;
    font-size: min(18px,5vw);
}
.article:hover .tag {
    opacity: 1;
    top: calc(100% + 0.2rem);
}
.article .text {
    padding: min(30px,10vw) min(25px,2vw) min(30px,3vw);
}
.article h3 {
    font-size: min(24px,4vw);
}
/* header */
header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    transition: all .3s;
    background-color: var(--cLwhite);
}
header > .container-xxxl {
    position: relative;
    padding-block: min(22px,3vw);
}
body.home header.sticky {background-color: var(--cLcharcoalGray);}
header .row {
    position: relative;
    align-items: center;
    gap: min(1rem,5vw) 5%;
    justify-content: space-between;
}
header .left {
    position: relative;
    flex: 0 0 auto;
}
header .center {
    position: relative;
    flex: 1 1 20%;
}
header .ct-search {
    position: relative;
}
header .ct-search input[type="search"] {
    position: relative;
    
}
header .right {
    position: relative;
    flex: 0 0 auto;
}
header [class^=btn-][style^=--icn]:before {padding: .5rem 0.7rem;}
header ul.nav {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: min(.7rem,3vw);
    & [class^="btn-"] {
        font-weight: 400;
        text-transform: initial;
        font-family: 'Helvetica Neue LT Std';
        &:is(.account [class^="btn-"]) { font-weight: 700;}
    }
}
header ul.nav li:not(.account) > [class^="btn-"] {font-weight:400;}
/* nav */
header .ct-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    visibility: hidden;
    pointer-events: none;
    width: min(500px, 100vw)
}
header.nav-is-open .ct-nav {
    visibility: visible;
    pointer-events: visible
}
header .ct-nav nav {
    position: relative;
    left: 100%;
    height: 100%;
    transition: .2s;
    text-align: left;
    font-size: min(20px, 5vw);
    padding: 8rem 1.5rem 2rem;
    background-color: var(--cLwhite);
}
header.nav-is-open .ct-nav nav {
    transform: translateX(-100%)
}
header .ct-nav nav .primary {
    position: relative;
    height: 100%;
    display: flex;
    row-gap: 1.5rem;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-direction: column;
    font-size: min(15px,4vw);
    text-transform: uppercase;
}
header .primary > li:has( > [class^="btn-"]) {
    text-align: center;
    justify-content: center;
    display: flex;
}
/* font-weight: 700; */
header .primary li:hover > a {color: var(--cLgray41) !important;}
header ul.other-nav {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: min(1rem,5vw);
}
header ul.other-nav .search-btn {display: flex;}
header ul.other-nav .search-btn::before {padding: min(1rem,5vw);}
header .open-nav {
    position: relative;
    z-index: 2;
    height: 28px;
    row-gap: 8px;
    display: flex;
    transition: .2s;
    cursor: pointer;
    margin-left: auto;
    width: max-content;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--cLblack03);
}
header.nav-is-open .open-nav {
    row-gap: 0;
    transform: rotate(45deg)
}
header .open-nav>span {
    width: 2rem;
    height: .15rem;
    line-height: 0;
    transition: .3s;
    border-radius: 1rem;
    pointer-events: none;
    background: currentColor;
    transform-origin: 55% center
}
header.nav-is-open .open-nav>span:nth-child(2) {
    display: none
}
header.nav-is-open .open-nav>span:first-child {
    transform: translate(-.1rem, .2rem) rotate(90deg)
}
header .sub-menu {display: none;}
header .primary li ul {
    position: relative;
    /* height: 0; */
    display: flex;
    row-gap: 1rem;
    overflow: hidden;
    transition: height .3s;
    width: min(300px,70vw);
    flex-direction: column;
}
header .primary li {
    position: relative;
    transition: all .3s;
}
header .primary li.opne-sub-menu ul {
   height: var(--h);
}
header .primary li > .up-down {
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 2;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    justify-content: flex-end;
}
header .primary li > .up-down::before {
    position: absolute;
    inset: 0;
    content: '';
    display: block;
    transition: all .2s;
    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(assets/images/chevron-right.svg);
    mask-image: url(assets/images/chevron-right.svg);
}
header .primary li.opne-sub-menu > .up-down::before {rotate: -180deg;}
/* header .primary li > .up-down::before {
    position: absolute;
    inset: 0px;
    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("assets/images/chevron-right.svg");
    mask-image: url("assets/images/chevron-right.svg");
} */
/* grid-cats */
.grid-cats {
    position: relative;
    width: 100vw;
    display: flex;
    margin-left: -7.5vw;
    overflow-x: scroll;
    padding-inline: 7.5vw;
    scrollbar-width: none;
    scroll-behavior: smooth;
    column-gap: max(1rem,3%);
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: transparent transparent;
}
.grid-cats::-webkit-scrollbar {display: none}
.grid-cats .cat {width: max(min(400px,80vw),32%);}
.cat {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1/0.65;
    scroll-snap-align: center;
    background: var(--cLWhite);
    border: 1px solid rgba(28, 63, 57, 0.10);
    & picture {
        border-radius: 6px;
        & img {
            scale: 1.05;
            transition: all .3s;
            &:is(.cat:hover &) {
                scale: 1;
                filter: brightness(0.5);
            }
        }
    }
    & .text {
        position: absolute;
        inset: 0;
        z-index: 1;
        color: var(--cLwhite);
        padding: min(20px,5vw);
        letter-spacing: -0.72px;
        justify-content: flex-end;
        text-shadow: 0px 1px 4px #000000CF;
    }
}
/* sc1 */
.sc1 {
    & .container {padding-block: min(43px,10vw);}
    & [class^="text"] > :is(h1,h2,h3,h4,h5,h6,[class="fs-"]) + p {margin-top:calc(min(10px,2vw) * -1);}
    /* & .onglet {
        display: grid;
        overflow: hidden;
        transition: all .3s;
        grid-template-rows: 8em 0fr;
        &.open-sub-menu {
            grid-template-rows: 1.5em 1fr;
            }
            } */
    & .onglet {
        position: relative;
        display: grid;
        transition: all .3s;
        grid-template-rows: 8em 0fr;
        margin-bottom: min(20px,10vw);
        padding-bottom: min(20px,10vw);
        border-bottom: 1px solid var(--cLgray94);
        &:hover {
            grid-template-rows: 8em 1fr;
        }
        &::after {
            position: absolute;
            right: 0;
            top: 100%;
            display: block;
            margin-top: 5px;
            cursor: pointer;
            content: 'Lire plus';
            color: var(--cLgray94);
            font-size: min(15px,3.5vw);
            background-repeat: no-repeat;
            padding-right: min(1.4rem,5vw);
            background-size: min(13px,3.5vw);
            background-position: right center;
            background-image: url(assets/images/onglet-down.svg);
        }
        &:hover::after {content: '';}
        & .text {
            position: relative;
            overflow: hidden;
            &.body {margin-top: min(15px,3.5vw);;}
        }
    }
}
/* .sc1 .onglet .body {overflow: hidden;} */
/* sc2 */
.sc2 .container-xl {padding-block: min(40px,10vw);}
/* sc3 */
.sc3 {border-bottom: min(16px,3vw) solid var(--cLyellow);}
.sc3 .row {column-gap: 8%;}
.sc3 .row .left {
    position: relative;
    flex: 1 1 max(350px,60%);
}
.sc3 .row .right {
    position: relative;
    flex: 1 1 max(350px,25%);
}
.sc3 .row .text {padding-block: min(87px,10vw);}
/* sc4 */
.sc4 .container-xxl {
    position: relative;
    padding-block: min(5rem,10vw);
}
:is(.sc4,.sc19) .slick-dots {
    column-gap: 0;
    width: 88.4vw;
    flex: 0 0 auto;
    background-color: var(--cLlightYellow);
}
:is(.sc4,.sc19) .slick-dots > li {flex: 1;}
:is(.sc4,.sc19) .slick-dots button {
    width: 100%;
    border-radius: 0;
    display: block;
}
:is(.sc4,.sc19) .ct-slider {clip-path: inset(0 -50vw 0 0 round 0rem);}
:is(.sc4,.sc19) .slick-list {overflow: visible;}
:is(.sc4,.sc19) .slick-track .slick-slide {margin-right: min(2rem,5vw);}
:is(.sc4,.sc19) .slick-dots button {background-color: var(--cLyellow);}
:is(.sc4,.sc19) .slick-dots li.slick-active:not(:has( ~ li)) button,
:is(.sc4,.sc19) .slick-dots li.slick-active ~ li button {background-color: transparent;}
/* sc5 */
.sc5 :is(.container-xxl,.container-xxxl) {padding-block:min(5rem,10vw);}
.sc5 .row {
    color: var(--cLwhite);
    overflow: hidden;
    border-radius: 11px 0px 0px 11px;
    background-color: var(--cLblueGray);
}
.sc5 .left {
    position: relative;
    flex: 1 1 max(300px,60%);
}
.sc5 .right {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 max(300px, 40%);
}
.sc5 .right .text {padding: min(50px,7vw) min(60px,7vw);}
/* sc6 */
.sc6 .container-xl {padding-block: min(5rem,10vw);}
.sc6 .row {gap: min(2rem,7vw) 10%;}
.sc6 .text-center {flex: 1 1 max(300px,45%);}
/* sc7 */
.sc7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(818px,50vw);
    border-bottom: min(16px,3vw) solid var(--cLyellow);
}
/* sc8 */
.sc8 .container-xl {padding-block: min(4rem,10vw);}
.sc8 .row {gap: min(2rem,7vw) 7%;}
.sc8 .left {flex: 1 1 max(300px,50%);}
.sc8 .right {
    margin-block: auto;
    flex: 1 1 max(300px,35%);
}
/* sc9 */
.sc9 .container-xxl {
    padding-block: min(2rem,4vw);
}
/* sc10 */
.sc10 .container-xxl {padding-block: min(4rem,10vw);}
.sc10 .row {
    position: relative;
    width: 100vw;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-left: -7.5vw;
    padding-inline: 7.5vw;
    scrollbar-width: none;
    scroll-behavior: smooth;
    column-gap: max(1rem,2%);
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: transparent transparent;
}
.sc10 .listing::-webkit-scrollbar {
    display: none
}
.sc10 .row > .cat-garage  {
    scroll-snap-align: center;
    width: max(min(400px,85vw),32%)
}
.sc10 .pagination {
    position: relative;
    padding: 8px 10px;
    align-items: center;
    margin-inline: auto;
    border-radius: 1rem;
    background-color: var(--cLwhite);
}
.sc10 .pagination .arrow {
    padding: 6px;
    border: none;
    background-color: transparent;
}
.sc10 .pagination .prev {order: 1;}
.sc10 .pagination .slick-dots {order: 2;}
.sc10 .pagination .next {order: 3;}
.sc10 .pagination .slick-dots button {display: block;}
.sc10 .pagination .arrow::after, .sc10 .pagination .arrow::before {
    inset: 0;
    -webkit-mask-image: url(assets/images/rightarrow.svg);
    mask-image: url(assets/images/rightarrow.svg);
}
/* sc11 */
.sc11 {
    & .container {
        padding-block: min(5rem,10vw);
        & .custom-file {
            gap: 10px;
            cursor: pointer;
            align-items: center;
            display: inline-flex;
            & input[type="file"] {
               display: none;
            }
            & .custom-file-text {
                color: #333;
            }
            & .custom-file-icon {
                position: relative;
                display: flex;
                width: 40px;
                height: 40px;
                font-size: 20px;
                border-radius: 50%;
                align-items: center;
                color: var(--cLwhite); 
                justify-content: center;
                transition: background 0.3s;
                background: var(--cLblueGray); 
                & .icon-file {
                    position: absolute;
                    inset: 19%;
                    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/download-file.svg);
                    mask-image: url(assets/images/download-file.svg);
                }
            }
            & .custom-file:hover .custom-file-icon {
                background: var(--cLblueGray);
            }
        }





    }
}
/* sc12 */
.sc12 .container {padding-block: min(3rem,10vw);}
.sc12 .row {gap: min(2rem,5vw) 5%;align-items: center;}
.sc12 .left {flex: 1 1 max(300px,30%);}
.sc12 .right {flex: 1 1 max(300px,50%);}
/* sc13 */
.sc13 .container {padding-block: min(5rem,10vw);}
.sc13 .row {
    position: relative;
    gap: min(1rem,5vw) 2%;
}
.sc13 .row > picture {
    position: relative;
    width: 32%;
    aspect-ratio: 1/.6;
    padding: min(20px,5vw);
    border-radius: min(22px,4vw);
    background-color: var(--cLwhite);
    border: 1px solid var(--cLgray70);
    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
/* sc14 */
.sc14 .container-xxl {padding-block: min(5rem,10vw);}
.sc14 ul.liste {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: min(1rem,4vw) 3%;
}
.sc14 ul.liste > li {
    position: relative;
    width: 100%;
    display: flex;
    column-gap: 1rem;
    align-items: center;
}
.sc14 ul.liste > li > picture {
    flex: 0 0 auto;
    aspect-ratio: 1/1;
    border-radius: 10px;
    width: min(143px,30vw);
    height: min(149px,30vw);
}
.sc14 ul.liste h5 {font-size: min(17px,6vw);}
/* sc15 */
.sc15 .container {padding-block: min(5rem,10vw);}
.sc15 .row {gap: min(2rem,5vw) 5%;align-items: center;}
.sc15 .left {flex: 1 1 max(300px,40%);}
.sc15 .right {flex: 1 1 max(300px,50%);}
.sc15 h5 {font-size: min(22px,6vw);}
/* sc16 */
.sc16 .container-xl {padding-block: min(5rem,10vw);}
.sc16 .row {gap: min(4rem,12vw) 10%}
.sc16 .row > :is(.left,.right) {
    display: flex;
    row-gap: min(5rem,8vw);
    flex-direction: column;
}
.sc16 .row .logo {
    width: 100%;
    object-fit: contain;
    height: min(106px,17vw);
    object-position: left center;
}
.sc16 .row .flex {
    position: relative;
    gap: min(2rem,5vw) 10%;
}
.sc16 .flex > article {
    position: relative;
    display: flex;
    row-gap: min(1rem,4vw);
    flex-direction: column;
    flex: 1 1 max(200px,45%);
}
.sc16 .right .flex > article {width: 100%;}
.sc16 .flex article > picture {
    position: relative;
    width: 100%;
    height: min(348px,80vw);
    border-radius: min(14px,4vw);
}
/* sc17 */
.sc17 .container-xl {padding-block: min(5rem,10vw);}
.sc17 .row {
    position: relative;
    gap: min(2rem,7vw) 5%;
    justify-content: center;
}
.sc17 .row > article {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: min(2rem, 5vw);
}
.sc17 article > picture {
    position: relative;
    width: 100%;
    height: min(348px,80vw);
    border-radius: min(14px,4vw);
    border: 1px solid #BCBCBC;
}
/* sc18 */
.sc18 .container-xxl {padding-block: min(5rem,10vw);}
.sc18 .ct-slider {clip-path: inset(0 -50vw 0 0 round 0rem);}
.sc18 .slick-dots {
    width: 100%;
    column-gap: 0;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--cLgrayCC);
}
.sc18 .slick-dots > li {flex: 1;}
.sc18 .slick-dots:not(:has(> li~li)) > li {display: none;}
.sc18 .slick-dots button {
    width: 100%;
    display: block;
    border-radius: 0;
}
.sc18 .slick-list {overflow: visible;}
.sc18 .slick-track .slick-slide {margin-right: min(2rem,5vw);}
.sc18 .slick-dots li.slick-active button,
.sc18 .slick-dots button {background-color: var(--cLgrayCC);}
.sc18 .slick-dots li.slick-active ~ li button {background-color: transparent;}

.smal-italic {
    font-weight: 400;
    font-style: italic;
    font-size: min(17px,6vw);
    text-transform: uppercase;
}
/* sc19 */
.sc19 .container-xxl {padding-block: min(5rem,5vw);}
.realisations {
    position: relative;
    height: min(213px,60vw);
    background-color: var(--cLyellow);
    border-bottom: min(12px,3vw) solid var(--cLyellow);
    background-image: url(assets/images/search-zoom.svg);
    background-size: min(1.5rem,5vw);
    background-position: 93% 93%;
    background-repeat: no-repeat;
}
.realisations picture {transition: all .3s;}
.realisations:hover picture {border-radius: 0 0 min(10rem,10vw) 0;}
/* sc20 */
.sc20 .container-xxl {padding-block: min(5rem,10vw);}
/* sc21 */
.sc21 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(532px,50vw);
    & .container {padding-block: min(5rem,10vw);}
}
/* sc22 */
.sc22 {
    & .container-xl {padding-block: min(5rem,10vw);}
    &:is(.sc21 + .sc22) {
        z-index: 2;
        margin-top: calc(min(5rem,10vw) * -3);
        & .text-center {
            margin-inline: auto;
            width: min(1010px,100%);
            border-radius: min(21px,5vw);
            background-color: var(--cLwhite);
            padding: min(2rem,5vw) min(3rem,5vw);
            &::before {
                position: absolute;
                content: '';
                display: block;
                height: min(25px,2vw);
                width: min(135px,30%);
                top: calc(min(25px,2vw) / -2);
                background-color: var(--cLyellow);
            }
        }
    }
}
/* sc23 */
.sc23 {
    & .container-xl {padding-block: min(5rem,10vw);}
    & .row {
        align-items: center;
        gap: min(2rem,5vw) 5%;
        &:is(.round-style .row) {align-items: inherit;}
        & .left {
            flex: 1 1 max(300px,50%);
            & picture:is(.round-style picture) {
                border-radius: min(102px,5vw) 0px min(102px,5vw) 0px
            }
        }
        & .right {
            flex: 1 1 max(300px,40%);
            & .text {
                & :is(h1, h2, h3, h4, h5, h6) {
                    & .underline-cLyellow {
                        line-height: 1;
                        vertical-align: text-bottom;
                        &::after {
                            margin: 0 10px 0 0;
                            display: inline-block;
                        }
                    }
                    &:has(.underline-cLyellow) em {
                        color: inherit;
                        font-weight: 400;
                        letter-spacing: -0.52px;
                    }
                }
                & .sub-title {
                    font-size: min(20px,5vw);
                    text-transform: uppercase;
                }
                & > p:has(img + img) {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: min(1rem,4vw);
                    padding-bottom: min(3rem,5vw);
                    border-bottom: 1px solid var(--cLgrayCC);
                    & img {
                        object-fit: contain;
                        width: min(234px,40vw);
                        height: min(112px,20vw);
                        object-position: left bottom;
                    }
                }
            }
        }
    }
}
/* sc24 */
.sc24 {
    & .container-xxl {
        padding-block: min(5rem,10vw);
        @media screen and (width >= 1200px) {
           &:is(.sc24:has(+ .sc24) .container-xxl) {padding-bottom: 0;}
        }
    }
    & .row {
        align-items: flex-end;
        gap: min(2rem,5vw) 5%;
        & .left {
           flex: 1 1 max(300px,35%);
            & picture {
                @media screen and (width >= 1200px) {
                   margin-inline: -12.6vw 0;
                }
                &:is(.row.reverse picture)  {
                    @media screen and (width >= 1200px) {
                       margin-inline: 0 -12.6vw;
                    }
                }
                & img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        & .right {
            flex: 1 1 max(300px,50%);
            @media screen and (width >= 1200px) {
                padding-bottom: min(3rem,5vw);
            }
            & .text > p {
                display: block;
                width: min(624px,100%);
            }
        }
    }
}
/* sc25 */
.sc25 {
    & .container-xxl {padding-block: min(5rem,10vw);}
}
/* sc26 */
.sc26 {
    & .container-xxl {
        padding-block: min(5rem,10vw);
        & .row {
            gap: min(2rem,5vw) 5%;
            & .left {
                flex: 1 1 max(250px,20%);
                & .filters-container {
                    width: 100%;
                    padding: 28px;
                    border-radius: 5px;
                    height: fit-content;
                    background-color: var(--cLwhite);
                    & .filters-title {
                        display: flex;
                        align-items: center;
                        font-size: min(14px,4vw);
                        color: var(--cLblueGray);
                        padding-bottom: min(1rem,5vw);
                        justify-content: space-between;
                        border-bottom: 1px solid var(--cLgray70);
                        & .filter-count {
                            display: flex;
                            aspect-ratio: 1/1;
                            font-size: 12px;
                            font-weight: 500;
                            text-align: center;
                            border-radius: 2rem;
                            align-items: center;
                            color: var(--cLwhite);
                            height: min(1.5rem,3vw);
                            justify-content: center;
                            background-color: var(--cLblueGray);
                        }
                    }
                    & .filter-title {
                        display: flex;
                        font-weight: 700;
                        align-items: center;
                        font-size: min(14px,4vw);
                        text-transform: uppercase;
                        padding-block: min(1rem,4vw);
                        justify-content: space-between;
                        & .collapse-icon {
                            position: relative;
                            display: block;
                            cursor: pointer;
                            width: max-content;
                            transition: all .3s;
                            &::before {
                                position: relative;
                                content: '';
                                padding: min(.6rem,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: url(assets/images/arrow-down.svg);
                                mask-image: url(assets/images/arrow-down.svg);
                            }
                            &:is(.filter-group.active .collapse-icon) {rotate: -180deg;}
                        }
                    }
                    & .filter-group {
                        position: relative;
                        display: grid;
                        transition: all .3s;
                        grid-template-rows: 3em 0fr;
                        border-bottom: 1px solid var(--cLgray70);
                        &.active {
                            grid-template-rows: 3em 1fr;
                        }
                        & .filter-content {
                            position: relative;
                            overflow: hidden;
                            & .filter-options {
                                & .filter-option {
                                    display: flex;
                                    cursor: pointer;
                                    position: relative;
                                    align-items: center;
                                    font-size: min(15px,4vw);
                                    transition: background-color 0.2s;
                                    border-bottom: 1px solid #f0f0f0;
                                    padding: min(1rem,4vw) min(.6rem,4vw);
                                    &.selected {background-color: var(--cLgrayEE);}
                                    &::before {
                                        width: 8px;
                                        content: "";
                                        height: 8px;
                                        border-radius: 50%;
                                        margin-right: 12px;
                                        transition: all 0.2s;
                                        display: inline-block;
                                        background-color: var(--cLblueGray);
                                    }
                                    &.selected::before {
                                        transform: scale(1.3);
                                        background-color: var(--cLyellow);
                                    }
                                }
                            }
                        }
                    }
                    & .filter-actions {display: none;}
                    & .slider-track {
                        position: absolute;
                        top: 0;
                        height: 6px;
                        border-radius: 3px;
                        background-color: var(--cLyellow);
                    }
                    & .slider-thumb {
                        position: absolute;
                        top: 50%;
                        z-index: 2;
                        width: 22px;
                        height: 22px;
                        cursor: pointer;
                        border-radius: 50%;
                        background-color: var(--cLwhite);
                        border: 2px solid var(--cLgray70);
                        transform: translateY(-50%);
                        &::before {
                            position: absolute;
                            inset: 16%;
                            content: '';
                            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(assets/images/arrow-down.svg);
                            mask-image: url(assets/images/arrow-down.svg);
                            &:first-of-type::before {
                                rotate: -90deg;
                            }
                            &:last-of-type::before {
                                rotate: -90deg;
                            }
                        }
                    }
                    & .btn-apply {
                        color: var(--cLwhite);
                        background-color: var(--cLblueGray);
                        &:hover {
                            transform: translateY(-2px);
                            background-color: var(--cLgray21);
                        }
                    }


                    .btn-reset {
                        background-color: #f8f9fa;
                        color: #7f8c8d;
                        border: 1px solid #e0e0e0;
                    }

                    .btn-reset:hover {
                        background-color: #e9ecef;
                        transform: translateY(-2px);
                    }

                }
            }
            & .right {
                flex: 1 1 max(350px,65%);
                & .filter {
                   display: flex;
                   gap: min(1rem,5vw);
                   align-items: center;
                   justify-content: flex-end;
                   & select {
                       border-radius: 5px;
                       padding-block: 5px !important;
                       width: min(173px,100%) !important;
                   }
                }
                & ul.tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: min(1rem,2vw) 2%;
                    & li a {
                        cursor: pointer;
                        font-weight: 700;
                        border-radius: 2rem;
                        transition: all 0.2s;
                        color: var(--cLgray21);
                        font-size: min(14px,4vw);
                        text-transform: uppercase;
                        background-color: var(--cLwhite);
                        border: 1px solid var(--cLgray70);
                        padding: min(.5rem,2vw) min(1.4rem,5vw);
                        &:hover {
                            color: var(--cLwhite);
                            border-color: var(--cLblueGray);
                            background-color: var(--cLblueGray);
                        }
                    }
                }
                & .listing {
                    position: relative;
                    display: flex;
                    flex-wrap: wrap;
                    gap: min(1rem,4vw) 2%;
                    & .item-product { 
                        width: 32%; 
                        @media screen and (width <= 900px) {
                            & { width: 49%; }
                        }
                        @media screen and (width <= 600px) {
                            & { width: 100%; }
                        }
                    }
                }
            }
        }
    }
}
.sc26 .item-product picture {
    width: 100%;
    margin-inline: auto;
    max-height: 160px;
}
/* sc27 */
.sc27 {
    & .container-xl {padding-block: min(5rem,10vw);}
    & .row {
        align-items: center;
        gap: min(2rem,5vw) 5%;
        border-bottom: 1px solid var(--cLgrayCC);
        &:is(.round-style .row) {align-items: flex-end;}
        & .left {
            flex: 1 1 max(300px,50%);
            & picture {
                height: min(262px,60vw);
                border-radius: min(102px,5vw) 0px min(102px,5vw) 0px
            }
        }
        & .right {
            flex: 1 1 max(300px,40%);
            & .text {
                & :is(h1, h2, h3, h4, h5, h6) {
                     & .underline-cLyellow {
                        line-height: 1;
                        vertical-align: text-bottom;
                        &::after {
                            margin: 0 10px 0 0;
                            display: inline-block;
                        }
                    }
                    &:has(.underline-cLyellow) em {
                        color: inherit;
                        font-weight: 400;
                        letter-spacing: -0.52px;
                    }
                }
                & .sub-title {
                    font-size: min(20px,5vw);
                    text-transform: uppercase;
                }
                & > p:has(img + img) {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: min(1rem,4vw);
                    padding-bottom: min(3rem,5vw);
                    border-bottom: 1px solid var(--cLgrayCC);
                    & img {
                        object-fit: contain;
                        width: min(234px,40vw);
                        height: min(112px,20vw);
                        object-position: left bottom;
                    }
                }
            }
        }
        @media screen and (width <= 900px) {
            padding-bottom: min(3rem,5vw);
        }
    }
}
/* sc-pagination-nums */
.sc-pagination-nums {
    & .container-xl {padding-block: min(3rem,5vw);}
}
/* sc-bandeau */
.sc-bandeau .container {padding-block: min(5rem,10vw);}
/* Filter */
/* .filters-container {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 360px;
    padding: 28px;
    height: fit-content;
} */
.filters-header {
    margin-bottom: 32px;
    position: relative;
}
/* 
.filters-title {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.divider {
    height: 3px;
    background: linear-gradient(90deg, #3498db, #2ecc71, transparent);
    border-radius: 3px;
    margin-top: 4px;
} */

/* .filter-group {
    margin-bottom: 28px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 16px;
    background: #fafbfc;
    transition: all 0.3s ease;
} */
/* 
.filter-group:hover {
    border-color: #d6e4f0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
} */

/* .filter-title {
    font-size: 17px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
} */

/* .filter-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(to bottom, #3498db, #2ecc71);
    margin-right: 12px;
    border-radius: 2px;
} */

.price-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.price-input-container {
    flex: 1;
    position: relative;
}

.price-input-container::before {
    content: "€";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #7f8c8d;
    font-weight: 500;
}

.price-input {
    width: 100%;
    padding: 12px 12px 12px 28px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s;
    background: #fff;
}

.price-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.slider-container {
    padding: 16px 0;
}

.price-slider {
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    position: relative;
    margin: 24px 0;
}

.slider-thumb {
    width: 22px;
    height: 22px;
    background-color: white;
    border: 2px solid #3498db;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: all 0.2s;
}

.slider-thumb:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.slider-values {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: #7f8c8d;
    font-size: 14px;
}

/* form login  */
.loginform {
    max-width: 400px;
    margin: -25px auto 25px;
}

.loginform #loginform  {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.loginform #wp-submit {
  cursor: pointer;
  width: 100%;
  font-weight: 700;
  border-radius: 0;
  padding: min(1rem,4vw);
  font-size: min(17px,4vw);
  color: var(--cLblueGray);
  text-transform: uppercase;
  background-color: transparent;
  border: 2px solid var(--cLgray94);
}

.sc11-tabs { 
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
    padding: 18px;
    background: #fff;
    border-radius: 8px;
    width: 100%;
}
.tabs-nav { background: #f4f4f4; padding: 12px; border-radius: 8px; }
.tabs-list { list-style: none; margin: 0; padding: 0; }
.tab-btn { display:block; width:100%; text-align:left; padding:10px 12px; border:none; background:transparent; cursor:pointer; font-weight:600; color:#212121; margin-bottom:6px; border-radius:6px; }
.tab-btn:hover { background: rgba(97,136,155,0.06); }
.tab-btn.active { background: linear-gradient(90deg, rgba(97,136,155,0.08), rgba(255,212,0,0.03)); border-left:4px solid #ffd400; color:#61889b; }

.tabs-content { background:#fff; padding:14px; border-radius:8px; min-height:200px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.panel-title { margin:0 0 12px 0; color:#212121; font-size:18px; }

.doc-list { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.doc-item { width: 100%; display:flex; align-items:center; justify-content:space-between; padding:10px; border:1px solid #eee; border-radius:8px; background:#fafafa; }
.doc-item:hover {background-color:#ebebeb;}
.doc-meta { display:flex; flex-direction:column; gap:4px; flex: 1; }
.doc-name { display: block;
    white-space: normal; 
    overflow: visible;
    font-weight: 600;
    color: #212121;
    line-height: 1.35; }
.doc-type { font-size:12px; color:#61889b; background:#f4f4f4; padding:2px 6px; border-radius:4px; width:fit-content; }

.doc-actions { display:flex; align-items:center; gap:8px; }
.btn-download { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px; text-decoration:none; background:#ffd400; color:#212121; font-weight:600; }
.icon { width:18px; height:18px; display:inline-block; }

/* Sous-catégories (menu gauche) */
.subcat-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0 0 0 6px;
    display: none; /* affiché uniquement pour la catégorie active */
}
.cat-item.active .subcat-list,
.subcat-list[data-visible="1"] {
    display: block;
}
.subcat-list li { margin-bottom:6px; }
.subcat-btn {
    display: inline-block;
    padding: 6px 10px;
    border-radius:6px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #212121;
    text-align: left;
}
.subcat-btn:hover { background: rgba(97,136,155,0.05); color: #61889b; }
.subcat-btn.active {
    background: linear-gradient(90deg, rgba(97,136,155,0.08), rgba(255,212,0,0.03));
    color: #61889b;
    border-left: 3px solid #ffd400;
}

/* small spacing when subcats exist */
.cat-item { padding-bottom: 8px; }

/* ensure doc meta occupies full width so titles wrap nicely */
.doc-item .doc-meta { flex: 1 1 auto; min-width: 0; }
.doc-item .doc-actions { flex: 0 0 auto; margin-left: 16px; }

/* improve the "Aucun document" state */
.doc-empty { padding: 12px; color: #666; }


/* icon color hints */
.icon-file.pdf { fill:#b30000; }
.icon-file.doc { fill:#1e73be; }
.icon-file.xls { fill:#2e8b57; }

/* Mobile -> accordion */
@media (max-width:880px) {
    .sc11-tabs { grid-template-columns: 1fr; gap:12px; }
    .tabs-content { padding:0; background:transparent; }
    .tab-panel { display:block; border-top:1px solid #eee; padding:10px 0; }
    .tab-panel .panel-title { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:10px; background:#f4f4f4; border-radius:6px; }
    .doc-list { display:none; margin-top:8px; }
    .tab-panel.expanded .doc-list { display:grid; }
}
.loginform { max-width:420px; margin:0 auto; padding:20px; background:#fff; border-radius:8px; }
.pt-fx {padding-bottom: 0px !important;}



/* .filter-options {
    list-style: none;
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
}

.filter-options::-webkit-scrollbar {
    width: 6px;
}

.filter-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.filter-options::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 3px;
} */

/* .filter-option {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    padding-left: 14px;
    border-radius: 6px;
    position: relative;
}

.filter-option:hover {
    background-color: #f0f7ff;
}

.filter-option::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #3498db;
    border-radius: 50%;
    margin-right: 12px;
    transition: all 0.2s;
} */

/* .filter-option.selected {
    background-color: #e3f2fd;
    font-weight: 600;
}

.filter-option.selected::before {
    background-color: #2ecc71;
    transform: scale(1.3);
} */

/* .filter-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn {
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-apply {
    background: linear-gradient(to right, #3498db, #2ecc71);
    color: white;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-apply:hover {
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
    transform: translateY(-2px);
}

.btn-reset {
    background-color: #f8f9fa;
    color: #7f8c8d;
    border: 1px solid #e0e0e0;
}

.btn-reset:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
} */

/* .collapse-icon {
    margin-left: auto;
    transition: transform 0.3s;
    color: #7f8c8d;
} */

/* .filter-content {
    overflow: hidden;
    transition: max-height 0.4s ease-out;
} */

@media (max-width: 400px) {
    .filters-container {
        padding: 20px;
    }
    
    .price-inputs {
        flex-direction: column;
    }
}
/* footer */
footer .container-xl {
    position: relative;
    padding-block: min(5rem,10vw);
}
footer .logo {
    width: min(160px,100%);
    mix-blend-mode: multiply;
}
footer ul.nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: min(2rem,10vw) 5%;
    justify-content: space-between;
}
footer ul.nav ul {
    position: relative;
    display: flex;
    padding-left: 0;
    list-style: none;
    row-gap: min(.7rem,4vw);
    flex-direction: column;
}

/* custom sc18 + 19 */
.product {
  position: relative;
  overflow: visible;
  /* taille et layout selon ton design */
}

/* description overlay — départ cachée */
.product__desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%); /* en dehors (à faire "monter" ou "dérouler" selon souhait) */
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.7); /* adapt */
  color: #fff;
  padding: 1rem;
  max-height: 70%;
  overflow: auto;
  transition: transform 300ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease;
  will-change: transform, opacity;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  font-size: 14px;
}

/* état visible (hover / focus-within) */
.product:hover .product__desc,
.product:focus-within .product__desc,
.product.open .product__desc { /* .open pour JS */
  transform: translateY(0%);
  opacity: 1;
  pointer-events: auto;
}

/* bouton toggle (pour mobile) */
.product__toggle {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  background: #ffd400;
  border: none;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: none; /* affiché en mobile via media query */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* mobile : bouton visible et on passe en interaction "clic" */
@media (pointer: coarse), (max-width: 900px) {
  .product__toggle { display:flex; }
  /* Eviter la révélation au survol sur mobile */
  .product:hover .product__desc { transform: translateY(100%); opacity: 0; pointer-events:none; }
}

/* accessibilité : respect préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .product__desc { transition: none; }
}


@media (min-width:768px) {
   .grid-cats {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        padding-inline: 0;
        gap: min(1.5rem,3vw) 2%;
    }
    .grid-cats .cat {flex: 1 1 300px;}
    /*  */
    .sc17 .row > article {
        position: relative;
        width: 40%;
    }
}
@media (max-width:1199px) {
    .desk {display: none !important}
    /* header + section:not(:is(.sc1)) {padding-top: min(8rem,25vw);} */
    header .primary li ul {
        width: 100%;
        margin-top: min(1rem,5vw);
    }
    header .primary li:has(>label>input:checked)>ul {
        opacity: 1;
        height: auto;
        margin-top: 1rem;
        visibility: visible;
        pointer-events: inherit;
    }
    header .center {
        position: absolute;
        opacity: 0;
        width: 100%;
        visibility: hidden;
        top: calc(100% + min(22px,3vw));
    }
    header.open-search .center {
        opacity: 1;
        visibility: visible;
    }
    header .primary li:has( > ul) {
        display: grid;
        transition: all .3s;
        grid-template-rows: 1.5em 0fr;
    }
    header .primary li:has( > ul).open-sub-menu {
        grid-template-rows: 1.5em 1fr;
    }
    header .primary li > .up-down {
        rotate: 90deg;
        color: var(--cLgainsboro);
        background-color: var(--cLblueGray);
    }
    header .primary li li {text-decoration: initial;font-size: min(15px,4vw);}
    header .primary li.open-sub-menu > .up-down {rotate: -90deg;}
}
@media (min-width:1000px) {
    .sc14 ul.liste > li {width: 48.5%;}
}
@media (min-width:1200px) and (max-width:1660px) {
    body { font-size: min(15px,3.7vw);}
    header {font-size: min(14px,4vw);}
}
@media (min-width:1200px) {
    .mob {display: none !important}
    header {
        & .wrapper {
            background-color: var(--cLgrayF4);
            & .ct-nav {
                position: relative;
                width: 100%;
                height: auto;
                visibility: visible;
                pointer-events: initial;
                & nav {
                    padding: 0;
                    position: static;
                    background-color: transparent;
                    & .primary {
                        position: static;
                        height: auto;
                        display: flex;
                        row-gap: 1.5rem;
                        overflow: initial;
                        text-align: initial;
                        flex-direction: initial;
                        justify-content: center;
                        font-size: min(15px,4vw);
                        column-gap: min(40px,5vw);
                        text-transform: uppercase;
                        & li {
                            &:hover > a {color: var(--cLblueGray) !important;}
                            &:is(.current-menu-parent,.current-menu-ancestor,.current-menu-item,.current-menu-parent) > a {font-weight: 700;}
                            &.menu-item-has-children > a {
                                position: relative;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                &::after {
                                    position: relative;
                                    width: 16px;
                                    height: 16px;
                                    content: '';
                                    display: block;
                                    transition: all .2s;
                                    pointer-events: none;
                                    margin-left: min(15px,1vw);
                                    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/chevron-right.svg);
                                    mask-image: url(assets/images/chevron-right.svg);
                                }
                            }
                            & li {
                                & a {
                                    font-size: 15px;
                                    text-transform: initial;
                                }
                            }
                        }
                        & > li {
                            position: static;
                            padding-block: min(25px,1vw);
                            &:is(.current-menu-parent,.current-menu-ancestor,.current-menu-item,.current-menu-parent) {
                                background: linear-gradient(0deg, var(--cLyellow) 20%, transparent 20%);
                            }
                            & .up-down {display: none;}
                            & > a{
                                &::after {rotate: 90deg;}
                            }
                            & > .sub-menu {
                                position: absolute;
                                left: 0;
                                opacity: 0;
                                width: 100%;
                                visibility: hidden;
                                padding: min(30px,5vw);
                                background-color: var(--cLgrayF4);
                                &:is(li:hover > &) {
                                    opacity: 1;
                                    visibility: visible;
                                }
                                & > li {
                                    position: static;
                                    & > a {
                                        font-size: 19px;
                                        font-weight: 700;
                                        text-transform: uppercase;
                                        pointer-events: none;
                                        margin-bottom: min(40px,5vw);
                                        &::after {content: none;}
                                    }
                                    & ul {
                                        flex-wrap: wrap;
                                        overflow: visible;
                                        column-gap: min(40px,5vw);
                                        & li {
                                            position: static;
                                            & .sub-menu {
                                                position: absolute;
                                                top: 0;
                                                left: 100%;
                                                opacity: 0;
                                                width: 700px;
                                                height: 100%;
                                                display: flex;
                                                flex-wrap: wrap;
                                                visibility: hidden;
                                                padding-left: min(20px,5vw);
                                                &:is(li:hover > &) {
                                                    opacity: 1;
                                                    visibility: visible;
                                                }
                                                & li {
                                                    width: max-content;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    /* grid cat */
    .grid-cats .cat {
        flex: 1 1 350px;
    }
    /* sc3 */
    .sc3 .row picture {margin-inline: -12.6vw 0;}
    .sc3 .row.reverse picture {margin-inline: 0 -12.6vw;}
    /* sc8 */
    .sc8 .row picture {margin-inline: -14.7vw 0;}
    .sc8 .row.reverse picture {margin-inline: 0 -14.7vw;}
    .sc8 .text {padding-block: min(5rem,10vw);}
    .sc8 .text.padding {padding-left: min(2rem,4vw);}
    .sc8 .text.padding :is(h1, h2, h3, h4, h5, h6) {margin-left: calc(min(2rem,4vw) * -1);}
    /*  */
    .sc10 .row {
        width: 100%;
        margin-left: 0;
        column-gap: 2%;
        padding-inline: 0;
    }
    /* sc10 */
    .sc10 .row > .cat-garage {width: 32%;scroll-snap-align: start;}
    /* sc14 */
    .sc14 ul.liste > li {width: 31.33%;}
    /* sc16 */
    .sc16 .row > .left {flex: 1 1 max(300px,55%);}
    .sc16 .row > .right {
        flex: 1 1 max(300px,30%);
        padding-left: min(5rem,5vw);
        border-left: 1px solid var(--cLgray70);
    }
    /* sc17 */
    .sc17 .row > article {
        position: relative;
        width: 25%;
    }
}
.sc15 .left picture img { max-height: 350px ;}


/* header .ct-nav {color: var(--cLWhite);}
    header .ct-nav {
        position: relative;
        width: 100%;
        height: auto;
        visibility: visible;
        pointer-events: inherit
    }
    header .wrapper {
        position: relative;
        background-color: var(--cLgrayF4);
    }
    header .ct-nav nav {
        left: 0;
        padding: 0;
        width: 100%;
        height: auto;
        display: flex;
        font-size: inherit;
        justify-content: center;
        background-color: initial;
        column-gap: min(3.5rem, 2.5vw);
    }
    header .ct-nav nav .primary {
        overflow: visible;
        max-height: initial;
        align-items: center;
        flex-direction: initial;
        column-gap: min(3rem, 3.5vw);
    }
    header .primary li ul li {position: static;}
    header .primary li {text-align: left;}
    header .primary > li {position: static;}
    header .primary > li,
    header .primary > li > ul > li li:has(> ul) {
        display: flex;
        align-items: center;
        column-gap: .5rem;
    }
    header .primary li > .up-down {
        position: relative;
        top: 0;
        display: flex;
        align-items: center;
    }
    header .primary > li > .up-down::before {
        position: relative;
        scale: 1;
        rotate: 90deg;
        padding: min(.5rem,4vw);
    }
    header .primary > li > ul {
        position: absolute;
        left: 50%;
        top: 100%;
        z-index: 2;
        opacity: 0;
        row-gap: .5rem;
        overflow: initial;
        visibility: hidden;
        color: currentColor;
        background: var(--cLgrayBF);
        transform: translateX(-50%);
        width: max(100%,min(1300px, 95vw));
    }
    header .primary > li > ul > li > .up-down {display: none;}
    header .primary > li > ul > li  li > .up-down {margin-inline: auto 25px;}
    header .primary > li > ul > li > a {
        font-weight: 700;
        font-size: min(19px,5vw);
        text-transform: uppercase;
    }
    header .primary li ul {overflow: visible;}
    header .primary li:hover > ul {
        opacity: 1;
        visibility: visible;
    }
    header .primary > li > ul::before {
        position: absolute;
        content: '';
        inset: -1.3rem 0 0;
    }
    header .primary li ul > * {z-index: 1;}
    header .primary :is(li,li.opne-sub-menu) ul {height: auto;}
    header .primary li:hover>ul {
        height: auto;
        opacity: 1;
        pointer-events: inherit;
    }
    header .primary li:hover > ul > li:not(:first-child) {
        opacity: 1;
        margin-top: 0;
        visibility: visible;
    }
    header.sticky .ct-nav nav .primary a:hover {color: var(--cLBlack);}
    header .primary > li > a {
        position: relative;
        display: flex;
        padding-block: min(20px,3vw);
    }
    header .primary > li > a::before {
        position: absolute;
        left: 0;
        bottom: 10%;
        opacity: 0;
        width: 100%;
        content: '';
        height: 7px;
        transition: all .3s;
        background-color: var(--cLyellow);
    }
    header .primary li:hover > a::before,
    header .primary li.current-menu-parent > a::before,
    header .primary > li.current-menu-item > a::before {
        bottom: 0;
        opacity: 1;
    }
    header .primary > li > ul > li {
        position: relative;
        padding: min(2rem,3vw) 0 min(4rem,6vw);
    }
    header .primary > li > ul > li:has( > ul > li:hover) {background: linear-gradient(90deg,var(--cLgrayBF) 0%, var(--cLgrayBF) 33%, var(--cLgrayEB) 33%, var(--cLgrayEB) 100%);}
    header .primary > li > ul > li:has( > ul > li > ul > li:hover) {background: linear-gradient(90deg,var(--cLgrayBF) 0%, var(--cLgrayBF) 33%, var(--cLgrayEB) 33%, var(--cLgrayEB) 66%, var(--cLgrayF9) 66%, var(--cLgrayF9) 100%);} */
    /* header .primary > li > ul ul li {
        text-transform: initial;
        font-size: min(15px,4vw);
    } */
    /* header .primary > li > ul li a {padding-inline: min(2rem,3vw);display: block;} */
    /* position: relative; */
    /* header .primary > li > ul > li > ul {
        overflow: visible;
        margin-top: .5rem;
        width: calc(100% / 3);
    } */
    /* header .primary > li > ul > li > ul li {position: static;} */
    /* header .primary > li > ul > li > ul li > ul {
        position: absolute;
        top: 0;
        left: 100%;
        opacity: 0;
        width: 200%;
        row-gap: 10px;
        display: grid;
        visibility: hidden;
        transition: all .5s;
        justify-content: center;
        grid-template-columns: 30% 40%;
    } */
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    /* header .primary > li > ul > li > ul li > ul { */
        /* 
         */
    /* } */
    /* header .primary > li > ul > li > ul li:hover > ul {
        opacity: 1;
        visibility: visible;
    }
    header .primary li.link {
        position: absolute;
        left: 0;
        bottom: calc(min(3rem,3vw) * -1);
    } */