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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; background:#ddd;}
.page { position: relative; width: 1200px; max-width:90%; margin:0 auto; text-align: left;  }
.main { padding-bottom: 1.5em; }
.bas{ border-top: 5px solid #033758; color: #FFF; clear: both; margin-top: 20px; background-color: #033758;}



.footer { clear: both; padding: 2em 0;  }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both;  }
.page_article .wrapper { clear: both; float: left; width: 70%; overflow: hidden; }

.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float: right; width: 23.333%; overflow: hidden; }  


.page_rubrique .wrapper{float: none; width: 100%;}
.page_rubrique .aside { display: none;}

  
/* Entete et barre de navigation
------------------------------------------ */
.header{float: left; width: 15%;margin-right: 5%;}

.navigation-container {
    margin: 0 auto;
	float: left;
	width: 80%;
	padding-top: 50px;
}
.fixed .navigation-container {

	padding-top: 0px;
}
.menu_mega{float: left;}



.header .spip_logo_site { display: block; margin: 0; line-height: 1; float: left;z-index: 2;}
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#222; }
.header .spip_logo_site a:hover  {color:#db1762;}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {float: left; margin: 0; }
.header #slogan, .header .titre_site { margin: 0; display: block; text-indent: -3000px; }

.logo{position: relative; }
.page_article .logo{}
.logo img{width: 100%; height: auto;}
.logo .spip_logo{display: block; float: none; margin: 0;}}

.nav {}
.nav li {display:inline;}
.nav li a { display: inline-block; }
.nav li.on a { font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active {}
 
.footer .colophon { float: left; width: 50%; margin: 0; }
.footer .newsletter { float: right; width: 45%; text-align: right; }
.footer .spip_logo{ float: none; margin: 10px 0;}

.footer .colophon img{float: left; margin-right: 15px; margin-bottom: 15px;}

a.contact{
	display: inline-block;
	background-color: #005fbe;
	padding: 15px;
	padding-left: 55px;
  background-repeat: no-repeat;
  background-position: 15px center;
	line-height: 25px;
background-image: url(../images/ico-contact.png);
	color: #fff;
	text-decoration: none;
}
a.contact:hover{
	color: #FFF;
	background-image: url(../images/ico-contact.png);
	background-color: #01488f;
}

.suivre{clear: both; padding-top: 20px;}
.suivre img{margin-left: 10px;}
/* Grid ----------- */

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /*Identique*/
	grid-gap: 30px;

}
.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /*Identique*/
	grid-gap: 30px;

}
.grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /*Identique*/
	grid-gap: 20px;

}



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

/* Affichage sur petits ecrans  
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */

/* largeur maximum 767px */
@media (max-width: 959px) {
	body {   	width: 100%;		;	}
	.page {  	width: 100%;  	max-width: none;padding: 0 20px 	}
	    .wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%; }
	.page_article .wrapper {

    float: none;
    width: 100%;
		margin-bottom: 20Px;

}
	
	.menu_mega {float: none;}
	
	.navigation-container {
    margin: 0 auto;
    float: left;
    width: 100%;
    padding-top: 0px;
		z-index: 2;
}
}
 
/* largeur maximum 680px */
@media (max-width: 680px) {
.grid-3, .grid-4, .grid-5 {
    margin-left: 0px;
	width: 100%
}

.grid-3 > * {

    width: 100%;
    margin-left: 0px;
	margin-bottom: 30px;
}
		/* largeur maximum 640px */
@media (max-width: 680px) {
	.grid-3, .grid-4, .grid5 {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;

}


    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
    .footer .colophon, .footer .newsletter { width: auto; float: none; }
	.footer .newsletter {margin-top: 15px;}
    .footer .generator { display: none; }

    /* header du calendrier full-calendar */
.header .spip_logo_site img {
width: 120px;

}
}



/* fin */