/* Lipo & Moi — styles blog (pages piliers + articles).
   À utiliser avec design-tokens.css. */

.blog-header { border-bottom:1px solid var(--ligne); position:sticky; top:0; z-index:40; background:var(--sable); }
.blog-header .inner { max-width:860px; margin:0 auto; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.blog-header .brand { font-family:var(--serif); font-style:italic; font-weight:500; font-size:23px; color:var(--prune); text-decoration:none; }
.blog-header .amp { font-family:var(--sans); font-style:normal; font-weight:400; }
.blog-header nav a { font-size:14px; color:var(--encre-doux); text-decoration:none; margin-left:18px; }
.blog-header nav a:hover { color:var(--prune); }
@media (max-width:600px){ .blog-header nav a:not(.opt) { display:none; } }

.blog-wrap { max-width:760px; margin:0 auto; padding:0 20px; }
.breadcrumb { font-size:13px; color:var(--encre-doux); margin:22px 0 0; }
.breadcrumb a { color:var(--encre-doux); }
.kicker { display:inline-block; margin:26px 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#A8624F; font-weight:500; }
.kicker::after { content:""; display:block; width:112px; height:20px; margin:8px 0 0; background:url('img/brin-h.svg') left center/contain no-repeat; }
.pillar-icon { width:52px; height:52px; border-radius:50%; background:var(--argile-clair); display:flex; align-items:center; justify-content:center; color:var(--prune); margin:24px 0 4px; }
.pillar-icon svg { width:27px; height:27px; }
.pillar .kicker { margin-top:8px; }
.pillar .kicker::after { display:none; }
@media (max-width:600px){ .pillar-icon { width:40px; height:40px; margin:16px 0 0; } .pillar-icon svg { width:21px; height:21px; } }
article h1, .pillar h1 { font-size:clamp(28px,5vw,40px); margin:4px 0 10px; }
.article-meta { font-size:13px; color:var(--encre-doux); margin-bottom:8px; }
.lead { font-size:19px; color:var(--encre-doux); line-height:1.6; }

article h2 { font-size:24px; margin:34px 0 10px; scroll-margin-top:80px; }
article h3 { font-size:19px; margin:22px 0 6px; }
article p, article li { font-size:17px; line-height:1.8; }
article ul, article ol { padding-left:22px; }
article li { margin:5px 0; }

.toc { background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r-md); padding:16px 20px; margin:22px 0; }
.toc strong { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--prune); }
.toc ol { margin:8px 0 0; padding-left:20px; }
.toc a { color:var(--encre); text-decoration:none; }
.toc a:hover { color:var(--prune); text-decoration:underline; }

figure { margin:24px 0; }
figure .ph { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-md); display:block; background:var(--argile-clair); }
figcaption { font-size:13px; color:var(--encre-doux); margin-top:8px; text-align:center; }

.note { background:var(--argile-clair); border-radius:var(--r-md); padding:16px 20px; margin:22px 0; font-size:16px; }
.note strong { color:#4A1B0C; }
table.cmp { width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; }
table.cmp th, table.cmp td { border:1px solid var(--ligne); padding:10px 12px; text-align:left; }
table.cmp th { background:var(--sable); color:var(--prune); font-weight:500; }

.faq-q { border-bottom:1px solid var(--ligne); padding:14px 0; }
.faq-q summary { font-family:var(--serif); font-size:18px; color:var(--prune); cursor:pointer; }
.faq-q p { margin:10px 0 0; color:var(--encre-doux); }

.sources { background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r-md); padding:16px 20px; margin:28px 0; font-size:14px; }
.sources strong { color:var(--prune); }
.sources ul { margin:8px 0 0; padding-left:20px; }
.sources a { color:var(--prune); }
.verifie { font-size:13px; color:var(--prune); margin-top:8px; }

.cta-box { background:var(--prune); color:var(--sable); border-radius:var(--r-lg); padding:30px 26px; text-align:center; margin:34px 0; }
.cta-box h3 { color:var(--sable); margin:0 0 8px; font-size:22px; }
.cta-box p { margin:0 0 14px; opacity:.92; }
.cta-box .btn { background:var(--argile); color:#4A1B0C; }

.related { margin:30px 0; }
.related h2 { font-size:20px; }
.child-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:14px; }
.child-card { background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r-md); padding:18px 20px; text-decoration:none; display:block; transition:transform .15s ease; }
.child-card:hover { transform:translateY(-3px); }
.child-card h3 { margin:0 0 6px; font-size:18px; color:var(--prune); }
.child-card p { margin:0; font-size:14px; color:var(--encre-doux); }
.child-card .more { display:inline-block; margin-top:8px; font-size:13px; color:#A8624F; font-weight:500; }

.disclaimer-foot { font-size:13px; color:var(--encre-doux); font-style:italic; border-top:1px solid var(--ligne); padding-top:16px; margin-top:34px; }
.blog-foot { border-top:1px solid var(--ligne); margin-top:40px; padding:26px 20px 60px; color:var(--encre-doux); font-size:14px; text-align:center; }
.blog-foot a { color:var(--encre-doux); }

/* ---- Composants visuels (pour rythmer les articles) ---- */
.article-hero { margin:20px 0 10px; border-radius:var(--r-lg); overflow:hidden; line-height:0; }
.article-hero svg { display:block; width:100%; height:auto; }

.pullquote { font-family:var(--serif); font-style:italic; font-size:clamp(20px,3vw,25px); color:var(--prune); border-left:3px solid var(--argile); padding:4px 0 4px 22px; margin:30px 0; line-height:1.4; }

.stat-band { display:flex; flex-wrap:wrap; gap:14px; align-items:center; background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r-md); padding:18px 22px; margin:22px 0; }
.stat-band .big { font-family:var(--serif); font-size:40px; color:var(--prune); line-height:1; }
.stat-band .txt { flex:1; min-width:180px; font-size:15px; color:var(--encre-doux); }
.ten { width:100%; max-width:320px; height:auto; display:block; margin-top:8px; }

