@charset "utf-8";

body {margin: 0;
	min-height: 100vh;
	display: flex; 
	flex-direction: column;}

/* ---------------------------------------------- MENU */

.logo {
	width: 250px;
	display: block;
	margin: 0 auto;
	padding: 10px;}

nav {text-align: center;
	font-family: 'Rubik', sans-serif;
	font-weight: bolder;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding-bottom: 20px;}

nav a {
	text-decoration: none;
	color: #353535;
	padding: 0px 20px;}

nav .link1:hover {
	color: #be1622;}

nav .link2:hover {
	color: #f3920f;}

nav .link3:hover {
	color: #ddc100;}

nav .link4:hover {
	color: #66b32e;}

nav .link5:hover {
	color: #0d65a6;}

nav .icon {
	display: none;}
/* ---------------------------------------------- */

.main {flex-grow: 1;}

h1 {font-family: 'Domine', serif; 
	text-align: center;
	font-size: 40px;}

h2 {font-family: 'Domine', serif;
	text-align: center;}

h3 {font-family: 'Domine', serif;}

p {font-family: 'Montserrat', sans-serif; 
	font-size: 16px;
	line-height: 28px;
	text-align: justify;
	color: #353535;
	margin: 0 auto;}

b {color: #000;}

/* ---------------------------------------------- PAGE 1 - INDEX */

.parallax {
	background-image: url("../images/parallax.JPG");
	height: 700px;
	background-attachment: fixed;
  	background-position: center;
 	background-repeat: no-repeat;
	background-size: cover;}

.entreprise h1 {
	color: #f16146;
	margin-top: 50px;
	margin-bottom: 10px;}

.entreprise h2 {
	color: #f16146;
	margin-bottom: 0px;
	font-size: 30px;}

.entreprise .liste {
	text-align: center;}

.fa-angle-right {
	padding-right: 5px;}

.entreprise p {
	width: 75%;
	padding-top: 30px;
	padding-bottom: 50px;}

.entreprise img {
	width: 33%;}

.entreprise h3 {
	font-size: 25px;
	font-style: italic;
	text-align: center;
	line-height: 35px;
	background-color: #f16146;
	padding: 100px 25%;
	margin: 0px;}

.entreprise h3 span {
	font-size: 15px;}

/* ---------------------------------------------- PAGE 2 - SERVICES */

.services h3 {
	font-family: 'Shrikhand', cursive;
	font-weight: 100;
	font-size: 50px; 
	text-align: center;
	letter-spacing: 2px;
	line-height: 70px;
	color: #fff;
	background: rgb(243,146,15);
	background: radial-gradient(circle, rgba(243,146,15,1) 35%, rgba(243,105,15,1) 100%);
	padding: 70px 20%;
	margin-top: 0px;}

.services h1 {
	color: #f3920f;
	margin-bottom: 10px}

.services p {
	padding: 50px 0px 90px 0px;;
	width: 75%; }

.services img {
	width: 33%;}

/* ---------------------------------------------- PAGE 3 - REALISATIONS */

.mini-menu {
	text-align: center;
	text-transform: uppercase;
	font-family: 'Rubik', sans-serif;
	font-size: 12px;
	background-color: #DDC100;
	padding: 15px;
	margin: 0px;}

.mini-menu a {
	padding: 20px;
	text-decoration: none; 
	color: #000;}

.mini-menu a:hover {
	color: #fff;}

.box {
	display: flex;
	align-items: center;
	justify-content: center;} 

.half {
	float: left; 
	width: 50%;}

.descriptif h1 {
	margin-top: 0px;
	color: #DDC100; 
	font-size: 30px;
	margin-bottom: 0px;}

.descriptif h2 {
	font-size: 16px;
	font-weight: 100;
	font-style: italic;
	margin-top: 5px;
	color: #353535;}

.descriptif p {
	width: 80%; 
	text-align: center;
	line-height: 20px;
	padding-top: 20px;}

.slideshow-container {
	max-width: 1000px;
	position: relative;}

.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 43px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	background-color: rgba(0,0,0,0.9)}

.next {
	right: 0;
	border-radius: 3px 0 0 3px;}

.realisations .trait-separation {
	display: none;}

.btn-photos {
	padding-top: 50px;
	padding-bottom: 20px;}

.btn-photos:hover {
	 text-decoration: underline; 
	color: #747474;}

.btn-photos button {
	text-align: center; 
	display: block; 
	margin: auto; 
	padding: 15px; 
	font-family: 'Rubik', sans-serif;
	font-weight: bolder;
	font-size: 16px;
	border: none ; 
	border-radius: 10px;
	background-color: #DDC100; 
	color: #353535;
	cursor: pointer;}

/* ---------------------------------------------- PAGE 3.1 - PHOTOS */

.photos h1 {
	color: #ddc100}

.photos .row {
	display: flex;
  	flex-wrap: wrap;
  	padding: 0 2px;}

.photos .column {
	flex: 32.9%;
  	max-width: 32.9%;
  	padding: 0 0.2%;}

.photos .column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;}

/* ---------------------------------------------- CONTACT */

.carte-de-france {
	width: 100px; 
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;}

.contact h2 {
	margin: 25px 0px;
	color: #353535;}

.contact .force-commerciale {
	width: 75%; 
	padding-bottom: 60px;}

.agence {
	float: left; 
	width: 50%;
	text-align: center;
	padding-bottom: 40px;}

.agence img {
 	width: 50px;
	margin-top: 50px;}

.agence h3 {
	font-size: 25px;
	margin-left: 10px;
	margin-right: 10px;}

.agence p { 
	font-family: 'Domine', serif;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: #000;
	padding-bottom: 20px;}

/* ---------------------------------------------- */

.mentions p {
	text-align: center;
	padding: 10px;}

/* ---------------------------------------------- */

.trait {
	margin: 0 auto;
	width: 90%;
	height: 1px; 
	margin-top: 30px;
	background-color: #7D7D7D;}
	
/* ---------------------------------------------- FOOTER */

.footer-responsive-mobile {
	display: none;}

#footer {
	font-family: 'Rubik', sans-serif; 
	font-size: 12px;
	color: #353535;
	padding: 20px 0px;
	width: 80%;  
	margin: 0 auto;}
		
#footer td { 
	padding: 5px 0px;}

#footer a {
	text-decoration: none;
	color: #353535;}

#footer a:hover {
	text-decoration: underline;}

#footer .col-1 {
	width: 45%;}

#footer .col-3 {
	width: 150px;}

#footer img {
	width: 25px; 
	padding-right: 15px;}
	
.footer {
	font-family: 'Rubik', sans-serif; 
	font-size: 12px;
	text-align: center;
	color: #fff;
	background-color: #353535;
	padding: 10px;
	margin: 0px;}

/* ---------------- */

@media (max-width:549px){ /* --- MOBILE */ 
	.logo {width: 200px; padding-top: 20px;}
	
	h1 {font-size: 30px;}
	p {font-size: 14px; line-height: 24px;}
	
	.parallax {height: 300px; background-attachment: scroll; background-size: 100%;}
	.entreprise h1 {width: 90%; margin: 0 auto; padding-top: 30px;}
	.entreprise h2 {font-size: 26px;}
	.entreprise .liste {text-align: left; padding-left: 20px; padding-bottom: 20px;}
	.entreprise p {width: 90%;}
	.entreprise img {width: 100%;}
	.entreprise h3 {font-size: 16px; line-height: 25px; padding: 50px 10%;}
	.entreprise h3 span {font-size: 12px;}
	
	.services h3 {font-size: 30px; line-height: 40px; padding: 30px 10%;}
	.services h1 {font-size: 30px; width:90%; margin: 0 auto;}
	.services p {width: 90%; padding-top: 30px; padding-bottom: 50px;}
	.services img {width: 100%;}
	
	.box {display: inline;}
	.half {width: 100%;}
	.slideshow-container {padding: 10px 0px;}
	.descriptif h1 {margin-top: 10px; font-size: 25px;}
	.descriptif p {width: 90%; padding-bottom: 20px;}
	.realisations .trait-separation {display: block; width: 90%; height: 1px; margin: 10px 5%; background-color: #353535;}
	
	.btn-photos button {width: 80%}
	
	.photos .column {flex: 100%; max-width: 100%;}
	
	.contact h2 {font-size: 20px; width: 90%; margin: 0 auto; padding-top: 30px; padding-bottom: 10px;}
	.contact .force-commerciale {width: 90%;}
}

@media (max-width:860px){ /* --- RUPTURE DES NAVIGATIONS */
	.logo {margin-top: 70px;}
	p {font-size: 14px;}
	
	nav .icon {display: block; letter-spacing: 3px; font-size: 20px; font-weight: 100; text-align: left; padding-top: 25px; color: #353535;}
	nav .fa {padding-right: 10px; color: #000;}
	nav a:not(:first-child) {display: none;}
	nav {padding-left: 25px; padding-bottom: 30px; background-color: #fff; position: fixed; z-index: 1; top: 0; width: 100%; box-shadow: 0px 0px 20px -3px #353535;}
	.header-nav.responsive a {padding-top: 45px; display: block; text-align: left; letter-spacing: 2px;}
	
	.trait {margin-top: 20px;}
	
	.agence {width: 100%; float: none;}
	
	#footer {display: none;}
	.footer-responsive-mobile {display: block; padding-top: 30px; text-align: center; }
	.footer-responsive-mobile a {text-decoration: underline; color: #353535; font-family: 'Rubik', sans-serif; line-height: 35px; font-size: 14px;}
	.footer-responsive-mobile img {width: 25px; margin: 0px 15px 5px 15px; vertical-align: middle;}
	.footer-responsive-mobile p {margin: 0 auto; font-family: 'Rubik', sans-serif; color: #353535; padding: 20px 0px; text-align: center;}
	.footer-responsive-mobile p b {color: #353535;}
	.footer {line-height: normal; padding: 20px 5px;}
}

@media (min-width:550px) and (max-width:899px){ /* --- TABLET */
	h1 {font-size: 30px;}
	p {font-size: 14px;}
	
	.parallax {height: 500px;}
	.entreprise p {width: 80%;}
	.entreprise img {width: 32.8%;}
	.entreprise h3 {padding: 50px 15%;}
	
	.services h3 {font-size: 40px; line-height: 60px; padding: 50px 15%;;}
	.services p {width: 80%; padding-top: 30px; padding-bottom: 50px;}
	.services img {width: 32.8%;}
	
	.box {display: inline;}
	.half {width: 100%;}
	.slideshow-container {padding: 10px 0px;}
	.descriptif h1 {margin-top: 10px; font-size: 25px;}
	.descriptif p {width: 90%; padding-bottom: 20px;}
	.realisations .trait-separation {display: block; width: 90%; height: 1px; margin: 10px 5%; background-color: #353535;}
	
	/*.photos .column {flex: 48.8%; max-width: 48.8%; padding: 0 0.4%;}*/
	
	.contact h2 {width: 90%; margin: 0 auto; padding: 10px 0px;}
	.contact .force-commerciale {width: 80%;}

	#footer {width: 90%;}
	#footer .col-3 {width: 130px;}
}

@media ( min-width : 900px ) and (max-width : 1300px ){ /* --- MEDIUM DESKTOP */
	.entreprise h3 {padding: 100px 15%;}
	
	.descriptif p {width: 90%;}
	
	#contact h2 {font-size: 20px;}
	
	#footer {width: 90%;}
	#footer .col-1 {width: 43%;}
	#footer .col-3 {width: 150px;}
}