/* Train Nomade : direction « Relief » (carte topographique, courbes de niveau, profil en long).
   Fond papier clair, encre vert-noir, sienne (courbes, action), eau, forêt. Polices hébergées : Anybody (titres),
   Atkinson Hyperlegible (texte), Spline Sans Mono (horaires, cotes). Contrastes AA vérifiés :
   sienne texte #a8481d sur papier 5,3:1, blanc sur sienne 5,8:1, encre douce #4f5953 6,6:1. */
:root {
  --papier: #f4f5f0; --blanc: #fdfdfb; --encre: #1c2320; --doux: #4f5953;
  --sienne: #c25a2b; --sienne-texte: #a8481d; --courbe: #d9b49c; --courbe-2: #e3cdbd; --sol: #ead9cb;
  --eau: #2b6c8f; --foret: #42684a; --retard: #c8371b; --vert-pale: #eef1ea;
  --titre: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --texte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--encre); font: 17px/1.6 var(--texte); overflow-x: hidden;
  background: var(--papier) url("courbes.svg") no-repeat right -260px top -60px / 1100px auto;
}
img, svg { max-width: 100%; }
a { color: var(--eau); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sienne); outline-offset: 2px; }
.env { max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--encre); color: #fff; padding: 8px 14px; }
.saut:focus { left: 8px; }

/* En-tête : trait d'encre comme le cadre d'une carte */
.haut { border-bottom: 1.5px solid var(--encre); background: rgba(244, 245, 240, .92); }
.haut-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--encre); text-decoration: none; font: 900 21px/1 var(--titre); letter-spacing: -.02em; text-transform: uppercase; padding: 12px 0; }
.logo svg { flex: none; }
.rubriques { flex: 1 1 auto; min-width: 0; }
.rubriques ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 20px; justify-content: flex-end; flex-wrap: wrap; }
.rubriques a { display: inline-block; padding: 10px 0; color: var(--encre); text-decoration: none; font: 600 13px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid transparent; }
.rubriques a:hover, .rubriques a[aria-current] { border-bottom-color: var(--sienne); }
@media (max-width: 759px) {
  .rubriques { flex-basis: 100%; overflow-x: auto; margin: 0 -18px; padding: 0 18px; border-top: 1px dashed var(--courbe); }
  .rubriques ul { flex-wrap: nowrap; justify-content: flex-start; }
  .rubriques li { flex: none; }
}

/* En-tête de page */
.tete-page { padding: 22px 0 10px; }
.ariane ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font: 13px/1.5 var(--mono); color: var(--doux); }
.ariane li + li::before { content: "›"; margin: 0 8px; color: var(--sienne-texte); }
.ariane a { color: var(--doux); }
.etiquette { display: inline-block; margin: 0 0 10px; padding: 3px 8px; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; border: 1.5px solid var(--encre); background: var(--blanc); }
.etiquette-donnees { color: var(--foret); border-color: var(--foret); }
.etiquette-outil { color: var(--sienne-texte); border-color: var(--sienne-texte); }
.etiquette-guide { color: var(--eau); border-color: var(--eau); }
h1 { margin: 0 0 10px; font: 900 clamp(32px, 7vw, 54px)/1 var(--titre); letter-spacing: -.025em; text-transform: uppercase; overflow-wrap: break-word; hyphens: auto; max-width: 22ch; }
.verif { margin: 0; font: 13px/1.5 var(--mono); color: var(--doux); }
.verif a { color: var(--doux); }
.chapeau { max-width: 62ch; color: var(--doux); }

/* Contenu : une feuille posée sur la carte */
.page { padding-top: 14px; padding-bottom: 20px; }
.feuille { background: var(--blanc); border: 1.5px solid var(--encre); padding: 22px 18px 26px; position: relative; margin: 18px 0; }
.feuille::before { content: ""; position: absolute; top: -6px; left: 16px; width: 10px; height: 10px; background: var(--sienne); transform: rotate(45deg); }
.texte > :first-child { margin-top: 0; }
.texte h2 { margin: 1.7em 0 .5em; font: 800 clamp(22px, 4.6vw, 30px)/1.1 var(--titre); letter-spacing: -.02em; }
.texte h3 { margin: 1.4em 0 .4em; font-weight: 700; font-size: 19px; line-height: 1.3; }
.texte p, .texte li { max-width: 68ch; }
.texte li { margin: .25em 0; }
.texte li::marker { color: var(--sienne-texte); font-weight: 700; }
.texte blockquote { margin: 1.2em 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--sienne); }
.texte code { font: .92em var(--mono); background: var(--vert-pale); padding: 1px 4px; }
.tableau { overflow-x: auto; margin: 1.2em 0; -webkit-overflow-scrolling: touch; }
.tableau table { border-collapse: collapse; min-width: 100%; font-size: 15px; }
.tableau th, .tableau td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--courbe); white-space: nowrap; }
.tableau th { font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1.5px solid var(--encre); }
.tableau td { font-variant-numeric: tabular-nums; }
.reponse { font-size: 19px; max-width: 70ch; padding: 6px 0 4px 16px; border-left: 4px solid var(--sienne); }
.reponse > :first-child { margin-top: 0; }
.reponse strong { font-weight: 700; }
.essentiel { background: var(--vert-pale); border-left: 4px solid var(--foret); padding: 12px 16px; margin: 0 0 1.4em; }
.essentiel-titre { margin: 0 0 4px; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--foret); }
.essentiel > :last-child { margin-bottom: 0; }
.scene { margin: 10px 0; }
.sommaire { margin: 1.2em 0; border: 1px dashed var(--courbe); padding: 10px 14px; }
.sommaire summary { cursor: pointer; font: 600 13px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.sommaire ol { margin: 8px 0 0; padding-left: 22px; }
.faq details { border-top: 1px solid var(--courbe); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 8px 0 0; }
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--sienne-texte); color: #fff; border: 2px solid var(--encre); text-decoration: none; font: 800 16px/1.2 var(--titre); }
.bouton:hover { background: var(--encre); }
.reserver { margin: 18px 0; padding: 14px 16px; border: 1.5px dashed var(--encre); background: var(--blanc); }
.reserver p { margin: 8px 0 0; font-size: 14px; color: var(--doux); }

