body {
    margin: 0;
    padding: 0;
}

/* conteneur */
.intro-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* image qui arrive de la gauche */
.intro-image {
    position: absolute;
    height: 60vh;
    transform: translateX(-120%); /* hors-champ */
    animation: slideIn 1.4s ease-out forwards;
    width: 475px;
}

@keyframes slideIn {
    from { transform: translateX(-130%); }
    to   { transform: translateX(0); }
}

/* bouton d’entrée */
.enter-btn {
    position: absolute;
    bottom: 10vh;
    padding: 20px 20px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .6s ease;
}

.hidden {
    display: none;
}

.enter-btn img {
    width: 300px;
}

#intro {
    height: 100vh;
    overflow: hidden;
}

.enter-btn.show {
    opacity: 1;
}

/* FADE OUT de l’intro */
.fade-out {
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}

/* FADE IN de la page vidéo */
.fade-in {
    opacity: 0;
    animation: fadeInSmooth .4s forwards ease;
}

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