/**
 * SCRIBONAUTES — Lecteur de chapitre
 * static/css/pages/chapter-reader.css
 *
 * Extrait du <style> inline de chapter_detail.html.
 * Toutes les couleurs hardcodées converties en variables CSS
 * du design system → dark mode natif sans surcharges.
 *
 * Dans chapter_detail.html :
 *   - Supprimer le bloc <style>…</style> dans {% block extra_css %}
 *   - Remplacer par :
 *     <link rel="stylesheet" href="{% static 'css/pages/chapter-reader.css' %}">
 *   - Conserver le lien reader.css existant
 */

/* ============================================================
   VARIABLES LECTEUR
   --reader-bg et --reader-text sont de simples alias vers
   les variables globales du design system. Le dark mode est
   géré uniquement par [data-theme="dark"] sur <html>.
   ============================================================ */
:root {
  --reader-bg:    var(--bg);
  --reader-text:  var(--text);
  --reader-width: 750px;
}

body {
  background: var(--reader-bg);
}

/* Masquer navbar pendant lecture */
body.reading-mode nav.navbar {
  display: none;
}

/* ============================================================
   HEADER LECTURE FIXE
   ============================================================ */
.reading-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  height: 65px;
}

.reading-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Breadcrumb */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.breadcrumb-nav a {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb-nav .sep {
  color: var(--border-strong);
}

/* Toolbar */
.toolbar {
  display: flex;
  gap: 12px;
}

.btn-tool {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--font-ui);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-tool:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.btn-tool.active {
  background: var(--accent);
  color: var(--on-fill);
  border-color: transparent;
}

.btn-tool--edit {
  background: var(--accent);
  color: var(--on-fill);
  border-color: transparent;
}

.btn-tool--edit:hover {
  background: var(--accent-hover);
  color: var(--on-fill);
  border-color: transparent;
}

/* ============================================================
   BARRE DE PROGRESSION
   ============================================================ */
.progress-reading {
  position: fixed;
  top: 65px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--green));
  z-index: 1001;
  transition: width 0.1s linear;
}

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */
.reading-main {
  margin-top: 65px;
  max-width: var(--reader-width);
  margin-left: auto;
  margin-right: auto;
  padding: 80px 40px 120px;
}

/* Bannières d'information (œuvre privée, quête en attente…) en mode lecture :
   la première bannière prend le margin-top du header fixe (65 px) ;
   reading-main n'en a plus besoin car une bannière l'a déjà fourni. */
body.reading-mode .private-work-banner,
body.reading-mode .quest-pending-banner {
  margin-top: 65px;
}
body.reading-mode .private-work-banner + .quest-pending-banner {
  margin-top: 0;
}
body.reading-mode:has(.private-work-banner) .reading-main,
body.reading-mode:has(.quest-pending-banner) .reading-main {
  margin-top: 0;
}

body.wide-mode .reading-main {
  max-width: 900px;
}

/* ============================================================
   EN-TÊTE CHAPITRE
   ============================================================ */
.ch-header {
  text-align: center;
  margin-bottom: 60px;
}

.ch-number {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.ch-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 24px;
  line-height: 1.2;
  color: var(--reader-text);
}

.ch-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.ch-header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.ch-jump-to-comments {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  transition: color 0.2s, border-color 0.2s;
}

.ch-jump-to-comments:hover {
  color: var(--accent);
  border-color: var(--accent-mid);
}

.ch-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, var(--accent), var(--green));
  margin: 40px auto;
  border-radius: 4px;
}

/* ============================================================
   CONTENU
   ============================================================ */
.ch-content {
  font-size: 1.125rem;
  line-height: var(--reader-line-height, 1.85);
  letter-spacing: var(--reader-letter-spacing, 0);
  font-family: Georgia, serif;
  color: var(--reader-text);
  /* Filet : un « mot » plus large que la colonne (URL, ou paragraphe collé
     dont toutes les espaces sont insécables) est coupé au bord au lieu de
     déborder. Sans effet sur un texte qui passe déjà à la ligne. */
  overflow-wrap: break-word;
}

