/* Modes de page (work / sheet / preview) et tailles de papier (A3 / A4 / A5). */

.itf-editor-container {
    --itf-paper-width-a4:  794px;
    --itf-paper-width-a5:  559px;
    --itf-paper-width-a3:  1123px;
    --itf-paper-height-a4: 1123px;
    --itf-paper-height-a5: 794px;
    --itf-paper-height-a3: 1587px;
    --itf-paper-width:     var(--itf-paper-width-a4);
    --itf-paper-height:    var(--itf-paper-height-a4);
    --itf-work-width:      820px;
    --itf-stage-radius:    var(--itf-radius-lg);
    --itf-stage-shadow:    var(--itf-shadow);
    --itf-sheet-shadow:    0 18px 45px rgba(15, 23, 42, 0.18);
    --itf-shell-top-offset: var(--itf-space-3);
}

.itf-editor-container[data-itf-paper="a5"] {
    --itf-paper-width:  var(--itf-paper-width-a5);
    --itf-paper-height: var(--itf-paper-height-a5);
}

.itf-editor-container[data-itf-paper="a3"] {
    --itf-paper-width:  var(--itf-paper-width-a3);
    --itf-paper-height: var(--itf-paper-height-a3);
}

.itf-editor-container[data-itf-editor-theme="light"] .itf-editor-paper {
    background: linear-gradient(180deg, #eceff3 0%, #dde3ea 100%);
    border-color: rgba(71, 85, 105, 0.10);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

/* --- Mode "work" : largeur fixe agréable, pas de format papier strict. --- */
.itf-editor-container[data-itf-view-mode="work"] .wp-editor-wrap,
.itf-editor-container[data-itf-view-mode="work"] .mce-tinymce,
.itf-editor-container[data-itf-view-mode="work"] .tox-tinymce {
    width: var(--itf-work-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    box-shadow: var(--itf-sheet-shadow);
    border-radius: var(--itf-radius-sm);
    overflow: hidden;
}

.itf-editor-container[data-itf-view-mode="work"] .mce-edit-area iframe,
.itf-editor-container[data-itf-view-mode="work"] .tox-edit-area iframe {
    min-height: 68vh;
}

/* --- Mode "sheet" : largeur du papier choisi. --- */
.itf-editor-container[data-itf-view-mode="sheet"] .wp-editor-wrap,
.itf-editor-container[data-itf-view-mode="sheet"] .mce-tinymce,
.itf-editor-container[data-itf-view-mode="sheet"] .tox-tinymce {
    width: min(var(--itf-paper-width), calc(100vw - 110px));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    box-shadow: var(--itf-sheet-shadow);
    border-radius: var(--itf-radius-sm);
    overflow: hidden;
}

.itf-editor-container[data-itf-view-mode="sheet"] .mce-edit-area iframe,
.itf-editor-container[data-itf-view-mode="sheet"] .tox-edit-area iframe {
    min-height: var(--itf-paper-height);
}

/* --- Mode "preview" : pleine page, sans iframe d'édition visible. --- */
.itf-editor-container[data-itf-view-mode="preview"] .wp-editor-wrap,
.itf-editor-container[data-itf-view-mode="preview"] .mce-tinymce,
.itf-editor-container[data-itf-view-mode="preview"] .tox-tinymce {
    width: min(var(--itf-paper-width), calc(100vw - 110px));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.itf-editor-container[data-itf-view-mode="preview"] .mce-edit-area,
.itf-editor-container[data-itf-view-mode="preview"] .tox-edit-area,
.itf-editor-container[data-itf-view-mode="preview"] .mce-statusbar,
.itf-editor-container[data-itf-view-mode="preview"] .tox-statusbar,
.itf-editor-container[data-itf-view-mode="preview"] textarea.wp-editor-area {
    display: none;
}

/* Toolbar sticky en haut de la coque pour ne pas perdre les boutons en scrollant. */
.itf-editor-container .mce-toolbar-grp,
.itf-editor-container .mce-top-part,
.itf-editor-container .tox-editor-header {
    position: sticky;
    top: var(--itf-shell-top-offset);
    z-index: var(--itf-z-sticky);
}

/* Sélecteur de modes de page (boutons rapides au-dessus de l'éditeur). */
.itf-page-modes-toolbar {
    display: inline-flex;
    align-items: center;
    gap: var(--itf-space-2);
    margin-left: var(--itf-space-2);
    flex-wrap: wrap;
}

.itf-page-modes-toolbar__group,
.itf-page-modes-toolbar__sizes,
.itf-page-modes-toolbar__theme-group {
    display: inline-flex;
    align-items: center;
    gap: var(--itf-space-1);
}

.itf-page-modes-toolbar__btn {
    background: var(--itf-card-2);
    border: 1px solid var(--itf-border);
    color: var(--itf-text);
    padding: var(--itf-space-1) var(--itf-space-3);
    border-radius: var(--itf-radius-sm);
    font-size: var(--itf-font-size-sm);
    cursor: pointer;
}

.itf-page-modes-toolbar__btn.is-active {
    background: var(--itf-primary);
    color: var(--itf-text-on-primary);
    border-color: var(--itf-primary);
}