/*
 * ============================================================
 *  CUSTOM CSS — Interface de réservation SimplyBook
 * ============================================================
 *  Contexte : personnalisation du front-end SimplyBook.
 *  Palette principale : #53929C (bleu-vert), #ea9e7f (saumon),
 *                       #053a4b (bleu nuit), blanc semi-transparent.
 *  Effets récurrents : glassmorphism (backdrop-filter: blur),
 *                      boutons arrondis, ombres internes blanches.
 *
 *  Sommaire
 *  --------
 *  1. Typographie globale
 *  2. Header — mise en page flex
 *  3. Bouton "Mon compte" (#sb_client_info)
 *  4. Boutons principaux (#main-buttons)
 *  5. Sections (.section)
 *  6. Boutons du contenu (#sb_content .btn)
 *  7. Divers — alignements, hauteurs, petits ajustements UI
 *  8. Navigation et couleurs des liens
 *  9. Page facture (.page--invoice)
 * 10. Media queries
 *     10a. Desktop (≥ 1024px) — header flottant glassmorphism
 *     10b. Mobile  (≤ 1023px) — header adapté, menu overlay
 * 11. Message d'aide sous le bouton de validation
 * 12. Fix accessibilité mobile (ADA)
 * ============================================================
 */


/* ============================================================
 * 1. TYPOGRAPHIE GLOBALE
 * ============================================================
 * Titres     → Inter (Semibold)
 * Corps/UI   → Noto Sans JP
 * ============================================================ */

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


/* ============================================================
 * 2. HEADER — MISE EN PAGE FLEX
 * ============================================================
 * Force la navbar à rester sur une seule ligne et répartit
 * son contenu de bout en bout (espace-between).
 * ============================================================ */

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

/* Supprime la marge gauche automatique du panneau client
   pour éviter qu'il soit poussé trop loin à droite. */
.header__client-panel {
    margin-left: 0 !important;
}


/* ============================================================
 * 3. BOUTON "MON COMPTE" (#sb_client_info)
 * ============================================================
 * Le bouton natif affiche une icône avatar ; on la masque
 * visuellement, on remplace le label par "Mon compte" via
 * ::after, et on applique le style glassmorphism de la charte.
 * ============================================================ */

/* 3a. Cache l'icône/avatar sans retirer le bouton du flux cliquable */
#sb_client_info .avatar,
#sb_client_info i {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* 3b. Style principal du bouton : glassmorphism + couleur #53929C */
#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; 
}

/* 3c. Injection du libellé textuel */
#sb_client_info::after {
    content: "Mon compte";
    white-space: nowrap;
}

/* 3d. Hover : fond plus clair, texte blanc */
#sb_client_info:hover {
    background: rgba(255,255,255,0.35);
    color: white;
}

/* 3e. Correction de la couleur du texte dans le panel connecté */
#sb_client_info .remember-me, #sb_client_info .is-logged__header {
  color: black !important;
}


/* ============================================================
 * 4. BOUTONS PRINCIPAUX (#main-buttons)
 * ============================================================
 * La section hero occupe 80 % de la hauteur de l'écran et
 * centre ses boutons (flex). Chaque bouton est en
 * glassmorphism blanc semi-transparent.
 * ============================================================ */

/* 4a. Centrage vertical/horizontal de la zone hero */
#main-buttons {
    height : 80vh !important;
    display: flex;           
    justify-content: center; 
    align-items: center; 
}

/* 4b. Style des boutons hero */
#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;
}

/* 4c. Hover : léger agrandissement + intensification de l'ombre */
.btn:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 16px 2px #FFFFFF inset;
}


/* ============================================================
 * 5. SECTIONS (.section)
 * ============================================================
 * Arrondit les coins des blocs de contenu et ajoute
 * une bordure discrète pour délimiter les zones.
 * ============================================================ */

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


/* ============================================================
 * 6. BOUTONS DU CONTENU (#sb_content .btn)
 * ============================================================
 * Style uniforme pour tous les boutons d'action dans le
 * tunnel de réservation (hors liens réseaux sociaux).
 * Couleur principale : #53929C.
 * ============================================================ */

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


