:root{
  --bg:#F6EDD9; --surface:#FCF6EA; --surface-2:#EFE2CB; --ink:#34170F; --ink-muted:#6E563F;
  --hair:#E2D2B5; --accent:#7E2B26; --accent-deep:#3E1714; --taupe:#C9A089;
  --ok:#5E7741; --low:#A9742A; --off:#9A8568;
  --wa:#7E2B26; --wd:#3E1714;
  --gutter:20px; --radius:11px; --ease:cubic-bezier(.2,.8,.2,1);
  --serif:"Playfair Display",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{font-family:var(--body); background:var(--surface); color:var(--ink); -webkit-font-smoothing:antialiased;}
button,.ecard,.prow,.netopt,.sugchip{touch-action:manipulation;}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* App shell — fills the Telegram viewport (no phone mockup). */
.app{position:relative; display:flex; flex-direction:column; height:100dvh; max-width:480px; margin:0 auto;
  background:var(--surface); overflow:hidden;}
@supports not (height:100dvh){ .app{height:100vh;} }
/* Grain papier subtil (profondeur, anti « couleur unie ») — sous la barre/boutons, non cliquable. */
.app::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:7; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn)'/%3E%3C/svg%3E");}

.tgbar{height:48px; flex:0 0 48px; display:grid; grid-template-columns:46px 1fr 46px; align-items:center; border-bottom:1px solid var(--hair); background:var(--surface); z-index:8;}
.tgbar .tt{text-align:center; font-family:var(--serif); font-size:18px; font-weight:700; color:var(--accent);}
.tgbar .ic{border:0; background:transparent; height:44px; display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; font-size:27px;}
.tg-cart{position:relative; width:46px;} .tg-cart svg{width:21px; height:21px;}
.badge{position:absolute; top:4px; right:5px; min-width:17px; height:17px; padding:0 4px; background:var(--accent); color:#fff; border-radius:9px; font-family:var(--mono); font-size:10.5px; font-weight:600; display:none; align-items:center; justify-content:center;}
.badge.on{display:flex;} .badge.pop{animation:pop .42s var(--ease);}
.screen{flex:1 1 auto; overflow-y:auto; overflow-x:hidden; position:relative; background:var(--bg);}
.screen.has-main{padding-bottom:calc(80px + env(safe-area-inset-bottom));}
.screen.snap{scroll-snap-type:y proximity;}

/* ----- Catalogue en « mondes » ----- */
.world{position:relative; min-height:100%; scroll-snap-align:start; display:flex; flex-direction:column; background:radial-gradient(125% 68% at 50% 0%,#FBF3E2 0%,var(--bg) 58%); border-bottom:1px solid var(--hair); overflow:hidden;}
.world .wghost{position:absolute; top:6px; right:-6px; font-family:var(--serif); font-weight:900; font-size:188px; line-height:.7; color:var(--wa); opacity:.17; pointer-events:none; will-change:transform; letter-spacing:-.04em;}
.whead{position:sticky; top:0; z-index:6; padding:22px var(--gutter) 0; background:linear-gradient(180deg,var(--bg) 78%,rgba(246,237,217,0)); transition:box-shadow .2s;}
.whead.stuck{box-shadow:0 10px 18px -14px rgba(52,23,18,.5);}
.wkicker{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--wa);}
.whrow{display:flex; align-items:flex-start; gap:12px; margin-top:7px;}
.wnum{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--wa); padding-top:9px;}
.wtitle{font-family:var(--serif); font-style:italic; font-weight:700; font-size:33px; line-height:1.0; letter-spacing:-.015em; color:var(--ink); margin:0;}
.wmeta{font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; margin:9px 0 0 26px;}
.wrule{height:3px; margin:13px var(--gutter) 0; background:repeating-linear-gradient(90deg,var(--wa),var(--wa) 7px,transparent 7px,transparent 11px);}
.wbody{flex:1; padding:16px var(--gutter) 26px; position:relative; z-index:2;}

/* Liste de monde — rendu NORMALISÉ (1 à N cartes, même à 1 produit) */
.elist{display:flex; flex-direction:column; gap:12px;}
.ecard{display:flex; align-items:stretch; gap:13px; border:1px solid var(--hair); border-left:4px solid var(--wa); border-radius:var(--radius); background:var(--surface); padding:12px; cursor:pointer; position:relative; transition:transform .12s var(--ease);}
.ecard:active{transform:scale(.985);}
.ecard .ethumb{flex:0 0 56px; width:56px; height:70px;}
.ecard .einfo{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.ecard .ename{font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.1; color:var(--ink);}
.ecard .emeta{display:flex; align-items:center; gap:11px; margin-top:8px; flex-wrap:wrap;}
.ecard .eprice{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--ink);} .ecard .eprice .cur{font-weight:500; font-size:11px; color:var(--ink-muted);}
.ecard .eidx{position:absolute; top:10px; right:12px; font-family:var(--mono); font-size:10px; color:var(--wa); opacity:.7;}
.ecard .addb{align-self:center;}

.scrollcue{display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 0 18px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);}
.scrollcue .ar{animation:bob 1.8s var(--ease) infinite;}

