/* ==========================================================================
   ARTICLE — mise en page de tout Article WordPress publié (voir
   templates/article-single.php + includes/articles.php). Un seul gabarit
   pour tous les articles : le contenu lui-même (the_content()) vient de
   l'éditeur WordPress natif.
   ========================================================================== */

/* 1. HERO — même traitement plein-bleu que les autres pages (pas de fil
   d'Ariane, couverture derrière le header flottant). */
.article-hero{background:var(--blue-800);padding-top:150px;padding-bottom:70px}
.article-hero-inner{max-width:720px;margin:0 auto;text-align:center}
.article-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;margin-bottom:18px;text-decoration:none;transition:color .15s}
.article-back:hover{color:#fff}
.article-date{display:block;color:rgba(255,255,255,.7);font-family:'Inter',sans-serif;font-size:.85rem;margin-top:12px}

/* 2. CORPS DE L'ARTICLE */
.article-wrap{max-width:760px;margin:0 auto}
.article-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:36px;aspect-ratio:16/9}
.article-photo img{width:100%;height:100%;object-fit:cover}
.article-body p{color:var(--muted);font-size:1.08rem;line-height:1.75;margin-bottom:22px}
.article-body h2{font-size:1.5rem;margin:36px 0 14px;color:var(--blue-900)}
.article-body h3{font-size:1.2rem;margin:28px 0 12px;color:var(--blue-900)}
.article-body a:not(.btn){color:var(--blue-800);font-weight:600}
.article-body ul,.article-body ol{color:var(--muted);font-size:1.08rem;line-height:1.75;margin:0 0 22px;padding-left:22px}
.article-body img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:8px 0 22px}
.article-body figure{margin:0 0 22px}
.article-body figcaption{color:var(--muted);font-size:.85rem;margin-top:8px;text-align:center}
.article-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}

@media(max-width:640px){
  .article-hero{padding-top:120px;padding-bottom:50px}
  .article-photo{aspect-ratio:4/3}
  .article-body p{font-size:1rem}
  .article-cta .btn{flex:1}
}