.spip-admin-float { display:none; }

/**************************************************
STRUCTURES DE LA PAGE
**************************************************/

			body{
				font-family: 'Roboto', sans-serif;
				margin: 0;
				padding: 0;
				color: #303030;
				position: relative;
			}
			header{
				width: 100%;
				position: fixed;
				top: 0;
				padding: 5px 0 0 0;
				background-color:  #294675;
				border-bottom: 5px solid #294675; 
				box-shadow: 0px 5px 5px #000; 
				z-index: 900;
			}
			.wraper{
				position: relative;
				width: 95%;
				max-width: 1150px;
				margin: 0px auto;
			}
			main{
				float: left;
				width: 100%;
				max-width: 1150px;
				margin: 140px 0 40px 0;
				padding-top: 35px;
			}
					section, aside{
						float: left;
					}	

					main aside.gauche{
						width: 12%;
						padding-left: 10px;
					}

					main section.article_entier{
						width: 58%;
						padding: 0 60px;
					}
					main section.article_entier article{
						padding-right: 0;
					}
					main aside.droite{
						width: 18%;
					}
					article{
						width: 100%;
						max-width: 1150px;
						padding: 0;
						margin: 0;
						box-sizing: border-box;
					}
					.pages article{
						width: 100%;
						max-width: 1150px;
					}

			footer{
				color: #CECECE;
				font-size: 12px;
				font-weight: 400;
				text-align: center;
			}

			.clear{
				clear: both;
			}


/**************************************************
CSS DE BASE
**************************************************/

/* TITRES */

			/* Couleurs */
			h1,h2,h2>a:hover,h3,h4{		
				color: #294675;
				margin: 0 0 10px 0;
			}
			h2>a{
				color: #303030;
			}
			h2>a:hover{
				color: #294675;
			}

			/* Police */	
			h2{
				font-family: 'Libre Baskerville', serif;
			}

			/* Taille et caractéristiques de la casse */
			h1,h2{
				width: 100%;
				font-size: 24px;
				font-weight: 400;
			}
			section h2{
				font-size: 34px;		
			}			
			h1,h3,h4{
				text-transform: uppercase;
			}
			h1{
				letter-spacing: 5px;
			}
			article>h1{
				margin-left: 11px;
			}
			h2,h3,h4{
				letter-spacing: 1px;
			}

			/* Titre du sous-menu déroulant dans le header */

		    h5{
		    	color: #000;
				padding: 10px 15px;
				border-top: 2px solid #000;
				border-bottom: 2px solid #000;
				margin: 5px 0;
		    }

/* LIENS HYPERTEXTE */

			a{
				text-decoration: none;
				color: #000;
			}
			a:hover{
				color: #757575;
			}
			:hover{
				transition: all 0.2s ease 0s;
			}

/* BOUTONS */

			button{
				background-color: #fff;
				border: none;
				font-size: 18px;
			}
			a.bouton{
				display: inline-block;
				padding: 10px 20px;
				text-align: center;
				font-size: 13px;
				font-family: 'Roboto', sans-serif;
				font-style: normal;
				border: 2px solid #294675;
				background-color: #FFF;
				color: #294675;
				border-radius: 3px;
			}
			a.bouton:hover{
				border: 2px solid #294675;
				background-color: #294675;
				color: #FFF;
			}


