/* Shell mobile MasterPaint — disposition type app (dock + sheets) */

body.illu-mobile-shell-active {
    --illu-mobile-touch: 52px;
    --illu-mobile-dock-h: 41px ;
    --illu-mobile-panel-bottom: calc(var(--illu-mobile-dock-h, 64px) + 4px);
    --illu-mobile-dock-btn-w: 68px;
    --illu-mobile-dock-menu-w: 50px;
    --illu-mobile-dock-bg: var(--mp-dock-bg, #c0c0c0);
    --illu-mobile-dock-scroll-bg: color-mix(in srgb, var(--mp-dock-bg, #c0c0c0) 92%, var(--mp-text, #1a1a1a) 8%);
    /* Barres de défilement compactes (surcharge --mp-scrollbar-* globales) */
    --mp-scrollbar-size: 4px;
    --mp-scrollbar-size-h: 4px;
    --illu-mobile-scroll-thumb: rgba(0, 0, 0, 0.32);
    --illu-mobile-scroll-track: var(--illu-mobile-dock-scroll-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--illu-mobile-scroll-thumb) var(--illu-mobile-scroll-track);
}

/* Modales / effets ancrés en bas : au-dessus du dock */
body.illu-mobile-shell-active.effect-dialog-open #effect-dialog {
    padding-bottom: var(--illu-mobile-panel-bottom) !important;
    box-sizing: border-box !important;
}

body.illu-mobile-shell-active #settings-overlay,
body.illu-mobile-shell-active #welcome-overlay,
body.illu-mobile-shell-active #dialog-overlay,
body.illu-mobile-shell-active #illu-alert-overlay,
body.illu-mobile-shell-active #close-tab-overlay,
body.illu-mobile-shell-active #import-choice-overlay,
body.illu-mobile-shell-active #import-oversize-overlay,
body.illu-mobile-shell-active #export-dialog-overlay,
body.illu-mobile-shell-active #image-bounds-overlay {
    padding-bottom: var(--illu-mobile-panel-bottom) !important;
    box-sizing: border-box !important;
}

body.illu-mobile-shell-active .illu-crop-panel-host {
    left: 6px !important;
    right: 6px !important;
    top: auto !important;
    bottom: var(--illu-mobile-panel-bottom) !important;
    max-width: none !important;
    width: auto !important;
    align-items: stretch !important;
}

body.illu-mobile-shell-active .illu-crop-panel-host .illu-crop-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 130px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

body.illu-mobile-shell-active .illu-crop-panel-host .illu-crop-panel-body {
    overflow: visible !important;
    flex: 0 0 auto !important;
}

body.illu-mobile-shell-active .illu-crop-panel-host .illu-crop-ratio-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    visibility: visible !important;
}

body.illu-mobile-shell-active .illu-crop-panel-host .illu-crop-ratio-btn {
    min-height: 44px !important;
    visibility: visible !important;
}

@media (max-width: 480px) {
    body.illu-mobile-shell-active .illu-crop-panel-host .illu-crop-ratio-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.illu-mobile-shell-active .illu-crop-panel-host .illu-crop-ratio-btn--free {
        grid-column: span 2 !important;
    }
}

/* Masquer le chrome bureau */
body.illu-mobile-shell-active #tab-bar-outer,
body.illu-mobile-shell-active #illu-mobile-toolbar-host,
body.illu-mobile-shell-active .illu-pdn-edge-strip,
body.illu-mobile-shell-active #illu-pdn-bottom-dock,
body.illu-mobile-shell-active .editor-dock-row .palette-dock,
body.illu-mobile-shell-active li.menubar-contact-btn,
body.illu-mobile-shell-active menu.illu-menubar-root {
    display: none !important;
}

/* En-tête mobile : barre document + barre d’actions (comme avant shell v2) */
body.illu-mobile-shell-active #illu-mobile-top-bar {
    display: flex !important;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--mp-title-light, #6aadad) 0%, var(--mp-title, #065a5a) 100%);
    border-bottom: 1px solid var(--mp-dock-border, #404040);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-container {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--mp-surface, #c0c0c0);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-bar-row1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    align-content: flex-start;
    overflow: visible !important;
    min-height: 44px;
    max-height: none !important;
    padding: 0 !important;
    border-bottom: none !important;
    gap: 4px 6px;
}

