/* Boutons principaux */



.home-staging .btn,

.real-estate .btn,

.concept .btn,

.news .btn,

.works .btn {

  display: flex;

  align-items: center;

  justify-content: center;

  border: clamp(0.1rem, calc(1px + (2 - 1) * var(--vw-desktop-range)), 0.2rem) solid var(--black);

  background: var(--white);

  transition: .3s;

  height: var(--btn-height);

  width: var(--btn-width);

  max-width: 100%;

  font-size: var(--fs-body-md);

  letter-spacing: 0;

  padding-inline: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);

  position: relative;

  margin: var(--space-40-80) auto 0;

}



.home-staging .btn:hover,

.real-estate .btn:hover,

.concept .btn:hover,

.news .btn:hover,

.works .btn:hover {

  background: var(--lightblue);

  border-color: var(--lightblue);

  color: var(--black);

}



.home-staging .btn svg,

.real-estate .btn svg,

.concept .btn svg,

.news .btn svg,

.works .btn svg {

  position: absolute;

  right: 1.6rem;

  top: 50%;

  transform: translateY(-50%);

}



/* MEGA MENU */



.mega {

  background: var(--black);

  height: 100vh;

  width: 100vw;

  position: fixed;

  z-index: 9999;

  inset: 0 auto auto 0;

  overflow: scroll;

  transform: translateX(-100vw);

  transition: .4s;

}



body.visible .mega {

  transform: translateX(0);

}



.mega__grid {

  padding:

    clamp(6rem, calc(60px + (100 - 60) * var(--vw-desktop-range)), 10rem) 0 clamp(4rem, calc(40px + (75 - 40) * var(--vw-desktop-range)), 7.5rem) 0;

}



.bg-menu {

  width: clamp(80%, 80% + 10vw, 90%);

  bottom: 0;

  height: auto;

  position: fixed;

  max-width: 168.7rem;

  left: 50%;

  transform: translateX(-50%);

}



.bg-menu img {

  width: 100%;

  height: auto;

}



.mega a,

.mega p {

  color: var(--white);

  transition: .3s;

}



.mega a:hover {

  color: var(--lightblue);

}



.mega-bt {

  text-align: center;

}



.mega-bt p {

  font-size: clamp(1.4rem, calc(14px + (18 - 14) * var(--vw-desktop-range)), 1.8rem);

  line-height: clamp(3.2rem, calc(32px + (40 - 32) * var(--vw-desktop-range)), 4rem);

  letter-spacing: 0;

  font-weight: 400;

  margin: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem) 0 0 0;

}



.mega-bt p:last-of-type {

  font-weight: 500;

  font-size: clamp(2rem, calc(20px + (30 - 20) * var(--vw-desktop-range)), 3rem);

  line-height: clamp(3.2rem, calc(32px + (40 - 32) * var(--vw-desktop-range)), 4rem);

  letter-spacing: clamp(0.2rem, calc(2px + (5 - 2) * var(--vw-desktop-range)), 0.5rem);

  margin:

    clamp(1.6rem, calc(16px + (20 - 16) * var(--vw-desktop-range)), 2rem) 0 clamp(2.4rem, calc(24px + (45 - 24) * var(--vw-desktop-range)), 4.5rem) 0;

}



.mega-bt .social {

  display: flex;

  gap: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

  margin: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem) auto 0;

  justify-content: center;

  align-items: center;

  position: relative;

  z-index: 15;

}



.close {

  width: clamp(5rem, calc(50px + (80 - 50) * var(--vw-desktop-range)), 8rem);

  height: clamp(5rem, calc(50px + (80 - 50) * var(--vw-desktop-range)), 8rem);

  position: absolute;

  top: clamp(1.2rem, calc(12px + (25 - 12) * var(--vw-desktop-range)), 2.5rem);

  right: clamp(1.2rem, calc(12px + (25 - 12) * var(--vw-desktop-range)), 2.5rem);

  border: 1px solid var(--white);

  cursor: pointer;

  transition: .3s;

}



.close::after,

.close::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  height: .2rem;

  width: clamp(2rem, calc(20px + (28 - 20) * var(--vw-desktop-range)), 2.8rem);

  transform: translate(-50%, -50%) rotate(45deg);

  background: var(--white);

  transition: .3s;

}



.close::before {

  transform: translate(-50%, -50%) rotate(-45deg);

}



.close:hover {

  border-color: var(--lightblue);

}



.close:hover::before,