/******************************
DETAILS DU HEADER
******************************/


			#nav-toggle{
				display: none;
			}
			header img{
				float: left;
				width: 350px;
				margin-left: -10px;
				margin-top: 5px;
			}

			header nav>ul{
				float: right;
				padding: 0;
				margin: 0;
				text-align: left;
		   		text-transform: uppercase;
		   		font-size: 12px;
		   		font-weight: 700;
		   		letter-spacing: 2px;
		   		padding-left: 15px;
			}
			header li{
				display: inline-block;
				/* L'inline-block provoque un comportement de texte avec des espaces entre les mots que sont devenus les blocs. Veiller à définir dans le html l'espace blanc ainsi créé (qui ne peut plus être géré comme un ensemble de marges intérieures et extérieures  */		
			}

			header li:last-child{
				border-right: 0px solid #FFF;
			}
			header nav a{
				display: block;
				text-align: center; 
				padding: 32px 15px; 
				font-weight: 500;
				color: #FFF;
				font-size: 14px;
			}
			header nav a:hover{
				/*background-color: #1C2733;
		    	background-color: #343436; */
				color: #000;
			}
			i.fa-bars{
				display: none;
			}

		    /* Positionnement et affichage des sous-menus */ 

			ul{
				list-style-type: none;
				padding: 0;
			}

		    nav ul .sous_menu{
		        position: absolute;
		        /*Très important : la distance au bord supérieur du parent, si 
		        elle est mal définie, aboutit à créer un blanc et le curseur
		        de la souris disparaît*/
		        top: 83px;
		        right: 185px;
		        background-color: #294675;
		    	text-align: left;
		    	font-size: 12px;
		    	font-weight: 400;
		   		text-transform: uppercase;
		   		width: 460px;
		   		background-image: url('../img/france.png');
		   		background-repeat: no-repeat;
		   		background-position: center;
		   		z-index: 900;
		   		padding: 0 0 7px 0;
		    }

		    .sous_menu ul{
		    	width: 230px;
		    	float: left;
		    }
		    .sous_menu li{
		    	width: 230px;
		    }
		    .sous_menu a{
		    	text-align: left;
		    	padding: 10px 15px;
		    	color: #FFF;
		    	font-size: 13px;
				box-sizing: border-box;
		    }
		    .sous_menu a:hover{
		    	color: #000;
		    }

		    /*	MAINTENANT JE TRAVAILLE LES AFFICHAGES     */

		    .sous_menu{
		        display: none;
		    }
		    nav>ul>li:hover>.sous_menu{
		        display: block;
		    }  

			/* Formulaire de recherche */

			#rechercher{
				float: right;
				margin-right: 2px;
				margin-top: -50px;
				margin-bottom: 30px;
			}
			#rechercher input{
				width: 192px;
				border: 1px solid #294675;
				padding: 7px;
				background-color:  #fff;
				color: #757575;
			}
			#rechercher input:hover{
				border: 1px solid #CECECE;
			}
			#rechercher input:focus{
				border: 1px solid #CECECE;
				outline: none;
				box-shadow: 2px 2px 5px #CECECE;
			} 

/******************************
DETAILS DU CORPS DE PAGE
******************************/

/* DETAIL DE L'ARTICLE A LA UNE (rubrique ou sommaire) */

			#a_la_une{
				float: left;
				width: 100%;
				max-width: 1130px;
				height: 525px;
				box-sizing: border-box;
				overflow: hidden;
				padding: 0;
				margin-bottom: 40px;
			}
			#a_la_une img{
				width: 1130px;
				margin-top: -85px;
			}

			#encart{
				float: left;
				background-color: rgba(0,0,0,0.8);
				width: 300px;
				height: 350px;
				overflow: hidden;
				padding: 25px;
				margin-top: -510px;
				margin-left: 62%;
				box-shadow: 50px 30px 80px #000;
			/*	box-shadow: 5px 5px 15px #000;	*/
			}

			#encart h1{
				font-size: 24px;
				padding-bottom: 15px;
				margin-bottom: 15px;
			}
			#encart h1>a{
				color: #4E84DB;
			}
			#encart h1+p{
				font-style: italic;
			}
			#encart p{
				color: #fff;
			}
			#encart p{
				font-family: 'Roboto',Arial,sans-serif;
				font-size: 14px;
				line-height: 20px;
			}
			#encart:hover{
				background-color: rgba(255,255,255,0.8);
			}
			#encart:hover h1>a{
				color: #af1313;
			}

			#encart:hover p{
				color: #000;
			}

