.box {
		background-color: transparent;
		height: 100px;
		perspective: 1000px;
		}
		.box-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.5s;
		transform-style: preserve-3d;
		}
		.box:hover .box-inner {
		transform: rotateY(180deg);
		}
		.box-front,
		.box-back {
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
		}
		.box-front {
		background-color: #cccccc;
		color: #111111;
		}
		.box-back {
		background-color: #8ebf42;
		color: #eeeeee;
		transform: rotateY(180deg);
		}

		/* c pas forcement hyper bien check-optimized. */
		body{font-size:100%;
		background-color:#708090;
		<!-- background-color:#FF00FF; -->
		}
		h1{color:#efefef;font-family:Arial;}
		p, h2{
		font-family:Arial;
		color:#999;
		}
		body{
		background-image:url("img/the_fond.jpg");
		background-attachment: local, scroll;
		background-size:cover;
		/* */
		background-repeat: no-repeat;
		}
		h2{margin-bottom:10px;}
		/* Reset CSS */
		* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		}
		img {
		max-width: 100%;
		height: auto;
		vertical-align: middle;
		display: inline-block;
		}
		/* */
		/* add imgcaption */
		/* {box-sizing: border-box;} */
		.imgdiv {
		position: relative;
		}
		.image {
		display: block;
		width: 100%;
		height: auto;
		}
		.overlay {
		font-family:Arial;
		position: absolute;
		bottom: 0;
		background: rgba(12, 12, 12, 0.5);
		width: 100%;
		transition: .5s ease;
		opacity:0;
		color:#D1D1D1;
		font-size: 20px;
		font-weight: bolder;
		padding: 20px;
		text-align: center;
		}
		.imgdiv:hover .overlay {
		opacity: 1;
		}
		/* */
		.grid-wrp {
		display:block;
		width:75%;
		margin:0.5em auto;
		}
		.grid-wrp p{
		background-color:#002040;margin:.2em 0;
		}
		/* Main CSS */
		.grid-wrapper > div {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow:hidden;
		background-color:rgba(0, 0, 0, 0.7);
		/* opacity: 0.5; */
		
		}
		.grid-wrapper > div a,
		.grid-wrapper > div > a > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 5px;
		}
		.grid-wrapper > div a:hover{
		border:2px solid white;
		}
		.grid-wrapper {
		display: grid;
		grid-gap: 10px;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		grid-auto-rows: 170px;/* epaisseur des blocs */
		grid-auto-flow: dense;
		width:75%;
		margin:1.5em auto;
		}
		.grid-wrapper .nor {
		grid-column: span 1;
		}
		.grid-wrapper .wwide {
		grid-column: span 4;
		}
		.grid-wrapper .wide {
		grid-column: span 2;
		}
		.grid-wrapper .tall {
		grid-row: span 2;
		}
		.grid-wrapper .big {
		grid-column: span 2;
		grid-row: span 2;
		}
		@media screen and (max-width: 1081px) {
		.grid-wrapper {width:90%;
		margin:1.5em auto;}
		.grid-wrp {width:100%;
			}
			
		}
		/* .grid-wrapper{margin-bottom:200px;} */