/* Hair Kut — habillage de la page de réservation (maquette validée le 06/11/2026).
   Chargé APRÈS le style d'origine de Barber Pilot : il ne fait que le surcharger. */
:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --border: #E6E0DB;
  --text: #141414;
  --muted: #5E5955;
  --accent: #C8261C;
  --accent-dark: #A11E16;
  --green: #1E7A46;
  --danger: #B42318;
  --hk-soft: #F5F2EF;
  --hk-tint: #FBEDEB;
  --hk-serif: 'Bodoni Moda', Georgia, serif;
}
body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #FFFFFF;
  color: var(--text);
}

/* En-tête : logo + salon */
.header {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  max-width: 720px;
  margin: 0 auto;
}
.header .hk-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: 0 0 52px; }
.header .hk-id { display: flex; flex-direction: column; min-width: 0; }
.header .hk-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.header h1 { font-family: var(--hk-serif); font-size: 24px; font-weight: 600; color: var(--text); margin: 0; }
.header h1 span { color: var(--text); }
.header p { display: none; }
.header .hk-back {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.header .hk-back:hover { border-color: var(--text); }
.header .emoji { display: none; }

.container { max-width: 560px; padding: 24px 16px 48px; }

/* Étapes */
.step { margin-bottom: 28px; }
.step-title {
  font-family: var(--hk-serif); font-size: 24px; font-weight: 500; color: var(--text);
  letter-spacing: 0; text-transform: none; gap: 10px; margin-bottom: 14px;
}
.step-num {
  background: var(--text); color: #FFFFFF; font-family: Inter, system-ui, sans-serif;
  font-size: 13px; font-weight: 700; width: 28px; height: 28px; min-width: 28px; box-shadow: none;
}

/* Puces (prestations, jours) */
.chip {
  background: #FFFFFF; border: 1.5px solid var(--border); border-radius: 16px; color: var(--text);
  box-shadow: none;
}
.chip .c-day { color: var(--text); font-weight: 600; }
.chip .c-date { color: var(--muted); }
.chip.selected { background: var(--hk-tint); border-color: var(--accent); box-shadow: none; }
.chip.selected .c-day { color: var(--accent-dark); }
.chip.selected .c-date { color: var(--text); }
.chip.disabled { opacity: 0.45; }

/* Barbiers */
.barber-card {
  background: #FFFFFF; border: 1.5px solid var(--border); border-radius: 18px; box-shadow: none;
  padding: 16px 12px;
}
.barber-card .b-icon {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--hk-soft); color: var(--text); font-family: var(--hk-serif); font-size: 24px; font-weight: 600;
  border: 1px solid var(--border);
}
.barber-card .b-name { color: var(--text); font-weight: 700; }
.barber-card .b-sub { color: var(--muted); }
.barber-card.selected { background: var(--hk-tint); border-color: var(--accent); box-shadow: none; }
.barber-card.selected .b-icon { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }

/* Créneaux */
.slot {
  background: #FFFFFF; border: 1.5px solid var(--border); border-radius: 12px; color: var(--text);
  min-height: 44px; box-shadow: none;
}
.slot.selected { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.slot.taken { background: var(--hk-soft); color: #A39C97; border-color: var(--border); text-decoration: line-through; }

/* Formulaire */
.form-group label { color: var(--muted); letter-spacing: 0.06em; }
.form-group input, .form-group textarea {
  background: #FFFFFF; border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); min-height: 48px;
  font-family: inherit; font-size: 16px;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--text); outline: none; box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.08); }

/* Récap, bouton principal */
.recap { background: var(--hk-soft); border: 1px solid var(--border); border-radius: 16px; color: var(--text); }
.recap b { color: var(--text); }
.submit-btn, .again-btn, .wl-btn {
  background: var(--accent); color: #FFFFFF; border: none; border-radius: 999px; min-height: 54px;
  font-weight: 600; box-shadow: none; text-shadow: none;
}
.submit-btn:disabled { background: var(--border); color: var(--muted); }
.error-msg { color: var(--danger); background: #FDECEA; border-color: #F5C2BD; }

/* Accueil de la page (RDV / abonnement / cadeau) */
.home-card {
  background: #FFFFFF; border: 1.5px solid var(--border); border-radius: 18px; box-shadow: none; color: var(--text);
}
.home-card.gold { background: var(--hk-soft); border-color: var(--border); }
.hc-icon { display: none; }
.hc-title { color: var(--text); font-weight: 700; }
.hc-desc { color: var(--muted); }
.hc-badge { background: var(--accent); color: #FFFFFF; }
.hc-arrow { color: var(--text); }

/* Liste d'attente, confirmation */
.wl-box { background: var(--hk-soft); border: 1px solid var(--border); color: var(--text); }
.success { color: var(--text); }
.success .s-icon { display: none; }
.success h2 { font-family: var(--hk-serif); font-size: 32px; font-weight: 500; color: var(--text); }
.success p { color: var(--muted); }
.success .s-recap { background: var(--hk-soft); border: 1px solid var(--border); border-radius: 16px; color: var(--text); }
.loading { color: var(--muted); }