/* writer_styles.css - Styles des documents rendus */
/* Version 1.0 */

/* ==================== PAGE DE DOCUMENT ==================== */

.document {
    background: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    margin: 0 auto;
    padding: 2.5cm;
    min-height: 29.7cm; /* A4 height */
    width: 21cm; /* A4 width */
    font-family: var(--doc-font, 'Arial');
    font-size: var(--doc-font-size, 12pt);
    line-height: 1.6;
    color: var(--text-color, #333);
}

/* Marges */
.document.margins-narrow {
    padding: 1.27cm;
}

.document.margins-normal {
    padding: 2.5cm;
}

.document.margins-wide {
    padding: 3.17cm;
}

/* ==================== PAGINATION MULTI-PAGES ==================== */

.pages-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.page-container {
    page-break-after: always;
}

@media print {
    .pages-container {
        gap: 0;
        padding: 0;
    }
    
    .page-container {
        box-shadow: none !important;
        margin: 0 !important;
    }
}

/* ==================== TITRES ==================== */

.document h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--title-color, #1a1a1a);
    border-bottom: 2px solid var(--primary-color, #007bff);
    padding-bottom: 0.5rem;
}

.document h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--subtitle-color, #333);
}

.document h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--subtitle-color, #333);
}

.document h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color, #333);
}

.document h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color, #333);
}

.document h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-color, #666);
}

/* ==================== PARAGRAPHES ==================== */

.document p {
    margin-bottom: 1rem;
    text-align: justify;
}

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

/* ==================== LISTES ==================== */

.document ul,
.document ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.document li {
    margin-bottom: 0.5rem;
}

.document ul ul,
.document ol ol,
.document ul ol,
.document ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ==================== CITATIONS ==================== */

.document blockquote {
    border-left: 4px solid var(--primary-color, #007bff);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #666;
    background: #f8f9fa;
    padding: 1rem 1rem 1rem 1.5rem;
}

/* ==================== CODE ==================== */

.document code {
    background: #f4f4f4;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #c7254e;
}

.document pre {
    background: #f4f4f4;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;
}

.document pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ==================== TABLEAUX ==================== */

.document table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.document th,
.document td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
}

.document th {
    background: var(--primary-color, #007bff);
    color: white;
    font-weight: 600;
}

.document tr:nth-child(even) {
    background: #f8f9fa;
}

/* ==================== IMAGES ==================== */

.document img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 4px;
    cursor: pointer;
}

.document img[style*="width"] {
    cursor: default;
}

/* ==================== POIGNÉES DE REDIMENSIONNEMENT IMAGE ==================== */
/* Classes partagées (proappli-image-resize.js) */

.proappli-image-resizer-overlay {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 500;
    border: 2px solid #0803aa;
    border-radius: 2px;
    background: rgba(8, 3, 170, 0.05);
}

.proappli-image-handle {
    position: absolute;
    pointer-events: all;
    z-index: 501;
    width: 44px;
    height: 44px;
}

.proappli-image-handle::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #0803aa;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.proappli-image-handle-nw {
    top: -22px;
    left: -22px;
    cursor: nwse-resize;
}

.proappli-image-handle-ne {
    top: -22px;
    right: -22px;
    cursor: nesw-resize;
}

.proappli-image-handle-se {
    bottom: -22px;
    right: -22px;
    cursor: nwse-resize;
}

.proappli-image-handle-sw {
    bottom: -22px;
    left: -22px;
    cursor: nesw-resize;
}

/* ==================== LIENS ==================== */

.document a {
    color: var(--primary-color, #007bff);
    text-decoration: none;
}

.document a:hover {
    text-decoration: underline;
}

/* ==================== LIGNE HORIZONTALE ==================== */

.document hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
}

/* ==================== NOTES DE BAS DE PAGE ==================== */

.document .footnote {
    font-size: 0.85rem;
    color: #666;
    border-top: 1px solid #ddd;
    margin-top: 2rem;
    padding-top: 1rem;
}

/* ==================== MÉTADONNÉES DU DOCUMENT ==================== */

.document-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
}

.document-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--title-color, #1a1a1a);
}

.document-meta {
    color: #666;
    font-size: 0.95rem;
}

