/* GesMinArt Mobile / POS — grands boutons, une main, écran 5-6 pouces (POS Fetian) */
body { background: var(--bg); padding-bottom: 72px; font-size: 15px; overscroll-behavior: none; }
.mh { background: var(--nuit); color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 800; } .mh svg { width: 34px; flex: none; } .mh b { display: block; letter-spacing: .5px; } .mh small { color: #8fa6d6; } .mh .sp { flex: 1; } .net { font-size: 12px; display: flex; gap: 5px; align-items: center; }
.mruban { height: 5px; background: linear-gradient(90deg, #007FFF 0 55%, #F7D618 55% 60%, #CE1021 60% 80%, #F7D618 80% 85%, #007FFF 85%); position: sticky; top: 56px; z-index: 800; }
.scr { padding: 14px; max-width: 640px; margin: 0 auto; } .scr h2 { margin-bottom: 10px; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--nuit); display: grid; grid-template-columns: repeat(6, 1fr); z-index: 900; padding-bottom: env(safe-area-inset-bottom); } .tabbar button { background: none; border: none; color: #8fa6d6; padding: 8px 2px 7px; font-size: 10.5px; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; cursor: pointer; } .tabbar button .i { font-size: 20px; line-height: 1; } .tabbar button.on { color: #fff; box-shadow: inset 0 3px 0 var(--jaune); background: rgba(0,127,255,.2); } .tabbar .bd { position: absolute; top: 3px; right: 22%; background: var(--rouge); color: #fff; border-radius: 9px; font-size: 10px; padding: 0 5px; }
.big { width: 100%; padding: 14px; font-size: 16px; justify-content: center; margin-top: 8px; border-radius: 12px; } input, select, textarea { padding: 11px 12px; font-size: 16px; border-radius: 10px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; margin-bottom: 10px; cursor: pointer; } .tile .ti { font-size: 26px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,127,255,.12); } .tile b { display: block; } .tile small { color: var(--doux); }
.q { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bord); margin-bottom: 6px; background: var(--carte); font-size: 13px; } .q.rej { border-color: var(--rouge); background: rgba(206,16,33,.06); }
.mapm { height: calc(100vh - 230px); min-height: 300px; border-radius: 14px; overflow: hidden; border: 1px solid var(--bord); }
.result { padding: 12px; border-radius: 12px; border: 2px solid var(--bord); margin-top: 10px; background: var(--carte); } .result.ok { border-color: var(--vert); } .result.bad { border-color: var(--rouge); }
.chkrow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--bord); font-size: 14px; } .chkrow span { flex: 1; } .seg { display: flex; border: 1px solid var(--bord); border-radius: 9px; overflow: hidden; } .seg label { margin: 0; padding: 6px 12px; font-size: 13px; cursor: pointer; } .seg input { display: none; } .seg input:checked + span { } .seg label:has(input:checked) { background: var(--bleu); color: #fff; } .seg label:has(input[value=ko]:checked) { background: var(--rouge); } .seg label:has(input[value=na]:checked) { background: var(--doux); }
#login2 { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(600px 400px at 20% 0, #1b5fc4, transparent 60%), var(--nuit); } #login2 .card { width: min(420px, 100%); }