body.illu-mobile-shell-active #tool-pinned-toggles #illu-tb-undo,
body.illu-mobile-shell-active #tool-pinned-toggles #illu-tb-redo,
body.illu-mobile-shell-active #tool-pinned-toggles #illu-tb-print + .illu-menubar-toolbar__sep,
body.illu-mobile-shell-active #tool-pinned-toggles #illu-tb-redo + .illu-menubar-toolbar__sep,
body.illu-mobile-shell-active #tool-options-bar-row1 #illu-tb-undo,
body.illu-mobile-shell-active #tool-options-bar-row1 #illu-tb-redo,
body.illu-mobile-shell-active #tool-options-bar-row1 #illu-tb-print + .illu-menubar-toolbar__sep,
body.illu-mobile-shell-active #tool-options-bar-row1 #illu-tb-redo + .illu-menubar-toolbar__sep {
    display: none !important;
}

body.illu-mobile-shell-active #tool-pinned-toggles > .illu-menubar-toolbar,
body.illu-mobile-shell-active #tool-pinned-toggles > .illu-tool-pinned-toolbar-sep,
body.illu-mobile-shell-active #tool-options-bar-row1 .illu-menubar-toolbar {
    display: none !important;
}

/* Sélecteur + icônes : un seul conteneur flex (#tool-pinned-toggles) */
body.illu-mobile-shell-active.illu-toolbar-ribbon #tool-options-bar-row1 > #tool-pinned-toggles {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
}

body.illu-mobile-shell-active.illu-toolbar-ribbon #tool-options-bar-2 {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-bar-row1 > #tool-pinned-toggles {
    flex: 1 1 100%;
    width: 100%;
}

body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-pinned-toggles {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    gap: 4px 6px !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
}

body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-pinned-toggles > .opt-grp:not([hidden]) {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px;
}

body.illu-mobile-shell-active #tool-pinned-toggles > .illu-menubar-toolbar,
body.illu-mobile-shell-active #tool-pinned-toggles > .illu-tool-pinned-toolbar-sep {
    display: none !important;
}

body.illu-mobile-shell-active #tool-pinned-toggles > #tool-main-header {
    display: flex !important;
    flex: 0 0 auto;
    min-width: 0;
    max-width: min(38vw, 156px);
    box-sizing: border-box;
}

body.illu-mobile-shell-active #illu-mobile-sheet-tools-body #main-toolbox.tool-grid--pdn .tool-btn.tool-btn--span-2 {
    grid-column: span 1 !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Ruban : ne pas aplatir les groupes (sinon les boutons débordent sous les alvéoles voisines) */
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-pinned-toggles .illu-icon-toggle-group,
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-pinned-toggles .illu-mode-toggle-group {
    display: contents !important;
}

body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-pinned-toggles .illu-mode-toggle-item {
    display: inline-flex !important;
    flex: 0 0 auto;
}

body.illu-mobile-shell-active #tool-pinned-toggles .opt-sep,
body.illu-mobile-shell-active #tool-options-bar-row1 > .opt-sep {
    display: none !important;
}

/* Libellés courts (hors ruban Office) */
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-pinned-toggles .illu-mode-toggle-lbl,
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-bar-row1 .illu-mode-toggle-lbl,
body.illu-mobile-shell-active .illu-mobile-opt-strip .illu-mode-toggle-lbl {
    display: inline !important;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-pinned-toggles .illu-mode-toggle-item,
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-bar-row1 .illu-mode-toggle-item,
body.illu-mobile-shell-active .illu-mobile-opt-strip .illu-mode-toggle-item {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0;
}

body.illu-mobile-shell-active #tool-options-bar-row1 .illu-menubar-icon-btn {
    min-width: 40px;
    min-height: 40px;
    font-size: 16px;
}

