/* ==========================================================================
   blog.css — extrait de blog.php le 03/08/2026.
   Charge a la place exacte qu'occupait le <style> : ces regles surclassent
   app.css et app-light.css parce qu'elles viennent APRES. Ne pas remonter
   ce <link> plus haut dans le <head>.
   ========================================================================== */
.blog-body{ background:var(--bz-bg-soft); color:var(--bz-text); font-family:'Inter',system-ui,sans-serif; }
.blog-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; max-width:1080px; margin:0 auto; }
.blog-head .logo{ display:inline-flex; align-items:center; gap:8px; color:var(--bz-text); font-family:'Poppins',sans-serif; font-weight:800; text-decoration:none; }
.blog-head .logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--bz-blue-vif); }
.blog-head a.blog-cta{ color:var(--bz-text-2); text-decoration:none; font-size:.95rem; font-weight:600; padding:8px 15px; border:1px solid rgba(var(--bz-ink-rgb),.14); border-radius:20px; }
.blog-wrap{ max-width:1080px; margin:0 auto; padding:20px 22px 60px; }
.blog-hero h1{ font-family:'Poppins',sans-serif; font-size:2rem; color:var(--bz-text); margin:8px 0 6px; }
.blog-hero p{ color:var(--bz-text-2b); max-width:680px; line-height:1.7; font-size:1.05rem; }
.blog-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 4px; }
.blog-tab{ text-decoration:none; font-weight:700; font-size:.92rem; color:var(--bz-text-2); padding:9px 18px; border-radius:22px; border:1px solid rgba(var(--bz-ink-rgb),.14); }
.blog-tab.on{ color:var(--bz-sur-accent); background:var(--bz-blue-vif); border-color:var(--bz-blue-vif); }
.blog-tab:hover:not(.on){ border-color:rgba(var(--bz-blue-vif-rgb),.5); color:var(--bz-text); }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-top:26px; }
.blog-card{ display:flex; flex-direction:column; border:1px solid rgba(var(--bz-ink-rgb),.09); border-radius:16px; overflow:hidden; background:var(--bz-bg-soft2); transition:.15s ease; }
.blog-card:hover{ border-color:rgba(var(--bz-blue-vif-rgb),.4); transform:translateY(-2px); }
.blog-card-cover{ line-height:0; }
.blog-card-cover svg{ width:100%; height:auto; aspect-ratio:12/4; display:block; }
.blog-card-in{ display:flex; flex-direction:column; padding:16px 18px; flex:1; }
.blog-card-badges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.blog-chip{ font-size:.7rem; font-weight:700; border-radius:20px; padding:3px 10px; }
.blog-chip.space{ color:var(--bz-sur-accent); background:var(--bz-blue-vif); }
.blog-chip.type{ color:var(--bz-text-2); background:rgba(var(--bz-ink-rgb),.07); border:1px solid rgba(var(--bz-ink-rgb),.14); }
.blog-chip.read{ color:var(--bz-text-3); }
.blog-card h2{ font-size:1.1rem; line-height:1.3; margin:0 0 8px; }
.blog-card h2 a{ color:var(--bz-text); text-decoration:none; }
.blog-card h2 a:hover{ color:var(--bz-blue-vif); }
.blog-card p{ color:var(--bz-text-2b); font-size:.92rem; line-height:1.55; margin:0 0 12px; flex:1; }
.blog-card-foot{ display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--bz-text-3); }
.blog-card-foot a{ color:var(--bz-blue-vif); text-decoration:none; font-weight:600; }
.blog-empty{ text-align:center; color:var(--bz-text-2b); padding:50px 20px; }
.blog-pager{ display:flex; justify-content:center; gap:12px; margin-top:34px; }
.blog-pager a{ color:var(--bz-text-2); text-decoration:none; padding:9px 16px; border:1px solid rgba(var(--bz-ink-rgb),.14); border-radius:10px; font-size:.9rem; }
@media(max-width:560px){ .blog-hero h1{ font-size:1.6rem; } }
