/* =====================================================================
   tasks.css — liste des tâches à faire et section "Fait"
   ===================================================================== */

#list,#doneList{list-style:none;display:flex;flex-direction:column;gap:12px;}

.task{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:2px solid var(--border);border-radius:18px;padding:14px 16px;
  transition:transform .2s, border-color .2s, background .2s, box-shadow .2s;
  animation:popIn .4s cubic-bezier(.2,1.6,.4,1) both;
  position:relative;cursor:pointer;
}
.task:hover{
  transform:translateX(6px) scale(1.01);border-color:var(--neon);
  background:var(--card-hover);box-shadow:0 6px 24px rgba(0,0,0,.35);
}

.task.exploding{animation:explode .55s cubic-bezier(.5,-0.3,.7,1) forwards;pointer-events:none;}
@keyframes explode{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  25%{transform:scale(1.12) rotate(2deg);}
  100%{transform:scale(0) rotate(-14deg) translateY(-30px);opacity:0;filter:blur(4px)}
}
.task.collapsing{animation:collapse .3s ease forwards;}
@keyframes collapse{to{height:0;padding-top:0;padding-bottom:0;margin-bottom:-12px;border-width:0;overflow:hidden}}

.checkbox{
  width:32px;height:32px;min-width:32px;border-radius:var(--radius-sm);
  border:3px solid var(--neon);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;transition:transform .15s, background .2s;
}
.checkbox:hover{transform:scale(1.15) rotate(6deg);background:rgba(255,179,71,.15);}

.task-body{flex:1;min-width:0;}
.task-label{font-weight:800;font-size:1rem;line-height:1.3;word-break:break-word;}
.task-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}

.pill{font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap;}
.pill-time{background:var(--night2);color:var(--muted);cursor:pointer;border:1.5px dashed transparent;}
.pill-time:hover{border-color:var(--neon);color:var(--neon);}
.pill-pts{background:rgba(255,94,58,.15);color:var(--neon2);}
.pill-freq{background:rgba(125,211,252,.15);color:var(--sky);}
.pill-assign{background:rgba(74,222,128,.15);color:var(--mint);cursor:pointer;}
.pill-assign.empty{background:var(--night2);color:var(--muted);}

.pill-time input{
  width:60px;background:var(--night2);border:1.5px solid var(--neon);border-radius:8px;
  color:var(--neon);padding:2px 6px;font-weight:800;font-size:.75rem;font-family:'Nunito';
}

.del{
  background:none;border:none;cursor:pointer;font-size:1.05rem;
  opacity:.3;transition:opacity .2s, transform .15s;padding:6px;border-radius:8px;
}
.del:hover{opacity:1;transform:scale(1.25) rotate(12deg);}

.task.priority{border-color:var(--neon2);}
.task.priority::before{
  content:'🔥 PRIORITÉ';position:absolute;top:-10px;left:14px;
  font-family:'Bungee';font-size:.5rem;letter-spacing:1px;
  background:linear-gradient(90deg,var(--neon2),var(--neon));color:#1a1030;
  padding:3px 8px;border-radius:99px;
}

/* ---------- section "Fait" ---------- */
#doneSection{margin-top:34px;display:none;}
#doneSection h2{
  font-family:'Bungee';font-size:1rem;color:var(--mint);margin-bottom:14px;letter-spacing:1px;
  display:flex;align-items:center;gap:8px;
}
#doneSection h2::after{
  content:'';flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(74,222,128,.5),transparent);
}
.task.done-task{border-color:rgba(74,222,128,.4);opacity:.75;}
.task.done-task:hover{border-color:var(--mint);opacity:1;}
.task.done-task .task-label{text-decoration:line-through;color:var(--muted);}
.check-done{
  width:32px;height:32px;min-width:32px;border-radius:var(--radius-sm);background:var(--mint);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#0d3320;font-weight:900;
}
.done-by{font-size:.72rem;color:var(--muted);font-weight:800;margin-top:4px;}

.empty-msg{text-align:center;color:var(--muted);font-weight:800;padding:30px;display:none;}