/* ============================================================
   READER.CSS - STYLES ORGANISÉS PAR MODULES
   ============================================================ */

/* ============================================================
   MODULE 1: RESET & BASE
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background: #0d0d0f;
    color: #e2e8f0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

::selection {
    background: rgba(201, 169, 110, 0.3);
    color: white;
}

/* ============================================================
   MODULE 2: TOP BAR & NAVIGATION
   ============================================================ */
.top-bar {
    background: rgba(13, 13, 15, 0.95);
    backdrop-filter: blur(20px);
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    z-index: 50;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo i {
    background: linear-gradient(135deg, #c9a96e 0%, #b8954a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2rem;
}

.logo span {
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.nav-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.75rem;
    transition: 0.3s ease;
}

.nav-links a:hover {
    color: #c9a96e;
}

.btn-logout {
    background: rgba(201, 169, 110, 0.15);
    border: 1px solid rgba(201, 169, 110, 0.3);
    padding: 5px 16px;
    border-radius: 30px;
    color: #c9a96e;
    text-decoration: none;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: rgba(201, 169, 110, 0.25);
    border-color: #c9a96e;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 14px;
    background: rgba(201, 169, 110, 0.05);
    border-radius: 30px;
    border: 1px solid rgba(201, 169, 110, 0.08);
}

.progress-label {
    font-size: 0.55rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-track {
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #c9a96e, #e8d5a3);
    border-radius: 4px;
    transition: width 0.8s ease;
}

.progress-text {
    font-size: 0.6rem;
    color: #c9a96e;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

/* ============================================================
   MODULE 4: READER LAYOUT
   ============================================================ */
.reader-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ============================================================
   MODULE 5: NOTES SIDEBAR
   ============================================================ */
.notes-sidebar {
    width: 340px;
    background: rgba(13, 13, 15, 0.98);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.notes-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.sidebar-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.sidebar-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-title {
    font-size: 0.55rem;
    font-weight: 700;
    color: #c9a96e;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.sidebar-title .title-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-title .notes-count {
    background: rgba(201, 169, 110, 0.15);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.55rem;
}

.sidebar-hamburger {
    display: flex !important;  /* ✅ Toujours visible */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 32px;
    height: 32px;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.sidebar-hamburger:hover {
    background: rgba(201, 169, 110, 0.08);
    border-color: rgba(201, 169, 110, 0.2);
}

.sidebar-hamburger .bar {
    display: block;
    width: 16px;
    height: 2px;
    background: #94a3b8;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.sidebar-hamburger .bar:nth-child(1) {
    transform-origin: 0% 0%;
}

.sidebar-hamburger .bar:nth-child(3) {
    transform-origin: 0% 100%;
}

.sidebar-hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(2px, -1px);
    background: #c9a96e;
}

.sidebar-hamburger.active .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.sidebar-hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 1px);
    background: #c9a96e;
}

/* ============================================================
   ✅ FLOATING HAMBURGER - CORRECTION INSTANTANÉE
   ============================================================ */
   
 .sidebar-toggle {
    background: transparent;
    border: none;
    color: #D9D7D7;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.sidebar-toggle:hover {
    background: rgba(217,215,215,0.12);
    border-radius: 8px;
}

.sidebar-toggle svg {
    display: block;
}

.floating-hamburger {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    z-index: 55;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 40px;
    height: 40px;
    padding: 8px 6px;
    background: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* ✅ Visible uniquement quand le sidebar est fermé */
.floating-hamburger.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* ✅ Caché quand le sidebar est ouvert */
.floating-hamburger:not(.visible) {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-50%) scale(0.8);
}

.floating-hamburger:hover {
    background: rgba(30, 30, 35, 0.95);
    border-color: rgba(201, 169, 110, 0.3);
    transform: translateY(-50%) scale(1.05);
}

.floating-hamburger .bar {
    display: block;
    width: 18px;
    height: 2px;
    background: #94a3b8;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.floating-hamburger .bar:nth-child(1) {
    transform-origin: 0% 0%;
}

.floating-hamburger .bar:nth-child(3) {
    transform-origin: 0% 100%;
}

.floating-hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(2px, -1px);
    background: #c9a96e;
}

.floating-hamburger.active .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.floating-hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 1px);
    background: #c9a96e;
}

.floating-hamburger .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, #c9a96e 0%, #b8954a 100%);
    color: #0d0d0f;
    font-size: 0.5rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.5);
    border: 2px solid #0d0d0f;
}

.floating-hamburger .badge.visible {
    opacity: 1;
    transform: scale(1);
}


.search-container {
    display: flex;
    gap: 6px;
    align-items: center;
}

.search-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: white;
    font-size: 0.7rem;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.search-input:focus {
    outline: none;
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.search-input::placeholder {
    color: #64748b;
}

.search-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-clear {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: none;
}

.search-clear.visible {
    display: block;
}

.search-clear:hover {
    color: #e8d5a3;
    background: rgba(255, 255, 255, 0.05);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    min-height: 0;
}

.notes-list::-webkit-scrollbar {
    width: 3px;
}

.notes-list::-webkit-scrollbar-track {
    background: transparent;
}

.notes-list::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 110, 0.3);
    border-radius: 3px;
}

.note-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.note-item:hover {
    border-color: rgba(201, 169, 110, 0.3);
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.06);
    border-left-color: #c9a96e;
}

.note-item.highlight-match {
    border-left-color: #c9a96e !important;
    background: rgba(201, 169, 110, 0.08) !important;
    animation: matchPulse 0.6s ease;
}

@keyframes matchPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
        background: rgba(201, 169, 110, 0.15);
    }
    100% {
        transform: scale(1);
    }
}

.note-item .note-passage {
    font-size: 0.6rem;
    color: #c9a96e;
    font-style: italic;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 4px;
    line-height: 1.4;
    border-left: 2px solid #c9a96e;
    padding-left: 8px;
}

.note-item .note-text {
    font-size: 0.65rem;
    color: #cbd5e1;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-item .note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.note-item .note-date {
    font-size: 0.5rem;
    color: #64748b;
}

.note-item .note-delete {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.5rem;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.note-item:hover .note-delete {
    opacity: 1;
}

.note-item .note-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.note-item .match-count {
    font-size: 0.45rem;
    color: #c9a96e;
    background: rgba(201, 169, 110, 0.15);
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
}

.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.note-tag {
    font-size: 0.5rem;
    background: rgba(201, 169, 110, 0.12);
    color: #c9a96e;
    padding: 1px 8px;
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 110, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.note-tag:hover {
    background: rgba(201, 169, 110, 0.2);
    border-color: #c9a96e;
}

.empty-notes {
    text-align: center;
    padding: 40px 16px;
    color: #64748b;
    font-size: 0.7rem;
}

.empty-notes i {
    font-size: 1.5rem;
    color: rgba(201, 169, 110, 0.2);
    display: block;
    margin-bottom: 10px;
}

/* ============================================================
   MODULE 6: MAIN CONTENT
   ============================================================ */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 32px;
    min-width: 0;
    width: 100%;
    background: radial-gradient(ellipse at 20% 50%, rgba(201, 169, 110, 0.02) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(201, 169, 110, 0.02) 0%, transparent 60%),
        #0d0d0f;
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content::-webkit-scrollbar {
    width: 4px;
}

.main-content::-webkit-scrollbar-track {
    background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 110, 0.3);
    border-radius: 4px;
}

.book-content {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    padding: 12px 20px;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    min-height: 300px;
}

.fade-transition {
    transition: opacity 0.4s ease;
}

.fade-transition.fade-out {
    opacity: 0;
}

.fade-transition.fade-in {
    opacity: 1;
}

/* ============================================================
   MODULE 7: VOLUME HEADER
   ============================================================ */
.volume-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.volume-number {
    display: inline-block;
    background: rgba(201, 169, 110, 0.12);
    padding: 3px 14px;
    border-radius: 30px;
    font-size: 0.6rem;
    color: #c9a96e;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid rgba(201, 169, 110, 0.1);
}

.volume-title {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.4;
}

.volume-subtitle {
    color: #94a3b8;
    font-size: 16px;
    opacity: 0.8;
    line-height: 1.6;
}

/* ============================================================
   MODULE 8: TOOLBAR
   ============================================================ */
.toolbar-container {
    position: sticky;
    top: -5px;
    z-index: 40;
    background: rgba(28, 28, 32, 0.90) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px 6px 10px;
    margin: 0 0 16px 0;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    min-height: 38px;
    width: 100%;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.toolbar-btn.active {
    background: rgba(201, 169, 110, 0.15);
    color: #c9a96e;
}

.toolbar-btn i {
    font-size: 0.8rem;
    opacity: 0.8;
}

.toolbar-btn .btn-label {
    font-size: 0.6rem;
    font-weight: 400;
    opacity: 0.8;
}

.toolbar-btn .badge-count {
    background: rgba(201, 169, 110, 0.15);
    color: #c9a96e;
    font-size: 0.5rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 2px;
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 3px;
    flex-shrink: 0;
}

.toolbar-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.toolbar-progress .progress-track-mini {
    width: 60px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.toolbar-progress .progress-fill-mini {
    height: 100%;
    background: linear-gradient(135deg, #c9a96e, #e8d5a3);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.toolbar-progress .progress-text-mini {
    font-size: 0.5rem;
    color: #c9a96e;
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}

.toolbar-date {
    font-size: 0.55rem;
    color: #64748b;
    padding: 0 4px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   MODULE 9: CONTENU DU LIVRE
   ============================================================ */
.law-number,
.chapter,
.subchapter,
p,
ul,
ol,
.insight-box p,
.insight-box,
.law-number span {
    font-size: 20px;
    line-height: 1.6;
}

.law-number {
    font-weight: 700;
    color: #c9a96e;
    margin: 24px 0 12px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.law-number span {
    color: #e8d5a3;
}

.chapter {
    font-weight: 700;
    color: #c9a96e;
    margin: 26px 0 14px 0;
    padding-left: 14px;
    border-left: 3px solid #c9a96e;
}

.subchapter {
    font-weight: 600;
    color: #e8d5a3;
    margin: 18px 0 10px 0;
}

p {
    color: #cbd5e1;
    margin-bottom: 0.9rem;
}

p strong {
    color: #e8d5a3;
}

ul,
ol {
    color: #cbd5e1;
    margin: 8px 0 14px 20px;
}

ul li,
ol li {
    margin-bottom: 3px;
}

ul li strong,
ol li strong {
    color: #e8d5a3;
}

hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 28px 0;
}

.small-rule {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin: 24px 0 18px 0;
}

.insight-box {
    background: rgba(201, 169, 110, 0.06);
    border-left: 3px solid #c9a96e;
    padding: 14px 18px;
    margin: 16px 0;
    border-radius: 0 10px 10px 0;
    backdrop-filter: blur(10px);
}

.insight-box strong {
    color: #c9a96e;
}

.insight-box p {
    margin-bottom: 0.4rem;
}

.insight-box p:last-child {
    margin-bottom: 0;
}

.selectable-text {
    cursor: text;
    transition: all 0.3s ease;
    padding: 2px 4px;
    border-radius: 4px;
    user-select: text;
}

.selectable-text:hover {
    background: rgba(201, 169, 110, 0.06);
}

.unlock-volume-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #c9a96e 0%, #b8954a 100%);
    border: none;
    border-radius: 35px;
    color: #0d0d0f;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 25px rgba(201, 169, 110, 0.3);
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    margin: 10px 0;
}

.unlock-volume-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(201, 169, 110, 0.5);
}

.unlock-volume-btn i {
    font-size: 18px;
}

.volume-loader {
    display: none;
    text-align: center;
    padding: 40px 0;
    color: #64748b;
}

.volume-loader i {
    font-size: 2rem;
    color: #c9a96e;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   MODULE 10: MARKERS & NAVIGATION
   ============================================================ */
.nav-markers {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 100;
    padding: 8px 4px;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: none;
    background: rgba(13, 13, 15, 0.7);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 24px;
    transition: opacity 0.3s ease;
}

.nav-markers.hidden {
    opacity: 0;
    pointer-events: none;
}

.nav-markers::-webkit-scrollbar {
    display: none;
}

.marker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    border: none;
}

.marker-dot:hover {
    background: rgba(201, 169, 110, 0.6);
    transform: scale(1.3);
}

.marker-dot.active {
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 100%);
    width: 10px;
    height: 10px;
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.4);
}

.marker-dot.volume-separator {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.15);
    margin: 2px 0;
    cursor: default;
}

.marker-dot.volume-separator:hover {
    transform: none;
}

.marker-dot.volume-marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(201, 169, 110, 0.1);
    border: 2px solid rgba(201, 169, 110, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 2px 0;
    flex-shrink: 0;
}

.marker-dot.volume-marker .marker-label {
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
}

.marker-dot.volume-marker:hover {
    background: rgba(201, 169, 110, 0.25);
    border-color: #c9a96e;
    color: #c9a96e;
    transform: scale(1.1);
}

.marker-dot.volume-marker.active {
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 100%);
    border-color: #c9a96e;
    color: #0d0d0f;
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.4);
    transform: scale(1.1);
}

/* ============================================================
   MODULE 11: MARKER POPUP
   ============================================================ */
.marker-popup {
    position: fixed;
    right: 50px;
    background: rgba(20, 20, 22, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0;
    min-width: 180px;
    max-width: 300px;
    max-height: 320px;
    overflow-y: auto;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(8px) scale(0.96);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 102;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    visibility: hidden;
}

.marker-popup.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
}

.marker-popup::-webkit-scrollbar {
    width: 3px;
}

.marker-popup::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.marker-popup::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 110, 0.3);
    border-radius: 3px;
}

.marker-popup .popup-header {
    padding: 10px 14px 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.55rem;
    font-weight: 600;
    color: #c9a96e;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: rgba(20, 20, 22, 0.97);
    z-index: 2;
}

.marker-popup .popup-header .close-popup {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.marker-popup .popup-header .close-popup:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
}

.marker-popup .popup-list {
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
}

.marker-popup .popup-list::-webkit-scrollbar {
    width: 3px;
}

.marker-popup .popup-list::-webkit-scrollbar-track {
    background: transparent;
}

.marker-popup .popup-list::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 110, 0.3);
    border-radius: 3px;
}

.marker-popup .popup-item {
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    color: #94a3b8;
    border-left: 2px solid transparent;
}

.marker-popup .popup-item:hover {
    background: rgba(201, 169, 110, 0.08);
    color: #e8d5a3;
    border-left-color: #c9a96e;
}

.marker-popup .popup-item.active-item {
    background: rgba(201, 169, 110, 0.12);
    color: #c9a96e;
    border-left-color: #c9a96e;
}

.marker-popup .popup-item .item-num {
    font-size: 0.55rem;
    color: #64748b;
    min-width: 22px;
    font-weight: 500;
    flex-shrink: 0;
}

.marker-popup .popup-item .item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marker-popup .popup-item .item-vol {
    font-size: 0.5rem;
    color: #475569;
    background: rgba(201, 169, 110, 0.1);
    padding: 1px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.marker-popup .popup-item.volume-header-item {
    padding: 6px 14px 2px 14px;
    font-size: 0.5rem;
    font-weight: 600;
    color: #c9a96e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: default;
    background: rgba(201, 169, 110, 0.04);
    border-left: 2px solid rgba(201, 169, 110, 0.15);
}

.marker-popup .popup-empty {
    padding: 16px 14px;
    text-align: center;
    color: #64748b;
    font-size: 0.65rem;
}

/* ============================================================
   MODULE 12: PROGRESS COUNTER
   ============================================================ */
.progress-counter {
    position: fixed;
    right: 6px;
    bottom: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: #64748b;
    background: rgba(13, 13, 15, 0.85);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1000;
    text-align: center;
    min-width: 50px;
    transition: all 0.3s ease;
}

.progress-counter .progress-current {
    color: #c9a96e;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.progress-counter .progress-separator {
    color: #475569;
    margin: 0 2px;
}

.progress-counter .progress-total {
    color: #94a3b8;
    font-weight: 400;
}

/* ============================================================
   MODULE 13: ANNOTATIONS
   ============================================================ */
.annotated-passage {
    position: relative;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0d0d0f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(201, 169, 110, 0.15);
}

.annotated-passage:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-color: rgba(201, 169, 110, 0.3);
}

.annotated-passage .pin-icon {
    font-size: 0.65rem;
    margin-right: 2px;
    opacity: 0.9;
}

.annotated-passage .annotated-text {
    font-weight: 600;
	color: #000000;
}

.annotated-passage.color-yellow .annotated-text {
    color: #000000;
	
}

.annotated-passage.color-green .annotated-text {
    color: #000000;
}

.annotated-passage.color-blue .annotated-text {
    color: #000000;
}

.annotated-passage.color-pink .annotated-text {
    color: #000000;
}

.annotated-passage.color-purple .annotated-text {
    color: #000000;
}

.annotated-passage.color-orange .annotated-text {
    color: #000000;
}

@media (prefers-color-scheme: dark) {
    .annotated-passage {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
    }
    .annotated-passage .annotated-text {
        color: inherit;
    }
    .annotated-passage.color-yellow .annotated-text {
        color: #fdd835;
    }
    .annotated-passage.color-green .annotated-text {
        color: #66bb6a;
    }
    .annotated-passage.color-blue .annotated-text {
        color: #42a5f5;
    }
    .annotated-passage.color-pink .annotated-text {
        color: #ec407a;
    }
    .annotated-passage.color-purple .annotated-text {
        color: #ab47bc;
    }
    .annotated-passage.color-orange .annotated-text {
        color: #ffa726;
    }
}

.highlighted-passage {
    background: rgba(201, 169, 110, 0.35) !important;
    border-left: 4px solid #c9a96e !important;
    box-shadow: 0 0 30px rgba(201, 169, 110, 0.25) !important;
    animation: highlightPulse 0.6s ease;
}

@keyframes highlightPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================================
   MODULE 14: COLOR PICKER
   ============================================================ */
