/* ==================================================
   E-LEARNING COURSE CONTENT STYLES FOR MARKED.JS
   Color Scheme: Teal/Turquoise (#49BBBD, #2E8B8B)
   ================================================== */

/* Base Typography and Container */
.course-content {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7;
    color: #2c3e50;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
}

/* Headings */
.course-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 3px solid #49BBBD;
    position: relative;
}

.course-content h1::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 80px;
    height: 3px;
    background: #2E8B8B;
    border-radius: 2px;
}

.course-content h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 40px 0 20px 0;
    padding-left: 20px;
    position: relative;
    border-left: 4px solid #49BBBD;
}

.course-content h2::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #49BBBD 0%, #2E8B8B 100%);
    border-radius: 2px;
}

.course-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 30px 0 15px 0;
    position: relative;
    padding-left: 15px;
}

.course-content h3::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #49BBBD;
    font-weight: bold;
}

.course-content h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #34495e;
    margin: 25px 0 12px 0;
}

.course-content h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #34495e;
    margin: 20px 0 10px 0;
}

.course-content h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #7f8c8d;
    margin: 15px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Paragraphs */
.course-content p {
    margin: 0 0 18px 0;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

.course-content p:last-child {
    margin-bottom: 0;
}

/* Lists */
.course-content ul, 
.course-content ol {
    margin: 20px 0;
    padding-left: 0;
    list-style: none;
}

.course-content ul li, 
.course-content ol li {
    margin: 12px 0;
    padding-left: 35px;
    position: relative;
    line-height: 1.6;
    color: #555;
}

/* First Level Unordered Lists */
.course-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #49BBBD;
    font-weight: bold;
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(73, 187, 189, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #49BBBD;
}

/* First Level Ordered Lists */
.course-content ol {
    counter-reset: custom-counter;
}

.course-content ol li {
    counter-increment: custom-counter;
}

.course-content ol li::before {
    content: counter(custom-counter);
    position: absolute;
    left: 0;
    top: 5px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #49BBBD 0%, #2E8B8B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(73, 187, 189, 0.3);
}

/* Nested Lists */
.course-content ul ul, 
.course-content ol ol,
.course-content ul ol,
.course-content ol ul {
    margin: 10px 0;
    padding-left: 25px;
}

/* Second Level Lists - No Numbers/Counters */
.course-content ul ul li::before,
.course-content ol ol li::before,
.course-content ul ol li::before,
.course-content ol ul li::before {
    content: '→';
    background: rgba(73, 187, 189, 0.05);
    border: 1px solid #49BBBD;
    color: #2E8B8B;
    width: 16px;
    height: 16px;
    font-size: 12px;
    counter-increment: none;
}

/* Reset counter behavior for nested ordered lists */
.course-content ol ol {
    counter-reset: none;
}

.course-content ol ol li {
    counter-increment: none;
}

/* Third Level and Beyond */
.course-content ul ul ul li::before,
.course-content ol ol ol li::before,
.course-content ul ol ul li::before,
.course-content ol ul ol li::before,
.course-content ul ul ol li::before,
.course-content ol ol ul li::before {
    content: '•';
    background: rgba(73, 187, 189, 0.03);
    border: 1px solid rgba(73, 187, 189, 0.3);
    color: #7f8c8d;
    width: 14px;
    height: 14px;
    font-size: 10px;
}

/* Fourth Level and Beyond */
.course-content ul ul ul ul li::before,
.course-content ol ol ol ol li::before {
    content: '◦';
    background: transparent;
    border: 1px solid rgba(73, 187, 189, 0.2);
    color: #bdc3c7;
    width: 12px;
    height: 12px;
    font-size: 8px;
}

/* Links */
.course-content a {
    color: #49BBBD;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.course-content a:hover {
    color: #2E8B8B;
    border-bottom-color: #2E8B8B;
    text-decoration: none;
}

.course-content a:active {
    transform: translateY(1px);
}

/* Emphasis and Strong */
.course-content em {
    font-style: italic;
    color: #34495e;
    background: rgba(73, 187, 189, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

.course-content strong {
    font-weight: 600;
    color: #2c3e50;
}

/* Code Elements */
.course-content code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    background: #f8f9fa;
    color: #e74c3c;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.course-content pre {
    background: #282c34;
    color: #abb2bf;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 25px 0;
    border-left: 4px solid #49BBBD;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.course-content pre code,
.course-content pre .hljs {
    background: transparent;
    padding: 0;
    border: none;
    font-size: 14px;
    line-height: 1.6;
}

/* Blockquotes */
.course-content blockquote {
    margin: 30px 0;
    padding: 20px 25px;
    background: linear-gradient(135deg, rgba(73, 187, 189, 0.05) 0%, rgba(46, 139, 139, 0.05) 100%);
    border-left: 4px solid #49BBBD;
    border-radius: 0 8px 8px 0;
    position: relative;
    font-style: italic;
    color: #34495e;
}

.course-content blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 15px;
    font-size: 4rem;
    color: #49BBBD;
    opacity: 0.3;
    font-family: serif;
}

.course-content blockquote p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.6;
}

.course-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Tables — wrapped in `.table-wrapper` by markdown-doc-js for horizontal
   scroll on narrow viewports. The wrapper owns the spacing so the table
   itself can sit flush inside it. */
.course-content .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 25px 0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.course-content .table-wrapper > table {
    margin: 0;
    box-shadow: none;
    /* round corners come from the wrapper now */
    border-radius: 0;
}

.course-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.course-content table thead {
    background: linear-gradient(135deg, #49BBBD 0%, #2E8B8B 100%);
    color: white;
}

.course-content table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-content table td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
    color: #555;
}

.course-content table tbody tr:hover {
    background: rgba(73, 187, 189, 0.05);
}

.course-content table tbody tr:last-child td {
    border-bottom: none;
}

/* Horizontal Rules */
.course-content hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #49BBBD 50%, transparent 100%);
    margin: 40px 0;
    border-radius: 1px;
}

