@import url(base.css);
@import url(header.css);
@import url(controller.css);

html {
	height: 100%;
	display: flex;
	background: white;
	color: #2C2C2C;
}

body {
	flex: 1;
	display: flex;
	visibility: hidden;
	min-width: 0;
	/* overflow: hidden nécessaire pour le redimensionnement sur l'overflow */
	overflow: hidden;
}

body:-webkit-full-screen {
	width: 100%;
}

body.teReady {
	visibility: visible;
}

#webMedia {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	background: #eeeeee;
}

#content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	margin: 0.5em;
}

div.headsArea > * {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 0.5em;
	border: 1px solid #006978;
	border-radius: 5px;
	margin: 1em 0;
	overflow: hidden;
	text-transform: uppercase;
	color: #006978;
	padding: 0.5em 1em;
	margin: 0;
}

.mainArea {
	display: flex;
	flex: 1;
	min-height: 0;
}

.marginsArea {
	flex: 0 1 15vw;
	margin-right: 1em;
	display: flex;
}

.marginsAreaCo {
	overflow-y: auto;
	max-height: 100%;
	margin: auto;
}

.marginTags {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mediaArea {
	min-width: 0;
	min-height: 0;
}

body.teVideoType .mediaArea {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}

/* Force un aspect 16:9 sur les iframes */
.mediaArea > mediaelementwrapper {
	position: relative;
	overflow: hidden;
	flex: 0 1 auto;
	display: block;
}

.mediaArea > mediaelementwrapper::before {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.mediaArea > mediaelementwrapper > * {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	margin: auto;
}

body.teVideoType .mediaArea::after {
	content: '';
	display: block;
	position: absolute;
	background: transparent center / contain no-repeat;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	width: 4em;
	height: 4em;
	pointer-events: none;
}

body.tePaused:not(.tePlayed) .mediaArea::after {
	background-image: url(icons/videoPlay.svg);
}

body.teVideoPlay .mediaArea::after {
	background-image: url(icons/videoPlay.svg);
	animation: bezelFadeout .5s linear 1 normal forwards;
}

body.teVideoPause .mediaArea::after {
	background-image: url(icons/videoPause.svg);
	animation: bezelFadeout .5s linear 1 normal forwards;
}

body.teSeeking .mediaArea::after {
	content: '';
	width: 4em;
	height: 4em;
	background-image: url(icons/loading.svg);
	animation: spin 0.8s linear infinite;
}

body.teVideoType .mediaArea > .subtitles {
	margin-top: -6.2em;
	min-height: 6em;
	display: flex;
	align-items: flex-end;
}

body.teAudioType div.contentArea > .subtitles {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.contentArea {
	flex: 0 0 0px;
	display: flex;
	transition: flex 0.5s;
	position: relative;
	min-width: 0;
	min-height: 0;
}

body.teAudioType .contentArea {
	flex-grow: 1;
}

body.activeAside .contentArea {
	flex-basis: 10em;
}

body.activeTimeRange .contentArea,
body.activePause .contentArea {
	flex-basis: 50vw;
}

body.activeTimeRange.activeAside .contentArea,
body.activePause.activeAside .contentArea {
	flex-basis: 55vw;
}

body.activeTimeRange.margins .contentArea,
body.activePause.margins .contentArea {
	flex-basis: 35vw;
}

body.activeTimeRange.activeAside.margins .contentArea,
body.activePause.activeAside.margins .contentArea {
	flex-basis: 40vw;
}


.segmentHead {
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	color: #147ba4;
	font-size: 1em;
}

.segmentHead > .segment_ti {
	font-size: 1.5em;
}

.segment {
	display: flex;
	flex: 1;
}

.segment[hidden] {
	flex: 0;
	width: 0;
	min-width: 0;
}

.timeRanges {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	font-size: 1.2em;
}

.pause,
.pauseStep {
	flex: 1;
	display: flex;
	align-self: stretch;
	flex-direction: column;
}

.timeRange,
.pause {
	transition: opacity 0.3s ease-in;
	margin: 1em;
}

.timeRange[hidden],
.pause[hidden],
.pauseStep[hidden],
body.activePause .timeRange {
	display: block;
	flex: 0;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	margin: 0;
	visibility: hidden;
}

.pauseCo {
	flex: 1;
}

.pauseActions {
	text-align: right;
}

.tePauseNext,
.tePauseResume {
	padding: 0.3em 0.5em;
	border: 1px solid #147ba4;
	background: #147ba4;
	color: white;
	margin: 0 0.5em;
}

.segmentAside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 15em;
	min-height: 0;
}

.segmentAside[hidden] {
	overflow: hidden;
	visibility: hidden;
}

/* On ne peut utiliser un flex avec align-items: flex-end, bug de IE11 */
.segmentAside > ul {
	list-style: none;
	padding: 1em 0;
	margin: 0;
}

.segmentAside ul ul {
	padding-left: 1em;
	list-style-type: disc;
}

.segmentAside p {
	min-width: 8em;
}

.compl {
	display: block;
	position: relative;
	margin: 1em 0 1em auto;
	width: 1.5em;
	height: 1.5em;
	background-image: url(icons/compl.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.compl > span {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 0.5em;
	transition: opacity 0.4s ease-in;
	opacity: 0;
	visibility: hidden;
	white-space: nowrap;
	display: block;
	padding: 0.6em 0.8em;
	position: absolute;
	right: 1.8em;
	top: -0.4em;
	z-index: 2;
	font-weight: bold;
}

.compl:hover > span,
.compl:focus > span {
	opacity: 1;
	visibility: visible;
	right: 1.8em;
}

/* TOC */
#toc, #toc ul {
	padding-left: 1.5em;
	color:#147ba4;
}

#toc a {
	display: block;
	color:#147ba4;
}

#toc a:hover {
	text-decoration: underline;
}

#toc a:hover, #toc .teActive > a {
	background-color: rgba(255, 255, 255, 0.15);
	transition: background-color 0.4s linear;
}

