/* ============================================================
   blog.css — système visuel du blog Indusiax
   Étend site.css + product.css (mêmes variables --bg/--txt/--acc…).
   ============================================================ */

/* ---------- Index : filtres par produit ---------- */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.bf-chip{font-family:'JBMono',ui-monospace,Consolas,monospace;font-size:.78rem;
  padding:8px 16px;border-radius:99px;border:1px solid var(--bord);background:var(--bg2);
  color:var(--mut);cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .15s;}
.bf-chip:hover{border-color:var(--acc);color:var(--txt);}
.bf-chip:active{transform:scale(.96);}
.bf-chip.active{background:var(--acc);border-color:var(--acc);color:#fff;}

/* ---------- Index : grille d'articles ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:760px){.blog-grid{grid-template-columns:1fr;}}

.blog-card{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--bord);
  border-radius:16px;overflow:hidden;--card-acc:var(--acc);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;}
.blog-card:hover{border-color:color-mix(in srgb, var(--card-acc) 45%, transparent);
  transform:translateY(-6px);box-shadow:0 20px 44px -18px color-mix(in srgb, var(--card-acc) 55%, transparent);}
.blog-card:has(.tag-rotor){--card-acc:var(--rotor);}
.blog-card:has(.tag-vector){--card-acc:var(--vector);}
.blog-card:has(.tag-flux){--card-acc:var(--flux);}
.blog-card:has(.tag-contiax){--card-acc:var(--contiax);}
.blog-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg3);}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.blog-card:hover .thumb img{transform:scale(1.06);}
.blog-card .bc-in{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1;}
.blog-card .bc-tag{font-family:'JBMono',ui-monospace,Consolas,monospace;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
.blog-card h3{font-size:1.08rem;line-height:1.34;letter-spacing:-.01em;}
.blog-card p{font-size:.88rem;color:var(--mut);flex:1;}
.blog-card .bc-meta{font-size:.76rem;color:var(--mut2);font-family:'JBMono',ui-monospace,Consolas,monospace;}
.blog-card .bc-read{font-size:.82rem;font-weight:600;color:var(--card-acc);margin-top:2px;
  display:inline-block;transition:transform .25s;}
.blog-card:hover .bc-read{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){
  .blog-card,.blog-card .thumb img,.blog-card .bc-read{transition:none;}
  .blog-card:hover{transform:none;}
}
@media(hover:none){.blog-card:active{transform:scale(.98);}}

.blog-card.feat{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;gap:0;}
.blog-card.feat .thumb{aspect-ratio:auto;height:100%;}
.blog-card.feat .bc-in{justify-content:center;padding:32px 36px;gap:12px;}
.blog-card.feat h3{font-size:1.5rem;line-height:1.28;}
.blog-card.feat p{font-size:.96rem;}
@media(max-width:760px){
  .blog-card.feat{grid-template-columns:1fr;}
  .blog-card.feat .thumb{aspect-ratio:16/9;}
}
.blog-card.feat{position:relative;}
@media(prefers-reduced-motion:no-preference){
  .blog-card.feat::after{
    content:"";position:absolute;inset:0;border-radius:16px;padding:1.5px;z-index:2;
    background:conic-gradient(from var(--cf-angle), transparent 55%, var(--acc), #ff8a5c, transparent);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:cfSpin 7s linear infinite;pointer-events:none;
  }
}
/* ---------- Article : tableau comparatif, lignes en cascade ---------- */
@media(prefers-reduced-motion:no-preference){
  table.compare-table tbody tr{opacity:0;transform:translateY(10px);
    transition:opacity .4s ease,transform .4s ease;}
  .table-wrap.in table.compare-table tbody tr{opacity:1;transform:none;}
  .table-wrap.in table.compare-table tbody tr:nth-child(1){transition-delay:.05s;}
  .table-wrap.in table.compare-table tbody tr:nth-child(2){transition-delay:.13s;}
  .table-wrap.in table.compare-table tbody tr:nth-child(3){transition-delay:.21s;}
  .table-wrap.in table.compare-table tbody tr:nth-child(4){transition-delay:.29s;}
  .table-wrap.in table.compare-table tbody tr:nth-child(5){transition-delay:.37s;}
  .table-wrap.in table.compare-table tbody tr:nth-child(6){transition-delay:.45s;}
}

/* ---------- Article : en-tête (réutilise .pv-hero) ---------- */
.article-meta-top{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-family:'JBMono',ui-monospace,Consolas,monospace;font-size:.76rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut2);margin-top:24px;}
.article-meta-top .dot{width:4px;height:4px;border-radius:50%;background:var(--mut2);}
@media(prefers-reduced-motion:no-preference){
  .pv-hero .bg img{animation:artKB 20s ease-out both;}
  @keyframes artKB{from{transform:scale(1.12);}to{transform:scale(1);}}
  .article-meta-top{opacity:0;animation:pvUp .7s cubic-bezier(.22,1,.36,1) .35s both;}
}

