/******** Début de la CSS - Styles adaptés par CJL ********/

html, body {
margin: 0;
padding: 0;
}

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 95%;
color: #000000;
background-color: #eee;
}

/* CLASS pour définir les conteneurs */
/* Il faut tenir compte du padding et des border dans le calcul de la dimension totale d'un conteneur */


#page {
display:block;
position:relative;
max-width:1320px;
height: auto;
margin:10px auto 10px;
padding: 0;
border: solid 1px gray;
background-color: #FFFFFF;
}

		@media (max-width:768px) {#page {margin: 0 auto;}}




#entete-global {
display:block;
width:100%;
height:auto;
background-color: transparent;
}
	
	
	#bandeau-top {
	display:block;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image:url(images/background-recherche-inverse.jpg);	
	background-position: right top;
	background-repeat: no-repeat;
	background-color: #ABCC37;
	}
	
			@media (min-width:768px) {#bandeau-top {height: auto; min-height: 76px;}}
			@media (max-width:880px) {#bandeau-top {background-image: none;}}
			@media (max-width:768px) {#bandeau-top {height: auto;}}


			#menu_haut{
			padding: 0;
			background-color: transparent;
			height: auto;
			}
			
			
					/**** Particularités en fonction de la dimension de l'écran (view port) ****/	
								
					@media (min-width:768px) {#menu_haut {display: inline-block; float: left; margin: 0 0 0 110px; line-height: 76px; min-width: 300px;}}						
					@media (max-width:768px) {#menu_haut {display: block; margin: 1em 0.5em 1em 0.5em; max-width: 74%;}}
										
	
				.menu_du_haut{
				display:inline;
				float: left;
				margin:0;
				padding:0;
				font-size:0.75em;
				font-weight: bold;
				text-transform:uppercase;
				color:#58585A;
				background-color: transparent;
				}



			@media (min-width:768px) {
			#cadre_recherche {
			border: solid 0px  blue; 
			display: inline-block;
			float: right;
			width: 365px;
			height:30px;
			margin: 22px 20px 0 0;
			padding:0;	
			background-image:url(images/cadre-recherche.png);
			background-size: 365px;
			background-repeat:no-repeat;
			}
			}
			
			
					@media (max-width:768px) {
					#cadre_recherche {
					border: solid 0px  blue; 
					display: block;
					width: 300px;
					height:24px;
					margin: 1em 0 1em 0.5em;
					padding:0;	
					background-image:url(images/cadre-recherche.png);
					background-size: 300px;
					background-repeat:no-repeat;
					}
					}
					
					
					
			.logo_sociaux {
			display: block;
			padding:0;
			margin: 0 auto;
			width: 40px;
			height: 40px;
			}
			
					@media (min-width:768px) {.logo_sociaux {margin: 0 0 0 20px;}}
				
			
			
			
			@media (max-width:768px) {	
			.logo_sociaux_top {position: absolute; right: 85px; top: 10px; z-index: 60; width: 25px; height: 25px;}						
			}
			
			
			@media (min-width:768px) {
			.logo_sociaux_top {display: inline; float: left; margin: 17px 0 0 340px; width: 40px; height: 40px;}
			}

					
					
									
							
	#montage {
	display:block;
	position:relative;
	width:100%;
	height:37.8787%;
	background-color: transparent;
	}		
													

		#image_thematique {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;	
		background-color: transparent;
		}
		
		
		#masque_entete{
		position:absolute; left: 0; top: 0; z-index:100;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;	
		background-image:url(images/masque-image-entete-filet.png);
		background-position: left top;
		background-repeat:repeat-y;
		background-size: 100%;
		background-color: transparent;
		}	
		
					@media (max-width:768px) {#masque_entete {height: 49.00%;}}
						
		
		@media (min-width:768px) {
		#logo-conteneur {
		position:absolute; left: 5%; top: 15%; z-index:150;
		width: 16%;
		height: auto;
		padding: 0;
		margin: 0;
		background-color: transparent;
		}
		}
		
				@media (max-width:768px) {
				#logo-conteneur {	
				display: block;
				width: 40%;
				height: auto;
				margin: 0 auto;
				padding: 1em 0;
				background-color: transparent;
				}
				}
	
		
		#slogan {
		position:absolute; left: 5%; top: 65%; z-index:150;
		width: 16%;
		height: auto;
		margin: 0;
		padding: 0;	
		background-color: transparent;
		}

				@media (max-width:768px) {#slogan {width: 40%; position:absolute; left: 5%; top: 15%; z-index:150;}}	
	

				

	#traduction_fr , #traduction_en {
	margin: 0;
	padding: 0;
	background-color: transparent;
	}


			@media (min-width:768px) {
			#traduction_fr {position:absolute;left:20px;top:23px;z-index:60;}
			#traduction_en {position:absolute;left:55px;top:23px;z-index:60;}
			}

			@media (max-width:768px) {
			#traduction_fr {position:absolute;right:45px;top:10px;z-index:60;}
			#traduction_en {position:absolute;right:10px;top:10px;z-index:60;}
			}




	/**** CLASS por le FLAG dans l'entête du site ****/
		
		.conteneur-bloc-nouvelle {
		position:absolute; right: 0; bottom: 10%; z-index:200;
		display: block;
		margin: 0;
		padding: 1em 1em 0 1em;
		width: 170px;
		height: auto;
		font-size: 1em;
		text-align: left;
		text-transform:none;
		background-image:none;
		background-position: left top;
		background-repeat:no-repeat;
		background-size: 100%;
		background-color: #FFFFFF;	
		opacity: 0.6;
		border-radius: 10px 0 0 10px;
		}
		
		.conteneur-bloc-nouvelle:hover {opacity: 0.8;}
		
		
		

				@media (max-width: 768px) {
				.conteneur-bloc-nouvelle {
				padding: 5px 5px 0 40px;
				width: 100px;
				height: 32px;
				font-size: 0.6em;
				}
				}







		
