body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    font-family: 'Segoe UI', 'MS Sans Serif', Arial, sans-serif;
    font-size: 13px;
    --illu-palette-cell: 13px;
}

#win-history {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}
#app-window {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

#workspace {
    flex-grow: 1;
    position: relative;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Palettes ancrées (style Photoshop) */
.floating-window {
    position: absolute;
    z-index: 500;
    min-width: 150px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.floating-window .title-bar {
    cursor: move;
    /* Glissement au doigt / stylet : empêche le défilement de capturer le geste sur la barre de titre. */
    touch-action: none;
}

/* Dialogue de choix d'import / collage : icônes + prévisualisation. */
.illu-import-choice-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.illu-import-choice-ico {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    opacity: 0.85;
}
.illu-import-preview {
    display: none;
    margin: 10px 0 2px;
    padding: 6px;
    border: 1px inset #fff;
    background:
        linear-gradient(45deg, #cfcfcf 25%, transparent 25%),
        linear-gradient(-45deg, #cfcfcf 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #cfcfcf 75%),
        linear-gradient(-45deg, transparent 75%, #cfcfcf 75%),
        #fff;
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    text-align: center;
}
.illu-import-preview.has-image {
    display: block;
}
.illu-import-preview canvas,
.illu-import-preview img {
    max-width: 100%;
    max-height: 140px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    vertical-align: middle;
}
.illu-import-preview-dims {
    margin-top: 5px;
    font-size: 11px;
    opacity: 0.8;
}

body.effect-dialog-open #win-tools,
body.effect-dialog-open #win-history,
body.effect-dialog-open #win-layers,
body.effect-dialog-open #win-svg-objects,
body.effect-dialog-open:not(.effect-allows-colors) #win-colors {
    display: none !important;
    pointer-events: none !important;
}

/* Mode Photoshop : les docks gardent de la place si seuls les enfants sont masqués — on masque toute la colonne. */
body.effect-dialog-open.ui-layout-docked:not(.effect-allows-colors) #palette-dock-left,
body.effect-dialog-open.ui-layout-docked:not(.effect-allows-colors) #palette-dock-right,
body.effect-dialog-open.ui-layout-docked:not(.effect-allows-colors) #palette-dock-rail {
    display: none !important;
}

#effect-dialog {
    pointer-events: none;
    background: transparent !important;
}

#effect-dialog-window {
    pointer-events: auto;
    z-index: 4000;
}

:root {
    --palette-dock-width: 260px;
    --history-panel-width: 200px;
}

/* Photoshop ancré : ruban droit large ; largeur dock gauche = JS (illuSyncToolsDockAutoWidth) */
body.ui-layout-docked {
    --palette-dock-right-width: 260px;
    --palette-dock-rail-content-width: 208px;
    /*
     * Hauteur dock droit (Photoshop) : ratio Couleurs / Calques dans #palette-dock-right.
     * Ex. 2 + 3 → Calques ≈ 60 %, Couleurs ≈ 40 %. Modifier ces deux valeurs uniquement.
     */
    --illu-dock-colors-flex: 4;
    --illu-dock-layers-flex: 5;
}

/* Rail fixe : curseurs couleur + historique, collé à gauche du dock droit (pas volant) */
#palette-dock-rail {
    display: none;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    align-self: flex-start;
    background: #c0c0c0;
    border-left: 1px solid #808080;
    border-right: 1px solid #808080;
    box-sizing: border-box;
}

body.ui-layout-docked #palette-dock-rail {
    display: flex;
}

/* Rail ancré : superposé au bord droit du workspace (plus dans la rangée → plus de largeur pour la toile) */
body.ui-layout-docked .workspace-dock-center #palette-dock-rail {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 24;
    align-self: unset;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
}

body.ui-layout-floating #palette-dock-rail {
    display: none !important;
}

.palette-dock-rail__tabs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 4px;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: flex-start;
    border-right: 1px solid #808080;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.35);
}

.palette-dock-rail__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: 28px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 100%);
    color: #222;
    box-sizing: border-box;
}

.palette-dock-rail__tab i {
    display: block;
    line-height: 1;
    width: 1em;
    text-align: center;
}

.palette-dock-rail__tab:hover {
    background: linear-gradient(180deg, #f4f4f4 0%, #d4d4d4 100%);
}

.palette-dock-rail__tab.palette-dock-rail__tab--active {
    border-color: #404040 #fff #fff #404040;
    background: linear-gradient(180deg, #b8b8b8 0%, #a0a0a0 100%);
}

.palette-dock-rail__content {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    max-width: var(--palette-dock-rail-content-width);
    overflow-x: hidden;
    overflow-y: auto;
    flex: 0 0 auto;
    align-self: flex-start;
    height: auto;
    max-height: none;
}

.palette-dock-rail__content[hidden] {
    display: none !important;
}

.palette-dock-rail__host {
    flex: 0 0 auto;
    min-height: 0;
    border-bottom: 1px solid #808080;
}

.palette-dock-rail__host:last-child {
    border-bottom: none;
}

.palette-dock-rail__host[hidden] {
    display: none !important;
}

body.ui-layout-docked #palette-dock-left.palette-dock {
    position: relative;
    box-sizing: border-box;
    width: var(--palette-dock-left-width, 56px);
    flex: 0 0 var(--palette-dock-left-width, 56px);
    min-width: 36px;
    max-width: min(168px, 32vw);
    overflow: hidden;
    resize: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    gap: 0;
}

body.ui-layout-docked #palette-dock-right.palette-dock {
    width: var(--palette-dock-right-width);
    flex: 0 0 var(--palette-dock-right-width);
    align-self: stretch;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Couleurs ~40 % en haut, Calques ~60 % en bas (flex 2:3) */
body.ui-layout-docked #palette-dock-right #win-colors {
    flex: var(--illu-dock-colors-flex) 1 0;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

body.ui-layout-docked #palette-dock-right #win-layers {
    flex: var(--illu-dock-layers-flex) 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.ui-layout-docked #palette-dock-right #win-layers .palette-panel-body--fill {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

body.ui-layout-docked #palette-dock-right #win-layers #layers-list.list-box--flex {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

body.ui-layout-docked #win-tools .title-bar {
    display: none !important;
}

body.ui-layout-docked #win-tools {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.ui-layout-docked #win-tools .window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 1px;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

body.ui-layout-docked #main-toolbox.tool-grid--pdn {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: visible;
}

/* Outils : colonne unique ; 2e colonne si hauteur insuffisante (flex-wrap sur #main-toolbox) */
body.ui-layout-docked #main-toolbox.tool-grid--pdn .tool-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: 0 1px 1px;
    flex: 0 0 auto;
}

body.ui-layout-docked #main-toolbox.tool-grid--pdn .tool-btn {
    width: 28px;
    height: 26px;
    min-width: 28px;
    padding: 0;
    box-sizing: border-box;
}

body.ui-layout-docked #win-tools #main-toolbox.tool-grid--pdn {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    width: max-content;
    max-width: 100%;
    min-width: min-content;
    box-sizing: border-box;
}

/* Curseurs RVB dans le rail : pas de bordure « sous la roue » */
body.ui-layout-docked #dock-rail-sliders-host #color-sliders-panel {
    display: flex !important;
    flex-direction: column !important;
    border-top: none !important;
    margin-left: 0 !important;
    padding: 6px 4px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.ui-layout-docked .palette-dock-rail__host .window.palette-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-shadow: none;
}

body.ui-layout-docked .palette-dock-rail__host .palette-panel .title-bar {
    cursor: default;
    padding: 2px 4px;
    min-height: 22px;
}

/* Pas de « fermer » : panneau ancré, pas une fenêtre volante */
body.ui-layout-docked .palette-dock-rail__host .illu-palette-float-close {
    display: none !important;
}

body.ui-layout-docked .palette-dock-rail__host #win-history .palette-panel-body--fill {
    max-height: min(40vh, 320px);
}

body.ui-layout-docked .palette-dock-rail__host #win-history #history-list.list-box--flex {
    max-height: min(36vh, 280px);
    min-height: 72px;
}

.editor-dock-row {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.palette-dock {
    width: var(--palette-dock-width);
    flex: 0 0 var(--palette-dock-width);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 5px;
    box-sizing: border-box;
    background: #c0c0c0;
    border-right: 1px solid #808080;
    overflow-x: hidden;
    overflow-y: auto;
}

.palette-dock--right {
    border-right: none;
    border-left: 1px solid #808080;
}

.workspace-dock-center {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: auto;
    background: #808080;
}

/* Pile d’affichage : un canvas DOM par calque pixel (mode sans masque α / filtre ƒ). */
.pixel-layer-stack {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.pixel-layer-stack canvas.illu-pixel-layer-view,
.pixel-layer-stack canvas.illu-pixel-layer-staging-view {
    position: absolute;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.pixel-layer-stack canvas.illu-stack-preview-overlay {
    position: absolute;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

body.ui-layout-floating .editor-dock-row .palette-dock,
body.illu-mobile-ui .editor-dock-row .palette-dock {
    display: none !important;
}

body.ui-layout-floating .workspace-dock-center {
    flex: 1 1 auto;
}

#floating-palette-host {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 600;
}

#floating-palette-host .floating-window {
    pointer-events: auto;
}

.illu-pdn-edge-strip {
    pointer-events: none;
}

.illu-pdn-edge {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 620;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.illu-pdn-edge--left {
    left: 0;
}

.illu-pdn-edge--right {
    right: 0;
}

.illu-pdn-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 54px;
    padding: 8px 0;
    margin: 0;
    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);
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #ece9e4 0%, #d8d4cf 100%);
    color: #1e4a8c;
    cursor: pointer;
    font-size: 18px;
    -webkit-tap-highlight-color: rgba(30, 74, 140, 0.2);
}

.illu-pdn-edge--right .illu-pdn-tab {
    border-radius: 6px 0 0 6px;
}

.illu-pdn-tab[aria-pressed='true'],
.illu-pdn-tab.illu-pdn-tab--active {
    border-color: var(--mp-inset-top, #a0a0a0) var(--mp-inset-bot, #404040) var(--mp-raised-bot, #808080) var(--mp-raised-top, #fff);
    background: linear-gradient(180deg, #d5d1cb 0%, #c9c5bf 100%);
}

body:not(.illu-pdn-dock-active) .illu-pdn-edge-strip {
    display: none !important;
}

/* Téléphone : une seule colonne de languettes à droite (Couleurs, Calques, Historique) ; Outils en haut */
body.illu-mobile-ui.illu-pdn-dock-active .illu-pdn-edge--left {
    display: none !important;
}

body.illu-mobile-ui.illu-pdn-dock-active .illu-pdn-edge--right {
    gap: 8px;
}

#illu-mobile-toolbar-host {
    display: none;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

body.illu-mobile-ui.illu-pdn-dock-active:not(.illu-mobile-shell-active) #illu-mobile-toolbar-host:not(:empty),
body.effect-dialog-open #illu-mobile-toolbar-host {
    display: block;
}

body.effect-dialog-open #illu-mobile-toolbar-host {
    display: none !important;
}

/* Barre d’outils téléphone : pas de barre de titre, boutons alignés sur toute la largeur avec retour à la ligne */
body.illu-mobile-ui.illu-pdn-dock-active #win-tools .title-bar {
    display: none !important;
}

body.illu-mobile-ui.illu-pdn-dock-active #win-tools .window-body {
    padding: 4px 6px 6px;
}

body.illu-pdn-dock-active.ui-layout-floating #win-tools,
body.illu-pdn-dock-active.ui-layout-floating #win-colors,
body.illu-pdn-dock-active.ui-layout-floating #win-layers,
body.illu-pdn-dock-active.ui-layout-floating #win-history {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
}

body.ui-layout-floating .floating-window.illu-floating-window-hidden {
    display: none !important;
}

body.ui-layout-docked .menu-floating-only {
    display: none !important;
}

body.ui-layout-floating .menu-win-hint-docked {
    display: none !important;
}

.menu-win-hint-mobile-only {
    display: none !important;
}

body.illu-mobile-ui .menu-win-hint-mobile-only {
    display: list-item !important;
}

