/* Récit d'une destination : citation d'ouverture d'un chapitre et histoire en étapes numérotées.
   Balisage : blockquote.lead-quote > cite ; ol.steps > li > span.n + div (h3 + p).
   Couleur : --page-accent. */

.lead-quote { max-width: 860px; margin: 0 0 30px; font-family: var(--font-lore); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.4; color: #e9e3d6; }
.lead-quote cite { display: block; margin-top: 10px; font-family: var(--font-ui); font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--page-accent, var(--gold)); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 clamp(36px, 5vw, 56px); padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; background: var(--panel-solid); border: 1px solid var(--line); border-top: 3px solid var(--page-accent, var(--gold)); }
.steps .n { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); font-size: .8rem; font-weight: 800; color: var(--page-accent, var(--gold)); }
.steps h3 { margin: 4px 0 6px; font-size: 1rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pearl); }
.steps p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 1020px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}