/* =====================================================================
   CENTRE VITALAB - onglet << BOOKING PAGES CSS >> (2026-08-25 - v20)
   A coller dans : Custom Features -> Custom CSS -> onglet BOOKING PAGES.
   JUMEAU de l'onglet WIDGET : la page hebergee et les widgets chargent
   la MEME application v2 - memes regles, memes protections (GCLID,
   correctifs .is-widget), meme habillage VitaLab, meme Partie Q.
   Regle de maintenance : toute nouvelle Partie s'ajoute AUX DEUX
   onglets, avec la meme lettre. Remplace TOUT le contenu de l'onglet.
   ===================================================================== */
/* ============================ PARTIE A ================================
   Regles fonctionnelles existantes - CONSERVEES (dedoublonnees). */
/* Champ GCLID - 4 aout 2026. Champ de suivi Google Ads : il doit rester
   "Visible on booking page" dans les reglages pour exister dans le
   formulaire, sinon rien ne peut l'ecrire. On le cache seulement a
   l'oeil du patient. NE PAS RETIRER. */
input[name="0dcf55c191842cbd6066e7ae7c25f3a4"],
.control-label[for="0dcf55c191842cbd6066e7ae7c25f3a4"],
label[for="0dcf55c191842cbd6066e7ae7c25f3a4"] {
    display: none !important;
}
.form-group:has(input[name="0dcf55c191842cbd6066e7ae7c25f3a4"]) {
    display: none !important;
}
/* Case marketing retiree a la derniere etape de la reservation */
#sb-main-container #main #sb-timeline #steps #details .detail-step-wrap .detail-step .license-links-container .promotions-letter-flag label[role=button]{
   display: none;
}
/* Colonnes echeance de paiement et taxes masquees (sommaire + reservation) */
td.inv-cell-due-date { display: none; }
th.inv-cell-tax { display: none; }
td.inv-cell-tax { display: none; }
/* Divers existants */
.samesite-cookies { display: none !important; }
#sb_back_btns_plugin { max-width: 500px; text-align: center; padding: 0 0 50px 0; }
.back-to-site .btn { display: none; }
body .control-label[for="sb_client_name"] { width: 100%; }
/* Tailles de texte existantes (la police, elle, passe a Hanken en B) */
body .txt.short, body .txt.full { font-size: 1rem !important; }
body .cap.full { font-size: 1.1rem !important; }
body .read-more { font-size: 1rem !important; }
/* Correctifs WIDGETS du vieux site (mise en page) - NE PAS RETIRER */
@media( min-width: 767px ){
  .modal .modal-dialog { width: 500px; }
  .is-widget .modal .modal-dialog { max-height: none; }
}
@media( max-width: 784px ){
  #sb-main-container #main #sb-timeline #steps #steps-content .step-content { padding-top: 0; }
  .is-widget:not(.line) #header.widget .nav-wrapper { min-height: 0; }
  .is-widget:not(.line) #header.widget .nav-wrapper .items-wrapper .nav-item { height: auto; min-height: 0; }
  .is-widget #sb-main-container #header .nav-wrapper .items-wrapper { margin-bottom: 0; }
  #sb-main-container #main #sb-timeline #steps-nav { margin-bottom: 0; }
  #sb-main-container #main #sb-timeline #sb_back_button { padding: 10px 0 10px 0; }
}
/* ============================ PARTIE B ================================
   L'habillage VITALAB - la langue visuelle des courriels de confirmation:
   marine #232F58, indigo #4C56C9, fond perle #F4F3F6, cartes blanches
   arrondies a ombre douce, Hanken Grotesk (remplace l'ancien Arial). */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700;800&family=Playfair+Display:wght@600&display=swap');
