@font-face{
	font-family: 'Roboto' ;
	src: url('Roboto-Regular.ttf') format('truetype')
}

body { 
    font-family:sans-serif ;
    margin : 0  ;
    margin-right : 2% ; 
    padding : 0  ;
    font-weight : 100 ; 
}
h3  {
    font-weight : 100 ; 

}
img { 
    max-width : 100% ; 
}

.entête { 
    display : flex ; 
    flex-direction : row ; 
}
.entête_txt { 
    display : flex ; 
    flex-direction : row ; 
    margin-left :  30% ; 
    cursor : pointer ;
    margin-top : 3% ;
    margin-bottom : 3% ;  
    font-weight: 100;
}
.entête_titre { 
    font-size : 12px ; 
    font-weight: 100;
}
.logo { 
    display : flex ; 
    flex-direction: column ; 
}
.logo_site { 
    width : 70% ; 
    height : 90% ; 
    margin-left: 110% ;  
}
.entête1 { 
    display : flex ; 
    flex-direction : column ;
    margin-right : 19% ;
    color : rgb(0,250,0);  
}
.entête2 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : 19% ;
}
.entête3 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : 19% ;
}
.entête4 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : 19% ;
}
.entête5 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : 19% ;
}
.entête6 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : 19% ;
}
.entête7 { 
    display : flex ; 
    flex-direction : column ; 
}







.bloc1 { 
    background-image : url('bg-1.jpg'); 
    width : 100% ; 
    height : 100% ; 
    background-size : cover ; 
    display : flex ;
    margin-bottom : 5% ; 
}
.paragraph {
	
	position:absolute; 
    margin-left : 15% ; 
    margin-top: 5%;
	color : white ; 
    font-weight : 100 ; 
} 
.conteneur1{
    position:relative;
}
.picture{
    position:absolute;
}
.paragraph_texte{
    font-family: 'Roboto';
    color: white;
    font-size : 30px;  
    line-height :40px; 
    text-align : left ;
    font-weight : lighter ; 
    font-weight : 100  ;

}
.paragraph_titre{
    font-weight: 100;
    font-size:150px;
    margin-bottom: 2%;
    margin-top: 0px;
    text-align : left ; 

}


.ajuste-png{
	position : absolute ; 
    width : 5% ; 
    height : 14%;  
    margin-left : 35% ; 
    margin-top : 3% ; 
}

.ajuste-png2 {
	background-color : none ; 
	margin-left : 1300px ; 
	margin-bottom : 200% ; 
	position : absolute ; 
}
.fleched{
    display : none ; 
    background-color: black;
    color:white;
    height: 50px;
    width: 50px;
    float: left;
    margin-left: 5%;
}
.flecheg {
    display : none  ;
	background-color : black ; 
	color : white ; 
	height : 50px ; 
	width : 50px ; 
	float : left ; 
	margin-left : 5% ; 
	margin-top : 5% ; 
}

  






.bloc2 { 
    display : flex ;
    flex-direction : row ;
    margin-bottom : 10% ; 

}
p{ color : white ; 
    text-align : center ; 
    font-family :'Roboto' , sans-serif ; 
    font-size : 40px ;
}
.texte_bloc2 { 
    font-size : 35px ; 
    font-weight : 100 ; 
}
.c_logo_bloc2 { 
    margin-top : 10% ; 
    margin-left : 30% ;
} 
.logo1_bloc2 { 
    width : 65% ; 
    height : auto ; 
}
.logo2_bloc2 { 
    width : 55%  ; 
    height : auto ; 
    margin-left : auto ; 
}
.logo3_bloc2 { 
    width : 60% ; 
    height : auto ; 
}
.logo4_bloc2 { 
    width : 65% ; 
    height : auto ; 
}
.grandconteneur { 
     margin-left : auto ; 
    margin-right : auto ; 
    margin-top : 3% ; 
    display : flex ; 
    flex-direction : row ; 
} 
.conteneur1_bloc2 { 
    height : 500px ; 
    width : 300px ;  
    margin-left : auto ; 
    margin-right: 5%; 
    display : flex ; 
    flex-direction : column ;  
} 
.conteneur2_bloc2 { 
    height : 500px ; 
    width : 300px ;
    margin-left : auto ; 
    margin-right:5% ; 
    display : flex ; 
    flex-direction : column ;  
} 

