body{		margin:0;
		padding:0;
		font-family: Roboto, sans-serif;
}

.container{	display:grid;
		grid-template-columns:1fr;
		grid-gap:0;
		padding:0 5px;
		margin:0 auto;
		max-width:1000px;}

nav{		
		display:grid;
                grid-template-columns: repeat(4,1fr);
                grid-gap: 20px;
		align-self:center;
                justify-self:center;
}
nav a{		
		padding:8px;	
		text-align:center;
		color:#fff;
		text-decoration:none;
		font-size:20px;
		background-color:#111;
}
nav a.active	{color:#808080;
		}
nav a:hover:not(.active) {
        	background-color: #808080;
        	color: #111;
}
h1{		
		padding-top:30px;
		color:#808080;	
		text-align:center;
}

img{		display: grid;
		grid-template-columns: 1fr;
		gap:15px;
		margin: 0 auto;	
		max-width:100%;
		height:auto;
}
.navr{		display:grid;
                grid-template-columns: repeat(2,1fr);
               	grid-gap: 30px;
		align-self:center;
                justify-self:center;
		max-width:400px;	
		height:auto;
		margin:auto;}

.navr a{	text-decoration:none;
		font-size:18px;
		color:blue;
		text-align:center;
		background-color:#bfd1dc;
}
.reseaux p{text-align: center;}
.dp{		display:grid;
		background-color:#bfd1dc;
		color:#333;
		grid-gap:15px;
        	grid-template-columns: 1fr 1fr 1fr;
        	grid-template-rows: 1fr 1fr;
		padding:0 25px;
		border:1px solid black;
}
footer{text-align:center;}