/* == ADEXWEB - Visite virtuelle 360 ==  D-334 */

/* == Bloc == */
.tour {
  display: grid;
  gap: var(--s-6);
}

/* LE CADRE A TROIS ETAGES.  D-620 */
.tour-cadre {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: var(--rule-w) solid var(--rule-strong);
  background: var(--surface-2);
}

/* L'etage haut repond a « qu'est-ce que je regarde » avant le clic :
   le nom de la chose a gauche, les trois pieces a droite. */
.tour-manifeste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-3) var(--s-4);
  /* `base.css` donne a tout `p` un `max-width: var(--measure)`. Sur un
     bandeau qui doit tenir la largeur du cadre, il le ramenait a
     477 px sur 1048 : le nom collait aux pieces, et l'etage haut ne
     faisait plus le tour de la photo. */
  max-width: none;
  font-family: var(--font-data);
  font-size: var(--fs-8);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* V3 · SOUDER. Le filet du bas est une TRAME de grains, la meme que
     `.section-rule`, et il se ressoude quand le cadre a fini de se
     degager. Ce n'est pas un degrade : c'est un grain. */
  background-image: repeating-linear-gradient(
    90deg,
    var(--rule-strong) 0 2px,
    transparent 2px 4px
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% var(--rule-w);
  transition: background-image var(--t-3) var(--e-snap);
}

.tour-cadre.is-soude .tour-manifeste {
  background-image: linear-gradient(90deg, var(--rule-strong) 0 100%);
}

.tour-quoi { color: var(--accent-text); font-weight: 700; }

.tour-pieces { display: flex; gap: var(--s-5); color: var(--ink-muted); }
.tour-pieces > span { display: flex; align-items: baseline; gap: var(--s-2); }
.tour-pieces b { color: var(--ink); font-weight: 700; }

.tour-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-1);
}

/* Sur telephone le 16:9 rend la piece illisible : on redonne de la
   hauteur plutot que de la largeur. */
@media (max-width: 40em) {
  .tour-stage { aspect-ratio: 4 / 3; }
}

/* LE PUPITRE. Sa hauteur est reservee une fois pour toutes : c'est ce
   qui empeche le pied de la section de remonter quand la visite
   s'ouvre et que `.tour-enter` disparait.  D-622 */
.tour-pupitre {
  display: grid;
  padding: var(--s-4);
  border-top: var(--rule-w) solid var(--rule);
}

.tour-pupitre > * { min-height: 3.5rem; }

.tour-encours {
  display: none;
  align-items: center;
  max-width: none;
  font-family: var(--font-data);
  font-size: var(--fs-8);
  line-height: 1.5;
  color: var(--ink-muted);
}

.tour[data-tour].is-live .tour-encours { display: flex; }

/* L'etiquette de lieu, posee sur l'affiche.  D-624 */
.tour-lieu {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 2;
  margin: 0;
  max-width: none;
  padding: var(--s-2) var(--s-3);
  background: #101211;
  border: var(--rule-w) solid rgb(242 243 241 / 0.28);
  color: #f2f3f1;
  font-family: var(--font-data);
  font-size: var(--fs-8);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
}

.tour[data-tour].is-live .tour-lieu { display: none; }

/* Affiche plate. C'est la seule chose que la section pese avant  D-335 */
.tour-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* L'ENTREE QUITTE LA PHOTO.  D-336 */
.tour-enter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}

.tour-enter-note {
  font-family: var(--font-data);
  font-size: var(--fs-8);
  line-height: 1.5;
  max-width: none;
  color: var(--ink-muted);
}

.tour[data-tour].is-live .tour-enter,
.tour[data-tour].is-live .tour-poster { display: none; }

/* LA PROVENANCE EST UNE LEGENDE DE CADRE.  D-632 */
.tour-source {
  margin: 0;
  color: var(--ink-muted);
  max-width: 78ch;
}

/* Message d'echec (moteur absent, WebGL absent, fichier illisible). */
.tour-msg {
  position: absolute;
  inset: auto var(--s-4) var(--s-4) var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: var(--rule-w) solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-data);
  font-size: var(--fs-8);
  line-height: 1.5;
}

/* == Conteneur du visionneur == */
.tour-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* En plein ecran c'est `.tour-view` qui est promue : les commandes et
   le plan vivent DEDANS, sinon ils disparaitraient. */
.tour-view:fullscreen { width: 100%; height: 100%; }

/* Pannellum met `background: #f4f4f4 url(damier)` sur son conteneur.
   Le damier gris est un fond de demo, pas un fond de site. */
.tour-view.pnlm-container {
  background: var(--surface-1);
  font-family: var(--font-text);
  outline-offset: -4px;
}

/* Dette 1 : l'anneau de focus du conteneur. Il est INTERIEUR, sinon il
   est rogne par `overflow: hidden`. */
.tour-view.pnlm-container:focus-visible {
  outline: var(--focus-w) solid var(--accent-text);
}

/* Pannellum impose `box-sizing: content-box` a tous ses descendants, et  D-337 */
.pnlm-container .tour-hud,
.pnlm-container .tour-hud * { box-sizing: border-box; }

.tour-hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.tour-hud > * { pointer-events: auto; }

