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

:root {
    --main-color-vert: #97bf0d;
}

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

body {font-family: 'Montserrat', sans-serif; line-height: 1.4;}

.div-inner {width: 80%; margin: 0 auto; position: relative;}

header {position: relative; overflow: hidden; height: 70vh; background: url("../images/bg-top.jpg") center center no-repeat; background-attachment: fixed; background-size: cover;}
header .div-inner {height: 100%;}
header:before {background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.3)); content: ""; position: absolute; z-index: 0; width: 100%; height: 100%;}
#header-logo {position: relative; z-index: 1; padding-top: 30px;}
#header-logo img {width: 400px; height: auto;}
#header-coordonnees {position: fixed; z-index: 2; top: 0; right: 10%; overflow: hidden;}
#header-coordonnees div {color: #fff; background-color: rgba(0,0,0,0.8); padding: 10px 20px 10px 60px; float: right; margin-left: 20px; background-size: 20px 20px; background-repeat: no-repeat; background-position: left 20px center;}
#header-coordonnees-tel {background-image: url("../images/icons/coordonnees/tel.svg");}
#header-coordonnees-mail {background-image: url("../images/icons/coordonnees/mail.svg");}
#header-coordonnees-mail a {text-decoration: none; color: #fff;}
#header-coordonnees-mail a:hover {color: var(--main-color-vert);}
#header-slogan {position: absolute; z-index: 1; bottom: 100px; width: 50%;}

h1 {visibility: hidden; height: 0;}
#header-slogan h2 {font-weight: bold; font-size: 50px; color: #fff;}
#header-slogan h3 {font-weight: bold; font-size: 35px; color: var(--main-color-vert);}
h3 {line-height: 1.2;}

p, ul {font-size: 20px; margin-bottom: 20px; color: #272727;}
ul {list-style: none;}
ul li {padding-left: 40px; position: relative;}
ul li:before {content: ""; position: absolute; background: url("../images/icons/fleche.svg"); background-repeat: no-repeat; background-size: cover; width: 16px; height: 9px; left: 10px; top: 10px;}

#zone-terre {background: url("../images/bg-roche.jpg") center center no-repeat; background-size: cover; background-attachment: fixed;}
#coordonnees { padding-right: 55% !important;}
#coordonnees h3 {color: #fff; font-size: 30px; margin-bottom: 30px;}
#coordonnees p {color: #fff; padding-left: 50px; position: relative;}
#coordonnees p:before {position: absolute; content: ""; width: 30px; height: 30px; background-size: cover; left: 0; top: 0;}
#coordonnees p:nth-child(2):before {background-image: url("../images/icons/coordonnees/pointeur.svg");}
#coordonnees p:nth-child(3):before {background-image: url("../images/icons/coordonnees/tel.svg");}
#coordonnees p:nth-child(4):before {background-image: url("../images/icons/coordonnees/mail.svg");}
#coordonnees p a {color: #fff;}
#coordonnees p a:hover {color: var(--main-color-vert); text-decoration: none;}

#apropos {
  display: flex; background-color: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.3); transform: translateY(-50%); width: 40%; position: absolute; top: 0; right: 0;}

#apropos-contenu {padding: 40px 60px 100px 60px;}

.img-float {
  float: right;
  height: 100%;
  margin-left: 50px;
    margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 200px) 0 0);
}

.img-float img {width: 200px; height: auto;}



#services {display: flex;}
#img-service {width: 50vw; background:url("../images/services/0.jpg") center center no-repeat; background-size: cover; position: relative;
margin: 0 0 0 -50vw;
left: 50%;}
#liste-services {width: 40%; margin-left: 60%;}
.service-element { background-color: var(--main-color-vert); margin-bottom: 20px; padding: 0 40px;}
.service-element:hover {background-color: #d8ef87;}
.service-element:last-child {margin-bottom: 0;}
#liste-services h3 { padding: 20px 50px 20px 40px; font-size: 22px; position: relative;}
#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: 20px 0;}
#liste-services p {font-size: 18px;}
#liste-services p:last-child {margin-bottom: 0;}

.service-element:nth-child(1) h3:before {background-image: url("../images/icons/services/1.svg");}
.service-element:nth-child(2) h3:before {background-image: url("../images/icons/services/2.svg");}
.service-element:nth-child(3) h3:before {background-image: url("../images/icons/services/3.svg");}
.service-element:nth-child(4) h3:before {background-image: url("../images/icons/services/4.svg");}
.service-element:nth-child(5) h3:before {background-image: url("../images/icons/services/5.svg");}
.service-element:nth-child(6) h3:before {background-image: url("../images/icons/services/6.svg");}
.service-element:nth-child(7) h3:before {background-image: url("../images/icons/services/7.svg");}
.service-element:nth-child(8) h3:before {background-image: url("../images/icons/services/8.svg");}

.service-element img {display: none;}

#zone-partenaires {text-align: center;}
#zone-partenaires h3 {font-weight: 200; letter-spacing: 3px; text-transform: uppercase; font-size: 14px; margin-bottom: 30px;}

#zone-partenaires .logo-element {display: inline-block; padding: 1.5vw; margin-bottom: 0; height: 50px; vertical-align: top;}
#zone-partenaires .logo-element-inner {display: inline-block; height: 100%; opacity: 1;}
#zone-partenaires .logo-element-inner:hover {opacity: 0.5;}
#zone-partenaires a {display: block;}
#zone-partenaires .logo-element-inner img {max-height: 50px; max-width: 160px; vertical-align: middle; width: auto; height: auto; top: 50%; transform: translateY(-50%); position: relative;}

#partenaires-qc {overflow: hidden; width: 40%; margin: 0 auto;}
.partenaires-qc-col {width: 50%; float:  left;}
#zone-partenaires .partenaires-qc-col .logo-element {height: 80px;}
#zone-partenaires .partenaires-qc-col .logo-element-inner img {max-height: 80px;}

#partenaires-qc ul {list-style: none; font-size: 14px; }
#partenaires-qc ul li:before {display: none; }
#partenaires-qc ul a {color: #373737; margin-bottom: 10px;}



/* Marges bas blocs */

#coordonnees, #zone-partenaires {padding: 4vw 0;}
#services {padding-bottom: 4vw;}




/* Transitions standard */

a, .service-element, #zone-partenaires .logo-element-inner {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;}