/* Formulaire : étapes numérotées, interrupteur, actions. */

.form { padding: 8px 20px 20px; }
.step { padding: 16px 0; border-bottom: 1px solid var(--border); }
.step:last-of-type { border-bottom: 0; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.step h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.hint { margin-top: 8px; font-size: 13px; color: var(--muted); }

.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 32px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background-color .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }

.actions { display: grid; gap: 8px; padding-top: 16px; }