/*****************************
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-face {
    font-family: "ChopinScript";
	src: url('../fonts/ChopinScript.eot');
    src: url('../fonts/ChopinScript.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ChopinScript.woff') format('woff'),
         url('../fonts/ChopinScript.ttf') format('truetype'),
         url('../fonts/ChopinScript.svg#cantarellbold') format('svg');
    font-weight: normal;
    font-style: normal;
	}

	body{
		font-size: 16px;
		margin: 0;
		padding: 0;
		font-family: 'Open Sans', sans-serif;
		color: #fff;
	}

	:hover{
		transition: all ease 0.5s;
	}

/* LIENS HYPERTEXTE */

	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;
	}
	a.col{
		color: #000;
	    border: none !important;
	    font-weight: 400;
	    letter-spacing: 2px;
	    text-transform: uppercase;
	    font-size: 15px;
	    line-height: 25px;
	    text-align: right;
	}


/* TITRES */

	h1 {
	    padding-top: 10px;
		margin: 0;
	    text-align: center;
	}
	h1 a img {
	    max-width: 585px;
	}
	h2{
		font-family: 'Times New Roman',serif;
	}
	body:not(#balviennois) h2{
		font-size: 27px;		
	}
	body:not(#balviennois) h2:first-letter{
		font-family: 'ChopinScript', cursive;
		text-transform: lowercase;
		font-size: 80px;
		line-height: 0;
	}
	h2, h3{
		text-transform: uppercase;
	    letter-spacing: 4px;
	    font-weight: 400;
	    color: #ff1e00;
	}
	.orange h2, .orange h3{
		color: #fff;
	}
	/*
	body#programme h3{
		border-top: 1px solid #ff1e00;
	    padding-top: 45px;
	    margin-top: 20px;
	}
	*/


/* SUITE */

	header a, a.button{
		font-weight: normal;
	}
	#wraper {
	    width: 100%;
	    box-sizing: border-box;
	    padding: 0;
	}
	div.central{
		width: 100%;
		height: 100%;
		margin: 0;
	    padding: 40px 100px;
	    box-sizing: border-box;
	}
	.noir{
	    background-color: rgba(0,0,0,0.6);
	}
	.blanc{
	    background-color: rgba(256,256,256,0.95);
	    color: #000;
	}
	#programme .blanc{
		border-top: 16px solid #ff1e00;
		border-bottom: 16px solid #ff1e00;
	}
	.orange{
	    background-color: rgba(255, 30, 0, 0.91);
	    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;
	}
	.blanc hr, .noir hr, .orange hr{
		margin: 17px 0 35px;
	}
	p{
		text-align: justify;
		font-size: 16px;
	}
	ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
		font-size: 14px;
	}
	footer ul{
    	margin: 0;
 	}
	li{
		margin: 0;
		padding: 0;
	}
	iframe {
	    width: 100%;
	    height: 506px;
	}
	section img{
		width: 100%;
	}

	.clear{
		clear: both;
	}
	section{
	    width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	span{
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #ff1e00;
	}
	input:focus, a:focus, button:focus{
		outline: none;
	}

	{
	    position: relative;
	    margin-top: 50px;
	}

	.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;
		}
		div.patronage a, #deroule .noir a, header a{
			border: none !important;
		}
		.noir a:hover{
			color: #fff !important;
			border-bottom: 1px dotted #fff;
		}
		.noir .col a:hover{
			color: #ff1e00 !important;
		}

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

		.orange span, .blanc span {
		    color: #000;
		}
		.orange a{
		    color: #fff !important;
		    border-bottom: 1px dotted #fff;
		}
		.orange a:hover {
		    color: #000 !important;
		    border-bottom: 1px dotted #000;
		}
		.orange a.col, .orange a.col:hover{
			border: none;
		}

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

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



