*
{
	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;
}



#haut-du-main
{
	height: calc(100vh - 4.05vw);
	margin-top: 4.05vw;
	display: flex;
	align-items: center;
	background-color: rgb(99, 69, 148);
}

.main-gauche
{
	clip-path: polygon(0 0, 90% 0, 70% 100%, 0% 100%);
	background-color: red;
	height: 100%;
	width: 70%;
	padding: 3%;
	background-color: rgb(43, 23, 77);
	display: flex;
	flex-direction: column;
}

.main-gauche #foutu-soulignement
{
	border-bottom: solid red 0.4vh;
	position: absolute;
	width: 100%;
	bottom: 2%;
}

#liberons
{
	position: relative;
}

.main-gauche h1
{
	width: 52vw;
	font-size: 5vw;
	font-family: 'Asap', Arial;
	padding-top: 5vw;
}

.main-gauche p 
{
	width: 43vw;
	font-family: 'Asap', Arial;
	font-size: 1.7vw;
	padding-top: 1.1vw;
	padding-bottom: 4.16vh;	
	position: relative;	
}	

#spirale
{
	height: auto;
	width: 26vw;
	position: absolute;
	transform: translate(50%, 92%);
}

.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;
}

.main-droite
{
	width: 30%;
	height: 100%;
	position: relative;
}

.slider 
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 15vw;
	height: 20vw;
}

#slider-haut
{
	position: relative;
	top: 8vw;
	right: 6vw;
	height: 36vw;
	width: 30vw;
}

.bordure-image
{
	border-radius: 100%;
	overflow: hidden;
	height: 15vw;
	width: 15vw;
	position: relative;
}

#bordure-haut
{
	height: 30vw;
	width: 30vw;
}

.barre-slider
{
	height: 1.6vw;
	min-width: 10vw;
	max-width: 20vw;
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 0.6vw;
	padding-right: 0.6vw;
	border-radius: 10vw;
	/*clip-path: polygon(0% 0%, 50% 30%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);*/
	/*clip-path: ellipse(60% 90% at 50% 0);*/
}

#barre-haut
{
	height: 1.6vw;
	width: 15vw;
}

#slider-haut.slider a 
{
	width: 30vw;
	height: 30vw;
}

.slider a 
{
	width: 15vw;
	height: 15vw;
	overflow: hidden;
	border-radius: 100%;
}

.stock-images
{
	display: flex;
	height: 30vw;
/*	width: 90vw;*/
	position: absolute;
	transition: left 1.2s ease-out;
}

.slide 
{
	height: 30vw;
	width: 30vw;
	object-fit: cover;
}

.slide-petit
{
	height: 15vw;
	width: 15vw;
	object-fit: cover;
}

.selecteur
{
	background-color: rgb(153, 23, 21);
	border-radius: 100%;
	height: 0.7vw;
	width: 0.7vw;
	margin-left: 0.2vw;
	margin-right: 0.2vw;
}

.selectionnate
{
	background-color: rgb(130, 69, 229);
	height: 1vw;
	width: 1vw;
	transition: all 350ms ease-out;
}

.selecteur-fleche
{
	height: 1.2vw;
	width: 1.2vw;
}

.selecteur, .selecteur-fleche
{
	cursor: pointer;
}

.precedent 
{
	left: 36%;
	bottom: 6.4vw;
	rotate: 180deg;
}

.suivant
{
	right: 36%;
	bottom: 6.4vw;
}

#solution h1
{
	font-family: 'Asap', Arial;
	text-align: center;
	color: white;
	font-size: 2.8vw;
	padding-top: 2.4vh;
	padding-bottom: 4.4vh;
}

.fond-noir
{
	width: 100%;
	padding-bottom: 4.5vh;
	background-color: rgb(26, 26, 26);
	border-radius: 3.1vw;
	position: relative;
	z-index: 2;
}

