/* Carte de visite numérique — base commune (CroisierWeb, offre Starter) */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 16px/1.5 var(--font); color: var(--fg); background: var(--bg); overflow-x: hidden; }
a { color: inherit; }
.stage { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 16px 30px; position: relative; overflow: hidden; }
.hint { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; position: relative; }
.card-wrap { --rx: 0deg; --ry: 0deg; width: min(560px, 100%); aspect-ratio: 85 / 55; perspective: 1400px; position: relative; }
.card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .8s cubic-bezier(.2, .8, .2, 1); cursor: pointer; border-radius: var(--radius); }
.card.is-flipped { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .08); }
.face--back { transform: rotateY(180deg); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; position: relative; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--btn-radius, 999px); border: 1.5px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-fg); font: 600 .9rem var(--font); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); border-color: var(--btn-hover-bg); }
.btn--main { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn svg { width: 18px; height: 18px; }
.btn.is-done { border-color: #3c9a5f; }
.foot { margin: 0; font-size: .78rem; opacity: .65; text-align: center; position: relative; }
.foot a { text-underline-offset: 3px; }
.foot .mk-credit { margin-left: 10px; }
@media (max-width: 520px) {
  .card-wrap { aspect-ratio: 55 / 85; width: min(330px, 100%); }
  .actions .btn { flex: 1 1 calc(50% - 10px); }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
/* Page légale */
.legal-page { padding: 24px 16px 40px; }
.legal-back { max-width: 760px; margin: 0 auto 10px; }
.legal-back a { font-weight: 600; text-decoration: none; }
.legal-page .mk-legal { max-width: 760px; margin: 0 auto 30px; background: var(--paper, #fff); color: var(--paper-fg, #1d1d1f); padding: clamp(20px, 4vw, 44px); border-radius: 14px; }
.legal-page .mk-legal a { color: var(--accent-ink, var(--accent)); }
.legal-page .foot { max-width: 760px; margin: 0 auto; }
@media (max-width: 520px) {
  .actions .btn { padding: 0 12px; white-space: nowrap; }
  .actions .btn--main { order: -1; flex-basis: 100%; }
  .actions #vcard { flex-basis: 100%; }
}