/* LCT-Carte — carte 3D (page publique + page de commande)
   Variables attendues : --p --a --ink --font --body --muted */
/* ===== Carte 3D ===== */
.stage{perspective:1100px;padding:26px 6px 8px;touch-action:pan-y}
.card3d{position:relative;width:100%;aspect-ratio:1.586;transform-style:preserve-3d;will-change:transform;cursor:pointer;opacity:0;transition:opacity .8s}
.card3d.ready{opacity:1}
.face{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;color:var(--ink);transform-style:preserve-3d}
.front{background:
   radial-gradient(130% 120% at 0% 0%,color-mix(in srgb,var(--p),#fff 22%) 0%,var(--p) 42%,color-mix(in srgb,var(--p),#000 45%) 100%);
   box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 0 0 1px rgba(255,255,255,.12) inset}
.back{transform:rotateY(180deg);background:linear-gradient(160deg,color-mix(in srgb,var(--p),#000 40%),color-mix(in srgb,var(--p),#000 70%));display:flex;align-items:center;gap:16px;padding:18px 20px;color:#fff}
.shadow{position:absolute;left:8%;right:8%;bottom:-26px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--p),#000 50%);filter:blur(24px);opacity:.75;transform:translateZ(-60px)}
.fin{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 22%,transparent 55%);mix-blend-mode:overlay;opacity:.9}
.finish-holo .front .fin{background:repeating-linear-gradient(115deg,#ff0080 0%,#ffcc00 8%,#33ff99 16%,#00ccff 24%,#9933ff 32%,#ff0080 40%);background-size:300% 300%;background-position:var(--hx,50%) var(--hy,50%);mix-blend-mode:color-dodge;opacity:.22;filter:saturate(1.3)}
.finish-metal .front .fin{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),linear-gradient(105deg,transparent 20%,rgba(255,255,255,.35) calc(var(--hx,50%) - 10%),transparent calc(var(--hx,50%) + 15%));mix-blend-mode:overlay;opacity:.9}
.finish-glass .front{background:linear-gradient(135deg,color-mix(in srgb,var(--p) 55%,transparent),color-mix(in srgb,var(--p) 25%,transparent));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.3)}
.finish-matte .glare{opacity:.35}
.f-in{position:absolute;inset:0;padding:clamp(16px,5vw,24px);display:flex;flex-direction:column;justify-content:space-between;transform:translateZ(30px)}
.f-top{display:flex;justify-content:space-between;align-items:flex-start}
.mono{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font:800 20px var(--font);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);overflow:hidden;backdrop-filter:blur(6px)}
.mono img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff}
.nfc{display:flex;align-items:center;gap:8px;font:600 10px var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.nfc i{transform:rotate(90deg);font-size:18px}
.chip{position:absolute;left:clamp(16px,5vw,24px);top:46%;width:44px;height:33px;border-radius:7px;transform:translateY(-50%);
  background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--a),#000 35%) 60%,var(--a));box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.chip:before{content:"";position:absolute;inset:7px 6px;border:1px solid rgba(0,0,0,.25);border-radius:4px;background:linear-gradient(90deg,transparent 45%,rgba(0,0,0,.2) 45% 55%,transparent 55%)}
.f-name{font:800 clamp(20px,6.4vw,27px)/1.1 var(--font);letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.f-sub{font-size:clamp(11px,3.3vw,13px);opacity:.85;margin-top:5px}
.f-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.f-bar b{display:block;width:52px;height:3px;border-radius:3px;background:var(--a)}
.f-bar span{font-size:10px;letter-spacing:.12em;opacity:.6;text-transform:uppercase}
.qr{flex:0 0 auto;background:#fff;border-radius:14px;padding:9px;width:44%;max-width:150px;aspect-ratio:1;box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateZ(25px)}
.qr canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.back-txt{transform:translateZ(20px);min-width:0}
.back-txt b{display:block;font:700 15px var(--font);margin-bottom:4px}
.back-txt small{display:block;font-size:11.5px;opacity:.75;line-height:1.4;overflow-wrap:anywhere}
.back-txt .brand{margin-top:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.tap-hint{display:flex;justify-content:center;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);margin:22px 0 4px}
.tap-hint i{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}