@import url('https://fonts.googleapis.com/css2? family= Open+Sans & display=swap');




  




body {
color:;
background-color:#dcdcdc;
 

}

a{
	text-decoration: none;
}

/*-------------------------------header (haut de page)-------------------------------*/

	
.logo {
	justify-content:center;
	text-align: center;
	display: flex;
	border:1px solid white;
	margin: 10px 0px 10px 0px;
	border-radius: 30px;
	padding: 0px auto 0px auto;
	flex-wrap:wrap; 
	font-family: 'Montserrat', sans-serif;
	background: linear-gradient(#3B689F ,#4FA0E2 ,#C6DCEA ,#6D999C ,  #678F14 ); /*couleur dégradée*/
/*#13181d, #20212e, #341b47*/
}

.logo p{
	margin-top: 20px;

	color: black;
}
.img{
	text-align: center; 
	margin-top: 5px;
	margin-bottom: 5px; 
}


.container{

	 	padding-left: 5%;   
		padding-right: 5%;
		margin-left: 5%;
		margin-right: 5%; 
		margin-top:0%; 
		margin-bottom:0% ;    
	    display: flex;
	    padding-bottom: 5%;  
	    justify-content:center;
	    justify-items: center; 
	    border-radius: 20px;
	   	}



.container h1{
	font-size: 24px; /*dimensionne les textes en h1 du navigateur*/
	
	text-align: center; /*centre le texte  du header*/

}
.container .btn{ /*bouton naviguer*/
	padding: 10px 18px 15px 18px ; /* marge extérieure en haut et en bas/ à droite et à gauche*/
	font-size: 20px; /*dimensionne le texte du bouton naviguer*/ 
	border: none;
	border-radius: 20px;
	cursor: pointer; /*le curseur se transforme en pointeur au survol de l'onglet*/
	background: linear-gradient(#3B689F ,#4FA0E2 ,#C6DCEA ,#6D999C ,  #678F14 ); /*couleur dégradée*/
	margin-top: 10px;
}

 





			/*---------------début barre de navigation----------*/
.marge{

	margin-top: 10%;
	margin-bottom: 20%;  
			}
.btn{
	min-width: 200px;
	padding-top: 10px; 
	padding-bottom: 10px; 
	 
			}


.elements{
	display: flex; /*flex aligne les boutons du header*/

			}
.elements p{
	margin-right: 20px;

			}
.elements a:hover{
	color: red; /*change la couleur en rouge*/
	font-size:26px; /*augmente la hauteur du texte*/
			}

.elements a{
	color: blue;
			}
.elements {
				
	justify-content:center;
	flex-wrap:wrap;  /* sur mobile les éléments ne seront pas alignés mais empilés */ 
			}
		
			/*---------------fin barre de navigation----------*/




/*---------------------------------------fin header (haut de page)----------------------------------------*/

.awin{
	width: 400px;
	margin-top: 5px;
	margin-bottom: 10px;
	}


/*------------------------début Footer-----------------------------------------------------*/

.soulignement:hover{
	color: red;
}
.soulignement {
	color: black;
} 

/*----------------------------début bouton retour-----------------------------------------------------------*/
.retour {
		border: center; 
		border-radius: 25px;
		border: 1px solid #335BFF;		
		font-size: 20px; /*dimensionne les textes en h1 du navigateur*/
		margin-right:auto; /*espacer les onglets*/
		margin-left:auto;    
 		cursor: pointer red; /*le curseur se transforme en pointeur au survol de l'onglet*/
		
		background: linear-gradient(#3B689F ,#4FA0E2 ,#C6DCEA ,#6D999C ,  #678F14); /*couleur dégradée*/
/*#13181d, #20212e, #341b47*/
		/*position: sticky;   associé avec le (top: 0px;)bloque la barre de navigation en haut de la page
	top: 0px;*/
		padding: 10px;
		width: 150px; 
}	

.retour a{/*soulignement du texte bouton retour*/
	
		text-decoration: none; 
}

.retour :hover{/*surbrillance du texte bouton retour*/
		color: red;
}
		/*----------------------------fin bouton retour-----------------------------------------------------------*/



footer{

	border-radius: 30px;
	padding: 10px 10px 5px 10px;
	position: sticky;  /* associé avec le (top: 0px;)bloque la barre de navigation en haut de la page ou pied de page*/
	bottom: 10px;

}


footer{

	font-size: 1em;
	margin-top:10px ;
	color:black;
	text-align: center;
	/*display: flex; flex aligne les éléments du footer*/
	flex-wrap: wrap; /* sur mobile les éléments ne seront pas alignés mais empilés*/
	justify-content: space-between; /* espace les éléments du footer*/
	
	font-family: 'Montserrat', sans-serif;
	
	background: linear-gradient(#3B689F ,#4FA0E2 ,#C6DCEA ,#6D999C ,  #678F14); /*couleur dégradée*/
/*#13181d, #20212e, #341b47*/

}


/*footer .social-media{
	display: flex;
}
footer .social-media p{
	margin-right: 15px;
	
	cursor: pointer; /*le curseur se transforme en pointeur au survol de l'onglet*/
	border: 1px solid yellow;
	border-radius: 100%;
	padding: 30px;  /*dimensionne la marge inférieure*/
	text-align: center; /* aucun effet car les icones étaient déja bien centrés */
	width: 15px; /*dimensionne les icones*/
	color: yellow; */
}	
/*------------------------fin de Footer-----------------------------------------------------*/


@media screen and (max-width: 640px) {table,
	div {
		display: block;
		width: auto!important;
/*la page ne peut pas être inférieure à 640px*/
}