/* ----------------------------- */
 /* == soft reset KNACSS          */
 /* ----------------------------- */
 /* switching box model for all elements */
 /* soft reset */
 
 html,
 body {
 	padding: 0;
 	height: 100%;
 }
 
 ul,
 ol {
 	padding-left: 2em;
 }
 
 ul.unstyled {
 	list-style: none;
 }
 
 img {
 	height: auto;
 	vertical-align: middle;
 	border: 0;
 }
 
 blockquote,
 figure {
 	margin-left: 0;
 	margin-right: 0;
 }
 
 audio,
 canvas,
 video {
 	display: inline-block;
 }
 
 svg:not(:root) {
 	overflow: hidden;
 }
 /* font-sizing for content */
 
 p,
 .p-like,
 ul,
 ol,
 dl,
 blockquote,
 pre,
 td,
 th,
 label,
 textarea,
 caption,
 details,
 figure {
 	margin-top: 0.75em;
 	line-height: 1.5;
 }
 
 ul,
 ol {
 	padding-left: 2em;
 }
 
 ul.unstyled {
 	list-style: none;
 }
 
 em,
 .italic,
 address,
 cite,
 dfn,
 i,
 var {
 	font-style: italic;
 }
 
 strong,
 .bold {
 	font-weight: bold;
 }
 /* avoid top margins on first content element */
 
 p:first-child,
 .p-like:first-child,
 ul:first-child,
 ol:first-child,
 dl:first-child,
 blockquote:first-child,
 pre:first-child,
 h1:first-child,
 h2:first-child,
 h3:first-child,
 h4:first-child,
 h5:first-child,
 h6:first-child {
 	margin-top: 0;
 	margin-bottom: 0;
 }
 /* avoid margins on nested elements */
 
 li p,
 li .p-like,
 li ul,
 li ol {
 	margin-top: 0;
 	margin-bottom: 0;
 }
 /* max values */
 
 img,
 table,
 td,
 blockquote,
 code,
 pre,
 textarea,
 input,
 video {
 	max-width: 100%;
 }
 
 a img {
 	border: none;
 }
 
 .clearfix:after {
 	visibility: hidden;
 	display: block;
 	font-size: 0;
 	content: " ";
 	clear: both;
 	height: 0;
 }
 
 .clearfix {
 	display: inline-block;
 }
 
 * html .clearfix {
 	height: 1%
 }
 
 .clearfix {
 	display: block;
 }
 /* ----------------------------- */
 /* == GLOBAL CSS                 */
 /* ----------------------------- */
 
 .right {
 	float: right;
 }
 
 .left {
 	float: left;
 }
 
 .main {
 	width: 100%;
 	margin: 0 auto;
 }
 
 .grid {
 	max-width: 1920px;
 }
 
 .row,
 .col {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
 .row,
 .col {
 	overflow: hidden;
 }
 
 @media all and (min-width: 40em) {
 	.col {
 		float: left;
 	}
 	.col-1 {
 		width: 16.666666667%;
 	}
 	.col-2 {
 		width: 33.333333334%;
 	}
 	.col-3 {
 		width: 50%;
 	}
 	.col-4 {
 		width: 66.666666668%;
 	}
 	.col-5 {
 		width: 83.333333335%;
 	}
 	.col-6 {
 		width: 100%;
 	}
 }
 
 .page {
 	position: relative;
 	top: 0;
 	transition: all 0.3s;
 	overflow: hidden;
 }
 
 .page-menu-open {
 	top: 30%;
 	overflow: visible;
 }
 
 body#home {
 	background-color: rgb(37, 37, 37);
 	max-width: 1800px;
 }
 
 .titre-page {
 	margin-top: 120px;
 	background: url('../img/back-titre.png') no-repeat;
 	background-position: bottom left;
 	height: 50px;
 }
 
 .titre-page-double {
 	margin-top: 120px;
 	background: url('../img/back-titre2.png') no-repeat;
 	background-position: bottom left;
 	height: 50px;
 }
 
 @media all and (max-width: 59em) {
 	.titre-page,
 	.titre-page-double {
 		margin-top: 20px;
 	}
 }
 
 .titre-page h1,
 .titre-page-double h1 {
 	border-top: 1px solid rgb(230, 230, 230);
 	border-bottom: 1px solid rgb(230, 230, 230);
 	font-family: 'Calligraffitti', cursive;
 	font-size: 24px;
 	color: rgb(112, 48, 132);
 	padding-left: 100px;
 	padding-top: 11px;
 	height: 50px;
 }
 
 @media all and (max-width: 40em) {
 	.titre-page-double h1 {
 		font-size: 16px;
 		padding-left: 15px;
 	}
 }
 
 @media all and (min-width: 40em) {
 	.titre-page-double h1 {
 		font-size: 22px;
 		padding-left: 40px;
 	}
 }
 
 @media all and (min-width: 60em) {
 	.titre-page-double h1 {
 		font-size: 24px;
 	}
 }
 
 @media all and (max-width: 50em) {
 	.titre-page h1 {
 		padding-left: 40px;
 	}
 }
 
 #titre-date-galerie {
 	color: rgb(43, 43, 43);
 }

/* ----------------------------- */
 /* == BARRE COOKIES              */
 /* ----------------------------- */

#cookies-barre {
    color: rgb(43,43,43);
    bottom: 0;
	width: 100%;
	position: fixed;
	background:rgb(255, 255, 255);
	padding:10px 0 0;
	font-family: "Alegreya",serif;
	text-align: center;
	font-size:14px;
	overflow: hidden;
	z-index: 9999;
}

#cookies-barre a {
    color: rgb(112, 48, 132);
    font-style: italic;
}

