/* ═══════════════════════════════════════════════════════════════════════
 * CCBLA — Bloc duree-event
 * blocks/duree-event/style.css
 * ─────────────────────────────────────────────────────────────────────
 * Affiche la durée en format minutes + prime (« 160′ »).
 *
 * Couleur :
 *   • Sur un single event (.compo-single englobant) — héritage via la
 *     règle .compo-single p,time { color: inherit !important; } injectée
 *     par inc/single-compo.php L99-101 sur <body>. Aucune surcharge
 *     locale nécessaire ; on déclare cependant un fallback var(--ccbla-
 *     compo-color, currentColor) pour le cas hors single (placement
 *     atypique, contexte autre que kadence_element single-event).
 *   • La même var --ccbla-compo-color est posée sur <body> par
 *     single-compo.php L92 → accessible globalement sur les 3 CPT.
 *
 * Typographie :
 *   Agrandir Wide Bold, font-weight: 400 (garde-fou faux-bold global —
 *   cf. CCBLA-PROJECT.md « Tooling & resources / Fonts »).
 *
 * Breakpoints (cohérence Kadence projet) :
 *   Desktop  > 1024px  30px
 *   Tablette ≤ 1024px  25px
 *   Mobile   ≤ 767px   20px
 *
 * 2026-05-18 — Création (demande Nic, image de référence type maquette).
 * ═══════════════════════════════════════════════════════════════════════ */

.ccbla-duree-event {
    margin: 0;
    padding: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-bold, 'Agrandir Wide Bold', sans-serif);
    font-weight: 400; /* Garde-fou : tous les cuts Agrandir sont déclarés 400 dans @font-face → toute valeur > 400 produirait du faux-bold synthétique */
    font-size: 30px;
    line-height: 1;
    color: var(--ccbla-compo-color, currentColor);
}

.ccbla-duree-event__time {
    font-style: normal; /* <time> default ne porte pas d'italic mais on documente */
    font-variant-numeric: tabular-nums; /* chiffres à largeur constante : évite le « jump » si la durée change dans une page paginée */
}

/* ── Tablette (≤ 1024px, breakpoint Kadence) ──────────────────────── */
@media (max-width: 1024px) {
    .ccbla-duree-event {
        font-size: 25px;
    }
}

/* ── Mobile (≤ 767px, breakpoint Kadence) ─────────────────────────── */
@media (max-width: 767px) {
    .ccbla-duree-event {
        font-size: 20px;
    }
}