/* ============================================================
 * 7. DIVERS — ALIGNEMENTS ET PETITS AJUSTEMENTS UI
 * ============================================================ */

/* Pied de fiche et bouton connexion alignés à droite */
.item__footer, #sb_sign_in_btn {
    text-align: right !important;
    justify-content: flex-end;
}

/* Titre des fiches prestation centré */
.item .title {
    text-align: center !important;
}

/* Supprime la hauteur fixe de la description courte
   pour afficher le texte en entier sans troncature */
.item__description.short {
    height: auto;
}

/* Couleur de mise en évidence des boutons prev/next du calendrier */
#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;
}

/* Masque les éléments d'interface non souhaités :
   chevrons, liste de prestations du package (résumé),
   liste des services d'abonnement, barre d'info abonnement */
.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;
}


/* ============================================================
 * 8. NAVIGATION ET COULEURS DES LIENS
 * ============================================================ */

/* Liens de navigation et icônes de catégorie en blanc */
.header__navigation-link, .item-container__icon {
    color: #ffffff !important;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* Soulignement saumon sur le lien actif ou survolé */
.header__navigation-item.active .header__navigation-link,
.header__navigation-item:hover .header__navigation-link {
    border-color: #ea9e7f !important;
}


/* ============================================================
 * 9. PAGE FACTURE (.page--invoice)
 * ============================================================
 * Décale le contenu vers le bas pour éviter le chevauchement
 * avec le header flottant positionné en absolute.
 * ============================================================ */

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


/* ============================================================
 * 10. MEDIA QUERIES
 * ============================================================ */

/* ----------------------------------------------------------
 * 10a. DESKTOP (≥ 1024px)
 * Header flottant positionné en absolute, centré, glassmorphism.
 * ---------------------------------------------------------- */
@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;
  }

  /* Sur la page facture, le header prend une teinte bleue opaque */
  .page--invoice .header {
    background-color: #5696a0b3 !important;
  }

  /* Dans le menu déroulant appended, les liens passent en bleu nuit */
  #sb_appended_child_menu .header__navigation-link {
    color : #053a4b !important;
  }

}

/* ----------------------------------------------------------
 * 10b. MOBILE (≤ 1023px)
 * Header adapté : fond flouté, menu pleine largeur en overlay.
 * ---------------------------------------------------------- */
@media (max-width: 1023px) {

  /* Fond semi-transparent flouté sur le header mobile */
  .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;
  }

  /* Logo centré horizontalement */
  .header__logo-wrapper {
    margin-left: auto;
    text-align: center;
  }

  /* Réduction du logo sur mobile */
  .header__logo-wrapper .header__logo-link img {
    max-width: 75%;
  }

  /* Bouton hamburger transparent avec icône blanche */
  .header__menu-trigger {
    background: transparent !important;
    color: #ffffff !important;
  }

  /* Menu mobile actif : overlay pleine largeur sous le header */
  .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;
  }

  /* Liens de navigation en bleu nuit sur fond clair du menu mobile */
  .header__navigation-link {
    color : #053a4b !important;
  }

  /* Panneau "Mon compte" : tooltip aligné à droite pour rester visible */
  .header .client-panel__item .full-info {
    left: auto;
    min-width: max-content;
  }

  /* Supprime l'overlay sombre derrière les modales sur mobile
     (évite le doublon visuel avec le backdrop natif) */
  body.hasModal:before {
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0) !important;
  }

}


/* ============================================================
 * 11. MESSAGE D'AIDE SOUS LE BOUTON DE VALIDATION
 * ============================================================
 * Pseudo-élément ::after injecté sur .button-wrapper pour
 * informer l'utilisateur de la redirection après validation.
 * ============================================================ */

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


/* ============================================================
 * 12. FIX ACCESSIBILITÉ MOBILE (ADA)
 * ============================================================
 * Masque le bloc de conformité ADA sur mobile pour éviter
 * qu'il occupe de l'espace dans le header.
 * ============================================================ */

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