/* =========================================================== Pulzar Mobile - PWA iOS Design system "Cinq Mondes" (handoff 3jul, 54_Mobile_App.dc.html) : fond sombre #101014 + aurora/grain, cartes verre, violet #6c4cf1, Archivo (titres) / Inter (texte) / Bebas Neue (chiffres heros) / JetBrains Mono (chiffres secondaires : prix, heures, stats). Reskin PZ_RESKIN_CINQMONDES_3jul : uniquement les TOKENS + regles de coque (tabbar/toast/sheet/aurora/fonts) ont change. Zero classe renommee, zero JS touche (voir app.js/today.js/planning.js/clients.js/ plus.js/caisse.js/caisse-ui.js pour la source des noms de classes). =========================================================== */ :root { /* === Pulzar DS "Cinq Mondes" · base SOMBRE (handoff design 3jul) === */ /* Fonds */ --bg-app: #101014; /* fond app (aurora + grain en couche ::before/::after) */ --bg-app-2: #0d0d11; --surface: linear-gradient(172deg,#1c1c23,#16161b); /* PZ_APP_OPAQUE_4jul : opaque (etait blanc 5% translucide = delave) */ /* carte verre */ --surface-sunk: rgba(255,255,255,.05); /* pilule neutre / champs */ --surface-sunk-2: rgba(255,255,255,.12); --surface-press: rgba(255,255,255,.09); --control: rgba(255,255,255,.07); /* Bordures (hairline) */ --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.14); /* Couleur de marque (white-label : --brand surcharge par applyTheme, defaut violet Pulzar). Une SEULE couleur par ecran : onglet actif, bouton principal, points de statut, icone active. */ --brand: #6c4cf1; --pz-grad: linear-gradient(135deg,#6c4cf1,#e0568a); /* signature : mark connexion + avatar etablissement UNIQUEMENT */ --pz-accent: var(--brand); /* accents pleins = marque SOLIDE (pas de degrade ailleurs) */ --pz-solid: var(--brand); --pz-soft: color-mix(in srgb, var(--brand) 22%, transparent); --pz-softer: color-mix(in srgb, var(--brand) 12%, transparent); --pz-glow: color-mix(in srgb, var(--brand) 38%, transparent); --pz-ink: #ffffff; /* texte SUR la couleur de marque */ /* Secondaire (pas de second degrade · on reste sur la marque) */ --accent-2: var(--brand); /* Texte */ --tx-1: #f3f1ec; /* encre claire (texte principal sur fond sombre) */ --tx-2: #a8a4b2; /* secondaire */ --tx-3: #8a8794; /* attenue / placeholder */ /* Statuts */ --ok: #5ad19a; --warn: #ffb37a; --warn-ink: #ffb37a; --danger: #e0568a; --danger-soft: rgba(224,86,138,.14); --radius: 14px; --radius-sm: 12px; --radius-lg: 16px; --sheet-radius: 24px; --ease-ios: cubic-bezier(.32,.72,0,1); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg-app); color: var(--tx-1); font-family: 'Inter', -apple-system, system-ui, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } body { min-height: 100dvh; } /* ============================================================ PZ_RESKIN_CINQMONDES_3jul · couche "matiere" de la coque : aurora vivante (halos violet/rose/vert en derive lente) + grain photographique. Pur CSS via pseudo-elements de , zero DOM, zero JS. Vecu UNE fois dans la coque (pas repete par ecran), fidele a TOKENS.md section "Decor global (coque)". Redimensionne pour mobile (recette desktop eprouvee : cms-killer/admin/_design/ pz-ds.css PZ_SKIN_AURORA_3jul, halos ~3x plus petits pour 390px). - Caisse exclue (POS deja parfaite selon le handoff, on n'y touche pas au-dela des tokens de coque communs). - pointer-events:none + z-index:0 : ne bloque jamais le tap, reste sous la tabbar (120) / toasts (100) / sheets (81) / scrims (90) qui sont tous en z-index positif explicite plus haut. ============================================================ */ @keyframes pzAuroraDrift1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(22px,14px) scale(1.12); } 100% { transform: translate(0,0) scale(1); } } @keyframes pzAuroraDrift2 { 0% { transform: translate(0,0) scale(1.08); } 50% { transform: translate(-18px,10px) scale(.94); } 100% { transform: translate(0,0) scale(1.08); } } body:not(:has(.caisse-mount))::before { content: ''; position: fixed; inset: -120px -80px; z-index: 0; pointer-events: none; background: radial-gradient(300px 240px at 8% -4%, rgba(108,76,241,.18), transparent 70%), radial-gradient(260px 220px at 96% 2%, rgba(224,86,138,.11), transparent 70%), radial-gradient(300px 200px at 40% 104%, rgba(47,138,91,.08), transparent 70%); filter: blur(30px); animation: pzAuroraDrift1 20s ease-in-out infinite; will-change: transform; } body:not(:has(.caisse-mount))::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* IMPORTANT : #app reste SANS position/z-index propre (position:static). La tabbar (.tabbar, z-index:120) vit DANS #app alors que toasts/sheets/scrims (z-index 80-100) sont ajoutes en freres directs de par le JS (today.js, app.js, planning.js, clients.js, plus.js, caisse-ui.js : document.body.appendChild). Donner un z-index a #app creerait un contexte d'empilement qui pieger­ait la tabbar SOUS ces overlays body-level et casserait l'invariant documente plus haut ("la tab bar reste TOUJOURS au-dessus des scrims caisse et du toast"). L'aurora (pseudo-elements body, z-index:0) reste donc perçue "par-dessus" le contenu en flux normal non positionne (regle de stacking standard, meme comportement deja eprouve sur l'admin desktop) · sans consequence visuelle grace a l'opacite tres faible + le flou 30px + pointer-events:none. */ h1, h2, h3, .display { font-family: 'Archivo', 'Inter', sans-serif; } .num { font-family: 'JetBrains Mono', 'Archivo', sans-serif; font-feature-settings: 'tnum' 1; } /* Bebas Neue : grands chiffres / KPI (encaisse, prix, minuteurs, compteurs) */ .pz-bebas { font-family: 'Bebas Neue', 'Archivo', sans-serif; font-weight: 400; letter-spacing: 1px; font-feature-settings: 'tnum' 1; } button { font-family: inherit; cursor: pointer; } input { font-family: inherit; } #app { min-height: 100dvh; display: flex; flex-direction: column; } /* ====================== LOGIN ====================== */ .login { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--safe-top) + 40px) 24px calc(var(--safe-bottom) + 32px); max-width: 480px; margin: 0 auto; width: 100%; animation: pzScreen .4s var(--ease-ios); } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 36px; text-align: center; } .brand-logo { width: 76px; height: 76px; border-radius: 20px; background: var(--pz-accent); display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 40px; color: var(--pz-ink); box-shadow: 0 10px 36px var(--pz-glow); object-fit: cover; overflow: hidden; transition: background .35s var(--ease-ios), box-shadow .35s var(--ease-ios); } .brand-logo img { width: 100%; height: 100%; object-fit: contain; } .brand-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.5px; } .brand-sub { color: var(--tx-3); font-size: 13px; font-weight: 500; } /* PZ_APP_POLISH_3jul : selecteur de profil = 2 cartes-radio (Patron / Salarie) fidele au handoff 54_Mobile_App.dc.html. Cablage inchange (#roleSeg, data-role, toggle .active gere par app.js). */ .role-seg { display: flex; flex-direction: column; gap: 12px; padding: 0; background: transparent; border: 0; border-radius: 0; margin-bottom: 22px; } .role-seg button { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--border); background: var(--surface-sunk); color: var(--tx-1); padding: 15px 16px; border-radius: 16px; transition: border-color .2s var(--ease-ios), background .2s var(--ease-ios), transform .1s var(--ease-ios); min-height: 44px; } .role-seg button.active { border-color: var(--pz-solid); background: var(--pz-softer); } .role-seg button:active { transform: scale(.98); } .role-seg .rc-ic { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--control); color: var(--tx-3); } .role-seg .rc-ic svg { width: 22px; height: 22px; } .role-seg button[data-role="admin"] .rc-ic { background: var(--pz-soft); color: var(--pz-solid); } .role-seg .rc-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .role-seg .rc-t { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; color: var(--tx-1); } .role-seg .rc-s { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13px; color: var(--tx-3); } .role-seg .rc-dot { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-sunk); transition: border-color .2s var(--ease-ios), border-width .2s var(--ease-ios); } .role-seg button.active .rc-dot { border: 6px solid var(--pz-solid); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 7px; } .field input { width: 100%; padding: 15px 16px; background: var(--surface-sunk); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--tx-1); font-size: 16px; transition: border-color .2s, box-shadow .2s; min-height: 52px; } .field input:focus { outline: none; border-color: var(--pz-solid); box-shadow: 0 0 0 3px var(--pz-softer); } .field input::placeholder { color: var(--tx-3); } .turnstile-wrap { display: flex; justify-content: center; margin: 6px 0 16px; min-height: 0; } .btn-primary { width: 100%; padding: 16px; border: 0; border-radius: var(--radius); background: var(--pz-accent); color: var(--pz-ink); font-weight: 700; font-size: 16px; letter-spacing: .2px; box-shadow: 0 8px 26px var(--pz-glow); transition: transform .1s var(--ease-ios), opacity .2s; min-height: 52px; } .btn-primary:active { transform: scale(.97); } .btn-primary:disabled { opacity: .55; } .btn-row { display: flex; gap: 12px; margin-top: 4px; } .btn-faceid { width: 56px; min-width: 56px; border-radius: var(--radius); background: var(--control); border: 1px solid var(--border-strong); color: var(--pz-solid); display: flex; align-items: center; justify-content: center; transition: transform .1s; } .btn-faceid:active { transform: scale(.94); } .btn-faceid svg { width: 26px; height: 26px; } .login-err { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); color: var(--danger); padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; margin-bottom: 14px; display: none; } .login-err.show { display: block; animation: pzShake .3s; } .login-foot { text-align: center; color: var(--tx-3); font-size: 12px; margin-top: 24px; } /* ====================== APP SHELL ====================== */ .shell { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; } .screen { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--safe-top) + 8px) 20px calc(78px + var(--safe-bottom) + 16px); animation: pzScreen .32s var(--ease-ios); } .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 10px; } .top-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -.8px; } .top-actions { display: flex; align-items: center; gap: 10px; } .role-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--tx-2); transition: transform .1s; } .role-pill:active { transform: scale(.96); } .role-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--pz-accent); color: var(--pz-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; font-family: 'Archivo', sans-serif; } .placeholder-card { margin-top: 18px; padding: 40px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); text-align: center; } .placeholder-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--pz-softer); color: var(--pz-solid); display: flex; align-items: center; justify-content: center; } .placeholder-icon svg { width: 28px; height: 28px; } .placeholder-title { font-weight: 700; font-size: 17px; margin-bottom: 6px; } .placeholder-sub { color: var(--tx-2); font-size: 14px; line-height: 1.5; } .placeholder-badge { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--border); color: var(--tx-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; } /* ====================== TAB BAR ====================== */ .tabbar { /* PZ_TENANT_ISOLATION_20jun : la tab bar reste TOUJOURS au-dessus des scrims caisse (pzc-scrim z-index:90, sheet-scrim:80) et du toast (100) pour ne jamais etre bloquee. Taper un onglet pendant qu'une feuille caisse est ouverte declenche la navigation, qui demonte la caisse et ferme la feuille (app.js renderScreen -> unmount). */ /* PZ_RESKIN_CINQMONDES_3jul : dock CLAIR flottant fidele a la maquette 54_Mobile_App (bg #FFFFFF opaque) qui contraste volontairement avec le canevas sombre au-dessus. Couleurs LOCALES (--tab-*) : ne dependent PAS des tokens --tx-* globaux (desormais clairs, pensés pour texte-sur-fond-sombre) afin de garder l'AA sur fond blanc. */ --tab-ink: #57545f; /* icone/label inactifs, AA sur blanc (~4.6:1) */ --tab-ink-active: #15131a; /* label actif, encre quasi-noire sur blanc */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; justify-content: space-around; align-items: stretch; padding: 8px 6px calc(8px + var(--safe-bottom)); background: #FFFFFF; border-top: 1px solid rgba(16,16,20,.08); box-shadow: 0 -8px 30px rgba(0,0,0,.28); } .tab { flex: 1 1 0; min-width: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; color: var(--tab-ink); border-radius: 12px; transition: transform .1s var(--ease-ios), color .2s; min-height: 48px; } .tab:active { transform: scale(.9); } .tab svg { width: 24px; height: 24px; } .tab .tab-label { font-size: 10px; font-weight: 600; letter-spacing: .2px; color: var(--tab-ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* C-UX2 : label inactif ≥ 4.5:1 */ .tab.active { color: var(--pz-solid); } .tab.active .tab-label { color: var(--tab-ink-active); font-weight: 700; } /* C-UX2 : label actif en encre quasi-noire (l'icône garde l'accent), AA sur fond blanc */ .tab.active .tab-ico { background: var(--pz-soft); border-radius: 10px; } .tab-ico { padding: 3px 12px; border-radius: 10px; transition: background .2s; } /* ====================== TOAST ====================== */ #toast-host { position: fixed; left: 0; right: 0; bottom: calc(96px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 100; } .toast { display: inline-flex; align-items: center; gap: 9px; background: #f3f1ec; border: 1px solid rgba(16,16,20,.06); color: #171521; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: pzToast .3s var(--ease-ios); } .toast .toast-check { width: 20px; height: 20px; border-radius: 50%; background: var(--ok); display: flex; align-items: center; justify-content: center; color: #052e1a; } .toast .toast-check svg { width: 13px; height: 13px; } /* ====================== SHEET (basique) ====================== */ .sheet-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(2,5,12,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: pzFade .25s ease; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; background: #17161c; border-top: 1px solid var(--border-strong); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; padding: 12px 20px calc(86px + var(--safe-bottom)); max-height: 88dvh; overflow-y: auto; animation: pzSheet .34s var(--ease-ios); touch-action: pan-y; box-shadow: 0 -20px 60px rgba(0,0,0,.5); } .sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 4px auto 16px; } .sheet h3 { margin: 0 0 14px; font-size: 20px; } .sheet-close { width: 100%; margin-top: 14px; padding: 14px; border-radius: var(--radius); background: var(--control); border: 1px solid var(--border-strong); color: var(--tx-1); font-weight: 600; min-height: 48px; } .sheet-row { color: var(--tx-2); font-size: 14px; line-height: 1.6; } /* ====================== ANIMATIONS ====================== */ @keyframes pzScreen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pzSheet { from { transform: translateY(100%); } to { transform: none; } } @keyframes pzFade { from { opacity: 0; } to { opacity: 1; } } @keyframes pzToast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes pzShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } .hidden { display: none !important; } /* ======================================================== JALON 2 · CAISSE / POS (iOS) ======================================================== */ .caisse-mount { display:flex; flex-direction:column; } .pzc-loading,.pzc-empty { padding:40px 16px; text-align:center; color:var(--tx-3); font-size:14px; } .pzc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 10px; flex-wrap:wrap; } .pzc-op { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--tx-2); } .pzc-op-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); } .pzc-top-actions { display:flex; gap:7px; } .pzc-chip { padding:8px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--tx-2); font-size:12px; font-weight:600; min-height:38px; } .pzc-chip b { color:var(--pz-solid); } .pzc-chip.train { background:rgba(168,85,247,.18); border-color:#a855f7; color:#c4b5fd; } .pzc-trainbar { background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.4); color:#c4b5fd; padding:9px 12px; border-radius:12px; font-size:12px; font-weight:600; text-align:center; margin-bottom:10px; } .pzc-prodwrap { padding-bottom:84px; } .pzc-cat { font-size:11px; text-transform:uppercase; letter-spacing:.8px; font-weight:700; color:var(--tx-3); margin:14px 2px 8px; } /* ---- accordeon categories (PZ_CATACCORDION_20jun) ---- */ .pzc-cat-toggle { display:flex; align-items:center; gap:9px; width:100%; margin:14px 0 8px; padding:9px 12px; border-radius:13px; background:var(--surface); border:1px solid var(--border); color:var(--tx-2); text-align:left; min-height:42px; transition:background .18s, border-color .18s; } .pzc-cat-toggle:active { transform:scale(.99); } .pzc-cat-toggle .pzc-cat-label { flex:1; font-size:12px; text-transform:uppercase; letter-spacing:.8px; font-weight:700; color:var(--tx-2); } .pzc-cat-toggle .pzc-cat-count { font-size:11px; font-weight:700; color:var(--tx-3); background:var(--control); border:1px solid var(--border); border-radius:999px; min-width:22px; height:22px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; } .pzc-cat-chevron { width:18px; height:18px; flex:none; color:var(--tx-3); display:inline-flex; align-items:center; justify-content:center; transition:transform .22s var(--ease-ios); } .pzc-cat-chevron svg { width:18px; height:18px; } .pzc-cat-toggle.collapsed .pzc-cat-chevron { transform:rotate(-90deg); } .pzc-cat-toggle.collapsed { background:var(--control); } .pzc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; } .pzc-grid-hidden { display:none; } .pzc-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:92px; padding:10px 8px; border-radius:var(--radius); background:var(--surface); border:1.5px solid var(--border); color:var(--tx-1); transition:transform .1s var(--ease-ios), border-color .2s; } .pzc-tile:active { transform:scale(.94); } .pzc-tile.in { border-color:var(--pz-solid); box-shadow:0 0 0 3px var(--pz-softer); } .pzc-tile-ico { font-size:22px; line-height:1; } .pzc-tile-name { font-size:12px; font-weight:600; text-align:center; line-height:1.2; max-height:2.4em; overflow:hidden; } .pzc-tile-price { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; color:var(--pz-solid); } .pzc-badge { position:absolute; top:6px; right:6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--pz-accent); color:var(--pz-ink); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; } .pzc-cartbar { position:fixed; left:0; right:0; bottom:calc(70px + var(--safe-bottom)); padding:0 16px; z-index:60; transform:translateY(120%); transition:transform .3s var(--ease-ios); pointer-events:none; } .pzc-cartbar.show { transform:none; pointer-events:auto; } .pzc-cartbar-btn { width:100%; max-width:520px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:15px 18px; border-radius:16px; background:var(--pz-accent); color:var(--pz-ink); border:0; box-shadow:0 10px 34px var(--pz-glow); font-weight:700; } .pzc-cartbar-n { min-width:28px; height:28px; border-radius:8px; background:rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; font-weight:800; } .pzc-cartbar-lbl { flex:1; text-align:left; font-size:15px; } .pzc-cartbar-total { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:800; } /* ---- overlays ---- */ .pzc-scrim { position:fixed; inset:0; z-index:90; background:rgba(2,5,12,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:pzFade .22s ease; display:flex; align-items:flex-end; } .pzc-sheet { width:100%; max-width:560px; margin:0 auto; background:var(--surface); border-top:1px solid var(--border-strong); border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; padding:10px 20px calc(86px + var(--safe-bottom)); max-height:92dvh; overflow-y:auto; animation:pzSheet .32s var(--ease-ios); } .pzc-handle { width:40px; height:5px; border-radius:3px; background:var(--border-strong); margin:4px auto 14px; } .pzc-sheet-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .pzc-sheet-h h3 { margin:0; font-size:20px; } .pzc-x { background:var(--control); border:1px solid var(--border-strong); color:var(--tx-2); padding:8px 14px; border-radius:10px; font-weight:600; font-size:13px; } .pzc-sheet-row { color:var(--tx-2); font-size:14px; margin:4px 0 12px; } .pzc-sheet-row b { color:var(--pz-solid); } .pzc-line { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); } .pzc-line-main { flex:1; min-width:0; } .pzc-line-name { font-size:14px; font-weight:600; } .pzc-line-unit { font-size:11px; color:var(--tx-3); margin-top:2px; } .pzc-line-qty { display:flex; align-items:center; gap:10px; } .pzc-step { width:34px; height:34px; border-radius:10px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-1); font-size:20px; font-weight:700; } .pzc-line-qty span { min-width:20px; text-align:center; font-weight:700; } .pzc-total-row { display:flex; align-items:center; justify-content:space-between; margin:14px 0; font-size:15px; color:var(--tx-2); } .pzc-total-val { font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:800; color:var(--tx-1); } .pzc-paygrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; } .pzc-pay { padding:16px; border-radius:14px; border:1px solid var(--border-strong); font-weight:700; font-size:15px; color:var(--tx-1); background:var(--control); min-height:54px; } .pzc-pay.cash { background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.4); color:var(--ok); } .pzc-pay.cb { background:var(--pz-soft); border-color:var(--pz-glow); color:var(--pz-solid); } .pzc-pay.split { background:rgba(167,139,250,.14); border-color:rgba(167,139,250,.4); color:#c4b5fd; } .pzc-pay:active { transform:scale(.97); } .pzc-confirm { width:100%; margin-top:14px; padding:16px; border-radius:14px; background:var(--pz-accent); color:var(--pz-ink); font-weight:800; font-size:16px; border:0; box-shadow:0 8px 24px var(--pz-glow); min-height:54px; } .pzc-confirm:disabled { opacity:.45; box-shadow:none; } .pzc-confirm.ghost { background:var(--control); color:var(--tx-1); box-shadow:none; border:1px solid var(--border-strong); } .pzc-confirm.z { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; box-shadow:0 8px 24px rgba(245,158,11,.3); } /* ---- paniers en attente (PZ_HELDCARTS_20jun) ---- */ .pzc-hold-btn { width:100%; margin:2px 0 12px; padding:14px; border-radius:14px; background:var(--control); border:1px dashed var(--border-strong); color:var(--tx-2); font-weight:700; font-size:14px; min-height:50px; } .pzc-hold-btn:active { transform:scale(.98); } .pzc-held { display:flex; align-items:stretch; gap:8px; padding:4px 0; border-bottom:1px solid var(--border); } .pzc-held-main { flex:1; min-width:0; text-align:left; background:transparent; border:0; padding:10px 0; color:var(--tx-1); } .pzc-held-name { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pzc-held-sub { font-size:12px; color:var(--tx-3); margin-top:3px; } .pzc-held-right { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; } .pzc-held-right b { font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--pz-solid); } .pzc-held-del { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:var(--danger); border-radius:8px; padding:5px 11px; font-weight:700; font-size:12px; } .pzc-held-del:active { transform:scale(.95); } /* ---- cash ---- */ .pzc-cash-summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; text-align:center; font-size:11px; color:var(--tx-3); margin-bottom:14px; } .pzc-cash-summary b { display:block; font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--tx-1); margin-top:4px; } .pzc-change { color:var(--ok); } .pzc-cash-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; } .pzc-cash-btn { padding:13px 4px; border-radius:11px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-1); font-weight:700; font-size:13px; min-height:46px; } .pzc-cash-btn:active { transform:scale(.93); } .pzc-cash-clear { width:100%; margin-top:10px; padding:11px; border-radius:11px; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:var(--danger); font-weight:600; } .pzc-split-amt { width:100%; box-sizing:border-box; padding:15px; font-size:22px; font-weight:800; text-align:center; background:var(--surface-sunk); border:1px solid var(--border-strong); border-radius:14px; color:var(--tx-1); margin:8px 0; } .pzc-split-line { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:var(--surface-sunk); border-radius:10px; margin-bottom:6px; font-size:14px; } .pzc-split-line button { margin-left:10px; background:rgba(248,113,113,.15); border:0; color:var(--danger); border-radius:7px; padding:3px 10px; font-weight:800; } /* ---- success ---- */ .pzc-success { text-align:center; padding:8px 0 4px; } .pzc-check { width:72px; height:72px; margin:0 auto 16px; border-radius:50%; background:rgba(52,211,153,.16); color:var(--ok); display:flex; align-items:center; justify-content:center; } .pzc-check.train { background:rgba(168,85,247,.16); color:#c4b5fd; } .pzc-check svg { width:38px; height:38px; } .pzc-success-t { font-size:15px; font-weight:600; color:var(--tx-2); } .pzc-success-amt { font-family:'JetBrains Mono',monospace; font-size:40px; font-weight:800; margin:6px 0; } .pzc-success-sub { font-size:12px; color:var(--tx-3); } .pzc-success-hash { font-family:monospace; font-size:11px; color:var(--tx-3); margin-top:8px; } .pzc-mail { width:100%; box-sizing:border-box; margin-top:16px; padding:14px; background:var(--surface-sunk); border:1px solid var(--border-strong); border-radius:13px; color:var(--tx-1); font-size:15px; } /* ---- resa ---- */ .pzc-resa { width:100%; display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; background:var(--surface-sunk); border:1px solid var(--border); margin-bottom:10px; text-align:left; color:var(--tx-1); } .pzc-resa:active { transform:scale(.98); } .pzc-resa-main { flex:1; min-width:0; } .pzc-resa-top { font-size:14px; font-weight:700; } .pzc-resa-sub { font-size:12px; color:var(--tx-3); margin-top:4px; } .pzc-resa-v3 { background:rgba(124,58,237,.25); color:#c4b5fd; padding:1px 6px; border-radius:5px; font-size:10px; font-weight:800; } .pzc-resa-badge { padding:2px 7px; border-radius:6px; font-size:10px; font-weight:800; } .pzc-resa-badge.red { background:rgba(248,113,113,.16); color:var(--danger); } .pzc-resa-badge.orange { background:rgba(251,191,36,.16); color:var(--warn); } .pzc-resa-amt { text-align:right; } .pzc-resa-amt small { display:block; font-size:10px; color:var(--tx-3); } .pzc-resa-amt b { font-family:'JetBrains Mono',monospace; font-size:20px; color:var(--pz-solid); } /* ---- manage / Z ---- */ .pzc-mg-fond { text-align:center; font-size:12px; color:var(--tx-3); margin-bottom:16px; } .pzc-mg-fond b { display:block; font-family:'JetBrains Mono',monospace; font-size:30px; color:var(--tx-1); margin-top:4px; } .pzc-mg-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .pzc-mg-btn { padding:18px 12px; border-radius:14px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-1); font-weight:700; font-size:14px; min-height:60px; } .pzc-mg-btn.z { background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(239,68,68,.18)); border-color:rgba(245,158,11,.4); color:var(--warn); } .pzc-dn-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; max-height:46vh; overflow-y:auto; } .pzc-dn { display:flex; align-items:center; justify-content:space-between; padding:8px 11px; background:var(--surface-sunk); border-radius:10px; font-size:13px; } .pzc-dn > div { display:flex; align-items:center; gap:8px; } .pzc-dn button { width:30px; height:30px; border-radius:8px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-1); font-size:18px; font-weight:700; } .pzc-dn b { min-width:22px; text-align:center; } .pzc-cnt-total { margin:14px 0 4px; font-size:14px; color:var(--tx-2); display:flex; gap:10px; align-items:center; } .pzc-cnt-total b { font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--tx-1); } .pzc-z { background:var(--surface-sunk); border-radius:14px; padding:14px; } .pzc-z-row { display:flex; justify-content:space-between; padding:7px 0; font-size:14px; color:var(--tx-2); border-bottom:1px solid var(--border); } .pzc-z-row.total { border:0; margin-top:6px; font-weight:800; font-size:16px; color:var(--tx-1); } .pzc-z-row.train { opacity:.6; color:#c4b5fd; } .pzc-z-sealed { margin-top:12px; text-align:center; color:var(--ok); font-weight:700; font-size:13px; } .pzc-z-sealed.warn { color:var(--warn); } /* ---- PIN ---- */ .pzc-pin-dots { display:flex; gap:14px; justify-content:center; margin:18px 0; } .pzc-pin-dots span { width:14px; height:14px; border-radius:50%; border:2px solid var(--border-strong); } .pzc-pin-dots span.on { background:var(--pz-solid); border-color:var(--pz-solid); } .pzc-pin-err { text-align:center; color:var(--danger); font-size:13px; font-weight:600; min-height:18px; } .pzc-pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; } .pzc-pin-pad button { padding:18px; border-radius:14px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-1); font-size:22px; font-weight:700; min-height:60px; } .pzc-pin-pad button:active { transform:scale(.93); } .pzc-pin-owner { font-size:13px !important; color:var(--pz-solid) !important; } /* ====================== SELECTEUR D'ETABLISSEMENT (PZ_J2_MULTITENANT 20jun) ====================== */ .tenant-picker { flex: 1; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 40px) 20px calc(var(--safe-bottom) + 24px); max-width: 520px; margin: 0 auto; width: 100%; animation: pzScreen .4s var(--ease-ios); } .tp-head { text-align: center; margin-bottom: 26px; } .tp-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 24px; color: var(--tx-1); } .tp-sub { color: var(--tx-2); font-size: 14px; margin-top: 6px; } .tp-list { display: flex; flex-direction: column; gap: 12px; } .tp-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--tx-1); text-align: left; min-height: 72px; transition: transform .18s var(--ease-ios), border-color .2s, box-shadow .2s; } .tp-card:active { transform: scale(.97); border-color: var(--tp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-accent) 22%, transparent); } .tp-logo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; } .tp-card-main { flex: 1; min-width: 0; } .tp-card-name { display: block; font-weight: 600; font-size: 16px; color: var(--tx-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-card-sub { display: block; font-size: 12px; color: var(--tx-2); margin-top: 2px; } .tp-chev { flex: 0 0 auto; width: 26px; height: 26px; color: var(--tp-accent); opacity: .6; display: flex; align-items: center; justify-content: center; } .tp-chev svg { width: 18px; height: 18px; } .tp-logout { margin-top: auto; align-self: center; margin-top: 28px; padding: 12px 22px; border-radius: var(--radius); background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); color: var(--danger); font-weight: 600; font-size: 14px; } .tp-logout:active { transform: scale(.96); } /* ============================================================ JALON 3 : PLANNING (vue jour iOS) ============================================================ */ .planning-mount { display:flex; flex-direction:column; } /* navigation jour */ .pzpl-bar { display:flex; align-items:center; gap:10px; margin:4px 0 12px; } .pzpl-nav { width:46px; height:46px; min-width:46px; border-radius:14px; background:var(--surface); border:1px solid var(--border-strong); color:var(--tx-1); display:flex; align-items:center; justify-content:center; transition:transform .1s var(--ease-ios); } .pzpl-nav:active { transform:scale(.92); } .pzpl-nav svg { width:20px; height:20px; } .pzpl-day { flex:1; min-height:46px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:6px 10px; color:var(--tx-1); transition:transform .1s var(--ease-ios); } .pzpl-day:active { transform:scale(.98); } .pzpl-day-main { font-weight:700; font-size:15px; text-transform:capitalize; } .pzpl-day-sub { font-size:11px; color:var(--tx-3); font-weight:500; } /* segment vue */ .pzpl-seg { display:flex; gap:4px; padding:4px; border-radius:13px; background:var(--surface-sunk); border:1px solid var(--border); margin-bottom:14px; } .pzpl-seg button { flex:1; border:0; background:transparent; color:var(--tx-2); font-size:13px; font-weight:600; padding:9px; border-radius:10px; min-height:40px; transition:all .2s var(--ease-ios); } .pzpl-seg button.active { background:var(--pz-soft); color:var(--pz-solid); } .pzpl-empty { text-align:center; color:var(--tx-3); font-size:14px; padding:48px 20px; } /* zones (occupation) */ .pzpl-zones { display:flex; flex-direction:column; gap:18px; } .pzpl-zone { display:flex; flex-direction:column; gap:8px; } .pzpl-zone-head { display:flex; align-items:center; gap:8px; padding:0 2px; } .pzpl-zdot { width:10px; height:10px; border-radius:50%; flex:none; } .pzpl-zname { font-weight:700; font-size:15px; color:var(--tx-1); flex:1; } .pzpl-zcap { font-size:12px; color:var(--tx-3); font-weight:600; } .pzpl-zone-empty { font-size:13px; color:var(--tx-3); padding:8px 4px; } /* slot (creneau) */ .pzpl-slot { width:100%; text-align:left; display:flex; flex-direction:column; gap:8px; padding:13px 15px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border-strong); color:var(--tx-1); transition:transform .1s var(--ease-ios), border-color .2s; } .pzpl-slot:active { transform:scale(.985); } .pzpl-slot.free { flex-direction:row; align-items:center; justify-content:space-between; border:1.5px dashed rgba(52,211,153,.45); background:rgba(52,211,153,.06); } .pzpl-slot-l { display:flex; align-items:center; gap:10px; } .pzpl-slot-act { font-weight:600; font-size:14px; color:var(--ok); } .pzpl-plus { width:30px; height:30px; border-radius:50%; background:rgba(52,211,153,.16); color:var(--ok); font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; line-height:1; } .pzpl-slot-top { display:flex; align-items:center; justify-content:space-between; } .pzpl-time { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:16px; } .pzpl-slot-groups { display:flex; flex-direction:column; gap:4px; } .pzpl-g { font-size:13px; color:var(--tx-2); display:flex; align-items:center; gap:7px; } .pzpl-gdot { width:7px; height:7px; border-radius:50%; flex:none; } /* chip etat */ .pzpl-chip { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; } .pzpl-chip.ok { background:rgba(52,211,153,.14); color:var(--ok); } .pzpl-chip.dep { background:rgba(251,191,36,.14); color:var(--warn); } .pzpl-chip.due { background:rgba(248,113,113,.14); color:var(--danger); } /* barre de remplissage */ .pzpl-fill { height:6px; border-radius:999px; background:var(--surface-sunk-2); overflow:hidden; } .pzpl-fill span { display:block; height:100%; border-radius:999px; transition:width .3s var(--ease-ios); } /* liste reservations */ .pzpl-list { display:flex; flex-direction:column; gap:8px; } .pzpl-row { width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border-strong); transition:transform .1s var(--ease-ios); } .pzpl-row:active { transform:scale(.985); } .pzpl-row-time { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; color:var(--pz-solid); min-width:46px; } .pzpl-row-main { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .pzpl-row-cust { font-weight:600; font-size:15px; color:var(--tx-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pzpl-row-meta { font-size:12px; color:var(--tx-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pzpl-arr { font-size:10px; font-weight:700; color:var(--ok); background:rgba(52,211,153,.14); padding:1px 6px; border-radius:999px; } /* badge paiement */ .pzpl-pay { font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; } .pzpl-pay.paid { background:rgba(52,211,153,.14); color:var(--ok); } .pzpl-pay.deposit { background:rgba(251,191,36,.14); color:var(--warn); } .pzpl-pay.due { background:rgba(248,113,113,.14); color:var(--danger); } .pzpl-pay.free { background:var(--surface-sunk); color:var(--tx-3); } /* feuille session / reservation */ .pzpl-sh-title { margin:8px 0 4px; font-size:20px; font-weight:700; } .pzpl-sh-sub { color:var(--tx-2); font-size:13px; margin-bottom:14px; } .pzpl-lbl { display:block; font-size:12px; font-weight:600; color:var(--tx-3); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 6px; } .pzpl-input { width:100%; padding:14px 16px; background:var(--surface-sunk); border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--tx-1); font-size:16px; } .pzpl-input:focus { outline:none; border-color:var(--pz-solid); box-shadow:0 0 0 3px var(--pz-softer); } .pzpl-cap-note { font-size:12px; color:var(--tx-3); margin-top:8px; min-height:14px; } .pzpl-stepper { display:flex; align-items:center; gap:14px; } .pzpl-stepper button { width:48px; height:48px; border-radius:14px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-1); font-size:24px; font-weight:700; } .pzpl-stepper button:active { transform:scale(.92); } .pzpl-stepper span { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; min-width:34px; text-align:center; } /* groupe (session) */ .pzpl-grp { margin-top:14px; padding:14px; border-radius:var(--radius); background:var(--surface-sunk); border:1px solid var(--border); } .pzpl-grp-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .pzpl-grp-cust { font-weight:700; font-size:16px; } .pzpl-grp-meta { font-size:13px; color:var(--tx-2); margin:5px 0 12px; } .pzpl-players { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .pzpl-pl { width:46px; height:46px; border-radius:13px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-2); font-weight:700; font-size:14px; transition:transform .1s var(--ease-ios), all .15s; } .pzpl-pl:active { transform:scale(.9); } .pzpl-pl.on { background:var(--pz-soft); border-color:var(--pz-solid); color:var(--pz-solid); } .pzpl-grp-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .pzpl-ci-count { font-size:12px; font-weight:600; color:var(--tx-3); margin-right:auto; } .pzpl-mini { padding:9px 14px; border-radius:11px; background:var(--control); border:1px solid var(--border-strong); color:var(--tx-1); font-size:13px; font-weight:600; min-height:40px; } .pzpl-mini:active { transform:scale(.95); } .pzpl-mini.cash { background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.4); color:var(--ok); } .pzpl-mini.danger { background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.42); color:#f87171; } .pzpl-start { margin-top:2px; } .pzpl-start:disabled { opacity:.5; } /* ============================================================ JALON 4 : AUJOURD'HUI (tableau de bord du jour, vue iOS) Tokens DS "Cinq Mondes" sombre. Chiffres KPI en Bebas Neue (maquette 54_Mobile_App). ============================================================ */ .today-mount { display:flex; flex-direction:column; padding-top:6px; } /* En-tete grand titre + cloche */ /* En-tete : date (eyebrow) + salutation (nom utilisateur) + avatar initiales */ .pzt-hello { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:4px 0 20px; } .pzt-hello-tx { flex:1; min-width:0; } .pzt-eyebrow { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--tx-2); margin:0 0 7px; } .pzt-h1 { font-family:'Archivo',sans-serif; font-weight:600; font-size:26px; line-height:1.08; letter-spacing:-.8px; margin:0; color:var(--tx-1); } .pzt-h1 .pzt-nm { color:inherit; } .pzt-av { position:relative; width:44px; height:44px; min-width:44px; border-radius:50%; background:var(--surface-sunk); border:1px solid var(--border); color:var(--tx-1); display:grid; place-items:center; font-family:'Archivo',sans-serif; font-weight:600; font-size:15px; } .pzt-av:active { transform:scale(.94); } .pzt-av-badge { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--brand); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg-app); } /* Hero ENCAISSE (patron / droit money) · grand chiffre Bebas */ .pzt-hero { margin:0 0 22px; } .pzt-hero-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .pzt-hero-lbl { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--tx-2); } .pzt-hero-delta { font-size:13px; font-weight:600; color:var(--ok); white-space:nowrap; } .pzt-hero-val { font-family:'Bebas Neue','Archivo',sans-serif; font-weight:400; font-size:84px; line-height:.9; letter-spacing:1.5px; color:var(--tx-1); margin-top:8px; font-feature-settings:'tnum' 1; } .pzt-hero-val .cur { font-size:.4em; color:var(--tx-2); margin-left:8px; letter-spacing:0; } .pzt-hero-sub { font-size:13px; color:var(--tx-2); margin-top:12px; } /* Hero salarie : "A accueillir maintenant" (fond marque) */ .pzt-next { margin:0 0 22px; border-radius:18px; background:var(--brand); color:var(--pz-ink); padding:18px; box-shadow:0 8px 18px var(--pz-glow); } /* C-A1 : carte « à accueillir » secondaire (sous le héros Encaissé, patron) · discrète */ .pzt-next.pzt-next-sub { margin-top:-8px; background:var(--surface-sunk); color:var(--tx-1); box-shadow:none; border:1px solid var(--border); } .pzt-next.pzt-next-sub .pzt-next-time { color:var(--pz-accent); } .pzt-next-lbl { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; opacity:.85; } .pzt-next-h { font-family:'Archivo',sans-serif; font-weight:600; font-size:22px; letter-spacing:-.4px; margin-top:8px; } .pzt-next-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; } .pzt-next-meta { font-size:13.5px; font-weight:500; opacity:.92; } .pzt-next-time { font-family:'Bebas Neue','Archivo',sans-serif; font-size:30px; letter-spacing:1px; } .pzt-next-empty { font-size:14px; opacity:.92; margin-top:6px; } /* 3 colonnes KPI (filets, chiffres Bebas) */ .pzt-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 6px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .pzt-kpi { padding:16px 6px 15px; } .pzt-kpi + .pzt-kpi { border-left:1px solid var(--border); padding-left:16px; } .pzt-kpi-val { font-family:'Bebas Neue','Archivo',sans-serif; font-weight:400; font-size:34px; line-height:1; letter-spacing:1px; color:var(--tx-1); font-feature-settings:'tnum' 1; } .pzt-kpi.warn .pzt-kpi-val { color:var(--warn-ink); } .pzt-kpi-lbl { font-size:12px; color:var(--tx-2); margin-top:5px; font-weight:500; } .pzt-kpi-tr { display:none; } /* Recherche globale (clair) */ .pzt-search { position:relative; margin:18px 0 4px; } .pzt-search-ic { position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--tx-3); pointer-events:none; } .pzt-search input { width:100%; padding:13px 16px 13px 44px; background:var(--surface-sunk); border:1px solid var(--border); border-radius:12px; color:var(--tx-1); font-size:16px; -webkit-appearance:none; } .pzt-search input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--pz-softer); background:var(--surface-sunk-2); } .pzt-search input::placeholder { color:var(--tx-3); } /* Resultats de recherche */ .pzt-srch { margin:8px 0 6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } .pzt-srch-grp { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx-3); padding:11px 16px 5px; } .pzt-srch-row { display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; background:transparent; border:0; border-top:1px solid var(--border); color:var(--tx-1); text-align:left; } .pzt-srch-row:first-of-type { border-top:0; } .pzt-srch-row:active { background:var(--surface-press); } .pzt-srch-av { width:38px; height:38px; min-width:38px; border-radius:50%; display:grid; place-items:center; background:var(--surface-sunk); color:var(--tx-1); font-family:'Archivo',sans-serif; font-weight:600; font-size:14px; } .pzt-srch-av.act { background:var(--pz-soft); color:var(--brand); } .pzt-srch-main { flex:1; min-width:0; } .pzt-srch-nm { display:block; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pzt-srch-meta { display:block; font-size:12.5px; color:var(--tx-3); margin-top:1px; } .pzt-srch-off { font-size:10px; font-weight:700; color:var(--tx-3); background:var(--surface-sunk); padding:1px 6px; border-radius:999px; } .pzt-srch-chev { color:var(--tx-3); font-size:20px; font-weight:600; } .pzt-srch-empty { color:var(--tx-3); font-size:14px; padding:18px 16px; text-align:center; } /* Acces rapides */ .pzt-qa { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0 4px; } .pzt-qa-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); color:var(--tx-1); } .pzt-qa-btn:active { transform:scale(.95); } .pzt-qa-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface-sunk); color:var(--brand); } .pzt-qa-tx { font-size:11.5px; font-weight:600; color:var(--tx-2); } /* Sections */ .pzt-sec-head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 9px; } .pzt-sec-head h2 { font-family:'Archivo',sans-serif; font-weight:600; font-size:18px; letter-spacing:-.3px; margin:0; color:var(--tx-1); } .pzt-link { background:transparent; border:0; color:var(--tx-1); text-decoration:underline; text-underline-offset:2px; font-size:13px; font-weight:700; padding:4px; } /* C-UX2 : lien en encre soulignée (l'accent brut sur blanc tombait à 1.3:1) */ .pzt-empty { text-align:center; color:var(--tx-3); font-size:14px; padding:30px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); } .pzt-skel { color:var(--tx-3); font-size:14px; padding:40px 20px; text-align:center; } /* Prochaines sessions (filets, heure Bebas) */ .pzt-sess { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); } .pzt-srow { display:flex; align-items:center; gap:13px; padding:14px 2px; border-bottom:1px solid var(--border); background:transparent; color:inherit; text-align:left; width:100%; } .pzt-srow:active { background:var(--surface-press); } .pzt-srow.soon .pzt-an { color:var(--brand); } .pzt-srow .pzt-h { font-family:'Bebas Neue','Archivo',sans-serif; font-weight:400; font-size:26px; letter-spacing:1px; min-width:56px; color:var(--tx-1); font-feature-settings:'tnum' 1; } .pzt-srow .pzt-bar { width:3px; height:34px; border-radius:3px; flex-shrink:0; } .pzt-srow .pzt-mid { flex:1; min-width:0; } .pzt-srow .pzt-an { display:block; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tx-1); } .pzt-srow .pzt-cm { display:block; font-size:12.5px; color:var(--tx-2); margin-top:2px; } /* Feuille session (secours) */ .pzt-sess-pay { display:flex; align-items:center; gap:12px; margin-top:12px; } .pzt-sess-tot { font-family:'Bebas Neue','Archivo',sans-serif; font-weight:400; font-size:22px; letter-spacing:1px; color:var(--tx-1); } /* Fiche client (feuille) */ .pzt-cli-head { display:flex; align-items:center; gap:14px; margin:6px 0 16px; } .pzt-cli-av { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--surface-sunk); color:var(--tx-1); font-family:'Archivo',sans-serif; font-weight:600; font-size:19px; } .pzt-cli-nm { font-family:'Archivo',sans-serif; font-weight:600; font-size:19px; color:var(--tx-1); } .pzt-cli-sub { font-size:12.5px; color:var(--tx-2); margin-top:2px; } .pzt-kv-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:var(--radius); overflow:hidden; } .pzt-kv { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; background:var(--surface); } .pzt-kv-k { font-size:13px; color:var(--tx-2); } .pzt-kv-v { font-size:14px; font-weight:600; color:var(--tx-1); text-align:right; } /* Notifications (feuille) */ .pzt-notif-list { display:flex; flex-direction:column; gap:9px; margin-top:4px; } .pzt-notif { display:flex; align-items:center; gap:12px; width:100%; padding:13px; border-radius:13px; background:var(--surface); border:1px solid var(--border); color:var(--tx-1); text-align:left; } .pzt-notif:active { background:var(--surface-press); } .pzt-notif-ic { width:36px; height:36px; min-width:36px; border-radius:10px; display:grid; place-items:center; background:var(--surface-sunk); color:var(--brand); } .pzt-notif-main { flex:1; min-width:0; } .pzt-notif-t { display:block; font-weight:600; font-size:14px; color:var(--tx-1); } .pzt-notif-s { display:block; font-size:12.5px; color:var(--tx-2); margin-top:2px; } /* ============================================================ JALON 5 · CLIENTS / FIDELITE (vue iOS) ============================================================ */ .pzcl-search { margin-top:2px; } /* Chips de filtre */ .pzcl-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; margin:0 -2px 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .pzcl-chips::-webkit-scrollbar { display:none; } .pzcl-chip { flex:none; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--tx-2); font-size:13px; font-weight:700; min-height:40px; transition:transform .1s var(--ease-ios), background .18s, border-color .18s, color .18s; } .pzcl-chip:active { transform:scale(.95); } .pzcl-chip.on { background:var(--pz-soft); border-color:var(--pz-solid); color:var(--pz-solid); } .pzcl-chip-n { font-size:11px; font-weight:800; background:var(--control); color:var(--tx-3); border-radius:999px; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; } .pzcl-chip.on .pzcl-chip-n { background:var(--pz-softer); color:var(--pz-solid); } /* Liste */ .pzcl-list { display:flex; flex-direction:column; gap:8px; padding-bottom:8px; } .pzcl-empty { padding:40px 16px; text-align:center; color:var(--tx-3); font-size:14px; } .pzcl-row { display:flex; align-items:center; gap:12px; width:100%; padding:11px 13px; border-radius:14px; background:var(--surface); border:1px solid var(--border); color:var(--tx-1); text-align:left; min-height:62px; transition:transform .1s var(--ease-ios), border-color .2s; } .pzcl-row:active { transform:scale(.985); border-color:var(--border-strong); } .pzcl-av { width:44px; height:44px; min-width:44px; border-radius:13px; display:grid; place-items:center; font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; } .pzcl-main { flex:1; min-width:0; } .pzcl-nm { display:block; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pzcl-meta { display:block; font-size:12.5px; color:var(--tx-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Badges (liste + fiche) */ .pzcl-badge { flex:none; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; } .pzcl-badge.fid { background:rgba(251,191,36,.16); color:#fbbf24; } .pzcl-badge.anniv { background:rgba(168,85,247,.18); color:#c4b5fd; } .pzcl-badge.new { background:rgba(16,185,129,.16); color:#34d399; } .pzcl-badge.test { background:rgba(148,163,184,.16); color:#94a3b8; } .pzcl-badge.cli { background:rgba(96,165,250,.16); color:#60a5fa; } /* Fiche client (feuille editable) */ .pzcl-fhead { display:flex; align-items:flex-start; gap:14px; margin:6px 0 16px; } .pzcl-fav { width:56px; height:56px; min-width:56px; border-radius:16px; display:grid; place-items:center; font-family:'Archivo',sans-serif; font-weight:700; font-size:21px; } .pzcl-fhead-tx { min-width:0; flex:1; } .pzcl-fnm { font-family:'Archivo',sans-serif; font-weight:700; font-size:20px; } .pzcl-fsub { font-size:13px; color:var(--tx-3); margin-top:3px; } .pzcl-ftags { margin-top:8px; } /* 3 tuiles stats */ .pzcl-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; } .pzcl-stat { position:relative; padding:14px 10px; border-radius:14px; background:var(--surface-sunk); border:1px solid var(--border); text-align:center; } .pzcl-stat-pts { border-color:var(--pz-softer); } .pzcl-stat-v { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:22px; color:var(--tx-1); } .pzcl-stat-l { font-size:11px; color:var(--tx-3); margin-top:4px; } .pzcl-plus { margin-top:8px; padding:5px 0; width:100%; border-radius:9px; background:var(--pz-accent); color:var(--pz-ink); border:0; font-family:'Archivo',sans-serif; font-weight:800; font-size:13px; min-height:32px; transition:transform .1s var(--ease-ios); box-shadow:0 4px 14px var(--pz-glow); } /* Note interne */ .pzcl-note-wrap { margin-bottom:18px; } .pzcl-note-lbl { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx-2); margin-bottom:8px; } .pzcl-note { width:100%; padding:13px 14px; border-radius:var(--radius); background:var(--surface-sunk); border:1px solid var(--border-strong); color:var(--tx-1); font-family:'Inter',sans-serif; font-size:15px; line-height:1.5; resize:vertical; min-height:78px; } .pzcl-note:focus { outline:none; border-color:var(--pz-solid); } /* Historique */ .pzcl-hist-wrap { margin-bottom:4px; } .pzcl-hist-lbl { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx-2); margin-bottom:8px; } .pzcl-hist { display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:var(--radius); overflow:hidden; } .pzcl-hrow { display:flex; align-items:center; gap:11px; padding:12px 14px; background:var(--surface-sunk); } .pzcl-hdot { width:9px; height:9px; min-width:9px; border-radius:50%; } .pzcl-hmain { flex:1; min-width:0; } .pzcl-hact { display:block; font-size:13.5px; font-weight:600; } .pzcl-hsub { display:block; font-size:11.5px; color:var(--tx-3); margin-top:1px; } .pzcl-hprice { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; } /* J2.1 · Tickets du jour / annulation (pzc-hist-*) */ .pzc-hist-list { max-height: 70dvh; overflow-y: auto; } .pzc-hist-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--border); } .pzc-hist-main { flex: 1 1 auto; min-width: 0; } .pzc-hist-tk { font-size: 14px; font-weight: 650; color: var(--tx-1); } .pzc-hist-sub { font-size: 12px; color: var(--tx-2); margin-top: 2px; } .pzc-hist-amt { font-size: 15px; font-weight: 700; color: var(--tx-1); white-space: nowrap; } .pzc-hist-amt.neg { color: var(--danger); } .pzc-hist-cancel { flex: 0 0 auto; padding: 8px 12px; border-radius: 10px; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); color: var(--danger); font-size: 13px; font-weight: 600; } .pzc-hist-inv { flex: 0 0 auto; padding: 8px 12px; border-radius: 10px; background: var(--pz-softer); border: 1px solid var(--pz-soft); color: var(--pz-solid); font-size: 13px; font-weight: 600; } .pzc-hist-done { flex: 0 0 auto; font-size: 12px; color: var(--tx-3); font-style: italic; } .pzc-hist-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; } .pzc-hist-badge.cancel { background: rgba(248,113,113,.16); color: var(--danger); } .pzc-hist-badge.train { background: rgba(148,163,184,.16); color: var(--tx-2); } .pzc-hist-empty { text-align: center; padding: 30px; color: var(--tx-2); } /* J2.1 carte cadeau (tender) */ .pzc-gc-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; padding:10px 12px; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); border-radius:12px; } .pzc-gc-lbl { font-size:14px; font-weight:600; color:var(--ok); } .pzc-gc-remove { padding:6px 12px; border-radius:9px; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:var(--danger); font-size:12px; font-weight:600; } .pzc-gc-add { width:100%; margin:8px 0; padding:12px; border-radius:12px; background:rgba(52,211,153,.1); border:1px dashed rgba(52,211,153,.4); color:var(--ok); font-size:14px; font-weight:600; } .pzc-due-row { color:var(--ok); } .pzc-gc-msg { font-size:13px; color:var(--danger); min-height:18px; margin:6px 2px; } /* ============================================================ JALON 6 · PLUS (modules de gestion). Classes pzm-*. ============================================================ */ .pzm-screen { padding: calc(var(--safe-top) + 8px) 16px calc(96px + var(--safe-bottom)); animation: pzScreen .32s var(--ease-ios); } .pzm-push { animation: pzPush .3s var(--ease-ios); } @keyframes pzPush { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } /* en-tete menu */ .pzm-bighead { padding: 8px 4px 16px; } .pzm-h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--tx-1); } .pzm-h1sub { margin-top: 4px; font-size: 14px; color: var(--tx-2); } /* liste de modules (niveau 1) */ .pzm-list { display: flex; flex-direction: column; gap: 10px; } .pzm-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--tx-1); transition: transform .1s, background .15s; } .pzm-row:active { transform: scale(.985); background: var(--surface-press); } .pzm-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .pzm-ico svg { width: 22px; height: 22px; } /* ================================================================== PZ_APP_MODWORLD_8jul (polish 2e passe) : 1 COULEUR PAR UNIVERS. Principe Cinq Mondes = "une couleur par univers". Sur l'ecran Plus, les univers sont les 6 sections de plus.js renderMenu (GROUPS). On teinte donc chaque icone selon SA section, en surchargeant la couleur inline (m.c, posee par plus.js) via l'attribut data-mod deja present sur .pzm-row. Aucun JS touche : pure surcharge de rendu. Hues alignees palette monde de admin/_design/pz-ds.css (bloc v3) : violet(VR) / rose(trampoline) / vert(escape) / bleu(arena) / ambre(bar-karting) + acier neutre pour la section utilitaire systeme. ================================================================== */ /* 1 · Mon activite -> violet (monde VR) */ .pzm-row[data-mod="offre"] .pzm-ico, .pzm-row[data-mod="horaires"] .pzm-ico, .pzm-row[data-mod="fermetures"] .pzm-ico, .pzm-row[data-mod="leadtime"] .pzm-ico, .pzm-row[data-mod="stock"] .pzm-ico { color: #8b6cf6 !important; background: rgba(139,108,246,.15) !important; } /* 2 · Clients & marketing -> rose (monde trampoline) */ .pzm-row[data-mod="marketing"] .pzm-ico, .pzm-row[data-mod="cartespromos"] .pzm-ico { color: #e0568a !important; background: rgba(224,86,138,.15) !important; } /* 3 · Finance -> vert (monde escape · argent = vert) */ .pzm-row[data-mod="compta"] .pzm-ico, .pzm-row[data-mod="facturation"] .pzm-ico { color: #4ec98c !important; background: rgba(78,201,140,.15) !important; } /* 4 · Equipe & briefing -> bleu (monde arena) */ .pzm-row[data-mod="briefing"] .pzm-ico { color: #3f9fe0 !important; background: rgba(63,159,224,.15) !important; } /* 5 · Fidelisation & recurrence -> ambre (mondes bar/karting) */ .pzm-row[data-mod="abonnements"] .pzm-ico, .pzm-row[data-mod="tournois"] .pzm-ico, .pzm-row[data-mod="fidelite"] .pzm-ico { color: #e6a34a !important; background: rgba(230,163,74,.15) !important; } /* 6 · Gestion & systeme -> acier neutre (chrome utilitaire) */ .pzm-row[data-mod="caisse"] .pzm-ico, .pzm-row[data-mod="reglages"] .pzm-ico, .pzm-row[data-mod="notif"] .pzm-ico { color: #8b93b8 !important; background: rgba(139,147,184,.15) !important; } .pzm-row-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pzm-row-lb { font-size: 16px; font-weight: 650; } .pzm-row-sb { font-size: 13px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzm-chev { flex: 0 0 auto; color: var(--tx-3); display: flex; } .pzm-chev svg { width: 18px; height: 18px; } /* en-tete module (niveau 2) */ .pzm-modhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; } .pzm-back { display: flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 600; color: var(--pz-solid); padding: 4px 4px 4px 0; } .pzm-back svg { width: 20px; height: 20px; } .pzm-modtitle { font-size: 17px; font-weight: 700; color: var(--tx-1); } .pzm-modhead-sp { width: 60px; } /* ecran "bientot" */ .pzm-soon { text-align: center; padding: 48px 24px; } .pzm-soon-ic { display: inline-flex; width: 64px; height: 64px; border-radius: 18px; align-items: center; justify-content: center; margin-bottom: 16px; } .pzm-soon-ic svg { width: 30px; height: 30px; } .pzm-soon-t { font-size: 20px; font-weight: 700; color: var(--tx-1); } .pzm-soon-s { margin-top: 6px; font-size: 14px; color: var(--tx-2); } .pzm-soon-badge { display: inline-block; margin-top: 18px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--pz-solid); background: var(--pz-softer); border: 1px solid var(--pz-soft); } /* MON OFFRE */ .pzm-emptyx { text-align: center; padding: 40px 20px; color: var(--tx-2); font-size: 14px; } .pzm-offre-list { display: flex; flex-direction: column; gap: 10px; } .pzm-act { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: opacity .2s; } .pzm-act.off { opacity: .5; } .pzm-act-main { flex: 1 1 auto; min-width: 0; } .pzm-act-nm { font-size: 16px; font-weight: 650; color: var(--tx-1); } .pzm-act-meta { font-size: 13px; color: var(--tx-2); margin-top: 2px; } .pzm-act-mod { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 600; color: var(--pz-solid); margin-top: 6px; } .pzm-act-mod svg { width: 14px; height: 14px; } /* toggle iOS */ .pzm-toggle { flex: 0 0 auto; width: 50px; height: 30px; border-radius: 999px; background: var(--control); position: relative; transition: background .2s; } .pzm-toggle.on { background: var(--brand); } .pzm-toggle-k { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--ease-ios); } .pzm-toggle.on .pzm-toggle-k { transform: translateX(20px); } .pzm-addbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 16px; padding: 14px; border-radius: var(--radius-lg); background: var(--pz-softer); border: 1px dashed var(--pz-soft); color: var(--pz-solid); font-size: 15px; font-weight: 600; transition: transform .1s; } .pzm-addbtn:active { transform: scale(.98); } .pzm-addbtn svg { width: 18px; height: 18px; } /* feuilles offre : steppers + inputs */ .pzm-sheet-h3 { margin: 4px 0 0; font-size: 21px; font-weight: 750; color: var(--tx-1); } .pzm-sheet-sub { font-size: 14px; color: var(--tx-2); margin: 6px 0 18px; } .pzm-stepper { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; } .pzm-step { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; background: var(--control); color: var(--tx-1); font-size: 26px; font-weight: 500; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform .1s, background .15s; } .pzm-step:active { transform: scale(.92); background: var(--surface-press); } .pzm-step-val { flex: 1 1 auto; text-align: center; font-size: 30px; font-weight: 750; color: var(--tx-1); } .pzm-step-cur { font-size: 20px; color: var(--tx-2); } .pzm-flbl { display: block; font-size: 13px; font-weight: 600; color: var(--tx-2); margin-bottom: 6px; } .pzm-finput { width: 100%; padding: 14px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius); color: var(--tx-1); font-size: 16px; } .pzm-finput:focus { outline: none; border-color: var(--pz-soft); } /* REGLAGES & EQUIPE */ .pzm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 14px; } .pzm-card-lbl { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .pzm-card-n { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pz-softer); color: var(--pz-solid); font-size: 12px; align-items: center; justify-content: center; } .pzm-estab-nm { font-size: 19px; font-weight: 750; color: var(--tx-1); } .pzm-estab-meta { font-size: 14px; color: var(--tx-2); margin-top: 4px; } .pzm-team { display: flex; flex-direction: column; gap: 4px; } .pzm-member { display: flex; align-items: center; gap: 12px; padding: 11px 2px; width: 100%; background: transparent; border: 0; border-top: 1px solid var(--border); font: inherit; text-align: left; cursor: pointer; } .pzm-member:first-of-type { border-top: 0; } .pzm-member:active { background: var(--surface-press); } .pzm-mem-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .pzm-mem-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .pzm-mem-nm { font-size: 15px; font-weight: 600; color: var(--tx-1); } .pzm-mem-rl { font-size: 13px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzm-mem-chev { margin-left: auto; color: var(--tx-3); font-size: 20px; font-weight: 600; padding-left: 6px; } /* Fiche membre · 8 droits (PZ_TEAM_PERMS_27jun) */ .pzm-mp-head { display: flex; align-items: center; gap: 13px; margin: 4px 0 16px; } .pzm-mp-av { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 18px; } .pzm-mp-nm { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 19px; color: var(--tx-1); } .pzm-mp-sub { font-size: 12.5px; color: var(--tx-2); margin-top: 2px; } .pzm-mp-intro { font-size: 13.5px; color: var(--tx-2); margin-bottom: 6px; line-height: 1.5; } .pzm-mp-full { font-size: 14px; color: var(--tx-1); background: var(--surface-sunk); padding: 16px; border-radius: 12px; line-height: 1.5; } .pzm-mp-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 8px; } .pzm-mp-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .pzm-mp-rtx { flex: 1; min-width: 0; } .pzm-mp-rlb { font-weight: 600; font-size: 14.5px; color: var(--tx-1); } .pzm-mp-rds { font-size: 12px; color: var(--tx-2); margin-top: 2px; } .pzm-mp-row.money .pzm-mp-rlb { color: var(--brand); } .pzm-mp-moneynote { margin-top: 12px; background: var(--danger-soft); color: var(--danger); font-size: 12.5px; line-height: 1.5; padding: 12px 14px; border-radius: 10px; } .pzm-pref-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; } .pzm-pref-lb { font-size: 15px; color: var(--tx-1); } .pzm-logout { width: 100%; margin-top: 4px; padding: 15px; border-radius: var(--radius-lg); background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.32); color: var(--danger); font-size: 16px; font-weight: 600; transition: transform .1s; } .pzm-logout:active { transform: scale(.98); } /* segment Equipier / Administrateur */ .pzm-seg { display: flex; gap: 4px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 13px; padding: 4px; } .pzm-seg-b { flex: 1 1 0; padding: 11px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--tx-2); transition: background .15s, color .15s; } .pzm-seg-b.on { background: var(--pz-soft); color: var(--pz-solid); } /* COMPTA & STATS */ .pzm-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; } .pzm-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 10px; text-align: center; } .pzm-kpi-v { font-size: 18px; font-weight: 750; color: var(--tx-1); } .pzm-kpi-v.up { color: var(--ok); } .pzm-kpi-v.down { color: var(--danger); } .pzm-kpi-l { font-size: 11px; color: var(--tx-3); margin-top: 4px; line-height: 1.3; } .pzm-chart { display: flex; align-items: flex-end; gap: 5px; height: 160px; padding-top: 10px; } .pzm-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .pzm-bar-wrap { width: 100%; height: 130px; display: flex; align-items: flex-end; justify-content: center; } .pzm-bar { width: 70%; max-width: 22px; border-radius: 5px 5px 2px 2px; background: var(--control); transition: height .4s var(--ease-ios); } .pzm-bar.best { background: var(--pz-soft); } .pzm-bar.cur { background: var(--pz-accent); } .pzm-bar-lb { font-size: 9px; color: var(--tx-3); white-space: nowrap; transform: rotate(-30deg); transform-origin: center; height: 14px; } /* STOCK & CONSO */ .pzm-stockalert { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); color: var(--danger); border-radius: var(--radius); padding: 11px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; } .pzm-stock-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .pzm-stock-row:last-child { border-bottom: 0; } .pzm-stock-main { flex: 1 1 auto; min-width: 0; } .pzm-stock-nm { font-size: 15px; font-weight: 600; color: var(--tx-1); } .pzm-stock-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .pzm-stock-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .pzm-stock-chip.ok { background: rgba(52,211,153,.15); color: var(--ok); } .pzm-stock-chip.bas { background: rgba(248,113,113,.16); color: var(--danger); } .pzm-stock-q { font-size: 13px; color: var(--tx-2); } .pzm-stock-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .pzm-stock-dec { width: 38px; height: 38px; border-radius: 11px; background: var(--control); color: var(--tx-1); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform .1s; } .pzm-stock-dec:active { transform: scale(.9); } .pzm-stock-reappro { padding: 9px 14px; border-radius: 11px; background: var(--pz-softer); border: 1px solid var(--pz-soft); color: var(--pz-solid); font-size: 13px; font-weight: 600; } .pzm-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* MARKETING */ .pzm-mkt-auto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; padding-right: 12px; } .pzm-cpill { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .pzm-cpill.draft { background: var(--control); color: var(--tx-2); } .pzm-cpill.sched { background: rgba(251,191,36,.16); color: var(--warn); } .pzm-cpill.sent { background: rgba(52,211,153,.15); color: var(--ok); } .pzm-seg-wrap { flex-wrap: wrap; } .pzm-seg-wrap .pzm-seg-b { flex: 1 1 40%; } /* DEVIS & FACTURES */ .pzm-fact-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); } .pzm-fact-row:last-child { border-bottom: 0; } .pzm-fact-main { flex: 1 1 auto; min-width: 0; } .pzm-fact-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .pzm-fact-pdf { padding: 7px 11px; border-radius: 9px; background: var(--control); color: var(--tx-1); font-size: 12px; font-weight: 600; text-decoration: none; } .pzm-fact-send { padding: 7px 11px; border-radius: 9px; background: var(--pz-softer); border: 1px solid var(--pz-soft); color: var(--pz-solid); font-size: 12px; font-weight: 600; } /* creation devis/factures */ .pzm-create-bar { display: flex; gap: 10px; margin-bottom: 14px; } .pzm-create-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; border-radius: var(--radius-lg); background: var(--pz-accent); color: var(--pz-ink); font-size: 14px; font-weight: 700; transition: transform .1s; } .pzm-create-btn.alt { background: var(--pz-softer); border: 1px solid var(--pz-soft); color: var(--pz-solid); } .pzm-create-btn:active { transform: scale(.97); } .pzm-create-btn svg { width: 16px; height: 16px; } .pzm-il { padding: 10px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; } .pzm-il-desc { margin-bottom: 8px; } .pzm-il-row { display: flex; gap: 6px; align-items: center; } .pzm-il-n { flex: 1 1 0; min-width: 0; text-align: center; padding: 10px 6px; } .pzm-il-tva { flex: 0 0 72px; padding: 10px 4px; } .pzm-il-del { flex: 0 0 32px; height: 40px; border-radius: 10px; background: rgba(248,113,113,.14); color: var(--danger); font-size: 22px; line-height: 1; } .pzm-il-sp { flex: 0 0 32px; } .pzm-doc-total { font-size: 18px; font-weight: 750; color: var(--pz-solid); } /* ============================================================ PZ_PLAN_RESKIN_27jun · Design system additions + Planning grille ============================================================ */ /* Bouton central "Reserver" (tab bar) · sureleve, marque */ .tab-reserve { flex: 0 0 auto; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; color: var(--pz-solid); transition: transform .1s var(--ease-ios); } .tab-reserve:active { transform: scale(.92); } .tab-reserve-ic { width: 50px; height: 50px; margin-top: -18px; border-radius: 16px; background: var(--pz-accent); color: var(--pz-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px var(--pz-glow); } .tab-reserve-ic svg { width: 26px; height: 26px; } .tab-reserve-lbl { font-size: 10px; font-weight: 700; letter-spacing: .2px; } /* Actions rapides Planning : Reservations / Check-in */ .pzpl-acts { display: flex; gap: 10px; margin: 2px 0 14px; } .pzpl-act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); color: var(--tx-1); font-weight: 600; font-size: 14px; transition: transform .1s var(--ease-ios), border-color .2s, background .2s; } .pzpl-act svg { width: 19px; height: 19px; color: var(--tx-2); } .pzpl-act:active { transform: scale(.98); } .pzpl-act.on { border-color: var(--brand); background: var(--pz-softer); color: var(--pz-solid); } .pzpl-act.on svg { color: var(--pz-solid); } /* Grille d'occupation (zones x heures) */ .pzpl-occ { display: flex; flex-direction: column; } .pzpl-gridscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .pzpl-grid2 { display: grid; min-width: 100%; } .pzpl-gh-corner { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); position: sticky; left: 0; z-index: 3; background: var(--surface); } .pzpl-gh { font-size: 11px; font-weight: 600; color: var(--tx-3); text-align: center; padding: 9px 2px; border-bottom: 1px solid var(--border); } .pzpl-gh.now { color: var(--pz-solid); font-weight: 700; } /* C-A3 : noms de zones lisibles (wrap jusqu'à 3 lignes + ellipsis) et colonne figée au scroll horizontal */ .pzpl-gname { font-size: 12px; font-weight: 600; color: var(--tx-1); padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); line-height: 1.2; min-height: 56px; position: sticky; left: 0; z-index: 2; background: var(--surface); overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; align-content: center; } .pzpl-gc { min-height: 56px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); position: relative; padding: 0; } .pzpl-gc:active { background: var(--surface-press); } .pzpl-gc.res { background: var(--pz-soft); box-shadow: inset 3px 0 0 var(--brand); } .pzpl-gc.now { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); } .pzpl-gc.res.now { background: var(--pz-soft); } .pzpl-grid2 > .pzpl-gc:last-child, .pzpl-grid2 > .pzpl-gh:last-child { border-right: 0; } /* Pied : legende + taux Bebas */ .pzpl-occ-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 4px; } .pzpl-legend { display: flex; gap: 16px; font-size: 12px; color: var(--tx-2); font-weight: 500; } .pzpl-legend span { display: inline-flex; align-items: center; gap: 6px; } .pzpl-legend .lg { width: 13px; height: 13px; border-radius: 4px; display: inline-block; } .pzpl-legend .lg.res { background: var(--pz-soft); box-shadow: inset 2px 0 0 var(--brand); } .pzpl-legend .lg.free { background: var(--surface); border: 1px solid var(--border-strong); } .pzpl-rate { display: flex; align-items: baseline; gap: 6px; } .pzpl-rate .pz-bebas { font-size: 34px; color: var(--tx-1); line-height: 1; } .pzpl-rate small { font-size: 12px; color: var(--tx-3); font-weight: 600; } /* Prochaine reservation */ .pzpl-nextlbl { margin: 22px 0 8px; font-size: 12px; font-weight: 700; color: var(--tx-3); text-transform: uppercase; letter-spacing: .6px; } .pzpl-next { width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); transition: transform .1s var(--ease-ios); } .pzpl-next:active { transform: scale(.985); } .pzpl-next-time { font-size: 26px; color: var(--pz-solid); min-width: 58px; line-height: 1; } .pzpl-next-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pzpl-next-cust { font-weight: 600; font-size: 15px; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzpl-next-meta { font-size: 12px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzpl-next-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } /* Selecteur de zone (creation rapide "Reserver") */ .pzpl-zonepick { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; } .pzpl-zp { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 14px 15px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); color: var(--tx-1); font-weight: 600; font-size: 15px; transition: transform .1s var(--ease-ios), border-color .2s; } .pzpl-zp:active { transform: scale(.985); border-color: var(--brand); } /* Composant : etat vide (filets, icone trait fin) */ .pz-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 54px 24px; } .pz-empty-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-sunk); color: var(--tx-3); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .pz-empty-ic svg { width: 28px; height: 28px; } .pz-empty-t { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; color: var(--tx-1); margin-bottom: 6px; } .pz-empty-s { font-size: 13.5px; color: var(--tx-2); line-height: 1.5; max-width: 320px; } /* Composant : skeleton (chargement) */ .pzpl-skel { display: flex; flex-direction: column; gap: 14px; padding: 10px 0; } .pz-skel-row { display: flex; align-items: center; gap: 12px; } .pz-skel { display: inline-block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--surface-sunk-2) 37%, var(--surface-sunk) 63%); background-size: 400% 100%; animation: pzShimmer 1.3s ease infinite; } @keyframes pzShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* PZ_PLAN_RESKIN_27jun · Caisse : catalogue en LISTE (remplace les tuiles) */ .pzc-list { display: flex; flex-direction: column; margin: 0 0 8px; } .pzc-list-hidden { display: none; } .pzc-prow { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--surface); border: 0; border-bottom: 1px solid var(--border); transition: background .12s; } .pzc-prow:last-child { border-bottom: 0; } .pzc-prow:active { background: var(--surface-press); } .pzc-prow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pzc-prow-name { font-size: 15px; font-weight: 600; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzc-prow-sub { font-size: 12px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzc-prow-price { font-size: 20px; color: var(--tx-1); letter-spacing: .5px; } .pzc-prow-add { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: var(--pz-softer); color: var(--pz-solid); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; line-height: 1; } .pzc-prow.in .pzc-prow-add { background: var(--pz-accent); color: var(--pz-ink); } .pzc-prow.in .pzc-prow-add b { font-size: 14px; font-weight: 800; } .pzc-prow.in .pzc-prow-name { color: var(--pz-solid); } /* le catalogue liste vit dans une carte a filets */ .pzc-prodwrap .pzc-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } /* PZ_PLAN_RESKIN_27jun · Clients : en-tete (recherche + nouveau), actions fiche, champ */ .pzcl-head { display: flex; align-items: center; gap: 10px; } .pzcl-head .pzcl-search { flex: 1; margin: 0; } .pzcl-newbtn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: var(--pz-accent); color: var(--pz-ink); border: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px var(--pz-glow); transition: transform .1s var(--ease-ios); } .pzcl-newbtn:active { transform: scale(.94); } .pzcl-newbtn svg { width: 22px; height: 22px; } .pzcl-acts { display: flex; gap: 8px; margin: 4px 0 16px; } .pzcl-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-strong); color: var(--tx-1); text-decoration: none; font-size: 12px; font-weight: 600; transition: transform .1s var(--ease-ios), border-color .2s; } .pzcl-act:active { transform: scale(.97); } .pzcl-act svg { width: 20px; height: 20px; color: var(--pz-solid); } .pzcl-in { width: 100%; padding: 14px 15px; margin-bottom: 2px; background: var(--surface-sunk); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--tx-1); font-size: 16px; } .pzcl-in:focus { outline: none; border-color: var(--pz-solid); box-shadow: 0 0 0 3px var(--pz-softer); } /* PZ_PLAN_RESKIN_27jun · Plus (hub) : carte etablissement + titres de groupe */ .pzm-estcard { display: flex; align-items: center; gap: 13px; padding: 14px; margin: 4px 0 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); } .pzm-estav { width: 46px; height: 46px; border-radius: 13px; background: var(--pz-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; flex: 0 0 auto; } .pzm-estx { min-width: 0; } .pzm-estnm { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzm-estrole { font-size: 12.5px; color: var(--tx-3); font-weight: 500; margin-top: 1px; } .pzm-grp-t { font-size: 12px; font-weight: 700; color: var(--tx-3); text-transform: uppercase; letter-spacing: .7px; margin: 18px 2px 8px; } .pzm-grp-t:first-of-type { margin-top: 4px; } /* PZ_PREVIEW_27jun · banniere « Voir l'app de X » (apercu patron -> salarie) */ /* PZ_APP_POLISH_3jul : apercu salarie = PILULE FLOTTANTE en bas (au-dessus de la tabbar) au lieu d'une barre pleine largeur en haut. */ .pz-preview-bar { position: fixed; z-index: 200; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 108px); display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 16px; max-width: calc(100% - 32px); background: rgba(21,19,27,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; box-shadow: 0 14px 38px rgba(0,0,0,.5); } .pz-preview-tx { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pz-preview-tx::before { content: ''; width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background: var(--brand); } .pz-preview-x { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .pz-preview-x:active { transform: scale(.96); } body.pz-previewing .screen { padding-bottom: calc(var(--safe-bottom) + 78px + 96px); } .pzm-preview-btn { width: 100%; margin-top: 10px; padding: 13px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--brand); color: var(--pz-solid); font-weight: 700; font-size: 14px; } .pzm-preview-btn:active { transform: scale(.98); } /* PZ_PLAN_RESKIN_27jun · assistant "Reserver" pas-a-pas */ .pzw-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; } .pzw-back { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: var(--surface-sunk); border: 0; color: var(--tx-1); display: flex; align-items: center; justify-content: center; } .pzw-back svg { width: 18px; height: 18px; } .pzw-title { flex: 1; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; color: var(--tx-1); } .pzw-step { font-size: 12px; font-weight: 700; color: var(--pz-solid); background: var(--pz-softer); padding: 4px 10px; border-radius: 999px; } .pzw-recap { margin: 16px 0 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--pz-softer); color: var(--tx-2); font-size: 13px; font-weight: 500; line-height: 1.4; } .pzpl-zp.on { border-color: var(--brand); background: var(--pz-soft); } /* PZ_LIVE_27jun · bloc "En direct" (today) : minuteurs temps reel */ .pzt-livewrap { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; padding-bottom: 2px; } .pzt-livec { flex: 0 0 78%; max-width: 320px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface); padding: 14px; } .pzt-livec.live { border-color: var(--brand); } .pzt-livec-top { display: flex; align-items: center; justify-content: space-between; } .pzt-livec-pill { font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 3px 9px; border-radius: 999px; background: var(--surface-sunk); color: var(--tx-3); } .pzt-livec.live .pzt-livec-pill { background: var(--pz-soft); color: var(--pz-solid); } .pzt-livec-t { font-size: 30px; color: var(--tx-1); line-height: 1; letter-spacing: 1px; } .pzt-livec.live .pzt-livec-t { color: var(--pz-solid); } .pzt-livec-nm { font-weight: 700; font-size: 15px; margin-top: 10px; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzt-livec-meta { font-size: 12.5px; color: var(--tx-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pzt-livec-bar { height: 5px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; margin-top: 12px; } .pzt-livec-bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width 1s linear; } /* PZ_FICHE_REDESIGN_27jun · fiche client : coordonnees lisibles + skeleton */ .pzcl-lastv { font-size: 11px; color: var(--tx-3); font-weight: 600; margin-left: 8px; } .pzcl-info { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .pzcl-inforow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .pzcl-inforow:last-child { border-bottom: 0; } .pzcl-infok { font-size: 12px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .5px; flex: 0 0 auto; } .pzcl-infov { font-size: 15px; font-weight: 600; color: var(--pz-solid); text-decoration: none; text-align: right; word-break: break-all; } .pzcl-infov.none { color: var(--tx-3); font-weight: 500; } .pzcl-hskel { display: flex; flex-direction: column; gap: 8px; } .pzcl-hskel .pz-skel { width: 100%; border-radius: 12px; } /* PZ_BRIEFING_27jun · Briefing du jour : equipe (chips) + checklists */ .pzm-bnote { font-size: 13px; color: var(--tx-2); margin: 4px 0 10px; } .pzm-bchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; } .pzm-bchip { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); } .pzm-bchip-av { width: 30px; height: 30px; border-radius: 50%; background: var(--pz-softer); color: var(--pz-solid); display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; flex: 0 0 auto; } .pzm-bchip-tx { display: flex; flex-direction: column; line-height: 1.2; } .pzm-bchip-tx b { font-size: 13.5px; font-weight: 600; color: var(--tx-1); } .pzm-bchip-tx span { font-size: 11px; color: var(--tx-3); font-weight: 600; } .pzm-clitem { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-top: 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); color: var(--tx-1); font-size: 14.5px; font-weight: 500; transition: transform .1s var(--ease-ios); } .pzm-clitem:active { transform: scale(.99); } .pzm-clbox { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; border: 1.6px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; } .pzm-clitem.done .pzm-clbox { background: var(--pz-accent); border-color: var(--pz-accent); } .pzm-clitem.done .pzm-cltx { color: var(--tx-3); text-decoration: line-through; } /* ===== PERF-1 : pagination serveur clients (PZ_PERF1_CLIENTS_SEARCH_28jun) ===== */ .pzcl-list-skel { display:flex; flex-direction:column; gap:8px; padding:4px 0; } .pzcl-list-skel .pz-skel { width:100%; border-radius:14px; } .pzcl-more { width:100%; margin:10px 0 4px; padding:13px; border-radius:14px; background:var(--surface-sunk); border:1px solid var(--border-strong); color:var(--tx-2); font-size:13px; font-weight:600; min-height:44px; cursor:pointer; transition:background .15s var(--ease-ios); } .pzcl-more:active { background:var(--surface-press); } .pzcl-more:disabled { opacity:.6; cursor:default; } .pzcl-listfoot { text-align:center; color:var(--tx-3); font-size:12px; padding:14px 0 6px; } /* PZ_TABFIX_SMALL_14jul : eviter le debordement de la tab bar (onglet Plus coupe) sur petits iPhone (< 384px) */ @media (max-width: 384px){ .tabbar { padding-left: 4px; padding-right: 4px; } .tab { padding: 6px 2px; gap: 2px; } .tab .tab-label { font-size: 9px; letter-spacing: 0; } .tab svg { width: 22px; height: 22px; } .tab-ico { padding: 3px 9px; } .tab-reserve { padding: 0 3px; } .tab-reserve-ic { width: 46px; height: 46px; margin-top: -16px; } .tab-reserve-ic svg { width: 24px; height: 24px; } .tab-reserve-lbl { font-size: 9px; } }