:root {
	--navH: 44px;
	--leftW: 260px;
	--bgDark: #111;
	--bgMid: #1a1a1a;
	--bgLight: #2a2a2a;
	--border: #444;
	--text: #eee;
	--textDim: #aaa;

	--bcolor: #1fa5ce;
}

.workspace {
	display: grid;
	grid-template-columns: 250px  1fr 250px;
	overflow: hidden;
	position: relative;
	height: 100%;
}

.leftPanel {
	/*width: var(--leftW); */
	background: var(--bgMid);
/*	border-right: 1px solid var(--border); */
	/*display: flex;
	flex-direction: column;*/
	display: grid;
	grid-template-rows: auto 1fr 250px auto;
	overflow-y: auto;
	z-index: 10;
	padding-top: 5px;
}



#menu2 {
	width: var(--leftW);
	background: var(--bgMid);
	display: grid;
	grid-template-rows: auto auto 1fr;
	z-index: 10;
	height: calc( 100vh - 60px);
}

.rightPanel {
	
	/*border-left: 1px solid var(--border);*/
	/*border-right: 1px solid var(--border); */
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	
}


.panelSection {
	border-bottom: 1px solid var(--border);
	padding: 12px;
	padding-right: 26px;
}

.panelHeader {
	font-size: 10px;
	color: var(--textDim);
	margin-bottom: 10px;
	text-transform: uppercase;
}

.btn {
	flex: 1;
	background: var(--bgLight);
	border: 1px solid var(--border);
	padding: 6px;
	font-size: 11px;
	border-radius: 4px;
	color: #fff;
	opacity: 0.8;
	cursor: pointer;
	transition: background .15s, border-color .15s, opacity .15s;
}

.btn:hover {
	opacity: 1;
}

.btn.active {
	background: #3a3a3a;
	border-color: #aaa;
	opacity: 1;
	box-shadow: inset 0 0 0 1px #888;
}


.navBAct {
	background-color: #5d6d71;
	border-radius: 3px;
	color: #fff;
	padding-left: 5px !important;
	opacity: 0.9 !important;
}


.mmBtn {
	font-size: 18px;
}

.ctBtn {
	padding: 0 6px;
}


.menuBtn {
	padding: 2px;
	opacity: 0.8;
	cursor: pointer;
}

.menuBtn:hover {
	opacity: 1;
}

.leftBtnAct {
	border-left: 2px solid #1fa5ce;
}


.centerz {
	flex: 1;
	position: relative;
	background: #333;
	overflow: hidden;
}

#infiniteCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	transform-origin: 0 0;
}

.frameCt {
	position: absolute;
	background: white;
	box-sizing: border-box;
	pointer-events: all;
	overflow: hidden;
	/* Sécurité supplémentaire */
}

.frameCt.drawing {
	border: 1px solid #007bff;
	background: rgba(255, 255, 255, 0.8)
}

.layer-group-ct {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.layer-group-ct canvas {
	display: block;
	width: 100%;
	height: 100%;
}

#dimIndicator {
	position: absolute;
	background: #1fa5ce;
	color: white;
	padding: 2px 6px;
	font-size: 11px;
	border-radius: 3px;
	pointer-events: none;
	display: none;
	z-index: 1000;
	transform: translateX(-50%);
	white-space: nowrap;
}

.resizeHandle {
	width: 4px;
	background: #333;
	z-index: 10;
}





.menuHeader {
	padding: 10px;
	font-size: 10px;
	color: var(--textDim);
	text-transform: uppercase;
}

.layerList {
	flex: 1;
	overflow-y: auto;
	padding: 6px;
}

.frameItem {
	padding: 8px 6px;
	margin-bottom: 4px;
	margin-top: 8px;

	font-size: 10px;
	font-weight: bold;
	color: var(--text);
	background: #333;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.frameItem:first-child {
	margin-top: 0;
}


.frameSelect {
	background-color: #104d5f;
}

