/* =========================================================
   ONLY PDF — CORRECTIONS DE COMPOSANTS
   Ces règles isolent les panneaux pour éviter les collisions
   entre le catalogue, les propriétés et Motion Studio.
   ========================================================= */

/* Catalogue d’icônes et de SVG : le contenu défile uniquement
   dans la grille, tandis que le bouton « plus de résultats »
   conserve toujours sa propre ligne. */
.studio-assets-panel.open {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 0;
}

.studio-assets-panel .studio-assets-panel-header,
.studio-assets-panel .studio-assets-search-wrap,
.studio-assets-panel .studio-assets-status,
.studio-assets-panel .studio-assets-load-more {
    flex: none !important;
}

.studio-assets-panel .studio-assets-status {
    min-height: 18px;
    margin: 0 2px 10px;
    color: #55636d;
    font: 600 12px/1.35 Inter, system-ui, sans-serif;
}

.studio-assets-panel .studio-assets-grid {
    min-height: 0 !important;
    height: auto !important;
    align-content: start;
    overscroll-behavior: contain;
}

.studio-assets-panel .studio-assets-load-more {
    width: 100%;
    min-height: 36px;
    margin-top: 10px;
    border: 1px solid #cbd5d8;
    border-radius: 9px;
    background: #fff;
    color: #29424a;
    font: 700 12px/1 Inter, system-ui, sans-serif;
}

.studio-assets-panel .studio-assets-load-more:hover {
    border-color: #77cfc1;
    background: #f0fdfa;
    color: #0f766e;
}

.studio-assets-panel .studio-asset-option {
    overflow: hidden;
}

.studio-assets-panel .studio-asset-option span {
    width: 100%;
    min-width: 0;
}

/* Carte « Animation » dans le panneau de propriétés.
   Cette carte n’emploie pas les styles du dock Motion Studio. */
#panelBody .studio-animation-properties {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 16px !important;
    border-bottom: 1px solid #edf1f2 !important;
    background: #fff !important;
}

#panelBody .studio-animation-properties > .studio-animation-properties-title {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    letter-spacing: normal !important;
}

#panelBody .studio-animation-properties-title .studio-animation-spark {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #edf9f7;
    color: #0f766e;
    font-size: 11px;
    line-height: 1;
}

#panelBody .studio-animation-properties-title > div {
    display: flex !important;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

#panelBody .studio-animation-properties-title b {
    color: #34424b !important;
    font: 800 12px/1.2 Inter, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}

#panelBody .studio-animation-properties-title small {
    display: block;
    color: #7c8991;
    font: 500 10px/1.35 Inter, system-ui, sans-serif;
    letter-spacing: 0;
}

#panelBody .studio-animation-properties .studio-animation-summary {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin: 0 !important;
    padding: 9px 10px;
    border-radius: 8px;
    background: #f5f8f8;
    color: #42515a;
    font: 700 11px/1.2 Inter, system-ui, sans-serif;
}

#panelBody .studio-animation-summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panelBody .studio-animation-summary span:last-child {
    color: #74828a;
    font-weight: 600;
}

#panelBody .studio-animation-preview-button {
    width: 100% !important;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #b7ded9 !important;
    border-radius: 8px !important;
    background: #f5fcfb !important;
    color: #14766d !important;
    font: 800 11px/1.2 Inter, system-ui, sans-serif !important;
    line-height: 1.2 !important;
    white-space: normal;
}

#panelBody .studio-animation-preview-button:hover {
    background: #e8f7f4 !important;
    border-color: #78c8be !important;
}

/* La mise en page aérée reste entièrement cantonnée au dock
   pour qu’aucun panneau latéral ou modal ne réutilise ces règles. */
#studioAnimationsPanel .studio-motion-shell,
#studioAnimationsPanel .studio-motion-header,
#studioAnimationsPanel .studio-motion-settings,
#studioAnimationsPanel .studio-motion-timeline-wrap,
#studioAnimationsPanel .studio-motion-quick-controls {
    min-width: 0;
}

#studioAnimationsPanel .studio-motion-pagebar,
#studioAnimationsPanel .studio-motion-header-tools,
#studioAnimationsPanel .studio-motion-pro-actions {
    min-width: 0;
}

@media (max-width: 900px) {
    .studio-assets-panel.open {
        max-height: calc(100vh - 24px) !important;
    }
}

/* Les actions de suppression ne sont pas affichées sur les éléments du canevas.
   Elles restent accessibles depuis les calques et par les touches Suppr./Retour arrière. */
.el .del-btn {
    display: none !important;
    pointer-events: none !important;
}

/* Page verrouillée : les calques restent protégés, mais l’ensemble de la page
   peut être saisi et déplacé. Les poignées de calques sont volontairement cachées. */
.page.page-locked,
.page.page-locked .el {
    cursor: grab !important;
}

.page.page-locked .handles,
.page.page-locked .rotate-handle,
.page.page-locked .rotation-stem,
.page.page-locked .selection-size-label,
.page.page-locked .selection-side-handle {
    display: none !important;
}

.page.page-locked.page-is-moving,
.page.page-locked.page-is-moving .el {
    cursor: grabbing !important;
    user-select: none;
}