/* Listes de pages : repères cotés */
.liste { padding-bottom: 20px; }
.liste-groupe h2, .aussi h2 { margin: 30px 0 12px; font: 900 24px/1.05 var(--titre); text-transform: uppercase; letter-spacing: -.01em; }
.liste-groupe h2 a { color: inherit; text-decoration: none; }
.reperes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.repere a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px 14px 18px; background: var(--blanc); border: 1.5px solid var(--encre); color: var(--encre); text-decoration: none; position: relative; }
.repere a::before { content: ""; position: absolute; left: -1.5px; top: 14px; bottom: 14px; width: 4px; background: var(--sienne); }
.repere a:hover { background: var(--vert-pale); }
.repere-type { font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--sienne-texte); }
.repere-titre { font-weight: 700; line-height: 1.3; }
.repere-date { font: 12px/1.4 var(--mono); color: var(--doux); }
.aussi { padding-bottom: 20px; }
.code-404 { margin: 0 0 6px; font: 600 14px var(--mono); color: var(--sienne-texte); letter-spacing: .08em; text-transform: uppercase; }

/* Profil du trajet (composants/profil-trajet.html) */
.profil { margin: 18px 0; background: var(--blanc); border: 1.5px solid var(--encre); padding: 12px 10px 10px; }
.profil-titre { font: 800 18px/1.15 var(--titre); padding: 0 4px 6px; }
.profil-svg { display: block; width: 100%; height: auto; }
.profil-grille line { stroke: var(--courbe-2); stroke-width: .7; }
.profil-grille text, .profil-gares text { font: 11px var(--mono); fill: var(--doux); }
@media (max-width: 599px) { .profil-grille text, .profil-gares text { font-size: 13px; } }
.profil-gares text { fill: var(--encre); font-weight: 600; }
.profil-gares line { stroke: var(--encre); stroke-width: 1; }
.profil-sol { fill: var(--sol); }
.profil-trace { fill: none; stroke: var(--sienne); stroke-width: 2.2; stroke-linejoin: round; }
.profil-tunnel { fill: var(--encre); }
.profil-point { fill: var(--sienne); stroke: #fff; stroke-width: 1.5; }
.profil-halo { fill: var(--sienne); opacity: .25; animation: tn-clign 1.6s ease-in-out infinite; }
@keyframes tn-clign { 50% { opacity: .05; } }
.profil-legende { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 4px 0; font: 12px/1.5 var(--mono); color: var(--doux); }
.profil-cle-tunnel { display: inline-block; width: 14px; height: 5px; background: var(--encre); margin-right: 5px; vertical-align: middle; }
.profil-gares-liste { margin: 8px 4px 0; font-size: 15px; }
.profil-gares-liste summary { cursor: pointer; font: 600 13px/1.6 var(--mono); color: var(--eau); }
.profil-gares-liste ol { margin: 8px 0 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 24px; }
.profil-gares-liste li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--courbe); padding: 3px 0; break-inside: avoid; }
.profil-gares-liste .km { font: 13px var(--mono); color: var(--doux); white-space: nowrap; }
.profil-source { margin: 6px 4px 0; font: 11px/1.5 var(--mono); color: var(--doux); }

/* Pied de page */
.pied { margin-top: 40px; border-top: 1.5px solid var(--encre); background: var(--papier); }
.pied-in { padding-top: 18px; padding-bottom: 28px; font: 13px/1.65 var(--mono); color: var(--doux); }
.pied-marque { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 900 17px/1 var(--titre); text-transform: uppercase; color: var(--encre); }
.pied-sources, .pied-mention { max-width: 80ch; margin: 0 0 8px; }
.pied a { color: var(--encre); }
.pied-liens { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pied-liens a { display: inline-block; padding: 6px 0; }
.pied-bas { margin: 0; }

@media (min-width: 760px) {
  .feuille { padding: 30px 34px 34px; }
  .tete-page { padding-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Largeur variable d'Anybody (police variable hébergée) : titres serrés, marques larges, comme la maquette « Relief » */
.logo, .pied-marque { font-stretch: 130%; }
h1 { font-stretch: 62%; letter-spacing: .01em; }
.texte h2, .liste-groupe h2, .aussi h2 { font-stretch: 70%; }
.profil-titre { font-stretch: 85%; }
.bouton { font-stretch: 120%; }