/*****************************
Plan de la feuille de style :

	1. 	Caractéristiques générales
			- structure
			- titres
			- liens hypertextes
	2. 	ARRIERE-PLANS BODY ID="$"
	3.	Pages
			- page d'accueil
	4. Media queries

font-family: 'Pinyon Script', cursive;
font-family: 'Parisienne', cursive;
font-family: 'Rouge Script', cursive;

******************************/

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

 	body{
		font-size: 18px;
		/*IMAGE DE FOND*/
		margin: 0;
		padding: 0;

		font-family: 'Open Sans', sans-serif;
		color: #fff;
	}
	:hover{
		transition: all ease 0.5s;
	}
	a{
		color: #ff1e00;
		font-weight: 700;
		text-decoration: none;
		z-index: 900;
	}
	a:hover{
		color: #FFF;
		text-decoration: none!important;
	}
	p a{
		color: #ff1e00;
	}
	p a:hover{
		color: #ff1e00;
		border-bottom: 1px dotted #303030;
	}

	header a, a.button{
		font-weight: normal;
	}
	#wraper {
	    width: 100%;
	    box-sizing: border-box;
	    padding: 0;
	}
	div.central{
		width: 100%;
		height: 100%;
		margin: 0;
	    box-sizing: border-box;
	}
	.page_reservation div.central:nth-child(2){
	    padding: 40px 100px 1px;
	}
	.page_reservation div.central:nth-child(3){
	    padding: 1px 100px 40px;
	}
	.noir{
	    background-color: rgba(0,0,0,0.4);
	}
	.blanc{
	    background-color: rgba(256,256,256,0.6);
	    color: #000;
	}
	.orange{
	    background-color: rgba(255, 83, 31, 0.8);
	    color: #000;
	}
	blockquote {
	    margin-right: 5px;
	    margin-bottom: 40px;
	    width: 51%;
	    float: right;
	}
	blockquote p {
	    font-size: 13px!important;
	    font-style: italic;
	}
	iframe#video{
		width: 100%;
		height: 429px;
	}
	hr{
		height: 1px;
		background-color: #ff1e00;
		margin: 0;
		padding: 0;
		border: 0 solid #000;
	}
	p{
		text-align: justify;
		font-size: 14px;
	}
	ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
		font-size: 14px;
	}
	footer ul{
    	margin: 0;
 	}
	li{
		margin: 0;
		padding: 0;
	}
	h1, h2, h3, h4, h5{
		margin: 0;
		color: #ff1e00;
		text-transform: uppercase;
		letter-spacing: 4px;
	}
	#deroule h3{
		border-bottom: 1px solid #ff1e00;
	}
	h1{
		text-align: center;
		padding-top: 10px;
	}
	h1 a, h1 a:hover{
		color: #ff1e00;
	}

	h1 a img {
	    max-width: 585px;
	}
	h2{
		font-size: 16px;
		padding: 10px 0 20px 0;
	}
	.menu_diner h4:last-child{
		border-bottom: 0;
	}
	h3, h4, h5{
		font-size: 12px;
		border-bottom: 1px solid #fff;
		padding: 15px 0;
		margin-bottom: 20px;
	}
	h2{
		font-family: 'Times New Roman',serif;
		font-weight: 400;
	}
	body:not(#balviennois) h2{
		font-size: 27px;
		margin: 22px 0;
	    padding: 0;		
	}
	body:not(#balviennois) h2:first-letter{
		font-family: 'ChopinScript', cursive;
		text-transform: lowercase;
		font-size: 80px;
		line-height: 0;
	}
	ul.reservations_bal.choix_abonnement h4 {
	    margin: 0;
	    border: none;
	    color: #000;
	    letter-spacing: 1px;
	    font-family: 'Times New Roman', serif;
	    font-size: 21px;
	    padding: 7px 0;
	    font-weight: 500;
	}
	ul.reservations_bal.choix_abonnement h4 {
	    color: #fff;
	    font-weight: 400;
        font-size: 17px;
	    letter-spacing: 3px;
	    font-family: 'Open Sans', sans-serif;
	}
	h5{
		padding: 0 0 15 0;
		margin: 10px 0;
	}

	iframe {
	    width: 100%;
	    height: 506px;
	}
	section img{
		width: 100%;
	}

	.clear{
		clear: both;
	}
	section{
	    width: 100%;
		padding: 0;
		margin: 0 auto;
	}
  	h2 span{
		background-color: #ff1e00;
		color: #FFF;
		display: inline-block;
		width: 55px;
		height: 55px;
		padding: 15px;
		border-radius: 45px;
		text-align: center;
		font-size: 29px;
		line-height: 40px;
		font-family: Georgia, serif;
		font-style: italic;
		font-weight: normal;
	}
	span{
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #ff1e00;
	}
	.page_reservation li span{
		font-size: 15px;
	}
	.choix_abonnement h4+span {
	    font-size: 16px;
	    font-weight: 400;
	    text-transform: initial;
	    letter-spacing: 0;
	    line-height: 25px;
	    color: #000;
	}
	input:focus, a:focus, button:focus{
		outline: none;
	}

	{
	    position: relative;
	    margin-top: 50px;
	}
	section #lettrine {				 
	    font-family: "ChopinScript", Georgia, serif;
	    font-size: 200px;
	    color: rgba(255,255,255,0.2);
	    text-transform: uppercase;
	    position: absolute;
		top: 242px;
	    left: 26px;
  	    z-index: 1;
	}
	#reservations #lettrine, #reservations-diner #lettrine, #reservations-bal #lettrine,#reservations-spectacle #lettrine{
		font-size: 120px;
		top: -20px;
		left: 100px;
		z-index: 800;
	}
	#reservations-diner #lettrine, #reservations-bal #lettrine,#reservations-spectacle #lettrine{
		left: 150px;
	}

	.places_restantes{
		font-size: 18px;
		font-style: italic;
		color: #FFF;
	}
	quote{
		display: block;
		margin-left: 270px;
		margin-bottom: 30px;
	}
	quote p{
		width: 480px;
		font-weight: 700;
		font-size: 11.5px;
		font-family: Georgia, serif;
		font-style: italic;
		line-height: 18px;
	}
	quote i[class="fa fa-quote-left"]{
		font-size: 20px;
		margin-left: -25px;
	}
	quote i[class="fa fa-quote-right"]{
		font-size: 20px;
		line-height: 18px;
		margin-right: -22px;
		float: right;
	}



