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;
 	overflow-x: 	hidden; 
	overflow-y:		hidden;
}

/* CENTRAGE DU SITE ===============================================*/
#zone-de-travail{
	margin-top	: 	-596px;
	margin-left	: 	auto;
	margin-right:	auto;
	width		:	1640px; 
	height		:	580px;
	font-size	:	0.95em; 
	font-family	:	'Comic Sans MS';
}

a:link{ 
 text-decoration:none; 
}

/* CENTRAGE DU SITE ===============================================*/

.entourage_horizontal_3cases{
	margin-left: 	auto;
	margin-right:	0px;
	height: 		115px;
	border-radius: 	15px;
	background: 	linear-gradient(to bottom, #1E90FF, #7FFF00 60%, #F4A460);
	border: 		4px red solid;
}

.entourage_horizontal_2x3cases{
	margin-left: 	auto;
	margin-right:	0px;
	height: 		245px;
	border-radius: 	15px;
	background: 	linear-gradient(to bottom, #1E90FF, #7FFF00 60%, #F4A460);
	border: 		4px red solid;
}

.entourage_horizontal_6cases{
	margin-left: 	auto;
	margin-right:	auto;
	height: 		115px;
	border-radius: 	15px;
	background: 	linear-gradient(to bottom, #1E90FF, #7FFF00 60%, #F4A460);
	border: 		4px red solid;
}

/* Bord en jaune et texte bleu ---------------------- */
p.bloc-image {
	display:		inline-block;
	margin-top:		5px;
	margin-left:	5px;
}

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

p.bloc-image span {
	margin-top:		2px;
	margin-bottom:	2px;
    display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 
	color:			red;
	border:			solid 3px red;
	border-radius:	15px;
	background-color:#F5F5DC;
	width		 : 	90px;
}

/* Bord en bleu et texte bleu ---------------------- */
p.bloc-image img:hover{
	border:			solid 3px red;
	border-radius:	15px;
}

/* Affichage de l option demandee en bas a droite du bandeau superieur -------*/
/* bord en rouge et texte rouge -------- */
p.bloc-image-couleur img{
	margin-left: 	auto;
	margin-right: 	auto;
	margin-top: 	0px;
	border:			solid 3px green;
	border-radius:  90px / 68px; 
	width		 : 	90px;
}

p.bloc-image-couleur span {
	margin-top:		2px;
	margin-bottom:	2px;
	display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 	
	color:			green;
	border:			solid 3px green;
	border-radius:	15px;
	background-color:#F5F5DC;
	width:			90px;	
}

/* =================================================================*/
#grande-zone-centrale{
	margin-left: 	0px;
	margin-right:	auto;
	margin-top: 	-525px;
	width: 			1300px;
	height: 		525px;
	overflow:		hidden;
}

#fond-de-la-zone-centrale{
	margin-left: 	0px;
	margin-right:	auto;
	margin-top: 	5px;
	height: 		460px;
	border		:	8px rgb(34, 139, 34) ridge;
	border-radius: 	15px;
	background: 	linear-gradient(to bottom, #1E90FF, #7FFF00 60%, #F4A460);
	overflow:		hidden;
}

/* ========================================================*/	
/* POSITIONNEMENT DU TEXTE ET DU TRAIT VERTICAL A GAUCHE ==*/
/* ========================================================*/
#position-de-option-demandee{
	margin-top: -430px;
	margin-left:15px;
	width: 		110px;
	height: 	420px;
}

/* AFFICHAGE DU TEXTE EN PIED DE PAGE ============================= */
#saut-de-ligne{
	margin-top:	5px;
}

#miniland{
	margin-left	: 	auto;
	margin-right:	auto;
	margin-top	:	40px;
	width		:	600px;
	text-align	: 	center;
}

/* AFFICHAGE DU DIAPORAMA ======================================== */
/* Position du diaporama ------------------------------------------*/
.diaporama {
	margin-top:		-495px;
	margin-left	: 	auto;
	margin-right:	auto;
	width:			1000px;
	height:			420px; 
	border-radius:	8px;
	overflow: 		hidden;	
}

.diaporama li{
	list-style-type:none; 
}

