/* Pages blog, outils et institutionnelles : habillage « accueil v3 » par-dessus landing.css / blog.css / outils.css
   (blanc, encre, vert d'eau, jaune doux, rose du logo ; plus de grain, de bords noirs épais ni d'ombres décalées). */
:root {
    --ink: #26323F; --ink-soft: #5E6B78; --cream: #FFFFFF; --paper: #FFFFFF; --line: #E4E8EC;
    --yellow: #FFC845; --yellow-soft: #FFF1CC; --pink: #F1929C; --pink-soft: #FDE6EE; --lilac: #CFC8F4; --lilac-soft: #EEE9FC;
    --blue: #0A8070; --blue-soft: #EEE9FC; --green: #0A8070; --green-soft: #D9F6EF; --teal: #12B5A0; --coral: #F1929C;
    --r-card: 24px; --r-md: 16px; --pop: 0 14px 36px rgba(38, 50, 63, 0.07);
    --teal-ink: #0A8070; --teal-soft: #D9F6EF; --bg-soft: #F6F8FA; --line-strong: #CBD3DA;
}
body { background: #fff; }
body::before { display: none; }
h1, h2, h3, .display { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--teal); }

/* Barre du haut */
.lp-nav, .blog-nav { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lp-nav .lp-wrap { padding-top: 12px; padding-bottom: 12px; }
.lp-links a { font-weight: 600; color: var(--ink-soft); }
.lp-links a:hover { background: var(--bg-soft); color: var(--ink); }
.lp-brand { font-weight: 700; }

/* Boutons : pastilles pleines, sans ombre décalée ni flèche jaune */
.btn, .btn-ghost { border: 2px solid transparent; box-shadow: none; padding: 11px 22px; font: 600 0.92rem 'Poppins', 'Montserrat', system-ui, sans-serif; gap: 8px; }
.btn { background: var(--ink); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn:hover, .btn-ghost:hover { transform: translateY(-1px); box-shadow: none; }
.btn:active, .btn-ghost:active { transform: none; box-shadow: none; }
.btn .arrow, .btn-ghost .arrow { display: none; }
.btn-yellow { background: var(--teal); color: #fff; box-shadow: 0 8px 22px rgba(18, 181, 160, 0.28); }
.lp-nav .btn, .lp-nav .btn-ghost { padding: 9px 20px; font-size: 0.88rem; box-shadow: none; }
.lp-nav .btn.btn-yellow { box-shadow: none; }

/* Étiquettes et titres */
.lp-eyebrow { background: none; border: 0; padding: 0; border-radius: 0; font: 700 0.76rem 'Poppins', sans-serif; letter-spacing: 0.1em; color: var(--teal-ink); margin-bottom: 10px; }
.lp-title, .blog-hero h1, .article h1 { text-transform: none; letter-spacing: -0.02em; line-height: 1.12; }
.article h2 { text-transform: none; font-size: 1.45rem; }
.lp-sub, .blog-hero p, .article .chapo, .article .meta { font-weight: 500; }
.article .meta { color: var(--ink-soft); }

/* Index du blog / des outils */
.blog-hero { background: linear-gradient(180deg, var(--teal-soft) 0, #fff 100%); }
.blog-card { border: 1.5px solid var(--line); background: #fff; box-shadow: var(--pop); }
.blog-card:hover { border-color: var(--teal); }
.blog-card .tag { background: var(--teal-soft); border: 0; color: var(--teal-ink); font-weight: 700; }
.blog-card p { font-weight: 500; }
.blog-card .go { color: var(--teal-ink); font-weight: 700; }

/* Articles */
.article p, .article li { font-weight: 500; }
.article a { color: var(--teal-ink); }
.article .box { border: 0; box-shadow: none; background: var(--yellow-soft); }
.article .box.b { background: var(--lilac-soft); }
.article .box.g { background: var(--teal-soft); }
.article table { border-collapse: separate; border-spacing: 0; display: block; overflow-x: auto; }
.article table th, .article table td { border: 0; border-bottom: 1px solid var(--line); }
.article table th { background: var(--bg-soft); font-weight: 700; }
.article .faq-item { border: 1.5px solid var(--line); background: #fff; }
.article .cta { border: 0; background: var(--ink); color: #fff; box-shadow: none; }
.article .cta h3 { color: #fff; text-transform: none; }
.article .cta p { color: #fff; }
.article .cta .btn, .article .cta .btn-yellow { background: var(--teal); color: #fff; }
.article .note { border-top: 1px dashed var(--line-strong); }
.article .back { color: var(--ink-soft); }

/* Outils (calculateurs, modèles) */
.calc, .tool-card, .bulletin { border: 1.5px solid var(--line); box-shadow: var(--pop); }
.calc input, .calc select { border: 1.5px solid var(--line-strong); }
.calc input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.calc-big { background: var(--yellow-soft); border: 0; }
.calc-gate { background: var(--bg-soft); border: 1.5px dashed var(--line-strong); }
.bul-table .bul-sub td { background: var(--bg-soft); }
.bul-table .bul-net td { background: var(--yellow-soft); }

/* Bas de page : blanc, filet gris */
.lp-foot { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
.lp-foot .lp-brand { color: var(--ink); background: none; padding: 0; }
.lp-foot p { opacity: 1; color: var(--ink-soft); font-weight: 500; }
.lp-foot nav { font-weight: 600; }
.lp-foot nav a { opacity: 1; color: var(--ink-soft); }
.lp-foot nav a:hover { color: var(--ink); }
.lp-copy { opacity: 1; color: var(--ink-soft); border-top: 1px solid var(--line); font-weight: 500; }
@media (max-width: 520px) { .lp-logo { height: 30px; } .lp-nav .lp-wrap { gap: 8px; } .lp-nav .btn { padding: 8px 14px; font-size: 0.8rem; white-space: nowrap; } }