/* Style pour le Avada Parallax Hero */
.aph-container {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
}

.aph-layer {
    position: absolute;
    top: -5%;
    /* Prise en compte du débordement pour l'animation parallax */
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    will-change: transform;
    pointer-events: none;
}

/* z-index pour ordonner les layers et le contenu */
.aph-layer-3 {
    z-index: 1;
    /* Ciel en fond */
}

/* Nouveaux conteneurs pour scinder le texte */
.aph-content-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    pointer-events: none;
    /* Laisse passer les clics vers le fond si besoin */
}

.aph-content-inner {
    position: relative;
    text-align: center;
    width: 100%;
    /* max-width: 1200px; */
    padding: 0 65px;
    margin-bottom: clamp(200px, 13.5%, 25vh);
}

.aph-title-layer {
    z-index: 2;
    /* Titre passe entre Ciel(1) et Forêt(3) */
}

.aph-layer-2 {
    z-index: 3;
    /* Forêt au milieu */
}

.aph-subtitle-layer {
    z-index: 4;
    /* Sous-titre passe entre Forêt(3) et Bonhomme(5) */
}

.aph-layer-1 {
    z-index: 5;
    /* Bonhomme en premier plan */
}

/* Typographie reproduisant l'image fournie */
.aph-title {
    margin: 0 0 20px 0;
    /* Vert foncé */
}

.aph-title span {
    background-color: #ffffff;
    padding: 0px 15px;
    display: inline-block;
    border-radius: 8px;
    /* Léger arrondi visible sur le rendu */
}

.aph-subtitle {
    margin-top: 45px;
    line-height: 1.8;
}

.aph-subtitle span {
    font-style: normal;
    padding: 6px 15px;
    border-radius: 8px;
    margin-top: 4px;
    display: inline;
    margin-left: -2px;
    -moz-background-inline-policy: each-box;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: #EBE5DA;
    font-size: 22px;
    line-height: 43px;
}

@media only screen and (min-width: 1024px) and (max-height: 780px) {
    .aph-content-inner {
        margin-bottom: clamp(160px, 18.5%, 37vh);
    }
}

@media only screen and (min-width: 1600px) and (max-height: 780px) {
    .aph-content-inner {
        margin-bottom: clamp(150px, 16.5%, 35vh);
    }
}

@media only screen and (min-width: 1600px) and (min-height: 700px) {
    .aph-layer-2 {
        top: 5%;
    }
}

@media only screen and (min-width: 1900px) and (min-height: 800px) {
    .aph-content-inner {
        margin-bottom: clamp(150px, 16.5%, 40vh);
    }
}

@media only screen and (min-width: 1024px) and (max-height: 700px) {
    .aph-content-inner {
        margin-bottom: clamp(250px, 12.5%, 35vh);
    }
}


/* --- Responsive Mobile --- */
@media (max-width: 768px) {
    /* Conteneur principal: on peut réduire un peu la hauteur si besoin, ou la garder à 90vh */
    .aph-container {
        height: 80vh;
    }

    .aph-layer {
        background-position: 39% bottom;
    }

    /* Centrer le contenu horizontalement */
    .aph-content-inner {
        text-align: center;
        padding: 0 20px;
        margin-bottom: 0;
    }

    /* Éloigner le Titre (vers le haut) */
    .aph-title-layer .aph-content-inner {
        margin-top: -25vh; /* Remonte fortement le titre dans le ciel */
    }

    /* Éloigner le Sous-titre (vers le bas) */
    .aph-subtitle-layer .aph-content-inner {
        margin-top: 0; /* Descend le sous-titre vers la forêt */
    }

    /* Gérer le wrapping du Titre comme le sous-titre */
    .aph-title span {
        display: inline;
        -moz-background-inline-policy: each-box;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        line-height: 1.4;
        padding: 0 15px;
        border-radius: 4px;
    }

    .aph-subtitle {
        margin-top: 0;
    }

    /* Réduire légèrement la taille et l'interligne du sous-titre sur mobile */
    .aph-subtitle span {
        font-size: 16px;
        line-height: 32px;
        padding: 4px 10px;
        border-radius: 4px;
    }
}