/* ev-surcouches.css : surcouches (ancien ) — genere le 2026-09-03T21:40:22.440Z Concatenation, dans l'ordre exact du document, de 15 sources. Ne pas editer a la main sans relancer le harnais de non-regression. */ /* =============== mb-dashboard-css =============== */ /* ═══ Espace Client — Dashboard SaaS : barre latérale (gauche) + contenu (droite) ═══ */ /* 1. CONTENEUR PRINCIPAL — Flexbox strict. Le !important neutralise une règle :has() globale (#mb-p-app.on > div:has(.pg.on)) qui forçait flex-direction:column ici. */ #mb-p-app{max-width:none !important} #mb-p-app .mb-shell{ display:flex !important;flex-direction:row !important; width:100%;min-height:100dvh !important; background:#F8FAFC;overflow-x:hidden; } /* 2. BARRE LATÉRALE — collée à gauche, pleine hauteur, fond blanc */ .mb-sidebar{ flex:0 0 260px;width:260px;min-width:260px; position:sticky;top:0;height:100dvh; background:#fff;border-right:1px solid #E2E8F0; display:flex;flex-direction:column;padding:24px 16px;gap:4px;overflow-y:auto; } .mb-brand{display:flex;align-items:center;gap:8px;color:#2D5A60;font-size:15px;font-weight:800;padding:2px 8px 16px;letter-spacing:-.01em} .mb-user{display:flex;align-items:center;gap:11px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:12px;margin-bottom:14px} .mb-user .av{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#2D5A60;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px} .mb-user-meta{min-width:0} .mb-user-nm{color:#1F2937;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mb-user-bal{color:#64748B;font-size:11px;font-weight:600;margin-top:1px} .mb-nav{display:flex;flex-direction:column;gap:3px} .mb-navitem{position:relative;display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;border-radius:10px;padding:11px 12px;font-family:inherit;font-size:13px;font-weight:600;color:#475569;cursor:pointer;text-align:left;transition:background .15s,color .15s} .mb-navitem:hover{background:#F8FAFC;color:#2D5A60} .mb-navitem.on{background:#2D5A60;color:#fff;font-weight:800} .mb-ni-ic{font-size:16px;flex-shrink:0;line-height:1} .mb-navitem .nbdg{margin-left:auto;width:9px;height:9px;border-radius:50%;background:transparent} .mb-navitem .nbdg.on{background:#EF4444} .mb-foot{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid #E2E8F0} .mb-navitem.mb-sub{font-size:11.5px;color:#94A3B8} .mb-navitem.mb-sub:hover{color:#2D5A60} /* 3. ZONE DE CONTENU — prend toute la largeur restante */ .mb-main{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#F8FAFC} /* 4. ZONE DE CONTENU + CARTES — pleine largeur garantie à chaque niveau */ #mb-p-app .mb-main{flex:1 1 0% !important;min-width:0 !important} #mb-p-app #pg-home,#mb-p-app #s-home{width:100% !important;max-width:none !important} #mb-p-app #s-home{align-items:stretch !important;padding:0 !important;margin:0 !important} .mb-home{width:100% !important;box-sizing:border-box;display:flex;flex-direction:column;gap:24px;background:#F8FAFC;min-height:100%} /* Ligne des 3 cartes : 1 colonne mobile, 3 colonnes paysage dès 768px, hauteur naturelle */ .mb-cards{display:grid !important;grid-template-columns:1fr;gap:20px;width:100% !important;align-items:start !important} @media (min-width:768px){.mb-cards{grid-template-columns:repeat(3,1fr) !important}} /* Mobile : la barre latérale devient un bandeau horizontal en haut */ @media(max-width:719px){ #mb-p-app .mb-shell{flex-direction:column !important} .mb-sidebar{flex:0 0 auto;width:auto;min-width:0;height:auto;position:static;border-right:0;border-bottom:1px solid #E2E8F0;padding:12px;gap:8px;overflow:visible} .mb-brand{padding:2px 4px 8px;font-size:14px} .mb-user{margin-bottom:9px} .mb-nav{flex-direction:row;gap:5px} .mb-navitem{flex:1;flex-direction:column;gap:3px;padding:8px 3px;font-size:10px;justify-content:center;text-align:center} .mb-ni-ic{font-size:18px} .mb-navitem .nbdg{margin-left:0;position:absolute;top:5px;left:calc(50% + 12px)} .mb-foot{margin-top:9px;flex-direction:row;gap:6px;padding-top:9px} .mb-foot .mb-navitem{font-size:9.5px} } /* =============== bloc-en-ligne =============== */ #ev-msrt-killswitch:checked ~ #m-srt{ display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* =============== bloc-en-ligne =============== */ /* Refonte sombre 2026-05-26 — tile coupure thème dark, contraste max : le qty central est blanc pur sur slate-950 (le bug précédent : noir sur fond clair → noir sur fond sombre après catch-all). */ .am-coup-tile{background:#0F172A;border:2px solid #1E293B;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:stretch;gap:6px;transition:border-color .12s,box-shadow .12s,background .12s;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} .am-coup-tile img{display:block;object-fit:contain;pointer-events:none;margin:0 auto} .am-coup-tile .am-coup-emo{line-height:1;display:flex;align-items:center;justify-content:center;pointer-events:none;margin:0 auto} .am-coup-tile .am-coup-lbl{font-size:12px;font-weight:900;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;line-height:1;letter-spacing:.02em;text-align:center;margin-top:4px} .am-coup-tile .am-coup-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px;background:#020617;border:1px solid #334155;border-radius:10px;overflow:hidden} .am-coup-tile .am-coup-btn{background:transparent;border:0;font-weight:900;font-size:24px;width:42px;height:42px;cursor:pointer;line-height:1;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .12s,transform .08s} .am-coup-tile .am-coup-btn.am-coup-plus{background:rgba(6,78,59,.45);color:#34D399 !important;-webkit-text-fill-color:#34D399 !important;border-right:1px solid #334155;border-left:1px solid #334155} .am-coup-tile .am-coup-btn.am-coup-plus:hover{background:rgba(6,78,59,.70)} .am-coup-tile .am-coup-btn.am-coup-minus{background:rgba(127,29,29,.45);color:#FB7185 !important;-webkit-text-fill-color:#FB7185 !important} .am-coup-tile .am-coup-btn.am-coup-minus:hover{background:rgba(127,29,29,.70)} .am-coup-tile .am-coup-btn:active{transform:scale(.90)} /* INPUT central — le chiffre saisi entre [-] et [+] : BLANC PUR. */ .am-coup-tile .am-coup-qty{flex:1;text-align:center;border:0;padding:8px 0;font-weight:900;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;background:#020617 !important;font-size:22px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;min-width:0;cursor:text;color-scheme:dark} .am-coup-tile .am-coup-qty::-webkit-outer-spin-button, .am-coup-tile .am-coup-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .am-coup-tile .am-coup-qty:focus{outline:none;box-shadow:inset 0 0 0 2px #22D3EE;color:#22D3EE !important;-webkit-text-fill-color:#22D3EE !important;background:#020617 !important} .am-coup-tile.am-has-qty{border-color:#10B981 !important;box-shadow:0 0 0 1px #10B981 inset,0 4px 12px rgba(16,185,129,.18)} .am-coup-tile.am-side-out.am-has-qty{border-color:#22D3EE !important;box-shadow:0 0 0 1px #22D3EE inset,0 4px 12px rgba(34,211,238,.18)} /* Compteur visible XL — affiche la quantité sélectionnée sous le label. Backup d'affichage : reste lisible même si l'input number est crushé. */ .am-coup-tile .am-coup-counter{ text-align:center;font-weight:900;font-size:18px;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:.5px; padding:6px 8px;border-radius:8px;background:#1E293B;color:#CBD5E1 !important; -webkit-text-fill-color:#CBD5E1 !important; border:2px solid transparent;margin-top:2px; transition:background .12s,color .12s,border-color .12s,transform .08s; } .am-coup-tile.am-side-in .am-coup-counter.am-cnt-on{ background:rgba(6,78,59,.65) !important;color:#34D399 !important;-webkit-text-fill-color:#34D399 !important;border-color:#10B981;transform:scale(1.05); } .am-coup-tile.am-side-out .am-coup-counter.am-cnt-on{ background:rgba(8,47,73,.65) !important;color:#22D3EE !important;-webkit-text-fill-color:#22D3EE !important;border-color:#22D3EE;transform:scale(1.05); } /* MODAL m-srt — Architecture flexbox stricte 2026-05-26 v3 (fix iOS Safari backdrop-filter ancestor bug). ───────────────────────────────────────────────────── STRUCTURE : .ov → flex container (centrage) .md → flex column, overflow:hidden .md-body → flex:1 1 0, overflow-y:auto (SCROLL) ...content... .mdb → flex-shrink:0 (FOOTER FIXE EN BAS) ───────────────────────────────────────────────────── Le `.md-body` est injecté par JS `_ensureModalScrollWrapper` au moment où la modale s'ouvre (om(id)). Idempotent. ───────────────────────────────────────────────────── Pourquoi cette architecture précise ? Sur iOS Safari, `position:fixed/sticky` ne fonctionne PAS dans un parent ayant `backdrop-filter` (cf. CSS spec : backdrop-filter crée un nouveau containing block pour les fixed children). D'où l'approche pure flexbox : aucun fixed/sticky requis. */ /* OVERLAY (.ov) — flex container, centrage moderne. Le backdrop-filter est CONSERVÉ sur desktop mais SUPPRIMÉ sur mobile (iOS Safari bug — cf. commentaire en tête). 2026-05-26 — CAUSE RACINE FIX : ajout `.on` au sélecteur ID. SANS `.on`, `#m-srt{display:flex !important}` (spécificité 110) battait `.ov.on{display:flex}` (spécificité 20) ET surtout `.ov{display:none}` (spécificité 10) — la modale restait visible même après `classList.remove('on')`. Le sélecteur `#m-srt.on` (spécificité 110) garantit que ces règles ne s'appliquent QUE quand `.on` est présent. */ #m-srt.on{ padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom) !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* MODALE (.md) — flex column avec overflow:HIDDEN. Aucun scroll ici — c'est `.md-body` qui scrolle. */ #m-srt > .md{ max-width:1100px !important; width:96vw !important; max-height:90vh !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; /* CRUCIAL */ padding:0 !important; /* le padding passe sur md-body */ } /* WRAPPER SCROLLABLE (.md-body) injecté par _ensureModalScrollWrapper. flex:1 1 0 + overflow-y:auto + min-height:0 → seul élément qui scrolle. padding-bottom > hauteur du Smart Summary + Footer pour réserver l'espace visible (sinon le dernier contenu se cache derrière). */ #m-srt > .md > .md-body{ flex:1 1 0 !important; min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; padding:24px 28px 16px !important; scrollbar-gutter:stable !important; } /* FOOTER (.mdb) — flex-shrink:0, reste TOUJOURS visible en bas. */ #m-srt > .md > .mdb{ flex-shrink:0 !important; display:flex !important; gap:10px !important; padding:14px 28px !important; background:#0F172A !important; border-top:1px solid #334155 !important; box-shadow:0 -8px 18px rgba(0,0,0,.40) !important; margin:0 !important; } /* MOBILE — modale plein écran, mêmes principes. Le backdrop-filter de `.ov` est neutralisé localement pour éviter le bug iOS Safari. Fallback 100vh : iOS < 15.4 ne supporte pas dvh, on déclare 100vh AVANT 100dvh pour que le moteur retienne 100dvh si supporté, sinon 100vh. */ @media (max-width:900px){ /* Idem ci-dessus : `.on` requis pour éviter d'imposer background/padding sur la modale fermée. */ #m-srt.on{ padding:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(2,6,23,.92) !important; } #m-srt > .md{ max-width:100vw !important; width:100vw !important; height:100vh !important; height:100dvh !important; max-height:100vh !important; max-height:100dvh !important; border-radius:0 !important; } #m-srt > .md > .md-body{ padding:env(safe-area-inset-top) 14px 16px !important; } #m-srt > .md > .mdb{ padding:14px calc(env(safe-area-inset-right) + 14px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 14px) !important; } } @media (min-width:901px) and (max-width:1023px){ #m-srt > .md{ max-height:94vh !important; } } /* Smart Summary (#m-srt-smart-summary) — DERNIER enfant du md-body, reste visible en bas du scroll (sticky dans md-body). C'est OK car md-body est `overflow:auto` SANS backdrop-filter ancestor. */ #m-srt > .md > .md-body > #m-srt-smart-summary{ position:sticky !important; bottom:-16px !important; /* compense padding-bottom */ background:#0F172A !important; z-index:5 !important; margin:14px -28px -16px !important; padding:10px 28px 16px !important; border-top:1px dashed #334155 !important; box-shadow:0 -6px 14px rgba(0,0,0,.30) !important; } @media (max-width:900px){ #m-srt > .md > .md-body > #m-srt-smart-summary{ margin:14px -14px -16px !important; padding:10px 14px 16px !important; } } /* FALLBACK FORCÉ 2026-05-26 v306b — mode "scroll direct + sticky footer". Activé via `data-mdfallback="1"` posé par le JS sur m-srt à chaque ouverture (signalement Directeur : expansion #am-panel poussait les boutons hors écran sur desktop ET mobile). - `.md` : seul scroll container, max-height:90vh / 100dvh. - `.mdb` : position:sticky bottom, toujours visible. - `.md-body` (s'il existe encore via wrapper) : neutralisé pour éviter le double-scroll (overflow:visible, flex inactive). */ #m-srt > .md[data-mdfallback="1"]{ overflow-y:auto !important; overflow-x:hidden !important; padding:24px 28px 0 !important; display:block !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; } #m-srt > .md[data-mdfallback="1"] > .md-body{ overflow:visible !important; overflow-y:visible !important; flex:none !important; min-height:0 !important; padding:0 !important; display:block !important; } /* Smart summary sticky : compatible avec scroll sur .md */ #m-srt > .md[data-mdfallback="1"] #m-srt-smart-summary{ position:sticky !important; bottom:60px !important; /* au-dessus du footer sticky */ background:#0F172A !important; z-index:5 !important; margin:14px -28px 0 !important; padding:10px 28px !important; border-top:1px dashed #334155 !important; } #m-srt > .md[data-mdfallback="1"] > .mdb{ position:sticky !important; bottom:0 !important; left:0 !important; right:0 !important; background:#0F172A !important; border-top:1px solid #334155 !important; box-shadow:0 -8px 18px rgba(0,0,0,.40) !important; margin:14px -28px 0 !important; padding:14px 28px calc(env(safe-area-inset-bottom) + 14px) !important; z-index:10 !important; } @media (max-width:900px){ #m-srt > .md[data-mdfallback="1"]{ padding:env(safe-area-inset-top) 14px 0 !important; } #m-srt > .md[data-mdfallback="1"] #m-srt-smart-summary{ margin:14px -14px 0 !important; padding:10px 14px !important; } #m-srt > .md[data-mdfallback="1"] > .mdb{ margin:14px -14px 0 !important; padding:14px 14px calc(env(safe-area-inset-bottom) + 14px) !important; } } /* =============== bloc-en-ligne =============== */ /* 2026-05-26 — Texte blanc forcé sur le bouton validate dans TOUS les états (disabled gris, error rose, success emerald) — résout le bug « je ne vois rien » sur fond rouge/sombre. */ .am-validate-btn{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; box-shadow:none; } .am-validate-btn[disabled]{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } .am-validate-btn.am-validate-ok{background:#16A34A !important;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;cursor:pointer !important;box-shadow:0 10px 26px rgba(22,163,74,.42),0 3px 9px rgba(22,163,74,.26) !important} .am-validate-btn.am-validate-ok:hover{background:#15803D !important;box-shadow:0 12px 30px rgba(21,128,61,.46),0 4px 11px rgba(21,128,61,.28) !important} .am-validate-btn.am-validate-ok:active{transform:scale(.985)} /* Bouton Encaisser bas modale (#b-csrt) — texte blanc forcé même en disabled */ #b-csrt, #b-csrt:disabled, #b-csrt[disabled]{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } /* =============== ev-scroll-unlock-v252 =============== */ html, body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; } #app, #mb-p-app, #mb-app, #mode-membre, #mode-admin { height: auto !important; min-height: 100dvh !important; } /* =============== ev-gaming-dark-v280 =============== */ /* ─── 1 · ROOT TOKENS — Gaming Dark ──────────────────────────────── */ :root, html:not([data-theme="light"]) { --c0:#0A0E17 !important; --c1:#0F1623 !important; --c2:#131C2E !important; --c3:#1B2740 !important; --card:#0F1623 !important; --card-2:#131C2E !important; --bdr:#1E2A44 !important; --bdr2:#172238 !important; --bdr3:#2B3A5A !important; --acc:#22D3EE !important; /* neon cyan */ --acc-2:#67E8F9 !important; --acc-ink:#04141C !important; --acc-vio:#A855F7 !important; /* neon violet */ --acc-vio-2:#C084FC !important; --grn:#10F0A1 !important; --grn-2:#34F4B4 !important; --grn-ink:#022114 !important; --red:#FF3B6B !important; --red-2:#FF6B8E !important; --org:#FBBF24 !important; --org-2:#FCD34D !important; --blu:#22D3EE !important; --gn:#10F0A1 !important; --rd:#FF3B6B !important; --or:#FBBF24 !important; --dr:#B91C1C !important; --tx:#F1F5F9 !important; --tx2:#94A3B8 !important; --tx3:#64748B !important; --r:14px !important; --r2:11px !important; --r3:8px !important; --r-pill:999px !important; --sh1:0 1px 2px rgba(0,0,0,.6),0 0 0 1px var(--bdr) !important; --sh2:0 6px 18px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.6) !important; --sh3:0 24px 60px -16px rgba(0,0,0,.85),0 8px 24px rgba(0,0,0,.5) !important; --sh-glow-a:0 0 0 1px rgba(34,211,238,.35),0 0 18px -2px rgba(34,211,238,.45) !important; --sh-glow-g:0 0 0 1px rgba(16,240,161,.35),0 0 18px -2px rgba(16,240,161,.45) !important; --sh-glow-v:0 0 0 1px rgba(168,85,247,.35),0 0 18px -2px rgba(168,85,247,.45) !important; --sh-inset-hl:inset 0 1px 0 rgba(255,255,255,.08) !important; --ring:0 0 0 3px rgba(34,211,238,.30),0 0 0 1px #22D3EE !important; --grad-brand:linear-gradient(135deg,#22D3EE 0%,#A855F7 100%) !important; --grad-brand-soft:linear-gradient(135deg,rgba(34,211,238,.20),rgba(168,85,247,.18)) !important; --grad-warm:linear-gradient(135deg,#FBBF24,#FF3B6B) !important; --grad-text:linear-gradient(135deg,#F1F5F9,#22D3EE) !important; --grad-text-br:linear-gradient(135deg,#22D3EE,#A855F7) !important; } /* Neutralise le filet "light" éventuel — toute valeur data-theme=light appliquée par erreur retombe immédiatement sur la palette dark. */ html[data-theme="light"], html[data-theme="light"] body { background:#0A0E17 !important; color:#F1F5F9 !important; } /* ─── 2 · GLOBAL BACKGROUND ─────────────────────────────────────── */ html, body { background:#0A0E17 !important; color:#F1F5F9 !important; font-family:"Inter","Cairo","Segoe UI",system-ui,-apple-system,Roboto,sans-serif !important; font-size:15px !important; font-weight:500 !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } html::before { content:"" !important; position:fixed !important; inset:0 !important; z-index:-2 !important; pointer-events:none !important; background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(34,211,238,.10), transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(168,85,247,.10), transparent 55%), radial-gradient(ellipse 50% 40% at 0% 80%, rgba(16,240,161,.06), transparent 55%), #0A0E17 !important; } body::before, body::after { display:none !important; } /* ─── 3 · SHELL ─────────────────────────────────────────────────── */ #app, #mode-admin, #mode-membre { background:transparent !important; } .pg { background:transparent !important; } /* ─── 4 · TOP BAR ───────────────────────────────────────────────── */ .tb { background:linear-gradient(180deg,rgba(15,22,35,.92),rgba(10,14,23,.92)) !important; border-bottom:1px solid #1E2A44 !important; backdrop-filter:blur(14px) saturate(140%) !important; -webkit-backdrop-filter:blur(14px) saturate(140%) !important; padding:10px 16px !important; min-height:56px !important; } .tb-t { color:#F1F5F9 !important; font-size:17px !important; font-weight:900 !important; letter-spacing:.2px !important; } .tb-s { color:#94A3B8 !important; font-size:11px !important; font-weight:600 !important; } .tbl, .tbr { color:#F1F5F9 !important; } .tbr .ib, .tb .ib { background:rgba(255,255,255,.04) !important; border:1px solid #1E2A44 !important; color:#E2E8F0 !important; border-radius:9px !important; padding:6px 10px !important; transition:background .15s,border-color .15s,color .15s !important; } .tbr .ib:hover, .tb .ib:hover { background:rgba(34,211,238,.10) !important; border-color:#22D3EE !important; color:#22D3EE !important; } .hdr-logout { background:rgba(255,59,107,.10) !important; border-color:rgba(255,59,107,.32) !important; color:#FF6B8E !important; } .hdr-logout:hover { background:rgba(255,59,107,.18) !important; color:#FFFFFF !important; } #clk { color:#22D3EE !important; font-weight:800 !important; font-variant-numeric:tabular-nums; font-size:14px !important; letter-spacing:.5px; } /* Burger menu mobile */ .bn-toggle { background:rgba(34,211,238,.10) !important; border:1px solid rgba(34,211,238,.32) !important; color:#22D3EE !important; } .bn-toggle:hover { background:rgba(34,211,238,.18) !important; } /* Langue picker */ .lang-picker button { background:transparent !important; border:1px solid #1E2A44 !important; color:#94A3B8 !important; font-weight:700 !important; } .lang-picker button:hover:not(.lang-active) { background:rgba(34,211,238,.10) !important; color:#E2E8F0 !important; } .lang-picker button.lang-active { background:#22D3EE !important; color:#04141C !important; border-color:#22D3EE !important; box-shadow:0 0 12px -2px rgba(34,211,238,.55) !important; } /* ─── 5 · SIDEBAR ───────────────────────────────────────────────── */ .bn, #bn { background:linear-gradient(180deg,#0F1623,#0A0E17) !important; border-right:1px solid #1E2A44 !important; padding:12px 10px !important; gap:4px !important; } .bn .ni, #bn .ni, .ni { background:transparent !important; border:1px solid transparent !important; color:#CBD5E1 !important; font-size:14px !important; font-weight:700 !important; padding:11px 12px !important; border-radius:10px !important; letter-spacing:.1px !important; transition:background .15s,border-color .15s,color .15s,transform .15s !important; display:flex !important; align-items:center; gap:10px; } .bn .ni .ic, #bn .ni .ic, .ni .ic { font-size:17px !important; filter:drop-shadow(0 0 6px rgba(34,211,238,.0)); transition:filter .2s; } .bn .ni:hover, #bn .ni:hover, .ni:hover { background:rgba(34,211,238,.06) !important; border-color:rgba(34,211,238,.18) !important; color:#F1F5F9 !important; transform:translateX(2px); } .bn .ni.on, #bn .ni.on, .ni.on { background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.14)) !important; border-color:rgba(34,211,238,.45) !important; color:#FFFFFF !important; box-shadow:inset 0 0 0 1px rgba(34,211,238,.20),0 0 16px -4px rgba(34,211,238,.40) !important; } .bn .ni.on .ic, #bn .ni.on .ic, .ni.on .ic { filter:drop-shadow(0 0 6px rgba(34,211,238,.55)); } .nbdg { background:#FF3B6B !important; color:#FFFFFF !important; border-radius:999px; font-size:10px; font-weight:900; padding:1px 6px; margin-left:auto; box-shadow:0 0 10px -2px rgba(255,59,107,.6); } /* Bouton spécifique « Transférer mes clients » */ #ni-passation, .ni.ni-action { background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(34,211,238,.08)) !important; border:1px solid rgba(168,85,247,.40) !important; color:#E9D5FF !important; margin-top:8px !important; width:100% !important; font-weight:800 !important; } #ni-passation:hover, .ni.ni-action:hover { background:linear-gradient(135deg,rgba(168,85,247,.28),rgba(34,211,238,.18)) !important; border-color:#A855F7 !important; color:#FFFFFF !important; box-shadow:0 0 16px -4px rgba(168,85,247,.5) !important; } /* Widget Fin de service en sidebar */ #fs-bar { background:linear-gradient(180deg,#131C2E,#0F1623) !important; border:1px solid #1E2A44 !important; border-radius:12px !important; padding:12px !important; margin-top:10px !important; color:#E2E8F0 !important; font-size:12px !important; } .fs-ttl { color:#94A3B8 !important; font-weight:800 !important; letter-spacing:.5px; text-transform:uppercase; font-size:10px !important; margin-bottom:6px !important; } .fs-seg { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed rgba(255,255,255,.06); font-size:12px !important; } .fs-seg:last-child { border-bottom:0 !important; } .fs-lbl { color:#94A3B8 !important; } .fs-seg b { color:#22D3EE !important; font-variant-numeric:tabular-nums; font-weight:800; } .fs-total { border-top:1px solid #1E2A44; margin-top:4px; padding-top:8px !important; } .fs-total b { color:#10F0A1 !important; font-size:14px !important; } #b-dep-side { background:linear-gradient(135deg,#FF3B6B,#B91C1C) !important; border:0 !important; color:#FFFFFF !important; box-shadow:0 4px 14px -2px rgba(255,59,107,.45) !important; } /* ─── 6 · CARDS ─────────────────────────────────────────────────── */ .cd, .acard, .bi-card, .ns-step1, .ns-step2, .ns-step3, .tbd-card, .kpi-card, .ev-card { background:#0F1623 !important; border:1px solid #1E2A44 !important; border-radius:14px !important; padding:16px !important; box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04) !important; color:#E2E8F0 !important; } .cd .cd-h, .cd-h, .ev-card-h, .kpi-card-h, .bi-card-h, .tbd-card-h, .acard-h { color:#94A3B8 !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.6px !important; text-transform:uppercase !important; margin-bottom:10px !important; } .kv, .ev-kpi-val, .kpi-val, .tbd-kpi, .tbd-val { color:#22D3EE !important; font-size:30px !important; font-weight:900 !important; letter-spacing:-.5px !important; font-variant-numeric:tabular-nums !important; background:none !important; -webkit-text-fill-color:initial !important; background-clip:initial !important; } .tbd-card .tbd-val { color:#10F0A1 !important; } .tbd-card.is-hier .tbd-val { color:#A855F7 !important; } .tbd-card.is-mois .tbd-val { color:#FBBF24 !important; } .tbd-card.is-sessions .tbd-val { color:#22D3EE !important; } .scrl { gap:14px !important; padding:14px !important; } /* ─── 7 · BUTTONS ───────────────────────────────────────────────── */ .btn { font-family:inherit !important; font-weight:800 !important; letter-spacing:.2px !important; border-radius:11px !important; padding:11px 16px !important; font-size:14px !important; min-height:42px !important; transition:transform .12s,box-shadow .15s,background .15s,border-color .15s,color .15s !important; cursor:pointer !important; } .btn:hover { transform:translateY(-1px); } .btn:active { transform:translateY(0); } .btn:disabled { opacity:.5 !important; cursor:not-allowed !important; transform:none !important; } .btn.bg, .btn.ba, .btn.b-primary, button.bg, button.ba { background:linear-gradient(135deg,#22D3EE,#0891B2) !important; color:#04141C !important; border:0 !important; box-shadow:0 6px 18px -4px rgba(34,211,238,.55),inset 0 1px 0 rgba(255,255,255,.25) !important; } .btn.bg:hover, .btn.ba:hover { box-shadow:0 10px 24px -4px rgba(34,211,238,.7),inset 0 1px 0 rgba(255,255,255,.3) !important; } .btn.bgh, button.bgh { background:rgba(255,255,255,.04) !important; color:#E2E8F0 !important; border:1px solid #1E2A44 !important; box-shadow:none !important; } .btn.bgh:hover { background:rgba(34,211,238,.10) !important; border-color:#22D3EE !important; color:#22D3EE !important; } .btn.b-success, .btn.bsucc { background:linear-gradient(135deg,#10F0A1,#059669) !important; color:#04141C !important; border:0 !important; box-shadow:0 6px 18px -4px rgba(16,240,161,.55) !important; } .btn.b-danger, .btn.bdanger { background:linear-gradient(135deg,#FF3B6B,#B91C1C) !important; color:#FFFFFF !important; border:0 !important; box-shadow:0 6px 18px -4px rgba(255,59,107,.55) !important; } /* ─── 8 · FORM CONTROLS ─────────────────────────────────────────── */ .fi, .fta, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="search"], input[type="time"], select, textarea { background:#0A0E17 !important; color:#F1F5F9 !important; border:1px solid #1E2A44 !important; border-radius:10px !important; padding:11px 13px !important; font-size:14px !important; font-family:inherit !important; transition:border-color .15s,box-shadow .15s,background .15s !important; } .fi:focus, .fta:focus, input:focus, select:focus, textarea:focus { outline:none !important; border-color:#22D3EE !important; background:#0F1623 !important; box-shadow:0 0 0 3px rgba(34,211,238,.18) !important; } .fl, label { color:#94A3B8 !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2px !important; } /* ─── 9 · TABS ──────────────────────────────────────────────────── */ .tabs { background:rgba(15,22,35,.6) !important; border:1px solid #1E2A44 !important; border-radius:12px !important; padding:4px !important; display:inline-flex !important; gap:4px; } .tabs .tab, .tab { background:transparent !important; color:#94A3B8 !important; font-weight:700 !important; border-radius:9px !important; padding:9px 16px !important; font-size:13px !important; border:0 !important; } .tabs .tab:hover { color:#E2E8F0 !important; background:rgba(255,255,255,.04) !important; } .tabs .tab.on, .tab.on { background:linear-gradient(135deg,#22D3EE,#0891B2) !important; color:#04141C !important; box-shadow:0 4px 12px -2px rgba(34,211,238,.45) !important; } /* ─── 10 · MODALS ───────────────────────────────────────────────── */ .ov { background:rgba(4,8,16,.72) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .md { background:linear-gradient(180deg,#0F1623,#0A0E17) !important; border:1px solid #1E2A44 !important; border-radius:16px !important; box-shadow:0 30px 80px -10px rgba(0,0,0,.8),0 0 0 1px rgba(34,211,238,.10) !important; color:#E2E8F0 !important; } .mdt { color:#F1F5F9 !important; font-size:18px !important; font-weight:900 !important; } /* ─── 11 · PLAN CELLS ───────────────────────────────────────────── */ .pc, .plan-cell { background:#0F1623 !important; border:1px solid #1E2A44 !important; border-radius:12px !important; color:#E2E8F0 !important; transition:transform .15s,box-shadow .15s,border-color .15s !important; } .pc:hover { transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(34,211,238,.30); border-color:rgba(34,211,238,.35) !important; } .pc.free { border-color:rgba(16,240,161,.40) !important; box-shadow:inset 0 0 0 1px rgba(16,240,161,.18),0 0 14px -4px rgba(16,240,161,.20) !important; } .pc.occ, .pc.occupe { border-color:rgba(34,211,238,.40) !important; box-shadow:inset 0 0 0 1px rgba(34,211,238,.18),0 0 14px -4px rgba(34,211,238,.25) !important; } .pc.warn, .pc.alert { border-color:rgba(251,191,36,.45) !important; box-shadow:inset 0 0 0 1px rgba(251,191,36,.20),0 0 14px -4px rgba(251,191,36,.25) !important; } .pc.crit, .pc.danger { border-color:rgba(255,59,107,.50) !important; box-shadow:inset 0 0 0 1px rgba(255,59,107,.25),0 0 16px -4px rgba(255,59,107,.32) !important; animation:pcPulse 2.2s ease-in-out infinite; } @keyframes pcPulse { 0%,100%{box-shadow:inset 0 0 0 1px rgba(255,59,107,.25),0 0 16px -4px rgba(255,59,107,.32)} 50%{box-shadow:inset 0 0 0 1px rgba(255,59,107,.45),0 0 22px -2px rgba(255,59,107,.5)} } .pl .lgi { color:#94A3B8 !important; font-weight:700 !important; } .ps { color:#E2E8F0 !important; font-weight:700; } /* ─── 12 · TABLES ───────────────────────────────────────────────── */ table { color:#E2E8F0 !important; border-color:#1E2A44 !important; } th { background:#131C2E !important; color:#94A3B8 !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.4px; font-size:11px !important; border-bottom:1px solid #1E2A44 !important; } td { border-bottom:1px solid #1B2740 !important; color:#E2E8F0 !important; } tbody tr:hover td { background:rgba(34,211,238,.05) !important; } /* ─── 13 · TOASTS ───────────────────────────────────────────────── */ .toast { background:#0F1623 !important; border:1px solid #1E2A44 !important; color:#E2E8F0 !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.7) !important; } .toast--success { border-color:#10F0A1 !important; color:#10F0A1 !important; } .toast--error { border-color:#FF3B6B !important; color:#FF6B8E !important; } .toast--warn { border-color:#FBBF24 !important; color:#FCD34D !important; } .toast--info { border-color:#22D3EE !important; color:#22D3EE !important; } /* ─── 14 · DASHBOARD KPI / TBD ──────────────────────────────────── */ .tbd-kpi-grid, .tbd-grid, .kpi-grid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important; gap:12px !important; } .tbd-chart, .tbd-chart-row { background:#0F1623 !important; border:1px solid #1E2A44 !important; border-radius:14px !important; padding:14px !important; } .tbd-chart-bar { background:linear-gradient(180deg,#22D3EE,#0891B2) !important; box-shadow:0 0 8px -2px rgba(34,211,238,.45) !important; } .tbd-chart-bar.today { background:linear-gradient(180deg,#10F0A1,#059669) !important; box-shadow:0 0 10px -2px rgba(16,240,161,.55) !important; } .tbd-chart-bar-val { color:#F1F5F9 !important; } .tbd-chart-label, .tbd-chart-label.today { color:#94A3B8 !important; } .tbd-chart-label.today { color:#10F0A1 !important; } /* ─── 15 · BI DASHBOARD ─────────────────────────────────────────── */ .bi-grid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important; gap:12px !important; } .bi-bar-track { background:#1B2740 !important; } .bi-bar-fill { background:linear-gradient(90deg,#22D3EE,#A855F7) !important; box-shadow:0 0 8px -2px rgba(34,211,238,.55); } .bi-bar-name { color:#E2E8F0 !important; } .bi-bar-val { color:#22D3EE !important; font-weight:800; } /* ─── 16 · NOUVELLE SESSION (ns-step*) ──────────────────────────── */ #ns-step1, #ns-step2, #ns-step3 { color:#E2E8F0 !important; } #ns-step3 { background:linear-gradient(135deg,#0F1623,#1B2740) !important; border:1px solid rgba(34,211,238,.32) !important; box-shadow:0 8px 30px -8px rgba(34,211,238,.30) !important; } #ns-prods, #ns-postes { gap:12px !important; } #ns-prods > *, #ns-postes > * { background:#0A0E17 !important; border:1px solid #1E2A44 !important; color:#E2E8F0 !important; border-radius:12px !important; transition:transform .15s,border-color .15s,box-shadow .15s !important; } #ns-prods > *:hover, #ns-postes > *:hover:not([data-occ="1"]) { border-color:#22D3EE !important; transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(34,211,238,.30) !important; } #b-ent { background:linear-gradient(135deg,#10F0A1,#059669) !important; color:#04141C !important; box-shadow:0 8px 22px -4px rgba(16,240,161,.55) !important; } /* ─── 17 · BOTTOM NAV PRO MOBILE ────────────────────────────────── */ #pro-bottom-nav { background:linear-gradient(180deg,rgba(15,22,35,.96),rgba(10,14,23,.98)) !important; border-top:1px solid #1E2A44 !important; backdrop-filter:blur(14px) saturate(140%) !important; -webkit-backdrop-filter:blur(14px) saturate(140%) !important; } #pro-bottom-nav .pbn-item { color:#94A3B8 !important; } #pro-bottom-nav .pbn-item:hover { color:#22D3EE !important; background:rgba(34,211,238,.08) !important; } #pro-bottom-nav .pbn-item.on { color:#22D3EE !important; text-shadow:0 0 12px rgba(34,211,238,.5) !important; } /* ─── 18 · SUPPRESSION DES BUTTONS FLOTTANTS PARASITES ─────────── */ #fab-passation, #ev-wa-fab, #tweaks-toggle, #tweaks-panel, #ev-install-btn, #theme-toggle { display:none !important; visibility:hidden !important; pointer-events:none !important; } /* ─── 19 · TYPOGRAPHIE BOLD ─────────────────────────────────────── */ h1,h2,h3,h4,h5 { color:#F1F5F9 !important; font-weight:900 !important; letter-spacing:-.2px !important; } .btn, .ni, .tab, .pbn-item, .ib { font-weight:800 !important; } .fs-seg b, .kv, .ev-kpi-val, .tbd-val, .bi-bar-val, td b, strong { font-variant-numeric:tabular-nums; } /* Montants DH dans toute l'app */ *:not(input):not(textarea):not(select) { /* nothing global; individual rules above */ } /* ─── 20 · NEUTRALISATION DES INLINE STYLES BLANCS ─────────────── */ /* Beaucoup de markup utilise style="background:#FFFFFF..." — on les reteinte en dark sans toucher au HTML. Ces sélecteurs d'attribut gagnent grâce à !important. */ [style*="background:#FFFFFF"], [style*="background:#ffffff"], [style*="background:#fff;"], [style*="background: #FFFFFF"], [style*="background: #ffffff"], [style*="background:#FAFBFC"], [style*="background:#F8FAFC"], [style*="background:#F1F5F9"], [style*="background:#FDF2F8"], [style*="background:#FEF3C7"], [style*="background:#F0F9FF"], [style*="background:#ECFDF5"], [style*="background:#FFF7ED"] { background:#0F1623 !important; color:#E2E8F0 !important; } [style*="background:#FFFFFF"]:not([style*="border"]), [style*="background:#ffffff"]:not([style*="border"]) { border:1px solid #1E2A44 !important; } [style*="color:#020617"], [style*="color:#0F172A"], [style*="color:#1F2937"], [style*="color:#111827"], [style*="color:#0F1623"] { color:#F1F5F9 !important; } [style*="color:#64748B"], [style*="color:#475569"], [style*="color:#94A3B8"] { color:#94A3B8 !important; } /* Les blocs dark déjà stylés en linear-gradient(#0F172A,#1E293B) restent OK — on harmonise la teinte. */ [style*="linear-gradient(135deg,#0F172A,#1E293B)"], [style*="linear-gradient(135deg, #0F172A, #1E293B)"] { background:linear-gradient(135deg,#0F1623,#1B2740) !important; border:1px solid #1E2A44 !important; } /* ─── 21 · DIVERS / SMART BANNER ────────────────────────────────── */ #ev-smart-banner { background:linear-gradient(135deg,#22D3EE,#A855F7) !important; color:#04141C !important; } #ev-smart-banner .sb-title, #ev-smart-banner .sb-sub { color:#04141C !important; } .sb-btn { background:#04141C !important; color:#22D3EE !important; } /* Sync dot (online) — neon */ #sync-dot { box-shadow:0 0 10px rgba(16,240,161,.8) !important; } /* Skeleton loader teinte dark */ .sk, .skel, .skeleton { background:linear-gradient(90deg,#131C2E 0%,#1B2740 50%,#131C2E 100%) !important; background-size:200% 100% !important; } /* Selection */ ::selection { background:rgba(34,211,238,.45) !important; color:#04141C !important; } /* Scrollbar */ ::-webkit-scrollbar-thumb { background:#1B2740 !important; } ::-webkit-scrollbar-thumb:hover { background:#22D3EE !important; } /* ─── 22 · CARTES "vente" header — codes color KPI ──────────────── */ .kpi-card.kpi-ca .kv, .ev-kpi-val.is-ca { color:#10F0A1 !important; } .kpi-card.kpi-wallet .kv { color:#A855F7 !important; } .kpi-card.kpi-cash .kv { color:#FBBF24 !important; } .kpi-card.kpi-net .kv { color:#22D3EE !important; } /* ─── 23 · ENTRÉE/SORTIE : Status badges ────────────────────────── */ .badge, .bdg, .chip { border-radius:999px !important; padding:3px 9px !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.3px !important; } .badge-ok, .chip-ok { background:rgba(16,240,161,.16) !important; color:#10F0A1 !important; border:1px solid rgba(16,240,161,.35) !important; } .badge-warn, .chip-warn { background:rgba(251,191,36,.16) !important; color:#FCD34D !important; border:1px solid rgba(251,191,36,.35) !important; } .badge-err, .chip-err { background:rgba(255,59,107,.16) !important; color:#FF6B8E !important; border:1px solid rgba(255,59,107,.35) !important; } .badge-info, .chip-info { background:rgba(34,211,238,.16) !important; color:#22D3EE !important; border:1px solid rgba(34,211,238,.35) !important; } /* ─── 24 · LISTES DENSES ────────────────────────────────────────── */ .row, .lst-row, .li { background:#0F1623 !important; border:1px solid #1E2A44 !important; color:#E2E8F0 !important; border-radius:10px !important; } /* ─── 25 · OFFLINE BANNER ───────────────────────────────────────── */ #offline-badge { background:linear-gradient(135deg,#FF3B6B,#B91C1C) !important; color:#FFFFFF !important; font-weight:800 !important; letter-spacing:.3px !important; } /* ─── 26 · ACCESSIBILITÉ FOCUS ──────────────────────────────────── */ :focus-visible { outline:2px solid #22D3EE !important; outline-offset:2px !important; } /* ─── 27 · ANIMATIONS subtiles ──────────────────────────────────── */ @keyframes evFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} } .cd, .bi-card, .pc, .row { animation:evFadeIn .25s ease-out both; } /* ─── 28 · MOBILE TWEAKS ────────────────────────────────────────── */ @media (max-width:1023px){ .tb { padding:10px 12px !important; min-height:54px !important; } body { font-size:14.5px !important; } .cd, .acard, .bi-card { padding:13px !important; border-radius:12px !important; } .scrl { padding:10px !important; gap:10px !important; } } /* ─── 29 · ECRANS LARGES — pleine largeur ───────────────────────── */ @media (min-width:1280px){ #app, .pg, .scrl { max-width:none !important; width:100% !important; } } @media (min-width:1600px){ body { font-size:15.5px !important; } } /* ─── 30 · PINS / KEYPAD AUTH PIN ───────────────────────────────── */ .pin-panel button { background:#0F1623 !important; border:1px solid #1E2A44 !important; color:#F1F5F9 !important; font-weight:900 !important; } .pin-panel button:hover { border-color:#22D3EE !important; background:rgba(34,211,238,.10) !important; color:#22D3EE !important; } /* ─── 31 · OBJ : SUR-OVERRIDE des cd > h-row avec slate inline ─── */ [style*="background:#020617"] { background:#0A0E17 !important; } [style*="background:#FFFFFF;border:2px solid #E2E8F0"] { background:#0F1623 !important; border:2px solid #1E2A44 !important; } /* =============== ev-darkfix-v281 =============== */ /* ─── 1 · GLOBAL DARK — body & shell sans condition ───────────────── */ html, body { background:#0A0E17 !important; color:#F1F5F9 !important; } html[data-theme], html[data-theme="light"], html[data-theme="dark"], html[data-theme] body, html[data-theme="light"] body, html[data-theme="dark"] body { background:#0A0E17 !important; color:#F1F5F9 !important; } /* Le pseudo radial ambient — gaming dark profond */ html::before { content:"" !important; position:fixed !important; inset:0 !important; z-index:-2 !important; pointer-events:none !important; background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(34,211,238,.10), transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(168,85,247,.10), transparent 55%), radial-gradient(ellipse 50% 40% at 0% 80%, rgba(16,240,161,.06), transparent 55%), #0A0E17 !important; } body::before, body::after { display:none !important; } /* ─── 2 · WRAPPERS DE PAGES — étaient blancs ──────────────────────── */ #app, #mode-admin, #mode-membre, #p-app, .pg, .pw, .pw2, #pg-pln, .pln-wrap, .pwx, .plan-host, .plan-scroll, .plan-board, .plan-wrap, #s-acc, #s-pln, #s-clt, #s-fin, #s-eq, #s-ano, #s-rp, #s-css, #s-env, #s-envhist, #s-valid, #s-hist, #s-ctrl, #s-audit, #s-caisseop, #s-mbrs, #s-eqp, #s-msg, #s-timer, #s-queue, #s-kiosk, #s-stock, #s-pointage, #s-caisseRpt, #s-caissectrl, #s-tarifs, #s-monservice, #s-caisseAlerts { background:transparent !important; } .scrl { background:transparent !important; } /* Sidebar PRO Nav qui était parfois claire */ #pro-bottom-nav .pbn-item:hover { color:#22D3EE !important; background:rgba(34,211,238,.08) !important; } /* ─── 3 · CARTES & WIDGETS qui étaient blancs en CSS scopé ────────── */ .kc, .sc, .sc.w, .sc.a, .acard, .md, .bx-hero, .opb, .amt-box, .tc2, .trb, .tbl2, .tbl2 td, .tbl2 th, .mbrs-table, .mbrs-table td, .mbrs-table th, .mbrs-card, .stat-card, .tbd-card, .tbd-trends, .tbd-chart, .tbd-chart-row { background:#0F1623 !important; border-color:#1E2A44 !important; color:#E2E8F0 !important; } .tbl2 th, .mbrs-table th { background:#131C2E !important; color:#94A3B8 !important; } .tbl2 tr:hover td, .mbrs-table tbody tr:hover td { background:rgba(34,211,238,.06) !important; } /* Onglets `.tab` non `.on` qui étaient #F1F5F9 au hover */ .tab:hover:not(.on) { background:rgba(34,211,238,.08) !important; color:#22D3EE !important; } /* Lang-picker hover en claire */ .lang-picker button:hover:not(.lang-active) { background:rgba(34,211,238,.10) !important; color:#E2E8F0 !important; } /* Sidebar item hover qui était #F1F5F9 */ .bn .ni:hover, #bn .ni:hover { background:rgba(34,211,238,.10) !important; color:#F1F5F9 !important; } /* ─── 4 · PAGE POINTAGE — toutes ses classes evp-* étaient #fff ───── */ .evp-chip, .evp-dchip, .evp-actbtn, .evp-staff, .evp-kpkey, .evp-row { background:#0F1623 !important; border-color:#1E2A44 !important; color:#E2E8F0 !important; } .evp-chip:hover, .evp-dchip:hover { border-color:#22D3EE !important; color:#22D3EE !important; } .evp-chip.evp-chip-on, .evp-dchip.evp-chip-on { background:#22D3EE !important; border-color:#22D3EE !important; color:#04141C !important; } .evp-actbtn:hover { border-color:#22D3EE !important; color:#22D3EE !important; } .evp-actbtn.evp-act-on { background:#22D3EE !important; border-color:#22D3EE !important; color:#04141C !important; } .evp-staff:hover { border-color:#22D3EE !important; box-shadow:0 4px 14px -2px rgba(34,211,238,.30) !important; } .evp-row:hover td { background:rgba(34,211,238,.06) !important; } .evp-kpkey { color:#F1F5F9 !important; font-size:24px !important; } .evp-kpkey:hover { background:#131C2E !important; border-color:#22D3EE !important; color:#22D3EE !important; } .evp-dot { border-color:#22D3EE !important; } .evp-dot.on { background:#22D3EE !important; } .evp-ov { background:rgba(4,8,16,.78) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* ─── 5 · ASSISTANT MONNAIE — am-coup-tile & am-panel & am-kpi-card ─ */ #am-panel, #am-out-zone, .am-kpi-card, .am-coup-tile { background:#0F1623 !important; border-color:#1E2A44 !important; color:#E2E8F0 !important; } .am-coup-tile .am-coup-btn { background:#131C2E !important; border-color:#2B3A5A !important; color:#F1F5F9 !important; } .am-coup-tile .am-coup-qty { background:#0A0E17 !important; color:#F1F5F9 !important; } .am-coup-tile .am-coup-qty:focus { background:#131C2E !important; border-color:#22D3EE !important; box-shadow:0 0 0 3px rgba(34,211,238,.22) !important; } /* ─── 6 · INLINE-STYLE LIGHT BACKGROUNDS — case insensitive (`i`) ──── */ /* Catch toute déclaration inline qui pose un fond clair, peu importe la casse. */ [style*="background:#fff" i], [style*="background: #fff" i], [style*="background:#ffffff" i], [style*="background: #ffffff" i], [style*="background:white" i], [style*="background: white" i], [style*="background:#f8fafc" i], [style*="background: #f8fafc" i], [style*="background:#f1f5f9" i], [style*="background: #f1f5f9" i], [style*="background:#fafbfc" i], [style*="background:#fef2f2" i], [style*="background:#fef3c7" i], [style*="background:#fffbeb" i], [style*="background:#f0f9ff" i], [style*="background:#ecfdf5" i], [style*="background:#fff7ed" i], [style*="background:#fee2e2" i], [style*="background:#dcfce7" i], [style*="background:#d1fae5" i], [style*="background:#eff6ff" i], [style*="background:#fed7aa" i], [style*="background:#fecaca" i], [style*="background:#fdf2f8" i], [style*="background-color:#fff" i], [style*="background-color: #fff" i], [style*="background-color:#f8fafc" i] { background:#0F1623 !important; color:#E2E8F0 !important; } /* Catch les textes foncés sur fond clair (devenus illisibles en dark) */ [style*="color:#020617" i], [style*="color:#0f172a" i], [style*="color:#1f2937" i], [style*="color:#111827" i], [style*="color:#1e293b" i], [style*="color:#334155" i], [style*="color: #020617" i], [style*="color: #0f172a" i], [style*="color: #1f2937" i], [style*="color: #1e293b" i] { color:#F1F5F9 !important; } [style*="color:#475569" i], [style*="color:#64748b" i], [style*="color:#94a3b8" i], [style*="color: #64748b" i] { color:#94A3B8 !important; } /* Bordures claires inline → bord sombre */ [style*="border:1px solid #e2e8f0" i], [style*="border: 1px solid #e2e8f0" i], [style*="border:1px solid #cbd5e1" i], [style*="border:2px solid #e2e8f0" i], [style*="border: 2px solid #e2e8f0" i], [style*="border:1.5px solid #cbd5e1" i] { border-color:#1E2A44 !important; } /* ─── 7 · TYPOGRAPHIE — nettement plus grande et plus lisible ──────── */ html { font-size:16.5px !important; } body { font-size:17px !important; line-height:1.55 !important; font-weight:500 !important; letter-spacing:.005em !important; } .tb-t { font-size:19px !important; font-weight:900 !important; letter-spacing:.2px !important; } .tb-s { font-size:12.5px !important; font-weight:600 !important; } .tbr .ib, .tb .ib { font-size:14px !important; padding:8px 12px !important; } #clk { font-size:16px !important; font-weight:800 !important; } /* Sidebar items + bottom nav plus gros */ .bn .ni, #bn .ni, .ni { font-size:15.5px !important; padding:13px 14px !important; } .bn .ni .ic, #bn .ni .ic, .ni .ic { font-size:19px !important; } #pro-bottom-nav .pbn-item { font-size:11px !important; } #pro-bottom-nav .pbn-item .pbn-ic { font-size:22px !important; } /* Boutons globalement plus gros, plus lisibles */ .btn, button.btn { font-size:15.5px !important; font-weight:800 !important; padding:13px 18px !important; min-height:48px !important; border-radius:12px !important; letter-spacing:.2px !important; } .btn.bgh, .btn.bo, button.bgh, button.bo { font-size:14.5px !important; padding:11px 16px !important; min-height:44px !important; } /* KPI / chiffres / montants — typo dominante */ .kv, .ev-kpi-val, .kpi-val, .tbd-kpi, .tbd-val { font-size:36px !important; font-weight:900 !important; letter-spacing:-.6px !important; } .cd .cd-h, .cd-h, .ev-card-h, .kpi-card-h, .bi-card-h, .tbd-card-h, .acard-h { font-size:12.5px !important; font-weight:800 !important; letter-spacing:.7px !important; } .mdt { font-size:20px !important; font-weight:900 !important; } /* Headers de section, titres d'onglet : plus marqués */ h1 { font-size:28px !important; font-weight:900 !important; } h2 { font-size:22px !important; font-weight:900 !important; } h3 { font-size:18px !important; font-weight:900 !important; } h4 { font-size:16px !important; font-weight:800 !important; } .tabs .tab, .tab { font-size:14.5px !important; padding:11px 18px !important; } /* Inputs / formulaires plus lisibles */ .fi, .fta, input, select, textarea { font-size:15.5px !important; padding:13px 14px !important; min-height:46px !important; } .fl, label { font-size:13.5px !important; font-weight:700 !important; } /* Tables — texte plus gros et plus lisible */ .tbl2 th, .mbrs-table th, table th { font-size:12.5px !important; letter-spacing:.5px !important; padding:14px 16px !important; } .tbl2 td, .mbrs-table td, table td { font-size:14.5px !important; padding:13px 16px !important; } /* Badges + chips plus lisibles */ .badge, .bdg, .chip, .nbdg { font-size:12px !important; padding:4px 10px !important; } /* Bandeau bigbanner (encaissement) — encore plus visible */ #cf-bigbanner { font-size:23px !important; padding:20px 24px !important; min-height:86px !important; } #cf-bigbanner-ic { font-size:34px !important; } /* Cellules plan plus lisibles */ .pc, .plan-cell { font-size:14.5px !important; padding:14px !important; } .pc-timer { font-size:18px !important; font-weight:900 !important; } /* Sortie / encaissement / KPI plein écran */ #cf-due, #cf-recv, #cf-rendu { font-size:38px !important; } #cf-state { font-size:22px !important; font-weight:900 !important; } /* Mobile : préserver lisibilité sans sacrifier la densité */ @media (max-width:1023px) { html { font-size:16px !important; } body { font-size:16.5px !important; } .btn, button.btn { font-size:15px !important; min-height:46px !important; padding:12px 16px !important; } .kv, .ev-kpi-val, .kpi-val, .tbd-kpi, .tbd-val { font-size:30px !important; } .tb-t { font-size:17px !important; } } @media (min-width:1600px) { html { font-size:17.5px !important; } body { font-size:18px !important; } } /* ─── 8 · MEMBRE APP — laissée DARK aussi ────────────────────────── */ /* (l'app membre est partagée avec la même UI ; on harmonise le thème) */ #mb-p-app, .mb-main, .mb-home, .mb-sidebar, .mb-user, .mb-navitem, #mb-mobile-header { background:#0A0E17 !important; color:#F1F5F9 !important; border-color:#1E2A44 !important; } .mb-user, .mb-navitem { background:#0F1623 !important; } .mb-navitem:hover { background:rgba(34,211,238,.10) !important; color:#22D3EE !important; } /* ─── 9 · SCROLLBAR fine + neon ───────────────────────────────────── */ * { scrollbar-color:#22D3EE transparent; } /* ─── 10 · SR-only + accessibility — préserver focus visible ──────── */ :focus-visible { outline:2px solid #22D3EE !important; outline-offset:3px !important; } /* ─── 11 · INLINE BORDERS RESTANTES (sans i, déjà sombres après v281) ─ */ [style*="border:1px solid #C7DBDC"], [style*="border:1px solid #BFDBFE"], [style*="border:1px solid #FCD34D"], [style*="border:1px solid #FDE68A"], [style*="border:1px solid #FCA5A5"] { border-color:#1E2A44 !important; } /* Le code couleur d'état (rouge alerte, vert succès, orange warn) doit rester visible — on ne le casse pas. Les éléments avec `.cp.crit`, `.toast--error`, etc. gardent leurs accents. */ /* =============== ev-contrast-v282 =============== */ /* ─── 1 · BODY & ROOT TOKENS ───────────────────────────────────────── */ :root, html:not([data-theme="light"]) { --tx:#FFFFFF !important; --tx2:#E2E8F0 !important; --tx3:#CBD5E1 !important; } html, body, html[data-theme], html[data-theme="dark"], html[data-theme="light"] body { color:#FFFFFF !important; } body, .pg, .scrl, .cd, .acard, .md, .bx-hero { color:#F1F5F9 !important; } /* ─── 2 · SELECTEURS GLOBAUX — tout texte revient à clair ──────────── */ .tb-s, .tb-t, .tbl, .tbr, .ib, .hdr-logout-lb, .fl, label, .cd-h, .cd-l, .ev-card-h, .kpi-card-h, .bi-card-h, .tbd-card-h, .acard-h, .tbd-card-label, .tbd-card-suffix, .tbd-chart-sub, .tbd-chart-label, .tbd-trend-sub, .tbd-trend, .tbd-chart-title, .tbd-chart-bar-val, .mbrs-stat-lbl, .mbrs-stat-val, .mbrs-export, .mbrs-table th, .mbrs-table td, .mbrs-card, .tbl2 th, .tbl2 td, .fs-ttl, .fs-lbl, .fs-seg, .fs-seg b, #fs-bar, #fs-bar .fs-seg b, .evp-chip, .evp-dchip, .evp-actbtn, .evp-staff, .evp-kpkey, .evp-row, .evcx-side, .evcx-sub, .evcx-bn, .evcx-bn span, .lang-picker button, .pc-lbl, .pc-meta, .pc-name, .pc-prod, .pc-state, .pc-stat, .pc-timer, .bi-card-h, .bi-card-h .bi-sub, .bi-bar-name, .bi-bar-val, .am-coup-lbl, .am-kpi-card div, .row, .lst-row, .li, .evp-chip-on { color:#F1F5F9 !important; } /* ─── 3 · SECONDAIRES (libellés discrets) — JAMAIS plus sombre que #CBD5E1 */ .tb-s, .cd-h, .ev-card-h, .kpi-card-h, .bi-card-h, .tbd-card-h, .acard-h, .tbd-card-label, .tbd-card-suffix, .tbd-chart-sub, .tbd-chart-label, .tbd-trend-sub, .mbrs-stat-lbl, .tbl2 th, .mbrs-table th, .fs-ttl, .fs-lbl, .evcx-sub, .bi-card-h .bi-sub, .pc-prod, .pc-state, .pc-meta, table th, .tabs .tab:not(.on), .tab:not(.on) { color:#CBD5E1 !important; } /* ─── 4 · HEADINGS — toujours blancs purs ─────────────────────────── */ h1, h2, h3, h4, h5, h6, .mdt, .tb-t, .cd-t { color:#FFFFFF !important; } /* ─── 5 · KPI / MONTANTS / CHIFFRES — bright cyan ou blanc franc ──── */ .kv, .ev-kpi-val, .kpi-val, .tbd-kpi, .tbd-val, .tbd-card-value, .bi-bar-val, .mbrs-stat-val, .fs-seg b, .fs-total b { color:#FFFFFF !important; } /* Variantes accentuées : on garde la teinte mais on les force lumineuses */ .tbd-card.is-hier .tbd-val, .tbd-card.is-hier .tbd-card-value { color:#C084FC !important; } .tbd-card.is-mois .tbd-val, .tbd-card.is-mois .tbd-card-value { color:#FCD34D !important; } .tbd-card.is-sessions .tbd-val, .tbd-card.is-sessions .tbd-card-value { color:#22D3EE !important; } .tbd-card.is-jour .tbd-val, .tbd-card.is-jour .tbd-card-value { color:#10F0A1 !important; } /* ─── 6 · INPUTS — texte BLANC, taille XL, placeholder lisible ────── */ input, select, textarea, .fi, .fta { color:#FFFFFF !important; background:#0A0E17 !important; border-color:#2B3A5A !important; caret-color:#22D3EE !important; font-weight:700 !important; } input:focus, select:focus, textarea:focus, .fi:focus, .fta:focus { color:#FFFFFF !important; background:#0F1623 !important; border-color:#22D3EE !important; box-shadow:0 0 0 3px rgba(34,211,238,.30) !important; } input::placeholder, textarea::placeholder, .fi::placeholder, .fta::placeholder { color:#94A3B8 !important; opacity:1 !important; font-weight:500 !important; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#94A3B8 !important; opacity:1 !important; } input::-moz-placeholder, textarea::-moz-placeholder { color:#94A3B8 !important; opacity:1 !important; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#94A3B8 !important; } /* ─── 7 · ASSISTANT MONNAIE (#m-srt) — tiles & qty & KPI cards ────── */ #am-panel { background:#0F1623 !important; border-color:#22D3EE !important; color:#F1F5F9 !important; } .am-coup-tile { background:#131C2E !important; border-color:#2B3A5A !important; color:#FFFFFF !important; } .am-coup-tile .am-coup-lbl { color:#FFFFFF !important; font-size:14px !important; font-weight:900 !important; } .am-coup-tile .am-coup-qty { color:#FFFFFF !important; background:#0A0E17 !important; border-color:#2B3A5A !important; font-size:24px !important; font-weight:900 !important; caret-color:#22D3EE !important; } .am-coup-tile .am-coup-qty:focus { color:#FFFFFF !important; background:#0F1623 !important; border-color:#22D3EE !important; box-shadow:0 0 0 3px rgba(34,211,238,.30) !important; } .am-coup-tile .am-coup-qty::placeholder { color:#64748B !important; opacity:.85 !important; } .am-coup-tile .am-coup-btn { background:#1B2740 !important; border-color:#2B3A5A !important; color:#FFFFFF !important; } .am-coup-tile .am-coup-btn.am-coup-plus { background:rgba(16,240,161,.15) !important; border-color:rgba(16,240,161,.55) !important; color:#10F0A1 !important; } .am-coup-tile .am-coup-btn.am-coup-plus:hover { background:rgba(16,240,161,.28) !important; color:#FFFFFF !important; } .am-coup-tile .am-coup-btn.am-coup-minus { background:rgba(255,59,107,.18) !important; border-color:rgba(255,59,107,.55) !important; color:#FF6B8E !important; } .am-coup-tile .am-coup-btn.am-coup-minus:hover { background:rgba(255,59,107,.32) !important; color:#FFFFFF !important; } .am-coup-tile.am-has-qty { background:rgba(16,240,161,.12) !important; border-color:#10F0A1 !important; box-shadow:0 0 0 3px rgba(16,240,161,.20) !important; } .am-coup-tile.am-side-out.am-has-qty { background:rgba(34,211,238,.12) !important; border-color:#22D3EE !important; box-shadow:0 0 0 3px rgba(34,211,238,.20) !important; } /* Compteur XL — dark variant (priorité absolue sur tout theme overlay) */ .am-coup-tile .am-coup-counter{ background:#1B2740 !important; color:#94A3B8 !important; border-color:#2B3A5A !important; font-size:20px !important; font-weight:900 !important; padding:6px 8px !important; } .am-coup-tile.am-side-in .am-coup-counter.am-cnt-on{ background:#10F0A1 !important; color:#04140A !important; -webkit-text-fill-color:#04140A !important; border-color:#10F0A1 !important; } .am-coup-tile.am-side-out .am-coup-counter.am-cnt-on{ background:#22D3EE !important; color:#04141A !important; -webkit-text-fill-color:#04141A !important; border-color:#22D3EE !important; } #am-out-zone { background:#0F1623 !important; border-color:#22D3EE !important; } #am-out-help { color:#CBD5E1 !important; } /* KPI cards de l'assistant : background sombre + texte blanc, accent par état */ .am-kpi-card { background:#131C2E !important; border-color:#2B3A5A !important; color:#FFFFFF !important; } .am-kpi-card > div:first-child { color:#CBD5E1 !important; opacity:1 !important; font-weight:800 !important; } .am-kpi-card > div:last-child { color:#FFFFFF !important; } #am-kpi-due { color:#22D3EE !important; } #am-kpi-recu, #am-kpi-recu + div { color:#10F0A1 !important; } #am-kpi-card-reste { border-color:rgba(255,59,107,.55) !important; } #am-kpi-reste, #am-kpi-reste-lbl { color:#FF6B8E !important; } #am-kpi-card-arendre { border-color:rgba(251,191,36,.55) !important; } #am-kpi-arendre { color:#FCD34D !important; } #am-kpi-card-compose { border-color:rgba(34,211,238,.55) !important; } #am-kpi-compose { color:#22D3EE !important; } #am-kpi-card-ctrl { border-color:#2B3A5A !important; } #am-kpi-ctrl { color:#F1F5F9 !important; } #am-suggest { background:rgba(251,191,36,.10) !important; border-color:#FCD34D !important; color:#FCD34D !important; } /* Boutons reset de l'assistant */ button[onclick*="_amResetSide"] { background:rgba(255,59,107,.15) !important; border-color:rgba(255,59,107,.50) !important; color:#FF6B8E !important; } button[onclick*="_amResetSide"]:hover { background:rgba(255,59,107,.30) !important; color:#FFFFFF !important; } #am-out-fill { background:rgba(251,191,36,.15) !important; border-color:#FCD34D !important; color:#FCD34D !important; } #am-out-fill:hover { background:rgba(251,191,36,.30) !important; color:#FFFFFF !important; } /* Bandeau bigbanner (Encaissement OK / Manque XX DH) — ressort très fort */ #cf-bigbanner { color:#FFFFFF !important; font-weight:900 !important; letter-spacing:.04em !important; text-shadow:0 1px 0 rgba(0,0,0,.5) !important; } /* ─── 8 · CATCH-ALL ATTRIBUTE — INLINE COLORS DIMS ────────────────── */ /* Toute couleur inline plus sombre ou trop grise est remontée à clair. Le `i` rend la comparaison insensible à la casse. */ [style*="color:#000" i]:not([style*="background"]), [style*="color: #000" i]:not([style*="background"]), [style*="color:black" i]:not([style*="background"]), [style*="color: black" i]:not([style*="background"]), [style*="color:#020617" i], [style*="color: #020617" i], [style*="color:#0f172a" i], [style*="color: #0f172a" i], [style*="color:#111827" i], [style*="color: #111827" i], [style*="color:#1e293b" i], [style*="color: #1e293b" i], [style*="color:#1f2937" i], [style*="color: #1f2937" i], [style*="color:#334155" i], [style*="color: #334155" i], [style*="color:#0b1220" i], [style*="color:#0c1426" i] { color:#FFFFFF !important; } [style*="color:#475569" i], [style*="color: #475569" i], [style*="color:#555" i], [style*="color: #555" i], [style*="color:#666" i], [style*="color: #666" i], [style*="color:#777" i], [style*="color:#64748b" i], [style*="color: #64748b" i], [style*="color:#94a3b8" i], [style*="color: #94a3b8" i], [style*="color:#888" i], [style*="color: #888" i], [style*="color:#9aa0a6" i], [style*="color:#aaa" i], [style*="color: #aaa" i] { color:#E2E8F0 !important; } /* Couleurs sombres "marque" qui devenaient illisibles sur dark : on les remappe */ [style*="color:#065f46" i], [style*="color: #065f46" i] { color:#10F0A1 !important; } /* dark emerald → neon green */ [style*="color:#15803d" i], [style*="color:#047857" i] { color:#34F4B4 !important; } /* darker greens */ [style*="color:#7f1d1d" i], [style*="color:#991b1b" i], [style*="color:#b91c1c" i], [style*="color:#dc2626" i] { color:#FF6B8E !important; } /* dark reds → neon red */ [style*="color:#92400e" i], [style*="color:#b45309" i] { color:#FCD34D !important; } /* dark amber → neon amber */ [style*="color:#1e3a8a" i], [style*="color:#1d4ed8" i], [style*="color:#1e40af" i], [style*="color:#0369a1" i], [style*="color:#0891b2" i] { color:#22D3EE !important; } /* dark blues/teals → neon cyan */ [style*="color:#2d5a60" i] { color:#22D3EE !important; } /* legacy brand teal */ [style*="color:#7c6fff" i] { color:#A855F7 !important; } /* legacy violet */ /* Backgrounds clairs résiduels → dark (en plus du v281, on durcit avec les variantes laissées de côté la dernière fois). */ [style*="background:#dcfce7" i], [style*="background:#bbf7d0" i], [style*="background:#fee2e2" i], [style*="background:#fecaca" i], [style*="background:#fef3c7" i], [style*="background:#fed7aa" i], [style*="background:#dbeafe" i], [style*="background:#bfdbfe" i], [style*="background:#e0e7ff" i], [style*="background:#fdf2f8" i], [style*="background:#fce7f3" i] { background:#131C2E !important; color:#F1F5F9 !important; } /* Borders claires laissés de côté → dark slate */ [style*="border:1px solid #cbd5e1" i], [style*="border:1.5px solid #cbd5e1" i], [style*="border:1.5px solid #fca5a5" i], [style*="border:1px solid #93c5fd" i], [style*="border:2px solid #93c5fd" i], [style*="border:2px solid #10b981" i], [style*="border:2px solid #2563eb" i], [style*="border:1.5px solid #fcd34d" i], [style*="border:1px solid #93c5fd" i] { border-color:#2B3A5A !important; } /* Le bouton Refill (#FFFBEB / #FCD34D / #92400E) est intentionnel — accent amber */ /* ─── 9 · CSS-DEFINED DIM SELECTORS — surcharge sélecteurs spécifiques */ /* Listes triées par occurrence (audit grep). On force chacun en clair. */ .evcx-side { color:#E2E8F0 !important; } .evcx-side:hover, .evcx-side.on { color:#FFFFFF !important; } .evcx-sub { color:#CBD5E1 !important; } .evcx-bn { color:#CBD5E1 !important; } .evcx-bn span, .evcx-bn .evcx-bn-lbl { color:#CBD5E1 !important; } .evcx-bn.on, .evcx-bn:hover { color:#22D3EE !important; } .evp-chip, .evp-dchip { background:#131C2E !important; border-color:#2B3A5A !important; color:#F1F5F9 !important; } .evp-actbtn { background:#131C2E !important; border-color:#2B3A5A !important; color:#F1F5F9 !important; } .pc-lbl { color:#F1F5F9 !important; } .pc.s .pc-lbl { color:#CBD5E1 !important; } .tbl2 th { background:#131C2E !important; color:#CBD5E1 !important; border-color:#1E2A44 !important; } .tbl2 td { background:transparent !important; color:#F1F5F9 !important; border-color:#1E2A44 !important; } .mbrs-table th { background:#131C2E !important; color:#CBD5E1 !important; } .mbrs-table td { color:#F1F5F9 !important; } .mbrs-stat-lbl { color:#CBD5E1 !important; } .mbrs-stat-val { color:#FFFFFF !important; } .mbrs-export { background:#22D3EE !important; color:#04141C !important; border-color:#22D3EE !important; } #fs-bar .fs-seg b { color:#22D3EE !important; } #fs-bar .fs-total b { color:#10F0A1 !important; } .tbd-card-label, .tbd-card-suffix { color:#CBD5E1 !important; } .tbd-card-value { color:#FFFFFF !important; } .tbd-trend.zero { background:#1B2740 !important; color:#CBD5E1 !important; } .tbd-trend-sub { color:#CBD5E1 !important; } .tbd-chart-title { color:#FFFFFF !important; } .tbd-chart-sub, .tbd-chart-label { color:#CBD5E1 !important; } .tbd-chart-bar-val { color:#FFFFFF !important; } .lang-picker button { color:#CBD5E1 !important; border-color:#2B3A5A !important; } .lang-picker button:hover:not(.lang-active) { color:#FFFFFF !important; background:rgba(34,211,238,.10) !important; } .lang-picker button.lang-active { background:#22D3EE !important; color:#04141C !important; border-color:#22D3EE !important; } .bi-card-h { color:#CBD5E1 !important; } .bi-card-h .bi-sub { color:#CBD5E1 !important; } /* slate-300 — bumpé 2026-05-26 (avant 94A3B8 trop sombre) */ .bi-bar-name { color:#F1F5F9 !important; } .bi-bar-val { color:#FFFFFF !important; } /* ─── 10 · TOP BAR / SIDEBAR / NAV ─────────────────────────────────── */ .tb-t { color:#FFFFFF !important; } .tb-s { color:#CBD5E1 !important; } .tbr .ib, .tb .ib { color:#F1F5F9 !important; } .bn .ni, #bn .ni, .ni { color:#F1F5F9 !important; } .bn .ni:hover, #bn .ni:hover, .ni:hover { color:#FFFFFF !important; } .bn .ni.on, #bn .ni.on, .ni.on { color:#FFFFFF !important; } .nbdg { color:#FFFFFF !important; } #pro-bottom-nav .pbn-item { color:#CBD5E1 !important; } #pro-bottom-nav .pbn-item.on { color:#22D3EE !important; } /* ─── 11 · TABS / BOUTONS / MODALES ───────────────────────────────── */ .tabs .tab, .tab { color:#CBD5E1 !important; } .tabs .tab:not(.on):hover, .tab:not(.on):hover { color:#FFFFFF !important; } .tabs .tab.on, .tab.on { color:#04141C !important; } .btn { color:#F1F5F9 !important; } .btn.bg, .btn.ba, button.bg, button.ba { color:#04141C !important; } /* fond cyan → texte foncé OK (encre noire sur cyan) */ .btn.b-success, .btn.bsucc { color:#04141C !important; } .btn.b-danger, .btn.bdanger { color:#FFFFFF !important; } .btn.bgh, button.bgh { color:#F1F5F9 !important; } .btn.bgh:hover { color:#22D3EE !important; } .btn:disabled { color:#94A3B8 !important; } /* placeholder-level OK car explicitement désactivé */ .md, .ov .md { color:#F1F5F9 !important; } .mdt { color:#FFFFFF !important; } .bx-i, .bx-w, .bx-e, .bx-s { background:#131C2E !important; border-color:#2B3A5A !important; color:#F1F5F9 !important; } .bx-i { border-left:4px solid #22D3EE !important; color:#22D3EE !important; } .bx-w { border-left:4px solid #FCD34D !important; color:#FCD34D !important; } .bx-e, .bx-err { border-left:4px solid #FF6B8E !important; color:#FF6B8E !important; } .bx-s { border-left:4px solid #10F0A1 !important; color:#10F0A1 !important; } .err-line { color:#FF6B8E !important; } /* ─── 12 · STATES SUR PLAN CELL — texte clair ─────────────────────── */ .pc, .plan-cell { color:#F1F5F9 !important; } .pc-name, .pc-prod, .pc-state, .pc-stat, .pc-meta { color:#F1F5F9 !important; } .pc.s .pc-name { color:#CBD5E1 !important; } .pc-timer { color:#FFFFFF !important; } .pl .lgi { color:#F1F5F9 !important; } .ps { color:#FFFFFF !important; } /* ─── 13 · TYPOGRAPHIE — encore un cran au-dessus pour lisibilité ──── */ body { font-size:17px !important; line-height:1.55 !important; font-weight:500 !important; color:#F1F5F9 !important; } .fl, label { font-size:14px !important; font-weight:700 !important; color:#CBD5E1 !important; letter-spacing:.2px !important; } .fi, .fta, input, select, textarea { font-size:16px !important; font-weight:700 !important; min-height:48px !important; } .fi[type="number"], input[type="number"] { font-size:18px !important; font-weight:800 !important; } .am-coup-qty { font-size:26px !important; font-weight:900 !important; } .btn { font-size:15.5px !important; font-weight:800 !important; } /* ─── 14 · TOASTS / OVERLAYS / SCROLL UNLOCK ───────────────────────── */ .toast { color:#F1F5F9 !important; } .toast--success { color:#10F0A1 !important; } .toast--error { color:#FF6B8E !important; } .toast--warn { color:#FCD34D !important; } .toast--info { color:#22D3EE !important; } /* ─── 15 · MEMBRE APP — symétrique ──────────────────────────────────── */ #mb-p-app, .mb-main, .mb-home, .mb-user, .mb-navitem, .mb-sidebar { color:#F1F5F9 !important; } .mb-navitem { color:#CBD5E1 !important; } .mb-navitem:hover, .mb-navitem.on { color:#FFFFFF !important; } /* ─── 16 · SAFETY NET — html * pour tout résidu intra-fontcolor ───── */ /* Sécurité ultime : si un élément hérite encore d'un currentColor sombre à cause d'un parent inline `color:`, on remet en blanc. Cette règle a une spécificité faible mais wins via cascade order. */ body * { -webkit-tap-highlight-color:transparent; } body :where(.cd, .md, .acard, .pc, .scrl, .pg) :is(div, span, p, a, b, strong, em, small, td, th, li):not([class*="btn"]):not(button) { color:inherit; } /* Liens — couleur cyan accessible */ a, a:link, a:visited { color:#22D3EE !important; } a:hover { color:#67E8F9 !important; } /* ─── 17 · SOFT KEYBOARD ASSIST (cf. saisie chiffres en m-srt) ───── */ .cf-keypad button, .am-keypad button { background:#131C2E !important; border-color:#2B3A5A !important; color:#FFFFFF !important; font-weight:900 !important; } .cf-keypad button:hover, .am-keypad button:hover { background:#1B2740 !important; border-color:#22D3EE !important; color:#22D3EE !important; } /* ─── 18 · LEGAL-LOOK EMPTY / LDS — chargement & vides ────────────── */ .lds, .lds .spn { color:#CBD5E1 !important; } .emp { color:#CBD5E1 !important; } /* ─── 19 · SKELETON / SHIMMER ─────────────────────────────────────── */ .skel, .skeleton, .sk { background:linear-gradient(90deg,#131C2E 0%,#1B2740 50%,#131C2E 100%) !important; background-size:200% 100% !important; } /* =============== ev-auth-dark-v284 =============== */ /* ─── 1 · FOND GLOBAL & HALOS DE L'ÉCRAN AUTH ─────────────────────── */ body:has(#p-auth.on), body:has(#p-login.on){ background:#0A0E17 !important; color:#F1F5F9 !important; } body:has(#p-auth.on)::before, body:has(#p-login.on)::before{ content:"" !important;position:fixed !important;inset:0 !important; pointer-events:none !important;z-index:-1 !important; background: radial-gradient(circle at 12% 18%,rgba(34,211,238,.10),transparent 45%), radial-gradient(circle at 88% 82%,rgba(168,85,247,.10),transparent 45%) !important; } /* ─── 2 · HERO TITRES ─────────────────────────────────────────────── */ body:has(#p-auth.on) .ahero h1, body:has(#p-auth.on) .ahero h2, body:has(#p-login.on) .lhero h2{ color:#FFFFFF !important; } body:has(#p-auth.on) .ahero p, body:has(#p-login.on) .lhero p{ color:#CBD5E1 !important; } body:has(#p-auth.on) .ahero .hi, body:has(#p-login.on) .lhero .hi{ filter:drop-shadow(0 0 12px rgba(34,211,238,.4)) !important; } /* ─── 3 · CARTES (.acard) FIDÉLITÉ + FORMS ─────────────────────────── */ body:has(#p-auth.on) .acard, body:has(#p-login.on) .acard{ background:#131C2E !important; border:1px solid #2B3A5A !important; box-shadow:0 8px 28px rgba(0,0,0,.55),0 0 0 1px rgba(34,211,238,.06) !important; color:#F1F5F9 !important; } /* ─── 4 · ONGLETS « Se connecter / S'inscrire » ───────────────────── */ body:has(#p-auth.on) .atabs{ background:#0F1623 !important; border:1px solid #2B3A5A !important; } body:has(#p-auth.on) .atab{ color:#CBD5E1 !important; background:transparent !important; } body:has(#p-auth.on) .atab:hover:not(.on){ color:#FFFFFF !important; background:rgba(34,211,238,.10) !important; } body:has(#p-auth.on) .atab.on{ background:linear-gradient(135deg,#22D3EE 0%,#0891B2 100%) !important; color:#04141C !important; box-shadow:0 4px 12px -2px rgba(34,211,238,.45) !important; font-weight:800 !important; } /* ─── 5 · CHAMPS DE SAISIE (Identifiant / Mot de passe / Signup) ──── */ body:has(#p-auth.on) .fi, body:has(#p-auth.on) input.fi, body:has(#p-auth.on) textarea.fta, body:has(#p-login.on) input.fi{ background:#0A0E17 !important; border:1px solid #2B3A5A !important; color:#FFFFFF !important; font-weight:700 !important; caret-color:#22D3EE !important; } body:has(#p-auth.on) .fi::placeholder, body:has(#p-auth.on) input.fi::placeholder, body:has(#p-login.on) input.fi::placeholder{ color:#94A3B8 !important; opacity:1 !important; } body:has(#p-auth.on) .fi:focus, body:has(#p-auth.on) input.fi:focus, body:has(#p-login.on) input.fi:focus{ background:#0F1623 !important; border-color:#22D3EE !important; box-shadow:0 0 0 3px rgba(34,211,238,.30) !important; } body:has(#p-auth.on) .fl, body:has(#p-login.on) .fl{ color:#CBD5E1 !important; font-weight:700 !important; } /* ─── 6 · BOUTON « Se connecter » / « Créer mon compte » ──────────── */ body:has(#p-auth.on) .btn.ba, body:has(#p-auth.on) #b-login, body:has(#p-auth.on) #b-signup{ background:linear-gradient(135deg,#22D3EE 0%,#0891B2 100%) !important; color:#04141C !important; border:0 !important; font-weight:900 !important; box-shadow:0 6px 22px -4px rgba(34,211,238,.55),inset 0 1px 0 rgba(255,255,255,.25) !important; } body:has(#p-auth.on) .btn.ba:hover:not(:disabled), body:has(#p-auth.on) #b-login:hover:not(:disabled), body:has(#p-auth.on) #b-signup:hover:not(:disabled){ background:linear-gradient(135deg,#67E8F9 0%,#22D3EE 100%) !important; box-shadow:0 10px 28px -4px rgba(34,211,238,.70),inset 0 1px 0 rgba(255,255,255,.30) !important; transform:translateY(-1px); } /* ─── 7 · MESSAGES ERREUR / SUCCÈS ────────────────────────────────── */ body:has(#p-auth.on) .aerr, body:has(#p-login.on) .lerr{ background:rgba(255,59,107,.14) !important; color:#FF6B8E !important; border:1px solid rgba(255,59,107,.50) !important; } body:has(#p-auth.on) .aok{ background:rgba(16,240,161,.12) !important; color:#10F0A1 !important; border:1px solid rgba(16,240,161,.45) !important; } /* ─── 8 · LIENS FOOTER (Politique conf, Mot de passe oublié, WA) ─── */ body:has(#p-auth.on) .footer-link{ color:#CBD5E1 !important; border-bottom-color:#94A3B8 !important; } body:has(#p-auth.on) .footer-link:hover{ color:#22D3EE !important; border-bottom-color:#22D3EE !important; } body:has(#p-auth.on) .wa-footer{ color:#10F0A1 !important; border-bottom-color:#10F0A1 !important; } body:has(#p-auth.on) a[onclick*="_evMdpOublie"]{ color:#CBD5E1 !important; border-bottom-color:#94A3B8 !important; } body:has(#p-auth.on) a[onclick*="_evMdpOublie"]:hover{ color:#22D3EE !important; border-bottom-color:#22D3EE !important; } /* ─── 9 · BANNIÈRE FIDÉLITÉ (#ev-promo-card) — DARK GAMING ────────── */ body:has(#p-auth.on) #ev-promo-card{ background:linear-gradient(135deg,#131C2E 0%,#1A2336 100%) !important; border:1px solid #2B3A5A !important; box-shadow:0 8px 32px rgba(0,0,0,.55),0 0 0 1px rgba(34,211,238,.10) !important; } /* Titre principal de la carte fidélité — accent cyan néon */ body:has(#p-auth.on) #ev-promo-card > div:first-child{ color:#22D3EE !important; } /* Boîte centrale "coffre au trésor" — la classe Tailwind tw-bg-slate-50 doit céder */ body:has(#p-auth.on) #ev-promo-card .tw-bg-slate-50, body:has(#p-auth.on) #ev-promo-card div[class*="tw-bg-slate"]{ background:#0A0E17 !important; border:1px solid #2B3A5A !important; border-radius:12px !important; } /* Texte "Fidélité Automatique : Gagnez des DH Réels !" — secondaire */ body:has(#p-auth.on) #ev-promo-card .tw-text-slate-600, body:has(#p-auth.on) #ev-promo-card div[class*="tw-text-slate"]{ color:#CBD5E1 !important; } /* Texte principal "Gagnez 2 DH pour chaque tranche de 10 DH" — BLANC */ body:has(#p-auth.on) #ev-promo-card .tw-text-2xl, body:has(#p-auth.on) #ev-promo-card .tw-font-bold{ color:#FFFFFF !important; } /* Highlights 2 DH / 10 DH / 4 DH — vert néon */ body:has(#p-auth.on) #ev-promo-card .tw-text-emerald-500, body:has(#p-auth.on) #ev-promo-card span[style*="color:#10B981"]{ color:#10F0A1 !important;font-weight:900 !important; } /* Bloc parrainage 🎁 — fond sombre violet, déjà patché en inline, surcouche pour fail-safe */ body:has(#p-auth.on) #ev-promo-card > div:last-child{ /* On laisse l'inline corrigé prendre la main, juste assurance contre styles légaux */ } /* hr séparateur */ body:has(#p-auth.on) #ev-promo-card hr{ border-top-color:#2B3A5A !important; } /* ─── 10 · CHOIX MODE OPÉRATEUR (#p-login .ob) ───────────────────── */ body:has(#p-login.on) .ob{ background:#131C2E !important; border:1px solid #2B3A5A !important; color:#F1F5F9 !important; box-shadow:0 4px 14px rgba(0,0,0,.35) !important; } body:has(#p-login.on) .ob:hover{ background:#1A2336 !important; border-color:#22D3EE !important; box-shadow:0 6px 18px -2px rgba(34,211,238,.32) !important; transform:translateY(-2px); } body:has(#p-login.on) .ob.on, body:has(#p-login.on) .ob.sel, body:has(#p-login.on) .ob.selected{ background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.14)) !important; border-color:#22D3EE !important; color:#FFFFFF !important; box-shadow:inset 0 0 0 1px rgba(34,211,238,.25),0 0 18px -4px rgba(34,211,238,.45) !important; } body:has(#p-login.on) .ob .nm{ color:#FFFFFF !important; } body:has(#p-login.on) .ob .rl{ color:#CBD5E1 !important; } body:has(#p-login.on) .ob .ic{ filter:drop-shadow(0 0 8px rgba(34,211,238,.45)) !important; } /* ─── 11 · MOT DE PASSE — œil + barre de force (signup) ──────────── */ body:has(#p-auth.on) .pw-eye{ color:#22D3EE !important; opacity:.85 !important; } body:has(#p-auth.on) #pw-strength{ background:#1B2740 !important; } body:has(#p-auth.on) #pw-strength-lbl{ color:#CBD5E1 !important; } /* ─── 12 · BANNIÈRE SOCIAL PROOF (#ev-testeurs-count si présente) ── */ body:has(#p-auth.on) #ev-testeurs-count, body:has(#p-auth.on) #ev-testeurs-count *{ color:#CBD5E1 !important; } body:has(#p-auth.on) #ev-testeurs-count b{ color:#22D3EE !important; } /* ─── 13 · TAILWIND CLASSES UTILISÉES — surcharge globale ────────── */ /* Classes Tailwind colorées qu'on peut rencontrer ailleurs sur l'écran auth. On les redirige toutes vers la palette dark. */ body:has(#p-auth.on) .tw-bg-slate-50, body:has(#p-auth.on) .tw-bg-slate-100, body:has(#p-auth.on) .tw-bg-white{ background:#0A0E17 !important; } body:has(#p-auth.on) .tw-text-slate-500, body:has(#p-auth.on) .tw-text-slate-600, body:has(#p-auth.on) .tw-text-slate-700, body:has(#p-auth.on) .tw-text-gray-500, body:has(#p-auth.on) .tw-text-gray-600, body:has(#p-auth.on) .tw-text-gray-700{ color:#CBD5E1 !important; } body:has(#p-auth.on) .tw-text-slate-800, body:has(#p-auth.on) .tw-text-slate-900, body:has(#p-auth.on) .tw-text-gray-800, body:has(#p-auth.on) .tw-text-gray-900, body:has(#p-auth.on) .tw-text-black{ color:#FFFFFF !important; } body:has(#p-auth.on) .tw-text-emerald-400, body:has(#p-auth.on) .tw-text-emerald-500, body:has(#p-auth.on) .tw-text-emerald-600, body:has(#p-auth.on) .tw-text-green-500, body:has(#p-auth.on) .tw-text-green-600{ color:#10F0A1 !important; } /* ─── 14 · MODE MEMBRE (App Client) — alignement dark ─────────────── */ /* Le markup #mb-p-app utilise du blanc en inline-style. On garantit le dark complet pour cohérence avec l'écran auth (qui est le portail d'entrée). */ #mb-p-app, #mb-p-app .mb-shell{ background:#0A0E17 !important; color:#F1F5F9 !important; } #mb-p-app .mb-sidebar{ background:#0F1623 !important; border-right:1px solid #2B3A5A !important; } #mb-p-app .mb-brand{ color:#22D3EE !important; } #mb-p-app .mb-user{ background:#131C2E !important; border:1px solid #2B3A5A !important; } #mb-p-app .mb-user .av{ background:#1F4E4A !important; color:#FFFFFF !important; } #mb-p-app .mb-user-nm{ color:#FFFFFF !important; } #mb-p-app .mb-user-bal{ color:#CBD5E1 !important; } #mb-p-app .mb-navitem{ background:transparent !important; color:#CBD5E1 !important; } #mb-p-app .mb-navitem:hover{ background:rgba(34,211,238,.08) !important; color:#22D3EE !important; } #mb-p-app .mb-navitem.on{ background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.14)) !important; color:#FFFFFF !important; font-weight:800 !important; } /* ─── 15 · MESSAGE SOCIAL PROOF + PROMO TEXTE ─────────────────────── */ body:has(#p-auth.on) #ev-promo-card *{ /* Sécurité ultime : si une teinte sombre traîne quelque part dans la carte, on la remonte. Le selecteur est faiblement spécifique pour ne pas écraser nos overrides explicites ci-dessus. */ } body:has(#p-auth.on) #ev-promo-card [style*="color:#1F2937"], body:has(#p-auth.on) #ev-promo-card [style*="color:#1f2937"], body:has(#p-auth.on) #ev-promo-card [style*="color:#0F172A"], body:has(#p-auth.on) #ev-promo-card [style*="color:#0f172a"], body:has(#p-auth.on) #ev-promo-card [style*="color:#475569"], body:has(#p-auth.on) #ev-promo-card [style*="color:#64748B"], body:has(#p-auth.on) #ev-promo-card [style*="color:#64748b"], body:has(#p-auth.on) #ev-promo-card [style*="color:#4338CA"], body:has(#p-auth.on) #ev-promo-card [style*="color:#4338ca"], body:has(#p-auth.on) #ev-promo-card [style*="color:#4F46E5"], body:has(#p-auth.on) #ev-promo-card [style*="color:#4f46e5"]{ color:#F1F5F9 !important; } /* ─── 16 · CIBLES PRÉCISES SI LE MARKUP CHANGE — XML/SVG ─────────── */ /* On ne touche pas aux SVG inline (coffre, portefeuille, QR) — leurs couleurs internes sont brand-cohérentes (teal + or). Lisibles sur fond sombre. */ /* =============== ev-polish-v285 =============== */ /* ─── 1 · JETONS PRO ──────────────────────────────────────────────── */ :root, html, html[data-theme]{ --pol-e:cubic-bezier(.22,.61,.36,1) !important; --pol-t-fast:.14s var(--pol-e) !important; --pol-t-med:.22s var(--pol-e) !important; --pol-shadow-1:0 1px 2px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.025) !important; --pol-shadow-2:0 6px 18px rgba(0,0,0,.50),0 1px 3px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.04) !important; --pol-shadow-3:0 18px 44px -10px rgba(0,0,0,.70),0 6px 16px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.06) !important; --pol-glow-cyan:0 0 0 1px rgba(34,211,238,.35),0 0 22px -4px rgba(34,211,238,.45) !important; --pol-glow-violet:0 0 0 1px rgba(168,85,247,.35),0 0 22px -4px rgba(168,85,247,.40) !important; --pol-glow-green:0 0 0 1px rgba(16,240,161,.35),0 0 22px -4px rgba(16,240,161,.40) !important; --pol-glow-red:0 0 0 1px rgba(255,59,107,.40),0 0 22px -4px rgba(255,59,107,.45) !important; --pol-glow-amber:0 0 0 1px rgba(251,191,36,.40),0 0 22px -4px rgba(251,191,36,.42) !important; } /* ─── 2 · CARTES — PROFONDEUR & HIGHLIGHT TOP-EDGE ────────────────── */ .cd, .acard, .bi-card, .ns-step1, .ns-step2, .tbd-card, .kpi-card, .am-kpi-card, .am-coup-tile, .mbrs-stat, .md-stat, #s-mbrs .mbrs-stat, #mobile-dashboard .md-stat, #s-acc .cd, #s-acc .kc, #s-acc .sc, #fs-bar, #ev-promo-card, .row, .lst-row, .li { box-shadow:var(--pol-shadow-2) !important; transition:transform var(--pol-t-fast),box-shadow var(--pol-t-med),border-color var(--pol-t-fast) !important; position:relative; } .cd:hover, .acard:hover:not(form), .bi-card:hover, .tbd-card:hover, .kpi-card:hover, #s-acc .sc:hover, .mbrs-stat:hover, .md-stat:hover { transform:translateY(-2px) !important; border-color:rgba(34,211,238,.32) !important; box-shadow:0 14px 32px -8px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.40),0 0 22px -8px rgba(34,211,238,.30),inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ─── 3 · KPI / MONTANTS — TYPO PREMIUM ───────────────────────────── */ .kv, .ev-kpi-val, .kpi-val, .tbd-kpi, .tbd-val, .tbd-card-value, .mbrs-stat-val, .md-stat-val, .am-kpi-card > div:last-child, #cf-due, #cf-recv, #cf-rendu, #cf-state, #am-kpi-due, #am-kpi-recu, #am-kpi-reste, #am-kpi-arendre, #am-kpi-compose, #fs-bar .fs-seg b, #py-total, #py-pts, #py-cash, #py-pused { font-variant-numeric:tabular-nums !important; letter-spacing:-.02em !important; font-feature-settings:"tnum" 1,"ss01" 1 !important; } /* ─── 4 · TOP BAR — VERRE & SÉPARATEUR LUMINEUX ───────────────────── */ .tb { background:linear-gradient(180deg,rgba(15,22,35,.92),rgba(10,14,23,.88)) !important; border-bottom:1px solid #1E2A44 !important; -webkit-backdrop-filter:blur(16px) saturate(160%) !important; backdrop-filter:blur(16px) saturate(160%) !important; box-shadow:0 1px 0 rgba(34,211,238,.06),0 6px 18px -8px rgba(0,0,0,.40) !important; position:relative; } .tb::after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(34,211,238,.45),rgba(168,85,247,.30),transparent); pointer-events:none; } .tbr .ib, .tb .ib { transition:background var(--pol-t-fast),color var(--pol-t-fast),border-color var(--pol-t-fast),transform var(--pol-t-fast) !important; } .tbr .ib:hover, .tb .ib:hover { transform:translateY(-1px); } .tbr .ib:active, .tb .ib:active { transform:translateY(0); } /* ─── 5 · SIDEBAR — ACCENT BAR LATÉRAL SUR ACTIVE ─────────────────── */ .bn, #bn { background:linear-gradient(180deg,#0F1623 0%,#0A0E17 100%) !important; border-right:1px solid #1E2A44 !important; box-shadow:inset -1px 0 0 rgba(255,255,255,.02) !important; } .bn .ni, #bn .ni { position:relative; transition:background var(--pol-t-fast),color var(--pol-t-fast),transform var(--pol-t-fast),padding-left var(--pol-t-fast) !important; } .bn .ni:hover, #bn .ni:hover { transform:translateX(2px) !important; background:rgba(34,211,238,.06) !important; } .bn .ni.on, #bn .ni.on { background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(168,85,247,.10)) !important; box-shadow:inset 3px 0 0 #22D3EE,0 0 18px -4px rgba(34,211,238,.30) !important; } .bn .ni.on::before, #bn .ni.on::before { display:none !important; } .bn .ni.on .ic, #bn .ni.on .ic { filter:drop-shadow(0 0 8px rgba(34,211,238,.55)) !important; } /* ─── 6 · BOUTONS PRIMAIRES — LIFT & GLOW PROPRE ──────────────────── */ .btn.bg, .btn.ba, button.bg, button.ba, #b-ent, #b-login, #b-signup, #b-payval { position:relative; background:linear-gradient(135deg,#22D3EE 0%,#0891B2 100%) !important; color:#04141C !important; border:0 !important; transition:transform var(--pol-t-fast),box-shadow var(--pol-t-med),filter var(--pol-t-fast) !important; box-shadow:0 6px 18px -4px rgba(34,211,238,.50),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.18) !important; } .btn.bg:hover:not(:disabled), .btn.ba:hover:not(:disabled), button.bg:hover:not(:disabled), button.ba:hover:not(:disabled) { transform:translateY(-1.5px) !important; filter:brightness(1.08) !important; box-shadow:0 12px 28px -6px rgba(34,211,238,.65),inset 0 1px 0 rgba(255,255,255,.36) !important; } .btn.bg:active, .btn.ba:active { transform:translateY(0) !important; } .btn.bg:disabled, .btn.ba:disabled { opacity:.45 !important;cursor:not-allowed !important; filter:grayscale(.4);box-shadow:none !important;transform:none !important; } .btn.bgh, button.bgh { background:#0F1623 !important; border:1px solid #2B3A5A !important; color:#F1F5F9 !important; transition:background var(--pol-t-fast),border-color var(--pol-t-fast),color var(--pol-t-fast),transform var(--pol-t-fast) !important; } .btn.bgh:hover { background:#131C2E !important;border-color:#22D3EE !important;color:#22D3EE !important;transform:translateY(-1px); } .btn.br, button.br { background:linear-gradient(135deg,#FF3B6B 0%,#B91C1C 100%) !important; color:#FFFFFF !important;border:0 !important; box-shadow:0 6px 18px -4px rgba(255,59,107,.50),inset 0 1px 0 rgba(255,255,255,.20) !important; transition:transform var(--pol-t-fast),box-shadow var(--pol-t-med),filter var(--pol-t-fast) !important; } .btn.br:hover { transform:translateY(-1.5px); filter:brightness(1.10); box-shadow:0 12px 28px -6px rgba(255,59,107,.65),inset 0 1px 0 rgba(255,255,255,.28) !important; } /* ─── 7 · INPUTS / FOCUS PREMIUM ──────────────────────────────────── */ .fi, .fta, input, select, textarea { transition:background var(--pol-t-fast),border-color var(--pol-t-fast),box-shadow var(--pol-t-fast) !important; } .fi:hover:not(:focus), .fta:hover:not(:focus), input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color:#3D4F76 !important; } .fi:focus, .fta:focus, input:focus, select:focus, textarea:focus { box-shadow:0 0 0 3px rgba(34,211,238,.28),inset 0 0 0 1px rgba(34,211,238,.10) !important; } /* ─── 8 · PLAN — CELLULES POSTES, ÉCRAN DE SUPERVISION ───────────── */ .pc, .plan-cell { background:linear-gradient(180deg,#131C2E 0%,#0F1623 100%) !important; border:1px solid #2B3A5A !important; border-radius:14px !important; transition:transform var(--pol-t-fast),box-shadow var(--pol-t-med),border-color var(--pol-t-fast) !important; position:relative;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.40) !important; } .pc::before, .plan-cell::before { content:"";position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); pointer-events:none; } .pc:hover, .plan-cell:hover { transform:translateY(-3px) !important; border-color:rgba(34,211,238,.42) !important; box-shadow:0 12px 26px -8px rgba(0,0,0,.65),0 0 20px -4px rgba(34,211,238,.28),inset 0 1px 0 rgba(255,255,255,.07) !important; } .pc.free, .plan-cell.free { border-color:rgba(16,240,161,.45) !important; box-shadow:inset 0 0 0 1px rgba(16,240,161,.16),inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.45),0 0 18px -6px rgba(16,240,161,.30) !important; } .pc.occ, .pc.occupe, .plan-cell.occ { border-color:rgba(34,211,238,.45) !important; box-shadow:inset 0 0 0 1px rgba(34,211,238,.18),inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.45),0 0 18px -6px rgba(34,211,238,.32) !important; } .pc.warn, .pc.alert { border-color:rgba(251,191,36,.50) !important; box-shadow:inset 0 0 0 1px rgba(251,191,36,.22),inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.45),0 0 18px -6px rgba(251,191,36,.32) !important; } .pc.crit, .pc.danger { border-color:rgba(255,59,107,.55) !important; box-shadow:inset 0 0 0 1px rgba(255,59,107,.28),inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.45),0 0 22px -4px rgba(255,59,107,.40) !important; animation:polPulse 2.4s ease-in-out infinite !important; } @keyframes polPulse { 0%,100%{ box-shadow:inset 0 0 0 1px rgba(255,59,107,.28),inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.45),0 0 22px -4px rgba(255,59,107,.40); } 50% { box-shadow:inset 0 0 0 1px rgba(255,59,107,.48),inset 0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.50),0 0 30px -2px rgba(255,59,107,.55); } } .pc-timer, .plan-cell .pc-timer { font-variant-numeric:tabular-nums !important; font-weight:900 !important; letter-spacing:.5px !important; text-shadow:0 0 14px rgba(34,211,238,.32) !important; } .pc.crit .pc-timer { text-shadow:0 0 14px rgba(255,59,107,.42) !important; } /* ─── 9 · CARTES PRODUITS (Caisse / Nouvelle Session) ─────────────── */ #ns-prods > *, #ns-postes > * { transition:transform var(--pol-t-fast),border-color var(--pol-t-fast),box-shadow var(--pol-t-med) !important; box-shadow:var(--pol-shadow-2) !important; } #ns-prods > *:hover, #ns-postes > *:hover:not([data-occ="1"]) { transform:translateY(-3px) scale(1.01) !important; border-color:#22D3EE !important; box-shadow:0 14px 28px -8px rgba(0,0,0,.65),0 0 22px -6px rgba(34,211,238,.36),inset 0 1px 0 rgba(255,255,255,.07) !important; } #ns-postes > *[data-occ="1"] { opacity:.55 !important; filter:grayscale(.3); cursor:not-allowed; } /* ─── 10 · BADGES / CHIPS — HARMONISATION ─────────────────────────── */ .badge, .bdg, .chip, .nbdg, .pbn-item .pbn-bdg, .tg, .pc-stat { border-radius:999px !important; padding:3px 10px !important; font-size:11.5px !important; font-weight:800 !important; letter-spacing:.3px !important; line-height:1.6 !important; } .nbdg { background:#FF3B6B !important; color:#FFFFFF !important; box-shadow:0 0 12px rgba(255,59,107,.55),inset 0 0 0 1px rgba(255,255,255,.18) !important; font-weight:900 !important; } /* ─── 11 · MODALES — ANIMATION D'ENTRÉE & BACKDROP RAFFINÉ ────────── */ .ov { background:rgba(2,6,15,.78) !important; backdrop-filter:blur(10px) saturate(140%) !important; -webkit-backdrop-filter:blur(10px) saturate(140%) !important; } .ov.on .md, .ov.on .pin-panel { animation:polModalIn .22s var(--pol-e) !important; } @keyframes polModalIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } } .md { border:1px solid #2B3A5A !important; box-shadow:0 30px 80px -10px rgba(0,0,0,.85),0 0 0 1px rgba(34,211,238,.10),inset 0 1px 0 rgba(255,255,255,.05) !important; } .mdt { letter-spacing:-.2px !important; } .md > div[style*="width:32px;height:4px"] { background:linear-gradient(90deg,#2B3A5A,#3D4F76,#2B3A5A) !important; } /* ─── 12 · ONGLETS — TRANSITION DOUCE ─────────────────────────────── */ .tabs .tab, .tab { transition:background var(--pol-t-fast),color var(--pol-t-fast),box-shadow var(--pol-t-fast),transform var(--pol-t-fast) !important; } .tab:hover:not(.on) { transform:translateY(-1px); } /* ─── 13 · TOASTS — APPARITION RAFFINÉE + GLOW PAR TYPE ───────────── */ .toast { border:1px solid #2B3A5A !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05) !important; animation:polToastIn .25s var(--pol-e) !important; } .toast--success { border-color:rgba(16,240,161,.55) !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.75),0 0 22px -4px rgba(16,240,161,.32) !important; } .toast--error { border-color:rgba(255,59,107,.60) !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.75),0 0 22px -4px rgba(255,59,107,.36) !important; } .toast--warn { border-color:rgba(251,191,36,.55) !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.75),0 0 22px -4px rgba(251,191,36,.32) !important; } .toast--info { border-color:rgba(34,211,238,.55) !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.75),0 0 22px -4px rgba(34,211,238,.32) !important; } @keyframes polToastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } } /* ─── 14 · BANDEAU CAISSE (bigbanner) — DRAMATIQUE ────────────────── */ #cf-bigbanner { border-radius:14px !important; letter-spacing:.05em !important; text-transform:uppercase !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08) !important; transition:background var(--pol-t-med),box-shadow var(--pol-t-med) !important; } #cf-bigbanner-ic { filter:drop-shadow(0 0 12px currentColor); } /* ─── 15 · TABLES — HOVER SUBTIL & EN-TÊTES ÉPURÉS ───────────────── */ table th, .tbl2 th, .mbrs-table th, #s-mbrs .mbrs-table th { text-transform:uppercase !important; font-weight:800 !important; letter-spacing:.06em !important; border-bottom:1px solid #2B3A5A !important; } tbody tr { transition:background var(--pol-t-fast) !important; } tbody tr:hover td, .tbl2 tbody tr:hover td, .mbrs-table tbody tr:hover td { background:rgba(34,211,238,.07) !important; } /* ─── 16 · BOTTOM NAV PRO MOBILE — TRANSITION & GLOW ACTIF ────────── */ #pro-bottom-nav { border-top:1px solid #1E2A44 !important; box-shadow:0 -1px 0 rgba(34,211,238,.06),0 -6px 22px -8px rgba(0,0,0,.65) !important; -webkit-backdrop-filter:blur(16px) saturate(160%) !important; backdrop-filter:blur(16px) saturate(160%) !important; } #pro-bottom-nav .pbn-item { transition:color var(--pol-t-fast),background var(--pol-t-fast),transform var(--pol-t-fast) !important; } #pro-bottom-nav .pbn-item.on { text-shadow:0 0 14px rgba(34,211,238,.55) !important; } #pro-bottom-nav .pbn-item:active { transform:scale(.94); } /* ─── 17 · BANDE FIDÉLITÉ — RICHE & GAMING ───────────────────────── */ body:has(#p-auth.on) #ev-promo-card { background:linear-gradient(140deg,#131C2E 0%,#1A2336 60%,#0F1623 100%) !important; box-shadow:0 24px 60px -16px rgba(0,0,0,.85),0 0 0 1px rgba(34,211,238,.12),inset 0 1px 0 rgba(255,255,255,.06) !important; position:relative;overflow:hidden; } body:has(#p-auth.on) #ev-promo-card::before { content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 60% 40% at 90% 0%,rgba(168,85,247,.10),transparent 55%), radial-gradient(ellipse 50% 40% at 0% 100%,rgba(34,211,238,.10),transparent 55%); } body:has(#p-auth.on) #ev-promo-card > * { position:relative; } /* ─── 18 · ACARD AUTH — LÉGER GLOW SUR FOCUS DU FORM ──────────────── */ body:has(#p-auth.on) form.acard:focus-within { border-color:rgba(34,211,238,.40) !important; box-shadow:0 14px 36px -10px rgba(0,0,0,.65),0 0 28px -8px rgba(34,211,238,.30),inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ─── 19 · LANG PICKER + IB — MICRO-POLISH ───────────────────────── */ .lang-picker button { transition:background var(--pol-t-fast),color var(--pol-t-fast),border-color var(--pol-t-fast),transform var(--pol-t-fast) !important; } .lang-picker button:hover:not(.lang-active) { transform:translateY(-1px); } .lang-picker button.lang-active { box-shadow:0 0 14px -2px rgba(34,211,238,.55) !important; } /* ─── 20 · SCROLLBAR — FINESSE ────────────────────────────────────── */ ::-webkit-scrollbar { width:8px !important; height:8px !important; } ::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#2B3A5A,#1B2740) !important; border-radius:999px !important; border:2px solid transparent !important; background-clip:padding-box !important; } ::-webkit-scrollbar-thumb:hover { background:#22D3EE !important; background-clip:padding-box !important; } * { scrollbar-color:#2B3A5A transparent !important; scrollbar-width:thin !important; } /* ─── 21 · SÉPARATEURS DOUX ───────────────────────────────────────── */ hr, .sep { border:0 !important; border-top:1px solid #1E2A44 !important; height:1px !important; background:linear-gradient(90deg,transparent,#2B3A5A,transparent) !important; margin:14px 0 !important; } /* ─── 22 · SYNC DOT — PULSATION DOUCE ─────────────────────────────── */ #sync-dot { animation:polSyncPulse 2.4s ease-in-out infinite !important; box-shadow:0 0 10px rgba(16,240,161,.65) !important; } @keyframes polSyncPulse { 0%,100% { opacity:1; box-shadow:0 0 10px rgba(16,240,161,.65); } 50% { opacity:.85; box-shadow:0 0 14px rgba(16,240,161,.95); } } /* ─── 23 · ICÔNES — DROP-SHADOW SUBTIL SUR ACTIFS ────────────────── */ .ni.on .ic, .pbn-item.on .pbn-ic { filter:drop-shadow(0 0 8px rgba(34,211,238,.45)); } /* ─── 24 · FOCUS VISIBLE — RING UNIFORME GAMING ──────────────────── */ :focus-visible { outline:2px solid #22D3EE !important; outline-offset:3px !important; box-shadow:0 0 0 4px rgba(34,211,238,.18) !important; border-radius:10px; } /* ─── 25 · KPI VALUES — TEXT-SHADOW PROFOND, PAS DE GRADIENT TEXT ── */ #s-acc .kv, #mobile-dashboard .md-stat-val, .tbd-card .tbd-card-value, #s-mbrs .mbrs-stat-val { text-shadow:0 1px 0 rgba(0,0,0,.30) !important; } /* ─── 26 · PRÉFÉRENCES UTILISATEUR — reduced-motion ─────────────────── */ @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ─── 27 · GUARDS — AUCUN GLOW SUR TEXTE COURANT ──────────────────── */ /* Glow ciblé uniquement : sidebar actif, plan cells, KPI subtil, focus, toast borders, sync-dot. Lisibilité v282 reste intacte. */ /* =============== ev-readability-v290 =============== */ /* ─── 1. TAILLE MINIMALE des cellules de tableaux ─────────────────── */ .scrl table td, .scrl table th, [id^="s-"] table td, [id^="s-"] table th, .pg table td, .pg table th { font-size: 14px !important; line-height: 1.5 !important; } /* Catch les inline-styles font-size < 13px qu'app.js injecte parfois */ td[style*="font-size:10px" i], td[style*="font-size:11px" i], td[style*="font-size:12px" i], th[style*="font-size:10px" i], th[style*="font-size:11px" i], th[style*="font-size:12px" i] { font-size: 13.5px !important; } /* ─── 2. EN-TÊTES de colonnes — fond légèrement plus clair + uppercase ─ */ .scrl table th, [id^="s-"] table th, .pg table th { background: #1E293B !important; color: #F1F5F9 !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase; padding: 9px 11px !important; font-size: 12.5px !important; border-bottom: 1px solid #334155 !important; } /* ─── 3. CELLULES de données — blanc cassé ultra-lisible ──────────── */ .scrl table td, [id^="s-"] table td, .pg table td { color: #F1F5F9 !important; padding: 8px 11px !important; } /* ─── 4. NEUTRALISE les gris sombres inline (illisibles sur fond dark) ─ */ td[style*="color:#475569" i], td[style*="color:#64748B" i], td[style*="color:#94A3B8" i], td[style*="color:#0F172A" i], td[style*="color:#1F2937" i], td[style*="color:#334155" i], td[style*="color:#374151" i] { color: #E2E8F0 !important; } th[style*="color:#475569" i], th[style*="color:#64748B" i], th[style*="color:#94A3B8" i], th[style*="color:#0F172A" i], th[style*="color:#1F2937" i], th[style*="color:#374151" i] { color: #F1F5F9 !important; } /* ─── 5. CHIFFRES / MONÉTAIRES — gras + tabular-nums + taille bumpée ─ */ td b, td strong { color: #FFFFFF !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; font-size: 14.5px !important; } /* ─── 6. PAGES NOMMÉES par le Directeur — typo confort dédiée ────── */ #s-audit, #s-caissectrl, #s-caisseRpt, #s-monservice, #s-caisseAlerts, #pg-audit, #pg-caissectrl, #pg-caisseRpt, #pg-monservice, #pg-caisseAlerts { font-size: 14px !important; } #s-audit, #s-caissectrl, #s-caisseRpt, #s-monservice, #s-caisseAlerts { color: #F1F5F9 !important; } /* Page « Vérif. Caisse / Jour » (#s-caissecloture) — même traitement sombre que sa page jumelle Rapports Caisse (#s-caisseRpt). */ #s-caissecloture, #pg-caissecloture { font-size: 14px !important; } #s-caissecloture { color: #F1F5F9 !important; } body[data-theme="dark"] #s-caissecloture { color: #F1F5F9 !important; } #s-caissecloture [style*="color:#475569" i], #s-caissecloture [style*="color:#64748B" i], #s-caissecloture [style*="color:#94A3B8" i] { color: #CBD5E1 !important; } #s-caissecloture [style*="font-weight:900" i], #s-caissecloture [style*="font-weight:800" i] { color: #FFFFFF !important; } /* Page « Charges » (#s-charges) — même traitement sombre que ses pages sœurs. */ #s-charges, #pg-charges { font-size: 14px !important; } #s-charges { color: #F1F5F9 !important; } body[data-theme="dark"] #s-charges { color: #F1F5F9 !important; } #s-charges [style*="color:#475569" i], #s-charges [style*="color:#64748B" i], #s-charges [style*="color:#94A3B8" i] { color: #CBD5E1 !important; } #s-charges [style*="font-weight:900" i], #s-charges [style*="font-weight:800" i] { color: #FFFFFF !important; } /* FIX dropdown catégories : la règle globale `select{background:#0A0E17!important}` force le