body.illu-mobile-ui .menu-win-hint-docked,
body.illu-mobile-ui .menu-win-pdn-sep {
    display: none !important;
}



body.ui-layout-floating #win-layers #layers-list.list-box--flex {
    max-height: 25vh !important;
}

body.ui-layout-floating #win-history.window.palette-panel {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    box-sizing: border-box;
}

body.ui-layout-floating:not(.illu-mobile-shell-active) #win-history #history-list.list-box--flex {
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
}

/* Paint.NET (flottant) : 2 colonnes d’icônes par groupe, pas de resize */
body.ui-layout-floating #win-tools {
    min-width: 64px;
    max-width: none !important;
    width: auto !important;
    resize: none !important;
}

body.ui-layout-floating #win-tools .tool-grid.tool-grid--pdn {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
    box-sizing: border-box;
}

body.ui-layout-floating #win-tools .tool-grid--pdn .tool-group {
    display: grid;
    grid-template-columns: repeat(2, 25px);
    justify-content: center;
    box-sizing: border-box;
    gap: 1px;
}

/* Téléphone + dock bas : une seule rangée logique qui revient à la ligne sur toute la largeur */
body.illu-mobile-ui.illu-pdn-dock-active:not(.illu-mobile-shell-active) #win-tools .tool-grid.tool-grid--pdn {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.illu-mobile-ui.illu-pdn-dock-active #win-tools .tool-grid--pdn .tool-group {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap !important;
    grid-template-columns: unset !important;
    justify-content: center;
    align-content: flex-start;
    gap: 3px;
    padding: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    padding-right: 5px;
    border-bottom: 0px;

}

/* Téléphone + dock : les 4 palettes pleine largeur écran (pas de largeur fixe flottante) */
body.illu-mobile-ui.illu-pdn-dock-active.ui-layout-floating #win-history.window.palette-panel,
body.illu-mobile-ui.illu-pdn-dock-active.ui-layout-floating #win-history #history-list.list-box--flex {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.illu-mobile-ui.illu-pdn-dock-active.ui-layout-floating #win-layers .palette-panel-body--fill,
body.illu-mobile-ui.illu-pdn-dock-active.ui-layout-floating #win-layers #layers-list.list-box--flex {
    max-width: 100% !important;
}

/* Uniquement ancré (Photoshop) : pas de !important sur .palette-panel hors dock,
   sinon en mode Paint.NET les left/top inline sont perdus et les fenêtres restent bloquées. */
.editor-dock-row .palette-panel.window {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0;
    z-index: 1;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.editor-dock-row .palette-panel .title-bar {
    cursor: default;
}

.palette-panel-body--fill {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.list-box--flex {
    flex: 1 1 auto;
    min-height: 100px;
    height: auto !important;
}

#win-tools .tool-grid {
    justify-content: center;
}

body:not(.ui-layout-floating) #win-tools .window-body {
    padding: 0 1px 1px;
    min-height: 0;
}

/* Photoshop (ancré) : grille d’outils = colonnes auto selon la largeur */
body:not(.ui-layout-floating) #win-tools .tool-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    width: 100%;
    max-width: none;
    grid-template-columns: unset;
}

/* Boîte à outils « inspiration Paint.NET » : bandes groupées, boutons relief */
#main-toolbox.tool-grid--pdn {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    box-sizing: border-box;
}

body:not(.ui-layout-floating) #win-tools .tool-grid.tool-grid--pdn {
    flex-direction: column;
    flex-wrap: nowrap;
}

#main-toolbox.tool-grid--pdn .tool-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 65%);
}

#main-toolbox.tool-grid--pdn .tool-group:last-child {
    border-bottom: none;
    box-shadow: none;
    padding-bottom: 1px;
}

#main-toolbox .tool-group--grid2 {
    display: grid;
    grid-template-columns: repeat(2, 28px);
    gap: 1px;
    justify-content: center;
}

#main-toolbox.tool-grid--pdn .tool-btn.tool-btn--span-2 {
    grid-column: span 2;
    width: calc(28px * 2 + 1px) !important;
    min-width: calc(28px * 2 + 1px) !important;
}

body.ui-layout-docked #main-toolbox.tool-grid--pdn .tool-btn.tool-btn--span-2 {
    grid-column: span 1;
    width: 28px !important;
    min-width: 28px !important;
}

.illu-tool-shape-family-ico {
    display: block;
    margin: 0 auto;
    width: 22px;
    height: 22px;
}

.illu-tool-hidden-shelf {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Styles outils : bords 3D / actif alignés calques — theme-win98-modern.css (fin de fichier) */
#win-tools .tool-grid--pdn .tool-btn:disabled {
    opacity: 0.45;
}

/* Calques : Photoshop = hauteur généreuse ; flottant = surchargé plus bas (400px max) */
body:not(.ui-layout-floating) #win-layers .palette-panel-body--fill {
    max-height: min(82vh, 920px);
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

body:not(.ui-layout-floating) #win-layers #layers-list.list-box--flex {
    max-height: min(76vh, 840px);
    min-height: 100px;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Historique : largeur fixe dans la colonne droite, hauteur un peu plus généreuse */
.editor-dock-row .palette-dock--right #win-history.window.palette-panel {
    width: var(--history-panel-width);
    max-width: 100%;
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
}

#win-history .palette-panel-body--fill {
    max-height: 308px;
    min-height: 0;
    overflow: hidden;
    flex: 0 1 auto;
    width: 100%;
}

#win-history #history-list.list-box--flex {
    max-height: 276px;
    min-height: 112px;
    flex: 1 1 auto;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Barre d’onglets : scroll horizontal */
.tab-bar-outer {
    display: flex;
    flex-shrink: 0;
    min-height: 24px;
    align-items: flex-end;
    background: #c0c0c0;
    border-bottom: 2px solid #808080;
    position: relative;
    z-index: 620;
}

.tab-bar-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.tab-bar-inner {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 2px;
    min-height: 24px;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

#win-colors {
    min-height: 0;
}

body.ui-layout-docked #win-colors {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Couleurs dans le dock gauche (si jamais déplacé) : espace restant sous les outils */
body.ui-layout-docked #palette-dock-left #win-colors {
    flex: 1 1 auto;
}

body.ui-layout-docked #win-colors .color-window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.ui-layout-docked #win-colors .color-picker-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.color-window-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Paint.NET (flottant) : colonnes roue+sliders, palette en dessous */
.color-picker-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
}

.color-picker-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.color-picker-left {
    flex: 0 0 auto;
    min-width: 0;
    border-right: 1px solid transparent;
}

body.ui-layout-floating #win-colors.color-window-expanded .color-picker-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

body.ui-layout-floating #win-colors.color-window-expanded {
width: auto !important;
}


body.ui-layout-floating #win-colors.color-window-expanded .color-top-row {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
    justify-content: flex-start;
}

body.ui-layout-floating #win-colors.color-window-expanded .color-top-row__start {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

body.ui-layout-floating #win-colors.color-window-expanded .color-picker-left {
    grid-column: 1;
    grid-row: 2;
    border-right-color: #a0a0a0;
    align-self: start;
}

body.ui-layout-floating #win-colors.color-window-expanded #color-sliders-panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 0;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
}

.color-wheel-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.color-top-row {
    display: flex;
    gap: 5px;
    margin-bottom: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.color-top-row__start {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

#btn-col-expand {
    font-size: 10px;
    white-space: nowrap;
    padding: 2px 6px;
}

/* Photoshop (ancré) : masquer le bouton Plus — les sliders sont gérés par .color-window-expanded + JS */
body.ui-layout-docked #btn-col-expand {
    display: none !important;
}

body.ui-layout-floating #color-sliders-panel {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 6px;
    border-left: 1px solid #a0a0a0;
    margin-left: 3px;
}

/* Photoshop (ancré) : sliders dans le rail ; roue + hexa puis palette */
body:not(.ui-layout-floating) .color-picker-body {
    flex-direction: column;
    align-items: stretch;
}

body:not(.ui-layout-floating) .color-picker-left {
    padding-right: 0;
    border-right: none;
    width: 100%;
}

body:not(.ui-layout-floating) #win-colors.color-window-expanded .color-picker-left {
    border-bottom: 1px solid #a0a0a0;
    padding-bottom: 8px;
    margin-bottom: 0;
}

body:not(.ui-layout-floating) #color-sliders-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-top: 6px;
    margin-left: 0;
    border-left: none;
    border-top: 1px solid #a0a0a0;
}

#win-colors.color-window-expanded #color-sliders-panel {
    display: flex !important;
}

#win-colors.color-window-expanded .color-top-row {
    margin-bottom: 4px;
}

#win-colors.color-window-expanded .color-wheel-row {
    margin-bottom: 2px;
}

body.ui-layout-floating #win-colors.color-window-expanded .color-picker-main {
    flex: 1 1 auto;
    min-height: 0;
}

body.ui-layout-floating #win-colors.color-window-expanded .color-picker-left .color-hex-row {
    margin-bottom: 0;
}

#palette-grid {
    margin-top: 6px;
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 0;
    width: max-content;
    max-width: 100%;
}

/* Flottant étendu : grille fixe 37×4 (JS + CSS de secours) */
body.ui-layout-floating:not(.illu-pdn-dock-active) #win-colors.color-window-expanded #palette-grid:not(.palette-grid--flow) {
    grid-template-columns: repeat(37, var(--illu-palette-cell, 13px));
    grid-template-rows: repeat(4, var(--illu-palette-cell, 13px));
    width: max-content;
    max-width: 100%;
}

/* Photoshop / téléphone : dimensions pilotées par JS (.palette-grid--flow) */
body.ui-layout-docked #win-colors.color-window-expanded #palette-grid,
body.illu-pdn-dock-active #win-colors #palette-grid.palette-grid--flow {
    width: max-content;
    max-width: 100%;
}

/* Paramètres / Bienvenue : gauche description + langue + raccourcis, droite options — fenêtre compacte */
#settings-overlay .window,
#welcome-overlay .window {
    width: min(96vw, 700px) !important;
    max-width: 96vw;
}

/* Drapeau devant le libellé dans les boutons de langue (Paramètres/Bienvenue) */
.illu-lang-flag {
    margin-right: 5px;
    font-size: 1.05em;
    vertical-align: -1px;
}

/* Rangées de langue : autoriser le retour à la ligne pour ne pas écraser les libellés */
#settings-lang-scope-row,
#welcome-lang-scope-row {
    flex-wrap: wrap;
}

#settings-lang-scope-row .illu-scope-btn,
#welcome-lang-scope-row .illu-scope-btn {
    flex: 1 1 auto;
    min-width: 92px;
}

#settings-overlay .settings-dialog-window-body,
#welcome-overlay .welcome-dialog-body {
    padding: 8px 10px !important;
    font-size: 11px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 570px);
    box-sizing: border-box;
}

#settings-overlay .settings-dialog-layout,
#welcome-overlay .welcome-dialog-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

#welcome-overlay .welcome-dialog-body {
    padding: 8px 10px 10px !important;
}

#welcome-overlay .welcome-dialog-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    margin-bottom: 6px;
}

#welcome-overlay .welcome-dialog-logo {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

#welcome-overlay .welcome-dialog-brand {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mp-text);
}

#welcome-overlay .welcome-dialog-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mp-dock-border, #808080);
    flex-shrink: 0;
}

#welcome-overlay .welcome-dialog-footer-end {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

#welcome-overlay .welcome-dialog-startup {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#welcome-overlay .welcome-dialog-startup-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-text);
    opacity: 0.92;
    white-space: nowrap;
}

#welcome-overlay .welcome-dialog-startup-toggle {
    min-width: 0;
}

#welcome-overlay .welcome-dialog-startup-toggle .illu-scope-btn {
    min-width: 46px;
    padding: 3px 8px;
    font-size: 11px;
}

