/* ═══════════════════════════════════════════════════════════════════════
 * CCBLA — Event Tags (standalone)
 * ─────────────────────────────────────────────────────────────────────
 * Pills ovales identiques aux tags des event cards.
 * Couleurs via CSS custom properties :
 *   --ccbla-tag-bg (défaut : #f5b5d3)
 *   --ccbla-tag-c  (défaut : #111)
 *
 * Peuvent être définies :
 *   1. Par un parent (composition Kadence)
 *   2. Inline via ?compo=N (le bloc injecte les vars)
 * ═══════════════════════════════════════════════════════════════════════ */

.ccbla-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.ccbla-event-tags__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* 2026-05-13 (demande Nic) — border 1.5px sans dilatation de la box */
    min-width: 125px;
    height: 30px;
    padding: 2px 12px 0;
    border: 1.5px solid currentColor; /* 2026-05-13 (demande Nic) — cohérence cartes (event-card L233) */
    border-radius: 50%;
    overflow: hidden;
    background: var(--ccbla-tag-bg, #f5b5d3);
    color: var(--ccbla-tag-c, #111);
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1;
    text-transform: lowercase; /* 2026-05-14 (demande Nic) — cohérence event-card.css L244 + event-card-utick.css L227 */
}

/* 2026-05-13 (demande Nic) — Pill PUBLIC inversée Reproduit le pattern.ccbla-event-card__tag--public (event-card.css L259). Concerne les pills issues de: • ext_public (event_externe) • int-public (event-interne-ok) • utick_attraction_agelimit (event-utick — postmeta texte libre) • classe-utick (event-utick scolaire uniquement) Inversion exacte des vars: bg ← tag-c, color ← tag-bg. La border 1.5px sur.ccbla-event-tags__pill devient automatiquement de la couleur claire (currentColor = nouveau color = tag-bg) → effet « outlined » visible identique à l'image de référence (cartes agenda). */
.ccbla-event-tags__pill--public {
    background: var(--ccbla-tag-c, #111);
    color: var(--ccbla-tag-bg, #f5b5d3);
}

/* ── Mobile (<768px) — pills agrandies ───────────────────────────── */
@media (max-width: 767px) {
    .ccbla-event-tags {
        gap: 18px;
    }
    .ccbla-event-tags__pill {
        height: 32px;
        padding: 18px;
        font-size: 16px;
    }
}