/* ---------- base : le fond perle et la police des courriels ---------- */
body, .web {
  background: #F4F3F6 !important;
  font-family: 'Hanken Grotesk', 'Noto Sans', -apple-system, 'Segoe UI', sans-serif !important;
  color: #454C6E !important;
}
body *, body .cap, body .title-small {
  font-family: 'Hanken Grotesk', 'Noto Sans', sans-serif !important;
}
/* ---------- titres : le marine, et le serif des grandes cartes ------- */
h1, h2, .title, .title-small {
  color: #232F58 !important;
  font-weight: 700 !important;
}
h1 { font-family: 'Playfair Display', Georgia, serif !important; }
/* ---------- la barre d'etapes (Lieu / Service / Heure / Client) ------ */
.step_info_item { color: #8A90B8 !important; font-weight: 600 !important; }
.step_info_item.active { color: #4C56C9 !important; font-weight: 800 !important; }
.step_info_item.passed, .step_info_item.filled { color: #232F58 !important; }
/* ---------- les cartes : blanc, coins doux, ombre des courriels ------ */
.location-item, .step-content, .tab-pd {
  background: #FFFFFF !important;
  border: 1px solid #EAE9F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 14px rgba(35, 47, 88, .08) !important;
}
.excerpt-info {
  background: #F5F5FB !important;
  border: 1px solid #EAE9F2 !important;
  border-radius: 10px !important;
  color: #454C6E !important;
}
/* ---------- les boutons : l'indigo, coins 10 px (fini la pilule) ----- */
.btn, .btn.custom, .btn.select, .btn.select.custom {
  background: #4C56C9 !important;
  border-color: #4C56C9 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  transition: background .15s ease;
}
.btn:hover, .btn.custom:hover, .btn.select.custom:hover {
  background: #232F58 !important;
  border-color: #232F58 !important;
}
.btn.ghost, .btn.back, .btn[class*=cancel] {
  background: #FFFFFF !important;
  color: #4C56C9 !important;
  border: 1.5px solid #D6D0F2 !important;
}
/* ---------- le calendrier : cercles indigo, survol perle ------------- */
.calendar .date {
  border-radius: 50% !important;
  font-weight: 600;
  transition: background .12s ease;
}
.calendar .date:not(.disable):not(.selected):hover {
  background: #EDEAFB !important;
  color: #232F58 !important;
}
.calendar .date.selected, .calendar .date.selected.today {
  background: #4C56C9 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(76, 86, 201, .35);
}
.calendar .date.today:not(.selected) {
  box-shadow: inset 0 0 0 2px #4C56C9;
  color: #4C56C9 !important;
}
.calendar .date.disable { color: #C5C9DE !important; }
/* jours feries : le marine VitaLab (remplace l'ancien #243170) */
body #sb-timeline #steps #steps-content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-name .col-md-4 .name.is-holiday {
  color: #232F58 !important;
}
/* ---------- les creneaux horaires : chips a la VitaLab --------------- */
.hour-line { border-color: #EAE9F2 !important; }
.hour-head { color: #8A90B8 !important; font-weight: 700 !important; }
.hour-line a, .hour-line .hour, .datetime-step a[href*=time], .hours-column a {
  border: 1px solid #EAE9F2 !important;
  border-radius: 10px !important;
  color: #232F58 !important;
  font-weight: 600 !important;
  transition: all .12s ease;
}
.hour-line a:hover, .hours-column a:hover {
  background: #EDEAFB !important;
  border-color: #4C56C9 !important;
}
.hour-line a.selected, .hour-line a.active, .hours-column a.selected {
  background: #4C56C9 !important;
  border-color: #4C56C9 !important;
  color: #FFFFFF !important;
}
/* ---------- le formulaire client : les champs de l'outil ------------- */
input[type=text], input[type=email], input[type=tel], input[type=number],
textarea, select {
  border: 1.5px solid #D2D6E8 !important;
  border-radius: 9px !important;
  color: #232F58 !important;
  background: #FFFFFF !important;
  padding: 11px 12px !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #4C56C9 !important;
  box-shadow: 0 0 0 3px rgba(76, 86, 201, .12) !important;
}
label { color: #232F58 !important; font-weight: 600 !important; }
/* ---------- liens et details ----------------------------------------- */
a { color: #4C56C9; }
.address, .phone, .phone-number { color: #8A90B8 !important; }
/* ---------- mobile : respirations ------------------------------------ */
@media (max-width: 640px) {
  .location-item, .step-content, .tab-pd { border-radius: 12px !important; }
}
/* ============================ PARTIE C ================================
   FINITIONS v2 (2026-08-22) - la passe de polissage. */
/* ---------- l'en-tete : la bande marine des courriels ---------------- */
#header, .web #header {
  background: #232F58 !important;
  border-bottom: none !important;
}
#header a, #header .nav-item, #sb_menu_list a, #header [class*=company] {
  color: #FFFFFF !important;
}
#header a:hover, #sb_menu_list a:hover { color: #B9C0E4 !important; }
#header .nav-item.active a { color: #FFFFFF !important; font-weight: 800 !important; }
/* ---------- les prix : presence marine ------------------------------- */
.price, [class*="price"]:not(input):not(select) {
  color: #232F58 !important;
  font-weight: 800 !important;
}
/* ---------- tete du calendrier : mois en marine, fleches indigo ------ */
.datepicker-switch, .top-date-select [class*=month], [class*=month-name] {
  color: #232F58 !important;
  font-weight: 800 !important;
}
.datepicker .prev, .datepicker .next,
[class*=date-select] [class*=prev], [class*=date-select] [class*=next] {
  color: #4C56C9 !important;
}
/* ---------- liens << afficher plus >> -------------------------------- */
.read-more {
  color: #4C56C9 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.read-more:hover { text-decoration: underline !important; }
/* ---------- notifications toast : la douceur VitaLab ----------------- */
#toast-container .toast {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(35, 47, 88, .18) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}
#toast-container .toast-success { background: #1E7C4C !important; }
#toast-container .toast-error { background: #A33B3B !important; }
/* ---------- micro-interactions : l'elevation douce ------------------- */
.location-item {
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.location-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(35, 47, 88, .12) !important;
}
/* ============================ PARTIE D ================================
   v3 (2026-08-22) - reparations et unification apres revue visuelle. */
/* ---------- REPARATION : les polices d'icones (Font Awesome, slick) --
   La partie B force Hanken sur body * : les glyphes devenaient des
   carres. On rend leurs polices aux icones. */
.icon, [class^=icon-], [class*=" icon"], i.icon,
.fa, .fas, .far, .fab, .fal, .fad, [class^=fa-], [class*=" fa-"],
.icon::before, .fa::before, .fas::before, .far::before, .fab::before,
.slick-prev::before, .slick-next::before {
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands',
               'Font Awesome 5 Duotone', 'slick', sans-serif !important;
}
/* ---------- LA NAV GAUCHE : un seul bloc marine, elegant ------------- */
#header .nav-wrapper,
#header .items-wrapper,
#header .item-container,
#header .nav-item,
#header .nav-trigger {
  background: transparent !important;
}
#header { border-radius: 14px !important; overflow: hidden; }
#header .nav .menu-item {
  background: transparent !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
}
#header .nav .menu-item, #header .nav .menu-item a {
  color: rgba(255, 255, 255, .78) !important;
  font-weight: 600 !important;
}
#header .nav .menu-item:hover, #header .nav .menu-item:hover a {
  color: #FFFFFF !important;
}
#header .nav .menu-item.active {
  background: rgba(255, 255, 255, .14) !important;
}
#header .nav .menu-item.active, #header .nav .menu-item.active a {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
/* ---------- LA BANNIERE : le degrade marine (adieu la photo stock) --- */
[class*=default-bg], .default-bg.medical {
  background-image: linear-gradient(135deg, #283070, #1A2150) !important;
  background-color: #232F58 !important;
}
[class*=default-bg] .btn, [class*=banner] .btn {
  background: #FFFFFF !important;
  color: #4C56C9 !important;
  border-color: #FFFFFF !important;
}
[class*=default-bg] .btn:hover {
  background: #EDEAFB !important;
  color: #232F58 !important;
}
/* ---------- CARTES DE LIEUX : mortes, les barres verticales ---------- */
.location-item {
  border: 1px solid #EAE9F2 !important;
  border-left: 1px solid #EAE9F2 !important;
}
.location-item::before, .location-item::after {
  display: none !important;
}
/* ---------- FINI les panneaux dans les panneaux ---------------------- */
.tab-pd:has(.location-item), .step-content:has(.location-item) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* ============================ PARTIE E ================================
   v4 (2026-08-22) - le sur-blindage : les regles du theme gagnaient en
   specificite sur trois fronts (bordures de cartes repeintes en couleur
   de base, colonne des etapes #steps-nav blanche, libelle du bouton de
   banniere). Selecteurs renforces + ceintures. */
/* ---------- cartes : bordure PERLE, pas la couleur de base ----------- */
div.location-item.item.panel,
.location-item.item.panel,
#sb_booking_content .location-item,
.location-item {
  border: 1px solid #EAE9F2 !important;
  border-left: 1px solid #EAE9F2 !important;
  border-color: #EAE9F2 !important;
}
/* ---------- LA COLONNE DES ETAPES (#steps-nav) : marine unifie ------- */
#sb-main-container #main #sb-timeline #steps-nav,
#steps-nav,
#sb_booking_info, .booking-info,
#steps-nav ul, #sb_booking_info ul,
#header .nav-wrapper, #header .items-wrapper, #header .nav,
#sb_menu_list, #header ul {
  background: transparent !important;
  background-color: transparent !important;
}
/* le fond marine vit sur le conteneur du header/sidebar lui-meme */
#header {
  background: #232F58 !important;
}
/* les etapes (Lieu / Service / ...) : blanches sur marine */
.step_info_item, .step_info_item a {
  color: rgba(255, 255, 255, .78) !important;
}
.step_info_item.active, .step_info_item.active a {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.step_info_item.passed, .step_info_item.filled,
.step_info_item.passed a, .step_info_item.filled a {
  color: rgba(255, 255, 255, .92) !important;
}
/* la petite barre-jauge a gauche des etapes, si presente : indigo clair */
#steps-nav .progress, #steps-nav [class*=line] {
  background: rgba(255, 255, 255, .25) !important;
}
/* ---------- bouton de banniere : libelle TOUJOURS lisible ------------ */
[class*=default-bg] .btn, [class*=default-bg] .btn *,
[class*=banner] .btn, [class*=banner] .btn * {
  color: #4C56C9 !important;
}
/* ---------- panneaux-dans-panneaux : ceintures supplementaires ------- */
.tab-with-popup {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.step-content.content-mode-list,
.tab-pd:has(.location-step),
.tab-col:has(.location-item) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* ============================ PARTIE F ================================
   v5 (2026-08-22) - la geometrie des captures utilisateur a parle :
   1) les etapes flottaient blanches sur fond perle (leur boite etait
      devenue transparente) -> la boite des etapes devient une CARTE
      MARINE a part entiere ;
   2) le blanc tetu du menu d'accueil -> transparence TOTALE dans
      #header, puis on repose la pastille de l'element actif ;
   3) la feuille blanche decalee derriere les cartes -> ceintures
      elargies sur la famille tab-*. */
