/* ============================= larges ===========================*/

@media screen and (min-width: 1451px){

.grid-container {
 display: grid;
 grid-template-columns: 8% 1fr 1fr 1fr 1fr 8%;
 grid-auto-rows: minmax(3em, auto);
 grid-gap:0 2em;
 grid-template-areas:
"ban ban ban ban ban ban"
"menu menu menu menu menu menu"
". titre titre titre titre ."
". prod prod prod prod ."
". chx chx chx chx ."
". com com com QR ."
"footer2 footer2 footer2 footer2 footer2 footer2";
}


.m0 {grid-area: m0; text-align: center; padding: 1.5em 1em;}

.m1 {grid-area: m1; text-align: center; padding: 1.5em 1em;}

.m2 {grid-area: m2; text-align: center; padding: 1.5em 1em;}

.m3 {grid-area: m3; text-align: center; padding: 1.5em 1em;}

.m4 {grid-area: m4; text-align: center; padding: 1.5em 1em;}

.m5 {grid-area: m5; text-align: center; padding: 1.5em 1em;}
	

.titre {grid-area : titre; margin: 3em 0;}

.chx {grid-area : chx; margin: 3em auto;}

.com {grid-area: com; margin: 1em 3em 0 0;}
	
.QR {grid-area: QR; margin: auto;}
	
	.QR img {border: solid 5px white; border-radius: 10px;}
	
.imgg {height: 100%; width: 100%;}

.imgm {border: 4px solid dimgray; border-radius: 6px; display: block; width: 100%; margin-bottom: 5px;z-index: 0;position: relative;}

.floatR {float: right;margin-top: -35px; margin-right: 4px; z-index: 99;position: relative;opacity: 0.4;}


.prod {
grid-area: prod;
display: grid;
grid-template-columns: 1fr 6% 1fr;
grid-template-rows: 340px;
grid-column-gap: 0;
grid-row-gap: 5em;
justify-items: center;
justify-content: space-evenly;
grid-auto-rows: minmax(3em, auto);
background-color: #1f1f1f;
padding: 2em;

}



.prod01 {grid-column: 1 / 2; grid-row: 1;}
.prod02 {grid-column: 3 / 4; grid-row: 1;}
.prod03 {grid-column: 1 / 2; grid-row: 2;}
.prod04 {grid-column: 3 / 4; grid-row: 2;}
.prod05 {grid-column: 1 / 2; grid-row: 3;}
.prod06 {grid-column: 3 / 4; grid-row: 3;}
.prod07 {grid-column: 1 / 2; grid-row: 4;}
.prod08 {grid-column: 3 / 4; grid-row: 4;}
.prod09 {grid-column: 1 / 2; grid-row: 5;}
.prod10 {grid-column: 3 / 4; grid-row: 5;}

.prod11 {grid-column: 1 / 2; grid-row: 6;}
.prod12 {grid-column: 3 / 4; grid-row: 6;}
.prod13 {grid-column: 1 / 2; grid-row: 7;}
.prod14 {grid-column: 3 / 4; grid-row: 7;}
.prod15 {grid-column: 1 / 2; grid-row: 8;}
.prod16 {grid-column: 3 / 4; grid-row: 8;}
.prod17 {grid-column: 1 / 2; grid-row: 9;}
.prod18 {grid-column: 3 / 4; grid-row: 9;}
.prod19 {grid-column: 1 / 2; grid-row: 10;}
.prod20 {grid-column: 3 / 4; grid-row: 10;}

.prod21 {grid-column: 1 / 2; grid-row: 11;}
.prod22 {grid-column: 3 / 4; grid-row: 11;}
.prod23 {grid-column: 1 / 2; grid-row: 12;}
.prod24 {grid-column: 3 / 4; grid-row: 12;}
.prod25 {grid-column: 1 / 2; grid-row: 13;}
.prod26 {grid-column: 3 / 4; grid-row: 13;}
.prod27 {grid-column: 1 / 2; grid-row: 14;}
.prod28 {grid-column: 3 / 4; grid-row: 14;}
.prod29 {grid-column: 1 / 2; grid-row: 15;}
.prod30 {grid-column: 3 / 4; grid-row: 15;}

.prod31 {grid-column: 1 / 2; grid-row: 16;}
.prod32 {grid-column: 3 / 4; grid-row: 16;}
.prod33 {grid-column: 1 / 2; grid-row: 17;}
.prod34 {grid-column: 3 / 4; grid-row: 17;}
.prod35 {grid-column: 1 / 2; grid-row: 18;}
.prod36 {grid-column: 3 / 4; grid-row: 18;}
.prod37 {grid-column: 1 / 2; grid-row: 19;}
.prod38 {grid-column: 3 / 4; grid-row: 19;}
.prod39 {grid-column: 1 / 2; grid-row: 20;}
.prod40 {grid-column: 3 / 4; grid-row: 20;}

}