.color-picker {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.color-picker-label {
    font-size: 0.55rem;
    color: #64748b;
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.color-option {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 4px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.color-option:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.color-option.selected {
    border-color: #c9a96e;
    box-shadow: 0 0 15px rgba(201, 169, 110, 0.3);
    transform: scale(1.1);
}

.color-option.yellow {
    background: #ffeb3b;
}

.color-option.green {
    background: #4caf50;
}

.color-option.blue {
    background: #2196f3;
}

.color-option.pink {
    background: #e91e63;
}

.color-option.purple {
    background: #9c27b0;
}

.color-option.orange {
    background: #ff9800;
}

/* ============================================================
   MODULE 15: MODALS GENERAUX
   ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-container {
    background: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(30px);
    border-radius: 20px;
    width: 440px;
    max-width: 92%;
    padding: 28px 24px;
    border: 1px solid rgba(201, 169, 110, 0.15);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    animation: modalSlide 0.3s ease;
    text-align: center;
}

@keyframes modalSlide {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.modal-title i {
    background: linear-gradient(135deg, #c9a96e 0%, #b8954a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}

.modal-preview {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 55px;
    transition: all 0.3s ease;
    position: relative;
}

.modal-preview::before {
    content: '📄 Aperçu';
    position: absolute;
    top: -8px;
    right: 12px;
    font-size: 0.5rem;
    color: #64748b;
    background: rgba(13, 13, 15, 0.95);
    padding: 0 8px;
    border-radius: 4px;
}

.modal-preview .preview-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #cbd5e1;
    font-weight: 400;
}

.modal-preview .preview-text .preview-highlight {
    display: inline;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(201, 169, 110, 0.15);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.92) !important;
}

.modal-preview .preview-text .preview-highlight.color-yellow {
    color: #d4a017;
    border-color: rgba(212, 160, 23, 0.3);
}

.modal-preview .preview-text .preview-highlight.color-green {
    color: #2e7d32;
    border-color: rgba(46, 125, 50, 0.3);
}

.modal-preview .preview-text .preview-highlight.color-blue {
    color: #0d47a1;
    border-color: rgba(13, 71, 161, 0.3);
}

.modal-preview .preview-text .preview-highlight.color-pink {
    color: #880e4f;
    border-color: rgba(136, 14, 79, 0.3);
}

.modal-preview .preview-text .preview-highlight.color-purple {
    color: #4a148c;
    border-color: rgba(74, 20, 140, 0.3);
}

.modal-preview .preview-text .preview-highlight.color-orange {
    color: #e65100;
    border-color: rgba(230, 81, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
    .modal-preview .preview-text .preview-highlight {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #e2e8f0;
        border-color: rgba(255, 255, 255, 0.15);
    }
    .modal-preview .preview-text .preview-highlight.color-yellow {
        color: #fdd835;
        border-color: rgba(253, 216, 53, 0.3);
    }
    .modal-preview .preview-text .preview-highlight.color-green {
        color: #66bb6a;
        border-color: rgba(102, 187, 106, 0.3);
    }
    .modal-preview .preview-text .preview-highlight.color-blue {
        color: #42a5f5;
        border-color: rgba(66, 165, 245, 0.3);
    }
    .modal-preview .preview-text .preview-highlight.color-pink {
        color: #ec407a;
        border-color: rgba(236, 64, 122, 0.3);
    }
    .modal-preview .preview-text .preview-highlight.color-purple {
        color: #ab47bc;
        border-color: rgba(171, 71, 188, 0.3);
    }
    .modal-preview .preview-text .preview-highlight.color-orange {
        color: #ffa726;
        border-color: rgba(255, 167, 38, 0.3);
    }
}

.modal-textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: white;
    font-size: 0.75rem;
    resize: vertical;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.modal-textarea:focus {
    outline: none;
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.modal-textarea::placeholder {
    color: #64748b;
}

.modal-tags-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: white;
    font-size: 0.7rem;
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.modal-tags-input:focus {
    outline: none;
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.modal-tags-input::placeholder {
    color: #64748b;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-btn {
    padding: 9px 22px;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
}

.modal-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.modal-btn-save {
    background: linear-gradient(135deg, #c9a96e 0%, #b8954a 100%);
    color: #0d0d0f;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(201, 169, 110, 0.2);
}

.modal-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(201, 169, 110, 0.4);
}

.modal-btn-primary {
    padding: 10px 28px;
    background: linear-gradient(135deg, #c9a96e 0%, #b8954a 100%);
    border-radius: 30px;
    color: #0d0d0f;
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(201, 169, 110, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(201, 169, 110, 0.4);
}

/* ============================================================
   MODAL D'ANNOTATION - VERSION MODERNE
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    display: none !important;  /* ✅ Caché par défaut */
    align-items: center;
    justify-content: center;
    animation: modalOverlayIn 0.3s ease;
}

.modal-overlay.active {
    display: flex !important;  /* ✅ Visible quand actif */
}

@keyframes modalOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-container {
    background: linear-gradient(145deg, rgba(20, 20, 25, 0.98), rgba(30, 30, 38, 0.98));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    width: 520px;
    max-width: 94%;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(2, 166, 186, 0.05) inset;
    animation: modalSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}




/* ---- EN-TÊTE ---- */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(2, 166, 186, 0.02);
}

.modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.modal-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(2, 166, 186, 0.15), rgba(2, 166, 186, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(2, 166, 186, 0.1);
    box-shadow: 0 4px 15px rgba(2, 166, 186, 0.05);
}

.modal-icon-wrapper i {
    color: #02A6BA;
    font-size: 1.1rem;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #e8d5a3;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.modal-subtitle {
    font-size: 0.55rem;
    color: #64748b;
    font-weight: 400;
    display: block;
    margin-top: 1px;
    letter-spacing: 0.3px;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    transform: scale(1.05) rotate(90deg);
}

/* ---- APERÇU ---- */
.modal-preview-container {
    padding: 16px 24px 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.modal-preview-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.modal-preview-label i {
    color: #02A6BA;
    font-size: 0.7rem;
    opacity: 0.7;
}

.modal-preview-label span {
    font-size: 0.55rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.modal-preview-color-badge {
    margin-left: auto;
    font-size: 0.5rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(2, 166, 186, 0.12);
    color: #02A6BA;
    border: 1px solid rgba(2, 166, 186, 0.15);
    transition: all 0.3s ease;
}

.modal-preview-content {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 14px 18px;
    min-height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.3s ease;
    position: relative;
}

.modal-preview-content .preview-highlight {
    display: inline;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.8;
    font-size: 0.85rem;
    color: #ffffff;
    transition: all 0.3s ease;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ✅ Couleurs de l'aperçu - EXACTEMENT comme dans le contenu */
.modal-preview-content .preview-highlight.color-cyan {
    background-color: #02A6BA !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(2, 166, 186, 0.2), 0 1px 4px rgba(0,0,0,0.05);
}

.modal-preview-content .preview-highlight.color-green {
    background-color: #4caf50 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.2), 0 1px 4px rgba(0,0,0,0.05);
}

.modal-preview-content .preview-highlight.color-blue {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.2), 0 1px 4px rgba(0,0,0,0.05);
}

.modal-preview-content .preview-highlight.color-pink {
    background-color: #e91e63 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.2), 0 1px 4px rgba(0,0,0,0.05);
}

.modal-preview-content .preview-highlight.color-purple {
    background-color: #9c27b0 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.2), 0 1px 4px rgba(0,0,0,0.05);
}

.modal-preview-content .preview-highlight.color-orange {
    background-color: #ff9800 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.2), 0 1px 4px rgba(0,0,0,0.05);
}

.modal-preview-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(2, 166, 186, 0.04);
    border-radius: 6px;
    border: 1px solid rgba(2, 166, 186, 0.06);
}

.modal-preview-hint i {
    color: #02A6BA;
    font-size: 0.5rem;
    opacity: 0.6;
}

.modal-preview-hint span {
    font-size: 0.5rem;
    color: #64748b;
}

/* ---- RÉFLEXION ---- */
.modal-reflection-area {
    padding: 14px 24px 10px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.modal-reflection-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.modal-reflection-label i {
    color: #fbbf24;
    font-size: 0.7rem;
}

.modal-reflection-label span {
    font-size: 0.55rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.modal-optional-badge {
    margin-left: auto;
    font-size: 0.45rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 400;
}

.modal-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    transition: all 0.3s ease;
    line-height: 1.6;
}

.modal-textarea:focus {
    outline: none;
    border-color: rgba(2, 166, 186, 0.2);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 30px rgba(2, 166, 186, 0.02);
}

.modal-textarea::placeholder {
    color: #475569;
    font-weight: 300;
    font-style: italic;
}

/* ---- TAGS ---- */
.modal-tags-area {
    padding: 10px 24px 14px 24px;
}

.modal-tags-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.modal-tags-label i {
    color: #a78bfa;
    font-size: 0.65rem;
}

.modal-tags-label span {
    font-size: 0.55rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.modal-tags-hint {
    margin-left: auto;
    font-size: 0.45rem;
    color: #64748b;
    font-weight: 400;
    text-transform: none;
}

.modal-tags-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.modal-tags-input:focus {
    outline: none;
    border-color: rgba(2, 166, 186, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.modal-tags-input::placeholder {
    color: #475569;
}

/* ---- PIED DE PAGE ---- */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(2, 166, 186, 0.01);
    flex-wrap: wrap;
    gap: 10px;
}

.modal-footer-left {
    display: flex;
    align-items: center;
}

.modal-character-count {
    font-size: 0.5rem;
    color: #64748b;
    font-weight: 400;
}

.modal-footer-right {
    display: flex;
    gap: 10px;
}

.modal-btn {
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-btn-cancel {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    transform: translateY(-1px);
}

.modal-btn-save {
    background: linear-gradient(135deg, #02A6BA 0%, #028a9e 100%);
    color: #0d0d0f;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(2, 166, 186, 0.25);
}

.modal-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(2, 166, 186, 0.4);
}

.modal-btn-save:active {
    transform: translateY(0);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
    .modal-container {
        width: 98%;
        max-width: 100%;
        border-radius: 16px;
        margin: 10px;
    }
    
    .modal-header {
        padding: 16px 16px 12px 16px;
    }
    
    .modal-preview-container {
        padding: 12px 16px 10px 16px;
    }
    
    .modal-reflection-area {
        padding: 10px 16px 8px 16px;
    }
    
    .modal-tags-area {
        padding: 8px 16px 10px 16px;
    }
    
    .modal-footer {
        padding: 10px 16px 14px 16px;
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-footer-right {
        width: 100%;
    }
    
    .modal-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 16px;
    }
    
    .modal-title {
        font-size: 0.9rem;
    }
    
    .modal-icon-wrapper {
        width: 34px;
        height: 34px;
    }
    
    .modal-icon-wrapper i {
        font-size: 0.9rem;
    }
}

/* ============================================================
   MODULE 16: ANNOTATION TOOLTIP
   ============================================================ */
.annotation-tooltip {
    position: fixed;
    background: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(201, 169, 110, 0.2);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.65rem;
    color: #c9a96e;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    display: none;
    max-width: 280px;
    white-space: nowrap;
    animation: tooltipFade 0.2s ease;
}

.annotation-tooltip .tooltip-icon {
    margin-right: 6px;
    font-size: 0.7rem;
}

.annotation-tooltip .tooltip-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

@keyframes tooltipFade {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   MODULE 17: CONFIRM MODAL
   ============================================================ */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 999999 !important;  /* ✅ Augmenté */
    display: none;
    align-items: center;
    justify-content: center;
    animation: overlayFade 0.3s ease;
}

.confirm-modal-overlay.active {
    display: flex;
}

@keyframes overlayFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.confirm-modal-box {
    background: rgba(20, 20, 22, 0.98);
    backdrop-filter: blur(30px);
    border-radius: 16px;
    padding: 28px 32px 24px;
    max-width: 380px;
    width: 92%;
    border: 1px solid rgba(201, 169, 110, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    animation: confirmSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

@keyframes confirmSlide {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirm-modal-box .confirm-icon {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 8px;
}

.confirm-modal-box .confirm-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ef4444;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.confirm-modal-box .confirm-message {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 0 4px;
}

.confirm-modal-box .confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.confirm-modal-box .confirm-btn {
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.confirm-modal-box .confirm-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.confirm-modal-box .confirm-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.confirm-modal-box .confirm-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.25);
}

.confirm-modal-box .confirm-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.35);
}

/* ============================================================
   MODULE 18: TOAST
   ============================================================ */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(201, 169, 110, 0.2);
    padding: 10px 24px;
    border-radius: 35px;
    font-size: 0.75rem;
    z-index: 1100;
    opacity: 0;
    transition: all 0.4s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    color: #e8d5a3;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ============================================================
   MODULE 19: HEATMAP
   ============================================================ */
.heatmap-matrix {
    display: block;
    padding: 10px 0;
    max-height: 72vh;
    overflow-y: auto;
    background: rgba(13, 13, 15, 0.3);
    border-radius: 12px;
}

.heatmap-matrix table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 1px;
    table-layout: fixed;
}

.heatmap-matrix td {
    padding: 0;
    margin: 0;
    border: 0;
    text-align: center;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.heatmap-matrix .cell-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-size: 0.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    min-height: 28px;
    min-width: 28px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.heatmap-matrix .cell-inner:hover {
    transform: scale(1.25);
    z-index: 10;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    border-color: rgba(255, 255, 255, 0.15);
}

.heatmap-matrix .cell-inner .cell-label {
    font-size: 0.5rem;
    font-weight: 700;
    opacity: 0.95;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0.3px;
}

.heatmap-matrix .cell-inner .cell-fav-indicator {
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 0.45rem;
    color: #fbbf24;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.heatmap-matrix .cell-inner .cell-like-indicator {
    position: absolute;
    bottom: -3px;
    left: -3px;
    font-size: 0.4rem;
    color: #ef4444;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.heatmap-matrix .cell-inner .cell-score-badge {
    position: absolute;
    top: -3px;
    left: -3px;
    font-size: 0.35rem;
    background: rgba(13, 13, 15, 0.8);
    padding: 0 4px;
    border-radius: 8px;
    color: #c9a96e;
    border: 1px solid rgba(201, 169, 110, 0.2);
    pointer-events: none;
}

.heat-color-0 {
    background: #0a0a1a;
}

.heat-color-1 {
    background: #150a3a;
}

.heat-color-2 {
    background: #201a5a;
}

.heat-color-3 {
    background: #2a1a6a;
}

.heat-color-4 {
    background: #3a2a7a;
}

.heat-color-5 {
    background: #4a3a8a;
}

.heat-color-6 {
    background: #5a4a9a;
}

.heat-color-7 {
    background: #6a5aaa;
}

.heat-color-8 {
    background: #7a6aba;
}

.heat-color-9 {
    background: #8a7aca;
}

.heat-color-10 {
    background: #9a8ad0;
}

.heat-color-11 {
    background: #aa9ad8;
}

.heat-color-12 {
    background: #baaae0;
}

.heat-color-13 {
    background: #caba88;
}

.heat-color-14 {
    background: #daca58;
}

.heat-color-15 {
    background: #eada30;
}

.heat-color-16 {
    background: #eae830;
}

.heat-color-17 {
    background: #eaf030;
}

.heat-color-18 {
    background: #eaf830;
}

.heat-color-19 {
    background: #eafc40;
}

.heat-color-20 {
    background: #eafc60;
}

.heat-color-21 {
    background: #eafc80;
}

.heat-color-22 {
    background: #eafc9a;
}

.heat-color-23 {
    background: #eafcba;
}

.heat-color-24 {
    background: #fcfcda;
}

.heatmap-tooltip {
    position: fixed;
    background: rgba(13, 13, 15, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(201, 169, 110, 0.2);
    border-radius: 14px;
    padding: 16px 20px;
    min-width: 240px;
    max-width: 340px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    visibility: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.heatmap-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.heatmap-tooltip .tooltip-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e8d5a3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.heatmap-tooltip .tooltip-extract {
    font-size: 0.65rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 4px 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.heatmap-tooltip .tooltip-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.heatmap-tooltip .tooltip-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.55rem;
    color: #64748b;
}

.heatmap-tooltip .tooltip-stat i {
    font-size: 0.6rem;
}

.heatmap-tooltip .tooltip-stat .stat-like {
    color: #ef4444;
}

.heatmap-tooltip .tooltip-stat .stat-fav {
    color: #fbbf24;
}

.heatmap-tooltip .tooltip-stat .stat-comment {
    color: #60a5fa;
}

.heatmap-tooltip .tooltip-stat .stat-score {
    color: #c9a96e;
}

.heatmap-tooltip .tooltip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.heatmap-tooltip .tooltip-action-btn {
    padding: 3px 12px;
    border-radius: 20px;
    border: none;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.heatmap-tooltip .tooltip-action-btn:hover {
    background: rgba(201, 169, 110, 0.15);
    color: #c9a96e;
}

.heatmap-tooltip .tooltip-action-btn.fav-btn.active {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.heatmap-tooltip .tooltip-action-btn.like-btn.active {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.heatmap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 6px 0 12px 0;
}

.heatmap-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    color: #94a3b8;
}

.heatmap-stats .stat-item i {
    font-size: 0.7rem;
}

.heatmap-stats .stat-item .stat-value {
    font-weight: 600;
    color: #e8d5a3;
}

.heatmap-stats .stat-item .stat-label {
    font-size: 0.5rem;
    color: #64748b;
}

/* ============================================================
   MODULE 20: INTERACTIONS (LIKES, COMMENTAIRES, FAVORIS)
   ============================================================ */
.law-interactions {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
    padding: 4px 0 2px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.law-interactions .interaction-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
}

.law-interactions .interaction-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.law-interactions .interaction-item .interaction-label {
    font-size: 0.55rem;
    color: #8a8a8a;
    font-weight: 500;
}

.law-interactions .like-btn {
    background: none;
    border: none;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
    color: #8a8a8a;
    position: relative;
}

.law-interactions .like-btn:hover {
    color: #e2e8f0;
}

.law-interactions .like-btn.liked {
    color: #ef4444 !important;
}

.law-interactions .like-btn .like-count {
    font-size: 0.5rem;
}

.law-interactions .like-btn .like-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 13, 15, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 8px 12px;
    min-width: 120px;
    max-width: 200px;
    z-index: 50;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    font-size: 0.5rem;
    color: #94a3b8;
    pointer-events: none;
}

.law-interactions .like-btn .like-tooltip .like-avatar {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a96e, #b8954a);
    color: #0d0d0f;
    font-size: 0.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
    margin-right: 4px;
}

.law-interactions .like-btn .like-tooltip .like-name {
    color: #e8d5a3;
}

.law-interactions .like-btn .like-tooltip .like-more {
    color: #475569;
    font-size: 0.4rem;
}

.law-interactions .like-btn:hover .like-tooltip {
    display: block;
}

.law-interactions .comment-toggle-btn {
    background: none;
    border: none;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
    color: #8a8a8a;
}

.law-interactions .comment-toggle-btn:hover {
    color: #e2e8f0;
}

.law-interactions .comment-toggle-btn .comment-count {
    font-size: 0.5rem;
}

.law-interactions .favorite-btn {
    background: none;
    border: none;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
    color: #8a8a8a;
}

.law-interactions .favorite-btn:hover {
    color: #25D366 !important;
}

.law-interactions .favorite-btn.is-favorite {
    color: #25D366 !important;
}

.law-interactions .favorite-btn .favorite-count {
    font-size: 0.5rem;
    color: #94a3b8;
}

.law-interactions .favorite-btn.is-favorite .favorite-count {
    color: #25D366;
}

.law-fav-icon {
    display: inline-block;
    cursor: pointer;
    margin-left: 8px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    vertical-align: middle;
    background: none;
    border: none;
    padding: 0 2px;
    color: #8a8a8a;
    position: relative;
}

.law-fav-icon:hover {
    transform: scale(1.2);
}

.law-fav-icon.is-favorite {
    color: #25D366 !important;
}

.law-fav-icon .fav-count-badge {
    font-size: 0.45rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 2px;
    color: #94a3b8;
    font-weight: 500;
}

.law-fav-icon.is-favorite .fav-count-badge {
    color: #25D366;
    background: rgba(37, 211, 102, 0.12);
}

.law-title-format {
    font-family: 'Inter', 'Georgia', serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 30%, #c9a96e 60%, #b8954a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.chapter .law-title-format {
    font-size: 1.5rem;
    letter-spacing: 3px;
}

/* ============================================================
   MODULE 21: COMMENTAIRES - SECTION DANS LE CONTENU
   ============================================================ */
.comment-section-wrapper {
    margin: 4px 0 8px 0;
    padding: 0 4px;
}

.comment-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
    display: none;
}

.comment-section .comment-input {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.comment-section .comment-input-field {
    flex: 1;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: white;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.comment-section .comment-input-field:focus {
    border-color: rgba(201, 169, 110, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.comment-section .comment-input-field::placeholder {
    color: #64748b;
}

.comment-section .comment-send-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg, #c9a96e, #b8954a);
    border: none;
    border-radius: 20px;
    color: #0d0d0f;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.comment-section .comment-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(201, 169, 110, 0.3);
}

.comment-section .comment-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.comment-section .comment-list {
    max-height: 150px;
    overflow-y: auto;
    padding: 4px 0;
}

.comment-section .comment-list::-webkit-scrollbar {
    width: 2px;
}

.comment-section .comment-list::-webkit-scrollbar-track {
    background: transparent;
}

.comment-section .comment-list::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 110, 0.3);
    border-radius: 3px;
}

.comment-section .comment-loading {
    text-align: center;
    color: #64748b;
    font-size: 0.6rem;
    padding: 8px 0;
}

.comment-section .comment-item {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.comment-section .comment-item:last-child {
    border-bottom: none;
}

.comment-section .comment-item .comment-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    color: #0d0d0f;
    text-transform: uppercase;
    background: linear-gradient(135deg, #c9a96e, #b8954a);
}

.comment-section .comment-item .comment-avatar-small.color-1 {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.comment-section .comment-item .comment-avatar-small.color-2 {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.comment-section .comment-item .comment-avatar-small.color-3 {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.comment-section .comment-item .comment-avatar-small.color-4 {
    background: linear-gradient(135deg, #fa709a, #fee140);
}

.comment-section .comment-item .comment-avatar-small.color-5 {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}

.comment-section .comment-item .comment-avatar-small.color-6 {
    background: linear-gradient(135deg, #fccb90, #d57eeb);
}

.comment-section .comment-item .comment-content {
    flex: 1;
    min-width: 0;
}

.comment-section .comment-item .comment-author-name {
    font-size: 0.55rem;
    font-weight: 600;
    color: #e8d5a3;
}

.comment-section .comment-item .comment-author-time {
    font-size: 0.4rem;
    color: #64748b;
    margin-left: 6px;
}

.comment-section .comment-item .comment-text-content {
    font-size: 0.6rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin-top: 2px;
    word-wrap: break-word;
}

.comment-section .comment-empty {
    text-align: center;
    color: #64748b;
    font-size: 0.6rem;
    padding: 12px 0;
}

/* ============================================================
   MODAL COMMENTAIRES - VERSION ULTRA PREMIUM
   ============================================================ */

.comments-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 3000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    animation: commentsFadeIn 0.4s ease;
}

.comments-modal-overlay.active {
    display: flex;
}

@keyframes commentsFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== MODAL PRINCIPAL ===== */
.comments-modal {
    background: linear-gradient(165deg, rgba(16, 16, 20, 0.98), rgba(24, 24, 30, 0.98));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    border-radius: 28px 28px 0 0;
    display: flex;
    flex-direction: column;
    animation: commentsSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -30px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: none;
    overflow: hidden;
    position: relative;
}

/* Effet de glow subtil */
.comments-modal::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 20%, rgba(167, 139, 250, 0.03), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

@keyframes commentsSlideUp {
    from {
        transform: translateY(100%) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ===== EN-TÊTE ===== */
.comments-modal-header {
    padding: 18px 20px 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: rgba(16, 16, 20, 0.95);
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(10px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.close-btn {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: scale(1.05) rotate(90deg);
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e8d5a3 20%, #c9a96e 60%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.modal-subtitle {
    font-size: 0.5rem;
    color: #64748b;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.comment-count-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(167, 139, 250, 0.08);
    padding: 4px 12px 4px 10px;
    border-radius: 30px;
    border: 1px solid rgba(167, 139, 250, 0.06);
    color: #a78bfa;
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

.comment-count-badge i {
    font-size: 0.6rem;
}

.comment-count-badge span {
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
}

.header-action-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #64748b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.header-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    transform: rotate(90deg);
}

/* ===== APERÇU DE LA LOI ===== */
.comments-law-preview {
    padding: 14px 20px 12px 20px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.04), rgba(2, 166, 186, 0.02));
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
    position: relative;
}

.law-preview-badge-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.law-preview-number {
    font-size: 0.55rem;
    font-weight: 600;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.08);
    padding: 2px 12px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.law-preview-number i {
    font-size: 0.45rem;
}

.law-preview-volume {
    font-size: 0.5rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 10px;
    border-radius: 20px;
}

.law-preview-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e8d5a3;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 6px 0;
}

.law-preview-extract {
    font-size: 0.65rem;
    color: #94a3b8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    opacity: 0.7;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border-left: 2px solid rgba(167, 139, 250, 0.1);
}

.law-preview-extract i {
    font-size: 0.45rem;
    opacity: 0.4;
    margin: 0 2px;
}

/* ===== STATS DES COMMENTAIRES ===== */
.comments-stats {
    display: flex;
    gap: 16px;
    padding: 8px 20px 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    background: rgba(255, 255, 255, 0.005);
    flex-shrink: 0;
}

.comments-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-icon {
    color: #64748b;
    font-size: 0.6rem;
    opacity: 0.6;
}

.stat-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: #e2e8f0;
}

.stat-label {
    font-size: 0.4rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 400;
}

/* ===== LISTE DES COMMENTAIRES ===== */
.comments-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 4px 16px 4px 16px;
    min-height: 120px;
    max-height: 42vh;
    background: rgba(0, 0, 0, 0.1);
}

.comments-list-container::-webkit-scrollbar {
    width: 3px;
}

.comments-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.comments-list-container::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.15);
    border-radius: 3px;
}

/* ===== LOADING ===== */
.comments-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    gap: 12px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.05);
    border-top-color: #a78bfa;
    animation: spin 0.8s linear infinite;
}

.comments-loading p {
    font-size: 0.65rem;
    color: #64748b;
}

/* ===== ITEM COMMENTAIRE ===== */
.comment-item-modal {
    display: flex;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    animation: commentAppear 0.3s ease;
    transition: background 0.2s ease;
    border-radius: 10px;
    margin: 0 -8px;
    padding-left: 10px;
    padding-right: 10px;
}

.comment-item-modal:hover {
    background: rgba(255, 255, 255, 0.02);
}

@keyframes commentAppear {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== AVATAR ===== */
.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0d0d0f;
    text-transform: uppercase;
    background: linear-gradient(135deg, #a78bfa, #c9a96e);
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.15);
    margin-top: 2px;
    position: relative;
    transition: all 0.3s ease;
}

.comment-avatar::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.1);
}

.comment-avatar.color-1 {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}
.comment-avatar.color-2 {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.comment-avatar.color-3 {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}
.comment-avatar.color-4 {
    background: linear-gradient(135deg, #fa709a, #fee140);
}
.comment-avatar.color-5 {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}
.comment-avatar.color-6 {
    background: linear-gradient(135deg, #fccb90, #d57eeb);
}

/* ===== CORPS DU COMMENTAIRE ===== */
.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.author-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #e8d5a3;
}

.comment-time {
    font-size: 0.45rem;
    font-weight: 400;
    color: #64748b;
}

.comment-badge {
    font-size: 0.4rem;
    background: rgba(167, 139, 250, 0.08);
    color: #a78bfa;
    padding: 1px 8px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.06);
    font-weight: 500;
}

.comment-text {
    font-size: 0.75rem;
    color: #e2e8f0;
    line-height: 1.6;
    margin-top: 4px;
    word-wrap: break-word;
    padding-right: 4px;
    font-weight: 400;
}

/* ===== ACTIONS DU COMMENTAIRE ===== */
.comment-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.comment-actions button {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.comment-actions .comment-edit-btn:hover {
    background: rgba(96, 165, 250, 0.08);
    color: #60a5fa;
}

.comment-actions .comment-delete-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

/* ===== ZONE D'ÉDITION ===== */
.comment-edit-area {
    width: 100%;
    animation: editSlideIn 0.3s ease;
}

@keyframes editSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-edit-input {
    width: 100%;
    min-height: 60px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    transition: all 0.3s ease;
}

.comment-edit-input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.03);
}

.comment-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.comment-edit-char-counter {
    font-size: 0.45rem;
    color: #64748b;
    margin-right: auto;
    transition: color 0.3s ease;
}

.comment-edit-cancel {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.comment-edit-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.comment-edit-save {
    padding: 4px 16px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #0d0d0f;
    font-size: 0.55rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.comment-edit-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3);
}

/* ===== ZONE DE SAISIE ULTRA MODERNE ===== */
.comment-input-area {
    padding: 14px 16px 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(16, 16, 20, 0.95);
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    position: sticky;
    bottom: 0;
}

.comment-input-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 6px 6px 6px 12px;
    transition: all 0.3s ease;
}

.comment-input-wrapper:focus-within {
    border-color: rgba(167, 139, 250, 0.15);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 40px rgba(167, 139, 250, 0.03), 0 0 0 2px rgba(167, 139, 250, 0.02);
}

.comment-input-avatar {
    flex-shrink: 0;
    padding-top: 4px;
}

.mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #c9a96e);
    color: #0d0d0f;
    font-size: 0.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.mini-avatar i {
    font-size: 0.6rem;
    opacity: 0.7;
}

.comment-input-fields {
    flex: 1;
    min-width: 0;
}

.comment-input-field {
    width: 100%;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    padding: 6px 0 2px 0;
    outline: none;
    min-width: 0;
}

.comment-input-field::placeholder {
    color: #64748b;
    font-weight: 300;
}

.comment-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

.char-counter {
    font-size: 0.4rem;
    color: #475569;
    font-weight: 400;
    transition: color 0.3s ease;
}

.char-counter.warning {
    color: #fbbf24;
}

.char-counter.danger {
    color: #ef4444;
}

.comment-input-actions {
    display: flex;
    gap: 2px;
}

.input-action-btn {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 0.55rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.input-action-btn:hover {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
}

.comment-send-btn-modal {
    padding: 8px 16px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(2, 166, 186, 0.04));
    color: #a78bfa;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    border: 1px solid rgba(167, 139, 250, 0.06);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.comment-send-btn-modal.active {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: #0d0d0f;
    border-color: rgba(167, 139, 250, 0.2);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.15);
}

.comment-send-btn-modal.active:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(167, 139, 250, 0.25);
}

.comment-send-btn-modal:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.comment-send-btn-modal i {
    font-size: 0.6rem;
}

/* ===== EMPTY STATE ===== */
.comments-empty {
    text-align: center;
    padding: 50px 20px;
    color: #64748b;
}

.comments-empty .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.2;
    display: block;
}

.comments-empty .empty-text {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 500;
}

.comments-empty .empty-sub {
    font-size: 0.65rem;
    color: #475569;
    margin-top: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .comments-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
    }

    .comments-modal-header {
        padding: 14px 16px 10px 16px;
    }

    .modal-title {
        font-size: 0.9rem;
    }

    .comments-law-preview {
        padding: 10px 16px 8px 16px;
    }

    .law-preview-title {
        font-size: 0.85rem;
    }

    .comments-stats {
        padding: 6px 16px 8px 16px;
        gap: 12px;
    }

    .comments-list-container {
        padding: 4px 12px 4px 12px;
        max-height: 35vh;
    }

    .comment-input-area {
        padding: 10px 12px 14px 12px;
    }

    .comment-input-wrapper {
        padding: 4px 4px 4px 10px;
        border-radius: 16px;
    }

    .comment-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .comment-send-btn-modal span {
        display: none;
    }

    .comment-send-btn-modal {
        padding: 8px 12px;
    }

    .comment-input-actions {
        display: none;
    }

    .comment-count-badge {
        font-size: 0.55rem;
        padding: 2px 8px 2px 6px;
    }

    .stat-value {
        font-size: 0.6rem;
    }

    .stat-label {
        font-size: 0.35rem;
    }
}

@media (max-width: 400px) {
    .comments-modal {
        border-radius: 16px 16px 0 0;
    }

    .modal-title {
        font-size: 0.8rem;
    }

    .modal-subtitle {
        font-size: 0.4rem;
    }

    .law-preview-title {
        font-size: 0.75rem;
    }

    .law-preview-extract {
        font-size: 0.55rem;
    }

    .comment-text {
        font-size: 0.7rem;
    }
}
/* ============================================================
   MODULE 24: RESPONSIVE
   ============================================================ */
@media (max-width: 800px) {
    .reader-layout {
        flex-direction: column;
    }

    .floating-hamburger {
        left: 16px;
        top: 50%;
        width: 44px;
        height: 44px;
    }

    .notes-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 320px !important;
        height: 100vh;
        z-index: 50;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: none;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
    }

    .notes-sidebar.open {
        transform: translateX(0);
    }

    .notes-sidebar.collapsed {
        width: 320px !important;
        transform: translateX(-100%);
        opacity: 1;
        padding: 0;
        margin: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
    }

    .main-content {
        padding: 14px 16px;
        margin-left: 0 !important;
    }

    .book-content {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .top-bar {
        padding: 10px 14px;
    }

    .volume-title {
        font-size: 20px;
    }

    .law-number,
    .chapter,
    .subchapter,
    p,
    ul,
    ol,
    .insight-box p {
        font-size: 15px;
        line-height: 1.8;
    }

    .volume-subtitle {
        font-size: 14px;
    }

    .progress-track {
        width: 60px;
    }

    .pagination-section {
        padding: 6px 12px;
    }

    .page-btn {
        min-width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .unlock-volume-btn {
        padding: 10px 24px;
        font-size: 13px;
    }

    .nav-markers {
        right: 8px;
        padding: 6px 3px;
        gap: 3px;
    }

    .marker-dot {
        width: 6px;
        height: 6px;
    }

    .marker-dot.active {
        width: 8px;
        height: 8px;
    }

    .marker-dot.volume-marker {
        width: 18px;
        height: 18px;
        font-size: 0.4rem;
    }

    .marker-popup {
        max-width: 220px;
        right: 30px;
    }

    .marker-popup .popup-item {
        font-size: 0.6rem;
        padding: 4px 10px;
    }

    .progress-counter {
        font-size: 0.55rem;
        padding: 4px 8px;
        min-width: 40px;
        right: 4px;
        bottom: 20px;
    }

    .progress-counter .progress-current {
        font-size: 0.65rem;
    }

    .toolbar-container {
        padding: 4px 8px;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
        min-height: 32px;
    }

    .toolbar-btn {
        padding: 3px 6px;
        font-size: 0.55rem;
    }

    .toolbar-btn .btn-label {
        display: none;
    }

    .toolbar-btn i {
        font-size: 0.7rem !important;
    }

    .toolbar-progress .progress-track-mini {
        width: 40px;
    }

    .toolbar-progress .progress-text-mini {
        font-size: 0.45rem;
        min-width: 25px;
    }

    .toolbar-separator {
        height: 16px;
        margin: 0 2px;
    }

    .toolbar-date {
        font-size: 0.5rem;
    }

    .heatmap-matrix td {
        width: 24px;
        height: 24px;
    }

    .heatmap-matrix .cell-inner {
        min-height: 20px;
        min-width: 20px;
        font-size: 0.4rem;
    }

    .heatmap-tooltip {
        min-width: 180px;
        max-width: 250px;
        padding: 12px 14px;
    }

    #favoritesGrid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    .comments-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }

    .comments-modal-header {
        padding: 14px 16px 10px 16px;
    }

    .comments-modal-header .header-left .modal-title {
        font-size: 0.85rem;
    }

    .comments-modal-header .header-left .close-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .comments-law-preview {
        padding: 10px 16px 8px 16px;
        max-height: 60px;
    }

    .comments-law-preview .law-preview-title {
        font-size: 0.7rem;
    }

    .comments-list-container {
        padding: 6px 12px 6px 12px;
        max-height: 45vh;
        min-height: 80px;
    }

    .comment-item-modal {
        padding: 10px 4px;
        gap: 10px;
    }

    .comment-item-modal .comment-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .comment-item-modal .comment-body .comment-text {
        font-size: 0.7rem;
    }

    .comment-item-modal .comment-body .comment-author .author-name {
        font-size: 0.65rem;
    }

    .comment-input-area {
        padding: 10px 12px 14px 12px;
        gap: 8px;
    }

    .comment-input-area .comment-input-wrapper {
        padding: 2px 4px 2px 14px;
    }

    .comment-input-area .comment-input-wrapper input {
        font-size: 0.7rem;
        padding: 8px 0;
    }

    .comment-input-area .comment-send-btn-modal {
        padding: 8px 14px;
        font-size: 0.6rem;
        min-width: 65px;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 10px 12px;
    }

    .book-content {
        padding: 14px 12px;
    }

    .top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .nav-links {
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .volume-title {
        font-size: 18px;
    }

    .law-number,
    .chapter,
    .subchapter,
    p,
    ul,
    ol,
    .insight-box p {
        font-size: 14px;
        line-height: 1.7;
    }

    .volume-subtitle {
        font-size: 13px;
    }

    .notes-sidebar {
        width: 300px !important;
    }

    .floating-hamburger {
        left: 12px;
        width: 40px;
        height: 40px;
    }

    .modal-container {
        padding: 20px 16px;
        width: 95%;
    }

    .unlock-volume-btn {
        padding: 8px 18px;
        font-size: 12px;
    }

    .nav-markers {
        right: 4px;
        padding: 4px 2px;
        gap: 2px;
    }

    .marker-dot {
        width: 4px;
        height: 4px;
    }

    .marker-dot.active {
        width: 6px;
        height: 6px;
    }

    .marker-dot.volume-marker {
        width: 14px;
        height: 14px;
        font-size: 0.35rem;
    }

    .marker-popup {
        display: none;
    }

    .confirm-modal-box {
        padding: 20px 16px;
        max-width: 95%;
    }

    .toolbar-container {
        padding: 3px 6px;
        gap: 2px;
        border-radius: 8px;
        min-height: 28px;
        margin: 2px 0 10px 0;
    }

    .toolbar-btn {
        padding: 2px 4px;
        font-size: 0.45rem;
    }

    .toolbar-btn i {
        font-size: 0.6rem !important;
    }

    .toolbar-progress .progress-track-mini {
        width: 25px;
        height: 2px;
    }

    .toolbar-progress .progress-text-mini {
        font-size: 0.4rem;
        min-width: 20px;
    }

    .toolbar-separator {
        height: 12px;
        margin: 0 1px;
    }

    .toolbar-date {
        display: none;
    }

    .heatmap-matrix td {
        width: 18px;
        height: 18px;
    }

    .heatmap-matrix .cell-inner {
        min-height: 16px;
        min-width: 16px;
        font-size: 0.35rem;
        border-radius: 2px;
    }

    .heatmap-tooltip {
        min-width: 150px;
        max-width: 200px;
        padding: 10px 12px;
    }

    #favoritesGrid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MODULE 25: FIX COMMENTAIRES - STYLES ADDITIONNELS
   ============================================================ */

.law-interactions .comment-toggle-btn {
    background: none;
    border: none;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 4px 8px;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
    color: #8a8a8a;
    z-index: 10;
    position: relative;
    pointer-events: auto !important;
}

.law-interactions .comment-toggle-btn:hover {
    color: #60a5fa !important;
}

.law-interactions .comment-toggle-btn .comment-count {
    font-size: 0.5rem;
    background: rgba(255,255,255,0.05);
    padding: 0 6px;
    border-radius: 10px;
}

/* S'assurer que les interactions sont cliquables */
.law-interactions .interaction-item {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
    pointer-events: auto !important;
}

.law-interactions .interaction-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Forcer l'affichage du modal des commentaires */
.comments-modal-overlay.active {
    display: flex !important;
}

.comments-modal-overlay {
    display: none !important;
}

.comments-modal-overlay.active {
    display: flex !important;
}


/* ===== STYLE UNIFORME POUR TOUS LES VOLUMES ===== */
.volume-content {
    font-family: 'Inter', sans-serif;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    color: #e2e8f0;
    line-height: 1.8;
    font-size: 18px;
}

/* Le volume 1 garde son style mais dans le même conteneur */
.volume-1-content {
    /* Le volume 1 peut avoir son propre style */
}

/* Style uniforme pour les titres de loi */
.law-title-format {
    font-family: 'Inter', 'Georgia', serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 30%, #c9a96e 60%, #b8954a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin: 25px 0 10px 0;
}

/* Style uniforme pour les chapitres */
.chapter {
    font-weight: 700;
    color: #c9a96e;
    margin: 30px 0 16px 0;
    padding-left: 16px;
    border-left: 4px solid #c9a96e;
    font-size: 1.2rem;
    font-family: 'Inter', sans-serif;
}

/* Style uniforme pour les sous-chapitres */
.subchapter {
    font-weight: 600;
    color: #e8d5a3;
    margin: 20px 0 12px 0;
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
}

/* Style uniforme pour les paragraphes */
p {
    color: #cbd5e1;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.8;
    font-family: 'Inter', sans-serif;
}

/* Style uniforme pour les listes */
ul, ol {
    color: #cbd5e1;
    margin: 8px 0 14px 24px;
    font-size: 1rem;
    line-height: 1.8;
    font-family: 'Inter', sans-serif;
}

ul li, ol li {
    margin-bottom: 4px;
}

ul li strong, ol li strong {
    color: #e8d5a3;
}

/* Style uniforme pour les encadrés */
.insight-box {
    background: rgba(201, 169, 110, 0.06);
    border-left: 4px solid #c9a96e;
    padding: 16px 20px;
    margin: 16px 0;
    border-radius: 0 10px 10px 0;
    backdrop-filter: blur(10px);
    font-family: 'Inter', sans-serif;
}

.insight-box strong {
    color: #c9a96e;
}

.insight-box p {
    margin-bottom: 0.5rem;
}

.insight-box p:last-child {
    margin-bottom: 0;
}

/* Style uniforme pour les séparateurs */
hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 30px 0;
}

.small-rule {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin: 24px 0 18px 0;
}




/* ============================================================
   INDICATEUR DE SÉLECTION
   ============================================================ */
.selectable-text {
    /*transition: background 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;*/
}

.selectable-text::selection {
    /*background: rgba(201, 169, 110, 0.35);
    color: #0d0d0f;*/
}

/* ✅ Survol des textes sélectionnables */
.selectable-text:hover {
    /*background: rgba(201, 169, 110, 0.05);*/
}

/* ✅ Lorsque du texte est sélectionné */
.selectable-text.selected {
    /*background: rgba(201, 169, 110, 0.15);
    border-left: 2px solid #c9a96e;*/
}

/* ✅ Effet lors de la sélection de texte */
.selectable-text::selection {
    background: rgba(201, 169, 110, 0.35);
    color: #0d0d0f;
}

/* ✅ Pour les navigateurs WebKit */
.selectable-text::-moz-selection {
    background: rgba(201, 169, 110, 0.35);
    color: #0d0d0f;
}

/* ============================================================
   STYLE POUR LA SÉLECTION
   ============================================================ */
.selectable-text {
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* ✅ Indicateur visuel pour déboguer */
.selectable-text {
    /* border: 1px solid rgba(201, 169, 110, 0.1); */
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.selectable-text:hover {
    background: rgba(201, 169, 110, 0.05);
}

.selectable-text::selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

.selectable-text::-moz-selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

/* ============================================================
   STYLES DES COULEURS D'ANNOTATION
   ============================================================ */

/* ✅ Couleurs pour l'aperçu */
.preview-highlight {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.preview-highlight.color-yellow {
    background-color: #ffeb3b !important;
    color: #0d0d0f !important;
}

.preview-highlight.color-green {
    background-color: #4caf50 !important;
    color: #0d0d0f !important;
}

.preview-highlight.color-blue {
    background-color: #2196f3 !important;
    color: #0d0d0f !important;
}

.preview-highlight.color-pink {
    background-color: #e91e63 !important;
    color: #0d0d0f !important;
}

.preview-highlight.color-purple {
    background-color: #9c27b0 !important;
    color: #0d0d0f !important;
}

.preview-highlight.color-orange {
    background-color: #ff9800 !important;
    color: #0d0d0f !important;
}

/* ✅ Annotations dans le contenu */
.annotated-passage {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.annotated-passage:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* ✅ Les couleurs pour annotated-passage */
.annotated-passage.color-yellow {
    background-color: #ffeb3b !important;
    color: #0d0d0f !important;
}

.annotated-passage.color-green {
    background-color: #4caf50 !important;
    color: #0d0d0f !important;
}

.annotated-passage.color-blue {
    background-color: #2196f3 !important;
    color: #0d0d0f !important;
}

.annotated-passage.color-pink {
    background-color: #e91e63 !important;
    color: #0d0d0f !important;
}

.annotated-passage.color-purple {
    background-color: #9c27b0 !important;
    color: #0d0d0f !important;
}

.annotated-passage.color-orange {
    background-color: #ff9800 !important;
    color: #0d0d0f !important;
}

/* ✅ Pin icon */
.annotated-passage .pin-icon {
    font-size: 0.65rem;
    margin-right: 2px;
}

/* ============================================================
   STATISTIQUES
   ============================================================ */
#statsFullscreen {
    padding: 10px 0;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 169, 110, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.stat-card .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.stat-card .stat-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e8d5a3;
    line-height: 1.4;
}

.stat-card .stat-label {
    font-size: 0.6rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.stat-card .stat-progress {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.stat-card .stat-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #c9a96e, #e8d5a3);
}

.stat-card.stat-card-success .stat-number {
    color: #4caf50;
}

.stat-card.stat-card-success .stat-progress-fill {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
}

.stat-card .stat-trend {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.5rem;
    color: #4caf50;
    background: rgba(76, 175, 80, 0.12);
    padding: 1px 6px;
    border-radius: 10px;
}

.stat-card .stat-trend.down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}


/* ============================================================
   HEATMAP
   ============================================================ */
.heatmap-matrix {
    display: block;
    padding: 10px 0;
    max-height: 72vh;
    overflow-y: auto;
    background: rgba(13, 13, 15, 0.3);
    border-radius: 12px;
}

.heatmap-matrix table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 1px;
    table-layout: fixed;
}

.heatmap-matrix td {
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.heatmap-matrix .cell-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-size: 0.55rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    min-height: 32px;
    min-width: 32px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.heatmap-matrix .cell-inner:hover {
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    border-color: rgba(255, 255, 255, 0.15);
}

.heatmap-matrix .cell-inner .cell-label {
    font-size: 0.5rem;
    font-weight: 700;
    opacity: 0.95;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0.3px;
}

.heatmap-matrix .cell-inner .cell-fav-indicator {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.45rem;
    color: #fbbf24;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.heatmap-matrix .cell-inner .cell-like-indicator {
    position: absolute;
    bottom: -2px;
    left: -2px;
    font-size: 0.4rem;
    color: #ef4444;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* Couleurs de la heatmap */
.heat-color-0 { background: #0a0a1a; }
.heat-color-1 { background: #150a3a; }
.heat-color-2 { background: #201a5a; }
.heat-color-3 { background: #2a1a6a; }
.heat-color-4 { background: #3a2a7a; }
.heat-color-5 { background: #4a3a8a; }
.heat-color-6 { background: #5a4a9a; }
.heat-color-7 { background: #6a5aaa; }
.heat-color-8 { background: #7a6aba; }
.heat-color-9 { background: #8a7aca; }
.heat-color-10 { background: #9a8ad0; }
.heat-color-11 { background: #aa9ad8; }
.heat-color-12 { background: #baaae0; }
.heat-color-13 { background: #caba88; }
.heat-color-14 { background: #daca58; }
.heat-color-15 { background: #eada30; }
.heat-color-16 { background: #eae830; }
.heat-color-17 { background: #eaf030; }
.heat-color-18 { background: #eaf830; }
.heat-color-19 { background: #eafc40; }
.heat-color-20 { background: #eafc60; }
.heat-color-21 { background: #eafc80; }
.heat-color-22 { background: #eafc9a; }
.heat-color-23 { background: #eafcba; }
.heat-color-24 { background: #fcfcda; }

.heatmap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 6px 0 12px 0;
}

.heatmap-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    color: #94a3b8;
}

.heatmap-stats .stat-item i {
    font-size: 0.7rem;
}

.heatmap-stats .stat-item .stat-value {
    font-weight: 600;
    color: #e8d5a3;
}

.heatmap-stats .stat-item .stat-label {
    font-size: 0.5rem;
    color: #64748b;
}

/* ============================================================
   STATISTIQUES
   ============================================================ */
#statsFullscreen {
    padding: 10px 0;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 169, 110, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.stat-card .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.stat-card .stat-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e8d5a3;
    line-height: 1.4;
}

.stat-card .stat-label {
    font-size: 0.6rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.stat-card .stat-progress {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.stat-card .stat-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #c9a96e, #e8d5a3);
}

.stat-card.stat-card-success .stat-number {
    color: #4caf50;
}

.stat-card.stat-card-success .stat-progress-fill {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
}

.stat-card .stat-trend {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.5rem;
    color: #4caf50;
    background: rgba(76, 175, 80, 0.12);
    padding: 1px 6px;
    border-radius: 10px;
}

.stat-card .stat-trend.down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* ===== HEATMAP TOOLTIP ===== */
.heatmap-tooltip {
    position: fixed;
    background: rgba(13, 13, 15, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(201, 169, 110, 0.2);
    border-radius: 14px;
    padding: 16px 18px;
    min-width: 260px;
    max-width: 340px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    visibility: hidden;
    max-height: 320px;
    overflow-y: auto;
}

.heatmap-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.heatmap-tooltip::-webkit-scrollbar {
    width: 3px;
}

.heatmap-tooltip::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.heatmap-tooltip::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 110, 0.3);
    border-radius: 3px;
}

.heatmap-tooltip .tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.heatmap-tooltip .tooltip-law-number {
    font-size: 0.55rem;
    font-weight: 600;
    color: #c9a96e;
    background: rgba(201, 169, 110, 0.1);
    padding: 1px 10px;
    border-radius: 12px;
}

.heatmap-tooltip .tooltip-volume {
    font-size: 0.45rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 8px;
    border-radius: 10px;
}

.heatmap-tooltip .tooltip-fav {
    font-size: 0.7rem;
    color: #fbbf24;
}

.heatmap-tooltip .tooltip-like {
    font-size: 0.7rem;
    color: #ef4444;
}

.heatmap-tooltip .tooltip-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e8d5a3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.heatmap-tooltip .tooltip-extract {
    font-size: 0.6rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.heatmap-tooltip .tooltip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 6px;
}

.heatmap-tooltip .tooltip-tag {
    font-size: 0.45rem;
    background: rgba(201, 169, 110, 0.1);
    color: #c9a96e;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid rgba(201, 169, 110, 0.08);
}

.heatmap-tooltip .tooltip-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 6px;
}

.heatmap-tooltip .tooltip-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.5rem;
    color: #94a3b8;
}

.heatmap-tooltip .tooltip-stat i {
    font-size: 0.55rem;
}

.heatmap-tooltip .tooltip-stat.stat-score {
    color: #c9a96e;
}

.heatmap-tooltip .tooltip-stat.stat-like {
    color: #ef4444;
}

.heatmap-tooltip .tooltip-stat.stat-fav {
    color: #fbbf24;
}

.heatmap-tooltip .tooltip-stat.stat-annotation {
    color: #60a5fa;
}

.heatmap-tooltip .tooltip-stat.stat-comment {
    color: #34d399;
}

.heatmap-tooltip .tooltip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.heatmap-tooltip .tooltip-action-btn {
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 3px;
}

.heatmap-tooltip .tooltip-action-btn:hover {
    background: rgba(201, 169, 110, 0.12);
    color: #c9a96e;
    border-color: rgba(201, 169, 110, 0.2);
}

.heatmap-tooltip .tooltip-action-btn.fav-btn.active {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.2);
}

.heatmap-tooltip .tooltip-action-btn.like-btn.active {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}


/* ============================================================
   STYLES POUR LE SÉLECTEUR DE COULEUR DANS LA SIDEBAR
   ============================================================ */

.note-color-selector {
    display: flex;
    gap: 4px;
    margin: 4px 0;
    flex-wrap: wrap;
}

.note-color-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border: 2px solid transparent;
}

.note-color-dot:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.note-color-dot.active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201,169,110,0.5);
}

.note-color-indicator {
    font-size: 0.55rem;
    color: #64748b;
    margin-right: 6px;
}

/* ============================================================
   STYLES POUR LE MODAL D'ANNOTATION SIMPLIFIÉ
   ============================================================ */

.modal-color-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-color-display .color-label {
    font-size: 0.65rem;
    color: #94a3b8;
}

.modal-color-display .color-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.modal-color-display .color-name {
    font-size: 0.6rem;
    color: #c9a96e;
    font-weight: 500;
}

.modal-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #e8d5a3;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.3s ease;
}

.modal-textarea:focus {
    outline: none;
    border-color: rgba(201, 169, 110, 0.4);
}

.modal-textarea::placeholder {
    color: #475569;
    font-style: italic;
}

.modal-btn-save {
    background: linear-gradient(135deg, #c9a96e, #b8924a);
    color: #0d0d0f;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(201, 169, 110, 0.3);
}

.modal-btn-save i {
    font-size: 0.6rem;
}

/* ============================================================
   STYLES POUR LE TOOLTIP DE LA HEATMAP
   ============================================================ */

.heatmap-tooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(13, 13, 15, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    max-width: 280px;
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: auto;
}

.heatmap-tooltip.visible {
    display: block;
    opacity: 1;
    visibility: visible;
}

.heatmap-tooltip .tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.heatmap-tooltip .tooltip-law-number {
    font-weight: 600;
    color: #c9a96e;
    font-size: 0.7rem;
}

.heatmap-tooltip .tooltip-volume {
    font-size: 0.55rem;
    color: #64748b;
}

.heatmap-tooltip .tooltip-title {
    font-size: 0.7rem;
    color: #e8d5a3;
    font-weight: 500;
    margin-bottom: 4px;
}

.heatmap-tooltip .tooltip-extract {
    font-size: 0.6rem;
    color: #94a3b8;
    line-height: 1.4;
    margin-bottom: 4px;
}

.heatmap-tooltip .tooltip-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.heatmap-tooltip .tooltip-tag {
    background: rgba(201, 169, 110, 0.12);
    color: #c9a96e;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.55rem;
}

.heatmap-tooltip .tooltip-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.heatmap-tooltip .tooltip-stat {
    font-size: 0.55rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 3px;
}

.heatmap-tooltip .tooltip-stat.stat-score {
    color: #c9a96e;
}

.heatmap-tooltip .tooltip-stat.stat-fav {
    color: #fbbf24;
}

.heatmap-tooltip .tooltip-stat.stat-like {
    color: #ef4444;
}

.heatmap-tooltip .tooltip-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.heatmap-tooltip .tooltip-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 8px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.5rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.heatmap-tooltip .tooltip-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.heatmap-tooltip .tooltip-action-btn.fav-btn.active {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.heatmap-tooltip .tooltip-action-btn.like-btn.active {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* ============================================================
   SÉLECTEUR DE COULEUR DANS LA SIDEBAR
   ============================================================ */

.sidebar-color-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.sidebar-color-picker .color-option {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar-color-picker .color-option:hover {
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.sidebar-color-picker .color-option.selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.4);
    transform: scale(1.1);
}

.sidebar-color-picker .color-option.yellow {
    background: #ffeb3b;
}

.sidebar-color-picker .color-option.green {
    background: #4caf50;
}

.sidebar-color-picker .color-option.blue {
    background: #2196f3;
}

.sidebar-color-picker .color-option.pink {
    background: #e91e63;
}

.sidebar-color-picker .color-option.purple {
    background: #9c27b0;
}

.sidebar-color-picker .color-option.orange {
    background: #ff9800;
}

.sidebar-color-picker .sidebar-color-label {
    font-size: 0.55rem;
    color: #64748b;
    margin-left: 4px;
}

/* Indicateur de couleur dans le header */
.sidebar-color-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: background 0.3s ease;
    flex-shrink: 0;
}


/* ============================================================
   NOM DE LA COULEUR DANS LE HEADER ET LE SÉLECTEUR
   ============================================================ */

/* Nom de la couleur à côté de l'indicateur dans le header */
#sidebarColorName {
    font-size: 0.55rem;
    color: #c9a96e;
    font-weight: 500;
    margin-left: 4px;
    transition: color 0.3s ease;
}

/* Nom de la couleur dans le sélecteur */
.sidebar-color-label {
    font-size: 0.6rem;
    color: #c9a96e;
    font-weight: 500;
    margin-left: 6px;
    background: rgba(201, 169, 110, 0.1);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid rgba(201, 169, 110, 0.15);
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
}

.sidebar-color-label:hover {
    background: rgba(201, 169, 110, 0.2);
}

/* Indicateur de couleur dans le header */
.sidebar-color-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: background 0.3s ease;
    flex-shrink: 0;
}



/* ============================================================
   HEATMAP - STYLES COMPLETS
   ============================================================ */

:root {
    --heatmap-bg: #0a0a0c;
    --heatmap-card: rgba(255, 255, 255, 0.01);
    --heatmap-border: rgba(255, 255, 255, 0.04);
    --heatmap-text: #e8d5a3;
    --heatmap-text-secondary: #94a3b8;
    --heatmap-text-muted: #64748b;
    --heatmap-accent: #f97316;
    --heatmap-gold: #c9a96e;
    --heatmap-radius: 12px;
    --gradient-primary: linear-gradient(135deg, rgba(249, 115, 22, 0.06), rgba(201, 169, 110, 0.03));
    --gradient-accent: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(201, 169, 110, 0.04));
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.005));
}

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */
#lawMapFullscreen {
    display: none;
    height: 100%;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

/* ============================================================
   HEADER
   ============================================================ */
.heatmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 12px 4px;
    background: var(--gradient-glass);
    border-bottom: 1px solid var(--heatmap-border);
    border-radius: 16px 16px 0 0;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
    backdrop-filter: blur(8px);
}

.heatmap-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.heatmap-icon-wrapper {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(249, 115, 22, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.heatmap-icon-wrapper i {
    color: var(--heatmap-accent);
    font-size: 0.95rem;
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.1));
}

.heatmap-title {
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #e8d5a3 30%, #c9a96e 70%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.heatmap-subtitle {
    font-size: 0.45rem;
    color: var(--heatmap-text-muted);
    letter-spacing: 1.5px;
    font-weight: 300;
    background: linear-gradient(90deg, #64748b, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.heatmap-badge {
    background: var(--gradient-accent);
    color: var(--heatmap-accent);
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 0.55rem;
    font-weight: 600;
    border: 1px solid rgba(249, 115, 22, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.heatmap-header-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.heatmap-btn {
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--heatmap-border);
    color: var(--heatmap-text-secondary);
    font-size: 0.55rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}

.heatmap-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--heatmap-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ---- BOUTON PLEIN ÉCRAN ---- */
.heatmap-btn-fullscreen {
    padding: 8px 20px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(201, 169, 110, 0.04));
    border: 1px solid rgba(249, 115, 22, 0.08);
    color: var(--heatmap-accent);
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 15px rgba(249, 115, 22, 0.05);
    letter-spacing: 0.3px;
}

.heatmap-btn-fullscreen:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(249, 115, 22, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.15);
}

.heatmap-btn-fullscreen.active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(249, 115, 22, 0.15);
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.1);
}

.heatmap-btn-fullscreen i {
    font-size: 0.8rem;
    margin-right: 6px;
}

/* ============================================================
   FILTRES
   ============================================================ */
.heatmap-filters {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-btn-full {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #94a3b8;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.filter-btn-full:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.filter-btn-full.active {
    background: rgba(201, 169, 110, 0.12);
    color: #c9a96e;
    border-color: rgba(201, 169, 110, 0.2);
}

/* ============================================================
   RECHERCHE
   ============================================================ */
.heatmap-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--heatmap-border);
    border-radius: 30px;
    padding: 2px 6px 2px 12px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.heatmap-search:focus-within {
    border-color: rgba(249, 115, 22, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}

.heatmap-search i {
    font-size: 0.5rem;
    color: var(--heatmap-text-muted);
}

.heatmap-search input {
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: var(--heatmap-text);
    font-size: 0.5rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    width: 90px;
    transition: width 0.3s ease;
}

.heatmap-search input:focus {
    width: 130px;
}

.heatmap-search input::placeholder {
    color: var(--heatmap-text-muted);
    opacity: 0.5;
}

/* ============================================================
   STATS
   ============================================================ */
.heatmap-stats {
    display: flex;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--heatmap-border);
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.005);
    border-radius: 12px;
    padding: 4px 14px;
    margin-bottom: 8px;
}

.heatmap-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.heatmap-stat-number {
    font-size: 0.85rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e8d5a3, #c9a96e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.heatmap-stat-label {
    font-size: 0.45rem;
    color: var(--heatmap-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================================================
   MATRICE
   ============================================================ */
.heatmap-matrix {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 8px 4px;
    min-height: 0;
    background: transparent;
    border-radius: var(--heatmap-radius);
}

.heatmap-matrix::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.heatmap-matrix::-webkit-scrollbar-track {
    background: transparent;
}

.heatmap-matrix::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.15), rgba(201, 169, 110, 0.08));
    border-radius: 3px;
}

/* ---- TABLE ---- */
.heatmap-matrix table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 2px;
    table-layout: fixed;
}

.heatmap-matrix td {
    padding: 2px;
    min-width: 36px;
    min-height: 36px;
    text-align: center;
    vertical-align: middle;
}

.heatmap-matrix .cell-inner {
    min-height: 34px;
    min-width: 34px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.04);
    user-select: none;
}

.heatmap-matrix .cell-inner .cell-label {
    font-size: 0.65rem;
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
}

.heatmap-matrix .cell-inner:hover {
    transform: scale(1.15);
    z-index: 10;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.12);
}

.heatmap-matrix .cell-empty {
    min-height: 34px;
    min-width: 34px;
    background: transparent;
}

/* ---- INDICATEURS ---- */
.heatmap-matrix .cell-inner .cell-fav-indicator {
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 0.5rem;
    color: #fbbf24;
    pointer-events: none;
}

.heatmap-matrix .cell-inner .cell-like-indicator {
    position: absolute;
    bottom: -3px;
    left: -3px;
    font-size: 0.45rem;
    color: #ef4444;
    pointer-events: none;
}

.heatmap-matrix .cell-inner .cell-notes-indicator {
    position: absolute;
    top: -3px;
    left: -3px;
    font-size: 0.45rem;
    color: #a78bfa;
    pointer-events: none;
}

.heatmap-matrix .cell-inner.is-favorite {
    border-color: rgba(251, 191, 36, 0.3);
}

.heatmap-matrix .cell-inner.is-liked {
    border-color: rgba(239, 68, 68, 0.3);
}

.heatmap-matrix .cell-inner.has-notes {
    border-color: rgba(167, 139, 250, 0.3);
}

/* ============================================================
   LÉGENDE
   ============================================================ */
.heatmap-legend {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--heatmap-border);
    margin-top: 4px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.005);
    border-radius: 8px;
}

.heatmap-legend span {
    font-size: 0.5rem;
    color: var(--heatmap-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.heatmap-legend .legend-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.heatmap-legend .legend-separator {
    color: var(--heatmap-border);
    opacity: 0.3;
}

/* ============================================================
   EMPTY / LOADING
   ============================================================ */
.heatmap-empty,
.heatmap-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--heatmap-text-muted);
    text-align: center;
    padding: 40px 20px;
}

.heatmap-empty i,
.heatmap-loading i {
    font-size: 2.5rem;
    color: #475569;
    margin-bottom: 10px;
    opacity: 0.15;
}

.heatmap-loading i {
    color: var(--heatmap-accent);
    opacity: 0.5;
    animation: spin 1s linear infinite;
}

.heatmap-empty h3 {
    font-size: 0.9rem;
    color: var(--heatmap-text-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}

.heatmap-empty p {
    font-size: 0.6rem;
    line-height: 1.6;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   COULEURS DE LA HEATMAP (24 niveaux)
   ============================================================ */
.heat-color-0 { background: #0a0a1a; color: #1a1a3a; }
.heat-color-1 { background: #0f0f2a; color: #2a2a4a; }
.heat-color-2 { background: #14143a; color: #3a3a5a; }
.heat-color-3 { background: #1a1a4a; color: #4a4a6a; }
.heat-color-4 { background: #20205a; color: #5a5a7a; }
.heat-color-5 { background: #26266a; color: #6a6a8a; }
.heat-color-6 { background: #2c2c7a; color: #7a7a9a; }
.heat-color-7 { background: #32328a; color: #8a8aaa; }
.heat-color-8 { background: #38389a; color: #9a9aba; }
.heat-color-9 { background: #3e3eaa; color: #aaaaca; }
.heat-color-10 { background: #4444ba; color: #babada; }
.heat-color-11 { background: #4a4aca; color: #cacaea; }
.heat-color-12 { background: #5a4aaa; color: #cacaaa; }
.heat-color-13 { background: #6a4a8a; color: #dadaba; }
.heat-color-14 { background: #7a4a6a; color: #eaeaca; }
.heat-color-15 { background: #8a4a4a; color: #fafada; }
.heat-color-16 { background: #9a4a3a; color: #fafaea; }
.heat-color-17 { background: #aa5a3a; color: #fafafa; }
.heat-color-18 { background: #ba6a3a; color: #ffffff; }
.heat-color-19 { background: #ca7a3a; color: #ffffff; }
.heat-color-20 { background: #da8a4a; color: #ffffff; }
.heat-color-21 { background: #ea9a5a; color: #0a0a1a; }
.heat-color-22 { background: #faaa6a; color: #0a0a1a; }
.heat-color-23 { background: #ffba7a; color: #0a0a1a; }

/* ============================================================
   TOOLTIP
   ============================================================ */
.heatmap-tooltip {
    position: fixed;
    background: rgba(13, 13, 15, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(201, 169, 110, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    max-width: 280px;
    min-width: 220px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    z-index: 99999;
    pointer-events: auto;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.heatmap-tooltip .tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.heatmap-tooltip .tooltip-law-number {
    font-weight: 600;
    color: var(--heatmap-gold);
    font-size: 0.7rem;
}

.heatmap-tooltip .tooltip-volume {
    font-size: 0.55rem;
    color: var(--heatmap-text-muted);
}

.heatmap-tooltip .tooltip-title {
    font-size: 0.7rem;
    color: #e8d5a3;
    font-weight: 500;
    margin-bottom: 4px;
}

.heatmap-tooltip .tooltip-extract {
    font-size: 0.6rem;
    color: #94a3b8;
    line-height: 1.4;
    margin-bottom: 4px;
}

.heatmap-tooltip .tooltip-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.heatmap-tooltip .tooltip-tag {
    background: rgba(201, 169, 110, 0.12);
    color: var(--heatmap-gold);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.55rem;
}

.heatmap-tooltip .tooltip-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.heatmap-tooltip .tooltip-stat {
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

.heatmap-tooltip .stat-score { color: var(--heatmap-gold); }
.heatmap-tooltip .stat-fav { color: #fbbf24; }
.heatmap-tooltip .stat-like { color: #ef4444; }
.heatmap-tooltip .stat-likes { color: #94a3b8; }
.heatmap-tooltip .stat-comments { color: #60a5fa; }
.heatmap-tooltip .stat-annotations { color: #a78bfa; }

.heatmap-tooltip .tooltip-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.heatmap-tooltip .tooltip-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 8px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.5rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.heatmap-tooltip .tooltip-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.heatmap-tooltip .tooltip-action-btn.active {
    background: rgba(201, 169, 110, 0.15);
    border-color: rgba(201, 169, 110, 0.3);
    color: var(--heatmap-gold);
}

.heatmap-tooltip .tooltip-action-btn.fav-btn.active {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.heatmap-tooltip .tooltip-action-btn.like-btn.active {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* ============================================================
   BOUTON PRINCIPAL
   ============================================================ */
#lawMapToggleBtn {
    position: relative;
}

#lawMapToggleBtn .badge-count {
    background: rgba(249, 115, 22, 0.2);
    color: var(--heatmap-accent);
    font-size: 0.55rem;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

#lawMapToggleBtn.active {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
    color: var(--heatmap-accent);
}

/* ============================================================
   MODE PLEIN ÉCRAN
   ============================================================ */


body.heatmap-fullscreen-active .main-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    background: #0d0d0f !important;
    padding: 16px 28px !important;
    overflow: auto !important;
}

body.heatmap-fullscreen-active #lawMapFullscreen {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: auto !important;
    position: relative !important;
    z-index: 99999 !important;
}

body.heatmap-fullscreen-active #lawMapFullscreen .heatmap-matrix {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding: 8px 4px !important;
    max-height: calc(100vh - 180px) !important;
    min-height: 0 !important;
    height: auto !important;
    scroll-behavior: smooth !important;
}

body.heatmap-fullscreen-active #volumeContentWrapper {
    display: none !important;
}

body.heatmap-fullscreen-active .top-bar,
body.heatmap-fullscreen-active .pagination-section,
body.heatmap-fullscreen-active .nav-markers,
body.heatmap-fullscreen-active .progress-counter,
body.heatmap-fullscreen-active .floating-hamburger,
body.heatmap-fullscreen-active .notes-sidebar {
    display: none !important;
}

/* ---- ANIMATION PLEIN ÉCRAN ---- */
body.heatmap-fullscreen-active .main-content {
    animation: heatmapFullscreenIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes heatmapFullscreenIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .heatmap-matrix td {
        min-width: 30px;
        min-height: 30px;
    }
    .heatmap-matrix .cell-inner {
        min-height: 28px;
        min-width: 28px;
        font-size: 0.6rem;
    }
    .heatmap-matrix .cell-inner .cell-label {
        font-size: 0.55rem;
    }
    body.heatmap-fullscreen-active .heatmap-matrix {
        max-height: calc(100vh - 170px) !important;
    }
    .heatmap-header {
        padding: 6px 4px 8px 4px;
    }
    .heatmap-header-right {
        gap: 4px;
    }
    .heatmap-search input {
        width: 70px;
    }
    .heatmap-search input:focus {
        width: 100px;
    }
}

@media (max-width: 768px) {
    .heatmap-matrix td {
        min-width: 24px;
        min-height: 24px;
        padding: 1px;
    }
    .heatmap-matrix .cell-inner {
        min-height: 22px;
        min-width: 22px;
        font-size: 0.5rem;
    }
    .heatmap-matrix .cell-inner .cell-label {
        font-size: 0.45rem;
    }
    .heatmap-matrix::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
    body.heatmap-fullscreen-active .heatmap-matrix {
        max-height: calc(100vh - 160px) !important;
    }
    .heatmap-legend {
        gap: 8px;
        padding: 6px 12px;
    }
    .heatmap-legend span {
        font-size: 0.45rem;
    }
    .heatmap-stats {
        gap: 10px;
        padding: 4px 10px;
    }
    .heatmap-stat-number {
        font-size: 0.7rem;
    }
    .heatmap-title {
        font-size: 0.85rem;
    }
    .heatmap-btn-fullscreen {
        padding: 6px 14px !important;
        font-size: 0.55rem !important;
    }
    .filter-btn-full {
        padding: 3px 8px;
        font-size: 0.5rem;
    }
    .heatmap-search input {
        width: 60px;
        font-size: 0.45rem;
    }
    .heatmap-search input:focus {
        width: 80px;
    }
}

@media (max-width: 480px) {
    .heatmap-matrix td {
        min-width: 18px;
        min-height: 18px;
        padding: 1px;
    }
    .heatmap-matrix .cell-inner {
        min-height: 16px;
        min-width: 16px;
        font-size: 0.4rem;
        border-radius: 4px;
    }
    .heatmap-matrix .cell-inner .cell-label {
        font-size: 0.35rem;
    }
    body.heatmap-fullscreen-active .heatmap-matrix {
        max-height: calc(100vh - 150px) !important;
    }
    .heatmap-matrix .cell-inner .cell-fav-indicator,
    .heatmap-matrix .cell-inner .cell-like-indicator,
    .heatmap-matrix .cell-inner .cell-notes-indicator {
        display: none !important;
    }
    .heatmap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .heatmap-header-right {
        width: 100%;
        justify-content: flex-start;
    }
    .heatmap-filters {
        flex-wrap: wrap;
    }
}

/* ============================================================
   FAVORIS PREMIUM
   ============================================================ */

:root {
    --fav-bg: #0a0a0c;
    --fav-card: rgba(255, 255, 255, 0.01);
    --fav-border: rgba(255, 255, 255, 0.04);
    --fav-text: #e8d5a3;
    --fav-text-secondary: #94a3b8;
    --fav-text-muted: #64748b;
    --fav-accent: #fbbf24;
    --fav-gold: #c9a96e;
    --fav-radius: 12px;
    --gradient-primary: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(201, 169, 110, 0.03));
    --gradient-accent: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(201, 169, 110, 0.04));
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.005));
}

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */
#favoritesFullscreen {
    display: none;
    height: 100%;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

/* ============================================================
   HEADER
   ============================================================ */
.favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 12px 4px;
    background: var(--gradient-glass);
    border-bottom: 1px solid var(--fav-border);
    border-radius: 16px 16px 0 0;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
    backdrop-filter: blur(8px);
}

.favorites-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.favorites-icon-wrapper {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(251, 191, 36, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.favorites-icon-wrapper i {
    color: var(--fav-accent);
    font-size: 0.95rem;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.1));
}

.favorites-title {
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #e8d5a3 30%, #c9a96e 70%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.favorites-subtitle {
    font-size: 0.45rem;
    color: var(--fav-text-muted);
    letter-spacing: 1.5px;
    font-weight: 300;
    background: linear-gradient(90deg, #64748b, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.favorites-badge {
    background: var(--gradient-accent);
    color: var(--fav-accent);
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 0.55rem;
    font-weight: 600;
    border: 1px solid rgba(251, 191, 36, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.favorites-header-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.favorites-btn {
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--fav-border);
    color: var(--fav-text-secondary);
    font-size: 0.55rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}

.favorites-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--fav-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ---- BOUTON PLEIN ÉCRAN ---- */
.favorites-btn-fullscreen {
    padding: 8px 20px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(201, 169, 110, 0.04));
    border: 1px solid rgba(251, 191, 36, 0.08);
    color: var(--fav-accent);
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 15px rgba(251, 191, 36, 0.05);
    letter-spacing: 0.3px;
}

.favorites-btn-fullscreen:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(251, 191, 36, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(251, 191, 36, 0.15);
}

.favorites-btn-fullscreen.active {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(251, 191, 36, 0.15);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.1);
}

.favorites-btn-fullscreen i {
    font-size: 0.8rem;
    margin-right: 6px;
}

/* ============================================================
   FILTRES
   ============================================================ */
.favorites-filters {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-btn-fav {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #94a3b8;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.filter-btn-fav:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.filter-btn-fav.active {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.2);
}

/* ============================================================
   RECHERCHE
   ============================================================ */
.favorites-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--fav-border);
    border-radius: 30px;
    padding: 2px 6px 2px 12px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.favorites-search:focus-within {
    border-color: rgba(251, 191, 36, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}

.favorites-search i {
    font-size: 0.5rem;
    color: var(--fav-text-muted);
}

.favorites-search input {
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: var(--fav-text);
    font-size: 0.5rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    width: 90px;
    transition: width 0.3s ease;
}

.favorites-search input:focus {
    width: 130px;
}

.favorites-search input::placeholder {
    color: var(--fav-text-muted);
    opacity: 0.5;
}

/* ============================================================
   STATS
   ============================================================ */
.favorites-stats {
    display: flex;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--fav-border);
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.005);
    border-radius: 12px;
    padding: 4px 14px;
    margin-bottom: 8px;
}

.favorites-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.favorites-stat-number {
    font-size: 0.85rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e8d5a3, #c9a96e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.favorites-stat-label {
    font-size: 0.45rem;
    color: var(--fav-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================================================
   GRILLE DES FAVORIS
   ============================================================ */
.favorites-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 4px 4px 8px 4px;
    align-content: start;
}

.favorites-grid::-webkit-scrollbar {
    width: 4px;
}

.favorites-grid::-webkit-scrollbar-track {
    background: transparent;
}

.favorites-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.15), rgba(201, 169, 110, 0.08));
    border-radius: 3px;
}

/* ============================================================
   CARTE FAVORI
   ============================================================ */
.fav-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--fav-border);
    border-radius: var(--fav-radius);
    padding: 14px 16px 12px 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(4px);
}

.fav-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(251, 191, 36, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.fav-card .fav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.fav-card .fav-number-badge {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--fav-gold);
    background: rgba(201, 169, 110, 0.12);
    padding: 2px 10px;
    border-radius: 20px;
}

.fav-card .fav-volume-badge {
    font-size: 0.45rem;
    color: var(--fav-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 12px;
}

.fav-card .fav-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fav-text);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.fav-card .fav-extract {
    font-size: 0.6rem;
    color: var(--fav-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    margin-top: 2px;
}

.fav-card .fav-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.fav-card .fav-tag {
    font-size: 0.45rem;
    background: rgba(201, 169, 110, 0.08);
    color: var(--fav-gold);
    padding: 1px 8px;
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 110, 0.06);
    transition: all 0.2s ease;
}

.fav-card .fav-tag:hover {
    background: rgba(201, 169, 110, 0.15);
}

.fav-card .fav-stats-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.fav-card .fav-stat {
    font-size: 0.5rem;
    color: var(--fav-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.fav-card .fav-stat i {
    font-size: 0.5rem;
}

.fav-card .fav-status {
    font-size: 0.5rem;
    color: var(--fav-accent);
    display: block;
    margin-top: 6px;
    font-weight: 500;
}

/* ---- BOUTON RETIRER ---- */
.fav-card .fav-remove-star {
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--fav-accent);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    opacity: 0.3;
    background: none;
    border: none;
    padding: 4px;
}

.fav-card .fav-remove-star:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.3));
}

/* ---- STATS SPÉCIFIQUES ---- */
.fav-card .fav-stat.stat-annotation {
    color: #60a5fa;
}

.fav-card .fav-stat.stat-like {
    color: #ef4444;
}

.fav-card .fav-stat.stat-comment {
    color: #60a5fa;
}

/* ============================================================
   EMPTY / LOADING
   ============================================================ */
.favorites-empty,
.favorites-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--fav-text-muted);
    text-align: center;
}

.favorites-empty i,
.favorites-loading i {
    font-size: 2.5rem;
    color: #475569;
    margin-bottom: 10px;
    opacity: 0.15;
}

.favorites-loading i {
    color: var(--fav-accent);
    opacity: 0.5;
    animation: spin 1s linear infinite;
}

.favorites-empty h3 {
    font-size: 0.9rem;
    color: var(--fav-text-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}

.favorites-empty p {
    font-size: 0.6rem;
    line-height: 1.6;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   BOUTON PRINCIPAL
   ============================================================ */
#favoritesToggleBtn {
    position: relative;
}

#favoritesToggleBtn .badge-count {
    background: rgba(251, 191, 36, 0.2);
    color: var(--fav-accent);
    font-size: 0.55rem;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

#favoritesToggleBtn.active {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--fav-accent);
}

/* ============================================================
   MODE PLEIN ÉCRAN
   ============================================================ */


body.favorites-fullscreen-active .main-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    background: #0d0d0f !important;
    padding: 16px 28px !important;
    overflow: auto !important;
}

body.favorites-fullscreen-active #favoritesFullscreen {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: auto !important;
    position: relative !important;
    z-index: 99999 !important;
}

body.favorites-fullscreen-active #favoritesFullscreen .favorites-grid {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 180px) !important;
    min-height: 0 !important;
    height: auto !important;
}

body.favorites-fullscreen-active #volumeContentWrapper {
    display: none !important;
}

body.favorites-fullscreen-active .top-bar,
body.favorites-fullscreen-active .pagination-section,
body.favorites-fullscreen-active .nav-markers,
body.favorites-fullscreen-active .progress-counter,
body.favorites-fullscreen-active .floating-hamburger,
body.favorites-fullscreen-active .notes-sidebar {
    display: none !important;
}

/* ---- ANIMATION PLEIN ÉCRAN ---- */
body.favorites-fullscreen-active .main-content {
    animation: favoritesFullscreenIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes favoritesFullscreenIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .favorites-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 10px;
    }
    body.favorites-fullscreen-active .favorites-grid {
        max-height: calc(100vh - 170px) !important;
    }
}

@media (max-width: 768px) {
    .favorites-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 8px;
    }
    .favorites-grid::-webkit-scrollbar {
        width: 3px;
    }
    body.favorites-fullscreen-active .favorites-grid {
        max-height: calc(100vh - 160px) !important;
    }
    .favorites-header {
        padding: 6px 4px 8px 4px;
    }
    .favorites-header-right {
        gap: 4px;
    }
    .favorites-title {
        font-size: 0.85rem;
    }
    .favorites-btn-fullscreen {
        padding: 6px 14px !important;
        font-size: 0.55rem !important;
    }
    .filter-btn-fav {
        padding: 3px 8px;
        font-size: 0.5rem;
    }
    .favorites-search input {
        width: 60px;
        font-size: 0.45rem;
    }
    .favorites-search input:focus {
        width: 80px;
    }
    .favorites-stats {
        gap: 10px;
        padding: 4px 10px;
    }
    .favorites-stat-number {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .favorites-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    body.favorites-fullscreen-active .favorites-grid {
        max-height: calc(100vh - 150px) !important;
    }
    .fav-card {
        padding: 10px 12px;
    }
    .fav-card .fav-title {
        font-size: 0.7rem;
    }
    .fav-card .fav-extract {
        font-size: 0.5rem;
    }
    .favorites-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .favorites-header-right {
        width: 100%;
        justify-content: flex-start;
    }
    .favorites-filters {
        flex-wrap: wrap;
    }
}

/* ============================================================
   STATISTIQUES PREMIUM - COULEURS STANDARD MONDIAL
   ============================================================ */

:root {
    --stats-bg: #0a0a0c;
    --stats-card: rgba(255, 255, 255, 0.01);
    --stats-border: rgba(255, 255, 255, 0.04);
    --stats-text: #e8d5a3;
    --stats-text-secondary: #94a3b8;
    --stats-text-muted: #64748b;
    --stats-radius: 12px;
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.005));
    
    /* Couleurs statistiques standard mondial */
    --stats-blue: #3b82f6;
    --stats-blue-light: rgba(59, 130, 246, 0.15);
    --stats-green: #22c55e;
    --stats-green-light: rgba(34, 197, 94, 0.15);
    --stats-gold: #fbbf24;
    --stats-gold-light: rgba(251, 191, 36, 0.15);
    --stats-purple: #a78bfa;
    --stats-purple-light: rgba(167, 139, 250, 0.15);
    --stats-red: #ef4444;
    --stats-red-light: rgba(239, 68, 68, 0.15);
    --stats-orange: #f97316;
    --stats-orange-light: rgba(249, 115, 22, 0.15);
    --stats-primary: #c9a96e;
    --stats-primary-light: rgba(201, 169, 110, 0.15);
}

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */
#statsFullscreen {
    display: none;
    height: 100%;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

/* ============================================================
   HEADER
   ============================================================ */
.stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 12px 4px;
    background: var(--gradient-glass);
    border-bottom: 1px solid var(--stats-border);
    border-radius: 16px 16px 0 0;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
    backdrop-filter: blur(8px);
}

.stats-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-icon-wrapper {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.06), rgba(59, 130, 246, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201, 169, 110, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.stats-icon-wrapper i {
    color: var(--stats-primary);
    font-size: 0.95rem;
    filter: drop-shadow(0 0 8px rgba(201, 169, 110, 0.1));
}

.stats-title {
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #e8d5a3 30%, #c9a96e 70%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.stats-subtitle {
    font-size: 0.45rem;
    color: var(--stats-text-muted);
    letter-spacing: 1.5px;
    font-weight: 300;
    background: linear-gradient(90deg, #64748b, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(201, 169, 110, 0.04));
    color: var(--stats-blue);
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 0.5rem;
    font-weight: 500;
    border: 1px solid rgba(59, 130, 246, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.stats-header-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.stats-btn {
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--stats-border);
    color: var(--stats-text-secondary);
    font-size: 0.55rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}

.stats-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--stats-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ---- BOUTON PLEIN ÉCRAN ---- */
.stats-btn-fullscreen {
    padding: 8px 20px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(201, 169, 110, 0.04));
    border: 1px solid rgba(59, 130, 246, 0.08);
    color: var(--stats-blue);
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 15px rgba(59, 130, 246, 0.05);
    letter-spacing: 0.3px;
}

.stats-btn-fullscreen:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.15);
}

.stats-btn-fullscreen.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(59, 130, 246, 0.15);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.stats-btn-fullscreen i {
    font-size: 0.8rem;
    margin-right: 6px;
}

/* ============================================================
   GRILLE DES STATS
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

/* ---- CARTE STAT ---- */
.stat-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 10px 8px 8px 8px;
    border: 1px solid var(--stats-border);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.08);
}

.stat-card .stat-icon {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.stat-card .stat-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--stats-text);
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.45rem;
    color: var(--stats-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

.stat-card .stat-progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.stat-card .stat-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- COULEURS STATISTIQUES STANDARD ---- */

/* Primary (Or) */
.stat-card-primary .stat-number { color: var(--stats-primary); }
.stat-card-primary .stat-progress-fill {
    background: linear-gradient(90deg, #c9a96e, #b8924a);
}

/* Blue */
.stat-card-blue .stat-number { color: var(--stats-blue); }
.stat-card-blue .stat-progress-fill {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}
.stat-card-blue:hover {
    border-color: rgba(59, 130, 246, 0.2);
}

/* Green */
.stat-card-green .stat-number { color: var(--stats-green); }
.stat-card-green .stat-progress-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}
.stat-card-green:hover {
    border-color: rgba(34, 197, 94, 0.2);
}

/* Gold */
.stat-card-gold .stat-number { color: var(--stats-gold); }
.stat-card-gold .stat-progress-fill {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.stat-card-gold:hover {
    border-color: rgba(251, 191, 36, 0.2);
}

/* Purple */
.stat-card-purple .stat-number { color: var(--stats-purple); }
.stat-card-purple .stat-progress-fill {
    background: linear-gradient(90deg, #a78bfa, #7c3aed);
}
.stat-card-purple:hover {
    border-color: rgba(167, 139, 250, 0.2);
}

/* Success (Vert) */
.stat-card-success .stat-number { color: var(--stats-green); }
.stat-card-success .stat-progress-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}
.stat-card-success:hover {
    border-color: rgba(34, 197, 94, 0.2);
}

/* Red */
.stat-card-red .stat-number { color: var(--stats-red); }
.stat-card-red .stat-progress-fill {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}
.stat-card-red:hover {
    border-color: rgba(239, 68, 68, 0.2);
}

/* Orange */
.stat-card-orange .stat-number { color: var(--stats-orange); }
.stat-card-orange .stat-progress-fill {
    background: linear-gradient(90deg, #f97316, #ea580c);
}
.stat-card-orange:hover {
    border-color: rgba(249, 115, 22, 0.2);
}

/* ============================================================
   GRAPHIQUES
   ============================================================ */
.stats-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.chart-container {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 10px 12px 8px 12px;
    border: 1px solid var(--stats-border);
}

.chart-container-full {
    grid-column: 1 / -1;
    margin-bottom: 6px;
}

.chart-title {
    font-size: 0.6rem;
    color: var(--stats-primary);
    margin-bottom: 4px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.chart-title i {
    margin-right: 4px;
    opacity: 0.7;
}

.chart-wrapper {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chart-wrapper-small {
    height: 120px;
}

.chart-loading {
    color: var(--stats-text-muted);
    font-size: 0.55rem;
}

/* ---- Canvas dans les graphiques ---- */
.chart-wrapper canvas {
    max-width: 100%;
    max-height: 100%;
}

/* ============================================================
   FOOTER - PROGRESSION GLOBALE
   ============================================================ */
.stats-footer {
    margin-top: 4px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(201, 169, 110, 0.04));
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.stats-footer .footer-label {
    font-size: 0.5rem;
    color: var(--stats-text-muted);
}

.stats-footer .footer-label i {
    margin-right: 4px;
    color: var(--stats-blue);
}

.stats-footer .footer-value {
    font-size: 0.7rem;
    color: var(--stats-primary);
    font-weight: 700;
}

/* ============================================================
   BOUTON PRINCIPAL
   ============================================================ */
#statsToggleBtn {
    position: relative;
}

#statsToggleBtn.active {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--stats-blue);
}

/* ============================================================
   MODE PLEIN ÉCRAN
   ============================================================ */

body.stats-fullscreen-active .main-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    background: #0d0d0f !important;
    padding: 16px 28px !important;
    overflow: hidden !important;
}

body.stats-fullscreen-active #statsFullscreen {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 99999 !important;
}

body.stats-fullscreen-active #statsFullscreen .stats-grid {
    flex-shrink: 0 !important;
}

body.stats-fullscreen-active #statsFullscreen .stats-charts {
    flex-shrink: 0 !important;
}

body.stats-fullscreen-active #statsFullscreen .chart-container-full {
    flex-shrink: 0 !important;
}

body.stats-fullscreen-active #volumeContentWrapper {
    display: none !important;
}

body.stats-fullscreen-active .top-bar,
body.stats-fullscreen-active .pagination-section,
body.stats-fullscreen-active .nav-markers,
body.stats-fullscreen-active .progress-counter,
body.stats-fullscreen-active .floating-hamburger,
body.stats-fullscreen-active .notes-sidebar {
    display: none !important;
}

/* ---- ANIMATION PLEIN ÉCRAN ---- */
body.stats-fullscreen-active .main-content {
    animation: statsFullscreenIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes statsFullscreenIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .stats-charts {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .stat-card {
        padding: 6px 4px;
    }
    
    .stat-card .stat-number {
        font-size: 0.9rem;
    }
    
    .stat-card .stat-icon {
        font-size: 1rem;
    }
    
    .chart-wrapper {
        height: 130px;
    }
    
    .chart-wrapper-small {
        height: 100px;
    }
    
    .stats-header {
        padding: 6px 4px 8px 4px;
    }
    
    .stats-header-right {
        gap: 4px;
    }
    
    .stats-title {
        font-size: 0.85rem;
    }
    
    .stats-btn-fullscreen {
        padding: 6px 14px !important;
        font-size: 0.55rem !important;
    }
    
    .stats-footer {
        padding: 4px 10px;
    }
    
    .stats-footer .footer-value {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    
    .stat-card {
        padding: 4px 4px 6px 4px;
        border-radius: 6px;
    }
    
    .stat-card .stat-number {
        font-size: 0.8rem;
    }
    
    .stat-card .stat-icon {
        font-size: 0.9rem;
    }
    
    .stat-card .stat-label {
        font-size: 0.4rem;
    }
    
    .chart-wrapper {
        height: 110px;
    }
    
    .chart-wrapper-small {
        height: 90px;
    }
    
    .chart-title {
        font-size: 0.5rem;
    }
    
    .stats-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .stats-header-right {
        width: 100%;
        justify-content: flex-start;
    }
    
    .stats-badge {
        font-size: 0.45rem;
        padding: 1px 8px;
    }
}

/* ============================================================
   IMMERSIVE MODE - OUVERTURE FADE UNIQUEMENT
   VERSION SIMPLIFIÉE
   ============================================================ */

/* ---- OVERLAY - FOND SOMBRE ---- */
.immersive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: none;
    background: #0d0d12;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    background-image:
        radial-gradient(ellipse at 25% 20%, rgba(201, 169, 110, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 80%, rgba(167, 139, 250, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 215, 150, 0.02) 0%, transparent 60%);
}

.immersive-overlay.active {
    display: block !important;
    opacity: 1;
}

/* ---- PAPIER FLOTTANT - TRÈS SUBTIL ---- */
.immersive-paper-layer {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(201, 169, 110, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(167, 139, 250, 0.04) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 30%, rgba(184, 156, 106, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 80%, rgba(139, 106, 61, 0.03) 0%, transparent 30%),
        radial-gradient(ellipse at 85% 20%, rgba(201, 169, 110, 0.02) 0%, transparent 25%);
    transition: opacity 1.8s ease-in-out 0.3s;
}

.immersive-overlay.active .immersive-paper-layer {
    opacity: 0.12;
}

.immersive-paper-layer-2 {
    position: fixed;
    top: -15%;
    left: -5%;
    width: 130%;
    height: 130%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(ellipse at 60% 30%, rgba(201, 169, 110, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 20% 70%, rgba(167, 139, 250, 0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 80%, rgba(184, 156, 106, 0.04) 0%, transparent 30%);
    transition: opacity 2s ease-in-out 0.5s;
}

.immersive-overlay.active .immersive-paper-layer-2 {
    opacity: 0.06;
}

.immersive-paper-layer-3 {
    position: fixed;
    top: -5%;
    left: -15%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(ellipse at 40% 50%, rgba(201, 169, 110, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(139, 106, 61, 0.02) 0%, transparent 40%);
    transition: opacity 2.2s ease-in-out 0.7s;
}

.immersive-overlay.active .immersive-paper-layer-3 {
    opacity: 0.04;
}

/* ---- TEXTURE PAPIER ---- */
.immersive-paper-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(184,156,106,0.02) 3px, rgba(184,156,106,0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(184,156,106,0.015) 4px, rgba(184,156,106,0.015) 5px),
        repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(139,106,61,0.015) 12px, rgba(139,106,61,0.015) 13px),
        repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(139,106,61,0.01) 15px, rgba(139,106,61,0.01) 16px);
}

/* ---- IMPERFECTIONS ---- */
.immersive-paper-flaws {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(184,156,106,0.05) 0%, transparent 20%),
        radial-gradient(ellipse at 80% 70%, rgba(139,106,61,0.03) 0%, transparent 15%),
        radial-gradient(ellipse at 50% 85%, rgba(184,156,106,0.04) 0%, transparent 12%),
        radial-gradient(circle at 30% 60%, rgba(139,106,61,0.02) 0%, transparent 4px),
        radial-gradient(circle at 70% 40%, rgba(184,156,106,0.02) 0%, transparent 3px);
}

/* ---- PARTICULES DE POUSSIÈRE ---- */
.immersive-dust {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.immersive-dust-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(184, 156, 106, 0.04);
    animation: dustFloat 40s ease-in-out infinite;
    opacity: 0;
    will-change: transform, opacity;
}

.immersive-dust-particle.size-1 { width: 1px; height: 1px; }
.immersive-dust-particle.size-2 { width: 2px; height: 2px; }
.immersive-dust-particle.size-3 { width: 3px; height: 3px; }

@keyframes dustFloat {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    20% { opacity: 0.3; }
    50% { opacity: 0.6; }
    80% { opacity: 0.3; }
    100% {
        transform: translate3d(var(--dx, 30px), var(--dy, -40px), 0);
        opacity: 0;
    }
}

/* ---- CONTENU DU LIVRE - FADE UNIQUEMENT ---- */
.immersive-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px 60px 100px 60px;
    background: transparent;
    scroll-behavior: smooth;
    z-index: 1;
}

.immersive-content .immersive-book {
    max-width: 96%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    color: #e2e8f0;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease-in-out 0.4s;
}

.immersive-overlay.active .immersive-content .immersive-book {
    opacity: 1;
}

/* ---- SCROLLBAR ---- */
.immersive-content::-webkit-scrollbar {
    width: 3px;
}
.immersive-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
}
.immersive-content::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 110, 0.15);
    border-radius: 3px;
}

/* ---- TYPOGRAPHIE - AUCUNE ANIMATION, SAUF FADE ---- */
.immersive-content .immersive-book .volume-title {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #e8d5a3 0%, #c9a96e 50%, #e8d5a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-bottom: 0.5rem;
}

.immersive-content .immersive-book .volume-number {
    display: inline-block;
    background: rgba(201, 169, 110, 0.08);
    padding: 4px 18px;
    border-radius: 30px;
    font-size: 0.7rem;
    color: #c9a96e;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    border: 1px solid rgba(201, 169, 110, 0.04);
}

.immersive-content .immersive-book .volume-subtitle {
    color: #94a3b8;
    font-size: 1.2rem;
    text-align: center;
    opacity: 0.7;
    margin-bottom: 2rem;
}

.immersive-content .immersive-book .law-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #c9a96e;
    margin: 30px 0 12px 0;
    border-bottom: 1px solid rgba(201, 169, 110, 0.06);
    padding-bottom: 4px;
}

.immersive-content .immersive-book .chapter {
    font-size: 1.8rem;
    font-weight: 700;
    color: #c9a96e;
    margin: 35px 0 16px 0;
    padding-left: 20px;
    border-left: 4px solid rgba(201, 169, 110, 0.15);
}

.immersive-content .immersive-book .subchapter {
    font-size: 1.3rem;
    font-weight: 600;
    color: #e8d5a3;
    margin: 22px 0 12px 0;
}

.immersive-content .immersive-book p {
    font-size: 1.1rem;
    line-height: 2;
    color: #cbd5e1;
    margin-bottom: 1.2rem;
}

.immersive-content .immersive-book ul,
.immersive-content .immersive-book ol {
    color: #cbd5e1;
    margin: 8px 0 14px 24px;
    font-size: 1.05rem;
    line-height: 2;
}

.immersive-content .immersive-book .insight-box {
    background: rgba(201, 169, 110, 0.03);
    border-left: 4px solid rgba(201, 169, 110, 0.15);
    padding: 18px 24px;
    margin: 20px 0;
}

.immersive-content .immersive-book .insight-box p {
    color: #94a3b8;
}

/* ---- BARRE DE PROGRESSION ---- */
.immersive-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.02);
    z-index: 1000001;
}

.immersive-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #c9a96e, #e8d5a3);
    width: 0%;
    transition: width 0.8s ease-in-out;
}

/* ---- CONTROLES - FADE UNIQUEMENT ---- */
.immersive-controls {
    position: fixed;
    top: 30px;
    right: 40px;
    display: flex;
    gap: 12px;
    z-index: 1000000;
    opacity: 0;
    transition: opacity 1.2s ease-in-out 0.8s;
}

.immersive-overlay.active .immersive-controls {
    opacity: 1;
}

.immersive-controls .ctrl-btn {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 50px;
    color: #94a3b8;
    padding: 10px 20px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.immersive-controls .ctrl-btn:hover {
    background: rgba(30, 30, 38, 0.8);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.immersive-controls .ctrl-btn.ctrl-speech {
    color: #a78bfa;
}
.immersive-controls .ctrl-btn.ctrl-speech.active {
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
}
.immersive-controls .ctrl-btn.ctrl-close {
    color: #64748b;
}
.immersive-controls .ctrl-btn.ctrl-close:hover {
    background: rgba(239, 68, 68, 0.04);
    color: #ef4444;
}

/* ---- INDICATEUR DE POSITION ---- */
.immersive-position {
    position: fixed;
    bottom: 40px;
    left: 94%;
    transform: translateX(-50%);
    z-index: 1000000;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.15);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 1.5s ease-in-out 1.2s;
}

.immersive-overlay.active .immersive-position {
    opacity: 1;
}

.immersive-position .pos-current {
    color: #c9a96e;
    font-weight: 500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .immersive-content {
        padding: 30px 40px 80px 40px;
    }
    .immersive-content .immersive-book .volume-title {
        font-size: 2.4rem;
    }
    .immersive-content .immersive-book .law-number {
        font-size: 1.3rem;
    }
    .immersive-content .immersive-book .chapter {
        font-size: 1.5rem;
    }
    .immersive-content .immersive-book p {
        font-size: 1rem;
    }
    .immersive-position {
        left: 92%;
        font-size: 0.55rem;
    }
}

@media (max-width: 768px) {
    .immersive-content {
        padding: 20px 24px 80px 24px;
    }
    .immersive-content .immersive-book .volume-title {
        font-size: 2rem;
    }
    .immersive-content .immersive-book .law-number {
        font-size: 1.1rem;
    }
    .immersive-content .immersive-book .chapter {
        font-size: 1.3rem;
    }
    .immersive-content .immersive-book .subchapter {
        font-size: 1rem;
    }
    .immersive-content .immersive-book p {
        font-size: 0.9rem;
        line-height: 1.9;
    }
    .immersive-content .immersive-book ul,
    .immersive-content .immersive-book ol {
        font-size: 0.9rem;
    }

    .immersive-controls {
        top: 20px;
        right: 20px;
        gap: 8px;
    }
    .immersive-controls .ctrl-btn {
        padding: 8px 14px;
        font-size: 0.6rem;
    }
    .immersive-controls .ctrl-btn .btn-label {
        display: none;
    }

    .immersive-position {
        left: 88%;
        font-size: 0.5rem;
        bottom: 30px;
    }
}

@media (max-width: 480px) {
    .immersive-content {
        padding: 16px 16px 70px 16px;
    }
    .immersive-content .immersive-book .volume-title {
        font-size: 1.6rem;
    }
    .immersive-content .immersive-book .volume-number {
        font-size: 0.5rem;
        padding: 2px 10px;
    }
    .immersive-content .immersive-book .volume-subtitle {
        font-size: 0.85rem;
    }
    .immersive-content .immersive-book .law-number {
        font-size: 0.95rem;
        flex-wrap: wrap;
    }
    .immersive-content .immersive-book .chapter {
        font-size: 1.1rem;
        padding-left: 12px;
    }
    .immersive-content .immersive-book p {
        font-size: 0.8rem;
        line-height: 1.8;
    }
    .immersive-content .immersive-book ul,
    .immersive-content .immersive-book ol {
        font-size: 0.8rem;
        margin-left: 16px;
    }
    .immersive-content .immersive-book .insight-box {
        padding: 12px 16px;
    }
    .immersive-content .immersive-book .insight-box p {
        font-size: 0.75rem;
    }

    .immersive-controls {
        top: 16px;
        right: 12px;
        gap: 6px;
    }
    .immersive-controls .ctrl-btn {
        padding: 6px 10px;
        font-size: 0.45rem;
        border-radius: 40px;
    }
    .immersive-controls .ctrl-btn i {
        font-size: 0.6rem;
    }

    .immersive-position {
        left: 80%;
        font-size: 0.4rem;
        bottom: 20px;
    }
}

/* ============================================================
   MODULE 3: PAGINATION - STYLE BOUTON QUITTER
   ============================================================ */

/* Conteneur de pagination - même hauteur que btn-logout */
.pagination-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin: 0 8px;
    padding: 0;
    height: 32px; /* Même hauteur que le bouton Quitter */
}

.pagination-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding: 2px 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: rgba(201, 169, 110, 0.12); /* Même fond que btn-logout */
    border: 1px solid rgba(201, 169, 110, 0.2); /* Même bordure que btn-logout */
    border-radius: 30px; /* Même arrondi que btn-logout */
    height: 32px; /* Même hauteur */
    transition: all 0.3s ease;
}

.pagination-nav:hover {
    background: rgba(201, 169, 110, 0.18);
    border-color: rgba(201, 169, 110, 0.3);
}

.pagination-nav::-webkit-scrollbar {
    display: none;
}

/* ---- LIENS PRÉCÉDENT / SUIVANT ---- */
.pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.55rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    background: transparent;
    border: none;
    flex-shrink: 0;
    height: 24px;
}

.pagination-link i {
    font-size: 0.45rem;
    color: #64748b;
    transition: all 0.25s ease;
}

.pagination-link:hover {
    color: #c9a96e;
    background: rgba(201, 169, 110, 0.08);
}

.pagination-link:hover i {
    color: #c9a96e;
}

.pagination-link.prev-link:hover i {
    transform: translateX(-2px);
}

.pagination-link.next-link:hover i {
    transform: translateX(2px);
}

.pagination-link.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-link.disabled:hover {
    background: transparent;
}

.pagination-link span {
    font-size: 0.5rem;
}

/* ---- SÉPARATEUR ---- */
.pagination-sep {
    color: rgba(201, 169, 110, 0.15);
    font-size: 0.4rem;
    flex-shrink: 0;
    padding: 0 2px;
}

/* ---- NUMÉROS DE VOLUME ---- */
.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 0 4px;
    height: 100%;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.55rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

/* ---- VOLUME DÉBLOQUÉ (fond doré transparent) ---- */
.page-btn.unlocked {
    color: #cbd5e1;
    background: rgba(201, 169, 110, 0.08);
}

.page-btn.unlocked:hover {
    background: rgba(201, 169, 110, 0.18);
    color: #e8d5a3;
    transform: scale(1.05);
}

/* ---- VOLUME VERROUILLÉ ---- */
.page-btn.locked {
    opacity: 0.25;
    cursor: not-allowed;
    color: #475569;
    background: transparent;
}

/* ---- PROCHAIN VOLUME À DÉBLOQUER (avec icône) ---- */
.page-btn.locked.next-volume {
    opacity: 0.6;
    cursor: pointer;
    color: #c9a96e;
    background: rgba(201, 169, 110, 0.1);
    border: 1px solid rgba(201, 169, 110, 0.15);
}

.page-btn.locked.next-volume:hover {
    background: rgba(201, 169, 110, 0.18);
    opacity: 0.85;
    transform: scale(1.05);
    border-color: rgba(201, 169, 110, 0.3);
}

/* ---- VOLUME ACTIF (même style que le bouton Quitter) ---- */
.page-btn.active {
    background: rgba(201, 169, 110, 0.25);
    color: #c9a96e;
    font-weight: 600;
    border: 1px solid rgba(201, 169, 110, 0.3);
    transform: scale(1.05);
    box-shadow: 0 2px 10px rgba(201, 169, 110, 0.1);
}

.page-btn.active:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(201, 169, 110, 0.15);
}

/* ---- INDICATEUR DÉBLOQUÉ (petite coche) ---- */
.page-btn.unlocked .unlock-indicator {
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 0.35rem;
    color: #22c55e;
    opacity: 0.8;
}

/* ---- ICÔNES DE VERROUILLAGE ---- */
.page-btn .lock-icon {
    font-size: 0.3rem;
    margin-left: 1px;
    opacity: 0.5;
}

.page-btn .unlock-icon {
    font-size: 0.35rem;
    margin-left: 1px;
    color: #22c55e;
}

/* ---- INDICATEUR DE PLAGE ---- */
.pagination-info {
    display: inline-flex;
    align-items: center;
    padding: 0 4px 0 8px;
    font-size: 0.45rem;
    color: #64748b;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    border-left: 1px solid rgba(201, 169, 110, 0.1);
    margin-left: 2px;
    padding-left: 8px;
    height: 20px;
    letter-spacing: 0.2px;
    background: transparent;
}

/* ---- ANIMATION D'ENTRÉE ---- */
.pagination-numbers .page-btn {
    animation: pageBtnIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageBtnIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- POINT INDICATEUR DE PROCHAIN DÉBLOCAGE ---- */
.page-btn.locked.next-volume .lock-icon {
    position: relative;
}

.page-btn.locked.next-volume .lock-icon::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 5px;
    height: 5px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.6);
    }
}

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

@media (max-width: 1024px) {
    .pagination-wrapper {
        margin: 0 4px;
        height: 30px;
    }
    
    .pagination-nav {
        padding: 2px 4px;
        height: 30px;
        gap: 2px;
    }
    
    .pagination-link {
        font-size: 0.5rem;
        padding: 2px 6px;
        height: 22px;
    }
    
    .pagination-link i {
        font-size: 0.4rem;
    }
    
    .page-btn {
        min-width: 22px;
        height: 22px;
        font-size: 0.5rem;
        padding: 0 4px;
        border-radius: 11px;
    }
    
    .pagination-numbers {
        gap: 2px;
        padding: 0 2px;
    }
    
    .pagination-info {
        font-size: 0.4rem;
        padding: 0 2px 0 6px;
        height: 18px;
    }
    
    .pagination-link span {
        font-size: 0.45rem;
    }
}

@media (max-width: 768px) {
    .pagination-wrapper {
        flex: 0 1 auto;
        margin: 0 2px;
        height: 28px;
    }
    
    .pagination-nav {
        gap: 2px;
        padding: 2px 3px;
        height: 28px;
        border-radius: 20px;
    }
    
    .pagination-link {
        padding: 2px 4px;
        font-size: 0.45rem;
        height: 20px;
    }
    
    .pagination-link i {
        font-size: 0.35rem;
    }
    
    .pagination-link span {
        display: none;
    }
    
    .pagination-link.prev-link {
        padding: 2px 4px;
    }
    
    .pagination-link.next-link {
        padding: 2px 4px;
    }
    
    .page-btn {
        min-width: 20px;
        height: 20px;
        font-size: 0.45rem;
        padding: 0 3px;
        border-radius: 10px;
    }
    
    .page-btn.active {
        transform: scale(1.04);
    }
    
    .page-btn .lock-icon,
    .page-btn .unlock-icon {
        display: none;
    }
    
    .page-btn.unlocked .unlock-indicator {
        display: none;
    }
    
    .pagination-numbers {
        gap: 2px;
        padding: 0 2px;
    }
    
    .pagination-info {
        font-size: 0.35rem;
        padding: 0 2px 0 4px;
        height: 16px;
        border-left: none;
        margin-left: 0;
        padding-left: 4px;
    }
    
    .pagination-sep {
        display: none;
    }
}

@media (max-width: 480px) {
    .pagination-wrapper {
        height: 24px;
        margin: 0 1px;
    }
    
    .pagination-nav {
        padding: 1px 2px;
        height: 24px;
        gap: 1px;
        border-radius: 16px;
    }
    
    .pagination-link {
        padding: 1px 3px;
        font-size: 0.4rem;
        height: 18px;
    }
    
    .pagination-link i {
        font-size: 0.3rem;
    }
    
    .page-btn {
        min-width: 16px;
        height: 16px;
        font-size: 0.4rem;
        padding: 0 2px;
        border-radius: 8px;
    }
    
    .pagination-numbers {
        gap: 1px;
        padding: 0 1px;
    }
    
    .pagination-info {
        font-size: 0.3rem;
        padding: 0 2px;
        height: 14px;
    }
}

/* ============================================================
   MENTOR AI - STYLES COMPLETS
   Version 3.0 - Avec historique des conversations uniquement
   ============================================================ */

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */
#mentorFullscreen {
    display: none;
    height: 100%;
    overflow: hidden;
    padding: 0;
    background: transparent;
    flex-direction: column;
}

#mentorFullscreen.visible {
    display: flex !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.mentor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 12px 4px;
    background: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px 16px 0 0;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
    backdrop-filter: blur(8px);
}