/*******************************************************************************/
	

/******** Barre de navigation ***********/	


	#menu-global_hor {
	display:block;
	clear: both;
	margin:0 0;	/** On met un marge négative vers le haut pour cacher un gap qui apparait avec l'adaptation de l'image de l'entête **/	
	padding:0;
	width:100%;
	height:auto;	
	text-align: center;
	border: none;
	background-color: #1F2128;
	}
	
			@media (max-width:768px) {#menu-global_hor {margin: 0; padding: 0.5em 0;}}
			
			
			/******** Item du menu en texte et sans lien avec un sous-menu ***********/
/**
On utilise le plugin MENU pour créé un item en texte libre.
Un item en lien arbitraire est trop difficile à géré car en applicant un style qui rend le lien non actif,
on empêche le style de survol (hover) du tag <a> d'être appliqué. L'idée c'est d'appliquer au li et au span de l'item
en lien libre les mêmes styles qui sont utilisés sur les items du menu avec des liens actifs.
Ainsi, même si l'item ne présente pas de lien, l'item se comporte de la même façon que les autre items du menu
en version libre et en survol.
**/		

			
			li.item_menu_texte {
			font-family: Verdana, Geneva, sans-serif;
			font-weight: normal;
			text-decoration: none;
			color: #abcc37;
			white-space: normal;
			text-shadow: 0 0px 0 #000000;
			line-height: 70px !important;
			background: none;
			text-transform: uppercase !important;
			border-style: solid;
			border-width: 0 0px 0 0px;
			border-color: transparent #393939 transparent #858585;			
			}
			
					/** On applique les styles pour l'affichage sur grand écran seulement **/				
					@media (min-width:600px) {
						li.item_menu_texte { padding: 0 60px;}				  
						li.item_menu_texte:hover {color: #000; background-color: #ABCC37;}				
						}
								
					
				

/**
Styles appliqués sur un sous-item du menu créé en texte libre. Le lien externe est fait directement dans le titre avec un target
qui permet de provoquer l'ouverture d'une nouvelle fenêtre du navigateur.
**/
				
			li.sous_item_menu_texte {
			font-family: Arial, Helvetica, sans-serif;
			font-weight: normal;
			text-decoration: none;
			color: #fff;
			white-space: normal;
			text-shadow: 0 0px 0 #000000;
			background: none;
			border-style: solid;
			border-width: 0 0px 0 0px;
			border-color: transparent #393939 transparent #858585;		
			}
			
					/** On applique les styles pour l'affichage sur grand écran seulement **/
					@media (min-width:600px) {a.sous_item_menu:hover {color:#000 !important; background-color: #ABCC37 !important;}}
				
				
				
			/** Styles pour afficher l'item et le sous-item du menu en block sur petits écrans  **/
			@media (max-width:600px) {.texte_libre {display: block; float: none; padding:0; font-size: 14px; line-height: 30px;}}
										  		
		

/*******************************************************************************/	

	
/********* Corps de la page ************/



#centre, #centre_accueil {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: auto;
background-color: transparent;
}


/********* Actualités ************/


	#accueil_actualites_titre{
	display: block;
	margin: 0;
	padding: 10px 2%;
	width: 96.0015%;
	height: auto;
	font-size: 1.5em;
	background-color: #ABCC37;
	border-top: solid 0px #1F2128;
	border-bottom: solid 0px #000000;
	}
	
			@media (max-width: 768px) {#accueil_actualites_titre {border: 0;}}
	
		
	#accueil_actualites{
	position: relative;
	display: block;
	margin: 0;
	padding: 3%;
	width: 94.0015%;
	height: auto;
	background-color: #1F2128;
	}
	
				@media (max-width: 768px) {#accueil_actualites {display: none;}}
				
				
		.slick-slide{margin-right: 10px;}	/** Pour ajouter une marge entre les diapositives du plugin SLICK **/
	
	

	#accueil_actualites_mobile{
	position: relative;
	display: block;
	margin: 0;
	padding: 2% 2% 4% 2%;
	width: 96%;
	height: auto;
	background-color: transparent;
	}
	
				@media (min-width: 768px) {#accueil_actualites_mobile {display: none;}}


						
			.accueil_actualites_block {
			margin: 0 0 1em 0;
			padding: 2% 2% 4% 2%;
			width: 96%;
			height: auto;
			border-bottom: solid 1px #999999;
			}
						
		
			.logo_actualite {
			display: block;
			margin-bottom: 1em;
			padding: 0;
			width: 100%;
			height: auto;
			max-height: 200px;
			overflow: hidden;
			background-color: transparent;
			}
			
			
			.logo_actualite_cadre {
			display: block;
			margin-bottom: 1em;
			padding: 0;
			width: 100%;
			height: auto;
			max-height: 165px;
			overflow: hidden;
			border: solid 1px #999999;
			background-color: transparent;
			}
			
			
					@media (max-width: 768px) {.logo_actualite,.logo_actualite_cadre {max-height: none;}}
						
			
			
			/** Pour ajuster les boutons de navigation du plugin SLICK **/
			
			.slick-prev { left:-32px !important; top: 25% !important;}
			.slick-next { right:-15px !important; top: 25% !important;}
			
			
			.slick-prev:before, .slick-next:before {
			font-size: 30px !important;
			color: #ABCC37 !important;
			}
			
			
/********* Section des icônes ************/
	

	#accueil_liens_icones{
	display: block;
	margin: 0;
	padding: 4%;
	width: 92%;
	min-height: 250px;
	background-color: transparent;		
	}
	
			@media (max-width: 768px) {#accueil_liens_icones {margin: 0; padding: 2%; width: 96%; background-image: none; min-height: 1em;}}
			

			
		
		.conteneur-icone{
		display: inline-block;
		float: left;
		position:relative; 
		margin: 10px 15px 15px 15px;
		padding: 0;
		width: 200px;
		height: 125px;
		background-color: transparent;		
		}
	
				@media (max-width: 768px) {.conteneur-icone {width: 145px; height: 91px; margin: 1% 0.5% 2% 0.5%;}}
		
		
		
					.conteneur-icone-collecte{
					display: inline-block;
					float: left;
					position:relative; 
					margin: 15px auto;
					padding: 0;
					width: 200px;
					height: 125px;
					background-color: transparent;		
					}
		
		
		
			.image-icone{
			position:absolute; left: 0; top: 0; z-index:200;
			margin: 0;
			padding: 0;
			width: 200px;
			height: 125px;
			background-color: transparent;
			}
			
					@media (max-width: 768px) {.image-icone {width: 145px; height: 91px;}}
					
					
					
					
					.image-icone-collecte{
					position:absolute; left: 0; top: 0; z-index:200;
					margin: 0;
					padding: 0;
					width: 200px;
					height: 125px;
					background-color: transparent;
					}
					
					
			
			
			.texte-icone {
			position:absolute; left: 0; top: 85px; z-index:100;
			margin: 0;	
			padding: 0;
			width: 200px;
			height: auto;
			text-align: center;
			text-transform:uppercase;
			background-color: transparent;
			}
			
					@media (max-width: 768px) {.texte-icone {width: 145px; top: 65px; font-size: 0.75em;}}
			
			
			
					.texte-icone-collecte {
					position:absolute; left: 0; top: 85px; z-index:100;
					margin: 0;	
					padding: 0;
					width: 200px;
					height: auto;
					text-align: center;
					text-transform:uppercase;
					background-color: transparent;
					}
			
									

/******** Corps avec colonne à droite (sidebar) *********/
	
	
	
	#corps{
	display: inline-block;
	float:left;
	margin: 0;
	padding: 2% 2%;
	width: 96%;
	height: auto;
	background-color: transparent;
	}
	
	
				@media (max-width: 768px) {#corps {margin: 0; padding: 2% 2%; width: 96%;}}	

				

/********** Colonne de droite ***********/	
						
			
			
	#colonne{
	display: inline-block;
	float:left;
	margin: 0;
	padding: 0;
	width: 24%;
	height: auto;
	background-color: transparent;
	}
	
				@media (max-width: 768px) {#colonne {margin: 10px 0; padding: 0; width: 100%;}}		
					
						

/********************* BAS DE PAGE *********************/


#basdepage-global {
display:block;
position:relative;
margin:0;
padding: 20px 0;
width:100%;
height:auto;
color: #DDDDDD;
line-height: 1.2em;
font-size: 1em;
background-color: #1F2128;
}


			@media (max-width: 768px) {
			#basdepage-global {
			padding: 0;
			}
			}



	#basdepage-section-1 {
	display:inline;
	float: left;
	width:21%;
	margin-left:2%;
	padding-right:2%;
	height:auto;
	background-color: transparent;
	}
	
		.logo_bas_de_page {
		display:block;
		padding:0;
		margin: 0;
		width: 125px;
		height: auto;
		background-color: transparent;
		}
		
		.logo_bas_de_page_morinheights {
		display:block;
		padding:0;
		margin: 0;
		width: 200px;
		height: auto;
		background-color: transparent;
		}
		
		
		.logo_bas_de_page_fleurons {
		display:block;
		padding:0;
		margin: 0;
		width: 200px;
		height: auto;
		background-color: transparent;
		}
		
		
		
				@media (max-width: 768px) {.logo_bas_de_page, .logo_bas_de_page_morinheights, .logo_bas_de_page_fleurons {margin: 0 auto;} }
		
		

	
	#basdepage-section-2 {
	display:inline;
	float: left;
	width:21%;
	padding-left:2%;
	padding-right:2%;
	height:auto;
	border-left: solid 0px #999999;
	background-color: transparent;
	}

	
	/* Ajustement des styles du bouton Météo Média */	
	@media (min-width: 768px) {#plemx-root .weather-button {margin:0 !important;} }
	
	
	
	
	#basdepage-section-3 {
	display:inline;
	float: left;
	width:21%;
	padding-left:2%;
	padding-right:2%;
	height:auto;
	border-left: solid 0px #999999;
	background-color: transparent;
	}
	
		.logo_mrc {
		display:block;
		padding:0;
		margin: 0;
		width: 100px;
		height: auto;
		background-color: transparent;
		}
		
				@media (max-width: 768px) {.logo_mrc {margin: 0 auto;} }

	#basdepage-section-4 {
	display:inline;
	float: left;
	width:20.5%;
	margin-right:2%;
	padding: 0 0 0 2%;
	height:auto;
	border-left: solid 0px #999999;
	background-color: transparent;
	}
	
	
			
			
			@media (max-width: 768px) {
			#basdepage-section-1, #basdepage-section-2, #basdepage-section-3, #basdepage-section-4  {
			width: 80%;
			margin: 0 auto;
			padding: 10%;
			text-align: center ;
			font-size: 0.9em;
			border: none;
			border-bottom: solid 1px #999999;
			}
			}


	@media (min-width: 768px) {
	#copyright-texte {
	position:absolute; left: 0; bottom: 0; z-index:50;
	display:block;
	width: 80%;
	height: auto;
	font-size: 0.8em;
	margin:0;
	padding: 1em 10% 1em 10%;
	text-align: center;
	color: #AAAAAA;
	background-color:transparent;
	}
	}
	
			@media (max-width: 768px) {
			#copyright-texte {
			display:block;
			width: 80%;
			height: auto;
			font-size: 0.8em;
			margin:0;
			padding: 1em 10% 1em 10%;
			Text-align: center;
			color: #AAAAAA;
			background-color:transparent;
			}
			}
	
	
	
	.copyright_impression {
			margin-left:10px;
			font-size:70%;
			color:#999999;
			text-align: left;
			}

			
			
