/*********************************************************************/
/*
/* Powered by Patrick Joly - Contact : patrickjoly@free.fr */
/*
/*********************************************************************/
body {
	background: #ffffff;
	color: #ffffff;
	font-family: "trebuchet ms", helvetica, arial, sans-serif;
	font-size: 1.2em;
	line-height: 1.5;
	overflow: scroll;
}

/*********************************************************************/
/* styles - mobile first
/*********************************************************************/
/* page */
.page {
	display: grid;
	margin: 0 auto;
	max-width: 1000px;
	grid-template-columns: 1fr;
	grid-gap: 10px;
	grid-template-areas:
		"header"
		"nav"
		"article-a"
		"article-b"
		"article-c"
		"article-d"
		"article-e"
		"article-f"		
		"aside"
		"footer"
}

/* header */
header {
	grid-area: header;
	background: #42b5f4;
	margin: 0;
	padding: 10px;
}

/* nav */
nav {
	grid-area: nav;
	background: #f4b400;	
	margin: 0;
	padding: 10px;
}

/* articles */
.article-a {
	grid-area: article-a;
	background: #0f9d58;
	margin: 0;
	padding: 10px;	
}

.article-b {
	grid-area: article-b;
	background: #db4337;
	margin: 0;
	padding: 10px;	
}

.article-c {
	grid-area: article-c;
	background: #f4b400;
	margin: 0;
	padding: 10px;	
}

.article-d {
	grid-area: article-d;
	background: #42b5f4;
	margin: 0;
	padding: 10px;	
}

.article-e {
	grid-area: article-e;
	background: #0f9d58;
	margin: 0;
	padding: 10px;	
}

.article-f {
	grid-area: article-f;
	background: #db4337;
	margin: 0;
	padding: 10px;	
}

/* aside */
aside {
	grid-area: aside;
	background: #0f9d58;	
	margin: 0;
	padding: 10px;	
}

/* footer */
footer {
	grid-area: footer;
	background: #42b5f4;	
	margin: 0;
	padding: 10px;
	text-align: center;
}

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

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

/*********************************************************************/
/* styles - laptop / desktop
/*********************************************************************/
@media (min-width: 768px) {
.page {
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		"header header header header"
		"nav nav nav nav"
		"article-a article-a article-b aside"
		"article-c article-c article-d aside"
		"article-e article-f article-d aside"			
		"footer footer footer footer"
}
}