/* ════════════════════════════════════════════════════════
   SPA BOOKING PRO — Design Luxe Beige/Crème
   ════════════════════════════════════════════════════════
   VARIABLES : modifiez la section :root pour changer tout
   le design sans toucher au reste du code.
   ════════════════════════════════════════════════════════ */

/* ── 1. VARIABLES DE DESIGN ─────────────────────────── */
:root {
  /* Couleurs */
  --spa-primary:     #C9A96E;   /* Or/beige — couleur principale */
  --spa-primary-dk:  #A8884F;   /* Or foncé (hover) */
  --spa-dark:        #1A1A1A;   /* Texte très foncé */
  --spa-text:        #2C2C2C;   /* Texte principal */
  --spa-muted:       #8A7D6E;   /* Texte secondaire */
  --spa-bg:          #FAF8F5;   /* Fond global */
  --spa-card:        #FFFFFF;   /* Fond des cartes */
  --spa-border:      #E8E0D5;   /* Bordures */
  --spa-border-dk:   #D4C4B0;   /* Bordures foncées */
  --spa-success:     #4CAF7D;
  --spa-danger:      #E05252;
  --spa-warning:     #E8A838;
  --spa-info:        #5B8DD9;

  /* Typographie */
  --spa-font-head:   'Cormorant Garamond', Georgia, serif;
  --spa-font-body:   'Inter', system-ui, -apple-system, sans-serif;

  /* Espacement */
  --spa-radius:      12px;
  --spa-radius-sm:   6px;
  --spa-radius-lg:   20px;
  --spa-shadow:      0 2px 16px rgba(0,0,0,.07);
  --spa-shadow-md:   0 8px 32px rgba(0,0,0,.10);
  --spa-shadow-lg:   0 16px 48px rgba(0,0,0,.12);

  /* Transitions */
  --spa-transition:  all .22s cubic-bezier(.4,0,.2,1);
}

/* ── 2. RESET + BASE ────────────────────────────────── */
.spa-wrap *,
.spa-wrap *::before,
.spa-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.spa-wrap {
  font-family: var(--spa-font-body);
  font-size: 15px;
  color: var(--spa-text);
  line-height: 1.6;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--spa-bg);
}
.spa-wrap img { max-width: 100%; display: block; }
.spa-wrap a   { color: var(--spa-primary); text-decoration: none; }
.spa-wrap h1,
.spa-wrap h2,
.spa-wrap h3 {
  font-family: var(--spa-font-head);
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--spa-dark);
}

/* ── 3. BARRE DE PROGRESSION ─────────────────────────── */
.spa-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0 32px;
  gap: 0;
}
.spa-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  min-width: 80px;
}
.spa-progress-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--spa-border-dk);
  background: var(--spa-card);
  color: var(--spa-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: var(--spa-transition);
}
.spa-progress-step .spa-progress-label {
  font-size: 11px;
  color: var(--spa-muted);
  text-align: center;
  white-space: nowrap;
  font-family: var(--spa-font-body);
  letter-spacing: .3px;
}
.spa-progress-step.active .spa-progress-dot {
  background: var(--spa-primary);
  border-color: var(--spa-primary);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(201,169,110,.2);
}
.spa-progress-step.active .spa-progress-label { color: var(--spa-primary); font-weight: 600; }
.spa-progress-step.done .spa-progress-dot {
  background: var(--spa-success);
  border-color: var(--spa-success);
  color: #fff;
}
.spa-progress-step.done .spa-progress-dot span::before { content: '✓'; }
.spa-progress-step.done .spa-progress-dot span { font-size: 0; }
.spa-progress-step.done .spa-progress-dot span::before { font-size: 14px; }
.spa-progress-line {
  flex: 1;
  height: 2px;
  background: var(--spa-border);
  position: relative;
  top: -16px;
  min-width: 24px;
  transition: var(--spa-transition);
}
.spa-progress-line.done { background: var(--spa-success); }

/* ── 4. EN-TÊTES D'ÉTAPE ─────────────────────────────── */
.spa-step-header {
  margin-bottom: 24px;
}
.spa-step-header h2 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 4px;
}
.spa-step-header p {
  color: var(--spa-muted);
  font-size: 14px;
}
.spa-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--spa-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--spa-font-body);
  transition: var(--spa-transition);
}
.spa-back-btn:hover { color: var(--spa-primary); }

/* ── 5. FILTRES CATÉGORIES (icônes) ──────────────────── */
.spa-cat-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.spa-cat-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius);
  background: var(--spa-card);
  cursor: pointer;
  transition: var(--spa-transition);
  font-family: var(--spa-font-body);
  min-width: 80px;
}
.spa-cat-filter:hover { border-color: var(--spa-primary); background: rgba(201,169,110,.05); }
.spa-cat-filter.active {
  border-color: var(--spa-primary);
  background: var(--spa-primary);
  color: #fff;
}
.spa-cat-icon { font-size: 20px; line-height: 1; }
.spa-cat-label { font-size: 11px; font-weight: 500; text-align: center; }
.spa-cat-filter.active .spa-cat-label { color: #fff; }

/* ── 6. LAYOUT 2 COLONNES (services) ────────────────── */
.spa-services-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── 7. NAV GAUCHE ───────────────────────────────────── */
.spa-services-nav {
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  overflow: hidden;
  box-shadow: var(--spa-shadow);
  position: sticky;
  top: 20px;
}
.spa-nav-group { border-bottom: 1px solid var(--spa-border); }
.spa-nav-group:last-child { border-bottom: none; }
.spa-nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--spa-text);
  cursor: pointer;
  font-family: var(--spa-font-body);
  transition: var(--spa-transition);
}
.spa-nav-group-toggle:hover { background: var(--spa-bg); }
.spa-nav-group.open .spa-nav-group-toggle { color: var(--spa-primary); }
.spa-nav-chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .2s;
  flex-shrink: 0;
}
.spa-nav-group.open .spa-nav-chevron { transform: rotate(90deg); }
.spa-nav-items {
  list-style: none;
  display: none;
  background: var(--spa-bg);
  border-top: 1px solid var(--spa-border);
}
.spa-nav-group.open .spa-nav-items { display: block; }
.spa-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 10px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--spa-border);
  font-size: 13px;
  color: var(--spa-text);
  cursor: pointer;
  text-align: left;
  font-family: var(--spa-font-body);
  transition: var(--spa-transition);
}
.spa-nav-item:last-child { border-bottom: none; }
.spa-nav-item:hover { background: #fff; color: var(--spa-primary); }
.spa-nav-item.active {
  color: #C9A96E !important;
  font-weight: 700 !important;
  background: rgba(201,169,110,.09) !important;
  border-left: 3px solid #C9A96E !important;
  padding-left: 10px !important;
}
.spa-nav-arrow { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* ── 8. LISTE DES SERVICES (droite) ──────────────────── */
.spa-service-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spa-service-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--spa-card);
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 14px 18px;
  box-shadow: var(--spa-shadow);
  transition: var(--spa-transition);
  cursor: pointer;
}
.spa-service-row:hover {
  border-color: var(--spa-primary);
  box-shadow: var(--spa-shadow-md);
  transform: translateY(-1px);
}
.spa-service-row-img {
  width: 72px;
  height: 56px;
  border-radius: var(--spa-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--spa-bg);
}
.spa-service-row-img img { width: 100%; height: 100%; object-fit: cover; }
.spa-service-row-img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--spa-border) 0%, var(--spa-border-dk) 100%);
}
.spa-service-row-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.spa-service-row-text { flex: 1; }
.spa-service-row-name { font-size: 14px; font-weight: 600; display: block; margin-bottom: 3px; color: var(--spa-dark); }
.spa-service-row-desc { font-size: 12px; color: var(--spa-muted); line-height: 1.4; }
.spa-service-row-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.spa-service-row-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--spa-dark);
  font-family: var(--spa-font-head);
  white-space: nowrap;
}
.spa-badge {
  display: inline-block;
  background: var(--spa-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

/* ── 9. RÉCAP SERVICE SÉLECTIONNÉ ───────────────────── */
.spa-selected-service-recap {
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 14px 16px;
  margin-bottom: 20px;
  box-shadow: var(--spa-shadow);
}
.spa-recap-service {
  display: flex;
  align-items: center;
  gap: 12px;
}
.spa-recap-service img {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--spa-radius-sm);
}
.spa-recap-service strong { display: block; font-size: 14px; margin-bottom: 2px; }
.spa-recap-service span { font-size: 13px; color: var(--spa-primary); font-weight: 600; }

/* ── 10. SÉLECTEUR DE DATE ───────────────────────────── */
.spa-date-section { margin-bottom: 20px; }
.spa-date-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 14px 20px;
  box-shadow: var(--spa-shadow);
}
.spa-date-display { flex: 1; text-align: center; position: relative; }
#spa-date-input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  border: none;
}
.spa-date-label {
  font-family: var(--spa-font-head);
  font-size: 18px;
  font-weight: 600;
  color: var(--spa-dark);
  display: block;
  text-transform: capitalize;
  cursor: pointer;
}
.spa-date-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--spa-border);
  background: var(--spa-bg);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--spa-transition);
  color: var(--spa-text);
}
.spa-date-arrow:hover { background: var(--spa-primary); color: #fff; border-color: var(--spa-primary); }
.spa-date-arrow:disabled { opacity: .4; cursor: not-allowed; }

/* ── 11. CRÉNEAUX ───────────────────────────────────── */
.spa-slots-wrap { min-height: 100px; }
.spa-slots-list { display: flex; flex-direction: column; gap: 8px; }
.spa-slot-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--spa-card);
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius);
  cursor: pointer;
  transition: var(--spa-transition);
  font-family: var(--spa-font-body);
  text-align: left;
}
.spa-slot-item:hover {
  border-color: var(--spa-primary);
  background: rgba(201,169,110,.05);
  transform: translateX(3px);
}
.spa-slot-left { display: flex; align-items: center; gap: 10px; }
.spa-slot-label { font-size: 15px; font-weight: 600; color: var(--spa-dark); }
.spa-slot-badge {
  display: inline-block;
  background: var(--spa-dark);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
}
.spa-slot-price { font-size: 15px; font-weight: 700; color: var(--spa-primary); font-family: var(--spa-font-head); }
.spa-slot-arrow { color: var(--spa-muted); font-size: 18px; }
.spa-no-slots {
  text-align: center;
  padding: 48px 20px;
  color: var(--spa-muted);
  background: var(--spa-card);
  border: 1px dashed var(--spa-border-dk);
  border-radius: var(--spa-radius);
}
.spa-no-slots span { font-size: 40px; display: block; margin-bottom: 12px; }

