@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Lato:wght@100;300;400;700;900&family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: transparent;
	z-index: -100;
}

/* Media query pour tablette & mobile */
@media only screen and (max-width: 1200px) {
	.entre {
		display: none;
	}
}
/* Fin media query pour tablette & mobile */

/* Media query pour pc
@media only screen and (min-width: 1200px) {
	.entre {
		display: none;
	}
}
/* Fin media query pour pc */

/* Loading */

.loading {
	display: flex;
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100%;
	align-items: center;
	justify-content: center;
	background: #101010;
	z-index: 9999;
}
.loading .nav-loading {
	display: flex;
	flex-direction: column;
	position: relative;
	top: 0;
	left: 0;
	height: 100px;
	width: 100px;
	align-items: center;
	justify-content: center;
	position: relative;
}
.loading .nav-loading .column1 {
	display: flex;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
}
.loading .nav-loading .column1 p {
	font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 50px;
	color: white;
}
.loading .nav-loading .column2 {
	display: flex;
	position: relative;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
}
.loading .nav-loading .column2 img {
	display: flex;
	position: absolute;
	transform: rotate(180deg);
	top: 0;
	left: 0;
	height: 100px;
	width: 100px;
	animation: anim_logo 5s ease infinite;
}
@keyframes anim_logo {
	0% {
		transform: translate(0, -50%) scale(1);
	}
	5% {
		transform: translate(0, -50%) scale(1);
	}
	9% {
		transform: translate(0, -50%) scale(2.5);
	}
	11% {
		transform: translate(0, -50%) scale(1);
	}
	13% {
		transform: translate(0, -50%) scale(2.5);
	}
	15% {
		transform: translate(0, -50%) scale(1);
	}
	26% {
		transform: translate(0, -50%) scale(1);
	}
	95% {
		transform: translate(0, -50%) scale(1);
	}
	99% {
		transform: translate(0, -50%) scale(1);
	}
	100% {
		transform: translate(0, -50%) scale(1);
	}
}
.loading .nav-loading img:nth-child(1) {
	opacity: 0;
	animation: anim_lettre 2s ease infinite;
	animation-delay: 0s;
}
.loading .nav-loading img:nth-child(2) {
	opacity: 0;
	animation: anim_lettre 2s ease infinite;
	animation-delay: .25s;
}
.loading .nav-loading img:nth-child(3) {
	opacity: 0;
	animation: anim_lettre 2s ease infinite;
	animation-delay: .5s;
}
@keyframes anim_lettre {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.fondu-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out;
}

/* Media query pour tablette & mobile */
@media only screen and (max-width: 1200px) {
	.loading {
		flex-direction: column;
	}
}
/* Fin media query pour tablette & mobile */

/* Fin loading */

/* Mobile & tablette */

