/* =========================================================
   Blog / ressources - Union du Recrutement
   ========================================================= */

/* Liste */
.blog-hero{ max-width:64ch; }
.blog-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }
.blog-filter{ padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-family:inherit; font-size:14.5px; font-weight:500; color:var(--navy); cursor:pointer; transition:.2s; }
.blog-filter:hover{ border-color:var(--blue); color:var(--blue); }
.blog-filter.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.bcard{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.bcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.bcard__top{ height:8px; background:var(--grad, linear-gradient(120deg,#2d71d3,#6c9be0)); }
.bcard__body{ padding:26px; display:flex; flex-direction:column; flex:1; }
.bcard__cat{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); }
.bcard h3{ font-size:1.18rem; line-height:1.3; margin:12px 0 10px; }
.bcard__exc{ font-size:14.5px; color:var(--muted); line-height:1.6; flex:1; }
.bcard__meta{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:13px; color:var(--muted-soft,#8a97a6); }
.bcard__meta b{ color:var(--navy); font-weight:600; }
.bcard__link{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:600; font-size:14.5px; color:var(--blue); }
.bcard__link svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.bcard:hover .bcard__link svg{ transform:translateX(3px); }

/* Article */
.article{ max-width:760px; margin-inline:auto; }
.article__crumb{ display:flex; width:fit-content; align-items:center; gap:7px; font-size:14px; color:var(--muted); margin-bottom:22px; }
.article__crumb a:hover{ color:var(--blue); }
.article__crumb svg{ width:14px; height:14px; opacity:.6; }
.article__cat{ font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); }
.article h1{ font-size:clamp(2rem,4vw,2.9rem); margin:14px 0 18px; line-height:1.12; }
.article__meta{ display:flex; align-items:center; gap:14px; font-size:14.5px; color:var(--muted); padding-bottom:26px; border-bottom:1px solid var(--line); }
.article__dot{ width:4px; height:4px; border-radius:50%; background:var(--line-strong,#cfd9e6); }
.article__body{ margin-top:30px; }
.article__body h2{ font-size:1.5rem; margin:38px 0 14px; }
.article__body p{ font-size:1.08rem; line-height:1.78; color:var(--text); margin-bottom:18px; }
.article__body ul{ margin:0 0 20px; padding-left:4px; list-style:none; }
.article__body li{ position:relative; padding-left:30px; font-size:1.06rem; line-height:1.7; color:var(--text); margin-bottom:12px; }
.article__body li::before{ content:""; position:absolute; left:4px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--blue); }

.article__share{ display:flex; align-items:center; gap:12px; margin-top:42px; padding-top:26px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted); }
.article__share a{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; color:var(--navy); transition:.2s; }
.article__share a:hover{ border-color:var(--blue); color:var(--blue); }
.article__share svg{ width:18px; height:18px; }

.article-cta{ margin-top:50px; background:var(--navy); border-radius:var(--radius-lg); padding:clamp(30px,4vw,48px); text-align:center; color:#cdd9e8; }
.article-cta h3{ color:#fff; font-size:1.5rem; }
.article-cta p{ color:#9fb2c9; margin:12px auto 0; max-width:48ch; }
.article-cta .btn{ margin-top:22px; }

.more-articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; }

/* Newsletter (bandeau réutilisable) */
.nlband{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(30px,4vw,46px); display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
.nlband h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.nlband p{ color:var(--muted); margin-top:12px; font-size:15.5px; line-height:1.6; }
.nlband__form{ display:flex; gap:10px; flex-wrap:wrap; }
.nlband__form input{ flex:1 1 200px; padding:14px 16px; border:1px solid var(--line); border-radius:999px; font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface); }
.nlband__form input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-50); }
.nlband__ok{ display:none; margin-top:12px; font-size:14.5px; color:#177a48; font-weight:600; }
.nlband__ok.show{ display:block; }
.nlband__legal{ font-size:12.5px; color:var(--muted-soft,#8a97a6); margin-top:10px; }

@media (max-width:880px){
  .blog-grid, .more-articles{ grid-template-columns:1fr; }
  .nlband{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .blog-grid, .more-articles{ grid-template-columns:1fr; }
}