/* @font-face {
  font-family: "Gfont";
  src: url("../fonts/gfont.otf");
} */


h2
{
  margin: 0;

  font-family: "Gfont", sans-serif;
  font-weight: 400;
  font-size: max(45px, 7vw);
  
  text-shadow: 1px 1.5px #000000;
  color: #ffffff;
}

section.formulaire
{
  margin-top: 17vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-gap: 10px; */
  grid-template-rows: 100px 1fr 200px;

  width: 60%;
  /* width: 810px; */
}

.contact
{
  position: relative;
  z-index: 0;
  background-color: var(--my-blue);
  /* width: 700px; */

  grid-column: span 3/5;
  grid-row: 1/3;

  /* height: 900px; */

  /* padding: 15px 40px; */
  border-radius: 18px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 1fr 150px 1fr;

  box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
}

.contact h2
{
  text-align: center;
  margin-top: 10px;
  grid-column: span 5;
  font-size: 83px !important;
}

.contact .me-logo
{
  align-self: end !important;
  width: 300px;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4));
}

.contact .me-logo,
.contact .contact-ref,
.contact .contact-socials
{
  grid-column: span 2/4;
  justify-self: center;
}

.contact-ref
{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
}

.contact-ref i
{
  /* font-size: 1.3vw; */
  position: relative;
  top: 2px;
  font-size: 23px;
  color: #ffffff;
  margin-right: 20px;
  text-shadow: 1px 1px #000000;
  transition: .3s;
}

.contact-ref i[class="fas fa-map-marker-alt"]
{
  margin-right: 26px;
}

.contact-ref a
{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  /* font-size: minmax(14px, 1.3vw); */
  
  font-weight: bold;
  text-shadow: 1px 1px #000000;
  transition: .3s;
}

.contact-ref a:hover,
.contact-ref a:hover i
{
  color: goldenrod;
}

.contact-socials
{
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.contact-socials i
{
  /* font-size: 4vw; */
  color: #fff;
  font-size: 40px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  transition: .3s;
  margin: .8vw;
}

.link-icon-doctolib
{
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-socials img.icon-d-docto
{
  width: 40px;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
  transition: .3s;
  margin: .8vw;
}

/* .contact-socials .fab.fa-linkedin
{
  color: var(--linkedin-color) !important;
}
.contact-socials .fab.fa-instagram
{
  color: #fd5949
}
.contact-socials .fab.fa-facebook
{
  color: var(--facebook-color) !important;
} */

.contact-socials a:hover .fab.fa-linkedin,
.contact-socials a:hover .fab.fa-instagram,
.contact-socials a:hover .fab.fa-facebook,
.contact-socials a:hover .fab.fa-whatsapp
{
  color: goldenrod;
  transform: scale(1.1);
}

.contact-socials a:hover img.icon-d-docto
{
  filter: invert(80%) sepia(29%) saturate(3000%) hue-rotate(351deg) brightness(400%) contrast(82%) drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
  transform: scale(1.1);
}

.form-env
{
  position: relative;
  z-index: 1;

  grid-column: span 2/3;
  grid-row: span 2/4;

  display: flex;
  justify-content: center;
}

#contact-form
{
  /* width: 450px; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;

  padding: 40px;
  border-radius: 18px;
  /* border: 5px solid var(--my-blue); */

  background-color: #fff;

  box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
}

#contact-form p
{
  margin: 0;
}

#contact-form p span
{
  color: red;
}

#contact-form p:nth-child(5), button[type="submit"]
{
  grid-column: span 2;
}

#message
{
  width: 100%;
}

#contact-form label
{
  display: block;
  font-size: 16px;
  font-weight: bold;
}

#contact-form label span
{
    color: red;
}

#contact-form input, #message
{
  padding: 8px;
  width: 100%;
  font-size: 14px;
  /* font-family: 'Oranienbaum', serif; */
  border: 1px solid rgb(175, 175, 175);
  background-color: rgba(255,255,255, 0.8);
  border-radius: 3px;
}

#contact-form input::placeholder, #message::placeholder
{
  font-family: 'helvetica', serif;
}

#contact-form p.contact-rgpd
{
  grid-column: span 2;
  display: flex;
}
#contact-form p.contact-rgpd label
{
  flex: 9;
  font-weight: normal !important;
  text-align: justify;
  line-height: 23px;
}
#contact-form p.contact-rgpd input
{
  flex: 1;
}
#rgpd {
  display: none;
}
#rgpd + label::before {
  font-family: "Font Awesome 5 Free";
  content: '\f111';
  font-size: 1.2em;  
  color: red;
  /* color: var(--my-blue); */
  margin-right: 0.3rem  ;
  transition: .2s;

  cursor: pointer;
}
#rgpd:checked + label::before {
  content:'\f058';
  color: var(--my-blue);
  transition: .2s;
}

