/* Base */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;color-scheme:light}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:14px}
img{max-width:100%}

/* Joutia : feuille de style. Mobile d'abord. Sticky top bar with search; photo-first item feed (2 columns phone, up to 5 desktop); bottom tab bar on phone; item, checkout, sell, inbox and profile views swapped in place. */
:root{
  --bg:#ffffff; --bg2:#f4f6f3; --surface:#ffffff; --ink:#16193a; --muted:#5b6360; --line:#e3e7e4;
  --accent:#17765c; --accent-ink:#ffffff; --accent-soft:#e2f2eb; --saffron:#f2b632; --saffron-ink:#1d1600;
  --ok:#17765c; --warn:#9a6200; --bad:#c4314b;
  --f-display:"Reem Kufi","Trebuchet MS",sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"Tajawal","Reem Kufi",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1124; --bg2:#151831; --surface:#181b35; --ink:#eceefb; --muted:#a6abc6; --line:#2c3052;
  --accent:#4cc59c; --accent-ink:#0b1f18; --accent-soft:#16362d; --saffron:#f5c451; --saffron-ink:#1d1600;
  --ok:#4cc59c; --warn:#f0b54a; --bad:#ff7a8f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1124; --bg2:#151831; --surface:#181b35; --ink:#eceefb; --muted:#a6abc6; --line:#2c3052;
  --accent:#4cc59c; --accent-ink:#0b1f18; --accent-soft:#16362d; --saffron:#f5c451; --saffron-ink:#1d1600;
  --ok:#4cc59c; --warn:#f0b54a; --bad:#ff7a8f; color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
[dir="rtl"] body,[dir="rtl"] button,[dir="rtl"] input,[dir="rtl"] select,[dir="rtl"] textarea{font-family:var(--f-ar)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0;font-weight:800}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
svg.i{width:20px;height:20px;flex:none}
.field{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:11px 12px;min-width:0;width:100%}
.btn{border:0;border-radius:10px;padding:12px 18px;font-weight:700;background:var(--accent);color:var(--accent-ink);display:inline-flex;gap:8px;align-items:center;justify-content:center}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn.plain{background:var(--bg2);color:var(--ink)}
.btn.gold{background:var(--saffron);color:var(--saffron-ink)}
.btn.small{padding:7px 12px;font-size:13px;border-radius:8px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;color:var(--accent);font-weight:700;padding:4px 0}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;background:var(--bg2);color:var(--muted)}
.pill.ok{background:var(--accent-soft);color:var(--ok)}
.pill.gold{background:var(--saffron);color:var(--saffron-ink)}

/* top bar */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;padding-block:10px}
.logo{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--ink);flex:none}
.logo .mark{width:26px;height:30px}
.logo b{font-family:var(--f-display);font-size:25px;line-height:1;font-weight:700}
.sbox{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg2);border-radius:10px;padding:0 12px;min-width:0}
.sbox input{border:0;background:transparent;padding:10px 0;width:100%;min-width:0}
.sbox input:focus{outline:none}
.sbox:focus-within{outline:2px solid var(--accent)}
.topnav{display:flex;gap:4px;align-items:center}
.topnav .ib{background:none;border:0;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--muted);position:relative}
.topnav .ib[aria-current="page"]{color:var(--accent)}
.dot{position:absolute;top:3px;inset-inline-end:3px;min-width:17px;height:17px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 4px;font-weight:700}
.lang{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 11px;font-weight:700;font-size:13px}
.cats{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;font-weight:600;color:var(--muted)}
.cats button[aria-current="true"]{color:var(--ink);border-color:var(--ink)}
nav.tabs{display:none}
@media (max-width:820px){
  .topnav .dk{display:none}
  .logo b{font-size:22px}
  nav.tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  nav.tabs button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--muted);padding:4px;position:relative}
  nav.tabs button[aria-current="page"]{color:var(--accent)}
  main{padding-bottom:84px}
}

