/* ============================================================================
   datetime-step-ux.css — Lot NN
   UX Date et heure — tooltip unifié calendrier/créneaux + actions harmonisées
   Remplace les surcharges lot-par-lot de calendar-slots-fix.css
   Spécificité contrôlée par #step-datetime ; pas de surenchère de cascade.
   ============================================================================ */

/* ── 1. Variables locales ─────────────────────────────────────────────────── */

#step-datetime {
  --dt-brand:        var(--brand-primary, var(--accent, #5c2d91));
  --dt-brand-ghost:  color-mix(in srgb, var(--dt-brand) 7%, #fff);
  --dt-brand-light:  color-mix(in srgb, var(--dt-brand) 14%, #fff);
  --dt-brand-border: color-mix(in srgb, var(--dt-brand) 22%, #e5ddf5);
  --dt-gold:         var(--gold, #b8860b);
  --dt-gold-ghost:   color-mix(in srgb, var(--dt-gold) 8%, #fff);
  --dt-success:      var(--brand-success, var(--success, #1a7a4a));
  --dt-suggested:    var(--brand-warning, var(--gold, #b8860b));
  --dt-suggested-text: color-mix(in srgb, var(--dt-suggested) 58%, var(--dt-text, #1c1017));
  --dt-disabled-bg:  color-mix(in srgb, var(--dt-brand) 7%, #f6f3f8);
  --dt-disabled-border: color-mix(in srgb, var(--dt-brand) 10%, #d8d3df);
  --dt-disabled-text: color-mix(in srgb, var(--dt-text-muted) 72%, #fff);
  --dt-evening:      var(--brand-secondary, var(--dt-brand));
  --dt-text:         var(--text-dark, #1c1017);
  --dt-text-mid:     var(--text-mid, #3d2f4a);
  --dt-text-muted:   var(--text-muted, #7c6f8a);
  --dt-line:         var(--line, #e0d9ef);
  --dt-ivory:        var(--ivory-mid, #f4f0e8);
  --dt-radius:       var(--radius-md, 12px);
  --dt-radius-lg:    var(--radius-lg, 20px);
  --dt-radius-pill:  var(--radius-pill, 999px);
  --dt-shadow-xs:    var(--shadow-xs, 0 1px 3px rgba(35,24,55,.08));
  --dt-shadow-sm:    var(--shadow-sm, 0 2px 8px rgba(35,24,55,.10));
  --dt-shadow-md:    var(--shadow-md, 0 4px 16px rgba(35,24,55,.12));
  --dt-shadow-lg:    var(--shadow-lg, 0 8px 32px rgba(35,24,55,.16));
  --dt-transition:   var(--transition, all 0.22s cubic-bezier(0.4, 0, 0.2, 1));
}

/* ── 2. Layout étape ──────────────────────────────────────────────────────── */

body.booking-step-datetime {
  /* Espace pour le bandeau CTA sticky */
  --dt-cta-height: 80px;
}

#step-datetime {
  padding-bottom: calc(var(--dt-cta-height, 80px) + 24px);
}

#step-datetime .content-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 3. Panel "Filtrer" (accordion) ───────────────────────────────────────── */

#step-datetime .datetime-refine-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: var(--dt-transition);
}

#step-datetime .datetime-refine-panel__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 9px 14px;
  border: 1.5px solid var(--dt-brand-border);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-brand-ghost);
  color: var(--dt-brand);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  list-style: none;
  box-shadow: var(--dt-shadow-xs);
  transition: var(--dt-transition);
}

#step-datetime .datetime-refine-panel__summary:hover,
#step-datetime .datetime-refine-panel__summary:focus-visible {
  background: var(--dt-brand-light);
  border-color: var(--dt-brand);
  box-shadow: var(--dt-shadow-sm);
  outline: none;
}

#step-datetime .datetime-refine-panel__summary::-webkit-details-marker { display: none; }

#step-datetime .datetime-refine-panel__summary::before {
  content: '⚙';
  font-size: .9rem;
  line-height: 1;
}

#step-datetime .datetime-refine-panel__summary::after {
  content: '⌄';
  margin-left: 2px;
  font-size: .9rem;
  line-height: 1;
  transition: transform .18s ease;
}

#step-datetime .datetime-refine-panel[open] .datetime-refine-panel__summary::after {
  transform: rotate(180deg);
}

#step-datetime .datetime-refine-panel__summary-main {
  font-size: .84rem;
  font-weight: 750;
  color: inherit;
}

#step-datetime .datetime-refine-panel__summary-help {
  display: none;
}

#step-datetime .datetime-refine-panel__body,
#step-datetime #datetime-refine-body {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  background: var(--white, #fff);
  box-shadow: var(--dt-shadow-xs);
}

/* ── 4. Groupe de préférences horaires ────────────────────────────────────── */

#step-datetime #slot-preference-group,
#step-datetime .preference-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

/* Chaque bouton de préférence — même langage visuel que les champs contact */
#step-datetime .preference-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-pill);
  background: var(--white, #fff);
  color: var(--dt-text-mid);
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--dt-transition);
  box-shadow: var(--dt-shadow-xs);
  white-space: nowrap;
  user-select: none;
}

#step-datetime .preference-option .pref-icon { font-size: 1rem; line-height: 1; }
#step-datetime .preference-option .pref-label { font-weight: 600; }
#step-datetime .preference-option .pref-hours {
  font-size: .72rem;
  color: var(--dt-text-muted);
  font-style: normal;
}

#step-datetime .preference-option:hover,
#step-datetime .preference-option:focus-visible {
  border-color: var(--dt-brand-border);
  background: var(--dt-brand-ghost);
  color: var(--dt-brand);
  box-shadow: var(--dt-shadow-sm);
  outline: none;
}

#step-datetime .preference-option[aria-checked="true"] {
  border-color: var(--dt-brand);
  background: var(--dt-brand-light);
  color: var(--dt-brand);
  font-weight: 650;
  box-shadow: var(--dt-shadow-sm),
              inset 0 0 0 1px color-mix(in srgb, var(--dt-brand) 18%, transparent);
}

/* Bouton actualiser — discret, même gabarit */
#step-datetime .btn-refresh-slots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1.5px dashed var(--dt-line);
  border-radius: var(--dt-radius-pill);
  background: transparent;
  color: var(--dt-text-muted);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--dt-transition);
}

#step-datetime .btn-refresh-slots:hover {
  border-color: var(--dt-brand-border);
  color: var(--dt-brand);
  background: var(--dt-brand-ghost);
}

#step-datetime .btn-refresh-slots.loading .refresh-icon {
  animation: spin .9s linear infinite;
}

/* Filtres actifs */
#step-datetime #active-filters-display {
  margin-top: 6px;
  padding: 7px 12px;
  border-radius: var(--dt-radius);
  border: 1px solid var(--dt-brand-border);
  background: var(--dt-brand-ghost);
  font-size: .82rem;
  color: var(--dt-text-mid);
}

