@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&family=Dancing+Script:wght@500&family=Shadows+Into+Light&family=Sofia+Sans:wght@900&display=swap');

/* code couleur vert : #008037 */

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
}

/*-------------
		HEADER
------------ */

.header {
	background-color: white;
	height: 150px;
	filter: drop-shadow(1px 10px 7px black); /* ombre */
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: all 0.3s ease 0s;
}

.header .container {
	position: relative;
}

.header-logo img {
	height: 150px; /* taille du logo*/
	transition: all 0.3s ease 0s;
}

.header-logo {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1; /* position du logo */
	left: 0;
}

.header.stickHeader{
	background-color: white;
	height: 90px;
}

.header.stickHeader .menu{
	padding-top: 30px;
}

.header.stickHeader .header-logo img{
	height: 100px;
}

.header.stickHeader .header-tel{
	padding-top: 23px;
}

.menu.stickHeader li{
	;
}

/* menu */

.menu {
	margin-left: 255px;
	padding-top: 66px; /* position du menu */
	z-index: 0;
	transition: all 0.3s ease 0s;
}

.menu li {
	display: inline;
	font-size: 20px;
	padding: 10px; /* espace entre les pages */

}

.menu li > a {
	color: black;
}

.menu li > a:hover {
	color: #008037;
}

/* header telephone */

.header-tel {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 1;
	padding-top: 60px; /* position du tel */
	transition: all 0.3s ease 0s;
}

.header-tel a {
	background-color: #008037;
	color: white;
	padding: 10px 10px;
	display: block;  /* boutton */
	margin-left: 10px;
	border-radius: 10px;
}

.header-tel i {
	padding: 5px; /* icone */
}

.header-tel :hover {
	background-color: #046f32;
}

/*----------
	INDEX
-----------*/

/* SLIDER */

.index-slider {
	margin-top: 150px;
	height: 800px; /* espace du slider */
	z-index: 0;
}

.index-slide1 {
	height: 100%;
	background-image: url("../image/index/macon.jpg");
	background-size: cover;
	background-position: center center;  /* image */
	position: relative;
}