.mobiletablette {
	display: flex;
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100%;
	align-items: center;
	justify-content: center;
	background: #101010;
	z-index: 9999;
}
.mobiletablette .nav-mobiletablette{
	display: flex;
	flex-direction: column;
	position: relative;
	top: 0;
	left: 0;
	height: 100px;
	width: 100%;
	align-items: center;
	justify-content: center;
	position: relative;
}
.mobiletablette .nav-mobiletablette .column1 {
	display: flex;
	height: auto;
	width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.mobiletablette .nav-mobiletablette .column1 p {
	font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 30px;
	color: white;
	margin: 20px;
}
.mobiletablette .nav-mobiletablette .column2 {
	display: flex;
	position: relative;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
}
.mobiletablette .nav-mobiletablette .column2 .plus {
	display: flex;
	position: absolute;
	top: 0;
	height: 200px;
	width: 100px;
	align-items: center;
	justify-content: center;
}
.mobiletablette .nav-mobiletablette .column2 .plus img {
	display: flex;
	position: absolute;
	transform: rotate(180deg);
	top: 0;
	left: 0;
	height: 100px;
	width: 100px;
	animation: anim_logo2 5s ease infinite;
}
@keyframes anim_logo2 {
	0% {
		transform: translate(0, -50%) scale(1);
	}
	5% {
		transform: translate(0, -50%) scale(1);
	}
	9% {
		transform: translate(0, -50%) scale(2.5);
	}
	11% {
		transform: translate(0, -50%) scale(1);
	}
	13% {
		transform: translate(0, -50%) scale(2.5);
	}
	15% {
		transform: translate(0, -50%) scale(1);
	}
	26% {
		transform: translate(0, -50%) scale(1);
	}
	95% {
		transform: translate(0, -50%) scale(1);
	}
	99% {
		transform: translate(0, -50%) scale(1);
	}
	100% {
		transform: translate(0, -50%) scale(1);
	}
}
.mobiletablette .nav-mobiletablette .plus img:nth-child(1) {
	opacity: 0;
	animation: anim_lettre2 2s ease infinite;
	animation-delay: 0s;
}
.mobiletablette .nav-mobiletablette .plus img:nth-child(2) {
	opacity: 0;
	animation: anim_lettre2 2s ease infinite;
	animation-delay: .25s;
}
.mobiletablette .nav-mobiletablette .plus img:nth-child(3) {
	opacity: 0;
	animation: anim_lettre2 2s ease infinite;
	animation-delay: .5s;
}
@keyframes anim_lettre2 {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.fondu-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out;
}

/* Media query pour tablette & mobile */
@media only screen and (min-width: 1200px) {
	.mobiletablette {
		display: none;
	}
}
/* Fin media query pour tablette & mobile */

/* Fin Mobile & tablette */

/* Bloc */

.bloc {
  position: relative;
  top: 0;
  left: 0;
  height: 55px;
  width: 100%;
  background: black;
}

.bloc .nav-bloc {
	display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.bloc .nav-bloc img {
  height: auto;
  width: 49px;
  transform: rotate(180deg);
}

/* Fin bloc */

/* Header */

#header {
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	padding: 0 50px;
	transition: .3s ease;
	background: transparent;
}

#header .navigation {
	position: absolute;
	top: 0px;
	right: 0;
	line-height: 45px;
}

#header .navigation .menu {
	position: fixed;
	display: block;
	background: #fff;
	width: 380px !important;
	height: 100vh;
	top: 0;
	right: -350px;
	align-items: center;
	justify-content: center;
	list-style: none;
	user-select: none;
	padding: 140px 50px;
	overflow-y: auto;
	transition: .3s;
	transition-property: right, visibility;
	visibility: hidden;
}

#header .navigation .menu.active {
	right: 0;
	visibility: visible;
}

.menu-item {
	position: relative;
}

#header .hamburger {
	height: 60px;
	width: 60px;
	display: flex;
	border-radius: 5%;
	position: relative;
	top: 80px;
	right: 40px;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(.8);
	margin-right: 20px;
}

#header .hamburger.active {
	right: 40px;
}

#header .hamburger .bar {
	height: 5px;
	width: 40px;
	position: relative;
	background-color: #fff;
	z-index: -1;
}

#header .hamburger .bar::after,
#header .hamburger .bar::before {
	content:'';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	background-color: #fff;
	transition: .3s ease;
	transition-property: top,bottom;
}

#header .hamburger .bar::after {
	top: 12px;
}

#header .hamburger .bar::before {
	bottom: 12px;
}

#header .hamburger.active .bar::before {
	bottom: 0;
	background-color: #000;
}

#header .hamburger.active .bar::after {
	top: 0;
	background-color: #000;
}

.menu-item > span {
	display: flex;
	top: 0;
	left: 0;
  align-items: center;
  position: relative;
}

.menu-item > span a {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	margin: 10px;
	padding: 0px 20px;
	cursor: pointer;
}

.menu-item > span a:hover {
	background: #000;
	color: #fff;
	border-radius: 2px;
}

.menu-item > span .notif {
	position: absolute;
  top: 2px;
  right: 5px;
}

.menu-item > span .notif span {
	display: flex;
	position: relative;
    height: 22px;
    width: 22px;
    align-items: center;
    justify-content: center;
    background: red;
    padding: 12px;
    border-radius: 45px;
    border: 2px solid #fff;
}

.menu-item > span .notif span p {
	font-size: 1rem;
}

/* Fin header */

/* Hero */

.hero {
	display: none;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -moz-user-select: none; /* Firefox */
 	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 	user-select: none; /* Propriété standard */
}

.hero.active {
	display: flex;
}

.hero .nav-hero {
	display: flex;
	flex-direction: column;
	position: absolute;
  padding: 50px;
  z-index: 99;
}

.hero .nav-hero h2 {
	display: flex;
	flex-direction: row;
	position: relative;
  height: 100%;
  width: 100%;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 55px;
  font-style: normal;
  padding: 20px 50px 0;
}

