/* Feuille CSS principale de la page principale de WebMedia */
@import url('base.css');
@import url('office.css');

/*
Structure :

#webMedia	
	header#header	
		h1
		div (liens d'evitement)
		div#logo
	aside#tabs
	main#content	
		nav#margin
		div#mediafull
			audio#media
			*OU*
			div#media avec dim
				object#media avec dim
			*OU*
			div#media avec dim
				object#media_object avec dim
			*OU*
			video#media avec dim
		*OU*
		div#media
			audio
			*OU*
			div#flashMedia avec dim
			*OU*
			plusieurs div#flashMedia avec dim
			*OU*
			video avec dim
			*OU*
			video avec dim et audio

	 div#media.mediaContainer avec attributs OU .mediaContainer sans attributs

		#slideshow
			section (plusieurs les uns sur les autres en principe)
				header					
					.segmentTitle				
				.segmentDescIllus							
					article.description	
						p								
					article.illustrations		
						.illustration
							figure			
				.segmentDescComplt
					.segmentNotes
						.segmentNotesContent
					nav (pour les boutons vers complements)
		nav#controller
*/

/* Root conteneur de header#header + aside#tabs + main#content + nav#controller */
div#webMedia {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	font-size: 1.2vw;
	/* IE */
	width: 100%;
	height: 100%;
	background: url("img/main/back-home.png") no-repeat left;
	background-size: 100% 100%;
}


/*
	min-height et min-height à 0 pour suite à un changement de spec
	cf. http://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-x
*/
main#content,
div#slideshow,
nav#controller,
div#controlBar,
section,
aside.segmentCplts,
aside.segmentCplts *{
	min-height: 0;
	min-width: 0;
}

/* ============= HEADER ============= */

header#header {	
	display: -webkit-flex;	
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	border-bottom: 1px solid #dbdbdb;
	height:60px;
	background-color: #ffffff;
}

header h1 {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;	
	font-size: 1.5em;
	padding: 7px 0;
	color: #3b4b5e;
	text-align:center;
}

/* Liens d'évitements */
#accessMenu {
    position: absolute;
    right: 0;
    top: 0;
}
ul#accessibility {	
	list-style: none none;
	margin: 0;
	padding: 0;
	font-size: 0.7em;
}

ul#accessibility a {
	display: block;
	color: #aca19a;	
	text-decoration: none;
	font-weight: normal;
	opacity:0.2;
}

ul#accessibility a:focus,
ul#accessibility a:hover {
	opacity:0.5;
}

ul#accessibility > li {
	display:inline-block;
	margin:0 1em;
}

/* Contenenur des logos */
header#header > div#logo {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	margin: 0.3ex 0.5ex;
}

/* Logos */
header#header > div#logo > img {
	margin: 0 0.5ex;
	vertical-align: middle;
	height: 3.5em;
	width: auto;
}
	
/* Extra */
aside#tabs {
	display: -webkit-flex;
	display: flex;
	background-color: #ececec;
    border-bottom: 1px solid #dbdbdb;
	font-size: 1.1em;
}

/* Extra */
/* Version accessible http://letrainde13h37.fr/44/menu-deroulant-accessible-css/ */

aside#tabs ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

aside#tabs ul li {
	display: flex;
	position: relative /* Crée un contexte de positionnement pour les sous-listes */
}

aside#tabs a,
aside#tabs li > span {
	display: block;
	padding: 0.5em;
	color: #484848;
	text-decoration: none;
	font-weight: normal;
}

aside#tabs > ul {
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

aside#tabs ul ul {
	-webkit-flex-direction: column;
	flex-direction: column;
	position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
	margin-top: 2.1em; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l'un à l'autre */
	z-index: 3;
	right: 0;
}

aside#tabs a:focus,
aside#tabs a:hover {
	color: #dc291e;
}

aside#tabs ul ul li span {
	display: block;
	width: 10em;
}

aside#tabs ul li a {
	text-align: left;
	color: #484848;
}

/* Extra info */
aside#tabs li.infos_li {
	display: -webkit-flex;
	display: flex;
}

