/* ══════════════════════════════════════════════════════════════════════
   [b2298] MODALES DE CREATION — ISOLATION, et non plus simple scoping.
   ══════════════════════════════════════════════════════════════════════
   LE CARRE BLANC, nomme par l'inspecteur d'Anthony : `span.sp`, 520x802,
   fond blanc. C'est le RESSORT du pied de sa modale — un span qui ne fait
   qu'ecarter les boutons, et dont sa regle ne declare qu'une chose :
   `flex:1`. Le CRM, lui, definit AUSSI `.sp` (sidepanel.css l.21) avec un
   fond et des dimensions. Le span heritait donc d'un bloc blanc de 520px
   qui recouvrait toute la carte.

   J'avais protege le CRM contre sa feuille. Je ne l'avais pas protegee
   contre celle du CRM — la moitie oubliee du probleme. Et ce n'est pas un
   cas isole : 34 de ses 66 classes courtes (.a .btn .col .em .kb .lab .lb
   .nm .ol .sp .st .ta .td .tl…) sont aussi definies ailleurs dans le CRM.
   Les corriger une par une, c'est en redecouvrir a chaque modale.

   METHODE : isolation par la cascade, l'equivalent d'une iframe sans
   iframe. `#amd-root *{ all: revert }` annule TOUTE declaration d'auteur
   venue des autres feuilles a l'interieur de la modale, puis les regles de
   Margot — desormais scopees sous #amd-root, donc en (1,1,0) au moins —
   repassent devant le reset en (1,0,0). Aucune feuille du CRM ne peut plus
   atteindre l'interieur de la modale, quel que soit l'ordre de chargement.
   ══════════════════════════════════════════════════════════════════════ */
#amd-root{ position:fixed; top:0; left:0; width:0; height:0; overflow:visible; }
/* [b2299] LES ICONES ETAIENT VIDES. `all:revert` a une portee d'auteur en
   (1,0,0) : il bat donc aussi les ATTRIBUTS DE PRESENTATION des SVG
   (fill="none" stroke="currentColor"), qui comptent pour une specificite
   nulle. Les traces retombaient sur les valeurs initiales — fill noir,
   stroke absent — et les pictogrammes disparaissaient dans leur tuile.
   On exclut donc les SVG et leur contenu du reset : leurs attributs font
   foi, et les feuilles du CRM ne stylent pas l'interieur d'un <svg>. */
