/*
 ██████   █████  ███████ ███████
 ██   ██ ██   ██ ██      ██
 ██████  ███████ ███████ █████
 ██   ██ ██   ██      ██ ██
 ██████  ██   ██ ███████ ███████
*/

/* ── Breakpoints reference ───────────────────────────────
   xs   480px   sm   600px   md   782px   lg    920px
   xl  1226px  xxl  1380px  max  1546px  2xl  1920px
──────────────────────────────────────────────────────── */

:root{
    --body-background:              var(--wp--preset--color--white);
    --eco-badge-light-background:   var(--wp--preset--color--white);
    --eco-badge-dark-background:    var(--wp--preset--color--dark);
    --header-height:                110px;
    --header-height-xs:             49px;
    --header-items-size:            49px;
    --logo-width-min:               100px;
    --logo-height:                  100px;
    --logo-width-max:               200px;
    --block-parallax-min-height:    360px;
    --banner-min-height:            80vh;
    --banner-max-height:            80vh;
    --global-gap:                   10px;
    --global-radius:                0px;
    --nav-submenu-width:            320px;
    --nav-pannel-bg:                var(--wp--preset--color--brand);
    --error:                       #dc3232;

    /* Si inutilisé, supprimer*/
    --img-deco:                     url(https://belleza-pithiviers.fr/wp-content/uploads/2026/06/motif2-fixed.svg);
    --img-deco-height:              432px;
    --img-deco-width:               222px;

    --bridge-bg:                    url(https://belleza-pithiviers.fr/wp-content/uploads/2026/06/pattern-fixed.svg);
    --block-bg:                     url(https://belleza-pithiviers.fr/wp-content/uploads/2026/06/deco-min.webp);

    /* Ne pas modifier les valeurs en clamp */
    --container-padding-x:      clamp(16px, 3vw, 60px); 
    --logo-width-fluid:         clamp(var(--logo-width-min), 15vw, var(--logo-width-max));
}

body{
  background-color:             var(--body-background);
}
main{
    @media (max-width:782px) {
        padding-inline: var(--container-padding-x);
    }
    img:is([sizes=auto i],[sizes^="auto," i]){
        contain-intrinsic-size:revert;
    }
}

header #barre-menu { min-height: var(--header-height); }
header .site-banner {
    margin-top:     var(--header-height);
    /* ── Breakpoints reference ───────────────────────────────
    xs   480px   sm   600px   md   782px   lg    920px
    xl  1226px  xxl  1380px  max  1546px  2xl  1920px
    ──────────────────────────────────────────────────────── */
    @media (max-width: 1379px){ 
        max-height:     var(--banner-max-height);
        min-height:     var(--banner-min-height);
    }
    @media (min-width: 1380px) and (max-width: 1545px){ 
        max-height:     calc(var(--banner-max-height) - 6vh);
        min-height:     calc(var(--banner-max-height) - 6vh);
    }
    @media (min-width: 1546x){ 
        max-height:     calc(var(--banner-max-height) - (var(--banner-max-height)) / 3);
        min-height:     calc(var(--banner-max-height) - (var(--banner-max-height)) / 3);
    }
}

.elementor-button span, .elementor-button a, .elementor-button .elementor-button-text,
.card-link.is-style-filled, .card-link.is-style-secondary{
    font-weight:        bold;
}

header .bandeau{
    .header-elements-wrapper {
        .btn, .is-primary, .is-secondary, .social-link, .btn-wrap .btn{
            height:     var(--header-items-size);
            min-width:  var(--header-items-size);
        }
    }
    &.scrolled{
        .header-elements-wrapper {
            .btn, .is-primary, .is-secondary, .social-link, .btn-wrap .btn{
                width:  var(--header-items-size);
            }
        }
    }
}

.nav-toggle-open,
.nav-toggle-close {
    color:              var(--b-bg);
    background-color:   var(--b-heading-alt);
    width:              var(--header-items-size);
    height:             var(--header-items-size);

    > svg {
        fill:           var(--b-bg);
        stroke:         var(--b-bg); 
    }

    &:hover,
    &:focus {
        background-color: var(--b-heading-alt);
        color:            var(--b-bg);
    }
}

header #barre-menu {
    .site-navigation-wrapper {
        .site-navigation{           order: 1; }
        .nav-toggle-open{           order: 3; }
        .header-elements-wrapper{   order: 2; }
    }
}

.bandeau {
    .mag-logo-wrap {
        position:    relative;
    }
    &.scrolled #barre-menu{
        @media (max-width: 919px) {
            justify-content: space-between;
        }
    }
    #barre-menu {
        padding-inline:  var(--container-padding-x);
        @media (max-width: 919px) {
            justify-content: flex-end;
            gap:             var(--global-gap); 
        }
        @media (min-width: 920px){
            justify-content: space-around;
        }
        @media (min-width: 920px) and (max-width: 1225px){
            gap:             calc(var(--global-gap) / 2); 
        }
        @media (min-width: 1226px) {
            gap:             var(--global-gap); 
        }
    }
    #barre-menu .site-navigation-wrapper {
        @media (max-width: 1225px) { gap: var(--global-gap); }
        @media (min-width: 1226px) { gap: var(--space-sm); }

        .header-elements-wrapper { 
            gap: var(--global-gap); 
            .header-cta {
                gap: var(--global-gap); 
            }
        }
    }
    .nav-menu,
    .menu-item > a {
        text-decoration: none;
        font-weight:     400;
        font-family:     var(--font-titles);
        @media (max-width: 919px) {                         font-size: var(--wp--preset--font-size--sm); gap: var(--global-gap); }
        @media (min-width: 920px) and (max-width: 1225px) { font-size: calc(0.7 * var(--wp--preset--font-size--xs)); gap: 0; }
        @media (min-width: 1226px) and (max-width: 1379px){ font-size: calc(0.8 * var(--wp--preset--font-size--xs)); gap: var(--space-xs); }
        @media (min-width: 1380px) {                        font-size: var(--wp--preset--font-size--xs); gap: var(--space-xs); }
    }
    .sub-menu {
        gap: var(--global-gap);
        .menu-item-has-children & { min-width: var(--nav-submenu-width); }
    }
    .nav-toggle-close {
        position: absolute;
        right:    16px;
        top:      16px;
        z-index:  10;
    }
    #site-navigation.is-open {
        align-items:     center;
        .nav-menu,
        .sub-menu    { gap: var(--global-gap); }

        .menu-item > a {
            font-size: var(--wp--preset--font-size--xs);
            text-align:      center;
            justify-content: center;
        }
    }
}

