/* Démonstration de l'accueil : la vraie application sur ordinateur, l'image d'origine sur téléphone. */
.demo-frame { position: relative; overflow: hidden; aspect-ratio: 2640 / 1500; border-radius: 16px; background: var(--surf-2); }
.demo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .6s var(--ease), scale .6s var(--ease), filter .6s var(--ease); }
.demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s var(--ease); }
.demo-frame.ready iframe { opacity: 1; }
.demo-frame.ready img { opacity: 0; pointer-events: none; }
.demo-frame:not(.ready):hover img { scale: 1.012; filter: brightness(.92); }

.demo-start { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 16px/1 'Inter', system-ui, sans-serif; cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); transition: background-color .2s, transform .35s var(--ease), opacity .4s var(--ease); }
.demo-start:hover { background: #e7ff7a; transform: translate(-50%, -50%) scale(1.04); }
.demo-start:active { transform: translate(-50%, -50%) scale(.98); }
.demo-start::before { content: ''; width: 0; height: 0; border-block: 7px solid transparent; border-left: 11px solid currentColor; transition: opacity .2s; }
.demo-frame.loading .demo-start { cursor: progress; }
.demo-frame.loading .demo-start::before { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: demo-spin .8s linear infinite; }
.demo-frame.ready .demo-start { opacity: 0; pointer-events: none; }
@keyframes demo-spin { to { rotate: 360deg; } }

.bar { transition: opacity .35s var(--ease), translate .45s var(--ease); }
.demo-on .bar { opacity: 0; translate: 0 -130%; pointer-events: none; }

@media (max-width: 900px) {
  .demo-start { display: none; }
}