/* ============================================================
   Hantout.be : Blog (hub + articles)
   Réutilise style.css (nav, footer, boutons, palette, fonts).
   Ajoute uniquement les composants propres au blog.
   Palette : obsidian + or (#c8a44e). Typo : DM Serif Display + Outfit.
   ============================================================ */

/* ── Conteneur générique blog ── */
.blog-shell{max-width:var(--max);margin:0 auto}

/* ── Fil d'Ariane ── */
.breadcrumb{
  padding:7.5rem 3rem 0;max-width:920px;margin:0 auto;
}
.breadcrumb ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-muted);
}
.breadcrumb li{display:flex;align-items:center;gap:0.5rem}
.breadcrumb li:not(:last-child)::after{content:'/';color:var(--border)}
.breadcrumb a{color:var(--text-muted);transition:color 0.3s}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--accent)}
.breadcrumb li[aria-current]{color:var(--accent)}

/* ============================================================
   HUB BLOG
   ============================================================ */
.blog-hero{
  padding:9rem 3rem 3rem;max-width:920px;margin:0 auto;
}
.blog-hero h1{
  font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.8rem);
  line-height:1.12;font-weight:400;margin-bottom:1.5rem;
}
.blog-hero p{
  color:var(--text-muted);font-size:1.1rem;line-height:1.8;max-width:680px;
}
.blog-grid{
  max-width:1200px;margin:0 auto;padding:1rem 3rem 6rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;
}
.blog-card{
  background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform 0.4s,border-color 0.4s;
}
.blog-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.blog-card a{display:flex;flex-direction:column;height:100%}
.blog-card-img{
  aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);
}
.blog-card-img img{
  width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;
}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-body{padding:1.5rem 1.6rem 1.75rem;display:flex;flex-direction:column;flex:1}
.blog-card-meta{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent);
  display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:0.9rem;
}
.blog-card-meta span{color:var(--text-muted)}
.blog-card h2{
  font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.25;
  margin-bottom:0.7rem;color:var(--text);transition:color 0.3s;
}
.blog-card:hover h2{color:var(--accent-light)}
.blog-card-excerpt{
  font-size:0.9rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.25rem;
}
.blog-card-link{
  margin-top:auto;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:0.5rem;
}
.blog-card-link svg{width:14px;height:14px;transition:transform 0.4s}
.blog-card:hover .blog-card-link svg{transform:translateX(4px)}

/* ============================================================
   ARTICLE
   ============================================================ */
.article{max-width:820px;margin:0 auto;padding:2rem 3rem 0}
.article-header{margin-bottom:2.5rem}
.article-kicker{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;
  display:flex;align-items:center;gap:1rem;
}
.article-kicker::before{content:'';width:24px;height:1px;background:var(--accent)}
.article h1{
  font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.4rem);
  line-height:1.12;font-weight:400;margin-bottom:1.5rem;
}
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.05em;
  color:var(--text-muted);
}
.byline .byline-author{color:var(--text)}
.byline span{display:inline-flex;align-items:center;gap:0.5rem}
.byline span:not(:last-child)::after{content:'·';color:var(--border);margin-left:0.75rem}

.article-featured{
  margin:0 auto 3rem;border:1px solid var(--border);overflow:hidden;
}
.article-featured img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.article-featured figcaption{
  font-size:0.78rem;color:var(--text-muted);padding:0.75rem 1rem;
  background:var(--surface);border-top:1px solid var(--border);font-style:italic;
}

