/* =========================
   TARIFS V2
========================= */

/* =========================
   TARIFS GRID
========================= */

.tarifs-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:1.2rem;

    margin-top:2rem;

}

/* MOBILE */

@media screen and (max-width:767px){

    .tarifs-grid{

        grid-template-columns:1fr !important;

    }

    .tarif-card{

        width:100% !important;

    }

}

/* TABLETTE */

@media screen and (min-width:768px){

    .tarifs-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}

/* DESKTOP */

@media screen and (min-width:1200px){

    .tarifs-grid{

        grid-template-columns:
        repeat(3,1fr);

    }

}

/* SECTION */

.tarif-card{

    padding:1.5rem;

    border-radius:24px;
    
    width:100%;
    min-width:0;

    background:
    rgba(10,10,10,.75);

    border:
    1px solid rgba(0,120,255,.18);

    backdrop-filter:blur(12px);

    box-shadow:
    0 0 40px rgba(0,120,255,.06);

}

.tarif-card.full{

    grid-column:span 3;

}

/* TITLE */

.tarif-card h3{

    color:#009dff;

    font-size:1.05rem;

    letter-spacing:4px;

    margin-bottom:1.4rem;

    padding-bottom:1rem;

    border-bottom:
    1px solid rgba(255,255,255,.08);

}

/* ITEM */

.tarif-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:1rem;

    padding:1rem 0;

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

}

.tarif-item:last-child{

    border-bottom:none;

}

.tarifs-content{

    overflow-x:hidden;

}

.panel-content{

    width:min(100%,1200px);

}

/* LEFT */

.tarif-left{

    flex:1;

}

/* NAME */

.tarif-left strong{

    display:block;

    font-size:1rem;

    margin-bottom:.35rem;

}

/* DESC */

.tarif-left span{

    display:block;

    font-size:.82rem;

    opacity:.55;

    line-height:1.5;

}

/* PRICE */

.price{

    color:#009dff;

    font-weight:700;

    font-size:1.15rem;

    white-space:nowrap;

}

/* =========================
   TARIFS REAL MOBILE FIX
========================= */

@media screen and (max-width:767px){

    .tarifs-grid{

        display:flex !important;

        flex-direction:column !important;

        width:100% !important;

        gap:1rem !important;

    }

    .tarif-card{

        width:100% !important;

        max-width:100% !important;

        min-width:100% !important;

        flex:0 0 100% !important;

        margin:0 !important;

    }

    .panel-content{

        width:calc(100% - 1.5rem) !important;

        padding:1.2rem !important;

    }

}