/*------------------------------------------------------------
TITLES
====================================*/

/* Variables Custom */
$title-header-text: $black;
$title-header-size: 34px;
/**************************************/

// Titles
.h1 {
  @extend %h1;
  &.decorate {
    display: inline-block;
    position: relative;
    &:first-letter {
      font-size: ($h1-font-size - 0.2rem);
      color: $primary;
      font-weight: $font-weight-light;
    }
    &:before {
      content: '';
      display: block;
      width: 40px;
      height: 40px;
      position: absolute;
      top: -2px;
      left: -10px;
      z-index: -1;
      background: url('../../media/icons/bg-title.svg');
      background-size: contain;
    }
  }
}
.h2 {
  @extend %h2;
  font-family: $font-family-serif;
  font-weight: $font-weight-bold;
}
.h3 {
  @extend %h3;
  text-transform: uppercase;
  font-family: $font-family-serif;
  font-weight: $font-weight-medium;
  color: $primary;
}
.h4 {
  @extend %h4;
  font-weight: $font-weight-sbold;
}
.h5 {
  @extend %h5;
}
.h6 {
  @extend %h6;
  font-weight: $font-weight-sbold;
}

.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: $display-font-family;
}
.display-1 {
  @extend %display-1;
}
.display-2{
  @extend %display-2;
}
.display-3{
  @extend %display-3;
}
.display-4 {
  @extend %display-4;
}

// Titre header
.title-header-wrapper {
  display: flex;
  margin-bottom: 25px;
  color: $title-header-text;
  align-items: flex-start;

  .icon-pattern-wrapper {
    margin-right: 25px;
  }

  .header-title {
    font-size: $title-header-size;
    line-height: normal;
  }
  .header-subtitle {
    margin-bottom: 0;
  }
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-down(md) {
  // Titre H1 avec décoration
  .h1.decorate {
    &:first-letter {
      font-size: inherit;
    }
    &:before {
      width: 35px;
      height: 35px;
    }
  }
}

@include media-breakpoint-down(sm) {
  // Titre H1 avec décoration
  .h1.decorate {
    &:before {
      width: 30px;
      height: 30px;
      top: -1px;
      left: -7px;
    }
  }
}

@include media-breakpoint-up(md) {
  .title-header-wrapper {
    margin-bottom: 40px;
  }
}
