/* ---------------------------------------------------------------------------
   Haltoo — les pages itinéraires (`index.php`).

   Une palette à part, plus chaude que celle du site : ce sont des pages de
   voyage. Le turquoise et le bleu nuit de la marque restent, le crème et le
   sable font le fond, la terre cuite marque l'extraordinaire. Aucune police
   distante : un empattement du système pour les titres.
   --------------------------------------------------------------------------- */

:root {
  --creme: #fbf7f0;
  --sable: #f3ebdd;
  --sable-fonce: #e6dac4;
  --turquoise: #3bb9b4;
  --turquoise-fonce: #0d6d68;
  --terre: #d9683c;
  --terre-texte: #b24c22;
  --nuit: #1d1853;
  --brun: #3a2e26;
  --brun-doux: #6e5f52;

  --fond: var(--creme);
  --surface: var(--sable);
  --bord: var(--sable-fonce);
  --texte: var(--brun);
  --texte-doux: var(--brun-doux);
  --titre: var(--nuit);
  --lien: var(--turquoise-fonce);
  --extra: var(--terre);
  --extra-texte: var(--terre-texte);
  --majeur: var(--turquoise-fonce);
  --site: var(--turquoise);
  --trace: var(--nuit);
  --relief: #cfe9e6;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1b1714;
    --surface: #26201b;
    --bord: #3a3029;
    --texte: #ece2d4;
    --texte-doux: #b5a796;
    --titre: #f4ead9;
    --lien: #6fd0cb;
    --extra: #e8936b;
    --extra-texte: #e8936b;
    --majeur: #3bb9b4;
    --site: #8fd9d5;
    --trace: #ece2d4;
    --relief: #1f3b3a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.6 var(--sans);
}

a { color: var(--lien); text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); color: var(--titre); line-height: 1.2; }

/* ------------------------------------------------------------- mise en page */

.page {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: 0 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}
.colonne { min-width: 0; padding-bottom: 40px; }
.volet {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: 28px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 899px) {
  .page { display: flex; flex-direction: column; padding: 0 16px; }
  /* Sur un téléphone, la carte passe sous l'ouverture, et ne colle plus. */
  .colonne { display: contents; }
  .ouverture { order: 1; }
  .volet { order: 2; position: static; height: auto; overflow: visible; padding: 4px 0 8px; }
  .colonne > :not(.ouverture) { order: 3; }
  /* Les thèmes d'une véloroute mènent ailleurs : avant la carte, pas après. */
  .colonne > .themes { order: 1; }
  body { font-size: 16px; }
}

/* ------------------------------------------------------- bandeau du site */

/* Le même que sur l'accueil d'haltoo.com, dans la palette de ces pages : le
   logo, puis le menu du site. Il ne colle pas en haut : c'est le volet de la
   carte qui colle, et deux choses collées se disputeraient l'écran. */
.bandeau {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 26px;
  padding: 12px max(32px, calc((100% - 1400px) / 2 + 32px));
  border-bottom: 1px solid var(--bord);
}
.marque {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  color: var(--titre); font-weight: 700; text-decoration: none; font-size: 17px;
}
.marque img { border-radius: 6px; }
.bandeau nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.bandeau nav a { color: var(--texte-doux); text-decoration: none; }
.bandeau nav a:hover, .bandeau nav a[aria-current] { color: var(--titre); text-decoration: underline; }
@media (max-width: 899px) {
  .bandeau { padding: 10px 16px; gap: 4px 16px; }
  .bandeau nav { gap: 4px 14px; font-size: 14px; }
  .marque { font-size: 16px; }
}

/* ----------------------------------------------------------------- en-tête */

.ouverture { padding-top: 22px; }
.ouverture h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 4px 0 10px; }
.chapeau { font-size: 1.12em; margin: 0 0 28px; }

/* Au-dessus du titre : le fil d'Ariane remonte d'un niveau, et le menu de la
   véloroute passe d'une page à l'autre. Sur un téléphone, le menu défile de
   côté plutôt que de passer à la ligne. */
.ariane {
  margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 600;
}
.ariane a { color: inherit; text-decoration: none; }
.ariane a:hover { color: var(--lien); text-decoration: underline; }
.menu-veloroute {
  display: flex; gap: 24px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--bord); font-size: 15px; font-weight: 600;
}
.menu-veloroute::-webkit-scrollbar { display: none; }
.menu-veloroute a {
  flex: none; padding: 6px 0 9px; margin-bottom: -1px; border-bottom: 3px solid transparent;
  color: var(--texte-doux); text-decoration: none;
}
.menu-veloroute a:hover { color: var(--titre); }
.menu-veloroute a[aria-current] { color: var(--titre); border-bottom-color: var(--lien); }
/* Une véloroute pas encore en ligne, vue en aperçu (`PUBLIEES`). */
.non-publiee {
  margin: 0 0 12px; padding: 6px 10px; border-left: 3px solid var(--extra);
  background: var(--surface); color: var(--extra-texte); font-size: 14px; font-weight: 600;
}

