/* ========== LECTEUR DE CHAPITRES ========== */

.reader-container {
    min-height: 100vh;
}

/* En-tête sticky */
.reader-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Contenu */
.reader-content {
    padding: 40px 0;
}

.chapter-content {
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Georgia', serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.chapter-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.chapter-meta {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.chapter-body {
    margin-top: 30px;
}

.chapter-body p {
    margin-bottom: 1.5em;
    text-align: justify;
}

/* Navigation entre chapitres */
.chapter-navigation {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
}

/* ========== ANNOTATIONS ========== */

/* Texte surligné avec annotation */
.annotated-text {
    background-color: #fff3cd;
    border-bottom: 2px solid #ffc107;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    padding: 2px 0;
}

.annotated-text:hover {
    background-color: #ffe69c;
    border-bottom-color: #ffb300;
}

.annotated-text.active {
    background-color: #ffc107;
}

/* Types d'annotations avec couleurs différentes */
.annotated-text[data-type="suggestion"] {
    background-color: #d1ecf1;
    border-bottom-color: #17a2b8;
}

.annotated-text[data-type="correction"] {
    background-color: #f8d7da;
    border-bottom-color: #dc3545;
}

.annotated-text[data-type="question"] {
    background-color: #e2e3e5;
    border-bottom-color: #6c757d;
}

.annotated-text[data-type="praise"] {
    background-color: #d4edda;
    border-bottom-color: #28a745;
}

/* Sélection de texte */
::selection {
    background: #ffc107;
    color: #000;
}

/* Sidebar annotations */
.annotations-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

.annotation-item {
    background: #fff;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.annotation-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateX(5px);
}

.annotation-item.active {
    border-left-color: #0d6efd;
    box-shadow: 0 2px 12px rgba(13,110,253,0.3);
}

.annotation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.annotation-type {
    font-size: 0.85rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: #e9ecef;
}

.annotation-type.suggestion {
    background: #d1ecf1;
    color: #0c5460;
}

.annotation-type.correction {
    background: #f8d7da;
    color: #721c24;
}

.annotation-type.question {
    background: #e2e3e5;
    color: #383d41;
}

.annotation-type.praise {
    background: #d4edda;
    color: #155724;
}

.annotation-quote {
    background: #f8f9fa;
    border-left: 3px solid #dee2e6;
    padding: 10px;
    margin: 10px 0;
    font-size: 0.9rem;
    font-style: italic;
    color: #6c757d;
}

.annotation-content {
    margin: 10px 0;
    font-size: 0.95rem;
}

.annotation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #6c757d;
}

.annotation-actions {
    display: flex;
    gap: 10px;
}

