/* Navigation interne en pastilles : UN SEUL graphisme pour tout le site (page CV, Projets, Galerie…).
   Chargé sur les pages qui l'utilisent (voir functions.php). Les couleurs viennent de cv.css quand il est chargé ;
   sinon les valeurs de repli ci-dessous (identiques) s'appliquent.
   États : survol et clavier en jaune, « sélectionné » (.is-active) en contour jaune + léger fond doré. */

main .de-cv-chips {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	margin-top: 2.5rem !important;
	padding-block: 0.9rem;
	border-top: 1px solid var(--cv-line, #2a2721);
	border-bottom: 1px solid var(--cv-line, #2a2721);
	scrollbar-width: thin;
}
.de-cv-chips > * {
	margin: 0 !important;
	flex: none;
}
.de-cv-chip a {
	display: block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--cv-line, #2a2721);
	border-radius: 99px;
	font-size: 0.9rem;
	color: var(--cv-muted, #a8a399);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.de-cv-chip a:hover {
	color: var(--cv-gold, #f5b82e);
	border-color: var(--cv-gold, #f5b82e);
	text-decoration: none;
}
.de-cv-chip a:focus-visible {
	outline: 2px solid var(--cv-gold, #f5b82e);
	outline-offset: 3px;
}
/* Sélectionné : contour jaune, texte jaune gras et léger fond doré (le survol seul n'a pas le fond). */
.de-cv-chip a.is-active {
	background: rgba(245, 184, 46, 0.14);
	border-color: var(--cv-gold, #f5b82e);
	color: var(--cv-gold, #f5b82e);
	font-weight: 700;
}
.de-cv-chip a.is-active:hover {
	background: rgba(245, 184, 46, 0.22);
}

/* Un titre de rubrique atteint par une pastille ne passe pas sous l'en-tête fixe. */
.wp-block-post-content h2[id] {
	scroll-margin-top: calc(var(--de-header-h, 4.75rem) + 3rem);
}

@media (prefers-reduced-motion: reduce) {
	.de-cv-chip a {
		transition: none;
	}
}