/* ════════════════════════════════════════════════════════════════
   Santé pour tous — Blog (liste + article)
   Typographie de lecture longue, dans la charte Liquid Glass.
   Réutilisable par toutes les pages /blog (index + articles).
   ════════════════════════════════════════════════════════════════ */

/* ── fond blanc 80 % derrière le contenu (liste + articles) ── */
body.blog-page .wrap{ background:rgba(255,255,255,.9); border:1px solid var(--line);
  border-radius:24px; padding:30px 30px 40px; margin-top:16px; margin-bottom:32px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(14,64,52,.08); }
@media (max-width:600px){ body.blog-page .wrap{ padding:22px 18px 32px; border-radius:18px; } }

/* ── édition admin (titre + texte) ── */
.bl-editbar{ position:fixed; right:16px; bottom:96px; z-index:8000; display:flex; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:7px 9px;
  box-shadow:0 12px 30px rgba(14,64,52,.18); }
.bl-editbar button{ border:none; cursor:pointer; font:800 13px 'Plus Jakarta Sans',sans-serif;
  padding:9px 16px; border-radius:99px; }
.bl-edit-start{ background:rgba(21,156,151,.12); color:var(--teal); }
.bl-edit-save{ background:var(--grad-brand); color:#fff; }
.bl-edit-cancel{ background:rgba(14,64,52,.06); color:var(--ink-soft); }
[contenteditable="true"].bl-editing{ outline:2px dashed var(--teal); outline-offset:4px; border-radius:8px; }
.bl-edit-hint{ font-size:12px; color:var(--ink-mute); align-self:center; padding:0 4px; }

/* ── liste des articles (/blog) ── */
.bl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:8px; }
.bl-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
  background:linear-gradient(150deg,var(--glass-strong),var(--glass)); border:1px solid var(--line);
  border-radius:20px; box-shadow:0 10px 24px rgba(14,64,52,.08); transition:.16s var(--ease); }
.bl-card:hover{ transform:translateY(-3px); box-shadow:0 20px 38px rgba(14,64,52,.15); }
.bl-card-top{ height:96px; display:grid; place-items:center; font-size:42px;
  background:radial-gradient(120% 120% at 30% 20%, #eafaf3, #d6f0e6); border-bottom:1px solid var(--line); }
.bl-card-b{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.bl-tag{ align-self:flex-start; font:800 10.5px Inter,sans-serif; text-transform:uppercase; letter-spacing:.5px;
  color:var(--teal); background:rgba(21,156,151,.1); padding:3px 9px; border-radius:99px; }
.bl-card h2{ font:800 17px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--ink-strong); margin:0; letter-spacing:-.3px; }
.bl-card p{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0; }
.bl-card .bl-go{ margin-top:4px; font:700 13px Inter,sans-serif; color:var(--teal); }

/* ── article (/blog/<slug>) ── */
.bl-arthead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.bl-back{ display:inline-flex; align-items:center; gap:6px; font:700 13px Inter,sans-serif; color:var(--teal);
  text-decoration:none; }
.bl-back:hover{ text-decoration:underline; }
/* lien rapide (haut-droite) vers le plan */
.bl-quick{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:none; text-decoration:none;
  font:800 13px 'Plus Jakarta Sans',sans-serif; color:#fff; background:var(--grad-brand);
  padding:9px 16px; border-radius:99px; box-shadow:0 8px 18px rgba(21,156,134,.28); }
.bl-quick:hover{ transform:translateY(-1px); }

/* ── plan sur 1 semaine ── */
.bl-plan{ display:flex; flex-direction:column; gap:10px; margin:6px 0 8px; }
.bl-day{ display:flex; gap:14px; align-items:flex-start; background:linear-gradient(150deg,var(--glass-strong),var(--glass));
  border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:0 8px 20px rgba(14,64,52,.06); }
.bl-day .d-n{ flex:0 0 auto; width:46px; text-align:center; font:800 12px Inter,sans-serif; text-transform:uppercase;
  letter-spacing:.4px; color:#fff; background:var(--grad-brand); border-radius:10px; padding:8px 4px; }
.bl-day .d-c{ min-width:0; }
.bl-day .d-t{ font:800 14.5px 'Plus Jakarta Sans',sans-serif; color:var(--ink-strong); margin-bottom:3px; }
.bl-day .d-d{ font-size:14px; line-height:1.55; color:var(--ink-soft); }
.bl-day .d-d b{ color:var(--ink-strong); }
.bl-day .d-act{ display:inline-block; margin-top:5px; font-size:12.5px; font-weight:700; color:var(--teal); }
.bl-art-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-mute);
  font-weight:600; margin:6px 0 20px; }
.bl-art-meta .dot{ opacity:.5; }
.bl-article{ font:400 16.5px/1.75 Inter,sans-serif; color:var(--ink); }
.bl-article > p{ margin:0 0 18px; }
.bl-article h2{ font:800 22px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--ink-strong);
  margin:34px 0 12px; letter-spacing:-.4px; }
