/* ---------------- route bar: floating card, bottom-left, distance / durée / D+ / D- / difficulté / profil / sauvegarder ---------------- */

.route-bar {
  position: absolute;
  left: 392px;
  bottom: 16px;
  max-width: calc(100% - 392px - 70px);
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.rb-row {
  display: flex;
  align-items: stretch;
  padding: 10px 14px;
  gap: 14px;
  overflow-x: auto;
}

.rb-cell {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  border: none;
  background: none;
  padding: 0;
  cursor: default;
  font-family: inherit;
}

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

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

.rb-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  white-space: nowrap;
}

.rb-sep {
  flex-shrink: 0;
  width: 1px;
  margin: 8px 0;
  background: var(--line);
}

.rb-badge {
  --badge-color: var(--ink-3);
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--badge-color) 40%, var(--line));
  border-radius: 6px;
  padding: 2px 8px;
  line-height: 1.5;
}

.rb-profile-cell {
  cursor: pointer;
  border-radius: 8px;
  padding: 0 6px;
  margin: 0 -6px;
  justify-content: center;
}

.rb-profile-cell:hover {
  background: var(--pine-wash);
}

.rb-caret {
  transition: transform 0.15s ease;
}

.rb-profile-cell.rb-collapsed .rb-caret {
  transform: rotate(180deg);
}

.rb-save {
  flex-shrink: 0;
  align-self: center;
  padding: 9px 18px;
  border-radius: 9px;
  border: none;
  background: var(--pine);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.rb-save:hover:not(:disabled) {
  background: var(--pine-hi);
}

.rb-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Panneau du profil altimétrique simple : même carte, qui grandit vers le
   haut quand on l'ouvre plutôt que d'ouvrir un panneau séparé ailleurs. */
.rb-chart-wrap {
  padding: 0 14px 12px;
}

.rb-chart-wrap.hidden {
  display: none;
}

#rb-chart {
  display: block;
  width: 100%;
  height: 90px;
}

@media (max-width: 860px) {
  .route-bar {
    left: 16px;
    right: 16px;
    max-width: none;
  }
  .rb-value {
    font-size: 15px;
  }
  .rb-label {
    font-size: 9.5px;
  }
}

/* Contrôle carte unifié (couches + zoom + / − + géoloc), un seul pilier
   vertical côté gauche, juste à droite de la sidebar — pas en haut à droite
   (repris depuis là pour laisser toute la largeur droite au panneau "Carte",
   voir .map-layers-panel plus bas). */
.leaflet-top.leaflet-left {
  top: 16px;
  left: var(--rail-gutter);
}

.leaflet-control-layers.leaflet-control {
  margin: 0 !important;
}

.map-stack.leaflet-control {
  /* .leaflet-control { margin: 0 !important } (plus bas dans ce fichier) a la
     même spécificité qu'un simple .map-stack et vient après dans la feuille
     de style : elle gagnait et empilait les contrôles topleft à touche-touche.
     ".map-stack.leaflet-control" (deux classes) a une spécificité plus forte,
     donc gagne quel que soit l'ordre — d'où ce doublon de sélecteur ici. */
  margin: 8px 0 0 0 !important;
}

