/* FONT FACE */
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Regular.otf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Bold.otf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Black.otf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Medium.otf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Light.otf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Goldplay Alt";
  src: url("../fonts/Goldplay/Goldplay Alt Italic.otf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
/* VARIABLES */
/*--------------------------------------------------------------
CONTACT
--------------------------------------------------------------*/
.hero {
  text-align: left;
}
.hero .image {
  max-width: 16rem;
  border-radius: 50%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero .image img {
  border-radius: 50%;
}
.hero__contact {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}
.hero__contact svg {
  width: 1.25rem;
  height: 1.25rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 0.5rem;
}
@media (min-width: 1170px) {
  .hero .image {
    max-width: 22rem;
  }
}

/*--------------------------------------------------------------
FORMULAIRE DE CONTACT
--------------------------------------------------------------*/
.formulaire {
  position: relative;
  z-index: 0;
}
.formulaire__carte {
  position: relative;
  background-color: #C4DFE0;
  border-radius: 18px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
}
@media (min-width: 1170px) {
  .formulaire__carte {
    padding: 3rem 4rem;
  }
}
.formulaire__carte::before {
  content: "";
  position: absolute;
  top: -3rem;
  left: -2rem;
  width: 6rem;
  height: 6rem;
  background: url("../img/fleur1-orange.svg") no-repeat center/contain;
  z-index: 1;
}
@media (min-width: 1170px) {
  .formulaire__carte::before {
    top: -4rem;
    left: -3rem;
    width: 8rem;
    height: 8rem;
  }
}
.formulaire__carte::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  right: -1.5rem;
  width: 5rem;
  height: 5rem;
  background: url("../img/fleur2-jaune.svg") no-repeat center/contain;
  z-index: 1;
}
@media (min-width: 1170px) {
  .formulaire__carte::after {
    bottom: -4rem;
    right: -2rem;
    width: 7rem;
    height: 7rem;
  }
}
.formulaire__titre {
  margin-bottom: 1.5rem;
}
.formulaire__titre::after {
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
}