/* TaskFlow — widget. Système sobre de type SaaS B2B. Tailles en rem : l'interface grandit avec la fenêtre et le zoom. */
[hidden]{display:none !important}
*{box-sizing:border-box}
:root{
  --bg:#f8fafc; --surface:#ffffff; --ink:#0f172a; --mut:#64748b; --line:#e2e8f0; --line-strong:#cbd5e1;
  --ac:#1d4ed8; --ac-hover:#1e40af; --on-ac:#ffffff; --ac-soft:#eff4ff;
  --warn:#b45309; --warn-soft:#fffbeb; --bad:#b91c1c; --bad-soft:#fef2f2; --ok:#15803d; --ok-soft:#f0fdf4;
  --lvl:var(--line-strong);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1220; --surface:#111a2e; --ink:#e5eaf3; --mut:#94a3b8; --line:#1f2b44; --line-strong:#33425f;
  --ac:#6b9bff; --ac-hover:#8fb2ff; --on-ac:#0b1220; --ac-soft:#16233f;
  --warn:#fbbf24; --warn-soft:#2a2008; --bad:#f87171; --bad-soft:#2d1214; --ok:#4ade80; --ok-soft:#0f2417;
}}
html{font-size:clamp(13px,3.4vmin,30px)}
body{margin:0;font:1rem/1.45 -apple-system,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;font-feature-settings:"tnum"}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:.15rem solid var(--ac);outline-offset:.1rem}
.i{width:1.1em;height:1.1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}

