/* Styles du blogue (mêmes couleurs et typographie que la page d'accueil) */
:root {
  --paper: #F3F0E8;
  --paper-2: #E9E5DA;
  --ink: #17231C;
  --ink-2: #4A544D;
  --ink-3: #7B837D;
  --rule: #D3CEC1;
  --green: #16402C;
  --green-2: #0F2F20;
  --lime: #DCEB5A;
  --lime-2: #CADB43;
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --pad-x: clamp(16px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad-x); }
.narrow { max-width: 780px; }
.lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); max-width: 60ch; }

/* Navigation */
nav { position: sticky; top: 0; z-index: 50; background: var(--green); padding: 10px var(--pad-x); display: flex; align-items: center; justify-content: space-between; }
nav .logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-text { color: var(--paper); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-text:hover { color: var(--lime); }
nav :focus-visible { outline-color: var(--lime); }

/* Boutons */
.btn { display: inline-block; text-align: center; background: var(--lime); color: var(--green-2); padding: 12px 22px; font: 600 15px var(--font); text-decoration: none; border-radius: 999px; transition: background 0.15s; }
.btn::after { content: ' →'; }
.btn:hover { background: var(--lime-2); }

/* Index */
.blog-head { padding: 56px 0 24px; }
.blog-head h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 14px; }
.blog-list { padding: 16px 0 72px; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,47,32,0.1); }
.card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card > div { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card h2 { font-size: 22px; margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 16px; flex: 1; }
.card .more { margin-top: 14px; font-weight: 600; color: var(--green); font-size: 15px; }
.card .more::after { content: ' →'; }

/* Article */
.post { padding: 40px 0 72px; }
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-3); }
.post h1 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 14px; }
.meta { font-size: 15px; color: var(--ink-3); margin-bottom: 28px; }
.post-hero { margin: 0 auto 36px; }
.post-hero img { border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; max-width: 1016px; margin: 0 auto; }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 40px 0 14px; }
.prose p { color: var(--ink-2); margin-bottom: 16px; }
.prose ul { margin: 0 0 18px 22px; color: var(--ink-2); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { font-weight: 500; text-underline-offset: 3px; }
.prose .note { font-size: 15px; color: var(--ink-3); border-left: 3px solid var(--rule); padding-left: 14px; margin-top: 28px; }

.cta-box { margin: 48px 0 8px; background: var(--green); color: var(--paper); border-radius: 12px; padding: 28px 28px 30px; }
.cta-box h2 { margin: 0 0 10px; font-size: 26px; color: var(--paper); }
.cta-box p { color: rgba(243,240,232,0.8); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.cta-box .link { color: var(--lime); font-weight: 600; }

.related { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 24px; }
.related h2 { margin-top: 0; font-size: 22px; }
.related ul { list-style: none; margin-left: 0; }
.related li { padding: 10px 0; border-bottom: 1px solid var(--rule); }

/* Pied de page */
footer { background: var(--green-2); padding: 32px var(--pad-x); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; padding: 0; }
footer img { height: 34px; width: auto; margin-bottom: 8px; }
footer p { font-size: 14px; color: rgba(243,240,232,0.6); }
footer a { color: rgba(243,240,232,0.85); }

@media (max-width: 768px) {
  nav .logo img { height: 32px; }
  .nav-links { gap: 14px; }
  nav .btn { padding: 9px 14px; font-size: 13px; }
  .cards { grid-template-columns: 1fr; }
  .cta-box { padding: 22px 20px 24px; }
  .cta-row .btn { width: 100%; }
}
@media (max-width: 380px) {
  .nav-text { display: none; }
}