:root {
    /* Black / Neutral */
    --cLblackDeep: #000405;
    --cLtransparent: #00000000;
    --cLblack: #000000;
    --cLblackSoft: #1A1A1A;
    --cLblackDark: #141414;
    --cLcharcoal: #222222;
    --cLgrayDark: #454545;
    --cLgray: #B5B5B5;
    --cLgrayLight: #F7F7F7;
    --cLwhiteSoft: #fcfcfc96;

    /* White / Transparency */
    --cLwhite: #FFFFFF;
    --cLwhiteTransparent10: #FFFFFF19;
    --cLwhiteTransparent4: #FFFFFF0A;
    --cLwhiteTransparent18: #FFFFFF2F;
    --cLwhiteTransparent55: #FFFFFF8D;
    --cLwhiteTransparent9: #FFFFFF17;

    /* Red */
    --cLredDark: #C02429;
    --cLred: #C0000B;
    --cLredBright: #EB0000;

    /* Pink / Rose */
    --cLroseMuted: #837777;
    --cLroseLight: #F2DCD2;
    --cLroseSoft: #E9BCB6;
    --cLroseGray: #EBE9EA;

    /* Blue / Navy */
    --cLnavy: #19304D;
    --cLnavyDeep: #000E19;
}
*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior: smooth;}
html, body, p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd {margin: 0;}
strong {font-weight: 600;}
h1,h2,h3,h4,h5,h6 {line-height: 1.1;font-weight: 500;}
:is(h1,h2,h3,h4,h5,h6) em {font: inherit;}
h1:not([class]) {font-size: clamp(min(30px,5vw),2.5vw,50px);}
h2:not([class]) {font-size: clamp(min(28px,4.8vw),2.1vw,40px);}
h3:not([class]) {font-size: clamp(min(25px,4.7vw),2vw,37px);}
h4:not([class]) {font-size: clamp(min(24px,4.6vw),1.9vw,26px);}
h5:not([class]) {font-size: clamp(min(23px,4.2vw),1.5vw,23px);}
h6:not([class]) {font-size: clamp(min(16px,3.7vw),1.1vw,20px);}
body {
  padding: 0;
  font-weight: 300;
  line-height: 1.4;
  overflow-x: hidden;
  color: var(--cLblueRoyal);
  -webkit-text-size-adjust: 100%;
  font-family: "bricolage-grotesque",sans-serif;
  font-size: clamp(min(16px,3.7vw),1.1vw,20px);
}
img,video,canvas,svg {
    height: auto;
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

section a { text-decoration:underline; }

a:not([class]):hover {color: var(--cLred);}
:focus-visible {outline: 2px solid var(--cLred);outline-offset: 2px;}
/* ol, ul {margin: 0;padding: 0;list-style: none;} */
[class]:is(ol, ul) {margin: 0;padding: 0;list-style: none;}
*:is(ol, ul):not([class]) {padding-left: 1em;}
*:is(ol, ul):not([class]) > li::marker {
    line-height: 0;
    font-size: 1.3em;
    color: var(--cLredDark);
}
button {padding: 0;border: none;background: none;font: inherit;cursor: pointer;}
section {position: relative;}
address {font-style: normal;}

/* --- layout --- */
.row,.flex {
  display: flex;
  flex-wrap: wrap;
  row-gap: min(2rem,10vw);
}
:is(.row,.flex).direction-reverse {
    flex-direction: row-reverse;
}
:is(.row,.flex).direction-column {
    flex-wrap: nowrap;
    flex-direction: column;
    row-gap: min(1.8em, 7vw);
}
:is(.row,.flex).space-between {justify-content: space-between;}
:is(.row,.flex).items-center {align-items: center;}
[class^="container"] {margin-inline: auto;padding-block: min(3em,7vw);}
.container{width:min(1071px,90vw)}
.container-xl{width:min(1394px,90vw)}
.container-xxl{width:min(1637px,90vw)}
/* .container-xxxl{max-width:min(1588px,95vw)} */
.container-max{max-width:min(1875px,calc(100% - 1em))}
[style*="--w"] {width: var(--w);}
[class^="text"] {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: min(.7em,3vw);
}
[class^="text"]:not([style^="--w:"]) {width: 100%;}
.text-center{justify-content: center;text-align: center;}
picture {
    position: relative;
    height: 100%;
    display: block;
    overflow: hidden;
}
picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-width: inherit;
}
.cliping {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    pointer-events: none;
    clip-path: inset(0rem round 0rem);
}
.cliping img, .cliping video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: initial;
}
/* --- icônes (mask-image) --- */
[style^="--icn-before"]::before,
[style^="--icn-after"]::after {
  position: relative;
  content: "";
  display: block;
  pointer-events: none;
  padding: min(.7rem, 3vw);
  background-color: currentcolor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
[style^="--icn-before"]::before {-webkit-mask-image: var(--icn-before);mask-image: var(--icn-before);}
[style^="--icn-after"]::after {-webkit-mask-image: var(--icn-after);mask-image: var(--icn-after);}
[style^="--icn"] {display:inline-flex;align-items: center;column-gap: 10px;}
/* --- social icons --- */
.rs {
  display: flex;
  flex-wrap: nowrap;
  column-gap: min(10px,5vw);
}
.rs li {display: block;}
.rs [style^="--icn-"] {
    font-size: 0;
    column-gap: 0;
    display: block;
    flex: 0 0 auto;
    border-radius: 2rem;
    transition: all .3s;
    color: var(--cLblack);
    background-color: var(--cLwhite);
}
.rs [style^="--icn-"]::before {
    scale: .55;
    padding: min(.9375rem, 3vw);
}
.rs [style^="--icn-"]:hover {
    color: var(--cLwhite);
    background-color: var(--cLred);
}
/* footer .rs [style^="--icn-"] {background-color: var(--cLwhite);color: var(--cLnavyDeep);} */
/* --- boutons --- */
.check,
.arrow {
    position: relative;
    top: 0;
    left: 0;
    width: 0;
    margin: 0;
    height: 0;
    z-index: 2;
    outline: 0;
    font-size: 0;
    flex: 0 0 auto;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    transition: all .3s;
    color: currentColor;
    border-radius: 3rem;
    display: inline-block;
    background-color: transparent;
    border: 1px solid hsl(from currentColor h s l/.8);
    padding: clamp(min(1rem,4vw), 1.4vw,1.3rem);
}
.check {
    border-color: var(--cLroseSoft);
    background-color: var(--cLroseSoft);
}
[class^=btn-]:has( .check) {
    column-gap: min(1em,3vw);
    padding: min(0.65em,3vw) min(0.9em,5vw);
    
}
[class^=btn-] .check {
    scale: 1.8;
    padding: min(1.4vw,.5rem);
}
.cLred .arrow {color: var(--cLred);}
.check::after,.check::before,
.arrow::after,.arrow::before {
    content: "";
    inset: 37%;
    display: block;
    position: absolute;
    pointer-events: none;
    transition: inherit;
    background-color: currentColor;
}
.check::after,
.check::before {
    inset: 30%;
    mask: url(/wp-content/themes/spectra/assets/images/check.svg) center /contain no-repeat;
}
.arrow::after,
.arrow::before {mask: url(/wp-content/themes/spectra/assets/images/arrow.svg) center /contain no-repeat;}
.arrow.down {rotate: 90deg;}
.arrow.rotate {rotate: -45deg;}
.arrow.prev {transform: rotate(-180deg)}
.arrow::after {opacity: 0;translate: -100% 0;}
.arrow:hover {
    color: var(--cLwhite);
    background-color: var(--cLnavyDeep);
    border-color: var(--cLnavyDeep);
}
.link:hover .arrow::before,
.overlay:hover .arrow::before,
[class^=btn-]:hover .arrow::before,
.arrow:hover::before {translate:100% 0;opacity:0}
.link:hover .arrow::after,
.overlay:hover .arrow::after,
[class^=btn-]:hover .arrow::after,
.arrow:hover::after {translate:0 0;opacity:1}
.swiper-wrapper {justify-content: space-between;}
.arrow.swiper-button-disabled {opacity: .35;pointer-events: none;}
.arrow.swiper-button-lock {display: none;}
p:has(:is([class^=btn-],.link)) {
    display: flex;
    flex-wrap: wrap;
    gap: min(1em,2vw);
}
.text-center p:has(:is([class^=btn-],.link)) {justify-content: center;}
.text-right p:has(:is([class^=btn-],.link)) {justify-content: flex-end;}
[class^=btn-] {
    z-index: 1;
    line-height: 1;
    font-weight: 400;
    width: max-content;
    transition: all .3s;
    align-items: center;
    display: inline-flex;
    border-radius: 2.5em;
    text-decoration: none;
    column-gap: min(.8em,2vw);
    border: 1px solid transparent;
    padding: min(0.65em,3vw) min(1.4em,5vw);
    font-size: clamp(min(14px,3.4vw),1.1vw,18px);
}
[class^=btn-] :is(input,button) {
    font:inherit;
    color: inherit;
}
[class^=btn-] .arrow {
    position: relative;
    scale: 1.5;
    z-index: 0;
    left: -6px;
    color: currentColor;
    pointer-events: none;
    padding: min(0.5rem,2vw);
    border-color: transparent;
}
[class^=btn-] .arrow::after,
[class^=btn-] .arrow::before {inset: 27%;}
[class^=btn-]:has( .arrow,[style^="--icn-"]) {
    column-gap: min(1rem,5vw);
    padding: min(0.65em,3vw) min(.7em,1.5vw) min(0.65em,3vw) min(1.4em,5vw);
}
[class^=btn-][style^="--icn-before"]::before, 
[class^=btn-][style^="--icn-after"]::after {padding: min(0.5rem, 3vw);}
.btn-cLwhite {
    color: var(--cLblack);
    border-color: var(--cLwhite);
    background-color: var(--cLwhite);
}
.btn-cLredDark {
    color: var(--cLwhite);
    border-color: var(--cLredDark);
    background-color: var(--cLredDark);
}
.btn-cLgrayLight {
    color: var(--cLnavy);
    border-color: var(--cLgrayLight);
    background-color: var(--cLgrayLight);
}
.btn-cLgrayLight-0-13 {
    color: var(--cLwhite);
    border-color: hsl(from var(--cLgrayLight) h s l/.13);
    background-color: hsl(from var(--cLgrayLight) h s l/.13);
}
.btn-cLgrayLight-0-13 .check {
    border-color: hsl(from var(--cLblackDeep) h s l/.8);
    background-color: hsl(from var(--cLblackDeep) h s l/.8);
}
.line {
    position: relative;
    display: inline-block;
    aspect-ratio: 1/1;
    border-radius: 1em;
    width: min(10px,2vw);
    background-color: currentColor;
}
.logo-simple[style^="--icn-before"]::before,
.logo-simple[style^="--icn-after"]::after {padding: min(1.5rem, 8vw);}
.tag {
    position: relative;
    line-height: 1;
    column-gap: .3em;
    font-weight: 500;
    border-radius: 2em;
    align-items: center;
    display: inline-flex;
    letter-spacing: .5px;
    color: var(--cLwhite);
    letter-spacing: 0.98px;
    max-width: max-content;
    text-transform: uppercase;
    backdrop-filter: blur(1em);
    font-size: clamp(min(14px,3.5vw),1vw,14px);
    padding: min(.5em,4vw) min(1em,5vw) min(.6em,4vw);
    background-color: hsl(from var(--cLblackDark) h s l/.3);
}
.tag::before {
    position: relative;
    content: '';
    width: .7em;
    aspect-ratio: 1/1;
    border-radius: 2em;
    background-color: var(--cLredDark);
}
hr {
    margin: 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid hsl(from var(--cLredDark) h s l/.3);
}
.overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    font-size: 0;
}
.overlay:has( .arrow,.tag) {
    display: flex;
    align-items: flex-start;
    padding: min(.4rem,5vw);
    justify-content: flex-end;
}
.overlay .tag {margin-right: auto;}
.overlay .arrow {
    rotate: -45deg;
    color: var(--cLwhite);
    /* padding: clamp(min(1rem,4vw), 1.4vw,1.2rem); */
    border-color: hsl(from var(--cLwhite) h s l/.08);
    background-color: hsl(from var(--cLwhite) h s l/.08);
}
.overlay .arrow::after, 
.overlay .arrow::before {inset: 27%;}
/* --- backgrounds --- */
.bg-cLblackDeep {
    color: var(--cLwhite);
    background-color: var(--cLblackDeep);
}
.bg-cLblackSoft {
    color: var(--cLwhite);
    background-color: var(--cLblackSoft);
}
.tiles{isolation: isolate;}
.tiles::after {
    position: absolute;
    inset: 0;
    content: '';
    background-color: transparent;
    background-image:
        linear-gradient(hsl(from var(--cLwhite) h s l/.08) 1px, transparent 1px),
        linear-gradient(90deg, hsl(from var(--cLwhite) h s l/.08) 1px, transparent 1px);
    background-size: min(40px, 8vw) min(40px, 8vw);
}
.tiles [class^="container"] {
    position: relative;
    z-index: 1;
}
[class*="rbg-"] {isolation: isolate;}
[class*="rbg-"]::before {
    position: absolute;
    content: '';
    z-index: -1;
    clip-path: inset(0 round min(81px,5vw));
    inset: 0 calc((100vw - min(1920px,100%)) / 2);
}
.rbg-cLroseLight-cLroseGray {
    color: var(--cLblackDeep);
}
.rbg-cLroseLight-cLroseGray:not([style^="--deco:"]):before {
    background: radial-gradient(closest-side at 80% 30%, var(--cLroseLight) 70%, var(--cLroseGray) 100%) 100% 0% / cover no-repeat;
}
.rbg-cLroseLight-cLroseGray[style^="--deco:"]::before {
    background: var(--deco) top right/ min(500px,60vw) no-repeat, 
                radial-gradient(closest-side at 80% 30%, var(--cLroseLight) 70%, var(--cLroseGray) 100%) 100% 0% / cover no-repeat;
}
.rbg-cLblackSoft:not([style^="--deco:"])::before {
    background: left bottom/ min(700px,60vw) no-repeat,var(--cLblackSoft);
}
.rbg-cLblackSoft[style^="--deco:"]:before {
    background: var(--deco) left bottom/ min(700px,60vw) no-repeat,var(--cLblackSoft);
}