#amd-root, #amd-root *:not(svg, svg *){ all:revert; box-sizing:border-box; }
#amd-root svg{ display:block; }
#amd-root, #amd-root[data-theme="light"]{--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;--green:#22a06b;--shadow-sm:0 1px 2px rgba(20,22,31,.05)}
#amd-root[data-theme="noir"]{--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;--green:#4fd49a;--shadow-sm:0 1px 2px rgba(0,0,0,.5)}
#amd-root, #amd-root *{margin:0;box-sizing:border-box}
#amd-root{font-family:'Inter',-apple-system,sans-serif;color:var(--text)}
#amd-root .note{max-width:1040px;margin:22px auto 0;font-size:12.5px;color:var(--muted);line-height:1.65}
#amd-root .note b{color:var(--text-dim);font-weight:600}
#amd-root .ov{position:fixed;inset:0;background:color-mix(in srgb,var(--text) 18%,transparent);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
#amd-root .ov.on{opacity:1;pointer-events:auto}
#amd-root .md{position:fixed;top:50%;left:50%;transform:translate(-50%,-47%) scale(.98);width:452px;max-width:calc(100vw - 28px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-hi);border-radius:16px;box-shadow:0 30px 80px -14px rgba(20,22,31,.42);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:51}
#amd-root .md.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#amd-root .md.wide{width:540px}
#amd-root .crumb{font-size:11px;color:var(--muted);font-weight:500;margin-left:auto;align-self:flex-start;padding-top:3px}
#amd-root .pipe{display:flex;align-items:center;gap:3px;overflow-x:auto;padding:2px 0 14px;margin-bottom:2px;border-bottom:1px solid var(--border)}
#amd-root .pipe::-webkit-scrollbar{height:0}
#amd-root .pipe .st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;padding:6px 11px;border-radius:8px;cursor:pointer}
#amd-root .pipe .st.on{background:var(--text);color:var(--bg)}
#amd-root .pipe .st:not(.on):hover{background:var(--s2);color:var(--text)}
#amd-root .pipe .sep{color:var(--border-hi);flex-shrink:0}
#amd-root .pipe .sep svg{width:14px;height:14px;display:block}
#amd-root .lien{display:flex;align-items:center;gap:11px;background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:12px 13px;margin:16px 0}
#amd-root .lien .ll{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);flex:1}
#amd-root .lien .lb{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:600;border-radius:8px;padding:7px 12px;cursor:pointer;border:1px solid var(--border)}
#amd-root .lien .lb svg{width:14px;height:14px}
#amd-root .lien .lb.g{background:var(--surface);color:var(--text)}
#amd-root .lien .lb.g:hover{background:var(--s3)}
#amd-root .lien .lb.a{background:var(--accent-dim);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
#amd-root .grp{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin:18px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--border)}
#amd-root .grp:first-child{margin-top:0}
#amd-root .mh{display:flex;align-items:center;gap:11px;padding:16px 20px 4px}
#amd-root .mh .hic{width:32px;height:32px;border-radius:9px;background:var(--s2);border:1px solid var(--border);color:var(--text);display:grid;place-items:center;flex-shrink:0}
#amd-root .mh .hic svg{width:17px;height:17px}
#amd-root .mh .ht{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
#amd-root .mh .hs{font-size:12.5px;color:var(--muted);margin-top:1px}
#amd-root .mx{margin-left:auto;width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;align-self:flex-start}
#amd-root .mx:hover{background:var(--s2);color:var(--text)}
#amd-root .mx svg{width:17px;height:17px}
#amd-root .mb{padding:16px 20px 6px;overflow-y:auto;flex:1}
#amd-root .mf{display:flex;align-items:center;gap:10px;padding:14px 20px 16px}
#amd-root .mf .sp{flex:1}
#amd-root .kb{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#amd-root .kb kbd{font-family:'JetBrains Mono',monospace;font-size:10.5px;background:var(--s2);border:1px solid var(--border);border-radius:5px;padding:2px 6px;color:var(--text-dim)}
#amd-root .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:13.5px;font-weight:600;border-radius:10px;padding:10px 17px;cursor:pointer;border:1px solid transparent}
#amd-root .btn svg{width:15px;height:15px}
#amd-root .btn.pri{background:var(--text);color:var(--bg)}
#amd-root .btn.pri:hover{background:var(--text-dim)}
#amd-root .btn.gho{background:transparent;color:var(--text-dim)}
#amd-root .btn.gho:hover{color:var(--text)}
#amd-root .fld{margin-bottom:13px}
#amd-root .lab{font-size:12.5px;font-weight:500;color:var(--text-dim);margin-bottom:6px;display:block;letter-spacing:-.01em}
#amd-root .lab .opt{color:var(--muted);font-weight:400}
#amd-root .lab .pf{float:right;font-size:9.5px;font-weight:600;color:var(--accent);background:var(--accent-dim);border-radius:99px;padding:2px 7px}
#amd-root .in{width:100%;border:1px solid var(--border);background:var(--s2);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:13.5px;color:var(--text);outline:none;transition:.14s}
#amd-root .in:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-dim)}
#amd-root .in::placeholder{color:var(--muted)}
#amd-root .in.pref{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-dim);color:var(--accent);font-weight:600}
#amd-root textarea.in{resize:none;line-height:1.5}
#amd-root .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#amd-root .hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.45}
#amd-root .seg{display:flex;gap:7px;flex-wrap:wrap}
#amd-root .seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-dim);border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:8px 15px;cursor:pointer;transition:.14s}
#amd-root .seg button:hover{border-color:var(--border-hi);background:var(--s2)}
#amd-root .seg button svg{width:14px;height:14px}
#amd-root .seg button.on{color:var(--text);border-color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--text)}
#amd-root .opts{display:flex;flex-direction:column;gap:9px}
#amd-root .optc{display:flex;align-items:center;gap:13px;border:1px solid var(--border);background:var(--surface);border-radius:13px;padding:14px 15px;cursor:pointer;transition:.14s}
#amd-root .optc:hover{border-color:var(--border-hi)}
#amd-root .optc.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
#amd-root .optc .oi{width:38px;height:38px;border-radius:10px;background:var(--s2);display:grid;place-items:center;color:var(--text);flex-shrink:0}
#amd-root .optc.on .oi{background:var(--accent-dim);color:var(--accent)}
#amd-root .optc .oi svg{width:19px;height:19px}
#amd-root .optc .ot{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
#amd-root .optc .od{font-size:12px;color:var(--muted);margin-top:2px}
#amd-root .optc .ock{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-hi);flex-shrink:0;display:grid;place-items:center;transition:.14s}
#amd-root .optc.on .ock{background:var(--accent);border-color:var(--accent)}
#amd-root .optc .ock svg{width:12px;height:12px;color:#fff;opacity:0}
#amd-root .optc.on .ock svg{opacity:1}
#amd-root .toks{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
#amd-root .tok{display:inline-flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--border);border-radius:99px;padding:5px 8px 5px 5px;font-size:13px;font-weight:600}
#amd-root .tok .ta{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700}
#amd-root .tok.add{cursor:pointer;color:var(--accent)}
#amd-root .tok.add .ta{background:var(--accent-dim);color:var(--accent)}
#amd-root .tok.add svg{width:14px;height:14px}
#amd-root .chips{display:flex;gap:7px;flex-wrap:wrap}
#amd-root .chip{font-family:inherit;font-size:13px;font-weight:600;color:var(--text-dim);background:var(--s2);border:1px solid transparent;border-radius:99px;padding:8px 14px;cursor:pointer}
#amd-root .chip.on{color:var(--text);border-color:var(--border-hi);background:var(--surface)}
#amd-root .back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;margin-bottom:14px}
#amd-root .back svg{width:14px;height:14px}
#amd-root .back:hover{color:var(--text)}
#amd-root .recap{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:13px 14px;margin-bottom:16px}
#amd-root .recap-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
#amd-root .recap-t{font-size:12.5px;font-weight:700;color:var(--text-dim)}
#amd-root .recap-b{margin-left:auto;font-size:9.5px;font-weight:600;color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent);border-radius:99px;padding:2px 8px}
#amd-root .recap-row{display:flex;gap:12px;padding:5px 0;font-size:12.5px;border-top:1px solid var(--border)}
#amd-root .recap-row .rl{width:100px;flex-shrink:0;color:var(--muted)}
#amd-root .recap-row .rv{color:var(--text-dim);font-weight:500}
#amd-root .recap-f{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.4;font-style:italic}
#amd-root .tp{position:relative}
#amd-root .tp-btn{display:flex;align-items:center;gap:11px;width:100%;border:1px solid var(--border);background:var(--s2);border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit;text-align:left;transition:.14s}
#amd-root .tp-btn:hover{background:var(--s3)}
#amd-root .tp.open .tp-btn{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-dim)}
#amd-root .tp-btn .ti{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;flex-shrink:0}
#amd-root .tp-btn .ti svg{width:15px;height:15px}
#amd-root .tp-btn .tl{flex:1;font-size:13.5px;font-weight:600}
#amd-root .tp-btn .td{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:1px}
#amd-root .tp-btn .cv{color:var(--muted);transition:transform .16s}
#amd-root .tp.open .tp-btn .cv{transform:rotate(180deg)}
#amd-root .tp-btn .cv svg{width:15px;height:15px}
#amd-root .tp-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border-hi);border-radius:12px;box-shadow:0 20px 50px -14px rgba(20,22,31,.32);padding:6px;z-index:6;display:none;max-height:290px;overflow-y:auto}
#amd-root .tp.open .tp-pop{display:block}
#amd-root .tp-grp{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:9px 9px 5px}
#amd-root .tp-opt{display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:8px;cursor:pointer}
#amd-root .tp-opt:hover{background:var(--s2)}
#amd-root .tp-opt .ti{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:#fff;flex-shrink:0}
#amd-root .tp-opt .ti svg{width:15px;height:15px}
#amd-root .tp-opt .ol{font-size:13.5px;font-weight:600}
#amd-root .tp-opt .odd{font-size:11.5px;color:var(--muted)}
#amd-root .tp-opt .oc{margin-left:auto;color:var(--accent);opacity:0}
#amd-root .tp-opt.on .oc{opacity:1}
#amd-root .tp-opt .oc svg{width:16px;height:16px}
#amd-root .pk{position:relative}
#amd-root .pk-in{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--s2);border-radius:9px;padding:0 10px;transition:.14s}
#amd-root .pk.open .pk-in{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-dim)}
#amd-root .pk-in svg.si{width:15px;height:15px;color:var(--muted);flex-shrink:0}
#amd-root .pk-in input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:inherit;font-size:13.5px;color:var(--text);padding:9px 0}
#amd-root .pk-in input::placeholder{color:var(--muted)}
#amd-root .pk-pop{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--surface);border:1px solid var(--border-hi);border-radius:11px;box-shadow:0 20px 50px -14px rgba(20,22,31,.3);padding:5px;z-index:6;display:none;max-height:250px;overflow-y:auto}
#amd-root .pk.open .pk-pop{display:block}
#amd-root .pk-opt{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer}
#amd-root .pk-opt:hover{background:var(--s2)}
#amd-root .pk-opt .oa{width:28px;height:28px;border-radius:7px;background:var(--s3);display:grid;place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0;color:var(--text-dim)}
#amd-root .pk-opt .oa svg{width:15px;height:15px}
#amd-root .pk-opt .onm{font-size:13.5px;font-weight:600}
#amd-root .pk-opt .osb{font-size:11.5px;color:var(--muted)}
#amd-root .pk-empty{padding:9px;font-size:12.5px;color:var(--muted)}
#amd-root .pk-create{display:flex;align-items:center;gap:10px;padding:9px;border-radius:8px;cursor:pointer;color:var(--accent);border-top:1px solid var(--border);margin-top:3px}
#amd-root .pk-create:hover{background:var(--accent-dim)}
#amd-root .pk-create .oa{background:var(--accent-dim);color:var(--accent)}
#amd-root .pk-create svg{width:15px;height:15px}
#amd-root .pk-create .onm{color:var(--accent);font-weight:600}
#amd-root .pk-tok{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:7px 9px}
#amd-root .pk-tok .oa{width:28px;height:28px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0}
#amd-root .pk-tok .oa svg{width:15px;height:15px}
#amd-root .pk-tok .onm{font-size:13.5px;font-weight:600;flex:1}
#amd-root .pk-tok .osb{font-size:11.5px;color:var(--muted);font-weight:400}
#amd-root .pk-tok .rm{width:24px;height:24px;border-radius:6px;color:var(--muted);display:grid;place-items:center;cursor:pointer}
#amd-root .pk-tok .rm:hover{background:var(--s2);color:var(--text)}
#amd-root .pk-tok .rm svg{width:15px;height:15px}
#amd-root .dp{position:relative}
#amd-root .dp-in{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--s2);border-radius:9px;padding:9px 11px;cursor:pointer;transition:.14s}
#amd-root .dp.open .dp-in{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-dim)}
#amd-root .dp-in svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
#amd-root .dp-in .dv{flex:1;font-size:13.5px;color:var(--text)}
#amd-root .dp-in .dv.ph{color:var(--muted)}
#amd-root .dp-pop{position:absolute;top:calc(100% + 5px);left:0;background:var(--surface);border:1px solid var(--border-hi);border-radius:12px;box-shadow:0 20px 50px -14px rgba(20,22,31,.3);padding:12px;z-index:7;display:none;width:236px}
#amd-root .dp.open .dp-pop{display:block}
#amd-root .dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
#amd-root .dp-nav .mo{font-size:13px;font-weight:700}
#amd-root .dp-nav button{width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--text-dim);cursor:pointer;display:grid;place-items:center}
#amd-root .dp-nav button:hover{background:var(--s2)}
#amd-root .dp-nav button svg{width:15px;height:15px}
#amd-root .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
#amd-root .dp-grid .wd{font-size:9.5px;font-weight:600;color:var(--muted);text-align:center;padding:3px 0}
#amd-root .dp-grid .dc{aspect-ratio:1;display:grid;place-items:center;font-size:12px;border-radius:7px;cursor:pointer;color:var(--text-dim)}
#amd-root .dp-grid .dc:hover{background:var(--s2);color:var(--text)}
#amd-root .dp-grid .dc.mut{color:var(--border-hi)}
#amd-root .dp-grid .dc.on{background:var(--text);color:var(--bg);font-weight:700}
#amd-root .dp-grid .dc.tod{color:var(--accent);font-weight:700}
#amd-root .ext{display:grid;grid-template-columns:1fr .8fr auto;gap:8px}
#amd-root .ext .add{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:0 14px;cursor:pointer;white-space:nowrap}
#amd-root .ext .add:hover{background:var(--s3)}
#amd-root .ext-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
#amd-root .ext-tag{display:flex;align-items:center;gap:9px;background:var(--s2);border-radius:8px;padding:7px 10px;font-size:13px}
#amd-root .ext-tag .em{font-weight:600}
#amd-root .ext-tag .nm{color:var(--muted)}
#amd-root .ext-tag .rm{margin-left:auto;color:var(--muted);cursor:pointer;display:grid;place-items:center}
#amd-root .ext-tag .rm svg{width:14px;height:14px}
#amd-root .cols{display:flex;flex-wrap:wrap;gap:9px}
#amd-root .col{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.12s;position:relative}
#amd-root .col:hover{transform:scale(1.12)}
#amd-root .col.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
#amd-root .col.auto{background:var(--surface);border:1.5px solid var(--text);display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace}
#amd-root .cp{position:relative;flex:none}
#amd-root .cp-btn{height:100%;aspect-ratio:1;border-radius:9px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;transition:.14s}
#amd-root .cp-btn:hover .cp-dot{transform:scale(1.08)}
#amd-root .cp.open .cp-btn{box-shadow:none}
#amd-root .cp{position:relative;flex:none;align-self:stretch;display:flex;margin-left:-10px}
#amd-root .cp-dot{width:24px;height:24px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border-hi);transition:.14s}
#amd-root .cp.open .cp-dot{box-shadow:0 0 0 3px var(--accent-dim);border-color:var(--accent)}
#amd-root .cp-pop{position:absolute;top:calc(100% + 6px);right:0;width:210px;background:var(--surface);border:1px solid var(--border-hi);border-radius:12px;box-shadow:0 20px 50px -14px rgba(20,22,31,.3);padding:11px;z-index:7;display:none}
#amd-root .cp.open .cp-pop{display:block}
/* Geometrie de la carte et du voile par l'id, sous la racine : (2,0,0),
   au-dessus du reset comme de tout ce que porte le CRM. */
