/* Blog quest.dog — complète landing.css (police, couleurs, en-tête, pied,
   bloc sombre .cta-box) pour la lecture : une colonne étroite, des images
   arrondies comme les cadres de la landing, rien d'autre. */

main.shell { padding-bottom: 20px }

/* ------------------------------------------------------------- liste */
.blog-hero { max-width: 720px; padding-top: 32px; margin-bottom: 44px }
.blog-hero h1 { font-size: 52px }
.blog-hero .lead { margin-bottom: 0 }

.post-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.post-card {
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(30, 50, 30, .10); transition: transform .15s, box-shadow .15s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30, 50, 30, .14) }
.post-card a { color: inherit; display: block; height: 100% }
.post-card-img { aspect-ratio: 16 / 10; background: var(--green-soft); overflow: hidden }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.post-card-ph { width: 100%; height: 100%; background:
  radial-gradient(circle at 30% 40%, #CFE3CA 0 18%, transparent 19%),
  radial-gradient(circle at 70% 65%, #D8E8D3 0 24%, transparent 25%), var(--green-soft) }
.post-card-body { padding: 20px 22px 24px }
.post-card h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; margin: 6px 0 10px }
.post-card p { font-size: 15.5px; line-height: 1.55; color: var(--body); margin: 0 }
.post-card .post-meta { font-size: 13.5px; color: var(--muted); margin: 0 }
.post-empty { font-size: 18px; color: var(--muted); padding: 40px 0 }

/* ----------------------------------------------------------- article */
.post { max-width: 720px; margin: 0 auto; padding-top: 12px }
.post-back { margin: 0 0 26px; font-size: 15px; font-weight: 600 }
.post h1 { font-size: 46px; line-height: 1.08; margin: 0 0 14px; text-wrap: balance }
.post-meta { font-size: 15px; color: var(--muted); margin: 0 0 30px }
.post-cover { margin: 0 0 38px }
/* Cadrage 16:9 quelle que soit la photo : une couverture en portrait
   repousserait le texte de deux écrans. */
.post-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 26px; box-shadow: 0 24px 50px rgba(22, 38, 26, .18) }

.post-body { font-size: 18.5px; line-height: 1.72; color: var(--ink) }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote,
.post-body table, .post-body figure, .post-body pre { margin: 0 0 1.25em }
.post-body h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; margin: 1.7em 0 .55em }
.post-body h3 { font-size: 23px; line-height: 1.25; margin: 1.5em 0 .5em }
.post-body h4 { font-size: 19px; margin: 1.3em 0 .4em }
.post-body a { color: var(--green-deep); text-decoration: underline;
  text-decoration-color: rgba(62, 106, 68, .35); text-underline-offset: 3px }
.post-body a:hover { color: var(--green); text-decoration-color: currentColor }
.post-body ul, .post-body ol { padding-left: 1.3em }
.post-body li { margin: .35em 0 }
.post-body li::marker { color: var(--green) }
.post-body strong { font-weight: 600 }
/* Une capture de téléphone (portrait) reste entière mais ne dépasse pas
   les trois quarts de l'écran. */
.post-body img { display: block; border-radius: 20px; margin: 0 auto;
  max-height: 75vh; width: auto; max-width: 100% }
.post-body p > img { margin: .4em auto }
.post-body figcaption { font-size: 14.5px; color: var(--muted); text-align: center; margin-top: 10px }
.post-body blockquote {
  border-left: 4px solid var(--green); background: var(--green-soft);
  border-radius: 0 16px 16px 0; padding: 14px 20px; color: var(--green-deep);
}
.post-body blockquote p:last-child { margin-bottom: 0 }
.post-body hr { border: 0; border-top: 1.5px solid var(--line); margin: 2em 0 }
.post-body code { font-size: .88em; background: #fff; border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 1px 6px }
.post-body pre { background: #fff; border-radius: 14px; padding: 14px 18px; overflow-x: auto }
.post-body pre code { border: 0; padding: 0 }
.post-body table { width: 100%; border-collapse: collapse; font-size: 16px;
  display: block; overflow-x: auto }
.post-body th, .post-body td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left }

/* Appel final : le bloc sombre de la landing, en plus compact. */
.post-cta { margin-top: 72px }
.post-cta .cta-box { padding: 56px 40px }
.post-cta h2 { font-size: 36px; color: var(--bg) }
.post-cta .lead { color: #B9C9B6; margin: 0 auto 26px; max-width: 520px; font-size: 18px }
.post-cta p { margin: 0 }
.post-cta-store { margin-bottom: 18px !important }
.post-cta-store img { height: 52px; width: auto; display: inline-block }
.post-cta-android { color: var(--orange); font-weight: 600 }
.post-cta-android:hover { color: var(--orange-hover) }

.post-more { margin-top: 72px }
.post-more > h2 { font-size: 30px; margin-bottom: 24px }

/* ------------------------------------------------------- responsive */
@media (max-width: 940px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .blog-hero h1 { font-size: 40px }
  .post h1 { font-size: 36px }
}
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr }
  .blog-hero { padding-top: 8px; margin-bottom: 30px }
  .blog-hero h1 { font-size: 32px }
  .post h1 { font-size: 30px }
  .post-body { font-size: 17.5px }
  .post-body h2 { font-size: 25px }
  .post-body h3 { font-size: 21px }
  .post-cover img, .post-body img { border-radius: 16px }
  .post-cta .cta-box { padding: 40px 20px }
  .post-cta h2 { font-size: 28px }
}