/* ==================================================
   ACCOMPAGNEMENT — OUVRIR UNE LAVERIE
================================================== */

.ol-accompagnement-new{
    position:relative;
    overflow:hidden;
    padding:0 0 100px;
    background:#ffffff;
}

.ol-accompagnement-new .le-container{
    width:min(1760px,94%);
    margin:0 auto;
}

.ol-accompagnement-new-box{
    position:relative;
    overflow:hidden;

    min-height:470px;
    padding:54px 58px;

    border:1px solid rgba(37,99,235,.08);
    border-radius:30px;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(37,99,235,.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(37,99,235,.045),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8faff 0%,
            #ffffff 54%,
            #f3f7ff 100%
        );

    display:grid;
    grid-template-columns:32% minmax(0,1fr);
    gap:65px;
    align-items:center;

    box-shadow:
        0 24px 70px rgba(0,13,32,.055),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ol-accompagnement-new-box::before{
    content:"";

    position:absolute;
    top:-150px;
    right:-120px;

    width:400px;
    height:400px;

    border:1px solid rgba(37,99,235,.06);
    border-radius:50%;

    box-shadow:
        0 0 0 45px rgba(37,99,235,.015),
        0 0 0 90px rgba(37,99,235,.01);

    pointer-events:none;
}


/* ==================================================
   INTRO
================================================== */

.ol-accompagnement-new-intro{
    position:relative;
    z-index:3;
}

.ol-accompagnement-new-index{
    display:flex;
    align-items:center;
    gap:13px;

    margin-bottom:22px;
}

.ol-accompagnement-new-index span{
    color:#2563eb;

    font-size:13px;
    font-weight:950;
    letter-spacing:.8px;
}

.ol-accompagnement-new-index i{
    width:34px;
    height:2px;

    border-radius:999px;
    background:#2563eb;

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

.ol-accompagnement-new-intro h2{
    margin:0 0 23px;

    color:#000d20;

    font-size:46px;
    font-weight:950;
    line-height:1.1;
    letter-spacing:-1.2px;
}

.ol-accompagnement-new-intro h2 span{
    color:#2563eb;
}

.ol-accompagnement-new-intro > p{
    max-width:520px;

    margin:0 0 32px;

    color:#55657d;

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


/* BOUTON */

.ol-accompagnement-new-btn{
    position:relative;
    overflow:hidden;

    min-height:58px;
    width:max-content;

    padding:0 27px;

    border-radius:13px;

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

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

    text-decoration:none;

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

    box-shadow:
        0 18px 38px rgba(37,99,235,.24),
        inset 0 1px 0 rgba(255,255,255,.18);

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

.ol-accompagnement-new-btn::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform:translateX(-110%);
    transition:transform .5s ease;
}

.ol-accompagnement-new-btn:hover::before{
    transform:translateX(110%);
}

.ol-accompagnement-new-btn:hover{
    color:#ffffff;

    transform:translateY(-4px);

    box-shadow:
        0 24px 50px rgba(37,99,235,.32);
}

.ol-accompagnement-new-btn svg{
    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:transform .3s ease;
}

.ol-accompagnement-new-btn:hover svg{
    transform:translateX(5px);
}


/* ==================================================
   ÉTAPES
================================================== */

.ol-accompagnement-new-steps{
    position:relative;
    z-index:3;

    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:24px;
    align-items:start;
}

.ol-accompagnement-new-line{
    position:absolute;
    top:70px;
    left:8%;
    right:8%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,.18) 8%,
            rgba(37,99,235,.42) 50%,
            rgba(37,99,235,.18) 92%,
            transparent
        );

    z-index:0;
}

.ol-accompagnement-new-line::after{
    content:"";

    position:absolute;
    top:50%;
    left:0;

    width:70px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2563eb,
            transparent
        );

    transform:translateY(-50%);

    animation:olAccompagnementFlow 5s linear infinite;
}

@keyframes olAccompagnementFlow{
    from{
        left:0;
    }

    to{
        left:calc(100% - 70px);
    }
}


/* ÉTAPE */