.ch-content p {
  /* --reader-para-spacing est un facteur : à 1,0 on retrouve les 0,75em
     historiques, au-delà l'écart grandit d'autant d'em, et le plancher évite
     une marge négative quand le lecteur descend sous le repère. */
  margin-bottom: max(0em, calc(0.75em + (var(--reader-para-spacing, 1) - 1) * 1em));
  text-align: justify;
  line-height: var(--reader-line-height, 1.85);  /* bat design-system p { line-height: 1.7 } */
  color: inherit;   /* hérite de .ch-content → var(--reader-text), écrase design-system p { color: var(--text-mid) } */
}


/* Justifié : même comportement que gauche, déjà couvert par la règle de base */

/* ============================================================
   NAVIGATION BAS DE PAGE
   ============================================================ */
.ch-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 80px;
  padding-top: 60px;
  border-top: 2px solid var(--border);
}

.nav-card {
  padding: 28px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--reader-text);
  transition: all 0.3s;
}

.nav-card:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  color: var(--reader-text);
}

.nav-card.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.nav-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.nav-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--reader-text);
}

.ch-nav--after-comments {
  max-width: 860px;
  margin: 0 auto 60px;
  padding-top: 40px;
  border-top: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.ch-nav--inner {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ch-back-to-top {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  padding: 6px 18px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.ch-back-to-top:hover {
  color: var(--accent);
  border-color: var(--accent-mid);
  background: var(--accent-light);
}

/* ============================================================
   SIDEBAR ANNOTATIONS
   ============================================================ */
.sidebar-annotations {
  position: fixed;
  right: 0;
  top: 65px;
  width: 380px;
  height: calc(100vh - 65px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.4s;
  z-index: 999;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
}

.sidebar-annotations.show {
  transform: translateX(0);
}

.sidebar-head {
  padding: 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
}

.btn-close-sidebar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-alt);
  border: none;
  cursor: pointer;
  color: var(--text-mid);
  font-size: 1rem;
  transition: background var(--trans-fast);
}

.btn-close-sidebar:hover {
  background: var(--border);
}

.sidebar-body {
  padding: 24px;
  overflow-y: auto;
  height: calc(100% - 77px);
}

.annotation-item {
  padding: 20px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 16px;
  border-left: 4px solid var(--accent);
}

.annotation-quote {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: 8px;
  line-height: 1.6;
}

.annotation-text {
  color: var(--reader-text);
  font-size: 0.95rem;
  margin-bottom: 12px;
  line-height: 1.6;
}

.annotation-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.annotation-author {
  font-weight: 600;
}

/* ============================================================
   OVERLAY
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.overlay.show {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   PANEL PARAMÈTRES
   ============================================================ */
.settings-panel {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-xl);
  min-width: 280px;
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 1002;
}

.settings-panel.show {
  transform: scale(1);
  opacity: 1;
  pointer-events: all;
}

.setting-group {
  margin-bottom: 20px;
}

.setting-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.options-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.opt-btn {
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-mid);
  cursor: pointer;
  text-align: center;
  font-size: 0.875rem;
  font-family: var(--font-ui);
  transition: all 0.2s;
}

.opt-btn:hover {
  border-color: var(--accent-mid);
  color: var(--accent);
}

.opt-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-fill);
}

/* ============================================================
   THÈMES — surcharges spécifiques au lecteur
   ============================================================ */
[data-theme="dark"] .reading-header,
[data-theme="dark"] .sidebar-annotations,
[data-theme="dark"] .settings-panel,
[data-theme="dark"] .nav-card {
  background: var(--surface);
  border-color: var(--border);
}

/* ============================================================
   COMMENTAIRES
   ============================================================ */
.comments-zone {
  max-width: var(--reader-width);
  margin: 80px auto 0;
  padding: 0 40px 60px;
}

.comments-toggle-wrap {
  text-align: center;
  margin-bottom: 40px;
}

.btn-toggle-comments {
  padding: 16px 36px;
  border: 2px solid var(--border);
  border-radius: 30px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-toggle-comments:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.comments-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s;
}

.comments-content.show {
  max-height: 10000px;
}

/* ============================================================
   SURLIGNAGES ANNOTATIONS
   ============================================================ */
