:root {
  --bg: #f4efe6;
  --bg-2: #efe8db;
  --surface: #ffffff;
  --ink: #1f2a24;
  --ink-soft: #5c6660;
  --line: #e4ddcf;
  --green: #2f6b4f;
  --green-dark: #275c43;
  --ocre: #b5821f;
  --red: #c0533f;
  --grey: #9aa09b;
  --focus: #1f6feb;
  --radius: 22px;
  --shadow-card: 0 10px 30px rgba(31,42,36,.14), 0 2px 6px rgba(31,42,36,.08);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, var(--bg) 0%, var(--bg-2) 100%);
  min-height: 100dvh; display: flex; flex-direction: column;
}
h1, h2 { margin: 0; line-height: 1.15; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

/* header */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem); flex-wrap: wrap;
}
.brand-name { font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -.01em; color: var(--green-dark); }
.tagline { margin: .1rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.top-actions { display: flex; gap: .5rem; align-items: center; }
.pill {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: .45rem .9rem; font-weight: 600; font-size: .85rem;
}
.pill-num { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-left: .2rem;
  background: var(--green); color: #fff; border-radius: 999px; font-size: .8rem; }
.icon-btn {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font-size: 1.1rem; display: grid; place-items: center; line-height: 1;
}
.icon-btn:hover { background: #fff; color: var(--ink); }

/* main / deck */
main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: .5rem 1rem 2rem; width: 100%; }
.deck-progress { color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 1rem; font-weight: 600; }
.deck-progress span { color: var(--green-dark); }

.deck-zone { position: relative; width: min(440px, 94vw); height: min(620px, 72dvh); }
.deck-behind {
  position: absolute; inset: 14px 10px auto 10px; height: 96%; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); transform: translateY(14px) scale(.96); opacity: .55; z-index: 0;
}
.deck { position: absolute; inset: 0; z-index: 1; }

.swipe-card {
  position: absolute; inset: 0; background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;
  touch-action: pan-y; will-change: transform; user-select: none;
}
.swipe-card.dragging { transition: none; }
.swipe-card.snap { transition: transform .25s ease; }
.swipe-card.fly { transition: transform .35s ease, opacity .35s ease; }

.card-image {
  position: relative; height: 42%; min-height: 180px; background: linear-gradient(135deg, #3a7a5b, #25503b);
  display: grid; place-items: center; overflow: hidden;
}
.card-image.no-img .c-img { display: none; }
.c-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-initials { display: grid; place-items: center; }
.c-initials svg { width: 78px; height: 78px; color: rgba(255,255,255,.94); filter: drop-shadow(0 3px 10px rgba(0,0,0,.22)); }
.card-image.has-img .c-initials { display: none; }
.score {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: rgba(31,42,36,.55); backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,.6); font-size: 1.05rem;
}
.score.s-haut { background: rgba(47,107,79,.85); }
.score.s-moyen { background: rgba(181,130,31,.85); }
.score.s-bas { background: rgba(120,125,121,.8); }

/* tampons de swipe */
.stamp {
  position: absolute; top: 22px; z-index: 4; font-weight: 800; font-size: 1.3rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .3rem .8rem; border-radius: 10px; border: 3px solid; opacity: 0;
  transform: rotate(-12deg);
}
.stamp-keep { left: 18px; color: var(--green); border-color: var(--green); }
.stamp-skip { right: 18px; color: var(--red); border-color: var(--red); transform: rotate(12deg); }

/* corps */
.card-body { flex: 1; padding: 1rem 1.15rem 1.1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; }
.card-head h2 { font-size: 1.25rem; color: var(--ink); }
.c-lieu { margin: .15rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.badge { font-size: .72rem; padding: .22rem .55rem; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-soft); background: #fff; }
.badge.b-fin { border-color: #ecd6a8; background: #fbf3e1; color: #8a6212; }
.badge.q-vert { border-color: #bfe0cd; background: #eef7f1; color: var(--green-dark); }
.badge.q-orange { border-color: #ecd6a8; background: #fbf3e1; color: #8a6212; }
.badge.q-rouge { border-color: #e7c2b8; background: #f8e9e5; color: var(--red); }
.badge.b-doublon { border-color: #e7c2b8; background: #f8e9e5; color: var(--red); }

.c-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; font-size: .85rem; }
.c-meta dt { color: var(--ink-soft); }
.c-meta dd { margin: 0; word-break: break-word; }
.c-meta a { color: var(--green-dark); word-break: break-all; }
.c-detail summary { cursor: pointer; font-size: .82rem; color: var(--ink-soft); }
.score-detail { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--ink-soft); }
.score-detail b { color: var(--ink); }

.c-mail { border-top: 1px dashed var(--line); padding-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.field-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.c-mail input, .c-mail textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; }
.c-mail textarea { font-size: .85rem; line-height: 1.45; resize: vertical; }
.mail-actions { display: flex; gap: .5rem; }

/* barre d'action */
.action-bar { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap; justify-content: center; }
.act { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .7rem 1rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); transition: transform .1s, background .12s, box-shadow .12s; }
.act:hover { transform: translateY(-1px); }
.act:active { transform: translateY(0); }
.act-ico { font-size: 1.15rem; }
.act-skip { color: var(--red); border-color: #e7c2b8; }
.act-skip:hover { background: #f8e9e5; }
.act-keep { color: #fff; background: var(--green); border-color: var(--green); box-shadow: 0 6px 16px rgba(47,107,79,.3); }
.act-keep:hover { background: var(--green-dark); }
.act-mini { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.act-mini:hover { background: #fff; color: var(--ink); }
.act:disabled { opacity: .5; cursor: progress; transform: none; }

.kbd-hint { font-size: .8rem; margin: .9rem 0 0; text-align: center; }
.muted { color: var(--ink-soft); }
.deck-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .5rem; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.empty-big { font-size: 1.2rem; font-weight: 700; }

/* dialogs */
.dialog { border: none; border-radius: 18px; padding: 1.4rem; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-width: 440px; width: 92vw; }
.dialog-wide { max-width: 760px; }
.dialog::backdrop { background: rgba(31,42,36,.45); }
.dialog h2 { color: var(--green-dark); margin-bottom: .7rem; }
.dialog input, .dialog textarea { width: 100%; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.dialog textarea { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }
.dialog-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }
.hint { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.status { font-size: .85rem; color: var(--ink-soft); min-height: 1.1em; margin: .5rem 0 0; }
.status-err { color: var(--red); }
.btn-primary, .btn-secondary, .btn-ghost { border-radius: 10px; padding: .6rem 1rem; border: 1px solid transparent; font-weight: 600; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary { background: #fff; color: var(--green-dark); border-color: var(--green); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: #f3efe4; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 480px) {
  .tagline { display: none; }
  .act-mini .act-lbl { font-size: .8rem; }
}