@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Open Sans;
	width: auto;
	background-color: whitesmoke;
}

.accueil {
	background-color: white;
}

.accueil h1 {
	text-align: center;
    text-transform: uppercase;
    color: #454545;
    font-size: 70px;
    font-family: Arial;
}

nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    width: 200px;
	background-color: #282b2e;
	opacity: 0.8;
 	transform: translate3d(-200px, 0, 0);
    transition: transform 0.4s ease;
}

.active-nav nav {
    transform: translate3d(0, 0, 0);
}

nav ul {
    list-style: none;
    margin-top: 100px;
}

nav ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    color: #fff;
    padding: 10px 0;
}
            
.nav-bascule-btn {
    display: block;
    position:relative;
    left: 200px;
    width: 40px;
    height: 40px;
	filter: brightness(0) invert(1);
}

.header{
	width: 100%;
	height: 80px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	font-size: 20px;
	box-shadow: 0px 3px 5px 6px #ccc;
	color: #c2c2c2;
	background-color: #100e17;
}

.footer{
	width: 100%;
	height: 80px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	font-size: 20px;
	color: #c2c2c2;
	background-color: #100e17;
	box-shadow: 0px -3px 5px 6px #ccc;
}

@media (max-width: 500px){
	.header{
		flex-direction: column;
		height: auto;
		}
}

.conteneur{
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-around;
}

.box{
	width: 40%;
	display: block;
    height: 400px;
	background: #17141d;
 	margin-left: 2.5px;
	margin-right: 2.5px;
  	margin-top: 50px;
	margin-bottom: 50px;
	
	transition: transform .2s;

  	color: white;
  	font-weight: bold;
  	text-align: center;
	
	border-radius: 16px;
	box-shadow: 0 4px 80px #070509;
}

.box_step{
	width: 98%;
    height: 50px;
 	margin-left: 2.5px;
	margin-right: 2.5px;
  	margin-top: 25px;
	margin-bottom: 25px;
	justify-content: center;
	transition: transform .2s;
	display: flex;
  	color: white;
  	font-weight: bold;
  	text-align: center;
	border-radius:10px;
	align-items: center;
	background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
	box-shadow: inset 0 0 10px #000000;
}

.box_big{
	width: 98%;
	display: block;
    height: 550px;
	background: #17141d;
 	margin-left: 2.5px;
	margin-right: 2.5px;
  	margin-top: 50px;
	margin-bottom: 50px;
	
	transition: transform .2s;

  	color: white;
  	font-weight: bold;
  	text-align: center;
	border-radius:10px;
}
.box:hover {
  transform: scale(1.2);
  background-color: #333;
  border-radius:10px;
}


.titrebox {
  color: #fff;
  font-family: monospace;
  font-size: 20px;
  margin-top: 15px;
}

.image{
	width: 100%
}

.image_energie{
	width: 85%;
	margin-top: 5px;
}

.image_pas{
	margin-top: -30px;
}

.image_nbpas{
	width: 75%;
}

.image_sensfiletage{
	width: 100%;
}
.image_profilfilet{
	width: 85%
}

.liste_box{
	text-align: left;
	margin-left: 19px;
}