:root {
  --color-gray: #a2b6b5cc;
  --color-white: white;
  --color-blue: #1A3651;
  --color-darkgray: #2E3034;
  --title-font-desktop: 50px;
  --txt-font-desktop: 20px;
}



html,
body {
  height: 100%;
  margin: 0;
  background-color: #E7E8E3;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #E7E8E3;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
  color: var(--color-blue) !important;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  box-shadow: none;
  padding: 10px;
}



.custom-flo-title,
.custom-flo-sub-title {
  font-family: "Playfair Display", serif !important;
  color: var(--color-blue);
  text-align: center;
}


.custom-flo-small .sppb-addon-title {
  font-family: "Playfair Display", serif;
}


.custom-qui-suis-je-flo img {
  border-radius: 5px !important;
}

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

body a:hover {
  color: white;
}


.custom-flo-txt {
  color: var(--color-blue);
  text-align: center;
}

.custom-rdv-col {
  border: solid 1px var(--color-blue);
  border-radius: 5px;
  text-align: center;
  color: var(--color-blue);
}

.custom-flo-btn {
  background-color: var(--color-blue) !important;
  color: white;
}

.body-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body-innerwrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#sp-main-body {
  flex: 1;
}


#sp-menu>.sp-column {
  height: auto;
}


#sp-header {
  background: transparent;
  height: 0px !important;
}

#sp-header .container {
  max-width: 100% !important;
}

.offcanvas-menu.border-menu .offcanvas-inner ul.menu>li {
  border-bottom: 1px solid var(--color-blue) !important;
}

.offcanvas-menu.border-menu .offcanvas-inner ul.menu>li>a {
  color: var(--color-blue) !important;
}

.offcanvas-menu .offcanvas-inner a:active {
  color: var(--color-blue) !important;
}

.sp-megamenu-parent>li>a {
  color: var(--color-blue) !important;
}

.sp-megamenu-parent>li>a:hover {
  color: var(--color-blue) !important;
}

#sp-bottom {
  background-color: transparent;
}

#sp-bottom .sppb-addon-content {
  text-align: center;
}

#sp-bottom a {
  color: var(--color-blue);
}

#sp-footer,
#sp-bottom {
  color: var(--color-blue);
}

#sp-bottom .sp-module {
  margin-bottom: 0px;
}

.sp-megamenu-parent>li.active>a {
  color: var(--color-blue) !important;
}




.custom-btn-flo {
  margin-top: auto !important;
  align-self: flex-end !important;
  width: 100%;
  color: white;
  background-color: var(--color-blue) !important;
}

.custom-flo-accordeon button {
  background-color: var(--color-blue);
  color: white;
  text-align: center;
}

.custom-image-layout {
  display: flex;
  flex-direction: column;
  text-align: center !important;
  background-color: transparent;
  border: solid 1px var(--color-blue);
  border-radius: 0px 0px 5px 5px;
  color: var(--color-blue) !important;
}

.sppb-addon-image-layouts img {
  border-radius: 5px 5px 0px 0px;
  /*  border: solid 1px var(--color-blue);*/
}


.sppb-image-layout-title {
  font-weight: 700;
  margin-bottom: 5px !important;
}


.parallax {
  position: relative;
  background-image: url('/images/florencemertenat.com/intro.jpg');
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

}



.text-fixed {
  position: fixed;

  transform: translate(-50%, -50%);
  text-align: right;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--color-blue);
  height: 400px;
}

.step .mobile-text {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--color-blue);
}

.parallax-link {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
  transition: opacity 0.3s ease;
  text-align: center;
}


.parallax-link.hidden {
  opacity: 0;
  pointer-events: none;
}

.visible {
  opacity: 1;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.sppb-nav-tabs>li>a {

  background: white;
  border: 0px solid !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: var(--color-blue);
  text-align: center;

}

.sppb-nav-tabs>li.active>a,
.sppb-nav-tabs>li.active>a:focus,
.sppb-nav-tabs>li.active>a:hover {
  background-color: var(--color-blue) !important;

  color: white !important;
}


.custom-flo-tabs ul li:first-child a {
  border-radius: 5px 0px 0px 0px;
}

.custom-flo-tabs ul li:nth-child(2) a {
  border-radius: 0px 5px 0px 0px;
}

.border-booker {
  border-color: rgba(255, 255, 255, 0) !important;
}

.custom-flo-tabs .sppb-tab-content {
  background-color: white;
}

.sppb-nav-tabs>li:last-child>a {
  border-right-width: 0px !important;
}





.fade-in {
  animation: fadeIn 0.4s ease-in;
}


.custom-flo-tabs .sppb-nav-tabs {
  width: 100%;
}

.custom-flo-tabs .sppb-nav-tabs>li {
  width: 50%;
}

.custom-who-i-m-flo {
  border-bottom: 2px solid var(--color-blue);
}

.custom-who-column-title {
  display: flex;
  align-items: center;
}

.custom-title-who-flo {
  font-family: "Playfair Display", serif !important;
  text-align: left !important;
}

.custom-title-who-flo .sppb-addon-title {
  font-family: "Playfair Display", serif !important;
}




/*
################
## SIZE ##
################

*/

.custom-image-prestations {
  min-height: 400px !important;
  max-height: 600px !important;
}

.custom-image-layout {
  padding: 20px 30px 20px !important;
}



.parallax-link img {
  height: 50px;
}

body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
  width: 215px !important;
}