/* ---------- 1. la carte MARINE des etapes ---------------------------- */
#sb_booking_info, .booking-info {
  background: #232F58 !important;
  border-radius: 14px !important;
  padding: 18px 10px !important;
  box-shadow: 0 2px 14px rgba(35, 47, 88, .18) !important;
}
/* la ligne-jauge verticale entre les etapes : discrete */
#sb_booking_info ul::before, .booking-info ul::before,
#steps-nav .progress, #steps-nav [class*=line],
.booking-info [class*=line], .booking-info .progress {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
/* le vieux bloc #header vide sur les ecrans de reservation embarques :
   il ne porte plus rien, on le fond dans le decor */
body.is-widget #header {
  background: transparent !important;
  box-shadow: none !important;
}
/* ---------- 2. #header accueil : transparence totale, puis pastille -- */
#header, #header.widget { background: #232F58 !important; }
body.is-widget #header { background: transparent !important; }
#header * { background-color: transparent !important; }
#header .nav .menu-item.active {
  background-color: rgba(255, 255, 255, .14) !important;
}
#header, #header a, #header .menu-item, #header li, #header span {
  color: rgba(255, 255, 255, .82) !important;
}
#header .menu-item.active, #header .menu-item.active a,
#header a:hover, #header .menu-item:hover a {
  color: #FFFFFF !important;
}
/* ---------- 3. plus AUCUNE feuille blanche derriere les cartes ------- */
.location-step [class*=tab],
#sb_booking_content [class*=tab-with],
.tab-with-popup, .tab-col {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* et la carte elle-meme reste la seule couche */
.location-item.item.panel {
  box-shadow: 0 2px 14px rgba(35, 47, 88, .08) !important;
}
/* ============================ PARTIE G ================================
   v6 (2026-08-22) - le marine SUIT les libelles d'etapes : il se pose
   sur leur liste directe (ul), ou qu'elle soit dans la mise en page.
   Les conteneurs parents redeviennent transparents (le bloc marine
   vide de la capture) et la ligne-jauge devient discrete partout. */
/* les parents : plus de bloc marine vide */
#sb_booking_info, .booking-info {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* LE porteur du marine : la liste des etapes elle-meme */
#sb_booking_info ul, .booking-info ul,
ul:has(> .step_info_item) {
  background: #232F58 !important;
  border-radius: 14px !important;
  padding: 18px 16px !important;
  box-shadow: 0 2px 14px rgba(35, 47, 88, .18) !important;
}
/* la ligne-jauge : discrete sur TOUS les fonds (marine translucide) */
#sb_booking_info ul::before, .booking-info ul::before,
#steps-nav .progress, #steps-nav [class*=line],
.booking-info [class*=line], .booking-info .progress,
[class*=steps] [class*=line] {
  background: rgba(35, 47, 88, .15) !important;
  border-color: rgba(35, 47, 88, .15) !important;
}
/* a l'interieur de la liste marine, la jauge repasse en blanc doux */
ul:has(> .step_info_item)::before,
ul:has(> .step_info_item) [class*=line] {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
/* les libelles : blancs, actif gras - sur leur marine, garanti */
ul:has(> .step_info_item) .step_info_item { color: rgba(255,255,255,.78) !important; }
ul:has(> .step_info_item) .step_info_item.active { color: #FFFFFF !important; font-weight: 800 !important; }
ul:has(> .step_info_item) .step_info_item.passed,
ul:has(> .step_info_item) .step_info_item.filled { color: rgba(255,255,255,.92) !important; }
/* ============================ PARTIE H ================================
   v7 (2026-08-22) - CONSOLIDATION LISIBILITE. Prime sur F et G.
   Regle d'or : AUCUN texte sombre sur zone marine, AUCUN texte pale
   sur zone claire. */
/* ---------- LA COLONNE DES ETAPES : une seule verite ----------------- */
#sb_booking_info, .booking-info, .booking-info.mg {
  background: #232F58 !important;
  border-radius: 14px !important;
  padding: 16px 12px !important;
  box-shadow: 0 2px 14px rgba(35, 47, 88, .18) !important;
}
/* l'ul interieure ne rajoute RIEN (annule l'essai G) */
#sb_booking_info ul, .booking-info ul, ul:has(> .step_info_item) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* TOUT ce qui vit dans la colonne des etapes est BLANC - sans exception */
.booking-info, .booking-info *, #sb_booking_info, #sb_booking_info * {
  color: rgba(255, 255, 255, .85) !important;
}
.booking-info .step_info_item.active, .booking-info .step_info_item.active * {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.booking-info .step_info_item.filled, .booking-info .step_info_item.filled *,
.booking-info .step_info_item.passed, .booking-info .step_info_item.passed * {
  color: rgba(255, 255, 255, .95) !important;
}
/* jauges et traits dans la colonne : blanc discret */
.booking-info [class*=line], .booking-info .progress,
.booking-info ul::before, #sb_booking_info ul::before {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
/* ---------- LA CARTE-RESUME : la boite CLAIRE des courriels ---------- */
.highlighted-current-booking {
  background: #F5F5FB !important;
  border: 1px solid #EAE9F2 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.highlighted-current-booking, .highlighted-current-booking * {
  color: #232F58 !important;
}
.highlighted-current-booking a { color: #4C56C9 !important; }
.highlighted-current-booking input, .highlighted-current-booking [class*=date] {
  background: #FFFFFF !important;
  color: #232F58 !important;
  border-color: #D2D6E8 !important;
}
/* ---------- le menu d'accueil garde ses blancs (au-dessus de H) ------ */
#header .nav .menu-item, #header .nav .menu-item * { color: rgba(255,255,255,.82) !important; }
#header .nav .menu-item.active, #header .nav .menu-item.active * { color: #FFFFFF !important; }
/* ============================ PARTIE I ================================
   v8 (2026-08-22) - la carte-resume ASSUMEE MARINE (le theme la peint
   avec la couleur de police foncee et l'arme d'une chaine d'IDs - on
   epouse ce choix : c'est la bande marine de nos courriels). Seuls les
   defauts sont corriges : liens lisibles, champ date translucide,
   liseret perle retire. Selecteurs armes a la meme enseigne. */
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking,
.highlighted-current-booking {
  background: #232F58 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 14px rgba(35, 47, 88, .22) !important;
}
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking,
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking *,
.highlighted-current-booking, .highlighted-current-booking * {
  color: #FFFFFF !important;
}
/* les liens (titre du service...) : lavande des bandes courriel */
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking a,
.highlighted-current-booking a {
  color: #B9C0E4 !important;
  text-decoration: none !important;
}
/* etiquettes Date: / Lieu: en blanc doux */
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking label,
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking [class*=label],
.highlighted-current-booking label {
  color: rgba(255, 255, 255, .72) !important;
}
/* le champ date : translucide clair sur marine */
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking input,
.highlighted-current-booking input, .highlighted-current-booking [class*=date] input {
  background: rgba(255, 255, 255, .14) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 8px !important;
}
/* case marketing : masquage RENFORCE (la structure SB a change depuis la
   regle d'origine - on masque le bloc entier, jamais les conditions) */
.promotions-letter-flag,
.license-links-container .promotions-letter-flag,
[class*=promotions-letter] {
  display: none !important;
}
/* ============================ PARTIE J ================================
   v9 (2026-08-22) - dernieres gouttes (portail Mes reservations) :
   1) un bouton plein n'a JAMAIS de texte indigo-sur-indigo ;
   2) la date du resume redevient une simple ligne blanche (sans chip). */
/* tout bouton PLEIN : texte blanc, lui et ses enfants */
.btn:not(.ghost):not(.back):not([class*=cancel]),
.btn:not(.ghost):not(.back):not([class*=cancel]) * {
  color: #FFFFFF !important;
}
/* les variantes claires gardent leur indigo (reaffirme APRES) */
.btn.ghost, .btn.back, .btn[class*=cancel],
.btn.ghost *, .btn.back *, .btn[class*=cancel] * {
  color: #4C56C9 !important;
}
/* la date dans les cartes marine : simple texte blanc, sans encart */
.highlighted-current-booking input,
.highlighted-current-booking [class*=date] input,
[class*=booking-details] input {
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  padding: 0 !important;
}
/* ============================ PARTIE K ================================
   v10 (2026-08-22) - (1) le champ date du resume, ARME d'IDs cette fois :
   simple texte blanc gras, sans fond ni bordure, quel que soit l'ecran ;
   (2) services COMPACTS : 3 cartes par ligne, paddings resserres -
   la page des ~20 services raccourcit d'environ 40 %. */
/* ---------- 1. la date : texte blanc, partout, sans exception -------- */
#sb-main-container #main #sb-timeline #steps #steps-content .highlighted-current-booking input,
#sb-main-container .highlighted-current-booking input,
.highlighted-current-booking input,
.highlighted-current-booking input[readonly],
[class*=booking-detail] input, [class*=current-booking] input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  padding: 0 !important;
  text-align: right;
}
/* ---------- 2. services compacts : 3 par ligne ----------------------- */
@media (min-width: 900px) {
  #steps-content #sb_booking_content .tab-full-view-wrapper,
  #steps-content #sb_booking_content [class*=list-view-wrapper],
  .service-step .step-content > div:has(.item.panel) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  .service-step .item.panel, .event-step .item.panel,
  #sb_booking_content .item.panel:not(.location-item) {
    flex: 0 0 calc(33.333% - 10px) !important;
    max-width: calc(33.333% - 10px) !important;
    margin: 0 !important;
  }
}
/* paddings resserres des cartes de services (tous ecrans) */
#sb_booking_content .item.panel:not(.location-item) {
  padding: 14px 14px 12px !important;
}
#sb_booking_content .item.panel .txt.short,
#sb_booking_content .item.panel .txt.full {
  font-size: .92rem !important;
  line-height: 1.45 !important;
}
#sb_booking_content .item.panel .btn {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* ============================ PARTIE L ================================
   v11 (2026-08-22) - deux reparations de DERNIER MOT (cette partie est
   la plus basse du fichier : elle tranche tous les conflits) :
   1) le bouton de la banniere (fond blanc) reprend son texte INDIGO -
      la regle J << tout bouton plein = texte blanc >> l'avait blanchi ;
   2) le champ date du resume : ALL:UNSET - on efface TOUT son style
      (theme compris) puis on repose exactement le notre. */
