body {
	text-align: left;
	margin: 0px;
	background-color: black; 
	color: white;

	font-family: 'Neue-Haas-Grotesk-Text-Pro',Helvetica, Arial, sans-serif ;

	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.025em;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

a:link{ color: black; text-decoration: none; }
a:active{ color: black; text-decoration: none; }
a:visited{ color: black; text-decoration: none; }
a:hover{ color: black; text-decoration: none; }



/* GRILLE */

#content{ 
	width: 100%;
	margin-top: 0px;
}

.element{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
}

.element img{ 
	max-width: 100%;
	position: relative;
	display: block; 
}

.element.link{ 
	display: none; 
}

.element.text{ 
	padding-top: 6px;
	margin-bottom: 40px;
	padding-left: 5px;
	margin-bottom: 6vw;
	width: 100%;
	display: block;
 }

.element.text p{
	margin: 0px;
	padding: 0px 0px;
}

.element.text p:before{
	/*content: "↑ "*/
}

.element.image{ 
	display: inline-block;
	width: 50%;
	margin-top: -4px;

}

.element.imageBig{ 
	display:block;
	width: 100%;
/*	margin-left: 15%;*/
	margin-top: -4px;
}

.element.videoBig{
		display:block;
	width: 100%;
/*	margin-left: 15%;*/
	margin-top: -4px;
}
.element.videoBig video{
		display:block;
	width: 100%;
}

.element.text:first-child {
		margin-bottom: 20px;
		margin-top: 0px;
 }


/* FIN GRILLE */








 	.web{ 
		background-color: gold; 
		border-radius: 4px; 
		border:1px solid gold; 
		padding: 1px 3px; 
		color: black;
	}

	.typo{ 
		background-color:tomato; 
		border-radius: 4px; 
		border:1px solid tomato; 
		padding: 1px 3px; 
		color: black;
	}

	.id{ 
		background-color: turquoise; 
		border-radius: 4px; 
		border:1px solid turquoise; 
		padding: 1px 3px; 
		color: black;
	}

	.print{ 
		background-color: palegreen; 
		border-radius: 4px; 
		border:1px solid palegreen; 
		padding: 1px 3px; 
		color: black;
	}

	.pedagogie{ 
		background-color: violet; 
		border-radius: 4px; 
		border:1px solid violet; 
		padding: 1px 3px; 
		color: black;
	}



	.btnWeb{ 
		background-color: gold; 
		border-radius: 4px; 
		border:1px solid gold; 
		padding: 1px 3px; 
		cursor: pointer;
	}

	.btnTypo{ 
		background-color:tomato; 
		border-radius: 4px; 
		border:1px solid tomato; 
		padding: 1px 3px; 
		cursor: pointer;
	}

	.btnId{ 
		background-color: turquoise; 
		border-radius: 4px; 
		border:1px solid turquoise; 
		padding: 1px 3px; 
		cursor: pointer;
	}

	.btnPrint{ 
		background-color: palegreen; 
		border-radius: 4px; 
		border:1px solid palegreen; 
		padding: 1px 3px; 
		cursor: pointer;
	}

	.btnPedagogie{ 
		background-color: violet; 
		border-radius: 4px; 
		border:1px solid violet; 
		padding: 1px 3px; 
		cursor: pointer;
	}

	body{
/*		background-color: black;
		color: white;*/
		/*background-image: url(image/bg.jpg);*/
		/*background-repeat: no-repeat;*/
		/*background-size: 100%;*/
	}

a:link{ color: white; text-decoration: none; }
a:active{ color: white; text-decoration: none; }
a:visited{ color: white; text-decoration: none; }
a:hover{ color: white; text-decoration: none; }

	.qui a{ font-style: italic; color: white; }
	.qui i{ font-style: italic; color: white; }

.nolink{ color: grey; }

.nolink a{color: grey; }
.nolink i{color: grey; }

	.web.inactive{ 
		background-color: black; 
		border-radius: 4px; 
		border:1px solid gold; 
		padding: 1px 3px; 
		color: gold;
	}
	.typo.inactive{ 
		background-color: black; 
		border-radius: 4px; 
		border:1px solid tomato; 
		padding: 1px 3px; 
		color: tomato;
	}
	.id.inactive{ 
		background-color: black; 
		border-radius: 4px; 
		border:1px solid turquoise; 
		padding: 1px 3px; 
		color: turquoise;
	}
	.print.inactive{ 
		background-color: black; 
		border-radius: 4px; 
		border:1px solid palegreen; 
		padding: 1px 3px; 
		color: palegreen;
	}
	.pedagogie.inactive{ 
		background-color: black; 
		border-radius: 4px; 
		border:1px solid violet; 
		padding: 1px 3px; 
		color: violet;
	}

	.ok{ 
	    border-radius: 15px;
	    background-color: white;
	    border: 1px solid white;
	    width: 8px;
	    height: 8px;
	    display: block;
	}

	.non{ 
	    border-radius: 15px;
	    background-color: black;
	    border: 1px solid white;	    
	    width: 8px;
	    height: 8px;
	    display: block;
	}

	.tab{ position: relative; display: inline-block; width: 100px; }

	#sandclock {

	display: none;
	position: fixed;	
	bottom: 5px;
	left: 50%;
	margin-left: -30px;
	/*margin-top: -65px;*/

  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-name: sandclock;
  animation-timing-function: ease-in-out;
}

@keyframes sandclock {
  from {
  transform: rotate(0deg); /* Équivalent à rotateZ(45deg) */
  }

  to {
  transform: rotate(360deg); /* Équivalent à rotateZ(45deg) */

  }
}