#welcome-overlay .welcome-dialog-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 172px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg,
            var(--mp-title-light, #4a7ab8) 0%,
            var(--mp-accent, #0d7a7a) 52%,
            color-mix(in srgb, var(--mp-accent, #0d7a7a) 78%, #000) 100%) !important;
    border: 2px solid !important;
    border-color: color-mix(in srgb, var(--mp-accent, #0d7a7a) 35%, #fff) color-mix(in srgb, var(--mp-accent, #0d7a7a) 55%, #000) color-mix(in srgb, var(--mp-accent, #0d7a7a) 55%, #000) color-mix(in srgb, var(--mp-accent, #0d7a7a) 35%, #fff) !important;
    border-radius: var(--mp-radius, 2px) !important;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.38),
        0 1px 4px rgba(0, 0, 0, 0.22) !important;
    cursor: pointer;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

#welcome-overlay .welcome-dialog-start-btn i {
    font-size: 13px;
    opacity: 0.95;
}

#welcome-overlay .welcome-dialog-start-btn:hover {
    filter: brightness(1.1);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.42),
        0 2px 6px rgba(0, 0, 0, 0.28) !important;
}

#welcome-overlay .welcome-dialog-start-btn:active {
    filter: brightness(0.96);
    border-color: var(--mp-inset-top, #404040) var(--mp-inset-bot, #dfdfdf) var(--mp-inset-bot, #dfdfdf) var(--mp-inset-top, #404040) !important;
    padding: 9px 17px 7px 19px !important;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.28) !important;
}

body.theme-dark #welcome-overlay .welcome-dialog-start-btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 5px rgba(0, 0, 0, 0.45) !important;
}

#welcome-overlay .welcome-shortcuts-list {
    max-height: 140px;
    overflow-y: auto;
}

#settings-overlay .settings-dialog-aside {
    flex: 0 0 38%;
    min-width: 0;
    overflow: auto;
    padding-right: 4px;
    border-right: 1px solid #b0b0b0;
}

#welcome-overlay .settings-dialog-aside {
    flex: 0 0 55%;
    min-width: 0;
    overflow: auto;
    padding-right: 4px;
    border-right: 1px solid #b0b0b0;
}

#settings-overlay .settings-dialog-main,
#welcome-overlay .welcome-dialog-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    padding-left: 2px;
}

#settings-overlay .settings-dialog-aside p,
#welcome-overlay .settings-dialog-aside p {
    margin: 0 0 0.45em;
    font-size: 11px;
}

#settings-overlay .settings-about-lead,
#welcome-overlay .settings-about-lead {
    font-weight: 600;
}

#settings-overlay .settings-ai-note,
#welcome-overlay .settings-ai-note {
    font-size: 10px;
    color: #555;
    font-style: italic;
    margin-bottom: 0;
}

#settings-overlay .settings-aside-block--about,
#welcome-overlay .settings-aside-block--about {
    margin-bottom: 10px;
}

#settings-overlay .settings-aside-lang,
#welcome-overlay .settings-aside-lang {
    margin-bottom: 10px;
}

#settings-overlay .settings-aside-lang legend,
#welcome-overlay .settings-aside-lang legend {
    font-size: 11px;
}

#settings-overlay .settings-aside-block--shortcuts,
#welcome-overlay .settings-aside-block--shortcuts {
    margin-top: 2px;
}

#settings-overlay .settings-shortcuts-heading,
#welcome-overlay .settings-shortcuts-heading {
    font-weight: bold;
    margin: 0 0 0.35em;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}

#settings-overlay .settings-shortcuts-list,
#welcome-overlay .settings-shortcuts-list {
    margin: 0 0 0.5em;
    padding-left: 16px;
    line-height: 1.45;
    font-size: 10px;
}

#settings-overlay .settings-startup-row {
    margin: 0;
    align-items: center;
}

#settings-overlay .settings-startup-row label {
    cursor: pointer;
    line-height: 1.35;
}

#settings-overlay .settings-dialog-actions-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

#settings-overlay .settings-dialog-actions .settings-github-link {
    flex-shrink: 0;
    margin: 0;
    white-space: nowrap;
}

#settings-overlay .settings-dialog-actions .settings-startup-row {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(100%, 52ch);
}

#settings-overlay .settings-fieldset-compact,
#welcome-overlay .settings-fieldset-compact {
    margin: 0 0 8px;
    padding: 6px 8px;
    border: 1px solid #aaa;
}

#settings-overlay .settings-fieldset-compact legend,
#welcome-overlay .settings-fieldset-compact legend {
    font-weight: 600;
    font-size: 11px;
    padding: 0 4px;
}

#settings-overlay .settings-table,
#welcome-overlay .settings-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#settings-overlay .settings-table-row,
#welcome-overlay .settings-table-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 5px 0;
    border-top: 1px dotted #b8b8b8;
}

#settings-overlay .settings-table-row:first-child {
    border-top: 0;
    padding-top: 0;
}

#settings-overlay .settings-table-main,
#welcome-overlay .settings-table-main {
    min-width: 0;
}

#settings-overlay .settings-table-title,
#welcome-overlay .settings-table-title {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

#settings-overlay .settings-table-hint {
    margin-top: 2px;
    font-size: 9px;
    color: #555;
    line-height: 1.35;
}

#settings-overlay .settings-table-control,
#welcome-overlay .settings-table-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

#settings-overlay .settings-table-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#settings-overlay .settings-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#settings-overlay .settings-table-input {
    width: 56px;
    text-align: right;
}

/*
 * La case native ne doit jamais se voir : c'est la rangée Non/Oui qui la pilote.
 * La règle ne visait que #settings-overlay ; ailleurs (fenêtre de bienvenue, thèmes
 * qui redéfinissent l'apparence des cases) la case réapparaissait à côté du toggle.
 */
#settings-overlay .settings-toggle-input,
#welcome-overlay .settings-toggle-input,
input.settings-toggle-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: none !important;
}

#settings-overlay .illu-settings-toggle-row {
    flex-wrap: nowrap;
    max-width: 104px;
}

#settings-overlay .illu-settings-toggle-row .illu-scope-btn {
    min-width: 46px;
}

#settings-overlay .settings-checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0 0 8px;
}

#settings-overlay .settings-sublegend,
#welcome-overlay .settings-sublegend {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 11px;
}

#settings-overlay .settings-hint-micro,
#welcome-overlay .settings-hint-micro {
    margin: 4px 0 0;
    font-size: 9px;
    opacity: 0.88;
    line-height: 1.35;
}

#settings-overlay .settings-accent-swatches,
#welcome-overlay .settings-accent-swatches {
    display: grid;
    grid-template-columns: repeat(7, 24px);
    grid-template-rows: repeat(2, 24px);
    gap: 8px;
    align-items: center;
    justify-content: start;
    width: fit-content;
    max-width: 100%;
    margin: 2px 0 0;
}

#settings-overlay .settings-accent-swatch,
#welcome-overlay .settings-accent-swatch {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: block;
}

#settings-overlay .settings-accent-swatch input[type="radio"],
#welcome-overlay .settings-accent-swatch input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

#settings-overlay .settings-accent-face,
#welcome-overlay .settings-accent-face {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

#settings-overlay .settings-accent-swatch input:checked+.settings-accent-face,
#welcome-overlay .settings-accent-swatch input:checked+.settings-accent-face {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a1a1a;
    border-color: #111;
}

#settings-overlay .settings-accent-swatch input:focus-visible+.settings-accent-face,
#welcome-overlay .settings-accent-swatch input:focus-visible+.settings-accent-face {
    outline: 2px solid var(--mp-focus, #1e4a8c);
    outline-offset: 2px;
}

#settings-overlay .settings-lang-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: center;
    margin-top: 4px;
}

#settings-overlay .settings-lang-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
}

#settings-overlay .settings-layout-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 6px;
}

#settings-overlay .settings-layout-row label {
    flex: 1 1 200px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
    margin: 0;
    min-width: 0;
}

#settings-overlay .settings-layout-desc,
#welcome-overlay .settings-layout-desc {
    margin: 0 0 6px;
    color: #444;
    font-size: 10px;
    line-height: 1.35;
}

/* Thème classique / icônes monochromes forcés — pas d’UI visible */
#settings-overlay .settings-appearance-locked-ui,
#settings-overlay #settings-ui-base-row,
#settings-overlay #settings-beta-skin-row,
#settings-overlay #settings-icon-style-row,
#settings-overlay .settings-appearance-beta-fieldset {

    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#settings-overlay .settings-perf-hint,
#settings-overlay .settings-data-hint {
    margin: 4px 0 0;
    font-size: 9px;
    color: #555;
    line-height: 1.35;
}

#settings-overlay .settings-fieldset-compact label {
    font-size: 11px;
}

#settings-overlay .settings-checkbox-tight {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin: 0 0 8px;
}

#settings-overlay .settings-checkbox-tight:last-of-type {
    margin-bottom: 0;
}

#settings-overlay .settings-dialog-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ccc;
    flex-shrink: 0;
}

#welcome-overlay .illu-settings-example-btn {
    margin-right: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    cursor: pointer;
}

#btn-open-example,
#welcome-btn-open-example {
    background: linear-gradient(180deg, #fef3c7 0%, #fbd34d 100%) !important;
    border: 2px solid !important;
    border-color: var(--mp-raised-top) var(--mp-raised-bot) var(--mp-raised-bot) var(--mp-raised-top) !important;
    color: #451a03 !important;
    font-weight: 600;
    border-radius: var(--mp-radius) !important;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

#btn-open-example:hover,
#welcome-btn-open-example:hover {
    filter: brightness(1.05);
}

#btn-open-example:active,
#welcome-btn-open-example:active {
    border-color: var(--mp-inset-top) var(--mp-inset-bot) var(--mp-inset-bot) var(--mp-inset-top) !important;
    padding: 5px 11px 3px 13px !important;
}

#btn-open-example i,
#welcome-btn-open-example i {
    color: #b45309;
}

#settings-overlay .illu-settings-example-btn {
    margin-right: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #settings-overlay .settings-dialog-actions {
        flex-wrap: wrap;
    }

    #settings-overlay .settings-dialog-actions-group {
        flex-wrap: wrap;
        width: 100%;
    }

    #settings-overlay .illu-settings-example-btn {
        margin-right: 0;
        width: 100%;
        justify-content: center;
    }

    #settings-overlay .settings-dialog-actions .settings-github-link {
        width: 100%;
        justify-content: center;
    }

    #settings-overlay .settings-dialog-actions #settings-ok-btn {
        margin-left: 0;
        width: 100%;
    }
}

