/* Feuille de style partagée · articles du blog Au Clair Digital */
:root {
  --night: #1F2F47; --night-soft: #2A3D5A; --night-deep: #15243A;
  --gold: #D4A95A; --gold-soft: #B89048; --sage: #7B9E89;
  --cream: #F4ECD8; --cream-soft: #EBE3CF; --cream-muted: #C9C0AE;
  --paper: #FBF8F0; --charcoal: #2A2A2A; --ash: #6B7680; --border: #E4DECB;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--charcoal); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }

.btn { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; padding: 13px 24px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s ease; border: 1px solid transparent; }
.btn-primary { background: var(--night); color: var(--cream); }
.btn-primary:hover { background: var(--night-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--night); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--night); }
.btn-gold { background: var(--gold); color: var(--night-deep); }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-1px); }

/* Navbar */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(251, 248, 240, 0.85); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); }
.navbar .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { width: 40px; height: 40px; flex-shrink: 0; display: block; }
.logo-word { display: inline-flex; align-items: baseline; gap: 6px; }
.logo-au, .logo-digital { font-size: 15px; letter-spacing: 3px; color: var(--night); font-weight: 700; }
.logo-clair { font-family: var(--serif); font-size: 32px; color: var(--gold-soft); font-weight: 600; font-style: italic; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a.nav-link { font-size: 14px; color: var(--ash); transition: color 0.25s ease; }
.nav-links a.nav-link:hover { color: var(--night); }

/* Article */
.article { padding: 48px 0 40px; }
.article .wrap { max-width: 720px; }
.article-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ash); margin-bottom: 28px; transition: gap 0.2s ease, color 0.2s ease; }
.article-back:hover { color: var(--night); gap: 10px; }
.article-cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); }
.article h1 { font-family: var(--sans); font-weight: 800; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -0.025em; color: var(--night); margin: 14px 0 18px; }
.article-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ash); padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.article-lead { font-size: 19px; line-height: 1.6; color: var(--charcoal); margin-bottom: 30px; }
.article-body h2 { font-family: var(--sans); font-weight: 800; font-size: clamp(21px, 2.8vw, 27px); color: var(--night); letter-spacing: -0.018em; line-height: 1.25; margin: 38px 0 14px; }
.article-body h3 { font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--night); margin: 26px 0 10px; }
.article-body p { font-size: 16.5px; color: #3A434F; line-height: 1.72; margin-bottom: 16px; }
.article-body strong { color: var(--night); font-weight: 700; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.article-body li { position: relative; padding-left: 28px; font-size: 16.5px; color: #3A434F; line-height: 1.6; margin-bottom: 10px; }
.article-body ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.article-body ol { counter-reset: st; }
.article-body ol li { counter-increment: st; }
.article-body ol li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--night); color: var(--gold); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.article-recap { background: var(--cream); border: 1px solid var(--border); border-radius: 14px; padding: 24px 26px; margin: 32px 0; }
.article-recap h3 { margin-top: 0; }

/* CTA fin d'article */
.article-cta { background: var(--night); color: var(--cream); border-radius: 16px; padding: 36px 34px; text-align: center; margin-top: 44px; }
.article-cta h2 { font-family: var(--sans); font-weight: 800; font-size: 24px; color: var(--cream); letter-spacing: -0.02em; margin-bottom: 10px; }
.article-cta h2 em { font-style: normal; color: var(--gold); }
.article-cta p { color: var(--cream-muted); font-size: 15.5px; margin-bottom: 22px; }
.article-cta-row { display: inline-flex; gap: 13px; flex-wrap: wrap; justify-content: center; }
.article-cta .btn-ghost { color: var(--cream); border-color: rgba(244,236,216,0.3); }
.article-cta .btn-ghost:hover { border-color: var(--cream); }

/* Footer */
.footer { background: var(--night-deep); color: var(--cream-muted); padding: 48px 0 30px; text-align: center; margin-top: 60px; }
.footer .logo { margin-bottom: 22px; justify-content: center; }
.footer .logo .logo-au, .footer .logo .logo-digital { color: var(--cream-muted); }
.footer .logo .logo-clair { color: var(--gold); }
.footer .logo-mark .lm-bg { fill: transparent; }
.footer-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 13px; padding: 22px 0; border-top: 1px solid rgba(244,236,216,0.1); border-bottom: 1px solid rgba(244,236,216,0.1); }
.footer-links a { color: var(--cream-muted); transition: color 0.25s ease; }
.footer-links a:hover { color: var(--gold); }
.footer-meta { font-size: 11.5px; color: rgba(244,236,216,0.4); margin-top: 22px; letter-spacing: 0.04em; }

.nav-social { display: flex; align-items: center; gap: 18px; }
.nav-social a { color: var(--ash); font-size: 21px; line-height: 1; display: inline-flex; transition: color 0.25s ease, transform 0.25s ease; }
.nav-social a:hover { color: var(--gold-soft); transform: translateY(-2px); }

@media(max-width: 760px) { .wrap { padding: 0 22px; } .nav-links a.nav-link { display: none; } .nav-social { display: none; } }