/* Savoira, accueil : la carte du parcours en plan de métro. La ligne
   descend au centre (bureau) ou longe le bord (mobile) et se dessine au
   fil du défilement (parcours-v3.js) ; chaque arrêt s'allume (.rt-on)
   quand la pointe l'atteint. Tout vient des jetons du système : pine,
   moss, cream, le vert du lockup du logo, l'ombre unique, Instrument
   Sans et IBM Plex Mono. Classes préfixées rt- (route). */

.rt-card {
  /* Même vert hors jetons que la ligne du héros : celui du logo. */
  --rt-green: #0E8F5F;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  margin-top: 48px;
}

.rt-head { padding: 40px 40px 8px; }
.rt-head .rt-title { margin-top: 18px; }
.rt-desc { margin-top: 14px; color: var(--muted); max-width: 62ch; }
.rt-meta { margin-top: 12px; color: var(--muted); }
.rt-meta b { color: var(--ink); font-weight: 600; }
.rt-chips { display: flex; align-items: center; gap: 8px; }

/* ---- Plan bureau : colonne centrale, arrêts en alternance ---- */
.rt-wrap { width: 100%; padding: 8px 40px 0; }
.rt-scale { position: relative; width: 100%; }
.rt-inner { position: relative; transform-origin: top left; }
.rt-inner svg.rt-rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rt-ghost { fill: none; stroke: var(--ink); opacity: .08; stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.rt-path { fill: none; stroke: var(--rt-green); stroke-width: 2.5; stroke-linecap: round; }

.rt-cap { position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rt-cap b { color: var(--pine); font-weight: 500; }

.rt-pin { position: absolute; width: 32px; height: 32px; border-radius: 50%;
  background: var(--white); border: 2.5px solid var(--rt-green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--pine);
  opacity: 0; transform: scale(.5);
  transition: opacity .3s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1), background-color .25s ease, color .25s ease; }
.rt-pin.rt-on { opacity: 1; transform: scale(1); }

.rt-stop { position: absolute; display: block; width: 400px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.rt-stop.rt-on { opacity: 1; transform: translateY(0); }
.rt-stop .rt-t { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); transition: color .25s ease; }
.rt-stop .rt-m { display: block; color: var(--muted); margin-top: 4px; }
.rt-l { text-align: right; }
.rt-r { text-align: left; }
.rt-stop:hover .rt-t { color: var(--pine); }
.rt-stop:hover + .rt-pin, .rt-pin:hover { background: var(--rt-green); color: var(--cream); transform: scale(1.12); }

/* ---- Barre de prix ---- */
.rt-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--line); background: var(--cream);
  padding: 26px 40px; flex-wrap: wrap; }
.rt-price s { color: var(--muted); text-decoration: line-through; font-size: 16px; margin-right: 10px; }
.rt-now { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.rt-terms { color: var(--muted); margin-top: 3px; }

/* ---- Plan mobile : rail à gauche ---- */
.rt-wrap-m { display: none; width: 100%; padding: 8px 20px 0; }
.rt-scale-m { position: relative; width: 100%; max-width: 392px; margin: 0 auto; }
.rt-inner-m { position: relative; transform-origin: top left; }
.rt-inner-m svg.rt-rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rt-pin-m { position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: var(--white); border: 2.5px solid var(--rt-green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--pine);
  opacity: 0; transform: scale(.5);
  transition: opacity .3s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.rt-pin-m.rt-on { opacity: 1; transform: scale(1); }
.rt-stop-m { position: absolute; display: block; left: 76px; width: 290px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.rt-stop-m.rt-on { opacity: 1; transform: translateY(0); }
.rt-stop-m .rt-t { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rt-stop-m .rt-m { display: block; color: var(--muted); margin-top: 4px; }
.rt-cap-m { position: absolute; font-family: var(--mono); font-size: 10.5px; line-height: 15px;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rt-cap-m b { color: var(--pine); font-weight: 500; }

@media (max-width: 900px) {
  .rt-head { padding: 28px 22px 4px; }
  .rt-wrap { display: none; }
  .rt-wrap-m { display: block; }
  .rt-bar { padding: 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-card * { animation: none !important; transition: none !important; }
  .rt-stop, .rt-pin, .rt-stop-m, .rt-pin-m { opacity: 1 !important; transform: none !important; }
  .rt-path { stroke-dashoffset: 0 !important; }
}