.map-stack {
  display: flex;
  flex-direction: column;
  /* Gap visuel entre le duo zoom (+/-) et le duo position/recentrer : deux
     pilules distinctes plutôt qu'un seul bloc de 4 boutons, pour qu'on
     comprenne d'un coup d'œil qu'il s'agit de deux fonctions différentes. */
  gap: 6px;
  /* !important nécessaire : sur tout appareil que le navigateur détecte
     comme tactile (trackpad, écran tactile, Chromebook...), Leaflet ajoute
     la classe .leaflet-touch et ses propres règles .leaflet-touch .leaflet-bar
     ont une spécificité plus forte que .map-stack(-btn) seule — elles
     retombaient sur la taille tactile par défaut de Leaflet (30px), désaligné
     avec le bouton couches ci-dessus (resté à 40px grâce à son !important). */
  width: 40px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.map-stack-btn {
  width: 40px !important;
  height: 40px !important;
  line-height: normal !important;
  flex-shrink: 0;
  /* !important nécessaire : .leaflet-bar a (Leaflet) a une spécificité plus
     forte (0,1,1) que .map-stack-btn seule (0,1,0) et impose display:block,
     ce qui désactivait align-items/justify-content — l'icône restait collée
     en haut du bouton au lieu d'être centrée verticalement. */
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

/* Duo zoom : une pilule, séparateur entre + et -. */
.map-stack-btn:nth-child(1) {
  border-radius: 10px 10px 0 0;
}

.map-stack-btn:nth-child(2) {
  border-radius: 0 0 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* Duo position/recentrer : une deuxième pilule, séparateur entre les deux. */
.map-stack-btn.map-stack-locate {
  border-radius: 10px 10px 0 0;
}

.map-stack-btn.map-stack-recenter {
  border-radius: 0 0 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.map-stack-btn:hover {
  background: var(--pine-wash);
  color: var(--pine);
}

.map-stack-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------------- panneau "Carte" (fonds + couches), escamotable à droite ---------------- */
/* Miroir du #sidebar à gauche : même traitement verre dépoli, même geste
   (bouton dédié pour ouvrir, croix pour fermer) — mais plus étroit, pour ne
   pas rivaliser avec la sidebar en importance visuelle. */
.map-layers-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 260px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.map-layers-panel.hidden {
  transform: translateX(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
}

.map-layers-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  flex-shrink: 0;
}

.map-layers-panel-header h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.map-layers-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13px;
}

.map-layers-panel-close:hover {
  background: var(--pine-wash);
  color: var(--pine);
}

.map-layers-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.layers-sep {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
  flex-shrink: 0;
}

.layers-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
}

.layers-option:hover {
  background: var(--pine-wash);
}

.layers-option input {
  flex-shrink: 0;
  margin: 0;
}

/* Attribution OSM : petite pastille flottante en bas à droite, dans la marge
   laissée libre par le panneau altimétrique (voir #elevation-profile ci-dessous). */
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 10px;
  color: var(--ink-3);
  box-shadow: var(--shadow-sm);
}

.leaflet-control-attribution a {
  color: var(--ink-2);
}

/* L'ancien design de #elevation-profile en boîte flottante indépendante
   (position absolute, left/right/bottom fixes) a été remplacé par l'encart
   unique .route-panel qui grandit vers le haut depuis son bas ancré (voir
   plus bas, section "profil altimétrique") — cette règle n'a jamais été
   retirée et prenait le dessus sur le nouveau positionnement en flux normal,
   détachant le profil de .route-panel au lieu de le faire grandir avec lui. */

#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 64px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* Conteneur rempli par nav.js : marque + liens de navigation. */
#app-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}

.nav-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--pine);
  color: #fff;
  flex-shrink: 0;
}

/* --pine est trop proche de --ink en clarté (les deux sont sombres) pour se
   distinguer sur "Vélo/Itinéraires" — on reprend --g-flat, déjà pensé pour
   rester lisible comme un vert net plutôt qu'un sombre-sur-sombre. */
.nav-accent {
  color: var(--g-flat);
}

.nav-chip {
  font-family: var(--data);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sun);
  background: var(--sun-wash);
  border-radius: 4px;
  padding: 3px 6px;
}

.nav-sport-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  background: var(--pine);
  border: none;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.nav-sport-toggle:hover {
  background: var(--pine-hi);
  transform: translateY(-1px);
}

.nav-sport-toggle:active {
  transform: translateY(0);
}

.nav-sport-toggle .nav-sport-caret {
  transition: transform 0.15s ease;
}

.nav-sport-toggle[aria-expanded="true"] .nav-sport-caret {
  transform: rotate(180deg);
}

.nav-sport-select {
  position: relative;
  flex-shrink: 0;
}

.nav-sport-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.nav-sport-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.nav-sport-option:hover {
  background: var(--surface-2);
}

.nav-sport-option.active {
  background: var(--pine-wash);
  color: var(--pine);
}

.nav-sport-option-icon {
  font-size: 1rem;
  line-height: 1;
}

.nav-sport-option-label {
  flex: 1;
}

.nav-sport-option-check {
  color: var(--pine);
  font-weight: 700;
}

#app-nav nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.nav-link.active {
  color: var(--ink);
  background: var(--surface-2);
}

