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

:root {
    --marge-externe: 9vw;
    --marge-interne: 9vw;
}

* {border: 0; margin: 0; padding: 0;}

html { scroll-behavior: smooth;}

body {font-family: "Signika", sans-serif; color: #7e5d43; line-height: 1.3;}

#container {overflow: hiddenl}

img {display: block;}

h1 {display: block; height: 0px; visibility: hidden;}
h2 {font-size: 70px; letter-spacing: 3px; margin-bottom: 1vw; text-transform: uppercase;}
p {font-size: 30px; padding-bottom: 30px;}
div p:last-of-type {padding-bottom: 0;}



/* flex div centrée */

#en-top, #apropos, #contact { display: flex; align-items: center;}



/* largeur 33% */

#en-top-gauche, #services-droit, #apropos-gauche, #temoignages-droit {width: calc((100%/3)*2);}


/* largeur 66% */

#en-top-droit, #img-service, #apropos-droit {width: calc(100%/3);}


/* padding vertical */

#en-top-gauche, #services, #temoignages, #apropos-gauche, #contact {padding: 10vw 0;}




.div-contenu {padding-left: var(--marge-externe); padding-right: var(--marge-interne);}

header {display: flex; align-items: flex-end; padding-top: 3vw; padding-bottom: 2vw; position: relative;}
#header-logo {padding-left: var(--marge-externe);}
#header-logo img {width: 300px; height: auto;}
#header-nav {padding-right: var(--marge-externe); margin-left: auto;}
header .menu-social {position: absolute; top: 3vw; right: var(--marge-externe); text-align: right;}
.menu-social a {display: inline-block; width: 40px; height: 40px; padding: 10px;}
.menu-social a img {width: 100%; height: auto;}
#header-menu {}
#header-menu a { color: #7e5d43; text-decoration: none; font-size: 30px; padding-left: 30px; margin-left: 30px; position: relative; display: inline-block;}
#header-menu a::after {content: "-"; position: absolute; left: 0; transform: translateX(-50%);}
#header-menu a:first-child {padding-left: 0; margin-left: 0;}
#header-menu a:first-child::after {display: none;}


#en-top {background-color: #e5dcd6;}
#en-top p {display: none;}
#en-top-gauche-l1, #en-top-gauche-l2 {font-size: 70px;}
#en-top-gauche-l2 {text-align: right;}
.en-signature {font-size: 40px; margin-top: 2vw; font-style: italic; text-align: right; font-weight: bold;}
#en-top-droit img {width: 100%; height: 100%; object-fit: cover; object-position: top center;}


#services {display: flex; background: url("../images/bg-plantes.png") bottom left 4vw no-repeat; background-size: 25% auto;}
#img-service {background:url("../images/services/general.jpg") center center no-repeat; background-size: cover; position: relative; margin-bottom: 8vw;}
#services-droit {}
#liste-services {}
.service-element {border-bottom: 1px solid rgba(0,0,0,0.1);}
.service-element:hover {}
.service-element:last-child {margin-bottom: 0; border: 0;}
#liste-services h3 { padding: 30px 0; font-size: 40px; position: relative; font-weight: normal;}
#liste-services h3:after {position: absolute; content: "+"; top: 50%; right: 0; transform: translate(40%, -50%); font-size: 40px; font-weight: 300;}
#liste-services h3:before {position: absolute; content: ""; left: -20px; top: 12px; width: 40px; height: 40px; background-size: cover; background-repeat: no-repeat;}
#liste-services h3.ui-state-active:after {content: "-"}
#liste-services h3:hover {cursor: pointer;}
.service-contenu { padding-bottom: 2vw;}
.service-element img {display: none;}


#apropos {background-color: #e5dcd6;}
#apropos-gauche {}
#apropos-droit {}
#apropos-droit img {width: 100%; height: 100%; object-fit: cover; object-position: top center;}

#temoignages {display: flex; background: url("../images/bg-temoignages.jpg") bottom left no-repeat; background-size: cover;}
#temoignages-gauche {}
#temoignages-droit h2 {color: #fff;}
#temoignages-droit {margin-left: auto;}
.carousel-cell {}
.carousel-cell p {color: #fff;}
.carousel-cell p span {font-style: italic;}

.flickity-viewport {padding-bottom: 50px;}
.flickity-prev-next-button {top: 100% !important;}
.flickity-button {color: #fff !important; background: transparent !important;}
.flickity-button:focus {outline: 0;}

#contact {background: url("../images/en-picto.png") center center no-repeat; background-size: 5% auto;}
#contact-gauche, #contact-droit {width: 45%;}
#contact-gauche {margin-right: 5%; text-align: right;}
#contact-droit {margin-left: 5%; text-align: left;}
#contact-droit p {line-height: 1.5;}
#contact-droit a {color: #7e5d43; text-decoration: none;}
#contact-droit .menu-social {}
#contact-droit .menu-social a:first-child {padding-left: 0;}