/*
 * Occasions : entrée de menu et bandeau mobile.
 *
 * Règle 1 : l'entrée ne change jamais la hauteur de ligne du menu. Le padding vertical des styles pleins est
 * annulé par une marge négative, et le picto est ramené à 1em de hauteur utile. Jamais d'overflow autre que
 * visible sur une boîte en ligne : il déplacerait sa ligne de base et donc le texte.
 * Règle 2 : aucune couleur n'est devinée en CSS. Menu_Label fournit en ligne --vxwc-c (couleur de l'occasion),
 * --vxwc-c2 (variante du dégradé), --vxwc-ink (texte sur la couleur), --vxwc-read (couleur lisible sur la page)
 * et --vxwc-page (fond de page), tous au contraste vérifié.
 */

.vxwc-entry { position: relative; white-space: nowrap; }

.vxwc-entry__icon {
	--vxwc-s: 1.15em;
	display: inline-block;
	box-sizing: border-box;
	width: var(--vxwc-s);
	height: var(--vxwc-s);
	margin-block: calc((1em - var(--vxwc-s)) / 2);
	vertical-align: middle;
	line-height: 0;
}
.vxwc-entry__icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vxwc-entry__icon + .vxwc-entry__text { margin-inline-start: .4em; }

/* Styles pleins : pastille, médaillon, ruban, bulle. */
.vxwc-entry--pill,
.vxwc-entry--medallion,
.vxwc-entry--ribbon,
.vxwc-entry--bubble {
	--vxwc-py: .32em;
	display: inline-block;
	box-sizing: border-box;
	padding: var(--vxwc-py) .85em;
	margin-block: calc(-1 * var(--vxwc-py) - .1em);
	isolation: isolate;
	background: linear-gradient(135deg, var(--vxwc-c), var(--vxwc-c2));
	color: var(--vxwc-ink);
	line-height: 1.2;
	vertical-align: baseline;
	transition: filter .2s ease, box-shadow .2s ease;
}
.vxwc-entry--pill,
.vxwc-entry--medallion,
.vxwc-entry--bubble {
	border-radius: 999px;
	box-shadow: 0 .25em .7em -.3em var(--vxwc-c2);
}
a:hover .vxwc-entry--pill,
a:hover .vxwc-entry--medallion,
a:hover .vxwc-entry--ribbon,
a:hover .vxwc-entry--bubble,
a:focus-visible .vxwc-entry { filter: brightness(1.08) saturate(1.1); }

.vxwc-entry--medallion { padding-inline-start: .3em; }
.vxwc-entry--medallion .vxwc-entry__icon {
	--vxwc-s: 1.45em;
	padding: .24em;
	border-radius: 50%;
	background: var(--vxwc-ink);
	color: var(--vxwc-c);
}
.vxwc-entry--medallion .vxwc-entry__icon + .vxwc-entry__text { margin-inline-start: .5em; }

.vxwc-entry--ribbon {
	padding-inline: 1.15em;
	border-radius: .15em;
	clip-path: polygon(0 0, 100% 0, calc(100% - .6em) 50%, 100% 100%, 0 100%, .6em 50%);
}

.vxwc-entry--bubble { padding: var(--vxwc-py); }
.vxwc-entry--bubble .vxwc-entry__icon { --vxwc-s: 1.2em; }

/* Contour : fond teinté, trait et texte dans la couleur lisible sur la page. */
.vxwc-entry--outline {
	display: inline-block;
	box-sizing: border-box;
	padding: .2em .8em;
	margin-block: -.42em;
	border: .12em solid var(--vxwc-read);
	border-radius: 999px;
	background: color-mix(in srgb, var(--vxwc-c) 12%, transparent);
	color: var(--vxwc-read);
	line-height: 1.2;
	vertical-align: baseline;
}

/* Badge : texte du thème souligné, picto dans une bulle posée en exposant (hors du flux). */
.vxwc-entry--badge { margin-inline-end: .7em; }
.vxwc-entry--badge .vxwc-entry__text {
	text-decoration: underline;
	text-decoration-color: var(--vxwc-read);
	text-decoration-thickness: .14em;
	text-underline-offset: .32em;
}
.vxwc-entry--badge .vxwc-entry__icon {
	--vxwc-s: 1.4em;
	position: absolute;
	top: -.95em;
	right: -1.2em;
	margin: 0;
	padding: .24em;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--vxwc-c), var(--vxwc-c2));
	color: var(--vxwc-ink);
	box-shadow: 0 0 0 .14em var(--vxwc-page, #fff);
}

