/* Tableau des départs : un panneau de gare, un billet de devis, huit quais, le texte et les guides. Les lettres de ligne (.l-a à .l-f) viennent de site.css. */
.pg.pg-seul { grid-template-columns: minmax(0, 1fr); }
.pg-seul .pg-t { max-width: 940px; }
.pg-seul .pg-c { max-width: none; padding-top: 24px; }
.tb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* En tête : le panneau et le billet */
.tb-haut { --tb-fond: color-mix(in srgb, var(--ink) 76%, #000); display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px 44px; align-items: start; margin: 0 0 52px; }
.tb-panneau { background: var(--tb-fond); color: #fff; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 7px 7px 0 var(--trait); padding: 18px 22px 20px; }
.tb-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding-bottom: 12px; border-bottom: 3px solid var(--jaune); }
.prose .tb-entete h2 { margin: 0; color: var(--jaune); font-size: clamp(26px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: .08em; }
.prose .tb-entete p { margin: 0; max-width: none; color: #fff; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .1em; }

.prose .tb-table { width: 100%; margin: 0; border-collapse: collapse; background: transparent; font-size: 16.5px; font-variant-numeric: tabular-nums lining-nums; }
.prose .tb-table th { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .35); color: #C9D2E4; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: 12px 12px 8px; text-align: left; }
.prose .tb-table th:first-child, .prose .tb-table td:first-child { width: 78px; text-align: center; padding-left: 4px; padding-right: 4px; }
.prose .tb-table td { border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); padding: 8px 12px; vertical-align: middle; color: #fff; line-height: 1.3; }
.prose .tb-table td:nth-child(3) { color: #E3E8F2; font-size: 15.5px; }
.prose .tb-table tbody tr:hover td { background: rgba(255, 255, 255, .08); }
.prose .tb-table td:nth-child(2) a { display: block; padding: 6px 0; color: var(--jaune); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(242, 183, 5, .55); text-underline-offset: 5px; }
.prose .tb-table td:nth-child(2) a::after { content: " \203A"; }
.prose .tb-table td:nth-child(2) a:hover { color: #fff; text-decoration-color: #fff; }
.prose .tb-table a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* La lettre de la ligne : une plaque colorée, coupée par un trait comme un volet de panneau */
.tb-lettre { display: inline-grid; place-items: center; width: 44px; height: 44px; font-weight: 800; font-size: 24px; line-height: 1; color: var(--on, var(--ink)); background: linear-gradient(transparent calc(50% - 1px), rgba(0, 0, 0, .22) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--c); border-radius: 3px; }
.prose ul.tb-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; padding: 14px 0 0; max-width: none; border-top: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 14.5px; }
.prose ul.tb-legende li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.tb-legende .tb-lettre { width: 28px; height: 28px; font-size: 16px; background: var(--c); }

/* Le billet : bord dentelé en haut et en bas, perforation, champs bien visibles */
.tb-billet { position: sticky; top: 16px; filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)); }
.tb-pointe { height: 12px; }
.tb-corps { background: #fff; }
.tb-haut-bord { background: linear-gradient(45deg, #fff 8px, transparent 0) 0 100% / 16px 16px, linear-gradient(315deg, #fff 8px, transparent 0) 0 100% / 16px 16px; background-repeat: repeat-x; }
.tb-bas-bord { background: linear-gradient(135deg, #fff 8px, transparent 0) 0 0 / 16px 16px, linear-gradient(225deg, #fff 8px, transparent 0) 0 0 / 16px 16px; background-repeat: repeat-x; }
.tb-bandeau { height: 12px; background: linear-gradient(90deg, var(--bleu) 0 16.66%, var(--vert) 16.66% 33.33%, var(--orange) 33.33% 50%, var(--jaune) 50% 66.66%, var(--cyan) 66.66% 83.33%, var(--magenta) 83.33% 100%); }
.tb-form { padding: 0 24px 6px; }
.tb-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tb-form fieldset:disabled { opacity: .62; }
.prose .tb-billet p { margin: 0; max-width: none; }
.tb-souche { padding: 18px 0 14px; }
.prose .tb-titre { font-weight: 800; font-size: 26px; line-height: 1.15; text-transform: uppercase; letter-spacing: .06em; }
.prose .tb-sous { margin-top: 4px; color: var(--mut); font-size: 15px; }
.tb-perfo { border-top: 4px dashed var(--ink); margin: 0 -24px 18px; position: relative; }
.tb-perfo::before, .tb-perfo::after { content: ""; position: absolute; top: -13px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.tb-perfo::before { left: -11px; }
.tb-perfo::after { right: -11px; }
.tb-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.tb-champs .pleine { grid-column: 1 / -1; }
.tb-form label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 5px; }
.tb-form input:not([type=hidden]) { height: 54px; border: 3px solid var(--ink); background: #EAEFF6; font-size: 17px; }
.tb-form input:focus-visible { background: #fff; outline: 3px solid var(--bleu); outline-offset: 2px; }
.tb-bas { margin-top: 18px; }
.prose .tb-billet .f-note { margin-top: 10px; text-align: center; }
.tb-wa { margin-top: 12px; border-top: 3px dashed var(--ink); padding: 12px 24px 4px; text-align: center; }
.prose .tb-billet .tb-tel { margin-top: 10px; padding: 0 24px 6px; text-align: center; }

/* Les quais : une bande de sécurité, des plaques numérotées */
.tb-bord { height: 14px; margin: 0 0 22px; background: repeating-linear-gradient(-45deg, var(--ink) 0 14px, var(--jaune) 14px 28px); border: 2px solid var(--ink); }
.prose .tb-quais h2 { margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 33px); }
.prose .tb-intro { max-width: none; margin: 0 0 20px; color: var(--mut); }
.prose ul.tb-liste-quais { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.prose ul.tb-liste-quais li { margin: 0; padding: 0; }
.prose .tb-liste-quais a { display: grid; grid-template-columns: 78px minmax(0, 1fr); height: 100%; min-height: 96px; background: #fff; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; color: var(--ink); font-weight: 400; text-decoration: none; }
.prose .tb-liste-quais a:hover { background: var(--ink); color: #fff; }
.tb-plaque { display: grid; place-content: center; text-align: center; background: var(--jaune); color: var(--ink); border-right: 2px solid var(--ink); line-height: 1; }
.tb-plaque small { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.tb-plaque b { display: block; font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-nom { display: block; padding: 12px 14px; align-self: center; }
.prose .tb-liste-quais strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; }
.prose .tb-liste-quais .tb-nom span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--mut); }
.prose .tb-liste-quais a:hover .tb-nom span { color: #E3E8F2; }

/* Texte et guides */
.tb-texte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 56px; margin: 52px 0 0; }
.prose .tb-texte h2 { margin: 0 0 12px; font-size: clamp(24px, 2.3vw, 30px); }
.prose .tb-texte h3 { margin: 22px 0 8px; }
.tb-guides { margin: 48px 0 0; padding: 26px 28px 28px; background: #fff; border: 2px solid var(--ink); border-top: 12px solid var(--ink); border-radius: 4px; }
.prose .tb-guides h2 { margin: 0 0 16px; font-size: clamp(24px, 2.3vw, 30px); }
.prose .tb-guides ul { list-style: none; margin: 0 0 20px; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.prose .tb-guides li { margin: 0; padding: 0; }
.prose .tb-guides li a { display: block; height: 100%; padding: 12px 14px; background: var(--bg); border: 2px solid var(--ink); border-left: 8px solid var(--jaune); border-radius: 3px; color: var(--ink); font-weight: 400; text-decoration: none; }
.prose .tb-guides li a:hover { background: var(--ink); color: #fff; }
.prose .tb-guides strong { display: block; font-size: 17.5px; font-weight: 800; margin-bottom: 3px; }
.prose .tb-guides li span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--mut); }
.prose .tb-guides li a:hover span { color: #E3E8F2; }
.prose .tb-cta { margin: 0; }

@media (max-width: 1100px) {
  .tb-haut { grid-template-columns: minmax(0, 1fr); }
  .tb-billet { position: static; max-width: 560px; }
  .tb-texte { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .prose .tb-table td:nth-child(3) { font-size: 15px; }
}
@media (max-width: 699px) {
  .tb-panneau { padding: 14px 12px 16px; box-shadow: 4px 4px 0 var(--trait); }
  /* Le tableau se replie en cartes : la lettre à gauche, la destination et ce que la page traite à droite */
  .prose .tb-table, .prose .tb-table tbody, .prose .tb-table tr, .prose .tb-table td { display: block; overflow: visible; }
  .prose .tb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose .tb-table tr { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .prose .tb-table td, .prose .tb-table td:first-child { width: auto; border: 0; padding: 0; text-align: left; }
  .prose .tb-table td:first-child { grid-row: 1 / span 2; }
  .prose .tb-table td:nth-child(2), .prose .tb-table td:nth-child(3) { grid-column: 2; }
  .prose .tb-table tbody tr:hover td { background: transparent; }
  .tb-form { padding: 0 16px 6px; }
  .tb-perfo { margin: 0 -16px 18px; }
  .tb-wa, .prose .tb-billet .tb-tel { padding-left: 16px; padding-right: 16px; }
  .tb-champs { gap: 14px 10px; }
  .tb-guides { padding: 20px 16px 22px; }
}