#settings-overlay .settings-dialog-actions #settings-ok-btn {
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 860px) {
    #settings-overlay .settings-table-control {
        justify-content: flex-start;
    }

    #settings-overlay .settings-table-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1000px) {

    body,
    html {
        font-size: 11px;
    }

    .tab-bar-outer {
        min-height: 20px;
    }


    .opt-tool-name {
        font-size: 10px !important;
    }

    #settings-overlay .window {
        max-width: min(96vw, 700px) !important;
        width: min(96vw, 700px);
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #settings-overlay .settings-dialog-window-body {
        max-height: min(85vh, 520px);
        font-size: 10px;
    }

    #settings-overlay .settings-dialog-layout {
        gap: 10px;
    }

    #settings-overlay .settings-dialog-aside {
        max-width: none;
        flex: 1 1 200px;
    }

    #settings-overlay .settings-dialog-main {
        flex: 1 1 220px;
    }

    #settings-overlay .settings-shortcuts-list {
        padding-left: 14px;
        font-size: 9px;
    }

    @media (max-width: 640px) {
        #settings-overlay .settings-dialog-layout {
            flex-direction: column;
        }

        #settings-overlay .settings-dialog-aside {
            flex: none;
            max-width: none;
            border-right: none;
            border-bottom: 1px solid #b0b0b0;
            padding-right: 0;
            padding-bottom: 8px;
            margin-bottom: 4px;
        }

        #settings-overlay .settings-dialog-main {
            padding-left: 0;
        }

        #settings-overlay .settings-aside-block:not(.settings-aside-block--about) {
            display: none !important;
        }
    }

    /* --- Menu mobile dynamique (Win98 clair uniquement ; thème sombre → theme-win98-modern.css) --- */
    body:not(.theme-dark) .illu-mobile-drawer__menu-btn {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 12px;
        margin-bottom: 4px;
        text-align: left;
        background: #e0e0e0;
        border: 2px solid;
        border-color: #fff #808080 #808080 #fff;
        font-family: inherit;
        font-size: 13px;
        color: #222;
        cursor: pointer;
        box-sizing: border-box;
    }

    body:not(.theme-dark) .illu-mobile-drawer__menu-btn:active {
        border-color: #808080 #fff #fff #808080;
        background: #d0d0d0;
        padding: 11px 11px 9px 13px;
    }

    .illu-mobile-drawer__sub-list {
        display: flex;
        flex-direction: column;
        padding-left: 12px;
        margin-bottom: 8px;
        border-left: 1px solid #a0a0a0;
        margin-left: 6px;
        align-items: stretch;
    }

    .illu-mobile-drawer__sub-list .illu-mobile-drawer__menu-btn {
        width: 100%;
        margin-bottom: 4px;
        flex-shrink: 0;
    }

    .illu-mobile-drawer__sub-list .illu-mobile-drawer__menu-btn:last-child {
        margin-bottom: 0;
    }

    .illu-mobile-drawer__divider {
        height: 1px;
        background: #808080;
        margin: 6px 0;
        width: 100%;
    }

    /* Réduction de la taille des tuiles d'actions */
    .illu-mobile-ui .illu-mobile-drawer__palette-tile {
        min-width: 64px;
        height: 56px;
        font-size: 10px;
    }

    .illu-mobile-ui .illu-mobile-drawer__palette-tile i {
        font-size: 18px;
        margin-bottom: 4px;
    }

    :root {
        --palette-dock-width: 220px;
        --history-panel-width: 200px;
    }

    .palette-dock {
        padding: 4px 4px;
        gap: 5px;
    }

    body:not(.ui-layout-floating) #win-tools .window-body {
        padding: 0 1px 1px;
    }

    .color-top-row {
        gap: 4px;
        margin-bottom: 4px;
    }

    .color-wheel-row {
        gap: 4px;
        margin-bottom: 4px;
    }

    body:not(.ui-layout-floating) #win-layers .palette-panel-body--fill {
        max-height: min(70vh, 720px);
    }

    body:not(.ui-layout-floating) #win-layers #layers-list.list-box--flex {
        max-height: min(64vh, 640px);
        min-height: 88px;
    }

    body:not(.ui-layout-floating) #win-history .palette-panel-body--fill {
        max-height: 260px;
    }

    body:not(.ui-layout-floating) #win-history #history-list.list-box--flex {
        max-height: 232px;
        min-height: 96px;
    }

    .list-box {
        font-size: 10px;
    }

    .list-item {
        padding: 1px 4px;
    }

    .tool-btn {
        padding: 2px;
        min-width: 22px;
        min-height: 22px;
    }

    #color-sliders-panel {
        font-size: 11px !important;
    }
}

@media (max-width: 640px) {

    body,
    html {
        font-size: 10px;
    }


    :root {
        --palette-dock-width: 200px;
        --history-panel-width: 200px;
    }

    .palette-dock {
        padding: 3px 3px;
        gap: 4px;
    }

    body:not(.ui-layout-floating) #win-tools .window-body {
        padding: 0 1px;
    }

    body:not(.ui-layout-floating) #win-layers .palette-panel-body--fill {
        max-height: min(68vh, 640px);
    }

    body:not(.ui-layout-floating) #win-layers #layers-list.list-box--flex {
        max-height: min(62vh, 580px);
        min-height: 80px;
    }

    body:not(.ui-layout-floating) #win-history .palette-panel-body--fill {
        max-height: 220px;
    }

    body:not(.ui-layout-floating) #win-history #history-list.list-box--flex {
        max-height: 196px;
        min-height: 80px;
    }

    .list-box {
        font-size: 9px;
    }

    .tool-btn {
        min-width: 20px;
        min-height: 20px;
        padding: 1px;
    }

    #settings-overlay .window-body {
        padding: 8px !important;
        font-size: 10px;
    }

    #settings-overlay .settings-dialog-layout {
        gap: 10px;
    }

    #settings-overlay .settings-shortcuts-list {
        font-size: 10px;
        padding-left: 14px;
    }
}

@media (max-width: 480px) {

    body,
    html {
        font-size: 9px;
    }

    :root {
        --palette-dock-width: 180px;
        --history-panel-width: 200px;
    }

    .palette-dock {
        padding: 2px 2px;
        gap: 3px;
    }

    body:not(.ui-layout-floating) #win-layers .palette-panel-body--fill {
        max-height: min(65vh, 560px);
    }

    body:not(.ui-layout-floating) #win-layers #layers-list.list-box--flex {
        max-height: min(58vh, 500px);
        min-height: 72px;
    }

    body:not(.ui-layout-floating) #win-history .palette-panel-body--fill {
        max-height: 200px;
    }

    body:not(.ui-layout-floating) #win-history #history-list.list-box--flex {
        max-height: 172px;
        min-height: 72px;
    }

    .tool-btn {
        min-width: 19px;
        min-height: 19px;
    }

    #settings-overlay .window-body {
        padding: 6px !important;
        font-size: 9px;
    }
}

/* Canvas Styles — cadrillage sous les zones transparentes */
#main-canvas-container {
    position: relative;
    background: transparent;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    touch-action: none;
}

/* Collage volant : l’aperçu peut dépasser la zone de dessin jusqu’à validation. */
#main-canvas-container.illu-import-placement-active,
/* Hors toile : afficher le contenu hors document (semi-transparence côté rendu). */
#main-canvas-container.illu-allow-outside-canvas-active {
    overflow: visible;
}

/* Hors toile : le workspace ne doit pas rogner le débordement des calques hors document. */
#workspace.illu-allow-outside-canvas-active,
#workspace-wrapper.illu-allow-outside-canvas-active {
    overflow: visible !important;
}

#canvas-checker-underlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-color: #ffffff;
    background-image: repeating-conic-gradient(#d6d6d6 0% 25%, #ffffff 0% 50%);
    background-size: calc(12px / var(--canvas-zoom, 1)) calc(12px / var(--canvas-zoom, 1)) !important;
}

#drawing-svg,
#drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 1;
}

#drawing-svg {
    background: transparent;
}

/* Tool Grid : dimensions / flex — style.css + theme-win98-modern.css */

/* Color Wheel */
#color-wheel-container {
    flex: 0 0 auto;
    width: 135px;
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c0c0c0;
    border: 1px inset #fff;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
}

#color-wheel {
    cursor: crosshair;
    display: block;
    width: 135px;
    height: 135px;
    flex-shrink: 0;
}

/* Layer/History Lists */
.list-box {
    height: 120px;
    background: white;
    border: 1px inset #fff;
    overflow-y: auto;
    font-size: 12px;
}

.list-item {
    padding: 2px 5px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.list-item.active {
    background: #000080;
    color: white;
}

/* Dialogs */
#dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mode téléphone : modales et alertes pleine largeur, ancrées en bas (centrage horizontal) */
body.illu-mobile-ui #settings-overlay,
body.illu-mobile-ui #welcome-overlay,
body.illu-mobile-ui #dialog-overlay,
body.illu-mobile-ui #illu-alert-overlay,
body.illu-mobile-ui #close-tab-overlay,
body.illu-mobile-ui #import-choice-overlay,
body.illu-mobile-ui #import-oversize-overlay,
body.illu-mobile-ui #export-dialog-overlay,
body.illu-mobile-ui #image-bounds-overlay {
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    box-sizing: border-box !important;
}

body.illu-mobile-ui #illu-alert-overlay {
    padding-top: 0 !important;
    z-index: 6000 !important;
}

body.illu-mobile-ui #settings-overlay .window,
body.illu-mobile-ui #welcome-overlay .window,
body.illu-mobile-ui #dialog-overlay>.window,
body.illu-mobile-ui #close-tab-overlay>.window,
body.illu-mobile-ui #import-choice-overlay>.window,
body.illu-mobile-ui #import-oversize-overlay>.window,
body.illu-mobile-ui #export-dialog-overlay>.window,
body.illu-mobile-ui #image-bounds-overlay>.window,
body.illu-mobile-ui #illu-alert-overlay .illu-alert-window {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ——— Dialogue export (accès rapide PNG / .illu) ——— */
.illu-export-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.illu-export-dialog__lead {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #444;
}

.illu-export-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.illu-export-name__label {
    font-size: 11px;
    white-space: nowrap;
}

.illu-export-name__field {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    padding-right: 6px;
    background: #fff;
    border: 2px solid;
    border-color: var(--mp-inset-bot, #808080) var(--mp-inset-top, #dfdfdf) var(--mp-inset-top, #dfdfdf) var(--mp-inset-bot, #808080);
    border-radius: 2px;
}

.illu-export-name__field:focus-within {
    outline: 1px dotted #0a246a;
    outline-offset: 1px;
}

.illu-export-name__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    font-size: 11px;
    color: inherit;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.illu-export-name__ext {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    opacity: 0.85;
}

.illu-export-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.illu-export-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 92px;
    padding: 12px 8px;
    border: 2px solid;
    border-color: var(--mp-inset-top, #dfdfdf) var(--mp-inset-bot, #808080) var(--mp-inset-bot, #808080) var(--mp-inset-top, #dfdfdf);
    background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
}

.illu-export-quick-btn:hover,
.illu-export-quick-btn:focus-visible {
    background: linear-gradient(180deg, #fff 0%, #d8e8ff 100%);
    outline: none;
}

.illu-export-quick-btn:active {
    border-color: var(--mp-inset-bot, #808080) var(--mp-inset-top, #dfdfdf) var(--mp-inset-top, #dfdfdf) var(--mp-inset-bot, #808080);
    padding-top: 13px;
    padding-bottom: 11px;
}

.illu-export-quick-btn__icon {
    font-size: 1.85rem;
    color: #0a246a;
    line-height: 1;
}

.illu-export-quick-btn__title {
    font-size: 12px;
    font-weight: 700;
    color: #000;
}

.illu-export-quick-btn__hint {
    font-size: 10px;
    color: #555;
    line-height: 1.2;
    max-width: 11em;
}

.illu-export-more {
    border: 1px solid #a0a0a0;
    border-radius: 2px;
    background: #f8f8f8;
    padding: 0 8px 8px;
}

.illu-export-more__summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 2px;
    list-style-position: inside;
    color: #0a246a;
}

.illu-export-more__summary::-webkit-details-marker {
    color: #0a246a;
}

.illu-export-more__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.illu-export-more__row {
    margin-bottom: 0;
}

.illu-export-more__row label {
    min-width: 72px;
    font-size: 11px;
}

.illu-export-more__row select {
    flex: 1;
    min-width: 0;
}

.illu-export-more__opts .field-row {
    margin-bottom: 0;
}

.illu-export-more__note {
    margin: 0;
    font-size: 10px;
    color: #666;
}

.illu-export-more__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.illu-export-dialog__local {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid #c0c0c0;
}

.illu-export-local-status {
    font-size: 11px;
    line-height: 1.35;
    color: #404040;
    background: #f4f4f4;
    border: 1px solid #c0c0c0;
    padding: 6px 8px;
    border-radius: 2px;
}

.illu-export-local-status__row {
    margin: 1px 0;
}

body.theme-dark .illu-export-local-status {
    color: #ccc;
    background: #2a2a36;
    border-color: #555;
}

.illu-export-dialog__local-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.illu-export-dialog__autosave {
    flex: 1 1 auto;
    margin: 0;
}

.illu-export-dialog__autosave label {
    font-size: 11px;
}

.illu-export-dialog__footer {
    display: flex;
    justify-content: flex-end;
}

body.theme-dark .illu-export-dialog__lead {
    color: #ccc;
}

body.theme-dark .illu-export-name__field {
    background: #23232e;
    border-color: #555;
}

body.theme-dark .illu-export-name__input {
    color: #eee;
}

body.theme-dark .illu-export-name__ext {
    color: #aaa;
}

body.theme-dark .illu-export-quick-btn {
    background: linear-gradient(180deg, #3a3a48 0%, #2a2a36 100%);
    color: #eee;
}

body.theme-dark .illu-export-quick-btn__title {
    color: #f0f0f0;
}

body.theme-dark .illu-export-quick-btn__hint {
    color: #aaa;
}

body.theme-dark .illu-export-more {
    background: #2a2a34;
    border-color: #555;
}

body.illu-mobile-ui #settings-overlay .window {
    max-height: min(88vh, calc(100vh - 24px)) !important;
    display: flex !important;
    flex-direction: column !important;
}

body.illu-mobile-ui #settings-overlay .settings-dialog-window-body {
    max-height: min(75vh, calc(100vh - 120px)) !important;
}

body.illu-mobile-ui #settings-overlay .settings-dialog-layout {
    flex-direction: column !important;
}