/* Rail de navigation des mondes */
.rail{position:absolute; right:7px; top:50%; transform:translateY(-50%); z-index:9; display:flex; flex-direction:column; gap:9px; align-items:center;}
.rail button{border:0; background:transparent; cursor:pointer; font-family:var(--mono); font-size:9px; font-weight:600; color:var(--ink-muted); opacity:.5; width:22px; height:22px; display:flex; align-items:center; justify-content:center; transition:opacity .18s,color .18s,transform .18s;}
.rail button.on{opacity:1; color:var(--wa); transform:scale(1.18);}
.rail .dotnav{width:7px; height:7px; border-radius:50%; background:currentColor;}

.mast{position:relative; padding:26px var(--gutter) 16px; overflow:hidden; background:var(--surface);}
.mast .ghost{position:absolute; top:-40px; right:-34px; width:172px; height:172px; opacity:.06; color:var(--accent); will-change:transform;}
.mast .row{display:flex; align-items:center; gap:12px;}
.cross{flex:0 0 auto; border-radius:7px;}
.wm{font-family:var(--serif); font-size:30px; font-weight:800; line-height:.92; letter-spacing:-.01em; color:var(--accent);}
.sub{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); margin:13px 0 0 2px;}
.rule{height:2px; background:repeating-linear-gradient(90deg,var(--accent),var(--accent) 6px,transparent 6px,transparent 10px);}
.introlede{font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.35; color:var(--ink); padding:18px var(--gutter) 4px; background:var(--bg);}
.introlede b{font-style:normal; font-weight:700;}

.trust{display:flex; gap:7px; padding:13px var(--gutter); overflow-x:auto; background:var(--bg); scrollbar-width:none;}
.trust::-webkit-scrollbar{display:none;}
.tchip{flex:0 0 auto; font-family:var(--mono); font-size:10px; color:var(--ink); background:var(--surface); border:1px solid var(--hair); border-radius:6px; padding:6px 9px; white-space:nowrap; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.03em;}
.tchip::before{content:""; width:4px; height:4px; background:var(--accent);}