/* ------------------------------------------------------- page d'une véloroute */

.veloroute-meta { margin: 0 0 14px; font-size: 15px; color: var(--texte-doux); }

/* Un bloc par thème, qui mène à sa page. */
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; margin: 0 0 34px; }
.theme {
  display: block; padding: 16px 18px; border-radius: 16px; background: var(--surface);
  color: var(--texte); text-decoration: none; border: 1.5px solid transparent;
}
.theme:hover { border-color: var(--lien); }
.theme-corps { display: flex; flex-direction: column; gap: 2px; }
.theme-nom {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--lien);
}
.theme-n { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--titre); }
.theme-texte { font-size: 15px; color: var(--texte-doux); }

.etapes { margin: 0 0 30px; }
.etapes h2 { font-size: 1.45rem; margin: 0 0 8px; }
.etapes ol { list-style: none; margin: 0; padding: 0; }
.etapes li { padding: 12px 0; border-top: 1px solid var(--bord); scroll-margin-top: 16px; }
.etapes-nom { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--titre); }
.etapes .etape-meta { display: block; margin: 2px 0 0; }

/* ------------------------------------------------------ liste des véloroutes */

.page.seule { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.veloroute {
  margin: 0 0 28px; border-radius: 16px; overflow: hidden; background: var(--surface);
}
.veloroute img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.veloroute-corps { padding: 16px 20px 18px; }
.veloroute h2 { font-size: 1.8rem; margin: 0 0 4px; }
.veloroute h2 a { color: inherit; text-decoration: none; }
.veloroute h2 a:hover { text-decoration: underline; }
.veloroute-themes { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; font-weight: 600; }
.veloroute-credit { margin: 0; font-size: 12px; color: var(--texte-doux); }

.pastille {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--site); flex: none;
}
.pastille.palier-majeur { background: var(--majeur); }
.pastille.palier-extraordinaire { background: var(--extra); width: 13px; height: 13px; }

/* ----------------------------------------------------------- appel à l'app */

/* Le sable et les coins carrés de la carte et du profil, le texte en brun :
   un appel, pas une alarme. */
