/* DJASSATOP — interface « relief 3D », mobile d'abord */
:root{--bg:#06140f;--bg2:#0b2219;--card:#10291f;--card2:#163527;--line:#24493a;--txt:#f3f7f4;--mut:#9fb7aa;--gold:#f5b301;--gold2:#ffd76a;--or:#ff7a00;--vert:#16a34a;--red:#ef4444;
--r:18px;--sh:0 1px 0 rgba(255,255,255,.07) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 10px 24px -8px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.4);
--shg:0 1px 0 rgba(255,255,255,.55) inset,0 -3px 0 rgba(120,70,0,.55) inset,0 8px 18px -6px rgba(245,179,1,.55);font-size:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;line-height:1.4}
body{background:radial-gradient(1200px 600px at 50% -200px,#12402f 0%,transparent 70%),var(--bg);min-height:100vh;padding-bottom:84px}
a{color:var(--gold2);text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:.2em 0 .4em;line-height:1.15}
h2{font-size:1.25rem}h3{font-size:1.05rem}
.mut{color:var(--mut)}.small{font-size:.82rem}.center{text-align:center}.row{display:flex;gap:10px;align-items:center}.grow{flex:1}.wrap{flex-wrap:wrap}.hide{display:none!important}
/* En-tête */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(180deg,rgba(6,20,15,.97),rgba(6,20,15,.85));backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.5px;font-size:1.15rem;color:var(--txt)}
.logo img{width:34px;height:34px;border-radius:9px;box-shadow:0 3px 10px rgba(245,179,1,.35)}
.logo b{color:var(--gold);text-shadow:0 2px 0 #7a4b00,0 0 18px rgba(245,179,1,.45)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--card2);box-shadow:var(--sh);font-size:.8rem;font-weight:700;white-space:nowrap}
.pill.live{background:linear-gradient(180deg,#e11d48,#9f1239);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(225,29,72,.18),var(--sh)}}
.bell{position:relative;width:40px;height:40px;border-radius:12px;border:0;background:var(--card2);box-shadow:var(--sh);font-size:1.15rem}
.bell i{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:10px;background:var(--red);color:#fff;font-size:.7rem;font-style:normal;font-weight:800;display:grid;place-items:center;padding:0 4px}
/* Navigation basse */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:space-around;align-items:flex-end;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#04100b,rgba(6,20,15,.93));backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.07)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mut);font-size:.68rem;font-weight:700;padding:4px 0}
.nav a span{font-size:1.35rem;line-height:1}
.nav a.on{color:var(--gold)}
.nav a.sell span{width:54px;height:54px;margin-top:-26px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(160deg,var(--gold2),var(--gold) 45%,var(--or));box-shadow:var(--shg);color:#3a2200;font-size:1.7rem;transform:rotate(-4deg)}
main{max-width:760px;margin:0 auto;padding:12px}
/* Cartes en relief */
.card{background:linear-gradient(165deg,var(--card2),var(--card));border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin:12px 0;border:1px solid rgba(255,255,255,.04)}
.tilt{transform-style:preserve-3d;will-change:transform}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer;background:var(--card2);box-shadow:var(--sh);transition:transform .08s}
.btn:active{transform:translateY(2px) scale(.98)}
.btn.gold{background:linear-gradient(170deg,var(--gold2),var(--gold) 50%,#e08a00);color:#2b1900;box-shadow:var(--shg)}
.btn.vert{background:linear-gradient(170deg,#34d399,var(--vert));color:#03220f}
.btn.red{background:linear-gradient(170deg,#f87171,#b91c1c)}
.btn.ghost{background:transparent;box-shadow:none;border:1px solid var(--line)}
.btn.full{width:100%}.btn.sm{padding:7px 11px;font-size:.85rem;border-radius:11px}
.btn[disabled]{opacity:.5;pointer-events:none}
.badge{display:inline-block;padding:3px 8px;border-radius:8px;font-size:.7rem;font-weight:800;background:var(--card2);color:var(--mut);letter-spacing:.2px}
.badge.live{background:#be123c;color:#fff}.badge.demo{background:#7c3aed;color:#fff}.badge.prog{background:#0e7490;color:#fff}.badge.won{background:var(--gold);color:#2b1900}.badge.off{background:#3f3f46;color:#ddd}.badge.warn{background:#b45309;color:#fff}
/* Scène */
.stage{position:relative;height:min(62vh,430px);margin:-12px -12px 0;overflow:hidden;background:radial-gradient(60% 70% at 50% 40%,#1d4d3a,#06140f 75%)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.stage .ov{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(0deg,rgba(4,14,10,.95) 10%,rgba(4,14,10,0));}
.stage .tag{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.stage .eng{position:absolute;top:10px;right:10px;font-size:.65rem;color:var(--mut);background:rgba(0,0,0,.35);padding:3px 7px;border-radius:8px}
.price{font-weight:900;font-size:2rem;color:var(--gold);text-shadow:0 2px 0 #6b4100,0 0 22px rgba(245,179,1,.4);letter-spacing:-.5px}
.price.sm{font-size:1.15rem;text-shadow:0 1px 0 #6b4100}
.cd{font-variant-numeric:tabular-nums;font-weight:900}
.cd.hot{color:#fb7185;animation:blink .6s infinite}
@keyframes blink{50%{opacity:.55}}
/* Repli 2D : carte en relief CSS 3D */
.flat3d{position:absolute;inset:0;display:grid;place-items:center;perspective:700px}
.flat3d .fc{width:52%;max-width:230px;aspect-ratio:1;border-radius:16px;background:#222 center/cover;border:4px solid var(--gold);box-shadow:0 30px 40px -10px rgba(0,0,0,.8),0 0 40px rgba(245,179,1,.25);animation:spin3d 7s ease-in-out infinite;transform-style:preserve-3d;margin-top:-60px}
@keyframes spin3d{0%,100%{transform:rotateY(-22deg) rotateX(8deg) translateY(0)}50%{transform:rotateY(22deg) rotateX(-4deg) translateY(-10px)}}
.flat3d .pod{position:absolute;bottom:22%;width:60%;height:26px;border-radius:50%;background:radial-gradient(#ffd76a,#a16207 70%);box-shadow:0 0 30px rgba(245,179,1,.5)}
/* Grilles de lots */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}}
.lot{position:relative;display:block;color:var(--txt);border-radius:16px;overflow:hidden;background:linear-gradient(170deg,var(--card2),var(--card));box-shadow:var(--sh)}
.lot .im{aspect-ratio:1;background:#0d1f18 center/cover}
.lot .b{padding:8px 9px 10px}
.lot .t{font-size:.85rem;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.lot .tg{position:absolute;top:7px;left:7px;display:flex;gap:4px;flex-wrap:wrap}
.lot .bar{height:4px;border-radius:3px;background:#0a1a13;overflow:hidden;margin-top:6px}.lot .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--vert),var(--gold),var(--red))}
.lot.flash{animation:flash .9s}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--gold),0 0 30px var(--gold)}100%{box-shadow:var(--sh)}}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.chip{flex:none;padding:8px 12px;border-radius:999px;background:var(--card2);box-shadow:var(--sh);font-size:.82rem;font-weight:700;border:0;white-space:nowrap}
.chip.on{background:var(--gold);color:#2b1900}
/* Formulaires */
label{display:block;font-size:.82rem;font-weight:700;color:var(--mut);margin:12px 0 5px}
.in,select,textarea{width:100%;padding:12px 13px;border-radius:12px;border:1px solid var(--line);background:#081a13;color:var(--txt);box-shadow:inset 0 2px 6px rgba(0,0,0,.45);outline:none;font-size:1rem}
.in:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:110px;resize:vertical}
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.photos .ph{aspect-ratio:1;border-radius:12px;background:#081a13 center/cover;border:1px dashed var(--line);display:grid;place-items:center;font-size:1.6rem;position:relative;cursor:pointer}
.photos .ph b{position:absolute;top:2px;right:4px;font-size:.9rem;cursor:pointer}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:10px 0;scrollbar-width:none}
.tabs button{flex:none;border:0;padding:9px 13px;border-radius:12px;background:var(--card2);box-shadow:var(--sh);font-weight:800;font-size:.85rem}
.tabs button.on{background:var(--gold);color:#2b1900}
/* Page lot */
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 -12px;padding:0 12px;scrollbar-width:none}
.gal img{flex:none;width:88%;max-width:480px;aspect-ratio:1;object-fit:cover;border-radius:18px;scroll-snap-align:center;box-shadow:var(--sh)}
.bidbox{position:sticky;bottom:78px;z-index:20}
.stepper{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.stepper .in{text-align:center;font-weight:900;font-size:1.15rem}
.stepper .btn{min-width:48px;font-size:1.3rem}
.hist{list-style:none;margin:0;padding:0}.hist li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem}
.hist li:first-child{color:var(--gold2);font-weight:800}
.shopc{display:flex;gap:12px;align-items:center}.shopc img{width:56px;height:56px;border-radius:14px;object-fit:cover;box-shadow:var(--sh)}
.stars{color:var(--gold);letter-spacing:1px}
.ticker{overflow:hidden;white-space:nowrap;font-size:.8rem;color:var(--mut);padding:8px 0}
.ticker span{display:inline-block;margin-right:20px}
/* Notifications toast */
#toasts{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:100;width:min(94vw,440px);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:linear-gradient(170deg,#1f4d3b,#12301f);border:1px solid rgba(245,179,1,.35);border-radius:14px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.6);font-size:.9rem}
.toast.err{border-color:#ef4444;background:linear-gradient(170deg,#4c1d1d,#2a1010)}
.toast b{display:block;margin-bottom:2px}
.list .it{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.list .it img{width:54px;height:54px;border-radius:10px;object-fit:cover;flex:none}
.empty{padding:28px 12px;text-align:center;color:var(--mut)}
.skel{background:linear-gradient(90deg,#0f261c 25%,#173a2b 50%,#0f261c 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:14px}
@keyframes sk{to{background-position:-200% 0}}
.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat div{background:#0b2018;border-radius:14px;padding:12px;box-shadow:var(--sh)}.stat b{display:block;font-size:1.4rem;color:var(--gold)}
@media(min-width:620px){.stat{grid-template-columns:repeat(4,1fr)}}
.warnbox{border:1px solid #b45309;background:rgba(180,83,9,.12);border-radius:14px;padding:12px;font-size:.88rem}
.mm{opacity:.75;border:1px dashed var(--gold)}
table{width:100%;border-collapse:collapse;font-size:.85rem}td,th{padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;vertical-align:top}
.switch{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.switch input{width:22px;height:22px;accent-color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.price{white-space:nowrap}
.stage .price{font-size:clamp(1.4rem,7vw,2rem)}
.flat3d .fc{margin-top:-120px;width:44%}
@media(max-width:420px){.logo{font-size:1rem}.logo img{width:30px;height:30px}.pill{font-size:.72rem;padding:5px 8px}.pill .x{display:none}.stage{height:min(66vh,440px)}}
.stage .eng{top:auto;bottom:auto;top:40px}
.list .it .grow{min-width:0}.list .it>b{font-size:.9rem}
.flat3d.over{pointer-events:none}.flat3d.over .fc{margin-top:-150px;width:40%;box-shadow:0 30px 50px -12px rgba(0,0,0,.85),0 0 50px rgba(245,179,1,.35)}
.fc.pop{animation:pop .7s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{0%{transform:scale(1.18) rotateY(0)}100%{transform:scale(1)}}