/* SB Laser – configurateur cartes de visite */
.sbc {
	--sbc-ink: #1d1f22;
	--sbc-muted: #6b7078;
	--sbc-line: #dfe2e6;
	--sbc-soft: #f4f5f7;
	--sbc-accent: #1d1f22;
	--sbc-accent-2: #b8864b;
	font-size: 15px;
	color: var(--sbc-ink);
	margin: 0 0 1.5rem;
	display: grid;
	gap: 1.25rem;
	width: 100%;
}
.sbc * { box-sizing: border-box; }
.sbc button { font: inherit; color: inherit; cursor: pointer; }

/* On masque les listes déroulantes et le prix natifs : le configurateur les pilote. */
form.variations_form table.variations,
form.variations_form .woocommerce-variation-price,
form.variations_form .reset_variations { display: none !important; }

.sbc-step {
	border: 1px solid var(--sbc-line);
	border-radius: 12px;
	padding: 1.1rem 1.1rem 1.2rem;
	background: #fff;
}
.sbc-step-title { font-weight: 600; font-size: 1.05rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; }
.sbc-num {
	display: inline-grid; place-items: center;
	width: 1.6rem; height: 1.6rem; border-radius: 50%;
	background: var(--sbc-accent); color: #fff; font-size: .85rem;
}
.sbc-help, .sbc-note { color: var(--sbc-muted); font-size: .85rem; margin: .4rem 0 .8rem; }

