/* Guide « Comment faire un livret de messe » : article, sommaire collant sur grand écran. */

.guide .ceremonie-head { padding-bottom: var(--sp-4); }
.guide .ceremonie-head .container { max-width: none; }   /* aligné sur le sommaire et le texte */
.guide .ceremonie-head .lead-left { max-width: 72ch; }
.guide-corps { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-7, 48px); align-items: start; padding-bottom: var(--sp-8, 64px); }
@media (max-width: 960px) { .guide-corps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } }

.guide-sommaire { position: sticky; top: 96px; padding: var(--sp-4); border-radius: var(--radius-lg, 14px); background: var(--paper-soft); font-size: var(--fs-sm); }
@media (max-width: 960px) { .guide-sommaire { position: static; } }
.guide-sommaire-titre { margin: 0 0 var(--sp-2); font-weight: 600; color: var(--ink); }
.guide-sommaire ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--ink-soft); }
.guide-sommaire a { color: var(--ink-soft); text-decoration: none; }
.guide-sommaire a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }

.guide-texte { max-width: 72ch; }
.guide-texte h2 { font-size: var(--fs-xl); margin: var(--sp-7, 48px) 0 var(--sp-3); scroll-margin-top: 96px; }
.guide-texte h2:first-child { margin-top: 0; }
.guide-texte p, .guide-texte li { color: var(--ink-soft); line-height: 1.7; }
.guide-texte ul, .guide-texte ol { padding-left: 1.3em; display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.guide-texte strong { color: var(--ink); }
.guide-texte a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.guide-etapes li::marker { color: var(--gold-deep); font-weight: 600; }

.guide-cta { margin: var(--sp-7, 48px) 0; padding: var(--sp-6); border-radius: var(--radius-lg, 14px); background: var(--surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, .05)); }
.guide-cta h2 { margin-top: var(--sp-2); }
.guide-cta .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.guide-cta .btn { text-decoration: none; }
.guide-texte .guide-cta .btn-gold { color: #FFF; }
.guide-texte .guide-cta .btn-ghost { color: var(--ink); }
.guide-faq { max-width: none; }