/* ----------------------------------------- */
/*           CONTACT ET REDIRECTION          */
/* ----------------------------------------- */
/* Module contact intégré à l'accueil */
/* .contact-module {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	overflow: hidden;
}

.contact-module.opened {
	display: block;
}

body.contact_module_open #header,
body.contact_module_open #footer,
body.contact_module_open .sticky-contact {
	visibility: hidden;
	pointer-events: none;
} */

#contact {
  overflow: hidden;
}

#contact .contact-content {
  background-color: #535353;
  position: relative;
  width: 100vw;
  height: 100vh;
}

#contact .contact-content .contact_map {
  background-image: url("./img/carte.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 485px;
  height: 400px;
}

/*
#contact .close_form_area {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: red;
}*/

/* Site list */
#contact .sites-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;

  width: 100%;
  overflow-y: auto;
  height: 100%;
  padding-top: 4vh;
}

#contact .elem-site {
  position: relative;
  width: 50%;
  padding: 0px 0px 7vh 0px;
}

#contact .elem-site .elem-content {
  position: relative;
  width: auto;
  max-width: 340px;
  top: 0px;
}

#contact .elem-site:nth-of-type(odd),
#contact .elem-site:nth-of-type(even) {
  /* margin-bottom: 50px; */
}

#contact .elem-site:nth-of-type(odd) .elem-content {
  /*left: 35%;*/
  margin-left: 200px;
  margin-right: auto;
}

#contact .elem-site:nth-of-type(even) .elem-content {
  /* left: 40%; */
  margin-right: 110px;
  margin-left: auto;
}

/* 		First elem 		*/
#contact .elem-site.elem-0,
#contact .elem-site:last-child {
  width: 100%;
}

#contact .elem-site.elem-0 .elem-content,
#contact .elem-site:last-child .elem-content {
  position: relative;
  margin-left: 0px;
  margin-right: 0px;
  left: unset;
  top: unset;
  width: auto;
  max-width: none;
}

/* Bouton */
#contact .elem-site .elem-content .form-contact {
  margin-top: 25px;
}

#contact .elem-site .elem-content .contact-btn {
  display: inline;
}

#contact .elem-site .elem-content .idi-btn {
  font-size: 14px;
  font-weight: bold;
  padding-left: 25px;
  padding-right: 25px;
  cursor: pointer;
}

#contact .elem-site .elem-content .idi-btn.idi-btn-left {
  padding-right: 50px;
  padding-left: 0px;
}

/*  Formulaire  */

#contact .elem-site .form-block ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

#contact .elem-site .form-block ul li {
  width: 100%;
  box-sizing: border-box;
}

#contact .elem-site .form-block ul li:nth-child(-n + 4) {
  width: 50%;
}

#contact .elem-site .form-block ul li:nth-child(-n + 4):nth-of-type(even) {
  padding-left: 15px;
}

#contact .elem-site .form-block ul li:nth-child(-n + 4):nth-of-type(odd) {
  padding-right: 15px;
}

#contact .elem-site .btn-area {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0px 50px 0px;
}

#contact .elem-site .btn-area .idi-btn-field {
  width: 50%;
}

#contact .elem-site .btn-area .idi-btn-field span {
  display: inline;
}

#contact .elem-site .btn-area .idi-btn-field:first-child {
  text-align: left;
}

#contact .elem-site .btn-area .idi-btn-field:last-child {
  text-align: right;
}

/* --------------------------- */
/*         Animation           */
/* --------------------------- */

/* chargement / fermeture de la page */
#contact .animation_load_page {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  display: none;
  height: 100%;
  z-index: 100;
  background-color: #8ac102;
}

#contact .animation_load_page.enabled {
  display: block;
}

#contact .animation_load_page.enabled {
  animation: contact_page_on_load 0.5s forwards;
}

@keyframes contact_page_on_load {
  0% {
    opacity: 1;
    display: block;
    z-index: 100;
  }
  90% {
    opacity: 0;
    display: block;
    z-index: 100;
  }
  100% {
    opacity: 0;
    display: none;
    z-index: -1;
  }
}

