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

html, p {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/*
font-family: 'Montserrat', sans-serif;
font-family: 'Zeyada', cursive;

color bleu : #313C48
color orange : #EF8508
*/

* {
  box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;

	font-family: futura-pt-bold, sans-serif;
	color: #313C48;
}

p, h1, h2, h3, h4, h5, h6, a {
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

h2 {
	font-size: 7vmin;
	line-height: 1em;
	letter-spacing: -0.02em;

	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
}

a {
	text-decoration: none;
	color: #FFF;
}

a:hover {
	color: #EF8508;
}



/* ****************************************************************************************************************************************
																	GENERAL
**************************************************************************************************************************************** */

section {
	width: 100%;
	min-height: 100%;

	display: flex;
  flex-direction: column;
  justify-content: center;
}

.page {
	width: 100%;
  padding: 10vmin 0vmin;

	text-align: center;
}

.titre {
	position: relative;

	width: 100%;
	height: 30vmin;

	overflow: hidden;
	margin: 6vmin 0vmin;
}

.titre h2 {
	position: relative;
	z-index: 20;

	max-width: 120vmin;

	padding: 0vmin 8vmin;
	padding-top: 11.5vmin;
	margin: auto;

	text-align: left;
}

h3 {
	position: absolute;
	z-index: 0;

	width: 100%;

	top: 50%;
  transform: translateY(-50%);

	color: #EF8508;

	font-family: 'Zeyada', cursive;
	font-size: 25vmin;
	letter-spacing: -0.03em;
	text-align: center;
}


.content {
	max-width: 120vmin;
	margin: auto;

	padding: 2vmin 8vmin;
}


/* ****************************************************************************************************************************************
																	HOME
**************************************************************************************************************************************** */
#home {
	background-image: url(content/photo-home.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	color: #FFF;
}

#home h1 {
	position: absolute;
	top: 0px;
	left: 0px;

	width: 50vmin;
	padding: 4vmin;
}

#home a {
	position: absolute;
	top: 6vmin;
	right: 6vmin;
	width: 5vmin;
	z-index: 30;

	filter: drop-shadow(0px 0px 2vmin #000);
}

#home a svg {
  fill: white;
  width: 100%;
}

#home a:hover svg {
  fill: #EF8508;
}

#home h2 {
	text-align: center;

	display: flex;
  flex-direction: column;
  justify-content: center;

	width: 100%;
	height: 100%;

	position: absolute;
	top: 0px;

	text-shadow: 0px 0px 2vmin rgba(0,0,0,0.5);
}

#valdesign {
	position: absolute;
	bottom: 4vmin;
	right: 6vmin;
}

#valdesign img {
	width: 14vmin;
}

/* ****************************************************************************************************************************************
																	VALEURS
**************************************************************************************************************************************** */


#presentation p {
	font-size: 3vmin;
	font-weight:  bold;
	text-align: left;
	line-height: 1.5em;
}

#presentation a {
	display: inline-block;

	padding: 1.2vmin 2vmin;
	margin-top: 8vmin;

	border: dashed 0.2vmin #EF8508;

  font-size: 2.5vmin;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;

	color: #EF8508;

	transition-property: color, background-color, border-style;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

#presentation a:hover {
	border: solid 0.2vmin #EF8508;
	color: #FFF;
	background-color: #EF8508;
}

/* ****************************************************************************************************************************************
																	REALISATIONS
**************************************************************************************************************************************** */

#réalisations .page {
  padding-bottom: 0px;
}

#galerie, #allPhotos {
	position: relative;
	height: 100vh;
}

.photos {
	position: absolute;
	width: 100%;
	height: 100vh;

	background-position: center;
	background-size: cover;
}

.photos .legendes {
	position: absolute;

	left: 50%;
	transform: translateX(-50%);
	bottom: 4vmin;
	padding: 0vmin 8vmin;

	width: 100%;
	max-width: 120vmin;

	text-align: left;

	color: #FFF;
	text-shadow: 0px 0px 2vmin rgba(0,0,0,0.3);
}
.photos .legendes .ImgTitle {
	font-size: 2.75vmin;
	display: inline-block;
	padding-left: 2vmin;
}
.photos .legendes .ImgNombre {
	font-size: 8vmin;
	display: inline-block;
  color: white;
  -webkit-text-stroke: 0.35vmin white;
  -webkit-text-fill-color: rgba(0,0,0,0);
}

#MenuGalerie {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	text-align: center;
}

