/* ==================================================
   ACCOMPAGNEMENT — PRESTATIONS NEW
   Version premium, responsive et alignée
================================================== */

.prestations,
.prestations *,
.prestations *::before,
.prestations *::after{
    box-sizing:border-box;
}

.prestations{
    position:relative;
    overflow:hidden;

    padding:92px 0 104px;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(37,99,235,.055),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 94%,
            rgba(37,99,235,.035),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}

.prestations::before{
    content:"";

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

    width:620px;
    height:620px;

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

    transform:translateX(-50%);

    box-shadow:
        0 0 0 60px rgba(37,99,235,.011),
        0 0 0 120px rgba(37,99,235,.007);

    pointer-events:none;
}

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

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


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

.prestations-heading{
    width:100%;
    max-width:980px;

    margin:0 auto 62px;
    padding:0 24px;

    text-align:center;
}

.prestations-heading .prestations-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    width:max-content;
    max-width:100%;
    min-height:31px;

    margin:0 0 19px;
    padding:0 14px;

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

    color:#0757f9;
    background:#edf4ff;

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

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

.prestations-heading .prestations-label::before,
.prestations-heading .prestations-label::after{
    content:"";

    display:block;

    width:20px;
    height:1.5px;
    flex:0 0 20px;

    border-radius:999px;

    background:#0757f9;

    box-shadow:0 0 12px rgba(7,87,249,.25);
}

.prestations-heading h2{
    width:100%;
    max-width:920px;

    margin:0 auto 20px;

    color:#000d20;

    font-size:clamp(40px,3vw,48px);
    font-weight:950;
    line-height:1.08;
    letter-spacing:-1.25px;
    text-align:center;
}

.prestations-heading h2 span{
    display:inline;

    width:auto;
    height:auto;

    color:#0757f9;
    background:none;

    font:inherit;
    line-height:inherit;
}

.prestations-heading p{
    max-width:760px;
    margin:0 auto;

    color:#5c6c84;

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


/* ==================================================
   GRILLE
================================================== */

.prestations-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;

    gap:24px;
}


/* ==================================================
   CARTES
================================================== */

.prestation-card{
    --card-bg:#eef5ff;
    --card-accent:#78a3f4;
    --card-title:#000d20;
    --card-text:#435571;
    --card-border:rgba(7,87,249,.08);

    position:relative;

    min-width:0;
    min-height:332px;

    padding:34px 27px 30px;

    overflow:hidden;

    border:1px solid var(--card-border);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(255,255,255,.52),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            transparent 42%
        ),
        var(--card-bg);

    box-shadow:
        0 16px 38px rgba(0,13,32,.062),
        inset 0 1px 0 rgba(255,255,255,.82);

    display:grid;
    grid-template-rows:34px 104px minmax(62px,auto) 1fr;
    align-items:start;

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

.prestation-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.28),
            transparent 42%
        );

    pointer-events:none;
}

.prestation-card::after{
    content:"";

    position:absolute;
    top:-70px;
    right:-70px;

    width:170px;
    height:170px;

    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;

    box-shadow:
        0 0 0 24px rgba(255,255,255,.045);

    pointer-events:none;
}

.prestation-card:hover{
    transform:translateY(-9px);

    border-color:rgba(7,87,249,.22);

    box-shadow:
        0 24px 50px rgba(0,13,32,.11),
        0 38px 82px rgba(7,87,249,.08),
        inset 0 1px 0 rgba(255,255,255,.88);
}


/* ==================================================
   COULEURS PROGRESSIVES
================================================== */

.prestation-card-1{
    --card-bg:#eef5ff;
    --card-accent:#78a3f4;
    --card-border:rgba(7,87,249,.08);
}

.prestation-card-2{
    --card-bg:#ebf3ff;
    --card-accent:#709bf1;
    --card-border:rgba(7,87,249,.085);
}

.prestation-card-3{
    --card-bg:#e8f1ff;
    --card-accent:#6893ee;
    --card-border:rgba(7,87,249,.09);
}

.prestation-card-4{
    --card-bg:#e4eeff;
    --card-accent:#608bea;
    --card-border:rgba(7,87,249,.095);
}

.prestation-card-5{
    --card-bg:#e0ebff;
    --card-accent:#5883e6;
    --card-border:rgba(7,87,249,.10);
}

.prestation-card-6{
    --card-bg:#dce8ff;
    --card-accent:#507be2;
    --card-border:rgba(7,87,249,.11);
}

.prestation-card-7{
    --card-bg:#d7e4ff;
    --card-accent:#4873dd;
    --card-border:rgba(7,87,249,.12);
}

.prestation-card-8{
    --card-bg:#d2e0ff;
    --card-accent:#406bd8;
    --card-border:rgba(7,87,249,.13);
}


/* ==================================================
   NUMÉRO
================================================== */

