/* ══════════════════════════════════════════════════
   BLOG LIST — Mobile-first
   Breakpoints : 480 / 768 / 992 / 1200
══════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────── */
.blog-hero {
  background: linear-gradient(145deg,#1a1d3b 0%,#2d1060 55%,#0f3460 100%);
  padding: clamp(90px,12vw,130px) 0 clamp(50px,7vw,80px);
  position:relative; overflow:hidden;
}
.blog-hero::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px; pointer-events:none;
}
.bh-orb { position:absolute; border-radius:50%; pointer-events:none; }
.bh-orb-1 { width:460px;height:460px;top:-140px;right:-100px;background:radial-gradient(circle,rgba(54,162,206,.18),transparent 70%); }
.bh-orb-2 { width:340px;height:340px;bottom:-100px;left:-60px; background:radial-gradient(circle,rgba(130,190,96,.14),transparent 70%); }

.bh-label {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:7px 18px;border-radius:50px;margin-bottom:20px;
}
.blog-hero h1 {
  font-family:var(--font-heading);
  font-size:clamp(1.9rem,5vw,3.2rem);
  font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px;
}
.blog-hero-sub { font-size:clamp(.9rem,1.8vw,1.05rem);color:rgba(255,255,255,.7);line-height:1.8;max-width:540px; }
.bh-breadcrumb { display:flex;align-items:center;gap:8px;margin-top:24px;font-size:.78rem;color:rgba(255,255,255,.4);flex-wrap:wrap; }
.bh-breadcrumb a { color:rgba(255,255,255,.55);text-decoration:none; }
.bh-breadcrumb a:hover { color:#fff; }

/* ── FILTRES CATÉGORIES ─────────────────────────── */
.blog-filters {
  padding: clamp(24px,4vw,36px) 0;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 70px; z-index: 50;
}
.bf-inner {
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.bf-tag {
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:50px;
  font-family:var(--font-heading);font-size:.78rem;font-weight:700;
  border:1.5px solid var(--c-border);background:#fff;color:var(--c-text);
  cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;
}
.bf-tag:hover,.bf-tag.active {
  background:var(--c-navy);color:#fff;border-color:var(--c-navy);
}
.bf-tag.active { background:var(--grad-main);border-color:transparent; }
.bf-count {
  background:rgba(255,255,255,.2);border-radius:50px;
  padding:1px 7px;font-size:.68rem;
}
.bf-tag:not(.active) .bf-count { background:var(--c-light);color:var(--c-muted); }

/* ── SECTION ARTICLES ───────────────────────────── */
.section-blog { padding:clamp(52px,8vw,90px) 0; background:var(--c-light); }

/* Article vedette (featured) */
.article-featured {
  background:#fff;border-radius:22px;
  border:1.5px solid var(--c-border);
  overflow:hidden;margin-bottom:clamp(28px,4vw,48px);
  transition:box-shadow .25s;
  display:grid;grid-template-columns:1fr 1fr;
}
.article-featured:hover { box-shadow:0 20px 60px rgba(78,43,134,.1); }

.af-visual {
  background:linear-gradient(135deg,rgba(78,43,134,.12),rgba(54,162,206,.1));
  position:relative;min-height:360px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.af-visual img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0; }
.af-visual-placeholder {
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:rgba(78,43,134,.35);z-index:1;position:relative;
}
.af-visual-placeholder i { font-size:3.5rem; }
.af-visual-placeholder span { font-family:var(--font-heading);font-size:.8rem;font-weight:600; }

.af-badge {
  position:absolute;top:18px;left:18px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--grad-main);color:#fff;
  padding:5px 14px;border-radius:50px;
  font-family:var(--font-heading);font-size:.72rem;font-weight:700;
}

.af-content { padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center; }
.af-cat {
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-heading);font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;
}
.af-cat-dot { width:6px;height:6px;border-radius:50%; }

.af-title {
  font-family:var(--font-heading);
  font-size:clamp(1.2rem,2.5vw,1.65rem);
  font-weight:800;color:var(--c-navy);line-height:1.3;
  margin-bottom:14px;
  text-decoration:none;display:block;
  transition:color .2s;
}
.af-title:hover { color:var(--c-purple); }

.af-excerpt { font-size:.9rem;color:var(--c-text);line-height:1.8;margin-bottom:22px;flex:1; }

.af-meta { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px; }
.af-meta-item { display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--c-muted); }
.af-meta-item i { font-size:.72rem; }

.af-readmore {
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-heading);font-size:.84rem;font-weight:700;
  color:var(--c-purple);text-decoration:none;
  transition:gap .2s;align-self:flex-start;
}
.af-readmore:hover { gap:12px;color:var(--c-blue); }

/* Grille articles normaux */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.5vw,24px);
}

.article-card {
  background:#fff;border-radius:18px;
  border:1.5px solid var(--c-border);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  text-decoration:none;
}
.article-card:hover { transform:translateY(-6px);box-shadow:0 18px 50px rgba(78,43,134,.1);border-color:transparent; }

