html { 
	font-size:62.5%; /* 1em = 10px */
	} 

html,
body {
	height:100%; /* Pleine hauteur */
	box-sizing:border-box;
	}

body {
	font-family:'Space Mono', monospace;
	font-variant-ligatures:common-ligatures;
	font-size:1.5em; /* =15px */
	line-height:1.3;
	background:#D33736; /* ocre */
	}

h1 { 
	font-family:'Noto Serif', serif; 
	text-transform:lowercase; 
	letter-spacing:-0.005em;
	font-weight:700; 
	font-style:italic;
	text-align:center;
	font-size:10vw; 
	margin-top:15px;
	margin-bottom:15px;
	}

h2 { 
	font-family:'Noto Serif', serif; 
	text-transform:lowercase; 
	font-weight:20px; 
	text-align:center;
	font-size:25px; 
	margin-top:1px;
	margin-bottom:3px;
	color: white;
	background:#C13736;
	padding:15px;
	box-shadow: -1px 4px 82px 0px rgba(0,0,0,0.48);
	}

img {
	width:100%; 
    height:auto;
	}

div.container {  
	width:70%;
	height:70%;
	margin-left:auto;
	margin-right:auto;
	
	display:grid;
	grid-template-columns: 1fr 1fr 1fr; 
	grid-gap:1vw; /* Gouttière */ 
	}

div.item { 
	font-size:0.9em; 
	height:1fr;
	
	background:white;
	}

div.item-preview { 
	padding:0.7vw;

	}

div.item-preview h2 { 
	margin-bottom: 0.7vw;
	
	}

div.item1 {
	display:flex; /* Permet de centrer verticalement */
	align-items:center; /* Vertical */
	justify-content:center; /* Horizontal */
	background: #D33736;
	grid-column-start:1;
	grid-column-end:4;
	margin-bottom: 30px;
	grid-auto-columns:  
	}

div.item1 img {
	width: 15vw;
}

div.item2 {


	justify-content:center;
	text-indent:20px;
	background:#C13736;
	grid-column-start:1;
	grid-column-end:4;
	margin-bottom: 50px;
	box-shadow: -1px 4px 82px 0px rgba(0,0,0,0.35);
	}


div.item3{
	background: #D33736;

}

	div.item4{
	background: #D33736;
	
	}
	div.item5{
	background: #D33736;
	
	}

	div.item6{
	background: #D33736;
	
	}

	div.item7{
	background: #D33736;
	
	}

	div.item8{
	background: #D33736;
	
	}



	nav#menu ul {
list-style-type:none; /* Enlève les "décorations" en puce des listes */
}


nav#menu li {
display:inline-block; /* Alignement horizontal */
}

nav#menu a {
display:inline-block; /* Alignement horizontal */
margin:0px 2px; /* Marges extérieures */
padding:5px 15px; /* Marges intérieures */
text-align:center; /* Le lien est centré dans le bloc */

text-decoration:none; /* Enlève le soulignement des liens */
color:white; /* couleur des liens : noir */
}

nav#menu a:hover {
background:#D33736; /* Au survol, les liens ont un fond gris */
opacity: 0.4;
}
nav#menu
{
	text-align: center;
}

nav#menu li.active a {
font-weight: bold;
opacity: 1;
border bottom: 10vw; /* Alignement horizontal */
}