@media screen and (width >= 700px) {
    .sc3 .row > .block-3 {aspect-ratio: 1/.35;}
}
@media screen and (width >= 1200px) {
    .cardA .text .fs24 {font-size: clamp(0.6em,1.5vw, 24px);}
    /* .fs24 {font-size: clamp(.7em,1.3vw, 24px);} */
    .swiper:has( .cardA) {width: 100%;}
    .overlay:has( .arrow) {padding: .5rem;}
    .pagination.end {justify-content: flex-end;}
    .nav-filter {
        width: auto;
        margin-inline: auto;
        padding-inline: 0;
        mask-image: initial;
    }
    .up-down {
        position: relative;
        top: 2px;
    }
    li:has( > .up-down) {
        display: flex;
        gap: 0 .5em;
        align-items: center;
    }
    li:hover > .up-down {rotate: -180deg;}
    li:has( > .up-down) > a {padding-right: .5em;}
    header .right {padding: .5em .5em .5em 2em;}
    header + main > *:is(:first-child) {padding-top: 0;}
    header + main > *:is(:first-child):not(.sc1) {padding-top: min(5em,18vw);}
    header .ct-nav { 
        position: relative;
        scale: 1;
        opacity: 1;
        inset: initial;
        visibility: visible;
    }
    header .ct-nav nav {
        height: auto;
        padding: 0;
        width: auto;
        margin-left: 0;
        background-color: transparent
    }
    header .primary {
        min-height: initial;
        overflow-y: visible;
        flex-direction: initial;
    }
    header .primary ul {
        position: absolute;
        top: 150%;
        left: 50%;
        opacity: 0;
        text-align: left;
        padding: 1em 1.5em;
        visibility: hidden;
        transition: all .3s;
        border-radius: .5em;
        width: min(300px,30vw);
        transform: translateX(-50%);
        background-color: var(--cLWhite);
    }
    header .primary li:hover > ul {
        top: 100%;
        opacity: 1;
        visibility: visible;
    }
    .cardB .text {padding: 1em 1em 1em 0;}
    .sc1 + .sc2.bg-cLBeigeLight {
        margin-top: 0;
        background-image: none;
    }
    .sc2 .container-xxxl {max-width: min(1838px,95vw);}
    .sc2 .grig {
        grid-template-columns: repeat(60, 1fr);
        grid-template-rows: auto;
    }
    .sc2 .grig > .grid-left { 
        padding-top: 0;
        grid-area: 3 / 2 / 16 / 16;
        grid-template-rows: repeat(30, 1fr);
    }
    .sc2 .grig > .grid-left > picture:nth-child(2) {grid-area: 19 / 9 / 31 / 16;}
    .sc2 .grig > .grid-right {grid-template-rows: repeat(25, 1fr);}
    .sc2 .grig > .grid-right {grid-area: 1 / 43 / 16 / 60;}
    .sc2 .grig > .wrapper-text { grid-area: 4 / 19 / 15 / 41; }
    .sc2 .grig > .grid-right > picture:nth-child(1) { 
        rotate: -5deg;
        z-index: initial;
        /* height: min(253px,40vw); */
        grid-area: 1 / 7 / 10 / 21; 
    }
    .sc2 .grig > .grid-right > picture:nth-child(2) { 
        /* height: min(392px,66vw); */
        grid-area: 11 / 11 / 25 / 36; 
    }
    .sc2:has( + .sc3):has( .cliping.imgBeigeLight) {
        z-index: 1;
        padding-bottom: 10em;
    }
    section:has([class*="bg-"],> .cliping.imgBeigeLight) .sc3 [class^="container"] {padding-block: min(5em,10vw);}
    .sc2:has( .cliping.imgBeigeLight) + .sc3 {
        margin-top: calc(10em * -1);
    }
    .sc3 .container-xxxl {max-width: min(1838px,95vw);}
    .sc3 [class^="container"] .row {border-radius: min(2.5em,5vw); }
    .sc3 .row {
        rotate: -1deg;
        flex-wrap: nowrap;
    }
    .sc3 .row > .block-3 {flex: 1 1 200px;}
    .sc3 .taches > .tache-1 {
        top: 37%;
        right: 1.2%;
        rotate: 0deg;
        bottom: initial;
    }
    .sc3 .taches > .tache-2 {
        top: -18%;
        right: -1.7%;
        rotate: -30deg;
    }
    .sc3 .taches > .tache-2 + .tache-2 {
        top: 47%;
        left: 1.1%;
        rotate: -9deg;
        height: 114px;
        right: initial;
    }
    .sc3 .taches > .tache-1 + .tache-1   {
        top: -8%;
        left: -2%;
        right: initial;
        rotate: 0deg;
        right: initial;
    }
    .sc3 .taches > .tache-3 {
        top: 5%;
        left: 1%;
        height: 180px;
        background-color: var(--cLYellowBright);
    }
    .sc3 .taches > .tache-4 {
        left: -1%;
        bottom: -11%;
        top: initial;
        rotate: 0deg;
    }
    .sc3 .taches > .tache-4+.tache-4 {
        right: -6%;
        bottom: -26%;
        left: initial;
        rotate: -50deg;
    }
    .sc4 .row .left picture {rotate: -5deg;}
    .sc6 .taches > .tache-1 {
        top: 9%;
        left: 7%;
    }
    .sc6 .taches > .tache-2 {
        top: 45%;
        right: 5%;
    }
    .sc6 .taches > .tache-3 {
        top: 65%;
        right: -5%;
    }
    .sc6 .taches > .tache-4 {
        top: -10%;
        left: -5%;
    }
    .sc7 .wrapper-blocs > li {
        position: relative;
        top: 0em;
    }
    .sc7 .wrapper-blocs > li:hover {rotate: 0deg;}
    .sc8:has(.cliping.bg-cLBeigeDark) {z-index: 1;}
    .sc8:has(.cliping.bg-cLBeigeDark) .pagination {margin-bottom: -5em;}
    .sc20::before {
        position: absolute;
        top: -16%;
        right: -8%;
        rotate: 64deg;
        content: '';
        aspect-ratio: 1/1;
        pointer-events: none;
        height: min(770px,114%);
        background-color: var(--cLGreenOlive);
        -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(../images/tache-mauve.svg);
        mask-image: url(../images/tache-mauve.svg);
    }
}
@media screen and (width >= 1920px) {
    .cardB .text {padding: 1em min(3em,5vw) 1em 0;}
    .sc3 .row > .block-3 { flex: 1 1 max(200px,35%);}
}