/* ---------- Base ---------- */
:root{
  --fond:      #101216;
  --carte:     #181B21;
  --carte-2:   #1E222A;
  --bord:      #272C35;
  --texte:     #E9E7E3;
  --doux:      #8B919C;
  --accent:    #E0A458;
  --accent-2:  #F2C185;
  --haute:     #E0705E;
  --basse:     #5E8FA8;
  --normale:   #79B888;
  --r:         14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--fond);
  color:var(--texte);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  padding:20px 16px 56px;
  min-height:100vh;
}

.wrap{ max-width:640px; margin:0 auto; }

/* ---------- En-tête ---------- */
.head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

h1{
  font-size:26px;
  font-weight:650;
  letter-spacing:-0.02em;
}

.sub{
  color:var(--doux);
  font-size:14px;
  margin-top:2px;
}

/* Anneau de progression */
.ring{
  --p:0;
  flex:0 0 auto;
  width:54px; height:54px;
  border-radius:50%;
  display:grid; place-items:center;
  background:
    conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bord) 0);
}
.ring span{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--fond);
  display:grid; place-items:center;
  font-size:12px; font-weight:600;
  color:var(--accent-2);
}

/* ---------- Formulaire d'ajout ---------- */
.ajout{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  background:var(--carte);
  border:1px solid var(--bord);
  border-radius:var(--r);
  padding:12px;
  margin-bottom:18px;
}

.champ, .select, .date{
  width:100%;
  background:var(--carte-2);
  border:1px solid var(--bord);
  border-radius:10px;
  color:var(--texte);
  font:inherit;
  padding:12px 14px;
  outline:none;
  transition:border-color .15s ease;
}
.champ::placeholder{ color:var(--doux); }
.champ:focus, .select:focus, .date:focus{ border-color:var(--accent); }

.select{ appearance:none; color:var(--doux); }
.date{ color:var(--doux); appearance:none; }
.date::-webkit-calendar-picker-indicator{ filter:invert(0.6); cursor:pointer; }

.btn-ajout{
  background:var(--accent);
  color:#1A1206;
  border:0;
  border-radius:10px;
  font:inherit;
  font-weight:650;
  padding:12px 18px;
  cursor:pointer;
  transition:background .15s ease;
}
.btn-ajout:hover{ background:var(--accent-2); }
.btn-ajout:active{ transform:translateY(1px); }

.note-ajout{ font-size:14px; }

.indice-date{
  grid-column:1 / -1;
  color:var(--accent-2);
  font-size:12.5px;
  padding:0 2px;
}

@media (min-width:560px){
  .ajout{ grid-template-columns:1fr 150px 130px auto; }
  .note-ajout{ grid-column:1 / -1; }
}

/* ---------- Filtres / bascule de vue ---------- */
.filtres{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
}
.filtres .tri{
  flex:0 0 auto;
  width:auto;
  margin-left:auto;
  padding:9px 12px;
  font-size:13px;
  border-radius:9px;
}

.bascule-vue{
  display:flex;
  gap:4px;
  background:var(--carte);
  border:1px solid var(--bord);
  border-radius:9px;
  padding:3px;
}
.vue-btn{
  background:transparent;
  border:0;
  color:var(--doux);
  font:inherit;
  font-size:13px;
  font-weight:550;
  padding:7px 12px;
  border-radius:7px;
  cursor:pointer;
}
.vue-btn:hover{ color:var(--texte); }
.vue-btn.on{ color:var(--accent-2); background:var(--carte-2); }

/* ---------- Groupes (regroupement par date) ---------- */
.groupe{ margin-bottom:18px; }
.groupe-titre{
  font-size:13px;
  font-weight:650;
  color:var(--doux);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:8px;
  padding-left:2px;
}

/* ---------- Liste ---------- */
.liste{ list-style:none; display:flex; flex-direction:column; gap:8px; }

.tache{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--carte);
  border:1px solid var(--bord);
  border-left:3px solid var(--doux);
  border-radius:var(--r);
  padding:12px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.tache:hover{ box-shadow:0 4px 14px rgba(0,0,0,.25); }
.tache.p-haute{ border-left-color:var(--haute); }
.tache.p-basse{ border-left-color:var(--basse); }
.tache.glisse{ opacity:.4; }

.poignee{
  flex:0 0 auto;
  width:20px; height:24px;
  background:transparent;
  border:0;
  cursor:grab;
  display:grid; place-items:center;
  padding:0;
  color:var(--doux);
  touch-action:none;
}
.poignee svg{ width:16px; height:16px; fill:currentColor; }
.poignee:active{ cursor:grabbing; }
.poignee:hover{ color:var(--texte); }
.poignee.masque{ visibility:hidden; cursor:default; }

.inline{ display:flex; }

.case{
  flex:0 0 auto;
  width:24px; height:24px;
  border:1.5px solid var(--bord);
  border-radius:7px;
  background:transparent;
  cursor:pointer;
  display:grid; place-items:center;
  padding:0;
}
.case svg{
  width:15px; height:15px;
  fill:none; stroke:var(--fond);
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  opacity:0;
}
.case:hover{ border-color:var(--accent); }

.corps{ flex:1; min-width:0; }