#amd-root #amd-ov{
  position:fixed; inset:0; z-index:100089;
  background:color-mix(in srgb, var(--text) 18%, transparent);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
#amd-root #amd-ov.on{ opacity:1; pointer-events:auto; }
#amd-root #amd-md{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-47%) scale(.98);
  width:452px; max-width:calc(100vw - 28px); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-hi); border-radius:16px;
  box-shadow:0 30px 80px -14px rgba(20,22,31,.42);
  opacity:0; pointer-events:none; z-index:100090;
  transition:opacity .2s, transform .2s;
}
#amd-root #amd-md.wide{ width:540px; }
/* ══════════════════════════════════════════════════════════════════════
   [b2316] MODALE « NOUVEAU BIEN » — navigation sectionnee (handoff Margot
   « modal-bien »). Deux colonnes : nav a gauche, panneau a droite, une
   seule section visible a la fois. HAUTEUR FIXE et non « selon le
   contenu » : sa maquette l'impose (`height:calc(100vh - 48px)`) et c'est
   ce qui empeche la carte de sauter d'une section a l'autre — un bien a
   sept sections de tailles tres inegales.
   Ses regles sont re-scopees sous #amd-root : `.bl` et `.bc` font deux
   caracteres, exactement le genre de nom que le CRM redefinit ailleurs
   (lecon b2298).                                                        */
