.photo-intro h1 { margin: 0 0 8px; font-size: 26px; }
.photo-intro p { margin: 0 0 10px; max-width: 65ch; }
.tips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tips li { background: var(--surface-2); border-radius: 99px; padding: 4px 12px; font-size: 13px; }

.photo-box { display: flex; flex-direction: column; gap: 16px; }
/* Les blocs en flex ci-dessous doivent rester cachés quand ils portent l'attribut hidden. */
.pick[hidden], .preview[hidden], .off[hidden] { display: none; }
.pick { display: flex; flex-wrap: wrap; gap: 10px; }
.pick .btn { font-size: 16px; padding: 12px 18px; }
.off { background: var(--amber-bg); color: var(--amber-ink); border-radius: 12px; padding: 12px 16px; }
.off p { margin: 4px 0 0; }

.preview { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.preview img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.state { margin: 0; color: var(--muted); }
.state.err { color: var(--red-ink); font-weight: 600; }

.results { display: flex; flex-direction: column; gap: 12px; }
.hit { border: 2px solid var(--line); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
.hit.main { border-color: var(--green); }
.hit > img { width: 110px; height: 110px; object-fit: contain; background: #fff; border-radius: 10px; }
.hit h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.hit .meta { color: var(--muted); font-size: 13px; }
.hit .fam { display: inline-block; margin-top: 6px; background: var(--blue); color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 600; }
.hit .where { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hit .where b { font-size: 14px; }
.box-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.box-line img { width: 40px; height: 30px; object-fit: contain; background: #fff; border-radius: 6px; }
.chip-c { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 99px; padding: 2px 8px; }
.chip-c .sw { width: 11px; height: 11px; }
.none { color: var(--muted); font-size: 14px; }
.others-title { margin: 6px 0 0; font-size: 15px; }
.hit.small { grid-template-columns: 70px minmax(0, 1fr); padding: 10px; }
.hit.small > img { width: 70px; height: 70px; }
.hit.small h2 { font-size: 15px; }
.privacy { margin: 0; font-size: 12px; color: var(--muted); }

@media (max-width: 520px) {
  .hit { grid-template-columns: 80px minmax(0, 1fr); }
  .hit > img { width: 80px; height: 80px; }
}