header {
    #site-navigation.is-open .sub-menu{
        background: transparent;
    }
    .menu-item {
        &:hover > a,
        &:focus-within > a,
        &:has(.sub-menu:hover) > a {
            color:            var(--b-bg);
            background-color: var(--b-heading-alt);
            transition:       background-color 0.3s ease;
        }
    }
    .sub-menu {
        background-color: var(--b-heading-alt);
        box-shadow:       var(--btn-default-sh);
        .menu-item > a {
            color: var(--b-bg);
            &:hover {
                color:            var(--wp--preset--color--white);
                background-color: var(--wp--preset--color--brand-dark-50);
            }
        }
    }
    #site-navigation.is-open {
        background: var(--nav-pannel-bg);
        color:      var(--b-bg);
        .menu-item:has(.sub-menu:hover) > a { background-color: transparent; }
    }
}

body header .site-banner {
    .banner-content {
        display:            flex;
        flex-direction:     column;
        justify-content:    center;
        align-items:        flex-start;
        
        @media (max-width: 782px) { 
            width:          100%;
            padding-left:   var(--space-md);
            padding-top:    0;
            padding-right:  var(--space-md);
            padding-bottom: var(--space-md);
            position:       absolute;
            text-align:     center;
            gap:            var(--space-sm);
        }
        @media (min-width: 783px) { 
            padding:        var(--space-xxl) var(--space-md) 0 var(--space-md);
            position:       absolute;
            gap:            var(--space-sm);
        }

        .diapo-cta-buttons {
            display:   flex;
            flex-wrap: wrap;
            gap:       var(--global-gap);

            @media (max-width: 782px) { justify-content: center; }
            @media (min-width: 783px) { justify-content: center; }

            .btn{
                min-width:200px;
                display: flex;
                justify-content: center;
            }
        }

        .banner-diapo-text {
            @media (max-width: 782px) { 
                font-size: var(--wp--preset--font-size--sm);
            }
            @media (min-width: 783px) { 
                font-size: var(--wp--preset--font-size--sm);
            }
        }
    }
}

