/* ═══════════════════════════════════════════════════════════════════════
 * CCBLA — Event Card UTick
 * data-compo="N" : 9 compositions — même palette que event-card.css
 * Tags toujours collés en bas : height chain complète
 *
 * PALETTE COMPOSITIONS (bg / color+tag-bg / tag-c) :
 *   1 — #812b29 / #f5b5d3 / #812b29
 *   2 — #6b4796 / #b1dff5 / #6b4796
 *   3 — #f5b5d3 / #812b29 / #f5b5d3
 *   4 — #111111 / #f5b5d3 / #111111
 *   5 — #b1dff5 / #111111 / #b1dff5
 *   6 — #fff7b2 / #00726a / #fff7b2
 *   7 — #c6dfc4 / #164191 / #c6dfc4
 *   8 — #164191 / #b1dff5 / #164191
 *   9 — #f5b5d3 / #164191 / #f5b5d3
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Fallback (compo 4) — jamais blanc, jamais sans couleur ──────────── */
.ccbla-utick-card {
    --_u-bg:     var(--ucard-bg,     #111111);
    --_u-color:  var(--ucard-color,  #f5b5d3);
    --_u-tag-bg: var(--ucard-tag-bg, #f5b5d3);
    --_u-tag-c:  var(--ucard-tag-c,  #111111);
    display: flex;
    flex-direction: column;
    background: transparent;
    height: 100%;
}

/* ─── Compo 1 — Bordeaux · rose ──────────────────────────────────────── */
.ccbla-utick-card[data-compo="1"] { --_u-bg:#812b29; --_u-color:#f5b5d3; --_u-tag-bg:#f5b5d3; --_u-tag-c:#812b29; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="1"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="1"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#f5b5d3; --_u-color:#812b29; }
.ccbla-utick-card[data-compo="1"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="1"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#812b29; color:#f5b5d3; }
*/

/* ─── Compo 2 — Violet · bleu ciel ───────────────────────────────────── */
.ccbla-utick-card[data-compo="2"] { --_u-bg:#6b4796; --_u-color:#b1dff5; --_u-tag-bg:#b1dff5; --_u-tag-c:#6b4796; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="2"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="2"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#b1dff5; --_u-color:#6b4796; }
.ccbla-utick-card[data-compo="2"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="2"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#6b4796; color:#b1dff5; }
*/

/* ─── Compo 3 — Rose · bordeaux ──────────────────────────────────────── */
.ccbla-utick-card[data-compo="3"] { --_u-bg:#f5b5d3; --_u-color:#812b29; --_u-tag-bg:#812b29; --_u-tag-c:#f5b5d3; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="3"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="3"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#812b29; --_u-color:#f5b5d3; }
.ccbla-utick-card[data-compo="3"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="3"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#f5b5d3; color:#812b29; }
*/

/* ─── Compo 4 — Noir · rose ──────────────────────────────────────────── */
.ccbla-utick-card[data-compo="4"] { --_u-bg:#111111; --_u-color:#f5b5d3; --_u-tag-bg:#f5b5d3; --_u-tag-c:#111111; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="4"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="4"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#f5b5d3; --_u-color:#111111; }
.ccbla-utick-card[data-compo="4"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="4"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#111111; color:#f5b5d3; }
*/

/* ─── Compo 5 — Bleu ciel · noir ─────────────────────────────────────── */
.ccbla-utick-card[data-compo="5"] { --_u-bg:#b1dff5; --_u-color:#111111; --_u-tag-bg:#111111; --_u-tag-c:#b1dff5; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="5"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="5"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#111111; --_u-color:#b1dff5; }
.ccbla-utick-card[data-compo="5"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="5"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#b1dff5; color:#111111; }
*/

/* ─── Compo 6 — Jaune pastel · vert foncé ────────────────────────────── */
.ccbla-utick-card[data-compo="6"] { --_u-bg:#fff7b2; --_u-color:#00726a; --_u-tag-bg:#00726a; --_u-tag-c:#fff7b2; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="6"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="6"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#00726a; --_u-color:#fff7b2; }
.ccbla-utick-card[data-compo="6"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="6"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#fff7b2; color:#00726a; }
*/

/* ─── Compo 7 — Vert pastel · bleu marine ────────────────────────────── */
.ccbla-utick-card[data-compo="7"] { --_u-bg:#c6dfc4; --_u-color:#164191; --_u-tag-bg:#164191; --_u-tag-c:#c6dfc4; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="7"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="7"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#164191; --_u-color:#c6dfc4; }
.ccbla-utick-card[data-compo="7"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="7"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#c6dfc4; color:#164191; }
*/

/* ─── Compo 8 — Bleu marine · bleu ciel ─────────────────────────────── */
.ccbla-utick-card[data-compo="8"] { --_u-bg:#164191; --_u-color:#b1dff5; --_u-tag-bg:#b1dff5; --_u-tag-c:#164191; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="8"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="8"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#b1dff5; --_u-color:#164191; }
.ccbla-utick-card[data-compo="8"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="8"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#164191; color:#b1dff5; }
*/

/* ─── Compo 9 — Rose · bleu marine ──────────────────────────────────── */
.ccbla-utick-card[data-compo="9"] { --_u-bg:#f5b5d3; --_u-color:#164191; --_u-tag-bg:#164191; --_u-tag-c:#f5b5d3; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-utick-card[data-compo="9"] .ccbla-utick-card__link:hover .ccbla-utick-card__body,
.ccbla-utick-card[data-compo="9"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__body { --_u-bg:#164191; --_u-color:#f5b5d3; }
.ccbla-utick-card[data-compo="9"] .ccbla-utick-card__link:hover .ccbla-utick-card__tag,
.ccbla-utick-card[data-compo="9"] .ccbla-utick-card__link:focus-visible .ccbla-utick-card__tag { background:#f5b5d3; color:#164191; }
*/


/* ── Structure ───────────────────────────────────────────────────────── */
.ccbla-utick-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: inherit;
    outline-offset: 3px;
}
.ccbla-utick-card__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--pop-primary, #6b4796);
    outline-offset: 3px;
}
.ccbla-utick-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
    background: #111;
}
.ccbla-utick-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .45s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
/* Zoom accentué (1.09) — inversion body supprimée, zoom image seul subsiste */
.ccbla-utick-card__link:hover .ccbla-utick-card__img,
.ccbla-utick-card__link:focus-visible .ccbla-utick-card__img { transform: scale(1.09); }

.ccbla-utick-card__img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    color: #555;
}
.ccbla-utick-card__img-placeholder svg { width: 48px; height: 64px; }

/* ── Body ─────────────────────────────────────────────────────────────── */
.ccbla-utick-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--_u-bg);
    color: var(--_u-color);
    padding: 15px;
    gap: 0;
    transition: background-color .25s ease, color .25s ease;
}

.ccbla-utick-card__date {
    padding: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 18px;
    color: inherit;
    margin-bottom:20px;
}
.ccbla-utick-card__date time { display: block; }

.ccbla-utick-card__title {
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
    font-family: var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif) !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 1.0 !important;
    color: inherit !important;
}

.ccbla-utick-card__organizer {
    margin: 0 0 35px 0;
    padding: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: inherit;
}

/* ── Tags — desktop & tablette ────────────────────────────────────────── */
.ccbla-utick-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto !important;
}
.ccbla-utick-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 125px;
    height: 30px;
    padding-top: 2px;
    border: 1.5px solid currentColor; /* 2026-05-09 (demande Nic — version print) : border = couleur typo */
    border-radius: 50%;
    overflow: hidden;
    background: var(--_u-tag-bg);
    color: var(--_u-tag-c);
    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: 0;
    text-transform: lowercase; /* 2026-05-09 (demande Nic — version print) */
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* 2026-05-09 (demande Nic — version print) — Pill PUBLIC inversée cf. event-card.css pour la rationale détaillée. */
.ccbla-utick-card__tag--public {
    background: var(--_u-tag-c);
    color: var(--_u-tag-bg);
}

/* ── Mobile (<768px) — typo réduite + tags agrandis ──────────────────── */
@media (max-width: 767px) {
    .ccbla-utick-card__body {
        padding: 25px 15px 25px 30px;
    }
    .ccbla-utick-card__date {
        font-size: 14px;
        line-height: 16px;
    }
    .ccbla-utick-card__title {
        font-size: 28px !important;
        line-height: 1.05 !important;
        margin: 0 0 20px 0 !important;
    }
    .ccbla-utick-card__organizer {
        font-size: 16px;
        margin: 0 0 25px 0;
    }
    .ccbla-utick-card__tags {
        gap: 18px;
        margin-top: auto !important;
    }
    .ccbla-utick-card__tag {
        height: 32px;
        padding-top: 0;
        padding: 18px;
        font-size: 16px;
        line-height: 0;
    }
}