/* Points de passage  D-338 */
.pnlm-hotspot.tour-hs {
  width: auto;
  height: auto;
  border-radius: 0;
  background-image: none;
  background-color: var(--surface-2);
  border: var(--rule-w) solid var(--rule-strong);
  color: var(--ink);
  cursor: pointer;
  /* Cible tactile : 44 px de haut au minimum. */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3) 0 var(--s-2);
  transition:
    background-color var(--t-1) var(--e-snap),
    border-color var(--t-1) var(--e-snap);
}

.pnlm-hotspot.tour-hs::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: var(--accent);
}

.pnlm-hotspot.tour-hs:hover {
  background-color: var(--surface-2);
  border-color: var(--ink);
}

.tour-hs-txt {
  font-family: var(--font-data);
  font-size: var(--fs-8);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* Dette 2 : pannellum.css n'a aucune regle :focus. La pastille est un
   aplat opaque, donc l'anneau minium garde son contraste quelle que
   soit la photo derriere. */
.pnlm-hotspot:focus-visible {
  outline: 2px solid #9b2810;
  outline-offset: 2px;
}

/* == Commandes == */
.tour-ctls {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: flex;
  gap: var(--s-2);
}

.tour-ctl {
  display: inline-grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  background: var(--surface-2);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--t-1) var(--e-snap),
    border-color var(--t-1) var(--e-snap),
    transform var(--t-1) var(--e-snap);
}

.tour-ctl:hover { border-color: var(--ink); }
.tour-ctl:active { transform: translateY(1px); }
.tour-ctl:focus-visible {
  outline: var(--focus-w) solid var(--accent-text);
  outline-offset: var(--focus-offset);
}
.tour-ctl svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: square;
}

/* Plan  D-339 */
.tour-map {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  width: clamp(10rem, 28%, 14rem);
  aspect-ratio: 240 / 140;
  background: var(--surface-2);
  border: var(--rule-w) solid var(--rule-strong);
}

/* SOUS 48em, LE PLAN NE RETRECIT PAS : IL PREND TOUTE LA LARGEUR ET IL
   PASSE SOUS LA SCENE. A 10 rem, ses trois pieces mesuraient 34, 42 et
   42 px de haut — sous le plancher de 44 px, donc invisables au pouce sur
   le seul appareil ou l'on vise au pouce. Le plan est une aide de
   navigation : le rendre plus petit la ou l'ecran est plus petit etait
   exactement le mauvais sens.  D-863 */
@media (max-width: 61.99em) {
  .tour-map {
    position: static;
    width: 100%;
    max-width: 22rem;
    margin: var(--s-3) auto 0;
    aspect-ratio: 240 / 116;
  }
}

.tour-map-plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  stroke: var(--rule-strong);
  stroke-width: 2;
  fill: none;
  stroke-linecap: square;
}

.tour-map-jamb { stroke: var(--rule); }

.tour-map-room {
  position: absolute;
  /* Une seule colonne a 100 % et un item etire : sans ca l'item se
     dimensionne en max-content et « Salle de bain » sort de sa piece
     au lieu de passer a la ligne. */
  display: grid;
  grid-template-columns: 100%;
  align-content: center;
  justify-items: stretch;
  padding: 2px 6%;
  overflow: hidden;
  overflow-wrap: anywhere;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ink-muted);
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--t-1) var(--e-snap), color var(--t-1) var(--e-snap);
}

.tour-map-room:hover { color: var(--ink); background: var(--accent-wash); }

.tour-map-room:focus-visible {
  outline: var(--focus-w) solid var(--accent-text);
  outline-offset: -2px;
}

/* Etat actif. Meme emploi de l'accent que l'index de section :
   il dit ou on est, il ne decore pas. */
.tour-map-room[aria-current="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* == Chargement et erreurs de Pannellum, remis au format du site. == */
.tour-view .pnlm-load-box,
.tour-view .pnlm-error-msg {
  width: auto;
  min-width: 13rem;
  height: auto;
  margin: 0;
  inset: auto auto var(--s-3) 50%;
  transform: translateX(-50%);
  top: auto;
  left: 50%;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-data);
  font-size: var(--fs-8);
  line-height: 1.5;
}

.tour-view .pnlm-load-box p { margin: 0 0 var(--s-2); }
.tour-view .pnlm-lbox { display: none !important; }
.tour-view .pnlm-lbar { width: 100%; height: 2px; border: 0; background: var(--rule); }
.tour-view .pnlm-lbar-fill { background: var(--accent); }
.tour-view .pnlm-lmsg { font-size: var(--fs-8); }

/* == Texte reserve aux lecteurs d'ecran == */
.tour-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le lien de licence est parti avec la mention technique : le detail
   vit dans CREDITS.md, pas a l'ecran. Il n'y a plus aucun lien dans
   `.tour` — ces trois regles n'avaient plus de cible.  D-340 · D-632 */

/* Mouvement reduit. La derive automatique ne demarre jamais (c'est  D-341 */
@media (prefers-reduced-motion: reduce) {
  .pnlm-hotspot.tour-hs,
  .tour-ctl,
  .tour-map-room { transition: none; }
  .tour-view .pnlm-fade-img { display: none; }
}