/*********************************************************************/
/*
/* Powered by Patrick Joly - Contact : patrickjoly@free.fr
/*
/*********************************************************************/

/*********************************************************************/
/* Feuille de style mobile first
/*********************************************************************/
body {
	background: #ffffff;
	color: #ffffff;
	font-family: "trebuchet ms", helvetica, arial, sans-serif;
	font-size: 1em;
	line-height: 1.5;
	margin: 0;
	padding: 10px;
	text-align: center;
}

h1, h2, h3 {
	margin: 0;
	padding: 10px;
}

p {
	margin: 0;
	padding: 10px 0 10px 0;
	text-align: justify;	
}

a {
	color: #ffffff;
	border-bottom: 2px solid #ffffff;
	text-decoration: none;
}

a:hover {
	border-bottom: 2px solid transparent;	
}

/*********************************************************************/
/* header
/*********************************************************************/
header {
	background: #4885ed;
	margin: 0;
	padding: 20px 0 20px 0px;
}

/*********************************************************************/
/* nav
/*********************************************************************/
nav {
	background: #db3236;	
	margin: 0;
	padding: 20px 0 20px 0px;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	display: inline-block;
	margin: 0;
	padding: 5px;
}

/*********************************************************************/
/* article
/*********************************************************************/
article {
	background: #f4c20d;
	padding: 10px;	
}

/*********************************************************************/
/* aside
/*********************************************************************/
aside {
	background: #3cba54;
	padding: 10px;	
}

/*********************************************************************/
/* footer
/*********************************************************************/
footer {
	background: #4885ed;
	margin: 0;
	padding: 20px 0 20px 0px;
}



/*********************************************************************/
/* Media Queries - Desktop
/*********************************************************************/
@media(min-width: 700px) {
body {
	font-size: 1.2em;
	padding: 0;
}

#page {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas: 	"head head head"
							"nav nav nav"
							"article article aside"
							"footer footer footer"
}

#page > header {
	grid-area: head;
}

#page > nav {
	grid-area: nav;
}

#page > article {
	grid-area: article;
}

#page > aside {
	grid-area: aside;
	padding: 20px 10px 10px 10px;
}

#page > footer {
	grid-area: footer;
}
}