/****** TOGGLE DARKMODE ******/ 

.dark-btn { 
  position: absolute; 
  top: 20px; 
  right: 20px; 
  background: transparent; 
  border: none; 
  font-size: 28px; 
  cursor: pointer; 
  padding: 8px; 
  border-radius: 8px; 
  margin-right: 20px; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
} 

.dark-btn:hover { 
  border-radius: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.3); 
  transform: translateY(-3px); 
} 

 

/******* DEFAULT (LIGHT MODE) *******/ 

body { 
  background-color: rgb(249, 246, 246);   
  color: black;                           
  transition: background-color 0.3s, color 0.3s; 
} 

/******** DARK MODE ********/ 

body.dark { 
  background-color: #111827;  
  color: white;                
} 

/*******  PAGE D'ACCEUIL  *******/ 

.acceuil-container 
{ 
  max-width: 100%;  
  width: 90%;    
  padding: 30px;  
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
} 

.démarrer-btn 
{ 
  bottom: 12px; 
  background-color: rgb(51, 130, 109); 
  font-weight: bold; 
  font-size: 20px; 
  font-family: monospace; 
  color: white; 
  margin-left: 90px; 
  width: 200px; 
  text-align: center; 
  cursor: pointer; 
  border-color: beige; 
  padding: 14px 48px; 
  border-radius: 30px;   
} 

 

.démarrer-btn:hover  
{ 
 border: none; 
 background: rgb(34, 92, 90); 
 box-shadow: 0px 8px 24px; 
transform: translateY(-3px); 
} 

.totoro-jumping { 
  width: 200px; 
  animation: float 4s ease-in-out infinite; 
} 

@keyframes float { 
  0%, 100% { transform: translateY(0px); } 
  50% { transform: translateY(-30px); } 
} 


/******   HEADER   ******/  

header { 
  background-color: white;             
  transition: background-color 0.3s, color 0.3s; 
  margin: auto; 
} 

body.dark header { 
  background-color: #1f2834;  
} 


/*******   CALENDAR  *******/ 

.calendar { 
  border: 1px solid transparent; 
  width: 800px; 
  height: auto; 
  display: flex; 
  flex-direction: column; 
  padding: 10px; 
  border-radius: 10px; 
  box-shadow: 0 0 10px rgba(0,0,0,0.3); 
  background: white; 
  margin-left: 20px; 
  transition: border-color 0.3s ease; 
} 

.calendar:hover { 
   border-color: #6366f1; 
} 

body.dark .calendar { 
  background-color: #1f2834;  
  transition: background-color 0.3s, color 0.3s; 
} 


.calendar-header {

  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
  font-size: large; 
} 

.calendar-header-2 { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 10px; 
} 


.monthYear { 
  text-align: center; 
  font-weight: 600; 
  width: 150px; 
} 


.calendar-header button { 
  color: white; 
  border: none; 
  width: 36px; 
  height: 36px; 
  padding: 0; 
  border-radius: 20px; 
  cursor: pointer; 
  font-size: 18px; 
  font-weight: 600; 
  background: rgb(63, 116, 173); 
  justify-content: center; 
  padding: 0; 
  transition: all 0.2s ease; 
} 


.calendar-header button:hover { 
  transform: scale(1.1); 
  background: #6366f1; 
} 

.days { 
  display: grid; 
  grid-template-columns: repeat(7,1fr); 
} 
 
.day { 
  text-align: center; 
  padding: 5px; 
  color: #999fa6; 
  font-weight: 500; 
} 

.dates { 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  gap: 10px; 
} 

.date { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding: 10px; 
  margin: auto; 
  cursor: pointer; 
  font-weight: 600; 
  border-radius: 50%; 
  width: 40px; 
  height: 40px; 
  transition: 0.2s; 
} 

.date:hover, 
.date.active{ 
  background: rgb(63, 116, 173); 
  color: white; 
} 


.date.inactive { 
  color: rgb(150, 135, 249); 
} 

.date.inactive.hover { 
  color: white; 
} 

#calendar-task-list {
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
}

#calendar-task-list li {
  background: rgba(154, 230, 180, 0.45); 
  color: #065f46;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  animation: fadeIn 0.25s ease-in-out;
}

#calendar-task-list li::before {
  content: "•";
  color: #10b981;
  font-weight: bold;
  margin-right: 8px;
}

body.dark #calendar-task-list li {
  background: rgba(52, 211, 153, 0.35);
  color: #ecfdf5;
}




/******* TO-DO LIST *******/ 

.container { 
  display: flex; 
  height: 100%; 
  padding: 0 20px; 
  margin-left: 900px; 
  margin-top: -625px; 
} 

.container:hover { 
  border-color: #6366f1; 
} 

.todo-app { 
  border: 1px solid transparent; 
  width: 470px; 
  padding: 2rem; 
  display: flex; 
  align-items: left; 
  justify-content: center; 
  flex-direction: column; 
  gap: 10px; 
  background-color: white; 
  border-radius: 10px; 
  box-shadow: 0 0 10px rgba(0,0,0,0.3); 
  backdrop-filter: blur(10px); 
  transition: border-color 0.3s ease; 
} 

.todo-app:hover { 
  border-color: #6366f1; 
} 

body.dark .todo-app { 
  background-color: #1f2834;  
  transition: background-color 0.3s, color 0.3s; 
} 

 
.stat-container { 
  padding: 15px 10px; 
  border-radius: 10px; 
  border: 2px solid rgba(232, 126, 163, 0.264); 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 20px; 
  width: 100%; 
} 

