/* ============ templater, clear =============== */
/* ============ ================ =============== */

/* D33E42 */

/* ============ ================ =============== */
 

body{
	padding-top:5px;
	font-size:90%;
	font-family:Tahoma;
	background: url("break.png") no-repeat bottom center, linear-gradient(to right, #1C1E33, #8A282C) ;
	background-size: 100%;
}
.corps{
	overflow:hidden;
	
	border-radius:20px 20px;
	}
.box{
	padding-bottom:200px;
}
h1{}
p{
	width:95%;
	padding:0;
	margin:0;
	text-align:justify; 
	text-justify:newspaper;
	border-radius:4px 4px;
}
b{
	background-color:#F3DDC8;
}
a{
	color:#111;
	font-display:bold;
/* text-decoration:underline; */
/* background-color:#7489AF; */
}
a:hover{
	color:#fff;
	background-color:#DB995A;
	text-transform: uppercase;
}
/* Reset CSS */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img {
	max-width:110%;
	vertical-align: middle;
	display: inline-block;
	background: rgba(100, 100, 100, 0.95);
}
.imgdiv {
	position: relative;
}
.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) {
}
/* merci a csstricks pour le 'has' !!! https://css-tricks.com/the-css-has-selector/	 */
.grid-wrp {
	display:block;
	width:75%;
	margin:0em auto;
	/* background-color:#998E8D; */
	/* box-shadow:3px 3px 5px #998E8D; */
	background-image: linear-gradient(to bottom, #E0E0E0 0%, #998E8D 50%, #E0E0E0 100%);
	/* poppy rose */
}
.lhed {background-color:#998E8D;}
.grid-wrp p{width:80%;margin:0 auto;
}
/* Main CSS */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow:hidden;
	background-color:#E0E0E0;
	padding:1em;
	/* border:1px solid #111; */
}
.grid-wrapper > div > p{
	min-height:110px;
	}
.grid-wrapper > .nor,.wwide,.wide {
	/* background-color:rgba(0, 0, 0, 0.7); */
}
.grid-wrapper > div a,
.grid-wrapper > div > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.grid-wrapper > div.ng {
	grid-column: span 4;grid-auto-rows: 100px;height:100px;
}
.grid-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 125px;
	/* grid-gap:10px; */
	width:75%;
	margin:0em auto;
	background: #d8d8d8;
}
.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 .talll {
	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: 960px)
{
	body{font-size:100%;}
	p, h2{
		padding:0 0 1em;
	}
	.grid-wrapper p, .grid-wrp p {width:90%;
		}
	.box{width:100%;}
	.grid-wrp {
		display:block;
		width:100%;
		margin:0em auto;
	}
	.grid-wrapper .wwide {
		grid-row: span 1;
	}
	.grid-wrapper {width:100%;
		grid-auto-rows: 190px;
		margin:0em auto;
		grid-gap: 15px;
		}
	.grid-wrapper div{padding:11px;}
	.grid-wrapper .talll {
		grid-row: span 4	;
	}
	.corps{
		width:100%;
		grid-auto-rows: 180px;
		border: 5px dashed #D33E43;
		border-radius:15px 15px;
	}
	img {
		}
}
@media screen and (min-width: 1081px)
{
	body{font-size:90%;}
	p, h2{
		padding:0 1em;
	}
	.box{width:100%;padding:0;}
	.corps{border-radius:20px 20px;}
	.grid-wrp {
		display:block;
		width:90%;
		margin:0em auto;
	}
	.grid-wrapper .wwide {
		grid-row: span 2;
	}
	.grid-wrapper {
		display: grid;
		/* grid-gap: 15px; */
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		grid-auto-rows: 105px;
		width:90%;
	margin:0em auto;}
	.grid-wrapper div{padding:0;}
	.mak{
		width:100%;
		grid-auto-rows: 100px;
	}
	img {
	}
}
@media screen and (min-width:1260px) {
	.corps{width:80%;margin:0 auto;	border: 15px dashed #D33E43;
	border-radius:30px 30px;
	}
	body{font-size:100%;}
	.box{
		margin:0 auto;
		padding:0 4.5em;
	}
	.grid-wrapper {
		grid-auto-rows: 120px;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}