/* ============================================================
   AUREA : parcours-stations.css
   Portes cliquables aux stations du bar. Points sur la derniere image TENUE des
   trois chapitres du bar (calque .parcours-station), voile d'arrivee, invite,
   lien « Continuer la visite », jauge de tenue, liste « Autour du bar », et
   l'encadre centre d'une piece (rendu partage piece-fiche.js, layout « side »).
   Masque total sous 1024 px et en reduced-motion : la rangee de vignettes prend
   le relais. Aucune dependance.
   ============================================================ */

/* Le calque couvre le canvas (object-fit cover). Inerte tant que la station n'est
   pas en tenue ; les points et liens captent le clic, pas le calque. */
.parcours-station{ pointer-events:none; }
.parcours-station[hidden]{ display:none; }
.parcours-station .ps-dot,
.parcours-station.ps-active .ps-around-list,
.parcours-station.ps-active .ps-continue{ pointer-events:auto; }

/* ---- Voile d'arrivee : 5 % d'--ink, se pose en 400 ms, se retire en 250 ms ---- */
.ps-veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(74,59,44,0.05);
  opacity:0; transition:opacity .25s ease;
}
.parcours-station.ps-active .ps-veil{ opacity:1; transition:opacity .4s ease; }

/* ---- Point (pastille) ---- */
.ps-dot{
  position:absolute; width:44px; height:44px; margin:0; padding:0; border:0; background:none;
  transform:translate(-50%,-50%); cursor:pointer; touch-action:none;
  display:grid; place-items:center; z-index:4;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.parcours-station.ps-active .ps-dot{
  opacity:1; visibility:visible;
  transition:opacity .4s ease, visibility .4s ease;
  transition-delay:calc(var(--d,0) * 80ms);        /* apparition en cascade (80 ms) */
}
.ps-core{
  position:relative; z-index:2; width:14px; height:14px; border-radius:50%;
  background:var(--blanc); box-shadow:0 0 0 2px var(--bronze), 0 1px 5px rgba(20,14,8,.5);
  transition:box-shadow .2s ease;
}
.ps-pulse{
  position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--bronze); pointer-events:none;
  animation:ps-pulse 2.4s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes ps-pulse{
  0%{ transform:scale(1); opacity:.9; }
  70%{ transform:scale(2.9); opacity:0; }
  100%{ transform:scale(2.9); opacity:0; }
}
/* Etiquette : nom de la piece, toujours visible, posee a cote du point. */
.ps-label{
  position:absolute; top:50%; transform:translateY(-50%); white-space:nowrap; pointer-events:none;
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:.13em; font-size:10px; color:var(--blanc);
  background:rgba(42,32,24,0.78); padding:4px 9px; border-radius:2px;
  transition:background .2s ease, color .2s ease;
}
.ps-label--right{ left:100%; margin-left:10px; }
.ps-label--left{ right:100%; margin-right:10px; }
/* Survol et focus : halo intensifie, etiquette en ivoire plein. */
.ps-dot:hover .ps-core,
.ps-dot:focus-visible .ps-core{ box-shadow:0 0 0 2px var(--bronze), 0 0 0 6px rgba(152,118,71,.55), 0 1px 5px rgba(20,14,8,.5); }
.ps-dot:hover .ps-label,
.ps-dot:focus-visible .ps-label{ background:var(--blanc); color:var(--ink); }
.ps-dot:focus-visible{ outline:none; }

/* ---- Invite centree « Ouvrez les portes ... » + pastille qui pulse ---- */
.ps-invite{
  position:absolute; left:50%; bottom:clamp(30px,6vh,62px); transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:11px; pointer-events:none;
  opacity:0; transition:opacity .5s ease; transition-delay:.3s;
}
.parcours-station.ps-active .ps-invite{ opacity:1; }
.parcours-station.ps-invite-off .ps-invite{ opacity:0 !important; visibility:hidden; }
.ps-invite-t{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; font-size:11px; color:var(--blanc); text-shadow:0 1px 4px rgba(20,14,8,.7);
}
.ps-invite-dot{
  position:relative; flex:none; width:11px; height:11px; border-radius:50%;
  background:var(--blanc); box-shadow:0 0 0 2px var(--bronze);
}
.ps-invite-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--bronze);
  animation:ps-pulse 2.4s cubic-bezier(.22,1,.36,1) infinite;
}