.hero .nav-hero .trait {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 5px;
	width: 100px;
	background: white;
	margin: 0 50px 50px;
}

.hero .nav-hero button {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 70px;
	width: 70px;
	background: white;
	opacity: .5;
	border:	solid 0px #000;
	border-radius: 50px;
	margin: 0 50px 50px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	align-items: center;
	justify-content: center;
	z-index: 99;
}

.hero .nav-hero button::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: transparent;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	filter: blur(7px);
}

.hero .nav-hero .croix0 {
	position: relative;
	top: 0;
	height: 60px;
	width: 60px;
	display: flex;
	border-radius: 5%;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(.8);
	background:	transparent;
}

.hero .nav-hero .croix0 .bar0 {
	height: 5px;
	width: 40px;
	position: relative;
	transform: rotate(45deg);
	background-color: #000;
	z-index: -1;
	transition: 1s ease;
}

.hero .nav-hero .croix0 .bar0::after {
	content:'';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	transform: rotate(-90deg);
	background-color: #000;
	transition: 1s ease;
}

.hero .nav-hero .croix0.active .bar0 {
	transform: rotate(0deg);
}

.hero .nav-hero .croix0.active .bar0::after {
	transform: rotate(-0deg);
}

.hero .info0 {
	position: absolute;
	left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: .90;
  transition: 1s ease;
  z-index: 98;
}

.hero .info0.active {
	left: 0;
}

.hero .info0 p {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	color: white;
	padding: 300px;
}

.hero video {
	position: absolute;
	left: 0;
  top: 0;
  height: 100%;
  width: 100%;
	background-size: cover;
  object-fit: cover;
  z-index: -99;
}

.hero .swiper {
  width: 100%;
  height: 100%;
}

.hero .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero .swiper-slide video {
	position: absolute;
	left: 0;
  top: 0;
  height: 100%;
  width: 100%;
	background-size: cover;
  object-fit: cover;
  z-index: -99;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
	font-size: 100px;
}

.swiper-button-next, .swiper-button-prev {
	width: calc(var(--swiper-navigation-size) / 44* 100);
	color: orange;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  width: 30px;
  height: 30px;
}

.swiper-pagination-bullet {
	opacity: 1;
  background: orange;
}

.swiper-pagination-bullet-active {
	opacity: .25;
  background: orange;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 5%;
}

/* Fin hero */

/* Transition */

.transition {
  position: relative;
  display: flex;
  top: 0;
  left: 0;
  height: 10px;
  justify-content: center;
  width: 100%;
  align-items: center;
  background: black;
}

/* Fin transition */

/* Un */

.un {
  position: relative;
  top: 0;
  left: 0;
  height: 800px;
  width: 100%;
  overflow: hidden;
  -moz-user-select: none; /* Firefox */
 	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 	user-select: none; /* Propriété standard */
}

.un .top_1 {
	display: flex;
	position: absolute;
	top: 0;
  height: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to top, transparent, #000);
  z-index: 99;
}

/*
.un::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
	background: #0000002a;
	z-index: -98;
}
*/

.un .nav-un {
	display: flex;
	flex-direction: column;
	position: absolute;
  padding: 50px;
  z-index: 99;
}

.un .nav-un h2 {
	display: flex;
	flex-direction: row;
	position: relative;
  height: 100%;
  width: 100%;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 55px;
  font-style: normal;
  padding: 20px 50px 0;
}

.un .nav-un .trait {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 5px;
	width: 100px;
	background: white;
	margin: 0 50px 50px;
}

.un .nav-un button {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 70px;
	width: 70px;
	background: white;
	opacity: .5;
	border:	solid 0px #000;
	border-radius: 50px;
	margin: 0 50px 50px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	align-items: center;
	justify-content: center;
	z-index: 99;
}

.un .nav-un button::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: transparent;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	filter: blur(7px);
}

.un .nav-un .croix1 {
	position: relative;
	top: 0;
	height: 60px;
	width: 60px;
	display: flex;
	border-radius: 5%;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(.8);
	background:	transparent;
}

.un .nav-un .croix1 .bar1 {
	height: 5px;
	width: 40px;
	position: relative;
	transform: rotate(45deg);
	background-color: #000;
	z-index: -1;
	transition: 1s ease;
}