.link {
    position: relative;
    display: flex;
    overflow: hidden;
    isolation: isolate;
    align-items: center;
    transition: all .3s;
    max-width: max-content;
    padding: min(.5em,5vw) 0;
    column-gap: min(.5em,4vw);
    border-bottom: 1px solid hsl(from var(--cLredDark) h s l/.5);
}
.link::before {
    position: absolute;
    z-index: -1;
    content: '';
    transition: all .3s;
    inset: calc(100% - 1px) 0 0;
    background-color: hsl(from var(--cLredDark) h s l/.5);
}
.link:hover {
    border-radius: 2em;
    padding: min(.5em,5vw)  min(1.4em,5vw);
}
.link:hover::before {
    inset: 0;
}
.link .arrow {
    padding: min(.5rem,5vw);
    border: none;
}
.link .arrow::after,
.link .arrow::before {inset: 0%;}
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: min(1em,3vw);
    align-items: center;
    justify-content: flex-end;
}
.pagination.center {
    justify-content: center;
    margin-top: min(1em,5vw);
}

.link.rotate-180 {
    display: flex;
    flex-direction: row-reverse;
}

.link.rotate-180::after {
    rotate: -180deg;
}


/* formulaire */
[type="radio"], [type="checkbox"] {
    margin: 0;
    outline: none;
    flex: 0 0 auto;
    width: min(1.5rem, 6vw);
    height: min(1.5rem, 6vw);
    background-color: var(--cLwhite);
    accent-color: var(--cLred);
}
[type="checkbox"] {box-shadow: inset 0 0 0 1px var(--cLred)}
[type="radio"]:not(:checked) {
    appearance: none;
    border-radius: 2rem;
    border: 1px solid var(--cLred)
}
input:not(:is(.qty-value, [type="radio"], [type="checkbox"], [type="button"], [type="submit"], [type="image"], [type="file"])),
select,textarea {
    width: 100%;
    border: none;
    border-radius: 0;
    color: currentColor;
    height: min(52px, 15vw);
    outline: none !important;
    padding: min(.5rem, 4vw) 0;
    background-color: transparent;
    font-size: clamp(min(14px,3.4vw),1.1vw,18px);
    border-bottom: 1px solid hsl(from var(--cLred) h s l/.3);
}
[multiple="multiple"] {height: auto}
:is(select,textarea,input)::-webkit-input-placeholder {
    opacity: .5;
    font: inherit;
}
:is(select,textarea,input)::-moz-placeholder {
    opacity: .5;
    font: inherit;
}
:is(select,textarea,input)::-ms-input-placeholder {
    opacity: .5;
    font: inherit;
}
:is(select,textarea,input)::placeholder {
    opacity: .5;
    font: inherit;
}
:is(select,textarea,input):is(textarea) {
    width: 100%;
    resize: none;
    font-family: inherit;
    height: min(100px, 30vw) !important
}
label:has( [type="radio"], [type="checkbox"]):not(:is(.accordion-head,.open-nav)) {
    display: flex;
    column-gap: 1em;
    line-height: 1.3;
}
.half {flex: 1 1 max(200px, 40%);}
.full {flex: 1 1 100%;}
.full,.half {font-size: min(16px,3.6vw);}
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 7px;
    font-size: min(13px,3.6vw);
}
fieldset {
    border: none;
    margin: 0;
    display: grid;
    width: 100%;
    align-content: start;
    padding: min(2em, 4vw);
    align-items: self-start;
    color: var(--cLdeepTeal);
    border-radius: min(34px,3vw);
    background-color: var(--cLwhite);
    filter: drop-shadow(0 5px 30px var(--cLdeepTealBlueTransparent));
}
fieldset:not(:has( legend)) {padding-top: min(2em, 4vw);}
fieldset.init {background-color: transparent;}
fieldset.qoute::before {
    position: absolute;
    content: '';
    opacity: .66;
    pointer-events: none;
    inset: calc(min(3em,8vw) * -1) 0 0;
    background-color: var(--cLlimeBright);
    -webkit-mask: url("/wp-content/themes/spectra/assets/images/guillemet.svg") left 0% / min(7em,15vw) no-repeat;
    mask: url("/wp-content/themes/spectra/assets/images/guillemet.svg") left 0% / min(7em,15vw) no-repeat;
}
/* dnamique sections */
:is(.bg-xxx + .bg-xxx,.rbg-xxxx + .rbg-xxxx)>[class^="container"]:not(*~*),
section:not(:is([class*=bg-],[class*=rbg-],.tiles,.sc31, *:has( .cliping))) + 
:is(section, footer):not(:is([class*=bg-],[class*=rbg-],.tiles,.sc31, *:has( .cliping)))>[class^="container"]:not(*~*) {padding-top: 0;}
/* header */
header {
    position: sticky!important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000!important;
    padding-block: min(.8em,2vw);
    margin-bottom: calc(min(4em,5vw) * -1);
    transition: box-shadow .3s, padding-block .3s;
}
header.is-stuck {
    padding-block: min(.5em,1.5vw);
}
header [class^="container"] {padding-block: 0;}
header .row {
    column-gap: 1.5%;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 3%;
    backdrop-filter: blur(1em);
    border-radius: min(22px,2vw);
    padding: min(1.4em,2vw) min(2em,4vw);
    border: 1px solid hsl(from var(--cLwhite) h s l/.08);
    background-color: hsl(from var(--cLblackDeep) h s l/0.3);
}
header .row:has( .open-nav input:checked) {backdrop-filter: initial;}
header .left {flex: 0 0 auto;}
header .logo {
    display: block;
    width: clamp(min(100%,38vw),10.5vw,200px);
    max-width: 180px;
}
header .logo img {
    width: 100%;
    object-fit: contain;
}
header .right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: min(23px,1.4vw);
}
header .ct-nav {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    visibility: hidden;
    transition: all .3s;
    width: min(500px,100%);
}
header .ct-nav:has( ~ .open-nav > input:checked) {
    opacity: 1;
    visibility: visible;
    transition: all .3s;
}
header .ct-nav:has( ~ input:checked) {visibility: visible;}
header .ct-nav > nav {
    position: relative;
    left: 100%;
    height: 100%;
    display: grid;
    row-gap: .7em;
    overflow-y: scroll;
   color: currentcolor;
    transition: all .3s;
    align-content: start;
    width: min(500px,100%);
    background-color: var(--cLblack);
    padding: min(6em,25vw) min(2em,10vw) min(2em,5vw);
}
header .ct-nav:has( ~ .open-nav input:checked) > nav {translate: -100% 0;}
header .primary {
    position: relative;
    height: 100%;
    display: flex;
    row-gap: 1.5rem;
    font-weight: 500;
    overflow-y: scroll;
    overflow-x: hidden;
    letter-spacing: 3%;
    letter-spacing: -.5%;
    flex-direction: column;
    font-size: var(--fs18);
    flex-direction: column;
    gap: 1em min(48px,2.5vw);
}
header .primary li:has( > ul) {
    position: relative;
    display: grid;
    transition: all .3s;
    grid-template-rows: 1.4em 0fr;
}
header .primary li:has( > ul):has( > .up-down input:checked) {grid-template-rows: 1.4em 1fr;}
header .primary li > ul {
    position: relative;
    display: flex;
    row-gap: .2em;
    overflow: hidden;
    flex-direction: column;
    transition: height .3s, all .3s;
}
header .primary li > ul > li {
    line-height: 1.2rem;
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid #dedede;
}
.sous-sous-menu {
    padding-left: 20px;
    color: gray;
}
header .primary li:has( > .up-down input:checked) > ul {
    padding-top: min(1em,4vw);
}
header .primary li > ul a {
    font-weight: 400;
    text-transform: initial;
    font-size: min(14px,3.5vw);
}
header .up-down {
    position: absolute;
    top: 0;
    right: 0;
    width: .8em;
    aspect-ratio: 1/1;
    transition: all .3s;
}
header .up-down::before {
    position: absolute;
    inset: 0;
    content: '';
    display: block;
    pointer-events: none;
    background-color: var(--cLredDark);
    mask: url(/wp-content/themes/spectra/assets/images/arrow-down.svg) center/contain no-repeat;
}
header .up-down:has( input:checked) {rotate: -180deg;}
header .open-nav {
    position: relative;
    z-index: 2;
    padding: 5px;
    display: grid;
    row-gap: .25em;
    cursor: pointer;
    transition: .2s;
    aspect-ratio: 1/0.9;
    color: #fff;
    height: min(2.5em,8vw);
    align-content: space-evenly;
}
header .open-nav span {
    height: 2px;
    width: 1.8rem;
    line-height: 0;
    transition: all .3s;
    border-radius: 1rem;
    pointer-events: none;
    background: currentColor;
    transform-origin: 55% center;
}
header .open-nav:has( input:checked) span:nth-child(2) {display: none;}
header .open-nav:has( input:checked) span:nth-child(1) {transform: translate(-.1rem,.2rem) rotate(90deg);}
header .open-nav:has( input:checked) {
    row-gap: 0;
    align-content: center;
    transform: rotate(45deg);
}

