/* [b2334] BUG DE MON SCOPING (b2318) : data-theme vit sur , donc c'est un ANCETRE de #aq-root. Mon script l'avait transforme en DESCENDANT (`#aq-root [data-theme="noir"]`), un selecteur qui ne matche jamais — le jeu de tokens SOMBRE du kit etait donc mort, et toutes ses surfaces (popups, confirmations, toasts, popover) restaient sur la palette claire quel que soit le theme du CRM. Redresse en `[data-theme="noir"] #aq-root`. REGLE : quand on scope une feuille, un selecteur d'ATTRIBUT DE THEME se place AVANT la racine, jamais apres. */ /* Arpentiq — popups & toasts (kit Margot). Feuille SCOPEE sous #aq-root. ═══════════════════════════════════════════════════════════════════════ [b2318] Ses classes font 2 a 3 caracteres (.ov .pop .btn .seg .tst) et le CRM en definit plusieurs ailleurs : injectees a la racine, elles se seraient repeintes mutuellement. Aucun nom n'est renomme (son moteur les concatene dans des chaines, regex interdite b1741) — tout est scope. L'ECHELLE DE Z-INDEX EST REMAPPEE. Son :root posait --z-overlay:500 / --z-modal:600 / --z-toast:800 ; le CRM definit DEJA ces tokens avec 1000 / 9500 / 9800 et les utilise 51 fois. Les redefinir globalement aurait rabaisse tout le produit, et ses toasts a 800 seraient passes derriere les modales de creation (100089-100092). Ses tokens sont donc poses SUR #aq-root — donc visibles de ses seuls descendants — avec les valeurs de la bande d'exception reelle : popup 100093 (au-dessus de la carte de creation, 100092) confirm 100094 (au-dessus d'une popup, regle de Margot) toast 100096 (au-dessus de tout ce que le produit empile) Le :root du CRM n'est pas touche. ═══════════════════════════════════════════════════════════════════════ */ /* [b2322] ISOLATION PAR LA CASCADE — la moitie oubliee du probleme. ══════════════════════════════════════════════════════════════════════ En b2318 j'ai protege le CRM du kit (scoping sous #aq-root). Je n'ai PAS protege le kit du CRM, et c'est ce qui cassait la carte d'Anthony : le produit definit 31 fois `.btn`, 26 fois `.seg`, 5 fois `.ov` et 4 fois `.pop` — la carte heritait donc de geometries qui la decentraient et la faisaient deborder. Exactement la faute de b2298, dans l'autre sens. `all:revert` annule TOUTE declaration d'auteur venue des autres feuilles a l'interieur de la racine ; les regles du kit, scopees sous #aq-root, valent au moins (1,1,0) et repassent devant ce reset en (1,0,0). [b2299] Les SVG sont EXCLUS : `all:revert` bat aussi leurs attributs de presentation (fill/stroke), de specificite nulle — les pictogrammes deviendraient des aplats noirs. */ #aq-root{} #aq-root, #aq-root *:not(svg, svg *){ all:revert; box-sizing:border-box; margin:0; } #aq-root svg{ display:block; } #aq-root{font-family:'Inter',-apple-system,sans-serif} #aq-root,[data-theme="light"] #aq-root{--bg:#f7f8fa;--surface:#fff;--s2:#f1f3f7;--s3:#e7ebf2;--border:#e4e7ee;--border-hi:#d3d8e3;--text:#14161f;--text-dim:#4a5169;--muted:#8a93ab;--accent:#6b5cf5;--accent-dim:rgba(107,92,245,.09);--chaud:#d64560;--tiede:#c08a2e;--froid:#3d7fc2;--green:#22a06b;--radius:8px;--veil:rgba(20,22,31,.34);--shadow-pop:0 1px 2px rgba(20,22,31,.06),0 24px 60px -14px rgba(20,22,31,.32);--shadow-toast:0 1px 2px rgba(20,22,31,.06),0 14px 36px -10px rgba(20,22,31,.26)} [data-theme="noir"] #aq-root{--bg:#000;--surface:#0a0a0c;--s2:#131319;--s3:#1a1a20;--border:#1f1f27;--border-hi:#2a2a35;--text:#f2f3f7;--text-dim:#a8adbd;--muted:#5f6578;--accent:#8b7bff;--accent-dim:rgba(139,123,255,.12);--chaud:#ff6680;--tiede:#f0c050;--froid:#5ca8ff;--green:#4fd49a;--radius:6px;--veil:rgba(0,0,0,.6);--shadow-pop:0 1px 2px rgba(0,0,0,.5),0 26px 64px -14px rgba(0,0,0,.75);--shadow-toast:0 1px 2px rgba(0,0,0,.5),0 16px 40px -10px rgba(0,0,0,.7)} #aq-root{--z-drawer:100060;--z-overlay:100093;--z-modal:100093;--z-confirm:100094;--z-toast:100096} #aq-root *{margin:0;box-sizing:border-box} #aq-root{font-family:'Inter',-apple-system,sans-serif;color:var(--text)} #aq-root .ov{position:fixed;inset:0;background:var(--veil);display:grid;place-items:center;padding:34px;opacity:0;pointer-events:none;transition:opacity .18s;z-index:var(--z-overlay)} #aq-root .ov.on{opacity:1;pointer-events:auto} #aq-root .ov.cf{z-index:var(--z-confirm)} #aq-root .pop{width:440px;max-width:100%;max-height:calc(100vh - 68px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-hi);border-radius:16px;box-shadow:var(--shadow-pop);overflow:hidden;transform:translateY(10px) scale(.985);opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s} #aq-root .ov.on .pop{transform:none;opacity:1} #aq-root .pop.sm{width:380px} #aq-root .pop.md{width:560px} #aq-root .pop.lg{width:720px} #aq-root .pop-h{display:flex;align-items:flex-start;gap:13px;padding:20px 22px 0} #aq-root .pop-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--s2);border:1px solid var(--border);color:var(--text)} #aq-root .pop-ic svg{width:19px;height:19px} #aq-root .pop-ic.dgr{background:color-mix(in srgb,var(--chaud) 12%,transparent);border-color:color-mix(in srgb,var(--chaud) 26%,transparent);color:var(--chaud)} #aq-root .pop-ic.wrn{background:color-mix(in srgb,var(--tiede) 12%,transparent);border-color:color-mix(in srgb,var(--tiede) 26%,transparent);color:var(--tiede)} #aq-root .pop-ic.ok{background:color-mix(in srgb,var(--green) 12%,transparent);border-color:color-mix(in srgb,var(--green) 26%,transparent);color:var(--green)} #aq-root .pop-ic.inf{background:var(--accent-dim);border-color:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--accent)} #aq-root .pop-t{flex:1;min-width:0} #aq-root .pop-t h2{font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25} #aq-root .pop-t p{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45} #aq-root .pop-x{width:30px;height:30px;flex-shrink:0;border:0;background:transparent;border-radius:8px;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s} #aq-root .pop-x:hover{background:var(--s2);color:var(--text)} #aq-root .pop-x svg{width:16px;height:16px} #aq-root .pop-b{padding:18px 22px 4px;overflow-y:auto;font-size:13.5px;line-height:1.55;color:var(--text-dim)} #aq-root .pop-b b,#aq-root .pop-b strong{color:var(--text);font-weight:600} #aq-root .pop-f{display:flex;align-items:center;gap:9px;padding:18px 22px 20px} #aq-root .pop-f .sp{flex:1} #aq-root .btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:600;border-radius:var(--radius);padding:9px 15px;border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap} #aq-root .btn.pri{background:var(--text);color:var(--bg)} #aq-root .btn.pri:hover{background:var(--text-dim)} #aq-root .btn.sec{background:var(--s2);border-color:var(--border);color:var(--text)} #aq-root .btn.sec:hover{background:var(--s3)} #aq-root .btn.gho{background:transparent;color:var(--text-dim)} #aq-root .btn.gho:hover{background:var(--s2);color:var(--text)} #aq-root .btn.dgr{background:var(--chaud);color:#fff} #aq-root .btn.dgr:hover{filter:brightness(.93)} #aq-root .btn svg{width:15px;height:15px} #aq-root .btn:disabled{opacity:.45;cursor:default} #aq-root .pop-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:7px} #aq-root .pop-list li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px} #aq-root .pop-list .d{width:5px;height:5px;border-radius:50%;background:var(--chaud);margin-top:6px;flex-shrink:0} #aq-root .pop-note{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;border-radius:10px;padding:10px 12px;margin-top:14px;background:var(--s2);border:1px solid var(--border);color:var(--text-dim)} #aq-root .pop-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px} #aq-root .pop-note.wrn{background:color-mix(in srgb,var(--tiede) 9%,transparent);border-color:color-mix(in srgb,var(--tiede) 24%,transparent);color:var(--tiede)} #aq-root .pop-in{width:100%;font-family:inherit;font-size:13.5px;color:var(--text);background:var(--surface);border:1px solid var(--border-hi);border-radius:9px;padding:9px 12px;margin-top:12px;outline:none;transition:.15s} #aq-root .pop-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)} #aq-root .pop-in::placeholder{color:var(--muted)} #aq-root .pop-ctx{display:flex;flex-direction:column;gap:3px;background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:16px;font-size:13px} #aq-root .pop-ctx b{color:var(--text);font-weight:600} #aq-root .pop-ctx span{color:var(--muted);font-size:12.5px} #aq-root .pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px} #aq-root .pop-fld{min-width:0;display:flex;flex-direction:column;gap:6px} #aq-root .pop-fld.full{grid-column:1/-1} #aq-root .pop-fld>.lab{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.01em} #aq-root .pop-fld>.lab .req{color:var(--chaud);margin-left:2px} #aq-root .pop-fld>.lab .opt{color:var(--muted);font-weight:400} #aq-root .pop-fld .row{display:flex;gap:9px;align-items:stretch} #aq-root .pop-fld .pop-in{margin-top:0} #aq-root .pop-today{flex:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:0 16px;cursor:pointer;white-space:nowrap;transition:.15s} #aq-root .pop-today:hover{background:var(--s3)} #aq-root .pop-kb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:14px 22px 0;border-top:1px solid var(--border);margin-top:18px} #aq-root .pop-kb kbd{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-dim);background:var(--s2);border:1px solid var(--border);border-radius:5px;padding:2px 6px} #aq-root .pop-kb .sep{opacity:.5;margin:0 2px} #aq-root .seg{display:inline-flex;gap:7px;flex-wrap:wrap} #aq-root .seg button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-dim);background:var(--surface);border:1px solid var(--border-hi);border-radius:9px;padding:8px 14px;cursor:pointer;transition:.15s} #aq-root .seg button:hover{background:var(--s2);color:var(--text)} #aq-root .seg button.on{background:var(--text);border-color:var(--text);color:var(--bg)} #aq-root .tstack{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:9px;align-items:flex-end;z-index:var(--z-toast);pointer-events:none} @media(max-width:640px){#aq-root .tstack{left:14px;right:14px;align-items:stretch}#aq-root .tst{min-width:0;max-width:100%}} #aq-root .tst{pointer-events:auto;min-width:300px;max-width:min(420px,92vw);display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--border-hi);border-radius:12px;box-shadow:var(--shadow-toast);padding:12px 14px;opacity:0;transform:translateX(16px) scale(.98);transition:opacity .2s,transform .24s cubic-bezier(.2,.8,.2,1)} #aq-root .tst.on{opacity:1;transform:none} #aq-root .tst.out{opacity:0;transform:translateX(10px) scale(.98)} #aq-root .tst-ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;margin-top:1px} #aq-root .tst-ic svg{width:14px;height:14px} #aq-root .tst.ok .tst-ic{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)} #aq-root .tst.err .tst-ic{background:color-mix(in srgb,var(--chaud) 15%,transparent);color:var(--chaud)} #aq-root .tst.wrn .tst-ic{background:color-mix(in srgb,var(--tiede) 15%,transparent);color:var(--tiede)} #aq-root .tst.inf .tst-ic{background:var(--accent-dim);color:var(--accent)} #aq-root .tst-c{flex:1;min-width:0} #aq-root .tst-t{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3} #aq-root .tst-d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4} #aq-root .tst-a{flex-shrink:0;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);background:var(--s2);border:1px solid var(--border);border-radius:7px;padding:5px 10px;cursor:pointer;transition:.15s} #aq-root .tst-a:hover{background:var(--s3)} #aq-root .tst-x{width:24px;height:24px;flex-shrink:0;border:0;background:transparent;border-radius:6px;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s} #aq-root .tst-x:hover{background:var(--s2);color:var(--text)} #aq-root .tst-x svg{width:14px;height:14px} #aq-root .tst-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--border);border-radius:0 0 12px 12px;overflow:hidden} #aq-root .tst-bar i{display:block;height:100%;width:100%;background:var(--muted);transform-origin:left;animation:tsh linear forwards} @keyframes tsh{to{transform:scaleX(0)}} #aq-root .tst{position:relative} @media(prefers-reduced-motion:reduce){#aq-root .pop,#aq-root .tst,#aq-root .ov{transition:none}#aq-root .tst-bar i{animation:none}} /* ═══════════════════════════════════════════════════════════════════════ [b2322] VERROU SUR LES ANCIENS PANNEAUX (Anthony : « qu'on soit tranquille »). Les anciens formulaires ne sont PAS supprimes du DOM, et c'est deliberе : ce sont EUX que lisent les fonctions d'enregistrement du CRM (saveAgendaEvent lit m-ag-*, saveVend lit vf-*, submitNewMandat lit ca-new-*, collectBienForm lit bf-*). Les retirer imposerait de reecrire toute la persistance — un chantier a part entiere, pas un effet de bord d'une passe UI. En revanche ils ne doivent JAMAIS pouvoir s'afficher, quoi qu'un bout de code oublie tente de faire. Ce verrou est en !important et bat donc les `style.display='flex'` inline comme les classes .open : meme si un chemin non recense rouvrait l'un d'eux, l'agent ne verrait rien. Retirer une ligne ci-dessous = rendre ce panneau a nouveau visible. ═══════════════════════════════════════════════════════════════════════ */ #m-agenda-ov, #m-bien, #m-vend, #m-etape-date, #m-mandat-info, #m-compromis-popup, #ca-add-overlay, #ca-add-overlay-bg{ display:none !important; visibility:hidden !important; pointer-events:none !important; } /* ═══════════════════════════════════════════════════════════════════════ [b2323] LE GROS CARRE BLANC — c'est le piege de b2296, refait a l'identique. Le kit porte une regle `body{background;padding;min-height}` pour sa page de demo ; mon scoping l'a reportee sur #aq-root, c'est-a-dire sur la RACINE appendue au document — elle peignait donc une page entiere par-dessus le CRM. Seules les proprietes HERITABLES (typo, couleur) sont desormais conservees sur cette racine ; elle n'a plus aucune boite. REGLE A NE PAS OUBLIER LA PROCHAINE FOIS QU'ON SCOPE UNE FEUILLE : une regle `body` n'est jamais reportable telle quelle sur un conteneur. + ETAGE EXPLICITE. Le popover n'avait AUCUN z-index : chez Margot il est le dernier enfant du , donc au-dessus par l'ordre du DOM. Chez nous il vit dans #aq-root, sous des evenements d'agenda qui, eux, en ont un — d'ou le popover qui passait DESSOUS. On eleve la racine entiere une fois pour toutes plutot que de courir apres chaque composant. ═══════════════════════════════════════════════════════════════════════ */ #aq-root{ position:static !important; background:none !important; min-height:0 !important; padding:0 !important; margin:0 !important; width:auto !important; height:auto !important; border:0 !important; box-shadow:none !important; } #aq-root .pv{ z-index:var(--z-overlay,100093); } #aq-root .pv-scrim{ z-index:calc(var(--z-overlay,100093) - 1); }