.mentor-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mentor-icon-wrapper {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.06), rgba(201, 169, 110, 0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(167, 139, 250, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: mentorPulse 3s ease-in-out infinite;
}

@keyframes mentorPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(167, 139, 250, 0.05); }
    50% { box-shadow: 0 4px 30px rgba(167, 139, 250, 0.15); }
}

.mentor-icon-wrapper i {
    color: #a78bfa;
    font-size: 0.95rem;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.1));
}

.mentor-title {
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #e8d5a3 30%, #c9a96e 70%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.mentor-subtitle {
    font-size: 0.45rem;
    color: #64748b;
    letter-spacing: 1.5px;
    font-weight: 300;
}

.mentor-badge {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(201, 169, 110, 0.04));
    color: #a78bfa;
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 0.5rem;
    font-weight: 500;
    border: 1px solid rgba(167, 139, 250, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.mentor-header-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.mentor-btn {
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-size: 0.55rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}

.mentor-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mentor-btn-fullscreen {
    padding: 8px 20px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(201, 169, 110, 0.04));
    border: 1px solid rgba(167, 139, 250, 0.08);
    color: #a78bfa;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 15px rgba(167, 139, 250, 0.05);
    letter-spacing: 0.3px;
}

.mentor-btn-fullscreen:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(167, 139, 250, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(167, 139, 250, 0.15);
}