aside#tabs a.infos {
	background-image: url('img/main/infos.svg');
	background-repeat: no-repeat;
	background-size: auto 80%;
	background-position: center center;
	width: 1.5em;
	height: 1.2em;
}

aside#tabs a.infos:hover,
aside#tabs a.infos:focus {
	background-image: url('img/main/infosOver.svg');
}

aside#tabs a.infos span {
	position: absolute;
	left: 100vw;
	right: 100vw;
	height: 0;
	padding: 0;
	border: none;
	overflow: hidden;
}

/* Réduit cette boîte à un carré d'1px de côté, dont le texte est déporté loin à gauche */
aside#tabs ul ul li a {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-out;	
}

aside#tabs ul ul li a:focus,
aside#tabs ul li:hover ul li a,
aside#tabs ul li ul:hover li a {
	margin: 4px 0 -2px 0;
	position: static;
	left: auto;
	width: auto;
	height: auto;
	overflow: visible;
	border: 1px solid #dbdbdb;
	opacity: 1;
	right: 0;
	background-color: #ececec;
}
	

/* ============= CONTENT ============= */
/* Main conteneur des complements noToc + div#mediaFull + contenu (div#slideshow)	*/
main#content {
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	display: -webkit-flex;
	display: flex;		
	-webkit-flex-direction: row;		
	flex-direction: row;		
	position: relative;
	padding-top: 2.6em;
	margin: 0.5em;
}

/* With Toc Conteneur (nav#margin) + div#mediaFull + div#slideshow */
div#main.withToc nav#margin {
	-webkit-flex:1 1 0px;
	flex:1 1 0px;
	max-width: 300px;
	height: 100%;
}		

/* ============= MEDIA ============= */

div#mediafull[data-currenttype=video],
div#media[data-currenttype=video] {
	-webkit-flex:1 1 auto;
	flex:1 1 auto;	
	display: -webkit-flex;	
	display: flex;
	position: relative;
	margin-right: 0.5em;
	/* Pour centrer en presence de note de marge margin-left: 4.2em;*/
	margin-left: 0.5em;
	transition: max-width 0.4s linear;
	max-width: 100%;
}

div#mediafull[data-currenttype=audio],
div#media[data-currenttype=audio] {
	-webkit-flex: 0;
	flex: 0;
	text-align: center;
}

div#mediafull > video,
div#mediafull > div[data-type=video],
div#media > video,
div#media > div[data-type=video] {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
}

div#mediafull > div[data-type=video] > object,
div#media > div[data-type=video] > object {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
}

button#posterPlayBtn {
	background-image: url('img/main/posterPlay.svg');
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	width: 16vh;
	height: 16vh;
	top: 50%;
	margin-top: -8vh;
	left: 50%;
	margin-left: -8vh;
}

button#posterPlayBtn > span {
	position: absolute;
	left: 100vw;
	right: 100vw;
	height: 0;
	padding: 0;
	border: none;
	overflow: hidden;
}

/*! Est-ce un reste de l'ancien skin ? */
main#content.contentWithToc[data-hascontent] div#media[data-currentType=video],
main#content.contentWithToc[data-hascontent] div#mediafull[data-currentType=video] {							
	display:table-cell;
}

div#media video {
	display: none
}

div#media video[data-active=true] {
	display: block;
}

/* special fallback flash: on agit sur l'object car si on fait varier le visibility sur le div, s'il est hidden, l'objet flash ne semble pas crée et le player ne se lance pas*/
div#media div object { /* par défaut on masque la video pour ne n'afficher que celle qui a data-active=true (plus haut) */
	visibility: hidden !important;
}

div#media div[data-active=true] object { /* par défaut on masque la video pour ne n'afficher que celle qui a data-active=true (plus haut) */
	visibility: visible !important;
}

/*Video + image illustration --> [data-hascontent] */
main#content[data-hascontent] div#media[data-currentType=video],
main#content[data-hascontent] div#mediafull[data-currentType=video]	 {
	-webkit-flex:1 0 auto;
	flex:1 0 auto;
	max-width: 45vw;
}