header .site-banner.has-parallax {
    .image-switcher__item img {
        @media (min-width: 783px) {
            mask-image:         linear-gradient(to bottom, black 75%, transparent 90%);
            -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 90%);
        }
    }
}

.image-switcher__nav {
    position:        absolute;
    display:         flex;
    justify-content: center;
    padding-block:   1rem;
    width:           100%;
    left:            0;
    bottom:          3vh;
    z-index:         3;
}
.image-switcher__dots {
    gap:        1rem;
}
.image-switcher__dot {
    width:         1rem;
    height:        1rem;
    border-radius: 50%;
}

.header-social-wrap{
    .social-links-wrap {
        justify-content: space-around;
        gap: var(--global-gap);
    }
}
.footer-social-wrap{
    .social-links-wrap {
        gap: var(--global-gap);
        @media (max-width: 782px) {
            justify-content: center;
        }
        @media (min-width: 783px) {
            justify-content: space-around;
        }
    }
}

header .site-banner .banner-content {
    h1{
        font-weight:    400;
        font-size:      var(--wp--preset--font-size--lg);
        line-height:    1.6rem;
        font-family:    var(--font-titles);
        span {
            font-family:   var(--font-body);
            font-size:     var(--wp--preset--font-size--lg);
        }
    }
    .banner-title {
        @media (max-width: 782px) { 
            align-items: center;
            text-align:  center;
        }
        @media (min-width: 783px) { 
            align-items: center;
            text-align:  center;
        }
    }
    .banner-cta {
        margin-top: var(--global-gap);
        @media (max-width: 782px) { 
            justify-content: center;
        }
        @media (min-width: 783px) { 
            justify-content: flex-start;
        }
    }
    .banner-diapo-text,
    .diapo-cta-container{
        @media (max-width: 782px) { 
            margin:0 auto;
        }
        @media (min-width: 783px) { 
            margin:0 auto;
        }
    }
    .diapo-cta-container{
        padding-top: var(--space-xs);
    }
}

header {
    .mag-logo-wrap {
        height:     var(--header-height);
        width:      var(--logo-width-fluid);
    }
    .site-brand-text{
        font-family: var(--font-titles);
        font-size:   var(--wp--preset--font-size--md);
        font-weight: 600;
    }

    .mag-logo-wrap .mag-logo-wrap__default {
        width: var(--logo-width-fluid);
    }

    .mag-logo-wrap .mag-logo-wrap__scroll {
        height:      var(--logo-height);
        padding:     calc(var(--space-md) - var(--space-xs)) 0;

        img {
            width:  auto;
            height: calc(var(--logo-height) - calc(calc(var(--space-md) - var(--space-xs))) * 2);
        }
    }

    .bandeau.is-sticky-header.scrolled {
        .mag-logo-wrap__scroll {
            height:      var(--logo-height);
            img {
                width:  auto;
                height: calc(var(--logo-height) - calc(calc(var(--space-md) - var(--space-xs))) * 2);
            }
        }
    }
}

.header-social-wrap{
    height:         var(--header-height);
    flex-direction: column;
    .social-links-wrap {
        flex-direction: row;
    }
}
.header-cta .btn{
   .btn-text {
        clip: rect(1px, 1px, 1px, 1px);
        position: absolute;
        height: 1px;
        width: 1px;
        overflow: hidden;
    }
}

body header#site-header.site-header.is-boxed {
    @media (min-width: 783px) {
        .banner-content,
        .image-switcher__nav {
            padding-inline: var(--container-padding-x);
        }

        #barre-menu { 
            padding-inline: var(--container-padding-x);
        }
    }
    @media (min-width: 920px) {
        margin-top: var(--space-md);
    }
}

body footer.site-footer.is-boxed:not(.dynamic-footer),
.site-footer{
    padding-inline: var(--container-padding-x);
    padding:        var(--container-padding-x);
}

body footer.site-footer.is-boxed:not(.dynamic-footer){
    overflow:       visible;
}

