/* COULEURS */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.text-center {
  text-align: center !important;
}

.text-violet {
  color: #8c237f !important;
}

.site {
  position: relative;
  margin: auto;
  font-family: Montserrat, sans-serif;
}
@media screen and (min-width: 800px) {
  .site {
    max-width: 800px;
  }
}
@media screen and (min-width: 1200px) {
  .site {
    max-width: 1200px;
  }
}
.site .cc-grower {
  z-index: 2;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.site .cc-grower .cc-window {
  width: 100%;
  max-width: none;
  flex-direction: row;
  justify-content: space-between;
}
.site .cc-grower .cc-window .cc-message {
  font-size: 12px;
  line-height: 100%;
  margin: 0;
  padding: 10px;
}
.site .cc-grower .cc-window .cc-compliance {
  flex: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
.site .cc-grower .cc-window .cc-compliance a {
  flex: 0;
  padding: 0 10px;
  font-size: 24px;
  line-height: 24px;
  font-weight: normal;
}
.site .menufix {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.8s;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #ffffff;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  z-index: 10;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.site .menufix.cookieOK {
  position: fixed !important;
  top: 0 !important;
}
@media screen and (min-width: 800px) {
  .site .menufix {
    display: flex;
  }
  .site .menufix.fixed {
    position: fixed;
    top: 0;
    left: 50%;
    margin: 0;
    transform: translateX(-400px);
  }
}
@media screen and (min-width: 1200px) {
  .site .menufix {
    max-width: 1200px;
  }
  .site .menufix.fixed {
    transform: translateX(-600px);
  }
}
.site .menufix .logo {
  margin: 0;
  padding: 5px 15px;
}
.site .menufix .contact {
  color: white;
  background-color: #2e6756;
  text-decoration: none;
  padding: 20px;
  /*@media screen and (min-width: 800px) {
    transform: translateX(190px);
  }
  @media screen and (min-width: 1200px) {
    transform: translateX(370px);
  }*/
}
.site .menufix .num {
  display: none;
  margin: 0;
  padding: 5px 15px;
}
@media screen and (min-width: 800px) {
  .site .top {
    margin-top: 57px;
  }
}
.site header {
  position: relative;
}
.site header .slider {
  margin: 0;
}
.site header .slider .slick-prev, .site header .slider .slick-next {
  width: 27px;
  height: auto;
  z-index: 1;
}
.site header .slider .slick-prev img, .site header .slider .slick-next img {
  display: block;
  width: 100%;
  height: auto;
}
.site header .slider .slick-prev::before, .site header .slider .slick-next::before {
  display: none;
}
.site header .slider .slick-prev {
  left: 2%;
}
.site header .slider .slick-next {
  right: 2%;
}
.site header .slider .slick-dots {
  bottom: 10px;
}
@media screen and (min-width: 480px) {
  .site header .slider .slick-dots {
    bottom: 12px;
  }
}
@media screen and (min-width: 600px) {
  .site header .slider .slick-dots {
    bottom: 16px;
  }
}
.site header .slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0 8px;
}
.site header .slider .slick-dots li button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: solid 2px #ffffff;
  background: #ffffff;
  border-radius: 50%;
}
.site header .slider .slick-dots li button::before {
  display: none;
}
.site header .slider .slick-dots li.slick-active button {
  background: #363635;
}
.site header .slider .slick-dots li:hover button {
  background: #0f9bd8;
}
.site header .slider .slide {
  display: block !important;
}
.site header .slider .slide sup {
  font-size: 8px;
  position: relative;
  top: -4px;
  overflow: visible;
  height: 0;
  width: 0;
  display: inline-block;
}
.site header .slider .slide img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1200px) {
  .site header .slider .slide img#img1 {
    background: url("../img/visu_pers_d_1-min.jpg") no-repeat center/contain;
  }
}
@media screen and (min-width: 1200px) {
  .site header .slider .slide img#img2 {
    background: url("../img/visu_pers_d_2-min.jpg") no-repeat center/contain;
  }
}
@media screen and (min-width: 1200px) {
  .site header .slider .slide img#img3 {
    background: url("../img/visu_pers_d_3-min.jpg") no-repeat center/contain;
  }
}
@media screen and (min-width: 1200px) {
  .site header .slider .slide img#img4 {
    background: url("../img/visu_pers_d_4-min.jpg") no-repeat center/contain;
  }
}
@media screen and (min-width: 1200px) {
  .site header .slider .slide img#img5 {
    background: url("../img/visu_pers_d_5-min.jpg") no-repeat center/contain;
  }
}
@media screen and (min-width: 800px) {
  .site header .slider .slide img {
    float: left;
    width: 598px;
    height: 570px;
  }
}
@media screen and (min-width: 1200px) {
  .site header .slider .slide img {
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 962px;
    /* Width of new image */
    height: 570px;
    /* Height of new image */
    padding-left: 962px;
    /* Equal to width of new image */
  }
}
.site header .logo {
  position: absolute;
  top: 30px;
  left: 26%;
  transform: translateX(-50%);
  width: 43%;
}
@media screen and (min-width: 800px) {
  .site header .logo {
    top: 14px;
    left: 40px;
    transform: none;
    width: 226px;
  }
}
.site header .logo > div {
  position: relative;
  width: 227px;
  padding-top: 53.59%;
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: -webkit-optimize-contrast;
  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* IE (non-standard property) */
  background: url("../img/logo_lavallee_m.png") no-repeat center/contain;
}
@media screen and (min-width: 800px) {
  .site header .logo > div {
    padding-top: 0;
    background: url("../img/logo_lavallee_d.png") no-repeat center/contain;
    width: 227px;
    height: 102px;
  }
}
.site header .travaux {
  position: absolute;
  top: 210px;
  left: 50%;
  transform: translateX(-50%);
  width: 36.74%;
}
@media screen and (min-width: 800px) {
  .site header .travaux {
    top: 14px;
    left: 60%;
    transform: none;
    width: 226px;
  }
}
.site header .travaux > div {
  position: relative;
  width: 100%;
  padding-top: 53.59%;
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: -webkit-optimize-contrast;
  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* IE (non-standard property) */
  background: url("../img/icon_travaux.png") no-repeat center/contain;
}
@media screen and (min-width: 800px) {
  .site header .travaux > div {
    padding-top: 0;
    background: url("../img/icon_travaux.png") no-repeat center/contain;
    width: 57px;
    height: 78px;
    left: 0px;
  }
}
@media screen and (min-width: 1200px) {
  .site header .travaux > div {
    padding-top: 0;
    background: url("../img/icon_travaux.png") no-repeat center/contain;
    width: 237px;
    height: 124px;
    left: 124px;
  }
}
.site header .pinel {
  position: absolute;
  top: 40px;
  left: 83%;
  transform: translateX(-50%);
  width: 42%;
}
@media screen and (min-width: 800px) {
  .site header .pinel {
    position: absolute;
    top: 20px;
    right: auto;
    left: 85%;
    transform: translateX(-50%);
    width: 22.74%;
  }
}
@media screen and (min-width: 1200px) {
  .site header .pinel {
    top: auto;
    left: auto;
    transform: none;
    width: 226px;
    right: 15px;
    bottom: 50px;
  }
}
.site header .pinel > div {
  position: relative;
  width: 119px;
  padding-top: 53.59%;
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: -webkit-optimize-contrast;
  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* IE (non-standard property) */
  background: url("../img/ptz-pinel_slick.png") no-repeat center/contain;
}
@media screen and (min-width: 800px) {
  .site header .pinel > div {
    padding-top: 0;
    background: url("../img/ptz-pinel_slick.png") no-repeat center/contain;
    width: 97px;
    height: 100px;
  }
}
@media screen and (min-width: 1200px) {
  .site header .pinel > div {
    padding-top: 0;
    background: url("../img/ptz-pinel_slick.png") no-repeat center/contain;
    width: 227px;
    height: 100px;
  }
}
.site header .legende {
  position: absolute;
  bottom: 38%;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.4);
  color: #000000;
  font-size: 12px;
}
@media screen and (min-width: 600px) {
  .site header .legende {
    bottom: 0px;
    font-size: 13px;
  }
}
@media screen and (min-width: 800px) {
  .site header .legende {
    bottom: 0px;
  }
}
@media screen and (min-width: 1200px) {
  .site header .legende {
    bottom: 20px;
    margin-left: 20px;
  }
}
.site header .titre {
  text-align: center;
  background: #8c237f;
  padding: 20px 10px 40px 10px;
  color: #ffffff;
}
.site header .titre.promo-left {
  background: #00ff00;
  width: 240px;
  color: #2e6756;
  height: 90px;
  margin: 0 auto;
}
.site header .titre.promo-left:before {
  border-color: transparent #00ff00 transparent transparent;
  border-width: 0 40px 99px 0;
  left: -39px;
}
.site header .titre.promo-left:after {
  border-color: transparent transparent transparent #00ff00;
  border-width: 100px 0 0 40px;
  right: -39px;
}
.site header .titre.promo-left .chiffre {
  float: left;
  width: 20%;
  font-weight: 600;
  font-size: 52px;
}
.site header .titre.promo-left .texte {
  float: left;
  width: 100%;
  font-weight: 400;
  text-align: center;
  font-size: 18px;
  padding-top: 5px;
  color: #2e6756;
}
.site header .titre.promo-left .texte .chiffre_mobile {
  display: none;
}
.site header .titre.promo-left .texte .show_mobile {
  display: none;
}
.site header .titre.promo-left .texte span {
  position: relative;
  top: -5px;
  color: #2e6756;
  font-size: 14px;
}
.site header .titre.promo-left .texte span strong {
  font-size: 23px;
  font-weight: 800;
}
@media screen and (max-width: 599px) {
  .site header .titre.promo-left {
    width: 100%;
    padding: 10px 0 0 0;
    color: #2e6756;
    height: 80px;
    background: #00ff00;
  }
  .site header .titre.promo-left .chiffre {
    display: none;
  }
  .site header .titre.promo-left .texte {
    font-size: 16px;
  }
  .site header .titre.promo-left .texte .chiffre_mobile {
    display: inline;
    font-weight: bold;
  }
  .site header .titre.promo-left .texte .show_mobile {
    display: block;
  }
  .site header .titre.promo-left .texte span {
    top: -2px;
    color: #2e6756;
    font-size: 17px;
  }
}
@media screen and (min-width: 600px) {
  .site header .titre.promo-left {
    transform: translate(23%, -50%);
    width: 200px;
  }
  .site header .titre.promo-left .texte {
    font-size: 80%;
  }
  .site header .titre.promo-left .texte span {
    top: 0;
  }
}
@media screen and (min-width: 1200px) {
  .site header .titre.promo-left {
    transform: translate(36%, -37%);
    width: 255px;
  }
  .site header .titre.promo-left .texte {
    font-size: 100%;
  }
}
.site header .titre.promo-right {
  width: 240px;
  background: #2e6756;
  font-weight: 600;
  height: 90px;
}
.site header .titre.promo-right:before {
  border-width: 0 40px 99px 0;
}
.site header .titre.promo-right:after {
  border-width: 100px 0 0 40px;
}
.site header .titre.promo-right .right {
  padding-top: 5px;
}
.site header .titre.promo-right .right .notaire, .site header .titre.promo-right .right .remise {
  width: 45%;
  float: left;
  font-size: 11px;
}
.site header .titre.promo-right .right .notaire span, .site header .titre.promo-right .right .remise span {
  font-size: 17px;
}
.site header .titre.promo-right .right .texte span {
  font-size: 19px;
  font-weight: 700;
  color: #00ff00;
}
.site header .titre.promo-right .right .notaire {
  line-height: 15px;
}
.site header .titre.promo-right .right .plus {
  position: relative;
  width: 10%;
  text-align: center;
  float: left;
  top: 5px;
  left: 2px;
  font-size: 30px;
  height: 45px;
}
.site header .titre.promo-right .right .date {
  font-size: 10px;
  text-align: center;
  clear: both;
  width: 100%;
}
@media screen and (max-width: 599px) {
  .site header .titre.promo-right {
    width: 100%;
    padding: 0;
    height: 100px;
  }
  .site header .titre.promo-right .right {
    width: 80%;
    margin-left: 14px;
    position: relative;
    top: 0%;
    padding-top: 10px;
    margin: auto;
  }
  .site header .titre.promo-right .right .date {
    padding-left: 7px;
  }
}
@media screen and (min-width: 600px) {
  .site header .titre.promo-right {
    transform: translate(138%, -50%);
    width: 200px;
  }
  .site header .titre.promo-right .texte {
    font-size: 79%;
  }
}
@media screen and (min-width: 1200px) {
  .site header .titre.promo-right {
    transform: translate(150%, -37%);
    width: 255px;
  }
  .site header .titre.promo-right .texte {
    font-size: 100%;
  }
}
.site header .titre.promo {
  font-weight: 600;
  height: 61px;
}
.site header .titre.promo::after {
  content: "";
  clear: both;
  display: table;
}
.site header .titre.promo .right, .site header .titre.promo .left {
  width: 48%;
  float: left;
  padding-top: 5px;
}
.site header .titre.promo .right span, .site header .titre.promo .left span {
  font-size: 21px;
}
.site header .titre.promo .right .notaire, .site header .titre.promo .right .remise, .site header .titre.promo .left .notaire, .site header .titre.promo .left .remise {
  width: 45%;
  float: left;
  font-size: 11px;
}
.site header .titre.promo .right .notaire span, .site header .titre.promo .right .remise span, .site header .titre.promo .left .notaire span, .site header .titre.promo .left .remise span {
  font-size: 17px;
}
.site header .titre.promo .right .notaire, .site header .titre.promo .left .notaire {
  line-height: 15px;
}
.site header .titre.promo .right .plus, .site header .titre.promo .left .plus {
  position: relative;
  width: 10%;
  text-align: center;
  float: left;
  top: 5px;
  left: -5px;
  font-size: 30px;
  height: 45px;
}
.site header .titre.promo .separateur {
  position: relative;
  top: 12px;
  width: 2px;
  margin: 0 2px;
  height: 35px;
  float: left;
  background-color: white;
}
.site header .titre.promo .left {
  line-height: 24px;
}
@media screen and (min-width: 600px) {
  .site header .titre {
    position: absolute;
    bottom: 2%;
    padding: 10px 0 0 0;
    width: 320px;
    height: 70px;
  }
  .site header .titre::before {
    display: block;
    position: absolute;
    top: 0;
    left: -39px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 80px 0;
    border-color: transparent #2e6756 transparent transparent;
    line-height: 0;
    _border-color: #000000 #2e6756 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color="#000000");
    -webkit-transform: rotate(360deg);
  }
  .site header .titre::after {
    display: block;
    position: absolute;
    top: 0;
    right: -39px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 80px 0 0 40px;
    border-color: transparent transparent transparent #2e6756;
    line-height: 0;
    _border-color: #000000 #000000 #000000 #2e6756;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color="#000000");
    -webkit-transform: rotate(360deg);
  }
}
@media screen and (min-width: 800px) {
  .site header .titre {
    transform: translate(30%, -50%);
  }
  .site header .titre.promo {
    height: 71px;
  }
}
@media screen and (min-width: 1200px) {
  .site header .titre {
    transform: translate(90%, -50%);
  }
}
.site header .titre h2 {
  margin: 0;
  font-size: 19px;
  line-height: 100%;
  text-transform: uppercase;
}
@media screen and (min-width: 600px) {
  .site header .titre h2 {
    font-size: 18px;
  }
}
.site header .titre p {
  margin: 0;
  padding: 10px 0 0 0;
  font-size: 12px;
}
@media screen and (min-width: 600px) {
  .site header .titre p {
    padding: 5px 0 0 0;
  }
}
@media screen and (min-width: 800px) {
  .site header {
    float: left;
    width: 525px;
    height: 570px;
  }
}
@media screen and (min-width: 1200px) {
  .site header {
    float: left;
    width: 900px;
    height: 570px;
  }
}
.site .formulaire {
  background: #2e6756;
  color: #ffffff;
}
.site .formulaire .titre h1 {
  margin: 0;
  padding: 10px;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 300;
  background-color: #8c237f;
}
.site .formulaire .titre h1 strong {
  font-weight: 700;
}
.site .formulaire .titre h2 {
  margin: 0;
  padding: 10px;
  font-size: 17px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 300;
  background-color: #beb7ad;
}
.site .formulaire .titre h2 strong {
  font-weight: 700;
}
.site .formulaire .titre h2 span {
  font-size: 16px;
}
.site .formulaire .titre p {
  font-size: 15px;
  line-height: 100%;
  color: #00ff00;
  font-weight: 600;
  margin: 10px 0 0 0;
  padding: 0;
}
.site .formulaire .titre p strong {
  font-weight: 800;
}
.site .formulaire form {
  margin: 0;
  padding: 5px 10px;
}
@media screen and (min-width: 1200px) {
  .site .formulaire form {
    padding: 5px 20px;
  }
}
.site .formulaire form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.site .formulaire form fieldset.envoi .error-container {
  height: 16px;
}
.site .formulaire form fieldset.envoi .error-container label {
  margin-bottom: 5px;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 100%;
  color: crimson;
}
.site .formulaire form fieldset.champs {
  margin-top: 10px;
}
.site .formulaire form fieldset.champs .error-container {
  height: 14px;
}
.site .formulaire form fieldset.champs .error-container label {
  margin-bottom: 5px;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 100%;
  color: crimson;
}
.site .formulaire form fieldset.champs p {
  margin: 0;
  padding: 3px 0;
  font-size: 8px;
  /* Customize the radio label (the container) */
  /* Customize the checkbox label (the container) */
}
.site .formulaire form fieldset.champs p label {
  text-transform: uppercase;
  font-weight: 600;
}
.site .formulaire form fieldset.champs p label span {
  display: none;
}
.site .formulaire form fieldset.champs p label input {
  font-size: 10px;
  font-weight: 600;
  display: block;
  width: 100%;
  background: transparent;
  padding: 2px 0;
  border-top: none;
  border-right: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  border-left: none;
}
.site .formulaire form fieldset.champs p label input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.site .formulaire form fieldset.champs p label input::-moz-placeholder {
  /* Firefox 19+ */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.site .formulaire form fieldset.champs p label input:-ms-input-placeholder {
  /* IE 10+ */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.site .formulaire form fieldset.champs p label input:-moz-placeholder {
  /* Firefox 18- */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.site .formulaire form fieldset.champs p.radio_container > span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.site .formulaire form fieldset.champs p.radio_container label {
  display: inline-block;
  position: relative;
  padding: 2px 0 0 20px;
  margin: 0 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create a custom checkbox */
  /* Hide the browser's default checkbox */
  /* On mouse-over */
}
.site .formulaire form fieldset.champs p.radio_container label span {
  display: inline;
  font-size: 10px;
}
.site .formulaire form fieldset.champs p.radio_container label .checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background: transparent;
  border: solid 1px #ffffff;
  /* Create the checkmark/indicator */
}
.site .formulaire form fieldset.champs p.radio_container label .checkmark:after {
  display: block;
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  background: transparent;
}
.site .formulaire form fieldset.champs p.radio_container label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.site .formulaire form fieldset.champs p.radio_container label input:checked ~ .checkmark:after {
  background: #ffffff;
}
.site .formulaire form fieldset.champs p.radio_container label:hover input ~ .checkmark {
  border: solid 1px #ffffff;
}
.site .formulaire form fieldset.champs p.radio_container label:hover input ~ .checkmark:after {
  background: #ffffff;
}
.site .formulaire form fieldset.champs p.checkbox_container label {
  display: block;
  position: relative;
  padding: 2px 0 0 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create a custom checkbox */
  /* Hide the browser's default checkbox */
  /* On mouse-over */
}
.site .formulaire form fieldset.champs p.checkbox_container label .checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background: transparent;
  border: solid 1px #ffffff;
  /* Create the checkmark/indicator */
}
.site .formulaire form fieldset.champs p.checkbox_container label .checkmark:after {
  display: block;
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  background: transparent;
}
.site .formulaire form fieldset.champs p.checkbox_container label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.site .formulaire form fieldset.champs p.checkbox_container label input:checked ~ .checkmark:after {
  background: #ffffff;
}
.site .formulaire form fieldset.champs p.checkbox_container label:hover input ~ .checkmark {
  border: solid 1px #ffffff;
}
.site .formulaire form fieldset.champs p.checkbox_container label:hover input ~ .checkmark:after {
  background: #ffffff;
}
.site .formulaire form fieldset.envoi {
  text-align: center;
}
.site .formulaire form fieldset.envoi p {
  margin: 0;
  padding: 2px 0;
}
.site .formulaire form fieldset.envoi p input[type=submit] {
  cursor: pointer;
  background: transparent;
  border: solid 1px #ffffff;
  border-radius: 20px;
  padding: 5px 20px;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}
.site .formulaire form fieldset.envoi p input[type=submit]:hover {
  background: #ffffff;
  color: #0f9bd8;
}
.site .formulaire form fieldset.envoi p.mention {
  font-size: 8px;
  font-weight: 600;
}
@media screen and (min-width: 800px) {
  .site .formulaire {
    float: right;
    width: 275px;
    height: 570px;
  }
}
@media screen and (min-width: 1200px) {
  .site .formulaire {
    float: right;
    width: 300px;
    height: 570px;
  }
}
.site .carte {
  border-top: solid 8px #0f9bd8;
}
.site .carte img {
  display: block;
  width: 100%;
  height: auto;
}
.site .titre_distance {
  background-color: #2e6756;
  color: white;
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.site .titre_distance img {
  margin: 0 40px;
  max-width: 50px;
}
.site .titre_distance div {
  padding: 0 20px;
  text-align: left;
}
.site .titre_distance div h3 {
  margin-bottom: 0;
  font-size: 20px;
}
.site .titre_distance div p {
  font-size: 18px;
}
@media screen and (min-width: 800px) {
  .site .titre_distance {
    font-size: 30px;
    padding: 0;
  }
  .site .titre_distance img {
    margin: 0 40px;
    max-width: 60px;
  }
}
@media screen and (min-width: 1200px) {
  .site .titre_distance img {
    margin: 30px 100px;
    max-width: 90px;
  }
}
.site .titre_offre {
  background-color: black;
  color: white;
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.site .titre_offre h4 {
  padding: 0 20px;
  color: #00ff00;
  font-size: 18px;
}
.site .titre_lancement {
  background-color: #0f9bd8;
  color: white;
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.site .titre_lancement img {
  margin: 0 10px;
}
@media screen and (min-width: 800px) {
  .site .titre_lancement {
    font-size: 30px;
    padding: 0;
  }
}
.site .infos_lancement {
  background: #0f9bd8;
  color: #ffffff;
}
.site .infos_lancement img {
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  .site .infos_lancement img {
    position: absolute;
    left: 0;
  }
}
.site .infos_lancement .legende {
  position: relative;
  display: inline-block;
  left: 1%;
  top: -40px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.4);
  color: #000000;
  font-size: 14px;
}
@media screen and (min-width: 1200px) {
  .site .infos_lancement .legende {
    top: 470px;
    float: left;
    left: 30%;
  }
}
.site .infos_lancement .block_offre {
  padding: 0 0 20px 0;
}
.site .infos_lancement .block_offre:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 800px) {
  .site .infos_lancement .block_offre {
    padding: 0 40px 20px 40px;
  }
}
@media screen and (min-width: 1200px) {
  .site .infos_lancement .block_offre {
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    height: 468px;
    position: relative;
    width: 25%;
  }
}
.site .infos_lancement .offre_special {
  width: 235px;
  margin: 0 auto;
}
.site .infos_lancement .offre_special:after {
  content: "";
  display: table;
  clear: both;
}
.site .infos_lancement .offre_special h3 {
  text-align: center;
  font-size: 26px;
  margin: 0;
  line-height: 29px;
}
.site .infos_lancement .offre_special h3 span {
  font-size: 35px;
}
.site .infos_lancement .offre_special hr {
  border: 2px solid white;
}
.site .infos_lancement .offre_special .notaire {
  width: 45%;
  font-size: 19px;
  line-height: 23px;
  display: block;
  float: left;
}
.site .infos_lancement .offre_special .plus {
  text-align: left;
  width: 10%;
  display: block;
  float: left;
  top: 5%;
  position: relative;
  font-size: 33px;
  left: -5px;
  font-weight: 700;
}
.site .infos_lancement .offre_special .remise {
  width: 45%;
  display: block;
  float: left;
  font-size: 18px;
}
.site .infos_lancement .offre_special .remise span {
  font-size: 25px;
}
.site .infos_lancement .offre_special .remise sup {
  font-size: 40%;
  top: -12px;
  left: 5px;
}
@media screen and (min-width: 800px) {
  .site .infos_lancement .offre_special {
    width: 300px;
    float: left;
    padding: 0 30px;
  }
  .site .infos_lancement .offre_special h3 {
    font-size: 33px;
    line-height: 35px;
  }
  .site .infos_lancement .offre_special h3 span {
    font-size: 44px;
  }
  .site .infos_lancement .offre_special sup {
    font-size: 9px;
    top: -10px;
  }
  .site .infos_lancement .offre_special .notaire {
    font-size: 25px;
    line-height: 30px;
  }
  .site .infos_lancement .offre_special .plus {
    font-size: 33px;
    left: -5px;
  }
  .site .infos_lancement .offre_special .remise {
    font-size: 23px;
  }
  .site .infos_lancement .offre_special .remise span {
    font-size: 33px;
  }
}
@media screen and (min-width: 1200px) {
  .site .infos_lancement .offre_special {
    padding: 0;
  }
}
.site .infos_lancement .offre_appart {
  margin: 0 auto;
  text-align: left;
}
.site .infos_lancement .offre_appart:after {
  content: "";
  display: table;
  clear: both;
}
.site .infos_lancement .offre_appart h3 {
  font-size: 24px;
  text-align: center;
  font-weight: 100;
  margin: 0;
}
.site .infos_lancement .offre_appart h3 span {
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 10px;
}
.site .infos_lancement .offre_appart p {
  text-align: center;
  margin: 0;
  font-size: 18px;
  font-weight: 100;
}
.site .infos_lancement .offre_appart p span {
  font-size: 28px;
  font-weight: 600;
}
.site .infos_lancement .offre_appart sup {
  font-size: 9px;
  top: -12px;
  left: 5px;
}
@media screen and (min-width: 800px) {
  .site .infos_lancement .offre_appart {
    margin: 0 30px;
  }
  .site .infos_lancement .offre_appart h3 {
    font-size: 31px;
  }
  .site .infos_lancement .offre_appart h3 span {
    font-size: 23px;
    margin-bottom: 10px;
  }
  .site .infos_lancement .offre_appart p {
    font-size: 18px;
  }
  .site .infos_lancement .offre_appart p span {
    font-size: 37px;
  }
}
@media screen and (min-width: 1200px) {
  .site .infos_lancement .offre_appart {
    margin: 0;
  }
  .site .infos_lancement .offre_appart h3 {
    margin: 100px 0 20px 0;
  }
}
.site .infos_lancement .cta_lancement {
  text-align: center;
  margin: 10px 0;
}
.site .infos_lancement .cta_lancement a.btn_lancement {
  background-color: white;
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid white;
  color: #0f9bd8;
  font-size: 22px;
  font-weight: 700;
  padding: 12px 55px 12px 55px;
  transition: all ease 0.3s;
}
.site .infos_lancement .cta_lancement a.btn_lancement:hover {
  border-color: #0f9bd8;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}
@media screen and (min-width: 1200px) {
  .site .infos_lancement .cta_lancement {
    padding: 30px 0;
  }
}
.site .titre_residences {
  background-color: #8c237f;
  color: white;
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.site .titre_residences img {
  margin: 0 10px;
}
@media screen and (min-width: 800px) {
  .site .titre_residences {
    font-size: 30px;
    padding: 0;
  }
}
.site .infos_residences {
  background: #8c237f;
  color: #ffffff;
}
.site .infos_residences img {
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  .site .infos_residences img {
    position: absolute;
    max-width: 860px;
    margin-left: 340px;
  }
}
.site .infos_residences .block_offre {
  padding: 0 0 20px 0;
}
.site .infos_residences .block_offre:after {
  content: "";
  display: table;
  clear: both;
}
.site .infos_residences .block_offre h3 {
  text-align: center;
  font-size: 20px;
  color: white;
  font-weight: 600;
}
.site .infos_residences .block_offre h3 .hide {
  display: none;
}
@media screen and (min-width: 800px) {
  .site .infos_residences .block_offre {
    padding: 0px 40px 20px 40px;
  }
  .site .infos_residences .block_offre h3 {
    font-size: 28px;
  }
}
@media screen and (min-width: 1200px) {
  .site .infos_residences .block_offre {
    padding: 20px 0;
    background-color: #ccc5bb;
    padding: 20px;
    height: 431px;
    position: relative;
    width: 25%;
  }
  .site .infos_residences .block_offre h3 {
    margin: 60px 0 20px 0;
    font-size: 30px;
    line-height: 34px;
    color: #8c237f;
  }
  .site .infos_residences .block_offre h3 .hide {
    display: block;
  }
}
.site .infos_residences .cta_residences {
  text-align: center;
  margin: 10px 0;
}
.site .infos_residences .cta_residences a.btn_residences {
  background-color: white;
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid white;
  color: #8c237f;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 55px 12px 55px;
  transition: all ease 0.3s;
}
.site .infos_residences .cta_residences a.btn_residences:hover {
  border-color: #8c237f;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 1200px) {
  .site .infos_residences .cta_residences {
    padding: 30px 0;
  }
}
.site .titre_ecoquartier {
  background-color: #cdd327;
  color: white;
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.site .titre_ecoquartier img {
  margin: 0 10px;
}
@media screen and (min-width: 800px) {
  .site .titre_ecoquartier {
    font-size: 30px;
    padding: 0;
  }
}
.site .infos_ecoquartier {
  background: #cdd327;
  color: #ffffff;
}
.site .infos_ecoquartier img {
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  .site .infos_ecoquartier img {
    position: absolute;
    left: 0;
  }
}
.site .infos_ecoquartier .legende {
  position: relative;
  display: inline-block;
  left: 1%;
  top: -40px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.4);
  color: #000000;
  font-size: 14px;
}
@media screen and (min-width: 1200px) {
  .site .infos_ecoquartier .legende {
    top: 560px;
    float: left;
    left: 30%;
  }
}
.site .infos_ecoquartier .block_offre {
  padding: 0 0 20px 0;
}
.site .infos_ecoquartier .block_offre:after {
  content: "";
  display: table;
  clear: both;
}
.site .infos_ecoquartier .block_offre h3 {
  text-align: center;
  font-size: 23px;
  color: white;
  font-weight: 600;
  margin: 0;
}
@media screen and (min-width: 800px) {
  .site .infos_ecoquartier .block_offre {
    padding: 0px 40px 20px 40px;
  }
  .site .infos_ecoquartier .block_offre h3 {
    font-size: 28px;
    margin: 0 0 20px 0;
  }
}
@media screen and (min-width: 1200px) {
  .site .infos_ecoquartier .block_offre {
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    height: 565px;
    position: relative;
    width: 25%;
  }
  .site .infos_ecoquartier .block_offre h3 {
    margin: 200px 0 70px 0;
    font-size: 30px;
    line-height: 34px;
  }
}
.site .infos_ecoquartier .cta_ecoquartier {
  text-align: center;
  margin: 10px 0;
}
.site .infos_ecoquartier .cta_ecoquartier a.btn_ecoquartier {
  background-color: white;
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid white;
  color: #cdd327;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 55px 12px 55px;
  transition: all ease 0.3s;
}
.site .infos_ecoquartier .cta_ecoquartier a.btn_ecoquartier:hover {
  border-color: #cdd327;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 1200px) {
  .site .infos_ecoquartier .cta_ecoquartier {
    padding: 30px 0;
  }
}
.site footer {
  text-align: center;
}
.site footer .numero {
  display: none;
  margin: 10px 0;
}
.site footer .numero a {
  font-size: 24px;
  font-weight: 700;
  color: #0f9bd8;
  text-decoration: none;
}
@media screen and (min-width: 800px) {
  .site footer .numero a {
    font-size: 36px;
  }
}
@media screen and (min-width: 1200px) {
  .site footer .numero a {
    font-size: 42px;
  }
}
.site footer .logos {
  margin: 20px 0;
  padding: 0;
}
.site footer .logos li {
  display: inline-block;
  margin: 0 10px;
  padding: 0;
}
.site footer .mentions {
  margin: 10px;
  font-size: 10px;
}
.site footer .mentions a {
  font-size: 11px;
  font-weight: 600;
  color: #0f9bd8;
  text-transform: uppercase;
}

.btn_scroll {
  position: fixed;
  bottom: -50px;
  left: 0;
  background: #6ec2b2;
  padding: 10px;
  width: 100%;
  transition: bottom 300ms ease 0s;
}
.btn_scroll.visible {
  bottom: 0;
}
@media screen and (min-width: 800px) {
  .btn_scroll {
    display: none;
  }
}
.btn_scroll a {
  display: block;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.btn_contact {
  position: fixed;
  bottom: -50px;
  left: 0;
  background: #0f9bd8;
  padding: 10px 0;
  width: 100%;
  transition: bottom 300ms ease 0s;
  z-index: 9;
}
.btn_contact.visible {
  bottom: 0;
}
@media screen and (min-width: 800px) {
  .btn_contact {
    display: none;
  }
}
.btn_contact a {
  display: block;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.iziModal .iziModal-content {
  position: relative;
  margin-bottom: 40px;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
}
.iziModal .iziModal-content .btn_close {
  position: absolute;
  display: block;
  top: 5px;
  right: 5px;
  background: none;
  border: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  font-size: 24px;
  line-height: 24px;
  cursor: pointer;
  outline: none;
}
.iziModal .iziModal-content h2 {
  margin: 0;
  padding: 40px 20px 20px 20px;
  font-size: 18px;
}
.iziModal .iziModal-content h3 {
  margin: 0;
  padding: 20px 20px 10px 20px;
  font-size: 14px;
}
.iziModal .iziModal-content h4 {
  margin: 0;
  padding: 15px 20px 5px 20px;
  font-size: 13px;
}
.iziModal .iziModal-content h5 {
  margin: 0;
  padding: 10px 20px 0 20px;
  font-size: 11px;
}
.iziModal .iziModal-content h6 {
  margin: 0;
  padding: 5px 20px 0 20px;
  font-size: 10px;
}
.iziModal .iziModal-content p {
  margin: 0;
  padding: 5px 20px 0 20px;
}
.iziModal .iziModal-content a {
  white-space: nowrap;
}

/**
 *
 * ajout V2
 *
 */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 70px;
  margin: auto;
  position: relative;
  background-color: #beb7ad;
  z-index: 7;
}
@media screen and (max-width: 420px) {
  .menu {
    height: 110px;
  }
}
.menu li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 420px) {
  .menu li {
    width: 50%;
    height: 50%;
  }
}
.menu a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 11px;
  z-index: 9;
  opacity: 0.2;
  transition: all ease-in 0.3s;
}
.menu a strong {
  padding-top: 40px;
}
.menu a .icon_lancement, .menu a .icon_residence, .menu a .icon_quartier, .menu a .icon_services {
  position: absolute;
  top: 8px;
}
.menu a .icon_lancement img, .menu a .icon_residence img, .menu a .icon_quartier img, .menu a .icon_services img {
  max-width: 30px;
  height: auto;
}
@media screen and (min-width: 800px) {
  .menu a {
    font-size: 16px;
    margin-top: 0;
  }
  .menu a strong {
    padding-top: 0px;
  }
  .menu a .icon_lancement, .menu a .icon_residence, .menu a .icon_quartier, .menu a .icon_services {
    position: relative;
    top: 0;
  }
  .menu a .icon_lancement img, .menu a .icon_residence img, .menu a .icon_quartier img, .menu a .icon_services img {
    max-width: 70%;
    height: auto;
    margin-left: 10px;
  }
}
@media screen and (max-width: 420px) {
  .menu a {
    font-size: 9px;
    text-align: center;
  }
  .menu a strong {
    padding-top: 35px;
  }
  .menu a .icon_lancement, .menu a .icon_services {
    top: 8px;
    text-align: center;
  }
  .menu a .icon_lancement img, .menu a .icon_services img {
    max-width: 50%;
    height: auto;
  }
  .menu a .icon_quartier {
    top: 5px;
  }
}
.menu a.active_menu {
  background-color: #ccc5bb;
  pointer-events: none;
  opacity: 1;
}
.menu li {
  transition: left 0.4s, background-color 0.4s;
}
.menu li:hover, .menu li:focus, .menu li:active {
  background-color: #ccc5bb;
}
.menu li:hover a, .menu li:focus a, .menu li:active a {
  opacity: 1;
}

.home .menu a {
  opacity: 1;
}

/*======================================
=            page lancement            =
======================================*/
.site.page_sup header.header {
  width: 100%;
  height: auto;
}
.site.page_sup header.header img {
  display: block;
  width: 100%;
  height: auto;
}
.site.page_sup header.header .legende {
  bottom: 0;
}
@media screen and (min-width: 800px) {
  .site.page_sup header.header {
    height: 359px;
    overflow: hidden;
  }
  .site.page_sup header.header img {
    width: 100%;
    display: block;
  }
  .site.page_sup header.header .legende {
    bottom: 20px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .site.page_sup header.header {
    height: 538px;
  }
  .site.page_sup header.header img {
    width: 100%;
  }
}
.site.page_sup .lancement_event {
  background-color: #0f9bd8;
  padding: 10px 20px;
  text-align: center;
}
.site.page_sup .lancement_event h1 {
  color: white;
  font-weight: 100;
  margin: 0;
  padding-top: 15px;
  font-size: 20px;
  letter-spacing: 0.4px;
}
.site.page_sup .lancement_event h1 span {
  font-weight: 700;
}
.site.page_sup .lancement_event h3 {
  margin: 10px 0;
  color: white;
  font-weight: 600;
}
.site.page_sup .lancement_event p {
  color: white;
}
@media screen and (min-width: 800px) {
  .site.page_sup .lancement_event {
    width: 760px;
  }
}
@media screen and (min-width: 1200px) {
  .site.page_sup .lancement_event {
    float: left;
    width: 749px;
    padding-top: 5px;
    height: 201px;
  }
}
.site.page_sup .offre_speciale {
  background-color: #8c237f;
  color: white;
  padding: 20px 80px;
  height: 160px;
}
@media screen and (max-width: 768px) {
  .site.page_sup .offre_speciale {
    padding: 20px;
  }
}
.site.page_sup .offre_speciale .container {
  position: relative;
  width: 253px;
  margin: 0 auto;
}
.site.page_sup .offre_speciale h3 {
  text-align: center;
  font-size: 28px;
  margin: 0;
  line-height: 29px;
}
.site.page_sup .offre_speciale h3 span {
  font-size: 38px;
}
.site.page_sup .offre_speciale hr {
  border: 2px solid white;
}
.site.page_sup .offre_speciale .notaire {
  width: 45%;
  font-size: 21px;
  display: block;
  float: left;
}
.site.page_sup .offre_speciale .notaire sup {
  font-size: 9px;
  top: -12px;
}
.site.page_sup .offre_speciale .plus {
  text-align: left;
  width: 10%;
  display: block;
  float: left;
  top: 5%;
  position: relative;
  font-size: 33px;
  left: -4px;
  font-weight: 700;
}
.site.page_sup .offre_speciale .remise {
  width: 45%;
  display: block;
  float: left;
  font-size: 19px;
}
.site.page_sup .offre_speciale .remise span {
  font-size: 26px;
}
.site.page_sup .offre_speciale .remise sup {
  font-size: 9px;
  top: -12px;
  left: 5px;
}
@media screen and (min-width: 800px) {
  .site.page_sup .offre_speciale .container {
    position: relative;
    width: 253px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1200px) {
  .site.page_sup .offre_speciale {
    float: left;
    width: 251px;
    padding: 30px 80px;
    height: 156px;
    z-index: 1;
    position: relative;
  }
  .site.page_sup .offre_speciale .offre_speciale {
    padding: 20px 50px;
  }
}
@media screen and (min-width: 1200px) {
  .site.page_sup .typologie_container {
    position: relative;
    top: -48px;
  }
}
.site.page_sup .typologie {
  padding: 20px;
}
.site.page_sup .typologie .btn-lancement {
  background-color: #8c237f;
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid #8c237f;
  color: white;
  font-size: 24px;
  font-weight: 700;
  padding: 12px 80px 16px 80px;
  transition: all ease 0.3s;
}
.site.page_sup .typologie .btn-lancement:hover {
  background-color: white;
  color: #8c237f;
}
.site.page_sup .typologie .tableau {
  padding-top: 20px;
}
.site.page_sup .typologie .tableau .titre {
  color: #8c237f;
  text-align: center;
}
.site.page_sup .typologie .tableau table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.site.page_sup .typologie .tableau table th {
  color: #8c237f;
  text-align: center;
  font-size: 10px;
}
.site.page_sup .typologie .tableau table th span {
  font-size: 11px;
}
.site.page_sup .typologie .tableau table td {
  border: 2px solid white;
  text-align: center;
  padding: 8px;
  font-size: 59%;
}
.site.page_sup .typologie .tableau table td.violet {
  background-color: #8c237f;
  font-size: 70%;
}
.site.page_sup .typologie .tableau table td.violetclair {
  background-color: #c9b8c2;
  font-size: 70%;
}
.site.page_sup .typologie .tableau table td .prix {
  font-size: 11px;
}
.site.page_sup .typologie .tableau table td sup {
  font-size: 60%;
}
.site.page_sup .typologie .tableau table tr {
  background-color: #beb7ad;
  color: white;
}
.site.page_sup .typologie .tableau table tr:nth-child(even) {
  background-color: #dfdbd8;
  color: #000000;
}
.site.page_sup .typologie .tableau table tr.entete {
  background-color: white;
}
.site.page_sup .typologie .tableau table tr:nth-child(2) {
  border-top: 4px solid #8c237f;
}
@media screen and (min-width: 800px) {
  .site.page_sup .typologie .tableau table th {
    color: #8c237f;
    text-align: center;
    font-size: 14px;
    transform: skew(0deg);
  }
  .site.page_sup .typologie .tableau table th span {
    font-size: 20px;
  }
  .site.page_sup .typologie .tableau table th .title {
    position: relative;
    padding: 20px 0;
    height: 19px;
  }
  .site.page_sup .typologie .tableau table th .title:after {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    height: 50px;
    top: 5px;
    right: 0;
    z-index: -1;
    background: #8c237f;
    transform-origin: bottom left;
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
  }
  .site.page_sup .typologie .tableau table th .title2 {
    position: relative;
    padding: 20px 0;
    height: 19px;
  }
  .site.page_sup .typologie .tableau table td {
    border-width: 2px 2px 2px 0;
    border-style: solid;
    border-color: white;
    text-align: center;
    padding: 8px;
    font-size: 16px;
  }
  .site.page_sup .typologie .tableau table td.violet {
    background-color: #8c237f;
    font-size: 16px;
    border-right: 0;
  }
  .site.page_sup .typologie .tableau table td.violetclair {
    background-color: #c9b8c2;
    font-size: 16px;
    border-right: 0;
  }
  .site.page_sup .typologie .tableau table td .prix {
    font-size: 23px;
  }
  .site.page_sup .typologie .tableau table td sup {
    font-size: 60%;
    top: -10px;
  }
}
.site.page_sup .typologie .tableau .mentions_tableau {
  font-size: 12px;
}
.site.page_sup .typologie .block_decouverte {
  margin: 70px 0;
}
.site.page_sup .typologie .avantages img {
  position: relative;
  margin: 0 auto;
  display: block;
  bottom: -40px;
  left: 0;
  right: 0;
}
.site.page_sup .typologie .avantages .content {
  padding: 40px 20px 20px 20px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.site.page_sup .typologie .avantages .content:nth-child(1) {
  margin-top: 40px;
}
.site.page_sup .typologie .avantages .content p {
  font-size: 10px;
}
@media screen and (min-width: 1200px) {
  .site.page_sup .typologie {
    padding-top: 55px;
  }
  .site.page_sup .typologie .tableau {
    float: left;
    width: 749px;
    padding: 20px 20px 20px 0;
  }
  .site.page_sup .typologie .avantages {
    float: left;
    width: 351px;
    padding: 20px 0 20px 40px;
  }
  .site.page_sup .typologie .avantages ul {
    padding-left: 20px;
  }
  .site.page_sup .typologie .avantages ul li {
    font-size: 12px;
  }
}
.site.page_sup .mentions_tableau {
  font-size: 12px;
}

/*=======================================
=            espace de vente            =
=======================================*/
.espace_vente {
  background-color: #8c237f;
  padding: 20px;
  color: white;
}
.espace_vente .titre {
  font-size: 20px;
  margin: 0;
  font-weight: 100;
}
.espace_vente p {
  margin: 10px 0;
  font-size: 17px;
}
.espace_vente p span {
  font-weight: 700;
}
.espace_vente h4 {
  font-size: 20px;
  margin: 10px 0;
}
.espace_vente .btn-itineraire {
  background-color: white;
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid white;
  color: #8c237f;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px 14px 20px;
  transition: all ease 0.3s;
}
.espace_vente .btn-itineraire:hover {
  box-shadow: 0 6px 10px rgba(95, 4, 83, 0.9);
}
@media screen and (min-width: 800px) {
  .espace_vente a {
    display: inline;
  }
  .espace_vente h4 {
    font-size: 24px;
  }
}
@media screen and (min-width: 1200px) {
  .espace_vente {
    padding: 20px;
    color: white;
  }
  .espace_vente .titre {
    font-size: 30px;
    margin: 0;
    font-weight: 100;
  }
  .espace_vente a {
    color: white;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    margin-right: 10px;
    display: inline;
  }
  .espace_vente a img {
    width: 15px;
    height: auto;
  }
  .espace_vente p {
    margin: 10px 0;
    font-size: 22px;
  }
  .espace_vente p span {
    font-weight: 700;
  }
  .espace_vente h4 {
    font-size: 30px;
    margin: 10px 0;
  }
}

/*=======================================
=            Page residences            =
=======================================*/
.filtre_promoteurs {
  background-color: #ccc5bb;
  padding: 20px 40px;
}
.filtre_promoteurs .promoteurs_container {
  display: flex;
  flex-wrap: wrap;
}
.filtre_promoteurs .promoteurs_container .promoteur {
  display: flex;
  flex: 1 0 37%;
  /* explanation below */
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
  height: 100px;
  border: 0;
  margin: 10px;
  padding: 0;
  border-radius: 20px;
  background-color: white;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  transition: all ease-in 0.3s;
  opacity: 0.4;
}
.filtre_promoteurs .promoteurs_container .promoteur:focus {
  outline: 0;
}
.filtre_promoteurs .promoteurs_container .promoteur:hover {
  cursor: pointer;
}
.filtre_promoteurs .promoteurs_container .promoteur.active {
  opacity: 1;
}
.filtre_promoteurs .promoteurs_container .promoteur img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (min-width: 800px) {
  .filtre_promoteurs .promoteurs_container .promoteur {
    flex: 1 0 1;
  }
}
@media screen and (min-width: 1200px) {
  .filtre_promoteurs .promoteurs_container .promoteur {
    flex: 1 0 18%;
  }
}

.titre_residence {
  background-color: #ccc5bb;
  padding: 20px 0;
}
.titre_residence h1 {
  color: white;
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.4px;
}
@media screen and (min-width: 800px) {
  .titre_residence h1 {
    font-size: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .titre_residence h1 {
    font-size: 30px;
  }
}

.map_residences {
  background-color: #ccc5bb;
}
.map_residences .map_container {
  margin: 0 10px 100px 10px;
  overflow: hidden;
}
.map_residences .map_container .map img {
  max-width: 100%;
}
.map_residences .map_container .map .marker {
  position: absolute;
  background-color: white;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #000000;
  transition: all ease-in 0.3s;
}
.map_residences .map_container .map .marker a {
  text-decoration: none;
  color: black;
}
.map_residences .map_container .map .marker a:hover {
  cursor: pointer !important;
}
.map_residences .map_container .map .marker.disable {
  opacity: 0;
}
.map_residences .map_container .map .marker.actif_residence {
  background-color: #dc911a;
}
.map_residences .map_container .map .marker.actif_residence a {
  color: white !important;
}
.map_residences .map_container .map .residence_1 {
  top: 37%;
  left: 37.6%;
}
.map_residences .map_container .map .residence_2 {
  top: 37%;
  left: 43.2%;
}
.map_residences .map_container .map .residence_3 {
  top: 36.4%;
  left: 47.9%;
}
.map_residences .map_container .map .residence_4 {
  top: 44.6%;
  left: 50.5%;
}
.map_residences .map_container .map .residence_5 {
  top: 50.2%;
  left: 47.6%;
}
.map_residences .map_container .map .residence_6 {
  top: 60.6%;
  left: 46.2%;
}
.map_residences .map_container .map .residence_7 {
  top: 62.7%;
  left: 52.3%;
}
.map_residences .map_container .map .residence_8 {
  top: 81.5%;
  left: 57.9%;
}
@media screen and (min-width: 800px) {
  .map_residences .map_container {
    margin: 0 40px 100px 40px;
  }
}
.map_residences .buttons {
  display: none;
}
.map_residences .buttons :focus {
  outline: 0;
}
@media screen and (min-width: 800px) {
  .map_residences .buttons {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 9;
  }
  .map_residences .buttons .zoom-in, .map_residences .buttons .zoom-out, .map_residences .buttons .reset {
    background-color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
  }
}

.residences {
  position: relative;
  top: -80px;
  transition: all ease-in 0.3s;
}
.residences .disable {
  opacity: 0.4;
}
.residences .residences_container {
  display: flex;
  flex-wrap: wrap;
}
.residences .residences_container .residence {
  display: flex;
  flex: 1 0 37%;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  height: 235px;
}
@media screen and (min-width: 600px) {
  .residences .residences_container .residence {
    flex: 1 0 20%;
    height: 200px;
  }
}
@media screen and (min-width: 1200px) {
  .residences .residences_container .residence {
    flex: 1 0 10%;
    height: 180px;
  }
}
.residences .residences_container .residence a {
  text-decoration: none;
}
.residences .residences_container .residence a .titre {
  margin: 10px 0;
  font-weight: 600;
  font-size: 14px;
}
.residences .residences_container .residence a .titre .numero {
  border: 1px solid black;
  padding: 2px 7px;
  margin: 0 5px;
  color: black;
  height: 10px;
  font-size: 12px;
}
.residences .residences_container .residence a .titre.orange {
  color: #dc911a;
}
.residences .residences_container .residence a .titre.vert {
  color: #6ec2b2;
}
.residences .residences_container .residence a .titre.vertclair {
  color: #cdd327;
}
.residences .residences_container .residence a .pers {
  width: 100%;
}
.residences .residences_container .residence a .logo_promoteur {
  display: block;
  position: relative;
  margin: auto;
}
.residences .residences_container .residence a .logo_promoteur.kauffman {
  margin: 9px auto;
}
.residences .residences_container .residence a .logo_promoteur.coffim {
  margin: 0 auto 8px auto;
}

.modal_programmes {
  padding: 10px;
  margin-top: 0px !important;
  max-width: 100% !important;
  background-color: rgba(0, 0, 0, 0.78);
  display: none;
  color: white;
}
.modal_programmes .iziModal-content .btn_close {
  top: 10px;
  right: 0;
  background-color: white;
}
.modal_programmes .titre {
  padding: 0 20px;
}
.modal_programmes .titre h2 {
  font-weight: 700;
  font-size: 20px;
  color: #dc911a;
  padding: 20px 0 0 0;
}
.modal_programmes .titre h2.vertclair {
  color: #cdd327;
}
.modal_programmes .titre h2.vert {
  color: #6ec2b2;
}
.modal_programmes .titre h3 {
  font-weight: 100;
  font-size: 15px;
  padding: 0;
}
.modal_programmes .descriptif {
  padding: 30px 0;
}
.modal_programmes .descriptif p {
  font-size: 14px;
}
.modal_programmes img {
  display: block;
  width: 100%;
  height: auto;
}
.modal_programmes .formulaire {
  background: #dc911a;
  color: #ffffff;
}
.modal_programmes .formulaire.vertclair {
  background: #cdd327;
}
.modal_programmes .formulaire.vert {
  background: #6ec2b2;
}
.modal_programmes .formulaire .titre_formulaire p {
  font-size: 15px;
  line-height: 100%;
  color: #363635;
  margin: 10px 0 0 0;
  padding: 0;
}
.modal_programmes .formulaire .titre_formulaire p strong {
  font-weight: 800;
}
.modal_programmes .formulaire form {
  margin: 0;
  padding: 5px 10px;
}
@media screen and (min-width: 1200px) {
  .modal_programmes .formulaire form {
    padding: 5px 20px;
  }
}
.modal_programmes .formulaire form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.modal_programmes .formulaire form fieldset.envoi .error-container {
  height: 16px;
}
.modal_programmes .formulaire form fieldset.envoi .error-container label {
  margin-bottom: 5px;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 100%;
  color: crimson;
}
.modal_programmes .formulaire form fieldset.champs {
  margin-top: 10px;
}
.modal_programmes .formulaire form fieldset.champs .select_container > span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.modal_programmes .formulaire form fieldset.champs .select {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 60%;
  margin-left: 10px;
  background: transparent;
}
.modal_programmes .formulaire form fieldset.champs .select:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #ffffff transparent transparent transparent;
  pointer-events: none;
}
.modal_programmes .formulaire form fieldset.champs .select:before {
  width: 30px;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  background: transparent;
  content: "";
  pointer-events: none;
}
.modal_programmes .formulaire form fieldset.champs .select:hover:before {
  background: transparent;
}
.modal_programmes .formulaire form fieldset.champs .select select {
  font-size: 12px;
  color: white;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  height: 100%;
  width: 100%;
  cursor: pointer;
  outline: none;
  padding-right: 35px;
  padding-left: 0;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  -moz-appearance: none;
  -webkit-appearance: none;
}
.modal_programmes .formulaire form fieldset.champs .select select option {
  color: black;
}
.modal_programmes .formulaire form fieldset.champs .select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.modal_programmes .formulaire form fieldset.champs .select select::-ms-expand {
  display: none;
}
.modal_programmes .formulaire form fieldset.champs .select select:focus {
  border-color: #ffffff;
}
@media all and (min-width: 0 \0 ) and (min-resolution: 0.001dpcm) {
  .modal_programmes .formulaire form fieldset.champs .select select {
    padding-right: 0;
  }
  .modal_programmes .formulaire form fieldset.champs .select:after, .modal_programmes .formulaire form fieldset.champs .select:before {
    display: none;
  }
}
.modal_programmes .formulaire form fieldset.champs .error-container {
  height: 14px;
}
.modal_programmes .formulaire form fieldset.champs .error-container label {
  margin-bottom: 5px;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 100%;
  color: crimson;
}
.modal_programmes .formulaire form fieldset.champs p {
  margin: 0;
  padding: 3px 0;
  font-size: 8px;
  /* Customize the radio label (the container) */
  /* Customize the checkbox label (the container) */
}
.modal_programmes .formulaire form fieldset.champs p label {
  text-transform: uppercase;
  font-weight: 600;
}
.modal_programmes .formulaire form fieldset.champs p label span {
  display: none;
}
.modal_programmes .formulaire form fieldset.champs p label input {
  font-size: 10px;
  font-weight: 600;
  display: block;
  width: 100%;
  background: transparent;
  padding: 2px 0;
  border-top: none;
  border-right: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  border-left: none;
}
.modal_programmes .formulaire form fieldset.champs p label input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p label input::-moz-placeholder {
  /* Firefox 19+ */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p label input:-ms-input-placeholder {
  /* IE 10+ */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p label input:-moz-placeholder {
  /* Firefox 18- */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p.radio_container > span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label {
  display: inline-block;
  position: relative;
  padding: 2px 0 0 20px;
  margin: 0 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create a custom checkbox */
  /* Hide the browser's default checkbox */
  /* On mouse-over */
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label span {
  display: inline;
  font-size: 10px;
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label .checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background: transparent;
  border: solid 1px #ffffff;
  /* Create the checkmark/indicator */
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label .checkmark:after {
  display: block;
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  background: transparent;
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label input:checked ~ .checkmark:after {
  background: #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label:hover input ~ .checkmark {
  border: solid 1px #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p.radio_container label:hover input ~ .checkmark:after {
  background: #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label {
  display: block;
  position: relative;
  padding: 2px 0 0 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create a custom checkbox */
  /* Hide the browser's default checkbox */
  /* On mouse-over */
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label a {
  color: white;
  white-space: unset;
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label .checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background: transparent;
  border: solid 1px #ffffff;
  /* Create the checkmark/indicator */
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label .checkmark:after {
  display: block;
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  background: transparent;
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label input:checked ~ .checkmark:after {
  background: #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label:hover input ~ .checkmark {
  border: solid 1px #ffffff;
}
.modal_programmes .formulaire form fieldset.champs p.checkbox_container label:hover input ~ .checkmark:after {
  background: #ffffff;
}
.modal_programmes .formulaire form fieldset.envoi {
  text-align: center;
}
.modal_programmes .formulaire form fieldset.envoi p {
  margin: 0;
  padding: 2px 0;
}
.modal_programmes .formulaire form fieldset.envoi p input[type=submit] {
  cursor: pointer;
  background: transparent;
  border: solid 1px #ffffff;
  border-radius: 20px;
  padding: 5px 20px;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}
.modal_programmes .formulaire form fieldset.envoi p input[type=submit]:hover {
  background: #ffffff;
  color: #dc911a;
}
.modal_programmes .formulaire form fieldset.envoi p.mention {
  font-size: 8px;
  font-weight: 600;
}
.modal_programmes .mentions {
  padding: 20px 0;
}
@media screen and (min-width: 800px) {
  .modal_programmes {
    padding: 0 20px 20px 20px;
    max-width: 760px !important;
    margin-top: 0 !important;
  }
  .modal_programmes .titre {
    padding: 0;
  }
  .modal_programmes .titre h2 {
    font-size: 40px;
  }
  .modal_programmes .titre h3 {
    font-size: 30px;
  }
  .modal_programmes .descriptif p {
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .modal_programmes {
    max-width: 1160px !important;
    padding-top: 20px;
    box-shadow: none;
  }
  .modal_programmes .iziModal-content .btn_close {
    top: 0;
    right: 0;
    background-color: white;
  }
  .modal_programmes .titre {
    padding: 0;
    float: left;
    width: 500px;
    margin: 0 10px 20px 0;
  }
  .modal_programmes .titre h2 {
    font-size: 40px;
  }
  .modal_programmes .titre h3 {
    font-size: 26px;
  }
  .modal_programmes .descriptif {
    float: left;
    width: 620px;
    margin: 0 0 20px 10px;
  }
  .modal_programmes .descriptif p {
    font-size: 16px;
  }
  .modal_programmes .perspective {
    float: left;
    width: 780px;
    margin-right: 30px;
  }
  .modal_programmes .formulaire {
    float: left;
    width: 327px;
    height: auto;
  }
}

/*=======================================
=           Page ecoquartier            =
=======================================*/
.map_ecoquartier {
  background-color: #ffffff;
  padding: 0 10px 10px 10px;
}
.map_ecoquartier .autrement {
  text-align: center;
  padding: 20px 0;
}
.map_ecoquartier .autrement .content {
  color: white;
  text-align: center;
  padding: 10px 1%;
  margin: 10px;
  text-decoration: none;
  font-size: 10px;
  transition: all ease-in 0.3s;
  width: 40%;
  display: inline-block;
}
.map_ecoquartier .autrement .content.violet {
  background-color: #8c237f;
}
.map_ecoquartier .autrement .content.vertclair {
  background-color: #cdd327;
}
.map_ecoquartier .autrement .content.bleu {
  background-color: #0f9bd8;
}
.map_ecoquartier .autrement .content.vert {
  background-color: #beb7ad;
}
.map_ecoquartier .autrement .content:hover {
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 800px) {
  .map_ecoquartier .autrement .content {
    width: 40%;
    font-size: 14px;
  }
}
@media screen and (min-width: 1200px) {
  .map_ecoquartier .autrement .content {
    width: 20%;
  }
}
@media screen and (min-width: 800px) {
  .map_ecoquartier {
    padding: 0 30px 30px 30px;
  }
}
@media screen and (min-width: 1200px) {
  .map_ecoquartier {
    padding: 0 50px 50px 50px;
  }
}

.ecoquartier .titre {
  padding: 24px 0;
  text-align: center;
}
.ecoquartier .titre::after {
  content: "";
  position: relative;
  display: block;
  top: -13px;
  height: 5px;
  width: 100%;
  background-color: #8c237f;
  z-index: 1;
}
.ecoquartier .titre span {
  position: relative;
  padding: 0 20px;
  background-color: white;
  z-index: 2;
}
.ecoquartier .titre h2 {
  margin: 0;
  font-size: 18px;
}
.ecoquartier .container {
  display: flex;
  flex-direction: column;
}
.ecoquartier .container .content {
  float: none;
  width: 100%;
  margin: 0 auto;
}
.ecoquartier .container .content.order-1 {
  order: 1;
}
.ecoquartier .container .content.order-2 {
  order: 2;
}
.ecoquartier .container .content:after {
  content: "";
  display: table;
  clear: both;
}
.ecoquartier .container .content h3 {
  padding: 0 20px;
  font-size: 16px;
  font-weight: 100;
}
.ecoquartier .container .content img {
  display: block;
  width: 100%;
  height: auto;
}
.ecoquartier .container .content .legende {
  position: relative;
  display: inline-block;
  left: 20px;
  bottom: 45px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.4);
  color: #000000;
  font-size: 14px;
}
.ecoquartier .container .content ul {
  padding-left: 20px;
}
.ecoquartier .container .content ul li {
  list-style: none;
  margin-bottom: 20px;
}
.ecoquartier .container .content ul li h4 {
  font-size: 16px;
  margin: 0;
}
.ecoquartier .container .content ul li p {
  margin: 0;
  font-size: 14px;
}
.ecoquartier.violet .titre {
  color: #8c237f;
}
.ecoquartier.violet .titre::after {
  background-color: #8c237f;
}
.ecoquartier.violet h4 {
  color: #8c237f;
}
.ecoquartier.vert .titre {
  color: #cdd327;
}
.ecoquartier.vert .titre::after {
  background-color: #cdd327;
}
.ecoquartier.vert h4 {
  color: #cdd327;
}
.ecoquartier.bleu .titre {
  color: #0f9bd8;
}
.ecoquartier.bleu .titre::after {
  background-color: #0f9bd8;
}
.ecoquartier.bleu h4 {
  color: #0f9bd8;
}
.ecoquartier.marron .titre {
  color: #beb7ad;
}
.ecoquartier.marron .titre::after {
  background-color: #beb7ad;
}
.ecoquartier.marron h4 {
  color: #beb7ad;
}
@media screen and (min-width: 1200px) {
  .ecoquartier .titre:after {
    top: -20px;
  }
  .ecoquartier .titre h2 {
    font-size: 30px;
  }
  .ecoquartier .container {
    display: block;
    flex-direction: unset;
  }
  .ecoquartier .container .content {
    float: left;
    width: 50%;
    margin: 0 auto;
  }
}

.separateur_eco {
  background-color: #beb7ad;
  height: 50px;
}

/*=========================================
=            modal formulaire            =
=========================================*/
#modal_formulaire {
  background-color: #2e6756;
}
#modal_formulaire .formulaire {
  background: #2e6756;
  color: #ffffff;
}
#modal_formulaire .formulaire .titre p {
  font-size: 15px;
  line-height: 100%;
  color: white;
  margin: 10px 0 0 0;
  padding: 0;
  line-height: 18px;
}
#modal_formulaire .formulaire .titre p strong {
  font-weight: 600;
}
#modal_formulaire .formulaire form {
  margin: 0;
  padding: 5px 10px;
}
@media screen and (min-width: 1200px) {
  #modal_formulaire .formulaire form {
    padding: 5px 20px;
  }
}
#modal_formulaire .formulaire form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
#modal_formulaire .formulaire form fieldset.envoi .error-container {
  height: 16px;
}
#modal_formulaire .formulaire form fieldset.envoi .error-container label {
  margin-bottom: 5px;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 100%;
  color: crimson;
}
#modal_formulaire .formulaire form fieldset.champs {
  margin-top: 10px;
}
#modal_formulaire .formulaire form fieldset.champs .error-container {
  height: 14px;
}
#modal_formulaire .formulaire form fieldset.champs .error-container label {
  margin-bottom: 5px;
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 100%;
  color: crimson;
}
#modal_formulaire .formulaire form fieldset.champs p {
  margin: 0;
  padding: 3px 0;
  font-size: 8px;
  /* Customize the radio label (the container) */
  /* Customize the checkbox label (the container) */
}
#modal_formulaire .formulaire form fieldset.champs p label {
  text-transform: uppercase;
  font-weight: 600;
}
#modal_formulaire .formulaire form fieldset.champs p label span {
  display: none;
}
#modal_formulaire .formulaire form fieldset.champs p label input {
  font-size: 10px;
  font-weight: 600;
  display: block;
  width: 100%;
  background: transparent;
  padding: 2px 0;
  border-top: none;
  border-right: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  border-left: none;
}
#modal_formulaire .formulaire form fieldset.champs p label input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p label input::-moz-placeholder {
  /* Firefox 19+ */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p label input:-ms-input-placeholder {
  /* IE 10+ */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p label input:-moz-placeholder {
  /* Firefox 18- */
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container > span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label {
  display: inline-block;
  position: relative;
  padding: 2px 0 0 20px;
  margin: 0 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create a custom checkbox */
  /* Hide the browser's default checkbox */
  /* On mouse-over */
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label span {
  display: inline;
  font-size: 10px;
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label .checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background: transparent;
  border: solid 1px #ffffff;
  /* Create the checkmark/indicator */
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label .checkmark:after {
  display: block;
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  background: transparent;
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label input:checked ~ .checkmark:after {
  background: #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label:hover input ~ .checkmark {
  border: solid 1px #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p.radio_container label:hover input ~ .checkmark:after {
  background: #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p.checkbox_container label {
  display: block;
  position: relative;
  padding: 2px 0 0 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create a custom checkbox */
  /* Hide the browser's default checkbox */
  /* On mouse-over */
}
#modal_formulaire .formulaire form fieldset.champs p.checkbox_container label .checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background: transparent;
  border: solid 1px #ffffff;
  /* Create the checkmark/indicator */
}
#modal_formulaire .formulaire form fieldset.champs p.checkbox_container label .checkmark:after {
  display: block;
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  background: transparent;
}
#modal_formulaire .formulaire form fieldset.champs p.checkbox_container label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
#modal_formulaire .formulaire form fieldset.champs p.checkbox_container label input:checked ~ .checkmark:after {
  background: #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p.checkbox_container label:hover input ~ .checkmark {
  border: solid 1px #ffffff;
}
#modal_formulaire .formulaire form fieldset.champs p.checkbox_container label:hover input ~ .checkmark:after {
  background: #ffffff;
}
#modal_formulaire .formulaire form fieldset.envoi {
  text-align: center;
}
#modal_formulaire .formulaire form fieldset.envoi p {
  margin: 0;
  padding: 2px 0;
}
#modal_formulaire .formulaire form fieldset.envoi p input[type=submit] {
  cursor: pointer;
  background: transparent;
  border: solid 1px #ffffff;
  border-radius: 20px;
  padding: 5px 20px;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}