.ol-accompagnement-new-step{
    position:relative;
    z-index:2;

    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

/*.ol-accompagnement-new-step{
    position:relative;
    z-index:2;

    min-width:0;

    display:grid;
    grid-template-rows:32px 140px 94px;
    justify-items:center;
    align-items:start;

    text-align:center;

    opacity:0;
    transform:translateY(28px);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,.61,.36,1);
} */

.ol-accompagnement-new.is-visible .ol-accompagnement-new-step{
    opacity:1;
    transform:translateY(0);
}

.ol-accompagnement-new.is-visible .ol-accompagnement-new-step:nth-child(2){
    transition-delay:.08s;
}

.ol-accompagnement-new.is-visible .ol-accompagnement-new-step:nth-child(3){
    transition-delay:.18s;
}

.ol-accompagnement-new.is-visible .ol-accompagnement-new-step:nth-child(4){
    transition-delay:.28s;
}

.ol-accompagnement-new.is-visible .ol-accompagnement-new-step:nth-child(5){
    transition-delay:.38s;
}

.ol-accompagnement-new.is-visible .ol-accompagnement-new-step:nth-child(6){
    transition-delay:.48s;
}


/* NUMÉRO */

.ol-accompagnement-new-number{
    color:rgba(37,99,235,.42);

    font-size:11px;
    font-weight:950;
    letter-spacing:.6px;

    opacity:0;

    transition:opacity .3s ease;
}

.ol-accompagnement-new-step:hover .ol-accompagnement-new-number{
    opacity:1;
}

.ol-accompagnement-new-icon{
    flex-shrink:0;
}

.ol-accompagnement-new-step h3{
    flex-shrink:0;
}

/* ICÔNE */

.ol-accompagnement-new-icon{
    position:relative;

    width:128px;
    height:128px;

    border:1px solid rgba(37,99,235,.08);
    border-radius:50%;

    background:
        radial-gradient(
            circle at 30% 20%,
            #ffffff,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #eef4ff
        );

    color:#2563eb;

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

    box-shadow:
        0 18px 42px rgba(0,13,32,.07),
        0 28px 65px rgba(37,99,235,.07),
        inset 0 0 0 1px rgba(255,255,255,.85);

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

.ol-accompagnement-new-icon::before{
    content:"";

    position:absolute;
    inset:-7px;

    border:1px solid rgba(37,99,235,.10);
    border-radius:50%;

    border-top-color:#2563eb;

    transform:rotate(-28deg);

    opacity:.75;

    transition:
        transform .6s ease,
        border-color .35s ease;
}

.ol-accompagnement-new-step:hover .ol-accompagnement-new-icon{
    transform:translateY(-7px) scale(1.035);

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

    color:#ffffff;

    box-shadow:
        0 23px 52px rgba(37,99,235,.22),
        0 0 0 12px rgba(37,99,235,.045);
}

.ol-accompagnement-new-step:hover .ol-accompagnement-new-icon::before{
    transform:rotate(140deg);
    border-color:rgba(37,99,235,.20);
    border-top-color:#75a7ff;
}

.ol-accompagnement-new-icon svg{
    width:54px;
    height:54px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ol-accompagnement-new-icon-mask{

    width:54px;
    height:54px;

    display:block;
    flex:0 0 54px;

    background:currentColor;

    -webkit-mask:var(--acc-icon) center / contain no-repeat;
    mask:var(--acc-icon) center / contain no-repeat;

}


/* TITRES PARFAITEMENT ALIGNÉS */

.ol-accompagnement-new-step h3{
    width:100%;

    height:92px;          /* hauteur identique pour toutes les cartes */

    margin:22px 0 0;
    padding:0 10px;

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

    color:#000d20;

    font-size:16px;
    font-weight:900;
    line-height:1.45;
    letter-spacing:-.2px;

    text-align:center;
}

/*.ol-accompagnement-new-step h3{
    width:100%;
    min-height:94px;

    margin:0;
    padding:17px 8px 0;

    color:#000d20;

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

    font-size:16px;
    font-weight:900;
    line-height:1.5;
    letter-spacing:-.15px;

    text-align:center;
} */

/* ==================================================
   RESPONSIVE — DESIGN CONSERVÉ
================================================== */

@media(max-width:1350px){
    .ol-accompagnement-new-box{
        grid-template-columns:minmax(250px,30%) minmax(0,1fr);
        gap:40px;
        padding:48px 40px;
    }
    .ol-accompagnement-new-intro h2{font-size:40px;}
    .ol-accompagnement-new-steps{gap:15px;}
    .ol-accompagnement-new-icon{width:110px;height:110px;flex:0 0 110px;}
    .ol-accompagnement-new-icon svg{width:46px;height:46px;}
    .ol-accompagnement-new-step{
        display:grid;
        grid-template-rows:28px 122px minmax(96px,auto);
        justify-items:center;
        align-items:start;
    }
    .ol-accompagnement-new-step h3{
        height:auto;
        min-height:96px;
        margin-top:18px;
        padding:0 6px;
        font-size:14.5px;
    }
    .ol-accompagnement-new-line{top:61px;}
}

@media(max-width:1050px){
    .ol-accompagnement-new{padding-bottom:80px;}
    .ol-accompagnement-new .le-container{width:min(94%,980px);}
    .ol-accompagnement-new-box{
        grid-template-columns:1fr;
        gap:48px;
        padding:44px 36px;
    }
    .ol-accompagnement-new-intro{
        max-width:760px;
        margin:0 auto;
        text-align:center;
    }
    .ol-accompagnement-new-index{justify-content:center;}
    .ol-accompagnement-new-intro h2,
    .ol-accompagnement-new-intro > p{
        margin-left:auto;
        margin-right:auto;
    }
    .ol-accompagnement-new-btn{
        margin-left:auto;
        margin-right:auto;
    }
    .ol-accompagnement-new-steps{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:28px 22px;
    }
    .ol-accompagnement-new-line{display:none;}
    .ol-accompagnement-new-step{
        min-width:0;
        grid-template-rows:24px 110px minmax(82px,auto);
        padding:22px 16px;
        border:1px solid rgba(37,99,235,.08);
        border-radius:18px;
        background:rgba(255,255,255,.70);
        box-shadow:0 14px 34px rgba(0,13,32,.045);
    }
    .ol-accompagnement-new-icon{width:96px;height:96px;flex-basis:96px;}
    .ol-accompagnement-new-icon svg{width:40px;height:40px;}
    .ol-accompagnement-new-step h3{
        min-height:82px;
        margin-top:14px;
        padding:0 4px;
        font-size:14px;
    }
}

@media(max-width:700px){
    .ol-accompagnement-new{padding-bottom:65px;}
    .ol-accompagnement-new .le-container{width:calc(100% - 28px);}
    .ol-accompagnement-new-box{
        padding:34px 22px;
        gap:36px;
        border-radius:23px;
    }
    .ol-accompagnement-new-intro h2{font-size:34px;}
    .ol-accompagnement-new-intro > p{font-size:15px;line-height:1.65;}
    .ol-accompagnement-new-btn{
        width:100%;
        min-height:56px;
        padding:0 18px;
        text-align:center;
    }
    .ol-accompagnement-new-steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }
    .ol-accompagnement-new-step{
        grid-template-rows:22px 94px minmax(74px,auto);
        padding:18px 12px;
    }
    .ol-accompagnement-new-icon{width:82px;height:82px;flex-basis:82px;}
    .ol-accompagnement-new-icon svg{width:34px;height:34px;}
    .ol-accompagnement-new-step h3{
        min-height:74px;
        margin-top:12px;
        padding:0 2px;
        font-size:13px;
        line-height:1.4;
    }
}

@media(max-width:460px){
    .ol-accompagnement-new .le-container{width:calc(100% - 20px);}
    .ol-accompagnement-new-box{
        padding:28px 17px;
        gap:30px;
        border-radius:18px;
    }
    .ol-accompagnement-new-intro h2{font-size:30px;}
    .ol-accompagnement-new-intro > p{font-size:13.5px;}
    .ol-accompagnement-new-btn{
        min-height:54px;
        padding:0 14px;
        font-size:13px;
    }
    .ol-accompagnement-new-steps{
        grid-template-columns:1fr;
        gap:13px;
    }
    .ol-accompagnement-new-step{
        min-height:0;
        display:grid;
        grid-template-columns:62px minmax(0,1fr);
        grid-template-rows:auto;
        align-items:center;
        justify-items:start;
        column-gap:14px;
        padding:16px;
        text-align:left;
    }
    .ol-accompagnement-new-number{
        position:absolute;
        top:10px;
        left:10px;
        margin:0;
        opacity:1;
        font-size:9px;
    }
    .ol-accompagnement-new-icon{
        width:58px;
        height:58px;
        flex-basis:58px;
        margin:0;
    }
    .ol-accompagnement-new-icon svg{width:26px;height:26px;}
    .ol-accompagnement-new-step h3{
        width:100%;
        min-height:0;
        height:auto;
        margin:0;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        font-size:13px;
        line-height:1.4;
        text-align:left;
    }
}

@media(max-width:340px){
    .ol-accompagnement-new .le-container{width:calc(100% - 14px);}
    .ol-accompagnement-new-box{padding:24px 13px;}
    .ol-accompagnement-new-intro h2{font-size:28px;}
    .ol-accompagnement-new-btn{font-size:12px;}
    .ol-accompagnement-new-step{
        grid-template-columns:54px minmax(0,1fr);
        column-gap:11px;
        padding:14px 12px;
    }
    .ol-accompagnement-new-icon{width:52px;height:52px;flex-basis:52px;}
    .ol-accompagnement-new-icon svg{width:23px;height:23px;}
    .ol-accompagnement-new-step h3{font-size:12px;}
}

@media(hover:none){
    .ol-accompagnement-new-btn:hover{transform:none;}
    .ol-accompagnement-new-btn:hover::before{transform:translateX(-110%);}
    .ol-accompagnement-new-step:hover .ol-accompagnement-new-icon{
        transform:none;
        background:
            radial-gradient(circle at 30% 20%,#ffffff,transparent 38%),
            linear-gradient(145deg,#ffffff,#eef4ff);
        color:#2563eb;
        box-shadow:
            0 18px 42px rgba(0,13,32,.07),
            0 28px 65px rgba(37,99,235,.07),
            inset 0 0 0 1px rgba(255,255,255,.85);
    }
    .ol-accompagnement-new-step:hover .ol-accompagnement-new-icon::before{
        transform:rotate(-28deg);
        border-color:rgba(37,99,235,.10);
        border-top-color:#2563eb;
    }
}

@media(prefers-reduced-motion:reduce){
    .ol-accompagnement-new-step,
    .ol-accompagnement-new-icon,
    .ol-accompagnement-new-icon::before,
    .ol-accompagnement-new-btn,
    .ol-accompagnement-new-btn::before,
    .ol-accompagnement-new-btn svg,
    .ol-accompagnement-new-line::after{
        animation:none !important;
        transition:none !important;
    }
}


.ol-accompagnement-new-icon-compare{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.ol-accompagnement-new-icon-compare .ol-accompagnement-new-icon-mask{
    flex:0 0 auto;
}