/* ═══════════════════════════════════════════
   BLOG ARTICLE STYLES
   ═══════════════════════════════════════════ */

/* ─── BREADCRUMB ─── */
.breadcrumb{padding:100px 20px 0;max-width:760px;margin:0 auto}
.breadcrumb-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none;font-size:12px;color:var(--text-faint)}
.breadcrumb-list a{color:var(--text-light);transition:color .25s}
.breadcrumb-list a:hover{color:var(--gold)}
.breadcrumb-sep{color:var(--border);font-size:10px}
.breadcrumb-current{color:var(--text-muted)}

/* ─── ARTICLE HEADER ─── */
.article-header{max-width:760px;margin:0 auto;padding:32px 20px 0;text-align:left}
.article-cat{display:inline-block;background:var(--gold-dark);color:#fff8ee;padding:7px 16px;border-radius:6px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;box-shadow:0 2px 8px rgba(160,120,64,.25);border:none}
.article-title{font-family:'Lora',Georgia,serif;font-size:clamp(26px,4vw,38px);font-weight:450;color:var(--text-dark);line-height:1.22;margin-bottom:16px}
.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-light);margin-bottom:32px}
.article-meta-item{display:inline-flex;align-items:center;gap:5px}
.article-meta-sep{width:3px;height:3px;border-radius:50%;background:var(--border)}

/* ─── RÉSUMÉ / POINTS CLÉS ─── */
.article-summary{max-width:760px;margin:0 auto;padding:0 20px}
.summary-box{background:var(--bg-warm);border:1px solid var(--gold-border);border-radius:var(--radius);padding:24px 28px;margin-bottom:40px;position:relative}
.summary-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px 2px 0 0}
.summary-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.summary-list{list-style:none;padding:0}
.summary-list li{position:relative;padding-left:18px;font-size:14px;color:var(--text-body);line-height:1.7;margin-bottom:6px}
.summary-list li:last-child{margin-bottom:0}
.summary-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.5}

/* ─── SOMMAIRE / TABLE DES MATIÈRES ─── */
.article-toc{max-width:760px;margin:0 auto;padding:0 20px}
.toc-box{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius);padding:24px 28px;margin-bottom:40px;box-shadow:var(--shadow-sm)}
.toc-title{font-family:'Lora',Georgia,serif;font-size:16px;font-weight:450;color:var(--text-dark);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.toc-list{list-style:none;padding:0;counter-reset:toc}
.toc-list li{counter-increment:toc}
.toc-list li a{display:flex;align-items:baseline;gap:10px;padding:8px 0;font-size:14px;color:var(--text-muted);line-height:1.5;border-bottom:1px solid var(--border);transition:color .25s,padding-left .25s}
.toc-list li:last-child a{border-bottom:none}
.toc-list li a:hover{color:var(--gold);padding-left:6px}
.toc-list li a::before{content:counter(toc,decimal-leading-zero);font-family:'Lora',Georgia,serif;font-size:12px;color:var(--gold);opacity:.6;min-width:20px}

/* ─── ARTICLE BODY ─── */
.article-body{max-width:760px;margin:0 auto;padding:0 20px}

.article-body h2{font-family:'Lora',Georgia,serif;font-size:clamp(20px,3vw,26px);font-weight:450;color:var(--text-dark);line-height:1.3;margin:48px 0 20px;padding-top:16px;scroll-margin-top:80px}
.article-body h2:first-child{margin-top:0}

.article-body h3{font-family:'Lora',Georgia,serif;font-size:clamp(17px,2.5vw,20px);font-weight:450;color:var(--text-dark);line-height:1.35;margin:32px 0 14px;scroll-margin-top:80px}

.article-body p{font-size:15px;color:var(--text-body);line-height:1.8;margin-bottom:20px}

.article-body ul,.article-body ol{margin:0 0 20px 0;padding-left:24px}
.article-body li{font-size:15px;color:var(--text-body);line-height:1.8;margin-bottom:8px}

.article-body strong{color:var(--text-dark);font-weight:600}
.article-body em{font-style:italic}

.article-body a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(201,169,110,.3);text-underline-offset:3px;transition:text-decoration-color .25s}
.article-body a:hover{text-decoration-color:var(--gold)}

/* Callout — déplacé dans global.css (réutilisable site-wide) */

