/**************  STYLE PAGE ZONES HUMIDES  ****************************************/


.zonesHumides .banniere {
    background-image: 
    linear-gradient(90deg, rgba(30, 30, 30, 0.80) 0%, rgba(30, 30, 30, 0.00) 100%),
    linear-gradient(180deg, rgba(22, 112, 112, 0.00%) 0%, var(--vert) 100%),
    url('../img/zonesH/banniereZH.jpg') /*image de la banniere*/;
    
    background-size: 
    60% 100%, /* Taille du 1er dégradé (40% largeur, 100% hauteur) */
    100% 50%,
    cover;   /*taille de l'image*/
    
    background-position: 
    left,
    bottom,
    0 75%; 
    background-repeat: no-repeat;     /* Empêche la répétition de l'image */
    height: auto;                     /* Ajuste la hauteur selon le contenu */
    width: auto;                      /* Ajuste la largeur selon le texte */
    color: var(--blanc);
    width: 100%;
    position: relative;
    height: 30rem;
    overflow: hidden;
}

.zonesHumides .banniere h2{
    font-size: 52px;
    margin: 0;
}

.zonesHumides .textPhare {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    margin: 120px 10% 0;
}

.zonesHumides .textPhare p {
    font-size: var(--texte1);
    width: 40%;
}

.competences {
    display: grid;
    grid-template-columns: repeat(2,1fr) ;
    grid-template-rows: 1fr ;
    grid-gap: 10%;
    row-gap: 140px;
    margin: 6rem 10%;
}




.zonesHumides #comp1 img {
    top :-5rem;
    width: 10rem;
    left: -5rem;
}

.zonesHumides #comp2 img {
    width: 15rem;
    top: -50px;
}

.zonesHumides #comp3 img {
    width: 8rem;
    top: -4rem;
    left: -4rem;
}

.zonesHumides #comp4 img {
    width: 8rem;
    left: -4rem;
    top: -4rem;
}

.zonesHumides #comp5 img {
    width: 7rem;
    top: -5rem;
    left:-3rem;
}

.zonesHumides #comp6 img {
    width: 8rem;
    top: -3rem;
    left: -4rem;
}

@media (max-width:800px) {
    .zonesHumides .textPhare {
        width: 94%;
    }
    .zonesHumides .textPhare p {
        width: 100%;
    }
    .zonesHumides .banniere h2 {
        font-size: 45px;
        margin-top: 20px;
    }

}