/* ═══════════════════════════════════════════════════════════════════
   SpinBoost — charte v4, couche BLOG
   Chargée APRÈS v4.css sur les 14 pages blog. Le blog a son propre thème
   (theme-blog.css) : v4.css couvre déjà body/confettis/boutons/titres/footer
   via les tokens ; ici on traite les composants blog spécifiques (header,
   cartes d'articles, CTA, citation). Autres familles non touchées.
   ═══════════════════════════════════════════════════════════════════ */

/* Header → pilule blanche flottante (comme l'accueil) */
header.site{position:static;background:transparent !important;border-bottom:none !important}
header.site .hd{background:#fff;border:var(--bd);border-radius:999px;box-shadow:var(--sh-nav);
  height:auto;min-height:58px;padding:8px 14px 8px 20px;margin:16px auto 10px;max-width:1120px}
.logo .sq{border:var(--bd);box-shadow:none}
.hd nav a{color:var(--ink-soft);font-weight:700}
.hd nav a:hover{color:var(--action)}

/* Cartes d'articles → autocollant v4 (bordure encre + ombre dure) */
.pcard{border:var(--bd);border-radius:16px;box-shadow:var(--sh-card);background:#fff}
.pcard:hover{transform:translateY(2px);box-shadow:2px 3px 0 var(--enc);border-color:var(--enc)}
.pcard .tag{color:var(--step-deep)}
.pcard h2{color:var(--ink)}
.pcard .rd{color:var(--action)}

/* CTA de bas de page → autocollant v4 */
.cta{border:var(--bd) !important;box-shadow:var(--sh-card);border-radius:16px;
  background:var(--surface-2) !important}
.cta h3{color:var(--ink)}

/* Citation d'article */
blockquote{background:var(--surface-2) !important;border-left:4px solid var(--action)}

/* ═══ Correctif bouton CTA (GLOBAL, tous articles) ═══
   L'héritage .article a (violet + souligné) écrasait le bouton (texte violet sur
   fond violet, tronqué). On force un bouton lisible, non tronqué, charte v4. */
.article a.btn, .cta a.btn, a.btn{
  color:#fff !important; text-decoration:none !important;
  background:var(--action); border:var(--bd); box-shadow:var(--sh-btn);
  white-space:nowrap; overflow:visible; width:auto; max-width:none;
  padding:12px 24px; font-weight:800;
}
a.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--enc)}
a.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--enc)}
a.btn.ghost{background:#fff;color:var(--enc) !important}
a.btn.sm{padding:9px 16px}

/* ═══ Nouveau template d'article (Lot 1) — SCOPÉ .art-v4 : aucun impact sur
   les 13 articles existants (Lot 2). Composants repris de la blog.css fournie,
   remappés sur les tokens v4 (menthe=--valid, framboise=--reward, corail=--step,
   solaire=--sun, violet=--action, encre=--enc, lavande=--surface/--surface-2). */
body.art-v4{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.art-v4 .hero{position:relative;padding:36px 0 8px;max-width:780px;margin:0 auto}
.art-v4 .hero::before{content:"";position:absolute;inset:-40px 0 auto;height:360px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,58,237,.16),transparent),radial-gradient(closest-side at 80% 40%,rgba(245,201,62,.22),transparent)}
.art-v4 .crumbs{font-size:13.5px;color:var(--ink-pale);margin-bottom:18px}
.art-v4 .crumbs a{color:var(--ink-pale);text-decoration:none}
.art-v4 .crumbs a:hover{color:var(--action)}
.art-v4 .crumbs span{margin:0 6px}
.art-v4 .hl{background:linear-gradient(transparent 58%,var(--sun) 58%,var(--sun) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.art-v4 .lead{font-size:clamp(17px,2.4vw,20px);margin-top:16px;max-width:62ch;color:var(--ink-soft)}
.art-v4 .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;font-size:13.5px;font-weight:700}
.art-v4 .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#fff;border:2px solid var(--enc);box-shadow:var(--sh-badge);color:var(--enc)}
.art-v4 .layout{display:grid;gap:28px;margin:30px auto 0;max-width:780px}
.art-v4 .card{background:#fff;border:var(--bd);border-radius:20px;box-shadow:var(--sh-card)}
.art-v4 .article{padding:28px 20px}
@media(min-width:640px){.art-v4 .article{padding:44px 48px}}
.art-v4 .article h2{scroll-margin-top:90px}
.art-v4 .article ul,.art-v4 .article ol{margin:0 0 20px;padding:0;list-style:none}
.art-v4 .article ul li{position:relative;padding-left:32px;margin-bottom:10px}
.art-v4 .article ul li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--valid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.art-v4 .article ul.no li::before{background:var(--reward) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat}
.art-v4 .article ol{counter-reset:st}
.art-v4 .article ol li{position:relative;padding-left:42px;margin-bottom:14px;counter-increment:st}
.art-v4 .article ol li::before{content:counter(st);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--step);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;border:2px solid var(--enc)}
.art-v4 .toc{background:var(--surface);border:2px solid var(--enc);border-radius:16px;padding:18px 20px;margin:0 0 30px}
.art-v4 .toc strong{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--step-deep);margin-bottom:8px}
.art-v4 .toc ol{margin:0}
.art-v4 .toc li{padding-left:0;margin-bottom:6px;counter-increment:none;font-size:15.5px}
.art-v4 .toc li::before{display:none}
.art-v4 .toc a{font-weight:600;text-decoration:none;color:var(--ink-soft)}
.art-v4 .toc a:hover{color:var(--action)}
.art-v4 .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:8px 0 26px}
.art-v4 .stat{background:#fff;border:2px solid var(--enc);border-radius:16px;box-shadow:var(--sh-badge);padding:16px}
.art-v4 .stat b{display:block;font-size:30px;line-height:1.1;font-weight:800;color:var(--action);letter-spacing:-.02em}
.art-v4 .stat span{display:block;font-size:14.5px;margin-top:6px;line-height:1.45}
.art-v4 .stat small{display:block;font-size:12px;color:var(--ink-pale);margin-top:6px}
.art-v4 .note{border:2px solid var(--enc);border-radius:16px;padding:18px 20px;margin:26px 0;background:var(--surface)}
.art-v4 .note.warn{background:#FFF6EE}
.art-v4 .note.ok{background:#EEFBF8}
.art-v4 .note p:last-child{margin-bottom:0}
.art-v4 .note .t{display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;color:var(--step-deep)}
.art-v4 .note.ok .t{color:#1B7F70}
.art-v4 blockquote{margin:26px 0;padding:18px 22px;border-left:6px solid var(--sun) !important;background:var(--surface) !important;border-radius:0 14px 14px 0;color:var(--enc);font-size:18.5px;font-weight:600}
.art-v4 .sources{margin-top:34px;padding-top:20px;border-top:2px dashed var(--line);font-size:14px;color:var(--ink-pale)}
.art-v4 .sources h2{font-size:15px !important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-pale) !important;margin:0 0 10px !important}
.art-v4 .sources ul li{padding-left:0;margin-bottom:6px}
.art-v4 .sources ul li::before{display:none}
.art-v4 .sources a{font-weight:600;color:var(--ink-pale)}
.art-v4 .cta{position:relative;overflow:hidden;text-align:center;padding:34px 22px;background:var(--surface-2) !important;border:var(--bd) !important;box-shadow:var(--sh-card);border-radius:20px}
.art-v4 .cta::before{content:"";position:absolute;width:420px;height:420px;left:50%;top:-180px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(245,201,62,.45),transparent);pointer-events:none}
.art-v4 .cta>*{position:relative}
.art-v4 .cta h2{font-size:clamp(22px,3.4vw,28px);font-weight:800;color:var(--enc);line-height:1.2;margin-bottom:10px}
.art-v4 .cta p{max-width:46ch;margin:0 auto 22px;color:var(--ink-soft)}
.art-v4 .cta .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.art-v4 .cta small{display:block;margin-top:16px;font-size:13px;color:var(--ink-pale)}
.art-v4 .related h2{font-size:22px;font-weight:800;color:var(--enc);margin:10px 0 16px}
.art-v4 .related .pcard{padding:22px 20px}
.art-v4 .related .pcard h3{font-size:18.5px;line-height:1.3;font-weight:800;color:var(--enc);margin-bottom:8px}
.art-v4 .related .pcard p{font-size:15px;flex:1}