/* AfriqueCarrière Blog — Styles partagés */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1C2347;--navy-mid:#252D5C;--orange:#FF7A35;--orange-light:#FFF3EE;
  --ink:#1e293b;--ink-mid:#475569;--ink-soft:#94a3b8;
  --border:#e2e8f0;--bg:#f8fafc;
  --ff-d:'Playfair Display',Georgia,serif;
  --ff:'Plus Jakarta Sans',system-ui,sans-serif;
}
body{font-family:var(--ff);color:var(--ink);line-height:1.7;background:#fff}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Navbar ── */
.blog-nav{
  background:#fff;padding:0 24px;display:flex;align-items:center;
  justify-content:space-between;height:60px;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.08);border-bottom:1px solid var(--border);
}
.blog-nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.blog-nav-logo img{height:36px;width:auto}
.blog-nav-logo span{color:var(--navy);font-family:var(--ff-d);font-size:16px;font-weight:700}
.blog-nav-links{display:flex;gap:20px;align-items:center}
.blog-nav-links a{color:var(--ink-mid);font-size:13px;font-weight:500;text-decoration:none}
.blog-nav-links a:hover{color:var(--navy)}
.blog-nav-cta{
  background:var(--orange);color:#fff!important;padding:7px 16px;
  border-radius:8px;font-weight:700!important;font-size:13px!important;
}

/* ── Hero article ── */
.article-hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  padding:20px 24px 16px;text-align:center;color:#fff;
}
.article-category{
  display:inline-block;background:var(--orange);color:#fff;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase;
}
.article-hero h1{
  font-family:var(--ff-d);font-size:clamp(17px,2.8vw,24px);
  font-weight:700;line-height:1.25;max-width:780px;margin:0 auto 8px;
}
.article-meta{font-size:12px;color:rgba(255,255,255,.65);margin-top:6px}
.article-meta span{margin:0 8px}

/* ── Contenu ── */
.article-wrap{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.article-wrap h2{
  font-family:var(--ff-d);font-size:22px;color:var(--navy);
  margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--orange-light);
}
.article-wrap h3{font-size:17px;color:var(--navy-mid);margin:28px 0 10px;font-weight:700}
.article-wrap p{margin-bottom:16px;font-size:15px;color:var(--ink-mid);line-height:1.8}
.article-wrap ul,.article-wrap ol{margin:12px 0 20px 24px}
.article-wrap li{margin-bottom:8px;font-size:15px;color:var(--ink-mid);line-height:1.7}
.article-wrap strong{color:var(--ink);font-weight:700}

/* ── CTA box ── */
.cta-box{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  border-radius:16px;padding:32px 28px;text-align:center;margin:48px 0 32px;color:#fff;
}
.cta-box h3{font-family:var(--ff-d);font-size:22px;margin-bottom:10px}
.cta-box p{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:20px}
.cta-btn{
  display:inline-block;background:var(--orange);color:#fff;
  padding:12px 28px;border-radius:10px;font-weight:700;font-size:14px;
  text-decoration:none;transition:background .15s;
}
.cta-btn:hover{background:#e86a25;text-decoration:none;color:#fff}

/* ── Tip box ── */
.tip-box{
  background:var(--orange-light);border-left:4px solid var(--orange);
  border-radius:0 10px 10px 0;padding:16px 20px;margin:24px 0;
}
.tip-box p{margin:0;font-size:14px;color:var(--ink)}

/* ── Article cards (blog index) ── */
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;max-width:1100px;margin:0 auto;padding:48px 24px 80px;
}
.blog-card{
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  transition:box-shadow .2s,transform .2s;background:#fff;
}
.blog-card:hover{box-shadow:0 8px 32px rgba(28,35,71,.12);transform:translateY(-3px)}
.blog-card-img{
  height:44px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:linear-gradient(135deg,var(--navy),var(--navy-mid));
}
.blog-card-body{padding:20px}
.blog-card-cat{
  font-size:11px;font-weight:700;color:var(--orange);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:8px;
}
.blog-card h2{font-family:var(--ff-d);font-size:21px;color:var(--navy);margin-bottom:8px;line-height:1.35}
.blog-card p{font-size:13px;color:var(--ink-soft);margin-bottom:14px;line-height:1.6}
.blog-card-link{font-size:13px;font-weight:700;color:var(--orange)}

/* ── Footer ── */
.blog-footer{
  background:var(--navy);color:rgba(255,255,255,.6);text-align:center;
  padding:28px 24px;font-size:13px;
}
.blog-footer a{color:var(--orange)}

/* ── Related ── */
.related{background:var(--bg);padding:40px 24px;border-top:1px solid var(--border)}
.related h3{text-align:center;font-family:var(--ff-d);font-size:20px;color:var(--navy);margin-bottom:28px}
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;max-width:900px;margin:0 auto;
}
.related-card{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:16px 18px;text-decoration:none;transition:border-color .15s;
}
.related-card:hover{border-color:var(--orange);text-decoration:none}
.related-card h4{font-size:14px;color:var(--navy);margin-bottom:6px;line-height:1.4}
.related-card span{font-size:12px;color:var(--orange);font-weight:600}

@media(max-width:640px){
  .blog-nav-links{display:none}
  .article-hero{padding:40px 16px 32px}
}