/*********************************************
Zones de textes sur fond noir / orange / blanc
*********************************************/

	/* Caractéristiques des zones sur fond noir */

		.noir a{
			border-bottom: 1px dotted #ff1e00;
		}
		#deroule .noir a, header a{
			border: none !important;
		}
		.noir a:hover{
			color: #fff !important;
			border-bottom: 1px dotted #fff;
		}
		.noir h3 {
		    border-bottom: 1px solid #ff1e00 !important;
		}
		.noir .col a:hover{
			color: #ff1e00 !important;
		}

	/* Caractéristiques des zones sur fond orange */

		.orange h3 {
		    color: #fff !important;
		    bottom: 1px solid #fff;
			margin-bottom: 35px;
		}
		.orange span, .blanc span {
		    color: #000;
		}
		.orange a{
		    color: #fff !important;
		    border-bottom: 1px dotted #fff !important;
		}
		.orange a:hover {
		    color: #000 !important;
		    border-bottom: 1px dotted #000 !important;
		}

	/* Caractéristiques des zones sur fond blanc */

		.blanc h3 {
		    color: #000 !important;
		    border-bottom: 1px solid #000 !important;
		}
		.blanc a {
		    border-bottom: 1px dotted #ff1e00;
		}
		.blanc a:hover {
		    color: #000;
		    border-bottom: 1px dotted #000;
		}