.un .nav-un .croix1 .bar1::after {
	content:'';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	transform: rotate(-90deg);
	background-color: #000;
	transition: 1s ease;
}

.un .nav-un .croix1.active .bar1 {
	transform: rotate(0deg);
}

.un .nav-un .croix1.active .bar1::after {
	transform: rotate(-0deg);
}

.un .info1 {
	position: absolute;
	left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: .90;
  transition: 1s ease;
  z-index: 98;
}

.un .info1.active {
	left: 0;
}

.un .info1 p {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	color: white;
	padding: 300px;
}

.un .swiper {
  width: 100%;
  height: 100%;
}

.un .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
}

.un .swiper-slide video {
	position: absolute;
	left: 0;
  top: 0;
  height: 100%;
  width: 100%;
	background-size: cover;
  object-fit: cover;
  z-index: -99;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
	font-size: 100px;
}

.swiper-button-next, .swiper-button-prev {
	width: calc(var(--swiper-navigation-size) / 44* 100);
	color: orange;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  width: 30px;
  height: 30px;
}

.swiper-pagination-bullet {
	opacity: 1;
  background: orange;
}

.swiper-pagination-bullet-active {
	opacity: .25;
  background: orange;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 5%;
}

/* Fin un */

/* Deux */

.deux {
	position: relative;
	top: 0;
	left: 0;
	height: 800px;
	width: 100%;
	overflow: hidden;
	-moz-user-select: none; /* Firefox */
 	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 	user-select: none; /* Propriété standard */
}

.deux .top_2 {
	display: flex;
	position: absolute;
	top: 0;
  height: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to top, transparent, #000);
  z-index: 99;
}

.deux .nav-deux {
	display: flex;
	flex-direction: column;
	position: absolute;
  padding: 50px;
  z-index: 99;
}

.deux .nav-deux h2 {
	display: flex;
	flex-direction: row;
	position: relative;
  height: 100%;
  width: 100%;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 55px;
  font-style: normal;
  padding: 20px 50px 0;
}

.deux .nav-deux .trait2 {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 5px;
	width: 100px;
	background: white;
	margin: 0 50px 50px;
}

.deux .nav-deux button {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 70px;
	width: 70px;
	background: white;
	opacity: .5;
	border:	solid 0px #000;
	border-radius: 50px;
	margin: 0 50px 50px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	align-items: center;
	justify-content: center;
	z-index: 99;
}

.deux .nav-deux button::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: transparent;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	filter: blur(7px);
}

.deux .nav-deux .croix2 {
	position: relative;
	top: 0;
	height: 60px;
	width: 60px;
	display: flex;
	border-radius: 5%;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(.8);
	background:	transparent;
}

.deux .nav-deux .croix2 .bar2 {
	height: 5px;
	width: 40px;
	position: relative;
	transform: rotate(45deg);
	background-color: #000;
	z-index: -1;
	transition: 1s ease;
}

.deux .nav-deux .croix2 .bar2::after {
	content:'';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	transform: rotate(-90deg);
	background-color: #000;
	transition: 1s ease;
}

.deux .nav-deux .croix2.active .bar2 {
	transform: rotate(0deg);
}

.deux .nav-deux .croix2.active .bar2::after {
	transform: rotate(-0deg);
}

.deux .info2 {
	position: absolute;
	left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: .90;
  transition: 1s ease;
  z-index: 98;
}

.deux .info2.active {
	left: 0;
}

.deux .info2 p {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	color: white;
	padding: 300px;
}

.deux .swiper {
  width: 100%;
  height: 100%;
}

.deux .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
}

.deux .swiper-slide img {
	display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111111;
}

/* Fin deux */

/* Trois */

.trois {
	position: relative;
	top: 0;
	left: 0;
	height: 800px;
	width: 100%;
	overflow: hidden;
	-moz-user-select: none; /* Firefox */
 	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 	user-select: none; /* Propriété standard */
}

.trois .top_3 {
	display: flex;
	position: absolute;
	top: 0;
  height: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to top, transparent, #000);
  z-index: 99;
}

.trois .nav-trois {
	display: flex;
	flex-direction: column;
	position: absolute;
  padding: 50px;
  z-index: 99;
}

.trois .nav-trois h2 {
	display: flex;
	flex-direction: row;
	position: relative;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 55px;
  font-style: normal;
  padding: 20px 50px 0;
}

