/* ==================================================
   PARTENARIAT ELECTROLUX — VERSION PREMIUM
   Responsive complet / alignements professionnels
================================================== */

.le-elx-showcase{
    position:relative;
    overflow:hidden;

    padding:86px 0 96px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(37,99,235,.055),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}

.le-elx-showcase,
.le-elx-showcase *,
.le-elx-showcase *::before,
.le-elx-showcase *::after{
    box-sizing:border-box;
}

.le-elx-showcase .le-container{
    position:relative;
    z-index:2;

    width:min(1760px,94%);
    margin:0 auto;
}

/* ==================================================
   CONTENEUR PRINCIPAL
================================================== */

.le-elx-showcase-box{
    position:relative;
    overflow:hidden;

    padding:48px;

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(430px,43%);
    gap:46px;
    align-items:stretch;

    border:1px solid rgba(255,255,255,.10);
    border-radius:30px;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(37,99,235,.19),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(37,99,235,.11),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #000d20 0%,
            #041a3d 58%,
            #000d20 100%
        );

    box-shadow:
        0 36px 100px rgba(0,13,32,.24),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.le-elx-showcase-box::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.035),
            transparent 25%
        ),
        radial-gradient(
            circle at 72% 68%,
            rgba(37,99,235,.09),
            transparent 34%
        );

    pointer-events:none;
}

.le-elx-showcase-box::after{
    content:"";

    position:absolute;
    inset:1px;

    border:1px solid rgba(255,255,255,.05);
    border-radius:29px;

    pointer-events:none;
}

.le-elx-showcase-box > *{
    position:relative;
    z-index:2;
}

/* ==================================================
   CONTENU GAUCHE
================================================== */

.le-elx-showcase-content{
    min-width:0;
    min-height:530px;
    padding:8px 0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}

.le-elx-showcase-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;
    min-height:29px;
    margin:0 0 20px;
    padding:0 12px;

    border:1px solid rgba(96,165,250,.24);
    border-radius:999px;

    background:rgba(37,99,235,.14);
    color:#86b5ff;

    font-size:10.5px;
    font-weight:900;
    line-height:1;
    letter-spacing:.7px;
    text-transform:uppercase;
}

/* ==================================================
   LOGOS
================================================== */

.le-elx-showcase-logos{
    width:100%;
    min-height:72px;
    margin-bottom:30px;

    display:flex;
    align-items:center;
    gap:21px;
}

.le-elx-showcase-logo{
    min-width:0;

    display:flex;
    align-items:center;
}

.le-elx-showcase-logo img{
    display:block;

    width:200px;
    max-width:100%;
    height:150px;

    object-fit:contain;

    filter:drop-shadow(0 12px 25px rgba(0,0,0,.22));
}

.le-elx-showcase-logo-electrolux img{
    height:150px;
}

.le-elx-showcase-cross{
    flex:0 0 auto;

    color:#4e89ff;

    font-size:34px;
    font-weight:300;
    line-height:1;

    text-shadow:0 0 22px rgba(37,99,235,.45);
}

/* ==================================================
   TITRE ET TEXTE
================================================== */

.le-elx-showcase-content h2{
    max-width:780px;
    margin:0 0 21px;

    color:#ffffff;

    font-size:48px;
    font-weight:950;
    line-height:1.08;
    letter-spacing:-1.45px;
}

.le-elx-showcase-content h2 span{
    display:inline;

    color:#397cff;
    background:none;
}

.le-elx-showcase-intro{
    max-width:720px;
    margin:0 0 25px;
    padding-bottom:0 !important;

    color:rgba(255,255,255,.76);

    font-size:16px;
    font-weight:500;
    line-height:1.72;
}

/* ==================================================
   RÉASSURANCE
================================================== */

.le-elx-showcase-highlight{
    width:100%;
    max-width:700px;
    min-height:78px;
    margin-bottom:27px;
    padding:15px 17px;

    display:grid;
    grid-template-columns:47px minmax(0,1fr);
    gap:14px;
    align-items:center;

    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;

    background:rgba(255,255,255,.045);
}

