body {
		background-color: white;
		color: black;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
		display: grid;
		min-height: 100vh;
		height: 100vh;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		overflow-y: scroll;
		
		background-image: url('./fond.jpg');
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
		background-size:cover;
		}

.coul:nth-child(even) {
  background-color: #f0f0f0;
}
.coul:nth-child(odd) {
  background-color: #ffffff;
}

	.div-gen {
		display:none;
		margin-left:auto;
		margin-right:auto;
		background-color: #EEE;
		max-width: 1000px;
		width: 85%;
	}
	.div-haut {
		grid-column: 1; grid-row: 1;
		padding: 10px;
	}
	.div-bas {
		grid-column: 1; grid-row: 2;
		overflow-y: scroll;
		padding: 10px;
	}
	.bleu {
		color: darkblue;
	}
	.rose {
		color: #b90e6a;
	}
	.grey {
		background-color:grey;
		color:white;
	}
	.grtxt {
		width:100%;
		padding: 10px;
	}
	.grid_top5 {
		display:grid;
		grid-template-columns: 50px 1fr 100px;
	}
	.unecat {
		padding: 0px 10px;
		border-width: 1px; 
		border-style: solid; 
		border-color:black;
	}
	.cr21 {
		grid-column: 1;
	}
	
	.cr22 {
		grid-column: 2;
		text-align:left;
		
	}
	
	.cr23 {
		grid-column: 3;
		text-align:right;
	}

.cr31 {
	grid-column: col-start 1 / span 1;
}
.cr32 {
	grid-column: col-start 2 / span 4;
}
.cr33 {
	grid-column: col-start 6 / span 2;
}
.cr34 {
	grid-column: col-start 8 / span 1;
}
.cr35 {
	grid-column: col-start 9 / span 2;
}
.cr36 {
	grid-column: col-start 11 / span 2;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


	#div-details {
		  background-color: white;
		  width: 500px;
		  margin: auto;
		  padding: 20px;
		  border: 1px solid #888;
		  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	}
	.grid_top_haut {
		display:grid;
		grid-template-columns: 1fr 80px;
	}
	.grid_top_haut_m {
		display:grid;
		grid-template-columns: 1fr 200px;
	}
	.cr11 {
		grid-column: 1;
	}
	
	.cr12 {
		grid-column: 2;
		text-align:right;
		font-size: 14pt;
	}
	.gr_fond_picto {
		background-color:blue;
		width:64px;.cr35 {
	grid-column: col-start 9 / span 2;
}

		border-radius:5px;
	}
	#msg {
		width: 599px;
		height: 599px;
		background-color: #DDD;
		padding: 20px;
	}
@media only screen and (max-width:450px)
{
	.grid_page {
		display: grid;
		grid-template-columns: repeat(7, [col-start] 1fr);
		font-size: 12pt;
		padding: 1px;
	}

.cr36 {
display:none
}
.cr35 {
	grid-column: col-start 1 / span 5;
	grid-row:2;
}

}