/**
 * Barre de compte — habillage.
 *
 * Toutes les règles sont préfixées « bc- » : aucun risque de
 * collision avec le thème ou les autres extensions.
 */

.bc-barre {
	--bc-fond: #0f2542;
	--bc-fond-survol: #1f6fd0;
	--bc-texte: #ffffff;

	background: var( --bc-fond );
	box-sizing: border-box;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.4;
	width: 100%;
}

.bc-barre * {
	box-sizing: border-box;
}

.bc-dedans {
	display: flex;
	margin: 0 auto;
	max-width: 1100px;
	padding: 0 1.25rem;
}

.bc-barre--gauche .bc-dedans {
	justify-content: flex-start;
}

.bc-barre--centre .bc-dedans {
	justify-content: center;
}

.bc-barre--droite .bc-dedans {
	justify-content: flex-end;
}

/* Le sélecteur porte sur la barre pour l'emporter sur la couleur
   de lien du thème, sans recourir à !important. */
.bc-barre .bc-lien {
	align-items: center;
	background: none;
	border: 0;
	color: var( --bc-texte );
	display: inline-flex;
	font-size: 0.86rem;
	font-weight: 600;
	gap: 0.45rem;
	letter-spacing: 0.01em;
	padding: 0.55rem 0.6rem;
	text-decoration: none;
	transition: color 0.15s ease;
}

.bc-barre .bc-lien:hover,
.bc-barre .bc-lien:focus {
	color: #bcd8f7;
	text-decoration: none;
}

.bc-barre .bc-lien:focus-visible {
	border-radius: 6px;
	outline: 2px solid #bcd8f7;
	outline-offset: 2px;
}

.bc-icone {
	flex: none;
	height: 15px;
	width: 15px;
}

@media ( prefers-reduced-motion: reduce ) {
	.bc-barre .bc-lien {
		transition: none;
	}
}