/* Site : Découverte. Dépend de tokens.css et components.css. */
.app-header { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo switch" "tabs tabs"; align-items: center; gap: 0 var(--sp-3); padding: var(--sp-2) max(var(--sp-4), env(safe-area-inset-left, 0px)) 0; background: var(--c-surface); border-bottom: 1px solid var(--c-line-soft); }
.app-header .logo { grid-area: logo; }
.app-header .switch { grid-area: switch; }
.tabs { grid-area: tabs; display: flex; gap: var(--sp-2); }
.tab { position: relative; flex: 1; min-height: var(--target-min); padding: 0 var(--sp-4); background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-weight: var(--fw-bold); color: var(--c-ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.tab:hover { color: var(--c-ink); }
.tab[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-brand); }
.count { min-width: 1.5rem; height: 1.5rem; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-on-brand); font-size: var(--fs-xs); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .app-header { grid-template-columns: 1fr auto 1fr; grid-template-areas: "logo tabs switch"; padding-top: 0; padding-bottom: 0; }
  .tabs { justify-self: center; }
  .tab { flex: none; min-height: 4rem; }
  .app-header .switch { justify-self: end; }
}
.app { max-width: 64rem; margin: 0 auto; padding: var(--sp-5) max(var(--sp-4), env(safe-area-inset-left, 0px)) var(--sp-7); }
.panel[hidden] { display: none; }

/* Découverte */
.discover { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
.deck { width: 100%; max-width: 26rem; margin-inline: auto; display: grid; gap: var(--sp-5); align-content: start; }
.deck-slot { position: relative; }
.deck-slot > * { width: 100%; }
.deck .actions { align-items: center; }
.act { display: grid; place-items: center; }
.hint { text-align: center; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.side h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.side { max-width: 26rem; width: 100%; margin-inline: auto; }
@media (min-width: 900px) { .discover { grid-template-columns: minmax(0, 26rem) minmax(0, 20rem); justify-content: center; gap: var(--sp-8); } .side { margin-top: var(--sp-2); } }
.match .match-photos img { width: 7rem; }
.match-actions { display: grid; gap: var(--sp-2); width: 100%; }
.match-msg { max-width: 30ch; }

/* Bannière d'entrée */
.intro-banner { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; color: var(--c-ink); }
.intro-banner[open] { display: grid; place-items: center; padding: var(--sp-4); }
.intro-banner::backdrop { background: rgb(var(--c-shadow) / 0.72); }
.intro-card { width: 100%; max-width: 26rem; display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-pop); }
.intro-card .logo-mark { width: 3rem; height: 3rem; border-radius: var(--r-md); }
.intro-card .logo-mark svg { width: 2rem; height: 2rem; }
.intro-card h2 { font-size: var(--fs-2xl); }
.intro-card p:not(.eyebrow) { color: var(--c-ink-soft); }
.intro-card .btn { margin-top: var(--sp-2); }
[hidden] { display: none !important; }
.match-photos img { flex: none; height: auto; aspect-ratio: 4 / 5; max-width: 60%; }
.match-photos { width: 100%; }

/* Pédigrée, vérification, carrousel, Éleveurs */
.badge--btn { cursor: pointer; font: inherit; font-weight: var(--fw-bold); }
.badge--btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.card-badge { pointer-events: none; } .card-badge .badge { pointer-events: auto; }
.side { display: grid; gap: var(--sp-6); align-content: start; }
.side h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.verify { display: grid; gap: var(--sp-2); }
.verify label { font-weight: var(--fw-medium); }
.verify .row { display: flex; gap: var(--sp-2); }
.verify input { flex: 1; min-width: 0; min-height: var(--target-min); padding: 0 var(--sp-4); border: 2px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font: inherit; font-family: var(--font-mono); text-transform: uppercase; }
.verify input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.verify-result { display: grid; gap: var(--sp-2); justify-items: start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-ink); }
.verify-result:empty { display: none; }
.verify-result--ko { border-left: 4px solid var(--c-panneau-line); }
.verify-result--ok { border-left: 4px solid var(--c-patte-line); }
.cert-dialog { border: 0; border-radius: var(--r-lg); padding: var(--sp-4); width: min(100% - 2rem, 40rem); background: var(--c-surface); color: var(--c-ink); }
.cert-dialog::backdrop { background: rgb(var(--c-shadow) / 0.72); }
.cert-dialog img { width: 100%; height: auto; border-radius: var(--r-sm, 0.5rem); }
.cert-dialog .btn { margin-top: var(--sp-3); }

/* Messagerie */
.inbox { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.threads h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.thread-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.thread-btn { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); min-height: 4.5rem; text-align: left; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); font: inherit; color: var(--c-ink); cursor: pointer; }
.thread-btn:hover { border-color: var(--c-line); }
.thread-btn[aria-current="true"] { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.thread-btn strong { display: block; }
.thread-btn .prev { display: block; color: var(--c-ink-soft); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-btn .txt { min-width: 0; }
.thread-btn.unread strong::after { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-left: var(--sp-2); border-radius: 50%; background: var(--c-brand); }
.thread-btn time { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.avatar { width: 3rem; height: 3rem; flex: none; border-radius: 50%; background-color: var(--c-surface-2); background-repeat: no-repeat; border: 2px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-line-soft); }
.empty { padding: var(--sp-5); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-ink-soft); }
.empty[hidden] { display: none; }
.thread { display: grid; grid-template-rows: auto minmax(16rem, 1fr) auto; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); overflow: hidden; min-height: 28rem; }
.thread[hidden] { display: none; }
.thread-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line-soft); }
.thread-head h3 { font-size: var(--fs-lg); }
.thread-head p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.back { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); margin-left: calc(var(--sp-2) * -1); background: none; border: 0; border-radius: 50%; color: var(--c-ink); cursor: pointer; }
.back svg { width: 1.5rem; height: 1.5rem; }
.log { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); overflow-y: auto; max-height: 28rem; background: var(--c-bg); }
.msg { max-width: 80%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); line-height: var(--lh-body); }
.msg time { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); opacity: 0.8; }
.msg--dog { align-self: flex-start; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-bottom-left-radius: var(--sp-1); }
.msg--me { align-self: flex-end; background: var(--c-brand); color: var(--c-on-brand); border-bottom-right-radius: var(--sp-1); }
.sys { align-self: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-soft); padding: var(--sp-1) var(--sp-3); }
.composer { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
.composer input { flex: 1; min-width: 0; min-height: var(--target-min); padding: 0 var(--sp-4); border: 2px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font: inherit; }
.composer .btn { padding: 0 var(--sp-4); }
.back { display: none; }
@media (max-width: 899px) {
  .inbox[data-view="list"] .thread { display: none; }
  .inbox[data-view="thread"] .threads { display: none; }
  .back { display: grid; }
}
@media (min-width: 900px) { .inbox { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } .back { display: none; } }

.thread, .threads, .inbox > *, .discover > * { min-width: 0; }
.thread { grid-template-columns: minmax(0, 1fr); }
.composer .btn { flex: none; }