.conteneur3_bloc2 { 
    height : 500px ; 
    width : 300px ;
    margin-left : auto ; 
    margin-right: 5%  ; 
    display : flex ; 
    flex-direction : column ; 
}     
    .conteneur4_bloc2 { 
    height : 500px ; 
    width : 300px ;
    margin-right : auto ; 
    margin-left :auto  ; 
    display : flex; 
    flex-direction : column ; 
    }
    
    .sousconteneur11 {  
    margin-top: -5.5% ; 
    width :100%  ; 
    height: 50% ; 
    background: rgb(56,150,189);
    background: linear-gradient(45deg, rgb(77,169,190) 16%, rgb(87,212,232) 63%, rgb(103,207,230) 100%);
    margin-left: auto ;
    margin-right: auto ;
    } 
    .sousconteneur21{
    margin-top: -5.5% ; 
    width : 100% ; 
    height : 50% ; 
    background: linear-gradient(45deg, rgba(103,223,222,1) 26%, rgba(98,224,210,1) 54%, rgba(100,227,184,1) 100%);
    margin-left: auto ; 
    margin-right : auto ; 
    }
    .sousconteneur31 { 
        width : 100% ; 
        height : 50% ; 
        background: linear-gradient(45deg, rgb(86,226,179,1) 26%, rgb(117,224,156,1) 68%, rgb(128,225,132,1) 100%);
        margin-left: auto ;
        margin-right: auto ;
        margin-top: -5.5% ; 
    }
    .sousconteneur41 { 
        width : 100% ; 
        height : 50% ; 
        background: linear-gradient(45deg, rgb(138,222,134,1) 26%, rgb(133,235,125,1) 68%, rgb(191,246,116,1) 100%);
        margin-left: auto ;
        margin-right: auto ;
        margin-top: -5.5% ; 
    }
    .sousconteneur12 { 
        background-image : url('imagedechets.webp'); 
        background-size : cover ; 
        height : 50% ; 
    
    }
    .sousconteneur22 { 
        background-image : url('herbe.jpg'); 
        background-size : cover ;
        height : 50% ;
    }
    .sousconteneur32 { 
        background-image : url('fille.jpeg'); 
        background-size : cover ; 
        height : 50% ; 
    }
    .sousconteneur42 { 
        background-image : url('photo_4_bloc_colo.jpg');
        background-size : cover ; 
        height : 50% ; 
    }








.bloc3 { 
    margin-bottom : 10% ; 
}


.txtbloc3 {
    color : grey ; 
    font-size : 15px ; 
}
.titre_boîte2 { 
    display : flex ; 
    flex-direction : row  ; 
}
.b1{
    font-size : 50px ; 
}
.b2_1 { 
    color : rgb(170,170,170)  ;
    display : flex;  
    flex-direction:  column ; 
    font-size:  50px ; 
}
.b2 { 
    display : flex ; 
    flex-direction : column;
    font-size : 50px ;   
}
.b3 { 
    font-size : 50px  ;
}
.b4 { 
    text-align : center ;
    font-size : 50px ; 
} 

.grandconteneur_bloc3 {
        display : flex ; 
        flex-direction : row ;  
        margin-top : 5% ; 
        margin-left : 5% ; 
        margin-right :5% ; 
} 
.titrebloc3 { 
        text-align : center ; 
        font-weight: 100; 
        color : rgb(15,15,15); 
        font-size : 40px ;
}
.txtbloc3 { 
        color : rgb(150,150,150) ; 
        line-height: 15px;
}
.boîte1 { 
    display : flex ; 
    flex-direction : column ; 
    margin-left : auto ; 
    margin-right : 10% ; 
    line-height : 1px ; 
} 
    
.boîte2 { 
    display : flex ; 
    flex-direction : column ; 
    margin-left : auto ; 
    margin-right : 10% ; 
    line-height : 1px ; 
} 
    
.boîte3 { 
    display : flex ; 
    flex-direction : column ; 
    position : left ; 
    margin-left : auto ; 
    margin-right : 10% ; 
    line-height : 1px ; 
 } 
    
