/* =====[ RESET ]======================================================================== */

body,h1,h2,h3,h4,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
	font-weight:300;
}

* {
	box-sizing: border-box;
}
/* =====[ GENERAL ]======================================================================== */
body {
	background:url(../images/bg.jpg) top center no-repeat #ffffff;
	padding: 0;
	margin: 0;
	font-family: 'Poppins', Verdana, Arial, sans-serif;
	font-size: 16px;
	color: #27241f;
	z-index:0;
}

strong{	font-weight:700}

a {	color: #4db4ee;	text-decoration: none;}
a:hover {	color: #0f738a;}


h1{	color:#0f738a;	font-size:30px;}
h2 { color:#0f738a;	font-size:22px; margin-bottom:20px	}
h3 { color:#fb9819;	font-size:20px;	margin-bottom:15px}
h4 { color:#469ac9;	font-size:16px;	margin-top:20px;	text-decoration: underline;}

h2 img{	vertical-align:middle; padding-right:15px; height:auto}
.clear {clear:both;}

p {	text-align:justify;	margin:20px 0 20px 0;}

.contenu{	width:75%; 	position:relative; 	margin:0 auto;}
.marge{	margin-top:5%; margin-bottom:5%;}


a.bouton{	background:#4db4ee;	color:#ffffff;	padding:5px 20px 5px 20px;	-moz-border-radius:5px;		-webkit-border-radius:5px;		border-radius:5px;}
a:hover.bouton {	background:#0f738a;}



hr {background:#d8ccbe;	margin:30px 0 20px 0;	border:0;	height:1px;}
.tcenter{	text-align:center}
.date {	color:#ae9f8c;	font-style:italic; font-size:14px}
p .italic {

	color:#087874;
	/*color:#877c6f;*/
	font-style:italic;
	font-weight:700;
}

ol li{
	padding-bottom:15px;
}

.note{	color:#454545; font-size:13px; font-style:italic; background:#f2f2f2}
.cols {display:flex; box-sizing:border-box; justify-content:space-between; align-items:strech;  margin-bottom:50px; }

.leftp20{	float:left; padding-right:20px}
.rightp20{	float:right; padding-left:20px}
.leftp20 em, .rightp20 em{	font-size:14px; color:#858585}
.max375{	max-width:375px;}
.max400{	max-width:400px;}
.max500{	max-width:500px; width:100%; height:auto; margin:0 auto}

/* Général */
.gestion{	margin:20px 0;}
.gestion span {	font-family: 'Poppins', Verdana, Arial, sans-serif!important; font-size:16px!important; }
.gestion img{	max-width:100%;	height:auto!important;	padding:0;}
.article{ width:80%; margin:0 auto}

/*video 100%*/
/* Le parent */
.videoWrapper {
	position: relative;
	/*padding-bottom: 56.25%;*/ /* 16:9 */
	padding-bottom: 51%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
/* L'enfant */
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


#toTop {
	background:url(../images/b_top.png) no-repeat center center #459aca;
	background-size:20px 24px;
	height:12px;
	padding:25px 30px 10px 30px;
	position:fixed; /* this is the magic */
	bottom:0; /* together with this to put the div at the bottom*/
	right:5%;
	cursor:pointer;
	display:none;
	z-index:10;
}
#toTop:hover{background:url(../images/b_top.png) no-repeat center center #317fac; background-size:20px 24px;}

a.show, a.linkToggle {
	background:url('../images/iconplus.png') no-repeat 0 0;
	background-size:19px 46px;
	padding:0 0 0 30px;
	display:inline-block;
	height:23px;
	text-decoration:none;
	margin-bottom:0px;
	margin:0 0 0 5px;


}
/*.showMore{position:relative; }*/

.showMore div{	background:#e8dfd4; padding:20px; }
a.show.minus, a.linkToggle.minus {	background-position:0 -27px;}


/* =====[ menu - top ]======================================================================== */

.menumobile{	display:none; text-align:right}
.menumobile span{	font-size:40px; cursor:pointer; color:#ffffff; background:#459aca; padding:3px 20px; border-radius:50%; position:absolute; top: 20px; right:0; z-index:1}
ul.menumobile {	list-style:none; }

.accueil {margin-top:-25px}
.accueil img{	width:25%; height:auto; box-sizing:border-box; padding:0 0.5%;}
img.logo{ max-width:784px; width:100%; margin-bottom:20px; }
.accueil h2{ text-align:right; font-family: 'Bilbo Swash Caps', cursive; font-size:50px; color:#5c5551; margin-bottom:30px;}
.accueil a{ display:block; max-width:680px; width:100%;}

.menu_haut { padding:10px 0; background:#deba92; box-shadow:0 0 3px 3px rgba(0,0,0,0.2)}
.menu_haut ul {text-align:right; position:relative; z-index:5 }
.menu_haut ul li{display:inline-block; list-style:none;	color:#5c5551; font-size:15px }
.menu_haut ul li+li{	padding-left:25px;}
.menu_haut li a{color:#5c5551;}
.menu_haut ul li a:hover{	color:#fdefe0;}
select{		font-family: 'Poppins', Verdana, Arial, sans-serif;}

.menu{	background:#459aca; padding:25px 0 0 0; box-shadow:0 3px 3px 0 rgba(7,91,138,0.3); }
.chromestyle ul{list-style:none; text-align:center;}
.chromestyle ul li{	display:inline;}
.chromestyle ul li+li{	padding-left:5%;}
.chromestyle a{	color:#ffffff;}
.chromestyle a:hover{	color:#174965; }


/* =====[ ACCUEIL ]======================================================================== */

.shadow1{	position:relative; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;}
.shadow2{	position:relative; }

.shadow1:before, .shadow1:after, .shadow2:before, .shadow2:after{
	position:absolute;
	content:"";
	bottom:40px;
	left:15px;

	top:90%;
	width:45%;
	background:#81786d;
	z-index:-1;
	-webkit-box-shadow: 0 20px 15px #81786d;
	-moz-box-shadow: 0 20px 15px #81786d;
	box-shadow: 0 20px 15px #81786d;
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	transform: rotate(-7deg);
}
.shadow1:after, .shadow2:after{
	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	transform: rotate(6deg);
	right: 15px;left: auto;
}

.shadow2:before, .shadow2:after{bottom:30px; top:45%}


.cours a{width:48%; display:flex; align-items:center; border:1px solid #d8d8d8; padding:25px; background:#ffffff;  }

.cours a:hover{background:#f4eee2 }
.cours img {width:120px; height:auto; margin:0 10px 0 0; }
.cours h2 {color:#fb9819; line-height:22px;}
.cours p {margin:10px 0; line-height:20px; text-align:left;}


/****** structure de base du livre *************/
.bg-livre {	display:flex; align-items:stretch; justify-content:space-between; background:#ffffff }

.page, .page-accueil{padding:40px 50px 40px 5%; border-top:5px solid #e2d9cf; width:70%; box-sizing:border-box; }
.page img{max-width:100%;	height:auto!important; }
.sousmenu img{max-width:100%;	height:auto!important; }

.onepage{padding:40px 50px; border-top:5px solid #e2d9cf; width:100%;}
.sousmenu, .sousmenu-accueil{
	width:30%;
	background:url(../images/bg-sousmenu.png) repeat-y top right;
	padding:40px 50px 40px 30px;
	border-top:5px solid #e2d9cf;
	box-sizing:border-box
}

.sousmenu ul li{	list-style:none; font-size:15px;	padding-bottom:10px;}
.sousmenu ul li:before{content: "› ";}

.sousmenu ul li a{	color:#877d6d;}
.sousmenu ul li a:hover{	color:#4db4ee;}


.pageaccueil, .sousmenu-accueil{	width:50%;}




.list li{
	margin:20px 0 0 20px;
	list-style:url('../images/fleche.png');
}
.list li:first-child {
	margin:0px 0 0 20px;
	list-style:url('../images/fleche.png');
}
.list img {
	padding-right:10px;
}

.list span{
	font-weight:bold;
	font-style:italic;
}

.lien li{	list-style:none;	margin-bottom:20px;}



#bulle{	position:relative;	font-weight:bold;	color:#000;}
#bulle:hover {	background: none;	z-index: 50;}
#bulle span{	display: none;}
#bulle:hover span{
	display: block;
	position: absolute;
	top: 5px;
	left: 20px;
	color:#000;
	font-size:12px;
	font-style:italic;
	font-weight:normal;
	width:300px;
	background:#e8dfd4;
	filter:alpha(opacity=90);
	border:1px solid #cccccc;
	padding: 20px;
	box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.3);

}


#repertoire .bloc {	width:45%;}


.photo {
	background: url('../images/bg_photo.png');
	background-repeat: repeat-y;
	padding-left: 10px;
	padding-bottom: 5px;
}

.tresor {
	font-size: 14px;
	background: #f7f0e8;
}

.tresor:hover {
	background: #e8e2db;
}

/* =====[ générale section ]======================================================================== */


.col2 .bloc {width:50%; float:left; box-sizing:border-box; padding:0 3% 0 0 }
.col2 .bloc+ .bloc {padding:0 0 0 3%;}
.col2 .bloc ul{	list-style:none;}
.col2 .bloc ul+ul {	margin-top:30px;}
.bloc {	display:inline-block;	vertical-align:top;}


.diaporama{	text-align:center;}
.diaporama li{	list-style:none; position:relative;	width:23%; padding:20px; box-sizing:border-box; list-style:none; display:inline-block; text-align:center; vertical-align:top}
.diaporama li img{	width:100%; height:auto;}


.player{max-width: 956px;	margin: 0 auto;	z-index: 1;	position: relative;	border: 1px solid #d4d4d5;}

.musee{	width:277px; padding:15px 0 0 75px; float:right; text-align:center; box-sizing:border-box;}
.musee a{	font-size:18px;}
.musee img{	padding-top:10px;}

.reseau_musee{ /*background:#f2f2f2; padding:10px 20px;*/ text-align:center}
.reseau_musee p{ text-align:center}

ul.list4 li{	list-style:none; display:inline-block; width:48%; box-sizing:border-box; padding:25px; vertical-align:top;}
ul.list4 li strong{	font-style:normal}

.jeune img{	float:right; width:100%; max-width:387px; height:auto}

.item p{	text-align:center; font-size:14px; color:#087874;	font-style:italic; }
.notemusee{ color:#959595; font-style:italic; font-size:13px;}
.notemusee img{ width:60px; height:auto; vertical-align:middle}
/* =====[ quoi de neuf ]======================================================================== */

ul.new-sousmenu { margin:10px 0; text-align:center }
ul.new-sousmenu li{ list-style:none; display:inline-block; margin:0; font-family: 'Bilbo Swash Caps', cursive; font-size:24px; }
ul.new-sousmenu li img{width:25px; height:auto; padding-right:10px; vertical-align:middle}
ul.new-sousmenu li.un a{ color:#04be38;  }
ul.new-sousmenu li a.ciel{ color:#0f738a;  }
ul.new-sousmenu li.deux a{ color:#cd0cc8; }
ul.new-sousmenu li.trois a{ color:#da8e15; }
ul.new-sousmenu li.quatre a{ color:#3835c9; }
ul.new-sousmenu li.cinq a{ color:#06cdbc; }

ul.new-sousmenu li a{ padding:5px 13px; display:block; border:1px solid #ffffff}
ul.new-sousmenu li.un a:hover{ border:1px solid #04be38}
ul.new-sousmenu li.deux a:hover{ border:1px solid #cd0cc8;  }
ul.new-sousmenu li.trois a:hover{ border:1px solid #da8e15;  }
ul.new-sousmenu li.quatre a:hover{ border:1px solid #3835c9;  }
ul.new-sousmenu li.cinq a:hover{ border:1px solid #06cdbc;  }
ul.new-sousmenu li a:hover.ciel{ border:1px solid #0f738a;  }

/* =====[ FOOTER ]======================================================================== */

.plan {background:url(../images/bg_footer.jpg) repeat; padding:40px 0 }
.plan .contenu {display:flex; justify-content:space-between; flex-wrap:wrap }
.plan ul li {list-style:none; }
.plan ul li a{font-size:15px; color:#786856;}
.plan ul li a:hover{color:#000000;}
.plan ul + ul {margin-top:30px}

footer { background:url(../images/bg_footer.jpg) repeat; border-top:1px solid #c7a485; padding:15px 0; font-size:14px;  }
footer .contenu{  display:flex; justify-content:center; align-items:center; flex-direction: row  }

footer img{ width:60px; height:auto; margin:0 25px }
footer a{ color:#000000 }





/* :::::[ Tablette horizontale ]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 1400px) {

	.contenu{	width:90%;}
	.menumobile{	display:block;}
	.menu, .menu_haut ul li:nth-child(-n+5) {	display:none;}
	.accueil {margin-top:25px}
	.diaporama li{	width:32%; padding:20px;}
}


/* :::::[ tablette verticale ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 1008px) {

img.logo{ width:80%;  }
.contenu{	width:90%;}
.bg-livre {	flex-direction: column }
.page, .page-accueil{padding:40px 5%; width:100%;  }
.page-accueil{border:none  }
.sousmenu{display:none;}
.sousmenu-accueil{	width:100%; background:none}


.musee{	padding:25px 0; margin:0 auto; float:none;}


.col2 .bloc {width:100%; float:none; padding:0 0 30px 0 }
.col2 .bloc+ .bloc {padding:0;}
.diaporama li{	width:49%; padding:20px;}

.plan .contenu div{width:50%; }
footer .contenu{flex-direction: column  }
.shadow1:before, .shadow1:after, .shadow2:before, .shadow2:after{	display:none;}
#repertoire .bloc {	width:100%;}

/* :::::[ 480 PIXELS LAYOUT (IPHONE HORIZONTALE et VERTICALE)]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 752px) {
.contenu{	width:100%;}
.menu_haut .contenu, .menu .contenu, .accueil{	width:90%;}
.plan .contenu{	width:80%;}
footer .contenu{ width:80%;}
.menumobile span{	right:5%;}
.shadow1{	box-shadow:none;}
	.container{	width:90%;}
	.cours a{width:90%;margin: 0 auto}
	.accueil h2{ font-size:30px;}
	.menumobile span{	 position:relative;}
	.cols {flex-direction: column}
	.cours a{flex-direction: column; margin-bottom:20px; }
	.article{ width:90%; }
	.diaporama li{	width:100%; padding:20px 0;}
h1{	font-size:25px;}
.page, .page-accueil, .sousmenu-accueil{padding:40px 10%; border:none;  }
.onepage{padding:40px 10%; border-top:none; }
p{	text-align:left;}
img.logo{ width:100%;  }
ul.list4 li{	width:100%; padding:25px 0;}

.showMore div{	width:250px; }
 }

/*:::::[ 320 PIXELS LAYOUT (iphone vertical) ]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 464px) {

.plan .contenu div{width:100%; }
.plan ul {margin-bottom:30px}
 }