.prestation-number{
    position:relative;
    z-index:2;

    align-self:start;

    color:var(--card-accent);

    font-size:20px;
    font-weight:950;
    line-height:1;
    letter-spacing:-.35px;

    opacity:.92;
}


/* ==================================================
   ICÔNE
================================================== */

.prestation-icon{
    position:relative;
    z-index:2;

    width:84px;
    height:84px;
    flex:0 0 84px;

    margin:2px auto 0;

    border-radius:50%;

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

    color:#ffffff;

    background:
        radial-gradient(
            circle at 30% 22%,
            rgba(255,255,255,.27),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0b63ff 0%,
            var(--card-accent) 54%,
            #001f63 100%
        );

    box-shadow:
        0 17px 34px rgba(7,87,249,.24),
        0 0 0 7px rgba(255,255,255,.23),
        inset 0 1px 0 rgba(255,255,255,.19);

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

.prestation-card:hover .prestation-icon{
    transform:
        translateY(-5px)
        rotate(-3deg)
        scale(1.04);

    box-shadow:
        0 23px 44px rgba(7,87,249,.31),
        0 0 0 9px rgba(255,255,255,.29),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.prestation-icon svg{
    width:42px;
    height:42px;

    display:block;

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


/* ==================================================
   TITRES ET TEXTES ALIGNÉS
================================================== */

.prestation-card h3{
    position:relative;
    z-index:2;

    width:100%;
    min-height:62px;

    margin:0;
    padding:0 3px 14px;

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

    color:var(--card-title);

    font-size:19px;
    font-weight:950;
    line-height:1.3;
    letter-spacing:-.25px;
    text-align:center;
}

.prestation-card p{
    position:relative;
    z-index:2;

    width:100%;
    min-height:96px;

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

    color:var(--card-text);

    font-size:14px;
    font-weight:550;
    line-height:1.65;
    text-align:center;
}


/* ==================================================
   LIGNE BASSE
================================================== */

.prestation-card-line{
    position:absolute;
    left:50%;
    bottom:0;
    z-index:3;

    width:0;
    height:4px;

    border-radius:999px 999px 0 0;

    background:
        linear-gradient(
            90deg,
            var(--card-accent),
            #0757f9
        );

    transform:translateX(-50%);

    transition:width .38s ease;
}

.prestation-card:hover .prestation-card-line{
    width:56%;
}


/* ==================================================
   ANIMATION D’ARRIVÉE SÉCURISÉE
================================================== */

/*
 * Les cartes sont visibles par défaut.
 * L’animation ne s’active que si ton JS ajoute
 * .has-prestations-animation sur la grille.
 */

.prestations-grid .prestation-card{
    opacity:1;
    transform:none;
}

.prestations-grid.has-prestations-animation
.prestation-card{
    opacity:0;
    transform:translateY(30px);

    transition:
        opacity .62s ease,
        transform .62s cubic-bezier(.22,.61,.36,1),
        box-shadow .38s ease,
        border-color .38s ease;
}

.prestations-grid.has-prestations-animation.active
.prestation-card,
.prestations-grid.has-prestations-animation.is-visible
.prestation-card{
    opacity:1;
    transform:translateY(0);
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(1){
    transition-delay:.05s;
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(2){
    transition-delay:.11s;
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(3){
    transition-delay:.17s;
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(4){
    transition-delay:.23s;
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(5){
    transition-delay:.29s;
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(6){
    transition-delay:.35s;
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(7){
    transition-delay:.41s;
}

.prestations-grid.has-prestations-animation
.prestation-card:nth-child(8){
    transition-delay:.47s;
}


/* ==================================================
   GRANDS ÉCRANS
================================================== */

@media(min-width:1800px){

    .prestations{
        padding:100px 0 112px;
    }

    .prestation-card{
        min-height:344px;
        padding:37px 30px 32px;
    }

    .prestation-card h3{
        font-size:20px;
    }

    .prestation-card p{
        font-size:14.5px;
    }
}


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

@media(max-width:1450px){

    .prestations{
        padding:82px 0 94px;
    }

    .prestations-heading{
        margin-bottom:54px;
    }

    .prestations-grid{
        gap:20px;
    }

    .prestation-card{
        min-height:318px;

        padding:31px 22px 27px;

        grid-template-rows:31px 98px minmax(58px,auto) 1fr;
    }

    .prestation-number{
        font-size:18px;
    }

    .prestation-icon{
        width:78px;
        height:78px;
        flex-basis:78px;
    }

    .prestation-icon svg{
        width:39px;
        height:39px;
    }

    .prestation-card h3{
        min-height:58px;

        font-size:17px;
    }

    .prestation-card p{
        min-height:90px;

        font-size:13px;
    }
}


/* ==================================================
   TABLETTE / PETITS LAPTOPS
================================================== */

@media(max-width:1200px){

    .prestations{
        padding:76px 0 86px;
    }

    .prestations .le-container{
        width:min(94%,1040px);
    }

    .prestations-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }

    .prestation-card{
        min-height:306px;

        padding:31px 25px 28px;

        grid-template-rows:31px 98px minmax(56px,auto) 1fr;
    }

    .prestation-card h3{
        min-height:56px;

        font-size:18px;
    }

    .prestation-card p{
        min-height:82px;

        font-size:13.5px;
    }
}


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

@media(max-width:768px){

    .prestations{
        padding:64px 0 72px;
    }

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

    .prestations-heading{
        margin-bottom:40px;
        padding:0;
    }

    .prestations-heading .prestations-label{
        min-height:28px;

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

        font-size:9.5px;
        letter-spacing:.7px;
    }

    .prestations-heading .prestations-label::before,
    .prestations-heading .prestations-label::after{
        width:15px;
        flex-basis:15px;
    }

    .prestations-heading h2{
        margin-bottom:16px;

        font-size:clamp(31px,8.5vw,37px);
        letter-spacing:-.8px;
    }

    .prestations-heading p{
        max-width:570px;

        font-size:14.5px;
        line-height:1.62;
    }

    .prestations-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .prestation-card{
        min-height:0;

        padding:20px;

        grid-template-columns:68px minmax(0,1fr);
        grid-template-rows:auto auto auto;
        column-gap:16px;
        row-gap:0;

        align-items:center;

        border-radius:18px;
    }

    .prestation-number{
        position:absolute;
        top:14px;
        left:14px;

        font-size:14px;
    }

    .prestation-icon{
        grid-column:1;
        grid-row:1 / 4;

        width:64px;
        height:64px;
        flex-basis:64px;

        margin:0;
    }

    .prestation-icon svg{
        width:31px;
        height:31px;
    }

    .prestation-card h3{
        grid-column:2;
        grid-row:1;

        min-height:0;

        padding:0 0 7px;

        justify-content:flex-start;

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

    .prestation-card p{
        grid-column:2;
        grid-row:2 / 4;

        min-height:0;

        padding:0 !important;

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

    .prestation-card-line{
        height:3px;
    }
}


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

@media(max-width:430px){

    .prestations{
        padding:56px 0 64px;
    }

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

    .prestations-heading{
        margin-bottom:34px;
    }

    .prestations-heading h2{
        font-size:30px;
    }

    .prestations-heading p{
        font-size:13.5px;
    }

    .prestation-card{
        padding:17px 15px;

        grid-template-columns:58px minmax(0,1fr);
        column-gap:13px;

        border-radius:16px;
    }

    .prestation-number{
        top:11px;
        left:11px;

        font-size:12px;
    }

    .prestation-icon{
        width:56px;
        height:56px;
        flex-basis:56px;
    }

    .prestation-icon svg{
        width:27px;
        height:27px;
    }

    .prestation-card h3{
        padding-bottom:5px;

        font-size:14.5px;
    }

    .prestation-card p{
        font-size:11.8px;
    }
}


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

@media(max-width:340px){

    .prestations .le-container{
        width:calc(100% - 14px);
    }

    .prestation-card{
        padding:15px 12px;

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

    .prestation-icon{
        width:50px;
        height:50px;
        flex-basis:50px;
    }

    .prestation-icon svg{
        width:24px;
        height:24px;
    }

    .prestation-card h3{
        font-size:13.5px;
    }

    .prestation-card p{
        font-size:11px;
    }
}


/* ==================================================
   TACTILE
================================================== */

@media(hover:none){

    .prestation-card:hover{
        transform:none;

        border-color:var(--card-border);

        box-shadow:
            0 16px 38px rgba(0,13,32,.062),
            inset 0 1px 0 rgba(255,255,255,.82);
    }

    .prestation-card:hover .prestation-icon{
        transform:none;

        box-shadow:
            0 17px 34px rgba(7,87,249,.24),
            0 0 0 7px rgba(255,255,255,.23),
            inset 0 1px 0 rgba(255,255,255,.19);
    }

    .prestation-card:hover .prestation-card-line{
        width:0;
    }
}


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

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

    .prestations-grid .prestation-card,
    .prestation-icon,
    .prestation-card-line{
        opacity:1;
        transform:none;

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


.prestation-icon img,
.prestation-icon-img{
    width:42px;
    height:42px;
    display:block;
    object-fit:contain;
}

@media(max-width:1450px){

    .prestation-icon svg,
    .prestation-icon img{
        width:39px;
        height:39px;
    }

}

@media(max-width:768px){

    .prestation-icon svg,
    .prestation-icon img{
        width:31px;
        height:31px;
    }

}

@media(max-width:430px){

    .prestation-icon svg,
    .prestation-icon img{
        width:27px;
        height:27px;
    }

}

@media(max-width:340px){

    .prestation-icon svg,
    .prestation-icon img{
        width:24px;
        height:24px;
    }

}