#amd-root #amd-md.xl{ width:740px; height:calc(100vh - 48px); }
#amd-root #amd-md.xl .mb{ padding:0; display:flex; min-height:0; flex:1; }
#amd-root .bnav{
  width:210px; flex-shrink:0; border-right:1px solid var(--border);
  background:var(--s2); padding:12px 10px; overflow-y:auto;
}
#amd-root .bnav-i{
  display:flex; align-items:center; gap:10px; padding:9px 11px;
  border-radius:9px; cursor:pointer; color:var(--text-dim);
  transition:.12s; margin-bottom:3px;
}
#amd-root .bnav-i:hover{ background:color-mix(in srgb, var(--surface) 60%, transparent); }
#amd-root .bnav-i.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
#amd-root .bnav-i .bl{
  flex:1; font-size:13px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#amd-root .bnav-i .bc{
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);
  background:var(--s3); border-radius:99px; padding:1px 7px;
}
#amd-root .bnav-i.on .bc{ background:var(--accent-dim); color:var(--accent); }
#amd-root .bnav-i .dot{ width:6px; height:6px; border-radius:50%; background:var(--chaud); flex-shrink:0; }
/* [b2317] Bouton d'import par capture, en pied de nav. Gabarit du .dna-ask
   du header (pilule surface, etincelle accent, ombre douce, elevation au
   survol) — c'est la meme promesse : « Arpe fait le travail a ta place ». */
