/* Demos interactives — reproductions fideles des ecrans Vendix (POS, Cafe, Market). */
.demo-stage { font-family: "Segoe UI", system-ui, sans-serif; color: #1f2433; font-size: 14px; line-height: 1.3; }
.demo-loading { display: grid; place-items: center; height: 100%; color: #8790a6; }
.dm { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: #f4f6fa; user-select: none; -webkit-user-select: none; }
:where(.dm) button { font: inherit; cursor: pointer; border: 0; }
.mk-root button { font: inherit; cursor: pointer; border: 0; }
.dm-cursor { position: absolute; z-index: 60; width: 28px; height: 28px; pointer-events: none; transition: left .65s cubic-bezier(.4, .1, .2, 1), top .65s cubic-bezier(.4, .1, .2, 1); display: none; }
.dm-cursor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 107, 53, .28); border: 3px solid #ff6b35; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 18px rgba(0, 0, 0, .35); }
.dm-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ff6b35; }
.dm-cursor.tap::before { animation: tap .4s; }
.dm-cursor.hold::before { animation: hold 1s infinite; background: rgba(240, 138, 36, .5); }
@keyframes tap { 50% { transform: scale(.55); background: rgba(255, 107, 53, .7); } }
@keyframes hold { 50% { transform: scale(1.35); } }
.dm-caption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(10px); z-index: 55; max-width: min(92%, 640px); background: rgba(11, 16, 32, .92); color: #fff;
  padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; text-align: center; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.dm-caption.on { opacity: 1; transform: translateX(-50%); }
.dm-toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%) translateY(-120%); z-index: 50; background: #12a150; color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); transition: transform .35s, opacity .35s; white-space: nowrap; opacity: 0; pointer-events: none; }
.dm-toast.on { transform: translateX(-50%) translateY(0); opacity: 1; }
.dm-veil { position: absolute; inset: 0; background: rgba(12, 16, 30, .66); z-index: 30; display: none; align-items: center; justify-content: center; padding: 16px; }
.dm-veil.on { display: flex; animation: fadeUp .25s; }

