/* Julien Jalia — page de réservation alignée sur la charte du site julienjalia.com (27/10/2026)
   Encre #12323a · Pétrole #17707F (survol #0f4f5a) · Or #C9964F · Crème #FAF6EF · Beige #e7dfd0 · Texte #2b2b2b
   Typographie : Times New Roman */

/* Typographie */
#sb_main, #sb_main h1, #sb_main h2, #sb_main h3, #sb_main h4,
#sb_main .title-main, #sb_main .title-small, #sb_main p, #sb_main a, #sb_main td, #sb_main li, #sb_main label,
#sb_main .btn, #sb_main button, #sb_main input, #sb_main select, #sb_main textarea {
  font-family: 'Times New Roman', Times, serif !important;
}
#sb_main { color: #2b2b2b; }
#sb_main a { color: #17707F; }
#sb_main a:hover { color: #0f4f5a; }

/* Masquer « Notre heure » (fuseau horaire) */
#sb_booking_company_time { display: none !important; }

/* Masquer la case d'inscription aux promotions */
.promotions-letter-flag { display: none !important; }

/* Boutons : pétrole, sans capitales, comme le bouton « Prendre RDV » du site */
#sb_main .btn, #sb_main .main_btn, #sb_main button, #sb_main input[type=submit] {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600;
  border-radius: 4px;
}
#sb_main .main_btn, #sb_main .btn-primary { background: #17707F !important; color: #fff !important; border-color: #17707F !important; }
#sb_main .main_btn:hover, #sb_main .btn-primary:hover { background: #0f4f5a !important; border-color: #0f4f5a !important; }

/* Accueil : horaires et coordonnées sur fond crème, filet or */
#main_description .side_bars .col-sm-4 {
  background: rgba(250, 246, 239, 0.96);
  border-top: 2px solid #C9964F;
  padding: 24px;
}
#main_description .side_bars .col-sm-4 .title-main,
#main_description .side_bars .col-sm-4 h2 { color: #12323a !important; }
#main_description .side_bars .col-sm-4 #contacts,
#main_description .side_bars .col-sm-4 #contacts a,
#main_description .side_bars .col-sm-4 #contacts li,
#main_description .side_bars .col-sm-4 #contacts i,
#main_description .side_bars .col-sm-4 #schedule td { color: #2b2b2b !important; }
#main_description .side_bars .col-sm-4 #schedule tr { border-color: #e7dfd0 !important; }

/* Nom du cabinet lisible sur la photo */
#about-us .title-main { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); font-weight: 600; }

/* Étapes de réservation (Service / Heure / Réservation) */
li.step_info_item { background: rgba(250, 246, 239, 0.96); }
li.step_info_item .title-small, li.step_info_item .content { color: #12323a !important; }
li.step_info_item.active { box-shadow: inset 0 -2px 0 #C9964F; }

/* Cartes et formulaire sur fond crème */
#sb_booking_content .title-main, #sb_booking_content h2, #sb_booking_content h3 { color: #12323a !important; }

/* Mobile : espace sous le bouton pour éviter le chevauchement avec le pied de page */
@media (max-width: 767px) {
  .buttons_wrap { margin-bottom: 56px !important; }
}

/* Pas de voile bleu sur la photo au défilement */
#sb_content.masked, #sb_content { background-color: transparent !important; }

/* Titres sans majuscules automatiques à chaque mot */
#sb_main h1, #sb_main h2, #sb_main h3, #sb_main h4, #sb_main .title-main, #sb_main .title-small { text-transform: none !important; }

/* Boutons « Choisir » des prestations sans capitales */
#sb_main .btn a, #sb_main .btn-bar a { text-transform: none !important; letter-spacing: normal !important; }

/* Titres des étapes (Service, Heure…) lisibles sur la photo */
body #sb_main #steps #sb_booking_content h2.title-main {
  display: inline-block;
  color: #12323a !important;
  background: rgba(250, 246, 239, 0.96);
  padding: 6px 16px;
  text-shadow: none !important;
}
/* Étapes à venir un peu plus lisibles */
li.step_info_item:not(.active) > a { opacity: 0.6 !important; }

/* Créneaux disponibles aux couleurs du site */
#sb_time_slots_container a.sb-cell.free {
  background: #FAF6EF !important;
  color: #12323a !important;
  border: 1px solid #17707F !important;
  border-radius: 4px;
}
#sb_time_slots_container a.sb-cell.free:hover {
  background: #17707F !important;
  color: #fff !important;
}
.time-legend .available .circle { background: #FAF6EF !important; border: 1px solid #17707F !important; }

/* Présentation sur fond crème, lisible sur la photo (ordinateur et mobile) */
#about-us {
  align-self: flex-start;
  height: auto !important;
  background: rgba(250, 246, 239, 0.96);
  border-top: 2px solid #C9964F;
  padding: 24px !important;
}
#sb_content #about-us .title-main, #sb_content.masked #about-us .title-main { color: #12323a !important; text-shadow: none !important; }
#about-us .txt, #about-us .txt p { color: #2b2b2b !important; text-shadow: none !important; }

/* Encadré de présentation à la hauteur de son texte (la photo reste visible) */
#main_description .side_bars > .col-sm-8 { align-self: flex-start !important; height: auto !important; }
#about-us { height: auto !important; display: block !important; }

/* Calendrier : un seul « Heure » sur ordinateur (la barre d'étapes suffit) ; le titre reste sur mobile */
@media (min-width: 768px) {
  body #sb_main #steps #sb_booking_content h2.title-main { display: none !important; }
}
/* Étape à venir (Réservation) lisible */
li.step_info_item:not(.active) > a { opacity: 1 !important; }
li.step_info_item:not(.active) .title-small { color: #5a5a5a !important; }

/* Mes réservations : textes lisibles sur la photo */
#booking-result-view .top_wrap h2.title-main {
  display: inline-block;
  color: #12323a !important;
  background: rgba(250, 246, 239, 0.96);
  padding: 6px 16px;
  text-shadow: none !important;
}
#booking-result-tabs .tab-link { background: rgba(250, 246, 239, 0.96) !important; border-color: #e7dfd0 !important; }
#booking-result-tabs .tab-link a { color: #12323a !important; }
#booking-result-tabs .tab-link.active { background: #fff !important; }
#booking-result-tabs .tab-link.active a { color: #17707F !important; }
#sb_back_to_bookings a.back-to-services {
  display: inline-block;
  background: rgba(250, 246, 239, 0.96);
  padding: 6px 14px;
}
#sb_back_to_bookings a.back-to-services, #sb_back_to_bookings a.back-to-services * { color: #12323a !important; }
#sb_bookings_list .alert {
  background: rgba(250, 246, 239, 0.96) !important;
  color: #2b2b2b !important;
  border: 0 !important;
  border-top: 2px solid #C9964F !important;
}
#booking-result-view a.btn.show-all {
  background: #FAF6EF !important;
  color: #17707F !important;
  border: 1px solid #17707F !important;
}
#booking-result-view a.btn.show-all:hover { background: #17707F !important; color: #fff !important; }