.cookies-fermer {
    background: none;
    border: none;
    color: rgb(43,43,43);
    font-size: 40px;
    font-weight: 300;
    margin-top: -35px;
	cursor: pointer;
	float:right;
	margin-right:30px;
}
 /* ----------------------------- */
 /* == HEADER                     */
 /* ----------------------------- */
 
 #home .nav-top {
 	background-color: rgb(81, 81, 81);
 	color: rgb(255, 255, 255);
 	font-family: 'Calligraffitti', cursive;
 	width: 100%;
 }
 
 #other .nav-top {
 	background-color: rgb(112, 48, 132);
 	color: rgb(255, 255, 255);
 	font-family: 'Calligraffitti', cursive;
 	width: 100%;
 }
 
 ul.top {
 	color: rgb(255, 255, 255);
 	height: 45px;
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	padding-top: 15px;
 	text-decoration: none;
 }
 
 ul.top > li {
 	display: inline;
 }
 
 ul.top > li > a {
 	color: rgb(255, 255, 255);
 	padding: 6px;
 	text-decoration: none;
 }
 
 ul.top > li > a:hover {
 	color: rgb(43, 43, 43);
 }
 
 header {
 	text-align: center;
 	padding-top: 20px;
 }
 
 body {
 	margin: 0;
 }
 /* pas de puces*/
 
 li {
 	list-style-type: none;
 }
 /* couleur de l'élément parent + pas de soulignage*/
 
 a {
 	color: rgb(255, 255, 255);
 	text-decoration: none;
 }
 
 ul {
 	padding: 0;
 	margin: 0;
 }
 
 #home nav {
 	background-color: rgb(81, 81, 81);
 }
 
 #other nav {
 	background-color: rgb(112, 48, 132);
 }
 
 .menu-btn {
 	background: none;
 	border: none;
 	color: rgb(255, 255, 255);
 	font-size: 22px;
 	font-family: 'Alegreya', serif;
 	display: block;
 	height: 40px;
 	width: 70px;
 	position: absolute;
 	right: 10px;
 	top: 6px;
 }
 /* Règles Mobile*/
 
 @media all and (max-width: 59em) {
 	nav {
 		/* On oblige la navicon à se mettre à droite*/
 		
 		font-family: 'Alegreya', serif;
 		direction: rtl;
 	}
 	nav * {
 		direction: ltr;
 	}
 	#navigation {
 		/* taille maximum correspandante à la hauteur de la navicon*/
 		
 		max-height: 50px;
 	}
 	#navigation,
 	#sousmenu1>ul {
 		/* On cache le conetenu qui dépasse */
 		
 		margin-top: -56px;
 		overflow: hidden;
 		-webkit-transition: all 0.25s ease;
 		-moz-transition: all 0.25s ease;
 		transition: all 0.25s ease;
 	}
 	/* Grace au js, quand on a la classe .active on l'affiche */
 	
 	#navigation.active,
 	#sousmenu1.active+ul,
 	#sousmenu2.active+ul {
 		max-height: 5000px;
 	}
 	/* idem ici*/
 	
 	#sousmenu1+ul,
 	#sousmenu2+ul{
 		max-height: 0px;
 		overflow: hidden;
 	}
 	#home #sousmenu1.active+ul,
 	#home #sousmenu2.active+ul {
 		background-color: rgb(112, 48, 132);
 		padding-bottom: 15px;
 		padding-top: 15px;
 	}
 	#other #sousmenu1.active+ul,
 	#other #sousmenu2.active+ul {
 		background-color: rgb(81, 81, 81);
 		padding-bottom: 15px;
 		padding-top: 15px;
 	}
 }
 
 nav>ul>li {
 	text-align: center;
 	padding: 3px;
 }
 
 nav>ul>li:first-child {
 	margin-top: 55px;
 }
 /*Règles PC*/
 
 @media all and (min-width: 59em) {
 	.menu-btn {
 		display: none;
 	}
 	
 	#home nav,
 	#other nav {
 		background: none;
 		display: inline;
 		margin-top: 260px;
 		position: absolute;
 		width: 100%;
 	}
 	nav>ul {
 		text-align: center;
 		font-family: 'Alegreya SC', serif;
 		font-size: 22px;
 	}
 	a {
 		color: rgb(112, 48, 132);
 	}
 	li {
 		position: relative;
 		padding: 3px;
 	}
 	li:first-child {
 		margin-top: 20px;
 	}
 	nav>ul>li {
 		display: inline;
 		margin: 0 1%;
 		/* la position relative sert à mettre les sous menu les uns dessous la li correspondante*/
 	}
 	/* On affiche pas le sous-menu1 */
 	
 	nav>ul>li>ul {
 		display: none;
 		position: absolute;
 		/*Il est hauut de la hauteur de la ligne - 1px*/
 		
 		top: calc(20px - 1px);
 		left: 0;
 		min-width: 120px;
 		text-align: left;
 	}
 	/* On affiche pas le sous-menu2*/
 	
 	nav>ul>li>ul>li>ul {
 		display: none;
 		position: absolute;
 		right: 0;
 		-webkit-transform: translateX(100%);
 		-moz-transform: translateX(100%);
 		-ms-transform: translateX(100%);
 		-o-transform: translateX(100%);
 		transform: translateX(100%);
 		background-color: yellow;
 	}
 	/* On affiche le(s) sous-menu */
 	
 	nav ul li:hover>ul {
 		display: inline;
 		width: auto;
 	}
 	ul#sous-niveaux {
 		background-color: rgba(123, 57, 144, 0.9);
 		padding: 0 20px 20px;
 		margin-top: 15px;
 	}
 	ul#sous-niveaux li > a {
 		color: rgb(255, 255, 255);
 	}
 	ul.top {
 		text-align: center;
 		font-size: 18px;
 		height: 45px;
 	}
 }
 /* ------------------------------------ */
 /* == DIV PRINCIPALE - ACCUEIL          */
 /* ------------------------------------ */
 
 #principal {
 	font-family: 'Alegreya', serif;
 }
 
 #ligne-presentation h1 {
 	color: rgb(255, 255, 255);
 	font-family: 'Alegreya', serif;
 	font-size: 22px;
 	font-weight: 300;
 	margin-top: 120px;
 	text-transform: uppercase;
 	text-align: center;
 }
 
 #presentation {
 	display: inline-flex;
    display: -webkit-inline-flex;
 	display: -ms-inline-flexbox;
 	width: 100%;
 	margin-top: 20px;
 }
 
 @media all and (max-width: 60em) {
 	#kuky,
 	#jessica {
 		display: none;
 	}
 }
 
 .presentation-p {
 	color: rgb(255, 255, 255);
 	font-family: 'Alegreya', serif;
 	font-size: 16px;
 	padding-top: 40px;
 	text-align: center;
 }
 
 #presentation #titre {
 	font-size: 24px;
 	padding-bottom: 50px;
 }
 
 #ligne1-presentation {
 	min-height: 700px;
 	margin-bottom: 100px;
 }
 
 #ligne-presentation h3 {
 	color: rgb(255, 255, 255);
 	font-family: 'Alegreya', serif;
 	font-size: 16px;
 	font-weight: 400;
 	margin-bottom: 40px;
 	text-align: center;
 }
 
 #bloc1,
 #bloc3 {
 	background-color: rgb(112, 48, 132);
 	min-height: 360px;
 	margin-right: 5px;
 	text-align: center;
 	width: 100%;
 }
 
 #bloc2 {
 	background-color: rgb(81, 81, 81);
 	min-height: 360px;
 	margin-right: 5px;
 	text-align: center;
 	width: 100%;
 }
 
 #bloc2 a {
 	font-weight: 200;
 	color: rgb(35, 50, 93);
 }
 
 #bloc1 h3,
 #bloc2 h3,
 #bloc3 h3 {
 	color: rgb(255, 255, 255);
 	font-family: 'Calligraffitti', cursive;
 	font-size: 24px;
 	padding-top: 35px;
 	padding-bottom: 30px;
 	text-align: center;
 }
 
 @media all and (min-width: 65em) {
 	#bloc1 h3,
 	#bloc2 h3,
 	#bloc3 h3 {
 		padding-top: 35px;
 	}
 }
 
 .index-grille-3 {
 	color: rgb(255, 255, 255);
 	font-family: 'Alegreya', serif;
 	font-size: 16px;
 	font-weight: 300px;
 	margin: 0 auto 50px;
 	width: 89%;
 }
 
 #bloc1 a,
 #bloc3 a {
 	color: rgb(37, 37, 37);
 	background-color: rgb(255, 255, 255);
 	border-radius: 2px;
 	padding: 10px 18px 10px 18px;
 	text-decoration: none;
 }
 
 #gras {
 	font-weight: 700;
 	font-size: 19px;
 }
 
 @media all and (min-width: 50em) {
 	.index-grille-3 {
 		font-size: 18px;
 	}
 	#ligne-presentation h3 {
 		font-size: 20px;
 		margin-bottom: 70px;
 	}
 	.presentation-p {
 		font-size: 18px;
 	}
 }
 /* -------------------------- */
 /* == PAGE ACADEMIA          */
 /* ------------------------- */
 
 #presentation-academia {
 	background-color: rgb(242, 242, 242);
 	min-height: 750px;
 }
 
 #presentation-academia-p {
 	font-size: 16px;
 	text-align: center;
 	width: 85%;
 	margin-left: auto;
 	margin-right: auto;
 	min-height: 200px;
 	padding-top: 20px;
 }
 
 #titre-presentation-pedagogie {
 	background: url('../img/back-titre-left.png');
 	width: 79%;
 	float: right;
 	margin-top: -42px;
 }
 
 #titre-presentation-pedagogie h2 {
 	font-family: 'Calligraffitti', cursive;
 	font-size: 24px;
 	height: 59px;
 	float: right;
 	padding-right: 20px;
 	padding-top: 10px;
 }
 
 #titre-presentation-professeurs {
 	background: url('../img/back-titre-right.png');
 	background-position: right;
 	width: 79%;
 	float: left;
 	position: absolute;
 	margin-top: -30px;
 }
 
 #titre-presentation-professeurs h2 {
 	font-family: 'Calligraffitti', cursive;
 	font-size: 24px;
 	height: 59px;
 	padding-left: 20px;
 	padding-top: 10px;
 }
 
 #presentation-pedagogie {
 	margin-bottom: 70px;
 }
 
 #presentation-pedagogie-p {
 	text-align: center;
 	width: 85%;
 	margin-left: auto;
 	margin-right: auto;
 	padding-top: 50px;
 }
 
 #presentation-professeurs {
 	background-color: rgba(112, 48, 132, 0.9);
 	color: rgb(255, 255, 255);
    padding-bottom: 40px;
 }