button{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:.07rem solid var(--ac);border-radius:.5rem;padding:.42em .95em;background:var(--ac);color:var(--on-ac);font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
button:hover{background:var(--ac-hover);border-color:var(--ac-hover)}
button.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
button.ghost:hover{background:var(--bg)}
button:disabled{opacity:.45;cursor:default}
input,select,textarea{width:100%;border:.07rem solid var(--line-strong);border-radius:.5rem;padding:.42em .65em;background:var(--surface);margin:.15rem 0}
input[type=checkbox]{width:auto;margin:0 .45em 0 0;accent-color:var(--ac)}
textarea{resize:none;height:2.6rem}
input:focus,textarea:focus,select:focus{border-color:var(--ac)}
a{color:var(--ac);cursor:pointer;font-size:.88rem;font-weight:500;text-decoration:none}
a:hover{text-decoration:underline}
small{color:var(--mut);display:block;font-size:.8rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.card{background:var(--surface);border:.07rem solid var(--line);border-radius:.6rem;padding:.65rem .75rem}

/* connexion */
.gate{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1.2rem 1.3rem;max-width:25rem;margin:0 auto}
.gate h3{margin:.3rem 0 .2rem;font-size:1.15rem;font-weight:650}
.gate button{width:100%;margin-top:.4rem;padding:.6em}
.brand{display:flex;align-items:center;gap:.55rem;font-size:1.05rem;font-weight:650;margin-bottom:.4rem}
.logo{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.55rem;background:var(--ac);color:var(--on-ac)}
.logo .i{width:1.15rem;height:1.15rem}
.logo.sm{width:1.5rem;height:1.5rem;border-radius:.4rem}
.logo.sm .i{width:.9rem;height:.9rem}

/* widget : un filet en haut indique le niveau d'urgence */
#widget{position:fixed;inset:0;display:flex;flex-direction:column;gap:.55rem;padding:.65rem .8rem;border-top:.25rem solid var(--lvl);transition:border-color .3s}
#widget.lvl1{--lvl:#f59e0b}
#widget.lvl2{--lvl:#ea580c}
#widget.lvl3{--lvl:#dc2626}
.top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.appname{display:flex;align-items:center;gap:.45rem;font-weight:650;font-size:.95rem}
.right{display:flex;align-items:center;gap:.35rem}
.tool{display:grid;place-items:center;width:1.9rem;height:1.9rem;padding:0;border-radius:.5rem;background:transparent;border:.07rem solid transparent;color:var(--mut);text-decoration:none !important}
.tool:hover{background:var(--surface);border-color:var(--line);color:var(--ink)}
.chip{border:.07rem solid var(--line);background:var(--surface);color:var(--mut);border-radius:.4rem;padding:.1em .55em;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.status{display:inline-flex;align-items:center;gap:.4em;font-size:.8rem;font-weight:600;padding:.1em .6em;border-radius:999px;border:.07rem solid var(--line);background:var(--surface);color:var(--mut)}
.status::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}
.status.s1{color:var(--warn);background:var(--warn-soft)} .status.s1::before{background:#f59e0b}
.status.s2{color:var(--warn);background:var(--warn-soft)} .status.s2::before{background:#ea580c}
.status.s3{color:var(--bad);background:var(--bad-soft)} .status.s3::before{background:#dc2626}

.hello h2{margin:0;font-size:1.15rem;font-weight:650;letter-spacing:-.01em}
#ask{text-align:center}
#q{margin:0 0 .5rem;color:var(--mut);font-size:.9rem}
#yn{display:flex;gap:.5rem}
#yn button{flex:1}
#sendForm{text-align:left}
#sendForm select{margin-top:.3rem}
.chk{display:flex;align-items:center;font-size:.85rem;margin:.45rem 0}
#warn{background:var(--warn-soft);color:var(--warn);border:.07rem solid var(--line);border-left:.25rem solid var(--warn);border-radius:.5rem;padding:.4rem .65rem;font-size:.85rem;font-weight:500}

/* liste */
#list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:.4rem}
#list li{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;background:var(--surface);border:.07rem solid var(--line);border-left:.25rem solid var(--line-strong);border-radius:.5rem}
#list li.pr1{border-left-color:var(--ac)}
#list li.pr2{border-left-color:#ea580c}
#list li.pr3{border-left-color:#dc2626}
#list li.sel{border-color:var(--ac);box-shadow:0 0 0 .07rem var(--ac)}
#list li.clickable{cursor:pointer}
#list li.clickable:hover{background:var(--bg)}
li.muted{opacity:.6}
.ic{display:grid;place-items:center;flex:none;width:1.8rem;height:1.8rem;border-radius:.45rem;background:var(--bg);color:var(--mut);border:.07rem solid var(--line)}
.txt{flex:1;min-width:0;overflow-wrap:anywhere}
.sub{display:block;color:var(--mut);font-size:.8rem}
.cd{display:block;margin-top:.15rem;color:var(--mut);font-size:.78rem;font-variant-numeric:tabular-nums}
.cd.l1{color:var(--warn)}
.cd.l2,.cd.l3{color:var(--bad);font-weight:600}
.pr{font-size:.7rem;font-weight:600;border-radius:.3rem;padding:.05em .5em;margin-left:.3em;white-space:nowrap}
.p1{background:var(--ac-soft);color:var(--ac)}
.p2{background:var(--warn-soft);color:var(--warn)}
.p3{background:var(--bad-soft);color:var(--bad)}
.yn{display:flex;gap:.3rem}
.yn button{padding:.2em .75em;font-size:.85rem}
#list li.miss{display:block;background:var(--warn-soft);border-left-color:var(--warn)}
li.miss .row{margin-top:.35rem}
li.miss button{padding:.25em .8em;font-size:.85rem}
li.sentline{font-size:.85rem;color:var(--mut)}
li.sentline.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.bar{display:block;height:.25rem;border-radius:999px;background:var(--line);margin:.3rem 0;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:inherit;transition:width .3s}
.tools{display:flex;flex-wrap:wrap;gap:.35rem .8rem}
.tools a{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
#panel{padding:.5rem .65rem}
.bottom{text-align:center}

#scanPane{position:fixed;inset:0;background:var(--bg);padding:.8rem .9rem;display:flex;flex-direction:column;gap:.4rem;z-index:5}
#scanPane ul{list-style:none;margin:.3rem 0;padding:0;overflow:auto;flex:1;display:flex;flex-direction:column;gap:.4rem}
#scanPane li{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;background:var(--surface);border:.07rem solid var(--line);border-radius:.5rem}
#scanPane button{padding:.2em .8em;font-size:.85rem}
#scanPane b{display:inline-flex;align-items:center;gap:.4em}
.ok{color:var(--ok);display:inline-flex}
#toast{position:fixed;bottom:2.2rem;left:50%;transform:translateX(-50%);max-width:92vw;background:var(--ink);color:var(--bg);padding:.45rem .9rem;border-radius:.5rem;font-size:.88rem;font-weight:500;z-index:9;text-align:center}
#list li.doneline{border-left-color:var(--ok)}
.doneline button{padding:.2em .7em;font-size:.85rem}
.danger{color:var(--bad)}
.pop{position:fixed;top:3.2rem;left:.6rem;right:.6rem;max-width:23rem;margin-left:auto;background:var(--surface);border:.07rem solid var(--line);border-radius:.8rem;padding:.8rem;z-index:6;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.22);display:flex;flex-direction:column;gap:.5rem}
.pop img{width:11rem;height:11rem;background:#fff;padding:.4rem;border-radius:.5rem}
.pop input{text-align:center;font-size:1.3rem;letter-spacing:.3em}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}