article{
	min-height:100vh;
	position:relative;
	float:left;
	margin:0;
	padding:0;
	width:100%;
	display:inline-block;
	height:100vh;
	}
	
html{
	width:100%;
	height:100%;
	overflow: hidden;
	}
	
body{
	background-color:transparent;
	width:100%;
	height:100%;
	overflow:hidden;
	}
	
#scrolling-content{
	height:100%;
	width:100%;
	overflow-x:hidden;
	overflow-y:auto;
	}

/*animCube*/
.mesCubesAnim-container{
	position:absolute;
	z-index:-3000;
	}
	
.mesCubesAnim-content{
	position:relative;
	margin-left:-50%;
	margin-top:-50%;
	}
	
.bg-anim-container{
	position:fixed;
	z-index:-1;
	transition:background-color .7s ease;
	}

/*illus*/
.container-zone-anim-general{
	width:720px;
	height:720px;
	left:50%;
	margin-left:-600px;
	top:50%;
	margin-top:-360px;
	background-color:rgba(0,0,0,.4);
	position:fixed;
	z-index:-1;
	}

.illu-article-container{
	width:720px;
	height:720px;
	left:50%;
	margin-left:-600px;
	top:50%;
	margin-top:-360px;
	position:fixed;
	z-index:-1;
	}

.image-cube{
	position:absolute;
	top:0;
	left:0;
	}
	
.image-next-img{
	opacity:0;
	top:100%!important;
	}
	
.image-prev-img{
	opacity:0;
	top:-100%!important;
	}
	
.image-inactiv-img{
	opacity:0;
	top:0vh!important;
	}

.image-cube-v0{transition: .4s ease;}
.image-cube-v1{transition: .6s ease;}
.image-cube-v2{transition: .7s ease;}
.image-cube-v3{transition: .8s ease;}
.image-cube-v4{transition: 1s ease;}
.image-cube-v5{transition: 1.2s ease;}
.image-cube-v6{transition: 1.4s ease;}

/*calendrier*/
.calendrier-container{
	width:auto;
	height:auto;
	}
	
.calendrier-container-ul{
	width:160px;
	height:720px;
	position:fixed;
	top:50%;
	left:50%;
	margin-top:-360px;
	margin-left:-760px;
	}
	
.calendrier-container-li{
	height:calc( 100% / 12 );
	cursor:pointer;
	}
	
.bg-cal-cadre{
	position:absolute;
	width:0;
	left:auto;
	right:0;
	overflow:hidden;
	transition:width .7s ease;
	}
	
.bg-cal-cadre-content{
	border:1px solid #FFFFFF;
	box-sizing:border-box;
	border-right:none;
	}
	
.bg-cal-bg{
	position:absolute;
	width:0;
	left:auto;
	right:0;
	opacity:0;
	background-color:#FFFFFF;
	transition:.7s ease;
	}
	
.calendrier-container-li p{
	height:100%;
	line-height:60px;
	box-sizing:border-box;
	padding-left:20px;
	}
	
.moisLittle{display:none;}						
						
						
/*nav*/
.maNav{
	position:fixed!important;
	top:30px;
	left:auto;
	right:40px;
	width:auto;
	height:auto;
	}
	
.logo-container{
	height:100px;
	width:100px;
	float:right;
	position:relative;
	display:inline-block;
	}
	
.logo-container svg{
	display:inline-block;
	width:100%;
	height:100%;
	}
	
.button-container{
	height:60px;
	width:auto;
	border:1px solid #FFFFFF;
	}
	
.maNav .button-container{
	float:right;
	margin-right:30px;
	}
	
.button-content{
	box-sizing:border-box;
	padding-left:20px;
	padding-right:20px;
	width:auto;
	height:100%;
	}
	
.rideau-button-container{
	position:absolute;
	height:100%;
	width:0;
	left:0;
	transition: .7s ease;
	z-index:-1;
	} 
	
.button-content p{
	font-size:12pt;
	height:60px;
	line-height:60px;
	display:inline-block;
	float:left;
	margin-right:15px;
	transition:.5s ease;
	z-index:1;
	}
	
.fleche-svg-container{
	width:22px;
	height:22px;
	margin-top:19px;
	position:relative;
	float:left;
	}
	
.button-content svg *{transition:fill .5s ease;}