#step-datetime #active-filters-display .reset-filters-btn {
  background: none;
  border: none;
  color: var(--dt-brand);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
}

/* ── 5. Calendrier ────────────────────────────────────────────────────────── */

#step-datetime .calendar-container {
  background: var(--white, #fff);
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  padding: 18px;
  box-shadow: var(--dt-shadow-sm);
}

/* Jours */
#step-datetime .calendar-day {
  position: relative;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--dt-text-mid);
  cursor: default;
  transition: var(--dt-transition);
  overflow: visible;
}

/* Disponible : point vert sous le chiffre */
#step-datetime .calendar-day.has-slots:not(.selected) {
  font-weight: 750;
  color: var(--dt-text);
  background: var(--white, #fff);
}

#step-datetime .calendar-day.has-slots:not(.selected)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dt-success);
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dt-success) 14%, transparent);
}

/* Hover disponible */
#step-datetime .calendar-day.available:hover:not(.selected),
#step-datetime .calendar-day.available:focus-visible:not(.selected) {
  background: color-mix(in srgb, var(--dt-success) 8%, #fff);
  box-shadow: var(--dt-shadow-xs);
  cursor: pointer;
  outline: none;
}

/* Sélectionné */
#step-datetime .calendar-day.selected {
  background: linear-gradient(135deg, var(--brand-primary, #5c2d91), color-mix(in srgb, var(--brand-primary, #5c2d91) 68%, #000));
  color: #fff;
  font-weight: 750;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--dt-brand) 24%, transparent);
}

#step-datetime .calendar-day.selected::after { display: none; }
#step-datetime .calendar-day.selected .slot-count,
#step-datetime .calendar-day.selected .lunar-phase-icon { color: rgba(255,255,255,.9); }

/* Aujourd'hui non sélectionné */
#step-datetime .calendar-day.today:not(.selected) {
  outline: 1.5px solid color-mix(in srgb, var(--dt-brand) 28%, #d5c3a6);
  outline-offset: -2px;
}

/* Désactivé / sans créneau */
#step-datetime .calendar-day.disabled,
#step-datetime .calendar-day.no-slots {
  color: #b4adbe;
  background: #fafafa;
  opacity: .55;
}

/* Autre mois */
#step-datetime .calendar-day.other-month {
  color: #c9c3ce;
  opacity: .32;
  background: #fbfbfb;
}

/* Compteur de créneaux sur la case — conservé en haut à droite
   Le point vert indique qu'il existe des disponibilités ; le nombre précise combien. */
#step-datetime .calendar-day.has-slots .slot-count {
  display: inline-flex;
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border-radius: var(--dt-radius-pill);
  background: color-mix(in srgb, var(--dt-success) 14%, #fff);
  color: color-mix(in srgb, var(--dt-success) 78%, #0f2f24);
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-success) 18%, transparent);
  z-index: 2;
}

#step-datetime .calendar-day.selected .slot-count {
  display: inline-flex;
  background: rgba(255,255,255,.22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

#step-datetime .calendar-day.disabled .slot-count,
#step-datetime .calendar-day.other-month .slot-count,
#step-datetime .calendar-day.no-slots .slot-count {
  display: none;
}

/* Légende */
#step-datetime .calendar-availability-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: .74rem;
  color: var(--dt-text-muted);
  opacity: .82;
}

#step-datetime .calendar-availability-legend__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dt-success);
  flex-shrink: 0;
}