ul#menu-entete a {
    color: #fff;
}

ul#menu-entete .sub-menu a {
    color: currentColor;
}

ul#menu-entete a:hover, ul#menu-entete .sub-menu a:hover { color: var(--cLred); }

ul#menu-entete .btn-cLwhite a {     color: var(--cLblack); }


.label {
    color: var(--cLredDark);
    text-transform: uppercase;
    font-size: clamp(min(16px,3vw),1.1vw,18px);
}
.dot {
    position: relative;
    font-weight: 200;
    padding-left: min(2em,5vw);
    width: 100%;
}
.dot::before {
    position: absolute;
    left: 0;
    top: .5em;
    content: '';
    width: .5em;
    display: block;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: hsl(from currentColor h s l/1);
}
.rbg-cLroseLight-cLroseGray .dot::before {background-color: var(--cLredDark);}

/* breadcrumb */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    font-weight: 200;
    gap: 7px;
    align-items: center;
}

.breadcrumb a {color: hsl(from currentColor h s l/.6);}
.breadcrumb > li:not(:first-child) {
    display: inline-flex;
    align-items: center;
}
.breadcrumb > li:not(:first-child)::before {
    position: relative;
    content: '';
    width: .4em;
    height: .4em;
    flex: 0 0 auto;
    border-radius: 50%;
    margin-inline: .5em;
    background-color: currentColor;
}
.breadcrumb > li span {font-weight: 600;}
/* accordion */
.accordion {
    display: grid;
    overflow: hidden;
    border-radius: min(30px,5vw);
    border: 1px solid hsl(from var(--cLwhite) h s l / .2);
    background: #000;
}
.accordion .accordion-item {
    position: relative;
    display: grid;
    transition: all .3s;
    grid-template-rows: min(4em,15vw) 0fr;
}
.accordion .accordion-item:not(:first-child) {border-top: 1px solid hsl(from var(--cLwhite) h s l / .2);}
.accordion .accordion-item:has( input:checked) {grid-template-rows: min(5em,15vw) 1fr;}
.accordion .accordion-head {
    display: flex;
    cursor: pointer;
    align-items: center;
    column-gap: min(20px, 5vw);
    justify-content: space-between;
    padding: min(1.2em, 3vw) min(2em, 5vw);
}
.accordion .accordion-head .accordion-title {
    font-weight: 500;
    font-size: 1.2rem;
}
.accordion .accordion-head .accordion-btn {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    aspect-ratio: 1/1;
    transition: all .3s;
    width: min(1em, 3vw);
    align-content: center;
}
.accordion .accordion-head .accordion-btn::before {
    position: absolute;
    inset: 0;
    content: '';
    background-color: currentColor;  
    mask: url(/wp-content/themes/spectra/assets/images/arrow-down.svg) center/contain no-repeat;
}
.accordion .accordion-head:has( input:checked) .accordion-btn {rotate: -180deg;}
.accordion .accordion-item .accorrdion-body {
    overflow: hidden;
    color: var(--cLwhiteSoft);
    font-size: clamp(min(14px,3.3vw),1vw,16px);
}
.accordion .accordion-item .accorrdion-body .text {padding: min(.9em, 3vw) min(2.5em, 5.3vw);}
/* main code */
.sc1 .flex {
    column-gap: 10%;
}
.sc1 .flex > .left {flex: 1 1 max(min(300px,80vw),60%);}
.sc1 .flex > .right {
    flex: 1 1 max(min(300px,80vw),30%);
    color: hsl(from currentColor h s l/.6);
}
.sc1 .flex > .right p strong {color: hsl(from currentColor h s l/1);}
.sc1 h1 {
    font-weight: 200;
    text-transform: uppercase;
    font-size: clamp(min(30px,5vw),3vw,57px);
}
.sc1 h1 em {
    display: block;
    color: var(--cLroseMuted);
}
.sc1 .btns {
    display: flex;
    flex-wrap: wrap;
    gap: min(1em,2vw);
}
.sc1 .cliping {
    filter: opacity(0.5);
    transition: all .3s;
    mask: linear-gradient(0deg, transparent 10%, var(--cLblack) 45%, var(--cLblack) 55%, transparent 90%) center / contain no-repeat;
}
.sc1:hover .cliping {filter: opacity(1);}
.sc1 .ct-articles {
    column-gap: 5%;
    align-items: flex-end;
}
.sc1 .ct-articles > .text {flex: 1 1 max(min(200px,80vw),20%);}
.sc1 .ct-articles > .grid {
    display: grid;
    gap: min(1.5em,3vw) 1%;
    flex: 1 1 max(min(300px,80vw),70%);
    grid-template-columns: repeat(auto-fill, minmax(max(min(300px,80vw), 40%), 1fr));
}
.sc1 .cardA {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    transition: all .3s;
    padding: min(.4em,5vw);
    backdrop-filter: blur(1.2em);
    border-radius: min(22px,5vw);
    border: 1px solid hsl(from var(--cLwhite) h s l/.3);
    background-color: hsl(from var(--cLblack) h s l/.3);
}
.sc1 .cardA:hover {
    border: 1px solid hsl(from var(--cLredBright) h s l/.7);
    background-color: hsl(from var(--cLredDark) h s l/.3);
}
.sc1 .cardA .text {
    padding: min(1em,5vw) min(2em,8vw) min(1em,5vw) min(2em,5vw);
}
.sc1 .cardA .label {
    font-weight: 500;
    letter-spacing: 0.42px;
    color: var(--cLroseSoft);
    font-size: clamp(min(10px,3vw),.9vw,14px);
}
.sc1 .cardA .label.dot {
    padding-left: min(1.3em,5vw);
    
}
.sc1 .cardA .label.dot::before {
    top: 0.35em;
    width: 0.7em;
    background-color: var(--cLredDark);
}
.sc1 .cardA .title {
    font-weight: 200;
    margin-top: auto;
    transition: all .3s;
    padding-bottom: min(1em,5vw);
    font-size: 1rem;
    border-bottom: 1px solid hsl(from var(--cLredDark) h s l/.4);
}
.sc1 .cardA:hover .title {border-color: var(--cLredDark);}
.sc1 .cardA > picture {
    height: min(183px,40vw);
    border-radius: min(15px,5vw);
    flex: 1 1 max(min(150px,35vw),35%);
}
.sc1 .cardA > picture img {
    transition: all .3s;
    filter: brightness(.8);
}
.sc1 .cardA:hover > picture img {
    scale: 1.03;
    filter: brightness(1);
}
.sc1 .cardA > .text {
    flex: 1 1 max(min(200px,40vw),35%);
}