/* ============================= moyens ===========================*/

@media screen and (min-width: 899px) and (max-width: 1450px){
	
.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-auto-rows: minmax(1em, auto);
 grid-gap:0 2em;
 grid-template-areas:
"ban ban ban ban"
"menu menu menu menu"
"titre titre titre titre"
"prod prod prod prod"
"chx chx chx chx"
"com com com QR"
"footer2 footer2 footer2 footer2";
	
}


.m0 {display: none}

.m1 {grid-area: m1; text-align: center; padding: 1.5em 1em;}

.m2 {grid-area: m2; text-align: center; padding: 1.5em 1em;}

.m3 {grid-area: m3; text-align: center; padding: 1.5em 1em;}


.m4 {grid-area: m4; text-align: center; padding: 1.5em 1em;}

.m5 {grid-area: m5; text-align: center; padding: 1.5em 1em;}

.titre {grid-area : titre; }
	
.chx {grid-area : chx; margin: 3em auto;}

.com {grid-area: com; margin: 1em 3em 0 3em;}
	
.QR {grid-area: QR; margin: auto;}
	
	.QR img {border: solid 5px white; border-radius: 10px;}
	
.imgg {height: 100%; width: 100%;}
	
.imgm {border: 4px solid dimgray; border-radius: 6px; display: block; width: 100%; margin-bottom: 5px; margin-top: auto; z-index: 0;position: relative;}

.floatR {float: right;margin-top: -33px; margin-right: 1px; z-index: 99;position: relative;opacity: 0.4;}
	
	
.prod {
grid-area: prod;
display: grid;
grid-template-columns: 1fr 7% 1fr;
grid-column-gap: 0;
grid-row-gap: 5em;
justify-items: center;
justify-content: space-evenly;
grid-auto-rows: minmax(3em, auto);
background-color: #1f1f1f;
padding: 2em;
margin: 0 3em;
}


.prod01 {grid-column: 1 / 2; grid-row: 1;}
.prod02 {grid-column: 3 / 4; grid-row: 1;}
.prod03 {grid-column: 1 / 2; grid-row: 2;}
.prod04 {grid-column: 3 / 4; grid-row: 2;}
.prod05 {grid-column: 1 / 2; grid-row: 3;}
.prod06 {grid-column: 3 / 4; grid-row: 3;}
.prod07 {grid-column: 1 / 2; grid-row: 4;}
.prod08 {grid-column: 3 / 4; grid-row: 4;}
.prod09 {grid-column: 1 / 2; grid-row: 5;}
.prod10 {grid-column: 3 / 4; grid-row: 5;}

.prod11 {grid-column: 1 / 2; grid-row: 6;}
.prod12 {grid-column: 3 / 4; grid-row: 6;}
.prod13 {grid-column: 1 / 2; grid-row: 7;}
.prod14 {grid-column: 3 / 4; grid-row: 7;}
.prod15 {grid-column: 1 / 2; grid-row: 8;}
.prod16 {grid-column: 3 / 4; grid-row: 8;}
.prod17 {grid-column: 1 / 2; grid-row: 9;}
.prod18 {grid-column: 3 / 4; grid-row: 9;}
.prod19 {grid-column: 1 / 2; grid-row: 10;}
.prod20 {grid-column: 3 / 4; grid-row: 10;}

.prod21 {grid-column: 1 / 2; grid-row: 11;}
.prod22 {grid-column: 3 / 4; grid-row: 11;}
.prod23 {grid-column: 1 / 2; grid-row: 12;}
.prod24 {grid-column: 3 / 4; grid-row: 12;}
.prod25 {grid-column: 1 / 2; grid-row: 13;}
.prod26 {grid-column: 3 / 4; grid-row: 13;}
.prod27 {grid-column: 1 / 2; grid-row: 14;}
.prod28 {grid-column: 3 / 4; grid-row: 14;}
.prod29 {grid-column: 1 / 2; grid-row: 15;}
.prod30 {grid-column: 3 / 4; grid-row: 15;}