/*articles*/
.button-toTop{
	position:absolute;
	top:50%;
	margin-top:390px;
	left:auto;
	right:50%;
	margin-right:590px;
	cursor:pointer;
	}
	
article{
	box-sizing:border-box;
	padding-left:calc( 50% - 600px + 720px + 60px );
	padding-top:calc( 50vh - 360px );
	}
	
.article-content{
	position:relative;
	float:left;
	width:500px;
	}	

.ligne-article-container{
	height:1px;
	margin-top:30px;
	margin-bottom:30px;
	}
	
.button-toBot{
	position:relative;
	cursor:pointer;
	float:left;
	margin:0;
	padding:0;
	margin-top:30px;
	}
	
.button-toBot .fleche-svg-container svg{
	behavior:url(-ms-transform.htc);  
	-moz-transform:rotate(90deg);  
	-webkit-transform:rotate(90deg);  
	-o-transform:rotate(90deg);  
	-ms-transform:rotate(90deg);  
	}
	
.button-toBot .rideau-button-container{
	top:0;
	width:100%;
	height:0;
	}
	
.button-toTop .fleche-svg-container svg{
	behavior:url(-ms-transform.htc);  
	-moz-transform:rotate(-90deg);  
	-webkit-transform:rotate(-90deg);  
	-o-transform:rotate(-90deg);  
	-ms-transform:rotate(-90deg);  
	}

.button-toTop .rideau-button-container{
	top:auto;
	bottom:0;
	width:100%;
	height:0;
	}
	
.zone-content p{
	font-size:13pt;
	line-height:16pt;
	color:#FFFFFF;
	font-weight:bold;
	opacity:1;
	}
	
.zone-content p .noexhergue{
	opacity:.8;
	font-weight:normal;
	}

/*cadre du bas */
.zone-bas-content{
	position:fixed;
	left:50%;
	top:auto;
	bottom:50%;
	margin-bottom:-410px;
	margin-left:0px;
	height:auto;
	width:660px;
	z-index:300;
	transition:0.8s ease;
	opacity:1;
	}

.up-title{height:auto;}

.up-title p{
	width:100%;
	text-align:center;
	height:auto;
	margin:0;
	padding:0;
	margin-top:10px;
	margin-bottom:10px;
	}
	
.left-title p{
	height:auto;
	width:100%;
	text-align:center;
	}

.flexbox{
	display: flex;
	align-items: center;
	justify-content: center;
	}

/*txt*/
.p170{
	font-size:15pt!important;
	line-height:18pt!important;
	}
	
.p400{
	font-size:40pt;
	line-height:44pt;
	}
	
.p560{
	font-size:56pt;
	line-height:60pt;
	}
	
.p660{
	font-size:66pt;
	line-height:70pt;
	}
	
.up-content-txt{
	font-size:13pt;
	box-sizing:border-box;
	padding:20px;
	}
	
.right-content-txt p{
	font-size:13pt;
	box-sizing:border-box;
	padding:20px;
	width:100%;
	height:auto;
	}
	
.first-zone-bas .right-content-txt p{padding:30px;}

.w70{
	width:70%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	}
	
.w55{
	width:55%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	}
	
.w45{
	width:45%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	}
	
.w50{
	width:50%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	}
	
.w65{
	width:65%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	}
	
.w35{
	width:35%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	}
	
.w30{
	width:30%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	}

/*transition*/	
.maNav .button-content:hover .rideau-button-container{width:100%;}		
.button-toTop .button-content:hover .rideau-button-container,.button-toBot .button-content:hover .rideau-button-container{height:100%;}
.button-content:hover p{color:#000000;}		
.button-content:hover svg *{fill:#000000;}	

.zone-bas-content-next{left:100%;opacity:0;z-index:0;}
.zone-bas-content-prev{left:0%;opacity:0;z-index:0;}

.calendrier-container-li:hover .bg-cal-cadre{width:100%;}

.calf0 .bg-cal-bg{width:100%;opacity:.3;}
.calf1 .bg-cal-bg{width:50%;opacity:.25;}
.calf2 .bg-cal-bg{width:25%;opacity:.20;}
.calf3 .bg-cal-bg{width:12%;opacity:.15;}
.calf4 .bg-cal-bg{width:6%;opacity:.10;}
.calf5 .bg-cal-bg{width:3%;opacity:.05;}