/*
	MOBILE FIRST

		SUMMARY :
	--------------------
	I - GENERALS
	II - TITLES
	III - HEADER
	IV - MAIN
		1) Generals
		2) Admin
		3) Main page
		4) Tinymce and articles
		5) Paging
		6) Sagas
		7) Historical
		8) Sagas detail
		9) Form
		10) Guestbook
	V - FOOTER
		1) Generals
		2) Slider
	VI - MEDIA QUERY 1000 PX MIN
		1) HEADER
		2) MAIN
		3) FOOTER
	VII - MEDIA QUERY 1200 PX MIN
	VIII - MEDIA QUERY 1360 PX MIN
	--------------------
*/

/************** GENERALS ****************/

audio{
	display: none!important; /* Compense le block inséré par les news */
}

body .player,
body .playlist ul{
	color: #0E394C;
	border-color: #0E394C;
	background-color: transparent;
}

body .player .play span{
	border-color: transparent transparent transparent #0E394C;
}

body .player .pause span{
	border-color: transparent #0E394C;
}

body .player .play:hover span{
	border-color: transparent transparent transparent #257091;
}

body .player .pause:hover span{
	border-color: transparent #257091;
}

body .player .prog,
body .player .volumeF{
	background-color: #D3E2EC;
}

body .player .prog:hover .progBarre,
body .player .volumeF:hover .volumeBarre{
	background-color: #257091;
}

body .player .progBarre,
body .player .volumeBarre{
	background-color: #0E394C;
}

body .player .timer{
	color: #0E394C;
}

body .playlist ul li:nth-of-type(odd){
	background-color: #EBF1F5;
}

body .playlist ul li:nth-of-type(even){
	background-color: #D3E2EC;
}

body .playlist ul li:hover{
	background-color: #fff;
}

*{
	box-sizing: border-box;
}

html,
body{
	min-height: 100vh;
}

