/* =========================================================
   LA VISITE GUIDÉE — parcours latéral illustré
   Le décor occupe l'écran ; l'interface reste du HTML posé
   par-dessus, lisible et sélectionnable.
   ========================================================= */

.vue--visite { background: #11161a; }

/* La piste de défilement : sa hauteur est posée par le moteur,
   elle vaut la longueur de la frise. */
.pv-piste { position: relative; }

/* Le cadre collant : ce qu'on voit réellement. */
.pv-cadre {
  position: sticky; top: 0;
  height: 100svh; min-height: 420px;
  overflow: hidden;
  background: #11161a;
  isolation: isolate;
}

/* ---------- Le monde ---------- */
.pv-monde {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
/* Toutes les scènes occupent LE MÊME emplacement : on passe de l'une à
   l'autre par un fondu, jamais par un glissement latéral. Les décors du
   kit ne se raccordent pas bord à bord — les juxtaposer se voyait. */
.pv-scene {
  position: absolute; top: 0; left: 0;
  background: var(--ciel, #11161a);
}
.pv-fond, .pv-occ {
  position: absolute; inset: 0;
  background-image: var(--fond);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pv-fond { z-index: 0; }

/* La copie du décor posée AU-DESSUS du personnage, découpée aux
   montants : c'est elle qui le fait disparaître derrière un pilier.
   Même fichier, même cadrage — donc aucun décalage possible. */
.pv-occ { z-index: 3; pointer-events: none; }

/* Le voile de passage : il monte puis redescend pendant le changement de
   décor. C'est lui qui transforme une substitution d'image en transition. */
.pv-voile {
  position: absolute; inset: 0; z-index: 9;
  will-change: opacity;
  background: radial-gradient(130% 110% at 50% 55%, rgba(12,22,18,.55), rgba(8,14,12,1) 76%);
  opacity: 0; pointer-events: none;
}

/* ---------- Ti Goyav ---------- */
.pv-goyav {
  position: absolute; z-index: 2;
  transition: opacity .12s linear;
  width: 0; height: 0;
  pointer-events: none;
}
.pv-goyav img {
  position: absolute; left: 0; bottom: 0;
  height: var(--h, 120px); width: auto;
  /* Le parent est un simple point d'ancrage, de largeur nulle. La règle
     globale posée sur toutes les images — max-width à 100 % — ramenait
     donc le personnage à zéro pixel de large : il était là, mesuré,
     placé au bon endroit, et parfaitement invisible. */
  max-width: none;
  transform-origin: 50% 100%;
  image-rendering: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .34));
}
.pv-ombre {
  position: absolute; left: 0; top: 0;
  width: calc(var(--h, 120px) * .46); height: calc(var(--h, 120px) * .12);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42), rgba(0,0,0,0) 72%);
}

/* ---------- L'interface ---------- */
.pv-ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.pv-ui > * { pointer-events: auto; }