.checklist { list-style:none; padding:0; margin:18px 0; }
.checklist li { position:relative; padding:11px 0 11px 38px; border-bottom:1px solid var(--ligne); font-size:17px; line-height:1.5; }
.checklist li::before { content:"\2713"; position:absolute; left:0; top:10px; width:24px; height:24px; border-radius:50%; background:var(--argile-clair); color:#4A1B0C; font-size:13px; text-align:center; line-height:24px; }

.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }
@media (max-width:600px){ .cards3{ grid-template-columns:1fr; } }
.cards3 .c { background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r-md); padding:18px 16px; }
.cards3 .c .step { display:inline-block; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:var(--prune); color:var(--sable); font-family:var(--serif); font-size:15px; margin-bottom:8px; }
.cards3 .c h4 { margin:0 0 5px; color:var(--prune); font-size:17px; }
.cards3 .c p { font-size:14px; color:var(--encre-doux); margin:0; line-height:1.5; }

.duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
@media (max-width:560px){ .duo{ grid-template-columns:1fr; } }
.duo .c { border:1px solid var(--ligne); border-radius:var(--r-md); padding:18px; }
.duo .c.reco { background:#EAF3DE; }
.duo .c h4 { margin:0 0 8px; color:var(--prune); }
.duo .c .tag { display:inline-block; font-size:12px; padding:3px 10px; border-radius:999px; background:var(--argile-clair); color:#4A1B0C; margin-bottom:8px; }

.scale { margin:22px 0; }
.scale-bar { display:flex; height:30px; border-radius:999px; overflow:hidden; border:1px solid var(--ligne); }
.scale-bar div { flex:1; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; }
.scale-bar div{font-weight:500;}
.scale-bar .s1{background:#7E9B82;} .scale-bar .s2{background:#6E8B74;} .scale-bar .s3{background:#7A5566;} .scale-bar .s4{background:var(--prune);}
.scale-leg { font-size:13px; color:var(--encre-doux); margin-top:6px; text-align:center; }

/* Photo hero (piliers) */
.pillar-hero { margin:18px 0 8px; border-radius:var(--r-lg); overflow:hidden; }
.pillar-hero img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center 55%; }
@media (max-width:600px){ .pillar-hero img { aspect-ratio:3/2; } }

/* Bandeau d'autorité (sources) */
.proof-strip { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r-md); padding:12px 18px; margin:18px 0; font-size:13px; color:var(--encre-doux); }
.proof-strip b { color:var(--prune); }

/* Témoignages — à remplir avec de VRAIS verbatims (jamais inventés) */
.testimonials { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:18px 0; }
.testi { background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r-md); padding:18px 20px; }
.testi p { font-family:var(--serif); font-style:italic; color:var(--prune); margin:0 0 8px; font-size:16px; line-height:1.4; }
.testi .who { font-size:13px; color:var(--encre-doux); }

/* Formulaire d'inscription inline (dans les .cta-box) */
.cta-form { display:flex; flex-direction:column; gap:10px; max-width:400px; margin:4px auto 0; }
.cta-form input { width:100%; padding:13px 16px; border:none; border-radius:var(--r-pill); font-size:16px; font-family:var(--sans); background:#fff; color:var(--encre); }
.cta-form input:focus { outline:2px solid var(--argile); }
.cta-form .btn { background:var(--argile); color:#4A1B0C; min-height:48px; }
.cta-success { background:rgba(255,255,255,.16); border-radius:var(--r-md); padding:14px 18px; max-width:400px; margin:4px auto 0; color:var(--sable); font-size:15px; line-height:1.5; }
.cta-success strong { color:#fff; }

/* Header : ombre douce au scroll */
.blog-header.scrolled { box-shadow:0 4px 16px rgba(91,58,75,.07); }
/* (Les fioritures décoratives sont injectées par deco.js, en z-index:-1.) */