/*****************************
ARRIERE-PLANS BODY ID="$"
******************************/


	#cgv, #legal, #organisateurs{
 		background: url('../img/defaut.jpg') no-repeat center fixed;
  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  		background-size: cover; /* version standardisée */
	}

	#balviennois{
 		background: url('../img/balviennois.jpg') no-repeat center fixed;
  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  		background-size: cover; /* version standardisée */
	}
	#partenaires{
 		background: url('../img/sponsors.jpg') no-repeat center fixed;
  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  		background-size: cover; /* version standardisée */
	}

	#tenue{
 		background: url('../img/tenue.jpg') no-repeat center fixed;
  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  		background-size: cover; /* version standardisée */
	}

	#preparer{
 		background: url('../img/preparatifs.jpg') no-repeat center fixed;
  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  		background-size: cover; /* version standardisée */
	}
	#presse{
 		background: url('../img/presse.jpg') no-repeat center fixed;
  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  		background-size: cover; /* version standardisée */
	}



	/* Pages sous l'onglet programme */

		#salle{
	 		background: url('../img/intercontinental.jpg') no-repeat center fixed;
	  		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	  		background-size: cover; /* version standardisée */
		}

		#deroule{
	 		background: url('../img/programme.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}

		#comite{
	 		background: url('../img/comite.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#cause{
	 		background: url('../img/banlieues.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#diner{
	 		background: url('../img/diner.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#debutants{
	 		background: url('../img/debutants_2016.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#robes{
			background: url('../img/robes.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#ballet{
	 		background: url('../img/ballet.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#opera{
	 		background: url('../img/opera.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#orchestre{
	 		background: url('../img/orchestre.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#salle-valse{
	 		background: url('../img/salle-valse.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}
		#salle-rock{
	 		background: url('../img/salle-rock.jpg') no-repeat center fixed;
  			-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  			background-size: cover; /* version standardisée */
		}


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

	header{
		position: relative;
		padding: 40px 0 10px 0;
	}

	#balviennois #date{
		display: none;
	}
	#facebook{
		position: absolute;
		top: 55px;
		right: 0;
	    padding-top: 20px;
		border-top: 3px solid #fff;
	}

	#social-media{
		position: absolute;
		top: 55px;
		width: 67px;
		right: 0;
	    padding-top: 20px;
		border-top: 3px solid #fff;
	}
	#social-media img {
	    float: right;
	    width: 25px;
	    margin: 4px;
	    filter: invert(1);
	}

	#langues{
		position: absolute;
		top: 55px;
		left: 0;
		text-transform: lowercase;
		letter-spacing: 1px;
		line-height: 20px;
		border-top: 3px solid #fff;
		padding-top: 15px;
	}
	#langues li{
		display: inherit;
	}
	#langues li a:hover{
		text-decoration: none;
		color: #FFF;
	}
	.active{
		text-decoration: none;
		color: #FFF;
	}
	p.active{
		padding: 10px;
		margin-bottom: 20px;
		background: #000;
		border: 1px solid #fff;
		color: #ff1e00;
		position: relative;
		z-index: 100;
		text-transform: uppercase;
		font-size: 12px;
		text-align: center;
		font-weight: bold;
	}
	#langues img{
		display: none;
		width: 20px;
		border-radius: 0;
	}


/********************************
	MENU
********************************/

		nav#menu{
			width: 100%;
			position: fixed;
			z-index: 100;
		}
		/*
		#reservations{
		    background: linear-gradient(to bottom, #232221, #000000);
		}
		*/

		nav#menu ul {
		    padding: 0;
		    background: linear-gradient(to bottom, rgba(255,30,0,0.9), rgba(255,30,0,0.8));
		    text-align: center;
		    border-bottom: 5px solid #000;
		}
		nav#menu li{
			position: relative;
			display: inline-block;
			/* L'inline-block provoque un comportement de texte avec des espaces  les mots que sont devenus les blocs. Veiller à définir dans le html l'espace blanc ainsi créé (qui ne peut plus être géré comme un ensemble de marges intérieures et extérieures  */
			border-right: 0px dotted #FFF;
			position: relative;
			z-index: 900;
		}
		nav#menu a {
		    display: block;
		    text-transform: uppercase;
		    font-size: 13px;
		    color: #fff;
		    letter-spacing: 5px;
		    font-weight: 500;
		    text-align: center;
		    padding: 17px 29px;
		}
		nav#menu a:hover {
		    text-decoration: none;
		    background: linear-gradient(to bottom, #ff531f, #ff1e00);
		    background: #000;
		    color: #ff1c00;
		}
		/*nav#menu a#reservations{
			color: #fff;
		}
		nav#menu a#reservations:hover{
	        color: #ff1e00;
		}*/