.boîte4 { 
    display : flex; 
    flex-direction : column ; 
    position : right ; 
    margin-left : auto ; 
    margin-right : auto ; 
    line-height : 1px ; 
} 
.logo1_bloc3 { 
    display : flex ;
    flex-direction : column ; 
}
.logo3_bloc3 { 
    display : flex ;
    flex-direction : column ; 
    margin-bottom : 5% ;
}
    .ajuste_png_bloc3 { 
        
        display : flex; 
    flex-direction : column ; 
    }
    .ajuste_png2_bloc3 { 
        display : flex; 
        flex-direction : column ; 
    }
    
    .ajuste_png3_bloc3 { 
        display : flex; 
        flex-direction : column ; 
    }
    .ajuste_png4_bloc3 { 
        display : flex; 
        flex-direction : column ; 
        width : 5% ; 
    }
    .b1 { 
    color : rgb(89,200,228); 
    }
    .b2 { 
    color : rgb(97, 227, 193); 
    } 
    
    .b3 { 
    color : rgb(124, 247, 144); 
    }
    
    .b4 { 
    color : rgb(183, 242, 114); 
    } 
.button_bloc3 { 
    background-color : rgb(0, 191, 127); 
    color : white; 
    border-radius : 20px  20px 20px  20px  ; 
    background-color : rgb(0, 191, 127); 
    padding: 1% ; 
    font-size : 13px  ; 
    border : 30px ; 
    cursor : pointer;
    margin-left : auto ; 
    margin-right : auto ; 
    width : 100px ; 
    animation-name : Bouton ; 
    animation-duration : 1s ; 
    } 
.button_bloc3:hover { 
    opacity : 0.5 ; 
}
.texterepris {
    margin-top : 2% ; 
    line-height : 30px ;  
    font-size  :15px ; 
    color: rgb(160,160,160) ; 
}
button { 
    background-color : rgb(0, 191, 127); 
    color : white; 
    border-radius : 20px  20px 20px  20px  ; 
    background-color : rgb(0, 191, 127); 
    padding: 1% ; 
    font-size : 18px  ; 
    border : 30px ; 
    animation-name  : Bouton ; 
    animation-duration : 1s ; 
    cursor : pointer;
    } 
    @keyframes Bouton { 
        from {opacity : 5}; 
        to { opacity : 0.1}; 
}














.bloc6 { 
    background-image : url('sky.jpg');  
    height : 100%  ;
    position : relative ; 
}  
.titrebloc6 { 
    margin-right : auto; 
    margin-left : auto ; 
    color : white ; 
    font-size:  30px ; 
    font-weight : 100 ;
}
.conteneur { 
    width : 75% ;
    height : 75% ; 
    background-image : red ; 
    margin-right: auto ;
    margin-left:  auto ;  
}

.ligne1 { 
    display : flex ; 
    flex-direction: row ; 
    width : 100% ; 
    height : 50% ; 
    margin-top : 0 ; 
    margin-right : auto ; 
    margin-left : auto ; 
    
}

.colonne1_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    width :100% ; 
    height : 100%; 
    margin-left : auto ; 
    margin-right : auto ;
}
.colonne2_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    margin-left : auto ; 
    margin-right : auto ;
    width :100% ; 
    height : 100%; 

}
.colonne3_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    margin-left : auto ; 
    margin-right : auto ;
    width :100% ; 
    height : 100%;  

}
.colonne4_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    margin-left : auto ; 
    margin-right : auto ;
    width :100% ; 
    height : 100%; 

}
.option_bloc6 { 
    display : flex ; 
    flex-direction : row ; 
}
.option_bloc6:hover { 
    opacity : 1  ;
}
.fondu {   
    display : inline-flex;  
    background-color : black ;
    width : 100% ;  
    height : 91.5% ; 
    opacity :1 ; 
}

