:root{--bg:#08080a;--bg2:#101013;--bg3:#17171b;--bg4:#202026;--line:rgba(236,233,226,.1);--line2:rgba(236,233,226,.22);
--ink:#eceae6;--ink2:#a7a9ae;--ink3:#6c6f75;--red:#e6002d;--red2:#ff3b5c;--ok:#33d17a;--warn:#ffb020;--blue:#4aa3ff;
--sans:"Inter",Helvetica,Arial,sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.lab{font:500 10.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.muted{color:var(--ink3)}
.brand{display:flex;align-items:center;gap:10px;font:800 21px/1 var(--cond);letter-spacing:.22em}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}
.brand small{font:500 10px var(--mono);letter-spacing:.14em;color:var(--ink3)}

/* connexion */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-box{width:min(360px,100%);display:grid;gap:12px;border:1px solid var(--line);background:var(--bg2);padding:28px}
.login-box .brand{margin-bottom:12px}
.login-box input{background:var(--bg);border:1px solid var(--line2);padding:12px;font-size:16px}
.login-box button{background:var(--red);border:0;padding:12px;font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.err{color:var(--red2);margin:0}

/* barre du haut */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:18px;padding:12px clamp(14px,3vw,36px);background:rgba(8,8,10,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.count{margin-left:auto;font:600 14px var(--mono);color:var(--ink)}
.count b{color:var(--red2)}
.out{text-decoration:none}.out:hover{color:var(--ink)}
.app{max-width:1500px;margin:0 auto;padding:22px clamp(14px,3vw,36px) 80px}

/* entête */
.hero{display:grid;grid-template-columns:280px 1fr;gap:22px;margin-bottom:20px}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.prog,.focus{border:1px solid var(--line);background:var(--bg2);padding:18px}
.big{font:800 64px/1 var(--cond);margin:6px 0 10px}.big small{font-size:28px;color:var(--ink3);margin-left:4px}
.bar{height:6px;background:var(--bg4);margin-bottom:10px}.bar i{display:block;height:100%;background:var(--red);transition:width .4s}
.focus ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.focus li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;background:var(--bg);border:1px solid var(--line);cursor:pointer}
.focus li:hover{border-color:var(--line2)}
.focus .vide{color:var(--ink3);cursor:default;grid-template-columns:1fr}

/* filtres */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;align-items:center}
.filters button{background:none;border:1px solid var(--line2);padding:6px 12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);cursor:pointer}
.filters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filters input{margin-left:auto;background:var(--bg2);border:1px solid var(--line2);padding:6px 12px;min-width:200px}
@media(max-width:640px){.filters input{margin-left:0;width:100%}}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
@media(max-width:1100px){.cols{grid-template-columns:1fr}}

/* phases */
.phase{border:1px solid var(--line);background:var(--bg2);margin-bottom:14px}
.ph-h{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;cursor:pointer;user-select:none}
.ph-h h2{font:800 24px/1.05 var(--cond);text-transform:uppercase;letter-spacing:.03em;margin:0}
.ph-h .sous{color:var(--ink2);font-size:13px;margin-top:3px}
.ph-h .idx{font:600 12px var(--mono);color:var(--red);min-width:26px}
.ph-h .pp{text-align:right;font:600 13px var(--mono)}
.ph-h .pp .bar{width:120px;height:4px;margin:6px 0 0 auto}
.phase.ferme .taches{display:none}
.chev{transition:transform .2s;display:inline-block;color:var(--ink3);margin-left:8px}.phase.ferme .chev{transform:rotate(-90deg)}

.taches{border-top:1px solid var(--line)}
.t{border-bottom:1px solid var(--line)}
.t:last-child{border-bottom:0}
.t-row{display:grid;grid-template-columns:34px 46px 1fr auto;gap:10px;align-items:center;padding:9px 16px}
.t-row .tid{font:500 11px var(--mono);color:var(--ink3)}
.t-row .tt{cursor:pointer;line-height:1.4}
.t.fait .tt{color:var(--ink3);text-decoration:line-through;text-decoration-color:rgba(236,233,226,.3)}
.meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:640px){.t-row{grid-template-columns:30px 1fr;}.t-row .tid{display:none}.meta{grid-column:2;justify-content:flex-start}}

