/* =========================================================================
   Indé Après 40 — design system
   Sobre, éditorial, crédible. Polices système (zéro requête réseau).
   ========================================================================= */
:root{
  --paper:#FCFBF9; --surface:#FFFFFF; --ink:#18222E; --ink-soft:#52616F;
  --line:#E7E1D7; --accent:#0F6E5E; --accent-dark:#0B5446; --accent-tint:#E9F1EE;
  --sand:#FBF4E8; --sand-line:#EBD9B9; --sand-ink:#7A5523;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:18px;line-height:1.7;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent-dark);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:10px;background:#fff;padding:8px 14px;border:1px solid var(--line);border-radius:8px;z-index:50}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(252,251,249,.92);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line)}
.site-head .bar{max-width:1040px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;
  background:var(--accent);color:#fff;font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.5px}
.brand .bn{font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.1;display:block}
.brand .bs{font-size:11px;font-weight:500;color:var(--ink-soft);letter-spacing:.2px}
.nav{display:flex;gap:20px;font-size:14.5px}
.nav a{color:var(--ink-soft);text-decoration:none}
.nav a:hover{color:var(--accent-dark)}
@media(max-width:720px){.nav{display:none}}

/* ---------- Article ---------- */
main{padding:34px 0 10px}
.crumb{font-size:13.5px;color:var(--ink-soft);margin-bottom:22px}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.kicker{color:var(--accent-dark);font-weight:700;font-size:13px;letter-spacing:.8px;text-transform:uppercase}
h1{font-family:var(--serif);font-weight:700;font-size:2.35rem;line-height:1.18;letter-spacing:-.4px;margin:.35em 0}
.lede{font-size:1.2rem;color:var(--ink-soft);margin:0 0 26px}
.byline{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--ink-soft);
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline .who{font-weight:600;color:var(--ink)}

/* ---------- Prose (corps rendu depuis Markdown) ---------- */
.prose{font-size:1.06rem}
.prose>p,.prose>ul,.prose>ol{margin:.95em 0}
.prose h2{font-family:var(--serif);font-weight:700;font-size:1.62rem;line-height:1.25;letter-spacing:-.3px;margin:2.2em 0 .2em;scroll-margin-top:80px}
.prose h2::after{content:"";display:block;width:48px;height:3px;background:var(--accent);border-radius:2px;margin:.55em 0 .1em}
.prose h3{font-size:1.18rem;margin:1.7em 0 .3em}
.prose strong{font-weight:680}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose blockquote{margin:1.4em 0;padding:.4em 0 .4em 18px;border-left:3px solid var(--accent);color:var(--ink-soft);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* ---------- Réponse rapide / TL;DR (GEO) ---------- */
.tldr{background:var(--accent-tint);border:1px solid #CFE3DC;border-radius:14px;padding:18px 22px;margin:26px 0}
.tldr .t{font-weight:700;color:var(--accent-dark);font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px}
.tldr p{margin:.35em 0}

/* ---------- Sommaire ---------- */
.toc{border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:26px 0;background:var(--surface)}
.toc .t{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:5px 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---------- Chiffre-clé + source ---------- */
.figure{display:flex;gap:16px;align-items:flex-start;border-left:4px solid var(--accent);background:var(--surface);
  padding:16px 18px;border-radius:0 12px 12px 0;margin:22px 0;box-shadow:0 1px 0 var(--line)}
.figure .num{font-family:var(--serif);font-weight:700;font-size:1.9rem;color:var(--accent-dark);line-height:1.05;white-space:nowrap}
.figure .txt{font-size:15.5px;color:var(--ink)}
.figure .src{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-soft)}

/* ---------- Tableaux ---------- */
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{background:#F4F1EB;font-size:13px;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-soft)}
.prose tbody tr td:first-child{font-weight:600}

/* ---------- Étapes ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:18px 0}
.steps li{position:relative;padding:4px 0 18px 52px;margin:0}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;font-family:var(--serif);font-weight:700;display:grid;place-items:center}
.steps li::after{content:"";position:absolute;left:16px;top:36px;bottom:2px;width:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps li strong{display:block;margin-bottom:2px}

/* ---------- Exemple chiffré / note ---------- */
.example,.note{background:#F4F1EB;border-radius:14px;padding:18px 20px;margin:22px 0}
.note{background:var(--accent-tint)}
.example .t,.note .t{font-weight:700;font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.example .res{font-weight:700;color:var(--accent-dark)}
.example p{font-variant-numeric:tabular-nums}

/* ---------- FAQ ---------- */
.faq h2{margin-bottom:.3em}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0 18px;margin:10px 0;background:var(--surface)}
.faq summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:650;font-size:1.04rem;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:6px 0 16px;color:var(--ink)}
.faq .a p:first-child{margin-top:0}

/* ---------- Encart affiliation ---------- */
.promo{background:var(--sand);border:1px solid var(--sand-line);border-radius:16px;padding:24px 24px 22px;margin:34px 0}
.promo .tag{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--sand-ink);margin-bottom:8px}
.promo h3{font-family:var(--serif);margin:0 0 .3em;font-size:1.3rem}
.promo p{margin:.3em 0 0;color:#473d2c}
.promo ul{margin:12px 0 0;padding-left:20px;color:#473d2c}
.promo ul li{margin:5px 0}
.promo .cta{display:inline-block;margin-top:16px;background:var(--accent);color:#fff;text-decoration:none;font-weight:650;padding:12px 22px;border-radius:10px}
.promo .cta:hover{background:var(--accent-dark);color:#fff}
.promo .disc{display:block;margin-top:12px;font-size:12px;color:#8a7c63}

/* ---------- À lire ensuite ---------- */
.related{border-top:1px solid var(--line);margin-top:40px;padding-top:24px}
.related .t{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface);transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card .k{font-size:12px;color:var(--accent-dark);font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.card b{display:block;margin-top:5px;font-size:1.02rem;line-height:1.3}

/* ---------- Sources ---------- */
.sources{font-size:14px;color:var(--ink-soft);margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
.sources .t{font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:12.5px;margin-bottom:6px}
.sources ol{margin:0;padding-left:20px}
.sources li{margin:4px 0}

/* ---------- Footer ---------- */
footer{background:#11201C;color:#C9D6D1;margin-top:54px;padding:40px 0 30px}
footer .cols{max-width:1040px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
@media(max-width:680px){footer .cols{grid-template-columns:1fr;gap:22px}}
footer h4{color:#fff;font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin:0 0 12px}
footer a{color:#A9BDB6;text-decoration:none;display:block;margin:7px 0;font-size:14.5px}
footer a:hover{color:#fff}
footer .ft-brand b{color:#fff;font-size:17px}
footer .ft-brand p{color:#9fb3ac;font-size:14.5px;max-width:34ch;margin:.6em 0 0}
footer .fine{max-width:1040px;margin:26px auto 0;padding:18px 22px 0;border-top:1px solid #243a34;font-size:13px;color:#8aa099}

/* ---------- Accueil ---------- */
.hero{padding:54px 0 30px;border-bottom:1px solid var(--line)}
.hero h1{font-size:2.7rem;max-width:16ch}
.hero .lede{font-size:1.3rem;max-width:42ch;margin-top:.4em}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-block;text-decoration:none;font-weight:650;padding:13px 24px;border-radius:10px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--accent-dark);border:1px solid var(--accent)}
.btn-ghost:hover{background:var(--accent-tint)}
.silo{padding:40px 0}
.silo h2{font-family:var(--serif);font-size:1.7rem;margin:0 0 6px}
.silo .sub{color:var(--ink-soft);margin:0 0 20px}
.silo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.silo-grid{grid-template-columns:1fr}}
.intro-wrap{max-width:760px}
.feature{border:1px solid var(--line);border-radius:14px;padding:22px 22px;background:var(--surface)}
.feature .k{font-size:12px;color:var(--accent-dark);font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.feature h3{font-family:var(--serif);font-size:1.22rem;margin:8px 0 6px;line-height:1.25}
.feature h3 a{text-decoration:none;color:var(--ink)}
.feature h3 a:hover{color:var(--accent-dark)}
.feature p{margin:0;color:var(--ink-soft);font-size:15.5px}
.band{background:var(--accent-tint);border-top:1px solid #CFE3DC;border-bottom:1px solid #CFE3DC}

/* ---------- Calculateurs ---------- */
.calc{border:1px solid var(--line);border-radius:14px;padding:20px;margin:24px 0;background:var(--surface)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.calc-grid{grid-template-columns:1fr}}
.calc label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.calc input,.calc select{font:inherit;font-weight:500;color:var(--ink);padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.calc input:focus,.calc select:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.calc-result{margin-top:16px;padding:16px 18px;background:var(--accent-tint);border-radius:10px}
.calc-result .calc-out{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--accent-dark)}
.calc-result .calc-detail{display:block;margin-top:6px;font-size:14px;color:var(--ink)}
.calc-note{font-size:12.5px;color:var(--ink-soft);margin:10px 0 0}

/* ---------- Newsletter ---------- */
.newsletter{background:#11201C;color:#fff;border-radius:16px;padding:26px 24px;margin:36px 0}
.newsletter h3{font-family:var(--serif);margin:0 0 .25em;font-size:1.3rem;color:#fff}
.newsletter p{margin:0 0 14px;color:#C9D6D1;font-size:15px}
.newsletter form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.newsletter input[type=email]{flex:1 1 240px;font:inherit;padding:12px 14px;border:1px solid #2f4a43;border-radius:10px;background:#0c1714;color:#fff}
.newsletter input[type=email]::placeholder{color:#7f968e}
.newsletter .nl-msg{flex-basis:100%;font-size:13.5px;color:#bfe3d8;min-height:1px}

/* ---------- Recherche ---------- */
.search input[type=search]{width:100%;font:inherit;font-size:1.1rem;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.search input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.search-results{margin-top:18px;display:grid;gap:10px}
.search-hit{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:13px 16px;background:var(--surface)}
.search-hit:hover{border-color:var(--accent)}
.search-hit .k{font-size:11.5px;color:var(--accent-dark);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.search-hit b{display:block;margin:3px 0;font-size:1.05rem}
.search-hit .d{display:block;font-size:14px;color:var(--ink-soft)}
.search-empty{color:var(--ink-soft)}

/* ---------- Téléchargement (aimant à prospects) ---------- */
.download{display:flex;gap:16px;align-items:center;border:1px dashed var(--accent);background:var(--accent-tint);border-radius:14px;padding:18px 20px;margin:26px 0}
.download .ico{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--accent-dark);line-height:1}
.download .dl-body{flex:1}
.download h3{margin:0 0 3px;font-size:1.1rem;font-family:var(--serif)}
.download p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.download .btn{white-space:nowrap}
@media(max-width:560px){.download{flex-direction:column;align-items:flex-start}}