/* Bandeau haut : sortir, progression, légende */
.pv-haut {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem clamp(.8rem, 3vw, 1.5rem) 1.6rem;
  background: linear-gradient(rgba(10, 20, 16, .76), rgba(10, 20, 16, 0));
  color: #fff;
}
.pv-sortie {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: rgba(255, 255, 255, .15); color: #fff;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  backdrop-filter: blur(6px); transition: background-color .18s;
}
.pv-sortie:hover { background: rgba(255, 255, 255, .3); }
.pv-titre { font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.pv-titre small { display: block; font-weight: 400; opacity: .72; font-size: .72rem; }
.pv-compte {
  margin-left: auto; font-size: .78rem; font-weight: 700;
  background: rgba(255, 255, 255, .15); padding: .25rem .7rem; border-radius: 999px;
  backdrop-filter: blur(6px);
}

.pv-barre {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: rgba(255, 255, 255, .18);
}
.pv-barre__in { height: 100%; width: 0; background: var(--c-anis); transition: width .1s linear; }

/* Le menu d'étapes : une rangée qui défile, pas un tableau de bord */
.pv-jalons {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: .3rem; overflow-x: auto;
  padding: 1.4rem clamp(.8rem, 3vw, 1.5rem) .7rem;
  background: linear-gradient(rgba(10, 20, 16, 0), rgba(10, 20, 16, .8));
  scrollbar-width: none;
}
.pv-jalons::-webkit-scrollbar { display: none; }
.pv-jalon {
  flex: none; display: flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
  background: rgba(10, 20, 16, .5); color: #e8f0e9;
  font-family: inherit; font-size: .74rem;
  padding: .3rem .7rem; border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: background-color .18s, border-color .18s, color .18s;
}
.pv-jalon span { font-weight: 800; opacity: .6; }
.pv-jalon em { font-style: normal; white-space: nowrap; }
.pv-jalon:hover { background: rgba(255, 255, 255, .2); }
.pv-jalon.actif {
  background: var(--c-anis); border-color: var(--c-anis); color: #2c3400;
}
.pv-jalon.actif span { opacity: .75; }
.pv-jalon:focus-visible { outline: 3px solid var(--c-anis); outline-offset: 3px; }

/* ---------- La fiche de service ---------- */
.pv-fiche {
  position: absolute; right: clamp(.8rem, 3vw, 2rem);
  top: 50%; transform: translateY(-50%) translateX(14px);
  width: min(380px, 38vw);
  max-height: 68svh; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(253, 251, 245, .96);
  border: 1px solid rgba(63, 108, 91, .22);
  border-radius: 18px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 26px 60px -30px rgba(10, 30, 22, .9);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-doux, ease), transform .36s var(--ease-doux, ease), visibility .3s;
}
.pv-cadre--arret .pv-fiche { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

.pv-fiche__num {
  margin: 0 0 .25rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-vert);
}
.pv-fiche__titre { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.02; }
.pv-fiche__texte { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.6; color: var(--texte-doux); }

/* Visite virtuelle : un bouton reconnaissable, et un état d'attente
   explicite tant que la captation n'est pas faite. */
.pv-360 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .6rem; padding: .5rem .75rem;
  border-radius: 10px; text-decoration: none;
  font-size: .84rem; font-weight: 700;
  background: var(--c-vert); color: #fff;
}
.pv-360 span { font-size: .7rem; letter-spacing: .06em;
  background: rgba(255,255,255,.22); padding: .1rem .4rem; border-radius: 5px; }
.pv-360--attente {
  background: var(--bg-alt); color: var(--texte-doux);
  border: 1px dashed var(--trait); font-weight: 600;
}
.pv-360--attente span { background: rgba(0,0,0,.08); }

.pv-liens { display: grid; gap: .3rem; margin-bottom: .9rem; }
.pv-liens a {
  display: flex; align-items: center; gap: .5rem;
  padding: .44rem .6rem; border-radius: 9px;
  font-size: .83rem; font-weight: 600; text-decoration: none;
  color: var(--texte); background: rgba(63, 108, 91, .07);
  transition: background-color .18s, transform .18s;
}
.pv-liens a:hover { background: var(--c-anis); transform: translateX(3px); }
.pv-liens .ic { display: flex; color: var(--c-vert); flex: none; }
.pv-liens em { margin-left: auto; font-style: normal; opacity: .5; }

.pv-fiche__pied { display: flex; flex-direction: column; gap: .45rem; }
.pv-cta { justify-content: center; }
.pv-suite {
  border: 1px solid var(--trait); background: #fff; cursor: pointer;
  font-family: inherit; font-size: .83rem; font-weight: 700; color: var(--c-vert);
  padding: .55rem 1rem; border-radius: 999px;
  transition: background-color .18s, border-color .18s;
}
.pv-suite:hover { background: var(--bg-alt); border-color: var(--c-vert); }
.pv-suite:focus-visible, .pv-cta:focus-visible { outline: 3px solid var(--c-vert); outline-offset: 3px; }

/* ---------- Légende discrète ---------- */
.pv-legende {
  position: absolute; left: clamp(.8rem, 3vw, 1.5rem); bottom: 3.6rem;
  font-size: .68rem; color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  max-width: 46ch;
}