/* Time picker */
.spa-time-picker-wrap {
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 24px;
}
.spa-time-picker-hint { color: var(--spa-muted); font-size: 13px; margin-bottom: 16px; }
.spa-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap: 8px; }
.spa-time-btn {
  padding: 12px 8px;
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  background: var(--spa-bg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: var(--spa-transition);
  font-family: var(--spa-font-body);
}
.spa-time-btn:hover { background: var(--spa-primary); color: #fff; border-color: var(--spa-primary); }
.spa-time-picker-info { font-size: 12px; color: var(--spa-muted); margin-top: 12px; }

/* ── 12. MINI RÉCAP ────────────────────────────────── */
.spa-mini-recap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(201,169,110,.08);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: var(--spa-radius);
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--spa-dark);
}
.spa-mini-recap span { font-weight: 500; }
.spa-mini-recap span:not(:last-child)::after { content: ' ·'; color: var(--spa-muted); margin-left: 8px; }

/* ── 13. SUPPLÉMENTS ───────────────────────────────── */
.spa-supplements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 12px;
  margin-bottom: 100px; /* space for sticky bar */
}
.spa-supplement-card {
  background: var(--spa-card);
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius);
  overflow: hidden;
  transition: var(--spa-transition);
  box-shadow: var(--spa-shadow);
}
.spa-supplement-card:hover { border-color: var(--spa-primary); box-shadow: var(--spa-shadow-md); }
.spa-supplement-card.selected { border-color: var(--spa-primary); background: rgba(201,169,110,.04); }
.spa-supplement-img {
  height: 100px;
  overflow: hidden;
  background: var(--spa-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spa-supplement-img img { width: 100%; height: 100%; object-fit: cover; }
.spa-supplement-emoji { font-size: 40px; }
.spa-supplement-body { padding: 12px; }
.spa-supplement-name { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.spa-supplement-desc { font-size: 11px; color: var(--spa-muted); line-height: 1.3; margin-bottom: 6px; }
.spa-supplement-price { font-size: 14px; font-weight: 700; color: var(--spa-primary); font-family: var(--spa-font-head); }
.spa-supplement-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--spa-border);
  background: var(--spa-bg);
}
.spa-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--spa-border-dk);
  background: var(--spa-card);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--spa-transition);
  color: var(--spa-text);
}
.spa-qty-btn:hover { background: var(--spa-primary); color: #fff; border-color: var(--spa-primary); }
.spa-qty-input {
  width: 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--spa-dark);
}

/* Barre sticky suppléments */
.spa-supplements-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--spa-dark);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 1000;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
}
.spa-supp-bar-left { font-size: 13px; color: rgba(255,255,255,.75); }
.spa-supp-bar-right { display: flex; align-items: center; gap: 16px; }
.spa-supp-total { font-size: 14px; white-space: nowrap; }
.spa-supp-total strong { font-size: 18px; color: var(--spa-primary); font-family: var(--spa-font-head); }

/* ── 14. CHOIX DU COMPTE (étape 4) ─────────────────── */
.spa-account-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.spa-account-choice {
  background: var(--spa-card);
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 28px 20px;
  text-align: center;
  transition: var(--spa-transition);
  box-shadow: var(--spa-shadow);
}
.spa-account-choice:hover { border-color: var(--spa-primary); box-shadow: var(--spa-shadow-md); }
.spa-account-choice-icon { font-size: 36px; margin-bottom: 12px; }
.spa-account-choice h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.spa-account-choice p { font-size: 13px; color: var(--spa-muted); margin-bottom: 16px; line-height: 1.5; }
.spa-account-connected {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(201,169,110,.08);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: var(--spa-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.spa-account-connected .spa-account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--spa-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spa-account-connected strong { display: block; font-size: 16px; margin-bottom: 2px; }
.spa-account-connected p { font-size: 13px; color: var(--spa-muted); }

/* ── 15. RÉCAP FINAL + FORMULAIRE (étape 5) ──────────── */
.spa-final-recap {
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--spa-shadow);
}
.spa-final-recap h3 { font-size: 16px; margin-bottom: 14px; }
.spa-final-recap-rows { display: flex; flex-direction: column; }
.spa-final-recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--spa-border);
  font-size: 14px;
}
.spa-final-recap-row:last-child { border-bottom: none; }
.spa-final-recap-row span { color: var(--spa-muted); }
.spa-final-recap-row--total strong { font-size: 18px; font-family: var(--spa-font-head); color: var(--spa-dark); }
.spa-final-recap-row--deposit strong { color: var(--spa-primary); }

.spa-form-section { margin-bottom: 24px; }
.spa-form-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.spa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spa-field { display: flex; flex-direction: column; gap: 5px; }
.spa-field label { font-size: 13px; font-weight: 600; color: var(--spa-text); }
.spa-field label abbr { color: var(--spa-danger); text-decoration: none; }
.spa-field input,
.spa-field select,
.spa-field textarea {
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--spa-font-body);
  color: var(--spa-text);
  background: #fff;
  transition: var(--spa-transition);
  width: 100%;
}
.spa-field input:focus,
.spa-field select:focus,
.spa-field textarea:focus {
  outline: none;
  border-color: var(--spa-primary);
  box-shadow: 0 0 0 3px rgba(201,169,110,.15);
}
.spa-field--full { grid-column: 1 / -1; }

