.Train .leg-title-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #f1f5f9;
  border: 0.5px solid #C7DBEB;
  border-radius: 20px;
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px;
  width: fit-content;
}
.Train .leg-train-icon {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}
.Train .leg-station {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}
.Train .leg-arrow {
  display: flex;
  align-items: center;
  gap: 2px;
}
.Train .leg-arrow-line {
  display: block;
  width: 24px;
  height: 1px;
  background: #cbd5e1;
}
.Train .leg-arrow svg {
  width: 10px;
  height: 10px;
  color: #94a3b8;
  flex-shrink: 0;
}
@media (max-width: 767.99px) {

  /* --- En-tête : toujours affiché sur mobile --- */
  .Train .card-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    user-select: none;
    border-radius: 6px; /* correspond au radius de .train-card */
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .Train .card-accordion-header:hover,
  .Train .card-accordion-header:focus-visible {
    background: var(--c-slate-50, #f8fafc);
    outline: none;
  }

  .Train .card-accordion-header[aria-expanded="true"] {
    border-bottom: 0.5px solid var(--c-slate-200, #e2e8f0);
    border-radius: 6px 6px 0 0;
  }

  /* Bloc gauche : horaires + chips */
  .Train .card-header-route {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    padding: 10px 0;
  }

  /* Heures départ / arrivée */
  .Train .card-header-times {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .Train .card-header-time {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-slate-900, #0f172a);
    line-height: 1;
  }

  .Train .card-header-sep {
    font-size: 14px;
    color: var(--c-slate-400, #94a3b8);
  }

  /* Chips durée + direct/chgt */
  .Train .card-header-chips {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  /* Prix minimum affiché dans l'en-tête */
  .Train .card-header-minprice {
    margin-left: auto;
    font-size: 12px;
    color: var(--c-slate-500, #64748b);
    white-space: nowrap;
  }

  .Train .card-header-minprice strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-orange, #f27436);
  }

  /* Chevron */
  .Train .card-accordion-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--c-slate-400, #94a3b8);
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }

  .Train .card-accordion-header[aria-expanded="true"] .card-accordion-chevron {
    transform: rotate(180deg);
    color: var(--c-orange, #f27436);
  }

  /* --- Corps collapsable --- */
  .Train .card-accordion-body {
    max-height: 0;
    overflow: hidden;
    /* Animation CSS pure : pas de JS pour l'interpolation */
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.25s ease;
    opacity: 0;
  }

  .Train .card-accordion-body.is-open {
    /* Valeur suffisamment grande pour couvrir n'importe quel contenu.
       Ne pas mettre "none" : le collapse ne s'animera plus. */
    max-height: 1200px;
    opacity: 1;
  }

  /* card-top en colonne sur mobile (comportement existant conservé) */
  .Train .card-top {
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 4px;
  }

  .Train .divider-v {
    width: 100%;
    height: 0.5px;
  }

  /* Offres en colonne sur mobile */
  .Train .card-bottom {
    flex-direction: column;
  }

  .Train .card-bottom .offer-item:not(:last-child) {
    border-right: none;
    border-bottom: 0.5px solid var(--c-slate-200, #e2e8f0);
  }

  /* Carte sélectionnée : met en valeur l'en-tête aussi */
  .Train .train-card.selected-card .card-accordion-header {
    background: var(--c-orange-light, #fff9f0);
  }

  /* Hover lift désactivé sur mobile (l'animation perturbe le scroll) */
  .Train .train-card:hover {
    transform: none;
  }
  .Train .train-card:hover .offer-item {
    transform: none;
  }

  /* Accessibilité : focus visible sur l'en-tête */
  .Train .card-accordion-header:focus-visible {
    outline: 2px solid var(--c-orange, #f27436);
    outline-offset: -2px;
    border-radius: 6px;
  }
.Train .tl-chips{
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}
  /* Respect des préférences de mouvement réduit */
  @media (prefers-reduced-motion: reduce) {
    .Train .card-accordion-body {
      transition: none;
    }
    .Train .card-accordion-chevron {
      transition: none;
    }
  }

} /* fin @media mobile */