/******************************
PAGE PROGRAMME
*******************************/


	.tri-col{
		width: 100%;
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
	.tri-col .col {
	    float: left;
	    width: 30%;
	    min-width: 340px;
	    height: 200px;
	    position: relative;
	    margin-bottom: 31px;
	}
	.col a {
		display: inline-block;
	    width: 100%;
		height: 45px;
	    line-height: 45px;
	    position: absolute;
	    top: 0;
	    color: #000;
	    background-color: rgba(256, 256, 256, 0.8);
	    left: 0;
	    text-align: center;
	    font-size: 13px;
	    letter-spacing: 3px;
	    font-weight: 500;
	    text-transform: uppercase;
	}
	.col a:hover{
	    height: 176px;
	    background-color: rgba(0, 0, 0, 0.7);
	    color: #ff1e00;
	    font-size: 15px;
	    line-height: 180px;
	}
	.col img{
		width: 100%;
	}
	#tenue .tri-col .col{
	    width: 48%;
	    min-height: 439px !important;
	}
	#tenue .col img {
	    width: auto;
		margin: 20px 32%;
	}


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

	footer {
	    width: 100%;
	    text-align: center;
	    margin: 0;
	    padding: 20px 50px;
	    background-color: rgba(0,0,0,0.6);
	    box-sizing: border-box;
	    /* border-top: 1px solid #fff; */
	}
	footer aside{
		padding: 5px;
		display: none;
	}
	footer nav li{
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 3px;
		display: inline-block;
	}
	footer nav li a:not(last-child){
		display: inline-block;
		border-right: 1px dotted #fff;
		padding: 5px 10px;
		margin: 7px 0;
	}

/*****************************
UL et LI corps de texte
******************************/

	ul.secondniveau{
		margin: 0 0 0 110px;
		padding: 10px 0;
		font-size: 14px;
	}
	ul.secondniveau>li::before{
		content: "– ";
		font-style: 10px;
		margin-right: 10px;
	}
	strong{
		text-transform: uppercase;
		letter-spacing: 2px;
		display: inline-block;
		width: 80px;
		margin-right: 10px;
	}


/*****************************
BOUTONS
******************************/

	button{
		float: right;
		padding: 7px 10px;
		background-color: rgba(255, 30, 0, 1);
		border: 1px solid #fff;
		color: #FFF;
		font-size: 14px;
	}
	button:hover{
		background-color: #ff1e00;
		color: #FFF;
	}

	/* Boutons sur fond noir */

		.connexion button {
		    float: left;
		    padding: 16px 22px;
		    background-color: rgba(255, 30, 0, 1);
		  /*  border: 1px solid #ff1e00; */
		  	border: none;
		    color: #FFF;
		    font-size: 13px;
		    text-transform: uppercase;
		    letter-spacing: 3px;
		}
		.connexion button:hover {
			box-shadow: 0 0 2px 2px #fff;
		}

	/* Pseudo-boutons */
	.button, .left-button{
		padding: 7px 10px;
		background-color: rgba(255, 30, 0, 1);
		border: 1px solid #fff;
		color: #FFF;
		font-weight: 400;
	}
	.button, .left-button, .button:hover, .left-button:hover{
		text-decoration: none;
		display: block;
		margin-bottom: 20px;
	}
	.button:hover, .left-button:hover{
		background-color: #ff1e00;
		color: #FFF;
	}
	.button{
		float: right;
	}
	.left-button{
		float: left;
	}
	a.button.centre {
	    float: none;
	    width: 21%;
	    color: #fff;
	    border: none;
	    padding: 17px 15px;
	    text-align: center;
	    margin: 26px auto;
	    text-transform: uppercase;
	    letter-spacing: 5px;
	    font-size: 13px;
	}
	a.button.centre:hover {
		text-decoration: none;
		color: #fff;
	    box-shadow: 0 0 2px 2px #fff;
	}
	/* Boutons spécifiques à la commande */
	form.billetterie button, form[action="billetterie/ajout-panier.php"] button, form[action="http://www.baldesparisiennes.com/reglement/"] button{
		float: right;
	}
	form[action="ajout-client.php"] button{
		width: 180px;
	    margin-left: 185px;
	}
	#formulaire_contact button {
	    width: 213px;
	    margin-left: 185px;
	}
	#formulaire_contact{
		padding-bottom: 0;
	}
	#formulaire_contact p{
		padding-bottom: 5px;
	}

	/* Formulaire de contact */

	form[action="traitement-contact.php"] p{
		padding-bottom: 15px;
		margin: 0;
	}
	form[action="traitement-contact.php"] textarea, form[action="traitement-contact.php"] input{
		width: 200px;
	}
	form[action="traitement-contact.php"] textarea{
		height: 150px;
		padding: 7px;
	}
	form[action="traitement-contact.php"] button{
		margin-left: 187px;
	}

