/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
h1, h2, h3, h4, h5, h6,
.sb-widget-title, .sb-popup-title, .title-small, .header__navigation-link {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
}

body, p, span, label, input, button, .sb-widget-text, .sb-popup-text {
  font-family: "Noto Sans JP", sans-serif !important;
}

.header__content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between !important;
}


.header__client-panel {
    margin-left: 0 !important;
}


/* 1️⃣ Cache l’icône visuellement mais garde le bouton cliquable */
#sb_client_info .avatar,
#sb_client_info i {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute; /* hors du flux */
}

/* 2️⃣ Transforme le bouton en joli bouton arrondi */
#sb_client_info {
    border-radius : 4em !important;
 border-style: solid;
 border-width: 1px 1px 1px 1px;
 border-color: #AAAAAA24;
 box-shadow: 0px 0px 12px 1px #FFFFFF inset;
 background-color: #53929C !important;
 backdrop-filter: blur(25px);
 font-family: "Roboto", Sans-serif;
 font-weight: 500;
 color : #ffffff;
 text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 padding: 0.5em 1em 0.5em 1em !important; 
}

/* 3️⃣ Texte du bouton */
#sb_client_info::after {
    content: "Mon compte";
    white-space: nowrap;
}

/* 4️⃣ Hover esthétique */
#sb_client_info:hover {
    background: rgba(255,255,255,0.35);
    color: white;
}
#sb_client_info .remember-me, #sb_client_info .is-logged__header {
  color: black !important;
}

#main-buttons {
 height : 80vh !important;
 display: flex;           
 justify-content: center; 
 align-items: center; 
}

#main-buttons .btn {
 border-radius : 4em !important;
 border-style: solid;
 border-width: 1px 1px 1px 1px;
 border-color: #AAAAAA24;
 box-shadow: 0px 0px 12px 1px #FFFFFF inset;
 background-color: #FFFFFF1A !important;
 backdrop-filter: blur(25px);
 font-family: "Roboto", Sans-serif;
 font-weight: 500;
 color : #ffffff;
 text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: scale(1.1); /* Grossit de 10% */
  box-shadow: 0px 0px 16px 2px #FFFFFF inset; /* Optionnel : intensifie l'effet */
}

.section {
 border-radius: 2em !important;
 border-style: solid !important;
 border-width: 1px 1px 1px 1px !important;
 border-color: #AAAAAA24 !important;
}

#sb_content .btn:not(.social-links .btn) {
 border-radius : 4em !important;
 border-style: solid;
 border-width: 1px 1px 1px 1px;
 border-color: #fffff;
 box-shadow: 0px 0px 12px 1px #FFFFFF inset;
 background-color: #53929C !important;
 backdrop-filter: blur(25px);
 font-family: "Roboto", Sans-serif;
 font-weight: 500;
 color : #fffff;
 text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 width: auto;
}

.item__footer, #sb_sign_in_btn {
    text-align: right !important;
    justify-content: flex-end;
}

.item .title {
 text-align: center !important;
}

.item__description.short {
        height: auto;
}

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .header button, #sb-timeline #steps #steps-content #sb_booking_content .datetime-step .header a {
    border-color: #FFFFFf !important;
    color: #ea9e7f !important;
}

.fa-angle-right:before, .fa-angle-left:before, .package-content .item .selected-package-list.short, .membership-service__list, .step-content.membership-step .item .info-bar--item {
  display: none !important;
}

.header__navigation-link, .item-container__icon {
 color: #ffffff !important;
 text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.header__navigation-item.active .header__navigation-link, .header__navigation-item:hover .header__navigation-link  {
    border-color: #ea9e7f !important;
}

.page--invoice .page-content {
    padding: 15% 5% 5% 5% !important;
}

@media (min-width: 1024px) {

  .header:not(.clearfix) {
    position: absolute;
    z-index: 1;
    margin-top: 2em;
    margin-left: 5%;
    padding: 1em;
    width: 90% !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center;

    border-radius: 4em !important;
    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA24;
    box-shadow: 0px 0px 12px 1px #FFFFFF inset;
    background-color: #FFFFFF1A !important;
    backdrop-filter: blur(25px);
    color: #ffffff;
  }

  .page--invoice .header {
    background-color: #5696a0b3 !important;
  }

#sb_appended_child_menu .header__navigation-link {
color : #053a4b !important;
}

}

@media (max-width: 1023px) {

  .header:not(.clearfix) {
    background-color: #FFFFFF1A !important; 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA24;
    box-shadow: 0px 0px 12px 1px #FFFFFF inset;

    position: absolute;
    z-index: 1;
    overflow: visible !important;
  }

.header__logo-wrapper {
    margin-left: auto;
    text-align: center;
}

.header__logo-wrapper .header__logo-link img {
    max-width: 75%;
    
}

.header__menu-trigger {
    background: transparent !important;
    color: #ffffff !important;
}

.header__menu-container.active {
    position: absolute;
top: 100%;
  left: 0;
  width: 100%;
  z-index: 10000 !important;
height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.header__navigation-link {
 color : #053a4b !important;
}

     .header .client-panel__item .full-info {
        left: auto;
        min-width: max-content;
}

}

.button-wrapper::after {
  content: "Une fois validé, vous serez redirigé·e vers la page de réservation.";
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 767px) {
    .header .ada-compliance__wrapper {
        width: 0;
        margin: 0;
        text-align: center;
    }