/* ============================================================
   Thème URBEX — panneau de commandes
   ------------------------------------------------------------
   Palette (modifiable ici) :
     fond panneau   #1e1e1e
     bordures       #333333
     texte          #cccccc
     texte discret  #888888
     accent         #b02a26  (rouge URBEX)
   ============================================================ */

#urbex-panneau {
	position: absolute;
	top: 0;
	left: 0;
	width: 260px;
	height: 100%;
	background: #1e1e1e;
	border-right: 1px solid #333;
	color: #ccc;
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	z-index: 1000;
	overflow-y: auto;
	transition: transform 220ms ease;
}

#urbex-panneau.up-replie {
	transform: translateX(-260px);
}

/* ---------- En-tête ---------- */
.up-entete {
	padding: 16px 14px 13px;
	border-bottom: 1px solid #333;
}
.up-entete h1 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #eee;
	letter-spacing: 0.02em;
}
.up-entete p {
	margin: 3px 0 0 0;
	font-size: 11px;
	color: #777;
}
.up-accent { color: #b02a26; }

/* ---------- Corps ---------- */
.up-corps { padding: 6px 0; }

.up-bloc {
	padding: 14px;
	border-bottom: 1px solid #2b2b2b;
}
.up-bloc:last-child { border-bottom: none; }

.up-bloc > label {
	display: block;
	color: #999;
	font-size: 12px;
	margin-bottom: 7px;
}

/* ---------- Interrupteurs de coupe ---------- */
.up-inter {
	display: flex !important;
	align-items: center;
	gap: 8px;
	color: #ccc !important;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	margin-bottom: 0 !important;
}
.up-inter input[type="checkbox"] {
	accent-color: #b02a26;
	cursor: pointer;
	width: 14px;
	height: 14px;
}

/* Réglages repliés tant que la coupe est inactive */
.up-reglages {
	display: none;
	margin-top: 12px;
	padding-left: 22px;
}
.up-reglages.up-ouvert { display: block; }

.up-reglages label {
	display: block;
	color: #888;
	font-size: 11px;
	margin: 10px 0 5px 0;
}
.up-val { float: right; color: #bbb; }

/* ---------- Curseurs ---------- */
#urbex-panneau input[type="range"] {
	width: 100%;
	height: 4px;
	-webkit-appearance: none;
	appearance: none;
	background: #3a3a3a;
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}
#urbex-panneau input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
	border: none;
}
#urbex-panneau input[type="range"]::-webkit-slider-thumb:hover { background: #fff; }
#urbex-panneau input[type="range"]::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
}

/* ---------- Listes déroulantes ---------- */
#urbex-panneau select {
	width: 100%;
	background: #2a2a2a;
	color: #ddd;
	border: 1px solid #3d3d3d;
	border-radius: 3px;
	padding: 6px 8px;
	font-size: 12px;
	outline: none;
	cursor: pointer;
}
#urbex-panneau select:hover  { border-color: #4d4d4d; }
#urbex-panneau select:focus  { border-color: #5a5a5a; }

/* ---------- Bouton de repli ---------- */
#urbex-bascule {
	position: absolute;
	top: 12px;
	left: 272px;
	width: 30px;
	height: 30px;
	background: rgba(30, 30, 30, 0.85);
	border: 1px solid #444;
	border-radius: 4px;
	color: #bbb;
	font-size: 15px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	z-index: 1001;
	transition: left 220ms ease, background 120ms;
	user-select: none;
}
#urbex-bascule:hover { background: #333; color: #fff; }
#urbex-bascule.up-replie { left: 12px; }

/* ---------- Barre de défilement ---------- */
#urbex-panneau::-webkit-scrollbar { width: 8px; }
#urbex-panneau::-webkit-scrollbar-track { background: #1a1a1a; }
#urbex-panneau::-webkit-scrollbar-thumb {
	background: #3a3a3a;
	border-radius: 4px;
}
#urbex-panneau::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }