/*********************************************************************/
/*
/* 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"
		"contenu"		
		"aside"
		"footer"
}

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

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

/* contenu */
.contenu {
	grid-area: contenu;
	margin: 0;
	padding: 0;	
}

.listing {
	display: grid;	
	list-style: none;
	margin: 0;
	padding: 0;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, 1fr));
} 

.listing li {
	background: #db4337;
	list-style: none;
	margin: 0;
	padding: 10px;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, 1fr));
}

.listing .infos {
	background: #f4b400;
	margin-top: auto;
	padding: 10px;
	text-align: center;
}

/* 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"
		"contenu contenu contenu aside"
		"footer footer footer footer"
}

.listing {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
} 		
}
}