.nav-icon {
  display: flex;
}

.nav-icon svg {
  display: block;
}

#workspace {
  position: absolute;
  inset: 64px 0 0 0;
}

/* ---------------- barre latérale flottante ---------------- */

#sidebar {
  position: absolute;
  left: 16px;
  top: 16px;
  bottom: 16px;
  width: var(--rail-width);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  transition: width 0.18s ease, padding 0.18s ease;
}

/* Repliée : ne garde qu'une bande fine avec les icônes des modes. Le reste du
   contenu (réglages, vitesse, enregistrer, bosses) reste dans le DOM mais
   masqué — pas de perte d'état, juste caché tant que c'est replié. */
#sidebar.collapsed {
  width: 68px;
  padding: 18px 10px;
}

#sidebar-toggle {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

#sidebar-toggle:hover {
  background: var(--pine-wash);
  color: var(--pine);
}

#sidebar.collapsed #sidebar-toggle {
  position: static;
  align-self: center;
  margin-bottom: 4px;
}

#sidebar.collapsed h1,
#sidebar.collapsed .hint,
#sidebar.collapsed #status,
#sidebar.collapsed h2,
#sidebar.collapsed #settings,
#sidebar.collapsed #speed-control,
#sidebar.collapsed #actions,
#sidebar.collapsed #nearby-climbs {
  display: none;
}

#sidebar.collapsed .modes {
  grid-template-columns: 1fr;
}

#sidebar.collapsed .mode .label,
#sidebar.collapsed .mode .sub {
  display: none;
}

#sidebar.collapsed .mode .glyph svg {
  width: 19px;
  height: 19px;
}

#sidebar h1 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

#sidebar h2,
.group-head h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

#advanced-settings {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 12px;
}

#advanced-settings summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-2);
  list-style: none;
}

#advanced-settings summary::-webkit-details-marker {
  display: none;
}

#advanced-settings summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}

#advanced-settings[open] summary::before {
  transform: rotate(90deg);
}

#advanced-settings > #settings {
  padding-bottom: 10px;
}

.hint {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

.hint a {
  color: var(--lake);
}

#status {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--danger);
}

#status:empty {
  display: none;
}

/* ---------------- carte plein écran ---------------- */

.canvas {
  position: absolute;
  inset: 0;
}

#map {
  position: absolute;
  inset: 0;
  /* Isole les panes internes de Leaflet (z-index ~200-700) dans leur propre
     contexte d'empilement, pour qu'elles ne passent jamais au-dessus des
     panneaux flottants (sidebar, profil, contrôles). */
  z-index: 1;
}

.leaflet-control {
  margin: 0 !important;
}

/* Doit dépasser les tuiles internes de Leaflet (panes ~200-700), sinon le
   pilier couches/zoom/position se retrouve caché sous la carte. */
.leaflet-top {
  z-index: 1000;
}

.leaflet-bar,
.leaflet-control-layers {
  border: none !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md) !important;
}

.leaflet-bar {
  overflow: hidden;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  width: 40px;
  height: 40px;
  line-height: 38px;
  font-size: 20px;
  background: transparent;
  color: var(--ink-2);
  border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent);
}

.leaflet-bar a:hover {
  background: var(--pine-wash);
  color: var(--pine);
}

.leaflet-control-layers-toggle {
  width: 40px !important;
  height: 40px !important;
  background-size: 22px 22px !important;
}

.leaflet-control-layers-expanded {
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--ink);
  white-space: nowrap;
}

.leaflet-control-layers-expanded label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.leaflet-control-layers-expanded input {
  margin: 0;
}

.leaflet-control-layers-separator {
  border-top-color: var(--line);
}

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  backdrop-filter: blur(6px);
  border-radius: 8px 0 0 0;
  padding: 3px 8px;
  font-size: 10px;
  color: var(--ink-3);
}

.leaflet-control-attribution a {
  color: var(--ink-2);
}

/* « Retourner à l'itinéraire » et « Ma position » sont maintenant deux
   boutons du bloc unifié .map-stack (voir StackControl dans app-map.js) —
   ancien #btn-recenter-route/#btn-locate séparés supprimés, ils dupliquaient
   ce bloc et se chevauchaient visuellement dessus. */