html, body {
 height: 100%; /* nécessaire pour que body puisse prendre toute la hauteur */
 margin: 0; /* enlever les marges par défaut */
}

body {
 display: flex;
 justify-content: center; /* centre horizontalement */
 align-items: center; /* centre verticalement */
 background: black;
}

/* CENTRAGE DU SITE ================================= */
#zone-de-travail{
	overflow:		hidden;
	margin-left: 	auto;
	margin-right:	auto;
	margin-top: 	auto;
	margin-bottom:	auto;
	width: 			1640px;
	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 =========================== */

#position-bouton-fullscreen {
	position:		relative;
	top: 			10px;
	margin-left: 	auto;
	margin-right: 	10px;
	width: 			100px;
	height:			10px;
}