.no-2d {
  display: none;
}

// main.main à supprimer quand on aura ajouter la classe container sur mes applis
.container,
main.main {
  max-width: 1700px;
  padding: 20px;
  margin: 0 auto;
}

@include media-breakpoint-down(sm) {
  main.main {
    padding: 15px;
  }
}

.pe-none {
  pointer-events: none;
}

// Hack for multiline ellipsis
.text-truncate {
  &.text-truncate--2 {
    display: box !important;
    -webkit-line-clamp: 2;
    box-orient: vertical;
    white-space: normal;
  }

  &.text-truncate--3 {
    display: box !important;
    -webkit-line-clamp: 3;
    box-orient: vertical;
    white-space: normal;
  }
}

help {
  font-size: 1.6rem;
  line-height: normal;
  color: black;

  i {
    color: $white !important;
  }

  p {
    margin: 1rem 0;
    color: black;
  }

  section.lightbox {
    z-index: 10002;

    div.content {
      width: 920px;
    }
  }

  .burger-button {
    display: none;
  }

  #TOC {
    float: left;
    width: 20%;
    margin-right: 5%;

    ul {
      border-left: 5px solid #ff8500;

      li {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;

        a {
          color: $secondary;

          &:hover {
            color: $primary;
          }
        }
      }
    }
  }

  img {
    max-width: 100%;
  }

  section.lightbox>div.content div.section {
    width: 70%;
    margin-left: 25%;

    h2 {
      width: 100%;
      margin-bottom: 2rem;
      color: $secondary;
    }
  }
}

@include media-breakpoint-down(sm) {
  help {
    #TOC {
      float: none;
      width: auto;
      margin: 2rem;

      ul {
        position: absolute;
        display: none;
        margin-top: 4rem;
        margin-left: -2rem;
        background-color: white;
        box-shadow: .1rem .1rem 1rem rgba(0, 0, 0, .25);
      }

      ul li {
        padding: 1.5rem;
        margin: 0;
        margin-left: -4rem;
        border-bottom: .1rem solid #ddd;

        &:hover {
          background-color: $orange;

          a {
            color: $white;
          }
        }
      }
    }

    .burger-button {
      position: absolute;
      display: block;
      width: 40px;
      height: 40px;
      padding: 0;
      line-height: 40px;
      color: $white;
      text-align: center;
      cursor: pointer;
      background-color: $orange;
      border: none;
      border-radius: $border-radius;

      .burger-icon {
        font-family: "generic-icons";
        font-style: normal;

        &::before {
          content: "\e956";
        }
      }
    }

    .burger-menu.active #TOC ul {
      display: block;
    }

    section.lightbox>div.content div.section {
      width: auto;
      margin: 25px 0 0;

      h2 {
        width: auto;
        margin-left: 50px;
      }
    }
  }
}

.main-content {
  background-color: $white;
}

@include media-breakpoint-down(lg) {
  .container {
    padding: 0;
  }
}

/* a {
  @extend .transition-hover-fast;
} */

/* @include media-breakpoint-down(md) {
  .container {
    // padding: 0;
  }
} */

//Note Julien => Cette propriété générique provoque des effet de bord
//Je suggère de l'appliquer sur la couleur uniquement
/* a {
  //@extend .transition-hover-fast;
  //@include add-transitions(color);
} */