/**
 * Vista Pulse — Cards méthodologie.
 * CSS minimal : on ne fait QUE le scaffolding structurel pour permettre l'effet
 * 3D tilt + le shadow gradient en arrière. Tout le reste (typo, couleurs,
 * tailles, padding, position des éléments) reste piloté par les réglages
 * Elementor du user.
 */

/* =========================================================================
   GRID — flex row equal width
   ========================================================================= */

.vp-methodology-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

@media (min-width: 768px) {
    .vp-methodology-grid {
        flex-direction: row;
        align-items: stretch;
        gap: 2rem;
    }
    .vp-methodology-grid > .vp-methodology-card {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* =========================================================================
   CARD — perspective + position relative pour shadow pseudo + tilt JS
   ========================================================================= */

.vp-methodology-card {
    position: relative;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shadow layer derrière chaque card — pseudo-element coloré, translaté */
.vp-methodology-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.18;
    transform: translate3d(1rem, 1rem, 0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.vp-methodology-card--cyan::before,
.vp-methodology-card[data-step-color="cyan"]::before {
    background: linear-gradient(135deg, var(--vp-primary) 0%, var(--vp-teal) 100%);
}
.vp-methodology-card--warm::before,
.vp-methodology-card[data-step-color="warm"]::before {
    background: linear-gradient(135deg, var(--vp-secondary) 0%, var(--vp-warm) 100%);
}
.vp-methodology-card--green::before,
.vp-methodology-card[data-step-color="green"]::before {
    background: linear-gradient(135deg, var(--vp-green) 0%, var(--vp-teal) 100%);
}

.vp-methodology-card:hover::before {
    transform: translate3d(1.5rem, 1.5rem, 0);
    opacity: 0.28;
}

/* Le tilt JS rotate le contenu — détection auto via .vp-tilt class */

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .vp-methodology-card,
    .vp-methodology-card::before {
        transition: none !important;
    }
    .vp-methodology-card:hover::before {
        transform: translate3d(1rem, 1rem, 0);
    }
}