/* ════════════════════════════════════════════════════════
   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: var(--spa-primary); font-weight: 600; background: rgba(201,169,110,.06); }
.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; }
}