/* Vitrine vivante (commune à zoharys.com et à phareia.zoharys.com) : la démo réelle de Phare IA dans une fenêtre */
.demo-fenetre { overflow: hidden; border: 1px solid rgba(220, 255, 247, .1); border-radius: 12px; background: #04100F; }
.demo-barre { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(220, 255, 247, .07); background: #020A09; }
.demo-barre i { width: 10px; height: 10px; border-radius: 50%; background: #1E2A28; }
.demo-barre span { margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: #0A1A18; color: #64807A; font: 500 11.5px/1.4 "Inter", "Segoe UI", system-ui, sans-serif; }
.demo-ecran { --demo-l: 1440; --demo-h: 900; position: relative; aspect-ratio: var(--demo-l) / var(--demo-h); overflow: hidden; background: #04100F; }
.demo-ecran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.demo-ecran iframe { position: absolute; z-index: 1; left: 0; top: 0; width: calc(var(--demo-l) * 1px); height: calc(var(--demo-h) * 1px); border: 0;
  transform: scale(var(--demo-echelle, .5)); transform-origin: 0 0; opacity: 0; pointer-events: none; transition: opacity .9s ease; background: #04100F; }
.demo-prete .demo-ecran iframe { opacity: 1; }
/* Lien vers la démo libre : toute la fenêtre est cliquable, un bouton apparaît au survol */
.demo-lien { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; text-decoration: none; background: transparent; transition: background .35s ease; }
.demo-lien span { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(4, 16, 15, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font: 600 15px/1 "Inter", "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(94, 234, 212, .5); opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.demo-lien b { color: #5EEAD4; font-weight: 600; }
.demo-lien:hover, .demo-lien:focus-visible { background: rgba(4, 16, 15, .18); }
.demo-lien:hover span, .demo-lien:focus-visible span { opacity: 1; transform: none; }
.demo-lien:focus-visible { outline: 2px solid #5EEAD4; outline-offset: -2px; }
@media (hover: none) { .demo-lien { place-items: end center; padding-bottom: 14px; } .demo-lien span { opacity: 1; transform: none; padding: 10px 16px; font-size: 13.5px; } }
@media (max-width: 640px) { .demo-ecran { --demo-l: 390; --demo-h: 780; } }
@media (prefers-reduced-motion: reduce) { .demo-lien span, .demo-ecran iframe { transition: none; } }