.option1_bloc6 { 
    margin-top : 11%  ;
    opacity : 0 ; 
    display : flex ;
    flex-direction : column ; 
    color : black ; 
}
.option1_bloc6:hover { 
    opacity : 1 ; 
    font-size : 5px ; 

}
.separation { 
    display : none ; 
    width : 100% ; 
    height : 100% ;
}
.img_options { 
    display : flex ; 
    flex-direction : column ;   
    background-color : white ;   
    width : 20% ; 
    height :  100% ; 
    margin-left : 20%  ;
    border-radius : 5px ; 
} 
.titre_option { 
    font-size : 20px ; 
    color : black ;
    font-weight : 100 ; 
}
.texte_option { 
    display : inline ; 
    color :  lightgreen ; 
    font-size : 10px ; 
}
.img_options:hover {
    opacity : 1 ;  
}
.mots_options { 
    margin-top : 24% ; 
    display : inline ; 
    background-color : white ; 
}
.mots_options:hover  { 
    background-color : white ; 
    opacity : 1 ; 
}
.case1_bloc6 { 
    display  :flex ; 
    flex-direction : column ;
    background-image : url('illustration1.jpg'); 
    background-size : cover ; 
    width :100% ; 
    height :100% ; 
    cursor : pointer ; 
} 
.case2_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    background-image : url('illustration2.jpg'); 
    background-size : cover ; 
    width : 100% ; 
    height : 100% ; 
}
.case3_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    background-image : url('illustration3.jpg'); 
    background-size : cover ; 
    width : 100% ; 
    height : 100% ; 
}
.case4_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    background-image : url('illustration4.jpg'); 
    background-size : cover ; 
    width : 100% ; 
    height : 100% ;
}

.ligne2 { 
    display : flex ; 
    flex-direction: row ; 
    width : 100% ; 
    height : 50% ; 
    margin-top : 0; 
    margin-right : auto ; 
    margin-left : auto ;    
}
.case5_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    background-image : url('Illustration_5.png'); 
    background-size : cover ; 
    width : 100% ; 
    height : 100% ;  
    
}
.case6_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    background-image : url('Illustration6.png'); 
    background-size : cover ; 
    width : 100% ; 
    height : 100% ; 
}
.case7_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    background-image : url('Illustration7.png'); 
    background-size : cover ; 
    width : 100% ; 
    height : 100% ; 
}
.case8_bloc6 { 
    display : flex ; 
    flex-direction : column ; 
    background-image : url('Illustration8.png'); 
    background-size : cover ; 
    width : 100% ; 
    height : 100% ; 
}
.case1_bloc6:hover { 
    opacity : 0.8 ; 
}
.case2_bloc6:hover { 
    opacity : 0.8 ; 
}
.case3_bloc6:hover { 
    opacity : 0.8 ; 
}
.case4_bloc6:hover { 
    opacity : 0.8 ;  
}
.case5_bloc6:hover { 
    opacity : 0.8 ; 
}
.case6_bloc6:hover { 
    opacity : 0.8 ; 
}
.case7_bloc6:hover { 
    opacity : 0.8 ; 
}
.case8_bloc6:hover { 
    opacity : 0.8 ; 
}










.rectangle { 
    position :absolute ; 
    width :15%; 
    height : 30% ; 
    border-right : solid 1px grey ;
    border-left : solid 1px grey ;
    margin-left: 42% ;
    margin-top : 3% ;  
}
.titre_mission { 
    text-align : center  ; 
    font-weight : 100 ;
}
.Our_Mission { 
    display : flex ;
    flex-direction: row ;  
    position : relative ; 
}
.logo1_mission { 
    position : absolute ; 
    width : 5%; 
    height :auto ; 
    margin-left : 40% ; 
    border : solid 1px grey ; 
    border-radius :120px / 120px ; 
    background-color : white ; 
}
.logo2_mission { 
    padding : 0.5% ; 
    position : absolute ; 
    width : 4% ; 
    height : auto ; 
    margin-left : 55.5% ; 
    border : solid 1px grey ; 
    border-radius :120px / 120px ; 
    background-color : white ; 
}
.logo3_mission {  
    position : absolute ; 
    width : 4% ; 
    height : 20%; 
    padding : 0.5% ;
    border : solid 1px grey ; 
    border-radius :120px/120px ; 
    background-color : white ; 
    margin-top: 15% ; 
    margin-left : 40.3% ;
}
.logo4_mission { 
    position : absolute ; 
    width : 4% ; 
    height : 20%; 
    padding : 0.5% ;
    border : solid 1px grey ; 
    border-radius :120px/120px ; 
    background-color : white ; 
    margin-top: 15% ; 
    margin-left : 55.5% ;
}
.titre_mission1 { 
    color : black ; 
    text-align : right ; 
    font-size : 25px ;
    font-weight  :100 ; 
}
.titremission3 {
    color : black ; 
    text-align : left ; 
    font-size : 25px ; 
    font-weight  :100 ; 
}
.texte_mission1 {
    color : black;
    text-align : left ; 
    font-size : 12px ; 
}
.texte_mission {
    color: black ; 
    text-align : left ;  
    font-size : 12px ; 
}
.mission_colonne1 { 
    display : flex  ;
    flex-direction : column ;
    margin-right : 20% ; 
    margin-left : auto ;  
}
.mission_colonne2 { 
    display : flex;
    flex-direction : column;  
    margin-right : auto ; 
    margin-left : auto ; 
}
.Ecology_Today { 
    display : block ; 
    margin-bottom : 9% ;
}
.Dynamic_Ecology { 
    display : block  ; 
}
.Plant_Ecology { 
    display: block ; 
    margin-bottom : 15% ; 
}