.trois .nav-trois .trait {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 5px;
	width: 100px;
	background: white;
	margin: 0 50px 50px;
}

.trois .nav-trois button {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 70px;
	width: 70px;
	background: white;
	opacity: .5;
	border:	solid 0px #000;
	border-radius: 50px;
	margin: 0 50px 50px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	align-items: center;
	justify-content: center;
	z-index: 99;
}

.trois .nav-trois button::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: transparent;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	filter: blur(7px);
}

.trois .nav-trois .croix3 {
	position: relative;
	top: 0;
	height: 60px;
	width: 60px;
	display: flex;
	border-radius: 5%;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(.8);
	background:	transparent;
}

.trois .nav-trois .croix3 .bar3 {
	height: 5px;
	width: 40px;
	position: relative;
	transform: rotate(45deg);
	background-color: #000;
	z-index: -1;
	transition: 1s ease;
}

.trois .nav-trois .croix3 .bar3::after {
	content:'';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	transform: rotate(-90deg);
	background-color: #000;
	transition: 1s ease;
}

.trois .nav-trois .croix3.active .bar3 {
	transform: rotate(0deg);
}

.trois .nav-trois .croix3.active .bar3::after {
	transform: rotate(-0deg);
}

.trois .info3 {
	position: absolute;
	left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: .90;
  transition: 1s ease;
  z-index: 98;
}

.trois .info3.active {
	left: 0;
}

.trois .info3 p {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	color: white;
	padding: 300px;
}

.trois .swiper {
  width: 100%;
  height: 100%;
}

.trois .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
}

.trois .swiper-slide img {
	display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111111;
}

/* Fin trois */

/* Quatre */

.quatrebest {
	position: relative;
	top: 0;
	left: 0;
	height: 800px;
	width: 100%;
	overflow: hidden;
	-moz-user-select: none; /* Firefox */
 	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 	user-select: none; /* Propriété standard */
}

.quatrebest .top_4 {
	display: flex;
	position: absolute;
	top: 0;
  height: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to top, transparent, #000);
  z-index: 99;
}

.quatrebest .quatrebest-nav {
	display: flex;
	flex-direction: column;
	position: absolute;
  padding: 50px;
  z-index: 99;
}

.quatrebest .quatrebest-nav h2 {
	display: flex;
	flex-direction: row;
	position: relative;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: black;
  font-size: 55px;
  font-style: normal;
  padding: 20px 50px 0;
}

.quatrebest .quatrebest-nav .trait {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 5px;
	width: 100px;
	background: black;
	margin: 0 50px 50px;
}

.quatrebest .quatre,
.quatrebest .quatre1 {
	display: flex;
  position: relative;
  top: 0;
  left: 0;
  height: 400px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #ededed;
}

.quatrebest .quatre::before,
.quatrebest .quatre1::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: #0000001a;
	z-index: -98;
}

.quatrebest .quatre .nav-quatre-1 {
	display: flex;
	flex-direction: column;
	position: relative;
  height: 100%;
  width: 1200px;
  align-items: center;
  justify-content: center;
  padding: 50px 50px 25px 50px;
}

.quatrebest .quatre1 .nav-quatre-2 {
	display: flex;
	flex-direction: column;
	position: relative;
  height: 100%;
  width: 1200px;
  align-items: center;
  justify-content: center;
  padding: 25px 50px 50px 50px;
}

.quatrebest button {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 70px;
	width: 70px;
	background: white;
	opacity: .5;
	border:	solid 0px #000;
	border-radius: 50px;
	margin: 0 50px 50px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	align-items: center;
	justify-content: center;
	z-index: 99;
}

.quatrebest button::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: transparent;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	filter: blur(7px);
}

.quatrebest .croix4 {
	position: relative;
	top: 0;
	height: 60px;
	width: 60px;
	display: flex;
	border-radius: 5%;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(.8);
	background:	transparent;
}

.quatrebest .croix4 .bar4 {
	height: 5px;
	width: 40px;
	position: relative;
	transform: rotate(45deg);
	background-color: #000;
	z-index: -1;
	transition: 1s ease;
}

.quatrebest .croix4 .bar4::after {
	content:'';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	transform: rotate(-90deg);
	background-color: #000;
	transition: 1s ease;
}

.quatrebest .croix4.active .bar4 {
	transform: rotate(0deg);
}

