/* MySifa — Post-its (portail + pages applicatives si multi-page, desktop >= 1024px) */
.postit-layer{display:none}
@media (min-width:1024px){.postit-layer{display:block}}
.postit{
  --postit-color:var(--accent);
  position:fixed;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  width:260px;
  min-height:120px;
  box-shadow:0 4px 24px rgba(0,0,0,0.18);
  z-index:200;
  display:flex;
  flex-direction:column;
  user-select:none;
}
.postit-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px 8px;
  cursor:grab;
  border-radius:12px 12px 0 0;
  background:var(--card);
  gap:8px;
  border-top:3px solid var(--postit-color);
}
.postit-header:active{cursor:grabbing}
.postit-color-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--postit-color);
  border:2px solid color-mix(in srgb,var(--postit-color) 55%,var(--border));
  cursor:pointer;
  padding:0;
  transition:transform .15s,box-shadow .15s;
}
.postit-color-dot:hover{
  transform:scale(1.08);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--postit-color) 28%,transparent);
}
.postit-color-dot:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--postit-color) 35%,transparent);
}
#postit-color-palette{
  position:fixed;
  display:none;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,0.28);
  z-index:8030;
  width:200px;
  min-height:52px;
  box-sizing:border-box;
}
#postit-color-palette.open{display:flex!important;visibility:visible;pointer-events:auto}
#postit-color-palette .postit-color-swatch{
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  appearance:none;
  -webkit-appearance:none;
  background:var(--postit-swatch-bg,var(--muted))!important;
  background-color:var(--postit-swatch-bg,var(--muted))!important;
  transition:transform .12s,border-color .12s;
}
#postit-color-palette .postit-color-swatch:hover{transform:scale(1.1)}
#postit-color-palette .postit-color-swatch.active{
  border-color:var(--text);
  box-shadow:0 0 0 2px var(--card);
}
.postit-title{
  flex:1;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  outline:none;
  min-width:0;
}
.postit-body{padding:4px 12px 6px;flex:1}
.postit-task{display:flex;align-items:flex-start;gap:6px;padding:0;margin:0}
.postit-task+.postit-task{margin-top:2px}
.postit-task input[type="checkbox"]{
  margin-top:3px;
  accent-color:var(--postit-color);
  flex-shrink:0;
  cursor:pointer;
}
.postit-task-text{
  font-size:13px;
  color:var(--text);
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  resize:none;
  line-height:1.4;
  padding:0;
  margin:0;
  min-height:1.4em;
  overflow:hidden;
  box-sizing:border-box;
  font-family:inherit;
}
.postit-task.done .postit-task-text{
  text-decoration:line-through;
  color:var(--muted);
}
.postit:not(.is-hidden) .postit-footer{
  cursor:grab;
}
.postit:not(.is-hidden) .postit-footer:active{
  cursor:grabbing;
}
.postit-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 8px;
  padding:6px 12px 10px;
  border-top:1px solid var(--border);
}
.postit-clear-btn{
  font-size:11px;
  color:var(--muted);
  background:none;
  border:none;
  cursor:pointer;
  padding:2px 4px;
}
.postit-clear-btn:hover{color:var(--danger)}
.postit-add-task-btn{
  font-size:11px;
  color:var(--postit-color);
  background:none;
  border:none;
  cursor:pointer;
  padding:2px 4px;
  font-weight:600;
}
.postit-multipage-btn{
  font-size:11px;
  color:var(--muted);
  background:none;
  border:none;
  cursor:pointer;
  padding:2px 4px;
  font-weight:600;
  white-space:nowrap;
}
.postit-multipage-btn:hover{color:var(--text2)}
.postit-multipage-btn.on{color:var(--accent)}
.postit-multipage-btn.on .postit-multipage-label{color:var(--accent)}
.postit-multipage-label{font-weight:500;color:var(--muted)}
.postit-header-actions{
  display:flex;
  align-items:center;
  gap:2px;
  flex-shrink:0;
}
.postit-hide-btn,
.postit-delete-btn{
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:0 4px;
  transition:color .15s;
}
.postit-hide-btn:hover{color:var(--accent)}
.postit-delete-btn:hover{color:var(--danger)}
.postit.is-hidden{
  overflow:hidden;
  min-height:0;
  cursor:pointer;
  transition:left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1),
    transform .3s cubic-bezier(.4,0,.2,1),box-shadow .2s ease;
}
.postit.is-hidden .postit-header{
  cursor:pointer;
  border-radius:12px;
}
.postit.is-hidden .postit-body,
.postit.is-hidden .postit-footer{
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.postit.is-hidden:hover,
.postit.is-hidden.is-peek{
  overflow:visible;
  z-index:450;
  box-shadow:0 8px 32px rgba(0,0,0,0.28);
  transform:translateY(calc(-1 * var(--postit-peek-up, 140px)));
}
.postit.is-hidden:hover .postit-body,
.postit.is-hidden:hover .postit-footer,
.postit.is-hidden.is-peek .postit-body,
.postit.is-hidden.is-peek .postit-footer{
  opacity:1;
  pointer-events:auto;
}
.postit.is-animating{
  pointer-events:none;
  transition:left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1);
}

#postit-dock-root{display:none}
#postit-dock-menu{
  position:fixed;
  display:none;
  flex-direction:column;
  gap:4px;
  min-width:220px;
  padding:8px;
  z-index:8004;
}
#postit-dock-menu.open{display:flex}
.postit-dock-menu-btn{
  padding:10px 12px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:background .15s,color .15s;
}
.postit-dock-menu-btn:hover{background:var(--accent-bg);color:var(--accent)}
.postit-dock-menu-btn.someday::before,
.postit-dock-menu-btn.today::before{
  content:'';
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
  position:relative;top:-1px;
}
.postit-dock-menu-btn.someday::before{background:var(--warn)}
.postit-dock-menu-btn.today::before{background:var(--accent)}