/* Variantes — le FRONT : les pastilles qui pilotent le <select> natif.
   Feuille du SITE CLIENT : sobre, neutre, tout en préfixe .ckwc-vrt — elle
   ne porte aucune couleur de charte CercleKit (le front appartient au design
   du site). Chargée seulement sur la fiche produit, module allumé.

   ⚠️ ELLE DOIT SE DÉFENDRE. Constaté sur LH Color (kit Elementor) : les
   règles génériques du thème (`button { … }`, `select { … }`) écrasaient les
   nôtres — selects « masqués » rendus à 340px qui créaient un DÉFILEMENT
   HORIZONTAL (mesuré : +41px, exactement leur dépassement), boutons passés
   en bloc plein fond, rond « Blanc » invisible (bordure annulée). D'où :
   `display:none !important` sur le select (le script de variations de
   WooCommerce lit et écrit dedans sans avoir besoin qu'il soit peint —
   vérifié : scroll à 0, variations toujours résolues), `all: unset` puis
   redéclaration sur les pastilles, et JAMAIS de `!important` sur les fonds
   des ronds/vignettes : la couleur y arrive en style inline, qu'un
   `!important` à nous écraserait nous-mêmes. */

.ckwc-vrt select {
	display: none !important;
}

.ckwc-vrt .ckwc-vrt-liste {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

/* La base commune — on repart de zéro, le thème n'a plus prise. 1.1.21 : les valeurs de départ = les jetons de CercleKit
   (--neutres-*, --ck-radius-*), la variable du Studio (--ck-vrt-*) passe devant (RÉCAP B 36). */
.ckwc-vrt button.ckwc-vrt-item {
	all: unset;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: .0625rem solid var(--ck-vrt-bord, color-mix(in srgb, var(--neutres-900, currentColor) 25%, transparent));
	margin: 0 !important;
	font: inherit;
	color: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .12s ease, outline-color .12s ease;
}

/* Rond de couleur (ou matière) — le fond arrive en style INLINE. */
.ckwc-vrt button.ckwc-vrt-rond {
	width: 1.75rem !important;
	height: 1.75rem !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: color-mix(in srgb, var(--neutres-900, currentColor) 4%, transparent);
	background-size: cover;
	background-position: center;
}

/* Vignette d'image — idem, l'image arrive en inline. */
.ckwc-vrt button.ckwc-vrt-img {
	width: 2.5rem !important;
	height: 2.5rem !important;
	padding: 0 !important;
	border-radius: var(--ck-radius-sm, .1875rem) !important;
	background-color: color-mix(in srgb, var(--neutres-900, currentColor) 4%, transparent);
	background-size: cover;
	background-position: center;
}

.ckwc-vrt button.ckwc-vrt-img.est-vide {
	border-style: dashed;
}

/* Bouton texte — là, le fond est à NOUS : transparent, point. */
.ckwc-vrt button.ckwc-vrt-btn {
	min-width: 2.25rem;
	padding: .375rem .75rem !important;
	border-radius: var(--ck-vrt-rayon, var(--ck-radius-sm, .1875rem)) !important;
	background: transparent !important;
	color: var(--ck-vrt-texte, inherit) !important;
}

/* ── LA RANGÉE S'ALIGNE À GAUCHE, NET (Kévin, 2026-08-04 : « faut que ce
   soit aligné propre à gauche ») : le thème centrait le LIBELLÉ de la
   rangée (`th { text-align:center }`), les pastilles semblaient flotter.
   Scopé aux seules rangées qui portent nos pastilles. */
.variations tr:has(.ckwc-vrt) th,
.variations tr:has(.ckwc-vrt) td {
	text-align: left !important;
	vertical-align: middle;
}

/* ── CHOISI : UN LISERÉ, PAS UN ANNEAU (1.0.380). Kévin, capture xpospace :
   « pourquoi j'ai un énorme contour en plus à la sélection », puis « je veux
   pas de gros contour, je veux un liseré propre ». La version d'avant (liseré
   blanc PUIS anneau sombre de 4px AUTOUR de la bordure) répondait à « un vrai
   état d'actif, on sait pas c'est lequel » — mais empilait trois traits.
   Tout est maintenant DEDANS (`inset`) : la pastille garde sa taille, rien ne
   déborde sur la voisine. Toujours sans rien emprunter au thème. */
.ckwc-vrt button.ckwc-vrt-item.est-choisi {
	outline: none !important;
	border-color: var(--ck-vrt-bord-actif, var(--neutres-900, rgba(0, 0, 0, .85))) !important;
	/* Bouton texte : la bordure doublée vers l'intérieur = un trait net (deux fois l'épaisseur). */
	box-shadow: inset 0 0 0 .0625rem var(--ck-vrt-bord-actif, var(--neutres-900, rgba(0, 0, 0, .85))) !important;
}

/* Rond / vignette : un liseré BLANC intérieur sous la bordure foncée — il se
   voit sur un rond noir ou vert foncé, où la bordure seule disparaîtrait. */
.ckwc-vrt button.ckwc-vrt-rond.est-choisi,
.ckwc-vrt button.ckwc-vrt-img.est-choisi {
	box-shadow: inset 0 0 0 .125rem var(--neutres-0, #fff) !important;
}

.ckwc-vrt button.ckwc-vrt-btn.est-choisi {
	font-weight: 600;
}

/* Indisponible avec la sélection en cours (WooCommerce a retiré l'option). */
.ckwc-vrt button.ckwc-vrt-item.est-indisponible {
	opacity: .35 !important;
	cursor: not-allowed;
}

.ckwc-vrt button.ckwc-vrt-item:hover:not(.est-indisponible) {
	border-color: currentColor;
}

.ckwc-vrt button.ckwc-vrt-item:focus-visible {
	outline: .125rem solid currentColor;
	outline-offset: .125rem;
}

/* 1.1.18 — SUR LES MODÈLES DE FICHE (RÉCAP B 36) : la pastille arrondie de la maquette, sur les variables réglées au Studio
   (Fiche produit › Variantes) ; sans réglage, les jetons du design system. La fiche actuelle n'est pas concernée. */
.ck-dispo-page .ckwc-vrt button.ckwc-vrt-btn{border-color:var(--ck-vrt-bord,var(--neutres-300,currentColor));border-radius:var(--ck-vrt-rayon,999em)!important;color:var(--ck-vrt-texte,var(--neutres-900,inherit))!important;font-size:var(--ck-vrt-taille,.9375em);padding:var(--ck-space-sm,.5rem) var(--ck-space-lg,1rem)!important}
.ck-dispo-page .ckwc-vrt button.ckwc-vrt-btn.est-choisi{border-color:var(--ck-vrt-bord-actif,var(--neutres-900,currentColor))!important;background:var(--ck-vrt-fond-actif,transparent)!important;box-shadow:inset 0 0 0 .0625rem var(--ck-vrt-bord-actif,var(--neutres-900,currentColor))!important}
/* 1.1.91 — Fiche produit › Variantes, PAR ÉTAT (Normal / Survol / Choisie) : vide = le rendu d'avant. */
.ck-dispo-page .ckwc-vrt button.ckwc-vrt-btn{background:var(--ck-vrt-fond,transparent)!important}
.ck-dispo-page .ckwc-vrt button.ckwc-vrt-btn:hover:not(.est-indisponible):not(.est-choisi){color:var(--ck-vrt-texte-survol,var(--ck-vrt-texte,var(--neutres-900,inherit)))!important;background:var(--ck-vrt-fond-survol,var(--ck-vrt-fond,transparent))!important;border-color:var(--ck-vrt-bord-survol,currentColor)!important}
.ck-dispo-page .ckwc-vrt button.ckwc-vrt-btn.est-choisi{color:var(--ck-vrt-texte-actif,var(--ck-vrt-texte,var(--neutres-900,inherit)))!important}