@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --ground:#F7F6FB; --surface:#FFFFFF; --ink:#231F33; --muted:#6B6582; --faint:#9A95B0; --line:#231F33; --hair:#E6E2F0;
  --coral:#F0735A; --red:#BA381E; --yel:#FBF1D6; --grn:#E1F3E7; --grn2:#8FE3A8; --blu:#E6ECFD; --rose:#FDEAE5; --lil:#ECE8F7; --paper:#FFFDF6;
  --ink-btn:#231F33; --ink-btn-text:#FBF1D6; --on-bright:#1D1A2A; --ok:#2F7A48; --warn:#94600A;
  --stage:#E7E3F1; --bezel:#0E0C14; --shadow:0 40px 90px -40px rgba(35,31,51,.55);
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Figtree","Avenir Next",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#15121D; --surface:#211D2C; --ink:#F1EEF8; --muted:#ADA7C4; --faint:#7F799A; --line:#E9E5F5; --hair:#342E46;
    --coral:#F0806A; --red:#FF8468; --yel:#4A3F1C; --grn:#1C3A2A; --grn2:#6FD69A; --blu:#243056; --rose:#4A2A27; --lil:#312B4B; --paper:#F4F1E6;
    --ink-btn:#F1EEF8; --ink-btn-text:#15121D; --on-bright:#15121D; --ok:#7FDCA2; --warn:#F0B44C;
    --stage:#0B0910; --bezel:#000; --shadow:0 40px 90px -40px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#15121D; --surface:#211D2C; --ink:#F1EEF8; --muted:#ADA7C4; --faint:#7F799A; --line:#E9E5F5; --hair:#342E46;
  --coral:#F0806A; --red:#FF8468; --yel:#4A3F1C; --grn:#1C3A2A; --grn2:#6FD69A; --blu:#243056; --rose:#4A2A27; --lil:#312B4B; --paper:#F4F1E6;
  --ink-btn:#F1EEF8; --ink-btn-text:#15121D; --on-bright:#15121D; --ok:#7FDCA2; --warn:#F0B44C;
  --stage:#0B0910; --bezel:#000; --shadow:0 40px 90px -40px rgba(0,0,0,.9);
  color-scheme:dark;
}
html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:border-box}
body{height:100%;margin:0;background:var(--stage);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.35;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:10px}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.ol{border:2px solid var(--line);box-shadow:3px 3px 0 var(--line)}
.ol2{border:2px solid var(--line)}

/* ---------- app plein écran ---------- */
[hidden]{display:none!important}
img{max-width:100%}
html,body{height:100%;overflow:hidden}
body{background:var(--ground);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.app{position:relative;height:100%;height:100dvh;max-width:520px;margin:0 auto;overflow:hidden;background:var(--ground);display:flex;flex-direction:column;isolation:isolate}
@media (min-width:560px){ body{background:var(--stage)} .app{border-left:2px solid var(--line);border-right:2px solid var(--line)} }
input,select,textarea{font-size:16px}
/* ---------- chrome ---------- */
.topbar{flex:none;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px}
.tb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.topbar h2{font-size:30px;font-weight:800;line-height:1.05}
.topbar.sub h2{font-size:24px}
.tb-sub{color:var(--muted);font-size:13.5px;font-weight:600}
.demo{align-self:flex-start;background:var(--rose);border-radius:8px;padding:1px 7px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.iconbtn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);flex:none}
.iconbtn.sh{box-shadow:3px 3px 0 var(--line)}
.avatars{display:flex}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--display);border:2px solid var(--line);color:var(--ink)}
.av+.av{margin-left:-10px}
.av-n{background:var(--grn)} .av-c{background:var(--rose)}
.screen{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 24px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.screen>*,.sheet>*{flex-shrink:0}
.tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding:8px 4px max(10px,env(safe-area-inset-bottom,0px));background:var(--surface);border-top:2px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--muted)}
.tab .ti{width:46px;height:30px;border-radius:10px;display:grid;place-items:center;border:2px solid transparent}
.tab[aria-current="page"]{color:var(--ink);font-weight:800}
.tab[aria-current="page"] .ti{background:var(--yel);border-color:var(--line)}
.tab-scan .bubble{width:58px;height:58px;border-radius:18px;background:var(--coral);color:var(--on-bright);display:grid;place-items:center;margin-top:-26px;border:2px solid var(--line);box-shadow:3px 3px 0 var(--line)}
.tab-scan{color:var(--ink);font-weight:800}