.document-author {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.document-date {
    font-style: italic;
}

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

/* Thème Moderne (défaut) */
.theme-modern {
    --doc-font: 'Arial', sans-serif;
    --title-color: #1a1a1a;
    --subtitle-color: #333;
    --text-color: #333;
    --primary-color: #007bff;
    --bg-page: white;
}

/* Thème Classique */
.theme-classic {
    --doc-font: 'Georgia', serif;
    --title-color: #2c3e50;
    --subtitle-color: #34495e;
    --text-color: #2c3e50;
    --primary-color: #2980b9;
    --bg-page: #fafafa;
}

/* Thème Minimaliste */
.theme-minimal {
    --doc-font: 'Helvetica', 'Arial', sans-serif;
    --title-color: #000;
    --subtitle-color: #333;
    --text-color: #333;
    --primary-color: #000;
    --bg-page: white;
}

.theme-minimal .document h1 {
    border-bottom: none;
}

/* Thème Académique */
.theme-academic {
    --doc-font: 'Times New Roman', serif;
    --title-color: #1a1a1a;
    --subtitle-color: #2c3e50;
    --text-color: #1a1a1a;
    --primary-color: #8e44ad;
    --bg-page: white;
}

.theme-academic .document {
    font-size: 12pt;
    line-height: 2;
}

.theme-academic .document p {
    text-indent: 2em;
}

.theme-academic .document p:first-of-type {
    text-indent: 0;
}

/* Thème Tech */
.theme-tech {
    --doc-font: 'Consolas', 'Monaco', monospace;
    --title-color: #0366d6;
    --subtitle-color: #24292e;
    --text-color: #24292e;
    --primary-color: #0366d6;
    --bg-page: #f6f8fa;
}

/* Thème Élégant */
.theme-elegant {
    --doc-font: 'Garamond', serif;
    --title-color: #1a1a1a;
    --subtitle-color: #4a4a4a;
    --text-color: #333;
    --primary-color: #c79a6d;
    --bg-page: #fffef7;
}

.theme-elegant .document h1 {
    text-align: center;
    border-bottom: none;
    margin-bottom: 2rem;
}

/* ==================== STYLES DE DOCUMENTS ==================== */

/* Style Professionnel */
.style-professional .document {
    font-size: 11pt;
}

.style-professional .document h1 {
    color: #003366;
    border-bottom: 3px solid #003366;
}

/* Style Académique */
.style-academic .document {
    font-size: 12pt;
    line-height: 2;
}

.style-academic .document p {
    text-indent: 2em;
}

/* Style Journalistique */
.style-journalistic .document h1 {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.style-journalistic .document p:first-of-type {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Style Créatif */
.style-creative .document {
    font-family: 'Georgia', serif;
}

.style-creative .document h1 {
    font-style: italic;
    border-bottom: none;
    text-align: center;
}

/* Style Technique */
.style-technical .document {
    font-family: 'Arial', sans-serif;
}

.style-technical .document h2 {
    background: #f0f0f0;
    padding: 0.5rem 1rem;
    border-left: 4px solid var(--primary-color);
}

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

@media print {
    .document {
        box-shadow: none;
        margin: 0;
        width: 100%;
        min-height: 0;
    }
    
    .document h1,
    .document h2,
    .document h3 {
        page-break-after: avoid;
    }
    
    .document p,
    .document blockquote,
    .document table {
        page-break-inside: avoid;
    }
}

/* ==================== STYLES PAGINÉS (LIVRES / PRINT) ==================== */

/* Quand un format paginé est actif, tout passe en unités absolues */

.document.format-broche-kdp,
.document.format-a4 {
    font-size: 12pt;
    line-height: 1.6;
}

.document.format-broche-kdp h1,
.document.format-a4 h1 {
    font-size: 18pt;
    margin-top: 0.5cm;
    margin-bottom: 0.8cm;
    padding-bottom: 0.3cm;
}

.document.format-broche-kdp h2,
.document.format-a4 h2 {
    font-size: 15pt;
    margin-top: 1cm;
    margin-bottom: 0.5cm;
}

.document.format-broche-kdp h3,
.document.format-a4 h3 {
    font-size: 13pt;
    margin-top: 0.7cm;
    margin-bottom: 0.4cm;
}

.document.format-broche-kdp h4,
.document.format-a4 h4 {
    font-size: 12pt;
    margin-top: 0.5cm;
    margin-bottom: 0.3cm;
}

.document.format-broche-kdp p,
.document.format-a4 p {
    font-size: 12pt;
    margin-bottom: 0.4cm;
    text-align: justify;
    text-indent: 0.8cm;
}

/* Premier paragraphe après un titre : pas d'indentation */
.document.format-broche-kdp h1 + p,
.document.format-broche-kdp h2 + p,
.document.format-broche-kdp h3 + p,
.document.format-a4 h1 + p,
.document.format-a4 h2 + p,
.document.format-a4 h3 + p {
    text-indent: 0;
}

.document.format-broche-kdp ul,
.document.format-broche-kdp ol,
.document.format-a4 ul,
.document.format-a4 ol {
    margin-bottom: 0.4cm;
    padding-left: 1cm;
}

.document.format-broche-kdp li,
.document.format-a4 li {
    font-size: 12pt;
    margin-bottom: 0.2cm;
}

.document.format-broche-kdp blockquote,
.document.format-a4 blockquote {
    margin: 0.5cm 0;
    padding: 0.3cm 0.3cm 0.3cm 0.8cm;
    border-left-width: 0.1cm;
    font-size: 11pt;
}

.document.format-broche-kdp code,
.document.format-a4 code {
    font-size: 10pt;
}

.document.format-broche-kdp pre,
.document.format-a4 pre {
    font-size: 10pt;
    padding: 0.4cm;
    margin: 0.5cm 0;
}

.document.format-broche-kdp table,
.document.format-a4 table {
    margin: 0.5cm 0;
    font-size: 11pt;
}

.document.format-broche-kdp th,
.document.format-broche-kdp td,
.document.format-a4 th,
.document.format-a4 td {
    padding: 0.2cm 0.3cm;
}

.document.format-broche-kdp img,
.document.format-a4 img {
    max-width: 100%;
    height: auto;
    margin: 0.5cm auto;
}

.document.format-broche-kdp hr,
.document.format-a4 hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.document.format-broche-kdp .document-header,
.document.format-a4 .document-header {
    margin-bottom: 1.5cm;
    padding-bottom: 0.5cm;
}

.document.format-broche-kdp .document-title,
.document.format-a4 .document-title {
    font-size: 22pt;
    margin-bottom: 0.3cm;
}

.document.format-broche-kdp .document-meta,
.document.format-a4 .document-meta {
    font-size: 11pt;
}