@import url("reset.css");

:root {
	--main-dark:  #363333;
	--intense-dark: #272121;
	--main-light:  #F6E9E9;
	--accent:  #E16428;
	--live: #D32322;

	--font: roboto, sans-serif;

	/* Dimensions */
	/* //////////	Content	////////// */
	--content-max-width: 1440px;
	--content-max-height: calc( 100vh - ( var(--header-height) + ( ( var(--header-margin-b) + var(--date-height) + var(--date-margin-b) ) * 2 ) + var(--footer-height) * 2 + var(--footer-internal-space) ) );

	/* //////////	Header	////////// */
	--header-height: 100px;
	--header-padding: 20px;
	--header-margin-b: 10px;

	/* //////////	Planning	////////// */
	--planning-gap: 20px;
	--planning-padding-v: 0;
	--planning-padding-h: var(--planning-gap);

	/* //////////	Horaires	////////// */
	--horaires-fixed-width: 69px;
	/*--horaires-height: 30px;*/
	--horaires-height: calc( var(--content-max-height) / var(--horaires-nombre) );
	--horaires-border-b: 2px;
	--horaires-nombre: 13;
	--horaires-font-size: 2rem;

	/* //////////	Dates	////////// */
	--date-height: 40px;
	--date-margin-b: 2px;

	/* //////////	Jours	////////// */
	--jours-gap: 20px;

	/* //////////	Streams	////////// */
	--streams-logos-height: 60%;
	--streams-logos-flex-direction: row;
	--streams-logos-flex-direction-vertical: column;
	--streams-internal-space: 5px;
	--streams-band-height: 25px;

	/* //////////	Footer	////////// */
	--footer-height: 40px;
	--footer-internal-space: 10px;
	--footer-social-ratio: calc(30 / 40);
}

@media(max-height: calc(667px + 80px)) and (max-width: 480px) {
	:root{
		/* //////////	Horaires	////////// */
		--horaires-height: 23px;
		--horaires-font-size: 1.6rem;

		/* //////////	Footer	////////// */
		--footer-height: 30px;
	}
}

@media(min-height: 825px) and (min-width: 480px) {
	:root{
		/* //////////	Horaires	////////// */
		/*--horaires-height: 45px;*/
		--horaires-height: calc( var(--content-max-height) / var(--horaires-nombre) );
	}
}

html {
	font-size: 10px;
	height: -webkit-fill-available;
}

@supports (-webkit-touch-callout: none) {
	body {
		/* The hack for Safari */
		min-height: -webkit-fill-available;
	}
}

* {
	-webkit-tap-highlight-color:  transparent;
}

body {
	background: var(--main-dark);
	font-family: var(--font);
	font-size: 1.6rem;
	overflow: hidden;
	height: calc(100vh - env(safe-area-inset-bottom));
}

header {
	position: relative;
	height: var(--header-height);

	margin-bottom: var(--header-margin-b);
	/*display: flex;
	align-items: center;*/
	padding: var(--header-padding);

	background-color: var(--intense-dark);
	color: var(--main-light);
}

	header .content {
		position: relative;
		max-width: var(--content-max-width);
		margin: 0 auto;
		padding-left: calc(var(--horaires-fixed-width) + (var(--planning-gap) * 2));
	}


	header:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		opacity: 0.55;

		background-image: url('../images/header.png');
		background-size: cover;
		background-position: center 75%;
		background-repeat: no-repeat;
	}

#planning {
	width: 100%;
	max-width: var(--content-max-width);
	margin: 0 auto;
	height: calc( ((var(--horaires-height) + var(--horaires-border-b)) * var(--horaires-nombre)) + (var(--date-height) + var(--date-margin-b)) );

	/*display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--planning-gap);*/
	padding: var(--planning-padding-v) var(--planning-padding-h);
}

#horaires {
	/*grid-column: 1 / 1;*/
	width: 69px;

	float: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 0;

	flex: none;
	order: 0;
	flex-grow: 1;
	padding-top: var(--date-height);
	margin-right: var(--planning-gap);
}

	.horaire {
		width: var(--horaires-fixed-width);
		height: calc(var(--horaires-height) + var(--horaires-border-b));
		color: var(--main-light);

		border-bottom: var(--horaires-border-b) solid var(--main-light);
		padding: 0 5px;
		text-align: right;
		font-size: var(--horaires-font-size);
		line-height: calc(var(--horaires-height) + var(--horaires-border-b));
		
		flex: none;
		order: 0;
		flex-grow: 0;
	}

nav {
	position: fixed;
	padding-left: calc( (var(--planning-gap) * 2) + var(--horaires-fixed-width));
	width: calc(100% - var(--planning-gap));
	height: var(--date-height);

	display: flex;
	align-content: center;
	justify-content: space-between;
	line-height: var(--date-height);
	font-size: 2.5rem;

	z-index: 10;
}

	nav a {
		text-decoration: none;
		color: var(--main-light);
	}

	nav a.disabled {			
		cursor: not-allowed;
		opacity: 0.25;
	}

