/* Carte publique + aperçu en direct. Reprend la planche design/designs.html (phase 2). */
:root{
  --creme:#FBF4E9; --encre:#2A1B14; --terracotta:#B8441A; --curcuma:#E9A820; --argile:#F3E3CF;
  --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
  --bounce:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}

/* Page publique : le fond de page est la teinte « surface » du design, la carte est posée dessus. */
body.page{margin:0;min-height:100vh;background:var(--page,var(--creme));color:var(--page-ink,var(--encre));font-family:var(--sans);line-height:1.5}
body.page main{max-width:440px;margin:0 auto;padding:24px 16px 40px}
.missing{text-align:center;padding-top:20vh}
.missing h1{font-family:var(--serif);font-weight:800;font-size:2rem;line-height:1.1}
.missing .btn.primary{display:inline-flex;padding:0 28px;background:var(--terracotta);border-color:var(--terracotta);color:#FFF8F0}

.card{--bg:#FBF4E9;--ink:#2A1B14;--accent:#B8441A;--on:#FFF8F0;--soft:#F3E3CF;--line:rgba(42,27,20,.18);
  background:var(--bg);color:var(--ink);border-radius:28px 10px 28px 10px;padding:28px 22px 20px;
  box-shadow:6px 8px 0 var(--line);animation:arrive .25s var(--bounce);overflow:hidden;position:relative;font-family:var(--sans);line-height:1.5}
@keyframes arrive{from{transform:translateY(10px) scale(.98);opacity:0}}
@media(prefers-reduced-motion:reduce){.card{animation:none}.btn{transition:none}}
.card .photo{display:block;width:104px;height:104px;object-fit:cover;border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;background:var(--soft);
  border:3px solid var(--accent);margin-bottom:18px}
.card .name{font-family:var(--serif);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0 0 6px;font-size:2.9rem;overflow-wrap:anywhere;hyphens:auto}
.card .name.m{font-size:2.2rem}.card .name.l{font-size:1.65rem}
.card .title{font:500 1.02rem var(--sans);margin:0 0 6px}
.card .desc{margin:0 0 18px;font-size:.95rem;opacity:.85;overflow-wrap:anywhere}
.card .btns{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.btn{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);
  background:transparent;color:var(--ink);font:500 1rem var(--sans);text-decoration:none;box-shadow:0 3px 0 var(--line);transition:transform .12s,box-shadow .12s;cursor:pointer}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn i{font:700 .7rem var(--mono);font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex:none}
.btn.primary{background:var(--accent);color:var(--on);border-color:var(--accent);font-weight:700;justify-content:center}
.card .foot{display:flex;justify-content:flex-end;align-items:center;margin-top:8px}
.stamp{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;
  font:800 .66rem var(--serif);transform:rotate(-12deg)}