/* Navigation sur le téléphone : carte en haut, étape et photo en bas (comme une application de guidage). */
:root { --grenat: #8f001a; --bleu: #1a73e8; --texte: #1d1d1f; --discret: #6a6a70; --fond: #f3efe8; --carte: #fff;
  --bordure: #e3ded6; --haut-carte: 46vh; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111; color: var(--texte);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
#appli { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--fond); }

#zone-carte { position: relative; height: var(--haut-carte); flex: none; }
#carte { position: absolute; inset: 0; background: #efe9df; }
.maplibregl-ctrl-attrib { display: none !important; }
#haut { position: absolute; z-index: 5; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px;
  display: flex; align-items: center; gap: 8px; pointer-events: none; }
#haut > * { pointer-events: auto; }
#vers { flex: 1; min-width: 0; margin: 0 52px 0 0; background: rgba(255,255,255,.96); border-radius: 999px; padding: 8px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); display: flex; align-items: center; gap: 8px; font-weight: 600; }
#vers-texte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleche-vers { color: var(--grenat); }
.rond { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,.96);
  box-shadow: 0 2px 10px rgba(0,0,0,.2); display: grid; place-items: center; font-size: 1.15rem; }
.rond[aria-pressed="true"] { background: var(--bleu); color: #fff; }
.petit-texte { font-size: .85rem; font-weight: 800; }
#outils { position: absolute; z-index: 5; right: 10px; top: calc(64px + env(safe-area-inset-top)); display: flex;
  flex-direction: column; gap: 8px; }
#resume { position: absolute; z-index: 5; left: 10px; bottom: 10px; background: rgba(255,255,255,.96); border-radius: 12px;
  padding: 6px 10px; font-size: .85rem; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
#resume b { font-size: 1rem; }

#consigne { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--grenat); color: #fff;
  min-height: 70px; }
#consigne-icone { width: 44px; height: 44px; flex: none; border-radius: 12px; background: rgba(255,255,255,.16); display: grid;
  place-items: center; }
#consigne-icone svg { width: 28px; height: 28px; }
#consigne-texte { flex: 1; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
#consigne-texte small { display: block; font-weight: 400; opacity: .85; font-size: .8rem; margin-top: 2px; }
#compteur { flex: none; font-size: .8rem; opacity: .85; font-variant-numeric: tabular-nums; }

#vue { position: relative; flex: 1; min-height: 0; background: #1b1b1e; overflow: hidden; touch-action: pan-y; }
#vue-image { position: absolute; inset: 0; display: grid; place-items: center; }
#vue-image img.photo { width: 100%; height: 100%; object-fit: cover; }
#vue-image .mention { position: absolute; right: 8px; top: 8px; font-size: .68rem; color: #fff; background: rgba(0,0,0,.45);
  padding: 2px 6px; border-radius: 6px; }
.illustration { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #fff; text-align: center; padding: 16px 20px 100px;
  background: radial-gradient(circle at 50% 35%, #3a2a2e 0%, #1b1b1e 70%); }
.illustration svg { width: 96px; height: 96px; opacity: .95; }
.illustration .grand { font-size: 1.6rem; font-weight: 800; }
.illustration .doux { opacity: .75; font-size: .9rem; }
.illustration.avec-photo { background-size: cover; background-position: center; }
.illustration.avec-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.75)); }
.illustration.avec-photo > * { position: relative; }
.plan { position: absolute; inset: 0; background: #fff; display: grid; place-items: center; }
.plan .cadre { position: relative; }
.plan .cadre img { display: block; width: 100%; height: 100%; }
.repere { position: absolute; width: 0; height: 0; }
.repere::before { content: ""; position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  border: 4px solid #e8112d; box-shadow: 0 0 0 3px #fff; animation: battement 1.4s ease-in-out infinite; }
.repere span { position: absolute; left: 20px; top: -13px; background: #e8112d; color: #fff; font-weight: 700; font-size: 12px;
  padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
@keyframes battement { 50% { transform: scale(1.35); } }
.plan .etiquette-niveau { position: absolute; left: 10px; top: 10px; background: var(--grenat); color: #fff; font-weight: 700;
  border-radius: 10px; padding: 4px 10px; font-size: .9rem; }

.nav-gauche, .nav-droite { position: absolute; z-index: 4; bottom: 22px; }
.nav-gauche { left: 14px; } .nav-droite { right: 14px; }
#avancer { position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); width: 76px; height: 54px;
  border-radius: 999px; border: 3px solid #fff; background: var(--bleu); color: #fff; font-size: 2rem; font-weight: 900;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); display: grid; place-items: center; line-height: 1; }
#avancer span { transform: translateY(6px); }
#avancer[disabled], .rond[disabled] { opacity: .35; }
#points { position: absolute; z-index: 4; left: 0; right: 0; bottom: 76px; display: flex; justify-content: center; gap: 5px;
  flex-wrap: wrap; padding: 0 70px; pointer-events: none; }
#points span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); }
#points span.actif { background: #fff; transform: scale(1.3); }
#points span.fait { background: rgba(255,255,255,.8); }
#mentions { flex: none; font-size: .62rem; color: var(--discret); background: var(--fond); padding: 4px 10px
  calc(4px + env(safe-area-inset-bottom)); text-align: center; }

/* Marqueurs de la carte */
.ici { width: 18px; height: 18px; border-radius: 50%; background: var(--grenat); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.moi { position: relative; width: 20px; height: 20px; }
.moi::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bleu); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); z-index: 2; }
.moi::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: rgba(26,115,232,.22);
  animation: pulsation 2s ease-out infinite; }