body{
	font-family: sans-serif;
	line-height: 1.2;
	background-color: #EBF1F5;
	background: linear-gradient(145deg, 
		#DCECF4 0%,
		#DCECF4 45%,
		#EBF1F5 55%,
		#EBF1F5 100%);
	background: -webkit-linear-gradient(145deg, 
		#DCECF4 0%,
		#DCECF4 45%,
		#EBF1F5 55%,
		#EBF1F5 100%);
	color: #333;
	font-family: 'Dosis', sans-serif;
	font-size: 1.2em;
	letter-spacing: 1px;
	display: flex; /* Que le footer reste bien en bas, même si la page a peu de contenu */
	flex-direction: column;
	/* Safari */
	display: -webkit-flex;
	-webkit-flex-direction: column;
}

a{
	color: inherit;
	text-decoration: none;
}

strong{
	font-weight: bold;
}

em{
	font-style: italic;
}

img,
iframe{
	max-width: 100%;
}

sub{
	vertical-align: sub;
}

sup{
	vertical-align: super;
}

input,
textarea{
	outline: 0;
}

.transparent{
	color: transparent;
	cursor: default;
}

/************** TITLES ****************/

h1{
	font-size: 3rem;
	color: #fff;
	text-shadow: 0 0 10px #000;
	display: inline-block;
	text-align: center;
	padding: 20px 0;
	font-family: 'Henny Penny', cursive;
}

h2{
	font-weight: bold;
	text-align: center;
	font-size: 1.5rem;
	text-transform: uppercase;
	margin: 20px;
	padding-bottom: 10px;
}

h3{
	font-weight: bold;
	font-size: 1.3rem;
}

/************** HEADER ****************/

header{
	margin-bottom: 20px;
	background-image: url('../img/back/back.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 2px solid #fff;
}

header nav,
header nav ul{
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Safari */
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-align-items: center;
}

header nav{
	background-color: rgba(0,0,0,0.5);
	justify-content: center;
	/* Safari */
	-webkit-justify-content: center;
}

header nav i.fas{
	display: none;
}

header nav ul li{
	text-align: center;
}

.sous-menu{
	display: none;
}

header nav ul li a{
	text-transform: uppercase;
	padding: 10px 50px;
	color: #fff;
	display: inline-block;
}

/****************** MAIN *******************/

/* generals */

main{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 70px;
}

main>section>aside,
main>section>article{
	background-color: rgba(255,255,255,0.5);
	border: 2px solid #0E394C;
	padding: 10px;
	color: #000;
	margin: 20px auto;
}

section>h2{
	padding-top: 20px;
}

main>section h2{
	text-align: left;
	margin: 10px 0;
}

.widget{
	display: none;
}

/* Admin */

.admin textarea{
	width: 100%;
	min-height: 100px;
	padding: 10px;
}

.admin .page{
	margin-top: 25px;
}

.admin section{
	width: 100%;
}

.admin ul li{
	margin: 5px auto;
	background-color: rgba(255,255,255,0.5);
	border: 2px solid #fff;
	clear: both;
	overflow: hidden;
}

.admin ul li p{
	padding: 15px 5px;
}

.admin ul li a{
	display: inline-block;
	width: 100%;
	padding: 10px;
	transition: all 0.5s;
}

.admin ul li a:hover{
	background-color: rgba(80, 137, 167, 0.8);
	color: #fff;
	transition: all 0.5s;
}

.admin ul li p+a{
	padding: 5px 10px;
	width: initial;
	float: right;
	background-color: rgba(0,0,0,0.1);
}

.admin section article>p{
	padding-bottom: 10px;
}

.admin section article>p a:hover{
	text-decoration: underline;
}

.admin form .container{
	display: flex;
	justify-content: space-between;
	/* Safari */
	display: -webkit-flex;
	-webkit-justify-content: space-between;
}

.admin form input[type=text]{
	width: 50%;
}

.admin form input[type=submit]{
	cursor: pointer;
	padding: 5px 15px;
	background-color: #fff;
	border: 1px solid #aaa;
	margin-top: 15px;
}

.admin form input[type=submit].suppr:hover{
	background-color: darkred;
}

.admin form input[type=submit]:hover{
	background-color: #339024;
	color: #fff;
}

.admin .connexion form{
	display: flex;
	flex-direction: column;
	/* Safari */
	display: -webkit-flex;
	-webkit-flex-direction: column;
	width: 25%;
	min-width: 300px;
	margin: 0 auto;
}

.admin .connexion form input{
	width: 100%;
	padding: 5px 15px;
	margin-bottom: 15px;
}

.admin .projets form{
	margin-bottom: 25px;
}

.admin .projets input[type=text],
.admin .projets input[type=number]{
	padding: 5px;
	margin: 10px;
	width: 50%;
}

/* main page */

.accueil .contenu_news{
	padding: 15px 25px;
	text-align: justify;
}

.accueil article{
	padding: 15px;
}

.accueil article>h3{
	border-bottom: 1px solid #0E394C;
	padding-bottom: 15px;
	font-size: 1.8rem;
}

/* tinymce and articles */

#tinymce{
	background-color: #fff;
	background: transparent;
}

.accueil .contenu_news h2,
.accueil .contenu_news h3,
.accueil .contenu_news h4,
.accueil .contenu_news h5,
.accueil .contenu_news h6,
.admin .contenu_news h2,
.admin .contenu_news h3,
.admin .contenu_news h4,
.admin .contenu_news h5,
.admin .contenu_news h6,
#tinymce h2,
#tinymce h3,
#tinymce h4,
#tinymce h5,
#tinymce h6{
	text-transform: uppercase;
	font-weight: normal;
	text-align: left;
	color: #0E394C;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
}

.accueil .contenu_news img{
	height: auto;
}

#tinymce h1{
	text-align: left;
}

.accueil .contenu_news h2,
.admin .contenu_news h2,
#tinymce h2{
	font-size: 2rem;
}

.accueil .contenu_news h3,
.admin .contenu_news h3,
#tinymce h3{
	font-size: 1.8rem;
}

.accueil .contenu_news h4,
.admin .contenu_news h4,
#tinymce h4{
	font-size: 1.6rem;
}

.accueil .contenu_news h5,
.admin .contenu_news h5,
#tinymce h5{
	font-size: 1.4rem;
}

.accueil .contenu_news h6,
.admin .contenu_news h6,
#tinymce h6{
	font-size: 1.2rem;
}

.accueil .contenu_news a,
.admin .contenu_news a,
#tinymce a{
	color: #0E394C;
	font-weight: bold;
}

.accueil .contenu_news a:hover,
.admin .contenu_news a:hover,
#tinymce a:hover{
	color: #000;
	text-decoration: underline;
}

/* Paging */

.page{
	text-align: center;
}

