/* ==================================================
   ACCUEIL — MÉTHODE NEW N
   Version définitive premium
================================================== */

.home-method-new-n,
.home-method-new-n *,
.home-method-new-n *::before,
.home-method-new-n *::after{
    box-sizing:border-box;
}

.home-method-new-n{
    position:relative;
    overflow:hidden;

    padding:96px 0 104px;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(37,99,235,.05),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(37,99,235,.035),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}

.home-method-new-n::before{
    content:"";

    position:absolute;
    top:-210px;
    left:50%;

    width:560px;
    height:560px;

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

    transform:translateX(-50%);

    box-shadow:
        0 0 0 56px rgba(37,99,235,.012),
        0 0 0 112px rgba(37,99,235,.008);

    pointer-events:none;
}

.home-method-new-n .le-container_new{
    position:relative;
    z-index:2;

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


/* ==================================================
   EN-TÊTE
================================================== */

.home-method-heading-new-n{
    max-width:900px;
    margin:0 auto 72px;

    text-align:center;
}

.home-method-label-new-n{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:31px;
    padding:0 14px;
    margin:0 0 18px;

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

    background:#edf4ff;
    color:#2563eb;

    font-size:11px;
    font-weight:900;
    line-height:1;
    letter-spacing:.9px;
    text-transform:uppercase;

    box-shadow:
        0 8px 22px rgba(37,99,235,.06),
        inset 0 1px 0 rgba(255,255,255,.90);
}

.home-method-heading-new-n h2{
    margin:0 0 20px;

    color:#000d20;

    font-size:clamp(40px,3.2vw,50px);
    font-weight:950;
    line-height:1.07;
    letter-spacing:-1.35px;
}

.home-method-heading-new-n h2 span{
    display:inline;
    width:auto;
    height:auto;

    color:#2563eb;
    background:none;
}

.home-method-heading-new-n p{
    max-width:750px;
    margin:0 auto;
    padding:0 !important;

    color:#64748b;

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


/* ==================================================
   TIMELINE
================================================== */

.home-method-timeline-new-n{
    position:relative;

    max-width:1560px;
    margin:0 auto;
    padding:0 20px;
}

.home-method-line-new-n{
    position:absolute;
    top:115px;
    left:10%;
    right:10%;

    height:2px;

    overflow:hidden;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(37,99,235,.18) 0 8px,
            transparent 8px 16px
        );

    pointer-events:none;
}

.home-method-line-progress-new-n{
    display:block;

    width:0;
    height:100%;

    background:
        linear-gradient(
            90deg,
            #0757f9,
            #6aa2ff
        );

    box-shadow:
        0 0 20px rgba(37,99,235,.34);

    transition:
        width 1.55s cubic-bezier(.22,.61,.36,1);
}

.home-method-timeline-new-n.is-visible
.home-method-line-progress-new-n{
    width:100%;
}

.home-method-steps-new-n{
    position:relative;
    z-index:2;

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


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

.home-method-step-new-n{
    position:relative;

    min-width:0;
    height:100%;

    display:grid;
    grid-template-rows:230px 1fr;
}

.home-method-visual-new-n{
    position:relative;

    min-height:230px;

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

.home-method-icon-shell-new-n{
    position:relative;

    width:132px;
    height:132px;
    margin-top:34px;

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

.home-method-icon-glow-new-n{
    position:absolute;
    inset:14px;

    border-radius:50%;

    background:rgba(37,99,235,.10);

    filter:blur(20px);

    opacity:.55;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.home-method-icon-new-n{
    position:relative;
    z-index:3;

    width:118px;
    height:118px;

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

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

    color:#000d20;

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

    box-shadow:
        0 18px 46px rgba(0,13,32,.075),
        0 34px 70px rgba(37,99,235,.06),
        inset 0 1px 0 rgba(255,255,255,.96);

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.home-method-step-new-n:hover
.home-method-icon-new-n{
    color:#ffffff;

    background:
        linear-gradient(
            145deg,
            #2879ff,
            #0757f9
        );

    transform:translateY(-8px) scale(1.045);

    box-shadow:
        0 26px 54px rgba(37,99,235,.25),
        0 0 0 11px rgba(37,99,235,.045);
}

.home-method-step-new-n:hover
.home-method-icon-glow-new-n{
    opacity:1;
    transform:scale(1.16);
}

.home-method-icon-new-n svg{
    width:52px;
    height:52px;

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

.home-method-icon-mask-new-n{

    width:52px;
    height:52px;

    display:block;
    flex:0 0 52px;

    background:currentColor;

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

    pointer-events:none;

}

.home-method-number-new-n{
    position:absolute;
    top:20px;
    left:calc(50% - 70px);
    z-index:5;

    min-width:36px;
    height:36px;
    padding:0 7px;

    border:3px solid #ffffff;
    border-radius:999px;

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

    color:#ffffff;
    background:#0757f9;

    font-size:11px;
    font-weight:950;
    line-height:1;

    box-shadow:
        0 11px 24px rgba(7,87,249,.27),
        0 0 0 1px rgba(7,87,249,.08);
}

.home-method-node-new-n{
    position:absolute;
    top:108px;
    left:50%;
    z-index:5;

    width:15px;
    height:15px;

    border:4px solid #ffffff;
    border-radius:50%;

    background:#2563eb;

    transform:translateX(-50%);

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


/* ==================================================
   TEXTES ALIGNÉS
================================================== */

.home-method-copy-new-n{
    min-width:0;
    height:100%;

    padding:0 11px;

    display:grid;
    grid-template-rows:minmax(62px,auto) 1fr;

    text-align:center;
}

.home-method-copy-new-n h3{
    min-height:62px;

    margin:0;
    padding:0 4px 13px;

    color:#000d20;

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

    font-size:18px;
    font-weight:950;
    line-height:1.35;
    letter-spacing:-.2px;

    text-align:center;
}

.home-method-copy-new-n p{
    min-height:112px;

    margin:0;
    padding:0 5px !important;

    color:#64748b;

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

    font-size:14px;
    font-weight:500;
    line-height:1.65;

    text-align:center;
}


/* ==================================================
   CTA
================================================== */

.home-method-action-new-n{
    margin-top:58px;

    display:flex;
    justify-content:center;
}

.home-method-btn-new-n{
    min-height:60px;
    padding:0 28px;

    border:1.5px solid rgba(37,99,235,.90);
    border-radius:12px;

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

    color:#2563eb;
    background:#ffffff;

    text-decoration:none;

    font-size:15px;
    font-weight:900;
    line-height:1.3;

    box-shadow:
        0 15px 36px rgba(0,13,32,.06),
        inset 0 1px 0 rgba(255,255,255,.95);

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

.home-method-btn-new-n:hover{
    color:#ffffff;
    background:#2563eb;

    transform:translateY(-4px);

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

.home-method-btn-new-n svg{
    width:21px;
    height:21px;

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

    transition:transform .3s ease;
}

.home-method-btn-new-n:hover svg{
    transform:translateX(4px);
}


/* ==================================================
   ANIMATION
================================================== */

.home-method-timeline-new-n.has-home-method-animation
.home-method-step-new-n{
    opacity:0;

    transform:translateY(24px);

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

.home-method-timeline-new-n.has-home-method-animation.is-visible
.home-method-step-new-n{
    opacity:1;

    transform:translateY(0);
}

.home-method-timeline-new-n.has-home-method-animation
.home-method-step-new-n{
    transition-delay:calc(var(--step-index) * 110ms);
}


/* ==================================================
   DESKTOP MOYEN
================================================== */

@media(max-width:1450px){

    .home-method-new-n{
        padding:84px 0 92px;
    }

    .home-method-heading-new-n{
        margin-bottom:60px;
    }

    .home-method-timeline-new-n{
        padding:0 10px;
    }

    .home-method-steps-new-n{
        gap:10px;
    }

    .home-method-step-new-n{
        grid-template-rows:212px 1fr;
    }

    .home-method-visual-new-n{
        min-height:212px;
    }

    .home-method-icon-shell-new-n{
        width:118px;
        height:118px;
    }

    .home-method-icon-new-n{
        width:106px;
        height:106px;
    }

    .home-method-icon-new-n svg{
        width:46px;
        height:46px;
    }

.home-method-icon-mask-new-n{
    width:46px;
    height:46px;
    flex-basis:46px;
}

    .home-method-number-new-n{
        left:calc(50% - 63px);
    }

    .home-method-node-new-n{
        top:99px;
    }

    .home-method-line-new-n{
        top:106px;
    }

    .home-method-copy-new-n{
        padding:0 6px;
    }

    .home-method-copy-new-n h3{
        font-size:16.5px;
    }

    .home-method-copy-new-n p{
        font-size:13px;
    }
}


/* ==================================================
   TABLETTE
================================================== */

@media(max-width:1100px){

    .home-method-new-n{
        padding:74px 0 82px;
    }

    .home-method-new-n .le-container_new{
        width:min(94%,980px);
    }

    .home-method-heading-new-n{
        margin-bottom:50px;
    }

    .home-method-line-new-n{
        display:none;
    }

    .home-method-steps-new-n{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .home-method-step-new-n{
        min-height:344px;

        padding:25px 22px;

        grid-template-rows:154px 1fr;

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

        background:#ffffff;

        box-shadow:
            0 17px 40px rgba(0,13,32,.048),
            inset 0 1px 0 rgba(255,255,255,.96);
    }

    .home-method-step-new-n:last-child{
        grid-column:1 / -1;

        width:min(50%,470px);
        justify-self:center;
    }

    .home-method-visual-new-n{
        min-height:154px;
    }

    .home-method-icon-shell-new-n{
        width:104px;
        height:104px;
        margin-top:16px;
    }

    .home-method-icon-new-n{
        width:94px;
        height:94px;
    }

    .home-method-icon-new-n svg{
        width:41px;
        height:41px;
    }

.home-method-icon-mask-new-n{
    width:41px;
    height:41px;
    flex-basis:41px;
}

    .home-method-number-new-n{
        top:5px;
        left:calc(50% - 56px);
    }

    .home-method-node-new-n{
        display:none;
    }

    .home-method-copy-new-n{
        grid-template-rows:minmax(50px,auto) 1fr;
    }

    .home-method-copy-new-n h3{
        min-height:50px;

        font-size:17px;
    }

    .home-method-copy-new-n p{
        min-height:82px;

        font-size:13.5px;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:700px){

    .home-method-new-n{
        padding:60px 0 68px;
    }

    .home-method-new-n .le-container_new{
        width:calc(100% - 28px);
    }

    .home-method-heading-new-n{
        margin-bottom:38px;
    }

    .home-method-label-new-n{
        min-height:28px;

        margin-bottom:15px;
        padding:0 11px;

        font-size:9.5px;
    }

    .home-method-heading-new-n h2{
        margin-bottom:15px;

        font-size:clamp(31px,8.5vw,37px);
    }

    .home-method-heading-new-n p{
        font-size:14.5px;
        line-height:1.62;
    }

    .home-method-timeline-new-n{
        padding:0;
    }

    .home-method-steps-new-n{
        grid-template-columns:1fr;
        gap:14px;
    }

    .home-method-step-new-n,
    .home-method-step-new-n:last-child{
        width:100%;
        min-height:0;

        padding:18px;

        grid-column:auto;
        grid-template-columns:78px minmax(0,1fr);
        grid-template-rows:auto;
        align-items:center;

        border-radius:18px;
    }

    .home-method-visual-new-n{
        min-height:78px;

        align-items:center;
    }

    .home-method-icon-shell-new-n{
        width:72px;
        height:72px;
        margin:0;
    }

    .home-method-icon-new-n{
        width:68px;
        height:68px;
    }

    .home-method-icon-new-n svg{
        width:31px;
        height:31px;
    }

.home-method-icon-mask-new-n{
    width:31px;
    height:31px;
    flex-basis:31px;
}


    .home-method-number-new-n{
        top:-7px;
        left:-5px;

        min-width:28px;
        height:28px;

        border-width:2px;

        font-size:9px;
    }

    .home-method-copy-new-n{
        padding:0 0 0 14px;

        grid-template-rows:auto auto;

        text-align:left;
    }

    .home-method-copy-new-n h3{
        min-height:0;

        padding:0 0 6px;

        justify-content:flex-start;

        font-size:15.5px;
        text-align:left;
    }

    .home-method-copy-new-n p{
        min-height:0;

        padding:0 !important;

        justify-content:flex-start;

        font-size:12.5px;
        line-height:1.55;
        text-align:left;
    }

    .home-method-action-new-n{
        margin-top:32px;
    }

    .home-method-btn-new-n{
        width:min(100%,470px);
        min-height:56px;

        padding:0 18px;

        font-size:14px;
    }
}


/* ==================================================
   PETITS MOBILES
================================================== */

@media(max-width:420px){

    .home-method-new-n .le-container_new{
        width:calc(100% - 20px);
    }

    .home-method-step-new-n,
    .home-method-step-new-n:last-child{
        grid-template-columns:66px minmax(0,1fr);

        padding:15px;
    }

    .home-method-visual-new-n{
        min-height:66px;
    }

    .home-method-icon-shell-new-n{
        width:62px;
        height:62px;
    }

    .home-method-icon-new-n{
        width:60px;
        height:60px;
    }

    .home-method-icon-new-n svg{
        width:28px;
        height:28px;
    }

.home-method-icon-mask-new-n{
    width:28px;
    height:28px;
    flex-basis:28px;
}
    .home-method-number-new-n{
        top:-6px;
        left:-4px;

        min-width:26px;
        height:26px;
    }

    .home-method-copy-new-n{
        padding-left:11px;
    }

    .home-method-copy-new-n h3{
        font-size:14.5px;
    }

    .home-method-copy-new-n p{
        font-size:12px;
    }

    .home-method-btn-new-n{
        min-height:54px;

        font-size:13px;
    }
}


/* ==================================================
   TACTILE ET ACCESSIBILITÉ
================================================== */

@media(hover:none){

    .home-method-step-new-n:hover
    .home-method-icon-new-n{
        color:#000d20;

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

        transform:none;

        box-shadow:
            0 18px 46px rgba(0,13,32,.075),
            0 34px 70px rgba(37,99,235,.06),
            inset 0 1px 0 rgba(255,255,255,.96);
    }

    .home-method-step-new-n:hover
    .home-method-icon-glow-new-n{
        opacity:.55;
        transform:none;
    }

    .home-method-btn-new-n:hover{
        transform:none;
    }
}

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

    .home-method-timeline-new-n
    .home-method-step-new-n,
    .home-method-line-progress-new-n,
    .home-method-icon-new-n,
    .home-method-icon-glow-new-n,
    .home-method-btn-new-n,
    .home-method-btn-new-n svg{
        opacity:1;
        transform:none;

        animation:none !important;
        transition:none !important;
    }

    .home-method-line-progress-new-n{
        width:100%;
    }
}