/* ---- Lien « Continuer la visite » (bas droite) ---- */
.ps-continue{
  position:absolute; right:clamp(24px,4vw,56px); bottom:clamp(28px,5.5vh,56px); z-index:5;
  display:inline-flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-weight:400; text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; color:var(--blanc); text-shadow:0 1px 4px rgba(20,14,8,.7);
  opacity:0; transition:opacity .5s ease, color .2s ease; transition-delay:.35s;
}
.parcours-station.ps-active .ps-continue{ opacity:.92; }
.ps-continue:hover{ color:var(--sable); }
.ps-continue-arrow{ width:8px; height:8px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg); margin-top:-3px; }
.ps-continue:focus-visible{ outline:1px solid rgba(253,251,247,.85); outline-offset:3px; }

/* ---- Jauge de tenue : filet 2 px en bas, remplissage pilote par --hold-p ---- */
.ps-gauge{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:6;
  background:rgba(253,251,247,.16); overflow:hidden;
  opacity:0; transition:opacity .4s ease;
}
.parcours-station.ps-active .ps-gauge{ opacity:1; }
.ps-gauge-fill{
  height:100%; width:100%; transform-origin:left center;
  transform:scaleX(var(--hold-p,0)); background:var(--bronze);
}

/* ---- Liste « Autour du bar » (bas gauche) ---- */
.ps-around{
  position:absolute; left:clamp(24px,5vw,64px); bottom:clamp(28px,5.5vh,56px); z-index:5;
  max-width:min(40vw,400px); pointer-events:none;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease;
}
.parcours-station.ps-active .ps-around{ opacity:1; transform:translateY(0); transition-delay:.25s; }
.ps-around-t{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; font-size:10px; color:rgba(253,251,247,.74);
  text-shadow:0 1px 2px rgba(20,14,8,.6); margin:0 0 8px;
}
.ps-around-list{ display:flex; flex-wrap:wrap; gap:0; pointer-events:auto; }
.ps-around-link{
  font-family:var(--font-body); font-weight:300; font-size:12px; letter-spacing:.04em;
  color:var(--blanc); text-shadow:0 1px 3px rgba(20,14,8,.65); background:none; border:0;
  cursor:pointer; padding:3px 12px; position:relative;
}
.ps-around-link:first-child{ padding-left:0; }
.ps-around-link + .ps-around-link::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:12px; background:rgba(253,251,247,.42);
}
.ps-around-link:hover{ color:var(--sable); }
.ps-around-link:focus-visible{ outline:1px solid rgba(253,251,247,.85); outline-offset:2px; }

/* ==========================================================================
   Encadre d'une piece : panneau centre, par-dessus le parcours. Rendu partage
   .pl-media / .pl-body (piece-fiche.js), layout « side » (photo a gauche 58%).
   ========================================================================== */
.ps-modal{ position:fixed; inset:0; z-index:200; display:none; }
.ps-modal.is-open{ display:block; }
.ps-modal-backdrop{
  position:absolute; inset:0; background:rgba(74,59,44,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .24s ease;
}
.ps-modal.is-open .ps-modal-backdrop{ opacity:1; }
.ps-fiche{
  position:absolute; left:50%; top:50%; transform:translate(-50%,calc(-50% + 16px));
  width:980px; max-width:94vw; max-height:86vh; display:flex; flex-direction:column;
  overflow:hidden; background:var(--blanc); border-radius:4px;
  box-shadow:0 30px 80px rgba(20,14,8,.4); opacity:0;
  transition:opacity .24s ease, transform .24s ease;
}
.ps-fiche.is-textonly{ width:520px; }
.ps-modal.is-open .ps-fiche{
  opacity:1; transform:translate(-50%,-50%);
  transition:opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1);
}
.ps-fiche .pl-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.ps-fiche .pl-close{
  position:absolute; top:12px; right:12px; z-index:6; width:44px; height:44px;
  border-radius:3px; cursor:pointer; border:0; background:rgba(246,239,227,.82); color:var(--ink);
  display:grid; place-items:center; transition:background .2s ease;
}
.ps-fiche .pl-close svg{ width:16px; height:16px; stroke:var(--ink); stroke-width:1.5; fill:none; }
.ps-fiche .pl-close:hover{ background:var(--blanc-pur); }
.ps-fiche .pl-close:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }

/* ---- Layout side (photo a gauche, texte a droite) ---- */
.pl-side{ display:flex; align-items:stretch; min-height:440px; }
.pl-side .pl-media{
  position:relative; flex:0 0 58%; width:58%; align-self:stretch;
  aspect-ratio:auto; min-height:440px; background:var(--sable-clair);
}
.pl-side .pl-body{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  padding:clamp(26px,3vw,42px) clamp(26px,3vw,40px) clamp(24px,3vw,36px);
}
.pl-side .pl-surtitre{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; font-size:10.5px; color:var(--bronze); margin:0 0 10px;
}
.pl-side .pl-name{ font-family:var(--font-title); font-weight:400; font-size:clamp(24px,2.4vw,32px); line-height:1.08; letter-spacing:.015em; margin:0; color:var(--ink); }
.pl-side .pl-surface{ font-family:var(--font-body); font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin:10px 0 0; }
.pl-side .pl-rule{ border:0; border-top:1px solid var(--bronze); margin:18px 0; width:46px; }
.pl-side .pl-desc{ font-family:var(--font-body); font-weight:300; font-size:15px; line-height:1.7; color:var(--ink); margin:0; }
.pl-side .pl-mat-inline{ font-family:var(--font-body); font-weight:300; font-size:12px; letter-spacing:.03em; color:var(--ink-soft); margin:16px 0 0; }

/* Variante texte seul : panneau etroit, mini-plan a la place de la photo. */
.pl-side.is-textonly{ flex-direction:column; align-items:center; text-align:center; min-height:0; padding-top:clamp(30px,4vw,44px); }
.pl-side.is-textonly .pl-body{ align-items:center; }
.pl-side.is-textonly .pl-rule{ margin-left:auto; margin-right:auto; }
.pl-miniplan{ width:min(100%,360px); margin:0 0 6px; padding:clamp(14px,3vw,22px) clamp(14px,3vw,22px) 0; }
.pl-miniplan svg{ width:100%; height:auto; display:block; max-height:230px; }
.pl-miniplan polygon[data-piece]{ fill:var(--sable-clair); stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.pl-miniplan polygon[data-piece].is-lit{ fill:var(--bronze); fill-opacity:.9; stroke:#6E4F2A; stroke-width:1.4; }
.pl-miniplan #murs path, .pl-miniplan #murs polygon{ fill:var(--ink); }
.pl-miniplan #labels, .pl-miniplan text{ display:none; }

/* ---- Liens « Piece precedente / suivante » + « Visiter cette villa » ---- */
.pl-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:22px; }
.pl-side.is-textonly .pl-nav{ width:100%; }
.pl-nav button{
  background:none; border:0; cursor:pointer; padding:4px 0;
  font-family:var(--font-body); font-weight:400; text-transform:uppercase; letter-spacing:.12em;
  font-size:10.5px; color:var(--ink-soft); transition:color .2s ease;
}
.pl-nav button:hover{ color:var(--bronze); }
.pl-nav button:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }
.pl-nav-arrow{ color:var(--bronze); }
.pl-visit{
  align-self:flex-start; margin-top:18px; background:none; border:0; cursor:pointer; padding:6px 0;
  font-family:var(--font-body); font-weight:400; text-transform:uppercase; letter-spacing:.16em;
  font-size:11px; color:var(--bronze); border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.pl-side.is-textonly .pl-visit{ align-self:center; }
.pl-visit:hover{ border-bottom-color:var(--bronze); }
.pl-visit:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }

/* ---- Mobile : encadre en plein ecran, photo en haut, texte dessous ---- */
@media (max-width:899px){
  .ps-fiche, .ps-fiche.is-textonly{
    left:0; top:auto; bottom:0; transform:translateY(100%); width:100%; max-width:100%;
    max-height:92vh; border-radius:14px 14px 0 0;
  }
  .ps-modal.is-open .ps-fiche{ transform:translateY(0); }
  .pl-side, .pl-side.is-textonly{ flex-direction:column; align-items:stretch; text-align:left; min-height:0; }
  .pl-side .pl-media{ width:100%; flex:none; aspect-ratio:3/2; min-height:0; }
  .pl-side.is-textonly .pl-body{ align-items:flex-start; }
  .pl-side .pl-body{ padding:22px 22px 30px; }
  .pl-miniplan{ margin-inline:auto; }
}