.page span,
.page a{
	display: inline-block;
	margin: 10px 5px;
	padding: 5px 10px;
	border: 1px solid #0B2A38;
	border-radius: 5px;
}

.page span{
	background-color: rgba(11, 42, 56, 0.2);
}

.page a:hover{
	color: #0B2A38;
	border: 1px solid #0B2A38;
	background-color: rgba(11, 42, 56, 0.2);
	transition: all 0.5s;
}

/* Sagas */

.sagas>aside{
	padding: 15px 25px;
}

.sagas>article{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* Safari */
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	-webkit-flex-wrap: wrap;
	background-color: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.sagas>article>aside{
	width: 100%;
	margin: 15px 0;
	background-color: rgba(255,255,255,0.5);
	border: 2px solid #0E394C;
	display: flex;
	flex-direction: column;
	/* Safari */
	display: -webkit-flex;
	-webkit-flex-direction: column;
}

.sagas>article>aside>h2{
	text-align: center;
	background-color: #0E394C;
	background-image: url('../img/orchestre.png'), url('../img/orchestre.png');
	background-size: 2em;
	background-position: left, right;
	background-repeat: no-repeat;
	margin: 0;
	color: #fff;
	padding: 15px 40px;
	font-weight: normal;
}

.sagas>article>aside>a{
	padding: 10px 15px;
	margin: 5px 10px;
	margin-top: auto;
	background-color: #0E394C;
	border: 2px solid #fff;
	color: #fff;
	align-self: flex-end;
	/* Safari */
	-webkit-align-self: flex-end;
	cursor: pointer;
}

.sagas>article>aside>a:hover{
	background-color: #176385;
}

.sagas>article>aside>p,
.sagas>article>aside>h3,
.sagas>aside>h3{
	margin: 10px 20px;
}

/* Historical */

.historique article>aside,
.staff>aside{
	margin: 20px;
}

.historique>article>p{
	padding: 15px 25px;
}

/* Sagas detail */

.sagas_detail figure{
	width: 100%;
}

.sagas_detail figure img{
	display: block;
	margin: 0 auto;
}

.sagas_detail article aside{
	margin: 25px 0;
}

.staff aside img{
	max-height: 300px;
}

.sagas_detail audio{
	width: 100%;
	margin: 10px 0;
}

.sagas_detail article p,
.sagas_detail article h3{
	padding-bottom: 10px;
}

.sagas_detail article h3{
	text-transform: uppercase;
	width: 100%;
}

.sagas_detail article h4{
	text-transform: uppercase;
	padding-top: 25px;
	text-align: center;
	width: 100%;
}

.sagas_detail article h4:after,
.sagas_detail article h4:before{
	content: ' ~ ';
}

.sagas_detail article h5{
	font-weight: bold;
	padding: 5px;
}

.sagas_detail a{
	color: #09232E;
	font-weight: bold;
}

.sagas_detail article aside p{
 clear: both;	
}

.sagas_detail article aside p a{
	float: right;
	margin-bottom: 25px;
}

.sagas_detail article aside p a.inline{
	display: inline;
	float: none;
}

.sagas_detail a:hover{
	text-decoration: underline;
}

/* form */

.index form{
	text-align: center;
	width: 90%;
	margin: 0 auto;
}

.index form p{
	text-align: left;
	padding-bottom: 5px;
}

.index input[type=text],
.index textarea{
	padding: 15px;
	border: 2px solid #0E394C;
	font-family: 'Dosis', sans-serif;
	font-size: 1em;
	background-image: url('../img/orchestre.png');
	background-size: 3em;
	background-repeat: no-repeat;
}

.index ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #0E394C;
}
.index ::-moz-placeholder { /* Firefox 19+ */
  color: #0E394C;
}
.index :-ms-input-placeholder { /* IE 10+ */
  color: #0E394C;
}
.index :-moz-placeholder { /* Firefox 18- */
  color: #0E394C;
}

.index input[type=text]{
	width: 100%;
	margin-bottom: 10px;
	background-position: 0;
	text-indent: 30px;
}

.index textarea{
	display: block;
	margin: 0 auto;
	width: 100%;
	min-height: 200px;
	margin: 20px 0;
	padding-left: 45px;
	background-position: 0 5px;
	resize: vertical;
}

