/*===== Fonts =====*/
@font-face {
    font-family: 'Twingo Roulet';
    src: url('fonts/twingoroulet.woff') format('woff');
}
@font-face {
    font-family: 'Twingo Logo';
    src: url('fonts/twingologo.woff') format('woff');
}


/*===== Général =====*/
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: 1em;
	font-family: Trebuchet MS;
}
h1 {
	text-transform: lowercase;
	font-family: 'Twingo Logo';
	font-size: 5em;
	margin: 0 0 0 40px;
	color: rgb(211,52,44);
}
h3 {
	font-family: 'Twingo Roulet';
	color: rgb(66,43,133);
	font-size: 2em;
	font-weight: bold;
	margin: 10px 0 10px 30px;
	clear: both;
}
.souligne { text-decoration: underline; }
.important {
	background-color: rgb(255,242,0);
	border: 4px dashed red;
	border-radius: 25px 0;
	width: 80%;
	font-size: 1.8em;
	font-family: 'Twingo Roulet';
	padding: 15px 25px;
	margin: 0 auto 30px;
	cursor: not-allowed;
	text-align: center;
}
.block {
	width: 60%;
	min-height: 350px;
	margin: 0 20px 30px 0;
	float: left;
	border-top: 4px solid #C9261F;
	border-left: 4px solid #C9261F;
	border-right: 4px solid #422B85;
	border-bottom: 4px solid #422B85;
	border-radius: 20px 0 20px 0;
	background-color: rgba(251,217,24,0.8);
	padding: 10px;
}
	.block img {
		display: block;
		max-width: 80%;
		margin: 0 auto;
	}
.affiche {
	width: 35%;
	float: right;
	min-height: 350px;
	margin: 0 0 30px;
}
	.affiche img {
		max-width: 100%;
		max-height: 100%;
	}
.align_right { text-align: right; }
.centre { text-align: center; }
.separ_line { padding-bottom: 15px; border-bottom: 2px solid rgb(15,152,73); }
.lang_select { border: 1px solid black; box-shadow: 0 0 4px 2px white; }

/*===== Formulaire d'inscription =====*/
fieldset {
	text-align: center;
	border-top: 4px solid #C9261F;
	border-left: 4px solid #C9261F;
	border-right: 4px solid #422B85;
	border-bottom: 4px solid #422B85;
	border-radius: 20px 0 20px 0;
	width: 500px;
	margin: 0 auto;
	background-color: #FBD918;
}
	legend {
		font-family: 'Twingo Roulet';
		font-size: 1.7em;
		padding: 0 10px;
		margin-left: 15px;
		color: #422B85;
	}
		fieldset:hover legend {
			text-shadow: 1px 0 white, 0 1px white, -1px 0 white, 0 -1px white;
			cursor: default;
		}
	div.ligne_form {
		margin-bottom: 10px;
		color: black;
	}
	span.label {
		display: inline-block;
		width: 220px;
		text-align: right;
		font-weight: bold;
		vertical-align: top;
	}
	span.input {
		display: inline-block;
		width: 250px;
		text-align: left;
		font-size: 0.8em;
		vertical-align: top;
	}
		span.input input[type=text] {
			height: 15px;
			width: 190px;
			border: 1px solid black;
			border-radius: 5px 0 0 5px;
			font-size: 0.8em;
			font-family: Tahoma, Verdana;
			padding: 0 5px;
		}
		span.input input#pays_autre {
			height: 15px;
			width: 100px;
			border: 1px solid black;
			border-radius: 5px 0 0 5px;
			font-size: 0.8em;
			font-family: Tahoma, Verdana;
			padding: 0 5px;
		}
			span.input img.modele_img {
				width: 80px;
			}
		span.input select {
			height: 17px;
			border: 1px solid black;
			border-radius: 5px;
			font-size: 0.8em;
			font-family: Tahoma, Verdana;
			padding: 0 3px;
		}
		span.input img.twingo_form {
			position: relative;
			right: 15px;
			top: 6px;
		}
		input.submit {
			height: 35px;
			width: 200px;
			font-size: 1.5em;
			font-weight: bold;
			font-family: 'Twingo Roulet';
			padding: 0;
			background: url('img/submit.png');
			border: 0;
			padding-right: 40px;
			margin-top: 10px;
			cursor: pointer;
		}
		input.submit:hover {
			color: #49A783;
		}
textarea {
	width: 190px;
	height: 100px;
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px;
	margin-top: 7px;
}
div.form_incomplet {
	width: 80%;
	margin: 10px auto;
}
	div.form_incomplet ul {
		list-style-image: url('img/puce.png');
	}
		div.form_incomplet ul li {
			color: yellow;
			text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black;
		}
#affichage {
	display: inline-block;
	height: 20px;
}
#France, #Allemagne, #Belgique, #Suisse, #Luxembourg, #Pays-Bas, #Italie, #Pologne, #Autre {
	display: none;
}

/*===== Fond du site + titre =====*/
#ciel {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: linear-gradient(rgb(107,203,217) 0%, rgb(242,114,120) 50%, rgb(242,114,120) 100%);
}
#hangar {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('img/hangar.png') no-repeat bottom;
	background-size: 100% 70%;
}
#nuage {
	position: fixed;
	z-index: 3;
	top: 8%;
	right: 5%;
	width: 15vw;
	height: 10vw;
	background: url('img/nuage.png') no-repeat;
	background-size: contain;
}

