/*
 * Kheweul — Stepper unifié du tunnel de commande (.kw-flow)
 * Préfixe dédié pour éviter toute collision avec les anciens .kw-steps / .kw-op-*.
 * S'appuie sur les tokens de custom.css (--kw-*). Dark mode + responsive inclus.
 */
.kw-flow {
    width: 100%;
    margin: 0 0 24px;
}
.kw-flow-list {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kw-flow-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.kw-flow-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--kw-bg-alt, #f1f5f9);
    color: var(--kw-text-muted, #94a3b8);
    border: 2px solid var(--kw-border, #e2e8f0);
    transition: var(--kw-transition, all 0.25s ease);
    flex-shrink: 0;
}
.kw-flow-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kw-text-muted, #94a3b8);
    white-space: nowrap;
}
.kw-flow-sep {
    flex: 1 1 auto;
    min-width: 24px;
    max-width: 80px;
    height: 2px;
    background: var(--kw-border, #e2e8f0);
    margin: 0 8px;
    align-self: center;
}
/* Étape terminée */
.kw-flow-step.is-done .kw-flow-dot {
    background: var(--kw-primary, #E89548);
    border-color: var(--kw-primary, #E89548);
    color: #ffffff;
}
.kw-flow-step.is-done .kw-flow-label {
    color: var(--kw-text, #334155);
}
/* Étape active */
.kw-flow-step.is-active .kw-flow-dot {
    background: var(--kw-primary-light, rgba(232, 149, 72, 0.12));
    border-color: var(--kw-primary, #E89548);
    color: var(--kw-primary-text, #c47a2a);
    box-shadow: 0 0 0 4px var(--kw-primary-light, rgba(232, 149, 72, 0.15));
}
.kw-flow-step.is-active .kw-flow-label {
    color: var(--kw-text-heading, #0f172a);
    font-weight: 700;
}
/* Dark mode */
.dark-mode .kw-flow-dot {
    background: var(--kw-bg-alt, #232c3a);
    border-color: var(--kw-border, #354153);
}
.dark-mode .kw-flow-step.is-done .kw-flow-dot,
.dark-mode .kw-flow-step.is-active .kw-flow-dot {
    color: #ffffff;
}
/* Responsive — défilement horizontal sur petit écran */
@media (max-width: 600px) {
    .kw-flow-list {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .kw-flow-label { font-size: 0.75rem; }
    .kw-flow-sep { min-width: 16px; }
    .kw-flow-dot { width: 28px; height: 28px; font-size: 0.78rem; }
}