/* balades.css — pages balades/lieux (nouveau chantier), classes .bal- uniquement.
   Réutilise les tokens (--or, --bordeaux, --pierre, --mute, --line, --radius,
   --max-w, --pad-x, --section-gap) et les classes communes (.container,
   .btn-primary, .content-zone) définies dans site.css. Ne modifie pas site.css. */

.bal-breadcrumb {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 1rem var(--pad-x) 0;
}
.bal-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
  color: var(--mute);
}
.bal-breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: .35rem;
  color: var(--mute);
}
.bal-breadcrumb a {
  color: var(--mute);
  text-decoration: none;
}
.bal-breadcrumb a:hover {
  color: var(--bordeaux);
  text-decoration: underline;
}
.bal-breadcrumb li[aria-current="page"] {
  color: var(--encre);
  font-weight: 500;
}

.bal-figure {
  max-width: var(--max-w);
  margin: 1.5rem auto;
  padding-inline: var(--pad-x);
}
.bal-figure picture,
.bal-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--line);
}
.bal-figure__credit {
  font-size: .75rem;
  color: var(--mute);
  margin-top: .5rem;
}
.bal-figure__credit a {
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bal-chapo {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  font-size: 1.0625rem;
  color: var(--mute);
  max-width: 66ch;
}

.bal-pratique {
  background: var(--pierre-2);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
  list-style: none;
}
.bal-pratique li {
  margin-bottom: .4rem;
  color: var(--encre);
}
.bal-pratique li:last-child { margin-bottom: 0; }

.bal-conseil {
  background: var(--pierre-2);
  border-left: 3px solid var(--or);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-block: 1.25rem;
  color: var(--encre);
}

.bal-etape {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  align-items: start;
  margin-block: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.bal-etape:last-child { border-bottom: none; }
.bal-etape__figure {
  margin: 0;
}
.bal-etape__figure picture,
.bal-etape__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.bal-etape__credit {
  font-size: .6875rem;
  color: var(--mute);
  margin-top: .35rem;
}
.bal-etape__liaison {
  font-style: italic;
  color: var(--mute);
  margin-bottom: .5rem;
}
.bal-etape__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: .35rem;
}
.bal-etape__name a {
  color: inherit;
  text-decoration: none;
}
.bal-etape__name a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .bal-etape {
    grid-template-columns: 1fr;
  }
}

.bal-3d { text-align: center; margin: .25rem 0 1.5rem; }
.bal-3d__btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 1.5px solid var(--bordeaux);
  border-radius: 999px;
  color: var(--bordeaux) !important;
  font-weight: 600;
  text-decoration: none !important;
}
.bal-3d__btn:hover { background: var(--bordeaux); color: #fff !important; }

.bal-cta {
  margin-block: 1.5rem;
}

.bal-adresses {
  margin-top: .5rem;
}
.bal-adresses__more {
  margin-top: .75rem;
  font-size: .9375rem;
}

/* ═══ FIX-MOBILE-20260927 — point 7 : fil d'Ariane sur mobile ═══
   Le dernier element (titre complet de la balade) se casse sur 2 lignes.
   Tronque sur une seule ligne avec ellipse, sans toucher au texte ni au
   JSON-LD (breadcrumb_schema garde le nom complet). */
@media (max-width: 640px) {
  .bal-breadcrumb ol {
    flex-wrap: nowrap;
  }
  .bal-breadcrumb li[aria-current="page"] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/* ═══ fin FIX-MOBILE-20260927 ═══ */

/* ═══ lien-carte-20260927 — lien "voir sur la carte 3D" ═══
   a { color: inherit; } (site.css) rend les liens noirs sur fond blanc :
   règle dédiée avec couleur explicite pour rester visible partout. */
.lien-carte-wrap { margin: .6rem 0 0; }
.lien-carte {
  color: var(--bordeaux) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.lien-carte--top { font-size: 1rem; text-decoration: underline !important; }
.lien-carte:hover, .lien-carte:focus { text-decoration: underline !important; }
/* ═══ fin lien-carte-20260927 ═══ */

/* ═══ carte-hub-20260927 — page hub « carte de Bordeaux » ═══ */
.bal-hub-cta {
  max-width: var(--max-w);
  margin: 1.1rem auto 0;
  padding-inline: var(--pad-x);
  text-align: center;
}
.bal-hub-btn {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  padding: 1rem 1.5rem;
  background: var(--bordeaux);
  color: #FFF !important;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none !important;
  transition: background .15s;
}
.bal-hub-btn:hover { background: #6B1828; }
.bal-hub-note {
  margin: .6rem 0 0;
  font-size: .8125rem;
  color: var(--mute);
}
.bal-hub-mapimg { margin-top: 1.1rem; }
.bal-hub-mapimg a { display: block; }
.bal-hub-mapimg a:hover img { opacity: .92; }
.bal-hub-quartiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
}
.bal-hub-quartier {
  background: var(--pierre-2);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.bal-hub-quartier h3 {
  margin-top: 0;
  color: var(--bordeaux);
}
@media (max-width: 640px) {
  .bal-hub-quartiers { grid-template-columns: 1fr; }
}
.bal-hub-groupe { margin-top: 1.75rem; }
.bal-hub-groupe:first-of-type { margin-top: .5rem; }
/* ═══ fin carte-hub-20260927 ═══ */