.relation{
  position: relative;
  z-index: 2;
  width: 100vw;
  max-width: 100%;
  margin: 5vw 0;
}

.relation::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 80%;
  background-color: #F5F5F5;
  transform: translate(-50%, -50%);
}

.relation__inner {
  width: calc(100% - 244px);
  max-width: 1200px;
  padding:0 77px 121px 77px;
  background-color: white;
}

.relation__liste{
    gap: 42px;
    align-items: flex-start;
}

.relation__liste__etape{
    position: relative;
    width: 33.33%;
}

.relation__liste__etape__cercle100{
    position: relative;
    width: 100px;
    height: 100px;
    background-color: var(--orange);
    border-radius: 50px;
    position: relative;
    margin-bottom: 50px;
}

.relation__liste__etape__cercle100 img{
    position: absolute;
    top: 25%;
    left: 10px;
    min-width: 35px;
}

.main{
    transform: rotate(-38deg);
}

.relation__liste__etape__cercle100 p{
    position: absolute;
    right: -8px;
    bottom: -8px;
    font-size: 80px;
    font-weight: 400;
    font-family: var(--font2);
    margin: 0;
    line-height: 1;
    max-width: calc(100% - 49px);
}

.relation__liste__etape__texte{
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
}

.relation__liste__etape__plus{
    margin-top: 17px;
    position: relative;
    width: 49px;
    height: 49px;
}

.relation__liste__etape__plus1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 0;
    border: 7px solid var(--beige2);
    background-color: var(--beige2);
    border-radius: 7px;
}

.relation__liste__etape__plus2{
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 50px;
    height: 0;
    border: 7px solid var(--beige2);
    background-color: var(--beige2);
    border-radius: 7px;
}

.relation__liste__etape__texte p{
    width: calc(100% - 69px);
    letter-spacing: 1px;
}

@media (max-width: 1200px) {
  .relation__liste {
    flex-flow: wrap;
  }
  .relation__liste__etape {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .relation__inner {
    width: calc(100% - 120px);
    padding: 0 40px 80px 40px
  }
}

@media (max-width: 400px) {
  .relation__inner {
    width: calc(100% - 80px);
    padding: 0 20px 80px 20px
  }
}