/* ============= SLIDESHOW ============= */
/* Conteneur slideshow, succession d'articles */
div#slideshow {
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 0;
	flex: 0;
}

main[data-hasCplt]:not([data-hasContent]) #slideshow {
	-webkit-flex: 0 1 11em;
	flex: 0 1 11em;
	margin: 0 0.5em;
}

main[data-hasContent] #slideshow {
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	max-width: 100%;
	margin: 0 0.5em;
}

/* Le slideshow prend tout l'espace dans le cas de l'audio */
div#media[data-currentType=audio] + #slideshow,
div#mediafull[data-currentType=audio] + #slideshow {
	flex: 1 1 100%;
}

/* Conteneur segment */
section {	
	width: 0;
	height: 0;
	visibility: hidden;	
	display: -webkit-flex;	
	display: flex;
	-webkit-flex: 0;
	flex: 0;
	overflow-y: hidden;
	font-size: 1.2em;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

/* header de section - hors du flux */
section > header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

h2.segmentTitle {		
	font-size: 1.1em;
	margin: 0.3em 0.6em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

h2.segmentTitle span.separator {
	margin: 0 0.6em;
}

section[data-state=active] {
	visibility: visible;	
	width: 100%;	
	-webkit-flex: 1 1 0px;	
	flex: 1 1 0px;
	height: auto;
	overflow: visible;
}

/* Alignement des illustrations / descriptions textuelles */
div.illustrationText {
	margin: 0.5em;
}

div.illustrationText p {
	margin: 0.5em 0;
}

div.illustrationText ul {
	padding-left: 2em;
}


/* Segment description */
section[data-state=done] article.description,
section[data-state=idle] article.description,
section[data-state=done] > div.segmentDescComplt,
section[data-state=idle] > div.segmentDescComplt {
	/*obligé de déclencher la modif du left après l'animation sinon les éléments peuvent bouger pendant l'animation*/
	transition:opacity 0.2s ease-in-out 0s;
	opacity: 0;
}


section[data-state=active] article.description,
section[data-state=active] > div.segmentDescComplt {
	/*obligé de déclencher la modif après le fondu de fermeture (0.5s) sinon les éléments peuvent bouger pendant l'animation*/
	opacity: 1;
	transition: opacity 0.5s ease-in-out 0.2s;

}


/* Conteneur description */
div.segmentDescIllus {
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-flex:1 1 100%;
	flex:1 1 100%;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	-webkit-align-self: stretch;
	align-self: stretch;
	max-width: 100%;
	max-height: 100%;
	transition: width 0.4s linear;

}

/*Conteneur description dans le segment avec du texte */
article.description {
	-webkit-align-items: center;
	align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	overflow: hidden;
}

/*Conteneur illustration dans la plage avec des images */
article.illustrations {
	width: 100%;
	-webkit-flex:1;
	flex:1;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	/*margin: 1em;*/
	-webkit-flex-direction: column;
	flex-direction: column;
}

/* Plage d'illustration */
div.illustration {
	height: 0;
	opacity: 0;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

div.illustration .binImgDescIllus {
	z-index: 0
}

div.illustration[data-state=done],
div.illustration[data-state=idle] {
	visibility: hidden;	
	height: 0;
	width: 0;
	transition: opacity 0.2s ease-in-out 0s, 0s visibility 0.2s, 0s width 0.2s, 0s height 0.2s, 0 font-size 0.2s;
	opacity: 0;
	font-size: 0;
}

div.illustration[data-state=active] {
	visibility: visible;
	width: 100%;
	transition: opacity 0.5s ease-in-out 0.2s,0s visibility 0.2s, 0s width 0.2s, 0s height 0.2s, 0 font-size 0.2s;
	-webkit-transition: opacity 0.5s ease-in-out 0.2s,0s visibility 0.2s, 0s width 0.2s, 0s height 0.2s, 0 font-size 0.2s;
	opacity: 1;	
	font-size: 1em;
	max-height: 100%;
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	display: -webkit-flex;
	display: flex;
}

div.illustration[data-state=active] .binImgDescIllus {
	z-index: 1
}

div.illustration[data-state=done] > *:not([data-state]),
div.illustration[data-state=idle] > *:not([data-state]) {
	height: 0;
	width: 0;
	overflow: hidden;
}

div.galleryImg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: -webkit-flex;
	display: flex;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
}

div.galleryImg[data-state=active] {
	opacity: 1;
}

img.binImgDescIllus,
img.binImg {
	display: inline-block;
	width: auto;
	height: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

object.binSwf {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

.binCapDescIllus_ti {
	position: absolute;
	bottom: 5px;
	left: 50%;
	background-color: #FFFFFF;
	border-radius: 3px;
	padding: 3px 5px;
	z-index: 1;
}
	
.binCapDescIllus_co  {
	text-align: center;
}

.binCap_ti {
	font-size: 1em;
	color: gray;
	text-align: center;
}

div.binDesc {
	position: absolute;
	left: 100vw;
	right: 100vw;
	height: 0;
	padding: 0;
	border: none;
	overflow: hidden;
}

#slideshow div.binCap_co {
	position: relative;
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
}

.illustration figure {
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	margin: 0;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-self: stretch;
	align-self: stretch;
}

.descriptionContent .binCap,
.illustrationsContent .binCap {
	text-align: center
}

/*Marge avec notes de marge ou compléments */
div.segmentDescComplt {
	display: -webkit-flex;
	display: flex;	
	-webkit-flex-flow: column nowrap;	
	flex-flow: column nowrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

/* Note de marge */
aside.segmentNotes {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	font-size: 0.9em;
	min-width: 11em;
}

aside.segmentNotes p {
	text-align: right;
}

/* Complement */
aside.segmentCplts {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	margin: 0 1em;
}

aside.segmentCplts > ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

aside.segmentCplts a {
	display: block;
	position: relative;
	margin: 0.6em 0;
	text-align: right;

}

aside.segmentCplts a::after {
	content: "";
	display: inline-block;
	background-image: url(img/main/complt.svg);
	background-size: 100%;
	width: 1.5em;
	height: 1.5em;
}

aside.segmentCplts a > span {
	opacity: 0;
	visibility: hidden;
	transition: right 0.3s ease-out 0.1s, opacity 0.3s ease-out;
	white-space: nowrap;
	background: #484848;
	box-shadow: 0 0 5px #BBBBBB;
	color: #FFFFFF;
	display: block;
	padding: 0.6em 0.8em;
	position: absolute;
	right: 0;
	top: -0.4em;
	/* overflow-y: hidden;*/
	z-index: 2;
}

aside.segmentCplts a:hover > span,
aside.segmentCplts a:focus > span {
	opacity: 1;
	visibility: visible;
	transition: right 0.3s ease-out, opacity 0.3s ease-out 0.05s;
	right: 1.8em;
}


/* ============= SOUS-TITRES ============= */
div#media .subBox,
div#mediafull .subBox {
	position: absolute;
	bottom: 0;
	text-align: center;
	margin-bottom: 1em;
	font-size: 1.5em;
	display: -webkit-flex;
	display: flex;
	padding: 0px 1em;
	box-sizing: border-box;
}

.subBox_co {
	background: rgba(0, 0, 0, 0.7);
	padding: 0.5em;
	border-radius: 0.5em;
	color: #fff;
	text-shadow: -1px -1px 1px #000,  
    1px -1px 1px #000,
    -1px 1px 1px #000,
     1px 1px 1px #000;
	margin: 0 auto;
}

.subDisplay_off {
	opacity: 0;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.subDisplay_on {
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.subBox.subDisplay_on {

}

button.display_off {
	display: none
}

ul.btnsLangList {
	position: absolute;
	width: 10em;
	text-align: left;
	list-style: none;
	margin: 0;
	padding: 0.5em;
	border: 1px solid white;
	background-color: #484848;
	right: 0;
	bottom: 100%;
}

ul.btnsLangList a {
	color: #E7E7E7;
	font-size: 1em;
	background: transparent;
	display: block;
	margin: 0.1ex 0.3ex;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

ul.btnsLangList.subDisplay_off {
	visibility: hidden
}

#controlBar ul.btnsLangList a:hover,
#controlBar ul.btnsLangList a.subSelect_on {
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	color: #484848;
	background: rgba(231, 231, 231, 0.87);
}

/* ============= CONTROLLER ============= */
/* Conteneur des elements de nav (play/pause/Time line/Toc)	*/
nav#controller {
	display: -webkit-flex;
	display: flex;
	z-index: 999;
	position: relative;
}

#controlBar {
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	color: #FFFFFF;
	background: rgba(0, 0, 0, 0) url("img/main/back-bottom.jpg") repeat scroll 0 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
}

#controlBar a,
#controlBar button {
	color: #FFFFFF
}

#timelineBox {
	display: -webkit-flex;
	display: flex;
	vertical-align: middle;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-self: stretch;
	align-self: stretch;
}

#currentTimeLabel,
#totalTimeLabel {
	display: block;
	line-height: 1.4em;
}