#fond-b
{
	background-image: url(images/fondmainhaut.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#fond-a
{
	background-color: rgb(99, 69, 148);
	background-size: contain;
	width: 100%;
	height: 100%;
	position: relative;
}

#fond-violetb
{
	background-color: rgb(43, 23, 77);
	height: 10vw;
	width: 10vw;
	position: absolute;
	z-index: 0;
}

.place-holder-rond
{
	height: auto;
	/*width: 31.25vw;*/
	width: 15vw;
}

.prob 
{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 32vw;
	width: 25vw;
}

.contenant-lien
{
	border-radius: 100%;
	background: white;
	/*height: 31.25vw;
	width: 31.25vw;*/
	height: 15vw;
	width: 15vw;
	background-image: url(images/motopompe.jpg);
	background-size: cover;
	position: relative;
	overflow: hidden;
}

/*.contenant-lien p
{
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 10%;
	font-size: 1.2vw;
	font-family: 'Asap', Arial;
}*/

.contenant-lien a
{
	height: 100%;
	width: 100%;
	display: inline-block;
	border-radius: 100%;
}

.ligne 
{
	display: flex;
	justify-content: space-around;
}

#solution h2
{
	text-align: center;
	font-family: 'Asap', Arial;
	font-size: 1.8vw;
	padding-bottom: 0.5vw;
	padding-top: 0.5vw;
}

.ligne-trois
{
	display: flex;
	justify-content: center;
}

.fin-prob
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#pre-footer
{
	font-family: 'Asap', Arial;
	font-size: 1.8vw;
	background-color: rgb(43, 23, 77);
	position: absolute;
	height: 20vw;
	width: 100%;
	bottom: -5vw;
}

.ligne-pre-footer
{
	padding-left: 3.6vw;
	padding-right: 3.6vw;
}

#text-a 
{
	padding-top: 1.85vh;
	padding-bottom: 13.4vh;
}

#text-b
{
	padding-bottom: 1.85vh;
}


@media screen and (min-width: 3000px)
{
	#slider-haut
	{
		top: 50%;
		transform: translateY(-50%);
		height: 20vw;
	}

	#haut-du-main
	{
		position: relative;
	}

	.main-gauche h1
	{
		font-size: 4vw;
		padding-top: unset;
	}

	.main-gauche p 
	{
		font-size: 1.5vw;
	}

	#spirale 
	{
		width: 24vw;
		transform: translate(50%, 55%);
	}

	.stock-images img 
	{
		height: 16.5vw;
		width: 16.5vw;
	}

	#slider-haut .stock-images a
	{
		height: 16.5vw;
		width: 16.5vw;
	}

	.bordure-image
	{
		height: 16.5vw;
		width: 16.5vw;
	}

	#bordure-haut
	{
		height: 16.5vw;
		width: 16.5vw;
	}

	.fond-noir 
	{
		padding: 0 10%;
	}

	#solution
	{
		padding-top: 2.2vw;
		padding-bottom: 1vw;
	}

	#footer-general 
	{
		padding-bottom: 1vw;
	}

	.prob .stock-images img 
	{
		height: 5vw;
		width: 5vw;
	}

	.prob .stock-images a 
	{
		height: 5vw;
		width: 5vw;
	}

	.prob .bordure-image
	{
		height: 5vw;
		width: 5vw;
	}

	.slide-petit
	{
		height: 5vw;
		width: 5vw;
	}

	.slider
	{
		height: 8vw;
	}

	.prob 
	{
		width: 15vw;
		height: 13vw;
	}

	#solution h2 
	{
		font-size: 1.5vw;
	}

	#ligne 
	{
		flex-wrap: wrap;
	}

	#solution .barre-slider 
	{
		height: 1.2vw;
		min-width: 5vw;
	}

	#solution .selecteur 
	{
		height: 0.55vw;
		width: 0.55vw;
	}

	#solution .selectionnate 
	{
		height: 0.7vw;
		width: 0.7vw;
	}

	#solution .selecteur-fleche
	{
		height: 0.85vw;
		width: 0.85vw;
	}
}

@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;
	}

	#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;
	}

	#fond-b 
	{
		background-color: rgb(43, 23, 77);
	}

	#haut-du-main
	{
		height: 95vw;
		display: flex;
		flex-direction: column;
		background-color: unset;
	}


	.main-gauche
	{
		clip-path: unset;
		width: 100%;
	}

	.main-gauche p 
	{
		padding-bottom: unset;
	}

	#spirale {
	    transform: translate(234%, 73%);
	}

	.selecteur
	{
		display: none;
	}

	#barre-haut
	{
		height: 6vw;
		width: 20vw;
	}

	.barre-slider
	{
		height: 6vw;
		width: 20vw;
	}

	.selecteur-fleche
	{
		height: 5vw;
		width: 5vw;
	}

	#slider-haut 
	{
		height: 90vw;
		width: 75vw;
		top: unset;
		right: unset;
	}

	#bordure-haut
	{
		height: 75vw;
		width: 75vw;
	}

	#slider-haut.slider a 
	{
		height: 75vw;
		width: 75vw;
	}
	
	#slider-haut .slide 
	{
		height: 75vw;
		width: 75vw; 
	}

	.prob 
	{
		height: 60vw;
		width: 48vw;
	}

	.slider  
	{
		width: 39vw;
		height: 52vw;
	}

	.bordure-image
	{
		height: 39vw;
		width: 39vw;
	}

	.stock-images a 
	{
		height: 39vw;
		width: 39vw;
	}

	.stock-images img 
	{
		height: 39vw;
		width: 39vw;
	}

	.main-gauche h1 {
		font-size:  8vw;
		width: 100%;
	}

	.main-gauche p {
		width:  100%;
		font-size:  3.7vw;
	}

	.main-droite 
	{
		width: 100%;
		display:  flex;
		justify-content: center;
	}

	#fond-violetb {
		display:  none;
	}

	.fond-noir {
		margin-top: 48vw;
	}

	#solution h1 
	{
		font-size: 6vw;
		padding-bottom: 1vw;
	}

	#solution h2
	{
		padding-top: 2vw;
		font-size: 4vw;
		padding-left: 0.4vw;
		padding-right: 0.4vw;
	}

	.ligne 
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.place-holder-rond
	{
		height: 44vw;
		width: 44vw;
	}

	.contenant-lien
	{
		height: 44vw;
		width: 44vw;
	}

	.ligne-pre-footer
	{
		font-size: 4.4vw;
	}

	#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;
	}

	#fond-b {
		background-color:  rgb(43, 23, 77);
	}

	#haut-du-main
	{
		width: 100%;
		height: 110vw;
		display: flex;
		flex-direction: column;
		background-color: unset;
	}

	.main-gauche
	{
		clip-path: unset;
		width: 100%;
	}

	#spirale {
	    transform: translate(234%, 73%);
	}

	.selecteur
	{
		display: none;
	}

	#barre-haut
	{
		height: 6vw;
		width: 20vw;
	}

	.barre-slider
	{
		height: 6vw;
		width: 20vw;
		margin-top: 3vw;
	}

	.selecteur-fleche
	{
		height: 5vw;
		width: 5vw;
	}

	#slider-haut 
	{
		height: 90vw;
		width: 75vw;
		top: unset;
		right: unset;
	}

	#bordure-haut
	{
		height: 75vw;
		width: 75vw;
	}

	#slider-haut.slider a 
	{
		height: 75vw;
		width: 75vw;
	}
	
	#slider-haut .slide 
	{
		height: 75vw;
		width: 75vw; 
	}

	.prob 
	{
		height: 68vw;
		width: 48vw;
	}

	.slider  
	{
		width: 39vw;
		height: 52vw;
	}

	.prob h2 
	{
		margin-top: 5vw;
	}

	.bordure-image
	{
		height: 39vw;
		width: 39vw;
	}

	.stock-images a 
	{
		height: 39vw;
		width: 39vw;
	}

	.stock-images img 
	{
		height: 39vw;
		width: 39vw;
	}

	.main-gauche h1 {
		font-size:  8vw;
		width: 100%;
	}

	.main-gauche p {
		width:  100%;
		font-size:  3.7vw;
	}

	.main-droite {
		width: 100%;
		display:  flex;
		justify-content: center;

	}

	#fond-violetb {
		display:  none;
	}

	.fond-noir {
		margin-top: 48vw;
	}

	#solution h1 
	{
		font-size: 6vw;
		padding-bottom: 1vw;
	}

	#solution h2
	{
		padding-top: 2vw;
		font-size: 4vw;
		padding-left: 0.4vw;
		padding-right: 0.4vw;
	}

	.ligne 
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.place-holder-rond
	{
		height: 44vw;
		width: 44vw;
	}

	.contenant-lien
	{
		height: 44vw;
		width: 44vw;
	}

	.ligne-pre-footer
	{
		font-size: 4.4vw;
	}

	#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;
	}
}