.le-elx-showcase-highlight-icon{
    width:47px;
    height:47px;
    flex:0 0 47px;

    border-radius:14px;

    background:linear-gradient(145deg,#2563eb,#0757f9);
    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 13px 28px rgba(37,99,235,.25);
}

.le-elx-showcase-highlight-icon svg{
    width:24px !important;
    height:24px !important;
    min-width:24px;
    min-height:24px;

    display:block;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.le-elx-showcase-highlight > div{
    min-width:0;

    display:grid;
    grid-template-rows:18px minmax(40px,auto);
    align-content:center;
}

.le-elx-showcase-highlight small{
    display:flex;
    align-items:center;

    min-height:18px;
    margin:0;

    color:#82b2ff;

    font-size:9.5px;
    font-weight:900;
    letter-spacing:.55px;
    text-transform:uppercase;
}

.le-elx-showcase-highlight strong{
    display:flex;
    align-items:center;

    min-height:40px;

    color:rgba(255,255,255,.87);

    font-size:13px;
    font-weight:750;
    line-height:1.52;
}

/* ==================================================
   BOUTONS
================================================== */

.le-elx-showcase-actions{
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    gap:13px;
}

.le-elx-showcase-btn{
    position:relative;
    overflow:hidden;

    min-height:56px;
    padding:0 22px;

    border-radius:13px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    text-decoration:none;
    white-space:nowrap;

    font-size:13.5px;
    font-weight:900;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.le-elx-showcase-btn:hover{
    transform:translateY(-4px);
}

.le-elx-showcase-btn-primary{
    border:1px solid rgba(255,255,255,.10);

    background:linear-gradient(135deg,#2563eb,#0757f9);
    color:#ffffff;

    box-shadow:
        0 20px 44px rgba(37,99,235,.30),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.le-elx-showcase-btn-primary:hover{
    color:#ffffff;

    box-shadow:
        0 25px 54px rgba(37,99,235,.38),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.le-elx-showcase-btn-secondary{
    border:1px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.06);
    color:#ffffff;
}

.le-elx-showcase-btn-secondary:hover{
    border-color:rgba(255,255,255,.35);

    background:rgba(255,255,255,.11);
    color:#ffffff;
}

.le-elx-showcase-btn svg{
    width:19px !important;
    height:19px !important;
    min-width:19px;
    min-height:19px;

    display:block;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.3 !important;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:transform .3s ease;
}

.le-elx-showcase-btn:hover svg{
    transform:translateX(4px);
}

.le-elx-showcase-btn:focus-visible{
    outline:3px solid rgba(96,165,250,.28);
    outline-offset:4px;
}

/* ==================================================
   VISUEL DROITE
================================================== */

.le-elx-showcase-visual{
    position:relative;

    min-width:0;
    min-height:530px;
}

.le-elx-showcase-image{
    position:absolute;
    inset:0;

    overflow:hidden;

    border-radius:23px;

    background:#000d20;

    box-shadow:
        0 28px 70px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.10);
}

.le-elx-showcase-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.03);

    transition:
        transform .85s cubic-bezier(.22,.61,.36,1),
        filter .5s ease;
}

.le-elx-showcase-box:hover
.le-elx-showcase-image img{
    transform:scale(1.08);
    filter:brightness(1.04);
}

.le-elx-showcase-image-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,13,32,.04) 30%,
            rgba(0,13,32,.56) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0,13,32,.24),
            transparent 65%
        );

    pointer-events:none;
}

/* ==================================================
   BADGES FLOTTANTS ALTERNÉS
================================================== */

.le-elx-showcase-floating-rotator{
    position:absolute;
    right:20px;
    bottom:20px;
    z-index:4;

    width:240px;
    min-height:74px;

    pointer-events:none;
}

.le-elx-showcase-floating-card{
    position:absolute;
    inset:0;

    width:100%;
    min-width:0;
    min-height:74px;
    padding:13px 15px;

    display:grid;
    grid-template-columns:45px minmax(0,1fr);
    gap:13px;
    align-items:center;

    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;

    background:rgba(0,13,32,.76);
    color:#ffffff;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 18px 42px rgba(0,0,0,.25);

    opacity:0;
    visibility:hidden;

    transform:
        translateY(16px)
        scale(.96);

    transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.22,.61,.36,1),
        visibility .55s ease;
}

.le-elx-showcase-floating-card.is-active{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);
}

