.heightmap-editor {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: sans-serif;
}

/* TOOLBAR */
.toolbar {
    display: flex;
    gap: 30px;
    align-items: flex-start; /* important */
    flex-wrap: wrap;
}

/* Chaque bloc outil */
.tool-section {
    display: flex;
    flex-direction: column;
    gap: 4px; 
    min-width: 30px;
}

.tool-checkbox {
    position: relative;
    display: flex;
    align-items: left;
    gap: 4px;
}

#brushSquare {
    position:absolute;
    margin-top: 20px;
}

.tool-checkbox label {
    margin: 0;
}

/* Labels */
.tool-section label {
    font-size: 13px;
    font-weight: bold;
}

/* Range sliders */
.tool-section input[type="range"] {
    width: 150px;
    margin-top: 10px;
}

/* PALETTE */
#colorPalette {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap; /* évite débordement */    
}

/* Cercles */
.color-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #000;
    flex-shrink: 0;
}

.color-circle.selected {
    outline: 2px solid #00aaff;
    transform: scale(1.2);
}

/* MAIN AREA */
.editor-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Canvas containers */
.canvas-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Labels canvas */
.canvas-container label {
    font-weight: bold;
}

/* Canvas 2D */
#heightmapCanvas {
    width: 600px;
    height: 600px;
    border: 1px solid #555;
    background: black;
}

/* Canvas 3D */
#preview3DCanvas {
    width: 600px;
    height: 600px;
    border: 1px solid #555;
}

/* Select texture */
#textureSelector {
    margin-top: 5px;
    width: 150px;
}

button.button {
	width: 150px;
    height: 40px;
	display: inline;
	margin-left: 10px;
}