/* Discret : texte et picto dans la couleur lisible sur la page. */
.vxwc-entry--minimal { color: var(--vxwc-read); }

/* Bandeau mobile : affiché sous le point de rupture (règle ajoutée en ligne selon le thème). */
.vxwc-mobile-banner { display: none; margin: 0; }
.vxwc-banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: .85em;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.75em;
	padding: .7em 1.1em;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(115deg, var(--vxwc-c) 0%, var(--vxwc-c) 35%, var(--vxwc-c2) 100%);
	color: var(--vxwc-ink);
	line-height: 1.25;
	text-decoration: none;
}
.vxwc-banner:hover,
.vxwc-banner:focus-visible { color: var(--vxwc-ink); text-decoration: none; filter: brightness(1.06); }
.vxwc-banner:focus-visible { outline: 2px solid var(--vxwc-ink); outline-offset: -5px; }
.vxwc-banner + .vxwc-banner { border-top: 1px solid color-mix(in srgb, var(--vxwc-ink) 25%, transparent); }
.vxwc-banner__medallion {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background: var(--vxwc-ink);
	color: var(--vxwc-c);
	box-shadow: 0 0 0 .3em color-mix(in srgb, var(--vxwc-ink) 22%, transparent);
}
.vxwc-banner__medallion svg { width: 1.4em; height: 1.4em; }
.vxwc-banner__text { display: flex; flex-direction: column; min-width: 0; }
.vxwc-banner__title { overflow: hidden; font-size: 1.08em; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vxwc-banner__cta { margin-top: .15em; font-size: .72em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.vxwc-banner__arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.1em;
	height: 2.1em;
	margin-inline-start: auto;
	border: .1em solid currentColor;
	border-radius: 50%;
}
.vxwc-banner__arrow svg { width: 1em; height: 1em; }
.vxwc-banner__watermark {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: 1.6em;
	width: 5.5em;
	height: 5.5em;
	color: var(--vxwc-ink);
	opacity: .14;
	transform: translateY(-50%) rotate(-14deg);
	pointer-events: none;
}
.vxwc-banner__watermark svg { width: 100%; height: 100%; }

/* Attirer l'œil : reflet lumineux sur les styles pleins et le bandeau, balancement du picto ailleurs. */
.vxwc-entry--animate.vxwc-entry--pill::after,
.vxwc-entry--animate.vxwc-entry--medallion::after,
.vxwc-entry--animate.vxwc-entry--ribbon::after,
.vxwc-entry--animate.vxwc-entry--bubble::after,
.vxwc-banner--animate::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .12) 56%, transparent 64%) no-repeat;
	background-size: 300% 100%;
	background-position: 120% 0;
	animation: vxwc-shine 5s ease-in-out 1.2s infinite;
	pointer-events: none;
}
.vxwc-entry--animate.vxwc-entry--outline .vxwc-entry__icon,
.vxwc-entry--animate.vxwc-entry--badge .vxwc-entry__icon,
.vxwc-entry--animate.vxwc-entry--minimal .vxwc-entry__icon,
.vxwc-banner--animate .vxwc-banner__medallion svg {
	transform-origin: 50% 20%;
	animation: vxwc-swing 4s ease-in-out 1s infinite;
}
/* Le reflet glisse par la position du fond : il reste dans la boîte, sans overflow ni débordement. */
@keyframes vxwc-shine {
	0% { background-position: 120% 0; }
	30%, 100% { background-position: -20% 0; }
}
@keyframes vxwc-swing {
	0%, 16%, 100% { rotate: 0deg; }
	4% { rotate: -15deg; }
	8% { rotate: 11deg; }
	12% { rotate: -5deg; }
}

.vxwc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.vxwc-entry--animate::after,
	.vxwc-banner--animate::after { display: none; }
	.vxwc-entry--animate .vxwc-entry__icon,
	.vxwc-banner--animate .vxwc-banner__medallion svg { animation: none !important; }
}