@keyframes pulsation { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.etape-ici { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--bleu);
  box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.drapeau { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--grenat);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.etiquette-bat { background: rgba(32,28,26,.78); padding: 2px 6px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .03em; pointer-events: none; }
.zoom-bas .etiquette-bat { display: none; }

#plein-ecran { position: fixed; inset: 0; z-index: 50; background: #000; display: none; place-items: center; }
#plein-ecran.ouvert { display: grid; }
#plein-image { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pinch-zoom; }
#plein-fermer { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; }
#message { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 30px; text-align: center;
  background: var(--fond); }
#message.visible { display: grid; }

@media (min-width: 760px) and (orientation: landscape) {
  /* Grand écran (ordinateur) : carte à gauche, étape à droite. */
  #appli { flex-direction: row; flex-wrap: wrap; }
  #zone-carte { height: auto; width: 58%; flex: none; align-self: stretch; }
  #consigne, #vue, #mentions { width: 42%; }
  #appli { display: grid; grid-template-columns: 58% 42%; grid-template-rows: auto 1fr auto; }
  #zone-carte { grid-row: 1 / 4; width: auto; }
  #consigne, #vue, #mentions { width: auto; }
}

/* Vue 3D réaliste de Google et Street View (avec Internet) ; sinon la photo aérienne (#carte) */
#carte3d { position: absolute; inset: 0; display: none; background: #cfd8e3; }
.en-3d #carte3d { display: block; }
.en-3d #carte { visibility: hidden; }
#vue3d { display: none; }
.avec-3d #vue3d { display: grid; }
#vue-image img.rue { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.rue-icone { position: absolute; left: 10px; top: 10px; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(26,115,232,.94); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.rue-icone svg { width: 30px; height: 30px; }
#plein-panorama { position: absolute; inset: 0; display: none; }
#plein-ecran.panorama #plein-panorama { display: block; }
#plein-ecran.panorama #plein-image { display: none; }
#plein-fermer { z-index: 2; }

/* Dans un bâtiment : ses étages en 3D (lib/interieur.js), carte plus grande, sélecteur d'étage à gauche */
body.dedans { --haut-carte: 64vh; }
body.dedans.avec-photo { --haut-carte: 40vh; }   /* le plan en haut, la photo ClassFind (flèches vertes) en bas */
.dedans .maplibregl-marker { display: none; }   /* noms, borne, drapeau, position GPS : pas au bon étage */
#etages { position: absolute; z-index: 5; left: 10px; top: calc(64px + env(safe-area-inset-top)); display: none;
  flex-direction: column; gap: 6px;
  /* beaucoup d'étages (Colonel By : 10) : la liste défile au lieu de passer sous la durée du trajet, en bas */
  max-height: calc(var(--haut-carte) - 64px - env(safe-area-inset-top) - 56px); overflow-y: auto; }
#etages > * { flex-shrink: 0; }
.dedans #etages { display: flex; }
#etages .titre { background: rgba(255,255,255,.96); border-radius: 10px; padding: 3px 6px; font-weight: 800; font-size: .8rem;
  text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
#etages button { width: 44px; height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.96); font-weight: 800;
  font-size: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); position: relative; }
#etages button.trajet::after { content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bleu); }
#etages button.actif { background: var(--bleu); color: #fff; }
#etages button.actif.trajet::after { background: #fff; }
.illustration .niveau { font-size: 2.6rem; font-weight: 900; line-height: 1; }
.illustration .niveau small { display: block; font-size: .85rem; font-weight: 600; opacity: .8; margin-bottom: 4px; }
#etiquettes-3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.etiquette-3d { position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; padding: 3px 8px;
  border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.25); background: #fff; color: #1d1d1f; }
.etiquette-3d.ici { background: #0b57d0; color: #fff; }
.etiquette-3d.salle { background: #d93025; color: #fff; font-size: 14px; }
.etiquette-3d.ascenseur { color: #0b57d0; }
/* À l'intérieur, la zone du bas est plus petite : l'étage et la distance sur une ligne, au-dessus des boutons. */
.dedans .illustration { flex-direction: row; justify-content: center; align-items: center; gap: 18px; padding: 8px 16px 0;
  bottom: auto; height: 76px; }
.dedans .illustration svg { width: 40px; height: 40px; }
.dedans .illustration .niveau { font-size: 2rem; }
.dedans .illustration .niveau small { font-size: .7rem; margin-bottom: 0; }
.dedans .illustration .grand { font-size: 1.3rem; }
.dedans .illustration .doux { display: none; }

/* Démonstration (&demo=1) : le téléphone fait le trajet tout seul */
.demo { position: absolute; z-index: 6; left: 50%; bottom: 56px; transform: translateX(-50%); background: #fbbc04; color: #1d1d1f;
  font-weight: 800; font-size: .8rem; padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.25);
  white-space: nowrap; }

/* Avis passager (position refusée...) : un bandeau en haut, qui disparaît tout seul */
#avis { position: fixed; z-index: 50; left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top)); display: none;
  background: rgba(29, 29, 31, .92); color: #fff; border-radius: 12px; padding: 10px 14px; font-size: .9rem; text-align: center; }
#avis.visible { display: block; }
/* Plan + photo : la carte est plus petite, les boutons d'étage aussi (ils ne débordent pas sur la consigne) */
.dedans.avec-photo #etages { gap: 3px; top: calc(60px + env(safe-area-inset-top)); }
.dedans.avec-photo #etages button { height: 30px; font-size: .9rem; }
.dedans.avec-photo #etages .titre { padding: 1px 6px; }
.dedans.avec-photo #resume { display: none; }