.annotation-highlight {
  background: linear-gradient(120deg,
    rgba(92, 74, 58, 0.12) 0%,
    rgba(61, 107, 94, 0.12) 100%);
  border-bottom: 2px solid var(--accent);
  cursor: pointer;
  padding: 2px 0;
  transition: all 0.2s;
}

.annotation-highlight:hover {
  background: linear-gradient(120deg,
    rgba(92, 74, 58, 0.22) 0%,
    rgba(61, 107, 94, 0.22) 100%);
  border-bottom-width: 3px;
}

/* Annotations par type */
mark.annot-hl {
  background: rgba(92, 74, 58, 0.15);
  border-bottom: 2px solid var(--accent);
  cursor: pointer;
  padding: 2px 0;
  border-radius: 2px;
  transition: background 0.2s;
}

mark.annot-hl:hover          { background: rgba(92, 74, 58, 0.28); }
mark.annot-hl--suggestion    { background: rgba(61, 107, 94, 0.15); border-color: var(--green); }
mark.annot-hl--correction    { background: rgba(192, 57, 43, 0.12); border-color: var(--danger); }
mark.annot-hl--question      { background: rgba(214, 137, 16, 0.15); border-color: var(--warning); }
mark.annot-hl--praise        { background: rgba(46, 125, 82, 0.15);  border-color: var(--success); }
mark.annot-hl--note          { background: rgba(92, 74, 58, 0.12);  border-color: var(--accent-mid); }
mark.annot-hl--approx        { border-bottom-style: dashed; }

/* Annotations superposées : bordure plus épaisse + compteur */
mark.annot-hl--depth-2 { border-bottom-width: 3px; }
mark.annot-hl--depth-3,
mark.annot-hl--depth-4 { border-bottom-width: 4px; }


/* Hover sur segments superposés : intensifier le dégradé inline */
mark.annot-hl--depth-2:hover,
mark.annot-hl--depth-3:hover,
mark.annot-hl--depth-4:hover {
  filter: brightness(0.62) saturate(2.2);
}


/* ── Picker multi-annotations ───────────────────────────────────────────── */
.annot-picker {
  position: absolute;
  z-index: 1090;
  background: var(--bg-card, #fff);
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  min-width: 210px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.annot-picker.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.annot-picker__header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
  padding: 4px 8px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 4px;
}
.annot-picker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 0.12s;
}
.annot-picker__item:hover { background: rgba(0, 0, 0, 0.05); }
.annot-picker__icon { font-size: 1rem; flex-shrink: 0; }
.annot-picker__type { font-weight: 600; }
.annot-picker__author { color: var(--text-muted, #888); font-size: 0.82rem; }

.annot-picker__item--suggestion .annot-picker__type { color: var(--green); }
.annot-picker__item--correction  .annot-picker__type { color: var(--danger); }
.annot-picker__item--question    .annot-picker__type { color: var(--warning); }
.annot-picker__item--praise      .annot-picker__type { color: var(--success); }
.annot-picker__item--note        .annot-picker__type { color: var(--accent-mid); }

[data-theme="dark"] .annot-picker {
  background: var(--bg-card, #2a2420);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .annot-picker__item:hover { background: rgba(255, 255, 255, 0.07); }

/* ── Nav annotations dans le modal ─────────────────────────────────────── */
.annot-nav-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}
.annot-nav-label {
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.annotations-hidden mark.annot-hl {
  background: transparent !important;
  border-bottom: none !important;
  color: inherit !important;
  cursor: text;
}

/* ============================================================
   VOTES ANNOTATION
   ============================================================ */
.ann-vote-group {
  display: flex;
  gap: 4px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

.ann-vote-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}

.ann-vote-pill:hover:not(:disabled) {
  background: var(--bg-alt);
}

.ann-vote-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#modal-vote-up.btn-success {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success);
}

#modal-vote-down.btn-danger {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

/* Tooltip votes */
.ann-vote-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
  min-width: 140px;
  box-shadow: var(--shadow-sm);
}

.ann-vote-group:hover .ann-vote-tooltip {
  opacity: 1;
}

.ann-vt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.ann-vt-row:last-child { margin-bottom: 0; }

.ann-vt-label {
  width: 44px;
  color: var(--text-muted);
}

.ann-vt-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.ann-vt-bar-up {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width 0.3s;
}

.ann-vt-bar-down {
  height: 100%;
  background: var(--danger);
  border-radius: 2px;
  transition: width 0.3s;
}

.ann-vt-pct {
  width: 28px;
  text-align: right;
  color: var(--text-muted);
}

/* ============================================================
   FORMULAIRE D'ANNOTATION (modale dynamique)
   ============================================================ */
.annot-form-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.annot-form-content {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.annot-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.annot-form-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.annot-form-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-alt);
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background var(--trans-fast);
}

.annot-form-close:hover {
  background: var(--border);
}

.annot-form-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.annot-selected-preview {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 16px;
}

.annot-preview-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 6px;
}

