﻿.mb{}
	
	 .compte_perso{
	 	display: flex;
	 	height :700px;
	 	border: 1px transparent solid;
	 	flex-direction: row;/*row;column;row-reverse;column-reverse*/
	 	justify-content: flex-start;/* flex-start (défaut); flex-end (aligné à la fin);center; space-between ( les éléments sont étirés sur tout l'axe; space-around : idem mais avec de l'espace sur les extremités)*/
	 	align-items: stretch; /*stretch (éléments étirés sur tout l'axe); flex-start (alignés au début); flex-end; center; baseline(alignés sur la ligne de base, semblable à flex-start)*/
	 }
	 
	 .element	{ 
		display: flex;	 
		flex-direction: row;
		justify-content: space-around;
		border: 3px transparent solid;
		padding: 0px; /* Marge intérieure de 50px  margin-top, bottom, left et right*/
		margin: 5px; 	
	}
	
 	#entete {
 		display: flex;
 		height :40px;
 		border: 1px black solid;
 		flex-direction: row;/*row;column;row-reverse;column-reverse*/
 		justify-content: space-between;/* flex-start (défaut); flex-end (aligné à la fin);center; space-between ( les éléments 		sont étirés sur tout l'axe; space-around : idem mais avec de l'espace sur les extremités)*/
 		align-items: center; /*stretch (éléments étirés sur tout l'axe); flex-start (alignés au début); flex-end; center; 		baseline(alignés sur la ligne de base, semblable à flex-start)*/
 	}
	.horizon {
 		display: flex;
 		//height :40px;
 		border: 1px transparent solid;
 		flex-direction: row;/*row;column;row-reverse;column-reverse*/
 		justify-content: flex-start;/* flex-start (défaut); flex-end (aligné à la fin);center; space-between ( les éléments 		sont étirés sur tout l'axe; space-around : idem mais avec de l'espace sur les extremités)*/
 		align-items: flex-start; /*stretch (éléments étirés sur tout l'axe); flex-start (alignés au début); flex-end; center; 		baseline(alignés sur la ligne de base, semblable à flex-start)*/
 	}
	#nom { 
			font-size : 20px;
			font-family : Verdana, arial, helvetica, sans-serif; 
			color : #000000; 
			text-align : center; 
			font-weight : bold; 
			background-color :  #cee3f6 ; /* #5882FA;   #666666 */
			border-style: inset;
			border-radius: 25px;
			margin: 100px 150px 100px 80px; /* top right bottom left*/
			padding: 20px;	
			border: 5px blue double;
			width : 430px;
			Height : 230px;
	}
	
	.maColonne{
		display: flex;	
		flex-direction: column;
		align-items: center;
		/*border: 3px black solid;*/
		margin: none; 
    	/* EW	width: 50%; */
		/* EW min-width : 500px; */
		padding: 10px;
	}
	.maColonneCentrale{
		display: flex;	
		flex-direction: column;
		align-items: center;
		/*border: 3px black solid;*/
		margin: none; 
    		width: 1040px;
		min-width : 500px;
	}
	.maColonneMenu{
		display: flex;	
		flex-direction: column;
		align-items: center;
		/*border: 3px black solid;*/
		margin-right: 10px; 
    		width: 10%;
		
	}
	
.table-entete-centre {
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif; 
	color : #333333; 
	text-align : center; 
	background-color : #5882FA; 
	}
.table-titre {
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif; 
	color : #eeeeee; 
	text-align : center; 
	font-weight : bold; 
	background-color : #5882FA; 
	}
.table-ligne1-centre {
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif; 
	color : #333333; 
	text-align : center; 
	background-color : #a9d0f5; 
	}
.table-ligne2-centre{
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif;
	color : #333333; 
	text-align : center; 
	background-color: #cee3f6; 
	}
.table-ligne11-centre {
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif; 
	color : #333333; 
	text-align : center; 
	background-color:#F7EE00; 
	}	
.table-ligne12-centre {
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif; 
	color : #333333; 
	text-align : center; 
	background-color:#FF8900; 
	}	
.table-ligne13-centre {
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif; 
	color : #333333; 
	text-align : center; 
	background-color:#FF0000;	
	}
.table-ligne1-droite {
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif; 
	color : #333333; 
	text-align : right; 
	background-color : #a9d0f5; 
	}
.table-ligne2-droite{
	font-size : 12px; 
	font-family : Verdana, arial, helvetica, sans-serif;
	color : #333333; 
	text-align : right; 
	background-color : #cee3f6; 
	}
.table-ligne1-gauche {
		font-size : 12px; 
		font-family : Verdana, arial, helvetica, sans-serif; 
		color : #333333; 
		text-align : left; 
		background-color : #a9d0f5; 
		}
.table-ligne2-gauche{
		font-size : 12px; 
		font-family : Verdana, arial, helvetica, sans-serif;
		color : #333333; 
		text-align : left; 
		background-color : #cee3f6; 
		}
.table-ligne1-centre:hover, .table-ligne1-droite:hover, .table-ligne2-droite:hover,.table-ligne2-centre:hover{
		background-color : yellow; 
}

.table-ligne1-gauche:hover, .table-ligne2-gauche:hover {
		background-color : yellow; 
		font-size: 14px; 
}
	
#cadre {
    border: 1px solid red;
	background-image: linear-gradient( lightblue, #366FBE);// bon pour fuites
	
}

#bloc {
    /* ... */
    margin-left: -20px; /* Simplifie le calcul des positions initiale et finale du bloc */
    animation-name: deplacerBloc; /* Nom de l'animation */
    animation-duration: 6s; /* Durée de l'animation */
    animation-fill-mode: forwards; /* Laisse le bloc dans sa position finale */
}

#ballon {
    position: relative;
    left: 0px;
}
#section 
{
    -webkit-column-count:2; /* Opera, Safari, Google Chrome */
    -moz-column-count: 2; /* Firefox */
    column-count: 2; /* Internet Explorer */
	background-color :#F2F2F2;
}		