/* Création d'un arbre en deux étapes (DA terracotta) : la fenêtre vient de pz.css */
.tw-steps { display: flex; align-items: center; gap: 6px; }
.tw-step { width: 26px; height: 4px; border-radius: 4px; background: var(--pz-line); transition: background-color 240ms ease; }
.tw-step.is-on { background: var(--pz-a500); }
.tw-steps .pz-small { margin-left: 6px; }

.tw-form { display: grid; gap: 18px; }
.tw-optional { font-weight: 400; color: var(--pz-faint); margin-left: 4px; }

.tw-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tw-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--pz-a300);
  border-radius: var(--pz-r-m);
  background: var(--pz-a50);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .tw-photo:hover { background: var(--pz-a100); } }
.tw-photo-input:focus-visible + .tw-photo, .tw-photo:focus-within { outline: 2px solid var(--pz-a500); outline-offset: 2px; }
.tw-photo-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--pz-surface); color: var(--pz-a700); }
.tw-photo-text { display: grid; gap: 2px; min-width: 0; }
.tw-photo-text strong { font: 500 14px var(--pz-sans); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-photo-text span { font: 400 12.5px var(--pz-sans); color: var(--pz-muted); }