form {
  background-color: white;
  width: 42%;
  padding: 42px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

form h2 {
  margin-bottom: 0px;
}

.champ-input {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: end;
}

input, select {
  padding: 6px 10px;
  border: 2px solid var(--gris);
  border-radius: 2px;
  color: var(--bleu);
  font-weight: 500;
  width: 100%;
}

input::placeholder {
  color: var(--gris);
}

label {
  font-weight: 500;
  color: black;
}

input:focus, select:focus {
  color: var(--orange);
  border-color: var(--orange);
  outline:  none;
}

input:active {
  color: var(--bleu);
}

select {
  background-image: url("/icons/Icon_Fleche-sous-menu_Noir.svg");
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 96%;
  appearance: none;
  background-size: 12px;
  background-color: transparent !important;
}

.erreur {
  margin-bottom: 0px;
}

 input.erreur {
  border: 1px solid var(--rouge) !important;
  color: var(--rouge) !important;
}

 .icon-erreur {
  position: absolute;
  margin-right: 10px;
}

#checkbox-1 {
  width: auto !important;
}

.champ.checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bouton-envoi {
  margin-top: 10px;
}

/* erreurs */
input.erreur, .submit.erreurs {
  border: 1px solid red !important;
  color: red !important;
}

p.erreur {
  color: white;
  margin-bottom: 0px;
  background-color: red;
  border-radius: 4px;
  padding: 10px;
}


.submit.erreurs {
  pointer-events: none;
}

.submit.erreurs:hover {
  cursor: not-allowed !important;
}