/* Recherche restylée + suggestions */
.search{padding:10px var(--gutter) 6px; background:var(--bg);}
.search .b{position:relative;}
.search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-muted); transition:color .14s;}
.search .b:focus-within svg{color:var(--accent);}
.search input{width:100%; height:48px; border:1px solid var(--hair); border-radius:13px; background:var(--surface); padding:0 14px 0 40px; font-family:var(--body); font-size:16px; color:var(--ink); outline:none; transition:border-color .14s,box-shadow .14s;}
.search input::placeholder{color:var(--ink-muted); opacity:.8;}
.search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(126,43,38,.10);}
.sugwrap{max-height:0; overflow:hidden; transition:max-height .28s var(--ease);}
.sugwrap.open{max-height:130px;}
.sugbar{display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 4px;}
.suglabel{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); width:100%; margin-bottom:2px;}
.sugchip{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--accent); background:var(--surface); border:1px solid var(--hair); border-radius:20px; padding:9px 14px; cursor:pointer; transition:background .14s,border-color .14s,color .14s;}
.sugchip:active{background:var(--accent); color:#fff; border-color:var(--accent);}

.lab{position:sticky; top:0; z-index:6; display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px var(--gutter) 11px; background:var(--surface); border-bottom:1px solid var(--hair);}
.lab .lt{font-family:var(--serif); font-style:italic; font-size:19px; font-weight:600; color:var(--ink);}
.lab .lc{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.06em; color:var(--ink-muted); text-transform:uppercase;}

/* Image slot (placeholder pour image générée en externe) */
.imgslot{position:relative; background:linear-gradient(158deg,#FFFDF6,var(--bg)); border:1px solid var(--hair); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.imgslot .sil{color:var(--wd); opacity:.18;}
.imgslot::after{content:""; position:absolute; inset:6px; border:1px solid var(--hair); border-radius:7px; opacity:.5; pointer-events:none;}
.imgslot .cap{position:absolute; bottom:6px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:7.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); opacity:.65;}

.prow{display:flex; align-items:center; gap:13px; padding:15px var(--gutter); border-bottom:1px solid var(--hair); background:var(--surface);}
.prow .pthumb{flex:0 0 42px; width:42px; height:52px;}
.prow-main{flex:1; min-width:0; cursor:pointer;}
.prow-main:active .pn{color:var(--accent);}
.pn{font-family:var(--serif); font-size:16.5px; font-weight:600; line-height:1.14; color:var(--ink);}
.pmeta{font-family:var(--mono); font-size:11px; color:var(--ink-muted); margin-top:5px; display:flex; gap:9px; align-items:center; flex-wrap:wrap;}
.stk{display:flex; align-items:center; gap:5px;} .dot{width:7px; height:7px; border-radius:50%;}
.dot.ok{background:var(--ok);} .dot.low{background:var(--low);} .dot.off{background:var(--off);}
.pprice{font-family:var(--mono); font-size:15.5px; font-weight:700; color:var(--ink);} .pprice .cur{font-weight:500; font-size:11px; color:var(--ink-muted);}
.add{flex:0 0 44px; width:44px; height:44px; border:0; border-radius:11px; background:var(--wa); color:#fff; font-size:23px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .12s var(--ease),background .14s;}
.add:active{background:var(--wd); transform:scale(.9);} .add.added{background:var(--wd);}
.add.is-off{background:var(--surface-2); color:var(--off); font-family:var(--mono); font-size:10px; font-weight:600; width:auto; padding:0 11px; cursor:default;}
.addb{width:44px; height:44px; border:0; border-radius:11px; background:var(--wa); color:#fff; font-size:21px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 44px;}
.addb:active{background:var(--wd); transform:scale(.92);} .addb.added{background:var(--wd);}

.detail{background:var(--surface);}
.vstage{position:relative; padding:22px 0 6px; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 80% at 50% 30%,#FFFDF6 0%,var(--bg) 72%); border-bottom:1px solid var(--hair);}
.hero-img{width:158px; height:198px;}
.dwrap{padding:18px var(--gutter) 24px;}
.dfam{font-family:var(--mono); font-size:11px; color:var(--wa); text-transform:uppercase; letter-spacing:.08em;}
.detail h1{font-family:var(--serif); font-size:27px; font-weight:700; line-height:1.05; letter-spacing:-.01em; margin:5px 0 6px;}
.dprice{font-family:var(--mono); font-size:26px; font-weight:600; margin:18px 0 2px; color:var(--ink);}
.dprice .cur{font-size:13px;}
.dstk{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--ink-muted); margin-bottom:18px;}
.spec{border-top:1px solid var(--hair); margin-bottom:20px;}
.spec .r{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair);}
.spec .k{font-family:var(--mono); font-size:11px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em;}
.spec .v{font-family:var(--body); font-size:13.5px; font-weight:600; text-align:right; color:var(--ink);}
.qtyrow{display:flex; align-items:center; justify-content:space-between; padding:2px 0 18px;}
.qtyrow .l{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);}
.stepper{display:inline-flex; align-items:center; border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.stepper button{width:46px; height:46px; border:0; background:transparent; font-size:21px; color:var(--ink); cursor:pointer;}
.stepper button:active{background:var(--bg);} .stepper .v{width:46px; text-align:center; font-family:var(--mono); font-size:16px; font-weight:600;}
.btn-primary{width:100%; height:54px; border:0; border-radius:var(--radius); background:var(--wa); color:#fff; font-family:var(--body); font-size:15.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s var(--ease),background .14s;}
.btn-primary:active{background:var(--wd); transform:scale(.99);} .btn-primary .pm{font-family:var(--mono);}
.btn-primary[disabled]{background:var(--surface-2); color:var(--off); cursor:default;}
.btn-ghost{width:100%; height:46px; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); font-family:var(--body); font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer; margin-top:10px;}

.crow{display:flex; gap:13px; padding:16px var(--gutter); border-bottom:1px solid var(--hair); align-items:flex-start; background:var(--surface);}
.crow .pthumb{flex:0 0 36px; width:36px; height:46px; margin-top:2px;}
.crow .ci{flex:1; min-width:0;} .crow .cn{font-family:var(--serif); font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.1;}
.crow .cm{font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); margin-top:4px;}
.crow .cr{display:flex; flex-direction:column; align-items:flex-end; gap:8px;} .crow .clt{font-family:var(--mono); font-size:14.5px; font-weight:600;}
.ministep{display:inline-flex; align-items:center; border:1px solid var(--hair); border-radius:8px; overflow:hidden; margin-top:9px; background:var(--surface);}
.ministep button{width:40px; height:40px; border:0; background:transparent; font-size:17px; cursor:pointer; color:var(--ink);} .ministep .v{width:32px; text-align:center; font-family:var(--mono); font-size:13px; font-weight:600;}
.rm{border:0; background:transparent; color:var(--ink-muted); font-family:var(--mono); font-size:11px; cursor:pointer; padding:8px 2px; text-transform:uppercase; letter-spacing:.04em;}
.suggest{margin:16px var(--gutter); border:1px dashed #cdbb98; border-radius:var(--radius); padding:14px; background:var(--bg);}
.suggest .sl{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);}
.suggest .si{display:flex; align-items:center; gap:12px; margin-top:10px;} .suggest .sn{font-family:var(--serif); font-size:15px; font-weight:600;} .suggest .sm{font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); margin-top:2px;}
.summary{padding:18px var(--gutter) 6px; background:var(--surface);}
.summary .sr{display:flex; justify-content:space-between; font-family:var(--mono); font-size:13px; padding:8px 0; color:var(--ink-muted);}
.summary .sr .v{color:var(--ink); font-weight:600;}
.summary .sr.t{border-top:1px solid var(--hair); margin-top:6px; padding-top:14px;} .summary .sr.t .tt{font-family:var(--serif); font-size:18px; font-weight:700; color:var(--ink);} .summary .free{color:var(--ok); font-weight:600;}

/* Checkout */
.steps{display:flex; align-items:center; gap:7px; padding:13px var(--gutter); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); overflow-x:auto; background:var(--surface); border-bottom:1px solid var(--hair); scrollbar-width:none;}
.steps::-webkit-scrollbar{display:none;}
.step{white-space:nowrap;} .step.on{color:var(--accent); font-weight:600;} .step.done{color:var(--ink);} .sep{opacity:.4;}
.pageh{display:flex; align-items:baseline; gap:13px; padding:20px var(--gutter) 8px; background:var(--surface);}
.pnum{font-family:var(--serif); font-size:42px; font-weight:800; color:var(--accent); line-height:.75;}
.pageh h2{font-family:var(--serif); font-size:24px; font-weight:700; margin:0; color:var(--ink);}
.savedcard{margin:8px var(--gutter) 0; border:1px solid var(--accent); border-radius:var(--radius); padding:13px 14px; background:#FBEEE9; display:flex; gap:11px; align-items:flex-start;}
.savedcard .rad{width:18px; height:18px; border-radius:50%; border:5px solid var(--accent); flex:0 0 18px; margin-top:2px;}
.savedcard .t{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:5px;}
.savedcard .v{font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--ink);}
.fiche{padding:8px var(--gutter) 16px; background:var(--surface);}
.field{padding:13px 0; border-bottom:1px solid var(--hair);}
.field label{display:block; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); margin-bottom:6px;}
.field input{width:100%; border:0; background:transparent; font-family:var(--serif); font-size:17px; color:var(--ink); outline:none;}
.doc{margin:10px var(--gutter); border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); overflow:hidden;}
.doc .dh{display:flex; justify-content:space-between; padding:13px 15px; border-bottom:1px dashed var(--hair); font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em;}
.doc .di{display:flex; justify-content:space-between; gap:10px; padding:11px 15px; border-bottom:1px solid var(--hair);}
.doc .di .dn{font-family:var(--serif); font-size:14.5px; font-weight:600;} .doc .di .dq{font-family:var(--mono); font-size:11px; color:var(--ink-muted); margin-top:2px;}
.doc .di .dp{font-family:var(--mono); font-size:13.5px; font-weight:600; white-space:nowrap;}
.doc .dadd{padding:13px 15px; border-bottom:1px solid var(--hair); font-family:var(--body); font-size:12.5px; line-height:1.5; color:var(--ink);}
.doc .dadd .k{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); margin-bottom:4px;}
.doc .dt{display:flex; justify-content:space-between; padding:13px 15px; font-family:var(--serif); font-size:17px; font-weight:700;}
.doc .dt .m{font-family:var(--mono);}

