/* ==================================================
   COMPARATIF DES OFFRES — ACCOMPAGNEMENT
   Tableau desktop + cartes mobiles premium
================================================== */

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

.offers-comparison_new{
    position:relative;
    overflow:hidden;

    padding:92px 0 106px;

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

.offers-comparison_new .le-container_new{
    width:min(1560px,94%);
    margin:0 auto;
}


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

.offers-heading_new{
    max-width:900px;
    margin:0 auto 56px;

    text-align:center;
}

.offers-label_new{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

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

    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);
}

.offers-label_new::before,
.offers-label_new::after{
    content:"";

    width:18px;
    height:1.5px;

    border-radius:999px;

    background:#0757f9;
}

.offers-heading_new h2{
    margin:0 0 18px;

    color:#000d20;

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

.offers-heading_new h2 span{
    color:#0757f9;
}

.offers-heading_new p{
    max-width:740px;

    margin:0 auto;
    padding:0 !important;

    color:#5c6c84;

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


/* ==================================================
   AFFICHAGES
================================================== */

.offers-desktop_new{
    display:block;
}

.offers-mobile_new{
    display:none;
}


/* ==================================================
   MENTION DE DÉFILEMENT
   En tablette le tableau devient plus large que son
   conteneur : ".offers-table-wrap_new" passe en
   "overflow-x:auto". Rien n'indiquait qu'il fallait
   glisser pour voir les trois formules.
================================================== */

.offers-scroll-hint_new{
    display:none;

    margin:0 2px 12px;

    align-items:center;
    gap:8px;

    color:#5c6c84;

    font-size:13px;
    font-weight:700;
    line-height:1.3;

    transition:opacity .3s ease;
}

.offers-scroll-hint_new svg{
    width:17px;
    height:17px;
    flex:0 0 17px;

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

/* La classe est posee en JS uniquement quand le tableau
   est reellement plus large que son conteneur : la
   mention n'apparait jamais pour rien. Sous 761px
   ".offers-desktop_new" est masque, la mention part
   avec lui. */

.offers-desktop_new.is-offers-scrollable .offers-scroll-hint_new{
    display:flex;
}

/* Le message a rempli son role des que l'utilisateur a
   commence a glisser. */

.offers-desktop_new.has-offers-scrolled .offers-scroll-hint_new{
    opacity:0;
}


/* ==================================================
   TABLEAU DESKTOP
================================================== */

.offers-table-wrap_new{
    position:relative;

    padding:42px 12px 12px;

    overflow:visible;

    border:1px solid rgba(7,87,249,.08);
    border-radius:28px;

    background:rgba(255,255,255,.84);

    box-shadow:
        0 30px 80px rgba(0,13,32,.09),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.offers-table_new{
    position:relative;

    display:grid;
    grid-template-columns:minmax(330px,1.4fr) repeat(3,minmax(170px,.8fr));

    overflow:visible;

    border:1px solid rgba(0,13,32,.075);
    border-radius:20px;

    background:#ffffff;
}

.offers-head_new{
    position:relative;

    min-width:0;
    min-height:118px;
    padding:24px;

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

    border-right:1px solid rgba(0,13,32,.07);
    border-bottom:1px solid rgba(0,13,32,.08);

    background:#ffffff;
}

.offers-head-feature_new{
    align-items:flex-start;

    padding-left:30px;
}

.offers-head-feature_new strong{
    min-height:30px;

    color:#000d20;

    font-size:20px;
    font-weight:900;
    line-height:1.3;
}

.offers-head-feature_new span{
    min-height:36px;
    margin-top:6px;

    color:#718097;

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

.offers-head-plan_new{
    text-align:center;
}

.offers-head-plan_new strong{
    min-height:34px;
    margin:0 0 6px;

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

    color:#000d20;

    font-size:21px;
    font-weight:900;
    line-height:1.3;
}

.offers-head-plan_new > span:not(.offers-best_new){
    min-height:24px;

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

    color:#0757f9;

    font-size:17px;
    font-weight:900;
    line-height:1.3;
}

.offers-head-plan_new.is-featured_new{
    z-index:3;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(255,255,255,.20),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            #2873ff,
            #0757f9 52%,
            #0644c6
        );

    border-right-color:transparent;
    border-bottom-color:rgba(255,255,255,.12);

    box-shadow:
        0 -14px 36px rgba(7,87,249,.18),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.offers-head-plan_new.is-featured_new strong,
.offers-head-plan_new.is-featured_new > span{
    color:#ffffff;
}

.offers-best_new{
    position:absolute;
    top:-30px;
    left:50%;

    min-height:30px;
    padding:0 14px;

    border-radius:9px 9px 0 0;

    display:flex;
    align-items:center;
    gap:7px;

    color:#ffffff;
    background:#0757f9;

    font-size:11px;
    font-weight:900;
    letter-spacing:.2px;
    white-space:nowrap;

    transform:translateX(-50%);

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

.offers-best_new svg{
    width:13px;
    height:13px;

    fill:currentColor;
}


/* ==================================================
   LIGNES DU TABLEAU
================================================== */

.offers-feature_new,
.offers-cell_new{
    min-width:0;
    min-height:82px;

    border-right:1px solid rgba(0,13,32,.065);
    border-bottom:1px solid rgba(0,13,32,.065);
}

.offers-feature_new{
    padding:15px 24px;

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

    background:#ffffff;
}

.offers-feature-icon_new{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0757f9;
}

.offers-feature-icon_new svg{
    width:27px;
    height:27px;

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

.offers-feature-icon_new img{
    width:27px;
    height:27px;
    display:block;
}


.offers-feature_new > div{
    min-width:0;

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

.offers-feature_new strong{
    min-height:24px;

    display:flex;
    align-items:center;

    color:#000d20;

    font-size:14px;
    font-weight:850;
    line-height:1.35;
}

.offers-feature_new small{
    min-height:30px;

    display:flex;
    align-items:flex-start;

    color:#718097;

    font-size:11.5px;
    line-height:1.35;
}

.offers-cell_new{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#ffffff;
}

.offers-cell-featured_new{
    position:relative;
    z-index:2;

    background:
        linear-gradient(
            180deg,
            rgba(236,243,255,.78),
            rgba(247,250,255,.95)
        );

    border-right:1.5px solid rgba(7,87,249,.55);
    border-left:1.5px solid rgba(7,87,249,.55);
}


/* ==================================================
   STATUTS
================================================== */

.offer-status_new{
    width:36px;
    height:36px;
    flex:0 0 36px;

    border-radius:50%;

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

.offer-status_new svg{
    width:19px;
    height:19px;

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

.offer-status_new.is-included_new{
    color:#35a73c;
    background:#effaef;

    box-shadow:
        inset 0 0 0 1px rgba(53,167,60,.15),
        0 8px 20px rgba(53,167,60,.09);
}

.offer-status_new.is-excluded_new{
    color:#e63f3f;
    background:#fff0f0;

    box-shadow:
        inset 0 0 0 1px rgba(230,63,63,.15),
        0 8px 20px rgba(230,63,63,.08);
}


/* ==================================================
   ACTIONS DU TABLEAU
================================================== */

.offers-footer-empty_new,
.offers-plan-action_new{
    min-width:0;
    min-height:100px;

    border-right:1px solid rgba(0,13,32,.065);

    background:#ffffff;
}

.offers-plan-action_new{
    padding:18px;

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

.offers-plan-action-featured_new{
    position:relative;
    z-index:2;

    background:#f2f6ff;

    border-right:1.5px solid rgba(7,87,249,.55);
    border-left:1.5px solid rgba(7,87,249,.55);
    border-bottom:1.5px solid rgba(7,87,249,.55);
    border-radius:0 0 16px 16px;
}

.offers-btn_new{
    width:100%;
    max-width:180px;
    min-height:50px;
    padding:0 18px;

    border-radius:9px;

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

    text-align:center;
    text-decoration:none;

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

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

.offers-btn-outline_new{
    color:#0757f9;
    background:#ffffff;

    border:1.5px solid rgba(7,87,249,.30);
}

.offers-btn-outline_new:hover{
    color:#ffffff;
    background:#0757f9;

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(7,87,249,.20);
}

.offers-btn-primary_new{
    color:#ffffff;
    background:#0757f9;

    box-shadow:
        0 14px 30px rgba(7,87,249,.25),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.offers-btn-primary_new:hover{
    color:#ffffff;
    background:#1f73ff;

    transform:translateY(-3px);

    box-shadow:0 20px 38px rgba(7,87,249,.32);
}


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

.offer-mobile-card_new{
    position:relative;
    overflow:hidden;

    padding:24px;

    border:1px solid rgba(7,87,249,.09);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(37,99,235,.07),
            transparent 32%
        ),
        #ffffff;

    box-shadow:
        0 18px 44px rgba(0,13,32,.07),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.offer-mobile-card_new.is-featured_new{
    padding-top:46px;

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

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

    box-shadow:
        0 24px 58px rgba(7,87,249,.14),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.offer-mobile-best_new{
    position:absolute;
    top:0;
    left:50%;

    min-height:30px;
    padding:0 14px;

    border-radius:0 0 10px 10px;

    display:flex;
    align-items:center;
    gap:7px;

    color:#ffffff;
    background:#0757f9;

    font-size:10px;
    font-weight:900;
    letter-spacing:.2px;

    transform:translateX(-50%);

    white-space:nowrap;
}

.offer-mobile-best_new svg{
    width:13px;
    height:13px;

    fill:currentColor;
}

.offer-mobile-head_new{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:14px;
    align-items:center;

    padding-bottom:20px;
    margin-bottom:6px;

    border-bottom:1px solid rgba(7,87,249,.10);
}

.offer-mobile-index_new{
    width:42px;
    height:42px;

    border-radius:13px;

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

    color:#0757f9;
    background:#edf4ff;

    font-size:12px;
    font-weight:950;

    box-shadow:
        inset 0 0 0 1px rgba(7,87,249,.10),
        0 10px 22px rgba(7,87,249,.08);
}

.offer-mobile-head_new h3{
    margin:0 0 3px;

    color:#000d20;

    font-size:21px;
    font-weight:950;
    line-height:1.2;
}

.offer-mobile-head_new strong{
    color:#0757f9;

    font-size:17px;
    font-weight:900;
}

.offer-mobile-features_new{
    display:flex;
    flex-direction:column;
}

.offer-mobile-feature_new{
    min-width:0;

    padding:14px 0;

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

    border-bottom:1px solid rgba(0,13,32,.07);
}

.offer-mobile-feature_new:last-child{
    border-bottom:0;
}

.offer-mobile-feature_new.is-excluded_new{
    opacity:.60;
}

.offer-mobile-feature-icon_new{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0757f9;
}

.offer-mobile-feature-icon_new svg{
    width:25px;
    height:25px;

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

.offer-mobile-feature-icon_new img{
    width:25px;
    height:25px;
    display:block;
}

.offer-mobile-feature_new > div{
    min-width:0;
}

.offer-mobile-feature_new strong{
    display:block;

    color:#000d20;

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

.offer-mobile-feature_new small{
    display:block;

    margin-top:2px;

    color:#718097;

    font-size:11px;
    line-height:1.4;
}

.offer-mobile-feature_new .offer-status_new{
    width:31px;
    height:31px;
    flex-basis:31px;
}

.offer-mobile-feature_new .offer-status_new svg{
    width:16px;
    height:16px;
}

.offer-mobile-btn_new{
    width:100%;
    min-height:56px;
    margin-top:20px;
    padding:0 18px;

    border:1.5px solid rgba(7,87,249,.26);
    border-radius:12px;

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

    color:#0757f9;
    background:#ffffff;

    text-decoration:none;
    text-align:center;

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

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

.offer-mobile-btn_new.is-primary_new{
    border-color:#0757f9;

    color:#ffffff;
    background:#0757f9;

    box-shadow:
        0 16px 34px rgba(7,87,249,.25),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.offer-mobile-btn_new:hover{
    transform:translateY(-3px);

    color:#ffffff;
    background:#0757f9;

    box-shadow:0 17px 34px rgba(7,87,249,.22);
}

.offer-mobile-btn_new svg{
    width:19px;
    height:19px;

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


/* ==================================================
   BÉNÉFICES
================================================== */

.offers-benefits_new{
    margin-top:32px;
    padding:26px 32px;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;

    border:1px solid rgba(7,87,249,.08);
    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(243,247,255,.94)
        );

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

.offers-benefit_new{
    min-width:0;
    min-height:88px;
    padding:0 28px;

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

    border-right:1px solid rgba(7,87,249,.13);
}

.offers-benefit_new:last-child{
    border-right:0;
}

.offers-benefit_new > span{
    width:54px;
    height:54px;
    flex:0 0 54px;

    border-radius:50%;

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

    color:#0757f9;
    background:#edf4ff;

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

.offers-benefit_new svg{
    width:29px;
    height:29px;

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

.offers-benefit_new img{
    width:29px;
    height:29px;

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


.offers-benefit_new > div{
    min-width:0;

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

.offers-benefit_new strong{
    min-height:24px;

    color:#000d20;

    font-size:14px;
    font-weight:900;
    line-height:1.35;
}

.offers-benefit_new small{
    min-height:36px;

    color:#66748a;

    font-size:12.5px;
    line-height:1.4;
}


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

@media(max-width:1100px){

    .offers-comparison_new{
        padding:80px 0 92px;
    }

    .offers-table-wrap_new{
        overflow-x:auto;
        overflow-y:visible;

        padding-top:42px;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
        scrollbar-color:rgba(7,87,249,.32) rgba(7,87,249,.07);
    }

    .offers-table-wrap_new::-webkit-scrollbar{
        height:9px;
    }

    .offers-table-wrap_new::-webkit-scrollbar-track{
        border-radius:999px;

        background:rgba(7,87,249,.07);
    }

    .offers-table-wrap_new::-webkit-scrollbar-thumb{
        border-radius:999px;

        background:rgba(7,87,249,.32);
    }

    .offers-table_new{
        min-width:970px;
    }

    .offers-head-feature_new,
    .offers-feature_new,
    .offers-footer-empty_new{
        position:sticky;
        left:0;
        z-index:6;

        box-shadow:12px 0 18px rgba(0,13,32,.045);
    }

    .offers-head-feature_new{
        z-index:7;
    }

    .offers-benefit_new{
        padding:0 20px;
    }
}

/* ==================================================
   MOBILE — CARTES
================================================== */

@media(max-width:760px){

    .offers-comparison_new{
        padding:66px 0 76px;
    }

    .offers-comparison_new .le-container_new{
        width:calc(100% - 28px);
    }

    .offers-heading_new{
        margin-bottom:40px;
    }

    .offers-heading_new h2{
        font-size:clamp(31px,8.5vw,37px);
    }

    .offers-heading_new p{
        font-size:14.5px;
        line-height:1.62;
    }

    .offers-desktop_new{
        display:none;
    }

    .offers-mobile_new{
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
    }

    .offers-benefits_new{
        grid-template-columns:1fr;

        gap:0;

        padding:22px;
        margin-top:26px;

        border-radius:18px;
    }

    .offers-benefit_new{
        min-height:0;
        padding:18px 0;

        border-right:0;
        border-bottom:1px solid rgba(7,87,249,.12);
    }

    .offers-benefit_new:first-child{
        padding-top:0;
    }

    .offers-benefit_new:last-child{
        padding-bottom:0;

        border-bottom:0;
    }
}


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

@media(max-width:430px){

    .offers-comparison_new{
        padding:58px 0 66px;
    }

    .offers-comparison_new .le-container_new{
        width:calc(100% - 20px);
    }

    .offers-label_new{
        min-height:28px;
        padding:0 11px;

        font-size:9.5px;
    }

    .offers-label_new::before,
    .offers-label_new::after{
        width:14px;
    }

    .offers-heading_new h2{
        font-size:30px;
    }

    .offers-heading_new p{
        font-size:13.5px;
    }

    .offer-mobile-card_new{
        padding:19px;

        border-radius:18px;
    }

    .offer-mobile-card_new.is-featured_new{
        padding-top:43px;
    }

    .offer-mobile-head_new{
        grid-template-columns:38px minmax(0,1fr);

        gap:12px;
    }

    .offer-mobile-index_new{
        width:38px;
        height:38px;

        border-radius:11px;
    }

    .offer-mobile-head_new h3{
        font-size:18px;
    }

    .offer-mobile-head_new strong{
        font-size:15px;
    }

    .offer-mobile-feature_new{
        grid-template-columns:34px minmax(0,1fr) 29px;

        gap:10px;
        padding:12px 0;
    }

    .offer-mobile-feature-icon_new{
        width:34px;
        height:34px;
    }

    .offer-mobile-feature-icon_new svg{
        width:22px;
        height:22px;
    }

    .offer-mobile-feature_new strong{
        font-size:12px;
    }

    .offer-mobile-feature_new small{
        font-size:10.5px;
    }

    .offer-mobile-feature_new .offer-status_new{
        width:29px;
        height:29px;
        flex-basis:29px;
    }

    .offer-mobile-btn_new{
        min-height:54px;

        font-size:12.5px;
    }

    .offers-benefits_new{
        padding:19px 17px;
    }

    .offers-benefit_new{
        grid-template-columns:48px minmax(0,1fr);

        gap:14px;
    }

    .offers-benefit_new > span{
        width:48px;
        height:48px;
    }

    .offers-benefit_new svg{
        width:25px;
        height:25px;
    }
}


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

@media(max-width:340px){

    .offers-comparison_new .le-container_new{
        width:calc(100% - 14px);
    }

    .offer-mobile-card_new{
        padding:16px;
    }

    .offer-mobile-card_new.is-featured_new{
        padding-top:41px;
    }

    .offer-mobile-feature_new{
        grid-template-columns:31px minmax(0,1fr) 27px;

        gap:8px;
    }

    .offer-mobile-feature-icon_new{
        width:31px;
        height:31px;
    }

    .offer-mobile-feature_new strong{
        font-size:11px;
    }

    .offer-mobile-feature_new small{
        font-size:10px;
    }
}


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

@media(hover:none){

    .offers-btn_new:hover,
    .offer-mobile-btn_new:hover{
        transform:none;
    }
}

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

    .offers-btn_new,
    .offer-mobile-btn_new{
        transition:none;
    }
}