#currentTimeLabel {
	border-bottom: 0.1em solid white
}

#timeLabels {
	font-family: monospace;
	font-weight: bold;
	display: -webkit-flex;
	display: flex;
	text-align: center;
	-webkit-flex-direction: column;
	flex-direction: column;
	margin: 0 0.5em;
	-webkit-align-self: stretch;
	align-self: stretch;
	-webkit-justify-content: center;
	justify-content: center;
	font-size: 1em;		
}

/* Ligne de temps */

#timeline {
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	-webkit-align-self: stretch;
	align-self: stretch;
	position: relative;
}

#timelineBox {
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
}

ul.timeSegments,
ul.timeSegments ul {
	display: -webkit-flex;
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;	
}

ul.timeSegments {
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
	border-right: 1px solid #FFFFFF;
}

ul.timeSegments li {
	display: -webkit-flex;
	display: flex;
}

li.timePart {
	-webkit-flex-direction: column;
	flex-direction: column;
}

li.timePart > * {
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
}

li.timePart > a {
	border-left: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}

li.timeSegment {
	border-left: 1px solid #FFFFFF;
}

ul.timeSegments a {
	-webkit-flex: 1;
	flex: 1;
	text-decoration: none;
	transition: background-color 0.4s linear;
	display: block;
}