/* ---------- 1. banniere : bouton blanc, texte indigo - FINAL --------- */
[class*=default-bg] .btn,
[class*=default-bg] .btn *,
[class*=banner] .btn,
[class*=banner] .btn * {
  color: #4C56C9 !important;
}
/* ---------- 2. la date : remise a zero totale puis re-habillage ------ */
.highlighted-current-booking input,
.highlighted-current-booking input[readonly],
.highlighted-current-booking .form-control,
.highlighted-current-booking [class*=datepicker],
#sb-main-container .highlighted-current-booking input {
  all: unset !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-family: 'Hanken Grotesk', 'Noto Sans', sans-serif !important;
  font-size: 13px !important;
  text-align: right !important;
  width: auto !important;
  max-width: 100% !important;
}
/* ============================ PARTIE M ================================
   v12 (2026-08-22) - les VRAIS noms, enfin :
   1) le bouton de banniere est DIV.btn.book (avec un <a> nu dedans),
      et il vit HORS de l'element banniere - regle directe ;
   2) la barre blanche de la date : regle AGNOSTIQUE - dans la carte
      marine, aucun enfant n'a de fond, point. */
/* ---------- 1. le bouton Reserver de la banniere (.btn.book) --------- */
.btn.book {
  background: #FFFFFF !important;
  border-radius: 10px !important;
}
.btn.book, .btn.book a, .btn.book * {
  color: #4C56C9 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.btn.book:hover, .btn.book:hover a {
  background: #EDEAFB !important;
  color: #232F58 !important;
}
/* ---------- 2. carte marine : AUCUN fond chez les enfants ------------ */
.highlighted-current-booking *:not(.btn):not(a.btn) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}
.highlighted-current-booking a { color: #B9C0E4 !important; }
/* ============================ PARTIE N ================================
   v13 (2026-08-22) - je me battais contre MOI-MEME : la regle J
   << tout bouton plein -> texte blanc >> porte (0,4,1) de specificite
   (ses :not comptent !) et ecrasait la regle M (0,2,1) du bouton de
   banniere. Classe repetee = specificite gonflee au-dessus. */
.btn.book.book.book.book,
.btn.book.book.book.book a,
.btn.book.book.book.book * {
  background: #FFFFFF !important;
  color: #4C56C9 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
}
.btn.book.book.book.book:hover,
.btn.book.book.book.book:hover a {
  background: #EDEAFB !important;
  color: #232F58 !important;
}
/* la carte-resume : version a ID (bat toute regle de classes) */
#sb_booking_content .highlighted-current-booking *:not(.btn),
#steps-content .highlighted-current-booking *:not(.btn) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}
#sb_booking_content .highlighted-current-booking a,
#steps-content .highlighted-current-booking a {
  color: #B9C0E4 !important;
}
/* ============================ PARTIE O ================================
   v14 (2026-08-22) - le carre blanc du champ telephone.
   SimplyBook cache son input original (style inline width:0/padding:0)
   et affiche un clone dans le widget drapeau .iti ; ma regle generale
   input[type=tel] !important (Partie B) a RESSUSCITE le fantome en
   boite blanche 26x36 qui couvrait le debut du numero. On le re-enterre
   (le clone visible vit DANS .iti, pas en enfant direct : intouche). */
