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%;
        }

        &#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;
                  }
                }
              }
            }
          }
        }

        &#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_partners {


                          .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;
                          }

                          .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: 1.25em 0;

                  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(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.25em;
                  height: auto;
                  margin-bottom: 20px;

                  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;
                          }
                        }

                        .sep {
                          display: inherit;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        &#panel3 {
          background-color: var(--cae-color-background-blue);
          height: max(800px, 50vh);

          &>.background {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            clip-path: polygon(100% 30%, 100% 70%, 0 90%, 0 10%);
            background-color: #C8FBFC;
          }

          >.content {
            position: relative;

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

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

            .left {
              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%;
                height: 100%;
                position: relative;
                margin-left: 1em;

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

                  &.clouds {
                    z-index: 10;
                  }

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

                svg#digital_hub_3_partners {
                  position: absolute;
                  width: 80%;
                  height: 80%;
                  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;
                  }

                  .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;
                  }
                }

              }
            }

            .right {

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

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


                .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: flex-start;
                  gap: 1.25em;
                  width: 100%;
                }
              }
            }



          }

          @media(width <=992px) {

            &>.background {
              clip-path: polygon(100% 30%, 100% 70%, 0 90%, 0 10%);
            }

            >.content {

              @media(width<=992px) {

                .noborder {
                  border: solid 1px white;
                  border-radius: 0.3125em;
                  border-color: var(--cae-button-color);

                  .text {
                    display: none;
                  }
                }
              }
            }
          }

          @media(width <=576px) {

            &>.background {
              clip-path: polygon(100% 10%, 100% 90%, 0 100%, 0 0%);
            }

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

              .horizontal-part {
                width: 100%;
              }

              .left {
                .boundary {
                  margin-left: 0;
                }
              }

              .right {
                .bottom {
                  margin-bottom: 100px;
                  justify-content: center !important;

                  .text {
                    display: inherit;
                  }
                }
              }
            }
          }

        }

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

          @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;
              height: 100%;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
              }

              .extend {
                display: none;
              }
            }

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

            .left {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-violet);
              z-index: 30;
              font-size: min(1cqw, 1em);

              .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;
                  }
                }

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




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

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

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

              }
            }

            .right {

              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(2cqw, 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: flex-start;
                  gap: 1.25em;
                  width: 100%;
                }
              }
            }



          }

          @media(width <=576px) {
            height: max(1100px, 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(-180px, 0px);
                  transform-origin: center;
                }

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

              .horizontal-part {
                width: 100%;
              }

              .left {

                font-size: 0.75em;

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

                  .clouds {
                    width: 130%;
                  }

                  .bloc {
                    width: 80%;

                    .title {
                      text-align: center;
                      width: 100%;
                    }

                    .content {}
                  }
                }
              }

              .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;
                  }

                  .bottom {
                    justify-content: center !important;
                  }
                }
              }
            }




          }
        }

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

          @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_5_partners {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  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, .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;
                      filter: hue-rotate(270deg);
                      opacity: 0.6;
                    }
                  }
                }
              }
            }

            .right {

              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: 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(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 {

                >.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%;

                  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;
                  }
                }
              }
            }
          }
        }

        &#panel6 {

          height: auto;

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

          color: var(--cae-color-text-inverse);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10em 0;

          .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%);
          }

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

          .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;

                @media(width<576px) {
                  font-size: 1.2em;
                }

                font-weight: 500;
                text-align: center;
              }

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

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

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

                  @media(width<1200px) {
                    flex-direction: column-reverse;
                  }
                }
              }

              .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;
                }

                @media(width>=1200px) {
                  &.video {
                    flex: 0 0 auto;
                    width: calc(100% * 6 / 12);
                  }

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

                .bloc {

                  width: 100%;
                  height: 100%;

                  .text & {
                    padding: 3.75em 2.5em 2.5em 2.5em;

                    @media(width<=576px) {
                      padding: 3.75em 0em 2.5em 0em;
                    }

                    margin: 0 3em;
                  }

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

                  video, &>svg {
                    width: 100%;
                    height: 100%;
                    border-radius: 0.8em;

                    &#digital_hub_6_1_partners>g>g {
                      opacity: 0;

                      &.fade-in {
                        -webkit-animation: fade-in 1s ease-out both;
                        animation: fade-in 1s ease-out both;
                      }
                      &:nth-of-type(6).fade-in {
                        animation-delay: 0s;
                      }
                      &:nth-of-type(8).fade-in {
                        animation-delay: 1s;
                      }
                      &:nth-of-type(3).fade-in {
                        animation-delay: 2s;
                      }
                      &:nth-of-type(10).fade-in {
                        animation-delay: 3s;
                      }
                      &:nth-of-type(5).fade-in {
                        animation-delay: 4s;
                      }
                      &:nth-of-type(11).fade-in {
                        animation-delay: 5s;
                      }
                      &:nth-of-type(2).fade-in {
                        animation-delay: 6s;
                      }
                      &:nth-of-type(4).fade-in {
                        animation-delay: 7s;
                      }
                      &:nth-of-type(9).fade-in {
                        animation-delay: 8s;
                      }
                      &:nth-of-type(7).fade-in {
                        animation-delay: 9s;
                      }
                      &:nth-of-type(1).fade-in {
                        animation-delay: 10s;
                      }
                      &:nth-of-type(12).fade-in {
                        animation-delay: 11s;
                      }
                    }
                  }

                  .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%;
                  }
                }
              }
            }
          }
        }

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

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

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

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

              .boundary {

                width: 100%;
                height: 100%;
                position: relative;


                &>.title {
                  width: 100%;
                  color: var(--cae-color-text-blue);
                  font-size: 1.5em;
                  font-weight: 500;
                  text-align: center;
                  padding: 1em;
                }

                &>.center {
                  height: calc(100% - 84px);
                  display: flex;
                  flex-direction: column;
                  justify-content: center;

                  svg#digital_hub_7_partners {

                    width: 100%;
                    height: auto;
                    z-index: 30;
                    margin-top: 4em;

                    .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 {
                      &>g:nth-of-type(1)>g>g {
                        -webkit-animation: slide-up-amort 2s ease-out both;
                        animation: slide-up-amort 2s ease-out both;
                        animation-delay: 0.1s;
                      }

                      &>g:nth-of-type(2)>g>g {
                        -webkit-animation: slide-up-amort 2s ease-out both;
                        animation: slide-up-amort 2s ease-out both;
                        animation-delay: 0.2s;
                      }

                      &>g:nth-of-type(3)>g>g {
                        -webkit-animation: slide-up-amort 2s ease-out both;
                        animation: slide-up-amort 2s ease-out both;
                        animation-delay: 0.3s;
                      }

                      &>g:nth-of-type(4)>g>g {
                        -webkit-animation: slide-up-amort 2s ease-out both;
                        animation: slide-up-amort 2s ease-out both;
                        animation-delay: 0.4s;
                      }

                      &>g:nth-of-type(5)>g>g {
                        -webkit-animation: slide-up-amort 2s ease-out both;
                        animation: slide-up-amort 2s ease-out both;
                        animation-delay: 0.5s;
                      }
                    }

                    .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 1s ease-out both;
                      animation: fade-in 1s ease-out both;
                    }
                  }

                  .cards {
                    display: flex;
                    align-items: stretch;
                    justify-content: space-around;
                    z-index: 0;
                    margin-top: 1em;


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


                    .card {
                      color: var(--cae-color-text-blue);
                      width: 200px;
                      text-align: center;
                      padding: 1em;
                      border: none;
                      border-radius: 10px;

                      &.thelast {
                        display: none;
                      }

                      .step {
                        font-size: 1.375em;
                        font-weight: 300;
                      }

                      .numstep {
                        font-size: 1.375em;
                        font-weight: 600;
                      }

                      .title {
                        font-size: 1.125em;
                        font-weight: 600;
                        padding: 1em;
                        text-wrap-mode: wrap;
                        overflow-wrap: normal;
                      }

                      .illustration {
                        width: 100%;

                        svg {
                          width: 90%;
                        }
                      }

                      .description {
                        font-size: 1em;
                        font-weight: 300;
                        padding: 1em 0;
                      }
                    }
                  }
                }


              }
            }
          }

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

            height: auto;

            >.content {

              .horizontal-part {

                .boundary {


                  &>.title {}

                  &>.center {

                    svg#digital_hub_7_partners {
                      display: none;
                    }

                    .cards {

                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      gap: 30px;
                      margin-bottom: 30px;

                      &.slide-down-amort {
                        -webkit-animation: none;
                        animation: none;
                        animation-delay: inherit;
                      }

                      .card {

                        width: 30em;
                        font-size: 0.9em;

                        br {
                          display: none;
                        }

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

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


                        .step {}

                        .numstep {}

                        .title {}

                        .illustration {

                          svg {}
                        }

                        .description {
                          max-width: 288px;
                          margin: auto;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width<=576px) {

            >.content {

              .horizontal-part {

                .boundary {


                  &>.title {}

                  &>.center {
                    height: calc(100% - 120px);
                    overflow-x: scroll;
                    scroll-snap-type: x mandatory;
                    margin-left: 1em;

                    width: calc(100vw - 1em);

                    svg#digital_hub_7_partners {
                      display: none;
                    }

                    .cards {

                      justify-content: space-evenly;
                      gap: 1em;

                      &.slide-down-amort {
                        -webkit-animation: none;
                        animation: none;
                        animation-delay: inherit;
                      }

                      .card {

                        min-width: 200px;
                        font-size: 0.9em;
                        scroll-snap-align: start;

                        &.thelast {
                          display: inherit;
                          min-width: 0 !important;
                          padding: 0.3em !important;
                          background: transparent;
                        }

                        .step {}

                        .numstep {}

                        .title {}

                        .illustration {

                          svg {}
                        }

                        .description {}
                      }
                    }
                  }
                }
              }
            }
          }
        }

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

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

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

            &>.title {
              width: 100%;
              color: var(--cae-color-text-blue);
              font-size: 1.5em;
              font-weight: 500;
              text-align: center;
              padding: 1em;
              position: absolute;
            }

            &>.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%;
            }

            .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_8_partners {
                  position: absolute;
                  width: 60%;
                  height: 60%;
                  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;
                  }
                }
              }
            }

            .right {

              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: 1.5625em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.25em;
                  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;

              &>.title {
                position: absolute;
                top: 0;
              }

              &>.background {

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

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

              .horizontal-part {
                width: 100%;
              }

              .left {

                margin-top: 120px;

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

                  svg#digital_hub_8_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;

                  }
                }
              }
            }
          }
        }

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

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

          @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;
              height: 100%;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
                transform: scaleY(0.6);
              }

              .extend {
                display: none;
              }
            }

            .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_9_partners {
                  position: absolute;
                  width: 60%;
                  height: 60%;
                  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: 0.4s;
                  }

                  .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;
                  }
                }
              }
            }

            .right {

              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(2cqw, 1em);

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

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

                .asterisk {
                  font-weight: 300;
                  font-size: 0.75em;
                  text-align: left;

                  span.seecondpart {
                    text-decoration: underline;
                  }
                }
              }
            }



          }

          @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(-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_9_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;

                  }

                  .asterisk {
                    text-align: center;
                  }
                }
              }
            }
          }
        }

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

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

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

            .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_10_partners {
                  position: absolute;
                  width: 60%;
                  height: 60%;
                  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 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 2s ease-out both;
                    animation: slide-right-amort 2s 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;
                  }
                }
              }
            }

            .right {

              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: 1.5625em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.25em;
                  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;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}