#konfigurable3D {
    aspect-ratio: 1 / 0.8;
    width: 100%;
    border: 1px solid gray;
    border-radius : 5%;
}

.blocolors {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.btncircle {
    width: 50px;
    height:50px;
    border-radius:50%;
    margin-right:4px;
}

.form-switch.form-switch-lg .form-check-input {
  width: 3.2em;
  height: 1.6em;
  border: 1px solid grey;
}

.form-switch.form-switch-lg label {
	position:relative; 
	top: 5px;
	left: 3px;
}

.wpcf7-form br {
    display: none;
}

#zoneK3D {
	position: relative;
}

.modal-header {
	justify-content: space-between;
}

.modal-title {
	color: #095b70;
}

@keyframes dragHint {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

.hint-3d {
	position: absolute;
	top: 50%;
	right: 40%;
	background: rgba(0,0,0,0.75);
	color: white;
	padding: 12px 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	pointer-events: none;
	opacity: 0.7;
}

.hint-3d .cursor {
  font-size: 22px;
  display: inline-block;
  animation: dragHint 1.4s ease-in-out infinite;
}

.hint-3d.hidden {
  opacity: 0;
  pointer-events: none;
}


.fin-section {
      border: 1px solid #444;
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 8px;
      background: rgba(205, 203, 203, 0.25);
    }
    .fin-famille-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #575656;
      margin-bottom: 6px;
    }
    .fin-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .fin-swatch {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      border: 2px solid transparent;
      cursor: pointer;
      position: relative;
      transition: transform 0.1s, border-color 0.15s;
      flex-shrink: 0;
    }
    .fin-swatch:hover {
      transform: scale(1.2);
      z-index: 2;
      border-color: rgba(255,255,255,0.5);
    }
    .fin-swatch.active {
      border-color: #fff;
      transform: scale(1.15);
    }
    /* Tooltip au survol */
    .fin-swatch::after {
      content: attr(data-label);
      position: absolute;
      bottom: 26px;
      left: 50%;
      transform: translateX(-50%);
      background: #111;
      color: #eee;
      font-size: 10px;
      white-space: nowrap;
      padding: 2px 6px;
      border-radius: 3px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .fin-swatch:hover::after {
      opacity: 1;
    }
    /* Badge finition sélectionnée */
    #fin-current {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: rgba(200, 200, 200, 0.3);
      border-radius: 5px;
      margin-bottom: 8px;
      font-size: 11px;
      color: #5e5b5b;
    }
    #fin-current-dot {
      width: 40px;
      height: 16px;
      border-radius: 3px;
      border: 1px solid #555;
      flex-shrink: 0;
    }
    #fin-current-label { flex: 1; }
    #fin-current-famille {
      font-size: 10px;
      color: #666;
      font-style: italic;
    }