.details { 
  width: 100%; 
} 

.details h3 { 
  font-family: monospace; 
} 

 
#progressbar { 
  width: 100%; 
  height: 7px; 
  background: rgba(255,194,209,0.3); 
  border-radius: 20px; 
  position: relative; 
  margin-top: 15px; 
} 

#progress { 
  width: 0%; 
  height: 100%; 
  background: #ff6f91; 
  border-radius: 20px; 
  transition: width 0.3s ease; 
} 

#numbers { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 80px; 
  height: 80px; 
  background: #ff6f91; 
  border: 2px solid rgba(255,194,209,0.3); 
  font-weight: bold; 
  border-radius: 50%; 
  font-size: 1.5rem; 
} 

.input-area { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%; 
} 

.input-area input { 
  flex: 1; 
  padding: 10px 17px; 
  font-size: 1.1rem; 
  border: none; 
  outline: none; 
  border-radius: 22px; 
  background: rgba(255,194,209,0.3); 
  color: black; 
} 

 

.input-area input::placeholder { 
  color: #bcbcbc; 
} 

.input-area button { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-left: 10px; 
  padding: 8px; 
  border-radius: 50%; 
  height: 40px; 
  color: white; 
  font-size: 1.1rem; 
  background: rgb(63, 116, 173); 
  border: 2px solid rgba(255,255,255,0.18); 
  cursor: pointer; 
  transition: all 0.2s ease; 
} 

.input-area button:hover { 
  transform: scale(1.1); 
  background: #6366f1; 
} 

.todos-container { 
  width: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

#task-list { 
  width: 100%; 
} 


#task-list li { 
  width: fit-content; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  background: rgba(255,194,209,0.3);; 
  margin-bottom: 10px; 
  margin-right: auto; 
  padding: 8px 10px; 
  border-radius: 30px; 
  font-size: 1.1rem; 
  color: black; 
  position: relative; 
  transition: box-shadow 0.2s ease; 
} 

#task-list li:hover { 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
} 

#task-list li .checkbox { 
  min-width: 20px; 
  height: 20px; 
  border: 2px solid rgba(255,255,255,0.3); 
  background: transparent; 
  border-radius: 50%; 
  border-color: rgb(228, 202, 202); 
  appearance: none; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  } 

#task-list li .checkbox:checked { 
  background: #ff6f91; 
  transform: scale(1.1); 
} 

 
#task-list li .checkbox:checked::before { 
  display: flex; 
  content: '\2713'; 
  color: white; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 1rem; 
} 

#task-list li span { 
  flex: 1; 
  margin-left: 10px; 
  word-wrap: break-word; 
} 

#task-list li.completed span { 
  text-decoration: 2px line-through #000; 
  color:#000; 
} 

.task-buttons { 
  display: flex; 
  gap: 10px; 
  padding: 10px; 
  margin-right: auto; 
} 

.task-buttons button { 
  background: rgba(245, 184, 199, 0.899); 
  border: none; 
  border-radius: 40%; 
  width: 30px; 
  height: 30px; 
  color: white; 
  font-size: 0.8rem; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 

.task-buttons button:hover { 
  transform: scale(1.2); 
} 

.task-buttons .edit-btn { 
  background: #ffbf00; 
} 

.task-buttons .delete-btn { 
  background: #ff6f91; 
} 
 

/******** POMODORO ********/ 


.pomodoro-container { 
  width: 490px; 
  border: 1px solid transparent; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  background-color: white; 
  margin-left: 925px; 
  margin-top: 50px; 
  border-radius: 10px; 
  padding: 10px 20px; 
  box-shadow: 0 0 10px rgba(0,0,0,0.3); 
  transition: border-color 0.3s ease;
} 

.pomodoro-container:hover { 
  border-color: #6366f1; 
} 

.timer { 
  font-size: 50px; 
  font-weight: 700; 
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: rgb(63, 116, 173); 
} 

.button-wrapper { 
  display: flex; 
  gap: 10px; 
} 

body.dark .pomodoro-container { 
  background-color: #1f2834;  
  transition: background-color 0.3s, color 0.3s; 
} 


.startBtn { 
  font-size: 13px; 
  font-weight: 800; 
  font-family: Verdana, Geneva, Tahoma, sans-serif; 
  letter-spacing: 1px; 
  padding: 10px 20px; 
  border-radius: 20px; 
  border: none; 
  cursor: pointer; 
  transition: 0.2s ease-in-out; 
  background-color: lightgreen; 
} 

.stopBtn { 
  font-size: 13px; 
  font-weight: 800; 
  font-family: Verdana, Geneva, Tahoma, sans-serif; 
  letter-spacing: 1px; 
  padding: 10px 20px; 
  border-radius: 20px; 
  border: none; 
  cursor: pointer; 
  transition: 0.2s ease-in-out; 
  background-color: #ff6f91; 
} 

.resetBtn { 
  font-size: 13px; 
  font-weight: 800; 
  font-family: Verdana, Geneva, Tahoma, sans-serif; 
  letter-spacing: 1px; 
  padding: 10px 20px; 
  border-radius: 20px; 
  border: none; 
  cursor: pointer; 
  transition: 0.2s ease-in-out; 
  background-color: #6366f1; 
}