/* writer_responsive.css - Media queries pour responsive */
/* Version 1.0 */

/* ==================== TABLETTES (max-width: 1024px) ==================== */

@media (max-width: 1024px) {
    .document {
        width: 100%;
        max-width: 21cm;
        padding: 2cm;
    }
    
    .editor-toolbar {
        padding: 0.6rem 1rem;
    }
    
    .editor-header {
        padding: 0.6rem 1rem;
    }
    
    .header-left h1 {
        font-size: 1.2rem;
    }
    
    .document-name-input {
        min-width: 250px;
    }
    
    .toc-panel {
        width: 200px;
    }
}

/* ==================== TABLETTES PORTRAIT (max-width: 768px) ==================== */

@media (max-width: 768px) {
    .editor-header {
        padding: 0 0.5rem;
        gap: 4px;
        min-height: 44px;
    }

    .header-left {
        flex-shrink: 1;
        min-width: 0;
        gap: 0.4rem;
    }

    .header-left .app-name {
        display: none;
    }

    .header-actions {
        flex: 1;
        justify-content: flex-start;
    }
    
    .document {
        width: 100%;
        padding: 1.5cm;
        font-size: 11pt;
    }
    
    .document h1 {
        font-size: 1.8rem;
    }
    
    .document h2 {
        font-size: 1.4rem;
    }
    
    .document h3 {
        font-size: 1.2rem;
    }
    
    .editor-toolbar {
        padding: 0.5rem;
        gap: 0.25rem;
    }
    
    .btn-tool {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .toolbar-separator {
        height: 25px;
    }
    
    .document-name-input {
        min-width: 100%;
    }
    
    .modal-content {
        width: 95%;
        margin: 2% auto;
    }
    
    .toc-panel {
        width: 180px;
    }
    
    #tocContent a {
        font-size: 0.85rem;
        padding: 0.4rem;
    }
}

/* ==================== MOBILES (max-width: 480px) ==================== */

@media (max-width: 480px) {
    .toc-panel {
        position: fixed;
        left: 0;
        top: 60px;
        bottom: 0;
        width: 250px;
        z-index: 1500;
        transform: translateX(-100%);
        transition: transform 0.3s;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }
    
    .toc-panel:not(.hidden) {
        transform: translateX(0);
    }
    
    .document-preview {
        padding: 1rem;
    }
    
    .document {
        width: 100%;
        padding: 1cm;
        box-shadow: none;
        font-size: 10pt;
    }
    
    .document h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .document h2 {
        font-size: 1.3rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .document h3 {
        font-size: 1.1rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .document p {
        margin-bottom: 0.75rem;
    }
    
    .document ul,
    .document ol {
        margin-left: 1.5rem;
    }
    
    .header-left h1 {
        font-size: 1rem;
    }
    
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .btn-tool {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .word-count {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .toolbar-separator {
        display: none;
    }
    
    .code-section {
        max-height: 200px;
    }
    
    .markdown-editor {
        font-size: 0.8rem;
        min-height: 150px;
    }
    
    .style-menu,
    .theme-menu {
        max-width: 100%;
        left: auto;
        right: 0;
    }
    
    .style-option {
        padding: 0.75rem;
    }
    
    .style-icon {
        font-size: 1.5rem;
    }
    
    .style-info strong {
        font-size: 0.9rem;
    }
    
    .style-info small {
        font-size: 0.8rem;
    }
    
    .document-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }
    
    .document-title {
        font-size: 2rem;
    }
    
    .document-meta {
        font-size: 0.85rem;
    }
}

/* ==================== TOOLBAR ICÔNES SEULES (smartphone vertical, 2026-09-14) ====================
   Gagne de la place sur les boutons Ouvrir / Nouveau / Sauver / Lire : on garde
   l'icône, on masque juste le libellé texte. Uniquement en portrait smartphone
   (le mode paysage mobile et le desktop gardent le texte). */
@media (max-width: 480px) and (orientation: portrait) {
    #btnOpenDropdown [data-i18n="open"],
    #btnNewDropdown [data-i18n="new"],
    #btnSave [data-i18n="save"],
    #btnWriterView .tb-label {
        display: none;
    }
}

/* ==================== MODE PAYSAGE MOBILE ==================== */

@media (max-width: 768px) and (orientation: landscape) {
    .document-preview {
        padding: 0.5rem;
    }
    
    .document {
        padding: 1cm;
    }
    
    .editor-toolbar {
        padding: 0.5rem;
    }
}

/* ==================== GRANDS ÉCRANS (min-width: 1920px) ==================== */

@media (min-width: 1920px) {
    .document {
        width: 21cm;
        padding: 2.5cm;
    }
    
    .toc-panel {
        width: 300px;
    }
    
    #tocContent a {
        font-size: 1rem;
        padding: 0.6rem;
    }
}

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

@media print {
    .editor-header,
    .editor-toolbar,
    .toc-panel,
    .code-section,
    .status-message {
        display: none !important;
    }
    
    .editor-container {
        height: auto;
    }
    
    .editor-main {
        display: block;
    }
    
    .editor-content {
        overflow: visible;
    }
    
    .document-preview {
        padding: 0;
        background: white;
    }
    
    .document {
        width: 100%;
        box-shadow: none;
        page-break-after: always;
        margin: 0;
        padding: 0;
    }
    
    .document h1,
    .document h2,
    .document h3 {
        page-break-after: avoid;
    }
    
    .document p,
    .document blockquote,
    .document table {
        page-break-inside: avoid;
    }
    
    .document a {
        color: #000;
        text-decoration: underline;
    }
    
    .document a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ==================== MODE SOMBRE (si souhaité) ==================== */

/* ==================== SELECTEUR DE TYPE DE DOCUMENT IA — TABLETTES (max-width: 768px) ==================== */

@media (max-width: 768px) {
    #typePickerOverlay {
        padding: 0;
    }

    #typePickerPanel {
        max-width: 100%;
        min-height: 100%;
        border-radius: 0;
        padding: 18px 14px 28px;
    }
}

/* ==================== SELECTEUR DE TYPE DE DOCUMENT IA — MOBILES (max-width: 480px) ==================== */

@media (max-width: 480px) {
    .tp-header {
        margin-bottom: 12px;
    }

    .tp-title {
        font-size: 1.05rem;
    }

    .tp-subtitle {
        display: none;
    }

    .tp-header-actions {
        gap: 6px;
    }

    .tp-btn-alt {
        padding: 6px 12px;
        font-size: .8rem;
    }

    .tp-close {
        width: 30px;
        height: 30px;
        font-size: 1.15rem;
    }

    .tp-cat-head {
        padding: 14px 2px;
        min-height: 44px;
    }

    .tp-chip {
        padding: 9px 14px;
        font-size: .85rem;
    }
}

@media (prefers-color-scheme: dark) {
    /* Optionnel : ajouter un mode sombre */
    /* 
    body {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    .document {
        background: #2a2a2a;
        color: #e0e0e0;
    }
    */
}