/* ═══════════════ LA VISITE ═══════════════
   La capture se déplie en plein écran depuis sa propre vignette. La page
   entière défile dans le cadre : on ne quitte pas le site pour voir le travail.
   ═══════════════════════════════════════════ */
html.show-open,html.show-open body{ overflow:hidden }

.show{ position:fixed; inset:0; z-index:9500; display:none }
.show.is-open{ display:block }
.show__bg{
  position:absolute; inset:0;
  background:rgba(20,22,42,.42);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.show__frame{
  position:absolute; left:clamp(16px,4vw,64px); top:clamp(64px,8vh,92px);
  width:min(58vw,900px); bottom:clamp(24px,5vh,64px);
  border-radius:18px; overflow:hidden; background:#0E1117;
  box-shadow:0 60px 120px -40px rgba(10,12,24,.6);
  transform-origin:center; will-change:transform;
}
.show__scroll{
  position:absolute; inset:38px 0 0; overflow:auto; scrollbar-width:thin;
  scroll-behavior:auto; -webkit-overflow-scrolling:touch;
}
.show__scroll img{ width:100%; height:auto; display:block }
.show__chrome{
  position:absolute; left:0; right:0; top:0; height:38px; z-index:2;
  display:flex; align-items:center; gap:12px; padding:0 14px;
  background:#151A25; border-bottom:1px solid rgba(255,255,255,.07);
}
.show__dots{ display:flex; gap:6px }
.show__dots i{ width:9px; height:9px; border-radius:50%; background:#2B3242 }
.show__url{
  flex:1; text-align:center; font-size:var(--f2); color:#9AA6BD;
  font-family:var(--ui); letter-spacing:.01em;
}

.show__side{
  position:absolute; right:clamp(16px,4vw,64px); top:50%;
  transform:translateY(-50%);
  width:min(34vw,400px); color:#fff; display:grid; gap:14px;
}
.show__tag{ color:rgba(255,255,255,.6) }
.show__dom{
  font-family:var(--dis); font-weight:var(--w-dis); letter-spacing:-.028em;
  font-size:clamp(26px,2.8vw,40px); line-height:1.08; color:#fff;
}
.show__txt{ font-size:var(--f4); line-height:1.6; color:rgba(255,255,255,.78);
  max-width:40ch }
.show__built{ color:rgba(255,255,255,.5) }
.show__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.show__cta .btn--ink{ background:#fff; color:var(--ink) }
.show__cta .btn--glass{
  /* posé sur une capture claire ou sombre selon le projet : il lui faut
     un fond assez dense pour se détacher dans les deux cas */
  background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.34); box-shadow:none;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.show__cta .btn--glass:hover{ background:rgba(255,255,255,.26) }
.show__cta .btn--glass::after{ content:none }

.show__close{
  position:absolute; right:clamp(16px,3vw,32px); top:clamp(16px,3vh,28px);
  width:44px; height:44px; border-radius:var(--k5); display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  transition:background var(--d2) var(--e-soft), transform var(--d2) var(--e-out);
}
.show__close:hover{ background:rgba(255,255,255,.24); transform:rotate(90deg) }

@media (max-width:1023px){
  .show__frame{ left:12px; right:12px; width:auto; top:60px;
    bottom:auto; height:52vh }
  .show__side{ position:absolute; right:12px; left:12px; top:auto;
    bottom:calc(12px + env(safe-area-inset-bottom)); transform:none;
    width:auto; gap:10px }
  .show__txt{ display:none }
  .show__cta .btn{ flex:1 }
}

/* la capture pleine page défile dans le cadre : le fond du cadre ne doit
   plus jamais apparaître sous elle */
.show__scroll{ background:#fff }
.show__scroll::-webkit-scrollbar{ width:8px }
.show__scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22);
  border-radius:99px }
.show__scroll::-webkit-scrollbar-track{ background:transparent }
/* un repère : la page continue plus bas */
.show__frame::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:70px; z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(14,17,23,.55));
}