/* ============================================
   Bannière "Hero" avec dégradé animé (100% CSS)
   Solution définitive, stable et performante.
   ============================================ */

.page-hero.animated-hero {
    position: relative;
    padding: 60px 0; /* Hauteur réduite pour un rendu moins imposant */
    color: white;
    text-align: center;
    overflow: hidden;

    /* Nouveau dégradé animé, plus subtil et fluide */
    background: linear-gradient(-45deg, var(--color-green-1), var(--color-green-2));
    background-size: 400% 400%;
    animation: subtle-gradient 25s ease infinite;
}

/* Styles unifiés pour le contenu de la bannière */
.page-hero.animated-hero h1 {
    font-size: 2.5rem; /* 40px, taille plus raisonnable pour réduire la hauteur */
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: white; /* Assurer que la couleur est bien blanche */
}

.page-hero.animated-hero .lead {
    font-size: 1.2rem; /* 19px */
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Animation du dégradé */
@keyframes subtle-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}