/* Module page-editor-simple : CSS extrait d'argon-app.css (scripts/extract_module_css.py). Feuille du module : editer ici, avec les variables de static/css/app/tokens.css. */
/* Page Editor V2 simplifie */
.pes2-naming-toolbar { display: flex; align-items: start; gap: 8px; margin-bottom: 8px; }
.pes2-naming-options { font-size: 11px; margin-left: auto; }
.pes2-naming-options summary { cursor: pointer; padding: 6px; color: var(--mv-text); }
.pes2-naming-status { font-size: 11px; line-height: 1.5; color: var(--mv-text); overflow-wrap: anywhere; }
#pes2-saveNames[hidden] { display: none !important; }
.pes2-formula-assistant { border: 1px solid #e3e7ef; border-radius: 8px; margin-top: 8px; font-size: 12px; }
.pes2-formula-assistant > summary { padding: 8px 10px; cursor: pointer; color: #454bdd; font-weight: 500; }
.pes2-formula-body { padding: 2px 10px 10px; display: grid; gap: 8px; }
.pes2-formula-body [hidden] { display: none !important; }
.pes2-formula-body p { font-size: 11px; line-height: 1.5; margin: 0; }
.pes2-formula-body code { display: block; overflow-wrap: anywhere; white-space: pre-wrap; padding: 8px 0; }
.pes2-formula-preview { white-space: pre-wrap; overflow-wrap: anywhere; background: #f3f5fc; border-radius: 6px; padding: 8px; color: var(--mv-text-heading); }
.pes2-variable-picker { position: relative; }
.pes2-variable-trigger {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 34px; padding: 7px 9px; text-align: left;
    background: #fff; border: 1px solid #dfe3e9; border-radius: 6px;
    color: var(--mv-text-heading); font: inherit; font-size: 0.72rem;
}
.pes2-variable-trigger > span:first-of-type { flex: 1; min-width: 0; }
.pes2-variable-current-group { display: block; font-size: 0.62rem; color: #687891; margin-bottom: 2px; }
.pes2-variable-picker svg {
    width: 16px; height: 16px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.pes2-variable-trigger[aria-expanded="true"] { border-color: #5383f5; background: #f7f9ff; }
.pes2-variable-popover {
    position: relative; margin-top: 6px; padding: 8px;
    border: 1px solid #dce3ef; border-radius: 8px; background: #fff;
    box-shadow: 0 4px 14px rgba(33, 43, 54, 0.07);
}
.pes2-variable-popover[hidden] { display: none; }
.pes2-variable-search { font-size: 0.72rem; }
.pes2-variable-results { max-height: 310px; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; }
.pes2-variable-group {
    display: flex; align-items: center; gap: 7px; padding: 10px 5px 5px;
    color: #52678c; font-size: 0.68rem; font-weight: 600;
}
.pes2-variable-option {
    display: block; width: 100%; border: 0; border-radius: 5px;
    padding: 7px 8px; text-align: left; background: #fff; color: var(--mv-text-heading);
}
.pes2-variable-option strong { display: block; font-size: 0.72rem; font-weight: 600; }
.pes2-variable-option small { display: block; margin-top: 2px; font-size: 0.65rem; line-height: 1.45; color: #687891; }
.pes2-variable-option:hover, .pes2-variable-option[aria-pressed="true"] { background: #edf3ff; }
.pes2-variable-option:focus-visible, .pes2-variable-trigger:focus-visible { outline: 2px solid #5383f5; outline-offset: 1px; }
.pes2-variable-empty { padding: 10px; font-size: 0.72rem; color: #687891; }
.pes2-variable-help { display: block; margin-top: 7px; line-height: 1.5; overflow-wrap: anywhere; }
.pes2-variable-fallback { display: block; margin-top: 5px; padding: 5px 7px; border-left: 2px solid #b9cbed; background: #f7f9fc; }
.pes2-variable-help details { margin-top: 5px; }
.pes2-variable-help code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }

.pes2-editor {
    --pes2-left-width: 232px;
    --pes2-right-width: 278px;
    height: calc(100vh - 8.5rem);
    min-height: 620px;
    margin-bottom: 1.25rem;
    border: 1px solid #e5e9f0;
    border-radius: 0.75rem;
    background: #f4f6f9;
    box-shadow: 0 3px 12px rgba(33, 43, 54, 0.04);
    overflow: hidden;
}

.pes2-topbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 54px;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid #e7eaf0;
    background: #fff;
}

.pes2-title-area {
    min-width: 180px;
    max-width: 300px;
}

.pes2-page-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: min(280px, 28vw);
    padding-left: 0.65rem;
    border-left: 1px solid #e7eaf0;
}

.pes2-page-switcher .form-select {
    min-width: 0;
    min-height: 29px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-color: #dfe3e9;
    border-radius: 0.42rem;
    color: #4f5d73;
    font-size: 0.65rem;
}

.pes2-title-display,
.pes2-title-form,
.pes2-top-actions,
.pes2-language-list,
.pes2-button-row,
.pes2-selection-heading,
.pes2-action-cluster {
    display: flex;
    align-items: center;
}

.pes2-title-display,
.pes2-title-form,
.pes2-top-actions,
.pes2-language-list,
.pes2-button-row,
.pes2-selection-heading {
    gap: 0.4rem;
}

.pes2-title-copy {
    min-width: 0;
}

.pes2-page-context {
    display: block;
    margin-bottom: 0.05rem;
    color: #98a2b3;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.pes2-page-title {
    max-width: 245px;
    margin: 0;
    overflow: hidden;
    color: var(--mv-text-heading);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pes2-title-form .form-control {
    width: 210px;
    min-height: 29px;
    font-size: 0.72rem;
}

.pes2-language-list {
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-left: 0.65rem;
    border-left: 1px solid #e7eaf0;
}

.pes2-language-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    min-height: 26px;
    padding: 0.15rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: #f5f7fa;
    color: var(--mv-text);
    font-size: 0.61rem;
    font-weight: 700;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pes2-language-link:hover {
    border-color: #d7dcf7;
    background: #f0f2ff;
    color: var(--mv-primary);
}

.pes2-language-link.is-active {
    border-color: var(--mv-primary);
    background: var(--mv-primary);
    color: #fff;
}

.pes2-top-actions {
    justify-content: flex-end;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.pes2-top-actions .v2-save-indicator {
    position: relative;
    min-width: 0;
    padding-left: 0.65rem;
    font-size: 0.62rem;
    white-space: nowrap;
}

.pes2-top-actions .v2-save-indicator:not(:empty)::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #82d616;
    content: "";
    transform: translateY(-50%);
}

.pes2-top-actions .v2-save-indicator.text-warning::before {
    background: #fb8c00;
}

.pes2-top-actions .v2-save-indicator.text-info::before {
    background: var(--mv-info);
}

.pes2-top-actions .v2-save-indicator.text-success::before {
    background: var(--mv-success);
}

.pes2-top-actions .v2-save-indicator.text-danger::before {
    background: var(--mv-danger);
}

.pes2-action-cluster {
    gap: 0.15rem;
    padding: 0.12rem;
    border: 1px solid #e7eaf0;
    border-radius: 0.45rem;
    background: #f8f9fb;
}

.pes2-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid #e2e6ec;
    border-radius: 0.42rem;
    background: #fff;
    color: var(--mv-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pes2-action-cluster .pes2-icon-button {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    border-color: transparent;
    background: transparent;
}

.pes2-icon-button:hover,
.pes2-icon-button:focus-visible {
    border-color: #cbd3f6;
    background: #f2f4ff;
    color: var(--mv-primary);
    outline: 0;
}

.pes2-icon-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.pes2-icon-button svg,
.pes2-save-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.pes2-save-button {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 29px;
    padding-right: 0.72rem !important;
    padding-left: 0.62rem !important;
    font-size: 0.64rem !important;
    text-transform: none;
}

.pes2-secondary-link {
    padding: 0.25rem 0.1rem;
    color: var(--mv-text);
    font-size: 0.64rem;
    font-weight: 600;
    white-space: nowrap;
}

.pes2-secondary-link:hover {
    color: var(--mv-primary);
}

.pes2-workspace {
    display: grid;
    grid-template-columns: var(--pes2-left-width) 8px minmax(360px, 1fr) 8px var(--pes2-right-width);
    height: calc(100% - 54px);
    min-height: 0;
}

.pes2-panel-resizer {
    position: relative;
    z-index: 5;
    width: 8px;
    min-width: 8px;
    background: #f8f9fb;
    cursor: col-resize;
    touch-action: none;
}

.pes2-panel-resizer::after {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 2px;
    height: 34px;
    border-radius: 2px;
    background: #cbd2dc;
    content: "";
    transform: translateY(-50%);
    transition: height 0.15s ease, background-color 0.15s ease;
}

.pes2-panel-resizer:hover::after,
.pes2-panel-resizer:focus-visible::after,
.pes2-panel-resizer.is-dragging::after {
    height: 54px;
    background: var(--mv-primary);
}

.pes2-panel-resizer:focus-visible {
    outline: 0;
}

.pes2-left-panel,
.pes2-right-panel {
    min-width: 0;
    min-height: 0;
    padding: 0.7rem;
    background: #fff;
    overflow-y: auto;
    scrollbar-color: #d5dae3 transparent;
    scrollbar-width: thin;
}

.pes2-left-panel {
    border-right: 0;
}

.pes2-right-panel {
    border-left: 0;
}

.pes2-panel-tabs,
.pes2-inspector-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.18rem;
    margin-bottom: 0.75rem;
    padding: 0.18rem;
    border-radius: 0.48rem;
    background: #f2f4f7;
}

.pes2-inspector-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pes2-panel-tab,
.pes2-inspector-tab {
    min-height: 29px;
    padding: 0.28rem 0.32rem;
    border: 0;
    border-radius: 0.36rem;
    background: transparent;
    color: #7b8498;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
}

.pes2-panel-tab:hover,
.pes2-inspector-tab:hover {
    color: var(--mv-text-heading);
}

.pes2-panel-tab.is-active,
.pes2-inspector-tab.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 45, 70, 0.1);
    color: var(--mv-text-heading);
}

.pes2-panel-title {
    margin: 0.8rem 0 0.42rem;
    color: var(--mv-text-heading);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.pes2-left-pane > .pes2-panel-title:first-child {
    margin-top: 0;
}

.pes2-block-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.pes2-block-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    min-height: 43px;
    padding: 0.38rem 0.45rem;
    border: 1px solid #e4e8ee;
    border-radius: 0.48rem;
    background: #fff;
    color: #4f5d73;
    font-family: inherit;
    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: grab;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.pes2-block-card:hover,
.pes2-block-card:focus-visible {
    border-color: #bbc4f2;
    background: #f8f9ff;
    box-shadow: 0 2px 5px rgba(0, 85, 255, 0.08);
    color: #4659c6;
    outline: 0;
}

.pes2-block-card:active {
    cursor: grabbing;
}

.pes2-block-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #7a86a1;
}

.pes2-block-icon svg {
    width: 16px;
    height: 16px;
}

.pes2-ready-sections {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid #edf0f4;
    color: var(--mv-text-heading);
    font-size: 0.67rem;
    font-weight: 700;
}

.pes2-ready-sections summary {
    cursor: pointer;
    list-style-position: inside;
}

.pes2-ready-sections summary span {
    float: right;
    color: #98a2b3;
    font-size: 0.56rem;
    font-weight: 600;
}

.pes2-help {
    margin-bottom: 0.7rem;
    padding: 0 0.1rem;
    color: #7b879c;
    font-size: 0.65rem;
    line-height: 1.45;
}

.pes2-add-help {
    margin: -0.1rem 0 0.45rem;
}

.pes2-add-help + .pes2-panel-title {
    margin-top: 0;
}

.pes2-structure-tree {
    min-height: 260px;
}

/* Onglet Structure : seul l'arbre defile, pas le panneau + l'arbre. */
@media (min-width: 992px) {
    .pes2-left-panel:has(> #pes2-structurePane:not(.d-none)) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .pes2-left-panel > #pes2-structurePane:not(.d-none) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    #page-editor-v2 #pes2-structurePane .pes2-structure-tree {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
}

.pes2-structure-tree .pe2-tree-kind-badge,
.pes2-structure-tree .pe2-tree-label-meta,
.pes2-structure-tree .pe2-tree-actions {
    display: none;
}

#page-editor-v2.pes2-editor .pes2-structure-tree .v2-tree-row {
    min-height: 32px;
    margin-bottom: 2px;
    border-radius: 0.4rem;
    font-size: 0.67rem;
}

.pes2-canvas-panel {
    min-width: 0;
    min-height: 0;
    padding: 0.75rem;
    background: #f1f3f6;
    overflow: auto;
}

#v2-canvasContainer.pes2-canvas-container,
.pes2-iframe-wrapper {
    width: 100%;
    height: 100%;
    min-height: 0;
}

#v2-canvasContainer.pes2-canvas-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-height: none;
    padding: 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: auto;
}

#v2-iframeWrapper.pes2-iframe-wrapper {
    display: block;
    width: 350px;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    border: 1px solid #dfe3e9;
    border-radius: 0.6rem;
    background: #fff;
    box-shadow: 0 5px 16px rgba(31, 45, 70, 0.08);
    overflow: hidden;
}

#v2-pagePreview.pes2-page-preview {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    aspect-ratio: 9 / 19.5;
    border: 0;
    background: #fff;
    box-shadow: none;
}

.pes2-empty-selection {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.25rem;
    padding: 1.15rem 0.85rem;
    border: 1px dashed #d3d9e2;
    border-radius: 0.55rem;
    background: #fafbfc;
    color: #7b879c;
    font-size: 0.67rem;
    line-height: 1.45;
    text-align: center;
}

.pes2-empty-selection svg {
    width: 24px;
    height: 24px;
    margin-bottom: 0.15rem;
    fill: #a7b0bf;
}

.pes2-empty-selection strong {
    color: #596780;
    font-size: 0.72rem;
}

.pes2-selection-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
    padding: 0 0.1rem;
}

.pes2-selection-heading-row,
.pes2-shared-style-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.pes2-selection-heading-row > div {
    min-width: 0;
}

.pes2-selection-heading-row strong,
.pes2-selection-heading-row .pes2-eyebrow {
    display: block;
}

.pes2-delete-button {
    border-color: #f0d8da;
    color: #c95b65;
}

.pes2-delete-button:hover,
.pes2-delete-button:focus-visible {
    border-color: #e9bfc3;
    background: #fff4f5;
    color: #b13f4a;
}

.pes2-selection-heading strong {
    color: var(--mv-text-heading);
    font-size: 0.79rem;
}

.pes2-eyebrow {
    color: #98a2b3;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.pes2-advanced-badge {
    padding: 0.16rem 0.36rem;
    border-radius: 999px;
    background: #fff3cd;
    color: #855d00;
    font-size: 0.56rem;
    font-weight: 700;
}

.pes2-control-group {
    margin-bottom: 0.68rem;
}

.pes2-control-group > label {
    display: block;
    margin-bottom: 0.24rem;
    color: #596780;
    font-size: 0.63rem;
    font-weight: 700;
}

.pes2-control-group .form-control,
.pes2-control-group .form-select {
    min-height: 32px;
    padding-top: 0.33rem;
    padding-bottom: 0.33rem;
    border-color: #dfe3e9;
    border-radius: 0.42rem;
    color: #4f5d73;
    font-size: 0.69rem;
}

.pes2-control-group textarea.form-control {
    min-height: 92px;
    line-height: 1.45;
    resize: vertical;
}

.pes2-control-group .form-control:focus,
.pes2-control-group .form-select:focus {
    border-color: #aeb9f1;
    box-shadow: 0 0 0 2px rgba(0, 85, 255, 0.1);
}

.pes2-control-group .form-control-color {
    width: 100%;
    height: 34px;
    padding: 0.2rem;
}

.pes2-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 112px;
    min-height: 112px;
    max-height: 112px;
    overflow: hidden;
    margin-bottom: 0.45rem;
    border: 1px solid #dfe3e9;
    border-radius: 0.48rem;
    background-color: #f7f8fa;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: #98a2b3;
    font-size: 0.62rem;
}

/* Simple editor: native backgrounds, image framing and compact source picker. */
.pes2-image-source { display: grid; grid-template-columns: minmax(80px, 1.15fr) minmax(0, 1fr); gap: .65rem; align-items: center; }
.pes2-image-preview img { display: block; width: 100%; height: 100%; max-height: 112px; object-fit: contain; }
.pes2-image-source-actions { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; min-width: 0; }
.pes2-image-name { font-size: .66rem; color: #475467; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pes2-image-variant-row { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; }
.pes2-image-variant-row > label { margin: 0; }
.pes2-image-variant-row > .form-select { flex: 1; min-width: 0; width: auto; }
#pes2-imageControls.is-empty-background { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
#pes2-imageControls.is-empty-background > label { margin: 0; }
#pes2-imageControls.is-empty-background .pes2-image-source,
#pes2-imageControls.is-empty-background .pes2-image-source-actions { display: contents; }
#pes2-imageControls.is-empty-background #pes2-imagePreview,
#pes2-imageControls.is-empty-background #pes2-imageName,
#pes2-imageControls.is-empty-background #pes2-removeImage,
#pes2-imageControls.is-empty-background #pes2-adjustImage { display: none; }
#pes2-imageControls.is-empty-background #pes2-chooseImage { grid-column: 2; grid-row: 1; width: auto; min-width: 64px; margin: 0; }
.pes2-media-settings { border-top: 1px solid #eaecf0; padding-top: .75rem; margin-top: .75rem; min-width: 0; }
.pes2-media-settings .form-select { margin-bottom: .45rem; }
.pes2-media-colors { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; }
.pes2-media-colors > .form-control-color { flex: 0 0 38px; width: 38px; }
.pes2-media-colors > .form-control { min-width: 0; }
.pes2-media-colors label { display: flex; align-items: center; gap: .5rem; flex: 1; margin: 0; }
.pes2-media-colors label input { width: 38px; padding: .2rem; }
.pes2-gradient-presets { display: flex; gap: .35rem; margin-bottom: .5rem; }
.pes2-gradient-presets button { flex: 1; height: 24px; border: 1px solid #e4e7ec; border-radius: .3rem; }
.pes2-gradient-ocean { background: linear-gradient(to right, var(--mv-primary), #06b6d4); }
.pes2-gradient-sunset { background: linear-gradient(to right, #f97316, #db2777); }
.pes2-gradient-forest { background: linear-gradient(to right, #14532d, #86efac); }
.pes2-gradient-soft { background: linear-gradient(to right, #ede9fe, var(--mv-primary-200)); }
.pes2-media-color-opacity { display: grid; grid-template-columns: 28px minmax(72px, 1fr) minmax(92px, 1.15fr); align-items: end; gap: .4rem; margin: .4rem 0; }
.pes2-media-color-opacity > .form-control-color { width: 28px; padding: .2rem; }
.pes2-media-color-opacity > .form-control { min-width: 0; }
.pes2-media-color-opacity .pes2-range-control { margin: 0; min-width: 0; }
.pes2-media-color-opacity .pes2-range-control label { font-size: .65rem; white-space: nowrap; }
.pes2-stop-editor-bar { position: relative; height: 38px; margin: 1rem .65rem .55rem; cursor: crosshair; touch-action: none; }
.pes2-stop-editor-track { position: absolute; inset: 6px 0; border: 1px solid #bdc5d4; border-radius: .3rem; background-color: #fff; background-size: cover, 12px 12px; }
.pes2-stop-editor-handles { position: absolute; inset: 0; pointer-events: none; }
.pes2-stop-handle { position: absolute; top: 0; width: 15px; height: 38px; transform: translateX(-50%); border: 2px solid #fff; border-radius: .3rem; box-shadow: 0 0 0 1px #667085; cursor: grab; pointer-events: auto; touch-action: none; }
.pes2-stop-handle.is-active { box-shadow: 0 0 0 2px #315bda; z-index: 1; }
.pes2-stop-editor-fields { display: grid; grid-template-columns: minmax(65px, 1fr) 74px 74px 27px; align-items: end; gap: .35rem; }
.pes2-stop-editor-fields label { display: grid; gap: .2rem; margin: 0; font-size: .62rem; min-width: 0; }
.pes2-stop-editor-fields input { width: 100%; min-width: 0; height: 28px; border: 1px solid #d0d5dd; border-radius: .3rem; padding: .15rem .25rem; }
.pes2-stop-editor-fields input[type="color"] { padding: .1rem; }
.pes2-stop-delete { width: 27px; height: 28px; border: 1px solid #d0d5dd; border-radius: .3rem; background: #fff; }
.pes2-stop-delete:disabled { opacity: .35; }
.pes2-stop-editor-help { display: flex; align-items: center; justify-content: space-between; gap: .35rem; margin: .2rem 0 .35rem; }
.pes2-stop-editor-help small { line-height: 1.2; }
.pes2-stop-add { border: 0; background: transparent; color: #315bda; font-size: .65rem; white-space: nowrap; padding: .1rem; }
.pes2-shape-settings > label { display: block; font-weight: 600; font-size: .7rem; margin-bottom: .35rem; }
.pes2-shape-row { display: grid; grid-template-columns: minmax(65px, 1fr) minmax(75px, 1.2fr) 36px; gap: .4rem; align-items: end; }
.pes2-shape-row label { display: grid; gap: .2rem; margin: 0; font-size: .65rem; min-width: 0; }
.pes2-shape-row input, .pes2-shape-row select { height: 30px; width: 100%; min-width: 0; padding: .2rem .3rem; }
.pes2-shape-row input[type="color"] { padding: .1rem; }
.pes2-shape-sides { display: grid; gap: .3rem; }
.pes2-shape-sides > div { display: grid; grid-template-columns: 45px minmax(40px, 1fr) minmax(65px, 1fr) 28px; gap: .3rem; align-items: center; }
.pes2-shape-sides > div span { font-size: .63rem; }
.pes2-shape-sides input, .pes2-shape-sides select { width: 100%; min-width: 0; height: 28px; border: 1px solid #d0d5dd; border-radius: .3rem; }
.pes2-shape-sides input[type="color"] { padding: .1rem; }
.pes2-direction-grid, .pes2-position-grid { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; width: max-content; margin: .45rem 0; }
.pes2-direction-grid button, .pes2-position-grid button { height: 26px; padding: 0; border: 1px solid #d0d5dd; border-radius: .25rem; background: #fff; color: #667085; }
.pes2-position-grid button::after { content: ''; display: block; width: 5px; height: 5px; margin: auto; background: #98a2b3; border-radius: 50%; }
.pes2-direction-grid button.is-active, .pes2-position-grid button.is-active, .pes2-image-fit-options button.is-active { color: #1946c6; background: #eff4ff; border-color: #809dff; }
.pes2-position-grid button.is-active::after { background: #1946c6; }
.pes2-media-details { font-size: .67rem; color: #667085; margin: .5rem 0; }
.pes2-media-details summary { cursor: pointer; margin-bottom: .4rem; }
.pes2-media-checkbox { display: flex; gap: .45rem; align-items: center; font-weight: 400; }
.pes2-range-control { margin: .55rem 0; }
.pes2-range-control > label { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.pes2-range-control output { margin-left: auto; font-size: .65rem; color: #667085; }
.pes2-range-control > input[type="range"] { display: block; width: 100%; accent-color: #315bda; height: 18px; }
.pes2-image-fit-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.pes2-image-fit-options button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 66px; padding: .35rem .2rem; border: 1px solid #e4e7ec; border-radius: .4rem; background: #fff; color: #667085; font-size: .62rem; line-height: 1.25; }
.pes2-fit-symbol { position: relative; display: block; width: 30px; height: 21px; border: 1px solid currentColor; overflow: hidden; }
.pes2-fit-symbol::after { content: ''; display: block; position: absolute; background: currentColor; opacity: .3; }
.pes2-fit-symbol.is-crop::after { inset: -6px 3px; }
.pes2-fit-symbol.is-fit::after { inset: 4px 3px; }
.pes2-fit-symbol.is-fill::after { inset: 0; }
.pes2-image-position-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pes2-media-settings small { display: block; line-height: 1.5; font-size: .62rem; }

.pes2-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 0.3rem;
    max-height: 196px;
    margin-top: 0.35rem;
    overflow-y: auto;
}

.pes2-icon-grid button {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0.3rem;
    border: 1px solid #dfe3e9;
    border-radius: 0.42rem;
    background: #fff;
}

.pes2-icon-grid button:hover,
.pes2-icon-grid button:focus-visible {
    border-color: #aeb9f1;
    background: #f0f2ff;
}

.pes2-icon-grid button:disabled {
    opacity: 0.5;
    cursor: progress;
}

.pes2-icon-grid img {
    width: 18px;
    height: 18px;
}

.pes2-shared-style {
    margin-bottom: 0.75rem;
    padding: 0.55rem;
    border: 1px solid #dfe4f5;
    border-radius: 0.5rem;
    background: #f8f9ff;
}

.pes2-shared-style label,
.pes2-shared-style-heading label {
    margin: 0 0 0.25rem;
    color: #4f5d73;
    font-size: 0.63rem;
    font-weight: 700;
}

.pes2-shared-style .form-select {
    min-height: 31px;
    border-color: #d8def2;
    font-size: 0.66rem;
}

/* Compact appearance controls, including fields outside control-group wrappers. */
.pes2-inspector-pane :is(.pes2-media-settings, .pes2-shared-style) :is(input[type="text"], input[type="number"], input[type="color"], select) {
    height: 28px;
    min-height: 28px;
    min-width: 0;
    padding: .25rem .45rem;
    border: 1px solid #e0e5ed;
    border-radius: 5px;
    background-color: #fff;
    color: #4f5d73;
    font-family: inherit;
    font-size: .67rem;
    font-weight: 400;
    line-height: 1.25;
    box-shadow: none;
}
.pes2-inspector-pane :is(.pes2-media-settings, .pes2-shared-style) select {
    appearance: none;
    padding-right: 1.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='m2 3.5 3 3 3-3' fill='none' stroke='%238993a4' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    background-size: 10px;
}
.pes2-inspector-pane .pes2-shape-settings select { margin-bottom: 0; }
.pes2-inspector-pane :is(.pes2-media-settings, .pes2-shared-style) :is(input, select):focus-visible {
    outline: none;
    border-color: #aeb9f1;
    box-shadow: 0 0 0 2px rgba(0, 85, 255, .1);
}
.pes2-inspector-pane .pes2-media-settings input[type="color"] { padding: 3px; cursor: pointer; }
.pes2-inspector-pane .pes2-media-settings input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pes2-inspector-pane .pes2-media-settings input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.pes2-inspector-pane .pes2-media-settings input[type="color"]::-moz-color-swatch { border: 0; border-radius: 3px; }
.pes2-inspector-pane .pes2-range-control > input[type="range"] { appearance: none; background: transparent; cursor: pointer; }
.pes2-inspector-pane .pes2-range-control > input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #e1e7f0; }
.pes2-inspector-pane .pes2-range-control > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border: 0; border-radius: 50%; background: #4f67d8; }
.pes2-inspector-pane .pes2-range-control > input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: #e1e7f0; }
.pes2-inspector-pane .pes2-range-control > input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #4f67d8; }
@media (pointer: coarse) {
    .pes2-inspector-pane :is(.pes2-media-settings, .pes2-shared-style) :is(input[type="text"], input[type="number"], input[type="color"], select) { height: 32px; min-height: 32px; }
}

.pes2-shared-style small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.57rem;
    line-height: 1.4;
}

.pes2-shared-apply {
    width: 100%;
    min-height: 30px;
    margin-top: 0.45rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--mv-primary);
    border-radius: 0.42rem;
    background: var(--mv-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

.pes2-typography-toolbar {
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #edf0f4;
}

.pes2-typography-primary {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(86px, 0.9fr) 54px;
    gap: 0.4rem;
}

.pes2-number-stepper {
    display: grid;
    grid-template-columns: 25px minmax(38px, 1fr) 25px;
}

.pes2-number-stepper button,
.pes2-format-buttons button {
    border: 1px solid #dfe3e9;
    background: #fff;
    color: #596780;
    font-size: 0.65rem;
}

.pes2-number-stepper button:first-child {
    border-radius: 0.4rem 0 0 0.4rem;
}

.pes2-number-stepper button:last-child {
    border-radius: 0 0.4rem 0.4rem 0;
}

.pes2-number-stepper .form-control {
    min-height: 31px;
    padding-right: 0.15rem;
    padding-left: 0.15rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    text-align: center;
}

.pes2-format-buttons {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    margin-bottom: 0.55rem;
}

.pes2-format-buttons button {
    width: 27px;
    height: 27px;
    padding: 0;
    border-radius: 0.35rem;
}

.pes2-format-buttons button:hover,
.pes2-format-buttons button.is-active {
    border-color: #aeb9f1;
    background: #eef1ff;
    color: #4e61ce;
}

.pes2-format-separator {
    width: 1px;
    height: 20px;
    margin: 0 0.15rem;
    background: #dfe3e9;
}

.pes2-typography-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pes2-box-model {
    position: relative;
    display: grid;
    grid-template-columns: 35px 1fr 35px;
    grid-template-rows: 24px 1fr 24px;
    min-height: 190px;
    margin: 0.65rem 0;
    padding: 0.35rem;
    border: 1px solid #f3bc83;
    border-radius: 0.5rem;
    background: #fff5e9;
}

.pes2-box-model-title {
    position: absolute;
    top: 5px;
    left: 7px;
    color: #a85c13;
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pes2-box-model input,
.pes2-padding-model input {
    width: 31px;
    height: 22px;
    padding: 0.05rem;
    border: 1px solid rgba(119, 95, 65, 0.25);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.9);
    color: #596780;
    font-size: 0.56rem;
    text-align: center;
}

#pes2-mt { grid-column: 2; grid-row: 1; justify-self: center; }
#pes2-mr { grid-column: 3; grid-row: 2; align-self: center; justify-self: center; }
#pes2-mb { grid-column: 2; grid-row: 3; justify-self: center; }
#pes2-ml { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }

.pes2-padding-model {
    position: relative;
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 32px 1fr 32px;
    grid-template-rows: 25px 1fr 25px;
    min-height: 120px;
    padding: 0.25rem;
    border: 1px solid #9dcc9d;
    border-radius: 0.4rem;
    background: #edf8ed;
}

.pes2-padding-model > span {
    position: absolute;
    top: 3px;
    left: 5px;
    color: #438043;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

#pes2-pt { grid-column: 2; grid-row: 1; justify-self: center; }
#pes2-pr { grid-column: 3; grid-row: 2; align-self: center; justify-self: center; }
#pes2-pb { grid-column: 2; grid-row: 3; justify-self: center; }
#pes2-pl { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }

.pes2-box-center {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 2;
    min-height: 48px;
    border: 1px solid #d9dee7;
    border-radius: 0.3rem;
    background: #fff;
    color: #7b879c;
    font-size: 0.55rem;
}

.pes2-box-all-row {
    display: grid;
    grid-template-columns: 1fr 58px;
    gap: 0.25rem 0.45rem;
    align-items: center;
    margin-bottom: 0.65rem;
    font-size: 0.6rem;
}

.pes2-box-all-row .form-control {
    min-height: 28px;
    padding: 0.2rem;
    font-size: 0.62rem;
}

.pes2-control-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.pes2-control-group small,
.pes2-control-group .form-check-label {
    font-size: 0.62rem;
    line-height: 1.4;
}

.pes2-warning,
.pes2-repeat-info {
    margin-bottom: 0.7rem;
    padding: 0.55rem;
    border-radius: 0.45rem;
    font-size: 0.63rem;
    line-height: 1.45;
}

.pes2-warning {
    background: #fff8e1;
    color: #775c11;
}

.pes2-repeat-info {
    background: #eef3ff;
    color: #4052a8;
}

.pes2-structure-controls {
    margin-top: 0.85rem;
    padding-top: 0.05rem;
    border-top: 1px solid #e7eaf0;
}

.pes2-button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.pes2-compact-action {
    min-height: 30px;
    padding: 0.3rem 0.45rem;
    border: 1px solid #dce2f7;
    border-radius: 0.42rem;
    background: #f8f9ff;
    color: #5667cf;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 700;
}

.pes2-compact-action:hover {
    border-color: #aeb9f1;
    background: #f0f2ff;
}

.pes2-compact-action:disabled,
.pes2-inline-action:disabled,
.pes2-layout-presets button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.pes2-compact-action.is-danger {
    border-color: #f0d8da;
    background: #fffafa;
    color: #c95b65;
}

.pes2-compact-action.is-danger:hover {
    border-color: #e9bfc3;
    background: #fff4f5;
}

.pes2-inline-action {
    padding: 0.2rem 0;
    border: 0;
    background: transparent;
    color: var(--mv-primary);
    font-family: inherit;
    font-size: 0.63rem;
    font-weight: 700;
}

.pes2-inline-action:hover {
    color: #344bbd;
}

.pes2-structure-context {
    margin-bottom: 0.55rem;
    padding: 0.42rem 0.5rem;
    border-radius: 0.4rem;
    background: #f4f6f9;
    color: #596780;
    font-size: 0.61rem;
    line-height: 1.4;
}

.pes2-structure-group-label {
    display: block;
    margin: 0.55rem 0 0.25rem;
    color: #98a2b3;
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pes2-layout-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
}

.pes2-layout-presets button {
    display: flex;
    gap: 2px;
    align-items: stretch;
    height: 31px;
    padding: 5px;
    border: 1px solid #dfe3e9;
    border-radius: 0.38rem;
    background: #fff;
}

.pes2-layout-presets button:hover {
    border-color: #aeb9f1;
    background: #f8f9ff;
}

.pes2-layout-presets button span {
    flex: 1 1 0;
    border-radius: 2px;
    background: #cfd6f6;
}

.pes2-layout-presets button span.is-small { flex-grow: 1; }
.pes2-layout-presets button span.is-large { flex-grow: 2; }

.pes2-direction-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mv-space-1);
    margin-bottom: var(--mv-space-1-5);
}

.pes2-direction-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv-space-1-5);
    min-height: 31px;
    padding: var(--mv-space-1) var(--mv-space-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-surface);
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-direction-toggle svg {
    width: 15px;
    height: 15px;
    fill: currentcolor;
}

.pes2-direction-toggle button:hover,
.pes2-direction-toggle button.is-active {
    border-color: var(--mv-primary-300);
    background: var(--mv-primary-50);
    color: var(--mv-primary);
}

.pes2-direction-toggle button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.pes2-segmented {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    margin-bottom: var(--mv-space-2);
    padding: 2px;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-surface-muted);
}

.pes2-segmented button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv-space-1);
    min-width: 0;
    min-height: 26px;
    padding: 0 var(--mv-space-1);
    border: 0;
    border-radius: var(--mv-radius-xs);
    background: transparent;
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
    white-space: nowrap;
}

.pes2-segmented svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
}

.pes2-segmented button:hover {
    color: var(--mv-text);
}

.pes2-segmented button.is-active {
    background: var(--mv-surface);
    box-shadow: var(--mv-shadow-sm);
    color: var(--mv-primary);
}

.pes2-size-row {
    display: flex;
    align-items: center;
    gap: var(--mv-space-1-5);
    margin-bottom: var(--mv-space-2);
}

.pes2-size-row label {
    flex: 1 1 auto;
    margin: 0;
}

.pes2-size-row input {
    flex: 0 1 84px;
    min-width: 0;
    height: 30px;
}

.pes2-size-row .form-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    margin-bottom: 0;
}

.pes2-size-row > span {
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
}

.pes2-structure-controls .pes2-size-row {
    margin-top: var(--mv-space-2);
}

.pes2-size-axis {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: var(--mv-space-2);
    margin-bottom: var(--mv-space-2);
}

.pes2-size-axis .pes2-segmented {
    margin-bottom: 0;
}

.pes2-size-axis-label,
.pes2-size-row label {
    color: var(--mv-text);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-size-title {
    display: block;
    margin: var(--mv-space-3) 0 var(--mv-space-2);
    color: var(--mv-text-strong);
    font-size: var(--mv-fs-xs);
    font-weight: var(--mv-fw-bold);
}

.pes2-size-hint {
    color: var(--mv-warning-text);
}

.pes2-radius-presets {
    margin-top: var(--mv-space-1);
}

.pes2-radius-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 9px;
    border: 1.5px solid currentcolor;
}

.pes2-radius-swatch.is-soft { border-radius: 2px; }
.pes2-radius-swatch.is-round { border-radius: 4px; }
.pes2-radius-swatch.is-pill { border-radius: var(--mv-radius-pill); }

.pes2-radius-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mv-space-3);
}

.pes2-radius-all label {
    display: block;
    margin: 0 0 var(--mv-space-1);
    color: var(--mv-text);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-radius-input {
    display: flex;
    align-items: center;
    gap: var(--mv-space-1-5);
}

.pes2-radius-input input {
    width: 72px;
    height: 30px;
}

.pes2-radius-input span {
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
}

/* Les 4 coins autour d'un apercu de la forme : chaque champ est a la place de son coin. */
.pes2-radius-corners {
    display: grid;
    grid-template-areas: "tl preview tr" "bl preview br";
    grid-template-columns: 46px 40px 46px;
    align-items: center;
    gap: var(--mv-space-1) var(--mv-space-1-5);
}

.pes2-radius-corners input {
    height: 26px;
    padding: 0 var(--mv-space-1);
    font-size: var(--mv-fs-2xs);
    text-align: center;
}

.pes2-radius-corners input:nth-of-type(1) { grid-area: tl; }
.pes2-radius-corners input:nth-of-type(2) { grid-area: tr; }
.pes2-radius-corners input:nth-of-type(3) { grid-area: bl; }
.pes2-radius-corners input:nth-of-type(4) { grid-area: br; }

.pes2-radius-preview {
    grid-area: preview;
    width: 40px;
    height: 28px;
    border: 2px solid var(--mv-primary);
    background: var(--mv-primary-50);
    transition: border-radius var(--mv-transition-fast);
}

.pes2-flex-settings .pes2-size-title {
    margin-top: 0;
}

.pes2-flex-details {
    display: flex;
    align-items: center;
    gap: var(--mv-space-4);
}

/* Grille 3 x 3 : on clique la case ou placer le contenu. */
.pes2-align-grid {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(3, 22px);
    grid-auto-rows: 22px;
    padding: 3px;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-surface-muted);
}

.pes2-align-grid button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--mv-radius-xs);
    background: transparent;
}

.pes2-align-grid span {
    width: 4px;
    height: 4px;
    border-radius: var(--mv-radius-round);
    background: var(--mv-gray-400);
}

.pes2-align-grid button:hover span {
    width: 8px;
    height: 8px;
    background: var(--mv-primary-300);
}

.pes2-align-grid button.is-active {
    background: var(--mv-surface);
    box-shadow: var(--mv-shadow-sm);
}

.pes2-align-grid button.is-active span {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--mv-primary);
}

.pes2-flex-gap label {
    display: block;
    margin: 0 0 var(--mv-space-1);
    color: var(--mv-text);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-shadow-presets {
    margin-top: var(--mv-space-1);
}

.pes2-shadow-details {
    margin-bottom: var(--mv-space-2);
}

.pes2-shadow-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--mv-space-3);
}

.pes2-shadow-direction {
    display: grid;
    justify-items: center;
    gap: var(--mv-space-1);
}

.pes2-shadow-color {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: var(--mv-space-2);
    margin-top: var(--mv-space-2);
}

.pes2-shadow-color .form-control-color {
    width: 36px;
    height: 30px;
    padding: 2px;
}

/* Libelle, curseur et valeur exacte sur une ligne. */
.pes2-slider-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mv-space-2);
    margin-bottom: var(--mv-space-1-5);
}

.pes2-slider-row label {
    margin: 0;
    color: var(--mv-text);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-slider-row .form-range {
    min-width: 0;
}

.pes2-slider-value {
    display: flex;
    align-items: center;
    gap: var(--mv-space-1);
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
}

.pes2-slider-value input {
    width: 50px;
    height: 26px;
    padding: 0 var(--mv-space-1);
    font-size: var(--mv-fs-2xs);
    text-align: right;
}

.pes2-icon-settings-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pes2-structure-reason,
.pes2-structure-status {
    min-height: 1em;
    margin: 0.4rem 0 0;
    color: #7b879c;
    font-size: 0.58rem;
    line-height: 1.4;
}

.pes2-structure-status.is-error { color: #c95b65; }
.pes2-structure-status.is-success { color: #2d8c61; }

.pes2-preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f1f3f6;
}

.pes2-preview-route {
    display: flex;
    align-items: center;
    gap: var(--mv-space-2);
    margin-bottom: var(--mv-space-2);
    font-size: var(--mv-fs-xs);
}

.pes2-preview-route .form-select {
    width: auto;
    min-width: 12rem;
}

/* Menu ME : carte "Onglet actif" (mise en avant selon l'ecran). */
.pes2-route-card {
    display: grid;
    gap: var(--mv-space-3);
    margin-bottom: var(--mv-space-3);
    padding: var(--mv-space-3);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-md);
    background: var(--mv-surface);
}

.pes2-route-card.is-on {
    border-color: var(--mv-primary-200);
    box-shadow: var(--mv-shadow-sm);
}

.pes2-route-card-header {
    display: flex;
    align-items: center;
    gap: var(--mv-space-2);
}

.pes2-route-card-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--mv-space-8);
    height: var(--mv-space-8);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-primary-50);
    color: var(--mv-primary);
}

.pes2-route-card-icon svg {
    width: var(--mv-space-4);
    height: var(--mv-space-4);
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-width: 2;
}

.pes2-route-card-titles {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.pes2-route-card-titles strong {
    color: var(--mv-text-heading);
    font-size: var(--mv-fs-xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-route-card-titles span {
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
}

.pes2-route-status {
    flex: 0 0 auto;
    padding: 2px var(--mv-space-2);
    border-radius: var(--mv-radius-pill);
    background: var(--mv-surface-muted);
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
    white-space: nowrap;
}

.pes2-route-card.is-on .pes2-route-status {
    background: var(--mv-primary-50);
    color: var(--mv-primary);
}

.pes2-route-step {
    display: grid;
    gap: var(--mv-space-2);
}

.pes2-route-step + .pes2-route-step {
    padding-top: var(--mv-space-3);
    border-top: 1px solid var(--mv-border);
}

.pes2-route-step-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mv-space-2);
}

.pes2-route-step-title {
    color: var(--mv-text-strong);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-route-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mv-primary);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-semibold);
}

.pes2-route-link:hover {
    text-decoration: underline;
}

.pes2-route-link.is-danger {
    justify-self: start;
    color: var(--mv-danger);
}

.pes2-route-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mv-space-1-5);
}

.pes2-route-chip {
    padding: var(--mv-space-1) var(--mv-space-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-pill);
    background: var(--mv-surface);
    color: var(--mv-text);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-medium);
    line-height: 1.3;
    transition: background-color var(--mv-transition-fast), border-color var(--mv-transition-fast), color var(--mv-transition-fast);
}

.pes2-route-chip:hover {
    border-color: var(--mv-primary-300);
    color: var(--mv-text-strong);
}

.pes2-route-chip[aria-pressed="true"] {
    border-color: var(--mv-primary);
    background: var(--mv-primary-50);
    color: var(--mv-primary);
}

.pes2-route-chip:disabled {
    opacity: 0.5;
}

.pes2-route-empty {
    margin: 0;
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
}

.pes2-route-step:not(.is-waiting) .pes2-route-empty,
.pes2-route-step.is-waiting .pes2-route-preview,
.pes2-route-step.is-waiting .pes2-route-props,
.pes2-route-step.is-waiting .pes2-route-hint {
    display: none;
}

.pes2-route-preview {
    display: flex;
    align-items: stretch;
    gap: var(--mv-space-2);
}

.pes2-route-preview-tile {
    display: grid;
    flex: 1 1 0;
    gap: var(--mv-space-1);
    justify-items: center;
    min-width: 0;
    padding: var(--mv-space-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-surface-muted);
}

.pes2-route-preview-tile.is-active {
    border-color: var(--mv-primary-200);
    background: var(--mv-surface);
}

.pes2-route-preview-label {
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
}

.pes2-route-preview-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv-space-1);
    max-width: 100%;
    min-height: var(--mv-space-8);
    padding: var(--mv-space-1) var(--mv-space-2);
    overflow: hidden;
    border-radius: var(--mv-radius-sm);
    font-size: var(--mv-fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pes2-route-preview-sample svg {
    flex: 0 0 auto;
    width: var(--mv-space-6);
    height: var(--mv-space-6);
}

.pes2-route-preview-arrow {
    flex: 0 0 auto;
    align-self: center;
    width: var(--mv-space-4);
    height: var(--mv-space-4);
    fill: none;
    stroke: var(--mv-text-muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.pes2-route-props {
    display: grid;
    gap: var(--mv-space-2);
}

.pes2-route-prop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mv-space-2);
    margin: 0;
    min-height: var(--mv-space-8);
}

.pes2-route-prop.is-stacked {
    display: grid;
    gap: var(--mv-space-1);
}

.pes2-route-prop-label {
    margin: 0;
    color: var(--mv-text-strong);
    font-size: var(--mv-fs-2xs);
    font-weight: var(--mv-fw-medium);
}

.pes2-route-color,
.pes2-route-icon-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
}

.pes2-route-color input[type="color"] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.pes2-route-swatch {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1-5);
    min-height: 28px;
    padding: 2px var(--mv-space-2) 2px 3px;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-pill);
    background: var(--mv-surface);
    color: var(--mv-text);
    font-size: var(--mv-fs-2xs);
}

.pes2-route-swatch:hover {
    border-color: var(--mv-primary-300);
}

.pes2-route-swatch span {
    width: 20px;
    height: 20px;
    border: 1px dashed var(--mv-text-disabled);
    border-radius: var(--mv-radius-round);
    background: var(--pes2-route-swatch, transparent);
}

.pes2-route-swatch.is-set span {
    border-style: solid;
    border-color: var(--mv-border);
}

.pes2-route-swatch em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.pes2-route-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--mv-radius-round);
    background: transparent;
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-sm);
    line-height: 1;
}