.close:hover::after {

  background: var(--lightblue);

}



/* TO TOP */



.totop-btn {

  position: fixed;

  right: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);

  bottom: clamp(1.6rem, calc(16px + (30 - 16) * var(--vw-desktop-range)), 3rem);

  width: clamp(3.2rem, calc(32px + (42 - 32) * var(--vw-desktop-range)), 4.2rem);

  height: clamp(3.2rem, calc(32px + (42 - 32) * var(--vw-desktop-range)), 4.2rem);

  z-index: 999;

  opacity: 1;

  visibility: visible;

  transform: translateX(0);

  transition: opacity .3s ease, transform .3s ease, background .3s ease;

}



.totop-btn.inactive {

  opacity: 0;

  visibility: hidden;

  transform: translateX(8rem);

}



.totop-btn .circle-bg {

  fill: var(--white);

  transition: fill .3s ease;

}



.totop-btn .arrow {

  stroke: var(--black);

  transition: stroke .3s ease;

}



.totop-btn.visible {

  opacity: 1;

  visibility: visible;

  transform: translateX(0);

}



.totop-btn:hover .circle-bg {

  fill: var(--lightblue);

}



.totop-btn:hover .arrow {

  stroke: var(--white);

}

@media screen and (max-width:1025px) {

  /* To top mobile */

  .totop-btn {

    right: auto;

    left: 50%;

    width: 4.2rem;

    height: 4.2rem;

    transform: translate(-50%);

  }

}



/* FOLLOW CTA */



.follow-ctn {

  inset: clamp(24rem, calc(240px + (200 - 240) * var(--vw-desktop-range)), 48.5rem) 0 auto auto;

  position: fixed;

  z-index: 1000;



  /* caché par défaut */

  opacity: 0;

  visibility: hidden;

  transform: translateX(4rem);

  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;

}



.follow-ctn.is-visible {

  opacity: 1;

  visibility: visible;

  transform: translateX(0);

}



.follow-ctn .follow {

  /* width: clamp(7rem, calc(70px + (100 - 70) * var(--vw-desktop-range)), 10rem); */
  /* width: clamp(5rem, calc(50px + (100 - 50) * var(--vw-desktop-range)), 6.5rem); */
  width: clamp(6rem, calc(60px + (100 - 60) * var(--vw-desktop-range)), 7rem);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  writing-mode: vertical-rl;

  text-orientation: mixed;

  font-weight: 500;

  font-size: clamp(1.5rem, calc(15px + (20 - 15) * var(--vw-desktop-range)), 2rem);

  /* line-height: clamp(2rem, calc(20px + (30 - 20) * var(--vw-desktop-range)), 3rem); */
  line-height: 1.4;

  letter-spacing: clamp(0.3rem, calc(3px + (10 - 3) * var(--vw-desktop-range)), 1rem);

  cursor: pointer;

}



.follow-ctn .follow:first-of-type {

  /* height: clamp(20rem, calc(200px + (320 - 200) * var(--vw-desktop-range)), 32rem); */
  height: clamp(15rem, calc(150px + (300 - 150) * var(--vw-desktop-range)), 24rem);

  background: var(--black);

  border-top-left-radius: 1rem;

}



.follow-ctn .follow:first-of-type:hover {

  background: var(--lightblue);

}



.follow-ctn .follow:last-of-type {

  height: clamp(18rem, calc(180px + (280 - 180) * var(--vw-desktop-range)), 28rem);

  /* background: var(--blue); */

  border-bottom-left-radius: 1rem;

}



.follow:last-of-type:hover {

  /* background: var(--lightblue); */

}





/* BANNER SOUS-PAGES */



.sec-banner {

  background: var(--lightgray);

  /* height: clamp(28rem, calc(280px + (453 - 280) * var(--vw-desktop-range)), 45.3rem); */

  height: clamp(34rem, calc(280px + (453 - 280) * var(--vw-desktop-range)), 45.3rem);

}



.inner-sec-banner {
  padding:

    clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem) 0 clamp(5rem, calc(50px + (90 - 50) * var(--vw-desktop-range)), 9rem);

  padding-top: 9rem;
  padding-bottom: 6.5rem;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  flex-direction: column;
  position: relative;
  text-align: center;
  /* height: 100%; */

}