.form-client-phone .input-group > input[name="client_phone"] {
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ============================ PARTIE P ================================
   v15 (2026-08-22) - suite du champ telephone : le fantome est mort
   (Partie O) mais le CLONE visible (input.iti__tel-input) recevait mon
   padding generique 12px alors que le porte-drapeau .iti__country-container
   (44px, position absolute a gauche) exige ~52px : le debut du numero
   glissait sous le drapeau. On rend au clone son espace. */
.iti input.iti__tel-input,
.iti--allow-dropdown input.iti__tel-input,
.form-client-phone .iti input[type="tel"] {
  padding-left: 52px !important;
}
/* ============================ PARTIE Q ================================
   v16 (2026-08-23) - l'etape Service en colonnes SAINES. La partie K
   posait 3 colonnes, mais l'interieur des cartes restait une RANGEE
   (.one-line) : a ~300 px de large, les boutons chevauchaient les
   titres (constate en production le soir de la bascule). Ici :
   2 colonnes >=900 px (les titres francais sont longs), 1 colonne
   dessous, et l'interieur passe en PILE - titre, infos, boutons.
   Cette partie PRIME sur K. */
@media (min-width: 900px) {
  .service-step .item.panel, .event-step .item.panel,
  #sb_booking_content .item.panel:not(.location-item) {
    flex: 0 0 calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
  }
}
/* l'interieur de carte : une pile propre, plus aucun chevauchement */
#sb_booking_content .item.panel .one-line {
  display: block !important;
  position: relative !important;
}
#sb_booking_content .item.panel .one-line .content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
#sb_booking_content .item.panel .cap.title,
#sb_booking_content .item.panel .cap.title a {
  display: block !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  color: #232F58 !important;
  text-decoration: none !important;
}
#sb_booking_content .item.panel .info-bar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 0 0 10px !important;
}
#sb_booking_content .item.panel .btn-bar {
  position: static !important;
  float: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}
