/* ==========================================================================
   MODULE CONSTRUCTEUR (BUILDER) - V6.0 (FULL CSS)
   Gestion complète du layout, des panneaux et de l'espace de travail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STRUCTURE GÉNÉRALE ET PANNEAUX LATÉRAUX
   -------------------------------------------------------------------------- */

/* Panneau Gauche (Bibliothèque & Config Globale) */
.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;
    flex-shrink: 0;
}

.constructor-title { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
    color: #1B5E20; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

/* Corps du panneau gauche (Conteneur Flex principal) */
.constructor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Essentiel pour contenir les scrolls enfants */
    min-height: 0;
    position: relative;
}

/* Grille interne 2 colonnes (Gauche: Config / Droite: Library) */
.constructor-body-grid { 
    display: grid; 
    grid-template-columns: 220px 1fr; /* 220px pour config, reste pour lib */
    height: 100%; 
    overflow: hidden; 
}

/* Colonne Config Globale (Gauche) */
.c-col-left { 
    border-right: 1px solid #eee; 
    overflow-y: auto; 
    background-color: #fdfdfd; 
    padding: 15px; 
    padding-bottom: 50px; /* Marge pour le scroll */
    height: 100%;
}

/* Colonne Bibliothèque (Droite) */
.c-col-right { 
    overflow-y: auto; 
    background-color: #fff; 
    padding-bottom: 50px; 
    height: 100%;
}


/* --------------------------------------------------------------------------
   2. PANNEAU DE PROPRIÉTÉS (S'affiche par-dessus la grille)
   -------------------------------------------------------------------------- */

#constructorProperties {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

.properties-header {
    flex-shrink: 0;
    padding: 10px; 
    background: #e6f4ea; 
    border-bottom: 1px solid #cce5d0; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

.properties-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    padding-bottom: 60px; /* Extra padding pour le bas */
}

/* Layout des propriétés (Colonnes Bloc / Contenu) */
.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; margin-top:5px; 
    background-color: #f0f0f0; padding:0.5em 2em; border-radius: 5px; 
}

/* Groupes de contrôles */
.c-config-group { margin-bottom: 15px; padding: 0 5px; }
.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; }

/* Toggles & Boutons */
.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; 
}

/* Accordéons Bibliothèque */
.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; }

/* Boutons Blocs Bibliothèque */
.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; }


/* --------------------------------------------------------------------------
   3. PANNEAU DE DONNÉES (DROITE) - Formulaires
   -------------------------------------------------------------------------- */

.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;
    height: 100%; /* Important */
}

/* Liste Drag & Drop (Champs de saisie) */
.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; }
input.prop-input { padding: 5px; border-radius: 5px; }

.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; }


/* --------------------------------------------------------------------------
   4. ESPACE DE TRAVAIL (CANVAS) & BLOCS
   -------------------------------------------------------------------------- */

/* État actif du canvas */
.affiche.constructor-mode { box-shadow: 0 0 0 1px #ddd inset; transition: box-shadow 0.3s; }
body.is-dragging-block .affiche.constructor-mode { box-shadow: 0 0 0 2px #386641 inset; background-color: #f0fdf4 !important; }

/* Bloc Libre (Draggable/Resizable) */
.free-block { 
    position: absolute; 
    border: 1px dashed transparent; 
    cursor: grab; 
    box-sizing: border-box; 
    min-height: 20px; min-width: 20px; 
    display: flex; flex-direction: column; 
}
.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; }
.free-block.full-width-block { cursor: ns-resize !important; } /* Curseur hauteur pour blocs largeur totale */

.block-content-inner { width: 100%; height: 100%; overflow: visible; pointer-events: none; display: flex; flex-direction: column; }
.block-content-inner * { pointer-events: none; }

/* HANDLES DE REDIMENSIONNEMENT (COINS) */
.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; } /* Handle spécifique full-width */

/* HANDLES DE REDIMENSIONNEMENT (BORDS) - UX AMELIOREE */
.edge-handle { position: absolute; z-index: 1010; display: none; }
.free-block.selected .edge-handle { display: block; }

.edge-handle.handle-n { top: -6px; left: 6px; right: 6px; height: 12px; cursor: ns-resize; }
.edge-handle.handle-s { bottom: -6px; left: 6px; right: 6px; height: 12px; cursor: ns-resize; }
.edge-handle.handle-e { right: -6px; top: 6px; bottom: 6px; width: 12px; cursor: ew-resize; }
.edge-handle.handle-w { left: -6px; top: 6px; bottom: 6px; width: 12px; cursor: ew-resize; }

/* Indicateur visuel (Barre verte) au survol des bords */
.edge-handle::after {
    content: ''; position: absolute; background-color: #386641; display: none; opacity: 0.8; border-radius: 2px;
    box-shadow: 0 0 4px rgba(255,255,255,0.8);
}
.edge-handle:hover::after { display: block; }

.edge-handle.handle-n::after { left: 0; right: 0; top: 4px; height: 4px; }
.edge-handle.handle-s::after { left: 0; right: 0; bottom: 4px; height: 4px; }
.edge-handle.handle-e::after { top: 0; bottom: 0; right: 4px; width: 4px; }
.edge-handle.handle-w::after { top: 0; bottom: 0; left: 4px; width: 4px; }

/* POIGNÉE DE ROTATION */
.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; }

/* --------------------------------------------------------------------------
   5. UTILS ET INTERFACE GÉNÉRALE
   -------------------------------------------------------------------------- */

.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; }

.header-btn.constructor-active { background-color: #e6f4ea; color: #1B5E20; border-color: #1B5E20; }
.constructor-toolbar { background: #fdfdfd !important; border: 1px solid #386641 !important; box-shadow: 0 -2px 10px rgba(56, 102, 65, 0.1) !important; }

.template-card { 
    padding: 10px; border: 1px solid #eee; background: white; border-radius: 6px; 
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 15px; margin-bottom: 8px; 
}
.template-card:hover { border-color: #386641; background-color: #f0fdf4; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.template-icon { 
    width: 40px; height: 40px; background: #e6f4ea; border-radius: 4px; 
    display: flex; align-items: center; justify-content: center; color: #1B5E20; 
}

.sidebar-section-title { padding-left:0.3em; margin: 0.2em 0; font-weight: bold; }

/* ==========================================================================
   STYLES SPÉCIFIQUES BANQUE D'IMAGES (CONSTRUCTEUR)
   ========================================================================== */

/* Conteneur de la grille de sélection */
.bank-selector-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    padding: 5px;
    margin-top: 5px;
}

/* Barre de recherche interne */
.bank-mini-search {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

/* Grille des miniatures */
.bank-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 5px;
    max-height: 200px;
    overflow-y: auto;
}

/* Item Image (Miniature) */
.bank-mini-item {
    aspect-ratio: 1/1;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: #fff;
    transition: all 0.2s;
}

.bank-mini-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bank-mini-item:hover {
    border-color: #999;
}

/* État Sélectionné */
.bank-mini-item.selected {
    border-color: #386641;
    box-shadow: 0 0 0 2px rgba(56, 102, 65, 0.2);
}

.bank-mini-item.selected::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 2px;
    background: #386641;
    color: white;
    font-size: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Badge Nom au survol */
.bank-mini-item:hover::before {
    content: attr(title);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 9px;
    padding: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Liste de catégories (Checkbox) */
.bank-cat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #eee;
    padding: 5px;
}

.bank-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    padding: 4px;
    cursor: pointer;
}
.bank-cat-item:hover { background: #f5f5f5; }