/*POLICES*/

@font-face {
    font-family: 'larke_sans_boldregular';
    src: url('polices/larke_sans_bold.eot');
    src: url('polices/larke_sans_bold.eot?#iefix') format('embedded-opentype'),
         url('polices/larke_sans_bold.woff2') format('woff2'),
         url('polices/larke_sans_bold.woff') format('woff'),
         url('polices/larke_sans_bold.ttf') format('truetype'),
         url('polices/larke_sans_bold.svg#larke_sans_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'larkeregular';
    src: url('polices/larke_sans_light_2.eot');
    src: url('polices/larke_sans_light_2.eot?#iefix') format('embedded-opentype'),
         url('polices/larke_sans_light_2.woff2') format('woff2'),
         url('polices/larke_sans_light_2.woff') format('woff'),
         url('polices/larke_sans_light_2.ttf') format('truetype'),
         url('polices/larke_sans_light_2.svg#larkeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'quaver_serifregular';
    src: url('polices/quaverserif.eot');
    src: url('polices/quaverserif.eot?#iefix') format('embedded-opentype'),
         url('polices/quaverserif.woff2') format('woff2'),
         url('polices/quaverserif.woff') format('woff'),
         url('polices/quaverserif.ttf') format('truetype'),
         url('polices/quaverserif.svg#quaver_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'quaver_sansregular';
    src: url('polices/quaversans.eot');
    src: url('polices/quaversans.eot?#iefix') format('embedded-opentype'),
         url('polices/quaversans.woff2') format('woff2'),
         url('polices/quaversans.woff') format('woff'),
         url('polices/quaversans.ttf') format('truetype'),
         url('polices/quaversans.svg#quaver_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

	*,
	*:after,
	*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
font-family : larke_sans_boldregular;
background-color : #020107;
}
body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form {
margin : 0;
padding : 0;
}
header, footer, aside, nav, section, article, figure, hgroup, figcaption {
display : block;
}

	
	/*	==================conteneur ======================== */
.conteneur {
width : 100%;
margin : 0 auto;
display : block;
} 	/*	==================HEADER ======================== */
header {
float : left;
font-family : larke_sans_boldregular, Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
width : 100%;
position : relative;
}
header img {
float : left;
width : 100%;
height : auto;
border-bottom : 3px solid #a00000;
}
header h1 span {
position : absolute;
font-size : 0.6em;
letter-spacing : 0.58em;
bottom : 10px;
right : 330px;
}

	/*	==================MENU ======================== */	
	
	
nav.index div{
float : left;
width : 32%;
height : 55px;

}
nav.index {
display : inline;
float : left;
width : 100%;
height : 70px;


}
nav.index ul {
list-style: none;
padding-top: 5px;
font-size: 2.4em;

}
nav.index ul li {
margin : 0 auto;
display : inline;
}
nav.index ul li a {
font-family : quaver_sansregular, Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
padding : 0% 3%;

line-height : 44px;
text-align : center;
text-decoration : none;
color : #000;
float : left;
}

nav.index ul li a:link {
color : #a00000;
}
nav.index ul li a:hover {
color : #a00000;
text-decoration : underline;
box-shadow:0px 1px 3px #999;
	 border-bottom-right-radius:10px;
	 border-bottom-left-radius:10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
}
nav.index ul li.last {
float : left;
}


#menu_h_1 #onglet_1 a {
color : #a00000;
text-decoration : underline;
}
#menu_h_2 #onglet_2 a {
color : #a00000;
text-decoration : underline;
}
#menu_h_3 #onglet_3 a {
color : #a00000;
text-decoration : underline;
}
#menu_h_4 #onglet_4 a {
color : #a00000;
text-decoration : underline;
}
#menu_h_5 #onglet_5 a {
color : #a00000;
text-decoration : underline;
}


p {
font-family : Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
font-size : 11px;
margin-bottom : 7px;
}
ul {
font-size : 11px;
margin : 0 0 7px 30px;
}
li {
margin : 0 0 7px 0;
}


	/*	==================MAIN ======================== */
main {
display : block;
width : 100%;
height : 100%;
background-image : url(../images/motif_arriere_plan.jpg);
} 
	/*	==================ZONNE GRISE EN BAS DE LA PAGE ======================== */
	
