/* Global */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');

* {
	box-sizing: border-box;
	outline: none;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6rem;
	margin: 0 5%;
	background-color: #f2f1f4;
	font-family: "Open Sans";
}
main a, h1, h2 {
	font-weight: normal;
	color: #30a894;
	text-decoration: none;
}
p {
	color: #6a6d70;
}
/* Entête de la page */
header {
	text-align: center;
}
nav {
	background-color: #30a894;
}
nav ul li {
	padding: 2.5rem;
	font-size: 2.5rem;
	list-style-type: none;
}
nav ul li a {
	text-decoration: none;
	color: white;
}


/* Corps de la page */
h1 {
	font-size: 4rem;
	border-bottom: solid #30a894 1px;
	font-family: "PT Sans Narrow";
}
h2 {
	font-size: 2.4rem;
	border-bottom: solid #30a894 1px;
	font-family: "PT Sans Narrow";
}

section {
	vertical-align: top;
}
section article {
	width: 100%;
}

aside {
	padding: 3rem;
	display: none;
	background-color: #b8dcb1;
}
aside article {
	width: 100%;
	margin: 0 auto;
}
picture {
	width: 100%;
}
picture source, picture img {
	width: 100%;
}

/* FOOTER */
.licence a {
	color: #30a894;
	text-decoration: underline;
}

.licence {
	color: #6a6d70;
	padding: 10px;
	font-size: 0.8em;
	text-align: center;
	margin: 0.5rem;
}

.licence img {
    width: 50px;
}

/* Responsive */

/* Mobile */
@media (max-width: 767px) {
	
	aside {
		display: none;
	}
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1024px) {
	aside {
		display: block;
		width: 100%;
	}
}

/* Desktop */
@media (min-width: 1025px) {
	body {
		width: 80%;
		margin: auto;
	}
	nav ul {
		margin-bottom: 0;
	}
	nav ul li {
		display: inline-block;

	}
	#milieuLi {
		margin: 0 25rem;
	}

	section {
		display: inline-block;
		width: 70%;
		padding-right: 2.5rem;
		height: 100%;
	}
	aside {
		display: inline-block;
		width: 30%;
		display: all;
		height: 100%;
	}
}