/* § 07 « Comment on travaille » : la ligne (etapes.js). Un trajet SVG, quatre gares alignées sur le centre
   des cartes, une rampe « Sortie possible » entre deux gares. Le point orange est le visiteur.
   Orange en aplat seulement : le point, l'anneau qui appelle l'étape suivante, la rampe de sortie ouverte.
   Les textes restent marine ou bleu second. Sous 760 px, la ligne devient verticale, à gauche des cartes. */

.pa-ligne { position: relative; }
.pa-ligne__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pa-ligne__fond { fill: none; stroke: var(--filet); stroke-width: 3; }
.pa-ligne__rail { fill: none; stroke: var(--marine); stroke-width: 3; stroke-linecap: round; }
.pa-ligne__ramp { fill: none; stroke: var(--second-clair); stroke-width: 2; stroke-linecap: round; transition: stroke .35s; }
.pa-ligne__ramp.is-ouverte { stroke: var(--orange); }
.pa-ligne__gare circle { transform-box: fill-box; transform-origin: center; transition: fill .3s, stroke .3s; }
.pa-ligne__gare .ext { fill: var(--creme); stroke: var(--marine); stroke-width: 3; }
.pa-ligne__gare .int { fill: var(--creme); }
.pa-ligne__gare.is-faite .int { fill: var(--marine); }
.pa-ligne__gare.is-ici .ext { stroke: var(--orange); }
.pa-ligne__pulse { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pa-ligne__vous { fill: var(--orange); transform-box: fill-box; transform-origin: center; }
.pa-ligne__sortie { position: absolute; font: 500 .64rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--second); white-space: nowrap; transition: color .35s; pointer-events: none; }
.pa-ligne__sortie.is-ouverte { color: var(--marine); }

.pa-ligne__arrets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.pa-ligne__arret { position: relative; display: grid; gap: 8px; align-content: start; justify-items: start; padding: 18px 16px; border-radius: 10px; border: 1px solid transparent; transition: background-color .25s, border-color .25s; }
.pa-ligne__arret:hover, .pa-ligne__arret.is-ici { background: var(--blanc); border-color: var(--filet); }
.pa-ligne__arret h3 { color: var(--second); transition: color .3s; }
.pa-ligne__arret.is-ok h3 { color: var(--marine); }
.pa-ligne__arret p { color: var(--second); font-size: .95rem; }
.pa-ligne__arret .pa-etiq { margin-top: 4px; }
/* Toute la carte est cliquable : le bouton du titre s'étend sur la carte ; le lien de réservation passe devant. */
.pa-ligne__arret h3 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.pa-ligne__arret h3 button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pa-ligne__arret h3 button:focus-visible { outline: none; }
.pa-ligne__arret:has(h3 button:focus-visible) { outline: 2px solid var(--marine); outline-offset: 3px; }
.pa-ligne__arret .pa-lien { position: relative; z-index: 1; margin-top: 4px; }
.pa-ligne__vous-m { display: none; }

@media (max-width: 759px) {
  .pa-ligne__svg, .pa-ligne__sortie { display: none; }
  .pa-ligne::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 30px; width: 3px; border-radius: 2px; background: var(--filet); }
  .pa-ligne__arrets { grid-template-columns: 1fr; gap: 0; padding-left: 44px; margin-top: 0; }
  .pa-ligne__arret { padding: 16px 0 34px; border-radius: 0; }
  .pa-ligne__arret:hover, .pa-ligne__arret.is-ici { background: none; border-color: transparent; }
  .pa-ligne__arret::before { content: ''; position: absolute; left: -40px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--creme); border: 3px solid var(--marine); transition: background-color .3s; }
  .pa-ligne__arret.is-ok::before { background: var(--marine); }
  .pa-ligne__arret:not(:last-child)::after { content: attr(data-sortie); position: absolute; left: 0; bottom: 10px; font: 500 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
  .pa-ligne__arret:last-child { padding-bottom: 16px; }
  .pa-ligne__vous-m { display: block; position: absolute; left: 4px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); pointer-events: none; z-index: 1; }
}