/* ---------- Épaisseur ---------- */
.sbc-thick-visual { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.sbc-edge {
	flex: 1; height: 56px; border-radius: 8px; background: var(--sbc-soft);
	display: flex; align-items: center; padding: 0 12px;
}
.sbc-edge-card {
	width: 100%; height: 20px; border-radius: 3px;
	background: linear-gradient(180deg, #e9ecef 0%, #9aa1a9 45%, #6d737a 55%, #c9ced3 100%);
	box-shadow: 0 2px 4px rgba(0,0,0,.18);
	transition: height .35s ease;
}
.sbc-edge-label { font-weight: 700; font-size: 1.3rem; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }

.sbc-range {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 8px; border-radius: 999px; outline-offset: 6px;
	background: linear-gradient(90deg, var(--sbc-line), var(--sbc-accent));
	margin: .4rem 0 .2rem;
}
.sbc-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 28px; height: 28px; border-radius: 50%;
	background: #fff; border: 3px solid var(--sbc-accent); box-shadow: 0 2px 6px rgba(0,0,0,.25);
	cursor: grab;
}
.sbc-range::-moz-range-thumb {
	width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 3px solid var(--sbc-accent); box-shadow: 0 2px 6px rgba(0,0,0,.25);
	cursor: grab;
}
.sbc-range-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.sbc-range-labels button {
	background: none; border: 0; padding: .25rem 0; text-align: left; display: grid; opacity: .55;
}
.sbc-range-labels button:last-child { text-align: right; }
.sbc-range-labels button span { font-size: .8rem; color: var(--sbc-muted); }
.sbc-range-labels button.is-active { opacity: 1; }
.sbc-thick-desc { margin: .9rem 0 0; font-size: .9rem; background: var(--sbc-soft); padding: .7rem .85rem; border-radius: 8px; }

/* ---------- Recto / verso ---------- */
.sbc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sbc-seg button {
	border: 2px solid var(--sbc-line); background: #fff; border-radius: 10px;
	padding: .8rem; display: grid; gap: .2rem; text-align: center;
	transition: border-color .15s, background .15s;
}
.sbc-seg button[aria-checked="true"] { border-color: var(--sbc-accent); background: var(--sbc-soft); }
.sbc-seg-price { font-size: .85rem; color: var(--sbc-muted); }

/* ---------- Fichiers ---------- */
.sbc-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.sbc-drop {
	position: relative; display: grid; gap: .25rem;
	border: 2px dashed var(--sbc-line); border-radius: 10px; padding: .9rem;
	text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.sbc-drop[hidden] { display: none; }
.sbc-drop:hover, .sbc-drop.is-over { border-color: var(--sbc-accent); background: var(--sbc-soft); }
.sbc-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sbc-drop-title { font-weight: 600; }
.sbc-drop-status { font-size: .85rem; color: var(--sbc-muted); word-break: break-word; }
.sbc-drop.is-ok { border-style: solid; border-color: #2f8f5b; }
.sbc-drop.is-ok .sbc-drop-status { color: #2f8f5b; }
.sbc-drop.is-err { border-style: solid; border-color: #c0392b; }
.sbc-drop.is-err .sbc-drop-status { color: #c0392b; }
.sbc-drop.is-busy .sbc-drop-status::after { content: " …"; }

/* ---------- Aperçu ---------- */
.sbc-preview { background: radial-gradient(ellipse at center, #eceef1 0%, #d9dce0 100%); border-radius: 12px; padding: 1.2rem; }
.sbc-preview-tabs { display: flex; gap: .4rem; justify-content: center; margin-bottom: .8rem; }
.sbc-preview-tabs[hidden] { display: none; }
.sbc-preview-tabs button { border: 1px solid var(--sbc-line); background: #fff; border-radius: 999px; padding: .3rem .9rem; font-size: .85rem; }
.sbc-preview-tabs button[aria-pressed="true"] { background: var(--sbc-accent); color: #fff; border-color: var(--sbc-accent); }
.sbc-card-wrap { max-width: 460px; margin: 0 auto; perspective: 900px; }
#sbc-canvas {
	display: block; width: 100%; height: auto; border-radius: 14px;
	box-shadow: 0 18px 30px -12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.2);
	transform: rotateX(8deg); transition: transform .4s ease;
}
.sbc-card-wrap:hover #sbc-canvas { transform: rotateX(0deg); }
.sbc-preview-tools { text-align: center; margin-top: .8rem; }
.sbc-link { background: none; border: 0; text-decoration: underline; font-size: .85rem; color: var(--sbc-muted); padding: 0; }
.sbc-preview .sbc-note { text-align: center; margin-bottom: 0; }

/* ---------- Prix ---------- */
.sbc-tiers { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 1rem; }
.sbc-tiers th, .sbc-tiers td { padding: .45rem .6rem; border-bottom: 1px solid var(--sbc-line); text-align: left; }
.sbc-tiers th { color: var(--sbc-muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.sbc-tiers td:last-child, .sbc-tiers th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.sbc-tiers tr.is-current td { background: var(--sbc-soft); font-weight: 700; }
.sbc-tiers tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--sbc-accent-2); }
.sbc-total { display: grid; gap: .3rem; }
.sbc-total > div { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
.sbc-total-label { color: var(--sbc-muted); }
.sbc-total-main { font-size: 1.5rem; font-weight: 700; }
.sbc-total-main .sbc-total-label { font-size: 1rem; font-weight: 400; }

form.variations_form .single_add_to_cart_button.is-locked { opacity: .45; cursor: not-allowed; }

@media (max-width: 480px) {
	.sbc-step { padding: .9rem; }
	.sbc-edge-label { font-size: 1.1rem; min-width: 4.5rem; }
	.sbc-preview { padding: .8rem; }
}

/* ---------- Couleurs ---------- */
.sbc-color-name { font-weight: 400; color: var(--sbc-muted); font-size: .95rem; }
.sbc-colors { display: flex; flex-wrap: wrap; gap: .7rem; }
.sbc-swatch {
	width: 64px; height: 42px; border-radius: 6px; padding: 0;
	border: 2px solid transparent; outline: 1px solid var(--sbc-line); outline-offset: 2px;
	background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.18) 100%), var(--sw);
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
	transition: transform .15s, outline-color .15s;
}
.sbc-swatch--noir-mat { background: var(--sw); }
.sbc-swatch:hover { transform: translateY(-2px); }
.sbc-swatch[aria-checked="true"] { outline: 3px solid var(--sbc-accent-2); }
.sbc-swatch[hidden]{display:none}
.sbc-range-labels button:nth-child(2) { text-align: center; }
.sbc-swatch.has-extra { position: relative; }
.sbc-swatch.has-extra::after { content: "+"; position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--sbc-accent-2); color: #fff; font-size: 12px; line-height: 16px; text-align: center; font-weight: 700; }