/* ============================================================
   BLOG — Page listing articles
============================================================ */

#blog{padding:160px 44px 60px;background:var(--dk);color:#fff}
#blog .wrap{max-width:1240px;margin:0 auto}

/* Fil d'Ariane */
.blog-crumb{font-size:13px;color:rgba(255,255,255,.55);margin:0 0 28px;text-align:center}
.blog-crumb a{color:rgba(255,255,255,.78);text-decoration:none;transition:color .2s}
.blog-crumb a:hover{color:var(--g)}
.blog-crumb .sep{margin:0 8px;opacity:.45}
.blog-crumb span:last-child{color:#fff}

/* Hero */
.blog-head{text-align:center;margin-bottom:60px}
.blog-head .sl{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--g);background:rgba(145,239,25,.08);padding:6px 14px;border-radius:50px;margin-bottom:18px}
.blog-head h1{font-family:'Outfit',sans-serif;font-size:56px;font-weight:800;line-height:1.1;margin:0 0 14px}
.blog-head h1 em{font-style:normal;color:var(--g)}
.blog-head p{font-size:17px;color:rgba(255,255,255,.72);margin:0 auto;max-width:640px;line-height:1.6}

/* ───────────── ARTICLES FEATURED (top 3) — image au-dessus, texte dessous ───────────── */
.blog-featured{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px;margin-bottom:64px;align-items:stretch}
.blog-feat{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#151515;border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#fff;opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,.68,0,1.2),transform .7s cubic-bezier(.22,.68,0,1.2),border-color .3s}
.blog-feat.in{opacity:1;transform:translateY(0)}
.blog-feat:hover{border-color:rgba(145,239,25,.35)}
.blog-feat-big{border:2px solid var(--g);box-shadow:0 0 0 1px rgba(109,193,42,.15),0 8px 32px rgba(109,193,42,.12)}
.blog-feat-big:hover{border-color:var(--g)}
.blog-feat img{width:100%;display:block;object-fit:cover;background:#0a0a0a;transition:transform .6s cubic-bezier(.22,.68,0,1.2)}
.blog-feat-big img{aspect-ratio:600/360}
.blog-feat-small img{aspect-ratio:600/340}
.blog-feat:hover img{transform:scale(1.04)}
.blog-feat-body{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1}
.blog-feat-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(145,239,25,.92);color:#050505;padding:6px 11px;border-radius:50px;margin-bottom:14px;align-self:flex-start}
.blog-feat-title{font-family:'Outfit',sans-serif;font-size:19px;font-weight:700;line-height:1.3;margin:0 0 10px;color:#fff}
.blog-feat-big .blog-feat-title{font-size:26px;line-height:1.22}
.blog-feat-excerpt{font-size:14px;color:rgba(255,255,255,.72);line-height:1.6;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-feat-big .blog-feat-excerpt{-webkit-line-clamp:4}
.blog-feat-btn{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--g);border:1.5px solid var(--g);font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:50px;align-self:flex-start;transition:all .2s}
.blog-feat-btn::after{content:'→';transition:transform .2s}
.blog-feat:hover .blog-feat-btn{background:var(--g);color:#050505}
.blog-feat:hover .blog-feat-btn::after{transform:translateX(4px)}

/* ───────────── GRID autres articles ───────────── */
.blog-grid-title{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;margin:0 0 24px;color:#fff;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{display:flex;flex-direction:column;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,.68,0,1.2),transform .7s cubic-bezier(.22,.68,0,1.2),border-color .3s}
.blog-card.in{opacity:1;transform:translateY(0)}
.blog-card:hover{border-color:rgba(145,239,25,.35)}
.blog-thumb{aspect-ratio:600/338;overflow:hidden;background:#0a0a0a;position:relative}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.68,0,1.2)}
.blog-card:hover .blog-thumb img{transform:scale(1.07)}
.blog-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.blog-title{font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;line-height:1.3;color:#fff;margin:0 0 10px}
.blog-excerpt{font-size:13px;color:rgba(255,255,255,.72);line-height:1.55;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-btn{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--g);border:1.5px solid var(--g);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:50px;transition:all .2s;align-self:flex-start}
.blog-card:hover .blog-btn{background:var(--g);color:#050505}

/* Bloc SEO bas */
.blog-seo{max-width:860px;margin:80px auto 0;padding:0 10px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.75}
.blog-seo h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:#fff;margin:0 0 18px;text-align:center}
.blog-seo p{margin:0 0 14px}
.blog-seo a{color:var(--g);text-decoration:none}
.blog-seo a:hover{text-decoration:underline}

@media(max-width:1100px){
  .blog-featured{grid-template-columns:1fr 1fr;gap:18px}
  .blog-featured .blog-feat:first-child{grid-column:1/-1}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  #blog{padding:130px 18px 50px}
  .blog-head h1{font-size:38px}
  .blog-featured{grid-template-columns:1fr;gap:16px}
  .blog-featured .blog-feat:first-child{grid-column:auto}
  .blog-feat-big img,.blog-feat-small img{aspect-ratio:16/9}
  .blog-feat-body{padding:20px 22px 22px}
  .blog-feat-big .blog-feat-title{font-size:22px}
  .blog-grid{grid-template-columns:1fr;gap:16px}
  .blog-seo{margin-top:60px;font-size:14px}
}