/* Habillage propre à la démonstration : un bandeau, un refus, rien d'autre.
   Aucune règle ne touche l'interface elle-même — elle doit être vue telle
   qu'elle est, sinon la démonstration ne démontre plus rien. */

#demo-bandeau {
  position: relative; z-index: 1200;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px;
  background: linear-gradient(90deg, rgba(224,164,88,.16), rgba(224,164,88,.05));
  border-bottom: 1px solid rgba(224,164,88,.35);
  font-size: 12.5px; color: #cfd8e4;
}
.demo-pastille {
  flex: none;
  padding: 3px 9px; border-radius: 999px;
  background: #e0a458; color: #14181f;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.demo-texte { flex: 1; min-width: 0; }
.demo-texte b { color: #f0b96b; }
.demo-retour {
  flex: none;
  padding: 5px 13px; border-radius: 7px;
  border: 1px solid rgba(224,164,88,.45);
  color: #f0b96b; text-decoration: none; font-weight: 600;
}
.demo-retour:hover { background: rgba(224,164,88,.13); }

/* Le bandeau prend de la hauteur : l'application occupe le reste, sans quoi
   elle déborderait de l'écran d'exactement sa hauteur. */
body.en-demo { display: flex; flex-direction: column; height: 100vh; }
body.en-demo #app, body.en-demo .app { flex: 1; min-height: 0; }

/* ── le refus, quand un geste demande à écrire ── */
#demo-refus {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  z-index: 3000; max-width: 520px;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: rgba(26,33,42,.98);
  border: 1px solid var(--line, #232d3a);
  border-left: 3px solid #e0a458;
  border-radius: 10px;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.85);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#demo-refus.est-visible {
  opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
}
#demo-refus p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #e8edf4; }
.demo-essai {
  flex: none;
  padding: 7px 13px; border-radius: 7px;
  background: #e0a458; color: #14181f;
  font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap;
}

@media (max-width: 700px) {
  .demo-texte { display: none; }
  #demo-refus { flex-direction: column; align-items: stretch; left: 12px; right: 12px;
                transform: none; max-width: none; }
  #demo-refus.est-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #demo-refus { transition: none; }
}

/* ── encastrée dans la page d'accueil ──
   Le cadre de la page la nomme déjà ; son bandeau ferait doublon et mangerait
   de la hauteur, seule ressource rare dans une fenêtre posée au milieu d'une
   page. */
body.est-integre #demo-bandeau { display: none; }
body.est-integre #demo-refus { bottom: 14px; }