*{
	transition: 1s;
	font-family: gill sans, sans-serif;
}


			/* NAV ANIMATION */
.navbar-nav li a:before {
  transition: all 0.5s;
  color: black;
}

.stroke li a,
.fill li a {
  position: relative;
  color: black;
  font-weight: bold;

}
.stroke li a:after,
.fill li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: ".";
  color: transparent;
  background: #aaa;
  height: 1px;
}
.stroke li a:hover:after {
  width: 100%;
  color: black;
}

.fill li a {
  transition: all 0.5s;
  color: black;
}

.fill li a:after {
  text-align: left;
  content: ".";
  margin: 0;
  opacity: 0;
  color: black;
}
.fill li a:hover {
  color: white;
  z-index: 1;
}
.fill li a:hover:after {
  z-index: -10;
  animation: fill 0.7s forwards;
  -webkit-animation: fill 0.7s forwards;
  -moz-animation: fill 0.7s forwards;
  opacity: 1;
}

	/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    /*height: 100%;*/
    /*background: rgba(255, 255, 255, 0.8);*/
  }
}



body{
	transition: 1s;
	min-width: 90vw;
	padding: 0px !important;
}

header{
	height: 100%;
	padding-bottom: 80px;
}
							
				/* BG VIDEO */

.video-bg-container {
    position: relative;
    width: 100%;
    height:100%;
    overflow: hidden;
    background-size: cover;
}

.video-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
    background-repeat: no-repeat;
}

.content {
    position: relative;
    /*z-index: 1;*/
    color: white;
}

			/* BARRE DE NAV */


.navbar {
    transition: background-color 1s, color 1s;
}
.navbar-nav ul li a{
	color: black;
}

.bg-body-tertiary {
    background-color: rgba(255, 255, 255, 0.02) !important;
    padding: 0px 20px 0px 20px;
}

.navbar.scrolled {
    /*background-color: rgba(255, 255, 255, 0.8) !important;*/
	background-color: black !important;
    font-weight: bold;
    padding: 5px 0px 5px 0px;
}

@media screen and (max-width:600px){
	.navbar-brand.scrolled{
		/*position:  !important;*/
		opacity: 0;
	}
	.bg-body-tertiary{
		background-color: transparent !important;
	}
	.navbar.scrolled{
		background-color: transparent !important;
	}
	.navbar{
		background-color: transparent !important;
	}
}


.navbar-collapse{
	display: flex;
	justify-content: end;
}

.nav-item .nav-link {
    color: white;
    font-size: 16.5px;
}

.navbar.scrolled .nav-item .nav-link {
    color: white !important;
}

.navbar-toggler {
    color: black;
    background-color: white;
    border-radius: 1px;
    border: none;
}

.navbar.scrolled .navbar-toggler {
    color: black !important; /* Change la couleur de l'icône de toggler à noir */
}



@media screen and (max-width:992px){
	.offcanvas-header{
	background-color: white;
}

.offcanvas-body{
	background-color: black;
}
.offcanvas-body ul{
	padding-right: 2rem;
}
.offcanvas-body ul li{
	list-style: none;
	text-align: center;
	border-top: 1px solid #00ff00;
	padding-bottom: 20px;
	padding-top: 40px;
}
.offcanvas-body ul li:first-child{
	border-top: none;
}
.offcanvas-body ul li a{
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: 25px;
}
.offcanvas{
	background-color: rgba(255, 255, 255, 0.8);
}
	/*.navbar-collapse{
		display: flex;
		justify-content: center !important;
	}
	.nav-item{
		text-transform: uppercase;
		font-weight: bold;
	}
	.navbar.scrolled .nav-item .nav-link {
    	font-weight: bold !important;
	}*/
}




			/* ACCUEIL */

.header-button button{
	padding: 17px 30px 17px 30px;
	border-radius: 2px;
	border: none;
	margin-top: 5vh;
	font-weight: bold;
	font-size: 22px;
	background-color: #00ff00;
	animation: none;
}
.header-button button:hover{
	animation: none;
	background-color: transparent;
	border: 1px solid white;
	color: white;
	transition: 0.2s;
	cursor: pointer;
}
.down img{
	width: 2.5vw;
	animation: shakeY;
	animation-duration: 6s;
	animation-iteration-count: infinite;
}




				/* PROJETS */

:root {
	--tst: bottom 0.5s ease 0s;
	--dark: #E6E6E6EE;
}

