/* =========================================================
   LES VISITES À 360°
   La vue est d'abord une image : on lui laisse la place, et tout le
   reste — titre, points de vue, aide — se range autour sans la
   rogner. Sur un téléphone tenu à la verticale, une sphère dans un
   timbre-poste ne sert à rien : le cadre y prend presque toute la
   hauteur utile.
   ========================================================= */
.vue--pano { background: var(--bg); min-height: 100svh; }

.pano-haut { background: var(--surface); border-bottom: 1px solid var(--trait); }
.pano-haut .contenu {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 0;
}
.pano-haut h1 {
  font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0; line-height: 1.1;
}
.pano-haut p { margin: 0; color: var(--texte-doux); font-size: var(--fs-sm); }

/* ---------- Le cadre de la sphère ---------- */
.pano-cadre {
  position: relative; background: #0e1a16; overflow: hidden;
  height: min(72svh, 760px);
}
.pano-cadre:fullscreen { height: 100svh; }
#pano-canvas {
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
}
/* Sans WebGL, le code masque le canevas et montre l'image à plat. Mais
   `display: block` l'emporte sur l'attribut « hidden » : le visiteur
   verrait alors un rectangle noir mort posé au-dessus de l'image de
   repli — soit exactement le trou qu'on cherchait à éviter. */
#pano-canvas[hidden] { display: none; }
#pano-canvas:active { cursor: grabbing; }
#pano-canvas:focus-visible { outline: 3px solid var(--c-anis); outline-offset: -3px; }

/* Le repli quand le WebGL manque : l'image à plat, lisible. */
.pano-repli { height: 100%; overflow: auto; background: var(--bg); }
.pano-repli img { width: 100%; height: auto; display: block; }
.pano-repli p {
  margin: 0; padding: .9rem 1rem; font-size: var(--fs-sm);
  color: var(--texte-doux); background: var(--surface);
}

.pano-attente {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
/* `display: grid` l'emporterait sur la règle par défaut de l'attribut
   « hidden » : sans cette ligne, le voile d'attente reste à l'écran
   une fois l'image chargée, et la visite paraît ne jamais arriver. */
.pano-attente[hidden], .pano-repli[hidden] { display: none; }
.pano-attente span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff; animation: panoTourne .9s linear infinite;
}
@keyframes panoTourne { to { transform: rotate(360deg); } }

.pano-plein {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  padding: .45rem .9rem; border: 0; border-radius: var(--r-pill);
  background: rgba(10, 24, 20, .62); color: #fff; backdrop-filter: blur(6px);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.pano-plein:hover { background: rgba(10, 24, 20, .85); }
.pano-plein:focus-visible { outline: 3px solid var(--c-anis); outline-offset: 2px; }

.pano-aide {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  margin: 0; padding: .35rem .85rem; border-radius: var(--r-pill);
  background: rgba(10, 24, 20, .55); color: rgba(255, 255, 255, .92);
  font-size: var(--fs-xs); white-space: nowrap; pointer-events: none;
  max-width: calc(100% - 1.6rem); overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Les points de vue d'un même lieu ---------- */
.pano-barre {
  display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .8rem clamp(1rem, 4vw, 2rem); background: var(--surface);
  border-bottom: 1px solid var(--trait);
}
.pano-barre:empty { display: none; }
.pano-vue {
  flex: none; scroll-snap-align: start; width: 150px;
  display: grid; gap: .3rem; padding: .3rem;
  border: 2px solid transparent; border-radius: 12px;
  background: var(--bg-alt); cursor: pointer; font-family: inherit;
  text-align: left; color: var(--texte-doux);
}
.pano-vue img { width: 100%; height: auto; border-radius: 8px; display: block; }
.pano-vue span { font-size: var(--fs-xs); line-height: 1.25; }
.pano-vue.actif { border-color: var(--c-vert); color: var(--texte); }
.pano-vue:hover { border-color: var(--c-vert-clair); }
.pano-vue:focus-visible { outline: 3px solid var(--c-anis); outline-offset: 2px; }

/* ---------- L'appel depuis le reste du site ----------
   Le même bloc sur la page de la médiathèque, celle de la piscine ou
   dans l'espace CCAS : une vignette du lieu, ce qu'on y trouve, et une
   flèche. Il ne ressemble à aucun autre lien de la page, parce qu'il
   n'emmène pas vers du texte mais vers une image à parcourir. */
.pano-appel {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.6rem 0; padding: .6rem .9rem .6rem .6rem;
  border-radius: 16px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--trait);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.pano-appel:hover {
  border-color: var(--c-vert); transform: translateY(-2px);
  box-shadow: 0 18px 34px -26px rgba(12, 40, 32, .9);
}
.pano-appel:focus-visible { outline: 3px solid var(--c-anis); outline-offset: 2px; }
.pano-appel img {
  width: 150px; height: 75px; object-fit: cover;
  border-radius: 11px; display: block; flex: none;
}
.pano-appel__txt { display: grid; gap: .15rem; min-width: 0; }
.pano-appel__txt b { font-size: var(--fs-sm); line-height: 1.3; }
.pano-appel__txt small { font-size: var(--fs-xs); color: var(--texte-doux); }
.pano-appel__pastille {
  display: inline-block; margin-right: .35rem;
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--c-anis); color: #3d4200;
  font-size: .66rem; font-weight: 800; vertical-align: .08em;
}
.pano-appel__fl { margin-left: auto; color: var(--c-vert); font-size: 1.2rem; flex: none; }
/* Dans l'espace CCAS, le bloc prend les couleurs du CCAS : on reste
   chez lui, le vert de la Ville n'y a pas sa place. */
[data-univers="ccas"] .pano-appel:hover { border-color: var(--ccas-bleu); }
[data-univers="ccas"] .pano-appel__pastille { background: var(--ccas-vert); color: #fff; }
[data-univers="ccas"] .pano-appel__fl { color: var(--ccas-bleu); }

@media (max-width: 520px) {
  .pano-appel { gap: .7rem; padding: .5rem .7rem .5rem .5rem; }
  .pano-appel img { width: 96px; height: 54px; }
}

/* ---------- Les autres lieux ---------- */
.pano-t2 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin: 0 0 1rem; }
.pano-liste {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pano-lieu {
  display: grid; gap: .25rem; padding: .4rem .4rem .8rem;
  border-radius: 14px; background: var(--surface);
  border: 1px solid var(--trait); text-decoration: none; color: var(--texte);
  transition: transform .2s, border-color .2s;
}
.pano-lieu img { width: 100%; height: auto; border-radius: 10px; display: block; }
.pano-lieu b { padding: 0 .4rem; font-size: var(--fs-sm); }
.pano-lieu small { padding: 0 .4rem; color: var(--texte-doux); font-size: var(--fs-xs); }
.pano-lieu:hover { transform: translateY(-2px); border-color: var(--c-vert-clair); }
.pano-lieu.actif { border-color: var(--c-vert); }
.pano-note { margin: 1.4rem 0 0; font-size: var(--fs-xs); color: var(--texte-doux); }

@media (max-width: 640px) {
  .pano-cadre { height: min(62svh, 540px); }
  .pano-aide { font-size: 10px; bottom: .5rem; }
  .pano-vue { width: 124px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .pano-cadre { height: 86svh; }
}
@media (prefers-reduced-motion: reduce) {
  .pano-attente span { animation: none; }
  .pano-lieu:hover { transform: none; }
}