.sc1 .ct-values {column-gap: 5%;}
.sc1 .ct-values .text {flex: 1 1 max(min(300px,80vw),35%);}
.sc1 .ct-values .text p {color: hsl(from currentColor h s l/.6);}
.sc1 .ct-values .text p strong {color: hsl(from currentColor h s l/1);}
.sc1 .ct-values .values {
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    color: var(--cLroseSoft);
    flex: 1 1 max(min(300px,80vw),60%);
}
.sc1 .ct-values .values > li {
    display: flex;
    flex: 1 1 auto;
}
.sc1 .ct-values .values > li:not(:first-child)::before {
    position: relative;
    width: 2px;
    content: '';
    height: 100%;
    margin-inline: min(2em,5vw);
    background-color: hsl(from var(--cLredBright) h s l/.3);
}
.sc1 .ct-values .title {
    display: block;
    font-weight: 500;
    color: var(--cLredDark);
    letter-spacing: -0.32px;
    font-size: clamp(min(25px,5vw),1.7vw,32px);
    
} 
/* sc2 */
.sc2 {overflow: hidden;}
.sc2 .flex {
    column-gap: 5%;
}
.sc2 .left {
    flex: 1 1 max(min(300px,80vw),60%);
}
.sc2 .right {
    flex: 1 1 max(min(300px,80vw),20%);
}
.sc2 .title {
    font-weight: 200;
    font-size: clamp(min(26px,3.5vw),2.3vw,48px);
}
.sc2 .title em {color: var(--cLredDark);}
.sc2 .row > .grid {
    display: grid;
    gap: min(1.5em,3vw) 2%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(300px,80vw), 30%), 1fr));
}
.sc2 .cardB {
    position: relative;
    display: flex;
    overflow: hidden;
    transition: all .3s;
    row-gap: min(1em,5vw);
    padding: min(2em,5vw);
    flex-direction: column;
    backdrop-filter: blur(1em);
    border-radius: min(23px,5vw);
    justify-content: space-between;
    color: hsl(from currentColor h s l/0.8);
    font-size: clamp(min(14px,3.4vw),1.1vw,18px);
    border: 1px solid hsl(from var(--cLwhite) h s l/.46);
    background: linear-gradient(86deg, hsl(from var(--cLwhite) h s l/.46) 0%, hsl(from var(--cLwhiteSoft) h s l/.46) 100%) center / cover no-repeat;
}
.sc2 .cardB:hover {
    border: 1px solid hsl(from var(--cLgrayDark) h s l/.3);
    background: linear-gradient(45deg, hsl(from var(--cLgrayDark) h s l/.3) 20%, hsl(from var(--cLroseSoft) h s l/.7) 100%) center / cover no-repeat;
}
.sc2 .cardB .overlay .arrow {
    border-color: var(--cLblackDeep);
    background-color: var(--cLblackDeep);
}
.sc2 .cardB [class^="text"] {padding-right: min(2em,5vw);}
.sc2 .cardB picture {
    height: min(232px,40vw);
    border-radius: min(11px,2vw);
}
.sc2 .cardB picture img {
    transition: all .3s;
    filter: brightness(.8);
    filter: brightness(.8);
}
.sc2 .cardB:hover picture img {
    scale: 1.02;
    filter: brightness(1);
}
.sc2 .cardB .title {
    font-weight: 300;
    color: var(--cLredDark);
    font-size: clamp(min(17px,4vw),1.4vw,26px);
}
.sc2 .btns {
    position: relative;
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    gap: min(1em,4vw) min(1em, 3vw);
    scrollbar-color: transparent transparent;
    padding-inline: calc(100vw - min(1637px,90vw));
    margin-inline: calc((100vw - min(1637px,90vw)) * -1);
}
.sc2 .btns [class^=btn-] {scroll-snap-align: center;}
.sc2:has( + .sc3) {
    z-index: 1;
    margin-bottom: calc(min(7em,13vw) * -1);
}
.sc2 .grid-text {
    display: grid;
    gap: min(4em,10vw) 10%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(300px,80vw), 40%), 1fr));
}
.sc2 .grid-text .title {
    text-transform: uppercase;
    font-size: clamp(min(25px,4.7vw),2vw,37px);
}
.sc2 .grid-text .title em {text-transform: initial;}
.sc2 .grid-products {
    display: grid;
    gap: min(1.5em,3vw) 2%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(300px,80vw), 40%), 1fr));
}
.sc2 .cardE {
    gap: 0;
    display: flex;
    flex-wrap: wrap;
    transition: all .3s;
    padding: min(.4em, 5vw);
    backdrop-filter: blur(1.2em);
    border-radius: min(22px, 5vw);
    border: 1px solid hsl(from var(--cLblack) h s l / .1);
    background-color: hsl(from var(--cLwhite) h s l / .7);
}
.sc2 .cardE > picture {
    height: inherit;
    border-radius: min(15px,5vw);
    flex: 1 1 max(min(150px,35vw),25%);
    border: 1px solid hsl(from currentColor h s l/0.2);
}
.sc2 .cardE > picture img {
    transition: all .3s;
    filter: brightness(.8);
}
.sc2 .cardE:hover > picture img {
    scale: 1.03;
    filter: brightness(1);
}
.sc2 .cardE > .text {
    padding: min(1em,5vw) min(2em,5vw);
    flex: 1 1 max(min(200px,40vw),50%);
    color: hsl(from currentColor h s l/0.8);
    font-size: clamp(min(14px,3.4vw),1.1vw,18px);
}
.sc2 .cardE > .text .card-title {
    font-weight: 500;
    color: var(--cLredDark);
    font-size: clamp(min(15px,3.4vw),1.1vw,20px);
}
/* sc3 */
.sc2 + .sc3 {
    padding-top: min(7em,13vw);
}
.sc3 .title {
    font-weight: 200;
    text-transform: uppercase;
    font-size: clamp(min(30px,5vw),3vw,57px);
}
.sc3 .title em {color: var(--cLroseMuted);}
.sc3 .left {flex: 1 1 max(min(300px,80vw),60%);}
.sc3 .right {flex: 1 1 max(min(300px,80vw),20%);}
.sc3 .right p {color: hsl(from currentColor h s l/.6);}
.sc3 .right p strong {color: hsl(from currentColor h s l/1);}
.sc3 .grid {
    display: grid;
    gap: min(.9em,2vw) max(1%,.5em);
    grid-template-columns: repeat(auto-fill, minmax(max(min(150px,40vw), 12%), 1fr));
}
.sc3 .cardC {
    position: relative;
    cursor: pointer;
    transition: all .3s;
    padding: min(1.5em,5vw);
    color: var(--cLblackDeep);
    transform-origin: 0% 100%;
    border-radius: min(15px,2vw);
    box-shadow: 0 0 1em hsl(from var(--cLblack) h s l/.3);
    background: radial-gradient(closest-side at 70% 45%, var(--cLroseLight) 20%, var(--cLroseGray) 100%) center/cover no-repeat;
}
.sc3 .cardC [class^="text"] {height: 100%;}
.sc3 .cardC .icn {
    color: var(--cLredDark);
}
.sc3 .cardC .icn[style^="--icn-before"]::before {padding: min(1.1rem, 4vw);}
.sc3 .cardC .nbr {color: hsl(from currentColor h s l/.3);}
.sc3 .cardC .title {
    margin-top: auto;
    font-weight: 300;
    text-transform: initial;
    font-size: clamp(min(15px,3.4vw),1.1vw,20px);
}
/* sc4 */
.sc4 .title {
    font-weight: 200;
    text-transform: uppercase;
    font-size: clamp(min(30px,5vw),3vw,57px);
}
.sc4 .grid {
    display: grid;
    overflow: hidden;
    gap: min(2em,5vw) 10%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(150px,40vw), 19%), 1fr));
}
.sc4 .grid li {
    --pd: min(2em,5vw);
    padding-left: var(--pd);
    margin-left: calc(var(--pd) * -1);
    border-left: 2px solid var(--cLredDark);
}
.sc4 .grid li .nbr {
    font-weight: 200;
    color: hsl(from currentColor h s l/.3);
    font-size: clamp(min(18px,5vw),1.3vw,24px);
}
.sc4 .grid li .title {
    font-weight: 500;
    color: var(--cLred);
    text-transform: uppercase;
    font-size: clamp(min(18px,5vw),1.3vw,24px);
}
.sc4 .grid li p {
    font-weight: 300;
    color: hsl(from currentColor h s l/.7);
}
.sc4 .grid li p strong {color: hsl(from currentColor h s l/1);}
/* sc5 */
.sc5 .row {column-gap: 5%;}
.sc5 .row > .left {flex: 1 1 max(min(200px,80vw),30%);}
.sc5 .row > .left [class^="text"] {row-gap: min(1.5em,5vw);}
.sc5 .row > .left [class^="text"] p {color: hsl(from currentColor h s l/.6);}
.sc5 .row > .left [class^="text"] p strong {color: hsl(from currentColor h s l/1);}
.sc5 .row > .right {flex: 1 1 max(min(300px,80vw),65%);}
.sc5 .grid {
    display: grid;
    gap: min(1.5em,3vw) 4%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(200px,80vw), 40%), 1fr));
}
.cardD {
    position: relative;
    display: flex;
    transition: all .3s;
    flex-direction: column;
    padding: min(.4em,5vw);
    backdrop-filter: blur(1.2em);
    border-radius: min(22px,5vw);
    border: 1px solid hsl(from var(--cLwhite) h s l/.1);
    background-color: hsl(from var(--cLblack) h s l/.01);
}
.cardD.th-cLroseLight-cLroseGray {
    color: var(--cLblackSoft);
    background: transparent radial-gradient(closest-side at 70% 70%, var(--cLroseLight) 0%, var(--cLroseGray) 100%) 0% 0% no-repeat padding-box;
}
.cardD .overlay {
    padding: min(1rem,5vw);
}
.cardD > picture {
    height: min(223px,40vw);
    border-radius: min(15px,5vw);
}
.cardD:has( .tag) > picture {height: min(270px,60vw);}
.cardD > picture img {
    transition: all .3s;
    filter: brightness(.8);
}
.cardD:hover > picture img {
    scale: 1.03;
    filter: brightness(1);
}
.cardD [class^="text"] {
    position: relative;
    margin-bottom: min(1em,3vw);
    padding: min(1em,3vw) min(1.5em,5vw);
}
.cardD .card-title-b {
    font-weight: 300;
    text-transform: initial;
    font-size: 1.2rem;
}
.cardD .card-title {
    font-weight: 500;
    text-transform: initial;
    font-size:  1rem;
}
.cardD [class^="text"]::before {
    position: absolute;
    content: '';
    inset: 0 min(1.5em,5vw);
    border-bottom: 1px solid hsl(from var(--cLred) h s l/.3);

}
.cardD [class^="text"] > p {
    color: hsl(from currentColor h s l/.6);
    font-size: clamp(min(14px,3.4vw),1vw,16px);
}
/* sc6 */
.sc6 {overflow: hidden;}
.sc6 .chp {
    display: flex;
    row-gap: min(.5em,3vw);
    flex-direction: column;
}
.sc6 .container-xxl {
    padding-top: 0 !important;
}
.sc6 *:not(.cardD) .title {
    font-weight: 200;
    font-size: clamp(min(25px,4.7vw),2vw,37px);
}
.sc6 .ct-form {
    flex-wrap: nowrap;
    border-radius: min(22px,2vw);
    backdrop-filter: blur(1.1em);
    padding: min(1.4em,2vw) min(2em,4vw);
    border: 1px solid hsl(from var(--cLwhite) h s l/.08);
    background-color: hsl(from var(--cLblackDeep) h s l/0.3);
}
.sc6 .ct-form .flex {
    align-items: center;
    gap: min(1em,4vw) 5%;
    justify-content: space-between;

}
.sc6 .chp {flex: 1 1 max(min(300px,80vw),30%);}
.sc6 .chp label {
    font-weight: 500;
    color: var(--cLred);
    letter-spacing: -0.24px;
    text-transform: uppercase;
}
.sc6 .pagination {
    margin-top: min(2em,5vw);
}
.sc6 .swiper {
    overflow: visible;
    clip-path: polygon(0 0, calc(100% + (min(1637px,90vw) / 2)) 0%, calc(100% + (min(1637px,90vw) / 2)) 100%, 0% 100%);
}
.sc6 .grid {
    display: grid;
    gap: min(1.5em,5vw) 2%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(200px,80vw), 30%), 1fr));
}
/* sc7 */
.sc7 .dot::before {background-color: var(--cLredDark);}
.sc7 .title {
    font-weight: 200;
    font-size: clamp(min(26px,3.5vw),2.3vw,48px);
}
.sc7 .title em {color: var(--cLredDark);}
.sc7 .row {
    row-gap: 0;
    align-items: center;
    padding: min(1em,5vw);
    color: var(--cLblackDeep);
    border-radius: min(81px,8vw);
    background: transparent radial-gradient(closest-side at 81% 25%, #F2DCD2 0%, #EBE9EA 100%) 0% 0% no-repeat padding-box;
    margin-bottom: 20px;
}
.sc7 .left {flex: 1 1 max(min(200px,80vw),55%);}
.sc7 .right {flex: 1 1 max(min(200px,80vw),40%);}
.sc7 .row picture {
    height: min(487px,60vw);
    border-radius: min(60px,5vw);
}
.sc7 .row .left > [class^="text"] {
    font-weight: 200;
    padding: min(2em,5vw);
}
.sc7 .row .left > [class^="text"] p {color: hsl(from currentColor h s l/.8);}
.sc7 .row .left > [class^="text"] p strong {color: hsl(from currentColor h s l/1);}
/* .sc7:has(+footer) {padding-bottom: min(5em,10vw);} */
.sc7 + footer {
    padding-top: min(5em,10vw);
    margin-top: calc(min(5em,10vw) * -2);
}
/* sc8 */
.sc8 .left {
    flex: 1 1 max(min(300px,80vw),60%);
}
.sc8 .right {
    flex: 1 1 max(min(300px,80vw),20%);
    color: hsl(from currentColor h s l/.6);
}
.sc8 .right strong {color: hsl(from currentColor h s l/1);}
.sc8 .title {
    font-weight: 200;
    text-transform: uppercase;
    font-size: clamp(min(30px,5vw),3vw,57px);
}
.sc8 .title em {color: var(--cLredDark);}
.sc8 .images {
    column-gap: 2%;
} 
.sc8 .images > picture {
    height: min(350px,40vw);
    border-radius: min(11px,5vw);
}
.sc8 .images > picture:nth-child(1) {flex: 1 1 max(min(300px,50vw),60%);}
.sc8 .images > picture:nth-child(2) {flex: 1 1 max(min(300px,30vw),30%);}
.sc8 .cliping.style {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    opacity: 0.6;
    mix-blend-mode: multiply;
}
.sc8.contact .cliping.style {
    align-items: center;
    justify-content: flex-start;
}
.sc8 .cliping.style img {
    position: relative;
    top: 10%;
    height: min(200px,40vw);
    width: min(1000px,100%);
}
.sc8 .ct-swiper {
    position: relative;
    flex: 1 1 100%;
    width: min(1637px,90vw);
}
.sc8 .ct-swiper .swiper-wrapper {height: auto;}
.sc8 .ct-swiper picture {
    height: min(411px,60vw);
    border-radius: min(11px,4vw);
}
.sc8 .ct-swiper picture img {
    height: 100%;
    transition: all .3s;
    filter: brightness(.8);
}
.sc8 .ct-swiper picture:hover img {
    scale: 1.02;
    filter: brightness(1);
}
.sc8 .ct-swiper .pagination {
    position: relative;
    align-content: center;
    width: min(560px,100%);
    justify-content: center;
    margin-top: min(2em,5vw);
}
.sc8 .ct-swiper .pagination .arrow {
    backdrop-filter: blur(1em);
    background-color: hsl(from var(--cLwhite) h s l/.3);
}
.sc8 .slider {
    display: grid;
    flex: 1 1 100%;
    gap: min(1.5em,5vw) 2%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(200px,40vw), 20%), 1fr));
}
.sc8 .slider li {
    position: relative;
    backdrop-filter: blur(1em);
    border-radius: min(22px, 2vw);
    padding: min(1.4em, 2vw) min(2em, 4vw);
    font-size: clamp(min(14px,3.4vw),1.1vw,18px);
    border: 1px solid hsl(from var(--cLwhite) h s l / .08);
    background-color: hsl(from var(--cLblackDeep) h s l / 0.1);
}
.sc8 .slider li .icn::before {padding: min;}
.sc8 .slider li .card-title {
    font-weight: 500;
    color: var(--cLredDark);
    letter-spacing: -0.24px;
    font-size: clamp(min(18px,5vw),1.3vw,24px);
}
.sc8 .ct-form {
    display: grid;
    flex: 1 1 100%;
    gap: min(1.5em,5vw) 2%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(200px,80vw), 40%), 1fr));
}
.sc8 .ct-form .left {
    display: flex;
    row-gap: min(1.3em,5vw);
    flex-direction: column;
}
.sc8 .ct-form .map {
    display: flex;
    flex-wrap: wrap;
    gap: min(1em,5vw) 3%;
}
.sc8 .ct-form .map picture {flex: 1 1 max(min(200px,80vw),30%);}
.sc8 .ct-form .map iframe {flex: 1 1 max(min(200px,80vw),55%);}
.sc8 .ct-form .map :is(iframe,picture) {
    height: min(271px,50vw);
    border-radius: min(36px,5vw);
}
.sc8 .ct-form .flex {
    position: relative;
    gap: min(1em,5vw) 5%;
    padding: min(1.5em,5vw);
    color: var(--cLblackDeep);
    border-radius: min(46px,5vw);
    background: transparent radial-gradient(closest-side at 81% 25%, #F2DCD2 0%, #EBE9EA 100%) 0% 0% no-repeat padding-box;
}
.sc8 .ct-form .nav {
    display: grid;
    gap: min(1.5em,5vw) 2%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(200px,80vw), 40%), 1fr));
    z-index: 1;
}
.sc8:has( + .sc6) {padding-bottom: min(60em,40vw);}
.sc8 + .sc6 {margin-top: calc(min(60em,40vw) * -1);}
/* sc9 */
.sc9 .title {
    font-weight: 200;
    text-transform: uppercase;
    font-size: clamp(min(30px,5vw),3vw,57px);
}
/* blocs-flex */
.blocs-flex {
    display: flex;
    flex-wrap: wrap;
    gap: min(2em,5vw) 5%;
}
.blocs-flex.direction-reverse {flex-direction: row-reverse;}
.blocs-flex .left {flex: 1 1 max(min(300px,50vw),40%);}
.blocs-flex .right {
    display: flex;
    flex-wrap: wrap;
    gap: min(1em,5vw) 5%;
    flex: 1 1 max(min(300px,50vw),50%);
}
.blocs-flex .right > picture:nth-child(1) {flex: 1 1 max(min(200px,50vw),50%);}
.blocs-flex .right > picture:nth-child(2) {flex: 1 1 max(min(200px,50vw),30%);}
.blocs-flex .right > picture {
    height: min(434px,70vw);
    border-radius: min(11px,5vw);
}
.blocs-flex .dot::before {background-color: var(--cLredDark);}
.blocs-flex .title {
    font-weight: 200;
    font-size: clamp(min(26px, 4.2vw), 2.3vw, 48px);
}

