/**
 * Offer Stepper — BRIEF #80
 * Bandeau horizontal en haut de #pg-dossier (mode mobile vertical < 640px).
 * Tokens uniquement (cf. tokens.css) — dark mode auto.
 */

.offer-stepper {
  width: 100%;
  margin: 0 0 12px 0;
  font-size: var(--fs-sm, 13px);
}

.offer-stepper-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  list-style: none;
  padding: 6px 8px;
  margin: 0;
  background: var(--color-bg-soft, #F9FAFB);
  border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 10px;
}

.offer-stepper-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.offer-stepper-step:hover {
  background: var(--color-primary-soft, #EFF6FF);
  border-color: var(--color-border, #E5E7EB);
}

.offer-stepper-step:focus-visible {
  outline: 2px solid var(--color-primary, #185FA5);
  outline-offset: 2px;
}

.offer-stepper-step .ost-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-border, #E5E7EB);
  color: var(--color-text-muted, #6B7280);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.offer-stepper-step .ost-icon {
  font-size: 14px;
  line-height: 1;
}

.offer-stepper-step .ost-label {
  font-weight: 600;
  color: var(--color-text, #111827);
}

.offer-stepper-step .ost-state {
  font-size: 13px;
  line-height: 1;
  margin-left: 2px;
}

.offer-stepper-sep {
  display: flex;
  align-items: center;
  color: var(--color-text-muted, #9CA3AF);
  padding: 0 2px;
  font-weight: 600;
  user-select: none;
}

/* ── États ─────────────────────────────────────────────────────────────── */

.offer-stepper-step[data-state="done"] {
  background: var(--color-success-soft, #D1FAE5);
  border-color: var(--color-success, #10B981);
}
.offer-stepper-step[data-state="done"] .ost-num {
  background: var(--color-success, #10B981);
  color: #fff;
}
.offer-stepper-step[data-state="done"] .ost-label {
  color: var(--color-success, #10B981);
}

.offer-stepper-step[data-state="active"] {
  background: var(--color-warning-soft, #FEF3C7);
  border-color: var(--color-warning, #F59E0B);
  animation: ost-pulse 2.4s ease-in-out infinite;
}
.offer-stepper-step[data-state="active"] .ost-num {
  background: var(--color-warning, #F59E0B);
  color: #fff;
}
.offer-stepper-step[data-state="active"] .ost-label {
  color: var(--color-warning, #B45309);
}

.offer-stepper-step[data-state="blocked"] {
  background: var(--color-danger-soft, #FEE2E2);
  border-color: var(--color-danger, #DC2626);
}
.offer-stepper-step[data-state="blocked"] .ost-num {
  background: var(--color-danger, #DC2626);
  color: #fff;
}
.offer-stepper-step[data-state="blocked"] .ost-label {
  color: var(--color-danger, #DC2626);
}

.offer-stepper-step[data-state="locked"] {
  opacity: 0.6;
}
.offer-stepper-step[data-state="locked"]:hover {
  opacity: 0.85;
}

@keyframes ost-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .offer-stepper-step[data-state="active"] { animation: none; }
}

/* ── Tooltip (hover + focus) ────────────────────────────────────────────── */

.ost-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  min-width: 220px;
  max-width: 280px;
  padding: 8px 10px;
  background: var(--color-text, #111827);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  white-space: normal;
}

.ost-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: var(--color-text, #111827);
}

.offer-stepper-step:hover .ost-tooltip,
.offer-stepper-step:focus-visible .ost-tooltip {
  opacity: 1;
}

.ost-tt-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.ost-tt-list {
  margin: 0;
  padding-left: 16px;
}

.ost-tt-list li {
  margin: 1px 0;
}

/* ── Mode mobile vertical (< 640px) ─────────────────────────────────────── */

@media (max-width: 640px) {
  .offer-stepper-list {
    flex-direction: column;
    padding: 6px;
    gap: 4px;
  }

  .offer-stepper-step {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 10px;
  }

  .offer-stepper-sep {
    display: none;
  }

  .ost-label {
    flex: 1;
  }

  .ost-tooltip {
    position: static;
    transform: none;
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
    display: none;
    min-width: 0;
    max-width: none;
  }

  .ost-tooltip::before {
    display: none;
  }

  /* Sur mobile, le tooltip ne s'affiche que pour le step "active" et "blocked" (signaux) */
  .offer-stepper-step[data-state="active"] .ost-tooltip,
  .offer-stepper-step[data-state="blocked"] .ost-tooltip {
    display: block;
  }
}

/* ── Dark mode (body.dark) ─────────────────────────────────────────────── */

body.dark .offer-stepper-list {
  background: var(--color-bg-soft, #1E293B);
  border-color: var(--color-border, #334155);
}

body.dark .offer-stepper-step[data-state="done"] {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--color-success, #10B981);
}

body.dark .offer-stepper-step[data-state="active"] {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--color-warning, #F59E0B);
}

body.dark .offer-stepper-step[data-state="blocked"] {
  background: rgba(220, 38, 38, 0.15);
  border-color: var(--color-danger, #DC2626);
}

body.dark .ost-tooltip {
  background: var(--gray-100, #F3F4F6);
  color: var(--gray-900, #111827);
}

body.dark .ost-tooltip::before {
  border-bottom-color: var(--gray-100, #F3F4F6);
}