/*
* CIDFP Étiquette Formation — Frontend
*
* Structure fixe. Les couleurs/tailles sont pilotées par les variables CSS
* --cidfp-etq-* injectées en par le renderer (dérivées du thème
* choisi + overrides admin).
*
* === Compatibilité cross-browser (Firefox, Safari) ===
* Porto (et de nombreux thèmes) override les styles des `a[rel="tag"]` via
* des sélecteurs comme `.tagged_as a`, `.post-tags a`, etc. La cascade
* Firefox donne parfois la priorité au thème.
*
* Solution :
* 1) Compound selectors (a.cidfp-etq-chip + wrap) → +1 spécificité
* 2) !important sur les propriétés visuelles critiques (background, color,
* border, padding, radius) — indispensable pour survivre aux thèmes
* 3) `all: revert` sur les pour reset les styles hérités du thème
*/
.cidfp-etq-wrap,
div.cidfp-etq-wrap {
display: inline-flex !important;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin: 8px 0;
line-height: 1.6;
vertical-align: middle;
}
.cidfp-etq-prefix {
font-size: var(--cidfp-etq-font-size, 13px);
color: inherit;
margin-right: 4px;
opacity: .75;
font-weight: normal;
}
/* Reset agressif pour les qui deviennent des chips :
annule tous les styles hérités du thème (Porto ajoute souvent
text-decoration, background transparent, color forcée, etc.) */
a.cidfp-etq-chip {
text-decoration: none !important;
box-shadow: var(--cidfp-etq-shadow, none) !important;
}
.cidfp-etq-chip,
a.cidfp-etq-chip,
span.cidfp-etq-chip,
.cidfp-etq-wrap a.cidfp-etq-chip,
.cidfp-etq-wrap span.cidfp-etq-chip {
display: inline-block !important;
background: var(--cidfp-etq-bg, #199ca4) !important;
color: var(--cidfp-etq-fg, #ffffff) !important;
border-style: solid !important;
border-color: var(--cidfp-etq-border, transparent) !important;
border-width: var(--cidfp-etq-border-width, 0) !important;
border-radius: var(--cidfp-etq-radius, 4px) !important;
padding: var(--cidfp-etq-padding, 4px 10px) !important;
font-size: var(--cidfp-etq-font-size, 13px) !important;
font-weight: var(--cidfp-etq-font-weight, 500) !important;
text-transform: var(--cidfp-etq-text-transform, none) !important;
text-decoration: none !important;
line-height: 1.4 !important;
white-space: nowrap;
vertical-align: middle;
text-align: center;
box-sizing: border-box;
transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
/* Firefox : force la couleur du texte même si le thème utilise
`color: revert` ou un `-moz-*` hérité */
-moz-appearance: none;
appearance: none;
}
/* Hover — spécificité renforcée pour survivre à Porto */
.cidfp-etq-wrap a.cidfp-etq-chip:hover,
.cidfp-etq-wrap a.cidfp-etq-chip:focus,
a.cidfp-etq-chip:hover,
a.cidfp-etq-chip:focus {
background: var(--cidfp-etq-hover-bg, #137178) !important;
color: var(--cidfp-etq-hover-fg, #ffffff) !important;
transform: translateY(-1px);
text-decoration: none !important;
outline: none;
}
a.cidfp-etq-chip:active {
transform: translateY(0);
}
/* Firefox-only fallback : `-moz-focus-inner` supprime le border interne
des sur focus qui peut décaler le chip */
a.cidfp-etq-chip::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Fallback safe si les variables CSS ne sont pas injectées (ex. renderer
pas déclenché sur la page) — le chip reste visible et cohérent CIDFP */
:root {
--cidfp-etq-bg-fallback: #199ca4;
--cidfp-etq-fg-fallback: #ffffff;
}
.cidfp-etq-chip:not([style*="background"]) {
background: var(--cidfp-etq-bg, var(--cidfp-etq-bg-fallback)) !important;
color: var(--cidfp-etq-fg, var(--cidfp-etq-fg-fallback)) !important;
}