.mentor-btn-fullscreen.active {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(201, 169, 110, 0.08));
    border-color: rgba(167, 139, 250, 0.15);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.1);
}

.mentor-btn-fullscreen i {
    font-size: 0.8rem;
    margin-right: 6px;
}

/* ============================================================
   CORPS PRINCIPAL
   ============================================================ */
.mentor-body {
    display: flex;
    flex: 1;
    min-height: 0;
    height: calc(100% - 70px);
    background: transparent;
    border-radius: 12px;
    padding: 2px;
    gap: 10px;
}

/* ============================================================
   PANEL GAUCHE - CONVERSATIONS UNIQUEMENT
   ============================================================ */
.mentor-conversations-panel {
    flex: 0 0 240px;
    max-width: 240px;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(8px);
}

.mentor-conv-header {
    padding: 8px 12px 4px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.005);
}

.mentor-conv-header span {
    font-size: 0.55rem;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mentor-conv-header span i {
    color: #a78bfa;
}

.mentor-conv-new-btn {
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.12);
    background: rgba(167, 139, 250, 0.06);
    color: #a78bfa;
    font-size: 0.45rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mentor-conv-new-btn:hover {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.2);
}

.mentor-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 6px;
}

.mentor-conv-list::-webkit-scrollbar {
    width: 3px;
}

