@import url("../../../assets/css/style.css");

:root {
	--footer-full-height: 3%;
}


html, body {
	display: flex;
	flex-direction: column;
}

#header, #content, #footer {
	padding: 0;
	margin: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: #1e1c1c;
	color: white;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}

/* Header part */
#headerLogo a img {
	padding-bottom: 3%;
}

#blankHeaderCompensator {
	height: var(--header-full-height);
	padding-top: 25px;
}

#mobileMenu {
	display: none;
}

#mobileMenuCloseButton {
	position:  fixed;
	width: 6%;
	height:  auto;
	right:  5%;
	top: 5%;
	display: none;
	cursor: pointer;
}


@media only screen and (max-width: 1000px) {
	header {
		height: var(--header-mobile-height);
		padding: 1% 3% 1% 3%;
		width: 100%;
	}


	#blankHeaderCompensator {
		height: var(--header-mobile-height);
		padding: 1% 3% 1% 3%;
	}

		#headerMenu {
			display: none;
		}

		#headerLogo {
			width: 48%;
			height: 100%;
		}

			#headerLogo img {
				width: auto;
				height: 100% !important;
				padding: 0 !important;
			}

		#headerLangageSelection {
			display:  flex;
			width: 40%; 
			justify-content: end;
		}

		#headerLangageSelection img {
			height: auto !important;
		}

		#flagFR, #flagEN {
			width: 1.8em;
		}

		.activeFlag {
			width: 3em !important;
		}

		#mobileMenu {
			width: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			cursor: pointer;
		}

			#mobileMenu img{
				height: 30%;
				width: auto;
			}

		.mobileMenuFullPage {
			display: flex !important;
			position: fixed;
			left: 0;
			top: 0;
			flex-direction: column;
			width: 100% !important;
			height: 100% !important;
			background-color: var(--website-background-color);
			align-items: center;
			justify-content: center;
		}

			.mobileMenuFullPage ul {
				flex-direction: column !important;
				justify-content: space-evenly !important;
				font-size: 1.2em;
				height: 40%;
			}

				.mobileMenuFullPage ul li {
					padding: 0;
					width: auto;
				}

				.mobileMenuFullPage ul li a span {
					font-size: 2em;
				}
}


@media only screen and (max-width: 600px) {
	#headerLangageSelection {
		justify-content: center;
	}
}



/* Content part */
#content {
	display: flex;
	height: calc(98% - var(--header-full-height) - var(--footer-full-height) - 25px);
	justify-content: center;
	align-items:  center;
	overflow-y: hidden;
	width: 100%;
}

	#content .contentPanel {
		display: flex;	
		flex-direction: column;	
		height: 94%;
		align-items: center;
		padding: 3% 5% 3% 5%;
	}

		#policyDate {
			font-style:  italic;
		}

		#content h1 ~ p {
			padding-left: 30px;
		}


		#content h1 ~ h2 {
			padding-left : 60px;
			margin-top:  50px;
		}

		#content h2 ~ p {
			padding-left: 90px;
		}

		#content h2 ~ ul {
			padding-left: 90px;
		}

		#content h2 ~ ul li {
			margin-left: 120px;
		}


	#content .contentPanel .localizedContent {
		display: none;
	}

	.helpLocalizedDiv {
		display: none;
		width:  100%;
		align-items: center;
		overflow-y: auto;
		flex-direction: column;
		transition: all 0.5s;
		padding-top: 8%;
		padding-bottom: 4%;
		height: 88%;
	}

	.helpContainer {
		display: inline-block;
		width: 80%;
		border-top: 1px white solid;
		border-bottom: 1px white solid;	
		transition: all 0.5s;
		margin-bottom: 1%;
	}

		.helpTrigger {
			overflow-y: hidden;	
			text-align: left;
		}

		.helpTrigger, .helpTrigger h3, .helpTrigger p {
			transition: all 0.5s;
		}

		.helpTrigger .helpTitleRow {
			display: flex;
			width: 100;
			justify-content: space-between;
			align-items: center;
		}

		.helpTrigger .helpTitleRow img {
			display: flex;
			width: 100;
			justify-content: space-between;
			height: 15px;
			width: 15px;
			margin-right: 1%;
		}

			.helpTrigger h3 {
				cursor: pointer;
			}

			.helpTrigger p {
				width: 100%;
				display: none;
				opacity: 0;
			}

				input.invisible:checked + .helpTrigger > p {
					display: inline-block;
					opacity: 1;
				}


@media only screen and (max-width: 1000px) {
	#content {
		font-size:  1.4em;
	}
}


/* Footer part */
body footer {
	width: calc(100% - 50px);
	height: var(--footer-full-height);
    border-top: .3em solid rgba(47, 46, 46, .75);
    padding:  2%;
    position:  fixed;
    bottom: 0;
    z-index: 9999;
    background-color: var(--website-background-color);
}

#blankFooterCompensator {
	height: var(--footer-full-height);
    padding:  2%;
}

	body footer .footerTitle {
		display:  flex;
		align-items: center;
		padding-left: 60px;
	}

	body footer .footerTitle ~ .footerTitle {
		margin-top:  50px;
	}

		body footer .footerTitle img {
			display:  inline-block;
			padding-right:  15px;
		}

		body footer .footerTitle h2 {
			width: 70%;
		}


		body footer .footerTitle ~ p {
			padding-left: 90px;
			width: calc(100% - 90px);
		}

	#footerLinks {
		width: 100%;
		display: flex;
		align-items:  center;
		justify-content: space-evenly;
	}

		#footerLinks nav {
			display: flex;
			width: 100%;
			justify-content: space-evenly;
			align-items: center;
		}

		#footerLinks a {
			white-space: nowrap;
			color: lightgrey;
			--border-color: lightgrey;
		    --border-width: 3px;
		    --bottom-distance: 0px;
		    background-image: linear-gradient(var(--border-color), var(--border-color));
		    background-size: 0% var(--border-width);
		    background-repeat: no-repeat;
		    transition: all 0.5s;
		    background-position: 50% calc(100% + var(--bottom-distance));
		}

		#footerLinks .active {
			font-weight: bold;
		    background-size: 100% var(--border-width);
		}

		#footerLinks .active span {
		    padding: 0 !important;
		}
@media only all and (max-width: 600px) {
		#footerLinks a {
			font-size: 1em;
		}
}

@media only all and (max-width: 500px) {
		#footerLinks a {
			font-size: .8em;
		}
}
@media only all and (max-width: 400px) {
		#footerLinks a {
			font-size: .6em;
		}
}

.flexAlignLeft {
	align-items: start !important;
}

.visible {
	display: inline-block !important;	
	padding: 3% 4% 1% 4%;
}