/**
 * Choix d'une variante par pastilles illustrées.
 *
 * La liste déroulante d'origine reste dans la page et continue de porter la
 * valeur. Elle n'est masquée que si le script a pu poser `data-pastilles` :
 * sans JavaScript, le client garde un menu qui fonctionne.
 */

.lupeo-var{margin:2px 0 4px}

.lupeo-var__liste{list-style:none;margin:0;padding:0;
	display:flex;flex-wrap:wrap;gap:14px}

.lupeo-var__item{margin:0;padding:0}

.lupeo-var__btn{display:flex;flex-direction:column;align-items:center;gap:6px;
	width:76px;padding:0;border:0;background:none;cursor:pointer;
	font-family:inherit;color:var(--lupeo-ink-2,#4A453E);
	-webkit-appearance:none;appearance:none}

/* Blocksy peint tout bouton avec la couleur d'achat : le nom d'élément dans le
   sélecteur suffit à reprendre la main, sans !important. */
.lupeo-var button.lupeo-var__btn{background:none;box-shadow:none}

.lupeo-var__vignette{position:relative;display:grid;place-items:center;
	width:60px;height:60px;border-radius:50%;overflow:hidden;
	background:#fff;
	border:2px solid var(--lupeo-line,#E6DFD4);
	transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}

.lupeo-var__vignette img{width:100%;height:100%;object-fit:cover;display:block;
	border-radius:50%}

.lupeo-var__initiale{font-weight:700;font-size:19px;
	color:var(--lupeo-teal,#007C75)}

.lupeo-var__nom{font-size:12.5px;line-height:1.25;text-align:center;
	max-width:76px;overflow-wrap:anywhere}

.lupeo-var__btn:hover .lupeo-var__vignette{border-color:var(--lupeo-teal,#007C75);
	transform:translateY(-1px)}

.lupeo-var__btn:focus-visible .lupeo-var__vignette{outline:2px solid var(--lupeo-teal,#007C75);
	outline-offset:3px}

/* Sélection : anneau turquoise, et le nom passe en gras — la couleur seule ne
   suffirait pas pour qui ne la distingue pas. */
.lupeo-var__btn.is-actif .lupeo-var__vignette{border-color:var(--lupeo-teal,#007C75);
	box-shadow:0 0 0 3px var(--lupeo-teal-soft,#E2EFEE)}

.lupeo-var__btn.is-actif .lupeo-var__nom{font-weight:700;
	color:var(--lupeo-teal-deep,#005A55)}

/* La liste déroulante ne disparaît que lorsque les pastilles la remplacent
   vraiment. */
.variations[data-pastilles="oui"] select,
.variations[data-pastilles="oui"] .lupeo-var + .stock,
.variations[data-pastilles="oui"] label[for*="pa_"] + select{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
	.lupeo-var__vignette{transition:none}
	.lupeo-var__btn:hover .lupeo-var__vignette{transform:none}
}