.g-recaptcha{
	display: flex;
	justify-content: center;
	/* Safari */
	display: -webkit-flex;
	-webkit-justify-content: center;
	width: 100%;
}

.index input[type=submit]{
	border: 2px solid #fff;
	background: linear-gradient(90deg, 
		#08222E,
		#0E394C);
	background: -webkit-linear-gradient(90deg, 
		#08222E,
		#0E394C);
	color: #fff;
	padding: 10px 25px;
	margin: 0 auto;
	margin-top: 15px;
	font-size: 1em;
	font-family: 'Dosis', sans-serif;
	cursor: pointer;
	transition: all 0.5s;
}

.index input[type=submit]:hover{
	background: linear-gradient(-90deg, 
		#08222E,
		#0E394C);
	background: -webkit-linear-gradient(-90deg, 
		#08222E,
		#0E394C);
	transition: all 0.5s;
}

/* Guestbook */

.livre article a{
	color: #2D6780;
}

.livre article a:hover{
	color: #0E394C;
}

.livre article h4{
	padding-bottom: 5px;
	margin-bottom: 20px;
	border-bottom: 1px solid #0E394C;
	font-weight: bold;
	color: #0E394C;
}

.succes{
	text-transform: uppercase;
	font-weight: normal;
	padding: 15px;
}

.contain_livre{
	border-color: transparent;
	background-color: transparent;
	padding: 0;
}

.contain_livre p{
	margin-bottom: 25px;
}

/******************* FOOTER *******************/

/* Generals */

footer{
	margin-top: auto;
	padding: 15px;
	color: #fff;
	background-color: #0b2a38;
	border-top: 3px solid #fff;
}

footer ul{
	text-align: center;
	margin: 15px auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* Safari */
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: center;
	-webkit-align-items: center;
}

footer .reseaux{
	flex-direction: row;
	/* Safari */
	-webkit-flex-direction: row;
}

footer ul li{
	margin: 0 10px;
}

footer ul li a{
	text-decoration: underline;
}

footer ul li a:hover{
	text-decoration: none;
}

footer ul li i.fab,
footer ul li i.fas{
	font-size: 1.8rem;
	transition: all 0.5s;
}

footer ul li i.fab:hover,
footer ul li i.fas:hover{
	color: #fff;
	transition: all 0.5s;
}

footer ul li i.fa-facebook-square{
	font-size: 3rem;
	color: #3B5998;
}

footer ul li i.fa-twitter-square{
	font-size: 3rem;
	color: #1DA1F2;
}

footer ul li i.fa-rss-square{
	font-size: 3rem;
	color: #F38013;
}

/** slider **/

.caroussel{
	background-color: #fff;
	background-image: url('../img/orchestre.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto;
	max-width: 468px;
	max-height: 60px;
	color: #000;
	box-sizing: content-box;
	border: 2px solid #fff;
}

.caroussel a{
	vertical-align: middle;
}

.caroussel img{
	vertical-align: middle;
}

@keyframes opacitytime{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@media screen and (min-width: 30em){ /* 480px */

	.contain_caroussel{
		width: 100%;
		max-width: 100%;
		margin: -45px auto 15px auto;
		padding: 0;
	}

	.caroussel{
		height: 60px;
		width: 468px;
	}

}

@media screen and (min-width: 62.5em){ /* 1000px */

	/***** HEADER *****/

	header{
		margin-bottom: 50px;
	}

	header nav h1{
		margin: 25px auto;
	}

	header nav i.fas{
		display: inline-block;
	}

	header nav ul{
		align-self: stretch;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		/* Safari */
		-webkit-align-self: stretch;
		-webkit-flex-direction: row;
		-webkit-flex-wrap: wrap;
		-webkit-justify-content: space-around;
		background-color: rgba(0,0,0,0.5);
		position: relative;
	}

	header nav>ul>li{
		border-right: 2px solid transparent;
		border-left: 2px solid transparent;
	}

	header nav>ul>li:hover{
		border-right: 2px solid white;
		border-left: 2px solid white;
		background-color: rgba(0,0,0,0.9);
		transition: all 0.2s;
	}

	.sous-menu{
		display: none;
		position: absolute;
		flex-direction: column;
		left: 0;
		right: 0;
		padding: 15px 0;
		background-color: rgba(0,0,0,0.97);
		z-index: 3;
	}

	@keyframes open_menu{
		0% {transform: translateY(-50%) scaleY(0); -webkit-transform: translateY(-50%) scaleY(0);}
		100% {transform: translateY(0) scaleY(1); -webkit-transform: translateY(0) scaleY(1);}
	}

	.deroulant:hover .sous-menu{
		display: flex;
		/* Safari */
		display: -webkit-flex;
		animation-name: open_menu;
		animation-duration: 0.3s;
		animation-timing-function: linear;
		animation-iteration-count: 1;
	}

	.sous-menu>li{
		display: flex;
		justify-content: space-around;
		/* Safari */
		display: -webkit-flex;
		-webkit-justify-content: space-around;
		width: 75%;
	}

	.sous-menu>li>ul{
		margin: 10px 25px;
		display: flex;
		flex-direction: column;
		/* Safari */
		display: -webkit-flex;	
		-webkit-flex-direction: column;
		background-color: transparent;
	}

	.sous-menu>li>ul>li>a{
		text-transform: none;
	}

	.sous-menu li ul li:hover a{
		text-decoration: underline;
	}

	.sous_titre{
		background-color: #fff;
		color: #000;
		font-weight: bold;
		width: 100%;
		text-transform: uppercase;
		padding: 5px 10px;
	}

	/***** MAIN *****/

	main{
		display: flex;
		/* Safari */
		display: -webkit-flex;
		width: 85%;
		max-width: 1500px;
	}

	.historique article>aside,
	.staff>aside{
		display: flex;
		/* Safari */
		display: -webkit-flex;
	}

	.historique img,
	.staff img{
		max-width: 150px;
		margin-right: 15px;
		align-self: center;
		/* Safari */
		-webkit-align-self: center;
		border-radius: 50%/50px;
		border: 2px solid #fff;
	}

	.sagas_detail article img.pochette{
		max-width: 300px;
		border-radius: 0;
		border: 0;
	}

	.historique ul,
	.staff ul{
		align-self: center;
		/* Safari */
		-webkit-align-self: center;
	}

	.sagas_detail>article>article{
		width: 100%;
	}

	.index .container{
		display: flex;
		justify-content: space-between;
		/* Safari */
		display: -webkit-flex;
		-webkit-justify-content: space-between;
	}

	.index input[type=text]{
		width: 48%;
		margin-bottom: 0;
	}

	/* FOOTER */

	footer{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		/* Safari */
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		-webkit-justify-content: center;
		-webkit-align-items: center;
		padding-bottom: 25px;
	}

	footer ul{
		margin: 0 auto;
		width: 33.33%;
	}

}

@media screen and (min-width: 75em){ /* 1200px */

	.sagas>article>aside{
		width: 49%;
	}

	section{
		width: 85%;
	}

	.widget{
		width: 15%;
		min-width: 250px;
		margin: 0 25px;
		display: block;
	}

	.widget p{
		margin-bottom: 10px;
	}

	.widget h3{
		margin-bottom: 10px;
	}

	.widget h2{
		text-align: center;
	}

	.widget>h2{
		opacity: 0;
		cursor: default;
	}

	.widget .progress{
		width: 90%;
		margin: 0 auto 40px auto;
		background-color: rgba(134,171,189,1);
		border: 2px solid #0E394C;
		text-align: center;
		color: #fff;
		position: relative;
	}

	.widget .progress .progress_width{
		height: 25px;
		background-color: #0E394C;
		background: linear-gradient(90deg, 
			#0E394C,
			#257091,
			#0E394C);
		background: -webkit-linear-gradient(90deg, 
			#0E394C,
			#257091,
			#0E394C);
		animation-name: progress;
		animation-duration: 1.5s;
		animation-timing-function: ease-out;
		animation-iteration-count: 1;
	}

	.widget .progress .progress_text{
		position: absolute;
		width: 100%;
		top: 0;
	}

	@keyframes progress{
		0% {transform: translateX(-50%) scaleX(0); -webkit-transform: translateX(-50%) scaleX(0);}
		100% {transform: translateX(0) scaleX(1); -webkit-transform: translateX(0) scaleX(1);}
	}

}

@media screen and (min-width: 85em){ /* 1360px */

	.sagas_detail article aside{
		width: 49%;
	}

	.sagas_detail article aside.mono{
		width: 100%;
	}

	.sagas_detail>article{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		/* Safari */
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		-webkit-justify-content: space-between;
	}

}