.title_section {
  margin-top: 10vh;
}

.contact_section {
    width: 100%;
    flex-direction: column;
}

.form_container {
    background-color: var(--main-purple);
    padding: 4%
    
}

.form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: auto;
}

.form *::placeholder {
    /* padding: 2px; */
    color: var(--main-yellow);
}

.form div {
    display: flex;
    justify-content: space-between;
}

.form input[type='text'] {
    width: 45%;
}

.form input[type='submit'] {
    font-family: Lato-Light;
    font-weight: 900;
    width: 30%;
    align-self: flex-end;
    border: none;
    padding: 8px;
    background-color: var(--main-purple);
    color: var(--main-yellow);
    margin-top: 2%;
    transition: .25s;
}
.form input[type='submit']:hover {
    cursor: pointer;
    color: var(--main-purple);
    background-color: var(--main-yellow);

}

.form_element {
    font-family: Lato-Light;
    font-weight: 900;
    height: 3vh;
    margin: 1% 0;
    border: none;
    padding: 4px;
    color: var(--main-yellow);
    text-indent: 5px;
}

textarea {
    font-family: Lato-Light;
    font-weight: 900;
    height: 15vh;
    margin: 1% 0;
    border: none;
    padding: 4px;
    color: var(--main-yellow);
    text-indent: 5px;
}

.info_section {
    flex-direction: column;
    padding-bottom: 50px;;
}

.transition {
    margin: 20px auto;
}

.info_section p {
    font-size: 12pt;
    color: var(--main-dark-grey);
}

.validation {
    color: #fff;
    font-family: Lato-Light;
    text-align: center;
}

/* ================== ================== ==================
                      LOCAUX
================== ================== ================== */

.locaux {
  width: 100%;
  background-color: var(--main-purple);
  flex-direction: column;
}

.locaux__container {
  width: 90%;
  margin: auto;
  margin-bottom: 8%;
}

.locaux h2 {
  color: #fff;
}
.locaux h2::after {
  background-color: #fff;
}

.locaux__pic {
  width: 100%;
  outline: 10px solid var(--main-yellow);
  max-height: 40vh;
  object-fit: cover;
}

.locaux__description {
  color: #fff;
}

.locaux__link {
  color: var(--main-yellow);
}

.cta_contact {
  background-color: #fff;
  color: var(--main-yellow);
  font-family: Lato-Light;
  font-weight: bold;
  text-decoration: none;
  padding: 6px 12px;
  margin: auto;
  box-shadow: 0 0px 5.2px rgb(0 0 0 / 6%), 0 0px 13px rgb(0 0 0 / 9%), 0 0px 26.6px rgb(0 0 0 / 11%), 0 0px 54.8px rgb(0 0 0 / 14%), 0 0px 150px rgb(0 0 0 / 20%);
  transform: translateY(-50%);
  text-align: center;
}

/* supprime les style par défaut des navigateur/os */
input {
    -webkit-appearance: none !important;
    -webkit-border-radius: 0 !important;
}
@media only screen and (min-width: 1024px) {
    .title_section {
      transform: translateY(5vh);
      margin-top: 15vh;
    }
    .contact_section {
        flex-direction: row;
        width: 80%;
        justify-content: space-around;
        align-items: center;
    }

    .contact_section img {
        width: 30%;
        height: 30%;
    }

    .form_element, textarea {
        margin: 2% 0;
    }
    
    .transition {
        margin: 10vh auto;
    }

    .info_section {
        flex-direction: row;
        justify-content: space-around;
        position: relative;
        padding: 8%;
    }

    .info_section iframe {
        border: 6px solid var(--main-purple) !important;
    }

    .cta_contact {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%) translateY(-50%);
      padding: 2vw 4vw;
      font-size: 2vw;
      transition: .25s;
    }

    .cta_contact:hover {
        color: #fff;
        background-color: var(--main-yellow);
    }
    
    /* supprime les style par défaut des navigateur/os */
    input {
        -webkit-appearance: none !important;
        -webkit-border-radius: 0 !important;
    }

    /* ================== ================== ==================
                      LOCAUX
    ================== ================== ================== */
    .locaux__container {
      width: 80%;
    }

    .locaux__pics {
      display: flex;
      width: 100%;
      max-height: 60vh;
    }

    .locaux__pic {
      outline: 10px solid var(--main-yellow);
    }
    .locaux__pic:nth-child(1) {
      width: 60%;
    }
    .locaux__pic:nth-child(2) {
      width: 40%;
    }

    .locaux__description {
      color: #fff;
    }

    .locaux__link {
      color: var(--main-yellow);
    }

}