ul.timeSegments a:focus,
ul.timeSegments a:hover,
ul.timeSegments a[data-active] {
	background-color: #d5d5d5;
}

ul.timeSegments *[data-highlighted] {
	background-color: rgba(232, 235, 237, 1);
	box-shadow: inset 0 0 1px #484848;
}

ul.timeSegments *[data-highlighted]:focus,
ul.timeSegments *[data-highlighted]:hover {
	background-color: #FFFFFF
}

ul.timeSegments a > span {
	display: block;
	position: absolute;
	bottom: 100%;
	right: 0;
	text-align: right;
	font-size: 1em;
	border-radius: 4px 4px 0 0;
	background-color: #484848;
	color: #FFFFFF;
	
	position: absolute;
	left: 100vw;
	right: 100vw;
	height: 0;
	padding: 0;
	overflow: hidden;
}

ul.timeSegments a:focus > span,
ul.timeSegments a:hover > span {
	left: auto;
	right: 0;
	padding: 0.3em;
	overflow: visible;
	height: auto;
}

/* ============= RANGES ============= */
input[type="range"] {
	-webkit-appearance: none !important;
	background-color: transparent;
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 4;
	font-size: 1em;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: white;
	border: solid 1px #484848;
	width: 0.7em;
	height: 0.7em;
	border-radius: 0.6em;
}

input[type="range"]::-moz-range-thumb {
	background: white;
	border: solid 1px #484848;
	width: 0.7em;
	height: 0.7em;
	border-radius: 0.6em;
}

input[type="range"]::-ms-thumb {
	background: white;
	border: solid 1px #484848;
	width: 0.7em;
	height: 0.7em;
	border-radius: 0.6em;
}

input[type="range"]::-moz-range-track {
	opacity: 0
}

input[type="range"]::-ms-track,
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
	color: transparent;
	border: none;
	background: none;
}

/* Seek */