/* COMPLEMENTS : Compteur en bas à gauche de l image ----*/
.diaporama span {
	position: 		relative;
	top: 			-40px;
	left: 			-10px;
	text-align: 	center;
	border:			solid 3px green;
	border-radius:	15px;
	background	: 	linear-gradient(#00FF00, #FFFF00);
	padding-left: 	15px;
	padding-right: 	15px;
	font-family:	'Comic Sans MS';	
	FONT-SIZE:		0.938em; 
	FONT-WEIGHT:	bold;
	color: 			blue;
}

/* Position du centrage des boutons de defilement des images ---------*/
.diaporama_controls{
	margin-top:		-75px;
	margin-left: 	1180px;
	text-align: 	center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.938em; 
	font-family:	'Comic Sans MS';
}

.diaporama_controls a{
	padding-left: 	10px;
	padding-right: 	10px; 
	background: 	linear-gradient(#00FF00, #FFFF00);
	border-radius:	15px;
    border:			solid 2px blue;
	text-decoration:none;
	color:			blue;
}

.diaporama_controls a:hover{
	PADDING-RIGHT:	10px; 
	PADDING-LEFT: 	10px; 
	background: 	linear-gradient(#FFFF00, #00FF00);
	border-radius:	15px;
    border:			solid 2px red;
	text-decoration:none;
	color:			red;
}

/* =================================================================*/
/* ========== DEFINITION DU FOND DES IMAGES ======================= */
/* =================================================================*/
#position-fond{
	margin-top:		-457px;
	margin-left: 	auto;
    margin-right: 	auto;
	border-radius:	15px;
	width:			1050px;
	height: 		420px;
}

/* =================================================================*/
#fond-pompier{
	border-radius:	15px;
	border		:	8px red ridge;
	background: 	linear-gradient( to left,#FA8072, #FFE4B5 60%,#FFDEAD);
	height:			420px;
}	

/* =================================================================*/
#fond-tout-terrain{
	border-radius:	15px;
	border		:	8px rgb(184, 134, 11) ridge;
	background: 	linear-gradient( to left, #DAA520, #FFE4C4 60%,#FFE4C4);
	height:			420px;
}

/* =================================================================*/
#fond-service{
	border-radius:	15px;
	border		:	8px rgb(30, 144, 255) ridge;
	background: 	linear-gradient( to left,#F7BE81, #F2F5A9 60%,#F2F5A9);
	height:			420px;
}

/* =================================================================*/
#fond-militaire{
	border-radius:	15px;
	border		:	8px rgb(34, 139, 34) ridge;
	background: 	linear-gradient( to left, #DCDCDC, #C0C0C0 60%, #E6E6E6);
	height:			420px;
}

/* =================================================================*/
#fond-civil{
	border-radius:	15px;
	border		:	8px rgb(123, 104, 238) ridge;
	background: 	linear-gradient( to left, #FACC2E, #FACC2E 60%, #F6E3CE);
	height:			420px;
}	

/* =================================================================*/
#fond-cirque{
	border-radius:	15px;
	border		:	8px rgb(255, 0, 255) ridge;
	background: 	linear-gradient( to left, #00FF00, #FFFF00 60%, #00BFFF);
	height:			420px;
}

/* =================================================================*/
#fond-timbre{
	border-radius:	15px;
	border		:	8px rgb(34, 139, 34) ridge;
	background: 	linear-gradient( to left, #DCDCDC, #C0C0C0 60%, #E6E6E6);
	height:			420px;
}


/* =================================================================*/
#zone-a-gauche{
	margin-left: 	0px;
	margin-right:	auto;
	margin-top: 	0px;
	width: 			640px;
	height: 		380px;
}	

/* =================================================================*/
#zone-milieu{
	margin-left: 	658px;
	margin-right:	auto;
	margin-top: 	-380px;
	width: 			640px;
	height: 		380px;
}

/* =================================================================*/
#zone-a-droite{
	margin-left: 	auto;
	margin-right:	0px;
	margin-top: 	-380px;
	width: 			325px;
	height: 		904px;
}

/* CENTRAGE DU SITE =============================================== */
#zone-de-travail{
	overflow:		hidden;
	margin-left: 	auto;
	margin-right:	auto;
	margin-top: 	auto;
	margin-bottom:	auto;
	width: 			1645px;
	height: 		905px;
}

