/**
 * YEP'S Surlignage des mots clés (format Gutenberg `yeps/highlight`).
 *
 * Deux variantes choisies par le rédacteur via la barre d'outils RichText.
 * HTML produit : <mark class="yeps-mark" data-variant="trait|highlight">…</mark>
 *
 * Si `data-variant` est absent (rétrocompat ou copie/colle externe),
 * le fallback est la variante « trait ».
 *
 * - `trait` : surligneur jaune YEP'S sur 35 % du bas du mot. Toujours jaune.
 * - `highlight` : pavé plein qui inverse dynamiquement l'ambiance courante :
 *     fond = couleur du texte ambiant (--yeps-heading-color)
 *     texte = couleur du fond ambiant (--yeps-current-bg)
 *   Comme ces deux variables suivent le scroll-bg, le highlight transite
 *   fluidement avec le fond et n'est jamais invisible.
 *
 * L'animation se peint de gauche à droite via la croissance de
 * `background-size`. La classe `.is-revealed` est ajoutée par
 * `yeps-highlight-frontend.js` (IntersectionObserver) quand le mot
 * entre dans le viewport. Durée pilotée par `motion.duration.slow`,
 * donc alignée sur le tempo admin (Sobre / Standard / Vif).
 *
 * `@property` rend les couleurs du gradient animables (Chrome 85+,
 * Safari 16.4+, Firefox 128+). Sans `@property`, les transitions sur
 * des `<color>` à l'intérieur de `linear-gradient(var(...), var(...))`
 * ne s'appliquent pas dans la plupart des navigateurs.
 */

@property --yeps-mark-bg {
	syntax: '<color>';
	inherits: false;
	initial-value: rgba(0, 0, 0, 0);
}
@property --yeps-mark-fg {
	syntax: '<color>';
	inherits: false;
	initial-value: currentcolor;
}

.yeps-mark {
	background-color: transparent;
	background-image: linear-gradient(var(--yeps-mark-bg), var(--yeps-mark-bg));
	background-repeat: no-repeat;
	background-position: left bottom;
	color: var(--yeps-mark-fg);
	transition:
		background-size
			var(--wp--custom--yeps--motion--duration--slow, 480ms)
			var(--wp--custom--yeps--motion--easing--out, cubic-bezier(0.2, 0.7, 0.1, 1)),
		--yeps-mark-bg
			var(--wp--custom--yeps--motion--duration--base, 240ms) ease,
		--yeps-mark-fg
			var(--wp--custom--yeps--motion--duration--base, 240ms) ease;
}

/* ── Variante 1 : trait jaune (défaut + fallback sans data-variant) ── */
.yeps-mark,
.yeps-mark[data-variant="trait"] {
	--yeps-mark-bg: var(--wp--preset--color--jaune-yeps, #FFD100);
	--yeps-mark-fg: currentcolor;
	background-size: 0% 35%;
	padding: 0 4px;
	border-radius: 0;
}
.yeps-mark.is-revealed,
.yeps-mark[data-variant="trait"].is-revealed {
	background-size: 100% 35%;
}

/* ── Variante 2 : highlight (négatif visuel de l'ambiance courante) ──
 * La hauteur de la capsule est exprimée en `em` (proportionnelle à la taille
 * du texte) plutôt qu'en `%` (qui colle aux line-boxes et donne une capsule
 * qui touche la ligne suivante sur les titres multi-lignes). Centrage
 * vertical pour laisser de l'air en haut et en bas. `box-decoration-break:
 * clone` fait que chaque fragment de ligne reçoit son propre fond, donc le
 * highlight reste un pavé propre quand un titre passe sur deux lignes. */
.yeps-mark[data-variant="highlight"] {
	--yeps-mark-bg: var(--yeps-heading-color, var(--wp--custom--yeps--color--heading--on-light, #2B2D6E));
	--yeps-mark-fg: var(--yeps-current-bg, var(--wp--preset--color--creme, #F7F6F2));
	background-size: 0% 1.15em;
	background-position: left center;
	padding: 0 0.25em;
	border-radius: 0.15em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.yeps-mark[data-variant="highlight"].is-revealed {
	background-size: 100% 1.15em;
}

/* Exception sur fond jaune : la capsule inversée prendrait sinon un texte
 * jaune (= couleur du fond ambiant), ce qui est lisible mais peu identitaire.
 * On force le texte en blanc pur pour un contraste plus appuyé sur cette
 * ambiance bien spécifique. */
html[data-yeps-bg="#FFD100"] .yeps-mark[data-variant="highlight"] {
	--yeps-mark-fg: #FFFFFF;
}

/* Exception sur fond turquoise (#2EB1B3) : pour renforcer l'identité
 * visuelle YEP'S, la capsule prend le pavé jaune emblématique avec un
 * texte bleu YEP'S (combo signature), au lieu du négatif d'ambiance. */
html[data-yeps-bg="#2EB1B3"] .yeps-mark[data-variant="highlight"] {
	--yeps-mark-bg: var(--wp--preset--color--jaune-yeps, #FFD100);
	--yeps-mark-fg: var(--wp--custom--yeps--color--heading--on-light, #2B2D6E);
}

/* ── Accessibilité : reduced motion → état révélé direct, sans transition ── */
@media (prefers-reduced-motion: reduce) {
	.yeps-mark { transition: none !important; }
	.yeps-mark,
	.yeps-mark[data-variant="trait"] { background-size: 100% 35% !important; }
	.yeps-mark[data-variant="highlight"] { background-size: 100% 1.15em !important; }
}