diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css
index e5b5001..2c0c252 100644
--- a/shaarli-pro/css/custom_views.css
+++ b/shaarli-pro/css/custom_views.css
@@ -248,6 +248,20 @@ body.view-archive .content-container {
     padding-right: 58px;
 }
 
+.note-modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+    overflow-y: auto;
+}
+
 .note-modal-overlay.open {
     display: flex;
 }
@@ -1117,4 +1131,161 @@ body.view-notes .notes-masonry:empty::after {
     font-weight: 600;
     font-size: 1.05rem;
     padding: 12px 14px 4px;
+}
+
+/* =========================================================
+   Draft editor — checklist item row (3-col grid)
+   ========================================================= */
+.todo-draft-row {
+    display: grid;
+    grid-template-columns: 26px minmax(0, 1fr) 34px;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 4px;
+}
+
+/* =========================================================
+   Note/todo card — tag pill inline layout + × button
+   ========================================================= */
+.note-card .note-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+}
+
+.note-card .note-tag-remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border: none;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--primary) 30%, transparent);
+    color: var(--special-view-chip-text);
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+    font-size: 0.7rem;
+    flex-shrink: 0;
+    transition: background 0.15s ease;
+}
+
+.note-card .note-tag-remove-btn:hover {
+    background: color-mix(in srgb, var(--primary) 55%, transparent);
+}
+
+/* =========================================================
+   Modal — scrollable content area
+   ========================================================= */
+.note-modal-content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 0 20px 12px;
+}
+
+/* =========================================================
+   Modal — tags row
+   ========================================================= */
+.note-modal-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 6px 20px 10px;
+    flex-shrink: 0;
+}
+
+/* =========================================================
+   Modal — pin toggle button (top-right of header)
+   ========================================================= */
+.note-modal-pin-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--special-view-muted);
+    cursor: pointer;
+    padding: 0;
+    font-size: 1rem;
+    transition: background 0.15s ease, color 0.15s ease;
+}
+
+.note-modal-pin-toggle.active {
+    color: var(--primary);
+}
+
+/* =========================================================
+   Modal — actions row components
+   ========================================================= */
+.note-modal-actions-left {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.note-modal-color-picker {
+    position: relative;
+}
+
+/* Icon buttons in modal actions (palette, edit, delete) */
+.note-modal-actions button,
+.note-modal-actions > div > button,
+.note-modal-actions a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--special-view-strong);
+    cursor: pointer;
+    padding: 0;
+    font-size: 1rem;
+    text-decoration: none;
+    transition: background 0.15s ease;
+}
+
+.note-modal-actions button:hover,
+.note-modal-actions > div > button:hover,
+.note-modal-actions a:hover {
+    background: color-mix(in srgb, var(--text-main) 10%, transparent);
+}
+
+/* "Fermer" close button in modal — pill style */
+.note-modal-close-btn {
+    display: inline-flex !important;
+    align-items: center !important;
+    background: var(--special-view-panel-alt) !important;
+    color: var(--special-view-strong) !important;
+    border: 1px solid var(--special-view-border) !important;
+    border-radius: 8px !important;
+    padding: 6px 20px !important;
+    font-size: 0.9rem !important;
+    font-family: inherit;
+    cursor: pointer;
+    width: auto !important;
+    height: auto !important;
+    transition: background 0.15s ease;
+}
+
+.note-modal-close-btn:hover {
+    background: var(--tile-bg-hover, var(--bg-card-hover)) !important;
+}
+
+/* Modal title — editable appearance */
+.note-modal-header .note-title {
+    flex: 1;
+    font-size: 1.15rem;
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0;
+    color: inherit;
+    word-break: break-word;
 }
\ No newline at end of file