.ac-thumb {
  aspect-ratio:16/9;overflow:hidden;position:relative;
  background:linear-gradient(135deg,rgba(78,43,134,.08),rgba(54,162,206,.07));
  display:flex;align-items:center;justify-content:center;
}
.ac-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease; }
.article-card:hover .ac-thumb img { transform:scale(1.04); }
.ac-thumb-placeholder { color:rgba(78,43,134,.25);font-size:2.2rem; }

.ac-cat-badge {
  position:absolute;top:12px;left:12px;
  padding:4px 12px;border-radius:50px;
  font-family:var(--font-heading);font-size:.68rem;font-weight:700;
  color:#fff;
}

.ac-body { padding:clamp(18px,2.5vw,24px);display:flex;flex-direction:column;flex:1; }
.ac-cat {
  font-family:var(--font-heading);font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;gap:5px;
}
.ac-cat-dot { width:5px;height:5px;border-radius:50%; }

.ac-title {
  font-family:var(--font-heading);font-size:clamp(.95rem,1.8vw,1.05rem);
  font-weight:700;color:var(--c-navy);line-height:1.4;
  margin-bottom:10px;flex:1;
}
.ac-excerpt { font-size:.82rem;color:var(--c-text);line-height:1.7;margin-bottom:16px; }

.ac-footer {
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--c-border);
  margin-top:auto;
}
.ac-date { font-size:.74rem;color:var(--c-muted);display:flex;align-items:center;gap:5px; }
.ac-read { font-size:.74rem;color:var(--c-muted);display:flex;align-items:center;gap:5px; }
.ac-arrow {
  width:30px;height:30px;border-radius:50%;
  background:var(--c-light);color:var(--c-purple);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  transition:background .2s,color .2s,transform .2s;
}
.article-card:hover .ac-arrow { background:var(--c-purple);color:#fff;transform:translateX(3px); }

/* Pagination */
.blog-pagination { display:flex;justify-content:center;gap:8px;margin-top:clamp(32px,5vw,52px);flex-wrap:wrap; }
.bp-btn {
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:.84rem;font-weight:700;
  border:1.5px solid var(--c-border);background:#fff;color:var(--c-navy);
  cursor:pointer;transition:all .2s;text-decoration:none;
}
.bp-btn:hover,.bp-btn.active { background:var(--grad-main);color:#fff;border-color:transparent;box-shadow:var(--shadow-btn); }
.bp-btn.prev,.bp-btn.next { width:auto;padding:0 16px;gap:6px; }

/* Newsletter inline */
.section-newsletter {
  padding:clamp(52px,7vw,80px) 0;
  background:linear-gradient(145deg,#1a1d3b 0%,#2d1060 60%,#0f3460 100%);
  position:relative;overflow:hidden;text-align:center;
}
.section-newsletter::before {
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
.nl-box { max-width:560px;margin:0 auto;position:relative;z-index:2; }
.nl-box h2 { font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;margin-bottom:10px; }
.nl-box p  { font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.8;margin-bottom:28px; }
.nl-form { display:flex;gap:10px;max-width:460px;margin:0 auto; }
.nl-input {
  flex:1;padding:13px 18px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;
  font-family:var(--font-body);font-size:.9rem;outline:none;
  transition:border-color .2s;
}
.nl-input::placeholder { color:rgba(255,255,255,.4); }
.nl-input:focus { border-color:rgba(130,190,96,.6); }
.nl-btn {
  padding:13px 22px;border-radius:12px;
  background:var(--grad-full);color:#fff;border:none;
  font-family:var(--font-heading);font-size:.84rem;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s;
}
.nl-btn:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(78,43,134,.4); }

/* Couleurs catégories */
.cat-rh      { color:var(--c-purple); } .dot-rh      { background:var(--c-purple); } .badge-rh      { background:var(--c-purple); }
.cat-emploi  { color:var(--c-blue);   } .dot-emploi  { background:var(--c-blue);   } .badge-emploi  { background:var(--c-blue);   }
.cat-form    { color:var(--c-green);  } .dot-form    { background:var(--c-green);  } .badge-form    { background:var(--c-green);  }
.cat-tips    { color:#f59e0b;         } .dot-tips    { background:#f59e0b;         } .badge-tips    { background:#f59e0b;         }
.cat-actu    { color:#ef4444;         } .dot-actu    { background:#ef4444;         } .badge-actu    { background:#ef4444;         }

/* RESPONSIVE */
@media (max-width:1199px) { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:991px) {
  .article-featured { grid-template-columns:1fr; }
  .af-visual { min-height:240px; }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .blog-filters { top:60px; }
}
@media (max-width:767px) {
  .blog-grid { grid-template-columns:1fr; }
  .bf-inner { gap:8px; }
  .bf-tag { padding:6px 14px;font-size:.74rem; }
  .nl-form { flex-direction:column; }
  .nl-btn { width:100%; }
}
@media (max-width:480px) {
  .article-featured .af-content { padding:20px; }
  .ac-body { padding:16px; }
}