/* Réduction significative de la hauteur du hero */
.hero {
    height: 60vh !important; /* Réduit de 100vh à 60vh */
    min-height: 400px !important; /* Réduit de 600px à 400px */
    max-height: 500px !important; /* Ajout d'une hauteur maximale */
}

/* Ajustements pour les écrans mobiles */
@media (max-width: 768px) {
    .hero {
        height: 50vh !important; /* Plus petit sur mobile */
        min-height: 300px !important;
        max-height: 400px !important;
    }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
    .hero {
        height: 40vh !important; /* Beaucoup plus petit sur les petits mobiles */
        min-height: 250px !important;
        max-height: 300px !important;
    }
}

/* Ajustement de l'image pour qu'elle s'affiche correctement */
.hero-image {
    background-position: center 30% !important; /* Positionne mieux le sujet de l'image */
    background-size: cover !important;
}

/* Ajustement du conteneur de l'image */
.hero-slider, .hero-slide {
    height: 100% !important;
    max-height: inherit !important;
}