.Hero {
    min-height: 90vh;
    display: grid;
    grid-auto-flow: row;
    align-content: center;
    box-sizing: border-box;

    /* --- COUCHE SUPÉRIEURE : Filtre blanc semi-transparent (Opacité 80%) --- */
    /* --- COUCHE INFÉRIEURE : Votre image de fond --- */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7)), 
        url('../../ressources/images/door_orange.jpg');/*Image by <a href="https://pixabay.com/users/cdd20-1193381/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5173413">Hello Cdd20</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5173413">Pixabay</a>*/

    /* --- CONFIGURATION DU FOND --- */
    background-size: cover;       
    background-position: center; 
    background-repeat: no-repeat;  
    background-attachment: scroll;
}


.Hero .Hero_component{
  text-align: center;
  font-size: xx-large;
  margin-left: 10%;
  margin-right: 10%;
  word-break: normal;
}

@media (max-width: 800px) {
    .Hero .Hero_component{
        font-size: large;
    }
}

#Hero-title{
    font-weight: bold;
    font-family: var(--font-title);
}

#Hero-body{
     font-family: var(--font-body);
}


.animate-reveal {
  opacity: 0; /* Invisible */
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. La classe qui déclenche l'animation (sera ajoutée via JS ou direct en CSS) */
/* Pour un test immédiat sans JS, vous pouvez utiliser : .Hero:hover .animate-reveal */
.animate-reveal.is-visible {
    opacity: 1; /* Devient visible */
    transform: translateY(0); /* Reprend sa position normale */
}

/* 3. Les délais pour un effet "cascade" (le paragraphe après le titre) */
.delay-1 {
    transition-delay: 0.3s; /* Attend 0.3s avant de commencer */
}

/* Définition de l'animation */
@keyframes revealFadeSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-reveal {
    /* Sécurité pour le texte */
    white-space: normal;
    
    /* Application de l'animation au chargement */
    opacity: 0; /* État initial caché avant le début */
    animation: revealFadeSlide 1s ease-out forwards;
}

/* Délais en cascade */
.delay-1 {
    animation-delay: 1s;
}
.delay-2 {
    animation-delay: 2s;
}
.delay-3 {
    animation-delay: 3s;
}