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

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

-------------------------------------------------------------- */
body {width: 100%; }
.spip-admin-bloc, .spip-admin-float {z-index: 1010 !important;right: 10% !important;}
.section {clear: both;}
/* ***************************DECLARATION DES LIGNES**********************************/
.ligne1{ /* banniere pour slider d'images panoramiques en page d'accueil */
	box-shadow: 0px 1px 14px rgba(0, 0, 0, 0.5);
	background-color: #F1EFED;}
.ligne1b{ /* banniere d'image panoramique pour pages intérieures */
	background-image: url(../images/entete-pages-interieures.jpg);
	background-position: top center;
	background-size: cover; 
	background-repeat: no-repeat;
	box-shadow: inset 0px 1px 14px rgba(0, 0, 0, 0.5); 
}
.ligne2{/* zone contenu */
	background-color: #F1EFED;
	border-top: 1px solid #FFFFFF; 
	padding: 1em;
} 
.ligne3{/* zone contenu */
	background-color: #FFFFFF;
} 
.ligne4 {/* pour footer */
	background-color:#393836; 
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5); 
	border-top: 1px solid #F5F3F1;
	padding: 1em 0;
} 
/* Nicolas Gallagher's micro clearfix */
.ligne1:before, .ligne1:after, .ligne2:before, .ligne2:after, .ligne4:before, .ligne4:after { content:""; display:table; }
.ligne1:after, .ligne2:after, .ligne4:after { clear: both; }

/* ***************************DECLARATION DES COLONNES**********************************/
#container {max-width:85%; margin:0 auto;}

#pleinelargeur, .blocBlanc {display:block; border-radius: 4px; background-color:#FFF; padding: 3% 4%; box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1); z-index: 200; position: relative; }
#BarreDesBulles {display:block; border-radius: 4px; background-color:#FFF; padding: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1); z-index: 200; position: relative; }
#colonneDr {display:block; border-radius: 4px; float: left; }
#colonneGch {display:block; border-radius: 4px; float: left; background-color:#FFF; box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);  z-index: 2; padding: 3% 2%;}

/* ******************************************************************************************/
/*-----1ERE LIGNE = HEADER : IMAGE PANORAMIQUE-----*/
/* ******************************************************************************************/
.header { padding-bottom: 1.5em;  }
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold;  }
.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 {margin-bottom:0;}
.header #slogan { margin: 0; }

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

.nav {}
.nav li {display:inline;}
.nav li a { display: inline-block; padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 0.25em;  text-decoration: none;  background: #f0f0f0; color: #db1762; }
.nav li.on a { background:#0099CC; color:#fff; font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #0099CC; color:#fff; }

/* diaporamas OWL */
#demo .spip_documents_center, 
.owl-carousel .spip_documents_center {margin:0 !important;}
.owl-carousel .spip_documents_left {margin-right:10px !important;}
.owl-carousel .spip_documents_right {margin-left:10px !important;}

/************************************ STYLES DU MENU LATERAL********************************/
/* Note : #menu-normal et #menu-mobiles sont essentiels pour la structure du menu latéral  */
#menu-normal {display: none !important;}
#menu-mobiles {
  display: flex;
  width: 5rem;
  height: 3rem;
  background: #0099CC;
  padding: 1.25rem;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 999;
  cursor: pointer;
}
/* ******************************************************************************************/
/*-----2EME LIGNE = CONTENU  -----*/
/* ******************************************************************************************/
/* présentation d'éléments en grille */
.grille, .sitesreferences { /* conteneur */
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	justify-content: center;
	margin: 1vw auto;
}
.elementDeGrille, 
.siteEnGrille,
.elementEn4colonnes,
.elementEn5colonnes,
.elementEn6colonnes { /* cf tailles dans mediaqueries.css */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border: 1px solid #E2DCD8; 
	border-radius: 4px;
	margin: 0 10px 10px 0; 
    text-align: center !important;
	box-shadow: 0px 8px 8px -6px rgba(0,0,0,0.3) !important;
	background-color: #FFFFFF;
}
.elementDeGrille .spip_logo,
.siteEnGrille .spip_logo,
.elementEn4colonnes .spip_logo,
.elementEn5colonnes .spip_logo,
.elementEn6colonnes .spip_logo {
	border-radius:4px 4px 0 0; 
	width:100%; 
	float:none !important; 
	margin:0 !important;
}
.elementDeGrille h6 {padding:10px 0;}

/*-----LES IMAGES  -----*/
/* ******************************************************************************************/
img {width:auto; height:auto; max-width:100%; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.opacite { opacity:1; filter : alpha(opacity=100);} 

/* Zone portfolio (documents joints en tant qu'images)*/
/* règles communes */
#documents_portfolio { padding: 0; margin:0; width: 100%; }  
#documents_portfolio li {float:left; margin:0 6px 6px 0; font-size:0.85em; display: inline; list-style: none;}
#documents_portfolio a { display:inline-block; margin: 0; }  
#documents_portfolio .titreDoc{margin:15px 0 0 0;}
#documents_portfolio .descriptionDoc{margin:0;}
#trombinoscope {padding:0; margin:0; width:100%;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#trombinoscope .spip_documents {
	border: 1px solid #E2DCD8;
	padding:0;
	text-align:center;
	min-height: 380px;
	max-width: 14%;
	margin: 0 2% 2% 0;
	background-color: #fff;
}
/* Exception : Page des élus: trombinoscope */
#trombinoscope li {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0.5% 0.5% 1% 0.5%;
    border: 1px solid #E2DCD8;
    border-radius: 4px;
    margin: 0 2% 2% 0;
    text-align: center !important;
    box-shadow: 0px 8px 8px -6px rgba(0,0,0,0.3) !important;
}
#trombinoscope li p {min-height:55px;}

/* LOGOS d'ARTICLES ET DE RUBRIQUES */
.spip_logo {float:none; margin: 0 auto; padding-bottom: 10px; border: none; }
#fondBleu .spip_logo {margin: 4px 10px 4px 4px !important;}
.spip_doc_descriptif {display: none !important;}
 
/* ******************************************************************************************/
/*-----3EME LIGNE = PIED DE PAGE  -----*/
/* ******************************************************************************************/
#footer{max-width: 95%; margin:1em auto; }
#footer h4 {margin:10px 0}
#footer p {margin-bottom: 0 !important;}
.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

/*************************************************************/
/* SPECIFICATIONS PAGE D'ACCUEIL */ 
/*************************************************************/
/* Classe des logos appelés dans les blocs Actus, Démarches, Agenda, etc... */
.logoPlusPetit {max-width: 45% !important; float: left !important; margin-right:10px !important; margin-bottom:10px !important;}
#diapoAffiches {
	border-radius: 4px;
	margin-bottom: 1em;
	padding: 35px 30px;
}
#sectionBlancheAccueil, #sectionBleueAccueil, #sectionVerteAccueil {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	margin-top: 1em;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}
#sectionBleueAccueil {
	background: url(../images/fdAccueil-sectionAgenda.jpg) no-repeat top center / cover; 
	padding: 35px 30px;}
#sectionVerteAccueil {
	background: url(../images/fond-Accueil-sectionDemarches2.jpg) no-repeat top center / cover; 
	padding: 35px 30px;}
#sectionBlancheAccueil {background-color: #FFFFFF; padding: 30px 30px 0 30px; border-bottom: 4px solid #393836;}
#sectionALAUNE1 {background-color: #F1EFED; padding: 35px 30px;}
/*************************************************************/
/* fin */