.RecyclingRubbish { 
    display : block ;   
}











.bloc4 { 
    margin-top : 10% ; 
    display  :block ; 
}
.fleches_bloc4 { 
    display : flex ; 
    flex-direction : row ; 
    margin-left : 90% ;
    cursor : pointer ; 
}
.fleche_gauche { 
    display : flex ; 
    flex-direction : column ; 
    width : 30px ; 
    height  :30px ; 
    border : solid 1px grey ; 
    border-radius : 120px ; 
    margin-right : 10% ;
    cursor : pointer ; 
}
.fleche_droite { 
    display : flex ; 
    flex-direction : column ; 
    width : 30px ; 
    height  :30px ;
    border : solid 1px grey ; 
    border-radius : 120px ;  
}
.titre { 
    text-align : center ; 
    font-size : 35px ; 
    font-weight  :100 ; 
}

.grandecase{ 
    display : flex ; 
    flex-direction : row ;  
    margin-top : 5% ;
    margin-right : auto ; 
    margin-left : 5% ; 
    width : 90% ; 
}
.titrebloc4 { 
    font-size : 20px ; 
    text-align : left ;
    font-weight  :100 ; 
    margin-left : 5% ; 
}
.imgbloc4 { 
    height : 50% ; 
    width : 100% ; 
    border-radius:  2px /2px ; 
    border-bottom : none ; 
}

.case1 { 
    display : flex ; 
    margin-left : auto ; 
    flex-direction : column ; 
    border : solid  1px rgb(190,190,190) ;
    border-radius : 2px / 2px ; 
    margin-right : 5% ; 
    width :100% ; 
    height : 100% ;
}

.case2 { 
    display : flex ; 
    flex-direction : column ; 
    border : solid  1px rgb(190,190,190) ;
    margin-right : 5% ; 
    border-radius : 2px / 2px ; 
    width : 100% ; 
    height : 100% ;
}


.case3 { 
    display : flex ; 
    flex-direction : column ; 
    border : solid  1px rgb(190,190,190) ;
    margin-right : 5% ; 
    border-radius : 2px / 2px ; 
    width : 100% ; 
    height : 100% ;
}

.case4  { 
    display : flex ; 
    flex-direction : column ; 
    border : solid  1px rgb(190,190,190) ;
    width : 100% ; 
    border-radius : 2px / 2px ; 
    height : 100% ;
}
.souscase1_3 { 
    display : flex ; 
    flex-direction : row ; 
    border-top : 0 ; 
    border : solid  1px rgb(190,190,190) ;
    border-bottom : 0 ; 
    background-color : white ; 
    border-radius : 2px / 2px ; 
    
}
.souscase2_1 { 
    display : inline ; 
}

.souscase4 { 
    display : flex ; 
    flex-direction: row;
    margin-left : 33% ;     

}

.souscase2_3 { 
    display : flex ; 
    flex-direction :row ; 
    border : solid  1px rgb(190,190,190) ;
    border-bottom : 0 ; 
    background-color : white  ;
    border-radius : 2px / 2px ; 
}

