/* Mon chemin : une graine devient une fleur de vie. */
#apropos .journey-visual { width: 100%; max-width: 420px; margin-inline: auto; }
.journey-scene { position: relative; width: 100%; }
.journey-art { display: block; width: 100%; height: auto; overflow: visible; }
.journey-steps {
  display: flex; align-items: center; justify-content: center;
  gap: .65rem; margin: -.6rem 0 1rem;
  font-family: var(--font-title); font-size: .84rem; color: var(--ink-soft);
}
.journey-steps span { opacity: .5; transition: opacity .6s, color .6s; }
.journey-steps span.is-current { color: var(--violet-deep); opacity: 1; }
.journey-steps i { width: 14px; height: 1px; background: var(--gold); opacity: .4; }
.journey-control {
  display: block; margin: 0 auto; padding: .35rem .65rem;
  border: 0; border-bottom: 1px solid rgba(124,92,191,.24); border-radius: 0;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: .73rem; line-height: 1.5;
}
.journey-control:hover { color: var(--violet-deep); border-color: var(--violet); }
.journey-control:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.journey-control[hidden] { display: none; }
@media (max-width: 880px) {
  #apropos .journey-visual { max-width: 340px; }
}
@media (max-width: 480px) {
  #apropos .journey-visual { max-width: 300px; }
  .journey-steps { font-size: .75rem; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-steps span { transition: none; }
}