.index-slide1text {
	position: absolute;
	top: 200px;
	left: 200px;
	color: white;
	width: 700px;
	padding-top: 50px;
	border-radius: 10px;
	text-transform: uppercase;
	font-family: 'Shadows Into Light', cursive;
	text-shadow: 0 1px 0 white, 
               0 2px 0 black,
               0 3px 0 black,
               0 4px 0 black,
               0 5px 0 black,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.index-slide1text h1{
	font-size: 70px;
}

.index-slide1text h2{
	font-size: 50px;
}


/*	CONTENU  */


.index-contenu {
	background-color: white;
	height: 800px; /* taille du bloc entier */
	filter: drop-shadow(1px -10px 7px black); /* ombre */
	padding-top: 200px; /* marge entre slider et bloc contenu*/
	z-index: 0;
}

.index-contenu .index-contenu-img{
	height: 380px;
	 /* marge gauche */
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	background-image: url(../image/index/contenu.jpg);
	background-size: 120%;
	background-position: center center;
	transition: all 0.3s ease 0s;
}

.index-contenu .index-contenu-img:hover {
	background-size: 140%;
}

.index-contenu .contenutxt { /* A propos */
	padding: 10px;
	padding-top: 70px;
	margin-left: 10px;
}

.index-contenu-txt h1{
	text-align: center; /* titre */
	font-family: 'Dancing Script', cursive;
}

.index-contenu-txt p{
	padding-top: 10px; /* text */
}

.index-contenubtn{
	margin-left: 200px; /* boutton */
}

.index-contenubtn :hover {
	background-color: #046f32;
}


/*	SERVICE  */


.service {
	background-color: white;
	height: 1600px; /* taille du bloc entier */
	z-index: 0;
}

.service-titre h1 {
	padding: 70px; /* titre */
	text-align: center;
	font-family: 'Dancing Script', cursive;
}

.service-slider{
	background-color: white; /* bloc du slider */ 
	height: 650px;
}

.service-slider-img{
	height: 100%;
	display: block;
	margin: auto; /* disposition de l'image */
}

.service-slider-img{
	height: 100%;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	background-image: url(../image/index/service-slider1.jpg);
	background-size: 120%;
	background-position: center center;
	transition: all 0.3s ease 0s;
}
.service-slider-img:hover {
	background-size: 140%;
}

.service-text h4{
	padding-top: 30px; /* disposition des titres du text */
	text-align: center; 
}

.service-text p{
	padding-top: 20px; /* text */
}

.service-btn{
	display: block;
	margin-left: auto; /* boutton */
}

.service-btn :hover {
	background-color: #046f32;
}


/*	BACKGROUND  */


.tools {
	height: 300px;
	background-color: gray;
	background-image: url(../image/index/background-tools.jpg);
	background-size: cover;
	background-attachment: fixed;
	z-index: 0;
}

.tools .tools-text{
	padding-top: 140px;
	text-align: center;
	color: white;
	font-family: 'Dancing Script', cursive;
	text-transform: uppercase;
}


/*	DEVIS */


.devis {
	height: 1150px; /* taille du bloc entier */
	z-index: 0;
	background-image: url(../image/index/background-green-tools.jpg);
	background-size: 50%;
}

.devis-color{
	background-color: rgba(0,128,55,0.9);
	height: 1150px;
	padding-top: 150px;
}

.devis-devis {
	height: 860px;
	background-color: white; /* toute la zone */
	border-radius: 10px;
	padding-top: 10px;
}

.devis-text {
	padding: 35px;
	background-color: white; /* zone de gauche */
}

.devis-titre{
	text-align: center;
	color: black;	/* titre */
}

.devis-titre i{
	margin: 10px; /* icone */
}

.formulaire {
	height: 700px;
	background-color: white; /* toute la zone du formulaire */
}

.formulaire form {
  height: 720px;
  margin: auto;
  margin-left: 10px;
  text-align: center;
  padding: 10px;
 
}

.formulaire label {
  display: block;
  margin-bottom: 10px;
  font-weight: normal; /* les labels */
  padding-top: 10px;
}

.formulaire input[type="text"], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid gray; /* zone de text : "votre projet" */
  border-radius: 4px;
}

.formulaire input[type="email"], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid gray; /* zone de text : "votre projet" */
  border-radius: 4px;
}

.formulaire input[type="tel"], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid gray; /* zone de text : "votre projet" */
  border-radius: 4px;
}

.formulaire input[type="submit"] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border-radius: 4px; /* bouton d'envois */
  border: none;
}

.formulaire input[type="submit"]:hover { 
  background-color: #008037;
}

.devis-img{
	height: 860px;
	background-image: url(../image/index/devis-img.jpg); /* l'image */
	background-size: cover;
	margin-left: -20px; /* marge de l'image */
	margin-top: -10px;
}

/*	INTERVENTION */


.intervention{
	height: 1000px;
	background-color: white;
	z-index: 0;
}

.intervention-titre h1{
	margin-top: 50px;
	text-align: center;
	font-family: 'Dancing Script', cursive;
}

.intervention-carte{
	margin-top: 50px;
	background-color: gray;
	height: 600px;
	text-align: center;
}

.intervention-carte #map{
	z-index: 0;
	height: 100%;
}

.intervention-text{
	text-align: center;
	padding-top: 20px;
}

.intervention-text li{
	padding-top: 20px;
	text-align: center;
}

/*-------------
	FOOTER 
-------------*/

.footer {
	background-color: whitesmoke;
	z-index: 0;
}

.footer-text{
	padding: 40px;
}

.footer-social i{
	height: 50px;
	padding-left: 40px;
	font-size: 40px;
	padding-top: 10px;
	border-radius: 100%;
}

.footer-social{
	margin-left: 17px;
}

.footer-text h3{
	text-align: center;
}

.footer-text img{
	height: 150px;
}

.footer-text .nav-list{
	padding-top: 20px;
	text-align: center;
	list-style: none;
	margin-left: -50px;
}

