.hero-header {
    width: 100%;
    height: 110rem;
    background-color: #F4F6FB;
    padding-top: 18rem;
    background-image: url('../images/hero-engagements.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-position: center;
}

.hero-header h1{
    color: #FFF;
font-family: Poppins;
font-size: 6.6rem;
font-style: normal;
font-weight: 700;
line-height: 7rem; /* 90.909% */
letter-spacing: -0.1rem;
padding-left: 5%;
padding-bottom: 12rem;
}

/* INTRO */

.intro-engagements{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 6rem;
    padding-left: 5%;
    padding-top: 15rem;
    margin-bottom: 15rem;
}

.intro-engagements h1{
    color: #000;
font-family: Poppins;
font-size: 5rem;
font-style: normal;
font-weight: 600;
line-height: 4.8rem; /* 95% */
letter-spacing: 0.05rem;
background: #8FD0F3;
padding-left: 1rem;
padding-right: 1rem;
width: 79%;
}

.intro-engagements p{
    color: #000;
font-family: Poppins;
font-size: 2.9rem;
font-style: normal;
font-weight: 400;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}

/* NOS VALEURS */

.nos-valeurs{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    background-image: url('../images/valeurs-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
}

.nos-valeurs h1{
    width: 53.4rem;
height: 8.2rem;
color: #000;
font-family: Poppins;
font-size: 5rem;
font-style: normal;
font-weight: 700;
line-height: 2.8rem; /* 70% */
letter-spacing: 0.05rem;
background: #8FD0F3;
display: flex;
align-items: center;
justify-content: center;
}

.nos-valeurs p{
    color: #000;
font-family: Poppins;
font-size: 3.2rem;
font-style: normal;
font-weight: 400;
line-height: 5.2rem;
letter-spacing: 0.05rem;
}

.valeurs-container{
    width: 60%;
    display: flex;
    flex-direction: row;
    gap: 4rem;
    padding-left: 5%;
    padding-bottom: 5rem;
}

.valeurs-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.text-bg{
    width: 15.5rem;
height: 4.3rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
}

.text-bg-1{
background: #548DFB;
}

.text-bg-2{
background: #8FD0F3;
}

.text-bg-3{
background: #2268BA;
}

.text-bg-4{
background: #00A3FF;
}


/* VALEURS INFOS */
.nos-valeurs-infos{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 70%;
    padding: 10rem 0 10rem 5%;
}

.nos-valeurs-infos h1{
    color: #000;
font-family: Poppins;
font-size: 5.1rem;
font-style: normal;
font-weight: 600;

}

.nos-valeurs-infos p{
    color: #000;
font-family: Poppins;
font-size: 3.1rem;
font-style: normal;
font-weight: 400;
}

/* ACCROCHE */

.valeurs-accroche{
    width: 100%;
    height: 40rem;
    background-image: url('../images/engagement-environnements.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.valeurs-accroche{
    color: #FFF;
text-align: center;
font-family: Poppins;
font-size: 3.5rem;
font-style: normal;
font-weight: 700;/* 33.333% */
}


/* ENVIRONNEMENTS */

.environnements{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    margin: 10rem auto;
    gap: 10%;
    height: 75rem;
    
}

.environnements-left{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.environnements-left p{
    color: #000;
font-family: Poppins;
font-size: 3rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.1rem;
}

.environnements-right{
    width: 50%;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap:5rem;
    justify-content: space-between;
}

.environnements-right h1{
    color: #000;
font-family: Poppins;
font-size: 3.9rem;
font-style: normal;
font-weight: 600;
line-height: 5rem; /* 128.205% */
letter-spacing: -0.1rem;
}

.environnements-right p{
    color: #000;
font-family: Poppins;
font-size: 2.4rem;
font-style: normal;
font-weight: 400;
line-height: 5rem;
letter-spacing: -0.1rem;

}

@media screen and (max-width: 1540px) {
    .environnements-right p{
        line-height: 3.6rem;
    }
}

@media screen and (max-width: 720px) {
    .hero-header {
        height: 80rem;
        background-position: center;
    }

    .hero-header h1{
        padding-bottom: 20rem;
    }

    .intro-engagements{
        width: 95%;
    }
    
    .intro-engagements h1{
    font-size: 4rem;
    width: 100%;
    }

    .valeurs-container{
        width: 100%;
    }

    .nos-valeurs h1{
        width: 100%;
    }

    .nos-valeurs-infos{
        width: 100%;
    }

    .valeurs-accroche{
        height: auto;
        padding: 4rem 0;
        font-size: 3.2rem;
    }   

    .environnements{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 90%;
        margin: 10rem auto;
        gap: 6rem;
        height: auto;
        
    }
    
    .environnements-left{
        width: 100%;
        height: 100%;
        gap: 6rem;
    }
    
    
    .environnements-right{
        width: 100%;
        height: 100%;
        gap:6rem;
    }
    
}

@media screen and (max-width: 550px){
    .valeurs-accroche{
        font-size: 2.4rem;
    } 
}




/* PREFOOTER */
.accroche-prefooter{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #000;
text-align: center;
font-family: Poppins;
font-size: 3.2rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.1rem;
padding-bottom: 10rem;
padding-top: 10rem;
}