/* ── 6. Zone de créneaux — wrapper et header ──────────────────────────────── */

#step-datetime #time-slots-container {
  background: var(--white, #fff);
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  padding: 16px;
  box-shadow: var(--dt-shadow-sm);
  transition: var(--dt-transition);
}

#step-datetime #time-slots-container.hidden { display: none; }

/* Header créneaux */
#step-datetime .time-slots-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dt-ivory);
}

#step-datetime #time-slots-header-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dt-text);
}

#step-datetime .timezone-display {
  font-size: .74rem;
  color: var(--dt-text-muted);
  white-space: nowrap;
}

#step-datetime .timezone-display.hidden,
#step-datetime .timezone-display[hidden] {
  display: none;
}

/* Résumé disponibilité du jour sélectionné */
#step-datetime .selected-day-availability-summary {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-radius);
  background: linear-gradient(180deg, var(--white,#fff) 0%, var(--ivory,#faf8f3) 100%);
}

#step-datetime .selected-day-availability-summary__main {
  font-size: .95rem;
  font-weight: 750;
  color: var(--dt-text);
}

#step-datetime .selected-day-availability-summary__date {
  font-size: .82rem;
  color: var(--dt-text-muted);
  margin-top: 2px;
}

#step-datetime .selected-day-availability-summary__sub,
#step-datetime .selected-day-availability-summary__hint {
  font-size: .8rem;
  color: var(--dt-text-muted);
  margin-top: 2px;
}

/* Contexte service (mode, praticien, lieu) */
#step-datetime .booking-selection-context {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

#step-datetime .booking-selection-context[data-context-visible="true"] {
  display: flex;
}

#step-datetime .booking-selection-context-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-radius-pill);
  background: var(--white, #fff);
  font-size: .78rem;
}

#step-datetime .booking-selection-context-label {
  color: var(--dt-text-muted);
  font-weight: 500;
}

#step-datetime .booking-selection-context-value {
  color: var(--dt-brand);
  font-weight: 700;
}

/* ── 7. Grille de créneaux — identique au contact pour les cartes ─────────── */

#step-datetime #time-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Carte créneau — reproduit le langage .form-input + card du step contact */
#step-datetime .time-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--white, #fff);
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius);
  cursor: pointer;
  transition: var(--dt-transition);
  text-align: left;
  position: relative;
  /* Entrée progressive */
  opacity: 0;
  transform: translateY(8px);
}

#step-datetime .time-slot.slot-visible {
  opacity: 1;
  transform: none;
  animation: slotAppear .26s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes slotAppear {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none scale(1); }
}

/* Hover */
#step-datetime .time-slot:hover:not(.selected):not(.disabled):not(.unavailable):not(.restricted) {
  border-color: var(--dt-brand-border);
  background: var(--dt-brand-ghost);
  box-shadow: var(--dt-shadow-sm);
  transform: translateY(-1px);
}

/* Focus clavier */
#step-datetime .time-slot:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dt-brand) 46%, #fff);
  outline-offset: 2px;
}

/* Sélectionné — choix réel : fond clair, bordure latérale marque, aucun aplat sombre */
#step-datetime .time-slot.selected {
  background: var(--white, #fff);
  border: 1.5px solid var(--dt-brand-border);
  border-left: 4px solid var(--dt-brand);
  box-shadow: var(--dt-shadow-md),
              0 0 0 1px color-mix(in srgb, var(--dt-brand) 8%, transparent);
  color: var(--dt-text);
  animation: dtSlotSelectedPop .18s ease-out;
}

@keyframes dtSlotSelectedPop {
  0% { transform: scale(.985); }
  100% { transform: scale(1); }
}

#step-datetime .time-slot.selected *,
#step-datetime .time-slot.selected .slot-time,
#step-datetime .time-slot.selected .slot-price-display,
#step-datetime .time-slot.selected .slot-price,
#step-datetime .time-slot.selected .slot-label,
#step-datetime .time-slot.selected .surcharge-badges,
#step-datetime .time-slot.selected .slot-assignment-summary {
  color: var(--dt-text);
  opacity: 1;
}

#step-datetime .time-slot.selected .slot-time {
  color: var(--dt-text);
  font-weight: 800;
}

/* Conseillé (non sélectionné) — suggestion métier douce, sans violet fort */
#step-datetime .time-slot.recommended-slot:not(.selected) {
  background: color-mix(in srgb, var(--dt-suggested) 7%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--dt-suggested) 24%, var(--dt-line));
  box-shadow: var(--dt-shadow-xs);
}

#step-datetime .time-slot.recommended-slot:not(.selected):hover {
  border-color: color-mix(in srgb, var(--dt-suggested) 34%, var(--dt-line));
  background: color-mix(in srgb, var(--dt-suggested) 10%, #fff);
  box-shadow: var(--dt-shadow-sm);
  transform: translateY(-1px);
}

/* Type soir / premium / prix doux : seul l'accent coloré sur le bord */
#step-datetime .time-slot.evening-slot:not(.selected) {
  border-left: 3px solid var(--dt-evening);
}

#step-datetime .time-slot.premium-slot:not(.selected) {
  border-left: 3px solid var(--dt-gold);
}

#step-datetime .time-slot.prix-doux-slot:not(.selected) {
  border-left: 3px solid var(--dt-success);
}