/* << Selectionner >> pousse a droite, << Afficher plus >> reste a gauche */
#sb_booking_content .item.panel .btn-bar .btn-round-mask {
  margin-left: auto !important;
}
/* jamais deux titres dans la meme carte au bureau */
@media (min-width: 900px) {
  #sb_booking_content .item.panel .mobile-title { display: none !important; }
}
/* ============================ PARTIE R ================================
   v17 (2026-08-23) - deux reparations de la Partie Q, constatees en
   production sur les deux surfaces :
   1) TITRES DOUBLES sous 900 px : le theme affiche .mobile-title en
      mobile et cache .cap.title ; Q forcait .cap.title partout -> les
      deux paraissaient. .mobile-title meurt a TOUTES les largeurs,
      .cap.title sert partout.
   2) la rangee de boutons eclatee : le theme donne a .wrap-read-more
      une pleine largeur centree et positionne .btn-round-mask a part ;
      on les remet a plat comme simples enfants du flex de Q -
      << afficher plus >> a gauche, << Selectionner >> a droite,
      UNE rangee. */
#sb_booking_content .item.panel .mobile-title {
  display: none !important;
}
#sb_booking_content .item.panel .btn-bar .wrap-read-more {
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#sb_booking_content .item.panel .btn-bar .btn-round-mask {
  position: static !important;
  float: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;   /* pousse Selectionner a droite */
  padding: 0 !important;
}
#sb_booking_content .item.panel .btn-bar {
  flex-wrap: nowrap !important;
}
/* la carte respire sans exces : plus de vide vertical fantome */
#sb_booking_content .item.panel .one-line {
  padding: 0 !important;
  min-height: 0 !important;
}
/* ============================ PARTIE S ================================
   v18 (2026-08-25) - LE PARCOURS RACCOURCI. Le service arrive desormais
   preselectionne du site (predefined.service), l'onglet correspondant
   n'est plus que du bruit dans le fil d'Ariane.
   Structure relevee le 25 aout :
     nav#steps-nav > #sb_booking_info > .booking-info > ul > li.step_info_item x5
     1 Lieu | 2 Service | 3 Complements | 4 Heure | 5 Client
   Les <li> n'ont AUCUNE classe propre a leur etape (seulement filled /
   passed / active) : on ne peut viser que par POSITION. D'ou la
   sentinelle :nth-last-child() qui exige CINQ etapes - si SimplyBook
   change son parcours, la regle cesse de s'appliquer au lieu de masquer
   la mauvaise etape.
   Sans risque de decalage : le ul est en flex nowrap, chaque li porte
   flex:1 1 0 ; #menu-active-bg est en position:static. */
