/* ===== Animations ===== */
@keyframes lisa {
	0% { 	bottom: -20%;	left: 95%; }
	5% { 	bottom: -20%;	left: 95%; }
	30% { 	bottom: -5%;	left: -5%; }
	70% { 	bottom: -5%;	left: -5%; }
	95% { 	bottom: 20%;	left: -85%; }
	100% { 	bottom: 20%;	left: -85%; }
}
@keyframes prologue {
	0% { 	bottom: -20%;	left: 80%; }
	5% { 	bottom: -20%;	left: 80%; }
	30% { 	bottom: -5%;	left: -20%; }
	70% { 	bottom: -5%;	left: -20%; }
	95% { 	bottom: 20%;	left: -100%; }
	100% { 	bottom: 20%;	left: -100%; }
}
@keyframes shake {
	0% { transform: rotate(0deg); }
	5% { transform: rotate(4deg); }
	15% { transform: rotate(-4deg); }
	25% { transform: rotate(4deg); }
	35% { transform: rotate(-4deg); }
	45% { transform: rotate(4deg); }
	55% { transform: rotate(-4deg); }
	65% { transform: rotate(4deg); }
	70% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

/* ===== Fond ===== */
#fond {
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
	#barre_hori {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: url('img/barre.png') repeat-y center;
	}
	#cielorange {
		position: fixed;
		z-index: 2;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(230,130,84,0.5) 30%, rgb(230,130,84) 70%, rgb(230,130,84) 100%);
	}
	#moulin {
		position: fixed;
		z-index: 2;
		bottom: 25%;
		width: 100%;
		text-align: center;
		opacity: 0.8;
	}
		#moulin img { max-height: 60vh; }
	#herbe {
		position: fixed;
		z-index: 3;
		bottom: 0;
		width: 100%;
		height: 35%;
		background: linear-gradient(to right, rgb(224,223,57) 0%, rgb(182,188,54) 100%);
	}
	#plante {
		position: fixed;
		z-index: 4;
		bottom: calc(35% - 6vw);
		left: -10vw;
		width: 120vw;
		height: 19vw;
		background: url('img/plante.png') repeat-x;
		background-size: contain;
	}
	#twingo_immobile {
		position: fixed;
		z-index: 5;
		bottom: 0;
		width: 100%;
		height: 35%;
		background: url('img/twingo_immobile.png') no-repeat center;
		background-size: contain;
	}
	#twingo_lisa {
		position: fixed;
		z-index: 6;
		bottom: -20%;
		left: 95%;
		width: 100%;
		height: 25%;
		background: url('img/twingo_lisa.png') no-repeat center;
		background-size: contain;
		animation: lisa 10s ease-in-out 1s infinite;
	}
	#twingo_prologue {
		position: fixed;
		z-index: 7;
		bottom: -20%;
		left: -80%;
		width: 100%;
		height: 27%;
		background: url('img/twingo_prologue.png') no-repeat center;
		background-size: contain;
		animation: prologue 10s ease-in-out 0s infinite;
	}

/* ===== Header ===== */
header div img { position: absolute; }
	header div:hover img { animation: shake 2s linear 0s infinite; }

	header #menu_infos, header #menu_parcours, header #menu_loger {
		position: fixed;
		z-index: 100;
		top: -25px;
		width: 240px;
		height: 70px;
		line-height: 35px;
		padding-top: 28px;
		box-sizing: border-box;
		font-size: 2em;
		font-family: 'Twingo';
		text-align: center;
		transition: all 0.2s ease-in-out;
		vertical-align: bottom;
	}

	#menu_infos {
		left: calc(50% - 450px);
		border: 2px solid rgb(23,90,16);
		background: linear-gradient(135deg,rgb(144,202,115) 0%,rgb(70,126,33) 100%);
		box-shadow: -4px 4px 2px rgb(23,90,16);
		transform: rotate(-3deg);
	}
		#menu_infos a { color: white; }
			#menu_infos a:hover { color: rgb(255,188,41); text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }
		#menu_infos img { top: 25px; left: -60px; }
		
	#menu_parcours {
		left: calc(50% - 120px);
		border: 2px solid rgb(30,30,100);
		background: linear-gradient(135deg,rgb(0,162,232) 0%,rgb(0,100,135) 100%);
		box-shadow: -4px 4px 2px rgb(30,30,100);
		transform: rotate(3deg);
	}
		#menu_parcours a { color: white; }
			#menu_parcours a:hover { color: rgb(246,183,70); text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }
		#menu_parcours img { top: 30px; left: -70px; }
		
	#menu_loger {
		left: calc(50% + 210px);
		border: 2px solid rgb(172,22,31);
		background: linear-gradient(135deg, rgb(255,188,41) 0%,rgb(237,111,70) 100%);
		box-shadow: -4px 4px 2px rgb(191,21,34);
		transform: rotate(-3deg);
	}
		#menu_loger a { color: white; }
			#menu_loger a:hover { color: rgb(144,202,115); text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }
		#menu_loger img { top: 25px; left: -40px; }
	
	#titre {
		position: fixed;
		top: 50px;
		left: calc(50% - 500px);
		font-family: 'Twingo';
		font-size: 5.5em;
		font-weight: bold;
		text-align: center;
		text-shadow: 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
	}
		#titre a { color: rgb(159,28,33); }
		#titre_plus {
			position: relative;
			top: -35px;
			font-size: 0.65em;
			font-weight: normal;
			color: rgb(129,20,23);
			margin-left: 450px;
		}
	
	#sstitre {
		position: fixed;
		top: 200px;
		width: 100%;
		text-align: center;
		color: black;
		font-family: 'Twingo';
		font-size: 1.7em;
		font-weight: bold;
	}
	
	#tshirt {
		position: absolute;
		z-index: 9999;
		top: 90px;
		left: calc(50% - 620px);
		font-family: 'Twingo';
		text-align: center;
		font-size: 1.3em;
		font-weight: bold;
		transform: rotate(-5deg);
	}
		#tshirt img {
			position: relative;
			width: 180px;
		}
		#tshirt a { color: black; }
		#tshirt:hover a { text-shadow: 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white; }