#contact-form p.obligatoire
{
  font-style: italic;
  font-size: 13px;
}

#contact-form p.policy
{
  grid-column: span 2;
  font-size: 14px;
  text-align: center;
}
#contact-form p.policy a
{
  color: black;
  font-weight: bold;
  transition: .2s;
}
#contact-form p.policy a:hover
{
  color: var(--my-blue);
}



#contact-form button[type="submit"]
{
  font-family: "Poppins", sans-serif;
  
  position: relative;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  width: 230px;

  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  font-size: 20px;
  /* font-family: 'Oranienbaum', serif; */
  padding: 10px;
  border: 3px solid #fff;
  border-radius: 3px;
  background-color: var(--my-blue);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  transition: .2s ease-out;
}

#contact-form button[type="submit"]:hover,
#contact-form button[type="submit"]:hover #hider
{
  background-color: #4980aa;
}

#contact-form button[type="submit"]:active
{
  transform: scale(0.95);
  box-shadow: unset;
}



#contact-form button[type="submit"] .fa-paper-plane
{
  /* transform: rotateZ(45deg); */
  position: relative;
  z-index: 2;
  margin-right: 6px;
}

#contact-form button[type="submit"] .fa-envelope,
#contact-form button[type="submit"] .fa-times
{
  /* transform: rotateZ(45deg); */
  opacity: 0;
  visibility: hidden;
  position: absolute;
  font-size: 30px;
  z-index: 2;
}

#contact-form button[type="submit"] .fa-times
{
  color: red;
}

#contact-form button[type="submit"] #hider
{
  display: inline-block;
  position: absolute;
  left: 0;
  z-index: 1;
  /* background-color: red; */
  background-color: #3A6688;
  width: 80px;
  height: 30px;
  transition: .2s ease-out;
  /* transition: 1s ease-in-out; */
}
#contact-form button[type="submit"] #my-text
{
  position: relative;
  z-index: 0;
}

@keyframes rotation
{
  100%{
    transform: scale(1.2) rotateZ(45deg);
  }
}

@keyframes translation
{
  30%{
    opacity: 1;
  }
  100%
  {
    opacity: 0;
    transform: translateX(200px) rotateZ(45deg);
  }
}

@keyframes grow
{
  100%
  {
    width: 284px;
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes MyFade {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}






.contact .myButton
{
  margin-bottom: 20px;
  justify-self: center;
  grid-column: span 2/4;
  /* width: 315px; */
  padding: 7px 20px;
}

.contact .myButton i
{
  position: relative;
  top: 1px;
  font-size: 27px;
  margin-left: 8px;
  transition: .4s;
}

/* .contact .myButton:hover img
{
  animation: heartBeat 2s linear infinite;
}

.contact .myButton img
{
  animation: none;
} */










@media (max-width: 1300px){
  section.formulaire
  {
    width: 76%;
  }
  
}

@media (max-width: 1010px){
  section.formulaire
  {
    width: 90%;
  }
}


@media (max-width: 800px){
  section.formulaire
  {
    /* display: grid; */
    grid-template-columns: unset;
    grid-template-rows: unset;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .form-env 
  {
    grid-column: unset;
    grid-row: unset;
    display: flex;
    justify-content: center;
    order: 1;
    top: -100px;
    width: 85%;
  }

  .contact 
  {
    grid-column: unset;
    grid-row: unset;
    grid-template-columns: unset;
    grid-template-rows: unset;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .contact h2 
  {
    font-size: 67px !important;
    margin-top: 10px;
    margin-bottom: 0 !important;
    grid-column: unset;
    order: unset !important;
  }

  .contact .me-logo
  {
    margin-top: 40px;
    align-self: unset !important;
  }

  .contact .me-logo, 
  .contact .contact-ref, 
  .contact .contact-socials 
  {
    grid-column: unset;
    justify-self: unset;
  }

  .contact-ref 
  {
    margin-bottom: 20px;
  }
  
  .contact-ref a
  {
    margin: 10px 0;
  }

  .contact-socials 
  {
    margin-bottom: 30px;
  }
  
  .contact-socials a
  {
    margin: 0 10px;
  }

  .contact .myButton 
  {
    margin-bottom: 120px;
    justify-self: unset;
    grid-column: unset;
  }

}

@media (max-width: 500px){

  section.formulaire
  {
    width: 97%;
  }

  .form-env
  {
    width: 95%;
  }

  #contact-form
  {
    padding: 25px;
  }
  
  #contact-form p
  {
    grid-column: span 2;
  }

}

@media (max-width: 440px){
  .contact .myButton
  {
    max-width: 277px;
  }

  .contact .myButton img
  {
    top: -18px;
  }

}

@media (max-width: 360px){
  .myButton
  {
    font-size: 16px;
  }

  .contact .me-logo
  {
    width: 275px;
  }
}