/* Vue 3D de la carte (relief3d.js, ADR 0034) : bouton « 3D » de la colonne des commandes, message, conseil du fond,
   ce qui n'existe pas en 3D. Direction Topo (ADR 0029) : texte seul à l'encre sur papier, filet de 1 px ; appuyé, fond
   encre et texte papier ; grisé à 40 % avec sa raison ; jamais d'orange (réservé à la trace). */

/* Bouton « 3D », puis « 2D » en relief */
.ctrl-relief3d button {
  display: grid;
  place-items: center;
  background: var(--papier);
  color: var(--encre);
  font: 700 13px/1 var(--police);
  letter-spacing: 0.02em;
}
.ctrl-relief3d button[aria-pressed="true"] {
  background: var(--encre);
  color: var(--papier);
}
.ctrl-relief3d[data-etat="attente"] button {
  cursor: progress;
}
/* Grisé : le bouton reste atteignable au clavier, sa raison est dans son nom et sa bulle (title). */
.ctrl-relief3d button[aria-disabled="true"],
.vue-3d .ctrl-radar button[aria-disabled="true"],
.vue-3d .maplibregl-ctrl-geolocate:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* En 3D au lot 1 : ni la position ni l'épingle de recherche (des éléments HTML, non posés sur le relief) */
.vue-3d .maplibregl-user-location-dot,
.vue-3d .maplibregl-user-location-accuracy-circle,
.vue-3d .repere-lieu {
  display: none;
}

/* Message (raison, relief injoignable) et conseil du fond : en haut au centre de la carte */
.relief3d-message,
.relief3d-conseil {
  position: absolute;
  z-index: 3;
  top: var(--e-m);
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  margin: 0;
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
  color: var(--encre);
  font-size: 13.5px;
}
.relief3d-message {
  padding: var(--e-s) var(--e-m);
}
.relief3d-conseil {
  display: flex;
  align-items: center;
  gap: var(--e-s);
  padding: var(--e-xs) var(--e-xs) var(--e-xs) var(--e-m);
}
.relief3d-message[hidden],
.relief3d-conseil[hidden] {
  display: none;
}
.relief3d-conseil p {
  margin: 0;
}
.relief3d-photo {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font: 600 13px/1 var(--police);
  cursor: pointer;
}
.relief3d-photo:hover,
.relief3d-fermer:hover {
  background: var(--creux);
}
.relief3d-fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  cursor: pointer;
}
.relief3d-fermer svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 1.8;
  stroke-linecap: round;
}