#step-datetime .time-slot.urgent-slot:not(.selected) {
  border-left: 3px solid var(--error, #c0392b);
}

/* Si un créneau est conseillé, le signal conseil prime sur les accents tarifaires/horaires : pas de bord violet. */
#step-datetime .time-slot.recommended-slot:not(.selected).evening-slot,
#step-datetime .time-slot.recommended-slot:not(.selected).premium-slot,
#step-datetime .time-slot.recommended-slot:not(.selected).prix-doux-slot,
#step-datetime .time-slot.recommended-slot:not(.selected).urgent-slot {
  border-left-width: 1.5px;
  border-left-style: solid;
  border-left-color: color-mix(in srgb, var(--dt-suggested) 24%, var(--dt-line));
}

/* Indisponible / restreint */
#step-datetime .time-slot.disabled,
#step-datetime .time-slot.unavailable,
#step-datetime .time-slot.restricted {
  background: #f8f8fa;
  border-color: rgba(218,214,224,.6);
  color: #9ca3af;
  opacity: .56;
  cursor: not-allowed;
  pointer-events: none;
}

/* Contenu des cartes */
#step-datetime .slot-time {
  font-size: .96rem;
  font-weight: 700;
  color: var(--dt-text);
  line-height: 1.2;
}

#step-datetime .slot-price-display,
#step-datetime .slot-price {
  font-size: .82rem;
  font-weight: 500;
  color: var(--dt-text-muted);
  line-height: 1.2;
}

#step-datetime .slot-price-display.slot-price-display--hidden {
  display: none;
}

#step-datetime .slot-label {
  font-size: .76rem;
  color: var(--dt-text-muted);
}

#step-datetime .surcharge-badges {
  font-size: .72rem;
  font-style: italic;
  color: var(--dt-text-muted);
}

/* Badge "Conseillé" */
#step-datetime .recommended-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--dt-radius-pill);
  border: 1px solid color-mix(in srgb, var(--dt-suggested) 26%, var(--dt-line));
  background: color-mix(in srgb, var(--dt-suggested) 9%, #fff);
  color: var(--dt-suggested-text);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
}

#step-datetime .recommended-badge__separator,
#step-datetime .recommended-badge__reason {
  display: none;
}

#step-datetime .time-slot.selected .recommended-badge {
  background: color-mix(in srgb, var(--dt-suggested) 8%, #fff);
  border-color: color-mix(in srgb, var(--dt-suggested) 22%, var(--dt-line));
  color: var(--dt-suggested-text);
  opacity: .92;
}

#step-datetime .time-slot.selected .selected-slot-badge {
  display: inline-flex;
  background: var(--dt-brand);
  color: #fff;
  border-radius: var(--dt-radius-pill);
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--dt-brand) 18%, transparent);
  line-height: 1.15;
}

#step-datetime .time-slot.selected .selected-slot-badge,
#step-datetime .time-slot.selected .selected-slot-badge * {
  color: #fff;
}


/* Méta praticien/lieu sur la carte */
#step-datetime .slot-assignment-meta {
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--dt-ivory);
  font-size: .76rem;
  color: var(--dt-text-muted);
}

/* ── 8. Tri Suggéré / Chronologique — composant segmenté ─────────────────── */

#step-datetime .slot-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-radius-pill);
  background: rgba(255,255,255,.9);
  box-shadow: var(--dt-shadow-xs);
}

#step-datetime .slot-sort-toggle__label {
  padding: 0 8px;
  font-size: .74rem;
  font-weight: 650;
  color: var(--dt-text-muted);
  white-space: nowrap;
}

#step-datetime .slot-sort-toggle__button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--dt-text-muted);
  border-radius: var(--dt-radius-pill);
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--dt-transition);
  line-height: 1;
}

#step-datetime .slot-sort-toggle__button.is-active,
#step-datetime .slot-sort-toggle__button[aria-pressed="true"] {
  background: var(--dt-brand-light);
  color: var(--dt-brand);
  box-shadow: inset 0 0 0 1px var(--dt-brand-border),
              var(--dt-shadow-xs);
}

#step-datetime .slot-sort-toggle[hidden] {
  display: none;
}

/* ── 9. Message "aucun créneau" ───────────────────────────────────────────── */

#step-datetime .no-slots-message {
  padding: 24px 16px;
  text-align: center;
  color: var(--dt-text-muted);
}

#step-datetime .btn-expand-search {
  margin-top: 12px;
  padding: 9px 18px;
  border: 1.5px solid var(--dt-brand-border);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-brand-ghost);
  color: var(--dt-brand);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--dt-transition);
}

#step-datetime .btn-expand-search:hover {
  background: var(--dt-brand-light);
  border-color: var(--dt-brand);
}

/* Bouton "Voir d'autres créneaux" */
#step-datetime .show-more-slots-action {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#step-datetime .show-more-slots-action__button {
  padding: 8px 20px;
  border: 1.5px dashed var(--dt-brand-border);
  border-radius: var(--dt-radius-pill);
  background: transparent;
  color: var(--dt-brand);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--dt-transition);
}

#step-datetime .show-more-slots-action__button:hover {
  background: var(--dt-brand-ghost);
  border-style: solid;
}

