/* ==========================================================================
   Journey — reusable "explain the path, then price it" component.
   Two parts: a horizontal step rail (.journey__path) that explains the
   methodology without calling it a questionnaire, and a set of prefix-based
   pricing tiers (.journey__tiers) that let a client buy up to a given step.
   Data-driven per product via markup (data-upto/data-price on each tier) —
   the same shell is meant to be reused for Circuit Expression later, just
   with a different step list and accent modifier.
   Blocks: .journey__path, .journey__tiers, .journey__summary
   Accent modifiers: .journey--parcours (red), .journey--circuit (green)
   ========================================================================== */

.journey {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--glass-border);
}

.journey--parcours {
  --journey-accent: var(--color-red);
  --journey-accent-tint: rgba(227, 0, 27, 0.08);
  --journey-accent-tint-strong: rgba(227, 0, 27, 0.14);
}

.journey--circuit {
  --journey-accent: var(--color-apple-green);
  --journey-accent-tint: rgba(52, 199, 89, 0.08);
  --journey-accent-tint-strong: rgba(52, 199, 89, 0.14);
}

.journey__eyebrow {
  color: var(--journey-accent);
}

.journey__heading {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-top: var(--space-2);
}

.journey__subtext {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  max-width: 60ch;
}

/* --- Toggle — the tiers/path stay collapsed behind this trigger until the
   client asks to see pricing, instead of dumping the full breakdown on
   every visitor by default. --- */
.journey__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--journey-accent-tint-strong);
  background: var(--journey-accent-tint);
  color: var(--journey-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.journey__toggle:hover {
  background: var(--journey-accent-tint-strong);
}

.journey__toggle-icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--transition-base);
}

.journey__toggle.is-open .journey__toggle-icon {
  transform: rotate(180deg);
}

/* Audience selector — an alternative to .journey__toggle for journeys that
   fork their steps/tiers/pricing by audience (the 3 Parcours de Création
   profiles). Picking an option both reveals the collapse and swaps which
   .journey__audience-panel is shown underneath. Each option is its own
   outline chip rather than a shared sliding-thumb track: the 3 profile
   labels vary a lot in length and need to wrap on narrow screens, and
   nothing is highlighted until a visitor actually picks one (there's no
   default profile, unlike the old always-one-side-or-the-other switch). */
.journey__audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.journey__audience-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border-strong);
  background: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.journey__audience-option svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.65;
  transition: opacity var(--transition-base);
}

.journey__audience-option:hover {
  border-color: var(--journey-accent);
  color: var(--color-text-primary);
}

.journey__audience-option.is-active {
  background: var(--journey-accent-tint);
  border-color: var(--journey-accent);
  color: var(--journey-accent);
}

.journey__audience-option.is-active svg {
  opacity: 1;
}

.journey__audience-panel {
  display: none;
}

.journey__audience-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Height-animates via the grid 0fr→1fr trick (no JS measuring, no
   fixed max-height guess) — .journey__collapse-inner supplies the
   overflow:hidden that makes the 0fr row actually clip to zero. */
.journey__collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--transition-base), opacity var(--transition-base);
}

.journey__collapse.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.journey__collapse-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
  min-height: 0;
}

/* --- Step path — horizontal scroll rail, edge-fades instead of a hard
   clip so "there's more" reads visually on narrow viewports. --- */
.journey__path-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.journey__path-wrap {
  position: relative;
}

.journey__path-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.journey__path-hint svg {
  flex: none;
  width: 13px;
  height: 13px;
}

/* The label needs its own min-width:0 flex item — otherwise a flex
   container's anonymous text run refuses to wrap below its natural
   width, which overflowed the card on narrow viewports. */
.journey__path-hint span {
  min-width: 0;
}

/* Scrub bar — an explicit, draggable affordance under the rail so it
   doesn't rely on a visitor guessing it's draggable. Track width is the
   viewport/content ratio, so its thumb also communicates how much of the
   path is currently in view (like a horizontal scrollbar, just visible
   by default instead of only on hover). */
.journey__path-slider {
  position: relative;
  height: 6px;
  margin-top: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--glass-border-strong);
  cursor: pointer;
  touch-action: none;
}