.pes2-route-reset:hover {
    background: var(--mv-surface-muted);
    color: var(--mv-text-strong);
}

.pes2-route-reset[hidden] {
    display: none;
}

.pes2-route-segmented {
    margin-bottom: 0;
}

.pes2-route-switch {
    min-height: 0;
    margin: 0;
}

.pes2-route-icon-choice {
    display: flex;
}

.pes2-route-icon-current {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--mv-space-2);
    min-height: 34px;
    padding: var(--mv-space-1) var(--mv-space-2);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-surface);
    color: var(--mv-text);
    font-size: var(--mv-fs-2xs);
}

.pes2-route-icon-current:hover,
.pes2-route-icon-current[aria-expanded="true"] {
    border-color: var(--mv-primary-300);
}

.pes2-route-icon-preview {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1-5);
}

.pes2-route-icon-preview img {
    width: var(--mv-space-5);
    height: var(--mv-space-5);
}

.pes2-route-icon-action {
    color: var(--mv-primary);
    font-weight: var(--mv-fw-semibold);
}

.pes2-route-icon-picker {
    display: grid;
    gap: var(--mv-space-2);
    padding: var(--mv-space-2);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-surface-muted);
}

.pes2-route-icon-picker[hidden] {
    display: none;
}

.pes2-route-icon-picker .pes2-icon-grid button.is-active {
    border-color: var(--mv-primary);
    background: var(--mv-primary-50);
}

