/* --- WRAPPER PLEIN ÉCRAN --- */
#tardix-editor-wrapper { 
    position: absolute; /* Ignore les marges de la section parente */
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; 
    background: #1e1e1e; 
    color: #eee; 
    overflow: hidden; 
    font-family: system-ui, -apple-system, sans-serif; 
    z-index: 10;
}

/* --- SIDEBAR OUTILS (Gauche) --- */
#tardix-svg-editor-sidebar { 
    flex: 0 0 500px; /* RÈGLE MAGIQUE : Interdit l'écrasement de la sidebar */
    background: #252526; 
    padding: 20px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    border-right: 1px solid #333; 
}

/* --- ZONE PRINCIPALE (Droite) --- */
#tardix-svg-editor-main { 
    flex: 1 1 auto; /* Prend tout l'espace restant */
    display: flex; 
    flex-direction: column; 
    background: #1e1e1e; 
    overflow: hidden;
}

/* --- TOPBAR INTERNE --- */
.tardix-editor-topbar {
    flex: 0 0 60px; /* Hauteur fixe stricte */
    background: #252526; 
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 15px;
}

.tardix-toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #2d2d30;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid #444;
}
.tardix-toolbar-group label { margin: 0; font-weight: bold; color: #ccc; }
.tardix-toolbar-group input[type="file"] { font-size: 11px; max-width: 180px; color: #aaa; }

/* --- CANVAS SVG --- */
#svg-canvas { 
    flex: 1 1 auto; /* S'adapte à l'espace disponible */
    background: #111; 
    border: 1px solid #444; 
    cursor: crosshair; 
    user-select: none; 
    margin: 20px;
    border-radius: 4px;
    box-sizing: border-box;
}

/* --- STYLES DES PANNEAUX ET FORMULAIRES --- */
#tardix-editor-wrapper .editor-section { background: #2d2d30; padding: 15px; border-radius: 6px; }
#tardix-editor-wrapper .section-title { font-size: 14px; text-transform: uppercase; color: #aaa; margin-bottom: 10px; letter-spacing: 1px; font-weight: bold; }
#tardix-editor-wrapper .editor-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
#tardix-editor-wrapper .editor-row label { font-size: 12px; color: #ccc; flex-basis: 35%; word-break: break-all; margin: 0; }
#tardix-editor-wrapper .editor-row input, #tardix-editor-wrapper .editor-row select { flex-grow: 1; background: #3c3c3c; color: #fff; border: 1px solid #555; padding: 6px; border-radius: 4px; font-family: monospace; width: 100%; box-sizing: border-box; font-size: 12px; outline: none; }
#tardix-editor-wrapper .editor-row input[type="file"] { padding: 4px; font-size: 11px; cursor: pointer; }
#tardix-editor-wrapper .editor-row input[type="color"] { padding: 0; height: 26px; cursor: pointer; border: none; background: transparent; }
#tardix-editor-wrapper .dynamic-item { display: flex; gap: 5px; margin-bottom: 8px; align-items: flex-start; }
#tardix-editor-wrapper .dynamic-item input[type="text"] { width: 30%; background: #3c3c3c; color: #fff; border: 1px solid #555; padding: 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }
#tardix-editor-wrapper .dynamic-item textarea { width: 70%; height: 40px; background: #3c3c3c; color: #fff; border: 1px solid #555; padding: 6px; border-radius: 4px; font-family: monospace; resize: vertical; font-size: 12px; }

/* --- BOUTONS --- */
#tardix-editor-wrapper button { padding: 8px 12px; background: #0e639c; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background 0.2s; width: 100%; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;}
#tardix-editor-wrapper button:hover { background: #1177bb; }
#tardix-editor-wrapper button.del-btn { width: auto; background: #c53131; padding: 4px 8px; }
#tardix-editor-wrapper button.del-btn:hover { background: #e53935; }
#tardix-editor-wrapper button.add-btn { background: #2ea043; margin-top: 5px; }
#tardix-editor-wrapper button.add-btn:hover { background: #3fb950; }

/* --- CALQUES & COULEURS --- */
#tardix-editor-wrapper .layer-card { background: #1e1e1e; border: 1px solid #444; padding: 10px; margin-bottom: 10px; border-radius: 4px; border-left: 4px solid #fff; }
#tardix-editor-wrapper .layer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: bold; color: #fff; font-size: 13px; }
#tardix-editor-wrapper .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
#tardix-editor-wrapper .lang-block { background: #252526; padding: 8px; border-radius: 4px; margin-bottom: 8px; border: 1px solid #444; }

/* --- MODAL JSON --- */
#json-modal { display: none; position: absolute; top: 20px; right: 20px; bottom: 20px; width: 500px; background: #252526; border: 1px solid #444; padding: 20px; flex-direction: column; z-index: 100; box-shadow: -5px 0 15px rgba(0,0,0,0.5); border-radius: 8px; }
#json-output { flex-grow: 1; background: #1e1e1e; color: #d4d4d4; padding: 10px; border: 1px solid #444; font-family: monospace; font-size: 11px; white-space: pre-wrap; overflow-y: auto; margin-bottom: 10px; border-radius: 4px; }
#json-modal .close-btn { background: #c53131; }
#json-modal .close-btn:hover { background: #e53935; }
.rect-label { pointer-events: none; font-family: monospace; font-size: 12px; font-weight: bold; fill: white; text-shadow: 1px 1px 2px black; }
.resize-handle { cursor: nwse-resize; fill: white; stroke: black; stroke-width: 1; }