/* Page d'accueil */

	.patronage ul li {
	    display: inline-block;
	    width: 33%;
	    text-align: center;
	    letter-spacing: 3px;
	    font-size: 12px;
	    padding: 30px 0;
	}
	.patronage p{
		text-align: center;
		font-size: 12px;
	}
	.patronage{
		padding: 20px 0;
		margin: 10px 0 5px 0;
		text-transform: uppercase;
	}
	.patronage b{
		letter-spacing: 1px;
		font-size: 15px;
	}
	.patronage p:first-child, p.cursive{
	    font-family: "ChopinScript", Georgia, serif;
	    text-transform: normal;
	    text-transform: lowercase;
	    font-weight: 400;
	    font-size: 52px;
	    line-height: 20px;
	    margin: 10px auto;
	    color: #ff1e00;
	    text-align: center;
	}
	p.cursive{
		margin: 40px auto !important;
		text-transform: none;
	}
	p.cursive:first-letter{
		text-transform: uppercase;
	}
	.patronage ul li img {
	    max-width: auto;
	    display: inline;
	    width: 40%;
	}
	.patronage .medaillon {
	    border-radius: 100%;
	    float: none;
	    margin: 0 0 20px 0;
	}

	#prochain_bal {
	    text-align: center;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    padding: 30px 30px 20px;
	    border: 2px solid #fff;
	}
	#prochain_bal p:first-child {
	    letter-spacing: 0;
	    font-family: "ChopinScript", Georgia, serif;
	    text-transform: none;
	    font-weight: 400;
	    font-size: 39px;
	    line-height: 20px;
	    margin: 10px auto;
	    color: #ff1e00;
	}
	#prochain_bal p{
	    text-align: center;
	}
	#prochain_bal li {
	    line-height: 55px;
	}
	#prochain_bal ul li:nth-child(2) {
	    font-size: 49px;
	    letter-spacing: 9px;
	}
	#prochain_bal ul li:nth-child(3) {
	    font-size: 12px;
	    letter-spacing: 8px;
	}
	#prochain_bal a.button {
	    float: none;
	    display: inline;
	    border: none;
	    padding: 10px 20px;
	}
	#prochain_bal a.button:hover {
	    box-shadow: 0 0 2px 2px #fff;
	}

	span.prix{
	    font-family: Georgia, serif;
	}

/*****************************
IMAGES
******************************/

	.medaillon{
		width: 150px;
		border-radius: 100%;
		float: left;
		margin: 0 30px 15px 0;
	}
	.medaillon-p{
		width: 70px;
		height: 70px;
		border-radius: 35px;
		float: left;
		margin: auto;
	}
	.medaillon-m{
		width: 150px;
		height: 150px;
		border-radius: 75px;
		float: left;
		margin-right: 20px;
	}
	img.ombre, .medaillon-m{
		box-shadow: 2px 2px 20px 2px #000;
	}
	img.medaillon-p + h5{
		margin-top: -10px;
		margin-left: 85px;
		border-bottom: 1px dotted #000;
	}
	ul li img.ombre{
		width: inherit;
		float: left;
		margin-right: 5px;
	}
	.medaillon-g{
		width: 320px;
		border-radius: 160px;
		float: left;
		margin: 0 55px 50px 0;
	}
	#hypertexte_image{
		display: block;
		margin: 0 200px;
	}