.le-elx-showcase-floating-icon{
    width:45px;
    height:45px;

    border-radius:13px;

    background:linear-gradient(145deg,#2563eb,#0757f9);
    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 12px 26px rgba(37,99,235,.26);
}

.le-elx-showcase-floating-icon svg{
    display:block;

    width:23px !important;
    height:23px !important;
    min-width:23px;
    min-height:23px;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.le-elx-showcase-floating-card > div{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
}

.le-elx-showcase-floating-card small{
    display:block;

    margin:0;

    color:rgba(255,255,255,.58);

    font-size:9.5px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.le-elx-showcase-floating-card strong{
    display:block;

    margin:0;

    color:#ffffff;

    font-size:13px;
    font-weight:900;
    line-height:1.4;
}



/* ==================================================
   AVANTAGES
================================================== */

.le-elx-showcase-features{
    grid-column:1 / -1;

    margin-top:3px;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
}

.le-elx-showcase-feature{
    position:relative;
    overflow:hidden;

    min-width:0;
    min-height:232px;
    padding:22px 20px;

    display:grid;
    grid-template-rows:68px 60px minmax(76px,1fr);
    justify-items:center;
    align-content:start;

    border:1px solid rgba(255,255,255,.085);
    border-radius:18px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(37,99,235,.10),
            transparent 38%
        ),
        rgba(255,255,255,.045);

    text-align:center;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.le-elx-showcase-feature:hover{
    transform:translateY(-7px);

    border-color:rgba(96,165,250,.28);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(37,99,235,.17),
            transparent 40%
        ),
        rgba(255,255,255,.065);

    box-shadow:0 20px 48px rgba(0,0,0,.18);
}

.le-elx-showcase-feature-icon{
    width:58px;
    height:58px;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(37,99,235,.38),
            rgba(37,99,235,.14)
        );

    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14),
        0 15px 34px rgba(37,99,235,.18);
}

