@charset "UTF-8";
/* CSS Document */


/******************************************************************
******************************************************************
NE PAS MODIFIER
CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER CSS/NORMALIZE.CSS
******************************************************************
******************************************************************/

p, h1, h2, h3, h4, h5, h6, ul, li, figure {
	padding:0;
	margin:0;
}

/******************************************************************
******************************************************************
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
******************************************************************
******************************************************************/


/******************************************************************
							STRUCTURE
******************************************************************/
section, h1, footer, header, div.mot-cles{
	/*border: 4px solid purple;*/
	
}

div.inner{
	/*border: 2px solid red;*/
	width:90%;
	margin: 0 auto 0 auto;
	
}



/******************************************************************
							INFOS
******************************************************************/
/*
COULEURS
black
black 75%
White
White 40%
vert: #71B398
orange: #E5816A
*/

/*
DIMENSIONS
40px
1200px
*/

/*POLICES
Cookie (titre)
roboto condensed (textes)
*/

/******************************************************************
							BODY
******************************************************************/
body{
	background-color: #666;
	background-repeat:no-repeat;
	background-size: 100%, auto;
	font-family:"roboto condensed", "Arial Narrow", sans-serif;
	color:white;
	font-weight:100%;
	text-align:left;
	
}

/******************************************************************
							CONTAINER
******************************************************************/
.container {
   	height: 100vh;
   	position: relative;
  	text-align: center;
	background: black;
}

.container img{
	width:100%;
	height: 100vh;
	object-fit: cover;
   opacity: 0.5;
}

.hero{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero button{
	color:white;
	background-color: darkred;
	margin-top:3%;
	padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
	  cursor: pointer;

}

.hero button a{
	color:white;
	text-decoration:none;
}
.hero button:hover {
  background-color: #d33934;
}

/******************************************************************
							CONTACT
******************************************************************/
#contact .hero{
	position: absolute;
  top: 50%;
  left: 40%;
	width:60%;
}

#contact .hero div.item{
	width:20%;
	float:left;	
	text-align: left;
	margin-right:5%;
}

#contact h2{
	text-align: left;
	text-transform: uppercase;
}



/******************************************************************
							HEADER
******************************************************************/
header{
	padding: 40px 0;
	background-color: rgba(0,0,0,.9 );

}

	header figure{
		float:left;
		width:54px;
	}
	
	header nav{
		float:right;
		width:auto;
		overflow:hidden;
		padding: 20px 0 0 0;
	}
	
			header nav p{
				font-size: 125%;
				font-weight:400;
			}
			
				header nav p span{
					margin: 0 0 0 10px;
				}
				
					header nav p span a{
						color: white;
						text-decoration: none;
					}


/******************************************************************
							H1
******************************************************************/
h1{
	font-family: "Helvetica", Sans-Serif;
	font-size: 450%;
	text-align: center;
	font-weight:700;
	line-height: 100%;
}

h2{
	
	padding-bottom: 2%;

}

	p span{
		color:#d33934;
	}

/******************************************************************
							SECTION PRÉSENTATION
******************************************************************/
section.presentation{
	padding:5% 20% 5% 20%;
	background-color:#0f0f0f;
	position: relative;	
	text-align: center;
}

	section.presentation p{
		font-size: 100%;
		line-height:150%;
	}

section.presentation img{
		margin-bottom:5%;
	}

.iconsTop img, .iconsBottom img{
		width: 50%;
	}

section article.iconsTop div.item, section article.iconsBottom div.item{
			/*background-color:brown;*/
			width:25%;
			float:left;	
			margin-bottom: 5%;
		}

section article.iconsTop div.item figure img, section article.iconsBottom div.item figure img{
			/*background-color:brown;*/
			margin-bottom:0px;
		}

	

/******************************************************************
							SECTION SERVICES
******************************************************************/
section.services{
	padding:5% 20% 5% 20%;
	background-color:#fbfbfb;	
	text-align: center;
	color:black;
	}

section.services p{
	font-size: 100%;
		line-height:150%;
}

/******************************************************************
							SECTION ENGAGEMENT
******************************************************************/
section.Engagement{
	padding:5% 20% 5% 20%;
	background-color: #ebebeb;
	text-align: center;
	color:black;
}


	section.Engagement p{
		float: left;
		width: auto;
		overflow: hidden;
		font-size: 100%;
		line-height:150%;
	}

section.Engagement p span{
	font-size: 21px;	
	color:#d33934;
	font-weight: 700;
	}



/******************************************************************
							SECTION FOOTER
******************************************************************/
footer{
	padding:120px 0 120px 0;
	background-color: #0f0f0f;
	color:white;
	text-align: center;
}

footer a{
	color:darkred;
	text-decoration: none;
}

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: height 200ms;
}

/******************************************************************
							EXTRAS
******************************************************************/
div.pousse{
	clear:both;
}

aside.menu-side{
	position:fixed;
	bottom:0;
	right:0;
	z-index: 1000;
	padding: 20px;
	font-size:200%;
	background-color:black;	
}

/******************************************************************
							SERVICES
******************************************************************/

.row img{
	
   opacity: 1;


	
}

.gallery{
margin: auto;
  width: 80%;
	height:110%;
	
}

.galleryBG {
	background-image: url("../images/photo-1587293852726-70cdb56c28662.jpg");
	padding: 50px;
	background-size: cover;

	
}

.containerIMG {
  position: relative;
  text-align: center;
  color: white;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}