/**
 * Pôles d'Expertise - Animations & Interactions
 * Structure: .projective-card > .projective-card-static | .projective-card-reveal
 */

:root {
    --pole-transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --pole-color-hover: #0A9396;
}

@keyframes polesFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Base Styles --- */

#projective-poles-expertise .projective-card {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* Elements Visibility Defaults */
#projective-poles-expertise .projective-card .projective-card-static {
    display: block;
    /* Visible by default */
    transition: opacity var(--pole-transition), transform var(--pole-transition);
}

#projective-poles-expertise .projective-card .projective-card-reveal {
    display: none;
    /* Hidden by default */
}

/* --- Desktop Interaction (Hover) > 1024px --- */
@media (min-width: 1025px) {
    #projective-poles-expertise .projective-card:hover {
        background-color: var(--pole-color-hover);
    }

    /* Hide Static Content on Hover */
    #projective-poles-expertise .projective-card:hover .projective-card-static {
        display: none;
    }

    /* Show Reveal Content on Hover */
    #projective-poles-expertise .projective-card:hover .projective-card-reveal {
        display: flex;
        flex-direction: column;
        animation: polesFadeIn 0.4s ease forwards;
    }

    /* Animate Elements Upwards */
    #projective-poles-expertise .projective-card:hover .elementor-widget-heading,
    #projective-poles-expertise .projective-card:hover .elementor-widget-html,
    #projective-poles-expertise .projective-card:hover .projective-pole-tag {
        transform: translateY(-10px);
        transition: transform var(--pole-transition);
    }

    /* Force White Text on Hover */
    #projective-poles-expertise .projective-card:hover h3,
    #projective-poles-expertise .projective-card:hover p,
    #projective-poles-expertise .projective-card:hover li,
    #projective-poles-expertise .projective-card:hover span {
        color: #FFFFFF !important;
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

    /* Liens CTA - garder la couleur accent */
    #projective-poles-expertise .projective-card:hover a {
        color: #E9C46A !important;
    }

    #projective-poles-expertise .projective-card:hover a:hover {
        color: #FFD990 !important;
        /* Version plus claire au hover */
    }
}

/* --- Mobile Interaction (Click/Active) <= 1024px --- */
@media (max-width: 1024px) {

    /* Active State (.is-active handled by JS) */
    #projective-poles-expertise .projective-card.is-active {
        background-color: var(--pole-color-hover);
    }

    #projective-poles-expertise .projective-card.is-active .projective-card-static {
        display: none;
    }

    #projective-poles-expertise .projective-card.is-active .projective-card-reveal {
        display: flex;
        flex-direction: column;
        animation: polesFadeIn 0.4s ease forwards;
    }

    /* Force White Text only when Active */
    /* Note: When inactive, colors are inherited from Elementor settings */
    #projective-poles-expertise .projective-card.is-active h3,
    #projective-poles-expertise .projective-card.is-active p,
    #projective-poles-expertise .projective-card.is-active li,
    #projective-poles-expertise .projective-card.is-active span {
        color: #FFFFFF !important;
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
        transition: color 0.3s ease;
    }

    /* Liens CTA - garder la couleur accent */
    #projective-poles-expertise .projective-card.is-active a {
        color: #E9C46A !important;
        transition: color 0.3s ease;
    }
}