@charset "UTF-8";
/* CSS Document */


/* HELVETICA NEUE */

@font-face {
font-family: 'Helvetica Light Extended';
font-style: normal;
font-weight: normal;
src: url('FONTS/Helvetica Neue/HelveticaNeue-LightExt.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Regular Extended';
font-style: normal;
font-weight: normal;
src: url('FONTS/Helvetica Neue/HelveticaNeue-Extended.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Light';
font-style: normal;
font-weight: normal;
src: url('FONTS/Helvetica Neue/HelveticaNeueLight.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Regular';
font-style: normal;
font-weight: normal;
src: url('FONTS/Helvetica Neue/HelveticaNeue-Roman.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Medium';
font-style: normal;
font-weight: normal;
src: url('FONTS/Helvetica Neue/HelveticaNeueMedium.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Bold';
font-style: normal;
font-weight: normal;
src: url('FONTS/Helvetica Neue/HelveticaNeueBold.woff') format('woff');
}

/* AVARA */
@font-face {
    font-family: 'Avara Bold Italic';
    src:	url('FONTS/Avara-master/fonts/webfonts/BoldItalic/Avara-Bold_Italic_web.eot');
    src:    url('FONTS/Avara-master/fonts/webfonts/BoldItalic/Avara-Bold_Italic_web.eot?#iefix') format('embedded-opentype'),
            url('FONTS/Avara-master/fonts/webfonts/BoldItalic/Avara-Bold_Italic_web.woff') format('woff'),
            url('FONTS/Avara-master/fonts/webfonts/BoldItalic/Avara-Bold_Italic_web.woff2') format('woff2'),
            url('FONTS/Avara-master/fonts/webfonts/BoldItalic/Avara-Bold_Italic_web.ttf') format('truetype'),
            url('FONTS/Avara-master/fonts/webfonts/BoldItalic/Avara-Bold_Italic_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}


::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-thumb {
  background:black;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  -webkit-scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body{
	margin:0%;
	padding:0%;
	background:url(IMAGES/fond.png);
	background-size:cover;

	}
	

	
#demarche, #installation, #performance, #communaute{
	display:none;}
	
	



	

/* GENERAL */

.general-container{
	position:fixed;
	width:100%;
	height:100%;
	
	top:0%;
	background-color:none;
	
	
}

.general-infos-container{
	position:fixed;
	width:auto;
	height:100%;
	
	top:10px;
	left:10px;
	right:10px;
	
	display:flex;
	flex-direction:column;
	
	
	background-color:none;

	

	}
	
.button-container{
	position:absolute;
	left:0%;
	right:0%;
	height:5%;
	
	display:flex;
	justify-content:center;
	align-items:flex-end;
	text-align:center;
	
	font-family: 'Helvetica Regular Extended';
	font-size:0.8em;
	letter-spacing:0.7px;
	text-transform:uppercase;
	
	color:black;
	
	opacity:1;
	z-index:2;
	}
	
.button{
	width:auto;
	height:100%;
	flex-grow:1;
	display:flex;
	justify-content:center;
	align-items:center;
	
	cursor:pointer;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}



.button p{
	margin:0%;
	}
	
.button-bureau-active{
	background-color:white;
	}
	
.button-installation-active{
	background-color:white;
	}
	
.button-performance-active{
	background-color:white;

	}

.button-demarche-active{
	background-color:white;

	}
	
.button-communaute-active{
	background-color:white;

	}
		
.contenu{
	position:absolute;
	top:5%;
	bottom:20px;
	left:0px;
	right:0px;
	width:auto;
	z-index:1;
	display:flex;
	flex-direction:column;
	overflow-y:scroll;
	align-items:flex-start;
	background-color:white;
	}
	
	
/* DEMARCHE */

	
.contenu-onglet{
	position:absolute;
	width:86%;
	height:auto;
	
	font-family: 'Helvetica Regular', sans-serif;
	letter-spacing:0.7px;
	font-size:13.5px;
	line-height:20px;

	margin-top:5%;
	margin-left:7%;
	
	color:black;
	
	display:flex;
	display:-webkit-flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	
	

	}
	
.section{
	display:flex;
	flex-direction:row;
	margin-bottom:6%;
	width:100%;
	}
	
.titre{
	padding:0% 1%;
	font-family: 'Helvetica Medium';
	letter-spacing:0.7px;
	font-size:13.5px;
	margin-right:7%;
	margin-top:0%;	
	text-align:right;
	width:23%;
	height:auto;
	
	}
	
.sous-titre{
	font-family: 'Helvetica Regular';
	}
	


.contenu-partie{
	margin:0%;
	width:65%;
	text-align:left;
	height:auto;
	
	}
	
.contenu-partie p{
	margin:0%;}
	
.contenu-partie a{
	margin:0%;}
	
.contenu-partie img{
	margin:3% 0%;}
	
.note{
	font-family:"Helvetica Medium";
	font-size:11px;
	letter-spacing:0.2px;
	}
	
.youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video-youtube{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
	

/* EXPOSITION */
	


	
.player{
	position:absolute;}
	
	
	

	
/* CONTENU VIDEOS */

.collectionvid {
	
  position:absolute;
  top:0%;
   display:-webkit-flex; flex-basis: auto;
  -webkit-flex-flow: row wrap;

  width:94%;
  height:auto;
  padding-left:3%;
  padding-right:3%;
  
  padding-top:3%;
  
  justify-content:space-between;
  z-index:0;
  
  

  
  }


.projet-video{
	display:-webkit-flex; flex-basis: auto;
	flex-direction:column;
	background-color:none;
	height:auto;
	width:22.6%;
	max-width:22.6%;
	justify-content:flex-start;
	align-items:flex-start;
	flex-grow:1;
	-webkit-flex-grow:1;
	margin:0%;
	padding:0%;
	}
	

	

.video-container{
	display:-webkit-flex; flex-basis: auto;
	align-items:center;
	justify-content:center;
	z-index:3;
	width:100%;
	/*	border:solid 1px black;*/

}

.video-container div{
	width:100%;}
	
.video-container video{
	width:100%;}




.texte-container2{
	height:auto;
	display:flex; flex-basis: auto;
	flex-direction:row;
	flex-wrap:no-wrap;
	justify-content:space-between;
	width:100%;
	padding-bottom:1em;
	color:black;
    
	font-family: 'Helvetica Regular', sans-serif;
	font-size:12px;
	letter-spacing:0.7px;
	}
.titre-container2{
	width:auto;
	margin-right:0%;}
		
.titre-container2 p{
	background-color:none;
	width:auto;}
	




#cercle{
	width:80px;
	height:80px;
	display:flex;
	animation: tourne 5s infinite linear;}
	
@keyframes tourne {
  0% {transform:rotate(0deg);
}
  100% {transform:rotate(360deg);
}}
	
.cercle img{
	max-width:100%;
	max-height:100%;}

#alerte{
	display:none;
	font-family: 'Helvetica Regular', sans-serif;
	width:90%;
	margin-left:5%;
	margin-right:5%;
	margin-top:5%;
	
}