#sbspli3d, sbspli3d canvas {
	display:block;
	border: none;
	outline: none;
	/*height: 70vh;*/
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	/*min-height: 500px;*/
}


#zone3d {
	position: relative;
}
	

#changevue {
	position: absolute;
	top:12px;
	left:12px;
	z-index: 100;
	transform: scale(1.2);
	
}
#turn90 {
	position: absolute;
	top:15px;
	right:3px;
	z-index: 100;
}

#toggleface{
	position: absolute;
	bottom:0;
	right:18px;
	z-index: 100;
	transform: scale(1.2);
}
/*
.entry-content {
	margin: 0 -18%;
}*/

.sectionpresenteur :focus-visible, #presenteur:focus-visible {
	outline-width: 0px !important;
	outline:none;
}

:root :where(.is-layout-flow) > * {
    margin-block-start: 12px !important;
    margin-block-end: 0;
}


input[type=range] {
	width : 73% !important;
	margin-right: 5px;
	/*-webkit-appearance : auto !important;*/
}

select option:disabled {
	background-color : #ccc !important;
}

.swatch-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.swatch {
  padding: 6px 6px;
  border: 2px solid #ccc;
  cursor: pointer;
  font-size: 14px;
  color: #111;
  transition: 0.1s;
  user-select: none;
}

#infofacevue {
	font-weight: bold;
}

/*ordre des rals et aspects "prioritaires" */
.swatch[data-value="noir"], 
.swatch[data-value="brut"],
.swatch[data-value="galva"],
.swatch[data-value="brosse"],
.swatch[data-value="larme"],
.swatch[data-value="as"],
.swatch[data-value="electrozingue"],
.swatch[data-value="poly-miroir"],
.swatch[data-value="aspect-cuir"],
.swatch[data-value="7016"],
.swatch[data-value="9005"],
.swatch[data-value="9010"],
.swatch[data-value="9016"]  {
	order:-1;
}

/*ordre des matériaux les plus vendus */
.swatch[data-value="aluminium-laque-satine"], 
.swatch[data-value="aluminium-laque-texture"],
.swatch[data-value="acier-laque"]
 {
	order:1;
}

.swatch[data-value="aluminium"],
.swatch[data-value="aluminium-anodise-as"],
.swatch[data-value="aluminium-brosse"],  
.swatch[data-value="aluminium-larme"]
 {
	order:2;
}

.swatch[data-value="acier"],
.swatch[data-value="acier-brut"],
.swatch[data-value="acier-electrozingue"], 
.swatch[data-value="acier-galvanise"],
.swatch[data-value="acier-larme"]
 {
	order:3;
}

.swatch[data-value="inox-304"],
.swatch[data-value="inox-304-aspect-cuir"],
.swatch[data-value="inox-304-brosse"], 
.swatch[data-value="inox-316"],
.swatch[data-value="inox-316-brosse"],
.swatch[data-value="inox-316-poli-miroir"]
{
	order:4;
}


#recaprix {
    position: fixed;
	padding: 15px;
	width: 40%;
    bottom:0;
	text-align:center;
    right: 30%;
    margin-left: -50%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(224,224,224,0.9) 100%);
    border-color : rgb(206, 205, 205);
    border-width:1px;
    border-style: solid;
	display: flex;
	z-index : 10000;
	justify-content: space-between;
}

@media screen and (max-width: 800px) {
	#recaprix {
		width: 100%;
		right: 0;
		margin-left: 0;
	}
	
	
	.entry-content > .wp-block-group {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.entry-content > .wp-block-columns {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	
}

.dashicons-image-rotate-right {
	font-size: 24px;
}


#attribute_pa_ral-teinte .swatch {
	width: 60px;
    height: 60px;
    border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items : center;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	color: #fbd77e;
	text-shadow: 1px 1px 5px #000000;
}

#attribute_pa_matiere .swatch {
	width: 112px;
    height: 60px;
    text-align: center;
	display: flex;
	justify-content: center;
	align-items : center;
	font-size: 11px;
}

.swatch:hover {
  border-color: #000;
}


.swatch.is-selected {
  background: #000;
  color: #fff;
  text-shadow: 0px 0px 1px black;
  /*border: 1px solid orange;*/
  border-color: orange;
  border-width: 3px;
}

.swatch.is-disabled {
  opacity: 0.1;
  cursor: not-allowed;
  /*text-decoration: line-through;*/
}

#typlichoices {
	display :flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position:relative;
}

#zswatches {
	position:relative;
}
#sbspliui {
	position:relative;
}

#plichoice-lock, #dessin-lock, #swatches-lock{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.4);
    z-index:10;
    cursor:not-allowed;
}
	
.arcModele {
	border : 1px solid #bbb;
	width:14%;
}

@media screen and (max-width: 800px) {
	.arcModele {
		width:32%;
		}
}
	
	

.arcModele img{
		width:100%;
		height: auto;
}

	

.arcModele.selected {
	border:2px solid orange;
}

.coteslider, .angleslider {
	display: flex;
	flex-wrap : wrap;
	justify-content: space-between;
	align-items: center;
}

.coteslider label, .angleslider label {
    margin-right: 6px;
}

.coteslider input[type="range"], .angleslider input[type="range"] {
    flex: 1;
}

.coteslider input[type="range"] {
    background-color: #7b5f5f;
}

.angleslider input[type="range"] {
    background-color :#1a4c6c;
}

.coteslider input[type="number"] {
    width: 80px;
}

.angleslider input[type="range"] {
  --bs-form-range-track-bg: blue !important;
  --bs-form-range-thumb-bg: red  !important;
  --bs-form-range-thumb-active-bg: orange !important;
}

.ui-lock{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.4);
    z-index:10;
    cursor:not-allowed;
}


@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;
}