/* =====================================================
   CSS PAGES DE RÉSERVATION — Y’a pas de hasard®
   Version V4.1 — CSS propre SimplyBook
   Intégration Webflow via iframe

   Objectifs :
   - préserver les icônes SimplyBook
   - ne pas gérer les majuscules en CSS
   - garder les services lisibles
   - garder le bouton Sélectionner lisible
   - cibler précisément le bouton Réserver avec le vrai HTML :
     #details .right-side .confirm-details
     .buttons-container > .sb-book-btn-container > #sb_book_btn
===================================================== */


/* -----------------------------------------------------
   1) IMPORT DES POLICES
----------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');


/* -----------------------------------------------------
   2) VARIABLES
----------------------------------------------------- */

:root {
  --yph-noir: #050508;
  --yph-noir-soft: #121218;
  --yph-dore: #c49c48;
  --yph-dore-soft: #d8b676;
  --yph-blanc: #ffffff;
  --yph-gris-ligne: #d5d5dd;
  --yph-fond-input: #f9f9f9;
  --yph-fond-page: #ffffff;
}


/* -----------------------------------------------------
   3) BASE TYPOGRAPHIQUE
   Important : ne jamais cibler #sb-main-container *
   afin de préserver les icônes SimplyBook.
----------------------------------------------------- */

body,
#sb-main-container,
.sb-modal-body,
.sb-step-content,
.sb-main,
.sb-container {
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--yph-noir-soft);
  background-color: var(--yph-fond-page);
}


/* -----------------------------------------------------
   4) TITRES D’ÉTAPES
   Les libellés service / heure / client doivent être
   modifiés dans les traductions SimplyBook, pas en CSS.
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #sb-steps-nav .step-link,
#sb-main-container #main #sb-timeline #sb-steps-nav .step-link span {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--yph-noir-soft) !important;
  text-transform: none !important;
}

#sb-main-container #main #sb-timeline #sb-steps-nav .step-link.active,
#sb-main-container #main #sb-timeline #sb-steps-nav .step-link.active span {
  color: var(--yph-dore) !important;
}


/* -----------------------------------------------------
   5) NOMS ET DESCRIPTIONS DE SÉANCES
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #services .service-title,
#sb-main-container #main #sb-timeline #services .item-title {
  font-family: "Playfair Display", "Times New Roman", serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--yph-noir-soft) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#sb-main-container #main #sb-timeline #services .service-description,
#sb-main-container #main #sb-timeline #services .item-description,
#sb-main-container #main #sb-timeline #services .description {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  color: var(--yph-noir-soft) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#sb-main-container #main #sb-timeline #services .service-price,
#sb-main-container #main #sb-timeline #services .service-duration {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.85rem !important;
  color: var(--yph-noir-soft) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* -----------------------------------------------------
   6) CALENDRIER
   Seul endroit où uppercase reste acceptable.
----------------------------------------------------- */

#sb-main-container #main #sb-timeline .calendar .month-name,
#sb-main-container #main #sb-timeline .calendar .sb-month-switcher {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--yph-noir-soft) !important;
}

#sb-main-container #main #sb-timeline .calendar .sb_month_prev,
#sb-main-container #main #sb-timeline .calendar .sb_month_next {
  color: var(--yph-noir-soft) !important;
}

#sb-main-container #main #sb-timeline .calendar .weekday {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--yph-noir-soft) !important;
}

#sb-main-container #main #sb-timeline .calendar .day,
#sb-main-container #main #sb-timeline .calendar .day span {
  color: var(--yph-noir-soft) !important;
}

#sb-main-container #main #sb-timeline .calendar .day.selected span,
#sb-main-container #main #sb-timeline .calendar .day:hover span {
  background-color: var(--yph-dore) !important;
  color: var(--yph-blanc) !important;
  border-radius: 999px !important;
}

#sb-main-container #main #sb-timeline .calendar .day.disabled span {
  color: var(--yph-gris-ligne) !important;
}


/* -----------------------------------------------------
   7) BOUTONS HORAIRES
----------------------------------------------------- */

#sb-main-container #main #sb-timeline .time-range-btn {
  border-radius: 999px !important;
  border: 1px solid var(--yph-noir-soft) !important;
  background-color: var(--yph-blanc) !important;
  padding: 0.35rem 0.9rem !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

#sb-main-container #main #sb-timeline .time-range-btn span {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.85rem !important;
  color: var(--yph-noir-soft) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#sb-main-container #main #sb-timeline .time-range-btn:hover,
#sb-main-container #main #sb-timeline .time-range-btn.selected {
  border-color: var(--yph-dore) !important;
  background-color: var(--yph-dore) !important;
}

#sb-main-container #main #sb-timeline .time-range-btn:hover span,
#sb-main-container #main #sb-timeline .time-range-btn.selected span {
  color: var(--yph-blanc) !important;
}


