/* ---------------- encart d'itinéraire : profil + chiffres clés ----------------
   Un seul panneau flottant en bas de carte : le profil altimétrique en haut
   (masqué tant qu'aucun itinéraire n'est calculé), les chiffres clés en
   dessous. Le balisage de dev est conservé (#elevation-profile rempli par
   profile.js, #stats > .stat-card > .stat-label + .stat-value par app-route.js). */

.route-panel {
  position: absolute;
  left: var(--rail-gutter);
  right: 16px;
  bottom: 24px;
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  /* right, pas transform : le bord gauche (ancré à la sidebar) ne doit
     jamais bouger, seul le bord droit doit rentrer quand le panneau "Carte"
     s'ouvre — un translateX déplace tout le bloc (les deux bords), donc le
     bord gauche se décalait aussi et se détachait de la sidebar. */
  transition: left 0.18s ease, right 0.18s ease;
}

/* Toute la largeur dispo par défaut, mais cède la place au panneau "Carte"
   (.map-layers-panel, ancré à droite) quand celui-ci est ouvert — pareil que
   #sidebar.collapsed ci-dessous côté gauche : la barre du bas reste logique
   avec ce qui est réellement affiché de chaque côté, jamais recouverte. */
.canvas:has(.map-layers-panel:not(.hidden)) .route-panel {
  right: 292px; /* 16 (marge) + 260 (largeur panneau carte) + 16 (marge) */
}

/* Sidebar repliée (68px au lieu de --rail-width) : le panneau profil/stats
   récupère l'espace libéré au lieu de rester ancré à la largeur dépliée. */
#sidebar.collapsed ~ .canvas .route-panel {
  left: 100px; /* 16 (marge gauche) + 68 (largeur repliée) + 16 (marge) */
}

/* Le clip (coins arrondis du profil/stats) est ici, séparé du panneau lui-même,
   pour que .profile-toggle — posé à cheval sur le bord haut par le panneau —
   ne soit plus coupé par un overflow:hidden sur son propre parent. Avant ce
   correctif le bouton était invisible/inerte : le clip supprimait son
   affichage à l'endroit précis où il dépasse, laissant la carte apparaître
   "au-dessus" à cet endroit alors que le z-index disait l'inverse. */
.route-panel-body {
  overflow: hidden;
  border-radius: inherit;
}

#stats {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 12px 18px;
  overflow-x: auto;
}

/* Une fois le profil affiché, un filet sépare les deux moitiés de l'encart. */
#elevation-profile:not(.hidden) + #stats {
  border-top: 1px solid var(--line);
}

.stat-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.stat-card + .stat-card {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.stat-label {
  order: 2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  white-space: nowrap;
}

.stat-value {
  order: 1;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-value small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 2px;
}

/* Cartes cliquables (vitesse, mode) : ouvrent le réglage correspondant dans
   la sidebar plutôt que de se contenter d'afficher la valeur. */
.stat-card-action {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.stat-card-action:hover {
  background: var(--surface-2);
}

/* Pastille de difficulté (Novice/Modéré/Sportif/D+ max), reprend la couleur
   pine déjà utilisée pour le mode d'itinéraire actif. */
.badge-difficulty {
  order: 1;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pine);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Bouton plier/déplier le profil altimétrique : petite pastille flottant au
   centre, au-dessus du filet supérieur de l'encart. Masqué tant qu'aucun
   itinéraire n'a de profil à montrer. */
.profile-toggle {
  /* top/left calculés et posés par ui.js (positionToggle) : le bouton est un
     sibling de .route-panel, dont la hauteur varie, donc pas de valeur fixe
     possible en CSS pur. display est aussi piloté par JS (voir syncVisibility
     dans ui.js) pour ne pas dépendre de l'ordre des siblings dans le HTML. */
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 22px;
  border: 1.5px solid var(--pine);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--pine);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 61;
}

.profile-toggle svg {
  width: 22px;
  height: 22px;
  transition: transform 0.18s ease;
}

/* Replié (état de base, triangle pointe vers le haut) : le clic va faire
   remonter le profil, donc flèche vers le haut. Déplié : le clic va le
   ranger vers le bas, la flèche tourne à 180° pour pointer vers le bas —
   toujours dans le sens du geste que le clic va produire. */
.profile-toggle:not(.collapsed) svg {
  transform: rotate(180deg);
}

.profile-toggle:hover {
  color: var(--pine-hi);
}

/* Le grand graphe est masqué tant que le profil est rangé — le reste de la
   barre (distance, dénivelés, durée, difficulté) ne bouge jamais. */
.route-panel.profile-collapsed #elevation-profile {
  display: none !important;
}