.prod31 {grid-column: 1 / 2; grid-row: 16;}
.prod32 {grid-column: 3 / 4; grid-row: 16;}
.prod33 {grid-column: 1 / 2; grid-row: 17;}
.prod34 {grid-column: 3 / 4; grid-row: 17;}
.prod35 {grid-column: 1 / 2; grid-row: 18;}
.prod36 {grid-column: 3 / 4; grid-row: 18;}
.prod37 {grid-column: 1 / 2; grid-row: 19;}
.prod38 {grid-column: 3 / 4; grid-row: 19;}
.prod39 {grid-column: 1 / 2; grid-row: 20;}
.prod40 {grid-column: 3 / 4; grid-row: 20;}


}


/* ============================= petits ===========================*/

@media screen and (max-width: 898px){
 
.grid-container {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: minmax(80px, auto) ;
 grid-template-areas:
"ban"
"menu"
"titre"
"prod"
"chx"
"com"
"QR"
"footer2"
;
}

h2 {font-size: 2.5em; text-align: center; margin: 2em 0 0 0; padding-top: 20px; border-top: 1px azure solid;}

.m0 {display: none}

.m1 {grid-area: m1; text-align: center; padding: 1em 0;}

.m2 {grid-area: m2; text-align: center; padding: 1em 0;}

.m3 {grid-area: m3; text-align: center; padding: 1em 0;}

.m4 {grid-area: m4; text-align: center; padding: 1em 0;}

.m5 {grid-area: m5; text-align: center; padding: 1em 0;}

.m0 > a {width: 50%;color:#834b00;}
.m1 > a {width: 50%;color:#834b00;}
.m2 > a {width: 50%;color:#834b00;}
.m3 > a {width: 50%;color:#834b00;}
.m4 > a {width: 50%;color:#834b00;}
.m5 > a {width: 50%;color:#834b00;}



.titre {grid-area : titre; line-height: 2em; margin: 0 7%; text-align: center;}

.chx {grid-area : chx;  text-align: center; margin: 0 7%; }

.com {grid-area: com;  text-align: justify; margin: 0 7%; }
	
.QR {grid-area: QR; margin: auto;}
	
	.QR img {border: solid 5px white; border-radius: 10px;}
	
.imgm {border: 4px solid dimgray; border-radius: 6px; display: block; width: 100%; margin-bottom: 5px;z-index: 0;position: relative;} 
	
.floatR {float: right;margin-top: -30px; margin-right: 2px; z-index: 99;position: relative;opacity: 0.4;}



.prod {
grid-area: prod;
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 0;
grid-row-gap: 2em;
justify-items: center;
justify-content: space-evenly;
grid-auto-rows: minmax(3em, auto);
background-color: #1f1f1f;
padding: 2em;
margin: 1.5em 7% 0 7%;
}

.prod01 {grid-column: 1 / 2; grid-row: 2;}

.prod02 {grid-column: 1 / 2; grid-row: 1;}

.prod03 {grid-column: 1 / 2; grid-row: 3;}

.prod04 {grid-column: 1 / 2; grid-row: 4;}
	
.prod05 {grid-column: 1 / 2; grid-row: 6;}
	
.prod06 {grid-column: 1 / 2; grid-row: 5;}
	
.prod07 {grid-column: 1 / 2; grid-row: 7;}
	
.prod08 {grid-column: 1 / 2; grid-row: 8;}
	
.prod09 {grid-column: 1 / 2; grid-row: 10;}
	
.prod10 {grid-column: 1 / 2; grid-row: 9;}

.prod11 {grid-column: 1 / 2; grid-row: 11;}

.prod12 {grid-column: 1 / 2; grid-row: 12;}

.prod13 {grid-column: 1 / 2; grid-row: 14;}
	
.prod14 {grid-column: 1 / 2; grid-row: 13;}
	
.prod15 {grid-column: 1 / 2; grid-row: 15;}
	
.prod16 {grid-column: 1 / 2; grid-row: 16;}
	
.prod17 {grid-column: 1 / 2; grid-row: 18;}
	
.prod18 {grid-column: 1 / 2; grid-row: 17;}
	
.prod19 {grid-column: 1 / 2; grid-row: 19;}
	
.prod20 {grid-column: 1 / 2; grid-row: 20;}
	
.prod21 {grid-column: 1 / 2; grid-row: 22;}
	
.prod22 {grid-column: 1 / 2; grid-row: 21;}	
	

	.prod02 > h2 {border: 0; margin: 0}


}