@charset "utf-8";
body, html {height: 100%;margin: 0;background-color: #f2f2f2;color:#2D2D2B;}
html{scroll-behavior: smooth;}
section{padding:5% 10%;}
h1{font-size:5em;line-height: 1.2em; font-weight: 700;font-weight: 500;font-family: "Noto Sans", sans-serif;}
h2{font-size: 4em;line-height: 1.2em;font-family: "Noto Sans", sans-serif;margin-bottom: 10%;}
h3{font-size: 2em;line-height: 1.2em;font-family: "Noto Sans", sans-serif;}
.sous-titre{font-size:1.5em;line-height: 1.8em;width:70%;font-family: "Merriweather Sans", sans-serif;margin-bottom: 5%;}
p{font-family: "Noto Sans", sans-serif;font-size: 1.1em;line-height: 1.8em;}
nav{font-family: "Noto Sans", sans-serif;}
ul{font-family: "Noto Sans", sans-serif;}
.button1{font-family: "Lato", sans-serif;text-align: center;font-weight: bold;font-size: 1.2em;background: #765137;padding:2% 5%;border-radius:10px;transition:all 0.6s ease;text-decoration: none;color:#f2f2f2;}
.button1:hover {background:#2D2D2B;cursor: pointer;}
.intro-prestations{display:flex;margin-bottom:5%;}
.intro-prestations-left{width:40%;}
.intro-prestations-right{width:60%;font-size: 1.2em;}
.intro-prestations-right p{width:100%;font-weight: 700;}

@media screen and (max-width: 1600px) /*pink*/  {
	.sous-titre{width:80%;padding-bottom:10%;}
	.intro-prestations-right{padding-left:5%;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	.sous-titre{width:100%;padding-bottom:10%;}
	.intro-prestations{display:block;}
	.intro-prestations-left, .intro-prestations-right{width:100%;padding:0;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.sous-titre{width:100%;padding-bottom:10%;}
	.button1{padding:3% 5%;}
}

@media screen and (max-width: 720px) /*purple*/ {
	.sous-titre{width:100%;padding-bottom:10%;}
	h2{font-size: 3em;}
	.button1{padding:5%;}
}

/* ----------- NAVIGATION ----------- */

nav{margin:auto;position:fixed;background-color:#f2f2f2;width:100%;z-index:1;}
nav img{width:20%;padding:1% 5%;}
nav img:hover{padding:1% 7%;transition: all 0.6s ease;}

nav ul{list-style:none;overflow:hidden;padding-right:5%;}
nav ul a{display:block;padding:20px;font-size:1em;text-decoration:none;color:#2D2D2B;border-radius:10px;}
nav ul a:hover{background:#242939;color:#f2f2f2;transition: all 0.6s ease;}

nav .menu-icon{padding: 28px 20px;position:relative;float:right;cursor: pointer;}
nav .menu-icon .nav-icon{background:#333;display:block;height:2px;width:18px;position:relative;transition:background .2s ease-out;}
nav .menu-icon .nav-icon:before{background:#333;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:5px;}
nav .menu-icon .nav-icon:after{background:#333;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:-5px;}

nav .menu-btn{display:none;}
nav .menu-btn:checked ~ .menu{max-height:3000px;}
nav .menu-btn:checked ~ .menu-icon .nav-icon{background:transparent;}
nav .menu-btn:checked ~ .menu-icon .nav-icon:before{transform: rotate(-45deg);top:0;}
nav .menu-btn:checked ~ .menu-icon .nav-icon:after{transform: rotate(45deg);top:0;}

nav .menu{clear:both;max-height:0;transition:max-height .2s ease-out;text-align: right;font-weight: bold;}

@media (min-width:1600px){
    nav li{float:left;}
    nav li a{padding:20px 30px;}
    nav .menu{clear:none;float:right;max-height:none;}
    nav .menu-icon{display:none;}
}

@media screen and (max-width: 1600px) /*pink*/  {
	nav img{width:40%;padding:1% 5%;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	nav img{width:40%;padding:1% 5%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	nav img{width:50%;padding:1% 5%;}
}


@media screen and (max-width: 720px) /*purple*/ {
	nav img{width:60%;padding:5% 0;}
}

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

.home {background-image: url("../media/bureau-blanc.jpg");height:95%;width:85%;margin:auto;padding:0 5%;background-position: bottom;background-repeat: no-repeat;background-size: cover;border-radius: 45px;}

.hero-text{margin-top:8%;position:absolute;width:70%;}
.hero-text p{font-size:1.2em;line-height: 1.5em; width:60%;margin-bottom: 5%;}

@media screen and (max-width: 1600px) {
	.hero-text{margin-top:18%;}
	h1{font-size:3em;}
	.hero-text p{font-size:1.2em;}
}

@media screen and (max-width: 1200px) {
	.hero-text{margin-top:24%;}
}

@media screen and (max-width: 720px) {
	.hero-text{margin:auto;margin-top:44%;width:80%;padding-left:5%;}
	h1{font-size:2.5em;margin:auto;padding-bottom:10%;}
	.hero-text p{font-size:1.1em;padding-bottom:10%;}
}

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

.apropos-images{display: flex;}
.apropos-images-blocks-01{width:30%;margin:0 0.6%;}
.apropos-images-blocks-02{width:20%;margin:0 0.6%;}
.apropos-images-blocks-03{width:40%;margin:0 0.6%;}
.apropos-images-blocks-04{width:10%;margin:0 0.6%;}
.apropos-images-blocks-01 img, .apropos-images-blocks-02 img, .apropos-images-blocks-03 img, .apropos-images-blocks-04 img{width: 100%;border-radius: 20px;height:150px;}

.apropos-details{display:flex;width:100%;}
.apropos-details-left{width:50%;padding:2%;}
.apropos-details-right{width:50%;padding:2%;}

@media screen and (max-width: 1600px)  {
	.apropos-images-blocks-01 img, .apropos-images-blocks-02 img, .apropos-images-blocks-03 img, .apropos-images-blocks-04 img{height:100px;}
}

@media screen and (max-width: 950px) {
	.apropos-details{display:block;}
	.apropos-details-left, .apropos-details-right {width:100%;}
	.apropos-images-blocks-02 img, .apropos-images-blocks-03 img, .apropos-images-blocks-04 img{display: none;}
	.apropos-images-blocks-01{width: 100%;}
}

/* ----------- PRESTATIONS ----------- */

.prestations-text{display:flex;width:100%;}
.prestations-text-left{width:40%;}
.prestations-text-right{width:60%;}

.prestations-details{display:flex;}
.prestations-block{width:33.33%;border-radius: 20px;padding:2%;margin:0 1%;box-shadow: 0 3.2px 2.2px rgba(0, 0, 0, 0.02), 0 7px 54px rgba(0, 0, 0, 0.028), 0 12.1px 10.1px rgba(0, 0, 0, 0.035), 0 19.8px 18.1px rgba(0, 0, 0, 0.042), 0 34.7px 33.8px rgba(0, 0, 0, 0.05), 0 800px 800px rgba(0, 0, 0, 0.07);}
.prestations-block img{width: 100%;border-radius: 20px;}
.prestations-block p{font-size: 1em;line-height: 1.8em;}

@media screen and (max-width: 1200px) {
	.prestations-details{display:block;}
	.prestations-block{width:100%;}
}

/* ----------- TARIFS ----------- */

.tarifs-container{width:100%;display:flex;}

.tarifs-left{width:50%;padding-right:5%;}
.tarifs-right{width:50%;}
.tarifs-right img{width:100%;border-radius: 10px;}

.accordion {background-color: white; cursor: pointer;padding: 3%;width: 100%;text-align: left;border:none;font-family: "Noto Sans", sans-serif;font-size:1em;border-bottom: 1px solid #d9d9d9;transition: all 0.6s ease;box-shadow: 0 3.2px 2.2px rgba(0, 0, 0, 0.02), 0 7px 54px rgba(0, 0, 0, 0.028), 0 12.1px 10.1px rgba(0, 0, 0, 0.035), 0 19.8px 18.1px rgba(0, 0, 0, 0.042), 0 34.7px 33.8px rgba(0, 0, 0, 0.05), 0 800px 800px rgba(0, 0, 0, 0.07);}
.active, .accordion:hover {background-color: #A4A4A8;}
.panel {padding: 0 18px;background-color: white;max-height: 0;overflow: hidden;transition: max-height 0.6s ease-out;}

.accordion:after {content: '\02795';font-size: 1em;color: white;float: right;}
.active:after {content: "\2796";}

.prix{background:#2D2D2B;padding:2% 5%;width:40%;color:#f2f2f2;font-weight: bold; text-align: center;}
.option{font-size:0.8em;}

@media screen and (max-width: 950px) /*blue*/ {
	.tarifs-container{display:block;}
	.tarifs-left, .tarifs-right{width:100%;}
	.tarifs-right img{display: none;}
}

/* ----------- VALEURS ----------- */

.valeurs-blocks{display: flex;}
.valeurs-card{width:50%;display: flex;margin:1%;}
.valeurs-card-left{width:50%;}
.valeurs-card-right{width:50%;}
.valeurs-card-left img{width: 100%;height:100%;border-radius: 10px;}
.valeurs-card-right h3{padding:0 10%;margin:0;}
.valeurs-card-right p{padding:0 10%;font-size: 1em;line-height: 1.5em;}

@media screen and (max-width: 1600px) /*pink*/ {
	.valeurs-blocks{display: block;}
	.valeurs-card{width:100%;}
	.valeurs-card-right{width:100%;}
}

@media screen and (max-width: 1200px) /*yellow*/ {
	.valeurs-blocks{display: block;}
	.valeurs-card{width:100%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.valeurs-card{display: block;width: 100%;}
	.valeurs-card-left{width:100%;}
	.valeurs-card-right{width:100%;margin: 10% 0;}
}

/* ----------- ETAPES ----------- */

.etapes-flex{display:flex;}
.etapes-flex-left{width:60%;}
.etapes-flex-left h3{font-size:1.5em;}
.etapes-flex-right{width:40%;}
.etapes-flex-right img{width:100%;border-radius: 10px;}
.etapes-container{display: flex;}
.etapes-flex-left-block{width:50%;padding:0 3%;border-radius: 10px;}

@media screen and (max-width: 1200px) /*yellow*/ {
	.etapes-flex-right img{display: none;}
	.etapes-flex{display:block;}
	.etapes-flex-left{width:100%;}
}

@media screen and (max-width: 720px) /*purple*/ {
	.etapes-container{display: block;}
	.etapes-flex-left-block{width: 100%;}
}

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

.realisations-container{display:flex;margin-bottom:5%;}
.realisations-blocks{margin:1%;width:33.33%;}
.realisations-blocks img{width:100%;border-radius: 10px;box-shadow: 0 3.2px 2.2px rgba(0, 0, 0, 0.02), 0 7px 54px rgba(0, 0, 0, 0.028), 0 12.1px 10.1px rgba(0, 0, 0, 0.035), 0 19.8px 18.1px rgba(0, 0, 0, 0.042), 0 34.7px 33.8px rgba(0, 0, 0, 0.05), 0 800px 800px rgba(0, 0, 0, 0.07);}
#realisations .button1{margin:auto;display: block;width:30%;}

@media screen and (max-width: 1600px) /*pink*/  {
	#realisations .button1{width:40%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	#realisations .button1{width:60%;}
}

@media screen and (max-width: 720px) /*purple*/ {
	#realisations .button1{width:80%;}
}

/* AUTOPLAY */

.container{margin-top:2%;}
.customer-logo{width:100%;}
.slide{margin: auto;}
.slick-slide {margin: 0px 20px;}
.slick-slide img {width: 100%;}
.slick-list{overflow: hidden;}
.slick-slide{float: left;}

/* ----------- ACTUALITES ----------- */

.actus-container{display:flex;margin-bottom: 3%;}
.actus-container a{text-decoration: none;color:#1a1a1a;width:33.33%;margin:2%;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;padding-bottom:2%;}
.actus-card img{width:100%;}
.actus-card h3{font-size: 1.4em;line-height: 1.5em;padding:0 10%;}
.actus-card p{font-size:1em;line-height: 1.5em;padding:0 10%;}
.actus-date{color:#765137;padding:0 10% 205% 10%;}
#actualites .button1{margin:auto;display: block;width:30%;}
.actus-container a:hover{transform: scale(0.9);transition: 0.6s all;}

@media screen and (max-width: 950px) /*blue*/ {
	.actus-container{display:block;}
	.actus-container a{width:100%;margin-bottom: 5%;}
}

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

.contact-container{display: flex;}

.contact-container-left{width:50%;margin:2%;}

.contact-left-top{background: #CAC7BF;width:90%;border-radius: 10px;margin-bottom:10%;display: flex;padding:5%;}
.contact-left-bottom{background: #CAC7BF;width:90%;border-radius: 10px;padding:5%;display: flex;}
.contact-left-top-image{width:40%;border-radius: 10px;}
.contact-left-top-image img{width:100%;height:100%;border-radius: 10px;}
.contact-left-top-texte{width:60%;padding:5%;}
.contact-container-left ion-icon{font-size: 1.2em;padding-right:5%;}

.contact-container-right{background: white;width:50%;padding:5%;margin:2%;border-radius: 10px;box-shadow: 0 3.2px 2.2px rgba(0, 0, 0, 0.02), 0 7px 54px rgba(0, 0, 0, 0.028), 0 12.1px 10.1px rgba(0, 0, 0, 0.035), 0 19.8px 18.1px rgba(0, 0, 0, 0.042), 0 34.7px 33.8px rgba(0, 0, 0, 0.05), 0 800px 800px rgba(0, 0, 0, 0.07);}

@media screen and (max-width: 1600px) /*pink*/  {
	.contact-left-top-image{display: none;}
	.contact-left-top-texte{width:100%;}
}

@media screen and (max-width: 950px) /*blue*/ {
	.contact-container{display: block;}
	.contact-container-left{display: flex;width:100%;}
	.contact-left-top, .contact-left-bottom{width:90%;margin:5%;}
	.contact-container-right{width:90%;}
}

@media screen and (max-width: 720px) /*purple*/ {
	.contact-container-left{display: block;width:100%;}
	.contact-left-top, .contact-left-bottom{width:80%;}
}

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

footer{background: white;}

.footer-cards{padding:2% 5%;display: flex;}
.footer-card-03{width:33.33%;}

.social{width:100%;display: flex;}
.social a {font-size: 1.2em;padding-right:5%;color:#765137;}
.social a:hover{-webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3);transition:all .6s ease;color:#2D2D2B;}

.copyright{text-align:center;}

.mentions{text-align: right;}
.mentions:hover{color:#8D6C4B;font-weight: 700;transition:all .6s ease;}

@media screen and (max-width: 950px) /*blue*/ {
	.footer-cards{display: block;}
	.footer-card-03{width:100%;}
	.copyright{text-align:left;}
	.mentions{text-align: left;}
	.social{display: block;}
	.social ion-icon {margin:auto;text-align: center;}
}

/* ----------- SCROLL TO TOP ----------- */

#myBtn {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;border: none;outline: none;background-color: #765137;color: #f2f2f2;cursor: pointer;padding: 15px;border-radius: 10px;font-size: 18px;transition:all .6s ease;}
#myBtn:hover {background-color: #2D2D2B;}