section.gris p {
font-family : larke_sans_boldregular, Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
font-size : 1.3em;
width : 100%;
clear : both;
background-color: rgba(0,0,0,0.61);
border-top : 3px solid #a00000;
margin : 0;
padding : 4px 0 0 120px;
height : 30px;
}
ul li {
display : inline;
}

	/*	==================ZONNE video ======================== */
	/*	==================ZONNE video ======================== */
	
section.video {
	float:left;
	width:65%;
	margin-left:0px;
	background-color:rgba(235,235,235,0.80);
	padding : 30px 30px 30px 30px;

}
section.video iframe {
display : block;

margin-bottom : 20px;
float : left;
width : 600px;
height : 338px;
}

section.video img {
display : block;
margin-bottom : 20px;
float : left;
}
section.video div {
float : left;
margin-bottom : 20px;
}
section.video p {
float : left;
overflow : auto;
width : 99%;
padding: 5px 0px;
height : 30px;
font-family : Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
font-size : 1em;
}
section.video div p {
float : left;
overflow : auto;
width : 99%;
height : 140px;
font-family : Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
font-size : 0.8em;
}
section.video div p span {
font-weight : bold;
color : #a00000;
font-family : Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
font-size : 1.2em;
}
section.video div p span.titre {
font-weight : bold;
color : #a00000;
font-family : Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
font-size : 1.5em;
}

	/*	==================ZONNE GRISE_FOND ======================== */
	/*	==================ZONNE GRISE_FOND ======================== */

section.gris_fond {
float : left;
margin-left : 84px;
padding : 30px;
width : 60%;
display : block;
background-color: rgba(235,235,235,0.80);
}
section.gris_fond iframe {
display : block;
margin : 16px;
}
section.gris_fond img {
display : block;
margin : 10px 16px;
}

	/*	==================ZONNE CONTACTE ======================== */
	
section.contact {
float:left;
width:65%;
position : relative;
margin-left : 0px;
display : block;
min-height : 205px;
background-color:rgba(235,235,235,0.80);

}

section.contact div p {
font-family : larke_sans_boldregular, Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
font-size : 1.3em;
padding : 10px 30px 30px 80px;
width : 75%;
line-height : 120%;
min-height : 205px;
}
section.contact p img{

padding : 0px;

}

	/*	==================ZONNE CONTACTE ROSE======================== */
	
section.contact div {
padding : 50px 30px 30px 100px;
margin-right : 10px;
width : 100%;
min-height : 200px;
background-color: rgba(234,186,186,0.60);
}
section.contact div img {
float : left;
}
	/*	==================section.news ======================== */
a {
	color : #000;
	text-decoration:none;	
}
a:hover {
	color : #a00000;
	box-shadow: #a00000;
	border-bottom: 1px solid #a00000;
		
}
section.news{
	background-color: rgba(234,186,186,0.60);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	display:block; 
	width: 100%;
	height:500px;
	float:left;
	padding:0px;	
}
section.news div span{
	font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	font-size:15px;
	padding: 15px 0px 0px 10px; 
	float:left;
	display:block;
}

section.news div#contenu_news{
	 font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif; 		
	 width: 100%;
 	 height:300px;
	 font-size:0.8em;
	 padding:5px; 
	 margin: 0px; 
	 overflow:auto;  
	 background-color:rgba(255,255,255,0.82); 
	 line-height:13px;
	 float:left;
	 display:block;
	 }
	 section.news div#sylvie{
	 font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	 font-weight: bold;
	 width:100%; 
	 height:40px; 
	 font-size:0.7em;
	 color:rgba(255,255,255,0.82);
	 padding: 7px 0px 0 10px; 
	 margin: 0px; 

	 line-height:13px;
	 float:left;
	 display:block;
	 background-color:rgba(160,0,0,1.00);
	 border-bottom-right-radius:10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomright: 10px;


}
/*	==================aside ======================== */
aside#left{
float : left;
width : 25%;
padding-right:7%;


}	
aside#right{
float : left;
width : 10%;


}	

	/*	==================section.fb======================== */
	section.fb img{
	float:right;
	width:75px;
	height:55px;
	padding:0;
	margin-left: 10px;
	
}

