/* ZYNTROL Progress Bar — frontend */
.zpb-root{
  --zpb-primary:#4F8DFF;
  --zpb-primary-light:#7BA8FF;
  --zpb-bg:#1c1c22;
  --zpb-text:#FAFAFA;
  --zpb-muted:#9CA3AF;
  --zpb-border:rgba(255,255,255,.12);
  --zpb-success:#22C55E;
  --zpb-radius:14px;
  background:var(--zpb-bg);
  color:var(--zpb-text);
  border:1px solid var(--zpb-border);
  border-radius:var(--zpb-radius);
  padding:24px 22px;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
}
.zpb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 18px}
.zpb-title{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.01em;color:var(--zpb-text)}
.zpb-order{font-size:.85rem;color:var(--zpb-muted);font-variant-numeric:tabular-nums}
.zpb-empty{margin:0;color:var(--zpb-muted);font-size:.9rem}

.zpb-bar{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:14px 6px 4px}
.zpb-line{position:absolute;left:calc(50% / var(--zpb-steps, 4));right:calc(50% / var(--zpb-steps, 4));top:calc(14px + 22px);height:3px;background:var(--zpb-border);border-radius:999px;overflow:hidden;z-index:0}
.zpb-line-fill{height:100%;width:0;background:linear-gradient(90deg,var(--zpb-primary),var(--zpb-primary-light));border-radius:999px;transition:width .6s cubic-bezier(.22,1,.36,1);box-shadow:0 0 14px -2px var(--zpb-primary)}

.zpb-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.zpb-bubble{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--zpb-bg);
  border:2px solid var(--zpb-border);
  color:var(--zpb-muted);
  transition:all .3s ease;
}
/* Icônes Lucide — on laisse vivre les attributs HTML fill="none" stroke="currentColor".
   Le seul rôle du CSS ici est de dimensionner. Aucun !important : c'est la spec qui veut
   qu'un attribut HTML batte la déclaration CSS d'un thème quand les spécificités sont égales. */
.zpb-root .zpb-bubble svg{ width:22px; height:22px; display:block; }
.zpb-step.is-done .zpb-bubble{
  background:linear-gradient(135deg,var(--zpb-primary),var(--zpb-primary-light));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px -4px rgba(79,141,255,.6);
}
.zpb-step.is-active .zpb-bubble{
  width:52px;height:52px;
  background:linear-gradient(135deg,var(--zpb-primary),var(--zpb-primary-light));
  border:3px solid #fff;
  color:#fff;
  box-shadow:0 0 0 4px rgba(79,141,255,.35),0 0 28px -2px rgba(79,141,255,.85),0 6px 18px -4px rgba(0,0,0,.5);
  transform:translateY(-2px);
  animation:zpb-pulse 1.8s ease-in-out infinite;
}
.zpb-root .zpb-step.is-active .zpb-bubble svg{ width:26px; height:26px; }
@keyframes zpb-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(79,141,255,.35),0 0 28px -2px rgba(79,141,255,.75),0 6px 18px -4px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 9px rgba(79,141,255,.18),0 0 40px 0 rgba(79,141,255,.95),0 6px 18px -4px rgba(0,0,0,.5)}
}
@keyframes zpb-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(79,141,255,.35),0 0 28px -2px rgba(79,141,255,.75),0 6px 18px -4px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 9px rgba(79,141,255,.18),0 0 40px 0 rgba(79,141,255,.95),0 6px 18px -4px rgba(0,0,0,.5)}
}
.zpb-label{
  font-size:.78rem;font-weight:600;text-align:center;
  color:var(--zpb-muted);line-height:1.2;
  max-width:100%;
  word-wrap:break-word;
}
.zpb-step.is-done .zpb-label{color:var(--zpb-text)}
.zpb-step.is-active .zpb-label{color:var(--zpb-primary)}

.zpb-status{
  margin-top:16px;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:rgba(79,141,255,.08);
  border:1px solid rgba(79,141,255,.22);
  font-size:.88rem;color:var(--zpb-text);
}
.zpb-status .zpb-dot{
  width:8px;height:8px;border-radius:50%;background:var(--zpb-primary);
  box-shadow:0 0 0 4px rgba(79,141,255,.18);animation:zpb-blink 1.6s ease-in-out infinite;
}
@keyframes zpb-blink{0%,100%{opacity:1}50%{opacity:.45}}

/* États annulés */
.zpb-root.zpb-cancelled{opacity:.6;filter:grayscale(.85)}
.zpb-root.zpb-cancelled .zpb-line-fill{background:var(--zpb-muted);box-shadow:none}
.zpb-root.zpb-cancelled .zpb-step .zpb-bubble{
  background:var(--zpb-bg);border-color:var(--zpb-border);color:var(--zpb-muted);
  box-shadow:none;animation:none;
}
.zpb-root.zpb-cancelled .zpb-step .zpb-label{color:var(--zpb-muted)}
.zpb-status.is-cancelled{
  background:rgba(156,163,175,.08);
  border-color:rgba(156,163,175,.22);
}
.zpb-status.is-cancelled .zpb-dot{background:var(--zpb-muted);box-shadow:0 0 0 4px rgba(156,163,175,.18);animation:none}

.zpb-cancelled-msg{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;font-size:.9rem;color:var(--zpb-muted);
}
.zpb-cancelled-msg .zpb-cancelled-dot{
  width:8px;height:8px;border-radius:50%;background:var(--zpb-muted);
  box-shadow:0 0 0 4px rgba(156,163,175,.15);
}