/* ─── TABLES ─── */
.article-table-wrap{overflow-x:auto;margin:24px 0;border-radius:var(--radius-sm);border:1px solid var(--border-card)}
.article-table{width:100%;border-collapse:collapse;font-size:14px}
.article-table thead{background:var(--bg-warm)}
.article-table th{font-family:'Lora',Georgia,serif;font-size:13px;font-weight:500;color:var(--text-dark);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border)}
.article-table td{padding:11px 16px;color:var(--text-body);border-bottom:1px solid var(--border)}
.article-table tr:last-child td{border-bottom:none}
.article-table tr:hover td{background:rgba(201,169,110,.03)}
.article-table .val-gold{color:var(--gold);font-weight:600}
.article-table .val-red{color:var(--danger);font-weight:600}

/* ─── MID-ARTICLE CTA ─── */
.article-cta{background:var(--bg-warm);border:1px solid var(--gold-border);border-radius:var(--radius);padding:32px 28px;margin:40px 0;text-align:center;position:relative;overflow:hidden}
.article-cta::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:400px;height:200px;background:radial-gradient(ellipse,rgba(201,169,110,.08) 0%,transparent 70%);pointer-events:none}
.article-cta-title{font-family:'Lora',Georgia,serif;font-size:18px;font-weight:450;color:var(--text-dark);margin-bottom:10px;position:relative}
.article-cta p{font-size:14px;color:var(--text-muted);margin-bottom:20px;position:relative}
.article-cta .btn-primary{position:relative;background:var(--gold-dark);color:#fff8ee;font-size:14px;padding:14px 28px;box-shadow:0 4px 14px rgba(160,120,64,.3)}
.article-cta .btn-primary:hover{filter:brightness(1.08);background:#8a6534}

/* ─── RELATED ARTICLES ─── */
.related-section{max-width:760px;margin:0 auto;padding:48px 20px 0}
.related-title{font-family:'Lora',Georgia,serif;font-size:20px;font-weight:450;color:var(--text-dark);margin-bottom:24px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-sm);padding:20px 18px;transition:all var(--transition);display:flex;flex-direction:column}
.related-card:hover{border-color:var(--gold-border-hover);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.related-card-cat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px}
.related-card-title{font-family:'Lora',Georgia,serif;font-size:15px;font-weight:450;color:var(--text-dark);line-height:1.35;margin-bottom:8px;flex:1}
.related-card-link{font-size:12px;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:4px;transition:gap .25s}
.related-card:hover .related-card-link{gap:8px}

/* ─── FAQ SCHEMA SECTION ─── */
.article-faq{max-width:760px;margin:0 auto;padding:48px 20px 0}
.article-faq .faq-list{margin-top:20px;max-width:100%}

/* ─── ARTICLE FOOTER NAV ─── */
.article-nav{max-width:760px;margin:0 auto;padding:40px 20px;display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--border)}
.article-nav-link{display:flex;flex-direction:column;gap:4px;max-width:45%;transition:color .25s}
.article-nav-link:hover{color:var(--gold)}
.article-nav-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.article-nav-title{font-family:'Lora',Georgia,serif;font-size:14px;font-weight:450;color:var(--text-dark);line-height:1.35}
.article-nav-link:hover .article-nav-title{color:var(--gold)}
.article-nav-link.next{text-align:right;margin-left:auto}

/* ─── BLOG LISTING (category pages with articles) ─── */
.blog-articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:40px}
.blog-article-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);transition:all var(--transition);display:flex;flex-direction:column}
.blog-article-card:hover{border-color:var(--gold-border-hover);transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.blog-article-card-cat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
.blog-article-card-title{font-family:'Lora',Georgia,serif;font-size:18px;font-weight:450;color:var(--text-dark);line-height:1.35;margin-bottom:10px}
.blog-article-card-excerpt{font-size:13px;color:var(--text-muted);line-height:1.65;margin-bottom:16px;flex:1}
.blog-article-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-faint)}
.blog-article-card-link{font-size:13px;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.blog-article-card:hover .blog-article-card-link{gap:10px}

/* ─── RESPONSIVE ─── */
@media(max-width:700px){
  .breadcrumb{padding:90px 16px 0}
  .article-header{padding:24px 16px 0}
  .article-summary,.article-toc,.article-body,.related-section,.article-faq,.article-nav{padding-left:16px;padding-right:16px}
  .summary-box,.toc-box{padding:20px}
  .callout{padding:16px 18px}
  .related-grid{grid-template-columns:1fr}
  .article-cta{padding:24px 20px}
  .article-nav{flex-direction:column}
  .article-nav-link,.article-nav-link.next{max-width:100%;text-align:left}
  .blog-articles-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
}