/* Images */
.course-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.course-content img:hover {
    transform: scale(1.02);
}

/* Task Lists (GitHub-style) */
.course-content ul.task-list {
    list-style: none;
    padding-left: 0;
}

.course-content .task-list-item {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
    padding-left: 0;
}

.course-content .task-list-item::before {
    display: none;
}

.course-content .task-list-item input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #49BBBD;
}

/* Definition Lists */
.course-content dl {
    margin: 20px 0;
}

.course-content dt {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.course-content dd {
    margin: 0 0 15px 20px;
    color: #555;
    padding-left: 15px;
    border-left: 2px solid #49BBBD;
}

/* Special Content Boxes */
.course-content .info-box,
.course-content .warning-box,
.course-content .success-box,
.course-content .error-box {
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
    border-left: 4px solid;
    position: relative;
}

.course-content .info-box {
    background: rgba(52, 152, 219, 0.1);
    border-left-color: #3498db;
    color: #2c3e50;
}

.course-content .warning-box {
    background: rgba(243, 156, 18, 0.1);
    border-left-color: #f39c12;
    color: #2c3e50;
}

.course-content .success-box {
    background: rgba(39, 174, 96, 0.1);
    border-left-color: #27ae60;
    color: #2c3e50;
}

.course-content .error-box {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: #e74c3c;
    color: #2c3e50;
}

/* Keyboard Shortcuts */
.course-content kbd {
    background: #34495e;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid #2c3e50;
}

/* Abbreviations */
.course-content abbr {
    text-decoration: underline dotted;
    cursor: help;
    color: #49BBBD;
}

/* Subscript and Superscript */
.course-content sub,
.course-content sup {
    font-size: 0.8em;
    color: #7f8c8d;
}

/* =============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================= */

/* Each keyframe ends at `transform: none` rather than the equivalent identity
   value (translateY(0) / scale(1) / etc). Visually identical, but `none`
   does NOT leave a stacking context behind — which avoids a compositor bug
   where inline backgrounds (e.g. an <em> pill) keep painting while the
   surrounding text glyphs vanish (parent layer stuck at opacity<1). */

@keyframes cmFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@keyframes cmFadeLeft {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes cmFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes cmSlideRule {
    from { opacity: 0; transform: scaleX(0); transform-origin: left; }
    to   { opacity: 1; transform: none; transform-origin: left; }
}

.course-content .cm-animate {
    opacity: 0;
}

.course-content .cm-animate.cm-visible.cm-fade-up {
    animation: cmFadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.course-content .cm-animate.cm-visible.cm-fade-left {
    animation: cmFadeLeft 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.course-content .cm-animate.cm-visible.cm-fade-in {
    animation: cmFadeIn 0.5s ease forwards;
}

.course-content .cm-animate.cm-visible.cm-slide-rule {
    animation: cmSlideRule 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .course-content .cm-animate {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Pop des icônes ✓ au moment où chaque li apparaît */
@keyframes cmCheckPop {
    0%   { transform: scale(0) rotate(-15deg); }
    70%  { transform: scale(1.3) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.course-content li.cm-animate.cm-visible.cm-fade-up::before {
    animation: cmCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--cm-delay, 0ms) both;
}

/* Cartes "Au programme" */
.course-content .chapter-program {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0 1.5rem;
}

.course-content .chapter-program-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    background: #fff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-content .chapter-program-card:hover {
    border-color: #49BBBD;
    box-shadow: 0 4px 16px rgba(73, 187, 189, 0.12);
    transform: translateY(-3px);
}

.course-content .cpc-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #49BBBD, #2E8B8B);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.course-content .cpc-title {
    font-weight: 500;
    color: #2c3e50;
    font-size: 0.95rem;
}

/* Print Styles */
@media print {
    .course-content {
        box-shadow: none;
        border-radius: 0;
    }
    
    .course-content a {
        color: #2c3e50 !important;
        text-decoration: underline !important;
    }
    
    .course-content blockquote {
        page-break-inside: avoid;
    }
    
    .course-content table {
        page-break-inside: avoid;
    }
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .course-content {
        padding: 15px;
        margin: 10px;
        border-radius: 8px;
    }
    
    .course-content h1 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .course-content h2 {
        font-size: 1.5rem;
        margin: 30px 0 15px 0;
        padding-left: 15px;
    }
    
    .course-content h3 {
        font-size: 1.2rem;
    }
    
    .course-content ul li,
    .course-content ol li {
        padding-left: 30px;
    }
    
    .course-content table {
        font-size: 14px;
    }
    
    .course-content table th,
    .course-content table td {
        padding: 10px 8px;
    }
    
    .course-content pre {
        padding: 15px;
        font-size: 13px;
        overflow-x: auto;
    }
    
    .course-content blockquote {
        padding: 15px 20px;
        margin: 20px 0;
    }
}

@media screen and (max-width: 480px) {
    .course-content {
        padding: 12px;
    }
    
    .course-content h1 {
        font-size: 1.7rem;
    }
    
    .course-content h2 {
        font-size: 1.3rem;
    }
    
    .course-content table {
        font-size: 12px;
    }
    
    .course-content ul li,
    .course-content ol li {
        padding-left: 25px;
    }
}

/* =========================================================================
   EXPORT HOMOGENEITY OVERRIDES
   These neutralize CSS-only decorations (gradients, pseudo-element shapes,
   box-shadows, ::after stubs) that have no equivalent in DOCX. The preview
   then matches what markdown-doc-js's exportDocx / exportPdf produces.
   ========================================================================= */

/* H1: drop the dark-teal stub — DOCX only has a single bottom border */
.course-content h1::after { content: none; }

/* H2: drop the gradient ::before bar; the existing 4px solid border-left
   is what DOCX will reproduce */
.course-content h2::before { content: none; }

/* H3: keep the triangle, but as plain inline text (no positioning, no
   background, no sized box) so it matches the lib's `headingPrefix.h3` */
.course-content h3 { padding-left: 0; }
.course-content h3::before {
    content: '▸  ';
    position: static;
    display: inline;
    color: #49BBBD;
    font-weight: bold;
    background: none;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
}

/* H6: uppercase + spaced — already in original CSS, kept */

/* UL: replace the circle-with-border bullet with a plain ✓ glyph (matches
   the lib's `bulletGlyph: '✓'`) */
.course-content ul li {
    padding-left: 22px;
}
.course-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #49BBBD;
    font-weight: bold;
    background: none;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    display: inline;
    font-size: inherit;
}

/* Nested UL: → arrow, plain text */
.course-content ul ul li::before,
.course-content ol ol li::before,
.course-content ul ol li::before,
.course-content ol ul li::before {
    content: '→';
    color: #2E8B8B;
    background: none;
    border: none;
    width: auto;
    height: auto;
}

/* OL: drop the gradient circle counter and use native numbering — DOCX
   only supports decimal/lowerLetter/lowerRoman, not fancy badges */
.course-content ol {
    list-style: decimal;
    padding-left: 28px;
    counter-reset: none;
}
.course-content ol li {
    padding-left: 0;
    counter-increment: none;
}
.course-content ol li::before { content: none; }

/* Blockquote: drop the giant " decoration; left border + tinted bg stay */
.course-content blockquote::before { content: none; }
.course-content blockquote {
    background: rgba(73, 187, 189, 0.1);  /* solid, not gradient */
}

/* HR: solid line, no gradient. Matches `BorderStyle.SINGLE` in DOCX */
.course-content hr {
    background: none;
    border: none;
    border-top: 1px solid #BFBFBF;
    height: 0;
    border-radius: 0;
}

/* Tables: solid teal header (no gradient), matches `tableHeaderBg` */
.course-content table thead {
    background: #49BBBD;
}
/* th uses the existing uppercase + letter-spacing rules (matches
   `tableHeaderUpper: true` in the lib) */

/* pre: drop the box-shadow; the dark bg + teal left accent already match */
.course-content pre { box-shadow: none; }

/* em: italic + a slightly distinctive color, no background fill.
   Earlier we tried a teal-tinted background. It rendered fine in the live
   preview (browsers correctly paint a per-line background for multi-line
   inline elements), but html2canvas — used by the PDF export — does not
   honor `box-decoration-break` and paints the em's bounding box as a
   SINGLE rectangle that spans every line the em wraps onto. That single
   rectangle then covered the surrounding text glyphs and produced the
   "phantom box wrapping the whole paragraph" bug.
   The simplest portable fix is no background at all. */
.course-content em {
    background: transparent;
    padding: 0;
    border-radius: 0;
}