.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;
  }
  .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;
  }
}

/* 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;
}