.souscase3_3 { 
    display : flex ; 
    flex-direction : row ; 
    border : solid  1px rgb(190,190,190) ;
    border-bottom : 0 ; 
    border-radius : 2px / 2px ; 
}
.souscase4_3 { 
    display : flex ; 
    flex-direction : row ; 
    border : solid  1px rgb(190,190,190) ;
    border-bottom : 0 ; 
    border-right : 0 ; 
    border-left : 0 ; 
    border-radius : 2px / 2px ; 
}
.soustitre_case1 { 
    display : flex ; 
    flex-direction : row ;
    font-size : 10px ;  
}
.soustitre_case2 { 
    display : flex ; 
    flex-direction : row ;
    font-size : 10px ;   
    margin-left : 5% ; 
}
.soustitre_1 { 
    display : flex ; 
    flex-direction : row ;
    font-size : 10px ;   
    margin-left : 5% ; 
}
.soustitre_case3 { 
    display : flex ; 
    flex-direction : row ; 
    font-size : 10px ; 
}
.soustitre_case4 { 
    display : flex ; 
    flex-direction : row ;
    font-size : 10px ; 
}
.soustitre1_case1 { 
    display : flex ; 
    flex-direction : column ;
    text-align : right; 
    font-size : 10px ;  
}
.soustitre2_case1 {
    display : flex ; 
    flex-direction  : column ; 
    color : lightgreen ; 
    margin-left : 2% ; 
    font-size : 10px ; 
}
.soustitre1_case2 { 
    display : flex ; 
    flex-direction : column ;
    font-size : 10px ;  
}
.soustitre2_case2 {
    display : flex ; 
    flex-direction  : column ; 
    color : lightgreen ; 
    margin-left : 2% ; 
    font-size : 10px ; 
}
.soustitre1_case3 { 
    display : flex ; 
    flex-direction : column ;
    text-align : right; 
    font-size : 10px ;  
}
.soustitre2_case3 {
    display : flex ; 
    flex-direction  : column ; 
    color : lightgreen ; 
    margin-left : 2% ; 
    font-size : 10px ; 
}
.soustitre1_case4 { 
    display : flex ; 
    flex-direction : column ;
    text-align : right; 
    font-size : 10px ;  
}
.soustitre2_case4 {
    display : flex ; 
    flex-direction  : column ; 
    color : lightgreen ; 
    margin-left : 2% ; 
    font-size : 10px ; 
}
.icone { 
    height : 20px; 
    width :20px ; 
    margin-left : 2% ; 
    margin-top : 2% ; 
}
.icone2 { 
    height : 20px ; 
    width : 20px ; 
    margin-left : 5% ; 
    margin-top : 10% ; 
}
.chifre_bloc4 {
    font-size : 10px ; 
    color : black ;
    margin-left : 5% ; 
}
.chiffre_bloc4 { 
    font-size :10px;  
    color : black ;
    margin-bottom : 1% ;
}
.chiffre2_bloc4 { 
    font-size : 10px;  
    color : black ;
    margin-bottom : 1% ;
    margin-left : 10% ; 
    margin-right : 1% ; 
}












.bloc5{ 
    margin-top : 20%; 
    display : flex ;  
    flex-direction : row ; 
    margin-bottom : 5% ; 
    margin-left : auto ; 
    margin-right : auto ; 
}
.bouton_bloc5 { 
    font-size : 15px ;
    padding : 5% ; 
    text-align : center ; 
    cursor : pointer ;
}
.bloc5_1 { 
    display : block ; 
    width :40% ;    
    height : 100% ;  
    margin-left : auto;
    margin-right  :auto ; 
}
.titrebloc5 { 
    font-size: 40px ; 
    font-weight : 100 ; 
}
.txtbloc5 { 
    font-size : 15px ; 
    text-align : left  ; 
    margin-left : 5% ; 
}
.chiffrebloc5 { 
    font-size:  15px;  
    margin-right: 10% ; 
}
.barre1 { 
    display : flex ; 
    flex-direction : row ;
    margin-bottom : 2% ; 
}
.sousbarre1_1 { 
    display : inline ; 
    width : 78% ; 
    background-color : rgb(87, 203, 226);  
}
.sousbarre1_2 { 
    display : inline ; 
     margin-right : 10% ;
    background-color : rgb(87, 203, 226);  
}
.barre2 { 
    display : flex ;
    flex-direction : row ;
   margin-bottom : 2% ; 
}
.sousbarre2_1 { 
    display : inline ; 
    width : 73% ;  
    background-color : rgb(99, 224, 194);  
}
.sousbarre2_2 { 
    display : inline ; 
    background-color : rgb(99, 224, 194); 
    
}
.barre3 { 
    display : flex ; 
    flex-direction : row ; 
    margin-bottom : 2% ; 
}
.sousbarre3_1 { 
    display : inline; 
    width : 92% ; 
    background-color : rgb(127, 224, 145); 
}
.sousbarre3_2 { 
    display : inline ; 
    background-color : rgb(127, 224, 145); 
}
.barre4 { 
    display : flex ; 
    flex-direction : row ; 
    margin-bottom : 2% ; 
}
.sousbarre4_1 { 
    display : inline ; 
    width : 88% ; 
    background-color : rgb(131, 232, 0);
}
.sousbarre4_2 { 
    display : inline ; 
    background-color : rgb(131, 232, 0);
}
.barre5 { 
    display : flex ; 
    flex-direction : row ; 
    margin-bottom : 2%  ;
}
.sousbarre5_1 { 
    display : inline ; 
    width : 78% ; 
    background-color : rgb(201,239, 94); 
}
.sousbarre5_2 { 
    display : inline ; 
    background-color : rgb(201,239, 94); 
}
p{ 
    color : rgb(255,255,255) ; 
}