/* ===== Footer ===== */
footer {
	position: fixed;
	z-index: 150;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 75px;
	line-height: 50px;
	background-color: rgb(197,200,55);
	box-shadow: 0 -3px 3px rgb(71,78,120);
	text-align: center;
	color: black;
	border-radius: 40% 20% 0 0;
}
	footer #pied_texte { clear: both; width: 100%; }
		footer #pied_texte a { color: black; transition: all .3s linear; }
			footer #pied_texte a:hover { color: white; text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }
	footer #pied_deco {
		display: flex;
		clear: both;
		width: 100%;
		height: 25px;
	}
		footer #pied_deco div { width: 25%; height: 25px; overflow; hidden; }
		footer #pied_deco div:first-child { background-color: rgb(68,173,142); }
		footer #pied_deco div:nth-child(2) { background-color: rgb(249,216,41); }
		footer #pied_deco div:nth-child(3) { background-color: rgb(210,53,44); }
		footer #pied_deco div:last-child { background-color: rgb(73,52,147); }

/* ===== Pages ===== */
#corps {
	position: relative;
	z-index: 60;
	width: 900px;
	min-height: calc(100vh - 240px);
	box-sizing: border-box;
	margin: 240px auto 0;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 80px;
	border-radius: 25px;
	color: black;
	font-size: 1.1em;
	background-color: rgba(255,255,255,0.7);
}
	#corps p { margin: 10px 5px; font-size: 1em; }
	#corps img { max-width: 100%; }
	#inscription {
		position: absolute;
		top: 13px;
		right: 5px;
		font-size: 1.3em;
		color: black;
		cursor: pointer;
	}
	 #inscription:hover {
		 text-shadow: 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
	 }
	
/* ===== Listing ===== */
table.listing {
	width: 100%;
	border-collapse: collapse;
	color: black;
}
	table.listing td {
		border: 1px solid black;
		padding: 3px;
		background-color: rgb(246,183,70);
	}
	table.listing th:nth-child(n+2) {
		border: 1px solid black;
		padding: 3px;
		background-color: rgb(30,30,100);
		color: white;
	}
	th.day {
		width: 25px;
	}
	td.nb_vehicules {
		text-align: center;
		background-color: rgb(30,30,100) !important;
		color: white;
	}
	table.listing td:nth-child(2) a {
		color: white;
	}
	td.present { background-color: green !important; }
	td.absent { background-color: red !important; }


/*===== VERSION TABLETTES/MOBILES EN MODE PORTRAIT =====*/
@media (orientation: portrait) {
@keyframes lisa {
	0% { 	bottom: -10%;	left: 95%; }
	5% { 	bottom: -10%;	left: 95%; }
	30% { 	bottom: 0;		left: -5%; }
	70% { 	bottom: 0;		left: -5%; }
	95% { 	bottom: 10%;	left: -85%; }
	100% { 	bottom: 10%;	left: -85%; }
}
@keyframes prologue {
	0% { 	bottom: -10%;	left: 80%; }
	5% { 	bottom: -10%;	left: 80%; }
	30% { 	bottom: 0;		left: -20%; }
	70% { 	bottom: 0;		left: -20%; }
	95% { 	bottom: 10%;	left: -100%; }
	100% { 	bottom: 10%;	left: -100%; }
}
	
	#twingo_lisa {
		bottom: -10%;
		height: 18%;
	}
	#twingo_prologue {
		bottom: -10%;
		height: 20%;
	}
}