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

:root {
    --marge-externe: 9vw;
    --marge-interne: 9vw;
    
    --main-color-or: #d5b06b;
    --main-color-vert: #313b3a;
}

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

html { scroll-behavior: smooth;}

body {font-family: "Montserrat", sans-serif; color: var(--main-color-vert); line-height: 1.3;}

#container {overflow: hidden;}

#lr-rdv {position: fixed; bottom: 0; left: var(--marge-externe); background-color: var(--main-color-or); color: #000; text-decoration: none; font-size: 32px; padding: 20px 30px; border-radius: 10px 10px 0 0; z-index: 999;}
#lr-rdv:hover {background-color: var(--main-color-vert); color: var(--main-color-or);}

img {display: block;}

h1 {display: block; height: 0px; visibility: hidden;}
h2 {font-size: 60px; margin-bottom: 1vw;}
p, ul {font-size: 26px; padding-bottom: 30px;}
ul {padding-left: 40px;}
.liste-service p:last-of-type {padding-bottom: 0;}



/* flex div centrée */

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



/* largeur 33% */

.service-droit, #apropos-gauche {width: calc((100%/3)*2);}


/* largeur 66% */

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


/* padding vertical */

#services, #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; background-color: var(--main-color-vert); color: var(--main-color-or);}
#header-logo {padding-left: var(--marge-externe);}
#header-logo img {width: 350px; height: auto;}
#header-nav {padding-right: var(--marge-externe); margin-left: auto;}

#menu-langue {background-color: var(--main-color-or); text-decoration: none; text-align: center; line-height: 30px; border-radius: 50%; color: var(--main-color-vert); font-weight: bold;}

header .menu-social {position: absolute; top: 3vw; right: var(--marge-externe); display: flex;}
.menu-social a {display: block; width: 40px; height: 40px; padding: 10px;}
.menu-social a img {width: 100%; height: auto;}
.menu-social a:last-child {margin-left: 10px;}
#header-menu {}
#header-menu a { color: #fff; 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;}


.service {display: flex; margin-bottom: 6vw;}
.service:last-child {margin-bottom: 0;}
.service:nth-child(2) {flex-direction: row-reverse;}
.img-service img {width: 100%; height: auto;}
.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-service h3 { padding: 30px 0; font-size: 35px; position: relative; font-weight: normal;}
.liste-service h3:after {position: absolute; content: "+"; top: 50%; right: 0; transform: translate(40%, -50%); font-size: 40px; font-weight: 300; color: var(--main-color-or);}
.liste-service h3:before {position: absolute; content: ""; left: -20px; top: 12px; width: 40px; height: 40px; background-size: cover; background-repeat: no-repeat;}
.liste-service h3.ui-state-active:after {content: "-"}
.liste-service h3:hover {cursor: pointer;}
.service-contenu { padding-bottom: 2vw;}


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

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