/* GamingSecrets V31.55.3 - Visionneuse plein écran des images d'article. */

.single-article .gs-article-lightbox-trigger {
 cursor: zoom-in;
}

.single-article .gs-article-lightbox-trigger:focus-visible {
 outline: 3px solid var(--gs-brand-red-light, #ff5165);
 outline-offset: 4px;
}

html.gs-article-lightbox-open,
body.gs-article-lightbox-open {
 overflow: hidden !important;
 overscroll-behavior: none !important;
}

.gs-article-lightbox[hidden],
.gs-article-lightbox [hidden] {
 display: none !important;
}

.gs-article-lightbox {
 position: fixed;
 inset: 0;
 z-index: 2147483640;
 display: grid;
 width: 100%;
 height: 100vh;
 height: 100dvh;
 overflow: hidden;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 background:
  radial-gradient(circle at 50% 40%, rgba(196, 18, 48, .14), transparent 43%),
  rgba(3, 3, 6, .965);
 backdrop-filter: blur(13px);
 -webkit-backdrop-filter: blur(13px);
 transition: opacity .18s ease, visibility .18s ease;
 isolation: isolate;
}

.gs-article-lightbox::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 opacity: .25;
 pointer-events: none;
 background-image:
  linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
 background-size: 32px 32px;
}

.gs-article-lightbox.is-open {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}

.gs-article-lightbox-dialog {
 position: relative;
 display: grid;
 grid-template-rows: auto minmax(0, 1fr) auto;
 width: 100%;
 height: 100%;
 min-width: 0;
 min-height: 0;
 padding:
  max(12px, env(safe-area-inset-top, 0px))
  max(18px, env(safe-area-inset-right, 0px))
  max(10px, env(safe-area-inset-bottom, 0px))
  max(18px, env(safe-area-inset-left, 0px));
 outline: none;
}

.gs-article-lightbox-topbar {
 position: relative;
 z-index: 5;
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 gap: 14px;
 min-height: 48px;
 padding: 0 2px 9px;
 color: #fff;
}

.gs-article-lightbox-kicker {
 justify-self: start;
 color: var(--gs-brand-red-light, #ff5165);
 font-size: 10px;
 font-weight: 950;
 letter-spacing: .19em;
 text-transform: uppercase;
}

.gs-article-lightbox-counter {
 justify-self: center;
 min-width: 58px;
 padding: 6px 11px;
 border: 1px solid rgba(255, 255, 255, .10);
 border-radius: 999px;
 background: rgba(255, 255, 255, .045);
 color: rgba(255, 255, 255, .72);
 font-size: 11px;
 font-weight: 850;
 letter-spacing: .08em;
 text-align: center;
}

.gs-article-lightbox-tools {
 display: flex;
 justify-self: end;
 align-items: center;
 gap: 8px;
}

.gs-article-lightbox button {
 appearance: none;
 -webkit-appearance: none;
 border: 0;
 font: inherit;
}

.gs-article-lightbox-zoom,
.gs-article-lightbox-close,
.gs-article-lightbox-nav {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 cursor: pointer;
 touch-action: manipulation;
 transition: border-color .16s ease, background .16s ease, transform .16s ease, color .16s ease;
}

.gs-article-lightbox-zoom {
 gap: 7px;
 min-height: 38px;
 padding: 0 12px;
 border: 1px solid rgba(255, 255, 255, .12) !important;
 border-radius: 10px;
 background: rgba(255, 255, 255, .055);
}

.gs-article-lightbox-zoom span {
 color: var(--gs-brand-red-light, #ff5165);
 font-size: 20px;
 line-height: 1;
}

.gs-article-lightbox-zoom b {
 font-size: 10px;
 font-weight: 900;
 letter-spacing: .08em;
 text-transform: uppercase;
}

.gs-article-lightbox-zoom[aria-pressed="true"] {
 border-color: rgba(255, 81, 101, .58) !important;
 background: rgba(196, 18, 48, .22);
}

.gs-article-lightbox-close {
 width: 40px;
 height: 40px;
 border: 1px solid rgba(255, 81, 101, .42) !important;
 border-radius: 50%;
 background: rgba(196, 18, 48, .16);
 font-size: 27px;
 font-weight: 300;
 line-height: 1;
}

.gs-article-lightbox-zoom:hover,
.gs-article-lightbox-close:hover,
.gs-article-lightbox-nav:hover {
 border-color: rgba(255, 81, 101, .72) !important;
 background: rgba(196, 18, 48, .30);
 transform: translateY(-1px);
}

.gs-article-lightbox button:focus-visible {
 outline: 2px solid var(--gs-brand-red-light, #ff5165);
 outline-offset: 3px;
}

.gs-article-lightbox-stage {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-rows: minmax(0, 1fr) auto;
 width: min(100%, 1700px);
 min-width: 0;
 min-height: 0;
 margin: 0 auto;
 overflow: hidden;
}

.gs-article-lightbox-viewport {
 position: relative;
 display: grid;
 place-items: center;
 min-width: 0;
 min-height: 0;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, .07);
 border-radius: 13px;
 background:
  linear-gradient(45deg, rgba(255, 255, 255, .018) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .018) 75%),
  linear-gradient(45deg, rgba(255, 255, 255, .018) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .018) 75%),
  rgba(0, 0, 0, .28);
 background-position: 0 0, 12px 12px;
 background-size: 24px 24px;
 box-shadow: inset 0 0 80px rgba(0, 0, 0, .36), 0 28px 80px rgba(0, 0, 0, .28);
}

