Rework des fiches creature/PJ et Tinji/Loksyu

css/cde-theme.css

@@ -886,45 +886,135 @@ section.npc .cde-neon-tabs .item.active {
   text-align: center;
   padding: 10px 0;
 }
-.cde-supernatural-list .cde-supernatural-item {
-  background: rgba(16, 22, 34, 0.6);
-  border: 1px solid #1a2436;
-  border-radius: 4px;
-  margin-bottom: 6px;
-  padding: 6px;
-  list-style: none;
+.cde-super-add-row {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 0 8px;
 }
-.cde-supernatural-list .cde-supernatural-header {
+.cde-super-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-family: "Averia", sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #7d94b8;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 8px;
+  border: 1px solid #1a2436;
+  transition: color 0.12s, border-color 0.12s, background 0.12s;
+}
+.cde-super-add-btn i {
+  font-size: 10px;
+}
+.cde-super-add-btn:hover {
+  color: #cc44ff;
+  border-color: #cc44ff;
+  background: rgba(204, 68, 255, 0.08);
+}
+.cde-super-card {
+  border: 1px solid #1a2436;
+  border-left: 3px solid #cc44ff;
+  border-radius: 8px;
+  background: rgba(16, 22, 34, 0.7);
+  margin-bottom: 10px;
+  overflow: hidden;
+  transition: box-shadow 0.15s;
+}
+.cde-super-card:hover {
+  box-shadow: 0 0 8px rgba(204, 68, 255, 0.2);
+}
+.cde-super-card:hover .cde-super-controls {
+  opacity: 1;
+}
+.cde-super-header {
+  display: flex;
   align-items: center;
   gap: 8px;
+  padding: 8px 10px;
 }
-.cde-supernatural-list .cde-supernatural-header img {
+.cde-super-img {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
   border-radius: 4px;
   flex-shrink: 0;
 }
-.cde-supernatural-list .cde-supernatural-info {
-  flex: 1 1 0;
+.cde-super-info {
+  flex: 1;
   display: flex;
-  align-items: center;
-  gap: 6px;
+  flex-direction: column;
+  gap: 3px;
   min-width: 0;
 }
-.cde-supernatural-list .cde-supernatural-info .cde-supernatural-name {
-  font-size: 12px;
-  font-weight: 600;
+.cde-super-name {
+  font-size: 14px;
+  font-weight: 700;
+  font-family: "Averia", sans-serif;
+  color: #e2e8f4;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.cde-supernatural-list .cde-supernatural-desc {
-  font-size: 10px;
-  color: #7d94b8;
-  margin-top: 4px;
-  padding-left: 36px;
-  line-height: 1.4;
+.cde-super-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
-.cde-supernatural-list .cde-supernatural-desc p {
-  margin: 0;
+.cde-super-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.12s;
+  flex-shrink: 0;
+}
+.cde-super-controls a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  color: #7d94b8;
+  cursor: pointer;
+  transition: color 0.12s, background 0.12s;
+}
+.cde-super-controls a i {
+  font-size: 11px;
+}
+.cde-super-controls a:hover {
+  color: #e2e8f4;
+  background: rgba(38, 56, 83, 0.3);
+}
+.cde-super-desc {
+  padding: 6px 12px 8px 46px;
+  border-top: 1px solid rgba(26, 36, 54, 0.6);
+  background: rgba(16, 22, 34, 0.4);
+  font-size: 11px;
+  color: #7d94b8;
+  line-height: 1.5;
+}
+.cde-super-desc p {
+  margin: 0 0 4px;
+}
+.cde-super-desc p:last-child {
+  margin-bottom: 0;
+}
+.cde-super-desc em {
+  color: #e2e8f4;
+}
+.cde-super-desc strong {
+  color: #cc44ff;
+}
+.cde-super-empty {
+  padding: 16px;
+  text-align: center;
+  font-size: 12px;
+  color: #7d94b8;
+  font-style: italic;
 }
 .cde-npc-tracks {
   margin-top: 12px;