/* Aperçus réels des applications et visuels des études de cas. */
.project .art.case-study-cover {
  padding: 0;
  background: #f8f9fa;
  border: 1px solid var(--line);
}

.case-study-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-frame {
  display: block;
  width: 100%;
  height: min(900px, 78vh);
  min-height: 520px;
  border: 0;
  background: var(--bg);
}

.detail-case-study #reset,
.detail-case-study .demo-disclaimer {
  display: none;
}

.project .art.real-preview,
.project-featured .art.real-preview,
.project[data-project='platform'] .art.real-preview {
  padding: 0;
  background: #111814;
  border: 1px solid #cfd7cf;
}

.catalog-preview-frame {
  display: block;
  width: 160%;
  height: 160%;
  border: 0;
  pointer-events: none;
  transform: scale(0.625);
  transform-origin: top left;
}

.project:hover .catalog-preview-frame {
  filter: brightness(1.03);
}

/* A preview document keeps only the actual application rendered in the modal. */
.catalog-preview-mode,
.catalog-preview-mode body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #eef1ec;
}

.catalog-preview-mode body > :not(dialog):not(script) {
  display: none !important;
}

.catalog-preview-mode #detail[open] {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  animation: none;
}

.catalog-preview-mode #detail::backdrop,
.catalog-preview-mode .detail-top,
.catalog-preview-mode .detail-layout > aside,
.catalog-preview-mode .demo-caption,
.catalog-preview-mode .demo-disclaimer {
  display: none;
}

.catalog-preview-mode .detail-layout {
  display: block;
  min-height: 100%;
}

.catalog-preview-mode .demo-area {
  min-height: 100%;
  padding: 0;
  background: #eef1ec;
}

.catalog-preview-mode #demo {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.catalog-preview-mode .marc-preview-bar,
.catalog-preview-mode .redion-preview-tools {
  display: none;
}

.catalog-preview-mode .marc-frame,
.catalog-preview-mode .redion-frame,
.catalog-preview-mode .jira-frame {
  height: 100vh;
}

.catalog-preview-error {
  display: grid;
  min-height: 100vh;
  margin: 0;
  place-items: center;
  color: #596259;
  font:
    14px Arial,
    sans-serif;
}

@media (max-width: 650px) {
  .catalog-preview-frame {
    width: 180%;
    height: 180%;
    transform: scale(0.556);
  }
}