/* AFFICHAGE DES RESUMES DES ARTICLES RECENTS (QUAND ON AFFICHE UNE RUBRIQUE OU UN MOT-CLE) */

			body.sommaire article, body.auteur article{
				padding: 0 10px;
			}

			.resume{
				float: left;
				width: 33.333333%;
				margin-top: 20px;
				margin-bottom: 50px;
				padding: 10px;
				box-sizing: border-box;
			}
				.resume_img{
					width: 100%;
					box-sizing: border-box;
					height: 194px;
					margin-bottom: 15px;
					overflow: hidden;
					z-index: 100;
					float: left;
				}
					.resume img{
						width: 100%;
						height: auto;
					}
				.resume h2>a{
					display: block;
					float: left;
					width: 100%;
					padding: 15px 20px;
					box-sizing: border-box;
					overflow: hidden;
					margin-top: -210px;
					z-index: 900;
					font-size: 22px;
					background-color: rgba(0,0,0,0.8);
					color: #4E84DB;
					border-bottom: 3px solid #4E84DB;
				}
				.resume h2>a:hover{
					background-color: rgba(255,255,255,0.8);
					color: #000;
				}
/*				.resume h2>a:hover:first-letter{
					color: #294675;
				}				*/
			.resume h2+p, #date{
				font-style: italic;		
				font-family: 'Libre Baskerville', serif;
				color: #303030;
				font-size: 13px;
			}

			.resume p{
				line-height: 22px;
				font-family: 'Roboto', sans-serif;
				font-size: 14px;
				color: #303030;
			}
			.resume p+p{
				font-size: 13px;
			}
			.resume p a{
				padding-bottom: 3px;
				border-bottom: 1px dotted #757575;
			}

			/* Cas des résumés d'article avec (sommaire, rubrique "Le blog") ou sans introduction rédigée (Mots-clés) */

			.avec_introduction{
				height: 400px;
			}
			.sans_introduction{
				height: 215px;
			}

/* ARTICLE COMPLET (QUAND ON AFFICHE UN ARTICLE) */

			/* Présentation succincte de l'auteur à gauche de l'article */

			div.auteurs p{
				font-family: 'Libre Baskerville', serif;
				font-size: 13px;
				font-style: italic;
			}
			div.auteurs a, 	div.auteurs a:hover{
				display: inline-block;
				padding: 5px 0 15px;
				border-bottom: 2px solid #fff;
			}
			div.auteurs a:hover{
				border-bottom: 2px solid #757575;
			}

			/* Affichage d'une vignette de l'étude */

			.gauche img{
				width: 100%;
				height: auto;
				box-shadow: 5px 5px 10px #757575;
			}


			/* Date de publication de l'article */

			#date{
				font-size: 16px;
			}
			#date span{
				display: none;
			}


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

A activer si on veut afficher une illustration de l'article à partir de son logo

div#img_article{
	width: 600px;
	height: 250px;
	overflow: hidden;
}
div#img_article img{
	width: 50%;
	height: 50%;
}

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

			/* Fil d'ariane */

			p.arbo{
				text-transform: uppercase;
				font-family: 'Roboto', sans-serif;
		   		text-transform: uppercase;
		   		color: #343436;
		   		font-size: 9px;
		   		font-weight: 700;
		   		padding: 10px 0;

		   		margin: 20px 0;
		   		border-top: 2px solid #CECECE;
		   		border-bottom: 2px solid #CECECE;
			}
			p.arbo a{ 
				text-decoration: underline;
			}
			p.arbo a:hover{ 
				color: #CECECE;
			}

			/* Paragraphes de l'article complet */

			article p{
				font-family: 'Libre Baskerville', serif;
				text-align: justify;
				font-size: 17px;
				font-weight: 600px;
				line-height: 30px;
			}

			/* Notes de bas de page */

			div.notes p{
				font-family: 'Roboto', sans-serif;
				font-size: 12px;
			}

			/* Mots-clés à droite de l'article */

			ul.etiquettes li a{
				display: inline-block;
				padding: 10px;
				border-radius: 3px;
				margin: 3px 0;
				background-color: #fff;
				border: 2px solid #af1313;
				color: #af1313;
			}
			ul.etiquettes li a:hover{
				background-color: #af1313;
				border: 2px solid #af1313; 
			/*	background-color: #294675;
				border: 2px solid #294675; */
				color: #fff;
			}

