@charset "utf-8";
/* CSS Document */

html {scroll-behavior: smooth;}

body {margin: 0;}


ul.topnav {
	position: fixed;
	width: 100%;
	top: 0;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: white;
	box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	
}

ul.topnav li {float: left;
}

ul.topnav li a {
    display: block;
    color: black;
    text-align: center;
    padding: 22px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #c8f4ea;}

ul.topnav li a.active {background-color: white;
padding: 0px 20px 0px 20px ;
margin-top: 5px}

ul.topnav li.right {float: right;}



header{
	position:static;
	top: 0px;
	left: 0;
	display: inline;
	overflow: hidden;
}

section{
	position:static;
	top: 0px;
	left: 0;
	display: inline;
	overflow: hidden;
}


.bloc1{
 background-color : white;
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display : flex;
  
  width : 100%;
  margin : 0;
}


.blocimage1{
 width : 50%;
 height : 100%;
	
}


.bloctexte1{
margin : 15% 8em 0 8em;
}

/*deuxième variante*/
.bloc2{
 background-color : #ee7402;
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display : flex;
  
  width : 100%;
  margin : 0;
}


.blocimage2{
 width : 50%;
 height : 100%;
float: left ;
	
	
}


.bloctexte2{
margin : 19% 9em 0 7em;
width : 50%;
}

.bloctexte3{
margin : 5% 2.5em 5% 0;
width : 100%;
}

.bloctexte4{
margin : 5% 2.5em 5% 0;
width : 100%;
}

.bloctexte5{
margin : 5% 2.5em 5% 5.5em;
width : 100%;
text-align: left;
display: block;
}

.bloctexte6{
margin : 5% 2.5em 5% 5.5em;
width : 100%;
text-align: left;
display: block;
}



.bloc4{
 background-color : #c8f4ea;
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display : flex;
  
  width : 100%;
  margin : 0;
}

.bloc5{
 background-color : #6950dd;
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display : flex;
  
  width : 100%;
  margin : 0 ;	
}

.bloc6{
 background-color : #ee7402;
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display : flex;
  
  width : 100%;
  margin : 0 ;	
}



/*typos*/

H1{
	padding:0;
	text-align: center;
	font-size: 2.5vw;
	font-family: 'Roboto', sans-serif;
	color: #333333;
}

H2{
	padding:0;
	text-align: center;
	font-size: 2.5vw;
	font-family: 'Roboto', sans-serif;
	color: #333333;
}

H3{
	padding:0;
	text-align: center;
	font-size: 2.5vw;
	font-family: 'Roboto', sans-serif;
	color: #ee7402;
}

H4{
	padding:0;
	text-align: center;
	font-size: 0.9vw;
	font-family: 'Roboto', sans-serif;
	color: #ee7402;
}



p{
	text-align: center;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9vw;
}

.dessous{
	text-align: left;
}
.dessousbl{
	text-align: left;
	color: white;
}
.dessousfo{
	text-align: left;
}
.dessousfo2{
	text-align: left;
	color: white;
}


a{
	font-family: 'Roboto', sans-serif;
	font-size: 0.9em;
}

ul{
	font-family: 'Roboto', sans-serif; 
	text-transform: uppercase;
	color: black;
}


.blocbutton{
margin: 5% auto;
width: 275px;
display: block;

}

.button {
display: inline-block;
background-color: #6950dd;
border: none;
color: white;
padding: 5% 4%;
text-align: center;
text-decoration: none;
margin: 2% 2%;
cursor: pointer;

}

.button:hover{
background-color: #c8f4ea;
	color: black;

}

.ml{
	text-align: center;
	margin: 0 0 0 45%;
	text-decoration: underline;
	width: 100%;
	position: inline;
	cursor:pointer;
}

.mlb{
background-color:#ee7402;
padding:1%;}


@media screen and (max-width: 1100px){
    
	.navnorm {
	display: none;}
	.navresp{
	display: inline;
	}
	.bloc1{
 background-color : white;
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display :inline;
  
  width : 100%;
  margin : 0;
}
	
.blocimage1{
 width : 100%;
 height : 100%;
margin: 0;
display: inline;
	
}
.blocimage3{
 width : 100%;
 height : 100%;
margin: 0;
display: inline;
	
}


.bloctexte1{
margin : 10% 8em 10% 7em;
}
	
p{
font-size: 15px;
	}
	
H1{
	padding:0;
	text-align: center;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	color: #333333;
}

H2{
	padding:0;
	text-align: center;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	color: #333333;
}

H3{
	padding:0;
	text-align: center;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	color: #ee7402;
}

H4{
	padding:0;
	text-align: center;
	font-size: 15px;
	font-family: 'Roboto', sans-serif;
	color: #ee7402;
}

	.blocimage2{
 width : 100%;
 height : 100%;
display: none;}
	
	.bloc2{
 background-color : #ee7402;
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display : inline;
  
  width : 100%;
  margin : 0;
}

	.bloctexte2{
		width: 100%;
		padding-top: 5%;
		padding-bottom: 10%;
		margin: 0;
		display: inline;
}
		.bloctexte3{
		width: 100%;
		padding-top: 10%;
		padding-bottom: 10%;
		margin: 0;
		text-align: center;
		display: inline;
	}
	
	body{
		margin: 0; 
		display: inline;
	}
	
.bloc6{
  
  /* ~~ C'est grâce à cette partie que l'on peut changer de place le texte ~~ */    
  display: block;
  width : 100%;
  margin : 0 ;	
}
	
.dessousfo{
	text-align: left;
	padding: 10px;
	background-color : #ee7402;
	font-size: 10px;
}

.bloctexte6{
margin : 5% 2.5em 0 5.5em;
width : 100%;
display: inline;
}
	
.blocimagex{
	width: 100%;
	height: 100%;
margin-top: 10%;
}
	
.bloctexte2{
margin: 0;
}
	
}

	
	

@media screen and (min-width: 1100px){
    
	.navresp {
	display: none;}
	.blocimage3{
 width : 100%;
 height : 100%;
margin: 0;
display: none;
	
}
	
	
}