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