* {
    box-sizing: border-box;
}

html {
    font-size: 62.5% !important;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem !important;
    margin: 0 auto !important;
    background-image: linear-gradient(to right, rgba(201, 237, 237, 0), rgba(201, 237, 237, 1));
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    align-items: center;
}




.container {
    max-width: 1440px !important;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;

}

.d-flex {
    display: flex;
    flex-wrap: nowrap;
    /* Empêche le retour à la ligne */
}

.flex-center {
    justify-content: center;
    align-items: center;
}


.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

h1,
h2,
h3,
h4 {
    color: #222 !important;
    font-weight: 700 !important;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif !important;
}

h1 {
    /*border: 3px solid tomato;*/
    margin: 0 !important;
    color: #222222 !important;
    font-size: 3.4rem !important;
    line-height: 6.4rem !important;

}

h2 {
    /*border: 3px solid tomato;*/
    margin: 0 !important;
    color: #222222 !important;
    font-size: 3.0rem !important;
    line-height: 3.8rem !important;
}

h3 {
    /*border: 3px solid tomato;*/
    margin: 0 !important;
    font-size: 1.8rem !important;
    line-height: 2.2rem !important;
    font-weight: 100 !important;
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.header img {
    max-width: 252px;
}

.header .text-left {
    text-align: center !important;
}

#block-menuhp .logo img {
    height: 50px;
}

#block-menuhp {
    display: flex;
    padding: 10px 20px;
    border-radius: 10px;
}

.clear {
    clear: both;
}

p {
    font-size: 1.6rem !important;
    line-height: 2.2rem !important;
}

.texteCenter {
    text-align: center !important;
}

.texte {
    padding: 20px 0 !important;
}

a {
    font-size: 1.6rem !important;
    text-decoration: none !important;
}


ul {
    margin-top: 0px !important;
    margin-left: 20px !important;
}

ul li {
    list-style: disc !important;
    color: #ff4b33 !important;
    line-height: 2.5rem !important;
    margin-left: 20px !important;
    padding-top: 5px !important;
}

ul .texte {
    color: #222222 !important;
    font-size: 1.6rem !important;
}

.gras {
    font-weight: bold !important;
}

.texteNoir {
    color: #222222 !important;
}

.texteCorail {
    color: #ff4b33 !important;
}

.texteBlanc {
    color: #FFFFFF !important;
}

.texteBleuTurquoise {
    color: #5AD5D9 !important;
}

.texteViolet {
    color: #4B218E !important;
}

.texteVioletLight {
    color: #6D4CA7 !important;
}

.texteBleuFonce {
    color: #1A283E !important;
}

.texteBleuLight {
    color: #4283D1 !important;
}

.texteBleu {
    color: #FF4B33 !important;
    text-decoration: underline !important;
}

.texteVert {
    color: #006374 !important;
}

.center {
    text-align: center !important;
}

.etiquetteRoseChair {
    background: #F0B7A5 !important;
    border-radius: 8px !important;
    padding: 5px !important;
}

.etiquetteCorail {
    background: #FF4B33 !important;
    border-radius: 8px !important;
    padding: 5px !important;
    color: #FFFFFF !important;
}

.boutonCorail {
    color: #ffffff !important;
    border-radius: 50px !important;
    background-color: #ff4b33 !important;
    padding: 7px 20px !important;
    font-size: 1.7rem !important;

}

.boutonCorailPetit {
    color: #ffffff !important;
    border-radius: 50px !important;
    background-color: #ff4b33 !important;
    padding: 8px 15px !important;
    font-size: 1.4rem !important;

}

.boutonBlancPetit {
    color: #ff4b33 !important;
    border: #FF4B33 1px solid !important;
    border-radius: 50px !important;
    background-color: #ffffff !important;
    padding: 10px 15px !important;
    font-size: 1.5rem !important;
}