.blocs-flex .title em {
    color: var(--cLredDark);
}

/* sc404 */
.sc404 .h2 {
    font-weight: 400;
    font-size: clamp(min(50px, 12vw), 5vw, 85px);
}
.sc404 .h2 em {
    scale: 1.5;
    translate: 0 -16%;
    display: inline-block;
    color: var(--cLredDark);
}
.sc404 p {font-size: clamp(min(17px,4vw),1.4vw,26px);}
/* footer */
footer {column-gap: 5%;}
footer .row {row-gap: 0;}
footer .row > .head[class^="container"] {padding-bottom: min(2em,7vw);}
footer .row > .foot[class^="container"] {
    padding-block: min(2em,5vw);
    border-top: 1px solid hsl(from var(--cLgray) h s l/.3);
}
footer .flex {column-gap: 5%;}
footer .left {flex: 1 1 max(min(200px,80vw),20%);}
footer .right {flex: 1 1 max(min(200px,80vw),70%);}
footer .title {
    font-weight: 400;
    color: var(--cLredDark);
    font-size: clamp(min(14px,3.4vw),1.1vw,18px);
}
footer .nav {font-size: clamp(min(14px,3vw),1vw,16px);}
footer .grid {
    display: grid;
    gap: min(2em,6vw) 4%;
    grid-template-columns: repeat(auto-fill, minmax(max(min(200px,40vw), 20%), 1fr));
}
footer .grid .nav {
    display: grid;
    row-gap: min(.5em,4vw);
}
footer .foot .nav {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    color: hsl(from currentColor h s l/.6);
}
footer .foot .nav > li:not(:first-child) {
    display: flex;
    align-items: center;
}
footer .foot .nav > li:not(:first-child)::before {
    position: relative;
    content: '-';
    display: inline-block;
    margin-inline: .4em;
}
/* ===========================================================
   RESPONSIVE
=========================================================== */
@media screen and (width>=1200px) {.mob{display: none !important;}}
@media screen and (width<1200px) {.desk{display: none !important;}}
@media screen and (width<1400px) {.laptop{display: none !important;}}
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
    .hero-anim, .highlight, .deco-multicolor span {transition: none !important;}
}



