/* style.css */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000; /* Optionnel, en fonction de tes préférences de couleur de fond */
    overflow: hidden; /* Empêche le défilement */
}

#background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('media/Landing-fond.png') no-repeat center center;
    background-size: cover;
    z-index: 1;
}

.hidden {
    display: none;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white; /* Assure que le fond du popup est opaque */
    padding: 20px;
    border-radius: 5px;
    z-index: 10; /* S'assure que le popup s'affiche au-dessus des autres éléments */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Un peu d'ombre pour le style */
}

#monGif {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* S'assure que le GIF s'adapte à la largeur de l'écran */
    max-width: 1080px; /* Largeur maximale pour éviter que le GIF soit trop grand */
    height: auto; /* Maintient le ratio d'aspect */
    z-index: 2;
}

@media (orientation: portrait) {
    #background-image, #monGif {
        width: 100%;
        background-size: cover; /* Change pour 'contain' pour assurer que tout le fond est visible */
    }
}