/* Réinitialisation des marges par défaut */
* {
    margin: 0;
    padding: 0;
    box-box-sizing: border-box;
}

/* On s'assure que le body prend toute la hauteur de l'écran */
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Empêche les barres de défilement si l'image dépasse légèrement */
    
    /* Dégradé linéaire du haut (#070c1a) vers le bas (#040814) */
    background-image: linear-gradient(to bottom, #070c1a, #040814);
}

/* Conteneur principal en Flexbox pour centrer parfaitement */
.hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* L'image magique en pleine page */
.hero-image {
    width: 100%;
    height: 100%;
    /* object-fit: cover permet de remplir l'écran sans déformer l'image (elle sera légèrement rognée si nécessaire) */
    /*object-fit: cover; */
    object-fit: contain; 
    /* Assure que le centre de l'image reste toujours visible */
    object-position: center; 
}