html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
/* Layout: en-tête école + dates, bande de synthèse (état, progression, compteurs), puis la checklist en grille. */
:root{
  --bg:#f3f6f9; --surface:#ffffff; --surface-2:#eef3f7; --line:#dde5ec;
  --ink:#13294b; --ink-2:#4a5d78; --muted:#7a8aa1;
  --accent:#0f9d58; --accent-soft:#d9f3e5;
  --done:#14864a; --done-bg:#dcf5e6;
  --doing:#1f5fd1; --doing-bg:#dde8fd;
  --todo:#55657c; --todo-bg:#eceff4;
  --blocked:#c62a2a; --blocked-bg:#fde2e2; --blocked-row:#fff3f3;
  --focus:#1f5fd1;
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1522; --surface:#152033; --surface-2:#1b2940; --line:#26364f;
  --ink:#e6edf7; --ink-2:#b2c0d4; --muted:#8495ad;
  --accent:#2fc27a; --accent-soft:#163a2b;
  --done:#57d993; --done-bg:#173a29;
  --doing:#8db4ff; --doing-bg:#1c2f55;
  --todo:#a7b4c6; --todo-bg:#223049;
  --blocked:#ff8a8a; --blocked-bg:#4a1d22; --blocked-row:#2a1a22;
  --focus:#8db4ff; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0e1522; --surface:#152033; --surface-2:#1b2940; --line:#26364f;
  --ink:#e6edf7; --ink-2:#b2c0d4; --muted:#8495ad;
  --accent:#2fc27a; --accent-soft:#163a2b;
  --done:#57d993; --done-bg:#173a29;
  --doing:#8db4ff; --doing-bg:#1c2f55;
  --todo:#a7b4c6; --todo-bg:#223049;
  --blocked:#ff8a8a; --blocked-bg:#4a1d22; --blocked-row:#2a1a22;
  --focus:#8db4ff; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:20px 48px}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.picker{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.picker label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.select{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a8aa1' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--line);border-radius:10px;padding:9px 36px 9px 12px;font-weight:600;min-width:0;max-width:100%}
#school{min-width:240px;max-width:100%}
.newschool{display:flex;gap:6px;min-width:0}
.newschool input{min-width:0;width:200px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.newschool input::placeholder{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;font-weight:600;cursor:pointer;color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn.primary:hover{opacity:.9;background:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* Header */
.head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end}
.head h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,40px);line-height:1.05;margin:0;letter-spacing:-.01em;text-wrap:balance}
.head .sub{font-family:var(--display);font-weight:600;color:var(--muted);font-size:17px;margin-top:4px}
.dates{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.date{display:flex;flex-direction:column;gap:2px;padding:8px 16px;border-left:1px solid var(--line)}
.date:first-child{border-left:0}
.date span{font-size:12px;color:var(--muted)}
.date input{border:0;background:transparent;font-weight:700;padding:0;font-size:14px;width:136px}

/* Summary band */
.summary{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.card h2{font-size:13px;margin:0 0 8px;font-weight:700;color:var(--ink-2)}
.card .select{width:100%}
.updated{font-size:12.5px;color:var(--muted);margin-top:8px}
.prog{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pct{font-family:var(--display);font-weight:800;font-size:52px;line-height:1;color:var(--accent);min-width:130px}
.bar-zone{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px}
.bar{height:12px;background:var(--surface-2);border-radius:99px;overflow:hidden;display:flex}
.bar i{display:block;height:100%;transition:width .5s ease}
.bar .b-done{background:var(--accent)}
.bar .b-doing{background:var(--accent);opacity:.35}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{border:1px solid transparent;border-radius:99px;padding:4px 11px;font-size:13px;font-weight:600;cursor:pointer;background:var(--todo-bg);color:var(--todo)}
.chip[aria-pressed="true"]{border-color:currentColor}
.chip.done{background:var(--done-bg);color:var(--done)}
.chip.doing{background:var(--doing-bg);color:var(--doing)}
.chip.blocked{background:var(--blocked-bg);color:var(--blocked)}
.chip.all{background:transparent;border-color:var(--line);color:var(--ink-2)}
.chip.all[aria-pressed="true"]{border-color:var(--ink-2)}
.note{font-size:12.5px;color:var(--muted)}

/* Checklist */
.list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:grid;grid-template-columns:44px 44px minmax(0,1.25fr) 64px 150px minmax(0,1.4fr);align-items:center;gap:0 12px;padding:10px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row.th{background:var(--surface-2);font-weight:700;font-size:13px;color:var(--ink-2);padding-block:11px}
.row.is-blocked{background:var(--blocked-row)}
.row.is-blocked .detail{color:var(--blocked)}
.n{color:var(--muted);font-weight:600;text-align:center}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2)}
.ic svg{width:20px;height:20px}
.row.st-done .ic{background:var(--done-bg);color:var(--done)}
.row.st-doing .ic{background:var(--doing-bg);color:var(--doing)}
.row.st-blocked .ic{background:var(--blocked-bg);color:var(--blocked)}
.title{font-weight:600;min-width:0}
.w{justify-self:center;border:1px solid var(--line);border-radius:8px;min-width:34px;text-align:center;padding:3px 0;font-weight:600;font-size:14px;color:var(--ink-2)}
.state{appearance:none;border:0;border-radius:9px;padding:7px 28px 7px 12px;font-weight:700;font-size:13.5px;cursor:pointer;width:100%;
  background-repeat:no-repeat;background-position:right 10px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8aa1' stroke-width='1.5'/%3E%3C/svg%3E")}
.state.done{background-color:var(--done-bg);color:var(--done)}
.state.doing{background-color:var(--doing-bg);color:var(--doing)}
.state.todo{background-color:var(--todo-bg);color:var(--todo)}
.state.blocked{background-color:var(--blocked-bg);color:var(--blocked)}
.detail{width:100%;border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 8px;resize:none;color:var(--ink-2);line-height:1.4;min-height:34px;field-sizing:content}
.detail:hover{border-color:var(--line)}
.detail:focus{border-color:var(--focus);background:var(--surface);outline:none}
.detail::placeholder{color:var(--muted);opacity:.7}
.mini{display:none;font-size:12px;color:var(--muted)}

/* Aide */
.hbtn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;padding:0;margin-left:6px;vertical-align:1px}
.hbtn:hover,.hbtn[aria-expanded="true"]{color:var(--doing);border-color:var(--doing);background:var(--doing-bg)}
.helpbox{grid-column:1/-1;margin:8px 0 2px 56px;background:var(--surface-2);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2)}
.helpbox strong{color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.helpbox ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.helpbox textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);font-size:14px;resize:vertical}
.helpbox .row-end .btn{padding:5px 12px;font-size:13px}
.helpbox .hint{font-size:12px;color:var(--muted)}
@media (max-width:820px){ .helpbox{grid-area:auto;margin-left:0} .row.has-help{grid-template-areas:"ic title state" "ic detail detail" "help help help"} .row.has-help .helpbox{grid-area:help} }

