add multi-page notepad and memos toolbox tool

website/src/styles/toolboxes/_memos.scss

@@ -0,0 +1,186 @@
+// Rôle : stylise l'outil Memos, ses post-it et sa bande déroulante.
+.memos-module {
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-4);
+}
+
+.memos-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.memos-add-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.memos-ticker-toggle {
+  width: 40px;
+  min-width: 40px;
+  padding: 0;
+}
+
+.memos-ticker-toggle.active,
+.memo-card.is-drop-target {
+  border-color: rgba(246, 196, 83, 0.48);
+  background: rgba(246, 196, 83, 0.1);
+  color: var(--color-accent-gold);
+}
+
+.memos-ticker {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid rgba(246, 196, 83, 0.22);
+  border-radius: var(--radius-md);
+  background: rgba(5, 7, 17, 0.56);
+}
+
+.memos-ticker-track {
+  display: flex;
+  width: max-content;
+  min-width: 100%;
+  gap: calc(var(--space-6) * 3);
+  padding: 8px 10px;
+  animation: memos-ticker-scroll 24s linear infinite;
+}
+
+.memos-ticker-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.memos-ticker-item::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--memo-color);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--memo-color) 42%, transparent);
+}
+
+.memos-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: var(--space-3);
+}
+
+.memo-card {
+  position: relative;
+  display: grid;
+  gap: var(--space-2);
+  min-height: 132px;
+  padding: var(--space-3) var(--space-3) var(--space-3) 52px;
+  border: 1px solid color-mix(in srgb, var(--memo-color) 42%, transparent);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--memo-color) 18%, transparent), transparent 54%),
+    rgba(5, 7, 17, 0.5);
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard),
+    opacity var(--duration-fast) var(--ease-standard);
+}
+
+.memo-card textarea {
+  width: 100%;
+  min-height: 76px;
+  resize: vertical;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.45;
+  outline: none;
+}
+
+.memo-card.is-dragging {
+  opacity: 0.58;
+}
+
+.memo-drag-handle {
+  position: absolute;
+  top: var(--space-3);
+  left: var(--space-3);
+  display: inline-grid;
+  width: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  place-items: center;
+  padding: 0;
+  color: var(--color-text-muted);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.memo-drag-handle:active {
+  cursor: grabbing;
+}
+
+.memo-card footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.memo-color-menu {
+  top: auto;
+  bottom: calc(100% + 8px);
+  transform: translate(-50%, 4px);
+}
+
+.notepad-color-dropdown:hover .memo-color-menu,
+.notepad-color-dropdown:focus-within .memo-color-menu,
+.notepad-color-dropdown.is-open .memo-color-menu {
+  transform: translate(-50%, 0);
+}
+
+.memo-color-menu::after {
+  top: 100%;
+  bottom: auto;
+}
+
+.memo-color-menu::before {
+  top: 100%;
+  bottom: auto;
+  border-top: 7px solid rgba(10, 13, 28, 0.99);
+  border-bottom: 0;
+}
+
+.memo-delete-button {
+  width: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0;
+}
+
+.memos-empty {
+  display: inline-flex;
+  min-height: 118px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-style: dashed;
+  color: var(--color-text-secondary);
+}
+
+@keyframes memos-ticker-scroll {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}