/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
    font-family: FranklinGothicBook;
}
nav{
    width: 100%;
    margin: 0 auto;
    background-color: white;
    position: sticky;
    top: 0px;
}
.conteneur-nav{
    position: absolute;
    width: 100%;
}
nav input[type=checkbox]{
    display: none;
}

nav label {
	display: block;
	width: 115px;
	padding: 0px;
	text-align: center;
	background-color: transparent;
	float: right;
	color: #fff;
	background-image: url("../img/menu_icon.png");
	background-repeat: no-repeat;
	background-size: 115px;
	background-position-x: 5px;
	background-position-y: bottom;
	height: 85px;
	position: fixed;
	right: 0px;
	z-index: 1000;
	bottom: 0px;
	margin: 0px;
}

nav ul{
    display: none;
    list-style-type: none;
    background-color: #30368c;
}

nav input[type="checkbox"]:checked + ul {
	/* transform: translateY(-90%); */
	display: inline-block;
	flex-flow: column;
	margin: 0px;
	float: right;
	position: fixed;
	right: 35px;
	z-index: 1000;
	bottom: 54px;
	margin: 0px;
}


nav ul li{
    flex: 1 1 auto;
    text-align: center;
	margin-bottom: 0px;
}
nav > div > ul > li > a{
    color: white;
}


nav a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px 20px 10px 20px;
}

nav a:hover{
	color: #fff;
	background-color: #64328a;
	text-decoration: none;
}


.sous{
    display: flex;
    flex-flow: column wrap;
    z-index: 1000;
}

.sous li{
    flex: 1 1 auto;
    text-align: left;
}
.sous a{
    padding: 10px;
    background-color: RGBa(200,200,200,0.8);
}

@media screen and (min-width: 980px){
    .conteneur-nav{
        position: static;
    }
    nav label, nav input{
        display: none;
    }
	nav input[type="checkbox"]:checked + ul, nav ul {
		display: flex;
		flex-flow: row wrap;
		background-color: #31368c;
	}
    nav ul li{
        position: relative;
    }
    nav > div > ul > li > a{
        color: #fff;
    }
    nav a{
        border-bottom: 2px solid transparent;
    }
    nav a:hover{
        color: #fff;
        border-bottom: 2px solid gold;
		background-color: #64328a;
    }
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #CCC;
        background-color: white;
        position: absolute;
        width: 100%;
    }
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
    }
    .sous a{
        border-bottom: none;
        background-color: white;
    }
    .sous a:hover{
        border-bottom: none;
        background-color: RGBa(200,200,200,0.1);
    }
    .deroulant > a::after{
        content:" ▼";
        font-size: 12px;
    }
	

}

.conteneur-contenu{
  margin: 50px 20px;
  height: 1500px;
}

.conteneur-nav > ul > li {
    margin-bottom: 0px;
}

nav a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 6px 15px 6px 15px;
}

.divider {
	height: 1px;
	margin: 9.5px 0;
	overflow: hidden;
	background-color: #e5e5e5;
}

.link-legal {
    color: #a0a0a0;
    font-size: 10pt;
}