/*
Theme Name: Emineo
Theme URI: https://icc-digital.fr
Template: hello-elementor
Author: ICC Digital
Author URI: https://icc-digital.fr
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 1.0.0.1702982043
Updated: 2023-12-19 11:34:03

*/

/***** Menu header ******/
.hfe-nav-menu__align-right .hfe-nav-menu {
  margin: 0;
}
.elementor-22
  .elementor-element.elementor-element-bacfc5b
  .menu-item
  a.hfe-menu-item {
  padding: unset;
}

.elementor-widget-theme-site-logo .elementor-widget-container {
  max-width: 148px;
}
.hfe-nav-menu {
  width: 786px;
}

body:not(.rtl)
  .elementor-22
  .elementor-element.elementor-element-bacfc5b
  .hfe-nav-menu__layout-horizontal
  .hfe-nav-menu {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 20px;
}
@media screen and (max-width: 1024px) {
  body:not(.rtl)
    .elementor-22
    .elementor-element.elementor-element-bacfc5b
    .hfe-nav-menu__layout-horizontal
    .hfe-nav-menu {
    flex-wrap: wrap;
  }
}
body:not(.rtl)
  .elementor-22
  .elementor-element.elementor-element-bacfc5b
  .hfe-nav-menu__layout-horizontal
  .hfe-nav-menu
  > li.menu-item:last-child
  a {
  font-size: 14px;
}
body:not(.rtl)
  .elementor-22
  .elementor-element.elementor-element-bacfc5b
  .hfe-nav-menu__layout-horizontal
  .hfe-nav-menu
  > li.menu-item:last-child {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 175px;
  margin-left: 50px;
  margin-right: 0;
}
body:not(.rtl)
  .elementor-22
  .elementor-element.elementor-element-bacfc5b
  .hfe-nav-menu__layout-horizontal
  .hfe-nav-menu
  > li.menu-item:not(:last-child):not(:nth-last-child(2)) {
  margin-right: 62.5px;
}
body:not(.rtl)
  .elementor-22
  .elementor-element.elementor-element-bacfc5b
  .hfe-nav-menu__layout-horizontal
  .hfe-nav-menu
  > li.menu-item:not(:last-child) {
  display: flex;
  align-items: center;
  padding-top: 11px;
  min-width: 92px;
  margin-left: 0;
}
body:not(.rtl) .elementor-22 .elementor-element.elementor-element-c30797a {
  justify-content: space-between;
  position: static;
  display: flex;
  max-width: 1200px;
  margin: auto;
  width: 100%;
  padding: 20px 40px;
  margin-bottom: 50px;
}

.elementor-22 .elementor-element.elementor-element-e796e9f {
  max-width: 786px;
}
.hfe-menu-item.elementor-button::before {
  border: 1px solid #bc9e66;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  content: "";
  transition: all 0.5s;
  background-color: #bc9e66;
  border-radius: 24px;
}
.hfe-menu-item.elementor-button::after {
  border: 1px solid #bc9e66;
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  content: "";
  transition: all 0.5s;
  background-color: #bc9e66;
  border-radius: 24px;
}

.hfe-menu-item.elementor-button:hover::before {
  transition: all 0.5s;
  width: 120%;
  transform: translateX(-25%);
  border-color: #bc9e66;
  background-color: #bc9e66 !important;
}

.hfe-menu-item.elementor-button:hover::after {
  transition: all 0.5s;
  width: 120%;
  transform: translateX(-25%);
  border-color: #bc9e66;
  background-color: #bc9e66 !important;
}

/*********** Header subMenu *************/

.elementor-22
  .elementor-element.elementor-element-bacfc5b
  nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown)
  ul.sub-menu {
  position: absolute;
  left: -50px;
  margin-top: 0 !important;
}

.sub-menu {
  box-shadow: none !important;
}

.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-arrow {
  display: none;
}

.sub-menu li {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 20px;
  transition: all 0.5s;
  background: #e5feff;
  max-height: 50px;
  background: transparent;
}

/********* Footer Custom ********/
.site-footer {
  position: absolute;
  max-width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background-color: #1b223a;
}

.site-footer .btn {
  z-index: 9999;
  position: absolute;
  border-bottom: solid 30px #131a31;
  border-left: solid 30px transparent;
  border-right: solid 30px transparent;
  cursor: pointer;
  bottom: 5px;
}
.site-footer .btn i {
  color: #fff;
  position: absolute;
  top: 10px;
  left: -6px;
}
.site-footer.open .btn {
  display: none;
}

.divider {
  width: 1px;
  height: 102px;
  background-color: #4f78c3;
}

.overlay {
  position: absolute;
  bottom: 0;
  max-height: 0;
  height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(79, 120, 195, 0.3);
  width: 100%;
  transition: max-height 0.3s;
  transition-delay: 250ms;
  display: none;
}

.site-footer.open .overlay {
  min-height: 100vh;
  display: block;
}
.first {
  position: absolute;
  bottom: 0;
  max-height: 0;
  height: 100%;
  background: rgba(27, 34, 58, 1);
  border-radius: 50px 50px 0 0;
  width: 100%;
  transition: max-height 0.3s !important;
  transition-delay: 750ms !important;
  display: none;
}
.logo_partners {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.follow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.follow h5 {
  font-weight: 400;
  font-size: 22px;
  line-height: 38px;
  color: #ffffff;
  margin: 0;
}

.follow p {
  font-weight: 400;
  font-size: 16px;
  line-height: 38px;
  color: #bc9e66;
  margin: 0;
}
.follow_social_link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding-top: 24px;
}

.form-subscribe {
  border: none;
  display: flex;
}

.form-subscribe .tnp-submit {
  cursor: pointer;
  background: #4f78c3;
  border: 1px solid #4f78c3;
  border-radius: 0;
  color: #ffffff;
}

.form-subscribe .tnp-submit:hover {
  cursor: pointer;
  background: #bc9e66;
  border: 1px solid #bc9e66;
  border-radius: 0;
  color: #ffffff;
}

.form-subscribe .input-subscribe {
  border-radius: 0;
  border: 2px solid #4f78c3;
  background: transparent;
  color: var(--white);
}

.form-subscribe .input-subscribe:hover {
  border-radius: 0;
  border: 2px solid #bc9e66;
  background: transparent;
}

.form-subscribe.input-subscribe::placeholder {
  color: #4f78c3;
}

.form-subscribe.input-subscribe::placeholder:hover {
  color: #bc9e66;
}

.site-footer.open .first {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  min-height: 264px;
  padding: 50px 117px 117px 145px;
  transition: max-height 0.3s !important;
  transition-delay: 750ms !important;
}

.content {
  position: absolute;
  bottom: 0;
  max-height: 21px;
  height: 100%;
  background: rgba(19, 26, 49, 1);
  max-width: 80%;
  width: 100%;
  border-radius: 50px 50px 0 0;
  transition: max-height 0.3s;
  transition-delay: 1250ms;
}

