* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "Noto Serif Display";
    src: url("police/NotoSerifDisplay-ExtraCondensed.ttf");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "Crimson Pro";
    src: url("police/CrimsonPro.ttf");
    font-weight: normal;
    font-style: normal;
}

html {
    font-family: "Crimson Pro";
    font-size: 16px;
    background-color: #013927;
    color: white;
}

/*-----------------  Titre  ------------------*/

h1 {
    font-family: "Noto Serif Display";
    font-size: 45px;
}

h2 {
    font-family: "Noto Serif Display";
    font-size: 35px;
}

h3 {
    font-family: "Noto Serif Display";
    /* font-size: 25px; */
}


/*============================================================================================
=                                    CORPS DE PAGE                                           =
=============================================================================================*/

/*========================================================================
=                              En-tête                                   =
=========================================================================*/

/*-----------------  Logo  ------------------*/

.logo-fleur {
    display: flex;
    justify-content: space-between;
}

.image-fleur-1 img {
    padding: 10px;
}

.logo {
    padding: 10px;
    text-align: center;
}

.image-fleur-2 img {
    padding: 10px;
}

.titre-principale h1 {
    text-align: center;
}

/*========================================================================
=                         Contenu principal                              =
=========================================================================*/

/*=============================================================
=                      Section A propos                       =
==============================================================*/

#apropos {
    display: flex;
    padding-top: 1%;
    padding-left: 10%;
    padding-right: 10%;
}

/*-----------------  Image  ------------------*/

.apropos-image {
    padding: 20px;
}

.apropos-image img {
    /* max-width: 100%; */
    width: 300px;
    height: 300px;
}

/*-----------------  Texte  ------------------*/

.apropos-texte {
    padding: 10px;
    padding-left: 5%;
    text-align: justify;
}

.apropos-texte p {
    padding-top: 2%;
}

/*=============================================================
=                     Section Notre mission                   =
==============================================================*/

#mission {
    display: flex;
    padding-top: 1%;
    padding-left: 10%;
    padding-right: 10%;
}

/*-----------------  Texte  ------------------*/

.mission-texte {
    padding: 10px;
    padding-right: 5%;
    text-align: justify;
}

.mission-texte p {
    padding-top: 2%;
}

/*-----------------  Image  ------------------*/

.mission-image {
    padding: 20px;
}

.mission-image img {
    /* max-width: 100%; */
    width: 250px;
    height: 350px;
}

/*====================================================================
=                     Section Approche complète                      =
=====================================================================*/

.approche-titre h2 {
    text-align: center;
    padding: 10px;
}

.approche-ensemble {
    display: flex;
    padding: 20px;
    justify-content: space-around;
    text-align: center;
}


/*====================================================================
=                         Section Footer                             =
=====================================================================*/


/*-----------------  Footer  ------------------*/

footer {
    display: none;
    /*Caché par défaut*/

}



/*==============================================================================================
=                                         MEDIAS QUERIES                                       =
===============================================================================================*/

/*-------------------  Ecran maximum à 1000px ----------------*/

@media only screen and (max-width: 1000px) {

    /*-----------------  Titre  ------------------*/

    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 25px;
    }

    /*-----------------  Texte  ------------------*/

    p {
        font-size: 14px;
    }

    /*========================================================================
    =                              En-tête                                   =
    =========================================================================*/

    /*-----------------  Logo  ------------------*/

    .image-fleur-1 img {
        width: 80%;
    }

    .image-fleur-2 img {
        width: 80%;
        padding-left: 10%;
    }

}

/*-----------------  Ecran maximum à 750px -------------------*/

@media only screen and (max-width: 750px) {

    /*-----------------  Titre  ------------------*/

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 15px;
    }

    /*========================================================================
    =                              En-tête                                   =
    =========================================================================*/

    /*-----------------  Logo  ------------------*/

    .image-fleur-1 img {
        width: 60%;
    }

    .image-fleur-2 img {
        width: 60%;
        padding-left: 30%;
    }


    /*====================================================
    =                  Section A propos                  =
    =====================================================*/

    #apropos {
        flex-direction: column-reverse;
        text-align: center;
    }


    /*====================================================
    =                  Section Notre mission             =
    =====================================================*/

    #mission {
        flex-direction: column;
        text-align: center;
    }

    /*=====================================================
    =               Section Approche complète             =
    ======================================================*/

    .approche-image img {
        max-width: 90%;
    }

}

/*-----------------  Ecran maximum à 450px -------------------*/

@media only screen and (max-width: 450px) {

    /*-----------------  Titre  ------------------*/

    h1 {
        font-size: 25px;
    }


    /*========================================================================
    =                              En-tête                                   =
    =========================================================================*/

    /*====================================================
    =                  Section A propos                  =
    =====================================================*/

    .apropos-image img {
        max-width: 100%;
    }

    /*====================================================
    =                  Section Notre mission             =
    =====================================================*/

    .mission-image img {
        max-width: 100%;
    }

}