/* Parcours formulaire + camion de livraison */
.cj-form { overflow: hidden; }
.cj-sr { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }

.cj-route { margin: -8px -8px 0; }
.cj-route svg { display: block; width: 100%; height: auto; }
.cj-dest text { font: 700 11px/1 system-ui, sans-serif; fill: #143d32; }
.cj-road-done { transition: none; filter: drop-shadow(0 0 4px #ff6a2e66); }
.cj-stop circle:first-child { fill: #fff; stroke: #cfdcd5; stroke-width: 3; transition: stroke .3s; }
.cj-stop-dot { fill: #cfdcd5; transition: fill .3s, r .3s; }
.cj-stop.is-done circle:first-child { stroke: #ff6a2e; }
.cj-stop.is-done .cj-stop-dot { fill: #ff6a2e; }

.cj-truck-body { animation: cj-idle 1.6s ease-in-out infinite; }
.cj-moving .cj-truck-body { animation: cj-bump .22s ease-in-out infinite; }
.cj-wheel circle:last-child { transform-box: fill-box; }
.cj-moving .cj-wheel { animation: cj-spin .35s linear infinite; }
.cj-wheel { transform-box: fill-box; transform-origin: center; }
.cj-smoke circle { fill: #b7c7bf; opacity: 0; }
.cj-moving .cj-smoke circle { animation: cj-puff .6s ease-out infinite; }
.cj-moving .cj-smoke circle:last-child { animation-delay: .3s; }
@keyframes cj-idle { 50% { transform: translateY(-.6px); } }
@keyframes cj-bump { 50% { transform: translateY(-1.4px); } }
@keyframes cj-spin { to { rotate: 360deg; } }
@keyframes cj-puff { 0% { opacity: .7; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-10px, -6px) scale(1.6); } }

.cj-delivered .cj-door { fill: #ff6a2e; transition: fill .4s; }
.cj-delivered .cj-dest { animation: cj-pop .6s cubic-bezier(.3,1.6,.5,1); transform-box: fill-box; transform-origin: bottom center; }
@keyframes cj-pop { 40% { transform: scale(1.08); } }

.cj-steps-labels { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 8px 0; padding: 0; counter-reset: cj; }
.cj-steps-labels li { counter-increment: cj; font-size: .72rem; font-weight: 700; color: #7b8d84; display: flex; align-items: center; gap: 6px; justify-content: center; }
.cj-steps-labels li::before { content: counter(cj); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e6eeea; color: #5d7268; font-size: .66rem; transition: background .3s, color .3s; }
.cj-steps-labels li.is-current { color: #143d32; }
.cj-steps-labels li.is-current::before { background: #143d32; color: #fff; }
.cj-steps-labels li.is-done { color: #ff6a2e; }
.cj-steps-labels li.is-done::before { content: "✓"; background: #ff6a2e; color: #fff; }

.cj-status { margin: 0; font-size: .78rem; color: #52685d; text-align: center; min-height: 1.2em; }

.cj-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; animation: cj-in .38s cubic-bezier(.2,.7,.2,1); }
.cj-step legend { font-size: 1.25rem; font-weight: 800; color: var(--ink); padding: 0; margin-bottom: 14px; }
@keyframes cj-in { from { opacity: 0; transform: translateX(18px); } }

.cj-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cj-choices button { text-align: left; display: grid; gap: 4px; padding: 16px; border: 1.5px solid #cfdde4; border-radius: 8px; background: #f7f9fc; color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, transform .15s, box-shadow .2s, background .2s; }
.cj-choices button:hover { border-color: #ff6a2e; transform: translateY(-2px); box-shadow: 0 8px 22px #10304414; }
.cj-choices button[aria-checked="true"] { border-color: #ff6a2e; background: #fff4ee; box-shadow: 0 0 0 3px #ff6a2e22; }
.cj-choices .cj-ico { font-size: 1.35rem; }
.cj-choices strong { font-size: .9rem; }
.cj-choices small { font-size: .75rem; color: var(--soft-text-muted); }

.cj-recap { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 14px 16px; background: #f4f8f6; border: 1px solid #dbe6e0; border-radius: 8px; font-size: .85rem; }
.cj-recap dt { color: #5d7268; }
.cj-recap dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.cj-nav { display: flex; gap: 12px; align-items: center; }
.cj-nav .button { flex: 1; }
.cj-prev { background: none; border: 1px solid #cfdde4; border-radius: 4px; min-height: 52px; padding: 0 18px; font: inherit; font-weight: 650; color: var(--ink); cursor: pointer; }
.cj-prev:hover { border-color: var(--ink); }
.cj-delivered .cj-nav, .cj-delivered .campaign-status { display: none; }

.cj-success { text-align: center; padding: 8px 8px 12px; display: grid; justify-items: center; gap: 6px; animation: cj-rise .6s cubic-bezier(.2,.8,.2,1); outline: none; }
.cj-success[hidden] { display: none; }
.cj-success h3 { font-size: 1.6rem; margin: 6px 0 0; color: var(--ink); }
.cj-success p { color: var(--soft-text-muted); max-width: 420px; margin: 0; }
.cj-again { margin-top: 12px; background: none; border: 0; color: #2f6b58; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cj-check { width: 76px; height: 76px; }
.cj-check circle { fill: #fff4ee; stroke: #ff6a2e; stroke-width: 4; stroke-dasharray: 214; stroke-dashoffset: 214; animation: cj-draw .7s .1s ease-out forwards; }
.cj-check path { fill: none; stroke: #ff6a2e; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: cj-draw .45s .7s ease-out forwards; }
@keyframes cj-draw { to { stroke-dashoffset: 0; } }
@keyframes cj-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }

.cj-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.cj-examples { padding-top: 64px; }

@media (max-width: 640px) {
  .cj-choices { grid-template-columns: 1fr; }
  .cj-steps-labels li { font-size: .64rem; flex-direction: column; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .cj-step, .cj-success, .cj-truck-body, .cj-moving .cj-wheel, .cj-moving .cj-smoke circle { animation: none !important; }
  .cj-check circle, .cj-check path { animation: none; stroke-dashoffset: 0; }
}