.ck{width:24px;height:24px;border:1.5px solid var(--line2);background:var(--bg);display:grid;place-items:center;cursor:pointer;padding:0}
.ck:hover{border-color:var(--ink)}
.t.fait .ck{background:var(--ok);border-color:var(--ok)}.t.fait .ck:after{content:"✓";color:#05170c;font-weight:800;font-size:15px}
.t.en_cours .ck{border-color:var(--blue)}.t.en_cours .ck:after{content:"";width:10px;height:10px;background:var(--blue)}
.t.bloque .ck{border-color:var(--warn)}.t.bloque .ck:after{content:"!";color:var(--warn);font-weight:800}

.chip{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.chip.Alex{border-color:rgba(230,0,45,.6);color:var(--red2)}
.chip.Hermes{border-color:rgba(74,163,255,.5);color:var(--blue)}
.chip.cp{background:var(--red);border-color:var(--red);color:#fff}
.chip.retard{border-color:var(--warn);color:var(--warn)}
.chip.jour{border-color:var(--ink);color:var(--ink)}
.chip.st-en_cours{color:var(--blue);border-color:rgba(74,163,255,.5)}
.chip.st-bloque{color:var(--warn);border-color:var(--warn)}

.det{display:none;padding:4px 16px 16px 106px;color:var(--ink2);font-size:14px}
@media(max-width:640px){.det{padding:4px 16px 16px 56px}}
.t.ouvert .det{display:block}
.det p{margin:0 0 8px}
.det .kv{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin:8px 0}
.det .kv dt{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
.det .kv dd{margin:0;word-break:break-word}
.det code{font:500 12.5px var(--mono);color:var(--ink);background:var(--bg);padding:1px 5px}
.det a{color:var(--ink)}
.det textarea{width:100%;min-height:70px;background:var(--bg);border:1px solid var(--line2);padding:8px;resize:vertical}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.ctrl select,.ctrl input{background:var(--bg);border:1px solid var(--line2);padding:5px 8px;font-size:13px}
.ctrl button,.add button,.jform button{background:none;border:1px solid var(--line2);padding:5px 12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ctrl button:hover,.add button:hover,.jform button:hover{border-color:var(--red)}
.add{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.add input{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--line2);padding:6px 10px}
.add select,.add input[type=date]{background:var(--bg);border:1px solid var(--line2);padding:6px}

/* panneau latéral */
.side{border:1px solid var(--line);background:var(--bg2);position:sticky;top:70px;max-height:calc(100vh - 90px);display:flex;flex-direction:column}
@media(max-width:1100px){.side{position:static;max-height:none}}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;padding:11px 6px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent}
.tabs button.on{color:var(--ink);border-bottom-color:var(--red)}
.tab{display:none;overflow:auto;padding:14px}.tab.on{display:block}
.jform{display:flex;gap:6px;margin-bottom:12px}.jform input{flex:1;background:var(--bg);border:1px solid var(--line2);padding:7px 10px}
.journal{list-style:none;margin:0;padding:0}
.journal li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.journal .w{font:500 10.5px var(--mono);color:var(--ink3);display:block}
.journal .w b{color:var(--ink2);font-weight:500}
.regles{margin:0;padding-left:22px;display:grid;gap:8px;color:var(--ink2);font-size:14px}
.decis{list-style:none;margin:0;padding:0}.decis li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2)}
.decis .lab{display:block}
.bud table{width:100%;border-collapse:collapse;font-size:13.5px}.bud td{padding:7px 4px;border-bottom:1px solid var(--line);color:var(--ink2)}.bud td:nth-child(2){text-align:right;color:var(--ink);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--bg);padding:10px 16px;font:500 13px var(--mono);transition:transform .25s;z-index:50}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast.ko{background:var(--red);color:#fff}
.flash{animation:fl 1s}@keyframes fl{from{background:rgba(51,209,122,.18)}to{background:transparent}}
@media(max-width:640px){
  .top{flex-wrap:wrap;gap:8px 14px;padding:10px 14px}
  .top .brand small{display:none}
  .top .out:first-of-type{margin-left:auto}
  .count{order:5;width:100%;margin:0;font-size:12.5px}
  .focus li{grid-template-columns:auto auto;grid-template-areas:"q d" "t t";justify-content:space-between}
  .focus li>span:nth-child(1){grid-area:q}.focus li>span:nth-child(2){grid-area:t}.focus li>span:nth-child(3){grid-area:d}
  .big{font-size:52px}
}
@media(max-width:640px){.focus li>span:nth-child(1){justify-self:start}.focus li>span:nth-child(3){justify-self:end}}