@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

@font-face {
  font-family: 'BoteraTFE';
  src:  url('../fonts/boteratfe/BoteraTFE-RegularStencil.woff2') format('woff2'),
        url('../fonts/boteratfe/BoteraTFE-RegularStencil.woff') format('woff'),
				url('../fonts/boteratfe/BoteraTFE-RegularStencil.ttf') format('truetype');
}
@font-face {
  font-family: 'HKGroteskMedium';
  src:  url('../fonts/hkgrotesk/HKGrotesk-Medium.woff2') format('woff2'),
        url('../fonts/hkgrotesk/HKGrotesk-Medium.woff') format('woff'),
				url('../fonts/hkgrotesk/HKGrotesk-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'HKGroteskBold';
  src:  url('../fonts/hkgrotesk/HKGrotesk-Bold.woff2') format('woff2'),
        url('../fonts/hkgrotesk/HKGrotesk-Bold.woff') format('woff'),
				url('../fonts/hkgrotesk/HKGrotesk-Bold.ttf') format('truetype');
}

.botera {
	font-family: 'BoteraTFE';
}

.groteskMedium {
	font-family: 'HKGroteskMedium';
}

.groteskBold {
	font-family: 'HKGroteskBold';
}

* {
	margin: 0;
	padding: 0;

	/*user-select: none;*/
	user-drag: none;
}
*:focus {
	box-shadow: none !important;
}

html, body {
	width: 100%;
	min-height: 100%;

	background-color: #000;

	/*overflow: hidden;*/
	 overflow-x: hidden;
}

body {
	/*overflow-y: scroll;*/
}
body.menu-open {
    /*overflow: hidden;*/
}

a {
	font-family: Source Sans Pro, sans-serif;
}

#loader {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(17, 20, 51, 1);
	color: #fff;
	z-index: 10;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;


}

#loader p {
	margin: 0;
	padding: 0;

	font-family: 'BoteraTFE';
	font-size: 26px;
}

#loader svg#chargementPathSVG {
	width: 545px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(90deg) scaleY(-1);
}


body.block {
	overflow: hidden;
}
body.block .Landing {
	display: flex;
}

.Landing {
	position: absolute;
	z-index: 9998;

	width: 100%;
	height: 100vh;

	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background: url(../contenu/commun/image/blocker-bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.Landing * {
	z-index: 1;
}

.Landing img {
	height: 5vh;

	width: max-content;
	position: relative;
	top: inherit;
	left: inherit;
	transform: inherit;
}
.Landing > img {
	height: 20vh;
	margin-top: 50px;
}

.Landing span.separator {
	width: 50px;
	height: 3px;
	background-color: #ffffff;

	margin: 40px 0;
}

.Landing h1 {
	font-family: 'BoteraTFE';
	color: #ffffff;
	font-size: 5rem;
	text-align: center;
	padding: 0 20px;
}

.Landing span {
	font-family: 'HKGroteskMedium';
	color: #ffffff;
	font-size: 1.25rem;
	text-align: center;
	padding: 0 20px;
}

.Landing div.button-wrapper {
	/*height: 200px;*/
	padding: 0 20px;
}
.Landing div.button-wrapper div.button {
	background-color: #b59b60;
	margin: 0;
	padding: 20px 50px;
	border-radius: 10px;
}
.Landing div.button-wrapper div.button p {
	margin: 0;
	padding: 0;
	/*line-height: 0;*/
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.8rem;
	text-align: center;
	font-family: 'HKGroteskMedium';
}

.Landing ul {
	display: flex;
	margin: 0;
	position: absolute;
	bottom: 50px;
}
.Landing ul li {
	list-style: none;
	display: inline-flex;
	margin: 0 25px;
}
.Landing ul li img {
  
}

@media (max-width: 480px) {
  .Landing h1 {
    font-size: 3rem;
  }
  .Landing span {
  	font-size: 0.9rem;
  }
  .Landing div.button-wrapper div.button {
  	padding: 20px 30px;
  }
  .Landing div.button-wrapper div.button p {
  	font-size: 0.75rem;
  }
}



#timeout {
	z-index: 9998;
}

#restart {
	z-index: 9997;
}

#interface {
	/*z-index: 9996;*/
}

#content {
	z-index: 0;

	width: 100%;
	height: 100%;
}

#credits {
	width: 100%;
	height: 100%;

	position: absolute;
	z-index: 9997;

	background-position: center;
	background-size: cover;

	transition: opacity 0.5s ease-in-out;

	opacity: 0;
	pointer-events: none;
}
#credits.active {
	opacity: 1;
	pointer-events: auto;
}

.sticky {
    /*position: sticky;*/
    position: fixed;
    top: 0px;
}