/*****************************
ARRIERE-PLANS
******************************/

	body::before {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		content: ' ';
		background-position: center;
		background-size: cover;
		height: 100vh;
		width: 100vw;
		z-index: -10;
	}
     body::before {
      background-image: url('../img/fonds/accueil.jpg');
    }
	#balviennois::before, 
	#legal::before,
	#cgv::before,
	#test_accueil::before {
	    background-position: top;
	    background-size: cover;
	}
	#partenaires::before {
 		background: url('../img/fonds/sponsors.jpg');
    background-position: center;
    background-size: cover;
	}
	#artistes::before {
 		background: url('../img/fonds/artistes.jpg');
    background-position: center;
    background-size: cover;
	}
	#tenue::before {
 		background: url('../img/fonds/tenue.jpg');
    background-position: center;
    background-size: cover;
	}
	#coursdanse::before {
 		background: url('../img/fonds/preparatifs.jpg');
    background-position: center;
    background-size: cover;
	}
	#preparer::before {
      background-image: url('../img/fonds/debutants_2018.jpg');
    background-position: center;
    background-size: cover;
	}

	#presse::before {
 		background: url('../img/fonds/presse.jpg');
    background-position: center;
    background-size: cover;
	}
	#contact::before {
 		background: url('../img/fonds/contact.jpg');
    background-position: center;
    background-size: cover;
	}


	/* Pages sous l'onglet programme */

		#salle::before {
	 		background-image: url('../img/fonds/intercontinental.jpg');
		}

		#programme::before {
	 		background-image: url('../img/fonds/programme.jpg');
		}

		#comite::before {
	 		background-image: url('../img/fonds/comite.jpg');
		}
		#cause::before {
	 		background-image: url('../img/fonds/banlieues.jpg');
		}
		#diner::before {
	 		background-image: url('../img/fonds/diner.jpg');
		}
		#debutants::before {
	 		background-image: url('../img/fonds/debutants_2016.jpg');
		}
		#robes::before {
			background-image: url('../img/fonds/robes.jpg');
		}
		#ballet::before {
	 		background-image: url('../img/fonds/ballet.jpg');
		}
		#opera::before {
	 		background-image: url('../img/fonds/opera.jpg');
		}
		#orchestre::before {
	 		background-image: url('../img/fonds/orchestre.jpg');
		}
		#salle-valse::before {
	 		background-image: url('../img/fonds/salle-valse.jpg');
		}
		#salle-rock::before {
	 		background-image: url('../img/fonds/salle-rock.jpg');
		}


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

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

	#balviennois #date{
		display: block;
	}

	#date {
	    text-transform: uppercase;
	    letter-spacing: 7px;
	    text-align: center;
	    font-size: 10px;
	    font-weight: 900;
	    color: #ff1e00;
	}
	#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: #000;
		    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: 100%;
	    position: relative;
	    margin-bottom: 31px;
	}
	.col a {
		display: inline-block;
	    width: 100%;
		height: 70%;
	    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;
	    border-bottom: none;
	    line-height: 180px;
	    /* Suite */
	    background-color: rgba(0, 0, 0, 0.7);
	    color: #fff;
	    font-size: 15px;
	    border-bottom: none;
	}
	.col a:hover{
	    background-color: rgba(0, 0, 0, 0.7);
	    color: #ff1e00;
	    font-size: 15px;
	    border-bottom: none;
	}
	.col img{
		width: 100%;
	}

/* Page Dress Code */

	#tenue .tri-col .col{
	    width: 48%;
	    min-height: 450px !important;
	}
	#tenue .col img {
	    width: auto;
		margin: 20px 35%;
	}
	#tenue .orange img{
		width: 200px;
		border-radius: 100%;
		float: left;
		margin-right: 30px;
	}

/* Page Comité d'honneur */

	.tri-col.comite_honneur p, 
	.tri-col.comite_honneur .col{
	    text-align: center !important;
	}
	.tri-col.comite_honneur .col img{
	    display: block;
	    width: 70%;
	    margin-left: auto;
	    margin-right: auto;
	    float: none;
	}
	.tri-col.comite_honneur .col{
		height: auto !important;
		min-height: 330px;
	}
	.tri-col.comite_honneur .col img{
		-webkit-filter: grayscale(100%); 
		filter: grayscale(100%); 
	}



