/* Inkantation Fiches produit : boutique. */
.ink-pastille{display:inline-block;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);vertical-align:-1px;margin-right:.5em;flex:0 0 auto}
.ink-pastille.ink-clair{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}

.ink-couleurs{margin:0 0 1.2em}
.ink-couleurs-titre{font-weight:700;margin:0 0 .7em;text-align:center}
.ink-couleurs-liste{list-style:none;margin:0;padding:0}
.ink-couleurs-liste li{margin:0;padding:0}
.ink-couleurs-liste a{text-decoration:none;color:inherit}

/* Style gouttes : une goutte d'encre par couleur, le nom dessous. */
.ink-style-gouttes .ink-couleurs-liste{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.ink-style-gouttes a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 4px;min-width:58px;
	transition:transform .18s ease}
.ink-goutte{position:relative;display:block;width:34px;height:34px;background:var(--ink-c,#999);
	border-radius:0 50% 50% 50%;transform:rotate(45deg);margin-top:6px;
	box-shadow:0 3px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.08);transition:box-shadow .18s ease}
.ink-goutte::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
	background:rgba(255,255,255,.55);top:9px;left:9px;transform:rotate(-45deg)}
.ink-goutte.ink-clair{box-shadow:0 3px 8px rgba(0,0,0,.14),inset 0 0 0 1.5px rgba(0,0,0,.22)}
.ink-goutte.ink-clair::after{background:rgba(255,255,255,.9)}
.ink-style-gouttes .ink-couleur-nom{font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;opacity:.85}
.ink-style-gouttes a:hover{transform:translateY(-3px)}
.ink-style-gouttes a:hover .ink-goutte{box-shadow:0 6px 14px rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.08)}
.ink-style-gouttes .is-actif .ink-goutte{outline:2px solid var(--ink-c,#999);outline-offset:4px}
.ink-style-gouttes .is-actif .ink-couleur-nom{font-weight:700;opacity:1}

/* Style pilules : boutons arrondis. */
.ink-style-pilules .ink-couleurs-liste{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ink-style-pilules a{display:inline-flex;align-items:center;padding:7px 15px;border:1.5px solid #e2e2e2;border-radius:999px;
	font-size:14px;line-height:1.2;background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
.ink-style-pilules a:hover{border-color:var(--ink-c,#999);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ink-style-pilules .is-actif a{border-color:var(--ink-c,#999);font-weight:700}

/* Style liste : présentation en colonnes. */
.ink-style-liste .ink-couleurs-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:.6em 1.6em}
.ink-style-liste .ink-couleurs-liste a{display:inline-flex;align-items:center}
.ink-couleurs-col-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.ink-couleurs-col-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ink-couleurs-col-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.ink-couleurs-col-5{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.ink-couleurs-col-6{grid-template-columns:repeat(6,minmax(0,1fr))!important}

/* Mobile : tout reste visible, sans défilement caché. Les gouttes passent en grille
   compacte de 6 par ligne (4 sur les très petits écrans), les pilules vont à la ligne. */
@media (max-width:767px){
	.ink-style-gouttes .ink-couleurs-liste{gap:12px 0}
	.ink-style-gouttes li{flex:0 0 16.666%;display:flex;justify-content:center}
	.ink-style-gouttes a{min-width:0;padding:2px 0;gap:6px}
	.ink-style-gouttes a:hover{transform:none}
	.ink-goutte{width:26px;height:26px;margin-top:4px}
	.ink-goutte::after{width:7px;height:7px;top:7px;left:7px}
	.ink-style-gouttes .ink-couleur-nom{font-size:10px;letter-spacing:.02em}
	.ink-style-pilules .ink-couleurs-liste{gap:6px}
	.ink-style-pilules a{padding:6px 11px;font-size:13px}
	.ink-style-liste .ink-couleurs-col-3,.ink-style-liste .ink-couleurs-col-4,
	.ink-style-liste .ink-couleurs-col-5,.ink-style-liste .ink-couleurs-col-6{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:359px){
	.ink-style-gouttes li{flex-basis:25%}
}