/* ---------- primitives ---------- */
.card{background:var(--surface);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:17px;font-weight:800}
.row{display:flex;align-items:center;gap:12px}
.row .grow{flex:1;min-width:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.label{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted);font-weight:500}
.muted{color:var(--muted)}
.strike{text-decoration:line-through;color:var(--faint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 18px;border-radius:18px;font:800 17px var(--display);border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);background:var(--surface);color:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn-coral{background:var(--coral);color:var(--on-bright)}
.btn-ink{background:var(--ink-btn);color:var(--ink-btn-text)}
.btn-green{background:var(--grn2);color:var(--on-bright)}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 12px;border-radius:12px;font-size:13.5px;box-shadow:2px 2px 0 var(--line)}
.btn[disabled]{opacity:.55}
.pill{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);border-radius:10px;padding:1px 7px;font-weight:800;font-size:11.5px;white-space:nowrap;background:var(--yel);color:var(--ink)}
.p-g{background:var(--grn)} .p-r{background:var(--rose)} .p-b{background:var(--blu)} .p-l{background:var(--lil)} .p-w{background:var(--surface)} .p-ok{background:var(--grn2);color:var(--on-bright)}
.pastille{flex:none;width:42px;height:42px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;background:var(--tint,var(--lil));color:var(--ink)}
.pastille.big{width:64px;height:64px}
.pastille.sm{width:30px;height:30px}
.pastille.on{background:var(--grn2);color:var(--on-bright)}
.mono{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font:800 12.5px var(--display);background:var(--tint,var(--lil))}
.mono.sm{width:28px;height:28px;font-size:10.5px}
.sticker{align-self:flex-start;transform:rotate(-2deg);background:var(--yel);border-radius:18px;padding:9px 16px;display:flex;align-items:center;gap:12px;text-align:left}
.sticker b{font:800 30px/1 var(--display);color:var(--red)}
.sticker span{font-weight:700;font-size:13px;line-height:1.25}
.sticker.green{background:var(--grn2);color:var(--on-bright)}
.sticker.green b{color:var(--on-bright)}
.seg{display:flex;gap:4px;padding:4px;background:var(--surface);border:2px solid var(--line);border-radius:15px}
.seg button{flex:1;min-height:40px;border-radius:11px;font-weight:700;font-size:14px;color:var(--muted);text-align:center}
.seg button[aria-pressed="true"]{background:var(--ink-btn);color:var(--ink-btn-text);font-weight:800}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:38px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--ink-btn);color:var(--ink-btn-text);font-weight:800}
.switch{position:relative;flex:none;width:52px;height:30px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:15px;background:var(--surface);border:2px solid var(--line);transition:background .15s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #231F33;transition:transform .15s}
.switch input:checked+span{background:var(--grn2)}
.switch input:checked+span::after{transform:translateX(22px)}
.switch input:focus-visible+span{outline:3px solid var(--coral);outline-offset:2px}
.step{display:flex;align-items:center;border:2px solid var(--line);border-radius:12px;height:36px;background:var(--surface)}
.step button{width:32px;height:32px;display:grid;place-items:center}
.step span{min-width:16px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.link{font-size:12.5px;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.dashed{border:2px dashed var(--line);border-radius:18px;background:var(--surface);padding:10px 12px}

/* ---------- liste ---------- */
.zone{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:12px;background:var(--surface);font-size:13px;font-weight:700}
.add{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:16px;padding:4px 4px 4px 14px}
.add>svg{color:var(--muted);flex:none}
.add input{flex:1;min-width:0;border:0;background:none;outline:none;height:44px;font-size:16px;font-weight:600}
.add input::placeholder{color:var(--muted)}
.add .iconbtn{width:40px;height:40px;background:var(--yel)}
.results{background:var(--surface);border-radius:18px;overflow:hidden;margin-top:-4px}
.result{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-top:2px solid var(--hair)}
.result:first-child{border-top:0}
.result .grow{display:flex;flex-direction:column}
.result b{font-size:15px}
.result small{color:var(--muted);font-size:12px;font-weight:600}
.result .rp{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;font-size:14.5px;display:flex;flex-direction:column;align-items:flex-end}
.result .rp small{font-weight:600}
.items{display:flex;flex-direction:column;gap:10px}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px 8px 8px;border-radius:18px;background:var(--surface);min-height:60px}
.item-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.item-n{font-weight:800;font-size:15.5px;line-height:1.2}
.item-m{font-size:12px;color:var(--muted);font-weight:600}
.item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.item-tags:empty{display:none}
.item.done{opacity:.55}
.item.done .item-n{text-decoration:line-through}
.item-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cta-dock{position:sticky;bottom:4px;z-index:3;padding-top:6px}
.cta-dock .btn{width:100%}

/* ---------- comparer ---------- */
.rank-list{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.store{position:relative;background:var(--surface);border-radius:18px}
.store.best{background:var(--grn)}
.store.missing{background:var(--ground);border-style:dashed;box-shadow:none}
.flag{position:absolute;top:-12px;left:14px;transform:rotate(-2deg);background:var(--grn2);color:var(--on-bright);border:2px solid var(--line);border-radius:999px;padding:1px 10px;font-weight:800;font-size:11px;letter-spacing:.04em}
.store-head{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px 12px 10px;min-height:66px}
.rank{width:18px;font:800 15px var(--display);color:var(--muted);text-align:center;flex:none}
.store-id{flex:1;min-width:0;display:flex;flex-direction:column}
.store-id strong{font-size:16px;font-weight:800}
.store-id span{font-size:12px;color:var(--muted);font-weight:600}
.store-tot{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.store-tot strong{font:800 22px/1.1 var(--display);font-variant-numeric:tabular-nums}
.store-tot span{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.delta{color:var(--red)} .miss{color:var(--warn)}
.breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 12px}
.breakdown div{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:5px 7px;display:flex;flex-direction:column;min-width:0}
.breakdown small{font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.breakdown b{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.breakdown .save b{color:var(--ok)}
.lines{border-top:2px dashed var(--line);padding:6px 14px 12px}
.line{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:7px 0;border-bottom:2px solid var(--hair);font-size:13.5px}
.line:last-child{border-bottom:0}
.line .ln{min-width:0;font-weight:600}
.line .lv{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.line .lt{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px}
.line .lt:empty{display:none}
.missing-note{font-size:12.5px;color:var(--warn);font-weight:700;padding-top:8px}
.bigtotal{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bigtotal b{font:800 46px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stop{background:var(--surface);border-radius:20px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.stop-n{width:30px;height:30px;border-radius:50%;background:var(--ink-btn);color:var(--ink-btn-text);display:grid;place-items:center;font:800 15px var(--display);flex:none}
.icons-row{display:flex;flex-wrap:wrap;gap:4px}
.hop{display:flex;align-items:center;gap:8px;padding-left:28px;color:var(--muted);font-size:13px;font-weight:700}
.hop i{height:26px;border-left:2px dashed var(--line)}
.callout{background:var(--yel);border-radius:14px;padding:10px 12px;font-size:13px;font-weight:700}
.swap{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 0;border-top:2px solid var(--hair)}
.swap .from{font-size:14px;font-weight:800}
.swap .to{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px}
.swap .acts{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.swap .save{font-weight:800;color:var(--ok);font-size:13.5px;font-variant-numeric:tabular-nums}

/* ---------- plan (pile de cartes) ---------- */
.stack{position:relative;height:430px;margin:6px 4px 0}
.stack .back1,.stack .back2{position:absolute;border:2px solid var(--line);border-radius:28px}
.stack .back1{left:18px;right:2px;top:14px;bottom:0;transform:rotate(4deg);background:var(--blu)}
.stack .back2{left:8px;right:10px;top:8px;bottom:4px;transform:rotate(-2.5deg);background:var(--rose)}
.plan{position:absolute;inset:0 6px 12px 0;background:var(--surface);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:8px;animation:deal .3s cubic-bezier(.2,.8,.2,1)}
@keyframes deal{from{transform:translateX(40px) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
.plan .who{font:800 56px/.95 var(--display);letter-spacing:-.04em;margin-top:6px;overflow-wrap:anywhere}
.plan .who.long{font-size:42px}
.plan .tot{font:800 50px/1 var(--display);letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.plan .foot{margin-top:auto;border-top:2px dashed var(--line);padding-top:12px}
.plan .foot b{font:800 26px var(--display);color:var(--red)}
.plan-actions{display:flex;gap:12px;align-items:center}
.roundbtn{width:62px;height:62px;border-radius:50%;background:var(--surface);display:grid;place-items:center;flex:none}

/* ---------- scanner ---------- */
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:16px;padding:0 14px}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;height:48px;font-size:16px;font-weight:600}
.viewfinder{background:#15121F;color:#F1EEF8;border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:14px}
.vf{position:relative;aspect-ratio:16/11;max-width:100%;border-radius:16px;background:radial-gradient(ellipse at 50% 40%,#3A344F,#15121F 72%);display:grid;place-items:center;overflow:hidden}
.vf i{position:absolute;width:40px;height:40px;border:0 solid #FBF1D6}
.vf i:nth-child(1){left:14%;top:12%;border-left-width:5px;border-top-width:5px;border-top-left-radius:16px}
.vf i:nth-child(2){right:14%;top:12%;border-right-width:5px;border-top-width:5px;border-top-right-radius:16px}
.vf i:nth-child(3){left:14%;bottom:12%;border-left-width:5px;border-bottom-width:5px;border-bottom-left-radius:16px}
.vf i:nth-child(4){right:14%;bottom:12%;border-right-width:5px;border-bottom-width:5px;border-bottom-right-radius:16px}
.vf svg.bc{width:54%;height:auto;background:#FFF;padding:8px 10px 4px;border-radius:8px}
.vf-line{position:absolute;left:20%;right:20%;height:3px;background:#F0735A;box-shadow:0 0 14px 2px rgba(240,115,90,.8);top:50%;animation:scanline 1.8s ease-in-out infinite alternate}
@keyframes scanline{from{top:26%}to{top:74%}}
.vf-status{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:12.5px;font-weight:700;color:#CFC9E3}
.viewfinder .hint{color:#ADA7C4;text-align:center}
.viewfinder .btn{background:#F0735A;color:#1D1A2A;border-color:#F1EEF8;box-shadow:3px 3px 0 #F1EEF8}

/* ---------- fiche (feuille) ---------- */
.backdrop{position:absolute;inset:0;background:rgba(10,8,16,.5);z-index:20;animation:fade .2s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - env(safe-area-inset-top,0px) - 16px);overflow-y:auto;overscroll-behavior:contain;background:var(--ground);border-radius:28px 28px 0 0;border-top:2px solid var(--line);z-index:21;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;animation:rise .28s cubic-bezier(.2,.8,.2,1)}
.grabber{width:42px;height:5px;border-radius:3px;background:var(--line);opacity:.35;margin:0 auto 2px}
@keyframes rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-h{display:flex;gap:12px;align-items:center}
.sheet-h h3{font-size:26px;font-weight:800;line-height:1.05}
.sheet-h .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ean{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.bestbox{background:var(--grn);border-radius:20px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.bestbox .big{font:800 42px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 10px;border-radius:14px}
.prow.top{background:var(--grn);border:2px solid var(--line)}
.prow .pn{display:flex;flex-direction:column;min-width:0}
.prow .pn b{font-size:14px}
.prow .pn small{font-size:11px;color:var(--muted);font-weight:600}
.prow .pv{text-align:right;display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.prow .pv b{font-size:16px}
.prow .pv small{font-size:11px;color:var(--muted);font-weight:600}
.prow .ptags{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:4px;margin-top:-2px}
.prow .ptags:empty{display:none}
.spark{width:100%;height:60px;display:block}
.sheet-actions{display:flex;gap:10px}
.sheet-actions .btn:last-child{flex:1}
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12.5px;font-weight:800;color:var(--muted)}
.field input,.field select{height:48px;border-radius:14px;border:2px solid var(--line);background:var(--surface);padding:0 12px;font-size:15px;font-weight:600;width:100%}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- offres ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{border-radius:18px;padding:10px 14px;display:flex;flex-direction:column}
.stat small{font-size:12px;font-weight:700}
.stat b{font:800 26px/1.1 var(--display);font-variant-numeric:tabular-nums}
.offer{background:var(--surface);border-radius:20px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.offer.off{opacity:.6}
.exp{font-size:12px;font-weight:800;color:var(--muted)}
.exp.soon{color:var(--red)}
.offer h4{font-family:var(--body);font-size:15px;font-weight:800;letter-spacing:0;line-height:1.25}
.offer-meta{font-size:12px;color:var(--muted);font-weight:600}
.offer-val{font:800 24px/1 var(--display);color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.code{font-family:var(--mono);font-size:13.5px;padding:4px 10px;border-radius:10px;border:2px dashed var(--line);display:inline-flex;align-items:center;gap:6px}
.odr{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;white-space:nowrap;color:var(--muted)}
.odr .on{background:var(--grn2);color:var(--on-bright);border:2px solid var(--line);border-radius:8px;padding:1px 5px}

/* ---------- plus / budget / etc ---------- */
.menu{display:flex;flex-direction:column;gap:10px}
.menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px;border-radius:18px;background:var(--surface)}
.menu .grow{display:flex;flex-direction:column}
.menu small{color:var(--muted);font-size:12.5px;font-weight:600}
.progress{height:18px;border-radius:9px;background:var(--surface);border:2px solid var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:var(--yel);border-right:2px solid var(--line)}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:88px 1fr 64px;gap:8px;align-items:center;font-size:13px;font-weight:700}
.bar .track{height:14px;border-radius:7px;background:var(--surface);border:2px solid var(--line);overflow:hidden}
.bar .track i{display:block;height:100%;border-right:2px solid var(--line)}
.bar b{text-align:right;font-variant-numeric:tabular-nums}
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--body);fill:var(--muted);font-size:11px;font-weight:700}
.chart .val{fill:var(--ink);font-weight:800}
.list-rows .row{padding:9px 0;border-top:2px solid var(--hair)}
.list-rows .row:first-of-type{border-top:0}
.receipt{background:var(--paper);color:#23231F;font-family:var(--mono);font-size:12px;line-height:1.6;padding:14px 16px;border-radius:6px;transform:rotate(-1.2deg)}
.receipt .rl{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
.receipt .rl span:first-child{overflow:hidden;text-overflow:ellipsis}
.receipt hr{border:0;border-top:1px dashed #23231F;margin:6px 0;opacity:.6}
.receipt .rc{text-align:center}
.drop{border:2px dashed var(--line);border-radius:22px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:var(--surface)}
.match{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:14px;font-weight:700}
.dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:13px}
.range-row{display:flex;align-items:center;gap:12px}
.range-row input{flex:1;accent-color:var(--coral);height:28px}
.range-row output{font:800 26px var(--display);min-width:78px;text-align:right;font-variant-numeric:tabular-nums}
.store-chips{display:flex;flex-wrap:wrap;gap:6px}
.schip{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 10px 0 3px;border-radius:18px;border:2px solid var(--line);background:var(--surface);font-weight:700;font-size:12.5px}
.schip[aria-pressed="false"]{opacity:.45;text-decoration:line-through;background:var(--hair)}
.src{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.src i{flex:none;width:12px;height:12px;border-radius:50%;margin-top:4px;border:2px solid var(--line)}

/* ---------- parcours intelligent ---------- */
.reco{background:var(--grn);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:6px}
.reco .kicker{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.reco .who{font:800 44px/.95 var(--display);letter-spacing:-.03em}
.reco .tot{font:800 40px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.reco .acts{display:flex;gap:10px;margin-top:8px}
.reco .acts .btn:first-child{flex:1}
.feed{background:var(--surface);border-radius:20px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.feed .fh{display:flex;align-items:center;gap:10px}
.feed .fh .grow{display:flex;flex-direction:column;min-width:0}
.feed .fh b{font-size:15px}
.feed .acts{display:flex;gap:8px;flex-wrap:wrap}
.mini-chips{display:flex;flex-wrap:wrap;gap:6px}
.addchip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 4px;border-radius:18px;border:2px solid var(--line);background:var(--surface);font-weight:700;font-size:13px}
.addchip .pastille{width:26px;height:26px}
.section-h{display:flex;align-items:center;gap:8px;margin-top:6px}
.section-h .label{flex:1}
.shopbar{background:var(--ink-btn);color:var(--ink-btn-text);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:8px}
.shopbar .big{font:800 26px/1.05 var(--display)}
.shopbar .meter{height:12px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden;border:2px solid currentColor}
.shopbar .meter i{display:block;height:100%;background:var(--grn2)}
.fix{display:flex;gap:6px;align-items:center;margin-top:6px}
.fix input{width:90px;height:36px;border-radius:10px;border:2px solid var(--line);background:var(--surface);padding:0 8px;font-weight:700}
.rule{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:2px solid var(--hair)}
.rule:first-of-type{border-top:0}
.rule p{font-size:13.5px;color:var(--muted);font-weight:500}
.rule b{display:block;font-size:15px;color:var(--ink)}
.steps{display:flex;flex-direction:column;gap:8px;counter-reset:st}
.steps li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600}
.steps li::before{counter-increment:st;content:counter(st);flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:var(--yel);display:grid;place-items:center;font:800 12px var(--display)}
.steps ol{margin:0;padding:0}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:14px}
.toast{position:absolute;left:16px;right:16px;bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--ink-btn);color:var(--ink-btn-text);border:2px solid var(--line);box-shadow:3px 3px 0 var(--coral);border-radius:14px;padding:11px 14px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;animation:pop .22s ease-out}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- caméra ---------- */
.camera{position:absolute;inset:0;z-index:60;background:#0E0C14;color:#F1EEF8;display:flex;flex-direction:column}
.camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px}
.cam-top .iconbtn{background:#FFFFFF;color:#231F33;border-color:#231F33}
.cam-status{background:#FFFFFF;color:#231F33;border:2px solid #231F33;border-radius:12px;padding:6px 12px;font-weight:800;font-size:13px;text-align:center}
.cam-frame{position:relative;z-index:2;margin:auto;width:78%;max-width:360px;aspect-ratio:16/10}
.cam-frame i{position:absolute;width:44px;height:44px;border:0 solid #FBF1D6}
.cam-frame i:nth-child(1){left:0;top:0;border-left-width:5px;border-top-width:5px;border-top-left-radius:18px}
.cam-frame i:nth-child(2){right:0;top:0;border-right-width:5px;border-top-width:5px;border-top-right-radius:18px}
.cam-frame i:nth-child(3){left:0;bottom:0;border-left-width:5px;border-bottom-width:5px;border-bottom-left-radius:18px}
.cam-frame i:nth-child(4){right:0;bottom:0;border-right-width:5px;border-bottom-width:5px;border-bottom-right-radius:18px}
.cam-frame .vf-line{left:8%;right:8%}
.cam-bottom{position:relative;z-index:2;background:var(--ground);color:var(--ink);border-top:2px solid var(--line);border-radius:24px 24px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.cam-bottom form{display:flex;gap:8px}
.cam-bottom input{flex:1;min-width:0;height:50px;border-radius:14px;border:2px solid var(--line);background:var(--surface);padding:0 12px;font-weight:700;letter-spacing:.04em;font-family:var(--mono)}
.real-img{flex:none;width:64px;height:64px;border-radius:16px;border:2px solid var(--line);background:#fff;object-fit:contain}
.oprow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-top:2px solid var(--hair)}
.oprow:first-of-type{border-top:0}
.oprow b{font-size:14px}
.oprow small{font-size:11.5px;color:var(--muted);font-weight:600}
.oprow .pv{text-align:right;font:800 17px var(--display);font-variant-numeric:tabular-nums}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--hair);border-top-color:var(--coral);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- v1.1 : mode réel, partage, accessibilité ---------- */
.pthumb{flex:none;width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.pthumb img{width:100%;height:100%;object-fit:contain}
.pthumb.big{width:64px;height:64px;border-radius:16px}
.pthumb.sm{width:30px;height:30px;border-radius:9px}
.field textarea{border-radius:14px;border:2px solid var(--line);background:var(--surface);padding:10px 12px;font-size:16px;font-weight:600;width:100%;resize:vertical;font-family:var(--mono);line-height:1.4}
.field input[type="file"]{height:auto;padding:10px 12px}
.match select{margin-top:3px;max-width:100%;border:1.5px solid var(--hair);border-radius:9px;background:var(--surface);font-size:13px;font-weight:600;padding:3px 6px}
.qr{align-self:center;width:min(240px,70vw);padding:10px;border-radius:18px;background:#fff}
.qr svg{display:block;width:100%;height:auto}
.qr svg path,.qr svg rect[fill="black"]{fill:#111}
.steps-plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-weight:700}
.steps-plain li{display:flex;gap:10px;align-items:flex-start}
.steps-plain svg{flex:none;margin-top:1px}
button.demo{cursor:pointer}
.topbar h2:focus{outline:none}
.sheet h3:focus{outline:none}
.list-rows p a,.card p a,.hint a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.acts label.btn{display:inline-flex;align-items:center;justify-content:center}
.store-id span,.pn small{overflow-wrap:anywhere}
/* taille du texte choisie dans l'app */
.app[data-ts="1"] .screen,.app[data-ts="1"] .sheet{zoom:1.12}
.app[data-ts="2"] .screen,.app[data-ts="2"] .sheet{zoom:1.25}
.app[data-ts="2"] .topbar h2{font-size:26px}
@media (forced-colors:active){.pill,.chip,.btn,.ol,.ol2{border:1px solid CanvasText}}
a.btn{text-decoration:none}