/* #PRODUIRE{fond=layout.css,layoutgala=33}
   md5:e72fd177c375acb39b5a4899600799c3 */
 



/* http://blog.html.it/layoutgala/index.html */
/* Mode mobile ici sans media queries */

#navigation, #extra {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

/* Mode Tablette définition des grilles CSS */
@media screen and (min-width: 768px) {
	#shadow {
		display: grid;
		grid-template-areas:
			"header"
			"maincontent"
			"footer";
	}
	#mainheader {
		grid-area: header;
	}
	#maincontent {
		grid-area: maincontent;
		display: grid;
	}
	#miettesdepain{
		grid-area: ariane;
	}
	#heading{
		grid-area: titre;
		display: grid;
	}
	#contenu{
		grid-area: content;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	#navigation {
		grid-area: navigation;
	}
	#extra {
		grid-area: extra;
	}
	#footer {
		grid-area: footer;
	}

/* un switch avec 2 types de cas pour ipad */
 
	#maincontent {
		grid-template-areas:
			"ariane ariane"
			"titre titre"
			"content content"
			"navigation extra";
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
	}


}


@media screen and (min-width: 1160px) {
   
   
   
	#maincontent {
		margin-top: calc(min(100vw, 1920px) / 1920 * -0);
		position: relative;
	}

/* ce switch pour desktop */
 
	#shadow {
		grid-template-areas:
			"header header header"
			". maincontent ."
			"footer footer footer";
		grid-template-columns: minmax(0, 1fr) 1160px minmax(0, 1fr);
	}


 
	#maincontent {
		grid-template-rows: max-content max-content max-content 1fr;
	}
































 
	#maincontent {
		grid-template-areas:
			"ariane ariane"
			"titre titre"
			"content navigation"
			"content extra";
		grid-template-columns: minmax(0, 1fr) 240px;
		grid-template-rows: auto auto auto 1fr;
	}






}
