/* Skywayback — Explorateur (carte + filtres + facettes + recherche + liste) — dark mode */

/* ---- Filtres catégorie (chips) ---- */
.exp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }

/* Bouton « Filtrer » : caché par défaut (desktop / sans JS). Rendu repliable seulement
   sur mobile ET quand explorer.js a posé la classe .is-collapsible (sinon, sans JS, les
   filtres restent visibles et le bouton reste masqué). */
.exp-filter-toggle { display: none; }
@media (max-width: 640px) {
  .exp-filter-toggle.is-collapsible {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    box-sizing: border-box; gap: 8px; margin: 14px 0 10px; padding: 11px 14px;
    border-radius: 12px; background: #1b1c21; border: 1.5px solid #2c2e34;
    color: #e9eaec; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .exp-filter-toggle.is-collapsible::after { content: '\25be'; transition: transform .2s; }
  .exp-filter-toggle.is-collapsible[aria-expanded="true"]::after { transform: rotate(180deg); }
  .exp-filters.is-collapsible { display: none; }
  .exp-filters.is-collapsible.open { display: flex; margin-top: 0; }
}
.exp-filters .chip {
  --c: #6b7178;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: #e9eaec;
  background: #1b1c21; border: 1.5px solid #2c2e34; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.exp-filters .chip .n {
  font-size: 12px; font-weight: 700; color: #aeb4bb;
  background: #0e0f12; border-radius: 999px; padding: 1px 7px;
}
.exp-filters .chip:hover { border-color: var(--c); }
.exp-filters .chip.on {
  border-color: var(--c); background: #23252b;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.exp-filters .chip.on .n { color: #e9eaec; }

/* ---- Facettes (selects : époque / ampleur) ---- */
.exp-facets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.exp-facets label { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #9aa0a6; }
.exp-facets select {
  font-family: inherit; font-size: 14px; font-weight: 600; color: #e9eaec;
  background: #1b1c21; border: 1.5px solid #2c2e34; border-radius: 999px;
  padding: 7px 11px; cursor: pointer;
}
.exp-facets select:focus { outline: none; border-color: #ff2d55; }

/* ---- Recherche + autocomplétion ---- */
.exp-search-wrap { position: relative; margin-bottom: 12px; }
#exp-search {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  border: 1.5px solid #2c2e34; border-radius: 12px; background: #16171b; color: #e9eaec;
  font-family: inherit;
}
#exp-search::placeholder { color: #6b7178; }
#exp-search:focus { outline: none; border-color: #ff2d55; }
#exp-suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 6px; background: #1b1c21;
  border: 1.5px solid #2c2e34; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
#exp-suggest li { padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #e9eaec; }
#exp-suggest li:hover, #exp-suggest li[aria-selected="true"] { background: #2a2c33; }

/* ---- Carte ---- */
#exp-map {
  width: 100%; height: 380px; border-radius: 16px; overflow: hidden;
  background: #0b0b0c; margin-bottom: 16px;
}
.maplibregl-popup-content {
  font-family: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  background: #15161a; color: #e9eaec; border: 1px solid #2a2c33;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.maplibregl-popup-content strong { color: #fff; }
/* Flèche du popup (tip) accordée au fond sombre, pour chaque position d'ancrage. */
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #15161a; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #15161a; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #15161a; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #15161a; }

/* ---- Liste ---- */
.exp-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 620px) { .exp-cards { grid-template-columns: 1fr 1fr; } }
.exp-card a {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  padding: 13px 14px; border: 1px solid #26282d; border-radius: 13px;
  background: #16171b; color: #e9eaec; transition: border-color .15s, background .15s;
}
.exp-card a:hover { border-color: #3a3d44; background: #1b1c21; }
.exp-card .m {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #8b9097;
}
.exp-card .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.exp-card .t { font-weight: 600; font-size: 15px; line-height: 1.3; }

.exp-note { color: #9aa0a6; font-size: 14px; margin: 2px 2px 12px; }
#exp-deps { margin-top: 4px; }

/* [hidden] doit l'emporter sur les display: des règles ci-dessus (sinon facettes/listes restent visibles) */
.exp-facets label[hidden], #exp-list[hidden] { display: none; }