body{
    margin: 0px;
}
.menu{
    display: flex;
    flex-direction: row;
    height: 100px;
    width: 100%;
}
.menu img{
    width: 95px;
    margin: auto auto auto 150px;
}
.onglets{
    display: flex;
    flex-direction: row;
    width: 50%;
    height: 100px;
    margin: auto;
}
.onglets a{
    margin: auto;
    text-decoration: none;
    color: black;
}

/* diaporama */
.diaporama{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 650px;
}
.diaporama .contenu{
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    top: 20%;
    left: 350px;
    width: 700px;
    height: 250px;
    color: white;
}
.contenu h1{
    font-size: 200px;
    margin-bottom: 0px;
}
.contenu h4{
    margin-top: 0px;
}
.contenu h2{
    margin-top: 50px;
    font-size: 80px;
}
.contenu p{
    text-align: right;
    font-size: 20px;
}
.contenu img{
    width: 60px;
    margin-bottom: 150px;
}

/* colonnes */
.colonnes{
    display: flex;
    flex-direction: row;
    margin: auto;
    width: 80%;
    height: 800px;
}
.unElement{
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 550px;
    margin: auto;
}
.unElement h5{
    color: white;
    margin: auto;
    font-size: 35px;
}
.unElement .logoC{
    width: 100px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 10px;
}
.unElement .image{
    width: 300px;
    height: 300px;
    margin-top: auto;
    margin-bottom: 0px;
}
.couleur2{
    background-image: linear-gradient(to right top, #6adede, #60ded5, #59deca, #57ddbe, #5adcb0);
}
.couleur1{
    background-image: linear-gradient(to right top, #56bed9, #57c6db, #5acedd, #60d6de, #68dede);
}
.couleur3{
    background-image: linear-gradient(to right top, #5adcb0, #63dda5, #6dde9a, #79df8e, #86df81);
}
.couleur4{
    background-image: linear-gradient(to right top, #86df81, #95e57c, #a4ea77, #b4ef72, #c4f46d);
}

/* donation */
.donation{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 500px;
    margin-bottom: 100px;

}
.donation h1{
    margin: auto;
    margin-bottom: 50px;
    color: black;
}
.informations{
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 180px;
    margin: auto;
    margin-bottom: 0px;
    margin-top: 0px;
}
.unElementD{
    display: flex;
    flex-direction: row;
    width: 20%;
    height: 120px;
    margin: auto;
}
.Image_don{
    width: 50px;
    height: 50px;
}
.unElementD h2{
    font-size: 60px;
    line-height: 30px;
    margin-left: 10px;
    margin-top: 5px;
}
.unElementD span{
    font-size: 15px;
    color: lightgray;
}
.unElementD .bleu1{
    color:rgb(74,192,219);
}
.unElementD .bleu2{
    color:rgb(170,243,97);
}
.unElementD .vert1{
    color:rgb(84,213,176);
}
.unElementD .vert2{
    color:rgb(190,240,76);
}
.donation p{
    width: 40%;
    margin: auto;
    font-size: 24px;
    text-align: center;
}
.btnrond{
    width: 150px;
    height: 50px;
    border-radius: 40px;
    margin: auto;
    background-color: green;
    text-align: center;
    color: white;
    line-height: 45px;
    text-decoration: none;
}

/* cubes */

.cubes{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 800px;
    background-image: url(Images/sky.jpg);
    background-size: cover;
}
.cubes h1{
    margin: auto;
    color: white;
}
.tableau{
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 600px;
    background-color: #56bed9;
    margin: auto;
}
.tableau .ligne_tableau{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 300px;
    background-color: #56d993;
}
.tableau .unElementT{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 25%;
    height: 300px;
    background-color: red;
    margin: auto;
    background-size: cover;
}
.unElementT img{
    z-index: 2;
    background-size: cover;
    width: 100%;
}
.unElementTS{display: none;}
.unElementT:hover .unElementTS{
    z-index: 8;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
}
#c1{
    background-image: url(Images/illustration3.jpg);
}
#c2{
    background-image: url(Images/illustration1.jpg);
}
#c3{
    background-image: url(Images/illustration4.jpg);
}
#c4{
    background-image: url(Images/illustration2.jpg);
}
#c5{
    background-image: url(Images/turtle.jpg);
}
#c6{
    background-image: url(Images/tigre.jpg);
}
#c7{
    background-image: url(Images/b_cube_7.jpg);
}
#c8{
    background-image: url(Images/mouette.jpg);
}
.unElementT:hover .filtre{
    position: absolute;
    z-index: 4;
    display: flex;
    width: 100%;
    height: 300px;
    background-color: gray;
    filter: opacity(0.6);
}
.contenantdeuxlogo{
    width: 40%;
    height: 20%;
    display: flex;
    flex-direction: row;
    margin-top:15%;
    margin-left: 30%;
}
.flexlogo{
    display: flex;
    flex-direction: row;
    width: 50px;
    height: 50px;
    margin-right: 5%;
    margin-left: 5%;
    border-radius: 10px;
    text-align: center;
    background-color: white;
}
.flexlogo img{
    width: 50px;
    border-radius: 10px;
}
.bas_petit{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 150px;
    margin-bottom:0%;
    margin-top:15%;
    background-color: white;
}
.texte_reproche{
    margin-bottom: 5px;
}
.couleur-vert{
    color: lightgreen;
}
.flextext_cube h4, .flextext_cube h3{
    margin-top: 10px;
    margin-left: 10px;
    font-size: 25px;
}

