/* STYLE "BASIC" DES TABLEAUX */
table.basic{
	/* position */
	margin: 2em 1em;

	/* border */
	border-radius: 5px;
	border-spacing: 0; 
	box-shadow: 0 0 4px #e3e3e3;
}

/* affichage du corps si tête activée */
table.basic thead + tbody{
	display: block;
	max-height: 3em;
	overflow: hidden;

	transition: max-height .5s 0s ease-in-out;
	-moz-transition: max-height .5s 0s ease-in-out;
	-webkit-transition: max-height .5s 0s ease-in-out;
	-ms-transition: max-height .5s 0s ease-in-out;
	-o-transition: max-height .5s 0s ease-in-out;
}
table.basic thead.active + tbody{
	max-height: calc( 3*40em );
}




table.basic tr td,
table.basic tr th{
	/* position */
	padding: 1em 1.5em;

	/* border */
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #e0e1e3;
	
	/* backgroud */
	background-color: #fff;

	/* foreground */
	color: #4e4e4e;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;

	/* extra */
	cursor: default;
}

/* la ligne "Voir plus" */
table.basic tr td.more{
	/* background */
	background: #f7f8fc url(../src/more.svg) right 1em center no-repeat;
	background-size: auto 1.5em;

	/* foreground */
	color: #b7b7b7;
	text-align: right;
	padding-right: 3em;

	/* extra */
	cursor: pointer;
}

/* on cache "voir plus" quand le tableau est déroulé */
table.basic thead.active + td.more{ display: none; }


/* différence avec <thead> */
table.basic tr th{ background-color: #f7f8fc; }
table.basic tr th:first-letter{ text-transform: uppercase; }


/* on ajoute les rebords pour ceux à gauche */
table.basic tr td:first-child,
table.basic tr th:first-child{ border-left-width: 1px;   }
/* on ajoute les rebords pour ceux en bas */
table.basic tr:last-child td { border-bottom-width: 1px; }


/* angle haut gauche */ 
table.basic tr:first-child th:first-child{ border-radius: 5px 0 0 0; }
/* angle haut droit */ 
table.basic tr:first-child th:last-child { border-radius: 0 5px 0 0; }
/* angle bas gauche */ 
table.basic tr:last-child td:first-child { border-radius: 0 0 0 5px; }
/* angle bas droit */ 
table.basic tr:last-child td:last-child  { border-radius: 0 0 5px 0; }

/* @hover */
table.basic tr:hover td{
	background-color: #f7f8fc;
	color: #333;
}