.appli {
  background: var(--surface);
  color: var(--brun);
  border-radius: 0;
  padding: 18px 20px;
  margin: 8px 0 28px;
}
.appli p { margin: 0 0 10px; }
.appli-titre { font-family: var(--serif); font-size: 1.25em; font-weight: 700; color: var(--brun); }
.appli-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 0 !important; }
.bouton {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: #9a5f2c; color: #fff; font-weight: 700; text-decoration: none;
}
.bouton:hover { background: #85501f; }
.bientot { font-size: 14px; color: var(--brun-doux); }
/* En haut du volet, au-dessus de la carte : sur une seule ligne quand la
   largeur le permet. */
.appli-haut {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin: 0; padding: 10px 12px 10px 16px; flex: none;
}
.appli-haut .appli-titre { margin: 0; font-size: 1em; }
.appli-haut .appli-boutons { margin: 0 !important; gap: 4px 10px; }
.appli-haut .bouton { padding: 6px 13px; font-size: 14px; white-space: nowrap; }
.appli-haut .bientot { font-size: 13px; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .appli { color: #ece2d4; }
  .appli-titre { color: #f4ead9; }
  .bouton { background: #d6a56f; color: #2a1f16; }
  .bouton:hover { background: #e2b682; }
  .bientot { color: #b5a796; }
}

/* ------------------------------------------------------------------ étapes */

.etape { margin: 0 0 30px; scroll-margin-top: 16px; }
.etape h2 { font-size: 1.45rem; margin: 0 0 4px; }
.etape-n {
  display: block; font-family: var(--sans); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lien); margin-bottom: 2px;
}
.etape-meta { margin: 0 0 14px; font-size: 14px; color: var(--texte-doux); }
/* Une étape qui s’éclaire sur la carte : survolée, elle prend la couleur du tracé éclairé. */
.etape-prise { cursor: pointer; }
.etape-prise.survolee .etapes-nom, h2.etape-prise.survolee { color: var(--lien); }
.etape-vide { margin: 0; font-style: italic; color: var(--texte-doux); }

/* ------------------------------------------------------------------- lieux */

.lieu {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 16px;
  border: 2px solid transparent;
  scroll-margin-top: 16px;
}
/* Le palier se voit sans se lire : un liseré à gauche, de la couleur du point
   sur la carte, et une fiche d'autant plus grande que le lieu compte. */
.lieu { border-left: 5px solid var(--site); }
.lieu.palier-majeur { border-left-color: var(--majeur); }
.lieu.palier-extraordinaire {
  border-left-color: var(--extra);
  background: color-mix(in srgb, var(--extra) 13%, var(--surface));
}
/* La fiche allumée : un contour par-dessus sa bordure, qui ne change jamais.
   Repeindre la bordure d'une fiche arrondie laissait parfois des traînées. */
.lieu.actif { outline: 2px solid var(--site); outline-offset: -2px; }
.lieu.palier-majeur.actif { outline-color: var(--majeur); }
.lieu.palier-extraordinaire.actif { outline-color: var(--extra); }
.lieu.palier-extraordinaire > .lieu-corps { padding: 18px 22px 20px; }
.lieu.palier-extraordinaire h3 { font-size: 1.65rem; }

/* Un lieu en passant : une rangée, vignette à gauche. Touché, il se déplie
   en fiche complète : ces règles ne valent que repliée. */
.lieu.rangee:not(.deplie) { display: grid; grid-template-columns: 104px 1fr; margin-bottom: 12px; border-radius: 12px; }
.js .lieu.rangee:not(.deplie), .js .lieu.camping, .js li.ligne { cursor: pointer; }
.lieu.rangee:not(.deplie) .galerie { display: block; overflow: hidden; }
.lieu.rangee:not(.deplie) .galerie figure { height: 100%; }
.lieu.rangee:not(.deplie) .galerie figure + figure { display: none; }
.lieu.rangee:not(.deplie) .galerie img { height: 100%; min-height: 104px; aspect-ratio: auto; }
.lieu.rangee:not(.deplie) figcaption { display: none; }
.lieu.rangee:not(.deplie) .lieu-corps { padding: 10px 14px 12px; min-width: 0; }
.lieu.rangee:not(.deplie) .lieu-corps:first-child { grid-column: 1 / -1; }
.lieu.rangee:not(.deplie) h3 { font-size: 1.08rem; margin-top: 0; }
.lieu.rangee:not(.deplie) .lieu-meta { font-size: 13px; margin-bottom: 4px; }
.lieu.rangee:not(.deplie) .lieu-texte { font-size: 15px; margin-bottom: 4px; }
.lieu.rangee:not(.deplie) .lieu-source { font-size: 12px; }
/* Le texte replié sur deux lignes, avec le script qui sait le déplier. */
.js .lieu.rangee:not(.deplie) .lieu-texte {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
/* Repliée, les sources tiennent sur une ligne ; dépliée, la photo porte
   son crédit, et l'article reste cité. */
.lieu.rangee:not(.deplie) .lieu-source.ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lieu.rangee.deplie .credit { display: none; }
/* Le dépliage animé (le script) : seuls bougent la fiche et ce qui la suit,
   le reste de la page ne se fond pas. La photo garde son cadrage en
   grandissant, le texte glisse sans se déformer. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
::view-transition-group(deplie-photo), ::view-transition-group(deplie-corps) { overflow: clip; }
::view-transition-old(deplie-photo), ::view-transition-new(deplie-photo) {
  height: 100%; object-fit: cover;
}
::view-transition-old(deplie-corps), ::view-transition-new(deplie-corps) {
  width: auto; height: auto; inset: 0 auto auto 0;
}
/* L'ancien texte s'efface tout de suite, le nouveau arrive en fin de course :
   jamais les deux à la fois par-dessus la photo. */
::view-transition-old(deplie-corps) { animation: vt-sortie .1s ease-out both; }
::view-transition-new(deplie-corps) { animation: vt-entree .18s ease-in .14s both; }
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; } }

.galerie { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--bord); }
.galerie figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; }
.galerie.plusieurs figure { flex-basis: 88%; }
.galerie.plusieurs figure + figure { border-left: 3px solid var(--surface); }
.galerie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bord); }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 10px 5px; font-size: 11px; line-height: 1.35;
  color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  /* Un auteur de Commons s'écrit parfois sur cinq lignes : deux suffisent,
     le lien mène à la page complète. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.galerie figcaption a { color: #fff; }
/* Une photo en hauteur, entière dans le cadre 4:3, sur elle-même floutée. */
.galerie figure.portrait { overflow: hidden; }
.galerie figure.portrait::before {
  content: ""; position: absolute; inset: -24px;
  background: var(--photo) center / cover; filter: blur(18px) brightness(.7);
}
.galerie figure.portrait img { position: relative; object-fit: contain; background: none; }
.galerie figure.portrait figcaption { z-index: 1; }