.footer-text a{
	color: black;
}

.footer-text a:hover{
	color: #008037;
}

.footer-text li{
	padding: 5px;
}

.footer-text .contact{
	list-style: none;
	padding-top: 20px;
	margin-right: -50px;
}

.footer-text .contact i{
	padding: 10px;
}

/*	COPYRIGHT */

.copyright {
	text-align: center;
	background-color: black;
	color: white;
	z-index: 0;
	padding: 10px 0px;
}

.copyright-text a{
	color: white;
}

/*	ARROW */

.arrow{
	z-index: 0;
	position: fixed;
	right: 0; 
	bottom: 0;
}

.arrow a{
	font-size: 30px;
	color: white;
	background-color: black;
	margin: 30px;
	display: block;
	width: 50px;
	line-height: 50px;
	border-radius: 100%;
	text-align: center;
}

/*--------------
		A PROPOS
--------------*/

.a-propos-banner {
	margin-top: 150px;		/*toute la zone*/
	background-color: white;
	position: relative;
	z-index: 0;
	height: 600px;	/* zone de l'image de fond */
}

.a-propos-banner-img{
	height: 100%;
	background-image: url("../image/a-propos/a-propos-banner.jpg");
	background-size: cover;
	background-position: center center; /* l'image */
	position: relative;
	z-index: 0;
}