/* tickets imprimes */
.rcpt-wrap { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; max-height: 100%; overflow: auto; padding: 6px; }
.rcpt { width: 250px; background: #fff; color: #111; font: 11.5px/1.32 "Courier New", monospace; padding: 12px 12px 18px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); white-space: pre; position: relative; animation: printOut .7s ease-out; }
.rcpt b { font-weight: 700; }
.rcpt .big { font-size: 17px; font-weight: 700; display: block; text-align: center; }
.rcpt .c { display: block; text-align: center; }
.rcpt canvas { display: block; margin: 6px auto 0; image-rendering: pixelated; }
@keyframes printOut { from { clip-path: inset(0 0 100% 0); transform: translateY(-20px); } to { clip-path: inset(0); transform: none; } }
.rcpt-side { display: grid; gap: 10px; align-content: start; min-width: 200px; }
.rcpt-side .btn-n { background: #ff6b35; color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.rcpt-side .note { color: #fff; font-size: 13px; max-width: 220px; }

/* ===================== ECRANS REPRODUITS A L'ECHELLE (POS, Cafe) =====================
   L'ecran est dessine a taille fixe — 1280 x 720, soit la caisse 1920 x 1080 aux 2/3 — puis mis a l'echelle
   du cadre par demos.js (fitStage). Toutes les mesures ci-dessous sont donc celles des captures x 2/3.
   Sur telephone (.nar) : 430 px de large, la commande passe sous la carte. */
.demo-frame[data-demo="pos"] .demo-stage, .demo-frame[data-demo="cafe"] .demo-stage { aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 760px) { .demo-frame[data-demo="pos"] .demo-stage, .demo-frame[data-demo="cafe"] .demo-stage { aspect-ratio: 430 / 790; } }
.dm.fit { inset: auto; left: 0; top: 0; transform-origin: 0 0; font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif; }
.dm.fit .i { width: 1em; height: 1em; flex: none; display: block; }
.dm.fit ::-webkit-scrollbar { width: 0; height: 0; }
.dm.fit * { scrollbar-width: none; }
.dm.fit input { font: inherit; color: inherit; border: 0; outline: 0; background: none; min-width: 0; flex: 1; }
.dm.fit input::-webkit-search-cancel-button { display: none; }
.cf-lift { opacity: .35; transform: scale(.94); }
.cf-ghost { position: absolute; z-index: 58; pointer-events: none; transform: rotate(-3deg) scale(1.06); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5); border-color: #f7841e !important; margin: 0 !important; }

/* ===================== POS ===================== */
.px { background: #f3f4f9; color: #1c1c2a; grid-template-rows: 52px minmax(0, 1fr); font-size: 12px; }
.px-top { display: flex; align-items: center; background: #fff; padding: 0 13px 0 54px; }
.px-logo { font: 900 21.5px/1 "Segoe UI Black", "Segoe UI", "Arial Black", "Plus Jakarta Sans", sans-serif; color: #ff6b35; width: 299px; white-space: nowrap; letter-spacing: .005em; }
.px-tb { display: flex; gap: 6px; }
.px-tb .b { height: 37px; width: 99px; border-radius: 7px; background: var(--b); color: #fff; font-weight: 600; font-size: 11.5px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.px-tb .b .i { font-size: 13.5px; }
.px-tb .ouv { box-shadow: inset 0 0 0 2px #e6b545, 0 1px 2px rgba(0, 0, 0, .22); }
.px-mode { margin-left: auto; margin-right: 37px; display: flex; align-items: center; gap: 9px; color: #696c82; font-size: 11px; }
.px-mode i { width: 42px; height: 21px; border-radius: 11px; background: #87b4ff; display: flex; align-items: center; justify-content: flex-end; padding: 2px; }
.px-mode i .i { width: 17px; height: 17px; padding: 3px; border-radius: 50%; background: #5d92e6; color: #fff; }
.px-user { width: 139px; height: 37px; border-radius: 7px; background: #2a8c5f; color: #fff; display: flex; align-items: center; gap: 9px; padding: 0 11px; font-size: 8px; letter-spacing: .02em; line-height: 1.2; position: relative; margin-right: 5px; }
.px-user b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.px-user > .i { font-size: 17px; }
.px-user::after { content: ""; position: absolute; left: 22px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: #48e07a; }
.px-sq { width: 41px; height: 37px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 16px; margin-left: 5px; }
.px-body { display: grid; grid-template-columns: 1000px 280px; min-height: 0; }
.px-left { padding: 11px 11px 0; min-height: 0; overflow-y: auto; position: relative; }
.px-search { display: flex; align-items: center; gap: 8px; height: 32px; border-radius: 6px; background: #e8eaf2; border: 1px solid #dcdfe9; padding: 0 10px; color: #696c82; font-size: 13px; margin-bottom: 12px; cursor: text; }
.px-search .i { font-size: 16px; color: #50536a; }
.px-search input::placeholder { color: #696c82; }
.px-cats { display: grid; grid-template-columns: repeat(5, 181px); gap: 15px 14px; padding-left: 6px; }
.px-cat { width: 181px; height: 188px; background: #fff; border-radius: 10px; border: 1px solid #ebedf3; padding: 3px; text-align: left; transition: transform .12s, box-shadow .12s; }
.px-cat:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .25); }
.px-cat .ph { height: 147px; border-radius: 8px; background: center / 86% auto no-repeat, linear-gradient(#f5f6fa, #edeff3); background-repeat: no-repeat; background-position: center; background-size: 86% auto, cover; }
.px-cat .nm { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 7px 0 8px; font-size: 12px; color: #1c1c2a; white-space: nowrap; }
.px-cat .nm i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.px-cat .nm span { overflow: hidden; text-overflow: ellipsis; }
.px-cat .nm em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 9.5px; min-width: 20px; height: 14px; line-height: 14px; text-align: center; border-radius: 7px; background: color-mix(in srgb, var(--c) 19%, #fff); color: color-mix(in srgb, var(--c) 66%, #000); }
.px-found { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 0 6px 12px; }
.px-found .none, .px-ouv .none { grid-column: 1 / -1; color: #696c82; text-align: center; padding: 40px 0; margin: 0; }
.px-right { background: #fff; padding: 0 11px 13px; display: flex; flex-direction: column; min-height: 0; }
.px-right h4 { margin: 12px 0 0; text-align: center; color: #ff6b35; font-family: inherit; font-weight: 400; font-size: 13px; line-height: 1.2; letter-spacing: .01em; }
.px-th, .px-line .m { display: grid; grid-template-columns: minmax(0, 1fr) 30px 41px 53px; align-items: center; }
.px-th { margin-top: 13px; padding: 0 9px 6px 8px; font-size: 9.5px; color: #4d5a78; border-bottom: 1px solid #d5d8e3; }
.px-th span:nth-child(2), .px-line .m span:nth-child(2) { text-align: center; }
.px-th span:nth-child(n+3), .px-line .m span:nth-child(n+3) { text-align: right; }
.px-lines { flex: 1; min-height: 0; overflow-y: auto; padding-top: 5px; display: flex; flex-direction: column; gap: 5px; }
.px-line { border-radius: 4px; overflow: hidden; background: #e8eaf2; cursor: pointer; flex: none; }
.px-line .m { height: 27px; padding: 0 9px 0 8px; font-size: 10.5px; }
.px-line .m span:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-line .m span:nth-child(2), .px-line .m span:last-child { font-weight: 700; }
.px-line .s { border-top: 1px solid #f3f4f9; padding: 2px 10px 3px 11px; font-size: 9px; font-style: italic; color: #2f9458; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-line.sel { background: #ebd8d8; box-shadow: inset 3px 0 0 #ff6b35; }
.px-rendu { flex: none; align-self: center; margin: 8px 0 11px; width: 138px; height: 38px; border-radius: 8px; background: linear-gradient(#fdd96c, #f4b829); border: 1px solid #dfa51f !important; color: #2c2100; font-weight: 700; font-size: 13.5px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 7px -2px rgba(120, 80, 0, .35); line-height: 1.15; }
.px-rendu span { display: flex; align-items: center; gap: 8px; }
.px-rendu.two { height: 44px; font-size: 11px; }
.px-rendu.two b { font-size: 14px; }
.px-acts { flex: none; }
.px-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.px-r2 button { display: flex; align-items: center; justify-content: center; gap: 9px; }
.px-att, .px-cui { height: 37px; border-radius: 8px; font-weight: 700; font-size: 12px; }
.px-att { background: #fff8e1; border: 2px solid #f9c73d !important; color: #f4b01c; }
.px-cui { background: #64b432; color: #fff; }
.px-att img, .px-cui img { width: 23px; height: 23px; }
.px-sep { display: block; height: 1.5px; border-radius: 2px; }
.px-sep.o { margin: 14px 5px 11px; background: linear-gradient(90deg, transparent, #ffa27f 20%, #ff8a5c 50%, #ffa27f 80%, transparent); }
.px-sep.b { margin: 7px 5px 0; background: linear-gradient(90deg, transparent, #9cc8f7 20%, #78b4f5 50%, #9cc8f7 80%, transparent); }
.px-sep.b2 { margin: 0 14px 4px; background: linear-gradient(90deg, transparent, #b9d8fa 30%, #b9d8fa 70%, transparent); }
.px-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 2px; }
.px-zones button { height: 27px; border-radius: 6px; background: #fff; border: 1px solid #e3e6ee !important; font-size: 10px; color: #50536a; display: flex; align-items: center; justify-content: center; gap: 7px; }
.px-zones button .i { font-size: 10.5px; }
.px-zones button.on { background: #ff6b35; border-color: #ff6b35 !important; color: #fff; font-weight: 700; }
.px-total { height: 37px; line-height: 37px; text-align: center; color: #3ec06f; font: 900 20px/37px "Segoe UI Black", "Segoe UI", "Arial Black", "Plus Jakarta Sans", sans-serif; letter-spacing: .03em; white-space: nowrap; }
.px-r2.big { gap: 4px 7px; }
.px-r2.big button { height: 44px; border-radius: 7px; color: #fff; font-size: 15.5px; font-weight: 500; gap: 10px; }
.px-r2.big button .i { font-size: 16px; }

/* popup d'une categorie */
.px-ov { position: absolute; inset: 0; z-index: 20; background: rgba(24, 27, 42, .3); animation: fadeIn .15s; }
@keyframes fadeIn { from { opacity: 0; } }
.px-card { position: absolute; left: 180px; top: 105px; width: 919px; height: 530px; background: #f3f4f9; border: 1.5px solid var(--a); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5); }
.px-card-h { height: 58px; flex: none; display: flex; align-items: center; padding: 0 9px 0 12px; }
.px-card-h > i { width: 30px; height: 30px; border-radius: 7px; background: color-mix(in srgb, var(--a) 20%, #fff) center / 82% auto no-repeat; }
.px-card-h > b { font-size: 17.5px; margin-left: 14px; }
.px-card-h .tt { margin-left: auto; height: 30px; border-radius: 15px; background: #fff; display: flex; align-items: center; padding: 0 16px 0 14px; font-size: 11px; font-weight: 700; color: #50536a; }
.px-card-h .tt b { color: #3ec06f; font-size: 16px; margin-left: 13px; }
.px-card-h .x { width: 33px; height: 33px; border-radius: 50%; background: #e8eaf2; display: grid; place-items: center; font-size: 17px; margin-left: 10px; color: #1c1c2a; }
.px-card-h .tt + .x { margin-left: 10px; }
.px-card-h > b + .x { margin-left: auto; }
.px-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 136px); gap: 12px; padding: 0 20px 16px; align-content: start; }
.px-prod { height: 144px; background: #fff; border-radius: 9px; padding: 8px 5px 9px; display: flex; flex-direction: column; align-items: stretch; text-align: center; position: relative; box-shadow: 0 1px 4px rgba(20, 24, 40, .14); border: 0; outline: 2px solid transparent; transition: transform .1s; color: #1c1c2a; }
.px-prod .ph { height: 66px; flex: none; background: center / contain no-repeat; }
.px-prod .nm { flex: 1; display: grid; place-items: center; font-size: 13px; line-height: 1.35; padding: 0 2px; }
.px-prod .pr { color: var(--a); font-weight: 700; font-size: 13.5px; }
.px-prod.sel { outline-color: var(--a); transform: scale(1.03); z-index: 1; }
.px-prod .q { position: absolute; top: 5px; right: 5px; min-width: 19px; height: 19px; line-height: 15px; border-radius: 10px; background: #48c774; border: 2px solid #fff; color: #fff; font-size: 10px; font-weight: 700; }
.px-rail { position: absolute; top: 105px; height: 530px; width: 72px; display: flex; flex-direction: column; justify-content: center; gap: 12px; pointer-events: none; }
.px-rail > * { pointer-events: auto; }
.px-rail.l { left: 95px; }
.px-rail.r { left: 1112px; }
.px-rail .rb { height: 68px; border-radius: 16px; background: #fff; border: 1.5px solid #2c2f3d !important; color: #696c82; font-size: 11.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; position: relative; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .45); }
.px-rail .rb .i { font-size: 22px; color: #9a9db0; }
.px-rail .rb.ok { border-color: var(--c) !important; color: #1c1c2a; }
.px-rail .rb.ok .i { color: var(--c); }
.px-rail .rb.on { background: var(--c); color: #fff; }
.px-rail .rb.on .i { color: #fff; }
.px-rail .rb.on .i [stroke="#fff"] { stroke: var(--c); }
.px-rail .rb em { position: absolute; top: 6px; right: 7px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--c); color: #fff; font-style: normal; font-size: 9.5px; }
.px-rail .rb.on em { background: #fff; color: var(--c); }
.px-rail .sz { height: 61px; border-radius: 16px; background: #fff; border: 1.5px solid var(--a) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #1c1c2a; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .45); }
.px-rail .sz b { font-size: 13px; }
.px-rail .sz small { font-size: 10px; color: #696c82; }
.px-rail .sz.on { background: var(--a); color: #fff; }
.px-rail .sz.on small { color: #fff; }
.px-strip { position: absolute; left: 180px; right: 12px; top: 33px; height: 68px; display: flex; align-items: center; gap: 9px; pointer-events: none; overflow: hidden; }
.px-chip { pointer-events: auto; flex: none; width: 146px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid rgba(105, 108, 130, .35) !important; padding: 5px 12px 0; text-align: left; position: relative; color: #1c1c2a; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; line-height: 1.3; }
.px-chip b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.px-chip i { position: absolute; top: 5px; right: 9px; font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--a); border-radius: 9px; padding: 1px 7px; }
.px-chip i ~ b, .px-chip:has(i) b { padding-right: 34px; }
.px-chip small { display: block; font-size: 9px; color: #696c82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 12px; margin-top: 1px; }
.px-chip em { position: absolute; right: 12px; bottom: 4px; font-style: normal; font-weight: 700; font-size: 11px; color: #3ec06f; }
.px-chip.sel { width: 150px; height: 64px; background: color-mix(in srgb, var(--a) 16%, #fff); border: 2px solid var(--a) !important; padding-top: 7px; }
.px-chip.sel b { font-size: 12.5px; }
.px-step { position: absolute; left: 561px; top: 647px; width: 157px; height: 48px; border-radius: 24px; background: #fff; border: 1.5px solid var(--a); display: flex; align-items: center; justify-content: space-between; padding: 0 5px; font-weight: 800; font-size: 25px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .45); }
.px-step button { width: 37px; height: 37px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 22px; }
.px-step button .i { stroke-width: 3; }
.px-step [data-m] { background: #ff5252; }
.px-step [data-pl] { background: #48c774; }
.px-panel { position: absolute; left: 10px; top: 52px; bottom: 10px; width: 332px; z-index: 3; background: #fff; border: 1.5px solid var(--pc); border-radius: 13px; padding: 10px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5); animation: fadeIn .15s; }
.px-panel .oc { height: 35px; border-radius: 6px; background: #e8eaf2; border: 1px solid #d3d7e3 !important; font-size: 11.5px; font-weight: 500; color: #1c1c2a; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; }
.px-panel .oc small { font-size: 10px; color: #696c82; font-weight: 600; }
.px-panel .oc.on { background: var(--pc); border-color: var(--pc) !important; color: #fff; }
.px-panel .oc.on small { color: #fff; }
.px-panel .oc.free { grid-column: 1 / -1; background: #fff; }

/* commandes ouvertes */
.px-ouv { position: absolute; inset: 0; z-index: 6; background: #f3f4f9; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.px-ouv[hidden] { display: none; }
.px-ouv .h { display: flex; align-items: center; justify-content: space-between; }
.px-ouv .h b { font-size: 17px; }
.px-ouv .h button { height: 34px; padding: 0 14px; border-radius: 7px; background: #e8eaf2; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.px-ouv .cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.px-ouv .col { background: #fff; border-radius: 10px; display: flex; flex-direction: column; min-height: 0; border-top: 3px solid var(--c); }
.px-ouv h5 { margin: 0; padding: 10px 12px; font-family: inherit; font-weight: 700; font-size: 13.5px; line-height: 1.2; display: flex; align-items: baseline; gap: 8px; }
.px-ouv h5 small { font-weight: 400; color: #696c82; font-size: 10.5px; }
.px-ouv h5 em { margin-left: auto; font-style: normal; background: var(--c); color: #fff; border-radius: 9px; padding: 1px 8px; font-size: 11px; }
.px-ouv .list { flex: 1; overflow-y: auto; padding: 0 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.px-ouv .oc2 { text-align: left; background: #f8f9fc; border: 1.5px solid color-mix(in srgb, var(--c) 55%, #fff) !important; border-radius: 9px; padding: 8px 10px; color: #1c1c2a; display: block; }
.px-ouv .oc2 b { font-size: 14px; }
.px-ouv .oc2 span { float: right; font-size: 10px; color: #696c82; margin-top: 3px; }
.px-ouv .oc2 p { margin: 3px 0 0; font-size: 10.5px; color: #3b3e52; }
.px-ouv .oc2 strong { display: block; margin-top: 6px; color: #3ec06f; font-size: 13px; }
.px-ouv-on .px-left { overflow: hidden; }

/* encaissement especes (calcul du rendu) */
.px-pay { width: 427px; background: #f3f4f9; border-radius: 9px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); animation: fadeUp .2s; color: #1c1c2a; font-family: "Segoe UI", system-ui, sans-serif; }
.px-pay .i { width: 1em; height: 1em; display: block; }
.px-pay .h { height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: linear-gradient(90deg, #ffe8df, #fff7f5); border-bottom: 1px solid #f0d9d0; }
.px-pay .h i { width: 31px; height: 31px; border-radius: 7px; background: linear-gradient(135deg, #ff8f57, #f0603a); color: #fff; font-style: normal; display: grid; place-items: center; font-size: 17px; }
.px-pay .h b { font-size: 16.5px; }
.px-pay .h button { margin-left: auto; background: none; font-size: 22px; color: #3b3e52; }
.px-pay .t { text-align: center; font-weight: 800; font-size: 26px; color: #c44e0a; padding: 10px 0 2px; }
.px-pay .in { display: flex; align-items: center; margin: 0 13px; }
.px-pay .in span { width: 107px; padding-left: 5px; font-size: 14.5px; }
.px-pay .in div { flex: 1; height: 43px; line-height: 43px; background: #fff; text-align: center; font: 900 31px/43px "Segoe UI Black", "Segoe UI", "Arial Black", sans-serif; }
.px-pay .msg { margin: 7px 13px 0; height: 33px; display: grid; place-items: center; background: #d3e4df; color: #108442; font-size: 15px; text-align: center; padding: 0 8px; }
.px-pay .msg.warn { background: #fbe1e1; color: #c0392b; }
.px-pay .msg.idle { background: #e8eaf2; color: #5b6078; font-size: 11px; }
.px-pay .g { display: grid; grid-template-columns: 199px 1fr; gap: 13px; margin: 9px 13px 0; }
.px-pay .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.px-pay .keys button { height: 35px; background: #e8eaf2; font-weight: 700; font-size: 16px; display: grid; place-items: center; border-radius: 2px; }
.px-pay .keys .c { color: #ff5252; }
.px-pay .bills { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 8px; }
.px-pay .bills button { height: 45px; border-radius: 3px; background: center / cover no-repeat; transition: transform .1s; }
.px-pay .bills button:active { transform: scale(.94); }
.px-pay .bills .v5 { background-color: #969ea8; background-size: auto 86%; }
.px-pay .bills .v10 { background-color: #c6a050; background-size: auto 86%; }
.px-pay .px-sep.o { margin: 10px 13px 0; }
.px-pay .f { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 8px 13px 10px; }
.px-pay .f button { height: 34px; border-radius: 4px; color: #1c1c2a; }
.px-pay .f .a { background: #8c94aa; font-weight: 700; font-size: 11px; }
.px-pay .f .v { background: #48c774; font-size: 15px; }

/* POS sur telephone (430 px de large) */
.px.nar { grid-template-rows: 46px minmax(0, 1fr); }
.px.nar .px-top { padding: 0 8px 0 10px; }
.px.nar .px-logo { width: auto; font-size: 17px; margin-right: auto; }
.px.nar .px-tb .b:not(.ouv), .px.nar .px-mode, .px.nar .px-sq { display: none; }
.px.nar .px-tb .b { height: 33px; width: 92px; }
.px.nar .px-user { width: 104px; height: 33px; margin: 0 0 0 6px; }
.px.nar .px-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.px.nar .px-left { padding: 8px 8px 0; }
.px.nar .px-search { margin-bottom: 8px; }
.px.nar .px-cats { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 0 8px; }
.px.nar .px-cat { width: auto; height: 132px; }
.px.nar .px-cat .ph { height: 94px; }
.px.nar .px-cat .nm { height: 30px; font-size: 11px; gap: 5px; padding: 0 4px; }
.px.nar .px-found { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 0 8px; }
.px.nar .px-right { padding: 0 8px 8px; box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .3); position: relative; }
.px.nar .px-right h4 { margin-top: 7px; font-size: 12px; }
.px.nar .px-th { margin-top: 6px; }
.px.nar .px-lines { flex: none; height: 92px; }
.px.nar .px-rendu { position: absolute; right: 8px; top: 3px; margin: 0; width: 112px; height: 30px; font-size: 12px; }
.px.nar .px-rendu.two { height: 34px; }
.px.nar .px-acts { margin-top: 6px; }
.px.nar .px-sep.o { margin: 7px 5px 6px; }
.px.nar .px-total { height: 30px; line-height: 30px; }
.px.nar .px-r2.big button { height: 38px; }
.px.nar .px-card { left: 8px; top: 78px; width: 414px; height: auto; bottom: 150px; }
.px.nar .px-card-h { height: 48px; }
.px.nar .px-card-h .tt { padding: 0 10px; }
.px.nar .px-card-h .tt b { margin-left: 8px; font-size: 14px; }
.px.nar .px-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 9px 12px; }
.px.nar .px-prod { height: 128px; }
.px.nar .px-prod .ph { height: 56px; }
.px.nar .px-prod .nm { font-size: 12px; }
.px.nar .px-strip { left: 8px; right: 8px; top: 6px; }
.px.nar .px-rail { top: auto; bottom: 78px; height: 62px; width: auto; flex-direction: row; gap: 7px; }
.px.nar .px-rail.l { left: 8px; }
.px.nar .px-rail.r { left: auto; right: 8px; }
.px.nar .px-rail .rb, .px.nar .px-rail .sz { width: 62px; height: 62px; }
.px.nar .px-rail .rb .i { font-size: 19px; }
.px.nar .px-step { left: 137px; top: auto; bottom: 16px; }
.px.nar .px-panel { left: 8px; right: 8px; width: auto; top: 46px; bottom: 8px; }
.px.nar .px-ouv .cols { grid-template-columns: 1fr; }
.px.nar .px-pay { width: 400px; }
.px.nar .px-pay .g { grid-template-columns: 186px 1fr; gap: 10px; }

/* ===================== CAFE ===================== */
.cx { background: #eceff3; color: #1c222c; grid-template-rows: 43px minmax(0, 1fr); font-size: 12px; }
.cx-top { background: #181e27; color: #fff; display: flex; align-items: center; padding: 0 8px 0 15px; position: relative; }
.cx-logo { width: 36px; height: 36px; border-radius: 50%; background: #3c4149; display: grid; place-items: center; color: #f7841e; font-size: 19px; flex: none; }
.cx-top .nm { margin-left: 12px; line-height: 1.15; }
.cx-top .nm b { display: block; font-size: 17px; }
.cx-top .nm span { font-size: 9px; color: #aab1bd; }
.cx-search { position: absolute; left: 352px; top: 7px; width: 419px; height: 30px; border-radius: 15px; background: #fff; color: #78828f; display: flex; align-items: center; gap: 9px; padding: 0 14px; font-size: 13px; cursor: text; }
.cx-search .i { font-size: 17px; }
.cx-search input { color: #1c222c; }
.cx-search input::placeholder { color: #78828f; }
.cx-top .sp { flex: 1; }
.cx-rb { width: 33px; height: 33px; border-radius: 50%; background: #493a31; color: #f6e9dc; display: grid; place-items: center; font-size: 19px; margin-left: 6px; flex: none; }
.cx-rb.g { background: #4a4f58; color: #d6dae0; font-size: 17px; }
.cx-rb.p { background: #46313b; color: #e45b5b; font-size: 16px; }
.cx-top .vs { width: 1px; height: 18px; background: #3c4350; margin: 0 2px 0 15px; }
.cx-clock { text-align: right; line-height: 1.15; margin: 0 9px 0 14px; min-width: 78px; }
.cx-clock b { display: block; font-size: 15px; }
.cx-clock span { font-size: 9px; color: #aab1bd; }
.cx-body { display: grid; grid-template-columns: 880px 381px; gap: 7px; padding: 6px 7px 7px 5px; min-height: 0; }
.cx-left, .cx-right { background: #fff; border-radius: 8px; min-height: 0; min-width: 0; }
.cx-left { display: flex; flex-direction: column; }
.cx-tabs { flex: none; display: flex; gap: 8px; padding: 3px 6px 0; overflow-x: auto; }
.cx-tabs button { height: 32px; padding: 0 19px; border-radius: 16px; background: #fff; border: 1px solid #e1e5eb !important; font-weight: 700; font-size: 12.5px; color: #1c222c; white-space: nowrap; display: flex; align-items: center; gap: 8px; flex: none; }
.cx-tabs button .i { font-size: 12px; }
.cx-tabs button.on { background: #f7841e; border-color: #f7841e !important; color: #fff; }
.cx-band-msg { flex: none; margin: 6px 8px 0; height: 22px; line-height: 22px; border-radius: 11px; background: #e26c0c; color: #fff; font-weight: 700; font-size: 10px; text-align: center; letter-spacing: .02em; }
.cx-band-msg[hidden] { display: none; }
.cx-board { flex: 1; min-height: 0; margin-top: 8px; padding: 0 5px 5px 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.cx-bd { display: flex; gap: 3px; min-height: 0; flex-basis: 0; }
.cx-block { border: 2px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 9%, #fff); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; flex-basis: 0; }
.cx-block h5 { margin: 0; flex: none; height: 18px; background: var(--c); color: #fff; font-family: inherit; font-weight: 700; font-size: 9.5px; line-height: 18px; letter-spacing: .01em; text-transform: uppercase; padding: 0 9px 0 8px; display: flex; justify-content: space-between; white-space: nowrap; }
.cx-block h5 span:last-child { font-size: 8.5px; }
.cx-block .rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 2px; }
.cx-block .row { flex: 1; min-height: 0; display: flex; gap: 3px; }
.cx-p { flex: 1 1 0; min-width: 0; min-height: 0; background: #fff; border: 1px solid #c6cad2 !important; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px 5px; color: #1c222c; --c: #2979cd; }
.cx-block .cx-p { --c: inherit; }
.cx-p .ph { flex: 0 1 52px; min-height: 22px; width: 84%; background: center / contain no-repeat; }
.cx-p b { font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 3px; }
.cx-p em { font-style: normal; font-weight: 700; font-size: 11px; color: var(--c); line-height: 1.5; }
.cx-block .cx-p em { color: color-mix(in srgb, var(--c) 92%, #000); }
.cx-p:active { background: #fff3e6; }
.cx-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 118px; gap: 6px; align-content: start; }
.cx-none { color: #78828f; text-align: center; padding: 60px 0; margin: 0; font-size: 13px; }
.cx-right { display: flex; flex-direction: column; padding: 0 9px 8px; position: relative; }
.cx-th { flex: none; height: 51px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.cx-th > .i { font-size: 16px; color: #f7841e; }
.cx-th em { font-style: normal; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; background: #dc3c3c; color: #fff; font-size: 9.5px; font-weight: 700; margin-left: 6px; }
.cx-th em[hidden] { display: none; }
.cx-th button { margin-left: auto; width: 86px; height: 30px; border-radius: 5px; background: #dc3c3c; color: #fff; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-right: -9px; border-radius: 6px 8px 6px 6px; }
.cx-lines { flex: 1; min-height: 0; overflow-y: auto; }
.cx-empty { text-align: center; color: #9aa1ad; padding: 70px 10px; font-size: 12px; line-height: 1.6; }
.cx-line { display: grid; grid-template-columns: 28px 30px 28px minmax(0, 1fr) auto 26px; align-items: center; height: 41px; border-bottom: 1px solid #eef0f3; font-size: 12.5px; margin-right: 6px; }
.cx-line button:not(.del) { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #e1e5eb !important; font-size: 16px; font-weight: 700; line-height: 1; color: #1c222c; }
.cx-line i { font-style: normal; font-weight: 700; text-align: center; }
.cx-line span { padding-left: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2b323d; }
.cx-line b { padding: 0 8px; }
.cx-line .del { background: none; color: #e57272; font-size: 17px; display: grid; place-items: center; }
.cx-end { flex: none; height: 36px; border-radius: 8px; background: #16a34a; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.cx-end[hidden] { display: none; }
.cx-foot { flex: none; border-top: 1px solid #eef0f3; }
.cx-foot .sub { display: flex; justify-content: space-between; font-size: 11px; color: #78828f; margin-top: 9px; }
.cx-foot .sub span:last-child { color: #2b323d; }
.cx-foot .tot { display: flex; justify-content: space-between; align-items: baseline; color: #16a34a; font-weight: 700; font-size: 18px; margin: 9px 1px 12px; }
.cx-foot .tot b { font-size: 23px; font-weight: 800; }
.cx-foot .place { width: 100%; height: 34px; border-radius: 7px; background: #f8f9fb; border: 1px solid #98a2b3 !important; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #1c222c; }
.cx-foot .place .i { font-size: 17px; }
.cx-foot .place.on { background: #f7841e; border-color: #f7841e !important; color: #fff; }
.cx-foot .pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.cx-foot .pay button { height: 44px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.cx-foot .pay .i { font-size: 18px; }
.cx-foot .lbl { margin-top: 13px; font-size: 9.5px; font-weight: 700; color: #78828f; letter-spacing: .02em; }
.cx-waiters { display: flex; align-items: center; margin-top: 6px; height: 62px; }
.cx-w { flex: 1; display: grid; justify-items: center; gap: 4px; font-size: 10.5px; color: #8a93a0; background: none; }
.cx-w i { width: 46px; height: 46px; border-radius: 50%; background: #f1f3f6; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 16px; color: #78828f; border: 2px solid transparent; }
.cx-w.on { color: #1c222c; font-weight: 700; }
.cx-w.on i { border-color: #f7841e; background: #fff3e6; color: #f7841e; }
.cx-waiters .vs { width: 1px; height: 46px; background: #eef0f3; margin: 0 8px 0 2px; }
.cx-sw { background: none; display: grid; justify-items: center; gap: 2px; color: #f7841e; font-size: 16px; width: 56px; }
.cx-sw i { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #f7841e; display: grid; place-items: center; font-size: 24px; }
/* mode reorganisation : la caisse change de couleur, on le voit de loin */
.cx-arr { background: #eedfcb; }
.cx-arr .cx-left { background: #fff1e0; outline: 2px dashed #f7841e; outline-offset: -3px; }
.cx-arr .cx-p { cursor: grab; touch-action: none; }
.cx-arr .cx-tabs button { cursor: grab; touch-action: none; }
/* bulle « avec eau ? » */
.cx-water { position: absolute; z-index: 24; width: 236px; height: 104px; background: #fff; border: 2px solid #2d64c8; border-radius: 12px; text-align: center; padding: 8px 9px 0; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .5); animation: fadeIn .12s; }
.cx-water b { display: block; font-size: 14.5px; }
.cx-water span { display: block; font-size: 10.5px; color: #78828f; margin-top: 2px; }
.cx-water div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.cx-water button { height: 36px; border-radius: 8px; font-weight: 700; font-size: 11.5px; color: #fff; background: #58657a; }
.cx-water button[data-water="1"] { background: #2d64c8; }
.cx-water::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: #fff; border: solid #2d64c8; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cx-water.below::after { bottom: auto; top: -9px; border-width: 2px 0 0 2px; }
/* fenetres (code, confirmation, wifi) */
.cx-modal { position: absolute; inset: 0; z-index: 40; background: rgba(12, 16, 26, .55); display: grid; place-items: center; animation: fadeIn .15s; }
.cx-dlg { width: 380px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.cx-dlg > .h { background: #181e27; color: #fff; padding: 11px 12px 11px 16px; display: flex; align-items: center; justify-content: space-between; line-height: 1.25; }
.cx-dlg > .h b { display: block; font-size: 15px; }
.cx-dlg > .h span { font-size: 10.5px; color: #aab1bd; }
.cx-dlg > .h button { width: 28px; height: 28px; border-radius: 7px; background: #dc3c3c; color: #fff; display: grid; place-items: center; font-size: 15px; }
.cx-dlg.pin { width: 280px; }
.cx-pin { padding: 18px 14px 14px; }
.cx-pin .dots { display: flex; justify-content: center; gap: 11px; height: 12px; }
.cx-pin .dots i { width: 11px; height: 11px; border-radius: 50%; background: #e1e5eb; }
.cx-pin .dots i.on { background: #f7841e; }
.cx-pin .err { margin: 6px 0 0; height: 14px; text-align: center; color: #dc3c3c; font-weight: 700; font-size: 11px; }
.cx-pin .hint { margin: 2px 0 10px; text-align: center; color: #78828f; font-size: 10.5px; }
.cx-pin .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 9px; }
.cx-pin .keys button { height: 50px; border-radius: 9px; background: #fff; border: 1px solid #e1e5eb !important; font-weight: 700; font-size: 19px; color: #1c222c; }
.cx-pin .keys .c { background: #fdeaea; border-color: #fdeaea !important; color: #dc3c3c; font-size: 11.5px; }
.cx-pin .keys .ok { background: #16a34a; border-color: #16a34a !important; color: #fff; font-size: 14px; }
.cx-conf { padding: 18px 18px 14px; }
.cx-conf p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; color: #2b323d; }
.cx-conf .f { display: flex; gap: 9px; justify-content: flex-end; }
.cx-conf .f button { height: 38px; min-width: 104px; padding: 0 16px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: #fff; }
.cx-conf .f [data-no] { background: #f1f3f6; color: #1c222c; }
.cx-dlg.wifi { width: 300px; }
.cx-wifi { padding: 18px; text-align: center; display: grid; gap: 7px; justify-items: center; }
.cx-wifi canvas { width: 168px; height: 168px; image-rendering: pixelated; }
.cx-wifi b { font-size: 14px; }
.cx-wifi span { font-size: 10.5px; color: #78828f; }
/* reglages */
.cx-set { position: absolute; inset: 0; z-index: 30; background: #eceff3; display: grid; grid-template-rows: 45px minmax(0, 1fr); animation: fadeIn .15s; }
.cx-set > .h { background: #181e27; color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 13px 0 18px; line-height: 1.2; }
.cx-set > .h b { display: block; font-size: 15px; }
.cx-set > .h span { font-size: 9.5px; color: #c5cad3; }
.cx-set > .h .sp { flex: 1; }
.cx-set > .h .bk { height: 30px; padding: 0 12px; border-radius: 7px; background: #262e3a; color: #fff; font-weight: 700; font-size: 12px; }
.cx-set > .h .sv { height: 30px; padding: 0 14px; border-radius: 7px; background: #16a34a; color: #fff; font-weight: 700; font-size: 12px; }
.cx-set > .h .x { width: 28px; height: 28px; border-radius: 6px; background: #dc3c3c; color: #fff; display: grid; place-items: center; font-size: 15px; }
.cx-set .hub { display: grid; grid-template-columns: repeat(3, 401px); grid-auto-rows: 171px; gap: 19px 18px; padding: 62px 20px 0; align-content: start; overflow-y: auto; }
.cx-set .hub button { background: #fff; border: 1px solid #e3e7ed !important; border-radius: 12px; display: flex; flex-direction: column; align-items: center; padding-top: 27px; color: #1c222c; transition: transform .12s, box-shadow .12s; }
.cx-set .hub button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .3); }
.cx-set .hub i { width: 55px; height: 55px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; font-size: 25px; }
.cx-set .hub b { font-size: 15px; margin-top: 14px; }
.cx-set .hub span { font-size: 10.5px; color: #78828f; margin-top: 7px; }
.cx-set .pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; overflow-y: auto; align-items: start; }
.cx-set .col { display: grid; gap: 12px; }
.cx-set section { background: #fff; border: 1px solid #e3e7ed; border-radius: 10px; padding: 11px 12px 10px; display: grid; gap: 8px; }
.cx-set h6 { margin: 0 0 2px; font-family: inherit; font-weight: 700; font-size: 10px; line-height: 1.2; letter-spacing: .04em; color: #78828f; }
.cx-set .tg { height: 44px; border: 1px solid #e1e5eb; border-radius: 9px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; line-height: 1.25; cursor: pointer; }
.cx-set .tg b { display: block; font-size: 12px; }
.cx-set .tg span { font-size: 8.5px; color: #78828f; }
.cx-set .tg i { width: 36px; height: 20px; border-radius: 10px; background: #d5dae2; position: relative; flex: none; }
.cx-set .tg i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.cx-set .tg i.on { background: #f7841e; }
.cx-set .tg i.on::after { left: 18px; }
.cx-set .act { height: 37px; border-radius: 8px; color: #fff; font-weight: 700; font-size: 12px; }
.cx-set .nt { margin: 0; font-size: 9.5px; color: #78828f; }
.cx-set .skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cx-set .skins button { background: none; font-size: 9px; color: #2b323d; display: grid; gap: 4px; border: 1px solid #e1e5eb !important; border-radius: 8px; padding: 4px 4px 5px; }
.cx-set .skins button.on { border-color: #f7841e !important; box-shadow: inset 0 0 0 1px #f7841e; font-weight: 700; }
.cx-set .skins i { height: 34px; border-radius: 5px; position: relative; overflow: hidden; display: block; }
.cx-set .skins u { position: absolute; left: 0; right: 0; top: 0; height: 9px; }
.cx-set .skins s { position: absolute; left: 5px; bottom: 5px; width: 26px; height: 9px; border-radius: 5px; }
.cx-set .lst { border: 1px solid #e1e5eb; border-radius: 8px; overflow: hidden; height: 100px; }
.cx-set .lst div { display: flex; justify-content: space-between; padding: 7px 14px 7px 10px; font-size: 12px; border-bottom: 1px solid #eef0f3; }
.cx-set .lst .lh { background: #f8f9fb; font-size: 9.5px; font-weight: 700; color: #78828f; }
.cx-set .r3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cx-set .r3 button { height: 35px; border-radius: 8px; color: #fff; font-weight: 700; font-size: 11px; }
.cx-set .fld { border: 1px solid #e1e5eb; border-radius: 9px; padding: 6px 10px 7px; line-height: 1.3; cursor: pointer; }
.cx-set .fld.half { width: 55%; }
.cx-set .fld span { display: block; font-size: 8.5px; font-weight: 700; color: #78828f; letter-spacing: .03em; }
.cx-set .fld b { font-size: 13px; }

/* Cafe sur telephone (430 px de large) */
.cx.nar .nm span, .cx.nar .cx-clock, .cx.nar .cx-rb.g, .cx.nar .cx-rb.p, .cx.nar .cx-top .vs { display: none; }
.cx.nar .cx-top { padding: 0 8px; }
.cx.nar .cx-logo { width: 30px; height: 30px; font-size: 16px; }
.cx.nar .cx-top .nm { margin-left: 8px; }
.cx.nar .cx-top .nm b { font-size: 14px; white-space: nowrap; }
.cx.nar .cx-search { position: static; flex: 1; width: auto; margin-left: 10px; min-width: 0; }
.cx.nar .cx-top .sp { display: none; }
.cx.nar .cx-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 5px; gap: 5px; }
.cx.nar .cx-tabs button { padding: 0 14px; }
.cx.nar .cx-board { display: block; padding: 0 5px 5px; }
.cx.nar .cx-bd { display: block; }
.cx.nar .cx-block { margin-bottom: 5px; }
.cx.nar .cx-block .rows { display: grid; grid-template-columns: repeat(4, 1fr); }
.cx.nar .cx-block .row { display: contents; }
.cx.nar .cx-p { height: 84px; flex: none; }
.cx.nar .cx-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; gap: 4px; }
.cx.nar .cx-th { height: 38px; }
.cx.nar .cx-th button { height: 27px; margin-right: 0; border-radius: 6px; }
.cx.nar .cx-lines { flex: none; height: 82px; }
.cx.nar .cx-empty { padding: 18px 10px; }
.cx.nar .cx-foot .sub { display: none; }
.cx.nar .cx-foot .tot { margin: 5px 1px 6px; font-size: 15px; }
.cx.nar .cx-foot .tot b { font-size: 19px; }
.cx.nar .cx-foot .place { height: 28px; }
.cx.nar .cx-foot .pay button { height: 38px; }
.cx.nar .cx-foot .lbl { display: none; }
.cx.nar .cx-waiters { height: 52px; margin-top: 4px; }
.cx.nar .cx-w i, .cx.nar .cx-sw i { width: 34px; height: 34px; font-size: 13px; }
.cx.nar .cx-sw i { font-size: 18px; }
.cx.nar .cx-sw > .i { display: none; }
.cx.nar .cx-set .hub { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; gap: 9px; padding: 12px 10px; }
.cx.nar .cx-set .hub button { padding-top: 14px; }
.cx.nar .cx-set .hub i { width: 44px; height: 44px; font-size: 21px; }
.cx.nar .cx-set .hub b { font-size: 13px; margin-top: 8px; }
.cx.nar .cx-set .hub span { font-size: 9.5px; padding: 0 6px; margin-top: 4px; }
.cx.nar .cx-set .pg { grid-template-columns: 1fr; padding: 10px; }
.cx.nar .cx-set > .h .sv { display: none; }
.cx.nar .cx-dlg { width: 360px; }
.cx.nar .cx-dlg.pin { width: 290px; }

/* tickets imprimes, sur telephone : le bouton « suivant » d'abord, les tickets dessous */
.dm.nar .rcpt-wrap { align-content: flex-start; gap: 10px; }
.dm.nar .rcpt-side { order: -1; min-width: 0; width: 100%; grid-template-columns: 1fr auto; align-items: center; }
.dm.nar .rcpt-side .note { max-width: none; font-size: 12px; }
.px.nar .px-rendu, .px.nar .px-rendu.two { top: 2px; height: 27px; flex-direction: row; gap: 7px; width: auto; padding: 0 10px; }
/* l'ecran reproduit tient en entier dans la fenetre (portable 1366 x 768 compris) : on n'a pas a defiler pour voir le bas de la caisse */
@media (min-width: 761px) { .demo-frame[data-demo="pos"], .demo-frame[data-demo="cafe"] { max-width: max(720px, calc((100vh - 150px) * 16 / 9)); margin-inline: auto; } }

/* ===================== MARKET ===================== */
.mk-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(90deg, #0d5c55, #0f8f80); color: #fff; }
.mk-top .lg { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; margin-right: 12px; font-family: "Plus Jakarta Sans", sans-serif; }
.mk-top .lg i { width: 26px; height: 26px; border-radius: 7px; background: #fff; color: #0f8f80; display: grid; place-items: center; font-style: normal; font-weight: 900; }
.mk-tb { background: rgba(255, 255, 255, .14); border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 600; color: #fff; }
.mk-tb.on { background: #fff; color: #0d5c55; }
.mk-user { margin-left: auto; background: rgba(255, 255, 255, .14); border-radius: 99px; padding: 4px 12px 4px 4px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mk-user i { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #0f8f80; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 11px; }
.mk-body { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 0; gap: 0; }
.mk-left { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: #fff; border-right: 1px solid #e3e8ef; }
.mk-scan { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #e3e8ef; }
.mk-scan input { flex: 1; min-width: 0; border: 2px solid #0f8f80; border-radius: 10px; padding: 7px 10px; font-size: 13px; outline: none; }
.mk-scan button { background: #0f8f80; color: #fff; border-radius: 10px; padding: 0 12px; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.mk-scan svg { width: 16px; height: 16px; }
.mk-table { overflow: auto; min-height: 0; }
.mk-th, .mk-tr { display: grid; grid-template-columns: 1fr 92px 54px 62px 26px; gap: 4px; align-items: center; padding: 6px 10px; font-size: 12px; }
.mk-th { background: #0f8f80; color: #fff; font-weight: 700; font-size: 11px; position: sticky; top: 0; }
.mk-tr { border-bottom: 1px solid #f0f2f6; }
.mk-tr.flash { animation: flash .8s; }
@keyframes flash { from { background: #d9f5ef; } }
.mk-tr .q { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mk-tr .q button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #cfd6e2 !important; background: #fff; line-height: 1; }
.mk-tr span:nth-child(3), .mk-tr span:nth-child(4) { text-align: right; }
.mk-tr .del { background: none; color: #e5484d; font-size: 14px; }
.mk-tr small { display: block; color: #8a92a6; font-size: 10.5px; }
.mk-foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px; border-top: 1px solid #e3e8ef; }
.mk-total { background: #0b3f3a; color: #fff; border-radius: 12px; padding: 8px 14px; display: flex; justify-content: space-between; align-items: flex-end; }
.mk-total span { font-size: 11px; color: #9ed9cf; }
.mk-total b { font-size: 26px; font-family: "Plus Jakarta Sans", sans-serif; }
.mk-total b small { font-size: 13px; margin-left: 4px; }
.mk-pay { background: #12a150; color: #fff; border-radius: 12px; padding: 0 18px; font-weight: 800; font-size: 14px; }
.mk-right { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.mk-rayons { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
.mk-rayons button { background: #fff; border: 1px solid #dfe5ee !important; border-radius: 10px; padding: 6px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mk-rayons button.on { background: #0f8f80; color: #fff; border-color: #0f8f80 !important; }
.mk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; padding: 0 8px 8px; overflow: auto; align-content: start; }
.mk-tile { background: #fff; border-radius: 12px; border: 1px solid #e3e8ef; padding: 6px; text-align: center; position: relative; }
.mk-tile:hover { border-color: #0f8f80; }
.mk-tile .ph { height: 56px; background: center / contain no-repeat; }
.mk-tile .nm { font-size: 10.5px; font-weight: 600; line-height: 1.15; min-height: 2.3em; margin-top: 3px; }
.mk-tile .pr { color: #0d5c55; font-weight: 800; font-size: 11.5px; }
.mk-tile .st { position: absolute; top: 4px; left: 4px; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: #e8f6f3; color: #0d5c55; }
.mk-tile .st.low { background: #fff1e6; color: #c2410c; }
.mk-tile .st.out { background: #fde8e8; color: #c81e1e; }
.mk-stock { padding: 8px; overflow: auto; }
.mk-stock table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: 12px; }
.mk-stock th { background: #0f8f80; color: #fff; text-align: left; padding: 7px 8px; font-size: 11px; }
.mk-stock td { padding: 6px 8px; border-bottom: 1px solid #f0f2f6; }
.mk-stock td.n { text-align: right; font-variant-numeric: tabular-nums; }
.mk-stock tr.chg td { animation: flash 1.2s; }
.mk-alerts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.mk-alerts div { background: #fff; border-radius: 10px; padding: 7px 10px; border-left: 4px solid #0f8f80; font-size: 11px; color: #6b7387; }
.mk-alerts div b { display: block; font-size: 17px; color: #1f2433; }
.mk-alerts div.w { border-color: #f59e0b; }
.mk-alerts div.r { border-color: #e5484d; }
.mk-paybox { background: #fff; border-radius: 16px; width: min(420px, 100%); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); animation: fadeUp .25s; }
.mk-paybox .h { background: linear-gradient(90deg, #0d5c55, #0f8f80); color: #fff; padding: 12px 16px; font-weight: 700; }
.mk-paybox .t { text-align: center; padding: 14px; font-size: 30px; font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif; }
.mk-paybox .t small { display: block; font-size: 12px; color: #6b7387; font-weight: 600; }
.mk-paybox .opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px 10px; }
.mk-paybox .opts button { border-radius: 12px; padding: 14px 6px; font-weight: 800; color: #fff; display: grid; gap: 4px; justify-items: center; }
.mk-paybox .opts svg { width: 22px; height: 22px; }
.mk-paybox .cl { margin: 0 14px 10px; padding: 8px 10px; border-radius: 10px; background: #f4f6fa; font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-paybox .cl button { background: #0f8f80; color: #fff; border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 11.5px; }
.mk-paybox .msg { margin: 0 14px 10px; font-size: 12px; color: #c2410c; min-height: 1em; }
.mk-paybox .f { padding: 0 14px 14px; }
.mk-paybox .f button { width: 100%; background: #f1f3f7; border-radius: 10px; padding: 10px; font-weight: 700; color: #4a5266; }

/* ---------- petits ecrans (Market) */
@media (max-width: 760px) {
  .mk-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .mk-left { max-height: 330px; order: 2; }
  .mk-right { order: 1; max-height: 320px; }
  .mk-top .mk-tb:nth-of-type(n+3) { display: none; }
  .mk-th, .mk-tr { grid-template-columns: 1fr 84px 0 58px 22px; }
  .mk-th span:nth-child(3), .mk-tr span:nth-child(3) { display: none; }
  .mk-tiles { grid-template-columns: repeat(3, 1fr); }
}

.mk-root .dm-caption { bottom: auto; top: 54px; }