body {
	background-color: lightgray;
	line-height: 1.5;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
}

p {
	display: block;
	margin-bottom: 15px;
	margin: 1rem;
}

ul {
	margin: 1rem;
}

li {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 2px dotted;
}

.header {
	font-family: "Times New Roman", Times, "Liberation Serif", FreeSerif, serif;
	font-style: italic;
	background-color: gray;
	color: white;
	text-align: center;
}

/* style : gray = le + foncé */ 

.article {
	background-color: white;
	font-size: 1.25em;
	max-height: 91vh;
	overflow: scroll;
}

/* ajout scroll si depassement 2020-03-04 */
/* ajustement hauteur 91vh aussi pour article 2020-03-09 
et scroll ! 2020-03-10 */

.nav, .pref {
	background-color: darkgray;
	font-size: 1.25em;
	max-height: 91vh;
	overflow: scroll;
}

.footer {
	background-color: gray;
	color: white;
	text-align: right;
	font-style: italic;
	padding-right: 2rem;
}

.header { grid-area: header; }
.footer { grid-area: footer; }
.article { grid-area: article; }
.nav { grid-area: nav; }
.pref { grid-area: pref; }

.main, .emballage {
	display: grid;
	grid-template-areas: "header header header"
	                     "nav article pref"
	                     "footer footer footer";

	grid-template-columns: 200px 1fr 350px;

	grid-template-rows: 90px 
						1fr 
						30px;

	min-height: 100vh;
}

/* ajout 2020-02-20 */

.box {
  display: flex;
  justify-content: space-evenly;
}

/* Dominque 2020-03-04 */
/* essai de standardisation "web semantique" */