.p-releases {
  margin-bottom: 10px;
}

.post-image {
  height: 400px;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  width: 100%;
  border-radius: 1rem !important;
}

.red-icon {
  color: red!important;
}

.div-btn-itineraire {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 379px) {
  .btn-itineraire-google {
    margin-bottom: 1rem;
  }
}

@media (min-width: 396px) {
  .btn-itineraire-google {
    margin-right: 1rem;
  }
}

.col-cb-pref-comunity {
  flex: 0 0 auto!important;
  width: 6%;
}

.banner-success {
  background-color: rgba(48,186,95,0.4)!important;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #00b4c9;
  --bs-btn-border-color: #00b4c9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0099ab;
  --bs-btn-hover-border-color: #0090a1;
  --bs-btn-focus-shadow-rgb: 38, 191, 209;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0090a1;
  --bs-btn-active-border-color: #008797;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #00b4c9;
  --bs-btn-disabled-border-color: #00b4c9;
  color: white;
}

:root, [data-bs-theme=light] {
  --bs-info: #00b4c9;
  --bs-info-rgb: 0, 180, 201;
  --bs-info-text-emphasis: #004850;
  --bs-info-bg-subtle: #ccf0f4;
  --bs-info-border-subtle: #99e1e9;
}

.bg-info-light {
  background: #e8fdff !important;
}

.carousel-inner > .carousel-item > img {
  border-radius: 1rem !important;
  margin: 0 auto;
  max-width: 80%;
}

/* Le site paraissait "squished"/centré sur grand écran : le .container Bootstrap
   plafonne à 1140px (xl) / 1320px (xxl), laissant de grandes marges latérales
   (la marque de la navbar semblait vers le centre). On élargit le conteneur sur
   les grands écrans pour que le contenu occupe mieux la largeur. Les blocs de
   texte gardent leurs propres max-width internes (ex. style="max-width:900px").
   Web uniquement (l'admin a son propre CSS et n'était pas concerné). */
@media (min-width: 1200px) {
  .container {
    max-width: 1480px;
  }
}

/* Buscador unifié (/hikes/search.html) : la carte reste visible pendant le
   défilement des résultats sur desktop ; hauteur fixe sur mobile (vue Mapa). */
.rdn-map-sticky {
  position: sticky;
  top: 180px;
  height: calc(100vh - 210px);
}
@media (max-width: 991.98px) {
  .rdn-map-sticky {
    position: static;
    height: 70vh;
  }
}

/* Buscador : bascule « pantalla completa » du mapa (>= lg). Le bouton flotte
   en haut à droite de la carte ; au clic, la colonne des résultats se replie
   et la carte occupe toute la largeur, avec transition. */
.rdn-map-fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.rdn-map-fullscreen-btn:hover {
  transform: scale(1.05);
}
@media (min-width: 992px) {
  #results-col,
  #map-col {
    transition: width 0.4s ease, flex-basis 0.4s ease, max-width 0.4s ease, opacity 0.35s ease, padding 0.4s ease;
  }
  /* Buscador (vue scindée liste+carte) : la colonne des résultats défile en
     interne, à hauteur fixe comme la carte sticky à côté. Ainsi le nombre de
     cartes rendues ne change JAMAIS la hauteur du document : quand un zoom
     restreint la liste aux excursions du viewport, le document ne se raccourcit
     pas d'un coup et le footer ne remonte plus brutalement au milieu de la vue
     (la carte reste centrée, le footer sous la section). Ne s'applique qu'en vue
     scindée (col-lg-7) : sans carte, la liste passe en col-lg-12 et défile
     normalement avec la page. */
  #results-col.col-lg-7 {
    position: sticky;
    top: 180px;
    height: calc(100vh - 210px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .rdn-map-fullscreen #results-col {
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    overflow: hidden;
  }
  .rdn-map-fullscreen #map-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Pendant la transition de largeur de la colonne, on laisse le canvas
     MapLibre s'étirer avec son conteneur au lieu de re-générer le buffer WebGL
     à chaque frame. Ça évite le flash blanc de tuiles non chargées quand la
     carte s'agrandit ; on ne resize le buffer (rendu net) qu'à la fin de la
     transition, côté JS (voir afterColTransition dans searchUnified.mjs). */
  #map .maplibregl-canvas {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
   Buscador « Más filtros » : panneau de filtres avancés (sliders bi-poignées
   min–max pour tiempo / distancia / desnivel + interrupteur « Solo con GPX »).
   Chaque filtre est une tuile encadrée, cohérente avec la charte : accent rouge
   de la marque (--bs-danger, comme « Borrar filtros » et les repères de la
   carte) qui s'illumine quand le filtre est actif. Compatible thème clair/sombre
   via les tokens Bootstrap.