/* PAGE DE L'AUTEUR (QUAND ON AFFICHE UN AUTEUR) */


			body.auteur h1{
				margin-left: 0;
				margin-bottom: 20px;
				padding-bottom: 20px;
			}

			#auteur-img{
				float: left;
				width: 25%;
				padding: 0;
				padding-bottom: 30px;
			}
			#auteur-bio{
				float: left;
				padding-left: 20px;	
				padding-bottom: 30px;
				width: 73%;
				font-style: italic;
			}
			#auteur-bio p{
				font-size: 16px;
			}


			.auteur-article h3, .auteur-article p{
				padding: 0;
				margin: 0;
			}
			.auteur-article h3+p{
				font-size: 15px;
				font-style: italic;
			}
			.auteur-article{
				width: 100%;
				padding-bottom: 20px;
				border-bottom: 1px dotted #303030;
				margin-bottom: 35px;
			}


/* PAGE DE LA RUBRIQUE "PUBLICATIONS" (QUAND ON AFFICHE LE SOMMAIRE DE LA RUBRIQUE 4) */

			.resume_publication{
				width: 100%;
				max-width: 1150px;
				border-bottom: 1px dotted #303030;
				padding: 30px 0;
				margin-left: 10px;
			}

			.img_publication, .texte_publication{
				float: left;
			}

			.img_publication{
				width: 23%;
			}

			.texte_publication{
				width: 77%;
			}

			.img_publication img{
				width: 200px;
				height: 282px;
				margin: 0 20px 20px 0;
				box-shadow: 5px 5px 10px #757575;
			}

/* PAGE "COLLOQUES */

			iframe{
				 width: 100%;
				 height: 350px;
				 margin-top: 20px;
			}

/******************************
DETAILS DU FORMULAIRE DE CONTACT
******************************/

			table input, textarea, select{
				width: 300px;
				padding: 5px;
				height: 30px;
				border: 1px solid #CECECE;
				outline: none;
			}
			td{
				vertical-align: top;
			}
			#envoyer{
				width: 100px;
				height: 45px;
				background-color: #fff;
				color: #294675;
				border: 2px solid #294675;
				font-size: 14px;
				border-radius: 3px;
			} 
			#envoyer:hover{
				border: 2px solid #294675;
				background-color: #294675;
				color: #fff;
			}
			textarea{
				height: 100px;
			}
			input:hover, input:focus{
				border: 1px solid #294675;
			}
			tr td:first{
				text-align: left;
			}


/******************************
DETAILS DU PIED DE PAGE
******************************/

/* AUTRES DETAILS */

			footer a{
				color: #757575;
			}
			footer a:hover{
				color: #CECECE;
				text-decoration: underline;
			}
			#mentions{
				padding: 30px 0;
				background-color:  #303030;
			}

/* RESEAUX SOCIAUX */

			/* Ul et Li */

			#social-icons{
				background-image: url('./');
			    font-size: 52px;
			    text-align: center;
			    margin-top: 10px;
			}
			#social-icons li{
				display: inline-block;
				margin: 10px 30px;
			}
			#social-icons li a{
			    display: block;
			    width: 46px;
			    height: 46px;
			    background: url('../img/social-icons.png');
			    background-repeat: no-repeat;
			}

			/* Sprites */

			#social-icons li#icone-1 a{
			    background-position: 0 0;
			}
			#social-icons li#icone-1 a:hover{
			    background-position: 0 -47px;
			    transition: none;
			}
			#social-icons li#icone-2 a{
			    background-position: -1em 0;
			}
			#social-icons li#icone-2 a:hover{
			    background-position: -1em -47px;
			    transition: none;
			}
			#social-icons li#icone-3 a{
			    background-position: -2em 0;
			}
			#social-icons li#icone-3 a:hover{
			    background-position: -2em -47px;
			    transition: none;
			}
			#social-icons li#icone-4 a{
			    background-position: -3em 0;
			}
			#social-icons li#icone-4 a:hover{
			    background-position: -3em -47px;
			    transition: none;
			}


