/* =========================================================
   Page « Documents utiles » — grille de cartes (télécharger /
   aperçu) + état vide. Charte dark + accents dorés.
   Tokens : tokens.css. Porté depuis design-poc/documents.html.
   ========================================================= */

.documents-page .doc-head { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; }
.documents-page .doc-count {
    font-size:.8rem; font-weight:500; color:var(--text-muted);
    background:var(--surface-3); border:1px solid var(--border); border-radius:999px; padding:.15rem .6rem;
}
.documents-page .doc-lede { font-size:.9rem; color:var(--text-muted); margin:.25rem 0 1.5rem; max-width:56ch; }

/* ---- Grille de documents ---- */
.documents-page .doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.documents-page .doc-card {
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:1.15rem 1.2rem 1.1rem; display:flex; flex-direction:column;
    transition:border-color .15s, transform .15s;
}
.documents-page .doc-card:hover { border-color:var(--border-strong); transform:translateY(-2px); }

.documents-page .doc-top { display:flex; align-items:flex-start; gap:.85rem; }
.documents-page .doc-ico {
    flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
    background:var(--gold-soft); border:1px solid var(--border-strong); color:var(--gold-strong);
}
.documents-page .doc-ico svg { width:22px; height:22px; }
.documents-page .doc-name { font-size:1rem; font-weight:600; line-height:1.3; margin:0; }
.documents-page .doc-desc {
    font-size:.84rem; color:var(--text-muted); margin:.55rem 0 .8rem;
    overflow-wrap:anywhere;
}

.documents-page .doc-meta { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; }
.documents-page .doc-chip {
    display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--text-muted);
    background:var(--surface-3); border:1px solid var(--border); border-radius:999px; padding:.2rem .55rem;
}
.documents-page .doc-chip.is-pdf { color:var(--gold-strong); border-color:var(--border-strong); }
.documents-page .doc-chip svg { width:12px; height:12px; }

.documents-page .doc-actions {
    display:flex; gap:.5rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border);
}
.documents-page .doc-actions .ui-btn:first-child { flex:1; }

/* ---- État vide ---- */
.documents-page .doc-empty { text-align:center; padding:3.5rem 1rem; }
.documents-page .doc-empty-ico {
    width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center;
    background:var(--surface-3); border:1px solid var(--border); color:var(--text-faint);
}
.documents-page .doc-empty-ico svg { width:30px; height:30px; }
.documents-page .doc-empty h2 { font-size:1.15rem; font-weight:600; margin-bottom:.35rem; }
.documents-page .doc-empty p { font-size:.9rem; color:var(--text-muted); max-width:44ch; margin:0 auto; }