.mentor-conv-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.15), rgba(201, 169, 110, 0.08));
    border-radius: 3px;
}

/* ---- ÉLÉMENTS DE CONVERSATION ---- */
.mentor-conv-item {
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.01);
}

.mentor-conv-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.mentor-conv-item.active {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(201, 169, 110, 0.04));
    border-color: rgba(167, 139, 250, 0.12);
}

.mentor-conv-item .conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.mentor-conv-item .conv-title {
    font-size: 0.55rem;
    font-weight: 600;
    color: #e8d5a3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.mentor-conv-item .conv-count {
    font-size: 0.4rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: 4px;
}

.mentor-conv-item .conv-preview {
    font-size: 0.45rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.mentor-conv-item .conv-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mentor-conv-item .conv-date {
    font-size: 0.35rem;
    color: #475569;
}

.mentor-conv-item .conv-delete {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 0.4rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    opacity: 0;
}

.mentor-conv-item:hover .conv-delete {
    opacity: 1;
}

.mentor-conv-item .conv-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.mentor-conv-empty {
    text-align: center;
    padding: 30px 10px;
    color: #64748b;
}

.mentor-conv-empty i {
    font-size: 1.5rem;
    color: #475569;
    display: block;
    margin-bottom: 6px;
}

.mentor-conv-empty p {
    font-size: 0.55rem;
    margin: 0;
}

/* ---- FOOTER PROGRESSION ---- */
.mentor-conv-footer {
    padding: 6px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    text-align: center;
}

.mentor-conv-footer .progress-info {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mentor-conv-footer .progress-info span {
    font-size: 0.4rem;
    color: #64748b;
}

.mentor-conv-footer .progress-info .num {
    font-weight: 600;
    color: #c9a96e;
}

.mentor-conv-footer .progress-bar {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.mentor-conv-footer .progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, #c9a96e, #a78bfa);
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* ============================================================
   PANEL DROIT - CHAT
   ============================================================ */
.mentor-chat-panel {
    flex: 1;
    background: rgba(255, 255, 255, 0.005);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(8px);
}

.mentor-chat-header {
    padding: 6px 12px 4px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.005);
}

.mentor-chat-header span {
    font-size: 0.55rem;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mentor-chat-header span i {
    color: #a78bfa;
}

.mentor-conv-title-display {
    font-size: 0.6rem;
    color: #c9a96e;
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mentor-chat-status {
    font-size: 0.4rem;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mentor-chat-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}

.mentor-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
}

.mentor-messages::-webkit-scrollbar {
    width: 3px;
}

.mentor-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.15), rgba(201, 169, 110, 0.08));
    border-radius: 3px;
}

