/* ── Frontend : onglets ───────────────────────────────────────────────────── */
.spyrit-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #afafaf;
  margin-bottom: 24px;

  .spyrit-tabs__btn {
    padding: 10px 20px;
    background: none;
    border: 1px solid #6b7280;
    margin-bottom: -1px;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6b7280;
    font-family: inherit;
    border-radius: 0;
    background-color: white;
    &.is-active, &:active {
      border-color: #1091b2;
      background-color: #1091b2;
      color: white;
    }

    &:hover, &:focus, &:focus-visible {
      background-color: #45adcc;
      border-color: #45adcc;
      color: white;
    }
  }
}

.spyrit-tab-panel {
  display: none;
}

.spyrit-tab-panel.is-active {
  display: block;
}

/* ── Éditeur Gutenberg ────────────────────────────────────────────────────── */
.spyrit-tabs-editor {
  border: 2px dashed #c7d2fe;
  border-radius: 6px;
  padding: 12px;
  background: #f8f9ff;
}

.spyrit-tabs-editor__hint {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: #6b7280;
  font-style: italic;
}

.spyrit-tab-editor-panel {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #fff;
}

.spyrit-tab-editor-panel__header {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  padding: 6px 14px;
  border-bottom: 1px solid #e5e7eb;
}

.spyrit-tab-editor-panel__icon {
  color: #9ca3af;
  font-style: normal;
  font-size: 0.875rem;
  flex-shrink: 0;
  pointer-events: none;
}

.spyrit-tab-editor-panel__title-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: #374151 !important;
  outline: none !important;
  font-family: inherit !important;
}

.spyrit-tab-editor-panel__content {
  padding: 16px;
  min-height: 60px;
}