.annot-preview-text {
  margin: 0;
  font-style: italic;
  color: var(--reader-text);
  font-size: 0.95rem;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}

.annot-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.annot-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.annot-select,
.annot-textarea {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--reader-text);
  background: var(--bg);
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.annot-select:focus,
.annot-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.annot-textarea {
  resize: vertical;
  min-height: 100px;
}

.annot-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* ============================================================
   BOUTON TOGGLE ANNOTATIONS
   ============================================================ */
.btn-annot-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-ui);
  color: var(--text);
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.bat-track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--accent);
  transition: background 0.2s;
  flex-shrink: 0;
}

.bat-thumb {
  position: absolute;
  top: 3px;
  left: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.btn-annot-toggle.annotations-off {
  color: var(--text-muted);
}

.btn-annot-toggle.annotations-off .bat-track {
  background: var(--border-strong);
}

.btn-annot-toggle.annotations-off .bat-thumb {
  left: 3px;
}

/* ============================================================
   ICÔNES RESTRICTION (breadcrumb)
   ============================================================ */
.crumb-restriction {
  font-size: 0.8rem;
  opacity: 0.75;
  cursor: default;
}

/* ============================================================
   ANNOTATION CARD (liste sidebar)
   ============================================================ */
.annotation-card {
  padding: 20px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 16px;
  border-left: 4px solid var(--accent);
  transition: all 0.2s;
  cursor: pointer;
}

.annotation-card:hover {
  transform: translateX(-4px);
  background: var(--accent-light);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .breadcrumb-nav { display: none; }
  .reading-main   { padding: 50px 24px 80px; }
  .ch-title       { font-size: 1.75rem; }
  .ch-content     { font-size: 1.0625rem; }
  .ch-nav         { grid-template-columns: 1fr; }
  .sidebar-annotations { width: 100%; }
  .btn-tool span  { display: none; }
}

/* ============================================================
   DARK MODE — Surlignages annotations
   ============================================================ */

[data-theme="dark"] mark.annot-hl,
[data-theme="dark"] mark.annot-hl {
  background: rgba(201, 168, 130, 0.22);
  border-bottom-color: var(--accent);
}

[data-theme="dark"] mark.annot-hl:hover,
[data-theme="dark"] mark.annot-hl:hover {
  background: rgba(201, 168, 130, 0.38);
}

[data-theme="dark"] mark.annot-hl--suggestion,
[data-theme="dark"] mark.annot-hl--suggestion {
  background: rgba(106, 173, 152, 0.22);
  border-color: var(--green);
}

[data-theme="dark"] mark.annot-hl--correction,
[data-theme="dark"] mark.annot-hl--correction {
  background: rgba(224, 92, 75, 0.22);
  border-color: var(--danger);
}

[data-theme="dark"] mark.annot-hl--question,
[data-theme="dark"] mark.annot-hl--question {
  background: rgba(224, 160, 48, 0.22);
  border-color: var(--warning);
}

[data-theme="dark"] mark.annot-hl--praise,
[data-theme="dark"] mark.annot-hl--praise {
  background: rgba(76, 173, 120, 0.22);
  border-color: var(--success);
}

[data-theme="dark"] mark.annot-hl--note,
[data-theme="dark"] mark.annot-hl--note {
  background: rgba(201, 168, 130, 0.18);
  border-color: var(--accent-mid);
}

[data-theme="dark"] .annotation-highlight,
[data-theme="dark"] .annotation-highlight {
  background: rgba(201, 168, 130, 0.20);
  border-bottom-color: var(--accent);
}

[data-theme="dark"] .annotation-highlight:hover,
[data-theme="dark"] .annotation-highlight:hover {
  background: rgba(201, 168, 130, 0.35);
}
/* ============================================================
   SURCHARGE QUILL — forcer la couleur du lecteur
   sur tous les éléments enfants de .ch-content.

   Quill injecte :
   - style="color: rgb(...)" inline sur les <span> → spécificité absolue
   - classes .ql-align-*, .ql-indent-* sur les <p>
   - classes .ql-font-* sur les <span>

   On force color: inherit en cascade depuis .ch-content
   avec une spécificité suffisante pour battre les classes Quill,
   et on utilise une règle avec attribut [style] pour battre
   les styles inline (seul moyen sans JS).
   ============================================================ */

/* Tous les descendants directs et indirects héritent la couleur */
.ch-content *,
.ch-content p,
.ch-content span,
.ch-content strong,
.ch-content em,
.ch-content u,
.ch-content s,
.ch-content h1,
.ch-content h2,
.ch-content h3 {
  color: inherit;
}

/* Citations (blockquote + p.bq-source) : voir css/components/quote.css,
   partagé avec l'éditeur et le lecteur immersif. */

/* Les classes Quill d'alignement ne touchent pas la couleur
   mais on force inherit pour tout ce qui pourrait hériter
   d'une couleur d'une règle tierce */
.ch-content .ql-align-center,
.ch-content .ql-align-right,
.ch-content .ql-align-justify,
.ch-content [class^="ql-"] {
  color: inherit;
}

/* Styles inline Quill (color / background-color) — seul moyen CSS de
   les écraser est une règle avec sélecteur d'attribut [style].
   Les <mark class="annot-hl"> ne sont pas touchés : pour depth=1 ils
   n'ont pas de style inline, pour depth>1 ils utilisent background:
   (shorthand avec gradient) qui ne contient pas la sous-chaîne "color". */
.ch-content [style*="color"] {
  color: inherit !important;
  background-color: transparent !important;
}

/* Idem pour les tailles de police inline si nécessaire */
/* .ch-content span[style*="font-size"] { font-size: inherit !important; } */

/* ============================================================
   LIENS DANS LE TEXTE

   OBLIGATOIREMENT après la surcharge Quill ci-dessus : `.ch-content *`
   force color: inherit et `a { text-decoration: none }` du design system
   supprime le souligné → sans cette règle un lien est strictement
   indiscernable du texte courant.

   Le second sélecteur ([style*="color"]) est là pour battre le
   `color: inherit !important` de la règle précédente lorsque Quill a
   posé une couleur inline sur le lien : à !important égal, c'est la
   spécificité qui tranche (0,2,1 > 0,2,0).

   Le sanitizer ne conserve que href et target sur les <a>
   (apps/core/sanitizers.py) : aucune classe n'est disponible, le
   ciblage se fait donc sur la balise.
   ============================================================ */
.ch-content a,
.ch-content a[style*="color"] {
  color: var(--green) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--green) 55%, transparent);
  border-radius: 3px;
  transition: color var(--trans-fast),
              text-decoration-color var(--trans-fast),
              background var(--trans-fast);
}

