body{
		font-size:100%;
		
		background-image: linear-gradient(to right, #DECBA4, #3E5151);
		/*issu de:
		https://www.makeuseof.com/css-background-gradients/
		*/
		font-family:Verdana;
		/* color:#efefef; */
		}
		.corps{
		/*box-shadow: 20px 20px rgba(0,0,0,.15);
		width:50%;*/
		background-image:url("untitled.png");
		background-repeat:no-repeat;
		background-position: bottom center;
		background-size: contain;
		}
		h1{}
		p{
		width:100%;
		/* color:#999; */
		color:#37342E;
		padding:10px;
		/* text-align:left; */
		/* float:left; */
		background: rgba(100, 100, 100, 0.25);
		text-align:justify; 
		text-justify:newspaper;
		/**/
		min-height:120px;
		}
	a{color:#2A2A2A;
	background: rgba(100, 100, 100, 0.75);
		/* color:#7FB404;*/
	/* background-color:#7489AF; */
	text-decoration:none;}
	a:hover{
		background-color:#7489AF;
	}
	/* Reset CSS */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	img {
	height: 95%;
	vertical-align: middle;
	display: inline-block;
	background: rgba(100, 100, 100, 0.95);
	}
	/* */
	/* */
		/* 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: 16px;
		padding: 20px;
		text-align: center;
		}
		.imgdiv:hover .overlay {
		opacity: 1;
		}
		.nor:has(img) {
		border:1px solid #999;
		background: rgba(100, 100, 100, 0.95);
		}
		/* merci a csstricks pour le 'has' !!! https://css-tricks.com/the-css-has-selector/	 */
	.grid-wrp {
	display:block;
	width:75%;
	margin:0em auto;
	}
	.grid-wrp p{
	background-color:#002040;
	color:#AAB4BF;
	max-width:100%;
	/*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; */
	font-family:Arial;
	color:#EDEDED;
	}
	.grid-wrapper > .nor,.wwide,.wide {
	/* background-color:rgba(0, 0, 0, 0.7); */
	background-color:rgba(0,0,0,.15);
	}
	.grid-wrapper > div a,
	.grid-wrapper > div > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* border-radius: 5px; */
	}
	
	.grid-wrapper > div.ng {
	grid-column: span 4;grid-auto-rows: 100px;height:100px;
	}
	.grid-wrapper {
	display: grid;
	/* grid-gap: 10px; */
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 160px;
	/* grid-auto-flow: dense; */
	width:75%;
	margin:0em auto;
	}
	.fug .nor{
		grid-row: span 2;
	}
	.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;
	}
	.grid-wrapper:nth-last-child{padding-bottom:200px;}
	@media screen and (max-width: 1081px) {
			/* pour version petit */
			body{font-size:90%;}
			p, h2{
			padding:0 1em;
			}
			.box{width:100%;padding:0;}
			.grid-wrp {
			display:block;
			width:100%;
			margin:0em auto;
			}
			.grid-wrapper {width:100%;
			margin:0em auto;}
			.grid-wrapper div{padding:0;}
			.mak{
			width:100%;
			grid-auto-rows: 90px;
			}
			img {
			/* max-width: 170%; */
			}
			
			}
			/*.grid-wrp {
			width:100%;
			}*/
			@media screen and (min-width:1260px) {
			/* pour version moyen */
			body{font-size:100%;}
			.box{width:90%;margin:0 auto;
			padding:0 4.5em;
			}
			.grid-wrapper {
				grid-auto-rows: 160px;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	}
}
/* .grid-wrapper{margin-bottom:200px;} */