#modal_formulaire .formulaire form fieldset.envoi p input[type=submit]:hover {
  background: #ffffff;
  color: #0f9bd8;
}
#modal_formulaire .formulaire form fieldset.envoi p.mention {
  font-size: 8px;
  font-weight: 600;
}

/*================================
=            services            =
================================*/
.services .titre {
  text-transform: uppercase;
  color: #7d2273;
  text-align: center;
  margin: 67px 0;
  margin: 40px 0;
  font-size: 33px;
}
.services .titre > * {
  margin: 0;
}
@media screen and (max-width: 420px) {
  .services .titre {
    font-size: 16px;
  }
}
.services .legende .titre {
  margin-top: 70px;
  margin-bottom: 20px;
  min-height: 50px;
  color: #000;
  font-size: 22px;
}
.services .legende .titre > * {
  margin: 0;
}
.services .container .content {
  float: left;
  width: 33.333%;
  box-sizing: border-box;
}
.services .container .content figure {
  margin: 0;
  position: relative;
}
.services .container .content .picto {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 244px;
  transform: translate(-50%, 40%);
}
.services .container .content img {
  max-width: 100%;
}

@media screen and (min-width: 840px) {
  .services .container .content:first-child {
    padding-right: 8px;
  }
  .services .container .content:nth-child(2) {
    padding: 0 4px;
  }
  .services .container .content:last-child {
    padding-left: 8px;
  }
}
#gallery {
  margin-top: 60px;
  margin-bottom: 40px;
}
#gallery .item {
  float: left;
  width: calc(25% - 18px);
  box-sizing: border-box;
  margin: 9px;
  position: relative;
}
#gallery .item img {
  max-width: 100%;
  display: block;
}
#gallery .item .overlay {
  opacity: 0;
  transition: all 0.4s;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
