/* La page Web reprend les couleurs et la typographie de la vitrine.
   Seule sa couverture présente deux captures, gardées sous leur résolution
   native pour ne pas agrandir leurs défauts de compression. */
.web-cover .cover__frame {
  height: auto;
  min-height: calc(100svh - 3rem);
  padding: 8rem var(--gutter) var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  background:
    radial-gradient(ellipse at 50% 66%, rgba(241, 240, 234, 0.085), transparent 64%),
    var(--ink);
}

.web-cover .cover__frame::after { display: none; }

.web-cover .cover__inner {
  position: relative;
  inset: auto;
  padding: 0;
  width: 100%;
  gap: var(--s-5);
}

.web-demos {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 984px;
}

.web-demos__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: start;
}

.web-demo { min-width: 0; }

.web-demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 32px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  background: var(--ink);
}

.web-demo__bar .label { font-size: 10px; }

.web-demo__dots { display: flex; gap: 4px; }
.web-demo__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-2); }

.web-demo__screen {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink);
}

.web-cover .web-demo__screen video {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
}

.web-credits { font-size: 11px; }

.web-demos__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}

.web-demos__toggle {
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--fg-2);
  min-height: 44px;
  padding: var(--s-3) 0;
  font-size: var(--t-ui);
  cursor: pointer;
  transition: color var(--d) var(--ease);
}

.web-demos__toggle:hover,
.web-demos__toggle:focus-visible { color: var(--fg); }

.web-demos__toggle[hidden],
.web-demos__status[hidden] { display: none; }

.web-demos__status { margin-top: var(--s-4); text-align: center; }

@media (max-width: 900px) {
  .web-cover .cover__frame { min-height: 0; padding-top: 7rem; gap: var(--s-6); }
}

@media (max-width: 600px) {
  .web-demos { max-width: 440px; }
  .web-demos__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .web-demos__actions { flex-direction: column; }
}