body.illu-mobile-ui #settings-overlay .settings-dialog-aside {
    flex: 0 0 auto !important;
    max-width: none !important;
    border-right: none !important;
    border-bottom: 1px solid #b0b0b0;
    padding-bottom: 10px;
    margin-bottom: 8px;
}

body.illu-mobile-ui.effect-dialog-open #effect-dialog {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
}

body.illu-mobile-ui.effect-dialog-open #effect-dialog-window {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    max-height: min(88vh, calc(100vh - 24px)) !important;
    box-sizing: border-box !important;
}

/* Loupe tactile — poignées de sélection / déformation */
.illu-selection-touch-loupe {
    position: fixed;
    z-index: 2500005;
    width: 96px;
    height: 96px;
    pointer-events: none;
    box-sizing: border-box;
}

.illu-selection-touch-loupe__ring {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.65),
        0 4px 14px rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.15);
}

/* Centre = ancrage poignée (hors du ring pour ne pas être rogné par overflow:hidden) */
.illu-selection-touch-loupe__cross {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    pointer-events: none;
    z-index: 3;
}

.illu-selection-touch-loupe__cross::before,
.illu-selection-touch-loupe__cross::after {
    content: '';
    position: absolute;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
}

.illu-selection-touch-loupe__cross::before {
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
}

.illu-selection-touch-loupe__cross::after {
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
}

.illu-selection-touch-loupe__canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.illu-palette-disabled {
    display: none !important;
}

/* Mode tramé : roue, toggle grille et palette RVB masqués (motifs tramé uniquement) */
#win-colors.color-window--dither #color-wheel-container,
#win-colors.color-window--dither #btn-toggle-color-grid,
#win-colors.color-window--dither #palette-grid {
    display: none !important;
}

/* --- PHOTO MODE PRO --- */
body.illu-photo-mode-active #palette-dock-left,
body.illu-photo-mode-active #palette-dock-right,
body.illu-photo-mode-active #tab-bar-outer,
body.illu-photo-mode-active .illu-menubar-toolbar,
body.illu-photo-mode-active .tool-options-bar,
body.illu-photo-mode-active #win-tools,
body.illu-photo-mode-active #main-toolbox,
body.illu-photo-mode-active .illu-pdn-edge-strip,
body.illu-photo-mode-active #win-colors,
body.illu-photo-mode-active #win-layers,
body.illu-photo-mode-active #win-history {
    display: none !important;
}

body.illu-photo-mode-active #app-status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    background: #252526;
    color: #aaa;
    border-top: 1px solid #333;
}

/* Ensure menubar is always on top of the and doesn't get covered by overlay if possible, 
   or the overlay starts below. We will use z-index. */
.illu-menubar-root {
    position: relative;
    z-index: 4990 !important;
}

ul[role="menu"] {
    z-index: 4990 !important;
}

/* =========================================================================
   Universal Link Modernization & Shortcut Cards
   ========================================================================= */