#gallery .item .overlay.white {
  background-color: rgba(0, 0, 0, 0.7);
}
#gallery .item .overlay.white .legende {
  color: #fff;
}
#gallery .item .overlay img {
  width: 206px;
  display: block;
  margin: auto;
  margin-top: -8px;
}
#gallery .item .overlay .legende {
  display: block;
  margin-top: -34px;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
  font-size: 18px;
}
#gallery .item:hover .overlay {
  opacity: 1;
}

@media screen and (min-width: 1200px) {
  #gallery .item:nth-child(4n+1) {
    margin-left: 0;
    margin-right: 18px;
  }
  #gallery .item:nth-child(4n+4) {
    margin-right: 0;
    margin-left: 18px;
  }
}
@media screen and (min-width: 1399px) {
  #gallery .item {
    width: calc(33.33% - 18px);
  }
  #gallery .item:nth-child(3n+1) {
    margin-left: 0;
    margin-right: 18px;
  }
  #gallery .item:nth-child(3n+3) {
    margin-right: 0;
    margin-left: 18px;
  }
  #gallery .item .overlay img {
    margin-top: 20%;
    width: 150px;
  }
  #gallery .item .overlay .legende {
    margin-top: -24px;
  }
}
@media screen and (max-width: 840px) {
  .services .container .content {
    float: none;
    width: auto;
    max-width: 536px;
    margin: auto;
    padding: 9px;
  }
}
@media screen and (max-width: 767px) {
  #gallery .item {
    width: calc(50% - 18px);
  }
  #gallery .item .overlay img {
    margin-top: 1%;
    width: 80%;
  }
  #gallery .item .overlay .legende {
    margin-top: -8%;
  }
}
@media screen and (max-width: 660px) {
  #gallery .item {
    width: 398px;
    margin: 8px auto !important;
    max-width: calc(100% - 18px);
    float: none;
  }
  #gallery .item .overlay img {
    margin-top: 1%;
    width: 80%;
  }
  #gallery .item .overlay .legende {
    margin-top: -8%;
  }
  #gallery .item .overlay.white .legende {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 12px;
  }
}
.titre_remerciement {
  font-family: Montserrat, sans-serif;
  text-align: center;
}

.btn_remerciement {
  font-family: Montserrat, sans-serif;
  color: white;
  background-color: #0f9bd8;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 30px;
  margin: 10px;
  display: inline-block;
}

/*# sourceMappingURL=main.css.map */