/* ==========================================================================
   MODULE CONSTRUCTEUR (BUILDER) - V3.5
   ========================================================================== */

/* --- PANNEAU GAUCHE (GLOBAL & LIBRARY) --- */
.constructor-panel {
    width: 460px;
    flex-shrink: 0;
    display: none; 
    flex-direction: column;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
    height: 100%;
}

.constructor-header {
    padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center;
}
.constructor-title { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #1B5E20; display: flex; align-items: center; gap: 8px; }

.constructor-body-grid { display: grid; grid-template-columns: 220px 1fr; height: 100%; overflow: hidden; }
.c-col-left { border-right: 1px solid #eee; overflow-y: auto; background-color: #fdfdfd; padding-bottom: 20px; }
.c-col-right { overflow-y: auto; background-color: #fff; padding-bottom: 20px; }

.props-split-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.props-column { display: flex; flex-direction: column; gap: 10px; }
.props-column-title { font-size: 0.75rem; font-weight: 700; color: #888; text-transform: uppercase; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 5px; }

.c-config-group { margin-bottom: 15px; padding: 0 15px; }
.c-label { font-size: 0.8rem; font-weight: 600; color: #555; display: block; margin-bottom: 4px; }
.c-row { display: flex; gap: 8px; align-items: center; }

.constructor-panel .toggle-group { display: flex; width: 100%; gap: 0; }
.constructor-panel .toggle-btn { aspect-ratio: auto !important; height: 36px !important; padding: 0 10px !important; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }

.category-header { padding: 10px 15px; cursor: pointer; font-weight: 600; color: #444; font-size: 0.85rem; display: flex; justify-content: space-between; background: #f1f3f5; border-bottom: 1px solid #e9ecef; }
.category-header:hover { background: #e9ecef; }
.category-content { display: none; padding: 8px; grid-template-columns: 1fr; gap: 6px; background: #fff; }
.sidebar-category.open .category-content { display: grid; }

.library-block-btn {
    display: flex; flex-direction: row; align-items: center; padding: 8px 12px;
    border: 1px solid #e0e0e0; border-radius: 6px; cursor: grab;
    text-align: left; gap: 10px; background: #f8f9fa; 
    transition: all 0.2s; user-select: none;
}
.library-block-btn:hover { border-color: #386641; color: #386641; background: #e8f5e9; transform: translateX(2px); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.block-icon { font-size: 1.2rem; display: flex; align-items: center; color: #666; }
.library-block-btn:hover .block-icon { color: #386641; }
.block-label { font-size: 0.8rem; font-weight: 600; }

/* --- PANNEAU DONNÉES (DROITE) --- */
.constructor-data-panel {
    background-color: #ffffff;
    width: 320px !important; min-width: 320px !important; flex: 0 0 320px !important;
    border-left: 1px solid #e0e0e0;
    display: flex; flex-direction: column;
}

/* Drag & Drop List Items */
.data-block-item {
    padding: 10px; border-bottom: 1px solid #eee; background: #fff;
    cursor: default; position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
.data-block-item.draggable { cursor: grab; }
.data-block-item.dragging { opacity: 0.5; background: #f0fdf4; border: 1px dashed #386641; }
.data-block-item.drag-over { border-top: 2px solid #386641; }
.drag-handle { cursor: grab; color: #999; padding-right: 10px; }
.drag-handle:hover { color: #333; }

.prop-group { margin-bottom: 15px; }
.prop-label { font-size: 0.8rem; font-weight: 600; color: #444; margin-bottom: 4px; display: block; }
.prop-row { display: flex; gap: 10px; align-items: center; }

.block-delete-btn { width: 100%; padding: 10px; background-color: #fee2e2; color: #c5221f; border: 1px solid #ef9a9a; border-radius: 6px; font-weight: 600; cursor: pointer; margin-top: 20px; transition: background 0.2s; }
.block-delete-btn:hover { background-color: #fca5a5; }

/* --- WORKSPACE & ELEMENTS --- */
.affiche.constructor-mode { box-shadow: 0 0 0 1px #ddd inset; transition: box-shadow 0.3s; }
/* Indicateur de drop sur l'affiche */
body.is-dragging-block .affiche.constructor-mode { box-shadow: 0 0 0 2px #386641 inset; background-color: #f0fdf4 !important; }

.free-block { position: absolute; border: 1px dashed transparent; cursor: grab; box-sizing: border-box; min-height: 20px; min-width: 20px; }
.free-block:hover { outline: 1px dashed rgba(56, 102, 65, 0.5); }
.free-block.selected { outline: 2px solid #386641; z-index: 1000 !important; cursor: move; }

.resize-handle { position: absolute; width: 12px; height: 12px; background: white; border: 2px solid #386641; border-radius: 50%; display: none; z-index: 1001; }
.free-block.selected .resize-handle { display: block; }
.handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
.handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
.handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.handle-se { bottom: -6px; right: -6px; cursor: se-resize; }
.handle-s  { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }

.rotate-handle { position: absolute; top: -30px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: white; border: 2px solid #386641; border-radius: 50%; cursor: grab; display: none; z-index: 1002; }
.rotate-handle::after { content: ''; position: absolute; top: 10px; left: 4px; width: 2px; height: 15px; background: #386641; }
.free-block.selected .rotate-handle { display: block; }

/* Boutons Calques (Propriétés Panel) */
.layer-controls { display: flex; gap: 10px; justify-content: space-between; background: #f0f0f0; padding: 10px; border-radius: 6px; margin-bottom: 15px; }
.layer-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 1px solid #ccc; background: white; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #333; transition: all 0.2s; }
.layer-btn:hover { background: #e0e0e0; transform: translateY(-1px); }
.layer-btn svg { width: 18px; height: 18px; }

.block-content-inner { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.block-content-inner * { pointer-events: none; }
.header-btn.constructor-active { background-color: #e6f4ea; color: #1B5E20; border-color: #1B5E20; }