/* ============================================================
   Scribaya - Thème sombre obligatoire
   Nuances de gris foncé et de noir, texte blanc/gris très clair
   ============================================================ */

:root {
  --ink-900: #0a0a0c;
  --ink-800: #121215;
  --ink-700: #1a1a1f;
  --ink-600: #232329;
  --ink-500: #2e2e36;
  --ink-400: #45454f;
  --ember-400: #dcae7c;
  --ember-500: #c9925a;
  --ember-600: #b57a3f;
}

* { box-sizing: border-box; }

html, body {
  background: var(--ink-900);
  scroll-behavior: smooth;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-800); }
::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ember-600); }

/* Typographie */
.font-display { font-family: 'Cinzel', serif; }

/* Liens de lore dynamiques dans le texte narratif */
.lore-link {
  color: var(--ember-400);
  border-bottom: 1px dashed var(--ember-600);
  cursor: pointer;
  position: relative;
  transition: color .15s ease;
}
.lore-link:hover { color: #f0c896; }

.lore-tooltip {
  position: absolute;
  z-index: 50;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  width: 280px;
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: 13px;
  line-height: 1.5;
  color: #e5e5e5;
}
.lore-tooltip .lore-tooltip-title {
  font-family: 'Cinzel', serif;
  color: var(--ember-400);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

/* Bloc paragraphe narratif avec tag auteur */
.narrative-block {
  border-left: 2px solid var(--ink-500);
  padding-left: 16px;
  margin-bottom: 20px;
  transition: border-color .2s ease;
}
.narrative-block:hover { border-left-color: var(--ember-600); }
.narrative-block.is-premium-author {
  border-left: 2px solid var(--ember-500);
  background: linear-gradient(90deg, rgba(201,146,90,0.05), transparent 40%);
}

/* Carte histoire */
.story-card {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.story-card:hover {
  transform: translateY(-3px);
  border-color: var(--ember-600);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* Sandbox card (validation en attente) */
.sandbox-card {
  background: var(--ink-800);
  border: 1px solid var(--ink-500);
  border-left: 3px solid var(--ember-500);
}

/* Panneaux latéraux amovibles */
.side-panel {
  background: var(--ink-800);
  border-left: 1px solid var(--ink-600);
  transition: transform .25s ease, opacity .2s ease;
}
.side-panel.collapsed {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* Editeur central épuré */
.editor-textarea {
  background: transparent;
  color: #f2f2f2;
  line-height: 1.85;
  font-size: 1.05rem;
}
.editor-textarea:focus { outline: none; }

/* Badges de rôle */
.badge-mj { background: linear-gradient(135deg, var(--ember-600), var(--ember-400)); color: #1a1408; }
.badge-comj { background: var(--ink-500); color: var(--ember-400); border: 1px solid var(--ember-600); }
.badge-premium { background: linear-gradient(135deg, #4a3520, var(--ember-500)); color: #fff3e0; }

/* Animation de notification */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.notif-dot { animation: pulse-dot 1.6s infinite; }

/* Fade-in générique */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .3s ease; }

/* Boutons */
.btn-ember {
  background: linear-gradient(135deg, var(--ember-600), var(--ember-500));
  color: #1a1408;
  font-weight: 600;
  transition: filter .15s ease, transform .1s ease;
}
.btn-ember:hover { filter: brightness(1.1); }
.btn-ember:active { transform: scale(.98); }

.btn-ghost {
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  color: #d4d4d8;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: var(--ink-600); border-color: var(--ink-400); }

/* Contour d'entrée lorebook par catégorie */
.lore-cat-lieu { border-color: #5b8fb0 !important; }
.lore-cat-faction { border-color: #b05b5b !important; }
.lore-cat-chronologie { border-color: #9a7bc9 !important; }
.lore-cat-magie_technologie { border-color: #5bb08f !important; }
.lore-cat-objet { border-color: var(--ember-500) !important; }

/* Décoration Premium (bordures ornées) */
.premium-border {
  border-image: linear-gradient(135deg, var(--ember-600), transparent, var(--ember-400)) 1;
}

/* Utilitaire line-clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}