.bl-article h3{ font:800 17.5px/1.35 'Plus Jakarta Sans',sans-serif; color:var(--ink-strong); margin:24px 0 8px; }
.bl-article ul,.bl-article ol{ margin:0 0 18px; padding-left:22px; }
.bl-article li{ margin:0 0 8px; }
.bl-article strong{ color:var(--ink-strong); }
.bl-article a{ color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.bl-article blockquote{ margin:0 0 18px; padding:14px 18px; border-left:3px solid var(--leaf);
  background:rgba(86,192,138,.08); border-radius:0 12px 12px 0; font-style:italic; color:var(--ink-soft); }

/* encadré « points clés » / résumé */
.bl-key{ background:linear-gradient(150deg,var(--glass-strong),var(--glass)); border:1px solid var(--line);
  border-radius:16px; padding:16px 20px; margin:0 0 26px; box-shadow:0 8px 20px rgba(14,64,52,.07); }
.bl-key b{ display:block; font:800 13px Inter,sans-serif; text-transform:uppercase; letter-spacing:.5px;
  color:var(--teal); margin-bottom:8px; }
.bl-key ul{ margin:0; padding-left:20px; }
.bl-key li{ font-size:14.5px; line-height:1.55; margin:0 0 6px; color:var(--ink-soft); }

/* CTA vers l'app */
.bl-cta{ margin:30px 0; padding:22px 24px; border-radius:20px; text-align:center;
  background:var(--grad-brand); color:#fff; box-shadow:0 16px 34px rgba(21,156,134,.3); }
.bl-cta h3{ font:800 19px 'Plus Jakarta Sans',sans-serif; margin:0 0 6px; color:#fff; }
.bl-cta p{ font-size:14px; opacity:.95; margin:0 0 14px; }
.bl-cta a{ display:inline-block; background:#fff; color:var(--teal); text-decoration:none;
  font:800 15px 'Plus Jakarta Sans',sans-serif; padding:12px 26px; border-radius:99px; }
.bl-cta a:hover{ transform:translateY(-1px); }

/* avertissement santé en pied d'article */
.bl-disc{ margin:28px 0 0; padding:14px 18px; border-radius:14px; background:rgba(255,158,99,.1);
  border-left:3px solid #FF9E63; font:400 12.5px/1.6 Inter,sans-serif; color:var(--ink); }
.bl-disc b{ color:var(--ink-strong); }

/* FAQ */
.bl-faq details{ border:1px solid var(--line); border-radius:14px; padding:2px 16px; margin-bottom:10px;
  background:rgba(255,255,255,.5); }
.bl-faq summary{ cursor:pointer; font:800 15px 'Plus Jakarta Sans',sans-serif; color:var(--ink-strong);
  padding:14px 0; list-style:none; }
.bl-faq summary::-webkit-details-marker{ display:none; }
.bl-faq summary::after{ content:'+'; float:right; color:var(--teal); font-size:20px; line-height:1; }
.bl-faq details[open] summary::after{ content:'–'; }
.bl-faq details[open] summary{ padding-bottom:6px; }
.bl-faq p{ margin:0 0 14px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }

@media (max-width:600px){
  .bl-article{ font-size:16px; line-height:1.7; }
  .bl-article h2{ font-size:20px; }
}