:root {
  // FORM
  // ----------------------
  // Fieldset et formulaire dans une section
  --dt-section-form_content-max_width: 640px;

  // ELEMENT CREE CAR SURCHARGE NECESSAIRE EN INTRANET
  --dt-choice_button-display-default: flex;
  --dt-choice_button-ul-display-default: flex;
  --dt-choice_button-button-box-shadow: 0 0 0 1px var(--dt-choice_button-button-border-color-hover) inset;
  --dt-choice_button-button-border-radius-default: 0;
  --dt-choice_button-button-check-border-bottom-default: var(--dt-choice_button-button-check-line-width-default) solid var(--dt-choice_button-button-check-color-default);
  --dt-choice_button-button-check-border-left-default: var(--dt-choice_button-button-check-line-width-default) solid var(--dt-choice_button-button-check-color-default);
  --dt-choice_button-button-check-border-top-default: none;
  --dt-choice_button-button-check-border-right-default: none;
  --dt-choice_button-button-check-border-radius-default: 0;
  --dt-choice_button-button-check-line-width-checked: 2px;
  --dt-choice_button-button-check-border-bottom-checked: var(--dt-choice_button-button-check-line-width-checked) solid var(--dt-choice_button-button-check-color-default);
  --dt-choice_button-button-check-border-left-checked: var(--dt-choice_button-button-check-line-width-checked) solid var(--dt-choice_button-button-check-color-default);
  --dt-choice_button-button-check-border-top-checked: none;
  --dt-choice_button-button-check-border-right-checked: none;
  --dt-choice_button-button-check-background-color-checked:var(--dt-choice_button-button-check-background-color-default);
  --dt-choice_button-button-check-transform-default: rotateZ(-45deg);

  // FORM_FIELD_WRAPPER
  // -----------------------

  --dt-form_field_wrapper-margin_top: var(--dt-space-03);


  // LABEL
  // --------------

  --dt-form_field_wrapper-label-font_size: var(--dt-font_size-base);
  --dt-form_field_wrapper-label-line_height: 125%;
  --dt-form_field_wrapper-label-line_height-factor: 1.25;


  // LABEL_COMPLEMENT (texte complémentaire du label)
  // ---------------------------------------------------

  --dt-form_field_wrapper-label_complement-color: var(--dt-font-color_main-very_light);
  --dt-form_field_wrapper-label-space_with_complement_label: var(--dt-space-01);


  // TEXTAREA
  // ------------------------------

  --dt-textarea-max_height: 10em;


  // INPUT
  // ------------------------------

  --dt-input-max_width-default: 20rem;
  --dt-input-width-full: 100%;
  --dt-input-padding: var(--dt-space-01);
  --dt-input-margin: var(--dt-space-01) 0 0;
  --dt-input-background_color-default: var(--dt-body-background_color);
  --dt-input-text-font_size: var(--dt-font_size-default);
  --dt-input-text-font_family: var(--dt-font_family-main);
  --dt-input-color-default: var(--dt-font-color_main);
  --dt-input-border: none;
  --dt-input-border_color-default: var(--dt-font-color_main-ligth);
  --dt-input-border_width-default: 1px;
  --dt-input-outline: none;

  // HOVER
  --dt-input-color-hover: var(--dt-input-border_color-hover);
  --dt-input-border_width-hover: 2px;
  --dt-input-border_width-focus: 2px;
  --dt-input-border_color-hover: var(--dt-color-secondary);
  --dt-input-border_color-focus: var(--dt-color-secondary);

  // TEXT with SYMBOL
  --dt-input-symbol-background_color: var(--dt-background_color-grey);

  // SELECT (.input_select)
  --dt-input_select-padding: 0 0.5rem 0 0;

  // ROLE GROUP (commun au checkbox et radio bouton)
  // ---------------------------

  --dt-input_role_groupe-margin: var(--dt-space-01) 0 0;

  // INPUT - CHECKBOX
  // ---------------------------
  --dt-input_checkbox-space_between_checkbox_and_label_plus_checkbox: calc(var(--dt-font_size-base) + var(--dt-space-01));
  --dt-input_checkbox-border_width: 1px;
  --dt-input_checkbox-label-padding_top_bottom-desktop: var(--dt-space-01);
  --dt-input_checkbox-label-padding_top_bottom-mobile: var(--dt-space-02);

  --dt-input_checkbox-label-padding-desktop: var(--dt-input_checkbox-label-padding_top_bottom-desktop) 0 var(--dt-input_checkbox-label-padding_top_bottom-desktop) var(--dt-input_checkbox-space_between_checkbox_and_label_plus_checkbox);
  --dt-input_checkbox-label-padding-mobile: var(--dt-input_checkbox-label-padding_top_bottom-mobile) 0 var(--dt-input_checkbox-label-padding_top_bottom-mobile) var(--dt-input_checkbox-space_between_checkbox_and_label_plus_checkbox);

  --dt-input_checkbox-square: var(--dt-font_size-base);
  --dt-input_checkbox-background_color: var(--dt-input-background_color-default);
  --dt-input_checkbox-border_color-default: var(--dt-input-border_color-default);

  // Fond
  --dt-input_checkbox-fond-distance_top-desktop: calc( (var(--dt-font_size-base) * var(--dt-form_field_wrapper-label-line_height-factor) + (var(--dt-input_checkbox-label-padding_top_bottom-desktop) * 2)) / 2 - (var(--dt-input_checkbox-square) /2) );
  --dt-input_checkbox-fond-distance_top-mobile: calc( (var(--dt-font_size-base) * var(--dt-form_field_wrapper-label-line_height-factor) + (var(--dt-input_checkbox-label-padding_top_bottom-mobile) * 2)) / 2 - (var(--dt-input_checkbox-square) /2) );
  --dt-input_checkbox-fond-distance_left: 0px;

  // Check
  --dt-input_checkbox-check-distance_top-desktop: calc(var(--dt-input_checkbox-fond-distance_top-desktop) + var(--dt-input_radio-space_between_border_and_point));
  --dt-input_checkbox-check-distance_top-mobile: calc(var(--dt-input_checkbox-fond-distance_top-mobile) + var(--dt-input_radio-space_between_border_and_point));
  --dt-input_checkbox-check-distance_left: var(--dt-input_checkbox-border_width);

  --dt-input_checkbox-check-color-default: var(--dt-input_checkbox-border_color-hover);
  --dt-input_checkbox-check-line_width-default: 2px;
  --dt-input_checkbox-check-line_left-default: calc((var(--dt-input_checkbox-square) - (var(--dt-input_checkbox-border_width) * 2)) / 3);
  --dt-input_checkbox-check-line_right-default: calc(var(--dt-input_checkbox-square) - (var(--dt-input_checkbox-border_width) * 2));

  // HOVER
  --dt-input_checkbox-check-line_width-hover: 2px;
  --dt-input_checkbox-border_color-hover: var(--dt-input-border_color-hover);
  --dt-input_checkbox-opacity-hover: 0;

  // CHECKED
  --dt-input_checkbox-border_color-checked: var(--dt-input-border_color-hover);


  // INPUT - RADIO
  // ---------------------------------

  --dt-input_radio-space_between_button_and_label_plus_button: calc(var(--dt-input_radio-fond-square) + var(--dt-space-01));
  --dt-input_radio-padding_top_bottom-desktop: var(--dt-space-01);
  --dt-input_radio-padding_top_bottom-mobile: var(--dt-space-02);
  --dt-input_radio-padding-desktop: var(--dt-input_radio-padding_top_bottom-desktop) 0 var(--dt-input_radio-padding_top_bottom-desktop) var(--dt-input_radio-space_between_button_and_label_plus_button);
  --dt-input_radio-padding-mobile: var(--dt-input_radio-padding_top_bottom-mobile) 0 var(--dt-input_radio-padding_top_bottom-mobile) var(--dt-input_radio-space_between_button_and_label_plus_button);

  // fond
  --dt-input_radio-fond-distance_top-desktop: calc( (var(--dt-font_size-base) * var(--dt-form_field_wrapper-label-line_height-factor) + (var(--dt-input_radio-padding_top_bottom-desktop) * 2)) / 2 - (var(--dt-input_radio-fond-square) /2) );
  --dt-input_radio-fond-distance_top-mobile:  calc( (var(--dt-font_size-base) * var(--dt-form_field_wrapper-label-line_height-factor) + (var(--dt-input_radio-padding_top_bottom-mobile) * 2)) / 2 - (var(--dt-input_radio-fond-square) /2) );
  --dt-input_radio-fond-distance_left: 0px;
  --dt-input_radio-fond-square: var(--dt-font_size-base);
  --dt-input_radio-fond-background_color-default: var(--dt-input-background_color-default);
  --dt-input_radio-fond-border_color-default: var(--dt-input-border_color-default);
  --dt-input_radio-fond-border_width-default: var(--dt-input-border_width-default);
  // HOVER
  --dt-input_radio-fond-border_color-hover: var(--dt-color-secondary);
  --dt-input_radio-fond-background_color-hover: var(--dt-input-background_color-default);
  --dt-input_radio-fond-border_width-hover: 2px;
  // SELECTED
  --dt-input_radio-fond-border_color-selected: var(--dt-color-secondary);

  // point
  --dt-input_radio-point-square: calc(var(--dt-input_radio-fond-square) / 2);
  --dt-input_radio-space_between_border_and_point: calc(var(--dt-input_radio-point-square) / 2);
  --dt-input_radio-point-distance_top-desktop: calc(var(--dt-input_radio-fond-distance_top-desktop) + var(--dt-input_radio-space_between_border_and_point));
  --dt-input_radio-point-distance_top-mobile: calc(var(--dt-input_radio-fond-distance_top-mobile) + var(--dt-input_radio-space_between_border_and_point));
  --dt-input_radio-point-distance_left: calc(var(--dt-input_radio-fond-distance_left) + var(--dt-input_radio-space_between_border_and_point));
  // HOVER
  --dt-input_radio-point-background_color-hover: transparent;
  // SELECTED
  --dt-input_radio-point-background_color-selected: var(--dt-color-secondary);


  //  CHOICE_BUTTON - INPUT RADIO|CHECKBOX
  // ---------------------------------------

  // Spacing
  --dt-choice_radio-li-padding: var(--dt-space-01) 0;
  --dt-choice_button-space-beetween-buttons: var(--dt-space-02);
  --dt-choice_button-space-beetween-check-and-text: var(--dt-space-01);

  // Check Design
  --dt-choice_button-button-check-color-default: var(--dt-choice_button-button-text-color-checked);
  --dt-choice_button-button-check-line-width-default: 2px;
  --dt-choice_button-button-check-line-right-default: calc(var(--dt-form_field_wrapper-label-font_size) * var(--dt-form_field_wrapper-label-line_height-factor));
  --dt-choice_button-button-check-line-left-default: calc(var(--dt-choice_button-button-check-line-right-default) / 2);
  --dt-choice_button-button-check-line-trick-for-alignement: 3px;

  // NEW
  --dt-choice-button-button-display-default: none;
  --dt-choice-button-button-visibility-default: hidden;
  --dt-choice_button-button-check-background-color-default: var(--dt-choice_button-button-background-color-checked);
  --dt-choice_button-button-check-border-color-default: transparent;
  --dt-choice_button-button-check-border-color-checked: transparent;

  // DEFAULT
  --dt-choice_button-button-padding-top-bottom-default: var(--dt-space-01);
  --dt-choice_button-button-padding-side-default: var(--dt-space-03);
  --dt-choice_button-button-text-color-default: var(--dt-font-color_main);
  --dt-choice_button-button-border-color-default: var(--dt-font-color_main);
  --dt-choice_button-button-background-color-default: var(--dt-input-background_color-default);
  // HOVER
  --dt-choice_button-button-text-color-hover: var(--dt-choice_button-button-text-color-default);
  --dt-choice_button-button-border-color-hover: var(--dt-color-secondary);
  --dt-choice_button-button-background-color-hover: var(--dt-color-secondary);
  // CHECKED
  --dt-choice_button-button-padding-top-bottom-checked: var(--dt-space-01);
  --dt-choice_button-button-padding-side-checked: var(--dt-space-02);
  --dt-choice_button-button-text-color-checked: var(--dt-choice_button-button-background-color-default);
  --dt-choice_button-button-border-color-checked: var(--dt-choice_button-button-border-color-hover);
  --dt-choice_button-button-background-color-checked: var(--dt-choice_button-button-background-color-hover);


  // FIELD_ERROR (erreur s'affichant en dessous des champs)
  // ------------------------------------------------------------
  --dt-form_field_wrapper-ng_error-font_size: 0.875rem;
  --dt-form_field_wrapper-ng_error-line_height: 1rem;
  --dt-form_field_wrapper-ng_error-error_before-icone_fa-font-size: var(--dt-form_field_wrapper-ng_error-font_size);

  --dt-form_field_wrapper-ng_error-color: var(--dt-color-danger);
  --dt-form_field_wrapper-ng_error-margin: var(--dt-space-01) 0 0 0;

  // INPUT (ERROR)
  --dt-input-border_color-error_default: var(--dt-color-danger);
  --dt-input-border_width-error_default: 2px;
  // INPUT (ERROR -- HOVER)
  --dt-input-border_color-error_hover: var(--dt-color-secondary);
  --dt-input-border_width-error_hover: 4px;

  // CHAMPS DE DATE
  // ------------------------------------------------------------
  --dt-input_date-jour-width: calc(((8 * 2 + 40) / var(--dt-font_size-default-calc)) * 1rem);
  --dt-input_date-mois-width: calc(((8 * 2 + 40) / var(--dt-font_size-default-calc)) * 1rem);
  --dt-input_date-annee-width: calc(((8 * 4 + 40) / var(--dt-font_size-default-calc)) * 1rem);

  // SPACING
  --dt-form-space-between-label-input: var(--dt-space-01);
}