/* ============================================================
   Blog — index + article. PARTAGÉ par les 6 thèmes (L8.2).

   Chaque couleur passe par une CHAÎNE DE REPLI de tokens :
     var(--brass, var(--accent, var(--blue, #15776a)))
   editorial expose --brass, minimal/prestige/riviera/carnet --accent,
   corporate --blue. Un thème n'a donc rien à écrire pour que le blog
   épouse sa palette — c'est ce qui rend ce fichier tenable à 6 thèmes.

   .bl-takeaways et .bl-sources sont produites par le MOTEUR d'articles
   (packages/content/src/article.ts) dans bodyHtml : les styler ici est
   un contrat, pas une option.
   ============================================================ */

/* Nav TOUJOURS solide sur le blog (fond clair, pas de héros sombre) —
   piloté par le CSS pour ne jamais dépendre de l'état de scroll du JS. */
.blog-page .nav{background:rgba(246,242,234,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(0,0,0,.4);padding:14px 0}
.blog-page .nav__brand-name{color:var(--ink)}
.blog-page .nav__brand-sub{color:var(--muted)}
.blog-page .nav__links a{color:var(--ink-soft)}
.blog-page .nav__cta{border-color:var(--ink);color:var(--ink)}
.blog-page .nav__cta:hover{background:var(--ink);color:var(--cream)}
.blog-page .nav__burger span{background:var(--ink)}

.bl-wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
.bl-wrap--narrow{max-width:760px}

/* ---- barre de progression de lecture ---- */
.bl-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:transparent;pointer-events:none}
.bl-progress i{display:block;height:100%;width:0;background:var(--brass, var(--accent, var(--blue, #15776a)));transition:width .1s linear}

/* ---- en-tête d'index ---- */
.bl-head{background:var(--cream-2, var(--surface, #f1f1ef));border-bottom:1px solid var(--line);padding:64px 0 52px;text-align:center}
.blog-fixed .bl-head{padding-top:120px}  /* editorial : nav position:fixed → décalage */
.bl-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass, var(--accent, var(--blue, #15776a)));margin-bottom:14px}
.bl-h1{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink);max-width:20ch;margin:0 auto 14px}
.bl-intro{color:var(--muted);font-size:1.08rem;max-width:56ch;margin:0 auto}
.bl-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.bl-pill{font-size:.78rem;font-weight:600;padding:.35em .95em;border-radius:100px;background:var(--white, var(--bg, #fff));border:1px solid var(--line);color:var(--ink-soft)}

/* ---- index : la une ---- */
.bl-list{padding:46px 0 84px}
.bl-lead{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--white, var(--bg, #fff));border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease);margin-bottom:34px}
.bl-lead:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bl-lead__media{position:relative;min-height:280px;background:var(--cream-2, var(--surface, #f1f1ef));overflow:hidden}
.bl-lead__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s var(--ease)}
.bl-lead:hover .bl-lead__media img{transform:scale(1.04)}
.bl-lead__body{padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.bl-lead__title{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.16;color:var(--ink)}
.bl-lead__excerpt{color:var(--muted);font-size:1rem;line-height:1.6}

/* ---- index : mise en page 2 colonnes ---- */
.bl-layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(26px,3.6vw,44px);align-items:start}
.bl-layout__aside{display:grid;gap:18px;position:sticky;top:96px}
.bl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bl-card{display:flex;flex-direction:column;background:var(--white, var(--bg, #fff));border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.bl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bl-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--cream-2, var(--surface, #f1f1ef))}
.bl-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bl-card:hover .bl-card__media img{transform:scale(1.05)}
.bl-card__ph{width:100%;height:100%;min-height:180px;display:grid;place-items:center;font-family:var(--font-serif, var(--font, inherit));font-size:3rem;color:var(--brass, var(--accent, var(--blue, #15776a)));background:var(--cream-2, var(--surface, #f1f1ef))}
.bl-card__cat{position:absolute;top:14px;left:14px;background:rgba(25,23,18,.82);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.4em .9em;border-radius:100px}
.bl-card__cat--static{position:static;display:inline-block;align-self:flex-start}
.bl-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.bl-card__title{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:1.24rem;line-height:1.22;color:var(--ink)}
.bl-card__excerpt{color:var(--muted);font-size:.94rem;line-height:1.55;flex:1}
.bl-card__meta{font-size:.82rem;color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));font-weight:600;letter-spacing:.02em}

/* ---- index : liste dense ---- */
.bl-rows{margin-top:22px;border-top:1px solid var(--line)}
.bl-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .2s}
.bl-row:hover{background:var(--cream-2, var(--surface, #f1f1ef))}
.bl-row__main{display:flex;align-items:baseline;gap:12px;min-width:0;flex-wrap:wrap}
.bl-row__cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brass, var(--accent, var(--blue, #15776a)))}
.bl-row__title{font-family:var(--font-serif, var(--font, inherit));font-size:1.06rem;color:var(--ink)}
.bl-row__meta{font-size:.82rem;color:var(--muted);white-space:nowrap}
.bl-empty{color:var(--muted);padding:40px 0;text-align:center}

/* ---- encarts de colonne (marché, auteur, RSS) ---- */
.bl-market,.bl-author{background:var(--white, var(--bg, #fff));border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-soft)}
.bl-market__h{font-family:var(--font-serif, var(--font, inherit));font-size:1.12rem;color:var(--ink);margin-bottom:14px}
.bl-market__row{display:grid;gap:12px;margin-bottom:12px}
.bl-market__row div{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.bl-market__row div:last-child{border-bottom:0;padding-bottom:0}
.bl-market__row b{font-family:var(--font-serif, var(--font, inherit));font-size:1.5rem;font-weight:500;color:var(--brass, var(--accent, var(--blue, #15776a)));line-height:1}
.bl-market__row span{font-size:.88rem;color:var(--muted)}
.bl-market__note{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.bl-market .btn,.bl-author .btn{width:100%}
.bl-rss{display:block;text-align:center;font-size:.86rem;font-weight:600;color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));text-decoration:none;padding:12px;border:1px dashed var(--line);border-radius:var(--radius)}
.bl-rss:hover{border-color:var(--brass, var(--accent, var(--blue, #15776a)))}

/* ---- bloc auteur ---- */
.bl-author{display:flex;gap:16px;align-items:flex-start;margin-top:34px}
.bl-layout__aside .bl-author{margin-top:0;flex-direction:column}
.bl-author__pic img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.bl-author__txt{flex:1;min-width:0}
.bl-author__name{font-family:var(--font-serif, var(--font, inherit));font-size:1.14rem;color:var(--ink)}
.bl-author__role{color:var(--muted);font-size:.9rem;margin-bottom:8px}
.bl-author__meta{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--muted);margin-bottom:14px}
.bl-author__rating{color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));font-weight:600}
.bl-author__review{border-left:3px solid var(--brass, var(--accent, var(--blue, #15776a)));padding:2px 0 2px 14px;margin:0 0 14px;font-size:.9rem;color:var(--ink-soft);font-style:italic}
.bl-author__review cite{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:6px}

/* ---- article ---- */
.bl-article{padding:40px 0 84px}
.blog-fixed .bl-article{padding-top:112px}
.bl-crumbs{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--muted);margin-bottom:22px;flex-wrap:wrap}
.bl-crumbs a{color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));text-decoration:none}
.bl-crumbs a:hover{text-decoration:underline}
.bl-crumbs__cur{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch}
/* L'en-tête vit DANS la colonne de texte : centré à part, il se décalait du
   corps dès que le sommaire occupait la colonne de gauche. */
.bl-article__head{margin-bottom:8px}
.bl-article__cat{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass, var(--accent, var(--blue, #15776a)));margin-bottom:12px}
.bl-article__title{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px}
.bl-article__meta{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.bl-article__avatar img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.bl-meta__txt{font-size:.9rem;color:var(--muted)}
.bl-meta__txt b{color:var(--ink);font-weight:600}
.bl-meta__sep{margin:0 6px;opacity:.6}
.bl-meta__upd{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.bl-article__lead{font-size:1.16rem;line-height:1.62;color:var(--ink-soft);margin-bottom:28px}
.bl-cover{margin:0 0 36px;border-radius:var(--radius-lg);overflow:hidden;max-height:460px}
.bl-cover img{width:100%;height:100%;object-fit:cover}

/* ---- corps : sommaire collant + prose ---- */
.bl-body{display:grid;grid-template-columns:230px minmax(0,760px);gap:clamp(24px,4vw,56px);justify-content:center;align-items:start}
.bl-body__aside{position:sticky;top:96px}
.bl-toc{border-left:2px solid var(--line);padding-left:16px}
.bl-toc__h{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bl-toc ol{list-style:none;display:grid;gap:8px;counter-reset:toc}
.bl-toc a{font-size:.88rem;color:var(--muted);text-decoration:none;line-height:1.35;display:block;transition:color .2s}
.bl-toc a:hover{color:var(--ink)}
.bl-toc a.on{color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));font-weight:600}

.bl-prose{font-size:1.06rem;line-height:1.75;color:var(--ink-soft)}
.bl-prose h2{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.2;color:var(--ink);margin:2.2rem 0 .9rem;scroll-margin-top:100px}
.bl-prose h3{font-weight:700;font-size:1.16rem;color:var(--ink);margin:1.7rem 0 .6rem}
.bl-prose p{margin-bottom:1.1rem}
.bl-prose a{color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));text-decoration:underline;text-underline-offset:2px}
.bl-prose strong{color:var(--ink);font-weight:700}
.bl-prose ul,.bl-prose ol{margin:0 0 1.2rem 1.2rem;display:grid;gap:.5rem}
.bl-prose li{padding-left:.2rem}
.bl-prose blockquote{border-left:3px solid var(--brass, var(--accent, var(--blue, #15776a)));background:var(--cream-2, var(--surface, #f1f1ef));padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:1.6rem 0;font-style:italic;color:var(--ink)}
.bl-prose blockquote p:last-child{margin-bottom:0}
.bl-prose img{border-radius:var(--radius);margin:1.6rem 0;width:100%}
.bl-prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem;display:block;overflow-x:auto}
.bl-prose th,.bl-prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.bl-prose th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.bl-prose tbody tr:hover{background:var(--cream-2, var(--surface, #f1f1ef))}

/* Encarts produits par le moteur (article.ts) + encarts rédactionnels. */
.bl-takeaways,.bl-callout{background:var(--cream-2, var(--surface, #f1f1ef));border:1px solid var(--line);border-left:4px solid var(--brass, var(--accent, var(--blue, #15776a)));border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:1.8rem 0}
.bl-takeaways p{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));margin-bottom:10px}
.bl-takeaways ul{margin:0 0 0 1.1rem;display:grid;gap:.5rem}
.bl-takeaways li{color:var(--ink);font-weight:500}
.bl-callout--warn{border-left-color:#d9822b;background:#fdf6e3}
.bl-callout--key{border-left-color:var(--brass, var(--accent, var(--blue, #15776a)))}

.bl-sources{margin:2.4rem 0 0;padding-top:20px;border-top:1px solid var(--line)}
.bl-sources h2{font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-family:inherit}
.bl-sources ul{list-style:none;display:grid;gap:8px;margin:0}
.bl-sources li{font-size:.88rem;color:var(--muted)}
.bl-sources a{color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));text-decoration:none}
.bl-sources a:hover{text-decoration:underline}

/* ---- FAQ ---- */
.bl-faq{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:26px}
.bl-faq__h{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:1.5rem;color:var(--ink);margin-bottom:14px}
.bl-faq__item{border-bottom:1px solid var(--line)}
.bl-faq__item summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.bl-faq__item summary::-webkit-details-marker{display:none}
.bl-faq__item summary::after{content:"+";color:var(--brass, var(--accent, var(--blue, #15776a)));font-size:1.3rem;line-height:1}
.bl-faq__item[open] summary::after{content:"–"}
.bl-faq__a{padding:0 0 16px;color:var(--ink-soft);font-size:.98rem;line-height:1.65}

/* ---- partage ---- */
.bl-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2.4rem 0 0;padding-top:20px;border-top:1px solid var(--line)}
.bl-share__h{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.bl-share button{font:inherit;font-size:.84rem;font-weight:600;padding:.45em 1em;border-radius:100px;border:1px solid var(--line);background:var(--white, var(--bg, #fff));color:var(--ink-soft);cursor:pointer;transition:.2s}
.bl-share button:hover{border-color:var(--brass, var(--accent, var(--blue, #15776a)));color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)))}
.bl-share button.ok{border-color:var(--brass, var(--accent, var(--blue, #15776a)));color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)))}

/* ---- CTA contextuel ---- */
.bl-cta{background:var(--cream-2, var(--surface, #f1f1ef));border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;margin-top:2.4rem;text-align:center}
.bl-cta__h{font-family:var(--font-serif, var(--font, inherit));font-size:1.35rem;color:var(--ink);margin-bottom:8px}
.bl-cta__lead{color:var(--muted);font-size:.96rem;max-width:52ch;margin:0 auto 16px}

/* ---- maillage : biens + articles ---- */
.bl-rel{margin-top:2.8rem}
.bl-rel__h,.bl-also__h{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:1.4rem;color:var(--ink);margin-bottom:16px}
.bl-rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bl-rel__item{display:flex;flex-direction:column;background:var(--white, var(--bg, #fff));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s}
.bl-rel__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.bl-rel__media{aspect-ratio:4/3;background:var(--cream-2, var(--surface, #f1f1ef));overflow:hidden;display:block}
.bl-rel__media img{width:100%;height:100%;object-fit:cover}
.bl-rel__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.bl-rel__title{font-weight:700;font-size:.94rem;color:var(--ink)}
.bl-rel__loc{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--muted)}
.bl-rel__loc svg{stroke:currentColor;fill:none}
.bl-rel__price{font-weight:700;color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));font-size:.96rem}

.bl-also{margin-top:2.8rem;border-top:1px solid var(--line);padding-top:26px}
.bl-also__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bl-also__item{display:flex;flex-direction:column;gap:5px;padding:16px 18px;background:var(--white, var(--bg, #fff));border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:.25s}
.bl-also__item:hover{border-color:var(--brass, var(--accent, var(--blue, #15776a)))}
.bl-also__cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brass, var(--accent, var(--blue, #15776a)))}
.bl-also__title{font-family:var(--font-serif, var(--font, inherit));font-size:1.02rem;line-height:1.25;color:var(--ink)}
.bl-also__meta{font-size:.78rem;color:var(--muted)}

/* ---- navigation précédent / suivant ---- */
.bl-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2.4rem}
.bl-nav a{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:.25s}
.bl-nav a:hover{border-color:var(--brass, var(--accent, var(--blue, #15776a)))}
.bl-nav span{font-size:.78rem;color:var(--muted)}
.bl-nav b{font-family:var(--font-serif, var(--font, inherit));font-weight:500;font-size:1rem;color:var(--ink);line-height:1.25}
.bl-nav__next{text-align:right;align-items:flex-end}

.bl-back{margin-top:2.4rem;text-align:center}
.bl-back a{color:var(--brass-dark, var(--accent-dark, var(--blue-dark, #0f5d53)));font-weight:600;text-decoration:none}

/* ---- responsive ---- */
@media(max-width:1080px){
  .bl-body{grid-template-columns:minmax(0,760px);justify-content:center}
  .bl-body__aside{display:none}          /* le sommaire collant n'a plus de colonne */
  .bl-layout{grid-template-columns:1fr}
  .bl-layout__aside{position:static;grid-template-columns:repeat(2,1fr);display:grid}
  .bl-layout__aside .bl-rss{grid-column:1/-1}
}
@media(max-width:820px){
  .bl-lead{grid-template-columns:1fr}
  .bl-lead__media{min-height:220px;aspect-ratio:16/9}
  .bl-grid,.bl-rel__grid,.bl-also__grid{grid-template-columns:1fr}
  .bl-layout__aside{grid-template-columns:1fr}
  .bl-nav{grid-template-columns:1fr}
  .bl-nav__next{text-align:left;align-items:flex-start}
  .bl-head{padding:44px 0 38px}
  .blog-fixed .bl-head{padding-top:100px}
  .bl-author{flex-direction:column}
  .bl-row{flex-direction:column;gap:6px}
}