/* [b2319] LES DIX NOTES SUR UNE LIGNE (Anthony). A 10 crans, les pastilles
   par defaut debordaient et le « 10 » repartait seul a la ligne. La rangee
   passe en nowrap et les chips se partagent la largeur : elles retrecissent
   au lieu de se replier. Regle bornee a #vdNote — les autres rangees de
   chips (verdict, secteurs) doivent continuer a se replier. */
#amd-root #vdNote{ flex-wrap:nowrap; gap:5px; width:100%; }
#amd-root #vdNote .chip{
  flex:1 1 0; min-width:0; padding-left:0; padding-right:0;
  text-align:center; justify-content:center;
}
#amd-root .bnav-imp-wrap{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
#amd-root .bnav-imp{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:8px 10px; border-radius:10px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-hi);
  box-shadow:0 1px 2px rgba(20,22,31,.06), 0 4px 12px rgba(20,22,31,.05);
  font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s;
}
#amd-root .bnav-imp svg{ width:15px; height:15px; color:var(--accent); flex-shrink:0; }
#amd-root .bnav-imp:hover:not(:disabled){
  transform:translateY(-1px); border-color:var(--accent);
  box-shadow:0 2px 4px rgba(20,22,31,.07), 0 10px 22px rgba(20,22,31,.09);
}
#amd-root .bnav-imp:disabled{ cursor:default; opacity:.62; }
/* L'etincelle tourne pendant la lecture : le seul retour visuel possible
   pendant un appel qui peut durer plusieurs secondes. */
