/* Mon Annexe — styles du blog (complète legal.css, mêmes tokens) */

/* Fond blanc sur les pages d'articles (confort de lecture). La liste /blog/ reste en beige. */
body.article { background: #FFFFFF; }
/* Encarts « en bref » et sommaire : crème translucide pour une meilleure lisibilité sur fond blanc. */
body.article .callout,
body.article .toc { background: #F3ECE09E; }

/* ---------- liste des articles ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 32px 0 0; }
@media (max-width: 680px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-card .pc-img { height: 160px; aspect-ratio: auto; }
}
.post-card { display: flex; flex-direction: column; background: #fff; border: 0; box-shadow: 0 25px 98px rgba(0,0,0,.1); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.post-card:hover { transform: translateY(-3px); border-color: var(--cedar-soft); box-shadow: 0 18px 40px -24px rgba(16,30,22,.4); }
.post-card .pc-img { aspect-ratio: 16/9; background: var(--paper-warm); object-fit: cover; width: 100%; display: block; }
.post-card .pc-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1 0 auto; }
.post-card .cat { font-family: var(--f-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cedar); margin: 0 0 10px; }
.post-card h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.18rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--canopy); margin: 0 0 8px; }
.post-card .excerpt { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 16px; }
.post-card .pc-meta { margin-top: auto; font-size: 0.8rem; color: var(--ink-soft); }
.blog-empty { background: var(--paper-warm); border-radius: var(--r-md); padding: 28px 24px; color: var(--ink-soft); margin-top: 28px; }

/* filtres par catégorie */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 2px; }
.filter-btn { font-family: var(--f-display); font-weight: 600; font-size: 0.88rem; color: var(--ink-soft); background: #fff; border: 1.5px solid var(--line); border-radius: 5px; padding: 8px 16px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.filter-btn:hover { border-color: var(--cedar-soft); color: var(--canopy); }
.filter-btn.active { background: var(--canopy); border-color: var(--canopy); color: #fff; }
.post-card.is-hidden { display: none; }

/* ---------- article ---------- */
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.85rem; color: var(--ink-soft); margin: 14px 0 0; }
.post-hero { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--r-md); margin: 6px 0 26px; }
.post-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--r-md); margin: 26px 0; }
.post-img figcaption, figcaption { font-size: 0.82rem; color: var(--ink-soft); margin-top: 8px; text-align: center; }
/* H3 des articles : plus visibles (légèrement plus gros, plus gras, plus d'air en dessous) */
body.article .doc h3 { font-size: 1.22rem; font-weight: 700; margin: 32px 0 12px; }
/* Strong dans les articles : graisse réduite (semi-bold) pour un soulignement moins agressif */
body.article .doc p strong,
body.article .doc li strong,
body.article .doc .faq strong,
body.article .doc .callout strong { font-weight: 550; }
/* Fil d'Ariane en haut des articles */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 500; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 26px; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--cedar); }
.breadcrumb .sep { color: var(--cedar-soft); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.post-meta .cat { color: var(--cedar); font-weight: 700; }

/* tableaux de contenu (génériques) */
.doc .tbl-scroll { overflow-x: auto; margin: 20px 0; border-radius: var(--r-md); border: 1px solid var(--line); }
.doc table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; }
.doc table.data th, .doc table.data td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc table.data thead th { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-warm); }
.doc table.data tr:last-child td { border-bottom: none; }

/* FAQ (accordéon natif) */
.faq { margin: 20px 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: var(--canopy); padding: 16px 32px 16px 0; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 1.4rem; line-height: 1; color: var(--cedar-soft); transition: transform .2s; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 18px; color: var(--ink-soft); }
.faq details > div p { margin: 0 0 10px; }

/* encadré CTA vers le simulateur */
.cta-box { background: #F3ECE09E; border-radius: var(--r-md); padding: 34px 28px; margin: 38px 0; text-align: center; }
.cta-box h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); margin: 0 0 8px; padding: 0; display: block; }
.cta-box p { color: var(--ink-soft); margin: 0 0 18px; }