.imgCenter {
    display: block !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.fontSize12 {
    font-size: 1.2rem !important;
}

.fontSize13 {
    font-size: 1.3rem !important;
    line-height: 1.8rem !important;

}

.fontSize14 {
    font-size: 1.4rem !important;
    line-height: 2rem !important;

}

.fontSize15 {
    font-size: 1.5rem !important;

}

.fontSize17 {
    font-size: 1.7rem !important;
    line-height: 2.3rem !important;
}

.fontSize18 {
    font-size: 1.8rem !important;
    line-height: 2.4rem !important;
}

.fontSize20 {
    font-size: 2rem !important;
    line-height: 2.6rem !important;
}

.fontSize22 {
    font-size: 2.2rem !important;
}

.espace10 {
    margin-top: 10px !important;
}

.espace5 {
    margin-top: 5px !important;
}

.espace20 {
    margin-top: 20px !important;
}

.espace30 {
    margin-top: 30px !important;
}

.espace40 {
    margin-top: 40px !important;
}

.espace50 {
    margin-top: 50px !important;
}

.espace100 {
    margin-top: 100px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.P20 {
    padding: 20px !important;
}

.spacer {
    border-bottom: 1px solid #EDE8E6 !important;
}

.lien {
    color: blue !important;
    text-decoration: underline !important;
}

.underline {
    text-decoration: underline !important;
}

.encadreGris {
    border-radius: 8px !important;
    border: 2px solid #F2F2F2 !important;
    padding: 20px !important;
}

.AplatBleuClair {
    background: #5AD5D9 !important;
    padding: 5px 10px !important;
}

.AplatCorail {
    background: #FF4B33 !important;
    color: #FFFFFF !important;
    padding: 5px 10px !important;

}

.AplatBlanc {
    background: #FFFFFF !important;
    padding: 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

.AplatGris {
    background: #E3E3E3 !important;
    padding: 10px !important;
    border-radius: 8px !important;

}

.AplatVert {
    background: #006374 !important;
    padding: 10px !important;
}

.AplatBeige {
    background: #E4D8C4 !important;
    padding: 10px !important;
}

.contourVert {
    border: 1px solid #006374 !important;
    padding: 10px 0 0 0 !important;
}

.encadreViolet {
    background: #4B218E !important;
    padding: 5px 10px !important;
}

.encadreCorail {
    background: #FF4B33 !important;
    padding: 5px 10px !important;
}

/* CODE LP */


.flexContainer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;

}

.flexContainerPhoto {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;

}

.flexContainerDoc {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

}

.flexContainerLogo {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;

}

.logoMH {
    width: 100% !important;
    text-align: center !important;
}


.description {
    width: 80% !important;
    padding: 20px !important;
}

.texteDate {
    width: 20% !important;
    padding: 20px !important;
    align-content: center !important;
}


.texteDate p,
.cta {
    text-align: center !important;
}


.colIcone {
    width: 5% !important;
}

.colIcone img {
    width: 65% !important;
}

.colDoc {
    width: 95% !important;
}

.photos img {
    width: 100% !important;
}

.photos,
.photo {
    width: 100% !important;
    text-align: center !important;
}

.photo img {
    width: 60% !important;
}

.footer {
    padding-top: 50px !important;
}


.logos {
    width: 100% !important;

}

.appli {
    width: 20% !important;
    text-align: center !important;
}

.appli img {
    width: 80% !important;
    text-align: center !important;
}
.texteGauche {
    width: 80% !important;
}
.texteGauche p {
    padding-top: 20px !important;
}
.bandeau {
        width: 100% !important;
    text-align: center !important;
    }

.bandeau img {
    width: 50% !important;
}

/* MEDIAS QUERIES */
@media only screen and (max-width: 450px) {

    h1 {
        font-size: 2.2rem !important;
        line-height: 2.8rem !important;
    }

    h2 {
        font-size: 2.0rem !important;
        line-height: 2.6rem !important;
    }

    h3 {
        font-size: 1.8rem !important;
        line-height: 2.4rem !important;
    }

    p .fontSize18 {
        font-size: 1.6rem !important;
    }

    .hide {
        display: none !important;
    }

    .show {
        display: block !important;
    }

    .espace50 {
        margin-top: 30px !important;
    }

    .intro {
        padding: 0 20px !important;
    }


    .flexContainer {
        flex-direction: column !important;
        width: 100% !important;

    }

    .flexContainerPhoto {
        display: flex !important;
        flex-direction: row !important;


    }

    .flexContainerDoc {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

    }

    .flexContainerLogo {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;

    }

    .logoMH {
        width: 100% !important;
        text-align: center !important;
    }


    .description {
        width: 100% !important;
        padding: 20px !important;
    }

    .texteDate {
        width: 100% !important;
        padding: 20px !important;
        align-content: center !important;
    }
    .appli {
    width: 100% !important;
    text-align: center !important;
}

.appli img {
    width: 50% !important;
    text-align: center !important;
}
.texteGauche {
    width: 100% !important;
}
.texteGauche p {
    padding-top: 20px !important;
}
    .bandeau img {
        width: 100% !important;
    }
    .photo img{
        width: 50% !important;
    }

}

@media screen and (min-width: 1280px) {

    h1,
    h1 span {
        font-size: 42px !important;
    }

    .header {
        display: flex !important;
        flex-direction: row;
    }
    
}

@media only screen and (max-width: 750px) {
    h1 {
        font-size: 2.2rem !important;
        line-height: 2.8rem !important;
    }

    h2 {
        font-size: 2.0rem !important;
        line-height: 2.6rem !important;
    }

    h3 {
        font-size: 1.8rem !important;
        line-height: 2.4rem !important;
    }

    .hide {
        display: none !important;
    }

    .show {
        display: block !important;
    }

    .espace50 {
        margin-top: 30px !important;
    }

    .intro {
        padding: 0 20px !important;
    }
     .flexContainer {
        flex-direction: column !important;
        width: 100% !important;

    }

    .flexContainerPhoto {
        display: flex !important;
        flex-direction: row !important;


    }

    .flexContainerDoc {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

    }

    .flexContainerLogo {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;

    }

    .logoMH {
        width: 100% !important;
        text-align: center !important;
    }


    .description {
        width: 100% !important;
        padding: 20px !important;
    }

    .texteDate {
        width: 100% !important;
        padding: 20px !important;
        align-content: center !important;
    }

    .texteDate {
        margin-top: 20px !important;
    }
    .appli {
    width: 100% !important;
    text-align: center !important;
}

.appli img {
    width: 20% !important;
    text-align: center !important;
}
.texteGauche {
    width: 100% !important;
}
.texteGauche p {
    padding-top: 20px !important;
}
    .logos {
        text-align: center !important;
    }
    .bandeau img {
        width: 100% !important;
    }
     .photo img {
        width: 30% !important;
    }
    .photos img {
        width: 60% !important;
    }
   
}