.bloc5_2 { 
    display : inline; 
    width : 40% ;
    margin-right : auto;  
    margin-left :auto ; 
}

.grandconteneur_bloc52  { 
    display : block ; 
    flex-direction: inline ;
}

.hautconteneur { 
    display : flex ; 
    flex-direction : row ;    
}
.conteneurhg { 
    display : inline ; 
}
.case1_bloc52 { 
    display : flex ; 
    flex-direction : column ; 
    border : solid 1px grey ;
    width : 30% ; 
}
.case1_bloc52:hover { 
    background-color : rgb(87,203,226); 
    color : white ; 
}
.case2_bloc52 { 
    display : flex ; 
    flex-direction : column ; 
    border : solid 1px grey; 
    width : 30% ; 
}
.case2_bloc52:hover { 
    background-color : rgb(87,203,226); 
    color : white ; 
}
.case3_bloc52 { 
    display : flex ; 
    flex-direction : column ; 
    border : solid 1px grey ;
    width : 30% ;  
}
.case3_bloc52:hover { 
    background-color : rgb(87,203,226); 
    color : white ; 
}
.basconteneur{ 
    display : flex ; 
    flex-direction :inline ; 
    border : solid 1px grey ;  
    width : 120% ; 
}

.texte_bloc52 { 
    font-size: 15px ; 
    line-height :20px ; 
    text-align :left ; 
    color : grey ;
    padding : 5% ; 
}












.fin_page { 
    display : flex ; 
    flex-direction : row ; 
    background-image : url('eau_fashon.jpg') ;
}

.colonne_fin1 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : auto ;
    margin-left : auto; 

}

.colonne_fin2 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : auto ; 
}

.colonne_fin3 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right : auto; 
}

.colonne_fin4 { 
    display : flex ; 
    flex-direction : column ; 
    margin-right :auto ;
}
.titre_fin{ 
    color : white ; 
    font-size : 20px ; 
    font-weight : 100 ; 
}
.texte_fin{ 
    color : white; 
    text-align : left ; 
    line-height : 30px ; 
    font-size: 12px ; 
    font-weight : 100 ; 
}





.sousfin{ 
    display : flex ; 
    flex-direction : row ; 
}
.div_textesousfin{ 
    display : flex ; 
    flex-direction : column ; 
    margin-left:  1% ; 
    width : 100% ; 
}
.texte_sousfin {  
    color : rgb(170,170,170); 
    font-size:  10px ; 
    width : 150% ; 
}
.ligne_logos_sousfin { 
    display : flex ; 
    flex-direction : row ;  
}
.logo1_sousfin { 
    display : flex ;
    flex-direction : column ; 
    height  :2% ;
    width : 2% ;
    margin-right : 1% ;
    margin-left : 70% ; 
    margin-top : 1% ;
}
.logo2_sousfin { 
    display : flex ;
    flex-direction : column ; 
    height  :2% ;
    width : 2% ;
    margin-right : 1% ;
    margin-top : 1% ;

}
.logo3_sousfin { 
    display : flex ;
    flex-direction : column ; 
    height  :2% ;
    width : 2% ;
    margin-top : 1% ;
}
.logo4_sousfin { 
    display : flex ;
    flex-direction : column ; 
    height  :4% ;
    width : 4% ;
    margin-top : 1% ;
}
.logo5_sousfin { 
    display : flex ;
    flex-direction : column ; 
    height  :2% ;
    width : 2% ;
    margin-right : 1% ;
    margin-top : 1% ;
}