/* missions */


.colonne_mission{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 550px;
    margin-top: 5%;
    background-color: white;
}
.titre_miss{
    margin-left: auto;
    margin-right: auto;
    font-size:43px;
    text-align: center;
    background-color: white;
}
.englobe_123{
    display: flex;
    flex-direction: row;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 511.212px;
    background-color: white;
}
.flex_1_3{
    display: flex;
    flex-direction: column;
    width: 37%;
    height: 411.212px;
    margin-top: 5%;
    background-color: green;
}
.flex_2{
    display: flex;
    flex-direction: row;
    width: 25%;
    height: 411.212px;
    background-color: white;
}
.vertical-line{
    border-left: 2px solid lightgrey;
    display: block;
    height: 130px;
    margin: 0 20px;
    margin-left: 50%;
}
.cercle {
    width: 60%;
    height: 25%;
    border-radius: 90px;
    margin-left: 20%;
    background: white;
    border-style: solid;
    border-color: lightgray;
    border-width: 1px;
}
.separat_2{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 411.212px;
    margin-top: 25%;
    background-color: white;
}
.image_centre_miss{
    width: 40%;
    margin-left: 30%;
    margin-top: 23%;
}
.block_texte_miss{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50%;
    background-color: white;
}
.text_droit_miss{
    text-align: right;
    margin-bottom: 0%;
}
.text_gauche_miss{
    text-align: left;
    margin-bottom: 0%;
}
/*colonne avantage*/

.centretxtcont{
  margin-left: 20%;
  margin-top: 15px;
}
.colonne_avantage{
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 400px;
  margin-left: 5%;
}

.separation{
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 711.212px;
  margin-top: 2%;
}

.conteneur{
  margin-top: 15px;
  margin-left: 10%;
  display: flex;
  flex-direction: row;
}

.ptitcont{
  width: 150px;
  height: 50px;
  border-color: lightgrey;
  border-style: solid;
  border-width: 2px;
}

.bg_bleu{
  background-color: rgb(56, 148, 246);
  color : white;
}

.disp{
  display:none;
}

.flextext{
  display: flex;
  width: 90%;
  height: 210px;
  text-align: center;
  margin-left: 10%;
  border-color: lightgrey;
  border-style: solid;
  border-width: 2px;
}

.text_interne{
  width: 90%;
  height: 190px;
  margin-top: 5%;
  margin-left: 5%;
  margin-right: 10%;
}

.titre_avantage{
  margin-left: 10%;
  margin-bottom: 30px;
}