.journey__path-slider-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 24px;
  border-radius: var(--radius-pill);
  background: var(--journey-accent);
  transition: background var(--transition-fast);
}

.journey__path-slider:hover .journey__path-slider-thumb {
  background: var(--color-text-primary);
}

.journey__path {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--space-2) var(--space-1) var(--space-3);
  margin: 0 calc(-1 * var(--space-1));
  scrollbar-width: none;
}

.journey__path::-webkit-scrollbar {
  display: none;
}

.journey__path-wrap::before,
.journey__path-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--space-3);
  width: 28px;
  pointer-events: none;
  z-index: 1;
}

.journey__path-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-surface-50), transparent);
}

.journey__path-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-surface-50), transparent);
}

.journey__step {
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  scroll-snap-align: start;
}

.journey__step-dot {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--glass-border-strong);
  background: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.journey__step.is-included .journey__step-dot {
  background: var(--journey-accent);
  border-color: var(--journey-accent);
  color: var(--color-white);
}

.journey__step-label {
  font-size: 0.7rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.journey__step.is-included .journey__step-label {
  color: var(--color-text-primary);
}

.journey__connector {
  flex: 0 0 28px;
  height: 2px;
  margin-top: 15px;
  background: var(--glass-border-strong);
  transition: background var(--transition-base);
}

.journey__connector.is-included {
  background: var(--journey-accent);
}

/* Outcome node — the final deliverable, styled as a diamond (mirrors the
   ♦ marker in the source methodology diagram) instead of a numbered step,
   since it's the result you reach, not a section you buy on its own. */
.journey__step--outcome .journey__step-dot {
  border-radius: var(--radius-sm);
  transform: rotate(45deg);
  border-color: var(--color-apple-gray);
}

.journey__step--outcome .journey__step-dot span {
  display: block;
  transform: rotate(-45deg);
  font-size: 0.9rem;
  line-height: 1;
}

.journey__step--outcome.is-included .journey__step-dot {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

/* --- Tiers --- */
.journey__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.journey--circuit .journey__tiers {
  grid-template-columns: repeat(2, 1fr);
}

.journey__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border-strong);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-fast);
}

.journey__tier:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}

.journey__tier.is-active {
  border-color: var(--journey-accent);
  background: var(--journey-accent-tint);
}

.journey__tier--featured {
  border-color: rgba(140, 142, 150, 0.35);
}

.journey__tier--featured.is-active {
  border-color: var(--journey-accent);
}

.journey__tier-badge {
  position: absolute;
  top: -11px;
  right: var(--space-4);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--journey-accent);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* The tier title is a real <button> nested inside the (now non-native,
   role="button") .journey__tier card — clicking it opens #modal-formules
   for that formula (js/modal.js + js/formulas-modal.js) instead of just
   selecting the tier. Styled as a standing blue link (not just an
   underline-on-hover, like .situations__formula-link elsewhere on this
   page) so it visibly reads as clickable up front, distinct from the
   rest of the card's plain text. */
.journey__tier-name-link {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-apple-blue);
  text-decoration: underline;
  text-decoration-color: rgba(0, 122, 255, 0.35);
  transition: text-decoration-color var(--transition-fast);
}

.journey__tier-name-link:hover {
  text-decoration-color: currentColor;
}

.journey__tier-range {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--journey-accent);
}

.journey__tier-desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.journey__tier-price {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* --- Summary / CTA bar --- */
.journey__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--journey-accent-tint);
  border: 1px solid var(--journey-accent-tint-strong);
}

/* Always spans the full row so the price/button (.journey__summary-action)
   consistently wrap onto their own line below, instead of sitting beside
   the text on one row when a tier's summary happens to be short. */
.journey__summary-info {
  flex: 1 1 100%;
}

.journey__summary-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--journey-accent);
}

.journey__summary-text {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-primary);
}

.journey__summary-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.journey__summary-price {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .journey__tiers,
  .journey--circuit .journey__tiers {
    grid-template-columns: 1fr;
  }

  .journey__summary {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
  }

  /* Full-width "Acheter" once the summary itself goes full-width. */
  .journey__summary-action {
    align-items: stretch;
    width: 100%;
  }

  .journey__summary-action .btn {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .journey__step {
    width: 92px;
  }

  .journey__toggle {
    width: 100%;
    justify-content: space-between;
  }
}