input#seekBtn[type="range"] {
	margin-top: -0.4em;
	height: 0.8em;
	width: calc(100% + 0.8em);
	left: -0.4em;
	position: absolute;
	display: block;
}

/* Volume */
div.volumeBk {
	width: 4em;
	height: 0.2em;
	cursor: pointer;
	border: 1px solid #aaa;
	display: inline-block;
	border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-o-border-radius: 0.2em;
	background-color: #FFFFFF;
	box-shadow: inset 0 4px 4px rgba(0,0,0,.6);
	position: relative;
	margin-right: 0.3em;
}

div#volumeValue {
	height: 0.2em;
	border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-o-border-radius: 0.2em;
	background-color: #FFFFFF;
}

input#volumeBtn[type="range"] {
	position: absolute;
	height: 0.8em;
	top: -0.3em;
	width: 100%;
	font-size: 0.9em;
}

/* ============= BOUTONS ============= */
#playerBtns,
#playerTools {
	white-space: nowrap
}

button {
	display: block;
	height: 2.6em;
	width: 2.8em;
	margin: 0.4em 0.3em;
	border: 0;
	cursor: pointer;
	cursor: hand;
	position: relative;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 80% 80%;
	background-position: center;
	overflow: hidden;
	padding: 0;
	color: white;
	font-weight: bold;
	font-size: 1em;
}

button[disabled],
nav#controller[data-state=seeking] button#playPauseBtn {
	cursor: default;
	opacity: 0.5;
}

button:not([disabled]):hover {
	background-size: 90% 90%;
	transition: background-size 0.2s ease-out;
}

nav#controller button span {
	position: absolute;
	left: 100vw;
	right: 100vw;
	height: 0;
	padding: 0;
	border: none;
	overflow: hidden;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    from {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}


/* Utilisation d'un :after positionné en absolu car la rotation directe du bouton fait varier la taille */
nav#controller[data-state=seeking] button#playPauseBtn:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url('img/main/loading.svg');
	background-size: auto 2em;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-animation: spin 0.8s linear 0s infinite;
	animation: spin 0.8s linear 0s infinite;
}

nav#controller[data-state=paused] button#playPauseBtn {
	background-image: url('img/main/play.svg');
}

nav#controller[data-state=playing] button#playPauseBtn {
	background-image: url('img/main/pause.svg');
}

button#nextBtn {
	background-image: url('img/main/next.svg');
}

button#previousBtn {
	background-image: url('img/main/previous.svg');
}

button#tocDisplay {
	height: 2.4em;
	background-image: url('img/main/toc.svg');
}

button#tagsDisplay {
	height: 2.4em;
	background-image: url('img/main/tag.svg');
}

button#muteBtn {
	background-image: url('img/main/mute.svg');
	height: 2.5em;
}

button#muteBtn[data-checked] {
	background-image: url('img/main/muted.svg');
}

button#nonContinuousPlayBtn {
	border: solid 1px transparent;
	background-image: url(img/main/nonContinuousPlay.svg);
	width: auto;
	padding: 0.3em 0.3em 0.3em 2.5em;
	background-position: 0.3em center;
}

button#nonContinuousPlayBtn span {
	position: static !important;
}

button#nonContinuousPlayBtn[data-checked] {
	border: solid 1px white;
	transition: border-color 0.2s linear;
}

button.transcriptBtn,
button.audiodescBtn,
button.altvideoBtn,
button.subtitlesBtn {
	height: 2em;
}

button.transcriptBtn {
	background-image: url(img/alt/transcript.svg);
}
button.transcriptBtn[data-checked] {
	background-image: url(img/alt/transcriptOn.svg);
}

button.audiodescBtn {
	background-image: url(img/alt/audioDesc.svg);
}
button.audiodescBtn[data-checked]  {
	background-image: url(img/alt/audioDescOn.svg);
}

button.altvideoBtn {
	background-image: url(img/alt/altVideo.svg);
}
button.altvideoBtn[data-checked] {
	background-image: url(img/alt/altVideoOn.svg);
}