.custom-flo-small {
  font-size: 15px !important;
}

.custom-flo-small .sppb-addon-title {
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}

.custom-flo-txt {
  font-size: var(--txt-font-desktop);
}

.custom-rdv-col {
  padding: 20px 0px;
}

.custom-flo-btn {
  width: 200px;
  margin-top: 20px;
}

.custom-flo-title,
.custom-flo-title h1 {
  font-size: var(--title-font-desktop);
  margin-bottom: 40px;
  line-height: 65px;
  font-family: "Playfair Display", serif;
  font-weight: 400!important;



}


.logo-image {
  height: 170px;
}

#sp-bottom {
  padding: 20px 0 15px;
  height: 60px;

}

.custom-flo-bottom-txt {
  margin-bottom: 40px !important;

}

.sppb-image-layout-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 5px !important;
}

.custom-title-who-flo .sppb-addon-title {
  margin-bottom: 40px;
  font-size: var(--title-font-desktop);
}

.custom-flo-section {
  margin-bottom: 75px !important;
}

.custom-flo-section-small {
  margin-bottom: 50px !important;

}

.custom-flo-first-section {
  margin-top: 75px !important;
}

.custom-flo-sub-title {
  font-size: 30px;
  margin-bottom: 20px
}

.text-fixed {
  font-size: 44px;
}

.custom-flo-tabs-addon {
  margin: 30px !important;
}


/*
################
## FONT SIZE ##
################

*/
/* Grand Desktop : écrans très larges (ex : 1440px et plus) */


@media screen and (min-width: 1440px) {
  .custom-image-layout {
    height: 300px;

  }

  .text-fixed {
    position: fixed;
    top: 60%;
    left: 70%;
    width: 50%;
    height: 400px;
  }

  body {
    font-size: 20px;
    /* Ajuste les paddings/marges, grille, etc. */
  }

  .step {
    height: 100vh;
  }
}

/* Desktop standard : entre 1024px et 1439px */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .sp-megamenu-parent>li>a {
    font-size: 19px;
  }

  .parallax {
    height: 300vh;
  }

  .custom-image-layout {
    height: 350px;

  }

  .step {
    height: 100vh;
  }

  .text-fixed {
    position: fixed;
    top: 60%;
    left: 70%;
    width: 50%;
    height: 400px;
  }
}

/* Tablette : entre 768px et 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 16px;
    /* Adapter les colonnes, menus, etc. */
  }

  .parallax {
    height: 300vh;
  }

  .custom-image-layout {
    height: 425px;

  }

  .step {
    height: 100vh;
  }

  .text-fixed {
    position: fixed;
    top: 50%;
    left: 70%;
    width: 60%;
    height: 400px;
  }

  .custom-space-mobile,
  .custom-rdv-col {
    margin-bottom: 50px;
  }

  .custom-rdv-col {
    margin-bottom: 50px;
  }
}

/* Mobile : en dessous de 768px */
@media screen and (max-width: 767px) {
  .custom-rdv-col {
    margin-bottom: 50px;
    border: none;
  }

  .custom-who-i-m-flo {
    border: none;
  }

  .custom-rdv-col .custom-flo-small {
    border: solid 1px var(--color-blue);
    padding: 20px 0px;
  }

  /* Par défaut : cacher le texte mobile */
  .step .mobile-text {
    display: none;
  }

  /* Mobile : injecter le texte et afficher */
  @media (max-width: 768px) {
    .custom-space-mobile {
      margin-bottom: 50px;
    }

    .custom-title-who-flo .sppb-addon-title {
      font-size: 40px;
      margin-bottom: 20px;
    }

    .custom-flo-title,
    .custom-flo-title h1 {
      font-size: 40px;
      margin-bottom: 25px;
      font-family: "Playfair Display", serif;

    }

    .custom-flo-txt {
      font-size: 17px;
    }

    #floating-text,
    #parallax-link {
      display: none !important;
    }

    .step .mobile-text {
      margin-top: 300px;
      display: block;
      font-size: 27px;
      color: #1A3651;
      margin: 50px 30px;
      text-align: right;
    }
  }

  .parallax {
    height: 100vh;
    padding-top: 50px;
    background-attachment: scroll;
    background-image: url('/images/florencemertenat.com/intro_mobile.jpg');
  }

  .parallax-link {
    position: fixed;
    bottom: 25%;

  }

  .text-fixed {
    width: 90%;
    left: 50%;
    font-size: 36px;
    top: 30%;
  }

  body {
    font-size: 14px;
    /* Stacking vertical, gros boutons, etc. */
  }

  .step {
    margin-top: 25px;
  }

  #sp-bottom .sppb-addon-content {
    text-align: center;
  }


}