/* ==========================================================================
   Repli mobile (<1024 px) et reduced-motion : aucun point. Sous le poster du
   chapitre du bar, une rangee de vignettes defilantes (photo, nom).
   ========================================================================== */
.ps-mobile{ display:none; }
@media (max-width:1023px){
  .parcours-station{ display:none; }
  .ps-mobile{
    display:block; background:var(--blanc); color:var(--ink);
    padding:clamp(22px,6vw,40px) 0 clamp(30px,7vw,52px);
    border-top:1px solid var(--line);
  }
}
@media (prefers-reduced-motion:reduce){
  .parcours-station{ display:none; }
  .ps-mobile{ display:block; background:var(--blanc); color:var(--ink);
    padding:clamp(22px,6vw,40px) 0 clamp(30px,7vw,52px); border-top:1px solid var(--line); }
}
.ps-mobile-t{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; font-size:11px; color:var(--bronze);
  margin:0 0 16px; padding:0 clamp(24px,6vw,48px);
}
.ps-mobile-row{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:0 clamp(24px,6vw,48px) 6px; -webkit-overflow-scrolling:touch;
}
.ps-thumb{ flex:0 0 auto; width:150px; text-align:left; background:none; border:0; cursor:pointer; scroll-snap-align:start; padding:0; }
.ps-thumb-img{ display:block; width:150px; height:100px; overflow:hidden; border-radius:3px; background:var(--sable-clair); }
.ps-thumb-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ps-thumb-img.is-textonly{ background:linear-gradient(135deg,var(--beige),var(--bronze)); opacity:.85; }
.ps-thumb-name{ display:block; margin-top:9px; font-family:var(--font-title); font-weight:400; font-size:1.02rem; line-height:1.15; color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .ps-veil,.ps-dot,.ps-invite,.ps-continue,.ps-around,.ps-gauge,.ps-fiche,.ps-modal-backdrop,.pl-rev{ transition:none !important; }
  .ps-pulse,.ps-invite-dot::after{ animation:none !important; }
}

/* ==========================================================================
   Outil de placement (?hotspots=1). N'existe QUE dans ce mode.
   ========================================================================== */
.ps-tool{
  position:fixed; left:12px; bottom:12px; z-index:300; width:300px; max-width:42vw;
  background:rgba(253,251,247,.97); border:1px solid var(--bronze); border-radius:6px;
  padding:12px; font-family:var(--font-body); color:var(--ink);
  box-shadow:0 12px 30px rgba(20,14,8,.25);
}
.ps-tool h4{ margin:0 0 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.ps-tool-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ps-tool button{ font-family:var(--font-body); font-size:11px; letter-spacing:.06em; cursor:pointer;
  border:1px solid var(--line); background:var(--blanc-pur); color:var(--ink); padding:6px 9px; border-radius:3px; }
.ps-tool button:hover{ border-color:var(--bronze); }
.ps-tool-nav button.is-on{ background:var(--bronze); color:var(--blanc-pur); border-color:var(--bronze); }
.ps-tool .ps-tool-json{ width:100%; height:120px; font-family:monospace; font-size:10px;
  border:1px solid var(--line); border-radius:3px; padding:6px; resize:vertical; }
.ps-tool .ps-tool-info{ font-size:10px; color:var(--ink-soft); margin:6px 0; line-height:1.5; }
.ps-dot.ps-drag{ cursor:grab; opacity:1 !important; visibility:visible !important; }
.ps-dot.ps-drag.is-dragging{ cursor:grabbing; }
.ps-dot.ps-sel .ps-core{ box-shadow:0 0 0 2px #6E4F2A, 0 0 0 6px rgba(199,154,100,.85); }
.ps-picker{ position:fixed; z-index:320; background:var(--blanc-pur); border:1px solid var(--bronze);
  border-radius:4px; padding:6px; max-height:260px; overflow:auto; box-shadow:0 10px 24px rgba(20,14,8,.25); }
.ps-picker button{ display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:12px; color:var(--ink); padding:6px 10px; border-radius:3px; white-space:nowrap; }
.ps-picker button:hover{ background:var(--beige); }