.content_hidden {
  display: none;
}
.site-footer.open .content_hidden {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.content p {
  font-weight: 400;
  font-size: 16px;
  line-height: 38px;
  color: #ffffff;
  margin: 0;
}

.divider_content {
  width: 1px;
  height: 15px;
  background-color: #ffffff;
}

.site-footer.open .content {
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  min-height: 75px;
  transition: max-height 0.3s;
  transition-delay: 1250ms;
}

/********* PARTIE GUILLAUME ********/

@font-face {
  font-family: "Candara";
  src: url(./assets/fonts/Candara.ttf);
  font-weight: 400;
  font-style: normal;
}

:root {
  --bg: #131a31;
  --gold: #bc9e66;
  --white: #ffffff;
  --blue: #1b223a;
  --light-blue: #4f78c3;

  --ff-body: "Candara", sans-serif;

  --fs-titleL: 48px;
  --fs-title: 35px;
  --fs-subtitle: 22px;
  --fs-body: 16px;
  --fs-small: 14px;

  --lh-titleL: 54.5px;
  --lh-title: 38px;
  --lh-subtitle: 38px;
  --lh-body: auto;
  --lh-small: 103.8;

  --ls-titleL: 10%;
  --ls-title: 3.5px;
  --ls-subtitle: 10%;
  --ls-body: 0%;
  --ls-small: 0%;

  --aiguille-rotation: 45deg;

  --wrapper-home: 1366px;
  --padding-home: 115px;
}

@media (max-width: 992px) {
  :root {
    --wrapper-home: 100%;
    --padding-home: 135px;
  }
}

@media (min-width: 1367px) {
  :root {
    --wrapper-home: 1600px;
    --padding-home: 135px;
  }
}

@media (min-width: 1601px) {
  :root {
    --wrapper-home: 1800px;
    --padding-home: 150px;
  }
}

@media (max-width: 992px) {
  :root {
    --fs-title: 28px;

    --lh-title: 32px;
  }
}

@media (max-width: 576px) {
  :root {
    --fs-title: 24px;

    --lh-title: 28px;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--white);
  position: relative;
}

body.home {
  background: linear-gradient(180deg, #1b223a 30%, #131a31 100%);
  padding-top: 250px;
  overflow-x: clip;

  @media (max-width: 730px) {
    padding-top: 150px;
  }
}

body.no-scroll {
  overflow: hidden;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;

  & > .header__nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1920px;
    margin: auto;
    padding: 20px 115px;
    position: relative;
    z-index: 10;
    pointer-events: all;

    & > .header__logo {
      max-width: 100px;
      width: 100%;
    }

    .header__menu {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 100px;
      pointer-events: all;

      & > li {
        a {
          font-size: 16px;
        }

        &:last-of-type {
          min-width: 191px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: -20px;
          margin-right: -20px;
          & > a {
            padding: 15px 50px;
            border-radius: 60px;
            border: 2px solid var(--white);
            font-size: 14px;
            width: fit-content;
            transition: all 0.3s ease-out;
            color: var(--white) !important;
            cursor: pointer;

            &:hover {
              background-color: var(--gold);
              border: 2px solid var(--gold);
              padding: 15px 70px;
            }
          }

          @media screen and (max-width: 992px) {
            min-width: 0;
            margin-top: -15px;
            margin-left: 0;
          }

          @media (max-width: 600px) {
            display: none;
          }

          @media (min-width: 600px) {
            display: flex !important;
          }
        }
      }

      & > .header__submenu {
        position: relative;
        cursor: pointer;

        &:hover {
          & > a {
            color: var(--gold);

            @media (max-width: 600px) {
              color: var(--white);
            }
          }

          &::before {
            border: 1px solid var(--gold);
          }
        }

        & > a {
          &.active {
            color: var(--light-blue);

            @media (max-width: 600px) {
              color: var(--white);
            }
          }

          @media (max-width: 600px) {
            pointer-events: none;
          }
        }

        & > ul {
          position: absolute;
          left: 15px;
          display: none;
          margin: 0;
          border-left: 1px solid var(--light-blue) !important;
          padding-top: 15px;
          padding-left: 0;
          flex-direction: column;
          gap: 20px;

          & > li {
            display: flex;
            align-items: center;
            gap: 7.5px;
            padding-left: 0;
            margin-bottom: -7px;

            &::before {
              content: "";
              height: 7px;
              width: 7px;
              border-radius: 50px;
              border: 1px solid var(--light-blue);
              display: flex;
              justify-content: center;
              align-items: center;
              transition: all 0.5s;
              background-color: var(--blue);
              margin-left: -3.5px;
            }

            @media (max-width: 600px) {
              opacity: 1 !important;
            }
          }

          &.active {
            display: flex;
          }

          @media (max-width: 600px) {
            display: flex;
            height: auto !important;
            gap: 35px;
          }

          @media screen and (max-width: 992px) {
            position: relative;
          }
        }
      }

      &.active {
        display: flex;
      }

      @media (max-width: 1200px) {
        gap: 60px;
      }

      @media (max-width: 992px) {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 25px;
        width: 100%;
        padding: 145px 45px 40px 45px;
        z-index: -1;
        display: none;
      }

      @media (max-width: 600px) {
        flex-direction: column;
        padding: 0;

        &::before {
          content: "";
          height: 1px;
          width: 100px;
          background-color: var(--light-blue);
          margin-block: 15px;
        }
      }

      @media (max-width: 576px) {
        padding: 0;
      }
    }

    & > div.header__menuWrap {
      @media (max-width: 992px) {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 50px;
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
      }

      @media (max-width: 600px) {
        position: relative;
        height: 100%;
        pointer-events: none;
      }

      & > footer {
        display: none;
        pointer-events: all;
        flex-direction: column;
        gap: 20px;
        z-index: 1;
        height: 100%;
        background-color: var(--bg);
        border-radius: 25px 25px 0 0;
        padding: 50px 40px;
        width: 100vw;
        margin-left: -40px;

        & > span {
          color: var(--gold);
          letter-spacing: 2px;
        }

        @media (max-width: 576px) {
          padding: 50px 20px;
          margin-left: -20px;
        }

        @media (min-width: 600px) {
          display: none !important;
        }
      }
    }

    @media (max-width: 992px) {
      padding: 20px 40px;
    }

    @media (max-width: 600px) {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }

    @media (max-width: 576px) {
      padding: 20px;
    }
  }

  .header__burger {
    display: none;
    cursor: pointer;

    & > svg {
      width: 25px;
      height: 21px;

      &:first-of-type {
        display: block;
      }

      &:nth-of-type(2) {
        display: none;
      }
    }

    &.active {
      & > svg {
        &:first-of-type {
          display: none;
        }

        &:nth-of-type(2) {
          display: block;
        }
      }
    }

    @media (max-width: 992px) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    @media (max-width: 600px) {
      position: absolute;
      top: 50px;
      right: 35px;
    }
  }

  &.bigger {
    background: rgba(27, 34, 58, 1);
    .header__nav {
      @media (max-width: 600px) {
        height: 100%;
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 0;
      }

      @media (max-width: 576px) {
        padding: 20px;
        padding-bottom: 0;
      }
    }

    @media (max-width: 992px) {
      min-height: 220px;

      & > div.header__menuWrap {
        display: flex;
      }
    }

    @media (max-width: 600px) {
      height: 100dvh;
      overflow: auto;
      pointer-events: none;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-image: url(./assets/img/bg-menu-mobile.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
        z-index: 10000000000;
        pointer-events: none;
      }

      & > div.header__menuWrap {
        display: flex;
      }
    }

    div.header__menuWrap {
      pointer-events: none;
      display: flex;
    }
  }
}

.home .header .header__nav {
  max-width: 1800px;
}

.home .header,
.page-id-99 .header {
  background: rgba(27, 34, 58, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  @media (max-width: 992px) {
    background: rgba(27, 34, 58, 1);
    backdrop-filter: blur(0px);
  }
}

.page-id-175 .header,
.page-id-369 .header,
.page-id-532 .header,
.page-id-427 .header,
.page-id-2331 .header {
  background: rgba(19, 26, 49, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.page-id-1176 .header {
  @media (max-width: 992px) {
    background: rgba(27, 34, 58, 1);
  }
}

.page-id-991 .header {
  @media (max-width: 1024px) {
    background: rgba(19, 26, 49, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

.ariane {
  width: 1px;
  height: 75%;
  background-color: rgba(188, 158, 102, 0.3);
  position: fixed;
  left: 38px;
  top: 171px;

  @media (max-width: 576px) {
    display: none;
  }
}

.slash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(./assets/img/topo-slash.png),
    linear-gradient(180deg, #1b223a, #1b223a);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  padding: 0 20px;
  overflow: hidden;
  opacity: 1;

  & > img {
    max-width: 198px;
  }

  & > p {
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 0;
  }

  &.hidden {
    opacity: 0;
    transition: all 0.5s ease-out;
    visibility: hidden;
  }
}

canvas#line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.button {
  padding: 15px 50px;
  border-radius: 60px;
  border: 2px solid var(--white);
  font-size: 14px;
  width: fit-content;
  transition: all 0.3s ease-out;
  color: var(--white) !important;
  cursor: pointer;

  &:hover {
    background-color: var(--gold);
    border: 2px solid var(--gold);
    padding: 15px 70px;
  }
}

.btn-fleche {
  border-radius: 20rem;
  aspect-ratio: 1;
  padding: 17px 14px;
  border: 1px solid white;
  background-color: var(--bg);
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-out;
  position: relative;
  animation: ripple 0.8s ease-out infinite;

  & > div {
    position: absolute;
    left: 43.33px;
    z-index: -1;
    visibility: visible !important;
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    transition: all 0.3s ease-out;
    pointer-events: none;
    z-index: 1;

    & > div {
      width: 50px;
      height: 1px;
      background-color: var(--gold);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.3s ease-out;
    }

    & > span {
      opacity: 0;
      transition: opacity 0.3s ease-out;
      color: var(--white) !important;
      max-width: 160px;
    }

    @media (max-width: 992px) {
      display: none;
    }
  }

  &:hover {
    background-color: var(--gold);
    padding: 25px 22px;
    border: none;

    & > div {
      left: 59.33px;
      & > div {
        transform: scaleX(1);
      }

      & > span {
        opacity: 1;
      }
    }

    &::before {
      display: none;
    }
  }

  &::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    padding: 20px;
    border: 1px solid #ffffff;
    opacity: 1;
    animation-name: pulse-border;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }
}

@keyframes pulse-border {
  0% {
    padding: 20px;
    opacity: 1;
  }
  75% {
    padding: 30px;
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.titleL {
  font-size: var(--fs-titleL);
  line-height: var(--lh-titleL);
  letter-spacing: 4.08px;
  font-weight: 400;

  & > span {
    color: var(--gold);
  }
}

.title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);

  & > span {
    color: var(--gold);
  }
}

.subtitle {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  letter-spacing: var(--ls-subtitle);
}

.small-text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.wrapper {
  max-width: 1920px !important;
  margin: 0 auto;
  padding-inline: 115px;

  @media (max-width: 992px) {
    padding-inline: 40px;
  }

  @media (max-width: 576px) {
    padding-inline: 20px;
  }
}

.home .wrapper {
  max-width: var(--wrapper-home) !important;
  padding-inline: 115px;

  @media (max-width: 992px) {
    padding-inline: 60px;
  }

  @media (max-width: 576px) {
    padding-inline: 20px;
  }
}

.engagement {
  position: relative;
  scroll-margin-top: 300px;
  & > .marker-ariane {
    position: absolute;
    top: -80px;
    left: 28px;
    width: 20px;
    height: 1px;
    background-color: var(--gold);
    z-index: 1;
  }

  & > div.wrapper {
    position: relative;
    & > div {
      width: fit-content;
      position: absolute;
      right: 115px;
      top: -70px;
      z-index: 1;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      background-color: var(--blue);

      & > h2 {
        margin-bottom: 30px;
      }

      @media (max-width: 1200px) {
        top: -25px;
      }

      @media (max-width: 1100px) {
        right: 70px;
      }

      @media (max-width: 1050px) {
        right: 20px;
      }

      @media (max-width: 730px) {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 25px;
      }
    }
  }

  & > .engagement__img {
    position: relative;
    min-width: var(--wrapper-home);

    & > div {
      position: absolute;
      top: 16px;
      left: calc(50% - 88px);
      width: 0;
      height: 1px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;

      &::after {
        content: "";
        border-radius: 50%;
        padding: 20px;
        border: 1px solid #ffffff;
        opacity: 1;
        margin-left: -100%;
        animation-name: pulse-border;
        animation-duration: 0.8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
      }

      @media (max-width: 992px) {
        top: 13px;
        left: calc(50vw - 7.5%);
      }

      @media (max-width: 730px) {
        display: none;
      }
    }

    @media (max-width: 992px) {
      min-width: 100%;
    }
  }

  & > .engagement__img > svg {
    width: 100%;
    height: auto;
    max-height: 506px;
    z-index: -3;
    position: relative;

    @media (max-width: 730px) {
      margin-top: 50px;
    }
  }
}

.accompagnement {
  overflow-x: clip;
  position: relative;
  & > .marker-ariane {
    position: absolute;
    top: 50%;
    left: 28px;
    width: 20px;
    height: 1px;
    background-color: var(--gold);
    z-index: 1;
  }

  & > div:not(.marker-ariane) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 790px;

    & > .accompagnement__content {
      flex: 35%;

      & > p {
        margin-bottom: 10px;
        font-size: 16.5px;
      }

      & > span {
        width: 100%;
        height: 51px;
        display: block;

        @media (max-width: 900px) {
          display: none;
        }
      }

      & > div {
        display: flex;
        position: relative;
        margin-top: 10rem;

        & > a {
          position: absolute;
          top: 23%;
          left: 25px;
        }

        & > svg.chemin4.t1366 {
          position: absolute;
          left: 70px;
          bottom: 105px;
          z-index: -1;
          transform: scale(1.06) rotate(359deg);
          transform-origin: bottom;

          @media (max-width: 992px) {
            display: none;
          }

          @media (min-width: 1357px) {
            transform: scale(1.03) rotate(359deg);
          }

          @media (min-width: 1367px) {
            display: none;
          }
        }

        & > svg.chemin4.t1600 {
          display: none;

          @media (min-width: 1367px) and (max-width: 1601px) {
            display: block;
            position: absolute;
            left: 68px;
            bottom: 84px;
            z-index: -1;
            transform: rotate(0.5deg) scale(1.05);
            transform-origin: bottom;
          }
        }

        & > svg.chemin4.t1800 {
          display: none;

          @media (min-width: 1601px) {
            display: block;
            position: absolute;
            left: 70px;
            bottom: 94px;
            z-index: -1;
            transform: rotate(0.5deg) scale(1.03);
            transform-origin: bottom;
          }
        }

        @media (max-width: 900px) {
          margin-top: 2rem;
        }
      }

      @media (min-width: 1367px) {
        max-width: 535px;
        min-width: 535px;
      }
    }

    & > .accompagnement__expertises {
      position: relative;
      flex: 65%;
      display: flex;
      justify-content: flex-end;

      & > svg:first-of-type {
        position: absolute;
        max-width: 850px;
        top: -30%;
        right: -15%;
        z-index: -1;

        @media (max-width: 992px) {
          right: -30%;
        }

        @media (max-width: 900px) {
          top: -35%;
          left: -200px;
          scale: 0.8;
        }
      }

      & > div {
        width: 450px;
        height: 450px;
        border-radius: 200rem;
        aspect-ratio: 1;
        border: 1px solid var(--white);
        position: relative;
        z-index: 2;

        & > .accompagnement__conseil {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: absolute;

          & > img {
            width: 70px;
            height: 70px;
          }

          & > h3 {
            font-size: var(--fs-body);
            font-weight: 400;
            color: var(--white);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 30px;
            background-color: var(--blue);
            border: 1px solid var(--light-blue);
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
            border-radius: 55px;
            width: fit-content;

            & > span {
              color: var(--gold);
              font-size: 21px;
            }
          }

          &:first-of-type {
            top: -30px;
            left: calc(50% - (260px / 2));
          }

          &:nth-of-type(2) {
            bottom: 0;
            left: -65px;
          }

          &:nth-of-type(3) {
            bottom: 0;
            right: -75px;
          }
        }

        @media (max-width: 1200px) {
          right: 0px;
        }

        @media (max-width: 900px) {
          right: 0;
        }

        @media (max-width: 620px) {
          scale: 0.9;
        }

        @media (max-width: 560px) {
          scale: 0.7;
        }
      }

      & > .cross-top-right {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        display: none;
      }

      & > .cross-bottom-left {
        position: absolute;
        bottom: 100px;
        left: 50px;
        z-index: 1;
        display: none;
      }

      @media (max-width: 576px) {
        margin-top: -50px;
      }

      @media (max-width: 450px) {
        display: none;
      }
    }

    & > .accompagnement__expertisesMobile {
      display: none;
      width: 650px;
      height: 650px;
      aspect-ratio: 1;
      border-radius: 30rem;
      border: 1px solid var(--white);
      position: relative;
      margin-top: -630px;
      margin-bottom: 100px;
      z-index: -1;

      @media (max-width: 450px) {
        display: block;
      }

      & > div {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        transform-origin: top center;
        transition: background-color 0.5s ease-out;

        &:first-of-type {
          right: calc(50% + 77.5px);
          bottom: -90px;
        }

        &:nth-of-type(2) {
          right: calc(50% - 47.5px);
          bottom: -110px;
        }

        &:last-of-type {
          left: calc(50% + 77.5px);
          bottom: -90px;
        }

        & > h2 {
          font-size: 14px;
          text-align: center;
        }

        & > div {
          background-color: var(--blue);
          border-radius: 20rem;
          border: 1px solid var(--white);
          aspect-ratio: 1;
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    @media (max-width: 900px) {
      flex-direction: column;
      gap: 0px;
      min-height: 0;
      margin-bottom: 50px;
    }
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -150px;
    width: 277px;
    height: 180px;
    background-image: url(./assets/img/bg_shape_accomp.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }

  @media (max-width: 992px) {
    min-width: 100%;
    margin-top: 100px;
    margin-bottom: 50px;
  }

  @media (max-width: 900px) {
    overflow: hidden;
  }

  @media (max-width: 576px) {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}

.progression {
  position: relative;
  min-width: var(--wrapper-home);
  & > .marker-ariane {
    position: absolute;
    top: 50%;
    left: 28px;
    width: 20px;
    height: 1px;
    background-color: var(--gold);
    z-index: 1;
  }

  & > div.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    min-height: 794px;
    position: relative;

    & > .progression__content {
      margin-right: -20rem;
      margin-top: -10rem;
      display: flex;
      flex-direction: column;
      z-index: 1;

      & > div {
        width: 100%;
        height: 51px;

        @media (max-width: 900px) {
          display: none;
        }
      }

      & > p {
        font-size: 16.5px;
      }

      @media (max-width: 1300px) {
        margin-right: -29rem;
      }

      @media (max-width: 992px) {
        margin: 0;
      }

      @media (min-width: 1367px) {
        max-width: 535px;
      }

      @media (min-width: 1601px) {
        max-width: 580px;
      }
    }

    & > .progression__shapes {
      position: relative;
      left: 25px;
      top: 45px;

      & > svg {
        z-index: -1;

        @media (max-width: 992px) {
          width: 100%;
          height: auto;
        }
      }

      & > a {
        position: absolute;
        bottom: 130px;
        left: 110px;
        z-index: 1;

        @media (max-width: 992px) {
          bottom: 17%;
          left: 12%;
        }
      }

      @media (max-width: 992px) {
        left: 0;
        top: 0;
      }

      @media (max-width: 430px) {
        top: -60px;
      }
    }

    & > svg.chemin3.t1366 {
      position: absolute;
      z-index: -1;
      bottom: 175px;
      left: 7%;
      transform-origin: bottom;
      transform: rotate(362deg);

      @media (max-width: 992px) {
        display: none;
      }

      @media (min-width: 1367px) {
        display: none;
      }
    }

    & > svg.chemin3.t1600 {
      display: none;

      @media (min-width: 1367px) and (max-width: 1601px) {
        display: block;
        position: absolute;
        z-index: -1;
        bottom: 180px;
        left: 10%;
        transform-origin: bottom;
        transform: rotate(359deg) scale(1.06);
      }
    }

    & > svg.chemin3.t1800 {
      display: none;

      @media (min-width: 1601px) {
        display: block;
        position: absolute;
        z-index: -1;
        bottom: 170px;
        left: 11%;
        transform-origin: bottom;
        transform: rotate(359deg) scale(1.1);
      }
    }

    @media (max-width: 992px) {
      flex-direction: column;
      gap: 20px;
      min-height: 0;
      margin-bottom: 50px;
    }

    & > .cross-bottom-left {
      position: absolute;
      bottom: 100px;
      left: 15%;
      display: none;

      @media (max-width: 992px) {
        z-index: -1;
      }
    }

    & > .cross-top-center {
      position: absolute;
      top: 200px;
      right: 50%;
      display: none;

      @media (max-width: 992px) {
        z-index: -1;
      }
    }
  }

  @media (max-width: 992px) {
    min-width: 100%;
    margin-bottom: 120px;
  }
}

.etape {
  position: relative;
  overflow-x: clip;
  & > .marker-ariane {
    position: absolute;
    top: 50%;
    left: 28px;
    width: 20px;
    height: 1px;
    background-color: var(--gold);
    z-index: 1;
  }

  & > div.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    min-height: 831px;

    & > img {
      position: absolute;
      top: 0;
      right: 0;
    }

    & > .etape__shapes {
      position: relative;
      & > img {
        position: absolute;
        top: 0px;
        right: 35%;
        display: none;
      }

      & > svg.etape__bgshapes {
        @media (max-width: 1100px) {
          transform-origin: center;
          transform: scale(0.9) translateX(-30px);
        }

        @media (max-width: 992px) {
          width: 100%;
          height: auto;
          transform: none;
        }
      }

      & > a {
        position: absolute;
        right: 15%;
        bottom: 24%;
      }

      & > svg.chemin2.t1366 {
        position: absolute;
        bottom: 31%;
        right: 18.5%;
        z-index: -1;
        transform-origin: bottom;
        transform: rotate(357deg);

        @media (max-width: 992px) {
          display: none;
        }

        @media (min-width: 1367px) {
          display: none;
        }
      }

      & > svg.chemin2.t1600 {
        display: none;

        @media (min-width: 1367px) and (max-width: 1601px) {
          display: block;
          position: absolute;
          bottom: 31%;
          right: 18.5%;
          z-index: -1;
          transform-origin: bottom;
          transform: rotate(3deg);
        }
      }

      & > svg.chemin2.t1800 {
        display: none;

        @media (min-width: 1601px) {
          display: block;
          position: absolute;
          bottom: 30%;
          right: 16%;
          z-index: -1;
          transform-origin: bottom;
          transform: rotate(8deg);
        }
      }

      @media (max-width: 992px) {
        position: relative;
        width: 100%;
      }
    }

    & > .etape__content {
      margin-left: -400px;
      margin-top: -170px;
      max-width: 440px;

      & > div {
        display: flex;
        flex-direction: column;
        gap: 5px;

        & > p {
          font-size: 16.5px;
        }

        & > blockquote {
          margin: 0;
          color: var(--gold);
          font-style: italic;
          font-size: 16.5px;
        }
      }

      @media (max-width: 1100px) {
        margin-left: -500px;
        margin-top: -200px;
        max-width: 500px;
      }

      @media (max-width: 992px) {
        margin: 0;
        max-width: 100%;
        width: 100%;
      }

      @media (min-width: 1367px) {
        max-width: 535px;
      }

      @media (min-width: 1601px) {
        max-width: 600px;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: -80px;
      left: -250px;
      width: 100%;
      height: 100%;
      min-width: 1650px;
      background-image: url(./assets/img/bg-etape.svg);
      background-repeat: no-repeat;
      background-position: center left;
      background-size: contain;
      z-index: -1;
    }

    @media (max-width: 1200px) {
      &::after {
        min-width: 1500px;
        top: -50px;
      }
    }

    @media (max-width: 992px) {
      flex-direction: column-reverse;
      gap: 20px;
      min-height: 0;
      margin-bottom: 50px;

      &::after {
        display: none;
      }
    }
  }

  @media (max-width: 992px) {
    margin-bottom: 100px;
  }

  @media (max-width: 576px) {
    margin-bottom: 150px;
  }
}

.patrimoine {
  min-width: var(--wrapper-home);
  & > div.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    min-height: 800px;
    position: relative;

    & > .patrimoine__content {
      & > h2 {
        margin-bottom: 20px;
      }

      & > p {
        font-size: 16.5px;
      }

      @media (min-width: 1367px) {
        max-width: 535px;
      }

      @media (min-width: 1601px) {
        max-width: 600px;
      }
    }

    @media (max-width: 992px) {
      flex-direction: column;
      gap: 20px;
      min-height: 0;

      &::after {
        display: none;
      }
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: -50px;
      min-width: 1800px;
      min-height: 700px;
      width: 100%;
      height: 100%;
      background-image: url(./assets/img/bg-patrimoine.svg);
      background-repeat: no-repeat;
      background-position: center right -200px;
      background-size: contain;
      z-index: -1;
    }
  }

  & > .marker-ariane {
    position: absolute;
    bottom: 56px;
    left: 28px;
    width: 20px;
    height: 1px;
    background-color: var(--gold);
    z-index: 1;
  }

  & > div > .patrimoine__shapes {
    position: relative;
    display: flex;
    align-items: center;
    & > .patrimoine__btn {
      position: absolute;
      margin-left: 140px;
      margin-top: 40px;
      z-index: 1;

      @media (max-width: 992px) {
        margin: 0;
        left: 23%;
        bottom: 40%;
      }
    }

    & > .cross-top-left {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      display: none;
    }

    & > .cross-bottom-right {
      position: absolute;
      bottom: 50px;
      right: 200px;
      z-index: 1;
      display: none;
    }

    & > .patrimoine__bgshapes {
      @media (max-width: 992px) {
        width: 100%;
        height: auto;
      }
    }

    & > svg.patrimoine__shapes {
      @media (max-width: 992px) {
        height: auto;
      }
    }

    & > svg.chemin1.t1366 {
      position: absolute;
      bottom: 52%;
      overflow: visible;
      right: 50%;
      transform: rotate(2deg);
      transform-origin: bottom;
      z-index: -1;

      @media (max-width: 992px) {
        display: none;
      }

      @media (min-width: 1367px) {
        display: none;
      }
    }

    & > svg.chemin1.t1600 {
      display: none;

      @media (min-width: 1367px) and (max-width: 1601px) {
        display: block;
        position: absolute;

        bottom: 54%;
        right: 50%;
        transform-origin: bottom;
        transform: rotate(352deg);
      }
    }

    & > svg.chemin1.t1800 {
      display: none;

      @media (min-width: 1601px) {
        display: block;
        position: absolute;

        bottom: 50%;
        right: 62%;
        transform-origin: bottom;
        transform: scale(1.1) rotate(344deg);
      }
    }

    @media (max-width: 992px) {
      width: 100%;
    }
  }

  @media (max-width: 992px) {
    min-width: 100%;
  }
}

@media (max-width: 576px) {
  .marker-ariane {
    display: none;
  }
}

@media (max-width: 992px) {
  .home section {
    scroll-margin-top: 150px;
  }
}

/********* PAGE EXPERTISES ********/

.expertises {
  background: url(./assets/img/bg-top-left-expertises.svg), var(--blue);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 30%;
  overflow: clip;
  min-height: 100vh;
  min-height: 100dvh;

  & > div.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding-top: 25vh;

    & > .expertises__content {
      position: relative;
      flex: 60%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;

      & > .expertises__start {
        width: 445px;
        height: 445px;
        aspect-ratio: 1;
        border: 1px solid var(--white);
        border-radius: 200rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

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

          & > h2 {
            font-size: 14px;
            max-width: 135px;
            text-align: center;
            background-color: var(--blue);
          }

          &[data-expertise="entrepreneurs"] {
            top: -30px;
            left: calc(50% - 135);
          }

          &[data-expertise="investissements"] {
            bottom: 50px;
            left: -50px;
          }

          &[data-expertise="patrimoniale"] {
            bottom: 68px;
            right: -50px;
          }

          & > div {
            background-color: var(--blue);
            border-radius: 20rem;
            border: 1px solid var(--white);
            aspect-ratio: 1;
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease-out;

            &:hover {
              cursor: pointer;
              border: 0;
              background-color: var(--gold);
              transform: scale(1.25);

              & > img {
                transform: scale(1) !important;
                filter: brightness(0) invert(1);
              }
            }
          }

          &:hover {
            cursor: pointer;
          }
        }

        & > .aiguille {
          margin-top: -35px;
          transform-origin: 40px 120px;
          transform: rotate(var(--aiguille-rotation));
          transition: transform 0.3s ease-in-out;
        }

        &.hidden {
          display: none;
        }
      }

      & > .expertises__next {
        width: 445px;
        height: 445px;
        aspect-ratio: 1;
        border: 1px solid var(--white);
        outline: 1px solid var(--white);
        border-radius: 200rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        & > div {
          & > p {
            margin: 0;
            background-color: var(--blue);
            padding: 10px 15px;
            border-radius: 22px;
            position: absolute;

            &.active {
              background-color: var(--light-blue);
            }

            &:hover {
              cursor: pointer;
            }

            &.hidden {
              display: none;
            }
          }

          &.expertises__patrimoniale {
            position: absolute;
            width: 100%;
            height: 100%;
            & > p {
              &:first-of-type {
                top: -12px;
                left: calc(50% - 50px);
              }

              &:nth-of-type(2) {
                top: calc(50% - 19px);
                left: -41px;
              }

              &:nth-of-type(3) {
                bottom: -15px;
                left: calc(50% - 45px);
              }

              &:nth-of-type(4) {
                top: calc(50% - 19px);
                right: -45px;
              }
            }
          }

          &.expertises__investissements {
            position: absolute;
            width: 100%;
            height: 100%;
            & > p {
              &:first-of-type {
                top: -12px;
                left: calc(50% - 75px);
              }

              &:nth-of-type(2) {
                top: calc(50% - 28px);
                left: -63px;
                max-width: 215px;
                width: min-content;
                text-align: center;
              }

              &:nth-of-type(3) {
                bottom: -10px;
                left: calc(50% - 61.5px);
              }

              &:nth-of-type(4) {
                top: calc(50% - 19px);
                right: -85px;
              }
            }
          }

          &.expertises__entrepreneurs {
            position: absolute;
            width: 100%;
            height: 100%;
            & > p {
              &:first-of-type {
                top: -12px;
                left: calc(50% - 50px);
              }

              &:nth-of-type(2) {
                top: calc(35% - 19px);
                left: -41px;
              }

              &:nth-of-type(3) {
                bottom: 10px;
                left: calc(18% - 15px);
              }

              &:nth-of-type(4) {
                bottom: 10px;
                right: calc(20% - 35px);
              }

              &:nth-of-type(5) {
                top: calc(35% - 19px);
                right: -43px;
              }
            }
          }

          &.hidden {
            display: none;
          }
        }

        &.hidden {
          display: none;
        }

        & > .expertises__autres {
          display: flex;
          flex-direction: column;
          gap: 10px;
          position: relative;
          z-index: 2;

          & > span {
            width: 240px;
            height: 47px;
            padding: 15px !important;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        & > .expertises__indic {
          position: absolute;
          left: -150px;
          bottom: -68px;
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          gap: 10px;
          & > p {
            position: relative;
            font-size: var(--fs-small);
            padding: 0;
            background: none;
            max-width: 135px;

            & > span {
              color: var(--gold);
            }
          }

          @media (max-width: 992px) {
            left: 0;
          }
        }
      }

      & > img {
        position: absolute;
        bottom: -162px;
        left: calc(50% - 425px);
        z-index: -1;
        min-width: 850px;
      }

      @media (max-width: 992px) {
        align-self: center;
      }

      @media (max-width: 680px) {
        scale: 0.8;
      }

      @media (max-width: 430px) {
        scale: 0.65;
      }
    }

    & > .expertises__text {
      flex: 40%;
      position: relative;
      z-index: 1;

      & > div.expertises__textStart {
        display: flex;
        flex-direction: column;
        gap: 10px;

        & > div {
          display: flex;
          align-items: center;
          gap: 10px;

          p {
            margin: 0 !important;

            & > span {
              color: var(--gold);
            }
          }
        }

        &.hidden {
          display: none;
        }
      }

      & > .expertises__textContent {
        display: flex;
        flex-direction: column;
        gap: 10px;

        & > div:first-child {
          & > div {
            max-width: 60px;
            background-color: var(--light-blue);
            border-radius: 20rem;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            &.hidden {
              display: none;
            }

            & > img {
              filter: brightness(2);
            }
          }
        }

        & > div:nth-child(2) {
          .subtitle {
            letter-spacing: 2.2px;
            & > span {
              font-size: 35px;
              color: var(--gold);
              color: var(--Primaire-Or, #bc9e66);
              font-family: Candara;
              font-size: 35px;
              font-style: normal;
              font-weight: 400;
              line-height: 38px;
              letter-spacing: 3.5px;
            }
            &.hidden {
              display: none;
            }
          }
        }

        & > p {
          margin: 0;
          strong {
            color: var(--gold) !important;
            font-weight: 400 !important;
          }
        }

        &.hidden {
          display: none;
        }
      }
    }

    @media (max-width: 992px) {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 50px;
      padding-top: 150px;
      padding-bottom: 100px;
    }
  }

  @media (max-width: 992px) {
    background-image: none;
  }

  @media (max-width: 600px) {
    min-height: 0;
  }

  @media (max-width: 576px) {
    min-height: 0;
  }

  @media (max-width: 500px) {
    display: none;
  }
}

.expertises-mobile {
  background: url(./assets/img/bg-top-expertises-mobile.svg),
    url(./assets/img/bg-bottom-expertises-mobile.svg), var(--blue);
  background-repeat: no-repeat no-repeat, no-repeat;
  background-position: top center, bottom left;
  background-size: contain;
  overflow: clip;
  min-height: 100vh;
  min-height: 100dvh;
  display: none;
  padding-bottom: 100px;

  & > div.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200px;

    & > .expertises-mobile__wheel {
      width: 650px;
      height: 650px;
      aspect-ratio: 1;
      border-radius: 30rem;
      border: 1px solid var(--white);
      margin-top: -600px;
      position: relative;
      margin-bottom: 150px;
      display: grid;
      place-items: center;
      transform: rotate(-90deg);

      & > div {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        transform-origin: top center;
        transition: background-color 0.5s ease-out;

        & > h2 {
          font-size: 14px;
          text-align: center;
        }

        & > div {
          background-color: var(--blue);
          border-radius: 20rem;
          border: 1px solid var(--white);
          aspect-ratio: 1;
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        &.active {
          & > div {
            transition: background-color 0.5s ease-out;
            background-color: var(--light-blue);
            border: 1px solid var(--light-blue);

            & > img {
              filter: brightness(0) invert(1);
            }
          }
        }
      }
    }

    & > .expertises-mobile__textStart {
      & > p {
        font-size: 14px;
      }
      & > p:last-of-type {
        font-style: italic;

        & > span {
          color: var(--gold);
        }
      }
    }

    & > .expertises-mobile__textContent {
      width: 100%;

      & > .accordion {
        display: none;
        flex-direction: column;
        gap: 50px;

        & > .accordion__content {
          & > h3 {
            margin: 0;
          }
          & > .accordion__text {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s ease-out;
            background: #1b223a;
            margin-top: -22px;
            border-radius: 0px 0px 25px 25px;
            padding: 40px 25px 15px 25px;
            margin-bottom: -50px;

            &[aria-hidden="false"] {
              background: none;
              grid-template-rows: 1fr;
              box-shadow: 0px 5px 6px 0px #131a31;
              margin-bottom: 0;
            }

            & > div {
              overflow: hidden;
            }

            p {
              font-size: 14px;
            }

            h2.subtitle {
              font-size: 18px !important;
              font-style: normal !important;
              font-weight: 400 !important;
              line-height: 15px !important;
              letter-spacing: 1.8px !important;
              margin-bottom: 15px !important;

              span {
                color: var(--gold) !important;
                font-size: 23px !important;
                font-style: normal !important;
                line-height: 40px !important;
                letter-spacing: 2.5px !important;
              }
            }

            strong {
              color: var(--gold) !important;
              font-weight: 400 !important;
            }
          }
        }
        .accordion__trigger {
          background-color: var(--blue);
          border: 1px solid var(--white);
          border-radius: 10rem;
          font-size: 16px;
          color: inherit;
          position: relative;
          display: flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          width: 100%;
          padding: 10px 15px;
          outline: 0;

          &::after {
            content: "";
            position: absolute;
            background-image: url(./assets/img/arrow-accordion.svg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            width: 14px;
            height: 8px;
            right: 15px;
          }

          &[aria-expanded="true"] {
            background: var(--light-blue);
            border: 0;

            &::after {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }

  @media (max-width: 500px) {
    display: block;
  }
}

/********* PAGE VISION ********/

.page-id-427 .elementor-element-5de47e0 {
  position: relative;
  overflow-x: clip;

  &::after {
    content: "";
    position: absolute;
    top: 34%;
    left: -2%;
    width: 600px;
    height: 600px;
    z-index: 0;
    aspect-ratio: 1;
    background-image: url(./assets/img/bg-valeur-ajoutee.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
}

/********* PAGE MANIFESTE ********/

.manifeste {
  background: linear-gradient(
    to right,
    var(--bg) 0vw,
    var(--bg) 20vw,
    var(--blue) 20vw,
    var(--blue) 100%
  );
  position: relative;
  overflow: clip;

  & > div.wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center;
    min-height: 100vh;

    div.manifeste__left {
      background-color: var(--bg);
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      padding-right: 20px;
      min-width: 325px;
      position: relative;
      box-shadow: 6px 0px 15px 0px rgba(0, 0, 0, 0.15);

      div.manifeste__navigation {
        position: absolute;
        right: -20px;
        top: 43%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 60px;
        z-index: 10;
        width: fit-content;
        height: fit-content;

        div,
        .swiper-button-prev,
        .swiper-button-next {
          position: relative;
          opacity: 1;
          left: 0;
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 1;
          -webkit-aspect-ratio: 1;
          border-radius: 20rem;
          border: 1px solid var(--white);
          background-color: var(--bg);
          transition: all 0.3s ease-out;

          &::after {
            color: var(--white);
            font-size: 14px;
          }

          &:hover {
            background-color: var(--gold);
            border-color: var(--gold);
          }

          &:first-of-type {
            @media (max-width: 830px) {
              left: -15px !important;
            }
          }

          &:last-of-type {
            @media (max-width: 830px) {
              right: -15px !important;
              left: auto !important;
            }
          }
        }

        @media (max-width: 830px) {
          top: 400px !important;
          left: 0 !important;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
        }
      }

      & > .swiper-pagination {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 40px;
        width: fit-content;

        .swiper-pagination__title {
          width: max-content;
          height: auto;
          border-radius: 0;
          background: none;
          color: var(--white);
          opacity: 1;

          &.swiper-pagination-bullet-active {
            color: var(--light-blue);
          }
        }

        @media (max-width: 830px) {
          display: none;
        }
      }

      & > h1 {
        font-size: 48px;
        line-height: 1.1;

        @media (max-width: 830px) {
          font-size: 40px;
        }
      }

      @media (max-width: 830px) {
        box-shadow: none;
        min-width: 0;
      }
    }

    & > .manifeste__right {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-image: url(./assets/img/bg-manifeste-right.svg);
      background-repeat: no-repeat;
      background-position: bottom right;
      background-size: contain;
      padding-top: 90px;

      .swiper-wrapper {
        max-width: 100vw;
        margin-left: -15vw;
        padding-block: 10px;

        @media (max-width: 1200px) {
          min-width: 100%;
        }

        @media (max-width: 992px) {
          margin-left: -12vw;
        }

        @media (max-width: 830px) {
          max-width: 100vw;
          margin-left: 0;
        }
      }

      .swiper-slide {
        width: 440px !important;
        background-color: var(--bg);
        padding: 34px 50px 50px 50px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        border: 1px solid var(--gold);
        border-radius: 16px;
        height: auto;

        & > .title {
          color: var(--gold);
          margin: 0;
        }

        & > p {
          margin: 0;
        }

        & > img {
          max-width: 60px;
        }

        @media (max-width: 830px) {
          width: 100% !important;
        }

        @media (max-width: 450px) {
          padding: 30px;
        }
      }

      @media (max-width: 830px) {
        padding-bottom: 50px;
        padding-top: 0;
        align-items: flex-start;
      }
    }

    @media (max-width: 830px) {
      grid-template-columns: 100%;
      grid-template-rows: auto 1fr;
      gap: 50px;
      min-height: 100dvh;
    }
  }

  &::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -200px;
    width: 520px;
    height: 470px;
    background-image: url(./assets/img/bg-manifeste-left.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    z-index: 0;
  }

  @media (max-width: 830px) {
    background: linear-gradient(
      to bottom,
      var(--bg) 0vw,
      var(--bg) 500px,
      var(--blue) 500px,
      var(--blue) 100%
    );
    padding-top: 150px;
  }
}

.page-id-991 .elementor-element-779ec6c {
  min-width: 430px !important;

  @media (max-width: 1024px) {
    min-width: 100% !important;
  }
}

/********* PAGE GARANTIES ********/

body.page-id-369 {
  overflow-x: clip;
}

.bg-top-garanties {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: -400px;
    right: -325px;
    min-width: 1500px;
    height: 1210px;
    background-image: url(./assets/img/bg-top-garanties.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
  }

  @media (max-width: 1100px) {
    &::after {
      bottom: -50%;
      left: 0;
      height: 1000px;
      background-size: contain;
    }
  }
}

.bg-shape-left-1 {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 112px;
    aspect-ratio: 1;
    background-image: url(./assets/img/bg-shape-left-1.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: -1;
  }
}

/********* PAGE EQUIPE ********/

.bg-shape-françois {
  position: relative;
  overflow-x: clip;

  &::after {
    content: "";
    position: absolute;
    top: -50px;
    left: -125px;
    width: 720px;
    height: 810px;
    background-image: url(./assets/img/bg-shape-françois.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: -1;
  }
}

.bg-shape-maxime {
  position: relative;
  overflow-x: clip;

  &::after {
    content: "";
    position: absolute;
    bottom: -284px;
    right: -400px;
    width: 1100px;
    height: 1000px;
    background-image: url(./assets/img/bg-shape-maxime.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: -1;
  }

  @media (max-width: 930px) {
    &::after {
      bottom: -96%;
    }
  }

  @media (max-width: 767px) {
    &::after {
      top: 0;
    }
  }
}

.guillemet-equipe .elementor-icon {
  background-image: url(./assets/img/guillemet-manifeste.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/********* PAGE CONTACT ********/

.elementor-form .elementor-message:before {
  display: none;
}

.elementor-form .elementor-field-group {
  align-items: flex-start;
  flex-direction: column;
}

.elementor-form input[type="email"] {
  max-height: 47px;
}

.bg-shape-contact {
  position: relative;
  overflow-x: clip;

  &::after {
    content: "";
    position: absolute;
    top: -130px;
    right: -8%;
    width: 520px;
    height: 475px;
    background-image: url(./assets/img/bg-shape-contact.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 0;
  }

  @media (max-width: 776px) {
    &::after {
      display: none;
    }
  }

  .elementor-element-62c4f8b {
    z-index: 1;
  }
}

/********* FOOTER ********/

.page-id-991,
.page-id-99,
.page-id-1176,
.page-id-532,
.page-id-2331 {
  .footer__start {
    background-color: var(--bg) !important;

    &::after {
      background-color: var(--bg) !important;
    }
  }
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1000000;
  & > .footer__start {
    display: flex;
    align-items: center;
    width: 90%;
    justify-content: center;
    background-color: var(--blue);
    border-radius: 50px 50px 0 0;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease-out;

    & > div {
      position: absolute;
      bottom: 10px;
      z-index: 1;
      transition: opacity 0.3s ease-out;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 5px;
      left: calc(50% - 12.5px);
      width: 25px;
      height: 25px;
      background-color: var(--blue);
      transform: rotate(45deg);
      transition: all 0.3s ease-out;
      border-radius: 5px;
    }

    &:hover {
      padding-top: 15px;

      &::after {
        bottom: 10px;
      }

      & > div {
        opacity: 0.5;
      }
    }

    &.hidden {
      display: none;
    }
  }

  & > .footer__overlay {
    background: rgba(79, 120, 195, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1001;
    bottom: 0;

    &.hidden {
      display: none;
    }
  }

  & > .footer__content {
    background-color: var(--blue);
    display: flex;
    flex-direction: column;
    border-radius: 50px 50px 0px 0px;
    position: relative;
    z-index: 1002;

    & > div {
      &:nth-of-type(1) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 60px;
        width: 100%;
        padding: 90px 20px 60px 20px;
        position: relative;

        & > .footer__close {
          position: absolute;
          top: 50px;
          right: 20px;
          cursor: pointer;
        }

        & > .footer__logo {
          max-width: 100px;
        }

        & > .footer__partners {
          display: flex;
          align-items: center;
          gap: 30px;

          & > img {
            &:first-of-type {
              max-width: 130px;
            }

            &:nth-of-type(2) {
              max-width: 65px;
            }
          }
        }

        & > .footer__divider {
          width: 1px;
          height: 100px;
          background-color: var(--light-blue);

          @media (max-width: 576px) {
            display: none;
          }
        }

        & > .footer__newsletter {
          & > .tnp-subscription {
            & > form {
              display: flex !important;
              align-items: stretch !important;
            }

            * {
              margin: 0 !important;
            }

            label {
              display: none !important;
            }

            .tnp-email {
              border-radius: 0 !important;
              border: 2px solid #4f78c3 !important;
              background: transparent !important;
              height: auto !important;
              color: var(--white) !important;
            }

            .tnp-submit {
              cursor: pointer !important;
              background: #4f78c3 !important;
              border: 1px solid #4f78c3 !important;
              border-radius: 0 !important;
              color: #ffffff !important;
              height: 100% !important;

              &:hover {
                background-color: var(--gold) !important;
              }
            }
          }

          & > span {
            font-size: 22px;
            letter-spacing: 2.2px;
          }

          & > p {
            color: var(--gold);
            font-size: 16px;
            letter-spacing: 1.6px;
            margin-bottom: 20px;
            font-weight: bold;
          }
        }

        & > .footer__reseaux {
          display: flex;
          flex-direction: column;
          & > p {
            color: var(--gold);
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 1.6px;
            margin-bottom: 20px;
          }

          & > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
          }
        }

        @media (max-width: 992px) {
          flex-wrap: wrap;
        }

        @media (max-width: 576px) {
          flex-direction: column;
          gap: 40px;
        }
      }

      &:last-of-type {
        background-color: var(--bg);
        padding: 30px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;

        & > p,
        & > a {
          margin: 0;
          font-size: 12px;
        }

        & > .footer__divider {
          height: 15px;
          width: 2px;
          background-color: var(--white);
        }

        &.hidden {
          display: none;
        }
      }
    }

    &.hidden {
      display: none;
    }
  }
}