:root{
  --ground:#EDF1F0; --surface:#FFFFFF; --surface-2:#F6F8F8;
  --ink:#111A1B; --ink-2:#3D4B4C; --ink-3:#6E7C7D;
  --line:#D6DEDD; --line-strong:#B8C4C3;
  --accent:#0E5C58; --accent-soft:#DCEAE8;
  --signal:#9C5B12; --signal-soft:#F6E7D3;
  --done:#8A9797;
  --radius:10px;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1415; --surface:#171F1F; --surface-2:#1D2626;
    --ink:#E7EDEC; --ink-2:#B3C0BF; --ink-3:#849695;
    --line:#2A3535; --line-strong:#3B4948;
    --accent:#57B7A9; --accent-soft:#123331;
    --signal:#DFA45C; --signal-soft:#33261370;
    --done:#69797A;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1415; --surface:#171F1F; --surface-2:#1D2626;
  --ink:#E7EDEC; --ink-2:#B3C0BF; --ink-3:#849695;
  --line:#2A3535; --line-strong:#3B4948;
  --accent:#57B7A9; --accent-soft:#123331;
  --signal:#DFA45C; --signal-soft:#33261370;
  --done:#69797A;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,4vw,2.5rem) 4rem}

/* ---------- en-tête ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .9rem;
}
h1{
  font-family:var(--display); font-weight:700; font-size:clamp(2rem,5.5vw,3.1rem);
  line-height:1.04; letter-spacing:-.025em; margin:0 0 .8rem; text-wrap:balance;
}
.lede{
  font-size:1.08rem; color:var(--ink-2); max-width:56ch; margin:0 0 2rem;
}
.lede b{font-weight:500; color:var(--ink)}

/* ---------- compteurs ---------- */
artifact-local{display:block}
.stats{
  display:flex; flex-wrap:wrap; gap:.5rem 2.2rem; align-items:baseline;
  padding-bottom:.9rem;
}
.stat{display:flex; gap:.5rem; align-items:baseline}
.stat .n{
  font-family:var(--mono); font-weight:500; font-size:1.5rem;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat .l{
  font-family:var(--display); font-size:.78rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.stat.is-signal .n{color:var(--signal)}
.meter{
  height:5px; background:var(--line); border-radius:99px; overflow:hidden; margin-bottom:2.4rem;
}
.meter span{
  display:block; height:100%; width:0%; background:var(--accent);
  border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- frise ---------- */
.frise{margin:0 0 2.6rem}
.frise-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; margin-bottom:.5rem;
}
.rail{
  position:relative; height:34px; border-top:1px solid var(--line-strong);
}
.tick{
  position:absolute; top:0; width:1px; height:13px; background:var(--accent);
  opacity:.55; transform:translateX(-.5px);
}
.tick.b{height:22px; width:2px; background:var(--signal); opacity:.85}
.frise-note{
  font-size:.9rem; color:var(--ink-3); margin:.1rem 0 0; font-style:italic;
}

/* ---------- filtres ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 2rem;
  border-top:1px solid var(--line); padding-top:1.4rem;
}
.filters button{
  font-family:var(--display); font-size:.82rem; font-weight:500;
  letter-spacing:.02em; color:var(--ink-2); background:transparent;
  border:1px solid var(--line-strong); border-radius:99px;
  padding:.42rem 1rem; cursor:pointer; transition:.15s;
}
.filters button:hover{border-color:var(--accent); color:var(--accent)}
.filters button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.filters button[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--surface);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .filters button[aria-pressed="true"]{color:var(--ground)}
}
:root[data-theme="dark"] .filters button[aria-pressed="true"]{color:var(--ground)}

/* ---------- colonnes ---------- */
.cols{display:grid; grid-template-columns:1fr; gap:2.8rem}
@media (min-width:900px){.cols{grid-template-columns:1fr 1fr; gap:2.4rem}}

.col-head{
  display:flex; align-items:baseline; gap:.7rem; margin:0 0 1.1rem;
  padding-bottom:.7rem; border-bottom:2px solid var(--ink);
}
.col-head h2{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  letter-spacing:-.01em; margin:0;
}
.col-head .count{
  font-family:var(--mono); font-size:.82rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; margin-left:auto;
}

ul.tasks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem}

.task{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:.95rem 1.05rem;
  transition:opacity .25s, background .25s;
}
.task[data-blocking="true"]{
  border-left:3px solid var(--signal); padding-left:.9rem;
}
.task input[type="checkbox"]{
  appearance:auto; accent-color:var(--accent);
  width:1.15rem; height:1.15rem; margin:.28rem 0 0; cursor:pointer; flex:none;
}
.task input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.meta{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-bottom:.3rem}
.tc{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.chip{
  font-family:var(--display); font-size:.64rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.16rem .46rem; border-radius:4px;
}
.chip-block{background:var(--signal-soft); color:var(--signal)}
.chip-hole{background:var(--accent-soft); color:var(--accent)}

.task label{display:block; cursor:pointer}
.task h3{
  font-family:var(--display); font-weight:600; font-size:1rem;
  line-height:1.3; letter-spacing:-.01em; margin:0; text-wrap:balance;
}
.desc{font-size:.94rem; color:var(--ink-2); margin:.35rem 0 0}
blockquote{
  margin:.55rem 0 0; padding-left:.8rem; border-left:2px solid var(--line-strong);
  font-style:italic; font-size:.9rem; color:var(--ink-3); line-height:1.45;
}

.task:has(input:checked){background:var(--surface-2); opacity:.55}
.task:has(input:checked) h3{text-decoration:line-through; text-decoration-color:var(--done)}

/* filtres per-viewer */
.cols[data-local-filter="bloquant"] .task:not([data-blocking="true"]){display:none}
.cols[data-local-filter="moi"] .task[data-owner="client"]{display:none}
.cols[data-local-filter="moi"] section[data-owner="client"]{display:none}
.cols[data-local-filter="client"] .task[data-owner="moi"]{display:none}
.cols[data-local-filter="client"] section[data-owner="moi"]{display:none}

footer{
  margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--ink-3); max-width:66ch;
}
footer h3{
  font-family:var(--display); font-size:.78rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin:0 0 .6rem;
}
footer ul{margin:.4rem 0 0; padding-left:1.1rem}
footer li{margin-bottom:.25rem}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- Task 9 : mêmes règles que .task/.cols/.chip ci-dessus, mais
   sur les sélecteurs réels que dessiner()/ligne() (web/app.js) émettent :
   .tache, data-bloquant, .compte, un <ul> nu dans #liste. ---------- */
#liste{display:grid; grid-template-columns:1fr; gap:2.8rem}
@media (min-width:900px){#liste{grid-template-columns:1fr 1fr; gap:2.4rem}}

#liste section h2{
  display:flex; align-items:baseline; gap:.7rem; margin:0 0 1.1rem;
  padding-bottom:.7rem; border-bottom:2px solid var(--ink);
  font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em;
}
#liste .compte{
  font-family:var(--mono); font-size:.82rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; margin-left:auto;
}
#liste ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem}

.tache{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:.95rem 1.05rem;
  transition:opacity .25s, background .25s;
}
.tache[data-bloquant="true"]{border-left:3px solid var(--signal); padding-left:.9rem}
.tache input[type="checkbox"]{
  appearance:auto; accent-color:var(--accent);
  width:1.4rem; height:1.4rem; margin:.2rem 0 0; cursor:pointer; flex:none;
}
.tache input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tache label{display:block; cursor:pointer}
.tache h3{
  font-family:var(--display); font-weight:600; font-size:1rem;
  line-height:1.3; letter-spacing:-.01em; margin:0; text-wrap:balance;
}
.tache .chip{background:var(--signal-soft); color:var(--signal)}
.tache:has(input:checked){background:var(--surface-2); opacity:.55}
.tache:has(input:checked) h3{text-decoration:line-through; text-decoration-color:var(--done)}

/* ---------- États de page (connexion / panne) ---------- */
body[data-connecte="oui"] #connexion{display:none}
body[data-connecte="non"] #tableau{display:none}
body[data-panne="oui"] #erreur{color:var(--signal); font-weight:600}
body[data-live="non"] #tableau::before{
  content:"Hors ligne — les changements des autres appareils n'apparaîtront pas.";
  display:block; padding:.6rem 1rem; margin-bottom:1.4rem; background:var(--signal-soft);
  color:var(--signal); font-family:var(--display); font-size:.85rem; border-radius:var(--radius);
}

/* ---------- Formulaire de connexion et bouton de déconnexion ---------- */
#form-connexion input,
#form-connexion button,
#deconnexion{
  font-family:var(--display); font-size:.92rem; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:.55rem .9rem; background:var(--surface);
}
#form-connexion label{
  display:block; font-family:var(--display); font-size:.78rem; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
  margin:.9rem 0 .3rem;
}
#form-connexion input{width:100%}
#form-connexion button, #deconnexion{
  cursor:pointer; font-weight:600; color:var(--accent); border-color:var(--accent);
  transition:background .15s, color .15s;
}
#form-connexion button:hover, #deconnexion:hover{background:var(--accent); color:var(--surface)}
#form-connexion input:focus-visible, #form-connexion button:focus-visible, #deconnexion:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- Liste vide (RLS régressée ou session expirée) ---------- */
.vide{color:var(--ink-3); margin:2rem 0}