*
{
	text-decoration: none;
	list-style: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: 0; /*contour sur les liens à enlever*/
    border: 0;
}

body
{
	color: white;
	background-color: black;
}

.logo-haut
{
	width: auto;
	/*height: 7.3vh;
	padding-top: 0.4vh;*/
	height: 3.7vw;
	padding-top: 0.2vw;
	transition: all 500ms;
} 

#cercle-noir:hover .logo-haut
{
	width: auto;
	height: 100%;
	margin: 0.5vw;
	transition: all 500ms;
}

#cercle-noir
{
	background-color: rgb(26, 26, 26);
	margin-left: 1.6vw;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.7vw;
	width: 3.7vw;
	transition: all 500ms;
}

#cercle-noir:hover
{
	height: 6vw;
	width: 6vw;
	padding: 0.5vw;
	transition: all 500ms;
}

#header
{
	background-color: rgb(26, 26, 26);
	/*height: 8.4vh;*/
	height: 4.05vw;
	display: flex;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 3;
}

a
{
	color: white;
	font-family: 'Asap', Arial;
}

header a 
{
	height: 100%;
	display: flex;
	align-items: center;
	width: 100%;
}

.bouton-nav
{
	padding-left: 1.1vw;
	padding-right: 1.1vw;
}

nav ul 
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.2vw;
	padding-right: 1.6vw;
	height: 100%;
}

nav
{
	display: flex;
	align-items: center;
}

nav ul li 
{
	height: 100%;
	transition: all 600ms;
}

nav ul li:hover 
{
	background-color: rgba(255, 255, 255, 0.15);
	transition: all 500ms;
}

nav ul li a
{
	transform: translateY(0);
	transition: transform 300ms ease-in 100ms;
}

nav ul li a:hover
{
	/*margin-bottom: 0.3vw;*/
	transform: translateY(-0.15vw);
	transition: transform 150ms ease-in 50ms;
}

/*#icone-home
{
	width: 1.4vw;
}

#lien-home
{
	background-color: white;
	border-radius: 100%;
	height: 2.6vw;
	width: 2.6vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.55vw;
	margin-right: 0.55vw;
}

#parent-home
{
	display: flex;
	align-items: center;
	justify-content: center;
}*/

#menu-burger
{
	display: none;
}

main
{
	margin-top: 4.05vw;
}

#gen 
{
	background-color: rgb(99 69 148);
	padding-left: 10%;
	padding-right: 10%;
	text-align: justify;
	font-family: 'Asap', Arial;
	padding-bottom: 1.6vw;
}

#gen h1
{
	display: flex;
	justify-content: center;
	padding-top: 1.2vw;
	padding-bottom: 1.2vw;
	font-size: 2.4vw;
}

#gen h2
{
	padding-top: 0.8vw;
	padding-bottom: 0.8vw;
	font-size: 1.6vw;
}

#gen p 
{
	font-size: 1vw;
	text-align: justify;
}

.cta-button 	
{
	display: inline-block;
	background-color: rgb(130, 69, 229);
	padding-left: 1.8em;
	padding-right: 1.8em;
	padding-top: 1em;
	padding-bottom: 1em;
	border-radius: 0.625vw;
	font-weight: bold;
	transition: transform 150ms ease-in 50ms;
}

.cta-button:hover
{
	transform: translateY(-5px);
	transition: transform 150ms ease-in 50ms;
}

@media screen and (min-width: 3000px)
{
	#footer-general 
	{
		padding-bottom: 1vw;
	}
}

