:root{
  --brand-green:#16bb65;
}

/* ===== Fond (dégradé + image, sans ::before) ===== */
body{
  margin:0;
  min-height:100vh;
  text-align:center;
  color:#fff;
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  background:
    linear-gradient(115deg, rgba(32,40,60,0.78) 0%, rgba(32,80,100,0.65) 100%),
    url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1950&q=80')
    no-repeat center / cover fixed;
  position:relative;
}

/* ===== Header ===== */
.header-controls{
  display:flex; justify-content:flex-end; align-items:center; gap:18px;
  padding:16px 32px 0; position:relative; z-index:2;
}
.header-controls a{
  color:#fff; text-decoration:none; font-size:1.05em; padding:7px 18px;
  border-radius:16px; display:flex; align-items:center; gap:8px;
  transition:background .25s, box-shadow .25s, color .2s;
}
.header-controls a:hover{ background:rgba(255,255,255,0.08); box-shadow:0 2px 12px rgba(30,120,180,0.1); color:#ffe082; }
.header-line{ width:60%; margin:10px auto 0; border-top:1px solid rgba(255,255,255,0.16); }

/* ===== Titres / conteneurs ===== */
h1{ margin:12px auto 4px; }
.main{ display:flex; flex-direction:column; align-items:center; margin-top:10px; position:relative; z-index:2; }

/* ===== Carte minuteur ===== */
.timer-container{
  background:rgba(255,255,255,0.13);
  border:2px solid rgba(255,255,255,0.14);
  border-radius:28px;
  box-shadow:0 4px 40px rgba(0,0,0,0.22);
  backdrop-filter:blur(10px) saturate(140%);
  padding:48px 32px 36px;
  margin:0 auto 18px;
  max-width:510px; width:98%;
  transition:box-shadow .3s, background .3s, border-color .3s;
  position:relative;
}
.timer-container.focus-mode{
  background:linear-gradient(180deg, rgba(22,187,101,0.16), rgba(255,255,255,0.08));
  border-color:rgba(22,187,101,0.42);
  box-shadow:0 6px 40px rgba(22,187,101,0.18), 0 0 0 2px rgba(22,187,101,0.14) inset;
}
.timer-container.break-mode{
  background:linear-gradient(180deg, rgba(240,70,70,0.16), rgba(255,255,255,0.08));
  border-color:rgba(240,70,70,0.42);
  box-shadow:0 6px 40px rgba(240,70,70,0.18), 0 0 0 2px rgba(240,70,70,0.14) inset;
}
#timer{
  font-size:5em; margin:10px 0 24px;
  font-family:'Montserrat', monospace; letter-spacing:.03em;
  filter:drop-shadow(0 4px 6px #2228); font-weight:600;
}

/* ===== Contrôles ===== */
.controls-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:13px 0; }

