/*
 * RedThunder — styles du blog (index et articles)
 * ------------------------------------------------------------------
 * Chargé APRÈS app.css (jetons de couleur, en-tête, pied de page, cartes, FAQ, .doc, .tldr…).
 * Thème : <body class="app-librio | app-cocon"> comme sur les sites d'applications ; sans classe = rouge DVDthèque.
 * Fichier propre au site principal : il n'est pas copié dans les dossiers d'apps (voir tools/build_blog.py pour le ?v=).
 */

/* ---------- fil d'Ariane ---------- */
.doc .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .5rem;margin:0 0 1.6rem;padding:0;font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--mut)}
.doc .crumbs li{display:flex;gap:.5rem;min-width:0;font:inherit;color:inherit}
.crumbs li+li::before{content:"/";color:var(--ac2)}
.crumbs li[aria-current]{overflow-wrap:anywhere}
.doc .crumbs a{color:var(--mut);text-decoration:none}
.doc .crumbs a:hover{color:var(--ac2)}

/* ---------- en-tête d'article ---------- */
.post .chip{display:inline-block}
.post h1{font:800 clamp(1.5rem,4.2vw,2.3rem)/1.18 var(--disp);text-transform:none;letter-spacing:-.01em;margin:1.1rem 0 .8rem}
.post .meta{margin-bottom:1.8rem}
.nb{white-space:nowrap}
.doc .note{font-size:12px;line-height:1.7}
.doc .meta a{color:var(--ac2)}
.post p,.post li{font-size:1.04rem;line-height:1.75}
.post .lead{font-size:1.12rem;color:#e6e4e0;max-width:none;margin-top:0}
.post strong{color:#fff}
.post h2{scroll-margin-top:88px}
.post h3{margin-top:1.6rem}
.doc code{font:500 .9em/1.4 var(--mono);background:var(--bg2);border:1px solid var(--line);padding:.08em .4em;border-radius:3px;color:#fff;overflow-wrap:anywhere}
.post ol{margin:.8rem 0 0 1.3rem;display:grid;gap:.55rem}
.post ol li::marker{color:var(--ac2);font:700 .9em var(--mono)}
.post ul ul,.post ol ul{margin-top:.5rem}

/* ---------- À retenir, sommaire, encadrés ---------- */
.doc .tldr-t,.toc .toc-t{font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ac2);margin:0}
.doc .tldr p+ul,.doc .tldr .tldr-t+p{margin-top:.8rem}
.toc{margin-top:1.8rem;padding:1.1rem 1.3rem 1.2rem;border:1px solid var(--line);background:var(--bg2)}
.doc .toc ol{margin:.8rem 0 0 1.2rem;gap:.35rem}
.doc .toc li{font-size:.97rem;line-height:1.5}
.doc .toc a{text-decoration:none;color:#d6d6de}
.doc .toc a:hover{color:var(--ac2);text-decoration:underline}
.callout{margin-top:1.4rem;padding:1.05rem 1.2rem;border:1px solid var(--line2);border-left:3px solid var(--ac);background:rgba(var(--ac-rgb),.07)}
.callout p{margin:0;font-size:1rem}
.callout p+p{margin-top:.6rem}
.callout .callout-t{font:700 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ac2);margin-bottom:.6rem}
.callout.warn{border-left-color:var(--warm,#ffb347);background:rgba(255,179,71,.07)}
.callout.warn .callout-t{color:var(--warm,#ffb347)}

/* ---------- schémas ---------- */
.post figure{margin:1.8rem 0 0}
.post figure svg{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--bg2)}
.post figcaption{margin-top:.6rem;font:500 12px/1.6 var(--mono);letter-spacing:.03em;color:var(--mut)}
.post figure svg text{font-family:var(--mono)}

/* ---------- tableaux : défilement horizontal plutôt que débordement ---------- */
.post table{margin-top:1.2rem}

/* ---------- FAQ en bas d'article ---------- */
.post-faq .faq-item summary{padding:1.1rem .2rem;font-size:1.05rem}
.post-faq .faq-item summary:hover{padding-left:.7rem}
.post .faq-item p{margin-top:0;padding:0 .2rem 1.3rem;color:#cfcfd8;max-width:none;font-size:1rem}

/* ---------- appel à l'application ---------- */
.post-cta{display:flex;gap:1.3rem;align-items:flex-start;margin-top:3rem;padding:clamp(1.2rem,3vw,1.8rem);border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel),var(--bg2));position:relative}
.post-cta::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--ac)}
.post-cta img{width:64px;height:64px;border-radius:16px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 30px -8px rgba(var(--ac-rgb),.55)}
.post-cta+.post-cta{margin-top:1rem}
.post-cta p{margin-top:.5rem;font-size:.98rem;line-height:1.65}
.post-cta .post-cta-t{margin-top:0;font:800 1.02rem/1.3 var(--disp);color:#fff}
.post-cta-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:1rem}
.post-cta .store img{width:auto;height:56px;border-radius:0;box-shadow:none}
.post-cta .note{margin-top:1rem;font-size:11px}
.doc a.btn-g{color:var(--txt)}
.doc a.btn-g:hover{color:var(--ac2)}

/* ---------- guides liés et index ---------- */
.post-related h2{margin-top:3.2rem}
.doc .cards{margin-top:1.4rem}
.doc a.card{color:var(--txt)}
.doc .card h3{margin:0 0 .5rem;font-size:1.05rem;line-height:1.35;color:#fff}
.doc .card p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.6}
.doc .card .pc-more{color:var(--ac2)}
.doc.wide{max-width:1080px}
.blog-index>section{margin-top:3rem}
.blog-index>section>h2{margin-top:0}
.blog-index>section>p{max-width:70ch}
.blog-index .lead{max-width:70ch}

@media(max-width:560px){
  .post-cta{flex-direction:column;gap:1rem}
  .post-cta .store img{height:52px}
}