:root {
  --color-base-100: oklch(98% 0 0);
  --color-base-200: oklch(96% 0.001 286.375);
  --color-base-300: oklch(92% 0.004 286.32);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: oklch(85% 0.199 91.936);
  --color-primary-content: oklch(28% 0.066 53.813);
  --color-secondary: oklch(70% 0.01 56.259);
  --color-secondary-content: oklch(14% 0.004 49.25);
  --color-accent: oklch(90% 0.182 98.111);
  --color-accent-content: oklch(42% 0.095 57.708);
  --color-neutral: oklch(37% 0.013 285.805);
  --color-neutral-content: oklch(98% 0 0);
  --color-info: oklch(94% 0.129 101.54);
  --color-info-content: oklch(47% 0.114 61.907);
  --color-success: oklch(79% 0.184 86.047);
  --color-success-content: oklch(14% 0.004 49.25);
  --color-warning: oklch(66% 0.179 58.318);
  --color-warning-content: oklch(98% 0.022 95.277);
  --color-error: oklch(50% 0.213 27.518);
  --color-error-content: oklch(96% 0.015 12.422);
  --radius-selector: 2rem;
  --radius-field: 2rem;
  --radius-box: 0.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
}

#map {
  position: relative;
  z-index: 0;
}

/* Menu flottant mobile-first */
.menu {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 36, 0.9);
  color: #fff;
  border-radius: 10px;
  padding: 12px;
  z-index: 1000;
  width: 100%;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.3s ease;
  transform: translateX(-110%);
}

.menu.open {
  transform: translateX(0);
}

.menu header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
}

.menu select,
.menu input {
  padding: 8px;
  border-radius: 6px;
  border: none;
  outline: none;
}

.menu button {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1100;
  background: var(--color-primary);
  border: none;
  color: var(--color-primary-content);
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
}

@media(min-width:768px) {
  .menu {
    width: 50% 
  }

}


/* Détail borne */
.info-panel {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-base-300);
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  max-width: 90%;
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 6px;
}

.info-panel h3 {
  margin: 0;
  color: var(--color-primary-content);
}

.info-panel p {
  margin: 0;
  font-size: 14px;
  color: #333;
}



.closePanelBtn {
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer; 
  text-align: end;
}

/* Bouton style "outline" */
.btn-outline {
  text-align: center;
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--color-neutral);
  border-radius: 8px;
  background: transparent;
  color: var(--color-neutral);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-outline:hover {
  background: var(--color-primary);
  color: color: var(--color-primary-content);;
}

/* Bouton principal (rempli) */
.btn-primary {
  text-align: center;
  display: inline-block;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background:  var(--color-primary);
  color: var(--color-primary-content);
}

/* Bouton "link" (texte seul) */
.btn-link {
  text-align: center;
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-neutral);
  text-decoration: underline;
  cursor: pointer;
}

span.labelStation {
  padding: 4px 12px;
  background-color: var(--color-success);
  color: var(--color-success-content);
  width: fit-content;
  border-radius: 99px;
  line-height: 16px;
  margin-bottom: 8px;
  font-weight: 500;
}

.customAttribution {
  position: absolute;
  bottom: 00px;
  right: 00px;
  width: 100%;
  background: rgba(255,255,255,0.8);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1000;
  background-color: var(--color-info);
  color: var(--color-info-content);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.customAttribution a {
  margin: 0;
}



.seo-tooltip-container {
  position: relative;
  display: inline-block;
}

.seo-tooltip-btn {
  background-color: #ffc107;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.seo-tooltip-content {
  display: none;
  position: absolute;
  bottom: 120%;
  right: 0;
  z-index: 999;
  width: 300px;
  background-color: #fff;
  color: #333;
  padding: 15px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  font-size: 14px;
  line-height: 1.4;
  border-radius: 6px;
}

.seo-tooltip-container:hover .seo-tooltip-content {
  display: block;
}