/* -----------------------------------------------------
   8) HEURE CLIENT / PRESTATAIRE
----------------------------------------------------- */

#sb-main-container #main #sb-timeline .client_time,
#sb-main-container #main #sb-timeline .provider_time {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--yph-noir-soft) !important;
  text-transform: none !important;
}


/* -----------------------------------------------------
   9) BOUTON “SÉLECTIONNER” — ÉTAPE SERVICE
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #services .sb-btn,
#sb-main-container #main #sb-timeline #services button.btn,
#sb-main-container #main #sb-timeline #services a.btn {
  background-color: var(--yph-noir) !important;
  border: 1px solid var(--yph-noir) !important;
  color: var(--yph-blanc) !important;
  border-radius: 3px !important;
  padding: 0.55rem 1.4rem !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

#sb-main-container #main #sb-timeline #services .sb-btn span,
#sb-main-container #main #sb-timeline #services .sb-btn em,
#sb-main-container #main #sb-timeline #services button.btn span,
#sb-main-container #main #sb-timeline #services button.btn em,
#sb-main-container #main #sb-timeline #services a.btn span,
#sb-main-container #main #sb-timeline #services a.btn em {
  color: var(--yph-blanc) !important;
}

#sb-main-container #main #sb-timeline #services .sb-btn:hover,
#sb-main-container #main #sb-timeline #services button.btn:hover,
#sb-main-container #main #sb-timeline #services a.btn:hover {
  background-color: var(--yph-dore) !important;
  border-color: var(--yph-dore) !important;
  color: var(--yph-blanc) !important;
}


/* -----------------------------------------------------
   10) FORMULAIRE — LABELS
   Les majuscules NOM / EMAIL / TÉLÉPHONE sont à gérer
   dans les traductions SimplyBook.
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #details .form-container dl.zend_form > dt,
#sb-main-container #main #sb-timeline #details .form-container dl.zend_form > dt label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--yph-noir-soft) !important;
}

#sb-main-container #main #sb-timeline #details .form-container dd.extention_data dt,
#sb-main-container #main #sb-timeline #details .form-container dd.extention_data dt label,
#sb-main-container #main #sb-timeline #details .form-container dd.extention_data dd label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--yph-noir-soft) !important;
}


/* -----------------------------------------------------
   11) FORMULAIRE — CHAMPS
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #details .form-container input[type="text"],
#sb-main-container #main #sb-timeline #details .form-container input[type="tel"],
#sb-main-container #main #sb-timeline #details .form-container input[type="email"],
#sb-main-container #main #sb-timeline #details .form-container input[type="date"],
#sb-main-container #main #sb-timeline #details .form-container textarea,
#sb-main-container #main #sb-timeline #details .form-container select {
  font-family: "Open Sans", sans-serif !important;
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid var(--yph-gris-ligne) !important;
  background-color: var(--yph-fond-input) !important;
  padding: 0.6rem 0.2rem !important;
  margin: 0.15rem 0 0.8rem 0 !important;
  font-size: 0.9rem !important;
  color: var(--yph-noir-soft) !important;
  outline: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease !important;
}

#sb-main-container #main #sb-timeline #details .form-container input:focus,
#sb-main-container #main #sb-timeline #details .form-container textarea:focus,
#sb-main-container #main #sb-timeline #details .form-container select:focus {
  border-bottom-color: var(--yph-dore) !important;
  box-shadow: 0 1px 0 rgba(201, 161, 91, 0.2) !important;
}

#sb-main-container #main #sb-timeline #details .form-container input::placeholder,
#sb-main-container #main #sb-timeline #details .form-container textarea::placeholder {
  color: #aaa !important;
  font-size: 0.88rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* -----------------------------------------------------
   12) FORMULAIRE — CHECKBOX
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #details .form-container input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px !important;
  border: 1px solid var(--yph-noir-soft) !important;
  margin-right: 0.4rem !important;
  accent-color: var(--yph-dore) !important;
}


/* -----------------------------------------------------
   13) RÉCAPITULATIF — TOTAL
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #details .sb-booking-summary,
#sb-main-container #main #sb-timeline #details .booking-summary,
#sb-main-container #main #sb-timeline #details .cart-summary {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.92rem !important;
  color: var(--yph-noir-soft) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
}

#sb-main-container #main #sb-timeline #details .current-booking-info .service-title,
#sb-main-container #main #sb-timeline #details .current-booking-info .item-title,
#sb-main-container #main #sb-timeline #details .overview .service-title,
#sb-main-container #main #sb-timeline #details .overview .item-title {
  font-family: "Playfair Display", "Times New Roman", serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--yph-noir-soft) !important;
}

#sb-main-container #main #sb-timeline #details .current-booking-info,
#sb-main-container #main #sb-timeline #details .overview {
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* -----------------------------------------------------
   14) BOUTON RÉSERVER — V4.1 SCOPÉE
   HTML réel :
   #details .right-side .confirm-details
   .buttons-container > .sb-book-btn-container > #sb_book_btn
----------------------------------------------------- */

