/* Accueil de Train Nomade (direction « Relief ») : « Où est mon train ? », profil d'une ligne, aperçu 3D,
   trains de nuit au départ de Paris (frise 18 h → midi), questions. Chargé seulement par l'accueil. */
.accueil { padding-top: 10px; padding-bottom: 10px; }
.surtitre { margin: 22px 0 10px; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--sienne-texte); }
.accueil-h1 { margin: 0 0 12px; font: 900 clamp(40px, 11vw, 72px)/.92 var(--titre); letter-spacing: -.035em; text-transform: uppercase; max-width: 12ch; }
.chapo { margin: 0; color: var(--doux); max-width: 36em; font-size: 18px; }

/* Champ numéro de train */
.suivi { margin: 20px 0 0; }
.suivi label { display: block; margin-bottom: 6px; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.suivi-champ { display: flex; border: 2px solid var(--encre); background: var(--blanc); }
.suivi input { flex: 1; min-width: 0; border: 0; padding: 14px 12px; font: 600 22px var(--mono); letter-spacing: .06em; background: transparent; color: var(--encre); }
.suivi input::placeholder { color: #6b746e; }
.suivi input:focus-visible { outline-offset: -4px; }
.suivi button { flex: none; border: 0; border-left: 2px solid var(--encre); background: var(--sienne-texte); color: #fff; font: 800 18px var(--titre); padding: 0 20px; cursor: pointer; }
.suivi button:hover { background: var(--encre); }
.suivi-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 14px; color: var(--doux); }
.suivi-note svg { flex: none; margin-top: 3px; }
.suivi-note b { color: var(--encre); }
.bientot { display: none; margin: 14px 0 0; padding: 12px 14px; background: var(--blanc); border: 1.5px solid var(--encre); border-left: 5px solid var(--sienne); }
.bientot.visible, .bientot:target { display: block; }
.bientot p { margin: 0; font-size: 15px; }
.bientot .bientot-titre { margin-bottom: 4px; font: 800 18px/1.2 var(--titre); }

.petit-titre { margin: 30px 0 0; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--doux); }
.carte-ligne .profil { margin-top: 8px; position: relative; }
.carte-ligne .profil::before { content: ""; position: absolute; top: -6px; left: 14px; width: 10px; height: 10px; background: var(--sienne); transform: rotate(45deg); }

/* Aperçu 3D */
.vue { margin: 28px 0 0; border: 1.5px solid var(--encre); background: var(--encre); position: relative; }
.vue img { display: block; width: 100%; height: auto; aspect-ratio: 940 / 565; object-fit: cover; }
.vue-etiquette { position: absolute; left: 10px; top: 10px; font: 600 11px var(--mono); background: var(--papier); padding: 4px 7px; letter-spacing: .06em; text-transform: uppercase; }
.vue-bientot { position: absolute; right: 10px; bottom: 44px; background: var(--papier); color: var(--encre); border: 1.5px solid var(--encre); font: 800 15px var(--titre); padding: 8px 12px; }
.vue figcaption { padding: 7px 10px; font: 11px/1.4 var(--mono); color: #e8ebe6; }

/* Trains de nuit */
.nuits h2 { margin: 34px 0 4px; font: 900 26px/1.02 var(--titre); text-transform: uppercase; letter-spacing: -.015em; }
.nuits h2 a { color: inherit; text-decoration-color: var(--sienne); }
.nuits .sous { margin: 0 0 12px; font: 12px/1.5 var(--mono); color: var(--doux); }
.frise-echelle { position: relative; height: 16px; margin-left: 64px; font: 10px var(--mono); color: var(--doux); }
.frise-echelle span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.frise-echelle span:nth-child(1) { left: 0; transform: none; }
.frise-echelle span:nth-child(2) { left: 33.3%; }
.frise-echelle span:nth-child(3) { left: 66.7%; }
.frise-echelle span:nth-child(4) { right: 0; transform: none; }
.nuit { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--encre); }
.nuit li { display: grid; grid-template-columns: 56px 1fr auto; column-gap: 8px; align-items: baseline; padding: 10px 0 9px; border-bottom: 1px solid var(--courbe); }
.nuit .dep { font: 600 17px var(--mono); }
.nuit .dest { font-weight: 700; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.nuit .dest small { display: block; font: 12px/1.5 var(--mono); color: var(--doux); font-weight: 400; }
.nuit .duree { font: 600 13px var(--mono); color: var(--foret); white-space: nowrap; }
.frise { grid-column: 2 / 4; position: relative; height: 6px; margin-top: 7px; background: repeating-linear-gradient(90deg, var(--courbe-2) 0 1px, transparent 1px 16.66%); }
.frise i { position: absolute; top: 0; bottom: 0; background: var(--encre); border-radius: 3px; }
.frise i::before { content: ""; position: absolute; left: -1px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--sienne); }
.nuit-autre .dep { color: var(--doux); }
.nuits .petit { margin: 10px 0 0; font-size: 13px; color: var(--doux); }

/* Questions */
.questions { padding-top: 10px; }

@media (min-width: 960px) {
  .accueil { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: start; }
  .surtitre { margin-top: 44px; }
  .vue { margin-top: 44px; }
  .frise-echelle { margin-left: 64px; }
}

/* Largeur variable d'Anybody (voir theme.css) */
.accueil-h1 { font-stretch: 62%; letter-spacing: .01em; }
.accueil-h1 em { font-stretch: 150%; }
.suivi button, .vue-bientot { font-stretch: 120%; }
.nuits h2 { font-stretch: 70%; }