#MenuGalerie a {
	padding: 2vmin;
	margin: 4vmin;
	display: inline-block;

	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size: 3vmin;
	text-shadow: 0px 0px 2vmin rgba(0,0,0,0.2);
}

#MenuGalerie .actif {
	text-decoration: underline;
	color: #EF8508;
}

#btLeft, #btRight {
	display: block;
	display: flex;
  justify-content: center;

	height: 100vh;
	width: 15vmin;
	position: absolute;

	z-index: 10;
	text-align: center;

	filter: drop-shadow(0px 0px 2vmin #000);
}

#btLeft svg, #btRight svg {
  fill: white;
  width: 3vmin;
}

#btLeft:hover svg, #btRight:hover svg {
  fill: #EF8508;
}

#btLeft svg {
  transform: scaleX(-1);
}

#btLeft {
	left: 0px;
}
#btRight {
	right: 0px;
}


/* ****************************************************************************************************************************************
																	LOGOS
**************************************************************************************************************************************** */

.galerie_logos {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;

	max-width: 160vmin;

	padding: 0vmin 8vmin;
	margin: auto;
}

.galerie_logos .logo {
	flex-basis: 20%;
	min-width: 180px;

  font-size: 0px;
}

.galerie_logos .logo img {
  width: 100%;
}


/* ****************************************************************************************************************************************
																	CONTACT
**************************************************************************************************************************************** */
#contact {
	position: relative;

	color: #FFF;

	background-color: #313C48;
}

#contact .content {
	padding-bottom: 6vmin;
}

/* *********************************** HEADER CONTACT */
#header_contact {
	max-width: 120vmin;
  height: 22vmin;

	padding: 0vmin 8vmin;
	margin: auto;
  margin-top: 3vmin;

  display: flex;
  flex-flow: nowrap row;
  justify-content: center;
}

#header_contact #logo_contact {
  display: inline-block;
  flex-grow: 9;
  text-align: left;
}

#header_contact #logo_contact img {
  height: 100%;
}

#header_contact #bt_retour {
  flex-grow: 1;
  width: 10%;
  align-self: center;
}

#header_contact #bt_retour svg {
  width: 15%;
  fill: white;
  transform: rotate(270deg);
}

#header_contact #bt_retour:hover svg{
  fill: #EF8508;
}

/* *********************************** INFOS CONTACT */
.infos {
	display: flex;
	flex-flow: row wrap;
	margin: auto;
	text-align: left;
}

.infos .icon {
	width: 9vmin;
	height: 10vmin;
}

.infos .icon img {
	width: 5vmin;
}

.infos p {
	font-size: 3.5vmin;
}

/* *********************************** FOOTER CONTACT */
footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;

	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size: 1.4vmin;
	letter-spacing: 0.1em;

	padding-bottom: 2vmin;
}


/* ****************************************************************************************************************************************
******************************************************************************************************************************************

******************************************************************************************************************************************
**************************************************************************************************************************************** */
@media (max-width: 640px) {

	/************************************************* HOME */
	#home h1 {
		left: 50%;
		transform: translateX(-50%);

		width: 75vmin;
	}

	#valdesign img {
		width: 20vmin;
	}

	/************************************************* VALEURS */
  #presentation p {
  	font-size: 4vmin;
  }
  #presentation a {
  	font-size: 3vmin;
  }

	/************************************************* REALISATIONS */
	#MenuGalerie a {
		font-size: 3.8vmin;
	}

	.photos .legendes .ImgTitle {
		font-size: 3.8vmin;
		padding-left: 3vmin;
	}
	.photos .legendes .ImgNombre {
		font-size: 11vmin;
	}

	/************************************************* LOGOS */
	.galerie_logos .logo {
    flex-basis: 50%;
    min-width: 50px;
	}

	/************************************************* CONTACT */
  #contact .content {
  	padding-bottom: 20vmin;
  }

  #logo_contact {
    height: 25vmin;
    text-align: center;
  }

  #header_contact #logo_contact {
    text-align: center;
    padding-left: 10%;
  }
  #header_contact #bt_retour svg {
    width: 30%;
  }

	.infos {
		flex-flow: column wrap;
		margin-top: 4vmin;
	}

	.infos > * {
		flex: 1 100%;
		text-align: center;
	}

	.infos .icon {
		width: 100%;
	}

	.infos .icon img {
		width: 8vmin;
	}

	.infos p {
		font-size: 5vmin;
	}

	footer {
		font-size: 2vmin;
		padding-bottom: 4vmin;
	}
}