/* ─── Les petits rappels des tâches rapides (17/09/2026) ───
   En bas à droite, au-dessus de la bulle de messagerie, sur tous les écrans.
   Un rappel reste tant qu'on n'a rien décidé : Fait · Dans 1 h · Demain. */
.x4-rappel-zone { position: fixed; right: 24px; bottom: 92px; z-index: 97; display: flex; flex-direction: column; gap: 8px; width: 340px; max-width: calc(100vw - 48px); font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif); letter-spacing: -.01em; pointer-events: none; }
.x4-rappel-zone:empty { display: none; }
.x4-rappel-zone > * { pointer-events: auto; }
.x4-rappel { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px 16px; border-radius: var(--r-md, 18px); border: 1px solid var(--stroke, rgba(20, 20, 25, .1)); border-left: 4px solid var(--accent-bright, #f5d547); background: var(--panel-solid, #fff); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .34); color: var(--v2-text, #16171a); animation: x4-rappel-in .22s ease-out; }
@keyframes x4-rappel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.x4-rappel-tete { display: flex; align-items: center; gap: 8px; }
.x4-rappel-heure { padding: 2px 8px; border-radius: 99px; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); font-size: 11.5px; font-weight: 680; font-variant-numeric: tabular-nums; }
.x4-rappel-mot { font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-rappel.est-matin .x4-rappel-mot { font-size: 13px; font-weight: 680; letter-spacing: -.01em; text-transform: none; color: var(--v2-text, #16171a); }
.x4-rappel-x { margin-left: auto; width: 24px; height: 24px; border-radius: 99px; border: 0; background: none; font-size: 17px; line-height: 1; color: var(--v2-text-3, #6b6f76); cursor: pointer; }
.x4-rappel-x:hover { background: var(--inset, rgba(0, 0, 0, .06)); color: var(--v2-text, #16171a); }
.x4-rappel-texte { font-size: 14.5px; font-weight: 640; line-height: 1.3; overflow-wrap: anywhere; }
.x4-rappel-fiche { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-rappel-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.x4-rappel-liste li { padding-left: 12px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-rappel-liste li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 99px; background: var(--v2-text-3, #9a9ea6); }
.x4-rappel-liste li.est-retard { color: var(--neg-fg, #b3261e); }
.x4-rappel-liste li.est-retard::before { background: var(--neg-fg, #b3261e); }
.x4-rappel-liste li.est-suite { color: var(--v2-text-3, #6b6f76); }
.x4-rappel-liste li.est-suite::before { display: none; }
.x4-rappel-gestes { display: flex; gap: 6px; margin-top: 4px; }
.x4-rappel-gestes button { height: 30px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .16)); background: var(--panel-solid, #fff); font: inherit; font-size: 12.5px; font-weight: 620; color: var(--v2-text, #16171a); cursor: pointer; white-space: nowrap; }
.x4-rappel-gestes button:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-rappel-gestes button.est-plein { border-color: transparent; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }
.x4-rappel-plus { align-self: flex-end; height: 28px; padding: 0 12px; border-radius: 99px; border: 0; background: var(--v2-text, #16171a); color: var(--panel-solid, #fff); font: inherit; font-size: 12px; font-weight: 620; cursor: pointer; }

.x4-rappel.est-validation { border-left-color: var(--warn-fg, #8a5510); }
.x4-rappel.est-validation .x4-rappel-mot { font-size: 12.5px; font-weight: 680; letter-spacing: -.01em; text-transform: none; color: var(--warn-fg, #8a5510); }