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

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

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

      @media(width <=768px) {
        scroll-snap-type: none;
      }

      @media(width > 768px) {
        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%;
          max-width: var(--width-main);
        }

        &#panel1 {
          background-color: var(--cae-color-background-blue);

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

          max-height: 500px;

          >.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%;
                transform: scaleY(0.6);
              }
            }

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

            .right {
              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;
                    max-width: 600px;
                  }
                }

                svg#digital_hub_1_legal {
                  position: absolute;
                  width: 80%;
                  height: 80%;
                  max-height: 320px;
                  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: 0.4s;
                  }

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

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

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

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

            .left {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-blue);
              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(2.4cqw, 1em);

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

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

          @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-reverse;

              &>.background {

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

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

              .horizontal-part {
                width: 100%;
              }

              .left {

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

                  svg#digital_hub_10_partners {
                    width: 65%;
                    height: 65%;
                  }

                }
              }

              .right {
                text-align: center;
                margin-bottom: 1em;
                container-type: normal;
                flex-direction: column;
                justify-content: flex-start;

                .bloc {

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

                  .title {
                    font-size: 1.25em;
                  }

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

        &#panel2 {

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

          height: auto;

          .content {

            padding: 1em;
            line-height: 2em;
            font-size: 1em;

            h2 {
              margin-bottom: 2em;
            }

            h3 {
              margin-bottom: 1em;
            }

            p {
              text-align: justify;
            }

            a {
              color: var(--cae-color-blue);
            }

            .old {
              display: none;
            }
          }

          @media(width <=576px) {
            padding: 1em;
          }
        }
      }
    }
  }
}