/* Carte cadeau au checkout */
.spa-gc-section { padding: 16px; background: var(--spa-bg); border-radius: var(--spa-radius); border: 1px dashed var(--spa-border-dk); }
.spa-gc-toggle {
  background: none;
  border: none;
  color: var(--spa-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--spa-font-body);
}
.spa-gc-inputs { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.spa-gc-inputs input {
  flex: 1;
  min-width: 180px;
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #fff;
}
#spa-gc-msg { width: 100%; font-size: 13px; margin-top: 6px; }
#spa-gc-msg.success { color: var(--spa-success); }
#spa-gc-msg.error   { color: var(--spa-danger); }

/* Stripe */
.spa-payment-info { font-size: 13px; color: var(--spa-muted); margin-bottom: 14px; }
.spa-stripe-element {
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  padding: 12px;
  background: #fff;
  margin-bottom: 8px;
}
.spa-stripe-errors { color: var(--spa-danger); font-size: 13px; min-height: 18px; }
.spa-info-box {
  background: rgba(201,169,110,.08);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: var(--spa-radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--spa-text);
  margin-bottom: 16px;
}
#spa-submit-msg { margin-top: 12px; }

/* ── 16. BOUTONS ────────────────────────────────────── */
.spa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--spa-radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--spa-font-body);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: var(--spa-transition);
  letter-spacing: .3px;
}
.spa-btn--primary {
  background: var(--spa-primary);
  color: #fff;
  border-color: var(--spa-primary);
}
.spa-btn--primary:hover {
  background: var(--spa-primary-dk);
  border-color: var(--spa-primary-dk);
  color: #fff;
}
.spa-btn--outline {
  background: transparent;
  color: var(--spa-primary);
  border-color: var(--spa-primary);
}
.spa-btn--outline:hover {
  background: var(--spa-primary);
  color: #fff;
}
.spa-btn--ghost {
  background: transparent;
  color: var(--spa-muted);
  border-color: var(--spa-border-dk);
}
.spa-btn--ghost:hover { border-color: var(--spa-danger); color: var(--spa-danger); }
.spa-btn--danger { background: var(--spa-danger); color: #fff; border-color: var(--spa-danger); }
.spa-btn--lg { padding: 14px 32px; font-size: 15px; }
.spa-btn--full { width: 100%; }
.spa-btn--sm { padding: 7px 14px; font-size: 12px; }
.spa-btn--select { padding: 8px 16px; font-size: 13px; }
.spa-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── 17. ALERTES ────────────────────────────────────── */
.spa-alert { padding: 12px 16px; border-radius: var(--spa-radius-sm); font-size: 14px; margin-top: 12px; }
.spa-alert--success { background: rgba(76,175,125,.1); color: #2d7a56; border: 1px solid rgba(76,175,125,.3); }
.spa-alert--error   { background: rgba(224,82,82,.08); color: #b33; border: 1px solid rgba(224,82,82,.25); }

/* ── 18. CONFIRMATION ───────────────────────────────── */
.spa-confirmation {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius-lg);
  padding: 48px 40px;
  box-shadow: var(--spa-shadow-lg);
}
.spa-confirmation-icon { font-size: 60px; margin-bottom: 16px; }
.spa-confirmation h1 { font-size: 28px; margin-bottom: 8px; }
.spa-confirmation p { color: var(--spa-muted); margin-bottom: 20px; }
.spa-confirmation-ref {
  display: inline-block;
  background: rgba(201,169,110,.1);
  color: var(--spa-primary);
  font-size: 22px;
  font-weight: 700;
  font-family: monospace;
  padding: 10px 28px;
  border-radius: var(--spa-radius-sm);
  letter-spacing: 3px;
  margin-bottom: 24px;
}
.spa-confirmation-details { text-align: left; margin-bottom: 20px; }
.spa-cfm-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--spa-border); font-size: 14px; }
.spa-cfm-row:last-child { border-bottom: none; }
.spa-cfm-row span { color: var(--spa-muted); }
.spa-cfm-supplements { text-align: left; background: var(--spa-bg); border-radius: var(--spa-radius-sm); padding: 12px; margin-bottom: 16px; }
.spa-cfm-supplements h4 { font-size: 13px; margin-bottom: 6px; }
.spa-cfm-supplements ul { padding-left: 16px; font-size: 13px; color: var(--spa-text); }
.spa-cfm-note { font-size: 12px; color: var(--spa-muted); border-left: 3px solid var(--spa-primary); padding-left: 10px; text-align: left; margin-bottom: 24px; }
.spa-cfm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── 19. CARTE CADEAU (page) ───────────────────────── */
#spa-giftcard-wrap .spa-section-title { font-size: 28px; text-align: center; margin-bottom: 8px; }
#spa-giftcard-wrap .spa-section-sub   { text-align: center; color: var(--spa-muted); margin-bottom: 32px; }
.spa-gc-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
.spa-gc-choice-inner {
  background: var(--spa-card);
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--spa-shadow);
  transition: var(--spa-transition);
}
.spa-gc-choice-inner:hover { border-color: var(--spa-primary); box-shadow: var(--spa-shadow-md); }
.spa-gc-choice-icon { font-size: 40px; margin-bottom: 12px; }
.spa-gc-choice-inner h3 { font-size: 18px; margin-bottom: 8px; }
.spa-gc-choice-inner p  { font-size: 13px; color: var(--spa-muted); margin-bottom: 18px; }
.spa-gc-form-section {
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--spa-shadow);
}
.spa-gc-form-section h3 { font-size: 20px; margin-bottom: 20px; }
.spa-gc-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.spa-gc-amount-btn {
  padding: 10px 20px;
  border: 1.5px solid var(--spa-border-dk);
  border-radius: var(--spa-radius-sm);
  background: var(--spa-bg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--spa-transition);
}
.spa-gc-amount-btn:hover,
.spa-gc-amount-btn.selected {
  background: var(--spa-primary);
  color: #fff;
  border-color: var(--spa-primary);
}
#spa-gc-custom-amount {
  width: 140px;
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  padding: 9px 12px;
  font-size: 14px;
}
.spa-gc-activate-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.spa-gc-activate-form input {
  flex: 1;
  min-width: 220px;
  border: 1.5px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  padding: 10px 14px;
  font-size: 15px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}
#spa-gc-check-result { margin-top: 14px; }

/* ── 20. ESPACE CLIENT ──────────────────────────────── */
.spa-account-header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--spa-shadow);
}
.spa-account-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--spa-primary);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--spa-font-head);
}
.spa-account-info { flex: 1; }
.spa-account-info h2 { font-size: 20px; margin-bottom: 2px; }
.spa-account-info p  { font-size: 13px; color: var(--spa-muted); }
.spa-account-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.spa-stat-card {
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--spa-shadow);
}
.spa-stat-val {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--spa-font-head);
  color: var(--spa-primary);
  margin-bottom: 4px;
}
.spa-stat-lbl { font-size: 12px; color: var(--spa-muted); }
.spa-account-tabs { display: flex; border-bottom: 2px solid var(--spa-border); margin-bottom: 20px; }
.spa-acc-tab {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--spa-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--spa-font-body);
  transition: var(--spa-transition);
}
.spa-acc-tab span { font-size: 12px; opacity: .7; }
.spa-acc-tab.active { color: var(--spa-primary); border-bottom-color: var(--spa-primary); }
.spa-acc-panel { display: none; }
.spa-acc-panel.active { display: block; }
.spa-booking-card {
  background: var(--spa-card);
  border: 1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--spa-shadow);
  transition: var(--spa-transition);
}
.spa-booking-card--past { opacity: .72; }
.spa-booking-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--spa-bg);
  border-bottom: 1px solid var(--spa-border);
}
.spa-booking-ref { font-size: 13px; font-weight: 700; font-family: monospace; color: var(--spa-primary); }
.spa-booking-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; }
.spa-bk-row { display: flex; flex-direction: column; gap: 2px; }
.spa-bk-row span { font-size: 11px; color: var(--spa-muted); text-transform: uppercase; letter-spacing: .4px; }
.spa-bk-row strong { font-size: 13px; color: var(--spa-dark); }
.spa-booking-card-foot { padding: 10px 16px; border-top: 1px solid var(--spa-border); background: #fff8f8; }
.spa-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.spa-status-pill--success { background: rgba(76,175,125,.12); color: #2d7a56; }
.spa-status-pill--warning { background: rgba(232,168,56,.12); color: #9a6c0a; }
.spa-status-pill--danger  { background: rgba(224,82,82,.10);  color: #b33; }
.spa-status-pill--neutral { background: var(--spa-bg); color: var(--spa-muted); border: 1px solid var(--spa-border); }
.spa-empty { text-align: center; padding: 48px 20px; color: var(--spa-muted); }
.spa-empty-icon { font-size: 48px; margin-bottom: 12px; }
.spa-empty p { margin-bottom: 16px; }
.spa-muted { color: var(--spa-muted); }

/* Auth */
#spa-auth-wrap { max-width: 480px; margin: 0 auto; }
.spa-auth-tabs { display: flex; border-bottom: 2px solid var(--spa-border); margin-bottom: 24px; }
.spa-auth-tab {
  background: none; border: none;
  padding: 10px 24px;
  font-size: 14px; font-weight: 600;
  color: var(--spa-muted); cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--spa-transition);
  font-family: var(--spa-font-body);
}
.spa-auth-tab.active { color: var(--spa-primary); border-bottom-color: var(--spa-primary); }
.spa-auth-panel { display: none; }
.spa-auth-panel.active { display: block; }
.spa-auth-panel .spa-field { margin-bottom: 14px; }
.spa-form-msg { margin-top: 10px; font-size: 13px; }
.spa-form-msg.success { color: var(--spa-success); }
.spa-form-msg.error   { color: var(--spa-danger); }

/* ── 21. LOADING / SPINNER ──────────────────────────── */
.spa-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--spa-muted);
}
.spa-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--spa-border);
  border-top-color: var(--spa-primary);
  border-radius: 50%;
  animation: spa-spin .7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spa-spin { to { transform: rotate(360deg); } }

/* ── 22. NO RESULT ──────────────────────────────────── */
.spa-no-result { color: var(--spa-muted); font-style: italic; text-align: center; padding: 32px; }

