:root {
	--black_base_color: #373737;
	--black_dark_color: black;
	--white_color: white;
	--grey_light_color:#dbd7d7;
	--grey_base_color:#a4a4a4;
	--grey_dark_color: #747272;
	
	--primary_base_color: #9ab393;
	--primary_light_color: #f5f7ed;
	--primary_dark_color: #53604f;
	
	--secondary_base_color: #8A8578;
	--secondary_light_color: #eeeae6;
	--secondary_dark_color: #605B50 ;

	--tertiary_base_color: #e8ccb3;
	--tertiary_light_color: #F3E3D4;
	--tertiary_dark_color: #705843;
	
	--success_color:#4CAF50;
	--error_color:#A52A2A;
	--error_light_color:#f8d7da;
	
	/*
	--primary_base_color: #9ab393;
	--primary_light_color: #f5f7ed;
	--primary_dark_color: #53604f;
	
	--secondary_base_color: #C49A6C;
	--secondary_light_color: #eeeae6;
	--secondary_dark_color: #7c6859;

	--tertiary_base_color: #A3B8C8 ;
	--tertiary_light_color: #ccdce7;
	--tertiary_dark_color: #617782;
	*/
}

/* Reset */
* {
	box-sizing: border-box; /* compte le padding + bordures internes pour les dimensions des elements */
	outline: none;
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
	padding: 0px;
}

textarea {
	resize: vertical;
}

input[type="submit"] {
    cursor: pointer;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--success_color); /* couleur de la coche moderne */
  cursor: pointer;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 5px 0px;
	font-size: 16px;
}

table thead th {
	border: 1px solid var(--grey_dark_color);
	background-color: var(--grey_base_color);
	color: var(--white_color);
	padding: 12px;
	text-align: center;
}

table tbody td {
	border: 1px solid var(--secondary_base_color);
	padding: 10px;
	text-align: left;
}

table tbody tr:nth-child(even) {
	background-color: var(--white_color);
}

table tbody tr:hover {
	background-color:var(--tertiary_light_color);
}

table .centre {
	text-align: center;
}

/* Responsive table */
@media screen and (max-width: 768px) {
	table, thead, tbody, th, td, tr {
		display: block;
	}

	thead {
		display: none;
	}

	tr {
		margin-bottom: 10px;
		border-bottom: 1px solid var(--white_color);
	}

	td {
		padding-left: 50%;
		position: relative;
	}

	td::before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		padding-right: 10px;
		white-space: nowrap;
		font-weight: bold;
	}
}