/* AFFICHAGE DU FOND D ECRAN ======================= */
html {
	background: 	black;
	overflow-x: 	hidden; 
	overflow-y:		hidden;
}

/* CENTRAGE DU SITE ================================= */
.zone-de-travail{
	overflow-x: 	hidden; 
	overflow-y:		hidden;
	margin-left: 	auto;
	margin-right:	auto;
	margin-top: 	auto;
	margin-bottom:	auto;
	width: 			1630px;
	height: 		885px;
	background: 	linear-gradient(to bottom, #1E90FF, #7FFF00 60%, #F4A460);
	border:			10px green ridge;
	border-radius: 	30px;
}

/* AFFICHAGE DU BANDEAU EN HAUT ====================== */
/* Centrer le bandeau ================================ */	
#centrer-bandeau{
	text-align	:	center;
}

/* Bord en jaune et texte jaune ---------------------- */
p.bloc-image {
	display:		inline-block;
}

p.bloc-image img {
	border:			solid 3px green;
	border-radius:	15px;
	width		 : 	120px;
}

/* AFFICHAGE DES VEHICULES ALLANT DE DROITE A GAUCHE ====================== */
/* Droite vers Gauche */
.droite_gauche span {
	position	: absolute;
	width		: 100%;
	height		: 100%;
	animation	: droite-gauche 10s linear infinite;
}

@keyframes droite-gauche{
  0% {transform 	: translateX(100%);}
  100% {transform 	: translateX(-150%);}
}

/* ---------------------------------------------------- */
/* Gauche vers Droite */
.gauche_droite span {
	position	: absolute;
	width		: 100%;
	height		: 100%;
	animation	: gauche-droite 10s linear infinite;
}

@keyframes gauche-droite{
  0% {transform 	: translateX(-380%);}
  100% {transform 	: translateX(150%);}
  }

/* AFFICHAGE DE MINILAND QUI TOURNE ====================== */
.image {animation:	spin 10s linear infinite;}

@keyframes spin {
  0%   {transform: rotateZ(0);}
  25%  {transform: rotateZ(30deg);}
  50%  {transform: rotateZ(270deg);} 
  75%  {transform: rotateZ(180deg);}
  100% {transform: rotateZ(360deg);}
}

/* AFFICHAGE DU CUBE QUI TOURNE ====================== */
.conteneur{perspective:600px;}
	#cube{
	width: 				250px;
	height: 			250px;
	transform-style: 	preserve-3d;
	transition: 		transform 1s;
	transform: 			translateZ(-125px) rotateX( -220deg ) rotateY( 45deg ); 
	}

	#cube div{ position:	absolute;
	backface-visibility: 	hidden;
	overflow:			 	hidden;
	}

	#avant{transform: 	translateZ( 125px );}
	#fond{transform: 	translateZ( -125px );}
	#gauche{transform: 	rotateY( 90deg ) translateZ( 125px );}
	#droit{transform: 	rotateY( -90deg ) translateZ( 125px );}
	#haut{transform: 	rotateX(90deg) translateZ( 125px );}
	#bas{transform: 	rotateX(-90deg) translateZ( 125px );}
	#cube.rotation {animation: tourneCube 4s infinite ease-in-out;}
 
/*animation css*/
	@keyframes tourneCube {
		0% { transform: 	translateZ(-125px) rotateX(0deg) rotateY(0deg);}
		100% {transform: 	translateZ(-125px) rotateX(360deg) rotateY(360deg);}
	}
/* ====================================================== */
/* ====================== FIN =========================== */