/* Affichage des éléments au chargement de la page */
#contact .sites-list,
#contact .contact_map {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-in,
    visibility 0.3s ease-in,
    height 0.3s ease-in;
}

body.load #contact .sites-list,
body.load #contact .contact_map {
  opacity: 1;
  visibility: visible;
}

/* Ouverture des formulaires au click */
#contact .sites-list .elem-site .form-block {
  visibility: hidden;
  opacity: 0;
  height: 0px;
  background-color: white;
}

#contact .sites-list .elem-site .form-block .form {
  display: none;
  color: #5d5e5d;
  padding: 40px;
}

#contact .sites-list .elem-site .form-block .form label {
  font-size: 18px;
}

/* On masque les autres éléments */

/* Animation */
#contact .sites-list.opened .elem-site:not(.opened) {
  animation: hide_sites 0.6s forwards;
}

#contact .sites-list.opened .elem-site {
  transition:
    top 1s ease-in,
    left 0.4s ease 0s,
    transform 0.4s ease 0s;
}

body #contact .sites-list.opened .elem-site.opened.animated {
  left: 50% !important;
  transform: translateX(-50%) !important;
  /*transition: transform 1s ease-in, left 1s ease-in;*/
}

body
  #contact
  .sites-list.opened
  .elem-site.opened.animated:nth-of-type(odd).elem-0,
body #contact .sites-list.opened .elem-site.opened.animated:last-child {
  width: 50%;
  /*transition: width 0.6s ease;*/
}

body #contact .sites-list.opened .elem-site.opened.animated .elem-content {
  margin-left: 0px;
  margin-right: auto;
  transition: margin-left 0.5s ease;
}

#contact .elem-site.opened .elem-content.no-margin {
  margin-left: 0px;
}

#contact .sites-list.opened .elem-site.opened.animated .form-block {
  overflow: hidden;
  animation: display_form 1.3s forwards;
}

#contact .sites-list.opened .elem-site.opened.animated .form-block .form {
  display: block;
  min-width: 300px;
}

@keyframes hide_sites {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes display_form {
  0% {
    width: 0px;
    visibility: hidden;
    opacity: 0;
    height: auto;
  }
  10% {
    width: 0px;
    visibility: visible;
    opacity: 1;
    height: auto;
  }
  100% {
    width: 100%;
    visibility: visible;
    opacity: 1;
    height: auto;
  }
}

/* ----------------------------------------- */
/*           	PAGE REDIRECTION	         */
/* ----------------------------------------- */

body.load #contact.redirect .contact_map {
  opacity: 0.3;
}

body.load #contact.redirect .contact-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  width: 95%;
}

body.load #contact.redirect .message {
  font-size: 18px;
}

body.load #contact.redirect .back-home {
  display: inline-block;
}

/* ----------------------------------------- */
/*                 RESPONSIVE                */
/* ----------------------------------------- */

/* Custom */
@media (max-width: 1449px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1199px) {
}

@media screen and (max-width: 980px) {
  /* opacité de la carte */
  #contact .contact-content .contact_map {
    opacity: 0.4 !important;
  }

  #contact .sites-list {
    display: block;
    padding-top: 12vh;
  }

  /* Structure de l'affichage des sites */
  #contact .elem-site .elem-content .idi-btn.idi-btn-left {
    padding-left: 25px;
    padding-right: 25px;
  }

  #contact .elem-site:nth-of-type(odd) .elem-content,
  #contact .elem-site:nth-of-type(even) .elem-content {
    width: auto;
    max-width: 320px;
    margin: auto;
  }

  #contact .elem-site:nth-of-type(odd).elem-0 .elem-content {
    max-width: none;
  }

  #contact .sites-list .elem-site {
    width: 100%;
  }

  #contact .sites-list .elem-site .idi-addr {
    width: 100%;
  }

  /* Formulaire de contact */
  body #contact .sites-list.opened .elem-site.opened.animated {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 98% !important;
  }

  #contact .elem-site .form-block ul li:nth-child(-n + 4) {
    width: 100%;
    padding: 0px !important;
    padding-top: 15px !important;
  }

  #contact .sites-list .elem-site .form-block .form {
    padding: 10px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 767px) {
}

@media screen and (max-width: 600px) {
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575px) {
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}