/*
 * Playground pipelines — même layout que le playground modèles :
 * schéma (document qui circule) à gauche, Config / Résultats à droite.
 */

.playground-page--pipelines .playground-bar {
    gap: 16px;
    margin-bottom: 16px;
}

.ppg-file-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ppg-import {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    white-space: nowrap;
}

.ppg-import i {
    font-size: 0.875rem;
}

.ppg-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    height: 36px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--bleu-2-bordure);
    background: var(--blanc);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--noir);
}

html.dark .ppg-file-chip {
    background: var(--color-surface);
    border-color: rgba(219, 232, 255, 0.24);
    color: var(--color-text);
}

.ppg-file-chip[hidden] {
    display: none;
}

.ppg-file-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppg-file-chip__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gris-texte, #5b6472);
    cursor: pointer;
}

.ppg-file-chip__clear:hover {
    color: var(--noir);
}

html.dark .ppg-file-chip__clear:hover {
    color: var(--color-text);
}

.ppg-status {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gris-texte, #5b6472);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.dark .ppg-status {
    color: var(--color-text-muted, #9aa4b2);
}

.ppg-status.is-running {
    color: var(--bleu-1);
    font-weight: 600;
}

.ppg-file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ——— Colonne schéma ——— */
.playground-page--pipelines .playground-card-input > .playground-card-body {
    padding: 16px 20px;
    overflow: auto;
}

.ppg-schema {
    position: relative;
    min-width: 0;
    min-height: 100%;
}

.ppg-schema.is-dragover {
    outline: 2px solid var(--bleu-1);
    outline-offset: -4px;
    background: color-mix(in srgb, var(--bleu-1) 6%, transparent);
}

.ppg-schema .pp-schema {
    margin: 0;
}

.ppg-schema .pp-schema__svg {
    width: 100%;
    height: auto;
    max-height: none;
}

.ppg-schema .pp-schema--vertical {
    max-width: min(100%, 620px);
    margin: 0 auto;
}

.ppg-schema .pp-schema--vertical .pp-schema__svg {
    max-height: min(78vh, 760px);
}

/* Textes plus lisibles en playground vertical uniquement */
.ppg-schema .pp-schema--vertical .pp-schema__node-chip {
    font-size: 12.5px;
    font-weight: 700;
}

.ppg-schema .pp-schema--vertical .pp-schema__edge-tag {
    font-size: 11px;
    font-weight: 700;
}

.ppg-schema .pp-schema__packet--seed,
.ppg-schema .pp-schema__key,
.ppg-schema .pp-schema__caption,
.ppg-schema .pp-schema__tip,
.ppg-schema .pp-schema__toolbar {
    display: none !important;
}

.ppg-drag-hint {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: color-mix(in srgb, var(--bleu-1) 10%, transparent);
}

.ppg-drag-hint[hidden] {
    display: none;
}

.ppg-drag-hint span {
    padding: 10px 16px;
    border: 1px solid var(--bleu-1);
    background: var(--blanc);
    color: var(--bleu-1);
    font-size: 0.875rem;
    font-weight: 600;
}

html.dark .ppg-drag-hint span {
    background: var(--color-surface);
}

/* ——— Pad dans le panneau Config ——— */
.ppg-pad--panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: transparent;
}

.ppg-presets {
    align-self: flex-start;
    flex-wrap: wrap;
}

/* Colonne gauche = triangle ; colonne droite = curseurs + path + configs */
.ppg-config-board {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 14px 16px;
    width: 100%;
}