.site-footer {
    border-top:     solid 4px var(--wp--preset--color--brand-dark-20);
    padding-block:  var(--space-sm);
    text-align:     center;
    
    @media (min-width: 783px) { text-align: left; }

    h3, p { text-align: center; }

    .footer-brand { 
        position:       relative;
        gap:            var(--space-lg);
        display:        flex;
        flex-direction: column;
        overflow:       visible;

        @media (min-width: 783px) {
            display:         grid;
            grid-auto-flow:  row;
        }
        @media (max-width: 929px) {
            margin-top: var(--space-xl);
        }

        img {
            transform:      translateX(-50%) translateY(-50%);
            left:           50%;
            position:       absolute;
            margin:         0 auto;
            height:         auto;

            @media (max-width: 929px) {
                width:  var(--logo-width-fluid);
                top:    -18%;
            }
            @media (min-width: 920px) {
                width:  calc(var(--logo-width-fluid) - var(--space-lg));
            }
            @media (min-width: 920px) and (max-width: 1225px) {
                top:    -4%;
            }
            @media (min-width: 1226px) {
                top:    -24%; /*calc(-50% - var(--space-sm));*/
            }
        }

        .mag-logo-text {
            font-family: var(--font-titles);
            font-size:   var(--space-md);
            font-weight: 600;

            @media (max-width: 919px) { justify-content: center; }
        }
    }

    .footer-section {
        display:         flex;
        flex-direction:  column;
        justify-content: space-around;
        height:          stretch;
        gap:             var(--space-xs);
        margin:          0 auto;
    }

    .footer-config-wrap {
        align-items: start;

        display:        flex;
        flex-direction: column;
        row-gap:        var(--space-md);

        @media (min-width: 929px) {
            display:               grid;
            grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            row-gap:               var(--space-xs);
            column-gap:            var(--space-md);
            justify-content:       center;
            justify-items:         center;
        }
    }

    .footer-cta {
        display:         flex;
        flex-direction:  row;
        gap:             var(--space-sm);
        justify-content: center;
        margin:          0 auto;

        @media (max-width: 1199px) { flex-direction: column; }
    }

    .footer-contact-info {
        .footer-icon {
            width:  16px;
            height: 16px;

            svg { width: 16px; height: 16px; }
        }
    }

    .footer-address {
        justify-content: center;

        .footer-icon {
            margin-top: 6px;
            @media (max-width: 782px) { left: calc(-1 * var(--space-sm)); }
        }

        .adress { min-width: 0; 
            @media (min-width: 920px) { flex: 1; }
        }
    }

    .footer-tel,
    .footer-email { justify-content: center; }

    .footer-contact-info,
    .social-links-wrap {
        @media (max-width: 782px) {
            align-items: center;
            text-align:  center;
            width:       100%;
        }
        @media (min-width: 783px) { justify-content: flex-start; }
    }

    .footer-social-wrap {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        width:          100%;

        .social-links-wrap { flex-direction: row; }

        @media (max-width: 919px) {
            justify-content: center;
            text-align:      center;
        }
        @media (min-width: 920px) {
            justify-content: flex-end;
            border-inline:   solid 1px var(--wp--preset--color--brand);
        }
    }

    .footer-bar {
        padding-block: var(--space-xs);

        #footer-navigation {
            border-block: solid 1px var(--wp--preset--color--brand);
            text-align:   center;
            padding:      var(--space-xs) 0;
            margin-block: var(--space-lg) 0;
        }

        .footer-signature { justify-content: center; }
    }
}

.e-con.bridge {
    overflow: hidden;
    position: relative;
    gap:           0;
    border-radius: var(--block-radius);
    min-height:    var(--block-parallax-min-height);

    &::before {
        content:          "";
        position:         absolute;
        inset:            0;
        z-index:          0;
        pointer-events:   none;
        background-color: var(--b-bg-alt);
        mask-image:       var(--bridge-bg);
        mask-repeat:      repeat;
        mask-size:        calc(2 * var(--space-xl));
        opacity:          .3;
    }

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

    .elementor-widget-heading {
        text-align: center;
        h2, h2.elementor-heading-title { text-align: center; margin: 0 auto; }
    }

    .e-con { justify-content: center; }
}
.e-con.bridge.has-parallax{ 
    gap:0; 
    .elementor-widget-heading{ text-align: center;
        h2, h2.elementor-heading-title{ text-align: center; margin:0 auto; }
    }
    .e-con{ justify-content: center; }
}
.e-con.bridge.has-parallax .e-con.e-child{ flex:none; }