/* ---------- Invitation à défiler ---------- */
.pv-invite {
  position: absolute; left: 50%; bottom: 4.6rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  color: #fff; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  animation: pvInvite 2.4s ease-in-out infinite;
}
.pv-cadre--arret .pv-invite { opacity: 0; }
@keyframes pvInvite {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .pv-fiche {
    right: 0; left: 0; top: auto; bottom: 3.2rem;
    width: auto; max-width: none; max-height: 34svh;
    transform: translateY(14px);
    border-radius: 18px 18px 0 0;
    padding: .9rem 1rem 1rem;
  }
  .pv-cadre--arret .pv-fiche { transform: translateY(0); }
  .pv-fiche__titre { font-size: 1.3rem; }
  .pv-legende { display: none; }
  .pv-invite { bottom: 3.4rem; font-size: .66rem; }
  .pv-titre small { display: none; }
  .pv-jalon em { display: none; }
  .pv-jalon { padding: .32rem .62rem; }
  .pv-jalon.actif em { display: inline; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .pv-invite { animation: none; }
  .pv-fiche { transition: none; }
  .pv-monde { will-change: auto; }
}

/* ---------- Fin de visite ---------- */
.pv-fin {
  background: linear-gradient(170deg, var(--c-vert-950, #0e2a22), var(--c-vert, #3f6c5b));
  color: #fff; padding: clamp(2.6rem, 9vh, 5rem) 0;
  text-align: center;
}
.pv-fin__sur {
  margin: 0 0 .5rem; font-size: .74rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-anis);
}
.pv-fin h2 {
  margin: 0 0 .7rem; color: #fff;
  font-size: clamp(2rem, 5.6vw, 3.4rem); line-height: 1;
}
.pv-fin__mot {
  margin: 0 auto 1.6rem; max-width: 52ch; line-height: 1.65; color: #d6e6dd;
}
.pv-fin__mot strong { color: #fff; }
.pv-fin__actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

/* Les six visites virtuelles, rassemblées en fin de parcours. */
.pv-fin__360 { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.18); }
.pv-fin__360 h3 {
  margin: 0 0 .8rem; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-anis);
}
.pv-fin__360 ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center;
}
.pv-fin__360 a, .pv-fin__360 span {
  display: inline-block; padding: .42rem .9rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.pv-fin__360 a { background: rgba(255,255,255,.16); color: #fff; }
.pv-fin__360 a:hover { background: var(--c-anis); color: #2b3005; }
.pv-fin__360 span { border: 1px dashed rgba(255,255,255,.35); color: rgba(255,255,255,.62); }
/* Sur le vert foncé de l'écran de fin, le vert de la charte n'est plus
   lisible : les boutons secondaires passent en blanc. */
.pv-fin .btn--fantome {
  --btn-fg: #fff;
  --btn-bg: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.pv-fin .btn--fantome:hover {
  --btn-bg: rgba(255, 255, 255, .15);
  box-shadow: inset 0 0 0 1.5px #fff;
}


/* ═══ TÉLÉPHONE EN PAYSAGE ═══
   Moins de 460 px de haut : la fiche en feuille basse masquerait le
   décor entier. On la repasse sur le côté, et on réduit le reste. */
@media (max-height: 460px) and (orientation: landscape) {
  .pv-cadre { min-height: 320px; }
  .pv-fiche {
    right: .6rem; left: auto; top: 50%; bottom: auto;
    width: min(330px, 46vw); max-height: 78svh;
    transform: translateY(-50%) translateX(14px);
    border-radius: 16px;
  }
  .pv-cadre--arret .pv-fiche { transform: translateY(-50%) translateX(0); }
  .pv-fiche__titre { font-size: 1.1rem; }
  .pv-fiche__texte { font-size: .8rem; }
  .pv-haut { padding: .45rem .7rem 1rem; }
  .pv-jalons { padding: .9rem .7rem .45rem; }
  .pv-jalon em { display: none; }
  .pv-jalon.actif em { display: inline; }
  .pv-invite, .pv-legende { display: none; }
}

/* ═══ GRANDS ÉCRANS ═══
   Au-delà de 1600 px, la fiche ne doit pas s'étirer : une colonne de
   texte trop large se lit mal, et le décor mérite la place. */
@media (min-width: 1600px) {
  .pv-fiche { width: min(420px, 32vw); }
  .pv-fiche__texte { font-size: .92rem; }
  .pv-jalon { font-size: .8rem; }
}