.form {
  display: flex;
  flex-direction: column;

  .container {
    .section__title {
      color: var(--dark);
      max-width: 960px;
      margin: auto auto 50px auto;
    }

    .formulaires {
      .boutons_choix_form {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;

        @media (min-width: 992px) {
          flex-direction: row;
          margin-bottom: 80px;
        }

        .no_desktop {
          display: none;

          @media (max-width: 991px) {
            display: flex;
            font-size: 13px;
            line-height: normal;
            color: var(--hover);
            text-align: center;
          }
        }

        .bouton_choix_form {
          background-color: var(--blue);
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: fit-content;
          min-height: 40px;
          gap: 10px;
          outline: 0px;
          border: 0px;
          transition: var(--transition);
          padding: 15px;
          position: relative;

          @media (min-width: 992px) {
            &.active {
              &:after {
                opacity: 0;
                content: '';
                position: absolute;
                bottom: -80px;
                background-size: contain;
                background-repeat: no-repeat;
                transition: var(--transition);
              }

              &[data-form="1"] {
                &:after {
                  opacity: 1;
                  background-image: url(../../img/after1.svg);
                  height: 80px;
                  width: 170px;
                  right: -90px;
                }
              }

              &[data-form="2"] {
                &:after {
                  opacity: 1;
                  content: '';
                  background-image: url(../../img/after2.svg);
                  height: 80px;
                  width: 1px;
                }
              }

              &[data-form="3"] {
                &:after {
                  opacity: 1;
                  content: '';
                  background-image: url(../../img/after1.svg);
                  height: 80px;
                  width: 170px;
                  left: -90px;
                  transform: rotateX(180deg);
                }
              }
            }
          }

          @media (max-width: 500px) {
            width: 100%;
          }

          @media (min-width: 501px) and (max-width: 991px) {
            min-width: 340px;
          }

          @media (min-width: 992px) {
            width: 160px;
            min-height: 140px;
            flex-direction: column;
            padding: 0;
          }

          img {
            max-height: 27px;
          }

          &:hover,
          &.active {
            background-color: var(--hover);
          }

          p {
            line-height: 20px;
            text-align: center;
            margin: 0;
            color: var(--white);

            @media (min-width: 992px) {
              max-width: 120px;
            }
          }
        }
      }
    }
  }

  .infos_and_form {
    width: 100%;
    opacity: 1;
    position: relative;
    z-index: 99;

    &:not(.active) {
      opacity: 0;
      position: absolute;

      .container {
        opacity: 0;
        position: absolute;
        transform: translateY(100%);
      }
    }

    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      opacity: 1;
      position: relative;
      transition: var(--transition);
      transform: translate(0);

      @media (max-width: 1199px) {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 50px;
      }
    }

    .infos,
    .form__wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .infos {
      height: fit-content;

      @media (min-width: 1200px) {
        max-width: 640px;
      }

      .infos__container {
        display: flex;
        flex-direction: column;

        .infos__description {
          opacity: 0.6;
          margin-bottom: 35px;

          @media (min-width: 768px) {
            max-width: 560px;
          }
        }

        .map_coordonnees {
          display: flex;
          gap: 30px;
          flex-direction: column;

          @media (min-width: 768px) {
            flex-direction: row;
          }

          .map__container {
            width: 100%;
            height: 400px;
            display: block;

            @media (min-width: 768px) {
              width: 340px;
            }
          }

          .coordonnees {
            display: flex;
            flex-direction: column;
            gap: 25px;

            .telephone {
              display: flex;
              align-items: start;
              gap: 15px;
              font-weight: var(--light);
              font-size: 14px;

              .tel_numbers {
                display: flex;
                flex-direction: column;
              }
            }

            .adresse {
              display: flex;
              align-items: start;
              gap: 15px;
              font-weight: var(--light);
              font-size: 14px;
            }

            .linkedin {
              display: flex;
              align-items: start;
              gap: 15px;
              font-weight: var(--light);
              color: var(--white);
              font-size: 14px;
            }
          }
        }
      }
    }

    .form__wrapper {

      .gform_wrapper {
        position: relative;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(12px);
        z-index: 3;

        @media (min-width: 500px) {
          padding: 20px 35px;
        }

        @media (min-width: 1200px) {
          max-width: 600px;
        }

        .gform-body {
          .gform_fields {
            padding: 15px 20px;

            @media (min-width: 500px) {
              gap: 25px 30px;
              padding: 0;
            }

            .gfield.gfield--type-submit {
              justify-content: end;

              .gform-button.button {
                background: var(--blue) !important;
                display: flex !important;
                align-items: center !important;
                text-align: center !important;
                padding: 10px 15px !important;
                color: var(--white) !important;
                transition: var(--transition) !important;
                width: fit-content !important;

                &:hover {
                  opacity: 0.8 !important;
                }
              }
            }
          }
        }

        fieldset.gfield--type-consent {
          @media (min-width: 768px) {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
          }

          .ginput_container.ginput_container_consent {
            @media (min-width: 768px) {
              position: absolute;
              width: 400px;
              display: flex;
              align-items: center;
            }

            label {
              color: var(--white);
              font-weight: var(--light);
              font-size: 14px;

              .gfield_required {
                color: var(--blue);
              }
            }
          }
        }

        .gform_drop_area.gform-theme-field-control {
          background: transparent;
          color: var(--white);

          &:before {
            color: var(--blue);
          }

          .gform_drop_instructions {
            display: none;
          }

          .gform_button_select_files {
            background: var(--blue) !important;
            display: flex !important;
            align-items: center !important;
            text-align: center !important;
            padding: 10px 15px !important;
            color: var(--white) !important;
            transition: var(--transition) !important;
            width: fit-content !important;
            margin: auto;

            &:hover {
              opacity: 0.8 !important;
            }
          }
        }

        .gform_required_legend {
          display: none;
        }

        label.gfield_label {
          color: var(--white);
          font-weight: var(--medium);
          font-size: 16px;

          .gfield_required {
            .gfield_required {
              color: var(--blue);
            }
          }
        }

        .ginput_container.ginput_container_select {
          position: relative;

          &:after {
            content: '';
            background-image: url('../../img/chevron.svg');
            background-repeat: no-repeat;
            background-size: 100%;
            display: inline-block;
            width: 10px;
            height: 5px;
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
          }

          select {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            color: var(--white);

            option {
              color: var(--dark);
            }
          }
        }

        .ginput_container:not(.ginput_container_consent) input,
        .ginput_container select,
        .ginput_container textarea {
          background: transparent;
          border: 1px solid var(--white);
          border-radius: 0px;
          color: var(--white);

          &::placeholder {
            color: rgba(255, 255, 255, 0.25);
          }
        }

        .ginput_container:not(.ginput_container_consent) input {
          color: var(--white);
        }

        .ginput_container.ginput_container_consent input {
          background: transparent;
          border: 1px solid var(--white);
          border-radius: 0px;
          width: 14px;
          height: 14px;

          &:focus {
            outline: 0px;
          }

          &:before {
            content: '';
            background: var(--white) !important;
            width: 10px;
            padding: 2px !important;
            height: 10px;
            outline: 5px solid var(--blue);
            border: 1px solid var(--blue);
          }
        }
      }
    }
  }
}