@media (prefers-reduced-motion: no-preference) and (min-width:1200px) {
    @supports (animation-timeline: view()) {
        .rosee-reveal,
        .rosee-reveal-fade,
        .rosee-reveal-xs {
            animation: roseeRevealUp cubic-bezier(0.16, 1, 0.3, 1) both;
            animation-timeline: view();
            animation-range: entry 0% cover 100%;
        }

        /* Variante plus sobre : opacité, petit déplacement. */
        .rosee-reveal-xs {
            animation-name: roseeRevealUpSmall;
        }

        /* Variante sobre : opacité seule, sans déplacement. */
        .rosee-reveal-fade {
            animation-name: roseeRevealFade;
        }
    }
}

@keyframes roseeRevealUpSmall {
    from {
        opacity: 0;
        transform: translateY(45.75rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes roseeRevealUp {
    from {
        opacity: 0;
        transform: translateY(75.75rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes roseeRevealFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}