/*****************************
INPUT
******************************/

	input, textarea, select {
	    width: 65%!important;
	    border: 1px solid #C0C0C0;
	    padding: 13px;
	    color: #fff;
	    font-size: 16px;
	    border-radius: 0px;
	    background-color: rgba(255,255,255,0.3);
	    z-index: 9;
	    font-family: 'Open Sans', Arial, sans-serif;
	    outline: 0;
	}
	select option {
	    background-color: #000;
	}
	select {
	    width: 68.6%!important;
	}
	input:focus, textarea:focus {
	    border: 1px solid #FFF;
	    box-shadow: 0 0 2px 2px #C0C0C0;
	}

/*****************************
AUTHENTIFICATION
******************************/

	.connexion {
	    background-color: rgba(0, 0, 0, 0.4);
	    border: 1px solid #fff;
	    padding: 48px;
	    margin: 10px 0;
	    color: #FFF;
	    position: relative;
	    z-index: 50;
	}
	p.active + .connexion{
		display: none;
	}


	ul.connexion li{
		margin-bottom: 10px;
	}
	ul.connexion h3{
		padding-top: 0;
	}

	.connexion a, .connexion a:hover{
		color: #ff1e00;
	}
	.connexion a:hover{
		text-decoration: underline;
	}
	.connexion p{
		margin: 0;
		padding: 5px 0;
	}
	.connexion 	h3{
		font-size: 12px;
		color: #ff1e00;
		border-bottom: 1px solid #ff1e00;
		padding: 10px 0;
	}
	.connexion  article>h2:first-letter,
	.connexion 	article>h2+h2:first-letter{
		color: #fff !important;
	}

/*****************************
FORMULAIRES
******************************/

	fieldset{
		border: 0 solid #000;
		padding: 0;
		margin: 0;
	}
	form p{
		padding-bottom: 25px;
	}
	label{
		float: left;
	}
	label {
	    width: 180px;
	    margin-right: 7px;
	    text-align: left;
	    text-transform: uppercase;
	    font-size: 12px;
	    letter-spacing: 2px;
	}
	input[type="radio"]{
	    margin-right: 10px;
	}
	input[type="radio"]+label{
	    width: inherit;
	    margin-right: 10px;
	    text-align: left;
	}

/*************************
RESERVATIONS
**************************/

	ul#choix-reservations li{
		width: 100%;
		height: 175px;
		overflow: hidden;
		margin-bottom: 15px;
		border: 1px solid #ff1e00;
	}
	ul#choix-reservations li:nth-child(1){
		background: url('../img/accueil_billetterie/reservation-diner.jpg');
	}
	ul#choix-reservations li:nth-child(2){
		background: url('../img/accueil_billetterie/reservation-spectacle.jpg');
	}
	ul#choix-reservations li:nth-child(3){
		background: url('../img/accueil_billetterie/reservation-bal.jpg');
	}

	ul#choix-reservations li a{
		display: block;
		text-transform: uppercase;
		letter-spacing: 7px;
		font-size: 14px;
		width: 100%;
		line-height: 20px;
		padding: 15px;
		box-sizing: border-box;
		text-align: left;
		background-color: rgba(256,256,256, 0.8);
		color: #ff1e00;
		height: 50px;
	}
	ul#choix-reservations li a:hover{
		background-color: rgba(255,83,31, 0.7);
		color: #fff;
		height: 175px;
	}
	ul.reservations_bal.choix_abonnement li a {
	    font-weight: 500;
	    color: #000;
	    border: none;
	}
	ul.reservations_bal.choix_abonnement li a:hover {
	    color: #000 !important;
	    border: none;
	}