/* @media screen and (min-width: 1024px) {

  .sec-banner {

    height: calc(440 * 100vw / 1920);

    position: relative;

  }

  .inner-sec-banner {

    padding: 0;

  }

  .inner-sec-banner h2 {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    line-height: 1.5;

    bottom: calc(64 * 100vw / 1920);

  }

  .sec-banner h2.has-to-move.inview {

    transform: translateX(-50%) !important;

  }

} */



.sec-banner h2 {

  text-align: center;

  font-size: clamp(3.6rem, calc(36px + (56 - 36) * var(--vw-desktop-range)), 5.6rem);

  letter-spacing: 0;

}

.sec-banner picture {

  margin: auto;

  text-align: center;

  width: 100%;

  display: flex;

  max-width: fit-content;

  /* margin-top: -12px; */

}

.sec-banner picture img {

  width: 100%;

  height: auto;

}

.banner-title-bg {

  margin: auto;

  max-width: max-content;

  text-align: center;

  width: 100%;

  display: flex;

  margin-top: -12px;

  justify-content: center;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

}

.banner-title-bg img {

  height: auto;

  width: 100%;

}

.banner-title {

  font-weight: 700;

  font-size: clamp(14rem, calc(140px + (280 - 140) * var(--vw-desktop-range)), 28rem);

  line-height: clamp(3.2rem, calc(32px + (60 - 32) * var(--vw-desktop-range)), 6rem);

  color: var(--white);

  text-align: center;

  letter-spacing: 0;

  opacity: 0.5;

  margin-top: clamp(4rem, calc(40px + (80 - 40) * var(--vw-desktop-range)), 8rem);

}

.inner-sec-banner .banner-img {
  max-width: 10rem;
  margin: auto;
}

.inner-sec-banner img {

  /* width: clamp(120px, calc(120px + (240 - 120) * var(--vw-desktop-range)), 240px);

  height: clamp(120px, calc(120px + (240 - 120) * var(--vw-desktop-range)), 240px); */

  object-fit: contain;

  margin-bottom: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

  position: relative;

  z-index: 10;
  width: 100%;
  height: auto;

  /* width: fit-content;

  height: fit-content; */

}

.subtitle {
  font-size: clamp(1.65rem, calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1), 2.64rem);
  line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);
  padding-left: 0rem;
  padding-right: 0rem;
  margin-top: clamp(3rem, calc(30px + (40 - 30) * var(--vw-desktop-range)), 4rem);
}

@media (max-width: 1025px) {

  .subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }


  .inner-sec-banner {

    /* padding-top: clamp(2rem,

        calc(2rem + (4 - 2) * ((100vw - 360px) / 665)),

        4rem);

    padding-bottom: clamp(5rem,

        calc(5rem + (9 - 5) * ((100vw - 360px) / 665)),

        9rem);

    margin-top: clamp(-10rem,

        calc(-10rem + (-20 + 10) * ((100vw - 360px) / 665)),

        -20rem); */
    padding-top: 2rem;
    padding-bottom: 2rem;

  }


  .inner-sec-banner .banner-img {
    max-width: 8rem;
  }



  .sec-banner h2 {

    font-size: clamp(2.4rem,

        calc(2.4rem + (5.6 - 2.4) * ((100vw - 360px) / 665)),

        5.6rem);

  }



  .sec-banner picture {

    margin-top: clamp(-4px,

        calc(-4px + (-12 + 4) * ((100vw - 360px) / 665)),

        -12px);

  }

  .inner-sec-banner figure img {

    width: 100%;

    height: auto;

  }

  .inner-sec-banner figure {

    max-width: clamp(140px,

        calc(140px + (240 - 140) * ((100vw - 360px) / 665)),

        240px);

    margin-inline: auto;

  }



  .banner-title-bg {

    margin: auto;

    text-align: center;

    width: 100%;

    display: flex;

    justify-content: center;

    position: absolute;

    /* margin-top: clamp(-1rem, calc(-10px + (-20 + 10) * var(--vw390)), -2rem); */

  }



  /* .banner-title {

    font-weight: 700;

    font-size: clamp(6rem, calc(60px + (120 - 60) * var(--vw390)), 12rem);

    line-height: clamp(1.8rem, calc(18px + (32 - 18) * var(--vw390)), 3.2rem);

    color: var(--white);

    text-align: center;

    letter-spacing: 0;

    opacity: 0.5;

    margin-top: clamp(2rem, calc(20px + (40 - 20) * var(--vw390)), 4rem);

  } */

  .banner-title {

    font-weight: 700;

    font-size: clamp(2.6rem, calc(26px + (52 - 26) * var(--vw390)), 5.2rem);

    line-height: clamp(1.0rem, calc(10px + (20 - 10) * var(--vw390)), 2.0rem);

    color: var(--white);

    text-align: center;

    letter-spacing: 0;

    opacity: 0.5;

    margin-top: clamp(1rem, calc(10px + (20 - 10) * var(--vw390)), 2rem);

  }





  .sec-banner {

    /* margin-top: calc(60 * 100vw / 390); */

    height: auto;

  }

}





