/* ========== Styles communs des tags (pills) ========== */

/* Base : appliquez .nc-tag-pill + une classe couleur .is-xxx */
.nc-tag-pill,
.nc-rea3-tag,
.tag-pill {
    display: inline-flex;
    padding: 4px 12px 6px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    border: 1px solid transparent;
    color: #fff;
    font-family: Syne;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease, filter .2s ease, background-color .2s ease, border-color .2s ease;
    will-change: opacity, transform;
}

/* Variants couleur (mêmes règles qu'avant) */
.nc-tag-pill.is-installation,
.nc-rea3-tag.is-installation,
.tag-pill.is-installation {
    background: #F2B803;
    border-color: #F2B803;
}

.nc-tag-pill.is-securite,
.nc-rea3-tag.is-securite,
.tag-pill.is-securite {
    background: #009640;
    border-color: #009640;
}

.nc-tag-pill.is-technique,
.nc-rea3-tag.is-technique,
.tag-pill.is-technique {
    background: #E30613;
    border-color: #E30613;
}

.nc-tag-pill.is-default,
.nc-rea3-tag.is-default,
.tag-pill.is-default {
    background: #2D2D2D;
    border-color: #2D2D2D;
}

/* Hover commun : opacité plus basse */
.nc-tag-pill:hover,
.nc-rea3-tag:hover,
.tag-pill:hover {
    opacity: .9;
}

/* Focus accessible (si le tag est un lien) */
.nc-tag-pill:focus,
.nc-rea3-tag:focus,
.tag-pill:focus {
    outline: 2px solid rgba(0, 0, 0, .15);
    outline-offset: 2px;
}