#impression{
margin:0;
padding:1%;
width: 98%;
font-family: Times, serif;
font-size: 1.2em;
background-color: transparent;
}
	
			
/*********************/				
	
/* Autres CLASS */

/*********************/	


/** Ajustement du Calendrier des activités **/

#calendrier_activites{
position:relative; 
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: 30%;
background-color: transparent;	
}


		@media (max-width: 768px) {#calendrier_activites {display: block; float: none; width: auto;}}



				/** Présentation de l'icone du Calendrier des collectes sur la page du Calendrier **/
				#icone_collecte{
				position:relative; 
				display: inline-block;
				float: left;
				margin: 15px auto;
				padding: 4%;
				width: 30%;
				background-color: transparent;	
				}
				
						@media (max-width: 768px) {#icone_collecte {display: block; float: none; width: auto;}}









@media (min-width: 768px) {
.list_doc_left {float:left; width:45%; margin-right:10px;}
.list_doc_right {float:left; width:45%; margin-left:10px; padding-left:20px; border-left:solid 0px #CAC8C9;}
}


@media (max-width: 768px) {
.list_doc_left,.list_doc_right {display: block; width:100%; margin: 0; padding: 0;}
}

@media (min-width: 768px) {.colonne_un_tiers {width: 30%;}}



/********* Espacements et traits ************/


#spacer {
clear:both;
width:100%;
height: 0px;
background-color: transparent;
}

#spacer_gap {
clear:both;
width:100%;
height: 5px;
background-color: transparent;
}