.paybanner{margin:8px var(--gutter) 0; background:var(--accent-deep); color:#F4E3D6; border-radius:9px; padding:9px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; line-height:1.5; display:flex; gap:8px; align-items:flex-start;}
.paybanner b{color:#fff;}
.payamt{text-align:center; padding:10px var(--gutter) 4px;}
.payamt .a{font-family:var(--serif); font-size:34px; font-weight:800; color:var(--ink);}
.payamt .a .c{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink-muted);}
/* Sélection du réseau AVANT génération de facture */
.netsec{padding:6px var(--gutter) 0;}
.netsec-h{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); padding:12px 0 8px;}
.netpick{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.netopt{display:flex; align-items:center; gap:12px; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); padding:14px; cursor:pointer; transition:border-color .14s,background .14s;}
.netopt.on{border-color:var(--accent); background:#FBEEE9;}
.netopt .rad{width:18px; height:18px; border-radius:50%; border:2px solid var(--taupe); flex:0 0 18px; transition:border .14s;}
.netopt.on .rad{border:5px solid var(--accent);}
.netopt .no-n{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink);}
.netopt .no-d{font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); margin-top:3px;}
.netbadge{display:flex; align-items:center; justify-content:space-between; margin:8px var(--gutter) 0; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--accent); border:1px solid var(--hair); border-radius:var(--radius); padding:11px 14px; background:var(--surface);}
.netbadge .nb-l{display:flex; align-items:center; gap:8px;} .netbadge .nb-l span{width:7px; height:7px; border-radius:50%; background:var(--accent);}
.netchange{border:0; background:transparent; color:var(--ink-muted); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; text-decoration:underline; padding:8px 4px;}
.payclock{text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-muted); margin:12px 0 6px;}
.payclock b{color:var(--accent);}
.qrwrap{display:flex; justify-content:center; padding:8px 0 4px;}
.qrbox{padding:12px; background:#FCF6EA; border:1px solid var(--hair); border-radius:12px; box-shadow:0 8px 20px -12px rgba(52,23,18,.4);}
.addrblk{margin:12px var(--gutter) 0; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); padding:13px;}
.addrblk .k{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); display:flex; justify-content:space-between; align-items:center;}
.addrblk .a{font-family:var(--mono); font-size:12.5px; color:var(--ink); word-break:break-all; line-height:1.6; margin-top:8px;}
.copy{border:1px solid var(--hair); background:var(--bg); color:var(--accent); font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:9px 12px; border-radius:6px; cursor:pointer;}
.paystatus{display:flex; align-items:center; gap:9px; justify-content:center; margin:16px var(--gutter) 0; font-family:var(--mono); font-size:12px; color:var(--ink-muted);}
.pulse{width:9px; height:9px; border-radius:50%; background:var(--low); animation:pulse 1.6s infinite;}
.paynote2{text-align:center; font-family:var(--mono); font-size:10px; color:var(--ink-muted); padding:8px var(--gutter) 0; line-height:1.5;}