section.fb img:hover{
	box-shadow:0px 1px 3px #999;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomleft: 10px;
	
}


	/*	==================ZONNE MINIATURE GALERIE PHOTO ======================== */
	
	
	section.effets {
	float:left;
	padding:1%;
	
	width:60%;
	margin:0px;
	height:auto;
	background-color:rgba(235,235,235,0.80);
	display:block;
		
}
	section.effets ul{
	font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	font-size:0.8em;
	margin: 0px auto;
	float:left;
	
	
	
}

	section.effets ul img{
	float:left;
	margin: 0px;
	padding:1%;
	display:block;
}
/*
	section.effets p{
	padding:15px;
	margin: 5px;
	font-size:1em;
}

		==================ZONNE BIOGRAPHIE ======================== */
	section.biographie {
	float:left;
	width:65%;
	margin-left:0px;
	background-color:rgba(235,235,235,0.80);
	padding : 30px;
}
	section.biographie div img.bio{float:left; margin-top:115px;}	
	section.biographie div p{
	font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	float:left;
	font-size:0.8em;
	height:328px;
	overflow:auto;
	width:100%;	
}
	section.biographie div{
	float:left;
	width:50%;
/*	border:solid 1px red;*/
	padding:15px 15px 15px 15px;
}
	section.biographie div p span {
	font-weight : bold;
	color : #a00000;
	font-family : Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	font-size : 1.2em;
}
	section.biographie div span img{margin:0 0 15px 75px;}
	
@media only screen and (min-width:1921px) and (max-width:2560px) {
	div.conteneur{width:100%;}
	header img{width:100%;}
	nav.index{width:100%; margin:0px; padding:0px;}
	nav.index div{float : left; width : 35%;}

	nav.index ul{ width:100%; height:100%; margin:0px; font-size:2em;}
	nav.index ul li a{width:9%; height:60px; padding:0px;}
	nav.index ul li a.accueil{width:6%;}
	nav.index ul li a.spectacles{ width:16%; padding:0px; text-align:center;}
	main{width:100%;}
	section.effets{width:62%; height:100%; padding:1%;}
	section.effets ul img{margin:0px; padding:0.5%;}
	/*	video */
	section.video{width:62%;}
	section.video iframe{width:99%; margin:0px;}
	section.video img{width:99%; height:99%; margin: 5px 0px;}
	/*	video */
	section.gris_fond{width:65%; min-height:260px; margin-left:4%;}
	section.gris_fond img{width:300px; height: 243px; margin: 5px 0px;}
	section.biographie{float:left; padding:4%; width:62%;}
	section.biographie img{float:left; width:100%; height:100%; padding:0px;}
	section.biographie div span img{width:20%; height:20%;}
	section.biographie div{float:left; width:50%; margin:0; padding:0;}
	section.biographie div p{ width:100%; margin:0; padding:7%;}
	section.gris{height:100%; width:100%; margin:0px; padding:0px;}
	section.gris p{padding:5px 17px 12px 17px;line-height:10px; text-align:center;}
	section.contact div p{height:100%; width:100%; padding:5% 0 5% 10%; font-size:1.5em;}
	section.contact{height:100%; width:62%; padding:10px;}
	section.accordeon{height:100%; width:30%; margin-bottom:0px; padding:10px; float:right;}
	section.fb img{width:30%; height:30%; padding:0px; margin:0px;}
	section.fb{width:100%; padding:0px; margin:0px;}
	a.menu {
	border-top-left-radius:2em; text-align: right; border-top-right-radius:0em; float:right;}
	section.news{
	width:100%;
	height:100%;
	float:left;

}
/*	==================aside ======================== */
aside#left{
float : left;
width : 28%;
padding-right:7%;


}	
aside#right{
float : left;
width : 10%;


}	
}

	@media only screen and (min-width:1025px) and (max-width:1920px) {
	div.conteneur{width:100%;}
	header img{width:100%;}
	nav.index{width:100%; margin:0px; padding:0px;}
	nav.index div{float : left; width : 30%;}
	nav.index ul{ width:100%; height:100%; margin:0px; font-size:1.8em; padding-left:20%;}
	nav.index ul li a{width:12%; height:50px; padding:0px;}
	nav.index ul li a.accueil{width:12%;}
	nav.index ul li a.spectacles{ width:16%; padding:0px; text-align:center;}
	main{width:100%;}
	section.effets{width:60%; height:100%; padding:1% 3.7%;}
	section.effets ul img{width:25%; height:25%; margin:0px; padding:2.5%;}
	/*	video */
	section.video{width:60%;}
	section.video iframe{width:99%; margin:0px;}
	section.video img{width:99%; height:99%; margin: 5px 0px;}
	/*	video */
	section.gris_fond{width:65%; min-height:260px; margin-left:4%;}
	section.gris_fond img{width:300px; height: 243px; margin: 5px 0px;}
	section.biographie{float:left; padding:4%; width:60%;}
	section.biographie img{float:left; width:100%; height:100%; padding:0px;}
	section.biographie div span img{width:20%; height:20%;}
	section.biographie div{float:left; width:50%; margin:0; padding:0;}
	section.biographie div p{ width:100%; margin:0; padding:7%;}
	section.gris{height:100%; width:100%; margin:0px; padding:0px;}
	section.gris p{padding:5px 17px 12px 17px;line-height:10px; text-align:center;}
	section.contact div p{height:100%; width:100%; padding:5% 0 5% 10%;  font-size:1.2em;}
	section.contact{height:100%; width:60%; padding:10px;}
	section.accordeon{height:100%; width:30%; margin-bottom:0px; padding:10px; float:right;}
	section.fb img{}
	a.menu {
	border-top-left-radius:2em; text-align: right; border-top-right-radius:0em; float:right;}
	section.news{
	width:100%;
	height:100%;
	float:left;

}
/*	==================aside ======================== */
aside#left{
float : left;
width : 26%;
padding-right:7%;
}	
aside#right{
float : left;
width : 14%;
}	
}

