/* gris bleu #222c2f */
body, html, #container  {
	height: 100%;
	width:100%;
	margin: 0;
	padding: 0;
	color: #28272A;
	font-family: Calibri, Trebuchet MS, Verdana, Arial, Sans-serif;
	font-size: 15px; /* Navigateurs mobiles */
	font-size: 2vmin;
}
a {
	text-decoration: none;
}
p {
	margin-bottom: -2px;
}	
#menu {
	padding-left: 0;
}
#menu-part1, #menu-part2 {
	display: inline-block;
}
#menu li {
}
#menu li a { /* pas de display block*/
	color: #000;
}
#menu li a:hover, #menu li a:focus, #menu li a:active {
	background: #f1f1f1 ;
}

/* Grands écrans #222c2f*/
/* @media all and (min-width: 1024px) */
/* { */
	header {
		height: 14.1%;
		text-align:center; /* centrage horizontal */
		letter-spacing:2px;
	}	

	header span { 
		vertical-align:middle;
		display:inline-block;
		line-height:normal; /* on rétablit le line-height */
	}
	#drakimage {
		font-size: 3.4vmin;
		font-family: Cambria, Times New Roman;
		letter-spacing:8.5pt;
		margin-top:1%;
		padding-bottom: 1%;
		width: 40%;
		border-bottom:1px solid #909090;
	}
	#spanHeader2	{
		padding-top: 0.5%;
		margin-top: 10px;
		font-size: 1.35vmin;
		width: 26%;
	}
	#middle {
		height: 70%;
		background-color: #28272A;
		color: #fff;
		text-align: justify;
	}
	#content, nav {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	#content {
		height: 100%;
	}
	nav {
		height: 60px;
	}
	/* Adapter width et min-width selon le nombre d'éléments*/
	#menu {
		margin-left:17%;
		margin-right:7%;
		width:auto;
	}
	#menu li {
		display: inline;
	}
	#menu li a {
		display: inline-block;
		height: 60px;
		min-width: 14%;
		text-align: center;
		line-height: 60px; 
		font-size: 1vw;
		font-family: Cambria;
		letter-spacing: 3px;
		border-radius: 4px;
	}
	li:nth-child(5) a {
		width: auto;
	}
/* } */
@media all and (max-width: 1200px) {
	#menu  {
		margin-left:2%;
		margin-right:2%;
	}
	#menu li a {
		font-size: 1.7vw;
	}	
}
@media all and (max-width: 800px) {
	#menu  {
		margin-left:2%;
		margin-right:2%;
	}
	#menu li a {
		font-size: 1.7vw;
	}	
}