body
{
	
	
   
	display:  flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0px;	
    font-family:Helvetica, Arial, sans-serif;
    background:url("images/timeline_44.jpg") fixed;
	opacity: 1;
	
}

header    /* logo-titre-drapeau */
{
	
background-color: #ffffff;
display: flex;	
width: 100%;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;;


}

.drapeau
{
margin-right: 20px;
width: 96px;
height: 63px;
}

.accueil
{
width: 100%;
display:flex;
flex-direction: row;
flex-wrap: ;
justify-content: space-between;
align-items: center;
padding: 0px;
}




nav     /* menu */
{
display: flex;
flex-flow: row nowrap;	
justify-content: space-between;
width: 100%;	
background-color: black;	
border-bottom: 4px solid red;
position: sticky;
top: 0px;
font-size: 1.0rem;		
}



nav ul
{
	
	list-style: none;   /* enlever les puces */
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-basis: 100%;
}

nav ul li
{
	
	cursor: pointer;
	padding: 0.2rem;
	flex: auto;
	text-align: center;
}


nav ul li:hover
{
	
	background-color: #555;
	color: white;
    transform: scale(1.1);	
	
}

nav a
{
   
	text-decoration: none;
	color: white;
}



.content   /* les 7 boîtes entre le menu et le footer */
{
display: flex;
flex-flow: row nowrap;
align-content:;	
flex-basis: 80%;	
margin-top: 15px;
background-color:#fff;
font-size: 1em;	
background:#f3f3f3;
box-shadow: 4px 4px 6px black;

}

.content a
{
	
text-decoration: none;
color: black;
}

.content p
{
	
color: black;
margin: 0px 35px;
   	
}

	
.content img   /* images à gauche */
{	

display: block;

}


.content:hover
{
 
background: white;
	
}





/* titre des articles de presentation dans content */
h5
{
	
margin-top: 20px;
margin-bottom: 10px
	

}



.content_right   /* articles à doite des images */
{

text-align: center;
margin:auto;
	
	
}



h2  /* Titres des sections*/
{

 background-color: rgba(208,207,207,0.5);
 box-shadow: 6px 6px 6px black;
 height: 20px;
 width:  90%;	
 font-size: 1em;
 text-align: center;
 color: black;
 margin: auto;
}


h2:hover

{
	transform: scale(1.05);	
	
}

footer
{

display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;	
margin-top: 30px;
background-color:#f0f0f0;
width:100%;	
}




footer a:hover
{
	

color: red;	
transform: scale(1.3);		
	
	
}



.media_sociaux a
{
	
display: inline-block;
margin-right: 20px;

}




/* Media query (Responsive Web)  */



@media all and (max-width: 700px) 

{
	.content p
	{
		
		
		flex-flow: column;
		
	}
	
	.content{
		
		
		flex-direction: column;
		align-items: center;
		flex-basis: 95%;
		
	}
	
	
     .content img{
	
	margin-bottom: 20px;
	
    }

    nav{
	
	position: relative;  /* pour que le menu ne reste pas dfixe en haut */
	
    }

    nav ul{
	
	
	flex-direction: column;
	
	
    }
	
	body{
		
		background: none;
		
	}
	



	footer{
		display:flex;
		flex-direction: column;
		align-items: center;
		margin: 0px;
		padding: 10px;
		
	}
	



}