/* ==========================================
   WP24 — PRICING MICRO INTERACTIONS
   Elementor V4 / Atomic Elements
   ==========================================

   #offre-essentiel
   → Scale doux + ombre

   #offre-pro
   → Scale premium + glow bleu

   Aucun JavaScript nécessaire.
   ========================================== */


/* ==========================================
   1. BASE DES CARTES
   ========================================== */

#offre-essentiel,
#offre-pro {
    position: relative;

    transform: translate3d(0, 0, 0);
    transform-origin: center center;

    backface-visibility: hidden;

    transition:
        transform 700ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 700ms cubic-bezier(.22, 1, .36, 1);
}


/* ==========================================
   2. HOVER — DESKTOP
   ========================================== */

@media (hover: hover) and (pointer: fine) {

    /* ESSENTIEL */

    #offre-essentiel:hover {
        transform:
            translate3d(0, -6px, 0)
            scale(1.025) !important;

        box-shadow:
            0 22px 55px rgba(4, 29, 44, .12);

        z-index: 2;
    }

    /* PRO */

    #offre-pro:hover {
        transform:
            translate3d(0, -8px, 0)
            scale(1.035) !important;

        box-shadow:
            0 28px 70px rgba(4, 29, 44, .20),
            0 0 0 1px rgba(125, 180, 255, .25);

        z-index: 3;
    }

    /* ======================================
       3. CHECK ICON MICRO INTERACTION
       ====================================== */

    #offre-essentiel .elementor-icon-list-icon,
    #offre-pro .elementor-icon-list-icon {
        transition:
            transform 450ms cubic-bezier(.22, 1, .36, 1);
    }

    #offre-essentiel .elementor-icon-list-item:hover
    .elementor-icon-list-icon,

    #offre-pro .elementor-icon-list-item:hover
    .elementor-icon-list-icon {
        transform: scale(1.18);
    }


    /* ======================================
       4. PRICE MICRO INTERACTION
       ====================================== */

    #offre-essentiel h2,
    #offre-pro h2 {
        transition:
            transform 600ms cubic-bezier(.22, 1, .36, 1);
    }

    #offre-essentiel:hover h2,
    #offre-pro:hover h2 {
        transform: translateY(-2px);
    }
}


/* ==========================================
   5. MOBILE — DISABLE
   ========================================== */

@media (hover: none), (pointer: coarse) {

    #offre-essentiel,
    #offre-pro {
        transform: none !important;
        box-shadow: none;
    }
}


/* ==========================================
   6. REDUCED MOTION
   ========================================== */

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

    #offre-essentiel,
    #offre-pro,
    #offre-essentiel h2,
    #offre-pro h2,
    #offre-essentiel .elementor-icon-list-icon,
    #offre-pro .elementor-icon-list-icon {
        transition: none !important;
        animation: none !important;
    }

    #offre-essentiel:hover,
    #offre-pro:hover,
    #offre-essentiel:hover h2,
    #offre-pro:hover h2 {
        transform: none !important;
    }
}