/* ---------- Article : corps ---------- */
.article-body{max-width:700px;margin:0 auto;font-size:1.06rem;line-height:1.78;color:var(--mut);}
.article-body h2{color:var(--txt);font-size:clamp(1.32rem,2.6vw,1.68rem);font-weight:800;
  letter-spacing:-.015em;margin:46px 0 16px;line-height:1.25;}
.article-body h3{color:var(--txt);font-size:1.14rem;font-weight:700;margin:28px 0 12px;}
.article-body p{margin-bottom:19px;}
.article-body ul,.article-body ol{margin:0 0 19px 22px;}
.article-body li{margin-bottom:9px;}
.article-body strong{color:var(--txt);}
.article-body a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;}
.article-body a:hover{color:#f0603f;}
.article-body blockquote{border-left:3px solid var(--acc);padding:2px 0 2px 22px;margin:30px 0;
  font-size:1.14rem;line-height:1.5;color:var(--txt);font-weight:600;letter-spacing:-.01em;}

.article-cta-inline{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:var(--acc-soft);border:1px solid rgba(232,76,43,.3);border-radius:14px;
  padding:22px 26px;margin:38px 0;}
.article-cta-inline p{margin:0;flex:1;min-width:200px;font-size:.96rem;color:var(--mut);}
.article-cta-inline .btn{flex-shrink:0;}

.faq-block{margin:8px 0 6px;}

/* ---------- Article : barre de progression de lecture ---------- */
.read-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:60;
  background:var(--p,var(--acc));transform:scaleX(0);transform-origin:left;
  will-change:transform;}
@media(prefers-reduced-motion:reduce){.read-progress{display:none;}}

/* ---------- Article : intro / sommaire ---------- */
.article-lede{max-width:700px;margin:0 auto 8px;font-size:1.14rem;color:var(--mut);}

/* ---------- Article : rail de partage social ---------- */
.share-rail{display:flex;flex-direction:row;justify-content:center;gap:14px;
  max-width:700px;margin:0 auto 20px;}
.share-btn{width:40px;height:40px;border-radius:50%;background:var(--bg2);border:1px solid var(--bord);
  color:var(--mut);display:grid;place-items:center;font-size:.78rem;font-weight:800;
  text-decoration:none;cursor:pointer;font-family:inherit;transition:background .2s,color .2s,transform .2s,border-color .2s;}
.share-btn:hover{transform:translateY(-2px);color:#fff;}
.share-li:hover{background:#0A66C2;border-color:#0A66C2;}
.share-x:hover{background:#000;border-color:#000;}
.share-copy:hover{background:var(--acc);border-color:var(--acc);}
@media(min-width:1300px){
  .share-rail{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:40;
    flex-direction:column;max-width:none;margin:0;}
}
@media(prefers-reduced-motion:reduce){.share-btn{transition:none;}.share-btn:hover{transform:none;}}

/* ---------- Article : sommaire cliquable ---------- */
.article-toc{max-width:700px;margin:8px auto 34px;padding:20px 24px;
  background:var(--bg2);border:1px solid var(--bord);border-radius:14px;}
.article-toc .toc-title{display:block;font-family:'JBMono',ui-monospace,Consolas,monospace;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin-bottom:12px;}
.article-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:flex;flex-direction:column;gap:2px;}
.article-toc li{counter-increment:toc;}
.article-toc a{display:flex;gap:10px;align-items:baseline;padding:7px 8px;border-radius:8px;
  color:var(--mut);text-decoration:none;font-size:.92rem;line-height:1.4;
  transition:color .2s,background .2s;position:relative;}
.article-toc a::before{content:counter(toc);font-family:'JBMono',ui-monospace,Consolas,monospace;
  font-size:.72rem;color:var(--p,var(--acc));flex-shrink:0;width:1.4em;}
.article-toc a:hover{color:var(--txt);background:var(--bg3);}
.article-toc a.active{color:var(--txt);font-weight:600;}
.article-toc a.active::after{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:var(--p,var(--acc));border-radius:2px;transition:top .2s,bottom .2s;}
.article-body h2{scroll-margin-top:88px;}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

/* ---------- Article : encadré "Sur le même sujet" ---------- */
.article-related{max-width:700px;margin:56px auto 0;padding-top:36px;border-top:1px solid var(--bord);}
.article-related h4{font-family:'JBMono',ui-monospace,Consolas,monospace;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin-bottom:18px;}

/* ---------- Auteur / signature en fin d'article ---------- */
.article-sig{max-width:700px;margin:44px auto 0;display:flex;gap:14px;align-items:center;
  padding:20px 22px;background:var(--bg2);border:1px solid var(--bord);border-radius:14px;}
.article-sig .av{width:42px;height:42px;border-radius:50%;background:var(--acc-soft);color:var(--acc);
  display:grid;place-items:center;font-weight:800;flex-shrink:0;}
.article-sig .tx b{color:var(--txt);display:block;font-size:.92rem;}
.article-sig .tx span{font-size:.82rem;color:var(--mut2);}

.tag-stator{color:var(--stator);} .tag-rotor{color:var(--rotor);}
.tag-vector{color:var(--vector);} .tag-flux{color:var(--flux);} .tag-suite{color:var(--acc);}
.tag-contiax{color:var(--contiax);}

/* ---------- Article : tableau comparatif ---------- */
.table-wrap{overflow-x:auto;margin:28px 0;border:1px solid var(--bord);border-radius:14px;position:relative;}
.table-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg));opacity:1;transition:opacity .25s ease;}
.table-wrap.at-end::after{opacity:0;}
table.compare-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px;}
table.compare-table th,table.compare-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--bord);vertical-align:top;}
table.compare-table thead th{background:var(--bg2);color:var(--txt);font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;font-family:'JBMono',ui-monospace,Consolas,monospace;white-space:nowrap;}
table.compare-table thead th:first-child{color:var(--mut2);}
table.compare-table tbody th{font-weight:600;color:var(--txt);white-space:nowrap;background:var(--bg2);}
table.compare-table tbody tr:last-child td,table.compare-table tbody tr:last-child th{border-bottom:none;}
table.compare-table td.our{background:var(--acc-soft);color:var(--txt);font-weight:600;}
table.compare-table tbody tr:hover td,table.compare-table tbody tr:hover th{background:var(--bg3);}

