.contact {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin: 20px 0;
}
#loading {
  display: none;
  left: 0px;
  top: 50px;
  position: relative;
}
.h1 {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}


.h1_e, .h1_t, .h1_a {
  font-size: large;
  width: 30%;
  background-color: #0073e6;
  border-radius: 20px;
  text-align: center;
  color: white;
  padding: 4px;
}
.dark-mode .formulaire,.dark-mode .formulaire h2{
  background-color: #1b1b1b;
  color: #fff;
}
.dark-mode .h1_e,.dark-mode .h1_t,.dark-mode .h1_a,.dark-mode .contenu {
  background-color: #292828;
  color: white;

}


.email, .tel, .adresse {
  font-weight: bold;
}


.contenu {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #0073e6;
}


.map {
  width: 50%;
  height: 440px;
  border: 1px solid #ccc;
  border-radius: 23px;
}


.formulaire {
  width: 40%;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}


.formulaire h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}


.formulaire label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}


.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  font-family: inherit;
  font-size: 20px;
  background: royalblue;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}
#outline {
  stroke-dasharray: 2.42777px, 242.77666px;
  stroke-dashoffset: 0;
  -webkit-animation: anim 1.6s linear infinite;
  animation: anim 1.6s linear infinite;
}

@-webkit-keyframes anim {
  12.5% {
    stroke-dasharray: 33.98873px, 242.77666px;
    stroke-dashoffset: -26.70543px;
  }

  43.75% {
    stroke-dasharray: 84.97183px, 242.77666px;
    stroke-dashoffset: -84.97183px;
  }

  100% {
    stroke-dasharray: 2.42777px, 242.77666px;
    stroke-dashoffset: -240.34889px;
  }
}

@keyframes anim {
  12.5% {
    stroke-dasharray: 33.98873px, 242.77666px;
    stroke-dashoffset: -26.70543px;
  }

  43.75% {
    stroke-dasharray: 84.97183px, 242.77666px;
    stroke-dashoffset: -84.97183px;
  }

  100% {
    stroke-dasharray: 2.42777px, 242.77666px;
    stroke-dashoffset: -240.34889px;
  }
}


@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}


@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}



@media screen and (max-width: 768px) {
  .case{
    height: 50px;
    font-size: 2.4em; 
    }
    .form {
      color: white;
      margin: 5px;
      }
  .contenu {
    display: flex;
   flex-direction: column-reverse;
  }
.h1{
  flex-direction: column;

}
  .h1_e,
  .h1_t,
  .h1_a {
    width: 100%;
    margin: 2px;
  }

  .map {
    width: 100%;
    
    margin: 5px;
  }

  .formulaire {
    width: 100%;
    margin: 5px;
  }
}