/* sommaire */
.toc { background: var(--paper-warm); border-radius: var(--r-md); padding: 18px 22px; margin: 24px 0; font-size: 0.95rem; }
.toc strong { display: block; font-family: var(--f-display); margin-bottom: 8px; color: var(--canopy); }
.toc ul { margin: 0; padding-left: 18px; }
.toc a { color: var(--cedar); }

/* ---------- améliorations éditoriales (août 2026, inspirées du blog Ekko) ---------- */
/* Titre d'article : plus grand, graisse allégée, plus d'air */
body.article .doc h1 { font-size: clamp(2.2rem, 5vw, 3.25rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; }
/* Méta à icônes sous le titre */
.post-meta { align-items: center; gap: 8px 20px; }
.post-meta .m { display: inline-flex; align-items: center; gap: 6px; }
.post-meta .m svg { width: 15px; height: 15px; color: var(--cedar-soft); flex: 0 0 auto; }
/* « Lire la suite » sur les cartes du listing */
.post-card .pc-meta { margin-top: auto; margin-bottom: 10px; }
.post-card .pc-more { font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; color: var(--canopy); display: inline-flex; align-items: center; gap: 7px; }
.post-card .pc-more svg { width: 15px; height: 15px; transition: transform .15s; }
.post-card:hover .pc-more { color: var(--cedar-soft); }
.post-card:hover .pc-more svg { transform: translateX(3px); }
/* « À lire ensuite » en fin d'article */
.related { margin: 46px 0 8px; }
.related > h2 { margin: 0 0 18px; padding-top: 0; font-size: 1.35rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 680px) { .related-grid { grid-template-columns: 1fr; } }
.related .post-card .pc-body { padding: 14px 16px 16px; }
.related .post-card .cat { margin: 0 0 8px; }
.related .post-card .pc-title { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--canopy); margin: 0; display: block; }
/* Fiche auteur en fin d'article */
.post-meta a { color: inherit; text-decoration: none; }
.post-meta a:hover { color: var(--cedar); }
.author-box { display: flex; align-items: flex-start; gap: 18px; background: #F3ECE09E; border-radius: var(--r-md); padding: 24px 26px; margin: 42px 0 8px; }
.ab-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--cedar-soft); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; display: flex; align-items: center; justify-content: center; user-select: none; }
.author-box .ab-name { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--canopy); margin: 0; }
.author-box .ab-role { font-family: var(--f-display); font-weight: 500; font-size: 0.82rem; color: var(--cedar); margin: 2px 0 10px; }
.author-box .ab-bio { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.author-box .ab-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--f-display); font-weight: 600; font-size: 0.85rem; color: var(--cedar); text-decoration: none; }
.author-box .ab-link:hover { color: var(--cedar-soft); }
.author-box .ab-link svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .author-box { flex-direction: column; gap: 12px; padding: 22px 20px; } }

/* ---------- bandeau cookies (pages blog) ---------- */
/* Bandeau cookies en modal centré (force la décision, RGPD ok : Accepter et Refuser au même niveau) */
body.cookie-open::before { content: ""; position: fixed; inset: 0; background: rgba(16,30,22,.55); z-index: 79; backdrop-filter: blur(2px); }
body.cookie-open { overflow: hidden; }
.cookie { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 32px)); z-index: 80; background: #fff; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); overflow: hidden; }
.cookie .ck-inner { padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.cookie p { margin: 0; font-size: 0.93rem; color: var(--ink); line-height: 1.55; }
.cookie a { color: var(--cedar); text-decoration: underline; }
.cookie .ck-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cookie .ck-btn { padding: 11px 22px; font-size: 0.9rem; font-family: var(--f-display); font-weight: 700; border-radius: var(--r-sm); cursor: pointer; border: 0; min-width: 140px; flex: 1 1 auto; }
.cookie .ck-accept { background: var(--cedar-soft); color: #fff; }
.cookie .ck-refuse { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.cookie .ck-refuse:hover { border-color: var(--ink); background: var(--paper-warm); }
.cookie.hide { display: none; }
@media (max-width: 560px) { .cookie .ck-inner { padding: 22px 22px; } .cookie .ck-btns { flex-direction: column-reverse; } .cookie .ck-btn { width: 100%; } }