/* VARIABLES */
:root{}

/* BOTH */
body, html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: white;
	font-family: 'futura';
	letter-spacing: 1px;
	font-size: 1rem;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
}
::-moz-selection { /* Code for Firefox */
  color: white;
  background: transparent;
}

::selection {
  color: white;
  background: transparent;
}

* {
  box-sizing: border-box;
}
h1, h2, h3, span, p, a, ul, li, nav{
	margin: 0;
	padding: 0;
	font-size: 1rem;
	text-decoration: none;
}
h1, h2, h3{
	font-weight: normal;
}
span, p{
	font-weight: normal;
}
a{
	text-decoration: none;
	color: white;
}
ul{list-style-type: none;}
li{}
header, main, footer, #introduction{
	position: relative;
	display: table;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid white;
	z-index: 1;
}
header{background-color: transparent;}
aside{background-color: transparent;}
main{background-color: transparent;}
footer{background-color: transparent;}

header{
	height: 3rem;
	padding: 1rem;
	white-space: nowrap;
}
#header-title{
	height: 100%;
	width: 50%;
	display: inline-block;
}
#nav-button{
	height: 100%;
	width: 50%;
	display: inline-block;
	text-align: right;
	cursor: pointer;
	margin-right: 0.56rem;
}
#buttonone:hover {
	color: rgba(0,0,0,.5);
}
#buttontwo:hover{
	color: rgba(0,0,0,.5);
}
#introduction{
	display: none;
	background-color: transparent;
}
#introduction p{
	margin: 2rem;
}
.surligne:hover {
	border-bottom: 2px solid;
}

aside{
	position: fixed;
	top: -10vh;
	left: 0px;
	width: 100vw;
	height: 120vh;
	/*background-color: orangered;*/
	z-index: 0;
}


article{
	background-color: transparent;
	cursor: pointer;
}

.autocursor{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	background-color: white;
	opacity: 0.25;
	border-left: solid;
	border-width: 1px;
	pointer-events: none;
}
.handlercursor{
	width: 2rem;
	height: 100%;
	background-color: white;
	position: absolute;
	z-index: 999;
	opacity: 0.5;
	cursor: e-resize;
}

.block-entete{
	position: relative;
	display: table;
	height: 100px;
	width: 100%;
	background-color: none;
	z-index: 200;
	text-align: left;
	padding: 1rem;
	line-height: calc(100px - 2rem);
}
.block-titre, .block-time, .block-hour, .buttonplay{
	position: relative;
	display: inline-block;
	padding-right: 0.56rem;
	padding-left: 0.56rem;
}
.block-titre{}
.block-time{}
.block-hour{}
.buttonplay{
	/*float: right;*/
	pointer-events: all;
}
.block-hidden{
	top: 100%;
	position: absolute;
	display: none;
	height: 100%;
	width: 100%;
	color : black ;
	z-index: 999;
	background-color: transparent;
}
.block-hidden p{
	background-color: white;
	display: inline;
}
.block-description{
	color: black;
}
#context-window{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	height: auto;
	background-color: white;
	z-index: 100000000;
	/* pointer-events: none; */
	display: none;
	border-top: 0px;
}
audio{
	display: none;
}

/* MOBILE */
@media (max-width: 640px) {

	body, html{
		background-color: white;
	}
	#grid{
		display: table;
		height: auto;
	}

	article{
		position: relative;
		display: table;
		border-bottom: 1px solid white;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100px;
		/*padding: 1rem;*/
		overflow : visible;
	}
	.hidden-track{
		display: none;
		background-color: rgba(255,255,255,0.5);
		border-bottom: 1px solid white;
	}
	.block-entete{
		height: 100px;
	}
	.buttonplay{ float: right; }
	.block-hidden{
		height: auto;
		display: none;
	}
	main{
		border-bottom: none;
	}

	header{
		padding: 1rem;
	}
	footer{
		padding: 1rem;
	}
	.autocursor{
		border-left: none;
	}
	.handlercursor{
		border-left: 1px solid white;
		border-right: 1px solid white;
	}
}
/* DESKTOP */
@media (min-width: 640px) {

	body, html{
		background-color: white;
	}
	#grid{
		display: grid;
		align-content: start;
		align-items: start;
		grid-template-columns: repeat(12,1fr);
		/*grid-template-columns: 1fr 1fr 1fr 1fr;*/
		grid-auto-flow: row dense;
		grid-gap: 0rem;

		/*padding-bottom: 100%;*/
		height: auto;
		border-bottom: none;
	}

	article{
		position: relative;
		display: inline-block;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100px;
		/*padding: 1rem;*/
overflow : visible;
		border-bottom: 1px solid white;
	}

	.hidden-track{
		display: none;
		height: auto;
		background-color: rgba(255,255,255,0.5);
		/*background-color: lightblue;*/
		border-bottom: 1px solid white;
	}


	.buttonplay{/*float: right;*/}

	.wr1{grid-column: auto / span 1;}
	.wr2{grid-column: auto / span 2;}
	.wr3{grid-column: auto / span 3;}
	.wr4{grid-column: auto / span 4;}
	.wr5{grid-column: auto / span 5;}
	.wr6{grid-column: auto / span 6;}
	.wr7{grid-column: auto / span 7;}
	.wr8{grid-column: auto / span 8;}
	.wr9{grid-column: auto / span 9;}
	.wr10{grid-column: auto / span 10;}
	.w11{grid-column: auto / span 11;}
	.wr12{grid-column: auto / span 12;}

	.hr1{grid-row: auto / span 1;}
	.hr2{grid-row: auto / span 2;}
	.hr3{grid-row: auto / span 3;}
	.hr4{grid-row: auto / span 4;}
	.hr5{grid-row: auto / span 5;}
	.hr6{grid-row: auto / span 6;}
	.hr7{grid-row: auto / span 7;}
	.hr8{grid-row: auto / span 8;}
	.hr9{grid-row: auto / span 9;}
	.hr10{grid-row: auto / span 10;}
	.w11{grid-row: auto / span 11;}
	.hr12{grid-row: auto / span 12;}

	header{
		padding: 1rem;
	}
	footer{
		padding: 1rem;
	}
}

footer{
	display: block;
	height: 37%;
}

#metas {
	width: 100%;
	position: fixed;
	background-color: rgba(255,255,255,.9);
	z-index: 999;
	bottom: 0;
	color: black;
}