/* 2e etape - SERVICE (deja choisi sur le site) */
#steps-nav .booking-info > ul > li.step_info_item:nth-child(2):nth-last-child(4) {
  display: none !important;
}
/* 3e etape - COMPLEMENTS DE SERVICE (ACTIVE le 25-08).
   Plus rien a y faire pour le patient : le produit 40 est supprime (les
   services ordinaires affichent << Pas de produit complementaire >> et
   l'etape se saute d'elle-meme), et les modules des paliers ITSS
   arrivent deja coches par predefined.addons depuis le composeur du
   site. L'onglet ne montrait donc qu'une etape sans decision. */
#steps-nav .booking-info > ul > li.step_info_item:nth-child(3):nth-last-child(3) {
  display: none !important;
}
/* ============================ PARTIE T ================================
   v19 (2026-08-25) - LE BOUTON BLANC SUR BLANC EN MOBILE.
   Symptome : sur telephone, << Suivant >> et le bouton de reservation
   final n'apparaissent que comme des boites blanches arrondies, sans
   texte. Cause trouvee dans MES propres regles, pas dans le theme :
     - Partie M/N peignent .btn.book en BLANC (c'etait pense pour le
       bouton de la banniere). Le bouton d'action du parcours porte la
       meme classe .book en mobile -> fond blanc.
     - Partie N, ligne
         #sb_booking_content .highlighted-current-booking *:not(.btn)
       porte (1,2,0) de specificite - un ID. Elle peint en BLANC tout
       descendant du resume qui ne porte pas exactement .btn : donc le
       <span>/<a> qui contient le LIBELLE du bouton. Elle bat meme la
       contre-mesure .btn.book.book.book.book * (0,5,0), qui n'a pas
       d'ID. Resultat : libelle blanc sur fond blanc.
   En mobile, .highlighted-current-booking est la carte-resume qui porte
   la zone d'action - d'ou le fait que seuls les telephones soient
   touches.
   Correctif, en trois temps, sans rien retirer aux parties A a S :
     T-1 le libelle d'un bouton herite de SON bouton (jamais du resume) ;
     T-2 le bouton d'action du parcours redevient indigo plein ;
     T-3 la rangee de boutons des cartes de service reprend le droit de
         passer a la ligne sous 900 px (le nowrap de R tronquait
         << Ecouvillon pharynge >>), et le bas du contenu respire pour
         que la bulle Intercom ne couvre plus la zone d'action.
   ====================================================================== */
/* ---------- T-1 : le libelle suit SON bouton, avec un ID pour battre
                    la regle de la Partie N ------------------------------ */
#sb_booking_content .highlighted-current-booking .btn > *,
#sb_booking_content .highlighted-current-booking .btn > * > *,
#sb_booking_content .highlighted-current-booking a.btn > *,
#sb_booking_content .highlighted-current-booking button > *,
#steps-content .highlighted-current-booking .btn > *,
#steps-content .highlighted-current-booking .btn > * > *,
#steps-content .highlighted-current-booking a.btn > *,
#steps-content .highlighted-current-booking button > * {
  color: inherit !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* ---------- T-2 : le bouton d'action du PARCOURS est indigo plein.
      Portee volontairement limitee a #steps / #steps-content /
      #sb_booking_content : la banniere d'accueil vit en dehors, son
      .btn.book blanc des parties M et N n'est pas touche. Les variantes
      claires (retour, annuler, fantome) sont exclues. ----------------- */
#sb-main-container #main #sb-timeline #steps .btn:not(.ghost):not(.back):not([class*=cancel]):not(.read-more),
#steps-content .btn:not(.ghost):not(.back):not([class*=cancel]):not(.read-more),
#sb_booking_content .highlighted-current-booking .btn:not(.ghost):not(.back):not([class*=cancel]),
#steps-content .highlighted-current-booking .btn:not(.ghost):not(.back):not([class*=cancel]) {
  background: #4C56C9 !important;
  background-image: none !important;
  border: 1px solid #4C56C9 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* le libelle de CE bouton-la : blanc, quel que soit son emballage */
#sb-main-container #main #sb-timeline #steps .btn:not(.ghost):not(.back):not([class*=cancel]):not(.read-more) *,
#steps-content .btn:not(.ghost):not(.back):not([class*=cancel]):not(.read-more) *,
#sb_booking_content .highlighted-current-booking .btn:not(.ghost):not(.back):not([class*=cancel]) *,
#steps-content .highlighted-current-booking .btn:not(.ghost):not(.back):not([class*=cancel]) * {
  color: #FFFFFF !important;
  background: transparent !important;
}
/* les variantes claires du parcours gardent leur indigo sur blanc */
#steps-content .btn.ghost, #steps-content .btn.back, #steps-content .btn[class*=cancel],
#steps-content .btn.ghost *, #steps-content .btn.back *, #steps-content .btn[class*=cancel] * {
  background: #FFFFFF !important;
  color: #4C56C9 !important;
  border-color: #D6D0F2 !important;
}
/* ---------- T-3 : mobile - la rangee respire, le bas aussi ----------- */
@media (max-width: 900px) {
  #sb_booking_content .item.panel .btn-bar {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  #sb_booking_content .item.panel .btn-bar .btn-round-mask {
    margin-left: auto !important;
  }
  #sb_booking_content,
  #sb_booking_content .panel,
  #sb_booking_content .item.panel,
  #steps-content {
    overflow: visible !important;
  }
  /* la bulle Intercom se pose dans le coin inferieur droit :
     on lui laisse la place au lieu de lui ceder le bouton */
  #steps-content { padding-bottom: 76px !important; }
}
/* ============================ PARTIE U ================================
   v20 (2026-08-25) - LE DERNIER BOUTON (sommaire de facture / paiement).
   Le << Order summary >> vit HORS de #steps-content : la Partie T ne le
   couvrait pas. Preuve par les captures : le bouton final y est une
   boite blanche muette, et il ne devient lisible qu'APRES un toucher -
   en mobile, :hover colle apres le tap, et c'est le navy de survol de
   la Partie B qui apparait. Etat normal : blanc sur blanc - le bouton
   final porte la classe .book, et les Parties M/N (pensees pour le
   bouton BLANC de la banniere d'accueil) le peignent en blanc, pendant
   que la Partie J blanchit son libelle.
   Ici : tout bouton qui vit dans une zone de FACTURE ou de PAIEMENT
   est indigo plein, libelle blanc, des l'etat normal. On vise ces
   zones par leur contenu (les cellules inv-cell-* de la facture) et
   par leurs familles de classes - la banniere d'accueil n'a ni table
   de facture ni conteneur de paiement : elle garde son bouton blanc.
   La classe .btn est repetee pour battre l'armure .book.book.book.book
   de la Partie N (0,5,0) et la regle J (0,4,1).
   A COLLER TOUT A LA FIN, dans les DEUX onglets, apres la Partie T. */