#presentation-professeurs-container {
    width: 90%;
    margin: 0 auto;
}
 
 #presentation-professeurs img {
 	padding-top: 160px;
 	text-align: center;
 	width: 90%;
 }

 #prof-un  {
    text-align: left;
}
 
 #prof-un h3 {
 	font-family: 'Calligraffitti', cursive;
 	font-size: 40px;
 	padding-top: 80px;
 	padding-left: 30px;
 }
 
.prof-contenu {
 	width: 85%;
 	padding-left: 20px;
 }
 
 @media all and (min-width: 60em) {
 	#presentation-professeurs img {
 		padding-top: 80px;
 	}
 	.prof-contenu,
 	#presentation-pedagogie-p,
 	#presentation-academia-p {
 		font-size: 18px;
 	}
 	#presentation-academia-p {
 		min-height: 260px;
 	}
 }


 /* -------------------------- */
 /* == PAGE ACTIVITES          */
 /* ------------------------- */
 
 #presentation-1 {
 	background: rgb(242, 242, 242);
 	min-height: 600px;
 	text-align: center;
 }
 
 .presentation-p {
 	width: 86%;
 	margin-left: auto;
 	margin-right: auto;
     margin-bottom: 80px;
 }
 
 #presentation-2 {
 	min-height: 620px;
 	text-align: center;
 }
 
 #presentation-0 {
 	background: rgba(112, 48, 132, 0.9);
 	min-height: 600px;
 	text-align: center;
 }
 
 .presentation > img {
 	padding-top: 40px;
 	width: 86%;
 }
 
 #presentation-1 h2,
 #presentation-2 h2 {
 	text-align: left;
 	font-size: 30px;
 	font-weight: 400;
 	color: rgb(112, 48, 132);
 	padding-top: 20px;
 }
 
 #presentation-0 h2 {
 	text-align: left;
 	font-size: 30px;
 	font-weight: 400;
 	color: rgb(255, 255, 255);
 	padding-top: 20px;
 }
 