#spacer-centre {
clear:both;
width:100%;
height:0px;
background-color:transparent;
text-align:center;
}

.spacer_vide {
clear:both;
width:100%;
height: 10px;
background-color: transparent;
}

	.spacer_vide_sans_clear {
	clear:left;
	width:100%;
	height: 10px;
	background-color: transparent;
	}

.spacer_ligne {
clear:both;
width:100%;
margin-top: 10px;
height: 10px;
border-top:solid 1px #CAC8C9;
background-color: transparent;
}

.spacer_dotted {
clear:both;
width:100%;
height: 10px;
border-top:dotted 1px #000000;
background-color: transparent;
}

.retour {
clear:both;
width:100%;
margin-top:10px;
margin-bottom: 10px;
padding-top:10px;
border-top:solid 1px #CAC8C9;
font-size:70%;
text-align:left;
background-color: transparent;
}

.retour_sans_trait {
clear:both;
width:100%;
margin-top:10px;
margin-bottom: 10px;
font-size:70%;
text-align:left;
background-color: transparent;
}



/***** Titraille *****/



h1.titre_actualites {
margin-top:35px;
padding:0;
font-size:1.50em;
line-height: 1.5;
background-color:transparent;
text-align:center;
font-weight: normal;
margin-bottom: 22px;
}