button.subtitlesBtn {
	background-image: url(img/alt/subtitles.svg);
}
button.subtitlesBtn[data-checked] {
	background-image: url(img/alt/subtitlesOn.svg);
}

/* ============= MARGE GAUCHE ============= */
#margin {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	width: 20vw;
	min-width: 20em;
	max-width: 25em;
}
#marginToc,
#marginTags {
	position: relative;
	background-color: #ececec;
	overflow: auto;
	z-index: 2;
	-webkit-flex: 1;
	flex: 1;
	margin: 0.3em 0 
}

#marginToc #toc ul {
	font-size: 0.9em;
	padding-left: 0;
}

#marginToc #toc ul ul {
	padding-left: 1.5em;
}


#marginToc #toc ul a {
	margin: 0.5em 0;
}

#marginToc #toc,
#marginTags #tags {
	padding: 0.2em 0.6em;
}

/* ============= SOMMAIRE ============= */

/* Controlleur */

#timelineToc,
#timelineTags,
.transcript {
	color: #484848;
	/* height: 0; */
	bottom: 100%;
	width: 80%;
	left: 10%;
	transition: height 0.3s ease-out;
	overflow: hidden;
	visibility: hidden;
	background-color: #ececec;
	border-width: 0;
	border-style: solid;
	border-color: transparent;
	z-index: 3;
	position: absolute;
}

#timelineToc.active,
#timelineTags.active,
.transcript.active {
	height: 40vh;
	visibility: visible;
	border: solid 1px white;
}

.transcriptTxt {
	padding: 1ex 1em;
}

#toc, #tags, .transcriptTxt {
	overflow: auto;
}

nav#controller #toc, nav#controller #tags, nav#controller .transcriptTxt {
	padding-right: 4em;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

#tags, .transcriptTxt {
	padding-right: 2.8em;
	overflow: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

.transcriptTxt .transcriptLnk {
	text-align: right;
	line-height: 2.5em;
}

#tags a, .transcriptTxt a {
	color: #FFFFFF;
}

.transcriptTxt p.voice {
	font-size: 0.9em;
	margin-bottom: 0.2em;
	text-align: center;
	font-style: italic;
}

.transcriptTxt p.voice + p{
	margin-top: 0.2em;
}

.transcriptTxt a.txt_tcLink {
	color: inherit;
	text-decoration: none;
	font-weight: normal;
}

.transcriptTxt a.txt_tcLink:hover {
	background-color: rgba(255, 255, 255, 0.3);
	color: inherit;
	border-radius: 4px;
	text-decoration: none;
}

#toc ul {
	list-style-type: none;
}

#toc a {
	text-decoration: none;
	color: #484848;
	display: block;
	padding: 0.3ex 0.6ex;
	background-color: transparent;
	text-decoration: none;
}

#toc a:hover,
#toc a[data-active] {
	color: #dc291e;
}

#toc li.tocSegment > a{
	background:transparent url("img/main/ico.svg") no-repeat left center / 16px auto;
	padding-left:20px;
}
#toc li.tocSegment > a:hover,
#toc li.tocSegment > a[data-active]{
	background:transparent url("img/main/icoOver.svg") no-repeat left center / 16px auto;
	padding-left:20px;
}
#toc li.tocPart > a{
	background:transparent url("img/main/menu-toggle.svg") no-repeat left center / 16px auto;
	padding-left:20px;
}
#marginToc #toc li.tocPart li.tocSegment > a{
	background-size:14px auto;
	padding-left:18px;
}

#toc li.current > a {
	font-weight: bold;
	color: orange !important;
}

#controller .tocTagsClose {
	position: absolute;
	right: 12px;
	top: 6px;
	background-image: url(img/main/tocTagsClose.svg);
	z-index: 4;
	width: 2em;
	height: 2em;
}

#controller button.focusOut, #controller button.focusOnCloseBtn {
	position: absolute;
	left: 100vw;
	right: 100vw;
	height: 0;
	padding: 0;
	border: none;
	overflow: hidden;
	outline: none !important;
}

/* ============= TAGS ============= */
#tags {
	padding: 1em 2.8em;	
}