/* ---- MESSAGES ---- */
.mentor-msg {
    margin-bottom: 10px;
    animation: msgSlide 0.3s ease;
}

@keyframes msgSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mentor-msg .msg-avatar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.mentor-msg .msg-avatar .avatar-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    flex-shrink: 0;
}

.mentor-msg .msg-avatar .avatar-icon.ai {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(201, 169, 110, 0.08));
    color: #a78bfa;
}

.mentor-msg .msg-avatar .avatar-icon.user {
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.15), rgba(167, 139, 250, 0.08));
    color: #c9a96e;
}

.mentor-msg .msg-avatar .msg-name {
    font-size: 0.5rem;
    font-weight: 600;
    color: #94a3b8;
}

.mentor-msg .msg-avatar .msg-time {
    font-size: 0.35rem;
    color: #64748b;
    margin-left: 4px;
}

.mentor-msg .msg-content {
    /*padding: 6px 10px;*/
    border-radius: 8px;
    font-size: 0.7rem;
    line-height: 1.6;
    color: #94a3b8;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-left: 10px;
}

.mentor-msg.ai .msg-content {
    background: rgba(167, 139, 250, 0.04);
    border-left: 2px solid #a78bfa;
    color: #e2e8f0;
}

.mentor-msg.user .msg-content {
    background: rgba(201, 169, 110, 0.04);
    border-right: 2px solid #c9a96e;
    margin-left: 10px;
}