.ppg-config-board__tri {
    flex: 1 1 52%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppg-config-board__tri .ppg-pad__svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.ppg-pad__svg--readonly {
    pointer-events: none;
}

.ppg-config-board__side {
    flex: 0 1 48%;
    min-width: 168px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppg-pad__controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.ppg-config-board__saves {
    min-width: 0;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--bleu-2-bordure, #343434);
}

.ppg-config-board__saves-title {
    margin: 4px 0 10px !important;
    font-size: 0.78rem !important;
}

.ppg-sliders {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    width: 100%;
}

.ppg-pad__route {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--bleu-1) 28%, var(--bleu-2-bordure, #343434));
    background: color-mix(in srgb, var(--bleu-1) 7%, transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ppg-pad__route[hidden] {
    display: none;
}

.ppg-pad__route-mode {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: var(--noir);
}

.ppg-pad__route-path {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--gris-texte, #5b6472);
    word-break: break-word;
}

.ppg-pad__tri {
    fill: color-mix(in srgb, var(--bleu-1) 10%, transparent);
    stroke: color-mix(in srgb, var(--bleu-1) 40%, transparent);
    stroke-width: 1.25;
}

.ppg-pad__spoke {
    fill: none;
    stroke: color-mix(in srgb, var(--bleu-1) 28%, transparent);
    stroke-width: 1;
    stroke-dasharray: 2.5 3.5;
}

.ppg-pad__handle {
    fill: var(--bleu-1);
    stroke: var(--blanc);
    stroke-width: 2;
}

html.dark .ppg-pad__handle {
    stroke: #0d1118;
}

.ppg-pad__corner {
    font-size: 10px;
    font-weight: 600;
    fill: var(--gris-texte, #5b6472);
}

html.dark .ppg-pad__corner {
    fill: var(--color-text-muted, #9aa4b2);
}

.ppg-slider {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
}

.ppg-slider__meta {
    display: contents;
}

.ppg-slider__meta > span {
    order: 1;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--noir);
    white-space: nowrap;
}

html.dark .ppg-slider__meta > span {
    color: var(--color-text);
}

.ppg-slider__input {
    order: 2;
    width: 100%;
    height: 3px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bleu-2-bordure);
    cursor: pointer;
}

.ppg-slider__meta output {
    order: 3;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gris-texte, #5b6472);
}

html.dark .ppg-slider__meta output {
    color: var(--color-text-muted, #9aa4b2);
}

.ppg-slider__input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    background: var(--bleu-1);
    border: none;
    cursor: pointer;
}

.ppg-slider__input::-moz-range-thumb {
    width: 11px;
    height: 11px;
    background: var(--bleu-1);
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.ppg-slider__input:focus-visible {
    outline: 2px solid var(--bleu-1);
    outline-offset: 4px;
}

html.dark .ppg-slider__input {
    background: rgba(219, 232, 255, 0.22);
}

html.dark .ppg-pad__route {
    border-color: color-mix(in srgb, var(--bleu-1) 35%, #2a2a2a);
    background: color-mix(in srgb, var(--bleu-1) 10%, transparent);
}

html.dark .ppg-pad__route-mode {
    color: var(--color-text);
}

html.dark .ppg-pad__route-path {
    color: var(--color-text-muted, #9aa4b2);
}

/* ——— Configurations sauvegardées ——— */
.ppg-saves {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ppg-saves__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
}

.ppg-config-board__saves .ppg-saves__btn {
    width: 100%;
    justify-content: center;
}

.ppg-saves__input {
    min-width: 0;
    height: 36px;
}

.ppg-saves__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    white-space: nowrap;
}

.ppg-saves__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ppg-saves__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 4px;
    align-items: stretch;
    border: 1px solid var(--bleu-2-bordure);
    background: var(--blanc);
}

html.dark .ppg-saves__item {
    background: var(--color-surface);
    border-color: rgba(219, 232, 255, 0.22);
}

.ppg-saves__apply {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--noir);
}

html.dark .ppg-saves__apply {
    color: var(--color-text);
}

.ppg-saves__apply:hover {
    background: color-mix(in srgb, var(--bleu-1) 8%, transparent);
}

.ppg-saves__apply strong {
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ppg-saves__apply span {
    font-size: 0.6875rem;
    color: var(--gris-texte, #5b6472);
    font-variant-numeric: tabular-nums;
}

html.dark .ppg-saves__apply span {
    color: var(--color-text-muted, #9aa4b2);
}

.ppg-saves__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid var(--bleu-2-bordure);
    background: transparent;
    color: var(--gris-texte, #5b6472);
    cursor: pointer;
}

html.dark .ppg-saves__delete {
    border-left-color: rgba(219, 232, 255, 0.22);
    color: var(--color-text-muted, #9aa4b2);
}

.ppg-saves__delete:hover {
    color: var(--bleu-1);
    background: color-mix(in srgb, var(--bleu-1) 8%, transparent);
}

.ppg-saves__empty {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gris-texte, #5b6472);
}

.ppg-saves__empty[hidden] {
    display: none;
}

html.dark .ppg-saves__empty {
    color: var(--color-text-muted, #9aa4b2);
}

/* Empilement uniquement sur très petit écran */
@media (max-width: 360px) {
    .ppg-config-board {
        flex-direction: column !important;
    }

    .ppg-config-board__tri .ppg-pad__svg {
        max-width: 220px;
    }

    .ppg-config-board__side {
        max-width: none;
        width: 100%;
    }
}

/* ——— Document qui circule ——— */
.ppg-doc__card {
    fill: var(--blanc);
    stroke: var(--bleu-1);
    stroke-width: 1.5;
}

html.dark .ppg-doc__card {
    fill: #10151f;
}

.ppg-doc__bars rect {
    fill: color-mix(in srgb, var(--bleu-1) 55%, transparent);
}

.ppg-doc__tag {
    font-size: 8px;
    font-weight: 700;
    fill: var(--bleu-1);
}

.ppg-doc__pulse {
    fill: none;
    stroke: var(--bleu-1);
    stroke-width: 1.5;
}

.ppg-schema .pp-schema.is-compose .pp-schema__edge.is-compose-off {
    opacity: 1;
    stroke: color-mix(in srgb, var(--pp-piece-ink, var(--pp-accent)) 22%, var(--blanc));
}

.ppg-schema .pp-schema.is-compose .pp-schema__edge.is-compose-on {
    opacity: 1;
    stroke: color-mix(in srgb, var(--pp-piece-ink, var(--pp-accent)) 78%, var(--noir));
}

.ppg-schema .pp-schema.is-compose .pp-schema__node.is-compose-off {
    opacity: 0.38;
}

.ppg-schema .pp-schema.is-compose .pp-schema__chip-layer > g.is-compose-off {
    opacity: 0.16;
}

.ppg-schema .pp-schema.is-compose .pp-schema__edge-tag.is-compose-off {
    opacity: 0.14;
}

.ppg-schema .pp-schema__edge-tag.is-answered,
.ppg-schema .pp-schema__edge-label.is-answered {
    font-weight: 700;
    fill: var(--bleu-1);
}

.ppg-schema .pp-schema__edge.is-taken {
    opacity: 1;
    stroke: var(--bleu-1);
    stroke-width: 2.4;
}

.ppg-schema .pp-schema__node.is-processing .pp-schema__hit {
    fill: color-mix(in srgb, var(--bleu-1) 12%, transparent);
}

@media (max-width: 900px) {
    .ppg-status {
        display: none;
    }
}

/* ==========================================================================
   AlphaEdge Pipeline — onglets AlphaDigit / AlphaAudio, scène du schéma
   dans la carte d'entrée, réglages de la pipeline et renvois depuis le Studio.
   ========================================================================== */
.playground-page--pipeline .playground-content {
    gap: 14px;
}

.ppl-head {
    display: flex;
    align-items: center;
    gap: 16px 20px;
    flex-wrap: wrap;
    min-width: 0;
}

.ppl-tabs {
    display: inline-flex;
    flex: none;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: var(--ae-radius-lg, 14px);
    background: var(--ae-surface-2, #f6f7f9);
}

.ppl-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 14px 6px 6px;
    border-radius: calc(var(--ae-radius-lg, 14px) - 4px);
    color: var(--ae-ink-muted, #6b6e7a);
    text-decoration: none;
    transition: background-color var(--ae-ease, 160ms ease), color var(--ae-ease, 160ms ease), box-shadow var(--ae-ease, 160ms ease);
}

.ppl-tab:hover {
    color: var(--ae-ink, #0c0c10);
}

.ppl-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus, rgba(1, 17, 59, 0.2));
}

.ppl-tab.is-active {
    background: var(--ae-surface, #fff);
    color: var(--ae-ink, #0c0c10);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 0 0 1px var(--ae-line, #e7e8ec);
}

.ppl-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.875rem;
}

.ppl-tab:not(.is-active) .ppl-tab-icon {
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 1px var(--ae-line, #e7e8ec);
}

.ppl-tab-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.ppl-tab-text strong {
    font-size: 0.875rem;
    font-weight: 650;
}

.ppl-tab-text small {
    font-size: 0.72rem;
    color: var(--ae-ink-muted, #6b6e7a);
}

.ppl-head-desc {
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Carte d'entrée : bascule « Pipeline » (schéma) / « Document | Audio » (aperçu réel). */
.playground-page--pipeline .playground-card-input > .playground-card-body {
    position: relative;
}

.ppl-view-bar {
    position: relative;
    z-index: 5;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    min-width: 0;
}

.ppl-view-switch {
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 10px;
    background: var(--ae-surface-2, #f6f7f9);
}

.ppl-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ae-ink-muted, #6b6e7a);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ae-ease, 160ms ease), color var(--ae-ease, 160ms ease);
}

.ppl-view-btn:hover {
    color: var(--ae-ink, #0c0c10);
}

.ppl-view-btn.is-active {
    background: var(--ae-surface, #fff);
    color: var(--ae-ink, #0c0c10);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 0 0 1px var(--ae-line, #e7e8ec);
}

.ppl-view-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus, rgba(1, 17, 59, 0.2));
}

.ppl-file {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.ppl-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 220px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--ae-blue-edge, #aac3f0);
    border-radius: var(--ae-radius-pill, 999px);
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.75rem;
    font-weight: 600;
}

.ppl-file-chip[hidden] {
    display: none;
}

.ppl-file-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppl-import.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    height: 30px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

.ppl-schema-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.ppl-schema-view .ppg-status {
    flex: none;
    text-align: center;
    white-space: normal;
}

.ppg-status[hidden] {
    display: none !important;
}

.playground-page--pipeline .playground-card-body.is-dragover .ppg-schema {
    border-radius: var(--ae-radius-lg, 14px);
    outline: 2px dashed var(--ae-accent-ring, #c7d7f5);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--ae-accent-soft, #eef4ff) 70%, transparent);
}

/* Vue « Pipeline » : seul le schéma est affiché (l'aperçu reste monté pour le moteur). */
.playground-card-input[data-ppl-view="pipeline"] > .playground-card-body > :not(.ppl-view-bar):not(.ppl-schema-view):not(input) {
    display: none !important;
}

.playground-card-input[data-ppl-view="input"] .ppl-schema-view {
    display: none !important;
}

/* Réglages de la pipeline : en-tête de groupe légèrement accentué */
.ppl-settings > .playground-config-group-label i {
    color: var(--ae-accent, #01113b);
}

/* Studio → Pipeline : renvoi vers les réglages avancés */
.ppl-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px solid var(--ae-blue-edge, #aac3f0);
    border-radius: var(--ae-radius-lg, 14px);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--ae-blue-glow, #c3d7fb) 0%, transparent 60%),
        var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
    text-decoration: none;
    transition: transform var(--ae-ease, 160ms ease), box-shadow var(--ae-ease, 160ms ease);
}

.ppl-callout:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -18px var(--ae-blue-shadow, rgba(1, 18, 60, 0.4));
}

.ppl-callout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus, rgba(1, 17, 59, 0.2));
}

.ppl-callout-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ae-blue-deep, #01123c);
    color: var(--ae-blue-fill, #dbe8ff);
    font-size: 0.85rem;
}

.ppl-callout-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.35;
}

.ppl-callout-text strong {
    font-size: 0.8125rem;
    font-weight: 650;
}

.ppl-callout-text small {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--ae-blue-deep, #01123c) 70%, transparent);
}

.ppl-callout-arrow {
    flex: none;
    font-size: 0.8rem;
    transition: transform var(--ae-ease, 160ms ease);
}

.ppl-callout:hover .ppl-callout-arrow {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .ppl-head {
        align-items: stretch;
    }

    .ppl-tabs {
        width: 100%;
    }

    .ppl-tab {
        flex: 1 1 0;
    }

    .ppl-schema-view .ppg-status {
        display: block;
    }
}

/* Mise en page Pipeline : en-tête d'onglets puis la bande playground sur toute la hauteur restante. */
.playground-page--pipeline .playground-content {
    justify-content: center;
}

.playground-page--pipeline .ppl-head {
    flex: none;
    padding: 20px var(--pg-pad, 24px) 16px;
}

/* Même bande que Studio : 90 % de la hauteur, centrée (espace égal en haut et en bas) */
.playground-page--pipeline .playground-layout {
    flex: 0 1 auto;
    height: var(--pg-band-h, 90%);
    max-height: var(--pg-band-h, 90%);
    padding-top: 0;
    padding-bottom: 0;
}

.playground-card-input[data-ppl-view="pipeline"] > .playground-card-body {
    justify-content: flex-start;
}

.playground-page--pipeline .ppl-schema-view {
    flex: 1 1 auto;
    justify-content: center;
    overflow: auto;
}

/* Vue « Document | Audio » : le moteur affiche déjà le nom du fichier et « Changer ». */
.playground-card-input[data-ppl-view="input"] .ppl-file {
    display: none;
}

/* Schéma : tient dans la hauteur de la bande (le statut reste visible sous le schéma). */
.playground-page--pipeline .ppl-schema-view .ppg-schema {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playground-page--pipeline .ppl-schema-view .ppg-schema .pp-schema--vertical {
    width: 100%;
}

.playground-page--pipeline .ppl-schema-view .ppg-schema .pp-schema--vertical .pp-schema__svg {
    max-height: calc(100vh - 290px);
}

/* Quatre onglets (dont Extraction) + « Lancer » sur une seule ligne */
.playground-page--pipeline .playground-card-head--side .playground-side-tab {
    padding-left: 11px;
    padding-right: 11px;
}

/* ——— Mes configurations : section en bas du panneau ——— */
.playground-page .ppl-saves-group {
    gap: 10px;
}

.ppl-saves-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px 0 10px;
}

.ppl-saves-head .playground-config-group-label {
    padding: 0;
}

.ppl-saves-save.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

.ppl-saves-save[aria-expanded="true"] {
    border-color: var(--ae-blue-edge, #aac3f0);
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
}

.ppl-saves-group .ppg-saves__form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
}

.ppl-saves-group .ppg-saves__form[hidden] {
    display: none;
}

.ppl-saves-group .ppg-saves__input,
.ppl-saves-group .ppg-saves__btn {
    height: 34px;
}

.ppl-saves-group .ppg-saves__list {
    flex-direction: column;
    gap: 6px;
}

.ppl-saves-group .ppg-saves__list[hidden] {
    display: none;
}

.ppl-saves-group .ppg-saves__item {
    border-radius: 10px;
    overflow: hidden;
}

.ppl-saves-group .ppg-saves__item.is-active {
    border-color: var(--ae-blue-edge, #aac3f0);
    background: var(--ae-blue-fill, #dbe8ff);
}

.ppl-saves-group .ppg-saves__item.is-active .ppg-saves__apply {
    color: var(--ae-blue-deep, #01123c);
}

html.dark .ppl-saves-group .ppg-saves__item.is-active,
html.dark .ppl-saves-save[aria-expanded="true"] {
    background: rgba(170, 195, 240, 0.16);
    border-color: rgba(170, 195, 240, 0.45);
    color: var(--color-text);
}

/* ——— Arbitrage : préréglages + zone « Expert » dépliante ——— */
.ppl-custom-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--ae-blue-edge, #aac3f0);
    border-radius: var(--ae-radius, 10px);
    background: color-mix(in srgb, var(--ae-blue-fill, #dbe8ff) 55%, transparent);
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.78rem;
    line-height: 1.45;
}

.ppl-custom-hint[hidden] {
    display: none;
}

.ppl-custom-hint i {
    margin-top: 2px;
}

html.dark .ppl-custom-hint {
    background: rgba(170, 195, 240, 0.08);
    border-color: rgba(170, 195, 240, 0.4);
    color: var(--color-text);
}

/* ——— Sélecteurs : arbitrage (gauche) + réglage entreprise (droite) ——— */
.ppl-arbitrage {
    gap: 10px;
}

.ppl-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.ppl-picker {
    position: relative;
    min-width: 0;
}

.ppl-picker[hidden] {
    display: none;
}

.ppl-picker-btn {
    --ppl-accent: var(--ae-blue-deep, #01123c);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 7px 10px 7px 8px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 12px;
    background: var(--ae-surface, #fff);
    color: var(--ae-ink, #0c0c10);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ppl-picker-btn:hover {
    border-color: var(--ae-blue-edge, #aac3f0);
}

.ppl-picker-btn[aria-expanded="true"],
.ppl-picker-btn:focus-visible {
    outline: none;
    border-color: var(--ae-blue-edge, #aac3f0);
    /* Anneau intérieur : un anneau extérieur est rogné par le panneau qui défile */
    box-shadow: inset 0 0 0 1px var(--ae-blue-edge, #aac3f0);
}

.ppl-picker-btn.is-muted .ppl-picker-text strong {
    color: var(--ae-ink-muted, #6b6e7a);
    font-weight: 550;
}

.ppl-picker-btn.is-selected {
    border-color: color-mix(in srgb, var(--ppl-accent) 45%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--ppl-accent) 9%, var(--ae-surface, #fff)), var(--ae-surface, #fff) 70%);
}

.ppl-picker-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.85rem;
}

.ppl-picker-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ppl-picker-text small {
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ppl-picker-text strong {
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppl-picker-chevron {
    flex: none;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.7rem;
    transition: transform 160ms ease;
}

.ppl-picker-btn[aria-expanded="true"] .ppl-picker-chevron {
    transform: rotate(180deg);
}

/* Tuile logo : se teinte avec la couleur dominante du logo */
.ppl-company-logo {
    --ppl-accent: #64748b;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ppl-accent) 35%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--ppl-accent) 13%, #fff);
    color: var(--ppl-accent);
    font-size: 0.9rem;
    font-weight: 700;
}

.ppl-company-logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.ppl-company-logo.is-none {
    border-style: dashed;
}

.ppl-company-logo--lg {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    font-size: 1.4rem;
}

.ppl-company-logo--lg img {
    padding: 8px;
}

/* Menus déroulants */
.ppl-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: max(100%, 280px);
    max-height: 360px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 12px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 18px 40px -18px rgba(1, 18, 60, 0.35);
    transform-origin: top left;
    animation: ppl-menu-in 160ms ease;
}

.ppl-picker-menu--right {
    right: 0;
    left: auto;
    transform-origin: top right;
}

.ppl-picker-menu[hidden] {
    display: none;
}

@keyframes ppl-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.ppl-menu-item {
    display: flex;
    align-items: stretch;
    border-radius: 9px;
}

.ppl-menu-item:hover,
.ppl-menu-item.is-active {
    background: var(--ae-blue-fill, #eef4ff);
}

.ppl-menu-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ppl-menu-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}

.ppl-menu-text strong {
    font-size: 0.82rem;
    font-weight: 650;
}

.ppl-menu-text small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.72rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ppl-menu-check {
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.72rem;
}

.ppl-menu-lead {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bleu-1, #2563eb), var(--orange-1, #f97316));
    color: #fff;
    font-size: 0.78rem;
}

.ppl-menu-item .ppl-company-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.ppl-menu-edit {
    flex: none;
    width: 32px;
    border: 0;
    border-radius: 0 9px 9px 0;
    background: none;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.72rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
}

.ppl-menu-item:hover .ppl-menu-edit,
.ppl-menu-edit:focus-visible {
    opacity: 1;
}

.ppl-menu-edit:hover {
    color: var(--ae-blue-deep, #01123c);
}

.ppl-menu-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--ae-line, #e7e8ec);
}

.ppl-menu-empty {
    margin: 0;
    padding: 10px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.76rem;
    line-height: 1.4;
}

.ppl-menu-add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 9px 10px;
    border: 1px dashed var(--ae-blue-edge, #aac3f0);
    border-radius: 9px;
    background: none;
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ppl-menu-add:hover {
    background: var(--ae-blue-fill, #eef4ff);
}

/* Carte récapitulative sous les sélecteurs */
.ppl-source-card {
    --ppl-accent: var(--ae-blue-deep, #01123c);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 12px;
    background: var(--ae-surface-2, #fafbfd);
}

.ppl-source-card[hidden] {
    display: none;
}

.ppl-source-card.is-company {
    border-color: color-mix(in srgb, var(--ppl-accent) 30%, transparent);
    border-left: 3px solid var(--ppl-accent);
}

.ppl-source-desc {
    margin: 0;
    color: var(--ae-ink-soft, #3b3e48);
    font-size: 0.78rem;
    line-height: 1.45;
}

.ppl-source-desc[hidden],
.ppl-source-bars[hidden] {
    display: none;
}

.ppl-source-bars {
    display: grid;
    gap: 5px;
}

.ppl-wbar {
    display: grid;
    grid-template-columns: 62px 1fr 26px;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--ae-ink-muted, #6b6e7a);
}

.ppl-wbar i {
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(1, 18, 60, 0.08);
}

.ppl-wbar b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ae-blue-deep, #01123c);
    transition: width 260ms ease;
}

.ppl-wbar--speed b { background: #0ea5e9; }
.ppl-wbar--cost b { background: #f59e0b; }
.ppl-wbar--quality b { background: #8b5cf6; }

.ppl-wbar em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ae-ink, #0c0c10);
}

/* ——— Essai gratuit : compteur et barre collés ——— */
.ppl-trial {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 12px;
    background: var(--ae-surface, #fff);
}

.ppl-trial.playground-hidden {
    display: none;
}

.ppl-trial-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
}

.ppl-trial-head strong {
    font-weight: 650;
}

.ppl-trial-head strong i {
    margin-right: 4px;
    color: var(--orange-1, #f97316);
}

.ppl-trial-head span {
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.ppl-trial .ppl-trial-progress {
    height: 6px;
}

.ppl-trial-link {
    align-self: flex-end;
    color: var(--bleu-1, #2563eb);
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
}

.ppl-trial-link:hover {
    text-decoration: underline;
}

.ppl-trial-link i {
    margin-left: 3px;
    font-size: 0.66rem;
}

/* ——— Modales d'administration ——— */
.ppl-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 12, 28, 0.42);
    opacity: 0;
    transition: opacity 180ms ease;
}

.ppl-modal.is-open {
    opacity: 1;
}

.ppl-modal-panel {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 30px 70px -30px rgba(1, 18, 60, 0.55);
    transform: translateY(10px) scale(0.98);
    transition: transform 200ms ease;
}

.ppl-modal.is-open .ppl-modal-panel {
    transform: none;
}

.ppl-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ae-line, #e7e8ec);
}

.ppl-modal-head h3 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1rem;
}

.ppl-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
}

.ppl-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ae-ink-muted, #6b6e7a);
    cursor: pointer;
}

.ppl-modal-close:hover {
    background: var(--ae-blue-fill, #eef4ff);
}

.ppl-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    overflow: auto;
}

.ppl-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ae-line, #e7e8ec);
}

.ppl-modal-foot .ppl-danger {
    margin-right: auto;
    color: #dc2626;
}

.ppl-modal-foot button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ppl-modal-error {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.78rem;
}

.ppl-modal-error[hidden] {
    display: none;
}

.ppl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ppl-field-label {
    font-size: 0.78rem;
    font-weight: 650;
}

.ppl-field-hint {
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.72rem;
    line-height: 1.4;
}

.ppl-field-hint[hidden] {
    display: none;
}

.ppl-textarea {
    min-height: 70px;
    resize: vertical;
    font: inherit;
}

.ppl-weights {
    padding: 10px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 12px;
}

.ppl-weights[hidden] {
    display: none;
}

.ppl-weights .ppg-pad__svg {
    cursor: crosshair;
    touch-action: none;
}

.ppl-weights .ppg-pad__handle {
    transition: cx 80ms linear, cy 80ms linear;
}

.ppl-mode-tabs {
    align-self: flex-start;
}

.ppl-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ppl-logo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ppl-logo-actions .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    font-size: 0.78rem;
}

.ppl-logo-actions .ghost-btn[hidden] {
    display: none;
}

.ppl-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--ae-ink-muted, #6b6e7a);
    cursor: pointer;
}

.ppl-color input {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.ppl-share-search {
    position: relative;
}

.ppl-share-search > i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.75rem;
    transform: translateY(-50%);
}

.ppl-share-search > input {
    width: 100%;
    padding-left: 30px;
}

.ppl-share-results {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 5;
    max-height: 220px;
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 10px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 14px 30px -16px rgba(1, 18, 60, 0.35);
}

.ppl-share-results[hidden] {
    display: none;
}

.ppl-share-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ppl-share-result:hover {
    background: var(--ae-blue-fill, #eef4ff);
}

.ppl-share-result span {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ppl-share-result strong {
    font-size: 0.8rem;
}

.ppl-share-result small {
    overflow: hidden;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.72rem;
    text-overflow: ellipsis;
}

.ppl-share-result.is-added i {
    color: #16a34a;
}

.ppl-share-result b,
.ppl-share-chip b {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.72rem;
}

.ppl-share-none {
    margin: 0;
    padding: 8px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.76rem;
}

.ppl-share-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ppl-share-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 4px 3px 3px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 99px;
    font-size: 0.75rem;
}

.ppl-share-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppl-share-chip b {
    width: 22px;
    height: 22px;
    font-size: 0.66rem;
}

.ppl-share-chip button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.66rem;
    cursor: pointer;
}

.ppl-share-chip button:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.ppl-share-empty {
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.74rem;
}

/* ——— Mode Custom : éditeur par blocs à la place du schéma ——— */
.ppl-builder-view {
    display: none;
}

.playground-card-input[data-ppl-custom="1"] .ppl-schema-view .ppg-schema {
    display: none;
}

.playground-card-input[data-ppl-custom="1"] .ppl-builder-view {
    display: flex;
    flex: 1 1 auto;
    min-height: 420px;
}

.playground-page--pipeline .playground-card-input[data-ppl-custom="1"] .ppl-schema-view {
    justify-content: flex-start;
    overflow: hidden;
}

.ppg-route-note.is-error {
    color: #b45309;
    font-weight: 600;
}

.ppb {
    gap: 12px;
    width: 100%;
    min-height: 0;
}

.ppb-addbar {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 30;
}

.ppb-add-btn {
    border-color: var(--ae-blue-edge, #aac3f0);
    color: var(--ae-blue-deep, #01123c);
}

.ppb-add-btn.is-active {
    background: var(--ae-blue-fill, #dbe8ff);
}

.ppb-palette {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 220px;
    max-height: min(70vh, 520px);
    padding: 12px 10px;
    overflow: auto;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 18px 40px -12px rgba(1, 18, 60, 0.45);
    isolation: isolate;
}

html.dark .ppb-palette {
    background-color: #1e1f24;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}

.ppb-palette[hidden] {
    display: none;
}

.ppb-palette-title {
    margin: 0 2px;
    font-size: 0.82rem;
    font-weight: 700;
}

.ppb-palette-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ppb-palette-label {
    margin: 0 2px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ppb-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 6px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 10px;
    background: var(--ae-surface, #fff);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.ppb-palette-item:hover,
.ppb-palette-item:focus-visible {
    outline: none;
    border-color: var(--ppb-c);
    box-shadow: 0 6px 14px -10px var(--ppb-c);
    transform: translateX(2px);
}

.ppb-palette-item:active {
    cursor: grabbing;
}

.ppb-palette-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppb-badge {
    flex: none;
    padding: 1px 6px;
    border-radius: 99px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.6rem;
    font-weight: 700;
}

/* Couleurs par famille de blocs */
.ppb-group--model { --ppb-c: #24439a; --ppb-soft: #dbe8ff; }
.ppb-group--detect { --ppb-c: #0f4c4a; --ppb-soft: #e3f6dc; }
.ppb-group--logic { --ppb-c: #4a5568; --ppb-soft: #edf0f4; }
.ppb-group--io { --ppb-c: #01123c; --ppb-soft: #e6e9f2; }
.ppb-group--extract { --ppb-c: #8a1f4f; --ppb-soft: #fbe6ef; }

html.dark .ppb-group--model { --ppb-c: #9db8f5; --ppb-soft: rgba(157, 184, 245, 0.15); }
html.dark .ppb-group--detect { --ppb-c: #bfe6a8; --ppb-soft: rgba(191, 230, 168, 0.13); }
html.dark .ppb-group--logic { --ppb-c: #b8c2d3; --ppb-soft: rgba(184, 194, 211, 0.13); }
html.dark .ppb-group--io { --ppb-c: #d7e3fb; --ppb-soft: rgba(215, 227, 251, 0.1); }
html.dark .ppb-group--extract { --ppb-c: #f2a7c8; --ppb-soft: rgba(242, 167, 200, 0.14); }

.ppb-block-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--ppb-soft);
    color: var(--ppb-c);
    font-size: 0.74rem;
}

.ppb-info {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ae-ink-muted, #9396a1);
    font-size: 0.78rem;
    cursor: help;
    transition: color 120ms ease, background 120ms ease;
}

.ppb-info:hover,
.ppb-info:focus-visible {
    outline: none;
    background: var(--ppb-soft, #eef4ff);
    color: var(--ppb-c, #01123c);
}

.ppb-stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 14px;
    background-color: var(--ae-surface, #fff);
    background-image: radial-gradient(circle, rgba(1, 18, 60, 0.11) 1px, transparent 1.2px);
    background-size: 18px 18px;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

.ppb-stage.is-drop {
    border-color: var(--ae-blue-edge, #aac3f0);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ae-blue-edge, #aac3f0) 60%, transparent);
}

.ppb-toolbar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    gap: 6px;
}

.ppb-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ae-surface, #fff) 92%, transparent);
    color: var(--ae-ink-soft, #3b3e48);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.ppb-tool:hover {
    border-color: var(--ae-blue-edge, #aac3f0);
    color: var(--ae-blue-deep, #01123c);
}

.ppb-scroller {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.ppb-canvas {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.ppb-links {
    position: absolute;
    inset: 0 auto auto 0;
    overflow: visible;
    pointer-events: none;
}

.ppb-link-g {
    pointer-events: stroke;
    cursor: pointer;
}

.ppb-link-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    pointer-events: stroke;
}

.ppb-link {
    fill: none;
    stroke: #8b93a7;
    stroke-width: 2;
    transition: stroke 140ms ease;
}

.ppb-arrow {
    fill: #8b93a7;
}

.ppb-link-g--yes .ppb-link,
.ppb-link-g--high .ppb-link {
    stroke: #16a34a;
}

.ppb-link-g--no .ppb-link,
.ppb-link-g--low .ppb-link {
    stroke: #e11d48;
    stroke-dasharray: 6 4;
}

.ppb-link--draft {
    stroke: var(--ae-blue-deep, #01123c);
    stroke-dasharray: 5 4;
    animation: ppb-dash 600ms linear infinite;
}

@keyframes ppb-dash {
    to { stroke-dashoffset: -18; }
}

.ppb-link-g:hover .ppb-link,
.ppb-link-g.is-selected .ppb-link {
    stroke-width: 3;
}

.ppb-link-del {
    opacity: 0;
    transition: opacity 120ms ease;
}

.ppb-link-del circle {
    fill: #fff;
    stroke: #e11d48;
    stroke-width: 1.5;
}

.ppb-link-del path {
    stroke: #e11d48;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.ppb-link-g:hover .ppb-link-del,
.ppb-link-g.is-selected .ppb-link-del {
    opacity: 1;
}

.ppb-link-g.is-taken .ppb-link {
    stroke: var(--ae-blue-deep, #01123c);
    stroke-width: 3.2;
    stroke-dasharray: 8 6;
    animation: ppb-dash 500ms linear infinite;
}

.ppb-node {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 172px;
    padding: 8px 8px 10px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-top: 3px solid var(--ppb-c);
    border-radius: 12px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 8px 20px -16px rgba(1, 18, 60, 0.5);
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.ppb-node.is-new {
    animation: ppb-pop-in 360ms cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes ppb-pop-in {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: none; }
}

.ppb-node.is-dragging {
    z-index: 5;
    cursor: grabbing;
    box-shadow: 0 18px 30px -18px rgba(1, 18, 60, 0.6);
    transform: scale(1.02);
}

.ppb-node.is-target {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppb-c) 40%, transparent);
}

.ppb-node.is-fixed {
    width: 150px;
    background: var(--ppb-soft);
}

.ppb-node-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ppb-node-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppb-node-del {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ae-ink-muted, #9396a1);
    font-size: 0.68rem;
    cursor: pointer;
    opacity: 0;
}

.ppb-node:hover .ppb-node-del {
    opacity: 1;
}

.ppb-node-del:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.ppb-node-sub {
    padding-left: 32px;
    margin-top: -6px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.68rem;
}

.ppb-node-select {
    width: 100%;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 7px;
    background: var(--ae-surface, #fff);
    color: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.ppb-node-range {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--ae-ink-muted, #6b6e7a);
}

.ppb-node-range input {
    width: 100%;
    accent-color: var(--ppb-c);
}

.ppb-node-range output {
    min-width: 34px;
    color: var(--ae-ink, #0c0c10);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ppb-port {
    position: relative;
    display: inline-flex;
    width: 12px;
    height: 12px;
    border: 2px solid var(--ppb-c);
    border-radius: 50%;
    background: var(--ae-surface, #fff);
}

.ppb-port--in {
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -6px;
}

.ppb-node-outs {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    display: flex;
    justify-content: center;
}

.ppb-node-outs.is-multi {
    justify-content: space-between;
    padding: 0 26px;
}

.ppb-port--out {
    cursor: crosshair;
    background: var(--ppb-c);
    transition: transform 120ms ease;
}

.ppb-port--out:hover {
    transform: scale(1.35);
}

/* Zone de préhension élargie : on vise facilement le port sans qu'il paraisse plus gros.
   Le point visible reste 12 px, mais la cible réelle fait 30 px de diamètre. */
.ppb-port--out::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.ppb-port--yes,
.ppb-port--high {
    border-color: #16a34a;
    background: #16a34a;
}

.ppb-port--no,
.ppb-port--low {
    border-color: #e11d48;
    background: #e11d48;
}

.ppb-port-label {
    position: absolute;
    top: 12px;
    left: 50%;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--ae-surface, #fff);
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}

.ppb-port--yes .ppb-port-label,
.ppb-port--high .ppb-port-label { color: #15803d; }

.ppb-port--no .ppb-port-label,
.ppb-port--low .ppb-port-label { color: #be123c; }

.ppb-canvas.is-linking .ppb-node:not(.is-fixed),
.ppb-canvas.is-linking .ppb-node[data-node="out"] {
    cursor: copy;
}

.ppb-drop-hint {
    position: absolute;
    inset: 50% auto auto 50%;
    padding: 8px 14px;
    border-radius: 99px;
    background: var(--ae-blue-deep, #01123c);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
    transition: opacity 160ms ease, transform 160ms ease;
}

.ppb-stage.is-drop .ppb-drop-hint {
    opacity: 0.9;
    transform: translate(-50%, -50%);
}

.ppb-ghost {
    position: fixed;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--ppb-c);
    border-radius: 10px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 16px 30px -14px rgba(1, 18, 60, 0.5);
    font-size: 0.78rem;
    font-weight: 600;
    pointer-events: none;
    transform: translate(-30px, -50%) rotate(-2deg);
}

/* Exécution : les blocs du parcours s'allument */
.ppb.is-running .ppb-node {
    opacity: 0.45;
}

.ppb.is-running .ppb-node.is-visited {
    opacity: 1;
}

.ppb-node.is-current {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppb-c) 35%, transparent), 0 14px 26px -16px var(--ppb-c);
    transform: translateY(-2px);
}

.ppb-node.is-processing {
    animation: ppb-processing 1.1s ease-in-out infinite;
}

@keyframes ppb-processing {
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ppb-c) 18%, transparent), 0 14px 26px -16px var(--ppb-c); }
}

.ppb.is-locked .ppb-palette {
    opacity: 0.55;
    pointer-events: none;
}

.ppb.is-locked .ppb-node {
    cursor: default;
}

/* Bulle « info » : exemple animé */
.ppb-pop {
    --ppb-c: #01123c;
    position: fixed;
    z-index: 3100;
    width: 290px;
    padding: 12px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 14px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 24px 50px -24px rgba(1, 18, 60, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92) translateY(4px);
    clip-path: inset(0 0 100% 0 round 14px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, 1.2, .4, 1), clip-path 260ms ease;
}

.ppb-pop.is-open {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0 round 14px);
}

.ppb-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.ppb-pop-desc {
    margin: 8px 0 10px;
    color: var(--ae-ink-soft, #3b3e48);
    font-size: 0.76rem;
    line-height: 1.45;
}

.ppb-pop-caption {
    margin: 8px 0 0;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.7rem;
    font-style: italic;
    line-height: 1.4;
}

.ppb-viz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: var(--ae-surface-2, #f5f7fb);
}

.ppb-viz-arrow {
    color: var(--ae-ink-muted, #6b6e7a);
    font-weight: 700;
    animation: ppb-arrow 1.2s ease-in-out infinite;
}

@keyframes ppb-arrow {
    50% { transform: translateX(3px); }
}

/* Mini page : en-tête, colonne, textes, image, tableau, pied de page */
.ppb-viz-page {
    position: relative;
    width: 116px;
    height: 150px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px -6px rgba(1, 18, 60, 0.4);
}

.ppb-viz-zone {
    position: absolute;
    display: block;
    border-radius: 2px;
    background: #e5e8ef;
    outline: 1.5px solid transparent;
    outline-offset: 1px;
}

.ppb-viz-header { top: 6px; left: 6px; right: 6px; height: 12px; background: #cbd3e1; }
.ppb-viz-aside { top: 24px; left: 6px; width: 12px; bottom: 22px; background: #dde3ee; }
.ppb-viz-zone.ppb-viz-text { left: 24px; right: 6px; height: 14px; display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; }
.ppb-viz-zone.ppb-viz-text { background: repeating-linear-gradient(#e5e8ef 0 3px, transparent 3px 6px); }
.ppb-viz-t1 { top: 24px; }
.ppb-viz-t2 { top: 42px; }
.ppb-viz-t3 { top: 60px; }
.ppb-viz-image { top: 80px; left: 24px; width: 36px; height: 28px; background: linear-gradient(135deg, #bfdbfe, #c7d2fe); }
.ppb-viz-table { top: 80px; left: 64px; right: 6px; height: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: #cbd3e1; }
.ppb-viz-table i { background: #fff; }
.ppb-viz-footer { bottom: 6px; left: 6px; right: 6px; height: 8px; background: #dde3ee; }

.ppb-viz-page--words .ppb-viz-zone.ppb-viz-text,
.ppb-viz-page--lines .ppb-viz-zone.ppb-viz-text {
    background: none;
}

.ppb-viz-word {
    display: block;
    height: 4px;
    margin-top: 1px;
    border-radius: 1px;
    background: #cbd3e1;
    outline: 1px solid transparent;
    animation: ppb-word 2.4s ease-in-out infinite;
}

@keyframes ppb-word {
    0%, 15% { outline-color: transparent; }
    25%, 80% { outline-color: #0d9488; background: #99f6e4; }
    100% { outline-color: transparent; }
}

.ppb-viz-page--lines .ppb-viz-zone.ppb-viz-text {
    animation: ppb-line 2.4s ease-in-out infinite;
}

.ppb-viz-page--lines .ppb-viz-word {
    animation: none;
}

.ppb-viz-page--lines .ppb-viz-t2 { animation-delay: 0.4s; }
.ppb-viz-page--lines .ppb-viz-t3 { animation-delay: 0.8s; }

@keyframes ppb-line {
    0%, 15% { outline-color: transparent; }
    30%, 80% { outline-color: #0d9488; background: rgba(13, 148, 136, 0.12); }
    100% { outline-color: transparent; }
}

.ppb-viz-page--layout .ppb-viz-zone {
    animation: ppb-zone 3.2s ease-in-out infinite;
}

.ppb-viz-page--layout .ppb-viz-aside { animation-delay: 0.2s; }
.ppb-viz-page--layout .ppb-viz-t1 { animation-delay: 0.4s; }
.ppb-viz-page--layout .ppb-viz-t2 { animation-delay: 0.5s; }
.ppb-viz-page--layout .ppb-viz-t3 { animation-delay: 0.6s; }
.ppb-viz-page--layout .ppb-viz-image { animation-delay: 0.8s; }
.ppb-viz-page--layout .ppb-viz-table { animation-delay: 1s; }
.ppb-viz-page--layout .ppb-viz-footer { animation-delay: 1.2s; }

@keyframes ppb-zone {
    0%, 10% { outline-color: transparent; }
    25%, 85% { outline-color: #0d9488; }
    100% { outline-color: transparent; }
}

.ppb-viz-page--table .ppb-viz-table,
.ppb-viz-page--image .ppb-viz-image,
.ppb-viz-page--header .ppb-viz-header,
.ppb-viz-page--footer .ppb-viz-footer,
.ppb-viz-page--aside .ppb-viz-aside,
.ppb-viz-page--text .ppb-viz-text {
    animation: ppb-focus 1.6s ease-in-out infinite;
}

.ppb-viz-page--table .ppb-viz-zone:not(.ppb-viz-table),
.ppb-viz-page--image .ppb-viz-zone:not(.ppb-viz-image),
.ppb-viz-page--header .ppb-viz-zone:not(.ppb-viz-header),
.ppb-viz-page--footer .ppb-viz-zone:not(.ppb-viz-footer),
.ppb-viz-page--aside .ppb-viz-zone:not(.ppb-viz-aside),
.ppb-viz-page--text .ppb-viz-zone:not(.ppb-viz-text) {
    opacity: 0.35;
}

@keyframes ppb-focus {
    0%, 100% { outline-color: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35); }
    50% { outline-color: #16a34a; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

.ppb-viz-forks {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.ppb-viz-forks span {
    padding: 3px 7px;
    border-radius: 6px;
    animation: ppb-fade 2.4s ease-in-out infinite;
}

.ppb-viz-forks .is-yes { background: #dcfce7; color: #15803d; }
.ppb-viz-forks .is-no { background: #ffe4e6; color: #be123c; animation-delay: 1.2s; }

@keyframes ppb-fade {
    0%, 100% { opacity: 0.55; }
    40%, 60% { opacity: 1; }
}

.ppb-viz-scan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px -6px rgba(1, 18, 60, 0.4);
    font-family: Georgia, serif;
    font-size: 0.6rem;
    filter: blur(0.4px) contrast(0.85);
    transform: rotate(-2deg);
}

.ppb-viz-scan.is-hand {
    font-family: "Segoe Script", "Bradley Hand", cursive;
    font-size: 0.66rem;
}

.ppb-viz-out {
    max-width: 120px;
}

.ppb-viz > .ppb-viz-out code {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    background: #0f172a;
    color: #a5f3fc;
    font-size: 0.6rem;
    line-height: 1.4;
    white-space: normal;
    animation: ppb-type 2.4s steps(20) infinite;
}

.ppb-viz > .ppb-viz-out.is-before code {
    background: #fff1f2;
    color: #be123c;
    text-decoration: line-through;
    animation: none;
}

.ppb-viz > .ppb-viz-out.is-after code {
    background: #dcfce7;
    color: #15803d;
}

@keyframes ppb-type {
    0% { clip-path: inset(0 100% 0 0); }
    60%, 100% { clip-path: inset(0 0 0 0); }
}

.ppb-viz-gauge {
    position: relative;
    flex: 1 1 100%;
    height: 10px;
    margin: 14px 4px 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, #fecdd3, #fde68a 55%, #bbf7d0);
}

.ppb-viz-gauge-fill {
    position: absolute;
    top: -3px;
    left: 0;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--ae-blue-deep, #01123c);
    box-shadow: 0 2px 6px rgba(1, 18, 60, 0.4);
    animation: ppb-gauge 3s ease-in-out infinite;
}

@keyframes ppb-gauge {
    0%, 100% { left: 64%; }
    50% { left: 92%; }
}

.ppb-viz-gauge-mark {
    position: absolute;
    top: -6px;
    width: 2px;
    height: 22px;
    background: #01123c;
}

.ppb-viz-gauge-mark::after {
    content: attr(data-label);
    position: absolute;
    top: -15px;
    left: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}

.ppb-viz-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 46px;
}

.ppb-viz-wave i {
    width: 4px;
    border-radius: 2px;
    background: #2563eb;
    animation: ppb-wave 1.2s ease-in-out infinite;
}

.ppb-viz-wave i.spk-a { background: #2563eb; }
.ppb-viz-wave i.spk-b { background: #f97316; }

@keyframes ppb-wave {
    50% { transform: scaleY(0.55); }
}

html.dark .ppb-palette,
html.dark .ppl-source-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(219, 232, 255, 0.14);
}

html.dark .ppb-stage {
    background-color: var(--color-surface, #0f141d);
    background-image: radial-gradient(circle, rgba(219, 232, 255, 0.12) 1px, transparent 1.2px);
    border-color: rgba(219, 232, 255, 0.14);
}

html.dark .ppb-node,
html.dark .ppb-palette-item,
html.dark .ppb-pop,
html.dark .ppl-picker-btn,
html.dark .ppl-picker-menu,
html.dark .ppl-modal-panel,
html.dark .ppl-trial,
html.dark .ppl-share-results,
html.dark .ppb-node-select,
html.dark .ppb-tool {
    background: var(--color-surface, #121826);
    border-color: rgba(219, 232, 255, 0.16);
    color: var(--color-text, #e6e9f2);
}

html.dark .ppb-node.is-fixed {
    background: rgba(219, 232, 255, 0.08);
}

html.dark .ppb-viz {
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1100px) {
    .ppb {
        flex-direction: column;
    }

    .ppb-palette {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ppb-palette-group {
        flex: 1 1 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppb-pop,
    .ppb-viz *,
    .ppb-link-g.is-taken .ppb-link,
    .ppb-node.is-processing {
        animation: none !important;
        transition: none !important;
    }
}

/* Modèle de remplacement (modèle de la route disponible sur demande) */
.ppg-route-note {
    min-height: 1.4em;
    margin: -4px 0 0;
    text-align: center;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.75rem;
    line-height: 1.4;
}

.ppg-route-note[hidden] {
    display: none !important;
}

/* Mode Custom : messages affichés en bas du canevas (à la place de l'ancienne légende) */
.ppg-route-note.ppg-route-note--canvas {
    flex: none;
    min-height: 0;
    margin: 0;
    padding: 6px 10px;
    border-top: 1px solid var(--ae-line, #e7e8ec);
    background: var(--ae-surface, #fff);
    font-size: 0.72rem;
}

/* ——— Chargement : on masque le schéma tant que la pipeline n'est pas initialisée (évite le flash de l'ancien rendu) ——— */
@keyframes ppl-reveal {
    to { visibility: visible; }
}

.playground-card-input[data-ppl-view]:not([data-ppl-ready]) .ppl-schema-view {
    visibility: hidden;
    animation: ppl-reveal 0s linear 2s forwards;
}

/* ——— Vue « Document | Audio » : la barre d'onglets reste en haut, la zone d'envoi prend la suite ——— */
.playground-page--pipeline .playground-card-input[data-ppl-view="input"] > .playground-card-body {
    justify-content: flex-start;
    align-items: stretch;
}

.playground-page--pipeline .playground-card-input[data-ppl-view="input"] > .playground-card-body--empty-upload .playground-dropzone {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* ——— Audio : même gabarit que Document en vue Pipeline ——— */
.playground-page--pipeline .playground-layout > .playground-card-input[data-ppl-view="pipeline"] > .playground-card-body.playground-card-body--has-audio-source {
    padding: 0;
    gap: 0;
}

/* Vue « Audio » : même gabarit que l'éditeur (pas de retrait intérieur) */
.playground-page--pipeline .playground-layout > .playground-card-input[data-ppl-view="input"] > .playground-card-body.playground-card-body--has-audio-source {
    padding: 0;
    gap: 12px;
}

.playground-page--pipeline .playground-card-input[data-ppl-view="input"] > .playground-card-body--has-audio-source > .ppl-view-bar {
    margin-bottom: 0;
}

/* Bascule Pipeline / Document à droite (fichier éventuel à gauche) */
.ppl-view-bar .ppl-view-switch {
    margin-left: auto;
}

/* ——— Mode Custom : le canevas descend jusqu'en bas (plus de texte sous l'éditeur) ——— */
.playground-card-input[data-ppl-custom="1"] .ppl-schema-view > .ppg-status {
    display: none !important;
}

.playground-card-input[data-ppl-custom="1"] .ppl-schema-view {
    gap: 0;
}

.playground-card-input[data-ppl-custom="1"] .ppl-builder-view {
    min-height: 0;
}

/* ——— Menu « Ajouter » : fond plein (thème clair / sombre) ——— */
.ppb .ppb-palette {
    background: #ffffff !important;
    opacity: 1;
    backdrop-filter: none;
}

html.dark .ppb .ppb-palette,
body.dark .ppb .ppb-palette,
[data-theme="dark"] .ppb .ppb-palette {
    background: #1e1f24 !important;
    border-color: rgba(255, 255, 255, 0.12);
}

/* ——— Répartition : un peu plus de place pour la pipeline (gauche) ——— */
.playground-page--pipeline .playground-layout {
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
}

/* Séparateur central : toute la hauteur, aligné sur la nouvelle répartition */
.playground-page--pipeline .playground-layout::after {
    left: calc(
        var(--pg-pad, 24px)
        + (100% - 2 * var(--pg-pad, 24px) - var(--pg-gap, 48px)) * 0.52
        + var(--pg-gap, 48px) / 2
    );
}

/* ——— Essai gratuit : premier bloc du panneau, angles droits ——— */
.playground-page .playground-config-group--launch {
    margin: 0;
    padding: 0;
}

.playground-page .ppl-trial,
html.dark .playground-page .ppl-trial {
    margin: 0;
    padding: 12px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.playground-page .ppl-trial .ppl-trial-progress,
.playground-page .ppl-trial .ppl-trial-progress > span {
    border-radius: 0;
}

/* ——— Mes configurations : liste puis bouton d'ajout pleine largeur ——— */
.ppl-saves-head {
    padding: 4px 0 2px;
}

.ppl-saves-group .ppg-saves__empty {
    margin: 0;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.78rem;
}

.ppl-saves-group .ppg-saves__empty[hidden] {
    display: none;
}

.ppl-saves-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px dashed var(--ae-line-strong, #c9ccd6);
    border-radius: 10px;
    background: transparent;
    color: var(--ae-ink-soft, #3b3e48);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.ppl-saves-save:hover,
.ppl-saves-save:focus-visible {
    outline: none;
    border-color: var(--ae-blue-edge, #aac3f0);
    background: color-mix(in srgb, var(--ae-blue-fill, #dbe8ff) 45%, transparent);
    color: var(--ae-blue-deep, #01123c);
}

.ppl-saves-save[aria-expanded="true"] {
    display: none;
}

html.dark .ppl-saves-save {
    border-color: rgba(219, 232, 255, 0.22);
    color: var(--color-text, #e6e9f2);
}

html.dark .ppl-saves-save:hover,
html.dark .ppl-saves-save:focus-visible {
    border-color: rgba(170, 195, 240, 0.55);
    background: rgba(170, 195, 240, 0.08);
    color: var(--color-text, #e6e9f2);
}

.ppl-saves-group .ppg-saves__form:not([hidden]) {
    display: grid;
}

/* Bloc indisponible (ex. Score de confiance désactivé dans les réglages) */
.ppb-palette-item.is-disabled {
    opacity: 0.45;
    filter: grayscale(1);
    cursor: not-allowed;
}

.ppb-palette-item.is-disabled:hover,
.ppb-palette-item.is-disabled:focus-visible {
    border-color: var(--ae-line, #e2e4ea);
    box-shadow: none;
    transform: none;
}

.ppb-palette-item.is-disabled .ppb-info {
    cursor: help;
}

/* Formulaire « Enregistrer » : champ + boutons alignés, focus sans débordement (évite la bordure rognée) */
.ppl-saves-group .ppg-saves__form:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.ppl-saves-group .ppg-saves__input,
.ppl-saves-group .ppg-saves__btn {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    margin: 0;
    border-radius: 10px;
    font-size: 0.8125rem;
}

.ppl-saves-group .ppg-saves__input {
    width: 100%;
    padding: 0 12px;
}

body .ppl-saves-group .ppg-saves__input:focus,
body .ppl-saves-group .ppg-saves__input:focus-visible {
    outline: none;
    border-color: #4a6fe0 !important;
    box-shadow: inset 0 0 0 1px #4a6fe0 !important;
}

.ppl-saves-group .ppg-saves__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    box-shadow: none !important;
    transform: none !important;
}

.ppl-saves-group .ppg-saves__btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--ae-blue-edge, #aac3f0);
}

/* Compte avec solde : pas d'essai gratuit, simple mention « Aucune clé API » */
.ppl-no-key {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.8rem;
}

.ppl-no-key i {
    font-size: 0.75rem;
}

.ppl-no-key a {
    margin-left: auto;
    color: var(--bleu-1, #2563eb);
    font-weight: 600;
    text-decoration: none;
}

.ppl-no-key a:hover {
    text-decoration: underline;
}

.ppl-no-key a i {
    margin-left: 3px;
    font-size: 0.66rem;
}

.playground-page .ppl-no-key {
    padding: 12px 0 0;
}

/* ——— Modale arbitrage / entreprise : curseurs plus grands ——— */
.ppl-weights .ppg-sliders {
    gap: 16px;
}

.ppl-weights .ppg-slider {
    grid-template-columns: 78px minmax(0, 1fr) 40px;
    gap: 12px;
}

.ppl-weights .ppg-slider__meta > span,
.ppl-weights .ppg-slider__meta output {
    font-size: 0.82rem;
}

.ppl-weights .ppg-slider__input {
    height: 6px;
    border-radius: 99px;
}

.ppl-weights .ppg-slider__input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(1, 18, 60, 0.35);
}

.ppl-weights .ppg-slider__input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(1, 18, 60, 0.35);
}

/* ——— Onglets de langue FR / EN ——— */
.ppl-lang {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppl-lang-tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ae-line, #e7e8ec);
    border-radius: 10px;
    background: var(--ae-surface-2, #f6f7f9);
}

.ppl-lang-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ae-ink-muted, #6b6e7a);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.ppl-lang-tab.is-active {
    background: var(--ae-surface, #fff);
    color: var(--ae-ink, #0c0c10);
    box-shadow: 0 1px 3px rgba(1, 18, 60, 0.12);
}

.ppl-lang-code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
    font-size: 0.66rem;
    font-weight: 700;
}

.ppl-lang-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppl-lang-pane[hidden] {
    display: none;
}

html.dark .ppl-lang-tabs {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(219, 232, 255, 0.16);
}

html.dark .ppl-lang-tab.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text, #e6e9f2);
}

html.dark .ppl-lang-code {
    background: rgba(170, 195, 240, 0.18);
    color: var(--color-text, #e6e9f2);
}

/* ——— Plus jamais l'ancien schéma : arbitrages et réglages entreprise dessinés avec les blocs ——— */
.playground-card-input .ppl-schema-view .ppg-schema {
    display: none !important;
}

.ppl-viewer-view {
    display: none;
}

.playground-card-input[data-ppl-custom="0"] .ppl-viewer-view {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.playground-page--pipeline .playground-card-input .ppl-schema-view {
    justify-content: flex-start;
    overflow: hidden;
    gap: 0;
}

.playground-card-input .ppl-schema-view > .ppg-status {
    display: none !important;
}

/* Lecture seule : pas de grille à points, pas de bibliothèque ni d'outils, aucune édition */
.ppb.is-view .ppb-addbar,
.ppb.is-view .ppb-toolbar,
.ppb.is-view .ppb-drop-hint,
.ppb.is-view .ppb-node-del,
.ppb.is-view .ppb-link-del {
    display: none !important;
}

.ppb.is-view .ppb-stage {
    background-image: none;
}

.ppb.is-view .ppb-node {
    cursor: default;
}

.ppb.is-view .ppb-node:hover {
    transform: none;
}

.ppb.is-view .ppb-port,
.ppb.is-view .ppb-link-g {
    pointer-events: none;
}

.ppb.is-view .ppb-node select,
.ppb.is-view .ppb-node input {
    pointer-events: none;
    opacity: 1;
}

.ppb-node-caption {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ae-ink-soft, #3b3e48);
}

html.dark .ppb-node-caption {
    border-color: rgba(219, 232, 255, 0.16);
    color: var(--color-text, #e6e9f2);
}

/* ——— Modale arbitrage : champs Nom / Description plus grands ——— */
.ppl-modal .ppl-field > .form-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.ppl-modal .ppl-field > textarea.form-input {
    min-height: 110px;
    resize: vertical;
}

.ppl-modal .ppl-field {
    gap: 8px;
}

body .ppl-modal .ppl-field > .form-input:focus {
    box-shadow: inset 0 0 0 1px #4a6fe0 !important;
}

/* ——— Lecture seule : la pipeline est centrée, le canevas défile si elle déborde ——— */
.ppb.is-view .ppb-scroller {
    overscroll-behavior: contain;
}

/* ——— Donnée qui circule : vignette du fichier sur les liens du parcours ——— */
.ppb-token {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 34px;
    margin: -17px 0 0 -13px;
    overflow: hidden;
    border: 2px solid #2563eb;
    border-radius: 5px;
    background: #fff;
    color: #2563eb;
    font-size: 0.8rem;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22), 0 8px 18px -6px rgba(37, 99, 235, 0.7);
    pointer-events: none;
    transition: opacity 300ms ease, scale 300ms ease;
    will-change: transform;
}

.ppb-token[hidden] {
    display: none;
}

.ppb-token img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.ppb-token.is-moving {
    animation: ppb-token-glow 0.9s ease-in-out infinite;
}

.ppb-token.is-done {
    opacity: 0;
    scale: 0.6;
}

@keyframes ppb-token-glow {
    50% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.14), 0 8px 18px -6px rgba(37, 99, 235, 0.7); }
}

html.dark .ppb-token {
    border-color: #6b8cff;
    background: #e6e9f2;
}

@media (prefers-reduced-motion: reduce) {
    .ppb-token.is-moving {
        animation: none;
    }
}

/* ——— Contrat pipeline : erreurs de validation par bloc, résultats réels (réponse / score) ——— */
.ppb-node.has-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}

/* Messages informatifs : ils ne doivent pas capter le clic ni étendre la zone
   cliquable/déplaçable du bloc (sinon cliquer sur le message déplace le bloc). */
.ppb-node-error,
.ppb-node-live {
    position: absolute;
    z-index: 3;
    font-size: 0.7rem;
    line-height: 1.3;
    pointer-events: none;
}

.ppb-node-live {
    left: 50%;
    top: calc(100% + 6px);
    max-width: 210px;
    padding: 3px 8px;
    border-radius: 6px;
    text-align: center;
    transform: translateX(-50%);
}

/* Erreur de validation : posée sur le côté du bloc (et non dessous) pour ne pas
   masquer les liens du schéma. */
.ppb-node-error {
    top: 50%;
    left: calc(100% + 14px);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: max-content;
    max-width: 250px;
    padding: 7px 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    box-shadow: 0 10px 22px -18px rgba(185, 28, 28, 0.7);
    color: #b42318;
    text-align: left;
    transform: translateY(-50%);
}

.ppb-node.has-error-left .ppb-node-error {
    right: calc(100% + 14px);
    left: auto;
}

.ppb-node-error::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    width: 14px;
    height: 1px;
    background: #fecaca;
}

.ppb-node.has-error-left .ppb-node-error::before {
    right: -14px;
    left: auto;
}

.ppb-node-error-icon {
    flex: none;
    margin-top: 1px;
    font-size: 0.72rem;
}

.ppb-node-error-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ppb-node-live {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
}

.ppb-node.has-error .ppb-node-live {
    display: none;
}

.ppb-node.is-failed {
    border-color: #dc2626;
    border-top-color: #dc2626;
}

.ppb-token--region {
    width: 20px;
    height: 26px;
    margin: -13px 0 0 -10px;
    font-size: 0.65rem;
}

html.dark .ppb-node-error {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fca5a5;
}

html.dark .ppb-node-live {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(107, 140, 255, 0.4);
    color: #bfd0ff;
}

.ppg-proof-warning {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: #b45309;
}

/* ——— « En savoir plus » sur la pipeline : triangle, scores, description ——— */
.ppl-arbitrage {
    position: relative;
}

.ppl-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.ppl-about-btn[hidden] {
    display: none;
}

.ppl-about-btn:hover,
.ppl-about-btn.is-active,
.ppl-about-btn:focus-visible {
    outline: none;
    border-color: var(--ae-blue-edge, #aac3f0);
    background: var(--ae-blue-fill, #eef4ff);
    color: var(--ae-blue-deep, #01123c);
}

.playground-page .playground-config-group-label .ppl-about-btn i {
    margin: 0;
    opacity: 1;
}

.ppl-about {
    --ppl-accent: var(--ae-blue-deep, #01123c);
    position: absolute;
    top: 52px;
    right: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, 100%);
    padding: 14px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 14px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 18px 40px -18px rgba(1, 18, 60, 0.4);
    transform-origin: top right;
    animation: ppl-menu-in 160ms ease;
}

.ppl-about[hidden] {
    display: none;
}

.ppl-about-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ppl-about-head strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppl-about-close {
    flex: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ae-ink-muted, #6b6e7a);
    cursor: pointer;
}

.ppl-about-close:hover {
    background: var(--ae-blue-fill, #eef4ff);
    color: var(--ae-blue-deep, #01123c);
}

.ppl-about-desc,
.ppl-about-note {
    margin: 0;
    color: var(--ae-ink-soft, #3b3e48);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-line;
}

.ppl-about-note {
    color: var(--ae-ink-muted, #6b6e7a);
}

.ppl-about-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ae-line, #e7e8ec);
}

.ppl-about-tri {
    display: flex;
    justify-content: center;
}

.ppl-about-tri .ppg-pad__svg {
    width: 100%;
    max-width: 220px;
    height: auto;
    overflow: visible;
}

/* ——— Détail de l'arbitrage en clair dans le panneau de droite (lecture seule) ——— */
.ppl-arb-info {
    --ppl-accent: var(--ae-blue-deep, #01123c);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 12px;
    background: var(--ae-surface, #fff);
}

.ppl-arb-info[hidden] {
    display: none;
}

/* Pas de séparateur en tête quand aucune description n'est affichée. */
.ppl-arb-info > .ppl-about-body:first-child {
    padding-top: 0;
    border-top: 0;
}

.ppl-arb-info .ppl-about-tri .ppg-pad__svg {
    max-width: 200px;
}

html.dark .ppl-arb-info {
    background: var(--color-surface, #121826);
    border-color: rgba(219, 232, 255, 0.16);
    color: var(--color-text, #e6e9f2);
}

html.dark .ppl-about {
    background: var(--color-surface, #121826);
    border-color: rgba(219, 232, 255, 0.16);
    color: var(--color-text, #e6e9f2);
}

html.dark .ppl-about-desc {
    color: var(--color-text, #e6e9f2);
}

html.dark .ppl-about-body {
    border-color: rgba(219, 232, 255, 0.14);
}

html.dark .ppl-about-btn:hover,
html.dark .ppl-about-btn.is-active,
html.dark .ppl-about-btn:focus-visible,
html.dark .ppl-about-close:hover {
    background: rgba(170, 195, 240, 0.12);
    border-color: rgba(170, 195, 240, 0.4);
    color: var(--color-text, #e6e9f2);
}

html.dark .ppl-wbar i {
    background: rgba(219, 232, 255, 0.1);
}

html.dark .ppl-wbar em {
    color: var(--color-text, #e6e9f2);
}

/* ——— Édition d'un arbitrage : bandeau compact sur une ligne au-dessus du canevas ——— */
.ppl-edit-bar {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 4px 4px 8px;
    border: 1px solid var(--ae-blue-edge, #aac3f0);
    border-radius: 10px;
    background: var(--ae-blue-fill, #eef4ff);
}

.ppl-edit-bar[hidden] {
    display: none;
}

.ppl-edit-bar__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ae-blue-deep, #01123c);
    color: #fff;
    font-size: 0.65rem;
}

.ppl-edit-bar__text {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    line-height: 1.2;
    white-space: nowrap;
}

.ppl-edit-bar__text small {
    flex: none;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ppl-edit-bar__text strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 650;
    text-overflow: ellipsis;
}

.ppl-edit-bar__actions {
    display: flex;
    flex: none;
    gap: 4px;
}

.ppl-edit-bar .ppl-edit-bar__actions .ghost-btn,
.ppl-edit-bar .ppl-edit-bar__actions .primary-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: auto !important;
    height: 28px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.ppl-edit-bar .ppl-edit-bar__actions i {
    font-size: 0.7rem;
}

/* Bouton « Nom et réglages » : icône seule quand la place manque */
@media (max-width: 1280px) {
    .ppl-edit-bar .ppl-edit-btn-details span {
        display: none;
    }
}

html.dark .ppl-edit-bar {
    background: rgba(170, 195, 240, 0.08);
    border-color: rgba(170, 195, 240, 0.3);
}

html.dark .ppl-edit-bar__icon {
    background: #4a6fe0;
}

html.dark .ppl-edit-bar__text strong {
    color: var(--color-text, #e6e9f2);
}

/* ——— Sélection multiple : blocs sélectionnés + rectangle de sélection ——— */
.ppb-node.is-selected {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

html.dark .ppb-node.is-selected {
    outline-color: #6b8cff;
}

.ppb-marquee {
    position: absolute;
    z-index: 4;
    border: 1px dashed #2563eb;
    border-radius: 4px;
    background: rgba(37, 99, 235, 0.08);
    pointer-events: none;
}

html.dark .ppb-marquee {
    border-color: #6b8cff;
    background: rgba(107, 140, 255, 0.12);
}

.ppb:not(.is-view):not(.is-locked) .ppb-scroller {
    cursor: crosshair;
}

.ppb:not(.is-view):not(.is-locked) .ppb-node {
    cursor: grab;
}

/* ---------- Bulle « info » : exemples « avant → après » empilés et alignés ---------- */
.ppb-viz-flow {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

.ppb-viz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px 9px;
    overflow: hidden;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 8px;
    background: var(--ae-surface, #fff);
    text-align: left;
}

.ppb-viz > .ppb-viz-card {
    flex: 1 1 100%;
}

.ppb-viz-card-tag {
    margin-bottom: 2px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ppb-viz-card-line {
    overflow: hidden;
    color: var(--ae-ink, #0c0c10);
    font-size: 0.7rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppb-viz-card.is-source .ppb-viz-card-line {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--ae-ink-soft, #3b3e48);
}

.ppb-viz-card.is-hand .ppb-viz-card-line {
    font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.74rem;
}

.ppb-viz-card.is-before .ppb-viz-card-line {
    font-family: inherit;
    color: var(--ae-ink-muted, #6b6e7a);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--ae-ink-muted, #6b6e7a) 60%, transparent);
}

.ppb-viz-card.is-result {
    border-color: color-mix(in srgb, var(--ppb-c, #24439a) 30%, var(--ae-line, #e2e4ea));
    background: color-mix(in srgb, var(--ppb-soft, #dbe8ff) 45%, var(--ae-surface, #fff));
}

.ppb-viz-card.is-result .ppb-viz-card-tag {
    color: var(--ppb-c, #24439a);
}

.ppb-viz-card.is-result .ppb-viz-card-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.66rem;
    white-space: normal;
    animation: ppb-line-in 3.2s ease-out infinite both;
}

@keyframes ppb-line-in {
    0% { opacity: 0; transform: translateY(3px); }
    12%, 88% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

/* Ligne de lecture qui parcourt l'image source */
.ppb-viz-scanline {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    height: 2px;
    background: color-mix(in srgb, var(--ppb-c, #24439a) 55%, transparent);
    animation: ppb-scanline 3.2s ease-in-out infinite;
}

@keyframes ppb-scanline {
    0% { top: 18px; opacity: 0; }
    8% { opacity: 1; }
    32% { top: calc(100% - 4px); opacity: 1; }
    40%, 100% { top: calc(100% - 4px); opacity: 0; }
}

.ppb-viz-down {
    display: flex;
    align-self: center;
    justify-content: center;
    width: 20px;
    height: 14px;
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.62rem;
}

.ppb-viz > .ppb-viz-down {
    flex: 1 1 100%;
}

/* Exemples : teintes de la charte (plus de dégradés néon) */
.ppb-viz-image { background: #dbe8ff; }
.ppb-viz-wave i,
.ppb-viz-wave i.spk-a { background: #24439a; }
.ppb-viz-wave i.spk-b { background: #8a1f4f; }

@keyframes ppb-word {
    0%, 15% { outline-color: transparent; }
    25%, 80% { outline-color: #0f4c4a; background: #cdeec0; }
    100% { outline-color: transparent; }
}

@keyframes ppb-line {
    0%, 15% { outline-color: transparent; }
    30%, 80% { outline-color: #0f4c4a; background: rgba(15, 76, 74, 0.1); }
    100% { outline-color: transparent; }
}

@keyframes ppb-zone {
    0%, 10% { outline-color: transparent; }
    25%, 85% { outline-color: #0f4c4a; }
    100% { outline-color: transparent; }
}

html.dark .ppb-viz-card {
    border-color: var(--ae-line-strong, rgba(219, 232, 255, 0.16));
    background: var(--ae-surface, #1e1f24);
}

html.dark .ppb-viz-card.is-result {
    background: color-mix(in srgb, var(--ppb-soft) 60%, var(--ae-surface, #1e1f24));
}

html.dark .ppb-viz-wave i,
html.dark .ppb-viz-wave i.spk-a { background: #9db8f5; }
html.dark .ppb-viz-wave i.spk-b { background: #f2a7c8; }

@media (prefers-reduced-motion: reduce) {
    .ppb-viz-scanline { display: none; }
    .ppb-viz-card.is-result .ppb-viz-card-line { animation: none; }
}

/* ——— Arbitrage rapidité / coût / qualité : trois colonnes + jauges à crans ——— */
.ppl-wboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ppl-wboard__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 10px;
}

.ppl-wboard__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px 12px;
    border-top: 2px solid transparent;
}

.ppl-wboard__col + .ppl-wboard__col {
    border-left: 1px solid var(--ae-line, #e2e4ea);
}

.ppl-wboard__col.is-lead {
    border-top-color: var(--ae-blue-deep, #01123c);
    background: var(--ae-surface-2, #f7f8fa);
}

.ppl-wboard__name {
    overflow: hidden;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.ppl-wboard__col.is-lead .ppl-wboard__name {
    color: var(--ae-blue-deep, #01123c);
}

.ppl-wboard__value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1;
}

.ppl-wboard__value strong {
    color: var(--ae-ink, #0c0c10);
    font-size: 1.15rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.ppl-wboard__value small {
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.64rem;
    font-weight: 600;
}

.ppl-wboard__meter {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 2px;
}

.ppl-wboard__meter i {
    height: 6px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--ae-ink, #0c0c10) 9%, transparent);
}

.ppl-wboard__meter i.is-on {
    background: color-mix(in srgb, var(--ae-blue-deep, #01123c) 55%, transparent);
}

.ppl-wboard__col.is-lead .ppl-wboard__meter i.is-on {
    background: var(--ae-blue-deep, #01123c);
}

.ppl-wboard__route {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ae-ink-soft, #3b3e48);
    font-size: 0.74rem;
    line-height: 1.35;
}

.ppl-wboard__route i {
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.7rem;
}

.ppl-weights--editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

html.dark .ppl-wboard__grid {
    border-color: rgba(219, 232, 255, 0.16);
}

html.dark .ppl-wboard__col + .ppl-wboard__col {
    border-left-color: rgba(219, 232, 255, 0.16);
}

html.dark .ppl-wboard__col.is-lead {
    border-top-color: #9db8f5;
    background: rgba(255, 255, 255, 0.03);
}

html.dark .ppl-wboard__col.is-lead .ppl-wboard__name {
    color: #9db8f5;
}

html.dark .ppl-wboard__meter i {
    background: rgba(219, 232, 255, 0.1);
}

html.dark .ppl-wboard__meter i.is-on {
    background: rgba(157, 184, 245, 0.55);
}

html.dark .ppl-wboard__col.is-lead .ppl-wboard__meter i.is-on {
    background: #9db8f5;
}

.ppl-arb-info .ppl-wboard__grid {
    margin: -2px -2px 0;
    border: 0;
    border-radius: 8px;
}

/* Badges d'exécution : teintes de la charte ; sous les libellés des ports pour les blocs
   à deux sorties (Condition, Score de confiance), afin de ne pas les recouvrir. */
.ppb-node-live {
    border: 1px solid #aac3f0;
    background: #eef4ff;
    color: #01123c;
    font-variant-numeric: tabular-nums;
}

.ppb-node.has-multi .ppb-node-live {
    top: calc(100% + 24px);
}

html.dark .ppb-node-live {
    border-color: #314469;
    background: #1a2338;
    color: #d7e3fb;
}

/* ——— Bloc « Extraction ciblée » (canevas) ——— */
.ppb-x-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 28px;
    padding: 4px 5px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 7px;
    background: var(--ae-surface, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.ppb-x-summary:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ppb-c) 45%, var(--ae-line, #e2e4ea));
}

.ppb-x-summary:disabled {
    cursor: default;
}

.ppb-x-summary.is-empty {
    gap: 6px;
    padding: 0 8px;
    border-style: dashed;
    color: var(--ppb-c);
    font-size: 0.7rem;
    font-weight: 600;
}

.ppb-x-chip {
    max-width: 100%;
    overflow: hidden;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--ppb-soft);
    color: var(--ppb-c);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppb-x-chip.is-more {
    background: transparent;
    color: var(--ae-ink-muted, #6b6e7a);
}

/* ——— Modale « Extraction ciblée » ——— */
.ppx-panel {
    width: min(780px, 100%);
}

.ppx-modal-icon {
    background: #fbe6ef;
    color: #8a1f4f;
}

.ppx-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.ppx-titles h3 {
    margin: 0;
    font-size: 1rem;
}

.ppx-sub {
    margin: 2px 0 0;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.78rem;
}

.ppx-body {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 18px;
}

.ppx-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: min(56vh, 460px);
    padding-right: 10px;
    overflow-y: auto;
    border-right: 1px solid var(--ae-line, #e7e8ec);
}

.ppx-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.ppx-label {
    display: block;
    margin-bottom: 8px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ppx-main > .ppx-label {
    margin-bottom: 0;
}

.ppx-group + .ppx-group {
    margin-top: 12px;
}

.ppx-group-name {
    display: block;
    margin-bottom: 6px;
    color: var(--ae-ink-soft, #3b3e48);
    font-size: 0.72rem;
    font-weight: 600;
}

.ppx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ppx-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px dashed var(--ae-line-strong, #c9cdd6);
    border-radius: 99px;
    background: var(--ae-surface, #fff);
    color: var(--ae-ink-soft, #3b3e48);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.ppx-suggestion i {
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.64rem;
}

.ppx-suggestion:hover {
    border-color: var(--ae-blue-deep, #01123c);
    color: var(--ae-blue-deep, #01123c);
}

.ppx-suggestion:hover i {
    color: inherit;
}

.ppx-suggestion.is-used {
    border-style: solid;
    border-color: transparent;
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
}

.ppx-suggestion.is-used i {
    color: inherit;
}

.ppx-zone {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    min-height: 132px;
    padding: 12px 12px 26px;
    border: 1px dashed var(--ae-line-strong, #c9cdd6);
    border-radius: 12px;
    background: var(--ae-surface-2, #f7f8fa);
    transition: border-color 140ms ease, background 140ms ease;
}

.ppx-zone.is-empty {
    align-items: center;
    align-content: center;
    justify-content: center;
    padding-bottom: 12px;
    cursor: text;
}

.ppx-zone.is-over {
    border-color: var(--ae-blue-deep, #01123c);
    background: color-mix(in srgb, var(--ae-blue-fill, #dbe8ff) 45%, var(--ae-surface, #fff));
}

.ppx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.8rem;
    text-align: center;
}

.ppx-empty i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ae-surface, #fff);
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.9rem;
}

.ppx-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 30px;
    padding: 0 4px 0 8px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 99px;
    background: var(--ae-surface, #fff);
    box-shadow: 0 1px 2px rgba(1, 18, 60, 0.06);
    color: var(--ae-ink, #0c0c10);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: grab;
}

.ppx-field.is-dragging {
    opacity: 0.4;
}

.ppx-grip {
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.62rem;
}

.ppx-field-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppx-field-del {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.66rem;
    cursor: pointer;
}

.ppx-field-del:hover {
    background: #fde8e8;
    color: #b91c1c;
}

.ppx-count {
    position: absolute;
    right: 12px;
    bottom: 7px;
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

/* Saisie libre : conteneur unique (l'icône et le champ sont centrés sur la même ligne,
   le champ lui-même n'a ni bordure ni anneau de focus). */
.ppx-add {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 10px;
    background: var(--ae-surface, #fff);
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.72rem;
    cursor: text;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ppx-add:hover {
    border-color: var(--ae-line-strong, #c9cdd6);
}

.ppx-add:focus-within {
    border-color: color-mix(in srgb, var(--ae-blue-deep, #01123c) 55%, var(--ae-line, #e2e4ea));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-blue-deep, #01123c) 10%, transparent);
}

.ppx-add > i {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ae-surface-2, #f1f3f6);
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.62rem;
    line-height: 1;
    transition: background 140ms ease, color 140ms ease;
}

.ppx-add:focus-within > i {
    background: var(--ae-blue-fill, #dbe8ff);
    color: var(--ae-blue-deep, #01123c);
}

/* Spécificité supérieure au style global des champs (input[type="text"]) : aucun cadre interne. */
.ppx-add .ppx-add-input,
.ppx-add .ppx-add-input:hover,
.ppx-add .ppx-add-input:focus,
.ppx-add .ppx-add-input:focus-visible {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--ae-ink, #0c0c10);
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.2;
    transition: none;
}

.ppx-add .ppx-add-input::placeholder {
    color: var(--ae-ink-faint, #9396a1);
}

/* Le thème « ae-refresh » applique bordure + halo à tous les champs au focus (!important) :
   ici le focus est porté par le conteneur, jamais par le champ. */
body.ae-refresh .ppx-add .ppx-add-input,
body.ae-refresh .ppx-add .ppx-add-input:hover,
body.ae-refresh .ppx-add .ppx-add-input:focus,
body.ae-refresh .ppx-add .ppx-add-input:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ppx-json summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ae-ink-soft, #3b3e48);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.ppx-json summary::-webkit-details-marker {
    display: none;
}

.ppx-json summary::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    transition: transform 140ms ease;
}

.ppx-json[open] summary::before {
    transform: rotate(90deg);
}

.ppx-json-pre {
    max-height: 160px;
    margin: 8px 0 0;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 10px;
    background: var(--ae-surface-2, #f7f8fa);
    color: var(--ae-ink-soft, #3b3e48);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
}

.ppx-templates[hidden] {
    display: none;
}

.ppx-template {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 8px;
    background: var(--ae-surface, #fff);
}

.ppx-template-use {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 6px 0 9px;
    border: 0;
    background: none;
    color: var(--ae-ink, #0c0c10);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.ppx-template-use i {
    color: #8a1f4f;
    font-size: 0.64rem;
}

.ppx-template-use small {
    padding: 0 5px;
    border-radius: 99px;
    background: var(--ae-surface-3, #eef0f3);
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.62rem;
}

.ppx-template-use:hover {
    background: var(--ae-surface-2, #f7f8fa);
}

.ppx-template-del {
    width: 24px;
    height: 28px;
    border: 0;
    border-left: 1px solid var(--ae-line, #e2e4ea);
    background: none;
    color: var(--ae-ink-faint, #9396a1);
    font-size: 0.62rem;
    cursor: pointer;
}

.ppx-template-del:hover {
    color: #b91c1c;
}

.ppx-foot {
    align-items: center;
}

.ppx-foot-spacer {
    flex: 1 1 auto;
}

.ppx-save-tpl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--ae-ink-soft, #3b3e48);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ppx-save-tpl:hover:not(:disabled) {
    color: var(--ae-blue-deep, #01123c);
}

.ppx-save-tpl:disabled {
    opacity: 0.45;
    cursor: default;
}

.ppx-save-tpl[hidden],
.ppx-tpl-form[hidden] {
    display: none;
}

.ppx-tpl-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ppx-tpl-form .ppx-tpl-name {
    width: 190px;
    height: 34px;
    font-size: 0.8rem;
}

html.dark .ppx-modal .ppl-modal-panel {
    background: var(--ae-surface, #1e1f24);
    color: var(--ae-ink, #ecedf0);
}

html.dark .ppx-modal-icon {
    background: rgba(242, 167, 200, 0.14);
    color: #f2a7c8;
}

html.dark .ppx-suggestion,
html.dark .ppx-field,
html.dark .ppx-add,
html.dark .ppx-template {
    border-color: var(--ae-line-strong, #3a3d45);
    background: var(--ae-surface-2, #212227);
}

html.dark .ppx-suggestion.is-used {
    border-color: transparent;
    background: var(--ae-blue-fill, #1a2338);
    color: var(--ae-blue-deep, #d7e3fb);
}

html.dark .ppx-zone,
html.dark .ppx-json-pre {
    border-color: var(--ae-line-strong, #3a3d45);
    background: var(--ae-surface-3, #282a30);
}

@media (max-width: 720px) {
    .ppx-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppx-side {
        max-height: 220px;
        padding-right: 0;
        padding-bottom: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--ae-line, #e7e8ec);
    }
}

/* ---------- Bloc d'entrée : aperçu du fichier importé (avant le run) ---------- */
.ppb-node.has-input-preview {
    width: 176px;
}

.ppb-node-file {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 2px;
    padding: 6px 7px;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 8px;
    background: var(--ae-surface-2, #f7f8fa);
}

.ppb-node-file-thumb {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--ae-line, #e2e4ea);
    border-radius: 4px;
    background: var(--ae-surface, #fff);
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.72rem;
}

.ppb-node-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.ppb-node-file-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ppb-node-file-name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ae-ink, #0c0c10);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ppb-node-file-detail {
    overflow: hidden;
    color: var(--ae-ink-muted, #6b6e7a);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppb-node.is-fixed.has-input-preview {
    background: var(--ae-surface, #fff);
}

html.dark .ppb-node-file {
    border-color: rgba(219, 232, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

html.dark .ppb-node-file-thumb {
    border-color: rgba(219, 232, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
}