/*************************
COMMANDE

	table.commande, table.list-invites{
	    width: 100%;
	    border-collapse: collapse;
	    margin: 0 0 30px 0;
	    font-size: 14px;
	}
	table.commande p{
		font-size: 11px;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	table.commande input{
		width: 70px;
	}
	table.commande thead, table.list-invites thead{
		font-weight: bold;
		font-size: 14px;
		text-align: left;
	    border-bottom: 3px solid #000;
	    text-transform: uppercase;
	}
	table.commande th, table.list-invites th{
		padding: 20px 0 10px 0;
	}
	table.commande td, table.list-invites td{
		padding: 10px 0;
	}
	table.commande td:nth-child(1){
		width: 460px;
		padding-right: 20px;
	}
	tr.table_space td{
		padding-right: 30px;
		vertical-align: top;
	}
	tr.table_space td{
		min-width: 70px;
	}
	table.commande tfoot td{
		padding-top: 30px;
	}
	table.commande tr#total{
		font-weight: 700;
	}
	table.commande ul{
		font-size: 14px;
	}

*************************/

	/* Variante tableau accueil réservations */


	div.billet{
		display: block;
		margin-bottom: 20px;
	}

	table.billet{
		background-color: rgba(255,255,255, 0);
		padding: 0 10px 10px 10px;
		border: 1px solid #fff;
		display: none;
	}
	table.billet p{
		padding: 0;
	}
	table.billet, table.billet ul{
		font-size: 13px;
		text-align: left;
	}
	table.billet ul, table.billet li{
		padding: 0;
		margin: 0;
	}
	table.billet td{
		vertical-align: top;
		padding: 10px 15px 0 0;
		margin: 0;
	}
	table.billet tbody tr td:first-child{
		text-transform: uppercase;
	}
	table.billet tfoot td{
		padding: 15px 0 0 0;
	}
	table.billet a.button{
		margin-bottom: 0;
	}

	table.billet + div{
		margin-top: 10px;
	}
	.billet img{
		width: 100%;
		float: left;
		margin: 10px 0;
	}


	.entree{
		background-color: #ff1e00;
		color: #FFF;
		margin: 10px 0 0 0 ;
		padding: 10px;
		border: 1px solid #fff;
	}
	wraper ul.entree:last-child{
		background-color: #757575;
	}
	.entree li{
		display: inline-block;
		margin-right: 10px;
	}
	.entree li p{
		margin: 0;
		padding-bottom: 7px;
		text-align: center;
		font-size: 10px;
		text-transform: uppercase;
	}s
	#etapes-commande{
		font-weight: bold;
		font-size: 15px;
		border: 0 solid #FFF;
	}
	#etapes-commande thead{
		font-size: 40px;
		border-bottom: 0px solid #4D4D4D;
	}
	#etapes-commande td{
		text-align: center;
	}




#alerte{
	background-color: #FFF;
	padding: 10px 20px;
	font-weight: bold;
	text-align: center;
}
#alerte p:last-child{
	text-align: right;
	font-style: italic;
}

/* Menu */

nav#menu img, nav#menu>a, p#date_mobile, nav#menu #nav-toggle, a#bouton_reservez{
	display: none;
}

/******************************************

		ORDINATEURS

******************************************/

@media all and (max-width: 1100px){

    nav#menu a {
        font-size: 10px;
        letter-spacing: 1.8px;
        padding: 14px 16px;
    }
    div.central {
        padding: 40px !important;
    }
    div.connexion {
        padding: 20px 96px !important;
    }
    #lettrine {
        left: 15px !important;
    }

}


@media all and (min-width: 1100px){

	.quadri-col img {
	    margin-left: 10px;
	}
}

/******************************************

		TRES GRANDS ECRANS

******************************************/


@media all and (min-width: 1440px){
	.central.noir>div.connexion {
        padding: 48px 10% !important; 
	}
	#reservations #lettrine, #reservations-diner #lettrine, #reservations-bal #lettrine, #reservations-spectacle #lettrine {
	    font-size: 286px;
	    top: -131px;
	    left: 133px;
	    z-index: 400;
	}
}
@media all and (min-width: 1600px){
	.central.noir>div.connexion {
	   /* padding: 48px 24.3% !important; */
	   padding: 48px 13% !important; 
	}
}
@media all and (min-width: 1920px){
	.central.noir>div.connexion {
	    padding: 48px 18% !important; 
	}
	#reservations #lettrine, #reservations-diner #lettrine, #reservations-bal #lettrine, #reservations-spectacle #lettrine {
	    left: 227px;
	}
}