.a-propos-banner-text{
	position: absolute;
	top: 120px;
	left: 140px;
	right: 140px;
	text-align: center;
	text-shadow: 0 1px 0 white, 
               0 2px 0 gray,
               0 3px 0 gray,
               0 4px 0 gray,
               0 5px 0 gray,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.a-propos-banner-text h1 {
	color: white;
	text-transform: uppercase;
	font-family: 'Sofia Sans', sans-serif; /* text sur image */
	font-size: 70px;
}

.a-propos-banner-text h2{
	font-size: 50px;
	font-family: 'Sofia Sans', sans-serif; /* text sur image */
	color: white;
}
/* SECTION 1 */

.a-propos-part1{
	height: 450px;
	margin-top: -100px;
	background-color: white; /* la bulle */
	border-radius: 30px;
	position: relative;
	z-index: 1;
	margin-bottom: 150px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px -60px 40px -10px;
}

.a-propos-text-part1{
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	padding: 50px;
}

.a-propos-img-part1{
	height: 350px;
	padding-top: 100px;
}

.a-propos-text-part1 h1{
	text-align: center;
	font-family: 'Dancing Script', cursive;
	padding-top: 20px;
}

.a-propos-text-part1 p{
	padding-top: 10px;
}

/* background */

.a-propos-background {
	height: 200px;
	background-color: gray;
	background-image: url(../image/a-propos/a-propos-background.jpg);
	background-size: cover;
	background-attachment: fixed;
}

.a-propos-background-text{
	padding-top: 90px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-family: 'Sofia Sans', sans-serif; /* text sur image */
	text-shadow: 2px 2px 1px black;
	font-size: 70px;
}

/* PART 2 */

.a-propos-part2{
	height: 800px;
	padding-top: 150px;
}

.a-propos-img{
	height: 400px;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	background-image: url(../image/a-propos/a-propos-section2.jpg);
	background-size: 100%;
	background-position: center center;
	transition: all 0.3s ease 0s;
}

.a-propos-img:hover {
	background-size: 120%;
}


.a-propos-part2-text{
	padding: 20px;
}

.a-propos-part2-text h1{
	text-align: center;
	font-family: 'Dancing Script', cursive;
}

.a-propos-part2-text li{
	padding: 5px;
}

.a-propos-part2-btn{
	text-align: center;
}

/*----------------
	NOS SERVICES
----------------*/

.nos-services-banner {
	margin-top: 150px;
	height: 450px; /* espace du slider */
	z-index: 0;
}

.nos-services-banner-img{
	height: 100%;
	background-image: url("../image/nos-services/nos-services-banner.jpg");
	background-size: cover;
	background-position: center center;  /* image */
	position: relative;
}

.nos-services-banner-text {
	position: absolute;
	top: 180px;
	left: 200px;
	right: 200px;
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Sofia Sans', sans-serif; /* text sur image */
	text-shadow: 0 1px 0 white, 
               0 2px 0 gray,
               0 3px 0 white,
               0 4px 0 gray,
               0 5px 0 black,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.nos-services-banner-text h1{
	font-size: 80px;
}

/* INTRO */

.nos-services-intro{
	height: 430px;
}

.nos-services-intro-titre{
	font-size: 20px;
	padding-top: 100px;
}

.nos-services-intro-titre h1{
	text-align: center;
	font-family: 'Dancing Script', cursive;
	font-size: 40px;
}

.nos-services-intro-titre p{
	padding: 15px;
}

/* section 1 */

hr {
	height: 10px;
	border: 0;
	box-shadow: 0 5px 5px -5px #8c8b8b inset;
}

.nos-services-section1 {
	background-color: white;
	height: 800px; 
	padding-top: 100px; 
	z-index: 0;
}

.nos-services-sections1-img{
	height: 600px;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	background-image: url(../image/nos-services/nos-services-exterieur.jpg);
	background-size: 170%;
	background-position: center center;
	transition: all 0.3s ease 0s;
}

.nos-services-sections1-img:hover {
	background-size: 180%;
}

.nos-services-section1-text h1{
	text-align: center; /* titre */
	font-family: 'Dancing Script', cursive;
}

.nos-services-section1-text p{
	padding-top: 10px; /* text */
}

.nos-services-section1-btn{
	margin-left: 200px; /* boutton */
}

.nos-services-section1-btn :hover {
	background-color: #046f32;
}

/* section 2 */

.nos-services-section2 {
	background-color: white;
	height: 800px; 
	padding-top: 100px; 
	z-index: 0;
}

.nos-services-sections2-img{
	height: 600px;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	background-image: url(../image/nos-services/nos-services-renovation.jpg);
	background-size: 170%;
	background-position: center center;
	transition: all 0.3s ease 0s;
}

.nos-services-sections2-img:hover {
	background-size: 180%;
}

.nos-services-section2-text h1{
	text-align: center; /* titre */
	font-family: 'Dancing Script', cursive;
}

.nos-services-section2-text p{
	padding-top: 10px; /* text */
}

.nos-services-section2-btn{
	margin-left: 200px; /* boutton */
}

.nos-services-section2-btn :hover {
	background-color: #046f32;
}

/* transition sec 2 to 3 */


.nos-services-transition {
	height: 200px;
	z-index: 0;
	background-image: url(../image/index/background-green-tools.jpg);
	background-size: contain;
}

.nos-services-transition-color{
	background-color: rgba(0,128,55,0.9);
	height: 200px;
	padding-top: 150px;
}

/* section 3 */

.nos-services-section3 {
	background-color: white;
	height: 800px; 
	padding-top: 100px; 
	z-index: 0;
}

.nos-services-sections3-img{
	height: 600px;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	background-image: url(../image/nos-services/nos-services-toiture.jpg);
	background-size: 170%;
	background-position: center center;
	transition: all 0.3s ease 0s;
}

.nos-services-sections3-img:hover {
	background-size: 180%;
}

.nos-services-section3-text h1{
	text-align: center; /* titre */
	font-family: 'Dancing Script', cursive;
}

.nos-services-section3-text p{
	padding-top: 10px; /* text */
}

.nos-services-section3-btn{
	margin-left: 200px; /* boutton */
}

.nos-services-section2-btn :hover {
	background-color: #046f32;
}

/* section 4 */

.nos-services-section4 {
	background-color: white;
	height: 800px; 
	padding-top: 100px; 
	z-index: 0;
}

.nos-services-sections4-img{
	height: 600px;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	background-image: url(../image/nos-services/nos-services-carrelage.jpg);
	background-size: 170%;
	background-position: center center;
	transition: all 0.3s ease 0s;
}

.nos-services-sections4-img:hover {
	background-size: 180%;
}

.nos-services-section4-text h1{
	text-align: center; /* titre */
	font-family: 'Dancing Script', cursive;
}

.nos-services-section4-text p{
	padding-top: 10px; /* text */
}

.nos-services-section4-btn{
	margin-left: 200px; /* boutton */
}

.nos-services-section4-btn :hover {
	background-color: #046f32;
}

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

.contact-banner {
	margin-top: 150px;
	height: 450px; /* espace du slider */
	z-index: 0;
}

.contact-banner-img{
	height: 100%;
	background-image: url("../image/contact/contact-banner.jpg");
	background-size: cover;
	background-position: center center;  /* image */
	position: relative;
}

.contact-banner-text {
	position: absolute;
	top: 180px;
	left: 200px;
	right: 200px;
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Sofia Sans', sans-serif; /* text sur image */
	text-shadow: 0 1px 0 white, 
               0 2px 0 gray,
               0 3px 0 white,
               0 4px 0 gray,
               0 5px 0 black,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.nos-services-banner-text h1{
	font-size: 100px;
}

/* formulaire */

.contact-formulaire{
	margin-top: -80px;
	position: relative;
}

.contact-zone-formulaire {
	height: 820px;
	background-color: #008037; /* toute la zone */
	border-radius: 30px;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	margin-bottom: 150px;
}

.contact-formulaire-info {
	height: 800px;
	color: white;
}

.contact-formulaire-informations ul{
	list-style: none;
}

.contact-formulaire-informations{
	list-style: none;
	font-size: 20px;
	padding-top: 40px;
}

.contact-formulaire-informations li{
	padding-left: 80px;
}

.contact-formulaire-informations h1{
	margin-top: 20px;
	font-size: 50px;
	text-align: center;
	font-family: 'Dancing Script', cursive;
}

.contact-formulaire-informations h2{
	padding: 30px;
	margin-left: -70px;
	font-size: 23px;
}

.contact-formulaire-informations a{
	color: white;
}

.contact-formulaire-informations i{
	padding: 10px;
}

.contact-formulaire-social{
	font-size: 30px;
	text-align: center;
	margin-left: -60px;
	margin-top: -20px;
}

.contact-formulaire-formulaire-titre{
	text-align: center;
	color: black;	/* titre */
	padding-top: 40px;
}

.contact-formulaire-formulaire-titre i{
	margin: 10px; /* icone */
}

.contact-formulaire-formulaire{
	background-color: white;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}

.contact-formulaire-form {
	height: 724px;
}

.contact-formulaire-form form {
  height: 720px;
  margin: auto;
  margin-left: 10px;
  text-align: center;
  padding: 10px;
}

.contact-formulaire-form label {
  display: block;
  margin-bottom: -10px;
  font-weight: normal; /* les labels */
  margin-top: 20px;
}

.contact-formulaire-form input[type="text"], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid gray; 
  border-radius: 4px;
}

.contact-formulaire-form input[type="email"], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid gray; 
  border-radius: 4px;
}

.contact-formulaire-form input[type="tel"], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid gray; 
  border-radius: 4px;
}

.contact-formulaire-form input[type="submit"] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border-radius: 4px; /* bouton d'envois */
  border: none;
}

.contact-formulaire-form input[type="submit"]:hover { 
  background-color: #008037;
}

/* MAP */

.contact-map{
	height: 940px;
	background-color: white;
}

.contact-map-titre{
	font-family: 'Dancing Script', cursive;
	font-size: 30px;
	padding: 10px;
	margin-top: 70px;
	text-align: center;
}

.contact-map-map{
	margin-top: 70px;
	background-color: gray;
	height: 600px;
	text-align: center;
}

.contact-map-map #map{
	height: 100%;
	z-index: 0;
}

.contact-map-info{
	margin-top: 30px;
	text-align: center;
	font-size: 20px;
}

/*----------------------
	NOS REALISATIONS
-----------------------*/

.nos-realisations{
	margin-top: 70px;
	height: 500px;
	background-color: white;
}

.nos-realisations-titre{
	margin-top: 50px;
	color: black;
}