// Par défaut le background à une couleur
.section {
  background: var(--dt-section-background_color);
  padding: var(--dt-section-padding-mobile);
  @media (min-width: $media-query-min-width) {
    padding: var(--dt-section-padding-desktop);
  }

  // Modifier qui permet de supprimer le background
  &.--section_no_background {
    background: var(--dt-section_content-background_color);
  }

  // Modifier qui permet de supprimer le padding
  &.--section_no_padding {
    padding: 0;
  }

  // Séparation lorsque 2 sections se suivent
  & ~ .section {
    margin-top: var(--dt-base-grid)
  }

  // Lorsque les fieldset s'enchainent dans une section
  fieldset {
    margin-top: var(--dt-section-fieldset-margin_top);
    // le premier n'a pas de marge haute (c'est la section qui a ce job)
    &:first-child {
      margin-top: 0;
    }
  }
}

.title-section {
  margin: 0;
  position: relative;
  padding: var(--dt-section-title-padding-mobile);
  @media (min-width: $media-query-min-width) {
    padding: var(--dt-section-title-padding-desktop);
  }

  // UNDERLINE
  &:after {
    content: "";
    position: absolute;
    width: var(--dt-section-title_underline-width);
    height: calc(var(--dt-base-grid, 8px) / 2);
    left: 0;
    bottom: 0;
    background-color: var(--dt-section-title_underline-background_color)
  }
}

.title-subsection {
  padding: var(--dt-subsection-title-padding);
  border-bottom: solid var(--dt-subsection-title-border_size) var(--dt-font-color_main);
}