.banner-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 46.9vw;
  margin: 0;
  overflow: hidden;
  background-image: url("../img/Banner_Contact.jpg");
  background-position: center;
  background-size: cover;
  font-family: "TradeGothicLTBoldCondensed", sans-serif;
}

.banner-wrapper > span {
  font-size: 7.6vw;
  letter-spacing: -0.4vw;
  z-index: 6;
}

.contact-wrapper {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 10vw;
  right: 10vw;
  color: #00bac0;
  font-family: "TradeGothicLTBoldCondensed", sans-serif;
  font-size: 1.5vw;
  letter-spacing: -0.05vw;
  z-index: 6;
}

.contact-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.8vw;
}

.contact-div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30vw;
}

.contact-div > * {
  margin: 0;
}

.contact-div > img {
  height: 2.5vw;
  margin-bottom: 1vw;
}

.newsletter-form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5vw;
  margin-bottom: 3vw;
}

.newsletter-form {
  all: initial;
  position: relative;
  display: flex;
  margin-left: 0.8vw;
}

.newsletter-input {
  background-color: transparent;
  width: 10vw;
  color: white;
  text-align: center;
  border: none;
  margin-top: 0.2vw;
  margin-right: 0.8vw;
  border-bottom: white solid 0.2vw;
  outline: none !important;
  font-family: "TradeGothicLTBoldCondensed", sans-serif;
  font-size: 1.5vw;
  letter-spacing: -0.05vw;
}

.newsletter-input::placeholder {
  color: white;
}

.newsletter-button {
  background-color: #00bac0;
  color: white;
  text-align: center;
  width: 9vw;
  height: 2.5vw;
  border: none;
  cursor: pointer;
  transition: background-color ease-in-out 150ms;
  font-family: "TradeGothicLTBoldCondensed", sans-serif;
  font-size: 1.5vw;
  letter-spacing: -0.05vw;
}

.newsletter-button:hover {
  background-color: #02d6dd;
}

.newsletter-button:active {
  background-color: #01e8f0;
}

.newsletter-checkbox-wrapper {
  position: absolute;
  bottom: -2vw;
  left: 0;
}

.newsletter-checkbox {
  /* Cache la checkbox sans
	   la rendre invisible aux
	   lecteurs d'écran */
  position: absolute;
  left: 0;
  opacity: 0.01;
}

/* Preparer le label */
.newsletter-checkbox + label {
  position: relative; /* permet de positionner la checkbox */
  padding-left: 1.5vw; /* place pour la box */
  color: #00bac0;
  font-family: "TradeGothicLTBoldCondensed", sans-serif;
  font-size: 1vw;
  cursor: pointer;
  user-select: none;
}

/* Aspect de la case */
.newsletter-checkbox + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.8vw;
  height: 0.8vw;
  border: 0.15vw solid #00bac0;
  transition: all 0.275s;
}

/* Aspect de la coche */
.newsletter-checkbox + label::after {
  content: "✓";
  speak: never; /* Pour être sûr que le lecteur d'écran ne lira pas "fois" */
  position: absolute;
  top: 0.55vw;
  left: 0.2vw;
  font-size: 0.8vw;
  color: #00bac0;
  line-height: 0;
  transition: all 0.2s;
}

/* Aspect non cochée */
.newsletter-checkbox:not(:checked) + label::after {
  opacity: 0;
  transform: scale(0) rotate(45deg);
}

/* Aspect cochée */
.newsletter-checkbox:checked + label::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.deco-container {
  height: 55vw;
}

.quartCircle {
  position: absolute;
  width: 58vw;
  z-index: 3;
  user-select: none;
}

.quartCircle1 {
  top: -28vw;
  left: -10.5vw;
}

.quartCircle2 {
  top: -2.5vw;
  right: -26.5vw;
  transform: rotate(180deg);
}