@media only screen and (min-width:768px) and (max-width:1024px) {
	div.conteneur{width:100%;}
	header img{width:100%;}
	nav.index{width:100%; margin:0px; padding:0px;}
	nav.index div{float : left; width : 29%;}
	nav.index ul{ width:100%; height:100%; margin:0px; font-size:1.4em; padding-left:20%;}
	nav.index ul li a{width:15%; height:50px; padding:0px;}
	nav.index ul li a.accueil{width:14%;}
	nav.index ul li a.spectacles{ width:18%; padding:0px; text-align:center;}
	main{width:100%;}
	section.effets{width:60%; height:100%; padding:2.5%;}
	section.effets ul img{width:25%; height:25%; margin:0px; padding:2.5%;}
	/*	video */
	section.video{width:60%;}
	section.video iframe{width:99%; margin:0px;}
	section.video img{width:99%; height:99%; margin: 5px 0px;}
	/*	video */
	section.gris_fond{width:65%; min-height:260px; margin-left:4%;}
	section.gris_fond img{width:300px; height: 243px; margin: 0px;}
	section.biographie{float:left; padding:4%; width:60%;}
	section.biographie img{float:left; width:100%; height:100%; padding: 0px;}
	section.biographie div span img{width:30%; height:30%;}
	section.biographie div{float:left; width:50%; margin:0; padding:0;}
	section.biographie div p{ width:100%; margin:0; padding:7%;}
	section.gris{height:100%; width:100%; margin:0px; padding:0px;}
	section.gris p{padding:5px 17px 12px 17px;line-height:10px; text-align:center; font-size:1.2em;}
	section.contact div p{height:100%; width:60%; padding:8% 0 0 15%; font-size:1em;}
	section.contact{height:100%; width:60%; padding:10px;}

	section.accordeon{height:100%; width:30%; margin-bottom:0px; padding:10px; float:right;}
	section.fb img{width:50%; height:50%;}
	a.menu {
	border-top-left-radius:2em; text-align: right; border-top-right-radius:0em; float:right;}
		section.news{
	width:100%;
	height:100%;
	float:left;

}
/*	==================aside ======================== */
aside#left{
float : left;
width : 30%;
padding-right:7%;


}	
aside#right{
float : left;
width : 10%;


}	
}
@media only screen and (min-width:641px) and (max-width:767px) {
	main{width:100%;}
	div.conteneur{width:100%;}	
	header img{width:100%;}
	nav.index{width:100%; padding:0px;}
	nav.index div{
		display:none;
}
	nav.index ul{ width:100%; height:100%; margin:0px; font-size:1.4em; padding-left:2%;}
	nav.index ul li a{width:20%; height:50px; padding:0px;}
	nav.index ul li a.accueil{width:15%;}
	nav.index ul li a.spectacles{ width:25%; padding:0px; text-align:center;}
	


/*	==================aside ======================== */
aside#left{
float : left;
width : 100%;
padding-right:0%;


}	
aside#right{
float : right;
width : 15%;


}	
	 
	section.news{
	background-color: rgba(234,186,186,0.60);
	display:block; 
	width: 100%;
	height:230px;
	float:left;
	margin: 0px;

}

	 section.news div#contenu_news{
	 font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif; 
	 width:100%; 
	 max-height:150px; 
	 font-size:0.8em;
	 padding: 10px 10px 0 10px; 
	 overflow:auto; 
	 background-color:rgba(255,255,255,0.82); 
	 line-height:13px;
	 float:left;
	 display:block;
	 }
	 section.news div span{
	font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	font-size:15px;
	padding: 15px 0px 0px 10px; 
	float:left;
	display:block;
}
	 section.news div#sylvie{
	 width:100%; 
	 height:20%;
	 font-size:0.7em;
	color:rgba(255,255,255,0.82);
	 float:left;
	 top:0px;
	 font-weight:bold;
	 margin:0px;
	 padding:15px 0px 0px 15px;
	 border-bottom-left-radius: 10px;
	 }
	a.menu {
	border-top-left-radius:2em; text-align: right; border-top-right-radius:0em;}
	section.effets{width:85%;  padding:0px; margin: 3% 0%;}
	section.effets ul{width:100%; margin-left:12px; padding:6px 6px 6px 6px;}
	section.effets ul img{width:30%; height:30%; margin:1%; padding:6px;}
	/*	video */
	section.video{width:85%;}
	section.video iframe{width:100%; margin: 0px;}
	section.video img{width:100%; height:100%; margin: 5px 0px;}
	/*	video */
	section.gris_fond{width:85%; margin:0px; height:100%;}
	section.gris_fond img{width:85%; height:85%; margin: 5px 0px;}
	section.biographie{float:left; padding:4%; width:85%;}
	section.biographie img{float:left; width:100%; height:100%; padding: 0px;}
	section.biographie div span img{width:30%; height:30%;}
	section.biographie div{float:left; width:50%; margin:0; padding:0;}
	section.biographie div p{ width:100%; margin:0; padding:7%;}
	
	section.gris{width:100%; margin:0px; padding:0px;}
	section.gris p{padding:3px 17px; text-align:center; font-size:0.9em;}
	section.contact div p{height:100%; width:100%; padding:30px 0 0 40px; font-size:1.1em;}
	section.contact{height:100%; width:85%; padding:5px;}
	section.contact img{height:10%; width:10%; margin: 0px; padding:0px;}
	section.accordeon{height:100%; width:30%; margin-bottom:0px; padding:10px; float:right;}
	section.fb img{width:50%; height:50%;}
}
@media only screen and (min-width:361px) and (max-width:640px) {
	main{width:100%;}
	div.conteneur{width:100%;}	
	header img{width:100%;}
	nav.index{width:100%; margin:0px; padding:0px;}
	nav.index div{display:none;}
	nav.index ul{ width:100%; height:50%; margin:0px; font-size:1.3em; padding-left:2%;}
	nav.index ul li a{width:20%; padding:0px;}
	nav.index ul li a.accueil{width:15%;}
	nav.index ul li a.spectacles{ width:25%; padding:0px; text-align:center;}
	section.news{
	background-color: rgba(234,186,186,0.60);
	display:block; 
	width: 100%;
	height:180px;
	float:left;
	margin: 0px;
	margin-bottom:86px;
	padding: 0px;
}
aside#left{
float : left;
width : 100%;
padding-right:0%;
}	
aside#right{
float : right;
width : 15%;


}	

	 section.news div#contenu_news{
	 font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif; 
	 width:100%; 
	 height:180px; 
	 font-size:0.8em;
	 padding: 10px 10px 0 10px; 
	 overflow:auto; 
	 background-color:rgba(255,255,255,1); 
	 line-height:13px;
	 float:left;
	 display:block;
	 }
	section.news div#sylvie{

	 width:100%; 
	 height:27%;
	 font-size:0.7em;
	 color:rgba(255,255,255,1);
	 float:left;
	 top:0px;
	 font-weight:bold;
	 margin:0px;
	 padding:5px 0px 0px 10px;
	 border-bottom-left-radius: 10px;
	 }
	 
	
	section.effets{width:85%; margin:0px; padding:0px;}
	section.effets ul{width:100%; margin-left:12px; padding:6px 6px 6px 6px;}
	section.effets ul img{width:30%; height:30%; margin:0px; padding:6px;}
	/*	video */
	section.video{width:85%; margin:0px;}
	section.video iframe{width:100%; margin: 0px;}
	section.video img{width:100%; height:100%; margin: 5px 0px;}
	/*	video */
	section.gris_fond{width:85%; margin:0px; height:100%;}
	section.gris_fond img{width:85%; height:85%; margin: 5px 0px;}
	section.biographie {
	float:left;
	width:85%;		
	margin:0px;
	padding:0px;
	background-color:rgba(235,235,235,0.80);

}
	section.biographie div p{
	font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	width:100%;
	font-size:0.8em;
	overflow:auto;	
	margin-left:0px;}

	section.biographie div img.bio{width:100%;}
	
	section.biographie div span img{width:30%; height:30%; margin:0px; padding-left:0px;}
	section.gris{width:100%; margin:0px; padding:0px;}
	section.gris p{padding:3px 17px; text-align:center; font-size:0.7em;}
	section.contact div p{height:100%; width:100%; padding:50px 0 0 10px; font-size:1em;}
	section.contact{height:100%; width:85%; padding:10px; margin:0px;}
	section.contact img{height:20%; width:20%; padding:10px 0 0 3px;}
	section.accordeon{height:100%; width:30%; margin-bottom:0px; padding:10px; float:right;}
	section.fb img{width:50%; height:50%;}
}
@media only screen and (min-width:321px) and (max-width:360px) {
	div.conteneur{width:100%;}
	header img{width:100%;}
	header{width:100%; height:100%;}
	nav.index{width:100%; height:5%; margin:0px; padding:0px;}
	nav.index div{display:none;}
	nav.index ul{ width:100%; height:5%; margin:0px; font-size:0.8em; padding-left:25px;}
	nav.index ul li a{width:20%; padding:0px;}
	nav.index ul li a.accueil{width:15%;}
	nav.index ul li a.spectacles{ width:17%; padding:0px; text-align:center;}
	main{width:100%;}
	section.effets{width:85%; margin:0px; padding:0px;}
	section.effets ul{width:100%; margin:0px; padding:0px;}
	section.effets ul img{width:30%; height:30%; margin:0px; padding:3px;}
	/*	video */
	section.video{width:85%; margin:0px;}
	section.video p{
	height : 40px;
	}
	section.video iframe{width:100%; margin:0px;}
	section.video img{width:100%; height:100%; margin:5px 0px;}
	/*	video */
	section.gris_fond{margin-left:0px; width:85%; height:85%;}
	section.gris_fond img{width:100%; height:100%; margin:5px 0;}
section.biographie {
	float:left;
	width:80%;		
	margin:0px;
	padding:0px;
	background-color:rgba(235,235,235,0.80);
}
	section.biographie div p{
	font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	width:100%;
	height:130px;
	font-size:0.8em;
	overflow:auto;	
	margin-left:0px;}

	section.biographie div img.bio{width:100%;}
	
	section.biographie div span img{width:40%; height:40%; margin:0px; padding-left:10px;}
	section.gris{height:100%; width:100%;}
	section.gris p{padding:3px 17px; line-height:10px; text-align:center; font-size:0.6em;}
	section.contact div p{height:80%; width:80%; padding:30px 0 0 10px; line-height:18px; font-size:0.8em;}
	section.contact{margin-left:0px; height:100%; width:80%; padding:10px;}
	section.contact img{height:20%; width:20%;}
	section.fb img{width:50%; height:50%;}
	
section.news{
	background-color: rgba(234,186,186,0.60);
	display:block; 
	width: 100%;
	height:150px;
	float:left;
	margin: 0px;
	margin-bottom:140px;
	padding: 5px 0px;

}
aside#left{
float : left;
width : 100%;
padding-right:0%;


}	
aside#right{
float : right;
width : 15%;


}	
section.news div span{
	 
	 height:10px; 
	 
	 }