#jours {
	/*grid-column: 2 / span 3;*/

	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: var(--jours-gap);

	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	&::-webkit-scrollbar {
	    display: none;
	  }
}

	.jour {
		width: 100%;
		height: 100%;
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

		.date {			
			height: var(--date-height);
			margin-bottom: var(--date-margin-b);
			line-height: var(--date-height);
			color: var(--main-light);
			text-align: center;
		}
			.date.today {
				font-weight: bold;
				color: var(--accent);
			}

		.streams {
			display: grid;
			height: calc( (var(--horaires-height) * var(--horaires-nombre)) + (var(--horaires-border-b) * var(--horaires-nombre)) );

			grid-template-rows: repeat(calc(var(--horaires-nombre) * 2), 1fr);
			grid-gap: calc(var(--horaires-border-b) / 2);
			grid-auto-rows: calc((var(--horaires-height) + var(--horaires-border-b) / 2));
		}

			.stream {
				border: 2px solid #F6E9E9;
				border-radius: 5px;
				background-size: cover;
				position: relative;
				overflow: hidden;
			}

				.logos {
					height: var(--streams-logos-height);
					padding: var(--streams-internal-space) var(--streams-internal-space) 0 var(--streams-internal-space);

					display: flex;
					flex-direction: var(--streams-logos-flex-direction);
					align-content: stretch;
					justify-content: space-evenly;
					align-items: center;
					column-gap: var(--streams-internal-space);
				}

					.logos.vertical {
						height: calc(100% - var(--streams-band-height));
						flex-direction: var(--streams-logos-flex-direction-vertical);
						padding: var(--streams-internal-space);
					}

					.logo {
						max-height: 100%;
					}

					/* one item */
					.logo:first-child:nth-last-child(1) {
					/* -or- li:only-child { */
					    max-width: 100%;
					}

					/* two items */
					.logo:first-child:nth-last-child(2),
					.logo:first-child:nth-last-child(2) ~ .logo {
					    max-width: calc(50% - (var(--streams-internal-space) / 2) );
					}


					.logos.vertical .logo:first-child:nth-last-child(2),
					.logos.vertical .logo:first-child:nth-last-child(2) ~ .logo {
						max-width: 100%;
						max-height: calc(50% - (var(--streams-internal-space) / 2));
					}

				.band {
					position: absolute;
					/*bottom: -30px;*/
					bottom: 0;
					width: 100%;
					height: var(--streams-band-height);
					line-height: var(--streams-band-height);
					background: rgba(39, 33, 33, 0.66);
					color: var(--main-light);
					text-align: center;
				}

					/*.stream:hover .band {
						bottom: 0;

					}*/

					.band .short {
						display: none;
					}

					.band .live {
						color: var(--live);
						font-size: 1.5em;
						line-height: 0.9;
						overflow: hidden;

						animation-name: live;
						animation-duration: 3s;
						animation-iteration-count: infinite;
					}

					@keyframes live {
						0% {
							color: var(--intense-dark);
						}
						15% {
							color: var(--live);
						}
						85% {
							color: var(--live);
						}
						100% {
							color: var(--intense-dark);
						}
					}

				.stream a {
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}


footer {
	position: absolute;
	height: var(--footer-height);
	width: 100%;
	bottom: var(--footer-internal-space);

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px;
	gap: var(--footer-internal-space);
}

	footer .social {
		display: inline-flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		width: var(--footer-height);
		height: var(--footer-height);
		border-radius: calc(var(--footer-height) / 2);
		background: var(--main-light);
	}

		footer .social:hover {
			background: var(--accent);
		}

		footer .social img {
			max-height: calc(var(--footer-height) * var(--footer-social-ratio));
			max-width: calc(var(--footer-height) * var(--footer-social-ratio));
		}


@media(max-width: 280px) {
	html {
		font-size: 8px;
	}
}
@media(max-width: 385px) {
	header .content {
		padding: 0;
	}
}

@media (min-width: 768px) {
	#jours {
		overflow-x: hidden;
		flex-wrap: nowrap;
		justify-content: stretch;
	}
		.jour {
			width: calc( (100% - (6 * var(--jours-gap)) ) / 7 );
		}
	nav {
		display: none;
	}
}

@media (max-width: 1430px) and (min-width: 768px) {
	.date .mois {
		display: none;
	}
	.band {
		font-size: 1.4rem;
	}
}

@media (max-width: 1120px) and (min-width: 768px) {
	.band .long { display: none; }
	.band .short { display: inline; }
}

@media (max-width: 950px) and (min-width: 768px) {
	.date {
		font-size: 1.4rem;
	}
	.date .mois {
		display: none;
	}
	.band {
		font-size: 1.2rem;
	}
		.band .long { display: none; }
		.band .short { display: inline; }
}

@media (max-width:850px) and (min-width: 768px) {
	.date {
		font-size: 1.2rem;
	}
	.date .mois {
		display: none;
	}
	.band {
		font-size: 1rem;
	}
		.band .long { display: none; }
		.band .short { display: inline; }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 844px) {
	#jours {
		overflow-x: auto;
	}
		.jour {
			width: 100%;
		}
	header .content {
		padding: 0;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) {
	#jours {
		overflow-x: auto;
	}
		.jour {
			width: 66%;
		}
	header .content {
		padding: 0;
	}
}