.illu-mobile-top-bar__btn,
.illu-mobile-top-bar__title-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    background: var(--mp-surface-deep, #d4d0c8);
    color: var(--mp-text, #000);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.illu-mobile-top-bar__btn {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 18px;
}

.illu-mobile-top-bar__btn i {
    color: var(--mp-accent, #0d7a7a);
}

.illu-mobile-top-bar__btn:active,
.illu-mobile-top-bar__title-btn:active {
    border-color: #404040 #fff #fff #404040;
}

.illu-mobile-top-bar__title-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
}

#illu-mobile-doc-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

/* Bandeau options outil (ligne 2 seule) */
.illu-mobile-opt-strip {
    display: none;
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    box-sizing: border-box;
    background: var(--mp-surface, #c0c0c0);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

body.illu-mobile-shell-active .illu-mobile-opt-strip:not([hidden]) {
    display: block;
    padding: 0 !important;
    overflow: visible !important;
    touch-action: auto;
}

body.illu-mobile-shell-active .illu-mobile-opt-strip #tool-options-bar-2 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 6px 8px;
    max-height: none;
    border: none;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-y: visible;
    min-height: 0 !important;
}

/* Un seul groupe d’options visible à la fois (respecte [hidden] de updateToolOptionsBar) */
body.illu-mobile-shell-active .illu-mobile-opt-strip #tool-options-bar-2 > .opt-grp[hidden] {
    display: none !important;
}

body.illu-mobile-shell-active .illu-mobile-opt-strip #tool-options-bar-2 > .opt-grp:not([hidden]) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 4px 6px !important;
    max-width: 100% !important;
    overflow: visible !important;
    max-height: none !important;
}

