.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-toolbar-bottom` = le bas réel de la barre collante (navbar comprise),
   mesuré et posé par searchUnified.mjs (syncToolbarOffset) : cette barre change
   de hauteur selon la largeur de l'écran, la langue et l'affichage ou non de la
   bascule « exclusivas », et une constante en dur finissait toujours par mentir
   — soit la carte passait sous la barre, soit elle laissait un trou. */
.rdn-map-sticky {
  position: sticky;
  top: var(--rdn-toolbar-bottom, 180px);
  height: calc(100vh - var(--rdn-toolbar-bottom, 180px) - 30px);
}
@media (max-width: 991.98px) {
  /* Vue Mapa sur téléphone : la carte occupe tout ce que la barre laisse. Le
     `dvh` (et non `vh`) est ce qui fait qu'elle ne passe pas sous la barre
     d'URL de Safari/Chrome mobile, qui se rétracte au défilement. */
  .rdn-map-sticky {
    position: static;
    height: calc(100dvh - var(--rdn-toolbar-bottom, 140px) - 34px);
    min-height: 320px;
  }
}

/* Barre du buscador, ligne « compteur / tri / Lista-Mapa » : sur un téléphone
   les trois ne rentrent qu'en laissant le <select> se comprimer. `min-width: 0`
   lève le plancher implicite d'un enfant flex (sa largeur de contenu), sans quoi
   il refuse de rétrécir et pousse la bascule Lista/Mapa hors de l'écran. */
@media (max-width: 575.98px) {
  #filters-row #select-sort {
    min-width: 0;
    max-width: 42vw;
  }
}

/* ---------------------------------------------------------------------------
   Buscador : panneau de filtres (#filters-panel). Bootstrap ne sait pas changer
   le côté d'un offcanvas selon la largeur d'écran, alors qu'on veut exactement
   ça : une feuille qui monte du bas sur téléphone (le pouce est en bas), un
   panneau latéral sur grand écran (la carte et la liste restent visibles à
   côté). Le balisage reste donc `.offcanvas-bottom` et c'est ici qu'on le
   repositionne à partir de lg.
--------------------------------------------------------------------------- */
#filters-panel {
  --bs-offcanvas-height: auto;
  max-height: 85dvh;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
/* La poignée grise : sans elle, rien ne dit qu'on a affaire à une feuille
   glissante plutôt qu'à un bout de page apparu par surprise. */
#filters-panel .offcanvas-header::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--bs-secondary-bg, #dee2e6);
}
#filters-panel .offcanvas-header {
  position: relative;
  padding-top: 20px;
}
@media (min-width: 992px) {
  #filters-panel {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 380px;
    max-height: none;
    height: 100%;
    border-radius: 0;
    /* Doit battre `.offcanvas.show { transform: none }` de Bootstrap, d'où le
       sélecteur d'id ci-dessous pour l'état ouvert. */
    transform: translateX(100%);
  }
  #filters-panel.show {
    transform: none;
  }
  #filters-panel .offcanvas-header::before {
    display: none;
  }
  #filters-panel .offcanvas-header {
    padding-top: 1rem;
  }
}

/* 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: var(--rdn-toolbar-bottom, 180px);
    height: calc(100vh - var(--rdn-toolbar-bottom, 180px) - 30px);
    overflow-y: auto;
    /* Le défilement de la liste ne se propage plus à la page : sur écran tactile,
       un swipe sur les cartes qui atteignait le haut/bas de la liste faisait
       « sauter » toute la page au lieu de défiler seulement les cartes. */
    overscroll-behavior: contain;
    /* Barre de défilement masquée (la liste défile toujours) — demandé pour
       alléger la colonne des résultats à gauche de la carte. */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* ancien Edge */
  }
  #results-col.col-lg-7::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .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, contenu du panneau de filtres : sliders bi-poignées min–max pour
   tiempo / distancia / desnivel + interrupteurs « Solo con GPX » / remonte.
   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.
--------------------------------------------------------------------------- */
/* Tuile de filtre : même cadre pour les sliders et les interrupteurs.
   Pas de min-width : la tuile occupe la largeur du panneau, qui descend à
   ~343 px sur un téléphone. Un plancher à 210 px, hérité de la barre à plat où
   les tuiles s'alignaient côte à côte, y provoquait un débordement horizontal. */
.rdn-range-filter,
#bool-filters {
  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;
}
/* 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. */
#filters-panel .form-switch {
  padding-left: 2.8em;
  min-height: 1.4rem;
  display: flex;
  align-items: center;
}
#filters-panel .form-switch .form-check-input {
  width: 2.4em;
  height: 1.2em;
  margin-left: -2.8em;
  margin-top: 0;
  cursor: pointer;
}
#filters-panel .form-switch .form-check-label {
  cursor: pointer;
  font-size: 0.9rem;
}
#filters-panel .form-check-input:checked {
  background-color: var(--bs-danger, #dc3545);
  border-color: var(--bs-danger, #dc3545);
}
#filters-panel .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), et zoom
   doux de la cover (la carte a overflow-hidden, l'image reste clippée). */
.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;
}
.rdn-excu-card img {
  transition: transform 0.35s ease;
}
.rdn-excu-card:hover img {
  transform: scale(1.06);
}

/* ---------------------------------------------------------------------------
   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.
   bootstrap.min.css les fige en clair avec !important et sans variante sombre.
   En thème sombre la carte gardait donc son fond quasi blanc alors que
   .card-title passait, lui, à --bs-body-color (blanc) : titre blanc sur fond
   blanc, invisible (cartes « Más información » de l'accueil, cartes de
   /account). On retiente le fond dans la même teinte, en foncé. */
[data-bs-theme="dark"] .bg-info-light {
  background: #10333a !important;
}
[data-bs-theme="dark"] .bg-primary-light {
  background: #172244 !important;
}
[data-bs-theme="dark"] .bg-secondary-light {
  background: #3a1435 !important;
}
[data-bs-theme="dark"] .bg-success-light {
  background: #10321f !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;
}

/* ===========================================================================
   COQUILLE « APP » MOBILE (appShell.mjs) — tab bar en bas + bouton ← retour.
   Tout est scopé sur html.rdn-app (posé par appShell.mjs) et sur le breakpoint
   mobile < 768px (celui de navbar-expand-md) : le desktop ne change PAS, et une
   page qui ne charge pas other.mjs garde exactement l'ancien rendu.
   Les env(safe-area-inset-*) exigent viewport-fit=cover dans le meta viewport
   (posé dans le <head> de chaque page) ; ils valent 0 hors iPhone à encoche.
=========================================================================== */
#rdn-tabbar {
  display: none;
}
/* Onglet Descargas : dans le DOM sur toutes les pages, mais masqué tant
   qu'aucun pack hors ligne n'existe (vérif IndexedDB par appShell.mjs).
   !important : doit gagner sur le display:flex de html.rdn-app .rdn-tab. */
#rdn-tabbar .rdn-tab-hidden {
  display: none !important;
}
#rdn-back {
  display: none;
}
@media (max-width: 767.98px) {
  html.rdn-app #rdn-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030; /* même niveau que la navbar fixed-top de Bootstrap */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.85);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
  }
  html.rdn-app .rdn-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    text-decoration: none;
    color: var(--bs-secondary-color, #6c757d);
    -webkit-tap-highlight-color: transparent;
  }
  html.rdn-app .rdn-tab i {
    font-size: 21px;
    line-height: 1;
  }
  html.rdn-app .rdn-tab-label {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
  }
  html.rdn-app .rdn-tab.active {
    color: var(--bs-danger, #ee1414);
  }
  /* La tab bar est fixe : réserver sa hauteur sous le contenu, sinon elle
     recouvre la fin de page (copyright du footer inclus). */
  html.rdn-app body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  /* Les onglets remplacent le menu hamburger : la navbar se réduit au titre
     + icônes thème/langue. (#navcol embarque aussi le bouton Log — l'accès
     connexion passe désormais par l'onglet Mi cuenta.) */
  html.rdn-app #mainNav .navbar-toggler,
  html.rdn-app #mainNav #navcol {
    display: none !important;
  }
  /* Bouton ← retour des sous-pages (inséré par appShell.mjs avant le brand). */
  html.rdn-app #rdn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-body-color, #212529);
    font-size: 15px;
  }
  html.rdn-app #rdn-back:active {
    background: var(--bs-secondary-bg, #e9ecef);
  }
}

/* Thème sombre : --bs-secondary-color est écrasé ailleurs par un gris foncé
   (illisible sur le fond sombre de la tab bar) — couleurs explicites. */
html[data-bs-theme="dark"].rdn-app .rdn-tab {
  color: rgba(255, 255, 255, 0.65);
}
html[data-bs-theme="dark"].rdn-app .rdn-tab.active {
  color: var(--bs-danger, #ee1414);
}
html[data-bs-theme="dark"].rdn-app #rdn-back {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

/* En PWA installée (standalone), la barre de statut est translucide
   (black-translucent) et le contenu passe dessous : la navbar fixe absorbe
   l'encoche pour que son fond couvre l'heure/batterie, façon app native, et le
   contenu de page est décalé d'autant (la navbar fixed-top ne pousse rien). */
@media (display-mode: standalone) and (max-width: 767.98px) {
  html.rdn-app #mainNav {
    padding-top: calc(env(safe-area-inset-top, 0px) + 1rem) !important;
    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.85);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
  }
  html.rdn-app body {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* Transitions de pages (cross-document view transitions, Safari 18.4+ /
   Chrome 126+) : fondu bref au lieu du flash blanc de rechargement. Les
   navigateurs sans support ignorent tout le bloc — navigation classique. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}
/* La navbar et la tab bar sont présentes des deux côtés de la navigation :
   avec leur propre nom, elles restent visuellement immobiles pendant le fondu
   du contenu — c'est ça qui donne l'impression d'app plutôt que de page. */
html.rdn-app #rdn-tabbar {
  view-transition-name: rdn-tabbar;
}
html.rdn-app #mainNav {
  view-transition-name: rdn-mainnav;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ===========================================================================
   HOME « APP » (index.html #rdn-app-home) — salutation + continuar + tuiles.
   Mobile < 768px UNIQUEMENT : le desktop garde la vitrine, ce bloc reste
   display:none hors du breakpoint. Rempli par initAppHome() (index.mjs).
=========================================================================== */
#rdn-app-home {
  display: none;
}
@media (max-width: 767.98px) {
  html.rdn-app #rdn-app-home {
    display: block;
    /* Sous la navbar fixed-top (l'encoche est déjà absorbée par le padding
       body du mode standalone plus haut). */
    padding-top: 86px;
  }
  /* En mode app, TOUTE la vitrine de l'accueil disparaît — plus seulement en
     PWA installée (data-pwa-hide était géré par offlineHome.mjs) : le Home
     app la remplace pour n'importe quel mobile. */
  html.rdn-app [data-pwa-hide] {
    display: none !important;
  }
  /* La section des randos téléchargées suit directement le hero : ses grosses
     marges « haut de page » ne servent plus (utilitaires Bootstrap = !important,
     donc !important ici aussi). */
  html.rdn-app #section-offline-hikes {
    padding-top: 0.75rem !important;
    margin-top: 0 !important;
  }
}
html.rdn-app .rdn-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
html.rdn-app .rdn-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bs-tertiary-bg, #f1f3f5);
  color: var(--bs-body-color, #212529);
  text-decoration: none;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
html.rdn-app .rdn-tile i {
  font-size: 22px;
}
html.rdn-app .rdn-tile:active {
  transform: scale(0.96);
}
html.rdn-app .rdn-continue-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--bs-tertiary-bg, #f1f3f5);
  color: var(--bs-body-color, #212529);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
/* .noDisplay (mainStyle.css) n'a pas de !important : sans ce garde-fou, le
   display:flex ci-dessus (plus spécifique) gagnerait et la carte resterait
   visible même vide. */
html.rdn-app .rdn-continue-card.noDisplay {
  display: none;
}
html.rdn-app .rdn-continue-card:active {
  transform: scale(0.97);
}
html.rdn-app .rdn-continue-card img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
  flex: 0 0 auto;
  background: var(--bs-secondary-bg, #e9ecef);
}
html.rdn-app .rdn-continue-body {
  flex: 1 1 auto;
  min-width: 0;
}
/* Retour tactile générique en mode app : les boutons « répondent » sous le
   doigt, façon native. */
@media (max-width: 767.98px) {
  html.rdn-app .btn:active {
    transform: scale(0.97);
  }
}

/* ---------------------------------------------------------------------------
   Skeletons — placeholders animés à la forme du contenu, à la place des
   spinners. Poser .rdn-skeleton sur un bloc dimensionné ; le balayage lumineux
   vient du ::after. Réutilisable partout (accueil, recherche, fiches…).
--------------------------------------------------------------------------- */
.rdn-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bs-secondary-bg, #e9ecef);
  border-radius: 8px;
}
.rdn-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: rdn-skeleton-sweep 1.2s infinite;
}
html[data-bs-theme="dark"] .rdn-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
@keyframes rdn-skeleton-sweep {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .rdn-skeleton::after { animation: none; }
}

/* ---------------------------------------------------------------------------
   Pull-to-refresh (appShell.mjs, PWA installée uniquement — Safari a déjà le
   sien dans le navigateur). La pastille descend et tourne avec le doigt via
   --rdn-pull ; pas de transition sur transform (mise à jour continue au
   toucher), seulement sur l'opacité.
--------------------------------------------------------------------------- */
#rdn-ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  left: 50%;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border-radius: 50%;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  color: var(--bs-secondary-color, #6c757d);
}
#rdn-ptr.visible {
  opacity: 1;
  transform: translateY(calc(var(--rdn-pull, 0px) * 0.45)) rotate(calc(var(--rdn-pull, 0px) * 2deg));
}
#rdn-ptr.ready {
  color: var(--bs-danger, #ee1414);
}
#rdn-ptr.spin i {
  animation: rdn-ptr-spin 0.8s linear infinite;
}
@keyframes rdn-ptr-spin {
  100% { transform: rotate(360deg); }
}