.page .first-sec,

.page .sec-first {

  /* margin: clamp(3.5rem, calc(35px + (60 - 35) * var(--vw-desktop-range)), 6rem) auto 0; */

  margin: clamp(5rem, calc(50px + (90 - 50) * var(--vw-desktop-range)), 9rem) auto 0;

  padding: 0 3rem;

  max-width: 153.2rem;

  width: 100%;

}



.page .first-sec .title,

.page .sec-first .title {

  font-size: clamp(3.6rem, calc(36px + (56 - 36) * var(--vw-desktop-range)), 5.6rem);

  line-height: clamp(5rem, calc(50px + (84 - 50) * var(--vw-desktop-range)), 8.4rem);

  text-align: center;

  font-weight: 500;

}



/** Titles */

.main-title {

  font-size: clamp(3.6rem, calc(36px + (56 - 36) * var(--vw-desktop-range)), 5.6rem);

  font-weight: 500;

  text-align: center;

  margin-top: clamp(3.5rem, calc(35px + (60 - 35) * var(--vw-desktop-range)), 6rem);

  line-height: clamp(5rem, calc(50px + (84 - 50) * var(--vw-desktop-range)), 8.4rem);

  padding: 0 2rem;

}



.sub-title {

  font-size: clamp(3.6rem, calc(36px + (56 - 36) * var(--vw-desktop-range)), 5.6rem);

  position: relative;

  font-weight: 500;

  text-align: center;

  margin: clamp(6rem, calc(60px + (100 - 60) * var(--vw-desktop-range)), 10rem) 0 0 0;
  width: fit-content;
  margin-inline: auto;

}



.sub-title--white {

  color: var(--white);

}



.sub-title::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  height: clamp(0.5rem, calc(5px + (8 - 5) * var(--vw-desktop-range)), 0.8rem);

  width: clamp(2.4rem, calc(24px + (40 - 24) * var(--vw-desktop-range)), 4rem);

  background: var(--blue);

  transform: translate(-50%, clamp(1.8rem, calc(18px + (30 - 18) * var(--vw-desktop-range)), 3rem));
  width: 100%;

}

.overline {

  background: var(--black);

  color: var(--white);

}

.blue_tytle {
  font-size: clamp(2.4rem, calc(24px + (50 - 24) * var(--vw-desktop-range)), 5rem);

  line-height: 6rem;

  letter-spacing: 0;

  font-weight: bold;

  color: var(--blue);
}