#amd-root .bnav-imp.busy svg{ animation:amdSpark 1.1s linear infinite; }
@keyframes amdSpark{ to{ transform:rotate(360deg); } }
#amd-root .bnav-imp-h{ margin-top:7px; font-size:11px; line-height:1.35; color:var(--muted); }
@media(prefers-reduced-motion:reduce){
  #amd-root .bnav-imp.busy svg{ animation:none; }
  #amd-root .bnav-imp:hover:not(:disabled){ transform:none; }
}
#amd-root .bpane{ flex:1; min-width:0; padding:16px 20px; overflow-y:auto; }
#amd-root .bpane-t{ font-size:14px; font-weight:700; letter-spacing:-.01em; margin-bottom:2px; }
#amd-root .bpane-d{ font-size:12px; color:var(--muted); margin-bottom:16px; }
#amd-root .bsec{ display:none; }
#amd-root .bsec.on{ display:block; }
#amd-root .row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media(max-width:720px){
  /* La nav passe en onglets horizontaux : 210px de colonne sur un
     telephone ne laisseraient pas de place au formulaire. */
  #amd-root #amd-md.xl{ width:calc(100vw - 20px); }
  #amd-root #amd-md.xl .mb{ flex-direction:column; }
  #amd-root .bnav{
    width:auto; display:flex; gap:6px; overflow-x:auto;
    border-right:0; border-bottom:1px solid var(--border);
  }
  #amd-root .bnav-i .bc, #amd-root .bnav-i .dot{ display:none; }
  #amd-root .row3{ grid-template-columns:1fr 1fr; }
}
#amd-root #amd-md.on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
/* Le ressort du pied : il ECARTE, il ne peint pas. */
#amd-root .mf .sp{ flex:1; background:none; border:0; box-shadow:none; width:auto; height:auto; }

/* [b2300] Popover de choix du consultant + champ d'ajout de secteur.
   Classes prefixees amd- : elles n'existent nulle part ailleurs. */
#amd-root .toks{ position:relative; }
/* [b2301] Les deux popovers (consultant, adresse) reutilisent .pk-pop et
   .pk-opt — le composant de liste de Margot. Ne restent ici que les reglages
   de POSITION propres a chaque contexte, jamais un second style. */
/* [b2303] .amd-pop retire : le popover est desormais en position fixed. */
#amd-root .pk-opt:hover{ background:var(--s2); }
#amd-root .tok .rm:hover{ opacity:1 !important; }
#amd-root .chip .rm:hover{ opacity:1 !important; }