@media screen and (min-width: 500px) and (max-width: 950px)
	{
			#header 
		{
			height: 10vw;
			align-items: center;
		}

		#header li a 
		{
			font-size: 2.8vw;
			padding-top: 3.4vw;
			padding-bottom: 3.4vw;
		}

		main 
		{
			margin-top: 10vw;
		}

		.logo-haut 
		{
			height: 7.4vw;
			padding-left: 1vw;
			transition: none;
		}

		#cercle-noir:hover
		{
			transition: none;
			height: 0;
			width: 0;
			padding: 0;
		}

		#cercle-noir:hover .logo-haut
		{
			width: auto;
			height: 7.4vw;
			margin: 0;
			transition: unset;
		}

		.logo-haut
		{
			height: 10vw;
			padding-left: 3vw;
		}

		#cercle-noir:hover .logo-haut
		{
		width: auto;
		height: 10vw;
		margin: 0;
		transition: unset;
		}

		#cercle-noir:hover
		{
		height: 0;
		width: 0;
		padding: 0;
		transition: unset;
		}

		#gen h1
		{
		display: flex;
		justify-content: center;
		padding-top: 1.5vw;
		padding-bottom: 1.5vw;
		font-size: 3.2vw;
		}

		#gen h2
		{
		padding-top: 1.2vw;
		padding-bottom: 1.2vw;
		font-size: 3vw;
		}

		#gen p 
		{
		font-size: 2.6vw;
		}

		#footer-principal
		{
			display: flex;
			flex-direction: column;
			width: 85%;
			position: relative;
			padding-bottom: 8vw;
		}

		#footer-principal h2
		{
			font-size: 5.8vw;
		}

		#footer-a 
		{
			width: 100%;
		}

		#footer-b
		{
			width: 100%;
			padding-top: 7vw;
		}

		#footer-c 
		{
			width: 100%;
		}

		#footer-c h2 
		{
			font-size: 7vw;
		}

		.logos-a 
		{
			height: 3vh;
			padding-right: 1.5vw;
		}

		#sous-contact li 
		{
			font-size: 4vw;
			width: 55vw;
			padding-top: 2vw;
		}

		#logo-mail
		{
		margin-top: 0vh;
		}


		#logo-map
		{
		margin-bottom: 1vh;
		}

		#carte 
		{
			width: 100%;
			height: 45vw;
		}

		#sous-reseaux
		{
			width: 100%;
			margin-right: 0;
		}

		#sous-reseaux ul
		{
			display: flex;
			justify-content: center;
			width: 100%;
		}

		.logos-b 
		{
			height: 13vw;
			padding-right: 4vw;
			padding-left: 4vw;
		}

		#mentions
		{
			font-size: 3vw;
			position: absolute;
			bottom: 0;
		}

		.cta-button 
		{
			font-size: 4vw;
			border-radius: 3.5vw;
			margin-left: 5vw;
		}

		.fleche 
		{
			height: 3vw;
		}
	}

	@media screen and (max-width: 500px)
	{
		.floute 
		{
			filter: blur(2.6px);
		}

		#header  
		{
			height: 12vw;
			display: flex;
			align-items: center;
		}

		#header nav  
		{
			width: 65vw;
			position: absolute;
			right: 0;
			top: 12vw;
			display: none;
		}

		#header nav li:last-child
		{
			border-bottom-left-radius: 30px;

		}

		header ul
		{
			flex-direction: column;
			padding-right: 0;
		}

		header ul li  
		{
			font-size: 4.5vw;
			background-color: rgb(26, 26, 26);
			width: 100%;
		}

		.bouton-nav 
		{
			padding-top: 12vw;
			padding-bottom: 12vw;
			padding-right: 8vw;
			padding-left: 8vw;
			justify-content: center;
		}

		nav ul li:hover 
		{
		background-color: rgb(26, 26, 26);
		transition: unset;
		}

		nav ul li a:hover
		{
		/*margin-bottom: 0.3vw;*/
		transform: unset;
		}

		#menu-burger
		{
			display: block;
			height: 8vw;
			width: 8vw;
			margin-right: 5vw;
			position: relative;
			z-index: 1;
		}

		#menu-burger.banger ~ nav 
		{
			display: block;
		}

		#main 
		{
			margin-top: 12vw;
		}

		.logo-haut
		{
			height: 10vw;
			padding-left: 3vw;
		}

		#cercle-noir:hover .logo-haut
		{
		width: auto;
		height: 10vw;
		margin: 0;
		transition: unset;
		}

		#cercle-noir:hover
		{
		height: 0;
		width: 0;
		padding: 0;
		transition: unset;
		}

		main 
		{
			margin-top: 12vw;
		}

		#gen h1
		{
		display: flex;
		justify-content: center;
		padding-top: 1.5vw;
		padding-bottom: 1.5vw;
		font-size: 4.1vw;
		}

		#gen h2
		{
		padding-top: 1.8vw;
		padding-bottom: 1.8vw;
		font-size: 3.6vw;
		}

		#gen p 
		{
		font-size: 3.2vw;
		}

		#footer-principal
		{
		display: flex;
		flex-direction: column;
		width: 85%;
		position: relative;
		padding-bottom: 8vw;
		}

		#footer-principal h2
		{
		font-size: 5.8vw;
		}

		#footer-a 
		{
		width: 100%;
		}

		#footer-b
		{
		width: 100%;
		padding-top: 7vw;
		}

		#footer-c 
		{
		width: 100%;
		}

		#footer-c h2 
		{
		font-size: 7vw;
		}

		.logos-a 
		{
		height: 3vh;
		padding-right: 1.5vw;
		}

		#sous-contact li 
		{
		font-size: 4vw;
		width: 55vw;
		padding-top: 2vw;
		}

		#logo-mail
		{
		margin-top: 0vh;
		}


		#logo-map
		{
		margin-bottom: 1vh;
		}

		#carte 
		{
			width: 100%;
			height: 45vw;
		}

		#sous-reseaux
		{
			width: 100%;
			margin-right: 0;
		}

		#sous-reseaux ul
		{
			display: flex;
			justify-content: center;
			width: 100%;
		}

		.logos-b 
		{
			height: 13vw;
			padding-right: 4vw;
			padding-left: 4vw;
		}

		#mentions
		{
			font-size: 3vw;
			position: absolute;
			bottom: 0;
		}

		.cta-button 
		{
			font-size: 4vw;
			border-radius: 3.5vw;
			margin-left: 5vw;
		}

		.fleche 
		{
			height: 3vw;
		}
	}