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

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

.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 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 ."
". txt1 txt1 txt1 txt1 ."
". txt2 txt2 txt2 txt2 ."
". txt3 txt3 txt3 txt3 ."
". txt4 txt4 txt4 txt4 ."
". img4 img4 img4 img4 ."
". liv1 liv2 liv3 liv4 ."
"footer footer footer footer footer footer"
". title title title title ."
". txte1 txte1 txte1 txte1 ."
". txte2 txte2 txte2 txte2 ."
". txte3 txte3 txte3 txte3 ."
". txte4 txte4 txte4 txte4 ."
"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 {margin: 3em 0 0 0;}

.txt1 {grid-area: txt1; }
.txt2 {grid-area: txt2; margin: 3em 0 0 0;}
.txt3 {grid-area: txt3; margin: 3em 0 0 0;}
.txt4 {grid-area: txt4; margin: 3em 0 0 0;}

.img1 {grid-area: img1; }
.img2 {grid-area: img2; }
.img3 {grid-area: img3; }
.img4 {grid-area: img4; margin: 3em auto; }

.liv1 {grid-area: liv1; padding-right: 8px;}
.liv2 {grid-area: liv2; padding-right: 8px;}
.liv3 {grid-area: liv3; padding-right: 8px;}
.liv4 {grid-area: liv4; padding-left: 8px; margin-bottom: 2em;}

.title {margin: 3em 0 0 0;}

.txte1 {grid-area: txte1; }
.txte2 {grid-area: txte2; margin: 3em 0 0 0;}
.txte3 {grid-area: txte3; margin: 3em 0 0 0;}
.txte4 {grid-area: txte4; margin: 3em 0 0 0;}




}

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

@media screen and (min-width: 799px) 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 titre titre"
"txt1 txt1 txt1 txt1 txt1 txt1"
"txt2 txt2 txt2 txt2 txt2 txt2"
"txt3 txt3 txt3 txt3 txt3 txt3"
"txt4 txt4 txt4 txt4 txt4 txt4"
"img4 img4 img4 img4 img4 img4"
". liv1 liv2 liv3 liv4 ."
"footer footer footer footer footer footer"
"title title title title title title"
"txte1 txte1 txte1 txte1 txte1 txte1"
"txte2 txte2 txte2 txte2 txte2 txte2"
"txte3 txte3 txte3 txte3 txte3 txte3"
"txte4 txte4 txte4 txte4 txte4 txte4"
"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 {margin: 3em 0 0 3em;}

.txt1 {grid-area: txt1; margin: 0 3em; }
.txt2 {grid-area: txt2; margin: 3em 3em 0 3em;}
.txt3 {grid-area: txt3; margin: 3em 3em 0 3em;}
.txt4 {grid-area: txt4; margin: 3em 3em 0 3em;}

.img1 {grid-area: img1; }
.img2 {grid-area: img2; }
.img3 {grid-area: img3; }
.img4 {grid-area: img4; margin: 1em 3em; }

.liv1 {grid-area: liv1; padding-right: 8px;}
.liv2 {grid-area: liv2; padding-right: 8px;}
.liv3 {grid-area: liv3; padding-right: 8px;}
.liv4 {grid-area: liv4; padding-left: 8px;}

.title {margin: 3em 0 0 3em;}

.txte1 {grid-area: txte1; margin: 0 3em;}
.txte2 {grid-area: txte2; margin: 3em 3em 0 3em;}
.txte3 {grid-area: txte3; margin: 3em 3em 0 3em;}
.txte4 {grid-area: txte4; margin: 1em 3em 0 3em;}




}

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

@media screen and (max-width: 798px){
 
.grid-container {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: minmax(80px, auto) ;
 grid-template-areas:
"ban"
"menu"
"titre"
"txt1"
"txt2"
"txt3"
"txt4"
"img4"
"liv1"
"liv2"
"liv3"
"liv4"
"footer"
"title"
"txte1"
"txte2"
"txte3"
"txte4"
"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;}

.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 {line-height: 3em; margin: 1.5em 7%;}

.txt1 {grid-area: txt1; margin: 0 7%;}
.txt2 {grid-area: txt2; margin: .2em 7% 0 7%;}
.txt3 {grid-area: txt3; margin: .2em 7% 0 7%;}
.txt4 {grid-area: txt4; margin: .2em 7% 0 7%;}

.img1 {grid-area: img1; }
.img2 {grid-area: img2; }
.img3 {grid-area: img3; }
.img4 {grid-area: img4; margin: 3em 7%; }

.liv1 {grid-area: liv1; height: 20%; margin: 0 30%;}
.liv2 {grid-area: liv2; height: 50%; margin: 0 30%;}
.liv3 {grid-area: liv3; height: 50%; margin: 0 30%;}
.liv4 {grid-area: liv4; height: 50%; margin: 0 30%;}


.liv1 > img {height: 100px; }


.title {line-height: 3em; margin: 1.5em 7%;}

.txte1 {grid-area: txte1; margin: 0 7% 0 7%;}
.txte2 {grid-area: txte2; margin: 1em 7% 0 7%;}
.txte3 {grid-area: txte3; margin: 1em 7% 0 7%;}
.txte4 {grid-area: txte4; margin: 1em 7% 0 7%;}




}