/* ---------- Tunnel de reservation ---------- */
.funnel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .funnel { grid-template-columns: 1fr; } }

.steps { display: flex; gap: .4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.step-chip {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}
.step-chip .num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #edf2ef; color: var(--ink-soft); font-size: .78rem;
}
.step-chip.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.step-chip.is-active .num { background: var(--brand); color: #fff; }
.step-chip.is-done { color: var(--success); border-color: #bfe3d0; background: var(--success-soft); }
.step-chip.is-done .num { background: var(--success); color: #fff; }

.summary { position: sticky; top: 1rem; }

.dropzone {
  border: 2px dashed #c3d7cc; border-radius: 14px; padding: 1.6rem; text-align: center; background: #fbfdfc;
  cursor: pointer; transition: .15s ease;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--success); background: var(--success-soft); text-align: left; }
.dropzone .icon { font-size: 1.8rem; }
.file-row { display: flex; align-items: center; gap: .8rem; }
.file-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: #fff; }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.option {
  border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; background: #fff; cursor: pointer;
  font-weight: 600; font-size: .92rem; text-align: left; transition: .15s ease;
}
.option small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.option:hover { border-color: var(--brand); }
.option.is-selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }

.day-scroller { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; max-height: 260px; overflow-y: auto; padding-right: .3rem; }
.day {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: .55rem .3rem; text-align: center;
  cursor: pointer; font-size: .8rem; transition: .15s ease;
}
.day b { display: block; font-size: 1.25rem; line-height: 1.15; }
.day span { color: var(--ink-soft); text-transform: capitalize; }
.day:hover { border-color: var(--brand); }
.day.is-selected { border-color: var(--brand); background: var(--brand); color: #fff; }
.day.is-selected span { color: rgba(255,255,255,.85); }
.day.is-full { opacity: .45; cursor: not-allowed; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.slot {
  border: 1px solid var(--line); border-radius: 12px; padding: .9rem; background: #fff; cursor: pointer; text-align: left;
}
.slot b { display: block; font-size: 1rem; }
.slot .range { color: var(--ink-soft); font-size: .85rem; }
.slot .left { font-size: .78rem; font-weight: 700; color: var(--success); }
.slot.is-selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.slot.is-full { opacity: .5; cursor: not-allowed; }
.slot.is-full .left { color: var(--danger); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.stepper button { width: 40px; height: 42px; border: 0; background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--brand); }
.stepper button:hover { background: var(--brand-soft); }
.stepper input { width: 60px; border: 0; text-align: center; height: 42px; font-weight: 700; }


[v-cloak] { display: none; }
.loading-fallback { padding: 2rem; text-align: center; color: var(--ink-soft); }