/* ── Corps de l'article (prose) ── */
.article-body{font-size:1.05rem;line-height:1.85;color:var(--text)}
.article-body > p{margin-bottom:1.5rem;color:#cfccc4}
.article-body h2{
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;
  line-height:1.2;margin:3rem 0 1.25rem;scroll-margin-top:6rem;
}
.article-body h3{
  font-family:var(--sans);font-size:1.2rem;font-weight:600;
  color:var(--accent);margin:2rem 0 0.85rem;scroll-margin-top:6rem;
}
.article-body a{
  color:var(--accent);border-bottom:1px dotted var(--accent);
  transition:color 0.3s;
}
.article-body a:hover,.article-body a:focus-visible{color:var(--accent-light)}
.article-body ul,.article-body ol{margin:0 0 1.5rem 1.4rem;color:#cfccc4}
.article-body li{margin-bottom:0.6rem;line-height:1.75}
.article-body strong{color:var(--text);font-weight:600}
.article-body img{margin:2.5rem auto;border:1px solid var(--border)}
.article-body figure{margin:2.5rem 0}
.article-body figure img{margin:0;width:100%;aspect-ratio:16/9;object-fit:cover}
.article-body figcaption{
  font-size:0.78rem;color:var(--text-muted);padding:0.7rem 0;font-style:italic;
}
.article-body blockquote{
  border-left:2px solid var(--accent);margin:2rem 0;padding:0.75rem 1.5rem;
  background:var(--surface);color:var(--text-muted);font-style:italic;
}
.article-body blockquote p{margin-bottom:0}

/* Encadré clé / résumé */
.article-key{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);
  padding:1.5rem 1.75rem;margin:2.5rem 0;
}
.article-key h3{margin-top:0;color:var(--accent)}
.article-key p:last-child,.article-key ul:last-child{margin-bottom:0}

/* ── FAQ article (prose, pas de details) ── */
.article-faq{
  max-width:820px;margin:3.5rem auto 0;padding:2.5rem 3rem 0;
  border-top:1px solid var(--border);
}
.article-faq > h2{
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;
  margin-bottom:1.5rem;
}
.article-faq h3{
  font-family:var(--sans);font-size:1.15rem;font-weight:600;color:var(--accent);
  margin:1.75rem 0 0.6rem;
}
.article-faq p{color:#cfccc4;line-height:1.8;margin-bottom:1rem;font-size:1rem}

/* ── Bloc CTA final ── */
.article-cta{
  max-width:820px;margin:4rem auto 0;padding:0 3rem;
}
.article-cta-inner{
  background:
    radial-gradient(600px circle at 80% 0%,rgba(200,164,78,0.10),transparent 60%),
    var(--surface);
  border:1px solid var(--border);
  padding:2.75rem 2.5rem;
}
.article-cta-inner h2{
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:400;
  line-height:1.18;margin-bottom:1rem;
}
.article-cta-inner h2 em{font-style:italic;color:var(--accent)}
.article-cta-inner p{color:var(--text-muted);line-height:1.8;margin-bottom:1.75rem;max-width:560px}
.article-cta-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.article-cta-actions .btn-primary svg{width:16px;height:16px}
.cta-wa{
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:1rem 1.75rem;border:1px solid var(--border);color:var(--text);
  font-size:0.85rem;font-weight:500;letter-spacing:0.06em;transition:all 0.3s;
}
.cta-wa svg{width:18px;height:18px;color:#25D366}
.cta-wa:hover,.cta-wa:focus-visible{border-color:var(--accent);color:var(--accent)}
.article-cta-note{
  margin-top:1.5rem;font-size:0.88rem;color:var(--text-muted);line-height:1.7;
}
.article-cta-note strong{color:var(--accent);font-weight:600}

/* ── Articles liés ── */
.article-related{
  max-width:1100px;margin:5rem auto 0;padding:3rem 3rem 0;
  border-top:1px solid var(--border);
}
.article-related h2{
  font-family:var(--serif);font-size:1.8rem;font-weight:400;margin-bottom:2rem;text-align:center;
}
.article-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* ── Espace avant footer ── */
.blog-tail{height:5rem}

/* ── Responsive ── */
@media(max-width:1024px){
  .blog-grid,.article-related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .breadcrumb{padding:6.5rem 1.25rem 0}
  .blog-hero{padding:7.5rem 1.25rem 2rem}
  .blog-grid{grid-template-columns:1fr;padding:1rem 1.25rem 4rem}
  .article,.article-faq,.article-cta{padding-left:1.25rem;padding-right:1.25rem}
  .article-cta-inner{padding:2rem 1.5rem}
  .article-related{padding:2.5rem 1.25rem 0}
  .article-related-grid{grid-template-columns:1fr}
}