/* --------------------------------------------------------------- */
/*
/* HTML
/*
/* --------------------------------------------------------------- */
* {
	box-sizing : border-box;
}

html, body {
	margin      : 0;
	padding     : 0;
	width       : 100%;
	height      : 100%;
	font-weight : normal;
}

body {
	color            : #FFFFFF;
	background-color : #001329;
	text-align       : center;
}

#main {
	position              : relative;
	top                   : 0;
	left                  : 0;
	width                 : 100%;
	min-height            : 100%;
	margin                : 0 auto;
	text-align            : justify;
	background            : url("../img/fond.jpg") no-repeat center center #001329;
	background-attachment : fixed;
	background-size       : cover;
	font-family           : "Myriad Pro";
	font-size             : 16px;

	width                 : 100vw;
	height                : 100vh;
	overflow              : none;
}

@media (max-width : 575px) {
	#main {
		height   : auto;
		overflow : auto;
	}
}

/* --------------------------------------------------------------- */
/*
/* Header
/*
/* --------------------------------------------------------------- */
#header {
	position : fixed;
	top      : 0;
	left     : 0;
	width    : 100%;
	padding  : 40px;
	z-index  : 15;
}

@media (max-width : 575px) {
	#header {
		padding : 30px 10px;
	}
}

/* --------------------------------------------------------------- */
/*
/* Page
/*
/* --------------------------------------------------------------- */
#menu {
	position         : fixed;
	top              : 0;
	left             : 0;
	z-index          : 10;
	width            : 100%;
	height           : 100%;
	background-color : rgba(0, 19, 41, 0.9);


	justify-content  : center;
	align-items      : center;

	display          : flex;
	visibility       : hidden;
	opacity          : 0;
	/*
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
	*/
}

#menu.affiche {
	visibility         : visible;
	opacity            : 1;

	-webkit-transition : .25s ease-in-out;
	-moz-transition    : .25s ease-in-out;
	-o-transition      : .25s ease-in-out;
	transition         : .25s ease-in-out;
}

#menu ul {
	list-style-type : none;
	padding         : 0;
	margin          : 0;
	text-align      : center;
}

#menu ul li {
	margin : 25px 0;
}

#menu ul li a {
	font-family     : "Bebas Neue";
	color           : #FFFFFF;
	font-size       : 35px;
	text-decoration : none;
}

#menu ul li a:hover {
	color : #F07D00;
}

#menu .menu.menu_responsive {
	display : none;
}

@media (max-width : 575px) {
	#menu .menu {
		display : none;
	}

	#menu .menu.menu_responsive {
		display : block;
	}
}

/* --------------------------------------------------------------- */
/*
/* Page
/*
/* --------------------------------------------------------------- */
#page {
	position   : relative;
	top        : 0;
	left       : 0;
	height     : 100vh;
	text-align : left;

	z-index    : 1;
}

#page h1 {
	font-family    : "Bebas Neue";
	text-transform : uppercase;
	font-size      : 50px;
}

#page h1 span {
	color : #F07D00;
}

#page .plus {
	position      : relative;
	top           : 0;
	left          : 0;
	width         : 32px;
	height        : 32px;
	border-radius : 50%;
	border        : 1px solid #FFFFFF;
	cursor        : pointer;
	margin-top    : 15px;
}

#page .plus:after {
	content          : "";
	position         : absolute;
	top              : 50%;
	left             : 50%;
	height           : 18px;
	width            : 1px;
	margin-top       : -9px;
	margin-left      : -0.5px;
	background-color : #F07D00;
}

#page .plus:before {
	content          : "";
	position         : absolute;
	top              : 50%;
	left             : 50%;
	width            : 18px;
	height           : 1px;
	margin-top       : -0.5px;
	margin-left      : -9px;
	background-color : #F07D00;
}

#page .section_page {
	padding-top : 180px;

	display     : flex;
	align-items : center;
}


#page .section_page .conteneur_texte a {
	color           : #FFFFFF;
	text-decoration : none;
}

#page .section_page hr {
	background-color : #F07D00;
}

#page .nowrap {
	white-space : nowrap;
}

#page .bouton {
	position         : relative;
	top              : 0;
	left             : 0;
	display          : inline-block;
	padding          : 7px 15px;
	color            : #FFFFFF;
	background-color : #F07D00;
	text-decoration  : none;
	text-transform   : uppercase;
	margin-top       : 15px;
}

#page p {
	margin-bottom : 13px;
}

/* --------------------------------------------------------------- */
/*
/* Footer
/*
/* --------------------------------------------------------------- */
#footer {
	position  : fixed;
	bottom    : 0;
	left      : 0;
	width     : 100%;
	font-size : 13px;
	padding   : 30px 0;
	z-index   : 2;
}

#footer a {
	color           : #FFFFFF;
	text-decoration : none;
}

#footer .pipe {
	color   : #F07D00;
	display : inline-block;
	margin  : 0 7px;
}

@media (max-width : 575px) {
	#footer {
		padding : 15px 0;
	}

}


.popup {
	position        : fixed;
	top             : 0;
	left            : 0;
	right           : 0;
	bottom          : 0;
	z-index         : 1000;
	display         : flex;
	align-items     : center;
	justify-content : center;
	pointer-events  : none;
	opacity         : 0;
	transition      : opacity .35s;
	/*visibility      : hidden;*/
}

.popup.active {
	opacity        : 1;
	visibility     : visible;
	pointer-events : all;
}


.popup:after {
	content         : "";
	position        : absolute;
	top             : 0;
	left            : 0;
	bottom          : 0;
	right           : 0;
	z-index         : -1;
	background      : rgba(0, 0, 0, 0.6);
	backdrop-filter : blur(2px);
}

.popup .content {
	max-width : 620px;
	width     : 100%;
	padding   : 10px;
	position  : relative;
}


.popup .close {
	position : absolute;
	right    : 32px;
	top      : -32px;
	width    : 32px;
	height   : 32px;
	opacity  : 0.4;
	cursor   : pointer;
	transition : opacity .25s;
}

.popup .close:hover {
	opacity : 1;
}

.popup .close:before, .popup .close:after {
	position         : absolute;
	left             : 15px;
	content          : " ";
	height           : 33px;
	width            : 2px;
	background-color : #FFFFFF;
}

.popup .close:before {
	transform : rotate(45deg);
}

.popup .close:after {
	transform : rotate(-45deg);
}