[data-grand] { cursor: zoom-in; transition: transform .35s ease; }
[data-grand]:hover { transform: scale(1.04); }
[data-grand]:focus-visible { outline: 3px solid #4F46E5; outline-offset: -3px; }
.jt-vis-ouverte, .jt-vis-ouverte body { overflow: hidden; }
.jt-vis { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; background: rgba(12, 17, 36, .94); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.jt-vis[hidden] { display: none; }
.jt-vis-cadre { grid-column: 2; margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 0; }
.jt-vis-cadre img { max-width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); background: #1E2A52; }
.jt-vis-cadre figcaption { color: #fff; font-size: 15px; line-height: 1.5; text-align: center; max-width: 60ch; }
.jt-vis-cadre figcaption[hidden] { display: none; }
.jt-vis button { font: inherit; color: #fff; background: rgba(242, 244, 244, .12); border: 1px solid rgba(242, 244, 244, .25); cursor: pointer; display: grid; place-items: center; }
.jt-vis button:hover { background: rgba(242, 244, 244, .24); }
.jt-vis button:focus-visible { outline: 3px solid #F2F4F4; outline-offset: 2px; }
.jt-vis button[hidden] { display: none; }
.jt-vis-fermer { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; }
.jt-vis-nav { width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; justify-self: center; }
.jt-vis-prec { grid-column: 1; grid-row: 1; }
.jt-vis-suiv { grid-column: 3; grid-row: 1; }
.jt-vis-compteur { position: absolute; top: 24px; left: 0; right: 0; margin: 0; text-align: center; color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 700; pointer-events: none; }
.jt-vis-compteur[hidden] { display: none; }
@media (max-width: 700px) {
  .jt-vis { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .jt-vis-cadre { padding: 70px 12px; }
  .jt-vis-nav { position: absolute; bottom: 18px; grid-column: auto; grid-row: auto; }
  .jt-vis-prec { left: calc(50% - 60px); }
  .jt-vis-suiv { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { [data-grand] { transition: none; } [data-grand]:hover { transform: none; } }