dt.tag {
	background: url(img/main/tag.svg) left center no-repeat;
	background-size: auto 1.2em;
	padding-left: 2em;
	font-size: 1.2em;
	margin: 1em 0;
	cursor: hand;
	cursor: pointer;
	color: #FFFFFF;
}

#marginTags .tag {
	font-size: 0.8em
}

#tags *[data-highlighted] {
	background-image: url(img/main/tagChecked.svg);
	font-weight: bold;
}

#timelineTags.active {
	overflow: hidden
}

/* ============= EXTRA ============= */
.extra_win {
	left: 18%;
	right: 18%;
	bottom: 12%;
	top: 12%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1 1 0px;
	flex: 1 1 0px;
}

.extra_co {
	width: 100%;
	height: 100%;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
}

.extra_fra {
	height: 100%;
	width: 100%;
	background-color: white;
}


/* ============= ADAPTATIVE ============= */
/* Large desktop  @media (min-width: 1200px) */
/* Landscape tablet and dated desktop  @media (min-width: 980px) and (max-width: 1199px)*/
/* Portrait tablet to landscape and desktop , Landscape phone to portrait tablet  and (max-width: 979px)  */
/* Landscape phones and down @media (max-width: 480px)  */
@media (min-width: 1200px) {
	div#webMedia {
		font-size: 14px;
	}

	div#slideshow {
		font-size: 1.2em;
	}
}

@media (orientation: portrait) {
	div#webMedia {
		font-size: 1.6vh;
	}

	main#content {
		-webkit-flex-direction: column;
		flex-direction: column;
		padding-top: 0;
	}
	
	div#slideshow {
		max-width: 100%;
	}
	
	section {
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: center;
		justify-content: center;
	}
	
	section > header {
		position: static;
		margin-top: 1em;
		text-align: center;
	}

	h2.segmentTitle {
		white-space: normal;
	}
	
	div.segmentDescIllus {
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	div#media[data-currentType=video],
	div#mediafull[data-currentType=video] {
		margin: 0.5em;
	}
	
	main#content[data-hascontent] div#media[data-currentType=video],
	main#content[data-hascontent] div#mediafull[data-currentType=video] 	{
		max-width: 100%;
		min-height: 34vh;
		/* IE */
		max-height: 34vh;
	}

	#timelineToc.active,
	#timelineTags.active,
	.transcript.active {
		height: 80vh;
	}
}

@media (max-width: 639px) {
	div#accessMenu a {
		position: absolute;
		left: 100vw;
		right: 100vw;
		height: 0;
		padding: 0;
		border: none;
		overflow: hidden;
	}
	
	div#accessMenu a:focus {
		position: static;
		padding: 0.5em;
		height: auto;
	}
	
	aside#tabs {
		font-size: 1.6em
	}
	
	aside#tabs > ul {
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}
	
	aside#tabs ul li {
		position: static;
	}
	
	aside#tabs ul ul {
		left: 0;
	}

	aside#tabs ul li a {
		text-align: center;
	}
	
	aside#tabs ul ul li span {
		width: 100%;
	}
	
	nav#controller {
		font-size: 1.6em;
	}
	
	#timelineBox, div.volumeBk {
		display: none;
	}
	
	#controlBar {
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}
	
	.extra_win {
		left: 3%;
		right: 3%;
	}

}

@media (max-height: 639px) {
	div#webMedia {
		overflow: hidden;
	}
	
	div#accessMenu a {
		position: absolute;
		left: 100vw;
		right: 100vw;
		height: 0;
		padding: 0;
		border: none;
		overflow: hidden;
	}
	
	div#accessMenu a:focus {
		position: static;
		padding: 0.5em;
		height: auto;
	}
	
	div#margin {
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	aside#tabs, nav#controller {
		max-height: 0;
		overflow: hidden
		/* désactivation de la transition car delay sur la fermeture */
		/*transition: max-height 1s ease-in;*/
	}

	body[data-active] aside#tabs,
	body[data-active] nav#controller {
		overflow: visible;
		max-height: 100%;
	}
	
	.extra_win {
		top: 3%;
		bottom: 3%;
	}
}