a {
    color: var(--mp-accent, #1e4a8c);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

a:hover {
    color: var(--mp-accent, #1e4a8c);
    opacity: 0.8;
    text-decoration: none;
}

/* Shortcut UI for Settings */
.url-shortcut-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.theme-dark .url-shortcut-row {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.url-shortcut-code {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11px;
    color: var(--mp-accent, #1e4a8c);
    background: rgba(30, 74, 140, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.url-shortcut-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    cursor: pointer;
    font-size: 11px !important;
    opacity: 0.5;
    transition: all 0.2s !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-text, #333) !important;
}

.url-shortcut-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--mp-accent, #1e4a8c) !important;
}

body.theme-dark .url-shortcut-code {
    color: #8ab4e8 !important;
    /* Soft light blue for dark mode */
    background: rgba(138, 180, 232, 0.1);
    border: 1px solid rgba(138, 180, 232, 0.2);
}

body.theme-dark .url-shortcut-btn {
    color: #eee !important;
    opacity: 1 !important;
}

body.theme-dark .url-shortcut-btn:hover {
    color: #8ab4e8 !important;
}

/* Fix visibility of the URL block title in dark mode */
body.theme-dark .settings-aside-block--urls {
    color: #ccc !important;
}

body.theme-dark .settings-aside-block--urls p {
    border-bottom-color: #444 !important;
}

/* Toast Feedback */
.mp-toast {
    position: fixed;
    background: #333;
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 100000;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid #555;
    transform: translate(-50%, -100%);
    opacity: 0;
}

.mp-toast.show {
    opacity: 1;
    transform: translate(-50%, -120%);
}

.settings-shortcuts-heading {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.2s;
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
}

.settings-shortcuts-heading:hover {
    background: #e6e6e6;
    border-color: #bbb;
    color: #000;
}

body.theme-dark .settings-shortcuts-heading {
    background: #2a2a2a;
    border-color: #444;
    color: #ccc;
}

body.theme-dark .settings-shortcuts-heading:hover {
    background: #333;
    border-color: #555;
    color: #fff;
}

.settings-shortcuts-heading .toggle-icon {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s;
    display: inline-block;
}

/* Developer Credit Styling in Status Bar */
.status-bar-credit-link {
    color: var(--mp-accent, #1e4a8c) !important;
    font-weight: 900;
    margin-left: 6px;
    text-shadow: 0.5px 0.5px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
    text-decoration: none;
    letter-spacing: 0.3px;
}

.status-bar-credit-link:hover {
    transform: scale(1.15) rotate(-2deg);
    filter: drop-shadow(0 0 8px rgba(var(--mp-accent-rgb, 30, 74, 140), 0.6));
    color: var(--mp-accent) !important;
    opacity: 1 !important;
}

body.theme-dark .status-bar-credit-link {
    color: var(--mp-accent) !important;
    filter: brightness(1.3);
    /* Leger boost pour la lisibilité sur fond sombre */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

body.theme-dark .status-bar-credit-link:hover {
    filter: brightness(1.5) drop-shadow(0 0 12px var(--mp-accent));
    color: #fff !important;
}

.settings-table-row--flex {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
}

/* Premium Settings Action Buttons */
.settings-action-btn {
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    border: 1px solid #b8babf;
    border-bottom: 2px solid #a1a3a8;
    border-radius: 3px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.12s ease;
    text-shadow: 0 1px 0 #fff;
    min-height: 28px;
    line-height: normal;
}

.settings-action-btn i {
    font-size: 12px;
    opacity: 0.85;
}

.settings-github-row {
    margin: 10px 0 0;
}

.settings-github-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 3px;
    border: 1px solid #b8babf;
    border-bottom: 2px solid #a1a3a8;
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    color: #222 !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.settings-github-link:hover {
    background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 100%);
    border-color: #9ca3af;
    color: #111 !important;
}

.settings-github-link:active {
    border-bottom-width: 1px;
    transform: translateY(1px);
}

.settings-github-link--compact {
    min-height: 28px;
}

.settings-github-link i {
    font-size: 14px;
    opacity: 0.9;
}

.settings-action-btn:hover {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: var(--accent-color, #0078d7);
    filter: brightness(1.02);
}

.settings-action-btn:active {
    background: #e9ecef;
    border-bottom-width: 1px;
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.settings-action-btn--danger {
    color: #a91e1e;
}

.settings-action-btn--danger:hover {
    background: linear-gradient(180deg, #fff5f5 0%, #fed7d7 100%);
    border-color: #f56565;
    color: #c53030;
}

/* Dark Mode Overrides */
html:has(body.theme-dark) .settings-action-btn {
    background: linear-gradient(180deg, #454545 0%, #323232 100%);
    border: 1px solid #555;
    border-bottom: 2px solid #222;
    color: #eee;
    text-shadow: 0 1px 0 #000;
}

html:has(body.theme-dark) .settings-action-btn:hover {
    background: linear-gradient(180deg, #505050 0%, #3a3a3a 100%);
    border-color: var(--accent-color, #3b82f6);
}

html:has(body.theme-dark) .settings-action-btn--danger {
    color: #fc8181;
}

html:has(body.theme-dark) .settings-action-btn--danger:hover {
    background: linear-gradient(180deg, #5a2727 0%, #4a1d1d 100%);
}

#contact-send-btn {
    background: linear-gradient(180deg, #e0f2fe 0%, #7dd3fc 100%) !important;
    border: 2px solid !important;
    border-color: var(--mp-raised-top) var(--mp-raised-bot) var(--mp-raised-bot) var(--mp-raised-top) !important;
    color: #0c4a6e !important;
    font-weight: 600;
    border-radius: var(--mp-radius) !important;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4) !important;
}

#contact-send-btn:hover {
    filter: brightness(1.05);
}

#contact-send-btn:active {
    border-color: var(--mp-inset-top) var(--mp-inset-bot) var(--mp-inset-bot) var(--mp-inset-top) !important;
    padding: 5px 11px 3px 13px !important;
}

/* =========================================================================
   CUSTOM OVERRIDES FOR MASTERPAINT PREMIUM UI
   ========================================================================= */

/* 1. Global height limit for .illu-gauge-wrap */
.illu-gauge-wrap {
    height: 20px !important;
}

/* 3. Icon Viewer Custom CSS Styling for dynamic previews */
#iview-scroll {
    transition: background-color 0.25s ease, color 0.25s ease !important;
}

/* When light preview is toggled (when the page is in dark mode) */
#iview-scroll.iview-light-preview {
    background: #ffffff !important;
    color: #0f172a !important;
}

#iview-scroll.iview-light-preview .iview-grid-item {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

#iview-scroll.iview-light-preview .iview-grid-item:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

#iview-scroll.iview-light-preview .iview-grid-item i {
    color: #1e293b !important;
}

/* When dark preview is toggled (when the page is in light mode) */
#iview-scroll.iview-dark-preview {
    background: #0f172a !important;
    color: #f8fafc !important;
}

#iview-scroll.iview-dark-preview .iview-grid-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

#iview-scroll.iview-dark-preview .iview-grid-item:hover {
    background: #334155 !important;
    border-color: #475569 !important;
}

#iview-scroll.iview-dark-preview .iview-grid-item i {
    color: #f8fafc !important;
}

/* 4. Ensure the Icon Viewer Close Button is always beautifully visible and functional */
.iview-window .title-bar-controls .title-bar-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}



/* 5. Icônes dégradé (mode « Dégradé » — illu-colored-icons ; voir icons-flat-colored.css pour « Colorés ») */
body.illu-colored-icons .fa-solid::before {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

body.illu-colored-icons .fa-file::before,
body.illu-colored-icons .fa-file-circle-plus::before {
    background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-folder-open::before {
    background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-floppy-disk::before {
    background: linear-gradient(180deg, #4ade80 0%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-image::before {
    background: linear-gradient(180deg, #c4b5fd 0%, #6d28d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-arrow-rotate-left::before,
body.illu-colored-icons .fa-undo::before {
    background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-arrow-rotate-right::before,
body.illu-colored-icons .fa-redo::before {
    background: linear-gradient(180deg, #fb923c 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-scissors::before {
    background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-copy::before {
    background: linear-gradient(180deg, #22d3ee 0%, #0e7490 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-paste::before {
    background: linear-gradient(180deg, #2dd4bf 0%, #0f766e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-square-dashed::before,
body.illu-colored-icons .fa-circle-dashed::before,
body.illu-colored-icons .fa-lasso::before {
    background: linear-gradient(180deg, #7dd3fc 0%, #0369a1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-wand-magic-sparkles::before {
    background: linear-gradient(180deg, #e879f9 0%, #a21caf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-pencil::before,
body.illu-colored-icons .fa-pen::before {
    background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-paint-brush::before {
    background: linear-gradient(180deg, #f472b6 0%, #be185d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-fill-drip::before {
    background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-eraser::before {
    background: linear-gradient(180deg, #fda4af 0%, #e11d48 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-droplet::before,
body.illu-colored-icons .fa-eye-dropper::before {
    background: linear-gradient(180deg, #38bdf8 0%, #0369a1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-crop-simple::before {
    background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-magnifying-glass::before {
    background: linear-gradient(180deg, #6ee7b7 0%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-square::before {
    background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-circle::before {
    background: linear-gradient(180deg, #4ade80 0%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-star::before {
    background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-heart::before {
    background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-font::before {
    background: linear-gradient(180deg, #a5b4fc 0%, #4338ca 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Annuler / refaire (menus) */
body.illu-colored-icons .fa-rotate-left::before {
    background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-rotate-right::before {
    background: linear-gradient(180deg, #fb923c 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ——— Ajustements (menu Image) ——— */
body.illu-colored-icons .fa-sliders::before {
    background: linear-gradient(180deg, #93c5fd 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-chart-column::before {
    background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-circle-half-stroke::before {
    background: linear-gradient(180deg, #818cf8 0%, #3730a3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-droplet-slash::before {
    background: linear-gradient(180deg, #94a3b8 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-image-portrait::before {
    background: linear-gradient(180deg, #d4a574 0%, #92400e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-swatchbook::before {
    background: linear-gradient(180deg, #f9a8d4 0%, #9333ea 50%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-sun::before {
    background: linear-gradient(180deg, #fde047 0%, #ea580c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-palette::before {
    background: linear-gradient(180deg, #f472b6 0%, #7c3aed 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-camera-retro::before {
    background: linear-gradient(180deg, #5eead4 0%, #0f766e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-bolt::before {
    background: linear-gradient(180deg, #fef08a 0%, #ca8a04 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-eye::before {
    background: linear-gradient(180deg, #67e8f9 0%, #0891b2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-chart-line::before {
    background: linear-gradient(180deg, #86efac 0%, #15803d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ——— Effets (sous-menus) ——— */
body.illu-colored-icons .fa-film::before {
    background: linear-gradient(180deg, #d4d4d8 0%, #52525b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-border-all::before {
    background: linear-gradient(180deg, #c4b5fd 0%, #6d28d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-tape::before {
    background: linear-gradient(180deg, #fca5a5 0%, #991b1b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-circle-dot::before {
    background: linear-gradient(180deg, #fb7185 0%, #be123c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-compress::before {
    background: linear-gradient(180deg, #fdba74 0%, #9a3412 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-mountain::before {
    background: linear-gradient(180deg, #86efac 0%, #166534 50%, #78716c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-gem::before {
    background: linear-gradient(180deg, #a5f3fc 0%, #7e22ce 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-arrows-rotate::before {
    background: linear-gradient(180deg, #7dd3fc 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-border-none::before {
    background: linear-gradient(180deg, #a8a29e 0%, #57534e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-table-cells-large::before {
    background: linear-gradient(180deg, #2dd4bf 0%, #0f766e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-hurricane::before {
    background: linear-gradient(180deg, #64748b 0%, #1e3a5f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-water::before {
    background: linear-gradient(180deg, #38bdf8 0%, #1e40af 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-clover::before {
    background: linear-gradient(180deg, #4ade80 0%, #15803d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-snowflake::before {
    background: linear-gradient(180deg, #e0f2fe 0%, #0284c7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-cube::before {
    background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-smog::before {
    background: linear-gradient(180deg, #cbd5e1 0%, #64748b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-circle-notch::before {
    background: linear-gradient(180deg, #c084fc 0%, #6b21a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-forward::before {
    background: linear-gradient(180deg, #60a5fa 0%, #1e3a8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-eye-slash::before {
    background: linear-gradient(180deg, #f87171 0%, #991b1b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-camera::before {
    background: linear-gradient(180deg, #94a3b8 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-lightbulb::before {
    background: linear-gradient(180deg, #fef9c3 0%, #eab308 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-pen-nib::before {
    background: linear-gradient(180deg, #1e293b 0%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-stamp::before {
    background: linear-gradient(180deg, #d6d3d1 0%, #78350f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-braille::before {
    background: linear-gradient(180deg, #a1a1aa 0%, #3f3f46 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-glasses::before {
    background: linear-gradient(180deg, #67e8f9 0%, #0369a1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Menus : image, calques, divers */
body.illu-colored-icons .fa-crop::before {
    background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-maximize::before,
body.illu-colored-icons .fa-expand::before {
    background: linear-gradient(180deg, #7dd3fc 0%, #0369a1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-square-plus::before {
    background: linear-gradient(180deg, #86efac 0%, #15803d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-rotate::before {
    background: linear-gradient(180deg, #a78bfa 0%, #5b21b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-align-center::before {
    background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-table-columns::before {
    background: linear-gradient(180deg, #f0abfc 0%, #a21caf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-object-ungroup::before {
    background: linear-gradient(180deg, #fcd34d 0%, #b45309 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-trash-can::before {
    background: linear-gradient(180deg, #fca5a5 0%, #b91c1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-download::before {
    background: linear-gradient(180deg, #4ade80 0%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-file-export::before,
body.illu-colored-icons .fa-up-right-from-square::before {
    background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-gear::before {
    background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-file-circle-xmark::before,
body.illu-colored-icons .fa-xmark::before {
    background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-bug::before {
    background: linear-gradient(180deg, #f87171 0%, #7f1d1d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-desktop::before {
    background: linear-gradient(180deg, #60a5fa 0%, #1e3a8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons .fa-clipboard-list::before {
    background: linear-gradient(180deg, #fde68a 0%, #b45309 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Menu « Ajouter du bruit » et palette calques */
body.illu-colored-icons menu .menu-row-icon .fa-plus::before {
    background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.illu-colored-icons menu .menu-row-icon .fa-minus::before {
    background: linear-gradient(180deg, #fca5a5 0%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Toolbar palette calques (neutre) */
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-plus::before,
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-minus::before,
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-arrow-up::before,
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-arrow-down::before,
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-layer-group::before,
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-arrows-left-right::before,
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-clone::before,
body.illu-colored-icons #win-layers .layer-palette-toolbar .fa-object-group::before {
    background: linear-gradient(180deg, #94a3b8 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Custom Gradient Icon Colored Mode Accent */
body.illu-colored-icons #tool-gradient svg,
body.illu-colored-icons #tool-deform svg {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15)) !important;
}

/* Disable inversion filter on active icons when colored icons mode is active */
body.illu-colored-icons .tool-btn.active i,
body.illu-colored-icons .tool-btn.active .tool-icon,
body.illu-colored-icons .opt-bar-btn.opt-bar-btn--on i,
body.illu-colored-icons .illu-icon-toggle--on i,
body.illu-colored-icons .illu-icon-toggle.active i {
    filter: none !important;
}

/* Premium Glow Effect for Active Colored Icons in Modern Theme */
body.illu-colored-icons #win-tools .tool-btn.active .tool-icon:not(svg),
body.illu-colored-icons .opt-bar-btn.opt-bar-btn--on i,
body.illu-colored-icons .illu-icon-toggle--on i,
body.illu-colored-icons .illu-icon-toggle.active i {
    filter: brightness(1.2) drop-shadow(0 0 2px rgba(255, 255, 255, 0.7)) !important;
}

body.illu-colored-icons.theme-dark #win-tools .tool-btn.active .tool-icon:not(svg),
body.illu-colored-icons.theme-dark .opt-bar-btn.opt-bar-btn--on i,
body.illu-colored-icons.theme-dark .illu-icon-toggle--on i,
body.illu-colored-icons.theme-dark .illu-icon-toggle.active i {
    filter: brightness(1.3) drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)) !important;
}

body.illu-colored-icons.theme-dark .fa-solid::before {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

/* ——— Boîte à outils : padding minimal, retour à la ligne, redimensionnement ——— */
#win-tools>.window-body {
    padding: 0 1px 1px;
    box-sizing: border-box;
}

body.ui-layout-floating #win-tools.window.palette-panel.floating-window {
    resize: none !important;
    overflow: visible;
    min-width: 64px;
    min-height: 68px;
    max-width: min(94vw, 360px);
    max-height: min(94vh, 96vh);
    box-sizing: border-box;
}

body.ui-layout-floating #win-tools>.window-body {
    padding: 0 1px 1px;
    overflow: visible;
    flex: 0 1 auto;
    min-height: 0;
}

body.ui-layout-docked:not(.illu-mobile-ui) #palette-dock-left #win-tools {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.illu-pdn-dock-active #palette-dock-left,
body.illu-mobile-ui #palette-dock-left {
    resize: none;
    max-width: none;
}

#tool-text-font {
    width: 130px;
}

#settings-overlay .settings-dialog-actions-group>* {
    height: 28px;
    box-sizing: border-box;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.window-body {
    padding: 6px;
}

#app-window>.window-body.illu-app-window-body,
#win-layers .window-body,
#win-history .window-body {
    padding: 0 !important;
}

/* Hide theme base layout switcher in settings & welcome windows when on mobile */
/* Hide theme base layout switcher in settings & welcome windows when on mobile */
body.illu-mobile-ui .settings-table-row:has(#settings-ui-base-row),
body.illu-mobile-ui .settings-table-row:has(#welcome-ui-base-row) {
    display: none !important;
}

/* Custom Header Restructure for MasterPaint */
#app-window {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

#app-window>.window-body.illu-app-window-body {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.app-header-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    background: transparent !important;
    border-bottom: none !important;
    flex-shrink: 0;
    position: relative;
    z-index: auto !important;
    overflow: visible !important;
}

.app-header-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    overflow: visible !important;
}

.illu-sub-menubar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* contact button aligned right next to toolbar! */
    gap: 12px;
    background: var(--mp-surface, #c0c0c0) !important;
    /* restore solid theme background color */
    border-top: 1px solid var(--mp-raised-top, #fff);
    min-height: var(--illu-submenubar-h, 32px);
    padding: 0 !important;
    /* remove padding */
    box-sizing: border-box;
}

body:not(.theme-aero):not(.theme-luna):not(.theme-modern) .illu-menubar-toolbar {
    border-left: none !important;
    border-right: 1px solid color-mix(in srgb, var(--mp-accent) 28%, #a0a0a0) !important;
    box-shadow: none !important;
    /* remove box-shadow */
}

body.theme-dark .illu-sub-menubar {
    background: var(--mp-surface, #2b2b2b) !important;
    border-top-color: #3d3d3d;
    border-bottom-color: #1a1a1a;
}

/* Wrapper to force menubar and sub-menubar to hug their content and match width perfectly */
.illu-menu-and-sub-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: fit-content !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-top-right-radius: 10px !important;
    /* round top-right of menubar */
    z-index: 4900 !important;
    /* Lower than tool-options-container so the inverted corner pseudo-element sits below it */
    overflow: visible !important;
    /* Crucial: allow dropdown menus to pop out */

    filter: drop-shadow(1.5px 0px 0px rgba(200, 200, 200,1)) !important;

}

/* Fix hover bleeding on the top right corner of the menubar */
.illu-menubar-root > li:last-child,
.illu-menubar-root > li:last-child > span,
.illu-menubar-root > li:last-child > button {
    border-top-right-radius: 10px !important;
}

/* Fix hover bleeding on the sub-menubar */
.illu-sub-menubar .illu-menubar-toolbar > button:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* Inverted (concave) rounded corner at the bottom-right intersection with options container */
.illu-menu-and-sub-wrapper::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    /* Aligné pile au bord */
    right: -12px !important;
    width: 12px !important;
    height: 12px !important;
    background-color: var(--mp-surface) !important;
    /* Le fond est directement ici */

    /* On découpe un arc de cercle transparent en haut à droite */
    /* (Ce qui donne un effet de coin arrondi inversé en bas à gauche) */
    -webkit-mask-image: radial-gradient(circle at 100% 0%, transparent 12px, black 12px) !important;
    mask-image: radial-gradient(circle at 100% 0%, transparent 12px, black 12px) !important;

    pointer-events: none !important;
    z-index: 1 !important;
    /* Plus besoin de le cacher loin derrière ! */
}

.illu-menu-and-sub-wrapper .illu-menubar-root,
.illu-menu-and-sub-wrapper .illu-sub-menubar {
    width: 100% !important;
    box-sizing: border-box !important;
}

.illu-menubar-root {
    position: relative !important;
    z-index: 4900 !important;
    /* sits on top of everything including options bar for dropdowns */
    border-top-right-radius: 10px !important;
    overflow: visible !important;
}

/* Tool options container styling - elevated to sit on top of the sub-menubar ::after pseudo-element */
#tool-options-container {
    position: relative !important;
    z-index: 50 !important;
    /* Above the wrapper ::after pseudo-element (which is at z-index: 5) */
    background: var(--mp-surface, #c0c0c0) !important;
}

/* Styling tab-bar-outer on the right of the headers - elevated and self-adjusting width */
/* Styling tab-bar-outer on the right of the headers - elevated and self-adjusting width */
.tab-bar-outer {
    position: absolute !important;
    top: 0px !important;
    right: 5px !important;
    z-index: 4800 !important;
    background: transparent !important;
    border: none !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    /* Stack scroll buttons and tabs horizontally */
    align-items: center !important;
    min-width: 76px !important;
    /* Min width to fit exactly 1 document tab */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.tab-bar-scroll {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    /* Hide scrollbars */
    align-items: center !important;
}

.tab-bar-scroll::-webkit-scrollbar {
    display: none !important;
    /* Hide scrollbar for Chrome/Safari */
}

/* Beautiful scroll navigation buttons styling */
.tab-scroll-btn {
    display: none !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 40px !important;
    min-width: 16px !important;
    min-height: 40px !important;
    border: none !important;
    background: rgba(var(--mp-accent-rgb), 0.2) !important;
    color: var(--mp-text, #ffffff) !important;
    cursor: pointer !important;
    /* Hidden by default! */
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 4010 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    border: 1px solid var(--mp-accent) !important;
    transition: all 0.2s ease !important;
}

.tab-bar-outer.tab-bar-has-overflow .tab-scroll-btn {
    display: flex !important;
    /* Visible only when tabs overflow! */
}

body.theme-dark .tab-scroll-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #dfdfdf !important;
}
.tab-scroll-btn:hover {
    background: var(--mp-accent) !important; /* Le fond devient la couleur d'accent */
    color: white !important;                 /* Texte contrasté */
    box-shadow: 0 0 8px var(--mp-accent) !important; /* Effet lumineux (glow) */
}

.tab-scroll-btn:active {
    transform: scale(0.95) !important;
}

.tab-bar-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Prevent wrapping so it overflows horizontally! */
    align-items: center !important;
    gap: 0px !important;
    box-sizing: border-box !important;
}

/* Quick toolbar buttons layout improvements - borderless, compact, transparent, alive on hover */
.illu-menubar-toolbar .illu-menubar-icon-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.illu-menubar-toolbar .illu-menubar-icon-btn:hover {
    background: var(--mp-menu-hover-bg, rgba(0, 0, 0, 0.08)) !important;
    border-color: var(--mp-accent, #0066cc) !important;
    color: var(--mp-menu-hover-fg, var(--mp-text)) !important;
}

body.theme-dark .illu-menubar-toolbar .illu-menubar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--mp-accent, #0088ff) !important;
}

.illu-menubar-toolbar .illu-menubar-icon-btn:active {
    background: var(--mp-accent-muted, rgba(0, 0, 0, 0.15)) !important;
    border-color: var(--mp-accent, #0066cc) !important;
    transform: scale(0.95) !important;
}

/* Adjust zoom value wrap for smaller toolbar height */
.illu-menubar-zoom-val {
    font-size: 11px !important;
    min-width: 32px !important;
}

/* Beautiful Paint.NET Card/Box tab, responsive to theme using CSS variables! */
.tab-bar-inner .tab {

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 56px !important;
    height: 56px !important;
    /* Reducd height to bring title closer to preview */
    padding: 2px !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    /* Transparent by default */
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;
    border-radius: 0px !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
    /* Enforce full width and enable overflow scrolling! */
    transition: outline 0.15s ease, background-color 0.15s ease;
}

.tab-bar-inner .tab-group {
    flex-shrink: 0 !important;
    /* Prevent parent groups from shrinking */
}

/* Translucent active and hover states framed by the active accent color */
.tab-bar-inner .tab.active {
    outline: 2px solid var(--mp-accent, #0078d7) !important;
    outline-offset: -1px !important;
    background: color-mix(in srgb, var(--mp-accent, #0078d7) 28%, transparent) !important;
}

.tab-bar-inner .tab:hover:not(.active) {
    outline: 2px solid color-mix(in srgb, var(--mp-accent, #0078d7) 40%, transparent) !important;
    outline-offset: -1px !important;
    background: color-mix(in srgb, var(--mp-accent, #0078d7) 12%, transparent) !important;
}

/* Thumbnail inside the tab card, placed at the bottom */
.tab-bar-inner .tab .tab-thumb {
    margin-bottom: 7px;

    width: 66px !important;
    height: 36px !important;
    max-width: 66px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
    order: 2 !important;
    /* Thumbnail goes BELOW label! */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

body.theme-dark .tab-bar-inner .tab .tab-thumb {
    background: #181818 !important;
    border-color: #404040 !important;
}

/* Text label above thumbnail - white by default, smaller font, closer to top, bolder */
.tab-bar-inner .tab span {
    padding-top: 7px;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    color: #ffffff !important;
    /* White title by default */
    font-weight: 600 !important;
    pointer-events: none !important;
    order: 1 !important;
    /* Label goes ABOVE thumbnail! */
    margin: 1px 0 2px 0 !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
}

/* Close button - styled as a small square red close button at the top-right corner of the tab on hover */
.tab-bar-inner .tab button {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    font-size: 8px !important;
    line-height: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0px !important;
    background: #e81123 !important;
    /* Flat red button */
    color: #ffffff !important;
    display: none !important;
    /* Hidden by default */
    align-items: center !important;
    justify-content: center !important;
    z-index: 15 !important;
    cursor: pointer !important;
}

.tab-bar-inner .tab:hover button {
    display: flex !important;
    /* Show close button on hover */
}

.tab-bar-inner .tab button:hover {
    background: #f1707a !important;
    /* Lighter red hover */
    color: #ffffff !important;
}

/* Dynamic gold gradient border for tab-groups containing 2 or more elements (parent tab + alpha mask tabs) */
/* Dynamic gold gradient border for tab-groups containing 2 or more elements (parent tab + alpha mask tabs) */
.tab-bar-inner .tab-group {
    border: none !important;
    /* Remove legacy JavaScript grey border by default */
    box-shadow: none !important;
    position: relative !important;
}

.tab-bar-inner .tab-group:has(.tab:nth-of-type(2))::after {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 4px !important;
    padding: 3px !important;
    /* border width */
    background: linear-gradient(135deg, #ffe066, #f5b041, #ca6f1e, #ffe066) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 10 !important;
    box-shadow: 0 1px 4px rgba(245, 176, 65, 0.25) !important;
}

@media (max-width: 590px) {
  

  .tab-bar-outer {
    /* On annule tes anciennes contraintes */
    position: static !important; 
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    z-index: 40 !important;
  }

  #tab-bar {
    flex-direction: row !important;

  }
  .tab-bar-inner .tab {
    width: 100px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: row !important;
  }
  .tab-bar-inner .tab .tab-thumb,
  .tab-bar-inner .tab:hover .tab-thumb {
    width: 40px !important;
    height: 25px !important;
    margin: 0 !important;
    transition: none !important;
  }
  .tab-bar-inner .tab span,
  .tab-bar-inner .tab:hover span {
    display: block !important;
    color: black !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }
}

/* Ensure settings scope button rows take 100% width of their containers */
#settings-overlay .settings-table-control:has(.illu-settings-scope-btn-row),
#welcome-overlay .settings-table-control:has(.illu-settings-scope-btn-row) {
    width: 100% !important;
}

/* Thème d'interface : catégories (Windows / macOS) empilées */
.illu-theme-variant-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.illu-theme-variant-control .illu-theme-cat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .55;
    margin: 2px 0 0;
}
.illu-theme-variant-control .illu-theme-cat-label:first-child {
    margin-top: 0;
}
.illu-theme-variant-control .illu-theme-variant-row {
    margin-bottom: 2px;
}

#tool-line-mode-row .illu-scope-btn-row {
    max-height: 18px;
}

#tool-line-mode-row button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    line-height: 1 !important;       
    padding-top: 0 !important;       
    padding-bottom: 0 !important;    
    
    /* LA CORRECTION ICI : */
    height: 18px !important;         /* Tu demandes 18px */
    min-height: 0 !important;        /* Tu annules la barrière des 22px */
}

body.illu-mobile-ui .app-header-container {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SVG STUDIO MODE  —  body.illu-svg-mode-active
   Toutes ces règles ne s'appliquent QUE en mode SVG.
   Le mode bitmap est intact : aucun sélecteur ne touche les éléments bitmap
   sans ce préfixe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Masquer / afficher les outils selon le mode ─────────────────────────── */
body.illu-svg-mode-active #win-tools .tool-btn[data-svg-only] {
    display: flex !important;
}

body.illu-svg-mode-active #win-tools .tool-group[data-svg-only-group] {
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Menus injectés dans la menubar ──────────────────────────────────────── */
/* Les menus SVG sont cachés par défaut et affichés uniquement en mode SVG */
[data-svg-only-menu] {
    display: none;
}
body.illu-svg-mode-active [data-svg-only-menu] {
    display: list-item;
}
/* Menus bitmap masqués en mode SVG (si vous souhaitez les marquer) */
body.illu-svg-mode-active [data-pixel-only-menu] {
    display: none !important;
}

/* ── Panneau Objets SVG ───────────────────────────────────────────────────── */
#svg-objects-panel {
    position: fixed;
    top: 80px;
    right: 10px;
    width: 240px;
    min-height: 200px;
    max-height: 60vh;
    background: #f0f0f0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
    z-index: 1200;
    display: none;
    flex-direction: column;
    font-size: 12px;
    overflow: hidden;
}

.svg-panel-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px;
    background: linear-gradient(180deg, #0078d4 0%, #005fa3 100%);
    color: #fff;
    cursor: move;
    user-select: none;
    font-size: 12px;
    font-weight: 600;
}

.svg-panel-titlebar button {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    cursor: pointer;
    padding: 1px 5px;
    font-size: 11px;
    border-radius: 2px;
}
.svg-panel-titlebar button:hover {
    background: rgba(255,255,255,0.3);
}

.svg-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.svg-obj-item {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    cursor: pointer;
    gap: 4px;
    min-height: 22px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.svg-obj-item:hover { background: rgba(0,120,212,0.1); }
.svg-obj-item.selected { background: rgba(0,120,212,0.2); }
.svg-obj-item.hidden-obj { opacity: 0.45; }
.svg-obj-item.locked-obj { color: #888; }

.svg-obj-item[data-depth="1"] { padding-left: 18px; }
.svg-obj-item[data-depth="2"] { padding-left: 30px; }
.svg-obj-item[data-depth="3"] { padding-left: 42px; }

.svg-obj-icon { flex-shrink: 0; font-size: 11px; width: 14px; text-align: center; }
.svg-obj-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}
.svg-obj-actions {
    display: none;
    gap: 2px;
    flex-shrink: 0;
}
.svg-obj-item:hover .svg-obj-actions { display: flex; }
.svg-obj-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    opacity: 0.7;
}
.svg-obj-actions button:hover { opacity: 1; }

/* Badge de verrouillage */
.svg-obj-locked-badge {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 2px;
}

/* ── Barre d'alignement SVG ─────────────────────────────────────────────── */
#svg-align-bar {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: #e8e8e8;
    border-bottom: 1px solid #b0b0b0;
}
body.illu-svg-mode-active #svg-align-bar {
    display: flex;
}
.svg-align-btn {
    background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 12px;
    min-width: 24px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.svg-align-btn:hover {
    background: linear-gradient(180deg, #dce9fa 0%, #b8d0f5 100%);
}
.svg-align-btn:active {
    border-color: #808080 #fff #fff #808080;
    background: linear-gradient(180deg, #c8d8ef 0%, #dce9fa 100%);
}
.svg-align-sep {
    width: 1px;
    height: 18px;
    background: #a0a0a0;
    margin: 0 3px;
    box-shadow: 1px 0 0 #fff;
}

/* ── Overlay texte SVG inline ────────────────────────────────────────────── */
#svg-text-overlay {
    position: absolute;
    display: none;
    background: rgba(255,255,255,0.92);
    border: 1px dashed #0a84ff;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    z-index: 900;
    padding: 2px 4px;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgba(10,132,255,0.25);
}
#svg-text-overlay.editing {
    display: block;
}

/* ── Barre propriétés contextuelles Texte SVG ───────────────────────────── */
#opt-grp-svg-text {
    display: none;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
body.illu-svg-mode-active #opt-grp-svg-text.svg-text-active {
    display: flex;
}

/* ── Panneau dégradé vectoriel interactif ────────────────────────────────── */
.illu-vec-gradient-handle {
    cursor: crosshair;
    pointer-events: auto;
}
.illu-vec-gradient-stop {
    cursor: ew-resize;
    pointer-events: auto;
}

/* ── Barre booléens SVG ──────────────────────────────────────────────────── */
#svg-bool-bar {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
}
body.illu-svg-mode-active #svg-bool-bar {
    display: flex;
}

/* ── Poignée rotation indiquant l'outil actif ───────────────────────────── */
body.illu-svg-mode-active .svg-rotation-handle {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 0 6 6' fill='none' stroke='%230a84ff' stroke-width='1.5'/%3E%3Cpolygon points='12,0 14,4 10,4' fill='%230a84ff'/%3E%3C/svg%3E") 8 8, crosshair;
}

/* ── Panneau pipette vectorielle ─────────────────────────────────────────── */
#svg-eyedropper-indicator {
    display: none;
    position: fixed;
    width: 24px;
    height: 24px;
    border: 2px solid #0a84ff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

/* ── Guides (règles glissables) ──────────────────────────────────────────── */
.illu-svg-guide {
    position: absolute;
    pointer-events: none;
    z-index: 850;
}
.illu-svg-guide--h {
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,120,212,0.6);
    border-top: 1px dashed rgba(0,120,212,0.5);
    cursor: ns-resize;
    pointer-events: auto;
}
.illu-svg-guide--v {
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0,120,212,0.6);
    border-left: 1px dashed rgba(0,120,212,0.5);
    cursor: ew-resize;
    pointer-events: auto;
}

@media (min-width: 591px) {
  /* Custom tab hover effect - hides title at rest, shrinks thumbnail to show title on hover */
  .tab-bar-inner .tab span {
      display: none !important;
  }
  .tab-bar-inner .tab:hover span {
      display: block !important;
      padding-top: 0 !important;
      margin: 0 !important;
  }
  .tab-bar-inner .tab .tab-thumb {
      height: 52px !important;
      margin: 2px 0 2px 0 !important;
      transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .tab-bar-inner .tab:hover .tab-thumb {
      height: 34px !important;
      margin: 2px 0 2px 0 !important;
  }
}
/* ——— Onglet de projet : repère « séquence animée » ———
   Un clap discret devant le nom du document, posé par EditorManager._makeProjectTab
   quand `project.animation.enabled` est vrai. Il ne doit pas capter le clic : c'est
   l'onglet entier qui change de projet. */
.tab-bar-inner .tab .tab-anim-badge,
.tab-bar-outer .tab .tab-anim-badge {
    flex: 0 0 auto;
    font-size: 10px;
    opacity: 0.8;
    pointer-events: none;
}

.tab-bar-inner .tab.active .tab-anim-badge,
.tab-bar-outer .tab.active .tab-anim-badge {
    opacity: 1;
}

/* ---- Mode développement -------------------------------------------------
 *
 * Interrupteur global des Paramètres / de la fenêtre de bienvenue. Tout ce qui n'est
 * pas prêt pour tout le monde porte `.illu-dev-only` et n'apparaît que sous
 * `body.illu-dev-mode` (posée dès le script d'amorçage, avant le premier rendu).
 * `!important` est nécessaire : les thèmes forcent `display: flex !important` sur les
 * lignes de menu et sur les rangées de boutons de réglage.
 */
/* Les sélecteurs sont scopés par ID : sans cela, une règle de thème du type
   `body.illu-theme-macmodern .illu-scope-btn-row { display: flex !important }`
   (0,2,0) repasse devant et la rangée réapparaît. */
.illu-dev-only,
#settings-overlay .illu-dev-only,
#welcome-overlay .illu-dev-only,
#menu-win-icon-viewer {
    display: none !important;
}

body.illu-dev-mode .illu-dev-only,
body.illu-dev-mode #settings-overlay .illu-dev-only,
body.illu-dev-mode #welcome-overlay .illu-dev-only,
body.illu-dev-mode #menu-win-icon-viewer {
    display: flex !important;
}

/* Les rangées de réglage réservées au mode dev retrouvent leur disposition en colonne. */
body.illu-dev-mode #settings-overlay .settings-table-row.illu-dev-only,
body.illu-dev-mode #welcome-overlay .settings-table-row.illu-dev-only {
    display: flex !important;
    flex-direction: column !important;
}

/* La rangée macOS reprend la disposition en bloc des étiquettes de catégorie. */
body.illu-dev-mode .illu-theme-cat-label.illu-dev-only,
body.illu-dev-mode #settings-overlay .illu-theme-cat-label.illu-dev-only,
body.illu-dev-mode #welcome-overlay .illu-theme-cat-label.illu-dev-only {
    display: block !important;
}

/* Bascule « Activer mode développement », sous la liste des raccourcis clavier. */
#settings-overlay .settings-dev-mode-row,
#welcome-overlay .settings-dev-mode-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted var(--mp-dock-border, #b8b8b8);
}

#settings-overlay .settings-dev-mode-main,
#welcome-overlay .settings-dev-mode-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#settings-overlay .settings-dev-mode-title,
#welcome-overlay .settings-dev-mode-title {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

#settings-overlay .settings-dev-mode-hint,
#welcome-overlay .settings-dev-mode-hint {
    font-size: 9px;
    line-height: 1.35;
    opacity: 0.75;
}

/* ---- Curseur imposé sur la pile de la toile ------------------------------
 *
 * Les modes « pioche » (pipette d'une fenêtre d'effet, choix de couleur SVG) et le
 * panoramique posaient `document.body.style.cursor`. Au-dessus de la toile ça ne se
 * voyait pas : #main-canvas-container porte son propre curseur en style en ligne, qui
 * l'emporte sur l'héritage. L'attribut est posé sur <html> par illuSetForcedCursor().
 */
html[data-illu-forced-cursor] #main-canvas-container,
html[data-illu-forced-cursor] #main-canvas-container *,
html[data-illu-forced-cursor] #workspace,
html[data-illu-forced-cursor] #workspace-wrapper {
    cursor: inherit !important;
}

/* Les enfants de la toile suivent le curseur de l'outil même s'ils interceptent le
   pointeur (calque SVG, pile de calques pixel) — sauf style en ligne explicite. */
#main-canvas-container > svg,
#main-canvas-container > canvas,
#main-canvas-container > .pixel-layer-stack,
#main-canvas-container #svg-layers {
    cursor: inherit;
}

/* ---- Hauteur des barres sur écran court ---------------------------------
 *
 * La largeur était déjà gérée (les barres défilent horizontalement), mais pas la
 * hauteur : l'en-tête et les options d'outil occupaient 142 px fixes, si bien que sur
 * une fenêtre basse il ne restait presque rien à la zone de travail et la toile
 * débordait de son cadre. Ces trois mesures pilotent les hauteurs concernées et
 * décroissent par paliers ; les barres rendent ainsi de la place à la toile.
 *
 *   --illu-submenubar-h   : rangée d'outils sous la barre de menus  (main.css)
 *   --illu-ribbon-group-h : groupes du ruban d'options   (illu-tool-ribbon.css)
 *   --illu-optbar-row-h   : rangées d'options héritées   (style.css)
 */
:root {
    --illu-submenubar-h: 32px;
    --illu-ribbon-group-h: 84px;
    --illu-optbar-row-h: 30px;
}

@media (max-height: 720px) {
    :root {
        --illu-ribbon-group-h: 72px;
        --illu-optbar-row-h: 28px;
    }
}

@media (max-height: 600px) {
    :root {
        --illu-submenubar-h: 28px;
        --illu-ribbon-group-h: 60px;
        --illu-optbar-row-h: 25px;
    }
}

@media (max-height: 500px) {
    :root {
        --illu-submenubar-h: 24px;
        --illu-ribbon-group-h: 50px;
        --illu-optbar-row-h: 22px;
    }
}

@media (max-height: 420px) {
    :root {
        --illu-submenubar-h: 22px;
        --illu-ribbon-group-h: 42px;
        --illu-optbar-row-h: 20px;
    }
}

/* Filet de sécurité : sur une fenêtre vraiment basse, les options d'outil ne prennent
   pas plus du quart de la hauteur ; au-delà elles défilent verticalement plutôt que de
   repousser la toile hors de l'écran. Réservé à ces hauteurs-là, car le défilement
   rogne les fenêtres volantes du ruban. */
@media (max-height: 520px) {
    #tool-options-container,
    .tool-options-container {
        max-height: 26dvh;
        overflow-y: auto;
    }
}

/* La zone de travail doit toujours pouvoir se réduire : sans min-height:0 un enfant
   flex refuse de passer sous sa taille de contenu et pousse la barre d'état dehors. */
#workspace,
#workspace-wrapper,
#editor-dock-row {
    min-height: 0;
}

/* Rangée d'outils sous les menus : ses boutons imposent leur hauteur (line-height posé
   en !important par le thème), le min-height du conteneur ne suffit donc pas à la
   comprimer. On réduit les boutons eux-mêmes sur les fenêtres basses. */
@media (max-height: 600px) {
    .illu-menubar-toolbar {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .illu-menubar-toolbar .illu-menubar-icon-btn {
        line-height: 22px !important;
        min-height: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
    }
}

@media (max-height: 500px) {
    .illu-menubar-toolbar .illu-menubar-icon-btn {
        line-height: 20px !important;
        min-height: 20px !important;
        height: 20px !important;
        padding: 0 5px !important;
    }
}

@media (max-height: 420px) {
    .illu-menubar-toolbar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .illu-menubar-toolbar .illu-menubar-icon-btn {
        line-height: 18px !important;
        min-height: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
    }
}

/* ---- Bouton « Signaler un bug » de la barre de menus ---------------------
 *
 * Ces déclarations vivaient dans l'attribut style du <div>, dont le
 * `background … !important` était intouchable : sur les thèmes macOS le dégradé
 * partait d'une teinte claire et le texte, blanc en dur, devenait illisible.
 * Ici les thèmes peuvent reprendre la main.
 */
.menubar-contact-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, var(--mp-title, #1e4a8c) 0%, var(--mp-accent, #0d7a7a) 100%);
    border: 2px solid;
    border-color: var(--mp-raised-top) var(--mp-raised-bot) var(--mp-raised-bot) var(--mp-raised-top);
    border-radius: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.menubar-contact-btn .menu-icon {
    width: 12px;
    text-align: center;
    color: inherit;
}

.menubar-contact-btn .menu-icon i {
    font-size: 11px;
    color: inherit;
}

.menubar-contact-btn > span[data-i18n] {
    font-weight: 600;
    color: inherit;
}

/* ── Fenêtres de dialogue déplaçables (js/app/illu-dialog-drag.js) ───────────
   La barre de titre d'une boîte de dialogue devient une poignée, comme celle
   des palettes flottantes. Double-clic dessus : retour au centrage d'origine. */
.window:not(.floating-window) > .title-bar {
    cursor: move;
}
.window:not(.floating-window) > .title-bar button,
.window:not(.floating-window) > .title-bar input,
.window:not(.floating-window) > .title-bar select {
    cursor: default;
}
.window.illu-dialog-free {
    /* Une fois déplacée, la fenêtre ne dépend plus du centrage de sa surcouche. */
    z-index: 1;
}
.window.illu-dialog-free.dragging {
    user-select: none;
}