/* Ajustements des démos par-dessus assets/app.css (cadre téléphone 390 × 800). */
html, body { overflow: hidden; }
#app { box-shadow: none; }

.demo-finger {
  position: fixed; z-index: 60; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgba(246, 241, 232, .35); box-shadow: 0 0 0 2px rgba(246, 241, 232, .8), 0 6px 18px rgba(0, 0, 0, .5);
  left: 300px; top: 1000px; pointer-events: none;
  transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1), transform .12s;
}
.demo-finger.tap { transform: scale(.75); background: rgba(232, 163, 61, .55); }

/* La modale de l'app, ouverte sans showModal() pour que le doigt reste au-dessus. */
.demo-backdrop { position: fixed; inset: 0; z-index: 40; background: #000a; }
.demo-backdrop[hidden] { display: none; }
dialog.demo-modal { position: fixed; z-index: 45; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); }
dialog.demo-modal:not([open]) { display: none; }

/* Champ en cours de saisie (remplace un vrai focus, qui ferait défiler la page parente). */
.demo-focus { border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold); }

.fade-out { transition: opacity .35s, transform .35s; opacity: 0; transform: translateX(30px); }
.flash-in { animation: demo-flash 1.2s ease-out; }
@keyframes demo-flash { from { box-shadow: 0 0 0 2px var(--gold); } to { box-shadow: 0 0 0 0 transparent; } }