/**
 * Pastilles de couleur.
 *
 * Le diamètre se règle par la variable --pdc-taille (filtre PHP
 * « pdc_taille_pastille »).
 */

:root {
	--pdc-taille: 26px;
}

/* Le rond lui-même. L'ombre intérieure lui donne un contour même quand la
   couleur est claire — un blanc sans bord serait invisible sur fond blanc. */
.pdc-pastille {
	display: block;
	flex: 0 0 auto;
	width: var(--pdc-taille);
	height: var(--pdc-taille);
	border-radius: 50%;
	background-color: var(--pdc-couleur, #d9d9d9);
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* Le nom reste lisible par les lecteurs d'écran et par le JS du thème, mais
   sort de l'affichage. */
.pdc-nom {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* L'hôte est le bouton (ou l'élément de liste) du thème : il est ramené à la
   taille de la pastille pour devenir rond à son tour. Les feuilles du thème
   étant chargées après celle-ci, il faut forcer, sans quoi ses paddings de
   bouton rectangulaire l'emportent. */
.pdc-hote {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 3px !important;
	border-radius: 50% !important;
	line-height: 0 !important;
}

/* Le thème signale déjà l'option choisie (fond plein, bordure…). On ajoute un
   cerne pour les cas où sa marque de sélection portait sur le texte, devenu
   invisible. */
.pdc-hote.selected,
.pdc-hote.active,
.pdc-hote.is-active,
.pdc-hote.is-selected,
.pdc-hote[aria-checked="true"],
.pdc-hote[aria-selected="true"],
.pdc-hote[aria-pressed="true"] {
	box-shadow: 0 0 0 1px #1a1919;
}

/* --- Rangée créée par le plugin, quand seul le menu déroulant d'origine est
   présent (voir front.js). --- */

.pdc-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0 0 0.5em;
	padding: 0;
}

.pdc-pastille-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.pdc-pastille-bouton[aria-checked="true"] {
	border-color: #1a1919;
}

/* Le menu reste dans le DOM : c'est lui que WooCommerce lit au moment
   d'ajouter au panier. */
.pdc-select-remplace {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	border: 0 !important;
	clip-path: inset(50%);
}