/* =====================================================================
   GUIDE MAISON BOIS — Gabarit de page pilier / article
   Layout 2 colonnes · prose longue · tableaux · encarts · TOC sticky
   ===================================================================== */

/* ---------- En-tête d'article ---------- */
.article-head{padding-block:var(--sp-6) var(--sp-5);background:var(--forest-050)}
.article-head .breadcrumb{margin-bottom:var(--sp-5)}
.article-head h1{max-width:20ch;margin-block:var(--sp-3) var(--sp-4)}
.article-head .lead{max-width:60ch}
.article-visual{width:100%;max-width:var(--container);margin:0 auto;padding:var(--sp-5);background:var(--forest-050)}
.article-visual img{display:block;width:100%;height:clamp(240px,32vw,440px);object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
@media(max-width:600px){.article-visual{padding:var(--sp-4)}.article-visual img{height:240px;border-radius:var(--r-md)}}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--ink-500)}
.article-meta .avatar{width:38px;height:38px;font-size:var(--fs-xs)}
.article-meta__author{display:flex;align-items:center;gap:.6rem}
.article-meta__author b{color:var(--ink-900)}
.article-meta time{white-space:nowrap}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-300)}

/* ---------- Encart chiffres clés ---------- */
.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);margin-top:var(--sp-6)}
.keyfacts .stat__num{font-size:var(--fs-xl)}
@media(max-width:600px){.keyfacts{grid-template-columns:1fr;gap:var(--sp-3)}}

/* ---------- Layout 2 colonnes ---------- */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-8);
  align-items:start;padding-block:var(--sp-7)}
@media(max-width:960px){.article-layout{grid-template-columns:1fr}}

/* ---------- Sidebar ---------- */
.sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--sp-5)}
@media(max-width:960px){.sidebar{position:static;order:-1}}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5)}
.toc h2{font-size:var(--fs-sm);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);margin-bottom:var(--sp-4)}
.toc ol{counter-reset:toc}
.toc li{margin-bottom:.5rem}
.toc a{display:block;font-size:var(--fs-sm);color:var(--ink-700);padding:.35rem .5rem;border-radius:var(--r-sm);border-left:2px solid transparent;transition:.2s}
.toc a:hover{background:var(--forest-050);color:var(--forest-700)}
.toc a.is-active{background:var(--forest-050);border-left-color:var(--forest-700);color:var(--forest-700);font-weight:600}
.sidebar-cta{background:linear-gradient(135deg,var(--forest-800),var(--forest-900));color:#fff;border-radius:var(--r-md);padding:var(--sp-5)}
.sidebar-cta h3{color:#fff;font-size:var(--fs-md);margin-bottom:.5rem}
.sidebar-cta p{font-size:var(--fs-sm);color:var(--forest-100);margin-bottom:var(--sp-4)}

/* ---------- PROSE (contenu long) ---------- */
.prose{max-width:75ch}
.prose > h2{font-size:var(--fs-xl);margin-top:var(--sp-8);margin-bottom:var(--sp-4);scroll-margin-top:96px;padding-top:var(--sp-2)}
.prose > h2:first-child{margin-top:0}
.prose > h3{font-size:var(--fs-lg);margin-top:var(--sp-6);margin-bottom:var(--sp-3);scroll-margin-top:96px}
.prose p{margin-bottom:var(--sp-4);color:var(--ink-700)}
.prose strong{color:var(--ink-900)}
.prose a{font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--forest-100)}
.prose a:hover{text-decoration-color:var(--forest-600)}
.prose ul.bullets{margin:0 0 var(--sp-4) 0;padding-left:0}
.prose ul.bullets li{position:relative;padding-left:1.75rem;margin-bottom:.6rem;color:var(--ink-700)}
.prose ul.bullets li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--wood-500);transform:rotate(45deg)}

/* ---------- Tableaux dans la prose ---------- */
.table-wrap{overflow-x:auto;margin:var(--sp-5) 0;border:1px solid var(--line);border-radius:var(--r-md)}
.prose table{width:100%;border-collapse:collapse;background:#fff;min-width:480px}
.prose caption{caption-side:top;text-align:left;font-size:var(--fs-sm);color:var(--ink-500);padding:.75rem var(--sp-4)}
.prose th,.prose td{padding:.85rem var(--sp-4);text-align:left;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.prose thead th{background:var(--forest-700);color:#fff;font-family:var(--font-sans);font-weight:600;white-space:nowrap}
.prose tbody tr:nth-child(even){background:var(--forest-050)}
.prose tbody th{font-weight:600;color:var(--ink-900)}
.prose tfoot td{font-weight:600;background:var(--wood-100)}

/* ---------- Encarts (callouts) ---------- */
.callout{border-radius:var(--r-md);padding:var(--sp-5);margin:var(--sp-5) 0;border:1px solid var(--line);display:flex;gap:var(--sp-4)}
.callout__icon{flex-shrink:0;width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center}
.callout__icon svg{width:22px;height:22px}
.callout h4{font-size:var(--fs-base);margin-bottom:.35rem}
.callout p{margin-bottom:0;font-size:var(--fs-sm)}
.callout--expert{background:var(--forest-050);border-color:var(--forest-100)}
.callout--expert .callout__icon{background:var(--forest-700);color:#fff}
.callout--warn{background:#FDF3E7;border-color:#F0DBBE}
.callout--warn .callout__icon{background:var(--sun);color:#fff}
.callout--info{background:#fff;border-color:var(--line)}
.callout--info .callout__icon{background:var(--wood-100);color:var(--wood-700)}

/* ---------- Checklist ---------- */
.checklist{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6);margin:var(--sp-5) 0}
.checklist h3{margin-top:0;margin-bottom:var(--sp-4)}
.checklist li{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.75rem;font-size:var(--fs-sm);color:var(--ink-700)}
.checklist li svg{flex-shrink:0;width:22px;height:22px;color:var(--forest-600);margin-top:1px}

/* ---------- Bloc maillage "pour aller plus loin" ---------- */
.related{background:var(--forest-050);border-radius:var(--r-md);padding:var(--sp-6);margin-top:var(--sp-7)}
.related h3{margin-top:0;margin-bottom:var(--sp-4)}
.related__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(max-width:600px){.related__grid{grid-template-columns:1fr}}
.related__link{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem;font-size:var(--fs-sm);font-weight:500;color:var(--ink-900);transition:.2s}
.related__link:hover{border-color:var(--forest-500);color:var(--forest-700);transform:translateX(3px)}
.related__link svg{width:16px;height:16px;color:var(--forest-600)}

/* ---------- Author box ---------- */
.author-box{display:flex;gap:var(--sp-5);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6);margin-top:var(--sp-7)}
.author-box .avatar{width:64px;height:64px;font-size:var(--fs-lg);flex-shrink:0}
.author-box h3{font-size:var(--fs-base);margin-bottom:.2rem}
.author-box .role{font-size:var(--fs-xs);color:var(--wood-600);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.author-box p{font-size:var(--fs-sm);color:var(--ink-700);margin-top:.5rem;margin-bottom:0}

/* ---------- FAQ dans article (réutilise .accordion) ---------- */
.article-faq{margin-top:var(--sp-7)}

/* Barre CTA mobile flottante */
.mobile-cta{position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;
  background:#fff;border-top:1px solid var(--line);padding:.75rem var(--sp-4);
  box-shadow:0 -4px 20px rgba(0,0,0,.08)}
@media(max-width:960px){.mobile-cta{display:block}}