/*****************************
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: linear-gradient(to bottom, #ff531f, #ff1e00);
		border: 1px solid #fff;
		color: #FFF;
		font-size: 14px;
	}
	button:hover{
		background-color: #ff1e00;
		color: #FFF;
	}

	/* Boutons sur fond noir */

	.page_vitrine .connexion button {
		    float: right;
		    padding: 16px 22px;
		    background: linear-gradient(to bottom, #ff531f, #ff1e00);
		    border: 1px solid #ff1e00;
		    color: #FFF;
		    font-size: 13px;
		    text-transform: uppercase;
		    letter-spacing: 3px;
		}
	.page_vitrine .connexion button:hover {
			box-shadow: 0 0 2px 2px #fff;
		}
	body#debutants .connexion a.button {
	    float: none;
	    margin: 0 auto;
	}

	/* Pseudo-boutons */
	.button, .left-button{
		padding: 7px 10px;
		background: linear-gradient(to bottom, #ff531f, #ff1e00);
		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-right: 1.3%;
	}
	#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, cursive;
	    text-transform: initial;
	    font-weight: 400;
	    font-size: 39px;
	    line-height: 20px;
	    margin: 10px auto;
	    color: #ff1e00;
	    text-align: center;
	}
	p.cursive{
		text-transform: lowercase;
		margin: 10px auto 30px !important;
	}
	.patronage ul li img {
	    max-width: auto;
	    display: inline;
	    width: 40%;
	}
	.patronage .medaillon {
	    border-radius: 100%;
	    float: none;
	    margin: 0 0 20px 0;
	}
	#actualites {
	    text-transform: uppercase;
	    letter-spacing: 10px;
	    text-align: center;
	    font-size: 19px;
	    margin-bottom: 45px;
	}
	#actualites:after {
	    content: '';
	    display: block;
	    width: 96px;
	    height: 1px;
	    margin: 16px auto 30px;
	    background: #fff;
	}
	p.actu_date {
	    text-align: center;
	    margin: 10px 0 22px;
	    letter-spacing: 6px;
	    color: #ff1e00;
	    text-align: center;
	    font-size: 16px;
	}	
	#prochain_bal {
	    width: 581px;
	    text-align: center;
	    padding: 40px 40px 30px;
	    margin: 30px auto;
	    border: 1px solid #fff;
	}
	#prochain_bal p:first-child {
	    letter-spacing: 0;
	    font-family: 'ChopinScript', Georgia, cursive;
	    text-transform: none;
	    font-weight: 400;
	    font-size: 52px;
	    line-height: 36px;
	    margin: 10px auto;
	    color: #ffffff;
	}
	#prochain_bal p {
	    text-align: center;
	    letter-spacing: 1px;
	    margin: 35px 40px 10px;
	}
	#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-block;
	    border: none;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    margin: 15px;
	    padding: 15px 28px;
	}
	#prochain_bal a.button:hover {
	    box-shadow: 0 0 2px 2px #fff;
	}
	.central.blanc.accueil {
	    padding: 0;
		height: 410px;
		overflow: hidden;
	}
	body#balviennois #un{
		border-top: 16px solid #ff1e00;
	}
	body#balviennois #quatre{
		border-bottom: 16px solid #ff1e00;
	}
	.central.blanc.accueil, .central.blanc.article{
		background-color: #fff;
	}
	.central.blanc.accueil img{
	    min-height: 410px; 
	    width: 100%
	}
	.central.blanc.accueil span, .central.blanc.article span{
	    font-weight: 400;
	}
	.central.blanc.accueil>div, .central.blanc.accueil>div+div {
		background-color: #fff;
		box-sizing: border-box;
		width: 50%;
	}
	#balviennois .accueil:nth-child(even) div, #test_accueil .accueil:nth-child(even) div{
		float: left;
	}
	#balviennois .accueil:nth-child(odd) div, #test_accueil .accueil:nth-child(odd) div{
		float: right;
	}
	.central.blanc.accueil>div+div {
	    padding: 50px 60px;
	}
	.central.blanc.accueil>div+div p{
		text-align: left !important;
	    font-size: 14px;
	}
	.central.blanc.accueil>div+div hr, .central.blanc.article hr{
		height: 1px;
	    border: none;
	    width: 100px;
	    margin: 20px 0;
	}
	.central.blanc.article a{
		font-weight: 300;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 2px;
	}
	.central.blanc.accueil>div+div a, .central.blanc.article p:last-child>a{
		display: inline-block;
		font-size: 14px;
	    padding: 15px 20px;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    font-weight: 400;
	    border: 1px solid #ff0000;
	    margin-top: 20px;
	}

	.central.blanc.accueil>div+div a:hover, .central.blanc.article p:last-child>a:hover{
		color: #000;
		border: 1px solid #000;
	}