--------------------------------------------------------------------------- */
#more-filters .card {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 14px;
}
/* Tuile de filtre : même cadre pour les sliders et l'interrupteur GPX. */
.rdn-range-filter,
#bool-filters {
  min-width: 210px;
  padding: 0.6rem 0.85rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
#bool-filters {
  min-width: 180px;
  justify-content: center;
}
/* Filtre slider actif : liseré + halo rouge discret pour le signaler d'un coup d'œil. */
.rdn-range-filter:not(.rdn-range-off) {
  border-color: var(--bs-danger, #dc3545);
  box-shadow: 0 0 0 1px var(--bs-danger, #dc3545), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.rdn-range-filter.rdn-range-off {
  opacity: 0.72;
}
.rdn-range-filter .rdn-range-readout {
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
/* Piste + remplissage sous les deux <input type=range> superposés. */
.rdn-dual-range {
  position: relative;
  height: 26px;
  margin-top: 4px;
}
.rdn-dual-range-track {
  position: absolute;
  top: 11px;
  left: 0;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--bs-secondary-bg, #dee2e6);
}
.rdn-dual-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--bs-danger, #dc3545);
}
/* Les deux curseurs occupent toute la largeur et se superposent. On coupe les
   pointer-events sur la piste native et on ne les rétablit que sur la poignée,
   sinon le curseur du dessus capterait tous les clics et l'autre serait
   inatteignable. */
.rdn-dual-range input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.rdn-dual-range input[type="range"]:focus {
  outline: none;
}
.rdn-dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--bs-danger, #dc3545);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.rdn-dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bs-danger, #dc3545);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
/* Halo au survol / focus clavier de la poignée. */
.rdn-dual-range input[type="range"]:hover::-webkit-slider-thumb,
.rdn-dual-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 5px rgba(220, 53, 69, 0.22);
}
.rdn-dual-range input[type="range"]:hover::-moz-range-thumb,
.rdn-dual-range input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 5px rgba(220, 53, 69, 0.22);
}
.rdn-dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}
.rdn-dual-range input[type="range"]::-moz-range-track {
  height: 5px;
  background: transparent;
}
.rdn-range-filter.rdn-range-off .rdn-dual-range input[type="range"]::-webkit-slider-thumb {
  background: var(--bs-secondary-color, #6c757d);
}
.rdn-range-filter.rdn-range-off .rdn-dual-range input[type="range"]::-moz-range-thumb {
  background: var(--bs-secondary-color, #6c757d);
}
.rdn-range-filter.rdn-range-off .rdn-dual-range-fill {
  background: var(--bs-secondary-color, #6c757d);
}
/* Interrupteurs de « Más filtros » (toggles des sliders + GPX) : plus grands,
   pour ne plus paraître minuscules face aux boutons/selects, et à l'accent rouge
   de la marque une fois activés. */
#more-filters .form-switch {
  padding-left: 2.8em;
  min-height: 1.4rem;
  display: flex;
  align-items: center;
}
#more-filters .form-switch .form-check-input {
  width: 2.4em;
  height: 1.2em;
  margin-left: -2.8em;
  margin-top: 0;
  cursor: pointer;
}
#more-filters .form-switch .form-check-label {
  cursor: pointer;
  font-size: 0.9rem;
}
#more-filters .form-check-input:checked {
  background-color: var(--bs-danger, #dc3545);
  border-color: var(--bs-danger, #dc3545);
}
#more-filters .form-check-input:focus {
  border-color: rgba(220, 53, 69, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Cartes d'aperçu d'excursion (returnExcuCardHTML) : léger relief au survol
   pour signaler que toute la carte est cliquable (stretched-link). */
.rdn-excu-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rdn-excu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* ---------------------------------------------------------------------------
   Pop-ups des excursions sur la carte du buscador (MapLibre GL).
   Carte compacte : cover pleine largeur, titre, méta (km/desnivel/tiempo),
   description tronquée et bouton "Descubrir". La classe .rdn-popup est posée
   via l'option MapLibre { className } (voir searchUnified.mjs).
--------------------------------------------------------------------------- */
.rdn-popup .maplibregl-popup-content {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.rdn-popup .maplibregl-popup-close-button {
  width: 26px;
  height: 26px;
  top: 7px;
  right: 7px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transition: background 0.15s ease;
}
.rdn-popup .maplibregl-popup-close-button:hover {
  background: rgba(0, 0, 0, 0.65);
}

.rdn-hike-popup {
  width: 264px;
  max-width: 100%;
}
.rdn-hike-popup-img {
  display: block;
  position: relative;
  height: 124px;
  overflow: hidden;
  background: #e9ecef;
}
.rdn-hike-popup-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.rdn-hike-popup-img:hover img {
  transform: scale(1.05);
}
.rdn-hike-popup-diff {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(225, 29, 72, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.rdn-hike-popup-body {
  padding: 11px 13px 13px;
}
.rdn-hike-popup-title {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--bs-body-color, #212529);
  text-decoration: none;
}
.rdn-hike-popup-title:hover {
  color: var(--bs-danger, #e11d48);
}
.rdn-hike-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--bs-secondary-color, #6c757d);
}
.rdn-hike-popup-meta i {
  color: #e11d48;
}
.rdn-hike-popup-descr {
  margin: 8px 0 11px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--bs-secondary-color, #495057);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rdn-hike-popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e11d48;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.rdn-hike-popup-btn:hover {
  background: #be123c;
  transform: translateX(2px);
}

/* Thème sombre : fond de la pop-up + pointe (tip) accordés au corps de page. */
[data-bs-theme="dark"] .rdn-popup .maplibregl-popup-content {
  background: #2b3035;
  border-color: rgba(255, 255, 255, 0.09);
}
[data-bs-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
[data-bs-theme="dark"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
[data-bs-theme="dark"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: #2b3035;
}
[data-bs-theme="dark"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
[data-bs-theme="dark"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
[data-bs-theme="dark"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: #2b3035;
}
[data-bs-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: #2b3035;
}
[data-bs-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: #2b3035;
}
[data-bs-theme="dark"] .rdn-hike-popup-img {
  background: #212529;
}

/* ---------------------------------------------------------------------------
   Pop-ups des POI OpenStreetMap (excursiones.mjs -> buildOsmPopupHTML) et des
   warningPoints (buildWarningPopupHTML). Réutilisent le conteneur .rdn-popup
   ci-dessus (radius, ombre, bouton fermer). En-tête coloré + corps clair.
--------------------------------------------------------------------------- */
.rdn-osm-popup,
.rdn-warning-popup {
  width: 236px;
  max-width: 100%;
}
.rdn-osm-popup-head,
.rdn-warning-popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: #fff;
}
.rdn-osm-popup-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.rdn-osm-popup-icon svg {
  width: 24px;
  height: 29px;
  display: block;
}
.rdn-osm-popup-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.rdn-osm-popup-body,
.rdn-warning-popup-body {
  padding: 11px 14px 13px;
}
.rdn-osm-popup-title,
.rdn-warning-popup-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bs-body-color, #212529);
}
.rdn-osm-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.rdn-osm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bs-tertiary-bg, #f1f3f5);
  color: var(--bs-body-color, #343a40);
}
.rdn-osm-chip i {
  color: #0090a1;
  font-size: 11px;
}
.rdn-osm-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-info, #0090a1);
}
.rdn-osm-popup-link:hover {
  text-decoration: underline;
}
.rdn-osm-popup-link i {
  font-size: 10px;
}

/* warningPoints : en-tête violet cohérent avec le marqueur (#8e44ad). */
.rdn-warning-popup-head {
  background: #8e44ad;
}
.rdn-warning-popup-title {
  margin-bottom: 5px;
}
.rdn-warning-popup-descr {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bs-secondary-color, #6c757d);
}

/* Thème sombre : chips + textes lisibles (le fond de contenu est déjà géré par
   le bloc [data-bs-theme=dark] .rdn-popup .maplibregl-popup-content). */
[data-bs-theme="dark"] .rdn-osm-chip {
  background: rgba(255, 255, 255, 0.1);
}

/* ===========================================================================
   MODE SOMBRE — passe globale.
   rutasDeNico.css est chargé sur (presque) toutes les pages web ET sur la page
   SSR /hikes/{id}. Ce bloc écrase les fonds clairs codés en dur qui restaient
   blancs en thème sombre (repérés dans Features-Clean.css / styles.min.css et
   en styles inline). On cible [data-bs-theme=dark] (spécificité > .classe) et
   on met !important seulement pour battre les styles inline (ex. #slope-panel).
=========================================================================== */
[data-bs-theme="dark"] .features-clean {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .features-clean p,
[data-bs-theme="dark"] .features-clean .item .description {
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .features-clean h2,
[data-bs-theme="dark"] .features-clean .item .name {
  color: var(--bs-body-color);
}
/* Panneau de pente (SSR : style inline background:#f8f9fa) + légende. */
[data-bs-theme="dark"] #slope-panel {
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color);
}
/* Fonds utilitaires clairs codés en dur. */
[data-bs-theme="dark"] .bg-info-light {
  background: #10333a !important;
}
[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-body-bg) !important;
}
[data-bs-theme="dark"] .bg-white-300 {
  background: rgba(255, 255, 255, 0.08) !important;
}