/* ============================================================
   Blog MesFutursVoisins — expérience éditoriale premium
   Bleu nuit (titres/confiance) · Orange MFV (accent/action)
   S'appuie sur les tokens de styles.css (var(--accent), etc.)
   ============================================================ */
:root {
  --navy: #16233b;
  --navy-2: #23324e;
  --navy-tint: #eef1f6;
  --cream: #faf7f2;
  --accent-tint2: #fbeee2;
  --toc-w: 216px;
  --measure: 720px;
  --shell: 1120px;
}

/* Barre de progression de lecture */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.reading-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

/* Conteneur éditorial */
.post-editorial { max-width: var(--shell); margin: 0 auto; padding: 0 24px 24px; }

/* ---------- HERO ---------- */
.post-hero { max-width: 760px; margin: 0 auto; padding: 40px 0 26px; text-align: left; }
.post-crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.post-crumb a { color: var(--accent); font-weight: 600; }
.post-crumb span { color: var(--line-3); margin: 0 4px; }
.post-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.post-title { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -.018em; color: var(--navy); margin: 0 0 16px; }
.post-chapo { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; max-width: 60ch; }
.post-byline { font-size: 13.5px; color: var(--ink-3); margin: 0; letter-spacing: .01em; }
.post-byline .dot { margin: 0 6px; color: var(--line-3); }

/* Média hero */
.post-hero-media { max-width: var(--shell); margin: 0 auto 8px; }
.post-hero-media img { width: 100%; height: auto; aspect-ratio: 16 / 8.5; object-fit: cover; border-radius: 16px; }
.post-hero-media--ph {
  aspect-ratio: 16 / 8.5; border-radius: 16px; position: relative;
  background: radial-gradient(120% 140% at 20% 10%, var(--navy-2), var(--navy) 70%);
  display: flex; align-items: flex-end; padding: 28px;
}
.post-hero-media--ph::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: radial-gradient(60% 90% at 85% 20%, rgba(194,81,27,.35), transparent 60%);
}
.ph-badge { position: relative; z-index: 1; color: #fff; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; opacity: .9; }

/* ---------- MISE EN PAGE (sommaire + corps) ---------- */
.post-layout {
  display: grid; grid-template-columns: var(--toc-w) minmax(0, var(--measure));
  justify-content: center; gap: 64px; align-items: start;
  margin-top: 36px;
}
.post-layout--wide { grid-template-columns: minmax(0, 780px); }

/* Sommaire sticky */
.post-toc { position: sticky; top: 90px; align-self: start; }
.post-toc-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.post-toc-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--line); }
.post-toc-list a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-3); font-size: 14px; line-height: 1.35; transition: color .15s, border-color .15s; }
.post-toc-list a:hover { color: var(--navy); }
.post-toc-list a.is-active { color: var(--navy); font-weight: 600; border-left-color: var(--accent); }
.toc-num { font-size: 12px; font-weight: 700; color: var(--accent); flex: none; font-variant-numeric: tabular-nums; }
.toc-cta { font-size: 13.5px; font-weight: 600; color: var(--accent); }

/* ---------- CORPS ---------- */
.post-body { font-size: 18px; line-height: 1.78; color: var(--ink-2); }
.post-body > h2 { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.25; color: var(--navy); margin: 46px 0 14px; scroll-margin-top: 90px; }
.post-body > h3 { font-size: 20px; font-weight: 600; color: var(--navy); margin: 30px 0 10px; scroll-margin-top: 90px; }
.post-body h2 a, .post-body h3 a { color: inherit; text-decoration: none; }
.post-body h2 a:hover, .post-body h3 a:hover { color: var(--accent); }
.post-body p { margin: 0 0 18px; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin: 7px 0; }
.post-body strong { color: var(--navy); font-weight: 600; }
.post-body blockquote { margin: 24px 0; padding: 6px 20px; border-left: 3px solid var(--accent); color: var(--ink-3); font-style: italic; }
.post-body hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; }

