body{background-color:#fff;
	color:#111;
	margin:0;
	padding:0;
	font-family:'Helvetica Neue', sans-serif;
}
.container{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	grid-template-areas: "header" "middle" "footer";
	margin:0 5px;

}
.box {
  background-color: rgba(30, 30,30, 0.6);
  text-align: center;
  backdrop-filter: blur(8px);
  padding: 20px 40px;
}
.box img {background-color:#808080;
	border:2px solid #fff;
}
.bgi {background: url('img/eglantiers-long.webp');
	background-size: cover;
	}
.bga  {background: url('img/bg-automne.webp');
        background-size: cover;} 
.bgv  {background: url('img/bg-vj.webp');
        background-size: cover;
}

.header{	
	display:flex;
	flex-direction: column;
	align-items: center;
}
h1{	font-family: 'Archivo black',sans-serif;
	font-size:50px;	
	color:#fff;}
.header a {padding: 25px;
	text-decoration: none;
	color:#111;
	font-size:18px;
	background-color:#c1c1c1;}

.header a:hover{color:#fff;
	background-color:#222;}	

.middle{
	grid-area:middle;
	border-bottom:4px solid grey;
	padding-bottom:25px;
	margin:auto;
	display:grid;
	gap:0;
	grid-template-columns:1fr;
	align-items:center;
	justify-content:center;
	max-width:1000px;
	height:auto;
}
.row {	margin:0 auto;
  	display: grid;
  	grid-template-columns: auto auto auto;
	gap:5px;
	padding:10px;
	background-color:#333;
}

.footer{display:grid;
	gap:0;
	grid-template-columns:1fr;
	padding: 25px 0;
	grid-area:footer;
	justify-self:center;}
img{max-width:100%;
        height:auto;}
@media(max-width:500px){

.box{display:grid;
	grid-template-columns:1fr;
}
.row	{display:grid;
	gap:5px;
	grid-template-columns:1fr;
	background-color:#fff;

}
.middle{border-bottom:none;

}
}