.contenu-1,
.contenu-2 {
 	text-align: left;
 	font-size: 18px;
 	color: rgb(43, 43, 43);
 	width: 100%;
 	margin-bottom: 35px;
 }
 
 .contenu-0 {
 	text-align: left;
 	font-size: 18px;
 	color: rgb(255, 255, 255);
 	width: 100%;
 }
 
.presentation-p a {
 	padding: 8px 25px;
 	background-color: rgb(255, 255, 255);
 	border: 1px solid rgb(178, 178, 178);
 	box-shadow: 3px 3px rgba(43, 43, 43, 0.7);
 	-moz-box-shadow: 3px 3px rgba(43, 43, 43, 0.7);
 	-webkit-box-shadow: 3px 3px rgba(43, 43, 43, 0.7);
 	border-radius: 2px;
 	color: rgb(43, 43, 43);
 	position: absolute;
 	right: 60px;
 	float: right;
 	margin-top: 2px;
 }
 
.presentation-p a:hover {
 	background-color: rgba(112, 48, 132, 0.8);
 	color: rgb(255, 255, 255);
 }
 
 .haut-page-1 a,
 .haut-page-2 a {
 	color: rgb(112, 48, 132);
 	font-style: italic;
 }
 
 .haut-page-0 a {
 	color: rgb(255, 255, 255);
 	font-style: italic;
 }
 
 .haut-page-1 img,
 .haut-page-2 img,
 .haut-page-0 img {
 	width: 3%;
 }
 
 @media all and (max-width: 40em) {
 	.haut-page1 {
 		margin-right: 200px;
 	}
 	.haut-page1 img {
 		width: 10%;
 	}
 }
 
 #portfolio img {
 	margin-top: 45px;
 	width: 98%;
 }
 
 @media all and (max-width: 40em) {
 	#portfolio {
 		display: none;
 	}
 	#presentation-cours > img,
 	#presentation-stage > img,
 	#presentation-tablao > img {
 		margin-bottom: 40px;
 	}
     .presentation-p a {
         float: none;
         margin-top: 35px;
         right: 30%;
     }
 }

 /* ----------------------- */
 /* == PAGE COURS           */
 /* ----------------------- */
#inscription-cours {
	background-color: rgb(126,68,144);
	padding: 20px 0;

}

#inscription-stage {
    background-color: rgb(242, 242, 242);
    padding: 20px 0;
}

#inscription-cours-contenu,
#inscription-stage-contenu{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	color: rgb(255,255,255);
	font-size: 18px;
}

#inscription-stage-contenu {
    color: rgb(43,43,43);
}

#btn-inscription {
	height: 45px;
	text-align: center;
	margin-top: 40px;
	
}

 
#btn-inscription a {
 	padding: 8px 25px;
 	background-color: rgb(255, 255, 255);
 	border: 1px solid rgb(178, 178, 178);
 	box-shadow: 3px 3px rgba(43, 43, 43, 0.7);
 	-moz-box-shadow: 3px 3px rgba(43, 43, 43, 0.7);
 	-webkit-box-shadow: 3px 3px rgba(43, 43, 43, 0.7);
 	border-radius: 2px;
 	color: rgb(43, 43, 43);
 	margin-top: 2px;
 }
 
#btn-inscription a:hover {
 	background-color: rgb(255, 255, 255);
 	color: rgb(126,68,144);
 }

.bloc-accordion {
	margin: 80px auto 100px;
	width: 90%;
}

#accordion {


}

#titre-italic {
	font-style: italic;
}

#accordion-contenu {
	border: none;
	font-size: 18px;
}


#ligne-planning-contenu {
	font-size: 20px;
	color :rgb(126, 68, 144);
	font-style: italic;
	margin-top: 10px;
	word-spacing: 4px;
}

#horaires {
	color: rgb(43,43,43);
    font-family: "Alegreya SC", serif;
	font-size: 18px;
    font-weight: 600;
}



 /* ------------------------------- */
 /* == PAGE GALERIE PHOTOS          */
 /* ------------------------------ */
 
 .galerie-photo-ligne1 {
 	background-color: rgb(112, 48, 132);
 	width: 100%;
 	min-height: 450px;
 }
 
 .galerie-photo-ligne4 {
 	width: 100%;
 	min-height: 450px;
 }
 
 .galerie-photo-ligne7 {
 	background-color: rgb(234, 234, 234);
 	width: 100%;
 	min-height: 450px;
 	margin-bottom: 80px;
 }
 
 .galerie-photo-ligne-container {
 	width: 87%;
 	margin: 0 auto;
 }
 
 .bloc-galerie {
 	border: 1px solid rgb(43, 43, 43);
 	font-family: 'Calligraffitti', cursive;
 	min-height: 340px;
 	margin: 50px auto;
 	text-align: center;
 	width: 90%;
 	background-color: rgb(255, 255, 255);
 }
 
 @media all and (min-width: 72em) {
 	.bloc-galerie-ombrage {
 		min-height: 355px;
 		background: url('../img/galerie-ombrage1.png') no-repeat;
 		background-position: 50% 99.5%;
 		background-size: 86%;
 	}
 	.bloc-galerie-ombrage2 {
 		min-height: 355px;
 		background: url('../img/galerie-ombrage2.png') no-repeat;
 		background-position: 50% 99.5%;
 		background-size: 86%;
 	}
 	.bloc-galerie-ombrage3 {
 		min-height: 355px;
 		background: url('../img/galerie-ombrage3.png') no-repeat;
 		background-position: 50% 98%;
 		background-size: 86%;
 	}
 }
 
 .bloc-galerie a {
 	color: rgb(43, 43, 43);
 	font-size: 18px;
 }
 
 .bloc-galerie a > h2 {
 	margin-bottom: -20px;
 }
 
 .bloc-galerie a > img {
 	width: 100%;
 	border-bottom: 1px solid rgb(43, 43, 43);
 }
 
 .bloc-galerie a > img:hover {
 	background: url('../img/bloc-galerie-hover.jpg');
 	opacity: 0.45;
 }
 
 @media all and (max-width: 35em) {
 	.galerie-photo-ligne1,
 	.galerie-photo-ligne4,
 	.galerie-photo-ligne7 {
 		min-height: 1050px;
 	}
 	.bloc-galerie a {
 		font-size: 16px;
 	}
 }
 
 @media all and (max-width: 70em) {
 	.bloc-galerie {
 		margin-bottom: 35px;
        min-height: 320px;
 	}
 }
 /* ------------------------------------ */
 /* == PAGE GALERIE PHOTOS - SUITE      */
 /* ----------------------------------- */
 
 .galerie-photo-suite {
 	background: rgb(242, 242, 242);
 	width: 100%;
 	margin-bottom: 45px;
 }
 
 .galerie-photo-suite-container {
 	padding: 50px 0 50px;
 }
 
 .galerie-photo-images {
 	margin-bottom: 15px;
 }
 
 .galerie-photo-images > img {
 	width: 99%;
 }
 
 .retour-galerie-photo {
 	width: 95%;
 	margin-left: auto;
 	margin-bottom: 45px;
 }
 
 .retour-galerie-photo a {
 	font-size: 20px;
 	font-style: italic;
 	color: rgb(112, 48, 132);
 }
 
 .retour-galerie-photo a > img {
 	padding-right: 10px;
 }
 /* --------------------- */
 /* == PAGE AMIS          */
 /* --------------------- */
 
 .presentation-amis {
 	width: 87%;
 	margin: 50px auto;
 }
 
 .ligne-ami {
 	margin-bottom: 120px;
 }
 
 .ligne-ami img {
 	width: 50%;
 	margin-top: 10px;
 	height: 300px;
 }