.swiper {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.swiper-slide {
	background-position: center;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	width: 400px;
	height: 500px;
	border-radius: 10px;
	overflow: hidden;
}
/*@media screen and (min-width: 1170px) and (max-width:1600px){
	.swiper-slide{
		width: 400px !important;
	}
}*/
@media screen and (min-width: 1600px){
	.swiper-slide{
		width: 420px !important;
		height: 600px !important;
	}
}
@media screen and (max-width:600px){
	.swiper-slide{
		/*width: 256px !important;
		height: 400px !important;*/
	}
	.info span{
		font-size: 13px !important;
	}
}

 
.swiper-container-3d .swiper-slide-shadow-left {
	background-image: linear-gradient(to left, #000, #fff0);
	border-right: 1px solid #000;
	border-radius: 10px;
}

.swiper-container-3d .swiper-slide-shadow-right {
	background-image: linear-gradient(to right, #000, #fff0);
	box-shadow: 0 0 0 1px #000;
	border-radius: 10px;
}

.swiper-pagination-bullet {
	/*background: #696969;*/
	background: white;
	opacity: 1;
	transition: all 0.5s ease 0s;
	border-radius: 8px;
}

.swiper-pagination-bullet-active {
	background: #00ff00;
	width: 30px;
}

.info {
	position: absolute;
	/*bottom: -1px;*/
	width: calc(100% + 2px);
	height: calc(50% + 2px);
	text-align: center;
	background: linear-gradient(180deg, #fff0 0, #0008 50px), linear-gradient(180deg, #fff0 , #0009);
	padding: 15px;
	padding-top: 70px;
	left: calc(-100% - 3px);
	left: 0;
	bottom: calc(-100% - 3px);
	box-sizing: border-box;
	transition: var(--tst);
}

.swiper-slide-active .info {
	bottom: 0;
	transition: var(--tst);
}

.info span {
	width: 100%;
	margin: 0.25em 0 0.25em 0;
	display: inline-block;
	padding: 0.55em 0.5em 0.55em 4em;
	box-sizing: border-box;
	color: var(--dark);
	text-align: left;
	position: relative;
	text-transform: uppercase;
	font-size: 16px;
	/*mix-blend-mode: color-burn;*/
	border-radius: 2em;
}

.info span:hover {
	/*mix-blend-mode: luminosity;*/
	background: #0008;
	filter: invert(1);
}

.info span:before,
.info span:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background: #fff8;
	height: 100%;
	max-width: 2em;
}

/*climber 1*/
.info span:nth-child(1):before {
	background: radial-gradient(
		circle at 50% 50%,
		var(--dark) 2px,
		#fff0 3px 150%
	);
	width: 7px;
	height: 6px;
	border-radius: 100% 100% 100% 40%;
	left: 16px;
	top: 2px;
	border: 3px solid var(--dark);
	border-top-color: #fff0;
	background-repeat: no-repeat;
	transform: rotate(29deg);
}

.info span:nth-child(1):after {
	background: linear-gradient(180deg, var(--dark) 1px, #fff0 1px 150%);
	width: 4px;
	height: 7px;
	border-radius: 100% 50% 100% 0%;
	left: 15px;
	top: 13px;
	border: 3px solid var(--dark);
	border-bottom-color: #fff0;
	background-repeat: no-repeat;
	transform: rotate(-1deg);
}

/*photo 2*/
.info span:nth-child(2):before {
	background: radial-gradient(
		circle at 50% 42%,
		var(--dark) 2px,
		#fff0 3px 4px,
		var(--dark) 5px 100%
	);
	width: 20px;
	height: 13px;
	left: 11px;
	top: 8px;
	border-radius: 2px;
}

.info span:nth-child(2):after {
	border: 10px solid #fff0;
	border-width: 0px 2px 4px 2px;
	border-bottom-color: var(--dark);
	width: 10px;
	background: #fff0;
	height: 0px;
	left: 14px;
	top: 5px;
}

/*route 3*/
.info span:nth-child(3):before {
	width: 22px;
	height: 22px;
	left: 11px;
	top: 3px;
	background: radial-gradient(circle at 60% 50%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 37% 70%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 52% 64%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 45% 42%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 49% 25%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 61% 15%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(
			circle at 18% 84%,
			#fff0 1px,
			var(--dark) 2px 3px,
			#fff0 4px 100%
		),
		radial-gradient(
			circle at 85% 16%,
			#fff0 1px,
			var(--dark) 2px 3px,
			#fff0 4px 100%
		);
}

/*sector 4*/
.info span:nth-child(4):before {
	border: 10px solid #fff0;
	height: 0;
	border-bottom-color: var(--dark);
	border-width: 0 6px 10px 6px;
	left: 12px;
	top: 10px;
	background: #fff0;
}

.info span:nth-child(4):after {
	border: 10px solid #fff0;
	height: 0;
	border-bottom-color: var(--dark);
	border-width: 0 6px 15px 6px;
	left: 18px;
	top: 5px;
	background: #fff0;
}

/*zone 5*/
.info span:nth-child(5):before {
	width: 16px;
	height: 16px;
	border-radius: 100%;
	left: 13px;
	top: 3px;
	background: radial-gradient(
		circle at 50% 50%,
		var(--dark) 2px,
		#fff0 3px 4px,
		var(--dark) 5px 100%
	);
}

.info span:nth-child(5):after {
	border: 10px solid #fff0;
	height: 0;
	border-top-color: var(--dark);
	border-width: 8px 6px 0 6px;
	left: 15px;
	top: 16px;
	background: #fff0;
}



/* SWIPER PROJETS */


@media screen and (max-width:700px){
	.section-projets{
		display: none !important;
	}
}
	
.section-projets img{
    opacity: 0;
    transition: opacity 1.3s ease-in-out;
}
.visible .section-projets img{
	opacity: 0;
    animation: backInUp 1.3s ease-in-out forwards;
}


@keyframes backInUp {
    0% {
        opacity: 0;
        transform: translateY(1000px) scale(0.7);
    }
    80% {
        opacity: 0.5;
        transform: translateY(-30px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/*@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}*/

.section-projets img:nth-child(1){
	animation-delay: 0.5s;
}
.section-projets img:nth-child(2){
	animation-delay: 1s;
}
.section-projets img:nth-child(3){
	animation-delay: 1.5s;
}
.section-projets-4{
	animation-delay: 1.5s;
}
.section-projets-5{
	animation-delay: 1.5s;
}


.projets {
    color: #ffffff;
    background-color: black;
    padding: 90px 0px 90px 0px;
    height: 100%;
}


.projets h1 {
    text-align: center;
    font-size: 2.5rem;
    /*color: #00ff00;*/
    color: white;
    background-color: black;
    /*padding: 40px;*/
    padding-bottom: 20px;
    margin: 0;
}
.projets h1 span{
	border-bottom: 5px solid #00ff00;
}

.btn-projets button{
	margin-top: 20px;
	border: none;
	font-weight: bold;
	padding: 8px 15px 8px 15px;
	border: 1px solid white;
}
@media screen and (max-width:701px){
	.btn-projets button{
		border: 1px solid #00FF00 !important;
	}
}

.btn-projets button:hover{
	background-color: transparent;
	color: white;
	border: 1px solid white;
	transition: 0.2s;
}
.btn-projets button:nth-child(1){
		margin-right: 20px;
}
.btn-projets button:nth-child(2){
		margin-left: 20px;
}


.bg-img-portfolio img{
	width: 15vw; 
    margin-right: 10px;
    cursor: pointer;
    transition: opacity 1s;
    animation-iteration-count: infinite;   
    --f: 1.15; 
  	clip-path: inset(0);
}

.bg-img-portfolio img:hover{
	clip-path: inset(calc((1 - 1/var(--f)) * 50%));
	scale: var(--f);
	transition: 1s;
}
.bg-img-portfolio a{
	display:flex;
	justify-content: center;
	text-decoration: none;
}
.bg-img-portfolio a span:hover{
	border-bottom: 1px solid #00ff00;
	transition: 0.2s;
}


.bg-img-portfolio-1, .bg-img-portfolio-2, .bg-img-portfolio-3, .bg-img-portfolio-4{
	width: 25vw;
	border-radius: 5px;
	margin: 0px auto;
}


.bg-img-portfolio-1 img, .bg-img-portfolio-2 img, .bg-img-portfolio-3 img, .bg-img-portfolio-4 img{
	width: 25vw;
	margin-top: 30px;
}
.bg-img-portfolio-1 img a, .bg-img-portfolio-2 img a, .bg-img-portfolio-3 img a, .bg-img-portfolio-4 img a{
	animation: pulse !important;
	animation-duration: 2s !important;
	animation-iteration-count: infinite !important;
}

.bg-caption{
	background-color: rgba(255, 255, 255, 0.9);
	/*background-color: rgba(255, 128, 128, 1.0);*/
	/*padding: 10px 10px 1px 10px;*/
	display: flex;
	justify-content: space-between;
	/*border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;*/
}
.bg-caption p:first-child{
	font-size: 20px;
	color: black;
	font-weight: bold;
	text-transform: uppercase;
}
.bg-caption p{
	font-weight: bold;
	color: grey;
}
.card{
	background-color: rgba(255, 255, 255, 0.6);
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border: none;
	color: black;
	font-weight: bold;
	font-size: 18px;
}
.card-body{
	display: grid;
	grid-template-columns: 1fr 1fr;
	/*grid-areas:"in-card-1 in-card-2";*/
}
.in-card{
	display: grid;
	grid-template-columns: 1fr 1fr;
	/*grid-areas:	"in-card-1 in-card-2"
				"in-card-1 .";*/
}
.in-card-1{
	grid-area: in-card-1;
}
.in-card-1 img{
	width: 10vw;
	height: 10vw;
}
.in-card-2{
	grid-area: in-card-2;
}

.bg-maquette{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "bg-maquette-1 bg-maquette-2";
	margin: 0px auto;
	width: 40vw;
}
.bg-maquette-1{
	grid-area: "bg-maquette-1";
	background-color: rgba(255, 255, 255, 0.08);
	width: 13vw;
	border-radius: 5px;
	margin: 0px auto;
}
.bg-maquette-2{
	grid-area: "bg-maquette-2";
	background-color: rgba(255, 255, 255, 0.08);
	width: 13vw;
	border-radius: 5px;
	margin: 0px auto;
	
}
.bg-maquette-1 img{
	width: 13vw;
	padding: 20px;
}
.bg-maquette-2 img{
	width: 13vw;
	padding: 20px;
	height: 19vw;
}

	
			/* CONCEPTION GRAPHIQUE */

.accordion{
	margin: 0px 20px 0px 20px;
}
.accordion-flush>.accordion-item>.accordion-header .accordion-button, .accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed{
	font-weight: bold;
	text-transform: uppercase;
}
.accordion-button::after{
	background-color: black;
	color: white !important;
}
.accordion-button:not(.collapsed){
	background-color: white;
	color: black;
}
.accordion-body{
	background-color: black;
	padding: 40px 0px 40px 0px;
}
.accordion-body .bg-btn-body-graphique{
	display: grid;
	grid-template-columns: 1fr;
	width: fit-content;
	margin: 0px auto;
}
.accordion-body .bg-btn-body-graphique button{
	border: none;
	width: 100%;
	padding: 10px 10px 10px 10px;
	border-radius: 2px;
	text-align: center;
	text-transform: uppercase;
}
.accordion-body .bg-btn-body-graphique button:nth-child(2){
	margin-top: 25px;
}
.accordion-body .bg-btn-body-graphique button:hover{
	background-color: #00FF00;
	font-weight: bold;
	transition: 0.3s;
}


				/* CONCEPTION GRAPHIQUE - OFFCANVAS */
.offcanvas-backdrop{
	width: 100%;
	height: 100%;
}



				/* CONCEPTION GRAPHIQUE - OFFCANVAS - RESPONSIVE*/
.offcanvas-header h5{
	font-weight: bold;
}
.offcanvas-body{
	color: white;
}
.offcanvas-body p{
	font-size: 17px;
}
.offcanvas-body .logo-1-body-graphique img{
	width: 100%;
	height: 100%;
}

.text-body-graphique-2 h3{
	text-transform: uppercase;
	font-size: 20px;
	font-weight: bold;
	margin: 60px 0px 20px 0px;
}

.bg-viste-eldev {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	margin-bottom: 20px;
}

@media screen and (min-width:992px){
	.graphique-responsive{
		display: none;
	}
}

.active{
	background-color: #00FF00 !important;
	transition: 0.5s;
	border: none !important;
	color: black !important;
}
.hidden{
	display: none;
	transition: 0.5s;
}

			/* CONCEPTION GRAPHIQUE - OFFCANVAS - ORDI/TABLETTES */
.bg-logos-graphiques, .bg-visite-graphiques{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "bg-textes-graphiques-1 bg-textes-graphiques-2";
	margin: 30px 30px 0px 0px;
	width: fit-content;
}
.bg-flyer-graphiques{
	display: grid;
	grid-template-columns: 1fr;
	margin: 0px 40px 0px 40px;
}
.bg-flyer-graphiques img{
	width: 30vw;
}
.bg-text-flyer{
	margin-top: 40px;
}


.bg-visite-graphiques{
	margin-left: 30px;
}
.bg-text-graphiques-1, .bg-text-graphiques-2{
	padding: 50px 0px 0px 0px;
	width: fit-content;
}
.bg-text-graphiques-1 p, .bg-text-graphiques-2 p{
	color: rgba(255, 255, 255, 0.8);
}

.bg-textes-graphiques-1, .bg-textes-graphiques-2{
	display: flex;
}
.bg-logos-graphiques img, .bg-visite-graphiques img{
	width: 25vw;
	margin: 0px auto;
}
.bg-btn-graphiques{
	margin: 0px auto;
	width: fit-content;
}
.bg-btn-graphiques button{
	border: none;
	padding: 10px 20px 10px 20px;
	font-weight: bold;
	background-color: transparent;
	border: 1px solid white;
	color: white;
}
.bg-btn-graphiques button:nth-child(2){
	margin: 0px 40px 0px 40px;
}



/* FORMAT TEL - TABLETTES */
@media screen and (max-width:800px){
	.bg-graphiques{
		display: none;
	}
}

/* FORMAT ORDI */
@media screen and (min-width:801px){
	.graphique-responsive{
		display: none;
	}
}
@media screen and (min-width:800px) and (max-width:1300px){
	.bg-flyer-graphiques{
		display: grid;
		grid-template-columns: 1fr;
		margin: 0px 40px 0px 40px;
	}
	.bg-flyer-graphiques img{
		width: 35vw;
	}
	.bg-text-flyer{
		margin-top: 0px;
	}
}
@media screen and (min-width:800px) and (max-width:1060px){
	.bg-logos-graphiques, .bg-visite-graphiques{
		grid-template-columns: 1fr;
		grid-template-areas:"bg-textes-graphiques-1"
							"bg-textes-graphiques-2";
		margin: 10px 20px 0px 20px; 

	}
	.bg-logos-graphiques img, .bg-visite-graphiques img{
		width: 45vw;
		padding-right: 50px;
	}
	.bg-text-graphiques-1, .bg-text-graphiques-2{
		padding: 60px 0px 0px 0px;
	}
	.btn-projets button{
		font-size: 19px;
	}
	.bg-btn-dev button{
		font-size: 18.5px;
	}
}
@media screen and (min-width:1060px) and (max-width:1246px){
	.bg-logos-graphiques, .bg-visite-graphiques{
		grid-template-columns: 1fr;
		grid-template-areas:"bg-textes-graphiques-1"
							"bg-textes-graphiques-2";
		margin: 10px 20px 0px 30px; 

	}
	.bg-visite-graphiques{
		margin-left: 50px;
	}
	.bg-visite-graphiques img{
		width: 40vw;
	}
	.bg-logos-graphiques img, .bg-visite-graphiques img{
		width: 35vw;
		padding-right: 50px;
	}
	.bg-text-graphiques-1, .bg-text-graphiques-2{
		padding: 60px 0px 0px 0px;
	}
}






			/* PROJETS SPA */
.btn-projets button.active {
    background-color: #00ff00; 
    color: black; 
    border: none; 
}

.btn-projets button {
    background-color: transparent;
    color: white;
    border: 1px solid transparent; 
    font-weight: bold;
    padding: 8px 15px;
    transition: background-color 0.3s, color 0.3s; 
    border: 1px solid white;
    margin-bottom: 40px;
}

.btn-projets button:hover {
    background-color: #00ff00;
    color: black;
    border: 1px solid #00ff00; 
    transition: 0.2s;
}


			/* PROJETS CAROUSEL */

.carousel-image {
    width: 15vw; 
    margin-right: 10px;
    cursor: pointer;
    transition: opacity 0.5s;
    animation-iteration-count: infinite;
    
    --f: 1.15; 
  	clip-path: inset(0);
}
.carousel-image:hover{
	clip-path: inset(calc((1 - 1/var(--f)) * 50%));
	scale: var(--f);
	transition: 0.5s;
}

/*.carousel-container {
    width: 90vw;
    overflow: hidden;
    position: relative;
    margin:0px auto;
}

.carousel {
    display: flex;
    white-space: nowrap;
    animation: 15s linear 1s infinite alternate slidein;
    animation-iteration-count: infinite;
}

.carousel-image {
    width: 15vw; 
    margin-right: 10px;
    cursor: pointer;
    transition: opacity 0.5s;
    animation-iteration-count: infinite;
     --f: 1.15; 
  
  clip-path: inset(0);
  transition: .4s;
}
.carousel-image:hover{
	border-bottom: 0.5px solid white;
	clip-path: inset(calc((1 - 1/var(--f)) * 50%));
  scale: var(--f)
}

.carousel:hover {
    animation-play-state: paused;
}

@keyframes slidein {
    0% {
        transform: translateX(10%);
    }
    100% {
    	transform: translateX(-30%);
    }
}*/



	/* PROJETS MODAL */
.modal-content {
    background-color: white;
    color: #fff;
}

.modal .modal-header{
    background-color: rgba(255, 255, 255, 0.8);
}

#modalImage {
    width: 100%;
    height: auto;
}

	/* PROJETS BTN */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
}

.carousel-btn.left {
    left: 10px;
}

.carousel-btn.right {
    right: 10px;
}












		/* ETAPES PAR ETAPES */

.etape-item{
    opacity: 0;
    transition: opacity 1s ease-in-out;

}

.visible .etape-item {
    opacity: 0;
    animation: fadeIn 2s forwards;
}


@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.etape-item:nth-child(1) {
    animation-delay: 0.1s;
}
.etape-item:nth-child(2) {
    animation-delay: 0.3s;
}
.etape-item:nth-child(3) {
    animation-delay: 0.4s;
}
.etape-item:nth-child(4) {
    animation-delay: 0.5s;
}
.etape-item:nth-child(5) {
    animation-delay: 0.6s;
}
.etape-item:nth-child(6) {
    animation-delay: 0.7s;
}


main .bg-main-img{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
	width: 100%;
	height: 100%;
}
.bg-main-cover{
	background-color: rgba(0, 0, 0, 0.8) !important;
	z-index: 2;
	height: 100%;
	padding: 60px 0px 40px 0px;
}

.etapes h5 span{
  font-size: 35px;
  text-align: center;
  vertical-align: middle;
  color: white;
  padding-bottom: 30px;
}

.etapes h5 span:after {
  content: "";
  animation: abomination4 2.2s linear 1;
  animation-fill-mode: forwards;
  text-transform: uppercase;
}

@keyframes abomination4 {
	0% {
	 	content: " E ";
	 }
	 4% {
	  	content: " En ";
	 }
	 8% {
	    content: " Ent ";
	  }
	  12% {
	    content: " Entr ";
	  }
	  16% {
	    content: " Entre ";
	  }
	  20% {
	    content: " Entrep ";
	  }
	  24% {
	    content: " Entrepr ";
	  }
	  28% {
	    content: " Entrepri ";
	  }
	  32% {
	    content: " Entrepris ";
	  }
	  36% {
	    content: " Entreprise ";
	  }
	  40% {
	    content: " Entreprises ";
	  }
	  44% {
	    content: " Entreprises o ";
	  }
	  48% {
	    content: " Entreprises ou ";
	  }
	  52% {
	    content: " Entreprises ou p ";
	  }
	  56% {
	    content: " Entreprises ou pa ";
	  }
	  60% {
	    content: " Entreprises ou par ";
	  }
	  64% {
	    content: " Entreprises ou part ";
	  }
	  68% {
	    content: " Entreprises ou parti ";
	  }
	  72% {
	    content: " Entreprises ou partic ";
	  }
	  76% {
	    content: " Entreprises ou particu ";
	  }
	  80% {
	    content: " Entreprises ou particul ";
	  }
	  84% {
	    content: " Entreprises ou particuli ";
	  }
	  88% {
	    content: " Entreprises ou particulie ";
	  }
	  92% {
	    content: " Entreprises ou particulier ";
	  }
	  96% {
	    content: " Entreprises ou particuliers ";
	  }
	  100% {
	    content: " Entreprises ou particuliers ? ";
	  }

	} 


.etapes h4 span{
  font-size: 30px;
  text-align: center;
  vertical-align: middle;
  color: white;
  padding-bottom: 30px;
}

.etapes h4 span:after {
  content: "";
  animation: abomination5 2.2s linear 1;
  animation-fill-mode: forwards;
  text-transform: uppercase;
  animation-delay: 2.4s;
  text-align: center;
}
@keyframes abomination5{

	0% {
		content: " J ";
	}
	4% {
		content: " Je ";
	 }
	8% {
	    content: " Je r ";
	}
	16% {
	    content: " Je ré ";
	}
	20% {
	    content: " Je rép ";
	}
	24% {
	    content: " Je répo ";
	}
	28% {
	    content: " Je répon ";
	}
	32% {
	    content: " Je répond ";
	}
	36% {
	    content: " Je réponds ";
	}
	40% {
	    content: " Je réponds à ";
	}
	44% {
	    content: " Je réponds à v ";
	}
	  48% {
	    content: " Je réponds à vo ";
	  }
	  52% {
	    content: " Je réponds à vos ";
	  }
	  56% {
	    content: " Je réponds à vos b ";
	  }
	  60% {
	    content: " Je réponds à vos be ";
	  }
	  64% {
	    content: " Je réponds à vos bes ";
	  }
	  68% {
	    content: " Je réponds à vos beso ";
	  }
	  72% {
	    content: " Je réponds à vos besoi ";
	  }
	  76% {
	    content: " Je réponds à vos besoin ";
	  }
	  80% {
	    content: " Je réponds à vos besoins ";
	  }
	  84% {
	    content: " Je réponds à vos besoins ! ";
	  }
	  88% {
	    content: " Je réponds à vos besoins ! ";
	  }
	  92% {
	    content: " Je réponds à vos besoins ! ";
	  }
	  96% {
	    content: " Je réponds à vos besoins ! ";
	  }
	  100% {
	    content: " Je réponds à vos besoins ! ";
	  }

}




		/* TARIFS */
/*.tarifs-item {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 1s ease-in-out;
}

.visible .tarifs-item {
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}*/

.tarifs-item{
    opacity: 0;
    transition: opacity 1.3s ease-in-out;
}
.visible .tarifs-item{
	opacity: 0;
    animation: backInDown 1.3s ease-out forwards;
}


@keyframes backInUp {
    0% {
        opacity: 0;
        transform: translateY(1000px) scale(0.7);
    }
    80% {
        opacity: 1;
        transform: translateY(-30px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tarifs-item:nth-child(1) {
    animation-delay: 0.1s;
}
.tarifs-item:nth-child(2) {
    animation-delay: 0.4s;
}
.tarifs-item:nth-child(3) {
    animation-delay: 0.6s;
}
.tarifs-item:nth-child(4) {
    animation-delay: 0.8s;
}



.pricing {
    padding: 60px 0px 80px 0px;
    background-color: #000000;
    color: #ffffff;
}

@media screen and (min-width:1001px){
	.pricing-grid-tel{
		display: none !important;
	}
}
@media screen and (max-width:1000px){
	.pricing-grid-ordi{
		display: none !important;
		height: fit-content !important;
	}
}


.pricing h1:nth-child(1) {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: white;
}
.pricing h1 span{
	border-bottom: 5px solid #00ff00;
}

.devis-modal span{
	transition: 0.2s;
	color: black;
	font-weight: bold;
}
.bg-primary-subtle{
	/*background-color: rgba(255, 128, 128, 1.0) !important;*/
  background-color: #00ff00 !important;
	border: none !important;
	border-radius: 10px !important;
}
@media screen and (max-width:400px){
	.translate-middle {
	    transform: translate(-30%, -40%) !important;
	}	
}

.devis-modal{
	cursor: pointer;
	padding:10px 0px 10px 0px;
	transition: 0.2s;
	background-color: white;
	width: 20vw;
	margin: 0px auto;
	border-radius: 2px;
}
.devis-modal:hover{
	background-color: transparent;
	border: 1px solid white;
	color: white;
}
.devis-modal span:hover{
	color: white;
	transition: 0.2s;
}
.devis-modal span:nth-child(2):hover{
	color: black;
	cursor: not-allowed;
}

.pricing .text-tarifs h4{
	text-align: center;
	padding: 0px 0px 20px 0px;
}
.pricing .text-tarifs h4 a{
	text-decoration: none;
}
.pricing .text-tarifs h4 a:hover{
	border-bottom: 1px solid;
	transition: 0.2s;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:"pricing-item-1 pricing-item-2 pricing-item-3"
    					"pricing-item-1 pricing-item-2 pricing-item-4";  				
    gap: 50px;
    padding: 50px 0px 70px 0px;
}

.pricing-item-1{
	grid-area:pricing-item-1;
}

.pricing-item-2{
	grid-area: pricing-item-2;
}

.pricing-item-3{
	grid-area: pricing-item-3;
}

.pricing-item-4{
	grid-area: pricing-item-4;
}


.pricing-item {
    background-color: #121212;
    padding: 30px 0px 30px 0px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 2px rgba(0, 255, 0, 0.5);
    /*height: fit-content;*/
}
.pricing-item a{
	color: white;
	margin-top: 50px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	transition: 0.2s;
}
.infos-tarifs-link{
	margin-top: 0px !important;
	transition: 0.2s !important;
	border: none !important;
}
.accordion-body-infos{
	padding: 10px 30px 0px 30px;
	align-items: center;
}

.pricing-item h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #ffffff;
    text-transform: uppercase;
}

.pricing-item .price {
    font-size: 2rem;
    margin: 20px 0;
    color: #00ff00;
}


.pricing-item ul {
    list-style: none;
    padding: 0;
    margin: 0px auto;
    height: 100%;
}

.pricing-item ul li {
    color: #cccccc;
   	text-align: center;
   	padding: 15px 0px 15px 0px;
}
.pricing-item ul li:nth-child(2), .pricing-item ul li:nth-child(4), .pricing-item ul li:nth-child(6), .pricing-item ul li:nth-child(8), .pricing-item ul li:nth-child(10), .pricing-item ul li:nth-child(12){
	background-color:rgba(230, 222, 215, 0.1);
}

.pricing-item:hover {
    transform: translateY(-10px);
    cursor: pointer;
}



				/* TRANSITON ANIMATION TEXT DEFILANT*/

.center {
  /*position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;*/
  padding: 0;
  margin: 0;
}

.table {
  background-color:red;
  /*background-color: white;*/
}
.table .monitor-wrapper {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.9);
}
.table .monitor-wrapper .monitor {
  overflow: hidden;
  white-space: nowrap;
  box-shadow: inset 0px 5px 10px 2px rgba(0, 0, 0, 0.9);
  padding-top: 20px;
}
.table .monitor-wrapper .monitor p {
  /*font-family: "VT323", monospace;*/
  font-size: 20px;
  position: relative;
  display: inline-block;
  animation: move 20s infinite linear;
  color: black;
  font-weight: bold;
  background-color: transparent;
}

@keyframes move {
  from {
    left: 800px;
  }
  to {
    left: -1400px;
  }
}





				/* CONTACTEZ MOI */

.section-contact{
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.visible .section-contact{
	opacity: 0;
    animation: backInRight 1s ease-out forwards;
}


@keyframes backInUp {
    0% {
        opacity: 0;
        transform: translateY(1000px) scale(0.7);
    }
    80% {
        opacity: 1;
        transform: translateY(-30px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.section-contact button{
	border-radius: 2px !important;
	font-weight: bold;
}
.section-contact button:hover{
	background-color: transparent !important;
	color: white !important;
	border: 1px solid white !important;
}

.contact {
    padding: 100px 0px 20px 0px;
    /*background-color: #000000;*/
    color: #ffffff;
    width: 100% !important;
   	/*z-index: -1;*/
}

.container{
	margin: 0px auto;
	justify-content: center;
	z-index: -1;
}

.contact h1 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
    color: white;
}
.contact h1 span{
	border-bottom: 5px solid #00ff00;
	/*border-radius: 10px;*/
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-content: center;
}

.contact-info{
	position: relative;
}

.contact-info img{
	margin-right: 20px;
}

.contact-info, .contact-form {
    background-color: #121212;
    padding: 30px;
    border-radius: 10px;
}

.contact-info h2, .contact-form h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #ffffff;
}

.contact-info p {
    font-size: 1rem;
    color: #cccccc;
    /*margin-bottom: 20px;*/
}


.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
    color: #cccccc;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #333333;
    color: #ffffff;
    font-size: 1rem;
}

.contact-form button.btn {
    background-color: #00ff00;
    color: #000000;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.contact-form button.btn:hover {
    background-color: #00cc00;
}



				/* FOOTER */
footer {
    /*background-color: #000000;*/
    padding: 100px 0px 0px 0px;
    color: #ffffff;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-content .logo img {
    /*max-width: 120px;*/
    margin-bottom: 20px;
}

.footer-content p {
    /*margin: 10px 0;*/
    font-size: 0.9rem;
    color: #cccccc;
}

.footer-content .socials {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "socials-un socials-deux socials-trois";
    gap: 20px;
    column-gap: 40px;
}
.socials-un{
	grid-area: socials-un;
}
.socials-deux{
	grid-area: socials-deux;
}
.socials-trois{
	grid-area: socials-trois;
}

.socials a{
	 text-decoration: none;
}

.footer-content .socials li a img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s, filter 0.3s;
}

.footer-content .socials li a img:hover {
    transform: scale(1.1);
    filter: brightness(0.8);
}




	/* ETAPES PAR ETAPES */
/*.bg-etapes{
	margin: 0vh 0vh 10vh 0vh;
}*/




				/* MODAL EMAIL CONFIRM */
.button-send-email{
	margin-top: 15vw !important;
}
.modal-email-send{
	background-color: black;
	padding: 50px 0px 30px 0px;
}
.text-email-confirm{
	text-align: center;
}
.text-email-confirm span:first-child{
	font-size: 22px;
}
.modal-email-send .img-verifier img{
	width: 3vw;
	background-color: green;
}
.modal-email-send .img-verifier{
	margin-left: 20px;
}
.btn-email-send{
	animation: heartBeat;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
.btn-email-send button{
	border: none;
	padding: 5px 25px 5px 25px;
	font-weight: bold;
	
}
.btn-email-send button:hover{
	background-color: transparent;
	border: 1px solid white;
	color: white;
	transition: 0.2s;
}



				/* MODAL */
.modal-content{
	background-color: transparent;
	border-radius: 0px;
}
.modal-header{
	border: none;
	background-color: rgba(255, 255, 255, 0.1);
	border: 0.5px solid rgba(255, 255, 255, 0.3);
	border-bottom: none;
	border-radius: 0px;
}
.modal-header h1{
	font-weight: bold;
	color: white;
}
.btn-close {
    background-color: #00ff00;
    border-radius: 0px;
    opacity: 1;
}
.modal-body{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:"modal-info modal-projet";
	background-color: rgba(0, 0, 0, 0.9);
}
.modal-info{
	grid-area: "modal-info";
}
.modal-body{
	padding: 60px 0px 60px 0px;
}
.modal-body h5{
	text-transform: uppercase;
	color: white;
	font-weight: bold;
	text-align: center;
}
.modal-body h5 span{
	/*border-bottom: 5px solid #00ff00;*/
	border-bottom: 5px solid #00ff00;
	
}
.modal-projet{
	grid-area: "modal-projet";
}
.modal-projet select{
	border: none;
	margin: 28px 90px 0px 90px;
	/*padding: 5px 10px 5px 10px;*/
	display: block;
    /*width: 100%;*/
    width: 25vw;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight:bold;
    /*font-weight: 400;*/
    line-height: 1.5;
    cursor: pointer;
}
.input-group-text{
	/*background-color: rgba(0, 0, 0, 0.8);*/
	/*border: 1px solid rgba(0, 0, 0, 0.7);*/
	border-radius: 0px;
	margin: 20px 0px 0px 40px;
	background-color: black;
}
.form-control{
	/*border: 1px solid rgba(0, 0, 0, 0.1);*/
	/*border: none;*/
	border-radius: 0px;
	margin: 20px 70px 0px 0px;
	background-color:black;
	padding: 10px;
}
.input-group input::placeholder{
	color: rgba(255, 255, 255, 0.6);
}
.form-projet textarea{
	width: 25vw;
	border: none;
	margin: 28px 90px 0px 90px;
	font-weight: bold;
	padding: 10px;
	background-color: black;
	border: 1px solid white;
}
.form-projet textarea::placeholder{
	color: rgba(255, 255, 255, 0.6);
}
/*.form-projet a{
	width: 40vw;
	margin: 40px 0px 0px 90px;
	font-weight: bold;
	text-decoration: none;
	color: white;
	border-bottom: 1px solid white;
}
.form-projet a:hover{
	color: blueviolet;
}*/

.modal-footer{
	/*padding: 5px;*/
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 0px;
	border: 0.5px solid rgba(255, 255, 255, 0.3);
	border-top: none;
}

.btn-fermer{
	border: none;
	background-color: red;
	padding: 10px;
	margin-right: 10px;
}
.btn-fermer span{
	color: white;
	text-transform: uppercase;
	font-weight: bold;
}
.btn-fermer:hover{
	border: 1px solid red;
	background-color: transparent;
	transition: 0.2s;
}
.btn-fermer span:hover{
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	transition: 0.2s;
}

.btn-envoyer{
	border: 1px solid white;
	background-color: transparent;
	padding: 10px;
	margin-left: 10px;
}
.btn-envoyer span{
	color: white;
	text-transform: uppercase;
	font-weight: bold;
}
.btn-envoyer:hover{
	border: 1px solid white;
	background-color: white;
	padding: 10px;
	transition: 0.2s;
}
.btn-envoyer span:hover{
	color: black;
	text-transform: uppercase;
	font-weight: bold;
	transition: 0.2s;
}
.bg-localisation-contact{
	position: absolute;
}

@media screen and (max-width:500px){

	.modal{
		margin-bottom: 330px;
	}
	.modal-dialog{
		margin: 5px;
	}
	.modal-content{
		background-color: transparent;
		border-radius: 0px;
	}
	.modal-header{
		border: none;
		background-color: rgba(255, 255, 255, 0.1);
		border: 0.5px solid rgba(255, 255, 255, 0.3);
		border-bottom: none;
		border-radius: 0px;
		width: 100%;
	}
	.modal-header h1{
		font-weight: bold;
		color: white;
	}
	.btn-close {
	    background-color: #00ff00;
	    border-radius: 0px;
	    opacity: 1;
	}
	.modal-body{
		display: grid;
		grid-template-columns: 1fr !important;
		grid-template-areas:"modal-info"
							"modal-projet" !important;
		background-color: rgba(0, 0, 0, 0.9);
	}
	.modal-info{
		grid-area: "modal-info";
	}
	.modal-body{
		padding: 60px 0px 60px 0px;
		justify-content: center !important;
	}
	.modal-body h5{
		text-transform: uppercase;
		color: white;
		font-weight: bold;
		text-align: center;
	}
	.modal-body h5 span{
		border-bottom: 5px solid #00ff00;
		margin-bottom: 28px;
	}
	.modal-projet{
		grid-area: "modal-projet";
		margin-top: 40px;
		
	}
	.modal-projet select{
		border: none;
		display: block;
	    width: 60vw !important;
	    padding: .375rem .75rem;
	    font-size: 1rem;
	    font-weight:bold;
	    line-height: 1.5;
	    cursor: pointer;
	}
	.input-group{
		justify-content: center !important;
	}
	.input-group-text{
		border-radius: 0px;
		background-color: black;
	}
	.form-control{
		border-radius: 0px;
		background-color:black;
		padding: 10px;
	}
	.input-group input::placeholder{
		color: white !important;
	}
	.form-projet textarea{
		width: 70vw !important;
		border: none;
		font-weight: bold;
		padding: 10px;
		background-color: black;
		border: 1px solid white;
	}

	.modal-footer{
		/*padding: 5px;*/
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 0px;
		border: 0.5px solid rgba(255, 255, 255, 0.3);
		border-top: none;
	}

	.btn-fermer{
		border: none;
		background-color: red;
		padding: 10px;
		margin-right: 10px;
	}
	.btn-fermer span{
		color: white;
		text-transform: uppercase;
		font-weight: bold;
	}
	.btn-fermer:hover{
		border: 1px solid red;
		background-color: transparent;
		transition: 0.2s;
	}
	.btn-fermer span:hover{
		color: white;
		text-transform: uppercase;
		font-weight: bold;
		transition: 0.2s;
	}

	.btn-envoyer{
		border: 1px solid white;
		background-color: transparent;
		padding: 10px;
		margin-left: 10px;
	}
	.btn-envoyer span{
		color: white;
		text-transform: uppercase;
		font-weight: bold;
	}
	.btn-envoyer:hover{
		border: 1px solid white;
		background-color: white;
		padding: 10px;
		transition: 0.2s;
	}
	.btn-envoyer span:hover{
		color: black;
		text-transform: uppercase;
		font-weight: bold;
		transition: 0.2s;
	}


	
}