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


.prod {
grid-area: prod;
display: grid;
grid-template-columns: 1fr 6% 1fr;
grid-template-rows: 550px;	
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;}

.prod41 {grid-column: 1 / 2; grid-row: 21;}
.prod42 {grid-column: 3 / 4; grid-row: 21;}
.prod43 {grid-column: 1 / 2; grid-row: 22;}
.prod44 {grid-column: 3 / 4; grid-row: 22;}
.prod45 {grid-column: 1 / 2; grid-row: 23;}
.prod46 {grid-column: 3 / 4; grid-row: 23;}
.prod47 {grid-column: 1 / 2; grid-row: 24;}
.prod48 {grid-column: 3 / 4; grid-row: 24;}
.prod49 {grid-column: 1 / 2; grid-row: 25;}
.prod50 {grid-column: 3 / 4; grid-row: 25;}


.prod51 {grid-column: 1 / 2; grid-row: 26;}
.prod52 {grid-column: 3 / 4; grid-row: 26;}
.prod53 {grid-column: 1 / 2; grid-row: 27;}
.prod54 {grid-column: 3 / 4; grid-row: 27;}
.prod55 {grid-column: 1 / 2; grid-row: 28;}
.prod56 {grid-column: 3 / 4; grid-row: 28;}
.prod57 {grid-column: 1 / 2; grid-row: 29;}
.prod58 {grid-column: 3 / 4; grid-row: 29;}
.prod59 {grid-column: 1 / 2; grid-row: 30;}
.prod60 {grid-column: 3 / 4; grid-row: 30;}


.prod61 {grid-column: 1 / 2; grid-row: 31;}
.prod62 {grid-column: 3 / 4; grid-row: 31;}
.prod63 {grid-column: 1 / 2; grid-row: 32;}
.prod64 {grid-column: 3 / 4; grid-row: 32;}
.prod65 {grid-column: 1 / 2; grid-row: 33;}
.prod66 {grid-column: 3 / 4; grid-row: 33;}
.prod67 {grid-column: 1 / 2; grid-row: 34;}
.prod68 {grid-column: 3 / 4; grid-row: 34;}
.prod69 {grid-column: 1 / 2; grid-row: 35;}
.prod70 {grid-column: 3 / 4; grid-row: 35;}	
	
	

}

/* ============================= 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 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; margin: 3em;}

.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%;}

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

}
	
.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;}

.prod41 {grid-column: 1 / 2; grid-row: 21;}
.prod42 {grid-column: 3 / 4; grid-row: 21;}
.prod43 {grid-column: 1 / 2; grid-row: 22;}
.prod44 {grid-column: 3 / 4; grid-row: 22;}
.prod45 {grid-column: 1 / 2; grid-row: 23;}
.prod46 {grid-column: 3 / 4; grid-row: 23;}
.prod47 {grid-column: 1 / 2; grid-row: 24;}
.prod48 {grid-column: 3 / 4; grid-row: 24;}
.prod49 {grid-column: 1 / 2; grid-row: 25;}
.prod50 {grid-column: 3 / 4; grid-row: 25;}


.prod51 {grid-column: 1 / 2; grid-row: 26;}
.prod52 {grid-column: 3 / 4; grid-row: 26;}
.prod53 {grid-column: 1 / 2; grid-row: 27;}
.prod54 {grid-column: 3 / 4; grid-row: 27;}
.prod55 {grid-column: 1 / 2; grid-row: 28;}
.prod56 {grid-column: 3 / 4; grid-row: 28;}
.prod57 {grid-column: 1 / 2; grid-row: 29;}
.prod58 {grid-column: 3 / 4; grid-row: 29;}
.prod59 {grid-column: 1 / 2; grid-row: 30;}
.prod60 {grid-column: 3 / 4; grid-row: 30;}


.prod61 {grid-column: 1 / 2; grid-row: 31;}
.prod62 {grid-column: 3 / 4; grid-row: 31;}
.prod63 {grid-column: 1 / 2; grid-row: 32;}
.prod64 {grid-column: 3 / 4; grid-row: 32;}
.prod65 {grid-column: 1 / 2; grid-row: 33;}
.prod66 {grid-column: 3 / 4; grid-row: 33;}
.prod67 {grid-column: 1 / 2; grid-row: 34;}
.prod68 {grid-column: 3 / 4; grid-row: 34;}
.prod69 {grid-column: 1 / 2; grid-row: 35;}
.prod70 {grid-column: 3 / 4; grid-row: 35;}	
	


}


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


.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; margin-bottom: 30px;margin-top: -20px; border-radius: 10px;}

.imgb {width: 75%; height: auto; margin: 0 auto;}
	
.leg {width: 75%; margin: 0 auto; }
	
.floatR {float: right;margin-top: -30px; margin-right: 65px; 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: 4em;
justify-items: center;
justify-content: space-evenly;
grid-auto-rows: minmax(3em, auto);
background-color: #1f1f1f;
padding: 2em;
margin: 3em 5% 0;
text-align: center	
}

.prod * span.style3b {text-align: left;}


}