/*
 * Badge « Tag » (ARTICLE / ASTUCE / RECETTE / JEU) — cartes d'articles.
 */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid transparent;
    border-radius: var(--mr-r-m);
    font-family: var(--mr-font-titrage);
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag--lg {
    padding: 12px 22px 12px 17px;
    font-size: 17px;
}

.tag--lg .tag__icon {
    width: 28px;
    height: 28px;
}

.tag--md {
    padding: 10px 17px 10px 14px;
    font-size: 14px;
}

.tag--md .tag__icon {
    width: 22px;
    height: 22px;
}

.tag__icon {
    display: block;
    flex: none;
}

html.a11y-contrast .tag,
html.a11y-enhanced .tag {
    border-color: var(--mr-encre) !important;
}

/* .tag--solid pose son fond (couleur du fromage/rubrique) en style inline
   (helpers.php, fonction tag()) — blanc sur corail ne passe pas le
   contraste AA (ratio ~2.9). !important dans cette feuille l'emporte tout
   de même sur ce style inline (lui n'en porte pas). Encre de marque plutôt
   que noir pur — même couleur de repli que .theme-bg (cheese-show.css). */
html.a11y-contrast .tag--solid,
html.a11y-enhanced .tag--solid {
    background: var(--mr-encre) !important;
    color: var(--mr-blanc) !important;
}

html.a11y-contrast .tag--ghost,
html.a11y-enhanced .tag--ghost {
    color: var(--mr-a11y-accent) !important;
}