/* =========================================================
TARIFS / PACKS — MOBILE
========================================================= */
@media screen and (max-width: 768px) {

    /* ================= HERO ================= */
    .hero-pricing-pro {
        min-height: auto;
        padding: 90px 15px 40px; /* évite conflit avec header */
        background-position: center top;
        background-size: cover;
        text-align: center;
    }

    .hero-pricing-pro .hero-content {
        max-width: 100%;
    }

    .hero-pricing-pro h1 {
        font-size: 1.7rem;
        line-height: 1.3;
        margin-bottom: 10px;
        color: #fff;
    }

    .hero-pricing-pro p {
        font-size: 1rem;
        color: #ddd;
        margin-bottom: 25px;
    }

    /* ================= PRICING GRID ================= */
    .pricing-grid {
        display: grid;
        grid-template-columns: 1fr; /* 1 carte par ligne */
        gap: 20px;
        margin: 25px 0;
        justify-items: center;
    }

    /* ================= PRICING CARD ================= */
    .pricing-card {
        width: 100%;
        max-width: 340px;
        padding: 20px 18px;
        border-radius: 16px;
        text-align: center;
        background: rgba(255,255,255,0.06);
        border-top: 4px solid var(--red);
    }

    .pricing-card h3 {
        font-size: 1.25rem;
        margin-bottom: 8px;
        color: #fff;
    }

    .price {
        font-size: 1.6rem;
        margin: 8px 0;
    }

    .desc {
        font-size: 0.95rem;
        line-height: 1.5;
        color: #ccc;
    }

    /* ================= FEATURED ================= */
    .featured {
        transform: none; /* pas de zoom sur mobile */
        border: 2px solid var(--red);
        box-shadow: 0 10px 25px rgba(227,6,19,0.25);
    }

    /* ================= BOUTON ================= */
    .btn-primary {
        display: inline-block;
        width: 100%;
        max-width: 280px;
        margin: 25px auto 0;
        padding: 14px 0;
        font-size: 1rem;
        border-radius: 40px;
        text-align: center;
    }

}