#sb-main-container #main #sb-timeline #details .right-side .confirm-details #sb_multiple_booking_button_container {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

#sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 1.5rem !important;
  padding: 0 !important;
  text-align: center !important;
}

#sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container .sb-book-btn-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

#sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container #sb_book_btn {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 190px !important;
  padding: 0.85rem 2.8rem !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  background-color: var(--yph-dore) !important;
  border: 1px solid var(--yph-dore) !important;
  color: var(--yph-blanc) !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

#sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container #sb_book_btn span {
  display: inline-block !important;
  color: var(--yph-blanc) !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

#sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container #sb_book_btn:hover {
  background-color: var(--yph-noir-soft) !important;
  border-color: var(--yph-noir-soft) !important;
  color: var(--yph-blanc) !important;
}

#sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container #sb_book_btn:hover span {
  color: var(--yph-blanc) !important;
}


/* -----------------------------------------------------
   15) DESCRIPTION SERVICE HTML PERSONNALISÉE
----------------------------------------------------- */

#sb-main-container #services .yph-service-description {
  max-width: 960px;
  margin: 1.5rem auto 2.5rem;
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--yph-noir-soft);
  text-align: left;
}

#sb-main-container #services .yph-service-description .yph-service-tagline {
  font-family: "Playfair Display", "Times New Roman", serif !important;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 1rem;
}

#sb-main-container #services .yph-service-description p {
  margin: 0 0 0.7rem;
}

#sb-main-container #services .yph-service-description h3 {
  font-family: "Playfair Display", "Times New Roman", serif !important;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 1.6rem 0 0.4rem;
}


/* -----------------------------------------------------
   16) MASQUER NEWSLETTER / PROMOTIONS / BRANDING
----------------------------------------------------- */

#sb-main-container .license-links-container,
#sb-main-container .promotions-letter-flag,
#sb-main-container [id*="newsletter"],
#sb-main-container [id*="promotion"],
#sb-main-container [name*="newsletter"],
#sb-main-container [name*="promotion"],
#sb-main-container [for*="newsletter"],
#sb-main-container [for*="promotion"] {
  display: none !important;
}


/* -----------------------------------------------------
   17) RÉCAP / PAGE DE CONFIRMATION
----------------------------------------------------- */

#sb_invoice_container .inv-cell-info-content p.p span:last-child,
#sb_invoice_container .inv-cell-info-content p.p small:last-child {
  display: none !important;
}


/* -----------------------------------------------------
   18) RESPONSIVE MOBILE
----------------------------------------------------- */

@media (max-width: 768px) {
  #sb-main-container #main #sb-timeline #details .form-container input,
  #sb-main-container #main #sb-timeline #details .form-container textarea,
  #sb-main-container #main #sb-timeline #details .form-container select {
    font-size: 0.85rem !important;
  }

  #sb-main-container #main #sb-timeline .calendar .weekday {
    letter-spacing: 0.06em !important;
    font-size: 0.68rem !important;
  }

  #sb-main-container #main #sb-timeline .time-range-btn {
    margin-bottom: 0.4rem !important;
  }

  #sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container {
    margin-top: 1.2rem !important;
  }

  #sb-main-container #main #sb-timeline #details .right-side .confirm-details .buttons-container #sb_book_btn {
    min-width: 180px !important;
    width: auto !important;
  }
}
/* =====================================================
   CORRECTIF — LIENS “AFFICHER PLUS / AFFICHER MOINS”
   Empêche le bleu par défaut SimplyBook
===================================================== */

#sb-main-container #main #sb-timeline #services a:not(.btn):not(.sb-btn),
#sb-main-container #main #sb-timeline #services a:not(.btn):not(.sb-btn) span,
#sb-main-container #main #sb-timeline #services .read-more,
#sb-main-container #main #sb-timeline #services .show-more,
#sb-main-container #main #sb-timeline #services .show-less {
  color: #121218 !important;
  background-color: transparent !important;
  text-decoration: none !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Hover sobre et premium */
#sb-main-container #main #sb-timeline #services a:not(.btn):not(.sb-btn):hover,
#sb-main-container #main #sb-timeline #services a:not(.btn):not(.sb-btn):hover span,
#sb-main-container #main #sb-timeline #services .read-more:hover,
#sb-main-container #main #sb-timeline #services .show-more:hover,
#sb-main-container #main #sb-timeline #services .show-less:hover {
  color: #c9a15b !important;
  text-decoration: none !important;
}