/**
 * Entrée « promotions » du menu principal, en pastille.
 *
 * Charte du réseau : jaune #fec000, marine #0b1c36, pastilles au rayon 20 px en
 * capitales — les mêmes que les badges des cartes produit. Le fond est posé sur
 * le `span` du lien, pas sur le lien : celui-ci occupe toute la hauteur de la
 * barre (45 px), la pastille serait un pavé.
 */

.main-navigation li.menu-promo > a > span,
li.menu-promo > a > span {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 20px;
	background-color: #fec000;
	color: #0b1c36;
	font-weight: 700;
	line-height: 1.15;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation li.menu-promo > a:hover > span,
.main-navigation li.menu-promo > a:focus > span,
li.menu-promo > a:hover > span,
li.menu-promo > a:focus > span {
	background-color: #0b1c36;
	color: #fec000;
}

/* Le survol du thème souligne le libellé : inutile ici, la pastille suffit. */
.main-navigation li.menu-promo > a::after,
.main-navigation li.menu-promo > a::before {
	display: none;
}

/* ---------------------------------------------------------------
   Menu mobile : l'entrée y est reprise avec sa classe, mais alignée à
   gauche dans une liste. Pastille plus discrète, sans casser l'alignement.
   --------------------------------------------------------------- */

@media only screen and (max-width: 992px) {
	.main-navigation li.menu-promo > a > span,
	li.menu-promo > a > span {
		padding: 4px 10px;
		font-size: 0.95em;
	}
}