#bloc-left {
    width: 50%;
}
 
 .presentation-amis h1 {
 	font-size: 26px;
 	color: rgb(112, 48, 132);
 	background: url('../img/amis-ligne-titre.png') no-repeat;
 	background-position: left bottom;
 	height: 50px;
 	font-weight: 300;
 	width: 70%;
 }
 
 .presentation-amis h2 {
 	font-size: 18px;
 	font-weight: 700;
 	margin-top: 28px;
 }
 
 .contenu-amis {
 	width: 95%;
 	font-size: 17px;
 	line-height: inherit;
 }
 
 .contenu-amis a {
 	font-style: italic;
 	color: rgb(39, 47, 125);
 	text-decoration: underline;
 }
 
 @media all and (max-width: 40em) {
 	.ligne-ami img {
 		display: none;
 	}
  
 }
 
 @media all and (max-width: 60em) {
 	.ligne-ami img {
 		width: 100%;
 	}
        #bloc-left {
         width: 95%;
     }
 }
 
 @media all and (min-width: 60em) {
 	.ligne-ami {
 		display: inline-flex;
        display: -webkit-inline-flex;
 	display: -ms-inline-flexbox;
 	}
 }

/* -------------------------------- */
 /* == PAGE VITRINE CATEGORIES       */
 /* ------------------------------ - */
 
 .zone-recherche-vitrine {
 	margin: 50px 0 0 100px;
 }
 
 .zone-recherche-vitrine > form > input {
 	background: url("../img/icone-loupe.png") no-repeat right center;
 	border: 1px solid rgb(43, 43, 43);
 	border-radius: 5px;
 	color: rgb(43, 43, 43);
 	font-family: "Alegreya SC", sans-serif;
 	font-size: 16px;
 	font-style: italic;
 	font-weight: 600;
 	padding: 8px;
 	text-align: left;
 	text-decoration: none;
 	width: 35%;
 }
 
 .commande-vitrine {
 	background-color: rgb(112, 48, 132);
 	width: 100%;
 	position: inherit;
 	height: 70px;
 }
 
 @media all and (min-width: 40em) {
 	.commande-vitrine {
 		background: url('../img/vitrine-commande-background.png') no-repeat;
 		background-size: 100%;
 		min-height: 230px;
 		right: 0;
 		position: absolute;
 		width: 22%;
 	}
 	.zone-recherche-vitrine {
 		margin-left: 50px;
 	}
 }
 
 @media all and (min-width: 50em) {
 	.commande-vitrine {
 		width: 18%;
 	}
 }
 
 @media all and (min-width: 60em) {
 	.commande-vitrine {
 		width: 14%;
 	}
 }
 
 @media all and (min-width: 70em) {
 	.commande-vitrine {
 		width: 11%;
 	}
 }
 
 .commande-vitrine p {
 	color: rgb(255, 255, 255);
 	font-family: "Alegreya SC", sans-serif;
 	font-size: 16px;
 	margin-top: 50px;
 	text-align: center;
 	width: 98%;
 	margin-left: auto;
 }
 
 @media all and (max-width: 40em) {
 	.commande-vitrine p {
 		width: 100%;
 	}
 }
 
 @media all and (max-width: 40em) {
 	.zone-recherche-vitrine {
 		margin: 30px auto 20px;
 		width: 90%;
 	}
 	.zone-recherche-vitrine > form > input {
 		width: 100%;
 	}
 }
 
 @media all and (min-width: 40em) {
 	.zone-recherche-vitrine > form > input {
 		width: 60%;
 	}
 }
 
 @media all and (min-width: 70em) {
 	.zone-recherche-vitrine > form > input {
 		width: 45%;
 		margin-left: 50px;
 	}
 }
 
 .vitrine-ligne,
  .vitrine-ligne3 {
 	margin: 50px auto 0;
 	width: 100%;
 	min-height: 500px;
 }
 
 .vitrine-ligne3 {
 	background-color: rgb(234, 234, 234);
 }
 
 .bloc-categories {
 	border: 1px solid rgb(43, 43, 43);
 	font-family: "Alegreya SC", sans-serif;
 	min-height: 430px;
 	text-align: center;
 	width: 90%;
 	background-color: rgb(255, 255, 255);
 	margin-bottom: 30px;
 }
 
 .bloc-categories > img {
 	width: 100%;
 	border-bottom: 3px solid rgb(112, 48, 132);
 }
 
 .bloc-categories h2 {
 	background-color: rgb(112, 48, 132);
 	border: 1px solid rgb(234, 234, 234);
 	color: rgb(255, 255, 255);
 	font-weight: 400;
 	font-size: 30px;
 	height: 50px;
 	width: 16%;
 	padding-left: 16px;
 	padding-top: 5px;
 	position: absolute;
 	margin-top: -40px;
 	text-align: left;
 }
 
 .bloc-categories h3 {
 	font-family: 'Calligraffitti', cursive;
 	font-weight: 400;
 	font-size: 20px;
 	width: 52%;
 	text-align: left;
 	padding-left: 20px;
 }
 
 .vitrine-ligne-container{
 	width: 87%;
 	margin: 0 auto;
 	padding-top: 35px;
 }
 
 #contenu-ligne {
 	display: inline-flex;
 	display: -webkit-inline-flex;
 	display: -ms-inline-flexbox;
 	margin-top: 35px;
 }
 
 #contenu-ligne a {
 	background-color: rgb(242, 242, 242);
 	border: 1px solid rgb(43, 43, 43);
 	border-radius: 1px;
 	box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
 	color: rgb(43, 43, 43);
 	font-family: "Alegreya SC", serif;
 	font-size: 18px;
 	height: 40px;
 	margin-left: 25px;
 	margin-top: 8px;
 	padding: 6px 15px;
 }
 
 @media all and (max-width: 50em) {
 	#contenu-ligne {
 		display: block;
        padding-bottom: 20px;
 	}
 	.bloc-categories h3 {
        font-size: 20px;
 		width: 90%;
 		margin-bottom: 30px;
 	}
 	.bloc-categories {
 		min-height: 350px;
 	}
     .bloc-categories h2  {
         width: 60%;
     }
 }