.minflex{
  display: flex;
  flex-direction: column;
  width: 40%;
  margin-top: 0px;
  margin-left: 10%;
}

.prog1{
  word-spacing:430px;
  margin-top: 20px;
  width: 178%;
  height: 45px;
  background-color: rgb(74,192,219);
  margin-bottom: 10px;
  font-size: x-large;
  color: white;
  border-radius: 3px;
}

.prog2{
  word-spacing:400px;
  width: 173%;
  height: 45px;
  background-color:rgb(84,213,176);
  margin-bottom: 10px;
  font-size: x-large;
  color: white;
  border-radius: 3px;
}

.prog3{
  word-spacing:480px;
  width: 192%;
  height: 45px;
  background-color: rgb(111,221,126);
  margin-bottom: 10px;
  font-size: x-large;
  color: white;
  border-radius: 3px;
}

.prog4{
  word-spacing:480px;
  width: 188%;
  height: 45px;
  background-color: rgb(170,243,97);
  margin-bottom: 10px;
  font-size: x-large;
  color: white;
  border-radius: 3px;
}
.prog5{
  word-spacing:430px;
  width: 178%;
  height: 45px;
  background-color: rgb(190,240,76);
  margin-bottom: 10px;
  font-size: x-large;
  color: white;
  border-radius: 3px;
}

.espacebordure{
  margin-left: 20px;
}




/*colonne latest*/

.titre_latest{
margin:auto;
  margin-top: 100px;
  font-size: 43px;
  text-align: center;
  width: 90%;
  display: flex;
  flex-direction: column;
}

.colonne_latest{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 680px;
}

.cont_petitflex{
  display: flex;
  width: 80%;
  flex-direction: row;
  margin:auto;
}

.petitflex{
  margin:auto;
  margin-top: 100px;
  width: 24%;
  height: 400px;
  border-style: solid;
  border-width: 1px;
  border-color: lightgrey;
}

.alignedroit{
  margin-left: 75%;
  margin-top: 0%;
}

.fleximglatest{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 240px;
}

.coverimg{
  width: 100%;
}

.logointextlatest{
  width: 25px;
  height: 25px;
}


.datelatest{
  margin-left: 5%;
  margin-right: 30%;
}

.espacecompteur{
  margin-left: 2%;
}

.flextextsousimg{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90px;
  border-bottom: 1px ;
  border-bottom-style: solid;
  border-color: lightgrey;
}

.textlateast{
  margin-top: 3%;
  margin-bottom: 2px;
  margin-left: 8%;
}

.soustextlateast{
  margin-top: 0px;
  margin-left: 8%;
}

.commentaire_latest{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
}
.commentaire_latest h6{
    margin-top: auto;
    margin-bottom: auto;
}




/*colonne contact etc */

.colonne_contact{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 400px;
  margin-top: 5%;
  background-image: url(Images/fond_avantderiner.webp);
  background-size: cover;
}

.blockdecontact{
  display: flex;
  flex-direction: column;
  width: 10%;
  height: 300px;
  margin-top: 50px;
  margin-bottom: 20px;
  margin-left: 11%;
  margin-right: 10px;
  color: white;
}

li{
  margin-bottom: 10px;
  margin-left: 10px;
}

.blockdecontact li:hover {
  color: green;
  cursor: pointer;
}




/* derniere colonne */

.derni{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 60px;
}

.li_style{
  list-style-image:url("img/fleche_sup_mo.png");
}

.flexcopyright{
  display: flex;
  flex-direction: row;
  width: 50%;
  margin-left: 120px;
  margin-top: auto;
  margin-bottom: auto;
  color:  lightslategray;
  font-size: 15px
}

.reseaux{
  display: flex;
  flex-direction: row;
  width: 50%;
  margin-left: 50%;
  color:  lightslategray;
  font-size: 15px;
}

.flexcopyright h6{
  margin-left: 10px;
}

.reseaux img{
  margin-top: 2%;
  width: 40px;
  height: 40px;
  padding: 2%;
}