.titre{
  display:block;
  word-break:break-word;
}

.meta{
  display:block;
  color:var(--doux);
  font-size:12px;
  margin-top:2px;
}

.priorite{ font-weight:600; }
.priorite-haute{ color:var(--haute); }
.priorite-basse{ color:var(--basse); }
.priorite-normale{ color:var(--normale); }

.echeance.retard{ color:var(--haute); font-weight:600; }
.echeance.aujourd{ color:var(--accent-2); font-weight:600; }
.echeance.demain{ color:var(--accent); font-weight:600; }

.notes{
  display:block;
  color:var(--doux);
  font-size:12.5px;
  margin-top:4px;
  word-break:break-word;
  opacity:.9;
}

.tache.fini{ border-left-color:var(--bord); }
.tache.fini .case{ background:var(--accent); border-color:var(--accent); }
.tache.fini .case svg{ opacity:1; }
.tache.fini .titre{ color:var(--doux); text-decoration:line-through; }

.editer{
  flex:0 0 auto;
  width:30px; height:30px;
  background:transparent;
  border:0;
  border-radius:8px;
  cursor:pointer;
  display:grid; place-items:center;
  padding:0;
}
.editer svg{
  width:15px; height:15px;
  fill:none; stroke:var(--doux);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.editer:hover{ background:var(--carte-2); }
.editer:hover svg{ stroke:var(--accent-2); }

/* ---------- Édition en ligne ---------- */
.edition{ display:flex; flex-direction:column; gap:8px; }
.champ-edit, .select-edit, .date-edit{
  width:100%;
  background:var(--carte-2);
  border:1px solid var(--bord);
  border-radius:8px;
  color:var(--texte);
  font:inherit;
  font-size:14px;
  padding:8px 10px;
  outline:none;
}
.champ-edit:focus, .select-edit:focus, .date-edit:focus{ border-color:var(--accent); }
.edition-ligne{ display:flex; gap:8px; }
.edition-ligne .select-edit{ flex:1; }
.edition-ligne .date-edit{ flex:1; color:var(--doux); }
.edition-actions{ display:flex; justify-content:flex-end; gap:8px; }
.edition-actions button{
  border:1px solid var(--bord);
  border-radius:8px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  padding:7px 14px;
  cursor:pointer;
  background:transparent;
  color:var(--doux);
}
.btn-sauver{ background:var(--accent) !important; color:#1A1206 !important; border-color:var(--accent) !important; }
.btn-sauver:hover{ background:var(--accent-2) !important; }
.btn-annuler:hover{ color:var(--texte); border-color:var(--texte); }

.suppr{
  flex:0 0 auto;
  width:30px; height:30px;
  background:transparent;
  border:0;
  border-radius:8px;
  cursor:pointer;
  display:grid; place-items:center;
  padding:0;
}
.suppr svg{
  width:15px; height:15px;
  fill:none; stroke:var(--doux);
  stroke-width:2; stroke-linecap:round;
}
.suppr:hover{ background:var(--carte-2); }
.suppr:hover svg{ stroke:var(--haute); }

/* ---------- Divers ---------- */
.vide{
  color:var(--doux);
  text-align:center;
  padding:36px 12px;
  border:1px dashed var(--bord);
  border-radius:var(--r);
}

.nettoyer{ margin-top:16px; text-align:center; }
.nettoyer button{
  background:transparent;
  border:1px solid var(--bord);
  border-radius:9px;
  color:var(--doux);
  font:inherit;
  font-size:14px;
  padding:9px 16px;
  cursor:pointer;
}
.nettoyer button:hover{ color:var(--haute); border-color:var(--haute); }

/* ---------- Calendrier ---------- */
.calendrier{ margin-bottom:16px; }

.cal-entete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.cal-titre{ font-size:15px; font-weight:650; }
.cal-nav{
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid var(--bord);
  background:var(--carte);
  color:var(--texte);
  font-size:16px;
  cursor:pointer;
  display:grid; place-items:center;
}
.cal-nav:hover{ background:var(--carte-2); border-color:var(--accent); }

.cal-grille{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
  margin-bottom:16px;
}
.cal-jour-entete{
  text-align:center;
  color:var(--doux);
  font-size:11px;
  font-weight:650;
  text-transform:uppercase;
  padding-bottom:4px;
}
.cal-case{
  aspect-ratio:1;
  background:var(--carte);
  border:1px solid var(--bord);
  border-radius:9px;
  color:var(--texte);
  font:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:2px;
}
.cal-case:hover{ border-color:var(--accent); }
.cal-case.vide{ background:transparent; border-color:transparent; cursor:default; }
.cal-case.aujourd{ border-color:var(--accent-2); }
.cal-case.selectionne{ background:var(--carte-2); border-color:var(--accent); }
.cal-numero{ font-size:13px; font-weight:550; }
.cal-points{ display:flex; gap:2px; }
.cal-point{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--normale);
}
.cal-point.priorite-haute{ background:var(--haute); }
.cal-point.priorite-basse{ background:var(--basse); }
.cal-point.fini{ opacity:.35; }

.cal-agenda h3{
  font-size:13px;
  font-weight:650;
  color:var(--doux);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:8px;
}

/* Accessibilité clavier */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}