@media all and (min-width: 40em) and (max-width: 60em) {
    .bloc-categories h2 {
        width: 30%;
    }
}
 
 @media all and (max-width: 70em) {
 	#contenu-ligne a {
 		font-size: 16px;
 		height: 45px;
 		margin-left: 0;
 		margin-right: 10px;
 		padding: 6px;
 	}
 	.bloc-categories {
 		min-height: 350px;
 	}
 	.bloc-categories h2 {
 		font-size: 24px;
 	}
 	.vitrine-ligne,
 	.vitrine-ligne2 {
 		min-height: 400px;
 	}
 }

@media all and (max-width: 76em) {
	#contenu-ligne a {
		height: 50px;
		
	}
}
 
 #contenu-ligne a:hover {
 	background-color: rgba(112, 48, 132, 0.9);
 	color: rgb(255, 255, 255);
 }


 /* ------------------------------ */
 /* == PAGE VITRINE PRODUITS       */
 /* ---------------------------- - */
 
 .vitrine-produits-ligne {
 	margin: 50px auto 60px;
 	width: 100%;
 	min-height: 500px;
 }
 
 .vitrine-produits-container {
 	width: 90.5%;
 	margin: 0 auto;
 }
 
 #produits-supp {
 	margin: 80px auto 0;
	 text-align: center;
 }
 
 #produits-supp a {
 	color: rgb(43, 43, 43);
 	font-family: "Calligraffitti", cursive;
 	font-size: 30px;
 	font-weight: 600;
 	letter-spacing: 1.4em;
 	padding-top: 5px;
 	text-decoration: none;
 }
#retour-vitrine {
	margin: 20px auto 10px;
}

#retour-vitrine a {
	color: rgb(112, 48, 132);
	font-family: "Calligraffitti", cursive;
 	font-size: 22px;
	margin-left: 100px;
	
}
 
 .bloc-produits {
 	text-align: center;
 	width: 85%;
 	margin-bottom: 50px;
 	margin-left: auto;
 	margin-right: auto;
 	border-bottom: 3px solid rgb(112, 48, 132);
 	min-height: 535px;
 }
 
 .bloc-produits a > img {
 	padding-left: 5px;
 	padding-right: 5px;
     padding-bottom: 10px;
 }
 
 .bloc-photo {
 	height: 250px;
 	border: 1px solid rgb(43, 43, 43);
 }
 
 .bloc-photo > img {
 	width: 100%;
 	padding-top: 20px;
 }
 
 @media all and (max-width: 35em) {
 	.bloc-photo {
 		height: 200px;
 	}
 	.vitrine-produits-ligne {
 		margin-bottom: 0;
 	}
 	#produits-supp a {
 		font-size: 18px;
 	}
	 	 #retour-vitrine a {
		 margin-left: 20px;
	 }
 }
 
 @media all and (min-width: 40em) {
 	.bloc-photo {
 		height: 200px;
 	}
 }
 
 @media all and (max-width: 20em) {
 	.bloc-produits a > img {
 		padding-bottom: 30px;
 	}
 }
 
 .bloc-produits h2 {
 	font-family: "Alegreya SC", serif;
 	font-size: 24px;
 	color: rgb(112, 48, 132);
 	font-weight: 600;
 }
 
 #contenu-produits {
 	font-family: 'Calligraffitti', cursive;
 	font-size: 18px;
 	text-align: left;
 	width: 90%;
 	margin-left: auto;
 	margin-right: auto;
 }

 #contenu-prix{
		font-family: "Alegreya SC", serif;
 	font-size: 24px;
	 font-weight: 400;
	 padding-bottom: 25px;
 }