/* ── 23. RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .spa-progress-label { display: none; }
  .spa-services-layout { grid-template-columns: 1fr; }
  .spa-services-nav { position: static; }
  .spa-account-choices { grid-template-columns: 1fr; }
  .spa-form-grid { grid-template-columns: 1fr; }
  .spa-account-stats { grid-template-columns: repeat(3,1fr); }
  .spa-gc-choices { grid-template-columns: 1fr; }
  .spa-supplements-grid { grid-template-columns: repeat(2,1fr); }
  .spa-confirmation { padding: 32px 20px; }
}
@media (max-width: 480px) {
  .spa-supplements-grid { grid-template-columns: 1fr; }
  .spa-booking-card-body { grid-template-columns: 1fr; }
  .spa-account-stats { grid-template-columns: 1fr; }
  .spa-supplements-bar { flex-direction: column; gap: 10px; text-align: center; padding: 14px; }
  .spa-supp-bar-right { flex-direction: column; width: 100%; }
  .spa-account-header { flex-wrap: wrap; }
  .spa-account-header .spa-btn { width: 100%; }
}

/* ── Modal détail ───────────────────────────── */
.spa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: spa-fade-in .2s ease;
}
@keyframes spa-fade-in { from{opacity:0} to{opacity:1} }
.spa-modal {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: spa-slide-up .25s ease;
}
@keyframes spa-slide-up { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.spa-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f0ece6;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spa-modal-close:hover { background: var(--spa-primary,#C9A96E); color: #fff; }

/* ── Bouton Détail dans les lignes de service ── */
.spa-service-row-action { flex-direction: row; align-items: center; gap: 8px; }
.spa-detail-btn {
  padding: 7px 12px;
  font-size: 12px;
  border: 1.5px solid var(--spa-border,#E8E0D5);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: var(--spa-muted,#8A7D6E);
  font-family: var(--spa-font-body,sans-serif);
  transition: all .2s;
  white-space: nowrap;
}
.spa-detail-btn:hover { border-color: var(--spa-primary,#C9A96E); color: var(--spa-primary,#C9A96E); }

/* ── Shortcode [spa_services] homepage ──────── */
#spa-services-widget { font-family: var(--spa-font-body,sans-serif); }
.spa-hs-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.spa-hs-tab {
  padding: 10px 22px;
  border: 1.5px solid var(--spa-border,#E8E0D5);
  border-radius: 30px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--spa-text,#2C2C2C);
  transition: all .2s;
  font-family: var(--spa-font-body,sans-serif);
  display: flex;
  align-items: center;
  gap: 6px;
}
.spa-hs-tab:hover { border-color: var(--spa-primary,#C9A96E); color: var(--spa-primary,#C9A96E); }
.spa-hs-tab.active {
  background: var(--spa-primary,#C9A96E);
  border-color: var(--spa-primary,#C9A96E);
  color: #fff;
}
.spa-hs-panel { display: none; }
.spa-hs-panel.active { display: block; }
.spa-hs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 16px;
}
.spa-hs-card {
  background: #fff;
  border: 1.5px solid var(--spa-border,#E8E0D5);
  border-radius: var(--spa-radius,12px);
  overflow: hidden;
  box-shadow: var(--spa-shadow,0 2px 16px rgba(0,0,0,.07));
  transition: all .22s ease;
  display: flex;
  flex-direction: column;
}
.spa-hs-card:hover {
  border-color: var(--spa-primary,#C9A96E);
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
  transform: translateY(-3px);
}
.spa-hs-card-img {
  height: 160px;
  overflow: hidden;
  background: var(--spa-bg,#FAF8F5);
  position: relative;
}
.spa-hs-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.spa-hs-card:hover .spa-hs-card-img img { transform: scale(1.04); }
.spa-hs-card-img .spa-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}
.spa-hs-card-img--empty { background: linear-gradient(135deg,#f0ece6 0%,#e8e0d5 100%); width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; }
.spa-hs-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.spa-hs-card-name { font-size: 15px; font-weight: 700; margin-bottom: 5px; color: var(--spa-dark,#1A1A1A); }
.spa-hs-card-desc { font-size: 12px; color: var(--spa-muted,#8A7D6E); line-height: 1.4; margin-bottom: 10px; flex: 1; }
.spa-hs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--spa-border,#E8E0D5);
}
.spa-hs-card-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--spa-primary,#C9A96E);
  font-family: var(--spa-font-head,Georgia,serif);
  white-space: nowrap;
}
.spa-hs-card-actions { display: flex; gap: 6px; }
.spa-hs-card-actions .spa-btn { padding: 8px 14px; font-size: 12px; }

@media (max-width: 640px) {
  .spa-hs-grid { grid-template-columns: 1fr 1fr; }
  .spa-hs-card-img { height: 120px; }
  .spa-service-row-action { flex-direction: column; align-items: flex-end; }
}
@media (max-width: 400px) {
  .spa-hs-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   PATCH v2.1 — Corrections visibilité + UX
   ════════════════════════════════════════════ */

/* Force couleurs sur tous les boutons (override thème WP) */
.spa-btn--primary,
a.spa-btn--primary,
button.spa-btn--primary {
  color: #ffffff !important;
  background-color: var(--spa-primary, #C9A96E) !important;
  border-color: var(--spa-primary, #C9A96E) !important;
  text-decoration: none !important;
}
.spa-btn--primary:hover,
a.spa-btn--primary:hover {
  color: #ffffff !important;
  background-color: var(--spa-primary-dk, #A8884F) !important;
}
.spa-btn--outline,
a.spa-btn--outline {
  color: var(--spa-primary, #C9A96E) !important;
  background: transparent !important;
  border-color: var(--spa-primary, #C9A96E) !important;
  text-decoration: none !important;
}
.spa-btn--outline:hover,
a.spa-btn--outline:hover {
  color: #ffffff !important;
  background: var(--spa-primary, #C9A96E) !important;
}
.spa-btn--ghost,
a.spa-btn--ghost {
  color: var(--spa-muted, #8A7D6E) !important;
  background: transparent !important;
  border-color: var(--spa-border-dk, #D4C4B0) !important;
  text-decoration: none !important;
}

/* Fix date label (texte visible) */
#spa-date-label,
.spa-date-label {
  color: var(--spa-dark, #1A1A1A) !important;
  font-family: var(--spa-font-head, Georgia, serif) !important;
  font-size: 18px !important;
  display: block !important;
  cursor: pointer !important;
}

/* Fix quantité (input number) — override thème */
.spa-qty-input {
  color: var(--spa-dark, #1A1A1A) !important;
  background: transparent !important;
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  width: 36px !important;
  text-align: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.spa-qty-input::-webkit-outer-spin-button,
.spa-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Fix slot items — override thème */
.spa-slot-item,
button.spa-slot-item {
  color: var(--spa-dark, #1A1A1A) !important;
  background: #fff !important;
}
.spa-slot-label { color: var(--spa-dark, #1A1A1A) !important; }
.spa-slot-price { color: var(--spa-primary, #C9A96E) !important; }
.spa-slot-item:hover .spa-slot-label { color: #fff !important; }
.spa-slot-item:hover .spa-slot-price { color: #fff !important; }

/* Fix time buttons */
button.spa-time-btn {
  color: var(--spa-dark, #1A1A1A) !important;
  background: var(--spa-bg, #FAF8F5) !important;
}
button.spa-time-btn:hover {
  color: #fff !important;
  background: var(--spa-primary, #C9A96E) !important;
}

/* Fix cartes cadeaux — montants */
.spa-gc-amount-btn {
  color: var(--spa-dark, #1A1A1A) !important;
}
.spa-gc-amount-btn.selected,
.spa-gc-amount-btn:hover {
  color: #fff !important;
  background: var(--spa-primary, #C9A96E) !important;
  border-color: var(--spa-primary, #C9A96E) !important;
}

/* Fix inputs globaux — override thème */
.spa-wrap input[type="text"],
.spa-wrap input[type="email"],
.spa-wrap input[type="tel"],
.spa-wrap input[type="date"],
.spa-wrap input[type="time"],
.spa-wrap input[type="password"],
.spa-wrap textarea,
.spa-wrap select {
  color: var(--spa-dark, #1A1A1A) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--spa-border, #E8E0D5) !important;
  border-radius: 6px !important;
  font-family: var(--spa-font-body, Inter, sans-serif) !important;
}
.spa-wrap input[type="text"]:focus,
.spa-wrap input[type="email"]:focus,
.spa-wrap input[type="tel"]:focus,
.spa-wrap input[type="password"]:focus,
.spa-wrap textarea:focus,
.spa-wrap select:focus {
  border-color: var(--spa-primary, #C9A96E) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,169,110,.15) !important;
}

/* Fix labels */
.spa-field label {
  color: var(--spa-text, #2C2C2C) !important;
  font-weight: 600 !important;
}

/* [spa_services] card cursor */
.spa-hs-card-clickable {
  cursor: pointer !important;
}
.spa-hs-card-clickable:hover {
  border-color: var(--spa-primary, #C9A96E) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  transform: translateY(-3px) !important;
}

/* Auth tabs fix */
.spa-auth-tabs { margin-bottom: 24px; border-bottom: 2px solid var(--spa-border, #E8E0D5); display: flex; }
.spa-auth-tab {
  background: none !important;
  border: none !important;
  color: var(--spa-muted, #8A7D6E) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  font-family: var(--spa-font-body, Inter, sans-serif) !important;
}
.spa-auth-tab.active {
  color: var(--spa-primary, #C9A96E) !important;
  border-bottom-color: var(--spa-primary, #C9A96E) !important;
}
.spa-acc-tab {
  color: var(--spa-muted, #8A7D6E) !important;
}
.spa-acc-tab.active {
  color: var(--spa-primary, #C9A96E) !important;
  border-bottom-color: var(--spa-primary, #C9A96E) !important;
}

/* Fix stripe element on gift card page */
.spa-gc-stripe-section { margin-bottom: 16px; }
#spa-gc-stripe-el.spa-stripe-element { margin-bottom: 6px; }

/* ── RESPONSIVE FIXES ─────────────────────── */
@media (max-width: 640px) {
  /* [spa_services] sur mobile */
  .spa-hs-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .spa-hs-tabs { flex-wrap: wrap; gap: 6px; }
  .spa-hs-tab { font-size: 12px !important; padding: 8px 12px !important; }
  .spa-hs-card-footer { flex-direction: column; gap: 10px; }
  .spa-hs-card-actions { width: 100%; display: flex; gap: 8px; }
  .spa-hs-card-actions .spa-btn { flex: 1; text-align: center; padding: 10px 8px !important; }
  .spa-hs-card-price { font-size: 18px !important; }

  /* Tunnel réservation sur mobile */
  .spa-progress-label { display: none; }
  .spa-services-layout { grid-template-columns: 1fr; }
  .spa-services-nav { position: static; }
  .spa-form-grid { grid-template-columns: 1fr; }
  .spa-cat-filters { gap: 6px; }
  .spa-cat-filter { min-width: 70px; padding: 8px 10px; }
  .spa-supplements-grid { grid-template-columns: 1fr 1fr; }
  .spa-account-choices { grid-template-columns: 1fr; }
  
  /* Espace client mobile */
  .spa-account-stats { grid-template-columns: 1fr 1fr 1fr; }
  .spa-account-header { flex-wrap: wrap; }
  .spa-bk-body { grid-template-columns: 1fr 1fr; }

  /* Carte cadeau mobile */
  .spa-gc-choices { grid-template-columns: 1fr; }
  .spa-gc-amounts { flex-wrap: wrap; }
  .spa-gc-amount-btn { flex: 1; min-width: 80px; }
}

@media (max-width: 400px) {
  .spa-supplements-grid { grid-template-columns: 1fr; }
  .spa-account-stats { grid-template-columns: 1fr; }
  .spa-progress-dot { width: 30px; height: 30px; font-size: 12px; }
  .spa-progress-line { min-width: 12px; }
}

/* ════════════════════════════════════════════════════════
   PATCH v2.2 — Texte blanc + Responsive complet
   ════════════════════════════════════════════════════════ */

/* ── RESET RADICAL contre le thème WP ──────────────────
   Force TOUTES les couleurs et fontes dans les wrappers SPA
   ───────────────────────────────────────────────────────── */
#spa-booking,
#spa-booking *,
#spa-account-wrap,
#spa-account-wrap *,
#spa-auth-wrap,
#spa-auth-wrap *,
#spa-giftcard-wrap,
#spa-giftcard-wrap *,
.spa-confirmation,
.spa-confirmation * {
  box-sizing: border-box;
}

/* Texte de base — override thème */
#spa-booking,
#spa-account-wrap,
#spa-auth-wrap,
#spa-giftcard-wrap,
.spa-confirmation {
  color: #2C2C2C !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  background: #FAF8F5 !important;
}

/* Tous les textes dans booking */
#spa-booking p,
#spa-booking span,
#spa-booking li,
#spa-booking strong,
#spa-booking em,
#spa-booking small,
#spa-booking label,
#spa-booking td,
#spa-booking th,
#spa-booking div:not([class*="spa-btn"]):not([class*="spa-badge"]):not([class*="spa-progress-dot"]):not([class*="spa-supp-bar"]) {
  color: #2C2C2C;
}

/* Titres */
#spa-booking h1,
#spa-booking h2,
#spa-booking h3,
#spa-booking h4,
#spa-account-wrap h1,
#spa-account-wrap h2,
#spa-account-wrap h3,
#spa-giftcard-wrap h1,
#spa-giftcard-wrap h2,
#spa-giftcard-wrap h3,
.spa-confirmation h1,
.spa-confirmation h2 {
  color: #1A1A1A !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* Textes secondaires */
#spa-booking .spa-service-row-desc,
#spa-booking .spa-step-header p,
#spa-booking .spa-supplement-desc,
#spa-booking .spa-time-picker-hint,
#spa-booking .spa-time-picker-info,
#spa-booking .spa-mini-recap span,
#spa-booking .spa-payment-info,
#spa-booking .spa-info-box,
.spa-confirmation p {
  color: #8A7D6E !important;
}

/* Noms de services */
#spa-booking .spa-service-row-name { color: #1A1A1A !important; font-weight: 700 !important; }
#spa-booking .spa-service-row-price { color: #1A1A1A !important; font-weight: 700 !important; }
#spa-booking .spa-slot-label { color: #1A1A1A !important; }
#spa-booking .spa-slot-price { color: #C9A96E !important; font-weight: 700 !important; }
#spa-booking .spa-supplement-name { color: #1A1A1A !important; font-weight: 700 !important; }
#spa-booking .spa-supplement-price { color: #C9A96E !important; }
#spa-booking .spa-supp-total strong { color: #C9A96E !important; }

/* Links override */
#spa-booking a,
#spa-account-wrap a,
#spa-giftcard-wrap a {
  color: #C9A96E !important;
}

/* Progress bar dots */
#spa-booking .spa-progress-dot span { color: #8A7D6E !important; }
#spa-booking .spa-progress-step.active .spa-progress-dot span { color: #fff !important; }
#spa-booking .spa-progress-step.done .spa-progress-dot span { color: #fff !important; }
#spa-booking .spa-progress-label { color: #8A7D6E !important; font-size: 11px !important; }
#spa-booking .spa-progress-step.active .spa-progress-label { color: #C9A96E !important; }

/* Nav gauche */
#spa-booking .spa-nav-group-toggle { color: #1A1A1A !important; background: #fff !important; }
#spa-booking .spa-nav-item { color: #2C2C2C !important; }
#spa-booking .spa-nav-item:hover,
#spa-booking .spa-nav-item.active { color: #C9A96E !important; }

/* Onglets catégories */
#spa-booking .spa-cat-filter { color: #2C2C2C !important; background: #fff !important; }
#spa-booking .spa-cat-filter.active { color: #fff !important; background: #C9A96E !important; }
#spa-booking .spa-cat-icon { color: inherit !important; }
#spa-booking .spa-cat-label { color: inherit !important; }

/* Bouton retour */
#spa-booking .spa-back-btn { color: #8A7D6E !important; background: none !important; }
#spa-booking .spa-back-btn:hover { color: #C9A96E !important; }

/* Date */
#spa-booking #spa-date-label { color: #1A1A1A !important; font-size: 18px !important; font-family: 'Cormorant Garamond', Georgia, serif !important; }
#spa-booking .spa-date-arrow { color: #2C2C2C !important; background: #FAF8F5 !important; border-color: #E8E0D5 !important; }
#spa-booking .spa-date-arrow:hover { color: #fff !important; background: #C9A96E !important; }

/* Boutons quantité */
#spa-booking .spa-qty-btn { color: #2C2C2C !important; background: #fff !important; border-color: #D4C4B0 !important; }
#spa-booking .spa-qty-btn:hover { color: #fff !important; background: #C9A96E !important; }

/* Barre suppléments */
#spa-booking .spa-supp-bar-left { color: rgba(255,255,255,0.8) !important; }

/* Espace client */
#spa-account-wrap .spa-acc-tab { color: #8A7D6E !important; }
#spa-account-wrap .spa-acc-tab.active { color: #C9A96E !important; }
#spa-account-wrap .spa-stat-val { color: #C9A96E !important; }
#spa-account-wrap .spa-stat-lbl { color: #8A7D6E !important; }
#spa-account-wrap .spa-bk-row span { color: #8A7D6E !important; font-size: 11px !important; text-transform: uppercase !important; }
#spa-account-wrap .spa-bk-row strong { color: #1A1A1A !important; }
#spa-account-wrap .spa-bk-ref { color: #C9A96E !important; font-family: monospace !important; font-weight: 700 !important; }

/* Cartes cadeaux */
#spa-giftcard-wrap .spa-gc-amount-btn { color: #2C2C2C !important; background: #FAF8F5 !important; }
#spa-giftcard-wrap .spa-gc-amount-btn.selected,
#spa-giftcard-wrap .spa-gc-amount-btn:hover { color: #fff !important; background: #C9A96E !important; }

/* Confirmation */
.spa-confirmation-ref { color: #C9A96E !important; }
.spa-cfm-row span { color: #8A7D6E !important; }
.spa-cfm-row strong { color: #1A1A1A !important; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE COMPLET — [spa_booking] + toutes les pages
   ════════════════════════════════════════════════════════ */

/* ── TABLETTE (768px - 1024px) ────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .spa-wrap { padding: 0 16px; }

  /* Booking step 1 */
  .spa-services-layout { grid-template-columns: 220px 1fr; gap: 12px; }
  .spa-service-row { padding: 12px 14px; gap: 12px; }
  .spa-service-row-img { width: 60px; height: 46px; }
  .spa-service-row-name { font-size: 13px; }
  .spa-service-row-desc { font-size: 11px; }
  .spa-service-row-price { font-size: 14px; }
  .spa-cat-filters { gap: 6px; }
  .spa-cat-filter { min-width: 76px; padding: 8px 12px; }
  .spa-cat-icon { font-size: 18px; }
  .spa-cat-label { font-size: 10px; }

  /* Booking step 3 - suppléments */
  .spa-supplements-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* Booking step 4 - compte */
  .spa-account-choices { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .spa-account-choice { padding: 20px 16px; }

  /* Booking step 5 - formulaire */
  .spa-form-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Espace client */
  .spa-account-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .spa-booking-card-body { grid-template-columns: 1fr 1fr; }

  /* Gift card */
  .spa-gc-choices { grid-template-columns: 1fr 1fr; gap: 14px; }
  .spa-gc-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ── MOBILE (< 640px) ─────────────────────────────────── */
@media (max-width: 640px) {
  .spa-wrap { max-width: 100%; padding: 0 12px; }

  /* ── Progress bar mobile ── */
  .spa-progress { padding: 16px 0 20px; gap: 0; overflow-x: auto; }
  .spa-progress-step { min-width: 48px; }
  .spa-progress-dot { width: 32px; height: 32px; font-size: 12px; }
  .spa-progress-label { font-size: 9px; max-width: 56px; text-align: center; }
  .spa-progress-line { min-width: 10px; height: 2px; }

  /* ── Step headers ── */
  .spa-step-header h2 { font-size: 20px !important; }
  .spa-step-header p { font-size: 13px !important; }
  .spa-back-btn { font-size: 13px !important; margin-bottom: 10px !important; }

  /* ── ÉTAPE 1 — Layout ── */
  .spa-cat-filters {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .spa-cat-filter {
    min-width: unset !important;
    padding: 8px 4px !important;
    border-radius: 8px !important;
  }
  .spa-cat-icon { font-size: 18px !important; }
  .spa-cat-label { font-size: 9px !important; }

  /* Nav gauche cachée sur mobile, tout en accordéon */
  .spa-services-layout {
    display: block !important;
  }
  .spa-services-nav {
    position: static !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .spa-nav-group-toggle {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
  .spa-nav-items { display: none; }
  .spa-nav-group.open .spa-nav-items { display: block !important; }
  .spa-nav-item { font-size: 12px !important; padding: 9px 14px 9px 18px !important; }

  .spa-svc-panels { /* services list full width */ }

  /* Service rows compact */
  .spa-service-row {
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .spa-service-row-img {
    width: 54px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .spa-service-row-body {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .spa-service-row-name { font-size: 13px !important; }
  .spa-service-row-desc { font-size: 11px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .spa-service-row-action {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .spa-service-row-price { font-size: 14px !important; }
  .spa-row-btns { gap: 6px !important; }
  .spa-detail-btn { padding: 6px 10px !important; font-size: 11px !important; }
  .spa-btn--select { padding: 7px 12px !important; font-size: 12px !important; }

  /* ── ÉTAPE 2 — Date ── */
  .spa-date-nav { padding: 12px 14px !important; gap: 8px !important; }
  .spa-date-arrow { width: 34px !important; height: 34px !important; font-size: 18px !important; }
  #spa-date-label { font-size: 15px !important; }

  /* Slots */
  .spa-slot-item { padding: 12px 14px !important; }
  .spa-slot-label { font-size: 14px !important; }
  .spa-slot-price { font-size: 14px !important; }

  /* Time buttons */
  .spa-time-grid .spa-time-btn {
    padding: 10px 4px !important;
    font-size: 13px !important;
  }
  #spa-booking .spa-time-grid > div {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
  }

  /* ── ÉTAPE 3 — Suppléments ── */
  .spa-supplements-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 90px !important;
  }
  .spa-supplement-img { height: 80px !important; }
  .spa-supplement-emoji { font-size: 32px !important; }
  .spa-supplement-name { font-size: 12px !important; }
  .spa-supplement-desc { font-size: 10px !important; }
  .spa-supplement-price { font-size: 13px !important; }

  /* Barre total sticky */
  .spa-supplements-bar {
    padding: 10px 14px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .spa-supp-bar-left { font-size: 12px !important; width: 100%; }
  .spa-supp-bar-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .spa-supp-total { font-size: 13px !important; }
  .spa-supp-total strong { font-size: 16px !important; }
  #spa-step3-next { padding: 11px 18px !important; font-size: 13px !important; }

  /* ── ÉTAPE 4 — Compte ── */
  .spa-account-choices {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .spa-account-choice { padding: 18px 16px !important; }
  .spa-account-choice-icon { font-size: 28px !important; margin-bottom: 8px !important; }
  .spa-account-choice h3 { font-size: 15px !important; }
  .spa-account-choice p { font-size: 12px !important; }

  .spa-account-connected { flex-wrap: wrap !important; gap: 10px !important; }

  /* ── ÉTAPE 5 — Formulaire ── */
  .spa-final-recap { padding: 14px !important; }
  .spa-final-recap h3 { font-size: 15px !important; }
  .spa-final-recap-row { font-size: 13px !important; padding: 8px 0 !important; }
  .spa-final-recap-row--total strong { font-size: 16px !important; }

  .spa-form-section h3 { font-size: 15px !important; }
  .spa-form-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .spa-field label { font-size: 12px !important; }
  .spa-field input, .spa-field select, .spa-field textarea { padding: 9px 10px !important; font-size: 14px !important; }
  .spa-field--full { grid-column: 1 !important; }

  .spa-gc-section { padding: 12px !important; }
  .spa-gc-inputs { flex-direction: column !important; }
  .spa-gc-inputs input { min-width: 100% !important; }

  #spa-submit-btn { padding: 14px !important; font-size: 15px !important; }

  /* ── ESPACE CLIENT mobile ── */
  .spa-account-header { padding: 14px !important; gap: 12px !important; flex-wrap: wrap !important; }
  .spa-account-avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .spa-account-info h2 { font-size: 17px !important; }
  .spa-account-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .spa-stat-val { font-size: 20px !important; }
  .spa-stat-lbl { font-size: 10px !important; }
  .spa-account-tabs { gap: 0 !important; }
  .spa-acc-tab { padding: 8px 14px !important; font-size: 13px !important; }
  .spa-booking-card-body { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .spa-bk-row strong { font-size: 12px !important; }
  .spa-bk-row span { font-size: 10px !important; }

  /* Auth mobile */
  #spa-auth-wrap { padding: 0 !important; }
  .spa-auth-tab { padding: 10px 18px !important; font-size: 14px !important; }
  .spa-auth-panel .spa-field { margin-bottom: 12px !important; }

  /* ── CARTES CADEAUX mobile ── */
  .spa-gc-choices { grid-template-columns: 1fr !important; gap: 10px !important; }
  .spa-gc-choice-inner { padding: 20px 16px !important; }
  .spa-gc-choice-icon { font-size: 32px !important; }
  .spa-gc-form-section { padding: 18px 14px !important; }
  .spa-gc-amounts { gap: 6px !important; flex-wrap: wrap !important; }
  .spa-gc-amount-btn { min-width: calc(33% - 6px) !important; padding: 9px 8px !important; font-size: 14px !important; }
  #spa-gc-custom-amount { width: 100% !important; }
  .spa-gc-form-grid { grid-template-columns: 1fr !important; }
  .spa-gc-activate-form { flex-direction: column !important; }
  .spa-gc-activate-form input { min-width: 100% !important; }
  .spa-gc-activate-form .spa-btn { width: 100% !important; }

  /* ── CONFIRMATION mobile ── */
  .spa-confirmation { padding: 24px 16px !important; }
  .spa-confirmation h1 { font-size: 22px !important; }
  .spa-confirmation-icon { font-size: 48px !important; }
  .spa-confirmation-ref { font-size: 18px !important; padding: 8px 20px !important; letter-spacing: 2px !important; }
  .spa-cfm-row { font-size: 13px !important; padding: 8px 0 !important; }
  .spa-cfm-actions { flex-direction: column !important; gap: 8px !important; }
  .spa-cfm-actions .spa-btn { width: 100% !important; text-align: center !important; }

  /* ── PANEL ADMIN mobile ── */
  .spa-panel-tabs { flex-wrap: wrap !important; }
  .spa-panel-tab { font-size: 12px !important; padding: 8px 12px !important; }
  .spa-panel-filters { flex-direction: column !important; }
  .spa-panel-filters input,
  .spa-panel-filters select { width: 100% !important; }
  .spa-panel-table { font-size: 11px !important; }
  .spa-panel-table thead th { padding: 8px 8px !important; font-size: 10px !important; }
  .spa-panel-table tbody td { padding: 8px 8px !important; }
  .spa-panel-form .spa-panel-form-grid { grid-template-columns: 1fr !important; }
}

/* ── Très petit mobile (< 380px) ──────────────────────── */
@media (max-width: 380px) {
  .spa-cat-filters { grid-template-columns: repeat(2, 1fr) !important; }
  .spa-supplements-grid { grid-template-columns: 1fr !important; }
  .spa-account-stats { grid-template-columns: 1fr !important; }
  .spa-booking-card-body { grid-template-columns: 1fr !important; }
  .spa-progress-label { display: none !important; }
  .spa-gc-amount-btn { min-width: calc(50% - 4px) !important; }
}

/* ════════════════════════════════════════════
   PATCH v2.3 — Boutons compte + Badge nuitée
   ════════════════════════════════════════════ */

/* Fix 2 — Texte invisible sur boutons <a> dans #spa-account-wrap
   Le thème WP écrase la couleur des <a> y compris dans les boutons */
#spa-account-wrap a.spa-btn,
#spa-account-wrap a.spa-btn--primary,
#spa-account-wrap a.spa-btn--outline,
#spa-account-wrap a.spa-btn--ghost,
#spa-auth-wrap a.spa-btn,
#spa-auth-wrap a.spa-btn--primary {
  text-decoration: none !important;
}
#spa-account-wrap a.spa-btn--primary,
#spa-auth-wrap a.spa-btn--primary {
  color: #ffffff !important;
  background-color: #C9A96E !important;
  border-color: #C9A96E !important;
}
#spa-account-wrap a.spa-btn--primary:hover {
  color: #ffffff !important;
  background-color: #A8884F !important;
}
#spa-account-wrap a.spa-btn--outline {
  color: #C9A96E !important;
  background: transparent !important;
  border-color: #C9A96E !important;
}
#spa-account-wrap a.spa-btn--outline:hover {
  color: #ffffff !important;
  background-color: #C9A96E !important;
}

/* Fix 3 — Badge "🌙 Nuitée" qui déborde sur le prix (mobile)
   Structure : .spa-slot-item > .spa-slot-left (label + badge) + .spa-slot-price + .spa-slot-arrow */
.spa-slot-left {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.spa-slot-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.spa-slot-badge {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}
.spa-slot-price {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-left: 8px !important;
}
.spa-slot-arrow {
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  .spa-slot-item {
    padding: 11px 14px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .spa-slot-left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
  }
  .spa-slot-label {
    font-size: 14px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .spa-slot-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  .spa-slot-price {
    font-size: 14px !important;
    margin-left: auto !important;
    align-self: center !important;
  }
}

/* ════════════════════════════════════════════════════
   PATCH v2.4 — Sticky bar flottante + Badge blanc
   + Bouton Continuer mobile visible
   ════════════════════════════════════════════════════ */

/* ── Badge Nuitée → texte BLANC ── */
.spa-slot-badge,
.sbpro-night-badge {
  color: #ffffff !important;
  background: #1A1A1A !important;
}

/* ── Barre sticky suppléments → flottante arrondie (style Eauzone) ── */
.spa-supplements-bar {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  min-width: 340px !important;
  max-width: min(760px, 92vw) !important;
  border-radius: 50px !important;
  padding: 12px 20px 12px 24px !important;
  background: #1A1A1A !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.30) !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
}
.spa-supp-bar-left {
  font-size: 13px !important;
  color: rgba(255,255,255,.85) !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.spa-supp-bar-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}
.spa-supp-total {
  white-space: nowrap !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.9) !important;
}
.spa-supp-total strong {
  font-size: 16px !important;
  color: #C9A96E !important;
}

/* ── Bouton Continuer → visible sur mobile ── */
#spa-step3-next {
  background: #C9A96E !important;
  color: #ffffff !important;
  border: none !important;
  padding: 11px 22px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: .3px !important;
}
#spa-step3-next:hover {
  background: #A8884F !important;
}

/* Mobile : barre plus compacte */
@media (max-width: 640px) {
  .spa-supplements-bar {
    bottom: 80px !important; /* au-dessus de la barre mobile bottom */
    min-width: 0 !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 40px !important;
    padding: 10px 16px 10px 18px !important;
    gap: 12px !important;
  }
  .spa-supp-bar-left {
    font-size: 12px !important;
  }
  .spa-supp-total { font-size: 12px !important; }
  .spa-supp-total strong { font-size: 14px !important; }
  #spa-step3-next {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
}

/* Ajuster margin-bottom des suppléments pour ne pas être caché par la barre flottante */
.spa-supplements-grid {
  margin-bottom: 110px !important;
}
@media (max-width: 640px) {
  .spa-supplements-grid {
    margin-bottom: 160px !important;
  }
}

/* Tous les textes de la barre en blanc */
.spa-supplements-bar * {
  color: #fff !important;
}
.spa-supp-total strong {
  color: #C9A96E !important;
}

/* ════════════════════════════════════════════════════════
   V5 PATCH — Images step 1 + Popup Détail + Popup Offrir
   ════════════════════════════════════════════════════════ */

/* Images service PLUS GRANDES en step 1 */
.spa-service-row-img {
  width: 110px !important;
  height: 80px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.spa-service-row-img img { width:100%!important; height:100%!important; object-fit:cover!important; }
@media(max-width:640px) {
  .spa-service-row-img { width:80px!important; height:60px!important; }
}

/* Carte active dans le nav */
.szh-active { color: #C9A96E !important; }
.szh-active svg { stroke: #C9A96E !important; }

/* ── Popup Détail (spa-dp-*) ── */
.spa-dp-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  z-index:10000;display:flex;align-items:center;justify-content:center;padding:12px;
}
.spa-dp-modal {
  background:#fff;border-radius:16px;
  width:100%;max-width:540px;max-height:94vh;overflow-y:auto;
  position:relative;box-shadow:0 24px 64px rgba(0,0,0,.3);
}
.spa-dp-close {
  position:absolute;top:12px;right:12px;z-index:2;
  background:rgba(0,0,0,.5);color:#fff;border:none;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:16px;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.spa-dp-close:hover { background:rgba(0,0,0,.8); }

/* Carousel */
.spa-dp-carousel { position:relative;overflow:hidden;border-radius:16px 16px 0 0;background:#e8e0d5; }
.spa-dp-slides {}
.spa-dp-slide { display:none; }
.spa-dp-slide.active { display:block; }
.spa-dp-slide img { width:100%;height:280px;object-fit:cover;display:block; }
.spa-dp-arr {
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.45);color:#fff;border:none;
  width:38px;height:38px;border-radius:50%;
  font-size:22px;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.spa-dp-arr:hover { background:rgba(201,169,110,.9); }
.spa-dp-prev { left:10px; }
.spa-dp-next { right:10px; }
.spa-dp-dots {
  position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:2;
}
.spa-dp-dot { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s; }
.spa-dp-dot.active { background:#fff; }
/* Thumbnails */
.spa-dp-thumbs {
  display:flex;gap:6px;padding:8px 10px;background:#f5f0ea;overflow-x:auto;
}
.spa-dp-thumb {
  width:60px;height:44px;object-fit:cover;border-radius:6px;cursor:pointer;
  opacity:.65;transition:opacity .2s;border:2px solid transparent;flex-shrink:0;
}
.spa-dp-thumb.active { opacity:1;border-color:#C9A96E; }

/* Contenu */
.spa-dp-content { padding:20px 22px 24px; }
.spa-dp-title { font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:600;color:#1A1A1A;margin-bottom:8px;padding-right:20px; }
.spa-dp-meta { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px; }
.spa-dp-badge { font-size:12px;color:#8A7D6E;background:#FAF8F5;border:1px solid #E8E0D5;border-radius:20px;padding:3px 10px; }
.spa-dp-desc { font-size:14px;color:#8A7D6E;line-height:1.7;margin-bottom:14px; }
.spa-dp-price { font-size:24px;font-weight:700;color:#C9A96E;font-family:'Cormorant Garamond',Georgia,serif;margin-bottom:18px; }
.spa-dp-actions { display:flex;flex-direction:column;gap:10px; }
.spa-dp-actions .spa-btn { justify-content:center;text-align:center; }

/* ── Popup Offrir (spa-op-*) ── */
.spa-op-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:10001;display:flex;align-items:center;justify-content:center;padding:12px;
}
.spa-op-modal {
  background:#fff;border-radius:16px;
  width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
  position:relative;padding:24px;
  box-shadow:0 24px 64px rgba(0,0,0,.3);
}
.spa-op-close {
  position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;
  font-size:18px;color:#8A7D6E;padding:4px 8px;border-radius:50%;transition:background .2s;
}
.spa-op-close:hover { background:#f0ece6; }
.spa-op-eyebrow { font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#C9A96E;font-weight:700;margin-bottom:6px; }
.spa-op-title { font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;color:#1A1A1A;margin-bottom:8px; }
.spa-op-desc { font-size:13px;color:#8A7D6E;line-height:1.6;margin-bottom:14px; }
.spa-op-base-row {
  display:flex;align-items:center;justify-content:space-between;
  background:#FAF8F5;border:1.5px solid #E8E0D5;border-radius:8px;padding:12px 16px;
  font-size:13px;color:#1A1A1A;margin-bottom:16px;
}
.spa-op-base-row strong { font-size:18px;font-weight:700;color:#C9A96E;font-family:'Cormorant Garamond',Georgia,serif; }
.spa-op-supps { margin-bottom:16px; }
.spa-op-supps-title { font-size:13px;font-weight:600;color:#1A1A1A;margin-bottom:10px; }
.spa-op-supp-row { display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0ece6; }
.spa-op-supp-row:last-child { border-bottom:none; }
.spa-op-supp-name { font-size:13px;font-weight:500;color:#1A1A1A; }
.spa-op-supp-desc { font-size:11px;color:#8A7D6E; }
.spa-op-supp-price { display:block;font-size:12px;color:#C9A96E;font-weight:600;margin-top:2px; }
.spa-op-ctrl { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.spa-op-minus,.spa-op-plus {
  width:28px;height:28px;border-radius:50%;border:1.5px solid #D4C4B0;
  background:#fff;cursor:pointer;font-size:16px;font-weight:600;
  display:flex;align-items:center;justify-content:center;color:#1A1A1A;transition:all .2s;
}
.spa-op-minus:hover,.spa-op-plus:hover { border-color:#C9A96E;color:#C9A96E; }
.spa-op-qty { font-size:15px;font-weight:700;min-width:20px;text-align:center;color:#1A1A1A; }
.spa-op-total-bar {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#1A1A1A;border-radius:10px;padding:14px 18px;margin-top:16px;
}
.spa-op-total-info { display:flex;flex-direction:column; }
.spa-op-total-lbl { font-size:12px;color:rgba(255,255,255,.6); }
.spa-op-total-val { font-size:22px;font-weight:700;color:#C9A96E;font-family:'Cormorant Garamond',Georgia,serif; }

/* Info pré-remplie page carte cadeau */
.spa-gc-preselect-info {
  display:flex;align-items:flex-start;gap:12px;
  background:#FAF8F5;border:1.5px solid #C9A96E;border-radius:10px;
  padding:14px 16px;margin-bottom:20px;font-family:'Inter',sans-serif;font-size:13px;color:#1A1A1A;
}
.spa-gc-preselect-info span { font-size:22px;flex-shrink:0; }
.spa-gc-preselect-info strong { color:#C9A96E; }
.spa-gc-preselect-info small { color:#8A7D6E; }

@media(max-width:540px) {
  .spa-dp-slide img { height:220px; }
  .spa-dp-thumbs { gap:4px; }
  .spa-dp-thumb { width:50px;height:36px; }
  .spa-op-total-bar { flex-direction:column;align-items:stretch;gap:10px; }
  .spa-dp-actions { gap:8px; }
}

/* ══════════════════════════════════════════════════════
   V5.1 — Active state service rows + Gift card pre-fill
   ══════════════════════════════════════════════════════ */

/* Ligne de service sélectionnée */
.spa-service-row.spa-selected {
  border: 2.5px solid #C9A96E !important;
  background: rgba(201,169,110,.07) !important;
  box-shadow: 0 4px 20px rgba(201,169,110,.20) !important;
  transform: translateX(3px) !important;
  transition: all .2s !important;
}
.spa-service-row.spa-selected .spa-service-row-name {
  color: #C9A96E !important;
  font-weight: 700 !important;
}
.spa-service-row.spa-selected .spa-service-row-price {
  color: #C9A96E !important;
}

/* Ligne hover plus marqué */
.spa-service-row {
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}
.spa-service-row:hover {
  border-color: #D4C4B0 !important;
  background: rgba(201,169,110,.03) !important;
}

/* Bandeau info carte cadeau pré-remplie */
.spa-gc-preselect-info {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #FAF8F5 !important;
  border: 2px solid #C9A96E !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #1A1A1A !important;
}
.spa-gc-preselect-info > span { font-size: 24px; flex-shrink: 0; }
.spa-gc-preselect-info strong { color: #C9A96E !important; display: block; margin-bottom: 3px; }
.spa-gc-preselect-info small { color: #8A7D6E !important; }

/* Montant pré-sélectionné sur carte cadeau — bien visible */
.spa-gc-amount-btn.selected {
  background: #C9A96E !important;
  color: #ffffff !important;
  border-color: #C9A96E !important;
  font-weight: 700 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(201,169,110,.3) !important;
}

/* Input montant custom quand rempli automatiquement */
#spa-gc-custom-amount:not(:placeholder-shown) {
  border-color: #C9A96E !important;
  background: rgba(201,169,110,.05) !important;
}

/* ══ V5.2 — Nav item actif dans la page réservation ══ */
.spa-nav-item.szh-active {
  color: #C9A96E !important;
  font-weight: 700 !important;
  border-left: 3px solid #C9A96E !important;
  padding-left: 10px !important;
  background: rgba(201,169,110,.07) !important;
}
.spa-service-row.spa-selected .spa-service-row-name {
  color: #C9A96E !important;
  font-weight: 700 !important;
}

/* ══ Step 4 — Panels login/register inline ══ */
.spa-step4-panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E8E0D5;
}
.spa-step4-panel-header h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #1A1A1A;
}
.spa-step4-back {
  background: none;
  border: none;
  cursor: pointer;
  color: #8A7D6E;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.spa-step4-back:hover {
  background: #FAF8F5;
  color: #1A1A1A;
}
.spa-auth-form .spa-form-group {
  margin-bottom: 16px;
}
.spa-auth-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
}
.spa-auth-form input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #E8E0D5;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #1A1A1A;
  transition: border-color .2s;
  box-sizing: border-box;
}
.spa-auth-form input:focus {
  outline: none;
  border-color: #C9A96E;
}
#spa-step4-login-panel,
#spa-step4-register-panel {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1.5px solid #E8E0D5;
  border-radius: 14px;
}

/* ══════════════════════════════════════════════════════
   Choix acompte / total + CGV (étape 5)
   ══════════════════════════════════════════════════════ */
.spa-paychoice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.spa-paychoice-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 2px solid #E8E0D5;
  border-radius: 12px;
  padding: 18px 16px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.spa-paychoice-card:hover {
  border-color: #D4C4B0;
}
.spa-paychoice-card--active {
  border-color: #C9A96E !important;
  background: rgba(201,169,110,.05) !important;
  box-shadow: 0 4px 16px rgba(201,169,110,.15);
}
.spa-paychoice-card input[type="radio"] {
  position: absolute;
  top: 14px;
  right: 14px;
  accent-color: #C9A96E;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.spa-paychoice-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spa-paychoice-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: #C9A96E;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 2px;
}
.spa-paychoice-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
}
.spa-paychoice-amount {
  font-size: 22px;
  font-weight: 700;
  color: #C9A96E;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.spa-paychoice-note {
  font-size: 12px;
  color: #8A7D6E;
  line-height: 1.4;
}

/* Case CGV */
.spa-cgv-check {
  margin: 20px 0 16px;
}
.spa-cgv-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #1A1A1A;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}
.spa-cgv-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #C9A96E;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}
.spa-cgv-label a {
  color: #C9A96E;
  text-decoration: underline;
  font-weight: 600;
}
.spa-cgv-label a:hover {
  color: #1A1A1A;
}
.spa-cgv-label abbr {
  color: #E05252;
  text-decoration: none;
}

/* Bouton désactivé */
#spa-submit-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 540px) {
  .spa-paychoice {
    grid-template-columns: 1fr;
  }
}