/* ── 10. CTA Date/heure intégré au flux — au-dessus de la demande alternative ── */

#step-datetime .action-buttons.action-buttons--datetime {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 16px 0 8px;
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  background: rgba(255,255,255,.96);
  box-shadow: var(--dt-shadow-sm);
  transition: var(--dt-transition);
}

/* État idle — discret */
#step-datetime .action-buttons.action-buttons--datetime[data-state="idle"],
#step-datetime .action-buttons.action-buttons--datetime.datetime-actions--idle {
  background: color-mix(in srgb, var(--dt-ivory) 72%, #fff);
  border-color: var(--dt-line);
  box-shadow: var(--dt-shadow-sm);
}

/* État sélectionné — affirmatif mais lisible : fond clair, bouton seul en couleur forte */
#step-datetime .action-buttons.action-buttons--datetime[data-state="selected"],
#step-datetime .action-buttons.action-buttons--datetime.datetime-actions--selected {
  background: color-mix(in srgb, var(--dt-brand) 5%, #fff);
  border-color: var(--dt-brand-border);
  box-shadow: var(--dt-shadow-md),
              0 0 0 1px color-mix(in srgb, var(--dt-brand) 10%, transparent);
}

/* Feedback créneau sélectionné */
#step-datetime .datetime-selection-feedback {
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--dt-ivory);
  border: 1px solid var(--dt-line);
  font-size: .8rem;
  color: var(--dt-text-muted);
  transition: var(--dt-transition);
}

#step-datetime .datetime-selection-feedback[data-state="selected"] {
  background: transparent;
  border-color: transparent;
  padding-block: 2px;
}

#step-datetime .datetime-selection-feedback__label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dt-text-mid);
  margin-bottom: 1px;
}

#step-datetime .datetime-selection-feedback__value {
  color: var(--dt-text-mid);
  font-weight: 500;
}

#step-datetime .datetime-selection-feedback[data-state="selected"] .datetime-selection-feedback__value {
  color: var(--dt-text);
  font-weight: 700;
}

#step-datetime .datetime-selection-feedback__line { display: block; line-height: 1.22; }
#step-datetime .datetime-selection-feedback[data-state="selected"] .datetime-selection-feedback__line:not(:first-child) {
  display: none;
}
#step-datetime .datetime-selection-feedback__line--primary {
  font-weight: 800;
  color: var(--dt-text);
}

/* Boutons */
#step-datetime .datetime-actions-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: fit-content;
}

/* Continuer — inactif : même famille visuelle que les boutons secondaires,
   même si la classe globale btn-primary reste temporairement présente. */
#step-datetime #datetime-continue-btn.datetime-continue--idle,
#step-datetime #datetime-continue-btn:disabled,
#step-datetime #datetime-continue-btn[aria-disabled="true"],
#step-datetime #datetime-continue-btn[data-selection-state="idle"],
#step-datetime .action-buttons.action-buttons--datetime[data-state="idle"] #datetime-continue-btn,
#step-datetime .action-buttons.action-buttons--datetime.datetime-actions--idle #datetime-continue-btn,
body.booking-step-datetime #step-datetime #datetime-continue-btn.datetime-continue--idle.btn,
body.booking-step-datetime #step-datetime #datetime-continue-btn.datetime-continue--idle.btn-primary {
  background: var(--ivory-mid, #f4f0e8);
  color: color-mix(in srgb, var(--dt-text-muted) 68%, #fff);
  border: 1px solid var(--dt-line);
  opacity: .62;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  filter: grayscale(.08);
}

#step-datetime .action-buttons.action-buttons--datetime[data-state="idle"] #datetime-continue-btn::after,
#step-datetime .action-buttons.action-buttons--datetime.datetime-actions--idle #datetime-continue-btn::after,
#step-datetime #datetime-continue-btn:disabled::after,
#step-datetime #datetime-continue-btn[aria-disabled="true"]::after {
  display: none;
}

#step-datetime #datetime-continue-btn.datetime-continue--idle:hover,
#step-datetime .action-buttons.action-buttons--datetime[data-state="idle"] #datetime-continue-btn:hover,
#step-datetime .action-buttons.action-buttons--datetime.datetime-actions--idle #datetime-continue-btn:hover,
#step-datetime #datetime-continue-btn:disabled:hover,
#step-datetime #datetime-continue-btn[aria-disabled="true"]:hover {
  background: var(--ivory-mid, #f4f0e8);
  color: color-mix(in srgb, var(--dt-text-muted) 68%, #fff);
  box-shadow: none;
  transform: none;
}

/* Continuer — actif uniquement avec créneau choisi */
#step-datetime #datetime-continue-btn.datetime-continue--ready:not(:disabled):not([aria-disabled="true"]),
#step-datetime #datetime-continue-btn.btn-primary--slot-ready:not(:disabled):not([aria-disabled="true"]),
#step-datetime #datetime-continue-btn[data-selection-state="slot-selected"]:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, var(--brand-primary, #5c2d91), color-mix(in srgb, var(--brand-primary, #5c2d91) 68%, #000));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--dt-brand) 24%, transparent);
  cursor: pointer;
  pointer-events: auto;
}

