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

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

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

body { text-align: center; background: #DBDFEB ; border-top:2px solid #F5FAFD; font-family:arial; }
.page { position: relative; width: 1200px; margin: 0 auto; padding: 0 1.5em; text-align: left;  }

.header {background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #C6CDE6),
	color-stop(0.77, #EDF1FD)
);
background-image: -o-linear-gradient(bottom, #C6CDE6 0%, #EDF1FD 77%);
background-image: -moz-linear-gradient(bottom, #C6CDE6 0%, #EDF1FD 77%);
background-image: -webkit-linear-gradient(bottom, #C6CDE6 0%, #EDF1FD 77%);
background-image: -ms-linear-gradient(bottom, #C6CDE6 0%, #EDF1FD 77%);
background-image: linear-gradient(to bottom, #C6CDE6 0%, #EDF1FD 77%);}
.main { padding: 1.5em 0; }
.footer { clear: both; background:#565E82;padding: 1.5em 0; }

.wrapper { clear: both; float: left; width: 100%; overflow: hidden; }
.content { min-height: 350px; }
.aside { float: right; width: 0; overflow: hidden; }


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

.header { padding-top:5px; padding-left:5px;/* padding-bottom: 1.5em; padding-right: 30%; border-bottom: 1px solid; */ }
.header_int{width:1200px; margin:auto}
.header h1{font-size:2.7em}
.header #logo { display: block; margin: 0; line-height: 1; font-weight: bold; text-align:left }
.header #logo,
.header #logo a,
.header #logo a:hover { background: transparent; text-decoration: none; color: #565E82; }
.header #slogan { margin: 0; color:#565E82; font-size:1.1em; font-weight:bold;text-align:left }
#logo > a {font-size:1.34em}

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

.nav {float:right;margin-right:5px; margin-top:-20px; margin-top:15px}
.nav ul {}
.nav ul li {float:left}
.nav ul li a { float: left; display: block; padding: .5em 1em;  margin-left:0.7em; margin-right:.7em; text-decoration: none;color:#565E82; font-weight:bold }
.nav ul li.on a {color: #000;
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #FCFBF7),
	color-stop(0.73, #CBCCCE)
);
	background-image: -o-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: -moz-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: -webkit-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: -ms-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: linear-gradient(to bottom, #FCFBF7 0%, #CBCCCE 73%);
	
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	
	box-shadow: 0px 2px 2px 4px rgba(161, 165, 175, 0.51);
	-moz-box-shadow: 0px 2px 2px 4px rgba(161, 165, 175, 0.51);
	-webkit-box-shadow: 0px 2px 2px 4px rgba(161, 165, 175, 0.51);	}
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { 
	color: #000;
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #FCFBF7),
	color-stop(0.73, #CBCCCE)
);
	background-image: -o-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: -moz-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: -webkit-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: -ms-linear-gradient(bottom, #FCFBF7 0%, #CBCCCE 73%);
	background-image: linear-gradient(to bottom, #FCFBF7 0%, #CBCCCE 73%);
	
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	
	box-shadow: 0px 2px 2px 4px rgba(161, 165, 175, 0.51);
	-moz-box-shadow: 0px 2px 2px 4px rgba(161, 165, 175, 0.51);
	-webkit-box-shadow: 0px 2px 2px 4px rgba(161, 165, 175, 0.51);	}

#formulaire_recherche { position: absolute; top: 50px; right: 50px; border: 0; }

.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

.footer{text-align:center;color:#FFF;}
.footer a{color:#FFF}
.footer a:focus, .footer a:hover, .footer a:active{color:#000;text-decoration:none} 
.footer hr{
	border: 0 none;
    background:#fff;
	color: #fff;
    height: 1px;
    margin: 5px auto;
    width: 45%;
}

.zone{padding:15px 10px; }
.zone h1{float:left;color:#565E82; font-weight:400; font-size:240%; margin:0.2em 0.5em 0.2em 0}
.zone_bouton{float:right;padding-right:10px; width:430px; height:125px;background:url(img/zone_bouton.png)no-repeat}
.zone_bouton a{}
.zone_bouton:focus,
.zone_bouton:hover,
.zone_bouton:active{background:url(img/zone_bouton_hover.png)no-repeat}

.ombre{background:url(img/ombre.png)no-repeat; width:1093px; height:31px;margin:auto; clear:both}

/* Blocune */


#alaune  {
	margin:0;
	margin:auto;
	margin-bottom:40px;/* marges des blocs */
	clear: both;
	font-size:90%; /* taille de la police */
	text-align:left; /* aligne le texte à gauche pour empêcher le justifier */
	/* height:180px; */
	width:100%;
	height:400px;
	min-height: 400px;
	
	
}
	
#alaune_1 {
	float: left;
	background:#fff;
	color:#565E82;
	width: 19%; 
	margin:15px;
	padding:20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	height:320px;
	min-height: 320px;
}

.logo_cadre{padding:5px;border:2px solid #D4D4D4;width:218px; height:130px}
#alaune_1 p{font-size:80%; text-align : justify;margin-bottom:1em;}

#alaune_1 img{margin-bottom:20px; }

#alaune_1 h2 a , #alaune_1 h2{
	margin-bottom : 15px;
	margin-top:15px;
	color:#1D2750;
	font-weight:bold;
	font-size:1.1em;
} 

#alaune_1 h2 a :focus,
#alaune_1 h2 a:hover,
#alaune_1 h2 a:active {color:#565E82; text-decoration:none;  }

.suite{	font-size:70%;color:#656668;width:123px;height:30px;float:left;}

.suite a {
	background: transparent url(img/savoirplus.png) no-repeat;
	color: #656668;
    font-size: 100%;
    font-weight: 500;
    width:123px; 
	height:30px}
	
.suite a :focus,
.suite a:hover,
.suite a:active {color:#D1001C; text-decoration:none;background-color:none; background: transparent url(img/savoirplushover.png) no-repeat; }

.contact_left{float:left;width:49%; padding-right:1%;}
.contact_right{float:left;width:48%; margin-left:1%;margin-bottom:1%;border:solid 4px #565E82; -ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}	

.formulaire_client{width:330px}


.contenu_gauche{float:left;width:60%;}
.logo_droite {float:left;width:38%;margin-right:1%}

/* gestion du portfolio */
.spip_logos_photos{
	border: 3px solid #3D599D;
	float: left;
	margin: 0 10px 10px 0;
	padding: 0;
}




/* 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
------------------------------------------ */

@media (max-width: 1024px) {
/* passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.header_int,
.main,
.footer,
.wrapper,
.content,
.aside,
.zone{ width: auto !important; margin: auto !important; }

.page { margin: 0; padding: 1%; }

/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
.content,
.aside { clear: both; float: none !important; width: auto !important; }
.nav ul li a { float: none; border: 0; }
#formulaire_recherche { display: none; position: static; text-align: center; }
.arbo { display: none; }
.footer .colophon { width: auto; float: none; }
.footer .generator { display: none; }


.zone{padding:15px 10px; }
.zone h1{float:left;color:#565E82; font-weight:400; font-size:100%; margin:0.2em 0.5em 0.2em 0}
.zone_bouton{margin:auto; width:280px; height:81px; margin-bottom:15px; background:url(img/zone_bouton_r.png)no-repeat}
.zone_bouton:focus,
.zone_bouton:hover,
.zone_bouton:active{background:url(img/zone_bouton_hover_r.png)no-repeat}

.ombre{background:url(img/ombre_r.png)no-repeat; width:280px; height:8px;margin:auto; clear:both}

.wrapper{float:none}
#alaune_1 {
	float: left;
	background:#fff;
	color:#565E82;
	width: 40%; 
	margin:2%;
	padding:3%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	height:320px;
	min-height: 320px;
}
.logo_cadre{margin:auto}

/* header du calendrier full-calendar */
table.fc-header td { display: block; text-align: left; }

}

@media (max-width: 640px) {

.wrapper{float:none}

#alaune_1 {
	float: left;
	background:#fff;
	color:#565E82;
	width: 80%; 
	margin:5%;
	padding:5%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	height:320px;
	min-height: 320px;
}

.nav {margin-right:5px; margin-top:0;float:none }
.nav ul {}
.nav ul li {width:100%; margin-top:3%; margin:bottom:2%}
.nav ul li a {width:70%; margin:auto}

.header #slogan {text-align: center;}
.contact_left{float:left;width:98%; padding:1%;}
.contact_right{float:left;width:96%; margin:1%;}

.spip_document_3.spip_documents.spip_documents_right > img {width:250px; height:149px; margin-left:auto;}
}

}



/* end */