.lieu-corps { padding: 14px 18px 16px; }
.lieu-palier {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lien);
}
.palier-extraordinaire .lieu-palier { color: var(--extra-texte); }
.lieu h3 { font-size: 1.3rem; margin: 4px 0 2px; }
.lieu-meta { margin: 0 0 8px; font-size: 14px; color: var(--texte-doux); }
.lieu-texte { margin: 0 0 8px; }
.lieu-source { margin: 0; font-size: 13px; color: var(--texte-doux); }
.aussi { margin: 10px 0 0; font-size: 14px; }

/* Un camping : la fiche d'un lieu en passant, sans texte ; ses services en
   pastilles, de quoi le joindre en dessous. */
.lieu.camping { margin-bottom: 12px; border-radius: 12px; }
.lieu.camping .lieu-corps { padding: 12px 16px 14px; }
.lieu.camping h3 { font-size: 1.12rem; margin-top: 0; }
.lieu.camping .lieu-meta { margin-bottom: 6px; }
.atouts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.atouts span {
  font-size: 12.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--fond); color: var(--texte-doux);
}
.contacts { margin: 0; font-size: 14.5px; }
.contacts span { color: var(--texte-doux); }
/* Un long trou sans camping : à lire avant de partir. */
.trou {
  margin: 4px 0 16px; padding: 10px 14px; font-size: 15px;
  background: var(--surface); border-left: 4px solid var(--extra);
}
.trou strong { color: var(--extra-texte); }
/* Après les campings d'une étape, les hôtels, chambres d'hôtes et gîtes
   Accueil Vélo : des fiches plus courtes, la source en dessous. */
.etape-sous-titre { margin: 20px 0 10px; font-weight: 600; font-size: 15px; }
.lieu.hebergement .lieu-source { margin-top: 4px; font-size: 12px; }

/* Un encadré pratique de la page « En train » : le vélo à bord, le retour. */
.encadre {
  margin: 0 0 24px; padding: 12px 16px; font-size: 15px;
  background: var(--surface); border-left: 4px solid var(--lien); border-radius: 0 12px 12px 0;
}
.encadre p { margin: 0 0 8px; }
.encadre p:last-child { margin-bottom: 0; }
.encadre-titre { font-family: var(--serif); font-weight: 700; color: var(--titre); }

/* La page « Pratique » : les familles comptées, leur pictogramme devant. */
.pratique-total { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 14.5px; }
.pratique-total .famille { display: inline-flex; align-items: center; gap: 6px; }
.pratique-total .famille.aucun { color: var(--texte-doux); }
.pratique-total .famille.aucun img { opacity: .4; }
.famille-titre { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-weight: 600; cursor: pointer; }
p.famille-titre { cursor: default; }
.famille-titre.aucun { font-weight: 400; color: var(--texte-doux); }
.famille-titre.aucun img { opacity: .4; }
.famille-liste > summary { list-style: none; }
.famille-liste > summary::-webkit-details-marker { display: none; }
.famille-liste > summary::after { content: '▸'; color: var(--texte-doux); font-weight: 400; }
.famille-liste[open] > summary::after { content: '▾'; }
.lignes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.lignes li { padding: 6px 12px; background: var(--surface); border-radius: 10px; font-size: 14.5px; }
.lignes li.actif { outline: 2px solid var(--lien); }
.lignes li span { display: block; color: var(--texte-doux); font-size: 13.5px; }

/* Les principaux lieux d'une ville, dans sa fiche. */
.enfants { display: grid; gap: 12px; padding: 0 12px 12px; }
.lieu.dedans { margin: 0; background: var(--fond); border-radius: 12px; border: 0; box-shadow: none; }
.lieu.dedans .lieu-corps { padding: 12px 14px 14px; }
.lieu h4 { font-family: var(--serif); color: var(--titre); font-size: 1.12rem; line-height: 1.2; margin: 4px 0 2px; }

/* ------------------------------------------------------------------- carte */

.carte { margin: 0; background: var(--surface); border-radius: 16px; padding: 10px; }
.carte svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); }
.carte figcaption { font-size: 12px; color: var(--texte-doux); padding: 4px 6px 0; }