.wpcf7-spinner {
    display: none;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.btn-cLredDark {
    z-index: 1;
    line-height: 1;
    font-weight: 400;
    width: max-content;
    transition: all .3s;
    align-items: center;
    display: inline-flex;
    border-radius: 2.5em;
    text-decoration: none;
    column-gap: min(.8em, 2vw);
    border: 1px solid transparent;
    padding: min(0.65em, 3vw) min(1.4em, 5vw);
    font-size: clamp(min(14px, 3.4vw), 1.1vw, 18px);
}


span.lepdf {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 15px;
    top: 15px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px #00000057;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

span.lepdf:before {
    content: "";
    background: url(/wp-content/uploads/2026/08/pdf.png);
    width: 22px;
    height: 23px;
    background-size: contain;
}

.chp select {
    background: #000;
}




body.single-post .single-actualite-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
}

body.single-post .single-actualite-content {
    min-width: 0;
}

body.single-post .single-actualite-image {
    min-width: 0;
}

body.single-post .single-actualite-image-sticky {
    position: sticky;
    top: 140px;
}

body.single-post .single-actualite-image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    max-height: 500px;
}

body.single-post .single-actualite-content p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.a2a_svg {
    display: none !important;
}


body.blog .sc5 .grid {
    display: grid;
    gap: min(1.5em, 3vw) 4%;
    grid-template-columns: repeat(3, 1fr);
}