/* =================================================================*/
/* POUR L OVALE DE L OPTION DEMANDEE ( Position et decor )*/
#zone-pour-ovale{
	margin-left: 	auto;
		margin-right:	218px;
	margin-top: 	-140px;
	width: 			100px;
	height: 		125px;
}

/* =================================================================*/
/*Le CIVIL */
/* =================================================================*/
p.ovale-couleur-civil img{
	margin-left: 	auto;
	margin-right: 	auto;
	margin-top: 	0px;
	border:			solid 3px rgb(123, 104, 238);
	border-radius:  90px / 68px; 
	width		 : 	90px;
}

p.ovale-couleur-civil span {
	margin-top:		2px;
	margin-bottom:	2px;
	display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 	
	color:			rgb(123, 104, 238);
	border:			solid 3px rgb(123, 104, 238);
	border-radius:	15px;
	background-color:#F5F5DC;
	width:			90px;	
}
/* =================================================================*/
/*Le CIRQUE */
/* =================================================================*/
p.ovale-couleur-cirque img{
	margin-left: 	auto;
	margin-right: 	auto;
	margin-top: 	0px;
	border:			solid 3px rgb(255, 0, 255);
	border-radius:  90px / 68px; 
	width		 : 	90px;
}

p.ovale-couleur-cirque span {
	margin-top:		2px;
	margin-bottom:	2px;
	display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 	
	color:			rgb(255, 0, 255);
	border:			solid 3px rgb(255, 0, 255);
	border-radius:	15px;
	background-color:#F5F5DC;
	width:			90px;	
}
/* =================================================================*/
/*Les POMPIERS */
/* =================================================================*/
p.ovale-couleur-pompier img{
	margin-left: 	auto;
	margin-right: 	auto;
	margin-top: 	0px;
	border:			solid 3px red;
	border-radius:  90px / 68px; 
	width		 : 	90px;
}

p.ovale-couleur-pompier span {
	margin-top:		2px;
	margin-bottom:	2px;
	display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 	
	color:			red;
	border:			solid 3px red;
	border-radius:	15px;
	background-color:#F5F5DC;
	width:			90px;	
}

/* =================================================================*/
/*Les SERVICES */
/* =================================================================*/
p.ovale-couleur-service img{
	margin-left: 	auto;
	margin-right: 	auto;
	margin-top: 	0px;
	border:			solid 3px rgb(30, 144, 255);
	border-radius:  90px / 68px; 
	width		 : 	90px;
}

p.ovale-couleur-service span {
	margin-top:		2px;
	margin-bottom:	2px;
	display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 	
	color:			rgb(30, 144, 255);
	border:			solid 3px rgb(30, 144, 255);
	border-radius:	15px;
	background-color:#F5F5DC;
	width:			90px;	
}

/* =================================================================*/
/*Les MILITAIRES */
/* =================================================================*/
p.ovale-couleur-militaire img{
	margin-left: 	auto;
	margin-right: 	auto;
	margin-top: 	0px;
	border:			solid 3px rgb(34, 139, 34);
	border-radius:  90px / 68px; 
	width		 : 	90px;
}

p.ovale-couleur-militaire span {
	margin-top:		2px;
	margin-bottom:	2px;
	display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 	
	color:			rgb(34, 139, 34);
	border:			solid 3px rgb(34, 139, 34);
	border-radius:	15px;
	background-color:#F5F5DC;
	width:			90px;	
}

/* =================================================================*/
/*Les TOUT-TERRAIN */
/* =================================================================*/
p.ovale-couleur-tout-terrain img{
	margin-left: 	auto;
	margin-right: 	auto;
	margin-top: 	0px;
	border:			solid 3px rgb(184, 134, 11);
	border-radius:  90px / 68px; 
	width		 : 	90px;
}

p.ovale-couleur-tout-terrain span {
	margin-top:		2px;
	margin-bottom:	2px;
	display:		block;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 	
	color:			rgb(184, 134, 11);
	border:			solid 3px rgb(184, 134, 11);
	border-radius:	15px;
	background-color:#F5F5DC;
	width:			90px;	
}