/**
 * Les apparitions au défilement — la part CSS.
 *
 * Tout est conditionné par `.evg-anime`, que le script pose sur la page : sans lui, aucune
 * règle ne s'applique et le contenu reste visible. C'est voulu — une animation ne doit jamais
 * pouvoir rendre une page vide.
 */

.evg-anime .evg-apparait {
    opacity: 0;
    transform: translateY(14px);
}

/*
 * L'« important » n'est pas une facilité : les sections d'Elementor portent déjà une
 * transition (fond, bordure, ombre) qui écrasait la nôtre — le bloc sautait à sa place au lieu
 * d'y monter, et seules les cartes s'animaient. Relevé sur la page, pas supposé.
 */
.evg-anime .evg-apparait {
    transition: opacity .5s ease, transform .5s ease !important;
}
.evg-anime .evg-apparait .evg-case,
.evg-anime .evg-apparait .evg-proposition,
.evg-anime .evg-apparait .evg-association {
    transition: opacity .5s ease, transform .5s ease;
}

.evg-anime .evg-apparait.evg-vu {
    opacity: 1;
    transform: none;
}

/* Les cartes d'une rangée s'enchaînent : leur décalage est posé par le script. */
.evg-anime .evg-apparait .evg-case,
.evg-anime .evg-apparait .evg-proposition,
.evg-anime .evg-apparait .evg-association {
    opacity: 0;
    transform: translateY(10px);
}
.evg-anime .evg-apparait.evg-vu .evg-case,
.evg-anime .evg-apparait.evg-vu .evg-proposition,
.evg-anime .evg-apparait.evg-vu .evg-association {
    opacity: 1;
    transform: none;
}

/* Le réglage du système l'emporte sur tout le reste. */
@media (prefers-reduced-motion: reduce) {
    .evg-anime .evg-apparait,
    .evg-anime .evg-apparait .evg-case,
    .evg-anime .evg-apparait .evg-proposition,
    .evg-anime .evg-apparait .evg-association {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}