.empty{padding:80px var(--gutter); text-align:center;}
.empty .eh{font-family:var(--serif); font-size:20px; font-weight:700; margin-bottom:8px;} .empty .es{font-family:var(--mono); font-size:12px; color:var(--ink-muted); margin-bottom:24px;}
.vsmall{color:var(--wd);} .vsmall .cap{fill:var(--wa);}
.foot{font-family:var(--mono); font-size:10px; line-height:1.6; color:var(--ink-muted); padding:20px var(--gutter) 30px; border-top:1px solid var(--hair); background:var(--surface);}
.main-btn{position:absolute; left:var(--gutter); right:var(--gutter); bottom:calc(14px + env(safe-area-inset-bottom)); height:52px; border:0; border-radius:var(--radius); background:var(--accent); color:#fff; font-family:var(--body); font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:0 18px; transform:translateY(150%); opacity:0; transition:transform .3s var(--ease),opacity .2s,background .14s; box-shadow:0 10px 26px rgba(62,23,20,.32); z-index:9;}
.main-btn.on{transform:translateY(0); opacity:1;} .main-btn:active{background:var(--accent-deep);} .main-btn .mr{font-family:var(--mono);}
.toast{position:absolute; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(10px); background:var(--ink); color:#FCF6EA; font-family:var(--body); font-size:13px; font-weight:600; padding:11px 17px; border-radius:24px; opacity:0; pointer-events:none; transition:opacity .16s,transform .16s var(--ease); white-space:nowrap; max-width:90%; z-index:10;}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
/* Toast actionnable d'ajout : pill cliquable « confirmation + Voir le panier ».
   Interactif uniquement en .act (les toasts passifs restent pointer-events:none).
   Cible tactile ≥44px (a11y). */
.toast.act{display:flex; align-items:center; gap:12px; pointer-events:auto; padding:6px 6px 6px 16px; min-height:44px; white-space:normal;}
.toast.act .tmsg{flex:0 1 auto;}
.toast .ta{flex:0 0 auto; min-height:44px; min-width:44px; padding:0 16px; border:0; border-radius:20px; background:var(--accent); color:#fff; font-family:var(--body); font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; transition:background .14s;}
.toast .ta:active{background:color-mix(in srgb, var(--accent) 82%, #000);}

/* Boutons UNIFORMISÉS en bordeaux + interactivité (survol = +clair, appui = +foncé).
   color-mix dérive les teintes depuis --accent ; repli statique si non supporté.
   Le --wa par famille ne tinte plus les boutons (réservé au filigrane / liseré / rail). */
.add,.addb,.btn-primary{background:var(--accent);}
.add.added,.addb.added{background:var(--accent-deep);}
@media (hover:hover){
  .btn-primary:hover,.add:hover,.addb:hover,.main-btn:hover,.toast .ta:hover{background:color-mix(in srgb, var(--accent) 88%, #fff);}
  .sugchip:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
  .btn-ghost:hover,.copy:hover{background:var(--surface-2);}
  .netchange:hover{color:var(--accent);}
  .netopt:hover{border-color:var(--accent);}
}
.btn-primary:active,.add:active,.addb:active,.main-btn:active{background:var(--accent-deep);}
.btn-primary:active,.add:active,.addb:active,.main-btn:active{background:color-mix(in srgb, var(--accent) 82%, #000);}
.btn-primary:active{transform:scale(.985);} .add:active{transform:scale(.9);} .addb:active{transform:scale(.92);}
.sugchip:active{background:color-mix(in srgb, var(--accent) 82%, #000); color:#fff; border-color:transparent;}

/* Transitions d'écran (avant = monte, retour = descend) */
@keyframes scrFwd{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:none;}}
@keyframes scrBack{from{opacity:0; transform:translateY(-14px);}to{opacity:1; transform:none;}}
.scr-fwd{animation:scrFwd .2s var(--ease);}
.scr-back{animation:scrBack .2s var(--ease);}
/* Skeleton de chargement (crème shimmer) */
.skelwrap{padding:18px var(--gutter);}
.skel{background:linear-gradient(100deg,var(--surface-2) 28%,#F3E9CF 50%,var(--surface-2) 72%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skel-title{height:28px; width:55%; margin:10px 0 16px;}
.skelcard{display:flex; gap:13px; align-items:center; padding:12px; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); margin-bottom:12px;}
.skel-thumb{width:56px; height:70px; flex:0 0 56px;}
.skel-info{flex:1;} .skel-line{height:14px; margin:7px 0;} .skel-line.w70{width:70%;} .skel-line.w40{width:40%;}
@keyframes pop{0%{transform:scale(1);}40%{transform:scale(1.4);}100%{transform:scale(1);}}
@keyframes pulse{0%,100%{opacity:.4; transform:scale(.85);}50%{opacity:1; transform:scale(1.1);}}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease) var(--d,0ms),transform .55s var(--ease) var(--d,0ms);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important; transform:none!important; transition:none!important;} .main-btn{transition:none;} .mast .ghost,.world .wghost{transform:none!important;} .scrollcue .ar{animation:none;} .screen.snap{scroll-snap-type:none;} .scr-fwd,.scr-back,.skel{animation:none!important;}}