/* ==== Loader plein écran EPVD ==== */

#epvd-loader-overlay {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.55s ease-out;
	width: 100%;
	height: 100%
}

#epvd-loader-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#epvd-loader-logo {
    max-width: 40vw;
    width: 250px;
    height: auto;
       animation: epvd-loader-fadein 1s ease-out forwards;
}

@keyframes epvd-loader-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==== Intro hero / logo / nav-area ==== */

/* On ajoute ces classes en JS, donc on ne touche pas à tes classes existantes */

.epvd-intro-hero,
.epvd-intro-logo,
.epvd-intro-nav,
.epvd-intro-countdown {
    will-change: opacity, transform;
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

/* États initiaux (invisibles avant l’animation) */

.epvd-intro-hero,
.epvd-intro-countdown {
    opacity: 0;
    transform: translateY(10px);
}

.epvd-intro-logo {
    opacity: 0;
    transform: translateY(-8px);
}

.epvd-intro-nav {
    opacity: 0;
    transform: translateX(600px);
}

/* État visible final */

.epvd-intro-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Un peu de sécurité responsive, mais sans toucher ton design */

@media (prefers-reduced-motion: reduce) {
    #epvd-loader-logo {
        animation: none;
        opacity: 1;
    }

    .epvd-intro-hero,
    .epvd-intro-logo,
    .epvd-intro-nav,
..epvd-intro-countdown	{
        transition: none;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 1050px) {
.epvd-intro-nav {
    will-change: auto;
transform: none;
}	
}