/* La carte zoomable de `carte.js` prend la place du dessin : sur un écran
   large, toute la hauteur que laisse le volet, qui grandit quand on replie le
   profil (MapLibre suit la taille de son cadre) ; un carré généreux sur un
   téléphone. Coins carrés : la carte est une fenêtre sur le terrain.
   Le dessin attend la carte dans le même cadre, et centré comme elle : sans
   quoi le tracé, en haut d'un cadre plus petit, sautait plus bas à son
   arrivée. */
.carte.zoomable { flex: 1 1 auto; min-height: 360px; display: flex; flex-direction: column; border-radius: 0; position: relative; }
.carte.zoomable svg { flex: 1 1 0; min-height: 0; max-height: none; }
.carte.vivante svg { display: none; }
/* Le crédit, dans le bas de la carte, comme sur toute carte en ligne. */
.carte.zoomable figcaption {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  padding: 2px 6px; font-size: 11px; background: color-mix(in srgb, var(--surface) 80%, transparent);
  pointer-events: none;
}
.carte-vivante { flex: 1 1 auto; overflow: hidden; background: var(--surface); }
@media (max-width: 899px) {
  .carte.zoomable { min-height: 0; }
  .carte-vivante, .carte.zoomable svg { flex: none; height: min(70vh, 92vw, 520px); }
}
.carte-vivante .maplibregl-ctrl-group { background: var(--fond); box-shadow: 0 0 0 1px var(--bord); }
.carte-vivante .maplibregl-ctrl-group button + button { border-top-color: var(--bord); }
@media (prefers-color-scheme: dark) {
  .carte-vivante .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
}
.carte-vivante .maplibregl-cooperative-gesture-screen { font: 15px var(--sans); }

.trace-fond { fill: none; stroke: var(--fond); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.trace { fill: none; stroke: var(--trace); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.ville circle { fill: var(--fond); stroke: var(--trace); stroke-width: 2.5; }
.ville.bout circle { fill: var(--trace); }
.ville text {
  font: 600 19px var(--sans); fill: var(--texte-doux);
  paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round;
}
.ville.bout text { fill: var(--titre); font-size: 22px; }
/* Sur un téléphone, la carte fait un tiers de sa largeur de bureau : les noms
   d'étape y seraient illisibles. Restent le départ et l'arrivée, en grand. */
@media (max-width: 599px) {
  .ville:not(.bout) text { display: none; }
  .ville.bout text { font-size: 34px; }
  /* Et des points assez gros pour le doigt. */
  .point circle { r: 15; stroke-width: 4; }
  .point.palier-majeur circle { r: 18; }
  .point.palier-extraordinaire circle { r: 24; }
  .point.actif circle { r: 26; }
}

.point circle {
  fill: var(--site); stroke: var(--surface); stroke-width: 3;
  transition: r .15s;
}
.point.palier-majeur circle { fill: var(--majeur); }
.point.palier-extraordinaire circle { fill: var(--extra); }
.point:hover circle, .point:focus-visible circle, .point.actif circle {
  stroke: var(--titre); stroke-width: 4;
}
.point.actif circle { r: 16; }
.point:focus { outline: none; }

/* ------------------------------------------------------------------ profil */

.profil { background: var(--surface); border-radius: 0; padding: 10px 14px; }
.profil summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--titre); }
.profil svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.relief { fill: var(--relief); stroke: var(--majeur); stroke-width: 1.5; }
.borne { stroke: var(--texte-doux); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.etiquette { font: 600 14px var(--sans); fill: var(--texte-doux); text-anchor: middle; }
.axe { font: 13px var(--sans); fill: var(--texte-doux); text-anchor: end; }
/* L'endroit pointé, que la carte montre aussi. */
.profil svg.pointable { cursor: crosshair; touch-action: pan-y; overflow: visible; }
.curseur { display: none; pointer-events: none; }
.curseur.vu { display: inline; }
.curseur line { stroke: var(--titre); stroke-width: 1.5; }
.curseur circle { fill: var(--surface); stroke: var(--titre); stroke-width: 3; }
.curseur text { font: 600 20px var(--sans); fill: var(--titre); paint-order: stroke; stroke: var(--surface); stroke-width: 4; }
.profil-note { margin: 4px 0 0; font-size: 12px; color: var(--texte-doux); }

/* -------------------------------------------------------------------- pied */

.pied { border-top: 1px solid var(--bord); padding-top: 14px; font-size: 13px; color: var(--texte-doux); }
.pied p { margin: 0 0 8px; }
/* Sans script, la page « Pratique » n'a que ses comptes : elle le dit. */
.sans-script { margin: 0 0 12px; color: var(--texte-doux); font-size: 14px; }
.js .sans-script { display: none; }