@media (max-width: 900px) { 
    body:not(header, footer) .e-grid.e-con-boxed > .e-con-inner { 
        grid-template-columns: 1fr; 
    } 
    .e-con-full.e-flex:has(.elementor-widget-button) { flex-wrap: wrap; } 
    .e-grid:has(.elementor-widget-tm-accordion-card),
    .e-con.e-flex:has(.elementor-widget-tm-accordion-card) {
        align-items: start;
    }
}

.wpcf7-form {
    background-color: var(--wp--preset--color--accent-1);
    margin:           var(--space-sm) auto;
    padding:          var(--space-md);
    border-radius:    var(--card-radius);
    box-shadow:       var(--card-shadow);
    font-family:      var(--font-body);

    label {
        display:       block;
        margin-bottom: var(--space-sm);
        font-weight:   600;
        color:         var(--wp--preset--color--text);
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        padding:          var(--space-xs) var(--space-sm);
        margin-top:       calc(var(--space-xs) / 2);
        min-height:       var(--space-md);
        font-size:        var(--wp--preset--font-size--xs);
        border:           1px solid var(--wp--preset--color--text);
        border-radius:    var(--global-radius);
        background-color: var(--wp--preset--color--white);

        &:focus {
            border-color: var(--wp--preset--color--black);
        }
    }

    textarea {
        max-height: var(--space-xl);
    }

    input[type="submit"] {
        width:      100%;
        cursor:     pointer;
        transition: background-color 0.3s ease,
                    outline 0.2s ease,
                    box-shadow 0.2s ease;
    }
}

/* Messages d'erreur */
.wpcf7-not-valid-tip {
    color:       var(--error);
    font-size:   0.9em;
    font-weight: normal;
    display:     block;
    margin-top:  var(--space-xs);
}

/*
 ███████ ████████ ██    ██ ██      ███████ ███████
 ██         ██     ██  ██  ██      ██      ██
 ███████    ██      ████   ██      █████   ███████
      ██    ██       ██    ██      ██           ██
 ███████    ██       ██    ███████ ███████ ███████
*/

main{
    margin:0 auto;
    padding-top:        var(--container-padding-x);
    padding-bottom:     var(--container-padding-x);
}

.e-con[class*=is-style] {
    border-radius:      var(--card-radius);
}

.banner-content{
    outline:        2px solid var(--wp--preset--color--gradient-2);
    outline-offset: calc(-1 * var(--space-sm));
}

.elementor-widget-image.deco{
    img {
        outline:        2px solid var(--wp--preset--color--gradient-2);
        outline-offset: calc(-1 * var(--space-sm));
    }
}

.tm-card-item[class*=card-theme]{
    outline:        2px solid var(--b-border);
    outline-offset: calc(-1 * var(--space-sm));
    position:relative;
    overflow:visible;

    &::before{
        background-color:   var(--card-bg);  
        -webkit-mask-image: var(--img-deco);
        mask-image:         var(--img-deco);
        mask-repeat:        no-repeat;
        mask-size:          contain;
        position:absolute;
        content:"";
        top:              calc(50% - (var(--img-deco-height) / 2));
        z-index:          -1; 
        height:           var(--img-deco-height);   
        width:            var(--img-deco-width); 
    }
}

header .bandeau.is-sticky-header.scrolled #barre-menu{ box-shadow: var(--btn-default-sh); }

.site-header[class*=is-style] {
    &::before {
        background: var(--wp--preset--color--gradiant-1);
        @media (max-width: 782px) { 
            top:    calc(-1 * var(--header-height-xs));
            height: calc(100% + var(--header-height-xs));
        }
        @media (min-width: 783px) { 
            top:    calc(-1 * var(--header-height));
            height: calc(100% + var(--header-height));
        }
    }
    &.is-boxed {
        &::before {
            @media (min-width: 783px) { 
                top:    var(--space-md);
                height: calc(100% + var(--header-height));
            }
        }
    }
}

.e-con.e-parent.bg{
    &:not([class*=is-style]){
        .e-con-inner{
            @media (min-width: 783px) { 
                background-image:       var(--block-bg);
                background-repeat:      no-repeat;
                background-position:    top;
            }
        }
    }
    &.text-left{
        .e-con-inner{
            background-position:    60%;
        }
    }
    &.text-right{
        .e-con-inner{
            background-position:    40%;
        }
    }
}