.frameActions {
	display: flex;
	gap: 8px;
}

.iconBtn {
	cursor: pointer;
	font-size: 16px;
	opacity: 0.6;
	transition: opacity 0.2s;
	display: flex;
	align-items: center;
}

.iconBtn:hover {
	opacity: 1;
	color: #fff;
}

.layerGroupItem {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px;
	margin-bottom: 3px;
	cursor: pointer;
	/*border: 1px solid transparent;*/
	font-size: 11px;
	margin-left: 15px;
	color: #ddd;
	/*background: rgba(255, 255, 255, 0.02);*/
}

.layerGroupItem:hover {
	background: var(--bgLight);
}

.layerGroupItem.selected {
	/*
     background: var(--bgLight);
     border-color: #666;
     */
	border-left: 2px solid var(--bcolor);
}

.groupIcon {
	font-size: 14px;
	color: var(--textDim);
}

#dropZone {
	border: 2px dashed #555;
	padding: 30px 10px;
	text-align: center;
	cursor: pointer;
	border-radius: 6px;
	color: var(--textDim);
	font-size: 11px;
	margin-bottom: 10px;
	transition: all 0.2s;
}

#dropZone:hover {
	border-color: #888;
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}


#mainMenu {
	position: absolute;
	left: 50%;
	top: -40px;
	transform: translateX(-50%);
	width: 350px;
	height: 25px;
	z-index: 1;
	display: flex;
	gap: 10px;
}


.ctOptions {
	font-size: 11px;
	padding: 6px;
	background-color: #333;
	margin: 0 6px;
	margin-top: 3px;
	margin-bottom: 10px;
	border-radius: 3px;
}


#frameGhost {
	position: absolute;
	pointer-events: none;
	border: 2px dashed #1fa5ce;
	background: rgba(255, 255, 255, 0.08);
	box-sizing: border-box;
	display: none;
	z-index: 9999;
}

#frameGhost .ghost-label {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #444;
	color: #fff;
	font-size: 10px;
	font-family: monospace;
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
	pointer-events: none;
}


.txtMenu {
	font-size: 11px;
	padding: left:5px;
}

.frameTitle {
	font-size: 11px;
	text-align: center;
	color: #888;
}


.inpApp {
	background-color: rgba(0,0,0,0.8);
	color: #ccc;
	border: 0;
	padding: 2px 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);

}

.inpAppRange {
	filter: grayscale(1) brightness(50%);
	width: 125%;
	outline: 0;
	transform: scale(0.8);
	transform-origin: 0;
}

.inpAppRange:focus {

	outline: 0;
}