/* Mini-ligne de dénivelé : ne prend la place que de la carte "Difficulté"
   d'à côté, visible uniquement quand le grand graphe est rangé. */
.stat-mini-profile {
  display: none;
}

.route-panel.profile-collapsed .stat-mini-profile {
  display: flex;
}

#elevation-profile-mini svg {
  display: block;
  width: 90px;
  height: 22px;
}

/* ---------------- profil altimétrique ---------------- */

#elevation-profile {
  padding: 12px 18px 4px;
  max-height: 220px;
  overflow-y: auto;
}

#elevation-profile svg {
  display: block;
  width: 100%;
  height: 110px;
  cursor: crosshair;
  touch-action: none;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--data);
  font-size: 0.72rem;
  color: var(--ink-2);
  margin-bottom: 4px;
  min-height: 1.1em;
}

.profile-hover-line {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.profile-hover-dot {
  fill: var(--pine);
  stroke: var(--surface);
  stroke-width: 1.5;
  pointer-events: none;
}

.profile-empty {
  color: var(--ink-3);
  font-style: italic;
  font-size: 0.8rem;
}

#profile-views {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

#profile-views button {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

#profile-views button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

#profile-views button.active {
  background: var(--pine-wash);
  border-color: var(--pine);
  color: var(--pine);
}

/* #climb-list : légende de couleurs générée par gradientLegendHtml() dans
   profile.js (classe .climb-tag sur chaque puce) — remplace l'ancien
   #grade-legend/.grade-key d'un rendu de profil concurrent, retiré du merge. */
#climb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.72rem;
}

.climb-tag {
  padding: 2px 7px;
  border-radius: 6px;
  color: #fff;
  white-space: nowrap;
}

#priority-legend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.legend-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
}

/* ---------------- Climb Portal ---------------- */

.climb-portal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.climb-portal-card {
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
}

.climb-portal-card:hover {
  background: var(--pine-wash);
}

.climb-portal-list.collapsed .climb-portal-card {
  display: none;
}

.climb-portal-list.collapsed .climb-portal-card:first-child {
  display: block;
}

.climb-portal-card.selected {
  background: var(--pine-wash);
  border-color: var(--pine);
  box-shadow: inset 0 0 0 1px var(--pine);
}

.climb-portal-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}

.poi-loading {
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: 0.78rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.poi-icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(20, 32, 28, 0.45);
  border: 2px solid #fff;
}

.poi-popup {
  font-size: 12.5px;
  color: var(--ink);
  max-width: 220px;
}

.poi-popup-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.poi-popup-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.poi-popup-line {
  display: block;
  color: var(--ink-2);
  margin-top: 3px;
}

.poi-popup-link {
  color: var(--pine);
  text-decoration: underline;
}

.climb-portal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}

/* ---------------- recherche de lieu ---------------- */

#search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 220px;
  padding: 0 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.search-icon {
  color: var(--ink-3);
  flex-shrink: 0;
}

#search-box:focus-within .search-icon {
  color: var(--lake);
}

#search-location {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
}

#search-location:focus {
  outline: none;
}

/* ---------------- bosses à proximité ---------------- */
/* NOTE : le sélecteur de mode (.modes/.mode), les réglages (dropdown
   dénivelé, cases à cocher .check-row), la vitesse et les actions
   (.actions/.field/.btn-primary/.btn-ghost) sont stylés plus haut dans ce
   fichier (bloc repris intégralement de la maquette beta) — pas de second
   jeu de règles ici pour #settings/#actions, qui ciblaient des ids retirés
   du markup fusionné. */

#nearby-climbs {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Les entrées sont construites par app-nearby-climbs.js : un <li> cliquable par bosse,
   précédé de <li> d'intitulé pour les groupes « route » / « gravel ». */
#nearby-climbs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
}

#nearby-climbs li:hover {
  background: var(--pine-wash);
}

/* Bosse actuellement affichée sur la carte (popup ouvert). */
#nearby-climbs li.selected {
  background: var(--pine-wash);
  border-color: var(--pine);
  box-shadow: inset 0 0 0 1px var(--pine);
}

#nearby-climbs li > span:first-child {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

#nearby-climbs li > span:last-child {
  font-family: var(--data);
  font-size: 0.72rem;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Intitulés de groupe et message « aucune bosse » : pas des entrées cliquables. */
#nearby-climbs li:not(:has(> span)) {
  display: block;
  padding: 2px 0 0;
  border: none;
  background: none;
  cursor: default;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

#nearby-climbs li:not(:has(> span)):hover {
  background: none;
}