/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

#main {
	position: relative;
	max-width: 930px;
	width: 100%;
	margin: 0 auto;
	padding: 0 1em;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.header { width: 100%; }
.wrapper { flex: 1 1 580px; min-width: 0; overflow: hidden; }
.content { min-height: 300px; padding: 60px 0 0 40px; }
aside { flex: 0 1 220px; min-width: 160px; overflow: hidden; margin: 80px 0 1em 30px; }
.footer {
	clear: both;
	height: 63px;
	text-align: center;
}


@media (max-width: 700px) {
	#main {
		padding: 0 0.75em;
	}
	.wrapper {
		flex: 1 1 100%;
	}
	.content {
		padding: 20px 0 0;
	}
	aside {
		flex: 1 1 100%;
		margin: 1em 0;
	}
}

/* Gabarit d'impression */
@media print {
	.nav, aside,.footer { display: none; }
	#page,.content { width: auto; }
}


/* Entete et barre de navigation
------------------------------------------ */

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.formulaire_recherche {}
.formulaire_recherche * { display: inline; }

.footer .tech {
	height: 20px;
	max-width: 900px;
	width: 100%;
	text-align: right;
	margin: 0 auto;
}
.footer .colophon {
	height: 40px;
	max-width: 900px;
	width: 100%;
	text-align: left;
	margin: 0 auto;
	color: #bbb;
}

/* end */