/*===== Menu de navigation =====*/
nav#menu {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 15%;
	height: 100vh;
	background-color: white;
	color: white;
	box-shadow: 0 0 8px 3px black;
	background: linear-gradient(rgba(85,65,152,0.9),rgba(117,103,163,0.8));
}
	nav#menu img {
		max-width: 90%;
		margin: 10px auto;
		vertical-align: middle;
	}
	nav#menu hr {
		width: 90%;
		height: 2px;
		border: none;
		background-color: white;
		border-radius: 100%;
	}
		nav#menu div#langue {
			text-align: center;
		}
			nav#menu div#langue img {
				margin: 10px;
			}
	ul#categories {
		list-style: none;
		font-family: 'Twingo Roulet';
		font-size: 1.9em;
		font-weight: bold;
		margin: 10px 0;
	}
		ul#categories li {
			position: relative;
			line-height: 40px;
		}
			ul#categories li:nth-child(6), ul#categories li:last-child { font-size: 0.8em; }
			ul#categories li a::before {
				position: absolute;
				top: 9px;
				left: -80px;
				width: 24px;
				height: 24px;
				content: '';
				background-size: contain;
				transition: all 0.2s ease-in-out;
			}
			ul#categories li:nth-child(1) a::before { background: url('img/icon_accueil.png') no-repeat; }
			ul#categories li:nth-child(2) a::before { background: url('img/icon_inscription.png') no-repeat; }
			ul#categories li:nth-child(3) a::before { background: url('img/icon_programme.png') no-repeat; }
			ul#categories li:nth-child(4) a::before { background: url('img/icon_informations.png') no-repeat; }
			ul#categories li:nth-child(5) a::before { background: url('img/icon_hebergement.png') no-repeat; }
			ul#categories li:nth-child(6) a::before { background: url('img/icon_tshirt.png') no-repeat; }
			ul#categories li:last-child a::before { background: url('img/icon_sponsor.png') no-repeat; }
				ul#categories li:hover a::before, ul#categories li a.page_select::before { left: -30px; }
			ul#categories li a {
				color: white;
				text-decoration: none;
			}
				ul#categories li a:hover { text-decoration: underline; }
				ul#categories li a.page_select { color: rgb(250,216,39); }

/*===== Corps =====*/
#corps {
	position: relative;
	z-index: 150;
	width: 79%;
	min-height: 100vh;
	margin: 0 0 0 18%;
	padding: 20px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.7);
	overflow: hidden;
}
	/*===== Header =====*/
	#titre {
		position: absolute;
		z-index: 100;
		top: 3vh;
		left: 5%;
		font-family: 'Twingo Roulet';
	}
		#titre_30ans_twingo {
			display: flex;
		}
			#titre_30ans {
				font-size: 4vw;
				text-align: left;
				line-height: 70px;
				margin-right: 30px;
				font-weight: bold;
			}
				#titre_30ans em {
					font-style: normal;
					font-size: 1.5em;
					margin-right: 30px;
					text-shadow: 0 2px black, 0 -2px black, -2px 0 black, 2px 0 black;
				}
			#titre_twingo {
				font-family: 'Twingo Logo';
				font-size: 8vw;
			}
		#titre_date {
			color: white;
			text-shadow: 0 1px black, 0 -1px black, -1px 0 black, 1px 0 black;
			font-size: 2.5vw;
		}
	#lieu {
		position: absolute;
		z-index: 4;
		top: 8vh;
		right: 0;
		padding: 0 40px 5px 15px;
		background: linear-gradient(rgba(250,216,39,0.9),rgba(250,216,39,0.4));
		text-align: center;
		font-family: 'Twingo Roulet';
		font-size: 2.2em;
		font-weight: bold;
	}
		#lieu p {
			margin: 0;
		}

	/*===== Texte =====*/
	hr#corps_separ {
		border: none;
		background-color: grey;
		width: 90%;
		border-radius: 100%;
		height: 3px;
		margin-top: 300px;
	}
	div#texte {
		padding-top: 20px;
	}
		div#sponsors img {
			max-height: 45px;
			padding: 10px;
			border-right: 1px solid grey;
		}
	
/*=============================================*/
/*=============== PAGES =======================*/
/*=============================================*/
.exemples { font-size: 0.8em; font-style: italic; }

/* ===== Logement ===== */
.logement {
	margin: 10px 0;
	width: 100%;
	border-collapse: collapse;
}
.logement tr {
	height: 60px;
}
.logement tr.home_ecart {
	height: 3px;
}
	.logement td.home_first {
		padding-left: 10px;
		font-family: 'Twingo Roulet';
		font-size: 1.2em;
		background-color: #CE2522;
		border-radius: 10px 0 0 0;
		width: 300px;
	}
	.logement td.home_nom {
		padding-left: 10px;
		font-family: 'Twingo Roulet';
		font-size: 1.2em;
		background-color: #CE2522;
		width: 35%;
	}
		.logement td.home_nom a, .logement td.home_first a {
			color: white;
			text-decoration: none;
		}
		.logement td.home_nom a:hover, .logement td.home_first a:hover {
			color: #422B85;
		}
	.logement td.home_lieu, .logement td.home_loin, .logement td.home_quoi {
		font-size: 0.8em;
	}
	.logement td.home_lieu {
		background-color: #422B85;
		color: white;
		padding-left: 10px;
		width: 35%;
	}
	.logement td.home_loin {
		background-color: #49A783;
		text-align: center;
		width: 10%;
	}
	.logement td.home_quoi {
		background-color: #FBD918;
		padding-left: 10px;
	}