@font-face
{
	font-family: 'PoliceDeTitre';
	src : url('../fonts/AlexBrush-Regular.ttf') format('truetype');	/* ce format est "compatible" sur tous les navigateurs, inutile donc de charger d'autres formats */
}

h1, h2, h3 {font-family: PoliceDeTitre, verdana, times new roman, arial;}

a
{
	text-decoration: none;
	color: inherit;
}

body
{
	background-color: #616161;
	margin-top: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#enTete
{
	width: 100%;
	box-sizing: border-box;
	background-color: #CCC;

	border: solid thin #222;
	border-top: unset;
	border-radius: 0px 0px 12px 12px;
}

#enTete h1
{
	font-size : 3.8em;
	color: #963F09;
	text-align: center;
	text-shadow: 0px 3px 3px rgb(135, 135, 135);	
	margin-bottom: 	14px;
	margin-top: 20px;
}

nav
{
	width: 100%;
	box-sizing: border-box;
	margin-top : 4px;
	padding: 4px;

	border: solid thin #222;
	border-radius: 10px;
	background-color: #CCC;

	display: flex;
	justify-content: space-around;
}
nav a {box-sizing: border-box;}
nav a:hover
{
	background-color: #F1F1F1;
	border-radius: 10px;
	color: #C1241F;
	box-shadow: 0px 0px 2px #777;
}

nav a:active
{
	background-color: white;
	border-radius: 10px;
}

nav a {flex : 1;}

h2
{
	font-size: 1.7em;
	color: #963F09;
	text-align: center;		
	padding : 0px;
	margin : 0px;
}

#coordonnees, #medleyTableaux
{
	width: 100%;
	margin-top: 15px;
	border: #BBB 2px solid;
	border-radius: 20px;
}

#coordonnees
{
	color: #EEE;
	font-size: 1.2em;
	text-align: center;
}

#medleyTableaux
{
	display: flex;
	justify-content: space-around;
	overflow: hidden;
}

footer {width: 150px;}

#lienFormulaire
{
	display: block;
	min-width: 120px;
	margin: auto;
	margin-top: 15px;
	margin-bottom: 0px;
	padding: 10px;
	text-align: center;
	border: #CCC 1px solid;
	border-radius:100px/200px;
	background-color: #CCC;
	box-shadow: 0px 0px 10px brown;
	
	transition-property: box-shadow;
	transition-duration: 2s;
	-webkit-transition-property: box-shadow;
	-webkit-transition-duration: 2s;
	-moz-transition-property: box-shadow;
	-moz-transition-duration: 2s;
}

#lienFormulaire:hover {box-shadow: 0px 0px 30px #FFCB38;}

footer p
{
	margin: auto;
	margin-top: 10px;
	padding: 6px;
	line-height: 23px;
	text-align: center;
	border: #CCC 1px solid;
	border-radius:100px/200px;
	box-shadow: 0px 0px 10px brown;
	color: #111;
}

#signature
{
	font-family: PoliceDeTitre;
	font-size: 1.3em;
	color: #963F09;
	animation: ombreBlanche 2s 1s alternate infinite ease-in;
	-webkit-animation: ombreBlanche  2s 1s alternate infinite ease-in;
	-moz-animation: ombreBlanche  2s 1s alternate infinite ease-in;
}

@keyframes ombreBlanche
{
	from{text-shadow: none;}
	to{text-shadow: 0px 0px 12px white;}
}

@-webkit-keyframes ombreBlanche
{
	from{text-shadow: none;}
	to{text-shadow: 0px 0px 12px white;}
}

@-moz-keyframes ombreBlanche
{
	from{text-shadow: none;}
	to{text-shadow: 0px 0px 12px white;}
}

@media all and (max-width: 1280px)
{
	#enTete h1 {font-size: 	3.5em;}
}

@media all and (max-width: 800px)
{
	#enTete h1
	{
		font-size: 	3em;
		margin-top: 16px;
	}
}

@media all and (max-width: 600px)
{
	#enTete h1
	{
		font-size: 2.6em;
		margin-top: 6px;
		margin-bottom: 8px; 
	}

	#coordonnees
	{
		margin-top: 8px;
		font-size: 1.1em;
	}

	#medleyTableaux
	{
		margin-top: 10px;
		max-height: 200px;
		border-radius: 25px;
	}

	#coordonnees p {margin: 10px;}

	#lienFormulaire
	{
		margin-top: 10px;
		min-width: 40%;
	}

	footer {margin-top: 0px;}
}

@media screen and (max-width: 420px)
{
	#enTete h1
	{
		font-size: 2.3em;
		margin-top: 6px;
		margin-bottom: 4px;
		text-shadow: 0px 2px 2px rgb(135, 135, 135);
	}

	h2 {font-size: 1.4em;}

	#enTete, nav 
	{
		border-color: #333;
	}

	#coordonnees, #lienFormulaire, footer 
	{
		font-size: 1em;
		list-style-type: none;
	}

	#medleyTableaux {max-height: 180px;}
}