/* Pièces jointes */
.detail-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.att{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-left:8px}
.thumb{position:relative;width:46px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);cursor:zoom-in;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fchip{display:inline-flex;align-items:center;gap:5px;max-width:220px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12.5px;color:var(--doing);text-decoration:none;background:var(--surface)}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip svg,.addatt svg{width:14px;height:14px;flex:none}
.item{position:relative;display:inline-flex}
.rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:12px;line-height:1;display:none;place-items:center;cursor:pointer;padding:0}
.item:hover .rm,.item:focus-within .rm,.rm.confirm{display:grid}
.rm.confirm{width:auto;padding:0 6px;border-radius:9px;background:var(--blocked);color:#fff;border-color:var(--blocked);font-weight:700}
.addatt{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--line);background:transparent;border-radius:8px;padding:4px 8px;font-size:12.5px;color:var(--muted);cursor:pointer;font-weight:600}
.addatt:hover{color:var(--ink);border-color:var(--ink-2)}
.addatt[disabled]{opacity:.5;cursor:not-allowed}
.linkform{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.linkform input{flex:1;min-width:140px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--bg);font-size:13px}
.linkform button{font-size:12.5px;padding:5px 10px}
.lightbox{position:fixed;inset:0;background:rgba(8,14,24,.82);display:grid;place-items:center;z-index:50;padding:max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.lightbox img{max-width:100%;max-height:82vh;border-radius:10px;background:#fff}
.lightbox .lb-bar{display:flex;justify-content:space-between;gap:10px;color:#fff;margin-top:10px;font-size:14px;width:100%}
.lightbox a,.lightbox button{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:5px 12px;text-decoration:none;cursor:pointer;font-weight:600}
.uploading{font-size:12px;color:var(--muted)}

@media (max-width:820px){
  .summary{grid-template-columns:1fr}
  .row.th{display:none}
  .row{grid-template-columns:36px minmax(0,1fr) 132px;grid-template-areas:"ic title state" "ic detail detail";gap:6px 12px;padding:12px}
  .row .n,.row .w{display:none}
  .row .ic{grid-area:ic;align-self:start}
  .row .title{grid-area:title}
  .row .state-cell{grid-area:state}
  .row .detail-cell{grid-area:detail}
  .mini{display:inline}
  .date{flex:1 1 33%}
  .date input{width:100%}
  #school{min-width:0;flex:1 1 100%}
  .newschool{flex:1 1 100%}
  .newschool input{flex:1;width:auto}
  .picker{flex:1}
}

/* Panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.panel h3{margin:0;font-family:var(--display);font-size:20px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2);font-weight:600}
.field input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--bg);font-weight:500}
.row-end{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
pre.txt{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;max-height:360px;overflow:auto;white-space:pre-wrap;font-size:13.5px;font-family:var(--body)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom, 0px));background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;max-width:calc(100% - 32px)}
.banner{font-size:13px;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:8px 12px}
.dup{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--doing-bg);color:var(--ink)}
.dup-act{display:flex;gap:6px;flex-wrap:wrap}
.dup .btn{padding:6px 12px;font-size:13.5px}
.ro-banner{background:var(--blocked-bg);color:var(--blocked);font-weight:600;font-size:14px;padding:10px 14px}
body.ro .state,body.ro .detail,body.ro .date input,body.ro #m-status{cursor:not-allowed}
body.ro .addatt,body.ro .newschool{opacity:.5}
.empty{padding:40px 20px;text-align:center;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}

/* ---------- Version hébergée : en-tête, connexion, utilisateurs ---------- */
.topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.brand span{color:var(--accent)}
.who{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.who strong{color:var(--ink)}
.rolepill{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:99px;padding:2px 8px;background:var(--surface-2);color:var(--ink-2)}
.rolepill.admin{background:var(--doing-bg);color:var(--doing)}
.btn.sm{padding:6px 11px;font-size:13.5px}
.btn.danger{color:var(--blocked);border-color:var(--blocked-bg)}
.btn.danger:hover{background:var(--blocked-bg)}
.btn .badge{background:var(--blocked);color:#fff;border-radius:99px;font-size:11px;padding:1px 6px;font-weight:700}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.auth{min-height:calc(100vh - 80px);display:grid;place-items:center}
.authcard{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.authcard h1{font-family:var(--display);font-weight:800;font-size:26px;margin:0;line-height:1.1}
.authcard p{margin:0;color:var(--ink-2)}
.authcard form{display:flex;flex-direction:column;gap:12px}
.authcard .field input{font-size:15px}
.authcard .btn.primary{justify-content:center;padding:11px}
.switch{font-size:14px;color:var(--ink-2)}
.switch button{background:none;border:0;color:var(--doing);font-weight:700;cursor:pointer;padding:0}
.msg{border-radius:10px;padding:10px 12px;font-size:14px}
.msg.err{background:var(--blocked-bg);color:var(--blocked)}
.msg.ok{background:var(--done-bg);color:var(--done)}

.meta{font-size:11.5px;color:var(--muted);padding-left:8px}

.users{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.urow{display:grid;grid-template-columns:minmax(0,1fr) 130px 110px 410px;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.urow:first-child{border-top:0}
.urow.th{background:var(--surface-2);font-weight:700;font-size:13px;color:var(--ink-2)}
.urow.pending{background:var(--doing-bg)}
.uname{min-width:0}
.uname strong{display:block}
.uname span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.status{display:inline-block;font-size:12.5px;font-weight:700;border-radius:99px;padding:3px 10px}
.status.active{background:var(--done-bg);color:var(--done)}
.status.pending{background:var(--surface);color:var(--doing);border:1px solid var(--doing)}
.status.blocked{background:var(--blocked-bg);color:var(--blocked)}
.uact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.urow select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--surface);font-weight:600}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:var(--surface);border:1px dashed var(--line);border-radius:8px;padding:6px 10px;user-select:all}
.panel .hint{font-size:13px;color:var(--muted)}
@media (max-width:1000px){
  .urow.th{display:none}
  .urow{grid-template-columns:1fr auto;grid-template-areas:"name status" "role role" "act act"}
  .urow .uname{grid-area:name}.urow .ustatus{grid-area:status}.urow .urole{grid-area:role}.urow .uact{grid-area:act;justify-content:flex-start}
}