/* ==========================================================================
   CARTE DES TOURNÉES — styles propres à la page carte-des-tournees.html
   (les couleurs et polices viennent de css/style.css)
   ========================================================================== */

/* Chiffres clés sous le bandeau */
.carte-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  font-size: .95rem;
  color: var(--encre-douce);
}
.carte-chiffres strong {
  font-family: var(--police-titre);
  font-size: 2rem;
  font-weight: 800;
  color: var(--corail);
  margin-right: .25em;
  vertical-align: -2px;
}

/* Filtres par spectacle */
.carte-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.cf-bouton {
  font: 700 .86rem/1 var(--police-texte);
  padding: .55em 1em;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.cf-bouton small { font-weight: 400; color: var(--encre-douce); margin-left: .2em; }
.cf-bouton:hover { background: var(--jaune-clair); transform: translateY(-1px); }
.cf-bouton[aria-pressed="true"] { background: var(--jaune); box-shadow: 3px 3px 0 var(--encre); }
.cf-bouton[aria-pressed="true"] small { color: var(--encre); }
.cf-ancien { border-style: dashed; border-color: var(--encre-douce); }

/* Carte + liste */
.carte-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 0;
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  box-shadow: 10px 10px 0 var(--encre);
  background: var(--scene);
  overflow: hidden;
}
.carte-cadre { position: relative; min-height: 640px; }
#carte-tournees { position: absolute; inset: 0; background: #f4eee1; }
.carte-indisponible { display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; color: var(--encre-douce); }

/* Boutons de vue posés sur la carte, comme des tickets */
.carte-vues {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 80px);
}
.carte-vues button {
  font: 700 .82rem/1 var(--police-texte);
  padding: .6em .95em;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 2px 2px 0 var(--encre);
  cursor: pointer;
}
.carte-vues button:hover { background: var(--jaune); }

/* Légende */
.carte-legende {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  font-size: .78rem;
  line-height: 1.5;
  background: rgba(255, 252, 245, .92);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  color: var(--encre);
  pointer-events: none;
}
.carte-legende li { display: flex; align-items: center; gap: 8px; }
.carte-legende i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--encre); flex: none; }
.carte-legende .lg-colonne { width: 10px; height: 18px; border-radius: 2px; background: linear-gradient(#f0a81c, #ffe27a); }

/* Panneau liste */
.carte-panneau {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 640px;
  background: var(--scene);
  color: var(--creme);
  border-left: 2px solid var(--encre);
}
.carte-panneau-tete { padding: 18px 18px 12px; border-bottom: 1px solid var(--scene-trait); }
.carte-panneau-tete label { display: block; font-family: var(--police-main); font-size: 1.35rem; color: var(--jaune); line-height: 1; margin-bottom: 8px; }
.carte-panneau-tete input {
  width: 100%;
  font: 400 .95rem var(--police-texte);
  padding: .6em .9em;
  border: 2px solid var(--scene-trait);
  border-radius: 999px;
  background: var(--scene-2);
  color: var(--creme);
}
.carte-panneau-tete input:focus { outline: none; border-color: var(--jaune); }
.carte-panneau-tete p { margin: 8px 2px 0; font-size: .8rem; color: var(--creme-douce); }
.carte-liste { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; scrollbar-color: var(--scene-trait) transparent; }
.carte-liste li[hidden] { display: none; }
.carte-liste button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 18px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.carte-liste button:hover, .carte-liste button:focus-visible { background: var(--scene-2); outline: none; }
.cl-ville { display: block; font-weight: 700; font-size: .95rem; }
.cl-ville small { font-weight: 400; color: var(--creme-douce); }
.cl-lieux { display: block; font-size: .8rem; color: var(--creme-douce); line-height: 1.35; }
.cl-avenir {
  display: inline-block;
  margin-top: 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--corail);
  color: var(--blanc);
}

/* Bulle d'une ville sur la carte */
.pc-bulle .maplibregl-popup-content {
  padding: 16px 18px 14px;
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  background: var(--blanc);
  box-shadow: 6px 6px 0 var(--encre);
  font-family: var(--police-texte);
  color: var(--encre);
  max-height: 340px;
  overflow-y: auto;
}
.pc-bulle .maplibregl-popup-close-button { font-size: 22px; width: 30px; height: 30px; color: var(--encre); }
.pc-bulle.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--encre); }
.pc-bulle.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--encre); }
.pc-bulle.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--encre); }
.pc-bulle.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--encre); }
.pc-ville { font-family: var(--police-titre); font-weight: 800; font-size: 1.25rem; line-height: 1.1; margin: 0 26px 8px 0; }
.pc-ville span { font-weight: 400; color: var(--encre-douce); font-size: 1rem; }
.pc-avenir { margin: 0 0 8px; padding: 4px 10px; border-radius: 4px; background: var(--corail-clair); color: #8f2c18; font-size: .82rem; font-weight: 700; }
.pc-lieux { list-style: none; margin: 0; padding: 0; }
.pc-lieux > li { padding: 8px 0; border-top: 1px dashed var(--trait); }
.pc-lieux > li:first-child { border-top: 0; padding-top: 0; }
.pc-lieux strong { display: block; font-size: .98rem; line-height: 1.25; }
.pc-spectacles { list-style: none; margin: 4px 0 8px; padding: 0; font-size: .84rem; }
.pc-spectacles li { padding: 1px 0; }
.pc-spectacles li::before { content: "›"; color: var(--corail); font-weight: 800; margin-right: .4em; }
.pc-spectacles a { color: var(--petrole); font-weight: 700; }
.pc-annees { color: var(--encre-douce); }
.pc-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.pc-bouton {
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  padding: .45em .9em;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--jaune);
  color: var(--encre);
}
.pc-bouton::after { content: " ↗"; }
.pc-bouton:hover { background: var(--encre); color: var(--jaune); }
.pc-bouton-contour { background: transparent; }
.pc-reps { font-size: .74rem; color: var(--encre-douce); margin-left: auto; }

/* Commandes MapLibre aux couleurs du site */
#carte-tournees .maplibregl-ctrl-group { border: 2px solid var(--encre); border-radius: 8px; box-shadow: 2px 2px 0 var(--encre); }
#carte-tournees .maplibregl-ctrl-attrib { font-size: 11px; }

/* Liste complète des lieux (texte, lu aussi par les moteurs de recherche) */
.lieux-texte { columns: 3 250px; column-gap: 34px; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--encre-douce); }
.lieux-texte li { break-inside: avoid; padding: 3px 0; }
.lieux-texte strong { color: var(--encre); }
.lieux-texte a { color: inherit; }
.lieux-region { break-after: avoid; font-family: var(--police-titre); font-size: 1.05rem; color: var(--encre); margin: 18px 0 4px; }
.lieux-region:first-child { margin-top: 0; }

/* Petits écrans : la liste passe sous la carte */
@media (max-width: 900px) {
  .carte-zone { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--encre); }
  .carte-cadre { min-height: 70vh; }
  .carte-panneau { border-left: 0; border-top: 2px solid var(--encre); max-height: 460px; }
}
@media (max-width: 520px) {
  .carte-vues button { font-size: .75rem; padding: .5em .75em; }
  .carte-legende { display: none; }
  .carte-chiffres strong { font-size: 1.6rem; }
}
@media print {
  .carte-zone, .carte-filtres { display: none; }
}

/* La légende s'efface quand une fiche de ville est ouverte */
.carte-legende { transition: opacity .2s; }
.bulle-ouverte .carte-legende { opacity: 0; }