/* Actual iOS, Android and web screenshots. Preserve their original aspect ratios. */
.capture-hero { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,2vw,26px); align-items:start; max-width:560px; margin-inline:auto; padding:12px 0 24px; }
.capture-hero-device { position:relative; min-width:0; margin:0; border:1px solid rgba(23,18,12,.18); border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 18px 36px rgba(67,45,17,.15); }
.capture-hero-device:nth-child(2) { margin-top:38px; }
.capture-hero-device > img { display:block; width:100%; height:auto; }
.capture-hero-device figcaption { margin:0; padding:12px; font-weight:700; font-size:.85rem; text-align:center; color:#17120c; background:#fff8ec; }
.capture-hero-device .visual-zoom { right:8px; bottom:48px; }
.capture-showcase .showcase-track { align-items:start; }
.capture-showcase .showcase-slide { flex:0 0 auto; width:clamp(250px,25vw,324px); }
.capture-showcase .capture-slide--web { width:clamp(320px,68vw,870px); }
.capture-showcase .capture-slide--pdf { width:clamp(290px,35vw,440px); }
.capture-showcase .showcase-frame { --showcase-media-height:clamp(480px,48vw,650px); height:var(--showcase-media-height); padding:0; background:#f3f4f6; }
.capture-showcase .showcase-frame::after { display:none; }
.capture-showcase .showcase-frame > img { display:block; width:100%; height:100%; object-fit:contain; object-position:top center; }
.capture-showcase .showcase-caption { display:block; padding-top:16px; opacity:1; }
.capture-showcase .showcase-caption span { display:block; margin-top:5px; text-align:left; }
.capture-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,2vw,24px); padding:16px; width:100%; max-width:650px; margin-inline:auto; align-items:start; }
.capture-feature-grid--single { grid-template-columns:minmax(0,310px); justify-content:center; }
.capture-card { position:relative; margin:0; min-width:0; overflow:hidden; border:1px solid rgba(23,18,12,.15); border-radius:16px; background:#fff; box-shadow:0 12px 28px rgba(67,45,17,.12); }
.capture-card > img { display:block; width:100%; height:auto; max-height:610px; object-fit:contain; object-position:top; }
.capture-card figcaption { padding:12px; margin:0; font-size:.82rem; font-weight:700; line-height:1.4; text-align:center; background:#fff8ec; color:#17120c; }
.capture-card .visual-zoom { right:8px; bottom:52px; }
.feature-visual:has(.capture-feature-grid) > .mascot-spot { display:none; }
.capture-card .visual-zoom, .capture-hero-device .visual-zoom { min-width:44px; min-height:44px; }
@media(max-width:680px) {
  .capture-hero { width:100%; max-width:420px; gap:12px; padding-top:0; }
  .capture-hero-device { border-radius:15px; }
  .capture-hero-device:nth-child(2) { margin-top:24px; }
  .capture-hero-device figcaption { padding:10px 4px; font-size:.78rem; }
  .capture-showcase .showcase-slide { width:min(78vw,310px); }
  .capture-showcase .capture-slide--web { width:92vw; }
  .capture-showcase .capture-slide--pdf { width:80vw; }
  .capture-showcase .showcase-frame { --showcase-media-height:520px; }
  .capture-showcase .capture-slide--web .showcase-frame { height:auto; aspect-ratio:1.44; }
  .capture-feature-grid { gap:10px; padding:4px; }
  .capture-card figcaption { padding:10px 4px; font-size:.73rem; }
  .capture-card .visual-zoom { right:4px; bottom:52px; }
}

/* Keep all three platforms readable while browsing the carousel. */
.capture-showcase .showcase-slide { opacity:1; transform:none; filter:none; }
.capture-showcase .showcase-slide:not(.is-active) .showcase-caption { opacity:1; }
body[data-motion-brand="cinecyclop"] .hero-title-lockup { flex-direction:column; align-items:flex-start; }
body[data-motion-brand="cinecyclop"] .hero-title-lockup h1 { width:100%; max-width:100%; }
body[data-motion-brand="cinecyclop"] .hero-title-lockup .hero-mascot { align-self:flex-start; margin:12px 0 0; }
@media(max-width:680px) { body[data-motion-brand="cinecyclop"] .hero-title-lockup .hero-mascot { align-self:center; } }

/* 05/10/2026 : « Agrandir » en haut à droite, sur la barre d'état, pour ne plus masquer la barre d'onglets ni le bas des captures. */
.capture-hero-device .visual-zoom,
.capture-card .visual-zoom,
.capture-showcase .showcase-frame .visual-zoom { top:8px; right:8px; bottom:auto; }
@media(max-width:680px) {
  .capture-hero-device .visual-zoom,
  .capture-card .visual-zoom { top:6px; right:6px; bottom:auto; padding:0 10px; font-size:0; gap:0; }
  .capture-hero-device .visual-zoom::before,
  .capture-card .visual-zoom::before { margin:0; }
}