/* style.css */

/* --- STRUCTURE PRINCIPALE --- */
body {
    font-family: sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Important pour le scroll custom */
    background-color: #fff;
}

.container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.pane {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden !important; /* On cache les barres natives */
    height: 100%;
    position: relative;
}

/* --- ÉDITEUR (Gauche) --- */
.editor-pane {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%;
    min-width: 100px;
    background-color: #263238;
}

.CodeMirror {
    height: 100% !important;
    font-size: 14px;
    line-height: 1.5;
    border: none;
    font-family: monospace;
}
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar { display: none !important; }

/* Couleurs CodeMirror Material */
.cm-s-material .cm-header-1 { color: rgb(255, 213, 0); font-weight: bold; }
.cm-s-material .cm-header-2 { color: rgb(0, 255, 0); font-weight: bold; }
.cm-s-material .cm-header-3 { color: seagreen; }
.cm-s-material .cm-formatting-header { color: #f0ad4e; font-weight: bold; }

/* --- RESIZER (Barre centrale) --- */
.resizer {
    flex: 0 0 5px;
    background-color: #ccc;
    cursor: col-resize;
    z-index: 10;
    transition: background-color 0.2s ease-in-out;
}
.resizer:hover { background-color: #bbb; }

/* --- PREVIEW (Droite) --- */
.preview-pane {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%;
    min-width: 100px;
    background-color: #fff;
}

#html-output-wrapper {
    flex-grow: 1;
    overflow: hidden !important; /* Géré par le maître scroller */
    padding: 0 20px;
    background-color: #f9f9f9;
    height: 100%;
    position: relative;
}

#html-output {
    word-wrap: break-word;
    position: relative;
    padding-top: 20px;
    /* IMPORTANT : Espace en bas pour permettre de remonter le dernier paragraphe */
    padding-bottom: 50px;
}

/* --- LE MAÎTRE SCROLLER --- */
#master-scroll-track {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 16px;
    overflow-y: scroll;
    z-index: 100;
}
#master-scroll-dummy { width: 1px; }

/* --- BOUTONS FIXES (ICÔNES) --- */
#preview-buttons {
    position: absolute;
    top: 10px;
    right: 30px; /* Décalé pour ne pas toucher la scrollbar */
    z-index: 1050;
    display: flex;
    gap: 8px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    opacity: 0.8;
}

.icon-btn:hover {
    opacity: 1;
    background-color: #e0e0e0;
    transform: translateY(-1px);
}

/* --- DESIGN CONTENU --- */

/* Tableaux */
#html-output table {
    border-collapse: collapse;
    margin: 1em 0;

    font-size: 0.9em;
    border: 1px solid #aaa;

        width: auto !important;          /* Le tableau s'adapte à son contenu */
        max-width: 100% !important;     /* Optionnel: pour s'assurer qu'il ne dépasse jamais la largeur de la page,
                                           tout en restant 'auto' s'il est plus étroit.
                                           Si vous êtes sûr que vos tableaux ne seront jamais trop larges,
                                           vous pouvez omettre max-width. */
                                       /* L'alignement à gauche est le comportement par défaut des éléments de bloc */
        page-break-inside: avoid !important;


}
#html-output th, #html-output td {
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    text-align: left;
}
#html-output th { background-color: #f7f7f7; font-weight: bold; color: #333; }
#html-output tbody tr:nth-child(even) { background-color: #fcfcfc; }
#html-output tbody tr:hover { background-color: #f0f0f0; }
#html-output td pre, #html-output th pre {
    margin: 0; background-color: transparent !important; border: none; padding: 0;
}

/* Citations */
#html-output blockquote {
    margin: 1.5em 0;
    padding: 15px 20px;
    background-color: #eef2f5;
    border-radius: 5px;
    color: #33475b;
    border-left: 5px solid #5c93c7;
}
#html-output blockquote p { margin: 0.5em 0; }
#html-output blockquote p:first-child { margin-top: 0; }
#html-output blockquote p:last-child { margin-bottom: 0; }

/* Code et Maths */
pre[class*="language-"] { background-color: #f6f8fa !important; }
pre[class*="language-"] code[class*="language-"] { color: #333; }



/* --- SIDEBAR SOMMAIRE --- */
#toc-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.15);
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ddd;
}

#toc-sidebar.active { transform: translateX(0); }

.toc-header {
    padding: 15px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toc-header h3 { margin: 0; font-size: 16px; color: #333; }
#closeTocBtn { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; }

#toc-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.toc-item {
    display: block; padding: 6px 15px; color: #333; font-size: 13px;
    cursor: pointer; border-left: 3px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toc-item:hover { background-color: #f0f0f0; color: #007bff; }

.toc-h1 { padding-left: 15px; font-weight: bold; }
.toc-h2 { padding-left: 40px; }
.toc-h3 { padding-left: 65px; color: #888; font-style: italic; }
.toc-h4 { padding-left: 80px; font-style: italic; }


/* --- IMPRESSION (PROPRE) --- */
@media print {
    @page {
        margin: 2cm; /* Vraies marges papier */
        size: auto;
    }

    body {
        margin: 0; padding: 0;
        overflow: visible !important; height: auto !important;
        background-color: white !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    
    .container { display: block !important; height: auto !important; }
    
    /* CACHER L'INTERFACE */
    .editor-pane, .resizer, #master-scroll-track, #preview-buttons, #toc-sidebar {
        display: none !important;
    }

    .preview-pane {
        flex: none !important; width: 100% !important; height: auto !important;
        overflow: visible !important; background: white !important;
        display: block !important;
    }

    #html-output-wrapper {
        overflow: visible !important; height: auto !important; padding: 0 !important;
        background: white !important; display: block !important;
    }

    #html-output {
        padding: 0 !important; margin: 0 !important; max-width: 100% !important;
    }
    
  
    /* Styles forcés */
    #html-output table { border: 1px solid #333 !important;
         width: auto !important;          /* Le tableau s'adapte à son contenu */
         max-width: 100% !important;
          page-break-inside: avoid !important; }

    #html-output th { background-color: #f7f7f7 !important; }
    #html-output blockquote { background-color: #eef2f5 !important; border-left-color: #5c93c7 !important; }
    
    a { text-decoration: underline; color: black !important; }
    h1, h2, h3 { page-break-after: avoid !important; }
}