h1,.h1,.titre-extrait,
h2,.h2,.titre,
h3,.h3,.titre-moyen,
h4,.h4,.titre-petit,
h5,.h5,
h6,.h6 { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: bold; }

h3,.h3,.titre-moyen { font-size: 1.5em;line-height: 1.5; color:#333333;}			/* Pour le référencement du surtitre */
h2,.h2,.titre { font-size: 2.0em;line-height: 2.0;color:#333333;}				/* Pour le référencement du titre */
h1,.h1,.titre-extrait { font-size: 1.2em;line-height: 1.2; color:#333333;}	/* Pour le référencement du soustitre */
h4,.h4,.titre-petit { font-size: 1.0em; line-height: 1.0;  color:#333333;}


/* CLASS pour les intertitres */
h3.spip { text-align: left; margin-top: 1.0em; margin-bottom: 1.0em; font-size: 1.25em; font-weight: bold; }


.texte {font-size:1em;}
.texte-petit {font-size:0.80em;}

		.texte_justifie {
		font-size:1em;
		background-color:transparent;
		text-align:justify;
		}


/* CLASS pour les encadrements */
blockquote.spip { margin: 1em 0 1em 0; padding: 0em 1em 0 1em; border: 1px solid #aaa; }


/* CLASS pour la couleur appliquée à un résultat de recherche (par défaut en jaune via spip.css) */
.spip_surligne { background-color: yellow; }


hr { height: 1px; margin: 1.5em 0; border: 0; background: #999; color: #999; clear:both; }


img, .spip_logos { margin: 0; padding: 0; border: 0; }



p  {
font-size:1em;
background-color:transparent;
}

li {
font-size:1em;
background-color:transparent;
text-align:left;
margin-bottom: 0.3em;
}



/* CLASS pour les liens hypertextes */

/* Hyperliens de SPIP
---------------------------------------------- */
a , a:link, a:visited {color:#071588; text-decoration: underline; }
a:focus,
a:hover,
a:active { background-color: transparent; color: #D72700; text-decoration: underline; }


/* CLASS pour les autres liens hypertextes */

a.menu:link, a.menu:visited {
color:#FFFFFF;
text-decoration:none;
}

a.menu:hover {
color:#FFFFFF;
text-decoration:underline;
}

a.rouge:link, a.rouge:visited {
color:red;
text-decoration:none;
}

a.rouge:hover {
color:red;
text-decoration:underline;
}

a.vert:link, a.vert:visited  {
color:#071588;
text-decoration:underline;
}

a.vert:hover {
color:#D72700;
text-decoration:underline;
}

a.bleu:link, a.bleu:visited {
color:#071588;
text-decoration:underline;
}

a.bleu:hover {
color:#D72700;
text-decoration:underline;
}


a.a_white:link {
color:white;
text-decoration:none;
}

a.a_white:visited {
color:white;
text-decoration:none;
}

a.a_white:hover {
color:white;
text-decoration:underline;
}

a.a_gray:link {
color:#58585A;
text-decoration:none;
}

a.a_gray:visited {
color:#58585A;
text-decoration:none;
}

a.a_gray:hover {
color:#58585A;
text-decoration:underline;
}


span.on{
font-size:1.25em;
}


/*********************/


/* 	Logos */


.logo_sans_marge { padding:0; margin: 0;}
.logo_cadre	{width:204px; padding:0; margin: 5px 0 5px 0; border: solid 1px #333333;}
.logo	{ padding:0; margin: 2px 0 2px 0;}
.logo_cadre_accueil	{ padding:0; margin: 0px 0 0px 0; border: solid 1px #666666;}
.logo_centre {float:none; padding:0; margin:0;}
.logo_centre_cadre {float:none; padding:0; margin:0; border: solid 1px #666;}



.logo_left_cadre	{
	max-width: 204px;		/* 	On respecte la propostion 4:3 dans les 2 sens avec des valeurs entières */
	height: auto;
	border: solid 1px #333333;
	padding:0;	
}

.logo_left	{
	max-width: 204px;
	height: auto;
	padding:0;	
}

.logo_conseiller	{
	max-width: 150px;		/* 	On respecte la propostion 4:3 dans les 2 sens avec des valeurs entières */
	height: auto;
	border: solid 1px #333333;
	padding:0;	
}

				
.logo_left_cadre, .logo_left, .logo_conseiller {display: inline; float: left; margin-right: 1em;}



.logo_right_cadre	{
	max-width: 204px;
	height: auto;
	border: solid 1px #333333;
	padding:0;	
}

.logo_right	{
	max-width: 204px;
	height: auto;
	padding:0;	
}

.logo_right_cadre, .logo_right {display: inline; float: right; margin-left: 1em;}


		@media (max-width:768px) {
		.logo_left_cadre, .logo_left , .logo_right_cadre, .logo_right, .logo_conseiller, .logo_cadre, .logo_document {max-width: 126px;}
		}






.logo_pub	{
	display: inline; 
	float: left;
	border: solid 1px #333333;
	padding:0;
	margin-left: 0;
}

.logo_document, .logo_album	{
	display: inline; 
	float: left;
	border: solid 1px #333333;
	padding:0;
	width: 126px;
	height: auto;
	text-align: center;
	margin:0 20px 20px 0;
}



/* 	Formulaire de recherche */


/* 	Les CLASS concernant le moteur de recherche dans la CSS "spip_formulaire.css" de la distribution
	doivent être retirées et réinscritent dans la présente CSS. */
	
/* 	Le formulaire "recherche.html" de la distribution doit être modifié pour afficher le mot "Rechercher" dans
	la fenêtre de saisie. Il faut se référer à la version 1.9.2 de SPIP pour voir comment modifier
	le formulaire. */

/* 	Class qui contrôle le moteur de recherche et la fenêtre de saisie à l'intérieur.
	La dimension horizontale occupe tout l'espace de la cellule (100%).
	La dimension verticale est de 45 pixels (avec IE mais pas avec FF).
	Les paddings augmentent la dimension occupée par le moteur de recherche (avec IE). */
	
.formulaire_recherche {
	position:relative;
	width: 100%;
	height:100%;
	margin:0;
	padding:0;
	border: solid 0px red;
	background: none;
	background-color: transparent;
}

/* 	On met en background de la fenêtre de saisie la même image que dans le conteneur
 ou un fond blanc ou de couleur car un fond transparent rend difficile la mise en place du curseur
 pour effectuer une recherche. */
 
.formulaire_recherche input.text  {
	width: 320px;
	line-height: 30px;
	margin-top:0px;
	margin-left:0px;
	padding: 0 5px;
	border: solid 0px green;
	background-color: transparent;
}


		@media (max-width:768px) {	
		.formulaire_recherche input.text  {width: 260px; line-height: 24px;}
		}

		

/* 	Pour mettre en place le bouton SUBMIT en transparence dans le cas ou une loupe est présente à droite
de la fenêtre de saisie. Il faut modifier le formulaire "recherche.html" du dossier squelettes-dist/formulaire
pour retirer les ">>" du paramêtre "value" du bouton. */

.formulaire_recherche input.submit {
	position:absolute;right:0px;top:0px;z-index:90;
	border: solid 0px yellow;
	margin:0;
	padding:0;
	width:30px;
	height:30px;
	background-color: transparent;
}

		@media (max-width:768px) {	
		.formulaire_recherche input.submit {width:30px; height:24px;}
		}





.formulaire_recherche label {display: none;}



/* CLASS pour les formulaires du plugin FORMIDABLE */

.formulaire_cadre {			/* class servant à la présentation du formulaire dans le squelette ARTICLE */
position:relative;
padding:10px 10px 0 10px;
border: solid 1px #999;
background-color:transparent;
}


.formulaire_formidable {margin:2em;}

 h3.legend {font-size:1.25em; background-color:#ccc; margin:0 0 1em -1em; padding:2px 4px 2px 4px;}


input.text,
textarea {
display:block;
padding-left:0.5em;
margin: 0.25em 0 0em 0;
vertical-align:top;
}

		
fieldset {border:0px;}

.explication {margin: 0em 0 0 0; font-size:0.9em; color:#666;}

.editer {list-style:none; margin-bottom:1.5em;}

.fieldset {list-style:none;}

.choix {margin-top:0.25em;}

.erreur_message {color: red; font-weight: bold;}

span.obligatoire {color: green;}


.texte-en-gras {font-weight: bold;}
.filet-autour-groupe {margin-bottom: 1em; padding: 1em 1em 0 1em; border: solid 1px #666666;}




/*********************/	


/* Listes */

ul.spip {list-style-type:square; padding-left:16px;}
ol.spip {}
li.spip {}


/*********************/


/* CLASS pour les Tableaux */

table.spip { max-width: 99%; border-collapse: collapse; border-spacing: 0; line-height: normal; }
table.spip caption { margin:0.5em; background: none; border-bottom: 0px solid; text-align: left; font-weight: bold; }
table.spip thead th { border: 1px solid #ccc; border-width: 1px 1px; border-bottom: 1px solid #333; }
table.spip tbody tr th,
table.spip tr td { background: none; }
table.spip th, table.spip td { padding: 0.20em 0.40em; text-align: left; border: 1px solid #ccc; }
table.spip tbody tr.odd th,
table.spip tr.odd td { background: #EED; }



/* CLASS pour les Documents */

.spip_doc_titre { margin-right: auto; margin-left: auto; margin-top:0.5em; font-weight: bold; font-size: 0.80em; }
.spip_doc_descriptif { clear: both; margin-right: auto; margin-left: auto; font-size: 0.80em; }
.spip_documents { margin: 0; padding: 0; line-height: normal; text-align:center; }
.spip_documents_center { display: block; clear: both; width: 100%; margin: 1em auto; }
.spip_documents_left { float: left; margin: 0 1em 0.5em 0; }
.spip_documents_right { float: right; margin: 0 0 0.5em 1em;}


/* CLASS pour gérer le responsive des DOCUMENTS insérés dans les champs textes des articles */
		@media (max-width:768px) {.spip_documents_left,.spip_documents_right  {
		display: block;
		width: 100%;
		margin: 1em auto;
		float: none;
		}
		}
		



/* Citations, code et poesie */

blockquote.spip { min-height: 0px; background-image:none; color:#444444; font-size:1em; background-color:#F0F0F0; margin: 1.5em 0 1.5em 0; padding: 0em 1em 0 1em; border: 1px solid #aaa; }
blockquote.spip_poesie {text-align:left; color:gray; background-color:#F0F0F0; margin: 0em; padding: 0.5em; border: 1px solid #aaa; font-family: Garamond, Georgia, Times, serif; }
blockquote.spip_poesie div { text-indent: 0em; margin-left: 0em;}



/* Mini-Calendrier - Pour ne pas afficher le titre du calendrier */

h2.menu-titre {display: none;}


/* Class pour les codes de couleurs du calendrier des événements */

.calendriermini table td.calendrier_gris a {background-color: #BABABA; color: #000000; border-color: #BABABA;}
.calendriermini table td.calendrier_vert a {background-color: #00AF40; color: #fff; border-color: #00AF40;}
.calendriermini table td.calendrier_jaune a {background-color: #FFFF00; color: #000000; border-color: #FFFF00;}
.calendriermini table td.calendrier_gris a:hover, 
.calendriermini table td.calendrier_vert a:hover, 
.calendriermini table td.calendrier_jaune a:hover {background-color: #808080; color: #fff; border-color: #808080;}


/* Class pour les dates des activités - On retire le soulignement en pointillé */

abbr[title] {text-decoration: none !important;}



/* Class pour l'affichage du formulaire du plugin CRAYON */

.crayon-html {background-color: #FFFFB6 !important;}


#champ_statut_sentier {max-height: 100px !important;}




/* Class pour Section Plein air - Info affichée à droite */


.info_a_droite {
	display: inline-block;
	float:right;
	margin: 0 0 1em 1em;
	padding: 0;
	width: 24%;
	height: auto;
	background-color: transparent;
	}
	
				@media (max-width: 768px) {.info_a_droite {margin: 10px 0; padding: 0; width: 100%;}}	



.meteo_media_plein_air {width: 234px; margin: 0 auto;}

.date_mise_a_jour {
	margin-top: 1em;
	font-weight: bold;
	text-align: center;
	padding: 5px 3px;
	color: #FFFFFF;
	background-color: #16284C;
	}	



/* Class pour l'affichage des tableaux des sentiers de Plein-Air */



.logo_picto	{
	display: inline; 
	float: left;
	padding:0;
	width: 30px;
	height: auto;
	margin:0 1em 0 0;
}

.logo_picto_legende	{
	display: inline; 
	float: left;
	padding:0;
	width: 30px;
	height: auto;
	margin:0 1em 0 0;
}


.texte_legende {font-size: 0.8em; line-height: 30px;}


table.sentiers_liste {
width: 100%;
border: solid 1px #999;
margin-bottom: 0.5em;
}

#liste_sentiers_titre  {
width: 96%;
padding: 0 2% !important;
font-size:1.3em;
line-height: 100px;
background-color:transparent;
color: #ACCC37;
text-shadow: 0.1em 0.1em 0.1em #222;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: 100% 50%;
border-radius: 50px / 50%;
text-align:left;
font-weight: bold;
cursor: pointer;
}

		@media (max-width:768px) {#liste_sentiers_titre {font-size: 1.0em; line-height: 45px; height: 45px; border-radius: 22px / 50%; }}
		

.corps_du_tableau {display: none;}


td.item_sentiers_titre {
background-color:#888;
color: #ddd;
font-size:0.98em;
font-weight:500;
padding: 7px 1px 7px 2px;
}
	
		
td.item_sentiers_liste {
height: 0.8em;
font-size:0.8em;
background-color:transparent;
padding: 7px 1px 7px 2px;
border-top: solid 1px #999;
}

		@media (max-width:768px) {td.item_sentiers_liste {font-size: 0.8em;}}

		
tr:nth-child(even) {background: #eee;}
tr:nth-child(odd) {background: #ddd;}

td.limitation_largeur {max-width: 210px;}		/* Pour permettre au CRAYON de prendre la place nécessaire lord de l'édition côté public */


#switch_fleche {
font-size:1.2em;
color: #999999;
background-color:transparent;
text-align:center;
font-weight: normal;
padding: 2px 4px 2px 2px;
border-top: solid 1px #999;
cursor: pointer;
}

		#switch_fleche:hover {color: #FF0000;}

	
@media (min-width:768px) {
.logo-plein-air {
	height: auto;
	padding:0;	
	display: inline;
	float: right;
	margin-left: 0em;
}
}


@media (max-width:768px) {.logo-plein-air {display: block; margin-left: 0; margin-bottom: 1em; max-width:100%;}}


.affichage_administrateur {
	width: 300px;
	margin: 2em 0;
	padding: 1em;
	background-color: #ddd;
	border: solid 1px #aaa;
}


.titre_saison {
	font-size: 1.5em;
	line-height: 1.5;
	color:#333333;
	cursor: pointer;
}

#info_saison {display: none;}


/******** Fin de la CSS ********/