body {
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
}

.flex-container {

    display: flex;
	flex-wrap: wrap;
    justify-content: space-evently;  
    align-items:flex-start;
	align-content:flex-start; 
    flex-direction: column; 
	width: 200px;
	font-family: "calibri";
	font-size: 15px;	
    padding: 5px;
	height: 95vh;
	row-gap: 2%;
	overflow: no;

}

.flex-container > div{
    padding: 10%;
  }

td {
	border: 1px solid #000;
}


table tr:last-child td:first-child {
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	height: 2px;
}

table tr:last-child td:last-child {
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
}

.item:hover{
	transform:scale(1.1);
	opacity:0.8;
	transition: .3s ease-in-out;
}

#temp {
	position: absolute;
	left: 50%;
	top: 2%;
	width: 250px; /* largeur obligatoire pour être centré */
	font-family: "calibri";
	font-size:15px;	
	  }

.Jrestants {
	 max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}
.Couleur:hover ~ .Jrestants {
     max-height: 30px; /* Assurez-vous que cette valeur est suffisante pour le contenu des lignes */
    opacity: 1;
}