/* ---------- Article : photo inline ---------- */
.article-figure{margin:34px 0;}
.article-figure img{width:100%;display:block;border-radius:14px;border:1px solid var(--bord);}
.article-figure figcaption{font-family:'JBMono',ui-monospace,Consolas,monospace;font-size:.78rem;
  line-height:1.5;color:var(--mut2);margin-top:11px;padding-left:14px;border-left:2px solid var(--p,var(--acc));}

/* ---------- Article : schéma explicatif SVG ---------- */
.schema-fig{margin:36px 0;background:var(--bg2);border:1px solid var(--bord);border-radius:16px;
  padding:24px 26px 20px;overflow:hidden;}
.schema-fig .schema-title{font-family:'JBMono',ui-monospace,Consolas,monospace;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--p,var(--acc));margin-bottom:18px;
  display:flex;align-items:center;gap:10px;}
.schema-fig .schema-title::before{content:"";width:20px;height:2px;background:var(--p,var(--acc));flex-shrink:0;}
.schema-fig svg{width:100%;height:auto;display:block;overflow:visible;}
.schema-fig figcaption{font-size:.86rem;line-height:1.55;color:var(--mut);margin-top:16px;}
.schema-fig .s-node{fill:var(--bg3);stroke:var(--bord);}
.schema-fig .s-node-acc{fill:rgba(255,255,255,.03);stroke:var(--p,var(--acc));}
.schema-fig .s-lbl{fill:var(--txt);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;}
.schema-fig .s-sub{fill:var(--mut);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;}
.schema-fig .s-mono{fill:var(--mut2);font-family:'JBMono',ui-monospace,Consolas,monospace;letter-spacing:.04em;}
.schema-fig .s-acc{fill:var(--p,var(--acc));}
.schema-fig .s-line{stroke:rgba(255,255,255,.28);fill:none;}
.schema-fig .s-line-acc{stroke:var(--p,var(--acc));fill:none;}
.schema-fig .s-dash{stroke:rgba(255,255,255,.22);fill:none;stroke-dasharray:5 5;}
@media(max-width:560px){
  .schema-fig{padding:18px 16px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;}
  .schema-fig svg{width:auto;min-width:540px;}
  .schema-fig::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--bg2));opacity:1;transition:opacity .25s ease;}
  .schema-fig.at-end::after{opacity:0;}
}

/* ---------- Article : schéma SVG animé au premier passage dans le viewport ---------- */
@media(prefers-reduced-motion:no-preference){
  .schema-fig .s-line,.schema-fig .s-line-acc{
    stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset 1.1s ease;}
  .schema-fig.in .s-line,.schema-fig.in .s-line-acc{stroke-dashoffset:0;transition-delay:.2s;}
  .schema-fig .s-node,.schema-fig .s-node-acc{
    opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.92);
    transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);}
  .schema-fig.in .s-node,.schema-fig.in .s-node-acc{opacity:1;transform:none;transition-delay:.05s;}
  .schema-fig .s-lbl,.schema-fig .s-sub,.schema-fig .s-mono,.schema-fig .s-acc{
    opacity:0;transition:opacity .5s ease;transition-delay:.4s;}
  .schema-fig.in .s-lbl,.schema-fig.in .s-sub,.schema-fig.in .s-mono,.schema-fig.in .s-acc{opacity:1;}
  .schema-fig .s-dash{opacity:0;transition:opacity .5s ease;transition-delay:.65s;}
  .schema-fig.in .s-dash{opacity:1;animation:sDashFlow 1.8s linear infinite;animation-delay:.65s;}
  @keyframes sDashFlow{to{stroke-dashoffset:-20;}}
}