.ch-content a:hover,
.ch-content a:focus-visible,
.ch-content a[style*="color"]:hover,
.ch-content a[style*="color"]:focus-visible {
  color: var(--green-hover) !important;
  text-decoration-color: var(--green-hover);
  background: var(--green-light) !important;   /* bat background-color: transparent !important */
}

.ch-content a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── Flash highlight après navigation depuis une notification mention ── */
@keyframes mention-highlight-fade {
  0%   { box-shadow: 0 0 0 3px var(--accent,.5); background: color-mix(in srgb, var(--accent) 15%, transparent); }
  100% { box-shadow: none; background: transparent; }
}
.annotation--highlight,
.comment--highlight {
  border-radius: 4px;
  animation: mention-highlight-fade 2.5s ease forwards;
}
/* ═══════════════════════════════════════════════════════════════
   ENCART DÉFI — affiché quand le chapitre est soumis à un défi
   ═══════════════════════════════════════════════════════════════ */
.ch-challenge-encart {
  max-width: 680px;
  margin: 2rem auto 0;
  padding: 0 1.5rem;
}
.ch-challenge-encart__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--bg-card, #fff));
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 25%, transparent);
  border-radius: 12px;
  font-family: var(--font-ui, system-ui, sans-serif);
}
.ch-challenge-encart__badge {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.ch-challenge-encart__body {
  flex: 1;
  min-width: 0;
}
.ch-challenge-encart__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent, #6366f1);
  margin-bottom: 2px;
}
.ch-challenge-encart__title {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text, #111);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-challenge-encart__title:hover { text-decoration: underline; }
.ch-challenge-encart__meta {
  font-size: .78rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}
.ch-challenge-encart__vote-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--accent, #6366f1);
  color: var(--on-fill);
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 600;
  font-family: var(--font-ui, system-ui, sans-serif);
  text-decoration: none;
  transition: opacity .15s;
}
.ch-challenge-encart__vote-btn:hover { opacity: .85; color: #fff; }

/* Thème sombre */
[data-theme="dark"] .ch-challenge-encart__title { color: var(--text, #f0f0f0); }
[data-theme="dark"] .ch-challenge-encart__inner {
  background: color-mix(in srgb, var(--accent, #818cf8) 12%, var(--bg-card, #1e1e2e));
  border-color: color-mix(in srgb, var(--accent, #818cf8) 30%, transparent);
}

/* ============================================================
   PANEL DE VOTE DÉFI — bas de page lecteur
   ============================================================ */
.ch-vote-panel {
  max-width: var(--reader-width, 750px);
  margin: 2.5rem auto 0;
  padding: 0 1rem 2rem;
}

.ch-vote-panel__inner {
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 25%, var(--border));
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}

.ch-vote-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ch-vote-panel__challenge-link {
  font-weight: 700;
  color: var(--accent, #6366f1);
  text-decoration: none;
  font-size: 0.95rem;
}
.ch-vote-panel__challenge-link:hover { text-decoration: underline; }

.ch-vote-panel__status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
}

.ch-vote-panel__intro {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.ch-vote-panel__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.ch-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ch-vote-btn:hover:not(:disabled) {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
}
.ch-vote-btn--active {
  border-color: var(--accent, #6366f1);
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, var(--surface));
  color: var(--accent, #6366f1);
}
.ch-vote-btn--success.ch-vote-btn--active {
  border-color: var(--success, #2e7d52);
  background: color-mix(in srgb, var(--success, #2e7d52) 12%, var(--surface));
  color: var(--success, #2e7d52);
}
.ch-vote-btn--failure.ch-vote-btn--active {
  border-color: var(--danger, #c0392b);
  background: color-mix(in srgb, var(--danger, #c0392b) 12%, var(--surface));
  color: var(--danger, #c0392b);
}
.ch-vote-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ch-vote-panel__note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: auto;
}

.ch-vote-panel__current {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  margin-bottom: 0;
}

/* Thème sombre */
[data-theme="dark"] .ch-vote-panel__inner {
  background: color-mix(in srgb, var(--accent, #818cf8) 10%, var(--bg-card, #1e1e2e));
  border-color: color-mix(in srgb, var(--accent, #818cf8) 28%, transparent);
}
[data-theme="dark"] .ch-vote-btn {
  background: var(--bg-card, #1e1e2e);
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .ch-vote-panel { padding: 0 0.5rem 1.5rem; }
  .ch-vote-panel__inner { padding: 1rem; }
  .ch-vote-btn { width: 100%; justify-content: center; }
  .ch-vote-panel__note { margin-left: 0; }
}

/* ── Bandeau quête non finalisée (auteur) ── */
.quest-pending-banner {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  border-bottom: 2px solid #f97316;
  padding: 10px 0;
}
.quest-pending-banner__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-ui, sans-serif);
  font-size: .88rem;
  color: #7c2d12;
}
.quest-pending-banner__btn {
  display: inline-block;
  padding: 4px 14px;
  background: #f97316;
  color: #fff;
  border-radius: 20px;
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.quest-pending-banner__btn:hover { background: #ea6c00; color: #fff; }
.quest-pending-banner__closed { font-style: italic; color: #9a3412; }