Migration vers le système officiel

styles/commerce.css

@@ -165,6 +165,63 @@
   letter-spacing: 0.04em;
 }
 
+.actor-skill-helper {
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px dashed #c9a227;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.actor-skill-summary,
+.actor-skill-empty {
+  margin: 0;
+  font-size: 0.8em;
+  color: #444;
+  line-height: 1.4;
+}
+
+.actor-skill-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.actor-skill-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(44, 44, 62, 0.08);
+  color: #2c2c3e;
+  font-size: 0.95em;
+  white-space: nowrap;
+}
+
+.btn-actor-skill {
+  width: fit-content !important;
+  flex: 0 0 auto !important;
+  height: 28px;
+  padding: 0 11px;
+  border: 1px solid #7a5c00;
+  border-radius: 3px;
+  background: #fff9eb;
+  color: #7a5c00;
+  font-size: 0.8em;
+  font-weight: bold;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.btn-actor-skill:hover {
+  background: #f5ecd0;
+}
+
 /* --- Bouton de calcul ------------------------------------------------------- */
 
 .form-footer {