section.news div#contenu_news{
	 font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif; 
	 width:100%; 
	 height:180px; 
	 font-size:0.8em;
	 padding: 10px 5px 0 5px; 
	 margin-top: 25px; 
	 overflow:auto; 
	 background-color:rgba(255,255,255,1); 
	 line-height:13px;
	 float:left;
	 display:block;
	 }
	 section.news div#sylvie{

	 width:100%; 
	 height:27%;
	 font-size:0.7em;
	 color:rgba(255,255,255,1);
	 float:left;
	 top:0px;
	 font-weight:bold;
	 margin:0px;
	 padding:5px 0px 0px 10px;
	 border-bottom-left-radius: 10px;
	 }
}
@media only screen and (min-width:240px) and (max-width:320px) {
	div.conteneur{width:100%;}
	header img{width:100%;}
	header{width:100%; height:100%;}
	nav.index{width:100%; height:5%; margin:0px; padding:0px;}
	nav.index div{display:none;}
	nav.index ul{ width:100%; height:5%; margin:0px; font-size:0.8em; padding-left:15px;}
	nav.index ul li a{width:20%; padding:0px;}
	nav.index ul li a.accueil{width:16%;}
	nav.index ul li a.spectacles{ width:19%; padding:0px; text-align:center;}
	main{width:100%;}
	section.effets{width:80%; margin:0px; padding:0px;}
	section.effets ul{margin:1%; padding:0px;}
	section.effets ul img{width:25%; height:25%; margin:0px; padding:3px;}
	
	/*	video */
	section.video{margin-left:0px; width:85%;}
	section.video p{
	height : 40px;
	}
	section.video iframe{font-size:0.3em; width:100%; height:100%; margin:0px;}
	section.video img{width:100%; height:100%; margin:5px 0;}
	/*	video */
	section.gris_fond{margin-left:0px; width:85%; height:85%;}
	section.gris_fond img{width:100%; height:100%; margin:5px 0;}
section.biographie {
	float:left;
	width:80%;		
	margin:0px;
	padding:0px;
	background-color:rgba(235,235,235,0.80);
}
	section.biographie div p{
	font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
	width:100%;
	height:100px;

	font-size:0.8em;
	overflow:auto;	
	margin-left:0px;}
	section.biographie div img.bio{width:100%; margin-top:35px; padding:0px;}
	section.biographie div span img{width:40%; height:40%px; margin:0px; padding-left:10px;}
	section.gris{height:100%; width:100%;}
	section.gris p{padding:1px 17px; line-height:10px; text-align:center; font-size:0.8em;}
	section.contact div p{height:80%; width:80%; padding:30px 0 0 10px; line-height:18px; font-size:0.8em;}
	section.contact img{height:20%; width:20%;}
	section.contact{margin-left:0px; height:100%; width:80%; padding:10px;}
	section.fb img{width:65%; height:65%;}
	section.news{
	background-color: rgba(234,186,186,0.60);
	display:block; 
	width: 100%;
	height:180px;
	float:left;
	margin: 0px 0px 40px 0px;

}

section.news div#contenu_news{
	 font-family:Trebuchet MS, Arial, Helvetica, Verdana, sans-serif; 
	 width:100%;
	 height:100px; 
	 font-size:0.8em;
	 padding: 10px 5px 0 15px; 
	 margin-top: 25px; 
	 overflow:auto; 
	 background-color:rgba(255,255,255,0.82); 
	 line-height:13px;
	 float:left;
	 display:block;
	 }
	 aside#left{
float : left;
width : 100%;
padding-right:0%;


}	
aside#right{
float : right;
width : 15%;


}	
	 section.news div#sylvie{
	 width:100%; 
	 height:40px; 
	 font-size:0.7em;
	 color:rgba(255,255,255,0.82);
	 padding: 10px 5px 0 10px; 
	 line-height:13px;
	 float:left;
	 display:block;
	 margin: 0px;
	 font-weight:bold;
	 }
}