.intern {
  margin-bottom: 50px;
  min-height: 40vh;
  margin: 0 auto 50px;
  .row:not([data-lt-tmp-id]) {
    display: flex;;
    margin: 50px auto;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    &.bloc-CENTER {
      flex-direction: column;
      align-items: center;
      .bloc-intern {
        margin-left: 0;
        margin-bottom: 25px;
      }
    }
    &.bloc-FULLWIDTH {
      flex-direction: column;
      align-items: center;
      .bloc-intern {
        margin-left: 0;
        max-width: none;
        &.image {
          flex-direction: column;
          .image-intern {
            max-width: none;
            width: 100%
          }
        }
      }
    }
    &.bloc-LEFT {
      @media screen and ( max-width: 670px ) {
        flex-direction: column-reverse;
      }
    }
    &.bloc-single {
      padding: 0;
      .bloc-intern {
        max-width: 100%;
        padding: 0;
        h2, h3, p {
          max-width: 800px;
        }
        h2 {
          font-size: 24px;
          font-weight: 500;
        }
        h3 {
          font-weight: normal;
        }
      }
    }
    &:first-child {
      margin-top: 0;
    }
    &:has(.full-bg) {
      padding: 50px 0 0px;
      width: 100%;
      margin-bottom: 100px;
      max-width: none;
      position: relative;
      & > .bloc-intern {
        max-width: 950px;
        width: 100%;
      }
      & > .bloc-intern {
        margin: auto;
      }
      .row:has( .bloc-project ) {
        gap: 20px;
      }
      #projets {
        margin-top: -180px;
        padding-top: 180px;
      }
      .bloc-project {
        background: rgb(251 190 108 / 50%);
        border: 2px solid white;
        border-radius: 5px;
        padding: 10px;
      }
      &:after {
        content: "";
        width: 100%;
        height: 150%;
        background: linear-gradient(165deg, #fba83c -21%, transparent 54%);
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
      }
      @media (max-width: 768px) {
        padding: 50px 10px 0px;
      }
    }
    .timeline {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      position: relative;
      row-gap: 20px;
      padding: 30px 0;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0%;
        width: 4px;
        height: 100%;
        background-color: #fff;
        background: linear-gradient(transparent 4%, white 8%, white 92%, transparent 98%);
      }
      li {
        position: relative;
        margin: 0 0 0 25px;
        width: 50%;
        counter-increment: timeline-counter;
        &::before {
          content: counter(timeline-counter);
          position: absolute;
          top: 50%;
          left: -31px;
          transform: translate(0%, -50%);
          width: 16px;
          height: 16px;
          background: var(--front-primary);
          border-radius: 50%;
          z-index: 1;
          box-shadow: none;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.9em;
          color: black;
          border-radius: 50%;
        }
      }
    }
    &:has(.full) {
      background-image: url("../../../images/background-full.jpg");
      background-size: cover;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 4px;
      max-width: 950px;
      &::before {
        content: "";
        background-image: url("../../../images/cube-group.png");
        width: 188px;
        height: 195px;
        position: absolute;
        left: -120px;
        bottom: 0;
        z-index: -1;
        animation: MoveUpDown 50s linear infinite;
        will-change: transform;
      }
      &::after {
        content: "";
        background-image: url("../../../images/cube-group-2.png");
        width: 133px;
        height: 133px;
        position: absolute;
        right: -80px;
        top: 0;
        z-index: 1;
        animation: MoveDownUp 30s linear infinite;
        will-change: transform;
        @media (max-width: 768px) {
          display: none;
        }
      }
      h2, h3, p {
        color: black;
      }
      .bloc-intern {
        margin: 0 auto;
      }
    }
    @media (max-width: 768px) {
      flex-direction: column-reverse;
      flex-wrap: wrap;
      &.bloc-RIGHT {
        flex-direction: column;
      }
      & > div {
        width: 100%;
      }
    }
    @media screen and ( max-width: 670px ) {
      flex-direction: column;
    }
  }
}

.bloc-intern {
  width: auto;
  max-width: 680px;
  opacity: 0;
  animation: FadeIn linear .5s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  &:first-child {
    margin-right: 75px;
  }
  h2:first-child, h3:first-child {
    margin-top: 0;
  }
  &.image {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 500px;
    .image-intern {
      margin: 0;
      margin-right: 10px;
      max-width: 500px;
      img {
        width: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    @media screen and ( max-width: 768px ) {
      flex-wrap: wrap;
      flex-direction: column;
    }
  }
}
.title-intern {
  @media screen and ( max-width: 670px ) {
    margin: 15px;
  }
}
.search_choose.navbar-interne {
  position: relative;
  box-shadow: none;
  margin: 20px 0;
  background: transparent;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
  padding-left: 1.6666666667%;
  padding-right: 1.6666666667%;
  & > figure {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 0;
    margin-bottom: 20px;
    img {
      width: auto;
      height: 100%;
    }
  }
  @media (max-width: 768px) {
    & > figure {
      width: 100%;
      height: 300px;
    }
  }
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-100px) rotate(45deg);
  }
}

@keyframes MoveDownUp {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(100px) rotate(45deg);
  }
}