.rich-text-editor {
  border: 1px solid rgba(46, 62, 94, 0.86);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 27, 46, 0.96), rgba(14, 22, 39, 0.96));
}

.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid rgba(46, 62, 94, 0.86);
  background: rgba(10, 18, 32, 0.5);
}

.rt-sep {
  width: 1px;
  margin: 2px 4px;
  background: rgba(255, 255, 255, 0.1);
}

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 30px;
  padding: 0 0.55rem;
  border: 1px solid rgba(46, 62, 94, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #d5deee;
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.rt-btn:hover {
  border-color: rgba(224, 170, 55, 0.6);
  background: rgba(224, 170, 55, 0.1);
  color: #f0c76d;
}

.rich-text-surface {
  min-height: 220px;
  max-height: 480px;
  overflow-y: auto;
  padding: 0.9rem 1rem;
  color: #eef2fb;
  font-family: var(--font-base);
  font-size: 0.92rem;
  line-height: 1.65;
}

.rich-text-surface:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.015);
}

.rich-text-surface:empty::before {
  content: "Redigez le contenu de l'article...";
  color: #6f7f9f;
}

.rich-text-surface h2 {
  margin: 0.6em 0 0.4em;
  font-size: 1.2rem;
  color: #fff2cf;
}

.rich-text-surface h3 {
  margin: 0.6em 0 0.4em;
  font-size: 1.05rem;
  color: #fff2cf;
}

.rich-text-surface p {
  margin: 0 0 0.7em;
}

.rich-text-surface ul,
.rich-text-surface ol {
  margin: 0 0 0.7em;
  padding-left: 1.4em;
}

.rich-text-surface blockquote {
  margin: 0.6em 0;
  padding: 0.4em 0.9em;
  border-left: 3px solid #e0aa37;
  color: #cdd8ef;
  font-style: italic;
}

.rich-text-surface a {
  color: #7aa5f3;
}

.rich-text-surface img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.6em 0;
  border-radius: 8px;
}

.rt-image-pending {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: rgba(224, 170, 55, 0.16);
  color: #f0c76d;
  font-size: 0.82em;
  font-style: italic;
}