/* ================================================================
   ComparAbo — blog-article.css
   À importer uniquement sur blog/[slug].astro
   Dépend de global.css
================================================================ */

/* ── LAYOUT ─────────────────────────────────────────────────── */
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;max-width:1100px;margin:0 auto;padding:48px 48px;}
.article-col{}
.sidebar-col{}

/* ── ARTICLE HEADER ─────────────────────────────────────────── */
.article-header{margin-bottom:36px;}
.article-cat{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange3);margin-bottom:14px;}
.article-cat-dot{width:5px;height:5px;border-radius:50%;background:var(--orange2);}
/* Titre harmonisé → version desktop (plus long, meilleur SEO) */
.article-title{font-family:'Syne',sans-serif;font-size:36px;font-weight:900;letter-spacing:-1px;line-height:1.1;color:var(--txt);margin-bottom:14px;}
.article-intro{font-size:16px;color:var(--txt2);line-height:1.75;margin-bottom:20px;border-left:3px solid var(--orange2);padding-left:16px;}
.article-meta{display:flex;align-items:center;gap:20px;padding:14px 0;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);margin-bottom:32px;}
.article-meta-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt3);}
.article-meta-item strong{color:var(--txt2);font-weight:600;}
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.article-tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;background:var(--bg3);border:1px solid var(--bord);color:var(--txt3);text-decoration:none;transition:all 0.15s;}
.article-tag:hover{border-color:var(--orange2);color:var(--orange3);}

/* ── ARTICLE BODY ───────────────────────────────────────────── */
.article-body{font-size:15px;color:var(--txt2);line-height:1.85;}
.article-body h2{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:-0.3px;color:var(--txt);margin:36px 0 14px;padding-top:8px;}
.article-body h3{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;color:var(--txt);margin:24px 0 10px;}
.article-body p{margin-bottom:16px;}
.article-body strong{color:var(--txt);font-weight:600;}
.article-body a{color:var(--orange2);text-decoration:none;}
.article-body a:hover{text-decoration:underline;}
.article-body ul{margin:12px 0 18px 0;padding:0;list-style:none;}
.article-body ul li{padding:6px 0 6px 20px;position:relative;color:var(--txt2);font-size:14px;}
.article-body ul li::before{content:'›';position:absolute;left:0;color:var(--orange3);font-weight:700;font-size:16px;}
.article-body ol{margin:12px 0 18px 0;padding-left:20px;}
.article-body ol li{padding:4px 0;color:var(--txt2);font-size:14px;}

/* ── CALLOUT BOXES ──────────────────────────────────────────── */
.callout{border-radius:10px;padding:16px 20px;margin:20px 0;display:flex;gap:12px;}
.callout-green{background:rgba(16,185,129,0.07);border:1px solid rgba(16,185,129,0.2);}
.callout-orange{background:var(--orange-dim);border:1px solid rgba(249,115,22,0.25);}
.callout-amber{background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.2);}
.callout-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.callout-body{font-size:13px;line-height:1.65;}
.callout-body strong{display:block;margin-bottom:4px;font-size:12px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;}
.callout-green .callout-body strong{color:var(--vert);}
.callout-orange .callout-body strong{color:var(--orange3);}
.callout-amber .callout-body strong{color:var(--amber);}

