.old_ie  .old_ie header, .old_ie header h1, .old_ie nav, .old_ie nav li,.old_ie section, .old_ie menu, .old_ie gmenu,.old_ie article, .old_ie aside, 
{
    display: inline;
    zoom: 1;
}

/* Quelques ajustements pour les vieilles versions d'IE */

.old_ie section h1, .ie8 section h1
{
    font-size: 1.1em;
}

.old_ie footer div, .ie8 footer div
{
    margin-top: 30px;
    background: url('images/separateur.png') repeat-x top;
}
@font-face {
					font-family: 'BerlinSansFB-Reg';
				src: url('fonts/brlnsr.eot');
				src: url('fonts/brlnsr.eot?#iefix') format('embedded-opentype'),
						 url('fonts/brlnsr.woff') format('woff'),
						 url('fonts/brlnsr.ttf') format('truetype'),
						 url('fonts/brlnsr.svg#brlnsr') format('svg');
				font-weight: normal;
				font-style: normal;
		}

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?yucedf');
	src:url('fonts/icomoon.eot?#iefixyucedf') format('embedded-opentype'),
		url('fonts/icomoon.woff?yucedf') format('woff'),
		url('fonts/icomoon.ttf?yucedf') format('truetype'),
		url('fonts/icomoon.svg?yucedf#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-home3:before {
	content: "\e902";
	font-size:1.7em;

	background-color: transparent;
}
		
html
{
}
	
body
{
		height: 100%;
		margin: auto;
		padding: 0;	
		max-width: 980px;		
		background-color: black;
		font-family: 'BerlinSansFB-Reg';
		font-size: 1em;	
}

a {
	text-decoration: none;
}

img, object, embed, canvas, video, audio, picture {
       max-width: 100%;
		height: auto;
       _width: 100%; /* IE6 seulement */
}

footer
{
	display: block;
	float: left;
	width: 100%;
	background: #f4f4f4;
	text-align: right;
	padding: 3%;
	margin: 0;
	height: 1%;	
}


article
{
	float: left;
	width: 100%;
	padding:1%;
	margin: 0;
	background: transparent;
	color: black;	
}


aside
{
	float: left;
	width: 20%;
	padding: 1%;
	margin: 0;	
	background-color: transparent;
	display: inline;
}


header
{
	padding: 0;
	margin: 2%; 	
}

nav
{
	padding: 0;
	margin-left:auto;
	margin-right: auto;
	width: 100%;
	text-align: center;
}

.fondgris{
	background-color: #d3d3d3;
	padding: 1%;
	margin: 1%;
}

.accueil{
	background-color: #d3d3d3;
	padding: 1%;
	margin: 1%;
	width:30%;
}


.mailcontact{
	 position: relative;  
    display: inline-block;     
    margin: 2%;  
    padding:1%;
    text-align: center;  
    overflow: hidden; 
    width:15%;
	float: left; 
	background-color: #d3d3d3;

}


#menunav {
	display:flex;
   flex-flow: row wrap;
   justify-content: space-around;
   align-items: baseline;
}


@media screen and (max-width: 800px){
	#menunav ul{
	display:flex;
	flex-flow :row wrap;
	justify-content :center;
	}
}


@media screen and (max-width: 450px){
	#menunav ul{
		display:flex;
		flex-flow: column wrap;
	}
}


 #menunav ul { /* toutes les listes */
	padding: 0;
	margin:0;
	list-style: none;	
	text-align: center;
	vertical-align: middle;
	line-height: 2.188em;	
}


#menunav a {
	display: block;	
	color: #f8f8f8;
	margin: 0;
		-webkit-transition: color 0.6s ease-in;
    -moz-transition: color 0.6s ease-in;
    -o-transition: color 0.6s ease-in;
	 transition: color 0.6s ease-in;
	 -webkit-transition: background-color 1.2s ease-in;
    -moz-transition: background-color 1.2s ease-in;
    -o-transition: background-color 1.2s ease-in;
	 transition: background-color 1.2s ease-in;	
	
}

#menunav li { /* tous les items de liste */
	float: left;
	width: 9em; /* largeur obligatoire, sinon opera devient fou */
	margin: 0;
	background-color: #a9a9a9;
	color: #f4f4f4;
	padding: 0;
	border-radius:8px;
}



#menunav li:first-child {width:2em;}

#menunav li li :first-child {
width:9em;
	background-color: #a9a9a9;
	color: #f4f4f4;
	border-radius: 8px;
}


#menunav ul li ul li{
display: inherit;
border-radius: 8px;
}


#menunav ul li ul li:last-child{
display: inherit;
border-radius: 8px;
}


#menunav li a:hover {

color:black;
background: #d3d3d3;
border-radius:8px;

}



#menunav li ul { /* listes de deuxième niveau */
	position: absolute;
	width: 9em;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#menunav li:hover ul, #menunav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
	margin: 0;

}

.Grandtitre {
		text-align: center;	
		vertical-align:middle;
		margin: 0;
		padding: 0;
		font-size: 2.5em;
		font-weight: bold;
		color: #191970;
}

.GrandtitreGris {
		text-align: center;	
		vertical-align:middle;
		margin: 0;
		padding: 0;
		font-size: 2.5em;
		font-weight: bold;
		color: #dadada;
}		
.titre {
	font-size: 1.75em;
	color: #0000cd;
}	


.titreGris {
	font-size: 1.75em;
	color: #dadada;
}
figure {  
    position: relative;  
    display: inline-block;     
    margin: 2%;  
    padding:0;
    text-align: center;  
    overflow: hidden; 
    width:25%;
	float: left;  
}

.lien {
	margin:2%;
	padding:1%;
	float: left;
	color: #d3d3d3;
	background: #979797;
	text-align: center;
	vertical-align: middle;
}

.lien figcaption { 
	 position: absolute; 
	 margin: 0;  
    padding:0;  
    left: 0; bottom: 0;
    height:0;  
    line-height: 1.5em; 
    width:100%; 
    text-align: center; 
    color: white 

    background: rgba(0,0,0,0.1);  
    overflow: hidden;  
    /*préparation de la transition*/  
    -moz-transition: all;0.7s;
    -webkit-transition: all;0.7s;  
     transition: all 0.7s;  
} 

.lien:hover  figcaption,  
.lien:focus figcaption{  
    margin: 0;  
    padding:0; 
    height: 3em; 
    color: white ;
    background: #d3d3d3;  
} 

.lien img{
	max-width:100%;
}




.textelien {
	width: 20%;
	padding:0.2%;
	float:left;
	font-size: 1.25em;
	font-weight:bold;
	color: #00008b;
	margin-top:0.5%;
	margin-left:0;
	vertical-align: top;	
}

.textelien a {
	text-decoration: none;
}

.textelien a:hover  {

	color: black;
}

.textelien a:visited  {

		color: #00008b;
}


.imglien {
	padding:0.2%;	
	color: #000195
	float:left;
	margin-left:1%;
	margin-top:1%;
	max-width: 100%;
	height:auto;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: baseline;  
  
}

.flex-container > div {
  background-color: #979797;
  color: white;
  width: 29%;
  min-height: 100px;
  margin: 20px;
  text-align: center;
  font-size: 18px;
}

.flex-container div img {
	margin: 2%;
	width: 90%;
}


	
.flexcontainer img a
{
	border-color: #999999;
	border-style: solid;
	border-width: thin;
}