/* ── REPRISE (IA + humain) ── bloo-header ──
 * FICHIER : assets/css/www/www-ressources.css
 * ROLE : Styles de la page « Ressources » (/ressources) : héros, liste de documents PDF (icône Lucide, titre,
 *        description, méta avec badge PDF, bouton de téléchargement), note « à venir ».
 * ENTREES/SORTIES : Préfixe .res-* et classe du body .bloo-www-res. Icônes = SVG Lucide inline (classe .lc). Rupture 640 px.
 * DEPEND : /assets/css/bloo-www-2026.css (jetons --surf, --line, --ink, --ink-2, --ink-3, --brand, --maxw, --r, --r-l,
 *          --shadow ; .wrap, .sec, .lede, .eyebrow, .btn, .page-hero).
 * APPELE PAR : www/www-ressources.html via $PAGE['head'] (<link> ?v= = empreinte SHA-256).
 * MAJ : 2026-10-13 · rel3015 · création
 *       2026-10-13 · rel3016 · icônes Lucide inline (.lc) ; badge PDF dans la méta ; survol des cartes
 * ── fin REPRISE ── */

.res-crumbs{max-width:var(--maxw);margin:0 auto;padding:10px 22px 0;font-size:13px;color:var(--ink-3)}
.res-crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.res-crumbs li+li::before{content:"\203A";margin-right:6px;color:var(--ink-3)}
.res-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

.res-hero{padding-top:26px}
.res-hero h1{font-size:clamp(30px,4.6vw,48px);margin:12px auto 0}
.res-lede{max-width:70ch;color:var(--ink-2);line-height:1.7;margin:14px auto 0}
.bloo-www-res .eyebrow{display:inline-flex;align-items:center;gap:7px}
.bloo-www-res .eyebrow .lc{width:16px;height:16px}

.res-sech{font-size:clamp(20px,2.6vw,26px);color:var(--ink);margin:34px 0 0}
.res-sech:first-of-type{margin-top:8px}
.res-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.res-num{font-weight:800;font-size:18px;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.res-item{display:flex;align-items:center;gap:18px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.res-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:0 10px 30px rgba(16,8,72,.12)}
.res-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.res-ico .lc{width:26px;height:26px}
.res-body{flex:1 1 auto;min-width:0}
.res-body h2{margin:0 0 4px;font-size:19px;color:var(--ink)}
.res-body p{margin:0 0 8px;color:var(--ink-2);line-height:1.55}
.res-meta{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.res-meta .lc{width:15px;height:15px;flex:0 0 auto}
.res-dl{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap}
.res-dl .lc{width:18px;height:18px}
.res-langs{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap}
.res-lang{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .12s ease, background .12s ease, color .12s ease}
.res-lang:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surf));color:var(--brand)}

.res-more{margin:22px auto 0;color:var(--ink-3);font-size:14px}

@media (max-width:640px){
  .res-item{flex-direction:column;align-items:flex-start;gap:12px}
  .res-dl{width:100%;justify-content:center}
  .res-langs{width:100%}
  .res-lang{flex:1 1 0}
}