.quatrebest .croix4.active .bar4::after {
	transform: rotate(-0deg);
}

.quatrebest .info4 {
	position: absolute;
	left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: .90;
  transition: 1s ease;
  z-index: 98;
}

.quatrebest .info4.active {
	left: 0;
}

.quatrebest .info4 p {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	color: white;
	padding: 300px;
}

.quatrebest .swiper {
  width: 100%;
  height: 100%;
}

.quatrebest .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
}

.quatrebest .nav-quatre-1 .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.quatrebest .nav-quatre-2 .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* Fin quatre */

/* Video2D */

.video2d {
	position: relative;
	top: 0;
	left: 0;
	height: 800px;
	width: 100%;
	overflow: hidden;
	-moz-user-select: none; /* Firefox */
 	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 	user-select: none; /* Propriété standard */
}

.video2d .top_5 {
	display: flex;
	position: absolute;
	top: 0;
  height: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to top, transparent, #000);
  z-index: 99;
}

.video2d .nav-video2d {
	display: flex;
	flex-direction: column;
	position: absolute;
  padding: 50px;
  z-index: 99;
}

.video2d .nav-video2d h2 {
	display: flex;
	flex-direction: row;
	position: relative;
  height: 100%;
  width: 100%;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 55px;
  font-style: normal;
  padding: 20px 50px 0;
}

.video2d .nav-video2d .trait {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 5px;
	width: 100px;
	background: white;
	margin: 0 50px 50px;
}

.video2d .nav-video2d button {
	display: flex;
	flex-direction: row;
	position: relative;
	height: 70px;
	width: 70px;
	background: white;
	opacity: .5;
	border:	solid 0px #000;
	border-radius: 50px;
	margin: 0 50px 50px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	align-items: center;
	justify-content: center;
	z-index: 99;
}

.video2d .nav-video2d button::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: transparent;
	border-radius: 50px;
	box-shadow: 0px 0px 10px #000;
	filter: blur(7px);
}

.video2d .nav-video2d .croix5 {
	position: relative;
	top: 0;
	height: 60px;
	width: 60px;
	display: flex;
	border-radius: 5%;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(.8);
	background:	transparent;
}

.video2d .nav-video2d .croix5 .bar5 {
	height: 5px;
	width: 40px;
	position: relative;
	transform: rotate(45deg);
	background-color: #000;
	z-index: -1;
	transition: 1s ease;
}

.video2d .nav-video2d .croix5 .bar5::after {
	content:'';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	transform: rotate(-90deg);
	background-color: #000;
	transition: 1s ease;
}

.video2d .nav-video2d .croix5.active .bar3 {
	transform: rotate(0deg);
}

.video2d .nav-video2d .croix5.active .bar3::after {
	transform: rotate(-0deg);
}

.video2d .info5 {
	position: absolute;
	left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: .90;
  transition: 1s ease;
  z-index: 98;
}

.video2d .info5.active {
	left: 0;
}

.video2d .info5 p {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	color: white;
	padding: 300px;
}

.video2d .swiper {
  width: 100%;
  height: 100%;
}

.video2d .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
}

.video2d .swiper-slide video {
	position: absolute;
	left: 0;
  top: 0;
  height: 100%;
  width: 100%;
	background-size: cover;
  object-fit: cover;
  z-index: -99;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
	font-size: 100px;
}

.swiper-button-next, .swiper-button-prev {
	width: calc(var(--swiper-navigation-size) / 44* 100);
	color: orange;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  width: 30px;
  height: 30px;
}

.swiper-pagination-bullet {
	opacity: 1;
  background: orange;
}

.swiper-pagination-bullet-active {
	opacity: .25;
  background: orange;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 5%;
}

/* Fin vidéo */

/* Footer */

.footer {
  display: flex;
  height: 100px;
  width: 100%;
  background: black;
  	-moz-user-select: none; /* Firefox */
 	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 	user-select: none; /* Propriété standard */
}

.footer .nav-footer {
	display: flex;
	flex-direction: column;
  height: auto;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.footer .nav-footer img {
  height: auto;
  width: 60px;
  padding: 2px 10px 10px 10px;
  transform: rotate(180deg);
}

.footer .nav-footer p {
  font-family: "Open Sans", sans-serif;
	font-size: 12px;
	color: white;
	padding: 2px 10px 20px 10px;
}

/* Fin Footer */