@import "animations.css";
@font-face {
  font-family: 'lindsey-signature';
  src:  url('lindsey-signature-regular.eot');
  src:  url('lindsey-signature-regular.eot?#iefix') format('embedded-opentype'),
    url('lindsey-signature-regular.woff2') format('woff2'),
    url('lindsey-signature-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  src:  url('Roboto.ttf');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-italic';
  src:  url('Roboto-italic.ttf');
  font-display: swap;
}

/*	Initialisation des styles	*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "roboto" !important;
	font-size: 16px !important;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../img/Paysage-Oustalou.webp");

}
html {
    -webkit-tap-highlight-color: transparent; /* Surbrillance au clic sur tous les navigateurs */
}
a {
	text-decoration: none;
	color: currentColor;
}
.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000;
	opacity: 1;
	z-index: -1;
    animation: overlay-fade 2s ease-out;
    animation-fill-mode: forwards;
}
#horloge {
	position: fixed;
	right: 50px;
	top: 50px;
	font-size: 3em;
	font-weight: 150;
	color: white;
	text-shadow: 0 0 3px #000;
	transform: translateX(130%);
	opacity: 0;
    animation: horloge-in 1s ease-out;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

h1#title {
	position: fixed;
	left: 50px;
	top: 50px;
	font-family: "lindsey-signature" !important;
	font-size: 5em !important;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	text-align: left;
	color: white;
	text-shadow: 0 0 3px #000;
	transform: scaleX(0) rotate(0);
	opacity: 0;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    animation: title-in 1s ease-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
#content-container {
	position: fixed;
	left: 50px;
	top: 120px;
	right: 50px;
	bottom: 50px;
}
#navigation {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center; /* Centre horizontalement */
	align-items: center;     /* Centre verticalement */
	left: 0px;
	top: 0px;
	width: 40%;
	bottom: 0px;
	padding: 0 25px;
	font-size: 1.5em;
}
/*#qr-codes, #apps {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}*/
#qr-codes, #apps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 50px;
	place-items: center;
	width: 100%;
}
#apps a {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly; /* Centre horizontalement */
	align-items: center;     /* Centre verticalement */
	width: 150px;
	height: 150px;
	background-color: rgba(255,176,76,0.2);
	backdrop-filter: blur(5px);
	border: solid 1px rgba(255,255,255,0.3);
	border-right-color: rgba(255,176,76,0.3);
	border-bottom-color: rgba(255,176,76,0.3);
	border-radius: 10px;
	text-align: center;
	transition: 0.6s ease-out;
	opacity: 0;
    animation: apps-in 1s ease-out;
    animation-fill-mode: forwards;
}
#apps a:hover, #apps a:focus, #apps a:active {
	background-color: rgba(255,176,76,0.4);
	backdrop-filter: blur(10px);
	border-color: rgba(255,255,255,0.5);
	border-right-color: rgba(255,176,76,0.5);
	border-bottom-color: rgba(255,176,76,0.5);
	transform: scale(1.1);
	transition: 0.3s;
}
#content {
	position: absolute;
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: center;     /* Centre verticalement */
	width:60%;
	top: 0px;
	right: 0px;
	bottom: 0px;
	padding: 0 25px;
}
#video-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center; /* Centre horizontalement */
	align-items: center;     /* Centre verticalement */
	width: 100%;
	height: 100%;
	opacity: 0;
    animation: video-in 2s ease-out;
    animation-fill-mode: forwards;
    animation-delay: 5s;
}
#video {
	position: relative;
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: center;     /* Centre verticalement */
	width: 100%;
	padding-bottom: 56.25%; /* Ratio 16:9 (9 / 16 = 0.5625) */
	height: 0;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 0 3px #000;
}
#video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#video-container a {
	display: flex;
	align-items: center;
	background-color: rgba(196, 48, 43,0.6);
	padding: 3px 6px;
	border-radius: 6px;
	color: white;
	margin-top: 10px;
	opacity: 0;
    animation: video-link-in 1s;
    animation-fill-mode: forwards;
    animation-delay: 6s;
    transition: 0.6s ease-out;
}
#video-container a:hover, #video-container a:focus, #video-container a:active {
	background-color: rgba(196, 48, 43,1);
	transform: scale(1.1);
	transition: 0.3s;
}
#video-container a span {
	margin: 0 6px;
	font-weight: 500;
}
#remote {
	text-align: center;
	position: fixed;
	bottom: 50px;
	left: 0;
	right: 0;
}