body.illu-mobile-shell-active #tool-options-bar-row1 .illu-opt-lbl,
body.illu-mobile-shell-active .illu-mobile-opt-strip .illu-opt-lbl {
    display: inline !important;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* Groupes d’icônes : retour à la ligne, sans scroll */
body.illu-mobile-shell-active .illu-mobile-opt-strip .illu-icon-toggle-group,
body.illu-mobile-shell-active .illu-mobile-opt-strip .illu-mode-toggle-group,
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-bar-row1 .illu-icon-toggle-group,
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-bar-row1 .illu-mode-toggle-group {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
    gap: 4px 6px !important;
}

body.illu-mobile-shell-active .illu-mobile-opt-strip .illu-mode-toggle-item,
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #tool-options-bar-row1 .illu-mode-toggle-item {
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

/* Options sélection réservées au shell mobile (Ajuster, Aucun) */
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #illu-mobile-zoom-fit-wrap:not([hidden]),
body.illu-mobile-shell-active:not(.illu-toolbar-ribbon) #illu-mobile-deselect-wrap:not([hidden]) {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.illu-mobile-shell-active.illu-toolbar-ribbon #illu-mobile-zoom-fit-wrap:not([hidden]),
body.illu-mobile-shell-active.illu-toolbar-ribbon #illu-mobile-deselect-wrap:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.illu-mobile-shell-active .illu-mobile-opt-strip #opt-grp-warp-params,
body.illu-mobile-shell-active .illu-mobile-opt-strip #opt-grp-deform-params,
body.illu-mobile-shell-active .illu-mobile-opt-strip [id^="opt-grp-warp"] {
    display: none !important;
}

/* Toile maximale */
body.illu-mobile-shell-active .editor-dock-row {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

body.illu-mobile-shell-active .workspace-dock-center {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    order: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

body.illu-mobile-shell-active #app-window .window-body.illu-app-window-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Pool palettes caché */
.illu-mobile-palette-pool {
    display: none !important;
    visibility: hidden;
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Dock bas : Menu fixe + zone scroll */
.illu-mobile-bottom-dock {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    height: auto;
    max-height: 40vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    overflow: hidden;
    gap: 0;
}

body.illu-mobile-shell-active .illu-mobile-bottom-dock {
    display: flex;
}

.illu-mobile-dock-btn--fixed {
    flex: 0 0 var(--illu-mobile-dock-menu-w, 50px);
    width: var(--illu-mobile-dock-menu-w, 50px);
    min-width: var(--illu-mobile-dock-menu-w, 50px);
    max-width: var(--illu-mobile-dock-menu-w, 50px);
    padding: 4px 6px;
    gap: 2px;
    border-right: 1px solid var(--mp-dock-border, #808080);
    background: var(--illu-mobile-dock-bg, var(--mp-dock-bg, #c0c0c0));
    scroll-snap-align: none;
    box-sizing: border-box;
}

.illu-mobile-dock-btn--fixed i,
.illu-mobile-dock-top .illu-mobile-dock-btn i {
    font-size: 14px;
}

.illu-mobile-dock-btn--fixed span {
    font-size: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.illu-mobile-dock-top {
    display: flex !important;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px 5px;
    box-sizing: border-box;
    background: transparent;
    border-bottom: none;
    pointer-events: none;
    max-height: 48px;
    overflow: hidden;
    will-change: max-height;
    transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                padding    0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.illu-mobile-dock-top-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    pointer-events: auto;
    background: var(--illu-mobile-dock-bg, var(--mp-dock-bg, #c0c0c0));
    border-radius: 10px;
    padding: 3px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.18s ease;
    will-change: transform, opacity;
}

.illu-mobile-dock-top-group--left,
.illu-mobile-dock-top-group--right {
    flex: 0 0 auto;
}

body.illu-mobile-shell-active .illu-mobile-dock-top {
    display: flex;
}

/* ─── Animation sortie des pills quand effect-dialog / floating-window ─── */
body.illu-mobile-shell-active.effect-dialog-open .illu-mobile-dock-top {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.illu-mobile-shell-active.effect-dialog-open .illu-mobile-dock-top-group--left {
    transform: translateX(-150%);
    opacity: 0;
}

body.illu-mobile-shell-active.effect-dialog-open .illu-mobile-dock-top-group--right {
    transform: translateX(150%);
    opacity: 0;
}

body.illu-mobile-shell-active.effect-dialog-open .illu-mobile-dock-scroll {
margin: 0;
border-radius: 0;
height:40px;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease,
                margin 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}



body.illu-mobile-shell-active.effect-dialog-open {
    --illu-mobile-panel-bottom: var(--illu-mobile-dock-h);
}

.illu-mobile-dock-scroll {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: safe center;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    gap: 4px;
    padding: 4px 6px;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--mp-accent, #0d7a7a) 8%, var(--illu-mobile-dock-scroll-bg, var(--mp-dock-bg, #c0c0c0)));
    border-top: 1px solid color-mix(in srgb, var(--mp-accent, #0d7a7a) 40%, var(--mp-dock-border, #808080));
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.18);
    scrollbar-width: thin;
    scrollbar-color: var(--illu-mobile-scroll-thumb) var(--illu-mobile-dock-scroll-bg);
}

.illu-mobile-dock-scroll::-webkit-scrollbar {
    height: var(--mp-scrollbar-size-h, 4px);
}

.illu-mobile-dock-scroll::-webkit-scrollbar-track {
    background-color: color-mix(in srgb, var(--mp-accent, #0d7a7a) 8%, var(--illu-mobile-dock-scroll-bg, var(--mp-dock-bg, #c0c0c0))) !important;
    background-image: none !important;
}

.illu-mobile-dock-scroll::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--mp-accent, #0d7a7a) 35%, var(--illu-mobile-scroll-thumb)) !important;
    border-radius: 2px;
}

.illu-mobile-dock-scroll::-webkit-scrollbar-corner {
    background: color-mix(in srgb, var(--mp-accent, #0d7a7a) 8%, var(--illu-mobile-dock-scroll-bg, var(--mp-dock-bg, #c0c0c0))) !important;
}

.illu-mobile-dock-btn {
    flex: 0 0 var(--illu-mobile-dock-btn-w, 68px);
    min-width: var(--illu-mobile-dock-btn-w, 68px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--mp-text, #1a1a1a);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

.illu-mobile-dock-top .illu-mobile-dock-btn {
    flex: 0 0 28px;
    min-width: 28px;
    max-width: 28px;
    height: 28px;
    padding: 0;
    gap: 0;
    border: none;
    font-size: 10px;
}

.illu-mobile-dock-btn i {
    font-size: 24px;
    line-height: 1;
    color: var(--mp-accent, #0d7a7a);
}

.illu-mobile-dock-top .illu-mobile-dock-btn i {
    font-size: 15px;
}

.illu-mobile-dock-btn[aria-pressed="true"] {
    background: color-mix(in srgb, var(--mp-accent, #0d7a7a) 22%, transparent);
    border-color: color-mix(in srgb, var(--mp-accent, #0d7a7a) 55%, transparent) !important;
}

.illu-mobile-dock-btn[aria-pressed="true"] i {
    color: var(--mp-accent, #0d7a7a);
}

.illu-mobile-dock-top .illu-mobile-dock-btn[aria-pressed="true"] {
    background: color-mix(in srgb, var(--mp-accent, #0d7a7a) 28%, transparent);
    border-radius: 50%;
}

.illu-mobile-dock-btn:active {
    background: rgba(0, 0, 0, 0.08);
}

/* Cacher le texte uniquement pour les boutons de la barre du haut (icône seule) */
.illu-mobile-dock-top .illu-mobile-dock-btn span {
    display: none;
}

/* Transition du texte des boutons scroll : fondu vers icône seule lors d'effect-dialog */
.illu-mobile-dock-scroll .illu-mobile-dock-btn span {
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    transform: translateY(0);
    opacity: 1;
}

body.illu-mobile-shell-active.effect-dialog-open .illu-mobile-dock-scroll .illu-mobile-dock-btn span {
    display: none;
    pointer-events: none;
}

body.illu-mobile-shell-active #workspace {
    padding-bottom: max(var(--illu-mobile-dock-h), 120px);
}

body.illu-mobile-shell-active footer.status-bar,
body.illu-mobile-shell-active #app-status-bar {
    margin-bottom: var(--illu-mobile-dock-h);
}

/* Bottom sheets */
.illu-mobile-sheet-root {
    position: fixed;
    inset: 0;
    z-index: 4100;
    pointer-events: none;
    visibility: hidden;
}

.illu-mobile-sheet[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
}

#illu-mobile-sheet-history[hidden] {
    display: none !important;
}

.illu-mobile-sheet-root--open {
    pointer-events: auto;
    visibility: visible;
}

.illu-mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.illu-mobile-sheet-root--open .illu-mobile-sheet-backdrop {
    opacity: 1;
}

.illu-mobile-sheet {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 71px;
    max-height: min(78dvh, calc(100dvh - var(--illu-mobile-dock-h) - 48px));
    display: flex;
    flex-direction: column;
    background: var(--mp-surface, #c0c0c0);
    border: 2px solid;
    border-color: var(--mp-raised-top, #fff) var(--mp-raised-bot, #808080) transparent var(--mp-inset-top, #a0a0a0);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.22s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.illu-mobile-sheet-root--open .illu-mobile-sheet:not([hidden]) {
    transform: translateY(0);
}

.illu-mobile-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    background: linear-gradient(180deg, var(--mp-title-light, #6aadad) 0%, var(--mp-title, #065a5a) 100%);
    color: #fff;
}

.illu-mobile-sheet__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.illu-mobile-sheet__close {
    width: 36px;
    height: 32px;
    padding: 0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    background: var(--mp-surface-deep, #c0c0c0);
    color: #000;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.illu-mobile-sheet__close::before {
    content: "×";
}

.illu-mobile-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    box-sizing: border-box;
}

/* Outils dans la sheet */
.illu-mobile-active-tool-lbl {
    display: none;
    margin: 0 0 10px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--mp-accent, #0d7a7a);
    background: color-mix(in srgb, var(--mp-accent, #0d7a7a) 8%, var(--mp-surface, #ece9d8));
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

body.illu-mobile-shell-active #illu-mobile-active-tool-lbl:not([hidden]) {
    display: block;
}

body.illu-mobile-shell-active.effect-dialog-open .effect-scope-bar.illu-effect-scope-bar {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
}

body.illu-mobile-shell-active.effect-dialog-open .illu-effect-scope-bar .illu-scope-btn-row {
    flex-wrap: wrap !important;
}

body.illu-mobile-shell-active #illu-mobile-sheet-tools-body #win-tools {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    box-shadow: none !important;
}

body.illu-mobile-shell-active #illu-mobile-sheet-tools-body #main-toolbox.tool-grid--pdn {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    padding: 6px 4px 10px;
    box-sizing: border-box;
}

body.illu-mobile-shell-active #illu-mobile-sheet-tools-body .tool-group {
    display: contents !important;
    border: none !important;
    padding: 0 !important;
}

body.illu-mobile-shell-active #illu-mobile-sheet-tools-body .tool-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--illu-mobile-touch, 52px) !important;
    min-height: var(--illu-mobile-touch, 52px) !important;
    font-size: 20px !important;
    margin: 0 !important;
}

/* Panneaux couleurs / calques / historique */
body.illu-mobile-shell-active .illu-mobile-sheet__body .window.palette-panel {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
}

body.illu-mobile-shell-active .illu-mobile-sheet__body .palette-panel .title-bar {
    display: none !important;
}

body.illu-mobile-shell-active .illu-mobile-sheet__body .palette-panel .window-body {
    max-height: none;
}

/* Drawer : onglets documents */
.illu-mobile-drawer__tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.illu-mobile-drawer__tab-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    box-sizing: border-box;
    border: 2px solid;
    border-color: var(--mp-raised-top, #fff) var(--mp-raised-bot, #808080) var(--mp-inset-bot, #404040)
        var(--mp-inset-top, #a0a0a0);
    background: var(--mp-surface, #ece9d8);
    color: var(--mp-text, #000);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.illu-mobile-drawer__tab-row--active {
    border-color: var(--mp-inset-top, #a0a0a0) var(--mp-inset-bot, #404040) var(--mp-raised-bot, #808080)
        var(--mp-raised-top, #fff);
    background: color-mix(in srgb, var(--mp-accent, #0d7a7a) 12%, var(--mp-surface, #ece9d8));
    font-weight: 600;
}

.illu-mobile-drawer__tab-thumb {
    max-width: 36px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid #808080;
}

.illu-mobile-drawer__tab-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.illu-mobile-drawer__tab-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.illu-mobile-drawer__history-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 2px solid;
    border-color: var(--mp-raised-top, #fff) var(--mp-raised-bot, #808080) var(--mp-inset-bot, #404040)
        var(--mp-inset-top, #a0a0a0);
    background: var(--mp-surface, #ece9d8);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    color: var(--mp-text, #000);
}

.illu-mobile-drawer__history-btn i {
    font-size: 18px;
    color: var(--mp-accent, #0d7a7a);
}

body.illu-mobile-shell-active .illu-mobile-opt-strip button,
body.illu-mobile-shell-active .illu-mobile-opt-strip input[type="range"],
body.illu-mobile-shell-active .illu-mobile-opt-strip select {
    min-height: 36px;
    font-size: 13px;
}

.illu-mobile-sheet__close {
    width: 40px;
    height: 36px;
}

/* Bandes scrollables horizontales (tactile) — pas les barres d’options outil */
.illu-mobile-scroll-x,
.illu-mobile-color-quick {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

/* Raccourcis ajustements (sheet Couleurs) */
.illu-mobile-color-quick {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
}

.illu-mobile-color-quick__btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    min-height: 56px;
    padding: 6px 8px;
    box-sizing: border-box;
    border: 2px solid;
    border-color: var(--mp-raised-top, #fff) var(--mp-raised-bot, #808080) var(--mp-inset-bot, #404040)
        var(--mp-inset-top, #a0a0a0);
    background: var(--mp-surface-deep, #d4d0c8);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--mp-text, #000);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.illu-mobile-color-quick__btn i {
    font-size: 20px;
    color: var(--mp-accent, #0d7a7a);
}

.illu-mobile-color-quick__btn:active {
    border-color: var(--mp-inset-top, #a0a0a0) var(--mp-inset-bot, #404040) var(--mp-raised-bot, #808080)
        var(--mp-raised-top, #fff);
}

/* Sheet Couleurs : roue + palette fluide */
body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #win-colors .color-top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0 8px;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #color-target-sel {
    flex: 1 1 120px;
    min-height: 36px;
    font-size: 14px !important;
}

body.illu-mobile-ui #btn-col-expand,
body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #btn-toggle-color-grid,
body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #btn-col-expand {
    display: none !important;
}

/* Panneau RVB/TSV/Alpha : jamais visible en mode téléphone (même si .color-window-expanded) */
body.illu-mobile-ui #win-colors.color-window-expanded #color-sliders-panel,
body.illu-mobile-ui #color-sliders-panel,
body.illu-mobile-shell-active #win-colors.color-window-expanded #color-sliders-panel,
body.illu-mobile-shell-active #color-sliders-panel,
body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #color-sliders-panel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body .color-picker-body {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body .color-picker-left {
    width: 100% !important;
    max-width: 100%;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body .color-wheel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body .color-swatch-box {
    width: 56px !important;
    height: 56px !important;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body .col-primary,
body.illu-mobile-shell-active #illu-mobile-sheet-colors-body .col-secondary {
    width: 28px !important;
    height: 28px !important;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #ui-col-swap {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
}



body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #palette-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 4px;
    justify-self: center;
    box-sizing: border-box;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body #palette-grid.palette-grid--flow {
    width: 100% !important;
    max-width: 100% !important;
}

body.illu-mobile-shell-active #illu-mobile-sheet-colors-body .palette-swatch {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
}

/* Liste effets / ajustements (sheets) */
.illu-mobile-menu-sheet {
    padding: 4px 2px 12px;
}

.illu-mobile-effect-section {
    margin-bottom: 10px;
}

.illu-mobile-effect-section__title {
    margin: 0 0 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mp-accent, #0d7a7a);
    opacity: 0.85;
}

.illu-mobile-effect-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.illu-mobile-effect-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--illu-mobile-touch, 52px);
    padding: 10px 12px;
    box-sizing: border-box;
    text-align: left;
    border: 2px solid;
    border-color: var(--mp-raised-top, #fff) var(--mp-raised-bot, #808080) var(--mp-inset-bot, #404040)
        var(--mp-inset-top, #a0a0a0);
    background: var(--mp-surface-deep, #d4d0c8);
    font-size: 14px;
    font-weight: 500;
    color: var(--mp-text, #000);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.illu-mobile-effect-list__item i {
    flex: 0 0 24px;
    font-size: 20px;
    text-align: center;
    color: var(--mp-accent, #0d7a7a);
}

.illu-mobile-effect-list__item:active {
    border-color: var(--mp-inset-top, #a0a0a0) var(--mp-inset-bot, #404040) var(--mp-raised-bot, #808080)
        var(--mp-raised-top, #fff);
}

/* Calques / historique : lignes plus hautes */
body.illu-mobile-shell-active #illu-mobile-sheet-layers-body button,
body.illu-mobile-shell-active #illu-mobile-sheet-layers-body .layer-row,
body.illu-mobile-shell-active #illu-mobile-sheet-history-body button,
body.illu-mobile-shell-active #illu-mobile-sheet-history-body .history-entry {
    min-height: 44px;
}

/* ——— Barres de défilement fines (mode téléphone) ——— */
html:has(body.illu-mobile-shell-active),
html:has(body.illu-mobile-shell-active) body,
html:has(body.illu-mobile-shell-active) * {
    scrollbar-width: thin;
    scrollbar-color: var(--illu-mobile-scroll-thumb) var(--illu-mobile-scroll-track);
}

html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar {
    width: var(--mp-scrollbar-size) !important;
    height: var(--mp-scrollbar-size-h) !important;
}

html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-track {
    background-color: var(--illu-mobile-scroll-track) !important;
    background-image: none !important;
    margin: 0 !important;
    border: none !important;
}

html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-thumb {
    background-color: var(--illu-mobile-scroll-thumb) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    min-height: 20px;
    min-width: 20px;
}

html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.42) !important;
}

html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5) !important;
    box-shadow: none !important;
}

/* Pas de boutons flèche : barre plus courte et moins large */
html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-button,
html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-button:vertical:start:decrement,
html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-button:vertical:end:increment,
html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-button:horizontal:start:decrement,
html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-button:horizontal:end:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html:has(body.illu-mobile-shell-active) ::-webkit-scrollbar-corner {
    background: transparent !important;
}

html:has(body.illu-mobile-shell-active.theme-dark) {
    --illu-mobile-dock-scroll-bg: color-mix(in srgb, var(--mp-dock-bg, #252830) 88%, #000 12%);
    --illu-mobile-scroll-thumb: rgba(255, 255, 255, 0.38);
    --illu-mobile-scroll-track: var(--illu-mobile-dock-scroll-bg);
}

html:has(body.illu-mobile-shell-active.theme-dark) ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

html:has(body.illu-mobile-shell-active.theme-dark) ::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.58) !important;
}