/* Boutique Broderie — champs de personnalisation sur la fiche produit.
   Utilise les jetons --fc-* du thème enfant si présents, sinon repli neutre. */

.bb-perso {
	--_accent: var(--fc-rose-deep, #BE6470);
	--_ink: var(--fc-text, #463A33);
	--_soft: var(--fc-text-soft, #7B6B61);
	/* Textes posés sur le fond --fc-surface-2 du panneau (D104, audit Lot 9 P1-2) :
	   --_soft (4.19:1) et --_accent (3.29:1) y sont sous 4.5:1. */
	--_soft-text: var(--fc-text, #463A33);
	--_accent-ink: var(--fc-rose-ink-strong, #AC4856);
	--_border: var(--fc-border, #E4DED2);
	/* Limite des champs ≥ 3:1 sur le panneau et la page (D106, audit Lot 9 P2-1 ;
	   recette : tests/check-field-borders.py). --_border reste pour les filets. */
	--_field-border: var(--fc-border-field, #8F847A);
	--_surface: var(--fc-surface, #fff);
	--_radius: var(--fc-radius-sm, 8px);
	border: 1px solid var(--_border);
	border-left: 3px solid var(--_accent);
	border-radius: var(--_radius);
	background: var(--fc-surface-2, #F6F1E8);
	padding: 20px;
	margin: 20px 0;
}

.bb-perso__title {
	font-family: var(--fc-font-display, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--_ink);
}

.bb-field { border: 0; padding: 0; margin: 0 0 16px; }
.bb-field > legend,
.bb-field > label:first-child {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: 6px;
	color: var(--_ink);
	padding: 0;
}

.bb-perso input[type="text"],
.bb-perso textarea,
.bb-perso input[type="file"],
.bb-perso select {
	width: 100%;
	font: inherit;
	font-size: 16px;
	padding: 10px 12px;
	border: 1px solid var(--_field-border);
	border-radius: var(--_radius);
	background: var(--_surface);
	color: var(--_ink);
	min-height: 44px;
}

/* Champ fichier + bouton « Retirer » (D28) : beaucoup de navigateurs mobiles
   n'ont pas de « × » natif sur un <input type="file"> une fois un fichier
   choisi — ce bouton est le seul moyen de revenir en arrière. */
.bb-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-file-row input[type="file"] { flex: 1 1 auto; min-width: 0; width: auto; }
.bb-btn-text {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 8px 2px;
	min-height: 44px;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--_accent-ink);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bb-btn-text:hover,
.bb-btn-text:focus-visible { color: var(--_ink); }
.bb-btn-text[hidden] { display: none; }

.bb-hint { font-size: .8rem; color: var(--_soft-text); margin: 4px 0 0; }

.bb-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--_border);
	border-radius: 999px;
	padding: 8px 14px;
	margin: 0 6px 6px 0;
	min-height: 40px;
	cursor: pointer;
	font-size: .88rem;
	background: var(--_surface);
}
.bb-choice:has(input:checked) {
	border-color: var(--_accent);
	background: color-mix(in srgb, var(--_accent) 10%, transparent);
	font-weight: 600;
}
.bb-choice:has(input:focus-visible) { outline: 2px solid var(--_accent); outline-offset: 2px; }

/* Vignette symbole : la photo sert de pochoir (silhouette), remplie de la
   couleur de fil choisie — voir bb-front.js:updateSymbolPreview pour le détail
   (mask-mode:alpha, pas le mode par défaut "luminance" qui délave les photos
   à dominante sombre/rouge). --_symbol-tint pilotée en JS depuis le composant
   « fil » ; repli sur la couleur d'encre du thème si aucun fil sélectionné. */
.bb-symbol-thumb {
	width: 22px;
	height: 22px;
	display: inline-block;
	vertical-align: middle;
	background-color: var(--_symbol-tint, var(--_ink));
	-webkit-mask-image: var(--bb-symbol-img);
	mask-image: var(--bb-symbol-img);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	mask-mode: alpha;
}

/* Étape 2 — photo repère « vrai produit » d'un composant : vignette sous le
   libellé, cliquable pour agrandir dans un nouvel onglet. */
.bb-comp-help {
	display: inline-block;
	margin: 0 0 8px;
	border-radius: var(--_radius);
	overflow: hidden;
	border: 1px solid var(--_border);
	line-height: 0;
}
.bb-comp-help img { width: 56px; height: 56px; object-fit: cover; display: block; }
.bb-comp-help:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }

.bb-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 12px;
}
.bb-swatch { position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; cursor: pointer; }
.bb-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bb-swatch__disc {
	width: 42px; height: 42px; border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .18);
	box-shadow: inset 0 0 0 3px var(--_surface), 0 0 0 1px transparent;
	transition: box-shadow .12s;
}
.bb-swatch__name { font-size: .74rem; color: var(--_soft-text); line-height: 1.2; }
.bb-swatch input:checked + .bb-swatch__disc { box-shadow: inset 0 0 0 3px var(--_surface), 0 0 0 2px var(--_accent); }
.bb-swatch input:checked ~ .bb-swatch__name { color: var(--_ink); font-weight: 700; }
.bb-swatch input:focus-visible + .bb-swatch__disc { outline: 2px solid var(--_accent); outline-offset: 2px; }
.bb-swatch.is-out { opacity: .4; cursor: not-allowed; }
.bb-swatch.is-out .bb-swatch__name::after { content: " — épuisé"; }

/* Symbole / logo mutuellement exclusifs (cf. bb-front.js:syncSymbolLogoExclusivity). */
.bb-choice:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.bb-perso input[type="file"]:disabled { opacity: .5; cursor: not-allowed; }
.bb-exclusive-hint { color: var(--_accent-ink); font-weight: 600; }

.bb-supplement {
	margin: 12px 0;
	padding: 8px 12px;
	border-radius: var(--_radius);
	background: color-mix(in srgb, var(--_accent) 8%, transparent);
	font-size: .9rem;
}

.bb-spell { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; margin-top: 8px; }
.bb-spell input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.bb-consent-showcase__gift { display: block; margin-top: 4px; color: var(--_accent-ink); }

.bb-perso.is-off .bb-perso__fields { display: none; }

.bb-preview {
	text-align: center;
	/* Reste visible pendant que la longue zone de personnalisation défile en
	   dessous — se fige en haut de l'écran (comme une mini-fenêtre) tant que
	   .bb-perso__fields n'a pas fini de défiler, puis repart avec le reste de
	   la page. Fond opaque nécessaire : un élément sticky peut recouvrir du
	   contenu qui défile en dessous. Le fond « déborde » exprès jusqu'aux
	   bords de .bb-perso (marges négatives = padding du parent, restituées en
	   padding interne) : ça couvre aussi le léger débord natif du <legend>
	   « Symboles » (bug de rendu HTML standard, invisible avant que quelque
	   chose ne défile fixé par-dessus) et ça remplit toute la largeur du
	   panneau, pas juste une carte centrée. */
	position: sticky;
	top: 12px;
	z-index: 5;
	background: var(--fc-surface-2, #F6F1E8);
	margin: 0 -20px 20px;
	padding: 8px 20px 0;
}
.bb-preview__svg {
	width: 100%;
	height: auto;
	border-radius: var(--_radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
.bb-preview__svg rect,
.bb-preview__svg path { fill: var(--_border); transition: fill .15s ease; }
.bb-preview__svg text {
	font-size: 26px;
	dominant-baseline: middle;
}
.bb-preview__caption {
	font-size: .72rem;
	color: var(--_soft-text);
	margin: 6px 0 0;
}

/* Étape 3b — deux vues de l'aperçu, choisies par 2 boutons radio sous l'image. */
.bb-preview__views {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: center;
	margin: 8px 0 2px;
}
.bb-preview__view {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--_soft-text);
	cursor: pointer;
	line-height: 1.2;
}
.bb-preview__view input { width: 16px; height: 16px; margin: 0; accent-color: var(--_accent); flex: 0 0 auto; }
.bb-preview__view:has(input:checked) { color: var(--_ink); }
.bb-preview__view:has(input:focus-visible) { outline: 2px solid var(--_accent); outline-offset: 3px; border-radius: 4px; }

.bb-preview__product {
	position: relative;
	width: 100%;
	border-radius: var(--_radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
	overflow: hidden;
	background: var(--_surface);
	min-height: 120px;
}
.bb-preview__product .bb-layer { position: absolute; inset: 0; line-height: 0; }
.bb-preview__product .bb-layer svg { width: 100%; height: 100%; display: block; }
.bb-preview__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	margin: 0;
	font-size: .8rem;
	color: var(--_soft);
}
.bb-pv-ruler line { stroke: var(--_soft); stroke-width: 1; }
.bb-pv-ruler text { font-size: 9px; fill: var(--_soft); font-family: var(--fc-font-body, inherit); }
.bb-pv-symbol-fallback { stroke: var(--_soft); }
.bb-pv-symbol-fallback-text { font-size: 16px !important; fill: var(--_soft); font-weight: 700; }

/* Curseurs (taille de police, position). */
.bb-perso input[type="range"] {
	width: 100%;
	display: block;
	margin-top: 6px;
	accent-color: var(--_accent);
}
.bb-layout__targets { margin-bottom: 10px; }
/* .bb-choice fixe display:inline-flex (même spécificité que la règle UA
   [hidden]) — sans ceci, une cible de positionnement « Symbole » masquée par
   bb-front.js (tant que sa case n'est pas cochée) resterait visible. */
.bb-choice[hidden] { display: none; }
.bb-layout__sliders { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.bb-layout__slider { display: block; font-size: .82rem; color: var(--_soft-text); font-weight: 600; }
/* Taille/fil par symbole (D27) — mêmes réglages, visibles seulement pour une
   cible symbole (bb-front.js bascule [hidden]). */
.bb-layout__symbolstyle { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.bb-layout__symbolstyle[hidden] { display: none; }
@media (max-width: 480px) {
	.bb-layout__sliders,
	.bb-layout__symbolstyle { grid-template-columns: 1fr; }
}