.mentor-msg .msg-content strong {
    color: #e8d5a3;
}

/* ---- SUGGESTIONS RAPIDES ---- */
.mentor-suggestions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /*padding: 4px 12px 6px 12px;*/
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.mentor-suggestions .suggestion-chip {
    /*padding: 3px 12px;*/
    border-radius: 20px;
    background: rgba(167, 139, 250, 0.06);
    border: 1px solid rgba(167, 139, 250, 0.08);
    color: #64748b;
    font-size: 0.45rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.mentor-suggestions .suggestion-chip:hover {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.15);
    color: #e2e8f0;
    transform: translateY(-1px);
}

/* ---- ZONE DE SAISIE ---- */
.mentor-input-area {
    /*padding: 8px 12px 12px 12px;*/
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.005);
}

.mentor-input-area .mentor-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    /*padding: 2px 4px 2px 16px;*/
    transition: all 0.3s ease;
}

.mentor-input-area .mentor-input-wrapper:focus-within {
    border-color: rgba(167, 139, 250, 0.15);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.05);
}

.mentor-input-area .mentor-input-wrapper input {
    flex: 1;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    /*padding: 8px 0;*/
    outline: none;
    min-width: 0;
}

.mentor-input-area .mentor-input-wrapper input::placeholder {
    color: #64748b;
    font-weight: 300;
}

.mentor-input-area .mentor-send-btn {
    padding: 8px 18px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(201, 169, 110, 0.04));
    color: #a78bfa;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    border: 1px solid rgba(167, 139, 250, 0.08);
}

.mentor-input-area .mentor-send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(201, 169, 110, 0.08));
    border-color: rgba(167, 139, 250, 0.15);
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.1);
}

.mentor-input-area .mentor-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================================
   MODE PLEIN ÉCRAN
   ============================================================ */
body.mentor-fullscreen-active .main-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    background: #0d0d0f !important;
    padding: 16px 28px !important;
    overflow: hidden !important;
}

body.mentor-fullscreen-active #mentorFullscreen {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: auto !important;
    position: relative !important;
    z-index: 99999 !important;
}

body.mentor-fullscreen-active #mentorFullscreen .mentor-body {
    height: calc(100% - 80px) !important;
}

body.mentor-fullscreen-active #volumeContentWrapper {
    display: none !important;
}

body.mentor-fullscreen-active .top-bar,
body.mentor-fullscreen-active .pagination-section,
body.mentor-fullscreen-active .nav-markers,
body.mentor-fullscreen-active .progress-counter,
body.mentor-fullscreen-active .floating-hamburger,
body.mentor-fullscreen-active .notes-sidebar {
    display: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .mentor-conversations-panel {
        flex: 0 0 180px;
        max-width: 180px;
    }
}

@media (max-width: 768px) {
    .mentor-body {
        flex-direction: column;
        height: auto;
    }
    
    .mentor-conversations-panel {
        flex: 1 1 auto;
        max-width: 100%;
        max-height: 150px;
    }
    
    .mentor-chat-panel {
        flex: 1 1 auto;
        min-height: 300px;
    }
    
    .mentor-input-area .mentor-input-wrapper input {
        font-size: 0.65rem;
    }
    
    .mentor-msg .msg-content {
        font-size: 0.65rem;
    }
    
    .mentor-suggestions .suggestion-chip {
        font-size: 0.4rem;
        padding: 2px 8px;
    }
}

@media (max-width: 480px) {
    .mentor-conversations-panel {
        max-height: 120px;
    }
    
    .mentor-chat-panel {
        min-height: 250px;
    }
    
    .mentor-msg .msg-content {
        font-size: 0.6rem;
        padding: 4px 8px;
    }
    
    .mentor-input-area {
        padding: 6px 8px 10px 8px;
    }
    
    .mentor-input-area .mentor-input-wrapper {
        padding: 2px 4px 2px 10px;
    }
    
    .mentor-input-area .mentor-input-wrapper input {
        font-size: 0.6rem;
        padding: 6px 0;
    }
    
    .mentor-input-area .mentor-send-btn {
        padding: 6px 12px;
        font-size: 0.5rem;
    }
    
    .mentor-suggestions .suggestion-chip {
        font-size: 0.35rem;
        padding: 1px 6px;
    }
}

/* ===== BULLES DE DISCUSSION ===== */
.mentor-msg {
    margin-bottom: 8px;  /* réduction de l'écart */
    animation: msgSlide 0.3s ease;
}

.mentor-msg .msg-avatar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.mentor-msg .msg-avatar .avatar-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}

.mentor-msg .msg-avatar .avatar-icon.ai {
    background: #2d2d3a; /* fond sombre pour l'IA */
    color: #a78bfa;
}

.mentor-msg .msg-avatar .avatar-icon.user {
    background: #4a4a5a;
    color: #c9a96e;
}

.mentor-msg .msg-avatar .msg-name {
    font-size: 0.55rem;
    font-weight: 600;
    color: #94a3b8;
}

.mentor-msg .msg-avatar .msg-time {
    font-size: 0.35rem;
    color: #64748b;
    margin-left: 4px;
}

/* ===== CONTENU DES BULLES ===== */
.mentor-msg .msg-content {
    padding: 8px 14px;
    border-radius: 12px;        /* coins arrondis comme ChatGPT */
    font-size: 0.75rem;
    line-height: 1.6;
    color: #e2e8f0;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 85%;             /* largeur max pour ne pas prendre tout l'écran */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-left: 36px;          /* aligné sous l'avatar */
}

/* Message de l'IA (à gauche) */
.mentor-msg.ai .msg-content {
    background: #2d2d3a;        /* fond gris foncé */
    border-bottom-left-radius: 4px;  /* petit effet "queue" */
    color: #e2e8f0;
}

/* Message de l'utilisateur (à droite) */
.mentor-msg.user .msg-content {
    background: #4a4a5a;        /* un peu plus clair */
    border-bottom-right-radius: 4px;
    color: #e2e8f0;
    margin-left: auto;          /* pousse à droite */
    margin-right: 0;
}

/* Ajustement pour le conteneur parent : on retire la marge-left fixe pour l'utilisateur */
.mentor-msg.user .msg-content {
    margin-left: auto;
}

/* Pour que l'avatar soit aussi aligné à droite pour l'utilisateur */
.mentor-msg.user .msg-avatar {
    flex-direction: row-reverse; /* avatar à droite */
    justify-content: flex-end;
}

.mentor-msg.user .msg-avatar .msg-name {
    order: 2; /* pour garder le nom avant l'heure */
}

.mentor-msg.user .msg-content {
    margin-right: 0;
    margin-left: auto;
}

/* Supprimer les marges internes supplémentaires */
.mentor-msg .msg-content p {
    margin: 0 0 4px 0;
}
.mentor-msg .msg-content p:last-child {
    margin-bottom: 0;
}

.mentor-msg .msg-content .suggestion-box {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
}
.mentor-msg .msg-content .suggestion-item,
.mentor-msg .msg-content .follow-up-item {
    cursor: pointer;
    padding: 2px 0;
    font-size: 0.6rem;
    color: #a78bfa;
    transition: color 0.2s;
}
.mentor-msg .msg-content .suggestion-item:hover,
.mentor-msg .msg-content .follow-up-item:hover {
    color: #c9a96e;
}
.mentor-input-area {
    padding: 6px 12px 10px 12px;  /* moins de marge */
}

.mentor-suggestions {
    padding: 4px 12px 4px 12px;
    gap: 4px;
}
.mentor-suggestions .suggestion-chip {
    padding: 2px 10px;
    font-size: 0.45rem;
}
body.mentor-fullscreen-active #mentorFullscreen {
    overflow: hidden !important; /* important */
}
body.mentor-fullscreen-active .mentor-body {
    height: calc(100% - 70px) !important;
}
.mentor-msg .msg-content {
    padding: 6px 12px;   /* réduction */
}
.mentor-msg {
    margin-bottom: 6px;  /* espacement réduit entre les messages */
}
.mentor-msg .msg-content {
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s;
}
.mentor-msg .msg-content:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}




/* ============================================================
   STYLE DE SÉLECTION DYNAMIQUE
   ============================================================ */

/* Style par défaut de la sélection */
::selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

::-moz-selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

/* Pour le contenu du livre */
#dynamicContent ::selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

#dynamicContent ::-moz-selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

/* Pour les textes sélectionnables */
.selectable-text::selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

.selectable-text::-moz-selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #0d0d0f !important;
}

/* ============================================================
   CURSEUR PERSONNALISÉ POUR L'ANNOTATION
   ============================================================ */

/* Curseur par défaut pour le body - sera dynamique via JS */
body {
    cursor: default;
}

/* Curseur personnalisé pour les zones de texte */
#dynamicContent {
    cursor: text;
}

/* Pour les zones de texte où le curseur doit être par défaut */
input, textarea, .search-input, .modal-textarea {
    cursor: text !important;
}

/* Pour les boutons, liens et éléments cliquables */
button, a, .clickable, .toolbar-btn, .page-btn, .marker-dot, .color-option {
    cursor: pointer !important;
}

/* Empêcher le curseur personnalisé sur les éléments de sélection */
.selectable-text {
    cursor: text !important;
}

/* Désactiver le curseur personnalisé sur le popup */
.marker-popup, .modal-container, .comments-modal {
    cursor: default !important;
}

/* ============================================================
   SURBRILLANCE UNIFIÉE - SANS ESPACES
   ============================================================ */

/* ============================================================
   SURBRILLANCE UNIFIÉE - TEXTE BLANC
   ============================================================ */