/*****************************
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
******************************/

	#formulaire_contact label{
		width: 30% ;
	}

	input, textarea, select {
	    width: 68% !important;
	    border: 1px solid #C0C0C0;
	    padding: 13px;
	    box-sizing: border-box;
	    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;
	}
	input:focus, textarea:focus {
	    border: 1px solid #FFF;
	    box-shadow: 0 0 2px 2px #C0C0C0;
	}

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

	.page_vitrine .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: 18px;
	    margin-top: 0;
	    padding: 0 0 20px;
	    color: #ff1e00;
	    border-bottom: 1px solid #ff1e00;
	    /* padding: 10px 0; */
	}


/*****************************
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/reservation-diner.jpg');
	}
	ul#choix-reservations li:nth-child(2){
		background: url('../img/reservation-spectacle.jpg');
	}
	ul#choix-reservations li:nth-child(3){
		background: url('../img/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;
	}

/*************************
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 */


	table.billet{
		background-color: rgba(255,255,255, 0);
		padding: 0 10px 10px 10px;
		border: 1px solid #fff;
		display: none;
	}
	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: 12px;
		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;
}


body#presse .tri-col .col {
    min-height: 285px;
}


/* Menu */

nav#menu #nav-toggle, a#bouton_reservez{
	display: none;
}


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

		ORDINATEURS

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


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


	nav#menu a {
	    font-size: 11px;
	    letter-spacing: 2px;
	    padding: 14px 12px;
	}
    div.central {
        padding: 40px !important;
    }
	.tri-col .col {
	    min-width: 0;
	}
	.col a {
	    height: 35px;
	    line-height: 35px;
	    font-size: 11px;
	}
	.col a:hover {
	    height: 97.4%;
	    line-height: 150px;
	    font-size: 11px;
	}
    /*
    div.connexion {
        padding: 40px 96px !important;
    }
    */
    #lettrine {
        left: 15px !important;
    }

}


@media all and (min-width: 1599px){
	#contact button {
	    margin-right: 1.5%;
	}
}

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

		TRES GRANDS ECRANS

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


@media all and (min-width: 1440px){
	.page_reservation .central.noir>div.connexion {
        padding: 48px 19.3% !important;
	}
	#reservations #lettrine, #reservations-diner #lettrine, #reservations-bal #lettrine, #reservations-spectacle #lettrine {
	    font-size: 286px;
	    top: -131px;
	    left: 133px;
	    z-index: 400;
	}
	body#presse .tri-col .col {
	    min-height: 350px;
	}
}
@media all and (min-width: 1600px){
	.page_reservation .central.noir>div.connexion {
	    padding: 48px 24.3% !important;
	}
	body#presse .tri-col .col {
	    min-height: 450px;
	}
}
@media all and (min-width: 1920px){
	.page_reservation .central.noir>div.connexion {
	    padding: 48px 27.95% !important;
	}
	#reservations #lettrine, #reservations-diner #lettrine, #reservations-bal #lettrine, #reservations-spectacle #lettrine {
	    left: 227px;
	}
}