ul.pills {
    list-style-type: none;
    margin-left: 0;
    counter-reset: pills-number;
    line-height: 2.3em;
}

ul.pills li {
    display: inline-block;
    counter-increment: pills-number;
}

ul.pills a {
    margin-right: 5px;
    padding: 0.15em 0.66em;
    border-radius: 2rem;
    border: 2px solid rgba(255, 255, 255, .5);
    text-transform: capitalize;
    color: var(--lightest);
}

ul.pills a::before {
    content: counter(pills-number) ".";
    color: var(--primary);
    margin-right: 0.25em;
    font-weight: 500;
}

ul.pills a:hover {
    border-color: var(--primary);
}

/* Self-contained component: reset every inherited list/typography quirk so the
   badges render the same in entry-header, content or sidebar contexts. */
.badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.badges-container > ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.badges-container > ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.badges-container a {
    display: inline-block;
    background-color: var(--lightest);
    padding: .15em .66em;
    border-radius: var(--border-radius);
    border: 2px solid var(--dark);
    color: var(--dark);
    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;
    text-transform: capitalize;
}

.badges-container > ul.post-categories a:not(:hover) {
    color: var(--primary);
    border-color: var(--primary);
}

.badges-container a:hover {
    background-color: var(--primary);
    color: var(--lightest);
    border-color: var(--primary);
}

/* Outer spacing per position */
.badges-container.above-title  { margin-bottom: .5em; }
.badges-container.under-title  { margin-top: .5em; }
.badges-container.after-content { margin-top: var(--spacing); }
.badges-container.sidebar-top  { margin-bottom: var(--spacing); }
/* ==================================================================
   Personnalisation VideoDL — pastilles de rubrique
   Traitement autocollant : angle coupé, posées de travers.
   ================================================================== */
.badges-container a {
	border-radius: 0;
	clip-path: polygon(var(--cut, 10px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut, 10px));
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 8px 12px 7px;
	text-decoration: none;
	display: inline-block;
	transform: rotate(-2.5deg);
	transform-origin: left bottom;
	transition: transform 0.28s cubic-bezier(.22, 1, .36, 1), background-color 0.18s ease, color 0.18s ease;
}

.badges-container > ul.post-categories a:not(:hover) {
	background-color: var(--vert);
	color: var(--contrast);
}

.badges-container a:hover {
	background-color: var(--contrast);
	color: var(--base-3);
	transform: rotate(0deg);
}