.annotation-actions button {
    padding: 4px 10px;
    font-size: 0.8rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.annotation-actions button:hover {
    background: #e9ecef;
}

/* ========== COMMENTAIRES ========== */

.comments-section {
    border-top: 2px solid #dee2e6;
    padding-top: 30px;
}

.comment-form textarea {
    resize: vertical;
}

.comment-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.comment-header {
    margin-bottom: 10px;
}

.comment-body {
    margin: 10px 0;
    line-height: 1.6;
}

.comment-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.comment-actions .btn-link {
    padding: 0;
    text-decoration: none;
    color: #6c757d;
    font-size: 0.9rem;
}

.comment-actions .btn-link:hover {
    color: #0d6efd;
}

/* ========== THÈMES ========== */

/* Thème sépia */
body.theme-sepia .reader-header,
body.theme-sepia .chapter-content {
    background-color: #f4ecd8;
    color: #5c4a3a;
}

body.theme-sepia .annotated-text {
    background-color: #ede4d2;
}

body.theme-sepia .annotations-panel {
    background-color: #f4ecd8;
}

/* Thème sombre */
body.theme-dark {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.theme-dark .reader-header {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
}

body.theme-dark .chapter-content {
    color: #e0e0e0;
}

body.theme-dark .annotated-text {
    background-color: #3d3520;
    border-bottom-color: #ffc107;
}

body.theme-dark .annotations-panel {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.theme-dark .annotation-item {
    background-color: #3d3d3d;
    color: #e0e0e0;
}

body.theme-dark .comment-item {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 992px) {
    #annotations-sidebar {
        display: none;
    }
    
    #annotations-sidebar.show {
        display: block;
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        width: 350px;
        background: #fff;
        z-index: 1000;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
}

/* ========== ANIMATIONS ========== */

@keyframes highlight {
    0% { background-color: #ffc107; }
    100% { background-color: #fff3cd; }
}

.annotated-text.just-added {
    animation: highlight 1s ease-in-out;
}

/* ========== IMPRESSION ========== */

@media print {
    .reader-header,
    .chapter-navigation,
    .comments-section,
    #annotations-sidebar {
        display: none !important;
    }
    
    .chapter-content {
        max-width: 100%;
    }
    
    .annotated-text {
        background: none !important;
        border: none !important;
    }
}


/* ── Bouton bascule "marquer comme lu" ─────────────────────────── */
.read-toggle-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px 20px;
}

.read-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 2px solid var(--accent, #667eea);
  background: transparent;
  color: var(--accent, #667eea);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.read-toggle-btn:hover:not(:disabled) {
  background: var(--accent, #667eea);
  color: #fff;
}

.read-toggle-btn.is-read {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
}

.read-toggle-btn.is-read:hover:not(:disabled) {
  background: #fde8e8;
  border-color: #ef4444;
  color: #991b1b;
}

.read-toggle-btn.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.read-toggle-hint {
  font-size: 0.82rem;
  color: var(--text-muted, #6c757d);
  font-style: italic;
  margin: 0;
}

/* ── Styles Quill pour le rendu en lecture ── */

/* Alignement */
.ch-content .ql-align-right   { text-align: right !important; }
.ch-content .ql-align-center  { text-align: center !important; }
.ch-content .ql-align-justify { text-align: justify !important; }
/* (left est déjà le défaut) */

/* Indentation */
.ch-content .ql-indent-1 { padding-left: 3em; }
.ch-content .ql-indent-2 { padding-left: 6em; }
.ch-content .ql-indent-3 { padding-left: 9em; }
.ch-content .ql-indent-4 { padding-left: 12em; }
.ch-content .ql-indent-5 { padding-left: 15em; }

/* Polices */
.ch-content .ql-font-serif        { font-family: Georgia, 'Times New Roman', serif; }
.ch-content .ql-font-sans-serif   { font-family: system-ui, -apple-system, sans-serif; }
.ch-content .ql-font-playfair     { font-family: 'Playfair Display', serif; }
.ch-content .ql-font-lora         { font-family: 'Lora', serif; }
.ch-content .ql-font-merriweather { font-family: 'Merriweather', serif; }
.ch-content .ql-font-crimson      { font-family: 'Crimson Text', serif; }
.ch-content .ql-font-cormorant    { font-family: 'Cormorant Garamond', serif; }
.ch-content .ql-font-raleway      { font-family: 'Raleway', sans-serif; }
.ch-content .ql-font-courier      { font-family: 'Courier New', Courier, monospace; }

/* Listes Quill */
.ch-content ol.ql-list            { list-style-type: decimal; padding-left: 1.5em; }
.ch-content ul.ql-list            { list-style-type: disc; padding-left: 1.5em; }


/* ============================================================
   DARK MODE — reader.css
   À ajouter à la FIN de static/css/reader.css

   reader.css contient des couleurs hardcodées (#333, #fff,
   #dee2e6, etc.) qui écrasent les variables du design system.
   ============================================================ */

/* ── Éléments de base ────────────────────────────────────── */
[data-theme="dark"] .reader-header {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .chapter-content {
  color: var(--reader-text, var(--text)) !important;
}

[data-theme="dark"] .chapter-meta {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .chapter-navigation {
  border-top-color: var(--border) !important;
}

/* ── Annotations (annotated-text) ────────────────────────── */
[data-theme="dark"] .annotated-text {
  background-color: rgba(255, 193, 7, 0.15) !important;
  border-bottom-color: #ffc107 !important;
}

[data-theme="dark"] .annotated-text:hover {
  background-color: rgba(255, 193, 7, 0.28) !important;
}

[data-theme="dark"] .annotated-text[data-type="suggestion"] {
  background-color: rgba(61, 107, 94, 0.20) !important;
  border-bottom-color: var(--green) !important;
}

[data-theme="dark"] .annotated-text[data-type="correction"] {
  background-color: rgba(224, 92, 75, 0.18) !important;
  border-bottom-color: var(--danger) !important;
}

[data-theme="dark"] .annotated-text[data-type="question"] {
  background-color: rgba(148, 163, 184, 0.15) !important;
  border-bottom-color: var(--text-muted) !important;
}

[data-theme="dark"] .annotated-text[data-type="praise"] {
  background-color: rgba(76, 173, 120, 0.18) !important;
  border-bottom-color: var(--success) !important;
}

/* ── Sidebar annotations ─────────────────────────────────── */
[data-theme="dark"] .annotations-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .annotation-item {
  background: var(--bg-alt) !important;
  color: var(--text) !important;
  border-left-color: var(--accent) !important;
}

[data-theme="dark"] .annotation-quote {
  background: var(--surface) !important;
  border-left-color: var(--border) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .annotation-meta {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .annotation-type {
  background: var(--bg-alt) !important;
  color: var(--text-mid) !important;
}

[data-theme="dark"] .annotation-type.suggestion {
  background: rgba(61, 107, 94, 0.20) !important;
  color: var(--green) !important;
}

[data-theme="dark"] .annotation-type.correction {
  background: rgba(224, 92, 75, 0.15) !important;
  color: var(--danger) !important;
}

[data-theme="dark"] .annotation-type.praise {
  background: rgba(76, 173, 120, 0.15) !important;
  color: var(--success) !important;
}

/* ── Commentaires ────────────────────────────────────────── */
[data-theme="dark"] .comments-section {
  border-top-color: var(--border) !important;
}

[data-theme="dark"] .comment-item {
  background: var(--surface) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .comment-actions .btn-link {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .comment-actions .btn-link:hover {
  color: var(--accent) !important;
}

/* ── Bouton marquer comme lu ─────────────────────────────── */
[data-theme="dark"] .read-toggle-btn.is-read {
  background: rgba(76, 173, 120, 0.15) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
}

[data-theme="dark"] .read-toggle-btn.is-read:hover:not(:disabled) {
  background: rgba(224, 92, 75, 0.15) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* ── Sidebar mobile (#annotations-sidebar) ───────────────── */
[data-theme="dark"] #annotations-sidebar.show {
  background: var(--surface) !important;
}