/* article */
.articles > :is(article,article > *) {
    transition: all .5s;
}
.articles.load > article {filter: opacity(0);}
.articles.load > article > * {
    opacity: 0;
    visibility: 0;
}
.article {
    position: relative;
    overflow: hidden;
    color: var(--cLWhite);
    border-radius: min(1.5rem,5vw);
}
.article {position: relative;}
.article .arrow {
    color: currentColor;
    border: .065rem solid currentColor;
}
.article .text {
    position: absolute;
    inset: 0;
    padding: min(2rem,5vw);
    justify-content: flex-end;
}
.article figure {
    position: relative;
    height: min(470px,min(70vw,50vh));
}
.article figure > img {filter: brightness(.8);}
article:hover figure img {filter: brightness(.7);scale: 1.02;}
:is(.sc9,.article) .nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: min(1rem,2vw);
    align-items: center;
}
.article .text h4 > span {color: inherit;}
:is(.sc9,.article) .nav > li:not(:first-child) {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: min(1rem,2vw);
}
:is(.sc9,.article) .nav > li:not(:first-child)::before {
    position: relative;
    width: 1px;
    content: '';
    height: 1rem;
    display: block;
    background-color:currentColor;
}
:is(.sc9,.article) .nav * {font-size:min(17px,3.1vw);}
.article .arrow {
    position: absolute;
    padding-top: 0;
    aspect-ratio: 2/2;
    top: min(1rem,5vw);
    right: min(1rem,5vw);
    color: currentColor;
    border: .065rem solid currentColor;
}
article:hover .tag {color:var(--cLmediumSeaGreen2);}
article:hover .arrow {
    color: var(--cLWhite);
    border-color: var(--cLdarkSlateBlue);
    background-color: var(--cLdarkSlateBlue);
}
.article-post {
    position: relative;
    height: inherit;
    overflow: hidden;
    font-size: var(--fs14);
    flex-direction: column;
    row-gap: min(2rem,10vw);
    display: flex !important;
    backdrop-filter: blur(37px);
    border-radius: min(2rem,5vw);
    background-color: var(--cLWhite);
}
.article-post picture {
    position: relative;
    background-color: var(--cLBlack);
    height: min(260px,min(70vw,30vh));
}
.article-post picture > ul.sup {
    position: absolute;
    left: 0;
    opacity: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: min(1rem,4vw);
    align-items: center;
    visibility: visible;
    transition: all .4s;
    padding-inline: min(2rem,5vw);
    bottom: calc(min(1rem,4vw) * -1);
}
.article-post:hover picture > ul.sup {opacity: 1; visibility: visible;}
.article-post picture > ul.sup .tag {
    font-size:var(--fs14);
    color: var(--cLWhite);
    font-family: "area-normal", sans-serif;
    background-color: var(--cLmediumSeaGreen2);
}
.article-post picture > ul.sup .tag[style^="--icn"] {padding-left: .5rem;text-transform:initial}
.article-post picture > ul.sup .tag[style^="--icn"]::before {padding: 0.738rem;}
.article-post picture > ul.sup .tag[style^="--icn:"] {background-color: var(--cLdarkSlateBlue);}
.article-post .overlay {padding:min(1rem,5vw);}
.article-post .overlay .arrow {margin-left: auto;}
.article-post:hover .overlay .arrow::before,
.article-post:hover .overlay .arrow::after {color: inherit;}
.articles article {height: auto;}
.article-post figure {height: min(260px,min(70vw,30vh));}
.article-post .text {padding: 0 min(1.5rem,5vw) min(1.5rem,5vw);}
.article-post .arrow{border-color:var(--cLdarkSlateBlue);color: var(--cLdarkSlateBlue);}
.ajax-filter-section .tabs {
    position: relative;
    display: flex;
    font-weight: 500;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--fs24);
    gap: 1rem min(3rem,5vw);
    font-family: 'niveau-grotesk',sans-serif;
}
.ajax-filter-section .tabs a {color:inherit}
.ajax-filter-section .tabs a:not(.active) {opacity: 0.5;}
.ct-links {justify-content: space-between;}
.ajax-filter-section .articles {position: relative;}
.ajax-filter-section .articles .loading {
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
}
.ajax-filter-section .articles.load,
.ajax-filter-section .articles:has( .load) {height: min(400px,100vw);}
.ajax-filter-section .articles::before {
    position: absolute;
    inset: 0;
    opacity: 0;
    content: '';
    display: block;
    transition: all .5s .2s;
    pointer-events: none;
    mix-blend-mode: lighten;
    background-color: var(--cLdarkNavy);
}
.ajax-filter-section .articles.load::before,
.ajax-filter-section .articles:has( .load)::before {
    opacity: .1;
}
/* accordion */
.accordion .header {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    padding: 1rem 4rem 1rem 0;
    color: var(--cLmediumSeaGreen);
}
.accordion li {border-top: 1px solid var(--cLmediumSeaGreen);}
.accordion li:last-child {border-bottom: 1px solid var(--cLmediumSeaGreen);}
.accordion li.active .header::before,
.accordion .header::after {
    rotate: 90deg;
}
.accordion .header::before, .accordion .header::after {
    position: absolute;
    top: 35%;
    width: 1px;
    z-index: 1;
    right: 1rem;
    content: '';
    height: 1.2rem;
    display: block;
    cursor: pointer;
    transition: all .2s;
    background: currentColor;
    transform-origin: center;
}
.accordion .item .body {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s;
}
.accordion .item.active > .body {max-height: var(--sh);}
.accordion .item > .body .text {padding-bottom: 1rem;}
/* sc1 */
.sc1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height:min(550px,100vw);
}
.sc1::before,
.sc9::before {
    position: absolute;
    z-index: 3;
    opacity: 1;
    content: '';
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: min(500px,65vw);
    background-position: left bottom;
    inset: 0 0 calc(min(8rem,10vw) * -1);
    background-image: url(../images/logo-transparence.svg);
}
.sc1 .cliping::after {
    opacity: 1;
    mix-blend-mode: color;
    background-color: var(--cLnavyBlue);
}
.sc1 .cliping > * {filter: brightness(0.8);}
.sc1 .container {transform: translateY(20%);}
.sc1 p[class^="ttl-"]{font-weight:700}
/* sc2 */
.sc1 + .sc2 {
    height: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc1 + .sc2 + * {padding-top:var(--sp-6);}
.sc1 + .sc2 > * {padding-block:0;}
.sc2 {filter: drop-shadow(0px 20px 60px #00000029);}
.sc2 ul.cat {
    position: relative;
    left: 50%;
    width: 100vw;
    display: flex;
    overflow: auto;
    padding-inline: 5vw;
    gap: 1rem min(5%,3vw);
    -ms-overflow-style: none;
    transform: translateX(-50%);
    scroll-snap-type: x mandatory;
    scrollbar-color: transparent transparent;
}
.sc2 ul.cat::-webkit-scrollbar {display: none}
.sc2 ul.cat li {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: block;
    line-height: 1;
    font-weight: 700;
    transition: all .2s;
    font-size: var(--fs36);
    text-transform: uppercase;
    background-color: var(--cLWhite);
    border-radius: 0px 24px 24px 24px;
    padding: min(1.5rem,4vw) min(2rem,7vw);
    font-family: "niveau-grotesk",sans-serif;
}
.sc2 ul.cat li:hover {background-color:var(--cLlightGreen)}
.sc2 ul.cat li .arrow:not(:hover) {background-color: transparent;}
.sc2 ul.cat li .arrow {
    position: absolute;
    border: none;
    rotate: 45deg;
    top: min(0.3rem,3vw);
    pointer-events: none;
    right: min(0.3rem,3vw);
}
.sc2 ul.cat li .arrow::before,
.sc2 ul.cat li .arrow::after {
    /* inset: 15%; */
    -webkit-mask-image: url(../images/fleche.svg);
    mask-image: url(../images/fleche.svg);

}
.sc2 ul.cat li strong > span {
    position: relative;
    display: block;
    text-transform: initial;
    color: var(--cLmediumSeaGreen);
}
.sc2 ul.cat li strong > span {font-weight: 400;}
/* .sc3 .container-xl > [class^="row"] {column-gap: 10%;} */
.sc3 .container-xl > [class^="row"] .left figure {
    margin-inline: auto;
    height: min(458px,85%);
}
.sc3 .right .text > h2 {
    position: relative;
    width: min(470px,100%);
}
.sc3 .right .text > p {padding-left:min(5rem,8vw);}
.sc3 h2 {font-size:var(--fs40)}
.sc3 .container-xl > [class^="row"] .right {flex: 1 1 30%;}
.sc3 .left figure {border-radius: min(1.5rem,5vw);}
/* sc4 */
.sc4 .articles {
    position: relative;
    left: 50%;
    width: 100vw;
    display: flex;
    overflow: auto;
    padding-inline: 5vw;
    gap: 1rem min(5%,3vw);
    -ms-overflow-style: none;
    transform: translateX(-50%);
    scroll-snap-type: x mandatory;
    scrollbar-color: transparent transparent;
}
.sc4 .articles::-webkit-scrollbar {display: none}
.sc4 .articles article {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    width: min(500px,70vw);
    border-radius: min(2rem,5vw);
}
.sc4 .articles article figure {
    position: absolute;
    inset: 0;
}
/* .sc4 .articles article:hover figure > img {scale:1.04;} */
.sc4 .articles article .text {
    position: relative;
    color: var(--cLWhite);
    padding: min(3rem,5vw);
    justify-content: flex-end;
    height: min(550px,min(70vw,60vh));
}
.sc4 .articles article .text::before {
    position: absolute;
    inset: 0;
    content: '';
    pointer-events: none;
    mix-blend-mode: hard-light;
    background-image: linear-gradient(0deg, var(--cLdarkNavy) 0%, transparent);
}
.sc4 .articles article .text > *:not(:is([class^=btn-],.tag)) {
    position: relative;
    z-index: 1;
}
.sc4 .articles article .text > h4::before {
    position: absolute;
    opacity: .3;
    top: -1.1rem;
    width: 0px;
    height: 0px;
    content: "";
    rotate: 296deg;
    display: block;
    right: calc(100% + 0rem);
    padding: min(1rem, 2.5vw);
    background-color: currentcolor;
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-image: url("../images/icn-vert.svg");
}
.sc4 .articles article .tag {
    position: absolute;
    top: min(2.5rem,4vw);
    left: min(3rem,4vw);
}
.sc4 .articles article .text > p {
    font-size: var(--fs16);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* sc5 */
.sc5 ul.val {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: min(1rem,2vw) 2%;
    justify-content: center;
}
.sc5 .val > li {width:49%;}
.sc5 .val [style^="--icn:"] {
    display: flex;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all .3s;
    font-size: var(--fs25);
    column-gap: min(1rem,5vw);
    border-radius: min(2rem,5vw);
    padding: min(2.5rem,5vw) min(2rem,5vw);
    background-color: var(--cLlavenderGray);
}
.sc5 .val [style^="--icn:"]:hover {
    color: var(--cLWhite);
    background-color: var(--cLslateBlue);
}
.sc5 .val [style^="--icn:"][style^="--icn"]::before {
    padding: min(1.5rem,3.2vw);
    transition: all .3s;
    color: var(--cLmediumSeaGreen);
}
.sc5 .val [style^="--icn:"][style^="--icn"]:hover::before {top: -1rem;}
/* sc6 */
.sc6 .cliping {clip-path: inset(0 min(2rem,1.5vw) round min(2rem,5vw));}
.sc6 .ct-swiper {
    position: relative;
    width: 100%;
}
.sc6 .ct-swiper {
    width: 100%;
    margin-left: 0;
}
.sc6:has( .cliping) .text .icn-style::before {color: var(--cLslateBlue);}
:is(.sc6,.sc7) .pagination {
    margin-inline: 0 auto;
    flex: 0 0 auto !important;
    justify-content: flex-start;
}
/* :is(.sc6,.sc7) .pagination {display: none;} */
.sc6 .pagination .arrow:not(:hover) {filter: brightness(0) invert(1);}
/* sc7 */
.sc7 {position: relative;}
.sc7 .right p {opacity: .7;}
.sc7 .ct-swiper {
    position: relative;
    width: 100% ;
}
.sc7 .ct-swiper:not(:has( .swiper-wrapper[style*="transform"])) + .ct-arrow {display: none !important;}
/* sc8 */
.sc8 .wrapper {position: relative;}
.sc8 .cliping {
    width: min(1834px,100vw);
    clip-path: inset(0 min(2rem,.5vw) round min(2rem,5vw));
}
.sc8 .cliping::before {
    position: absolute;
    z-index: 3;
    opacity: 1;
    content: '';
    opacity: .3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: min(400px,65vw);
    background-position: 107% bottom;
    inset: 0 0 calc(min(5rem,6vw) * -1);
    background-image: url(../images/logo-transparence.svg);
}
.sc8 .btn-simple {
    font-size:var(--fs60);
    font-family: "niveau-grotesk",sans-serif
}
/* sc9 */
.sc9 .cliping::after {
    mix-blend-mode: multiply;
    background-color: var(--cLcharcoalBlue)
}
.sc9 [class^=text] > .icn-style:has(+*):after {content: none;}
.sc9 .nav {justify-content: center;}
/* sc11 */
.sc11 .articles {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: min(2rem,5vw) 2%;
}
.sc11 .articles article {
    position: relative;
    width: 100%;
}
/* sc12 */
.sc9:has( + .sc12) {padding-bottom: var(--sp-3);}
.sc9 + .sc12 {margin-top: calc(var(--sp-5) * -1);}
.sc9 + .sc12 > *:not(* + *) {padding-top: 0;}
.sc12 .ct-swiper {
    position: relative;
    width: 100%;
    border-radius: min(2rem,5vw);
}
.sc12 .ct-swiper figure {
    overflow: hidden;
    height: min(640px,min(70vw,60vh));
}
/* sc13 */
.sc13 .right .flex {row-gap:1.5rem;}
.sc13 .right {
    position: relative;
    opacity: 1;
    padding: min(3rem,5vw);
    border-radius: min(2rem,5vw);
    background-color: var(--cLWhite);
    box-shadow: 0px 15px 50px #00000029;
}
/* sc-single */
.sc9:has( + .sc-single) .text-center {visibility: hidden !important; opacity: 0 !important;}
.sc9 + .sc-single {margin-top:calc(min(15rem,26vw) * -1)}
.sc9 + .sc-single > *:not(* + *) {padding-top: 0;}
.sc-single .flex {
    position: relative;
    overflow: hidden;
    background-color: white;
    backdrop-filter: blur(37px);
    border-radius: min(2rem,5vw);
}
.sc-single .row .flex figure {
    height: min(550px,50vw);
}
.sc-single .row .flex .text {
    position: relative;
    padding: 0 min(3.5rem,5vw) min(3rem,5vw);
}
.sc-single .btn-simple.next {margin-left:auto}
.sc-single .btn-simple {
    border: none;
    padding-block: 0;
    color: var(--cLmediumSeaGreen);
    font-family:'niveau-grotesk',sans-serif
}
.sc-single [class^="ttl-"] {
    font-weight: 600;
    font-family: "area-normal", sans-serif;
}
.sc-single .foot {
   position: relative;
   justify-content: space-between;
}
/* sc-archiive */
.sc-archive .articles {
    display: flex;
    flex-wrap: wrap;
    gap: min(2rem,5vw) 2%;
}
.sc-archive .articles > article {width: 100%;}
/* sc404 */
.sc404 {
    position: relative;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    flex-direction: column;
}
@media (max-width:1199px) {
    .sc3 [class^=row] > :is(.left,.right) {flex: 1 1 100% !important}
}
@media (min-width:1024px) {
    .sc11 .articles article {width: 49%;}
    .sc-archive .articles > article {width: 49%;}
}
@media (min-width:1200px) {
    .sc1 {min-height:min(950px,100vh);padding-block: var(--sp-5)}
    .sc2 ul.cat {
        width: 100%;
        padding-inline: 0;
        justify-content: center;
    }
    .sc2 ul.cat li:nth-child(odd) {margin-bottom: 3rem;}
    .sc2 ul.cat li:nth-child(even) {margin-top: 3rem;}
    .sc3 .container > [class^="row"] .left figure {
        margin-inline: inherit;
        width: auto;
    }
    .sc5 .val > li { width: auto; }
    .sc6 .ct-swiper {
        width: 130%;
        overflow: visible;
        clip-path: inset(0 20.1% 0 0rem round 0);
    }
    :is([class^=row],[class^=flex]):not(.y)>div:not(:is(.half,.full)) {
        max-width: var(--w);
    }
    .article .arrow {
        top: auto;
        bottom: min(1rem,5vw);
    }
    .sc13 .right .half {min-width:40%;flex: 1 1 100px;}
    .col-text-3 {
        column-gap: 5%;
        column-count: 3;
    }
    .col-text-3 > * {
        position: relative;
        width: 100%;
        margin-top: 0;
        display: block;
    }
    .sc-archive .articles > article {width: 32%;}
}
@media  (min-width:1366px) and (max-width:1440px) {
    .article-post picture > ul.sup {bottom: -.7rem;}
}
@media (min-width:1366px) {
    .sc4 .articles {column-gap: 2%;}
    .sc4 .articles article {width: 32%;}
}