.no-select{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
}




/**********************/
/*** TABLEAU .BASIC ***/
/**********************/

/* STYLE "BASIC" DES TABLEAUX */
table.basic{
	/* position */
	/*width: calc( 100% - 2*1em );*/
	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 td{ display: none; }
table.basic thead + tbody td.more{ display: block; }
table.basic thead.active + tbody td{ display: table-cell; }




table.basic tr td,
table.basic tr th,
#DRAGNDROP td,
#DRAGNDROP 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;
}

table.basic tr td.more:before{ content: 'Voir plus'; }
table.basic thead.active + tbody tr td.more:before{ content: 'Voir moins'; }

/* 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; font-size: 1.05em; }
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;
}



/******************/
/*** PARAGRAPHS ***/
/******************/
#CONTAINER section > p{
	/* position */
	padding: 1em;
	margin-left: 1em;
	
	/* border */	
	border-radius: 3px;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 3px #ddd;

	/* background */
	background-color: #fff;
}

#CONTAINER section > p:before{
	content: '';
	/* position */
	display: block;
	position: absolute;
		top: calc( 2.7em - 3px );
		left: calc( 1.1em - 5px );

	/* border */
	border: calc(1em + 3px) solid transparent;
	border-right-color: #ddd;

	/* Z */
	z-index: -1;
}

#CONTAINER section > p:after{
	content: '';
	/* position */
	display: block;
	position: absolute;
		top: 2.7em;
		left: 1.1em;

	/* border */
	border: 1em solid transparent;
	border-right-color: #fff;

	/* Z */
	z-index: 2;
}