/* CC Variant Links - mobile-first. Couleurs héritées du thème (currentColor) ; variables surchargeables. */
.ccvl { --ccvl-accent: var(--theme-palette-color-1, #111); --ccvl-border: color-mix(in srgb, currentColor 25%, transparent); margin: 0 0 1.25rem; }
.ccvl:not(.is-ready) { display: none; } /* Sans JS : on masque, le <noscript> prend le relais. */
.ccvl__group + .ccvl__group { margin-top: .9rem; }
.ccvl__label { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .45rem; }
.ccvl__value { font-weight: 400; text-transform: none; opacity: .75; }
.ccvl__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.ccvl__opt {
	appearance: none; cursor: pointer; font: inherit; font-size: .9rem; line-height: 1.2; color: inherit;
	min-height: 44px; padding: .55rem .95rem; border-radius: 999px; background: transparent;
	border: 1.5px solid var(--ccvl-border); transition: border-color .15s, background-color .15s, color .15s;
}
.ccvl__opt:hover { border-color: currentColor; }
.ccvl__opt:focus-visible { outline: 3px solid var(--ccvl-accent); outline-offset: 2px; }
.ccvl__opt[aria-checked="true"] { background: var(--ccvl-accent); border-color: var(--ccvl-accent); color: #fff; }
.ccvl__opt.is-switch:not([aria-checked="true"]) { border-style: dashed; }
.ccvl__opt.is-unavailable:not([aria-checked="true"]) { opacity: .55; text-decoration: line-through; }
.ccvl-from { font-size: .75em; font-weight: 400; opacity: .8; }
.ccvl-fallback { margin: 0 0 1rem; font-size: .9rem; }
.ccvl-fallback ul { margin: .5rem 0 0 1.1rem; }
@media (prefers-reduced-motion: reduce) { .ccvl__opt { transition: none; } }
@media (min-width: 690px) { .ccvl__opt { min-height: 40px; } }