html{ 
	height:100%;
	font-size:1.106vh;
}
/* if more than maquette height, ceil the font-size */
@media screen and (min-height: 904px) {
  html{ font-size:10px;}
}

body{
	height: 100%;
	display: flex;
	flex-direction: column;
	color: #fff;
	font-size: 23px;
	font-family: 'Bebas Neue';
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0px;
	
	padding: 0;
	overflow: auto;
	overflow-x:hidden;
}


/* fonts definitions */
@font-face{
	font-family: 'Bebas Neue';
	src: url('../assets//fonts/bebas-neue-pro-regular.ttf');
}
@font-face{
	font-family: 'Bebas Neue';
	src: url('../assets//fonts/bebas-neue-pro-bold.otf');
	font-weight:500;
}
@font-face{
	font-family: 'Roboto';
	src: url('../assets/fonts/Roboto-Bold.ttf');
}
@font-face{
	font-family: 'Roboto';
	src: url('../assets/fonts/RobotoCondensed-Italic.ttf');
	font-style: italic;
}
@font-face{
	font-family: 'Roboto Condensed';
	src: url('../assets/fonts/RobotoCondensed-Regular.ttf');
}



/* text definitions */

.text{
	font-size: 44px;
}
.text1{
	font-size: 5.4rem;
	font-weight:500;
}
.text1b{
	font-size: 4.8rem;
	font-weight:500;
}
.text-green{
	color: #8CC375;
	font-size: 7.4rem;
	line-height: 0.959;
	font-weight:500;
}
.text-green.attente{
	font-size: 8.2rem;
}
.text-green.termine{
	font-size: 5.6rem;
}
.text-smaller{
	font-size: 3.6rem;
	letter-spacing: 0.5px;
}
.text3{
	font-size: 2.8rem;
}
.text4{
	font-family: 'Inter';
}
.text5{
	font-family: 'Bebas Neue';
}


sup{
	font-size:65%;
}




/* header */

.header{
	display: flex;
	align-items: flex-start;
	gap: 82px;
	padding: 12px 3% 9px 3%;
	border-left: 4px solid #fff;
	border-top: 3px solid #fff;
	border-right: 4px solid #fff;
	border-bottom: 1px solid #fff;
	font-weight:500;
	background-color: #215732;
}

.header .comment-participer{
	text-transform: uppercase;
}

.header .reglement-du-jeu{
	text-transform: uppercase;
}

.header .contact{
	margin-left: auto;
	text-transform: uppercase;
}

.header a:active, .header a.active{
	color:#8CC375;
}

/* header mobile */

.btn-burger{
	position:absolute; left:0; top:0;
	cursor:pointer;
	display:none;
	z-index:2;
}
.btn-burger img{
	width: 49px; height: 51px;
}

.menu-mobile{
	z-index:2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #215732;
	position:absolute; left:49px; top:0;
	font-size:22px;
	display:none;
}

.menu-mobile .item-menu{
	width: 184px;
	flex-shrink: 0;
	text-transform: uppercase;
	background-color: #fff;
	padding: 13px 10px 11px 10px;
	border-top: 1px solid #215732;
}
.menu-mobile .item-menu:nth-child(1){
	border-top:0;
}
.item-menu:hover,.item-menu.active{
	background-color: #215732;
	color:white;
	text-decoration:none;
}


@media(max-width:728px){
	.header{
		display:none;
	}
	.btn-burger{
		display:block;
	}
}






/* footer */

.footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border-top: 1px solid #fff;
	border-left: 4px solid #fff;
	border-right: 4px solid #fff;
	padding:12px;
	margin-top:auto;
	font-family:arial;
	font-size:14px;
	background-color:#215732;
}

.footer .mentions-legales{
	margin-left: 1px;
}



/* btns */

a:hover{
	text-decoration: underline;
}
.btn{
	max-width:100%;
}
a.btn:hover{
	text-decoration: none;
}
.logo:hover{
	transform:scale(0.95);
}
.btn-sm:hover{
	transform:scale(0.95);
	cursor:pointer;
}
.btn:hover{
	transform:scale(0.95);
}



/* skeleton */

.container{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 0;
	border:4px solid white;
	flex-grow:1;
}

.logo{
	height:13.5rem;
	width:auto;
}

.container .photo-left{
	width: calc(50% + 1px); height:100%;
	flex-shrink: 0;
	background-image:url(../assets/photo-bg-desktop.jpg);
	background-size:cover;
	background-position:center 30%;
}

.container .sub-container{
	flex-grow:1;
	height:100%;
	margin-left:-1px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color:#215732;
	
}

@media(max-width:1190px){
	.photo-left{
		display:none;
	}
	.container .sub-container{ margin-left:0;}
	.container{ height:unset;}
	.container.height-auto{
		height:auto !important;
	}
	.text1b{ font-size: 6rem;}
	
	.text1{
		font-size:6.8rem;
	}
	
	.text3{
		font-size:3.2rem;
	}
}

@media(max-width:728px){
	.container{ height:unset;}
}