@font-face
{
    font-family: "FontINFO";
    src:url("led.otf");
}

html, body, main
{
	background-color: #fdebd0;
	font-family:sans-serif;
	font-size: 1.1em;
	text-align:justify;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}




/***********/
/* HEADER  */
/***********/
header
{
	text-align: left;
	margin:20px;
	padding:10px;
	cursor:default; 
	white-space:nowrap;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
}


header > table > tbody
{
/*	color : blue; */
	vertical-align: top;
}
.bordure
{
	width:25%; 
}	
h1
{
	text-align: left;
	margin:0px 20px 20px 20px;
	padding:10px;

	color:black;
	border-radius: 10px;
	box-shadow: 10px 10px 5px #444;
	background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);	
	
}	


/**********/
/* COMMON */
/**********/

.link  
{
	color : blue;	
}

.right
{
float:right;	
}

span.link 
{ 
    padding: 2px;	
	text-decoration: none;
}





.link:hover  {
	cursor:pointer;
	border-bottom: 2px solid blue;
}

.linki 
{ 
	cursor:pointer;
}

.linki >img
{
	padding: 0px 3px 3px 3px;  
}

.linki:hover>img {
	cursor:pointer;
	border-bottom: 2px solid blue;
	box-shadow: 0 0 2px 2px blue;
	padding: 0px 3px 1px 3px;  

}




/********/
/* BODY */
/********/

section 
{
	margin : 20px 20px 20px 20px; 
}
section > p
{
	text-align : center;
}


li
{
	list-style-type: none;
	margin : 0px 0px 10px 0px; 
	
}

section > table  
{
	margin: auto;
	width: 90%;
	font-size : 16px;
	
}

section > table > tbody > tr 
{
	vertical-align: text-top;
	margin: auto;
	width: 100%;
	padding: 10px;
}

section > table > tbody > tr > td > table
{
/*	margin : 10px 20px 20px 20px; */
	border: none;
	width: 90%; 
	border-radius: 10px;
	box-shadow: 10px 10px 5px #444;
	background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);	
}


section > table > tbody > tr > td > table > tbody > tr > td
{
	vertical-align: text-top;
	padding: 0px 20px 10px 20px;
}


h2 
{
	font-size : 24px;
}


/*********/
/* VIDEO */
/*********/


section.boxvideo {
	background-color: #fdebd0;		
	display: flex;
	align-items: center;
	justify-content: center;		
	text-align: center;
	margin: auto;
	border : 1px solid black;
	overflow: hidden;
}

div.vid {
	background-color: #fdebd0;	
	position: relative;
	top : 0px;
	width: 400px;
	height: 200px;
}

div.vidhid {

	animation-name: efface;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;		
	
}
div.vidend {
	background-color: #fdebd0;	
	position: relative;
	top : -201px;
	width: 400px;
	height: 0px;
}


video {
	height: 200px;
	outline : 1px solid black;
}

@keyframes efface {
  0% {top: 0px; 	height: 200px;}
  100% {top: -200px; height: 1px;}
}



/**********/
/* FOOTER */
/**********/
.bouton
{
	font-size:16pt;
	font-weight:normal;
	text-align: center;
	border:2px groove Grey;
	border-radius:5px;
	vertical-align: 2px;
	cursor:pointer;
	color:white;
	text-shadow: 4px 4px 4px rgb(0,106,160);
	margin:1px 4px 1px 4px;
	padding:4px 12px 4px 8px;
	background: -webkit-linear-gradient(#fdebd0,  #fae5d3 ); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#fdebd0,  #fae5d3 ); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#fdebd0,  #fae5d3 ); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#fdebd0,  #fae5d3 ); /* Standard syntax */
}
.bouton:hover
{
	border:2px outset Grey;
	padding:3px 13px 5px 7px;
}
.bouton:active
{
	border:2px inset Grey;
	padding:4px 12px 4px 8px;
}
.courriel::before
{
	content:url("./ICO/mail.png"); 
}
.courriel:hover::before
{
	content:url("./ICO/mail-.png"); 
}

footer
{
	text-align: center;
	cursor:default;
	white-space:nowrap;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
	/* dim & pos */
	height: 50px;
}

span.compteur
{
	border:2px solid black;
	border-radius:3px;
	color:Lime;
	cursor:not-allowed;
	background-color:Black;
	font-family:FontINFO,sans-serif;
	margin:1px 4px 2px 4px;
	padding:7px 4px 4px 4px;
}