/* Retour — toujours discret */
#step-datetime #datetime-back-btn,
#step-datetime #datetime-back-btn-footer {
  background: transparent;
  color: var(--dt-text-muted);
  border-color: var(--dt-line);
  box-shadow: none;
}


/* Sécurité contre les anciennes surcharges globales avec !important encore en cache. */
body.booking-step-datetime #step-datetime .time-slot.selected {
  background: var(--white, #fff);
  color: var(--dt-text);
  border-color: var(--dt-brand-border);
  border-left-color: var(--dt-brand);
  box-shadow: var(--dt-shadow-md), 0 0 0 1px color-mix(in srgb, var(--dt-brand) 8%, transparent);
}

body.booking-step-datetime #step-datetime .time-slot.selected .slot-time,
body.booking-step-datetime #step-datetime .time-slot.selected .slot-price-display,
body.booking-step-datetime #step-datetime .time-slot.selected .slot-label,
body.booking-step-datetime #step-datetime .time-slot.selected .surcharge-badges,
body.booking-step-datetime #step-datetime .time-slot.selected .slot-assignment-summary {
  color: var(--dt-text);
}

body.booking-step-datetime #step-datetime .time-slot.selected .selected-slot-badge {
  color: #fff;
}


/* Lot NK — neutralise définitivement les anciennes versions sticky/fixed du CTA Date/heure. */
body.booking-step-datetime #step-datetime {
  padding-bottom: 24px;
}

body.booking-step-datetime #step-datetime .action-buttons.action-buttons--datetime {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: auto;
  max-width: none;
  margin: 16px 0 8px;
}

body.booking-step-datetime #step-datetime #waitlist-panel.waitlist-panel {
  margin-top: 12px;
}

/* ── 11. Panel waitlist — secondaire ──────────────────────────────────────── */

#step-datetime #waitlist-panel.waitlist-panel {
  margin-top: 8px;
  padding: 16px;
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  background: var(--white, #fff);
}

#step-datetime .waitlist-panel--collapsed {
  opacity: .72;
}

#step-datetime .waitlist-panel--collapsed:hover {
  opacity: .9;
}

/* ── 12. Bouton "Prochain créneau disponible" ─────────────────────────────── */

#step-datetime #goto-next-slot-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: .82rem;
  color: var(--dt-brand);
  font-weight: 600;
  background: var(--dt-brand-ghost);
  border: 1px solid var(--dt-brand-border);
  border-radius: var(--dt-radius-pill);
  cursor: pointer;
  transition: var(--dt-transition);
}

#step-datetime #goto-next-slot-btn:hover {
  background: var(--dt-brand-light);
  border-color: var(--dt-brand);
}

#step-datetime #goto-next-slot-btn.hidden { display: none; }

/* ── 13. Tooltips calendrier (CSS critique injecté par CalendarUI) ─────────── */

#step-datetime .calendar-container,
#step-datetime .calendar-grid,
#step-datetime .calendar-day {
  overflow: visible;
}

/* Tooltips en bord de calendrier : éviter le masquage quand le jour est en première/dernière colonne.
   Le calendrier garde 7 colonnes ; les 7 premiers enfants sont les en-têtes de jour. */
#step-datetime .calendar-grid .calendar-day:nth-child(7n+1) > .calendar-day-availability-tooltip {
  left: 0;
  right: auto;
  transform: translate(0, 6px);
}

#step-datetime .calendar-grid .calendar-day:nth-child(7n+1) > .calendar-day-availability-tooltip::after {
  left: 18px;
  right: auto;
  transform: translate(0, -5px) rotate(45deg);
}

#step-datetime .calendar-grid .calendar-day:nth-child(7n) > .calendar-day-availability-tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}

#step-datetime .calendar-grid .calendar-day:nth-child(7n) > .calendar-day-availability-tooltip::after {
  left: auto;
  right: 18px;
  transform: translate(0, -5px) rotate(45deg);
}

#step-datetime .calendar-grid .calendar-day.available:nth-child(7n+1):hover > .calendar-day-availability-tooltip,
#step-datetime .calendar-grid .calendar-day.available:nth-child(7n+1):focus-visible > .calendar-day-availability-tooltip,
#step-datetime .calendar-grid .calendar-day.available:nth-child(7n):hover > .calendar-day-availability-tooltip,
#step-datetime .calendar-grid .calendar-day.available:nth-child(7n):focus-visible > .calendar-day-availability-tooltip {
  transform: translate(0, 0);
}

/* ── 14. Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  #step-datetime {
    padding-bottom: 24px;
  }

  #step-datetime .action-buttons.action-buttons--datetime {
    grid-template-columns: 1fr;
    border-radius: 20px;
    padding: 10px 12px;
  }

  #step-datetime .datetime-actions-buttons {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 8px;
  }

  #step-datetime .datetime-actions-buttons .btn {
    width: 100%;
    justify-content: center;
    padding-inline: 10px;
  }

  #step-datetime #datetime-continue-btn {
    white-space: normal;
    line-height: 1.15;
  }

  #step-datetime .slot-sort-toggle {
    width: 100%;
    border-radius: 18px;
  }

  #step-datetime .slot-sort-toggle__button {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  #step-datetime #time-slots {
    grid-template-columns: 1fr;
  }
}


/* Lot NE guard : une seule colonne partout pour éviter les cartes orphelines. */
#step-datetime #time-slots {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Lot NL : tooltips contextuels créneaux ───────────────────────────────── */
#step-datetime .time-slot {
  overflow: visible;
}

