/* =========================================================================== CAISSE POP-UP — feuille de style unique. Direction artistique : la même que le site public (site/public/styles.css). Noir profond, vert acide, violet, rose ; typo lourde et serrée ; chiffres en monospace tabulaire. La caisse et le site doivent avoir l'air du même événement, même si l'une est sur le réseau local et l'autre sur Internet. Contraintes propres à la caisse, qui expliquent les écarts avec le site : - on travaille DEBOUT, DANS LE NOIR, sur un écran TACTILE, parfois pressé : tout ce qui se touche fait au moins --tap de haut (56 px par défaut) ; - aucun effet qui dépend du survol : sur tactile il n'existe pas, et pire, il « colle » après le doigt. Tous les :hover sont sous @media(hover:hover) ; - aucune animation longue : le retour visuel doit arriver en moins de 120 ms ; - l'écran ne défile jamais tout entier. C'est la zone de contenu qui défile, les barres d'action restent collées. Sinon on perd le bouton « Encaisser » au premier mouvement de doigt. --ui-scale (bouton A+ du bandeau) remet toute l'interface à l'échelle : la même page doit être utilisable sur une tablette 7" et sur un écran tactile de 24". Tout ce qui compte est donc écrit en rem. =========================================================================== */ :root{ /* --- Couleurs : reprises telles quelles du site ------------------------ */ --nuit:#07070A; --nuit-2:#0E0E14; --nuit-3:#16161E; --nuit-4:#20202B; --blanc:#F7F7F5; --gris:rgba(247,247,245,.60); --gris-2:rgba(247,247,245,.36); --trait:rgba(247,247,245,.10); --trait-2:rgba(247,247,245,.22); --acide:#C8FF2E; --violet:#7A4BFF; --rose:#FF3D7F; --cyan:#3BE0DA; --vert:#31D07A; --ambre:#FFB020; /* Accent du poste en cours : posé par app.js sur . */ --accent:var(--acide); --accent-ombre:rgba(200,255,46,.22); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace; --r:14px; --r-l:20px; --r-xl:28px; /* Échelle : 1 = normal. Le bouton A+ écrit 0.9 / 1 / 1.15. */ --ui-scale:1; /* Cibles tactiles. 56 px = un doigt d'adulte sans viser. */ --tap:3.5rem; --tap-l:4.25rem; --pad:clamp(0.75rem,2.2vw,1.5rem); --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --kp:0px; /* hauteur réservée par le pavé numérique */ --ease:cubic-bezier(.22,1,.36,1); } /* Accent par poste : d'un coup d'œil on sait où l'on est. */ body[data-pole="caisse"] {--accent:var(--acide); --accent-ombre:rgba(200,255,46,.22)} body[data-pole="bar"] {--accent:var(--violet);--accent-ombre:rgba(122,75,255,.30)} body[data-pole="vestiaire"]{--accent:var(--rose); --accent-ombre:rgba(255,61,127,.26)} body[data-pole="porte"] {--accent:var(--cyan); --accent-ombre:rgba(59,224,218,.24)} body[data-pole="admin"] {--accent:var(--blanc); --accent-ombre:rgba(247,247,245,.18)} /* =========================================================================== Base =========================================================================== */ *{box-sizing:border-box} html{ font-size:calc(16px * var(--ui-scale)); height:100%; touch-action:manipulation; -webkit-text-size-adjust:100%; } body{ margin:0;height:100%;height:100dvh; display:flex;flex-direction:column; background:var(--nuit);color:var(--blanc); font-family:var(--sans);font-size:1rem;line-height:1.45; -webkit-font-smoothing:antialiased; overflow:hidden;overscroll-behavior:none; -webkit-tap-highlight-color:transparent; -webkit-user-select:none;user-select:none; } /* Nappes de couleur du site, très atténuées : on garde la signature visuelle sans jamais gêner la lecture d'un montant. */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(60vw 60vw at 8% -10%,rgba(122,75,255,.16),transparent 62%), radial-gradient(50vw 50vw at 100% 8%,rgba(200,255,46,.07),transparent 60%), radial-gradient(46vw 46vw at 60% 108%,rgba(255,61,127,.09),transparent 62%); } input,textarea{-webkit-user-select:text;user-select:text} button,input{font-family:inherit;color:inherit} button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none} svg{display:block} .hidden{display:none!important} h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.05} h2{font-size:1.5rem;margin:0 0 .85rem} h3{font-size:1.15rem;margin:0 0 .6rem} .hint{color:var(--gris);font-size:.85rem;font-weight:400;line-height:1.5;margin:.35rem 0} .eyebrow{ font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--accent);display:block;margin:0 0 .5rem; } .err{color:var(--rose);min-height:1.3rem;font-size:.95rem;margin:.5rem 0;font-weight:600} .msg{min-height:1.5rem;font-size:1rem;margin:.75rem 0;font-weight:700} .msg.ok{color:var(--acide)} .msg.bad{color:var(--rose)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* =========================================================================== Bandeau haut =========================================================================== */ #topbar{ flex:none;display:flex;align-items:center;gap:.6rem; padding:calc(.5rem + var(--safe-t)) calc(.75rem + var(--safe-r)) .5rem calc(.75rem + var(--safe-l)); min-height:3.4rem; background:rgba(14,14,20,.86); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--trait); position:relative;z-index:50; } #topbar::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,var(--accent),transparent 65%);opacity:.7; } .tb-left{display:flex;align-items:center;gap:.55rem;min-width:0;margin-right:auto} .tb-dot{ width:.55rem;height:.55rem;border-radius:50%;flex:none; background:var(--accent);box-shadow:0 0 12px var(--accent); animation:pouls 2.6s ease-in-out infinite; } @keyframes pouls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}} .tb-id{display:flex;align-items:baseline;gap:.6rem;min-width:0} #evName{ font-weight:900;letter-spacing:-.04em;font-size:1rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw; } .tb-pole{ font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;flex:none; color:var(--nuit);background:var(--accent); } body[data-pole="bar"] .tb-pole{color:#fff} .tb-right{display:flex;align-items:center;gap:.4rem} .tb-clock{font-family:var(--mono);font-size:.9rem;color:var(--gris);font-variant-numeric:tabular-nums} .tb-user{ font-size:.85rem;font-weight:700;color:var(--blanc);max-width:9rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding:.3rem .7rem;border-radius:999px;background:rgba(247,247,245,.07); } .conn{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem; font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rose)} .conn i{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;display:block; box-shadow:0 0 8px currentColor;transition:color .3s} .conn.on{color:var(--vert)} .conn .lbl::after{content:"Hors ligne"} .conn.on .lbl::after{content:"En ligne"} /* Boutons du bandeau : icône seule quand l'écran rétrécit, jamais rognés. */ .icon-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem;flex:none; min-height:2.75rem;min-width:2.75rem;padding:0 .8rem;border-radius:999px; background:rgba(247,247,245,.06);border:1px solid var(--trait); color:var(--blanc);font-size:.85rem;font-weight:600; transition:background .15s,border-color .15s,transform .06s; } .icon-btn .ic{font-size:1.05rem;line-height:1} .icon-btn:active{transform:scale(.95);background:rgba(247,247,245,.14)} @media (hover:hover){.icon-btn:hover{border-color:var(--trait-2);background:rgba(247,247,245,.11)}} @media (max-width:900px){ .tb-clock{display:none} .conn .lbl{display:none} } @media (max-width:760px){ .icon-btn .lbl{display:none} .icon-btn{padding:0 .75rem} } @media (max-width:560px){ #evName{display:none} .tb-user{max-width:5.5rem} } /* =========================================================================== Coque : seule la zone de contenu défile =========================================================================== */ /* La page elle-même ne défile JAMAIS. Sur une caisse tactile, un écran qui part vers le bas fait perdre le bouton d'action au premier mouvement de doigt — et on ne s'en rend compte qu'au moment où il y a la queue. Le bandeau, les onglets et les boutons d'action restent donc toujours à l'écran ; seul le contenu d'un panneau défile, à l'intérieur de son cadre. */ #app{ flex:1;min-height:0;position:relative; overflow:hidden; display:flex;flex-direction:column; } .defile{ overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--trait-2) transparent; } .defile::-webkit-scrollbar{width:10px;height:10px} .defile::-webkit-scrollbar-thumb{background:var(--trait-2);border-radius:99px} .screen{ flex:1;min-height:0;width:100%;max-width:78rem;margin:0 auto; display:flex;flex-direction:column; padding:var(--pad) calc(var(--pad) + var(--safe-l)) 0 calc(var(--pad) + var(--safe-r)); } /* Les onglets sont une barre fixe : ils ne partent pas avec le contenu. */ .screen>.tabs{flex:none} /* Chaque panneau occupe la place restante et défile pour son propre compte. */ .screen>.panel{ flex:1;min-height:0; overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--trait-2) transparent; padding-bottom:calc(1rem + var(--safe-b) + var(--kp)); } .screen>.panel::-webkit-scrollbar{width:10px} .screen>.panel::-webkit-scrollbar-thumb{background:var(--trait-2);border-radius:99px} .screen-full{max-width:none;padding:0;min-height:0} /* Connexion et choix du poste : centrés, sans onglets, ils tiennent seuls. */ #screen-login,#screen-chooser{overflow-y:auto;padding-bottom:calc(var(--pad) + var(--safe-b))} /* =========================================================================== Boutons =========================================================================== */ .primary,.ghost,.danger{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:var(--tap);padding:0 1.25rem;border-radius:999px; font-size:1rem;font-weight:700;letter-spacing:-.01em; transition:transform .07s var(--ease),background .15s,border-color .15s,box-shadow .2s; } .primary{background:var(--acide);border:1px solid var(--acide);color:#0A0A0C} .primary:active:not(:disabled){transform:scale(.975)} .primary:disabled{opacity:.28;cursor:not-allowed} @media (hover:hover){.primary:hover:not(:disabled){box-shadow:0 .5rem 1.8rem -.6rem rgba(200,255,46,.55)}} .ghost{background:transparent;border:1px solid var(--trait-2);color:var(--blanc)} .ghost:active:not(:disabled){transform:scale(.975);background:rgba(247,247,245,.1)} .ghost:disabled{opacity:.3;cursor:not-allowed} @media (hover:hover){.ghost:hover:not(:disabled){border-color:var(--blanc);background:rgba(247,247,245,.07)}} .danger{background:transparent;border:1px solid rgba(255,61,127,.55);color:#FF8FB4} .danger:active{transform:scale(.975);background:rgba(255,61,127,.16)} .primary.big,.ghost.big,.danger.big{ width:100%;min-height:var(--tap-l);font-size:1.1rem;margin-top:1rem;border-radius:var(--r-l); } .btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem} .btn-row>*{flex:1 1 10rem} /* =========================================================================== Onglets (barre segmentée défilante) et pastilles de filtre =========================================================================== */ .tabs{ display:flex;gap:.4rem;margin-bottom:1rem;padding-bottom:.25rem; overflow-x:auto;scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none; } .tabs::-webkit-scrollbar{display:none} .tab{ flex:none;scroll-snap-align:start; min-height:var(--tap);padding:0 1.15rem;border-radius:999px; background:rgba(247,247,245,.05);border:1px solid var(--trait); color:var(--gris);font-size:.95rem;font-weight:600;white-space:nowrap; transition:background .15s,color .15s,border-color .15s,transform .07s; } .tab:active{transform:scale(.97)} .tab.active{ background:var(--accent);border-color:var(--accent);color:var(--nuit);font-weight:800; box-shadow:0 .4rem 1.4rem -.6rem var(--accent-ombre); } body[data-pole="bar"] .tab.active{color:#fff} .chips{ display:flex;gap:.4rem;overflow-x:auto;padding:0 0 .5rem; scrollbar-width:none;-ms-overflow-style:none; } .chips::-webkit-scrollbar{display:none} .chip{ flex:none;min-height:2.9rem;padding:0 1rem;border-radius:999px; background:rgba(247,247,245,.05);border:1px solid var(--trait); color:var(--gris);font-size:.9rem;font-weight:600;white-space:nowrap; } .chip:active{transform:scale(.97)} .chip.active{background:rgba(247,247,245,.14);border-color:var(--trait-2);color:var(--blanc)} /* =========================================================================== Champs =========================================================================== */ .card{ background:linear-gradient(168deg,rgba(247,247,245,.055),rgba(247,247,245,.012)); border:1px solid var(--trait);border-radius:var(--r-l);padding:var(--pad); } .lbl{display:block;margin:1.15rem 0 .45rem;font-size:.85rem;font-weight:600;color:var(--gris)} .lbl:first-child{margin-top:0} .big-input{ width:100%;min-height:var(--tap);padding:.75rem 1rem;font-size:1.15rem; background:var(--nuit-3);border:1px solid var(--trait-2);border-radius:var(--r); color:var(--blanc); } .big-input::placeholder{color:var(--gris-2)} .big-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ombre)} .big-input.amount{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:2rem;font-weight:700;text-align:right;padding-right:2.6rem;letter-spacing:-.02em; min-height:var(--tap-l); } .big-input[readonly]{cursor:pointer} .amount-row{position:relative;display:flex;align-items:center} .amount-row .cur{position:absolute;right:1rem;font-size:1.4rem;color:var(--accent);pointer-events:none;font-weight:700} .search-row{display:flex;gap:.6rem;align-items:stretch} .search-row .big-input,.search-row .scan-input{flex:1;min-width:0} .search-row .primary{flex:none;padding:0 1.4rem} /* Montants rapides : gros pavés, jamais une liste de petits boutons. */ .quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(5rem,1fr));gap:.5rem;margin-top:.75rem} .quick button{ min-height:3.4rem;border-radius:var(--r); background:rgba(247,247,245,.06);border:1px solid var(--trait); color:var(--blanc);font-family:var(--mono);font-size:1.05rem;font-weight:700; } .quick button:active{transform:scale(.96);background:var(--accent);color:var(--nuit);border-color:var(--accent)} /* Interrupteur (identité vérifiée) : une vraie bascule, pas une case de 13 px. */ .idcheck{margin:1rem 0;padding:.9rem 1rem;background:var(--nuit-3);border:1px solid var(--trait);border-radius:var(--r-l)} .switch{display:flex;align-items:center;gap:.9rem;min-height:var(--tap);font-size:1rem;font-weight:600;cursor:pointer} .switch input{appearance:none;-webkit-appearance:none;margin:0;flex:none; width:3.4rem;height:2rem;border-radius:999px;background:var(--nuit-4); border:1px solid var(--trait-2);position:relative;transition:background .18s,border-color .18s} .switch input::after{content:"";position:absolute;top:50%;left:.22rem;transform:translateY(-50%); width:1.5rem;height:1.5rem;border-radius:50%;background:var(--gris);transition:transform .18s var(--ease),background .18s} .switch input:checked{background:var(--vert);border-color:var(--vert)} .switch input:checked::after{transform:translate(1.4rem,-50%);background:#04120B} .chk{display:flex;align-items:center;gap:.65rem;min-height:var(--tap);padding:0 .9rem; background:var(--nuit-3);border:1px solid var(--trait);border-radius:var(--r);font-size:.95rem;font-weight:600;cursor:pointer} .chk input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:1.6rem;height:1.6rem; border-radius:.45rem;border:2px solid var(--trait-2);background:transparent;position:relative} .chk input:checked{background:var(--acide);border-color:var(--acide)} .chk input:checked::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center; justify-content:center;color:#0A0A0C;font-size:1.1rem;font-weight:900} .chk:has(input:checked){border-color:var(--trait-2);background:rgba(200,255,46,.08)} /* =========================================================================== Cartes de résultat / listes =========================================================================== */ .results{margin-top:.9rem;display:flex;flex-direction:column;gap:.6rem} .res-card{ background:linear-gradient(168deg,rgba(247,247,245,.055),rgba(247,247,245,.012)); border:1px solid var(--trait);border-radius:var(--r-l);padding:.9rem 1rem; } .res-card .rc-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap} .res-card .rc-name{font-size:1.1rem;font-weight:800;letter-spacing:-.02em} .res-card .rc-bal{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:700;color:var(--acide)} .res-card .rc-bal.zero{color:var(--gris-2)} .res-card .rc-meta{font-size:.75rem;color:var(--gris);font-family:var(--mono);margin-top:.35rem; display:flex;align-items:center;gap:.4rem;flex-wrap:wrap} .res-card .rc-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem} .res-card .rc-actions button{flex:1 1 9rem;min-height:3.1rem;padding:0 .9rem;font-size:.9rem;border-radius:var(--r)} .res-card>button{width:100%;margin-top:.75rem} .res-card.danger{border-color:rgba(255,61,127,.5);background:rgba(255,61,127,.1)} .res-card.danger p{margin:.5rem 0 0;font-size:.95rem} .tag{ font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em; padding:.2rem .55rem;border-radius:999px;border:1px solid;font-weight:700; } .tag.active{color:var(--acide);border-color:rgba(200,255,46,.45);background:rgba(200,255,46,.1)} .tag.closed{color:var(--gris);border-color:var(--trait-2)} .tag.cancelled{color:var(--rose);border-color:rgba(255,61,127,.5);background:rgba(255,61,127,.1)} .tag.locked{color:var(--ambre);border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.1)} /* =========================================================================== Connexion + choix du poste =========================================================================== */ #screen-login,#screen-chooser{align-items:center;justify-content:center} .login-wrap{width:100%;max-width:26rem;text-align:center;margin:auto} .logo{font-size:clamp(2.4rem,7vw,3.4rem);font-weight:900;letter-spacing:-.05em;line-height:.95} .logo em{font-style:normal;background:linear-gradient(102deg,var(--acide) 10%,var(--violet) 92%); -webkit-background-clip:text;background-clip:text;color:transparent} .sub{color:var(--gris);margin:.7rem 0 1.6rem;font-size:1rem} .welcome-hi{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase; color:var(--acide);font-size:.72rem;margin:0 0 .5rem} .pin-display{ width:100%;max-width:15rem;margin:0 auto 1.1rem;display:block;height:3.6rem; background:var(--nuit-3);border:1px solid var(--trait-2);border-radius:var(--r-l); color:var(--blanc);text-align:center;font-family:var(--mono); font-size:2rem;letter-spacing:.6rem;text-indent:.6rem; } .pin-display:focus{outline:none;border-color:var(--acide)} .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:19rem;margin:0 auto} .keys button{ min-height:var(--tap-l);border-radius:var(--r-l); background:rgba(247,247,245,.06);border:1px solid var(--trait); color:var(--blanc);font-family:var(--mono);font-size:1.6rem;font-weight:700; transition:transform .06s,background .12s; } .keys button:active{transform:scale(.94);background:rgba(247,247,245,.16)} .keys .ok{background:var(--acide);border-color:var(--acide);color:#0A0A0C;font-family:var(--sans);font-weight:800;font-size:1.15rem} .keys .ok:active{background:#DFFF6B} /* Connexion en paysage sur téléphone : deux colonnes, sinon le pavé sort. */ @media (orientation:landscape) and (max-height:560px){ .login-wrap{max-width:44rem;display:grid;grid-template-columns:1fr 1fr; align-items:center;gap:1.5rem;text-align:left} .login-wrap .logo,.login-wrap .sub,.login-wrap .welcome-hi{grid-column:1} .login-wrap .sub{margin-bottom:0} .pinpad{grid-column:2;grid-row:1/4} .role-grid{grid-column:2;grid-row:1/4} } .role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem} .role-btn{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem; min-height:8rem;padding:1.2rem .6rem;border-radius:var(--r-xl); background:linear-gradient(168deg,rgba(247,247,245,.07),rgba(247,247,245,.015)); border:1px solid var(--trait);color:var(--blanc); font-size:1.05rem;font-weight:800;letter-spacing:-.02em; transition:transform .08s var(--ease),border-color .2s,background .2s; } .role-btn:active{transform:scale(.97)} .role-btn .ic{font-size:2.2rem;line-height:1} .role-btn[data-pole="caisse"]{border-color:rgba(200,255,46,.35)} .role-btn[data-pole="bar"]{border-color:rgba(122,75,255,.45)} .role-btn[data-pole="vestiaire"]{border-color:rgba(255,61,127,.38)} .role-btn[data-pole="porte"]{border-color:rgba(59,224,218,.35)} @media (hover:hover){.role-btn:hover{background:rgba(247,247,245,.1)}} /* =========================================================================== CAISSE =========================================================================== */ .pane{max-width:42rem} .pane-wide{max-width:none} /* =========================================================================== BAR — l'écran le plus utilisé de la soirée. Structure : en-tête collé (mode de paiement + client), grille des boissons qui défile, ticket à droite sur grand écran / tiroir collé en bas sur téléphone. Le bouton « Encaisser » ne doit JAMAIS sortir de l'écran. =========================================================================== */ #screen-bar{display:flex;flex-direction:column;min-height:0;height:100%} .bar-head{ flex:none;padding:.7rem calc(var(--pad) + var(--safe-r)) .7rem calc(var(--pad) + var(--safe-l)); border-bottom:1px solid var(--trait);background:rgba(14,14,20,.7); } .pay-switch{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.6rem} .pay-tab{ min-height:3.2rem;border-radius:999px; background:rgba(247,247,245,.05);border:1px solid var(--trait); color:var(--gris);font-size:.95rem;font-weight:700; } .pay-tab:active{transform:scale(.98)} .pay-tab.active{background:var(--violet);border-color:var(--violet);color:#fff; box-shadow:0 .4rem 1.4rem -.7rem rgba(122,75,255,.9)} .scanbox{position:relative;border-radius:var(--r-l);background:var(--nuit-3); border:1px solid var(--trait);padding:.7rem .8rem;min-height:4.4rem; display:flex;align-items:center} .scan-idle{width:100%;display:flex;align-items:center;gap:.7rem} .scan-ic{font-size:1.6rem;line-height:1;flex:none} .scan-idle p{margin:0;font-size:.85rem;color:var(--gris);flex:none;max-width:12rem} .scan-idle .search-row{flex:1;min-width:0} .scan-input{ width:100%;min-height:var(--tap);padding:.6rem .9rem;border-radius:var(--r); background:var(--nuit-2);border:1px dashed var(--trait-2);color:var(--blanc); font-family:var(--mono);font-size:1.05rem;letter-spacing:.08em;text-align:center; } .scan-input:focus{outline:none;border-style:solid;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ombre)} .scan-input::placeholder{color:var(--gris-2);letter-spacing:normal} .client-card{width:100%;display:flex;align-items:center;gap:.9rem;padding-right:2.6rem} .client-card .cc-ic{font-size:1.8rem;flex:none} .cc-name{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0} .cc-balance{font-size:.8rem;color:var(--gris);text-align:right;flex:none} .cc-balance b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:1.65rem;font-weight:800;color:var(--acide);letter-spacing:-.02em} .client-card.low .cc-balance b{color:var(--rose)} .x{position:absolute;top:.4rem;right:.4rem;width:2.6rem;height:2.6rem;border-radius:50%; background:rgba(247,247,245,.08);border:none;color:var(--blanc);font-size:1.1rem; display:flex;align-items:center;justify-content:center} .x:active{background:rgba(255,61,127,.3)} .card-mode{width:100%;display:flex;align-items:center;gap:.8rem} .card-mode p{margin:0;font-size:.9rem;color:var(--gris)} /* En portrait téléphone la phrase d'explication écrase le champ de scan (31 px de large en test). Le texte de substitution dit déjà la même chose. */ @media (max-width:30rem){ .scan-idle p{display:none} } .bar-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr;overflow:hidden} .bar-menu-col{ min-width:0;min-height:0;display:flex;flex-direction:column; padding:.7rem calc(var(--pad) + var(--safe-r)) 0 calc(var(--pad) + var(--safe-l)); } .bar-menu-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding-bottom:1rem;scrollbar-width:thin} .menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.55rem} .menu-cat{ grid-column:1/-1;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--gris-2);margin:.9rem 0 .1rem; } .menu-cat:first-child{margin-top:.2rem} .menu-item{ min-height:5.2rem;padding:.7rem .5rem;border-radius:var(--r-l); background:linear-gradient(168deg,rgba(247,247,245,.07),rgba(247,247,245,.015)); border:1px solid var(--trait);color:var(--blanc); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem; transition:transform .07s var(--ease),background .12s,border-color .12s; } .menu-item:active{transform:scale(.95);background:var(--violet);border-color:var(--violet)} .menu-item .mi-name{font-size:.92rem;font-weight:700;line-height:1.15;text-align:center;letter-spacing:-.01em} .menu-item .mi-price{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:1rem;font-weight:700;color:var(--acide)} .menu-item:active .mi-price{color:#fff} .menu-item.in-cart{border-color:var(--violet);background:rgba(122,75,255,.16)} .menu-item .mi-qty{ position:absolute;top:.35rem;right:.35rem;min-width:1.6rem;height:1.6rem;padding:0 .35rem; border-radius:999px;background:var(--violet);color:#fff;font-family:var(--mono); font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center; } .menu-item{position:relative} /* --- Le ticket ---------------------------------------------------------- */ .bar-ticket{ display:flex;flex-direction:column;min-height:0; background:var(--nuit-2);border-left:1px solid var(--trait); } .cart{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.5rem .8rem} .cart-empty{color:var(--gris-2);text-align:center;padding:2.5rem 0;font-size:.9rem} .cart-line{display:flex;align-items:center;gap:.6rem;padding:.45rem .2rem;border-bottom:1px solid var(--trait)} .cart-line .cl-name{flex:1;min-width:0;font-size:.95rem;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cart-line .qty{display:flex;align-items:center;gap:.35rem;flex:none} .cart-line .qty button{ width:2.8rem;height:2.8rem;border-radius:.8rem;flex:none; background:rgba(247,247,245,.08);border:1px solid var(--trait);color:var(--blanc); font-size:1.3rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center; } .cart-line .qty button:active{background:var(--violet);border-color:var(--violet)} .cart-line .qty span{min-width:2rem;text-align:center;font-family:var(--mono);font-weight:700} .cart-line .cl-price{font-family:var(--mono);font-variant-numeric:tabular-nums; width:4.6rem;text-align:right;flex:none;font-weight:700} .cart-foot{ flex:none;padding:.7rem .8rem calc(.7rem + var(--safe-b)); border-top:1px solid var(--trait-2);background:var(--nuit-3); } .cart-handle{ display:none;width:100%;align-items:center;justify-content:space-between;gap:.6rem; min-height:3rem;background:none;border:none;color:var(--blanc);padding:.2rem 0 .4rem; } .cart-handle .ch-count{font-family:var(--mono);font-size:.8rem;color:var(--gris); display:flex;align-items:center;gap:.4rem} .cart-handle .ch-count b{background:var(--violet);color:#fff;border-radius:999px; min-width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .35rem} .cart-handle .ch-arrow{transition:transform .2s var(--ease);font-size:.9rem;color:var(--gris)} .cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem;font-weight:600} .cart-total b{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:2rem;font-weight:800;letter-spacing:-.03em} .cart-after{display:flex;justify-content:space-between;font-size:.85rem;color:var(--gris);margin-top:.2rem} .cart-after span{font-family:var(--mono);font-weight:700} .cart-after.bad{color:var(--rose);font-weight:800} .cart-foot .primary.big{margin-top:.7rem;min-height:var(--tap-l)} .cart-foot .ghost{width:100%;margin-top:.5rem;min-height:3rem;font-size:.9rem} #bar_msg{margin:.4rem 0 0;min-height:1.2rem;font-size:.9rem;text-align:center} /* Grand écran : ticket en colonne fixe à droite. */ @media (min-width:60rem){ .bar-head{display:grid;grid-template-columns:20rem 1fr;gap:.8rem;align-items:center} .pay-switch{margin-bottom:0} .bar-body{grid-template-columns:1fr minmax(20rem,25rem)} .bar-ticket{border-top:none} .cart-handle{display:none!important} } /* Téléphone / petite tablette : tiroir collé en bas, total toujours visible. */ @media (max-width:59.99rem){ .bar-body{grid-template-rows:1fr;position:relative} .bar-menu-col{padding-bottom:0} /* --ticket-h = hauteur réelle du pied de ticket, mesurée par app.js. En dur, la dernière rangée de boissons finit sous le tiroir dès qu'un message s'affiche ou qu'on passe l'écran en « Grand ». */ .bar-menu-scroll{padding-bottom:calc(var(--ticket-h,11rem) + .75rem)} .bar-ticket{ position:absolute;left:0;right:0;bottom:0;z-index:30; border-left:none;border-top:1px solid var(--trait-2); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:0 -1rem 2.5rem rgba(0,0,0,.55); max-height:82%; } .cart{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden; transition:max-height .22s var(--ease),padding .22s var(--ease)} .bar-ticket.open .cart{max-height:46vh;overflow-y:auto;padding-top:.5rem;padding-bottom:.5rem} .cart-handle{display:flex} .bar-ticket.open .cart-handle .ch-arrow{transform:rotate(180deg)} .cart-foot{border-top:none;background:transparent} .bar-ticket .cart-foot{padding-top:.4rem} } /* =========================================================================== VESTIAIRE / ENTRÉE =========================================================================== */ .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem;margin-top:.5rem} .product-btn{ min-height:9rem;padding:1.2rem .8rem;border-radius:var(--r-xl); background:linear-gradient(168deg,rgba(247,247,245,.07),rgba(247,247,245,.015)); border:1px solid var(--trait);color:var(--blanc); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem; } .product-btn:active{transform:scale(.97);border-color:var(--rose);background:rgba(255,61,127,.12)} .pb-name{font-size:1.25rem;font-weight:800;letter-spacing:-.02em} .pb-price{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:2rem;font-weight:800;color:var(--acide);letter-spacing:-.03em} .method-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.5rem} .method-btn{ min-height:var(--tap-l);border-radius:var(--r-l); background:rgba(247,247,245,.06);border:1px solid var(--trait); color:var(--blanc);font-size:1.05rem;font-weight:700; display:flex;align-items:center;justify-content:center;gap:.5rem; } .method-btn:active{transform:scale(.97)} .method-btn.sel{background:var(--acide);border-color:var(--acide);color:#0A0A0C} .back-link{ background:none;border:none;color:var(--accent);font-size:.95rem;font-weight:700; min-height:2.8rem;padding:0 .2rem;margin-bottom:.4rem;display:inline-flex;align-items:center;gap:.4rem; } .due{font-size:1rem;margin:1rem 0;display:flex;align-items:baseline;justify-content:space-between; padding:.8rem 1rem;background:var(--nuit-3);border:1px solid var(--trait);border-radius:var(--r-l)} .due b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.9rem;font-weight:800;color:var(--acide)} .change-out{ margin-top:.8rem;font-size:1rem;display:flex;align-items:baseline;justify-content:space-between; padding:.8rem 1rem;border-radius:var(--r-l);border:1px solid rgba(255,176,32,.4);background:rgba(255,176,32,.1); } .change-out b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.2rem;font-weight:800;color:var(--ambre)} .lost{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--trait)} /* --- ACCUEIL : jauges, inclusions du pack, lien au billet ------------------ La question posée cent fois dans la soirée est « son vestiaire est compris ou pas ? ». La réponse doit être une couleur et un mot, jamais une phrase à relire dans le contenu de l'offre. */ .jauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.5rem;margin-bottom:.8rem} .jauge{background:var(--nuit-3);border:1px solid var(--trait);border-radius:var(--r-l); padding:.6rem .7rem;text-align:center} .jauge b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:1.7rem;font-weight:800;line-height:1.05;letter-spacing:-.03em} .jauge span{display:block;font-family:var(--mono);font-size:.58rem;text-transform:uppercase; letter-spacing:.13em;color:var(--gris-2);margin-top:.25rem;line-height:1.35} .jauge.vest b{color:var(--rose)} .jauge.resa b{color:var(--ambre)} .jauge.billets b{color:var(--cyan)} .jauge.plein{border-color:var(--rose);background:rgba(255,61,127,.14)} .jauge.plein b{color:#fff} .inclus-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.7rem} .inclus{ display:flex;align-items:center;gap:.6rem;padding:.8rem .9rem; border-radius:var(--r-l);border:2px solid;font-weight:800;letter-spacing:-.01em; } .inclus .i-ic{font-size:1.7rem;line-height:1;flex:none} .inclus .i-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0} .inclus .i-txt small{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em; text-transform:uppercase;opacity:.75;font-weight:600} .inclus.oui{border-color:var(--vert);background:rgba(49,208,122,.16);color:#BFF5D8} .inclus.non{border-color:var(--trait-2);background:rgba(247,247,245,.04);color:var(--gris)} .inclus.deja{border-color:var(--ambre);background:rgba(255,176,32,.14);color:#FFD79A} .lien-billet{ display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; padding:.7rem .9rem;margin-bottom:.9rem;border-radius:var(--r-l); border:1px solid rgba(59,224,218,.45);background:rgba(59,224,218,.1);font-size:.95rem; } .lien-billet b{font-weight:800} .lien-billet button{margin-left:auto;min-height:2.6rem;padding:0 .9rem;font-size:.85rem} .method-btn.compris{border-color:var(--vert);color:#BFF5D8;background:rgba(49,208,122,.14)} .method-btn.compris.sel{background:var(--vert);border-color:var(--vert);color:#04120B} /* --- SCAN RAPIDE (mobile uniquement) -------------------------------------- Au vestiaire, l'enchaînement normal — ouvrir la caméra, scanner, la fermer, la rouvrir — coûte deux secondes par personne. Sur 250 personnes, c'est la file d'attente. Ici la caméra reste allumée : on présente un QR, le verdict tombe, on touche « Suivant » et la personne d'après passe. Le bouton n'existe que sur petit écran tactile : sur le PC de la caisse, c'est la douchette USB qui va plus vite que n'importe quelle caméra. */ .rapide-only{display:none} @media (max-width:60rem) and (pointer:coarse){ .rapide-only{display:inline-flex} } .rapide{ position:fixed;inset:0;z-index:75;background:var(--nuit); display:flex;flex-direction:column; padding-top:var(--safe-t); } .rapide-cam{position:relative;flex:none;height:40dvh;min-height:11rem;background:#000;overflow:hidden} .rapide-cam video{width:100%;height:100%;object-fit:cover} .rapide-cadre{ position:absolute;inset:12% 18%;border:3px solid var(--acide);border-radius:var(--r-l); box-shadow:0 0 0 200vmax rgba(0,0,0,.45);transition:border-color .12s; } .rapide.verrou .rapide-cadre{border-color:var(--gris-2)} .rapide-etat{ position:absolute;left:0;right:0;bottom:0;padding:.5rem .8rem calc(.5rem + 0px); background:linear-gradient(transparent,rgba(0,0,0,.8)); font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--acide);text-align:center; } .rapide.verrou .rapide-etat{color:var(--ambre)} .rapide-x{ position:absolute;top:.6rem;right:.6rem;width:3rem;height:3rem;border-radius:50%; background:rgba(0,0,0,.55);border:1px solid var(--trait-2);color:var(--blanc);font-size:1.2rem; display:flex;align-items:center;justify-content:center; } .rapide-bas{ flex:1;min-height:0;padding:.7rem calc(.7rem + var(--safe-r)) calc(.7rem + var(--safe-b)) calc(.7rem + var(--safe-l)); display:flex;flex-direction:column;gap:.6rem; } .rapide-bas .verdict{min-height:0;flex:1;padding:1rem .9rem} .rapide-bas .btn-row{flex:none;margin:0} .rapide-bas .btn-row button{min-height:var(--tap-l)} /* =========================================================================== PORTE — le verdict doit se lire à un mètre, dans le noir, sans réfléchir. D'où le plein écran, la couleur franche et le pictogramme géant : à 1 h du matin, l'agent ne lit pas une phrase, il voit une couleur. =========================================================================== */ .verdict{ border-radius:var(--r-xl);padding:1.6rem 1.2rem;text-align:center; min-height:30vh; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem; border:2px solid var(--trait);background:var(--nuit-3); transition:background .1s,border-color .1s,color .1s; } .verdict .v-ic{font-size:clamp(3.4rem,14vw,6.5rem);line-height:1} .verdict .v-txt{font-size:clamp(1.6rem,5.4vw,3rem);font-weight:900;line-height:1.05;letter-spacing:-.035em} .verdict .v-sub{font-size:clamp(.9rem,2.6vw,1.2rem);opacity:.94;line-height:1.4;max-width:34ch} .verdict .v-note{display:inline-block;margin-top:.5rem;font-size:.9rem;opacity:.88} .verdict.attente{border-color:var(--trait);color:var(--gris);border-style:dashed} .verdict.attente .v-txt{font-size:clamp(1.1rem,3.2vw,1.6rem);font-weight:700;color:var(--blanc)} .verdict.vert{background:#0E6B45;border-color:#3FCF8E;color:#fff} .verdict.rouge{background:#7A1533;border-color:var(--rose);color:#fff} .verdict.orange{background:#6E4A08;border-color:var(--ambre);color:#fff} .porte-saisie{margin-top:.8rem;flex:none} .porte-saisie .scan-input{font-size:1.25rem;letter-spacing:.14em;min-height:var(--tap-l)} /* =========================================================================== ADMIN =========================================================================== */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.5rem} .stat{background:var(--nuit-3);border:1px solid var(--trait);border-radius:var(--r-l);padding:.9rem 1rem} .stat .sl{font-family:var(--mono);font-size:.62rem;text-transform:uppercase; letter-spacing:.14em;color:var(--gris-2);line-height:1.4} .stat .sn{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:1.5rem;font-weight:800;margin-top:.35rem;letter-spacing:-.03em} .stat.gold{border-color:rgba(200,255,46,.3)} .stat.gold .sn{color:var(--acide)} .stat.aq{border-color:rgba(59,224,218,.3)} .stat.aq .sn{color:var(--cyan)} .stat.red{border-color:rgba(255,61,127,.35)}.stat.red .sn{color:var(--rose)} .stat-grid>.hint{grid-column:1/-1} .verify{ margin:1rem 0;font-family:var(--mono);font-size:.85rem;line-height:1.5; padding:.8rem 1rem;border-radius:var(--r-l);border:1px solid var(--trait);color:var(--gris); } .verify.ok{color:var(--vert);border-color:rgba(49,208,122,.4);background:rgba(49,208,122,.08)} .verify.bad{color:var(--rose);border-color:rgba(255,61,127,.5);background:rgba(255,61,127,.08)} .verify code{color:var(--acide);word-break:break-all} .import-zone{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:1rem 0} .import-zone input[type=file]{ flex:1;min-width:14rem;color:var(--gris);background:var(--nuit-3); border:1px dashed var(--trait-2);border-radius:var(--r-l);padding:.9rem;font-size:.9rem; } .import-zone input[type=file]::file-selector-button{ background:var(--acide);color:#0A0A0C;border:none;border-radius:999px; padding:.6rem 1rem;margin-right:.8rem;cursor:pointer;font-family:var(--sans);font-weight:700; } .user-form{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.2rem} .perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem} /* --- Journal : une ligne = qui, où, quoi, combien ------------------------- L'ancienne version n'affichait que l'heure, le type et un montant. En fin de soirée, quand une caisse ne tombe pas juste, la seule question qui compte est « qui ? » — d'où la colonne opérateur, et les filtres pour l'isoler. */ .ledger{margin-top:.8rem;font-size:.8rem; border:1px solid var(--trait);border-radius:var(--r-l);overflow:hidden; max-height:60vh;overflow-y:auto} .ledger .lg-line{ padding:.5rem .8rem;border-bottom:1px solid var(--trait); display:grid;gap:.15rem .8rem;align-items:baseline; grid-template-columns:5.2rem 9rem 1fr auto; } .ledger .lg-line:nth-child(odd){background:rgba(247,247,245,.025)} .ledger .lg-t{font-family:var(--mono);color:var(--gris-2);white-space:nowrap} .ledger .lg-type{font-weight:700;letter-spacing:-.01em} .ledger .lg-qui{color:var(--blanc);font-weight:600;display:flex;gap:.4rem;align-items:baseline;min-width:0} .ledger .lg-qui i{font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--gris-2);border:1px solid var(--trait); border-radius:999px;padding:.05rem .4rem;flex:none} .ledger .lg-montant{font-family:var(--mono);font-variant-numeric:tabular-nums; font-weight:700;text-align:right;white-space:nowrap} .ledger .lg-det{grid-column:2/-1;color:var(--gris);font-size:.75rem;word-break:break-word} .ledger .entrant .lg-montant{color:var(--acide)} .ledger .sortant .lg-montant{color:var(--rose)} .ledger .interne .lg-montant{color:var(--violet)} .ledger .interne .lg-type,.ledger .entrant .lg-type,.ledger .sortant .lg-type{color:var(--blanc)} @media (max-width:46rem){ .ledger .lg-line{grid-template-columns:1fr auto} .ledger .lg-t{grid-column:1} .ledger .lg-montant{grid-column:2;grid-row:1} .ledger .lg-type{grid-column:1;grid-row:2} .ledger .lg-qui{grid-column:2;grid-row:2;justify-content:flex-end} .ledger .lg-det{grid-column:1/-1;grid-row:3} } /* --- « Qui a fait quoi » : une fiche par personne ------------------------- */ .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.6rem} .act{ background:linear-gradient(168deg,rgba(247,247,245,.055),rgba(247,247,245,.012)); border:1px solid var(--trait);border-radius:var(--r-l);padding:.9rem 1rem; } .act-tete{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap} .act-nom{font-size:1.15rem;font-weight:800;letter-spacing:-.02em} .act-postes{display:flex;gap:.3rem;flex-wrap:wrap} .act-postes span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase; border:1px solid var(--trait-2);border-radius:999px;padding:.1rem .45rem;color:var(--gris)} .act-cash{ margin:.7rem 0;padding:.7rem .9rem;border-radius:var(--r); border:1px solid rgba(200,255,46,.35);background:rgba(200,255,46,.08); display:flex;align-items:baseline;justify-content:space-between;gap:.5rem; } .act-cash span{font-size:.8rem;color:var(--gris)} .act-cash b{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:1.5rem;font-weight:800;color:var(--acide);letter-spacing:-.03em} .act-l{display:flex;justify-content:space-between;gap:.5rem;padding:.3rem 0; border-top:1px solid var(--trait);font-size:.85rem} .act-l:first-of-type{border-top:none} .act-l span{color:var(--gris)} .act-l b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap} .act-l.sortant b{color:var(--rose)} .act-l.interne b{color:var(--violet)} .act-pied{margin-top:.6rem;font-family:var(--mono);font-size:.66rem;color:var(--gris-2)} /* --- Réclamation : la fiche complète d'un ticket -------------------------- Objectif : répondre à « il me manque 5 € » sans quitter l'écran et sans faire attendre les vingt personnes derrière. Le solde en gros, l'historique dessous, les boutons d'action à portée de pouce. */ .recla-barre{position:sticky;top:0;z-index:5;background:var(--nuit);padding-bottom:.6rem; display:flex;flex-direction:column;gap:.5rem} .recla-barre .scan-input{font-size:1.1rem;letter-spacing:.12em} .fiche{margin-top:.9rem;border:1px solid var(--trait-2);border-radius:var(--r-xl);overflow:hidden} .fiche-tete{padding:1rem;background:linear-gradient(168deg,rgba(247,247,245,.07),rgba(247,247,245,.015)); border-bottom:1px solid var(--trait)} .fiche-nom{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;line-height:1.1} .fiche-code{font-family:var(--mono);font-size:.85rem;color:var(--gris);letter-spacing:.12em;margin-top:.2rem} .fiche-solde{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:.7rem} .fiche-solde span{font-size:.85rem;color:var(--gris)} .fiche-solde b{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:2.6rem;font-weight:900;letter-spacing:-.04em;color:var(--acide);line-height:1} .fiche-solde.zero b{color:var(--gris-2)} .fiche-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait); border-bottom:1px solid var(--trait)} .fiche-chiffres div{background:var(--nuit-2);padding:.6rem .7rem;text-align:center} .fiche-chiffres small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em; text-transform:uppercase;color:var(--gris-2)} .fiche-chiffres b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:1.15rem;font-weight:800;margin-top:.2rem} .fiche-actions{padding:.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.5rem; border-bottom:1px solid var(--trait)} .fiche-actions button{min-height:var(--tap-l);font-size:.95rem;border-radius:var(--r-l)} .fiche-histo{max-height:38vh;overflow-y:auto} .histo-l{display:grid;grid-template-columns:4.4rem 1fr auto;gap:.2rem .7rem; padding:.55rem .8rem;border-bottom:1px solid var(--trait);align-items:baseline} .histo-l:nth-child(odd){background:rgba(247,247,245,.025)} .histo-h{font-family:var(--mono);font-size:.72rem;color:var(--gris-2)} .histo-t{font-weight:700;font-size:.92rem} .histo-m{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;text-align:right;white-space:nowrap} .histo-d{grid-column:2/-1;font-size:.76rem;color:var(--gris);line-height:1.4} .histo-l.entrant .histo-m{color:var(--acide)} .histo-l.sortant .histo-m{color:var(--rose)} .histo-l.interne .histo-m{color:var(--violet)} .fiche-note{padding:.7rem .8rem;font-size:.8rem;color:var(--ambre);background:rgba(255,176,32,.1); border-top:1px solid rgba(255,176,32,.35)} .prod-table{border:1px solid var(--trait);border-radius:var(--r-l);overflow:hidden;margin-top:.6rem} .prod-l{display:grid;grid-template-columns:1fr 4rem 4rem 6rem;gap:.6rem;align-items:baseline; padding:.55rem .9rem;border-bottom:1px solid var(--trait);font-size:.85rem} .prod-l:nth-child(odd){background:rgba(247,247,245,.025)} .prod-l.tete{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gris-2);background:transparent} .prod-l b,.prod-l i{font-family:var(--mono);font-variant-numeric:tabular-nums; font-style:normal;text-align:right;font-weight:700} .prod-l i{color:var(--gris);font-weight:400} .prod-l .p-nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prod-l .p-total{color:var(--acide)} /* =========================================================================== Modales — feuille montante sur téléphone, boîte centrée sur grand écran =========================================================================== */ .modal{ position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:1rem; animation:fondu .16s ease; } @keyframes fondu{from{opacity:0}to{opacity:1}} .modal-box,.cam-box{ background:var(--nuit-2);border:1px solid var(--trait-2);border-radius:var(--r-xl); padding:1.3rem;max-width:28rem;width:100%;text-align:center; box-shadow:0 1.5rem 4rem rgba(0,0,0,.6); max-height:calc(100dvh - 2rem);overflow-y:auto; } .modal-box h3{margin:0 0 .7rem;font-size:1.25rem} .modal-box .hint{margin-bottom:.4rem} .modal-actions{display:flex;gap:.6rem;margin-top:1.1rem} .modal-actions button{flex:1;min-height:var(--tap-l);border-radius:var(--r-l);font-size:1.05rem} .dup-list{display:flex;flex-direction:column;gap:.5rem;margin:.9rem 0} .dupbtn{ display:flex;flex-direction:column;align-items:flex-start;gap:.2rem; text-align:left;padding:.8rem 1rem;font-size:.95rem; min-height:var(--tap-l);border-radius:var(--r);line-height:1.35; } .dupbtn .hint{margin:0;font-size:.78rem} .dupbtn .hint b{color:var(--acide);font-family:var(--mono)} .dupbtn i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ambre)} @media (max-width:34rem){ .modal{align-items:flex-end;padding:0} .modal-box{ max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:none; padding-bottom:calc(1.3rem + var(--safe-b)); animation:monte .22s var(--ease);max-height:88dvh; } @keyframes monte{from{transform:translateY(14%)}to{transform:none}} } /* Caméra */ .cam-title{font-weight:800;margin-bottom:.8rem;font-size:1.05rem} .cam-video-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#000; border-radius:var(--r-l);overflow:hidden} .cam-video-wrap video{width:100%;height:100%;object-fit:cover} .cam-frame{position:absolute;inset:16%;border:3px solid var(--acide);border-radius:var(--r-l); box-shadow:0 0 0 200vmax rgba(0,0,0,.45)} .cam-box .ghost{margin-top:.9rem;width:100%} .cam-btn{ flex:none;width:var(--tap);min-height:var(--tap);font-size:1.3rem; background:rgba(247,247,245,.06);border:1px solid var(--trait); border-radius:var(--r);color:var(--blanc); display:flex;align-items:center;justify-content:center; } .cam-btn:active{background:var(--accent);border-color:var(--accent);transform:scale(.95)} /* =========================================================================== Pavé numérique tactile Il monte du bas dès qu'on touche un champ « montant » : sur une caisse on ne tape jamais un prix au clavier système, qui masque la moitié de l'écran et propose un point au lieu d'une virgule. =========================================================================== */ .keypad-sheet{ position:fixed;left:0;right:0;bottom:0;z-index:70; display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem; padding:.7rem calc(.7rem + var(--safe-r)) calc(.7rem + var(--safe-b)) calc(.7rem + var(--safe-l)); background:rgba(22,22,30,.97); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid var(--trait-2); box-shadow:0 -1rem 3rem rgba(0,0,0,.6); animation:kpMonte .18s var(--ease); } @keyframes kpMonte{from{transform:translateY(30%);opacity:.4}to{transform:none;opacity:1}} .keypad-sheet button{ min-height:var(--tap-l);border-radius:var(--r-l); background:rgba(247,247,245,.07);border:1px solid var(--trait); color:var(--blanc);font-family:var(--mono);font-size:1.6rem;font-weight:700; } .keypad-sheet button:active{transform:scale(.94);background:rgba(247,247,245,.18)} .keypad-sheet .np-ok{ grid-column:1/-1;background:var(--acide);border-color:var(--acide);color:#0A0A0C; font-family:var(--sans);font-weight:800;font-size:1.1rem;min-height:var(--tap); } @media (min-width:52rem){ .keypad-sheet{ left:auto;right:1.2rem;bottom:1.2rem;width:22rem; border-radius:var(--r-xl);border:1px solid var(--trait-2); } } /* =========================================================================== Retour visuel : éclair vert/rouge plein écran + bandeau de message =========================================================================== */ #flash{ position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0; transition:opacity .14s ease; } #flash.ok{background:radial-gradient(120vmax circle at 50% 50%,rgba(49,208,122,.35),rgba(49,208,122,.06));opacity:1} #flash.bad{background:radial-gradient(120vmax circle at 50% 50%,rgba(255,61,127,.38),rgba(255,61,127,.07));opacity:1} #toasts{ position:fixed;top:calc(var(--safe-t) + .8rem);left:50%;transform:translateX(-50%); z-index:110;display:flex;flex-direction:column;gap:.5rem;align-items:center; width:min(30rem,calc(100vw - 1.5rem));pointer-events:none; } .toast{ width:100%;padding:.85rem 1.1rem;border-radius:var(--r-l); font-size:.98rem;font-weight:700;text-align:center;line-height:1.35; background:rgba(14,14,20,.96);border:1px solid var(--trait-2);color:var(--blanc); box-shadow:0 .8rem 2.4rem rgba(0,0,0,.55); animation:toastIn .2s var(--ease); } .toast.ok{border-color:rgba(200,255,46,.55);color:var(--acide)} .toast.bad{border-color:rgba(255,61,127,.65);color:#FFA3C1} .toast.out{animation:toastOut .2s var(--ease) forwards} @keyframes toastIn{from{opacity:0;transform:translateY(-.7rem)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateY(-.5rem)}} /* =========================================================================== Confort d'accessibilité =========================================================================== */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* =========================================================================== IMPRESSION THERMIQUE 80 mm Rien d'autre que le ticket ne doit sortir. La coque en 100dvh + overflow hidden est neutralisée ici, sinon l'imprimante ne reçoit qu'une page. =========================================================================== */ #printArea{display:none} @media print{ html,body{height:auto;overflow:visible;background:#fff;display:block} #app,#topbar{overflow:visible} body *{visibility:hidden} #printArea,#printArea *{visibility:visible} #printArea{display:block;position:absolute;left:0;top:0;width:72mm;color:#000;background:#fff;font-family:var(--mono)} @page{size:80mm auto;margin:3mm} .ticket{width:72mm;padding:0;color:#000;font-family:var(--mono);page-break-after:always} .ticket h1{font-size:15pt;text-align:center;margin:0 0 4px;font-family:var(--body,sans-serif)} .ticket .t-sub{text-align:center;font-size:8pt;margin-bottom:6px} .ticket .t-qr{text-align:center;margin:6px 0} .ticket .t-qr img,.ticket .t-qr svg{width:44mm;height:44mm;display:inline-block} .ticket .t-code{text-align:center;font-size:15pt;font-weight:700;letter-spacing:2px;margin:2px 0 4px} .ticket .t-warn{text-align:center;font-size:9pt;font-weight:700;border:1.5px solid #000;padding:2px;margin:4px 0} .ticket .t-photo{text-align:center;font-size:8.5pt;font-weight:700;margin:6px 0 2px} .ticket .t-big{text-align:center;font-size:22pt;font-weight:700;margin:6px 0} .ticket .t-row{display:flex;justify-content:space-between;font-size:9pt;border-top:1px dashed #000;padding-top:3px;margin-top:3px} .ticket .t-name{text-align:center;font-size:12pt;font-weight:700;margin:4px 0} .ticket .t-note{font-size:7.5pt;text-align:center;margin-top:8px} .ticket .t-num{text-align:center;font-size:40pt;font-weight:800;line-height:1;margin:6px 0} .ticket .t-cut{text-align:center;font-size:7pt;margin:8px 0;letter-spacing:2px} }