.marginToc #toc a:hover, .marginToc #toc .teActive > a {
	background-color: rgba(55, 165, 209, 0.15);
	transition: background-color 0.4s linear;
}

/* Tags */
.tags {
	font-size: 1.2em;
	padding: 0;
	margin: 0 5em;
	text-align: center;
	min-width: 10em;
}

tlItem.activeTag {
	background-color: rgba(255, 255, 255, 0.15);
	transition: background-color 0.4s linear;
}

.tag {
	display: inline-block;
	margin: 0 0.2em;
}

.tags a {
	text-decoration: none;
}

.tags a:hover {
	text-decoration: underline;
}

.tag.activeTag {
	font-weight: bold;
}

@media (min-width: 1330px) {
	body {
		font-size: 16px;
	}
}

@media (max-width: 740px) {
	body {
		font-size: 11px;
	}
}

@media (max-device-width: 740px) {
	#controller, #header {
	}

	.mainController > .controllerNavArea {
		display: none;
	}
}

@media (orientation: portrait) {
	#header {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	#header .back {
		flex: 0;
	}

	#logos {
		min-height: 0;
	}

	#logos > a {
		justify-content: center;
	}

	#logos img {
		max-height: 4em;
	}

	#head {
		flex: 0;
	}

	#webMediaTi {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	#extras {
		align-self: auto;
		background-color: #147ba4;
	}

	body {
		font-size: 11px;
	}

	.mainArea {
		flex-direction: column;
	}

	.marginsArea {
		flex-direction: row;
		margin-right: 0;
		margin-bottom: 1em;
		flex-basis: 15vh;
		min-height: 0;
		display: block;
	}

	.marginToc {
		display: table;
		margin: 0 auto;
	}

	.marginToc > ul {
		columns: 2;
	}

	.segment {
		flex-direction: column;
	}

	.segmentAside {
		flex-direction: row;
		max-height: 15em;
		max-width: 100%;
	}

	.segmentAside > ul > li {
		display: table-cell;
		vertical-align: middle;
	}

	.segmentAside > ul > li > ul, .segmentAside > ul > li > p {
		margin: 0 1em;
	}

	.compl {
		margin: 0 1em;
	}

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

	body.activeTimeRange .contentArea,
	body.activePause .contentArea {
		flex-basis: 40vh;
	}

	body.activeTimeRange.activeAside .contentArea,
	body.activePause.activeAside .contentArea {
		flex-basis: 45vh;
	}

	body.activeTimeRange.margins .contentArea,
	body.activePause.margins .contentArea {
		flex-basis: 35vh;
	}

	body.activeTimeRange.activeAside.margins .contentArea,
	body.activePause.activeAside.margins .contentArea {
		flex-basis: 40vh;
	}
}

body.autoHide,
body.teFullscreen {
	overflow: hidden;
	position: relative;
}

body.autoHide #header,
body.teFullscreen #header {
	position: absolute;
	top: 0;
	width: 100%;
	transform: translate(0, -100%);
	transition: transform 0.3s ease-in;
	z-index: 10;
}

body.autoHide #controller,
body.teFullscreen #controller {
	position: absolute;
	bottom: 0;
	width: 100%;
	transform: translate(0, 100%);
	transition: transform 0.4s ease-in;
	z-index: 30;
}

body.autoHide.teActiveMouse #header,
body.autoHide.teActiveMouse #controller,
body.teFullscreen.teActiveMouse #header,
body.teFullscreen.teActiveMouse #controller {
	transform: none;
}

body.autoHide .marginsArea,
body.teFullscreen .marginsArea {
	min-width: 30em;
	width: 20vw;
	position: absolute;
	left: 0;
	transform: translate(-100%, 0);
	transition: transform 0.3s ease-in;
	bottom: 0;
	top: 0;
	height: calc(100% - 10em);
	margin: auto;
	z-index: 20;
}

body.autoHide .marginsAreaCo,
body.teFullscreen .marginsAreaCo {
	background-color: rgba(255, 255, 255, 0.8);
	border: solid 1px silver;
	border-left: none;
	padding: 0.5em;
}

body.autoHide.teActiveMouse .marginsArea,
body.teFullscreen.teActiveMouse .marginsArea {
	transform: none;
}

body.teFullscreen div#webMedia {
	background-color: black;
}

body.teFullscreen div.contentArea,
body.teFullscreen header.headsArea,
body.teFullscreen aside.segmentAside {
	display: none;
}

body.teFullscreen.activeTimeRange div.contentArea {
	display: flex;
	position: absolute;
	right: 2em;
	width: 80vmin;
	top: 2em;
	height: 60vmin;
	transform: scale(0.2);
	transform-origin: top right;
	opacity: 0.5;
	cursor: pointer;
	background-color: white;
	transition: opacity 0.4s ease-in;
}

body.teFullscreen.activeTimeRange div.contentArea:hover {
	opacity: 1;
}

body.teFullscreen main#content {
	margin: 0;
}