body {font-family: verdana,arial,helvetica,sans-serif; font-size:9pt;}
/* ================================================================ */
body {
	--cellheight: 2.4em;
	--main-bg-color: brown;
	--couleur1: yellow;
	--couleur2: red;
	--couleur3: grey;
	--coul1h: 80;
	--coul1s: 50%;
	--coul1l: 50%;
	--coul1: hsl(
		var(--coul1h), 
		var(--coul1s), 
		var(--coul1l)
		);
	--coul2h: 50;
	--coul2s: 60%;
	--coul2l: 60%;
	--coul2: hsl(
		var(--coul2h), 
		var(--coul2s), 
		var(--coul2l)
		);
	--coul3h: 200;
	--coul3s: 60%;
	--coul3l: 70%;
	--coul3: hsl(
		var(--coul3h), 
		var(--coul3s), 
		var(--coul3l)
		);
}

#chonogramme_maindiv {
	margin:5px; 
	padding:5px;
	}
#chonogramme_maindiv h1 {
	color:white;
	text-align:center;
	background-color:#21C0DD;
	padding:20px 0 20px 0;
	}

/* la numérotation commence à 1 */
#paratests  div{
	display:inline;
	width:50px;
	padding:0 5px 0 5px;
	}
	
/* JEU DE COULEURS */
/* =================== */
.cc11 {background-color: var(--coul1);}
.cc12 {
	background-color:hsl(
		var(--coul1h), 
		var(--coul1s), 
		calc( calc(var(--coul1l) / 2) + 50%)
		);
		}
.cc16 {
	background-color:hsl(
		var(--coul1h), 
		calc(var(--coul1s) / 2),
		calc( calc(var(--coul1l) / 3) + 66%)
		);
		}
.cc10 {
	color:white;
	background-color:hsl(
		var(--coul1h), 
		calc( calc(var(--coul1s) / 2) + 50%),
		calc(var(--coul1l) / 2)
		);
		}
.cc1c0 {
	background-color:hsl(
		var(--coul1h), 
		calc(var(--coul1s) * 0.8),
		calc( calc(var(--coul1l) / 4) + 75%)
		);
		}
/*================*/
.cc21 {background-color: var(--coul2);}
.cc22 {
	background-color:hsl(
		var(--coul2h), 
		var(--coul2s), 
		calc( calc(var(--coul2l) / 2) + 50%)
		);
		}
.cc26 {
	background-color:hsl(
		var(--coul2h), 
		calc(var(--coul3s) / 2),
		calc( calc(var(--coul2l) / 3) + 66%)
		);
		}
.cc20 {
	color:white;
	background-color:hsl(
		var(--coul2h), 
		calc( calc(var(--coul2s) / 2) + 50%),
		calc(var(--coul2l) / 2)
		);
		}
.cc2c0 {
	background-color:hsl(
		var(--coul2h), 
		calc(var(--coul2s) * 0.8),
		calc( calc(var(--coul2l) / 4) + 75%)
		);
		}
/*================*/
.cc31 {background-color: var(--coul3);}
.cc32 {
	background-color:hsl(
		var(--coul3h), 
		var(--coul3s), 
		calc( calc(var(--coul3l) / 2) + 50%)
		);
		}
.cc36 {
	background-color:hsl(
		var(--coul3h), 
		calc(var(--coul3s) / 2),
		calc( calc(var(--coul3l) / 3) + 66%)
		);
		}
.cc30 {
	color:white;
	background-color:hsl(
		var(--coul3h), 
		var(--coul3s), 
		calc(var(--coul3l) / 2)
		);
		}
.cc3c0 {
	background-color:hsl(
		var(--coul3h), 
		calc(var(--coul3s) / 2),
		calc( calc(var(--coul3l) / 4) + 75%)
		);
		}

#tablechrono td {
	border-bottom:1px solid;
	height:var(--cellheight);
	line-height:100%;
	}
#tablechrono0 td {border-color:white}
#tablechrono1 td {border-color:grey}

/* couleurs partie de gauche */

#tablechrono0titre td{
	background-color:grey;
	}

#tablechrono0projets td{
	color:white; 
}

#tablechrono0projets a:link{color:lightblue;}
#tablechrono0projets a:visited{color:Thistle;}
#tablechrono0projets a:hover{font-weight:600;color:white;}

/* couleurs entête années */

#tablechrono_an td:nth-child(even) {
	background-color:hsl(240,20%,95%);
	color:black;
	}
#tablechrono_an td:nth-child(odd) {
	background-color:hsl(240,20%,85%);
	color:black;
	}
#tablechrono_an td{text-align:center;}

/* ======================== */
/* positionnement */
/* ======================== */

/* partie de gauche */

#tablechrono0 {
	position:absolute; 
	left:10px; 
	width:200px;
	}
	
#tablechrono0 td {
	width:200px;
	color:white; 
	text-align:right;
	padding-right:0.5em;
	}

#tablechrono0titre {
	width:200px;
	}

/* Partie de droite */

divphases table{width:100%;}

#tablechrono1 {
	position:absolute; 
	left:213px; 
	width:calc(100% - 220px);
	overflow:auto;
	}

#tablechrono1 td {
	padding-left:0.5em;
	padding-right:0.5em;
	}

td {vertical-align:middle;}
table {border-spacing:0;}

#tablechrono_an td {
	height:calc(var(--cellheight) + 2px);
	width:60px;
	padding:0px;}

#tablechrono_an  { 
    border-spacing: 0;
    /* remplace l'ancien cellspacing */
    /* border-collapse: separate; */
}

/* ================== */

#test > div{
width:300px;
height:100px;
border: solid 1px green;
postion: absolute;
left: 25px;
top: 25px;
z-index:100;
color:coral; 
}

/* gestion des infobulles */

#divphases td {
	position: relative;
	/* display:inline-block; */
	}

#divphases td span {
	color:brown;
	font-weight:600;
}

#divphases td:hover div {
		display:block;
	}
	
#divphases td > div {
	display:none;
	border:solid 2px darkblue;
	border-radius: 10px;
	background-color: hsla(60, 100%, 80%, 0.9);
	line-height:120%;
	padding:0.5em;
	color:brown;
	position: absolute;
	z-index: 999;
	margin: 0 auto;
	left: -20px;
	// right: 0;
	top:-20px; /* Adjust this value to move the positioned div up and down */
	text-align: center;
	width: 240px; /* Set the width of the positioned div */
}