.pes2-route-hint {
    margin: 0;
    color: var(--mv-text-muted);
    font-size: var(--mv-fs-2xs);
    line-height: 1.4;
}

.pes2-route-hint:empty {
    display: none;
}

.pes2-preview-status {
    min-height: 1rem;
    margin-bottom: 0.4rem;
    color: var(--mv-text);
    font-size: 0.65rem;
}

.pes2-preview-status.is-error {
    color: #c95b65;
}

.pes2-preview-frame {
    width: 390px;
    max-width: 100%;
    height: 70vh;
    border: 1px solid #dce2eb;
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 5px 16px rgba(31, 45, 70, 0.08);
}

.pes2-preview-body .v2-app-preview-device-wrap {
    width: 390px;
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    .pes2-editor {
        height: auto;
        min-height: 720px;
    }

    .pes2-topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pes2-top-actions {
        order: 3;
        width: 100%;
    }

    .pes2-workspace {
        --pes2-left-width: 210px;
        --pes2-right-width: 255px;
        height: 670px;
    }
}

@media (max-width: 991.98px) {
    .pes2-editor {
        overflow: visible;
    }

    .pes2-workspace {
        display: flex;
        height: auto;
        flex-direction: column;
    }

    .pes2-panel-resizer {
        display: none;
    }

    .pes2-left-panel,
    .pes2-right-panel {
        border: 0;
        border-bottom: 1px solid #e7eaf0;
        overflow: visible;
    }

    .pes2-canvas-panel {
        min-height: 600px;
    }

    #v2-canvasContainer.pes2-canvas-container {
        min-height: 570px;
    }
}