@media all and (min-width: 92em) and (max-width: 110em) {
    #titre-presentation-professeurs,
    #titre-presentation-pedagogie{
        width: 66%;
    }
    .bloc-categories {
        min-height: 490px;
    }
    .bloc-photo {
        min-height: 260px;
    }
}

 /* ---------------------------- */
 /* == CONTACTS                  */
 /* ---------------------------- */
 
 .contacts-maps {
 	margin-bottom: 80px;
 }
 
 #contact-formulaire {
 	width: 80%;
 	margin: 0 auto 100px;
 }
 
 #contact-coordonnees,
 #contact-informations {
 	width: 90%;
 	margin: 0 auto 100px;
 }
 
 #contact-formulaire h2 {
 	color: rgb(112, 48, 132);
 	font-size: 24px;
 	background: url('../img/ligne-contact-form.png') no-repeat;
 	background-position: bottom left;
 	height: 50px;
 	margin-bottom: 40px;
 	width: 100%;
 }
 
 #bloc-formulaire {
 	background: rgb(126, 68, 144);
 	width: 90%;
 	margin-right: auto;
 	padding-left: 30px;
 	padding-top: 40px;
 	min-height: 700px;
 }
 
 #bloc-formulaire h3 {
 	font-size: 18px;
 	font-weight: 300;
 	color: rgb(242, 242, 242);
 	margin-top: -12px;
 }
 
 #change {
 	border: 1px solid rgb(242, 242, 242);
 	display: block;
 	height: 35px;
 	width: 60%;
 	background: none;
 	color: rgb(242, 242, 242);
 	font-size: 16px;
 }
 
 #message {
 	border: 1px solid rgb(230, 230, 230);
 	background: none;
 	display: block;
 	height: 200px;
 	width: 90%;
 	color: rgb(242, 242, 242);
 	font-size: 16px;
 }
 
 #envoie {
 	font-family: 'Alegreya SC', serif;
 	font-size: 18px;
 	width: 22%;
 	border: 1px solid rgb(43, 43, 43);
 	border-radius: 1px;
 	height: 45px;
 	background-color: rgb(242, 242, 242);
 	float: right;
 	margin-right: 65px;
 	box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
 	-moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
 	-webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
 }
 
 #envoie:hover {
 	background-color: rgba(192, 192, 192, 0.9);
 	color: rgb(255, 255, 255);
 }
 
 #contact-coordonnees h2,
 #contact-informations h2 {
 	color: rgb(112, 48, 132);
 	font-size: 24px;
 	background: url('../img/ligne-contact-coordonnees.png') no-repeat;
 	background-position: bottom left;
 	height: 50px;
 	margin-bottom: 40px;
 	width: 82%;
 }
 
 #bloc-coordonnees,
 #bloc-informations {
 	background: rgb(242, 242, 242);
 	width: 78%;
 	padding: 25px 0 25px 20px;
 	margin-bottom: 60px;
 }
 
 @media all and (max-width: 40em) {
 	#contact-coordonnees,
 	#contact-informations {
 		width: 80%;
 		margin: 0 auto 100px;
 	}
 	#bloc-coordonnees,
 	#bloc-informations {
 		width: 92%;
 	}
 	#envoie {
 		width: 30%;
 	}
     #contact-formulaire {
         margin-bottom: 50px;
     }
     #contact-coordonnees, #contact-informations {
         margin-bottom: 50px;
     }
 }
 
 @media all and (max-width: 60em) {
 	#contact-coordonnees h2,
 	#contact-informations h2,
 	#contact-formulaire h2 {
 		font-size: 20px;
 	}
 }

 
 #bloc-informations {
 	margin-bottom: 80px;
 }
 
 #bloc-coordonnees-contenu,
 #bloc-informations-contenu {
 	font-size: 18px;
 	width: 90%;
 }
 
 #bloc-coordonnees a {
 	color: rgb(34, 48, 99);
 	text-decoration: underline;
 }

@media all and (min-width: 40em) and (max-width: 75em) {
    #contact-coordonnees, #contact-informations {
        width: 100%;
    }
    #bloc-coordonnees, #bloc-informations {
        width: 85%;
    }
    #contact-coordonnees, #contact-informations {
        margin-bottom: 80px;
    }
    #envoie {
        width: 30%;
    }
    #bloc-formulaire {
        min-height: 725px;
    }
}


@media all and (min-width: 40em) and (max-width: 60em) {
        #bloc-coordonnees-contenu, #bloc-informations-contenu {
        font-size: 16px;
    }
}
@media all and (max-width: 25em) {
    #bloc-formulaire {
        width: 100%;
    }
    #envoie {
        width: 45%;
        margin-right: 25px;
    }
}

#resultat-email {
    color: rgb(242, 242, 242);
    font-family: 'Alegreya SC', serif;
    font-style: italic;
    padding-bottom: 20px;
}
 /* --------------------------- */
 /* == BLOG                     */
 /* --------------------------- */
 
 #blog-colonne-left {
 	margin-top: 50px;
 	width: 85%;
 	margin-left: auto;
 	margin-right: auto;
 }
 
 .blog-articles {
 	text-align: center;
 	margin-bottom: 100px;
 }

.article h3 {
    margin-bottom: 20px;
}
 
 #date {
 	background: url('../img/blog-ligne-date.png') no-repeat;
 	background-position: center;
 	font-style: italic;
 	font-size: 22px;
 }