/* ══════════════════════════════════════════════════════════════════════
   [b2302] TRANSITION ENTRE LES ETAPES + AFFORDANCE AU SURVOL.
   ══════════════════════════════════════════════════════════════════════ */

/* Au survol d'une carte de nature, la pastille se coche en violet : on voit
   ce qu'on s'apprete a choisir AVANT de cliquer. La coche reste a demi
   visible tant qu'on n'a pas valide, pleine une fois selectionne. */
#amd-root .optc:hover .ock{ border-color:var(--accent); background:var(--accent); }
#amd-root .optc:hover .ock svg{ opacity:.55; }
#amd-root .optc.on .ock svg{ opacity:1; }

/* Passage d'une etape a l'autre : le corps glisse et se fond, dans le sens
   de la navigation. La direction est portee par data-step sur la carte.
   `prefers-reduced-motion` respecte — l'animation est un confort, pas une
   information. */
@keyframes amdStepFwd{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
@keyframes amdStepBack{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }
#amd-root #amd-md[data-step="fwd"]  .mb{ animation:amdStepFwd  .26s cubic-bezier(.22,.7,.3,1) both; }
#amd-root #amd-md[data-step="back"] .mb{ animation:amdStepBack .26s cubic-bezier(.22,.7,.3,1) both; }
#amd-root #amd-md[data-step] .mh,
#amd-root #amd-md[data-step] .mf{ animation:amdStepFwd .22s cubic-bezier(.22,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce){
  #amd-root #amd-md[data-step] .mb,
  #amd-root #amd-md[data-step] .mh,
  #amd-root #amd-md[data-step] .mf{ animation:none; }
}

/* [b2303] Popover en position fixed : il vit hors du cadre defilant, donc
   hors du contexte de la carte — il porte sa propre elevation. */
#amd-root .amd-fx{
  position:fixed !important; display:block !important;
  max-height:260px; overflow-y:auto;
  box-shadow:0 24px 60px -16px rgba(20,22,31,.38);
}
/* La rangee des secteurs s'aligne et respire, le champ prend le gabarit de
   Margot au lieu d'un style bricole. */
#amd-root .chips{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
#amd-root .amd-zin{
  width:210px; height:32px; padding:0 11px;
  font-size:12.5px; line-height:32px;
  border-radius:9px;
}
#amd-root .chip .rm{ font-size:13px; line-height:1; }

/* [b2307] Interrupteur « journée entière » : sa classe .tgl existe dans sa
   feuille mais sans etat actif visible ici — on le rend lisible. */
#amd-root .tgl{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text); }
#amd-root .tgl .sw{
  width:34px; height:20px; border-radius:99px; background:var(--s3, #e4e7ee);
  position:relative; transition:.16s; flex-shrink:0;
}
#amd-root .tgl .sw::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:.16s;
  box-shadow:0 1px 3px rgba(20,22,31,.28);
}
#amd-root .tgl.on .sw{ background:var(--accent); }
#amd-root .tgl.on .sw::after{ transform:translateX(14px); }

/* [b2311] EMPILEMENT : la carte du dessous recule legerement au lieu de
   disparaitre — on doit comprendre qu'on est reparti d'un cran, pas qu'on a
   change d'ecran. Les cartes empilees montent en z-index. */
#amd-root .md.amd-under{
  transform:translate(-50%,-50%) scale(.965) !important;
  /* [b2312] Le flou dit « ce n'est plus la carte active » avant meme qu'on
     lise quoi que ce soit — recul + desaturation seuls restaient lisibles,
     donc ambigus. 1.5px : assez pour que l'oeil decroche, pas assez pour
     qu'on perde le contexte de la saisie en cours dessous. */
  filter:saturate(.85) blur(1.5px);
  pointer-events:none;
  transition:transform .2s, filter .2s;
}
#amd-root #amd-md2{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-47%) scale(.98);
  width:452px; max-width:calc(100vw - 28px); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-hi); border-radius:16px;
  box-shadow:0 34px 90px -14px rgba(20,22,31,.46);
  opacity:0; pointer-events:none; z-index:100092;
  transition:opacity .2s, transform .2s;
}
#amd-root #amd-md2.wide{ width:540px; }
#amd-root #amd-md2.on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }

/* ═══════════════════════════════════════════════════════════════════════
   [b2543] LA MENTION « OBLIGATOIRE », EN ROUGE CLAIR.

   ⚠ MON SELECTEUR DE b2542 NE MATCHAIT RIEN : j'avais ecrit `.amd .fld .lab`
   alors que sa feuille scope tout sur `#amd-root` (`#amd-root .lab`, l.…).
   D'ou l'`<em>` nu, en italique par defaut, colle au mot — exactement ce
   qu'Anthony a vu. C'est la troisieme fois de la session que j'ecris une
   regle sur un scope suppose au lieu de le LIRE (b2524, b2528, celle-ci).

   LA FORME EST LA SIENNE : sa feuille porte deja `#amd-root .lab .pf`, une
   pastille de label en accent. On la reprend valeur pour valeur et on change
   la couleur — pas de quatrieme dessin de badge dans ce produit. Le rouge
   est `--chaud`, celui des refus et des alertes du produit, adouci par un
   fond a 12 % pour rester une PRECISION et non un avertissement.

   ⚠ PAS DE `float:right` ici, contrairement a `.pf` : la mention doit suivre
   le mot « Vendeur », pas partir au bout de la ligne — c'est ce qui la lie
   au champ qu'elle qualifie. */
#amd-root .lab .req{
  display:inline-block; margin-left:9px; vertical-align:1px;
  font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.02em;
  color:var(--chaud,#d64560);
  background:color-mix(in srgb, var(--chaud,#d64560) 12%, transparent);
  border-radius:99px; padding:2px 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   [b2562] UN BADGE DE NATURE DANS LE PICKER.

   Anthony : « chaque item (acquéreur, vendeur, dossier, biens) avec un
   petit badge de couleur pour reconnaître d'un coup d'œil ». Le mot seul
   demandait de LIRE ; la couleur se voit avant.

   ⚠ MES BADGES DE b2560 ETAIENT POSES SUR `search-v2`, DONT LA FEUILLE EST
   DESACTIVEE dans index.html (« remplacé par cmdk.css », l.103). Ils ne
   pouvaient pas s'afficher, et sa capture montrait CE picker. Verifier
   quelle surface l'agent regarde avant d'y coudre quoi que ce soit.

   Les teintes viennent des jetons du produit, jamais d'un hexadecimal
   choisi ici : `--accent` pour l'acquereur, `--tiede` pour le vendeur,
   `--green` pour le dossier — une affaire engagee —, `--muted` pour le
   bien, qui est un objet et non une personne. Scope a `#amd-root`, comme
   tout le reste de cette feuille (lecon b2543).
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠ [b2563] SCOPE RETIRE, ET C'EST LA QUATRIEME FOIS DE LA SERIE.
   J'avais ecrit `#amd-root .pk-opt .osb .pk-nat` — or la capture d'Anthony
   montre ce picker dans la modale AGENDA, qui ne vit pas sous `#amd-root`.
   La regle ne matchait donc rien, et l'`<em>` sortait nu : italique par
   defaut, colle au texte. Exactement le symptome de b2543 et b2555.

   `.pk-nat` EST NOTRE CLASSE et n'est emise que par ce code : elle n'a
   besoin d'aucun conteneur pour etre sure. Scoper sur un ancetre qu'on
   SUPPOSE est precisement ce qui casse ; scoper sur une classe qu'on POSE
   ne peut pas. */
/* ═══════════════════════════════════════════════════════════════════════
   [b2566] LA CATEGORIE EN GRAS, ET RIEN D'AUTRE (Anthony : « laisse tomber
   le badge, mets juste la categorie en gras »).

   Il a raison d'arreter : j'ai brule quatre builds sur ce badge — pose sur
   une feuille desactivee (b2560), scope sur un conteneur suppose (b2562),
   descope (b2563), puis change de balise (b2564) — sans jamais reussir a le
   faire apparaitre chez lui. Chaque tentative etait defendable et aucune n'a
   marche, ce qui est le signe qu'il fallait changer de MOYEN, pas
   d'implementation.

   `<b>` porte le gras PAR DEFAUT : meme si cette regle ne s'appliquait pas
   davantage que les precedentes, le resultat serait exactement ce qu'Anthony
   demande. Le CSS ne fait plus qu'ajuster la couleur ; il n'est plus la
   condition du resultat. C'est la lecon de b2564 poussee jusqu'au bout :
   quand la balise peut porter l'intention, elle doit la porter. */
.pk-opt .pk-nat{ font-weight:700; color:var(--text-dim); font-style:normal; }