/*rgba(14,22,62,1.00) BLEU FONCE*/
/*rgba(200,200,200,1.00) GRIS CLAIR*/
/*rgba(210, 159, 0, 1) JAUNE*/

h1 {
	text-align:center;
	font-size:3em;
	font-family:"London2";
	color:white;
	text-shadow:15px 10px 15px rgba(41, 41, 41, 0.3);
	font-variant: small-caps;
	font-weight:bold;
	margin:50px;
}

#page {
	padding-top:100px;
	min-height:600px;
}

.flexArticle {
	display:flex;
	flex-direction: column;
	background:white;
}
.flexArticle article {
	display:flex;
}
.flexArticle article .introduction {
	background-image: linear-gradient(-70deg, rgba(0,0,40,0.6), rgba(28,36,76,0.6));
	margin:10px 0px;
	padding:10px;
	flex:7;
}
.flexArticle article .introduction a {
	text-decoration:none;
	color:white;
}
.flexArticle article .introduction .titreArticle {
	margin-bottom:10px;
	/*white-space: nowrap;*/
}
.flexArticle article .introduction .titreArticle:hover img {
	display:inline;

}
.flexArticle article .introduction .titreArticle h2 {
	vertical-align:middle;
	background-image:linear-gradient(to right, rgba(220,220,220, 0) 0%, rgba(210, 159, 0, 0.4) 20%, rgba(210, 159, 0, 0.4) 80%, rgba(220,220,220, 0) 100%);
	font-variant:small-caps;
	text-shadow: 0px 0px 10px black;
	position:relative;
	left:-40px;
	transition:left 0.2s;
	padding:5px 10px;
	display:inline;
	font-size:1.55em;
}

.flexArticle article .introduction .titreArticle:hover h2 {
	left:0px;
}
.flexArticle article .introduction .titreArticle:hover img {
	transform:rotate(0deg);
	opacity : 1;
}

.flexArticle article .introduction .titreArticle img {
	transform:rotateZ(180deg);
	opacity:0;
	height:40px;
	vertical-align:middle;
	display:inline;
	transition:transform 0.3s, opacity 0.3s;
}
.flexArticle article .infos {
	flex:1;
	margin:10px 0px;
	margin-left:20px;
	padding:10px;
	font-size:1.1em;
	color:rgba(14,22,62,1);
}
.flexArticle article .infos .auteur {
	margin:5px 0px;
}
.flexArticle article p {
	font-size:1.2em;
	text-align:justify;
	color:white;
}

.spip_logo {
	max-width:100px;
	height:auto;
	float:left;
	margin-right:10px;
}

@media all and (max-width:768px) {
	header {
		display:none;
	}
	#headerResponsive {
		display:block;
	}
}