body {
  color: var(--cae-color-text);

  &>div.main {
    height: calc(100vh - var(--cae-height-mainmenu));

    &>div.workarea {
      height: 100%;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;

      &>div.panel {

        position: relative;

        &.mandatory-scroll-snapping {
          scroll-snap-align: start;
        }

        &.mandatory-scroll-snapping-end {
          scroll-snap-align: end;
        }

        >.background {
          position: absolute;
        }

        >.content {
          height: 100%;
        }

        &#panel1, &#panel2, &#panel3, &#panel4, &#panel5, &#panel6, &#panel7 {
          display: flex;
          --display: none !important;
        }

        &#panel1 {

          @media(width <=576px) {
            &>canvas {
              transform: scaleX(2) translateX(-25%);
            }
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            z-index: 1;
            position: relative;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            .arrow-below {
              position: absolute;
              bottom: 3em;
              width: 100%;
              text-align: center;
              color: white;

            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .left {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 80%;


                .title {
                  font-weight: 500;
                  font-size: 3.125em;
                }

                .content {
                  font-weight: 400;
                  font-size: 1.5625em;
                  text-align: justify;
                }

                .bottom {
                  display: flex;
                  gap: 1em;
                  flex-wrap: wrap;

                  .sep {
                    margin: auto 0.5em auto 1em;
                  }

                  button.noborder {
                    min-width: auto;
                  }
                }
              }
            }

            .right {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-right: 1em;

                .circle {
                  border-radius: 50%;
                  height: 100%;
                  width: 100%;

                  object, svg {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }

          }

          @media(width <=576px) {

            height: max(691px, calc(100vh - var(--cae-height-mainmenu)));

            >.content {
              flex-direction: column-reverse;
              gap: 1em;

              .horizontal-part {
                width: 100%;

                .boundary {
                  margin: 1em 0 0 0;
                  width: 80%;
                }
              }

              .arrow-below {
                display: none;
              }

              .left {
                align-items: center;

                .bloc {
                  align-items: center;
                  gap: 1em;

                  .title {
                    text-align: center;
                    font-size: 1.875em;
                  }

                  .content {
                    text-align: center;
                    font-size: 1.25em;
                  }

                  .bottom {
                    margin-bottom: 1em;
                    justify-content: center;

                    .sep {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }

        &#panel2 {

          background-color: var(--cae-color-background-blue);

          @media(width <=1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          --animspeed: 1.5s;

          [class*="triggered-"] {
            visibility: hidden;
          }

          >.content {
            position: relative;

            display: flex;
            flex-direction: column;
            gap: 0;
            width: 100%;
            display: flex;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            --title-height: 6em;

            .arrow-below {
              position: absolute;
              bottom: 3em;
              width: 100%;
              text-align: center;
              color: white;

            }

            .vertical-part {
              display: flex;
              flex-direction: column;
              margin: 0.625em;

              &.top {
                width: 100%;
                font-size: 1.875em;
                font-weight: 500;
                color: var(--cae-color-violet);
                align-items: center;
                justify-content: center;
                height: var(--title-height);
                text-align: center;

                span {
                  font-weight: 400;
                  font-size: 0.8em;
                }
              }

              &.bottom {

                height: calc(100vh - var(--cae-height-mainmenu) - var(--title-height));

                display: flex;
                flex-direction: row;
                gap: 2em;

                .horizontal-part {

                  display: flex;
                  align-items: center;
                  justify-content: center;


                  &.left {
                    flex: 2 1 0;

                    .boundary {
                      .circle {
                        --radius: 600px;
                        display: flex;
                        position: relative;
                        max-width: var(--radius);
                        max-height: var(--radius);

                        object, svg {
                          width: 100%;
                          height: 100%;
                        }

                        svg#digital_hub_2_customers {


                          .slide-down-amort {
                            -webkit-animation: slide-down-amort 2s ease-out both;
                            animation: slide-down-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .slide-up-amort {
                            -webkit-animation: slide-up-amort 2s ease-out both;
                            animation: slide-up-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .slide-left-amort {
                            -webkit-animation: slide-left-amort 2s ease-out both;
                            animation: slide-left-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .fade-in, &.fade-in {
                            -webkit-animation: fade-in 1s ease-out both;
                            animation: fade-in 1s ease-out both;
                          }
                        }
                      }
                    }
                  }

                  &.right {
                    flex: 2 1 0;

                    .bloc {

                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-items: center;
                      gap: 1.25em;
                      margin: 1em;
                      width: 100%;

                      color: var(--cae-color-violet);

                      .title {
                        font-size: 1.5625em;
                        font-weight: 500;
                        text-align: left;
                        width: 100%;
                      }

                      .content {
                        font-size: 1.25em;
                        font-weight: 400;
                        text-align: left;
                      }

                      .bottom {
                        display: flex;
                        gap: 1em;
                        flex-wrap: wrap;

                        .sep {
                          margin: auto 0.5em auto 1em;
                        }

                        button.noborder {
                          min-width: auto;
                        }
                      }
                    }

                  }

                }
              }
            }
          }

          @media(width <=992px) {

            >.content {
              .vertical-part {
                &.bottom {
                  .horizontal-part {
                    &.right {
                      .bloc {
                        .content {
                          ul {
                            padding-left: 0;
                            padding-right: 0;
                          }
                        }

                        .bottom {
                          margin-bottom: 1em;
                          justify-content: center;

                          .sep {
                            display: none;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width <=768px) {

            --height: max(1100px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {


              .arrow-below {}

              .vertical-part {
                margin: 0;


                &.top {
                  font-size: 1.5625em;
                  height: auto;
                  margin-bottom: 20px;

                  span {
                    font-size: 0.72em;
                    margin: 10px;
                  }
                }

                &.bottom {

                  .horizontal-part {


                    &.left {

                      .boundary {
                        .circle {

                          object, svg {}

                          svg#digital_hub_8 {}
                        }
                      }
                    }

                    &.right {

                      .bloc {

                        .title {
                          font-size: 1.25em;
                        }

                        .content {
                          font-size: 1em;

                          ul {
                            padding-left: 0;
                            padding-right: 0;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width <=576px) {

            height: max(950px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {


              .arrow-below {}

              .vertical-part {
                margin: 0;


                &.top {
                  font-size: 1.25em;
                  height: auto;
                  margin: 1.25em 0;

                  span {
                    font-size: 0.9em;
                    margin: 10px;
                  }
                }

                &.bottom {

                  flex-direction: column;

                  .horizontal-part {


                    &.left {

                      .boundary {
                        .circle {
                          --radius: 500px;

                          object, svg {}

                          svg#digital_hub_8 {}
                        }
                      }
                    }

                    &.right {

                      .bloc {

                        .title {
                          font-size: 1.25em;
                          text-align: center;
                        }

                        .content {
                          font-size: 1em;

                          ul {
                            padding-left: 1rem;
                            padding-right: 1rem;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        &#panel3 {
          background-color: var(--cae-color-background-violet);

          @media(width <=1200px) {
            height: min(100cqw, calc(100vh - var(--cae-height-mainmenu)));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            position: relative;

            &>.background {
              position: absolute;
              height: 100%;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
              }
            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .left {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
                margin-left: 1em;

                object {
                  position: absolute;
                  width: 100%;
                  height: 100%;

                  &.clouds {
                    z-index: 10;
                    height: auto;
                  }

                  &.schema {
                    z-index: 30;
                  }
                }

                svg#digital_hub_3_customers {
                  position: absolute;
                  width: 80%;
                  height: 80%;
                  z-index: 30;

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 2s ease-out both;
                    animation: slide-up-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 2s ease-out both;
                    animation: slide-left-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-right-amort {
                    -webkit-animation: slide-right-amort 1s ease-out both;
                    animation: slide-right-amort 1s ease-out both;
                    animation-delay: 0.2s;
                  }

                  .fade-in {
                    -webkit-animation: fade-in 1.5s ease-out both;
                    animation: fade-in 1.5s ease-out both;
                  }
                }

                div.pipes {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 20;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 0;

                  &.fade-in {
                    -webkit-animation: fade-in 2s ease-out both;
                    animation: fade-in 2s ease-out both;
                  }

                  div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 60px;

                    overflow: hidden;
                    width: 100%;

                    video {
                      width: 80%;
                      height: 80%;
                      transform: translate(0%, 2%);
                      border-radius: 220px;
                    }
                  }
                }
              }
            }

            .right {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;
              container-type: inline-size;

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 90%;
                font-size: min(2.4cqw, 1em);

                .title {
                  font-weight: 500;
                  font-size: 1.5625em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.25em;
                  text-align: justify;
                }

                .bottom {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 1.25em;
                }
              }
            }
          }

          @media(width <=576px) {
            height: max(1050px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {
              flex-direction: column-reverse;

              &>.background {

                height: 105%;
                width: 105%;

                >.svg_background {
                  transform: rotate(-90deg) scaleX(1) scaleY(2.3) translate(180px, 0px);
                  transform-origin: center;
                }

                .extend {
                  display: block;
                  background-color: var(--cae-color-violet);
                  height: 55%;
                  width: 100vw;
                  position: absolute;
                  bottom: 0;
                }
              }

              .horizontal-part {
                width: 100%;
              }

              .left {

                .boundary {
                  margin-left: 0;
                  width: 100%;

                  object {

                    &.clouds {}

                    &.schema {}
                  }

                  svg#digital_hub_3_customers {}

                  div.pipes {

                    div {

                      video {}
                    }
                  }
                }
              }

              .right {
                text-align: center;
                margin-bottom: 1em;
                container-type: normal;
                background-color: var(--cae-color-violet);

                .bloc {

                  align-items: center;
                  font-size: 1em;

                  .title {
                    font-size: 1.25em;
                  }

                  .content {
                    font-size: 1em;
                  }
                }
              }
            }
          }
        }

        &#panel4 {
          background-color: var(--cae-color-background-violet);
          color: var(--cae-color-text-violet);
          display: flex;
          align-items: center;
          justify-content: center;

          height: calc(100vh - var(--cae-height-mainmenu));

          >.content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 100%;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            >.vertical-part {

              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: row;
              gap: 2em;
              padding: 0em 2.5em;

              &.top {
                font-size: 1.875em;
                font-weight: 500;
                text-align: center;
              }

              >.row {
                gap: 0;
              }

              .horizontal-part {

                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                .bloc {

                  .title {
                    font-weight: 500;
                    font-size: 1.5625em;
                    text-align: center;
                    margin-bottom: 1.25em;
                  }

                  .text {
                    p {
                      font-weight: 400;
                      font-size: 1.25em;
                      text-align: justify;
                    }

                    ul {
                      li {
                        font-weight: 300;
                        font-size: 1.25em;
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width >1200px) {

            .content {
              gap: 2em;
            }

            .row {
              gap: 3.125em;
            }

            .bloc {
              padding: 3.75em 2.5em 2.5em 2.5em;
            }
          }

          @media(width <=1200px) {

            height: max(850px, calc(100vh - var(--cae-height-mainmenu)));

            .content {
              gap: 2em;
            }

            .row {
              gap: 0;
            }

            .bloc {
              padding: 3.75em 2.5em 2.5em 2.5em;
            }

            .text {
              font-size: 0.9em;
            }
          }

          @media(width <=992px) {
            height: max(975px, calc(100vh - var(--cae-height-mainmenu)));

            .content {
              gap: 2em;
            }

            .row {
              gap: 0;
            }

            .bloc {
              padding: 2em 1em;
            }

            .text {
              font-size: 0.8em;
            }
          }

          @media(width <=768px) {
            height: auto;

            .content {
              gap: 1em;
            }

            .row {
              gap: 0;
              flex-direction: column;
            }

            .bloc {
              padding: 1em 0;
              ;
            }

            .text {
              font-size: 0.7em;
            }
          }
        }

        &#panel5 {
          background-color: var(--cae-color-background-violet);
          height: 450px;

          &>.background {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;

            .horizontal-part {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              margin: 30px;

              &>div {
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;

                svg#digital_hub_7 {

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 2s ease-out both;
                    animation: slide-up-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 2s ease-out both;
                    animation: slide-left-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .fade-in {
                    -webkit-animation: fade-in 1s ease-out both;
                    animation: fade-in 1s ease-out both;
                  }
                }

                button {
                  width: 200px;
                  font-size: 1rem;

                  &.slide-right-amort {
                    -webkit-animation: slide-right-amort 2s ease-out both;
                    animation: slide-right-amort 2s ease-out both;
                    animation-delay: 0s;
                  }
                }
              }


            }
          }
        }

        &#panel6 {
          background-color: var(--cae-color-background-violet);

          @media(width <=1200px) {
            height: min(75cqw, calc(100vh - var(--cae-height-mainmenu)));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            position: relative;

            &>.background {
              position: absolute;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
              }
            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .left {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
                margin-left: 1em;

                object {
                  position: absolute;
                  width: 100%;
                  height: 100%;

                  &.clouds {
                    z-index: 10;
                    height: auto;
                  }

                  &.schema {
                    z-index: 30;
                  }
                }

                svg#digital_hub_6_customers {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 30;
                  opacity: 0;

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 2s ease-out both;
                    animation: slide-up-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 2s ease-out both;
                    animation: slide-left-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  &.fade-in, .fade-in {
                    -webkit-animation: fade-in 1s ease-out both;
                    animation: fade-in 1s ease-out both;
                  }
                }

                div.pipes {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 20;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 0;

                  &.fade-in {
                    -webkit-animation: fade-in 1.5s ease-out both;
                    animation: fade-in 1.5s ease-out both;
                  }

                  div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 60px;

                    overflow: hidden;
                    width: 100%;

                    video {
                      width: 80%;
                      height: 80%;
                      transform: translate(4%, 2%);
                      border-radius: 200px;
                    }
                  }
                }
              }
            }

            .right {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;
              container-type: inline-size;

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 80%;
                font-size: min(2cqw, 1em);

                .title {
                  font-weight: 500;
                  font-size: 1.5625em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.25em;
                  text-align: justify;

                  ul {
                    padding-left: 0px;

                    li {
                      padding-left: 4em;
                    }
                  }
                }
              }
            }
          }

          @media(width <=576px) {
            height: max(800px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {
              flex-direction: column;

              &>.background {

                >.svg_background {
                  transform: rotate(90deg) scaleX(1) scaleY(2.3) translate(-160px, 0px);
                  transform-origin: center;
                }

                .extend {
                  display: block;
                  background-color: #7000FF;
                  height: 55%;
                  width: 100vw;
                  position: absolute;
                  bottom: 0;
                }
              }

              .horizontal-part {
                width: 100%;
              }

              .left {

                .boundary {
                  margin-left: 0;
                  width: 95%;

                  object {

                    &.clouds {}

                    &.schema {}
                  }

                  svg#digital_hub_3, svg#digital_hub_4 {}

                  div.pipes {

                    div {

                      video {}
                    }
                  }
                }
              }

              .right {
                text-align: center;
                margin-bottom: 1em;
                container-type: normal;

                .bloc {

                  align-items: center;
                  font-size: 1em;

                  .title {
                    font-size: 1.25em;
                  }

                  .content {
                    font-size: 1em;
                  }
                }
              }
            }
          }
        }

        &#panel7 {

          height: auto;
          position: relative;
          --background-color: var(--cae-color-background-violet);
          background: linear-gradient(var(--cae-color-background-violet) 0%, var(--cae-color-background-violet) 50%, var(--cae-color-text-violet) 50%, var(--cae-color-text-violet) 100%);
          color: var(--cae-color-text-inverse);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10em 0;

          [class*="triggered-"] {
            visibility: hidden;
          }

          .bkg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--cae-color-background-violet-inverse);
            z-index: 0;
            clip-path: polygon(0% 5%, 100% 0%, 100% 95%, 0% 100%);
          }

          .header-panel {
            position: absolute;
            top: 0;
            width: 110%;
            z-index: 1;

            svg, object {
              width: 100%;
            }
          }

          >.content {
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5em;

            width: 100%;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            >.vertical-part {

              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              gap: 2em;
              padding: 0em 2.5em;

              &.top {
                font-size: 1.875em;

                font-weight: 500;
                text-align: center;
                gap: 1em;

                .slide-left-amort {
                  -webkit-animation: slide-left-amort 1s ease-out both;
                  animation: slide-left-amort 1s ease-out both;
                  animation-delay: 0s;
                }

                .slide-right-amort {
                  -webkit-animation: slide-right-amort 1s ease-out both;
                  animation: slide-right-amort 1s ease-out both;
                  animation-delay: 0.2s;
                }

                &.fade-in, .fade-in {
                  -webkit-animation: fade-in 1.5s ease-out both;
                  animation: fade-in 1.5s ease-out both;
                }
              }

              >.row {
                gap: 3.125em;
                align-items: center;

                &:first-of-type {
                  justify-content: flex-start;
                }

                &:last-of-type {
                  justify-content: flex-end;
                }
              }

              .horizontal-part {

                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-color: var(--cae-color-violet);
                border-radius: 1em;

                &.video {
                  background-color: transparent;
                  --max-height: 27cqi;
                }

                .bloc {

                  .text & {
                    padding: 3.75em 2.5em 2.5em 2.5em;
                    margin: 0 3em;
                  }

                  display: flex;
                  flex-direction: column;
                  gap: 1.5em;

                  video {
                    width: 100%;
                    height: 100%;
                    border-radius: 0.8em;
                  }

                  .title {
                    font-weight: 500;
                    font-size: 1.5625em;
                    text-align: center;
                  }

                  .text {
                    p {
                      font-weight: 400;
                      font-size: 1em;
                      text-align: justify;
                      margin: 1em 0;
                    }

                    ul {
                      li {
                        font-weight: 300;
                        font-size: 1em;
                        line-height: 1.6em;
                      }
                    }
                  }

                  .bottom {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 1.25em;
                    width: 100%;
                  }
                }
              }
            }
          }

          @media(width>=1200px) {

            >.content {

              >.vertical-part {

                .horizontal-part {

                  &.video {
                    flex: 0 0 auto;
                    width: calc(100% * 6 / 12);
                  }

                  &.text {
                    flex: 0 0 auto;
                    width: calc(100% * 5 / 12);
                  }
                }
              }
            }

          }

          @media(width<1200px) {
            >.content {

              >.vertical-part {
                >.row {
                  &:last-of-type {
                    flex-direction: column-reverse;
                  }
                }

              }
            }
          }

          @media(width <=992px) {
            padding: 5em 0;

            .bkg {
              clip-path: polygon(0% 2.5%, 100% 0%, 100% 97.5%, 0% 100%);
            }
          }

          @media(width <=576px) {
            padding: 2em 0;
            background: var(--cae-color-background-violet-inverse);

            .bkg {
              clip-path: none;
              display: none;
            }

            >.content {
              >.vertical-part {
                &.top {
                  font-size: 1.2em;
                }

                .horizontal-part {
                  .bloc {
                    .text & {
                      margin: 0;
                    }
                  }
                }
              }
            }
          }
        }

        &#panel8 {
          background-color: var(--cae-color-text-violet);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;

          height: calc(100vh - var(--cae-height-mainmenu));

          >.content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;

            width: 100%;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            >.vertical-part {

              display: flex;
              align-items: center;

              flex-direction: row;
              width: 100%;

              &.top {
                font-size: 1.875em;
                font-weight: 500;
                justify-content: center;
              }

              &.bottom {

                justify-content: space-evenly;

                .horizontal-part {

                  display: flex;
                  justify-content: center;
                  flex-direction: column;

                  &.left {
                    max-width: 300px;

                    &>div {

                      display: flex;
                      flex-direction: column;
                      gap: 3em;

                      &>.sep {
                        border-top: solid 1px white;
                        height: 0%;
                        width: 50%;
                        margin: auto;
                      }

                      &>div {

                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 1.25em;



                        &>.title {
                          font-size: 1.25em;
                          font-weight: 500;
                          text-align: center;

                          span {
                            font-size: 1rem;
                            font-weight: 300;
                          }

                          &.withoption {
                            line-height: 1.25em;
                          }
                        }

                        &>.checkbuttons {

                          width: 100%;
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          justify-content: space-evenly;
                          gap: 1.25em;

                          .checkbutton {

                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 1em;

                            &>div {
                              position: relative;
                              display: flex;
                              align-items: center;
                              justify-content: center;

                              input[type="radio"] {
                                position: absolute;
                                opacity: 0;
                                z-index: 1;
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
                              }

                              input[type="radio"]~.helping-el {
                                z-index: 0;
                                position: absolute;
                                background-color: transparent;
                                border: 2px solid white;
                                border-radius: 50%;
                                display: inline-block;
                                padding: 11px;
                                position: relative;
                              }

                              input[type="radio"]:checked~.helping-el {
                                border: 2px solid white;
                              }

                              input[type="radio"]:checked~.helping-el:after {
                                background-color: white;
                                border-radius: 50%;
                                content: " ";
                                font-size: 33px;
                                height: 16px;
                                left: 3px;
                                position: absolute;
                                top: 3px;
                                width: 16px;

                              }

                            }

                            label {
                              font-size: 1.125em;
                              font-weight: 500;
                            }

                            .info {
                              margin-left: auto;
                              flex: 0 0 1.5em;
                              cursor: pointer;

                              &:hover {
                                transform: scale(1.1);
                              }
                            }
                          }
                        }

                        &>.checkboxs {
                          width: 100%;
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          justify-content: space-evenly;
                          gap: 1em;

                          .checkbox {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 1.25em;

                            &>div {

                              position: relative;
                              display: flex;
                              align-items: center;
                              justify-content: center;

                              input[type="checkbox"] {
                                position: absolute;
                                opacity: 0;
                                z-index: 1;
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
                              }

                              input[type="checkbox"]~.helping-el {
                                z-index: 0;
                                background-color: transparent;
                                border: 2px solid white;
                                border-radius: 2px;
                                display: inline-block;
                                padding: 10px;
                                position: relative;
                                top: 2px;
                              }

                              input[type="checkbox"]:checked~.helping-el {
                                border: 2px solid white;
                              }

                              input[type="checkbox"]:checked~.helping-el:after {
                                color: #FFFFFF;
                                content: "\2714";
                                font-size: 20px;
                                font-weight: normal;
                                left: 2px;
                                position: absolute;
                                top: -6px;
                                transform: rotate(10deg);
                              }
                            }

                            label {
                              font-size: 1em;
                              font-weight: 500;
                            }

                            .info {
                              margin-left: auto;
                              flex: 0 0 1.5em;
                              cursor: pointer;

                              &:hover {
                                transform: scale(1.1);
                              }
                            }
                          }
                        }
                      }
                    }
                  }

                  &.separator {
                    height: 30%;
                    border-left: solid 1px white;
                  }

                  &.right {
                    position: relative;
                    justify-content: flex-start;
                    --translateXp: 10%;
                    --translateYp: 0;
                    --translateXm: -10%;
                    --translateYm: 0;
                    --translateYc: 0%;

                    svg {
                      &.svg_horizontal {
                        display: block;
                      }

                      &.svg_vertical {
                        display: none;
                      }

                    }

                    .over {
                      position: absolute;
                      width: 100%;
                      display: flex;

                      &>div {
                        flex: 1 1 auto;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        gap: 10px;

                        font-size: 1em;
                        font-weight: 400;

                        &.overleft {
                          width: 30%;
                        }

                        &.overcenter {
                          width: 40%;
                        }

                        &.overright {
                          width: 30%;
                        }


                        .title {
                          font-size: 1.25em;
                          font-weight: 600;
                        }

                        .compl {

                          padding: 0.2em 0.5em;
                          border-radius: 5px;
                          width: fit-content;
                          margin: auto;
                          font-size: 0.875em;

                          .overleft & {
                            background-color: #C684E8;
                          }

                          .overright & {
                            background-color: #9B8707;
                          }
                        }

                        .text {
                          padding: 0 1em;

                          p {}
                        }

                      }
                    }
                  }
                }
              }
            }
          }

          @media((width > 980px) and (width <=1360px)) {
            >.content {
              &>.vertical-part {
                &.bottom {
                  flex-direction: column;
                  justify-content: space-evenly;
                  gap: 3em;

                  & .horizontal-part {
                    &.left {
                      max-width: min(100%, 768px);

                      &>div {
                        display: flex;
                        gap: 2em;
                        align-items: flex-start;
                        flex-direction: row;

                        &>div {
                          width: 50%;
                        }

                        &>div.sep {
                          border-left: solid 1px white;
                          height: 60%;
                          width: 0;
                          margin: auto;
                        }
                      }
                    }

                    &.separator {
                      border-left: none;
                      border-top: solid 1px white;
                      width: 10%;
                    }
                  }
                }
              }
            }
          }

          @media((width > 576px) and (width <=980px)) {

            height: auto;

            >.content {
              gap: 3em;
              margin-bottom: 2em;

              &>.vertical-part {
                &.bottom {
                  flex-direction: column;
                  justify-content: space-evenly;

                  & .horizontal-part {
                    &.left {
                      max-width: min(100%, 768px);
                      z-index: 100;

                      &>div {
                        display: flex;
                        gap: 2em;
                        align-items: flex-start;
                        flex-direction: row;
                        height: 210px;

                        &>div {
                          padding: 0 1em;
                          width: 50%;
                        }

                        &>div.sep {
                          width: 0%;
                          height: 50%;
                          border-top: none;
                          border-left: solid 1px white;
                          margin: auto 0;
                          padding: 0;
                        }
                      }
                    }

                    &.separator {
                      height: 0;
                      width: 50%;
                      border-left: none;
                      border-top: solid 1px white;
                      margin: 2em;
                    }

                    &.right {
                      width: 100%;
                      --translateXp: 0;
                      --translateYp: 0%;
                      --translateXm: 0;
                      --translateYm: -30%;
                      --translateYc: 0%;
                      z-index: 20;

                      &.translateVertOffsetPrc {
                        transform: translateY(-30%);
                      }

                      svg {
                        &.svg_horizontal {
                          display: none;
                        }

                        &.svg_vertical {
                          display: block;
                        }

                        width: 100%;
                        margin-top:0;
                      }

                      .over {
                        display: none
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width <=576px) {

            height: auto;

            >.content {

              gap: 3em;
              margin-bottom: 2em;

              &>.vertical-part {

                &.top {
                  .title {
                    text-align: center;
                  }
                }

                &.bottom {
                  flex-direction: column;
                  justify-content: space-evenly;
                  gap: 3em;

                  & .horizontal-part {
                    &.left {
                      max-width: min(100%, 768px);
                      font-size: 0.85em;
                      z-index: 100;

                      &>div {
                        display: flex;
                        gap: 2em;
                        align-items: center;
                        flex-direction: column;

                        &>div {
                          width: 85%;
                        }

                        &>div.sep {
                          border-left: solid 1px white;
                          height: 0%;
                          width: 10%;
                          margin: auto;
                        }
                      }
                    }

                    &.separator {
                      border-left: none;
                      border-top: solid 1px white;
                      width: 60%;
                      z-index: 100;
                    }

                    &.right {
                      width: 100%;
                      --translateXp: 0;
                      --translateYp: 0%;
                      --translateXm: 0;
                      --translateYm: -30%;
                      --translateYc: 0%;
                      z-index: 20;

                      &.translateVertOffsetPrc {
                        transform: translateY(-30%);
                      }

                      svg {
                        &.svg_horizontal {
                          display: none;
                        }

                        &.svg_vertical {
                          display: block;
                        }

                        width: 100%;
                        margin-top:0;
                      }

                      .over {
                        display: none
                      }
                    }
                  }
                }
              }
            }
          }


          .animHide {
            animation-name: animHide;
            animation-duration: 0.5s;
            opacity: 0;
          }

          .animShow {
            animation-name: animShow;
            animation-duration: 0.5s;
            opacity: 1;
          }

          .translateMinus10prc {
            transform: translate(var(--translateXm), var(--translateYm));
            transition: transform 0.5s;
          }

          .translate0prc {
            transform: translateX(0%) translateY(var(--translateYc));
            transition: transform 0.5s;
          }

          .translatePlus10prc {
            transform: translate(var(--translateXp), var(--translateYp));
            transition: transform 0.5s;
          }
        }
      }
    }
  }
}

@keyframes animHide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes animShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body>.panel8.bloc_info {
  display: none;
}

@media(width <=980px) {
  body>.panel8.bloc_info {



    &.showBlocInfo {
      display: flex;
      position: absolute;
      z-index: 400000;
      width: 100%;
      flex-direction: column-reverse;
      background: #00000080;
      height: 100vh;
      padding: 5px;
      border-radius: 5px;
    }

    &>.transp {}

    &>.top {
      height: 40px;
      background-color: #F8F8FF;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-color: white;
      border-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .handler {
        width: 20%;
        height: 8px;
        background: var(--cae-color-main);
        border-radius: 10px;
      }
    }

    &>.over {
      width: 100%;
      display: flex;
      background-color: #F8F8FF;
      color: var(--cae-color-background-violet-inverse);

      &>div {
        flex: 1 1 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;

        font-size: 1em;
        font-weight: 400;

        &.overleft {
          width: 30%;
        }

        &.overcenter {
          width: 40%;
        }

        &.overright {
          width: 30%;
        }


        .title {
          font-size: 1.25em;
          font-weight: 600;
        }

        .compl {

          padding: 0.2em 0.5em;
          border-radius: 5px;
          width: fit-content;
          margin: auto;
          font-size: 0.875em;

          .overleft & {
            background-color: #C684E8;
          }

          .overright & {
            background-color: #9B8707;
          }
        }

        .text {
          padding: 0 1em;

          p {}
        }

      }
    }

    &>.bottom {
      height: 50px;
      background-color: white;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;

      .close {
        svg {
          fill: var(--cae-color-background-violet-inverse);
        }

        &:hover {
          transition: all 0.15s;
          transform: scale(1.1);
        }
      }
    }
  }
}