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

.imgf {height: 100%; width: 100%;}

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

}


.prod01 {grid-column: 1 / 4; grid-row: 1; text-align: center;}
.prod02 {grid-column: 1 / 2; grid-row: 2;}
.prod03 {grid-column: 3 / 4; grid-row: 2;}
.prod04 {grid-column: 1 / 2; grid-row: 3;}
.prod05 {grid-column: 3 / 4; grid-row: 3;}
.prod06 {grid-column: 1 / 2; grid-row: 4;}
.prod07 {grid-column: 3 / 4; grid-row: 4;}
.prod08 {grid-column: 1 / 2; grid-row: 5;}
.prod09 {grid-column: 3 / 4; grid-row: 5;}
.prod10 {grid-column: 3 / 4; grid-row: 6;}
.prod11 {grid-column: 1 / 2; grid-row: 6;}
.prod12 {grid-column: 3 / 4; grid-row: 7;}
.prod13 {grid-column: 1 / 2; grid-row: 7;}
.prod14 {grid-column: 3 / 4; grid-row: 8;}
.prod15 {grid-column: 1 / 2; grid-row: 8;}
	
	.prod01 p {text-align: center}

}

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

@media screen and (min-width: 899px) and (max-width: 1450px){
	
.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 grid-auto-rows: minmax(1em, 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 prod prod"
"chx chx chx chx chx chx"
"com com com com QR ."
"footer2 footer2 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;}

.imgf {height: 100%; width: 100%;}

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

}

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


/* ============================= 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; border-radius: 10px;}
	
.imgf {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: 4em;
align-items: start;
justify-content: space-evenly;
grid-auto-rows: minmax(3em, auto);
background-color: #1f1f1f;
padding: 2em;
margin: 3em 7% 0 7%;
}

	.prod01 p {text-align: center}

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



}