* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f1115;
  color: #e8e8ea;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 24px 16px 8px;
  text-align: center;
}

header h1 {
  font-size: 20px;
  font-weight: 600;
}

/* Fixe et hors du <header> : reste visible sur toutes les vues (carte,
   boussole...), pas seulement l'accueil (le <header> est masqué ailleurs). */
.btn-install {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #2a2e38;
  background: #1a1d24;
  color: #e8e8ea;
  font-size: 16px;
  cursor: pointer;
  z-index: 1000;
}

.btn-install:hover {
  border-color: #4a90d9;
}

main {
  flex: 1;
  padding: 16px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.explain {
  text-align: center;
  color: #9a9ea8;
  margin-bottom: 24px;
}

.btn-primary {
  display: block;
  width: 100%;
  min-height: 56px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: #4a90d9;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.btn-primary:active {
  background: #3a7ab8;
}

.link-secondary {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: #7fb3e8;
  text-decoration: none;
}

.usage-help {
  margin-top: 32px;
  padding: 12px 16px;
  background: #1a1d24;
  border: 1px solid #2a2e38;
  border-radius: 10px;
}

.usage-help summary {
  cursor: pointer;
  font-weight: 600;
  color: #7fb3e8;
}

.usage-help ul {
  margin: 12px 0 0;
  padding-left: 20px;
  color: #9a9ea8;
  font-size: 14px;
  line-height: 1.5;
}

.usage-help li + li {
  margin-top: 8px;
}

.loading {
  text-align: center;
  color: #9a9ea8;
  padding: 32px 0;
}

#address-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#address-form label {
  font-size: 13px;
  color: #9a9ea8;
}

#address-input {
  min-height: 48px;
  padding: 0 12px;
  font-size: 16px;
  background: #1a1d24;
  border: 1px solid #2a2e38;
  border-radius: 10px;
  color: inherit;
}

#address-suggestions {
  list-style: none;
  margin-top: 12px;
}

#address-suggestions li {
  padding: 12px;
  border-bottom: 1px solid #2a2e38;
  cursor: pointer;
}

#results-list {
  list-style: none;
}

.spot {
  padding: 14px 4px;
  border-bottom: 1px solid #2a2e38;
  cursor: pointer;
}

.spot.selected {
  background: #1e222a;
  margin: 0 -8px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 8px;
}

.spot-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.spot-name {
  font-weight: 600;
}

.spot-distance {
  color: #9a9ea8;
  white-space: nowrap;
  margin-left: 8px;
}

.spot-badges {
  margin-top: 4px;
  font-size: 13px;
  color: #9a9ea8;
}

.spot-badges .badge {
  margin-right: 10px;
}

.badge-open { color: #6bcf7f; }
.badge-closed { color: #e8735a; }
.badge-unknown { color: #9a9ea8; }

#view-error p {
  text-align: center;
  margin-bottom: 20px;
}

footer {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #55585f;
}

/* Mode carte : plein écran, header/footer masqués (spec section 7.2). */
body[data-view="map"] header,
body[data-view="map"] footer {
  display: none;
}

body[data-view="map"] main {
  padding: 0;
  max-width: none;
}

#view-map {
  position: fixed;
  inset: 0;
}

#map {
  position: absolute;
  inset: 0;
}

#map-attribution {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 5;
  pointer-events: none;
}

.map-back {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d24;
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 5;
  margin: 0;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: #14171d;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  transition: max-height 0.25s ease;
  overflow: hidden;
  z-index: 10;
}

#bottom-sheet-handle {
  display: block;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
}

#bottom-sheet-handle::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto;
  background: #3a3e48;
  border-radius: 2px;
}

#bottom-sheet.collapsed { max-height: 116px; }
#bottom-sheet:not(.collapsed) { max-height: 60vh; }
#bottom-sheet:not(.collapsed) #results-list { overflow-y: auto; max-height: calc(60vh - 40px); }
#bottom-sheet #results-list { padding: 0 16px 16px; }

/* Marqueurs : sanisette pleine, lieu en contour (spec section 7.2). */
.map-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4a90d9;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.map-marker.venue {
  background: transparent;
  border: 3px solid #4a90d9;
}