/* ---------- U-1 : le bouton d'action des zones facture/paiement ----- */
div:has([class*="inv-cell"]) .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]),
div:has([class*="inv-cell"]) a.btn.btn.btn.btn.btn.btn,
div:has([class*="inv-cell"]) button:not([class*=cancel]):not([class*=close]),
div:has([class*="inv-cell"]) input[type=submit],
div:has([class*="inv-cell"]) input[type=button],
[class*="invoice"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]),
[class*="invoice"] button:not([class*=cancel]):not([class*=close]),
[class*="payment"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]),
[class*="payment"] button:not([class*=cancel]):not([class*=close]),
[class*="checkout"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]),
.delivery-step .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]) {
  background: #4C56C9 !important;
  background-image: none !important;
  border: 1px solid #4C56C9 !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 44px !important;
  padding: 12px 22px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* ---------- U-2 : leur libelle est blanc, quel que soit l'emballage -- */
div:has([class*="inv-cell"]) .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]) *,
div:has([class*="inv-cell"]) button:not([class*=cancel]):not([class*=close]) *,
[class*="invoice"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]) *,
[class*="invoice"] button:not([class*=cancel]):not([class*=close]) *,
[class*="payment"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]) *,
[class*="payment"] button:not([class*=cancel]):not([class*=close]) *,
[class*="checkout"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]) *,
.delivery-step .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]) * {
  color: #FFFFFF !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* ---------- U-3 : le survol/tap garde le navy de la maison ---------- */
div:has([class*="inv-cell"]) .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]):hover,
div:has([class*="inv-cell"]) button:not([class*=cancel]):not([class*=close]):hover,
[class*="invoice"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]):hover,
[class*="payment"] .btn.btn.btn.btn.btn.btn:not(.ghost):not(.back):not([class*=cancel]):hover {
  background: #232F58 !important;
  border-color: #232F58 !important;
}
/* ---------- U-4 : les variantes claires de ces zones restent
      indigo-sur-blanc (retour, annuler, fantome) ---------------------- */
div:has([class*="inv-cell"]) .btn.ghost, div:has([class*="inv-cell"]) .btn.back,
div:has([class*="inv-cell"]) .btn[class*=cancel],
[class*="invoice"] .btn.ghost, [class*="invoice"] .btn.back, [class*="invoice"] .btn[class*=cancel],
[class*="payment"] .btn.ghost, [class*="payment"] .btn.back, [class*="payment"] .btn[class*=cancel] {
  background: #FFFFFF !important;
  color: #4C56C9 !important;
  border-color: #D6D0F2 !important;
}
/* ═══════════════════════════════════════════════════════════════════
   28 août 2026 — le bouton « Annuler » redevient visible
   À COLLER À LA FIN DES DEUX SECTIONS CSS DE SIMPLYBOOK, SÉPARÉMENT :
   la page de réservation ET le widget — chacune sauvegardée à part.
 
   Le problème : dans le CSS existant, la règle
     .btn.ghost, .btn.back, .btn[class*="cancel"] { fond blanc,
     texte indigo, bordure #D6D0F2 }
   attrape aussi le bouton « Annuler » des cartes de réservation
   (classe sb_cancel_btn — elle contient « cancel »). Sur la carte
   blanche, ça donne un bouton blanc à bordure quasi invisible :
   le bouton est « effacé ». Le thème SimplyBook le faisait rouge —
   notre règle l'écrase.
 
   La correction : on ne touche PAS à la règle existante (elle sert
   aux boutons fantômes sur fonds colorés). On ajoute une règle plus
   précise, placée après, qui redonne au bouton Annuler un vrai
   contour indigo — le même traitement que la case « modalités ».
   ═══════════════════════════════════════════════════════════════════ */
 
/* Annuler, sur les cartes « Mes réservations » : contour bien visible */
.booking-btns .btn[class*="cancel"],
a.sb_cancel_btn.sb_cancel_btn{
  background:#fff !important;
  color:#4C56C9 !important;
  border:2px solid #4C56C9 !important;
  font-weight:700 !important;
}
 
/* Au survol : le contour et le texte passent à l'encre, fond lilas pâle */
.booking-btns .btn[class*="cancel"]:hover,
a.sb_cancel_btn.sb_cancel_btn:hover{
  background:#EDEAFB !important;
  color:#232F58 !important;
  border-color:#232F58 !important;
}