#step-datetime .time-slot .time-slot-tooltip {
  position: absolute;
  left: 14px;
  right: auto;
  top: calc(100% + 8px);
  z-index: 180;
  display: none;
  min-width: min(260px, calc(100vw - 48px));
  max-width: 320px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid var(--dt-line);
  background: rgba(255,255,255,.98);
  box-shadow: var(--dt-shadow-md);
  color: var(--dt-text-mid);
  font-size: .76rem;
  line-height: 1.35;
  pointer-events: none;
  text-align: left;
}

#step-datetime .time-slot .time-slot-tooltip::before {
  content: '';
  position: absolute;
  left: 18px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--dt-line);
  border-top: 1px solid var(--dt-line);
  background: rgba(255,255,255,.98);
  transform: rotate(45deg);
}

#step-datetime .time-slot:hover .time-slot-tooltip,
#step-datetime .time-slot:focus-visible .time-slot-tooltip {
  display: block;
  animation: dtTooltipIn .14s ease-out both;
}

#step-datetime .time-slot-tooltip__line {
  display: block;
  color: var(--dt-text-muted);
}

#step-datetime .time-slot-tooltip__line + .time-slot-tooltip__line {
  margin-top: 3px;
}

#step-datetime .time-slot-tooltip__line--main {
  color: var(--dt-text);
  font-weight: 750;
}

@keyframes dtTooltipIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  #step-datetime .time-slot .time-slot-tooltip {
    display: none !important;
  }
}

/* ── Lot NM : tooltip unique + calendrier moins serré ─────────────────────── */
/* Ancien tooltip HTML NL neutralisé ; NN réutilise le tooltip calendrier custom. */
#step-datetime .time-slot .time-slot-tooltip {
  display: none;
}

/* Le calendrier peut respirer maintenant que les créneaux sont en liste verticale. */
@media (min-width: 721px) {
  #step-datetime .calendar-slots-wrapper {
    gap: 28px;
    align-items: flex-start;
  }

  #step-datetime #calendar-container {
    flex: 0 0 clamp(330px, 34%, 390px);
    width: clamp(330px, 34%, 390px);
    max-width: 390px;
  }

  #step-datetime #calendar-container .calendar-container {
    width: 100%;
    box-sizing: border-box;
  }

  #step-datetime #time-slots-container {
    flex: 1 1 minmax(340px, 1fr);
    min-width: 320px;
  }

  #step-datetime .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }

  #step-datetime .calendar-day:not(.day-header) {
    min-height: 42px;
  }
}

@media (max-width: 720px) {
  #step-datetime #calendar-container,
  #step-datetime #time-slots-container {
    width: 100%;
    max-width: 100%;
  }
}

/* ── Lot NN : tooltip unifié calendrier/créneaux + actions alignées contact ── */
/* Un seul tooltip custom : les créneaux réutilisent la bulle du calendrier. */
#step-datetime .time-slot {
  overflow: visible;
  isolation: isolate;
}

#step-datetime .time-slot:hover,
#step-datetime .time-slot:focus-visible {
  z-index: 240;
}

#step-datetime .time-slot > .calendar-day-availability-tooltip.time-slot-availability-tooltip {
  position: absolute;
  left: 14px;
  bottom: calc(100% + 10px);
  z-index: 250;
  width: max-content;
  min-width: 190px;
  max-width: min(300px, calc(100vw - 32px));
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--dt-brand) 18%, #e9e3f5);
  background: color-mix(in srgb, var(--dt-brand) 8%, #fff);
  color: var(--dt-text);
  box-shadow: 0 16px 36px rgba(32, 18, 52, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  text-align: left;
  line-height: 1.25;
  white-space: normal;
  font-size: .72rem;
  font-weight: 700;
  text-transform: none;
}

#step-datetime .time-slot > .calendar-day-availability-tooltip.time-slot-availability-tooltip::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 100%;
  width: 10px;
  height: 10px;
  transform: translate(0, -5px) rotate(45deg);
  border-right: 1px solid color-mix(in srgb, var(--dt-brand) 18%, #e9e3f5);
  border-bottom: 1px solid color-mix(in srgb, var(--dt-brand) 18%, #e9e3f5);
  background: inherit;
}

#step-datetime .time-slot:hover > .calendar-day-availability-tooltip.time-slot-availability-tooltip,
#step-datetime .time-slot:focus-visible > .calendar-day-availability-tooltip.time-slot-availability-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#step-datetime .time-slot > .calendar-day-availability-tooltip.time-slot-availability-tooltip .calendar-day-availability-tooltip__heading {
  color: var(--dt-brand);
  font-size: .78rem;
  font-weight: 900;
}

#step-datetime .time-slot > .calendar-day-availability-tooltip.time-slot-availability-tooltip .calendar-day-availability-tooltip__meta {
  color: var(--dt-text-mid);
  font-size: .72rem;
  font-weight: 750;
}