.map-marker.selected {
  width: 24px;
  height: 24px;
  background: #e8735a;
  border-color: #fff;
}

.map-marker.venue.selected {
  background: transparent;
  border-color: #e8735a;
  border-width: 4px;
}

.user-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4285f4;
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.35);
  position: relative;
}

/* Cap de l'appareil sur le point de localisation (spec section 9, extension
   au mode carte). Ancrée par son coin au centre du point comme la flèche du
   mode boussole (même raison : le pivot de rotation doit tomber pile sur le
   centre, pas sur le centre géométrique de la flèche). Cachée tant qu'aucun
   cap réel n'a été reçu (desktop sans capteur, iOS avant permission accordée). */
.user-heading-arrow {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  margin-top: -12px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 12px solid #4285f4;
  transform-origin: 50% 100%;
  transition: transform 0.15s linear;
}

.user-heading-arrow.visible {
  display: block;
}

.maplibregl-ctrl-attrib { display: none; }

.floating-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #4a90d9;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Sur la carte, le bottom sheet (z-index 10) recouvre le bas de l'écran même
   replié (116px) : le bouton boussole doit flotter au-dessus, pas derrière. */
#btn-to-compass {
  bottom: 132px;
  z-index: 11;
}

/* Mode boussole : fond épuré, contraste fort (spec section 7.3, lisibilité
   en plein soleil). */
body[data-view="compass"] header,
body[data-view="compass"] footer {
  display: none;
}

body[data-view="compass"] main {
  padding: 0;
  max-width: none;
}

#view-compass {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* [hidden] a une spécificité plus forte que #view-compass seul : sans cette
   règle, la vue reste cliquable même masquée (display:flex l'emporterait). */
#view-compass[hidden] {
  display: none;
}

.compass-status {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  text-align: center;
  background: #e8b23a;
  color: #000;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  z-index: 5;
}

.compass-face {
  width: min(70vw, 320px);
  height: min(70vw, 320px);
  border-radius: 50%;
  border: 3px solid #2a2e38;
  position: relative;
}

.compass-cardinals {
  position: absolute;
  inset: 0;
  transition: transform 0.1s linear;
}

.compass-cardinal {
  position: absolute;
  color: #9a9ea8;
  font-weight: 700;
  font-size: 14px;
}

.compass-cardinal-n { top: 10px; left: 50%; transform: translateX(-50%); }
.compass-cardinal-e { top: 50%; right: 10px; transform: translateY(-50%); }
.compass-cardinal-s { bottom: 10px; left: 50%; transform: translateX(-50%); }
.compass-cardinal-w { top: 50%; left: 10px; transform: translateY(-50%); }

/* La flèche est ancrée par son coin (top/left 50%) au centre exact du
   cercle, puis reculée d'une marge négative égale à la moitié de sa largeur
   et à 80% de sa hauteur (= transform-origin) : le point de pivot de la
   rotation tombe ainsi pile au centre du cercle, quel que soit l'angle.
   Avant ce fix, un centrage flex plaçait le CENTRE géométrique de la flèche
   au centre du cercle, alors que le pivot de rotation (transform-origin
   50% 80%, proche de la base) était décalé de 30px plus bas — la pointe
   décrivait donc un cercle excentré au lieu de tourner sur place. */
.compass-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -24px;
  margin-top: -80px;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 100px solid #4a90d9;
  transform-origin: 50% 80%;
  transition: transform 0.1s linear;
}

.compass-info {
  text-align: center;
  margin-top: 32px;
}

.compass-distance {
  font-size: 48px;
  font-weight: 700;
}

.compass-name {
  font-size: 16px;
  color: #9a9ea8;
  margin-top: 4px;
}

#view-compass .spot-badges {
  margin-top: 8px;
  justify-content: center;
}

.compass-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #1a1d24;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 6;
}

.compass-chevron-left { left: 12px; }
.compass-chevron-right { right: 12px; }

.compass-back {
  position: absolute;
  bottom: 24px;
  left: 24px;
  margin: 0;
  width: auto;
}