/* Mobile */
@media (max-width:560px){
  .zpb-root{padding:18px 14px}
  .zpb-head{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:10px}
  .zpb-bar{padding:10px 0 4px;gap:4px}
  .zpb-line{left:calc(50% / var(--zpb-steps, 4));right:calc(50% / var(--zpb-steps, 4));top:calc(10px + 18px)}
  .zpb-bubble{width:36px;height:36px}
  .zpb-root .zpb-bubble svg{ width:18px; height:18px; }
  .zpb-step.is-active .zpb-bubble{width:44px;height:44px;border-width:3px}
  .zpb-root .zpb-step.is-active .zpb-bubble svg{ width:22px; height:22px; }
  .zpb-label{font-size:.68rem}
}


/* Pause (action requise — devis, pièce, contre-offre, etc.) */
.zpb-paused-msg{
  margin-top:14px;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.32);
  font-size:.88rem;color:var(--zpb-text);
}
.zpb-paused-msg .zpb-paused-dot{
  width:8px;height:8px;border-radius:50%;background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.18);
  animation:zpb-blink 1.6s ease-in-out infinite;
}

/* État succès (étape finale atteinte) */
.zpb-step.is-success .zpb-bubble{
  background:linear-gradient(135deg,var(--zpb-success),color-mix(in srgb,var(--zpb-success) 75%,#fff));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px -4px color-mix(in srgb,var(--zpb-success) 60%,transparent);
  animation:none;
}
.zpb-step.is-success .zpb-label{color:var(--zpb-success)}
.zpb-root.is-complete .zpb-line-fill{
  background:linear-gradient(90deg,var(--zpb-success),color-mix(in srgb,var(--zpb-success) 70%,#fff));
  box-shadow:0 0 14px -2px var(--zpb-success);
}
.zpb-root.is-complete .zpb-status{
  background:color-mix(in srgb,var(--zpb-success) 10%,transparent);
  border-color:color-mix(in srgb,var(--zpb-success) 28%,transparent);
}
.zpb-root.is-complete .zpb-status .zpb-dot{
  background:var(--zpb-success);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--zpb-success) 18%,transparent);
  animation:none;
}


/* ---------- Track-order form (v1.2.1 configurable) ---------- */
.zpb-track-form{max-width:var(--zpb-tf-maxw,480px);margin:24px auto;padding:var(--zpb-tf-pad,28px);background:var(--zpb-tf-bg,#1c1c22);border:var(--zpb-tf-border-w,1px) solid var(--zpb-tf-border,rgba(255,255,255,.08));border-radius:var(--zpb-tf-radius,14px);font-family:'Inter',system-ui,sans-serif;color:var(--zpb-tf-input-color,#FAFAFA);box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.zpb-track-form .zpb-track-form__title{margin:0 0 6px!important;font-size:var(--zpb-tf-title-size,22px)!important;font-weight:700!important;font-family:'Space Grotesk','Inter',sans-serif!important;color:var(--zpb-tf-title-color,#FAFAFA)!important;text-align:left!important}
.zpb-track-form .zpb-track-form__intro{margin:0 0 18px;color:var(--zpb-tf-intro-color,#9CA3AF);font-size:var(--zpb-tf-intro-size,14px)}
.zpb-track-form__row{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.zpb-track-form .zpb-track-form__row label{font-size:var(--zpb-tf-label-size,13px);font-weight:600;color:var(--zpb-tf-label-color,#FAFAFA)}
.zpb-track-form .zpb-track-form__row input{padding:11px 14px;border:1px solid var(--zpb-tf-input-border,rgba(255,255,255,.12));border-radius:10px;font:inherit;font-size:var(--zpb-tf-input-size,15px);color:var(--zpb-tf-input-color,#FAFAFA)!important;background:var(--zpb-tf-input-bg,rgba(255,255,255,.04))!important;-webkit-text-fill-color:var(--zpb-tf-input-color,#FAFAFA)}
.zpb-track-form .zpb-track-form__row input::placeholder{color:var(--zpb-tf-intro-color,#9CA3AF);opacity:.7}
.zpb-track-form .zpb-track-form__row input:focus{outline:none;border-color:var(--zpb-tf-focus,#4F8DFF);box-shadow:0 0 0 3px color-mix(in srgb,var(--zpb-tf-focus,#4F8DFF) 22%,transparent)}
.zpb-track-form__row--submit{margin-top:6px}
.zpb-track-form .zpb-track-form__row--submit button{width:100%;padding:var(--zpb-tf-btn-pad,13px 18px);border:0;border-radius:var(--zpb-tf-btn-radius,10px);background:linear-gradient(135deg,var(--zpb-tf-btn-bg,#4F8DFF),var(--zpb-tf-btn-bg2,#7BA8FF))!important;color:var(--zpb-tf-btn-color,#fff)!important;font-weight:700;font-size:var(--zpb-tf-btn-size,15px);cursor:pointer;transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease}
.zpb-track-form .zpb-track-form__row--submit button:hover{opacity:.95;transform:translateY(-1px);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--zpb-tf-btn-bg,#4F8DFF) 50%,transparent)}
.zpb-track-form__error{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:var(--zpb-tf-err-bg,rgba(239,68,68,.12));color:var(--zpb-tf-err-color,#fecaca);font-size:13px;border:1px solid var(--zpb-tf-err-border,rgba(239,68,68,.35))}