.negMg {
	margin-top: -5px;
}





		.inpColr{
			border:0;
			background-color: #1a1a1a;
		}
		.inpColr:focus{
			outline:0;
		}


		.colorDef, {
			width: 25px;
			height: 25px;
			
			border: 1px solid #555;
			cursor: pointer;
			display: inline-block;
			background-color: #000000;
			vertical-align: middle;
			/* Permet de bien visualiser la couleur même si elle est transparente */
			background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), 
							  linear-gradient(-45deg, #ccc 25%, transparent 25%), 
							  linear-gradient(45deg, transparent 75%, #ccc 75%), 
							  linear-gradient(-45deg, transparent 75%, #ccc 75%);
			background-size: 10px 10px;
			background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
			box-shadow: inset 0 0 0 25px currentColor; /* La couleur avec opacité viendra s'appliquer via la prop color JS */
		}


		.defColor {
			width: 25px;
			height: 25px;
			border: 1px solid #555;
			cursor: pointer;
			display: inline-block;
			background-color: #000000;
			vertical-align: middle;
			
		}




		#ctColorPic {
			display: none;
			position: absolute;
			z-index: 9999;
			background: #111;

			border-radius: 5px;
			padding: 7px;
			box-shadow: 0 10px 40px rgba(0,0,0,0.8);
		}

		.close-color-pic {
			text-align: right;
			margin-bottom: 8px;
			color: #ddd;
		}

		.close-color-pic i {
			cursor: pointer;
			font-size: 14px;
			opacity: 0.7;
		}

		.close-color-pic i:hover {
			opacity: 1;
		}

		.ctFieldBox {
			display: flex;
			align-items: center;
			gap:8px;
			font-size: 11px;
			color: rgba(255,255,255,0.5);
		}
		/* ------------------------------------------- */
		
		/* Styles pour le layer Texte */
		.text-layer-node {
			position: absolute;
			min-width: 50px;
			min-height: 20px;
			padding: 8px;
			color: #444; /* Couleur par défaut */
			white-space: pre-wrap;
			word-wrap: break-word;
			outline: none;
			cursor: text;
			box-sizing: border-box;
			line-height: 1.2;
		}
		
		/* Bordure visible au survol (près des bords) ou quand sélectionné */
		.text-layer-node:hover, 
		.text-layer-node.active-text {
			box-shadow: inset 0 0 0 1px #1fa5ce;
			/*background-color: #1fa5ce;*/
		}

		.grLayer {
			display: grid;
			grid-template-columns: 1fr auto auto;
		}

		.layerName {
			padding-left: 3px;
		}

		.rMenu {
			display: none;
		}

		/* ---- Styles pour la Modale de la Galerie ---- */
		#galleryOverlay {
			position: absolute;
			top: 3px;
			right: 3px;

			width: 500px;
			/* max-height: 100%; */
			height: 100%;
			background: #1a1a1a;
			border: 1px solid #333;
			border-radius: 8px;
			z-index: 2000;
			display: flex;
			flex-direction: column;
			box-shadow: 0 10px 40px rgba(0,0,0,0.8);
		}
		
		.galleryHeader {
padding: 10px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 11px;
  color: #939393;
		}

		.galleryHeader i {
			font-size: 14px;
		}

		.galleryHeader i:hover {
			color: #fff;
		}

		.galleryContent {
			padding: 10px;
			overflow-y: auto;
			display: grid;
			/*grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); */
			grid-template-columns: repeat(auto-fit, 150px);
			gap: 12px;
		}

		.gallery-item {
			cursor: pointer;
			border-radius: 6px;
			overflow: hidden;
			background: #252525;
			transition: transform 0.2s, box-shadow 0.2s;
			display: flex;
			flex-direction: column;

			height: 200px;
		}

		.gallery-item:hover {
			transform: scale(1.05);
			box-shadow: 0 0 0 2px #1fa5ce;
		}

		.gallery-item img {
			width: 100%;
			height: 100px;
			object-fit: cover;
			display: block;
			border-bottom: 1px solid #333;
		}

		.gallery-item-info {
			padding: 8px;
			display: flex;
			flex-direction: column;
			gap: 4px;
		}

		.gallery-item-title {
			font-size: 11px;
			font-weight: bold;
			color: #eee;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.gallery-item-author {
			font-size: 9px;
			color: #888;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* ---- Styles pour le Drag and Drop (Ordre des calques) ---- */
		body.is-dragging .layerGroupItem * {
			pointer-events: none; /* Empêche les icônes enfants de perturber le drop */
		}
		.layerGroupItem.dragging {
			opacity: 0.4;
			background-color: #333;
		}
		.layerGroupItem.drag-over-top {
			border-top: 2px solid #1fa5ce !important;
		}
		.layerGroupItem.drag-over-bottom {
			border-bottom: 2px solid #1fa5ce !important;
		}
		.drag-handle {
			cursor: grab;
			color: #666;
			padding-right: 6px;
		}
		.drag-handle:active {
			cursor: grabbing;
		}
		
		/* Shape Custom Drawing */
		.custom-shape {
			position: absolute;
			box-sizing: border-box;
		}



		.frameItem:not(:first-child) {
		    margin-top: 10px;
		}
		




		.btnSel {
			background-color: var(--bcolor);
		}








				.grTxtur { display: grid; grid-template-columns: 1fr 1fr 1fr; gap:2px; }
		.grCheck { display: grid; grid-template-columns: 1fr auto; }
		.grTxtur > div { cursor: pointer; }
		.vzWrap, #vzWrap { z-index: 999999 !important; }
		.vzEyeScr, #vzEyeScr { z-index: 999998 !important; }
		.vzEyeInfo, #vzEyeInfo { z-index: 999999 !important; }
        
        /* Système de sélection unifié GCS (indépendant du zoom) */
        #GCS {
            position: absolute;
            left: 0; top: 0; width: 0; height: 0;
            z-index: 1000;
            pointer-events: none;
        }
        #selectCtrlBox {
            position: absolute;
            border: 1px solid #1fa5ce;
            z-index: 1;
            display: none;
            pointer-events: none;
        }
        .gcs-handle {
            position: absolute;
            width: 8px; height: 8px;
            background: white;
            border: 1px solid #1fa5ce;
            box-sizing: border-box;
            pointer-events: auto;
        }
        #selectCtrlTL { top: -4px; left: -4px; cursor: nwse-resize; }
        #selectCtrlTR { top: -4px; right: -4px; cursor: nesw-resize; }
        #selectCtrlBL { bottom: -4px; left: -4px; cursor: nesw-resize; }
        #selectCtrlBR { bottom: -4px; right: -4px; cursor: nwse-resize; }

        #selectCtrlRotate { 
            position: absolute;
            width: 8px; height: 8px;
            background: white;
            border: 1px solid #1fa5ce;
            border-radius: 50%; 
            box-sizing: border-box;
            pointer-events: auto;
            top: -20px; 
            left: 50%; 
            margin-left: -4px; 
            cursor: url('rotate.png') 12 12, auto; 
        }

        .text-layer-node { word-wrap: break-word; white-space: pre-wrap; outline: none; cursor: text; }
        .transformable { cursor: move; }


        .addActions {
        	display: grid;
        	grid-template-columns: 1fr 1fr 1fr 1fr;
        	gap:7px;
        	margin-right: 5px;
        }


        .layAddIco {
        	  display: flex;

			  gap: 5px; 
			  align-items: center; 
			  font-size: 13px;
			  padding-right: 10px;
        }


        .layerVis {
        	padding: 0 3px;
        }





        .frameCt {
            background-color: #ffffff;
            background-image: 
                linear-gradient(45deg, #e5e5e5 25%, transparent 25%), 
                linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #e5e5e5 75%), 
                linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }








/* COLORPICKER ============================================================================================= */
	.vzWrap {
		position: fixed;
		z-index: 10000;
		display: none;
	}

	.vzBox {
		background: #222;
		border-radius: 10px;
		padding: 10px;
		width: 240px;
		box-sizing: border-box;
		box-shadow: 0 8px 32px rgba(0, 0, 0, .7);
		user-select: none;
	}

	.vzCanvas {
		width: 100%;
		height: 170px;
		border-radius: 6px;
		cursor: crosshair;
		display: block;
	}

	.vzHueWrap,
	.vzAlpWrap {
		position: relative;
		height: 14px;
		border-radius: 7px;
		margin-top: 9px;
		cursor: pointer;
	}

	.vzHueWrap {
		background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	}

	.vzAlpWrap {
		background-image: linear-gradient(45deg, #999 25%, transparent 25%), linear-gradient(-45deg, #999 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #999 75%), linear-gradient(-45deg, transparent 75%, #999 75%);
		background-size: 8px 8px;
		background-position: 0 0, 0 4px, 4px -4px, -4px 0;
	}

	.vzAlpGrad {
		position: absolute;
		inset: 0;
		border-radius: 7px;
		pointer-events: none;
	}

	.vzThumb {
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
		pointer-events: none;
		background: transparent;
	}

	.vzCThumb {
		position: absolute;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	.vzCWrap {
		position: relative;
	}

	.vzRow {
		display: flex;
		align-items: center;
		gap: 7px;
		margin-top: 9px;
	}

	.vzEye {
		background: none;
		border: 1px solid #555;
		border-radius: 5px;
		padding: 3px 5px;
		cursor: pointer;
		color: #aaa;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		transition: color .15s, border-color .15s, background .15s;
	}

	.vzEye:hover {
		color: #fff;
		border-color: #999;
	}

	.vzEye.vzOn {
		color: #fff;
		border-color: #4af;
		background: rgba(80, 160, 255, .15);
	}

	.vzEye svg {
		width: 18px;
		height: 18px;
		display: block;
	}

	.vzHex {
		flex: 1;
		background: #333;
		border: 1px solid #555;
		border-radius: 5px;
		color: #eee;
		font-size: 12px;
		padding: 4px 7px;
		outline: none;
		min-width: 0;
	}

	.vzHex:focus {
		border-color: #888;
	}

	.vzAN {
		width: 40px;
		background: #333;
		border: 1px solid #555;
		border-radius: 5px;
		color: #eee;
		font-size: 12px;
		padding: 4px 4px;
		text-align: center;
		outline: none;
		-moz-appearance: textfield;
	}

	.vzAN::-webkit-inner-spin-button,
	.vzAN::-webkit-outer-spin-button {
		-webkit-appearance: none;
	}

	.vzAN:focus {
		border-color: #888;
	}

	.vzPct {
		color: #888;
		font-size: 11px;
		flex-shrink: 0;
	}

	.vzSep {
		border: none;
		border-top: 1px solid #383838;
		margin: 9px 0 0 0;
	}

	.vzSW {
		display: flex;
		gap: 5px;
		margin-top: 8px;
		flex-wrap: wrap;
	}

	.vzS {
		width: 22px;
		height: 22px;
		border-radius: 4px;
		border: 1px solid #555;
		cursor: pointer;
		flex-shrink: 0;
		position: relative;
		overflow: hidden;
	}

	.vzS::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: linear-gradient(45deg, #777 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #777 75%);
		background-size: 6px 6px;
		background-position: 0 0, 0 3px, 3px -3px, -3px 0;
		background-color: #444;
	}

	.vzSI {
		position: absolute;
		inset: 0;
	}

	.vzS:hover {
		border-color: #fff;
	}

	.vzBtns {
		display: flex;
		gap: 7px;
		margin-top: 9px;
	}

	.vzBtn {
		flex: 1;
		padding: 6px 0;
		border-radius: 6px;
		border: 0;
		background: #333;
		color: #ddd;
		font-size: 13px;
		cursor: pointer;
		transition: background .15s;
	}

	.vzBtn:hover {
		background: #444;
	}

	/* Pipette  */
	.vzEyeScr {
		position: fixed;
		inset: 0;
		z-index: 9998;
		cursor: crosshair;
		display: none;
		background: transparent;
	}

	.vzEyeInfo {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0, 0, 0, .82);
		color: #fff;
		font-size: 12px;
		padding: 7px 14px;
		border-radius: 20px;
		pointer-events: none;
		display: none;
		white-space: nowrap;
		z-index: 9999;
		font-family: monospace;
	}


	.vzRadioCt {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 12px;
        margin-bottom: 5px;
       
    }

    .vzRadioOp {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .vzRadB {
    	filter: grayscale(1);
    }

    #textureOptions {
    	font-size: 11px !important;
    }

/* COLORPICKER FIN ========================================================================================= */



.bookmark-icon {
	color: var(--bcolor);
}




.centreVerti {
	display: flex;
align-items: center;
}


.itemCopy{
	display: grid;
	grid-template-columns: 20px 30px 1fr 20px;
	gap:10px;
	padding: 5px 7px;
	cursor: pointer;
}

.itemCopy:hover {
	background: var(--bgLight);
}

.itemCopy > div {
	display: flex;
	align-items: center;
}

.selCopy {
	border: 2px solid #1fa5ce;
}