/* ═══════════════════════════════════════════════════
   WRITER LAYOUT — Interface d'écriture deux colonnes
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --writer-sidebar-w: 280px;
  --writer-serif: 'Lora', Georgia, serif;
  --writer-ui: system-ui, -apple-system, sans-serif;
  --writer-sidebar-bg: #f7f6f3;
  --writer-border: #e8e6e1;
  --writer-text: #1a1a1a;
  --writer-muted: #888;
  --writer-accent: var(--color-accent, #ff9114);
}

/* ─── Layout racine ─── */
.writer-layout {
  display: grid;
  grid-template-columns: var(--writer-sidebar-w) 1fr;
  min-height: calc(100vh - 49px);
  width: 100%;
}

/* ═══════════════════════════════════
   SIDEBAR GAUCHE
═══════════════════════════════════ */
.writer-sidebar {
  background: var(--writer-sidebar-bg);
  border-right: 1px solid var(--writer-border);
  padding: 1.75rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 49px;
  height: calc(100vh - 49px);
  overflow-y: auto;
}

/* Retour */
.writer-sidebar__top {
  margin-bottom: 1.75rem;
}

.writer-breadcrumb__link {
  font-size: 0.8rem;
  color: var(--writer-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}

.writer-breadcrumb__link:hover {
  color: var(--writer-text);
}

/* Champs */
.writer-field {
  margin-bottom: 1.5rem;
}

.writer-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--writer-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  font-family: var(--writer-ui);
}

.writer-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--writer-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: var(--writer-ui);
  background: white;
  color: var(--writer-text);
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.writer-input:focus {
  outline: none;
  border-color: #bbb;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

/* Titre — un peu plus grand */
.writer-input--title {
  font-family: var(--writer-serif);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.625rem 0.75rem;
}

.writer-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--writer-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: var(--writer-ui);
  background: white;
  color: var(--writer-text);
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s;
}

.writer-select:focus {
  outline: none;
  border-color: #bbb;
}

/* Image preview */
.writer-image-preview {
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--writer-border);
}

.writer-image-preview img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

/* File input */
.writer-file {
  width: 100%;
  font-size: 0.8rem;
  font-family: var(--writer-ui);
  color: var(--writer-muted);
  cursor: pointer;
}

/* ─── Boutons ─── */
.writer-actions {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--writer-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.writer-actions__secondary {
  display: flex;
  gap: 0.5rem;
}

.writer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--writer-ui);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.writer-btn--save {
  background: var(--writer-text);
  color: white;
  width: 100%;
  padding: 0.6875rem;
  font-size: 0.875rem;
}

.writer-btn--save:hover {
  background: #333;
  color: white;
}

.writer-btn--ghost {
  flex: 1;
  background: transparent;
  color: var(--writer-muted);
  border-color: var(--writer-border);
}

.writer-btn--ghost:hover {
  background: white;
  color: var(--writer-text);
  text-decoration: none;
}

.writer-btn--danger {
  flex: 1;
  background: transparent;
  color: #d00;
  border-color: transparent;
  font-size: 0.75rem;
}

.writer-btn--danger:hover {
  background: #fff0f0;
  text-decoration: none;
}

/* Alerte erreurs */
.writer-alert {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: #b91c1c;
  line-height: 1.6;
}

/* ═══════════════════════════════════
   ÉDITEUR DROIT
═══════════════════════════════════ */
.writer-editor {
  background: white;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 49px);
}

.writer-editor__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 4rem 4rem;
  max-width: 860px;
  width: 100%;
}

/* Toolbar Trix — sobre */
.writer-trix trix-toolbar {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #f0ede8 !important;
  padding: 0 0 0.75rem !important;
  margin-bottom: 1.5rem;
  position: sticky;
  top: 49px;
  z-index: 10;
  background: white !important;
}

/* Contenu Trix */
.writer-trix trix-editor {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--writer-serif);
  font-size: 1.125rem;
  line-height: 1.85;
  color: #222;
  min-height: 60vh;
  caret-color: var(--writer-accent);
}

.writer-trix trix-editor p {
  margin-bottom: 1em;
}

/* ═══════════════════════════════════
   MOBILE
═══════════════════════════════════ */
@media (max-width: 768px) {
  .writer-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .writer-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--writer-border);
    padding: 1.25rem 1rem 1.5rem;
  }

  .writer-actions {
    margin-top: 1.5rem;
  }

  .writer-editor {
    min-height: 60vh;
  }

  .writer-editor__inner {
    padding: 1.5rem 1.25rem 3rem;
  }

  .writer-trix trix-toolbar {
    top: 49px;
  }
}