@media (max-width: 1000px) {
    body.blog .sc5 .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    body.blog .sc5 .grid {
        grid-template-columns: 1fr;
    }
}




.gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    gap: 12px;

    width: 100%;
    margin: 30px 0;
}

/* 2 éléments = 2 colonnes */
.gallery:has(> .gallery-item:nth-of-type(2)) {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 éléments ou plus = maximum 3 colonnes */
.gallery:has(> .gallery-item:nth-of-type(3)) {
    grid-template-columns: repeat(3, 1fr);
}

/* On neutralise les styles WordPress */
.gallery .gallery-item {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    overflow: hidden;
    border-radius: 12px;
}

.gallery .gallery-icon {
    width: 100%;
    height: 100%;
}

.gallery .gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery .gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: cover;
    transition: transform .4s ease;
}

.gallery .gallery-item:hover img {
    transform: scale(1.04);
}

/* Le <br> ajouté par WordPress ne sert plus */
.gallery > br {
    display: none;
}


/* =========================================
   BENTO : uniquement à partir de 3 images
   ========================================= */

.gallery:has(> .gallery-item:nth-of-type(3)) .gallery-item {
    min-height: 220px;
}

/* 1ère image : grosse case */
.gallery:has(> .gallery-item:nth-of-type(3))
.gallery-item:nth-of-type(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Quelques cases verticales */
.gallery:has(> .gallery-item:nth-of-type(3))
.gallery-item:nth-of-type(6n + 4) {
    grid-row: span 2;
}

/* Quelques cases horizontales */
.gallery:has(> .gallery-item:nth-of-type(3))
.gallery-item:nth-of-type(6n + 5) {
    grid-column: span 2;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

    .gallery:has(> .gallery-item:nth-of-type(3)) {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery:has(> .gallery-item:nth-of-type(3))
    .gallery-item:nth-of-type(6n + 1) {
        grid-column: span 2;
    }

    .gallery:has(> .gallery-item:nth-of-type(3))
    .gallery-item:nth-of-type(6n + 5) {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .sc1 .ct-values .values > li::before {
    position: relative;
    width: 2px;
    content: '';
    height: 100%;
    margin-inline: min(2em,5vw);
    background-color: hsl(from var(--cLredBright) h s l/.3);
}


body.single-post .single-actualite-layout {
    grid-template-columns: 1fr;
}

body.single-post .single-actualite-content {
    order: 2;
}

    .gallery,
    .gallery:has(> .gallery-item:nth-of-type(2)),
    .gallery:has(> .gallery-item:nth-of-type(3)) {
        grid-template-columns: 1fr;
    }

    .gallery .gallery-item {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .gallery .gallery-item img {
        min-height: 220px;
        max-height: 380px;
    }
}


/* Bouton son */
#video-sound-toggle {
    width: fit-content;
    height: auto;
    padding: 8px 20px;
    border: 0;
    border-radius: 50px;
    background: #c8202b;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s ease;
    margin-left: 36px;
    margin-top: 17px;
}

/* Chaque état du bouton */
#video-sound-toggle .sound-on,
#video-sound-toggle .sound-off {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: all 0.4s ease;
}

/* Icônes */
#video-sound-toggle img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

#video-sound-toggle .sound-on {
    display: none;
    transition: all 0.4s ease;
}

#video-sound-toggle .sound-off {
    display: inline-flex;
    transition: all 0.4s ease;
}

#video-sound-toggle.active .sound-on {
    display: inline-flex;
    transition: all 0.4s ease;
}

#video-sound-toggle.active .sound-off {
    display: none;
    transition: all 0.4s ease;
}


body {
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            hsl(from var(--cLwhite) h s l / .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            hsl(from var(--cLwhite) h s l / .08) 1px,
            transparent 1px
        );

    background-size: min(40px, 8vw) min(40px, 8vw);
}

body > * {
    position: relative;
    z-index: 1;
}

.page-id-321 picture img{
    object-fit: contain;
}
.page-id-404 .sc10 .right picture img{
    object-fit: contain;
}

#cmplz-cookiebanner-container{
    z-index:10000000!important;
}