#step-datetime .time-slot > .calendar-day-availability-tooltip.time-slot-availability-tooltip .calendar-day-availability-tooltip__slot {
  color: var(--dt-text);
  font-size: .72rem;
  font-weight: 700;
}

@media (max-width: 699px), (hover: none), (pointer: coarse) {
  #step-datetime .time-slot > .calendar-day-availability-tooltip.time-slot-availability-tooltip {
    display: none;
  }
}

/* Le bloc Date/heure reprend le langage couleur de l’étape “Vos informations” :
   fond ivoire, action secondaire douce, CTA actif seulement après choix. */
#step-datetime .action-buttons.action-buttons--datetime {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  margin: 16px 0 10px;
  background: var(--ivory-mid, #f4f0e8);
  border: 0;
  border-top: 1px solid var(--line-soft, var(--dt-line));
  border-radius: var(--dt-radius-lg);
  box-shadow: none;
}

#step-datetime .action-buttons.action-buttons--datetime[data-state="selected"],
#step-datetime .action-buttons.action-buttons--datetime.datetime-actions--selected,
#step-datetime .action-buttons.action-buttons--datetime[data-state="idle"],
#step-datetime .action-buttons.action-buttons--datetime.datetime-actions--idle {
  background: var(--ivory-mid, #f4f0e8);
  border-color: var(--line-soft, var(--dt-line));
  box-shadow: none;
}

#step-datetime .datetime-selection-feedback {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dt-text-mid);
}

#step-datetime .datetime-selection-feedback[data-state="selected"] {
  background: transparent;
  border: 0;
  padding: 0;
}

#step-datetime .datetime-selection-feedback__label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--dt-text);
}

#step-datetime .datetime-selection-feedback__value,
#step-datetime .datetime-selection-feedback[data-state="selected"] .datetime-selection-feedback__value {
  color: var(--dt-text-mid);
  font-weight: 500;
}

#step-datetime .datetime-selection-feedback__line--primary {
  color: var(--dt-text);
  font-weight: 750;
}

#step-datetime .datetime-actions-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

#step-datetime #datetime-back-btn-footer {
  background: var(--ivory-mid, #f4f0e8);
  color: var(--dt-text-mid);
  border: 1px solid var(--dt-line);
  box-shadow: none;
}

#step-datetime #datetime-back-btn-footer:hover:not(:disabled) {
  background: var(--dt-brand-ghost);
  border-color: var(--dt-brand-border);
  color: var(--dt-brand);
}

#step-datetime #datetime-continue-btn.datetime-continue--idle,
#step-datetime #datetime-continue-btn:disabled,
#step-datetime #datetime-continue-btn[aria-disabled="true"],
#step-datetime #datetime-continue-btn[data-selection-state="idle"] {
  background: var(--ivory-mid, #f4f0e8);
  color: color-mix(in srgb, var(--dt-text-muted) 68%, #fff);
  border: 1px solid var(--dt-line);
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  filter: none;
}

#step-datetime #datetime-continue-btn.datetime-continue--ready:not(:disabled):not([aria-disabled="true"]),
#step-datetime #datetime-continue-btn.btn-primary--slot-ready:not(:disabled):not([aria-disabled="true"]),
#step-datetime #datetime-continue-btn[data-selection-state="slot-selected"]:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, var(--brand-primary, var(--dt-brand)), color-mix(in srgb, var(--brand-primary, var(--dt-brand)) 68%, #000));
  color: #fff;
  border-color: transparent;
  opacity: 1;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--dt-brand) 22%, transparent);
}

@media (max-width: 760px) {
  #step-datetime .action-buttons.action-buttons--datetime {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 12px 14px;
  }

  #step-datetime .datetime-actions-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    margin-left: 0;
  }

  #step-datetime .datetime-actions-buttons .btn {
    width: 100%;
  }
}

/* ── Lot NQ : alignement des jours + marges largeur type "Vos informations" ── */
#step-datetime .calendar-grid {
  align-items: stretch;
}

#step-datetime .calendar-day-header {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px 4px !important;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

#step-datetime .calendar-day {
  width: 100%;
  box-sizing: border-box;
}

body.booking-step-datetime #step-datetime .action-buttons.action-buttons--datetime,
body.booking-step-datetime #step-datetime #waitlist-panel.waitlist-panel {
  width: auto;
  box-sizing: border-box;
}

body.booking-step-datetime #step-datetime .action-buttons.action-buttons--datetime {
  margin: 16px 28px 10px !important;
}

body.booking-step-datetime #step-datetime #waitlist-panel.waitlist-panel {
  margin: 12px 28px 0 !important;
}

@media (max-width: 900px) {
  body.booking-step-datetime #step-datetime .action-buttons.action-buttons--datetime {
    margin: 14px 18px 10px !important;
  }

  body.booking-step-datetime #step-datetime #waitlist-panel.waitlist-panel {
    margin: 12px 18px 0 !important;
  }
}

@media (max-width: 640px) {
  body.booking-step-datetime #step-datetime .action-buttons.action-buttons--datetime {
    margin: 12px 14px 10px !important;
  }

  body.booking-step-datetime #step-datetime #waitlist-panel.waitlist-panel {
    margin: 10px 14px 0 !important;
  }
}