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

   layout.css
   Disposition des blocs principaux

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

/* ------------------------------------------
/* Disposition a l'ecran des blocs principaux
/* ------------------------------------------ */
body { margin: 0; padding: 0; text-align: center; }

.page { position: relative; width: 970px; margin: 0 auto; text-align: left; }
@media (min-width: 768px) { .page { width: 750px; } }
@media (min-width: 992px) { .page { width: 970px; } }
@media (min-width: 1200px) { .page { width: 1170px; } }

.header { width: 100%; margin: 0; }

.container { box-sizing: content-box; padding: 0 3em; overflow: hidden; }
@media (max-width: 768px) { .container { padding: 0 0.5em; } }

.content { float: left; width: 70%; }

.aside { float: right; width: 26%; overflow: hidden; margin-bottom: 1.5em; }
.extra { float: right; clear: right; width: 26%; overflow: hidden; margin-bottom: 1.5em; }

.fullwidth .content { float: none; width: auto; }
.fullwidth .aside,
.fullwidth .extra { display: none; }

.footer { position: relative; clear: both; margin-bottom: 2em; padding: 1em 3em 0; text-align: left; }
.footer img { vertical-align: middle; }
.footer .colophon { margin-bottom: 1em; text-align: center; font-size: 0.9em; }

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

@media (max-width: 768px) {
	/* Passer tous les elements de largeur fixe en largeur automatique */
	body,
	.page,
	.header,
	.container,
	.content,
	.aside,
	.extra,
	.footer { clear: both; float: none !important; width: auto !important; margin: auto !important; }
}