#home-main{
  flex: 1;
  display: flex;
  width: 100%;
  gap: var(--gap);
  min-height: 0;

  > #left-part{
    
    flex: 1;
    height: 100%;
    display: flex;
    gap: var(--gap);
    flex-direction: column;

    > :first-child{
      height: 56%;
      display: flex;
      gap: var(--gap);

      > :first-child{
        width: 67%;
      }
      > :last-child{
        flex: 1;
      }

    }

    > :last-child{
      flex: 1;
      display: flex;
      gap: var(--gap);

      > :first-child{
        flex: 1;
      }
      > :last-child{
        flex: 1;
      }
    }
  }

  > #right-part{
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    > :first-child{
      flex: 1;
    }

    > :last-child{
      height: 10vh;
      box-sizing: border-box;
    }
  }
}

#libel {
  > div {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: end;
    align-items: start;

    > img {
      height: 60%;
      animation: rotation 7s linear infinite;
    }
  }

  > h1 {
    font-size: 2.7em;
    width: 80%;
  }
}


#picture {
  padding: 0px;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-one);
  }
}

#projects::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge (webkit) */
}

#projects {
  overflow-y: scroll; /* ou auto si tu préfères */
  -ms-overflow-style: none; /* IE et Edge */
  scrollbar-width: none;
  display: flex;
  align-items: center;
  padding: 0px;

  > .accordion-container {
    width: 100%;
    height: 100%;
    background-color: var(--background-color-two);
    border-radius: var(--border-radius-one);
    padding: 0px var(--padding-one) 0px var(--padding-one);
    box-sizing: border-box;

    > .accordion-item {
      border-bottom: 2px solid var(--secondary-color);
      position: relative;

      > .accordion-header {
        padding: 24px 50px 24px 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        transition: all 0.3s ease;
        text-transform: uppercase;

        > .accordion-title {
          color: var(--text-color);
          font-size: 1.3em;
          font-weight: 300;
          letter-spacing: 0.5px;
        }

        > .accordion-arrow {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.3s ease;

          > svg {
            width: 44px;
            height: 44px;
            stroke: var(--text-color);
            stroke-width: 2;
            fill: var(--text-color);
          }
        }
      }

      > .accordion-header.active .accordion-arrow {
        transform: translateY(-50%) rotate(180deg);
      }

      > .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;

        > .accordion-image {
          width: 100%;
          max-height: 270px;
          object-fit: cover;
          border-radius: var(--border-radius-two);
          display: block;
          margin-bottom: var(--padding-one);
        }

        > .accordion-text {
          color: var(--text-color);
          line-height: 1.6;
          font-size: 1.15em;
        }
      }

      > .accordion-content.active {
        max-height: 450px;
        padding-bottom: var(--padding-one);
      }
    }

    > .accordion-item:last-child {
      border-bottom: none;
    }
  }
}

#info {
  min-height: 0;

  > .preview {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-color);
    margin-bottom: 8px;

    > :first-child {
      display: flex;
    }

    > :last-child {
      width: 85%;
      font-size: 1.1em;
      font-weight: 300;
      line-height: 125%;
    }
  }
}

.div-animee {
  transition: width 1.3s ease, height 1.3s ease;
  overflow: hidden;
  z-index: 5 !important;

  > .preview{
    display: none !important;
  }
  
}

.div-animee:hover {
  scale: 1;
}

#contact-link{
  text-decoration: none;
}

#contact {
  height: 100%;
  color: var(--secondary-text-color);
  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--secondary-text-color);
  
  > :first-child {
    display: flex;
    justify-content: space-between;
    pointer-events: visible;
    
    > span {
      width: 30%;
      font-size: 1.1em;
    }
  }
  
  > :last-child {
    font-size: 3em;
    margin-bottom: 8px;
  }
}

#links {
  display: flex;
  justify-content: space-around;
  align-items: center;

  > a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  > a:hover {
    scale: 1.15;
    font-weight: 450;
    color: var(--text-color);
  }
}

#links:has(a:hover) a:not(:hover) {
  color: var(--disabled-text-color);
}

@media  (max-width: 768px) {
  #home-main{
    flex-direction: column;
    height: auto !important;

    > #left-part{
      flex-direction: column;
      height: auto;
      

      > :first-child{
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;

        > #libel{
          width: 100%;
          height: 60vh;

          > div {
            > img {
              height: 50%;
              animation: rotation 7s linear infinite;
            }
          }

          > h1 {
            font-size: 2em;
            width: 90%;
          }
        }

        > #picture{
          width: 100%;
          height: 60vh;
          flex: none;
        }
      }
      > :last-child{
        height: fit-content !important;
        flex-direction: column;
        > #info{
          width: 100%;
          height: 50vh;
          flex: none;
        }
        > #contact-link{
          flex: none !important;
          width: 100%;
          height: 35vh;

          > #contact{

            > :first-child{
              font-size: 1em;
              > span{
                width: 40%;
              }
            }
            > :last-child{
              font-size: 2.5em;
            }
          }

        }
      }
    }

    > #right-part{
      width: 100%;
      height: auto;
      gap: 0px;
      > #projects{
        margin-bottom: var(--margin);
      }

      > #links{
        margin-bottom: var(--margin);
      }
    }
  }


  @media  (max-height: 768px) {
    #info{
      height: 60vh !important;
    }

    #contact-link{
      height: 40vh !important;
    }
  }

  @media (min-height: 900px){
    #libel{
      height: 50vh !important;
    }
    #info{
      height: 40vh !important;
    }

    #contact-link{
      height: 30vh !important;
    }
  }
}