.gs-article-lightbox-image {
 display: block;
 width: auto;
 height: auto;
 max-width: calc(100vw - 52px);
 max-height: calc(100vh - 160px);
 max-height: calc(100dvh - 160px);
 margin: auto;
 object-fit: contain;
 opacity: 0;
 user-select: none;
 -webkit-user-select: none;
 -webkit-user-drag: none;
 touch-action: pan-y pinch-zoom;
 cursor: grab;
 transition: opacity .18s ease, transform .18s cubic-bezier(.2, .75, .25, 1);
 will-change: transform, opacity;
}

.gs-article-lightbox-image:active {
 cursor: grabbing;
}

.gs-article-lightbox-viewport.is-ready .gs-article-lightbox-image {
 opacity: 1;
}

.gs-article-lightbox-image.is-entering-right {
 animation: gsArticleLightboxFromRight .21s ease both;
}

.gs-article-lightbox-image.is-entering-left {
 animation: gsArticleLightboxFromLeft .21s ease both;
}

@keyframes gsArticleLightboxFromRight {
 from { opacity: 0; transform: translate3d(34px, 0, 0) scale(.985); }
 to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes gsArticleLightboxFromLeft {
 from { opacity: 0; transform: translate3d(-34px, 0, 0) scale(.985); }
 to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.gs-article-lightbox-loader {
 position: absolute;
 inset: 50% auto auto 50%;
 width: 34px;
 height: 34px;
 margin: -17px 0 0 -17px;
 border: 2px solid rgba(255, 255, 255, .13);
 border-top-color: var(--gs-brand-red-light, #ff5165);
 border-radius: 50%;
 opacity: 0;
 pointer-events: none;
}

.gs-article-lightbox-viewport.is-loading .gs-article-lightbox-loader {
 opacity: 1;
 animation: gsArticleLightboxSpin .72s linear infinite;
}

@keyframes gsArticleLightboxSpin {
 to { transform: rotate(360deg); }
}

.gs-article-lightbox-caption {
 justify-self: center;
 max-width: min(860px, calc(100vw - 56px));
 margin: 9px auto 0;
 padding: 7px 13px;
 border: 1px solid rgba(255, 255, 255, .07);
 border-radius: 999px;
 background: rgba(12, 12, 16, .72);
 color: rgba(255, 255, 255, .66);
 font-size: 11px;
 line-height: 1.4;
 text-align: center;
}

.gs-article-lightbox-nav {
 position: absolute;
 top: 50%;
 z-index: 4;
 width: 50px;
 height: 62px;
 margin-top: -31px;
 border: 1px solid rgba(255, 255, 255, .11) !important;
 border-radius: 14px;
 background: rgba(12, 12, 16, .78);
 box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.gs-article-lightbox-nav span {
 color: #fff;
 font-family: Arial, sans-serif;
 font-size: 43px;
 font-weight: 200;
 line-height: 1;
 transform: translateY(-2px);
}

.gs-article-lightbox-prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.gs-article-lightbox-next { right: max(12px, env(safe-area-inset-right, 0px)); }

.gs-article-lightbox-hint {
 align-self: end;
 justify-self: center;
 margin: 8px 0 0;
 color: rgba(255, 255, 255, .34);
 font-size: 9px;
 font-weight: 850;
 letter-spacing: .13em;
 line-height: 1;
 text-transform: uppercase;
}

.gs-article-lightbox-hint span {
 color: rgba(255, 81, 101, .64);
}

.gs-article-lightbox-stage.is-zoomed .gs-article-lightbox-viewport {
 display: block;
 overflow: auto;
 overscroll-behavior: contain;
 scrollbar-color: rgba(255, 81, 101, .55) rgba(255, 255, 255, .05);
}

.gs-article-lightbox-stage.is-zoomed .gs-article-lightbox-image {
 width: auto;
 height: auto;
 max-width: none;
 max-height: none;
 margin: auto;
 opacity: 1;
 touch-action: auto;
 cursor: zoom-out;
}

.gs-article-lightbox-sr {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}

@media (max-width: 700px) {
 .gs-article-lightbox-dialog {
  padding:
   max(7px, env(safe-area-inset-top, 0px))
   max(8px, env(safe-area-inset-right, 0px))
   max(7px, env(safe-area-inset-bottom, 0px))
   max(8px, env(safe-area-inset-left, 0px));
 }

 .gs-article-lightbox-topbar {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  min-height: 45px;
  padding: 0 2px 7px;
 }

 .gs-article-lightbox-kicker {
  overflow: hidden;
  font-size: 8px;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

 .gs-article-lightbox-counter {
  min-width: 48px;
  padding: 5px 8px;
  font-size: 9px;
 }

 .gs-article-lightbox-zoom {
  min-height: 36px;
  padding: 0 9px;
 }

 .gs-article-lightbox-zoom b {
  display: none;
 }

 .gs-article-lightbox-close {
  width: 37px;
  height: 37px;
 }

 .gs-article-lightbox-image {
  max-width: calc(100vw - 18px);
  max-height: calc(100vh - 132px);
  max-height: calc(100dvh - 132px);
 }

 .gs-article-lightbox-viewport {
  border-radius: 9px;
 }

 .gs-article-lightbox-nav {
  top: auto;
  bottom: max(43px, calc(env(safe-area-inset-bottom, 0px) + 38px));
  width: 43px;
  height: 47px;
  margin: 0;
  border-radius: 12px;
  background: rgba(12, 12, 16, .74);
 }

 .gs-article-lightbox-nav span {
  font-size: 35px;
 }

 .gs-article-lightbox-prev { left: max(10px, env(safe-area-inset-left, 0px)); }
 .gs-article-lightbox-next { right: max(10px, env(safe-area-inset-right, 0px)); }

 .gs-article-lightbox-caption {
  max-width: calc(100vw - 98px);
  margin-top: 7px;
  padding: 6px 10px;
  font-size: 10px;
 }

 .gs-article-lightbox-hint {
  margin-top: 7px;
  font-size: 8px;
 }
}

@media (max-height: 520px) {
 .gs-article-lightbox-kicker,
 .gs-article-lightbox-hint {
  display: none;
 }

 .gs-article-lightbox-dialog {
  grid-template-rows: auto minmax(0, 1fr);
 }

 .gs-article-lightbox-image {
  max-height: calc(100vh - 62px);
  max-height: calc(100dvh - 62px);
 }

 .gs-article-lightbox-caption {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  width: fit-content;
  margin: auto;
 }
}

@media (prefers-reduced-motion: reduce) {
 .gs-article-lightbox,
 .gs-article-lightbox-image,
 .gs-article-lightbox button {
  transition: none !important;
  animation: none !important;
 }
}

@media print {
 .gs-article-lightbox {
  display: none !important;
 }
}