/* ===========================================================================
   blog.css — styles PROPRES au contenu du blog BizzCab.
   Le header et le footer ne sont PAS stylés ici : ils sont rendus depuis la
   source unique landing/chrome.jsx (SiteNav / SiteFooter) et habillés par
   landing-styles.min.css — exactement comme le reste du site.
   Ici : fond de page, héros blog, grille d'articles, mise en page article,
   blocs riches (cartes, encadrés, FAQ, CTA), sommaire hamburger.
   =========================================================================== */
:root{--bc-night:#05070D;--bc-night-2:#0B1120;--bc-border:#243049;--bc-muted:#94A3B8;--bc-text:#D7E2EA;--bc-blue:#2563EB;--bc-blue-bright:#1158FE;--bc-card:rgba(15,23,42,.72)}
html{scroll-behavior:smooth}
body.bc-blog-page{margin:0;background:var(--bc-night);color:#fff;font-family:Poppins,system-ui,-apple-system,sans-serif;overflow-x:clip}
.bc-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 520px at 50% -10%,rgba(37,99,235,.25),transparent 65%),radial-gradient(600px 420px at 8% 25%,rgba(17,88,254,.13),transparent 65%),linear-gradient(180deg,#05070D 0%,#07101f 48%,#05070D 100%)}
.bc-container{width:min(1280px,100%);margin:0 auto;padding:0 24px}

/* ---- Héros (index blog + article) ---- */
.bc-blog-hero,.bc-article-hero{text-align:center;padding:clamp(40px,6vw,60px) 0 42px}
.bc-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#7dabff;text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:800;margin-bottom:18px}
.bc-blog-hero h1,.bc-article-hero h1{max-width:920px;margin:0 auto;font-size:clamp(34px,6.3vw,72px);line-height:.96;letter-spacing:-.05em;text-transform:uppercase;background:linear-gradient(180deg,#fff,#e5edf7 42%,#7da8fa 72%,#1158fe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.bc-article-hero h1{font-size:clamp(30px,4.6vw,56px);max-width:980px;text-transform:none;letter-spacing:-.03em;line-height:1.06}
.bc-lead{max-width:760px;margin:22px auto 0;color:rgba(215,226,234,.72);font-size:clamp(16px,1.45vw,20px);line-height:1.68}
.bc-crumb{margin:0 0 20px;color:rgba(215,226,234,.55);font-size:13px}
.bc-crumb a{color:inherit}
.bc-meta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:20px;color:rgba(215,226,234,.6);font-size:13px}
.bc-meta span,.bc-post-tag{display:inline-flex;border:1px solid rgba(37,99,235,.3);background:rgba(37,99,235,.12);color:#a9c8ff;border-radius:999px;padding:5px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}

/* ---- Grille d'articles (index) ---- */
.bc-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-bottom:84px}
.bc-post-card{display:flex;flex-direction:column;min-height:280px;border:1px solid rgba(36,48,73,.9);border-radius:26px;background:linear-gradient(160deg,rgba(15,23,42,.82),rgba(15,23,42,.38));box-shadow:0 22px 80px rgba(0,0,0,.22);padding:26px;color:#fff;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.bc-post-card:hover{transform:translateY(-4px);border-color:rgba(17,88,254,.55);box-shadow:0 28px 90px rgba(17,88,254,.12)}
.bc-post-card h2{font-size:23px;line-height:1.14;margin:18px 0 12px;letter-spacing:-.03em}
.bc-post-card p{color:rgba(215,226,234,.67);line-height:1.62;margin:0 0 18px}
.bc-post-card time{color:rgba(215,226,234,.5);font-size:13px;margin-top:auto}
.bc-post-card strong{margin-top:18px;color:#82b1ff;font-weight:700}

/* ---- Mise en page article ---- */
.bc-article-layout{width:min(890px,100%);margin:0 auto;padding:0 24px 70px}
.bc-article-card{border:1px solid rgba(36,48,73,.9);border-radius:28px;background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(15,23,42,.42));box-shadow:0 28px 90px rgba(0,0,0,.28);padding:clamp(24px,4vw,54px)}

/* ---- Typographie du corps d'article ---- */
.article-body{font-size:18px;color:#d7e2ea;font-weight:400}
.article-body>*{margin:0 0 22px}
.article-body h2{font-size:clamp(25px,3vw,36px);line-height:1.14;letter-spacing:-.035em;margin-top:54px;padding-bottom:12px;border-bottom:1px solid var(--bc-border);scroll-margin-top:24px}
.article-body h3{font-size:clamp(20px,2vw,25px);margin-top:34px;scroll-margin-top:24px}
.article-body p{line-height:1.82;color:rgba(215,226,234,.82)}
.article-body strong{color:#fff}
.article-body a{color:#8ab7ff;text-underline-offset:4px}
.article-body ul{padding-left:24px;display:flex;flex-direction:column;gap:11px}
.article-body li{line-height:1.65;color:rgba(215,226,234,.84)}
.article-body li::marker{color:#6da3ff}
.article-body blockquote{border-left:4px solid var(--bc-blue-bright);background:rgba(37,99,235,.12);padding:18px 22px;border-radius:0 16px 16px 0}
.article-body blockquote p{margin:0;color:#fff}

/* ---- Blocs riches (identiques d'intention à la landing vtcbizz) ---- */
.article-body .seo-note{background:rgba(17,88,254,.10);border-left:3px solid var(--bc-blue-bright);border-radius:0 12px 12px 0;padding:18px 22px;margin:0 0 22px}
.article-body .seo-note>:last-child{margin-bottom:0}
.article-body .seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:0 0 22px}
.article-body .seo-card{background:rgba(40,70,140,.12);border:1px solid rgba(120,155,230,.20);border-radius:16px;padding:22px 24px}
.article-body .seo-card h3{margin-top:0;font-size:19px}
.article-body .seo-card>:last-child{margin-bottom:0}
.article-body .seo-card ul{padding-left:20px}
.article-body .seo-cta{text-align:center;margin:34px 0}
.article-body .seo-cta a{display:inline-block;background:linear-gradient(135deg,var(--bc-blue),var(--bc-blue-bright));color:#fff;font-weight:800;font-size:16px;line-height:1.3;padding:16px 30px;border-radius:14px;text-decoration:none;box-shadow:0 18px 44px rgba(17,88,254,.28);transition:transform .18s,box-shadow .18s}
.article-body .seo-cta a:hover{transform:translateY(-2px);box-shadow:0 22px 54px rgba(17,88,254,.42)}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15.5px}
.article-body table th,.article-body table td{border:1px solid var(--bc-border);padding:10px 13px;text-align:left}
.article-body table th{background:rgba(37,99,235,.16);color:#fff;font-weight:700}
.article-body table td{color:rgba(215,226,234,.84)}
.article-body table tr:nth-child(even) td{background:rgba(255,255,255,.025)}

/* ---- FAQ accordéon ---- */
.article-body .faq-section{margin:62px 0 10px;padding:0}
.article-body .faq-section>h2{display:flex;align-items:center;gap:10px;margin-top:0;border-bottom:0;padding-bottom:0}
.article-body .faq-section>h2::before{content:"?";display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--bc-blue),var(--bc-blue-bright));color:#fff;font-size:18px;font-weight:900;box-shadow:0 14px 34px rgba(17,88,254,.28)}
.article-body .faq-list{display:grid;gap:14px;margin-top:22px}
.article-body details.faq-item{position:relative;overflow:hidden;border:1px solid rgba(120,155,230,.22);border-radius:20px;background:linear-gradient(145deg,rgba(15,23,42,.94),rgba(8,14,28,.92));box-shadow:0 18px 50px rgba(0,0,0,.24);transition:border-color .18s,background .18s,box-shadow .18s}
.article-body details.faq-item[open]{border-color:rgba(125,171,255,.48);background:linear-gradient(145deg,rgba(19,31,62,.96),rgba(8,14,28,.94));box-shadow:0 22px 62px rgba(17,88,254,.16)}
.article-body details.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px;padding:20px 24px;color:#fff;font-size:18px;font-weight:800;line-height:1.35;outline:0}
.article-body details.faq-item summary::-webkit-details-marker{display:none}
.article-body details.faq-item summary::after{content:"+";display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:12px;border:1px solid rgba(125,171,255,.34);background:rgba(37,99,235,.12);color:#8ab7ff;font-size:24px;line-height:1;font-weight:600;transition:transform .18s,background .18s,color .18s}
.article-body details.faq-item[open] summary::after{content:"×";transform:rotate(90deg);background:linear-gradient(135deg,var(--bc-blue),var(--bc-blue-bright));color:#fff}
.article-body details.faq-item summary:hover{background:rgba(255,255,255,.025)}
.article-body details.faq-item summary:focus-visible{box-shadow:inset 0 0 0 3px rgba(138,183,255,.62);border-radius:20px}
.article-body .faq-answer{padding:0 24px 22px;color:rgba(215,226,234,.84)}
.article-body .faq-answer p{margin:0 0 12px;line-height:1.76}
.article-body .faq-answer p:last-child,.article-body .faq-answer ul:last-child{margin-bottom:0}
.article-body .faq-answer ul{margin-top:2px;padding-left:21px}
.article-body .faq-answer a{font-weight:700}

/* ---- Sommaire hamburger (flottant à gauche) ---- */
.toc{position:fixed;left:10px;top:98px;z-index:90}
.toc-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:38px;height:38px;padding:0;background:rgba(10,16,32,.88);border:1px solid rgba(119,136,170,.28);color:#fff;font-family:inherit;border-radius:12px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.26);backdrop-filter:blur(10px)}
.toc-toggle .tt-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toc-toggle .tt-ic{position:relative;color:#7dabff;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.toc-toggle .tt-ic svg{display:block;width:18px;height:18px}
.toc.open .toc-toggle{background:#102044;border-color:var(--bc-blue-bright);box-shadow:0 12px 34px rgba(17,88,254,.24)}
.toc-overlay{position:fixed;inset:0;z-index:88;background:rgba(2,6,16,.42);backdrop-filter:blur(2px)}
.toc-nav{position:fixed;left:10px;top:144px;bottom:18px;z-index:91;width:min(360px,calc(100vw - 20px));transform:translateX(calc(-100% - 24px));opacity:0;pointer-events:none;display:block;overflow:auto;background:#0a1020;border:1px solid rgba(119,136,170,.28);border-radius:16px;padding:8px 10px 10px;box-shadow:0 24px 80px rgba(0,0,0,.62);transition:transform .22s ease,opacity .18s ease}
.toc.open .toc-nav{transform:translateX(0);opacity:1;pointer-events:auto}
.toc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px 10px 8px;position:sticky;top:0;background:#0a1020;z-index:1}
.toc-title{font-size:11.5px;text-transform:uppercase;letter-spacing:1.5px;color:#7dabff;font-weight:800;margin:0}
.toc-close{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(119,136,170,.28);border-radius:10px;background:rgba(255,255,255,.04);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.toc-link{display:block;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.4;color:#cdd6ea;margin:2px 0;text-decoration:none;transition:background .15s,color .15s}
.toc-link:hover{color:#fff;background:rgba(255,255,255,.045)}
.toc-link.active{background:rgba(37,99,235,.14);color:#8ab7ff;font-weight:700}
.toc-open{overflow:hidden}

/* ---- État vide (aucun article publié) ---- */
.bc-blog-empty{max-width:640px;margin:10px auto 90px;text-align:center;border:1px solid rgba(36,48,73,.9);border-radius:26px;background:linear-gradient(160deg,rgba(15,23,42,.82),rgba(15,23,42,.38));padding:48px 28px}
.bc-blog-empty p{color:rgba(215,226,234,.75);font-size:18px;line-height:1.6;margin:0 0 24px}

/* ---- Bandeau CTA de fin d'article ---- */
.bc-cta-band{padding:0 24px 84px;text-align:center}
.bc-cta-band .bc-container{border:1px solid rgba(17,88,254,.35);background:radial-gradient(500px 180px at 50% 0,rgba(17,88,254,.22),transparent),rgba(15,23,42,.58);border-radius:28px;padding:42px 24px}
.bc-cta-band h2{font-size:clamp(28px,3vw,42px);line-height:1.05;margin:0 0 14px;letter-spacing:-.04em}
.bc-cta-band p{color:rgba(215,226,234,.72);max-width:720px;margin:0 auto 24px;line-height:1.68}

/* ---- Responsive ---- */
@media(max-width:920px){
  .bc-blog-hero,.bc-article-hero{padding:44px 0 34px}
  .bc-post-grid{grid-template-columns:1fr}
  .toc{left:8px;top:82px}.toc-toggle{width:34px;height:34px;border-radius:11px}
  .toc-nav{left:8px;top:122px;bottom:14px;width:min(330px,calc(100vw - 16px));border-radius:15px}
}
@media(max-width:620px){
  .bc-container{padding:0 18px}
  .bc-article-layout{padding:0 14px 56px}
  .bc-article-card{border-radius:22px}
  .article-body{font-size:16.5px}
  .article-body .faq-section{margin-top:48px}
  .article-body .faq-section>h2{align-items:flex-start}
  .article-body .faq-section>h2::before{width:30px;height:30px;border-radius:10px;font-size:16px;margin-top:1px}
  .article-body details.faq-item{border-radius:17px}
  .article-body details.faq-item summary{min-height:0;padding:17px 18px;font-size:16.5px;gap:12px}
  .article-body details.faq-item summary::after{width:30px;height:30px;border-radius:10px;font-size:22px}
  .article-body .faq-answer{padding:0 18px 18px}
  .bc-blog-hero h1,.bc-article-hero h1{font-size:clamp(31px,10vw,44px)}
  .bc-post-card{min-height:0}
  .bc-cta-band{padding-left:14px;padding-right:14px}
}