/* Mes tâches — to-do list simple (portage de l'app ordi, thème OKX).
   Mobile-first, dark only. Noir / blanc, sans vert. */
:root{
  color-scheme:dark;
  --bg:#000000;
  --accent:#EDEDED; --accent-d:#CFCFCF;
  --red:#FF4D4F;
  --text:#FFFFFF; --text2:#8A8A8A; --text3:#5A5A5A;
  --card-bg:#0A0A0A;
  --row:#141414;
  --row-h:#1E1E1E;
  --input-bg:#1B1B1B;
  --border:#262626;
  --input-brd:#2A2A2A;
  --primary-bg:#FFFFFF; --primary-fg:#000000;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
/* Fond noir uni (couvre aussi la safe-area du bas en mode PWA standalone). */
html{ background-color:#000000; }
html,body{min-height:100%;}
body{
  background:transparent; color:var(--text);
  min-height:100dvh;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18); border-radius:4px;}

.wrap{
  position:relative; z-index:1;
  max-width:560px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 22px) 16px
          calc(env(safe-area-inset-bottom) + 34px);
}

/* ---------- en-tête ---------- */
header{display:flex; align-items:center; gap:11px; margin-bottom:18px; padding:0 2px;}
.badge{
  width:38px; height:38px; border-radius:11px; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.badge img{ width:100%; height:100%; object-fit:cover; display:block; }
header h1{font-size:20px; font-weight:700; letter-spacing:-0.4px; flex:1;}

.sync-btn{
  width:38px; height:38px; flex-shrink:0; border:none; cursor:pointer;
  border-radius:11px; background:var(--input-bg); border:1px solid var(--border);
  color:var(--text); font-size:18px; line-height:1; position:relative; transition:background .15s;
}
.sync-btn:active{background:var(--row-h);}
.sync-btn::after{
  content:''; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--text2); box-shadow:0 0 0 2px var(--card-bg);
}
.sync-btn[data-state="off"]::after{background:var(--text3);}
.sync-btn[data-state="ok"]::after{background:var(--text);}
.sync-btn[data-state="sync"]::after{background:var(--text); animation:syncpulse 1s ease-in-out infinite;}
.sync-btn[data-state="offline"]::after{background:var(--text2);}
.sync-btn[data-state="err"]::after{background:var(--red);}
@keyframes syncpulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Panneau synchro */
.sync-panel{
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,0.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.sync-panel[hidden]{display:none;}
.sync-card{
  width:100%; max-width:420px; background:#0C0C0C;
  border:1px solid var(--border); border-radius:20px; padding:22px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
}
.sync-card h2{font-size:18px; font-weight:700; margin-bottom:8px;}
.sync-sub{font-size:13.5px; color:var(--text3); line-height:1.55; margin-bottom:14px;}
.sync-status{
  font-size:12.5px; color:var(--text2); background:var(--input-bg);
  border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin-bottom:12px;
}
.sync-input{
  width:100%; background:var(--input-bg); border:1px solid var(--input-brd); border-radius:12px;
  padding:13px 14px; color:var(--text); font-family:inherit; font-size:15px; outline:none;
  margin-bottom:14px; word-break:break-all;
}
.sync-input:focus{border-color:rgba(255,255,255,0.5); box-shadow:0 0 0 3px rgba(255,255,255,0.10);}
.sync-actions{display:flex; gap:10px;}
.sync-primary{
  flex:1; border:none; cursor:pointer; border-radius:12px; padding:13px; font-family:inherit;
  font-size:15px; font-weight:700; color:var(--primary-fg);
  background:var(--primary-bg);
}
.sync-primary:active{background:var(--accent-d);}
.sync-ghost{
  flex:0 0 auto; border:1px solid var(--border); background:transparent; cursor:pointer;
  border-radius:12px; padding:13px 18px; font-family:inherit; font-size:15px; color:var(--text3);
}
.sync-link{
  display:block; width:100%; margin-top:14px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:var(--text2); text-decoration:underline;
}

/* ---------- carte ---------- */
.card{
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:22px;
  padding:16px 15px 14px; position:relative; overflow:hidden;
}

/* ---------- barre d'ajout ---------- */
.add-row{display:flex; gap:8px; margin-bottom:14px;}
.add-input{
  flex:1; min-width:0;
  background:var(--input-bg); border:1px solid var(--input-brd); border-radius:13px;
  padding:13px 15px; color:var(--text); font-family:inherit; font-size:16px;
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.add-input::placeholder{color:var(--text2);}
.add-input:focus{border-color:rgba(255,255,255,0.5); box-shadow:0 0 0 3px rgba(255,255,255,0.10);}

.rep-box{
  display:flex; align-items:center; flex-shrink:0;
  background:var(--input-bg); border:1px solid var(--input-brd); border-radius:13px;
  padding:0 8px 0 9px; gap:2px; transition:border-color .18s, box-shadow .18s;
}
.rep-box:focus-within{border-color:rgba(255,255,255,0.5); box-shadow:0 0 0 3px rgba(255,255,255,0.10);}
.rep-box .rep-ico{font-size:16px; font-weight:700; color:var(--text2); opacity:.95;}
.rep-input{
  width:26px; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:16px; text-align:center;
  padding:12px 0;
}
.rep-input::placeholder{color:var(--text3); opacity:.6;}
.rep-box .rep-j{font-size:12px; color:var(--text2); font-weight:600;}
/* masque les flèches number */
.rep-input::-webkit-outer-spin-button,.rep-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.rep-input{-moz-appearance:textfield;}

.add-btn{
  width:50px; flex-shrink:0; border:none; border-radius:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-bg); color:var(--primary-fg);
  font-size:26px; font-weight:300; line-height:1;
  transition:transform .12s, background .18s;
}
.add-btn:active{transform:translateY(1px) scale(.97); background:var(--accent-d);}

/* ---------- liste ---------- */
.list{display:flex; flex-direction:column; gap:7px;}

.todo{
  display:flex; align-items:center; gap:10px;
  background:var(--row); border:1px solid var(--border); border-radius:14px;
  padding:11px 11px 11px 12px; transition:background .15s;
}
.todo:active{background:var(--row-h);}
/* tâche épinglée : contour blanc brillant */
.todo.pinned{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 16px rgba(237,237,237,0.22);
}

.check{
  width:24px; height:24px; flex-shrink:0; border-radius:8px; cursor:pointer;
  border:2px solid #3A3A3A; background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-size:14px; font-weight:800; transition:all .15s;
}
.check.on{background:var(--accent); border-color:var(--accent); color:#000;}

.todo-text{
  flex:1; min-width:0; cursor:pointer; font-size:15.5px; word-break:break-word;
  padding:2px 0;
}
.todo.done .todo-text{color:var(--text2); text-decoration:line-through;}

.rep-badge{
  flex-shrink:0; font-size:12px; font-weight:700; color:var(--text);
  background:var(--input-bg); border:1px solid var(--input-brd);
  border-radius:8px; padding:3px 8px; white-space:nowrap;
}

.row-btn{
  width:34px; height:34px; flex-shrink:0; border:none; background:transparent; cursor:pointer;
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--text2); font-size:16px; transition:color .15s, background .15s;
}
.row-btn:active{background:rgba(255,255,255,0.06);}
.row-btn.edit:active{color:var(--accent);}
.row-btn.del:active{color:var(--red);}

/* champ d'édition inline (multi-ligne : voit tout le message) */
.edit-input{
  flex:1; min-width:0; display:block;
  background:var(--input-bg); border:1px solid var(--accent); border-radius:11px;
  padding:11px 13px; color:var(--text); font-family:inherit; font-size:16px; outline:none;
  line-height:1.4; resize:none; overflow:hidden;
}

/* ---------- vide ---------- */
.empty{
  text-align:center; color:var(--text2); font-size:14px;
  padding:38px 20px; line-height:1.7; white-space:pre-line;
}
.empty .em-ico{display:block; font-size:32px; margin-bottom:10px; opacity:.6;}

/* ---------- pied : signature de branding (logo NOIR) centrée ---------- */
.foot{
  display:flex; align-items:center; justify-content:center;
  margin-top:14px; padding:0;   /* = padding bas de .card (14px) -> logo centré verticalement */
}
.foot .brand{
  height:15px; width:auto; display:block; opacity:.3;   /* charte NOIR : signature en pied */
  user-select:none; -webkit-user-select:none; pointer-events:none;
}