/* ═══════════════════════════════════════════════════════════════════════
 * CCBLA — Agenda UTick (v2.5)
 * ─────────────────────────────────────────────────────────────────────
 * 1. Hero : grid image | body(content + aside)
 *    - data-compo 1–9 sur .ccbla-utick-hero
 *    - Même palette que event-card.css / event-card-utick.css
 *    - Hover body : inversion bg↔color COMMENTÉE (zoom image seul actif)
 *    - Tags ellipse 112×27, border-radius:50%
 * 2. Grille : gap 30px, margin-top 30px
 *
 * 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
 * ═══════════════════════════════════════════════════════════════════════ */

.ccbla-utick-agenda,
.ccbla-utick-agenda * { box-sizing: border-box; }
.ccbla-utick-agenda { width: 100%; }
.ccbla-utick-agenda__empty { margin:0; padding:2rem; text-align:center; color:#555; }


/* 2. HERO — compositions */

/* Fallback (compo 4) — jamais blanc, jamais sans couleur. Évite le FOUC pendant que event-card-compo.js assigne data-compo="N": sans ce fallback, les var(--_h-*) sont undefined → color hérite du body (noir) et le titre apparaît en noir avant le paint JS. */
.ccbla-utick-hero {
    --_h-bg:     #111111;
    --_h-color:  #f5b5d3;
    --_h-tag-bg: #f5b5d3;
    --_h-tag-c:  #111111;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 645px;
    margin-bottom: 30px;
}

/* ── 9 compositions ────────────────────────────────────────────────── */
.ccbla-utick-hero[data-compo="1"] { --_h-bg:#812b29; --_h-color:#f5b5d3; --_h-tag-bg:#f5b5d3; --_h-tag-c:#812b29; }
.ccbla-utick-hero[data-compo="2"] { --_h-bg:#6b4796; --_h-color:#b1dff5; --_h-tag-bg:#b1dff5; --_h-tag-c:#6b4796; }
.ccbla-utick-hero[data-compo="3"] { --_h-bg:#f5b5d3; --_h-color:#812b29; --_h-tag-bg:#812b29; --_h-tag-c:#f5b5d3; }
.ccbla-utick-hero[data-compo="4"] { --_h-bg:#111111; --_h-color:#f5b5d3; --_h-tag-bg:#f5b5d3; --_h-tag-c:#111111; }
.ccbla-utick-hero[data-compo="5"] { --_h-bg:#b1dff5; --_h-color:#111111; --_h-tag-bg:#111111; --_h-tag-c:#b1dff5; }
.ccbla-utick-hero[data-compo="6"] { --_h-bg:#fff7b2; --_h-color:#00726a; --_h-tag-bg:#00726a; --_h-tag-c:#fff7b2; }
.ccbla-utick-hero[data-compo="7"] { --_h-bg:#c6dfc4; --_h-color:#164191; --_h-tag-bg:#164191; --_h-tag-c:#c6dfc4; }
.ccbla-utick-hero[data-compo="8"] { --_h-bg:#164191; --_h-color:#b1dff5; --_h-tag-bg:#b1dff5; --_h-tag-c:#164191; }
.ccbla-utick-hero[data-compo="9"] { --_h-bg:#f5b5d3; --_h-color:#164191; --_h-tag-bg:#164191; --_h-tag-c:#f5b5d3; }

/* ── Hover __body : inversion bg↔color ─────────────────────────────────
   HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color sur le hero
   (:focus-within = maintient l'état quand un bouton est cliqué/focalisé)

.ccbla-utick-hero[data-compo="1"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="1"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#f5b5d3; --_h-color:#812b29; --_h-tag-bg:#812b29; --_h-tag-c:#f5b5d3;
}
.ccbla-utick-hero[data-compo="2"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="2"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#b1dff5; --_h-color:#6b4796; --_h-tag-bg:#6b4796; --_h-tag-c:#b1dff5;
}
.ccbla-utick-hero[data-compo="3"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="3"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#812b29; --_h-color:#f5b5d3; --_h-tag-bg:#f5b5d3; --_h-tag-c:#812b29;
}
.ccbla-utick-hero[data-compo="4"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="4"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#f5b5d3; --_h-color:#111111; --_h-tag-bg:#111111; --_h-tag-c:#f5b5d3;
}
.ccbla-utick-hero[data-compo="5"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="5"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#111111; --_h-color:#b1dff5; --_h-tag-bg:#b1dff5; --_h-tag-c:#111111;
}
.ccbla-utick-hero[data-compo="6"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="6"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#00726a; --_h-color:#fff7b2; --_h-tag-bg:#fff7b2; --_h-tag-c:#00726a;
}
.ccbla-utick-hero[data-compo="7"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="7"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#164191; --_h-color:#c6dfc4; --_h-tag-bg:#c6dfc4; --_h-tag-c:#164191;
}
.ccbla-utick-hero[data-compo="8"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="8"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#b1dff5; --_h-color:#164191; --_h-tag-bg:#164191; --_h-tag-c:#b1dff5;
}
.ccbla-utick-hero[data-compo="9"] .ccbla-utick-hero__body:hover,
.ccbla-utick-hero[data-compo="9"] .ccbla-utick-hero__body:focus-within {
    --_h-bg:#164191; --_h-color:#f5b5d3; --_h-tag-bg:#f5b5d3; --_h-tag-c:#164191;
}
*/


/* ── Image gauche ─────────────────────────────────────────────────────── */
.ccbla-utick-hero__img-wrap {
    position: relative;
    overflow: hidden;
    background: #111;
    min-height: 380px;
}

/* Variante <a> cliquable: aucun style visuel qui émule un lien, l'image reste identique. Le lien est aria-hidden + tabindex=-1 pour ne pas dupliquer le focus du titre (déjà lien). */
a.ccbla-utick-hero__img-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.ccbla-utick-hero__img-link:focus {
    outline: none; /* jamais focusable via clavier (tabindex=-1) */
}
.ccbla-utick-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
/* Zoom accentué légèrement (1.04 → 1.07) */
.ccbla-utick-hero:hover .ccbla-utick-hero__img,
.ccbla-utick-hero:focus-within .ccbla-utick-hero__img {
    transform: scale(1.07);
    will-change: transform; /* promu en couche GPU uniquement pendant le hover */
}

.ccbla-utick-hero__img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 380px;
    background: #1a1a1a;
    color: #555;
}
.ccbla-utick-hero__img-placeholder svg { width: 80px; height: 60px; }


/* ── Corps droit : grid content | aside ─────────────────────────────── */
.ccbla-utick-hero__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    background: var(--_h-bg);
    color: var(--_h-color);
    /* Transition retirée: les hover inversions sont commentées (ligne 51+), donc bg/color ne changent jamais → transition mort-née qui coûte un style recalc à chaque mouse enter/leave. À réactiver si on réactive les inversions. */
    overflow: hidden;
    cursor: default;
}


/* ── Colonne content ─────────────────────────────────────────────────── */
.ccbla-utick-hero__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 40px 20px 44px 30px;
    min-width: 0;
}

.ccbla-utick-hero__date {
    margin: 0 0 30px 0;
    padding: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    color: inherit;
    /* 2026-05-02: white-space:nowrap supprimé (tronquait les dates longues sur viewport étroit avant breakpoint mobile). Le wrap naturel est OK. */
}
.ccbla-utick-hero__date time { display: inline; }

/* Fix bug « titre noir »: un ruleset global h3 du thème/Kadence écrase `color: inherit` quand l'ordre de chargement CSS joue en sa défaveur (race condition intermittente). On passe en var explicite et on monte la spécificité avec le compound.ccbla-utick-hero ×. → 0,2,0 > 0,0,1 de `h3 { color: … }` et > 0,1,0 de `.wp-block-heading`. */
.ccbla-utick-hero .ccbla-utick-hero__title,
.ccbla-utick-hero .ccbla-utick-hero__title-link,
.ccbla-utick-hero .ccbla-utick-hero__title-link:hover,
.ccbla-utick-hero .ccbla-utick-hero__title-link:visited {
    color: var(--_h-color);
}
.ccbla-utick-hero__title {
    margin: 0 0 0 0;
    padding: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-bold, 'Agrandir Wide Bold', sans-serif);
    font-size: clamp(40px, 4.5vw, 60px);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -.02em;
}
.ccbla-utick-hero__title-link {
    text-decoration: none;
}
.ccbla-utick-hero__title-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

/* ── Organisateur (hero) ────────────────────────────────────────────── */
.ccbla-utick-hero__organizer {
    padding-top: 30px;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -.02em;
    color: inherit;
}



.ccbla-utick-hero__excerpt {
    margin: 24px 0 24px 0 !important;
    padding: 0;
    font-family: var(--wp--preset--font-family--instrument-sans, 'Instrument Sans', sans-serif);
    font-size: 16px;
    line-height: 120%;
    color: inherit;
    max-width: 52ch;
    font-weight: 500;
}
@media (min-width:768px){
    .ccbla-utick-hero__excerpt {
        font-size: 18px;       
        margin: auto 0 24px 0 !important;
    }
}
.ccbla-utick-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.ccbla-utick-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: 12px 10px 10px;   /* ← nudge identique aux autres POP buttons */
    font-size: 20px;      
    border: 1px solid var(--_h-color);
    background: transparent;
    color: var(--_h-color);
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    min-height: 44px;
    transition:
        background-color .2s ease,
        color            .2s ease,
        border-color     .2s ease;
}
/* Fix bug « bouton noir »: Kadence applique `.entry-content a { color: … }` (spécificité 0,1,1) qui écrase notre 0,1,0 sur le lien interne « En savoir plus ». Le « Réserver » s'en sortait parce que son `target="_blank"` pouvait être exclu par certaines règles Kadence. Compound selector → 0,2,0 bat toute règle globale de lien. */
.ccbla-utick-hero .ccbla-utick-hero__btn,
.ccbla-utick-hero .ccbla-utick-hero__btn:link,
.ccbla-utick-hero .ccbla-utick-hero__btn:visited {
    color: var(--_h-color);
    border-color: var(--_h-color);
}
.ccbla-utick-hero__btn:hover,
.ccbla-utick-hero__btn:focus-visible,
.ccbla-utick-hero .ccbla-utick-hero__btn:hover,
.ccbla-utick-hero .ccbla-utick-hero__btn:focus-visible {
    background: var(--_h-color);
    color: var(--_h-bg);
}
.ccbla-utick-hero__btn:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}
.ccbla-utick-hero__btn svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: -2px;
}


/* ── Aside (tags) ────────────────────────────────────────────────────── */
.ccbla-utick-hero__aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    padding: 40px 44px 44px 16px;
    flex-shrink: 0;
}

.ccbla-utick-hero__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 30px;
    border: 1.5px solid currentColor; /* 2026-05-09 (demande Nic — version print) : border = couleur typo */
    border-radius: 50%;
    overflow: hidden;
    background: var(--_h-tag-bg);
    color: var(--_h-tag-c);
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1;
    padding: 0 .5rem;
    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 du hero cf. blocks/event-card/event-card.css pour la rationale détaillée. */
.ccbla-utick-hero__tag--public {
    background: var(--_h-tag-c);
    color: var(--_h-tag-bg);
}


/* 3. GRILLE — layout 2 + 3 6 colonnes virtuelles: items 1-2 span 3 (= 2 par rangée) items 3+ span 2 (= 3 par rangée) */
.ccbla-utick-agenda__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0 !important;
}
/* Rangée 1 : 2 cards larges */
.ccbla-utick-agenda__item:nth-child(-n+2) { grid-column: span 3; }
/* Rangée 1 : titre 50px desktop */
.ccbla-utick-agenda__item:nth-child(-n+2) .ccbla-utick-card__title {
    font-size: 50px !important;
}
/* Rangée 2 : 3 cards moyennes */
.ccbla-utick-agenda__item:nth-child(n+3)  { grid-column: span 2; }
/* Rangée 2 (3 col) : titre max 40px desktop */
.ccbla-utick-agenda__item:nth-child(n+3) .ccbla-utick-card__title {
    font-size: 40px !important;
}

/* ── Organisateur (grid cards) — 18px desktop ────────────────────── */
.ccbla-utick-agenda .ccbla-utick-card__organizer {
    font-size: 18px;
}

.ccbla-utick-agenda__item {
    display: flex;
    align-items: stretch;
}
.ccbla-utick-agenda__item .ccbla-utick-card { width: 100%; }


/* 4. RESPONSIVE */
@media ( max-width: 1024px ) {
    .ccbla-utick-hero { grid-template-columns: 1fr; }
    .ccbla-utick-hero__img-wrap { min-height: 280px; aspect-ratio: 16 / 9; }
    .ccbla-utick-hero__img { object-position: center center; }
    .ccbla-utick-hero__body { grid-template-columns: 1fr; }
    .ccbla-utick-hero__content { padding: 32px 32px 36px 32px; }
    .ccbla-utick-hero__organizer { font-size: 20px; }
    .ccbla-utick-hero__aside {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 32px 36px 32px;
    }
    /* Revenir à 2 colonnes uniformes, annuler les span */
    .ccbla-utick-agenda__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ccbla-utick-agenda__item:nth-child(-n+2),
    .ccbla-utick-agenda__item:nth-child(n+3)  { grid-column: span 1; }
    /* Titres grid : 40px tablette */
    .ccbla-utick-agenda__item:nth-child(-n+2) .ccbla-utick-card__title,
    .ccbla-utick-agenda__item:nth-child(n+3) .ccbla-utick-card__title {
        font-size: 40px !important;
    }
    /* Organisateur grid : 20px tablette */
    .ccbla-utick-agenda .ccbla-utick-card__organizer { font-size: 20px; }
    /* Tablette : hero + 4 grid = 5 éléments → cacher le 5e item grid */
    .ccbla-utick-agenda__item:nth-child(n+5) { display: none; }
}
@media ( max-width: 767px ) {
    .ccbla-utick-hero__content { padding: 24px 20px 28px 20px; }
    .ccbla-utick-hero__aside { padding: 0 20px 28px 20px; }
    .ccbla-utick-hero__date { white-space: normal; font-size: 16px; }
    .ccbla-utick-hero__organizer { font-size: 20px; }
    .ccbla-utick-agenda__grid { grid-template-columns: 1fr; gap: 20px; }
    .ccbla-utick-agenda__item:nth-child(-n+2),
    .ccbla-utick-agenda__item:nth-child(n+3)  { grid-column: span 1; }
    /* Mobile : hero + 2 grid = 3 éléments → cacher items 3-5 */
    .ccbla-utick-agenda__item:nth-child(n+3) { display: none; }
}