#blog-contenu {
    margin-top: 20px;
}
 
 .ligne-date-article {
 	margin-bottom: 40px;
 	padding-top: 25px;
 }
 
 #article h3 {
 	font-family: 'Calligraffitti', cursive;
 	font-size: 24px;
 	margin-bottom: 30px;
 }
 
 #ablog-contenu {
 	text-align: left;
 	margin-top: 30px;
 	font-size: 16px;
 	margin-bottom: 30px;
 }
 
 #bouton-lire {
 	margin-top: 60px;
 }
 
 #bouton-lire a {
 	font-family: 'Alegreya SC', serif;
 	font-size: 18px;
 	padding: 8px 22px;
 	border: 1px solid rgb(43, 43, 43);
 	border-radius: 2px;
 	color: rgb(43, 43, 43);
 	border-radius: 1px;
 	height: 45px;
 	background-color: rgb(242, 242, 242);
 	box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
 	-moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
 	-webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
 }
 
 #bouton-lire a:hover {
 	background-color: rgba(112, 48, 132, 0.9);
 	color: rgb(255, 255, 255);
 }
 
 .zone-recherche > form > input {
 	background: url('../img/icone-loupe.png') no-repeat;
 	background-position: right;
 	border: 1px solid rgb(211, 211, 211);
 	padding: 8px;
 	width: 77%;
 	text-decoration: none;
 	text-align: left;
 	color: rgb(211, 211, 211);
 	font-family: 'Alegreya SC', sans-serif;
 	font-style: italic;
 	font-weight: 600;
 	font-size: 16px;
 }
 
 .actualites-supp {
 	margin: 30px auto 100px;
 	text-align: center;
 	width: 70%;
 }
 
 .actualites-supp a > img {
 	padding-right: 25px;
 	width: 10%;
 }
 
 .actualites-supp a {
 	color: rgb(43, 43, 43);
 	font-family: 'Calligraffitti', cursive;
 	font-size: 22px;
 	font-weight: 600;
 	letter-spacing: 1.4em;
 	padding-top: 5px;
 	text-decoration: none;
 }
 
 #blog-colonne-right {
 	margin: 50px auto 80px;
 	width: 80%;
 	text-align: center;
 }
 
 #blog-colonne-right h2 {
 	font-family: 'Calligraffitti', cursive;
 	font-size: 30px;
 	color: rgb(126, 68, 144);
 	text-align: center;
 	margin-bottom: 8px;
 }
 
 @media all and (max-width: 60em) {
 	#blog-colonne-right h2 {
 		font-size: 22px;
 	}
 }
 
 #categories-texte,
 #bloc-archives-contenu,
 #suivre-reseaux-contenu,
 #inscription-neswletter-contenu {
 	background-color: rgb(242, 242, 242);
 	width: 77%;
 	margin-left: auto;
 	margin-right: auto;
 	padding-top: 30px;
 	padding-bottom: 40px;
 }
 
 #bloc-archives {
 	padding-bottom: 0;
 }
 
 #categories-texte a {
 	color: rgb(43, 43, 43);
 	font-family: 'Alegreya SC', cursive;
 	font-size: 18px;
 }
 
 #selection-archives {
 	margin: 30px auto 30px;
 	padding: 6px 20px 6px 10px;
 }

 .ui-select-native {
 	-moz-appearance: none;
 	background: url("../img/fleche-nav.png") no-repeat scroll 90% center;
 	border: 1px solid rgb(43,43,43);
 	color: rgb(43,43,43);
 	cursor: pointer;
 	float: none;
     font-family: "Alegreya SC",cursive;
     font-style: italic;
 	font-size: 14px;
 	height: 35px;
 	outline: medium none;
 	padding-left: 8px;
 	padding-right: 80px;
 	width: inherit;
 }
 
 #selection-archives a {
 	color: rgb(43, 43, 43);
 	font-style: italic;
 	font-family: 'Alegreya SC', cursive;
 	font-weight: 400;
 	text-decoration: none;
 	text-align: left;
 	font-size: 14px;
 }
 
 #selection-archives a> img {
 	padding-left: 25px;
 	width: 8%;
 }
 
 #suivre-reseaux-contenu > img {
 	padding-right: 15px;
 	margin-bottom: 15px;
 }
 
 #newsletter >input {
 	font-size: 14px;
 	color: rgb(43, 43, 43);
 	height: 30px;
 	border: none;
 	width: 70%;
 	border: 1px solid rgb(43, 43, 43);
 }
 
 #btn {
 	background-color: rgb(43, 43, 43);
 	padding: 3px 5px 4px 3px;
 	margin-left: -3px;
 	color: rgb(255, 255, 255);
 }
@media all and (max-width: 35em) {
    .actualites-supp {
        width: 100%;
    }
    .actualites-supp a > img {
        width: 20%;
    }
}
 /* --------------------------- */
 /* == ARTICLE                  */
 /* --------------------------- */
 
 .page-article {
 	text-align: center;
 	width: 100%;
 	margin: 50px auto 60px;
 }
 
 #haut-page {
 	position: fixed;
 	text-align: center;
 	bottom: 170px;
 	text-align: center;
	 font-family: 'Alegreya SC', cursive;
 }
 
 .haut-page-right {
 	width: 40%;
 	margin-left: auto;
 }
 
 #haut-page a {
 	color: rgb(126, 68, 144);
 	text-decoration: none;
 	font-size: 14px;
 }
 
 #haut-page a > img {
 	width: 75%;
 	padding-bottom: 4px;
 }
 
 @media all and (max-width: 40em) {
 	#haut-page {
 		display: none;
 	}
 }
 #article-contenu {
	 padding-left: 50px;
	 text-align: left;
 	margin-top: 30px;
 	font-size: 16px;
 	margin-bottom: 30px;
 }

 #partage-reseaux,
 #auteur {
 	text-align: center;
 	font-size: 18px;
 	margin-bottom: 10px;
 }

 #partage-reseaux {
	 margin-bottom: 50px;
 }

#blog-violet {
	color: rgb(126, 68, 144);
}
 
 #retour-blog {
 	margin-left: auto;
 	margin-bottom:50px;
	 margin-left: 50px;
 }
 
 #retour-blog a {
 	color: rgb(43,43,43);
 	font-size: 18px;
 	text-decoration: none;
 }
 
 #retour-blog a > img {
 	padding-right: 10px;
 }
 
 #partage-reseaux a > img {
 	padding-right: 5px;
 }
 
 /* ----------------------------- */
 /* == FOOTER                     */
 /* ----------------------------- */
 
 footer {
 	background-color: rgb(43, 43, 43);
 	height: 150px;
 	width: 100%;
 }
 
 #contacts-footer p {
 	color: rgb(255, 255, 255);
 	font-family: 'Alegreya', serif;
 	font-size: 16px;
 	font-weight: 300;
 	padding-top: 45px;
 	text-align: center;
 }
 
 #contacts-footer a > img {
 	padding: 10px;
 }
 
 
 .page-autre {
    margin: 50px auto;
    width: 90%;
}

#actualites-supp-onglet-actif {
    color: rgb(112, 48, 132);
    font-size: 36px;
    font-weight: 500;
    font-family: 'Alegreya', serif;
}