/* Petits boutons */
.controls-row button:not(.play-btn):not(.pause-button){
  font-size:1.12em; padding:11px 23px; border:none; border-radius:15px;
  background:linear-gradient(90deg, #fffde4 0%, #b0fffc 100%); color:#333; cursor:pointer;
  box-shadow:0 2px 10px rgba(60,80,120,0.08); font-weight:600; letter-spacing:.02em;
  transition:background .23s, transform .18s, color .16s;
}
.controls-row button:not(.play-btn):not(.pause-button):hover{
  background:linear-gradient(90deg, #ffe082 0%, #ffd6e0 100%); color:#474600; transform:scale(1.05);
}

/* Gros Play/Pause */
.controls-row .play-btn{
  font-size:2em; padding:14px 38px; border-radius:15px; border:none;
  background:linear-gradient(90deg, #076c3a 0%, #13ad5c 100%); color:#fff; font-weight:bold; cursor:pointer;
  box-shadow:0 2px 14px rgba(7,108,58,0.27); transition:transform .18s; outline:none;
}
.controls-row .play-btn:hover{ transform:scale(1.07); }

.controls-row .pause-button{
  font-size:2em; padding:14px 38px; border-radius:15px; border:none;
  background:linear-gradient(90deg, #8d1818 0%, #ff3030 100%); color:#fff; font-weight:bold; cursor:pointer;
  box-shadow:0 2px 14px rgba(141,24,24,0.21); transition:transform .18s;
}
.controls-row .pause-button:hover{ transform:scale(1.07); }
.play-btn.pause-active{
  background:linear-gradient(90deg, #901818 0%, #ff3030 100%);
  box-shadow:0 2px 24px rgba(160,20,30,0.23), 0 1px 5px #b2202050;
}

/* Animations */
.play-btn.pulse{ animation:pulseBtn .39s cubic-bezier(.55,.05,.75,.5); }
@keyframes pulseBtn{
  0%{ box-shadow:0 0 0 0 rgba(180,40,60,.13); transform:scale(1); }
  55%{ box-shadow:0 0 20px 9px rgba(255,30,65,.12); transform:scale(1.11); }
  100%{ box-shadow:0 2px 14px rgba(7,108,58,.22); transform:scale(1); }
}
.emphasize-green{
  box-shadow:0 0 0 6px rgba(255,255,255,0.12), 0 0 0 12px rgba(22,187,101,0.32), 0 12px 38px rgba(0,0,0,0.35) !important;
  animation:pulseStrong 1.25s ease-in-out infinite; transform:translateZ(0);
}
.emphasize-red{
  box-shadow:0 0 0 6px rgba(255,255,255,0.12), 0 0 0 12px rgba(240,70,70,0.32), 0 12px 38px rgba(0,0,0,0.35) !important;
  animation:pulseStrong 1.25s ease-in-out infinite; transform:translateZ(0);
}
@keyframes pulseStrong{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.09);} }
@media (prefers-reduced-motion:reduce){ .emphasize-green, .emphasize-red{ animation:none; } }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:rgba(22,28,40,0.92); color:#fff; border:1px solid rgba(255,255,255,0.14);
  border-radius:14px; padding:12px 16px; box-shadow:0 8px 30px rgba(0,0,0,.28);
  display:flex; align-items:center; gap:10px; z-index:10001;
  opacity:0; transition:opacity .22s ease, transform .22s ease; backdrop-filter:blur(8px);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .msg{ font-size:.98em; }
.toast .close{
  background:transparent; border:none; color:#fff; font-size:1.2em; cursor:pointer;
  padding:2px 6px; opacity:.8; transition:opacity .2s;
}
.toast .close:hover{ opacity:1; }

/* ===== Tâches ===== */
.task-input-bar{
  display:flex; gap:8px; align-items:center; width:98%; max-width:510px; margin:8px auto 0;
}
.task-input-bar input{
  flex:1; padding:13px 10px; border:none; border-radius:8px; font-size:1.12em;
  background:rgba(250,250,250,0.96); color:#222; transition:box-shadow .19s; font-family:inherit;
}
.task-input-bar input:focus{ outline:none; box-shadow:0 2px 12px #8ecaff40; }
.task-input-bar button{
  padding:12px 22px; border:none; border-radius:8px;
  background:linear-gradient(90deg, #ffb347, #ffd700); color:#343d00; font-size:1em; font-weight:600;
  cursor:pointer; transition:background .2s, transform .14s; box-shadow:0 1px 6px rgba(255,215,0,0.06);
}
.task-input-bar button:hover{ background:#fffde7; color:#b3a308; transform:scale(1.04); }

.task-list-display{
  list-style:none; padding:0; margin-top:8px; width:98%; max-width:510px; margin-left:auto; margin-right:auto;
}
.task-list-display li{
  background:rgba(255,255,255,0.15); border-radius:11px; padding:13px 17px; margin:7px 0; font-size:1.05em; color:#fff;
  display:flex; gap:12px; align-items:center; justify-content:space-between; box-shadow:0 1px 8px rgba(20,32,50,0.07);
  transition:background .16s, transform .14s;
}
.task-list-display li:hover{ background:rgba(255,255,255,0.24); transform:scale(1.01); }
.task-left{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.task-checkbox{ width:20px; height:20px; accent-color:var(--brand-green); cursor:pointer; flex-shrink:0; }
.task-text{ flex:1; word-break:break-word; text-align:left; }
.completed .task-text{ opacity:.95; } /* pas de barré */

/* ===== Playlist widget ===== */
.playlist-widget{
  position:fixed; bottom:24px; right:24px; z-index:10000;
  background:rgba(30,32,36,0.9); border-radius:18px; padding:14px 18px;
  box-shadow:0 4px 32px #0005; border:1.5px solid rgba(255,255,255,0.14);
  font-family:'Montserrat', Arial, sans-serif; color:#fff; text-align:left;
}
.playlist-widget label{ display:block; margin-bottom:6px; font-size:0.9em; font-weight:600; color:#aaa; }
.playlist-widget select{
  background:rgba(255,255,255,0.1); border:none; border-radius:10px; padding:8px 12px;
  font-size:0.95em; color:#fff; cursor:pointer; appearance:none; outline:none; min-width:240px;
}
.playlist-widget select option{ background:#1c1c1c; color:#fff; padding:10px; }

/* ===== Stats (page Statistiques) ===== */
.card{
  background:rgba(255,255,255,0.13);
  box-shadow:0 4px 40px rgba(0,0,0,0.22);
  backdrop-filter:blur(10px) saturate(140%);
  border-radius:22px; border:2px solid rgba(255,255,255,0.14);
}
.page-title{
  text-align:center; margin:16px 0 8px; font-weight:700;
  background:linear-gradient(90deg, #ffe082, #9be7ff 60%, #b388ff 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  position:relative; z-index:2;
}
.dash-wrap{ width:98%; max-width:1024px; margin:0 auto; padding:14px 0 28px; position:relative; z-index:2; }
.section{ margin-top:16px; padding:16px; }
.section h2{ margin:0 0 12px; font-size:1.2em; font-weight:700; letter-spacing:.02em; text-align:left; }
.kpi-grid{ display:grid; gap:14px; grid-template-columns:repeat(6,1fr); }
@media (max-width:1020px){ .kpi-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
.kpi{ padding:16px 14px; text-align:center; }
.kpi .label{ font-size:.92em; opacity:.85; }
.kpi .val{ font-size:1.7em; font-weight:700; margin-top:2px; }
.kpi .sub{ font-size:.86em; opacity:.8; margin-top:4px; }

.goal{ display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:center; }
@media (max-width:720px){ .goal{ grid-template-columns:1fr; } }
.ring{ width:220px; height:220px; display:grid; place-items:center; position:relative; margin:0 auto; }
.ring svg{ transform:rotate(-90deg); }
.ring .ring-val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; font-weight:700; }
.ring .ring-val .big{ font-size:1.9em; }
.ring .ring-val .small{ font-size:.9em; opacity:.85; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; align-items:center; }

.btn{
  border:none; border-radius:14px; padding:12px 18px; cursor:pointer; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(90deg, #076c3a 0%, #13ad5c 100%); color:#fff; box-shadow:0 2px 14px rgba(7,108,58,0.27);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn.secondary{
  background:linear-gradient(90deg, #fffde4 0%, #b0fffc 100%); color:#333;
  box-shadow:0 2px 10px rgba(60,80,120,0.08);
}

.goal-form{ display:none; gap:8px; align-items:center; }
.goal-form input{
  width:120px; padding:10px 12px; border:none; border-radius:10px;
  background:rgba(250,250,250,0.96); color:#21272b; font-family:inherit; font-size:1em;
  box-shadow:0 1px 8px #a2e7fc21;
}
.goal-form .btn{ padding:10px 14px; }

/* ===== Graphiques & liste récentes ===== */
.chart{ padding:16px 16px 8px; }
.chart-bars{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; align-items:end; height:200px; margin-top:8px; }
.bar-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.bar{
  width:100%; max-width:48px; border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg, #13ad5c, #076c3a);
  box-shadow:0 6px 20px rgba(7,108,58,0.25); position:relative; transition:height .25s ease;
}
.bar.zero{ background:rgba(255,255,255,0.15); box-shadow:none; }
.bar .hint{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.6); padding:4px 6px; border-radius:6px; font-size:.78em; display:none;
}
.bar-wrap:hover .bar .hint{ display:block; }
.day-label{ font-size:.85em; opacity:.9; }
.recent-list{ list-style:none; padding:0; margin:0; }
.recent-item{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.1); margin-bottom:8px;
}
.recent-item .title{ font-weight:600; text-align:left; }
.recent-item .meta{ font-size:.9em; opacity:.85; }
.recent-item .tag{ padding:4px 10px; border-radius:999px; font-size:.85em; background:rgba(0,0,0,0.25); }
.tag-25{ background:linear-gradient(90deg,#ffecb3,#ffd54f); color:#343400; }
.tag-50{ background:linear-gradient(90deg,#bbdefb,#90caf9); color:#072c4a; }
.tag-custom{ background:linear-gradient(90deg,#e1bee7,#ba68c8); color:#2b0840; }

/* ===== Boutons Objectif (spécifiques) ===== */
#btnShowGoal{
  background:linear-gradient(90deg, #4f46e5, #06b6d4) !important; /* indigo → cyan */
  color:#fff !important;
  box-shadow:0 2px 14px rgba(6,182,212,0.28) !important;
  border:none !important;
}
#btnShowGoal:hover{
  transform:scale(1.04);
  box-shadow:0 4px 18px rgba(6,182,212,0.36) !important;
}
#goalCancel{
  background:linear-gradient(90deg, #8d1818, #ff3030) !important; /* rouge */
  color:#fff !important;
  box-shadow:0 2px 14px rgba(141,24,24,0.24) !important;
  border:none !important;
}
#goalCancel:hover{
  transform:scale(1.04);
  box-shadow:0 4px 18px rgba(141,24,24,0.34) !important;
}
#goalSave{ outline:none; }
#btnShowGoal:focus-visible,
#goalCancel:focus-visible,
#goalSave:focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 0 0 5px rgba(0,0,0,.25) !important;
  border-radius:14px;
}

/* ===== Responsive ===== */
@media (max-width:900px){
  h1{ font-size:2.1em; }
  .timer-container{ padding:34px 10px; }
  .main{ margin-top:16px; }
}
@media (max-width:660px){
  .header-controls{ justify-content:center; flex-wrap:wrap; gap:6px; padding:12px 5px 0; }
  h1{ font-size:1.25em; }
  .timer-container{ padding:19px 12px; border-radius:14px; }
}
@media (max-width:510px){
  .controls-row{ flex-direction:column; gap:5px; }
  .task-input-bar{ flex-direction:column; gap:8px; }
  .task-input-bar input, .task-input-bar button{ width:100%; }
}
/* --- Bouton icône moderne (supprimer tâche) --- */
.btn-icon{
  --size: 36px;
  display:inline-grid; place-items:center;
  width:var(--size); height:var(--size);
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff; cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  backdrop-filter: blur(6px) saturate(140%);
}
.btn-icon svg{ width:18px; height:18px; display:block; }

.btn-delete:hover{
  background:linear-gradient(90deg,#8d1818,#ff3030);
  border-color:rgba(255,255,255,0.28);
  box-shadow:0 6px 20px rgba(255,48,48,0.28);
  transform:translateY(-1px) scale(1.03);
}
.btn-delete:active{ transform:translateY(0) scale(0.98); }
.btn-delete:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 0 0 6px rgba(0,0,0,.25);
}
@media (prefers-reduced-motion:reduce){ .btn-icon{ transition:none; } }
/* ===== Désactiver/masquer les poignées de déplacement des tâches ===== */

/* 1) Cache les éléments de poignée les plus courants */
#taskList .drag-handle,
#taskList .task-handle,
#taskList .handle,
#taskList .grip,
#taskList .grab {
  display: none !important;
}

/* 2) S'il y avait un effet "barre" via pseudo-élément ou bordure à gauche */
.task-list-display li::before {
  content: none !important;
}
.task-list-display li {
  border-left: none !important;
  background-image: none !important; /* au cas où la barre est un gradient */
  cursor: default !important;        /* désactive le curseur "grab" */
  padding-left: 13px;                /* léger rééquilibrage du padding si besoin */
}

/* 3) Certains libs mettent [draggable="true"] + curseur "grab" */
#taskList [draggable="true"] {
  cursor: default !important;
}

/* 4) Nettoyage d'espacement si la poignée prenait de la place */
.task-left {
  gap: 10px; /* conserve un petit espace entre la checkbox et le texte */
}