@media (max-width: 575.98px) {
    .pes2-topbar {
        gap: 0.5rem;
    }

    .pes2-title-area {
        flex: 1 1 calc(100% - 70px);
    }

    .pes2-title-form .form-control {
        width: 150px;
    }

    .pes2-language-list {
        padding-left: 0;
        border-left: 0;
    }

    .pes2-page-switcher {
        order: 2;
        width: 100%;
        padding-left: 0;
        border-left: 0;
    }

    .pes2-top-actions {
        justify-content: flex-start;
    }

    .pes2-top-actions .v2-save-indicator {
        width: 100%;
    }

    .pes2-secondary-link {
        margin-left: 0.15rem;
    }

    .pes2-block-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Simplified page editor: nested text formula composer. */
.pes2-fb-summary { display: grid; gap: .6rem; margin-top: .8rem; }
.pes2-fb-summary-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #62708a; font-size: .74rem; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.pes2-fb-summary-text:empty { display: none; }
.pes2-formula-modal { --fb-blue: var(--mv-primary-100); --fb-purple: #ede9fe; --fb-green: #dcfce7; --fb-orange: #ffedd5; z-index: 1060; }
.pes2-formula-modal .modal-dialog { max-width: min(1280px, calc(100vw - 24px)); margin: 12px auto; }
.pes2-formula-modal .modal-content { height: min(900px, calc(100dvh - 32px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 90px #172b4d30; }
.pes2-formula-modal .modal-header { padding: .65rem 1rem; flex-shrink: 0; }
.pes2-formula-modal .modal-title { font-size: 1rem; font-weight: 700; }
.pes2-formula-modal [hidden], .pes2-fb-summary[hidden], #pes2-formulaAssistant[hidden] { display: none !important; }
.pes2-fb-button { border: 1px solid #dce3ef; border-radius: 9px; background: #fff; color: #233858; font: inherit; font-size: .76rem; line-height: 1.35; padding: .35rem .55rem; cursor: pointer; text-align: left; }
.pes2-fb-button:hover { background: #f0f5ff; border-color: #a4b9e7; }
.pes2-fb-button:focus-visible, .pes2-fb-input:focus-visible, .pes2-formula-modal summary:focus-visible { outline: 3px solid #4b66ff; outline-offset: 2px; }
.pes2-fb-button:disabled { opacity: .42; cursor: default; }
.pes2-fb-primary { background: #3454ee; color: #fff; border-color: #3454ee; text-align: center; }
.pes2-fb-primary:hover { background: #233fc6; color: #fff; }
.pes2-fb-launch { --launch-accent: #3454ee; --launch-soft: #eef2ff; display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .7rem; border: 1px solid #e1e6f0; border-radius: 12px; background: #fff; color: #1f2d45; box-shadow: 0 1px 2px #172b4d0d; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.pes2-fb-launch.is-visibility { --launch-accent: #0f9d6b; --launch-soft: #e7f8f0; }
.pes2-fb-launch.is-formula { --launch-accent: #7c3aed; --launch-soft: #f3edff; }
.pes2-fb-launch:hover { background: #fff; border-color: var(--launch-accent); box-shadow: 0 4px 14px #172b4d14; transform: translateY(-1px); }
.pes2-fb-launch:active { transform: none; box-shadow: 0 1px 2px #172b4d0d; }
.pes2-fb-launch-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--launch-soft); color: var(--launch-accent); }
.pes2-fb-launch-icon svg, .pes2-fb-launch-chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pes2-fb-launch-text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.pes2-fb-launch-title { font-size: .8rem; font-weight: 600; color: #1f2d45; }
.pes2-fb-launch-chevron { display: inline-flex; flex-shrink: 0; color: #a3adc0; transition: color .15s ease, transform .15s ease; }
.pes2-fb-launch:hover .pes2-fb-launch-chevron { color: var(--launch-accent); transform: translateX(2px); }
.pes2-fb-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); flex: 1 1 0; padding: 0; min-height: 0; height: auto; overflow: hidden; }
.pes2-fb-palette { padding: .7rem; background: #f9faff; border-right: 1px solid #e6eaf2; overflow-y: auto; overscroll-behavior: contain; }
.pes2-fb-search { font-size: .76rem; min-height: 34px; padding: .4rem .5rem; margin-bottom: .6rem; }
.pes2-fb-category { margin-bottom: .6rem; }
.pes2-fb-category h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #68758c; margin: 0 0 .65rem; }
.pes2-fb-palette-block { width: 100%; margin-bottom: .3rem; display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; font-size: .73rem; }
.pes2-fb-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 22px; height: 22px; background: #ffffff90; border-radius: 5px; font-size: .7rem; font-weight: 800; }
.pes2-fb-palette-block.is-variable { background: var(--fb-blue); border-color: #b4cff5; }
.pes2-fb-palette-block.is-text, .pes2-fb-palette-block.is-space, .pes2-fb-palette-block.is-group { background: var(--fb-green); border-color: #b1dec0; }
.pes2-fb-palette-block.is-effect { background: var(--fb-purple); border-color: #ccbff3; }
.pes2-fb-palette-block.is-condition { background: var(--fb-orange); border-color: #f4cca5; }
.pes2-fb-workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #fcfdff; }
.pes2-fb-toolbar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .45rem .65rem; flex-shrink: 0; border-bottom: 1px solid #e6eaf2; }
.pes2-fb-presets { margin-left: auto; position: relative; font-size: .8rem; }
.pes2-fb-presets summary, .pes2-fb-simulation summary, .pes2-fb-advanced summary { cursor: pointer; padding: .4rem; }
.pes2-fb-preset-list { position: absolute; right: 0; top: 100%; z-index: 4; padding: .5rem; background: #fff; border: 1px solid #dce3ef; box-shadow: 0 8px 25px #172b4d15; border-radius: 10px; display: grid; gap: .4rem; min-width: 180px; }
.pes2-fb-canvas { flex: 1; min-height: 0; padding: .75rem; overflow: auto; overscroll-behavior: contain; background-image: radial-gradient(#c9d5e8 1px, transparent 1px); background-size: 18px 18px; }
.pes2-fb-node { border: 1px solid #bdd1e8; border-radius: 9px; padding: .35rem; background: var(--mv-primary-50); min-width: 110px; max-width: 100%; }
.pes2-fb-node.is-text, .pes2-fb-node.is-space { background: #effbf3; border-color: #b1dec0; }
.pes2-fb-node.is-space { min-width: 90px; }
.pes2-fb-node.is-effect { background: #f3efff; border: 1px solid #c8b9ee; border-radius: 9px; }
.pes2-fb-node.is-condition { background: #fff5ea; border-color: #eabb8c; border-left-width: 3px; }
.pes2-fb-node.is-group { background: #ffffffda; border: 1px dashed #aebfd5; min-width: 140px; }
.pes2-fb-node.is-selected { outline: 2px solid #4765eb; outline-offset: 2px; }
.pes2-fb-node.is-incomplete { border-color: #be6b11; }
.pes2-fb-node-heading { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.pes2-fb-node-name { background: transparent; border: 0; padding: .25rem; display: flex; align-items: center; gap: .35rem; font-weight: 600; overflow-wrap: anywhere; }
.pes2-fb-drag-handle { padding: .2rem; background: transparent; border: 0; color: #71839d; min-width: 26px; min-height: 26px; }
.pes2-fb-grip { touch-action: none; cursor: grab; }
.pes2-fb-grip:active { cursor: grabbing; }
.pes2-fb-sequence { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .3rem; padding: .25rem .1rem .1rem; }
.pes2-fb-gap { align-self: stretch; min-height: 28px; width: 15px; padding: 0; border: 1px dashed transparent; background: transparent; color: #8b9ab1; }
.pes2-fb-gap.is-empty { width: 100%; min-height: 38px; border-color: #b8c8df; color: #647898; font-size: .8rem; padding: .5rem; text-align: center; }
.pes2-fb-field { display: block; margin: .3rem 0 0; }
.pes2-fb-input { width: 100%; min-width: 120px; max-width: 280px; background: #ffffffd9; color: #233858; border: 1px solid #c9d5e2; border-radius: 7px; padding: .3rem .4rem; font-size: .76rem; resize: vertical; }
.pes2-fb-empty-slot { width: 100%; background: #ffffffa6; border: 1px dashed #a694cf; margin-top: .25rem; min-height: 32px; font-size: .76rem; }
.pes2-fb-branch { min-width: 0; margin: .35rem 0 0 .2rem; border-left: 2px solid #d8c5ae; padding-left: .6rem; }
.pes2-fb-branch-label { display: block; font-size: .7rem; font-weight: 700; color: #7b684e; margin-bottom: .3rem; }
.pes2-fb-legacy-rule { display: block; font-size: .67rem; margin-top: .4rem; color: #726089; }
.pes2-fb-selection-tools { border-top: 1px solid #e6eaf2; border-bottom: 0; padding: .4rem .65rem; gap: .3rem; }
.pes2-fb-selection-tools .pes2-fb-button { font-size: .72rem; padding: .35rem .5rem; }
.pes2-fb-selection-label { flex: 1 1 180px; min-width: 0; font-size: .7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #68758c; }
.pes2-fb-status { font-size: .72rem; min-height: 0; margin: 0; padding: 0 .8rem .4rem; color: #52617d; }
.pes2-formula-modal.is-placing .is-compatible { outline: 2px dashed #178350; background-color: #dcfce7; }
.pes2-formula-modal.is-placing .is-drop-hover { outline: 3px solid #178350; background-color: #bbf7d0; }
.pes2-fb-preview { padding: .45rem 1rem; border-top: 1px solid #e6eaf2; background: #f8faff; flex-shrink: 0; max-height: min(130px, 18dvh); overflow: auto; }
.pes2-fb-preview-heading { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .76rem; }
.pes2-fb-preview-heading > strong { flex: 1; }
.pes2-fb-output { display: block; margin: .25rem 0; font-size: .85rem; line-height: 1.4; color: #1d3354; max-height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: anywhere; }
.pes2-fb-preview.is-expanded { max-height: 32dvh; }
.pes2-fb-preview.is-expanded .pes2-fb-output { max-height: none; overflow: visible; white-space: pre-wrap; }
.pes2-fb-preview-toggle { font-size: .7rem; padding: .2rem .45rem; }
.pes2-fb-preview-status { font-size: .68rem; color: #6b7890; margin: 0; }
.pes2-fb-preview-status:empty, .pes2-fb-status:empty { display: none; }
.pes2-fb-simulation { font-size: .72rem; }
.pes2-fb-simulation-list { display: grid; gap: .4rem; }
.pes2-fb-simulation-option { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .75rem; }
.pes2-fb-legacy { padding: 1.2rem; overflow: auto; font-size: .85rem; }
.pes2-fb-advanced { margin-top: 1rem; }
.pes2-fb-advanced textarea { font-family: monospace; font-size: .8rem; }
.pes2-formula-modal .modal-footer { padding: .5rem 1rem; flex-shrink: 0; }
.pes2-fb-error { margin-right: auto; color: #8d4f15; font-size: .76rem; max-width: 55%; }
@media (max-width: 767px) {
  .pes2-formula-modal .modal-dialog { max-width: calc(100vw - 12px); margin: 6px auto; }
  .pes2-formula-modal .modal-content { max-height: calc(100dvh - 12px); }
  .pes2-fb-body { grid-template-columns: 170px minmax(0, 1fr); }
  .pes2-fb-palette { padding: .6rem; }
  .pes2-fb-palette-block { font-size: .7rem; padding: .4rem; }
  .pes2-fb-canvas { padding: .7rem; }
  .pes2-fb-toolbar { padding: .5rem; }
  .pes2-fb-preview, .pes2-formula-modal .modal-header, .pes2-formula-modal .modal-footer { padding: .7rem; }
  .pes2-fb-error { max-width: 100%; flex-basis: 100%; }
  .pes2-fb-node { min-width: 90px; }
  .pes2-fb-node-name { font-size: .73rem; }
}
@media (max-width: 480px) {
  .pes2-fb-body { grid-template-columns: 1fr; grid-template-rows: 140px minmax(0, 1fr); }
  .pes2-fb-palette { border-right: 0; border-bottom: 1px solid #e6eaf2; }
  .pes2-fb-search { margin-bottom: .4rem; }
  .pes2-fb-catalog { display: flex; gap: .7rem; overflow-x: auto; }
  .pes2-fb-category { display: flex; gap: .35rem; margin: 0; }
  .pes2-fb-category h3 { display: none; }
  .pes2-fb-palette-block { width: 145px; flex-shrink: 0; }
  .pes2-fb-preview-heading { flex-wrap: wrap; }
}

.pes2-fb-palette { display: flex; flex-direction: column; overflow: hidden; }
.pes2-fb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: .6rem; flex-shrink: 0; }
.pes2-fb-tabs .pes2-fb-button { font-size: .72rem; text-align: center; padding: .3rem .2rem; }
.pes2-fb-tabs .is-active { color: #2948d8; border-color: #8da5ed; background: #eaf0ff; font-weight: 700; }
.pes2-fb-catalog { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
@media (max-width: 480px) {
  .pes2-fb-body { grid-template-rows: 140px minmax(0, 1fr); }
  .pes2-fb-tabs { display: flex; margin-bottom: .4rem; }
  .pes2-fb-tabs .pes2-fb-button { flex: 1; }
}

/* The composition root is the canvas, not an additional visible block. */
.pes2-fb-root { min-width: 0; }
.pes2-fb-root > .pes2-fb-sequence { padding: 0; }
.pes2-fb-root:focus-visible { outline: 2px dashed #4765eb; outline-offset: 4px; }

/* Compact branches and typed blocks, shared by all composer dialogs. */
.pes2-fb-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .5rem; margin-top: .4rem; }
.pes2-fb-branches > .pes2-fb-branch { margin: 0; padding: 0; border: 0; }
.pes2-fb-branches > .pes2-fb-branch > .pes2-fb-node.is-group { min-width: 0; border: 1px solid #e2d8ce; background: #ffffff70; }
.pes2-fb-branch-heading .pes2-fb-node-name { font-size: .7rem; color: #7b684e; }
.pes2-fb-canvas:not(.pes2-bb-canvas) .pes2-fb-node.is-condition { flex: 1 1 100%; min-width: 0; width: 100%; }
.pes2-fb-modes { display: flex; flex-wrap: wrap; gap: .3rem; }
.pes2-fb-branches > .pes2-bb-node { min-width: 0; margin: 0; padding: .35rem .5rem; background: #ffffff70; border: 1px solid #e2d8ce; border-radius: 7px; }
.pes2-bb-sequence.is-conditions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .25rem; }
.pes2-bb-sequence.is-conditions > .pes2-fb-gap { width: 18px; min-height: 28px; }
.pes2-bb-sequence.is-conditions > .pes2-fb-gap.is-empty { width: 100%; }
.pes2-bb-sequence.is-conditions > .pes2-bb-node[data-bb-type="test"] { flex: 1 1 420px; min-width: 0; }
.pes2-bb-node[data-bb-type="not"] { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.pes2-bb-node[data-bb-type="not"] > .pes2-bb-slot { margin: 0; }
.pes2-bb-node[data-bb-type="test"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem; }
.pes2-bb-node[data-bb-type="test"] > .pes2-fb-node-heading { flex-basis: 100%; }
.pes2-bb-node[data-bb-type="test"] > .pes2-fb-field { flex: 1 1 120px; margin: 0; }
.pes2-bb-node[data-bb-type="test"] > .pes2-fb-field > .pes2-fb-input { min-width: 0; max-width: 100%; }
.pes2-bb-node[data-bb-type="test"] > .pes2-bb-slot { flex: 1 1 150px; margin: 0; }
.pes2-bb-node[data-bb-type="action"] { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pes2-bb-node[data-bb-type="action"] > .pes2-fb-node-heading { flex: 0 1 auto; }
.pes2-bb-node[data-bb-type="action"] > .pes2-bb-target { flex: 1 1 150px; }
.pes2-bb-node[data-bb-type="action"] > .pes2-fb-field { flex: 1 1 180px; margin: 0; }
.pes2-bb-node[data-bb-type="predicate"], .pes2-bb-node[data-bb-type="value"] { padding: .15rem .3rem; }

/* Actions and visibility share the text composer canvas and interactions. */
.pes2-bb-sequence { flex-direction: column; align-items: stretch; gap: .15rem; }
.pes2-bb-sequence > .pes2-fb-gap { width: 100%; min-height: 18px; text-align: center; }
.pes2-bb-sequence > .pes2-fb-gap.is-empty { min-height: 34px; }
.pes2-bb-node { flex-shrink: 0; }
.pes2-bb-node:focus-visible { outline: 3px solid #4765eb; outline-offset: 2px; }
.pes2-bb-node > .pes2-fb-node.is-group { margin: .5rem 0 0 .5rem; background: transparent; border-width: 0 0 0 2px; border-style: solid; border-radius: 0; min-width: 0; }
.pes2-bb-slot { min-width: 0; margin-top: .3rem; }
.pes2-bb-field-label { display: block; font-size: .7rem; color: #5b6880; margin-bottom: .2rem; }
.pes2-bb-target { min-width: 0; padding: .1rem .3rem; background: #ffffffb3; border-radius: 7px; font-size: .8rem; }
.pes2-bb-target summary { cursor: pointer; padding: .25rem; overflow-wrap: anywhere; }
.pes2-bb-target-list { display: grid; gap: .3rem; max-height: 170px; overflow-y: auto; margin-top: .4rem; }
.pes2-bb-target .pes2-fb-input { max-width: 100%; }
.pes2-bb-output { font-size: .88rem; }
.pes2-bb-code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; }
.pes2-bb-constant { color: #536582; font-size: .9rem; padding: 1rem; text-align: center; }
.pes2-bb-simulation-row { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.pes2-bb-simulation-row > span { flex-basis: 100%; }
.pes2-behavior-modal [aria-pressed=true] { background: #eaf0ff; border-color: #8da5ed; color: #2948d8; }
@media (max-width: 480px) {
  .pes2-behavior-modal .pes2-fb-tabs { overflow-x: auto; }
  .pes2-behavior-modal .pes2-fb-tabs .pes2-fb-button { flex: 0 0 auto; padding: .45rem .6rem; }
  .pes2-behavior-modal .pes2-fb-catalog { flex-shrink: 0; }
  .pes2-bb-node > .pes2-fb-node.is-group { margin-left: .2rem; }
}

/* Behavior catalogue: full library, compact families, technical detail on demand. */
.pes2-behavior-modal .pes2-fb-body { grid-template-columns: 290px minmax(0, 1fr); }
.pes2-behavior-modal .pes2-fb-catalog { display: block; flex: 1 1 auto; }
.pes2-bb-family { margin: .25rem 0; border: 1px solid #e2e7f0; border-radius: 7px; background: #fff; }
.pes2-bb-family > summary { padding: .5rem; font-size: .76rem; font-weight: 600; cursor: pointer; }
.pes2-bb-family-list { padding: 0 .4rem .4rem; }
.pes2-bb-library-entry { margin-bottom: .4rem; }
.pes2-bb-library-entry .pes2-fb-palette-block { flex-wrap: wrap; text-align: left; margin-bottom: 0; }
.pes2-bb-library-label { flex: 1 1 100%; }
.pes2-bb-type, .pes2-bb-context-badge { font-size: .64rem; border-radius: 4px; background: #ffffffb3; padding: .1rem .25rem; }
.pes2-bb-context-badge { color: #315f49; }
.pes2-bb-entry-detail { padding: .1rem .35rem; font-size: .68rem; color: #536078; }
.pes2-bb-entry-detail > summary { cursor: pointer; }
.pes2-bb-entry-detail p { margin: .25rem 0; }
.pes2-bb-entry-detail code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .66rem; }
.pes2-bb-sentence { margin: .3rem 0 .6rem; padding: .5rem .65rem; background: #f5f7fc; border-radius: 6px; font-size: .78rem; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .pes2-behavior-modal .pes2-fb-body { grid-template-columns: 1fr; grid-template-rows: minmax(170px, 30vh) minmax(0, 1fr); }
  .pes2-behavior-modal .pes2-fb-palette-block { width: 100%; }
  .pes2-behavior-modal .pes2-fb-tabs { display: grid; grid-template-columns: 1fr 1fr; }
}