* { box-sizing: border-box; }
/* Le `hidden` HTML doit l'emporter sur nos `display:flex/block` (sinon les
   panneaux masqués et la modale note restent visibles). */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
}
#map { position: absolute; inset: 0; z-index: 0; }

/* --- Rail de filtres (haut-gauche) : boutons collés, style barre de zoom --- */
#toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
#eqButtons { display: flex; flex-direction: column; }
.tool-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  border: none;
  border-bottom: 1px solid #dcdcdc;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
}
.tool-btn:hover { background: #f4f4f4; }
/* Coins arrondis seulement en haut du 1er et en bas du dernier bouton */
#eqButtons .tool-btn:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
#btnNote { border-bottom: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
/* Sélection : liseré vert + petite coche dans le coin (à l'intérieur du bouton) */
.tool-btn.active { box-shadow: inset 0 0 0 2px #16a34a; }
#eqButtons .tool-btn.active::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
}

/* Bouton « ma position » (cible) intégré à la barre de zoom Leaflet */
.leaflet-control-zoom-locate {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #333;
}
.leaflet-control-zoom-locate svg { display: block; }
.leaflet-control-zoom-locate:hover { color: #16a34a; }

/* Bouton « fond de carte » dans la barre de zoom + son menu */
.leaflet-control-zoom-layers {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #333;
}
.leaflet-control-zoom-layers svg { display: block; }
.leaflet-control-zoom-layers:hover { color: #16a34a; }
.layer-menu {
  position: absolute;
  left: 52px;
  bottom: 18px;
  z-index: 1000;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes × 3 lignes */
  gap: 6px;
  width: 210px;
}
.layer-item {
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.layer-item:hover { border-color: #16a34a; }
.layer-item.active { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, .3); }
.layer-thumb { width: 100%; height: 46px; object-fit: cover; display: block; background: #f3f4f6; }
.layer-name { font-size: 11px; color: #374151; padding: 4px 2px; text-align: center; }
.layer-item.active .layer-name { color: #15803d; font-weight: 700; }

/* Badge de plage de note sur ⭐ (dans le coin, à l'intérieur) */
.badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #16a34a;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 6px;
}

/* Popover (note) ancré à droite du rail, aligné sur le bouton ⭐ (en bas) */
.popover {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  z-index: 1100;
  width: 190px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popover::before { /* petite flèche vers le bouton ⭐ (bas du rail) */
  content: '';
  position: absolute;
  left: -5px;
  bottom: 12px;
  width: 11px; height: 11px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px 2px 4px rgba(0,0,0,.06);
}
.pop-head { font-size: 13px; font-weight: 700; }
.pop-row { display: flex; gap: 8px; }
.pop-row label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #6b7280; }
.pop-row input { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.pop-actions { display: flex; justify-content: space-between; gap: 8px; }
.primary-btn.small { padding: 7px 12px; font-size: 13px; }

/* --- Panneau de recherche unifié (droite) --- */
/* Pas d'overflow:hidden : sinon le menu d'autocomplétion (position absolute) est
   coupé quand il déborde sous le panneau (cas du champ Lieu, seul dans un panneau
   court). Les coins hauts du segmented control sont arrondis explicitement. */
/* Colonne droite : card de marque + card de recherche empilées */
#rightStack {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  width: 320px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#brandCard {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
}
.brand-logo-img { flex: 0 0 auto; height: 34px; width: auto; display: block; }
.brand-tagline {
  flex: 1;
  font-size: 12px;
  line-height: 1.3;
  color: #6b7280;
  padding-left: 12px;
  border-left: 1px solid #f0f0f0;
}

#searchPanel {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.seg {
  display: flex;
  background: #f3f4f6;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.seg-btn {
  flex: 1;
  padding: 9px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
}
.seg-btn.active { background: #fff; color: #16a34a; box-shadow: inset 0 -2px 0 #16a34a; }
.panel-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; }

.field { position: relative; }
.field input[type="text"], .field input[type="time"], .time-label input {
  width: 100%;
  padding: 9px 30px 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  font-size: 14px;
}
.clear-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 18px;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
}
.clear-btn:hover { color: #374151; }

/* --- Autocomplete --- */
.autocomplete { position: relative; }
.suggestions {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  position: absolute;
  left: 0; right: 0;
  z-index: 1200;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
  max-height: 260px;
  overflow-y: auto;
  display: none;
}
.suggestions.open { display: block; }
.suggestions li {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestions li:hover, .suggestions li.active { background: #ecfdf5; }

#itinForm { display: flex; flex-direction: column; gap: 10px; }

/* Résumé compact de l'itinéraire (après calcul) */
#itinSummary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 9px 11px;
}
.summary-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.summary-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.summary-route {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-sub { font-size: 12.5px; color: #4b5563; }
.icon-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
}
.icon-btn:hover { color: #16a34a; border-color: #16a34a; }

.swap-row { display: flex; justify-content: center; }
.mini-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}
.mini-btn:hover { background: #f3f4f6; }

.mode-row { display: flex; gap: 14px; font-size: 14px; }
.mode-row label { cursor: pointer; }

.link { color: #16a34a; font-size: 13px; text-decoration: none; cursor: pointer; }
.link:hover { text-decoration: underline; }

.time-label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #6b7280; }

.slider-row { display: flex; flex-direction: column; gap: 4px; }
#distLabel { font-size: 13px; font-weight: 600; }
input[type="range"] { width: 100%; accent-color: #16a34a; }

.primary-btn {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn:hover { background: #15803d; }
.primary-btn:disabled { opacity: .8; cursor: progress; }

/* Spinner de chargement sur les boutons du form (ex. « Itinéraire ») */
.primary-btn.loading, .mini-btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.primary-btn.loading::after, .mini-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnspin .6s linear infinite;
}
.mini-btn.loading::after { border-color: rgba(0,0,0,.25); border-top-color: #374151; }
@keyframes btnspin { to { transform: rotate(360deg); } }

.route-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.route-list li {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.route-list li.active { border-color: #16a34a; background: #ecfdf5; }

/* --- Popups --- */
.popup-title { font-weight: 700; font-size: 15px; }
.popup-title a { color: #15803d; text-decoration: none; }
.popup-photo { margin: 6px 0; border-radius: 6px; }
.popup-eq { font-size: 13px; margin: 4px 0; }
.popup-source { font-size: 12px; color: #6b7280; margin: 2px 0 4px; }
.popup-links { font-size: 13px; margin: 4px 0; }

/* Pin coloré des pseudo-aires OSM : divIcon sans le cadre blanc par défaut. */
.pseudo-pin { background: none; border: none; }
.pseudo-pin svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.4)); }
.popup-etape { font-size: 12.5px; color: #6b7280; margin: 4px 0; }
.notation { margin-top: 6px; border-top: 1px solid #eee; padding-top: 6px; }
.stars { font-size: 16px; color: #f59e0b; letter-spacing: 1px; }
.rate-stars span { cursor: pointer; font-size: 18px; color: #d1d5db; }
.rate-stars span.hot { color: #f59e0b; }
.note-summary { font-size: 12px; color: #6b7280; }

/* --- Mobile : rail de filtres en bas à droite, boutons/emoji plus petits --- */
@media (max-width: 640px) {
  #toolbar {
    top: auto;
    left: auto;
    bottom: 24px;   /* au-dessus de l'attribution */
    right: 12px;
  }
  .tool-btn { width: 30px; height: 30px; font-size: 13px; }
  #eqButtons .tool-btn.active::after { width: 12px; height: 12px; font-size: 8px; }

  /* Le popover de note s'ouvre vers la gauche (le rail est à droite) */
  .popover {
    left: auto;
    right: calc(100% + 8px);
    bottom: 0;
  }
  .popover::before {
    left: auto;
    right: -5px;
    bottom: 12px;
    box-shadow: 2px -2px 4px rgba(0, 0, 0, .06);
  }
}