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;} */