/* ══════════════════════════════════════════════════════════════════════
 * CCBLA — Bloc : Fichiers joints d'un article membre
 * Design aligné sur le thème POP :
 *   • border-radius 0 · noir/blanc
 *   • Agrandir Wide Medium (titre 50px, labels, boutons, métas)
 *   • Agrandir Tight Bold (nom de fichier)
 *   • compteur pink pop-rose conservé (accent identitaire)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Conteneur principal ─────────────────────────────────────────────── */
.ccbla-fichiers-joints {
    background:    #fff;
    border:        1px solid #000;
    border-radius: 0;
    padding:       20px 24px 22px;
    margin:        24px 0;
    font-family:   var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    color:         #000;
}

/* ── Titre de section — Agrandir Wide Medium 50px (2026-05-01) Picto retiré (render.php) → flex toujours utilisé pour aligner texte + compteur. Border-bottom CONSERVÉ (séparateur titre/liste demandé). */
.ccbla-fichiers-joints__title {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin:         0 0 16px;
    padding-bottom: 14px;
    border-bottom:  1px solid #000;
    font-family:    var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:      50px;
    font-weight:    400;
    line-height:    110%;
    color:          #000;
    text-transform: none;
}

.ccbla-fichiers-joints__count {
    /* 2026-05-20 (demande Nic) — Refonte alignée sur convention v1.6.ccbla-dl-count (cf. CCBLA-PROJECT.md L755): passage pop-rose → pop-quaternary (vert sombre), cercle parfait 22×22, Agrandir Wide Medium 11px, padding 2px 0 0 1px (sans !important = surchargeable contextuellement par la cascade comme dans.ccbla-dl-count). Cohérence visuelle absolue avec les compteurs UM (posts tab, etc.). */
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           22px !important;
    height:          22px !important;
    padding:         2px 0 0 1px;
    border-radius:   50% !important;
    background:      var(--pop-quaternary, #00726a) !important;
    color:           #fff !important;
    font-size:       11px !important;
    font-weight:     400 !important;
    flex-shrink:     0 !important;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium) !important;
}

/* ── Liste des fichiers ──────────────────────────────────────────────── */
.ccbla-fichiers-joints__list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0;
}

.ccbla-fichiers-joints__item {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 4px;
    background:    transparent;
    border:        none;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    transition:    background .15s ease;
}
.ccbla-fichiers-joints__item:last-child { border-bottom: none; }
.ccbla-fichiers-joints__item:hover { background: #f7f7f7; }

/* Icône fichier (emoji ou SVG) */
.ccbla-fj-icon {
    font-size:   22px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    width:       36px;
    height:      36px;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    background:  #f0f0f0;
    border:      1px solid rgba(0, 0, 0, .08);
}

/* Bloc info (nom + taille) */
.ccbla-fj-info {
    flex:       1;
    min-width:  0;
    display:    flex;
    flex-direction: column;
    gap:        3px;
}
.ccbla-fj-name {
    font-family:   var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif);
    font-size:     16px;
    font-weight:   400;
    line-height:   1.2;
    color:         #000;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.ccbla-fj-size {
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:       12px;
    font-weight:     400;
    color:           #666;
    text-transform:  uppercase;
    letter-spacing:  .03em;
}

/* Bouton télécharger individuel — style outline site */
.ccbla-fj-dl-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    flex-shrink:     0;
    padding:         10px 16px;
    background:      #fff;
    border:          1px solid #000;
    border-radius:   0;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:       13px;
    font-weight:     400;
    color:           #000;
    text-decoration: none;
    text-transform:  uppercase;
    letter-spacing:  .03em;
    white-space:     nowrap;
    line-height:     1;
    transition:      background .15s ease, color .15s ease;
    cursor:          pointer;
}
.ccbla-fj-dl-btn:hover,
.ccbla-fj-dl-btn:focus-visible {
    background: #000;
    color:      #fff;
}
.ccbla-fj-dl-btn:hover svg,
.ccbla-fj-dl-btn:focus-visible svg { stroke: #fff; }
.ccbla-fj-dl-btn svg { stroke: #000; transition: stroke .15s ease; flex-shrink: 0; }

/* ── Footer : bouton ZIP — style plein pop-rose (action primaire) ────── */
.ccbla-fichiers-joints__footer {
    margin-top:     18px;
    padding-top:    18px;
    border-top:     1px solid #000;
    display:        flex;
    justify-content: flex-end;
}

.ccbla-fj-zip-btn {
    /* 2026-05-20 (demande Nic) — Passage background/border pop-rose → pop-quaternary (vert sombre) pour cohérence avec compteur et avec les CTA UM. Retrait line-height:1 (laisse la cap-height naturelle de Agrandir Wide Medium). Hover: fond blanc + texte pop-rose (contrast inversé conservé pour identité accent rose). Border = couleur de fond pour anti-décollement visuel au hover. */
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    padding:         12px 22px;
    background:      var(--pop-quaternary, #00726a) !important;
    color:           #fff;
    border:          1px solid var(--pop-quaternary, #00726a) !important;
    border-radius:   0;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium);
    font-size:       14px;
    font-weight:     400;
    text-decoration: none;
    text-transform:  uppercase;
    letter-spacing:  .03em;
    transition:      background .15s ease, color .15s ease;
    cursor:          pointer;
}
.ccbla-fj-zip-btn svg { stroke: #fff; transition: stroke .15s ease; flex-shrink: 0; }
.ccbla-fj-zip-btn:hover,
.ccbla-fj-zip-btn:focus-visible {
    color:      var(--wp--preset--color--pop-rose, #e91e8c);
    background: #fff !important;
}
.ccbla-fj-zip-btn:hover svg,
.ccbla-fj-zip-btn:focus-visible svg { stroke: var(--wp--preset--color--pop-rose, #e91e8c); }

.ccbla-fj-zip-hint {
    font-family:    var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:      12px;
    font-weight:    400;
    opacity:        .9;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Accès verrouillé (non membre) ───────────────────────────────────── */
.ccbla-fichiers-locked {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       16px 20px;
    background:    #fff;
    border:        1px solid #000;
    border-radius: 0;
    font-family:   var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:     14px;
    color:         #000;
    margin:        20px 0;
}
.ccbla-fichiers-locked__icon {
    font-size:   1.4rem;
    flex-shrink: 0;
}

/* ── Responsive (breakpoints Kadence) ─────────────────────────────────── */
@media (max-width: 1023px) {
    .ccbla-fichiers-joints__title { font-size: 30px; }
}

@media (max-width: 767px) {
    .ccbla-fichiers-joints { padding: 16px; }
    .ccbla-fichiers-joints__title { font-size: 30px; }
    .ccbla-fichiers-joints__item { padding: 12px 0; gap: 10px; }
    .ccbla-fj-dl-btn span  { display: none; }
    .ccbla-fj-dl-btn       { padding: 10px 12px; }
    .ccbla-fj-zip-hint     { display: none; }
    .ccbla-fichiers-joints__footer { justify-content: stretch; }
    .ccbla-fj-zip-btn      { width: 100%; justify-content: center; }
}

/* ── Focus visible (WCAG 2.2 SC 2.4.11) ────────────────────────────── */
.ccbla-fj-dl-btn:focus-visible,
.ccbla-fj-zip-btn:focus-visible {
    outline:        3px solid #005fcc;
    outline-offset: 2px;
}
.ccbla-fj-dl-btn:focus:not(:focus-visible),
.ccbla-fj-zip-btn:focus:not(:focus-visible) { outline: none; }