@media screen and (max-width: 1025px) {

  .bg-menu {

    display: contents;

  }

  .page .first-sec,

  .page .sec-first {

    margin: clamp(2rem, calc(20px + (35 - 20) * var(--vw390)), 3.5rem) auto 0;

  }

  .page .first-sec .title,

  .page .sec-first .title {

    font-size: clamp(2.4rem, calc(24px + (32 - 24) * var(--vw390)), 3.2rem);

    line-height: clamp(3.2rem, calc(32px + (44 - 32) * var(--vw390)), 4.4rem);

  }

  .main-title {

    font-size: clamp(2.4rem, calc(24px + (32 - 24) * var(--vw390)), 3.2rem);

    margin-top: clamp(2rem, calc(20px + (35 - 20) * var(--vw390)), 3.5rem);

    line-height: clamp(3.2rem, calc(32px + (44 - 32) * var(--vw390)), 4.4rem);

  }

  .sub-title {

    font-size: clamp(2.2rem, calc(24 * var(--vw390)), 3.2rem);

    margin: clamp(6rem, calc(70 * var(--vw390)), 8rem) 0 0 0;

    line-height: 1.5;

    font-weight: 700;
    width: fit-content;
    margin-inline: auto;

  }

  .sub-title::after {

    height: clamp(0.4rem, calc(5 * var(--vw390)), 0.6rem);

    width: clamp(2.6rem, calc(30 * var(--vw390)), 3.2rem);
    width: 100%;

  }

  .page-interior-coordinate .sub-title {

    margin-top: clamp(6rem, calc(70 * var(--vw390)), 8rem);

  }

  .blue_tytle {

    font-size: clamp(1.8rem, calc(20 * var(--vw390)), 3rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }

  .blue_radius_box p.blue_tytle:before {
    top: 0.4em;
  }

}





.breadcrumb {

  background: none;

  padding: 0 10px;

  color: #ddd;

  background: #fff;

}

.breadcrumb-ctn {

  padding-bottom: 4rem;

  padding-top: 4rem;

}

.breadcrumb span {

  color: var(--black);

  font-size: 14px;

  margin: 0 4px;

  font-size: 1.8rem;

  font-weight: 400;

  line-height: 2.5rem;

  letter-spacing: 1.8px;

}

.breadcrumb span.current-item {

  color: var(--gray);

}

.breadcrumb a {

  transition: all 0.4s ease;

  font-size: 1.8rem;

  font-weight: 400;

  line-height: 2.5rem;

  letter-spacing: 1.8px;

}

.breadcrumb a span {

  color: var(--black);

  font-size: 1.8rem;

  font-weight: 400;

  line-height: 2.5rem;

  letter-spacing: 1.8px;

}

@media screen and (min-width: 1025px) {

  .breadcrumb {

    width: 100%;

    max-width: 1600px;

    margin-left: auto;

    margin-right: auto;

    padding: 0 40px;

  }

  .breadcrumb-ctn {

    padding-top: 10px;

    max-width: 1530px;

    width: 100%;

    padding-bottom: 10px;

    margin: auto;

  }

}

@media screen and (max-width: 1024px) {

  .breadcrumb-ctn {

    padding-bottom: 1rem;

    padding-top: 1rem;

  }

  .breadcrumb span {

    font-size: 1.4rem;

  }

  .breadcrumb a {

    font-size: 1.4rem;

  }

  .breadcrumb a span {

    font-size: 1.4rem;

  }

}









/* ============================

   SCROLL ANIMATIONS (PC ONLY)

   ============================ */


@media (max-width: 1025px) {

  .mega-bt .social a img {
    width: 80%;
  }
}

@media (min-width: 1026px) {



  /* --- ÉTAT INITIAL : caché / décalé --- */



  .has-to-move,

  .has-to-move-01,

  .has-to-move-02,

  .sec-banner p.has-to-move,

  .sec-banner img.has-to-move,

  .sec-banner h2.has-to-move {

    opacity: 0;

    filter: blur(4px);

    transform: translateY(20px);

    transition:

      opacity 0.7s cubic-bezier(.2, .7, .2, 1),

      transform 0.7s cubic-bezier(.2, .7, .2, 1),

      filter 0.7s cubic-bezier(.2, .7, .2, 1);

    will-change: opacity, transform, filter;

  }



  /* --- ÉTAT VISIBLE (.inview) --- */

  .has-to-move.inview,

  .has-to-move-01.inview,

  .has-to-move-02.inview,

  .sec-banner p.has-to-move.inview,

  .sec-banner img.has-to-move.inview,

  .sec-banner h2.has-to-move.inview {

    opacity: 1;

    transform: translateX(0) translateY(0);

    filter: blur(0);

  }



  /* --- STAGGER BANNER --- */

  /* 1) h2 en premier */

  .sec-banner h2.has-to-move.inview {

    transition-delay: 0.20s;

  }



  /* 2) p en deuxième */

  .sec-banner p.has-to-move.inview {

    transition-delay: 0.40s;

  }


  .sec-banner p.has-to-move.inview {
    margin-left: auto;
    font-size: 1.6rem;
  }


  /* 3) img en dernier, plus lentement */

  .sec-banner img.has-to-move.inview {

    transition-delay: 0.80s;

    transition-duration: 1.2s;
    /* un peu plus long pour un effet soft */

  }



  /* Tu peux garder ton stagger global si tu en as besoin pour d'autres blocs : */

  .has-to-move.inview {
    transition-delay: 0.34s;
  }

  .has-to-move-01.inview {
    transition-delay: 0.44s;
  }

  .has-to-move-02.inview {
    transition-delay: 0.54s;
  }





}



/* ============================

   ACCESSIBILITÉ

   ============================ */



@media (prefers-reduced-motion: reduce) {

  .has-to-move,

  .has-to-move-01,

  .has-to-move-02,

  .sec-banner p.has-to-move,

  .sec-banner img.has-to-move,

  .sec-banner h2.has-to-move {

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;

    transition: none !important;

  }

}