.field {
  position: relative;
  margin: 1rem 0;
}

/*.field textarea {
  width: 100%;
  padding: 14px 12px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  outline: none;
}*/

.field label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #999;
  pointer-events: none;
  transition: all 0.1s ease;
    font-style: italic;
}

/* Quand le champ est focus OU non vide */
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: -10px;
  transform: translateY(0);
  font-size: 0.75rem;
  color: rgb(19, 40, 126) !important; /* couleur accent */
    
}
/* Quand le champ est focus OU non vide */
.field select:focus + label,
.field select:not(:placeholder-shown) + label {
  top: -15px;
  transform: translateY(0);
  font-size: 0.75rem;
  color: rgb(19, 40, 126) !important; /* couleur accent */
    
}
.field select:focus {
  border-color: rgb(19, 40, 126) !important;
    border-bottom: 2px solid rgb(19, 40, 126) !important;
}

field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: -20px;
  transform: translateY(0);
  font-size: 0.75rem;
  color: rgb(19, 40, 126) !important; /* couleur accent */

}
.field textarea:focus {
  border-color: rgb(19, 40, 126) !important;
    border-bottom: 2px solid rgb(19, 40, 126) !important;
}
/* Bordure colorée au focus */
.field input:focus {
  border-color: rgb(19, 40, 126) !important;
    border-bottom: 2px solid rgb(19, 40, 126) !important;
}