/* Page d'un lieu (/sans-voiture/<lieu>/) : le lieu au centre de ses destinations. */

.bandeau-lieu { position: relative; overflow: hidden; padding-bottom: clamp(32px, 5vw, 56px); }
.lieu-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.lieu-hero-texte { min-width: 0; }
.bandeau .lieu-titre {
  max-width: none;
  font-size: clamp(36px, 5vw, 76px);
  font-stretch: 108%;
  line-height: .95;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lieu-titre .masque { display: block; overflow: hidden; padding-bottom: .06em; }
.lieu-titre .monte { display: inline-block; }
.lieu-titre .titre-italique { color: var(--signal); }

/* Le réseau du lieu : ses destinations dans leur vraie direction. */
.lieu-reseau { margin: 0; min-width: 0; }
.lieu-reseau svg { display: block; width: 100%; height: auto; overflow: visible; }
.lieu-reseau-lignes path {
  fill: none;
  stroke: var(--reseau);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: og-trace 1.2s var(--ease-trace) both;
  animation-delay: calc(var(--retard) + .3s);
}
.lieu-reseau-points circle {
  fill: var(--blanc);
  transform-box: fill-box;
  transform-origin: center;
  animation: og-rebond .5s var(--ease-pop) both;
  animation-delay: calc(var(--retard) + 1.1s);
}
.lieu-reseau-noms text { fill: var(--blanc); font-family: var(--texte); font-size: 14px; }
.lieu-reseau-noms .nom { font-weight: 700; }
.lieu-reseau-noms .duree { fill: var(--signal); font-family: var(--titre); font-size: 13px; font-weight: 800; }
.lieu-reseau-noms { animation: og-apparait .6s var(--ease-out) both; animation-delay: calc(var(--retard) + 1.2s); }
.lieu-reseau-centre { fill: var(--signal); }
.lieu-reseau-onde {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: og-onde 2.4s var(--ease-out) infinite;
  animation-delay: calc(var(--retard) + 1.4s);
}
/* Les lignes se dessinent l'une après l'autre. */
.lieu-reseau-lignes path:nth-child(2) { animation-delay: calc(var(--retard) + .38s); }
.lieu-reseau-lignes path:nth-child(3) { animation-delay: calc(var(--retard) + .46s); }
.lieu-reseau-lignes path:nth-child(4) { animation-delay: calc(var(--retard) + .54s); }
.lieu-reseau-lignes path:nth-child(5) { animation-delay: calc(var(--retard) + .62s); }
.lieu-reseau-lignes path:nth-child(6) { animation-delay: calc(var(--retard) + .7s); }
.lieu-reseau-lignes path:nth-child(n + 7) { animation-delay: calc(var(--retard) + .78s); }

/* Chiffres clés. */
.lieu-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
}
.lieu-chiffres > div {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--rayon-carte);
  background: var(--blanc);
}
.lieu-chiffres dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.lieu-chiffres dd { margin: 0; font-family: var(--titre); font-size: clamp(28px, 3vw, 36px); font-weight: 800; font-stretch: 90%; line-height: 1.05; }
.lieu-chiffres span { font-size: 14px; color: var(--gris); }

/* Destinations : une carte par trajet. */
.lieu-section-titre { font-size: clamp(24px, 2.6vw, 32px); font-stretch: 105%; }
.lieu-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.lieu-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 18px;
  border: 1px solid transparent;
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out);
}
.lieu-carte:hover, .lieu-carte:focus-within { transform: translateY(-3px); border-color: var(--outremer); }
.lieu-carte-sens { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.lieu-carte-nom { margin: 0; font-size: 21px; font-stretch: 100%; line-height: 1.15; }
.lieu-carte-nom a { color: var(--encre); text-decoration: none; }
/* Toute la carte est cliquable. */
.lieu-carte-nom a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lieu-carte-nom a:focus-visible { outline: none; }
.lieu-carte:has(a:focus-visible) { outline: 3px solid var(--outremer); outline-offset: 3px; }
.lieu-carte-duree {
  position: relative;
  margin: 6px 0 0;
  padding-top: 12px;
  font-family: var(--titre);
  font-size: 34px;
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1;
  color: var(--outremer);
}
/* Le trait jaune au-dessus de la durée. */
.lieu-carte-duree::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 5px; border-radius: 999px; background: var(--signal); }
.lieu-carte-duree span { font-family: var(--texte); font-size: 14px; font-weight: 500; color: var(--gris); }
.lieu-carte-detail { margin: 0; font-size: 14px; color: var(--gris); }
.lieu-carte-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.lieu-carte-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lieu-carte-types li { padding: 3px 10px; border: 1.5px solid var(--encre); border-radius: var(--rayon-pastille); font-size: 13px; font-weight: 700; }
.lieu-carte-prix { margin: 0; padding: 4px 10px; border-radius: var(--rayon-pastille); background: var(--badge-prix-bg); color: var(--badge-prix-fg); font-weight: 800; }
.lieu-carte-prix span { font-size: 12px; font-weight: 600; }

@media (max-width: 900px) {
  .lieu-hero { grid-template-columns: minmax(0, 1fr); }
  .lieu-reseau { max-width: 560px; }
}
@media (max-width: 720px) {
  .lieu-reseau-noms text { font-size: 17px; }
  .lieu-reseau-noms .duree { font-size: 16px; }
  .lieu-cartes { grid-template-columns: minmax(0, 1fr); }
}

/* Pages des régions : chaque lieu à sa place, les lieux voisins en petit. */
.region-reseau .lieu-reseau-lignes path { stroke-width: 1.6; opacity: .75; }
.region-reseau .lieu-reseau-points .voisin { fill: var(--reseau); }
.region-reseau .lieu-reseau-noms text { font-size: 13px; }
.region-lieux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.region-lieux .lieu-carte-duree { font-size: 28px; }