flex ; on retire le min-height:100% des pages pour que le calcul flex reste exact (header + page = hauteur du

, sans débordement). */ #mb-p-app main > .pg.on{min-height:0} /* Pointage — barre d'action (boutons Entrée/Sortie) + point de présence clignotant */ .evp-actbtn{background:#fff;border:1px solid #E2E8F0;border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:700;color:#64748B;cursor:pointer;font-family:inherit;white-space:nowrap} .evp-actbtn:hover{border-color:#2D5A60;color:#2D5A60} .evp-actbtn.evp-act-on{background:#2D5A60;border-color:#2D5A60;color:#fff} @keyframes evpPulse{0%,100%{opacity:1}50%{opacity:.25}} .evp-livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10B981;animation:evpPulse 1.3s ease-in-out infinite} /* Pointage Self-Service — boutons employé, overlay PIN, pavé numérique */ .evp-staff{display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:18px 14px;cursor:pointer;font-family:inherit;text-align:center;transition:border-color .12s,box-shadow .12s,transform .07s} .evp-staff:hover{border-color:#2D5A60;box-shadow:0 4px 14px rgba(45,90,96,.13)} .evp-staff:active{transform:scale(.98)} .evp-staff[disabled]{cursor:not-allowed;opacity:.65} .evp-staff[disabled]:hover{border-color:#E2E8F0;box-shadow:none} .evp-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:16px;box-sizing:border-box} .evp-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .evp-kpkey{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:15px 0;font-size:22px;font-weight:700;color:#1F2937;cursor:pointer;font-family:inherit;transition:background .1s,transform .06s} .evp-kpkey:hover{background:#EEF2F4;border-color:#2D5A60} .evp-kpkey:active{transform:scale(.95);background:#E2E8F0} .evp-kpkey.evp-kp-blank{visibility:hidden;cursor:default} .evp-dot{width:16px;height:16px;border-radius:50%;border:2px solid #2D5A60;box-sizing:border-box;transition:background .12s} .evp-dot.on{background:#2D5A60} /* =============== bloc-en-ligne =============== */ /* ══════════════════════════════════════════════════════════════════ EspaceVirtuel PRO — Design System v5 ABSOLUTE Target quality: Linear / Vercel / Stripe / Apple Design Awards Vanilla CSS, zero framework. System fonts only. Preserves every existing ID, class and CSS variable. ══════════════════════════════════════════════════════════════════ */ /* ─── 0 · RESET ─── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%;overflow:hidden} /* Pages de connexion — déverrouillage du défilement. Le verrou html,body{overflow:hidden} (nécessaire au shell de l'app) empêche de scroller jusqu'au bouton « Se connecter » sur petit écran ou clavier ouvert. On rétablit le défilement vertical UNIQUEMENT quand une page d'auth (#p-auth ou #p-login) est affichée. */ html:has(#p-auth.on),html:has(#p-login.on), body:has(#p-auth.on),body:has(#p-login.on){ overflow-y:auto !important; height:auto !important; -webkit-overflow-scrolling:touch; } html{scroll-behavior:smooth;font-size:15px;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable","Segoe UI",system-ui,"Helvetica Neue",Roboto,"Inter var",sans-serif; font-feature-settings:"cv09","cv11","ss01","tnum"; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; line-height:1.55;letter-spacing:-.005em; background:var(--c0);color:var(--tx); text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; overscroll-behavior:none; } img,svg{display:block;max-width:100%;height:auto} button,input,textarea,select{font:inherit;color:inherit} :where(a){color:var(--acc);text-decoration:none} :where(a):hover{text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--acc) 50%,transparent);text-underline-offset:2px} /* ─── 1 · DESIGN TOKENS ─── */ :root{ /* Base surfaces — Slate Pro (sober dark) */ --c0:#111827; --c1:#1F2937; --c2:#1F2937; --c3:#374151; --card:#1F2937; --card-2:#374151; --bdr:rgba(255,255,255,.07); --bdr2:rgba(255,255,255,.035); --bdr3:rgba(255,255,255,.14); /* Accents (semantic — JS uses these verbatim) */ --acc:#2D5A60; --acc-2:#3C7178; --acc-ink:#ffffff; --grn:#10B981; --grn-2:#34D399; --grn-ink:#022c1e; --red:#EF4444; --red-2:#F87171; --org:#F59E0B; --org-2:#FBBF24; --blu:#2D5A60; /* Admin state colors */ --gn:#0f8c5a; --rd:#a82850; --or:#a66700; --dr:#6b1525; /* Text */ --tx:#F9FAFB; --tx2:#9CA3AF; --tx3:#6B7280; /* Radii */ --r:16px; --r2:12px; --r3:8px; --r-pill:999px; /* Shadows */ --sh1:0 1px 2px rgba(0,0,0,.5),0 0 0 1px var(--bdr2); --sh2:0 4px 16px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5); --sh3:0 24px 60px -16px rgba(0,0,0,.7),0 8px 24px rgba(0,0,0,.4); --sh-glow-a:0 0 0 1px color-mix(in oklch,var(--acc) 35%,transparent),0 8px 32px -8px color-mix(in oklch,var(--acc) 50%,transparent); --sh-glow-g:0 0 0 1px color-mix(in oklch,var(--grn) 35%,transparent),0 8px 32px -8px color-mix(in oklch,var(--grn) 50%,transparent); --sh-inset-hl:inset 0 1px 0 rgba(255,255,255,.08); --ring:0 0 0 3px color-mix(in oklch,var(--acc) 30%,transparent),0 0 0 1px var(--acc); /* Spacing scale */ --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp7:32px;--sp8:40px;--sp9:56px; /* Type scale */ --fs-xs:11px;--fs-sm:12px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;--fs-3xl:28px;--fs-4xl:36px;--fs-5xl:48px;--fs-hero:64px; /* Density multiplier */ --density:1; /* Motion */ --e-out:cubic-bezier(.22,1,.36,1); --e-bounce:cubic-bezier(.34,1.56,.64,1); --e-std:cubic-bezier(.4,0,.2,1); --t-fast:140ms var(--e-std); --t-med:240ms var(--e-out); --t-slow:400ms var(--e-out); /* Gradients (brand) */ --grad-brand:linear-gradient(135deg,var(--acc) 0%,var(--grn) 100%); --grad-brand-soft:linear-gradient(135deg,color-mix(in oklch,var(--acc) 25%,transparent),color-mix(in oklch,var(--grn) 20%,transparent)); --grad-warm:linear-gradient(135deg,var(--org) 0%,var(--red) 100%); --grad-text:linear-gradient(135deg,var(--tx) 0%,color-mix(in oklch,var(--acc-2) 70%,var(--tx)) 100%); --grad-text-br:linear-gradient(135deg,var(--acc-2) 0%,var(--grn) 100%); } /* ─── 2 · THEME LIGHT (Pro & Clean) ─── */ html[data-theme="light"]{ --c0:#FFFFFF; --c1:#FFFFFF; --c2:#F9FAFB; --c3:#F3F4F6; --card:#FFFFFF; --card-2:#F9FAFB; --bdr:rgba(31,41,55,.10); --bdr2:rgba(31,41,55,.05); --bdr3:rgba(31,41,55,.18); --acc:#2D5A60; --acc-2:#2D5A60; --acc-ink:#FFFFFF; --grn:#059669; --grn-2:#10B981; --grn-ink:#ffffff; --red:#DC2626; --red-2:#EF4444; --org:#D97706; --org-2:#F59E0B; --blu:#2D5A60; --gn:#15803d;--rd:#b91c1c;--or:#92400e;--dr:#7f1d1d; --tx:#1F2937; --tx2:#6B7280; --tx3:#9CA3AF; /* Aplatir les dégradés (look Pro & Clean) */ --grad-brand:#2D5A60; --grad-brand-soft:#EFF6FF; --grad-warm:#F59E0B; --grad-text:#1F2937; --grad-text-br:#2D5A60; /* Supprimer les effets glow en mode clair */ --sh-glow-a:0 0 0 1px rgba(37,99,235,.20),0 4px 12px -4px rgba(37,99,235,.15); --sh-glow-g:0 0 0 1px rgba(5,150,105,.20),0 4px 12px -4px rgba(5,150,105,.15); --sh1:0 1px 2px rgba(20,22,50,.06),0 0 0 1px var(--bdr); --sh2:0 4px 14px rgba(20,22,50,.07),0 1px 3px rgba(20,22,50,.04); --sh3:0 24px 56px -16px rgba(20,22,50,.18),0 6px 20px rgba(20,22,50,.06); --sh-inset-hl:inset 0 1px 0 rgba(255,255,255,.7); } html[data-theme="light"] body{background:var(--c0);color:var(--tx)} /* ─── 3 · APP BACKGROUND — subtle ambient gradients ─── */ body::before{ content:""; position:fixed;inset:0;pointer-events:none;z-index:-2; background: radial-gradient(ellipse 80% 50% at 50% -10%,color-mix(in oklch,var(--acc) 12%,transparent),transparent 55%), radial-gradient(ellipse 60% 40% at 100% 100%,color-mix(in oklch,var(--grn) 6%,transparent),transparent 50%), radial-gradient(ellipse 50% 40% at 0% 80%,color-mix(in oklch,var(--acc) 5%,transparent),transparent 50%); } body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:-1; background: radial-gradient(circle at 1px 1px,var(--bdr2) 1px,transparent 0); background-size:40px 40px; opacity:.4; mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 90%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 90%); } html[data-theme="light"] body::after{opacity:.6} /* ─── 4 · SCROLLBAR + SELECTION ─── */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--bdr3);border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box;transition:background var(--t-fast)} ::-webkit-scrollbar-thumb:hover{background:var(--acc);background-clip:padding-box;border:2px solid transparent} *{scrollbar-width:thin;scrollbar-color:var(--bdr3) transparent} ::selection{background:color-mix(in oklch,var(--acc) 45%,transparent);color:var(--tx)} /* ─── 5 · APP SHELL ─── */ #app,#mb-p-app,#mode-membre,#mode-admin{height:100%;display:flex;flex-direction:column} #mode-admin{display:none;flex-direction:column} #mode-admin.on{display:flex} #mode-membre.off{display:none} .pg{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0} .pg.on{display:flex;animation:pgIn 300ms var(--e-out)} @keyframes pgIn{ from{opacity:0;transform:translateY(8px) scale(.998);filter:blur(2px)} to{opacity:1;transform:none;filter:none} } /* ─── 6 · TOP BAR (.tb) ─── */ .tb{ position:relative;flex-shrink:0;z-index:5; display:flex;align-items:center;justify-content:space-between; padding:0 var(--sp4); height:calc(56px * var(--density)); background:color-mix(in oklch,var(--card) 75%,transparent); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid var(--bdr); } .tb::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,color-mix(in oklch,var(--acc) 3%,transparent),transparent); pointer-events:none; } .tbl{display:flex;align-items:center;gap:var(--sp3);min-width:0} .tb-t{font-size:var(--fs-md);font-weight:700;letter-spacing:-.012em;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tb-s{font-size:var(--fs-xs);color:var(--tx2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tbr{display:flex;align-items:center;gap:var(--sp1)} #clk{ font-size:var(--fs-sm);font-weight:600;color:var(--acc); font-variant-numeric:tabular-nums;letter-spacing:.015em; padding:5px 10px;border-radius:var(--r3); background:color-mix(in oklch,var(--acc) 10%,transparent); border:1px solid color-mix(in oklch,var(--acc) 18%,transparent); min-width:62px;text-align:center; } .ib{ background:transparent;border:0;cursor:pointer; font-size:15px;padding:8px;color:var(--tx2);border-radius:var(--r3); transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast); width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center; } .ib:hover{background:var(--c2);color:var(--tx)} .ib:active{transform:scale(.94)} #sync-dot{ width:8px;height:8px;border-radius:50%;background:var(--grn); box-shadow:0 0 10px color-mix(in oklch,var(--grn) 70%,transparent),0 0 0 0 color-mix(in oklch,var(--grn) 50%,transparent); transition:all var(--t-med);margin-right:4px;flex-shrink:0; animation:syncPulse 2.2s ease-in-out infinite; } @keyframes syncPulse{ 0%,100%{box-shadow:0 0 10px color-mix(in oklch,var(--grn) 70%,transparent),0 0 0 0 color-mix(in oklch,var(--grn) 40%,transparent)} 50%{box-shadow:0 0 12px color-mix(in oklch,var(--grn) 80%,transparent),0 0 0 6px color-mix(in oklch,var(--grn) 0%,transparent)} } #sync-dot.off{background:var(--red);animation:none;box-shadow:0 0 8px color-mix(in oklch,var(--red) 60%,transparent)} .av{ width:36px;height:36px;border-radius:50%; background:var(--grad-brand); display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700;color:#fff;flex-shrink:0; letter-spacing:.02em; box-shadow:0 0 0 2px var(--card),0 0 0 3px color-mix(in oklch,var(--acc) 30%,transparent),0 4px 14px -4px color-mix(in oklch,var(--acc) 50%,transparent); } /* ─── 7 · BOTTOM NAV (mobile) → SIDEBAR (desktop, handled in breakpoints) ─── */ .bn{ flex-shrink:0;z-index:5; display:flex; padding:4px 4px calc(4px + env(safe-area-inset-bottom)); background:color-mix(in oklch,var(--card) 78%,transparent); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border-top:1px solid var(--bdr); } .ni{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:8px 4px 6px;gap:2px;cursor:pointer; color:var(--tx2);font-size:10px;font-weight:600;letter-spacing:.01em; border:0;background:none; position:relative;min-height:54px;border-radius:var(--r2); transition:color var(--t-fast); font-family:inherit; } .ni .ic{font-size:20px;transition:transform var(--t-med) var(--e-bounce)} .ni:hover{color:var(--tx)} .ni.on{color:var(--acc)} .ni.on .ic{transform:scale(1.12) translateY(-1px)} .ni.on::before{ content:"";position:absolute;inset:2px 10px; background:color-mix(in oklch,var(--acc) 12%,transparent); border-radius:var(--r2);z-index:-1; } .ni.on::after{ content:"";position:absolute;top:2px;left:50%; width:22px;height:3px;background:var(--acc); border-radius:0 0 3px 3px;transform:translateX(-50%); box-shadow:0 0 10px color-mix(in oklch,var(--acc) 60%,transparent); } /* Bouton Déconnexion (en-tête, à côté de l'horloge) */ .ib.hdr-logout{ display:inline-flex;align-items:center;gap:6px; color:var(--red) !important;font-weight:600;font-size:13px; padding:0 10px;border-radius:var(--r2); background:color-mix(in oklch,var(--red) 8%,transparent); border:1px solid color-mix(in oklch,var(--red) 25%,transparent); width:auto;height:34px;white-space:nowrap; } .ib.hdr-logout:hover{ background:color-mix(in oklch,var(--red) 16%,transparent); border-color:color-mix(in oklch,var(--red) 40%,transparent); } @media (max-width:520px){ .ib.hdr-logout .hdr-logout-lb{display:none} .ib.hdr-logout{padding:0 8px} } /* Bouton Déconnexion (rouge pro, ne s'active jamais) */ #ni-logout{color:var(--red) !important;font-weight:600} #ni-logout:hover{background:color-mix(in oklch,var(--red) 10%,transparent);border-radius:var(--r2)} #ni-logout.on{color:var(--red) !important} #ni-logout.on::before,#ni-logout.on::after{display:none !important} /* Desktop ≥1024px : épingler le bouton Déconnexion en bas du menu de gauche */ @media (min-width:1024px){ #app > #p-app > .bn #ni-logout{ margin-top:auto; border-top:1px solid var(--bdr); padding-top:var(--sp3); margin-bottom:var(--sp2); } #app > #p-app > .bn #ni-logout:hover{ background:color-mix(in oklch,var(--red) 8%,transparent) !important; color:var(--red) !important; } } .nbdg{ position:absolute;top:4px;right:calc(50% - 22px); min-width:18px;height:18px; background:var(--red);color:#fff; border-radius:var(--r-pill);font-size:10px;font-weight:700; display:none;align-items:center;justify-content:center; padding:0 5px;box-shadow:0 0 0 2px var(--card),0 2px 6px color-mix(in oklch,var(--red) 50%,transparent); line-height:1; } .nbdg.on{display:flex;animation:bdgPop 300ms var(--e-bounce)} @keyframes bdgPop{from{transform:scale(0)}to{transform:scale(1)}} /* ─── 8 · SCROLL AREA ─── */ .scrl{ flex:1;overflow-y:auto; padding:var(--sp4); display:flex;flex-direction:column;gap:var(--sp3); min-height:0; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-padding-top:16px; scroll-behavior:smooth; } /* ─── 9 · CARDS (.cd) ─── */ .cd{ background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:var(--sp4); box-shadow:var(--sh1); transition:border-color var(--t-med),box-shadow var(--t-med),transform var(--t-med),background var(--t-med); position:relative; } .cd:hover{border-color:var(--bdr3)} .cd-h{ font-size:var(--fs-xs);font-weight:700; color:var(--tx2); text-transform:uppercase;letter-spacing:.12em; margin-bottom:var(--sp3); display:flex;align-items:center;gap:var(--sp2); } .cr{ display:flex;justify-content:space-between;align-items:center; padding:var(--sp2) 0; border-bottom:1px solid var(--bdr); font-size:var(--fs-md);gap:var(--sp3); } .cr:last-child{border-bottom:0} /* ─── 10 · KPI ─── */ .k2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2)} .kc{ background:var(--c2); border:1px solid var(--bdr); border-radius:14px; padding:18px 20px; position:relative;overflow:hidden; transition:border-color var(--t-med),transform var(--t-med),box-shadow var(--t-med); box-shadow:0 1px 3px rgba(15,23,42,.05); } .kc::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg,color-mix(in oklch,var(--acc) 4%,transparent),transparent 60%); pointer-events:none; } .kc:hover{border-color:var(--bdr3);transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,23,42,.10)} .kl{ font-size:11px;color:var(--tx2); margin-bottom:8px;font-weight:800; text-transform:uppercase;letter-spacing:.06em; position:relative; } .kv{ font-size:28px;font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.02em;line-height:1.05; color:var(--tx);position:relative; } .kv.g{color:var(--grn);text-shadow:0 0 24px color-mix(in oklch,var(--grn) 25%,transparent)} .kv.b{color:var(--acc);text-shadow:0 0 24px color-mix(in oklch,var(--acc) 25%,transparent)} .kv.r{color:var(--red);text-shadow:0 0 24px color-mix(in oklch,var(--red) 25%,transparent)} .kv.o{color:var(--org);text-shadow:0 0 24px color-mix(in oklch,var(--org) 25%,transparent)} /* ─── 11 · SESSION CARDS (plan liste) ─── */ .sc{ background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:var(--sp3); border-left:3px solid var(--grn); box-shadow:var(--sh1); transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med); position:relative; } .sc:hover{transform:translateY(-1px);box-shadow:var(--sh2)} .sc.w{border-left-color:var(--org);background:color-mix(in oklch,var(--org) 4%,var(--card))} .sc.a{border-left-color:var(--red);background:color-mix(in oklch,var(--red) 5%,var(--card));animation:scAlert 2s ease-in-out infinite} @keyframes scAlert{ 0%,100%{box-shadow:var(--sh1),0 0 0 0 color-mix(in oklch,var(--red) 35%,transparent)} 50%{box-shadow:var(--sh1),0 0 0 10px color-mix(in oklch,var(--red) 0%,transparent)} } .sh2{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp2);margin-bottom:var(--sp2)} .sn{font-size:var(--fs-md);font-weight:700;color:var(--tx);letter-spacing:-.01em} .sp{font-size:var(--fs-lg);font-weight:800;color:var(--grn);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.015em} .tgs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--sp2)} .tg{ background:var(--c2);border:1px solid var(--bdr); border-radius:var(--r3);padding:3px 9px; font-size:var(--fs-xs);color:var(--tx2);font-weight:600; letter-spacing:.01em;line-height:1.4; } .tg.r{background:color-mix(in oklch,var(--red) 12%,var(--c2));border-color:color-mix(in oklch,var(--red) 25%,transparent);color:var(--red)} .tg.o{background:color-mix(in oklch,var(--org) 12%,var(--c2));border-color:color-mix(in oklch,var(--org) 25%,transparent);color:var(--org)} /* ─── 12 · BOUTONS ─── */ .btn{ width:100%;min-height:44px; padding:12px var(--sp4); border-radius:var(--r2);border:0; font-size:var(--fs-md);font-weight:600; font-family:inherit;letter-spacing:-.005em; cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:8px; transition:transform var(--t-fast),box-shadow var(--t-med),filter var(--t-fast),opacity var(--t-fast),background var(--t-med); position:relative;overflow:hidden; isolation:isolate; box-shadow:var(--sh1); white-space:nowrap; } .btn::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 50%); pointer-events:none;opacity:.7; border-radius:inherit; } .btn:active:not(:disabled){transform:translateY(1px) scale(.99)} .btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)} .ba{ background:var(--acc);color:#fff; box-shadow:var(--sh-inset-hl),0 1px 2px rgba(0,0,0,.3),0 6px 18px -4px color-mix(in oklch,var(--acc) 55%,transparent); } .ba:hover:not(:disabled){ filter:brightness(1.1); box-shadow:var(--sh-inset-hl),0 1px 2px rgba(0,0,0,.3),0 10px 28px -4px color-mix(in oklch,var(--acc) 65%,transparent); transform:translateY(-1px); } .bg{ background:var(--grn);color:var(--grn-ink); box-shadow:var(--sh-inset-hl),0 1px 2px rgba(0,0,0,.3),0 6px 18px -4px color-mix(in oklch,var(--grn) 50%,transparent); } .bg:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)} .br{ background:var(--red);color:#fff; box-shadow:var(--sh-inset-hl),0 1px 2px rgba(0,0,0,.3),0 6px 18px -4px color-mix(in oklch,var(--red) 50%,transparent); } .br:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)} .bo{ background:var(--org);color:#1a0f00; box-shadow:var(--sh-inset-hl),0 1px 2px rgba(0,0,0,.2),0 6px 18px -4px color-mix(in oklch,var(--org) 50%,transparent); } .bo:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)} .bd{ background:color-mix(in oklch,var(--red) 30%,var(--card));color:#fff; border:1px solid color-mix(in oklch,var(--red) 55%,transparent); } .bd:hover:not(:disabled){background:color-mix(in oklch,var(--red) 45%,var(--card))} .bgh{ background:var(--c2);color:var(--tx); border:1px solid var(--bdr); box-shadow:var(--sh1); } .bgh:hover:not(:disabled){background:var(--c3);border-color:var(--bdr3);transform:translateY(-1px)} /* ─── 13 · FORMS ─── */ .fg{display:flex;flex-direction:column;gap:6px} .fl{ font-size:var(--fs-xs);font-weight:600; color:var(--tx2); text-transform:uppercase;letter-spacing:.08em; } .fi,.fta{ width:100%; padding:12px 14px; background:var(--c2); border:1px solid var(--bdr); border-radius:var(--r2); color:var(--tx); font-size:16px; font-family:inherit; outline:none; transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast); line-height:1.45;min-height:44px; } .fta{resize:vertical;min-height:88px;line-height:1.55} .fi:hover:not(:focus),.fta:hover:not(:focus){border-color:var(--bdr3)} .fi:focus,.fta:focus{border-color:var(--acc);background:var(--c1);box-shadow:var(--ring)} .fi::placeholder,.fta::placeholder{color:var(--tx3)} select.fi{ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239999b3' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:10px; padding-right:36px;cursor:pointer; } input[type="checkbox"],input[type="radio"]{accent-color:var(--acc);width:18px;height:18px} .pw-strength{height:4px;background:var(--c2);border-radius:2px;overflow:hidden;margin-top:4px} #pw-strength-bar{height:100%;width:0;transition:width var(--t-med),background var(--t-med);border-radius:2px} /* ─── 14 · AUTH MEMBRE (#p-auth) ─── */ #p-auth{ overflow-y:auto; align-items:center;justify-content:center; padding:var(--sp6) var(--sp4) var(--sp8); min-height:100vh; background: radial-gradient(ellipse 80% 60% at 20% 10%,color-mix(in oklch,var(--acc) 22%,transparent),transparent 55%), radial-gradient(ellipse 60% 50% at 90% 100%,color-mix(in oklch,var(--grn) 14%,transparent),transparent 55%), radial-gradient(ellipse 50% 40% at 50% 50%,color-mix(in oklch,var(--acc) 5%,transparent),transparent 70%), var(--c0); position:relative; } #p-auth::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle at 1px 1px,var(--bdr2) 1px,transparent 0); background-size:36px 36px;opacity:.5; mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 20%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 20%,transparent 80%); } .aw{ width:100%;max-width:440px;margin:auto; display:flex;flex-direction:column;gap:var(--sp4); position:relative;z-index:1; } .ahero{text-align:center;padding:var(--sp4) 0 var(--sp2)} .ahero .hi{ font-size:60px;display:block;margin-bottom:var(--sp3);line-height:1; filter:drop-shadow(0 0 32px color-mix(in oklch,var(--acc) 60%,transparent)) drop-shadow(0 0 64px color-mix(in oklch,var(--grn) 30%,transparent)); animation:heroFloat 5s ease-in-out infinite; } @keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}} .ahero h1{ font-size:var(--fs-3xl);font-weight:800; letter-spacing:-.03em;line-height:1.1; background:var(--grad-text); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .ahero p{font-size:var(--fs-md);color:var(--tx2);margin-top:6px;line-height:1.5} .atabs{ display:flex; background:color-mix(in oklch,var(--c2) 80%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid var(--bdr); border-radius:var(--r2);padding:4px;gap:4px; box-shadow:var(--sh1); } .atab{ flex:1;padding:12px 8px;text-align:center; font-size:var(--fs-sm);font-weight:600; color:var(--tx2);cursor:pointer; border-radius:var(--r3); transition:color var(--t-med),background var(--t-med),box-shadow var(--t-med); min-height:40px;display:flex;align-items:center;justify-content:center; } .atab:hover:not(.on){color:var(--tx);background:color-mix(in oklch,var(--c2) 50%,transparent)} .atab.on{ background:var(--acc);color:#fff; box-shadow:var(--sh-inset-hl),0 2px 10px -2px color-mix(in oklch,var(--acc) 60%,transparent); } .acard{ background:color-mix(in oklch,var(--card) 90%,transparent); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border:1px solid var(--bdr); border-radius:var(--r); padding:var(--sp5); display:flex;flex-direction:column;gap:var(--sp3); box-shadow:var(--sh2),inset 0 1px 0 rgba(255,255,255,.04); } .aerr,.aok,.lerr{ padding:10px 14px;border-radius:var(--r2); font-size:var(--fs-sm);font-weight:500; text-align:center;display:none;line-height:1.45; animation:fadeIn 240ms var(--e-out); } @keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .aerr,.lerr{ background:color-mix(in oklch,var(--red) 12%,var(--c2)); color:var(--red-2); border:1px solid color-mix(in oklch,var(--red) 30%,transparent); } .aok{ background:color-mix(in oklch,var(--grn) 12%,var(--c2)); color:var(--grn); border:1px solid color-mix(in oklch,var(--grn) 30%,transparent); } /* ─── 15 · LOGIN ADMIN (#p-login) ─── */ #p-login{ overflow-y:auto;align-items:center;justify-content:center; padding:var(--sp5) var(--sp4) var(--sp6); min-height:100vh; background: radial-gradient(ellipse 70% 50% at 20% 0%,color-mix(in oklch,var(--acc) 22%,transparent),transparent 60%), radial-gradient(ellipse 50% 40% at 80% 100%,color-mix(in oklch,var(--grn) 10%,transparent),transparent 55%), var(--c0); position:relative; } .lw{width:100%;max-width:420px;margin:auto;display:flex;flex-direction:column;gap:var(--sp4);position:relative;z-index:1} .lhero{text-align:center;padding:var(--sp2) 0} .lhero .hi{ font-size:54px;display:block;margin-bottom:var(--sp3); filter:drop-shadow(0 0 26px color-mix(in oklch,var(--acc) 60%,transparent)); animation:heroFloat 5s ease-in-out infinite; } .lhero h2{ font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.025em; background:var(--grad-text); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; margin:0; } .lhero p{font-size:var(--fs-sm);color:var(--tx2);margin-top:4px} .slbl{ font-size:var(--fs-xs);font-weight:700;color:var(--tx2); text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px; } .og{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ob{ padding:14px 10px;border-radius:var(--r2); border:1px solid var(--bdr); background:color-mix(in oklch,var(--card) 85%,transparent); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); cursor:pointer;text-align:center; transition:border-color var(--t-med),background var(--t-med),transform var(--t-fast),box-shadow var(--t-med); color:var(--tx);min-height:84px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; } .ob:hover{border-color:var(--bdr3);background:var(--c2);transform:translateY(-1px)} .ob:active{transform:scale(.98)} .ob.sel{ border-color:var(--acc); background:color-mix(in oklch,var(--acc) 14%,var(--card)); box-shadow:var(--sh-glow-a); } .ob .ic{font-size:24px;display:block;margin-bottom:4px} .ob .nm{font-size:var(--fs-sm);font-weight:700;color:var(--tx)} .ob .rl{font-size:10px;color:var(--tx2);margin-top:2px;text-transform:uppercase;letter-spacing:.05em} /* PIN pad */ .pw{ background:color-mix(in oklch,var(--card) 92%,transparent); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid var(--bdr); border-radius:var(--r); padding:var(--sp5); box-shadow:var(--sh2); } .pdots{display:flex;justify-content:center;gap:14px;height:44px;align-items:center;margin-bottom:var(--sp4)} .dot{ width:14px;height:14px;border-radius:50%; border:2px solid var(--bdr3); transition:all var(--t-fast);background:transparent; } .dot.on{ background:var(--acc);border-color:var(--acc); box-shadow:0 0 14px color-mix(in oklch,var(--acc) 70%,transparent); animation:pinPop 300ms var(--e-bounce); } @keyframes pinPop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}} .pp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .pk{ height:58px; border-radius:var(--r2); border:1px solid var(--bdr); background:var(--c2); color:var(--tx); font-size:22px;font-weight:600;font-family:inherit; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast); } .pk:hover{background:var(--c3);border-color:var(--bdr3)} .pk:active{transform:scale(.93);background:color-mix(in oklch,var(--acc) 20%,var(--c3));box-shadow:0 0 16px color-mix(in oklch,var(--acc) 30%,transparent) inset} .pk.d{color:var(--red)} .pk.ok{color:var(--grn)} /* ─── 16 · TABS ADMIN ─── */ .tabs{ display:flex; background:var(--c1); border-bottom:1px solid var(--bdr); flex-shrink:0; padding:0 var(--sp3);gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .tabs::-webkit-scrollbar{display:none} .tab{ flex:1;min-width:max-content; padding:13px 12px;text-align:center; font-size:var(--fs-xs);font-weight:600; color:var(--tx2);cursor:pointer; border-bottom:2px solid transparent; text-transform:uppercase;letter-spacing:.06em; transition:color var(--t-fast),border-color var(--t-fast); min-height:44px; display:flex;align-items:center;justify-content:center;gap:6px; white-space:nowrap; } .tab:hover{color:var(--tx)} .tab.on{color:var(--acc);border-bottom-color:var(--acc)} .tc{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0} .tc.on{display:flex} /* ─── 17 · PLAN DE SALLE (#pg-pln) — Light Theme, vue claire & lumineuse ─── */ /* Palette claire scopée à la page Plan (n'affecte pas le reste de l'app) */ #pg-pln{ --nfloor:#FFFFFF; --nfloor2:#F8FAFC; --ncard:#FFFFFF; --pcyan:#06B6D4; --pred:#EF4444; --porange:#F59E0B; --pgray:#94A3B8; --ntx:#0F172A; --ntx2:#64748B; } .pw2{flex:1;overflow:auto;padding:0;background:#FFFFFF} #pg-pln{background:#FFFFFF} #pg-pln .ps{ background:#FFFFFF; border-bottom:1px solid #E2E8F0; color:var(--ntx); } #pg-pln .ps > div:first-child{color:#0891B2;text-shadow:none} #pg-pln .ps > div:nth-child(2){color:#DC2626;text-shadow:none} #pg-pln .ps > div:nth-child(3){color:#D97706;text-shadow:none} #pg-pln .pl{ background:#FFFFFF; border-top:1px solid #E2E8F0; color:var(--ntx2); } #pg-pln .lgi{color:var(--ntx2)} /* Grille du plan — disposition INCHANGÉE (tableau PLAN, 8 colonnes × N lignes) */ /* Défilement du Plan — méthode DÉTERMINISTE : on n'attend plus aucune hauteur de la chaîne flex parente (elle ne propage pas de hauteur définie de façon fiable). La page Plan est ancrée directement à la hauteur réelle de l'écran (100dvh) moins la barre du haut (~56px) et la barre de navigation du bas (~64px). .pw2 occupe le reste, a donc une hauteur bornée, et défile à la molette comme n'importe quel conteneur scrollable standard. */ #pg-pln.pg.on{flex:0 0 auto;height:calc(100dvh - 120px);max-height:calc(100dvh - 120px);min-height:0} #pg-pln .ps{flex-shrink:0} #pg-pln .pw2{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:22px;background:#F8FAFC} .pg-grid{ display:grid; grid-template-columns:repeat(8,minmax(72px,1fr)); gap:16px; min-width:620px; max-width:1100px; margin:0 auto; } .pc{ aspect-ratio:1;min-height:64px; border-radius:16px; position:relative;overflow:hidden; cursor:pointer; background:var(--rgb-bg,#FFFFFF); color:var(--rgb-color,#06B6D4); border:3px solid var(--rgb-color,#06B6D4); --rgb-color:#06B6D4; --rgb-bg:#FFFFFF; --rgb-glow:rgba(6,182,212,.45); box-shadow:0 4px 12px -4px rgba(15,23,42,.12), 0 0 16px var(--rgb-glow); transition:transform .14s, box-shadow .25s, border-color .25s, background-color .25s; } .pc:hover:not(.h):not(.s){ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 24px -6px rgba(15,23,42,.18), 0 0 26px var(--rgb-glow); } .pc:active:not(.h):not(.s){transform:scale(.97)} .pc svg.pc-svg{ position:absolute;inset:0; width:100%;height:100%; display:block; pointer-events:none; /* Ombre portée : détache l'icône (chaise/écran) du fond coloré de la carte */ filter:drop-shadow(0 1px 2px rgba(15,23,42,.32)); } .pc .pc-lbl{ position:absolute;left:0;right:0;bottom:5px; font-size:13px;font-weight:800;color:#0F172A;text-align:center; letter-spacing:.2px;line-height:1.15;pointer-events:none; /* Halo blanc : garde le nom/numéro lisible par-dessus les images chaises/écrans */ text-shadow:0 0 3px #fff,0 0 3px #fff,0 1px 2px #fff,0 -1px 2px #fff,1px 0 2px #fff,-1px 0 2px #fff; } .pc .pc-timer{ position:absolute;top:4px;left:0;right:0; font-size:11px;font-weight:900;color:#0F172A; text-align:center;font-variant-numeric:tabular-nums; pointer-events:none; text-shadow:0 0 3px #fff,0 0 3px #fff,0 1px 2px #fff; } /* v260 — Montant DH live (sous le timer) dans chaque cellule occupée. */ .pc .pc-amt{ position:absolute;top:20px;left:0;right:0; font-size:13px;font-weight:900;color:#15803D; text-align:center;font-variant-numeric:tabular-nums; pointer-events:none; text-shadow:0 0 3px #fff,0 0 3px #fff,0 1px 2px #fff; z-index:2; } .pc.s-warn .pc-amt, .pc.s-alerte .pc-amt{ color:#B91C1C; } .pc.s-pause .pc-amt{ color:#92400E; } .pc .pc-reason{ position:absolute;top:4px;left:0;right:0; font-size:8px;font-style:italic;color:var(--rgb-color); text-align:center;pointer-events:none; padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Code couleur par catégorie de poste (lueur + bordure) — état libre. Les états dynamiques ci-dessous (occupé/warn/alerte/attente) restent prioritaires. */ .pc.fam-ps5{--rgb-bg:#CFFAFE;--rgb-color:#06B6D4;--rgb-glow:rgba(6,182,212,.55)} /* PS5 : fond cyan clair */ .pc.fam-ps4{--rgb-bg:#E0E7FF;--rgb-color:#4F46E5;--rgb-glow:rgba(79,70,229,.55)} /* PS4 : fond indigo clair */ .pc.fam-vip{--rgb-bg:#FEF3C7;--rgb-color:#F59E0B;--rgb-glow:rgba(245,158,11,.55)} /* VIP : fond doré clair */ .pc.fam-ping-pong{--rgb-bg:#D1FAE5;--rgb-color:#10B981;--rgb-glow:rgba(16,185,129,.55)}/* Ping-pong : fond vert menthe */ .pc.fam-volant{--rgb-bg:#FEE2E2;--rgb-color:#EF4444;--rgb-glow:rgba(239,68,68,.55)} /* Volant : fond rouge clair */ /* Poste DISPONIBLE → toujours VERT émeraude, quelle que soit la console. Placé après les couleurs de famille pour les neutraliser sur les postes libres. */ .pc.s-libre{--rgb-bg:#ECFDF5;--rgb-color:#10B981;--rgb-glow:rgba(16,185,129,.45)} /* États dynamiques (prioritaires sur la famille) — occupé : TOUJOURS rouge, jusqu'à la validation de la Sortie. s-warn (≥1h) repassé en rouge pour ne jamais quitter le code couleur « occupé ». s-alerte (≥2h) reste rouge soutenu. FIX 2026-05-21 : les états d'occupation REDÉFINISSENT --rgb-bg, sinon le fond retombait à la couleur de famille (VIP=#FEF3C7 jaune, PS5=cyan…) après un cycle Pause→Reprise, donnant l'illusion que le poste « reste jaune ». */ .pc.s-occupe{--rgb-bg:#FEE2E2;--rgb-color:#EF4444;--rgb-glow:rgba(239,68,68,.45);animation:pcPulse 2.6s ease-in-out infinite} .pc.s-warn{--rgb-bg:#FEE2E2;--rgb-color:#EF4444;--rgb-glow:rgba(239,68,68,.45);animation:pcPulse 2.6s ease-in-out infinite} .pc.s-alerte{--rgb-bg:#FECACA;--rgb-color:#DC2626;--rgb-glow:rgba(220,38,38,.55);animation:pcPulseAlert 1.4s ease-in-out infinite} .pc.s-attente{--rgb-bg:#FEF3C7;--rgb-color:#F59E0B;--rgb-glow:rgba(245,158,11,.48)} /* État PAUSE — poste figé temporairement (5 min max). Orange clignotant pour ressortir d'un coup d'œil sur le Plan. */ .pc.s-pause{--rgb-bg:#FEF3C7;--rgb-color:#F59E0B;--rgb-glow:rgba(245,158,11,.55);animation:pcPulsePause 1.1s ease-in-out infinite} /* Badge FUSION (2026-07-28) — signale, sur la cellule Plan du poste CIBLE, le montant des additions fusionnées venues d'autres postes. Posé en haut à GAUCHE pour ne jamais chevaucher .pc-pause-badge (haut à droite). */ .pc-fusion-badge{ position:absolute;top:4px;left:4px; background:#F97316;color:#fff; font-size:9px;font-weight:800;letter-spacing:.3px; padding:2px 6px;border-radius:8px; z-index:3;pointer-events:none; max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; box-shadow:0 2px 4px rgba(249,115,22,.45); } .pc-pause-badge{ position:absolute;top:4px;right:4px; background:#F59E0B;color:#fff; font-size:9px;font-weight:800;letter-spacing:.4px; padding:2px 6px;border-radius:8px; animation:pcPulsePause 1.1s ease-in-out infinite; z-index:3;pointer-events:none; box-shadow:0 2px 4px rgba(245,158,11,.4); } @keyframes pcPulse{ 0%,100%{box-shadow:0 4px 12px -4px rgba(15,23,42,.10),0 0 16px var(--rgb-glow)} 50% {box-shadow:0 4px 12px -4px rgba(15,23,42,.10),0 0 30px var(--rgb-glow)} } @keyframes pcPulseAlert{ 0%,100%{box-shadow:0 4px 12px -4px rgba(15,23,42,.12),0 0 18px var(--rgb-glow)} 50% {box-shadow:0 4px 12px -4px rgba(15,23,42,.12),0 0 38px var(--rgb-glow)} } @keyframes pcPulsePause{ 0%,100%{box-shadow:0 4px 12px -4px rgba(15,23,42,.10),0 0 16px var(--rgb-glow);opacity:1} 50% {box-shadow:0 4px 12px -4px rgba(15,23,42,.10),0 0 32px var(--rgb-glow);opacity:.78} } /* Carte session en pause (rendu liste — cf. SC.cls=='p') */ .sc.p{border-color:#F59E0B;background:linear-gradient(180deg,#FFFBEB,#FFFFFF)} /* Cellules statiques (WC, Frigo, Caisse, Table, Trotinette) — gris neutre */ .pc.s{ background:#F8FAFC; border:1.5px solid #E2E8F0; color:#94A3B8; box-shadow:0 2px 6px -2px rgba(15,23,42,.06); cursor:default; --rgb-color:#94A3B8; --rgb-glow:rgba(148,163,184,.20); } .pc.s:hover{transform:none} .pc.s .pc-lbl{color:#64748B} /* Cellule titre */ .pc.h{ aspect-ratio:auto;min-height:40px; background:#FFFFFF; border:1px solid #E2E8F0; border-radius:16px; display:flex;align-items:center;justify-content:center; color:#0F172A;font-size:13px;font-weight:800; letter-spacing:5px; cursor:default;box-shadow:0 2px 6px -2px rgba(15,23,42,.05); } .pc.h:hover{transform:none} /* ── Plan de salle : cellules de poste en flux normal, taille fixe garantie ── Carré 100×100 stable. Aucun position:absolute ni marge négative sur les postes : ils ne peuvent ni se chevaucher ni s'empiler, et restent visibles à 100% sans survol. */ #pg-g .pc{position:relative;float:none;margin:0;aspect-ratio:auto;width:100px;height:100px;flex:0 0 100px;box-sizing:border-box} .pl{ display:flex;flex-wrap:wrap;gap:10px var(--sp3); padding:10px var(--sp3); border-top:1px solid var(--bdr); flex-shrink:0;background:var(--card); } .lgi{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--tx2);font-weight:500} .lgd{width:10px;height:10px;border-radius:3px;flex-shrink:0} .ps{ display:flex;gap:var(--sp4); padding:12px var(--sp4); background:var(--c1); border-bottom:1px solid var(--bdr); flex-shrink:0; font-size:var(--fs-sm);font-weight:600; align-items:center;font-variant-numeric:tabular-nums; } .ps > div:first-child{color:var(--grn)} .ps > div:nth-child(2){color:var(--red)} .ps > div:nth-child(3){color:var(--org)} /* ─── 18 · GRILLE POSTES (modals) ─── */ .pg2{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .pbt{ padding:11px 4px; border-radius:var(--r3);border:1px solid var(--bdr); background:var(--c2);color:var(--tx); font-size:var(--fs-sm);font-weight:600;font-family:inherit; cursor:pointer; transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast); text-align:center;min-height:40px; } .pbt:hover{border-color:var(--bdr3);background:var(--c3)} .pbt.sel{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:var(--sh-inset-hl),0 2px 8px -2px color-mix(in oklch,var(--acc) 50%,transparent)} .pbt.occ{ background:color-mix(in oklch,var(--red) 15%,var(--c2)); border-color:color-mix(in oklch,var(--red) 40%,transparent); color:var(--red-2);cursor:not-allowed;opacity:.7; } /* FUSION DE SESSIONS (2026-07-28) — un poste OCCUPÉ reste cliquable dans la modale Transfert : le clic ne « déplace » pas la session mais FUSIONNE son addition sur la session déjà en cours du poste cible. Code couleur orange pour le distinguer sans ambiguïté du vert « poste libre ». */ .pbt.fus{ background:color-mix(in oklch,var(--org) 16%,var(--c2)); border-color:color-mix(in oklch,var(--org) 55%,transparent); color:var(--org);cursor:pointer;opacity:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.15; } .pbt.fus:hover{background:color-mix(in oklch,var(--org) 28%,var(--c2));border-color:var(--org)} .pbt.fus.sel{background:var(--org);border-color:var(--org);color:#fff;box-shadow:0 2px 10px -2px color-mix(in oklch,var(--org) 60%,transparent)} .pbt.fus .fus-sub{font-size:9.5px;font-weight:800;opacity:.92;letter-spacing:.02em} .tp-grp-hd{ display:flex;align-items:center;gap:6px; font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; margin:10px 0 5px;color:var(--tx2); } .tp-grp-hd .tp-grp-cnt{font-weight:700;opacity:.75;text-transform:none;letter-spacing:0} /* ─── 19 · MODALS ─── */ .ov{ position:fixed;inset:0; background:color-mix(in oklch,#000 70%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); z-index:500;display:none; align-items:flex-end;justify-content:center;padding:0; animation:ovIn 240ms var(--e-out); } .ov.on{display:flex} @keyframes ovIn{from{opacity:0}to{opacity:1}} .md{ background:color-mix(in oklch,var(--card) 95%,transparent); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border:1px solid var(--bdr);border-bottom:0; border-radius:22px 22px 0 0; padding:var(--sp5); width:100%;max-width:560px; display:flex;flex-direction:column;gap:var(--sp3); max-height:92vh;overflow-y:auto; box-shadow:0 -24px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05); animation:mdSlide 320ms var(--e-bounce); position:relative; } @keyframes mdSlide{from{transform:translateY(100%)}to{transform:translateY(0)}} .md > div[style*="width:32px"]{ background:var(--bdr3) !important; width:40px !important;height:4px !important; margin:0 auto var(--sp2) !important; border-radius:var(--r-pill) !important; } .mdt{font-size:var(--fs-xl);font-weight:700;text-align:center;letter-spacing:-.02em;color:var(--tx);line-height:1.3} .mdi{font-size:var(--fs-sm);color:var(--tx2);text-align:center;line-height:1.55} .mdb{display:flex;gap:8px;margin-top:4px} /* Modal paiement plein écran */ #m-pay{ position:fixed;inset:0;background:var(--c0);z-index:9000; display:none;flex-direction:column;overflow-y:auto; } #m-pay.on{display:flex;animation:pgIn 300ms var(--e-out)} @keyframes evInvPulse{0%,100%{box-shadow:0 2px 8px rgba(245,158,11,.22)}50%{box-shadow:0 2px 18px rgba(245,158,11,.55)}} .pay-top{ background: radial-gradient(ellipse 70% 60% at 50% 100%,color-mix(in oklch,var(--grn) 28%,transparent),transparent 60%), linear-gradient(180deg,color-mix(in oklch,var(--grn) 12%,var(--c1)),var(--c1)); padding:var(--sp6) var(--sp4);flex-shrink:0; border-bottom:1px solid color-mix(in oklch,var(--grn) 40%,transparent); text-align:center; } /* Amount boxes */ .amt-box{ background:var(--c2);border:1px solid var(--bdr); border-radius:var(--r);padding:var(--sp4); display:flex;flex-direction:column;gap:10px; } .amt-row{display:flex;justify-content:space-between;align-items:center;gap:8px} .amt-lbl{font-size:var(--fs-sm);color:var(--tx2);font-weight:500} .amt-v{font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .amt-v.sub{font-size:var(--fs-sm);color:var(--tx2);font-weight:500} .amt-v.rem{font-size:var(--fs-md);color:var(--org);font-weight:600} .err-line{ font-size:var(--fs-xs);color:var(--red); background:color-mix(in oklch,var(--red) 12%,transparent); border-radius:var(--r3);padding:7px 11px;display:none; border:1px solid color-mix(in oklch,var(--red) 25%,transparent); animation:fadeIn 200ms var(--e-out); } /* Boxes info/success/warn */ .bx-ok,.bx-w,.bx-i{border-radius:var(--r2);padding:12px var(--sp3);font-size:var(--fs-sm);line-height:1.5} .bx-ok{ background:color-mix(in oklch,var(--grn) 10%,var(--card)); border:1px solid color-mix(in oklch,var(--grn) 30%,transparent); color:var(--grn); } .bx-w{ background:color-mix(in oklch,var(--org) 10%,var(--card)); border:1px solid color-mix(in oklch,var(--org) 30%,transparent); color:var(--org); } .bx-i{ background:var(--c2);border:1px solid var(--bdr);color:var(--tx2); } .bx-hero{ background: radial-gradient(ellipse 80% 60% at 50% 0%,color-mix(in oklch,var(--acc) 22%,transparent),transparent 60%), linear-gradient(135deg,var(--c2),var(--card)); border:1px solid color-mix(in oklch,var(--acc) 30%,transparent); border-radius:var(--r);padding:var(--sp5);text-align:center; box-shadow:var(--sh2),inset 0 1px 0 rgba(255,255,255,.04); } .bh-am{ font-size:var(--fs-4xl);font-weight:800;color:var(--grn); margin:6px 0;font-variant-numeric:tabular-nums;letter-spacing:-.025em;line-height:1; text-shadow:0 0 32px color-mix(in oklch,var(--grn) 30%,transparent); } .bh-lb{font-size:var(--fs-sm);color:var(--tx2);font-weight:500} .bh-sb{font-size:var(--fs-md);color:var(--tx);margin-top:4px} /* Histogram */ /* 2026-05-26 — Refonte sombre des progress bars (Rapport / Bilan / Heures pointe). Avant : `.hl color:var(--tx2)` invisible sur fond clair forcé, `.hb bg:var(--c2)` piste pâle peu visible. Maintenant : label slate-200, piste slate-800 distincte. */ .hbar{display:flex;flex-direction:column;gap:8px} .hr2{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm)} .hl{width:80px;color:#E2E8F0;font-weight:700;text-transform:capitalize;font-size:13px} .hb{flex:1;background:#1E293B;border:1px solid #334155;border-radius:999px;height:10px;overflow:hidden} .hf{ height:100%; background:linear-gradient(90deg,var(--acc) 0%,var(--acc-2) 50%,var(--grn) 100%); border-radius:var(--r-pill); transition:width .7s var(--e-out); box-shadow:0 0 10px color-mix(in oklch,var(--acc) 40%,transparent); } .hv{min-width:60px;text-align:right;font-weight:900;font-size:14px;font-variant-numeric:tabular-nums;color:#34D399} /* 2026-05-26 — Refonte sombre .tg2/.tc2/.tp/.tpr/.td (grilles produits) */ .tg2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .tc2{background:#020617;border:1px solid #1E293B;border-radius:10px;padding:11px;text-align:center} .tp{font-size:11px;font-weight:800;color:#94A3B8;text-transform:uppercase;letter-spacing:.06em} .tpr{font-size:15px;font-weight:900;color:#34D399;margin-top:4px;font-variant-numeric:tabular-nums} .td{font-size:11px;color:#CBD5E1;font-weight:600;margin-top:3px} /* 2026-05-26 — Refonte sombre .opb (cartes opérateurs / staff stats) */ .opb{ background:#020617;border:1px solid #1E293B;border-left:4px solid #22D3EE; border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between; align-items:center;gap:10px;color:#FFFFFF; } .opca{font-size:18px;font-weight:900;color:#34D399;font-variant-numeric:tabular-nums;letter-spacing:-.015em} .trg{display:grid;grid-template-columns:1fr 1fr;gap:8px} .trb{ padding:14px;border-radius:var(--r2); border:1px solid var(--bdr);background:var(--card); cursor:pointer;text-align:center; transition:border-color var(--t-med),background var(--t-med),transform var(--t-fast); min-height:60px; } .trb:hover{border-color:var(--bdr3);transform:translateY(-1px)} .trb.sel{border-color:var(--blu);background:color-mix(in oklch,var(--blu) 12%,var(--card));box-shadow:0 0 0 1px color-mix(in oklch,var(--blu) 40%,transparent)} /* Tables */ .tbl2{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .tbl2 th{ background:var(--c2);padding:9px;text-align:left; color:var(--tx2);font-size:var(--fs-xs); text-transform:uppercase;letter-spacing:.06em;font-weight:600; border-bottom:1px solid var(--bdr);position:sticky;top:0; } .tbl2 td{padding:10px 9px;border-bottom:1px solid var(--bdr)} .tbl2 tr:last-child td{border-bottom:0} .tbl2 tr:hover td{background:color-mix(in oklch,var(--acc) 5%,transparent)} .tbl2 .n{text-align:right;font-weight:600;color:var(--grn);font-variant-numeric:tabular-nums} .hi-item{padding:11px 0;border-bottom:1px solid var(--bdr);font-size:var(--fs-md)} .hi-item:last-child{border-bottom:0} /* ─── 20 · STARS ─── */ .stars{display:flex;gap:10px;justify-content:center;padding:6px 0} .star{ font-size:38px;cursor:pointer; transition:transform 280ms var(--e-bounce),filter var(--t-fast),opacity var(--t-fast); filter:grayscale(1);opacity:.35;color:#ffc840;user-select:none;line-height:1; } .star:hover:not(.on){opacity:.6;transform:scale(1.08)} .star.on{ filter:drop-shadow(0 3px 12px rgba(255,200,64,.55)) drop-shadow(0 0 20px rgba(255,200,64,.25)); opacity:1;transform:scale(1.1); } /* ─── 21 · CHAT ─── */ .chat-area{ flex:1;overflow-y:auto; padding:var(--sp3); display:flex;flex-direction:column;gap:6px; -webkit-overflow-scrolling:touch; } .msg-out,.msg-in{ max-width:78%;padding:10px 14px;font-size:var(--fs-sm); line-height:1.5; animation:msgIn 280ms var(--e-bounce); word-wrap:break-word;position:relative; } @keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}} .msg-out{ align-self:flex-end;background:var(--acc);color:#fff; border-radius:18px 18px 4px 18px; box-shadow:0 2px 8px rgba(0,0,0,.2),var(--sh-inset-hl); } .msg-in{ align-self:flex-start;background:var(--c2);border:1px solid var(--bdr); color:var(--tx);border-radius:18px 18px 18px 4px; } .msg-time{font-size:10px;opacity:.7;margin-top:4px;letter-spacing:.02em} .msg-audio{ display:flex;align-items:center;gap:10px; padding:10px 14px;background:var(--c2);border:1px solid var(--bdr); border-radius:18px 18px 18px 4px;cursor:pointer; transition:background var(--t-fast); } .msg-audio:hover{background:var(--c3)} .msg-audio-out{background:var(--acc);border-color:var(--acc);color:#fff} .rec-btn{ width:46px;height:46px;border-radius:50%; border:0;cursor:pointer; display:flex;align-items:center;justify-content:center; font-size:18px;transition:all var(--t-fast);flex-shrink:0; } .rec-btn.idle{background:var(--c2);border:1px solid var(--bdr);color:var(--tx)} .rec-btn.idle:hover{background:var(--c3)} .rec-btn.recording{background:var(--red);color:#fff;animation:recPulse 1s infinite} @keyframes recPulse{ 0%,100%{box-shadow:0 0 0 0 color-mix(in oklch,var(--red) 50%,transparent)} 50%{box-shadow:0 0 0 14px color-mix(in oklch,var(--red) 0%,transparent)} } /* ─── 22 · QR ─── */ .qr-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp3);text-align:center;padding:var(--sp4) 0} .qr-code-big{ font-size:24px;font-weight:700; font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace; color:var(--acc);letter-spacing:4px; background: linear-gradient(135deg,color-mix(in oklch,var(--acc) 12%,transparent),color-mix(in oklch,var(--grn) 8%,transparent)), var(--c2); border:1px dashed color-mix(in oklch,var(--acc) 40%,transparent); padding:16px 24px;border-radius:var(--r2); display:inline-block;margin:4px auto; box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 2px 10px color-mix(in oklch,var(--acc) 15%,transparent); cursor:pointer;transition:transform var(--t-fast),background var(--t-fast); } .qr-code-big:hover{transform:scale(1.02)} /* ─── 23 · EMPTY / LOADING ─── */ .emp{ display:flex;flex-direction:column;align-items:center;gap:10px; padding:var(--sp8) var(--sp4); color:var(--tx2);font-size:var(--fs-sm);text-align:center;line-height:1.55; } .emp .ei,.emp > span:first-child{font-size:40px;opacity:.55;margin-bottom:6px;display:block} .lds{display:flex;align-items:center;justify-content:center;gap:10px;padding:var(--sp6);color:var(--tx2);font-size:var(--fs-sm)} .spn{ width:18px;height:18px; border:2px solid var(--bdr);border-top-color:var(--acc); border-radius:50%;animation:rot .7s linear infinite; } @keyframes rot{to{transform:rotate(360deg)}} /* Skeleton */ .sk{ background:linear-gradient(90deg,var(--c2) 25%,var(--c3) 50%,var(--c2) 75%); background-size:200% 100%; animation:skl 1.4s ease-in-out infinite; border-radius:var(--r3); } @keyframes skl{0%{background-position:200% 0}100%{background-position:-200% 0}} .sk-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px} .sk-box{height:72px;border-radius:var(--r2)} .sk-line{height:14px;border-radius:4px;margin-bottom:8px} .sk-line.sm{height:11px;width:60%} .sk-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:var(--sp4);margin-bottom:8px} /* ─── 24 · TOAST ─── */ #toast,#mb-toast{ position:fixed;bottom:calc(78px + env(safe-area-inset-bottom));left:50%; transform:translateX(-50%) translateY(14px); background:color-mix(in oklch,var(--card) 90%,transparent); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); color:var(--tx); padding:11px 20px;border-radius:var(--r-pill); font-size:var(--fs-sm);font-weight:500; z-index:9999;opacity:0; transition:opacity var(--t-med),transform var(--t-med); pointer-events:none;white-space:nowrap;max-width:92vw; border:1px solid var(--bdr);box-shadow:var(--sh3); } #toast.on,#mb-toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* ─── 25 · OFFLINE BADGE ─── */ #offline-badge{ position:fixed;top:56px;left:0;right:0; background:linear-gradient(90deg,var(--red),color-mix(in oklch,var(--red) 65%,#000)); color:#fff;text-align:center; font-size:var(--fs-xs);font-weight:600; padding:8px;z-index:999;display:none; letter-spacing:.02em; animation:slideDown var(--t-med) ease; box-shadow:0 2px 14px color-mix(in oklch,var(--red) 40%,transparent); } @keyframes slideDown{from{transform:translateY(-100%)}to{transform:none}} /* ─── 26 · FLOATING CHROME ─── */ #admin-btn{ position:fixed;top:10px;right:10px;z-index:9999; /* Contraste WCAG AA : couleur claircie + opacite fond renforcee */ background:color-mix(in oklch,var(--acc) 30%,transparent); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid color-mix(in oklch,var(--acc) 50%,transparent); color:#b9b3ff; font-size:11px;font-weight:700; padding:7px 12px;border-radius:var(--r-pill); cursor:pointer;letter-spacing:.05em;text-transform:uppercase; transition:all var(--t-med);font-family:inherit; } #admin-btn:hover,#admin-btn:focus-visible{ background:color-mix(in oklch,var(--acc) 45%,transparent); color:#ffffff; transform:translateY(-1px); } #theme-toggle{ position:fixed;top:10px;left:10px;z-index:9998; width:38px;height:38px;border-radius:50%; background:color-mix(in oklch,var(--acc) 14%,transparent); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid color-mix(in oklch,var(--acc) 28%,transparent); color:var(--acc); font-size:17px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all var(--t-med); } #theme-toggle:hover{transform:scale(1.06) rotate(15deg);background:color-mix(in oklch,var(--acc) 22%,transparent)} #ev-wa-fab{ position:fixed;right:16px;bottom:calc(82px + env(safe-area-inset-bottom)); z-index:9994;width:54px;height:54px;border-radius:50%; background:#25d366;color:#fff;border:0;cursor:pointer; box-shadow:0 8px 24px rgba(37,211,102,.5),inset 0 1px 0 rgba(255,255,255,.3); display:flex;align-items:center;justify-content:center; font-size:26px;transition:transform var(--t-fast),box-shadow var(--t-med); } #ev-wa-fab:hover{transform:scale(1.06);box-shadow:0 12px 30px rgba(37,211,102,.7),inset 0 1px 0 rgba(255,255,255,.3)} #ev-wa-fab:active{transform:scale(.94)} #ev-smart-banner{ position:fixed;top:0;left:0;right:0;z-index:9996; background:linear-gradient(135deg,var(--grn),var(--acc)); color:#fff;padding:10px var(--sp3); display:none;align-items:center;gap:10px; box-shadow:0 4px 20px rgba(0,0,0,.3); animation:slideDown var(--t-med) ease-out; font-size:var(--fs-sm); } #ev-smart-banner.show{display:flex} #ev-smart-banner img{width:36px;height:36px;border-radius:9px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.3)} .sb-txt{flex:1;line-height:1.35;min-width:0} .sb-title{font-weight:700;font-size:var(--fs-md)} .sb-sub{opacity:.92;font-size:var(--fs-xs)} .sb-btn{ background:#fff;color:var(--acc); border:0;border-radius:var(--r-pill); padding:8px 14px;font-size:var(--fs-xs);font-weight:700; cursor:pointer;text-decoration:none;white-space:nowrap; transition:transform var(--t-fast); } .sb-btn:hover{transform:scale(1.04)} .sb-close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;opacity:.85;padding:0 4px;line-height:1} /* ─── 27 · PTR ─── */ .ptr-bar{ position:absolute;top:0;left:0;right:0;height:3px; background:var(--grad-brand); transform:scaleX(0);transform-origin:left; transition:transform .3s;z-index:10;border-radius:0 3px 3px 0; box-shadow:0 0 10px color-mix(in oklch,var(--acc) 50%,transparent); } .ptr-ic{ position:absolute;top:8px;left:50%;transform:translateX(-50%) rotate(0deg); font-size:18px;opacity:0; transition:opacity var(--t-fast),transform .3s; pointer-events:none;z-index:10;color:var(--acc); } .ptr-ic.show{opacity:1} .ptr-ic.ready{animation:ptrSpin .6s linear infinite} @keyframes ptrSpin{to{transform:translateX(-50%) rotate(360deg)}} /* ─── 28 · MEMBRE HOME — HERO POINTS (.mb-hero) ─── */ .mb-hero{ position:relative;overflow:hidden; padding:var(--sp7) var(--sp5) !important; border-radius:var(--r) !important; background: radial-gradient(ellipse 80% 60% at 50% 0%,color-mix(in oklch,var(--acc) 32%,transparent),transparent 62%), linear-gradient(135deg,color-mix(in oklch,var(--acc) 20%,var(--c1)) 0%,var(--c1) 55%,var(--card) 100%) !important; border:1px solid color-mix(in oklch,var(--acc) 38%,transparent) !important; box-shadow: 0 24px 68px -22px color-mix(in oklch,var(--acc) 45%,transparent), inset 0 1px 0 rgba(255,255,255,.08) !important; } .mb-hero::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 20% 30%,color-mix(in oklch,var(--grn) 18%,transparent),transparent 50%); pointer-events:none; } .mb-hero::after{ content:"";position:absolute;top:-40%;right:-20%; width:380px;height:380px; background:radial-gradient(circle,color-mix(in oklch,var(--acc) 28%,transparent) 0%,transparent 70%); pointer-events:none;filter:blur(50px); animation:mbGlow 8s ease-in-out infinite alternate; } @keyframes mbGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,24px) scale(1.2)}} .mb-hero-content{position:relative;z-index:1;text-align:center} .mb-hero-label{ font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em; color:var(--tx2);font-weight:600;margin-bottom:var(--sp2); } .mb-hero-pts{ font-size:var(--fs-hero);font-weight:900;line-height:1; background:var(--grad-text-br); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; letter-spacing:-.045em;margin:4px 0; font-variant-numeric:tabular-nums; filter:drop-shadow(0 4px 24px color-mix(in oklch,var(--acc) 30%,transparent)); animation:heroShimmer 1s ease-out; } @keyframes heroShimmer{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}} .mb-hero-dh{ font-size:var(--fs-md);font-weight:600;color:var(--grn); margin-bottom:var(--sp4); display:inline-flex;align-items:center;gap:6px; padding:6px 14px; background:color-mix(in oklch,var(--grn) 14%,transparent); border-radius:var(--r-pill); border:1px solid color-mix(in oklch,var(--grn) 28%,transparent); font-variant-numeric:tabular-nums; box-shadow:0 0 20px color-mix(in oklch,var(--grn) 20%,transparent); } .mb-hero-bar{ background:rgba(255,255,255,.08);border-radius:var(--r-pill); height:10px;overflow:hidden;margin:var(--sp4) 0 10px; box-shadow:inset 0 1px 2px rgba(0,0,0,.3); } .mb-hero-bar > div{ height:100%; background:linear-gradient(90deg,var(--acc) 0%,var(--acc-2) 50%,var(--grn) 100%); border-radius:var(--r-pill); transition:width .9s var(--e-out); box-shadow:0 0 16px color-mix(in oklch,var(--acc) 60%,transparent); } .mb-hero-meta{font-size:var(--fs-sm);color:var(--tx2);margin-top:6px} .mb-hero-reward{ display:inline-block;margin-top:var(--sp3); padding:8px 18px; background:linear-gradient(135deg,color-mix(in oklch,var(--org) 22%,transparent),color-mix(in oklch,var(--grn) 14%,transparent)); border:1px solid color-mix(in oklch,var(--org) 38%,transparent); border-radius:var(--r-pill); font-size:var(--fs-sm);font-weight:600;color:var(--org); box-shadow:0 4px 14px color-mix(in oklch,var(--org) 20%,transparent); } /* ─── 29 · MEMBRE CARDS (.mb-half/.mb-full/.mb-card-title/.mb-row) ─── */ .mb-half,.mb-full{ padding:var(--sp5) !important;border-radius:var(--r) !important; border:1px solid var(--bdr) !important; background:var(--card) !important; box-shadow:var(--sh1); transition:transform var(--t-med),border-color var(--t-med),box-shadow var(--t-med); position:relative;overflow:hidden; } .mb-half::before,.mb-full::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg,color-mix(in oklch,var(--acc) 4%,transparent),transparent 50%); pointer-events:none; } .mb-half:hover,.mb-full:hover{ transform:translateY(-2px); border-color:color-mix(in oklch,var(--acc) 28%,var(--bdr3)) !important; box-shadow:var(--sh2),0 10px 30px -12px color-mix(in oklch,var(--acc) 30%,transparent); } .mb-card-title{ display:flex;align-items:center;gap:10px; font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em; font-weight:700;color:var(--tx2);margin-bottom:var(--sp4); padding-bottom:var(--sp3); border-bottom:1px solid var(--bdr); position:relative; } .mb-card-title .ic{ width:32px;height:32px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; font-size:16px; background:linear-gradient(135deg,color-mix(in oklch,var(--acc) 22%,transparent),color-mix(in oklch,var(--grn) 10%,transparent)); border:1px solid color-mix(in oklch,var(--acc) 30%,transparent); box-shadow:0 2px 10px color-mix(in oklch,var(--acc) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.1); } .mb-row{ display:flex;justify-content:space-between;align-items:center; padding:10px 0;font-size:var(--fs-md); border-bottom:1px dashed var(--bdr);gap:var(--sp3); position:relative; } .mb-row:last-child{border-bottom:0} .mb-row .l{color:var(--tx2);font-size:var(--fs-sm)} .mb-row .r{font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums} .mb-row .r.acc{color:var(--acc)} .mb-row .r.grn{color:var(--grn)} /* KPI tiles membre */ .mb-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:var(--sp2);position:relative} .mb-kpi-tile{ text-align:center;padding:var(--sp4) 10px;border-radius:var(--r2); background:var(--c2);border:1px solid var(--bdr); transition:border-color var(--t-fast),transform var(--t-fast),background var(--t-fast); position:relative;overflow:hidden; } .mb-kpi-tile::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg,color-mix(in oklch,var(--acc) 5%,transparent),transparent 70%); pointer-events:none; } .mb-kpi-tile:hover{border-color:color-mix(in oklch,var(--acc) 30%,var(--bdr3));transform:translateY(-2px);background:var(--c3)} .mb-kpi-val{ font-size:var(--fs-2xl);font-weight:800;line-height:1; letter-spacing:-.025em;margin-bottom:6px; font-variant-numeric:tabular-nums;color:var(--tx);position:relative; } .mb-kpi-val.acc{color:var(--acc);text-shadow:0 0 20px color-mix(in oklch,var(--acc) 30%,transparent)} .mb-kpi-val.grn{color:var(--grn);text-shadow:0 0 20px color-mix(in oklch,var(--grn) 30%,transparent)} .mb-kpi-val.org{color:var(--org);text-shadow:0 0 20px color-mix(in oklch,var(--org) 30%,transparent)} .mb-kpi-lbl{ font-size:10px;text-transform:uppercase;letter-spacing:.1em; color:var(--tx2);font-weight:600;position:relative; } /* CTA banner */ .mb-cta{ position:relative;overflow:hidden; padding:var(--sp6) var(--sp5) !important;border-radius:var(--r) !important; text-align:center; background: radial-gradient(ellipse 70% 60% at 50% 0%,color-mix(in oklch,var(--acc) 24%,transparent),transparent 60%), linear-gradient(135deg,var(--c1),var(--card)) !important; border:1px solid color-mix(in oklch,var(--acc) 32%,transparent) !important; box-shadow:0 4px 20px -8px color-mix(in oklch,var(--acc) 25%,transparent); } .mb-cta-ic{font-size:34px;margin-bottom:6px;position:relative;z-index:1;filter:drop-shadow(0 4px 12px color-mix(in oklch,var(--acc) 40%,transparent))} .mb-cta-title{font-size:var(--fs-lg);font-weight:700;color:var(--tx);margin-bottom:6px;position:relative;z-index:1;letter-spacing:-.015em} .mb-cta-desc{font-size:var(--fs-sm);color:var(--tx2);line-height:1.55;margin-bottom:var(--sp4);max-width:520px;margin-left:auto;margin-right:auto;position:relative;z-index:1} .mb-cta > .btn{max-width:280px;margin:0 auto;display:inline-flex !important;position:relative;z-index:1} /* Parrainage */ .mb-parr{ padding:var(--sp6) var(--sp5) !important;border-radius:var(--r) !important; background: radial-gradient(ellipse 60% 40% at 0% 0%,color-mix(in oklch,var(--org) 22%,transparent),transparent 60%), linear-gradient(135deg,color-mix(in oklch,var(--org) 8%,var(--c1)) 0%,var(--card) 100%) !important; border:1px solid color-mix(in oklch,var(--org) 32%,transparent) !important; position:relative;overflow:hidden; } .mb-parr::before{ content:"";position:absolute;top:-30%;right:-20%;width:300px;height:300px; background:radial-gradient(circle,color-mix(in oklch,var(--org) 18%,transparent),transparent 70%); filter:blur(40px);pointer-events:none; } .mb-parr-title{color:var(--org) !important} .mb-parr-title .ic{ background:linear-gradient(135deg,color-mix(in oklch,var(--org) 28%,transparent),color-mix(in oklch,var(--org) 10%,transparent)) !important; border-color:color-mix(in oklch,var(--org) 42%,transparent) !important; box-shadow:0 2px 10px color-mix(in oklch,var(--org) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.1) !important; } .mb-parr-link{ background:var(--c2); border:1px dashed color-mix(in oklch,var(--org) 38%,transparent); border-radius:var(--r2);padding:12px 14px;margin:var(--sp3) 0; font-family:"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-sm); color:var(--org);word-break:break-all; box-shadow:inset 0 1px 2px rgba(0,0,0,.2); } .mb-parr-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:var(--sp4)} .mb-parr-bar{ background:var(--c2);border-radius:var(--r-pill); height:10px;overflow:hidden;margin:var(--sp4) 0 var(--sp2); box-shadow:inset 0 1px 2px rgba(0,0,0,.3); } .mb-parr-bar > div{ height:100%; background:linear-gradient(90deg,var(--org),#ffd566,var(--grn)); border-radius:var(--r-pill);transition:width .9s var(--e-out); box-shadow:0 0 10px color-mix(in oklch,var(--org) 40%,transparent); } .mb-parr-progress{font-size:var(--fs-xs);color:var(--tx2);text-align:center;font-weight:500} .mb-qr-code{ display:inline-block;padding:12px 22px; background: linear-gradient(135deg,color-mix(in oklch,var(--acc) 14%,transparent),color-mix(in oklch,var(--grn) 8%,transparent)), var(--c2); border:1px dashed color-mix(in oklch,var(--acc) 42%,transparent); border-radius:var(--r2); font-family:"SF Mono",Menlo,Consolas,monospace; font-size:var(--fs-md);font-weight:700;color:var(--acc); letter-spacing:.18em;cursor:pointer; transition:all var(--t-fast); box-shadow:inset 0 1px 2px rgba(0,0,0,.2); } .mb-qr-code:hover{background:var(--c3);transform:scale(1.02)} .mb-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--sp4)} .mb-actions > .btn.full-w{grid-column:1/-1} /* ─── 30 · ONBOARDING overlay ─── */ .ev-onb-ov,#ev-onb-overlay{ position:fixed;inset:0;z-index:9997; background:color-mix(in oklch,#000 82%,transparent); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); display:none;align-items:center;justify-content:center;padding:var(--sp4); } .ev-onb-card{ width:100%;max-width:420px; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r);padding:var(--sp6); text-align:center;box-shadow:var(--sh3); display:flex;flex-direction:column;gap:var(--sp3); } .ev-onb-ico{font-size:56px;line-height:1;filter:drop-shadow(0 0 20px color-mix(in oklch,var(--acc) 50%,transparent))} .ev-onb-title{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.015em;color:var(--tx)} .ev-onb-txt{font-size:var(--fs-md);color:var(--tx2);line-height:1.55} .ev-onb-dots{display:flex;justify-content:center;gap:6px;padding:4px 0} .ev-onb-dot{width:7px;height:7px;border-radius:50%;background:var(--bdr3);transition:background var(--t-fast),transform var(--t-fast)} .ev-onb-dot.on{background:var(--acc);transform:scale(1.3)} /* Offline full page */ #ev-offline-full{ position:fixed;inset:0;z-index:9998; background:var(--c0);display:none; flex-direction:column;align-items:center;justify-content:center; padding:var(--sp4);text-align:center;gap:var(--sp3); } .ev-offline-ico{font-size:64px;opacity:.6} .ev-offline-t{font-size:var(--fs-xl);font-weight:700;color:var(--tx)} .ev-offline-p{font-size:var(--fs-md);color:var(--tx2);max-width:400px;line-height:1.55} .ev-offline-btn{margin-top:var(--sp3)} /* Pin admin box */ .admin-pin-box{ background:var(--card);border:1px solid var(--bdr); border-radius:var(--r);padding:var(--sp6) var(--sp5); width:90%;max-width:340px; display:flex;flex-direction:column;gap:var(--sp3); text-align:center;box-shadow:var(--sh3); } /* ─── 31 · FOCUS VISIBLE ─── */ :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px} button:focus-visible,.btn:focus-visible,.ni:focus-visible,.atab:focus-visible,.pk:focus-visible,.ob:focus-visible,.pbt:focus-visible,.ib:focus-visible{outline:none;box-shadow:var(--ring)} :focus:not(:focus-visible){outline:none} /* ─── 32 · TWEAKS PANEL ─── */ #tweaks-panel{ position:fixed;right:20px;bottom:20px;z-index:10000; background:color-mix(in oklch,var(--card) 94%,transparent); -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%); border:1px solid var(--bdr3);border-radius:var(--r); box-shadow:var(--sh3);padding:var(--sp4); width:300px;display:none;flex-direction:column;gap:var(--sp3); font-size:var(--fs-sm);max-height:80vh;overflow-y:auto; animation:twIn 260ms var(--e-bounce); } @keyframes twIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}} #tweaks-panel.on{display:flex} #tweaks-panel h3{ font-size:var(--fs-sm);font-weight:700; text-transform:uppercase;letter-spacing:.1em; color:var(--tx2);margin-bottom:2px; display:flex;align-items:center;justify-content:space-between; } .tw-row{display:flex;flex-direction:column;gap:6px} #tweaks-panel label{font-size:var(--fs-xs);color:var(--tx2);font-weight:500} #tweaks-panel input[type="range"]{width:100%;accent-color:var(--acc);height:24px} .tw-swatches{display:flex;gap:6px;flex-wrap:wrap} .tw-sw{ width:30px;height:30px;border-radius:var(--r3); border:2px solid transparent;cursor:pointer; transition:transform var(--t-fast),border-color var(--t-fast); box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15); } .tw-sw:hover{transform:scale(1.12)} .tw-sw.on{border-color:var(--tx);transform:scale(1.08)} .tw-close{ background:none;border:0;color:var(--tx2); font-size:18px;cursor:pointer;padding:0;line-height:1; width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px; transition:color var(--t-fast),background var(--t-fast); } .tw-close:hover{color:var(--tx);background:var(--c2)} .tw-seg{display:flex;gap:4px;background:var(--c2);padding:3px;border-radius:var(--r3);border:1px solid var(--bdr)} .tw-seg button{ flex:1;padding:7px 8px;border:0;background:transparent; color:var(--tx2);font-size:var(--fs-xs);font-weight:600; cursor:pointer;border-radius:5px;font-family:inherit; transition:all var(--t-fast); min-height:30px; } .tw-seg button:hover:not(.on){color:var(--tx)} .tw-seg button.on{background:var(--acc);color:#fff;box-shadow:0 2px 6px -2px color-mix(in oklch,var(--acc) 50%,transparent)} #tweaks-toggle{ position:fixed;right:20px;bottom:calc(140px + env(safe-area-inset-bottom)); z-index:9995;width:44px;height:44px;border-radius:50%; background:color-mix(in oklch,var(--acc) 16%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid color-mix(in oklch,var(--acc) 32%,transparent); color:var(--acc);font-size:18px;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:var(--sh2);transition:transform var(--t-fast),background var(--t-med); } #tweaks-toggle:hover{transform:scale(1.06) rotate(20deg);background:color-mix(in oklch,var(--acc) 26%,transparent)} /* ─── 33 · RESPONSIVE ─── */ /* Ultra-compact ≤374 (iPhone SE) */ @media (max-width:374px){ :root{ --fs-hero:52px;--fs-4xl:30px;--fs-3xl:24px; --sp4:12px;--sp5:16px;--sp6:20px;--sp7:24px; } .scrl{padding:var(--sp3)} .tb{padding:0 var(--sp3);height:52px} .mb-hero{padding:var(--sp6) var(--sp4) !important} .mb-kpi-grid{grid-template-columns:repeat(3,1fr);gap:6px} .mb-kpi-val{font-size:var(--fs-xl)} .cd{padding:var(--sp4)} .pdots{gap:10px} .pk{height:52px;font-size:20px} .qr-code-big{font-size:20px;letter-spacing:3px;padding:14px 18px} .ahero h1{font-size:var(--fs-2xl)} .md{padding:var(--sp4)} .mdt{font-size:var(--fs-lg)} .og{gap:6px} .ob{padding:10px 6px;min-height:72px} .ob .nm{font-size:var(--fs-xs)} .btn{padding:11px var(--sp3);font-size:var(--fs-sm)} } /* Tablette ≥768 */ @media (min-width:768px){ :root{--density:1.02} .scrl{padding:var(--sp5)} .cd{padding:var(--sp5)} .k2{gap:var(--sp3)} .kv{font-size:var(--fs-3xl)} .mdt{font-size:var(--fs-xl)} .ahero h1{font-size:var(--fs-4xl)} .ahero .hi{font-size:68px} .pk{height:62px;font-size:24px} .btn{padding:13px var(--sp4);font-size:var(--fs-md)} .pg-grid{grid-template-columns:repeat(8,minmax(72px,1fr))} .pc{font-size:12px;min-height:68px} .pg2{grid-template-columns:repeat(6,1fr)} .mb-hero-pts{font-size:var(--fs-hero)} } /* Desktop ≥1024 */ @media (min-width:1024px){ html,body{overflow:auto} :root{--density:1.05} #app,#mb-p-app{ /* Full-width : occupe toute la largeur de l'écran, plus de centrage avec marges vides. */ width:100%;max-width:none;margin:0;min-height:100vh; display:grid; grid-template-columns:240px 1fr; grid-template-rows:auto 1fr; grid-template-areas:"tb tb" "bn main"; } #app > .tb,#mb-p-app > .tb{ grid-area:tb;position:sticky;top:0;z-index:10; padding:0 var(--sp6);height:64px; } #app > div[style*="flex:1"],#mb-p-app > div[style*="flex:1"]{ grid-area:main;overflow:hidden;min-height:0; padding:var(--sp3) var(--sp5) var(--sp5); } #app > .bn,#mb-p-app > .bn{ grid-area:bn;flex-direction:column; border-top:0;border-right:1px solid var(--bdr); padding:var(--sp3) var(--sp2);gap:2px; position:sticky;top:64px; height:calc(100vh - 64px);overflow-y:auto; background:var(--c1); } #app > .bn .ni,#mb-p-app > .bn .ni{ flex:0 0 auto;flex-direction:row;justify-content:flex-start; padding:11px var(--sp3);gap:var(--sp3); font-size:var(--fs-md);font-weight:500; text-transform:none;letter-spacing:0;min-height:44px; border-radius:var(--r2);color:var(--tx2); } #app > .bn .ni .ic,#mb-p-app > .bn .ni .ic{font-size:18px;margin:0} #app > .bn .ni:hover,#mb-p-app > .bn .ni:hover{background:var(--c2);color:var(--tx)} #app > .bn .ni.on,#mb-p-app > .bn .ni.on{ background:color-mix(in oklch,var(--acc) 14%,transparent); color:var(--acc); box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--acc) 25%,transparent); } #app > .bn .ni.on::before,#app > .bn .ni.on::after, #mb-p-app > .bn .ni.on::before,#mb-p-app > .bn .ni.on::after{display:none} #app > .bn .ni .nbdg,#mb-p-app > .bn .ni .nbdg{position:static;margin-left:auto} /* Auth/login fill whole screen (no sidebar) */ body:has(#p-auth.on) #mb-p-app, body:has(#p-login.on) #app{display:flex;flex-direction:column;max-width:none} body:has(#p-auth.on) #mb-p-app > .tb, body:has(#p-auth.on) #mb-p-app > .bn, body:has(#p-login.on) #app > .tb, body:has(#p-login.on) #app > .bn{display:none !important} /* Admin grids — full-width, plus de cap à 1200px. */ #s-acc,#s-fin,#s-eq,#s-ano,#s-rp,#s-env,#s-hist,#s-msg,#s-ctrl,#s-audit,#mb-s-hist{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) !important; gap:var(--sp4) !important; align-content:start; width:100%;max-width:none;margin:0; } /* Pages Clients & Équipe : structure verticale stricte (cartes → barre → tableau), pleine largeur. */ #s-mbrs,#s-eqp{ display:flex !important;flex-direction:column !important;gap:24px !important; align-content:stretch;width:100%;max-width:none;margin:0; } #s-acc > .cd:first-of-type, #s-fin > .cd:first-of-type, #s-rp > .cd:first-of-type, #s-env > .cd:first-of-type, #s-ctrl > .cd:first-of-type, #s-audit > .cd:first-of-type{grid-column:1/-1} #s-acc .k2,#s-fin .k2,#s-rp .k2{grid-template-columns:repeat(4,1fr) !important} .kv{font-size:var(--fs-3xl)} .kc{padding:var(--sp4)} /* Membre home 12-col */ #s-home{ display:grid !important; grid-template-columns:repeat(12,1fr) !important; gap:var(--sp5) !important; max-width:1100px;margin:0 auto;width:100%; } #s-home > .mb-hero, #s-home > .mb-full, #s-home > .mb-cta, #s-home > .mb-parr, #s-home > div[style*="linear-gradient"], #s-home > .cd:not(.mb-half){grid-column:1/-1 !important} #s-home > .mb-half{grid-column:span 6 !important} #pg-chat{max-width:900px;margin:0 auto;width:100%} #pg-caisseop .scrl,#pg-css .scrl,#pg-qr .scrl,#s-qr,#ct-srt .scrl,#s-srt{ max-width:720px !important;margin:0 auto !important; } #p-auth,#p-login{align-items:center;justify-content:center} .aw{max-width:460px} .lw{max-width:440px} .pg-grid{grid-template-columns:repeat(8,minmax(72px,1fr));gap:16px} .pc{min-height:84px;font-size:13px;border-radius:var(--r2)} .pd2{font-size:11px} .ov{align-items:center !important;padding:var(--sp4)} .md{ max-width:640px !important; border-radius:22px !important;border-bottom:1px solid var(--bdr) !important; padding:var(--sp6) !important; animation:mdFade 300ms var(--e-out); } @keyframes mdFade{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}} .mdt{font-size:var(--fs-2xl)} #ev-wa-fab{right:24px;bottom:24px} #admin-btn{top:14px;right:20px} #theme-toggle{top:14px;right:80px;left:auto} #tweaks-toggle{right:24px;bottom:92px} #ev-smart-banner{max-width:520px;left:50%;transform:translateX(-50%);border-radius:0 0 16px 16px} .cd:hover{transform:translateY(-1px);box-shadow:var(--sh2)} .btn:not(:disabled):hover{transform:translateY(-1px)} } /* Large desktop ≥1440 */ @media (min-width:1440px){ :root{--fs-hero:72px;--sp5:24px;--sp6:32px} .pg-grid{grid-template-columns:repeat(8,minmax(72px,1fr))} .pc{min-height:96px;font-size:14px} /* Full-width strict — pas de cap à 1500px. */ #app,#mb-p-app{max-width:none;width:100%} } /* XL / 4K ≥1920 */ @media (min-width:1920px){ :root{--fs-hero:80px;--fs-4xl:42px} /* Full-width strict — pas de cap à 1500px ni grilles capées. */ #app,#mb-p-app{max-width:none;width:100%} #s-acc,#s-fin,#s-env,#s-rp{grid-template-columns:repeat(auto-fit,minmax(400px,1fr)) !important;max-width:none} #s-home{max-width:none} } /* Landscape phones */ @media (max-height:500px) and (orientation:landscape){ .ahero{padding:2px 0} .ahero .hi{font-size:36px;margin-bottom:2px;animation:none} .ahero h1{font-size:var(--fs-xl)} .acard{padding:var(--sp3)} .fg{gap:3px} .tb{height:48px} .bn{padding:2px 4px env(safe-area-inset-bottom)} } /* Print */ @media print{ body{background:#fff;color:#000} body::before,body::after{display:none} #theme-toggle,#admin-btn,.bn,.tb,#toast,#mb-toast,#ev-wa-fab,#ev-smart-banner,#tweaks-toggle,#tweaks-panel{display:none !important} .cd,.md{box-shadow:none;border:1px solid #ccc} } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ══════════════════════════════════════════════════════════════════ v7 · FIXES FINALS — zero empty space, perfect responsive ══════════════════════════════════════════════════════════════════ */ /* Base hauteur réelle avec viewport units modernes — fini les zones vides iOS */ html,body{min-height:100vh;min-height:100dvh;min-height:100svh} html{height:100%} body{min-height:100dvh;position:relative} #app,#mb-app,#mode-membre,#mode-admin{min-height:100dvh} #mode-admin.on,#mode-membre:not(.off){min-height:100dvh} /* Les "pg" actives doivent remplir tout le conteneur — pas de blanc sous les écrans courts */ .pg{min-height:0} .pg.on{min-height:100%;flex:1 1 auto;display:flex;flex-direction:column} .pg.on .scrl{flex:1 1 auto;min-height:0} /* Backgrounds de sécurité pour qu'aucune zone n'apparaisse en noir brut */ html::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(ellipse 80% 60% at 15% 0%, color-mix(in oklch, var(--acc) 18%, transparent), transparent 60%), radial-gradient(ellipse 70% 60% at 90% 100%, color-mix(in oklch, var(--grn) 10%, transparent), transparent 60%), var(--c0); } html[data-theme="light"]::before{ background: radial-gradient(ellipse 80% 60% at 15% 0%, rgba(124,111,255,.10), transparent 60%), radial-gradient(ellipse 70% 60% at 90% 100%, rgba(0,166,118,.08), transparent 60%), var(--c0); } /* Scroll containers — pas de double scroll, pas de gap en bas */ .scrl{ overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(24px + env(safe-area-inset-bottom)); } /* Top bar — toujours collée, hauteur stable */ .tb{position:sticky;top:0;z-index:50;flex-shrink:0} /* Bottom nav mobile — safe-area + pas de gap */ @media (max-width:1023px){ .bn{ position:sticky;bottom:0;z-index:50;flex-shrink:0; padding-bottom:env(safe-area-inset-bottom); } .scrl{padding-bottom:24px} } /* Desktop sidebar — pleine hauteur, pas de gap en bas */ @media (min-width:1024px){ #mb-p-app.on .bn, #mode-admin.on .bn{ top:0 !important;bottom:0 !important;height:100dvh !important; overflow-y:auto;overscroll-behavior:contain; padding-bottom:24px !important; } /* Le container app prend toute la hauteur viewport pour éviter trou en bas */ #mb-p-app.on,#mode-admin.on #app{min-height:100dvh} #mb-p-app.on > div,#mode-admin.on #app > div{min-height:0} } /* Auth pages — centrage vertical parfait, zéro gap */ #p-auth.on,#p-login.on{ min-height:100dvh !important; height:auto !important; display:flex !important; flex-direction:column; justify-content:center; align-items:center; /* Grosse marge basse : le bouton « Se connecter » reste atteignable au scroll, jamais coupé par la barre du navigateur mobile ni le clavier. */ padding:max(24px,env(safe-area-inset-top)) 16px max(96px,calc(env(safe-area-inset-bottom) + 80px)); } @media (max-height:700px){ #p-auth.on,#p-login.on{justify-content:flex-start} } /* Modales — pas de scroll double, hauteur safe */ .ov.on{overflow-y:auto;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)} .md{max-height:calc(100dvh - 32px);overscroll-behavior:contain} @media (min-width:1024px){.md{max-height:calc(100dvh - 64px)}} /* Chat area — prend toute la hauteur dispo sans déborder */ #pg-chat.on{display:flex;flex-direction:column;min-height:0;flex:1 1 auto} .chat-area{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} /* Responsive 320px — tout doit passer */ @media (max-width:374px){ html{font-size:14px} .scrl{padding:12px 10px calc(16px + env(safe-area-inset-bottom))} .cd,.mb-half,.mb-full,.mb-hero,.mb-cta,.mb-parr{padding:16px !important;border-radius:14px !important} .mb-hero{padding:20px 16px !important} .mb-hero-pts{font-size:52px !important;letter-spacing:-1.5px !important} .k2{gap:6px} .kc{padding:10px} .kv{font-size:20px !important} .btn{padding:12px 14px !important;font-size:13px !important} .fi,.fta{padding:12px !important;font-size:15px !important} .ahero .hi{font-size:52px !important} .ahero h1{font-size:24px !important} .ahero p{font-size:13px !important} .atab{padding:11px 8px !important;font-size:13px !important} .mb-parr-btns{grid-template-columns:1fr !important} .mb-actions{grid-template-columns:1fr !important} .pg-grid{grid-template-columns:repeat(8,minmax(72px,1fr)) !important} .pg2{grid-template-columns:repeat(3,1fr) !important} .tb{height:48px;padding:0 10px} .ni{padding:6px 2px 4px !important;font-size:8px !important} .ni .ic{font-size:18px !important} } /* 375-427 (mobile standard) — typo un chouia réduite */ @media (min-width:375px) and (max-width:427px){ .mb-hero-pts{font-size:60px !important} .ahero h1{font-size:28px !important} } /* Tablette 768-1023 — 2 colonnes sur le home membre */ @media (min-width:768px) and (max-width:1023px){ #s-home{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:16px !important; align-content:start; } #s-home > .mb-hero, #s-home > .mb-full, #s-home > .mb-cta, #s-home > .mb-parr{grid-column:1/-1 !important} #s-home > .cd:has(.btn){grid-column:1/-1 !important} .k2{grid-template-columns:repeat(3,1fr) !important} .pg-grid{grid-template-columns:repeat(8,minmax(72px,1fr)) !important} } /* Desktop 1024-1439 — aération ajustée, plus de cap de largeur. */ @media (min-width:1024px) and (max-width:1439px){ .scrl{padding:28px 32px !important;max-width:none !important} #s-home{gap:20px !important} } /* Ultra-wide 1920+ — padding plus généreux, full-width. */ @media (min-width:1920px){ .scrl{max-width:none !important;padding:40px 64px !important} #s-home{max-width:none !important} } /* 2560+ — full-width avec padding adapté. */ @media (min-width:2560px){ .scrl{max-width:none !important} html{font-size:16px} } /* Landscape court — éviter que l'auth soit écrasée */ @media (max-height:500px) and (orientation:landscape){ .ahero{display:none} #p-auth.on,#p-login.on{padding:12px} .acard{padding:14px !important;gap:10px !important} .fi,.fta{padding:9px 12px !important;min-height:38px} .btn{padding:10px !important;min-height:38px} } /* Empty states — occupent l'espace vertical */ .emp{flex:1;justify-content:center;min-height:200px} /* Loading states — occupent aussi */ .lds{flex:1;min-height:120px} /* Images cassées — pas de zone blanche */ img{background:var(--c2)} img[alt=""]:not([src]){display:none} /* Inputs autofill — pas de jaune moche */ input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus, textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-background-clip:text; -webkit-text-fill-color:var(--tx) !important; caret-color:var(--tx) !important; -webkit-box-shadow:0 0 0 1000px var(--c2) inset !important; transition:background-color 5000s; } /* Grabber uniforme sur modales slide-up mobile */ @media (max-width:1023px){ .md::before{ content:"";display:block;width:36px;height:4px; background:var(--bdr3);border-radius:999px; margin:-8px auto 12px;flex-shrink:0; } } /* Anti-FOUC — pas de flash blanc au chargement */ body{animation:bootIn .25s ease-out} @keyframes bootIn{from{opacity:.01}to{opacity:1}} /* Liens et boutons — cible tactile min 44px Apple HIG partout */ button,.btn,.ni,.atab,.pk,.ob,[onclick]{min-height:44px} .ni,.atab{min-height:48px} .star{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* Plan de salle — jamais de cells qui débordent */ .pg-grid{overflow:visible;width:100%} .pc{min-width:0;overflow:hidden;text-overflow:ellipsis} /* Éviter overflow horizontal global */ body,#app,#mb-app,#mode-membre,#mode-admin{overflow-x:hidden;max-width:100vw} /* Textes longs — wrap intelligent */ .sn,.tb-t,.mdt,.mb-card-title,.mb-hero-label{text-wrap:balance;word-break:break-word;overflow-wrap:anywhere} .mb-parr-link,.qr-code-big{word-break:break-all;overflow-wrap:anywhere} /* Focus visible uniforme clavier seulement */ :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px} :focus:not(:focus-visible){outline:none} /* Tweaks panel — mobile safe */ @media (max-width:480px){ #tweaks-panel{ width:calc(100vw - 24px) !important; right:12px !important;left:12px !important; max-width:none !important; } } /* Smart banner + WA FAB — coexistence sans overlap */ @media (max-width:1023px){ #ev-wa-fab{bottom:calc(78px + env(safe-area-inset-bottom)) !important} body.has-smart-banner .tb{margin-top:56px} } @media (min-width:1024px){ #ev-wa-fab{bottom:24px !important;right:24px !important} } /* Toast — toujours au-dessus de tout, jamais coupé */ #toast,#mb-toast{z-index:10000;bottom:calc(80px + env(safe-area-inset-bottom))} @media (min-width:1024px){#toast,#mb-toast{bottom:32px}} /* Sécurité : tout ce qui est invisible (display:none) ne doit PAS occuper d'espace */ [hidden],.pg:not(.on),#form-signup[style*="none"],#form-login[style*="none"]{display:none !important} /* Card vide protection — si innerHTML vide, hauteur zéro */ .cd:empty,.mb-half:empty,.mb-full:empty{display:none} /* Light theme — corrections finales */ html[data-theme="light"]{ --c0:#f7f8fd; --c1:#ffffff; --c2:#eef0f8; --c3:#e4e7f2; --card:#ffffff; --card-2:#f7f8fd; --bdr:rgba(30,30,60,.1); --bdr2:rgba(30,30,60,.05); --bdr3:rgba(30,30,60,.2); --tx:#1a1a30; --tx2:#5a5a7a; --tx3:#8a8aa5; } html[data-theme="light"] body{background:#f7f8fd;color:#1a1a30} html[data-theme="light"] .tb, html[data-theme="light"] .bn{background:rgba(255,255,255,.85) !important;border-color:rgba(30,30,60,.08) !important} html[data-theme="light"] .md, html[data-theme="light"] .cd{background:#ffffff !important;border-color:rgba(30,30,60,.1) !important} html[data-theme="light"] .fi, html[data-theme="light"] .fta{background:#ffffff !important;border-color:rgba(30,30,60,.15) !important;color:#1a1a30 !important} html[data-theme="light"] .kv{ background:linear-gradient(135deg,#1a1a30 0%,#5a4fd8 100%) !important; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent !important; } /* Conteneurs flex-column ne doivent jamais laisser espace en bas */ #mb-p-app.on,#app{display:flex;flex-direction:column} #mb-p-app.on > *,#mode-admin.on #app > *{flex-shrink:0} #mode-admin.on #app > div:has(.pg.on){flex:1 1 auto;min-height:0;display:flex;flex-direction:column} /* ─── DESKTOP FIX ≥1024 : réparation grille admin (sidebar 240px + main) ─── */ /* La media query 1024 existante (l.1663) cible #app > .tb / .bn / div[flex:1], mais côté admin ces éléments sont enfants de #p-app, pas de #app. On ajoute donc des sélecteurs descendants spécifiques sans toucher à l'existant. */ @media (min-width:1024px){ #app > #p-app.pg.on{ display:grid !important; grid-template-columns:240px 1fr; grid-template-rows:auto 1fr; grid-template-areas:"tb tb" "bn main"; width:100%;height:100%;overflow:hidden;flex:none; } #app > #p-app > .tb{ grid-area:tb;padding:0 var(--sp6);height:64px; } #app > #p-app > div[style*="flex:1"]{ grid-area:main;overflow:hidden;min-height:0; padding:var(--sp3) var(--sp5) var(--sp5); } #app > #p-app > .bn{ grid-area:bn;flex-direction:column; border-top:0;border-right:1px solid #0F172A; /* slate-900 — refonte 2026-05-26 */ padding:var(--sp3) var(--sp2);gap:2px; height:calc(100vh - 64px);overflow-y:auto; background:#020617; /* slate-950 — fond uniforme sombre */ } #app > #p-app > .bn .ni{ flex:0 0 auto;flex-direction:row;justify-content:flex-start; padding:11px var(--sp3);gap:var(--sp3); font-size:var(--fs-md);font-weight:500; text-transform:none;letter-spacing:0;min-height:44px; border-radius:var(--r2);color:#CBD5E1; /* slate-300 inactif */ } #app > #p-app > .bn .ni .ic{font-size:18px;margin:0} #app > #p-app > .bn .ni:hover{background:rgba(15,23,42,.60);color:#FFFFFF} #app > #p-app > .bn .ni.on{ background:#0F172A; /* slate-900 — pilule active */ color:#22D3EE; /* cyan-400 — texte actif néon */ border:1px solid #1E293B; box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 14px rgba(34,211,238,.18); } #app > #p-app > .bn .ni.on::before, #app > #p-app > .bn .ni.on::after{display:none} #app > #p-app > .bn .ni .nbdg{position:static;margin-left:auto} } /* Tap targets minimum 44x44 (a11y mobile) — footer / help links */ .footer-link, .help-link, .wa-footer{ display:inline-flex; align-items:center; min-height:44px; padding:10px 12px; box-sizing:border-box; } /* Skip link — visible uniquement au focus clavier (a11y, WCAG 2.4.1) */ .skip-link{ position:absolute; left:-9999px; top:0; background:#7c6fff; color:#fff; padding:10px 16px; z-index:99999; border-radius:0 0 8px 0; font-weight:700; text-decoration:none; font-size:14px; } .skip-link:focus{ left:0 } /* Utilitaire : cacher visuellement mais lisible par lecteur d'ecran */ .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Filet a11y : indication de focus systematique (defense en plus) */ :where(button, a, input, select, textarea, [tabindex="0"]):focus-visible{ outline:2px solid #7c6fff; outline-offset:2px; } /* Hint visuel sous "Code PIN" quand op + mode sont prets (anim subtile) */ .cp-hint{ color:var(--acc); font-size:13px; text-align:center; margin:6px 0 10px; font-weight:600; animation:cpHintPulse 1.5s ease-in-out infinite; } @keyframes cpHintPulse{ 0%,100%{opacity:1} 50%{opacity:.55} } @media (prefers-reduced-motion: reduce){ .cp-hint{ animation:none } } /* Profil/operator login screen — layout mobile compact (≤480px de large) */ @media (max-width: 480px){ #p-login .lhero{ padding:6px 0 !important; } #p-login .lhero .hi{ font-size:32px !important; } #p-login .lhero h2{ font-size:22px !important; margin:2px 0 !important; } #p-login .lhero p{ font-size:12px !important; margin-top:2px !important; } #p-login .slbl{ font-size:11px !important; margin:4px 0 6px !important; } /* Cards profil : 2 colonnes serrees, plus compact */ #p-login .og{ gap:6px !important; } #p-login .ob{ padding:8px 6px !important; } #p-login .ob .ic{ font-size:20px !important; margin-bottom:2px !important; } #p-login .ob .nm{ font-size:13px !important; } #p-login .ob .rl{ font-size:9px !important; margin-top:1px !important; } /* Section mode (3 boutons sur 1 ligne) */ #role-choice{ margin-top:4px; } #role-choice > div[style*="grid"]{ gap:5px !important; } /* Keypad PIN : touches plus basses pour rentrer dans le viewport */ #p-login .pw{ padding:14px !important; } #p-login .pdots{ height:32px !important; gap:10px !important; margin-bottom:10px !important; } #p-login .pp{ gap:6px !important; } #p-login .pk{ height:46px !important; font-size:18px !important; } } /* Tres petit ecran (paysage smartphone, iPhone SE paysage) */ @media (max-height: 600px) and (max-width: 800px){ #p-login .lhero{ padding:0 !important; } #p-login .lhero .hi{ font-size:24px !important; } #p-login .lhero h2{ font-size:16px !important; } #p-login .lhero p{ display:none !important; } #p-login .ob{ padding:6px 4px !important; } #p-login .pw{ padding:10px !important; } #p-login .pdots{ height:24px !important; margin-bottom:6px !important; } #p-login .pk{ height:40px !important; font-size:16px !important; } } /* Modal PIN admin — fix overflow viewport mobile (≤640px de hauteur) */ /* Les inline-style sont fortes : on utilise !important et des selecteurs precis */ @media (max-height: 640px){ #m-admin-pin > .pin-panel{ gap:8px !important; padding:12px 16px !important; } #m-admin-pin .pin-panel button{ height:42px !important; min-height:42px !important; } #m-admin-pin h2{ font-size:13px !important; margin:0 !important; } #m-admin-pin .pin-panel > div[aria-hidden="true"]{ font-size:20px !important; margin-bottom:0 !important; } } @media (max-height: 480px){ #m-admin-pin > .pin-panel{ gap:4px !important; padding:8px 12px !important; } #m-admin-pin .pin-panel button{ height:36px !important; min-height:36px !important; font-size:14px !important; } #m-admin-pin h2{ font-size:12px !important; } /* Cache l'icone cadenas decorative */ #m-admin-pin .pin-panel > div[aria-hidden="true"]{ display:none !important; } } /* Toasts — notifications pop-up empilées en bas à droite (fonction showToast). Fond blanc, bordure colorée + liseré gauche épais, icône, disparition auto. */ #toast-container{ position:fixed; bottom:max(16px,env(safe-area-inset-bottom)); right:16px; z-index:99999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:min(360px,calc(100vw - 32px)); } .toast{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:10px; background:#fff; border:1px solid #e2e8f0; border-left-width:4px; box-shadow:0 10px 28px rgba(15,23,42,.18); font-size:13.5px; font-weight:600; line-height:1.4; opacity:0; transform:translateX(24px); transition:opacity .25s ease, transform .25s ease; pointer-events:auto; } .toast.show{ opacity:1; transform:translateX(0); } .toast-ic{ font-size:16px; flex-shrink:0; line-height:1 } .toast--success{ border-color:#10b981; color:#047857 } .toast--error { border-color:#ef4444; color:#dc2626 } .toast--warn { border-color:#f59e0b; color:#b45309 } .toast--info { border-color:#3b82f6; color:#1d4ed8 } /* ══════════════════════════════════════════════════════════════════ SOFT UI · AIRY REDESIGN — surcouche purement visuelle N'ajoute QUE du style : aucun ID, classe ni markup modifié. → Scripts PowerShell & logique de données : 100% intacts. ══════════════════════════════════════════════════════════════════ */ /* ─── Jetons : surfaces claires, bordures fines, rayons généreux ─── */ html[data-theme="light"]{ --c0:#F3F4F6; /* fond de page — gris très clair */ --c1:#FFFFFF; --c2:#F1F5F9; --c3:#E2E8F0; --card:#FFFFFF; /* cartes : blanc pur */ --card-2:#F3F4F6; --bdr:#E2E8F0; /* bordures fines */ --bdr2:#F1F5F9; --bdr3:#D8DFE8; --acc:#2D5A60; /* Teal profond — boutons, accents, en-têtes */ --acc-2:#3C7178; /* Teal clair — survols */ --blu:#2D5A60; --grad-brand:#2D5A60; --tx:#1F2937; /* texte — noir charbon */ --tx2:#64748B; --tx3:#94A3B8; --r:12px; /* rayons sobres */ --r2:12px; --r3:10px; --sh1:0 1px 2px rgba(15,23,42,.04); --sh2:0 10px 15px -3px rgba(0,0,0,.05),0 4px 6px -4px rgba(0,0,0,.05); --sh3:0 24px 48px -12px rgba(15,23,42,.16),0 8px 20px -10px rgba(15,23,42,.08); } /* Fond plat & subtil — on retire grain et halos colorés */ html[data-theme="light"]::before{background:#F3F4F6 !important} body::before,body::after{display:none !important} /* Typographie Inter + valeurs KPI en charbon (sans dégradé) */ body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} html[data-theme="light"] .kv{background:none !important;background-clip:border-box !important;-webkit-text-fill-color:currentColor !important} /* ─── Conteneurs & cartes — Airy ─── */ .scrl{gap:16px} .cd{ border-radius:12px; padding:24px; box-shadow:0 10px 15px -3px rgba(0,0,0,.05),0 4px 6px -4px rgba(0,0,0,.04); } html[data-theme="light"] .cd{border-color:#E2E8F0 !important} .cd-h{margin-bottom:14px;color:var(--acc)} .kc{border-radius:12px;padding:18px;background:#FFFFFF;border-color:#E2E8F0} .kc::before{display:none} /* ─── Boutons — flat & soft ─── */ .btn{border-radius:12px} .btn::before{display:none} .btn.ba{box-shadow:0 6px 16px -6px rgba(45,90,96,.40)} .btn.bg{box-shadow:0 6px 16px -6px rgba(5,150,105,.40)} .btn.bgh{background:#FFFFFF;border:1px solid #E2E8F0;color:#334155;box-shadow:0 1px 2px rgba(15,23,42,.04)} .btn.bgh:hover:not(:disabled){background:#F8FAFC;border-color:#CBD5E1;box-shadow:0 6px 14px -6px rgba(15,23,42,.12)} /* Sortie / Clôture → variante Soft rouge + lueur au survol */ .btn.br,.btn.bd{background:#FEE2E2;color:#DC2626;border:1px solid #FECACA;box-shadow:none} .btn.br:hover:not(:disabled),.btn.bd:hover:not(:disabled){ background:#FECACA;border-color:#FCA5A5;filter:none;transform:translateY(-1px); box-shadow:0 0 0 4px rgba(220,38,38,.12),0 8px 18px -8px rgba(220,38,38,.35); } /* Clôture Manager / Transfert → variante Soft orange + lueur */ .btn.bo{background:#FFF7ED;color:#C2410C;border:1px solid #FBE0BE;box-shadow:none} .btn.bo:hover:not(:disabled){ background:#FFEFD9;border-color:#F6CB8E;filter:none;transform:translateY(-1px); box-shadow:0 0 0 4px rgba(234,88,12,.10),0 8px 18px -8px rgba(234,88,12,.30); } /* Bouton Déconnexion → Soft UI rouge clair */ .ib.hdr-logout,#ni-logout{background:#FEE2E2 !important;color:#DC2626 !important;border:1px solid #FECACA !important} .ib.hdr-logout:hover,#ni-logout:hover{background:#FECACA !important;color:#DC2626 !important} /* Pastilles d'info → pills arrondies */ .tg{border-radius:999px;padding:4px 11px} /* ─── Cartes Postes (.sc) ─── */ .sc{ border:1px solid #E2E8F0;border-left:1px solid #E2E8F0; border-radius:12px;padding:20px; box-shadow:0 10px 15px -3px rgba(0,0,0,.05),0 4px 6px -4px rgba(0,0,0,.04); } .sc.w{border-color:#FDE8C4;background:#FFFBF3} .sc.a{border-color:#FBD0D0;background:#FEF5F5} .sc .sn{font-size:16px;font-weight:700} /* Montant → pastille verte douce */ .sc .sp{background:#ECFDF5;color:#059669;padding:6px 13px;border-radius:999px;font-size:14px;font-weight:800} /* Timer imposant & central */ .sc .tgs{justify-content:center;gap:6px;margin-top:12px} .sc .tg:has([id^="ld-"]){ order:-1;width:100%; display:flex;flex-direction:column;align-items:center;gap:2px; background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px; padding:16px 12px;margin-bottom:4px;font-size:0; } .sc .tg:has([id^="ld-"])::before{ content:"TEMPS ÉCOULÉ"; font-size:10px;font-weight:700;letter-spacing:.14em;color:#94A3B8; } .sc .tg:has([id^="ld-"]) [id^="ld-"]{ font-size:clamp(28px,5.2vw,34px);font-weight:800;line-height:1.05; color:#0F172A;letter-spacing:-.02em;font-variant-numeric:tabular-nums; } .sc.w .tg:has([id^="ld-"]){background:#FFFBEB;border-color:#FDE8C4} .sc.a .tg:has([id^="ld-"]){background:#FEF2F2;border-color:#FBD0D0} /* Timer toujours en gris ardoise — l'état reste signalé par la carte */ .sc.w .tg:has([id^="ld-"]) [id^="ld-"],.sc.a .tg:has([id^="ld-"]) [id^="ld-"]{color:#0F172A} /* ─── Champs ─── */ .fi,.fta{border-radius:14px} html[data-theme="light"] .fi,html[data-theme="light"] .fta{background:#F8FAFC !important;border-color:#E2E8F0 !important} html[data-theme="light"] .fi:focus,html[data-theme="light"] .fta:focus{background:#FFFFFF !important;border-color:var(--acc) !important} /* ─── Tableaux de données (Membres) — lignes hautes, typo Inter/System UI ─── */ .tbl2{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif} .tbl2 th{background:#F8FAFC;padding:14px 16px;font-size:11px;letter-spacing:.07em;color:#64748B;border-bottom:1px solid #E2E8F0} /* color: indispensable — sans couleur explicite, le texte des cellules hérite d'une teinte claire et devient invisible sur le fond blanc forcé plus bas. */ .tbl2 td{padding:16px;border-bottom:1px solid #F1F5F9;color:#334155} .tbl2 tr:hover td{background:#F8FAFC} /* Badges d'état → pills arrondies */ .tbl2 td span[style*="border-radius:10px"]{border-radius:999px !important;padding:6px 12px !important;font-size:11px !important;letter-spacing:.02em} /* Boutons d'action de ligne */ .tbl2 td button[style*="border-radius:6px"]{border-radius:10px !important;padding:7px 11px !important} /* Recherche / filtre membres */ #mbrs-search,#mbrs-filter{border-radius:12px !important;border:1px solid #E2E8F0 !important;background:#F8FAFC !important;padding:11px 14px !important} /* ─── Layout pages Clients & Équipe — cartes stats → barre → tableau ─── Structure verticale dans .scrl : (1) grille de cartes en haut, (2) barre filtres/recherche, (3) tableau pleine largeur en bas. */ .mbrs-stats{ display:grid;grid-template-columns:1fr;gap:14px;width:100%; } @media (min-width:640px){ .mbrs-stats{grid-template-columns:repeat(2,1fr)} } @media (min-width:1024px){ .mbrs-stats{grid-template-columns:repeat(4,1fr)} } .mbrs-stat{ background:#fff;border:1px solid #E2E8F0;border-radius:12px; padding:14px 16px;display:flex;flex-direction:column;gap:4px; box-shadow:0 1px 2px rgba(15,23,42,.04); } .mbrs-stat-lbl{font-size:11px;color:#64748B;font-weight:600;letter-spacing:.02em} .mbrs-stat-val{font-size:22px;font-weight:800;color:#0F172A;line-height:1.1} .mbrs-bar{ display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%; } .mbrs-bar .mbrs-search{flex:1 1 280px;min-width:220px} .mbrs-bar .mbrs-filter{flex:0 0 auto;min-width:140px} .mbrs-refresh,.mbrs-export{ flex:0 0 auto;border:1px solid #E2E8F0;background:#F8FAFC; border-radius:12px;padding:10px 14px;font-size:12px;font-weight:600; color:#0F172A;cursor:pointer;white-space:nowrap; } .mbrs-refresh:hover,.mbrs-export:hover{background:#EEF2F7} .mbrs-export{background:#0F172A;color:#fff;border-color:#0F172A} .mbrs-export:hover{background:#1E293B} .mbrs-table-wrap{ width:100%;background:#fff;border:1px solid #E2E8F0;border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.04);overflow-x:auto; } .mbrs-table{ width:100%;min-width:760px;border-collapse:collapse; font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; } .mbrs-table thead th{ background:#F8FAFC;padding:14px 16px;font-size:11px;letter-spacing:.07em; color:#64748B;font-weight:700;text-transform:uppercase; border-bottom:1px solid #E2E8F0;text-align:left;white-space:nowrap; } .mbrs-table tbody td{ padding:14px 16px;border-bottom:1px solid #F1F5F9;color:#334155; font-size:13px;vertical-align:middle; } .mbrs-table tbody tr:hover td{background:#F8FAFC} .mbrs-table tbody tr:last-child td{border-bottom:none} /* ─── Sidebar & navigation (desktop) — refonte sombre 2026-05-26 ─── */ @media (min-width:1024px){ #s-acc,#s-fin,#s-eq,#s-ano,#s-rp,#s-env,#s-hist,#s-mbrs,#s-msg,#s-ctrl,#s-audit,#mb-s-hist{gap:24px !important} .bn{padding:16px 12px !important} .bn .ni{border-radius:12px !important;margin-bottom:2px;font-weight:500} .bn .ni .ic{filter:none;opacity:.85;transition:filter .2s,opacity .2s} .bn .ni:hover .ic,.bn .ni.on .ic{filter:none;opacity:1} .bn .ni:hover{background:rgba(15,23,42,.60) !important;color:#FFFFFF !important} .bn .ni.on{background:#0F172A !important;color:#22D3EE !important;box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 14px rgba(34,211,238,.18) !important;font-weight:800} /* Indicateur vertical néon cyan */ .bn .ni.on::before{ content:"" !important;display:block !important; position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:22px;border-radius:0 4px 4px 0;background:#22D3EE; box-shadow:0 0 10px rgba(34,211,238,.55); } .bn .ni.on::after{display:none !important} } /* ─── Harmonie complète — modales · onglets · hero · toast ─── */ /* Modales : voile translucide doux + carte blanche très arrondie */ .ov{background:rgba(15,23,42,.45) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .md{ border-radius:24px 24px 0 0;border:1px solid #E2E8F0;border-bottom:0; padding:28px;box-shadow:0 -18px 48px -12px rgba(15,23,42,.22); } .mdt{font-weight:800;letter-spacing:-.02em} @media (min-width:1024px){ .md{ border-radius:24px !important;border-bottom:1px solid #E2E8F0 !important; box-shadow:0 24px 48px -12px rgba(15,23,42,.20) !important; } } /* Onglets : segment actif en pilule douce (cohérent avec la sidebar) */ .tabs{gap:6px;padding:8px 12px;border-bottom:1px solid #E2E8F0} .tab{border-bottom:0 !important;border-radius:999px;transition:background .15s,color .15s} .tab:hover:not(.on){background:#F1F5F9} .tab.on{background:#E6EFEF;color:#2D5A60} /* Bloc hero (CA / bilan) : carte blanche épurée, sans halo coloré */ .bx-hero{ background:#FFFFFF !important;border:1px solid #E2E8F0 !important; border-radius:20px; box-shadow:0 10px 15px -3px rgba(0,0,0,.05),0 4px 6px -4px rgba(0,0,0,.04) !important; } .bh-am{text-shadow:none} /* Toast : coins arrondis & ombre douce */ .toast{border-radius:14px;box-shadow:0 12px 28px -8px rgba(15,23,42,.28)} /* ─── Widget « Fin de service » — intégré dans la sidebar (affichage vertical) ─── */ #fs-bar{ flex-shrink:0; display:flex;flex-direction:column;gap:5px; margin:8px 4px 4px; padding:10px; background:#FFFFFF; border:1px solid var(--bdr); border-radius:10px; box-shadow:0 2px 6px -3px rgba(15,23,42,.10); font-size:11px; } #fs-bar .fs-ttl{ font-size:10px;font-weight:800;color:#0F172A; text-transform:uppercase;letter-spacing:.03em; padding-bottom:5px;border-bottom:1px solid var(--bdr); } #fs-bar .fs-seg{ display:flex;align-items:center;justify-content:space-between;gap:8px; color:var(--tx2);font-weight:600;line-height:1.3; } #fs-bar .fs-lbl{color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #fs-bar .fs-seg b{color:#0F172A;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} #fs-bar #fs-enc,#fs-bar #fs-cours,#fs-bar #fs-tot{color:var(--grn)} #fs-bar .fs-seg.fs-total{border-top:1px solid var(--bdr);padding-top:6px;margin-top:1px} #fs-bar .fs-seg.fs-total b{font-size:13px} /* Pas de sidebar sur mobile : le widget n'apparaît qu'en vue desktop */ @media (max-width:1023px){#fs-bar{display:none}} /* ─── Page AUDIT — tableau pleine largeur, colonne « Détail » élargie ─── */ #s-audit{grid-template-columns:1fr !important} #s-audit .cd{overflow-x:auto} #s-audit .tbl2 th:nth-child(4),#s-audit .tbl2 td:nth-child(4){width:52%} #s-audit .tbl2 td:nth-child(4){white-space:normal;word-break:break-word;line-height:1.5} /* ─── Page CONTRÔLE — colonne unique : pas d'espace vide, tableaux adaptés ─── */ #s-ctrl{grid-template-columns:1fr !important} /* ════════════════════════════════════════════════════════════════ FORÇAGE SOFT UI — NEUTRALISÉ v281 (2026-05-24) Ce bloc était la cause du thème « moitié clair / moitié sombre » : il forçait body+cartes+boutons en LIGHT et écrasait toute couche sombre ultérieure. Désactivé (toutes les règles commentées) ; la surcouche `ev-darkfix-v281` en fin de body s'occupe désormais du dark global. ════════════════════════════════════════════════════════════════ */ /* html,body,html[data-theme="light"] body{background:#F8FAFC !important} html::before,html[data-theme="light"]::before{background:#F8FAFC !important} body::before,body::after{display:none !important} .cd,.kc,.sc,.sc.w,.sc.a,.acard,.md,.bx-hero,.opb,.amt-box,.tc2,.trb, #fs-bar,.tbl2,.tbl2 td,.tbl2 th, html[data-theme="light"] .cd,html[data-theme="light"] .md{background:#FFFFFF !important} [style*="linear-gradient(135deg,#"]{background:#FFFFFF !important;border-color:#E2E8F0 !important} [style*="linear-gradient(135deg,#"] [style*="color:#fff"], [style*="linear-gradient(135deg,#"] [style*="color:#FFF"], [style*="linear-gradient(135deg,#"] [style*="color:white"]{color:#0F172A !important} [style*="#ff3cac"],[style*="#ff3b6e"],[style*="#ec4899"]{border-color:#E2E8F0 !important} .btn.ba,.btn.bg,.btn.br,.btn.bo,.btn.bd{ background:#1F4E4A !important;color:#FFFFFF !important; border:1px solid #1F4E4A !important;box-shadow:none !important; } .btn.ba *,.btn.bg *,.btn.br *,.btn.bo *,.btn.bd *{color:#FFFFFF !important} [id^="ld-"],.pc-timer,.kv,.cd-h,.mdt,.sn{ color:#0F172A !important;-webkit-text-fill-color:#0F172A !important; background:none !important;text-shadow:none !important; } */ /* ─── Tableau de bord directeur — cartes tendance + bar chart 7 jours ─── */ .tbd-trends{ display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px;width:100%; font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; } /* Force ces blocs à occuper la pleine largeur dans la grille admin de #s-acc (auto-fit columns 360px+). Sans ça, ils se retrouveraient dans des colonnes étroites côte à côte avec d'autres .cd et écraseraient le chart. */ #s-acc > .tbd-trends, #s-acc > .tbd-chart-wrap{grid-column:1/-1} @media (min-width:640px){ .tbd-trends{grid-template-columns:repeat(2,1fr)} } @media (min-width:1024px){ .tbd-trends{grid-template-columns:repeat(4,1fr)} } .tbd-card{ background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:16px; display:flex;flex-direction:column;gap:6px; box-shadow:0 1px 3px rgba(15,23,42,.05); } .tbd-card-label{font-size:11px;color:#64748B;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .tbd-card-value{font-size:26px;font-weight:900;color:#0F172A;line-height:1.1;font-variant-numeric:tabular-nums} .tbd-card-suffix{font-size:14px;font-weight:700;color:#64748B;margin-left:4px} .tbd-trend{ display:inline-flex;align-items:center;gap:4px;align-self:flex-start; padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;line-height:1; } .tbd-trend.up{background:#DCFCE7;color:#166534} .tbd-trend.dn{background:#FEE2E2;color:#991B1B} .tbd-trend.zero{background:#F1F5F9;color:#475569} .tbd-trend-sub{font-size:12px;color:#CBD5E1;font-weight:600;margin-top:2px} .tbd-chart-wrap{ background:#fff;border:1px solid #E2E8F0;border-radius:14px; padding:18px 16px 14px;margin-bottom:14px; box-shadow:0 1px 3px rgba(15,23,42,.05); } .tbd-chart-title{ font-size:14px;font-weight:800;color:#0F172A;margin-bottom:14px; display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap; } .tbd-chart-sub{font-size:11px;color:#64748B;font-weight:600} .tbd-chart{ display:grid;grid-template-columns:repeat(7,1fr);gap:8px; align-items:end;height:180px;padding-bottom:4px; } .tbd-chart-col{ display:flex;flex-direction:column;align-items:center;justify-content:flex-end; height:100%;position:relative; } .tbd-chart-bar{ width:74%;min-height:3px; background:linear-gradient(180deg,#2D5A60 0%,#1F4145 100%); border-radius:6px 6px 0 0; position:relative;transition:height .4s ease-out; } .tbd-chart-bar.today{background:linear-gradient(180deg,#10B981 0%,#047857 100%)} .tbd-chart-bar-val{ position:absolute;top:-18px;left:50%;transform:translateX(-50%); font-size:9px;font-weight:800;color:#0F172A;white-space:nowrap; font-variant-numeric:tabular-nums; } .tbd-chart-labels{ display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px; } .tbd-chart-label{text-align:center;font-size:10px;color:#64748B;font-weight:600} .tbd-chart-label.today{color:#047857;font-weight:800} /* ─── i18n : sélecteur de langue + ajustements RTL ─── */ .lang-picker{ display:inline-flex;gap:4px;align-items:center;flex-shrink:0; font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; } .lang-picker button{ background:transparent;border:1px solid #E2E8F0;border-radius:6px; padding:5px 9px;font-size:11px;font-weight:700;color:#64748B; cursor:pointer;font-family:inherit;line-height:1;white-space:nowrap; transition:background .15s,color .15s,border-color .15s; } .lang-picker button:hover:not(.lang-active){background:#F1F5F9;color:#0F172A} .lang-picker button.lang-active{background:#2D5A60;color:#fff;border-color:#2D5A60} /* Inversion subtile en mode RTL pour l'ordre des boutons du picker */ html[dir="rtl"] .lang-picker{flex-direction:row-reverse} /* Police arabe légèrement plus généreuse pour la lisibilité */ html[lang="ar"] body,html[lang="ar-MA"] body{ font-family:"Cairo","Tajawal","Segoe UI",system-ui,-apple-system,sans-serif; } /* ═══════════════════════════════════════════════════════════════ FAB PASSATION — bouton flottant TOUJOURS VISIBLE Visible UNIQUEMENT lorsqu'un staff est connecté (body.in-app, posé par startApp). Aucune autre condition. Position fixed pour ne dépendre ni de la sidebar (cachée sur mobile) ni du scroll du contenu de page. ═══════════════════════════════════════════════════════════════ */ #fab-passation{ display:none; } body.in-app #fab-passation, body:has(#p-app.on) #fab-passation{ display:inline-flex; align-items:center; gap:8px; position:fixed; right:16px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:90; padding:13px 18px; border-radius:999px; background:linear-gradient(135deg,#0891B2,#0E7490); color:#FFFFFF; border:0; font-family:inherit; font-size:13px; font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow:0 8px 24px rgba(8,145,178,.45),0 2px 6px rgba(0,0,0,.15); transition:transform .15s ease, box-shadow .15s ease; } body.in-app #fab-passation:hover, body:has(#p-app.on) #fab-passation:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(8,145,178,.55),0 4px 10px rgba(0,0,0,.18); } body.in-app #fab-passation:active, body:has(#p-app.on) #fab-passation:active{ transform:translateY(0); } /* Le Directeur ne possède pas de sessions à transférer — on cache la Passation pour son rôle uniquement. Classe `role-director` posée par _routePostLogin/startApp lorsque S.role==='superadmin'. */ body.role-director #fab-passation{ display:none !important; } /* Sur mobile : décalage vertical pour ne PAS recouvrir la bottom-nav (qui fait ~60px + safe-area). Le FAB reste à droite, accessible au pouce. */ @media (max-width:1023px){ body.in-app #fab-passation, body:has(#p-app.on) #fab-passation{ bottom:calc(80px + env(safe-area-inset-bottom,0px)); padding:12px 16px; font-size:12px; } } /* ═══════════════════════════════════════════════════════════════ BI DASHBOARD DIRECTEUR — performance équipe + rétention + alertes Composants CSS-only (pas de Chart.js / pas de SVG dynamique). Rendus par renderAcc lorsque isAdmin === true. Esprit Light Gaming : fond blanc, bordures slate, accent vert émeraude pour CA / cyan pour volume. ═══════════════════════════════════════════════════════════════ */ .bi-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px; } @media (max-width:680px){ .bi-grid{ grid-template-columns:1fr; } } .bi-card{ background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px; padding:14px 16px;box-shadow:0 4px 12px rgba(15,23,42,.05); } .bi-card-h{ font-size:11px;font-weight:800;color:#475569;letter-spacing:.4px; text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center; } .bi-card-h .bi-sub{ font-size:10px;color:#94A3B8;font-weight:600;text-transform:none;letter-spacing:0; } /* Barres horizontales — opérateur perf */ .bi-bar-row{ display:grid;grid-template-columns:90px 1fr 70px; gap:8px;align-items:center;margin-bottom:6px;font-size:11px; } .bi-bar-name{ font-weight:700;color:#0F172A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .bi-bar-track{ height:14px;background:#F1F5F9;border-radius:7px;overflow:hidden;position:relative; } .bi-bar-fill{ height:100%;border-radius:7px;transition:width .6s var(--e-out,cubic-bezier(.4,0,.2,1)); } .bi-bar-fill.ca { background:linear-gradient(90deg,#10B981,#059669); } .bi-bar-fill.vol { background:linear-gradient(90deg,#06B6D4,#0891B2); } .bi-bar-val{ font-weight:800;color:#0F172A;text-align:right;font-variant-numeric:tabular-nums; } .bi-bar-val.ca { color:#059669; } .bi-bar-val.vol { color:#0891B2; } .bi-empty{ font-size:11px;color:#94A3B8;text-align:center;padding:14px 0; } /* Donut rétention — conic-gradient pur CSS · refonte sombre 2026-05-26 : - Arc filled : emerald-500 (sémantique succès, OK pour bord/jauge) - Arc unfilled : slate-800 (visible mais discret sur slate-900) - Disque central : slate-900 (au lieu de blanc) → texte blanc enfin lisible - Label container : forcé en blanc */ .bi-donut-wrap{ display:flex;align-items:center;gap:14px; } .bi-donut{ width:108px;height:108px;border-radius:50%;flex-shrink:0; background:conic-gradient(#10B981 var(--pct,0%),#1E293B 0); position:relative; box-shadow:0 0 0 1px #334155 inset,0 4px 12px rgba(0,0,0,.40); } .bi-donut::after{ content:"";position:absolute;inset:12px;background:#0F172A;border-radius:50%; box-shadow:0 0 0 1px #1E293B inset; } .bi-donut-label{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; z-index:1;font-weight:900;color:#FFFFFF; } .bi-donut-pct{ font-size:22px;line-height:1;color:#FFFFFF; } .bi-donut-sub{ font-size:9px;color:#CBD5E1;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px; } .bi-donut-legend{ flex:1;display:flex;flex-direction:column;gap:6px;font-size:12px; } .bi-donut-legend .ll{ display:flex;align-items:center;gap:8px; } .bi-donut-legend .ll .dot{ width:10px;height:10px;border-radius:50%; } .bi-donut-legend .ll .dot.green{ background:#10B981; } .bi-donut-legend .ll .dot.grey{ background:#CBD5E1; } .bi-donut-legend .ll b{ color:#FFFFFF;font-weight:900;font-size:14px; } /* Refonte 2026-05-26 — blanc pur (était slate-900) */ .bi-donut-legend .ll span{ color:#E2E8F0;font-size:13px;font-weight:600; } /* Refonte 2026-05-26 — slate-200 (était 64748B) */ /* Panel alertes — rouge à gauche, liste discrète */ /* Refonte 2026-05-26 — thème sombre unifié, conteneurs slate-900, texte blanc partout. Sémantique alerte/succès via le BORD coloré + accent sur le titre (rose-400 si alerte / emerald-300 si succès). */ .bi-alert-card{ background:#0F172A;border:1px solid #1E293B;border-left:4px solid #EF4444; border-radius:14px;padding:14px 16px;margin:0 0 14px; box-shadow:0 6px 18px rgba(0,0,0,.40),0 0 0 1px rgba(239,68,68,.10) inset; color:#FFFFFF; } .bi-alert-card.warn{ border-color:#1E293B;border-left-color:#10B981; box-shadow:0 6px 18px rgba(0,0,0,.40),0 0 0 1px rgba(16,185,129,.10) inset; } .bi-alert-h{ font-size:12px;font-weight:900;color:#FB7185;margin-bottom:9px; /* rose-400 — titre alerte */ text-transform:uppercase;letter-spacing:.06em; display:flex;justify-content:space-between;align-items:center; } .bi-alert-h span:last-child{ color:#CBD5E1;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0; } .bi-alert-card.warn .bi-alert-h{ color:#6EE7B7; } /* emerald-300 — succès */ .bi-alert-row{ display:grid;grid-template-columns:60px 1fr auto;gap:8px;align-items:center; padding:8px 0;border-top:1px dashed #334155;font-size:12px; } .bi-alert-row:first-of-type{ border-top:0; } .bi-alert-row .t{ color:#CBD5E1;font-variant-numeric:tabular-nums;font-weight:600; } .bi-alert-row .l{ color:#FFFFFF;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .bi-alert-row .v{ color:#FECACA;font-weight:800;font-variant-numeric:tabular-nums; } /* rouge clair lisible */ .bi-alert-card.warn .bi-alert-row .v{ color:#FCD34D; } /* amber clair lisible */ .bi-alert-empty{ font-size:13px;color:#6EE7B7;font-weight:800;text-align:center; padding:11px 14px;margin-top:4px; background:rgba(6,78,59,.30);border:1px solid rgba(16,185,129,.35);border-radius:10px; } /* ═══════════════════════════════════════════════════════════════ BOTTOM NAV PRO — quick-access mobile (≤1023px) avec badge live Triple sélecteur d'affichage pour compat large : (1) body:has(#p-app.on) — Chrome 105+/Safari 15.4+ (2) body.in-app — fallback JS (toggle au goP) (3) #p-app.on ~ #pro-bottom-nav — fallback CSS pur (sibling) Sans ces fallbacks, les navigateurs anciens (MIUI Browser, Chrome <105 sur Xiaomi Redmi Note 11, etc.) ignorent silencieusement la règle :has() et la barre reste invisible. ═══════════════════════════════════════════════════════════════ */ /* RÈGLE INCONDITIONNELLE — La nav s'affiche dès qu'elle contient des items. AUCUNE dépendance à `body.in-app`, `body:has(...)`, ou `~ combinator`. `_renderProBottomNav` met innerHTML='' tant qu'il n'y a pas de S.role (donc sur la page login la nav est vide → masquée par :empty). Dès qu'un staff est connecté, items injectés → :not(:empty) match → visible. Compatible 100% des navigateurs (`:not(:empty)` est CSS3, supporté dès IE9). */ #pro-bottom-nav{ display:none; } @media (max-width:1023px){ #pro-bottom-nav:not(:empty){ display:flex !important; position:fixed;bottom:0;left:0;right:0;z-index:1000; padding:0 4px env(safe-area-inset-bottom,8px); background:rgba(11,15,26,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(51,65,85,.5); box-shadow:0 -6px 24px rgba(0,0,0,.4); } /* Marge basse sur #p-app : appliquée dès que #p-app a la classe `on`, sans :has() ni body class. */ #p-app.on{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); } /* QA 2026-05-27 — Quand m-srt (Enregistrer Sortie) est ouvert, la bottom-nav (z:1000) recouvrait le bouton Fermer du footer .mdb (.ov a z:500). Symptôme : opérateurs mobiles tapaient dans la nav au lieu du Fermer → modale "ne se ferme pas". On masque la bottom-nav tant qu'une .ov.on est visible (m-srt OR autre modale). */ body:has(.ov.on) #pro-bottom-nav:not(:empty){ display:none !important; } } #pro-bottom-nav .pbn-item{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;min-height:60px; background:transparent;border:0; color:#94A3B8;font-size:10px;font-weight:600; position:relative;cursor:pointer;font-family:inherit; padding:8px 4px; transition:color .15s, background .15s; } #pro-bottom-nav .pbn-item:hover{ color:#F1F5F9; background:rgba(51,65,85,.3); } #pro-bottom-nav .pbn-item.on{ color:#22D3EE; text-shadow:0 0 10px rgba(34,211,238,.5); } #pro-bottom-nav .pbn-ic{ font-size:22px;line-height:1; } #pro-bottom-nav .pbn-lb{ white-space:nowrap;line-height:1.1; } #pro-bottom-nav .pbn-badge{ position:absolute;top:4px;right:calc(50% - 22px); min-width:18px;height:18px;padding:0 5px;border-radius:999px; background:#EF4444;color:#fff; font-size:10px;font-weight:800;line-height:18px;text-align:center; box-shadow:0 0 12px rgba(239,68,68,.7),0 0 0 2px rgba(11,15,26,.95); animation:pbnBadgePulse 1.6s ease-in-out infinite; z-index:1; } @keyframes pbnBadgePulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(239,68,68,.7),0 0 0 2px rgba(11,15,26,.95); } 50%{ transform:scale(1.08); box-shadow:0 0 0 8px rgba(239,68,68,0),0 0 0 2px rgba(11,15,26,.95); } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE MOBILE — Hamburger drawer pour la sidebar pro ═══════════════════════════════════════════════════════════════ */ /* Bouton hamburger — caché en desktop, visible mobile */ .bn-toggle{ display:none; background:rgba(30,41,59,.7); border:1px solid rgba(51,65,85,.6); color:#F1F5F9; font-size:18px;line-height:1; padding:8px 11px;border-radius:10px; cursor:pointer;margin-right:6px; transition:all .15s; flex-shrink:0; } .bn-toggle:hover{ background:rgba(51,65,85,.9); } /* Overlay backdrop — caché par défaut, visible quand le drawer est ouvert */ #bn-overlay{ position:fixed;inset:0;z-index:90; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); opacity:0;pointer-events:none; transition:opacity .25s ease; } body.bn-open #bn-overlay{ opacity:1;pointer-events:auto; } /* Mobile : drawer pour la sidebar pro */ @media (max-width:1023px){ .bn-toggle{ display:inline-flex;align-items:center;justify-content:center; } /* La sidebar pro devient un drawer slide depuis la gauche */ #p-app > .bn{ position:fixed !important; top:0;left:-300px;bottom:0; width:280px;max-width:85vw; z-index:100; flex-direction:column !important; align-items:stretch !important; padding:18px 12px env(safe-area-inset-bottom) !important; gap:6px !important; overflow-y:auto; background:rgba(11,15,26,.97) !important; backdrop-filter:blur(14px); border-right:1px solid rgba(51,65,85,.5) !important; box-shadow:6px 0 32px rgba(0,0,0,.5); transition:left .28s ease; } body.bn-open #p-app > .bn{ left:0; } /* Items en pleine largeur dans le drawer, plus gros tap targets */ #p-app > .bn .ni{ flex:0 0 auto !important; flex-direction:row !important; justify-content:flex-start !important; width:100%;padding:13px 14px !important; font-size:14px !important;font-weight:600 !important; border-radius:10px; min-height:48px; } #p-app > .bn .ni .ic{ font-size:18px !important;margin-right:10px; } /* Le bandeau Fin de service dans la sidebar prend la pleine largeur */ #p-app > .bn #fs-bar{ width:100%;margin-top:auto; } } @media (min-width:1024px){ /* En desktop : drawer comportement neutralisé, sidebar normale via grid */ #p-app > .bn{ position:sticky !important;left:auto !important; } body.bn-open #bn-overlay{ opacity:0;pointer-events:none; } } /* ═══════════════════════════════════════════════════════════════ THÈME LIGHT GAMING / CLEAN E-SPORT Fond clair (slate-50), cartes blanches avec ombres légères, accents néon cyan/emerald pour l'esprit E-sport. Scopé pro + auth. ═══════════════════════════════════════════════════════════════ */ /* Fond global pro + pages auth — gris très clair avec halos très subtils */ body:has(#p-app.on), body:has(#p-auth.on), body:has(#p-login.on){ background:#F8FAFC !important; color:#475569 !important; } body:has(#p-app.on)::before, body:has(#p-auth.on)::before, body:has(#p-login.on)::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:-1; background: radial-gradient(circle at 12% 18%,rgba(6,182,212,.05),transparent 42%), radial-gradient(circle at 88% 82%,rgba(168,85,247,.03),transparent 42%); } /* ─── Header (.tb) — refonte sombre unifiée 2026-06-12 ────────────────── BUG corrigé : ce bloc était resté en thème CLAIR (fond #FFFFFF) alors que la sidebar .bn juste en dessous avait été passée en sombre le 2026-05-26. Sa forte spécificité (body:has(#p-app.on) #p-app .tb + !important = 2 IDs) battait toutes les surcouches dark (v304/v305) → header blanc, texte blanc-sur-blanc illisible. Repassé en bleu nuit, cohérent avec .bn. */ body:has(#p-app.on) #p-app .tb{ background:#0F172A !important; border-bottom:1px solid #1E293B !important; box-shadow:0 1px 3px rgba(0,0,0,.5); } body:has(#p-app.on) #p-app .tb .tb-t, body:has(#p-app.on) #p-app .tb #clk{ color:#F1F5F9 !important; } body:has(#p-app.on) #p-app .tb .tb-s, body:has(#p-app.on) #p-app .tb #tb-s{ color:#94A3B8 !important; } body:has(#p-app.on) #p-app .tb .ib{ background:#1E293B !important; border:1px solid #334155 !important; color:#CBD5E1 !important; } body:has(#p-app.on) #p-app .tb .ib:hover{ background:#334155 !important;color:#FFFFFF !important; } body:has(#p-app.on) #p-app .tb .hdr-logout{ background:#3F1D1D !important; border:1px solid #7F1D1D !important; color:#FCA5A5 !important; } /* ─── Sidebar (.bn) — refonte sombre unifiée 2026-05-26 ───────────────── AVANT : conteneur blanc + items slate-500 + actif cyan glow → texte illisible dès qu'un sous-thème assombrissait le fond. APRÈS : conteneur slate-950, bord slate-900, items slate-300, hover blanc sur fond slate-900/60, actif cyan-400 sur fond slate-900 avec bord-droit cyan néon. Cohérent avec Unified Dark v304. */ body:has(#p-app.on) #p-app .bn{ background:#020617 !important; border-right:1px solid #0F172A !important; box-shadow:1px 0 3px rgba(0,0,0,.55) !important; } body:has(#p-app.on) #p-app .bn .ni{ color:#CBD5E1 !important; -webkit-text-fill-color:#CBD5E1 !important; background:transparent !important; font-weight:600 !important; transition:all .15s; } body:has(#p-app.on) #p-app .bn .ni:hover{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; background:rgba(15,23,42,.60) !important; } body:has(#p-app.on) #p-app .bn .ni.on{ color:#22D3EE !important; -webkit-text-fill-color:#22D3EE !important; background:#0F172A !important; border:1px solid #1E293B !important; border-right:4px solid #22D3EE !important; box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 14px rgba(34,211,238,.18) !important; font-weight:800 !important; } body:has(#p-app.on) #p-app .bn .ni .ic{ opacity:1 !important; filter:none !important; } @media (max-width:1023px){ body:has(#p-app.on) #p-app > .bn{ background:#020617 !important; } body:has(#p-app.on) #p-app > .bn .ni.on{ border-right:0 !important; border-left:4px solid #22D3EE !important; } } /* ─── Cards (.cd, .kc) — refonte sombre GLOBALE 2026-05-26 ─────────── AVANT : ce bloc forçait `bg:#FFFFFF !important` partout → cause racine des "blinding white cards" sur Dashboard, Caisse Op, Rapport, Historique, Validations, Enveloppes, Messages, etc. Tous les overrides per-page tentaient de battre cette règle au cas par cas. APRÈS : la règle de base est elle-même sombre — Unified Dark Mode appliqué au SOURCE. Les pages qui ont besoin d'un styling spécifique conservent leurs overrides per-page (qui n'ont plus à lutter, juste à raffiner). */ body:has(#p-app.on) #p-app .cd, body:has(#p-app.on) #p-app .kc{ background:#0F172A !important; border:1px solid #1E293B !important; color:#F1F5F9 !important; -webkit-text-fill-color:#F1F5F9 !important; box-shadow:0 6px 18px rgba(0,0,0,.40) !important; border-radius:14px !important; } body:has(#p-app.on) #p-app .cd-h{ color:#E2E8F0 !important; -webkit-text-fill-color:#E2E8F0 !important; border-bottom:1px solid #334155 !important; font-weight:900 !important; } body:has(#p-app.on) #p-app .kl{ color:#94A3B8 !important; -webkit-text-fill-color:#94A3B8 !important; } body:has(#p-app.on) #p-app .kv{ color:#1E293B !important; } body:has(#p-app.on) #p-app .kv.g{ color:#059669 !important; } body:has(#p-app.on) #p-app .kv.b{ color:#0891B2 !important; } body:has(#p-app.on) #p-app .kv.r{ color:#DC2626 !important; } body:has(#p-app.on) #p-app .kv.o{ color:#D97706 !important; } /* ─── Buttons — glow néon léger en hover ─── */ body:has(#p-app.on) #p-app .btn.bg{ background:linear-gradient(135deg,#06B6D4 0%,#0891B2 100%) !important; color:#fff !important;border:0 !important; box-shadow:0 4px 14px rgba(6,182,212,.30) !important; transition:all .18s !important; } body:has(#p-app.on) #p-app .btn.bg:hover:not(:disabled){ box-shadow:0 6px 22px rgba(6,182,212,.45) !important; transform:translateY(-1px); } body:has(#p-app.on) #p-app .btn.ba{ background:linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%) !important; color:#fff !important;border:0 !important; box-shadow:0 4px 14px rgba(139,92,246,.30) !important; } body:has(#p-app.on) #p-app .btn.ba:hover:not(:disabled){ box-shadow:0 6px 22px rgba(139,92,246,.45) !important; transform:translateY(-1px); } body:has(#p-app.on) #p-app .btn.bgh{ background:#F1F5F9 !important; color:#1E293B !important; border:1px solid #E2E8F0 !important; } body:has(#p-app.on) #p-app .btn.bgh:hover:not(:disabled){ background:#E2E8F0 !important; border-color:#CBD5E1 !important; } body:has(#p-app.on) #p-app .btn.br{ background:linear-gradient(135deg,#EF4444 0%,#DC2626 100%) !important; color:#fff !important;border:0 !important; box-shadow:0 4px 14px rgba(239,68,68,.30) !important; } body:has(#p-app.on) #p-app .btn.bo{ background:#FFFBEB !important; color:#92400E !important; border:1px solid #FCD34D !important; } body:has(#p-app.on) #p-app .btn.bo:hover:not(:disabled){ background:#FEF3C7 !important; } /* ─── Inputs ─── */ body:has(#p-app.on) #p-app input.fi, body:has(#p-app.on) #p-app select.fi, body:has(#p-app.on) #p-app textarea.fta{ background:#F8FAFC !important; border:1px solid #E2E8F0 !important; color:#0F172A !important; } body:has(#p-app.on) #p-app input.fi:focus, body:has(#p-app.on) #p-app select.fi:focus, body:has(#p-app.on) #p-app textarea.fta:focus{ background:#FFFFFF !important; border-color:#06B6D4 !important; box-shadow:0 0 0 3px rgba(6,182,212,.15) !important; outline:0; } body:has(#p-app.on) #p-app .fl{ color:#94A3B8 !important; font-weight:600 } /* ─── Modals ─── */ body:has(#p-app.on) .ov{ background:rgba(15,23,42,.45) !important; backdrop-filter:blur(4px); } body:has(#p-app.on) .md{ background:#FFFFFF !important; border:1px solid #E2E8F0 !important; color:#1E293B !important; box-shadow:0 24px 64px rgba(15,23,42,.20) !important; } body:has(#p-app.on) .mdt{ color:#1E293B !important; } /* Amount box modal Sortie — refonte sombre 2026-05-26 AVANT : fond #F8FAFC (gris quasi-blanc) avec labels slate-500 → invisible après dark catch-all. APRÈS : slate-900 + bord slate-800 + texte clair. */ body:has(#p-app.on) .amt-box{ background:#0F172A !important; border:1px solid #1E293B !important; border-radius:12px !important; padding:14px 16px !important; margin:14px 0 !important; } body:has(#p-app.on) .amt-lbl{ color:#CBD5E1 !important; -webkit-text-fill-color:#CBD5E1 !important; font-weight:600 !important; } body:has(#p-app.on) .amt-v{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } body:has(#p-app.on) .amt-v.sub{ color:#CBD5E1 !important; -webkit-text-fill-color:#CBD5E1 !important; font-weight:500 !important; } body:has(#p-app.on) #m-tarif{ color:#34D399 !important; -webkit-text-fill-color:#34D399 !important; font-weight:900 !important; } /* Le bloc m-enc input + son label */ body:has(#p-app.on) .amt-box .fl{ color:#FCD34D !important; -webkit-text-fill-color:#FCD34D !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.06em !important; font-size:12px !important; margin-bottom:6px !important; display:block !important; } body:has(#p-app.on) #m-enc{ background:#020617 !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; border:2px solid #334155 !important; font-weight:900 !important; color-scheme:dark !important; } body:has(#p-app.on) #m-enc:focus{ border-color:#22D3EE !important; box-shadow:0 0 0 3px rgba(34,211,238,.20) !important; } body:has(#p-app.on) #m-enc-help{ color:#94A3B8 !important; -webkit-text-fill-color:#94A3B8 !important; font-style:italic !important; } /* Bouton Effacer — variante danger discrète sur fond sombre */ body:has(#p-app.on) #m-enc-clear{ background:rgba(127,29,29,.45) !important; border:1px solid #EF4444 !important; color:#FECACA !important; -webkit-text-fill-color:#FECACA !important; } /* ─── Tables Clients / Équipe — refonte sombre 2026-05-26 ──────────── Conteneur slate-900, header slate-950 uppercase, zébrage alternant slate-900 / slate-950, hover slate-800 semi-transparent. Texte courant en blanc (cellule) avec sous-info en slate-400. */ body:has(#p-app.on) #p-app .mbrs-table-wrap{ background:#0F172A !important; border:1px solid #1E293B !important; box-shadow:0 6px 18px rgba(0,0,0,.40) !important; } body:has(#p-app.on) #p-app .mbrs-table{ background:transparent !important; } body:has(#p-app.on) #p-app .mbrs-table thead th{ background:#020617 !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.10em !important; font-size:11px !important; border-bottom:1px solid #1E293B !important; padding:16px 16px !important; text-align:left !important; } body:has(#p-app.on) #p-app .mbrs-table tbody td{ border-bottom:1px solid #1E293B !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; padding:14px 16px !important; } /* Zébrage alternant — slate-900 pair / slate-950 impair */ body:has(#p-app.on) #p-app .mbrs-table tbody tr:nth-child(even) td{ background:#0F172A !important; } body:has(#p-app.on) #p-app .mbrs-table tbody tr:nth-child(odd) td{ background:#020617 !important; } body:has(#p-app.on) #p-app .mbrs-table tbody tr:hover td{ background:rgba(30,41,59,.85) !important; /* slate-800/85 */ transition:background .15s ease-out; } body:has(#p-app.on) #p-app .mbrs-table tbody tr:last-child td{ border-bottom:0 !important; } body:has(#p-app.on) #p-app .mbrs-stat{ background:#FFFFFF !important; border:1px solid #E2E8F0 !important; box-shadow:0 1px 3px rgba(15,23,42,.04) !important; } body:has(#p-app.on) #p-app .mbrs-stat-lbl{ color:#64748B !important; } body:has(#p-app.on) #p-app .mbrs-stat-val{ color:#0F172A !important; } /* Refonte 2026-05-26 — barre recherche / filtre en thème sombre uniforme. Conteneur slate-900, inputs slate-800, placeholder slate-400 lisible, dropdown options en color-scheme dark pour le natif. */ body:has(#p-app.on) #p-app .mbrs-bar{ background:#0F172A !important; border:1px solid #1E293B !important; padding:10px 12px !important; border-radius:12px !important; } body:has(#p-app.on) #mbrs-search, body:has(#p-app.on) #mbrs-filter{ background:#1E293B !important; border:1px solid #334155 !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; color-scheme:dark; font-weight:600 !important; } body:has(#p-app.on) #mbrs-search::placeholder{ color:#94A3B8 !important; -webkit-text-fill-color:#94A3B8 !important; opacity:1 !important; font-weight:500 !important; } body:has(#p-app.on) #mbrs-search:focus, body:has(#p-app.on) #mbrs-filter:focus{ border-color:#22D3EE !important; outline:none !important; box-shadow:0 0 0 3px rgba(34,211,238,.20) !important; } /*