/* ── COMPARE INLINE ─────────────────────────────────────────── */
.inline-compare{background:var(--card);border:1px solid var(--bord2);border-radius:12px;padding:20px;margin:24px 0;}
.inline-compare-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:800;color:var(--txt);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.ic-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px;background:var(--bg3);margin-bottom:8px;border:1px solid var(--bord);}
.ic-row:last-child{margin-bottom:0;}
.ic-row.ic-best{background:var(--orange-dim);border-color:var(--orange2);}
.ic-name{font-weight:700;font-size:13px;color:var(--txt);}
.ic-price{font-family:'Syne',sans-serif;font-weight:900;font-size:16px;color:var(--orange2);}
.ic-eco{font-size:11px;font-weight:700;color:var(--vert);}
.ic-cta{padding:5px 12px;font-size:11px;font-weight:700;background:var(--orange2);color:#fff;border-radius:5px;text-decoration:none;font-family:'Manrope',sans-serif;white-space:nowrap;}

/* ── TOC ────────────────────────────────────────────────────── */
.article-toc{background:var(--card);border:1px solid var(--bord);border-radius:12px;padding:20px;margin-bottom:24px;}
.toc-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;color:var(--txt);margin-bottom:14px;}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:6px;}
.toc-list li a{font-size:12px;color:var(--txt3);text-decoration:none;transition:color 0.15s;display:block;padding:3px 0;}
.toc-list li a:hover{color:var(--orange2);}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar-sticky{position:sticky;top:80px;display:flex;flex-direction:column;gap:16px;}
.sidebar-card{background:var(--card);border:1px solid var(--bord);border-radius:12px;padding:20px;}
.sidebar-card-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--txt3);margin-bottom:16px;}
.sidebar-cta{display:block;padding:12px;text-align:center;background:var(--orange);color:#fff;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;border-radius:8px;text-decoration:none;margin-bottom:10px;transition:background 0.15s;}
.sidebar-cta:hover{background:#c2410c;}
.sidebar-cta-sub{font-size:11px;color:var(--txt3);text-align:center;line-height:1.5;}
.related-articles{display:flex;flex-direction:column;gap:12px;}
.related-art{display:flex;gap:12px;text-decoration:none;transition:all 0.15s;}
.related-art:hover .related-art-title{color:var(--orange2);}
.related-art-img{width:56px;height:40px;border-radius:6px;background:linear-gradient(135deg,var(--bg3),var(--card2));flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;}
.related-art-title{font-size:12px;font-weight:600;color:var(--txt2);line-height:1.4;transition:color 0.15s;}
.related-art-date{font-size:10px;color:var(--txt3);margin-top:3px;}
.platform-mini{display:flex;flex-direction:column;gap:8px;}
.pm-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:7px;background:var(--bg3);border:1px solid var(--bord);}
.pm-name{font-size:12px;font-weight:700;color:var(--txt);}
.pm-price{font-size:13px;font-weight:900;font-family:'Syne',sans-serif;color:var(--orange2);}
.pm-cta{font-size:10px;color:var(--orange3);text-decoration:none;font-weight:700;}

/* ================================================================
   MEDIA QUERIES — overrides mobile (< 900px)
================================================================ */
@media (max-width:900px) {
  .blog-layout{
    grid-template-columns:1fr!important;
    gap:24px!important;
    padding:24px 16px!important;
  }
  /* Sidebar passe sous l'article sur mobile */
  .sidebar-sticky{position:static;}
  .article-title{font-size:26px;}
  .article-intro{font-size:14px;}
}

/* ── BLOG INDEX ─────────────────────────────────────────────── */
.blog-index-hero{padding:32px 48px 28px;background:var(--bg);border-bottom:1px solid var(--bord);}
.blog-index-hero h1{font-family:'Syne',sans-serif;font-size:32px;font-weight:900;letter-spacing:-1px;color:var(--txt);margin-bottom:8px;}
.blog-index-hero p{font-size:14px;color:var(--txt2);}
.blog-index-grid{padding:28px 48px;}
.blog-empty{text-align:center;padding:48px;color:var(--txt3);font-size:14px;}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.article-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bord);border-radius:12px;padding:20px;text-decoration:none;transition:border-color 0.15s;}
.article-card:hover{border-color:var(--bord2);}
.article-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.article-category{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--orange3);background:var(--orange-dim);padding:3px 8px;border-radius:4px;}
.article-date{font-size:11px;color:var(--txt3);}
.article-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;color:var(--txt);margin-bottom:8px;line-height:1.3;}
.article-desc{font-size:13px;color:var(--txt2);line-height:1.6;flex:1;}
.article-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.tag{font-size:11px;color:var(--txt3);background:var(--bg3);padding:3px 8px;border-radius:4px;}
@media(max-width:900px){
  .blog-index-hero{padding:20px 16px;}
  .blog-index-grid{padding:16px;}
  .articles-grid{grid-template-columns:1fr;}
}

/* ── BLOG ARTICLE LAYOUT ────────────────────────────────────── */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;padding:32px 48px;max-width:1200px;margin:0 auto;}
.article-main{min-width:0;}
.article-sidebar{position:sticky;top:80px;align-self:start;}
.sidebar-cta-btn{display:block;width:100%;padding:11px;background:var(--orange);color:#fff;font-family:'Syne',sans-serif;font-size:13px;font-weight:800;border:none;border-radius:8px;cursor:pointer;text-align:center;text-decoration:none;margin-top:12px;transition:background 0.15s;}
.sidebar-cta-btn:hover{background:#c2410c;}
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr;padding:16px;}
  .article-sidebar{position:static;}
}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb{padding:12px 48px;border-bottom:1px solid var(--bord);background:var(--bg2);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt3);}
.breadcrumb a{color:var(--txt3);text-decoration:none;transition:color 0.15s;}
.breadcrumb a:hover{color:var(--orange2);}
.breadcrumb-sep{color:var(--txt3);}