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

#page-actuelle
{
	font-weight: 900;
}

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

/*.main-droite img 
{
	height: 30vw;
	width: 30vw;
	position: absolute;
	top: 8vw;
	right: 6vw;
}*/

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

#section-installation-haut img 
{
	border-radius: 1vw;
}

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

.fond-noir h1
{
	text-align: center;
	font-family: 'Asap', Arial;
	font-weight: bold;
	font-size: 2.8vw;
	padding-top: 1.8vw;
	padding-bottom: 5.5vw;
}

#section-installation-haut
{
	display: flex;
	align-items: center;
	padding-left: 9.722vw;
	padding-right: 9.722vw;
	padding-bottom: 3vw;
}

#section-installation-haut img
{
	height: 18vw;
	width: 18vw;
}

#section-installation-haut p 
{
	font-size: 1.5vw;
	padding-left: 5vw;
	font-family: 'Asap', Arial;
	text-align: justify;
}

#ligne
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.placeholder
{
	width: 24vw;
	height: auto;
	align-self: center;
}

.installation
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 32vw;
	padding-right: 1.5vw;
	padding-left: 1.5vw;
}

#centrage-alarme 
{
	display: flex;
	justify-content: center;
	width: 100%;
}

h2
{
	text-align: center;
	font-family: 'Asap', Arial;
	font-weight: normal;
	font-size: 1.7vw;
	padding-top: 3vw;
}

#footer-general h2
{
	padding-top: unset;
}

.installation p 
{
	padding-bottom: 3.2vw;
	padding-top: 2.4vw;
	font-family: 'Asap', Arial;
	font-size: 1.3vw;
}

#installation-g
{
	padding-bottom: 5vw;
}

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

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


@media screen and (min-width: 3000px)
{
	.fond-noir
	{
		padding: 0 10%;
	}

	.fond-noir h1 
	{
		font-size: 1.8vw;
		padding-bottom: 1.5vw;
	}

	#section-installation-haut
	{
		padding-bottom: unset;
	}

	#section-installation-haut img 
	{
		height: 7vw;
		width: 7vw;
	}

	#section-installation-haut p 
	{
		font-size: 0.9vw;
	}

	h2 
	{
		padding-top: 1vw;
	}

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

	.installation
	{
		width: 20vw;
	}

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

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

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

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

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

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

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

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

	.slider
	{
		height: 8vw;
	}

	.prob 
	{
		width: 20vw;
		height: 25vw;
	}

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

	#centrage-alarme
	{
		width: unset;
	}

	#ligne
	{
		justify-content: space-around;
	}

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


@media screen and (min-width: 950px) and (max-width: 1250px)
{
	/*.main-droite img 
	{
		top: 30%;
	}*/

	.main-gauche p 
	{
		width: 50vw;
		font-size: 3vw;
	}

	.main-gauche h1
	{
		padding-top: 15vw;
	}

	#spirale 
	{
		transform: translate(80%, 145%);
	}

	.fond-noir h2
	{
		font-size: 2.1vw;
	}

	.fond-noir p 
	{
		font-size: 1.5vw;
	}
}

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

	#haut-du-main
	{
		height: 48vw;
	}

	#barriere 
	{
		top: 20.2vw;
	}

	.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);
		background-image: unset;
	}

	#haut-du-main
	{
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 95vw;
	}

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

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

	.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;
		background-color: rgb(43, 23, 77);
	}

	/*.main-droite img {
		height: 55vw;
		width: 55vw;
		top: -10vw;
		right: unset;	
	}*/

	#fond-violetb {
		display:  none;
	}

	.fond-noir {
		margin-top: 48vw;
		padding-bottom: 0;
	}
	
	.fond-noir h1
	{
		font-size: 6vw;
		padding-top: 3vw;
		padding-left: 6vw;
		padding-right: 6vw;
	}

	#section-installation-haut
	{
		padding-top: 6vw;
		padding-bottom: 10vw;
	}

	#section-installation-haut img 
	{
		width: 25vw;
		height: 25vw;
	}

	#section-installation-haut p 
	{
		font-size: 2.9vw;
	}

	.installation
	{
		width: 50%;
		padding-top: 4.2vw;
		padding-bottom: 4.2vw;
	}

	.installation h2
	{
		font-size: 5.5vw;
		padding-left: 0.3vw;
		padding-right: 0.3vw;
	}

	.installation p 
	{
		font-size: 3vw;
		padding-left: 1.4vw;
		padding-right: 1.4vw;
	}


	.placeholder 
	{
		width: 35vw;
	}



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

	.fleche 
	{
		height: 3vw;
	}

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

}

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

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

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

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

	#main 
	
	{
		margin-top: 12vw;
	}

	#barriere 
	{
		top: 20.2vw;
	}

	.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);
		background-image: unset;
	}

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


	.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;
		background-color: rgb(43, 22, 77);
	}

	/*.main-droite img {
		height: 55vw;
		width: 55vw;
		top: -10vw;
		right: unset;	
	}*/

	#fond-violetb {
		display:  none;
	}

	.fond-noir {
		margin-top: 48vw;
		padding-bottom: 0;
	}
	
	.fond-noir h1
	{
		font-size: 6vw;
		padding-top: 3vw;
		padding-left: 6vw;
		padding-right: 6vw;
	}

	#section-installation-haut
	{
		padding-top: 6vw;
		padding-bottom: 10vw;
	}

	#section-installation-haut img 
	{
		width: 25vw;
		height: 25vw;
	}

	#section-installation-haut p 
	{
		font-size: 2.9vw;
	}

	.installation
	{
		width: 50%;
		padding-top: 4.2vw;
		padding-bottom: 4.2vw;
	}

	.installation h2
	{
		font-size: 5.5vw;
		padding-left: 0.3vw;
		padding-right: 0.3vw;
	}

	.installation p 
	{
		font-size: 3vw;
		padding-left: 1.4vw;
		padding-right: 1.4vw;
	}


	.placeholder 
	{
		width: 35vw;
	}


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

	.fleche 
	{
		height: 3vw;
	}

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

}