.le-elx-showcase-feature-icon svg{
    width:28px !important;
    height:28px !important;
    min-width:28px;
    min-height:28px;

    display:block;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.le-elx-showcase-feature-icon svg path,
.le-elx-showcase-feature-icon svg rect,
.le-elx-showcase-feature-icon svg circle,
.le-elx-showcase-floating-icon svg path,
.le-elx-showcase-floating-icon svg rect,
.le-elx-showcase-floating-icon svg circle,
.le-elx-showcase-highlight-icon svg path{
    fill:none !important;
    stroke:currentColor !important;
}

.le-elx-showcase-feature h3{
    width:100%;
    min-height:60px;
    margin:0;
    padding:8px 4px 0;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ffffff;

    font-size:15px;
    font-weight:900;
    line-height:1.4;
    letter-spacing:-.15px;
}

.le-elx-showcase-feature p{
    width:100%;
    min-height:76px;
    margin:0;
    padding:0 5px 0 !important;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    color:rgba(255,255,255,.65);

    font-size:12.5px;
    font-weight:500;
    line-height:1.6;
}

/* ==================================================
   RESPONSIVE — PETIT DESKTOP
================================================== */

@media(max-width:1350px){

    .le-elx-showcase-box{
        grid-template-columns:minmax(0,1fr) minmax(390px,42%);
        gap:36px;
        padding:42px;
    }

    .le-elx-showcase-content h2{
        font-size:43px;
    }

}

/* ==================================================
   RESPONSIVE — TABLETTE LARGE
================================================== */

@media(max-width:1200px){

    .le-elx-showcase-box{
        grid-template-columns:1fr;
    }

    .le-elx-showcase-content{
        min-height:auto;
    }

    .le-elx-showcase-visual{
        min-height:440px;
    }

    .le-elx-showcase-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

/* ==================================================
   RESPONSIVE — TABLETTE / MOBILE
================================================== */

@media(max-width:750px){

    .le-elx-showcase{
        padding:60px 0 72px;
    }

    .le-elx-showcase .le-container{
        width:calc(100% - 28px);
    }

    .le-elx-showcase-box{
        padding:28px 22px;
        gap:34px;

        border-radius:23px;
    }

    .le-elx-showcase-box::after{
        border-radius:22px;
    }

    .le-elx-showcase-content{
        align-items:center;

        text-align:center;
    }

    .le-elx-showcase-label{
        margin-left:auto;
        margin-right:auto;
    }

    .le-elx-showcase-logos{
        justify-content:center;
    }

    .le-elx-showcase-content h2{
        font-size:36px;
    }

    .le-elx-showcase-intro{
        margin-left:auto;
        margin-right:auto;
    }

    .le-elx-showcase-highlight{
        text-align:left;
    }

    .le-elx-showcase-logo img{
        height:50px;
    }

    .le-elx-showcase-logo-electrolux img{
        height:60px;
    }

    .le-elx-showcase-actions{
        width:100%;

        flex-direction:column;
    }

    .le-elx-showcase-btn{
        width:100%;
    }

    .le-elx-showcase-visual{
        min-height:370px;
    }

    .le-elx-showcase-features{
        grid-template-columns:1fr;
    }

    .le-elx-showcase-feature{
        min-height:auto;

        grid-template-rows:68px auto auto;
        row-gap:7px;
    }

    .le-elx-showcase-feature h3,
    .le-elx-showcase-feature p{
        min-height:auto;
    }

}

/* ==================================================
   RESPONSIVE — PETIT MOBILE
================================================== */

@media(max-width:520px){

    .le-elx-showcase{
        padding:48px 0 60px;
    }

    .le-elx-showcase .le-container{
        width:calc(100% - 20px);
    }

    .le-elx-showcase-box{
        padding:20px;

        border-radius:19px;
    }

    .le-elx-showcase-box::after{
        border-radius:18px;
    }

    .le-elx-showcase-content h2{
        font-size:31px;
    }

    .le-elx-showcase-intro{
        font-size:14.5px;
    }

    .le-elx-showcase-logos{
        gap:12px;
        min-height:60px;
        margin-bottom:24px;
    }

    .le-elx-showcase-logo img{
        height:42px;
    }

    .le-elx-showcase-logo-electrolux img{
        height:50px;
    }

    .le-elx-showcase-cross{
        font-size:25px;
    }

    .le-elx-showcase-highlight{
        grid-template-columns:42px minmax(0,1fr);

        padding:13px 14px;
    }

    .le-elx-showcase-highlight-icon{
        width:42px;
        height:42px;
    }

    .le-elx-showcase-visual{
        min-height:340px;
    }

    .le-elx-showcase-image{
        border-radius:17px;
    }

@media(max-width:520px){

    .le-elx-showcase-floating-rotator{
        right:12px;
        bottom:12px;
        left:12px;

        width:auto;
        min-height:68px;
    }

    .le-elx-showcase-floating-card{
        min-height:68px;
        padding:11px 13px;

        grid-template-columns:40px minmax(0,1fr);
        gap:11px;
    }

    .le-elx-showcase-floating-icon{
        width:40px;
        height:40px;
    }

    .le-elx-showcase-floating-icon svg{
        width:21px !important;
        height:21px !important;
        min-width:21px;
        min-height:21px;
    }

    .le-elx-showcase-floating-card strong{
        font-size:12px;
    }

}


    .le-elx-showcase-feature{
        padding:20px 17px;

        border-radius:16px;
    }

}

/* ==================================================
   TRÈS PETITS ÉCRANS
================================================== */

@media(max-width:380px){

    .le-elx-showcase-content h2{
        font-size:28px;
    }

    .le-elx-showcase-logos{
        gap:9px;
    }

    .le-elx-showcase-logo img{
        height:36px;
    }

    .le-elx-showcase-logo-electrolux img{
        height:45px;
    }

    .le-elx-showcase-btn{
        min-height:54px;
        padding:0 16px;

        font-size:12.5px;
    }

}

/* ==================================================
   ÉCRANS TACTILES
================================================== */

@media(hover:none){

    .le-elx-showcase-box:hover
    .le-elx-showcase-image img{
        transform:scale(1.03);
        filter:none;
    }

    .le-elx-showcase-feature:hover{
        transform:none;

        border-color:rgba(255,255,255,.085);

        background:
            radial-gradient(
                circle at 100% 0,
                rgba(37,99,235,.10),
                transparent 38%
            ),
            rgba(255,255,255,.045);

        box-shadow:none;
    }

    .le-elx-showcase-btn:hover{
        transform:none;
    }

}

/* ==================================================
   ACCESSIBILITÉ
================================================== */

@media(prefers-reduced-motion:reduce){

    .le-elx-showcase-image img,
    .le-elx-showcase-floating-card,
    .le-elx-showcase-feature,
    .le-elx-showcase-btn,
    .le-elx-showcase-btn svg{
        transition:none;
    }

}

.le-elx-showcase-feature-icon-image{
    display:block;

    width:34px;
    height:34px;

    object-fit:contain;

    flex-shrink:0;

    filter:brightness(0) invert(1);
}