/*********************************
A ACTIVER SI ON VEUT RETROUVER LES COLONNES DE DROITE DE LA PREMIERE MOUTURE

#publications, #rss{
	width: 47%;
	float: left;
	font-size: 13px;
}
#publications{
	margin-right: 20px;
}
#publications h2, #publications h3{
	color: #757575;
}
#rss h2, #rssh3{
	color: rgba(52, 73, 94,1.0);
}
#publications div{
	background-color: #fff;
	margin-bottom: 20px;
	padding: 10px;
}
#publications div img{
	width: 100%;
	margin-bottom: 10px;
}
#publications div li{
	padding-top: 10px;
	border-top: 2px solid #FFF;
	margin-top: 15px;
}
#videos iframe{
	width: 95%;
	height: 250px;
	float left;
	margin-bottom: 15px;
}
#rss h3, #videos h3{
	border-bottom: 2px solid #000;
	padding-bottom: 10px;
}
#rss h4{
	color: rgba(52, 73, 94, 1.0);
}
#rss li{
	margin-bottom: 15px;
}

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


@media all and (max-width: 961px) {

			h1, h4{
				text-align: center;
			}

			header{
				position: static;
				border-bottom: 0 solid #294675; 
			}

			body, 
			.wraper, 
			header,
			main, 	
			main aside.gauche, 
			main aside.droite, 
			main section.article_entier, 
			#encart, 
			#a_la_une,
			.resume_publication,
			.img_publication,
			.texte_publication, 
			.resume{
				width: 100%;
				margin: 0;
				padding: 0;
			}

			/* Détails de l'en-tête */

			header img{
				width: 100%;
				margin: 7px auto;
			}

			.wraper>a{
				display: block;
			}

			header #nav-toggle {
				display: block;
				float: left;
				background-color: #223A60;
				border-top: 1px solid #000;
				border-bottom: 1px solid #000;
				width: 100%;
				margin: 0;
				padding: 17px 15px;
				box-sizing: border-box;
				font-size: 16px;
				color: #FFF;
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: 15px;
				text-align: center;
			}

			header #nav-toggle + ul{
				display: none;
			}

				#rechercher{
					position: static;
					float: right;
					width: 95%;
					max-width: 300px;
					padding: 0;
					margin: 20px auto;
				}

				#rechercher input{
					width: 80%;
					text-align: left;
					border: 1px solid #808080;
				}

			/* On redéfinit le menu */

				header ul{
					width: 100%;
				}
				header li{
					display: block;
					width: 100%;
				}
			 	header nav a{
			 		padding: 8px;
			 		border-bottom: 1px solid #000;
			 	}
				i.fa-bars{
					display: inline;
				}

			/* Sous-menu */

				nav ul .sous_menu{
					position: static;
					float: left;
			        overflow: hidden;
					width: 100%;
			    }
			    nav>ul>li:hover>.sous_menu{
			        display: none;
			    }  
			    .sous_menu ul, .sous_menu li{
			    	width: 100%;
			    	float: left;
			    	background: rgba(255,255,255, 0.2);
			    }
			    .sous_menu h5{
			    	border-top: 1px;
			    	margin: 0 auto;
			    }
			    .sous_menu a{
			 		padding: 8px;
			 		border-bottom: 1px solid #000;
			 		text-align: center;
			    }
			    .sous_menu a:hover{
			    	color: #000;
			    }

			/* Encart à la une */

				#a_la_une{
					height: 450px;
				}
				#encart{
					height: 375px;
					padding: 15px;
					margin: -375px 0 20px;
					box-shadow: 0 0 0 #000;
					box-sizing: border-box;
				}

			/* Caractéristiques spécifiques aux vignettes */

				.resume{
					height: auto;
					margin-bottom: 20px;
				}
				.resume_img{
					height: auto;
					margin-bottom: 15px;
				}
				.resume p{
					line-height: 22px;
					font-family: 'Roboto', sans-serif;
					font-size: 14px;
					color: #303030;
				}
				.resume p+p{
					font-size: 13px;
				}
				.resume p a{
					padding-bottom: 3px;
					border-bottom: 1px dotted #757575;
				}
				.resume h2>a{
					padding: 15px 20px;
					margin-top: -185px;
				}
				.sans_introduction h2>a{
					margin-top: -178px;
				}
				.blog .avec_introduction h2>a{
					margin-top: -178px;
				}


			/* Détails d'un article lambda */
				
				main section.article_entier article, article{
					width: 100%;
					margin: 0;
					padding: 0 15px;
					box-sizing: border-box;
				}

				article>h1{
					margin: 0 auto 20px;
					text-align: center;
				}

				section h2{
					font-size: 30px;
				}

				article p{
					font-size: 15px;
					line-height: 23px;
				}

				main aside.gauche{
					display: none;
				}
				main aside.droite{
					margin-bottom: 50px;
				}
				main aside.droite h4{
					margin-top: 40px;
				}
				main aside.droite p{
					text-align: left;
					margin: 7px 15px;
				}
				#date span{
					display: inline;
					line-height: 40px;
				}
				#date span a{
					padding-bottom: 3px;
					border-bottom: 1px dotted #757575;
				}

			/* Auteur */

				body.auteur h1{
					margin: 0;
					padding: 0 0 40px 0;
				}
				#auteur-bio, #auteur-img{
					width: 100%;
					padding: 0;
					margin: 0 0 5px 0;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
				}
				#auteur-img p{
					margin: 0;
					padding: 0;
					text-align: center;
				}
				#auteur-img p img{
					width: 75%;
					height: auto;
					box-shadow: 5px 5px 10px #757575;
				}
				.auteur-article h3{
					text-align: left;
				}

				.etiquettes{
					text-align: center;
				}

			/* Publications */

				.resume_publication{
					text-align: center;
				}
				.img_publication{
					margin: 10px auto;	
				}
				.img_publication img{
					width: 65%;
					margin: 0 auto;
					height: auto;
					box-shadow: 5px 5px 10px #757575;
				}
				.texte_publication p a.bouton{
					margin: 0 auto;
				}

			/* Footer */
			
			.recherche h4{
				text-align: left;
			}


			/* Footer */

				footer{
					margin-top: 30px;
				}

				#social-icons li{
					margin: 10px;
				}

/* FIN MEDIA QUERIES */ 
}

@media all and (min-width: 400px) and (max-width: 961px) {

			header{
				text-align: center;
			}

			header img{
				float: none;
				width: 60%;
				margin: 7px auto;
			}

			article h1{
				float: left;
			}
			article p{
				font-size: 16px;
				line-height: 25px;
			}

			/* Organisation sur 2 colonnes des pages sommaire */

				.resume{
					width: 45%;
					margin: 15px;
				}
				.avec_introduction{
					height: 440px;
				}
				.sans_introduction{
					height: 240px;
				}

			/* Titres sur vignettes */

				.resume h2>a{
					margin-top: -205px;
				}
				.blog .avec_introduction h2>a{
					margin-top: -202px;
				}
				.sans_introduction h2>a{
					margin-top: -201px;
				}

			/* Page publication */

				.img_publication img{
					width: 70%;
				}
				.img_publication{
					width: 30%;	
				}
				.texte_publication{
					width: 65%;
				}


}