.annotated-passage {
    display: inline !important;
    padding: 0.1em 0.4em !important;
    border-radius: 0.3em !important;
    font-weight: 700 !important;
    color: #ffffff !important;  /* ✅ TEXTE BLANC au lieu de noir */
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1.6 !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding-left: 0.4em !important;
    padding-right: 0.4em !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* ✅ Les annotations se touchent pour former un bloc continu */
.annotated-passage + .annotated-passage {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ✅ Effet au survol */
.annotated-passage:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 0 16px rgba(255, 213, 79, 0.3), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.annotated-passage:active {
    transform: scale(0.97) !important;
    transition-duration: 0.1s !important;
}

/* ✅ COULEURS - Unifiées */
.annotated-passage.color-yellow {
    background: #FFD54F !important;
    box-shadow: 0 0 8px rgba(255, 213, 79, 0.2), 0 1px 4px rgba(0,0,0,0.05) !important;
}
.annotated-passage.color-yellow:hover {
    box-shadow: 0 0 16px rgba(255, 213, 79, 0.35), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.annotated-passage.color-green {
    background: #A5D6A7 !important;
    box-shadow: 0 0 8px rgba(165, 214, 167, 0.2), 0 1px 4px rgba(0,0,0,0.05) !important;
}
.annotated-passage.color-green:hover {
    box-shadow: 0 0 16px rgba(165, 214, 167, 0.35), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.annotated-passage.color-blue {
    background: #90CAF9 !important;
    box-shadow: 0 0 8px rgba(144, 202, 249, 0.2), 0 1px 4px rgba(0,0,0,0.05) !important;
}
.annotated-passage.color-blue:hover {
    box-shadow: 0 0 16px rgba(144, 202, 249, 0.35), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.annotated-passage.color-pink {
    background: #F48FB1 !important;
    box-shadow: 0 0 8px rgba(244, 143, 177, 0.2), 0 1px 4px rgba(0,0,0,0.05) !important;
}
.annotated-passage.color-pink:hover {
    box-shadow: 0 0 16px rgba(244, 143, 177, 0.35), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.annotated-passage.color-purple {
    background: #CE93D8 !important;
    box-shadow: 0 0 8px rgba(206, 147, 216, 0.2), 0 1px 4px rgba(0,0,0,0.05) !important;
}
.annotated-passage.color-purple:hover {
    box-shadow: 0 0 16px rgba(206, 147, 216, 0.35), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.annotated-passage.color-orange {
    background: #FFAB91 !important;
    box-shadow: 0 0 8px rgba(255, 171, 145, 0.2), 0 1px 4px rgba(0,0,0,0.05) !important;
}
.annotated-passage.color-orange:hover {
    box-shadow: 0 0 16px rgba(255, 171, 145, 0.35), 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* ✅ Animation d'entrée */
@keyframes highlightPop {
    0% { transform: scale(0.9); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.annotated-passage {
    animation: highlightPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* ✅ TEXTE À L'INTÉRIEUR - BLANC */
.annotated-passage .annotated-text {
    display: inline !important;
    white-space: normal !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    color: #ffffff !important;  /* ✅ BLANC */
}

/* ✅ PIN ICON - BLANC AUSSI */
.annotated-passage .pin-icon {
    color: #ffffff !important;  /* ✅ BLANC */
    font-size: 0.7rem !important;
    margin-right: 2px !important;
    opacity: 0.9 !important;
}

/* ✅ MODE SOMBRE - Garder le blanc */
@media (prefers-color-scheme: dark) {
    .annotated-passage {
        color: #ffffff !important;  /* ✅ BLANC */
    }
    .annotated-passage .annotated-text {
        color: #ffffff !important;  /* ✅ BLANC */
    }
}

/* ============================================================
   CURSEUR PINCHEAU - UNIQUEMENT DANS LE CONTENU DU LIVRE
   ============================================================ */

/* ✅ Curseur personnalisé uniquement pour .book-content */
.book-content {
    cursor: default;
    position: relative;
}

/* ============================================================
   CURSEUR PINCHEAU - VISIBLE AU-DESSUS DU TEXTE
   ============================================================ */

/* ✅ Le curseur personnalisé s'applique à tout le contenu du livre */
.book-content.color-cursor-active {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><circle cx="12" cy="12" r="10" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="2" /><polygon points="10,18 14,18 12,22" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="1" /><circle cx="12" cy="12" r="4" fill="%23ffffff" opacity="0.8" /></svg>') 12 12, auto !important;
    position: relative;
    z-index: 1;
}

/* ✅ Le curseur est également visible sur tous les éléments enfants du book-content */
.book-content.color-cursor-active * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><circle cx="12" cy="12" r="10" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="2" /><polygon points="10,18 14,18 12,22" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="1" /><circle cx="12" cy="12" r="4" fill="%23ffffff" opacity="0.8" /></svg>') 12 12, auto !important;
}

/* ✅ Le curseur est visible SUR les annotations aussi */
.book-content.color-cursor-active .annotated-passage {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><circle cx="12" cy="12" r="10" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="2" /><polygon points="10,18 14,18 12,22" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="1" /><circle cx="12" cy="12" r="4" fill="%23ffffff" opacity="0.8" /></svg>') 12 12, auto !important;
}

/* ✅ Curseur normal sur les éléments interactifs (boutons, liens) */
.book-content.color-cursor-active a,
.book-content.color-cursor-active button,
.book-content.color-cursor-active .law-interactions *,
.book-content.color-cursor-active .clickable {
    cursor: pointer !important;
}

/* ✅ Curseur pinceau avec la couleur dynamique (géré par JS) */
.book-content.color-cursor-active.dynamic-color-cursor {
    cursor: var(--custom-cursor) !important;
}
.book-content.color-cursor-active.dynamic-color-cursor * {
    cursor: var(--custom-cursor) !important;
}

/* ✅ S'assurer que le curseur reste normal sur les éléments interactifs hors du book-content */
.top-bar,
.top-bar *,
.notes-sidebar,
.notes-sidebar *,
.toolbar-container,
.toolbar-container *,
.nav-markers,
.nav-markers *,
.floating-hamburger,
.floating-hamburger *,
.modal-overlay,
.modal-overlay *,
.comments-modal-overlay,
.comments-modal-overlay * {
    cursor: default !important;
}

/* ✅ Curseur normal sur les liens et boutons (partout) */
a, button, .clickable, .toolbar-btn, .page-btn, .marker-dot, .color-option,
.law-fav-icon, .favorite-btn, .like-btn, .comment-toggle-btn {
    cursor: pointer !important;
}

/* ✅ Curseur texte sur les inputs partout */
input, textarea, .search-input, .modal-textarea {
    cursor: text !important;
}

/* ============================================================
   CURSEUR PINCHEAU - Z-INDEX ÉLEVÉ
   ============================================================ */

/* ✅ S'assurer que le curseur personnalisé est au-dessus de tout */
.book-content.color-cursor-active {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28"><circle cx="12" cy="12" r="10" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="2" /><polygon points="10,18 14,18 12,22" fill="%23ffeb3b" stroke="%23ffffff" stroke-width="1" /><circle cx="12" cy="12" r="4" fill="%23ffffff" opacity="0.8" /></svg>') 12 12, auto !important;
    position: relative;
    z-index: 1;
}

/* ✅ Curseur normal partout ailleurs */
body:not(.book-content.color-cursor-active) {
    cursor: default;
}

/* ============================================================
   CURSEUR PINCHEAU - SUPERPOSITION (100% visible)
   ============================================================ */

/* ✅ Le curseur réel est caché, un élément superposé le remplace */
.book-content.color-cursor-active {
    cursor: none !important;
}

/* ✅ L'élément de superposition qui suit la souris */
.custom-cursor-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 999999 !important;
    width: 28px;
    height: 32px;
    transform: translate(-14px, -16px);
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.custom-cursor-overlay.visible {
    display: block !important;
    opacity: 1 !important;
}

.custom-cursor-overlay svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

/* ============================================================
   BOUTON SURlIGNEUR - STYLE ACTIF/DÉSACTIF
   ============================================================ */

/* ✅ État ACTIF (curseur pinceau activé) */
#highlightToggleBtn.active {
    background: rgba(201, 169, 110, 0.2) !important;
    border-color: rgba(201, 169, 110, 0.4) !important;
    color: #c9a96e !important;
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.1) !important;
}

#highlightToggleBtn.active .badge-count {
    background: #22c55e !important;
    color: #fff !important;
}

/* ✅ État INACTIF (curseur normal) */
#highlightToggleBtn.inactive {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #64748b !important;
    box-shadow: none !important;
    opacity: 0.6;
}

#highlightToggleBtn.inactive .badge-count {
    background: #64748b !important;
    color: #0d0d0f !important;
}

#highlightToggleBtn.inactive:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

/* ✅ Animation de transition */
#highlightToggleBtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#highlightToggleBtn .badge-count {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ✅ Effet de pulsation quand actif */
@keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(201, 169, 110, 0.1); }
    50% { box-shadow: 0 0 30px rgba(201, 169, 110, 0.2); }
}

#highlightToggleBtn.active {
    animation: highlightPulse 2s ease-in-out infinite;
}

/* ============================================================
   STYLE DE SÉLECTION - TEXTE BLANC PENDANT LE SURlIGNAGE
   ============================================================ */

/* ✅ Style de sélection personnalisé - TEXTE BLANC */
::selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #ffffff !important;  /* ✅ BLANC au lieu de noir */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

::-moz-selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #ffffff !important;  /* ✅ BLANC */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ✅ Pour le contenu du livre */
#dynamicContent ::selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #ffffff !important;  /* ✅ BLANC */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#dynamicContent ::-moz-selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #ffffff !important;  /* ✅ BLANC */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ✅ Pour les textes sélectionnables */
.selectable-text::selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #ffffff !important;  /* ✅ BLANC */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.selectable-text::-moz-selection {
    background: rgba(201, 169, 110, 0.35) !important;
    color: #ffffff !important;  /* ✅ BLANC */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ✅ Sélection dynamique avec la couleur choisie */
.book-content.color-cursor-active ::selection {
    background: var(--selection-color, rgba(201, 169, 110, 0.35)) !important;
    color: #ffffff !important;  /* ✅ BLANC */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.book-content.color-cursor-active ::-moz-selection {
    background: var(--selection-color, rgba(201, 169, 110, 0.35)) !important;
    color: #ffffff !important;  /* ✅ BLANC */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================
   VARIABLES GLOBALES POUR LA SÉLECTION
   ============================================================ */

:root {
    --selection-color: rgba(201, 169, 110, 0.35);
    --selection-text-color: #ffffff;
}

/* ✅ Style de sélection par défaut */
::selection {
    background: var(--selection-color) !important;
    color: var(--selection-text-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

::-moz-selection {
    background: var(--selection-color) !important;
    color: var(--selection-text-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Dans le CSS - Indicateur de filtre actif dans la liste */
.notion-list-header .filter-indicator {
    font-size: 0.45rem;
    color: var(--notion-accent);
    background: var(--gradient-accent);
    padding: 1px 10px;
    border-radius: 12px;
    border: 1px solid rgba(167, 139, 250, 0.08);
    margin-left: 8px;
    display: none;
}

.notion-list-header .filter-indicator.visible {
    display: inline-block;
}

/* ============================================================
   PAGINATION MODERNE POUR LE CAHIER
   ============================================================ */

.notion-pagination {
    padding: 8px 10px 6px 10px;
    border-top: 1px solid var(--notion-border);
    background: rgba(255, 255, 255, 0.005);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.pagination-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--notion-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--notion-text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--notion-text);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.pagination-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.pagination-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pagination-page-btn {
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--notion-text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-page-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--notion-text);
    border-color: var(--notion-border);
}

.pagination-page-btn.active {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(2, 166, 186, 0.06));
    color: var(--notion-accent);
    border-color: rgba(167, 139, 250, 0.15);
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(167, 139, 250, 0.05);
}

.pagination-page-btn.ellipsis {
    cursor: default;
    color: var(--notion-text-muted);
    font-size: 0.5rem;
}

.pagination-page-btn.ellipsis:hover {
    background: transparent;
    border-color: transparent;
}

.pagination-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.45rem;
    color: var(--notion-text-muted);
    padding-top: 2px;
}

.pagination-separator {
    color: var(--notion-border);
}

/* Animation d'apparition des pages */
.pagination-page-btn {
    animation: pageBtnAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageBtnAppear {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive - pagination compacte */
@media (max-width: 768px) {
    .pagination-page-btn {
        min-width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }
    
    .pagination-btn {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }
    
    .pagination-info {
        font-size: 0.4rem;
    }
}

@media (max-width: 480px) {
    .pagination-page-btn {
        min-width: 20px;
        height: 20px;
        font-size: 0.45rem;
    }
    
    .pagination-btn {
        width: 20px;
        height: 20px;
        font-size: 0.4rem;
    }
    
    .pagination-info {
        font-size: 0.35rem;
    }
}

/* ============================================================
   MODULE : COMMENTAIRES PREMIUM V2 - STYLES COMPLETS
   ============================================================ */

/* ===== VARIABLES ===== */
:root {
    --comment-bg: rgba(18, 18, 22, 0.92);
    --comment-border: rgba(255, 255, 255, 0.04);
    --comment-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
    --comment-radius: 24px;
    --comment-glass: rgba(255, 255, 255, 0.02);
    --comment-accent: #a78bfa;
    --comment-primary: #e8d5a3;
    --comment-text: #e2e8f0;
    --comment-muted: #94a3b8;
    --comment-muted-dark: #64748b;
    --transition-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== MODAL PREMIUM ===== */
.comments-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    z-index: 9999;
    display: none;
    align-items: flex-end;
    justify-content: center;
    animation: overlayFadeIn 0.4s ease;
}

.comments-modal-overlay.active {
    display: flex;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.comments-modal {
    background: var(--comment-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    border-radius: var(--comment-radius) var(--comment-radius) 0 0;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.5s var(--transition-smooth);
    box-shadow: var(--comment-shadow), 0 0 0 1px var(--comment-border) inset;
    border: 1px solid var(--comment-border);
    overflow: hidden;
    position: relative;
    transform-origin: bottom center;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(100%) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ===== EN-TÊTE ===== */
.comments-modal-header {
    padding: 16px 20px 12px 20px;
    border-bottom: 1px solid var(--comment-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: rgba(18, 18, 22, 0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.comments-modal-header .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.comments-modal-header .back-btn {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    color: var(--comment-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comments-modal-header .back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: scale(1.05);
}

.comments-modal-header .header-content {
    flex: 1;
    min-width: 0;
}

.comments-modal-header .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e8d5a3 20%, #c9a96e 60%, var(--comment-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.comments-modal-header .modal-subtitle {
    font-size: 0.5rem;
    color: var(--comment-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.comments-modal-header .comment-count-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(167, 139, 250, 0.08);
    padding: 4px 14px 4px 10px;
    border-radius: 30px;
    border: 1px solid rgba(167, 139, 250, 0.06);
    color: var(--comment-accent);
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.comments-modal-header .comment-count-badge i {
    font-size: 0.6rem;
}

.comments-modal-header .comment-count-badge span {
    font-weight: 600;
}

.comments-modal-header .header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.comments-modal-header .header-action-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--comment-border);
    color: var(--comment-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.comments-modal-header .header-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: rotate(90deg);
}

/* ===== APERÇU DE LA LOI ===== */
.comments-law-preview {
    padding: 10px 20px 8px 20px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.03), rgba(2, 166, 186, 0.01));
    border-bottom: 1px solid var(--comment-border);
    flex-shrink: 0;
}

.comments-law-preview .law-preview-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.comments-law-preview .law-preview-number {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--comment-accent);
    background: rgba(167, 139, 250, 0.08);
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.06);
}

.comments-law-preview .law-preview-volume {
    font-size: 0.45rem;
    color: var(--comment-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 20px;
}

.comments-law-preview .law-preview-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--comment-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== STATS ===== */
.comments-stats {
    display: flex;
    gap: 16px;
    padding: 6px 20px 8px 20px;
    border-bottom: 1px solid var(--comment-border);
    background: rgba(255, 255, 255, 0.005);
    flex-shrink: 0;
}

.comments-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.comments-stats .stat-item .stat-icon {
    color: var(--comment-muted);
    font-size: 0.55rem;
    opacity: 0.6;
}

.comments-stats .stat-item .stat-value {
    font-size: 0.65rem;
    font-weight: 600;
    color: #e2e8f0;
}

.comments-stats .stat-item .stat-label {
    font-size: 0.4rem;
    color: var(--comment-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ===== LISTE DES COMMENTAIRES ===== */
.comments-list-container {
    flex: 1;
    /*overflow-y: auto;*/
    padding: 8px 16px 8px 16px;
    min-height: 120px;
    max-height: 42vh;
    background: rgba(0, 0, 0, 0.1);
    scroll-behavior: smooth;
}

.comments-list-container::-webkit-scrollbar {
    width: 3px;
}

.comments-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.comments-list-container::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.15);
    border-radius: 3px;
}

/* ===== ITEM COMMENTAIRE PREMIUM ===== */
.comment-item-premium {
    display: flex;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    animation: commentSlideIn 0.35s var(--transition-smooth);
    transition: background 0.2s ease;
    border-radius: 12px;
    margin: 0 -8px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.comment-item-premium:hover {
    background: rgba(255, 255, 255, 0.02);
}

.comment-item-premium.pinned {
    background: rgba(167, 139, 250, 0.04);
    border: 1px solid rgba(167, 139, 250, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 4px -4px 8px -4px;
}

@keyframes commentSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== AVATAR ===== */
.comment-avatar-premium {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0d0d0f;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--comment-accent), var(--comment-primary));
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.15);
    margin-top: 2px;
    position: relative;
    transition: all 0.3s ease;
}

.comment-avatar-premium::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.08);
}

.comment-avatar-premium.color-1 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.comment-avatar-premium.color-2 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.comment-avatar-premium.color-3 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.comment-avatar-premium.color-4 { background: linear-gradient(135deg, #fa709a, #fee140); }
.comment-avatar-premium.color-5 { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.comment-avatar-premium.color-6 { background: linear-gradient(135deg, #fccb90, #d57eeb); }

/* ===== CORPS ===== */
.comment-body-premium {
    flex: 1;
    min-width: 0;
}

.comment-body-premium .comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comment-body-premium .comment-author {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--comment-primary);
}

.comment-body-premium .comment-author.is-owner {
    color: var(--comment-accent);
}

.comment-body-premium .comment-time {
    font-size: 0.45rem;
    color: var(--comment-muted);
}

.comment-body-premium .comment-badge {
    font-size: 0.4rem;
    background: rgba(167, 139, 250, 0.08);
    color: var(--comment-accent);
    padding: 1px 8px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.06);
    font-weight: 500;
}

.comment-body-premium .comment-badge.first-badge {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.1);
}

.comment-body-premium .comment-badge.pinned-badge {
    background: rgba(167, 139, 250, 0.12);
    color: var(--comment-accent);
    border-color: rgba(167, 139, 250, 0.1);
}

.comment-body-premium .comment-text {
    font-size: 0.75rem;
    color: var(--comment-text);
    line-height: 1.6;
    margin-top: 2px;
    word-wrap: break-word;
    padding-right: 4px;
    font-weight: 400;
}

.comment-body-premium .comment-text .mention {
    color: var(--comment-accent);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.comment-body-premium .comment-text .mention:hover {
    color: #c9a96e;
    text-decoration: underline;
}

.comment-body-premium .comment-edited {
    font-size: 0.4rem;
    color: var(--comment-muted);
    margin-top: 2px;
    opacity: 0.7;
}

.comment-body-premium .comment-edited i {
    font-size: 0.35rem;
    margin-right: 2px;
}

/* ===== ACTIONS ===== */
.comment-actions-premium {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.comment-actions-premium button {
    background: none;
    border: none;
    color: var(--comment-muted);
    font-size: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.comment-actions-premium button:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.comment-actions-premium .reply-btn:hover {
    color: var(--comment-accent);
    background: rgba(167, 139, 250, 0.06);
}

.comment-actions-premium .like-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.comment-actions-premium .edit-btn:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.06);
}

.comment-actions-premium .delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.comment-actions-premium .pin-btn:hover {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.06);
}

.comment-actions-premium .reply-count {
    font-size: 0.45rem;
    color: var(--comment-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 8px;
    border-radius: 10px;
}

/* ===== RÉPONSES IMBRIQUÉES ===== */
.comment-replies {
    margin-left: 28px;
    padding-left: 12px;
    border-left: 2px solid rgba(167, 139, 250, 0.08);
    animation: repliesExpand 0.3s var(--transition-smooth);
}

@keyframes repliesExpand {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.comment-replies .reply-item {
    display: flex;
    gap: 10px;
    padding: 6px 4px 6px 0;
    border-bottom: none;
    animation: replySlideIn 0.3s var(--transition-smooth);
}

@keyframes replySlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.comment-replies .reply-item .reply-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: #0d0d0f;
    text-transform: uppercase;
    background: linear-gradient(135deg, #64748b, #94a3b8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-replies .reply-item .reply-body {
    flex: 1;
    min-width: 0;
}

.comment-replies .reply-item .reply-author {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--comment-primary);
}

.comment-replies .reply-item .reply-author.is-owner {
    color: var(--comment-accent);
}

.comment-replies .reply-item .reply-time {
    font-size: 0.4rem;
    color: var(--comment-muted);
    margin-left: 4px;
}

.comment-replies .reply-item .reply-text {
    font-size: 0.65rem;
    color: var(--comment-text);
    line-height: 1.5;
    margin-top: 1px;
}

.comment-replies .reply-item .reply-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.comment-replies .reply-item .reply-actions button {
    background: none;
    border: none;
    color: var(--comment-muted);
    font-size: 0.4rem;
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.comment-replies .reply-item .reply-actions button:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   NOUVELLE ZONE DE SAISIE DES COMMENTAIRES (MODERNE)
   ============================================================ */

/* --- ZONE DE SAISIE GLOBALE --- */
.comment-input-area-premium {
    padding: 6px 16px 12px 16px;
    border-top: 1px solid var(--comment-border);
    background: rgba(18, 18, 22, 0.95);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* --- BARRE D'EMOJIS (6 émojis) --- */
.premium-emoji-bar {
    display: none; /* Caché par défaut */
    gap: 2px;
    padding: 2px 2px 4px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 4px;
    flex-wrap: wrap;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Afficher la barre d'emojis lorsque l'utilisateur a tapé du texte */
.premium-emoji-bar.active {
    display: flex;
    opacity: 1;
}

.premium-emoji-bar .emoji-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 8px;
    transition: all 0.2s ease;
    line-height: 1;
}

.premium-emoji-bar .emoji-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.15);
}

/* --- WRAPPER DU CHAMP DE SAISIE --- */
.premium-input-wrapper {
    margin-bottom: 4px;
}

/* --- TEXTAIRE MODERNE (100% largeur) --- */
.premium-input-wrapper textarea {
    width: 100% !important;
    background: none;
    border: none;
    color: var(--comment-text);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    padding: 4px 0;
    outline: none;
    resize: none;
    min-height: 24px;
    max-height: 120px;
    line-height: 1.6;
    overflow-y: auto;
    box-sizing: border-box;
}

.premium-input-wrapper textarea::placeholder {
    color: var(--comment-muted);
    font-weight: 300;
}

.premium-input-wrapper textarea::-webkit-scrollbar {
    width: 2px;
}

.premium-input-wrapper textarea::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.15);
    border-radius: 2px;
}

/* --- FOOTER DE LA ZONE DE SAISIE --- */
.premium-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Partie gauche (boutons secondaires + compteur) */
.footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* Boutons (Mention, Effacer) */
.premium-input-footer .input-actions {
    display: flex;
    gap: 2px;
}

.premium-input-footer .input-actions button {
    background: none;
    border: none;
    color: var(--comment-muted);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.premium-input-footer .input-actions button:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
}

/* Compteur de caractères */
.premium-input-footer .char-counter {
    font-size: 0.45rem;
    color: var(--comment-muted);
    transition: color 0.3s ease;
}

.premium-input-footer .char-counter.warning {
    color: #fbbf24;
}

.premium-input-footer .char-counter.danger {
    color: #ef4444;
}

/* ===== 1. & 5. NOUVEAU BOUTON ENVOYER (style modern) ===== */
.premium-input-footer .send-btn-premium {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #0d0d0f;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(249, 115, 22, 0.15);
    flex-shrink: 0;
    position: relative;
}

.premium-input-footer .send-btn-premium i {
    transition: transform 0.3s ease;
}

.premium-input-footer .send-btn-premium:hover:not(:disabled) {
    background: linear-gradient(135deg, #ea580c, #f97316);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
    transform: translateY(-2px) scale(1.02);
}

.premium-input-footer .send-btn-premium:active:not(:disabled) {
    transform: scale(0.92);
}

.premium-input-footer .send-btn-premium:active:not(:disabled) i {
    transform: translateY(-2px);
}

.premium-input-footer .send-btn-premium:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    .comment-input-area-premium {
        padding: 4px 12px 10px 12px;
    }

    .premium-emoji-bar .emoji-btn {
        font-size: 1rem;
    }

    .premium-input-wrapper textarea {
        font-size: 0.75rem;
        min-height: 20px;
        max-height: 80px;
    }

    .premium-input-footer .send-btn-premium {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .premium-input-footer .input-actions button {
        font-size: 0.5rem;
        padding: 2px 4px;
    }

    .premium-input-footer .char-counter {
        font-size: 0.4rem;
    }

    .footer-left {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .premium-input-footer .send-btn-premium {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .premium-input-wrapper textarea {
        font-size: 0.7rem;
    }

    .premium-emoji-bar .emoji-btn {
        font-size: 0.9rem;
        padding: 1px 2px;
    }
}


/* ============================================================
   SCROLL MODERNE POUR LA LISTE DES COMMENTAIRES
   ============================================================ */


/* BOUTON ENVOYER - rose pur #ff2d55 */
.send-btn-premium {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ff2d55 !important;  /* Rose pur, sans dégradé */
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(255, 45, 85, 0.25);
    flex-shrink: 0;
    position: relative;
}

.send-btn-premium:hover:not(:disabled) {
    background: #ff2d55 !important;
    box-shadow: 0 8px 25px rgba(255, 45, 85, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.send-btn-premium:active:not(:disabled) {
    transform: scale(0.92);
}

.send-btn-premium:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* MODAL - top: 0 */
.comments-modal {
    position: relative;
    top: 0 !important;
    transform: translateY(0) !important;
    max-height: 100vh !important;
    border-radius: 0 0 24px 24px !important;
}

.comments-modal-overlay {
    align-items: flex-start !important;
    padding-top: 10px !important;
}

/* LISTE DES COMMENTAIRES - scroll moderne */
#premiumCommentsList {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

#premiumCommentsList::-webkit-scrollbar {
    width: 4px;
}

#premiumCommentsList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

#premiumCommentsList::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.2), rgba(255, 45, 85, 0.2));
    border-radius: 4px;
}

#premiumCommentsList::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.4), rgba(255, 45, 85, 0.4));
}


/* ============================================================
   MODAL COMMENTAIRES - top: 0 CORRIGÉ
   ============================================================ */

.comments-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(14px) saturate(0.9);
    -webkit-backdrop-filter: blur(14px) saturate(0.9);
    z-index: 9999;
    display: none;
    align-items: flex-start !important;
    justify-content: center;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.comments-modal-overlay.active {
    display: flex !important;
}

.comments-modal {
    background: rgba(18, 18, 22, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 20px);
    border-radius: 0 0 24px 24px !important;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    position: relative;
    transform: translateY(0) !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* Animation d'entrée */
@keyframes modalSlideUp {
    from {
        transform: translateY(20px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ===== LISTE DES COMMENTAIRES ===== */
#premiumCommentsList {
    flex: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 8px 16px 8px 16px;
    min-height: 120px;
    max-height: 50vh;
    background: rgba(0, 0, 0, 0.1);
   /* scroll-behavior: smooth;
    overscroll-behavior: contain;*/
}

#premiumCommentsList::-webkit-scrollbar {
    width: 4px;
}

#premiumCommentsList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

#premiumCommentsList::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.2), rgba(255, 45, 85, 0.2));
    border-radius: 4px;
}

#premiumCommentsList::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.4), rgba(255, 45, 85, 0.4));
}

/* ===== BARRE DE SCROLL MODERNE ===== */
.premium-scrollbar {
    position: absolute;
    right: 6px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    z-index: 10;
    pointer-events: none;
}

.premium-scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.premium-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.3), rgba(255, 45, 85, 0.3));
    border-radius: 4px;
    transition: background 0.3s ease;
    min-height: 20px;
}

.premium-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(255, 45, 85, 0.5));
}

/* ===== BOUTON ENVOYER - rose pur ===== */
.send-btn-premium {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ff2d55 !important;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(255, 45, 85, 0.25);
    flex-shrink: 0;
    position: relative;
}

.send-btn-premium:hover:not(:disabled) {
    background: #ff2d55 !important;
    box-shadow: 0 8px 25px rgba(255, 45, 85, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.send-btn-premium:active:not(:disabled) {
    transform: scale(0.92);
}

.send-btn-premium:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.send-btn-premium i {
    font-size: 1rem;
    transform: rotate(0deg);
}





/* ===== NOTIFICATIONS ===== */
.notification-badge {
    position: relative;
}

.notification-badge .badge-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #0d0d0f;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

/* ===== MENTIONS AUTOCOMPLETE ===== */
.mentions-autocomplete {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(18, 18, 22, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid var(--comment-border);
    border-radius: 12px;
    padding: 6px 0;
    display: none;
    max-height: 150px;
    overflow-y: auto;
    box-shadow: var(--comment-shadow);
    z-index: 15;
}

.mentions-autocomplete.visible {
    display: block;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mentions-autocomplete .mention-item {
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
    font-size: 0.7rem;
    color: var(--comment-text);
}

.mentions-autocomplete .mention-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.mentions-autocomplete .mention-item .mention-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    font-weight: 700;
    color: #0d0d0f;
    background: linear-gradient(135deg, var(--comment-accent), var(--comment-primary));
    flex-shrink: 0;
}

.mentions-autocomplete .mention-item .mention-name {
    font-weight: 500;
}

.mentions-autocomplete .mention-item .mention-username {
    color: var(--comment-muted);
    font-size: 0.55rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .comments-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
    }

    .comments-modal-header {
        padding: 12px 14px 10px 14px;
    }

    .comments-modal-header .modal-title {
        font-size: 0.85rem;
    }

    .comments-law-preview {
        padding: 6px 14px 4px 14px;
    }

    .comments-law-preview .law-preview-title {
        font-size: 0.7rem;
    }

    .comments-list-container {
        padding: 4px 10px 4px 10px;
        max-height: 35vh;
    }

    .comment-item-premium {
        padding: 8px 4px;
        gap: 10px;
    }

    .comment-avatar-premium {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }

    .comment-body-premium .comment-text {
        font-size: 0.7rem;
    }

    .comment-input-area-premium {
        padding: 8px 10px 12px 10px;
    }

    .comment-input-wrapper-premium {
        padding: 4px 4px 4px 10px;
        min-height: 38px;
        border-radius: 16px;
    }

    .comment-input-wrapper-premium .input-fields textarea {
        font-size: 0.7rem;
        min-height: 16px;
        max-height: 80px;
    }

    .comment-input-wrapper-premium .send-btn-premium {
        font-size: 0.55rem;
        padding: 4px 12px;
        height: 28px;
    }

    .comment-input-wrapper-premium .send-btn-premium span {
        display: none;
    }

    .comment-input-wrapper-premium .input-footer .input-actions button {
        font-size: 0.5rem;
    }

    .comment-replies {
        margin-left: 16px;
        padding-left: 8px;
    }

    .comment-replies .reply-item .reply-avatar {
        width: 22px;
        height: 22px;
        font-size: 0.45rem;
    }

    .comment-replies .reply-item .reply-text {
        font-size: 0.6rem;
    }

    .comments-stats {
        padding: 4px 14px 6px 14px;
        gap: 10px;
    }

    .emoji-picker-premium {
        width: 180px;
        max-height: 140px;
        grid-template-columns: repeat(6, 1fr);
        gap: 2px;
        padding: 6px 4px 4px 4px;
    }

    .emoji-picker-premium .emoji-option {
        font-size: 1rem;
        padding: 2px;
    }
}

@media (max-width: 400px) {
    .comments-modal {
        border-radius: 16px 16px 0 0;
    }

    .comments-modal-header .modal-title {
        font-size: 0.75rem;
    }

    .comments-modal-header .comment-count-badge {
        font-size: 0.5rem;
        padding: 2px 8px 2px 6px;
    }

    .comments-modal-header .comment-count-badge span {
        font-size: 0.55rem;
    }

    .comment-body-premium .comment-text {
        font-size: 0.65rem;
    }

    .comment-actions-premium button {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .comment-input-wrapper-premium .input-fields textarea {
        font-size: 0.6rem;
    }
}

/* ============================================================
   SCROLLBAR MODERNE INTERACTIVE (SANS FLÈCHES)
   ============================================================ */

/* ✅ CACHER LA SCROLLBAR NATIVE */
#premiumCommentsList {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

#premiumCommentsList::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* ✅ CONTENEUR PARENT POUR LA BARRE */
.comments-list-container {
    position: relative;
}

/* ✅ BARRE DE SCROLL MODERNE */
.premium-scrollbar {
    position: absolute;
    right: 4px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    z-index: 10;
    opacity: 0.3;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.premium-scrollbar:hover,
.premium-scrollbar.dragging {
    opacity: 1 !important;
}

/* ✅ TRACK (piste) */
.premium-scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    pointer-events: none;
}

/* ✅ THUMB (poignée interactive) */
.premium-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.3), rgba(255, 45, 85, 0.3));
    border-radius: 4px;
    transition: transform 0.15s ease, background 0.3s ease, height 0.2s ease;
    min-height: 20px;
    cursor: grab;
    pointer-events: auto !important;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.1);
}

.premium-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(255, 45, 85, 0.5));
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.2);
}

.premium-scrollbar-thumb:active {
    cursor: grabbing;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.7), rgba(255, 45, 85, 0.7));
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}

/* ✅ EFFET GLOW AU SURVOL DE LA LISTE */
.comments-list-container:hover .premium-scrollbar {
    opacity: 0.7;
}

.comments-list-container:hover .premium-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(255, 45, 85, 0.5));
}

/* ✅ ANIMATION D'APPARITION */
.premium-scrollbar {
    animation: scrollbarFadeIn 0.5s ease;
}

@keyframes scrollbarFadeIn {
    from {
        opacity: 0;
        transform: translateX(8px);
    }
    to {
        opacity: 0.3;
        transform: translateX(0);
    }
}

/* ✅ RESPONSIVE - BARRE PLUS LARGE SUR MOBILE */
@media (max-width: 600px) {
    .premium-scrollbar {
        right: 2px;
        width: 3px;
    }
    
    .premium-scrollbar-thumb {
        min-height: 16px;
    }
}

@media (pointer: coarse) {
    /* ✅ SUR LES ÉCRANS TACTILES, LA BARRE EST PLUS LARGE */
    .premium-scrollbar {
        width: 6px;
        right: 2px;
    }
    
    .premium-scrollbar-thumb {
        min-height: 30px;
        border-radius: 3px;
    }
}