.e-con.e-parent{
    &.text-right{
        .elementor-widget-image.deco{
            &:not(.img-broken){
                img {
                    mask-position:          240% 160%, center;
                }
            }
            &::after{
                @media (max-width: 1380px) { 
                    left:               calc(-1 * var(--space-sm));
                }
                @media (min-width: 1440px) { 
                    left:               calc(-1 * var(--space-lg));
                }

                transform:          rotate(-25deg);
            }
        }
    }
    &.text-left{
        .elementor-widget-image.deco{
            &:not(.img-broken){
                img {
                    mask-position:          -100% 220%, center;
                }
            }
            &::after{
                @media (max-width: 1379px) { 
                    right:               calc(-1 * var(--space-sm));
                }
                @media (min-width: 1380px) { 
                    right:               calc(-1 * var(--space-lg));
                }
                transform: rotate(-185deg);
            }
        }
    }
}

.elementor-widget-image.deco{
    &:not(.img-broken){
        position:relative;
        overflow:visible;
        &::after{
            position:absolute;
            content:"";
            top:              0;
            z-index:          -1;
            background-image: var(--img-deco);    
            height:           var(--img-deco-height);   
            width:            var(--img-deco-width);   
            fill:             var(--wp--preset--color--accent-1);    
        }
    }
}
.elementor-widget-image.deco{
    &:not(.img-broken){
        position:relative;
        img {
            -webkit-mask-image:    var(--img-deco), linear-gradient(black, black);
            mask-image:            var(--img-deco), linear-gradient(black, black);
            mask-repeat:           no-repeat,       repeat;
            mask-size:             var(--img-deco-width) var(--img-deco-height), cover;
            mask-composite:        exclude;
        }
    }
}

.elementor-widget-image.img-broken{
    &::after{
        display:none;
    }
    img::after{ display:none; }
}

.elementor-widget-tm-flexible-card{
    .tm-card-item.card-structure-editor{
        .card-body {
            img[src$=".svg"] {
                width: 33.33%;
            }
        }
    }
}

/*
  ██████  ██    ██ ███████ ██████  ██████  ██ ██████  ███████
 ██    ██ ██    ██ ██      ██   ██ ██   ██ ██ ██   ██ ██
 ██    ██ ██    ██ █████   ██████  ██████  ██ ██   ██ █████
 ██    ██  ██  ██  ██      ██   ██ ██   ██ ██ ██   ██ ██
  ██████    ████   ███████ ██   ██ ██   ██ ██ ██████  ███████
*/

/* Mettre les classes override ici */
@media (min-width: 782px) {
    .bandeau:not(.scrolled){
        .site-logo-wrapper{
            position:absolute;
            left: 50%;
            @media (max-width: 919px) {
                top: var(--space-xxl);
            }
            @media (min-width: 920px) {
                top: calc(2 * var(--space-xl));
            }  
            transform: translateX(-50%);
            .mag-logo-wrap__default{ position:relative;
                .mag-logo.mag-logo--default{
                    position:absolute;
                    will-change: transform;
                }
            }
        }
    }
    .bandeau.scrolled {
        .site-logo-wrapper{
            .mag-logo-wrap__default{
                .mag-logo.mag-logo--default{
                    position: absolute;
                    top: calc(-3 * var(--space-xxl));
                }
            } 
        }
    }
}

/*
@media (min-width: 1226px) {
    header .bandeau.is-sticky-header:not(.scrolled) {
    .nav-menu{
            li:nth-child(5){
                margin-left: var(--space-xl);
            }
        } 
    }
}*/

header .bandeau .mag-logo-wrap__default{
    will-change: opacity position;
}
header .bandeau.scrolled{
    .mag-logo-wrap__default{
        opacity:0;
    }
}
.banner-content{ position:relative;
    &::before, &::after{
        content:"";
        background-image: url(https://belleza-pithiviers.fr/wp-content/uploads/2026/06/motif-fixed.svg);
        background-repeat: no-repeat;
        width: 150px;
        height: 150px;
        z-index: 1;
        position:absolute;
    }
    &::before{
        top:0;
        left:0;
    }
    &::after{
        top:0;
        right:0;
        transform:rotate(90deg);
    }
}
.image-switcher{ position:relative;
    &::before{
        position:absolute;
        top:0;
        left:0;
        content:"";
        background-color: var(--wp--preset--color--accent-1);
        opacity:.5;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}