/* home */
.promo{background:var(--accent);color:#fff;border-radius:18px;margin-top:16px;padding:26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;position:relative;overflow:hidden}
.promo .pattern{position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23fff'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");background-size:56px 56px;pointer-events:none}
.promo h1{font-size:clamp(24px,3.6vw,38px);max-width:18ch;color:#fff;position:relative}
.promo p{margin:8px 0 16px;color:#e3f3ec;max-width:46ch;position:relative}
.promo .row{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.promo .btn{background:#fff;color:#0f4d3c}
.promo .btn.out{background:transparent;border:1px solid #fff;color:#fff}
.promo .stack{display:grid;grid-template-columns:repeat(3,92px);gap:8px;position:relative}
.promo .stack div{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#fff}
.promo .stack div:nth-child(2){transform:translateY(-12px)}
@media (max-width:700px){.promo{grid-template-columns:1fr}.promo .stack{display:none}}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-block:18px 4px}
@media (max-width:700px){.how{grid-template-columns:1fr}}
.how>div{display:flex;gap:12px;align-items:flex-start;background:var(--bg2);border-radius:14px;padding:14px}
.how svg{width:26px;height:26px;color:var(--accent)}
.how b{display:block}
.how span{font-size:13px;color:var(--muted)}
section.block{padding-block:22px 4px;display:grid;gap:14px}
.shead{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.shead h2{font-size:21px}
.subcats{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.subcats::-webkit-scrollbar{display:none}
.subcats button{flex:none;width:104px;border:0;background:none;padding:0;display:grid;gap:6px;text-align:center;font-size:13px;font-weight:600}
.subcats button div{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--bg2)}
.subcats svg{display:block;width:100%;height:100%}

/* feed */
.feed{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 14px}
@media (max-width:1100px){.feed{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){.feed{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}}
.item{display:grid;gap:6px;min-width:0;cursor:pointer;background:none;border:0;padding:0;text-align:start}
.seltop{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);min-width:0}
.seltop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex:none}
.ph{aspect-ratio:3/4;border-radius:10px;overflow:hidden;position:relative;background:var(--bg2);max-width:100%}
.ph svg.art,.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph .like{position:absolute;bottom:8px;inset-inline-end:8px;border:0;border-radius:999px;background:var(--surface);color:var(--muted);display:flex;align-items:center;gap:3px;padding:4px 8px;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ph .like.on{color:#d6334f}
.ph .like svg{width:15px;height:15px}
.ph .tag{position:absolute;top:8px;inset-inline-start:8px;background:var(--surface);color:var(--ink);border-radius:6px;padding:2px 7px;font-size:11px;font-weight:700}
.ph .tag.sold{background:var(--ink);color:var(--bg)}
.ph .ill{position:absolute;top:8px;inset-inline-end:8px;font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);border-radius:4px;padding:1px 5px}
.imeta{display:grid;gap:0;min-width:0;font-size:13px}
.imeta .p{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.imeta .pp{color:var(--accent);font-weight:600;font-size:12px;display:flex;gap:3px;align-items:center}
.imeta .pp svg{width:13px;height:13px}
.imeta span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* search */
.fchips{display:flex;gap:8px;overflow-x:auto;padding-block:14px 6px;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 12px;font-weight:600;font-size:14px}
.fchip.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.fchip select{border:0;background:transparent;font-weight:600;padding:0;max-width:150px}
.fchip.on select{color:var(--bg)}
.fchip.on select option{color:var(--ink);background:var(--bg)}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:8px 14px;flex-wrap:wrap}
.rhead b{font-size:17px}
.empty{grid-column:1/-1;text-align:center;padding:50px 16px;color:var(--muted);background:var(--bg2);border-radius:14px}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}

/* item page */
.back{background:none;border:0;display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-weight:600;padding:14px 0 8px}
[dir="rtl"] .back svg,[dir="rtl"] .gnav svg,[dir="rtl"] .chev{transform:scaleX(-1)}
.ilayout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;padding-bottom:40px;align-items:start}
@media (max-width:900px){.ilayout{grid-template-columns:1fr;gap:18px}}
.gal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.gal .g{aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--bg2);border:0;padding:0}
.gal .g:first-child{grid-row:span 2;aspect-ratio:auto}
.gal svg,.gal img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;scrollbar-width:none}.gal::-webkit-scrollbar{display:none}.gal .g{flex:none;width:86%;scroll-snap-align:start}.gal .g:first-child{aspect-ratio:3/4}}
.side{display:grid;gap:14px;position:sticky;top:calc(118px + env(safe-area-inset-top,0px))}
@media (max-width:900px){.side{position:static}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px}
.ititle{font-size:22px;font-weight:700}
.iprice{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.prot{display:flex;gap:6px;align-items:center;color:var(--accent);font-weight:600;font-size:14px;background:none;border:0;padding:0;text-align:start}
.prot svg{width:17px;height:17px}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:14px;margin:0}
.dl dt{color:var(--muted)}
.dl dd{margin:0;font-weight:600;text-align:end}
.desc{white-space:pre-wrap;margin:0}
.seller{display:flex;gap:12px;align-items:center;background:none;border:0;padding:0;text-align:start;width:100%}
.seller .av{width:46px;height:46px;font-size:18px}
.stars{color:var(--saffron);letter-spacing:1px}
.ver{display:inline-flex;gap:3px;align-items:center;color:var(--ok);font-size:13px;font-weight:600}
.ver svg{width:15px;height:15px}
.notice{display:flex;gap:10px;background:var(--accent-soft);border-radius:12px;padding:12px;font-size:13px}
.notice svg{width:22px;height:22px;color:var(--accent);flex:none}
.stickybuy{display:none}
@media (max-width:900px){.stickybuy{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:25;background:var(--bg);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}.stickybuy .btn{flex:1}.ipage{padding-bottom:70px}}

/* checkout + forms */
.narrow{max-width:720px;margin:0 auto;padding-block:16px 50px;display:grid;gap:16px}
.narrow h1{font-size:24px}
.opt{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);text-align:start;width:100%}
.opt[aria-pressed="true"]{border-color:var(--accent)}
.opt div{flex:1;display:grid;min-width:0}
.opt small{color:var(--muted);font-size:13px}
.opt b.r{white-space:nowrap}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center}
.opt[aria-pressed="true"] .radio{border-color:var(--accent)}
.opt[aria-pressed="true"] .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.opts{display:grid;gap:8px}
.sum{display:grid;gap:8px;font-size:15px}
.sum div{display:flex;justify-content:space-between;gap:10px}
.sum .tot{border-top:1px solid var(--line);padding-top:10px;font-weight:800;font-size:18px}
.mini{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.mini .ph{border-radius:8px}
label.l{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
label.l .field{color:var(--ink);font-weight:400}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.two{grid-template-columns:1fr}}
.err{color:var(--bad);font-size:14px;font-weight:600;min-height:1.2em}
.note{font-size:12px;color:var(--muted)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.photos .slot{aspect-ratio:3/4;border-radius:10px;overflow:hidden;position:relative;background:var(--bg2)}
.photos .slot img{width:100%;height:100%;object-fit:cover;display:block}
.photos .slot button{position:absolute;top:6px;inset-inline-end:6px;width:28px;height:28px;border-radius:50%;border:0;background:var(--surface);display:grid;place-items:center}
.drop{aspect-ratio:3/4;border:2px dashed var(--accent);border-radius:10px;display:grid;place-items:center;text-align:center;color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;padding:8px}
.drop svg{width:26px;height:26px;margin:0 auto 4px;display:block}
.drop input{display:none}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 13px;font-weight:600;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* orders */
.track{display:grid;gap:0}
.track div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding-bottom:14px;position:relative}
.track div::before{content:"";position:absolute;inset-inline-start:13px;top:26px;bottom:0;width:2px;background:var(--line)}
.track div:last-child::before{display:none}
.track i{width:28px;height:28px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-style:normal;color:var(--muted)}
.track .done i{background:var(--accent);color:var(--accent-ink)}
.track i svg{width:15px;height:15px}
.track b{display:block}
.track span{font-size:13px;color:var(--muted)}

.moneybar{display:flex;gap:8px;align-items:center;background:var(--accent-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:14px}
.moneybar svg{color:var(--accent)}
.moneybar.ok{background:var(--accent);color:var(--accent-ink)}.moneybar.ok svg{color:var(--accent-ink)}
.paycode{display:grid;justify-items:center;gap:2px;border:2px dashed var(--accent);border-radius:12px;padding:14px}
.paycode b{font-size:26px;letter-spacing:3px}
.blabel{border:2px dashed var(--ink);border-radius:12px;padding:14px;display:grid;gap:12px;background:var(--surface)}
.bl-h{display:flex;justify-content:space-between;align-items:center}
.bl-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bl-g div{display:grid;font-size:13px}.bl-g span{color:var(--muted)}
.bars{display:flex;justify-content:center;height:56px}
.bars span{display:block;background:var(--ink);height:100%}
.phonebox{display:flex;gap:8px;align-items:center;background:var(--accent-soft);border-radius:10px;padding:10px 12px;flex-wrap:wrap}
.phonebox b{font-size:19px;flex:1;user-select:all;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.credline{display:flex;gap:10px;align-items:center;background:var(--bg2);border-radius:12px;padding:10px 14px}
.credline span{flex:1}.credline svg{color:var(--accent)}
.crow{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;flex-wrap:wrap}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.packs{grid-template-columns:1fr}}
.pack{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:16px;display:grid;gap:4px;text-align:start;align-content:start}
.pack.hl{border-color:var(--saffron)}
.pack .big{font-size:22px;font-weight:800}
.pack .pill{justify-self:start}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:820px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:2px}
.tile b{font-size:24px}.tile span{font-size:13px;color:var(--muted)}
.tile.alert{border-color:var(--bad)}.tile.alert b{color:var(--bad)}
.ask{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.ask button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--ink)}
.sev{width:6px;align-self:stretch;border-radius:3px;background:var(--warn);flex:none}.sev.bad{background:var(--bad)}
/* inbox */
.msg{display:grid;grid-template-columns:330px minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-block:16px 30px;min-height:540px}
@media (max-width:820px){.msg{grid-template-columns:1fr;border:0;margin-top:6px}.msg[data-open="true"] .clist{display:none}.msg[data-open="false"] .thread{display:none}}
.clist{border-inline-end:1px solid var(--line);display:grid;align-content:start}
.clist button{display:flex;gap:10px;align-items:center;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 14px;text-align:start;min-width:0}
.clist button[aria-current="true"]{background:var(--accent-soft)}
.clist .th{width:48px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;flex:none}
.clist .th svg,.clist .th img{width:100%;height:100%;display:block;object-fit:cover}
.clist .tx{min-width:0;display:grid;flex:1}
.clist .tx b,.clist .tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clist .tx span{font-size:13px;color:var(--muted)}
.thread{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0}
.thead{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbar{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.tbar .th{width:40px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;flex:none}
.tbar .th svg,.tbar .th img{width:100%;height:100%;display:block;object-fit:cover}
.bubbles{padding:16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:430px}
.bub{max-width:78%;padding:9px 13px;border-radius:14px;background:var(--bg2);align-self:flex-start;white-space:pre-wrap}
.bub.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.bub small{display:block;font-size:11px;opacity:.7;margin-top:2px}
.offer{align-self:flex-end;border:2px solid var(--accent);border-radius:14px;padding:12px 14px;display:grid;gap:6px;min-width:220px;background:var(--surface)}
.offer.them{align-self:flex-start}
.offer b.v{font-size:20px;font-variant-numeric:tabular-nums}
.sysmsg{align-self:center;font-size:12px;color:var(--muted);background:var(--bg2);border-radius:999px;padding:3px 12px}
.compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.compose input{flex:1}

/* profile */
.page{padding-block:18px 50px;display:grid;gap:18px}
.phead{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.phead .av{width:76px;height:76px;font-size:30px}
.phead h1{font-size:24px}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.stats b{color:var(--ink)}
.tabsline{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabsline::-webkit-scrollbar{display:none}
.tabsline button{flex:none;border:0;background:none;padding:10px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.tabsline button[aria-current="true"]{color:var(--ink);border-color:var(--ink)}
.rows{display:grid;gap:10px}
.orow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:start;width:100%}
.orow .ph{border-radius:8px}
.wallet{background:var(--ink);color:var(--bg);border-radius:16px;padding:20px;display:grid;gap:4px}
.wallet b{font-size:32px;font-variant-numeric:tabular-nums}
.review{display:grid;gap:4px;border-bottom:1px solid var(--line);padding-block:10px}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:700px){.rules{grid-template-columns:1fr}}
.rules div{background:var(--bg2);border-radius:14px;padding:16px;display:grid;gap:6px}
.rules p{margin:0;color:var(--muted);font-size:14px}
.rules svg{width:26px;height:26px;color:var(--accent)}
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
th,td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}

footer{border-top:1px solid var(--line);margin-top:30px}
footer .wrap{padding-block:24px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:18px;font-size:14px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}footer{margin-bottom:70px}}
footer b{display:block;margin-bottom:6px}
footer button{display:block;background:none;border:0;padding:3px 0;color:var(--muted);text-align:start}

.modal{position:fixed;inset:0;z-index:50;background:rgba(8,10,25,.55);display:flex;align-items:flex-end;justify-content:center}
.mbox{background:var(--surface);width:min(500px,100%);max-height:90%;overflow:auto;border-radius:18px 18px 0 0;padding:20px max(20px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:grid;gap:12px}
@media (min-width:700px){.modal{align-items:center}.mbox{border-radius:18px}}
.mbox h2{font-size:21px}
.arow{display:flex;gap:8px;flex-wrap:wrap}
.arow .btn{flex:1}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;z-index:60;font-weight:700;max-width:calc(100% - 32px);text-align:center}
@media (min-width:821px){.toast{bottom:24px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* ---- ajouts de la version en ligne ---- */
.logo .word{font-family:var(--f-display);font-size:26px;font-weight:700;color:var(--accent);line-height:1}
.auth{max-width:440px;margin:0 auto;padding-block:24px 50px;display:grid;gap:14px}
.auth h1{font-size:26px}
.auth .switch{text-align:center;font-size:14px;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex:none}
.loading{padding:60px 16px;text-align:center;color:var(--muted)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.gal .g img{display:block;width:100%;height:100%;object-fit:cover}
.gal .g{cursor:zoom-in}
.statusbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.legal{max-width:760px;display:grid;gap:12px;padding-block:20px 50px}
.legal h1{font-size:26px}.legal h2{font-size:18px;margin-top:8px}
.legal p,.legal li{color:var(--muted);line-height:1.6}
.more-btn{justify-self:center;margin-block:16px 40px}
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:16px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.ownbar{display:flex;gap:8px;flex-wrap:wrap}
.badge-pend{background:var(--saffron);color:var(--saffron-ink)}
a.btn{text-decoration:none}
.topnav a.ib{color:var(--muted);text-decoration:none}
.topnav a.ib[aria-current="page"]{color:var(--accent)}
.logo{text-decoration:none}
a.linkbtn{text-decoration:none}
.legal a,.check a{color:var(--accent)}
@media (max-width:560px){.crow>.arow{flex:1 1 100%!important}}

/* Logo Lqit · لقيت */
.logo{gap:8px;align-items:center}
.logo .lq{font-family:"Pacifico",cursive;font-size:27px;line-height:1.35;color:var(--accent);font-weight:400}
.logo .lq-ar{font-family:"Lalezar",sans-serif;font-size:24px;line-height:1;color:var(--accent);margin-top:2px}
@media (max-width:640px){.logo .lq{font-size:23px}.logo .lq-ar{font-size:20px}}
.flogo{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.flogo .lq{font-family:"Pacifico",cursive;font-size:24px;line-height:1.35;color:var(--accent)}
.flogo .lq-ar{font-family:"Lalezar",sans-serif;font-size:22px;line-height:1;color:var(--saffron)}
footer .wrap > div:first-child{display:block}.flogo + span{display:block}

/* --- Écrans façon application --- */
.hchips{display:none}
.mtitle{font-size:22px;margin:4px 0 0}
.badge{position:absolute;top:-2px;inset-inline-end:calc(50% - 20px);min-width:18px;height:18px;border-radius:9px;background:#d6334f;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;line-height:1}
.topnav .ib .badge{top:-6px;inset-inline-end:-8px}
.btiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.btile{position:relative;aspect-ratio:16/10;border:0;border-radius:14px;background:var(--tb);color:#16193a;text-align:start;padding:16px;overflow:hidden;display:flex;align-items:flex-start}
.btile b{font-size:19px;font-weight:600;position:relative;z-index:1}
.btile .art{position:absolute;inset-inline-end:10px;bottom:2px;font-size:64px;line-height:1;transform:rotate(-8deg)}
.mlist{display:grid;border-top:1px solid var(--line)}
.mrow{display:flex;gap:12px;align-items:flex-start;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;position:relative}
.av.big{width:52px;height:52px;font-size:20px;flex:none}
.mtx{display:grid;gap:3px;min-width:0;flex:1}
.mtop{display:flex;gap:8px;justify-content:space-between;align-items:baseline}
.mtop b{font-size:17px;font-weight:600}.mtop .muted{font-size:13px;flex:none}
.mlast{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow.unread .mlast{color:var(--ink);font-weight:700}
.mth{width:38px;height:38px;border-radius:6px;overflow:hidden;background:var(--bg2)}.mth img{width:100%;height:100%;object-fit:cover;display:block}
.mrow .dot{position:absolute;inset-inline-end:6px;top:44px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tpage{display:flex;flex-direction:column;max-width:760px;margin-inline:auto;padding-block:8px 0}
.tpage .thead{border:0;padding:6px 0}
.tpage .tbar{border:1px solid var(--line);border-radius:12px}
.tpage .bubbles{max-height:none;min-height:40vh;padding:14px 2px}
.tpage .compose{position:sticky;bottom:0;background:var(--bg);padding:10px 0;align-items:flex-end}
.tpage .compose textarea{resize:none;min-height:44px;max-height:140px}
.tnote{text-align:center;font-size:12px;display:flex;gap:6px;justify-content:center;align-items:center;margin:4px 0 12px}
.tnote svg{width:15px;height:15px}
.pmenu{max-width:640px;margin-inline:auto;gap:14px}
.pcard{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;background:var(--surface)}
.pgroup{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.prow{display:flex;gap:14px;align-items:center;padding:16px;border:0;border-bottom:1px solid var(--line);background:none;text-decoration:none;color:inherit;font-size:16px;text-align:start;width:100%}
.prow:last-child{border-bottom:0}
.prow span:first-of-type{flex:1}
.prow svg{width:22px;height:22px;flex:none}
@media (max-width:820px){
  header.top .cats{display:none}
  .hchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 0 2px;margin-inline:-2px}
  .hchips::-webkit-scrollbar{display:none}
  .hchips button{flex:none;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 16px;font-size:15px;font-weight:500}
  .hchips button.on{border-color:var(--accent);background:var(--accent-soft)}
  body[data-page="accueil"] .how{display:none}
  .btiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .btile{aspect-ratio:1/1;padding:14px}
  .btile .art{font-size:70px}
  body[data-page="messages"] .stickybuy{display:none}
  .tpage .compose{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:820px){footer{display:none}body[data-page="messages"] main{padding-bottom:70px}}

.orsep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:4px 0}.orsep::before,.orsep::after{content:"";flex:1;border-top:1px solid var(--line)}
.packs{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:820px){.packs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.modal .packs{grid-template-columns:repeat(2,minmax(0,1fr))}.modal .pack{padding:12px}

/* Listes à pictogrammes (dépôt d'annonce) */
.pickrow{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px 14px;text-align:start;font-size:16px;margin-top:6px;color:var(--ink)}
.pickrow>span:nth-child(2){flex:1;min-width:0}.pickrow svg{width:18px;height:18px;color:var(--muted)}
.pico{width:40px;height:40px;border-radius:12px;background:var(--bg2);display:grid;place-items:center;font-size:22px;flex:none}
.mbox.sheet{padding:0;gap:0;max-height:88vh;display:flex;flex-direction:column}
.shead2{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--line)}
.shead2 h2{text-align:center;font-size:18px;margin:0}.shead2 .ib{background:none;border:0;width:40px;height:40px;display:grid;place-items:center;color:var(--ink)}
.plist{overflow-y:auto;-webkit-overflow-scrolling:touch}
.prow2{display:flex;align-items:center;gap:14px;width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 16px;text-align:start;color:var(--ink)}
.prow2 .ptx{display:grid;flex:1;min-width:0}.prow2 .ptx b{font-weight:600;font-size:16px}.prow2 .ptx small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow2 svg{width:18px;height:18px;color:var(--muted)}.prow2.on{background:var(--accent-soft)}.prow2 .chk{color:var(--accent);font-weight:800;font-size:18px}

.ssearch{display:flex;align-items:center;gap:8px;margin:12px 16px;background:var(--bg2);border-radius:12px;padding:0 12px}
.ssearch input{flex:1;border:0;background:none;padding:12px 0;font-size:16px;outline:none;color:var(--ink)}.ssearch svg{width:20px;height:20px;color:var(--muted)}
.slabel{padding:6px 16px;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.pgroup.plist .prow2:last-child{border-bottom:0}

.unlockbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:14px}.unlockbar span{flex:1;min-width:160px}.unlockbar>svg{width:20px;height:20px;color:var(--accent)}

.fchip{cursor:pointer;color:var(--ink)}.fchip.on svg{color:var(--bg)}
.sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:inline-block}

/* Bande de catégories qui défile (accueil) */
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;margin-inline:-2px;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.ctile{flex:none;width:118px;scroll-snap-align:start;border:0;background:none;padding:0;display:grid;gap:8px;text-align:center;color:var(--ink)}
.ctile .cart{display:grid;place-items:center;width:118px;height:118px;border-radius:22px;background:var(--tb);font-size:62px;line-height:1;transition:transform .15s}
.ctile:active .cart{transform:scale(.95)}
.ctile b{font-size:13px;font-weight:600;line-height:1.25}
@media (min-width:821px){.ctile{width:140px}.ctile .cart{width:140px;height:140px;font-size:74px}}

/* Écran de bienvenue (non connecté), photos qui défilent */
body.wopen{overflow:hidden}
#welcome{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.wtop{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.wlang,.wskip{border:0;background:none;font-weight:600;font-size:15px;color:var(--ink);padding:6px 4px}.wskip{color:var(--muted)}
.wrows{display:grid;gap:12px;padding:8px 0 4px;overflow:hidden}
.wrow{overflow:hidden}
.wtrack{display:flex;gap:12px;width:max-content;animation:wscroll 38s linear infinite}
.wrow.rev .wtrack{animation-direction:reverse;animation-duration:44s}
@keyframes wscroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
[dir=rtl] .wtrack{animation-name:wscrollr}@keyframes wscrollr{from{transform:translateX(0)}to{transform:translateX(calc(50% + 6px))}}
@media (prefers-reduced-motion:reduce){.wtrack{animation:none}}
.wt{flex:none;width:clamp(104px,30vw,170px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--bg2)}
.wt img{width:100%;height:100%;object-fit:cover;display:block}.wt span{font-size:clamp(50px,15vw,84px);line-height:1}
.wbody{display:grid;gap:12px;padding:22px 20px 28px;max-width:520px;width:100%;margin:auto auto 0;text-align:center}
.wlogo{display:flex;justify-content:center;align-items:center;gap:10px}.wlogo .lq{font-family:"Pacifico",cursive;font-size:34px;line-height:1.3;color:var(--accent)}.wlogo .lq-ar{font-family:"Lalezar",sans-serif;font-size:30px;color:var(--saffron)}
.wbody h1{font-size:clamp(24px,6.5vw,32px);line-height:1.2;margin:0}
.wbody p{margin:0 0 6px;color:var(--muted)}
.wnote{font-size:13px;color:var(--muted)}.wnote a{color:var(--accent)}

/* Grille Parcourir : 2 colonnes */
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:821px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cgcard{position:relative;aspect-ratio:1.6/1;border:0;border-radius:10px;background:var(--bg2);padding:14px;text-align:start;display:flex;align-items:flex-start;overflow:hidden;color:var(--ink)}
.cgcard b{font-size:18px;font-weight:500;line-height:1.25;position:relative;z-index:1;max-width:70%}
.cgart{position:absolute;inset-inline-end:10px;bottom:6px;font-size:clamp(46px,14vw,64px);line-height:1}
.cgcard:active{filter:brightness(.96)}

/* V16 */
.promo.slim{padding:18px 22px;margin-top:22px}
.promo.slim h1{font-size:clamp(20px,2.6vw,26px);max-width:none}
.promo.slim p{margin:6px 0 12px}
@media (min-width:821px){.promo.slim{grid-template-columns:1fr auto}.promo.slim .row{justify-content:flex-end}.promo.slim>div:last-child{display:flex;gap:24px;align-items:center;justify-content:space-between}.promo.slim>div:last-child p{margin:0}}
.cwrap{position:relative}
.carr{display:none;position:absolute;top:44px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.12);place-items:center;color:var(--ink)}
.carr.prev{inset-inline-start:-14px}.carr.next{inset-inline-end:-14px}.carr svg{width:18px;height:18px}
@media (min-width:821px) and (hover:hover){.carr{display:grid}.ctile .cart{height:120px;width:120px;font-size:64px}.ctile{width:120px}}
.cwrap{min-width:0;max-width:100%}.cwrap .carousel{min-width:0}section.block{min-width:0}

/* Bannière ordinateur (non connecté) : photos qui défilent */
.dhero{display:none}
@media (min-width:821px){
  .dhero{display:block;position:relative;background:var(--bg2);padding:22px 0;overflow:hidden;border-bottom:1px solid var(--line)}
  .dhero .wrows{gap:14px;padding:0}
  .dhero .wt{width:150px}
  .dhbox{position:absolute;top:50%;inset-inline-start:max(24px,calc((100vw - 1240px)/2 + 24px));transform:translateY(-50%);background:var(--surface);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.15);padding:26px 28px;width:min(380px,40vw);display:grid;gap:12px;z-index:2}
  .dhbox h1{font-size:28px;line-height:1.2;margin:0}.dhbox p{margin:0;color:var(--muted)}
  .dhbox .wlogo{justify-content:flex-start}.dhbox .row{display:flex;gap:10px;flex-wrap:wrap}
  .promo.nodesk{display:none}
}

/* Marocains de l'étranger */
.eurx{font-weight:500;color:var(--muted);font-size:.85em;white-space:nowrap}
.dlv{color:var(--accent);font-weight:600;font-size:12px}
.dlvbox{margin:8px 0 0;background:var(--accent-soft);border-radius:10px;padding:8px 10px;font-size:13px}
.mre{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff6dc;border:1px solid #f2d68a;border-radius:14px;padding:12px 14px;margin-top:12px}
.mre .mfl{font-size:30px}.mre>div{display:grid;flex:1;min-width:200px;font-size:14px}.mre b{font-size:15px}
:root[data-theme=dark] .mre{background:#3a3010;border-color:#6b5520}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mre{background:#3a3010;border-color:#6b5520}}

/* V19 : bande MRE discrète, badge livraison, près de chez toi */
.mrebar{display:flex;align-items:center;gap:4px;background:#fff6dc;border:1px solid #f2d68a;border-radius:12px;margin-top:14px}
.mrego{flex:1;display:flex;align-items:center;gap:8px;border:0;background:none;padding:10px 12px;text-align:start;font-size:14px;color:#3a2f10}
.mrego span{flex:1}.mrego svg{width:16px;height:16px}
.mrex{border:0;background:none;width:38px;height:38px;display:grid;place-items:center;color:#7a6630}.mrex svg{width:16px;height:16px}
.ph .tag.dtag{top:auto;bottom:8px;inset-inline-start:8px;background:rgba(255,255,255,.94);color:#0f4d3c}
.nearrow .item{flex:none;width:44%;max-width:200px;scroll-snap-align:start}
@media (min-width:821px){.nearrow .item{width:190px}}
@media (max-width:560px){.feed{gap:18px 10px}}

/* Parrainage */
.invite{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#e9f9ec;border:1px solid #c9ecd2;border-radius:14px;padding:18px;margin-top:14px;text-decoration:none;color:#0f4d3c;overflow:hidden;min-height:130px}
.invite>div{display:grid;gap:14px;justify-items:start;position:relative;z-index:1}
.invite b{font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,6vw,28px);line-height:1.15;font-weight:700}
.invite .btn{background:#0f4d3c;color:#fff}
.iart{font-size:clamp(56px,16vw,78px);line-height:1;position:relative}.iart i{position:absolute;font-style:normal;font-size:.5em;top:-6px;inset-inline-end:-10px}
.btn.wa{background:#25d366;color:#fff}
:root[data-theme=dark] .invite{background:#123326;border-color:#1f5a40;color:#c9f0da}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .invite{background:#123326;border-color:#1f5a40;color:#c9f0da}}
.logo .lq-ar{color:var(--saffron)}
.page>*{min-width:0;max-width:100%}.box{min-width:0}.crow{min-width:0}

.btn.danger{color:#c0352b}.btn.danger:not(.plain){background:#c0352b;color:#fff}
.mkteam summary{list-style:none;cursor:pointer;display:inline-flex}.mkteam summary::-webkit-details-marker{display:none}.mkteam[open] summary{background:var(--bg2);color:var(--ink)}

/* Bannières de promotion */
.pbans{display:grid;gap:12px;margin-top:14px}
.pbans.multi{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.pbans.multi::-webkit-scrollbar{display:none}
.pbans.multi .pban{flex:none;width:88%;max-width:560px;scroll-snap-align:start}
.pban{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:14px;padding:16px 18px;text-decoration:none;min-height:110px;overflow:hidden}
.pbtx{display:grid;gap:8px;justify-items:start;min-width:0}
.pbtx b{font-family:Georgia,"Times New Roman",serif;font-size:clamp(20px,5.4vw,26px);line-height:1.15}
.pbtx span:not(.btn){font-size:14px;opacity:.85}
.pbart{font-size:clamp(50px,14vw,72px);line-height:1;flex:none}
.pbimg{width:clamp(90px,28vw,150px);height:clamp(90px,28vw,150px);object-fit:cover;border-radius:12px;flex:none}

.pban.full{padding:0;min-height:0;display:block;aspect-ratio:12/5;background:var(--bg2)}.pban.full img{width:100%;height:100%;object-fit:cover;display:block}

/* Administration en pictogrammes */
.apage{max-width:980px;margin-inline:auto}
.ahero{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}.ahero h1{font-size:28px;margin:2px 0 0}
.atodo{display:flex;flex-wrap:wrap;gap:8px}.atodo a{background:#fde8e0;color:#7a2a12;border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;text-decoration:none}
.atodo.ok{background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-weight:600}
.agrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:640px){.agrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.agrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.atile{display:grid;justify-items:center;text-align:center;gap:6px;padding:20px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.atile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}.atile:active{transform:scale(.97)}
.aico{position:relative;width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:36px;line-height:1;flex:none}
.aico i{position:absolute;top:-6px;inset-inline-end:-6px;min-width:22px;height:22px;border-radius:11px;background:#d6334f;color:#fff;font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 6px;border:2px solid var(--surface)}
.atile b{font-size:16px}.atile small{color:var(--muted);font-size:12.5px;line-height:1.3}
.ahead{display:flex;align-items:center;gap:14px}.ahead .aico{width:56px;height:56px;font-size:28px;border-radius:18px}.ahead h1{font-size:24px;margin:0}

.rdot{position:absolute;top:0;inset-inline-end:calc(50% - 16px);width:10px;height:10px;border-radius:50%;background:#d6334f;border:2px solid var(--bg)}
.topnav .ib .rdot{top:-2px;inset-inline-end:-4px}
.rcount{background:#d6334f;color:#fff;border-radius:11px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:12px;font-weight:800;padding:0 6px}
.aonline{font-size:14px;font-weight:600}
/* ---- Lqit pour la famille (Marocains du monde) */
.famhero{position:relative;overflow:hidden;margin-top:16px;border-radius:22px;padding:24px;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:22px;align-items:center;
  background:radial-gradient(120% 140% at 0% 0%,#1f8a6b 0%,#0f4d3c 55%,#0a3529 100%)}
.famhero .pattern{position:absolute;inset:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23f2b632'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");background-size:56px 56px;pointer-events:none}
.famhero>*{position:relative;min-width:0}
.fhtext{display:grid;gap:14px;align-content:start}
.fhkick{justify-self:start;font-size:13px;font-weight:700;letter-spacing:.3px;background:rgba(242,182,50,.16);color:#f8cf6b;border:1px solid rgba(242,182,50,.35);padding:5px 11px;border-radius:999px}
.famhero h1,.famhero h2{color:#fff;margin:0;font-size:clamp(22px,3.2vw,34px);line-height:1.15;letter-spacing:-.3px}
.famhero em{font-style:normal;color:#f8cf6b}
.famhero p{margin:0;color:#d6ece3;max-width:52ch;line-height:1.5}
.famhero .row{display:flex;gap:10px;flex-wrap:wrap}
.famhero .btn.out{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.fhsteps{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:14px;color:#e3f3ec}
.fhsteps span{display:flex;align-items:center;gap:7px}
.fhsteps b{width:22px;height:22px;border-radius:50%;background:#f2b632;color:#1d1600;display:grid;place-items:center;font-size:12px;flex:none}
.fhx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fhx a{display:grid;justify-items:center;gap:6px;text-align:center;font-size:13px;font-weight:600;color:#fff;text-decoration:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 6px}
.fhx a span{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:26px}
.fhx a:hover{background:rgba(255,255,255,.14)}
.fhmore{display:inline-flex;align-items:center;gap:4px;color:#f8cf6b;font-weight:700;text-decoration:none;font-size:14px}
.fhmore .i{width:16px;height:16px}
.fampack{background:#fffaf0;color:#1d1600;border-radius:18px;padding:18px;display:grid;gap:4px;justify-items:start;box-shadow:0 12px 30px rgba(0,0,0,.25);border:2px solid #f2b632}
.fampack .fpn{font-size:15px;color:#6b5a2a;margin-top:6px}
.fampack .fpc{font-size:34px;font-weight:800;line-height:1.05;color:#0f4d3c}
.fampack .fpp{font-size:22px;font-weight:800}
.fampack .fpp s{font-size:13px;font-weight:600;color:#9b8b63;margin-inline-start:6px}
.fampack .fpx{font-size:13px;color:#6b5a2a;margin-bottom:8px}
.fampack .btn{width:100%;justify-content:center}
.pack.fam{border-color:#f2b632;background:#fffaf0}
.famp{gap:22px}
.famhero.tall{padding:32px 28px}
.famhero.tall h1{font-size:clamp(28px,4.4vw,46px)}
.famsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.famsteps>div{border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:6px;align-content:start;position:relative;background:var(--surface)}
.famsteps .fsn{position:absolute;top:12px;inset-inline-end:14px;font-weight:800;color:var(--muted);font-size:13px}
.famsteps .fse{font-size:30px}
.famsteps p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.famideas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.famideas a{border-radius:16px;padding:14px 10px;display:grid;justify-items:center;gap:6px;text-decoration:none;color:#1a1d33;text-align:center}
.famideas a span{font-size:38px}
.famtrust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.famtrust div{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border-radius:14px;padding:12px 14px;font-weight:600;font-size:14px}
.famtrust span{font-size:22px}
.famfaq{display:grid;gap:8px}
.famfaq details{border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--surface)}
.famfaq summary{cursor:pointer;font-weight:700}
.famfaq p{margin:8px 0 0;color:var(--muted);line-height:1.5}
.famend{display:grid;grid-template-columns:minmax(250px,340px) minmax(0,1fr);gap:18px;align-items:center;background:#0f4d3c;border-radius:22px;padding:22px;color:#fff}
.famend .row{display:flex;gap:10px;margin-top:10px}
@media (max-width:820px){
  .famhero{grid-template-columns:1fr;padding:20px}
  .famhero.tall{padding:24px 18px}
  .famsteps,.famtrust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .famideas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .famend{grid-template-columns:1fr}
}
@media (max-width:420px){.fhx{grid-template-columns:repeat(2,minmax(0,1fr))}.famsteps{grid-template-columns:1fr}}
.fampack .fpb{font-size:13px;font-weight:800;background:#0f4d3c;color:#f8cf6b;padding:3px 8px;border-radius:999px;vertical-align:middle;margin-inline-start:6px}
/* ---- envoi avec paiement à la livraison */
.shipbar{display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:12px 14px;border-radius:14px;border:1px solid #f2d68a;background:#fff8e6;color:inherit;text-decoration:none;font:inherit;width:100%;cursor:pointer}
.shipbar.go{border-style:dashed}
.shipbar .sbi{font-size:26px}
.shipsteps{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;font-weight:600}
.shipsteps span{display:flex;align-items:center;gap:6px}
.shipsteps b{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px}
.rates{display:grid;gap:6px;background:var(--bg2);border-radius:12px;padding:12px;font-size:14px}
.rates>div{display:flex;justify-content:space-between;gap:10px}
.envoi{gap:16px;max-width:760px}
.strack{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative}
.strack div{display:grid;justify-items:center;gap:4px;text-align:center;font-size:12px;color:var(--muted);opacity:.55}
.strack div span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--bg2);border:2px solid var(--line)}
.strack div.on{opacity:1;color:var(--ink);font-weight:600}
.strack div.on span{border-color:var(--accent);background:var(--accent-soft)}
.bord{background:#fff;color:#111;border:2px dashed #111;border-radius:14px;padding:16px;display:grid;gap:12px;max-width:560px;width:100%;justify-self:center;font-size:14px}
.bord small{display:block;font-size:11px;letter-spacing:.6px;color:#555;font-weight:700}
.bh{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #ddd;padding-bottom:10px}
.bh>span:last-child{text-align:end}.bh b{font-size:16px}
.bref{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bref b{font-size:26px;letter-spacing:1px;display:block}
.bqr svg{width:120px;height:120px;display:block}
.bcod{border:3px solid #111;border-radius:10px;padding:10px 14px;text-align:center}
.bcod b{font-size:30px;display:block}
.bparties{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bparties>div{display:grid;gap:2px;align-content:start;border:1px solid #ddd;border-radius:10px;padding:10px}
.bparties b{font-size:15px}
.bitem{border-top:1px solid #ddd;padding-top:8px}
.bfoot{margin:0;font-size:11px;color:#666}
@media (max-width:420px){.bparties{grid-template-columns:1fr}.bref b{font-size:22px}.bqr svg{width:96px;height:96px}}
@media print{
  body *{visibility:hidden}
  #bord,#bord *{visibility:visible}
  #bord{position:absolute;inset:0 auto auto 0;margin:0;border-style:solid}
  .noprint{display:none}
}
/* ---- achat (mode gratuit) */
.protect{display:flex;align-items:center;gap:10px;border:1px solid var(--accent-soft);background:var(--accent-soft);border-radius:12px;padding:10px 12px;font:inherit;color:inherit;cursor:pointer;width:100%}
.protect>span:first-child{font-size:24px}.protect .muted{font-size:13px}
.shipinfo{display:grid;gap:4px;margin:8px 0 2px;font-size:14px}
.boost{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}.boost .note{flex-basis:100%;margin:0}
.bopt{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:14px;padding:12px;background:var(--surface);font:inherit;color:inherit;cursor:pointer;width:100%}
.bopt.on{border-color:var(--accent);background:var(--accent-soft)}
.bopt .be{font-size:24px}.bopt .muted{font-size:13px}
.bitem2{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:8px}
.bitem2 .th{width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--bg2);flex:none}.bitem2 .th img{width:100%;height:100%;object-fit:cover}
.recap{display:grid;gap:6px;background:var(--bg2);border-radius:12px;padding:12px;font-size:14px}
.recap>div{display:flex;justify-content:space-between;gap:10px}
.recap .tot{border-top:1px solid var(--line);padding-top:8px;font-size:16px}
.recap .note{margin:0}
.parcels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}
.parcel{display:grid;justify-items:center;gap:2px;text-align:center;border:2px solid var(--line);border-radius:12px;padding:10px 6px;background:var(--surface);font:inherit;color:inherit;cursor:pointer}
.parcel span{font-size:26px}.parcel small{font-size:11px;font-weight:500}
.parcel.on{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:520px){.parcels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ph .tag.ftag{background:#f2b632;color:#1d1600;inset-inline-start:auto;inset-inline-end:8px}
.freeg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.freeg div{display:grid;gap:4px;justify-items:center;text-align:center;background:var(--accent-soft);border-radius:16px;padding:16px 10px}
.freeg span{font-size:30px}.freeg small{color:var(--muted)}
@media (max-width:620px){.freeg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gridt input{width:70px;padding:6px 8px;text-align:center}
.gridt th{white-space:nowrap}
/* ---- protection acheteur : litiges */
.okbox{display:grid;gap:10px;border:2px solid var(--accent);background:var(--accent-soft)}
.okbox .note{margin:0}
.dispute{display:grid;gap:10px;border:2px solid #e0a43a;background:#fff8e6;border-radius:16px;padding:14px;color:#1a1d33}
.dispute.closed{border-color:var(--line);background:var(--bg2);color:inherit}
.dispute .dh{display:flex;gap:10px;align-items:center}
.dphotos{display:flex;gap:8px;flex-wrap:wrap}
.dphotos .g{width:72px;height:72px;border-radius:10px;overflow:hidden;padding:0;border:0;background:var(--bg2);display:block}
.dphotos img{width:100%;height:100%;object-fit:cover}
.dmsgs{display:grid;gap:6px}
.dm{display:grid;gap:2px;background:#fff;border-radius:12px;padding:8px 12px;font-size:14px;border:1px solid var(--line)}
.dm.team{background:#e2f2eb;border-color:#b9dccd}
.dm small{color:#777;font-size:11px}
.dispute .compose textarea{min-height:42px}
/* ---- offres */
.offbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font:inherit;color:inherit;width:100%;text-align:start}
.offbar.ask{cursor:pointer;border-style:dashed;font-weight:700}.offbar.ask span{flex:1}
.offbar.new{border:2px solid #f2b632;background:#fff8e6}
.offbar.ok{border-color:var(--accent);background:var(--accent-soft)}
.offnote{border:1px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.offnote.ok{border:1px solid var(--accent);background:var(--accent-soft)}
.stickybuy{gap:8px}.stickybuy .btn{flex:1}
/* ---- options payantes */
.boostcta{display:flex;align-items:center;gap:12px;width:100%;border:2px solid #f2b632;background:#fff8e6;border-radius:14px;padding:12px 14px;font:inherit;color:#1a1d33;cursor:pointer;margin-bottom:8px}
.boostcta>span:first-child{font-size:26px}.boostcta .muted{font-size:13px}
label.bopt{cursor:pointer}
.bopt .bchk{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.bopt.on .bchk{background:var(--accent);border-color:var(--accent)}
.ph .tag.utag{background:#d6334f;color:#fff;top:auto;bottom:38px;inset-inline-start:8px}
.paybox{display:grid;gap:10px;border:2px solid #f2b632;background:#fff8e6;color:#1a1d33}
.recap .protnow{border-top:0;padding-top:0;font-size:15px;color:#7a4d00}
/* ---- notifications */
.bellb .badge{top:-2px;inset-inline-end:-2px}
.pushcard{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px}
.pushcard>span:first-child{font-size:26px}
.pushcard .muted{font-size:13px;line-height:1.45}
.pushcard.ask{border:2px solid #f2b632;background:#fff8e6;color:#1a1d33}
.pushcard.on{border-color:var(--accent);background:var(--accent-soft)}
.pushcard .ib{margin-inline-start:-6px}
.nlist{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.nrow{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.nrow:last-child{border-bottom:0}
.nrow.new{background:var(--accent-soft)}
.nrow .nk{font-size:22px;line-height:1.2}
.nrow .nb{font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nrow small{font-size:12px}
.ndot{width:9px;height:9px;border-radius:50%;background:#d6334f;flex:none;margin-top:6px}
.pill.teamb{background:#17765c;color:#fff;font-size:12px;vertical-align:middle}
/* V43 · page article (téléphone : photos plein écran puis titre/prix/Acheter), porte-monnaie, conditions */
.ilayout{grid-template-areas:"gal side" "more side"}
.igal{grid-area:gal;min-width:0}
.ilayout>.side{grid-area:side}
.imore{grid-area:more;display:grid;gap:22px;min-width:0}
.imore:empty{display:none}
.galw{position:relative}
.galn{position:absolute;bottom:10px;inset-inline-end:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;pointer-events:none}
.galsold{position:absolute;top:10px;inset-inline-start:10px;background:var(--ink);color:var(--bg);font-weight:800;font-size:13px;padding:4px 10px;border-radius:8px;pointer-events:none}
@media (max-width:900px){
  .ilayout{grid-template-areas:"gal" "side" "more";gap:14px}
  .ipage>.back{margin-bottom:4px}
  .galw{margin-inline:-16px}
  .gal{gap:0}
  .gal .g,.gal .g:first-child{width:100%;aspect-ratio:1/1;border-radius:0}
  .ilayout>.side>.box:first-child{border:0;padding:0;background:none;box-shadow:none}
}
.parcelbar{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.walletlink{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:inherit;margin-bottom:6px;font-size:20px}
.walletlink b{font-size:15px;display:block}.walletlink small{font-size:13px}
.wallet{display:grid;gap:8px;justify-items:start;background:#0f5a43;color:#fff;border-radius:18px;padding:20px}
.wallet .muted{color:#bfe3d4}.wallet>b{font-size:38px;line-height:1.1}
.wsub{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:#d6ece3}
.wallet .btn{margin-top:6px}
.bcod.paid b{color:#0f5a43}
.bcod.paid small:last-child{display:block;font-weight:700}
.legal .toc{display:flex;flex-wrap:wrap;gap:4px 14px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:6px 0 10px}
.legal .toc .linkbtn{padding:2px 0;font-size:14px}
.legal h2{scroll-margin-top:130px}
.mrow{align-items:center}
.mrow .mth{flex:none;width:48px;height:48px;border-radius:8px}
.mrow .mth:empty{display:none}
.mrow .dot{top:12px}
.mrow .dot{top:auto;bottom:18px;inset-inline-end:62px}
.paylogos{font-size:12px;color:var(--muted);text-align:center}
.tpage .tbar{flex-wrap:wrap}
.tbar a.th{display:block}
.tprot{font-size:14px;font-weight:700;color:var(--accent)}.tprot small{font-weight:600;font-size:11px}
.tbtns{display:flex;gap:6px;flex:none}
@media (max-width:420px){.tbtns{flex-basis:100%}.tbtns .btn{flex:1}}
.bubbles .offbar{margin:8px 0 4px;max-width:420px;align-self:flex-start}
/* V45 · comme Vinted : alertes, abonnements, vacances, lots */
.alertbtn{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;border:1px dashed var(--accent);color:var(--accent);background:var(--accent-soft);border-radius:12px;padding:10px;font:inherit;font-weight:700;margin:4px 0 10px;cursor:pointer}
.followrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;margin:4px 0 12px}
.vacbox{align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.lotbox{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.lotbox summary{cursor:pointer;font-size:14px}
.lotlist{display:grid;gap:6px;margin-top:10px;max-height:260px;overflow:auto}
.lotit{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--bg);font:inherit;color:inherit;text-align:start;cursor:pointer}
.lotit.on{border-color:var(--accent);background:var(--accent-soft)}
.lotit .ph{width:40px;height:40px;flex:none;border-radius:6px;overflow:hidden;background:var(--bg2)}.lotit .ph img{width:100%;height:100%;object-fit:cover;display:block}
.lotit .lt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.lotit .ck{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-weight:800;flex:none}
.lotit.on .ck{background:var(--accent);color:#fff;border-color:var(--accent)}
.helphero{display:grid;gap:14px;background:#0f5a43;color:#fff;border-radius:18px;padding:26px 20px;margin-bottom:6px}
.helphero h1{color:#fff;margin:0;font-size:26px;line-height:1.2}
.helphero .field{background:#fff;color:#111}
.helpp{display:grid;gap:18px}
.helpcta{display:grid;gap:8px;justify-items:start}
/* V47 · photo de profil, vendeur visible à côté de l'annonce */
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;display:block}
.sellmini{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-decoration:none;color:inherit}
.sellmini .av{width:44px;height:44px;font-size:18px;flex:none}
.sellmini .muted{font-size:13px}
.stars{color:#f2a900;letter-spacing:1px}.stars.none{color:#c9ccd1}
.avedit{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.avedit .av{width:72px;height:72px;font-size:28px;flex:none}
.tfa .crow>b{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.tfaqr{display:grid;place-items:center;padding:10px;background:#fff;border-radius:12px}.tfaqr svg{width:220px;height:220px}
.tfacodes{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:18px;font-weight:700;letter-spacing:1px}
.tfacodes span{border:1px dashed var(--line);border-radius:8px;padding:8px;text-align:center}
@media print{.tfacodes span{border:1px solid #000}}
/* bandeau « Télécharger l'application » (téléphone) */
.appban{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:10px 10px 10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.18);animation:abIn .3s ease}
.appban img{width:44px;height:44px;border-radius:11px;flex:none}
.appban b{font-size:15px}.appban span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appban .ib{background:none;border:0;width:32px;height:32px;display:grid;place-items:center;color:var(--muted);flex:none}
@keyframes abIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
body[data-page="article"] .appban{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
.addlist{justify-self:start;margin-bottom:12px}@media (max-width:820px){.addlist{width:100%;justify-content:center}}
.myl{flex-wrap:wrap}.mylacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){.myl .mylacts{flex-basis:100%;justify-content:flex-end}.myl .mylacts .pill{margin-inline-end:auto}}
/* V53 */
.compose .cphoto{flex:none;width:44px;padding:0;display:grid;place-items:center;cursor:pointer}
.bub.bphoto{padding:4px}.bub.bphoto .g{border:0;padding:0;background:none;display:block;cursor:zoom-in}.bub.bphoto img{display:block;max-width:220px;max-height:280px;border-radius:12px;object-fit:cover}
.danger-zone{border:1px solid var(--line);border-radius:12px;padding:10px 12px}.danger-zone summary{cursor:pointer;font-weight:600}
.supdel{margin:8px 0;font-size:14px}.supdel summary{cursor:pointer;color:var(--muted)}
.sellmini .btn{flex:none}
.review p{color:var(--ink)}
.compose .cphoto{align-self:center}

/* V58 marque enregistrée */
sup.reg{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;line-height:1;align-self:flex-start;margin-left:2px;opacity:.85;vertical-align:super}
.logo sup.reg{color:var(--accent)}.flogo sup.reg{color:var(--saffron)}
.fmark{display:block!important;font-size:12px;color:var(--muted);padding-top:14px;margin-top:14px;border-top:1px solid var(--line, #e5e5e5);text-align:center}

/* V59 villes */
.citybar{display:flex;flex-direction:column;gap:8px;background:#fff7e0;border:1px solid #f2d78a;border-radius:16px;padding:12px 14px;margin:10px 0;color:#16193a;text-align:start}
.citybar b{font-size:14px}.cbchips{display:flex;flex-wrap:wrap;gap:6px}
.cbchips i{font-style:normal;font-weight:700;font-size:13px;background:#fff;border:1px solid #17765c;color:#17765c;border-radius:999px;padding:4px 12px}
.wbody .citybar{margin:6px 0 12px}

/* V67 remises lots + partage */
.bundlebox{display:grid;gap:8px;background:#f3faf6;border:1px solid #cfe8dc;border-radius:16px;padding:12px 14px}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bundlechip{display:flex;gap:8px;align-items:center;background:#fff7e0;border:1px solid #f2d78a;border-radius:14px;padding:10px 12px;font-size:14px;margin:10px 0}
.shareg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.btn.ig{background:linear-gradient(45deg,#f9a03f,#e1306c,#833ab4);color:#fff;border:0}
.btn.fb{background:#1877f2;color:#fff;border:0}