// couple label input
.form_field_wrapper {
  display: block;
  position: relative;
  margin-top: var(--dt-form_field_wrapper-margin_top);

  // Par défaut le couple label/input sont les uns en dessous des autres
  textarea,
  input {
    display: block;
    margin: 0;
  }

  // Text en gris pour donner des détails sur le label
  // vient strictement après le label
  label ~ .label_complement {
    display: inline-block;
    font-weight: normal;
    width: auto;
    color: var(--dt-form_field_wrapper-label_complement-color);
  }

  label {
    font-size: var(--dt-form_field_wrapper-label-font_size);
    line-height: var(--dt-form_field_wrapper-label-line_height);
    font-weight: normal;
    margin: 0;
    width: auto;
    padding-right: var(--dt-form_field_wrapper-label-space_with_complement_label);

    &[for] {
      cursor: pointer;
    }
  }

  // TODO : à revoir
  .field_error {
    color: var(--dt-form_field_wrapper-field_error-color);
    margin-top: var(--dt-form_field_wrapper-field_error-margin_top);
  }
  // Permettant aux listes comme les checkbox et les radio boutons de bien s'aligner
  ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: column;
    margin: 0;
    list-style: none;
  }

  li {
    padding: 0;
  }

}