/* Tableaux */
.post-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15.5px; }
.post-body th, .post-body td { text-align: left; padding: 11px 14px; border: 1px solid var(--line-2); vertical-align: top; }
.post-body thead th { background: var(--navy); color: #fff; font-weight: 600; border-color: var(--navy); }
.post-body tbody tr:nth-child(even) { background: var(--cream); }

/* ---------- ENCADRÉS ---------- */
.callout { margin: 26px 0; border-radius: 12px; padding: 18px 20px 6px; border: 1px solid var(--line-2); background: #fff; }
.callout-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.callout-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.callout-body { font-size: 16px; line-height: 1.7; }
.callout-body > :last-child { margin-bottom: 14px; }
.callout--retenir { background: var(--accent-tint2); border-color: var(--accent-line, #efcdb2); }
.callout--retenir .callout-label { color: var(--accent); }
.callout--savoir { background: var(--navy-tint); border-color: #dfe4ee; }
.callout--savoir .callout-label { color: var(--navy); }
.callout--vigilance { background: #fdf3ec; border-color: #f2c9a6; }
.callout--vigilance .callout-label { color: #b3541a; }
.callout--conseil { background: var(--navy); border-color: var(--navy); }
.callout--conseil .callout-label { color: #f0a97e; }
.callout--conseil .callout-body { color: #e7ecf4; }
.callout--conseil .callout-body strong { color: #fff; }
.callout--conseil a { color: #f0a97e; }

/* ---------- TIMELINE / INFOGRAPHIE ---------- */
.mfv-timeline { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; }
.mfv-timeline li { position: relative; padding: 40px 10px 0; text-align: center; }
.mfv-timeline li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1; }
.mfv-timeline li::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.mfv-timeline li:last-child::after { display: none; }
.mfv-timeline .tl-step { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.mfv-timeline .tl-val { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--accent); }

/* ---------- RÉCAP « À RETENIR » ---------- */
.post-recap { margin: 40px 0 8px; background: var(--navy); color: #fff; border-radius: 16px; padding: 26px 28px; }
.post-recap-title { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #f0a97e; margin: 0 0 14px; }
.post-recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.post-recap-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: #e7ecf4; }
.post-recap-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* ---------- CAPTURE (landing deux zones) ---------- */
.capture { max-width: var(--shell); margin: 48px auto; }
.capture-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 0;
  background: var(--cream); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden;
}
.capture-promise { padding: 40px 40px 36px; display: flex; flex-direction: column; }
.capture-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.capture-title { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--navy); margin: 0 0 10px; }
.capture-lead { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; }
.capture-benefits { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.capture-benefits li { position: relative; padding-left: 28px; font-size: 15.5px; font-weight: 500; color: var(--navy); }
.capture-benefits li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); }
.capture-benefits li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Représentation élégante du guide */
.capture-guide { margin-top: auto; padding-top: 12px; }
.guide-cover { display: inline-flex; flex-direction: column; justify-content: space-between; width: 150px; height: 200px; padding: 18px 16px; border-radius: 6px 12px 12px 6px; background: linear-gradient(150deg, var(--navy-2), var(--navy)); border-left: 6px solid var(--accent); box-shadow: 0 18px 34px -18px rgba(22,35,59,.5); transform: rotate(-3deg); }
.guide-cover-kicker { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f0a97e; }
.guide-cover-title { font-family: var(--serif); font-size: 30px; line-height: 1.05; color: #fff; font-weight: 600; }
.guide-cover-brand { font-size: 10.5px; color: #b8c2d4; letter-spacing: .02em; }

.capture-card { background: #fff; padding: 34px 34px 30px; box-shadow: -1px 0 0 var(--line-2); }
.capture-card-title { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--navy); margin: 0 0 18px; }
.capture-form .field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 14px; }
.capture-form .field .req { color: var(--accent); }
.capture-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.capture-form input, .capture-form select { border: 1px solid var(--line-3); border-radius: 9px; padding: 11px 13px; font-size: 15px; background: #fff; color: var(--ink); width: 100%; font-weight: 400; }
.capture-form input:focus, .capture-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint2); }
.capture .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); margin: 6px 0 16px; line-height: 1.45; font-weight: 400; }
.capture .consent input { margin-top: 2px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.capture-submit { width: 100%; padding: 14px; font-size: 16px; }
.capture-reassure { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--navy); margin: 12px 0 0; }
.capture-legal { text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 8px 0 0; }
.hidden-field { position: absolute; left: -5000px; }

/* ---------- À LIRE ENSUITE ---------- */
.post-next { max-width: var(--shell); margin: 8px auto 0; }
.post-next-inner { border-top: 1px solid var(--line); padding-top: 34px; }
.post-next-title { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--navy); margin: 0 0 20px; }
.next-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.next-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; color: var(--navy); transition: border-color .15s, transform .15s; }
.next-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--navy); }
.next-card--guide { background: var(--navy); border-color: var(--navy); color: #fff; }
.next-card-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.next-card--guide .next-card-kicker { color: #f0a97e; }
.next-card-title { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.25; }
.next-card-desc { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.next-card--guide .next-card-desc { color: #b8c2d4; }

.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn-outline-light:hover { border-color: #fff; color: #fff; }

/* ============================================================
   Index blog + pilier + merci (repris, cohérence éditoriale)
   ============================================================ */
.blog-index { max-width: 1040px; margin: 0 auto; padding: 44px 24px 80px; }
.blog-index-head { max-width: 640px; margin-bottom: 40px; }
.blog-index-head .h-hero { color: var(--navy); }
.blog-section-title { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 18px; color: var(--navy); }
.blog-guides { margin-bottom: 48px; }
.guide-cards, .post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.guide-card, .post-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; color: var(--navy); transition: border-color .15s, transform .15s; }
.guide-card { background: var(--navy); color: #fff; }
.guide-card:hover, .post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.guide-tag, .post-card-pilier { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.guide-card .guide-tag { color: #f0a97e; }
.guide-title, .post-card-title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.25; }
.guide-desc { font-size: 14px; color: #b8c2d4; line-height: 1.5; }
.post-card-desc { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.guide-link { font-size: 14px; font-weight: 600; color: #f0a97e; margin-top: 4px; }
.post-card-meta { font-size: 12.5px; color: var(--ink-3); margin-top: auto; padding-top: 6px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 48px; font-size: 14px; }
.pagination a { color: var(--accent); font-weight: 600; }
.pagination span { color: var(--ink-3); }

.cluster { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.cluster h2 { font-family: var(--serif); font-size: 24px; color: var(--navy); margin: 0 0 16px; }
.cluster-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cluster-list > li { display: flex; flex-direction: column; gap: 3px; }
.cluster-list a { color: var(--navy); font-weight: 600; font-size: 17px; }
.cluster-list a:hover { color: var(--accent); }
.cluster-desc { font-size: 14px; color: var(--ink-3); }

.thanks { max-width: 620px; margin: 0 auto; padding: 70px 24px; text-align: center; }
.thanks .h-hero { color: var(--navy); }
.thanks .lead { margin: 16px auto 28px; }
.thanks-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .post-layout, .post-layout--wide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .post-toc { position: static; top: auto; border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 18px; background: #fff; }
  .post-toc-list { border-left: none; }
  .post-toc-list a { border-left: none; padding-left: 0; }
  .post-toc-list a.is-active { border-left: none; }
  .toc-cta { display: none; }
}
@media (max-width: 860px) {
  .capture-grid { grid-template-columns: 1fr; }
  .capture-card { box-shadow: none; border-top: 1px solid var(--line-2); }
  .capture-guide { display: none; }
}
@media (max-width: 640px) {
  .post-editorial { padding: 0 18px 20px; }
  .post-hero { padding-top: 28px; }
  .post-body { font-size: 17px; }
  .post-body > h2 { font-size: 23px; }
  .mfv-timeline { grid-template-columns: 1fr; gap: 10px; }
  .mfv-timeline li { padding: 8px 0 8px 46px; text-align: left; }
  .mfv-timeline li::before { left: 0; transform: none; }
  .mfv-timeline li::after { display: none; }
  .capture-promise, .capture-card { padding: 26px 22px; }
  .capture-form .field-row { grid-template-columns: 1fr; }
}